Thiết kế flash với flash cs5 part 33

ptg
Creating Frame-by-Frame
Animation
Introduction
Flash provides several methods for creating animation. In
addition to shape and motion tweening, you can create
frame-by-frame animations. The frame-by-frame method is
derived from the traditional animation process whereby the
content is redrawn on each frame with slight differences from
the last frame. When these frames are played in sequence,
there is an illusion of movement. In Flash, you utilize
keyframes in the Timeline to accomplish this. A
keyframe
defines a change to the artwork placed on the Stage. There
are a number of ways to create and edit keyframes, as they
are editable objects. Keyframes can be moved, copied, and
pasted to and from any Timeline in your Flash movie or
between different Flash documents. Frame-by-frame anima-
tions can be previewed in the Flash development environ-
ment so you can quickly see the results and check your work
as you animate. They can also be viewed in the Flash Player
using the Test Movie options.
Additionally, there is an Onion Skin mode that allows you
to see the active frame in context to the frames around it,
making it easier to fine-tune keyframe changes. The versatility
of the Timeline and the strength of the Flash Player allow you
to implement animation in your movie and give it life.
7
7
What You’ll Do
Understand Frame-by-Frame Animation

Create Keyframes
Convert Frames to Keyframes
Use Frame-Based Versus Span-
Based Selection
Clear Keyframes Versus Removing
Frames
Edit Keyframes
Create a Simple Frame-by-Frame
Animation
Play an Animation
Use Onion Skinning
Modify Onion Skin Markers
Edit Multiple Frames
217
From the Library of Wow! eBook
ptg
218
Chapter 7
Animation is the illusion of movement. It is
comprised of a series of pictures, each slightly
different from the last, that when played
sequentially imply movement. Motion pic-
tures work the same way. What you see when
you view a film is a long strip of images
played at specific intervals. In this way, the
content in the pictures moves and seems to
imitate real life.
Traditional cell animators draw a picture
onto a frame of celluloid and then draw the
same thing onto the next frame but with

slight changes made to the drawing. Static
parts of the scene (such as a background) are
copied and only the objects that change are
redrawn. In this way the process is more effi-
cient.
The principles for animating in Flash have
derived from this process. In Flash, you create
frame-by-frame animations in the Timeline
through the use of keyframes. Each keyframe
defines a change on the Stage, and when
played in succession, the content can seem to
evolve, or move. When you export your
movie, Flash will play these frames in succes-
sion at specific intervals depending on the
frame rate you set. A good introduction to this
concept, as well as the basics of animation, is
the dissection a character walk cycle. When
human beings walk, they are essentially
repeating the same motion over and over
again. In an animated walk cycle, the same
thing occurs, though instead of drawing the
cycle over and over again, the motion is
spaced out so that the last frame (the last
image drawn) meets up with the first frame. If
this animation is looped, the character will
seem to walk perpetually.
Understanding Frame-by-Frame Animation
Static elements such as
the sidewalk span across
multiple frames.

Keyframes define
changes. Each frame
displays a different
part of the walk cycle.
From the Library of Wow! eBook
ptg
Chapter 7 Creating Frame-by-Frame Animation
219
Frame 4 Frame 5 Frame 6
Frame 7 Frame 8
Frame 1 Frame 2 Frame 3
Frame-by-Frame Animation
From the Library of Wow! eBook
ptg
220
Chapter 7
When art is placed on the Stage, it appears in a keyframe in the
Timeline. A keyframe is represented as a black-bounded box with a
small circle in it. By default, each layer in the Timeline has a keyframe
on its first frame. An empty keyframe displays an empty or hollow cir-
cle, but when you place artwork or objects on the Stage, the bounding
box becomes shaded and the small circle becomes a filled black dot. A
keyframe can span multiple frames when there are no changes to the
art. To make a change you create another keyframe. In this way, you
can create animations or content that seems to move or change over
time.
Creating Keyframes
Create a Keyframe
Place art or an object on the
Stage.

Click on a frame later in the
Timeline.
Click the Insert menu, point to
Timeline, and then click Keyframe.
A new keyframe appears.
TIMESAVER
Press F6 to add a
keyframe or Control+click (Mac) or
right-click (Win) the selected
frame, and then click Add
Keyframe.
3
2
1
Empty keyframe appears
as a hollow circle.
When content is placed
on the Stage, the hollow
dot becomes a filled
black dot.
2
New keyframe appears
Framespan
Did You Know?
You can remove content from a
keyframe.
Select a filled keyframe in
the Timeline or the art on the Stage
contained in that keyframe, and then
press the Delete (Mac) or Backspace

(Win) key.
From the Library of Wow! eBook
ptg
Chapter 7 Creating Frame-by-Frame Animation
221
Create a Blank Keyframe
Click on a frame in the Timeline
where you want to add a blank
keyframe.
IMPORTANT
You can only add
a blank keyframe to a frame
without an existing keyframe
(sometimes called an inactive
frame or keyspan).
Click the Insert menu, point to
Timeline, and then click Blank
Keyframe.
TIMESAVER
Press F7 to add a
keyframe or Control+click (Mac) or
right-click (Win) the selected
frame, and then click Add Blank
Keyframe.
Increase the Keyframe Span
Click anywhere in a keyframe
span.
◆
To insert multiple keyframes,
select the number of frames

you want.
Click the Insert menu, point to
Timeline, and then click Frame.
Repeat until you've increased the
framespan to the length you need.
TIMESAVER
Press F5 to add a
frame or Control+click (Mac) or
right-click (Win) the selected
frame, and then click Insert Frame.
2
1
2
1
1
1
Blank keyframe appears
A framespan increased by 10 frames
Inserts one frame
Did You Know?
You can decrease the keyframe span.
Press Shift+F5 for each frame you want
to remove.
From the Library of Wow! eBook