Fun Things to Do with Movie Clips in Flash MX - Using Movie Clips as Buttons

(Page 4 of 6 )

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:

1. Create a movie clip the size of the desired hit area.
   
2. Conceal the hit area movie clip by setting its_visibleproperty tofalse.
   
3. Assign the hit area movie clip to thehitAreaproperty of the clip with the button events.

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 oursubmit_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 propertiesenabled(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), andtrackAsMenu(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 oursubmit_mcclip 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 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 “Event Handler Scope” and summarized in Table10-1 .

Next: Input Focus and Movie Clips >>
 

More Flash Articles
More By O'Reilly Media

Comments On: Fun Things to Do with Movie Clips in Flash MX

· This article is an excerpt from the book "ActionScript for Flash MX: the Definitive...   >>> Post your comment now!

Buy this book...

This article is excerpted from chapter 13 of the book ActionScript for Flash MX The Definitive Guide Second Edition, written by Colin Moock (O'Reilly; ISBN: 059600396X). Check it out today at your favorite bookstore. Buy this book now.