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.