Animation Learning Guide for Flash: Frame rates
Modified
15 August 2011
Requirements
Prerequisite knowledge
A basic knowledge of the Flash Professional workspace.
User level
Beginning
Required products
- Flash Professional (Download trial)
In Adobe Flash Professional CS5 the frame rate—the speed at which an animation is played or the playhead moves across a timeline—is measured in the number of frames displayed per second. A frame rate that's too slow means your animation might not appear to be smooth; a frame rate that's too fast might negatively affect the performance, shorten the animation's duration too much, or use a lot 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.
Note: You can change the FPS setting in the Document Properties dialog box (click the Edit button in the Properties section of the Property inspector) or at the bottom of the Timeline using the hot text next to fps.
Why care about 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 (see Figure 1). 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 add additional frames to fill those five seconds than at a lower frame rate (and thus, it can raise the total file size of your animation, especially if you use frame-by-frame animation or use a lot of keyframes).
Figure 1. The top SWF file is set to 12 fps, and the bottom SWF file is set to 24 fps, which rotates much faster and appears to animate smoothly.
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 animation or very early in the creation process, especially if you're working with timeline-based animations. Make a few test animations and test them in Flash Player, checking the duration and the SWF file size of your animation because the frame rate can affect both of these. This will help determine an optimal FPS setting. If targeting the web, use a frame rate that makes your animation appear to play smoothly at runtime. However, keep the frame rate as low as possible (for example, 30 fps may appear as smooth as 40fps); doing so helps reduce the strain on lower end processors.
Note: If you are targeting other forms of media, such as broadcast, you may need to set a specific frame rate (such as 24 or 29.97 fps).
Where to go from here
Read Animation frame rate and performance in the Flash Professional online help for more information. Read the Timelines and keyframes section of the Animation Learning Guide for Flash to learn more about working with frames in Flash Professional.
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License
More Like This
- Animation Learning Guide for Flash: Shape tweens
- Animation Learning Guide for Flash: Preset and custom eases
- Animation Learning Guide for Flash: Frame-by-frame animation
- Animation Learning Guide for Flash: Motion Editor
- Animation Learning Guide for Flash: Using ActionScript 3
- Animation Learning Guide for Flash: Motion presets
- Animation Learning Guide for Flash: Motion tween manipulations
- Animation Learning Guide for Flash: Motion tweens
- Animation Learning Guide for Flash: Overview
- Animation Learning Guide for Flash: Timelines and keyframes
