Classes and Movie Clips - Page 2

In the previous page, you created your circle movie clip with a class name of BlueCircle. Currently, the circle you created kind of just sits there. Let's fix that by adding some code that makes our circle move.

Creating the BlueCircle Class
We are going to be adding our code to the BlueCircle class itself. But, where is our BlueCircle class? Good question. It doesn't exist in a form that we can see or access. By default, the BlueCircle class is created in the background with its contents being magically thrown into the SWF file during publish/export.

To override the default behavior, we are going to manually create the BlueCircle class. From Flash, go to File | New to display the New Document window. From this window, select ActionScript file and press the OK button:

[ select the ActionScript file type from New Document ]

Once you have clicked OK, the New Document window will disappear, and your Flash drawing area will now be replaced by what is essentially a large code editor.

Before we proceed any further, let's save this file. Go to File | Save, navigate to the folder where your current Flash project is, change the current default filename to BlueCircle.as, and hit the Save button. A BlueCircle.as file will now be created in the same location as your rotatingCircles.fla:

[ save your BlueCircle.as file in the same location as your rotatingCircles.fla ]

Great. We just created our BlueCircle.as file. Now, its time for us to add some code to make all of this work. With your BlueCircle.as file open in Flash, copy and paste the following code into it:

package {

import flash.display.*;

import flash.events.*;

 

public class BlueCircle extends MovieClip {

 

var radians = 0;

var speed = 0;

var radius = 5;

 

public function BlueCircle()

{

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

radius = 2+10*Math.random();

 

this.addEventListener(Event.ENTER_FRAME, RotateCircle);

}

 

function RotateCircle(e:Event)

{

radians += speed;

 

this.x += Math.round(radius*Math.cos(radians));

this.y += Math.round(radius*Math.sin(radians));

}

}

}

With the above code copied and pasted into your BlueCircle.as file, save this file by going to File | Save or by pressing Ctrl + S.

All this time, your rotatingCircles.fla file should have been open also, so tab into it by clicking on the rotatingCircles tab:

[ click on the rotatingCircles tab to switch into it ]

You'll be back to seeing what you saw in the previous page - a blank stage with a blue circle displayed. Don't worry though! Press Ctrl + Enter to see what happens. Notice that you now see your circle moving...circularly!

In the next page, let's take a detailed look at what each line of code you just copied and pasted does.

Onwards to the next page!

1 | 2 | 3 | 4 | 5