Fade Sequence – Submenu buttons

When a visitor moves the cursor over one of the main menu buttons, we want the submenu buttons to fade in. Since the fade sequence is the same for all submenu buttons, we use the services submenu buttons as our example. To create the fade sequence for the buttons:

  • In the services movie clip, select key frame two in the consulting layer
  • In the properties panel, select Alpha as color

For key frame six:

  • Right-click and select Insert Key Frame
  • In Properties, select none as color
  • Between frame two through six, right-click and select Create Motion Tween:

Create Motion Tween

Save your file and use halomenu_submenu_fadein.fla as a comparison. Repeat this process for the remaining submenu buttons.

Fade Out Sequence – Submenu buttons

When a visitor moves the cursor over a main menu button, the appropriate submenu will fade in below. When the visitor rolls onto another main menu button, the old submenu should fade out and the new submenu should fade in. Since each of the Services submenu buttons has identical properties, we use the consulting button as our template for creating the fade out sequence. To create the sequence:

  • Select key frame seven
  • Right-click and select Insert Blank Key Frame
  • Left click the Consulting graphic from the library and enter the same x-y coordinates as the button

For key frame eleven:

  • Select key frame eleven
  • Right-click and select Insert Key Frame
  • Set color to Alpha

For key frame seven:

  • Set color as none
  • Between frame seven through eleven, right-click and select Create Motion Tween:

Create Motion Tween

Repeat this process for the remaining submenu graphics. To prevent the fade out sequence from looping continuously:

  • Inside the services movie clip, select the stops layer
  • Select frame one
  • Press F9 to open the action script panel and add a stop command:
stop();
  • Add stop commands to key frames six and eleven by following these steps:
  • Right click frame six and select Insert Key Frame
  • Press F9 on your keyboard to open the action script panel and type the following:
stop();

Save your file and use halomenu_submenu_fadeout.fla as a comparison.

Showing and Hiding Submenus

In order for the submenus to show or hide, we need to set two frame labels, one set to show and the other set to hide. We use frame labels so that we can move frames containing content without breaking our code. For example, if we instruct a submenu to show by using a frame number…

servicesBtn.onRollOver=function(){
    servicesmc.gotoAndPlay("10");
}

…and then move the show sequence to another frame number our code will not work. Using frame labels solves this issue. To add frame labels to show our submenus, make sure you are inside the services submenu:

  • Select key frame two in the labels layer
  • Right-click and select Insert Key Frame
  • In Properties panel, locate the frame label text field:

Frame Label

  • Type show

Then, to hide this menu:

  • Select key frame seven
  • Right-click and select Insert Key Frame
  • In Properties panel, locate the frame label text field:

Frame Label

  • Type hide
  • Right click frame ten and select Insert Frame

Repeat these steps for the remaining submenus. Save your file and use halomenu_showhide.fla as a comparison.

Choosing which submenu to show

To determine which menu we want to show, we assign a value to a variable. Since we are dealing with the services submenu, we set the variable, menuOpen (created later); to services in key frame two of the action script layer by following these steps:

  • Right click frame two and select Insert Key Frame
  • Press F9 on your keyboard to open the action script panel and type the following:
_parent.menuOpen="services";

Click the blue background arrow to exit symbol editing mode, and you return to the main stage.

Continuing, make sure on the action script layer, in frame two, you change the value of the variable (menuOpen) inside the general information and tutorials movie clips to the following:

_parent.menuOpen="geninfo";

_parent.menuOpen="tutorials";

Save your file, and remember that you can use halomenu_menushow.fla as a comparison.