ActionScript Cookbook-ActionScript Cookbook

23.2 Stage Two

In stage two, we want to use the calculations that were worked out in the first stage to create a component. The advantage of a component, in this case, is that you can create the component code once and then create as many instances as you want. Here are the steps you should complete to create the second stage of the application:

Open stage1.fla and save it as stage2.fla.
Delete all the code from the first frame of the main timeline. You may want to select it and cut it because you will use much of the same code within the component.
Create a new movie clip symbol named Circle.
Open the linkage properties for the Circle movie clip symbol.
Select the Export for ActionScript and Export on First Frame options and give the symbol a linkage identifier of CircleSymbol.
Click OK to close the linkage properties dialog box.
Edit Circle.

On the first frame of the default layer within the Circle symbol, add the following code:

// Component class code should always be enclosed within #initclip/#endinitclip.
#initclip
 
function CircleClass (  ) {}

CircleClass.prototype = new MovieClip(  );

CircleClass.prototype.init = function (minX, minY, maxX, maxY, vel, 
                                       col, radius) {

  // Draw the circle with radius specified by the radius parameter.
  with (this) {
    lineStyle(0, 0x000000, 0);
    beginFill(0, 100);
    drawCircle(radius);
    endFill(  );
  }

  // Define the area within which the circle moves.
  this.minX = minX;
  this.minY = minY;
  this.maxX = maxX;
  this.maxY = maxY;

  // Assign a random coordinate at which the circle initializes.
  this._x = Math.random(  ) * this.maxX;
  this._y = Math.random(  ) * this.maxY;

  // If the string "random" is passed to the method as the vel parameter,
  // generate a random velocity between 3 and 9. Otherwise, use the value of vel.
  if (vel == "random") {
    this.vel = Math.random(  ) * 6 + 3;
  } else {
    this.vel = vel;
  }

  // Generate a random direction in which the circle should initially move.
  this.dir = Math.random(  ) * Math.PI * 2;

  // Create a color object to control the color of the circle.
  this.colObj = new Color(this);

  // If the col parameter is "random", generate a random color value.
  if (col == "random") {
    col = Math.random(  ) * 255 * 255 * 255;
  }

  // Set the color.
  colObj.setRGB(col);
};

// The onEnterFrame(  ) method here is the same as from stage one.
CircleClass.prototype.onEnterFrame = function (  ) {
  this._x += Math.cos(this.dir) * this.vel;
  this._y += Math.sin(this.dir) * this.vel;
  if ((this._x + this._width/2) >= this.maxX) {
    this._x = this.maxX - this._width/2 - 1;
    this.dir += 2 * (Math.PI/2 - this.dir);
  }
  else if ((this._x - this._width/2)<= this.minX) {
    this._x = this.minX + this._width/2 + 1;
    this.dir += 2 * (Math.PI/2 - this.dir);
  }
  if ((this._y + this._height/2) >= this.maxY) {
    this._y = this.maxY - this._height/2 - 1;
    this.dir -= 2*this.dir;
  }
  else if ((this._y - this._height/2) <= this.minY) {
    this._y = this.minY + this._height/2 + 1;
    this.dir -= 2*this.dir;
  }
};

// Register the class to the linkage identifier CircleSymbol.
Object.registerClass("CircleSymbol", CircleClass);

#endinitclip

On the first frame of the default layer of the main timeline, add the following code:

// Include DrawingMethods.as from Chapter 4 and MovieClip.as from Chapter 7.
#include "DrawingMethods.as"
#include "MovieClip.as"

// Create an instance of the circle component. Call the init(  ) method to define
// the initialization parameters.
_root.attachMovie("CircleSymbol", "circle" + i, 1);
circle.init(0, 0, 200, 200, "random", "random", 10);

_root.createEmptyMovieClip("border", 2);
with (border) {
  lineStyle(0, 0, 100);
  drawRectangle(200, 200, 0, 0, 100, 100);
}

When you save and test your movie in stage two, you should see pretty much the same thing you saw in stage one. The only apparent difference is that the color and velocity are randomized. But you have accomplished much more than just what is apparent from this simple example. You have successfully created a component that can be used to make more circle instances, as you will see in the next stage.

Most of the code in stage two of this application is the same as the code from stage one. However, there is one thing that is worth mentioning with regards to the colorization. In this example you have created a color object to control the color of the circle. Technically, this is not necessary since you could easily set the color in the beginFill( ) method when drawing the circle. However, if at a later point you want to alter the color of the circle, it is much simpler to use a color object. For example, you could extend this application a little by assigning a new, random color to the circle every time it bounces.

[ Team LiB ]