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.
September 4, 2015 at 11:38 pm
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
September 6, 2015 at 4:14 pm
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.
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
July 31, 2015 at 6:51 am
I’m not exactly sure what you mean. Is Flash listed in the left column in Ext. Manager?
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?
August 3, 2015 at 8:15 pm
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.
June 17, 2015 at 2:42 pm
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
August 3, 2015 at 8:40 pm
It should work with CC2015, you may need to update Extension Manager to v7.3 first.
August 13, 2015 at 9:45 pm
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
August 14, 2015 at 8:42 am
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.
August 15, 2015 at 8:26 am
Thanks Tom, the question has been posted. Will let you know if I find anything out.
May 25, 2015 at 5:11 pm
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.
May 29, 2015 at 11:57 am
This functionality is supported in the CC version of the tool.
Here’s how to do it manually:
Or if that makes no sense:
May 21, 2015 at 2:58 pm
thank you for the extension
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
May 13, 2015 at 8:33 pm
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).
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.
April 30, 2015 at 12:04 am
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.
April 29, 2015 at 11:32 pm
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:
2
3
4
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?
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!
April 30, 2015 at 12:01 am
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.
April 30, 2015 at 12:14 am
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.
April 9, 2015 at 8:46 pm
Is it possible to import animated svg to swf?
April 10, 2015 at 8:55 am
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.
March 31, 2015 at 3:31 am
Miraculous! I’m so greatful.. you can’t imagine!!
February 12, 2015 at 2:30 am
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…
February 12, 2015 at 6:29 pm
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.
February 12, 2015 at 7:04 pm
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…
February 18, 2015 at 12:39 am
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.
February 4, 2015 at 8:03 pm
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!
February 9, 2015 at 8:28 am
Hi Reinis,
Do you have Flash installed in the default location?
February 10, 2015 at 6:49 pm
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.
February 11, 2015 at 12:59 am
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.
February 3, 2015 at 9:03 am
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
February 7, 2015 at 5:13 am
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.
August 4, 2014 at 7:22 pm
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
August 4, 2014 at 8:40 pm
Can you confirm that you used the SVG Panel and not the the “Export SVG” command?
November 9, 2014 at 4:39 pm
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!
November 19, 2014 at 10:26 pm
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).
August 1, 2014 at 5:09 pm
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…
August 3, 2014 at 4:14 pm
You need to use a JS workaround for IE, check out my SMIL test page post for an example and a little more info.
July 19, 2014 at 1:37 pm
This extension really helps me a lot. A great work. It worked perfectly on my Flash CS6 Professional
July 17, 2014 at 9:10 am
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?
July 13, 2014 at 9:58 am
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
July 11, 2014 at 3:59 am
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
July 11, 2014 at 7:23 am
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.
July 13, 2014 at 10:02 am
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?
July 17, 2014 at 9:25 am
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
July 1, 2014 at 2:15 pm
sorry but it has the error
at line 87 of file Export_SVG.jsfl Type Error: this.file has no properties
thanks for help!
July 2, 2014 at 9:30 am
If you send me the flash file I can take a look.
July 17, 2014 at 9:27 am
Hey Luc,
If you are using the command try with the panel instead, the command isn’t supported any more.
June 19, 2014 at 3:36 pm
Very nice! Waiting for supporting cc.
July 2, 2014 at 9:32 am
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.
June 4, 2014 at 6:54 am
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?
June 4, 2014 at 1:34 pm
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.
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!
June 2, 2014 at 10:22 pm
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.
April 9, 2014 at 12:08 am
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.
April 9, 2014 at 1:04 am
Good to hear it’s helped.
March 28, 2014 at 2:57 am
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.
January 19, 2014 at 12:53 pm
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.
January 21, 2014 at 8:55 pm
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.
December 24, 2013 at 5:43 am
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).
November 13, 2013 at 6:33 am
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
November 13, 2013 at 10:50 am
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.
November 5, 2013 at 6:11 am
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?
November 5, 2013 at 9:25 am
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).
October 26, 2013 at 1:53 pm
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
October 26, 2013 at 1:56 pm
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.
October 23, 2013 at 4:54 pm
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?
October 23, 2013 at 5:12 pm
I think you might be using the wrong menu option.
Use File > Scripts > MultiExporter
October 16, 2013 at 9:39 pm
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…
October 16, 2013 at 9:46 pm
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.
October 16, 2013 at 9:54 pm
Tom, thank you! I’ve installed a new version (16/10/2013) and
I suppose so now it works..
October 16, 2013 at 8:07 pm
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.
October 16, 2013 at 8:33 pm
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.
September 20, 2013 at 6:40 pm
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!
September 20, 2013 at 7:06 pm
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).
August 8, 2013 at 3:10 am
Oh, excuse my stupidity… I used “export SVG” in Commands menu instead of the panel.
August 7, 2013 at 12:12 pm
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?..
August 7, 2013 at 12:47 pm
Does the panel look like the screenshot above?
I’m not entirely sure what is meant by ‘no settings tab appears’.
August 1, 2013 at 3:56 am
Thanks for the reply. I used the current timeline option and it was succesful. -Jeremy
July 31, 2013 at 10:30 am
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
July 31, 2013 at 11:12 pm
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.