Lesley Thiel

View all articles by Lesley Thiel
Creating dynamic menus is a really useful tool. This tutorial shows you how to create dynamic menus to include submenus. You can see the code and how it works in the source file.

The root timeline contains a movie clip, called "menu MC", which contains the movie clips needed to grow the menu. In the actions frame of root, a series of variables, representing the menu and submenu items, are declared. These could equally be stored in an external file and loaded into the movie when it is launched. The variable "total" is used to keep track of the number of main menu items. In this example, the submenu items are numbered in such a way that the first number(s) after "stext" represents the number of the menu item calling it, while the last number is the identifier within the menu. For example, stext11 is the first submenu item of main menu item 1, while stext42 is the second submenu item of main menu item 4. You can play around with this numbering naming scheme and find one that suits you.

Inside the "menu MC" movie clip are two further clips representing the main menu and submenu buttons. The first step in generating the menu is to create the buttons of the main menu using duplicatemovieclip in a for loop limited by _root.total. 


for (i=1; i<|=_root.total; ++i) {
        //duplicate movie clip
        menuMC.duplicatemovieclip("menuMC"+i, i);
        
        //then position them one under the other
        
        this["menuMC"+i]._y = this["menuMC"+(i-1)]._y+this["menuMC"+(i-1)]._height;
        
        //The next step is to assign a variable to
        //each main menu button, so that when it is clicked,
        //there is a simple method for identifying the menu item.
        
        this["menuMC"+i].choice = i;
        
        //Finally,  track how many levels have been used to
        //create the main menu, so that these can be
        //added to  as the  submenus are duplicated.
        
        levelTrack = i;
}

The next step is to initialize the submenu buttons, position them and then hide them from view until needed. By checking to see if the submenu variable for a given menu item exists, we circumvent having to go through the whole process for menu items that do not contain submenus. Those submenus that do exist are numbered using the scheme described above. 

for (i=1; i<|=_root.total; ++i) {
        //check to see if the item has a submenu
        if (_root["subText"+i]>=1) {
                name = "stext"+i;
                for (n=1; n<|=_root["subText"+i]; ++n) {
                        levelTrack += 1;
                        subMenuMC.duplicatemovieclip(name+n, levelTrack);
                        this[name+n]._visible = false;
                        this[name+n].choice = (i*10) + n;
                }
                //position first submenu item under parent
                this[name+1]._y = this["menuMC"+i]._y+this["menuMC"+i]._height;
                //position rest of submenu items
                for (n=2; n<|=_root["subText"+i]; ++n) {
                        this[name+n]._y = this[name+(n-1)]._y+this[name+(n-1)]._height;
                }
        }
}

When the menu buttons are clicked, there must be a way to close up the menu items that are currently open. Perhaps the easiest way is simply to switch off the visibility of all the submenu items and move the main menu buttons back to their original position. 

function resetMenu() {
        for (i=1; i<|=_root.total; ++i) {
                if (_root["subText"+i]>=1) {
                        name = "stext"+i;
                        for (n=1; n<|=_root["subText"+i]; ++n) {
                                this[name+n]._visible = false;
                        }
                }
                this["menuMC"+i]._y = this["menuMC"+(i-1)]._y+this["menuMC"+(i-1)]._height;
        }
}

This function is then the first call in another function that is called when any of the menu items are clicked. The call for this function is located on the buttons of the menu items. 

function submenuShow() {
        resetMenu();
        //then test to see if the button that has been clicked has a submenu
        if (_root["subText"+choice]>=1) {
                //if there is a submenu to be displayed then make these menu items visible
                name = "stext"+choice;
                for (n=1; n<|=_root["subText"+choice]; ++n) {
                        this[name+n]._visible = true;
                }
                //and position the rest of the main menu item below the submenu
                
                this["menuMC"+(choice+1)]._y = this[name+(n-1)]._y+this[name+(n-1)]._height;
                for (i=choice+2; i<|=_root.total; ++i) {
                        this["menuMC"+i]._y = this["menuMC"+(i-1)]._y+this["menuMC"+(i-1)]._height;
                }
        }
}

This Flash file will allow for the creation of up to 99 menu items, each with up to 9 submenu items. If you play around with the numbering and the math used to derive the variable "choice", you can extend these. This can be further refined by adding in a script in the reset function that will test only for the buttons that are visible.

To use the buttons to load urls, simply add in the appropriate url references within the variable list. For example, to link to nbc.com from the submenu button stext21 

stext21 = "puppies";
//this is a reference for a URL that will be launched by the button "puppies"
//any URL should have the variable name urls plus the number of the text name for that button
urls21 = "http://www.nbc.com";

then on the submenu movie clip button add the code:

on (release) {
        myURL = eval("_root.urls"+choice);
        if(myURL != null){
                getURL(myURL);
        }
}

To ensure that the url opens in a new browser window, add "_blank" to the getURL call

getURL(myURL, "_blank");

Equally, this can be used to call a URL into a named frame, or to call a JavaScript.

Using a similar approach allows the buttons to access different scenes in the _root, though it is important, when doing so, to remember that scene names will not be recognized from within the nested movie clips of the menu, and that the linkage will have to be to unique frame names.

Have fun!