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!
You broke the site with such a huge spec!
(And overuse of !!! is a sign you need to get some sleep!)
Thanks for the wonderful article on the Performance testing of Flex application.
We have a web application that is structured with Caringorm micro architecture to achieve the MVC pattern in Flex.
We are seeing some performance issues in this application and are in the process of evaluating a load testing to support this.
In your article I noticed that you had suggested to first load test each of the data services independent of Flex proxies from a web service or an XML feed to gau ge the maximum number of requests per second that it can sustain, can you please suggest how this can be achieved and explain more in this regard?
The second test you had suggested to run the same test through proxy, does it mean that you do this load test as you would do for any other application from the url the end users access?
I am very new to load testing on flex application, any suggestion to help the load testing process will be greatly appreciated.
Hi there, good to here about FXG 2.
What i am currently running into is drawing FXG primtives into HGroup and VGroups. Why is that not possible?
Best reagrds!
Hi Florian, that should work, Groups can contain MXML graphic elements. What problem/error are you seeing?
Hi Deepa, thanx for the fast reply. I also posted at yahoo’s flex coders group. In my example i used a constraint based layout to draw a Rect in a VGroup (and a Group with a layout applied). The rect would disappear when a layout is applied. Using width and height values makes it work.
I guess what i didn’t understand, but i hope i do now, is that the IGraphicElements are applied to the layout. That is a slightly different approach that the Degrafa framework uses. am i right.
But a second question is bugging me at the moment – not topic related though. When content is added, the contentWidth and contentHeight property changes. Setting the clipContentAdEnableScrolling property to true, i would expect the content not to be resized. When the content’s dimensions are not changing, i would also expect the contentWidth/contentHeight properties to be as big as the content’s dimensions. I am currently running into the issue of loosing the contentHeight and in a another component the horizontalScrollPosition as well.
Whew… that was a lot. I would be really thankful if you could clearify that. Other people might be interested in that post perhaps as well 🙂
Oh, and a happy new year 🙂
Hi Deepa.
Seeing all the amount of efforts been made regarding FXG, I really regret writing what comes next. But, I’ll write it anyway.
Couple of links first:
http://www.swfmill.org
http://code.google.com/p/hxswfml/
http://www.mindless-labs.com/trac/samhaxe/
I think you would be aware of these by now, but, in case you are not, here’s a short note: These all are the projects, which allow you to create Flash graphics (and some other assets). They may not have so many features as FXG, may not be a state of the art code etc. But all of them have one HUGE advantage over FXG – they don’t require any additional classes to be embedded into your SWF along with the Flash graphics which they generate.
Now, here’s my experience of trying FXG:
In the company where I worked until a month ago they were making Flash ads. The process is automated – the SWF is compiled from XML template, the customer supply their data, then, based on the data we create an ad.
I’ve tried many things, including some minor patches to MXMLC, but I couldn’t get the “bare” SWF size which used only an empty Group below 20K. After all my efforts we had to decide to not use FXG for what we do.
The optimizations someone made on display performance involved quite large subset of spark.* classes, it is also impossible to strip of binding classes even if no bindings were used. The compiler is quite a beast and removing unnecessary imports and bindings proved to be a very complex task 🙁
Could I hope, that the next generation of FXG will not make dependencies to the Flex framework? Sadly, this was a complete showstopper for us.
Best.
wvxvw
Hello maam,
Kindly guide me to use object handles in flex 4. I need them to cropp and rotate the image.