Foundation Flash CS4 for Designers- P13 pdf

348 CHAPTER 7 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 Over frame. 4. Drag the glint movieclip to the stage in the Over keyframe. Use the Property inspector to posi- 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 glint layer. 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 get- ting video to play in Flash. You will be dealing with video in greater depth in Chapter 10, but here is a rather interesting technique that doesn’t put objects in motion, but instead treats motion as 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). 349 ANIMATION 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. 350 CHAPTER 7 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). Hit frames 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. 351 ANIMATION 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. 352 CHAPTER 7 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 Action- Script will be applied. 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. 353 ANIMATION 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): Position Orient to path Scale Cache as bitmap Skew Frame labels Rotation Motion guides Transformation point Custom easing Color Filters Blend modes 354 CHAPTER 7 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 com- fortable, and then be at the ready to kick off your shoes and sprint with the visionaries. 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. 355 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. 356 CHAPTER 7 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`ekoap folder, which holds the audio files used in this FLA. Another library folder, N]opanoap, 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 hand symbol 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. 357 ANIMATION 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. [...]...CHAPTER 7 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: 54: First = 2 56: First = 3 58: First = 2 60: First = 3 62: First = 2 8 Scrub the... compendium of traditional animation techniques—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 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... set—the Timeline panel and its trusty sidekicks, the Free Transform tool, the Transform panel, and a handful of others—are perfectly adequate to get the job done But just as it can be good in a relationship to agree on acceptable word pronunciations (toe-may-toe and toe-mah-toe come to mind), it will be good for your relationship with Flash to consider other ways to animate content You’re about to... flirting with the Motion Editor panel 364 ANIMATION, PART 2 Figure 8-1 A scene from Alex Secui’s “Nosepilot,” representing animation done in the time-honored Flash manner New to Flash CS4, the Motion Editor panel provides a second non-ActionScript paradigm for moving things from here to there It’s an alternate mechanism to the classic tweens and shape tweens that are carried out in the Timeline panel In Chapter... select Custom from the context menu This creates a Custom graph for you, so scroll down to take a look What you see is a line with run-of-the-mill Bezier curve handles The anchor points and handles operate very much like those for normal drawings with the Pen tool, and we encourage you to experiment At the time this chapter was written, Flash CS4 was not yet commercially available, and the authors were... 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 message 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... 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... in the new-style motion tweens—and there’s good reason for that, as you’ll see People will begin to ask, “Which approach is better?” We’ll be compelled to reply with the only legitimate answer there is: the best approach depends entirely on whatever works best for the project at hand Think of it like this: you’ve been using a conventional oven for years, when suddenly a newfangled microwave shows up... seconds later, instant hot chocolate Does it get any better? From this day forward, it takes you only 3 minutes to get fresh popcorn In many ways, life has gotten easier, but you can bet your bottom BBQ that the conventional oven isn’t leaving its venerable perch There’s no way the microwave bakes a loaf of homemade bread, for example As for the wasabi lime salmon we talk about in Chapter 12, well, somehow... Editor panel for that layer 5 Removing a motion tween is as easy as applying one Switch back to the Timeline panel and right-click (Ctrl-click) the tween layer Select Remove Tween, and the layer turns gray again You might have wondered why the motion tween extended the layer by 24 frames (we certainly wondered that, the first time we saw it) The answer depends on the movie’s frame rate Flash CS4 defaults . 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. 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, . representing animation done in the time- honored Flash manner New to Flash CS4, the Motion Editor panel provides a second non- ActionScript paradigm for moving things from here to there. It’s an