- 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
The Secondary Animation
You are now ready to dissect the secondary animation. This one is a bit more involved, but still uses the very simple ActionScripting covered thus far.
While the playback head is in frame 5, double-click anywhere on the extended menu (but not the button that opens and closes the menu). This will bring you to the edit mode of the Resources Graphic movie clip (see Figure 8).
)
Figure 8 Timeline for the secondary menu animation
This secondary menu animation works through a series of rollover events triggered by moving the mouse over each button in the menu. Move the playback head back and forth along the timeline to see each of the various menu items change to orange and the descriptive text fade into view.
Notice all the stop actions at the end of each motion tween. The focus here involves the five almost-identical scripts attached to each of the five buttons in the menu.
If you click the Job Links button (not the text, but the button), you will see the script in Figure 9.
)
Figure 9 Script attached to the Job Links button to animate the button on a rollover event and link to another URL on a Press event
This script contains two events: a rollover event and a press event. The top script with the rollover event moves the playback head to frame L1, where the button changes to orange, and the animation of the fade-in text starts. Playback is stopped at frame 11 with another stop action.
The press event controls what happens when the menu button is actually pressed. In this case, it uses a getURL action to load the Resources page into the browser. The last argument, blank, requests the browser to load this page in a new blank window.
The other four buttons in the menu have almost identical scripts. The only difference is where the playback head is being instructed to move and which URL to load when clicked. This menu can be scaled larger by simply adding more menu buttons, frame labels, and descriptive text.
Additional functionality can be added to retract the menu when users roll off the button stack. One way this can be done is to create an invisible button behind the button stack that instructs the play head to move to frame 1 of the Resources movie clip.
This requires a target path (discussed in "ActionScript for Controlling Timeline Playback" [January 2007]).
You will also need this script (or something similar) if you want to change the menu trigger to a roll over event, as discussed above. Otherwise, the menus cannot be closed, as you discovered!
These are the only scripts needed to get this animated menu working. What’s more, they contain only simple actionscript elements that are easy to implement.
For more information about the actionscripting covered in this article or about creating various types of animated menus, visit the appropriate Flash Tutorials on my web site.