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 Edi
Trang 1Creating 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
Trang 2Animation 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.
Trang 3Frame 4 Frame 5 Frame 6
Frame 7 Frame 8 Frame 1 Frame 2 Frame 3
Frame-by-Frame Animation
Trang 4When 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
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
Trang 5Create 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
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
Trang 6Any frame can be converted into a keyframe As a time-saver, you can select a range of frames and convert them all into keyframes simulta-neously This is useful when you have many frames to convert It is also
a good technique for fine-tuning shape and motion tweens After the tween has been applied, you can convert the frames in the tweened span into keyframes and edit them independently
Converting Frames to
Keyframes
Convert Multiple Frames
Into Keyframes
Click on a frame, and then drag to
select a frame span
Click the Modify menu, point to
Timeline, and then click Convert
To Keyframes.
TIMESAVER Press Ctrl+click
(Mac) or right-click (Win) the
selected frames, and then click
Convert To Keyframes or Press F6
after selecting all of the frames
you want to convert
2
1
1
Selected frames are converted into keyframes.
Did You Know?
You don't have to select a frame to add
keyframes If you place the playhead
over a frame and add a keyframe or a
blank keyframe, it appears without you
having to select the actual frame
However, if you are working with
multi-ple layers, Flash adds a keyframe to all
layers at that frame if no frame is
selected