Menus are the foundation for every website and in this lesson we¡¯re going to demonstrate a basic technique for creating fly out menus in Flash 5. We¡¯re going to work with Frame Labels and GoTo actions to create these menus.

Step 1: Creating the menu items

1. Type out some text or draw a shape to be the Menu button
2. Convert it to a Button by selecting it and clicking F8
3. Convert the Button you just created to a Movie Clip by selecting it and clicking F8 again and this time selecting Movie Clip. This places the button inside the Movie Clip. It's inside this Movie Clip where we're going to create all the menu actions and sub menus.

Step 2: Organizing your layers and preparing your menu

1. Create 6 new Layers by clicking the Insert Layer button 6 times
2. Drag one of the new, blank layers you just created to the very bottom of the stacking order. The bottom layer needs to be blank for now.
3. Name your layers from top to bottom as follows: Actions, Labels, About, Products, Contact, Main Menu, and Invisible Button
4. Add 40 Frames to the movie by clicking at Frame 1 of the Actions Layer and dragging down to the bottom layer to select the frames and then click F5 to add the Frames
5. Create Stop Actions at Frame 1 and Frame 22 of the Actions Layer
6. Create a Frame Label called Normal at Frame 1 of the Labels Layer and a Frame Label called Over at Frame10 of the Labels Layer
7. Create a Keyframe (F6) at Frame 10 for the About, Products, and the Contact Layers
8. Create a button for each of the About, Products, and Contact Layers and place each one at Frame 10
9. Align the 3 buttons using either your Arrow Keys or the Align Panel

Step 3: Setting up the animated menu items

1. Add a new Keyframe for each of the 3 submenu item layers at Frame 14: About, Products, and Contact.
2. Select all 3 Keyframes at Frame 10 for the About, Products, and Contact Layers by clicking first on the About Keyframe and dragging down to the Contact Keyframe. By clicking and dragging down you can select multiple layers at once. This will help you evenly create the starting point for each of the layers.
3. With all 3 Keyframes selected, use your left arrow key and move the menu items to the left approximately 20 times.
4. With the Keyframes still selected, change the Alpha to 0% by going to the Effects Panel and selecting the Alpha option from the drop down menu and then entering 0 in the field. Click Return/Enter to make the changes.
5. With the Keyframes still selected, add the Motion Tweening to them by going to the Frames Panel and selecting Motion for the Tweening option.

Step 4: Animating the menu items: Animating In

1. Copy the frames for both the Products and Contact Layers by clicking on Frame 10 of the Products Layer and dragging down to Frame 14 of the Contact Layer.
2. Drag the selected Frames from both Layers by clicking on them and dragging them to the right so that both layers line up at Frame 14 of the About Layer. What you're doing here is staggering the layers so that the menu items come in one at a time.
3. Repeat for only the Contact Layer and line up the first frame of the Contact animation with the last frame of the Products animation: Frame 18.

Step 5: Animating the menu items: Animating Out

1. Create Keyframes (F6) at Frame 22 for both the About and Products Layers. Contact will already have a keyframe at Frame 22 because that is where the animation ends.
2. Create 3 Keyframes, 1 for each of the 3 layers, at Frame 26. Preview here.
3. With all 3 layers selected at Frame 26, set the Alpha to 0
4. With the 3 layers still selected at Frame 26, use your Left Arrow key and move the menu items back to the left 20 times
5. Select Frame 22 for all 3 layers and create a Motion Tween by going to the Frames Panel and selecting Motion for Tweening
6. Select Frame 22 for the About Layer and drag down to Frame 26 of the Products Layer. This selects all the frames for each layer's animations
7. Drag the selected frames so that the first frame lines up with Frame 26 of the Contact Layer
8. Repeat by selecting Frame 26 through Frame 30 of the About Layer and dragging it over to line up with the last frame of the Products Layer.

Step 6: Adding the Button Actions

1. Create a Keyframe at Frame 22 for the Main Menu Layer
2. Go back to Frame 1 and select the Main Menu button
3. With the Main Menu button selected, open the Actions Panel and add the following actions (see image below). This puts the actions on only the first Frame and not at Frame 22. We don't want the Main Menu button to be active at Frame 22 or it will keep opening and closing itself.

This is telling Flash that when the cursor mouses over the Main Menu button, to go to the Over Label and begin playing. This is how the menu items are animated.

Step 7: Creating the Invisible Button

The invisible button will be a sort of "catch all" button that will respond to the cursor being rolled off the main menu items. We want the menu to go back to the starting place when the user mouses off the buttons.

1. Create a Keyframe (F6) at Frame 22 on the Invisible Button Layer.
2. Select the Rectangle Tool and draw a large rectangle over the stage except the areas around the menu items. We're going to create a button out of the rectangle. It's not important what color the rectangle is as it won't be visible. Preview here.
3. Select the entire rectangle and convert it to a button by clicking F8
4. Edit the button by double clicking it and moving the Over keyframe to the Hit keyframe
5. Return to the mainMenuMC
6. Select the invisible button you just created and add a Play action to it

Be sure to change "release" to "rollOver"

Step 8: Adding the final Frame Action

At Frame 34 on the Actions Layer, add the following Go To action. This will reset the animation to the beginning after the menu items have animated out.

discuss this topic to forum