• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint

Complex Buttons

You can use a combination of invisible buttons, tweening buttons, animated buttons, and movie clips to create complex buttons such as pull-down menus. The pull-down (or popup) menu is a kind of button, common in computer systems and Web interfaces, that is useful for presenting several choices under a single heading. The functionality consists of a single button that expands to show more buttons, then collapses once a selection has been made (Figure 4.18).

Figure 4.18. Typical pull-down menus: the Mac OS file menu (left) and a Web menu from Netscape Navigator (right).


To build your own pull-down menu, the basic strategy is to place buttons inside a movie clip. The buttons control which frames within the movie-clip Timeline to play. Whether the menu is expanded or collapsed is all determined within the movie clip. Placing an instance of this movie clip on the Stage allows you to access either the expanded or collapsed state independently of what's happening in your main movie.

To create a simple pull-down menu:

1.
Create a button symbol that will be used for the top menu button as well as the choices in the expanded list. Fill the Up, Over, Down, and Hit keyframes with a filled rectangle (Figure 4.19).

Figure 4.19. A generic button with the four keyframes defined.


2.
Create a new movie-clip symbol.

Enter symbol-editing mode for the movie clip.

3.
Insert a new keyframe at a later point in the movie-clip Timeline.

You now have two keyframes. The first one will contain the collapsed state of your menu, and the second one will contain its expanded state (Figure 4.20).

Figure 4.20. The pulldown menu movie-clip Timeline contains two keyframes, one at frame one, and another at frame three.


4.
Drag one instance of your button symbol into the first keyframe. Add text over the instance to describe the button.

This is the collapsed state of your menu.

5.
Drag several instances of your button symbol into the second keyframe and align them with each other. Add text over these instances to describe the buttons.

This is the expanded state of your menu (Figure 4.21).

Figure 4.21. The two states of your pull-down menu. The collapsed state is in the first keyframe (left); the expanded state is in the second keyframe (right). The expanded state contains four button instances which represent the choices for the menu.


6.
Add a new layer and place labels to mark the collapsed and expanded keyframes. In the Frame panel in the Label field, enter collapsed for the first keyframe and expanded for the second keyframe.

The labels let you to see clearly the collapsed and expanded states of your movie clip and let you use the gotoAndStop action with frame labels instead of frame numbers.

7.
Select the instance in the first keyframe. In the Actions panel, choose Basic Actions > Go To.

8.
In the Type pull-down menu, choose Frame Label. In the Frame field, enter expanded. Uncheck the Go to and Play box (Figure 4.22).

Figure 4.22. This button sends the Flash playhead to the frame labeled expanded and stops there.


9.
Select each of the instances in the last keyframe. In the Actions panel, choose Basic Actions > Go To.

10.
In the Type pull-down menu, choose Frame Label. In the Frame field, enter collapsed. Uncheck the Go to and Play box (Figure 4.23).

Figure 4.23. This button sends the Flash playhead to the frame labeled collapsed and stops there.


11.
Add a third layer, and in the first keyframe assign the action stop.

Without this stop in the first frame of your movie clip, you would see the menu repeatedly opening and closing because of the automatic cycling of movie clips. The stop action ensures that the movie clip stays on frame 1 until you click the menu button (Figure 4.24).

Figure 4.24. The completed movie-clip Timeline for the pull-down menu. A stop action is assigned to the first frame in the top layer.


12.
Return to the main movie Timeline and place an instance of your movie clip on the Stage.

13.
From the Control menu, select Test Movie to see how your pull-down menu works.

When you click and release the first button, the buttons for your choices appear because you direct the playhead to go to the expanded keyframe on the movie-clip Timeline. When you click and release one of the buttons in the expanded state, the buttons disappear, returning you to the collapsed keyframe of the movie-clip Timeline. All this happens independently of the main movie Timeline, where the movie-clip instance resides (Figure 4.25).

Figure 4.25. The two states of the pull-down menu work independently of the main Timeline.


At this point, you have created a complex button that behaves like a pull-down menu, but still does not actually do anything (except modify itself). In Chapter 5 you'll learn how to have Timelines communicate, which enables you to create complex navigation systems.

Once you understand the concept behind the simple pull-down menu, you can create more elaborate ones by adding animation to the transition between the collapsed state and the expanded state. For instance, instead of having the expanded state suddenly pop up, create a tween that makes the buttons scroll down gently.

To create an animated pull-down menu:

1.
Create a simple pull-down menu as described in the last task.

2.
Enter symbol-editing mode for your movie clip.

3.
Instead of a gotoAndStop action on the button instance in the first keyframe, assign the actions

gotoAndPlay ("expanded");

This makes the playhead go to the label expanded and begin playing (Figure 4.26).

Figure 4.26. Actions assigned to the first button in the collapsed keyframe of the pull-down menu.


4.
Create motion tweens for your button instances in the last keyframe (Figure 4.27).

Figure 4.27. The pull-down menu movie clip. The expanded-menu buttons are separated on different layers in order to motion-tween them.


5.
In the last frame of the movie clip, insert a keyframe and assign the frame action stop.

6.
Return to the main movie Timeline and place an instance of your movie clip on the Stage.

7.
From the Control menu, select Test Movie to see how your pull-down menu works.

When you click and release the first button, the playhead jumps to the label expanded in the movie clip and begins playing, showing the motion tweening of your button choices.

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint