Free Flash Tutorials - Drop Down Menu

Today we're going to look at making a drop down menu in Flash. Drop down menus are popular with Flash developers and webmasters, as they can save space. Without them, menus wuold be cluttered with lots of links. We'll be making a nice basic one, that expands and produces three buttons, then closes when you click it again.

So to start, open Flash. Set the size of the document to around 130 x 150. We don't need much space for this one. We'll only be making one drop down menu, instead of a row of them. We will just need one layer also. On frame 1, draw a button shape on your stage, like so:

Add some text to your rectangle. Copy it, by selecting it and pressing Control + C, we will need it later. Now, we need to add a stop action to the first frame, otherwise when you play the animation, it will continue to open and close the drop down box over and over. A stop action will stop the animation at frame 1, and leave it there until we tell it to do otherwise. So select frame 1, and open your Actions panel by pressing F9. In the actions panel, type (don't copy) the following:

stop();

Close the Actions panel. You will see the "a" symbol located on frame 1 on your timeline, indicating that it has Actionscript applied to it. The Actionscript being the stop action. Now, convert the rectangle to a button, by selecting it, and pressing F8. Name it anything you want, but make sure you select Button under "Behaviour". Double click the button to enter the button editing area, and make sure that the four stages have keyframes in them, like so:

The last thing to do on frame 1, is to give the frame a label. To do this, select the frame, then go to the Properties window. You will see the Frame box:

Change the text "<Frame Label>" to "closed". Now, at frame 20 add a second keyframe. The button should appear on keyframe 20. If it does, delete it. Paste the button that you copied from the start, by pressing Control + V. Convert it to a second button. We do this because the Actionscript will count it as one button, when we want to add two different scripts to two different buttons later on.

Add another stop action to this keyframe (20), the same way you did to the first. This keyframe will also need a frame label, like the first frame. Only this time, call the frame label "open"

On frame 20, draw a few more buttons underneath the top one. Draw as many as you like. Usually drop down menus tend to have less than 6 or 7 buttons. Once you have drawn your other buttons, your stage should look something like this:

Although the design of your buttons may differ. Your top button should also have text on. I used a linear effect on mine (seen above). Add text to these new buttons you've just made. You will need to make your new buttons into actual buttons, by converting them to symbols (pressing F8). Once all your buttons are symbols, make sure to double click each of them, and to add a keyframe on the different states (Up, Over, Down, Hit). If you want, you can change the color of the buttons on the "Over" state, so they change color when the mouse rolls over them.

Next, go back to frame 1, and select the button. Open the Actions panel again, and enter the following code:

on(release){
   gotoAndPlay("open");
}

This will tell the button to go to the frame we labelled "open" once it is clicked. Now go back to frame 20 again, and select the top button. Open the Actions panel for this button, and enter the following Actionscript:

on(release){
   gotoAndPlay("closed");
}

Again, this is telling the button to go to the frame labelled "closed" when it is clicked. Now if you test your movie, when you click your top button, the buttons will appear beneath the original. However, at this point they do not go anywhere, so lets add links to them. Select your first button, and open the Actions panel. Enter this code:

on(release){
   getURL("http://www.YourSite.com");
}

This tells the button to go to the URL, YourSite.com once the button has been clicked. Add this to the rest of your buttons, and test your movie. To view the example that I made, click here (it stretches to fit the browser window). Click the Home button to open the menu, then click it again to close it.

If you had problems with this tutorial, feel free to post on the KnowFlash forum, and we will try to help you.

Last Updated ( Friday, 03 February 2006 )

< Prev		Next >

[ Back ]

In association with Coursework Essays , Free Essays , Phishing Scams and Big Red Directory