The Missing Flash Panel: EaseCaddy

Along with the brilliant new tweening model in Flash CS4, the Flash team has given us the powerful, but somewhat daunting, Motion Editor panel. The Motion Editor panel allows for extremely precise control of each individual animation property as well as custom easing curves. Put simply, the upshot of the Motion Editor is control and precision, the downside is time and complexity. One area where a lot of time can be lost is in recreating custom eases. A custom ease cannot be transferred from one tween to another (UPDATE: you can copy/paste curves in the motion editor–a great feature that I somehow missed. See comments for details. Thanks, Eric!). Custom eases can be cumbersome to transfer eases across tweens and across files. And I’ll go out on a limb here, there was no way to transfer an ease from a classic tween to a motion tween or vice versa…that is, until EaseCaddy.

I should clarify somewhat. The Motion Presets panel that comes with CS4 is a great way to store and quickly apply entire animations that include easing. In fact, I modeled the visual design and functionality of EaseCaddy on the Motion Presets panel. But what if you want to apply an ease from a motion preset, but not overwrite your existing animation? Or apply the effect to a different property? Hence I’ve titled this post, “The Missing Flash Panel.”

The EaseCaddy panel allows you to store your custom eases and re-apply them. You can save your eases to a file and send them to someone else. You can save both classic (pre-CS4 motion tween) eases and object (new motion tween, as of CS4) eases, and apply one to the other. So you can even save eases from your Flash CS4 Motion Editor panel and send them to someone who has Flash CS3, or open up old files and reuse your classic tween eases on the new motion tweens. EaseCaddy will translate them for you. The panel is sortable by column, and has a filter field, in case you collect a large number of eases. Eases within the panel can be renamed by simply double-clicking on their names. There’s an adjustable preview at the top gives an approximation of the easing curve. I used Singularity’s FastBezier Actionscript class to draw quadratic bezier curves from the cubic curve data (explanation here).

When applying a stored ease to a new motion tween, you can choose to apply it to the available properties that currently have keyframes. This keeps you from having to open the massive Motion Editor editor panel, while still taking advantage of much of the power and flexibility that the new motion model offers. And, since recording the demo, I’ve also added an overwrite option to this box. If you want the settings to overwrite existing applied eases, you can check this box. For instance, suppose you just applied an ease to X, Y, and rotation (Z)–the default–, but you only wanted the ease to be applied to Y. You can re-apply the ease and uncheck X and rotation, and check the box that says, “Set unchecked properties to ‘No Ease’.” This will remove the first ease that you applied from the X and rotation properties, and apply the new ease to the Y property only.

When you import and export, you can any number of the eases available.

I used many of the same techniques that I created for the MotionSketch tool to interact with the new tweening model. I’m still planning to post a technical explanation on that process if anyone is interested. The EaseCaddy panel is available (free) for CS3 and CS4. There are three reasons why it’s not compatible with earlier versions of Flash: 1) Actionscript 3 components are much more powerful, 2) There’s a lot of XML manipulation in this extension, which would have been a nightmare, until E4X was introduced to JSFL and Actionscript in Flash CS3, 3) Some on the JSFL commands were not available prior to CS3. I used several of Peter DeHaan’s articles on Flash components to get up to speed with some of the AS3 components; I’d highly recommend them.

UPDATE (2/9/2012): Version 2.0 has been optimized for CS5 and above (while still compatible with CS3 and CS4). Additionally, there is now a Pro version of EaseCaddy that allows you to apply an ease to multiple tweens simultaneously.

Download
(compatibility: Flash CS3 and newer)
EaseCaddy.mxp

Get updates from Ajar Productions

Sign up today and get the InDesign Split Text premium extension for free!

Unsubscribe at any time. Powered by ConvertKit

Join the Conversation

  1. eric says:

    Nice work with the panel, it looks very useful!

    One note about the motion editor:

    One area where a lot of time can be lost is in recreating custom eases. A custom ease cannot be transferred from one tween to another.

    You can copy and paste the easing curves from one tween to another in the following way:
    If you draw an easing curve in the motion editor, you can select ‘copy curve’ from the context menu, and then select another tween, create a new custom ease, and then selected ‘paste curve’ from the context menu.

  2. Justin says:

    Thanks for the tip, Eric!

    I had looked for such a feature, but apparently I hadn’t looked hard enough.

  3. Brad says:

    Nice work! This works great in CS3. I have been looking for a way to copy and save tweens. Thanks!

    1. Justin says:

      Glad to hear it, Brad. Thanks for the feedback!

  4. Chris says:

    This panel was sent down from the heavens. If only I’d known about it sooner. Fantastic work.

  5. Ease Caddy for flash. Save custom tweens http://tinyurl.com/bqzykg

  6. Baldur says:

    Thank you Justin I have been looking for something like this, as someone who spends most of his day working with the timeline in Flash this will surely save me allot of time.

    1. Justin says:

      Glad to hear it, Baldur and Chris!

  7. Copy and paste eases between tweens & swap motion & classic tweens with Ease Caddy. http://tinyurl.com/bqzykg #flashbelt

  8. Wixtr says:

    Hi! great extension! very very handy. one question, is there any way to apply the curve to multiple keyframes on multiple layers in one click?
    thanks!

  9. Justin says:

    Wixtr,
    Because of the complexity of applying the new Motion Tween in CS4, I limited the extension to one tween at a time. I will keep the feature in mind for the next version though, it’s a great idea!

  10. milo says:

    Hi!

    I just want to let you know that all the tool you have development are the best!! you rock! but I have a question with this tool, because I can’t create a new ease , I receive this error “no eases were found” can you please help me with this issue, thanks!

  11. Justin says:

    Hi Milo,
    Thanks for your comments! I appreciate the kind words.

    It sounds like you’re using the new motion tween introduced in CS4, but you haven’t created a custom ease yet (on your selected tween). See the Video Demos above for instructions.

  12. Trond says:

    Hi!

    This looks like a great plugin but I can’t get it to work. I seems to install properly in the extension manager and I’ve restarted Flash but I can’t find the panel under “Window > Other Panels > EaseCaddy”.

    I’m using Flash CS4 10.0.2 and Extension Manager CS4 2.1.115

    Btw I also have the same problem with “Export as Motion” and “MotionBlur”, they seem ok in the extension manager but don’t show up under “Commands”.

    Help! 🙂

  13. Trond says:

    Hehe… well. Cancel the alarm, I solved the problem

    Looks like the Extension manager split the files it installs in ‘Application Support > Flash CS4’ in two folders – ‘en’ and ‘no’. I’m Norwegian but use Flash in english. I manually merged the two folders into the ‘en’-folder and all the extra extensions and commands I’ve installed showed up when I restarted Flash 🙂

    Looking forward to using all your great extensions – thanks! 🙂

  14. Emmanuel Ulloa says:

    Copy and paste into an empty .xml file and import into the EaseCaddy Panel:

    
      
    [content missing]
    
  15. Justin says:

    Awesome stuff, Emmanuel! Thanks for sharing!

  16. divz says:

    Thank you so much

  17. pjgfi says:

    Great little extension !

    For some reason though the list I imported from the link above wont show graphs and won’t alter tweens when applied.

    Using Flash Pro CS6

    1. Justin says:

      Hmm…Perhaps there’s a syntax error in the XML.

Leave a comment

Your email address will not be published. Required fields are marked *