POP UP MENU

How to create a pop-up menu in Flash

This TechNote walks you through making a pop-up menu in Flash, similar to the one shown in the example movie below.

The menu smart clip that ships with Macromedia Flash 5 provides another way to add pop-up menus to Flash movies. See Customizing the Flash 5 Menu Smart Clip (TechNote 15140) for details.

Note: Movie shown in small scale.

Download Windows source file popup_menu.fla.zip (8K)

Download Macintosh source file popup_menu.fla.sea.hqx (8K)

Make the movie

Follow all of the steps exactly, and refer to the images when necessary. You may wish to print out these instructions for easy reference.

How this movie functions:

1. Each Menu has its own segment of the movie's timeline. This avoids conflicts between any submenu items.
2. The rollover actions are performed by invisible buttons. Each menu item has its own invisible rollover button.
3. The rollover button is a large button the size of the entire stage area with a cutout for the menu items.
4. The menu items and hidden buttons cannot overlap or they may not function.

The steps are broken down into the following sections:

Create the layers
Set up the layer: Actions/Labels
Create the menu's button
Create the top level menu
Create the submenu
Create invisible button 1
Create invisible button 2

Create layers:

1. Create four layers, by choosing Insert > Layer from the Flash menu until you have a total of four layers.
2. Name the top layer " Actions/Labels".
3. Name the second layer from the top "Top level buttons".
4. Name the third layer from the top "Submenu buttons".
5. Name the bottom layer " Invisible buttons".

Set up layer: Actions/Labels:

1. Highlight frame 1 of the Actions/Labels layer.
2. Choose Modify > Frame.
3. In the Label tab, label the frame "START" (without quotes).
4. Select the Actions tab and assign a Stop action by clicking the plus "+" sign and select "Stop". Click OK.
5. Highlight frame 10 of the Actions/Labels layer.
6. Choose Insert > Keyframe (or use F6 on your keyboard) to insert a keyframe.
7. Choose Modify > Frame.
8. In the Label tab, label the frame "MENU 1".
9. In the Actions tab, assign a "Stop" action. Click OK.
10. Highlight frame 20 the Actions/Labels layer and press F6 to insert a keyframe.
11. With this frame highlighted, select Modify > Frame.
12. In the Label tab, label the frame "MENU 2".
13. In the Actions tab, assign a "Stop" action. Click OK.
14. Highlight frame 30 of the Actions/Labels layer and press F6 to insert a keyframe.
15. Lock this layer by clicking the padlock icon.

Create the menu's button:

1. Choose "Insert > New Symbol". Name it "Button", choosing Button as the behavior. Click OK.
2. Choose the Rectangle tool, and select a medium green-colored fill.
3. In the center of the stage, draw a rectangle similar to the one in the example shown, about 50 pixels high by 200 pixels wide.
4. Highlight the "Over" frame, and press F6 to insert a keyframe here.
5. Choose the Paint Bucket tool and select a dark green color from the palette.
6. Apply the Paint Bucket to the rectangle, changing it to dark green. This will make the button turn dark green while the cursor is over it, in the finished movie.
7. Highlight the "Down" Frame, and press F6 to insert a keyframe.
8. Choose light green as the Paint Bucket color, and apply it to the green rectangle. This will make the button turn light green while the button is pressed in the finished movie.
9. Choose Edit > Edit Movie to return to the main timeline.

Create the Top Level menu:

1. Open this movie's Library by choosing Window > Library.
2. Find "Button" in the Library, and drag a Button from the Library window to the upper left of the stage. Drag from the thumbnail preview of the Button in the window.
3. Drag a second instance of Button from the Library window to the upper right of the stage.
4. Line the two buttons up across the top of the stage, about 100 pixels apart.
5. Choose the Text Tool. For the font, choose Arial, 24 point, White, Bold.
6. Create a text block next to the first button that says "MENU 1".
7. Do the same as above for the second button, and type "MENU 2".
8. Using the Arrow tool, select and center the text on the buttons.
9. Highlight the MENU 1 button on the Stage.
10. Choose Modify > Instance. In the Actions tab, click the "+" sign, and choose "OnMouseEvent" and on the right, choose "Roll Over".
11. Click the "+" again, and choose "Goto". On the right, choose "Label", selecting "MENU 1" from the pop-up menu. Click OK.
12. Highlight the MENU 2 button on the Stage.
13. Choose Modify > Instance. In the Actions tab, click the "+" sign, choosing "OnMouseEvent" and on the right, choose "Roll Over".
14. Click the "+" again, and choose "Goto". On the right, choose "Label", selecting "MENU 2" from the pop-up menu. Click OK.
15. Select frame 20 of the Top level buttons layer and press F6 to insert a keyframe.
16. Lock this layer.

Create the Submenu items:

1. Highlight frame 10 of the Submenu buttons layer and press F6 to insert a keyframe.
2. From the Library window, drag an instance of Button on the stage below MENU 1.
3. Using the Arrow tool, center it about 20 pixels below the MENU 1 button.
4. Drag another instance of the Button on the stage, centering it about 20 pixels below the last button.
5. Choose the Text Tool.
6. On the button below MENU 1, create type that says "SUBMENU 1a".
7. On the button below SUBMENU 1a, create type that says "SUBMENU 1b".
8. Use the Arrow tool to center the text on the buttons.
9. Highlight frame 20 of the Submenu Buttons layer.
10. With frame 20 selected, choose Insert > Blank Keyframe, or press F7 on your keyboard.
    
    Note: You must insert a BLANK keyframe here or the example will not work.
11. Drag an instance of the Button from the Library on the stage below MENU 2.
12. Using the Arrow tool, center it about 20 pixels below the MENU 2 button.
13. Drag another instance of the Button on the stage, centering it about 20 pixels below the last button.
14. Choose the Text tool.
15. On the button below MENU 2, create type that says "SUBMENU 2a".
16. On the button below SUBMENU 2a, create type that says "SUBMENU 2b".
17. Use the Arrow tool to center the text on the buttons.
18. Lock this Layer.

#invisible1

Creating the invisible buttons

Invisible button 1:

1. Highlight frame 10 of the Invisible buttons layer.
2. Press F6 to insert a keyframe.
3. Select the Rectangle tool, and choose a red fill.
   
   Note: The color is not important. This example uses red for visibility and contrast.
4. Draw a rectangle covering the entire stage, slightly larger than the stage.
5. Now select yellow as the fill color.
   
   Note: The color is not important. This example uses yellow for visibility and contrast.
6. Draw a rectangle around all three MENU 1 buttons.
   
   Make sure all three buttons are completely surrounded by leaving a yellow border around them.
   
7. Using the Arrow tool, select the yellow area. Double-click the filled area so that both the fill and outline are selected and delete using the Delete key.
8. The yellow area should be removed, revealing the background. Now the red shape covers everything except the Menu 1 items, and will become the rollover area.
9. With the Arrow tool, select the red area.
10. Choose Insert > Convert to Symbol.
11. Name this symbol "Invisible Button 1" and choose "Button" as its behavior. Click OK.
12. Choose Edit > Edit Symbols.
13. Highlight the "Hit" frame in the Button's timeline and press F6 to insert a keyframe. This copies the red area from the "Up" frame into the "Hit" frame.
14. Highlight the "Up" frame and select the red area with the Arrow tool.
15. Press Delete. This removes the red area from the "Up" state. This button now only has content in the "Hit" state, making it an invisible button.
16. Choose Edit > Edit Movie.
    
    The previously red button is now a transparent blue. This represents the invisible button you just created.
    
    Note: Flash assigns this light blue color to buttons that are "invisible". Invisible buttons don't have an "Up" state, but do have a "Hit" state. Flash shows this color in the Flash editor, but renders this invisible in the finished movie.
    
17. Click this transparent blue invisible button to highlight it.
18. Choose Modify > Instance.
19. In the Actions tab, click the "+" sign, choosing "OnMouseEvent". On the right, choose "Roll Over".
20. Click the "+" sign again and choose "Goto".
21. On the right, choose "Label", selecting "START" from the pop-up menu. Click OK.

Invisible Button 2:

1. Highlight frame 20 of the Invisible buttons layer.
2. Choose Insert > Blank Keyframe.
   
   Note: This must be a BLANK Keyframe for the example to work.
3. Choose the Rectangle tool, with a red fill color.
4. Draw a rectangle covering the entire stage, slightly larger than the stage.
5. Now, select yellow as the fill color and draw a rectangle around all three MENU 2 buttons. Make sure all three buttons are completely surrounded by leaving a yellow border around them.
6. Using the Arrow tool, select the yellow area and delete it. The yellow area should be removed, revealing the background.
7. With the Arrow tool, select the red area. Double-click to select the line surrounding it as well.
8. Choose Insert > Convert to Symbol.
9. Name this symbol "Invisible Button 2" and choose "Button" as its behavior. Click OK.
10. Choose Edit > Edit Symbols.
11. Highlight the "Hit" frame in the button's timeline and press F6 to insert a keyframe.
12. Highlight the "Up" frame.
13. Select the red area with the Arrow tool.
    Double-click if necessary to select both the fill and the line surrounding it and delete.
    This removes the red area from the "Up" state.
14. Choose Edit > Edit Movie.
    The previously red button is now a transparent blue. This represents the hidden button you just created.
15. Click this transparent blue invisible button to highlight it.
16. Choose Modify > Instance.
17. In the Actions tab, click the "+" sign, and choose "OnMouseEvent". On the right, choose "Roll Over".
18. Click the "+" sign again and choose "Goto".
19. On the right, choose "Label", selecting "START" from the pop-up menu. Click OK.
    The movie is now complete.
20. Select Control > Test Movie view the finished product.
    If you have problems, open a new document and try again, following the steps exactly.

Additional information

There are many ways to create pop-up menus. An example of a Hierarchical Menu is also available from the Flash menu, under Samples > Hierarchical.

For tips on troubleshooting a Flash movie, please refer to How to Troubleshoot a Flash Movie (TechNote 14218).