flizash.com

Here I will be showing you another techique that can be used to animate your objects using time in ActionScript 3.0, rather than frames, as the basis for how far your objects move. I previously wrote about frame based animation if you would like to review that. One major advantage of time based animation is that it allows you to adjust the frame rate of your movie without affecting the speed of any objects you have animated via ActionScript. For example, when relying on frames, you would tell an object to move a certain number of pixels each frame. If your movie was first set to 15 frames per second and then adjusted to 30, the speed of your objects would double. Let’s get to it and see how time based animation avoids this problem!

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

First, to set the stage here, I have drawn a circle, converted it to a movie clip, and set the linkage to “circle”. If you do not know how to setup the linkage for an object so that we may use it ActionScript, please refer to my previous tutorial - responding to mouse clicks.

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