My FLA to SVG conversion tool: first preview

3 min read

Deviation Actions

SasQ's avatar
By
Published:
9.9K Views

As some of you might have heard, I'm working on a tool to extract vector data from Adobe Flash's FLA files into some more convenient and open format, such as SVG, to be able to use them with some more free & convenient vector image editing tools, such as Inkscape and Synfig Studio.

Since some of my tool already works, I decided to show it to y'all.

So how does it work?
The trick is that since around CS5, .fla files are just compressed files with the directory structure of your whole project stored inside as plain text files in an XML-based proprietary format, XFL. Each symbol from the library is stored in a separate XFL file. I can extract these files and parse them to get the vector data out of them and convert these data to SVG shapes.

Where's the tool?
Take a look at my GitHub repository where I will maintain the sources of my program:
github.com/SasQ/SavageFlask

It is written in Ruby programming language, so you need Ruby interpreter (free) to run it, and the libxml gem, because I use this library in my script to parse XML.

So far, my script is already capable of extracting some shapes from these XFL files correctly. There are several sample XFL files in the TestData directory and a sample SVG image merged from the outputs of my program (some parts of the Twilight Sparkle's puppet from the "Double Rainboom" project). Or you can see that SVG sample here too. So you can see that it really works  :-)

Documentation
You can also take a look at the documentation here:
github.com/SasQ/SavageFlask/tr…

There is a text file documenting the structure of those XFL files and what elements you can find there. There's also a picture explaining how Flash stores the edges, because this is probably the most trickiest part of the whole problem: the edges are shared to save space (which is kinda stupid, since it is wasted elsewhere), by storing each edge between two filled regions separately. I had to figure out how to find all closed contours and join together in the correct order to be able to display them as SVG shapes.

Currently I'm working on parsing different fill styles and stroke styles (such as gradients etc.), and when I finish it, the next stage will be to automate the whole process to parse more XFL files at once and restore the symbols' correct positions (matrix transforms etc.). So, as you can see, the work is in progress ;-) Stay tuned.

I still don't know how should I deal with animations though :-/ For starters, I could perhaps export only the first frames for each animated symbol, but this won't work in the long run. I need to find some way to export animations too. I thought of exporting all frames as hidden layers maybe, or allowing the user to specify which frames he/she would like to turn on as visible (maybe in some simple config file). Maybe do you have some better idea?
© 2013 - 2024 SasQ
Comments2
Join the community to add your comment. Already a deviant? Log In

I'm kinda confused on how to run this