Tuesday, 19 May 2009

Drop down menu

This Flash tutorial will teach you how to create a basic drop down menu. A drop down is simply a menu of options that appear below the menu title. The menu of options will only be visible when the user mouses over the menu title, and the options are displayed below the menu title.

You will need some basic knowledge of buttons for this tutorial. Also a few lines of Actionscript will also be required.


Drop down menu


Step 1

Open a new Flash document with an appropriate stage size.
Create a menu title button. I have created a basic rectangle shape with #0033FF colour. The text I have used is Franklin Gothic Medium with #66FFFF colour, but you can use whatever colour and font you wish.

Photobucket


Step 2

Convert your button into a symbol by pressing F8. Give your symbol an appropriate name, check button and click ok.

Now double click on your new button and change the over, down and hit states. For more information on buttons checkout the basic buttons tutorials. Of course, you could alternatively not change the states of the buttons. You could simply leave the buttons as they are and move onto the next step.

Photobucket

Return to the main by double clicking anywhere on the stage.


Step 3

On the library panel (F11) at the right side of the screen, right click on your button and select Duplicate. A duplicate symbol window should appear, change the name to “Menu item 1” and ensure the button type is checked and click ok.

Photobucket

Still on the library panel double click on the new button (Menu item 1). Change the text in the up, over, down and hit states to an appropriate name. Then return to the main timeline by selecting the back button.

Now repeat step 3 for the number of menu options you wish. Make sure you change the names of the duplicate symbol to “Menu item 2, Menu item 3, Menu item 4” respectively.


Step 4

Return to the main timeline and convert your button (menu title) into a symbol by pressing F8. Give your symbol an appropriate name, select Movie clip as the type and click ok. You should now have a button inside a movie clip.


Step 5

Double click on your newly created movie clip to enter the timeline. Change the “layer1” name to “top”. Insert a new layer called “item 1” and drag it below the “top” layer. Repeat this for the number of menu items you have.

On the “top” layer insert a frame (F5) on frame 5. Now for each menu items you have on the timeline insert a keyframe (F6) on frame 5.

Now insert new a layer called “actions” and drag it above your “top” layer. On the 5th frame insert a new keyframe (F6). Right click on the 1st frame and then the 5th frame, select Actions and add the following:

Stop();


You timeline should look something like below:

Photobucket


Step 6

Now on frame 5 of each menu item layer drag your buttons from the library onto the stage, so each button will be on a separate layer. Make sure the buttons are directly underneath each other and aligned correctly. You stage should look like below:

Photobucket

And your timeline should look like below:

Photobucket

Step 7

Return to the main timeline and right click on the movie clip and select Actions and add the following code:

1. on (rollOver) {
2. gotoAndPlay(5);
3. }
4. on (rollOut) {
5. gotoAndStop(1);
6. }

**Line 1-3: When the user mouses over the movie clip, it will go to frame 5 where the menu items can be seen.

Line 4-6: When the user mouse is not over the movie clip, the menu items will return to frame 1 and will not be seen.


Step 8

Test your movie clip Ctrl + enter.



You should now have a drop down menu. Feel free to contact me for any questions or comments and remember to subscribe.

3 comments:

Anonymous 4 November 2009 10:47  

Great! Thank you so much!

Anonymous 18 November 2009 16:48  

it will be fine if the submenus appear smoothly...

iliketo 19 November 2009 03:07  

@Anoymous

You can add a tween into the timeline to make the effect look smooth.

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP