While working on a project which required rich vector animations in the browser, I came across Dave Belias’ library for exporting still SVG frames from flash. I wondered if I could re-purpose it to export Animated SVGs, a relatively unknown standard for containing fully animated imagery within a single SVG file.
Huzzah:
| Flash | Animated SVG |
|---|---|
 |
|
 |
|
 |
|
 |
You may notice that the SVG motion tweens are a little smoother than flash, this is because they are completely time-based (whereas flash exports motion tweens as frame-based animations).
Disclaimer
It's worth noting that both Flash and Animated SVG are complex systems and I gaurantee this won't work for all animations.
What it does
While the initial code base was a little tricky to work with (sorry Dave), I managed to rearrange a few things and get it to do the following:
- Shapes
- Bitmaps
- Symbols (i.e. repeated imagery is included once only)
- Classic Motion Tweens
- Shape tweens (as frame animations)
- Guided motion tweens (as frame animations)
- Old school tween easing (-100 to 100)
- Masks (not much testing)
It doesn't do:
- Custom easing
- New After-effects style tweens
- Actionscript or frame label export
- Unsynchronised nested timelines*
* In Animated AVG, all timelines are hooked into a central timer, to have a nested timeline play over a different duration to the parent timeline is, from what I can tell, impossible. You can still use whatever frame settings you want for nested graphic symbols, but they will play the same each time over.
I think all of the controls are fairly self-explanatory but if there's enough interest I'll post some more info.
A note regarding output size
The main thing to reduce size is whether you choose to use movieclips or graphics for any sub animations.
Because the playhead of a graphic symbol can be controlled by the parent timeline (in flash pro), they must be exported frame-by-frame in the output SVG, resulting in a much bigger file. This is useful if you have many of the same short sub animation, all running at different times (in relation to the root timeline). The output ill include an additional element per frame of the sub animation.
In SVG, movieclips are tied in to the same central timer, and the beginning time of their animation is set within the symbol, as a result, every time a movielcip is reused at a different starting frame (in relation to the main timeline) it must be included again in the output SVG. Because these aren't frame-by-frame elements they are much smaller than their graphic equivalent and they can contain real tweens.
It's also worth noting that it doesn't matter whether the nested clips are movieclips or graphics in the library, it only matters what the instance on the stage is set to in flash pro.
Updates - 22/05/2014
I have added a new updated installer.
I've been slowly improving performance and output.
It should run several times quicker and the output should be many times smaller (and run faster).
The tool still runs best in CS6, it runs with a few group bugs in CS5.5, it runs with some stage scale issues in CC.
April 29, 2015 at 11:32 pm