Flash/Animate Extension: Sync Symbols to Timeline

Advanced animation techniques in Flash often make use of nested symbols. It can make animating objects much simpler and leave timelines cleaner and easier to work with. Often in these animations, it’s helpful to sync the nested symbol’s timeline with its parent timeline. That way, complex animation can be built within a symbol and animated independently without adding tons of layers to the main timeline. This technique is frequently used in character animation to segment a character’s moving parts.

The difficulty then becomes going through each keyframe and setting the startFrame property (listed in the Property inspector as First). This can be quite tedious over hundreds or thousands of frames. The request for this extension came from an animator on the Cold Hard Flash forum (no longer online) . It will search selected frames for graphic symbols and set their startFrame property to match the timeline.

(compatibility: Flash MX 2004 and up)
Sync Symbols to Timeline.zip


The zip file contains an mxp file for previous versions of Flash Pro and Adobe Extension Manager, as well as a zxp file.

To install with Adobe Animate CC, use the zxp file in conjunction with the Manage Extensions utility from Adobe.

Convert Illustrator Point/Path Text to Area Text

Point text in Illustrator is a text field that is generated by a click of the text tool. Area text is generated by dragging a rectangle with the text tool. You can scale a area text to make room for more text or to control where the lines end. When you try to scale point text, however, the text itself grows or shrinks to fill the rectangular area. If you inherit a file with lots of point text, it can be difficult to edit.

This script will convert point text and text on a path into area text. You select multiple text fields and the script will convert them all. It does not take into account stories (linked text fields), so use with caution in those cases.


(Compatibility: Illustrator CS & up)
Convert to Text Area.js
[right-click (ctrl-click on Mac) and choose Save Link As…]

Installation Instructions

Place the Convert to Text Area.js file into the Scripts directory within your Illustrator application directory:

Windows > C:\Program Files\Adobe\Adobe Illustrator {version}\Presets\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).


Select text field(s), choose File > Scripts > Convert to Text Area.

Looking for the reverse?

Don’t worry we won’t leave you hanging. Download the file below. Installation and usage are similar to above.

Convert to Point Text.js
[right-click (ctrl-click on Mac) and choose Save Link As…]

Another Utility Script

If you want to select only text frames, to scale them or otherwise you can use the script below. If you already have a selection, it deselects anything that is not text (i.e. it selects within your selection), otherwise will search the entire document.

Select Text Only.js
[right-click (ctrl-click on Mac) and choose Save Link As…]

New Flash Extension: MotionBlur

The MotionBlur Flash extension takes a (new) motion tween, analyzes the movement, and creates a motion blur. Because the new motion model allows each property on a tween to be set independently, this extension is able to generate independent blurring for horizontal (x) and vertical (y) movement. It can take into account some rotation as well as some movement on the z-plane (3D), but its primarily designed to track x and y motion.

It works best if you run the extension after you’ve completed all easing and other adjustments on the tween first. If have to you adjust your path or motion easing, you can simply run the MotionBlur command again to re-calibrate.

The motion curves for blur x and blur y are optimized as well, so they add as few new keyframes to your tween as possible. The amount of blur is also adjusted based on the document’s frame rate (higher frame rate = faster animation = more blur).

(For CS4-CS6)

(For Flash Pro CC)

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.

(compatibility: Flash CS3 and newer)

[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.]

New Flash Extension: MotionSketch

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!

Want to see it in action? Check out the MotionSketch video demo.

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


(Compatibility: Flash CS4)

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