Flash, Flex and ActionScript Resources -
Drop down menu
Adrian Wherry
I am a Web Developer/programmer having acrued some 20 years experience in computing. I am skilled in Script, CSS, DHTML and more recently I have become a bit of a Flash fan. I am currently working with MX and I have received awards in other flash communities for tutorials which I have written. Nowadays I teach more about using PC's and troubleshooting as opposed to specialised topics like Flash. 
By Adrian Wherry
Published on September 9, 2005
Written by: Adrian Wherry
Difficulty Level: Beginner
Requirements: Flash 5

Page 1 of 3
Written by: Adrian Wherry
Difficulty Level: begining
Requirements: Flash 5
FLA to Download
Part 1

Welcome to the Drop-Down Menu tutorial. In this tutorial we are going to look at simple but dynamic way of creating a drop-down style menu using flash animation. The effect on your web page is stunning and it is very versatile in that it can be used with frames pages or single pages with tables, etc.

Click on the arrowed tab to reveal the menu buttons.

Before we start constructing our menu in Flash, we first need to create our buttons and button cover in a graphics package. It can be constructed just as easily within Flash, but I have chosen a 3rd party graphics package to give the graphics a bit more this case I have used Fireworks 3 (as it is a macromedia product and integrates seamlessly with Flash and Dreamweaver), but any of the good graphics packages (PaintShop Pro, PhotoShop, PhotoSuite. etc) will perform just as well.

PaintShop Pro provides a simple 'buttonize' effect if you don't want to spend too long on the graphics.

Cover Size: 194 x 175 pixels
Button Size: 191 x 44 pixels
Note: These dimensions are not set in stone!

Constructing the Drop-Down Menu
Now we come to actually building the menu in Flash.

Step 1.
Click the 'New' button on the toolbar. Set the movie dimensions by clicking on MODIFY > MOVIE or press the Ctrl+M keys. (See figure 1.)

figure 1.

Create two new layers and label them cover and buttons. (See figure 2.)

Figure 2.

Page 2 of 3

Part 2

Step 2.
Next, import your graphics that you've greated using the menu FILE > IMPORT

But before you do that, decide which one you are going to import first, lets say for arguments sake we'll import the 'cover' graphic first and create a key frame at frame 1 of the layer titled 'cover'.

Import the graphic and convert it to a symbol by pressing the F8 key. A dialog box will appear (See figure 2.). Name the symbol and select the Graphic behaviour. Then click on OK.

figure 3.

After that you will need to position the cover at the top of the movie area.(See Figure 4.)

figure 4.

Step 3.
Create another key frame at position 15 on the time line in the 'cover' layer.

figure 5.

Step 4.
Add a key frame to frame 1 of the layer 'buttons' and import your button using the method described earlier and convert it into a symbol as before, but this time make the behaviour 'button' rather than 'graphic'. You will then need to add how ever many buttons you want to use to the movie by duplicating them. (See Figure 6.)

Tip: Add the text to the buttons within Flash that way you can use the one instance of the button however many times you like.
figure 6.
You will then need to align the buttons and position them beneath the cover so that only the arrow tab is showing. (See Figure 7.)

figure 7.

Page 3 of 3

Part 2

Step 5.
Add a further 3 key frames to frames 5, 10 and 15. This will allow us to add the up and down animation. In key frame 1, double-click the frame to open up the ActionScript Editor and select + > Basic > Stop. This will stop the movie from playing straight away.

In key frame 10 you will need to select the 'buttons' layer and move them all down to a position so that they can be seen below the cover. (See Figure 8.)

figure 8.

Also in this key frame, you will need to add another STOP command in the same way you did in frame 1 so that it does not return to it's normal position and again in frame 15.

Finally, as far as the animation is concerned, click on frame 15 and place the buttons back in their original starting position. Add a motion tween in between frames 5 - 10 and 10 - 15. (See Figure 9.)

figure 9.

Now if you run the movie within Flash it will show the buttons moving up and down.

Important Note: Make sure that all your buttons are grouped together using the GROUP command otherwise the buttons will not move together as one uniform block. To group your buttons together, select all the buttons (and text labels) and then press Ctrl+G keys.

That is the animation side of the menu complete.

Part 4. ActionScript
Now I will quickly go over assigning behaviours to the buttons. Obviously you will want the buttons to perform some sort of function when clicked. Here's how...


Step 1.
Select the 'down button' (the button you created which when clicked reveals the other buttons) by right-clicking on it to reveal a pop-up menu. Select Actions from the menu to open the Action Script editor. Click the + button then Go to. This will insert a partial script leaving you to fill in the frame number, in our case it will be number 5 as this is the start of the downward animation. (See Figure 10.)

figure 10.

Step 2.
To insert the script to return the buttons to the start position you will need to select frame 10 and then repeat the above sequence except you insert number 11 instead of 5. (See figure 11.)

figure 11.

Step 3.
Select frame 15 and repeat Step 1.
You can now choose what actions you wish the other buttons to perform. Normal practice is for another page to be loaded using the Get URL command.
You can also add sound to the buttons to enhance the finished article.