Friday, August 16, 2013

Using Inkscape to generate FXG from Illustrator CC

When building Flex applications, I often use Illustrator to prototype and design parts (if not all) of it, and therefore, make use of Illustrator’s FXG export quite a bit. If you’ve upgraded to Illustrator CC, you may have noticed that FXG (both import and export) are no longer available. From what I’ve read, it’s also missing from Flash Professional CC (and I’m assuming Photoshop CC too).
This, obviously, has broken my workflow and has made designing Flex/AIR apps much more difficult for me (something Adobe has a great track record of lately). But rather than going on a rant, I thought I’d investigate some alternatives. The most obvious alternative is to downgrade to Illustrator CS6, but I wanted to see if there were any ways to generate FXG from documents created in Illustrator CC.

When searching the interwebs, a couple users suggested copying the content to Fireworks CS6 and exporting to FXG from Fireworks. I've never been a Fireworks user, and so I did a bit of research on that workflow before attempting the download and install, only to find other reports of Illustrator CC content can no longer be copied to Fireworks. Some people reported that Illustrator CC content can be copied to Photoshop CC, and then copied from Photoshop CC to Fireworks CS6, but that a lot of vector data was lost and converted to bitmap data somewhere in the process. With this information at hand, I decided to not waste my time testing it out for myself. If anyone else has had success with these workflows, please let me know!

I then came upon an open source vector application called Inkscape that has the ability to export to FXG. I’ve heard of this application in the past (I think it may have some popularity in Linux environments) but have never looked at it until now.

As an Illustrator user, when running the program for the first time, I could definitely tell that it would be a downgrade from Illustrator and probably not something I’d want to switch to for my day to day work (reminds me a lot trying to use Gimp as an experience Photoshop user). Nevertheless, I was strictly interested in it’s abilities to export FXG (and open my Illustrator CC files for FXG exportation).

The current stable version of Inkscape, at the time of this writing, is 0.48, and the FXG save option was nowhere to be found. After investigating further, I found the FXG option to be in later development versions, and found it in the bleeding edge version here. The download site is in German, so Google translate might be of some help.

After seeing the AI option available in the open dialog, and the FXG option available in the Save dialog I first tested the ability to open some of my CC created AI files. The first thing I noticed (which was not all that obvious) was that it could only open Postscript-based .ai files. This was easy to accomplish by opening my content in Illustrator and resaving with the “Create PDF Compatible File” option turned on in the save dialog. For simple things, Inkscape opened and exported to FXG flawlessly. In fact, the FXG it generated appeared to be better optimized than what I remember Illustrator CS6 producing. Even better was the fact that it generated FXG without all the namespace junk that Illustrator injected… and required you to remove before using in your Flex application. In other words, I was able to use the Inkscape-generated FXG file, without any modifications, directly in Flex. This, alone, would speed up my workflow even when adding in the extra time it takes to bring my content into Inkscape to be saved as FXG.

I was then curious as to how well it could handle very complex Illustrator files. I decided to do some tests using some Illustrator source files from the Illustrator Showcase in the “how-to” section. The first few files I tried ended up being a bit too complex for Inkscape to handle… either crashing the program when trying to open them, or crashing when trying to save as FXG. I didn’t see this as big issue, for these are much more complex then anything I’d ever put in a Flex skin file.

I then tried out the fourth (much simpler) example. This one was only a 2MB source file compared to the first three that ranged from 19 to 100MB .ai source files, but was still much more complex than any FXG skin I would ever put in a Flex app. That test worked pretty well. The results of the compiled FXG in the Flex app can be seen here. The only noticeable changes I could detect was the vertical gradient being changed to a horizontal gradient, and some of the text at the bottom is garbled. I also had to remove a line of FXG that appeared to fill a rect with a bitmap that was imbedded in the FXG file, and preventing it from compiling.

All in all, I was very satisfied with the results and willing to incorporate Inkscape into my new workflow.

4 comments:

  1. Thanks for sharing your experience.

    ReplyDelete
  2. I found this information very helpful the other day. Thanks for sharing!

    ReplyDelete
    Replies
    1. Hey Matt, I've since found a couple of problems with Inkscape.

      1) Illustrator artwork, when opened in Inkscape, isn't scaled perfectly. It's always a bit larger. Not by much, so usually unnoticeable. But it becomes more apparent with small things, such as icons being a few pixels bigger than how it was designed. This problem ends up in the exported FXG as well. One could either add width/height properties to the FXG class to correct it (which would be a pain to do every time) or correcting the size in Inkscape before exporting would probably be better.

      2) Transparency isn't always handled correctly. Some elements with an alpha value in Illustrator get translated correctly when brought into Inkscape, but those alpha values get lost when exporting to FXG.

      Because of these two issues, I've changed my workflow, again, which doesn't include Inkscape. What I do now is save my Illustrator CC designs with Illustrator CS6 compatibility, then open it up in Fireworks CS6 and export to FXG. Fireworks CS6 cannot open Illustrator CC files, so saving with CS6 compatibility is important.

      So far I've found no issues with this workflow. Scaling and transparency come out perfect with Firework's FXG export. And much like Inkscape, the resulting FXG is ready to be used without having to remove all the additional namespace junk that Illustrator CS6 used to inject. And as a bonus, I've found that Firework's FXG is much more optimized... about 1/3 to 1/2 the amount of code that Inkscape creates.

      Delete
  3. Use this online tool to quickly convert your exported SWF to SVG. Then you can open the SVG in illustrator http://flash2ai.com/

    ReplyDelete