Tài liệu Foundation Flash CS5 For Designers- P11 pdf

ANIMATION, PART 2 479 Figure 8-50. Poses are added through the context menu. 7. Scrub back to frame 1. Switch to the Selection tool, and move the arms and the shovel to the position shown in Figure 8-51. If you scrub across the timeline the two arms and the shovel lower to the ground. This tells you that poses in an armature layer can be tweened only in the armature layer. Figure 8-51. Use the Selection tool to change a pose. 8. Move the playhead to frame 15. Switch to the Selection tool, and extend the shovel arms. What you need to know about this is that by changing the positions of the bones in an armature layer, a keyframe is automatically added. There is no need to insert a pose. This may sound rather familiar because this is exactly what happens when you change the properties of an object in a motion layer. 9. At this point you can continue moving through the timeline and having the machine scoop up and dump some dirt to you can close this example and not save the changes. www.zshareall.com Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. CHAPTER 8 480 Using the Bind tool We expect that IK has sparked the creative center of your brain enough to keep you happily busy for weeks. Believe it or not, you still have one more tool to see. The team at Adobe has made IK available not only to symbols but also to shapes! You’ll be using the Bone tool for this exercise, but the Bind tool will make an appearance as an important sidekick. The best way to describe IK for shapes is to consider it a super-advanced evolution of shape tweens in combination with the shape hinting discussed in Chapter 7. Let’s jump right in. When it comes to IK, the distortion to be controlled is in both the stroke and fill areas of a shape. Depending on the configuration of an IK shape, you may find that the stroke of the shape does not distort in a pleasing way or joints move around when moving the armature. This is where the Bind tool comes into play. By default, the control points of a shape are connected to the bone that is nearest to them. The Bind tool allows you to edit the connections between individual bones and the shape control points. The upshot is you control how the stroke distorts when each bone moves. Before we start, it might not be a bad idea to simply take a look at what effect “binding” has on a drawing. This way, you can see, in a rather dramatic fashion, what it does and learn what to look for. 1. Open the badBinding.fla file in your Exercise folder. When it opens, you will see two people preparing to arm wrestle. 2. Click the pink character’s arm to see the bones. 3. Switch to the Selection tool and move the arm. You will notice two things, as shown in Figure 8-52. First, the elbow moves off of the table and some rather disturbing distortions occur around the elbow joint. Figure 8-52. Moving a bone in a shape causes distortions and unlifelike movement. This book was purchased by flashfast1@gmail.com www.zshareall.com Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. ANIMATION, PART 2 481 4. Open the betterBinding.fla file in your Exercise folder, and give the arm a wiggle. As you can see, Figure 8-53, the elbow stays put, and the distortions are not as severe. Figure 8-53. Binding, when properly applied, can add realism to movement. Now that you have seen how binding can affect and armature, let’s get to work and start learning how to use the Bind tool. 1. Open the Bind.fla file in the Exercise folder for this chapter, and say hello to an earthworm, as shown in Figure 8-54. (The correlation between a worm, bones, steam shovels, and graveyards is purely coincidental, we assure you.) The Library for this FLA is empty, because the worm is nothing more than a handful of shapes. Figure 8-54. IK for shapes is brought to you by a worm. www.zshareall.com Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. CHAPTER 8 482 2. Assuming you want to drag the worm around by its head, you’ll want to draw the bones of your armature from the opposite side of the worm. Select the Bone tool and starting from the bottom of the shape, drag a small IK bone upward. 3. With that first bone in place, hover over the tail of the IK bone. When the tiny black bone icon inside the mouse cursor turns to white, you’ll know you’ve hit the right spot. Click and drag upward to add another bone. In this manner, keep adding small IK bones until you reach the top of the worm (see Figure 8-55). Figure 8-55. IK bones can easily be applied to shapes. 4. Before you give the worm a wiggle, switch to the Bind tool, and click the bottommost IK bone. 5. This is where it gets interesting. To see we’re talking about, switch to the Zoom tool, and using the Bind tool, marquee the bottom several bones in the tail. Now you’re ready for action. Using the Bind tool is a bit like using the Subselection tool in that it reveals a shape’s anchor points. In Figure 8-56, you can see anchor points represented in three different ways. At the top of the figure, they look like the sort you’ve seen in previous chapters—just small squares. At the bottom, they’re considerably larger and thicker and appear in the form of triangles as well as squares. www.zshareall.com Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. ANIMATION, PART 2 483 Figure 8-56. The Bind tool lets you manipulate anchor points. When you select an IK bone with the Bind tool, Flash shows you which of the shape’s anchor points are associated with that particular bone. Squares indicate an association with a single bone; triangles indicate an association with many bones. In this case, the bottom four anchor points—the heavy squares—are associated with the bottommost bone only. The upper two anchor points—the heavy triangles—are associated with the bottommost bone and with the bone immediately above it. The triangle anchor points are affected when either of their associated bones moves. Click any of the other IK bones in this armature, and you’ll see that Flash has done a great job of automatically deciding which associations to make. This won’t always be the case. Thankfully, you can override Flash’s decisions. 6. Hold down the Ctrl (Windows) or Cmd (Mac) key, and click one of the bottom four heavy squares. This makes it look like a normal anchor point (smaller and not bold). Still holding Ctrl (Windows) or Cmd (Mac), click one of the heavy triangles, which also becomes a normal anchor point. 7. Select the next IK bone, and you’ll see that the triangle anchor is back. but now it’s a heavy square. That makes sense: before step 6, this anchor was associated with two bones (triangle), but now it’s associated with only this one (square). 8. Select the bottommost bone again, and, without holding down Ctrl (Windows) or Cmd (Mac), click the anchor point that was previously a heavy square. Drag it toward the bone (see Figure 8-57) and release. That anchor point is now reassociated with the bone. 9. Click another bone, and then click this one again. You’ll see the heavy square as it originally was, along with its companions. www.zshareall.com Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. CHAPTER 8 484 10. To reassociate the formerly triangle anchor point, use the Bind tool to select the appropriate anchor, and then press and hold Ctrl (Windows) or Cmd (Mac) while you drag it to the bottommost bone. As you do, you’ll see an association line in the upper bone as well as the diagonal association line created by your dragging (see Figure 8-58). Figure 8-57. Click and drag an anchor point to associate it with a bone. Figure 8-58. Press Ctrl (Windows) or Cmd (Mac) while dragging to associate an anchor point with more than one bone. www.zshareall.com Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. ANIMATION, PART 2 485 11. Save the file. (You’re going to continue with it in the next exercise.) Use the Bind tool to fine-tune your shape armatures, just as you would use shape hints to fine-tune a shape tween. Any anchor points not associated with an IK bone are ignored when the armature is manipulated. You can animate shape armatures in the same way as symbol armatures—and you’re about to do just that—which will introduce you to two “gotchas” of this feature. When it comes to IK with shapes, two limitations leap to mind:  Shape armatures don’t manipulate gradient and bitmap fills.  Complex shapes cannot be boned, so keep your overall anchor point count to a minimum. Let’s explore these limitations before moving on to a full-scale IK animation exercise. Shape IK and fills To see what we mean about fills, continuing with the Bind.fla from the previous exercise, use the Selection tool to give your worm a wiggle. It’s fun to do, because the shape responds in a very worm- like way. When you’re finished, click the stage to deselect the bones and the shape’s bounding box. The shape looks great, but as you can see in Figure 8-59, the gradient fill, which gave the worm a slightly rounded look, hasn’t bent along with the shape. This tells you to stick with solid fills for shape armatures. Figure 8-59. Shape armatures don’t affect gradient or bitmap fills. Shape IK and anchor points Let’s see how the number of anchor points affects shape IK: 1. Open the WaveSwiss.fla file in this chapter’s Exercise folder. You’ll see a drawing of the Swiss flag with a shape armature in place. www.zshareall.com Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. CHAPTER 8 486 2. Drag the right side of the armature up and down to wave the flag (see Figure 8-60). Figure 8-60. There is a definite relationship between armatures and vector points when it comes to IK in Flash. 3. Open the WaveAmerican.fla file from the same folder. In this file, the armature hasn’t been added yet. 4. Use the Selection tool to select the whole shape, and then switch to the Bone tool and try to add an IK bone. Instead of a new armature, you’ll see the alert box in Figure 8-61 telling you the shape is too complex. Want to know the culprit? Figure 8-61. Shape complexity also comes into play when it comes to IK in Flash. 5. Switch to the Subselection tool, and draw a selection around the whole shape. www.zshareall.com Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. ANIMATION, PART 2 487 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 solutions are to either optimize the graphic, which we cover in Chapter 15, or convert the entire flag to a movie clip. Our suggestion is go the movie clip route because optimizing will reduce the number of vector points but not sufficiently to avoid a repeat of this warning. Your turn: animate a fully rigged IK model We figure you appreciate worms, bending trees, steam shovels, 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 Richard.fla file from the Exercise folder for this chapter. You’ll see an assembled collection of symbols in the likeness of Richard (see Figure 8-62), one of the regular characters in Steve Napierski’s web comic “The Outer Circle” (www.theoutercircle.com/). The authors would like to give Steve a hearty thanks for letting us use his artwork! See more at www.pierski.com/ . Figure 8-62. Meet Richard. Give him a hug. You’re going to make Richard jump. www.zshareall.com Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. CHAPTER 8 488 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-63. 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-63. 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-64, 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. www.zshareall.com Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. [...]... because they are part of the Internet archive, are available, for free, to anybody who chooses to use them for whatever purpose 512 www.zshareall.com Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark FLASH HAS A THIRD DIMENSION 1 Open the SpaceFinal.png image in your Exercise folder in Fireworks CS5 or Photoshop CS5 When the image opens, as shown in Figure 9-19, you will see... of some inspirational early Flash animation, so it’s fitting to finish with a few more current resources Chris Georgenes (http://mudbubble.com) is one of the most talented Flash animators we know and a friendly guy to boot! His http://keyframer.com 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),... “When I grow up, I want to be Adam Phillips.” 492 www.zshareall.com Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark ANIMATION, PART 2 Figure 8-67 A scene from Adam Phillips’s “Waterlollies” (www.biteycastle.com) 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... Flash Has a Third Dimension Designers had 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... Figure 9-1 Figure 9-1 Highly complex 3D models are created in software designed for the task, which doesn’t include Flash (car modeled by Laurens Corijn) For better or worse, advanced 3D modeling is not the sort of field trip you’ll be taking in Flash CS5 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... folder, which shows the two lines already in place 500 www.zshareall.com Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark FLASH HAS A THIRD DIMENSION Now, let’s have some fun with the 3D tools themselves Using the 3D tools As we’ve mentioned, Flash CS5 provides two 3D tools: the 3D Transformation tool Rotation tool and the 3D The 3D Rotation tool In terms of visual cool factor,... same as rotating with the Free Transform tool 504 www.zshareall.com Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark FLASH HAS A THIRD DIMENSION Figure 9-10 Three axes of rotation: x moves like a head nod, y moves like a head shake, and z moves like a doorknob 6 Experiment with rotation, keeping an eye on the Transform panel (Window ➤ Transform) It’s easy to get disoriented... the Free Transform tool to reposition transformation points over their corresponding registration points Your armature should look like the one shown in Figure 8-65 489 www.zshareall.com Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark This book was purchased by flashfast1@gmail.com CHAPTER 8 Figure 8-65 A complete IK rig At this point, Richard is nearly ready for his calisthenics... the poses layer 16 Select Edit ➤ Select All to select the armature’s symbols 490 www.zshareall.com Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark ANIMATION, PART 2 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 armature to approximately 75 percent,... twodimensional 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 CS5 for the first time) We won’t be covering 3D in terms of ActionScript . http://keyframer.com forum has become an immensely popular meeting place for Flash cartoonists and animators, from beginner to pro. So, visit his forum, sign up. “Waterlollies” (www.biteycastle.com)  For an additional 360 pages of top-notch Flash animation how-to, check out Foundation Flash Cartoon Animation (friends