In
this exercise, you will build a drop-down menu in Flash. This type of
menu allows the user to see the heirarchy of menu choices while making
a selection. If no selection is made, the menu closes when the cursor
leaves the menu area. Below is a functional example. You can Download the Source File
(drop_menu.fla, 40k) if you like. Although the instructions
below are adapted from Flash 4, the source file code should update to
Flash MX if you open it in that version. I have tried to update the
code below but some Flash 4 artifacts may remain.
Introduction
The
basic structure of the drop-down menu is a movie clip. A movie clip is
essentially a mini-movie within the main Flash movie. A movie clip has
its own timeline that can play its different frames independently of Flash's
main timeline. Within the movie clip timeline, different frames will show
different menu options (buttons). Because the menu's timeline is independent,
we can make it show any cluster of options we wish, regardless of where
the main timeline is playing. This is sometimes a difficult concept to
absorb. It may start making sense once you've followed this tutorial.
NOTE:
In this tutorial, you will build the menu on the main timeline and convert
it to a movie clip when finished. For the sake of demonstrating the construction
process, the sample file has not undergone this final conversion to a
movie clip. Later we'll show you a menu that has been converted to a movie
clip and that also has a couple of options added.
This
exercise should require about one hour to complete.
Preparing
the Stage
Start
a new movie (ctrl/cmnd+N). Under Movie Properties (ctrl/cmnd+M), set
the stage size to 550 x 324 pixels. Ruler Units should be pixels. Set
grid spacing to 18 pixels, check the Show Grid box, and leave the grid
and background colors at their default.
Enable
Snap.
Click
the F5 button to add 5 blank frames (for a total of 6). Add 4 new layers.
Name the layers (from top to bottom:
text
close
button
main
buttons
sub-buttons
actions
Place
a key frame with a Stop action in each frame of the actions layer. Your
timeline should now look like Figure 1:
Figure
1: Stage and Timeline Setup
Adding
the Main Buttons
In
the first frame of the main buttons layer, create a solid rectangle
(no outline) four grid squares wide and two grid squares high. Position
this at x=54, y=54 using the Object Inspector. Highlight the rectangle,
press the F8 button, and convert it to a button symbol which you may
name "button." If you wish, edit the button symbol to have
different colors on Up, Over, and Down. For this exercise, we will reuse
the same button for all 20 menu choices, adding text descriptions in
a higher layer on the timeline rather than within each button.
Copy
and paste the button so it has five instances spaced evenly horizontally.
You should be able to drag each instance by its center so it snaps to
the grid, leaving one grid square between buttons.
Adding
the Submenu Buttons
Add
a keyframe to frame 2 of the sub-buttons layer, which will place a copy
of the frame #1 button array on the stage. Drag a new instance of the
button symbol onto the stage. Scale it to 80% and drag it so it snaps
at x=79.2, y=129.6. Make 3 copies of this instance and drag each so
it snaps below the last, with about 1/2 grid square of vertical space
between each one. Draw a thick stair-step line between the bottom mid-point
of the first large button and the top mid-point of the highest smaller
button. Add a similar line to connect the rest of the smaller buttons
vertically. Group the four smaller button instances with the lines that
connect them (ctrl/cmnd+G). Your stage should look like figure 2:
Figure
2: Creating and Grouping the Submenu Buttons (Buttons Layer, Frame 2)
Add
keyframes to frames 3-6 in the buttons layer. In frame 3, move the group
of smaller buttons and lines toward the right so they are positioned
under the second large button. Starting with frame 4 and continuing
frame-by-frame, move the group of smaller buttons to the right so it
is positioned under the next large button. In this way, you will create
six unique frames. The first shows no submenu, and each successive frame
shows a submenu under a different large button.
Adding
Labels in a Higher Layer
We
used generic labels for our buttons, but of course you may use whatever
labels are appropriate, or you could create unique buttons for every
menu item.
In
frame 1 of the text layer, create text labels above the large buttons:
Main #1, Main #2, etc. You may wish to use Copy and Paste to speed this
process.
Add
a keyframe to frame 2 of the text layer and add text labels above the
smaller buttons. In the example, they are labeled sub #1, sub #2, etc.
When you have them positioned correctly, group the labels for the smaller
buttons so that in the next step you can easily move them as a group.
Add
keyframes to each successive frame in the text layer. In each one, reposition
the group of submenu labels so they appear over the smaller buttons,
being careful not to reposition the labels for the main buttons. Compare
your results to the Flash movie above.
Programming
the Main Buttons
You
now have nearly all the required elements for the menu. You will need
to program each of the main buttons so that when the user mouses over
it, the movie advances to the frame where the associated submenu appears.
Ordinarily you would use labels for each frame to avoid any confusion
in editing, but since this is a fairly simple menu with only two levels
(main and sub), you can skip adding labels and simply refer to frame
numbers when programming the actions. After the programming is done,
you'll add one last button to close the menu when the user's mouse
rolls outside the menu area.
Go
to the first frame and lock all layers except the buttons layer. Select
the first large button (if you get a hand cursor, you'll need to uncheck
the Enable Buttons option under the Control menu). This should bring
up Instance Properties. Select the Actions tab and click the plus
sign for the drop-down list of actions. Select On Mouse Event and
select Roll Over for the event type. Now choose the drop-down list
again and select Go To. Type the number 2 in the Frame Number window,
and leave the "Go to and Play" box unchecked. Click OK (see
diagram #3, below). Flash 5 and Flash MX syntax: Select the
button, open the ActionScript Panel, set the panel to Expert Mode
(using the panel's upper-right corner drop-down button) and type in
the following code:
on(rollOver) {
_root.gotoAndStop(2);
}
Program
the second button identically to the first, only type the number 3
in the Frame Number window. Similarly, program the rest of the buttons
to target the frames 4 through 6 in succession.
Figure
3: Applying the Action to the First Main Button
Adding
a Button to Close the Menu
Now
it's time to add a button that closes the submenus when the user's mouse
leaves the menu area. Select and unlock the "close button"
layer while locking all other layers. Create a rectangle with an outline
only (no fill) that snaps to the four corners of the stage. Create a
second rectangle that encloses the area where the submenus appear (to
save time, use the Object Inspector and set this inner rectangle to
x=44.6, y=31.4, w=486.8, h=243.3). Now fill the space between the two
rectangles to create a "picture frame" (see Figure 4, below)
and delete the rectangle lines. Select the fill and, using the F8 key,
convert it to a button (named "close button" in our example).
Edit this button in symbol edit mode so that the frame-shaped graphic
appears only in the Hit frame and all other frames in the button symbol
are blank. Return to the Scene 1 edit window.
Although
it will be invisible in your movie, the close button is displayed as
a light blue color on the edit stage. Double-click it and assign the
On Mouse Event action:
On (rollOver){
gotoAndStop(1)
}
Figure
4: The dark gray "picture frame" will become the Close Button.
Converting
the Menu to a Movie Clip
This
completes the construction of the menu. It can be used as is, especially
if the submenu buttons use Get Url or Load Movie. But if the menu will
take the user to other parts of the main timeline, the most useful implementation
of the menu is as a movie clip. The movie clip can sit in its own layer
and be functional regardless of where the main timeline is playing. To
convert the menu to a movie clip:
Click
on the first frame of the text layer (highest layer) so that it is highlighted.
Hold
the shift key and click on the last frame of the actions layer. This
should cause all frames in the movie to be highlighted.
Press
ctrl/cmnd+alt/opt+C to copy the frames.
Press
ctrl/cmnd+F8 to create a new symbol. Set its behavior to Movie Clip
and name it Menu.
The
new symbol appears in Symbol Edit mode and has just one frame. Highlight
the frame and press ctrl/cmnd+alt/opt+V to paste the frames from the
main timeline into the new symbol timeline. The symbol timeline should
now contain all the layers and frames of the main timeline. Return to
the Scene 1 edit window.
You
can now delete the original layers in the main timeline except one.
In the remaining layer, use Shift+F5 to remove all frames except one,
and delete all objects on the stage.
Open
the Library and drag the menu movie clip onto the stage. Use Test Movie
to test the functionality of your new menu.
Note:
to better demonstrate the creation of the menu on the main timeline,
we have not converted the sample file menu to a movie clip.
Customizing
Your Menu
We
leave this part to you. The submenu buttons can be programmed however
you like (go to a labeled frame in the main timeline, display an information
movie clip, Get Url, Load Movie, etc.). The programming would be applied
to the button instances within the movie clip, by first selecting the
movie clip on the stage and then using Edit In Place to access the buttons
in the movie clip. You could also create more frames in the entire menu
scheme to include sublevels following each submenu item, or get fancy
and build animations into the way the buttons appear. Most likely, if
you are building a menu with more than three levels, it will be to your
advantage to learn Action Scripting, which can achieve the same results
without an overly elaborate timeline.
Below
is a functional example of how we customized the menu. Note that the
menu is now a draggable movie clip. The "Drag Me" bar is a
button in the menu movie clip, and has the action:
On (Press){
startDrag ("");
}
On (Release){
stopDrag();
}
The
Start Drag action is applied by choosing Drag Movie Clip from the Actions
menu and checking "Start drag operation."
If
you roll over the Main#1 button and down to the third Sub button, you'll
see we also added another level of choices. Download
the draggable_menu.fla (64k) to see how we did it.
Feedback
We
hope this tutorial has been helpful and welcome your feedback to improve
this and future tutorials. Just send email to marc@dartfrogmedia.com.
