Flash CS4 Professional in 24 Hours- P10 docx

Specifically, Graphic symbols only need to download one frame at a time, and therefore, exhibit a better streaming effect than Movie Clip symbols.. If Flash reaches a frame that contains

Effects on Download Order

All this trash talk about Graphic symbols shouldn’t scare you off Besides

being appropriate for scrubbing, they also have a nice effect on downloads

Specifically, Graphic symbols only need to download one frame at a time,

and therefore, exhibit a better streaming effect than Movie Clip symbols A

movie that uses Graphic symbols, or even no symbols, can begin to play

be-fore it’s entirely downloaded; in other words, it streams In the case of a

frame containing a Movie Clip, all nested frames need to download before

Flash proceeds to the next frame If Flash reaches a frame that contains a

ton of Movie Clip instances, which in turn include lots of nested frames,

your user might experience a pause Even though the later frames in nested

clips might not be needed right away, Flash needs to be prepared for a

script that immediately jumps to the last frame This isn’t a critical point

be-cause Flash files tend to be small, and there are other ways to optimize a

movie (many of which are discussed in Hour 22, “Minimizing File Size”)

So, keep in mind that Graphic symbols stream better

Summary

You already knew two big concepts: how nesting of symbols works andhow symbols can be used for both motion tweens and efficiency This hourput them together When doing motion tweens, you might have tried tomake a symbol a multiframe symbol Now, you know you can do that andthere are options that control whether the multiframe symbol you’re tween-ing is behaving like a Movie Clip or a Graphic

You can’t see Movie Clips animate on the stage by scrubbing To test them,you must run Test Movie When you really need the capability to scrub themain Timeline, such as for lip synching, avoid using Movie Clips Finally,the fact that only Movie Clips can be given an instance name proves to bethe most significant attribute of Movie Clips

Q&A

Q I did the Car with Rotating Wheel task, but when I first made the ing Wheel symbol, I forgot to specify the default symbol behavior asMovie Clip I went back to the Library to rectify this error, but it stilldoesn’t work; the wheels don’t rotate Why?

Rotat-A Changing the symbol proper ties of the item in the Librar y affects onlyany new instances you drag from the Librar y, which have the proper ties

of the master in the Librar y However, instances already in a movie havethe same behavior they star ted with Your instances of the RotatingWheel symbol are behaving like graphics Go to where they’re used in-side the Car symbol, and with the Proper ties panel open, select each in-stance Then, change the Symbol Behavior setting from Graphic toMovie Clip

Q I can’t find the Loop Once option on the Properties panel when I have aMovie Clip selected I swear I’ve seen it before Where is it?

A You could have seen Loop Once in the Proper ties panel, but not when aMovie Clip was selected Only instances behaving as graphics have thisoption, which is a good reason to use a Graphic symbol Of course,when you become accomplished with ActionScript, you learn ways toachieve the same effect when using a Movie Clip—although it still mighttake more work than simply using the option available to instances ofgraphics

263Workshop

Q You said use Movie Clips unless you need one of the features of a

Graphic symbol Are there any other benefits to Graphic symbols?

A There is one nice trick we didn’t mention this hour A Graphic symbol is

a great way to store multiple similar images on separate frames within

that symbol For example, say you have a bunch of thumbnails that you

impor t into separate keyframes of a Graphic symbol When you drag a

Graphic symbol on stage, you can use the Proper ties panel to single

frame and enter the frame number you want to use It’s a nice way to

or-ganize your content

Q In this book, I keep reading the phrase “instances behaving as

graph-ics.” Why don’t you just say Graphic symbols?

A There’s a difference The master symbol has one default symbol

behav-ior, which you can change by clicking the Librar y’s options menu and

se-lecting Proper ties However, each instance on the Stage can be

changed to something different from the master that spawned it An

stance always star ts the same as its master Not only can each

in-stance be changed to behave like any type, but changing the master has

no effect on instances already on the Stage

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 How many frames can you use inside a Graphic symbol? How many

in-side a Movie Clip symbol?

A You can use one frame for a Graphic symbol and as many as you

want for a Movie Clip symbol

B You can use as many as you want for either

C It doesn’t matter how many frames you use in the master symbol;

it only matters whether the instance behaves like a Graphic,

which can have one frame, or a Movie Clip, which can have as

many frames as you want

2 What happens if you name two symbols in the Library the same? Whatabout naming two Movie Clip instances the same?

A You can’t do either

B You can’t name two symbols the same unless you separate them

by using Library folders, but there’s no problem naming two stances the same

in-C You can name two symbols or two instances the same, but it’s abad idea because Flash might lose one

3 Although Movie Clips are recommended over graphics, when shouldyou use Graphic symbols?

A You should always avoid them

B Graphic symbols enable you to synchronize Graphics to the line and sometimes even make the file download faster

Time-C Graphic symbols are easier on the eyes because they’re antialiased

(the sharp edges are slightly smoothed)

Quiz Answers

1 B.You can use as many frames as you want in the creation of MovieClips or Graphics Depending on where you use Graphics, you mightneed to concern yourself with the number of frames the instances aregiven to live

2 B.Although there’s no problem naming multiple instances the same,

it might become a problem when you try addressing just one, such aswhen George Foreman addresses one of his many sons namedGeorge, Jr There’s certainly no rule against it

3 B.Some people agree with Answer A, that graphic instances should

be avoided, but for truly varied applications, using Movie Clips tosimulate Graphic symbols can be problematic Plus, who cares howbig the file becomes if you’re not delivering it to the web? If some-

thing saves you a ton of time in production, it could be worth the cost

of slightly larger file sizes, especially if the cost doesn’t turn out to beterribly significant

265Workshop

Exercises

The following exercises are tricky, but worth going through To make things

a bit easier, we’ve uploaded source files to the publisher’s website

1 Despite all the dismissive talk about Graphic symbols, this activity

practically requires them

Create an animation of a steam engine train First, make a Graphic

symbol of just the stack Then, go inside the stack symbol to animate

the smoke stack, possibly by using a shape that star ts out as a

rec-tangle Use shape tweens to Frame 5, where the stack is bulging,

Frame 6 where it’s extra tall and expels smoke, and Frames 7 through

10, where it’s normal again

Use the stack symbol in the creation of the train itself Be sure to give

the train exactly the same number of frames as the stack Bring the

train into the main Timeline, and motion tween it across the screen

By scrubbing, you can to judge where the clouds of smoke appear

In another layer, add symbol instances of clouds, which appear and

stay in the same location as they motion tween to 0% alpha Tr y this

by using Graphic symbols for ever ything

2 Create an animation of a Ferris wheel First, make the passenger car

a Movie Clip so you can animate it Make a Graphic symbol called One

Rotation, and inside it create circular motion guide to motion tween

the passenger car one full rotation in about 28 frames

Now place 10 instances of One Rotation inside a 36-frame Movie Clip

named Ferris Wheel For each instance of One Rotation, access the

Proper ties panel, and specify the first frame for each Star t one on

Frame 1, the next on Frame 4, the third on Frame 7, and so on In the

end, you have 10 cars rotating in the same manner but star ting at

dif-ferent locations

ptg

Special effects you canapply to text that’s con-verted to shapes Practical uses for filters Advanced masking spe-cial effects

During this hour, you get a chance to take the knowledge gathered over the

last few hours and apply it to practical exercises This hour is comparable to

Hour 6, “Applied Layout Techniques,” where you combined the graphics

cre-ation skills acquired in the first part Here, you create animcre-ations using

frame-by-frame animation, tweens, sounds, and layers This hour should be fun and

serve as an affirmation of how far you’ve come in the first half of the book

Few new details about Flash come up this hour Instead, the exercises

con-centrate on specific effects you need to communicate to the audience

Ar-guably, some of the tasks this hour border on cliché or gratuitous; that’s

okay It’s fine to study and even copy what others have done while you’re

learning It’s not likely you’ll use these exact effects on a real project, but

you’ll certainly apply the techniques

Effects with Shapes

We start with a few relatively simple features of shapes and Drawing

Ob-jects, and then work toward more advanced techniques Keep in mind you

can’t do the following tricks with text blocks, grouped objects, primitives,

or symbol instances You can, however, go inside a symbol and use these

techniques on any of the shapes that make up the symbol

Painting with Bitmaps

You’ve seen how to create and modify gradients You can also use a

gradi-ent as the fill or stroke color You can even use an imported bitmap or raster

graphic as a fill or stroke The way you create and modify a color with a

bitmap fill is comparable to using a gradient You use the Color panel to

se-lect the image, and you use the Gradient Transform tool to modify it It’s

easy and pretty cool, even if it’s not terribly practical

HOUR 15

Creating Special Effects

diago-3 Select the Gradient Transform tool, which might only be accessiblewhen you click and hold the Free Transform tool button in the Toolspanel Click the fill of your square You can modify the size and loca-tion of the bitmap fill If you impor t a large bitmap, you must zoom out

to see all the handles to modify the fill The bitmap repeats when it’ssmaller than the rectangle Interestingly, the Gradient Transform hasadditional handles to change just the width or height as well as the ro-tation and skew of the fill, options that don’t apply to Linear Gradi-ents Let the cursor change help you figure out the modification typefor each handle

4 The bitmap fill is pretty cool, but what about something more cal? Tr y an easy hall of mirrors Use the Gradient Transform to set thecontained image as big or bigger than the square—that is, make surethe image doesn’t repeat

practi-5 Use the Selection tool to select the rectangle and open the Transformpanel Type 80 into both the width and height fields, and then repeat-edly click the Duplicate Selection and Transform button near the bot-tom right of the Transform panel The result should look like Figure15.1

6 Often, it’s best to use the Gradient Transform tool to make some finaltweaks on the location of the fill of the smallest rectangle For example,

we centered the head of the puppy in the photo so that it is visible

FIGURE 15.1

Multiple copies of a shape filled

with a bitmap makes the

Breaking Apart Text

Text is much like a Drawing Object in that it doesn’t eat away other shapes in

the same location the way shapes drawn in merge mode does If you select a

text block and choose Modify, Break Apart, the first time it breaks the text into

a separate block for each character The second time, or if the text block is only

one character, Modify, Break Apart turns the text into shapes Why is this

use-ful? If you want to animate each character of the text independently, you need

to make symbols out of each character Plus, if you want to change the shape or

fill with a gradient, then the text must be a shape You can experience both

ef-fects in the next task and in “Convert Text to a Shape for Special Efef-fects.”

Animate a Block of Text, One Character

at a Time

TRY IT YOURSELF ▼

In this task, you will break apar t a word and make each letter animate

separately

1 In a new file, select the Text tool, pick a large font size, (like 60), click

the Stage, and type DROP

2 Choose the Selection tool, and click the entire block of text Position

the text where you want the animation to begin—for example, at the

top of the stage Choose Modify, Break Apart (or press Ctrl+B) Each

letter is a separate block of text now

3 With all the letters selected, choose Modify, Timeline, Distribute to

Layers Delete the layer with nothing in it by clicking Layer 1, and then

clicking the Trashcan icon in the Timeline

4 Before we animate these letters, they each need to be a Movie Clip

in-stance because we’re going to do Motion tweens Click once to select

the D, and select Modify, Convert to Symbol (or press F8) Name it D,

and make sure it’s a Movie Clip Do the same for the other letters,

naming them appropriately

5 Because the letter instances are per fectly in place the way we want

them to begin, let’s not mess them up In the D layer, click Frame 10,

and inser t a frame (press F5) In the R layer, inser t a frame in Frame

15 In the O layer, inser t a frame in Frame 20 In the P layer, inser t a

frame in Frame 25

6 Return to Frame 1 by clicking above the 1 in the Timeline Inser t a

mo-tion tween for each of the four layers Now, click on the D at Frame

10 Press and hold the Shift key, and then drag down so the letter is

at the bottom of the Stage Do the same for the other letters on their

last frames Finally, add a frame at Frame 50 for each of the layers

7 Test the movie You might need to choose View, Grid to help you line

up the letters Have fun modifying the timing and making other tweaks

TIPRepeating Symbols

If you repeat this task with aword containing duplicatecharacters (like the two Os inZOOM), you shouldn’t need tocreate two symbols based onthe letter O As a way to en-sure the second O lines upper fectly, do this: When youget to the second O, make an-other symbol—call it

Temporary O Then, select theinstance on Stage for yourTemporar y O symbol, and clickthe Swap button in the Proper-ties panel Swap it with thefirst O symbol Then, deletethe Temporary O in the librar y

Ever ything lines up, and youdidn’t need to drag or eyeballanything

The way you convert text to a shape is easy Select Modify, Break Apart

twice The first time you select Break Apart, it breaks a text block into

indi-vidual text blocks that are one character each Once the text is a shape, youcan do any sort of shape maneuver Use the Free Transform tool’s Distortand Envelop options; apply a stroke and remove the fill; change the stroke

or fill to a gradient or bitmap; or stretch and reshape using the Selection orSubselectiontools The next task enables you to play with all these options

2 Use the Selection and the Subselection tools to stretch and bend thecharacters Tr y not to distor t things so much that you can’t read theword In Figure 15.2, we add spike shapes to our word

FIGURE 15.2

You can go wild reshaping text

once it has been conver ted to

Convert Text to a Shape for Special Effects

TRY IT YOURSELF ▼

4 Use the Free Transform tool, and select all shadow characters Use

the Distort option, located at the bottom of the toolbar, and press and

hold the Shift key while you drag out the bottom-right corner to make

the shadow bigger, like the way it might appear when the sun is low

See Figure 15.3

5 Select all the shadow letters, and set the color to something a lighter

than the primar y letters An easy way to do this is to change the

Al-pha of the fill color to about 50% With all the shadow selected,

choose Modify, Convert to Symbol (or press F8), and select Movie

Clip

6 Select the shadow clip, and use the Filters section of the Proper ty

panel to apply a Blur effect

7 Now, change the fill color on the letters Double-click to enter the

pri-mar y letters’ group Open the Color panel, and for the fill color, select

the default white-to-black radial gradient or create your own gradient

Select the Paint Bucket tool, and make sure the Lock Fill is not

se-lected Click in the top-left corner of the leftmost letter Then, turn on

Lock Fill, and click once in each of the other letters Finally, use the

Gradient Transform tool to control the position and fall off of the

gra-dient You might have to scroll to the right or left of the stage to grab

the gradient handle It should spread across all the letters

8 To push this over the edge, we can animate First, do a Shape tween

with the main letters Go back up to the main Timeline, and select the

main letters Choose Edit, Cut (or press Ctrl+X), and then select

Modify, Timeline, Insert Layer (or click the Insert Layer button at the

base of the Timeline) Make sure the new layer is active, and select

Edit, Paste in Place (or press Ctlr+Shift+V) Select the letters again,

and choose Modify, Break Apart Finally, go to Frame 20, and inser t

a keyframe Use the Gradient Transform tool to move the highlight of

the gradient to the rightmost letter Select the keyframe in Frame 1,

and use the Proper ties panel to set a Shape tween

FIGURE 15.3

A dramatic shadow only takes a little bit of tweaking with the Free Transform tool.

un-In the “Masking Effects” section later this hour, you see an alternative toconverting text to shapes when you only need to modify the fill The color

or gradient gets revealed by a block of text where the text is the mask

Splatter Movie Clips with the Spray Brush Tool

One interesting effect we haven’t explored yet is using the Spray Brush tool

to “spray” movie clips You can create some unusual effects by creating asmall movie clip and spraying random instances of it on the stage, asdemonstrated in the following Try It Yourself

1 Open a new file, and begin by creating a small, animated movie clip

This can be like the Rotating Wheel you created in Hour 14, “NestingAnimations in Movie Clip and Graphic Symbols.” To save time, you cancopy Rotating Wheel from the Librar y of that Flash file, and paste itinto the Librar y of your current file

2 Make sure you’re on Scene 1, and select the Spray Brush tool Usethe Properties panel to change the Symbol Spray value to RotatingWheel (or your movie clip), as shown in Figure 15.4 Click on all three

of the lower checkboxes, Random Scaling, Rotate Symbol, and dom Rotation These do exactly what they sound like, which you see

Ran-in a moment

3 Click on the Stage with the Spray Brush This should create a cluster

of randomly scaled, randomly rotated copies of the Movie Clip

As you probably noticed in the previous task, the Properties panel has

op-tions you haven’t seen before Let’s take a quick look at them:

Spray—This setting has a button next to it that allows you to pick the

movie clip you want to splatter on the Stage If you don’t select a clip,

you can use the default shape, a small black square Notice that if you

click on the black box next to Default Shape, you can change the color

or use a gradient fill

Scale—Change the scale to make your movie clips or default shape

larger or smaller than the parent

Random Scaling—This checkbox ignores the Scale setting and

ran-domly resizes your splattered movie clips

Brush Width and Height—These control the splattering area Larger

numbers mean the clips will be more spread out

Brush Angle—This controls the direction of your splatter if one

di-mension, say Width, is wider than the other

Spend a few minutes playing with these settings and the Spray Brush until

you understand how they control your results

Splatter Animated Movie Clips

TRY IT YOURSELF ▼

4 Finally, you can see them animate by choosing Control, Test Movie A

cool feature of this tool is that it really is splattering copies of your

movie clip If you edit them, those changes are reflected on the Stage

For example, we add an orange fill color to the Wheel symbol after we

create the spray, and the change shows up on the Stage

FIGURE 15.4

The Spray Brush tool lets you

“spray” copies of movie clips, even animated ones You can edit the original symbol after the fact, and your changes show up in the spray.

Using Filters for Special Effects

In the task, “Convert Text to a Shape for Special Effects,” you used the Blurfilter to soften the shadow, but you didn’t use the Drop Shadow filter Infact, you can’t distort the shadow when using that filter Before you jumpinto the following examples using filters, remember that sometimes youhave to draw or animate by hand what you want to show

You’ve seen Filters pop up in other parts of this book, and they appearagain We’ve included two general effects that can be enhanced by filters:

depth and motion

Showing Depth with ShadowsYou don’t need a degree in optical physics to know some basics about shad-ows Figure 15.5 shows two simple principles: The closer an object is to alight source the bigger the shadow; and, the farther away from where theshadow is cast, the bigger and blurrier that shadow becomes For example,

in the preceding task, the wider you made the shadow, the closer the lightsource seemed to be Using these two simple relationships in your anima-tions adds depth and communicates a sense of scale to the user

The following task proves that adding a subtle shadow can go a long waytoward adding depth to your animations

FIGURE 15.5

Understanding how light is cast

helps you simulate depth.

Add a Shadow to Show Depth and Distance

TRY IT YOURSELF ▼

In this task, you will create a shadow for a bouncing ball that will change

as the ball animates

1 In a new file, draw a circle near the top of the stage, select it, and

conver t it to a Movie Clip by pressing F8

2 Click Frame 20, inser t a frame, and create a Motion tween To make

sure Frames 1 and 20 are the same, go to Frame 20, and choose

Insert, Timeline, Keyframe

3 Now, we make the circle bounce Go to Frame 10, and press and hold

the Shift key while you drag the instance of the circle down toward to

the bottom of the stage Test the movie to see the basic bouncing ball

4 Select the circle instance, and copy it Name the sole layer Circle,

lock the layer, and then inser t a new layer for the shadow Name that

layer Shadow You can click and drag to move the stacking order of

the layers, so the Circle layer is above the Shadow layer where we’re

about to animate the shadow

5 In the Shadow layer, select Edit, Paste in Place (or press

Ctrl+Shift+V), and the circle instance you just copied appears Move

the red current-frame marker to Frame 10 The shadow must move to

the floor, and that must be below the circle when it hits the bottom

Press and hold the Shift key, and drag the circle down, so it’s below

the circle Move the red current-frame marker back to Frame 1 to edit

the way the shadow appears at the star t

6 Back in Frame 1, select the shadow, and use the Free Transform tool

to squash it and widen it just a tad Use the Properties panel to set

the Color Effect to Tint, 100%, and pick the Black swatch Keep the

shadow selected, and use the Filters section of the Proper ties panel

to set a Blur Set both the X and Y direction to 50

7 Add a Motion tween to the Shadow layer Click the cell in Frame 20 of

the Shadow layer, and inser t a keyframe by pressing F6 Move to

Frame 10, and select the shadow Use the Filters section of the

Prop-er ties panel to set the Blur X and Y to a value near 40 You can use

the Free Transform tool to make the shadow a little smaller

8 Test the movie It’s okay, but it might look better if the shadow also

has an alpha effect To add both, select the shadow in Frame 20, and

use the Properties panel to change the Color Style to Advanced

Change the alpha percentage from 100 down to 30 or whatever looks

right to you Change the alpha to the same for the instance in Frame

1 You’re welcome to change the alpha similarly for the instance in

Frame 10, but it looks best with its alpha set higher Note: You have to

star t with Frame 20 and work back to Frame 1 when you change the

alpha If you tr y beginning with 1, Flash assumes you want to animate

the change in alpha, so the middle frame gets an interpolated alpha

value If you work backwards, the middle frame doesn’t change