Completing the menu

Currently, hovering over services will show its submenu. However, hovering over general information or tutorials will show their submenus while the existing services submenu remains visible; it should be hidden, right? To fix this, for each button we add the following:

servicesBtn.onRollOver=function(){
if(menuOpen=="services"){
    null;
}
else if(menuOpen=="close" || menuOpen=="geninfo" || menuOpen=="tutorials"){    
isitOpen();    
servicesmc.gotoAndPlay("show"); } }

Here's how it works:

  • We check the value of menuOpen. If it's equal to services, we do nothing, since the menu is currently visible
  • If it's equal to close, geninfo, or tutorials, we first call the function, isitOpen

The reason for calling the function first is to hide the immediately previous submenu before showing the next submenu, such as when the visitor cursors over services, then over tutorials. How are we hiding the services submenu? Recall that when we declared our variable, we assigned a value of close. If menuOpen's value is equal to services, we know the submenu is visible and that menuOpen is now set to a value of close. We can check the value of one variable for three different values and implement a show/hide toggle behavior by using the logical OR operator, which uses the double pipe (||) in action script.

After the function call, we instruct the appropriate movie clip, in this instance, services, to play the show sequence. You might find the logic here a bit odd, since we are instructing all submenus to be hidden first, and then we instruct the services submenu to show. Our reason is simple; we are ensuring that only the correct submenu will show on a main menu button rollover. For the other two main menu buttons, we alter the last if statement for General Info:

geninfoBtn.onRollOver=function(){
if(menuOpen=="geninfo"){    
null;
}
else if(menuOpen=="close" || menuOpen=="services" || menuOpen=="tutorials"){    
isitOpen();    
geninfomc.gotoAndPlay("show"); } }

And for Tutorials:

tutorialsBtn.onRollOver=function(){
 if(menuOpen=="tutorials"){    
null; }
 else if(menuOpen=="close" || menuOpen=="services" || menuOpen=="geninfo"){    
isitOpen();    
tutorialsmc.gotoAndPlay("show"); } }

For each button we change the last two checks on the menuOpen variable as appropriate. Thus, for the general information button the last two checks on menuOpen need to be services and tutorials. For the tutorials button, change the last two menuOpen checks to services and geninfo. Save your file and preview the results; at this point your menu should be fully functional.

Organize the library

Since our library at the moment is disorganized, let's move our work into a logical folder scheme. Use the New Folder icon:

Create the following folders and place the corresponding symbols as follows:

  • Tutorials Folder – All related tutorials symbols
  • Services Folder – All related services symbols
  • General Info Folder – All related general information symbols

You can see the completed work here:

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

Summary

In this article we learned how to use Flash to create a simple halo menu. We also learned a bit about:

  • Type of menus available
  • Advantages and disadvantages for each type of menu
  • Creating button symbols using the text tool
  • Creating submenus using movie clips
  • Duplicating buttons and convert them to graphics to solve scope issues
  • Creating a variable, function and assign different values to the variable
  • Creating simple conditional logic using if statements to determine the value of the variable and perform an appropriate action.
  • How to check a variable for three different values using the logical operator OR.

Take what you learned here and customize your halo menu to your heart's content!

If you have questions, please follow the link below.

http://midwestwebdesign.net/tutorials/contact.aspx