by
kirupa  28 May 2007
In the
previous page, you saw how to populate our
stage with the BlueCircle class you created. Before
that, we
made quite a bit of progress and looked at packages,
class definitions, and constructors. There is still some
code that we need to explore  namely the parts related
to creating the circular motion!
Let's look at the remaining pieces of code now:
 public
function
BlueCircle()
 {
 speed
= .01+.5*Math.random();
 radius
=
2+10*Math.random();

 this.addEventListener(Event.ENTER_FRAME,
RotateCircle);
 }
Inside our BlueCircle constructor method, I fiddle with
the variables I declared earlier:
 speed
= .01+.5*Math.random();
 radius
= 2+10*Math.random();
In the above two lines, I set a random value for both our
speed and
radius variables. To put
the values you see into perspective,
Math.random() returns a
number between 0 and 1. I multiply that number by 5 for
speed and 10 for radius.
Because Math.random()
could return a value of 0, I wouldn't want my speed or
radius variables to be stuck at 0. That would lead to a very
boring animation! To mitigate that risk, I am incrementing
both by a specific number  .01 for speed and 2 for radius.
In the worst case, our speed will be .01 and our radius will
be 2.
 currentX
=
this.x;
 currentY
=
this.y;
The next two variables I set values for are currentX and
currentY. As their names imply, I am interested in storing
the current X and Y positions of my circle movie clip, and I
can do that by using the this
keyword followed by x or
y depending on the
position value I am interested in. You'll see why I am
getting this information shortly.
 this.addEventListener(Event.ENTER_FRAME,
RotateCircle);
The final line of code in our constructor declares a new
event listener. An event listener takes two arguments  the
event to listen for and the method that will handle the
event. Because ENTER_FRAME
event
is fired a number of times per second equal to your frame
rate, your RotateCircle event handler will get called 25
times.
For more details on event listeners, events, and event
handlers, please refer to the
2nd page of my Animating Dynamic MovieClips in AS3 tutorial.
 function
RotateCircle(e:Event)
 {
 ..
 ..
 ..
 }
We next declare our
RotateCircle method. In this case, this method can
also be classified as an event handler because our earlier
addEventListener call specifies RotateCircle as the
recipient of any fired
ENTER_FRAME events. Because of its event handler
status, our RotateCircle method has to take an argument
based on the Event type.
 radians
+=
speed;

 this.x
+=
Math.round(radius*Math.cos(radians));
 this.y
+=
Math.round(radius*Math.sin(radians));
In the first line, I increment our
radians variable by the
value of speed. In the
version of circular motion presented, I am relying on the
Cosine and Sine functions to provide the oscillatory
behavior found in rotational systems.
Cosine and Sine oscillate between 1 and 1, so the value
of radians determines where exactly between 1 and 1 they
will find themselves in. No matter how large your radians
value gets, the output from having them passed in to our
Math.cos and Math.sin functions will always be between 1
and 1.
Let's look at the last two lines in greater detail:
 this.x
+=
Math.round(radius*Math.cos(radians));
 this.y
+=
Math.round(radius*Math.sin(radians));
Reading righttoleft, you see the Math.cos and Math.sin
functions that I referred to earlier. I am multiplying them
by the value for radius because watching all of the circles
simply oscillate between 1 and 1 may not particularly be a
lot of fun.
Because the values passed in contain a certain
unnecessary degree of precision, I use Math.round to set
them as integer values. If I didn't do this, minor
variations in the starting and ending positions caused by
imprecise
increases in radians will
cause your circle to slowly (very slowly) drift to the
topleft corner at 0,0.
If you have a question about this or any other topic, the easiest thing is to drop by our forums where a bunch of the friendliest people you'll ever run into will be happy to help you out!
THE KIRUPA NEWSLETTER
Get cool tips, tricks, selfies, and more...personally handdelivered to your inbox!
( View past issues for an idea of what you've been missing out on all this time! )
