Animated Dropdown Menu
There are many ways to create a dropdown menu, such as through DHTML and JavaScripting. You can also create one in Cool Motion, which gives you a greater breadth of customization and can let you make your menu’s appearance and animation more unique. (Though this one’s not particularly unique; it’s just a basic example.)
The first step in creating this menu is to create the graphic that will be your menu header. I’ve just filled a rectangle with a semi-transparent gradient, and then placed text on top of that.
Convert the graphic to a Button type symbol (F8) and name it.
Edit the symbol to create your Up, Over, Down, and Hit states, whether they’re entirely new graphics, duplicates of the main state, or just color shifts.
Return to the main stage, and open your Library. Right-click on the button for your menu header, and select Duplicate. To create a full menu, we’ll need buttons for each option, and the easiest way is to duplicate the first button and then edit the duplicates.
Rename the duplicated button for Option 1, and then edit it (make sure to edit all four states) so that the text/graphics match what you want for the first option. Repeat this step until you have all of your options (I have Option 1 – Option 3; you may have only two, or five, or as many as you need).
Return to the main stage, and select the main header button again. We’re going to make a symbol out of a symbol--this time a Movie Clip type symbol.
On the movie clip’s stage, arrange the option buttons so that they reflect the full “expanded” position. Be sure to create each one on its own layer, with the layer for the header button above the others. The others are going to drop down from “behind” the header button--and they’ll each have their own animation, so they need to be on layers of their own.
Now you’ll need to use motion tweens to depict the buttons dropping down from behind the main header. For the animation to be smooth, you’ll need to time them; the first option below the rollover button will take the least time to travel the distance, while the last option below will take the most time, with the others in increments in between. If you set a certain number of frames’ difference between each, it should be uniform.
To break it down simply:
- Copy the first frame for each menu option to the last frame of the length of the animation.
- On each first frame, move the option button up until it is behind and perfectly in line with the rollover button. If your button is semi-transparent like mine, you may want to move everything but the rollover out by one frame.
- Right-click on each option layer to insert a motion tween to animate the button dropping the distance into its menu position.
- Copy your last keyframe on each layer on which the animation is shorter than on the longest layer, and paste it at the end of the animation so that it holds its static position instead of disappearing while the others animate.
- Insert a stop on the first and last frames so that it doesn’t start or restart until we tell it to.
That was quite a bit to go through in one breath, but it’s nothing you haven’t done before, so hopefully it was pretty easy to follow along with. Now there’s one last thing to do; we need to add ActionScripting to the Movie Clip symbol on the main stage so that it rolls out when the mouse moves over it.
Because we set a stop at both the beginning and end of the movie clip’s timeline, we’ll need to tell Cool Motion that when the mouse moves over the movie clip, it needs to jump past frame 1 (where the stop is) and move on to frame 2 to play freely until the end, where the stop will catch it and hold it. When the mouse moves away from the movie clip, it needs to rewind back to the beginning (making the menu vanish) and stop.
For this we’ll use the on function (on (rollOver) and on (rollOut)) and the goto function (gotoAndPlay, gotoandStop):
on (rollOver) {
this.gotoAndPlay (2) ;
}
on (rollOut) {
this.gotoAndStop (1) ;
}
Remember, this. reminds Cool Motion to apply these functions to the selected Movie Clip.