Free Flash Tutorials	Home • Tutorials • Forum • Webwasp Members • Templates • Mates • Food • Contact

Flash Tutorial MX 2004 - Drop-down Menu

Free Flash Tutorial

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.

Webwasp is Phil Schulz's baby. You are welcome to contact me or become my Facebook friend: Click here