SVG Animation Exporter v3.0

SVG is a great graphic format, it scales perfectly for different screen pixel densities, so that it looks crystal clear on all devices.
Being a vector format it’s also typically smaller than raster based formats (i.e. JPEG, GIF, etc)
It’s only drawback is that it consumes resources to be rendered, but this has been almost entirely mitigated in recent years by all browser vendors optimising their rendering software.
It also has the power to include animations within a single file, through the underutilised SMIL standard. These animations are also very clean and light.
Unfortunately there is little in the way of generating these animations, this is why I have been working on this export panel for flash for some time now.

	Animated SVG

Since first posting about the SVG Animation tool for flash, a lot has changed.
Tons of bug fixes have been added in the last year and a half.
A massive thanks to Viber, who have funded the last six months of development and who are using the tool to create animations for use within their mobile app.
After doing some overhauls to several of the core processes within the tool, I was ready to bring it up to date with Adobe’s HTML5 panel infrastructure.
The result is a much cleaner, more usable panel, with forwards compatibility that should last for some time to come.

What the settings do

Timeline settings

Each timeline in a flash document can retain it’s own export settings, so that settings don’t have to be readjusted everytime a particular timeline needs to be re-exported. This can be done manually using the Save/Load buttons or automatically using the “Auto-save settings…” checkbox.
The default behaviour in earlier versions of the tool was to auto-save settings in timelines, there was no way of disabling this feature.

Source settings

The tool can either export the current timeline (i.e. the one which is opened on the stage) or all of the selected timelines in the library. It’s also possible to specify which frames are included in the export from the exporting timeline.

Output Format settings

Type

Selecting ‘Animated SVG’ will export a fully contained animation file, selecting ‘SVG Images’ will export each frame as a separate SVG file.

Output File

This can either be a path relative to the document, or an absolute path to export to. If left blank a file name will be generated from the document and timeline’s names.

Decimal Places

Exported SVGs contain a lot of numbers, by having less decimal places the exported file will have less accuracy but will be smaller.

Rendering

This setting provides a guide to the client rendering the SVG how it should be rendered. By using ‘For Speed’ shapes will be less smooth and filters will be applied at a lower quality which comes along with a performance boost. The degree to which this option affects the graphics is entirely up to the browser/client.

Expand Symbols

SVG can reduce file size by storing multiple uses of a single graphic by only storing it once, even if they’re on screen at the same time. Keeping these links incurs a small file size and performance cost which is almost always outweighed by the saving of not having to store the graphic multiple times. To get the smallest output size, use the ‘Once Used Symbols’ option.

Simplify Structure

The export tool treats each timeline frame as a group for animation purposes. This, along with regular flash groups can result in a lot of unnecessary groups in the output SVG, use this option to remove them.

Remove Whitespace

This will make remove unnecessary whitespace characters (new lines, spaces & tabs) from the output file. It’ll make the file less readable but smaller.

Remove Miter Joins

Current versions of Firefox (as of Jan 2015) have trouble with miter joins (a join is where two strokes meet at a corner). Use this option to convert then to round joins during output (original joins in flash will remain untouched).

Graphics settings

Masks

Masks can be rendered in a few different ways. ‘Clipping’ considers any semi-transparent parts of the mask as fully masked (like flash normally does). ‘Alpha’ takes into account the masks alpha channel (like flash would if cacheAsBitmap was used). ‘Luminence’ treats the brightness of the object as the masking factor.

Convert patterns to symbols

Means that if a bitmap fill gets used multiple times, with the same settings, it can be reused as a symbol.

Include Background Colour

Whether or not to include the documents’s background colour in the output file.

Animation settings

Tween Export

SVG animations don’t have a set frame-rate, the browser displays as many frames per second as the device can handle (although there is often an upper limit imposed by browsers). Selecting ‘High FPS keyframes’ will keep the original keyframes defined in flash and tween between them at this high rate, this will give the smallest output and looks smoothest. Selecting ‘High FPS all frames’ will convert all frames to keyframes and tween between them at the high rate, this is more accurate to the original but increases file size. Selecting ‘Low FPS’ will convert all frames to keyframes and will not tween between them, retaining the original frame-rate from flash and giving the most accurate representation (albeit less smooth).

Loop Animation

Whether the animation should only play once or should loop indefinitely.

Tween final frame into first frame

Because of the frame-rate differences mentioned above, looping animations can often look like they have a pause at the end (as the duration of the final frame doesn’t include the high rate tweening). Use this setting to tween compatible final frames back into the first frame of the animation.

Begin Animation

Controls when the animation begins playback. ‘Auto’ begins playback as soon as the SVG is in the page. ‘On Click’ begins playback when the SVG element is clicked on. ‘On .beginElement()’ doesn’t start the animation until playback is initiated manually via JavaScript (go here for more info)

* Imagery courtesy of Jazza Studios