|
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
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.
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.
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!
|
Frame Rates - Page 1
