back

Understanding FXG, a primer on Adobe's new graphics file format

by James Polanco

Now that Adobe has released the public betas of Flash Catalyst and Flash Builder, you are probably hearing and seeing more about the new graphics file format, FXG.

So what is FXG and why is it important to Flash Catalyst, Flash Builder, Flex 4, Flash Professional and Creative Suite users? In this article, we will explore the FXG file format, and discuss MXML Graphics and how it lead to the development of FXG; and then examine how FXG and MXML Graphics are leveraged within the new Flash Platform design and development paradigm.

What are MXML Graphics and FXG?

MXML Graphics and FXG are file formats that contain an XML-based declarative layout language that describes complex vector and bitmap based artwork. In simpler terms, FXG is a way to describe artwork such as shapes, lines, gradients, layers, blurs, drop shadows, etc. in an easy to read text-based format.

One of the major challenges Flash Platform designers and developers face is the process of skinning and stylizing the look of a Flash based application to meet the designer's needs. A core issue that needed to be solved first was to move the drawing ability of Flash out of the ActionScript-only world and into an XML-based language.

The best way to discuss this is with a simple example. Let's look at the old way of drawing in Flash (and Flex).  In this example I want to create a basic 200 × 50 linear gradient that goes from black to white (see Figure 1). The ActionScript code to draw this gradient would look like this:

var g:Graphics = this.graphics;
var fill:LinearGradient = new LinearGradient();
var g1:GradientEntry = new GradientEntry(0xFFFFFF, 0, 1);
var g2:GradientEntry = new GradientEntry(0x000000, 1, 1);
fill.entries = [g1,g2];
fill.rotation = 90;
fill.begin(g, new Rectangle(0,0,200,50));
g.drawRect(0,0,200,50);
fill.end(g);
A basic 200x50-pixel linear gradient.

Figure 1. A basic 200 × 50-pixel linear gradient.

Not very pretty, is it? Not only is it hard to understand for a non-ActionScript developer, it's nearly impossible for a tool, such as Flash Catalyst, to understand and interpret this as a rectangle on screen. Thus, the first step towards FXG was the introduction of the MXML Graphics syntax in Flex 4.

MXML Graphics solves this problem by exposing the Flash Player drawing API as a series of MXML tags. We would draw the same box in MXML Graphics as:

<Group>
    <Rect x="0" y="0" width="200" height="50">
        <fill>
            <LinearGradient x="0" y="0" rotation="90">
                <entries>
                    <GradientEntry color="#FFFFFF" ratio="0" alpha="1" />
                    <GradientEntry color="#000000" ratio="1" alpha="1" />
                </entries>
            </LinearGradient>
        </fill>
    </Rect>
</Group>

This syntax is much easier to read, provides a clear parent/child hierarchy that the tools can easily parse, and it doesn't't have to be buried deep in the core of the Flex component code or your ActionScript.

MXML Graphics not only exposes the basic drawing API, such as rectangles, ellipses, fills and lines, you also can access filter effects to create blurs and glows. You have the ability to have bitmap assets as children of the group and define its location, scale, z-depth, etc. In Flex, you can bind to ids, apply transitions and effects to the MXML Graphics content and treat it as would any first class MXML tag. It's a very powerful and exciting addition to the MXML language.

So how does MXML Graphics relate to FXG? Well, all FXG does is wrap the MXML Graphics syntax in a header tag and enables the graphic description text to live in a stand-alone external file. For example, if I was to create the same graphic in Fireworks CS4 and export it, the generated FXG file looks like this:

<?xml version="1.0" encoding="UTF-8"?>
<Graphic version="1.0" xmlns="http://ns.adobe.com/fxg/2008" xmlns:fw="http://ns.adobe.com/fxg/2008/fireworks" viewHeight= "50" viewWidth= "200">
    <Library>
    </Library>

    <Group id="Page_1" fw:type="page">
        <Group id="State_1" fw:type="state">
            <Group id="Layer_1" fw:type="layer">
                <Rect x="0" y="0" width="200" height="50" blendMode="normal">
                    <fill>
                        <LinearGradient x = "166" y = "61" scaleX = "47" rotation = "90">
                            <GradientEntry color="#ffffff" ratio="0" alpha="1"/>
                            <GradientEntry color="#000000" ratio="1" alpha="1"/>
                        </LinearGradient>
                    </fill>
                </Rect>
            </Group>
        </Group>
    </Group>
</Graphic>

At the middle of the file, it's exactly the same as our MXML Graphics example, with just some interesting wrapper group tags and a header tag. Notice that the root <Graphic> tag has a namespace called ‘fw' that links to Fireworks. This is an important aspect that separates FXG from MXML Graphics. By enabling the ability to tag the source-generating tool we can start creating some interesting abilities, such as content transport.

Using FXG as a Transport Layer

Now that we have briefly explored what MXML Graphics and FXG is, you might be wondering "How do I use FXG outside of a Flex application?" One of the coolest workflow that is featured in the Flash Catalyst beta is the ability to round-trip content from Flash Catalyst to Adobe Illustrator CS4 and then back to Flash Catalyst. To enable this ability, FXG is used as the transport protocol between the applications.

Catalyst takes the selected content, which is represented in either MXML Graphics or FXG, converts it to FXG (if needed), and then sends the FXG content to Illustrator.  Flash Catalyst marks up the FXG to define layers, states, etc., so that Illustrator can show this in its layers panel.

Now that you have the content in Illustrator you can add layers, change content, move things around and then send it back to Catalyst. This is done automatically by taking your changes, converting them back to FXG and sending the FXG data to Flash Catalyst, which then takes the FXG and applies it to your project. It's very, very powerful and really nifty.

All this FXG work is done behind the scene, so you more or less don't see it in action. In Illustrator you will see the FXG export dialog when you are sending your content back to Catalyst. This dialog allows you to tweak the default settings of the exported FXG if you desire. In 99.9% of the cases, the default is just fine but Adobe wants to make sure that you have as much control over the generated FXG data as possible.

Beyond tooling

FXG isn't just for tooling; you can use it as an export file type directly inside Adobe Flash. Ryan Stewart made an excellent video example of using FXG directly inside a Flex 4 application. In the video he treats the FXG file as you would any other asset file. We recommend taking a few minutes to watch his demo to see some more possibilities with FXG.

Right now, Adobe Photoshop CS4, Adobe Illustrator CS4, Adobe Fireworks CS4, Flash Catalyst, Flash Builder, and Flex 4 are the only tools that currently support FXG. This is a brand new format, one that we expect to see much broader and deeper support in the near future. In fact, the FXG specification was just updated from 1.0 to 1.1. As we get closer to the official launch of Flex 4, Flash Builder and Flash Catalyst you will hear more about FXG and its features. It's a great addition to Flash Platform and the Creative Suite tools, one that has the ability to help define and revolutionize how we work as a team when designing and developing our applications.

For more information about what FXG and Flex 4 can do for you, I recommend that you watch the Flash Camp demo videos and the Flex 4 Component re-architecture videos on Adobe Labs.

‹ Back


James Polanco is the co-founder of DevelopmentArc, a boutique consulting firm that specializes in web application and user interaction front-end development. James specializes in application development and has provided system architecture and code development on projects such as Scion.com, Toyota.com, and Adobe® kuler Desktop. James was also a Senior QE Team Lead on the Adobe® Flex® Builder™ team focusing on ActionScript® 3.0 development harnesses and automated testing systems.