FXG 2.0 - Hurrah!

Well, if we look back into what I’ve blogged about this past year, its been pretty paltry. Apologies, apologies. This is mostly because my work responsibilities grew two-fold because I became a lead on our team and I was one of the stakeholders getting the FXG 2.0 feature-set drafted and implemented. So, I’m SUPER SUPER excited to announce that the FXG 2.0 specification has been posted to the Flex Open Source site here. In the rest of this post, I explain what FXG is and what has changed between FXG 1.0 and FXG 2.0 - read on!

Whats FXG 2.0?

Well, in the CS 4 timeframe, FXG 1.0 was developed. This was essentially an interchange format for use between Adobe Creative Suite tools. Basically, you could design your little heart out in your design tool of choice (say, Adobe Illustrator or Adobe Flash Catalyst) and chose the “Save as FXG” option. What you drew on the stage would be converted into an XML-based interchange format (FXG) allowing you to open up that file in a different design tool and make edits. Basically, FXG enables a very powerful workflow where content can be imported and exported between different Adobe design tools.

FXG is essentially a subset of MXML. Because of that neat relationship, you can very easily take FXG and “promote” it to MXML Graphics. Remember, FXG and MXML Graphics are basically markup tags that encapsulate basic Flash Player drawing functionality. Tags like <Line>, <Ellipse>, <Path>, <Rect> can be instantiated and filled, stroked, blend moded, filtered, alpha’ed, transformed to your hearts content. Its very powerful! FXG and MXML Graphics are used through the Spark model - for example, all of the Spark component skins use MXML Graphics to define the visuals for the component.

Well, with the next generation of Creative Suite tools looming, we rev’ed FXG to include some cool new functionality, key bugfixes to improve fidelity between the different design tools, and address some usability issues. That was the birth of FXG 2.0, which you can read about in more technical detail here.

Whats New in FXG 2.0?

The primary function of FXG 2.0 was to make the fidelity between Adobe Creative Suite tools better. This included some new functionality as well as critical bugfixes. With these changes came some new tags and attributes as well as changes to existing tags and attributes. Below, I enumerate some of the larger differences between FXG 1.0 and FXG 2.0.

Additional blend modes:

FXG 1.0 exposed blend modes settable on Groups and all graphic elements. These blend modes were those native to Flash like layer, multiply, overlay, etc. Well, in Adobe Creative Suite tools like Adobe Illustrator and Adobe Photoshop, in addition to those blend modes native to Flash, there are other options available to designers. Blend modes like color, colordodge, luminosity, hue, etc. We expanded the notion of blend modes in FXG 2.0 to include these oft-used blend modes. Under the covers in Flex, we do a neat trick to mimic the visuals of these blend modes (since they are not native to Flash). We use pixel bender filters to apply blend shaders to the graphic element which has a non-native blend mode specified on it. These changes are currently checked into trunk so you can see it in action there.

Additional masking option:

Similar to how Adobe Creative Suite tools have blend modes that are different from what Flash offers, tools like Adobe Illustrator and Adobe Photoshop expose a third type of masking apart from the usual clip and alpha masking (which Flash does support). This third masking mode is called luminosity masking (sometimes referred to as soft masking). This is a type of mask where the source content’s alpha value as well as color RGB value is taken into account with the masking object’s alpha and color RGB value when determining the color and alpha of the masked pixel. In FXG 2.0, we extended the masking types available on Group and graphic elements to include luminosity masking in addition to the clip and alpha masking options FXG 1.0 provided. Like you may have guessed, a pixel bender filter is used to mimic the visual appearance of a luminosity mask when rendered in the Flash world. Pretty neat-o use of pixel bender filters, huh?

Existing tag/attribute changes:

In order to get better coordination between FXG and MXML Graphics, some tags were renamed. In FXG 1.0, the <TextGraphic> tag was the main text tag outputted by tools. This tag was renamed in 2.0 to <RichText> to match the RichText element in MXML Graphics. Similarly, in FXG 1.0, the graphic element for displaying bitmap data was <BitmapGraphic>. In FXG 2.0, this tag was renamed to <BitmapImage> to better match MXML Graphics.

Additionally, the scope of the <RichText> tag was expanded to include several new child tags like <a>, <img>, <div>, <br>, <tcy>, <tab>, <span>. Also, new attributes were added to <RichText> like: dominantBaseline, tabStops, leadingModel, ligature, textRotation, trackingLeft, trackingRight and a ton more. AND, as if thats not enough, new enumerations were added to existing text attributes to take advantage of the new and improved text engine in the Flash Player to allow for better control of text.

Other attributes were renamed to have more user-friendly names while new attributes were added. One that pops to mind is BitmapImage.fillMode and BitmapFill.fillMode. The fillMode attribute lets you control how the bitmap data is drawn within the coordinate space of a BitmapImage element or a BitmapFill fill. You can chose to scale the bitmap data to fill the dimensions of the BitmapFill or BitmapImage (this is the default setting), have the bitmap data be repeated within the allowed space, or have the bitmap data draw at its natural size.

Similarly, several attributes had their default values changed, mainly to correct inaccuracies during the FXG 1.0 timeframe while other attributes gained new enumeration values to allow for more expressiveness.

FXG Optimizations

What I wrote above sums up some of the larger changes in FXG 2.0. One thing the Flex team spent a LOT of time on, was to optimize FXG (and thus MXML Graphics) to be as speedy and small as possible. Several engineers across the team implemented some very clever optimizations like display object sharing (graphic elements draw into their parent Group or sibling graphic element whenever possible in order to reduce the number of display objects on the display list at any time).

Another cool optimization is called FXG Compile-Time Optimization which Peter Farland worked on from the Flex side (it was a joint coordination with another internal team at Adobe). This is an optimization scheme which takes advantage of the fact that a lot of FXG content is simply static assets that do not need to be updatd or re-rendered at runtime. In cases like that, you could imagine that instead of creating ActionScript objects to represent those graphic elements, the Flex compiler could instead create SWF graphic primitive tags to draw the static FXG asset. Thats exactly what we did, and there are options in the Flex SDK as well as Adobe Flash Catalyst to use compile-time optimization to optimize and compress chunks of FXG content.

This roundup of the changes between FXG 1.0 to FXG 2.0 is really just the tip of the iceberg. Countless man-hours across several teams were used to investigate, clarify and re-write the FXG spec and schema as well as really understand how the Flash Player renders vector content - not to mention the development time on code libraries to actually translate design tool files into FXG markup for import and export across the Adobe design tools. So go forth people! Use FXG to create stuff that will amaze us!