Batch Optimize in Flash
Optimizing vector artwork in Flash is usually the last thing on an illustrator or animator’s mind when they’re drawing in Flash. Unfortunately, when all the artwork is done and it’s time to get it ready for the web, it can be pretty daunting to think about going through the FLA and doing Modify > Shape > Optimize… by hand.
One of the most helpful (and under-used) features in flash is the ability to write Javascript to automate tasks in the authoring tool. Rather than doing all that optimizing manually, I wrote a JSFL script to do the heavy lifting by running the Optimize command on every shape in every group on every frame in each symbol… wheew! The Optimize command (Modify > Shape > Optimize…) is called with the highest quality settings, which will remove a significant number of controls points without any quality loss.
For example, the Rainbow Flasher from the Crappy Cat game took about 15 minutes and shrank from 188kb to 80kb with no visible quality loss (even the VanBeater couldn’t tell them apart).
| Original (188kb) | Optimized (80kb) |
This movie requires Flash Player 9+
|
This movie requires Flash Player 9+
|
To install the script:
Download the script and put it in the Commands folder:
OS X:
/Users/username/Library/Application Support/Adobe/Flash CS3/language/Configuration/Commands
Windows XP:
\Documents and Settings\username\Local Settings\Application Data\Adobe\Flash CS3\language\Configuration\Commands
Windows Vista:
\Users\username\Local Settings\Application Data\Adobe\Flash CS3\language\Configuration\Commands
For more information about where to put the file, see Saving JSFL files.
To use the script:
Open your FLA in the Flash authoring tool. Choose which symbols you want to optimize by selecting them in the library. If no symbols are selected, it will assume you want to optimize everything. Then go to the Command menu and choose the batch-optimize command. The script will take control of the authoring tool and go through all the selected symbols and optimize them. You’ll see the symbols opening and closing, and that’s normal.
While the script works away, you’ll probably want to grab a coffee. When it’s is done, it will trace a summary to the output window with the number of control points before and after, and the difference as a percentage so you know how things went.
A word of caution, the script is not fast. If you have a lot of symbols, or symbols with a lot of animation, it’s probably wise to do a few at a time. The script suppresses the dialog that allows you to cancel long-running scripts (so that you could leave it to run overnight without it being interrupted by the dialog), so if you do want to interrupt it, you’ll have to kill Flash. The script has been tested in Flash CS3 on OS X 10.5.
April 20th, 2010 at 4:35 pm
Hi Luke,
I really appreciate you having created the script. This is exactly what I need – however I do not think it is working as intended.
Line 178
document.optimizeCurves(70, true);
After running the script on some large files I noticed that the results were insignificant- 1% or 0%. Having manually run the Optimize Curves command, I knew that my file should take at least a 5% reduction in curves. This is what prompted me to look for Line 178. It was set to 0 when I expected it to take the “quality” variable.
Best,
Chris
April 20th, 2010 at 4:36 pm
Correction, the original line 178 reads:
Line 178
document.optimizeCurves(0, true);
April 30th, 2010 at 2:20 pm
It is working as intended, but the result depends a lot on the type of artwork you’re trying to optimize. I was tying to optimize hand-drawn animation with lots of detail and control points. If you have clean, computer-drawn vector art, it’ll be a lot less effective.
Specifically, the script uses zero to prevent optimizeCurves() from applying smoothing (see: http://www.adobe.com/livedocs/flash/9.0/main/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&file=00003966.html). With hand-drawn artwork, running optimizeCurves() without smoothing can still remove a lot of control points. Changing that 0 to 70 means the optimizeCurves() will apply 70% smoothing (which might be totally appropriate for the artwork you’re trying to optimize), so I’d keep a close eye to make sure it still looks ok afterwards.
Funny aside: The quality variable in the script actually zooms in or out in the Flash IDE before calling optimizeCurves(), because you get different results from optimizeCurves() depending on the zoom level, which is all kinds of awesome :-p
April 30th, 2010 at 7:17 pm
Thank you for the clarification! Either way this script pointed me in the right direction.
Oh the endless caveats of flash. Thanks again.
- Chris