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

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

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:

• Drag a button out of the common Library: Window > Common Libraries > Buttons.
• Create your own button (Learn how to create buttons).

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

• To check that the button is in your Library go to: Window > Library
• If you have a copy on the main stage, delete it.

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

1. Go to frame 2 and right click (Mac - Ctrl Click) and select: Insert Keyframe
2. Attach the following actionscript to the Menu button in frame 2:
   
   on (release) {
       gotoAndStop(1);
   }
   
   Note: This button take you back to frame 1, the button in frame 1 takes you forward frame 2.
   
3. Close the Actions panel.
4. Drag out three (or more) buttons from the Library and place them in a column next to the menu button.
5. With the text tool , type on top of the button: Home, Next Page, webwasp
   
   
   Your stage should look similar to this.
   
6. Place the following actions onto the: Home Button
   
   on (release) {
       _root.gotoAndStop(1);
   }
   
   Note: You need to type _root so that the button refers back to the main stage and not to frame 1 in the menu Symbol.
   
7. Place the following actions onto the: Next Page Button
   
   on (release) {
       _root.gotoAndStop(10);
   }
   
   Note: Takes you to frame 10 of the main stage.
   
   
8. Place the following actions onto the: webwasp Button
   
   on (release) {
   getURL("http://www.webwasp.co.uk");
   }
   
   Note: Takes you to a new web page.
   
9. Your Menu is now finished. So go back to the main stage by clicking on the tab.

Step four: The main stage

At this point your main stage should still be empty

1. Open the Library and drag onto stage the menu symbol.
2. Type on stage Home and place any content you may wish to have in your Home page.
3. Attach the following actionscript to: frame 1
   
   stop();
   
   
4. Go to frame 10 in the time line, right click and select: Insert Keyframe
5. Remove the word Home and replace it with something else (such as Frame 10).
   If you do not do this, you cannot see the difference between frame 1 and 10.

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.