- Preview a Working Menu
- Menu Movie Clips
- The working scripts
- The Secondary Animation
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Menu Movie Clips
Before I cover the ActionScript that makes everything work, let’s take a closer look at each of these movie clips. You will then get a better idea of how this menu is constructed and precisely how the ActionScript is manipulating the movie clip timelines.
To start, double-click the first drop-down menu: Resources. The movie clip instance timeline opens (see Figure 2).
)
Figure 2 The drop-down menu movie clip timeline. The timeline is organized into two sections for each of the two menu states: open and closed.
The movie clip timeline is divided into two sections representing the two states of the menu: open and closed. Frame 1 contains a stop action to keep the menu in the original closed position. Frame 2 of the Control Actions layer contains a small red flag that indicates a frame label. You cannot read the entire label (Window Open), but if you click this frame and open up the Property Inspector, the entire label will show here (see Figure 3).
)
Figure 3 Window Open frame label in the Resources movie clip timeline
The first important script moves the play head to this frame, from where a short animation plays of the menu opening downward until it reaches frame 5, where it is stopped again by a stop action.
The simple scripting here moves the playback head back and forth between the open and closed portions of the timeline, animating the menu open and closed in the process.
The second timeline we need to examine can be seen by double-clicking anywhere on the open menu (playback head on frame 5).
This opens the ResourcesGraphic movie clip timeline, which is embedded in the Resources movie clip timeline (see Figure 4)
)
Figure 4 ResourcesGraphic timeline where the secondary menu tween animations are located
This timeline is composed of a series of tween animations, one for each menu item, that fade in the text at the bottom of the menu. Notice that each tween animation concludes with a stop action.
Scripts attached to each button in the drop-down menu control the location of the playback head and therefore which tween animation will play (see Figure 5).
)
Figure 5 A rollover event attached to the first button in the dropdown menu (job Links) moves the playback head to the L1 frame label (frame 5).
Notice that this timeline contains frame labels for seven buttons (L1–L7), but this particular menu uses only five of them because the Resources menu has only five choices. Notice the dashed lines in L6 and L7: the menu movie clip is used as a template for other menus on the site, which can contain up to seven buttons.
Move the playback head manually back and forth to see how the animations play on the stage.