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.

Friday, August 9, 2013

Resolving IntelliJ Resource Bundle Inspection Errors in Flex Projects

Since switching from FlashBuilder to IntelliJ IDEA (which I’m loving so far) I sometimes come across things that need tweaked a bit. One such thing is inspection errors in the SDK source files where resource bundles are used. Inspection errors don’t necessarily mean that the code won’t compile (although many times it does mean that) but that the IDE can’t make sense of it. In the case of resource bundles, IntelliJ looks for them within source directories, even though they don’t need to exist in source directories to be compiled into the application. Because of this, you often get ugly red marks in your editor when viewing SDK source code.


The easy way to remove these inspection errors is to add an SDK classpath pointing to the bundles directory in the Project Structure / SDKs window. In my case, I needed to add a classpath to:
D:\Projects\Flex SDKs\4.10 - AIR 3.8\frameworks\projects\frameworks\bundles