Working with Movie Clips and Buttons > Handling events with ActionScript > Using button events with movie clips to trigger scripts

 

Using button events with movie clips to trigger scripts

You can use button events with button instances, but you can also use them with movie clip instances to create button movie clips. Button movie clips combine the power of movie clips with the control of button events. You can turn a movie clip into a button movie clip by assigning an on handler to the movie clip instance, or by defining button event handler methods for an instance. You can also create a new class and define event handler methods in the prototype object of that class. (For information about defining methods in the prototype object, see Defining event handler methods in the prototype object.)

All button events are triggered by user interaction: press, release, releaseOutside, rollOver, rollOut, dragOver, dragOut, and keyPress. In the Actions toolbox, the MovieClip object has an Events category containing methods that correspond to each button event, such as onPress, onRelease, onReleaseOutside, onRollOver, onRollOut, onDragOver, onDragOut, and onKeyPress.

A button movie clip has a full movie clip Timeline, not the four-frame Timeline of a button. You can use the frame labels _up, _over, and _down to create the Up, Over, and Down states of a button movie clip. When the user moves the mouse over a button movie clip or clicks it, the gotoAndStop action causes the playhead to go to the appropriate frame label and display the appropriate image on the Stage. If you want the playhead to start playing at the frame label, you can put a play action on the frame.

To designate a movie clip to use as the hit area of a button movie clip, you use the hitArea property of the MovieClip object.

For information about using button events with buttons, see Using button event handler methods to trigger scripts.

 
To use the on action to create a button movie clip:

1

Select a movie clip on the Stage.

2

Choose Window > Actions to open the Actions panel if it isn't already open.

3

In the Actions toolbox (at the left of the panel), click the Actions category, click the Movie Control category, and then double-click the on action.

4

In expert mode, enter the events you want to include. In normal mode, choose these events above the Script pane.

5

Inside the on action, add actions to run when the selected events occur.

 
To define a movie clip event handler method to create a button movie clip:

1

On the Stage, select the movie clip that you want to turn into a button movie clip.

2

Enter an instance name in the Property inspector.

3

Select a frame, button, or movie clip to which to attach the action.

4

Choose Window > Actions to open the Actions panel if it isn't already open.

5

In the Actions toolbox, click the Objects category, the Movie category, the MovieClip category, and the Events category, and double-click one of the button event handler methods.

6

Enter values for the following parameters:

For the object parameter, enter the target path for the movie clip whose event you want to handle.

Pass any parameters needed by the function you will define. (In normal mode, enter these parameters in the Parameters text box.)

7

Add actions inside the function to define the function.

The following code defines a function for the onPress method of the instance mc that moves the playhead of mc:

mc.onPress = function() {
    play();
};

 
To create states for the button movie clip:

1

Select a frame in the Timeline to use as a button state (Up, Over, or Down).

2

Enter a frame label in the Property inspector (_up, _over, or _down).

3

To add additional button states, repeat steps 1-2.