Foundation Flash CS4 for Designers- P14 pdf

379 ANIMATION, PART 2 3. Click the tween layer to select it, and then right- click (Ctrl- click) and select Insert Keyframe ° Position from the context menu, as shown in Figure 8-18. A property keyframe (small diamond) will appear at frame 45. Figure 8-18. Property keyframes can be added with the Timeline panel. 4. Switch to the Motion Editor panel and notice that one keyframe apiece has appeared in the X and Y graphs, which makes sense. 5. Select the lunatic symbol and move it downward. As you saw earlier in the chapter, property keyframes are created for you automatically in the current frame when you change a symbol’s position, scale, rotation, or the like. What you learned from step 3 is that it’s still perfectly okay to create your keyframe first. 6. Switch back to the Timeline panel and right- click (Ctrl- click) again on frame 45. Note that you have options for clearing keyframes and also determining which property keyframes to display in the Timeline panel. Don’t be fooled by the Clear Keyframe choice! You would think, because Insert Keyframe inserts the desired keyframe(s) in the current frame, that Clear Keyframe would follow suit and remove only keyframes in the current frame. This is not so. By choosing Clear Keyframe, you’re removing all property keyframes in the current tween span. If you select Clear Keyframe ° Rotation, for example, you remove all property keyframes in the Motion Editor panel’s Rotation Z graph, regardless of in which frame they appear. Once you see these features and understand them for what they are, you’ll surely find them useful, but the Motion Editor panel does more. 380 CHAPTER 8 7. Open the Motion Editor panel and scrub the playhead of along the Motion Editor’s timeline. You get the same sort of preview as the Timeline panel. The difference is that the Motion Editor panel also gives you a pair of arrows and a diamond, as shown in Figure 8-19. Figure 8-19. In the Motion Editor panel, keyframes can navigated, added, and removed with this widget. Keep an eye on the diamond as you scrub. When you drag the playhead to a frame that already con- tains a keyframe, the diamond turns yellow. Use the left and right arrows to jump from keyframe to keyframe. Arrows will temporarily become disabled, as appropriate, at the first and last keyframes. 8. Scrub to frame 15 and click the Y graph’s diamond. It turns yellow, and a new anchor point appears in the Y and X graphs at frame 15. (The Y and X graphs are synchronized, but this isn’t the case with most property graphs.) Click the diamond again, and the keyframe disappears. Click it a third time to bring the keyframe back. 9. With the new keyframe in place, use the mouse to drag the anchor point in the Y graph upward, which correspondingly moves the lunatic downward on the stage. Note how the anchor point snaps to frames if you slide it left and right. That makes sense, because you can’t have a keyframe between two frames. 10. Move your mouse elsewhere in the Y graph, and then hold down the Ctrl (Cmd) key while you hover over one of the line segments. As shown in Figure 8-20, the cursor turns into a pen with a plus sign, which indi- cates you can click to add a new keyframe. Hover over an existing keyframe while holding the Ctrl (Cmd) key, and you’ll see a pen cursor with a minus sign. Click to remove the keyframe. 11. Hold down the Alt (Option) key and hover over frame 30 in the Rotation Z graph. The cursor turns into an upside down V, as shown in Figure 8-21. Click, and this converts the anchor point into a curve anchor, which can be adjusted with Bezier handles. The effect of these handles on the X and Y graphs isn’t always obvious, but for many properties, it gives you a “quick-and- dirty” custom ease. Figure 8-21. Anchor points can be con- verted from corner points to smooth with the Alt (Option) key. 12. Grab the right Bezier curve handle and drag it up and to the right so that the curve rises above its 100% mark, as shown in Figure 8-22. Figure 8-20. Keyframes can also be added and removed with the mouse. 381 ANIMATION, PART 2 Figure 8-22. Anchor points can be manipulated with Bezier curve handles. 13. Press Enter (Return) to preview the animation, and you’ll see that the symbol rotates farther than it did before—you’ve pushed it past its original destination, to approximately 160%—and then eases back the Rotation Z setting in the property keyframe at frame 60. As helpful as the Motion Editor panel is, sometimes less is more. When you want to compress or expand the duration of a tween span, for example, the Timeline panel is the only way to do it, if you want to do it proportionally. If not, you could use either panel, but the Timeline panel makes it easier. Changing duration proportionally The animation in the I]j]cejcGaubn]iao*bh] you were just using spans 60 frames. At 24 fps, that’s approximately 2.5 seconds, which may or may not be what you want. To change a tween span’s dura- tion proportionally, you’ll need to use the Timeline panel. Here’s how: 1. Open the ?d]jcejc@qn]pekj*bh] file in the Chapter 8 Atan_eoa folder. Look in the Timeline panel, and you’ll see a 60- second motion tween with five keyframes, four of which are prop- erty keyframes. 382 CHAPTER 8 2. Move your mouse to the right edge of the tween span. You’ll see the cursor turn into a double- headed arrow, as shown in Figure 8-23. Click and drag toward the right. For example, shorten the tween span so that it ends at frame 30. Notice that all four property key- frames are still in place, and, proportionately speaking, are the same relative distance from each other as before. 3. Click and drag the tween span so that it ends at frame 59. Now release and drag the tween span to frame 60. This time, the property frames are nearly back to their original places, but some are slightly off. That makes sense, because frame 59 is an odd number, and Flash had to make a decision on how to shift the frames to compensate. To get the property keyframes back to frames 15, 30, and 45 exactly, you’ll need to use a different approach. If you’re into tedium, you could switch to the Motion Editor panel and visit every property graph in turn, sliding numerous anchor points while holding the Shift key. The middle keyframe, espe- cially, would give you a headache, as it affects the X, Y, Rotation Z, Scale X, and Scale Y graphs. There’s an easier way, and we describe it in the very next paragraph. Changing duration nonproportionally Sometimes you’ll want to change the duration between property keyframes, which may or may not incorporate a change in span duration. You could do this with the Motion Editor panel, visiting each rel- evant graph and moving property keyframes individually, or you can update the keyframes in several graphs at the same time. For that, use the Timeline panel. Here’s how: 1. Continuing with ?d]jcejc@qn]pekj*bh], and still in the Timeline panel, hold down the Ctrl (Cmd) key and click the keyframe closest to frame 30. Notice that holding down Ctrl (Cmd) allows you to select a single frame in the tween span, rather than the whole span. 2. Now that you have a single property keyframe selected, release the Ctrl (Cmd) key, and then click and drag the selected keyframe left or right along the timeline. Doing this effectively selects all the anchor points for the current frame in the Motion Editor panel and lets you move them as one. Motion paths With the butterfly exercise in Chapter 7, you learned that a special kind of guide layer in the Timeline panel, called a motion guide, lets you send a symbol along a potentially intricate path, braided with loops and curves. This capability is equally possible with the Motion Editor panel, only it’s called a motion path, and it’s built directly into the tween layer. In fact, you’ve already seen this feature, even if you didn’t notice it earlier in the chapter. Manipulating motion paths The most interesting thing about this Motion Editor panel feature is that its effects are easier to accom- plish with the Timeline panel. Let’s take a closer look: 1. Open IkpekjCqe`aOeilha*bh] from the Atan_eoa folder for this chapter. You’ll see the Chapter 7 butterfly positioned near the lower- left corner of the stage. Figure 8-23. Drag the tween span to increase or decrease a tween’s duration. 383 ANIMATION, PART 2 2. Using the Timeline panel, apply a motion tween to frame 1. Then drag the playhead to frame 24 (or the last frame in the span). Drag the butterfly near the upper- right corner of the stage, and notice the series of dots that represent the motion path. 3. Using the Selection tool, hover near the motion path and, just as you would edit a normal line, click and drag to introduce a curve, as shown in Figure 8-24. Figure 8-24. Motion paths can be manipulated directly. 4. Using the Subselection tool, click either anchor point and drag the Bezier curve handles to increase the range of the curve. Do the same thing to the other anchor point. In Figure 8-25, we’ve produced a sideways S- shaped motion path. Figure 8-25. Use the Subselection tool to modify the motion path even further. 384 CHAPTER 8 Not only can you reshape the motion path as shown, you can also move it, rotate it, skew it, and effec- tively treat it as you would any normal shape. Let’s keep experimenting. 5. Select the tween layer and cast your gaze to the Property inspector. Scrub the X, Y, W (width), and H (height) hot text values, and you’ll see that you can move and resize the motion path. But wait, there’s more! 6. Open the Transform panel (Window ° Transform). This one’s a bit trickier, because if you don’t select the actual motion path, Flash will think you want to transform the symbol instead. 7. Use the Selection tool to click anywhere along the motion path to select it. Now scrub the Transform panel’s Rotate hot text to see the motion path pivot around its starting anchor point, as shown in Figure 8-26. Figure 8-26. Motion paths can even be rotated, skewed, and aligned. 8. To pivot around the other anchor point, right- click (Ctrl- click) the motion path and select Motion Path ° Reverse Path from the context menu. Scrub the Rotate hot text again, and change the location of the hinge. When you’re finished, reverse the path again to make the butterfly animate from the bottom left to toward the top right. 9. Experiment with the Width, Height, and Skew properties in the same panel. 10. To perform these same transformations in a more organic fashion—that is, with your mouse, rather than by the numbers—switch to the Subselection tool and press the Ctrl (Cmd) key. Doing so introduces a temporary bounding box around the motion path, as shown in Figure 8-27. 385 ANIMATION, PART 2 Figure 8-27. Hold down Ctrl (Cmd) to transform a motion path with your mouse. 11. Hover near the various transform handles to see the mouse cursor change to indicate what sort of transformation is possible. Click and drag to perform the transformation. The corner handles manage rotation, the edge handles manage scale when you hover directly over them, and the same edge handles manage skew when you hover just off center of them. Don’t forget the Alt (Option) key while you make these transformations with the mouse. Without it, transformations pivot around the bounding box’s center. With Alt (Option), transformations pivot along the opposite corner or edge. In either case, the Ctrl (Cmd) key is required to produce the bounding box. 12. Open the Align panel (Window ° Align) and, with the To stage button selected, align the motion path to the horizontal and vertical center of the stage. Notice, as with the classic tween version of this exercise, the nested animation of the butterfly performs as expected. Because the graphic symbol has animation on its own timeline, the butterfly’s wings flutter as it moves. (As a note of interest, that nested animation is composed of classic tweens. This is one of many indications that the two tweening models coexist happily.) Using advanced motion paths In Chapter 7, the butterfly went on a pretty wild ride—nothing like the tame Bezier curves you’ve seen so far in this chapter. You can do the same thing with the new tweening model, and you still don’t need a motion guide layer. Here’s how: 1. Open IkpekjCqe`a?kilhat*bh] in this chapter’s Atan_eoa folder. You’ll see the finished version of the butterfly IkpekjCqe`a*bh] exercise from Chapter 7, including a classic tween directed by a motion guide layer. Your job—and it’s an easy one—is to convert that complex motion guide into a motion path. 386 CHAPTER 8 2. Right-click (Ctrl- click) the flutter by (motion guide) layer and deselect Guide from the context menu. This converts that layer back to a normal layer. 3. Using the Selection tool, double- click the wavy line to select the whole thing, and then cut the curves to the clipboard ( Edit ° Cut). 4. Right-click (Ctrl- click) the classic tween and select Remove Tween from the context menu. 5. Right-click (Ctrl- click) again and select Create Motion Tween. 6. With the tween layer selected, paste the wavy line into the layer by selecting Edit ° Paste in Place . That’s all there is to it! If you like, delete the now- empty flutter by layer. 7. Click the tween layer again. Use the Property inspector to select or deselect Orient to path, which behaves as it did for the classic tween version. Motion tween properties As you’ve seen throughout this book, the Property inspector is the most versatile panel in your arsenal, simply because it changes to reflect whatever object is selected. When you’re dealing with motion tweens, there are two things the Property inspector lets you manipulate: the symbol and the tween itself (that is, the motion path). Some of these properties are the ones you see for classic tweens, but they don’t all apply for motion tweens. Let’s take a look. Open any of the files you’ve used to far and make sure a motion tween is applied to at least one symbol. Select the tween span, and you’ll notice the following properties in the Property inspector : Ease: This applies the Motion Editor panel’s Simple (Slow) ease to the full frame span selected. You can adjust this ease’s hot text to a value from -100 (ease in) through 0 (no ease) to 100 (ease out). Rotate [x] time(s) + [y]°: This is comparable to the Rotate drop- down for classic tweens and man- ages symbol rotation. The two hot text values let you specify the number of full rotations ( [x]) and degrees of partial rotation ( [y]). Direction: Once rotation numbers are configured with the previous property, you can choose clockwise ( CW), counterclockwise (CCW), or none to determine the direction of those settings or cancel them. Orient to path: This check box applies only to orientation along a motion path. X, Y, W (Width) and H (Height): These reposition or transform a tween span’s motion path. Sync graphic symbols: Human beings still have an appendix, but modern science can’t figure out what it’s good for, and the same goes for this property. Given its name, it’s presumably the motion tween equivalent to the classic tween Sync property discussed in Chapter 7. With motion tweens, symbol synchronization happens automatically, whether or not this property is selected. As you’ll see in the next section, this feature is moot in any case, because motion paths can be reassigned to any symbol you like. 387 ANIMATION, PART 2 The other motion- tween–related Property inspector settings depend on the symbol itself. For movieclips, your configuration options for motion tweens are the same as those for classic tweens. Some proper- ties—such as position, scale, and rotation, and even color effects, like alpha—are tweenable. Others, like Blend modes, are not. These are consistent across the board when you’re dealing with movieclips. It’s when you’re using graphic symbols that you need to be aware of a few limitations. The limitations involve the Loop, Play Once, Single Frame, and Frame options in the Property inspector’s Looping area. These properties apply to classic tween keyframes as discussed in Chapter 7. For motion tweens, they apply only to the tween span’s first keyframe. They’re ignored for property keyframes. The long and short of it is that you can set the Loop, Play Once, and Single Frame drop- down options and Frame input field once for a given motion tween—and Flash will obey your command—but only once for that tween span. Change these settings at any frame along the span, and the settings are changed for the whole span. Even though we’re focusing on symbols in these paragraphs, bear in mind that motion tweens can also be applied to text fields. One final note. Like classic tweens, motion tweens can accommodate only one symbol per tween span. In fact, motion tweens are a bit more strict about this constraint. Once you’ve applied a clas- sic tween between two keyframes, Flash won’t let you draw a shape or add a symbol to any of the frames between the keyframes. Interestingly enough, it will let you draw or add symbols to tweened keyframes, but doing so breaks the classic tween, whose “I’m a tween” indicator line then becomes a dashed line. With motion tweens, Flash won’t let you draw or add a symbol to any frame of the tween span, keyframe or not. The moral of this story is that you should give each of your tween spans its own layer. Motion presets Here’s another good example of letting the computer do the work for you. Flash CS4 takes advantage of one of the major new facets of motion tweens—that you can copy and paste motion paths—by providing you with a panel with over two dozen prebuilt motion presets. These are reusable motion paths, complete with motion changes, transformations, and color effects, which you can apply to any symbol or text field. Here’s how: 1. Open Hqj]pe_>ec?daaoa*bh] from the Atan_eoa folder for this chapter. You’ll see our old friend, the lunatic, along with a rather unsuccessful cheese- thieving mouse. 2. Select the lunatic symbol and open the Motion Presets panel (Window ° Motion Presets). 3. Open the Default Presets folder, if it is not already open, and click among the various choices to see a preview of the animation in the Motion Presets panel’s preview (see Figure 8-28). You’ll see wipes and zooms, blurs and bounces, and all manner of helter- skelter. When you find a preset you like—we chose bounce- smoosh, the first one—click the panel’s Apply button to copy that motion path to the lunatic symbol. 388 CHAPTER 8 Figure 8-28. The Motion Presets panel gives you more than two dozen stock motion paths. Applying the motion preset automatically inserts a motion tween on the lunatic’s layer, and then adds the relevant property keyframes to reproduce the animation in question. If you chose bounce- smoosh, as we did, you’ll need to move the whole motion path upward to keep the symbol from bouncing and smooshing off the bottom of the stage. 4. Using the Subselection tool, click the motion path, and then use the Align panel to center the animation vertically on the stage. As you may have guessed, it’s just as easy to apply the same (or different) motion preset to the other symbol, but we would like to draw your attention to a related feature instead. That related feature is that motion paths can be edited, or created completely from scratch, and then saved to the Motion Presets panel. How? Glad you asked. 5. Shorten the duration of the lunatic’s animation by dragging the right edge of the tween span slightly to the left. In our file, we shortened the tween span from 75 frames to 50. Drag the playhead to one or more of the property keyframes and use the Property inspector, Transform panel, or Free Transform tool to alter the symbol’s antics along the existing motion path. 6. Click the tween span and, in the Motion Presets panel, click the Save selection as preset button ( Figure 8-29). You’ll be prompted to give the new preset a name. Enter whatever you like (we used bounce-smoosh- alt) and click OK. Scroll to the Custom Presets folder to find your preset. The other buttons in the Motion Presets panel let you create new fold- ers and delete folders or presets. Naturally, you could select the big cheese symbol and apply your newly minted custom preset, but there’s another way you can share motion paths. Figure 8-29. Motion paths, whether made from scratch or based on presets, can be saved for later reuse. [...]... message shown in Figure 8-36 Figure 8-36 Only movieclip bones can be interactive at runtime The reason for the warning is that, although bones can be made interactive for the user, Flash requires that the boned symbols be movieclips when Type is set to Runtime Fortunately, this is easy to change in Flash CS4, even if there are numerous symbols in play 3 Click OK to close the warning dialog box 4 Open the... What you get is a feature new to Flash CS4, which is an incredible time-saver The Symbol Properties dialog box opens—not just for the symbol you clicked on, but for all selected symbols 6 In the Symbol Properties dialog box, place a check mark in the Type property and change the drop-down choice to Movie Clip, as shown in Figure 8-37 Then click OK Figure 8-37 Flash CS4 lets you change multiple symbol... Auto Set Transformation Point check box selected in the Preferences dialog box’s Drawing section, you’re telling Flash to move a symbol’s transformation point for you automatically If you prefer Figure 8-49 If you want, IK to maintain that control on your own, deselect that check box, and bones can snap to a symbol’s then use the Free Transform tool to make your symbol selections transformation point... Disney’s 1940 classic, Pinocchio, the wooden-headed puppet, once freed from the apparatus that formerly helped him move, bursts into song, proudly declaring, “I got no strings on me!” In Flash CS4, the authors suspect that you, too, will burst into song—but for the opposite reason—when you see the tools for a new feature called inverse kinematics (IK) What is this academic, vaguely sinister-sounding... time for a quick field trip 1 Open the file in this chapter’s folder You’ll see the fingers and thumb pointing upward, and the thumb has a ghost handle 402 ANIMATION, PART 2 2 Use the Selection tool or the Free Transform tool to click the first knuckle of the pointer finger As Figure 8-47 shows, the symbol’s transformation point (the small white circle) is dead center Figure 8-47 This symbol’s transformation... point is horizontally and vertically centered 3 Noting the transformation point, select Edit (Flash) Preferences and click the Drawing choice in the Category area Find the IK Bone tool: Auto Set Transformation Point check box and deselect it, as shown in Figure 8-48 Click OK to close the Preferences dialog box Figure 8-48 The Auto Set Transformation Point setting affects how bones are applied to symbols... chiropractor’s for a while and turn our attention to a rudimentary steam engine 1 Open the file from the folder for this chapter The symbols are already in place for you In Figure 8-42, we’ve labeled the engine’s anatomy to assist you in the next steps, so you can focus your attention entirely on the IK rigging You’re going to connect three horizontal symbols from left to right Ignore the wheel for the time... your symbol selections transformation point When selected with the Free Transform tool, a symbol lets you move its transformation point with an effortless click-and-drag operation If the symbol already belongs to an IK chain, any heads or tails connected to it will reposition themselves to the new location of the symbol’s transformation point Animating IK poses Ready to animate some IK poses? We think... the Property inspector updates to show two twirlies: Ease: In this area, you’ll find a drop-down list for selecting easing from a list of prebuilt choices, and a Strength value that lets you specify intensity, just as you saw in the Property inspector for motion tweens These settings configure easing for the span of an armature layer (you can drag out an armature span to encompass as many frames as you... the stage 9 Preview the animation You’ll see that both symbols perform the same movements (see Figure 8-30) Figure 8-30 Motion paths can be shared even without the Motion Presets panel That’s impressive enough, but let’s redo the last demonstration in a more dramatic way These last few steps should drive home the notion that, in Flash CS4, motion tweens—specifically, motion paths—are entities that stand . more! 6. Open the Transform panel (Window ° Transform). This one’s a bit trickier, because if you don’t select the actual motion path, Flash will think you want to transform the symbol instead. . transform a motion path with your mouse. 11. Hover near the various transform handles to see the mouse cursor change to indicate what sort of transformation is possible. Click and drag to perform. them. Don’t forget the Alt (Option) key while you make these transformations with the mouse. Without it, transformations pivot around the bounding box’s center. With Alt (Option), transformations