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

In the previous page, you got a quick intro to what you will be creating and learned how to create a ColorfulCircle class instance through the movie clip. In this page, let's add some code and start to see how everything works.

Animating the Circle
Currently, you should see just one circle on your stage:

[ the circle is quite lonely right now ]

When you preview or test your application, nothing will be happening. The reason is that there is no code in place to actually make your circle move. To fix this, you will need to add some code to your ColorfulCircle class - a class that doesn't technically exist for you right now. This means that you will need to create the class file and add some code.

This is pretty straightforward. From Flash, go to File | New to display the New Document window. From this window, select ActionScript file and press the OK button:

[ select the ActionScript file type from New Document ]

Once you have clicked OK, the New Document window will disappear, and your Flash drawing area will now be replaced by what is essentially a large code editor. In this code area, copy and paste the following code:

package {

import flash.display.*;

import flash.events.*;

import flash.geom.*;

 

public class ColorfulCircle extends MovieClip {

 

var radians:Number;

var speed:Number;

var radius:Number;

var originalX:Number;

var originalY:Number;

 

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

 

public function ColorfulCircle() {

 

originalX = this.x;

originalY = this.y;

 

setProperties();

 

this.addEventListener(Event.ENTER_FRAME, flyCircleIn);

}

 

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;

}

 

function flyCircleIn(e:Event) {

 

radians += Math.abs(speed/10);

 

this.x += Math.round(radius*Math.cos(radians));

this.y += Math.round(radius*Math.sin(radians));

 

this.scaleX += Math.abs(speed/10);

this.scaleY += Math.abs(speed/10);

this.alpha -= Math.abs(speed/100);

 

if (this.alpha < 0)

{

resetCircle();

}

}

 

function resetCircle()

{

this.x = originalX;

this.y = originalY;

 

setProperties();

}

}

}

After you have pasted the above code, before we proceed any further, let's save this file. Go to File | Save, navigate to the folder where your current Flash project is, change the current default filename to ColorfulCircle.as, and hit the Save button. A ColorfulCircle.as file will now be created in the same location as your colorfulExplosion.fla:

[ save your ColorfulCircle.as file in the same location as your dynamicMouseTrail.fla ]

Great. We just created our ColorfulCircle.as file. Now, jump back to your Flash file that currently just has one circle and test it by pressing Ctrl + Enter. Notice that the solitary circle that did nothing earlier is now animating and doing what you expected.

Adding More Circles
Currently, you only have one circle that is being animated. You probably want a few more circles to make your effect look really cool. Go back to your artboard, select the one circle that is currently visible, copy it by pressing Ctrl + C, and paste the circle by pressing Ctrl + V:

[ copy and paste the circle on your stage ]

After you have done this, two circles will now be on your artboard. Keep repeating this process until you have at least 10 circles on your artboard. You may need to move your circle around the stage a bit after each paste to prevent the circles from just being pasted on top of each other:

[ repeat the copy and paste step a few more times to create more circles ]

Once you have enough circles, test your application again. This time you will have a more continuous stream of circles zooming in and fading out - which is exactly what we want.

Now that you have a working application, you aren't done yet. In fact, this was just the easy part of this tutorial. In the next couple of pages, we will delve into the workings of the colorful explosion and learn exactly how everything works. 

Onwards to the next page.

1 | 2 | 3 | 4