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

The Movie Clip as a Button

Movie clips are objects that have their own Timeline in which animations play independently 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.49). 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.49. 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.
In the Script pane, enter the ActionScript word on followed by an opening parenthesis.

A code hint pull-down menu appears, providing you with all the events available to the movie clip (Figure 4.50).

Figure 4.50. The on action can be assigned to a movie clip as well as a button. The code hint pull-down menu that appears for the on event handler looks identical for both.


4.
Choose an event from the code hint pull-down menu.

5.
Enter a closing parenthesis and then an opening curly brace.

6.
Choose another action as the response to the event.

7.
On your last line of code, end your statement with a closing curly brace.

The completed code is identical to an event handler that you would place on a button instance (Figure 4.51).

Figure 4.51. The completed on(press) event handler assigned on a movie clip instance.


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 (Figure 4.52).

Figure 4.52. This movie clip instance has been named myMovieClip_mc in the Property Inspector.


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

3.
In the Script pane, enter the instance name of the movie clip followed by a period.

A code hint pull-down menu appears, providing you with all the events available to the button.

4.
Select the event from the pull-down menu (Figure 4.53).

Figure 4.53. The onRelease event is assigned to the movie clip called myMovieClip_mc from the code hint pull-down menu.


5.
Complete the event handler by entering =function(){}.

6.
Place the pointer between the curly braces of the function and choose an action as a response to the event (Figure 4.54).

Figure 4.54. An anonymous function is created that responds to a click on the movie clip called myMovieClip_mc.


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.55).

Figure 4.55. 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.56).

Figure 4.56. 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.57).

Figure 4.57. 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 Global Functions > Timeline Control > stop.

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 such as onPress or on(press) 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 Global Functions > Timeline Control > Play.

8.
Select each ending keyframe, and in the Actions panel, choose Global Functions > Timeline Control > gotoAndPlay.

9.
Between the parentheses of each gotoAndPlay action, enter the frame label name 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.


10.
Exit symbol-editing mode.

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

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

13.
Test your movie.

✓ Tip

  • You can assign a stop action instead of a gotoAndPlay 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 (Figure 4.60).

Figure 4.60. A new movie clip has been created and assigned an instance name of myMovieClip_mc.


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 (Figure 4.61).

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


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.
In the Script pane, enter the name for the first movie-clip instance followed by a period.

The code hint pull-down menu appears.

6.
Select hitArea from the code hint pull-down menu.

7.
After hitArea, enter an equals sign (=) followed by the name of the second movie-clip instance (Figure 4.62).

Figure 4.62. The completed statement in the Script pane.


The completed statement assigns the second movie clip as the hit area for the first movie clip.

8.
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 their button behavior. Table 4.3 summarizes these properties. Use these properties as you would for buttons to control whether a movie clip is enabled or whether the hand pointer is visible or to control the tab ordering for the focusing of movie clips. The following code will disable the hand pointer on a movie clip called myMovieClip_mc that is behaving as a button:

MyMovieClip_mc.useHandCursor = false

Table 4.3. Movie-Clip Properties That Affect Button Behavior
PROPERTYVALUEDESCRIPTION
hitAreaMovie clip nameDefines the hit area of a movie clip.
useHandCursorTrue or falseDetermines whether the pointer changes to a hand icon when hovering over a movie clip.
enabledTrue or falseDetermines whether or not the movie clip can receive button events.
trackAsMenuTrue or falseDetermines whether the movie clip will track as a button or track as a menu item.
_focusrectTrue or falseDetermines whether a yellow rectangle appears around objects as you use the Tab key to select them.
tabEnabledTrue or falseDetermines whether the movie clip can receive keyboard focus when you use the Tab key to select objects. Movie clips (children) within a movie clip (parent) may still receive focus even if the parent cannot.
tabIndexA numberDetermines the order of focus when you use the Tab key to select objects. The tabIndex is in ascending order.
tabChildenTrue or falseDetermines whether movie clips inside movie clips can receive focus when you use the Tab key.
focusEnabledTrue or falseDetermines 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