Animation is nothing more than a change in position over time. We can reposition an image of a ball, for example, many time per second and it will give the impression of movement.

There are essentially 2 ways of doing this in Flash, we can move the object based on the current frame, or we can do it based on time. In an ideal world both would give the same effect, but in the real world computers have overheads, and Flash games won’t always run at exactly the framerate we set.

While time based animation is slightly trickier to understand than frame based animation, it’s still a fairly easy concept to get your head around, and the advantages are obvious – your game will still look and behave as it should no matter what speed the computer is running at, and how many other tasks are going on in the background!

Let’s take a look at a quick example to illustrate this. We’ll take a simple circle to be our ball, we’ll use a framerate of just 10FPS, a stage size of 600×600 pixels, and we’ll move the ball so it appears to drop from the top of the stage to the bottom in 2 seconds…

To do this with frame based animation we would simply increase the Y position of the ball by 30 pixels per frame (at 10 FPS we will be covering the 600 pixels in 20 frames, so 600/20=30).

So we would run code like this on every frame:

ball.y += 30;

Now all being well, the ball will move 30 pixels each frame, and after 2 seconds the ball would fall off the bottom of the stage and out of view. However, in the real world it’s quite possible for something to happen which causes the framerate to momentarily drop. Perhaps another open program is performing a function, maybe the user is checking an email on a second monitor, or anti-virus software has kicked in for a routine scan.

If this happens, the ball may only be 70% of the way down the screen at the end of 2 seconds. Now in such a simple example that wouldn’t really matter, but in a game situation the player will notice this slowdown and it will detract from the experience.

Time based animation on the other hand doesn’t move the object by a set amount each frame. Rather, each frame it will calculate the new position of the object based on velocity and time, correctly positioning it even if there has been a slowdown

Again we would run this code on every frame:

var timeFrame:int = getTimer() - oldTime;
oldTime+=timeFrame;
ball.y += ballSpeed*timeFrame;

This calculates the amount of time passed (in milliseconds) since the last frame, then positions the object based on how far it would have moved in that time period.

Now if a frame comes later than it should (due to slowdown) the ball will simply be shown slightly further down, in the correct position. This leads to smoother, more realistic animation, and games which feel responsive and look great, even on slower computers!

Here’s a Flash movie to show this in a working example. It’s running at 30FPS and is 400 pixels in height. The ball on the left is being moved by 10 pixels per frame (which should be 300 pixels per second), while the right hand ball uses time based animation, and is actually being moved at 300 pixels per second (1000 milliseconds, divided by the framerate of 30, multiplied by 0.3 gives 10 pixels per second, the same speed as ball 1)…

In an ideal world both should look identical, but what you’ll see is the left hand ball falls behind (click restart to put them both in alignment again!)

Here’s the actionscript so you can see exactly what’s going on:

The slower your computer, or the more processes you have running the more noticeable this difference will be. Now, note that this is simply moving 2 circles on the screen – imagine if we were controlling 10 or 20 sprites, a scrolling background, and a number of effects!

As you can see, time based animation is a much better way of moving game objects on screen, and once you get the hang of it you’ll never go back to frame based animation again!

Share |