• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

The Movie Clip As a Button

Timeline in which animations play independMovie clips are objects that have their own ently from the main Timeline. This fact lets you put movie clips inside button symbols to create animated buttons, as described earlier in this chapter. But movie clips can also behave like buttons all by themselves. You can assign many of the same event handlers to movie clips that you assign to buttons. Assign an on(release) or an onRelease event handler to a movie clip, for example, and the event will respond when the viewer clicks the movie-clip instance.

Within the movie-clip Timeline, you can assign the frame labels _up, _over, and _down, and those keyframes will behave like the Up, Over, and Down keyframes of a button symbol (Figure 4.51). The _up label identifies the state of the movie clip when the pointer is not over the hit area. The _over label identifies the state of the movie clip when the pointer is over the hit area. And the _down label identifies the state of the movie clip when the pointer is over the hit area and the mouse button is pressed. The hit area of a movie clip is, by default, the shape of the movie clip. You can define a different hit area by assigning another movie clip to the property hitArea.

Figure 4.51. The _up, _over, and _down labels of a movie-clip symbol correspond to the Up, Over, and Down keyframes of a button symbol.


Beware—actions assigned to movie clips behave quite differently from those assigned to buttons. An event handler on a movie clip belongs to that movie clip’s Timeline, whereas an event handler on a button belongs to the Timeline on which it is sitting. Consider this simple code:

on(release){
   gotoAndStop(10); 
} 

Why Have Movie Clips Behave Like Buttons?

Why would you want to use a movie clip as a button? Why not just use a regular button? Movie clips offer you more power and greater flexibility to deal with dynamic situations. Using movie clips as buttons lets you create more complex and sophisticated buttons. Because you can define the hit area of a movie clip yourself, you can shrink, grow, move, and change it dynamically by using ActionScript. You can’t do that with buttons. Using movie clips as buttons also makes it easier to combine the methods of movie clips with the events of buttons. The startDrag() movie clip method, for example, can be tied to the on(press) event handler on a single movie clip.

This doesn’t mean that you shouldn’t use buttons at all. It does mean you have more options for your creative toolkit.


When this action is assigned to a movie clip, Flash moves the playhead of the movie clip’s Timeline to frame 10. When the code is assigned to a regular button, Flash moves the playhead of the main Timeline to frame 10. You will learn more about navigating different Timelines in Chapter 5.

To assign a button event handler to a movie clip:

1.
Create a movie-clip symbol, and drag an instance of it to the Stage.

2.
Select the instance, and open the Actions panel.

3.
Choose Actions > Movie Control > on. The on(release) event handler is assigned to the movie-clip instance.

4.
Choose different events in the Parameters pane (Figure 4.52).

Figure 4.52. The on action can be assigned to a movie clip as well as a button. The Actions panel looks identical for both.


or

1.
Create a movie-clip symbol, drag an instance of it to the Stage, and give the instance a name in the Property Inspector.

2.
Select the first frame of the main Timeline, and open the Actions panel.

3.
Choose Objects > Movie > Movie Clip > Events > onRelease.

4.
In the Object field, enter the name of your movie-clip instance.

The onRelease event handler is assigned to the movie-clip instance.

5.
Choose a different event in the Events category to change the event (Figure 4.53).

Figure 4.53. The onRelease event is assigned to the movie clip called myMovieClip.


To define the Up, Over, and Down keyframes of a movie clip:

1.
Create a movie-clip symbol, and enter symbol-editing mode for it.

2.
Insert a new layer.

3.
Choose Insert > Keyframe twice along the Timeline.

Two more keyframes are created in the movie-clip Timeline (Figure 4.54).

Figure 4.54. Two additional keyframes, at frames 7 and 13, are created in a new layer.


4.
Select the first keyframe, and type _up as its label in the Property Inspector.

5.
Select the second keyframe, and type _over as its label in the Property Inspector.

6.
Select the last keyframe, and type _down as its label in the Property Inspector. The three keyframes define the Up, Over, and Down states of your movie clip (Figure 4.55).

Figure 4.55. Label the three keyframes in the Property Inspector.


7.
In the layer containing your graphics, create keyframes corresponding to the labeled keyframes you just created, and alter your graphics for the Up, Over, and Down states (Figure 4.56).

Figure 4.56. The three keyframes contain the Up, Over, and Down states of your movie clip.


8.
Insert another new layer.

9.
Select the first frame of the new layer, and open the Actions panel.

10.
Choose Actions > Movie Control > stop (Esc + st) (Figure 4.57).

Figure 4.57. Add a stop action to the first frame to prevent the movie clip from playing automatically.


The stop action prevents the movie clip from playing automatically.

11.
Exit symbol-editing mode.

12.
Drag an instance of your movie-clip symbol to the main Stage.

13.
Assign a button event handler to your movie-clip instance.

14.
Test your movie.

Flash uses the _up, _over, and _down keyframes for the Up, Over, and Down states of the movie clip. You must have a button event handler assigned to the movie clip to make it behave like a button and recognize the labeled keyframes.

To create an animated button by using a movie clip:

1.
Choose Insert > New Symbol.

2.
Select Movie Clip, and click OK.

A new movie-clip symbol is created in your library, and you are put in symbol-editing mode.

3.
Insert a new layer, and define the _up, _over, and _down labels for three separate keyframes, as described in the preceding task.

4.
In the first layer, create keyframes corresponding to the labeled keyframes you just created.

5.
For each keyframe in the first layer, create a motion or shape tween that you want to play for the Up, Over, and Down states of the button (Figure 4.58).

Figure 4.58. Create animations for the Up, Over, and Down states in the _up, _over, and _down keyframes.


6.
Insert another new layer, and create keyframes corresponding to the beginning and end of each labeled state.

7.
Select each beginning keyframe, and in the Actions panel, choose Actions > Movie Control > play.

The play action will play your tween for the Up, Over, and Down states.

8.
Select each ending keyframe, and in the Actions panel, choose Actions > Movie Control > goto.

9.
From the Type pull-down menu in the Parameters pane, choose Frame Label.

10.
From the Frame pull-down menu, choose the labeled state to which each ending keyframe corresponds.

For the Up, Over, and Down states, the ending keyframe sends the playhead back to the beginning keyframe, creating a loop for each of your tweens (Figure 4.59).

Figure 4.59. The actions in the top layer play and repeat the tweens in each labeled keyframe.


11.
Exit symbol-editing mode.

12.
Drag an instance of your movie clip to the Stage.

13.
Assign a button event handler to your movie-clip instance.

14.
Test your movie.

Tip

  • You can assign a stop action instead of a goto action to the end keyframes of the Up, Over, and Down states. Doing so makes the movie clip play the tween only once.


To define the hit area of a movie clip:

1.
Create a movie-clip symbol, place an instance of it on the Stage, and name it in the Property Inspector.

This instance is the movie clip to which you will assign a button event handler.

2.
Create another movie-clip symbol, place an instance of it on the Stage, and name it in the Property Inspector.

This instance is the movie clip that will act as the hit area for the first movie clip.

3.
Assign a button event handler to the first movie-clip instance.

4.
Select the first frame of the main Timeline, and open the Actions panel.

5.
Choose Actions > Variables > set variable.

6.
In the Variable field, type the name of the first movie-clip instance.

7.
Choose Objects > Movie > Movie Clip > Properties > hitArea.

The hitArea property appears in the Variable field after your movie-clip name, separated by a dot (Figure 4.60).

Figure 4.60. The hitArea property of a movie clip is the area that responds to the pointer.


8.
In the Value field, type the name of the second movie-clip instance, and check the Expression checkbox (Figure 4.61). The completed expression in the Script pane (Figure 4.62) assigns the second movie clip to act as the hit area for the first movie clip, which is behaving like a button.

Figure 4.61. The movie clip called myMovieClip will use the movie clip called myHitArea as its hit area.


Figure 4.62. The completed statement in the Script pane.


9.
Test your movie.

The Up, Over, and Down states of your first movie clip respond to the shape of the second movie clip. You can use any movie clip as the hit area for another movie clip, and you can place it anywhere, even inside the movie clip that’s acting as a button. As long as you name it, you can target it and assign it to the hitArea property of another.

Tip

  • The movie clip assigned to the hitArea property doesn’t need to be visible to work. You can change its alpha transparency in the Property Inspector to be clear, or you can set its _visible property to 0. See Chapter 7 for more information on modifying movie-clip properties.


Movie-clip properties that affect button behavior

Like buttons, movie clips have properties that affect its button behavior. Table 4.3 summarizes these properties. Use these properties as you would for buttons to control whether the movie clip is enabled or whether the hand pointer is visible, or to control the Tab ordering for the focusing of movie clips. Use the set variable or the evaluate command to assign a value to the property of a movie clip. The following code will disable the hand pointer on a movie clip called myMovieClip that is behaving as a button:

myMovieClip.useHandCursor = false 

Movie-Clip Properties That Affect Button Behavior
Property Value Description
hitArea Movie clip name Defines the hit area of a movie clip.
useHandCursor True or false Determines whether the pointer changes to a hand icon when hovering over a movie clip.
enabled True or false Determines whether the movie clip can receive button events or not.
trackAsMenu True or false Determines whether the movie clip will track as a button or track as a menu item.
_focusrect True or false Determines whether a yellow rectangle appears around objects as you use the Tab key to select objects.
tabEnabled True or false Determines whether the movie clip can receive keyboard focus when you use the Tab key to select objects. Movie clips within a movie clip (its children) may still receive focus even if the parent cannot.
tabIndex A number Determines the order of focus when you use the Tab key to select objects. The tabIndex is in ascending order.
tabChilden True or false Determines whether movie clips inside movie clips can receive focus when you use the Tab key.
focusEnabled True or false Determines whether the movie clip can receive focus even when it is not acting as a button.


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