Flash CS4 Professional in 24 Hours- P6 doc

Frames and Frame Rate As mentioned earlier in this hour, an animation is a series of still images.. Frame rate Current time Current frame number FIGURE 7.4 The status area in the Timelin

HOUR 7 Understanding Animation

HOUR 8 Using Motion Tweens to Animate

HOUR 9 Using Shape Tweens to Morph

HOUR 10 Advanced Animation with Inverse Kinematics

HOUR 11 Simulating 3D Animation

HOUR 12 Reusing Your Animations with Motion Presets

HOUR 13 Including Sound in Animations

HOUR 14 Nesting Animations in Movie Clip and Graphic Symbols

HOUR 15 Creating Special Effects

Animating in Flash

ptg

WHAT YOU’LL LEARN INTHIS HOUR:

The fundamentals ofanimation

The common terms ofanimation

How to use the basicFlash features related toanimation

The common ceptions of animation(and how to overcomethem)

miscon-There’s nothing like animation It can inspire, educate, and entertain It’s

memorable, too; no doubt when you hear the name Disney, scenes from

classic animated movies pop into your head You are on the verge of

gain-ing the power to communicate your own messages with animation Before

we get into the nuts and bolts of Flash animation, there are several concepts

you should understand This hour discusses animation in general and as

applied to Flash creations If your basic understanding is clear, acquiring

and applying the technical animation skills discussed in the next several

hours is easier

How Animation Works

Animation is made from individual images Regardless of how motion is

created in an animation, an animation is still a collection of fixed images

Suppose you see a car drive by; you see the car the entire time it’s within

sight, but you are likely to blink Your brain covers up the fact that you

missed part of the action When you watch a movie or television, the screen

is blinking quickly Sometimes it shows an image, and other times it’s

blank The fact that the blank moments are so short enables your brain to

interpolate the missing information, and you think you’re watching full

mo-tion with no gaps

The image projected onto the retina of your eyes remains even after the

light stops If you close your eyes, the last thing you saw remains imprinted

for just an instant, and then it fades This persistence of vision is why you

don’t notice the blank spots between frames of a movie, assuming they are

short enough

Understanding Animation

FIGURE 7.1

Click Window, Timeline to open the

Timeline panel if your timeline isn’t

visible.

Elements of Animation

Now that you know a little bit about how animation works, we can discusshow it applies to Flash As discussed in the following sections, several gen-eral animation terms have specific meanings in Flash You need to under-stand both the general meanings and how the terms apply to Flash

Frames and Frame Rate

As mentioned earlier in this hour, an animation is a series of still images

Each image is called a frame In movies, frames are the individual pictures

on the film itself In Flash, frames are the little rectangular cells in the line If you can’t see your timeline, you might need to open the Timelinepanel by clicking Window, Timeline (shown in Figure 7.1) The frames arenumbered at the top of the Timeline, and every fifth frame is gray; the rest

Time-of the frames are white with a gray outline The Timeline displays all theframes, but normally you can look at the contents of one frame at a time

The red current-frame marker can be in only one place at a time—the frameyou’re currently viewing You don’t draw into a frame on the Timeline—

you draw onto the Stage The current-frame marker indicates the framewhose contents are currently onscreen Figure 7.2 shows the Timeline in itsinitial state Until this movie’s duration is extended, you can’t move the redcurrent-frame marker past 1, and only Frame 1 is enclosed by a solid whitebox with a hollow circle

By default, a Timeline is initially one frame long The current-frame marker

is unmovable at that point because it can be placed only in the frame of an

animation, and so far the current movie has only one frame Let’s look at an

animation that has more frames, but instead of building an animation, you

can download a sample from the publisher’s website

Download and open the keyframing.flafile, so you can follow along

Click in the numbered area of the Timeline on Frame 15 The current-frame

marker moves to where you click; be sure to click in the numbered area

to-ward the top of the Timeline, not in the cells (see Figure 7.3)

This example illustrates a few important concepts First, if you click and

drag the current-frame marker in the number area above the frames all the

way from Frame 1 to Frame 60, you see a quick preview of the animation

This technique is called scrubbing The preview you’re given is dependent

on how fast you scrub Naturally, the frame rate is more even and consistent

when the user watches an animation If you select Control, Play, or press

Enter, you see this animation play at its correct frame rate To stop, press

En-ter again Take a look at the status area along the bottom of the Timeline

Frame rate

Current time Current frame number

FIGURE 7.4

The status area in the Timeline

con-tains three impor tant numbers

re-lated to timing.

The three numbers are the current frame number, the frame rate, and thecurrent time elapsed (see Figure 7.4)

Scrub is a term that is used in other animation software It’s a technique for

previewing an animation In Flash, you grab the red current-frame markerabove the timeline cells and drag it back and forth You are moving yourmouse in a scrubbing motion, hence the name

Frame rate is the rate at which frames are played back for the user,

meas-ured in frames per second (fps) A frame rate of 30 fps means that 30 framesare displayed every second It is easy to confuse frame rate with speed, butthey’re not necessarily the same If an entire animation uses 10 frames at 10fps, it might look identical to the same movement using 20 frames if theframe rate is set to 20 fps Both of these animations take 1 second to finish

Speed isn’t the reason you pick one rate over another The issue is the bility of the user’s machine Flash’s frame rate should really be called maxi-mum frame rate Your movie never exceeds this rate, but on a slow

capa-computer, it might play more slowly

The current frame number, on the left, indicates the location of the red rent-frame marker It changes while you’re playing or scrubbing, reflectingthat you can be in only one frame at a time The frame rate, the middlenumber, normally indicates the frame rate for the movie that you last speci-fied This is set by selecting Modify, Document and making a selection inthe Document Properties dialog box However, the number shown can bereduced if after you play the movie, Flash estimates that it can’t actuallykeep up with the requested frame rate It’s not entirely accurate, but it doesprovide a good estimate

cur-Let’s change the frame rate to something very high and see what happens

With the keyframing.flasample file open, let’s open the Document erties dialog box by selecting Modify, Document (You can also open this di-

alog box by pressing Ctrl+J.) Another way to change the frame rate without

opening the Document Properties is by double-clicking the frame rate

num-ber on the Timeline and typing in a new numnum-ber Change the frame rate to

120 Press Enter to play the movie, and notice that as the red current-frame

marker moves through the Timeline, the frame rate changes to show how

fast Flash is actually playing It wants to go 120 fps, but it might not be able

to keep up Now the status shows a more realistic frame rate, one that your

computer can maintain In reality, however, the frame rate shown is not

particularly accurate because it shows only how fast Flash plays during

au-thoring, not in the actual exported movie If you were to export this movie

and play it in a browser, it would likely play slightly faster because the

Flash authoring environment is not part of the picture

Current time, the third number, indicates how long it takes to reach the

frame you’re viewing from the start of the movie For example, how long it

takes an animation to play 50 frames depends on the frame rate At 24 fps,

it should take about 2 seconds At 12 fps, it should take about 4 seconds

The duration of the movie is based on the frame rate

Frame Rate Versus the Number of Frames

The numbers in the status area are very important When you design an

an-imation, you should pick a frame rate and stick to it When you change the

document frame rate, you’re changing it for the entire movie For example,

say you have an animation of a character walking, running, jumping, and

sitting still for a few seconds If the portion where he’s walking is too slow,

you might try to speed it up by increasing the frame rate to make it look

better—but then you discover the character runs extra fast and his sitting

time goes by more quickly Everything is faster! It’s best to leave the frame

rate alone and find another way to increase the speed

There are ways to change the effective speed Suppose you have an animation

of an airplane moving across the sky You need to decide the effective speed

of the airplane according to the size of the airplane and how much sky

you’re showing If you move the airplane all the way across the screen in 36

frames, you can’t determine whether that’s the right speed unless you

con-sider the frame rate At 12 fps, the airplane takes 3 seconds to move across

the sky

Effective speed is how fast something seems to move Actual speed, in

com-parison, is absolute and can be measured If an animation uses 12 frames at

12 fps, the elapsed time of 1 second is the animation’s actual speed The

we repeat our advice: Youshould pick one frame rate andstick with it Keep in mind youcan set the frame rate with thecodestageframeRate=30

is too fast for the airplane in an animation, you can make it appear slower

by slowing down the frame rate or by increasing the number of framesused in the Timeline If you slow the frame rate to 2 fps, it takes 18 secondsfor 36 frames, but the animation is very jumpy Plus, you’re changing therest of the animations in your movie If you extend the animation to take

240 frames, the airplane takes 20 seconds to complete the motion You learnhow to do these things in the next few hours, but for now, it’s only impor-tant to understand the difference between frame rate and total frames

Frame Rates of Different Types of Animation

To put the animation you’re about to create into perspective, let’s considersome traditional animation media In a motion picture, the frame rate atwhich the images appear is 24 fps Even at this relatively slow rate, you don’tnotice the moments when the screen is blank Television plays at 30 fps

In computer animation, the screen doesn’t blink between frames, but you

do have a choice about what frame rate to use Technically, the user’s tor flickers as much or as little as he has it set to flicker, but in any case, it ismuch faster than an animation’s frame rate In computer animation, framerate affects how frequently the onscreen graphic changes or, conversely,how long it pauses before advancing to the next frame In practice, if you

moni-go much below Flash’s default setting of 12 fps, your user starts to noticejumpiness, and if it’s much higher than 36 fps, it can not perform well on allmachines (Remember that traditional movies use 24 fps and look quitesmooth.)

It can seem that you should always crank up the frame rate as high as youcan, which would address the problem of jumpiness However, it’s not thatsimple First, more frames can mean that your movie has a bigger file size

Also, it often requires a computer that can display images quickly If youruser’s machine can’t keep up, it slows down the animation and makes it

not only jumpy but slow Ultimately, a higher frame rate means more

frames, and therefore, more work on your part in creating the animation

Finally, creative animation techniques enable you to fool the user in ways

other than relying on persistence of vision and a fast frame rate You see

ex-amples in Hour 8, “Using Motion Tweens to Animate,” when you create an

animation that uses only three frames In Hour 23, “Optimizing

Perfor-mance,” you learn about even more techniques For now, keep in mind that

frame rate is important, but it isn’t everything

Keyframes and Blank Keyframes

A keyframe is a frame in which you establish exactly what should appear on

the Stage at a particular point A keyframe can include an image, or it might

be blank A blank keyframe is still a keyframe; it’s just one in which nothing

appears on the Stage

In traditional film animation, every frame is a keyframe—that is, something

new appears onscreen with each frame In Flash, you can make every frame

a keyframe, but you can also take some shortcuts If the first keyframe

oc-curs on Frame 1 and the next keyframe doesn’t occur until Frame 10, no

changes appear onscreen during Frames 2–9 The keyframe in Frame 1

es-tablishes what appears in Frame 1, and it doesn’t change until the keyframe

in Frame 10, which establishes what appears then This is totally

appropri-ate for something that doesn’t need to change every fraction of a second

When you create a keyframe, it’s as if you’re telling Flash, “Put this stuff on

the Stage, and keep it here until you reach the next keyframe.” The next

keyframe says the same thing, “Now, put this new stuff on the Stage.” You

have two things to decide when you create keyframes: when you want

them to occur in the Timeline and what you want to appear onscreen at

those moments

Creating a keyframe is done by clicking the cell in the Timeline exactly

where you want a keyframe to be After you click to select a single cell in

the Timeline, click Insert, Timeline, and Keyframe or press F6 A couple

things happen when you do this: Flash places a keyframe in that frame,

in-dicated by either a solid or hollow circle (The second thing it does sounds

more confusing than it is, as you see when you try it yourself shortly.) Flash

copies the Stage content from the previous keyframe, and it appears in your

new keyframe If at the previous keyframe you have nothing on the Stage, a

blank keyframe is inserted If at the previous keyframe you have something

drawn on the Stage, that shape or symbol instance is copied onto the State

at the new keyframe This can be convenient because a keyframe gives you

a chance to specify both when you want an onscreen change to occur andwhat the onscreen contents should change to Often you want just a smallchange Creating a keyframe enables you to start with a copy of the previ-ous keyframe’s content instead of redrawing it from scratch You get theidea when you do it yourself

Whatever you draw in a keyframe continues to be displayed until the line arrives at the next keyframe (blank or otherwise) If keyframes areplaced one after another, the screen changes with every frame If the framerate is 10 fps, you see 10 keyframes in 1 second

Time-However, keyframes don’t have to occur one after another If you insertkeyframes at alternating frames, changes appear five times per second (still

at 10 fps) For any frames between keyframes, you see the content of theprevious keyframe, either an image or a blank screen Say you want a box

to appear onscreen and remain still for 1 second before it moves In onekeyframe you draw a box, and then 10 frames later (1 second at 10 fps) youinsert a new keyframe in which you can move the box to a new location

2 Notice there are separate named layers: Sparkle, CS4, Flash, and ground (We look at each separately.) You might need to resize theheight or width of the Timeline, use the scrollbars, or view it as a sepa-rate panel to see all the frames and layers (as illustrated in Figure 7.6)

Back-FIGURE 7.5

This Timeline has many clues

about what kind of animation is

3 The Background layer appears initially in Frame 1 and remains

un-changed onscreen for the duration of the animation Notice the

keyframe in Frame 1, followed by many regular frames It’s possible to

extend or reduce the duration of any of the background layers by first

holding Ctrl and then moving the box at Frame 60—but don’t do this yet

Figure 7.7 shows a close-up of the Timeline

4 Scrub Frames 31 through 60 by dragging the current-frame marker in

the numbered area of the Timeline Notice the animation of Sparkle The

Sparkle layer has a keyframe in each frame from 31 to 54 Onscreen, a

different drawing of the Sparkle appears for each frame Scrub past

Frame 54, and the Sparkle is gone—because in the Sparkle layer, there

are no frames after 54

it spins You can press the comma and period keys to step throughthis animation because scrubbing might be too fast to let you see theeffect.

6 The CS4 layer has a blank keyframe in Frame 1 shown by a hollow cle It’s not that the CS4 graphic is offscreen at the star t, rather itdoesn’t exist That’s the idea of a blank keyframe The CS4 graphicdoesn’t appear until Frame 10 This is where you see the firstkeyframe with a solid black circle When the CS4 graphic appears, itchanges in ever y frame that contains a keyframe Actually, it pauses atFrame 20, and another keyframe in that layer doesn’t appear untilFrame 25 Finally, Frame 30 is the last frame for this layer, and noframes exist past this point

cir-7 Tr y adding frames after Frame 30 in the CS4 layer Click the cell atFrame 60, and select Insert, Timeline, Frame or press F5 When youplay the animation, the CS4 graphic never fully disappears The newregular frames extend the duration of the contents at the keyframe inFrame 30 One way to remove the frames following the keyframe inFrame 30 is to hold down the Ctrl key and drag the box that is now atthe end of the Sparkle layer to the left (see Figure 7.8) (Note that youdon’t need to hold Ctrl if you’ve previously selected Edit, Preferencesand clicked the Span Based Section option.)

FIGURE 7.8

After you add frames to the end

of a layer, you can reduce the

du-ration if you hold Ctrl and drag

the box to the left.

8 Close this file without saving

The practical example in the preceding task is a great chance to seekeyframes, blank keyframes, and regular frames in a working file This isn’tthe most impressive Flash movie, but it’s intended to exemplify specificpoints about frames and keyframes

Tweening

You can put whatever you want in keyframes The space between two

keyframes effectively holds the onscreen contents from the first keyframe

Alternatively, you can tell Flash to interpolate the change in a process called

tweening For example, suppose in one keyframe an airplane is on the left of

the stage Then, you have a series of frames Finally, you have another

keyframe that shows the airplane on the right side of the stage Flash can

calculate how to move the first image to the second through the intervening

frames

Tweening is the process of interpolating two keyframes Tweening

smoothes out a big change by breaking it into little steps If a circle at the

bottom of the screen jumps to the top of the screen 1 second later at 10 fps,

the change appears abrupt If the two frames are tweened, you see the circle

move a little bit (about 1/10 of the total distance) 10 times The coarse

movement is smoothed out with small changes in the in-between frames

Flash calculates these tweened or interpolated frames so you don’t have to

do all the work

So you can see what it looks like, check out the tweened frames in Figure

7.9 Tweening really is as simple as drawing two frames and making Flash

tween the difference You learn more about tweening during Hour 8 and

Hour 9, “Using Shape Tweens to Morph.” Flash helps you by doing some

of the tedious work

NOTE

The Meaning of TweeningThe word tweening is from the

word between, and it is used in

conventional animation, as well

as in Flash If you look at thecredits on any full-length ani-mated feature film, you’re likely

to see the names of both theprincipal ar tists and the tween-ers The principal ar tists drawthe keyframes, and the tweenersfill in the blanks between them

Similarly, in Flash, you draw thekeyframes, and Flash createsthe frames in between

FIGURE 7.9

When you have two keyframes arated by several frames, you can tell Flash how to get from one to the next.

Summary

This hour you took a good look at animation The concepts discussed inthis hour prepare you for the next few hours In this hour, you learnedabout familiar media such as television and film, including how persistence

of vision gives the illusion of animation work

As part of this discussion, you’ve learned several important terms, ing frame rate, keyframes, and tweening Frame rate is how fast Flash at-tempts to display the contents of each frame in sequence Keyframes arewhere you establish what is on the Stage at a particular time Finally,tweening is Flash’s way of filling the spaces between keyframes Thesethree concepts and many more become almost second nature as you prac-tice during the next few hours

includ-Q&A

Q What is the best frame rate to use?

A There’s really no right answer If there were a rule, it would be to usethe lowest frame rate possible This means fewer total frames, which inturn means a slightly smaller file More impor tantly, it means that low-end computers are likely to play back the animation at the intendedrate In addition, it can mean less animating as there are fewer frames

to animate The only downside is you have to be ver y creative to createanimations that use only a few frames to communicate an idea or amovement In general, you’re usually safe sticking to Flash’s defaultrate of 24 fps

Q My monitor’s refresh rate is 75Hz, meaning it blinks 75 times per ond However, I can crank the Flash movie’s frame rate all the way to

sec-120 fps What would be the value of doing that?

A Nothing, really First of all, you are likely to find that if you set the framerate to 120 fps, Flash won’t keep up If you’re playing only a frame ortwo, it can actually go much faster than 36 fps But even if Flash coulddisplay 120 fps on a fast computer, it can’t play that fast for the vastmajority of the audience Generally, going much over 36 fps is simplyasking for trouble

Q It was really helpful deconstructing that keyframing.flafile Can youadd some more files like that?

A Sure In fact, you find several other files that appear later in the book at

Q I’ve set my document properties to 24 fps, but the display on the

bot-tom of the Timeline changed to 18.2 fps How do I change it back?

A First, this is a sign your movie can’t play at 24 fps The 18.2 indicates

that the last time you played the movie, it could reach only that frame

rate The frame rate set in the document proper ties has not changed If

you really want to change the display number, you need to access the

document proper ties again or double-click the 18.2 and edit it Keep in

mind that just because you set the frame rate to 24 fps doesn’t mean

Flash plays that fast It can tr y, but it might not succeed

Workshop

The Workshop consists of quiz questions and answers to help you solidify

your understanding of the material covered in this hour You should try to

answer the questions before checking the answers

Quiz

1 What is the visual effect of a movie that has a keyframe in every frame?

A It appears smooth

B It appears jumpy

C It might have no visual effect

2 If you set the frame rate to 2 fps, what is the visual result?

A The animation looks jumpy

B You see the blank (black) pauses between frames

C You can see subliminal messages between the frames

3 If a document’s properties are set to a frame rate of 60 fps, how long

does it take to reach Frame 90?

A 1.5 seconds exactly

B 1.5 seconds or more

C None of the above