Frames and Rates

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 below.

There is a hands-on side to all of this, and in this page, you will learn how this all works in Flash and also how to change the frame rate in Flash.
Flash and Frames and Rates
Flash, like many digital animation programs, abstracts away a lot of the details related to frames and frame rates. In fact, all you really ever have to worry about is your frame rate and how long your animation will be running for. Generating intermediate frames are taken care of by the tweening engine. The only times you have to worry about the intermediate frames is if you are actually drawing each frame by hand.
Let's look at how what you learned in the previous page applies in practice. For a 1 second animation, your timeline will look as follows:

The key things to notice are the values at the bottom right. The duration of the animation is 1 second, the frames per second is 24, and the playhead is currently on Frame 24. If I change the frame rate to 12, as you can guess, it now takes twice as long for the animation to finish:

The duration of my animation jumped from 1 second to 1.9 seconds. Despite all of this changing, notice that I never had to define additional frames. This should seem very casual because the equation for determining the frame rate is number of frames divided by the duration. You can mathematically manipulate these variables to solve for the missing value.
A 24 frame animation with a frame rate of 12 frames per second will take around 2 seconds to finish.
Using the UI to Change the Frame Rate
The most common way to change your frame rate is to use the Properties panel and change it globally for your entire application:

The default rate is 24 in more recent versions of Flash, and like I mentioned in the previous page, that is a good value to keep your frame rate at.
Programmatically Changing the Frame Rate
When you are working with more interactive types of animations, you may want to change your frame rate while your application is running. Fortunately, in ActionScript 3, you have easy access to the frame rate property.
The way you access the frame rate is through:

stage.frameRate

Because stage is global, you can call the frameRate property from pretty much anywhere in your application. You can easily set the frame rate value as well since this is a property that you can both read and write:

stage.frameRate = 25;

That's all there is to programmatically being able to set the frame rate. I never said it was complicated.
Conclusion Well, this wraps up or overview of frames, rates, and everything in between in the world of Flash. The one thing I did not go into great detail is how my example on the first page was created, so I have provided the source for this below:

Download Source