FOTD 10: Flash 8 – Custom Easing

This feature of Flash 8 is a personal favorite of mine- as I’ve never been a fan of ‘percentage-based’ easing when animating in Flash, and always wished I had a more control than just a ’10% ease-out’ or a ’5% ease-in’ in Flash MX 2004 and earlier. Patience pays off, however- Flash 8 features a new Custom Easing panel that, to be quite blunt, rocks quite hard indeed.


I’ll cop to it- my biases here are based on prior experience in 3D applications such as Maya and Lightwave, which all use some form of function curve editor to support very precise, bezier curve-based motion paths without an undue amount of keyframe-wrangling. And the Custom Easing in Flash 8 delivers the goods for me here. You can still use the quickie, percentage-based eases in Flash 8 – but the real fun happens when you select a range of keyframes and click that big ol’ Edit button in the Property Inspector next to the Easing controls and bring up the new Custom Easing panel.(quickie disclaimer- the example SWF files in this FOTD are published to v6.0.0 to avoid having to add detection to this blog entry- let me know if you have problems viewing them.)


A default, linear motion tween in the timeline appears like…curve_default.jpg
… this in the new Custom Easing dialog.

At first glance (particularly if you’ve not used F-curve editors before), the Custom Easing panel can appear a bit daunting- but it’s surprisingly simple once you’ve learned the basics. Your tween’s frame range is displayed horizontally across the X axis, and velocity (easing percentages, translating the old terminology) is displayed vertically across the Y axis. The ‘curve’ at this point is a straight line going from the bottom left corner to the upper right corner of the graph. What this means, in animator’s terms, is that the velocity of the object does not change from frame to frame, and it moves linearly from 0% of the tween (starting point) to 100% of the tween (ending point) at a constant velocity. Exactly what you’d expect in a default motion tween, in fact.Now let’s tweak that basic tween out. By clicking on the Custom Ease curve itself, you can add control points at various stages, and control the velocity of your animation at any point by both moving the control points and their bezier ‘handles’ appropriately to affect the velocity of your object. For example, I want to move a simple object across the stage, easing in AND out, but pausing for a second in the middle (accomplished by flattening the curve – i.e. the frames keep moving forward, but the velocity/motion becomes a constant value). In Flash MX 2004 and earlier, this required breaking the animation into multiple tweens with separate easing percentages for each, and if you wanted to edit the animation after the fact, you were stuck with cutting/pasting keyframes and manually ‘reconstructing’ the animation – quite painful. The Custom Easing dialog lets you do it all in one step with the following curve:


curve_in-pause-out.jpg
Easing in AND out – with a pause in the middle to boot.

For visualization’s sake, here’s an ‘ease-in’ (velocity starting out flat, then curving up to an even velocity thru the end of the tween range):


curve_ease-in.jpg
Easing In with curves

The reverse of that curve, as you’d expect, is an ‘ease-out’:


curve_ease-out.jpg
Easing Out with curves

And if you want to get complex, you can take this to many extremes (having the curve go negative – i.e. curve downwards going left-to-right – will even reverse the motion along the tweened path) such as this example:


curve_insanity.jpg
A more complex animation created from the same linear tween

But that’s not all- position is only one type of motion that can be tweened, by unchecking the ‘Use one setting for all properties’ checkbox, you can then use the ‘Filters’ menu to choose and specify different velocity curves for Position, Rotation, Scaling, Color and Filters (no examples for all these due to time constraints, but I’m sure your mind is churning on the possibilities by now!). Add this to the power of the curve editing alone, and you’ve got unprecedented control over the characteristics and expressiveness of your animations. And you’ll find yourself spending much less time cutting/pasting keyframes and retweening- much of those tasks can be performed right here in the Custom Ease interface instead of the Timeline in Flash 8.Now on the subject of increased control, there are some custom keyboard shortcuts you’ll want to be aware of while using the new Custom Ease interface:

  • Left, Right, Up and Down Arrows
    Move the selected control point and it’s 2 tangent points one pixel in the respective direction. Holding down the shift key as a modifier will make each key press move the control point 10 pixels.
  • Delete
    Removes the selected control point from the curve.
  • Command (Control) + Z, Command (Control) + R
    Undo/Redo the last edit to the current curve.
    (Note: the undo history is cleared if a different property is selected in the ‘Filters’ menu).
  • X key
    Temporarily turns off snapping while dragging points in the editor (holding the ‘x’ key down).
  • Option/Alt Key
    Clicking on a control point with the Option (Mac) or Alt (Windows) key down will delete the control point.
  • F5
    Play the animation.
  • Command (Control) + C, Command (Control) + V
    Copy/Paste. Copy saves the current curve, Paste copies the saved curve to the current curve. Very handy for ‘sharing’ curves between filters/properties.

The other controls in the Custom Ease dialog include Start and Stop ‘VCR-style’ buttons in the lower left to let you preview the animation before confirming your curve edits, and of course the expected ‘OK’, ‘Cancel’ and ‘Reset’ options. All things told, Custom Easing is a very flexible and powerful addition to Flash 8- you can now perform a healthy chunk of your animating right here in this panel, without breaking up sections of a complex tween, or juggling keyframes unnecessarily.I can’t wait to see how animators take the ball and run with this feature once it releases!