Why did we convert our submenu buttons to graphics?

Though the reasoning requires some explanation, the answer is scope. You can hide the button's visibility on the stage, but it's still active. When a visitor moves the cursor over one of the main menu buttons, the corresponding submenu appears; the submenu movie clip is in scope to the rest of the movie. Thus, when the cursor hovers over to another main menu button the previous submenu hides. At this point, if the cursor moves over to where the services submenu resides the mouse pointer would change to a hand, which would be an awkward response.

We prevent this from happening by using a graphic symbol. By duplicating the button, we acquire the same font family and size, and by deleting frames two through four we eliminate the other states associated with the button. By placing the graphic symbol instead of the button in the hide sequence, we create the illusion that the button has disappeared when the sequence plays. The graphic symbol is still in scope, but graphic symbols don't exhibit button behavior, so this technique eliminates any potentially confusing behavior.

Why did we start our submenu buttons on key frame 2 and stop our movie clips on key frame 1?

There are two reasons. First, we don't want our submenu buttons in scope or to show until the visitor moves the cursor over the main menu buttons. Without a stop command, when the movie loads, all three submenus will show once the play head in the main timeline hits frame ten. Therefore, we place a stop command on key frame one inside each movie clip. We can't instruct the submenu movie clips to play in the same key frame because there would be conflicting commands; you can't instruct the play head inside the movie clip to play and stop in the same key frame. So we placed the submenu buttons in key frame two.

Functionality

Since we have completed the user interface, let's review briefly the menu's intended behavior. When the movie loads, we see the page header and four main menu buttons fade in. As we move the cursor over each main menu button, the appropriate submenu shows. Further, as we cursor over the services submenu, and then over tutorials, we see the services submenu hide and the tutorials menu show. Continuing, if a submenu is visible and the visitor moves the cursor over the Home button, the currently visible submenu will be hidden. We use conditional logic to accomplish simple toggling behavior.

Submenus showing

So here is how it's done. First, we add some action script to show each submenu. From the main timeline, select the action script layer in frame ten and follow these steps:

• Right-click and select Insert Key Frame
• Press F9 to open the action script panel and type the following:

servicesBtn.onRollOver=function(){     servicesmc.gotoAndPlay("show"); } geninfoBtn.onRollOver=function(){     geninfomc.gotoAndPlay("show"); } tutorialsBtn.onRollOver=function(){     tutorialsmc.gotoAndPlay("show"); }

We use the onRollOver method of the button, specify which movie clip (such as services submenu), and use the gotoAndPlay method of the movie clip, followed by a parameter, in this case, show. Recall, show is the name of the frame label associated with playing the show sequence which shows the submenus. Save your file and use halomenu_menushow_stepone.fla as a comparison if you like.

Adding the hide function

To hide our submenus when another main menu button is hovered over, add the following code:

var menuOpen:String="close"; function isitOpen(){ if(menuOpen=="services"){     menuOpen="close";     servicesmc.gotoAndPlay("hide"); } else if(menuOpen=="geninfo"){     menuOpen="close";     geninfomc.gotoAndPlay("hide"); } else if(menuOpen=="tutorials"){     menuOpen="close";     tutorialsmc.gotoAndPlay("hide"); } }

Let's examine this code in greater detail:

• First, we use the var keyword to declare a variable named menuOpen. We set it as a string data type and assign it a value of close
• Next, we create a function named, isitOpen. Inside this function, we check the value of our variable, menuOpen. We can determine the value of the variable by using a Boolean check (double equal sign)
• In the first condition, we check the value of the menuOpen variable:

• If the value is equal to services, the condition is true and we set the menuOpen variable to close and instruct the services submenu to play the hide sequence
• If the value is not equal to services the first condition is false and we nest two additional checks to test the value of menuOpen for the remaining submenus

Remember, inside our submenu movie clips, for frame two in the action script layer, we set the value of menuOpen to the appropriate submenu. As a result, when the movie loads and the cursor hovers over a main menu button, such as services, the show sequence plays. Subsequently, menuOpen is set to services; the first if statement is true; the variable is set to close and the hide sequence plays. Remember, we hide any submenu which might be visible when moving the cursor over the home button by adding the following to the rollover method:

homeBtn.onRollOver=function(){     isitOpen(); }

We call the function isitOpen, and its job is to determine if any submenu is showing. If so, the submenu hides. Save your file and preview the results. Hover over any of the main menu buttons, and then hover over Home; the appropriate submenus should hide. For an example, visit:

http://midwestwebdesign.net/tutorials/flash/halomenu/halo_menu_stepthree.html