Flash ActionScripting for Designers: Scripting a Telescoping Menu
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Flash is a great tool for creating animated menus and other navigation elements. As you have seen in the previous article in this series, rather sophisticated animated pull-down menus can be created using simple ActionScript.
In this article, you will learn how to create a telescoping menu system using slightly more complex ActionScripting. The advantage of this menu is that it is compact in the closed position, saving valuable screen real estate, but "telescopes" open to create a large menu that can accommodate a lot of links.
To see this menu in action, visit the Web Design textbook on my web site (see Figure 1).
)
Figure 1 The working menu on a Web site
Click on each of lesson buttons. Notice that they expand to reveal a series of menu options. Also, notice that the other buttons in the menu also move down. Click on another menu button, and the menu below again moves downward to make room for the newly visible buttons. Click the same menu item again, and the button collapses, moving the menu elements below it upward to a new position.
What is of interest is that the menu is "smart" enough to know how much it should shift all the menu items up or down when the menu is expanded or contracted (see Figure 2).
)
Figure 2 The menu with several items telescoped open
Go ahead and open and close several menu items to see how this works.
Also, each item in the menu is an active button that will open a new content page in the HTML frame to the right. Test this by pressing some of the orange buttons in the menu.
Let’s now take a look at the Flash file that was used to publish my menu. Download the geekmanual.fla file here. Only the blue portion of the menu is present because this is the only part of the page that is Flash-based. The rest was created in Dreamweaver and placed in another HTML frame.
If you test this Flash file (Control > Test Movie), you will notice that the menu works the same. It telescopes open when a button is clicked the first time and telescopes closed when the same button is clicked again. However, because this file has not been published to the Web, the menu buttons do not work.
When you are done exploring the menu, close the preview window.
Menu Components
Let’s take a look at the various components of the FLA file starting with the main timeline (see Figure 3).
)
Figure 3 The main timeline and stage of the geekmenu.fla file
The main timeline is divided into three labeled sections: Menu, up, and down. This looks similar to the menu I covered in the last article in this series, "ActionScript for Creating Animated Pull-down Menus". However, here there are no tweens for animating the menu. In this example, you will use ActionScript to animate the menu up and down. In fact, notice that nothing seems to happen when you move the playback head to the "up" or "down" frames. There are things changing here, but they are happening with the ActionScripting, so you need to open the Actions window (Window > Actions) to see them (see Figure 4).
)
Figure 4 ActionScript in the "up" and "down" frames
I will review this script in more detail later, but these are the instructions for all the menu items when they are in the compressed or up position.
Move the playback head to the "down" frame and notice that the script here is very similar (but not exact!). This script controls the menu items when they are open or in the down state.
Now open the Library window (Window > Library). See Figure 5.
)
Figure 5 The geekmenu.fla Library, showing the seven movie clip symbols that constitute the menus and the 26 button symbols that constitute the menu items
Let’s take an inside look at several of these Library elements, starting with the buttons. Double-click on the first button: 1.1. As you can see in Figure 6, this is a simple button timeline with an orange rectangle in the Over frame, a button sound in the click layer, and a blue background that is the same color as the menu background. If you want to customize the menu to suit your particular needs, here is where you will want to start. Modify the graphic in the Line layer and the audio in the click layer; then copy the button as many times as you need. Change the text in the Text layer for each button and you have almost an entirely new menu.
)
Figure 6 The timeline of the menu1 movie clip—the other menus have very similar (but not exact) timelines
Next, double-click on the menu1 movie clip to display its timeline (see Figure 7). Each of the seven main items in this menu has a menu movie clip here in the Library. To complete the customization of your menu, you will need to modify the graphics in the Title Button and Rule Line layers.
)
Figure 7 The menu1 movie clip timeline showing the menu in the closed or up state, above, and in the open or down state
In the timeline we have our familiar open and shut states—here labeled "up" and "down". There is no tween set up here to animate the menu open and closed, but you could easily add one, as described in previous article in this series ("ActionScript for Creating Animated Pull-down Menus") to further customize this menu.
Note that in Figure 7, the down frame menu buttons are arranged in the layout in which they appear when the menu item is fully telescoped out. The buttons are absent entirely in the up frame.
The six other menu movie clips are almost identical. The only difference is that they hold the menu buttons unique to that menu. Although it is easy to add or delete buttons to customize your menus, you need to hand edit these. In the next level of sophistication, you could write ActionScript to do this for menu creation for you on the fly, as needed.