ActionScripting for Designers: Creating Animated Pull-down Menus
- 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
If you have been reading along with this series of articles on ActionScript for designers, you now have now established the foundation scripting knowledge to create some sophisticated scripting elements in Flash.
In this article, you will apply several of the simple ActionScript techniques you have learned thus far to create a rather sophisticated-looking animated pull-down menu.
The script techniques covered achieve some very nice button animations through the use of button event handlers, timeline control actions, frame labels, and motion tweens. All this will serve as a nice review before we move on to more-sophisticated scripts in the next article.
Let’s review a finished animated menu containing all the movie clips, button content, motion tweens, and ActionScripting needed to make the menus work.
Preview a Working Menu
First, download the menu.fla file here.
Open this file in Flash and preview it (Control > Test Movie).
This is a mock web site containing a series of drop-down menus labeled Resources, Web Design, and Geek Manuals (see Figure 1).
)
Figure 1 Preview of the menu SWF file with the three drop-down menus in the open position
Click on each of the menus so they animate open and remain in the open position. All the menus and buttons should animate, but none of the links will work.
This animation is created using the script to control the timeline playback of a simple tween animation in the menu movie clip.
Notice that when you roll over any of the buttons in the menus, they highlight to orange and trigger another animation below consisting of descriptive text fading quickly into view (refer to Figure 1). This is accomplished by embedded a second movie clip within each of the menu movie clips. This embedded movie clip is a little more involved, as you will see shortly. It contains a series of invisible buttons that direct Flash to display the second animation sequence.