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.

Video demos

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

[I’m using Jing for video capture, which is nice because it’s free, but it crashes constantly and has some other issues that I won’t go into here. If you like this extension and/or you like the video demos/tutorials on this site, you can donate using the link on the right side so that I can invest in some better video capture software.]

Flash Extension: Export as Motion Preset Preview

This is the first extension that I’ve written exclusively for the new Flash CS4 features. Flash CS4 not only allows you to create extremely complex animations with a high level of control, but it also allows you to save those animations for reuse in the new Motion Preset panel.

I got the idea for this extension from Lee Brimelow’s excellent tutorial on the Motion Preset panel. Since I imagine that I’ll be creating a lot of my own motion presets, and I’d like them to have live previews just like the default presets, I decided to automate the process.

Here’s how it works:
Once you’ve created a custom motion preset, you can use this command to immediately create a live preview from your current document. This assumes that the motion preset is the only thing in your document. If that’s not the case, you may want to open a new document, paste the animation, and run the command from there.

Feedback welcome.

UPDATE:

  • Version 1.1.0 now supports multiple languages. Thanks to jeanphilippe for the catch!
  • Know issue: Preview is not retained if the preset is moved to a different folder within the Motion Preset panel. This is because Flash does not keep track of the preview files, it just knows to look for them.

Download
(compatibility: Flash CS4 and later, including CC and CC 2014)
Export as Motion Preset Preview.zip

New Flash Extension: FrameSync

This is a handy-dandy animation plug-in similar to Animonger’s AnimSlider, except that it uses frame labels and requires no other setup.

Update: The video tutorial is now live. See the extension in action!

I picked up this style of lip syncing in Flash from Chris Georgenes’ tutorial.

Update (8/26/09): A savvy user caught a stage refresh bug introduced in Flash CS4 with AS3. If you’re using Flash CS4 & AS3 and the symbol isn’t updating when you select a new frame from the panel, download the most recent version below (1.0.3 has the fix).

Update (8/16/10): Version 2.0 now has some great new features, including a “keyframe” mode, audio playback and frame navigation for Flash CS5, and performance improvements. See this post for more details on the updates.

Update (10/5/10): Check out SmartMouth, the new extension that automatically lip syncs.

Update (11/19/10): See Chris Georgenes demo FrameSync in his MAX 2010 Animation session.

Download

(compatible with Flash MX 2004 & up)
FrameSync.zip

Other Lip Sync Tools from Ajar Productions

3 New Flash Extensions for Managing Long Timelines

These should cut down on the dragging and scrolling and searching. I got tired of dragging a selection across hundreds of frames only to lose it all with one slip of the mouse.

  • Select Empty Layers command
  • Select Frames to Start command: this takes your selection and selects all the frames before it as well
  • Select Frames to End command: this takes your selection and selects all the frames after it as well

Downloads

  1. Select Empty Layers.mxp
  2. SelectFrames_toStartAndEnd.mxp

Queasy Tools Panel – New Flash CS3 Extension for Designers & Animators

Queasy Tools is a new set of quick and easy tools for Flash designers and animators. This panel provides the fastest way to create tweened animation with easing in Flash (and now Animate CC) as well as putting together a set of common design functions in one location. Feature list and free download below…

UPDATE:

Details on newer version (1.5.0) features available here.

Screenshot

Queasy Tools Screenshot

(more…)