ANIMATION, PART 2 429 Clearly, the existing animation tool set—the Timeline panel and its trusty sidekicks, the Free Transform tool, the Transform panel, and a handful of others—is 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 start flirting with the Motion Editor panel. Figure 8-1. A scene from Joe Cartoon’s infamous “Frog in a Blender” from 2000, which was among the first Flash animations to go viral. Introduced in 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 1, we gave you a drive-by Motion Editor overview, and you’ve seen glimpses of it in a handful of other chapters. Now that you have read Chapter 7 and have experimented with the various details and nuances of the traditional tweening model, the differences between the old and the new will become abundantly clear. We suspect there will be a surge of interest 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 on your doorstep. It’s small and sleek and even has a rotating platter. Grinning, you carry it into the kitchen, plug it in, and slide in some of the goulash leftovers from last night. Two minutes and 20 seconds later—ding! —you have an instant lunch. “Let’s try that again,” you think, and put in a glass of milk with Hershey’s syrup—45 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 www.zshareall.com Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. CHAPTER 8 430 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. Then again, a medium rare steak done on the BBQ is far better than one done in a skillet. Clearly, you’ll want the best of both worlds. And your kitchen is big enough for it. Getting acquainted: scaling and moving Let’s take a comprehensive tour of the Motion Editor panel, covering all the basics. Portions of this will feel like a review after Chapter 7, but it’s important to understand how the mechanics of motion, scaling, and distortion are distinct from the machinery of classic tweens. You won’t be seeing any shapes, by the way, until much later in the chapter. The Motion Editor panel deals exclusively in symbols and text fields, just as is the case with classic tweens. In this case, you’ll be creating motion tweens, which look and behave like their classic cousins. The differences come in how they’re made and how you can edit them, as you’ll see in the following steps: 1. Open the Mascot.fla file found in the Chapter 8 Exercise folder. When it opens, you will notice the Turtle mascot from Chapter 2 has made a guest appearance. The object you see on the stage is the Turtle movie clip found in the Library. 2. Click the symbol on the stage to select it. Now open the Motion Editor panel by clicking its tab or selecting Window ➤ Motion Editor. What you see is an inactive panel, as shown in Figure 8-2, which tells you a fundamental principle of motion tweens: they must exist on a tween layer, which is a particular mode of a normal layer, as opposed to a mask or guide layer. Figure 8-2. The Motion Editor panel is useless without a tween layer. 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 431 3. Switch back to the timeline, right-click (Windows) or Control+click (Mac) frame 1, and select Create Motion Tween from the context menu. This converts the layer into a tween layer and makes it available to the Motion Editor panel. (Alternatively, you can click frame 1 and select Insert ➤ Motion Tween.) When you apply the motion tween, several things happen at once: the single frame stretches out to a 24- frame span, the span turns light blue, and the Motion Editor panel becomes active. Why 24 frames? The default length is 1 second, so what you are seeing is one second of animation on the timeline. If you need more time, roll the mouse pointer to the end of the span. When the mouse pointer changes to a double-arrow, click and drag to the right. 4. Open the Motion Editor panel again. This time—provided you haven’t deselected the tween layer—you’ll see the various grids and input controls shown in Figure 8-3. If you see the same message displayed in Figure 8-2, it means you’ve somehow clicked away from the layer. Either click the layer in the Timeline panel to reselect it or click the symbol itself. Figure 8-3. Applying a motion tween activates the Motion Editor panel for that layer. www.zshareall.com Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. CHAPTER 8 432 5. Removing a motion tween is as easy as applying one. Switch back to the Timeline panel, and right-click (Windows) or Control+click (Mac) the tween layer. Select Remove Tween, and the layer turns gray again. It’s time to take a look at the some of the differences between motion tweens and classic tweens. The key is to be aware that the Timeline and Motion Editor panels are fond of each other. You might even say they’re connected at the hip. When you apply changes to a tween layer in one panel, you’ll see the changes are instantly reflected in the other. 6. In the Timeline panel, drag the playhead to frame 20. Use the Free Transform tool or the Transform panel to make the symbol much wider than it should be. When you widen the symbol, you’ll see a black diamond appear under the playhead in frame 20, as shown in Figure 8-4. Notice the diamond is a tad smaller than the dot that represents the default keyframe in frame 1. The difference in shape and size tells you this is a property keyframe, which is just tween-layer– speak for a keyframe. Figure 8-4. Tween layer changes are stored in property keyframes. 7. Open the Motion Editor panel. Scroll vertically until you find the Scale X grid, as shown in Figure 8-5, and then scroll horizontally until you find the property keyframe that was automatically added when you changed the symbol’s width in the Timeline panel. www.zshareall.com Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. ANIMATION, PART 2 433 Figure 8-5. The Motion Editor panel shows property changes in detailed, collapsible graphs. 8. Click the left side of the Scale X grid—somewhere that isn’t a word, check box, drop-down list, or other input widget. For example, click in the blank area between the Scale X label and the percentage hot text. You’ll see the grid snap open to reveal the taller view shown in Figure 8-6. The particular graph depicted shows a change in x-axis scale; that is—assuming the symbol isn’t rotated— the width. The numbers along the left side stacked vertically show values that pertain to this property, which are percentages of scale. The numbers along the top show frames, which equate to changes over time. The text in the yellow box shows you the scale value at that precise point in the graph. 9. Follow the slanted line in the graph from bottom left up toward the upper right. It shows that the selected symbol began at a 100 percent width—the 100 is partially obscured by the slanted line’s left point—and was stretched to 200 percent over a span of 20 frames This is considerably more detail than you get with classic tweens. We’ll come back to this graph concept in just a moment. First, back to the kissin’ cousin. 10. Open the Timeline panel and, with the playhead still in frame 20, drag the Mascot symbol to the upper-right corner of the stage, as shown in Figure 8-7. At this point, you’ve tweened three distinct properties: Scale X, the X position, and the Y position. www.zshareall.com Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. CHAPTER 8 434 Figure 8-6. Expanded graphs in the Motion Editor panel can make data easier to see. Figure 8-7. Multiple properties aren’t shown in the Timeline panel but do update the graphs in the Motion Editor panel. www.zshareall.com Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. ANIMATION, PART 2 435 Note that the property keyframe, from this view, is still just a small diamond at frame 20 in the timeline. All you can tell at a glance is that something has changed. But even if there’s less detail here, the two panels are in agreement, and the Timeline panel does give you a summary. Later in this chapter, in the “Changing duration nonproportionally” section, you’ll see how the Timeline panel’s abridged view actually makes it easier to update numerous property keyframes at once. Naturally, you can see the changed properties directly on the stage, not only because the symbol itself is stretched and moved but also because of that green dotted line that connects the current position of the symbol (specifically, its transformation point) to the position it held in frame 1. If you count them carefully, you’ll see 20 dots along the line, which represent the 20 frames in this tween span. The dots are all evenly spaced apart, which tells you the tween has no easing applied. Let’s check back with the Motion Editor panel again before we apply easing. 11. Open the Motion Editor panel. You’ll see the Scale X graph as it was before, but in addition, you’ll also see the new changes reflected in the X and Y graphs, as shown in Figure 8-8. Figure 8-8. In the Motion Editor panel, multiple tweened properties can be viewed at once. The vertical values in these graphs, along with the tooltips, change depending on the property represented. For example, the X graph starts at just above 200 on the left side (not 100, like the Scale X graph), because the symbol is positioned at 216.4 pixels on the x-axis in frame 1. On the right side of the slanted line, the tooltip reads 555.94 px, because that’s where the symbol is positioned on the x-axis in frame 20. The point to take away from this is that these graphs are adaptable, and they change to suit the values of the property at hand. The X graph shows pixels, Scale X shows percentages, Rotation Z and Skew X show degrees, and so on. www.zshareall.com Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. CHAPTER 8 436 If any of these graphs seem cramped to you, use the three hot text areas at the bottom left of the panel to fine-tune your view. From left to right, they adjust the vertical height of collapsed graphs (Graph Size), the vertical height of expanded graphs (Expanded Graph Size), and the horizontal width of the graphs themselves (Viewable Frames). These values apply across all graphs in the Motion Editor panel. 12. Open the Timeline panel, and select the keyframe at frame 20 of the timeline. 13. In the Properties panel; twirl down the Ease twirlie, if necessary; and scrub the hot text value—0, by default—slowly toward the left. Scrub it to approximately -10, and then let go. Scrub again to -20 or so, and then let go. Scrub again to -30, -40, and so on, until -100, which is a full ease-in. As you scrub and release in small increments, you’ll see that the dots, which were evenly distributed after step 12, begin to cluster toward the lower left, as shown in Figure 8-9, which represents the beginning of the tween. You just applied an ease in, so it makes sense that the dots are packed more closely at the beginning of the tween. In classic tweens, easing takes effect only between keyframes. In motion tweens, easing is distributed over the frame span of the whole tween, independent of property keyframes. This is a significant departure from the classic model. Figure 8-9. Tween layer changes are stored in property keyframes. 14. Close your file without saving it. www.zshareall.com Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. ANIMATION, PART 2 437 Easing applied to a motion tween with the Properties panel is the same sort of easing applied to classic tweens, excluding the special-case Custom Ease In/Ease Out dialog box, discussed in Chapter 7. To get to the exciting stuff, you’ll need the Motion Editor panel, and advanced easing merits its own section. Easing with graphs When it comes to the Motion Editor panel, the concept of easing ascends to a whole new level. For classic tweens, the Custom Ease In/Ease Out dialog box is the only thing that came close to sharing similar functionality, yet it provides little more than an introduction. The Custom Ease In/Ease Out dialog box associated with a classic tween, while it does get you wet, is a skateboard. It has nothing on the robust flexibility and depth of the Motion Editor panel’s graphs. In contrast, those are a Lamborghini. A powerful feature of the Motion Editor panel is that it overcomes a subtle, but significant, limitation of the Custom Ease In/Ease Out dialog box: classic easing, for whatever property is under consideration, begins at a starting point of 0 percent and ends at a destination point of 100 percent. If you’re moving a symbol from left to right—for example, from 25 pixels to 75 pixels—a classic tween begins at its starting point of 25 pixels (0 percent of the destination) and ends at 75 pixels (100 percent of its destination). Normal easing lets you adjust the acceleration and deceleration between those two immutable points. The Custom Ease In/Ease Out dialog box lets you adjust the velocity with greater control, thanks to Bezier curve handles. In fact, by adding anchor points, you can even opt to arrive at the destination point early, then head back out again and return later, as demonstrated in Chapter 7 with the bouncing mallet exercise. But in the end, there must always be a final anchor point. With classic easing, the final anchor point is always tethered to the 100 percent mark (see Figure 8-10). Figure 8-10. With classic tweens, the final easing anchor point (in the upper right here) always ends at 100 percent. www.zshareall.com Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. CHAPTER 8 438 Unimpeded in this regard, the graphs of the Motion Editor panel can end up where you like. A custom ease can start at its beginning point of 0 percent, travel three quarters of the way to its destination, dance around a bit, and then return all the way to the beginning. This freedom within the property graphs is a powerful tool, which is generally a good thing. But as anyone into Spider-Man will tell you, “With great power comes great responsibility.” Everything comes at a cost, and the price here is that the banished 100 percent restriction can occasionally be disorienting, especially when eases continue past the last property keyframe in a tween span. Let’s take a look. Built-in eases If you’ll pardon the pun, we’re going to ease into this. Let’s start with the built-in eases: 1. Open the MascotEasing.fla file in the Exercise folder for this chapter. Our cute mascot is back, and this time the symbol has been given a 60-frame motion tween that moves it from the left side of the stage (frame 1) to the right side (frame 30) and then lets it sit in place until frame 60. 2. Select the tween layer or the symbol by clicking it, and then open the Motion Editor panel. Find the X graph and notice the straight line from the beginning point (bottom left) to the destination point (upper right), as shown in Figure 8-11. Because no other X changes occur after frame 30, there are only two property keyframes in the graph. Figure 8-11. Without easing, the graph shows a straight line. 3. Notice the setting on the left side of the graph that currently says No Ease. Let’s change that. Click the check box to enable easing, and from the drop-down list select Simple (Slow), which is your only choice. At this point, you’ve applied an ease, and the check mark next to the drop- down means the ease is active. (You can select and deselect this check mark to toggle the ease on or off.) 4. Press Enter (Windows) or Return (Mac), and watch the lunatic move from left to right. www.zshareall.com Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. [...]... 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 CS5, the authors suspect that you, too, will burst into song—but for the opposite reason—when you see the tools for a feature introduced in Flash CS4 called inverse kinematics (IK) What is this academic, vaguely sinister-sounding... watermark ANIMATION, PART 2 Figure 8-35 Only movie clip 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 movie clips when Type is set to Runtime Fortunately, this is easy to change in Flash CS5, even if there are numerous symbols in play 3 Click OK to close the warning dialog box 4 Open the... PART 2 Don’t forget the Alt (Windows) or Option (Mac) key while you make these transformations with the mouse Without it, transformations pivot around the bounding box’s center With Alt (Windows) or Option (Mac), transformations pivot along the opposite corner or edge In either case, the Ctrl (Windows) or Cmd (Mac) key is required to produce the bounding box Figure 8-26 Use the free Transform tool or... 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... you get is a feature introduced in Flash CS4, which is an incredible time-saver The Symbol Properties dialog box opens—not just for the symbol you clicked, 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-36 Then click OK Figure 8-36 Flash CS5 lets you change multiple symbol... 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 CS5 takes advantage of one of the major facets of motion tweens—that... resize the path Impressed? Hang on…it gets better 7 Open the Transform panel Get your hand off the mouse because this one is a bit trickier You need to select the path here, not the object, or Flash will think it has to transform the blue cube instead 8 Use the Selection tool to click anywhere along the path Now scrub across the Transform panel’s Rotate value The path will, as shown in Figure 8-26,... symbols perform the same movements (see Figure 8-29) 457 www.zshareall.com Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark CHAPTER 8 Figure 8-29 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 CS5, motion... in any case, because motion paths can be reassigned to any symbol you like The other motion tween–related Properties panel settings depend on the symbol itself For movie clips, your configuration options for motion tweens are the same as those for classic tweens Some properties— such as position, scale, and rotation, and even color effects such as alpha—are tweenable Others, such as blend modes, are... think you’re going to love playing with it That said, it’s one of the more complicated feature sets in Flash CS5 Stringing up your symbols is easy enough The official 458 www.zshareall.com Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark ANIMATION, PART 2 terminology calls for creating an armature and populating it with bones, which can then be dragged around Adobe engineers . among the first Flash animations to go viral. Introduced in Flash CS4, the Motion Editor panel provides a second non-ActionScript paradigm for moving things. 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