Flash® Builder™ 4 and Flex® 4 Bible

Chapter 14. Declaring Graphics with MXML and FXG

IN THIS CHAPTER

• Understanding FXG

• Declaring vector graphics in MXML

• Using ActionScript primitive graphics

• Adding visual effects to MXML graphics

• Creating FXG files in Illustrator and Photoshop

• Working with FXG files in Flex applications

One of the Flex 4 SDK most important features is the capability to redefine the appearance of visual controls with programmatic skins.

The concept of skinning, or programming a component's visual appearance, isn't new to Flex. In past versions, you could create your own skin as an ActionScript class. By overriding certain methods that are called at runtime from the Flex framework and using the Flash drawing application programming interface (API) to declare vector graphics, you could essentially create an entire visual presentation without ever using graphical applications like Adobe Photoshop and Illustrator.

This strategy, however, was slow and cumbersome. And, because the graphical applications I've mentioned couldn't interpret the ActionScript code and preview its results, you just had to use your imagination (and a lot of graph paper) to figure out how to code the image you wanted to create.

Adobe Systems introduced the FXG language to help solve this programming challenge. FXG, which stands for Flash XML Graphics, is an XML-based graphics interchange file format that describes low-level vector graphics, with specific attention paid to how Flash Player renders graphics.

In Flex 4, you can declare FXG graphics ...