AS2 Tree Component with a transparent background

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…

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[i].backGround._alpha = 0;
            navTree.rows[i].highlight._alpha = 0;
        }
        navTree._visible = true;
        navTree.border_mc.backgroundColorName = "";
        navTree.border_mc.drawBorder();
 }
}

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.

There are no comments.

Leave a Reply