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:

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):

Easing In with curves

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

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:

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!

8 Responses to FOTD 10: Flash 8 – Custom Easing

  1. Francis Gabon says:

    great job!is it a fp8-only feature, or can we export flash files using custom easing for previous versions of the player?

  2. John Olson says:

    The one thing I haven’t seen any mention of yet is if there will be some way to save your curves for later use. Copying and pasting is good.. but being able to save some presets would make this feature tops with some the designers I work with. I know they will tire quickly of having to copy and paste curves when animating 15 or 20 different instances which all should share the same tweens and easing.if not for v8..maybe this will make it into v8.0.1 ?

  3. Francis- you can indeed export SWFs for prior versions of the player, in fact the examples in this walkthrough are ALL exported to v6.0.0, not v8. Proof positive!John- unfortunately you can’t save the curves externally or as presets, but that’s a fantastic suggestion. I’ll pass it along ASAP (FYI, you can always make feature suggestions to the product teams thru the following web form:

  4. I am utterly amazed at this addition. Really will bring superb animations with less keyframes! :)In there an AS way to control on the fly animation?P.S.> your blog comments don’t allow the tag.

  5. Reading the save preset idea, exporting/importing presets via XML would be cool!

  6. Diviner says:

    Very nice and attractive…

  7. Dave Curtis says:

    Does this work in addition to, or instead of the scripted tweening of F7? It would be nice to have a drop-down menu of those tweens (e.g. bounce in, ease in/out) etc.Once the tween is defined with the tool, is there any way that the tween can be referenced through actionscript and dynamically attached to other movieclips?

  8. Chris- you can always implement procedural tweens via the Tween AS2 class, here’s a good intro to it:… but alas, the Custom Ease data is not accessible via Actionscript, it appears to be one or the other. Given that, I’d use procedural for those times where you need to algorithmically control the tween (effects like camera jitter, waveforms, etc), and Custom Ease in the cases where you really want to fine-tune the tween.Also FYI- the Custom Ease frame-by-frame info isn’t available via Actionscript, it is accessible via the *JSAPI*, however- so (although honestly I haven’t spent much time exploring the possibilities there) it’s entirely likely some of these suggestions could be implemented via the Flash 8 extensibility layer, too. HTH!