Tree menu with ActionScript AS3

##An Example of How to Customize a Tree Component##

I came across some open source code developed by Yahoo! called the Yahoo Atra components. VERY HARD TO CUSTOMIZE! I found the documentation to be particularly inadequate for the degree that I wanted to customize their components. But it is going to be much easier for you because I am am going to provide you with a template class to help you customize to your heart's content, or just simply use what I have provided because my version of the tree component meets all your needs. You may like the Astra Tree as it is but WARNING! The Astra Tree component's horizontal scroll bar does not work. This is particularly problematic if you are trying to do a resizable UI window where you cause the scroll bars to appear when the window is too small for the contents of the window. I spent days coding a custom calculateContentWidth function that would activate the horizontal scroll bar. This way, my code will always accommodate the contents of the tree window. To view a preview of the Tree scroll down:

If this is what you are looking for then proceed with the following directions:

go to http://developer.yahoo.com/flash/astra-flash/ . Here you will see more about the Tree component on which my component is based. It will provide you with ASDoc information for all the Astra Tree APIs which believe me will come in handy.

To get a hold of the components download the http://p.yimg.com/c/ycs/ydn/flash/pkg/astra-flash-1.4.zip file by clicking the large download button on the Astra page or by just clicking this link.

Unzip the entire .zip file

Install an MXP file using Adobe Extension Manager found under the build directory in the .zip file

Once this is done you can use the component panel and drag the tree component onto the stage or into the library of your FLA

If you dragged it on stage it is now in the library so you can delete it from the stage

Download my CustomTree.zip file and unzip the example files. You will find all the custom tree classes under the folder "classes\"

drag the classes into your project and make sure all class paths have been defined for it and you are using the correct packages. Also, remember the Astra classes rely on flashes 'fl' package. Some times the fl package from Adobe needs to be added as a class path for this to work (see this link about the fl package for more info on that)

For reference check out the CustomTreeExample.fla in the zip file to see how I have set up my file.

In your FLA or a class that has access to the stage you can use the following code whenever you want to call the tree up out of the Library:

import TreeCustom;var mytree:TreeCustom = new TreeCustom();

mytree.setSize(500,200);

this.addChild(my tree);

mytree.init();

you will find Component Assets/TreeCellRenderSkins in my FLA's library. I have customized this component in a variety of ways by editing those assets. If they do not work for your purposes,
I encourage you to experiment with customizing them as you see fit. Remember this is just an example of how to customize the Yahoo! Astra Tree component to help get you started.

My implementation of the tree has a few functions that will demonstrate how to add a node to the tree and place more nodes under that node.

Here is an example of the code: