Archive for category Tree

Customing icons on the Flash 8 Tree Component

Back to one of my favorite topics – UI Component customization. Flash’s Tree Component provides a Windows Explorer-like hierarchical menu for displaying data in a “folder” structure.

The structure it displays uses 2 separate icons, a “folder” icon for folder nodes, and a “disclosure” arrow for opening and closing the folders.

To see an example of this, place a tree component on the stage and give it an instance name of “myTree.” Then, use the following loops for some dummy data in the tree:

for(i=1;i

The Tree Component Documentation lists various styles that can be set on the component, and it seems that these properties work without first installing a theme.

I’m not sure the exact reason for this, but the component seems to want to open and close folders based on clicking the “disclosure” arrow, not the folder icon.

So, what if you wanted one icon only? For this example, I’ll use the +/- metaphor that the Windows registry and some other apps use. first, create your “plus” and “minus” movie clips, and give them linkage IDs of “plus” and “minus”, respectively.

Then, use setStyle to apply these to the tree:

myTree.setStyle("disclosureOpenIcon","minus");
myTree.setStyle("disclosureClosedIcon","plus");

This turns the disclosure arrows into plus an minus signs, but the cliché folders are still there:

tree_plusd_w_folders.gif

The solution is to create a blank movieclip and set it as the folder icon. To do this, create a new MovieClip symbol and give it a linkage ID of “blankicon.” Then, add the following to assign the empty icon:

myTree.setStyle("folderOpenIcon","blankicon");
myTree.setStyle("folderClosedIcon","blankicon"); 

And there you have it…

tree_plusminus_final.gif

, , ,

Advertisements

Leave a comment