Archive for October, 2010

Optimizing FXG

FXG is a popular declarative XML syntax for defining vector graphics in applications built with Flex. FXG can also be used as an interchange format with other Adobe tools such as Illustrator or Photoshop. Here are some techniques for improving the quality of your FXG graphics and making working with FXG easier.

Composite path versus rounded rectangle
Composite paths create a cleaner look because there are no extra pixels inside the corners. Rounded rectangles, on the other hand, have extra pixels due to anti-aliasing. Rounded rectangles convert to a <Rect> element in FXG, which is preferable because a <Rect> element is easier to manipulate than a compex path.

Move alpha values from the element to the fill or stroke
When exporting FXG files from a graphics editor, the alpha property is sometimes placed on the graphic element tag. If you convert the FXG to MXML, this element uses its own DisplayObject, which can be computationally expensive. To avoid this, move any alpha properties from the element tag down to the stroke or fill. If both the stroke/fill and the element have alpha values, multiply the stroke and fill alpha values by the element’s alpha value. For example, if the stroke and element alpha values are both .5, then remove the element’s alpha property and set the stroke’s alpha to .25 (.5 x .5).

Round alpha values to 2 decimal places
Exported FXG files sometimes use percentage values for alpha values. The visual difference between an alpha value with two decimal places and a rounded alpha value is negligible. To make your code more readable, round off alpha values to 2 decimal places. For example, round an alpha value of 0.05882352941176471 to 0.06.

Remove blendMode=”normal”
By default on graphic elements, the blendMode is “auto”. When the blendMode property is “auto”, Flash Player correctly determines whether the element needs to use the “layer” blendMode based on the alpha value.

Identifying elements of an FXG file
Sometimes it can be hard to look at FXG tags and determine what that element looks like. An easy way to do this is to copy your FXG into a <s:Group> tag in an MXML application. Then, change the x values of each element so that they no longer overlap. For example, if your skin is 45 pixels wide and is comprised of three <Rect> elements, increase the x value of the second <Rect> by 50 and the third <Rect> by 100. When you compile and run the application, you can see each layer spread separately.
An alternative is to toggle the visible property of different elements so that you can isolate a particular element.

Reduce anti-aliasing due to stage quality
AIR applications are currently limited to using StageQuality.MEDIUM. When designing skins using FXG and/or programmatic graphics, watch for anti-aliasing artifacts in rounded corners.

To create the appearance of a rounded rectangle at a 1px stroke in Fireworks:

  1. Draw a filled rounded rectangle.
  2. Copy the rectangle, position it 1px down and to the left of the original rectangle and reduce its width and height by 2px.
  3. Select both rectangles, right click and choose Combine Path > Punch.

Use 45 degree angles
Try to keep all angles at 45 degrees. This helps to reduce the visual artifacts from anti-aliasing.

For more information
For more information on using FXG in your Flex applications, see Using FXG.