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.
July 1, 2019 at 7:17 am
Hey, Tom!
What tool did you use for exporting flash to SVG? Do you have statistics on how much it decreased the file size? Thank you for sharing!
October 26, 2018 at 7:15 pm
Hi Tom
I have 3 mac computers I have tried to export from all running the latest operating system and software – 0S x El Capitan v10.11.6, with Adobe Animate CC 2018 v18.0.2 and Animated SVG v3.56. Every computer has an export issue on a server or local on the desktops – The output directory could not be found. Please update it and try again. [/Users/………
Can you please help, the plugin would be a massive help to our company for web animations if it works?
Thanks Nolan
November 5, 2018 at 7:50 pm
Hi Nolan,
Sorry, I’m not really supporting this plugin any more.
I could make time for paid work but otherwise I’m probably too busy.
August 23, 2017 at 12:49 pm
This is such a great plugin. Saved my life when it comes to making complex SVG animations.
Is anyone else having an issue with their animation pausing on mobile when revisiting a URL after the initial visit?
It would be awesome to find a fix or some information on this.
Thanks!
August 23, 2017 at 1:53 pm
Actually, just realized that the SVG animation is pausing in Safari browser both desktop and mobile.
Anyone have a solve for this?
Thanks again!
August 29, 2017 at 9:12 am
Hi Trevor,
If you post a link to your SVG file I can take a quick look.
Maybe some formatting that Safari doesn’t like.
February 15, 2018 at 3:29 am
Hi Trevor,
I have installed this plug-in but couldn’t find in Adobe Flash Professional.
Can you tell me where i can found it and hoe to use please it very need full.
Thanks.
June 29, 2017 at 1:56 am
Hi!
I’m not a dev at all, so a lot of terms are quite obscure to me, sorry for that, but when I try to export my file, I get this “TypeError: svgXml.defs[0] is undefined” and the export fails (I think. I don’t know where it would create my file).
I’ve seen this question in the comments already but couldn’t find an answer that would work for me. I’m using Animate CC 2017 if it helps.
Is there something i can do to make it work?
August 16, 2017 at 9:12 am
Hi Charlotte,
The plugin relies on Animate’s built-in SVG exporter.
There was a bug with this in Animate v2017.1 (on Mac only).
If this matches what you’re running please try upgrade to v2017.2 (or downgrade to v2017).
See the bug discussion on Adobe forums
February 27, 2017 at 11:14 pm
Hi,
Thanks for the awesome tool 🙂
I’m using cs6, v 3.36 and it’s working … but not all the time
some times when my animation take more than 160 frames (i’m using 20 fps) or when i use 1920 p scale file the extraction takes a long time then error msgs appears most of them (out of memory)
is there a solution for this ? or is it just limited due to scale of frames ?
will it help using animate ?
Thanks again
February 28, 2017 at 7:35 pm
Hi Ahmed,
Yeah, currently this is limited by the amount of memory that Flash/Animate allows plugins to use (in the JSFL environment).
The tool itself uses E4X also, which isn’t very memory efficient, so that doesn’t help either.
When I’ve run into this issue in the past, I have exported each layer of the main timeline separately and manually combined the resulting SVG files. If you’re familiar with XML this shouldn’t be too difficult, otherwise, I’m not sure I can help.
February 17, 2017 at 3:09 pm
I have animate cc 2017.1 and flash cs 6 installed on my PC still it shows error on export and generates a crash log
February 27, 2017 at 8:41 am
Hi Pratik,
If you send me your FLA I can take a look.
January 27, 2017 at 1:38 pm
I get this error when I try to export any idea what this means?
TypeError: svgXml.defs[0] has no properties
SVG Export Failed
January 28, 2017 at 12:23 pm
Hi Adrian,
Are you running CS6 or CC?
January 27, 2017 at 10:01 am
Hello,
Thank you for creating this plugin, and making it free!
I am using this plugin with Flash CS6, and I am getting an error when I try to export a very simple shape tween animation (using the Export panel):
TypeError: svgXml.defs[0] has no properties
Is there a fix for this, or perhaps a setting I have missed?
Thanks,
Craig
January 27, 2017 at 10:25 am
So sorry… for some reason, these recent comments were not visible until AFTER I posted mine. I noticed the last version that supports CS5/CS6 is v3.37. I have installed that version, and it is working.
Thanks!
December 19, 2016 at 11:44 pm
Hi Tom,
Thanks for this extension, it’s excellent.
I’ve had a problem with one particular FLA that raises the error:
TypeError: svgXml.defs[0] is undefined
Prior to that I see this message in the output:
doNextTimeline: 0 file:///undefined/graphic.svg
I noticed a few others have seen the TypeError but I’m not sure how to fix it.
Could you give me any pointers in what’s happening here please?
Many thanks,
December 19, 2016 at 11:47 pm
OK, making my previous comment helped me understand the issue and I’m now able to convert the problematic FLA to animated SVG successfully.
For those with the same error, I had created a new FLA and copied a sprite from another FLA into it. The first time I tried to export to SVG, a message appeared saying ‘Please save the FLA before exporting’ or words to that effect. When I did save the FLA, I got the TypeError message when converting. I think this was because the animation plugin had not picked up the new FLA file location as indicated by the message:
doNextTimeline: 0 file:///undefined/graphic.svg
To fix it, I closed the FLA down then reopened it. After that the export worked perfectly.
Thanks again for this tool!
December 13, 2016 at 8:25 am
Hello,
I would like to use this tool but I got an error.
TypeError: svgXml.defs[0] has no properties
Application version: Flash CS6
File type: AS3
Plugin version: v3.50.0
Installation method: Extension Manager
Description of timeline: Single layer with frame by frame animation of drawn shapes. No tweens.
How I got the error: Clicking export on the SVG panel created a cvs file and an empty temp folder. The output window reads the following:
doNextTimeline: 0 file:
//file location…/filename_ShapeContainer.svg
Then the output window suddenly reads this error message:
TypeError: svgXml.defs[0] has no properties
The tool appears to still be working with a blue striped loading bar still moving under the cancel button but nothing happens.
Could you kindly help me figure out how to solve this error?
Thank you,
Sheharzad
December 14, 2016 at 8:12 am
Sorry, the last version that supports CS5/CS6 is v3.37.
December 3, 2016 at 11:33 pm
Hello Tom,
I have succesfully installed the plugin for Adobe Animate CC 2017 via the zxp installer. But when I try to export my animation to svg i get the error message “The output directory could not be found. Please update it and try again.”.
It creates a folder to put the svg file in but it is always empty.
Any tips how to solve this?
December 5, 2016 at 1:05 pm
Hi Linus,
Another user has recently reported this issue but I haven’t been able to reproduce it.
Would you be able to send me your FLA file and I’ll take a look.
Also, which version of Animate are you using?
December 11, 2016 at 8:33 am
Hello, sorry for the late reply. I am using Animate CC version 16.0.0.112. I have sent the .fla file to your email “work@tbyrne.org”.
December 15, 2016 at 11:34 pm
Hi! Finally got it installed but now I have the same issue as Linus..
I’m using the latest Animate version.
Hope there is a way to solve this!
January 9, 2017 at 6:56 pm
Hey guys,
This issue has been fixed in v3.51.
Give the latest version a try:
https://github.com/TomByrne/Flash2Svg/releases
January 10, 2017 at 1:12 am
It works perfectly now, thank you very much!
January 20, 2017 at 8:31 pm
Thanks Tom! When will the update be available on Adobe Add-ons?
January 23, 2017 at 7:32 pm
It has been submitted to Adobe.
It usually takes 2 – 3 weeks.
March 30, 2017 at 8:06 pm
Hi Tom,
The update is still not available on Adobes ad-ons? Do you know if there is a problem with Adobe?
Cheers!
April 11, 2017 at 11:12 am
hey Basil, check again now, v3.52 was approved in the last 24hrs.
November 14, 2016 at 12:31 pm
Hi Tom,
Installation went well but I don’t know how to use this. Every time I click on “export”, I have the message “Exporting from Non-Flash documents is not supported”. But it’s a flash document, and the animation is pretty basic as I just want to test. Here is a screenshot: https://dl.dropboxusercontent.com/u/4895444/flash2svg.jpg
November 21, 2016 at 1:52 pm
Hi Sam,
Yeah, the messaging on this alert is a little confusing.
This is because the document is an HTML Canvas document, which doesn’t have any scripting support.
You should create an Actionscript 3 document instead and copy/paste your layers across.
November 4, 2016 at 5:21 am
Hey Tom,
Is it possible to use the extension with Animate CC 2017? Can’t seem to get it installed. I use the extension a lot so I hope it works with the Animate upgrade!!
Cheers, Basil
November 6, 2016 at 12:42 pm
Yeah, it should work just the same in 2017, although I have noticed that after closing the plugin Illustrator sometimes crashes, I’ve logged a bug report with Adobe, so hopefully this will be fixed in the next minor release.
If you are having trouble installing the plugin, try installing with ZXPInstaller.
December 15, 2016 at 7:31 pm
Thanx! Unfortunately I still can’t get it installed. ZXP installer notes: “Installation failed because the extension is not compatible with the installed application”.
December 15, 2016 at 11:35 pm
Hi! Finally got it installed but now I have the same issue as Linus..
I’m using the latest Animate version.
Hope there is a way to solve this!
September 3, 2016 at 3:30 am
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
September 5, 2016 at 7:36 pm
Hi Mike,
You can follow the instructions here to manually install in CS6:
http://www.tbyrne.org/manually-installing-flash2svg
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.
July 27, 2016 at 2:11 pm
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!
Help!
Jason
July 27, 2016 at 9:16 pm
Yeah, no problem, send it over and I’ll see what’s wrong.
July 13, 2016 at 7:02 am
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 ?
thanks
July 13, 2016 at 9:22 am
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:
$(“#my-svg”)[0].beginElement()
July 13, 2016 at 10:06 am
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 “…
July 14, 2016 at 7:11 am
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:
http://tbyrne.org/portfolio/smil/beginElement.html
July 14, 2016 at 10:34 pm
thanks Tom, work perfectly!
March 19, 2016 at 6:27 pm
Hey Tom,
I am trying to create an animated asset for website similar to this gif but using adobe animate cc.
something like this;
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! 🙂
March 20, 2016 at 8:44 am
Adobe Animate should work with the plugin just fine. If you send me your FLA file I can take a look.
February 6, 2016 at 11:37 pm
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. 😉
February 7, 2016 at 8:55 am
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.