Table of Contents

10.16 Event Handlers Applied

We'll conclude our exploration of ActionScript events and event handlers with a couple of real-world examples. These are simple applications, but they give us a sense of how flexible event-based programming can be. For more event code samples, see the ActionScript Language Reference coverage of the events associated with the objects listed at the beginning of this chapter.

Example 10-2 makes a clip named box_mc shrink and grow.

Example 10-2. Oscillating the size of a movie clip

// Set oscillation parameters
box_mc.sizeIncrement = 10;
box_mc.maxHeight = 200;
box_mc.minHeight = 20;
   
// Size the box with each passing frame
box_mc.onEnterFrame = function ( ) {
  if (this._height >= this.maxHeight || this._height <= this.minHeight) {
    this.sizeIncrement = -this.sizeIncrement;
  }
  this._height += this.sizeIncrement;
  this._width  += this.sizeIncrement;
}

Example 10-3 simulates a custom mouse pointer by hiding the normal system pointer and making a clip follow the mouse location around the screen. In the example, the onMouseDown( ) and onMouseUp( ) handlers resize the custom pointer slightly to indicate mouseclicks. The code is placed inside the clip that acts as the custom pointer.

Example 10-3. A custom mouse pointer

Mouse.hide( );
   
this.onMouseMove = function ( ) {
  // When the mouse moves, position the current clip at 
  // the mouse pointer's coordinates.
  this._x = _root._xmouse;
  this._y = _root._ymouse;
  updateAfterEvent( );  // Refresh the screen for smooth movement.
}
   
this.onMouseDown = function ( ) {
  // When the mouse clicks down, shrink the clip.
  this._width  *= .5;
  this._height *= .5;
  updateAfterEvent( );
}
   
this.onMouseUp = function ( ) {
  // When the mouse clicks down, return the clip to its previous size.
  this._width  *= 2;
  this._height *= 2;
  updateAfterEvent( );
}

Example 10-4 creates a movie clip with button behaviors from ActionScript. It creates the clip on-the-fly with MovieClip.createEmptyMovieClip( ), then draws a square in the clip using the MovieClip drawing methods, and finally assigns the clip button handlers to create on, off, down, and up states. For more information on the drawing API, see Section 13.8 in Chapter 13.

Example 10-4. A movie clip button from scratch

// Create the clip
this.createEmptyMovieClip("optionButton_mc", 1);
   
// Draw a 16-pixel dark red square from (-8,-8) to (8,8)
optionButton_mc.lineStyle(undefined);
optionButton_mc.moveTo(-8,-8);
optionButton_mc.beginFill(0x990000);
optionButton_mc.lineTo(8, -8);
optionButton_mc.lineTo(8, 8);
optionButton_mc.lineTo(-8, 8);
optionButton_mc.lineTo(-8, -8);
optionButton_mc.endFill( );
   
// Turn the clip bright red when the mouse is over it
optionButton_mc.onRollOver = function ( ) {
  var c = new Color(this);
  c.setRGB(0xFF0000);
}
   
// Turn the clip bright red when the mouse is off of it
optionButton_mc.onRollOut = function ( ) {
  var c = new Color(this);
  c.setRGB(0x990000);
}
   
// Shrink the clip by 20% when it is pressed
optionButton_mc.onPress = function ( ) {
  this._xscale = this._yscale = 80;
}
   
// Restore the clip to its original size when it is released
optionButton_mc.onRelease = function ( ) {
  this._xscale = this._yscale = 100;
}

Table of Contents