Flash CS4 Professional in 24 Hours- P7 docx

Look back at what you’ve learned this hour, and you see that motion tweening is pretty easy: Set an ending frame, specify how you want Flash to tween, and you have a motion tween!. FIGUR

Notice that, as time passes at the beginning, the graph is mainly

horizon-tal—meaning it’s not completing much of its tween Then, in the middle it’s

nearly a vertical line—meaning it is doing most of its tween Finally, it

slows back down as it approaches the end You can click anywhere between

the two keyframes and press F5 many times to insert more frames Also,

you can crank up the frame rate to something relatively fast, like 50fps (To

change the frame rate, select Modify, Document, or press Ctrl+J.) Both edits

should make the tween more obvious

You might have noticed the list of other preset eases under the plus sign

menu next to the Eases section Take a look at them now Most have names

that clearly describe what effect they have on the speed of your motion

tween Figure 8.13 shows the Spring easing effect graph In the figure,

we’ve applied it to our tween by selecting it from the drop-down list next to

Basic Motion Give it a try; it’s a really cool effect The number to the right

of the label Spring is currently set to 5; this means it seems to spring five

times, lessening each time You can change this number to increase or

de-crease the springiness

Make an Animation Ease In and Ease Out

TRY IT YOURSELF ▼

FIGURE 8.12

This S-cur ve graph makes a single tween that eases in and eases out.

Rotating in a Motion Tween

In a motion tween, you can tell Flash to rotate a symbol a specific number

of times For example, you can use this option to make an animation of aboulder rolling down a hill as in Figure 8.14 In the Properties panel, when

a frame with motion tweening is selected, you can set the Rotate Directiondrop-down list to CW (for clockwise) or CCW (for counterclockwise) In theexample, we’ve made the boulder rotate five times as it tumbles down thehill Notice the Ease setting here as well If we want our boulder to gainmomentum as it rolls, we can give this a positive value Because perfectlyround symbols are not interesting when rotated, if you want to try rotatingyour yo-yo, consider drawing a logo or some other graphic off-center insidethe master version of the yo-yo symbol

FIGURE 8.13

The Spring ease effect makes your

animated symbol move as though

it’s attached to a spring.

CAUTION

Less Is More

Gratuitous animation is a fine

example of having too much of a

good thing There’s no harm in

playing with all the bells and

whistles available in Flash In

fact, while you are learning

Flash, you should play with

ever ything But when you create

that Flash movie for your

web-site, a little animation goes a

long way Too much can make

your work look unprofessional

Remember the point of using

Flash is to create animation To

effectively communicate an idea

or tell a stor y, you should refrain

from super fluous animation,

which ultimately detracts from

your message For ever y effect

you want to add, ask yourself,

“Does this help clarify my

mes-sage or not?”

TIPAnimating Multiple Symbols

By now you know that if youwant to animate a symbol, itneeds to be the only symbol inthe layer with the motion tween

What if you want to animate twothings at the same time? To dothis, you need to add a newlayer to your movie and put thesecond symbol and its motiontween in that layer

Summary

Congratulations! You’ve learned the fundamental skills of motion tweening

and have explored the Motion Editor It’s fun making Flash do the heavy

lifting for you Look back at what you’ve learned this hour, and you see

that motion tweening is pretty easy: Set an ending frame, specify how you

want Flash to tween, and you have a motion tween! Although motion

tweening is simple, when you add easing, rotating, and all the ways you

can modify a symbol instance (including scale, rotation, skew, position,

color effect, and filter), you have numerous possibilities

Just because the tasks this hour were fairly simple doesn’t mean the motion

tween is for simple effects You should always consider motion tween

be-fore you choose shape tweening, which you learn about in the next hour

Although some situations require a shape tween, motion tweens are more

efficient, and, when used creatively, can be very effective and natural looking

FIGURE 8.14

By using the Proper ties panel while selecting a frame with motion tweening, you can make a symbol rotate an exact number of turns, ei- ther clockwise or counterclockwise.

Q&A

Q Why can’t I motion tween more than one symbol?

A You can have multiple shapes inside the symbol you’re tweening, butthe rule is you can use only one symbol per layer

Q When I use the Rotate setting in my tween, my symbol rotates aroundthe visual center, despite the registration point I chose when I createdthe symbol How do I rotate around something other than the visualcenter?

A The symbol rotates around the transform center point Use the FreeTransform tool to modify the axis of rotation for the instance For moreabout this, review Hour 4

Q Why doesn’t my motion tween follow a smooth path?

A Motion tweening can tween more than just position When tweening aposition, Flash moves directly from one keyframe to the next, findingthe shor test path between two points Wouldn’t it be cool if you coulddraw a cur ve and tell Flash to follow the path you drew? You can—justdrag a point on the Motion Path that shows up whenever you create amotion tween

Q I’m trying to use the Custom Ease In/Ease Out dialog box to make myanimation go past the end of its motion—say, 120% of its tween Howcan I do that?

A You can’t do it with only two keyframes You can inser t a new keyframesomewhere before the ending and place your instance in a location pastthe destination Although it might not be appropriate for your case, con-sider doing this in a frame-by-frame animation Quite often, just a fewstrategically placed keyframes are more effective than a tween

WorkshopThe Workshop consists of quiz questions and answers to help you solidifyyour understanding of the material covered in this hour You should try toanswer the questions before checking the answers

175Workshop

Quiz

1 According to the suggested process of creating a motion tween, what

should you always do before inserting frames?

A Save the file, and take a deep breath because Flash might crash

B Ensure the object in the first keyframe is an instance of a symbol

C Use the Properties panel to tint the instance in the first keyframe

2 When you want to edit the position of a symbol instance in a particular

frame, what must you first ensure?

A That the red current-frame marker is in the frame you want to edit

B That you concentrate on the frame you intend to edit and then

move the instance

C That the symbol isn’t red

3 A motion tween requires a beginning keyframe and an ending

keyframe When establishing you want a tween between those two

keyframes, where do you make your tween settings?

A In the Properties panel, when the symbol instance in keyframe 1 is

selected

B In the Properties panel, when the second frame is selected

C In the Properties panel, when the first keyframe is selected

Quiz Answers

1 B.Saving is always a good idea, but it’s not necessary You want to

make sure the first keyframe contains a symbol because it is copied

into the new keyframe Flash creates for you at the end of your

mo-tion tween

2 A.As surprising as it sounds, people often try option B (also known

as the ESP method) This issue falls under a general suggestion we

call “know where you are.” If you want to edit Frame 1, you need to

make sure the red current-frame marker is in Frame 1

3 A, B, and C.Sorry, trick question You can set a motion tween

any-where on the timeline or even if you have the symbol selected

Exercises

Most of the motion tweens you implemented in this hour tweened only sition Try these exercises that use motion tween on other properties, such

po-as scale and color effect

1 Create a bouncing ball that squashes a little bit before bouncing backwhen it hits the ground You need five keyframes In addition to thefirst keyframe with the ball up high, you need a keyframe for when theball reaches the ground and another keyframe for when the ball’s in asquashed position Line up the bottom of the squashed ball with thebottom of the unsquashed ball You need a keyframe in the down posi-tion but not squashed, and you need a keyframe at the end that corre-sponds to the initial position Tr y using easing where you think ithelps.Hint: Select the frame you want to change and modify yoursymbol properties Flash puts a keyframe in the timeline for you

2 Make a simple tween where text tweens from entirely transparent toits normal opaque or non-alpha state Consider other ways to achievethis besides using the Alpha effect Make a symbol from text beforeyou add a motion tween, and make sure you are using the Static Textsetting when you create your text

How to apply shapehints for more control

There are several ways to keep a Flash movie small and running swiftly

Recycling symbols from the Library and using motion tweening are two of

the best ways Unfortunately, the shape tween, as you’re about to learn, is

one of the least efficient features in Flash because it causes file size to grow

However, shape tweening is pretty cool looking There’s no other way to

get the morph effect in Flash So when appropriate, it’s perfectly acceptable

to use shape tweens

A morph is a kind of animation that naturally changes one shape to another.

Morph is a general term, but it’s the closest common term that describes

how Flash’s shape tween works

Making a Shape Tween

Shape tweens are fun because they look really cool, and they’re easy to

cre-ate In some ways they look more dynamic than motion tweens because

every attribute of your object, including the shape, animates Basically, you

draw one or more shapes or Drawing Objects in two keyframes and set the

tweening in the first keyframe to Shape Unlike in a motion tween, you

don’t want to turn your object or objects into a symbol Let’s create one in

the following task, and then we can analyze it

HOUR 9

Using Shape Tweens to Morph

of the tween, and it matches the beginning.

3 Inser t a keyframe in Frame 15 While the red current-frame marker is

on Frame 15, pull the circle into a new shape by using the Selectiontool First, deselect the circle by clicking elsewhere on the stage offthe circle, and then bring the pointer close to the edge until the cursorchanges to a cur ved-tail pointer Click and drag the edge of the circle

in or out Do this a few more times until you like the shape you’ve ated We made a boomerang shape, as shown in Figure 9.1

cre-FIGURE 9.1

You reshape the edges of the

cir-cle in one of the keyframes.

Flash does the tweening.

4 Set shape tweening for the two spans To do this, click Frame 1, holdShift, and then click Frame 30 This selects all the frames Nowchoose Insert, Shape Tween, or right-click on the selected timeline,and choose Create Shape Tween

5 Select Control, Test Movie (or press Ctrl+Enter) to see your shapemorph

Following the Rules of a Shape Tween

Flash is unforgiving when you don’t follow its rules Luckily, the rules for a

shape tween are very simple: no groups and no symbols That’s it!

Remem-ber these two things, and shape tweens are easy

Techniques and Tips

Just because the rules for a shape tween are simple doesn’t mean that

creat-ing a good-lookcreat-ing shape tween is easy There are several techniques to

make the process easier and the results better

Keep It Simple

The most important tip we can give you is to keep it simple There are very

few rules for a shape tween—as long as you don’t group anything or use

symbols, it works However, when you have a million different shapes

tweening to a million other shapes, the results look random Clues that you

aren’t keeping it simple enough are unexpected results and the

checker-board effect you’re about to see

Consider these unexpected results For example, you imagine your name

morphing gradually into a circle shape, but despite breaking apart the text,

you get a garbled mess or the checkerboard effect in the tweened areas, as

shown in Figure 9.2 These are signs you’re likely creating something too

complicated for Flash to cleanly morph Flash is interpolating the

in-CAUTIONTurning Text into a Shape

Recall from Hour 2, “Drawingand Painting Original Ar t inFlash,” that text acts as a group

or a Drawing Object from the ginning This means you can’tuse text in a shape tween un-less you first break it apar t byselecting Modify, Break Apart

be-If text contains more than onecharacter, you have to break itapar t twice—once to break thetext into individual charactersand another time to turn it intoindividual shapes Keep in mindthat after text becomes a shape,it’s no longer editable

FIGURE 9.2

The checkerboard effect is the mon result of an overly complex shape tween.

between frames accurately, but it can be difficult to go from one extreme, such as your name, to something simple, like a circle Flash getsyou from here to there, but the trip might look messy

The solution is to keep it simple Do just one thing at a time For example,try to tween just one letter of your name into a circle You see later this hour

in “Refining and Fine-Tuning a Shape Tween” that you can help Flash byusing a feature called Shape Hints However, the simpler the animation isthe better A simple animation is easier to create and becomes more likewhat you intended, and it probably results in a more effective movie and asmaller file

Don’t Mix Lines and FillsIt’s best to avoid tweening between shapes that don’t have the same combi-nation of fills and lines because the results are unpredictable Tweening astraight line into a bent line usually works fine But if you try to tween from

a line to a filled shape, you might get unpredictable results As an analogy,consider bending a wire or reshaping clay You could do each separately,but if you had to turn a wire into the same shape as the clay, it would bedifficult or impossible This analogy is similar to Flash tweening lines andfills Flash can tween lines; Flash can tween fills; it can even tween a fillwith a line Flash has difficulty, however, when one keyframe has a line andthe other has a fill or when one keyframe has both line and fill and theother only has one Flash does what it can to interpolate the in-betweenframes when you mix them, but eventually something has to give

To avoid these problems, convert the lines to fills by using Modify, Shape,Convert Lines to Fills Better yet, keep things simple by drawing in bothkeyframes of a tween with just lines, just fills, or both

Avoid Primitive ShapesShape tweens on primitive ovals or primitive rectangles lead to unpre-dictable results You usually get that checkerboard effect, like in Figure 9.2,

or a mess similar to tweening shapes that contain fills and strokes mately, you have better results avoiding primitives in shape tweens; in-stead, you can convert them to symbols and use motion tween

Ulti-Stay Out of Flash’s TerritoryWhen Flash is tweening a span of frames, it colors the tweened frames inthe Timeline either blue (for motion tweening) or green (for shape tween-ing) These interpolated frames are Flash’s territory, as shown in Figure 9.3

With motion tweens, you sometimes need to change the location or

proper-ties of your symbol in one of these interpolated frames; this doesn’t apply

in the case of shape tweening Generally, you should stay out of this area

For one, you can only draw in keyframes, so you can’t draw in this

terri-tory In shape tweens, you can’t even select objects when the red

current-frame marker is in this territory However, recall from Hour 8, “Using

Motion Tweens to Animate,” with motion tweens, you can grab and move

symbols in interpolated frames, which add keyframes

You can’t do any harm to interpolated frames of shape tweens, but trying to

edit them can be very frustrating You can’t draw into them, and you can’t

select objects The best way to think of these frames is that they are Flash’s

territory—not yours You are responsible for the keyframes, and Flash is

re-sponsible for shape tweening

Know When a Motion Tween Will Suffice

It’s easy to fall in love with the shape tween—there’s nothing like it Feel

free to use it when necessary However, shape tweens are inherently less

ef-ficient and harder to produce than motion tweens If you can get the same

effect with either, you should always opt for motion tweening

Let’s say you have a shape you want to tween from a blue circle to a red

square Only a shape tween is sufficient because the actual shape is

chang-ing However, if you want to tween a blue circle into a red circle, you’re

bet-ter off doing it as a motion tween Draw a circle; convert it to a symbol;

FIGURE 9.3

The interpolated frames where Flash is responsible for tweening are blue for a motion tween and green for a shape tween.

con-Sometimes it’s obvious which type of tween is more appropriate If thing’s moving, changing size, or changing color, a motion tween is appro-priate, whereas significant changes to a shape require the shape tween.

some-Sometimes, it’s not so obvious For example, you can drastically change asymbol’s shape by using the Free Transform tool’s Rotate, Scale, and Skewoptions Plus, tweening the properties of a Filter using Motion Tween canhave a huge impact Figure 9.4 shows how different the beginning and end

of a motion tween can be

FIGURE 9.4

Before choosing Shape tween,

con-sider distor ting a movie clip and

us-ing Motion Tween Each original clip

(left) appears in a different form on

the right (the last flower uses the

Glow filter) These examples are

Using Shape Hints

A shape hint gives you a way to tell Flash exactly how to map one point in

the beginning shape to another point at the end of the shape tween You

want to use shape hints when Flash doesn’t create a shape tween that

matches what you had in mind

Points inside a shape are mapped during any tween Map refers to how one

point in the starting shape corresponds to a specific point in the ending

shape When Flash motion tweens a box from small to large, one corner of

the small box is mapped to the same corner in the large box Every point is

mapped Mapping points in a shape tween is more complex, so Shape

Hints that enables you to control how Flash maps individual points In the

following task, you learn how to use shape hints

Use Shape Hints for a Better Shape Tween

TRY IT YOURSELF ▼

In this task, you use the Shape Hints feature to create a more controlled

shape tween Follow these steps:

1 In a new file, select the Rectangle tool, and ensure Object Drawing in

the options por tion of the Tools is turned off Draw a per fect square

by using the Rectangle tool by holding Shift while you drag

2 In Frame 25 of the Timeline, inser t a keyframe by clicking in the

Time-line at Frame 25, and then select Insert, TimeTime-line, Keyframe (or press

F6)

3 Change the shape in Frame 25 to a triangle You should make the

base of the triangle out of the base of the square See Figure 9.5 for a

split shot of the stage at keyframe 1 and keyframe 25

4 Select the first keyframe and use the Properties panel to set Tween

to Shape Scrub, and you see the results are probably not what you

expected It looks like the square is rotating as it tweens to the

trian-gle Now is your chance to use the Shape Hints feature

5 Under the View menu, ensure that Show Shape Hints has a check

mark (select it if not)

6 Place the red current-frame marker in Frame 1 and select Modify,

Shape, Add Shape Hint (or press Ctrl+Shift+H)

7 Notice a little red circle with the letter A (a shape hint) Temporarily

move the red current-frame marker to Frame 25, and notice there’s

also an A shape hint in this frame

FIGURE 9.5

The square is shape tweened into the triangle with approxi- mately the same base size and location.

TRY IT YOURSELF

▼

Use Shape Hints for a

Better Shape Tween

8 Make sure you’re back in Frame 1 and that Snap to Objects is stillturned on by selecting View, Snapping, Snap to Objects Use theSelection tool to drag the shape hint so it snaps to the top-left corner

of the square Notice in Figure 9.6 that it’s still red, indicating youhaven’t mapped this point to an end point yet

9 Go to Frame 25 and position Shape Hint A so it snaps to the middle

of the left side of the triangle Notice the shape hint turns green, cating it’s been mapped When you return to Frame 1, the shape hint

indi-is yellow to indicate it’s been mapped

10 Scrub to see the results so far If it looks good, you don’t need to addany more shape hints For this exercise, however, it is likely not to lookgood

11 In Frame 1, add another shape hint by pressing Ctrl+Shift+H, and thenew hint is automatically given the name B Position it in the top-rightcorner of the square

12 In Frame 25, map Shape Hint B to snap to the middle of the right side

of the triangle, similarly to how Shape Hint B is mapped (see Figure9.7)

13 At this point, the results should be much better than before youadded any hints Use Test Movie to see

FIGURE 9.6

Although you’ve added Shape

Hint A in the first keyframe and

attached it to the shape, it’s still

red because you haven’t mapped

this point in the ending

keyframe.

Use Shape Hints for a Better Shape Tween TRY IT YOURSELF ▼

Understanding Shape Hints

In the preceding task, we told you where to place the hints However,

figur-ing out logical positions for shape hints is usually pretty easy Think of it

this way: You’re telling Flash, “This point in the starting shape goes with

that point in the ending shape.”

Notice after you add one shape hint, you can see how the point under the

hint in the first keyframe moves to the corresponding point in the end

keyframe Carefully watch the points while you slowly scrub

A few more details about shape hints are worth understanding:

You can’t add shape hints unless you are currently in the first

keyframe of a span with shape tweening already set In other words,

you have to have a shape tween and be in the first frame to add a

shape hint

You can use the menu selection View, Show Shape Hints to make the

shape hints you have invisible, but they are there, even if you can’t

see them

Shape hints are recognized only after they’ve been mapped—that is,

snapped to a point on the shape in both the first keyframe and the

FIGURE 9.7

Shape Hint B is snapped to the middle of the right side of the triangle in the second keyframe.

TIPKeep It Simple

Don’t use more shape hintsthan necessar y Don’t add 10shape hints to the first frame,and then map them all Rather,add one shape hint and map it,and then evaluate the results;

one might be enough Feel free

to continue adding shape hintsall day long, but sometimes lesswork is necessar y There’s noreason to add more hints thanyou really need