Home > Blog

The Missing Flash Panel: EaseCaddy

Posted byJustin

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

New Flash Extension: MotionSketch

Posted byJustin

I had the idea when Flash CS4 came out to create a tool that recorded drawing in real-time and created a tween based on that drawing. Because of the slick new object-tween in Flash CS4, the tween could be created with just a start and end keyframe, but at the same time, the motion path could be incredibly complex. Additionally, all of the timing could be stored within a single easing curve. The resulting tween would be super clean and super editable. So I was fairly disappointed to find out that none of this new functionality had been included in the  JSFL (extensibility) API when Flash CS4 came out. After a lot of digging behind the scenes in the Flash application, as well as a very useful article and helpful correspondence from Flash engineer John Mayhew,  I came up with a way to accomplish this extension. I will cover the somewhat daunting technical details of this process in a future another post (UPDATE: technical post now available). For now, enjoy the extension!

UPDATE (5/1/09): Released the Actionscript class to produce the write-in effect shown in the demo.

Download

(Compatibility: Flash CS4)
MotionSketch.mxp

Thanks again to John Mayhew, Jen DeHaan, and Richard Galvan @ Adobe.

New Extension: Send Colors from InDesign and Illustrator to Flash

Posted byJustin

Following the merge text extensions for Flash, Illustrator, and InDesign, Keith Gilbert wrote me wondering about getting swatch information from InDesign to Flash via XFL or by way of importing an Adobe Swatch Exchange (ASE) file into the Flash swatches panel. There are several stumbling blocks in the way of such an extension. First, finding a way for extendscript or JSFL to read the contents of an ASE file (which is not open source and not plaintext) proves to be quite difficult. Second, JSFL (the Flash scripting language) doesn’t have any access (currently) to the swatches panel.

—
BREAKING NEWS (12/6/08): I noticed that the new Kuler extension for Flash CS4 has an “add to swatches” button, and it actually adds swatches to the swatches panel. After some decompiling and a lot of detective work, I found an undocumented JSFL call that was added to CS4. The feature is undocumented for a reason: it sends encoded XML data, and if the data is faulty, it crashes Flash. I have a few test cases working and I’m confident that I can add it to this extension, so the swatches will go right in the Flash swatches panel, rather than onto the stage, though it will only work in CS4. Be on the lookout for an update in the next few days.

UPDATE (12/7/08): Updated to version 1.1.0. If you have Flash CS4, the swatches will now go right into your Flash Swatches panel. Hooray!
—

There does seem to be a lot usefulness to such an extension, since XFL creates a new workflow between InDesign and Flash, and the Illustrator importer for Flash is fantastic, but neither one loads any of the swatches from the original document. I’ve certainly spent my fair share of time opening up the swatch properties, making sure the swatch is RGB or hex and copying all three fields one at a time.

So, I decided to plow ahead and see what I could come up with. The results are below. This extension takes the swatches from your current InDesign or Illustrator document and sends them to a new layer on the Flash stage. You can then use the eyedropper to pick up the colors, or you can add them to your swatches panel individually (similar to this demo of the Kuler panel).
UPDATE (12/7/08): If you have Flash CS4, you can skip the step above. Version 1.1.0 of this extension will send the Illustrator or InDesign swatches right to your swatches panel in Flash.

This extension will transfer spot and process colors of all varieties (RGB, CMYK, LAB, HSB). Rather than converting the CMYK with my own function, I used the applications themselves to convert the colors to RGB for Flash, so the transfer fidelity is quite good. It will ignore gradients, tints, patterns and fancy stuff like that. If you want to get your gradients into Flash see the bonus tip below.

InDesign to Flash CS4


Or, here’s what InDesign to Flash CS3 would look like.

Illustrator to Flash CS4


Or, here’s what Illustrator to Flash CS3 would look like.

Downloads and more below the fold.

Continue reading…

Merge TextFrames Extension for Adobe InDesign

Posted byJustin

By request—following similar extensions for Flash and Illustrator—here’s an extension for InDesign that merges multiple textframes into one, while retaining the original styles.

Because of properties within InDesign, this extension is actually the most powerful of the three. It accepts characters in the separator field for hard returns, soft returns, and tabs (as well as any combination of any other standard characters).

There are also options in the dialog box that control the size of the textframe once it’s been merged (see the variations in the graphic down the page).

Merge Textframes Extension for Adobe InDesign

Download and instructions below…

Continue reading…

Announcing Merge Text Extension for Adobe Illustrator

Posted byJustin

Following the release of my Combine Textfields extension for Flash, I’ve put together a similar extension for Adobe Illustrator. This extension installs a script that will merge text (including text on a path) into one text object, while retaining the style attributes of the individual pieces, including character styles as well as paragraph styles (if the separator includes a return character).

Anyone who’s tried to edit text from a PDF opened in Illustrator knows how frustrating it can be to make simple text edits when the text is broken up. This extension reduces that headache.

Special thanks to David Van Brink for posting the Omino Dialog Maker. His time-saving code was used to produce the dialog box in this extension.

Download Options

Installation Instructions

JSX or JS file:

  1. Place the MergeText_AI.jsx (or MergeText_AI_CS.js) into the Scripts directory within your Illustrator application directory:

Windows > C:\Program Files\Adobe\Adobe Illustrator {version}\Presets\en_US\Scripts
Mac OS X > Applications/Adobe Illustrator {version}/Presets/Scripts

Note: In CS4, the directory path will include a region directory (e.g. Adobe Illustrator CS4/Presets/en_US/Scripts).

MXP file or ZXP file (CS4 or newer):

  1. Double-click on the mxp file to install using Adobe Extension Manager.

Note: Adobe has abandoned Adobe Extension Manager as of CC 2015, even though it’s still installed. You can use the JSX file in that case (installation instructions above).

Update Oct. 2023

You also can try using one of these non-Adobe-built Extension Managers to install the .zxp file.

Usage

In Adobe Illustrator, select the text the you want to merge together and go to File > Scripts > MergeText_AI. If you’re using Illustrator CS3 or CS4, you will be prompted with a dialog box where you can choose your sorting orientation and a custom separator. If you’re using a version earlier than CS3, you will not be prompted with a dialog; the script will run using the default settings sorting topmost, then leftmost, with a separator of “[><]”. You can then run a Find and Replace and replace the separator with the characters of your choice.