When you use FXG in your Flex application, the compiler
optimizes the document into a subclass of the spark.core.SpriteVisualElement
class. Specifically, the compiler maps the FXG elements to SWF graphic
primitive tags and links only a light-weight, Sprite-based class
into your application.
The SpriteVisualElement class extends InteractiveObject. Therefore,
an FXG component has some of the interactivity supported by InteractiveObject
such as support for sizing, positioning, and alpha when used in
an application built with Flex.
To use FXG as a component in an application built with Flex:
Store the FXG document in a location where the compiler
can find it. This can be in the same directory as the application,
or in a separate location. If you store it in a separate location,
you might have to add the location to the compiler’s source path.
Declare a namespace for the component. For example, if the
FXG file is in the same directory as the main application that uses
it, you can declare a namespace of “*”. If the FXG file is in a
directory called comps, you can declare a namespace of “comps.*”.
Add a tag in your application that declares the component
inside a Spark container (you cannot have a Halo container as a
direct parent of an FXG-based component). You can set DisplayObject
properties on the tag, such as x and y, alpha, height and width.
You can also add event handlers that are supported by the SpriteVisualElement
class on the tag.
The following example creates multiple instances of the star.fxg
component, and sets properties on each of those instances:
The executing SWF file for the previous example is shown below:
The following is the FXG component that is used by the previous
example:
<?xml version='1.0' encoding='UTF-8'?>
<!-- fxg/star.fxg -->
<fxg:Graphic xmlns:fxg="http://ns.adobe.com/fxg/2008" version="1">
<fxg:Path x="9.399" y="10.049" data="M 82.016 78.257 L 51.895 69.533 L 27.617 89.351 L 26.621 58.058 L 0.231 41.132 L 29.749 30.52 L 37.714 0.241 L 56.944 24.978 L 88.261 23.181 L 70.631 49.083 Z">
<fxg:fill>
<fxg:SolidColor color="#FFFFFF"/>
</fxg:fill>
<fxg:stroke>
<fxg:SolidColorStroke caps="none" color="#4769C4" joints="miter" miterLimit="4" weight="20"/>
</fxg:stroke>
</fxg:Path>
</fxg:Graphic>
FXG documents use only the *.fxg filename suffix. In addition,
you cannot have another file of the same name with an *.mxml suffix
in the same directory.
You can use ActionScript to instantiate an FXG component. When
you do this, you declare the FXG element to be of type SpriteVisualElement.
You also add the component to the display list by calling the addElement() method,
as the following example shows:
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/OptimizedFXGActionScriptExample.mxml -->
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/halo"
xmlns:s="library://ns.adobe.com/flex/spark"
width="500" height="300"
creationComplete="drawStar()">
<fx:Script>
<![CDATA[
import spark.core.SpriteVisualElement;
private var myStar:SpriteVisualElement;
private function drawStar():void {
// Create new instances of star.fxg as if it were a local component.
for (var i:int = 0; i<4; i++) {
myStar = new star();
myStar.x = 50 + (i*75);
myStar.y = 50;
myStar.height = 100 - (i*30);
myStar.width = 100 - (i*30);
myStar.alpha = 1 - (i*.2);
myStar.rotationX = 20 + (i*20);
addElement(myStar);
}
}
]]>
</fx:Script>
</s:Application>
The executing SWF file for the previous example is shown below:
Generating FXG
When you export a graphic file from a tool such as Adobe
Illustrator in the FXG format, Illustrator writes a *.fxg file with
a root tag of <Graphic>.
When using generated FXG, you can ignore the information in the <Private> code block,
as long as you also leave the namespace declaration for the namespace
that is used in that block. The Flex compiler checks the <Private> block
for validity, but does not attempt to render any information in
that block.
You can optionally remove the <Private> tag and its contents
from the FXG document. Some tools export FXG with additional syntax
so that the file can be re-edited. An FXG document exported from
Illustrator, for example, includes a <Private> block of code
that is used by Illustrator if you want to edit the file again. If
you do not expect to edit the file in Illustrator again, then you
can remove the <Private> block.
Converting FXG elements to MXML graphics
You can convert an FXG document to MXML graphics.
One disadvantage to using FXG is that you cannot get a reference
to individual elements in the FXG document from the application.
The FXG component itself is a “black box”; you cannot interact with
individual elements from your application or other components. You
can, however, still apply effects, use masks, resize, position,
and trigger events from interaction with the FXG component itself.
By converting FXG elements to MXML grpahics, you can get a reference
to the various elements in the FXG, just as you can with any other
MXML graphics tags. This is useful if you want to apply special
effects or events to the FXG elements.
When you use FXG elements inline, you must remove the FXG namespace
in the same document as the MXML language namespace (http://ns.adobe.com/mxml/2009).
There can be only one language namespace per document.
To convert an FXG document to MXML graphics, you typically copy
and paste the <Graphic> block and its contents
from a generated FXG file into your application. You remove the
namespace declarations from the <Graphic> block and integrate them
with your application’s namespace declarations.
Use the following general guidelines when converting FXG to MXML
graphics:
If the FXG file uses symbols or assets defined
in its <Library> element, you must move those definitions
to your application’s <fx:Library> block.
This must be a child of the application’s root tag.
If the FXG document uses namespaces other than those in the
application, you must add those namespace declarations. For example,
an FXG file exported from Adobe Illustrator includes the following
namespaces:
You should include those namespaces in your application if
any portion of the FXG fragment you use in the FXG includes elements
from those namespaces.
You cannot include the FXG language namespace (http://ns.adobe.com/fxg/2008)
in your application. The elements in this namespace are mapped to
elements in the default Flex namespace. For example, if you use
a <SolidColorStroke> element in your FXG
block, then it is converted to a SolidColorStroke class in your
application at compile time.
There are two notable exceptions to the mapping of FXG elements
to Flex classes. The <TextGraphic> element
maps to the RichText class, and the <BitmapGraphic> element
maps to the BitmapImage class. If you want to convert FXG to MXML graphics,
you must manually change the names of these tags.
