Frame Rates - Page 1
       by kirupa  |  3 November 2009

Since you are on this site, I am going to assume that you have an interest in things that move - especially things on a screen. Crucial to all of this is frame rates. Frame rates are interesting because they are often an underlooked detail when creating animations in Flash.

In this article, I will explain two things. First, I will describe frames and rates so that you know what exactly it is you are dealing with. Second, I will describe how to change the frame rate with code and without.

Before we get to any of that, it's example time! The following is a programmatic animation with circles moving around. Play with the up and down arrows in the following animation to either increase or decrease the frame rate:

The up arrows increase the frame rate, and the down arrows decrease the frame rate. Notice how the animation's speed changes as you play with the arrows. Beyond just the speed, notice

Frames and Rates
When you are dealing with motion, you are often working with frames. A frame is a snapshot of what you are currently depicting such as a blue circle on a light gray background:

A single frame by itself does not really convey much. Get enough of these frames (with some slight changes in what you are depecting) and start cycling through them:

The end result is an animation. There are two things that determine how well your animation works - the number of frames and how quickly you change these frames.

Number of Frames
Creating the illusion of motion requires a transition between two points. How jerky or smooth the transition depends partly on how many intermdiate points you define. Let's say I have an example of a circle scaling and shifting over a period of time:

You have a starting point, an ending point, and a few intermediate points where the circle's scaling and shifting are defined. This entire animation is only five frames long. To contrast that, let's add more intermediate frames to define this animation:

This time around, more of your circle scaling and shifting is explicitly defined. There are around 20 frames that make up our animation this time.

Based on just what I've provided, which one would you think looks smoother when played back? This depends, as you will see in the next section, on the frame rate. If you were to ignore the frame rate for a moment, with both animations played back at the same frame rate, the one with more intermediate frames would look smoother because there are more points defined.

Frame Rate
The next thing we will look at is the frame rate. The frame rate determines how many frames are played in a given second of time. This value is measured in frames per seconds or fps for short:

The higher your fps the faster your animation will proceed to completion because you are running through all of your frames at a faster pace. Likewise, the slower your fps, the slower your animation will proceed to completion. You saw this much in the Flash example above where, when you slowed your frame rate down greatly, the animation looked really jerky.

The frame rate you will use determines largely on what you are creating. In general, I like to use 24 as a good number for the frames per second for the content that I create. This means that every second of animation requires 24 frames. In the more recent versions of Flash, the default frame rate is set to 24 as well. If you remember long ago, Flash used used to be 12 (or was it 15?).

If you are curious what common frates are for TV and movie content, check out the Frame Rate article on Wikipedia.

You can easily get away with great animations whose frame rates are either lower or higher than 24. The thing you need to keep in mind, especially when working with Flash, is performance. A higher frame rate requires a user's computer to do more work to cycle through all of the visual information quickly. Having a high frame rate on simple content should not be a problem. Having a high frame rate on visually complex content may be a problem with many of your users viewing your content at a lower frame rate than what you would have preferred.

Anyway, so far so good. Let's look at this through Flash's eyes and learn how to adjust the frame rate on the next page.

Onwards to the next page!

1 | 2

SUPPORTERS:'s fast and reliable hosting provided by Media Temple.