For my setup here, I have simply drawn my trusty red circle onto the stage and converted it to a movie clip, which I gave an instance name of myCircle.

Next I start in with ActionScript. Open up your editor (F9) and let’s get to it. First we create a new integer variable called oldTime:

1

var oldTime:int = getTimer();

What this does is store the amount of time that has passed since the movie started, in milliseconds, using the getTimer() function (built into Flash). Next we will add an event listener that will run once per frame:

3

addEventListener(Event.ENTER_FRAME, moveCircle);

As you can see, the event listener calls a function called moveCircle, which we will create now:

5
6
7
8
9

function moveCircle(event:Event):void {
	var interval:int = getTimer() - oldTime;
	oldTime += interval;
	myCircle.x += interval * 0.1;
}

Here is what is happening with the function, line by line:

Line 5: Declare the function and set it to accept the ENTER_FRAME event.

Line 6: Create a new integer variable called interval. This variable again calls the getTimer() function to grab the amount of time that has passed since the movie started. It then subtracts from it the variable we created earlier, oldTime. This will be further explained in a moment.

Line 7: Add the interval variable that we just calculated to the oldTime variable. This will constantly increase this variable each time the function runs, once per frame.

Line 8: Here is where the circle animates. Set the x property of the circle equal to the interval variable we created, which has been multiplied by 0.1 This is further explained below.

Line 9: Ends the function.

If you run through this function hypothetically, you can see how this is working. So that the math is easier to follow, let’s say that the movie has been set to 10 frames per second. When the movie first loads, the oldTime variable is set. Since no time has passed, we’ll say that the variable is equal to 0. Since we are working with milliseconds here, it’s helpful to point out that 1 second is equal to 1000 milliseconds. We are running at 10fps, therefore each frame runs about 100 milliseconds apart.

Running through the function, the first thing that happens is that interval is set to the getTimer() value. On the next frame to run, that value would be 100. We then subtract oldTime, which is currently set to 0. Therefore interval is set to 100. Next, oldTime is set to itself plus interval, or 0 + 100…oldTime now equals 100 as well, and that is to setup the next iteration of the function. The circle’s x property is then set to interval * 0.1, or 100 * 0.1, which equals 10. Therefore the circle is redrawn 10 pixels to the right of where it was previously. If you increase the value of 0.1 to 0.5, the circle would be redrawn 50 pixels to the right each frame, speeding it up significantly (100 * 0.5 = 50). If you were to increase the frame rate, the calculation is adjusted because the interval variable would be lower.

Hopefully I explained that half decent…if I didn’t, just increase the 0.1 to speed it up, decrease it to slow it down. Click the download link below to get the source .fla.

Download Source

The first thing I need to do is place the object on the stage, as I explained in placing an object on the stage.

1
2
3
4

var hero:circle = new circle();
hero.x = 5;
hero.y = 5;
addChild(hero);

Next, we setup an event listener to the stage that will run once per frame:

6

stage.addEventListener(Event.ENTER_FRAME, moveCircle);

That event listener calls a function called moveCircle, which we create next:

8
9
10

function moveCircle(event:Event):void {
	hero.x += 1;
}

What this function does is, as you can see on line 9, is find out what the x property is of our object, and then add 1 to it. What that means is that every time our flash movie runs a frame, this function runs and moves the circle to the right 1 pixel, because the x property increases by 1 each time. If you subtract from the x property, your object moves to the left. If you use the y property instead of x, your circle can be controlled vertically. Adding to y will move the circle down, subtracting will move it up.

That is all there is to the basics of frame-based animation. There are other ways to animate objects that I will show you in later tutorials.

Click the download link below to obtain the source .fla for this simple example.

Download Source

To start off, I have an empty stage with a couple of assets in the library. I have a circle which I have converted to a movie clip named "Circle", and a rectangle which I have also converted to a movie clip that I named "Button".

We need to export both of these objects for actionscript. Right-click on the Button object and select Linkage. Check the Export for ActionScript box in the dialog box presented below.

Click OK when finished. Click OK again if you get a warning from Flash. This warning only serves to inform you that Flash will create a class for the object automatically. Repeat the above steps with the Circle object.

Drag an instance of the Button object onto the stage. The goal here is to have the user click the rectangle, then place an instance of the Circle object onto the stage. I have placed mine in the lower right corner.

Select the rectangle on the stage and give it an instance name in the Properties panel. I named mine "button1".

Add a new layer to your timeline called "actions". Click inside of frame 1 and open your actionscript editor with the F9 key.

The first thing we will do is make it so that when a user hovers the mouse over the rectangle, the cursor changes to indicate that this object is clickable. Type the following actionscript onto line 1:

1

button1.buttonMode = true;

This line accesses the buttonMode property of the button1 object. Setting this to true will cause the cursor to change when hovering your mouse over it. Press ctrl + enter to test your movie and see for yourself. Next we must add an Event Listener to the button1 object so that it will respond to a mouse click. Enter the following actionscript on line 2:

2

button1.addEventListener(MouseEvent.CLICK, onClick);

This calls the addEventListener method of the button1 object. It takes 2 parameters, first the event to listen for (in this case, a mouse click), the second is the function to call when the event takes place (in this case, onClick). You can read this line to say "when a user clicks on button1, call the onClick function." Right now our button listens for a mouse click, but doesn’t do anything yet because we haven’t created the function that it calls. To do that, add the following actionscript, starting on line 4:

4
5
6
7
8
9

function onClick(event:MouseEvent):void {
	var circle1:Circle = new Circle();
	circle1.x = 10;
	circle1.y = 10;
	addChild(circle1);
}

Line 4: This line declares the function, onClick, and says that it will accept a MouseEvent. :void means that the function will not be returning any data. The { bracket signifies the start of the code that the function will run when called.

Line 5: Here we are creating a new instance of the Circle class, and I called mine "circle1".

Lines 6 and 7: Set the x and y properties of the circle1 object. This will place the circle 10 pixels from the top and 10 pixels from the left of the stage.

Line 8: This adds the circle1 object to the display list, allowing Flash to render it to the stage.

Line 9: The } bracket signifies the end of our function.

Press ctrl + enter to test the movie. I have published my version below, click the green button to see it at work.

One thing to note here is that the onClick function is run every time you click on the green button. In our example, what that will do is create a new circle at the same x and y positions over and over, hiding the previous circles underneath. There are several ways to prevent things like this from happening, but for the purposes of this tutorial we are only learning how to create on object on the stage in response to a mouse event. One such solution would be to create the circle before the function is called, and then setting the x and y positions and adding it to the display list inside the function.

Click the download link below to download the source .fla.

Download Source

The first thing we need to do is export the movie clip for use in our actionscript. Right-click on your movie clip in the library and click Linkage.

In the dialog box that opens, click the Export for ActionScript option. Just leave the other options as they are, this will create a class named "Circle" for us to use in our code. I generally like to leave the class name the same as the movie clip for easy reference. Click OK to close this dialog box when you are finished..

After hitting OK, you will likely see this warning:

Just click OK here. Flash is just letting us know that it couldn’t find a class for "Circle", so it will create one automatically. Next thing I have done is create a new layer to put our actionscript on. This is not a necessary step, but it’s just something a lot of us do help keep everything organized. Click inside of frame 1 of the actions layer to make sure that we add our actionscript to that frame. You can see below that frame 1 is selected.

Now open up your actions window. You can use the F9 key to open it as a shortcut if it’s not already open. Use the following actionscript code to place a circle on the stage.

1
2
3
4

var circle:Circle = new Circle();
circle.x = 10;
circle.y = 10;
addChild(circle);

A quick explanation of the code, line by line:

Line 1: This line creates a new instance of the "Circle" class, and to keep it simple I called it "circle". You could call this instance anything you want, so long as the class is "Circle."

Line 2: This line sets the x property of the circle to 10, which places the circle 10 pixels from the left of the start of the stage.

Line 3: This sets the y property of the circle to 10, placing it 10 pixels from the top of the stage.

Line 4: This line adds the circle to the display list. It is this line of code that makes Flash render the circle.

Press ctrl + enter to test your movie within Flash. This is what my movie looks like:

And that’s all there is to it! Next time I’ll show you how to make this example interactive and bring an object onto the screen when a user clicks a button. Click below to download the source file for my movie to look at what I did if you are having problems. (Right-click -> Save As)

Download Source