Tutorial details:
Written by: Billy T.
Time: 25 minutes
Difficulty Level: Intermediate
Requirements: Flash 5 or higher.
Topics Covered: How to create fly-in drop-down menues.
Assumed knowledge: Variables, Paths, Button and Clip Eent handlers.

OK I want to show you how to make this funky little actionscripted drop down menu -


 

 

You can download the finished source file for this tute here.

This involves some fairly complex scripting so if you are still struggling with concepts from earlier tutorials it would probably be best to stop reading now.

One of the advantages of making your drop down menu with actionscript (as opposed to the tweened animation drop downs I showed you the other day) is that they are hard to break. By that I mean that if the user rolls over the button quickly or clicks lots or whatever you won't see the menu get stuck or anything. The same can't be said for the tweened method where you may of noticed the drop down gets stuck open if the user moves the mouse quickly and jumps over the invisible button that is supposed to send the menu back to the closed position.

Anyway, let's get on with it. Load Flash, set your frame rate to 21, the stage size to 400X300 and the background colour dark grey.

We'll do the graphics before the scripting. Draw a bar right along the top to place our main buttons on. Mine is 400X30 - use the align pannel to center it up the top (if that makes sense!). Name the layer background and lock it. Make another layer, name it actions and drag it down the bottom. Make another and name it "main buttons" and make sure it is at the top. Make another layer and name it "sub buttons" and move it second from the top. Make another layer, name it "content" and move it to under the button layers.

Save your movie as "AS_dropDown_menu.fla".

Now click on the first frame of the content layer and draw a rectangle that fills up most of the bottom part of the stage. Select the rectangle and hit F8 to convert it to a symbol. Make it a movieclip and name it "content". Click OK and give it an instance name of "content". Double click on the content mc to go inside it. Name the one only layer "background" and then lock it. Make a new layer and name it actions - put a stop action in the first frame. Make another layer, name it content and drag it to the top. Click on frame 100 of the background layer and hit F5 to extend the frames. Now every 5 frames (5, 10, 15 etc) on the actions layer put a stop action. Do this all the way to frame 45. Now go back and give each of these keyframes frame labels. Label them like so

Frame 5 - menu1_1
Frame 10 - menu1_2
Frame 15 - menu1_3
Frame 20 - menu1_4
Frame 25 - menu2_1
Frame 30 - menu2_2
Frame 35 - menu2_3
Frame 40 - menu2_4
Frame 45 - menu2_5

OK now in frame 5 of the content layer put a keyframe and type "menu 1 / option 1". Click on frame 10 of the content layer and hit F6. Change the text to "menu 1 / option 2". Do this every 5 frames and change it to the appropriate text so that by frame 45 you end up with the text "menu 2 / option 5". Your timeline should now look like this -

Save your movie.

OK now go back to the main time line and click on the first frame of the "main buttons" layer. Draw a rectangle on the background bar along the top. The colour is irrelevant. The size of my rectangle is 50X15. Select the rectangle and convert it to a button - name it "invisible button". Double click on the button to go inside it and put a keyframe in the hit state. Delete everything from the other 3 states (tip: click on the over state where there is no keyframe and it should select the up, over and down states - hit delete). OK go back to your main timeline and you will see your button has turned a light blue - this is the colour flash uses to display invisible buttons (buttons with just a hit state). Align the bottom of the button with the bottom of the background bar. The button should be about 90 on the x axis (check the info panel)

OK now click on the first frame of the sub buttons layer. Draw a rectangle the same size as the last button - this time use the colours that you want for the up state of your buttons. Select the rectangle and hit f8 to covert it to a movieclip - name it "menu 1 sub buttons". Click ok and give the new mc an instance name of "menu1". Double click on the new mc to go inside it. The rectangle should be automatically selected so just hit f8 again and convert this to another movieclip - name this one "sub button template". Double click on the sub button template to go inside it. Make an actions layer and put stop actions in frames 1, 2 and 3. On the layer with the rectangle put keyframes in frames 2 and 3. Change the colour of the rectangle in frame 2 to what you want for the over state of your buttons. Change the colour of the rectangle in frame 3 to what you want for the down state of your buttons.

OK now go back one step so that you are inside the "menu 1 sub buttons" mc. Option drag out 3 copies of the sub button template. They should be all aligned neatly. Now from the top button down give each one an instance name - they should be sub1, sub2, sub3 and sub4. Name one and only layer "buttons". Make a new layer above it and name it "text". On the text layer, type some text above each button and then lock it.

Save your movie.

OK go back to the main timeline and align the top of the "menu1 sub buttons" mc withe the bottom of the invisible button. Click on the invisible button and hit F8 - convert it to a movieclip and name it "main button template". Now your invisible button is nested inside an mc. give it an instance name of "button1". Make a new layer up the very top and name it "text". Type some text above your invisible button mc.

Continued overleaf...