Foundation Flash CS4 for Designers- P13 pdf

Add a blank keyframe to the Over frame of the button symbol, and drag the Circuit movieclip to the stage.. Add a new layer named audio to the button timeline, and insert a keyframe in th

Your turn: Make an animated button

So far, we’ve covered many animation techniques and demonstrated them with a lot of examples Now you can use some of these techniques to animate a button

Adding some animated glint

By now, you should get the idea that combined timelines are useful things Here’s a quick look at

a very popular effect for the over state of a button symbol Even a little bit of motion can add just the right touch to liven up an otherwise simple button

1. Open the =jei]pa`>qppkj*bh] file in the Atan_eoa folder for this chapter Test the movie to see how the buttons currently work It’s certainly not bad looking, but plain vanilla nonethe-less We’re going to add some animated glint to the Over frame

2. Double-click the glint asset in the library to enter its timeline There are three things to notice here:

A scripts layer tells the timeline to play only once (opkl$% in frame 5)

A mask layer constrains the animation to the shape of the button only

A shape- tweened layer, named glint, moves a rounded rectangle from above to below the mask

3. Double-click the button symbol in the library to enter its timeline Add a new layer above the

bg (background) layer Name the new layer glint Insert a keyframe in the glint layer at the Overframe

4. Drag the glint movieclip to the stage in the Over keyframe Use the Property inspector to tion the glint symbol at X 0 and Y: –30

5. Insert a blank keyframe (Insert ° Timeline ° Blank Keyframe) in the Down frame of the glintlayer This keeps the animation from occurring while the mouse clicks the button It will show only when the mouse hovers over the button and when the mouse releases from a clicked state, both of which lead to an over state

6. Test your movie to see the results

An even cooler animated button

The next technique you’ll try goes right back to the roots of Flash and the first efforts aimed at ting video to play in Flash You will be dealing with video in greater depth in Chapter 10, but here is

get-a rget-ather interesting technique thget-at doesn’t put objects in motion, but insteget-ad treget-ats motion get-as get-a sort

of flip book

Inside the ?en_qep folder within this chapter’s Atan_eoa folder, you’ll find a QuickTime movie named

?en_qepo and a folder named Ei]cao, which contains 50 sequentially numbered JPG images These images were created by opening the MOV file in QuickTime Pro (you can do this with any video editor that has QuickTime output capability) and exporting the movie as an image sequence (as shown in

Figure 7-60) This technique, called rotoscoping, breaks a video into a series of images (which in this

case, we then saved to the Ei]cao folder)

Figure 7-60 We start with a rotoscoped video.

1. Create a new Flash document and change the stage dimensions to 94 pixels wide by 44 pixels high Name the Flash file ?en_qep*bh] and save it to the ?en_qep folder in your Atan_eoa folder

2. Create a movieclip named Circuit, and when you enter the empty symbol’s timeline, select File

° Import ° Import to Stage

3. When the Import dialog box opens, navigate to the Images folder Select the first image in the sequence (Image01) and click Open

4. Flash will grab the image, notice that there is a number after it, and think, “Hmmm, this seems

to be part of a sequence.” This is why Flash asks you if you want to import the entire sequence,

as shown in Figure 7-61 Click Yes You will see a progress bar appear; when it is finished, each image will appear in the timeline The neat thing about this is that all the images are in exactly the same position in each frame, and they are also placed in the library

Figure 7-61 Flash, seeing a sequence of images, asks if it can import the entire sequence.

5. Import the V]l*il/ file into the library

6. Create a new button symbol named btnCircuit Drag the Image01 file from the library to the stage and, using the Property inspector, set its X and Y values 0

7. Add a blank keyframe to the Over frame of the button symbol, and drag the Circuit movieclip

to the stage Set its x and y position to (0,0) using the Property inspector

8. Insert a frame (Insert ° Timeline ° Frame) in the symbol’s Hit frame

This provides content for both the Down and Hit frames (the same content as in the Over frame) Hitframes are used by Flash to determine the hotspot for a button, so its content is invisible, but deter-mines the clickable area of the button

9. Add a new layer named audio to the button timeline, and insert a keyframe in the Over frame

of the audio layer

10. Drag the V]l*il/ file from the library to the stage Click the sound in the Over frame and set its Sync property to Start (see Figure 7-62)

Figure 7-62 Couple audio with rotoscoping to add a bit of zing to an animated button.

This prevents the audio from looping if the user repeatedly mashes the button When the button is rolled over, sound in the Over frame will play, and the sequence of images in the movieclip will also start to play

11. Click the Scene 1 link to return to the main timeline, and add the button to the stage

12. Test the file and click the button

Copying motion as ActionScript

You may have noticed a distinct lack of ActionScript in this chapter The reason is that the subject

of programmatic motion simply can’t be covered with any degree of thoroughness in one chapter If

you are really interested in the subject, buy yourself a copy of Foundation ActionScript 3.0 Animation:

Making Things Move! by Keith Peters (friends of ED, 2007) It will keep you giddily busy for weeks One

of the authors, in fact, can’t help but giggle—like his four-year- old daughter—every time he opens Keith’s book Still, we would like to mention a really neat option, introduced in Flash CS3, that fits this chapter like a glove The option is called Copy Motion as ActionScript 3.0 Here’s how it works:

1. Open the ?na]paIkpekj=O/*bh] file in the Chapter 7 Atan_eoa folder You will see that we have added an animated ball and a parrot to the stage, as well as an actions layer (see Figure 7-63)

Figure 7-63 We start with a ball and one slightly worried parrot on the stage.

2. Scrub the playhead across the timeline You will see the ball fall to the bottom of the stage, squash, stretch, and bounce back up to the top of the stage Let’s apply that animation to the slightly worried parrot

3. Select the parrot on the stage and, in the Property inspector, give it the instance name of Parrot

4. Select the first frame of the ball layer, press the Shift key, and then select frame 28 This selects all but the last frame of that layer Why all but the last? Because only the first 28 frames will contain a classic tween

5. With the frames selected, either select Edit ° Timeline ° Copy Motion as ActionScript 3.0, as shown in Figure 7-64, or right- click (Ctrl- click) and select Copy Motion as ActionScript 3.0 from the context menu

Figure 7-64 You can access the command through the Edit menu item or

the context menu

6. When you select that menu item, a dialog box will open asking you for the name of the symbol

to which the motion will be applied (see Figure 7-65) Enter Parrot and click OK

Figure 7-65 You must identify

the instance to which the Script will be applied

Action-What you have done is ask Flash to translate the motion of the ball into ActionScript and apply that same motion to the parrot This all happens in the background, and when the motion is translated into ActionScript, the code is placed on the clipboard

Be careful not to paste anything to the clipboard at this point! You’ll erase the ActionScript that was copied there in step 6.

7. Select the first frame of the actions layer and open the Actions panel Click in the Script pane and select Edit ° Paste The code—a lot of it!—will be pasted into the Script pane

8. Save and test the movie The parrot takes on the animation and distortion of the ball in the SWF (see Figure 7-66) This happens because of the instance name you entered into the dialog box (L]nnkp), which matches the instance name you gave the parrot in step 3

Figure 7-66 Being squashed sort of explains why the parrot looks worried.

Did you notice that we named the scripts layer actions this time around? Remember

that the actual name of the layer doesn’t matter, as long as it helps you remember the

purpose of that layer Call it scripts, actions, code whatever suits your fancy.

Now that you know how this works, there are obviously some rules:

The motion must be a classic or motion tween using a symbol (any symbol will do; the ball happens to be a button)

The code can be applied only to a movieclip, because you’ll need to supply an instance name, and graphic symbols don’t allow for that

The great thing about this feature is that the tween can contain the following properties and features (many of which we’ve talked about in this chapter):

The bottom line is that you can create, transfer, and reuse some pretty amazing scripted animation effects without writing a single line of ActionScript.

Noggin nuggets of gold from a visionary rascal

Back in high school, one of the authors fancied himself a poet As often happens in those formative years, the subject was introduced in terms of rhyme schemes To be sure, there’s nothing essen- tially wrong with that The usual Romantic role models—Byron, Wordsworth, Keats, Longfellow, Emerson, and so on—wallowed in rhyme It’s a long- standing custom in many artistic disciplines to

“study the masters” first, and for good reason The masters figured out where all the pebbles were, which toughened their feet Walk in their shoes, and you benefit in the same way.

Of course, once traditions are in place, the path is cleared for visionaries: inventive weirdos who see things differently, who dash off into the brush and break the rules People who find new pebbles Think e e cummings What we’ve shown you in this chapter are a number of well- worn trails Shape tweening and shape hints, classic tweening and easing these are familiar corridors for many

a Flash master We encourage you to tramp along these paths until your shoes are good and fortable, and then be at the ready to kick off your shoes and sprint with the visionaries.

com-If you can keep up with him, you’ll want to chase the flapping longfellows of John Kricfalusi (dppl6++fkdjgopqbb*^hkcolkp*_ki+), creator of the The Ren & Stimpy Show and pioneer of Flash- animated cartoon series A full decade ago, John broke new ground with the “The Goddamn George Liquor Program,” which had cartoon fans laughing until well, until milk gushed from their noses For Flash cartooning, that was an Internet first What’s John’s rhyme scheme? Enjoy Flash for the useful tool it is, but pile up most of your eggs in that basket called your brain Here’s what he had to say:

David asked me to write up some tips about how to creatively use Flash I guess my best advice is to lean on it as little as possible, to not use it as a creative crutch Flash isn’t inherently a creative tool It’s not like a pencil or a brush or talent.

I use it mainly as an exposure sheet to quickly test my drawings and animation to see if they work Your best Flash tool is your drawing skill You will always creatively be limited

by your ability to make interesting drawings and movement I see many animators using Flash mainly for its in- betweens, or “tweens” as they are now called This little tool makes every movement look smooth But if you want to compete against the best animators, whether in Flash or in traditional animation, you will be competing with drawings, acting, and real motion [see the following illustration] Real motion has nonmathematical in- betweening Every in- between looks different and conveys information that mere tweening can’t Tweening just moves the same drawing from one place to another, and it’s completely obvious when you watch most Flash cartoons that you are watching tricks, not animation.

No amount of tweening can accomplish such joyous hand clapping: those are frame-by- frame

drawings.

Since I started using Flash back in caveman times, I’ve been trying to find ways to make

it not look like Flash, to try to undermine all its computery tricks I’ve tried different

approaches It’s hard for me to draw my key poses directly on the computer, so I usually

draw them in pencil and scan them in Once they are in, I time them in the timeline to

musical beats When I’m satisfied with the rough timing, I then draw breakdown poses

directly on a Cintiq [ dppl6++sss*s]_ki*_ki+_ejpem+] in the timeline I constantly roll

across the animation to see if the motion is smooth If I’m animating to a dialogue

track, I draw the mouth positions in Flash and, again, roll back and forth to see if the

animation is working.

I am always trying new ways to beat Flash’s limitations and don’t have a perfect solution

The best thing about Flash, to me, is that you can instantly see if your animation works,

because you can play it back right after you do it But Flash isn’t doing the creative

part The drawings are My best advice for how to be good at Flash is to learn as much

about drawing and traditional animation as you can That’ll put you ahead of every

Flash animator who just drags around some simple primitive pictures More and more

real animators are starting to use Flash, so the competition is going to get tougher for

those who are lacking in drawing skills.

Your turn: Complete an animated scene

Now that you’ve been through a ton of theory, we expect you’re ready to try your hand at an actual animated scene This will give you something concrete to play with before exploring how your options expand with the new animation features, which are discussed in the next chapter Heck, you don’t even need to stretch first: you’re already prepped! This final exercise lets you add the finishing touches

to a humorous scenario in which one of the authors experiences, to put it lightly, a bad hair day

1. Open the >]`D]en@]u*bh] file in the Atan_eoa folder for this chapter Take a quick look in the file’s library, and you’ll see an =q`ekoap folder, which holds the audio files used in this FLA Another library folder, N]opanoap, holds the imported images

The images are PNGs because most of them rely on the smooth- edged alpha transparency provided

by that image format You’ll also see a number of symbols in the library’s root A few are movie clips, because they make use of filter affects The rest are graphic symbols, which means that they can take advantage of a technique shown in the “Combining timelines” section earlier in the chapter In fact, let’s take a look at one of them

2. Still in the library, double- click the head graphic to open

it in the Symbol Editor Scrub the timeline, and you’ll

see seven different expressions, each in its own

key-frame, as shown in Figure 7-67 By keeping all of these

expressions in a single graphic symbol, you have quicker

access to them from the main timeline (illustrated in just

a moment), and your library is less cluttered

3. Select Edit ° Edit Document to return to the main

time-line It takes quite a few timeline layers to pull off this

animation, but believe it or not, this particular example

isn’t especially complex Notice a layer for ActionScript

(scripts), two audio layers (audio a and audio b), and

numerous layers for various body parts and props The

layer you’re interested in is labeled hand left, and it’s

approximately halfway down the full height of the

time-line

4. Scrub the timeline slowly to the right When you get

near frame 50, you’ll notice that the character’s hand

swings toward his head This coincides with a a short bit

of sound in the audio a layer at frame 50 ( Figure 7-68)

That audio—a squeaky sound—is supposed to correspond to a visual of the character scratching his bald head Fortunately, that hand symbol is organized just like the head symbol: its timeline contains several photos of various hand positions, so this first task is easy to accomplish

5. Insert a keyframe (Insert ° Timeline ° Keyframe) at frame 50 of the hand left layer Now insert another keyframe in the same layer at frames 52, 54, 56, 58, 60, and 62

6. Select the hand symbol at frame 50, and then turn your attention to the Looping area of the Property inspector Change the First value to 2, as shown in Figure 7-69 Doing so causes the handsymbol to display the second frame of its own timeline, which changes the symbol’s appear-ance on the main timeline (the fingers stretch a bit more toward the bald head) Make sure the Options drop- down is set to Single Frame, which holds the symbol steady on its own frame 2

Figure 7-67 To keep the library less

cluttered, numerous expressions are stored in the same graphic symbol

Figure 7-68 That sound effect needs some action.

Figure 7-69 Updating a graphic symbol’s First property changes its appearance on the main timeline.

7. Perform the same procedure at frame 52, but set the First value to 3 (for frame 3) Do the same for the remaining keyframes you created in step 5 Set the hand symbol’s First property to the following values for each keyframe:

As it turns out, the bald guy scratches his head a second time, so you’ll have to repeat what you’ve learned in another span of frames

9. Scrub the playhead to frame 100 Note the introduction of another sound in the audio a layer Add keyframes to the hand left layer at frames 100, 102, 104, 106, 108, 110, 112, 114, 116, 118, and 120

10. Using the Property inspector, set the hand symbol’s First property to the following alternating values for each of these new keyframes:

11. Drag the playhead until you get to the neighborhood of frame 300 Scrub between frames 300 and 350 to preview the bottle- shaking hand motions There are three shakes, and the first one hits its peak at frame 296

12. Scroll the timeline down a bit and locate the hair tonic layer (two layers below the hand leftlayer) Insert a keyframe in the hair tonic layer at frame 296

13. Click your new keyframe to select it With the Brush tool, and a fill color of 80% alpha #99CCFF(light blue), paint a hearty splatter of hair tonic on the bald head, something like the glop shown in Figure 7-70 (that black dot is the Brush tool)

Figure 7-70 You can combine shape tweens and classic tweens on

different layers of the same timeline

To give the hair tonic freedom of movement, we’ll leave it as a shape, rather than convert it to a bol Remember, shape tweens allow the shape’s anchor points to be rearranged That will help you animate a dripping mess

14. Insert a keyframe in the hair tonic layer at frame 304 Select the hair tonic shape at that frame and use the Selection or Subselection tools to reshape the splatter If you like, you can use the Brush tool to make it bigger, or even delete the shape outright and draw it again For example, you might add a few drips or make it spread away from the bottle, as in Figure 7-71

Figure 7-71 A shape tween will make this splatter appear to grow.

15. Still in frame 304, change the shape’s fill color alpha from 80% to 0% You can do this with the Fill color chip in the Property inspector, the Tools panel, or the Color panel When you’ve changed the alpha, right- click (Ctrl- click) the hair tonic layer between frames 296 and 204, and then select Create Shape Tween from the context menu.

16. Select frame 305 in the hair tonic layer and insert a blank keyframe That takes care of the first bottle shake At this point, repeat steps 13 through 15 in the hair tonic layer for the span of frames 318 to 325

17. Insert a blank keyframe at frame 326 Then repeat steps 13 through 15 again for the span of frames 341 to 350, inserting a final blank keyframe at frame 351

When you’re finished, continue scrubbing the playhead toward the right After three shakes of the hair tonic bottle, the character gets happy for a few seconds, but finally ends up grumpy Why? The answer to that question lies in the (very large) hair symbol shown selected on the stage in the particleslayer in Figure 7-72

Figure 7-72 The selected movieclip symbol contains a video that shows the punchline.

That hair symbol is a movieclip that contains something called a video object, which is covered in

Chapter 10 For now, just be aware that the video object is capable of playing FLV (Flash video) files, thanks to the ActionScript in frame 431 of the scripts layer The video object is wrapped inside a mov-ieclip so that it can be given the same soft- mask treatment demonstrated in Chapter 3

What’s inside that video file? We gave you a hint earlier, hidden in the name of the hair

tonic The video file that enhances this animation is a particle system exported from After

Effects as Ol]ngo=hld]*bhr The particles are generated by a set of plug- ins bundled

with After Effects, called CycoreFX, by Cycore Systems (dppl6++sss*_u_knaouopaio*

_ki+) This FLV is included in the Atan_eoa and ?kilhapa folders for this chapter.

18. Save your FLA, and then select Control ° Test Movie to test the SWF

What you have learned

In this chapter, you have learned the following:

The difference between a shape tween and a classic tween

Various methods of using easing to add reality to your animations

How to use the timeline and the Property inspector to manage animations

The creation and use of motion guides in animation

How to animate a mask

How to translate an animation into ActionScript

This has been a busy chapter, and we’ve covered one side of the Flash animation coin The path so far has led from tweening shapes to turning animations into ActionScript In many respects, this is an important chapter, because whether or not you care to admit it, Flash is quite widely regarded as an animation program first—all that other cool stuff it does is secondary Many of the techniques and principles presented in this chapter are the fundamentals of animation in Flash If there is one mes-sage you should get from this chapter, it is pay attention to how things move

Thanks to the new motion tweening model in Flash CS4, that concept—how things move—has been flipped on its head, just like a coin, in a really cool way The new approach doesn’t negate any of the techniques you’ve seen here It’s just that your kitchen has gotten bigger, and there are a lot of new gadgets! Whenever you’re ready to continue cooking, just turn the page

What you saw in the last chapter was a compendium of traditional animation niques—traditional not in the Flash animation pioneer John Kricfalusi sense, but in the sense that they represent the basic tools Flash animators have used since time

tech-out of mind Some tools don’t change simply because they don’t have to; they’re that

useful The exciting part is that Flash CS4 introduces a new set of tools in addition

to the time- tested tools This double- whammy puts you in charge of the workflow that makes the most sense to you Use one set or the other, or combine them—the choice is yours The best part is that because this is animation, you pretty much have

to drink a broth of lukewarm poisonwood oils to not have fun while you’re working.Here’s what we’ll cover in this chapter:

Motion tweening, using both the Motion Editor panel and the Timeline panel Advanced easing with the Motion Editor panel’s graphs

Manipulating motion paths Using motion presets, and copying motion from one symbol to another Applying inverse kinematics (IK), including the Bone and Bind tools

IK tweening

ANIMATION, PART 2