Colorful Explosion in AS3 - Page 3
       by kirupa  |  21 September 2009

In the previous page, you wrapped everything up and now have a fully working application. In this and subsequent pages, let's look at the code and why everything works the way it does.

Overview of the Code
While the previous page seemed to have a lot of code, overall, the effect is fairly simple. At a very high level, the code works as follows.

The ColorfulCircle Class
Each of your circle movie clips are associated with the ColorfulCircle class file, and all that code that is contained inside the ColorfulCircle class file gets excecuted each time for each circle. To learn more about the association between movie clips and classes, my earlier Classes and Movie Clips tutorial should provide you with more information.

Each Individual Circle
Digging a bit deeper into each circle, the code does a few things on the circle:

1. Sets the initial size, color, and position of each circle.
2. Starts an enterFrame loop to create the animation.
3. Scales the circle while fading it out at the same time.
4. Resets the circle's size, color, and position once the circle completely fades out.

In the next section, let's go through each line of code and see how it fits in with the approimately four things our code does.

Looking at the Code
Let's start at the very top:

package {

import flash.display.*;

import flash.events.*;

import flash.geom.*;

   .

   .

   .

   .

}

The very top is generic boilerplate code containing the package declaration and any import statements that you need. In ActionScript 3, a lot of the classes that you use are stored in different libraries. The import statements help the Flash compiler know which library the classes you are using are coming from.

public class ColorfulCircle extends MovieClip {

Here, I formally declare our ColorfulCircle class. Notice that this class extends the base MovieClip class. This is done because our class isn't self-containing. We are not reimplementing everything needed to have our circle movie clip visual on the artboard associated with the class file itself. Instead, we are extending the existing MovieClip class and only adding our code on the top.

var radians:Number;

var speed:Number;

var radius:Number;

var originalX:Number;

var originalY:Number;

In these lines, I am declaring some variables that I will be using in the rest of the code. Notice that I have strongly typed these variables as something that is a Number indicating that only numerical data will be stored here.

static var colorArray:Array = new Array(0xFFFF33, 0xFFFFFF, 0x79DCF4, 0xFF3333, 0xFFCC33, 0x99CC33);

In this line, I am storing an array of color values. You can learn more about this in the Random Colors in AS3 tutorial where I describe in greater detail this and some related code you will see shortly.

public function ColorfulCircle() {

 

originalX = this.x;

originalY = this.y;

 

setProperties();

 

this.addEventListener(Event.ENTER_FRAME, flyCircleIn);

}

This block of code defines the constructor for the ColorfulCircle class. You can think of the constructor as an entry way to your code. Each time a ColorfulCircle movie clip is created, this code is called automatically once...and only once! This means that any code you want executed automatically when your circle makes an appearance needs to live here.

originalX = this.x;

originalY = this.y;

What I do first in the constructor is get our circle's current X and Y position and store it in the originalX and originalY variables. Next up is the code that calls our setProperties function:

setProperties();

I will describe this function in greater detail later, but it is just a simple function call. The next line is a little bit more interesting:

this.addEventListener(Event.ENTER_FRAME, flyCircleIn);

Here I set up the event listener that associates an event with an event handler. The event I am listening for is ENTER_FRAME, and the event handler that gets called at each frame tick is flyCircleIn. We'll look at the flyCircleIn method later.

This line wraps up the code found in our constructor. Like I mentioned earlier, the constructor is the gateway to the class. As such, it contains some pretty heavy-hitting code that calls other functions that are essential to what your class does. We'll look at some of those classes first - starting with the setProperties function.

function setProperties()

{

speed = Math.ceil(5*Math.random());

radius = 20*Math.random();

 

radians = 0;

 

trace(speed);

 

this.scaleX = 0;

this.scaleY = 0;

 

var randomColorID:Number = Math.floor(Math.random()*colorArray.length);

 

var myColor:ColorTransform = this.transform.colorTransform;

myColor.color = colorArray[randomColorID];

this.transform.colorTransform = myColor;

 

this.alpha = 1;

}

The setProperties function, as its name implies, sets the properties that your circle will posses. The first couple of lines simply set some properties for our circle's zoom speed, its radius, current radians value, and initial size:

speed = Math.ceil(5*Math.random());

radius = 20*Math.random();

 

radians = 0;

 

trace(speed);

 

this.scaleX = 0;

this.scaleY = 0;

The speed and radius values use Math.random() to generate a random number each time this function is called, and these values determine how quickly your circles zoom in at you and how wide the circle's arc will be.

The next series of lines are related to picking a random color:

var randomColorID:Number = Math.floor(Math.random()*colorArray.length);

 

var myColor:ColorTransform = this.transform.colorTransform;

myColor.color = colorArray[randomColorID];

this.transform.colorTransform = myColor;

Just like before, I am not going to describe the code for generating a random color because the Random Colors in AS3 tutorial covers this topic in much greater detail.

The last line in setProperties is:

this.alpha = 1;

The alpha property determines the opacity of your circle, and setting it to 1 is the same as making it fully visible.

We are almost done. There is a few more sections of code that need to be covered, and we'll do that on the next page!

Onwards to the next page.

1 | 2 | 3 | 4