Drop down Menu

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 of a simple dropdown 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 your Library. To do this:

Go to: Insert > New Symbol
For Name type: My Button
For Behavior select: Button
Click: OK
With the Rectangle tool draw a: Rectangle
If the Property Inspector is closed, open it: Window > Properties
With the Selection tool double click on the rectangle.
In the Property Inspector select any fill colour you may want: Fill Colour
Select any: Stroke colour
Select any: Stroke width
For W (width) type: 120
For H (height) type: 27
For X position type: 0
For Y position type: 0

Settings in the Property Inspector for the rectangle in the Up frame.
In the Timeline right click (Mac: Ctrl click) in the Over frame and select: Insert keyframe
With the Selection tool double click on the rectangle.
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.

Go to: Insert > New Symbol

Type the name: Menu

Click: OK

For behavior select: Movie Clip

If your Library is not open, open it: Window > Library

Drag onto the stage: My button

In Property Inspector position the button at X: 0

In Property Inspector position the button at Y: 0

With the text tool , type on top of My Button: Menu

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)

Attach the following actionscript to: frame 1

stop();

Frame 1 of the Menu symbol.

Step three: The Menu - Frame 2

Go to frame 2 and right click and select: Insert Keyframe
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.
Double click on the word Menu and type: Close Menu
When you have finished typing return to the Selection tool:

Close Menu Button in Frame 2.
Drag out three (or more) buttons from the Library and place them in a column next to the menu button.
Open the Align panel: Window > Design Panels > Align (ctrl+k)
Select all three buttons (use shift click to select multiple objects).
Deselect the Align to stage button (if it is selected):
Use the Align panel to get the distance between the buttons the same:
Use the Align panel to get the buttons in a straight line:
For X position type: 130
For Y position type: 0

The three new buttons correctly aligned.
With the Text tool , type on top of the buttons: Home, Next Page, webwasp

Your stage should look similar to this. (Click to enlarge)
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.
Place the following actions onto the: Next Page Button

on (release) {
_root.gotoAndStop(20);
}
Note: Takes you to frame 20 of the main stage.
Place the following actions onto the: webwasp Button

on (release) {
getURL("http://www.webwasp.co.uk/");
}
Note: Takes you to to a new web page.

Step four: The main stage

If your Edit Bar is closed, open it: Window > Tool Bars > Edit Bar
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.
Attach the following actionscript to: frame 1

stop();
In the timeline right click on frame 10 and select: Insert Keyframe
Type on stage Home and place any other content you may wish to have.
Go to frame 20 in the time line, right click and select: Insert Keyframe
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.
In the Timeline click on the Insert New Layer button:
In the Timeline click in frame 1 of this new layer. Select: Frame 1
If your Library is closed, open it: Window > Library
Drag onto stage the symbol: Menu

Hey presto you've finished your movie! So now it's time to test.
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:

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

Right click on the Menu button and select: Edit in Place

You can see the Menu tab at the top in the Edit Bar.
Double click on Layer 1 and re-name it to: Menu
In the timeline add a new Layer by clicking on the Insert Layer button:
Re-name this new Layer to: Retract
Drag the Retract Layer so that it is under the Menu Layer.
Right click on frame 2 of the Retract Layer and select: Insert Blank Keyframe
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.

Continue to brush in the area between the line and the edge of stage.

Brush marks go right up to the edge of stage.
Return to the Selection tool:
Right click the brush mark and select: Convert to Symbol
For Name type: Retract Button
For Behavior select: Button
Click: OK
Right click on this new Retract button and select: Edit in Place

Note: This will enable you to edit the new button.
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. (Click to enlarge)
Click on the Keyframe (black dot) in the Up frame.
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.
Delete the brush stroke from this frame by going to your keyboard and pressing: Delete

The Up frame is now empty.
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. (Click to enlarge)

Note: The aqua blue is transparent in the Movie
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
Go to: Control > Test Movie

Alternative

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 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.