Free Flash Tutorials

Home • Members Tutorials Forum iSnapChat Contact Us 

 


Flash Tutorials

   

Flash Tutorial - Drop down Menu

012 Beginners
Flash Compatibility: MX
(Will work in F4 / F5)           For Flash MX 2004 Click Here

Written by: Phil

Length: 1100 words

Assumed Knowledge : Simple actions, creating buttons and target paths. [See: Creating Links within a Flash Movie -Target paths - Buttons]

 

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 012a

 

Example of a simple menu.

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 the Library. To do this either:

Note: At this point you only need the button in the Library.

Step Two: Creating a symbol to contain the menu - Menu Button

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. 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. You can also copy and paste the menu to a completely different movie and reuse it.

  1. Go to: Insert > New Symbol
  2. Type the name: Menu
  3. For behavior select: Movie Clip
  4. Click: OK
  5. If your Library is not open, open it: Window > Library
  6. Drag your button onto the stage.
  7. With the text tool , type on top of the button: Menu
  8. Open the Actions panel and attach the following actionscript to the: Menu button

    on (release) {
        gotoAndStop(2);
    }


    Note: Make sure you select gotoAndStop(2) not gotoAndPlay(2)
  9. Attach the following actionscript to: frame 1

    stop();

Step three: The Menu

Step four: The main stage

At this point your main stage should still be empty

Hey presto you've finished your movie. So now it's time to test: Control > Test Movie
Good luck.


Alternatives

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.

Cross Ref: To learn how to create this auto retract see the bottom section of Drop Down Menus for MX 2004. (This will work with Flash MX/5 just as well).

Example: Download the Flash file  Beg 012d


This has a tweened dropdown that is masked.

The menu above is identical to the previous example except that the dropdown 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: Tweening

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


Other Flash Menus

More drop down Menus: In the samples folder there are examples of similar menus. They are based on the same principles as the menu above but have added features such as when the mouse moves away, the menu retracts automatically. There is another sample which has a scrolling menu.

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.

 

Please indicate what you thought of this tutorial 
10 is the best: 
10 9 8 7 6 5 4 3 2 1


56335 visitors to this page since Jan 04

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

 Top of Page HomeMembers Tutorials Forum iSnapChat Contact Us 
 All material on this site is protected under international copyright © law. DO NOT reproduce any material from this site without written permission. Please ask as permission is often granted.