Foundation Flash CS4 for Designers- P15 pot

409 ANIMATION, PART 2 4. Use the Selection tool to select the whole shape, then switch to the Bone tool and try to add an IK bone. Instead of a new armature, you’ll see an alert box telling you the shape is too complex. Want to know the culprit? 5. Switch to the Subselection tool and draw a selection around the whole shape. Each of those 50 stars is composed of 10 anchor points. That’s 500 points already, and that doesn’t include the stripes. We’re not sure where the official line is drawn, but 500+ anchor points is too much. Your turn: Animate a fully rigged IK model We figure you appreciate worms and skeleton hands as much as the next designer (and so do we!). But surely, your thoughts have already wandered toward more complex implementations. We suspect you’re wondering if the IK tools are useful for more than a few fingers. What about a whole body? The answer to these questions is yes, and you’re about to find out firsthand. In this final exercise of the chapter, you’ll expand on what you learned in previous sections by rigging up a character with arms and legs, and then animating it against a backdrop of hand- sketched poses. Let’s do it. 1. Open the Ne_d]n`*bh] file from the Atan_eoa folder for this chapter. You’ll see an assembled collection of symbols in the likeness of Richard (see Figure 8-58), one of the regular characters in Steve Napierski’s web comic “The Outer Circle” (dppl6++sss*pdakqpan_en_ha*_ki+). The authors would like to give Steve a hearty thanks for letting us use his artwork! See more at dppl6++sss*leanoge*_ki+. Figure 8-58. Meet Richard. Give him a hug. You’re going to make Richard jump. 410 CHAPTER 8 We chose Richard for this exercise for a particular reason: he’s super skinny, which means it’s not especially easy to rig up his armature. Going this route will give you practice, which is good, because real- life projects have a tendency to introduce unexpected challenges. Given this set of very narrow graphic symbols, we find that it helps if you take the reins from Flash in terms of bone placement. 2. Select Edit (Flash) ° Preferences and click the Drawing choice in the Category area. Deselect the IK Bone tool: Auto Set Transformation Point check box. As described in the “A note about bone preferences” section earlier, this means you’ll be the one deciding where to place your bone heads and tails, and you’ll adjust them afterward. 3. Select the Oval tool and, in the Richard layer, draw a small circle about 22 pixels  22 pixels near one of the character’s hands. Select the shape and convert it to a graphic symbol named handle. This is going to be your “ghost handle,” which lets you constrain the hands, feet, and head. 4. Drag additional instances of the handle symbol from the library to the stage, positioning them near the Richard’s other hand, his feet, and his head, as shown in Figure 8-59. In this exercise, Richard’s chest will act as the starting point for every new chain of bones, just as the skeleton’s palm did in earlier exercises. Figure 8-59. Make sure to include extra symbols to allow for rotation constraints. 5. Select the Bone tool, and then click and drag a bone from the torso symbol to one of the upper leg symbols. Be sure to release the bone’s tail low enough on the upper leg that it clears the bounding box of the torso (see the bounding box in Figure 8-60, and note how the bone tail falls below it). Even though this puts the bone tail lower than it should on the leg symbol— effectively moving the “hip” into the thigh—you’ll be able to readjust it in just a moment. 411 ANIMATION, PART 2 Figure 8-60. Make sure the bone’s tail clears the bounding box of the torso symbol. The fact that these symbols overlap is part of the reason we had you deselect Auto Set Transformation Point in step 2. While not always a problem, in this case, the obscured symbol rotation points make it harder for Flash to decide on its own where new chains of bones should begin. 6. Just as you did earlier for the knuckles, continue adding a new bone that connects the upper leg to the lower leg, the lower leg to the ankle, the ankle to the foot, and finally the foot to the foot’s ghost handle. Feel free to zoom the stage—particularly for the ankle!—if necessary. 7. Select the Free Transform tool, and then click the stage to deselect the armature itself. 8. Click each symbol in turn, from the ghost handle back up to the torso, and adjust the transformation point so that it sits over the symbol’s registration point, as shown in Figure 8-61. To do this, click the white circle (transforma- tion point) and drag it to the small plus sign (registration point), and then release. Selecting Snap to Objects in the Tools panel will make this task easier for you. 9. After you’ve adjusted the transformation point for each boned symbol, select the Bone tool again and click the head of the torso’s existing bone to begin a new chain of bones down the other leg. Follow this with a repeat of the Free Transform tool adjustments of the relevant symbols’ transformation points. 10. Obviously, the arms need the same treatment, as does the head. Starting from the same gathering of torso bones each time, use the Bone tool to create new bone chains from the torso to upper arm, lower arm, hand, to ghost handle on both sides, and then from torso to head to ghost handle at the top of the character. When you’re finished, revisit all relevant symbols with the Free Transform tool to reposition transformation points over their corresponding registration points. Your armature should look like the one shown in Figure 8-62. Figure 8-61. Situate symbol transformation points over symbol registration points. 412 CHAPTER 8 Figure 8-62. A complete IK rig At this point, Richard is nearly ready for his calisthenics. First, we need a few rotation constraints. 11. Using the Selection tool, click any of the torso bones and deselect the Enabled option in the Joint: Rotation area of the Property inspector. Because all the torso bones share the same head, this action will disable rotation for the whole body. 12. Zoom the stage, if necessary, and disable rotation for the ankle bones. 13. Add rotation constraints to the remaining bones according to your preferences. For example, select the lower leg’s bone and, in the Property inspector, select the Constrain option and adjust the Min and Max values to keep the knee from bending backward. When you’re finished, the Timeline’s original Richard layer will have long since been emptied, because every symbol was moved to the automatically created armature layer as it was associated with a bone. 14. Rename the Richard layer to poses. 15. Select File ° Import ° Import to Stage and import the fqilejc*flc file in this chapter’s Atan_eoa folder. This JPG features a number of hand- drawn poses you can use as guides to manipulate the armature. Position the imported JPG slightly to the right, so that it appears behind Richard, and then lock the poses layer. 16. Select Edit ° Select All to select the armature’s symbols. 17. Open the Transform panel (Window ° Transform). Make sure the Constrain option in the Transform panel is selected (the chain icon is not broken) and resize the fully selected arma- ture to approximately 75%, as shown in Figure 8-63. This matches the character’s size with the hand- drawn poses. 413 ANIMATION, PART 2 Figure 8-63. Resize the armature, and all its symbols, to the hand- drawn guides, and you’re set. When you release the mouse after scrubbing, the Transform panel will seem to indicate that the arma- ture is still scaled to 100%, but if you select each symbol individually, the Transform panel will correctly show the smaller scale you chose in step 18. Richard’s jump should take about one second. Because the movie’s frame rate is 24 fps, that means 24 frames is fine. 18. Hover near the right edge of the of the armature’s single frame until the icon turns into a double- headed arrow. Drag out the armature span until it reaches frame 24. 19. Right-click (Ctrl- click) the poses layer at frame 24 and select Insert Frame from the context menu. This matches up the JPG to the time span of the armature layer. 20. We’re about to cut you loose, so here’s the basic gist of what you’ll repeat until the sequence is finished: a. Unlock the poses layer and slide the JPG to the left in order to position the next pose under the armature. Once the JPG is moved, lock the poses layer again. b. Drag the playhead six frames to the right (one- fourth of the armature span, because there are four poses after the first drawing). c. Use the Selection tool to manipulate the character’s body parts so they match the hand- drawn pose. Here are two important tips: Depending on how you might have constrained your joints, you may not be able to match the drawing perfectly. Treat the drawings as rough guides. In Figure 8-64, for example, you can see that our elbows don’t match the pose at all—they’re bent in the opposite direction! Just have fun with it. You will often need to move the whole armature at once. To accomplish this, hold down the Ctrl (Cmd) key and click the current frame of the armature layer. Doing so simultaneously selects all of the armature’s symbols in the chosen frame. At this point, slowly tap the keyboard’s arrow keys to move the armature. If you hold down Shift while pressing the arrow keys, you can move in 10- pixel increments, which makes it go faster. 414 CHAPTER 8 21. After you’ve finished posing the armature at frames 6, 12, 18, and 24, right- click (Ctrl- click) the poses layer and convert it to a guide layer. This will keep it from showing when you publish the SWF. (Alternatively, you could hide the poses layer and configure your preferences to omit hidden layers from the SWF—see the “Using layers” section of Chapter 1—or simply delete the poses layer.) 22. Double-click the handle symbol in the library to open it in the Symbol Editor. Change the opacity of its fill color to 0%, to make the ghost handles invisible when you publish. 23. Save your file and test the movie. If you like, compare your work with the completed Ne_d]n`* bh] file in this chapter’s ?kilhapa folder. Inspiration is everywhere We started this chapter with a mention of some inspirational early Flash animation, so it’s fitting to finish with a few more current resources. Chris Georgenes (dppl6++iq`^q^^ha*_ki) is one of the most talented Flash animators we know, and a friendly guy, to boot! His dppl6++gaubn]ian*_ki forum has become an immensely popular meeting place for Flash cartoonists and animators, from beginner to pro. So visit his forum, sign up (it’s free), and bring along your artwork, demo reels, and questions. You’ll find literally thousands of eager participants ready to share their Flash- based tips and tricks. For a look at some jaw- droppingly amazing, multiple award- winning Flash cartoons, check out the “Animation” section of Adam Phillips’s dppl6++^epau_]opha*_ki website. Adam was happy to lend us a screenshot from “Waterlollies” (see Figure 8-64). He draws and animates all his artwork directly in Flash. When you see what’s possible with the authoring tool, you might just think (as one of the authors does), “When I grow up, I want to be Adam Phillips.” Figure 8-64. A scene from Adam Phillips’s “Waterlollies” (http://www.biteycastle.com) 415 ANIMATION, PART 2 For an additional 360 pages of top- notch Flash animation how- to, check out Foundation Flash Cartoon Animation (friends of ED, 2007), by Tim Jones, Barry Kelly, Allan Rosson, and David Wolfe (dppl6++sss*bneaj`okba`*_ki+^kkg*dpih;eo^j9534-15,155 5). This book was written for Flash CS3, so it covers only the technical content discussed in Chapter 7, but it goes on to elaborate on industry practices, including library organization, storyboarding and animatics, frame-by- frame animation, and integration with After Effects. What you have learned In this chapter, you learned the following: How to use the Motion Editor panel That even though the new tweening model is intended for the Motion Editor panel, the Timeline panel continues to be useful for motion tweens How to use and configure advanced easing graphs, and how to create your own How to navigate property keyframes in the Motion Editor and Timeline panels How to change the duration of a tween span How to manipulate and reuse motion paths, with or without the Motion Presets panel How IK works in Flash How to use the Bone and Bind tools Tips on improving your IK bone rigging workflow How to animate an IK armature This has been a rather intense chapter, but you have to admit there is some seriously cool new anima- tion stuff in Flash CS4. We started by walking you through the Motion Editor, including motion paths, Up to this point in the book, the Motion Editor was something you “visited.” Now you have learned how valuable a tool it will be as you strengthen your Flash skills. From there, we took you deep into the new inverse kinematics features of Flash CS4. Starting with the Bone tool and a skeleton, we guided you through this subject. By animating Vulcan greetings, steam engines, and an honest-to- goodness real cartoon character, you discovered the power of inverse kine- matics and quite a few of the gotchas and work- arounds being developed as the Flash industry adjusts to this new animation capability. As you went through this chapter, you were probably thinking, “This is all well and good in a flat space, but where’s the 3D?” Great question. Why don’t you turn the page and find out. 417 Designers have been asking for 3D manipulation tools in Flash for a long time. In fact, this feature has been requested in some form or another since the beginning of the product line. That makes sense if you consider that the mid- 1990s promise of Virtual Reality Modeling Language (VRML) gave web surfers a taste of 3D before Flash ever hit the market. VRML was a great idea, but it was ahead of its time and, sadly, didn’t go very far. In any case, it was more of a programmer’s pursuit than something a designer would want to grapple with. Then came Flash, which sparked an explosion of stylish 2D designs that began to reshape what the web experience meant. Over the years, intrepid designers began experimenting with ways to simulate three dimensions in their SWFs. They used centuries- old techniques to accomplish these goals—for example, increasing the size of an object to “move it forward”—which were the same practices used in real- life painting and sketching. Nothing in the Flash interface provided direct assistance. This has changed in Flash CS4. The requested tools have arrived. If you’ll pardon the pun, they open a whole new dimension in creative potential. Here’s what we’ll cover in this chapter: Understanding the new 3D environment Using the 3D tools Positioning symbols in 3D space FLASH GETS A THIRD DIMENSION Chapter 9 418 CHAPTER 9 The following files are used in this chapter (located in ?d]lpan,5+Atan_eoaBehao[?d,5+Atan_eoa+): Atde^epekj,-*bh] ^a]j*flc (JPGs located in a subfolder named ^]^eao) ^n]j`k*flc `ajenk*flc hi]k*flc jks]u*flc Cn]j`Ajpn]j_a*bh] =enda]`I]eh*bh] /@?q^a>]^u*bh] The source files are available online from either of the following sites: dppl6++sss*Bkqj`]pekjBh]od?O0*_ki dppl6++sss*bneaj`okbA@*_ki+`ksjhk]`*dpih;eo^j9-15,15-,5/- What you’ll learn in this chapter pertains to the 3D- related tools in the Flash CS4 Tools panel, along with some workflow suggestions to help you get the most out of them. This will be enough to intro- duce you to a new playground. If you want to supplement the benefits of the new 3D tools with older techniques, consider check- ing out Flash 3D Cheats Most Wanted by Aral Balkan, Josh Dura, et al. (friends of ED, 2003). To learn about simulating 3D with ActionScript 3.0, see Chapters 15 through 17 of Foundation ActionScript 3.0 Animation: Making Things Move! by Keith Peters (friends of ED, 2007). What 3D really means in Flash (and what it doesn’t) When it comes to 3D in Flash, consider the new feature as you would pizza. No matter what the server brings from the kitchen, you’re going to love it. Capice? Good. Now that you’re thinking of a delicious pie with all your favorite toppings, tease your mind back to Flash for a moment. Between bites, wrap your brain around three levels of wow factor: Good (“Hey, this is super cool”) Better (“My jaw just hit the floor”) Best (“Somebody bring me oxygen!”) Game consoles like the Wii, PlayStation 3, and Xbox 360 have redefined what consumers expect in terms of 3D interactivity. This is the bring-me- oxygen stuff—the Best level—which isn’t available in Flash. We need to mention that right out of the gate. (Hey, are you going to eat that pepperoni?) On the design side of things, you would need specialized 3D modeling software to produce that sort of content for game consoles, television, or film. We’re talking about software like Maya, 3ds Max, Blender, or Cinema 4D. These industrial- strength powerhouses are designed specifically for the task, and are capable of turning out extremely complex, high- resolution output. Examples include every- thing from Hollywood aliens, dragons, and virtual stunts, all the way to proof-of- concept vehicle mock- ups, such as the F- 15A aircraft shown in Figure 9-1. 419 FLASH GETS A THIRD DIMENSION Figure 9-1. Highly complex 3D models are created in software designed for the task, which doesn’t include Flash (aircraft modeled by Roy Baker). For better or worse, advanced 3D modeling is not the sort of field trip you’ll be taking in Flash CS4—at least, not with the new drawing tools. Don’t let that get you down, though. For you code jockeys, be aware that ActionScript does give you a surprising range of possibilities, but you’ll probably want to use third- party code libraries to pull it off. For the jaw- dropping stuff—the Better level—you’ll want to check out Papervision3D (dppl6++sss* L]lanreoekj/@*knc+). This is open source software (created by core team members Carlos Ulloa, John Grden, Ralph Hauwert, Tim Knip, and Andy Zupko) consisting of a framework of ActionScript 3.0 and 2.0 class files. Papervision3D allows programmers to create a range of 3D primitives (basic shapes, from which other shapes can be built), and even import COLLADA (an open XML standard) data files from external modeling applications, and then bring those models to life in complex ways, as shown in Figure 9-2. Yup, that’s Flash, and that spaceship is interactive. In many ways, this is comparable to VRML. Figure 9-2. An example of Papervision3D content (modeled by Carlos Ulloa) [...]... always have For longtime Flash users, this will feel familiar and comfortable If you’re new to Flash, this behavior may throw you for a loop, but you can work around it The challenge arises when you want to perform a 3D tween that moves one object in front of another, when its original position was behind (and therefore obscured) Let’s look at a hands-on example 1 Open the file from the folder for this... two-dimensional layouts That workflow is every bit as useful in Flash CS4 as it has been in the past, but it’s not the topic we’re covering here What you’ll learn about in this chapter is the super-cool stuff—the Good level—and a great place to start if you’re new to nonscripted 3D in Flash (which pretty much means anyone using Flash CS4 for the first time) We won’t be covering 3D in terms of ActionScript... same as rotating with the Free Transform tool Figure 9-12 Three axes of rotation: x moves like a head nod, y moves like a head shake, and z moves like a doorknob (photo by Dawn Stiller) 426 FLASH GETS A THIRD DIMENSION 6 Experiment with rotation, keeping an eye on the Transform panel (Window Transform) It’s easy to get disoriented when rotating numerous axes at once for example, by dragging the outer... inspector and Transform panel in conjunction with the 3D tools Some workflow tips on arranging objects in Flash 3D space One of the authors has been fond of anything related to 3D for years In fact, he keeps a pair of red-and-blue anaglyph glasses on top of his monitor—you know, for watching those cheesy 1950s science fiction movies in 3D Speaking of movies, sci-fi or otherwise, Flash is pretty hip... point, way off to the side Figure 9-17 Use the Transform panel for finer rotation control 9 Save your file, so that you can easily revert back to your current settings Let’s take a quick detour, which will illustrate why it’s so useful to match up Flash s vanishing point with the actual vanishing point of your reference artwork 10 Using the Transform panel, change the 3D Rotation’s Y value back to... Transform button in the Transform panel In spite of the utility of this tip, you can quickly find yourself in a pickle when positioning numerous objects—not just one—in the 3D space of the stage We hope the following suggestions make your journey a bit easier Share 3D rotation and translation settings Once you’ve expended the effort to position a single object, there’s no reason to let that effort... nudging with the Free Transform tool You simply couldn’t do this with a symbol Now you can, and that means you can perform perspective transforms on complex artwork, imported photos, and yes, even video Kind of makes the corners of the mouth go up, doesn’t it? To illustrate how groundbreaking this is, let’s start with how it used to be Old-school 3D rotation Prior to this release of Flash, 3D perspective... tools themselves Using the 3D tools As we’ve mentioned, Flash CS4 provides two brand-new 3D tools: the 3D Rotation tool and the 3D Transformation tool The 3D Rotation tool In terms of visual cool factor, the 3D Rotation tool is sure to please This tool allows you to quickly and intuitively rotate a movieclip in 3D space In previous versions of Flash, this was possible only with shapes, and even that... your file If you like, compare it with in the folder Figure 9-13 Use the Transform panel to reset 3D rotations Now that you understand rotation, it’s time to learn how to position your object in Flash s 3D space This sort of movement is called translation, and it features a tool all its own The 3D Translation tool Because Flash is primarily a two-dimensional interface, the 3D Translation tool may not... Yoana S Bacheva from Satanasov exhibition) When you find yourself in a tight spot like this, it helps to zoom the stage to a very small number, like 12%, and take the Flash application window out of a maximized view Start your line on the right side, and then click and hold While holding, literally drag the line out past the Flash application window, seemingly onto your desktop In Figure 9-6, you can . to boot! His dppl6++gaubn]ian*_ki forum has become an immensely popular meeting place for Flash cartoonists and animators, from beginner to pro. So visit his forum, sign up (it’s free), and bring. (http://www.biteycastle.com) 415 ANIMATION, PART 2 For an additional 360 pages of top- notch Flash animation how- to, check out Foundation Flash Cartoon Animation (friends of ED, 2007), by Tim. and find out. 417 Designers have been asking for 3D manipulation tools in Flash for a long time. In fact, this feature has been requested in some form or another since the beginning of the product