AS2 Tree Component with a transparent background
带透明背景用AS2处理的tree组件。
posted Thursday, 9 November 2006
One of my clients recently needed a Tree component for their site navigation, which needed a transparent background (so you could see an image behind it), and had to run in FP7.  I was most bummed about the FP7 part, as it meant i couldnt use flex 2, but had to go back to Flash Studio.  Anyhow, digging through some archives on FlashCoders, I came across a working solution from Éric Thibault from June 2005.  Tweaking that a bit, and combining it with some code I previously wrote to automatically open all nodes of a tree, I came up with this solution, which works quite nicely...

有一个接收客户端需要站点导航组件，这个组件需要透明背景（可以看到背后的图象），运行在FP7(这是什么软件？？)。我比较烦FP7组件，这意味着要使用flex 2，返回到flash状态。挖掘了一此flash代码程序，2005年6月， 从Éric Thibault得到采用了交叉工作解决方案，借鉴、组合我以前编制的《自动打开tree》程序，这个解决方案相当漂亮。
此文转自采用
http://jeff.mxdj.com/as2_tree_component_with_a_transparent_background.htm


The trick is to call the makeTransparent method after each time the tree is rendered.  I followed Eric Thibault's lead, and called it with a setInterval, but since there are UIComponents (ie, the tree) in use, i suspect it would have worked just as well with a doLater().  Each time i need to hack around in AS2, I remind myself how much more i like AS3.
在每次 预渲染tree后，戏剧性的制造出透明效果，自从有了UIComponents (ie, the tree)后，采用 setInterval，能为以后的工作提供方便。每次需要AS2时，提醒我喜欢多少as3。
hack 劈， to hack破坏，to hack around 翻译不来

[ 本帖最后由 ning58 于 2008-2-1 13:41 编辑 ]

import mx.controls.Tree;
import mx.utils.Delegate;
class com.tappernimer.navigation.NavTree extends MovieClip{
private var navTree:Tree;
private var myTreeDP:XML
private var interval_config:Number;
private function NavTree(){
  // create xml object
  myTreeDP = new XML();
  myTreeDP.ignoreWhite = true;
  // load xml file
  myTreeDP.load("nav.xml");
  // let this.xmlDataLoad handle load results
  myTreeDP.onLoad = Delegate.create(this,xmlDataLoad);
}
private function xmlDataLoad(success:Boolean):Void{
  if(success){
   navTree.dataProvider = myTreeDP.firstChild;
   openTree(navTree);
  } else {
   trace("error loading data");
  }
}
private function onLoad():Void{
  // after visual components are instantiated, set event listeners and styles
  setTheStyles();
  navTree.addEventListener("change",this);
}
function setTheStyles():Void{
  _global.styles.ScrollSelectList.setStyle("backgroundColor", 0x993333);  
  navTree.setStyle("fontFamily", "arial");
  navTree.setStyle("fontSize", 12);
  navTree.setStyle("fontWeight", "bold");
  navTree.setStyle("color", 0xFFFFFF);
  navTree.setStyle("textRollOverColor", 0xffff00);
  navTree.setStyle("textSelectedColor",0xffffff);
  navTree.setStyle("borderStyle", "none");
  navTree.hScrollPolicy = "off";
  navTree.vScrollPolicy = "off";
}
private function handleEvent(event:Object):Void{
  // central switch for all events
  switch(event.type){
   case "change":
    // any change events routed to handleTreeChange
    handleTreeChange(event);
    break;
  }
}
private function handleTreeChange(event):Void{
  // what to do when a tree row is clicked
  var node:XML = event.target.selectedNode;
  if(navTree.getIsBranch(node)){
   // if the node is a branch, toggle the branch open/closed
   navTree.setIsOpen(node, !navTree.getIsOpen(node),false,true);
   // redraw transparent background after open/close
   interval_config = setInterval(setTransparent, 100, this );
  }
  var url:String = node.attributes.url;
  if(url != null){
   // if the node has a url, navigate to that url
   this.getURL(url);
  }
}
function openTree(t:mx.controls.Tree) {
  // toggle tree fully open
  var i:Number=0;
  var node:XML=t.getTreeNodeAt(i);
  node.backGround._alpha = 50;
  node.highlight._alpha = 50;
  while (node != undefined){
   if (t.getIsBranch(node) && ! t.getIsOpen(node)){
    t.setIsOpen(node,true);
   }
   i++;
   node=t.getNodeDisplayedAt(i);
  }
  interval_config = setInterval(setTransparent, 100, this );
}
function setTransparent(owner){
  // facade to make transparent to keep scoping straight
  clearInterval(owner.interval_config);
  owner.makeTransparent();
}
function makeTransparent() {
  // loop over all rows
  for (var i:Number = 0; i < navTree.rows.length; ++i) {
   //set the background and highlight alphas to 0
         navTree.rows.backGround._alpha = 0;
            navTree.rows.highlight._alpha = 0;
        }
        navTree._visible = true;
        navTree.border_mc.backgroundColorName = "";
        navTree.border_mc.drawBorder();
}
}

不错 收藏

flash8下的组件背景透明2007-10-01 11:42

http://hi.baidu.com/sakura%5Fplu ... 9f448a9e5146c4.html

在flash8中使用组件的时候,使没有backgroundAlpha属性的那么我们要想使用透明的组件要怎么做呢~~实现透明的文本最简单,1.flash中的文本工具本身就是没有背景的,如果不需要显示比较长的文档的话,使用这个就足够了.并且文本可以设置支持html格式.优点:使用方便,设置字体很简单缺点:要使用滚动条的话就需要自己画了,html方式显示图片有变形2.textarea组件简单的方法:我们可以设置textarea的backgroundColor和背景色相同mytextarea.backgroundColor ="0xABCDEF";    注意:颜色格式"0x******",使用"#******"是不起作用的.隐藏方法:设置textarea的depthChild0._alphamytextarea.depthChild0._alpha = 0;接下来设置mytextarea.setStyle("borderStyle", "none");去掉边框,textarea背景就完全看不出来啦~
这种方法对于list datafield tree 和window都是可用的,但是会使继承了list的事件失效如changed rollover等等这时,有一个有趣的方法
_global.styles.ScrollSelectList.backgroundColor = undefined;
mx.controls.listclasses.SelectableRow.prototype.drawRowFill = function (myTree:MovieClip, newClr:Number): Void {
myTree.clear();
if (newClr == undefined){
myTree.beginFill(0xABCDEF, 0);
}else{
myTree.beginFill(newClr);
};
myTree.drawRect(1, 0, this.__width, this.__height);
myTree.endFill();};用来替换了SelectableRow中的function drawRowFill(mc : MovieClip, newClr : Number) : Void
{
   mc.clear();
   mc.beginFill(newClr);   mc.drawRect(1, 0, __width, __height);
   mc.endFill();
   mc._width = __width;
   mc._height = __height;}myTree.beginFill(0xABCDEF, 0);中0xABCDEF表示颜色,0表示透明度
其中有个很诡异的问题:if...else两部的语句貌似都有执行如果给newClr定义一个颜色,就会把背景填充为那个颜色,就是只执行else里面的语句了.......而让它们同时执行的话又会丢失list的事件...
下次有兴趣可以深入研究一下~~~to be continue...(第一次写教程,多多包涵)