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:
| 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.
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.
Thanks for the reply. I used the current timeline option and it was succesful. -Jeremy
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’.
Oh, excuse my stupidity… I used “export SVG” in Commands menu instead of the panel.
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).
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.
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..
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?
I think you might be using the wrong menu option.
Use File > Scripts > MultiExporter
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.
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).
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.
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).
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.
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.
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.
Good to hear it’s helped.
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.
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.
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.
sorry but it has the error
at line 87 of file Export_SVG.jsfl Type Error: this.file has no properties
thanks for help!
If you send me the flash file I can take a look.
Hey Luc,
If you are using the command try with the panel instead, the command isn’t supported any more.
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
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
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?
This extension really helps me a lot. A great work. It worked perfectly on my Flash CS6 Professional
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…
You need to use a JS workaround for IE, check out my SMIL test page post for an example and a little more info.
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).
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.
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.
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.
Miraculous! I’m so greatful.. you can’t imagine!!
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.
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:
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?
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.
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.
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).
thank you for the extension
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:
Or if that makes no sense:
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.
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?
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.
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.
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.
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! 🙂
Adobe Animate should work with the plugin just fine. If you send me your FLA file I can take a look.
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
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()
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:
http://tbyrne.org/portfolio/smil/beginElement.html
thanks Tom, work perfectly!
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
Yeah, no problem, send it over and I’ll see what’s wrong.
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:
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.
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
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.
Thanx! Unfortunately I still can’t get it installed. ZXP installer notes: “Installation failed because the extension is not compatible with the installed application”.
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!
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
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.
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?
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?
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”.
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!
Hey guys,
This issue has been fixed in v3.51.
Give the latest version a try:
https://github.com/TomByrne/Flash2Svg/releases
It works perfectly now, thank you very much!
Thanks Tom! When will the update be available on Adobe Add-ons?
It has been submitted to Adobe.
It usually takes 2 – 3 weeks.
Hi Tom,
The update is still not available on Adobes ad-ons? Do you know if there is a problem with Adobe?
Cheers!
hey Basil, check again now, v3.52 was approved in the last 24hrs.
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
Sorry, the last version that supports CS5/CS6 is v3.37.
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,
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!
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
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!
I get this error when I try to export any idea what this means?
TypeError: svgXml.defs[0] has no properties
SVG Export Failed
Hi Adrian,
Are you running CS6 or CC?
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
Hi Pratik,
If you send me your FLA I can take a look.
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
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.
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?
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
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!
Actually, just realized that the SVG animation is pausing in Safari browser both desktop and mobile.
Anyone have a solve for this?
Thanks again!
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.
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.
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
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.
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!