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.


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


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.

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.


  1. Hey there, I’m looking to use this for a project. I have it working in CC 2014. I also have CS6 installed, but it isn’t showing up in there for whatever reason.

    I just made a quick test file of a square symbol moving around using a Classic Tween, and it’s giving me this error:
    TypeError: svgXml.defs[0] is undefined

    Any thoughts? What I’m trying to do is to get a logo animation onto a website. Initially I’d done it in After Effects and exported through Photoshop as an animated GIF, but the aliased edges are looking bad. I assume this is my best alternative option? Thanks! Mike

    • Hi Mike,
      You can follow the instructions here to manually install in CS6:

      Note that the last version which supports CS6 is v3.36.

      As for the issue you’re having in CC 2014, you’d have to send me the FLA to have a look.

      I probably wouldn’t recommend adding a dependancy on SMIL (which may be deprecated sometime in the future) just for a logo. I’d probably lean towards a JS based solution based on whatever JS libraries you’re already using.

  2. Hi Tom,

    Loving the script but I have been asked to take some character animation and re purpose it for a website.

    I have a feeling its an issue with the timelines ( I got rid of the newish style tweens after reading your documentation) is it possible to email you the file and you can take a look at it? I’ve tried to get it to work for two days now and its almost working!



  3. Dear Tom,
    I am trying to use your plugin on Adobe Animate and works very well. i ask you if or where I can find a way, perhaps with jquery, to start the animation via javascript command in the html file.
    You suggest me know how can I do ?


    • Hi Antonio,
      Yeah, this is possible.
      Set “Begin Animation” to “on beginElement()”.
      Then call the beginElement method on the root svg element.
      If you were using jquery it’d be something like:

    • Dear Tom,
      thanks for the quick response!
      I had already tried a solution such as this, but the browser console gives me “Uncaught TypeError : Can not read property ‘ beginElement ‘ of undefined “…

    • Note that you can’t load the SVG into an image tag if you want to trigger it this way, as the element must be accessible in the same DOM as your JS.

      You can use the jquery method element.load(pathToSvg) to load an SVG into the same DOM.

      Check out the script on this page for an example:

    • thanks Tom, work perfectly!

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

  5. 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 ↑