|
Drop Down Menu |
|
|
|
Written by Rawpulse
|
|
Friday, 03 February 2006 |
|
Ever wanted to know how to make a drop down menu in Flash? Now you can!
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 )
|
|
Tutorials 
