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.
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.
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.
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!
|