About Frame Rate and Animation

The frame rate, the speed at which an animation is played, is measured in number of frames per second. A frame rate that’s too slow causes the animation to appear jerky; a frame rate that’s too fast might negatively affect the animation or use too much of the user’s computer processing power. The complexity of the animation and the speed of the computer on which the animation is being played affect the smoothness of the playback. Test your animations on a variety of machines to determine optimum frame rates.

You need to think about frame rate when working with animations because it can affect the performance of your SWF file and the computer that plays it. Setting a frame rate too high can lead to processor problems, especially when you use many assets or use ActionScript to create your animation. However, you also need to consider the frame rate setting because it affects how smoothly your animation plays.

For example, an animation set to 12 frames per second (fps) in the Property inspector plays 12 frames each second. If the document’s frame rate is set to 24 fps, the animation appears to animate more smoothly than if it ran at 12 fps. However, your animation at 24 fps also plays much faster than it does at 12 fps, so the total duration (in seconds) is shorter. Therefore, if you need to make a five-second animation using a higher frame rate, it means you need to insert additional frames to fill those five seconds than at a lower frame rate—which raises the total file size of your animation. A five-second animation at 24 fps typically has a higher file size than a five-second animation at 12 fps, depending on your assets and how you are animating the content. Figure 2 shows the same animation at 12 fps and 24 fps.

Figure 2. Top SWF file set to 12 fps and bottom SWF file set to 24 fps, which rotates much faster and appears to animate smoothly

Tip: Because you specify only one frame rate for the entire Flash document, it’s a good idea to set this rate before you begin creating the animation.

Note: When you use an onEnterFrame event handler to create scripted animations, the animation runs at the document’s frame rate, as if you created a motion tween on a timeline. An alternative to the onEnterFrame event handler is setInterval. Instead of depending on the frame rate, you call functions at a specified interval. Like onEnterFrame, the more frequently you use setInterval to call a function, the more resource-intensive the animation is on your processor.

Use the lowest possible frame rate that makes your animation appear to play smoothly at runtime because it will help reduce the strain on the end-user’s processor. Try not to use a frame rate that’s more than 30–40 fps; high frame rates put a lot of stress on processors. Also, do not change the appearance of the animation much, or at all, at runtime.

Finally, especially if you’re working with Timeline-based animations, select a frame rate for your animation as early as possible in the development process. When you test the SWF file, check the duration and the SWF file size of your animation. The frame rate greatly affects the speed of the animation.