Table of Contents

13.9 Using Movie Clips as Buttons

As of Flash Player 6, movie clips (but not main movies) have all the features previously reserved for button symbols. A movie clip can dynamically define and redefine button event handlers, a hit region, and Up, Over, and Down states; and, unlike button symbols, movie clips can be instantiated dynamically at runtime. If you are implementing simple interactivity at authoring time, you can continue to use button symbols happily. But if you are generating complex, dynamic button behavior at runtime, you'll want to use movie clips.

The first step in implementing button-like behaviors for a movie clip is to define one or more button events for the clip. Normally, this means assigning a callback function to a predefined button event property (shown next), but the on(event) button syntax can also be applied to a movie clip directly in the authoring tool. The following code creates a movie clip, adds a text field to it, and then defines the onRelease( ) button event handler:

// Create clip
this.createEmptyMovieClip("submit_mc", 1);
   
// Add text field
this.submit_mc.createTextField("submit_txt", 1, 0, 0, 50, 20);
this.submit_mc.submit_txt.text = "Submit";
   
// Define button handler
this.submit_mc.onRelease = function ( ) {
  trace("You pressed the submit button.");
}

As is, this movie clip operates perfectly well as a button. But suppose we want to make the word "Submit" easier for users to click. To define a larger hit area (the region that activates the button) for our movie clip, we'll create a separate hit area movie clip as follows:

The movie clip that acts as the hit area can reside on any timeline, but it is normally placed inside the clip with the button events so that the hit area moves and scales with its parent. For example, the following code uses the Drawing API to create a hit area movie clip larger than the word "Submit":

// Create hit_mc inside submit_mc
this.submit_mc.createEmptyMovieClip("hit_mc", 0);
   
// Draw a rectangle in hit_mc
this.submit_mc.hit_mc.moveTo(-30,-15);
this.submit_mc.hit_mc.beginFill(0xFF0000);
this.submit_mc.hit_mc.lineTo(80, -15);
this.submit_mc.hit_mc.lineTo(80, 35);
this.submit_mc.hit_mc.lineTo(-30, 35);
this.submit_mc.hit_mc.lineTo(-30, -15);
this.submit_mc.hit_mc.endFill( );
   
// Hide the hit area movie clip
this.submit_mc.hit_mc._visible = false;
   
// Set hit_mc as submit_mc's hit area
this.submit_mc.hitArea = this.submit_mc.hit_mc;

So far, our example does not change visually when the mouse is pressed or moved over the Submit button. Using ActionScript, visual changes to a button can be implemented dynamically within each button event handler. For example, we can bold the word "Submit" from our submit_mc's onRollOver( ) event as follows:

// Bold text on roll over
this.submit_mc.onRollOver = function ( ) {
  this.submit_txt.setTextFormat(new TextFormat(null, null, null, true));
}
   
// Normal text on roll out
this.submit_mc.onRollOut = function ( ) {
  this.submit_txt.setTextFormat(new TextFormat(null, null, null, false));
}

Alternatively, if we are creating our movie clip in the authoring tool, we can define button-state visual changes by creating keyframes with the special labels _up, _over, and _down, corresponding to the button states Up (mouse is not over the button), Over (mouse is over the button), and Down (button is being pressed). (Use the Property inspector to assign a label to a keyframe.) When the mouse interacts with the movie clip, Flash automatically moves the clip's playhead to the appropriately labeled frame. For example, when the mouse moves over the clip, Flash performs the equivalent of this:

theClip.gotoAndStop("_over");

At each of the labeled button-state frames, we can issue a play( ) command to create animated button effects. However, we must be sure to also issue a stop( ) command on frame 1 of the movie clip, which prevents the movie from playing through all its button states. Normally, this first frame is labeled _up (the default inactive state for the button).

Movie clips with button events can also use the button properties enabled (used to toggle button behavior on and off), useHandCursor (used to prevent or enable changes to the mouse pointer when it is over the button), and trackAsMenu (used to modify the button's onRelease( ) handler requirements, enabling menu-style behavior). For example, we can suppress the display of the hand mouse pointer for our submit_mc clip as follows:

submit_mc.useHandCursor = false;

Typical web browser Submit buttons do not show a hand pointer on rollover. For deeper discussion of the button properties available to movie clips, see the MovieClip class in the ActionScript Language Reference.

Nested button behavior is not supported for movie clips. That is, movie clips inside a movie clip with button behavior cannot themselves define button behaviors. Furthermore, if a mask and a masked movie clip both define button handlers, only the mask movie clip's button handlers are activated.

The various types of event handlers for buttons and movie clips have important scope differences, which are discussed in Chapter 10 under Section 10.9 and summarized in Table 10-1.

Table of Contents