Free Flash Tutorials	Home • Food • Mates • Members • Tutorials • Forum • Buy Templates • Contact Us

Flash Tutorial MX 2004 - Drop-down Menu

Free Flash Tutorial

The aim of the tutorial is to learn how to create a drop down menu that will allow you to create a navigation system. This can be used to move from one part of a Flash movie to another, or to different web pages.

Example: Download the Flash file  Beg 012b

Step One: Creating a Button

You will only need one button. Each instance of the button will have different text on top of the same original symbol. You will need your button to be in your Library. To do this:

1. Go to: Insert > New Symbol
2. For Name type: My Button
3. For Behavior select: Button
4. Click: OK
5. With the Rectangle tool draw a: Rectangle
6. If the Property Inspector is closed, open it: Window > Properties
7. With the Selection tool double click on the rectangle.
8. In the Property Inspector select any fill colour you may want: Fill Colour
9. Select any: Stroke colour
10. Select any: Stroke width
11. For W (width) type: 120
12. For H (height) type: 27
13. For X position type: 0
14. For Y position type: 0
    
    
    Settings in the Property Inspector for the rectangle in the Up frame.
    
    
15. In the Timeline right click (Mac: Ctrl click) in the Over frame and select: Insert keyframe
16. With the Selection tool double click on the rectangle.
17. In the Property Inspector select a new: Fill colour
    
    
    The Over frame.
    
    

Step Two: Creating a Symbol to Contain the Menu - Menu Button - Frame 1

It is best to have the menu inside a symbol, as it makes the menu much more flexible. Then you can have the menu on stage and move from frame to frame within the movie and the menu stays intact. You can also copy and paste the menu to a completely different movie and reuse it. If you build the menu on the main stage you have to re-build it for every new frame that you wish to use it in.

1. Go to: Insert > New Symbol
2. Type the name: Menu
3. Click: OK
4. For behavior select: Movie Clip
5. If your Library is not open, open it: Window > Library
6. Drag onto the stage: My button
7. In Property Inspector position the button at X: 0
8. In Property Inspector position the button at Y: 0
9. With the text tool , type on top of My Button: Menu
10. Open the Actions panel (Window > Actions) and attach the following actionscript to : My Button
    
    on (release) {
        gotoAndStop(2);
    }
    
    Note: Make sure you select gotoAndStop(2) not gotoAndPlay(2)
    
    
11. Attach the following actionscript to: frame 1
    
    stop();
    
    
    Frame 1 of the Menu symbol.

Step Three: The Menu - Frame 2

1. Go to frame 2 and right click and select: Insert Keyframe
2. Attach the following actionscript to the Menu button in frame 2:
   
   on (release) {
       gotoAndStop(1);
   }
   
   Note: This button will now take you back to frame 1, the button in frame 1 takes you forward to frame 2.
   
   
3. Double click on the word Menu and type: Close Menu
4. When you have finished typing return to the Selection tool:
   
   
   Close Menu Button in Frame 2.
   
   
5. Drag out three (or more) buttons from the Library and place them in a column next to the menu button.
6. Open the Align panel: Window > Design Panels > Align (ctrl+k)
7. Select all three buttons (use shift click to select multiple objects).
8. Deselect the Align to stage button (if it is selected):
9. Use the Align panel to get the distance between the buttons the same:
10. Use the Align panel to get the buttons in a straight line:
11. For X position type: 130
12. For Y position type: 0
    
    
    The three new buttons correctly aligned.
    
    
13. With the Text tool , type on top of the buttons: Home, Next Page, webwasp
    
    
    Your stage should look similar to this.
    
    
14. Place the following actions onto the: Home Button
    
    on (release) {
        _root.gotoAndStop(10);
    }
    
    Note: You need to type _root so that the button refers back to the main stage and not to frame 10 in the menu Symbol.
    
    
15. Place the following actions onto the: Next Page Button
    
    on (release) {
        _root.gotoAndStop(20);
    }
    
    Note: Takes you to frame 20 of the main stage.
    
    
16. Place the following actions onto the: webwasp Button
    
    on (release) {
        getURL("http://www.webwasp.co.uk");
    }
    
    Note: Takes you to a new web page.
    
    

Step Four: The Main Stage

1. If your Edit Bar is closed, open it: Window > Tool Bars > Edit Bar
2. Click on the Scene 1 button:
   
   Note: This will take you back to the main stage. At this point your main stage should still be empty.
   
   
3. Attach the following actionscript to: frame 1
   
       stop();
   
   
4. In the timeline right click on frame 10 and select: Insert Keyframe
5. Type on stage Home and place any other content you may wish to have.
6. Go to frame 20 in the time line, right click and select: Insert Keyframe
7. Remove the word Home and replace it with something else (such as Frame 20). If you do not do this, you cannot see the difference between frame 10 and 20.
8. In the Timeline click on the Insert New Layer button:
9. In the Timeline click in frame 1 of this new layer. Select: Frame 1
10. If your Library is closed, open it: Window > Library
11. Drag onto stage the symbol: Menu
    
    Hey presto you've finished your movie! So now it's time to test.
    
    
12. Go to: Control > Test Movie

Step Five: Auto Retract the Menu - Layer 2

This is an section is an added feature. If you wish you can get the menu to auto-retract:

Example: Download the Flash file  Beg 012c

This Menu has an auto retract. Click on Menu then move the mouse to the right of the movie. The menu should close automatically.

1. Right click on the Menu button and select: Edit in Place
   
   
   You can see the Menu tab at the top in the Edit Bar.
   
   
2. Double click on Layer 1 and re-name it to: Menu
3. In the timeline add a new Layer by clicking on the Insert Layer button:
4. Re-name this new Layer to: Retract
5. Drag the Retract Layer so that it is under the Menu Layer.
6. Right click on frame 2 of the Retract Layer and select: Insert Blank Keyframe
7. With the Brush tool draw a thick line right around the buttons. Make sure the brush marks do not touch the buttons or come too close to them.
   
   
   Gray brush stroke going all the way around the buttons.
   
   
• Make sure the line is not too close to the buttons.
• Make sure the line does not touch the buttons.
  
  
8. Continue to brush in the area between the line and the edge of stage.
   
   
   Brush marks go right up to the edge of stage.
   
   
9. Return to the Selection tool:
10. Right click the brush mark and select: Convert to Symbol
11. For Name type: Retract Button
12. For Behavior select: Button
13. Click: OK
14. Right click on this new Retract button and select: Edit in Place
    
    Note: This will enable you to edit the new button.
    
    
15. In the Timeline right click the Hit frame and select: Insert Keyframe
    
    Note: This makes a copy of the brush strokes in the hit area.
    
    
    The hit area is now ready.
    
    
16. Click on the Keyframe (black dot) in the Up frame.
17. This should not only move you to the Up frame but select the brush stoke on stage. If it is not selected click on it to select it.
18. Delete the brush stroke from this frame by going to your keyboard and pressing: Delete
    
    
    The Up frame is now empty.
    
    
19. We have now finished editing the button. Click on the at the top to return to editing the Menu.
    
    
    The brush mark should now be a aqua blue.
    
    Note: The aqua blue is transparent in the Movie
    
    
20. Attach the following actionscript to Retract button:
    
        on (rollOver){
            gotoAndStop(1);
        }
    
    What this does is on roll-over go back to frame 1. This means that the movie will move automatically to frame 1 and the menu is closed in frame 1. Try it
    
    
21. Go to: Control > Test Movie

Alternative

Example: Download the Flash file  Beg 012d

This has a tweened drop down that is masked.

The menu above is identical to the previous example except that the drop down section opens with a tween. The first part of the tween is masked so that the menu appears to come out of nowhere.

Cross Ref: To learn how to create a Tween see beginners tutorial: 02 Tweening

Cross Ref: To learn how to create a Mask see beginners tutorial: 06 Masks

Other Flash Menus Systems on this site

Sliding Menu: An Intermediate level tutorial on how to build a very flexible menu system based on actionscript. This is the menu system used on the webwasp home page. I used this as it is allows you to pull any menu, or several menus, on and off stage at once. You can also use the same actionscript to move other objects around the stage.

Swinging Menu: An Intermediate level tutorial for a menu that bounces on and off stage and looks great. Built with actionscript.

Scrolling Menus: An Intermediate level tutorial for a menu that scrolls.