Export Flash to Animated SVG

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

FlashToSvg
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.

Get the latest release here

Or mess with the repo

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.

4 Comments

  1. Hey Tom,

    I am trying to create an animated asset for website similar to this gif but using adobe animate cc.
    something like this;

    View post on imgur.com

    When I export using the svg. animation tool I get a broken svg animation
    with no resemblance to what i created in the timeline or the placement of elements placed onto the stage. I was wondering if this was because I was maybe using Adobe Animate CC instead of Flash CS6?

    Thanks for the plug in am excited to use it! :-)

    • Adobe Animate should work with the plugin just fine. If you send me your FLA file I can take a look.

  2. I’ve tried to use this extension just to test some flash animation I had.
    It worked fine in most browsers. However, while trying in the Microsoft Edge, it just stopped to display the animation correctly. I suppose Microsoft did something with its new browser that don’t let svg animation to play fine. 😉

    • Hey Fernando,
      Both Internet Explorer and Edge have never supported SVG animations. The SVG should still display but if you want it to animate in Microsoft browsers, you’d have to use a JS-based polyfill.

Leave a Reply

Your email address will not be published.

*

© 2016 Thomas Byrne

Theme by Anders NorenUp ↑