HIERARCHICAL MENU IN FLASH


Create a new Flash movie
Draw any size shape on the stage using the drawing tools. These will be used for the button shapes.


Add text to your first button shape - Main Menu 1.
Make sure your shape and text are selected, and make them a button symbol (Insert > Create Symbol > Button) 
Name the button Main Button 1, and select Button under Behavior. Press OK 

(Note: You need to create 9 Buttons for this tutorial. So essentially you will have to copy the first 5 steps of this procedure for each one. Or you can duplicate the first symbol by pressing the button and selecting Duplicate. Name the new buttons accordingly; Main Button 2, Main Button 3, SubLevel 1, SubLevel 1a, SubLevel 2, SubLevel 2a, SubLevel 3, SubLevel 3a) 

In your timeline create 3 layers and name them like: 

Layer 1 Actions 
Layer 2 SubLevel 
Layer 3 MainLevel 

Create 40 frames in each layer. 
Create a keyframe in the 1st, 10th, 20th and 30th frame of EACH layer. 

Adding Labels and Buttons:

Labels allow you to add actions later on that with reference the named frames. We will use these to target the actions for the MainMenu 1, MainMenu 2, and MainMenu 3 buttons. Let's add the labels.

Double-click on the 1st keyframe in the Actions layer. The Frame Properties should appear. Under the Labels tab, name this frame: Start. Repeat this for the 10th, 20th and 30th frame, but name the 10th frame Menu1, the 20th frame Menu2, and the 30th frame Menu3.

Make the the MainLevel layer your current layer. Select keyframe 10 and drag the MainMenu 1, MainMenu 2 and MainMenu 3 buttons to the stage and position them as you want to see them in your movie. Repeat this for frame 20 and frame 30 in the MainLevel layer. Or you could just say Insert Keyframe at frame 20 and 30.
 
Now make the SubLevel layer your current layer. Select keyframe 10 and drag the SubLevel 1 and SubLevel 1a buttons to the stage and position them next to the MainMenu 1 button. 
In the same SubLevel layer, select keyframe 20 and drag the SubLevel 2 and SubLevel 2a buttons to the stage and position them next to the MainMenu 2 button just like you did in the example above. 
In the same SubLevel layer, select keyframe 30 and drag the SubLevel 3 and SubLevel 3a buttons to the stage and position them next to the MainMenu 3 button just like you did in the example above. 

Adding the Actions 

Now give some instructions to the button instances and make them react as a hierarchical menu. We will do one button at a time. This is an important step, so pay close attention. 
Make sure the MainLevel layer is the current active layer, and select the 1st keyframe. Double-click on the Main Menu 1 button that is on the stage. 
The Instance Properties box will appear. In the Actions tab, click on the plus sign to add an action. In the drop-down menu, select On MouseEvent. In the parameters section select Release.

While still in the Properties Box, make sure
On (Release) is highlighted and click on the plus sign again. 
In the drop-down menu, select
Goto. In the parameters section, select Label from the Frame parameter, and select Menu1 from the drop-down menu.

IMPORTANT: In frame 1, instead of selecting Menu1 as the Label parameters, you will select Start. Your first button is completed! 
Repeat steps 14-18 for each button in the MainLevel. For the Main Menu 2 buttons, the Label that it goes to should be Menu2 (except for the button in frame 20 - under the Menu2 label - that one should be set to go to Start). For the Main Menu 3 buttons, the Label that it goes to should be Menu3 (except for the button in frame 30 - under the Menu3 label - that one should be set to go to Start). 

Final Step! In the Actions layer, double-click on the frame labeled Start (keyframe 1). When the Frame Properties box appears, click on the plus sign and select Stop from the drop-down menu. Repeat this for the frames labeled Menu1, Menu2, and Menu3. While Flash should stop each time you send it to a keyframe (since by default the Goto action is Goto and Stop), adding this action to the keyframes guarantees that it will stop.

Control | Test Movie or Ctrl + Enter. 
   




Added on March 27, 2007 Comment
}