|
by
kirupa | 3 October 2009
In the
previous page, we got our hands wet by looking at
how Cosine and Sine can be represented in ActionScript. We
ended by having you look at a small sample project that
contained some circles - circles that don't do anything.
We'll fix that right up on this page.
Our ColorfulCircle class contains an event handler and
event for EnterFrame already defined. That sets us up nicely
for what we want to do, and what we want to do is this - we
want the size of the circles to oscillate between small and
large. Because we are dealing with an oscillation, we will
use a trigonometric function to simulate it.
Make the following additions, highlighted in yellow, to
your code:
- package
{
- import
flash.display.*;
- import
flash.events.*;
- import
flash.geom.*;
-
- public
class
ColorfulCircle
extends
MovieClip
{
-
-
var
angle:Number=0;
-
var
speed:Number=0;
-
- public
function
ColorfulCircle()
{
-
speed=.1+Math.random();
-
this.alpha=speed;
-
- this.addEventListener(Event.ENTER_FRAME,
flyCircleIn);
- }
-
- function
flyCircleIn(e:Event)
{
-
this.scaleX=Math.sin(angle);
-
this.scaleY=Math.sin(angle);
-
-
if
(angle<=2*Math.PI)
{
-
angle+=speed/5;
-
}
else
{
-
angle=0;
-
}
- }
- }
- }
Once you have added the new code, save the ColorfulCircle
file and press Ctrl + Enter to test the movie. Notice that
this time, the circles are not stationary. Instead, they are
moving around. Let's look at the code in greater detail.
The first thing that we do is declare two
variables that will end up storing the angle and speed:
- var
angle:Number=0;
- var
speed:Number=0;
Both of these variables are of type Number, and I am
initializing them to a value of 0.
Next up is the code we added to our constructor:
- speed=.1+Math.random();
- this.alpha=speed;
The speed variable I declared earlier to 0 is being
replaced with a random number that is between .1 and 1.1.
The reason I keep the minimum to .1 is that if the speed
were any less, the animation really looks boring.
In the next line, I set the transparency of our circle to
be the same as the value for our speed. I am doing this
deliberately, and not out of sheer laziness, because I want
the faster circles to be more visible. The slower circles
will be less visible because their alpha value would be
equal the lower value for speed.
Speaking of the value for speed, while the minimum
transparency will be .1, the maximum will be 1.1. The only
hitch is that the value for alpha only goes between 0 and 1.
The nice thing is that inputting a value that goes beyond
that range has no effect. Your transparency will never be
below 0 or greater than 1.
Let's now move into our flyCircle event handler that
responds to each tick of the ENTER_FRAME event:
- this.scaleX=Math.sin(angle);
- this.scaleY=Math.sin(angle);
In the first two lines, I set the value of our horizontal
as well as vertical scales to be equal to the Sine of our
angle. Initially, the angle is 0, but in the next couple of
lines you can see where it changes:
- if
(angle<=2*Math.PI)
{
- angle+=speed/5;
- }
else {
- angle=0;
- }
If our angle is less than 2 * PI, the angle's value is
incremented by our speed divided by 5. This is a very
small number, but since we are dealing with radians where
6.28 is considered a large number (in the grand scheme of
things), small numbers are what we really need.
Because a typical cycle goes from 0 to 2 PI, once our
angle becomes larger than 2 PI, it makes no sense to keep
incrementing the value for angle. That is why once the value
for angle gets larger than 6.28 something, it gets reset back
to 0 as if nothing ever happened.
That is all there is to this code. The gradually
increasing angle being passed into our Sine function is
entirely responsible for scaling our circle. Everything else
is just the support that allows it to just keep on rolling.
In the
next page, let's extend this example a little bit by
looking at magnifying and slowing down the oscillation.
Onwards to the
next page.
|
Trigonometric Animations - Page 3
