Classes and Movie Clips - Page 5

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 right-to-left, 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 top-left corner at 0,0.

1 | 2 | 3 | 4 | 5