August 15, 2000 — updated August 2002. See below.

Hierarchical Menus in Flash

I was working on a project that was going to require a hierarchical menu structure, similar to how Windows Explorer or the Macintosh List view worked. You clicked on the arrow or plus sign, and a sublist of items would expand below it pushing everything else down.

Well I thought that this would be extremely difficult in Flash, so I made a cry out to the wonderful people in the Flash Newsgroup. A very generous fellow by the name of Mark Rainer came answering and sent me a Flash file that was amazingly close to what I was looking for.

Then I went in and did some customizations of my own and below is the results. I've given you three different options to choose from below. You can pick the best one for your needs.

Update: All of these menu samples have been updated for Flash 5 and above. I have cleaned up the code significantly (especially for sample 4) and have done more thorough testing to make sure that they work properly. I also removed the 2nd Hierarchical menu sample as it was so close to the 3rd sample that it was too redundant.

Version: 5 and above
 

 
 


Basic Hierarchy (Sample 1)

What you see on the right is a slight modification to Mark's original concept. I just went in and cleaned up some stuff to make it move much smoother and work with Masked movies.

Very simple really, and doesn't require a huge amount of ActionScript knowledge.

This is a basic Top level and sub level hierarchy. For a more complex model, see below.

The ActionScript that runs this beauty is very simple:

Set Property (menu2, Y Position) = GetProperty (menu1, _y)+GetProperty ( menu1.submenu1, _y) + 18

What you see above is one part of the script. Basically what is happening here, is that you set the property of one part of the menu (the Y position) based on the Y positions of both the previous menu and the previous submenu. This is added together to give you a result that moves the menus down. Finally, you add that last number (18) to space out the menus more.

For every menu instance, you duplicate that script to move all of the menus at once. Download the FLA sample below to see how it all works.

Flash 5 file download

Macintosh Stuffit File hierarchical_menus.sit
Windows Zip File hierarchical_menus.zip

Full Hierarchy (Sample 2 + 3)

This is a true multilevel example of a full hierarchy menu system. There is a top, 2nd and even a 3rd level menu system.

This requires some modifications to not only the ActionScript, but to the submenu elements as well.

I also built in a system that "remembers" the state of the collapsed menus.

So if you leave a third level menu expanded, close up the top level and open it again, that third level menu will still be expanded.

I won't go into a full explanation of how this was accomplished, so download the sample below and pull it apart yourself.

Note: Not for the beginner.

 

Flash 5 file download

Macintosh Stuffit File hierarchical_menus3.sit
Windows Zip File hierarchical_menus3.zip

Open/Close Hierarchy (Sample 4)

In this example, not only does it "remember" what the last sublevel you had open, it also closes any open menus as it opens a clicked on menu.

Note: Definitely not for the beginner.

 

Flash 5 file download

Macintosh Stuffit File hierarchical_menus4.sit
Windows Zip File hierarchical_menus4.zip

You are free to use this technique in your Flash movies on one condition. Just send me an e-mail letting me know how you used it so I can see what the world is coming up with using this very cool system.

If you have any further questions on how it was done, just drop me a note. See my other techniques in Flash:

Ian Kelleigh
Ian@FreeHandSource.com

Visit my site all about FreeHand and see other tips with Flash.