Recipe 7.5 Using Movie Clips as Buttons

7.5.1 Problem

You want to use a movie clip as a button.

7.5.2 Solution

Use the button event handler methods with the movie clip.

7.5.3 Discussion

Button symbols are still appropriate choices when you want to create simple, authoring-time buttons with basic button states. However, in most cases, you should use movie clips as buttons instead because movie clips can handle all the button events, and ActionScript gives you much more programmatic control over movie clips than buttons. For example, you can attach movie clips to a timeline from the Library, programmatically control the contents of a movie clip such as text labels, and use drawing methods to draw inside movie clips.

While it is not technically improper to apply event handlers to the physical instances of movie clips on the Stage, using the event handler methods (introduced in Flash MX) offers several advantages. First of all, they enable you to keep your code centralized rather than applying the code to each instance. Furthermore, you can assign event handler methods to dynamically created movie clips as well as manually created instances.

The button event handler methods include those shown in Table 7-2.

Table 7-2. The button event handler methods

Event handler method	Description
onPress( )	Triggered when the user clicks on the instance.
onRelease( )	Triggered when the user releases the mouse following a click on the instance.
onReleaseOutside( )	Triggered when the user releases a mouseclick outside the instance. In other words, the user clicked on the instance, moved the cursor off the instance while still pressing on the mouse button, and then released the button.
onRollOver( )	Triggered when the user moves the pointer over the instance.
onRollOut( )	Triggered when the user moves the pointer off the instance.
onDragOver( )	Triggered when the user drags the pointer onto the instance while the mouse button is pressed. However, the mouse must have been pressed while initially over another button or movie clip with button handlers.
onDragOut( )	Triggered when the user drags the pointer off the instance while the mouse button is pressed.
onSetFocus( )	Triggered when the focus is set to the instance.
onKillFocus( )	Triggered when the focus leaves the instance.

Here is an example you can use to understand how the button events work with a movie clip. You use the drawCircle( ) method from Recipe 4.5 to draw a circle movie clip and then apply the button event handler methods to it.

// Include the DrawingMethods.as file from Chapter 4 for its drawCircle(  ) method.
#include "DrawingMethods.as"

// Create a circle_mc clip and draw a blue circle at the center of the Stage.
_root.createEmptyMovieClip("circle_mc", 1);
circle_mc.lineStyle(1, 0x000000, 100);
circle_mc.beginFill(0x0000FF, 100);
circle_mc.drawCircle(100, Stage.width/2, Stage.height/2);
circle_mc.endFill(  );

// Next, apply the button event handler methods so that when each event is triggered,
// a message is written to the Output window.
circle_mc.onPress = function (  ) {
  trace("pressed");
};

circle_mc.onRelease = function (  ) {
  trace("released");
};

circle_mc.onReleaseOutside = function (  ) {
  trace("released outside");
};

circle_mc.onRollOver = function (  ) {
  trace("rolled over");
};

circle_mc.onRollOut = function (  ) {
  trace("rolled out");
};

circle_mc.onDragOver = function (  ) {
  trace("dragged over");
};

circle_mc.onDragOut = function (  ) {
  trace("dragged out");
};

circle_mc.onSetFocus = function (  ) {
  trace("focus set");
};

circle_mc.onKillFocus = function (  ) {
  trace("focus removed");
};

// Use the Selection.setFocus(  ) method to set the focus to the circle_mc movie clip,
// and then use it to remove the focus. This will trigger the onSetFocus(  ) and
// onKillFocus(  ) methods of circle_mc.
Selection.setFocus(circle_mc);
Selection.setFocus(null);

When you create a movie clip to use as a button, you can also apply frame labels of _up, _over, and _down to the frame of the movie clip that represents each button state. When a button event handler is applied to such a movie clip, Flash automatically goes to and stops at the frame label that matches the current button state. You must also place a stop( ) action on the first frame; otherwise, Flash automatically plays the timeline until one of the button states is activated. If you create an animation sequence for each button state, add a this.play( ) method call to the _up, _over, and _down frames within the movie clip; otherwise, the subsequent frames will not play back.