Dynamic Mouse Trail in Flash - Page 4
       by kirupa  |  3 August 2009

In the previous page, we started dissecting our code and seeing what it does. In this page, we continue doing that by looking at the code contained inside our ColorfulCircle ActionScript file.

All of the relevant code inside ColorfulCircle.as is:

var speed:Number;

 

public function ColorfulCircle() {

speed=.01+.02*Math.random();

this.alpha = .5;

SetRandomColor();

this.addEventListener(Event.ENTER_FRAME, FadeCircleOut);

}

 

private function FadeCircleOut(e:Event) {

this.alpha-=.5*speed;

this.scaleX+=5*speed;

this.scaleY+=5*speed;

 

if (this.alpha<0) {

this.removeEventListener(Event.ENTER_FRAME, FadeCircleOut);

parent.removeChild(this);

}

}

 

private function SetRandomColor() {

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

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

 

var myColor:ColorTransform = this.transform.colorTransform;

myColor.color=colorArray[randomColorID];

 

this.transform.colorTransform = myColor;

}

Let's start with the constructor...

public function ColorfulCircle() {

speed=.01+.02*Math.random();

this.alpha = .5;

SetRandomColor();

this.addEventListener(Event.ENTER_FRAME, FadeCircleOut);

}

Each time you create a new ColorfulCircle object, the code here gets called first. The first two lines are pretty straightforward:

speed=.01+.02*Math.random();

this.alpha = .5;

 In the first line, I initialize my speed variable to be a ridiculously small random number. To get an idea of how small the number is, check out the trace from a few milliseconds of moving my mouse over the stage:

  0.021233746903017166
 0.016180226318538188
 0.02926292160525918
 0.018550447933375836
 0.010719764912500977
 0.019038971839472653
 0.021952664144337178
 0.012964947670698166
 0.01569134642370045
 0.01394037482328713
 0.017277858732268215
 0.011107641505077481
 0.029695940371602773
 0.012146786861121655

In the second line, I set the transparency (alpha) of our circle to a fixed value of .5. Remember that alpha goes from 0 to 1, so .5 means it is about 50% visible.

The next two lines are:

SetRandomColor();

this.addEventListener(Event.ENTER_FRAME, FadeCircleOut);

The first line calls the SetRandomColor() function. I am not going to describe SetRandomColor because the code for that is explained in far greater detail in my Random Colors in AS3 tutorial.

In the next line, I am simply binding the Event.ENTER_FRAME event to the FadeCircleOut event handler. At each frame tick, the FadeCircleOut function will be called.

Speaking of FadeCircleOut, let's go ahead and look at that next:

private function FadeCircleOut(e:Event) {

this.alpha-=.5*speed;

this.scaleX+=5*speed;

this.scaleY+=5*speed;

 

if (this.alpha<0) {

this.removeEventListener(Event.ENTER_FRAME, FadeCircleOut);

parent.removeChild(this);

}

}

Like I mentioned a few moments earllier, FadeCircleOut is called at each frame tick because it is the event handler for the Event.ENTER_FRAME event. All of the code here is what is responsible for showing the transition.

The first three lines fade out the circle while making it larger at the same time:

this.alpha-=.5*speed;

this.scaleX+=5*speed;

this.scaleY+=5*speed;

Fading out is handled by decreasing the alpha property, and making it larger is handled by the scaleX and scaleY properties. Notice that my speed variable that you initialized in the constructor earlier is being used again.

The last chunk of code we will look at is:

if (this.alpha<0) {

this.removeEventListener(Event.ENTER_FRAME, FadeCircleOut);

parent.removeChild(this);

}

You can look at the code here as being the exact opposite of the constructor. When the circle becomes invisbile (alpha less than 0), I first kill our event listener that associates the ENTER_FRAME event with the FadeCircleOut event handler. Next, I remove this circle from the visual tree by calling parent.removeChild(this).

This is actually quite important because having items clog up your visual tree, which is very easy to do very quickly when you are adding items on a simple MOUSE_MOVE, it is important to optimize where you can.

Quick Overview of the Code
There was a lot of code we covered in the preceding pages, and when focusing on lines and chunks of code, the big picture may get lost. Much like a 30-second summary of popular movies reenacted by bunnies, I am going to provide you with a quick overview of all of the code in one paragraph.

You first created a movie clip and linked it to the ColorfulCircle class. In the first frame of your Flash file, you have some code that does nothing but place these ColorfulCircle movie clip instances at the various locations your mouse has been. That is done by simply listening for the MOUSE_MOVE event and placing a movie clip at the X and Y position the event took place.

The actual task of having the circles look cool and transition out is handled entirely by the ActionScript file representing ColorfulCircle, ColorfulCircle.as. It is the code contained here that is responsible for making each circle mouse trail look cool. More importantly, the code here is also responsible for removing the circle once it is no longer needed.

Conclusion
Yay, you are done with this tutorial. Programmatic animations is one of my favorite things to do in Flash, and dynamically generating the things that get animated makes for some really cool effects - such as the mouse trail you created so far.

To see how my example turned out, download the source files below.

Download Source (Flash CS3 and CS4)

Just a final word before we wrap up. If you have a question and/or want to be part of a friendly, collaborative community of over 220k other developers like yourself, post on the forums for a quick response!

1 | 2 | 3 | 4