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.

84 Comments

  1. I have the latest version of Flash (15.0.1.179), on a brand new high spec iMac, trying to install the latest version of Flash2Svg 3.23.0. The extension manager pops up with this message when I try to open/install the extension:

    “This extension can not be installed, it requires Flash version 11 of greater.”

    I also tried a few older versions of Flash2Svg too… same error. Is this a known bug? Or am I missing something?

    Thanks!

    Mark

    • Hi Mark,
      Unfortunately there isn’t much transparency on the extension install process, so Adobe support might have to help you out with this one.

  2. jamiedodger1984

    July 29, 2015 at 10:29 pm

    How do I install this on a Mac? Extension manager doesn’t see anything it can install. Thanks

    • I’m not exactly sure what you mean. Is Flash listed in the left column in Ext. Manager?

    • jamiedodger1984

      August 3, 2015 at 1:43 am

      Yes, Flash is listed, but extension manager can’t find any extensions to install from your download? Which file do I use to install the extension?

    • I’ve uploaded a new version which should work (v3.17).
      The plugin file should be over 500kb, if it isn’t that big then you’ve got a broken file.

  3. Hi Tom,

    awesome extension! I’ve tried it before but been unsuccessful at getting it to work. Regardless I’d like to try again and was wondering before plunging in whether you’ve tested and/or support the new Flash CC 2015 update?

    cheers,

    Nick

    • It should work with CC2015, you may need to update Extension Manager to v7.3 first.

    • Hi Tom,

      The concept of this plugin is very excited. Unfortunatly I haven’t been able to test it on my latest version of CC 2015 on my Mac (Yosemite).

      See screenshot to see what I see. Everything is up to date.

      Happy to help troubleshooting with you if you need assistance.

      Mark

    • Hi Mark,
      Yeah, I’ve heard of this happening to other users but I’m unable to reproduce it myself.
      If you could shoot an email with that screenshot and some details to Adobe support they might be able to fix the problem in an upcoming release.

    • Thanks Tom, the question has been posted. Will let you know if I find anything out.

  4. Hi, wanna ask is there any tutorial I can hover and play the SVG animation that I exported in a website?

    I have the animated SVG already, but I’m not sure how to make it stop at first and when user hover only start to play the animation.

    • This functionality is supported in the CC version of the tool.

      Here’s how to do it manually:

      • Give the root SVG element an id
      • Change all begin times to be triggered by the root SVG element’s mouseenter event (including any offset from 0).

      Or if that makes no sense:

      • Open the SVG in a text editor (notepad or whatever)
      • Change ‘<svg’ to ‘<svg id=”root” ‘
      • Change all text like ‘begin=”0s” ‘ to ‘begin=”root.mouseenter” ‘
      • Change all text like ‘begin=”5s” ‘ to ‘begin=”root.mouseenter+5s” ‘ (or whatever the number value might be)
  5. thank you for the extension

  6. Chakradhar Reddy

    May 13, 2015 at 8:27 pm

    Dear Thomas,
    I have a small doubt regarding motion animations. When I try to export ti using the plugin, in the final SVG formed the position data for each frame is present rather than just the path’s control points being present. Is this expected behaviour? I am using motion guides to create animation along a path.

    Regards,
    Chakradhar

    • Hi,
      Unfortunately motion paths are not yet supported.
      They’ll still play fine, but they’ll be converted to keyframes during export (the same thing that happens when Flash exports a SWF).

  7. Wladyslaw Fedorov

    April 29, 2015 at 11:52 pm

    Shape tween seems to be an important one, how difficult is it to implement? As I see from the structure of exported svg, we can take shapes from keyframes to use spline morphing.

    • Currently shape tweens are supported, but it simply exports each frame as an additional graphic, which is exactly what Flash does when exporting a SWF. It is possible that path morphing might give a better result but I’m currently not looking at implementing it.

  8. Oh, hi! Great plugin!
    But the next thing so upsets, I can’t tell. It can’t be used with HTML5 (canvas) projects!
    Here is an example of got bugs:

    1
    2
    3
    4
    TypeError: timeline.libraryItem is null
    TypeError: xml is undefined
     The 'Document.editScene' JS API is not supported for HTML5 Canvas.
    Error:  The 'Document.editScene' JS API is not supported for HTML5 Canvas.

    Is there any ability to fix this somehow?

    • Wladyslaw Fedorov

      April 29, 2015 at 11:54 pm

      I had the same issue, I created new document (AS3) and duplicated everything into it and it worked!

    • Unfortunately the whole tool is based on the JS API, so it will never work on documents that don’t support this. As Wladyslaw suggests, copy your timelines into a new AS3 document.

    • And now I’ve just copied all of frames from my HTML5 Flash file to a blank new AS3 Flash file. And with AS3 it’s all works OK. Not ideal (because I’ve got a bit hard and crappy file) but your plugin seems to do it’s work. Thanx much for it. It’s a salvation.

  9. Is it possible to import animated svg to swf?

    • I’m assuming you mean importing an animated SVG into Flash Pro and then exporting as a SWF?
      This is not possible with my plugin or any other I’ve heard of.

  10. Miraculous! I’m so greatful.. you can’t imagine!!

  11. Similar to my foreposters:
    Installed the extension. Shows up as active in the Extension Manager. But can’t find the svg panel anywhere in flash. Neither @[File > Scripts > MultiExporter] nor @[Window > Other Panels > SVG]. Same problem with the original extension by David Belias by the way.
    I run Flash CS 5 Professional on a Win 7 64 System.
    – Am I too dumb?
    – Is this a version issue (update to CS 5.5)?
    – Is this due to my restricted user administration rights on this client? (I’m not even allowed to install a font myself – can you imagine?)
    Sorry to bother, but this extension seems soooooo sweet…

    • Grace to Tom’s support here the solution to my problem:

      There should be a file named SVG.swf in C:\Users\username\AppData\Local\Adobe\Flash CS5\en_US\Configuration\WindowSWF

      If you are running your OS in a different Language, the Extension Manager will copy the file to the wrong folder, like
      C:\Users\username\AppData\Local\Adobe\Flash CS5\lang_LANG\Configuration\WindowSWF

      If you copy the files manually to the en_US folder, the SVG panel will become available.

    • There are some more files that must be copied to the appropriate language configuration:

      in the Extensions folder: flash2svg.mxi
      in the Javascript folder: the entire “Extensible” folder.

      It will work now…

    • I tried to check this solution, but I don’t have any other folder than en_US and this also doesn’t have any of files you mentioned. Also those files aren’t anywhere else on C disk.

      But still somehow this extension still exists in extension manager. 🙂

      Any ideas – welcome.

  12. Hi!

    We are trying to install this on Flash Professional CC (14.1.0.96), it shows up in Extension Manager, but it’s just not appearing in the extensions panel in Window menu.

    Is there any options how to solve it?

    Thank you!

    • Hi Reinis,
      Do you have Flash installed in the default location?

    • Hi!

      Yes, It’s in C:\Program Files\Adobe\Adobe Flash CC 2014.

      It was installed via Creative Cloud app, same as the Extension Manager.

    • Hi, I got the same problem with the latest version (3.2) and Flash CC 2013. The extension Manager seems to have installed it successfully but it does not appear in Window > Extension.

  13. Ugh…
    “This extension can not be installed, it requires Flash version 11 or greater.” But I have CS6, Flash 12! On a Mac/OS 10.9.5. Any advice??

    Thanks!!
    Suzanne

    • A reply to myself…and anyone else who make make the same stupid mistake. I had moved my copy of Flash and the Extension Manager just wasn’t seeing it.

  14. I received the same error as the first poster. i’m using flash cs5.5 windows 7 x86.

    The following JavaScript error(s) occurred:

    At line 58 of file “SVG.jsfl”:
    TypeError: ext.doc.pathURI has no properties

    • Can you confirm that you used the SVG Panel and not the the “Export SVG” command?

    • I kept getting that error until I saved the flash file somewhere (it was a new, unsaved document). After that I could export but it always saves in the same directory as the flash file, regardless of where you tell it to save with the browse button. Other than the messed up file path it seems to work quite nicely. Thanks!

    • Hey guys,
      I’ve fixed these issues.
      If it can’t find a path to export the SVG to it’ll warn you.
      (That is, if you haven’t selected an absolute path and you FLA isn’t saved).

  15. Hi Tom.

    This is cool stuff! Thanks! But it seems not to work with IE – is this true? The examples on this site Show all Frames at once, not an Animation…

  16. This extension really helps me a lot. A great work. It worked perfectly on my Flash CS6 Professional

  17. I am trying to complete several simple Animations in SVG using flash. I’ve kept to the guidelines as best I can here, and tried with the ZXP above for CS6, CC and CC14, with no luck – I get 1×1 images. what am I missing?

  18. Sorry to be a nag, but I’m receiving the same error as everyone else…
    at line 87 of file Export_SVG.jsfl Type Error: this.file has no properties

  19. I received the same error as the first poster. The “at line 87 of file Export_SVG.jsfl Type Error: this.file has no properties…” error.

    Was this an issue attributed to the flash file itself or something bigger?

    Thanks for your help! I’ve been trying to figure out how to export an single animated svg file from flash for a couple days now and right now this is the strongest lead.

    nathan

    • Hi Nathan, which version of flash are you using? If you send me an example flash file which shows the issue I can take a look.

    • Maybe you could reproduce the error in windows 7 64 bit flash cs6 installing just your package from http://www.tbyrne.org/wp-content/uploads/2013/07/flash2svg.zxp then making a new flash AS3 file with some doodles on the first frame, saving it, then commands->Export SVG and you will receive the same error?

    • Hey guys,
      Don’t use the Command, it hasn’t been supported for a while (and will be removed from the next version).

      Use the panel, in CS6 this is accessed via:
      Window > Other Panels > SVG

      On CC:
      Window > Extensions > SVG

  20. sorry but it has the error
    at line 87 of file Export_SVG.jsfl Type Error: this.file has no properties
    thanks for help!

  21. Very nice! Waiting for supporting cc.

    • Update on CC version.
      The new extension builder for Flash CC is woefully broken, so until Adobe fixes it there will be no rebuilt CC version.

  22. Tom, I am really looking forward to giving this a go in Adobe CC when get it working in that version. How far off do you think you are with overcoming the regression bugs and getting it to work in CC?

    • Hi Kevin,
      I think the newer versions of CC work a lot better. I gave the tool a go in CC a few days ago and it seemed to be working fine.

      I probably will be building a version specifically for CC sometime soon though.

  23. Seven Iverson

    June 2, 2014 at 3:30 pm

    Hello Thomas,

    Thank you for developing this tool. it has already helped revolutionize the look of my work! I want to ask you about NON looping animations. I have an animation that ends with a clear graphic, but the exported SVG ends the animation and then shows nothing/blank view. I installed a “stop()” at the last frame in flash, which i know does’t help, but I have tried just about everything, including playing with the Before/After Anim settings which i don’t quite understand, and I even unchecked Loop Animation. To no avail. please help 🙂

    Thank you so much!

    • Hey,
      The SVG animations can be triggered with code via javascript, so the before/after settings determines how the graphics look when it isn’t animating (i.e. either the first frame or the last frame can be used).
      It sounds like you’re after the ‘Loop Animation’ checkbox, although it sounds like you’ve already tried that.
      If you email me you fla file I can have a look.

  24. I wanted to thank you for creating this panel! I’m using it in both my professional and personal work. At work, I use it to prototype and help sell visualization ideas which will then be programmed using D3. I can spend 2-3 hrs in Flash and produce an animated design that I can show to the product managers and get their approval. It would take days otherwise tinkering with d3.

  25. THIS IS A GODSEND!!!!!!!!!!!!!!! Just the ability to NOT save out the background color (not an option in the original extension) is a lifesaver. THANK YOU.

    Why Flash doesn’t include this natively (it’s not as if SVG is a new format here in 2014) is baffling. Even saving static SVG images from static FLA’s maybe, Adobe? Guess not. Anyway: that’s what extensions are for, and this one kicks ass. Thanks again, really.

    — S.

  26. It just gave me the file Unnamed-1.log.csv with “Operation,Total Time,Average Time,Run Count” in it.

    What do i wrong?
    Tried this plug-in on Win7x64 with Adobe Flash Professional CS6.
    Please help.

    • You’ll have to send me the FLA for me to see what is going on.
      Also, I’m currently travelling, so I wouldn’t be able to let you know till early March, sorry.

  27. Awesome! I really wanted the CreateJS suite to handle svg along with canvas but unfortunately it attempts to render SVG in a canvas tag. I started a discussion on their forum about it and promoted your extension: http://community.createjs.com/discussions/easeljs/1432-svg-animation

    One thing — I agree with another commenter — when you say download the zip, add some big bold text about how to launch the extensions because it’s not found in the logical place Window > Extensions but Windows > Other Panels in Flash CS6

    Anyways, I’ve been playing with it and it’s doing exactly what I want – I can create timeline based animations in Flash; your extension spits out an animated svg which I can open and copy all the tags or load it directly ( using with it D3js).

  28. Hi Tom,

    Thank you for taking the time to build this extension. I’m incredibly excited about it, but I have been running into an error when I try to export… it says export successful but the file never appears on my desktop.

    I suppose I am missing something obvious & if you could point it out, I would be most grateful.

    this is my log…

    hmm: Scene 1 folder
    TypeError: frame has no properties
    TypeError: xml has no properties
    write: extensible.SVG(),3643,3643,1

    write: extensible.SVG.doInit(),3643,3643,1

    write: extensible.SVG._getTimeline(),3633,3633,1

    write: extensible.SVG._getTimeline() >> Check break apart tweens,324,162,2

    write: extensible.SVG._getTimeline() >> Get frame items,417,417,1

    write: extensible.SVG.processFinaliseDocuments(),86,86,1

    write: extensible.SVG.applyMatrices(),86,86,1

    endProgress
    Export Successful: file:///Macintosh%20HD/Users/Daniel/Desktop/mc2.svg

    • Hi Daniel,
      It’s a pretty complex script and there’s no doubt a lot of edge cases that it’ll struggle with.
      I’m happy to have a look if you email the FLA.

  29. Hi. I ran it in CS5.5 and everything worked… except that the output was mangled (i’m testing with a simple animation of a bird flying – and the head of the bird got mushed into the body of the bird… basically looks like bird that has been hit by a truck).

    Is this what you mean by “few group bugs in CS5.5″… or related to fact that wings animation is in a separate clip?

    • By “group bugs” I mean that in CS5.5 there is a bug in the JS API regarding groups. I’d avoid using them, instead use symbols (or simply expand groups).

  30. After click I see
    >> endProgress
    >> Export Successful: file:///C|/Users/1/Desktop/Sprite1.svg
    But no Sprite1.svg file appears in this forlder…

    Im using Flash CS6

    • if you email me the full output or the flash file I can take a look, otherwise it’s difficult to say what could be going wrong.

  31. I’ve installed it on CS6 but when I select the command to export to SVG nothing happens. Is there an obvious step that I’ve missed?

  32. Tom, thank’s! Previous problem is fixed but now it tels me:
    TypeError: xml has no properties
    TypeError: xml has no properties
    TypeError: xml has no properties
    .
    .
    etc…

    • I’d have to take a look at the FLA.
      I’m really busy at the moment but if you email the FLA across I can have a cursory glance.

    • Tom, thank you! I’ve installed a new version (16/10/2013) and
      I suppose so now it works..

  33. Please, tell me why when i starting extension that error appears: TypeError: ext.doc.pathURI has no properties (str. 142, file “String.jsfl”). My OS language is not English, if it’s important.

    • You need to save your FLA before running the tool. It’s a little quirk that I’ll iron out if and when I get a chance to refactor the tool for Flash CC with Extension Builder 3.

  34. I was looking at your example and the svg animations are reeeeally laggy on firefox, while the flash examples play fine. i think it even slows down my firefox browser itself not just the page (firefox 23.0.1).

    Completely different story in chrome though. Svg are smother than flash. haven’t viewed your examples on other browsers yet.

    other than that your flash extension is very cool!

    • Yeah, firefox definitely performs the worst of all browsers when it comes to SVG.

      Interestingly, IE is really fast at rendering SVG, although after you add in JS to compensate for it’s lack of SVG animations (SMIL) it performs roughly the same as the webkit browsers (Chrome, Safari, Opera).

  35. Oh, excuse my stupidity… I used “export SVG” in Commands menu instead of the panel.

  36. I tried the extencion under CS6 and when i clicking “export SVG” no settings tab appears, smth happening in ~1 min and then i finding in output tab log like “Export Successful: undefined”, log file in appr. folder and nothing more 🙁 Can you help me to understand a problem? Maybe some troubles with my clip?.. but why settings are absent?..

    • Does the panel look like the screenshot above?
      I’m not entirely sure what is meant by ‘no settings tab appears’.

  37. Thanks for the reply. I used the current timeline option and it was succesful. -Jeremy

  38. Running into some errors in the output window. Do you have any ideas?

    At line 101 of file “SVG.jsfl”:
    TypeError: selectedItems has no properties

    I’ve ensured that my movie clip has an instance name.

    Thanks! -Jeremy

    • Are you exporting selected items?
      If so, try using the ‘Current Timeline’ option instead.

      If you send me the FLA I can probably get a fix up pretty quickly.

Leave a Reply

Your email address will not be published.

*

© 2021 Thomas Byrne

Theme by Anders NorenUp ↑