Flash CS5 exports weird FXG

FXG is cool. I’m using it extensively in skins for Logicly, the Flex 4 app I’ve been building recently. However, there are some oddities, mainly around Adobe’s tooling support for it. Honestly, the output I get when I export FXG for a FLA in Flash CS5 feels downright messy. It’s all valid, of course, but there doesn’t seem to be much intelligence in the exporter. Let me show you an example to explain.

Here’s the FXG gets exported for a rectangle I drew using the Rectangle Primitive Tool in Flash CS5:

<Path x="-272" y="-108" data="M315 109 315 151 273 151 273 109 315 109">
    <fill>
        <SolidColor color="#FFFFFF"/>
    </fill>
</Path>
<Path x="-272" y="-108" data="M315 109 315 151 273 151 273 109 315 109">
    <stroke>
        <SolidColorStroke weight="2"/>
    </stroke>
</Path>

Here’s what bothers me about the output:

  • There are separate Path elements, one with fill and one with stroke, but the position and data of those paths are exactly the same. You can define both fill and stroke on the same Path element, so why litter my code with extra stuff?

  • Speaking of Paths, why is it that anything I export becomes a Path? It doesn’t matter if I drew a rectangle or an ellipse (both of which are supported by FXG), I always get a path. Actually, I think Flash can add things to objects drawn with the primitive tools that FXG may not support, like the line style (solid, dashed, dotted, etc.) or an inner radius on an ellipse, so it kind of makes sense. However, it would be cool if the exporter could detect that <Rect/> or <Ellipse/> would be okay in some cases. Isn’t human readability the point of XML?

  • Notice the coordinates. This path gets positioned at -272, -108. Then, drawing starts at 315, 109. Nowhere in the FXG do we see the point 0, 0. Why doesn’t this get normalized? I can’t imagine anyone picking arbitrary points like that. I’d either set x=”0″ y=”0″ or I’d include that position somewhere in the path’s drawing coordinates.

That said, it’s important to note that I’m still using the exported FXG mostly as-is in my Flex skins. I remove some of the Groups created for layers and do some binding here and there, but the path data and positions stay exactly the same. It’s not like normalizing them manually would change the way they look, so I just don’t do it. With that in mind, I guess the things I wish were different aren’t that important, but I still can’t stop myself from frowning at the generated FXG every time I have to look at it.

About Josh Tynjala

Josh Tynjala is a frontend developer, open source contributor, bowler hat enthusiast, and karaoke addict. You might be familiar with his project, Feathers UI, an open source user interface library for Starling Framework that is included in the Adobe Gaming SDK.

Discussion

  1. Tink

    I have to agree the FXG that gets exported by Adobe tools really isn’t that readable at all.

    Exports from Illustrator also seems to turn everything into paths, Fireworks seems to be cleanest, but that said it still aint great.

    Ideally all paths would have an x and y position of where they are inside their container with the Path itself always starting at 0. This would make things much easier to move into skins.

    On a side note Rect does support rounded corners.

  3. Fintan

    it would be nice if the Flash fxg exported the scale nine info as values for scaleGridLeft, scaleGridRight, scaleGridTop and scaleGridBottom in a spark Group node. Is scale9 defined in FXG?

  5. ash

    How do FXG exports from Flash fit into a Flex 4 pipeline? Is it a lot of manual copy and paste into MXML skin classes?

  6. Josh Tynjala

    Yeah, it’s copy and paste. Basically, I export FXG for the whole document, do a text search for the symbol name that I want, and then copy the section I need. Unless a tool specifically exports Flex skins, that’s probably the only way you can do it. Personally, it doesn’t feel too cumbersome for my needs.

    That said, you might be able to export a specific symbol as FXG from Flash instead. I don’t think I tried. In that case, you can use the FXG file as a class in your Flex project’s skins. With a good JSFL, you could export individual symbols as FXG files and then it’s mostly automated.

  7. ash

    Thx. Given a few artists, copy ‘n paste is going to be very cumbersome with skins being constantly tweaked.

    I found some more info here

    Although one of the comments suggests “You can simply add the fxg file to a package in your flex project and then the builder will treat it like a component. you add it wherever you want that way without copying the markup.”

    I’m going to give that a try. Cheers!