• 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 pop-up) menu is a kind of button that is common in operating systems and Web interfaces and is useful for presenting several choices under a single heading. The functionality consists of a single button that expands to show more buttons and collapses when a selection has been made (Figure 4.27).

Figure 4.27. 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 specify which frames within the movie-clip Timeline to play. Whether the menu is expanded or collapsed is 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.

2.
Add a filled rectangle to the Up, Over, Down, and Hit keyframes (Figure 4.28).

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


3.
Create a new movie-clip symbol.

Enter symbol-editing mode for the movie clip.

4.
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.29).

Figure 4.29. The pull-down menu movie-clip Timeline contains two keyframes: one at Frame 1 and another at Frame 9.


5.
Drag one instance of your button symbol into the first keyframe, and add text over the instance to describe the button.

This is the collapsed state of your menu.

6.
Drag several instances of your button symbol into the second keyframe, align them with one another, and add text over these instances to describe the buttons.

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

Figure 4.30. 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 that represent the menu choices.


7.
Add a new layer, and place labels to mark the collapsed and expanded keyframes.

In the Frame Label field of the Property Inspector, enter collapsed for the first keyframe and expanded for the second keyframe.

The labels let you 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.

8.
Select the button instance in the first keyframe and open the Actions panel.

9.
In the Script pane, enter the event handler on(release) {}.

10.
Place your pointer inside the curly braces of the event handler and select Global Functions > Timeline Control > gotoAndStop.

The gotoAndStop action appears inside the event handler.

11.
In between the parentheses of the gotoAndStop action, enter "expanded" as the label of the frame at which you want Flash to stop. Be sure to include the quotation marks (Figure 4.31).

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


12.
Select the first button instance on the last keyframe.

13.
In the Script pane of the Actions panel, enter the event handler on(release) {}.

14.
Place your pointer inside the curly braces of the event handler and select Global Functions > Timeline Control > gotoAndStop.

The gotoAndStop action appears inside the event handler.

15.
In between the parentheses of the gotoAndStop action, enter collapsed as the label of the frame at which you want Flash to stop. Be sure to include the quotation marks (Figure 4.32).

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


16.
Repeat steps 13–15 on each of the remaining button instances on this keyframe.

17.
While still in symbol editing mode for your movie clip, 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 opening and closing repeatedly 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.33).

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


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

19.
From the Control menu, choose 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.34).

Figure 4.34. 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 make Timelines communicate with one another, which enables you to create complex navigation systems.

When you understand the concept behind the simple pull-down menu, you can create menus that are more elaborate by adding animation to the transition between the collapsed state and the expanded state. Instead of having the expanded state suddenly pop up, for example, you can 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 preceding task.

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

3.
Change the actions on the button in the first keyframe from gotoAndStop to gotoAndPlay.

gotoAndPlay ("expanded");

This action makes the playhead go to the label expanded and begin playing.

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

Figure 4.35. The pull-down-menu movie clip. The expanded-menu buttons are separated on different layers so you can motion-tween them.


5.
In the last frame of the movie clip, insert a keyframe and assign a stop action (Global Functions > Timeline control > Stop).

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

7.
From the Control menu, choose 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