Page 1 of 5 As Tom Green mentioned in his end-of-2008 video "A Quick Tour of the Flash CS4 Interface," the latest version of Flash introduces a handful of eye-popping new tools. These are covered in detail in our latest collaborative effort, Foundation Flash CS4 for Designers (ISBN: 1430210931, by Tom Green and David Stiller, published by friends of ED). In this series, we'll be sharing a number of excerpts from this book, in hopes of inspiring you to experiment with the new stuff.
Part 2 of an investigation of the Motion Editor panel, this installment delves into easing and how this feature has changed for new-style motion tweens. The difference comes by way of a series of graphs, rather than the single hot text slider in the Property inspector's version of easing. Let's "ease" on in, shall we?
When it comes to the Motion Editor panel, the concept of easing ascends to a whole new level. (Easing is the optional ramping-up and ramping-down of a tween during animation, a feature that usually adds realism to movement, scaling, and so on.) 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. While it does get you wet, the Custom Ease In/Ease Out dialog box, as associated with a classic tween, is comparable to an inflatable kiddie pool. It has nothing on the robust flexibility and depth of the Motion Editor panel's graphs. In contrast, those are the marked lanes of a regulation Olympic pool.
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% and ends at a destination point of 100%. 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% of the destination) and ends at 75 pixels (100% 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. 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% mark (see Figure 1).
Figure 1 With classic tweens, the final easing anchor point (in the upper right here) always ends at 100%
Unimpeded in this regard, the graphs of the Motion Editor panel can end up wherever you like. As shown in Figure 2, a custom ease can start at its beginning point of 0%, 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% restriction can occasionally be disorienting, especially when eases continue past the last property keyframe in a tween span. Let's take a look.
Figure 2 With motion tweens, the final easing anchor point (in the
lower right) can end anywhere between 0% and 100%
Keywords
Flash CS4, Motion Editor panel, tweening, easing, animation, timeline
