Drop-down or pull-down menus are popular on Web sites and in interactives as a way of making discreet use of space on a page; multiple links can be neatly contained within a small portion of screen real estate. Elsewhere I have instructions for creating drop-downs using CSS and javascript for html pages. Here I present a Flash version with an extra bonus—the menus slide down and up, rather than just appear (poof!). It's a little more work, but it looks cool.
Deliverables: both the FLA and exported SWF files.
Part 1: The Movie Clip
With this method each main menu item and its submenu buttons are contained within a movie clip. This allows you to move and position the menu items anywhere on your page. To add a new menu item, all you need do is create a duplicate movie clip and changes the labels on the buttons (and the urls they link to). So the first thing we need to do is make a movie clip.
It may be easiest to start with one that already exists. Download this file and open it in Flash.
On the main timeline you should see an instance of movie clip symbol called ItemOne. Double-click on it to go into the movie clip timeline. Note how it is constructed:
The Actions / labels layer is currently empty; we'll add stuff to that layer in a moment.
The Menu Item text layer is fairly self-explanitory. Change the text to whatever suits you.
The Main button layer contains an instance Menu_btn that starts orange and has a yellow over state (and red down state). Of course, you can customize the button—change its size and/or colors.
Now things get tricky. The sub-item text layer is empty, save for frame 7. On frame 7 is the text for all of the drop-down sub-menu items.
Likewise, the Sub-item buttons layer is also empty except for frame 7. On that frame are three more instances of the Menu_btn arranged in a neat vertcal stack. This way we can keep them hidden until the appropriate time. As we will see below, when the main menu item is rolled-over, the movie clip will jump to frame 7, revealing the sub-items. Well, actually it will jump to frame 2 and then play to frame 7; this will allow us to create the sliding menu animation.
The final layer contains another movie clip called movingBox_mc. The box is the same size as the main menu item in frames 1 and 12, and the same size as the entire menu with sub-items in frame 7. In fact, you won't see it at all unless you hide the button layers. Why is it there? This is the bit that will actually slide up and down; the buttons actually never move. It's a clever illusion.
Now we need to modify the timeline a bit. First, in the Actions / labels layer, add keyframes at frames 2, 7, 8 and 12.
Give the following keyframes in the Actions / labels layer labels: label frame 1 "off," label frame 2 "on," and label frame 8 "close."
Put a stop(); on frames 1 and 7.
On frame 12 put: gotoAndStop(1);
That takes care of the actions and labels. Now we just have to make the tweens. Click somewhere between frames 2 and 7 in the Sliding box layer and choose Motion from the Tween pop-up menu. Click between frames 7 and 12 and add another motion tween. Now as you scrub across the timeline you should see the menu box drop down and then slide back up.
Part Two: The Main Timeline
Now head back to the main timeline. Currently the only thing on the timeline is an instance of the menu item movie clip. Give it the instance name itemOne_in.
Now select the clip and open the script window. Inside write the following script:
onClipEvent(load) {
previouslyOver = false;
}
onClipEvent(enterFrame) {
currentlyOver = this.hitTest(_root._xmouse,_root._ymouse,true);
if (!previouslyOver and currentlyOver) {
previouslyOver = true;
this.gotoAndPlay("on");
} else if (previouslyOver and !currentlyOver) {
previouslyOver = false;
this.gotoAndPlay("close");
}
}
This fairly modest script drives the whole operation. First when the movie clip loads, a variable called previoslyOver is set to false. Then in the enterFrame handler we have a hit test which checks to see if the cursor is over the movie clip. It uses an if / else comparison to do this: if the variable currentlyOver is true (if the x and y coordinates of the mouse match the location of "this" movie clip), then the playhead inside the clip's timeline jumps to the "on" label and begins to play; this starts the sliding animation which ends at frame 7 inside the clip (with all of the buttons visible). If however, previouslyOver is true and currentlyOver is false (the mouse is no longer on the movie clip), then the movie clip playhead jumps to the "close" label and begins the collapsing menu animation.
Try it out, does it work?
To add a second menu item, duplicate the movie clip in the library (and give it a different name). Then open that clip and make any necessary changes (button text most likely, but you may also want to add or subtract sub-enu items. If you change the number of sub-menu items you will have to change the size of the animated box in frame 7 to match the size of the fully extended menu).
Place an instance of the second menu on stage and give it a unique instance name.
Copy the code that is on the first movie clip and place it on the second; you shouldn't have to make any changes.
Making the Links Work
Okay so you've got the menu working, how do you make the links work? Simple.
First open the movie clip again (if you have more than one, pick one to begin with).
On each button add a "goto" code:
on (release) {
gotoAndPlay(yourFrameOrLabelHere);
}
This of course would be used to jump to another frame within the main timeline (like we did in the "Moods" exercise).
Or, if this menu is to be embedded in an html page, you can link to other html pages with this code:
on (release) {
getURL("yourURLhere");
}
If you want to target a specific frame or window in the link add the target thus:
on (release) {
getURL("yourURLhere", "_blank");
}
Or you could use _parent, _top, _self, or the name of a frame.
Go Above and Beyond
Some possibilities:
Customize the look of your menu.
Add additional menu items and sub-items.
Add sound effects.
Put the menu in a cool interface.
Point Breakdown
10 pts
Went above & beyond and made something special
9 pts
Above and beyond the basics.
8 pts
Did the basics; it works, but it's nothing fancy.
7 pts
Something's not working right.
0-6 pts
Poor showing; mostly incomplete or full of errors.
