FXG and MXML graphics
-
FXG
-
MXML graphics
FXG is a declarative syntax for defining static graphics. You typically use an Adobe® graphics tool to export an FXG document, and then use the FXG document as an optimized component in your application. FXG graphics are used by the mobile skin classes because they are so lightweight.
MXML graphics, on the other hand, are a collection of classes that you use to define interactive graphics. You can add interactivity to MXML graphics code because they use classes in the Flex SDK that are subclasses of GraphicElement. The result is not as optimized as FXG.
-
Graphics and text primitives
-
Fills, strokes, gradients, and bitmaps
-
Support for effects such as filters, masks, alphas, transforms, and blend modes
FXG and MXML graphics share very similar syntax. For example, in FXG, you can define a rectangle with the <Rect> tag. In MXML graphics, you use the <s:Rect> tag. Most FXG elements have MXML graphics equivalents, although the attributes supported on FXG elements are only a subset of those supported on MXML graphics tags.
The amount of interactivity when using FXG and MXML graphics is different. If you use MXML graphics, the tags are mapped to their backing ActionScript implementations during compilation. You can reference the MXML graphic elements and have greater control over them in your code. If you use FXG, then you cannot reference instances of objects within the FXG document from the application or other components. In addition, you cannot add MXML code to it, nor can you add ActionScript.
FXG and MXML graphics do not share the same namespace. MXML graphics use the MXML namespace of the containing document. In most cases, this is the Spark namespace. An FXG document uses its own namespace.
You cannot use fragments of FXG syntax in an MXML file. You must either use the FXG document as a separate component or convert the code to MXML graphics syntax.
You can also draw with the ActionScript drawing APIs.
Graphics classes and elements
FXG and MXML graphics share a very similar syntax. The FXG language includes a set of elements that are defined in the FXG 2.0 specification. MXML graphics include tags that are defined in the MXML language. FXG can be thought of as a subset of the MXML graphics tags.
MXML graphics tags are converted to their backing ActionScript implementations by the MXML compiler. Most FXG tags, on the other hand, are converted to low-level Flash Player instructions when compiled. It is this difference that make FXG components much more highly optimized than MXML graphics.
|
FXG tag |
Equivalent MXML tag and ActionScript class |
FXG-supported attributes |
FXG children |
|---|---|---|---|
|
<BitmapFill> |
<s:BitmapFill> mx.graphics.BitmapFill |
fillMode rotation scaleX scaleY source (required) x y |
<matrix> |
|
<BitmapImage> |
<s:BitmapImage> spark.primitives.BitmapImage |
alpha blendMode fillMode height rotation scaleX scaleY source (required) visible width x y |
None. |
|
<ColorTransform> |
<s:ColorTransform> flash.geom.ColorTransform |
alphaMultiplier alphaOffset blueMultiplier blueOffset greenMultiplier greenOffset redMultiplier redOffset |
None. |
|
<Definition> |
<fx:Definition> |
name (required) |
<Group> |
|
<Ellipse> |
<s:Ellipse> spark.primitives.Ellipse |
blendMode height rotation scaleX scaleY transformX transformY visible width x y |
<fill> <filters> <mask> <stroke> <transform> |
|
<GradientEntry> |
<s:GradientEntry> mx.graphics.GradientEntry |
alpha color ratio |
None. |
|
<Graphic> |
<s:Graphic> spark.primitives.Graphic |
mask scaleGridBottom scaleGridLeft scaleGridRight scaleGridTop version viewHeight viewWidth |
<Group> <Library> <mask> Any subclass of the GraphicElement class |
|
<Group> |
<s:Group> spark.components.Group |
alpha blendMode id maskType rotation scaleGridBottom scaleGridLeft scaleGridRight scaleGridTop scaleX scaleY transformX transformY visible x y |
<filters> <Group> <transform> Any subclass of the GraphicElement class |
|
<Library> |
<fx:Library> |
None. |
<Definition> |
|
<Line> |
<s:Line> spark.primitives.Line |
alpha blendMode id maskType rotation scaleX scaleY transformX transformY visible x xFrom xTo y yFrom yTo |
<fill> <filters> <mask> <stroke> <transform> |
|
<LinearGradient> |
<s:LinearGradient> mx.graphics.LinearGradient |
interpolationMethod rotation scaleX spreadMethod x y |
<GradientEntry> <matrix> |
|
<LinearGradientStroke> |
<s:LinearGradientStroke> mx.graphics.LinearGradientStroke |
caps interpolationMethod joints miterLimit rotation scaleMode scaleX spreadMethod x y |
<GradientEntry> <matrix> |
|
<Matrix> |
<s:Matrix> flash.geom.Matrix |
a b c d tx ty |
None. |
|
<Path> |
<s:Path> spark.primitives.Path |
blendMode data rotation scaleX scaleY transformX transformY visible winding x y |
<fill> <filters> <mask> <stroke> <transform> |
|
<RadialGradient> |
<s:RadialGradient> mx.graphics.RadialGradient |
focalPointRatio interpolationMethod rotation scaleX scaleY spreadMethod x y |
<GradientEntry> <matrix> |
|
<RadialGradientStroke> |
<s:RadialGradientStroke> mx.graphics.RadialGradientStroke |
caps focalPointRatio joints miterLimit scaleMode scaleX scaleY rotation spreadMethod interpolationMethod x y |
<GradientEntry> <matrix> |
|
<Rect> |
<s:Rect> spark.primitives.Rect |
blendMode bottomLeftRadiusX bottomLeftRadiusY bottomRightRadiusX bottomRightRadiusY height radiusX radiusY rotation scaleX scaleY topLeftRadiusX topLeftRadiusY topRightRadiusX topRightRadiusY transformX transformY visible width x y |
<fill> <filters> <mask> <stroke> <transform> |
|
<SolidColor> |
<s:SolidColor> mx.graphics.SolidColor |
alpha color |
None. |
|
<SolidColorStroke> |
<s:SolidColorStroke> mx.graphics.SolidColorStroke |
alpha caps color joints miterLimit pixelHinting scaleMode weight |
None. |
|
<RichText> |
<s:RichText> spark.primitives.RichText |
alpha blendMode height id maskType paddingLeft paddingRight paddingTop paddingBottom rotation scaleX scaleY transformX transformY visible width x y Paragraph and character style attributes |
<br> <content> <p> <span> <transform> |
|
<Transform> |
<s:Transform> mx.geom.Transform |
None. |
<colorTransform> <matrix> |
For complete descriptions of the FXG elements and their supported attributes, see the FXG 2.0 specification.
FXG
FXG is a 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. FXG closely follows the Flash Player 10 rendering model.
Designers can create vector images using tools such as Adobe® Photoshop®, Adobe® Illustrator® and Adobe® Fireworks® and export them as an FXG document. You can then use that FXG document as a component in your applications.
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/comps/GraphicComp.fxg -->
<Graphic xmlns="http://ns.adobe.com/fxg/2008" version="2">
<Rect id="rect1" width="200" height="200">
<fill>
<SolidColor color="#FFFFCC"/>
</fill>
<stroke>
<SolidColorStroke color="#660099" weight="2"/>
</stroke>
</Rect>
</Graphic>
When using FXG documents as components, you specify the tag to be the name of the FXG file, just as you would do with an ActionScript or MXML component.
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/GraphicCompMain.mxml -->
<s:Application backgroundColor="0xFFFFFF"
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:comps="comps.*">
<comps:GraphicComp id="graphic1"/>
</s:Application>
-
External bitmap files. For an example that embeds an external image, see Bitmap graphics.
-
Platform fonts by family name and style name.
Like MXML graphics, FXG tags have an implicit depth order. The order in which elements are defined defines their depth. Each tag is effectively drawn above its previous sibling. Children are drawn on top of their parents.
Adobe creative tools can be used to convert SVG to FXG. To do this, open the SVG file in the tool and export it as an FXG file.
FXG syntax
The root of an FXG document file is a <Graphic> tag. An FXG document can include zero or more containers (such as Group) and graphic elements, as well as a single library that can include any number of definitions.
The <Graphic> tag can only appear once in an FXG document. While the document cannot contain other <Graphic> elements, it can contain other elements such as <Rect>, <Ellipse>, <Path>, and <BitmapImage>. The <Graphic> tag can also optionally contain a single child <Library> tag and/or a single <mask> tag. These elements must appear before any other tag. If both are present, then the <Library> tag must come first.
You cannot specify an ID for the root <Graphic> tag in an FXG document.
http://ns.adobe.com/fxg/2008
:Graphic xmlns="http://ns.adobe.com/fxg/2008" version="2">
<s:Application ... xmlns:comps="comps.*">
<comps:MyGraphicComp id="graphic1"/>
FXG data types
|
Data Type |
Description |
|---|---|
|
angle |
An arbitrary number specified as degrees. Angles are clockwise. |
|
color |
A numerical RGB specification in hexadecimal notation. You specify a color by using a pound sign (#) immediately followed by six hexadecimal characters. You cannot use the 0x notation that is supported in MXML graphics. |
|
coordinate |
Represents a length in the local coordinate system that is the given distance from the origin of the local coordinate system along the relevant axis (the x-axis for x coordinates, the y-axis for y coordinates). |
|
identifier |
A text string that matches the regular expression [A-Za-z][A-Za-z0-9_]*. |
|
integer |
An optional sign character (+ or -) followed by one or more digits 0 through 9. If the sign character is not present, the number is non-negative. Unless stated otherwise for a particular attribute or property, the range for an integer ranges from -2147483648 to 2147483647. |
|
length |
A distance measurement. The format of a length is a number. |
|
number |
Specified either in decimal notation, or in scientific notation. Decimal notation consists of either an integer or an optional sign character, followed by zero or more digits, followed by a dot (.), followed by one or more digits. Scientific notation consists of a decimal-number immediately followed by the letter "e" or "E" immediately followed by an integer. Unless stated otherwise for a particular attribute or property, a number has the capacity for at least a single-precision floating point number and has a range of -3.4e+38F to +3.4e+38F. |
|
percentage |
A number immediately followed by a percentage sign (%). Percentage values are always relative to another value; for example, a length. Attributes or properties that allow percentage values also define the reference distance measurement to which the percentage refers. |
Tags not supported by FXG
-
<fx:Binding>
-
<fx:Component>
-
<fx:Declaration>
-
<fx:Metadata>
-
<fx:Model>
-
<fx:Reparent>
-
<fx:Repeater>
-
<fx:Script>
-
<fx:State>
-
<fx:states>
-
<fx:Style>
FXG syntax also does not include any ActionScript 3.0 built-in primitive tags. The list of built-in tags that are not defined by FXG includes the following:
-
<fx:Array>
-
<fx:Boolean>
-
<fx:Class>
-
<fx:Date>
-
<fx:Function>
-
<fx:int>
-
<fx:Number>
-
<fx:Object>
-
<fx:String>
-
<fx:uint>
-
<fx:XML>
-
<fx:XMLList>
FXG does not support data binding. If you try to use the data binding short-hand syntax in an FXG document, the compiler treats it as a literal String value.
Using FXG in applications built with Flex
When you use an FXG document as a component in your application, the compiler optimizes the document into a subclass of the spark.core.SpriteVisualElement class. Specifically, the compiler maps the FXG elements to SWF graphics primitive tags and links only a light-weight, Sprite-based class into your application.
The SpriteVisualElement class extends the Sprite class. It adds support for sizing, positioning, and alpha when used in an application built with Flex.
To use FXG as a component in your applications:
-
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 the FXG document in a separate location, you must 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 use a MX container as a direct parent of an FXG 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.
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/OptimizedFXGExample.mxml -->
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:comps="*"
width="500" height="300">
<s:Group>
<comps:star height="100" width="100" x="50" y="50"/>
<comps:star rotationX="20" height="70" width="70" x="150" y="50" alpha=".75"/>
<comps:star rotationX="40" height="50" width="50" x="220" y="50" alpha=".5"/>
<comps:star rotationX="60" height="30" width="30" x="270" y="50" alpha=".3"/>
<comps:star rotationX="80" height="10" width="10" x="300" y="50" alpha=".1"/>
</s:Group>
</s:Application>
<?xml version='1.0' encoding='UTF-8'?>
<!-- fxg/star.fxg -->
<fxg:Graphic xmlns:fxg="http://ns.adobe.com/fxg/2008" version="2">
<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. You cannot have another file of the same name with an *.mxml or *.as suffix in the same directory.
<?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/mx"
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>
Generating FXG
When you export a graphic file from a tool such as Adobe Illustrator in the FXG format, the tool writes a *.fxg file with a <Graphic> root tag.
If you are given the option to select a version of FXG, select version 2.
You can ignore the information in the <Private> code block, as long as you also leave the its namespace declaration. The contents of the <Private> block must be well-formed and valid XML but is not rendered.
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
In general, you should use an FXG document as a standalone component in your applications. This gives you the greatest amount of memory optimization, and lets you reuse your FXG files in other parts of the same application, or in other applications. In addition, by keeping the FXG document separate from the application, you can edit and export the FXG again from a graphics tool.
One disadvantage to using an FXG file as a standalone component is that you cannot get a reference to individual elements in it. 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, resize, position, and trigger events from interaction with the FXG component itself.
In some cases, you might want to add the FXG output directly into your application. You can do this, but you must convert the FXG syntax to MXML graphics.
After converting FXG elements to MXML graphics, you can get a reference to the various graphic elements, just as you can with any other MXML tags. This is useful if you want to apply special effects or events to what were previously FXG elements. After you convert the FXG file to MXML graphics, you cannot re-edit the FXG file in a graphics tool. It is now part of MXML.
-
Start by copying and pasting the FXG code into your MXML document.
-
Update the namespaces:
-
Change the FXG namespace (http://ns.adobe.com/fxg/2008) to the Spark component namespace (library://ns.adobe.com/flex/spark). There can be only one language namespace per document.
-
If the FXG fragment uses additional tool specific namespaces, you can add these to the root of the MXML file. For example, FXG exported from Adobe Illustrator typically includes the following namespace declarations:
xmlns:ai="http://ns.adobe.com/ai/2008" xmlns:d="http://ns.adobe.com/fxg/2008/dt"
These namespaces do not impact the rendering of the document, but must be retained to keep the XML document valid as tool-specific private attributes will be prefixed in these namespaces.
-
-
Change or remove any namespace prefixes on the <Library>, <Definition>, and <Private> elements. They must use the MXML 2009 language namespace (http://ns.adobe.com/mxml/2009). If you remove a namespace prefix on the tag, you can usually just add the "fx:" prefix to each of these elements.
-
Move the <Library> tag and any <Definition> elements it contains to the top of the MXML document. If there is already a <fx:Library> tag in the MXML document, move just the <Definition> elements into it and remove the FXG <Library> tag.
-
For library definitions, add the "fx:" prefix to their tags in the body of the MXML file. In MXML 2009 documents, library definitions are actually in the language namespace. For example, the <fx:Definition name="BlueCircle"> tag references to a definition that must also be in the "fx" namespace; for example, <fx:BlueCircle>.
-
Move the <Private> tag to the end of the MXML document or remove it. You do not need to include the <Private> tag at all, but it can contain useful information about the tool that generated the FXG.
-
Update the namespace prefix of the FXG elements. There is likely to be an "s:" prefix already mapped to the Spark component namespace on the MXML document's root tag (xmlns:s="library://ns.adobe.com/flex/spark"). Add the "s:" prefix to all of the FXG graphical elements. For example, change <Graphic> to <s:Graphic>.
-
For FXG 1.0 documents only:
-
Convert <TextGraphic> elements to <s:RichText>. This does not apply to FXG 2.0 documents, which use the <RichText> tag. In that case, you just add the "s:" prefix to the <RichText> tag to make it conform to MXML syntax.
-
Convert <BitmapGraphic> elements to <s:BitmapImage>. This does not apply to FXG 2.0 documents, which use the <BitmapImage> tag. In that case, you just add the "s:" prefix to the <BitmapImage> tag to make it conform to MXML syntax.
-
<?xml version="1.0" encoding="utf-8" ?>
<!-- assets/skins/SimpleBox.fxg -->
<Graphic version="1.0"
viewHeight="30"
viewWidth="100"
ai:appVersion="14.0.0.367"
d:id="1"
xmlns="http://ns.adobe.com/fxg/2008"
xmlns:ai="http://ns.adobe.com/ai/2008"
xmlns:d="http://ns.adobe.com/fxg/2008/dt">
<Library/>
<Group
x="-0.296875"
y="-0.5" d:id="2"
d:type="layer"
d:userLabel="Layer 1">
<Group d:id="3">
<Rect x="0.5" y="0.5" width="100" height="30" ai:knockout="0">
<fill>
<LinearGradient x="0.5" y="15.5" scaleX="100" rotation="-0">
<GradientEntry color="#ffffff" ratio="0"/>
<GradientEntry ratio="1"/>
</LinearGradient>
</fill>
<stroke>
<SolidColorStroke
color="#0000ff"
caps="none"
weight="1"
joints="miter"
miterLimit="4"/>
</stroke>
</Rect>
</Group>
</Group>
<Private>
<ai:PrivateElement d:ref="#1">
<ai:SaveOptions>
<ai:Dictionary>
<ai:DictEntry name="preserveGradientPolicy" value="3" valueType="Integer"/>
<ai:DictEntry name="rasterizeResolution" value="72" valueType="Integer"/>
<ai:DictEntry name="clipToActiveArtboard" value="1" valueType="Boolean"/>
<ai:DictEntry name="downsampleLinkedImages" value="0" valueType="Boolean"/>
<ai:DictEntry name="preserveFilterPolicy" value="3" valueType="Integer"/>
<ai:DictEntry name="preserveTextPolicy" value="3" valueType="Integer"/>
<ai:DictEntry name="writeImages" value="1" valueType="Boolean"/>
<ai:DictEntry name="includeXMP" value="0" valueType="Boolean"/>
<ai:DictEntry name="aiEditCap" value="1" valueType="Boolean"/>
<ai:DictEntry name="versionKey" value="1" valueType="Integer"/>
<ai:DictEntry name="includeSymbol" value="0" valueType="Boolean"/>
</ai:Dictionary>
</ai:SaveOptions>
<ai:DocData base="SimpleBox.assets/images"/>
<ai:Artboards
originOffsetH="0"
originOffsetV="30"
rulerCanvasDiffH="50.5"
rulerCanvasDiffV="-14.5"
zoom="17.17">
<ai:Artboard active="1" index="0" right="100" top="30"/>
<ai:ArtboardsParam all="0" range="" type="0"/>
</ai:Artboards>
</ai:PrivateElement>
<ai:PrivateElement d:ref="#2">
<ai:LayerOptions colorType="ThreeColor">
<ai:ThreeColor blue="257" green="128.502" red="79.31"/>
</ai:LayerOptions>
</ai:PrivateElement>
<ai:PrivateElement
ai:hashcode="769d7bac08ad6bdcf80f40fca11df6c0"
d:ref="#3">
<ai:Rect height="30" knockout="0" width="100" x="0.5" y="0.5">
<ai:Stroke colorType="ThreeColor" miterLimit="4" weight="1">
<ai:ThreeColor blue="1"/>
</ai:Stroke>
<ai:Fill colorType="Gradient">
<ai:Gradient
gradientType="linear"
length="100" originX="0.5"
originY="15.5">
<ai:GradientStops>
<ai:GradientStop colorType="GrayColor" rampPoint="0">
<ai:GrayColor/>
</ai:GradientStop>
<ai:GradientStop colorType="GrayColor" rampPoint="100">
<ai:GrayColor gray="1"/>
</ai:GradientStop>
</ai:GradientStops>
</ai:Gradient>
</ai:Fill>
<ai:ArtStyle/>
</ai:Rect>
</ai:PrivateElement>
</Private>
</Graphic>
-
Remove the <Library/> tag. This example does not contain any <Definition> elements.
-
Remove the <Private> block.
-
Move the two Illustrator-specific namespaces to the application's root tag:
xmlns:ai="http://ns.adobe.com/ai/2008" xmlns:d="http://ns.adobe.com/fxg/2008/dt"
-
Remove the FXG-specific namespace:
"http://ns.adobe.com/fxg/2008"
-
Add the "s:" prefix to all elements.
-
Because the "d" and "ai" namespace definitions are intact, you do not have to remove the attributes specific to these namespaces. The attributes type and userLabel, for example, appear on the <Group> tag from the original FXG file. To further simplify this example, though, you could remove them because Flex ignores anything in those namespaces.
For example, this:
<s:Group x="-0.296875" y="-0.5" d:id="2" d:type="layer" d:userLabel="Layer 1">
Becomes this:<s:Group x="-0.296875" y="-0.5">
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/ResultsMXMLGraphicsApp.mxml -->
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:ai="http://ns.adobe.com/ai/2008"
xmlns:d="http://ns.adobe.com/fxg/2008/dt">
<s:Graphic version="1.0"
viewHeight="30"
viewWidth="100"
ai:appVersion="14.0.0.367"
d:id="1">
<s:Group x="-0.296875" y="-0.5" d:id="2" d:type="layer" d:userLabel="Layer 1">
<s:Group d:id="3">
<s:Rect x="0.5" y="0.5" width="100" height="30" ai:knockout="0">
<s:fill>
<s:LinearGradient x="0.5" y="15.5" scaleX="100" rotation="-0">
<s:GradientEntry color="#ffffff" ratio="0"/>
<s:GradientEntry ratio="1"/>
</s:LinearGradient>
</s:fill>
<s:stroke>
<s:SolidColorStroke
color="#0000ff"
caps="none"
weight="1"
joints="miter"
miterLimit="4"/>
</s:stroke>
</s:Rect>
</s:Group>
</s:Group>
</s:Graphic>
</s:Application>
Coordinate systems
FXG defines two coordinate system concepts: the document coordinate system, and the user coordinate system.
The document coordinate system refers to the coordinate system of the root tag. By default, its origin sits at the top left of the document, and extends downward along the positive y axis, and to the right along the positive x axis. 1 unit corresponds to 1 pixel on the screen.
The user coordinate system refers to the coordinate system defined on any individual tag in the document. In FXG, the user coordinate system at the root <Graphic> tag is identical to the document coordinate system.
By default, each grouping instance element and graphic element defines its user coordinate system to be identical to that of its parent. Any geometry transform defined on the tag (through attributes or child transform elements) transforms its parent's user coordinate system into a new system.
All attributes of elements are defined in units of the current user coordinate system. As a result, the coordinates of the segments of a path are relative to its coordinate system. To determine the position of the path segments in document coordinates, you would multiply its x and y by the geometry transform of the path and each of its parent elements until you reached the root graphic tag.
Some fills and strokes have their own user coordinate system. As with Groups, the default coordinate system is aligned with the coordinate system of their most immediate parent instance. As appropriate, fills and strokes support geometry transforms that can modify their coordinate space.
Sizing FXG components
FXG elements use their height and width properties to determine the size of the graphic. The graphic tag scales to the values of the height and width properties. The viewWidth and viewHeight properties define the space that the graphic takes up. When you set these values, the content is not scaled.
If you specify a viewWidth and viewHeight that is larger than the natural size of the content, the graphic takes up more space than its visual size. The result is a boundary around the graphic.
You can also specify a viewWidth and viewHeight that is smaller than the natural size of the content. You might do this if your graphic has chrome such as a border that extends past the edges of the graphic. In this case, be sure to turn off clipping in your layout.
Optimizing FXG
Use the techniques described in this section when working with FXG.
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.
Placing shapes with odd stroke weights (mobile applications only)
For a given shape, strokes straddle the shape edges as opposed to being on the inside or outside of an edge. For example, take a vertical line starting from 0,0 to 0,100 with a 1-pixel wide stroke. That stroke stretches in the x-axis from -.5 to .5. However, because you cannot draw an element at a fractional pixel, Flash Player draws an anti-aliased line 2 pixels wide to approximate the fractional position.
This is true only on mobile applications. For desktop applications, Flash Player pixel-snaps stroke segments.
To counteract this anti-aliasing, place your shapes with odd numbered stroke weights on a half pixel boundary. For example, place a <Rect> with a <SolidColorStroke> of weight 1 at 10,10 at 10.5,10.5 instead.
An alternative is to leave all of your stroked shapes at integer pixels and shift the entire FXG component by .5 in the x and y positions. If possible, use filled <Rect> elements in place of stroked <Rect> or <Line> elements. If you have a <Rect> element with a fill and a stroke, try to split it into two filled <Rect> elements This technique works only if the fill is completely opaque. If you have a <Line> element, try using a filled <Rect> element instead. For example, if you have a horizontal <Line> element, create a filled <Rect> element with a height equal to the <Line> element's stroke weight.
Reduce anti-aliasing due to stage quality
Mobile applications built in Flex are currently limited to using StageQuality.MEDIUM. When designing skins using FXG and/or programmatic graphics, watch for anti-aliasing artifacts in rounded corners. The mobile skins mitigate this issue by using FXG Path data with fills instead strokes to draw curves.
-
Draw a filled rounded rectangle.
-
Copy the rectangle, position it 1px down and to the left of the original rectangle and reduce its width and height by 2px.
-
Select both rectangles, right click and choose Combine Path > Punch.
MXML graphics
MXML graphics are a collection of classes that define graphic elements in an application. MXML graphics tags support interactivity. They can be children of any container or group, can be declared as children of the root Application tag, and can be added to the application's display list.
Most MXML graphics classes are in the mx.graphics and spark.primitives packages. These classes include shapes, strokes, colors, fills, and gradients.
MXML graphics tags have an implicit depth order. The order in which elements are defined defines their depth. Each tag is effectively drawn above its previous sibling. Children are drawn above their parents.
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/GraphicCompMainMXML.mxml -->
<s:Application backgroundColor="0xFFFFFF"
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark">
<s:Graphic>
<s:Rect id="rect1" width="200" height="200">
<s:fill>
<s:SolidColor color="0xFFFFCC"/>
</s:fill>
<s:stroke>
<s:SolidColorStroke color="0x660099" weight="2"/>
</s:stroke>
</s:Rect>
</s:Graphic>
</s:Application>
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/ReferenceGraphics.mxml -->
<s:Application backgroundColor="0xFFFFFF"
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<s:Graphic>
<s:Rect id="rect1" width="200" height="200">
<s:fill>
<s:SolidColor id="sc1" color="0xFFFFCC"/>
</s:fill>
<s:stroke>
<s:SolidColorStroke color="0x660099" weight="2"/>
</s:stroke>
</s:Rect>
</s:Graphic>
<s:Button label="Change Color" click="sc1.color=0xCCFFFF"/>
</s:Application>
All MXML graphics classes have backing ActionScript implementations. This means that every MXML tag has a corresponding ActionScript class that the compiler maps the tag to during compilation. The table in Graphics classes and elements lists the tags and their backing ActionScript classes. You can use the classes in ActionScript directly in your <fx:Script> blocks to draw vector based graphics instead of the MXML tags. y
Paths in FXG and MXML graphics
Paths define a filled graphic tag that draws a series of path segments. In vector graphics, a path is a series of points connected by straight or curved line segments. Together the lines form an image.
In FXG, you use a <Path> tag to define a vector shape constructed from a set of line segments. The MXML graphics equivalent of the FXG <Path> tag is the Path class. In MXML, you use the <s:Path> tag.
There are several different types of path segments you can use: line, cubic bezier, and quadratic bezier. Typically, the first tag of a path definition moves the pen to the starting position of the graphic. You then use the segments to draw the lines of the graphic.
To define a series of segments in a path, you use the path's data property. You pass this property a series of instructions using shorthand syntax. Each value is preceded by a letter that acts as a segment identifier. The segment identifier indicates which type of segment to draw with the numeric values that follow it.
|
Segment Type |
Segment Identifier |
Parameters |
Example |
|---|---|---|---|
|
Close path |
Z/z |
n/a |
Z Closes off the path. |
|
Cubic Bezier |
C/c |
c1X c1Y c2X c2Y x y |
C 45 50 20 30 10 20 Curve to (10, 20), with the first control point at (45, 50) and the second control point at (20, 30). |
|
Cubic Bezier (without control points) |
S/s |
c2X c2Y x y |
S 20 30 10 20 Curve to (10, 20), with the second control point at (20, 30). The first control point is assumed to be the reflection of the second control point on the previous command relative to the current point. |
|
Horizontal line |
H/h |
x |
H 100 Horizontal line to 100. |
|
Line |
L/l |
x y |
L 50 30 Line to (50, 30). |
|
Move |
M/m |
x y |
M 10 20 Move pen position to (10, 20). |
|
Quadratic Bezier |
Q/q |
cX cY x y |
Q 110 45 90 30 Curve to (90, 30) with the control point at (110, 45). |
|
Quadratic Bezier (without control points) |
T/t |
x y |
T 90 30 Curve to (90, 30). The control point is the reflection of the control point on the previous command relative to the current point. |
|
Vertical line |
V/v |
y |
V 100 Vertical line to 100. |
You can use an uppercase or lowercase letter for the segment identifiers. If you specify a segment identifier using the uppercase letter, then the positioning is absolute. If you specify a segment identifier using the lowercase letter, then the positioning is relative.
When using segments, you do not need to specify the starting position of the pen; the x and y coordinate of the starting point is defined by the current pen position.
After drawing a line segment, the current pen position becomes the x and y coordinates of the end point of the line. You can use the Move segment type to reposition the pen without drawing a line.
The Path syntax is nearly identical to the SVG path syntax. This makes it easy to convert SVG paths to FXG or MXML graphics. There is one exception: FXG and MXML graphics do not support an "A" or Arc segment. To create an arc (elliptical, parabolic, or otherwise), use the the cubic Bezier and quadratic Bezier control points to achieve any sort of arc.
Paths can contain effects such as transforms, filters, blend modes, and masks.
FXG examples
Ôªø<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/SimplePathShorthandExample.mxml -->
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:comps="comps.*">
<s:Panel title="Rectangle Example" height="75%" width="75%">
<comps:SimplePathComp x="10" y="10"/>
</s:Panel>
</s:Application>
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/comps/SimplePathComp.fxg -->
<fx:Graphic xmlns:fx="http://ns.adobe.com/fxg/2008" version="2">
<!-- Use shorthand syntax to draw the rectangle. -->
<fx:Path data="M 0 0 L 0 100 L 100 100 L 100 0 L 0 0">
<!-- Define the border color of the rectangle. -->
<fx:stroke>
<fx:SolidColorStroke color="#888888"/>
</fx:stroke>
</fx:Path>
</fx:Graphic>
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/ArrowExample.mxml -->
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:comps="comps.*">
<mx:Panel title="Arrow Graphic Example"
height="75%" width="75%" layout="horizontal"
paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
<s:HGroup>
<!-- Use the ArrowAbsolute FXG component which uses absolute coordinates. -->
<comps:ArrowAbsolute/>
<!-- Use the ArrowRelative FXG component which uses relative coordinates. -->
<comps:ArrowRelative/>
</s:HGroup>
</mx:Panel>
</s:Application>
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/comps/ArrowAbsolute.fxg -->
<Graphic xmlns="http://ns.adobe.com/fxg/2008" version="2">
<!-- Use Use compact syntax with absolute coordinates. -->
<Path data="
M 20 0
C 50 0 50 35 20 35
L 15 35
L 15 45
L 0 32
L 15 19
L 15 29
L 20 29
C 44 29 44 6 20 6">
<!-- Define the border color of the arrow. -->
<stroke>
<SolidColorStroke color="#888888"/>
</stroke>
<!-- Define the fill for the arrow. -->
<fill>
<LinearGradient rotation="90">
<GradientEntry color="#000000" alpha="0.8"/>
<GradientEntry color="#FFFFFF" alpha="0.8"/>
</LinearGradient>
</fill>
</Path>
</Graphic>
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/comps/ArrowRelative.fxg -->
<Graphic xmlns="http://ns.adobe.com/fxg/2008" version="2">
<!-- Use compact syntax with relative coordinates. -->
<Path data="
m 20 0
c 30 0 30 35 0 35
l -5 0
l 0 10
l -15 -13
l 15 -13
l 0 10
l 5 0
c 24 0 24 -23 0 -23">
<!-- Define the border color of the arrow. -->
<stroke>
<SolidColorStroke color="#888888"/>
</stroke>
<!-- Define the fill for the arrow. -->
<fill>
<LinearGradient rotation="90">
<GradientEntry color="#000000" alpha="0.8"/>
<GradientEntry color="#FFFFFF" alpha="0.8"/>
</LinearGradient>
</fill>
</Path>
</Graphic>
MXML graphics examples
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/SimplePathShorthandExampleMXML.mxml -->
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark">
<s:Panel title="Rectangle MXML Graphics Example" height="75%" width="75%">
<s:Path x="10" y="10" data="M 0 0 L 0 100 L 100 100 L 100 0 L 0 0">
<!-- Define the border color of the rectangle. -->
<s:stroke>
<s:SolidColorStroke color="0x888888"/>
</s:stroke>
</s:Path>
</s:Panel>
</s:Application>
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/ArrowExampleMXML.mxml -->
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:comps="comps.*">
<mx:Panel title="Arrow MXML Graphics Example"
height="75%" width="75%" layout="horizontal"
paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
<s:HGroup>
<!-- Use absolute coordinates. -->
<s:Graphic>
<!-- Use Use compact syntax with absolute coordinates. -->
<s:Path data="
M 20 0
C 50 0 50 35 20 35
L 15 35
L 15 45
L 0 32
L 15 19
L 15 29
L 20 29
C 44 29 44 6 20 6">
<!-- Define the border color of the arrow. -->
<s:stroke>
<s:SolidColorStroke color="0x888888"/>
</s:stroke>
<!-- Define the fill for the arrow. -->
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0x000000" alpha="0.8"/>
<s:GradientEntry color="0xFFFFFF" alpha="0.8"/>
</s:LinearGradient>
</s:fill>
</s:Path>
</s:Graphic>
<!-- Use relative coordinates. -->
<s:Graphic>
<!-- Use compact syntax with relative coordinates. -->
<s:Path data="
m 20 0
c 30 0 30 35 0 35
l -5 0
l 0 10
l -15 -13
l 15 -13
l 0 10
l 5 0
c 24 0 24 -23 0 -23">
<!-- Define the border color of the arrow. -->
<s:stroke>
<s:SolidColorStroke color="0x888888"/>
</s:stroke>
<!-- Define the fill for the arrow. -->
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0x000000" alpha="0.8"/>
<s:GradientEntry color="0xFFFFFF" alpha="0.8"/>
</s:LinearGradient>
</s:fill>
</s:Path>
</s:Graphic>
</s:HGroup>
</mx:Panel>
</s:Application>
Libraries and symbols in FXG and MXML graphics
A symbol is a named grouping tag that can be made up of other symbols and graphic elements. You can define a symbol once and reuse it any number of times in an FXG document by using the <Library> and <Definition> elements. In MXML graphics, you use the MXML file's <fx:Library> and <fx:Definition> tags.
In FXG, the <Library> tag contains <Definition> elements. The <Library> tag can only be placed as a child of the root tag of an FXG document, just as the <fx:Library> tag can only be a child of the root tag in an MXML file. Symbols defined in a library can be referenced by name anywhere in the document.
In FXG, the <Library> tag must be the first child of the root tag.
<!-- This is illegal. --> <Library> <Definition name="A"> <Definition name="B"/> </Definition> </Library>
<!-- This is OK. --> <Library> <Definition name="A/> <Definition name="B"> <A/> </Definition> </Library>
All attributes that are legal on an instance group are also legal on a symbol.
Libraries can have any number of definitions. Each definition defines a named symbol that you can reuse in that document. For example, you can define a rectangle shape in your library, and then use that rectangle shape any number of times in the document. The named symbol can optionally contain effects such as color transforms, filters, blend modes, or masks. These elements can appear in any order in FXG.
For more information about using the <fx:Library> and <fx:Definition> language tags in MXML, see ActionScript 3.0 Reference for Apache Flex.
FXG examples
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/LibraryExample.mxml -->
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:comps="comps.*">
<mx:Panel title="Library Example"
height="75%" width="75%" layout="horizontal"
paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
<s:VGroup>
<comps:YellowShape/>
<comps:BlueShape/>
<comps:RedShape/>
</s:VGroup>
</mx:Panel>
</s:Application>
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/comps/YellowShape.fxg -->
<Graphic xmlns="http://ns.adobe.com/fxg/2008" version="2">
<Library>
<Definition name="YellowRect">
<Group>
<Rect height="10" width="10">
<stroke>
<SolidColorStroke color="#000000" weight=".5"/>
</stroke>
<fill>
<SolidColor color="#FFFF00"/>
</fill>
</Rect>
</Group>
</Definition>
</Library>
<YellowRect x="0" y="0"/>
<YellowRect x="0" y="12"/>
<YellowRect x="12" y="0"/>
<YellowRect x="12" y="12"/>
</Graphic>
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/comps/BlueShape.fxg -->
<Graphic xmlns="http://ns.adobe.com/fxg/2008" version="2">
<Library>
<Definition name="BlueRect">
<Group>
<Rect height="10" width="10">
<stroke>
<SolidColorStroke color="#000000" weight=".5"/>
</stroke>
<fill>
<SolidColor color="#66CCFF"/>
</fill>
</Rect>
</Group>
</Definition>
</Library>
<BlueRect x="0" y="0"/>
<BlueRect x="12" y="0"/>
<BlueRect x="24" y="0"/>
<BlueRect x="36" y="0"/>
</Graphic>
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/comps/RedShape.fxg -->
<Graphic xmlns="http://ns.adobe.com/fxg/2008" version="2">
<Library>
<Definition name="RedRect">
<Group>
<Rect height="10" width="10">
<stroke>
<SolidColorStroke color="#000000" weight=".5"/>
</stroke>
<fill>
<SolidColor color="#FF3333"/>
</fill>
</Rect>
</Group>
</Definition>
</Library>
<RedRect x="0" y="0"/>
<RedRect x="12" y="0"/>
<RedRect x="12" y="12"/>
<RedRect x="24" y="12"/>
</Graphic>
MXML graphics examples
The following example draws three groups of shapes using MXML graphics that are defined in the library:
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/LibraryExampleMXML.mxml -->
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:comps="comps.*">
<fx:Library>
<fx:Definition name="YellowRect">
<s:Group>
<s:Rect height="10" width="10">
<s:stroke>
<s:SolidColorStroke color="#000000" weight=".5"/>
</s:stroke>
<s:fill>
<s:SolidColor color="#FFFF00"/>
</s:fill>
</s:Rect>
</s:Group>
</fx:Definition>
<fx:Definition name="BlueRect">
<s:Group>
<s:Rect height="10" width="10">
<s:stroke>
<s:SolidColorStroke color="#000000" weight=".5"/>
</s:stroke>
<s:fill>
<s:SolidColor color="#66CCFF"/>
</s:fill>
</s:Rect>
</s:Group>
</fx:Definition>
<fx:Definition name="RedRect">
<s:Group>
<s:Rect height="10" width="10">
<s:stroke>
<s:SolidColorStroke color="#000000" weight=".5"/>
</s:stroke>
<s:fill>
<s:SolidColor color="#FF3333"/>
</s:fill>
</s:Rect>
</s:Group>
</fx:Definition>
</fx:Library>
<mx:Panel title="Library MXML Graphic Example"
height="75%" width="75%" layout="horizontal"
paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
<s:VGroup>
<s:Graphic>
<fx:YellowRect x="0" y="0"/>
<fx:YellowRect x="0" y="12"/>
<fx:YellowRect x="12" y="0"/>
<fx:YellowRect x="12" y="12"/>
</s:Graphic>
<s:Graphic>
<fx:BlueRect x="0" y="0"/>
<fx:BlueRect x="12" y="0"/>
<fx:BlueRect x="24" y="0"/>
<fx:BlueRect x="36" y="0"/>
</s:Graphic>
<s:Graphic>
<fx:RedRect x="0" y="0"/>
<fx:RedRect x="12" y="0"/>
<fx:RedRect x="12" y="12"/>
<fx:RedRect x="24" y="12"/>
</s:Graphic>
</s:VGroup>
</mx:Panel>
</s:Application>
Groups in FXG and MXML graphics
Groups contain content items. In MXML, these items are typically of type IGraphicElement (the base interface class for graphic elements), but can also include effects such as the <transform>, <filters>, <mask> elements, and other <Group> elements. In MXML graphics, items inside a group can be any MXML tags.
You define a group in an FXG document by using the <Group> tag. In MXML graphics, you use the <s:Group> tag, which corresponds to the Group class. This class implements the IGraphicElementContainer interface.
The order of graphical objects inside a group determines their depth order when rendered. The last object defined in a group is the top-most tag of the depth order.
A group can be inside a graphic or another group. When a group is inside a graphic or other group, it is considered an instance group. Instance groups can optionally contain features such as transforms, filters, and masks. The order that these children appear does not matter. Graphical effects such as these are rendered based on a predefined order, as described in Effects.
A Group can also be used inside a definition in the library section. When a group is inside a definition, it is considered a symbol definition. Groups inside libraries (symbol definition groups) cannot contain effects such as masks or transforms.
A group defines a new local coordinate space for its immediate child elements.
For more information about using the <s:Group> tag in MXML, see the ActionScript 3.0 Reference for Apache Flex.
FXG example
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/GroupCoordinateExample.mxml -->
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:comps="comps.*">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<mx:Panel title="Group Coordinate Example"
height="75%" width="75%" layout="horizontal"
paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
<s:Group>
<comps:YellowShape/>
</s:Group>
</mx:Panel>
</s:Application>
The following file defines the YellowShape FXG component used in the previous example. The component is defined in a <Group> tag inside a <Library>, which means it is a symbol definition group:
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/comps/YellowShape.fxg -->
<Graphic xmlns="http://ns.adobe.com/fxg/2008" version="2">
<Library>
<Definition name="YellowRect">
<Group>
<Rect height="10" width="10">
<stroke>
<SolidColorStroke color="#000000" weight=".5"/>
</stroke>
<fill>
<SolidColor color="#FFFF00"/>
</fill>
</Rect>
</Group>
</Definition>
</Library>
<YellowRect x="0" y="0"/>
<YellowRect x="0" y="12"/>
<YellowRect x="12" y="0"/>
<YellowRect x="12" y="12"/>
</Graphic>
MXML graphics example
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/GroupCoordinateExampleMXML.mxml -->
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:comps="comps.*">
<fx:Library>
<fx:Definition name="YellowRect">
<s:Group>
<s:Rect height="10" width="10">
<s:stroke>
<s:SolidColorStroke color="#000000" weight=".5"/>
</s:stroke>
<s:fill>
<s:SolidColor color="#FFFF00"/>
</s:fill>
</s:Rect>
</s:Group>
</fx:Definition>
</fx:Library>
<mx:Panel title="Group Coordinate MXML Graphics Example"
height="75%" width="75%" layout="horizontal"
paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
<s:Group>
<fx:YellowRect x="0" y="0"/>
<fx:YellowRect x="0" y="12"/>
<fx:YellowRect x="12" y="0"/>
<fx:YellowRect x="12" y="12"/>
</s:Group>
</mx:Panel>
</s:Application>
Shapes in FXG and MXML graphics
-
Rectangles
-
Ellipses
-
Lines
The MXML graphics classes for the basic shapes are defined in the spark.primitives package.
The default border for any shape is to have a stroke with a line width of 0. Therefore, you must define a stroke when you draw a shape, otherwise the shape will be invisible when rendered. You can optionally fill the shape with a fill.
Rectangles
In FXG, the <Rect> tag draws a rectangular shape; in MXML graphics, use the <s:Rect> tag or the spark.primitives.Rect class. You define the height and width of a rectangle. You can also define the stroke, or border, of the rectangle, and a fill.
When drawing rectangles, you have a great deal of control over the curvature of the corners of the rectangle. The FXG <Rect> tag and the <s:Rect> MXML tag class include properties such as topLeftRadiusX, topLeftRadiusY, bottomRightRadiusX, and bottomRightRadiusY. Convenience properties, radiusX and radiusY, let you set the radii of all corners.
FXG examples
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/SimpleRectExample.mxml -->
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:comps="comps.*">
<mx:Panel title="Rectangle Graphic Example"
height="75%" width="75%" layout="horizontal"
paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
<s:Group>
<comps:SimpleRectComp />
</s:Group>
</mx:Panel>
</s:Application>
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/comps/SimpleRectComp.fxg -->
<Graphic xmlns="http://ns.adobe.com/fxg/2008" version="2">
<Rect height="100" width="200">
<stroke>
<SolidColorStroke color="#000000" weight="1"/>
</stroke>
</Rect>
</Graphic>
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/RectExample.mxml -->
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:comps="comps.*">
<mx:Panel title="Rectangle Graphic Example"
height="75%" width="75%" layout="horizontal"
paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
<s:VGroup>
<comps:FilledRectComp/>
<comps:RoundRectComp/>
</s:VGroup>
</mx:Panel>
</s:Application>
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/comps/FilledRectComp.fxg -->
<Graphic xmlns="http://ns.adobe.com/fxg/2008" version="2">
<!-- Draw rectangle with square corners. -->
<Rect height="100" width="200">
<stroke>
<SolidColorStroke color="#000000" weight="2"/>
</stroke>
<fill>
<RadialGradient>
<GradientEntry color="#0056FF" ratio="0" alpha=".5"/>
<GradientEntry color="#00CC99" ratio=".33" alpha=".5"/>
<GradientEntry color="#ECEC21" ratio=".66" alpha=".5"/>
</RadialGradient>
</fill>
</Rect>
</Graphic>
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/comps/RoundRectComp.fxg -->
<Graphic xmlns="http://ns.adobe.com/fxg/2008" version="2">
<!-- Draw rectangle with rounded corners. -->
<Rect height="100" width="200" radiusX="25" radiusY="25">
<stroke>
<SolidColorStroke color="#000000" weight="2"/>
</stroke>
<fill>
<RadialGradient>
<GradientEntry color="#0056FF" ratio="0" alpha=".5"/>
<GradientEntry color="#00CC99" ratio=".33" alpha=".5"/>
<GradientEntry color="#ECEC21" ratio=".66" alpha=".5"/>
</RadialGradient>
</fill>
</Rect>
</Graphic>
MXML graphics examples
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/SimpleRectExampleMXML.mxml -->
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark">
<mx:Panel title="Rectangle MXML Graphics Example"
height="75%" width="75%" layout="horizontal"
paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
<s:Group>
<s:Rect height="100" width="200">
<s:stroke>
<s:SolidColorStroke color="0x000000" weight="1"/>
</s:stroke>
</s:Rect>
</s:Group>
</mx:Panel>
</s:Application>
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/RectExampleMXML.mxml -->
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark">
<mx:Panel title="Rectangle MXML Graphics Example"
height="75%" width="75%" layout="horizontal"
paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
<s:VGroup>
<s:Rect height="100" width="200">
<s:stroke>
<s:SolidColorStroke color="0x000000" weight="2"/>
</s:stroke>
<s:fill>
<s:RadialGradient>
<s:GradientEntry color="0x0056FF" ratio="0" alpha=".5"/>
<s:GradientEntry color="0x00CC99" ratio=".33" alpha=".5"/>
<s:GradientEntry color="0xECEC21" ratio=".66" alpha=".5"/>
</s:RadialGradient>
</s:fill>
</s:Rect>
<s:Rect height="100" width="200" radiusX="25" radiusY="25">
<s:stroke>
<s:SolidColorStroke color="0x000000" weight="2"/>
</s:stroke>
<s:fill>
<s:RadialGradient>
<s:GradientEntry color="0x0056FF" ratio="0" alpha=".5"/>
<s:GradientEntry color="0x00CC99" ratio=".33" alpha=".5"/>
<s:GradientEntry color="0xECEC21" ratio=".66" alpha=".5"/>
</s:RadialGradient>
</s:fill>
</s:Rect>
</s:VGroup>
</mx:Panel>
</s:Application>
For more information, see the Rect class in the ActionScript 3.0 Reference for Apache Flex.
Ellipses
In FXG, use the <Ellipse> tag to draw circles and ellipses; in MXML graphics, use the <s:Ellipse> tag or the spark.primitives.Ellipse class.
To define the dimensions of the ellipse, use the height and width attributes. These attributes are relative to the graphic's upper left corner. If you set the height and width attributes to the same value, the ellipse is a circle.
FXG examples
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/SimpleEllipseExample.mxml -->
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:comps="comps.*">
<mx:Panel title="Ellipse Graphic Example"
height="75%" width="75%" layout="horizontal"
paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
<s:Group>
<comps:CircleComp />
</s:Group>
</mx:Panel>
</s:Application>
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/comps/CircleComp.fxg -->
<Graphic xmlns="http://ns.adobe.com/fxg/2008" version="2">
<Ellipse height="200" width="200">
<stroke>
<SolidColorStroke color="#000000" weight="1"/>
</stroke>
</Ellipse>
</Graphic>
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/EllipseExample.mxml -->
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:comps="comps.*">
<mx:Panel title="Ellipse Graphic Example"
height="75%" width="75%" layout="horizontal"
paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
<s:Group>
<comps:FilledCircleComp/>
</s:Group>
</mx:Panel>
</s:Application>
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/comps/FilledCircleComp.fxg -->
<Graphic xmlns="http://ns.adobe.com/fxg/2008" version="2">
<Ellipse height="100" width="250">
<stroke>
<SolidColorStroke color="#000000" weight="2"/>
</stroke>
<fill>
<RadialGradient>
<GradientEntry color="#0056FF" ratio="0" alpha=".5"/>
<GradientEntry color="#00CC99" ratio=".33" alpha=".5"/>
<GradientEntry color="#ECEC21" ratio=".66" alpha=".5"/>
</RadialGradient>
</fill>
</Ellipse>
</Graphic>
MXML graphics examples
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/SimpleEllipseExampleMXML.mxml -->
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark">
<mx:Panel title="Ellipse MXML Graphics Example"
height="75%" width="75%" layout="horizontal"
paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
<s:Group>
<s:Ellipse height="200" width="200">
<s:stroke>
<s:SolidColorStroke color="0x000000" weight="1"/>
</s:stroke>
</s:Ellipse>
</s:Group>
</mx:Panel>
</s:Application>
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/EllipseExampleMXML.mxml -->
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:comps="comps.*">
<mx:Panel title="Ellipse MXML Graphic Example"
height="75%" width="75%" layout="horizontal"
paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
<s:Group>
<s:Ellipse height="100" width="250">
<s:stroke>
<s:SolidColorStroke color="0x000000" weight="2"/>
</s:stroke>
<s:fill>
<s:RadialGradient>
<s:GradientEntry color="0x0056FF" ratio="0" alpha=".5"/>
<s:GradientEntry color="0x00CC99" ratio=".33" alpha=".5"/>
<s:GradientEntry color="0xECEC21" ratio=".66" alpha=".5"/>
</s:RadialGradient>
</s:fill>
</s:Ellipse>
</s:Group>
</mx:Panel>
</s:Application>
For more information, see the Ellipse class in the ActionScript 3.0 Reference for Apache Flex.
Lines
To draw a line from one point to another in FXG, use the <Line> tag; in MXML graphics, use the <s:Line> tag or the spark.primitives.Line class.
-
SolidColorStroke
-
LinearGradientStroke
-
RadialGradientStroke
You can optionally define the color, joint types, and other properties of the line.
FXG examples
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/SimpleLineExample.mxml -->
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:comps="comps.*">
<mx:Panel title="Line Graphic Example"
height="75%" width="75%" layout="horizontal"
paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
<s:Group>
<comps:LineComp/>
</s:Group>
</mx:Panel>
</s:Application>
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/comps/LineComp.fxg -->
<Graphic xmlns="http://ns.adobe.com/fxg/2008" version="2">
<Line xFrom="0" xTo="100" yFrom="0" yTo="100">
<stroke>
<SolidColorStroke color="#000000" weight="1"/>
</stroke>
</Line>
</Graphic>
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/LineExample.mxml -->
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:comps="comps.*">
<mx:Panel title="Line Graphic Example"
height="75%" width="75%" layout="horizontal"
paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
<s:Group>
<comps:MultipleLineComp x="20" y="20"/>
</s:Group>
</mx:Panel>
</s:Application>
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/comps/MultipleLineComp.fxg -->
<Graphic xmlns="http://ns.adobe.com/fxg/2008" version="2">
<Line xFrom="0" xTo="0" yFrom="0" yTo="100">
<!-- Define the border color of the line. -->
<stroke>
<SolidColorStroke color="#000000" weight="1" caps="square"/>
</stroke>
</Line>
<Line xFrom="6" xTo="6" yFrom="0" yTo="100">
<stroke>
<SolidColorStroke color="#000000" weight="1" caps="square"/>
</stroke>
</Line>
<Line xFrom="12" xTo="12" yFrom="0" yTo="100">
<stroke>
<SolidColorStroke color="#000000" weight="2" caps="square"/>
</stroke>
</Line>
<Line xFrom="20" xTo="20" yFrom="0" yTo="100">
<stroke>
<SolidColorStroke color="#000000" weight="3" caps="square"/>
</stroke>
</Line>
<Line xFrom="30" xTo="30" yFrom="0" yTo="100">
<stroke>
<SolidColorStroke color="#000000" weight="5" caps="square"/>
</stroke>
</Line>
<Line xFrom="43" xTo="43" yFrom="0" yTo="100">
<stroke>
<SolidColorStroke color="#000000" weight="8" caps="square"/>
</stroke>
</Line>
<Line xFrom="58" xTo="58" yFrom="0" yTo="100">
<stroke>
<SolidColorStroke color="#000000" weight="13" caps="square"/>
</stroke>
</Line>
<Line xFrom="84" xTo="84" yFrom="0" yTo="100">
<stroke>
<SolidColorStroke color="#000000" weight="21" caps="square"/>
</stroke>
</Line>
<Line xFrom="123" xTo="123" yFrom="0" yTo="100">
<stroke>
<SolidColorStroke color="#000000" weight="34" caps="square"/>
</stroke>
</Line>
</Graphic>
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/LinearGradientLineExample.mxml -->
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:comps="comps.*">
<mx:Panel title="Linear Gradient Line Example"
height="75%" width="75%" layout="horizontal"
paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
<s:Group>
<comps:LinearGradientLineComp x="20" y="20"/>
</s:Group>
</mx:Panel>
</s:Application>
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/comps/LinearGradientLineComp.fxg -->
<Graphic xmlns="http://ns.adobe.com/fxg/2008" version="2">
<Line xFrom="0" xTo="200" yFrom="0" yTo="0">
<stroke>
<LinearGradientStroke weight="20" caps="square">
<GradientEntry color="#0056FF" ratio="0" alpha=".5"/>
<GradientEntry color="#ECEC21" ratio=".66" alpha=".5"/>
</LinearGradientStroke>
</stroke>
</Line>
</Graphic>
MXML graphics examples
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/SimpleLineExampleMXML.mxml -->
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark">
<mx:Panel title="Line MXML Graphics Example"
height="75%" width="75%" layout="horizontal"
paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
<s:Group>
<s:Line xFrom="0" xTo="100" yFrom="0" yTo="100">
<s:stroke>
<s:SolidColorStroke color="0x000000" weight="1"/>
</s:stroke>
</s:Line>
</s:Group>
</mx:Panel>
</s:Application>
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/LineExampleMXML.mxml -->
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:comps="comps.*">
<mx:Panel title="Line MXML Graphic Example"
height="75%" width="75%" layout="horizontal"
paddingTop="30" paddingBottom="10" paddingLeft="10" paddingRight="10">
<s:Group x="20" y="20">
<s:Line xFrom="0" xTo="0" yFrom="0" yTo="100">
<!-- Define the border color of the line. -->
<s:stroke>
<s:SolidColorStroke color="0x000000" weight="1" caps="square"/>
</s:stroke>
</s:Line>
<s:Line xFrom="6" xTo="6" yFrom="0" yTo="100">
<s:stroke>
<s:SolidColorStroke color="0x000000" weight="1" caps="square"/>
</s:stroke>
</s:Line>
<s:Line xFrom="12" xTo="12" yFrom="0" yTo="100">
<s:stroke>
<s:SolidColorStroke color="0x000000" weight="2" caps="square"/>
</s:stroke>
</s:Line>
<s:Line xFrom="20" xTo="20" yFrom="0" yTo="100">
<s:stroke>
<s:SolidColorStroke color="0x000000" weight="3" caps="square"/>
</s:stroke>
</s:Line>
<s:Line xFrom="30" xTo="30" yFrom="0" yTo="100">
<s:stroke>
<s:SolidColorStroke color="0x000000" weight="5" caps="square"/>
</s:stroke>
</s:Line>
<s:Line xFrom="43" xTo="43" yFrom="0" yTo="100">
<s:stroke>
<s:SolidColorStroke color="0x000000" weight="8" caps="square"/>
</s:stroke>
</s:Line>
<s:Line xFrom="58" xTo="58" yFrom="0" yTo="100">
<s:stroke>
<s:SolidColorStroke color="0x000000" weight="13" caps="square"/>
</s:stroke>
</s:Line>
<s:Line xFrom="84" xTo="84" yFrom="0" yTo="100">
<s:stroke>
<s:SolidColorStroke color="0x000000" weight="21" caps="square"/>
</s:stroke>
</s:Line>
<s:Line xFrom="123" xTo="123" yFrom="0" yTo="100">
<s:stroke>
<s:SolidColorStroke color="0x000000" weight="34" caps="square"/>
</s:stroke>
</s:Line>
</s:Group>
</mx:Panel>
</s:Application>
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/LinearGradientLineExampleMXML.mxml -->
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:comps="comps.*">
<mx:Panel title="Linear Gradient Line MXML Graphic Example"
height="75%" width="75%" layout="horizontal"
paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
<s:Group x="20" y="20">
<s:Line xFrom="0" xTo="200" yFrom="0" yTo="0">
<s:stroke>
<s:LinearGradientStroke weight="20" caps="square">
<s:GradientEntry color="0x0056FF" ratio="0" alpha=".5"/>
<s:GradientEntry color="0xECEC21" ratio=".66" alpha=".5"/>
</s:LinearGradientStroke>
</s:stroke>
</s:Line>
</s:Group>
</mx:Panel>
</s:Application>
For more information, see the Line class in the ActionScript 3.0 Reference for Apache Flex.
Text in FXG and MXML graphics
Text is rendered as a graphic element similar to paths and shapes, but with a restricted subset of rendering options. Text elements are always rendered using a solid fill color, modified by any opacity, blend mode, and color transformation defined by parent elements, and clipped to any clipping content defined on its parent elements. Text content is only filled, not stroked.
To use text in an FXG 2.0 document, use the <RichText> tag. In FXG 1.0, use the <TextGraphic> tag.
In MXML, you can use the RichText, RichEditableText, or Label classes to render text. For more information on using text controls in MXML, see MX text controls.
-
<content>
-
<transform>
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/FXGRichTextExample.mxml -->
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:comps="comps.*" height="100%" width="100%">
<mx:Panel title="RichText Example"
height="75%" width="75%" layout="horizontal"
paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
<s:HGroup>
<s:Group>
<comps:TextComp/>
</s:Group>
<s:Group>
<comps:JustifiedTextComp/>
</s:Group>
<s:Group>
<comps:FormattedTextComp/>
</s:Group>
</s:HGroup>
</mx:Panel>
</s:Application>
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/comps/TextComp.fxg -->
<Graphic xmlns="http://ns.adobe.com/fxg/2008" version="2">
<RichText>
<content>Hello World!</content>
</RichText>
</Graphic>
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/comps/JustifiedTextComp.fxg -->
<Graphic xmlns="http://ns.adobe.com/fxg/2008" version="2">
<RichText textAlign="justify" width="100">
<content>This is a block of text that is justified, so you can see formatting applied.</content>
</RichText>
</Graphic>
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/comps/FormattedTextComp.fxg -->
<Graphic xmlns="http://ns.adobe.com/fxg/2008" version="2">
<RichText>
<content>This text is <span fontWeight="bold">BOLD</span>,<br/>
this text is <span textDecoration="underline">UNDERLINED</span>,<br/>
and this text is <span fontStyle="italic">ITALIC</span>.
<p>This is a new paragraph.</p></content>
</RichText>
</Graphic>
-
<p>
-
<span>
-
<br>
-
<tcy>
-
<a>
-
<img>
-
<tab>
-
<linkNormalFormat>
-
<linkHoverFormat>
-
<linkActiveFormat>
The <content> child tag can also take raw text.
If you do not explicitly use a <p> tag as the first tag in a <content> tag, then it is implied.
<RichText fontFamily="Verdana" fontWeight="bold"> <content>Hello, <span fontWeight="normal">World</span></content> </RichText>
The contents of the <RichText> tag support a set of style attributes that define formatting. These styles are a subset of the MXML RichText class. Some styles are applied at the character and paragraph level, and some are applied at the container level. Container-level attributes (whose level is listed as including <RichText>), affect the entire text flow when applied to the container. Paragraph-level attributes (whose level is listed as including <p>), affect the paragraph when applied to a <p> tag. And character-level attributes (whose level is listed as including <span>) affect only the current span when applied to a <span> tag.
|
Attribute |
Description |
Level |
|---|---|---|
|
alignmentBaseline |
Specifies which of the baselines of the line containing the element the dominantBaseline snaps to, thus determining the vertical position of the element in the line. The default value is useDominantBaseline. Valid values are roman, ascent, descent, ideographicTop, ideographicCenter, ideographicBottom, and useDominantBaseline. |
<RichText>, <p>, or <span> |
|
backgroundAlpha |
Alpha (transparency) value for the background. A value of 0 is fully transparent, and a value of 1 is fully opaque. The default value is 1. |
<RichText>, <p>, or <span> |
|
backgroundColor |
Background color of the text. Can be either transparent, or an integer containing three 8-bit RGB components. The default value is transparent. |
<RichText>, <p>, or <span> |
|
baselineShift |
Indicates the baseline shift for the element in pixels. The element is shifted perpendicular to the baseline by this amount. In horizontal text, a positive baseline shift moves the element up and a negative baseline shift moves the element down. The default value is 0.0, indicating no shift. A value of superscript shifts the text up by an amount specified in the font, and applies a transform to the fontSize also based on preferences in the font. A value of subscript shifts the text down by an amount specified in the font, and also transforms the fontSize. A percent value shifts the text by a percentage of the fontSize attribute. The minimum/maximum percent are -1000%/1000%. A Number shifts the text by that number of pixels. The minimum/maximum Number values are -1000/1000. |
<RichText>, <p>, or <span> |
|
blockProgression |
Controls the direction in which lines are stacked. In Latin text, this is tb, because lines start at the top and proceed downward. In vertical Chinese or Japanese, this is rl, because lines should start at the right side of the container and proceed leftward. Valid values are tb and rl. |
<RichText> or <p> |
|
breakOpportunity |
Controls where a line can legally break. Valid values are auto, any, none, or all. A value of auto means line breaking opportunities are based on standard Unicode character properties, such as breaking between words and on hyphens. A value of any indicates that the line may end at any character. This value is typically used when Roman text is embedded in Asian text and it is desirable for breaks to happen in the middle of words. A value of none means that no characters in the range are treated as line break opportunities. A value of all means that all characters in the range are treated as mandatory line break opportunities; this results in one character per line. The default value is auto. |
<RichText>, <p>, or <span> |
|
color |
Sets the color of the text. The default value is 0x000000. |
<RichText>, <p>, or <span> |
|
columnCount |
Defines the number of columns in the RichText element. The column number overrides the other column settings. The value can be an Integer, or auto if unspecified. If it's an integer, the range of legal values is 0 to 50. If columnCount is not specified, but columnWidth is, then columnWidth is used to create as many columns as can fit in the container. The default value is auto. |
<RichText> |
|
columnGap |
Defines th space between columns in pixels. Does not include space before the first column or after the last column. Use the padding properties to define that. Legal values range from 0 to 1000. The default value is 0. |
<RichText> |
|
columnWidth |
Defines the width of columns in pixels. If you specify the width of the columns, but not the count, Flex creates as many columns of that width as possible given the the container width and columnGap settings. Any remainder space is left after the last column. Legal values are 0 to 8000. The default value is auto. |
<RichText> |
|
digitCase |
Defines the case for digits. Valid values are default, lining, and oldStyle. A value of default uses the normal digit case from the font. A value of lining uses the lining digit case from the font. A value of oldStyle uses the old style digit case from the font. The default value is default. |
<RichText>, <p>, or <span> |
|
digitWidth |
Specifies how wide digits will be when the text is set. Valid values are proportional, tabular, and default. A value of proportional means that the proportional widths from the font are used, and different digits will have different widths. A value of tabular means that every digits has the same width. A value of default means that the normal width from the font is used. The default value is default. |
<RichText>, <p>, or <span> |
|
direction |
Controls the dominant writing direction for the paragraphs (left-to-right or right-to-left), and how characters with no implicit writing direction, such as punctuation, are treated. Valid values are ltr and rtl. The default value is ltr. |
<RichText> or <p> |
|
dominantBaseline |
Specifies which of the baselines of the element snaps to the alignmentBaseline to determine the vertical position of the element on the line. Valid values are auto, roman, ascent, descent, ideographicTop, ideographicCenter, and ideographicBottom. A value of auto gets resolved based on the textRotation of the span and the locale of the parent paragraph. A textRotation of rotate270 resolves to ideographicCenter. A locale of Japanese ("ja") or Chinese ("zh-XX", "zh_XX", etc), resolves to ideographicCenter, whereas all others are resolved to roman. The default value is auto. |
<RichText>, <p>, or <span> |
|
firstBaselineOffset |
Specifies the position of the first line of text in the container (first in each column) relative to the top of the container. The first line may appear at the position of the line's ascent, or below by the lineHeight of the first line. Or it may be offset by a pixel amount. Valid values are auto, ascent, lineHeight, and a Number. The default value (auto) specifies that the line top be aligned to the container top inset. The baseline that this property refers to is deduced from the container's locale as follows: ideographicBottom for Chinese and Japanese locales, roman otherwise. Minumum/maximum values are 0/1000. The default value is auto. |
<RichText> |
|
fontFamily |
Defines the font family name used to render the text. The font depends on the glyphs that are being rendered and the fonts that are available on the client system. For most platforms, the default value is Arial. |
<RichText>, <p>, or <span> |
|
fontSize |
Sets the size of the glyphs that are used to render the text, specified in point sizes. The default value is 12. The minimum value is 1. The maximum value is 500. |
<RichText>, <p>, or <span> |
|
fontStyle |
Italicizes text. Valid values are normal and italic. The default value is normal. |
<RichText>, <p>, or <span> |
|
fontWeight |
Bolds text. Valid values are normal and bold. The default value is normal. |
<RichText>, <p>, or <span> |
|
justificationRule |
Defines the justifier. A value of eastAsian enables justification for Japanese. The default value is auto. A value of auto is resolved based on the locale of the paragraph. Values for Japanese ("ja") and Chinese ("zh-XX", "zh_XX", etc) resolve to eastAsian, while all other locales resolve to space. |
<RichText> or <p> |
|
justificationStyle |
Defines the justification style. A value of auto is resolved based on the locale of the paragraph. Currently, all locales resolve to pushInKinsoku, however, this value is only used in conjunction with a justificationRule value of eastAsian, so is only applicable to "ja" and all "zh" locales. A value of prioritizeLeastAdjustment bases justification on either expanding or compressing the line, whichever gives a result closest to the desired width. A value of pushInKinsoku bases justification on compressing kinsoku at the end of the line, or expanding it if there is no kinsoku or if that space is insufficient. A value of pushOutOnly bases justification on expanding the line. Valid values are auto, prioritizeLeastAdjustment, pushInKinsoku, and pushOutOnly. The default value is auto. |
<RichText> or <p> |
|
kerning |
Applies pair kerning to text. Valid values are on, off, and auto. If on, pair kerns are honored. If off, there is no font-based kerning applied. If auto, kerning is applied to all characters except Kanji, Hiragana or Katakana. The default value is auto. |
<RichText>, <p>, or <span> |
|
leadingModel |
Specifies the leading basis (baseline to which the lineHeight property refers) and the leading direction (which determines whether the lineHeight property refers to the distance of a line's baseline from that of the line before it or the line after it). The default value is auto which is resolved based on locale. Locale values of Japanese ("ja") and Chinese ("zh-XX", "zh_XX", etc) resolve auto to ideographicTopDown and other locales resolve to romanUp. Valid values are auto, romanUp, ideographicTopUp, ideographicCenterUp, ascentDescentUp, ideographicTopDown, and ideographicCenterDown. |
<RichText> or <p> |
|
ligatureLevel |
Controls which ligatures in the font will be used. Valid values are minimum, common, uncommon, and exotic. A value of minimum turns on rlig, common is rlig + clig + liga; uncommon is rlig + clig + liga + dlig; exotic is rlig + clig + liga + dlig + hlig. You cannot turn the various ligature features on independently. The default value is common. |
<RichText>, <p>, or <span> |
|
lineBreak |
Determines whether the text wraps the lines at the edge of the enclosing <RichText> element. Set to toFit to wrap the lines. Set to explicit to break the lines only at a Unicode line end character (such as a newline or line separator). Valid values are toFit and explicit. The default value is toFit. |
<RichText> |
|
lineHeight |
Defines the leading, or the distance from the previous line's baseline to the current line, in points. This can be specified in absolute pixels, or as a percentage of the point size. The default value is 120%. The minimum value for percent or number is 0. |
<RichText>, <p>, or <span> |
|
lineThrough |
Whether to apply a strike through to the text. Set to true to apply a line through the text; otherwise set to false. The default value is false. |
<RichText>, <p>, or <span> |
|
locale |
Defines the locale of the text. This controls case transformations and shaping. Standard locale identifiers as described in Unicode Technical Standard #35 are used. For example en, en_US and en-US are all English, ja is Japanese. Locale applied at the paragraph and higher level impacts resolution of "auto" values for dominantBaseline, justificationRule, justificationStyle and leadingModel. See individual attributes for resolution values. |
<RichText>, <p>, or <span> |
|
marginBottom |
Defines the space after the paragraph. As in CSS, adjacent vertical space collapses. No margin is necessary if the paragraph falls at the bottom of the <RichText> tag. The default value is 0. The minimum value is 0. |
<RichText> or <p> |
|
marginLeft |
Defines the indentation applied to the left edge of the <RichText> tag, measured in pixels. The default value is 0. |
<RichText> or <p> |
|
marginRight |
Defines the indentation applied to the right edge of the <RichText> tag, measured in pixels. The default value is 0. |
<RichText> or <p> |
|
marginTop |
Defines the space before the paragraph. As in CSS, adjacent vertical space collapses. Given two adjoining paragraphs (A, B), where A has marginBottom 12 and B has marginBottom 24, the total space between the paragraphs is 24, the maximum of the two, and not 36, the sum. If the paragraph is at the top of the column, no extra space is left for the margin. The default value is 0. The minimum value is 0. |
<RichText> or <p> |
|
paddingBottom |
Defines the inset from bottom edge to content area, in pixels. The default value is 0. The minumum/maximum values are 0/1000. |
<RichText> |
|
paddingLeft |
Defines the inset from left edge to content area, in pixels. The default value is 0. The minumum/maximum values are 0/1000. |
<RichText> |
|
paddingRight |
Defines the inset from right edge to content area, in pixels. The default value is 0. The minumum/maximum values are 0/1000. |
<RichText> |
|
paddingTop |
Defines the inset from top edge to content area, in pixels. The default value is 0. The minumum/maximum values are 0/1000. |
<RichText> |
|
paragraphEndIndent |
Defines the indentation applied to the end edge of a paragraph (right edge if direction is ltr, left edge otherwise). Measured in pixels. Legal values range from 0 to 1000. Default is 0. |
<RichText> or <p> |
|
paragraphSpaceAfter |
Defines the amount of whitespace that appears the paragraph. As in CSS, adjacent vertical space collapses (see note for paragraphSpaceBefore ). No "space after" is necessary if the paragraph falls at the bottom of the RichText. Legal values range from 0 to 1000. The default value is 0. The minimum value is 0. |
<RichText> or <p> |
|
paragraphSpaceBefore |
Specifies the amount of whitespace that appears above a paragraph. As in CSS, adjacent vertical space collapses. For two adjoining paragraphs (A, B), where A has paragraphSpaceAfter 12 and B has paragraphSpaceBefore 24, the total space between the paragraphs will be 24, the maximum of the two, and not 36, the sum. If the paragraph comes at the top of the column, no extra space is left before it. Legal values range from 0 to 1000. The default value is 0. The minimum value is 0. |
<RichText> or <p> |
|
paragraphStartIndent |
Defines the indentation applied to the start edge of the paragraph (left edge if direction is ltr, right edge otherwise). Measured in pixels. Legal values range from 0 to 1000. The default value is 0. |
<RichText> or <p> |
|
tabStops |
Defines an array of tab stops. For more information, see the FXG 2.0 Specification. |
<RichText> or <p> |
|
textAlpha |
Sets the opacity level of the text, ranging from 0 (completely transparent) to 1 (completely opaque). The default value is 1. |
<RichText>, <p>, or <span> |
|
textAlign |
Aligns text relative to the text box edges. Valid values are left, right, center, and justify. The default value is left. |
<RichText> or <p> |
|
textAlignLast |
Aligns the last line of the paragraph. To make a paragraph set all lines justified, set the textAlign and textAlignLast attributes to justify. Valid values are left, center, right, and justify. The default value is left. |
<RichText> or <p> |
|
textDecoration |
Underlines text. Valid values are none and underline. The default value is none. |
<RichText>, <p>, or <span> |
|
textIndent |
Indent the first line of text in a paragraph. The indent is relative to the left margin. Measured in pixels. The default value is 0. This attribute can be negative. |
<RichText> or <p> |
|
textJustify |
Applies when justificationRule is space. A value of interWord spreads justification space out to spaces in the line. A value of distribute spreads it out to letters as well as spaces. The default value is interWord. Valid values are interWord and distribute. |
<RichText> or <p> |
|
textRotation |
Controls the rotation of the text, in ninety degree increments. Valid values are auto, rotate0, rotate90, rotate180, and rotate270. The default value is auto. |
<RichText>, <p>, or <span> |
|
trackingLeft |
Adds space to the left of each character. Can be a percent value or a Number. A Number tracks by a pixel amount, with the minimum/maximum values -100/1000. A percent value is the percentage of the fontSize attribute. Legal values for percentages are -100% to 1000%. Negative values bring characters closer together. The default value is 0. |
<RichText>, <p>, or <span> |
|
trackingRight |
Adds space to the right of each character. Can be a percent value or a Number. A Number tracks by a pixel amount, with the minimum/maximum values -100/1000. A percent value is the percentage of the fontSize attribute. Legal values for percentages are -100% to 1000%. Negative values bring characters closer together. The default value is 0. |
<RichText>, <p>, or <span> |
|
typographicCase |
Controls the case in which the text appears. Valid values are default, capsToSmallCaps, uppercase, lowercase, and lowercaseToSmallCaps. A value of default does not apply any case changes.A value of smallCaps converts all characters to uppercase and applies c2sc. A value of uppercase and lowercase are case conversions.A value of caps turns on case.A value of lowercaseToSmallCaps converts all characters to uppercase, and for those characters which have been converted, applies c2sc. The default value is default. |
<RichText>, <p>, or <span> |
|
verticalAlign |
Sets the vertical alignment of the lines within the container. Valid values are top, middle, bottom, justify, and inherit. The lines might appear at the top of the container, centered within the container, at the bottom, or evenly spread out across the depth of the container. The default value is top. |
<RichText> |
|
whiteSpaceCollapse |
Determines how whitespace such as line feeds, newlines, and tabs are treated. Valid values are collapse and preserve. Set to collapse to convert line feeds, newlines, and tabs to spaces, collapse adjacent spaces to one, and trim leading and trailing whitespace. Set to preserve to maintain whitespace without changes. |
<RichText>, <p>, or <span> |
Not all of the properties in MXML text-based controls are supported by the <RichText> tag in FXG, and not all properties of FXG are supported by the MXML text-based controls. For example, the RichText class in MXML does not have the margin-related properties that the <RichText> tag in FXG has.
The <RichText> tag is not optimized when an FXG document is compiled. It is the only FXG element that is not optimized because there are no low-level Flash Player instructions for RichText.
-
If the width is specified, but the height is not, the container height is set to the height required to fit the text. Text wraps to the width of the container, and the total height of the text becomes the container height.
-
If the width is not specified, then the text breaks only at line breaks and at the paragraph end. The width of the container is then set to the width of the longest line.
-
If neither width nor height are specified, the width is set as described above, and then the height is set based on the width.
-
If the height is specified, and the text exceeds what will fit, then the remaining text is preserved but does not appear in the container; it is clipped. You can choose to add scroll bars to view the additional text, but scroll bars are not part of FXG.
Fills in FXG and MXML graphics
Fills and strokes generally define a default bounding area that they fill, clipped by the path they are filling. Fills and strokes can define their own user coordinate space, which defaults to the coordinate space of the object they are filling. A fill or stroke can modify its coordinate space with transform attributes and child elements, similar to a Group, that is concatenated with its parent's transforms to define a fill region in document coordinates.
To define a fill in FXG, you use the <fill> tag as the child of a graphic element, such as a Rect. In MXML graphics, you use the <s:fill> tag, or a class that implements the mx.graphics.IFill interface. Fill elements and tags can contain a single tag that defines the type of fill.
-
SolidColor
-
RadialGradient
-
LinearGradient
-
BitmapFill
SolidColor fills
A solid color fill fills a path or shape with a single solid color or solid color with opacity. The value of the color property is a hexadecimal number, such as #FF00FF. In FXG, you cannot use the 0x notation that is supported in MXML graphics.
In FXG, you use the <SolidColor> tag to create a solid color fill. In MXML graphics, you use the <s:SolidColor> tag.
FXG example
The following FXG-based example creates a rectangle with a SolidColor fill at 50% opacity:
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/SolidColorExample.mxml -->
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:comps="comps.*">
<mx:Panel title="Solid Color Example"
height="75%" width="75%" layout="horizontal"
paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
<s:Group>
<comps:SolidColorComp/>
</s:Group>
</mx:Panel>
</s:Application>
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/comps/SolidColorComp.fxg -->
<Graphic xmlns="http://ns.adobe.com/fxg/2008" version="2">
<!-- Draw rectangle that is filled with a SolidColor. -->
<Rect height="100" width="200">
<stroke>
<SolidColorStroke color="#000000" weight="2"/>
</stroke>
<fill>
<SolidColor color="#00FF00" alpha=".5"/>
</fill>
</Rect>
</Graphic>
MXML graphics example
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/SolidColorExampleMXML.mxml -->
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark">
<mx:Panel title="Solid Color MXML Graphics Example"
height="75%" width="75%" layout="horizontal"
paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
<s:Group>
<!-- Draw rectangle that is filled with a SolidColor. -->
<s:Rect height="100" width="200">
<s:stroke>
<s:SolidColorStroke color="0x000000" weight="2"/>
</s:stroke>
<s:fill>
<s:SolidColor color="0x00FF00" alpha=".5"/>
</s:fill>
</s:Rect>
</s:Group>
</mx:Panel>
</s:Application>
For more information, see the SolidColor class in the ActionScript 3.0 Reference for Apache Flex.
LinearGradient fills
A linear gradient fills a path or shape with a continuously smooth color transition between a list of colors along a vector. With gradient fills, you can use the spreadMethod property to define a repetition of the patterns.
In FXG, you use the <LinearGradient> tag to define a linear gradient. In MXML graphics, you use the <s:LinearGradient> tag, or the mx.graphics.LinearGradient class.
FXG example
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/LinearGradientExample.mxml -->
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:comps="comps.*">
<mx:Panel title="Linear Gradient Example"
height="75%" width="75%" layout="horizontal"
paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
<s:Group>
<comps:LinearGradientComp/>
</s:Group>
</mx:Panel>
</s:Application>
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/comps/LinearGradientComp.fxg -->
<Graphic xmlns="http://ns.adobe.com/fxg/2008" version="2">
<!-- Draw rectangle that is filled with a LinearGradient. -->
<Rect height="100" width="200">
<stroke>
<SolidColorStroke color="#000000" weight="2"/>
</stroke>
<fill>
<LinearGradient>
<GradientEntry color="#0056FF" ratio="0" alpha=".5"/>
<GradientEntry color="#00CC99" ratio=".33" alpha=".5"/>
<GradientEntry color="#ECEC21" ratio=".66" alpha=".5"/>
</LinearGradient>
</fill>
</Rect>
</Graphic>
MXML graphics example
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/LinearGradientExampleMXML.mxml -->
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:comps="comps.*">
<mx:Panel title="Linear Gradient MXML Graphic Example"
height="75%" width="75%" layout="horizontal"
paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
<s:Group>
<!-- Draw rectangle that is filled with a LinearGradient. -->
<s:Rect height="100" width="200">
<s:stroke>
<s:SolidColorStroke color="0x000000" weight="2"/>
</s:stroke>
<s:fill>
<s:LinearGradient>
<s:GradientEntry color="0x0056FF" ratio="0" alpha=".5"/>
<s:GradientEntry color="0x00CC99" ratio=".33" alpha=".5"/>
<s:GradientEntry color="0xECEC21" ratio=".66" alpha=".5"/>
</s:LinearGradient>
</s:fill>
</s:Rect>
</s:Group>
</mx:Panel>
</s:Application>
RadialGradient fills
A radial gradient specifies a gradual color transition in the fill color. A radial gradient defines a fill pattern that radiates out from the center of a graphical element.
In FXG, you use the <RadialGradient> tag to define a radial gradient. you add a series of GradientEntry objects to the <RadialGradient> tag's entries Array to define the colors that make up the gradient fill.
In MXML graphics, you use the <s:RadialGradient> tag, or the mx.graphics.RadialGradient class. You then define an array of entries, and add to it GradientEntry objects.
FXG example
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/RadialGradientExample.mxml -->
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:comps="comps.*">
<mx:Panel title="Radial Gradient Example"
height="75%" width="75%" layout="horizontal"
paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
<s:Group>
<comps:RadialGradientComp/>
</s:Group>
</mx:Panel>
</s:Application>
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/comps/RadialGradientComp.fxg -->
<Graphic xmlns="http://ns.adobe.com/fxg/2008" version="2">
<!-- Draw rectangle that is filled with a RadialGradient. -->
<Rect height="100" width="200">
<stroke>
<SolidColorStroke color="#000000" weight="2"/>
</stroke>
<fill>
<RadialGradient>
<GradientEntry color="#0056FF" ratio="0" alpha=".5"/>
<GradientEntry color="#00CC99" ratio=".33" alpha=".5"/>
<GradientEntry color="#ECEC21" ratio=".66" alpha=".5"/>
</RadialGradient>
</fill>
</Rect>
</Graphic>
MXML graphics example
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/RadialGradientExampleMXML.mxml -->
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark">
<mx:Panel title="Radial Gradient MXML Graphics Example"
height="75%" width="75%" layout="horizontal"
paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
<s:Group>
<s:Rect height="100" width="200">
<s:stroke>
<s:SolidColorStroke color="0x000000" weight="2"/>
</s:stroke>
<s:fill>
<s:RadialGradient>
<s:GradientEntry color="0x0056FF" ratio="0" alpha=".5"/>
<s:GradientEntry color="0x00CC99" ratio=".33" alpha=".5"/>
<s:GradientEntry color="0xECEC21" ratio=".66" alpha=".5"/>
</s:RadialGradient>
</s:fill>
</s:Rect>
</s:Group>
</mx:Panel>
</s:Application>
BitmapFill fills
In FXG, you use the <BitmapFill> tag to fill an area with the specified bitmap data. In MXML graphics, you use the <s:BitmapFill> tag, or the mx.graphics.BitmapFill class.
A bitmap fill can scale or repeat its contents to fit the area. The default behavior is to scale the bitmap data to fill the available area. To prevent scaling, set the fillMode property to clip. If the fill is larger than the available area, the bitmap data is clipped. To scale the bitmap data to the available area, set the fillMode property to scale. To repeat the bitmap data in the available area, set the fillMode property to repeat.
When you set the value of the fillMode property in ActionScript (for MXML graphics), use the constants defined on the BitmapFillMode class.
You can offset the position of the bitmap data inside the specified fill area by using the offset and origin position properties. You can rotate the bitmap data with the rotation property.
The properties that are supported by the FXG <BitmapFill> tag are listed in Graphics classes and elements.
A fill's bitmap data is affected by matrix transformations that you can define on the fill.
To specify the source of a bitmap fill, use the @Embed directive inside the source property. This embeds the source of the fill into the application at compile time.
You cannot specify the source of a bitmap fill at runtime.
FXG example
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/FXGBitmapFillExample.mxml -->
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:comps="comps.*">
<mx:Panel title="BitmapFill Example"
height="75%" width="75%" layout="horizontal"
paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
<s:Group>
<comps:BitmapFillComp/>
</s:Group>
</mx:Panel>
</s:Application>
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/comps/BitmapFillComp.fxg -->
<Graphic xmlns="http://ns.adobe.com/fxg/2008" version="2">
<!-- Draw rectangle that is filled with a repeating bitmap. -->
<Rect height="100" width="200">
<stroke>
<SolidColorStroke color="#000000" weight="2"/>
</stroke>
<fill>
<BitmapFill
source="@Embed('../../assets/AirIcon12x12.gif')"
fillMode="repeat"/>
</fill>
</Rect>
</Graphic>
MXML graphics example
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/BitmapFillExampleMXML.mxml -->
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:comps="comps.*">
<mx:Panel title="BitmapFill MXML Graphic Example"
height="75%" width="75%" layout="horizontal"
paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
<s:Graphic>
<!-- Draw rectangle that is filled with a repeating bitmap. -->
<s:Rect height="100" width="200">
<s:stroke>
<s:SolidColorStroke color="0x000000" weight="2"/>
</s:stroke>
<s:fill>
<s:BitmapFill
source="@Embed('../assets/AirIcon12x12.gif')"
fillMode="repeat"/>
</s:fill>
</s:Rect>
</s:Graphic>
</mx:Panel>
</s:Application>
For more information, see the BitmapFill class in ActionScript 3.0 Reference for Apache Flex.
Bitmap graphics in FXG and MXML graphics
A bitmap graphic defines a rectangular region that is filled with bitmap data from a source file.
In FXG, you use the <BitmapImage> tag to draw a bitmap graphic. In MXML graphics, you use the <s:BitmapImage> tag, or the spark.primitives.BitmapImage class.
A bitmap image can be optionally scaled or repeated to fit the available area. The default behavior is to scale the image to fill the available area. To prevent scaling, set the fillMode property to clip. If the image is larger than the available area, the fill is clipped. To scale the image to the available area, set the fillMode property to scale. To repeat the image in the available area, set the fillMode property to repeat.
The properties that are supported by the FXG <BitmapImage> tag are listed in Graphics classes and elements.
-
PNG
-
GIF
-
JPG
When used in a clip mask, bitmap graphics are treated as bitmap-filled rectangles. As a result, the alpha channel of the source bitmap is not relevant when it is part of a mask. The bitmap affects the mask in the same manner as the solid filled rectangle.
FXG examples
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/BitmapGraphicExample.mxml -->
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:comps="comps.*">
<mx:Panel title="BitmapGraphic Example"
height="75%" width="75%" layout="horizontal"
paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
<s:HGroup>
<!-- Single image, not resized, not repeated. -->
<comps:BitmapGraphicComp/>
<!-- Single image, scaled to fit specified dimensions. -->
<comps:ScaledBitmapGraphicComp/>
<!-- Repeated image to fit specified dimensions. -->
<comps:RepeatedBitmapGraphicComp/>
</s:HGroup>
</mx:Panel>
</s:Application>
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/comps/BitmapGraphicComp.fxg -->
<Graphic xmlns="http://ns.adobe.com/fxg/2008" version="2">
<BitmapImage
height="120"
width="120"
fillMode="clip"
source="@Embed('../../assets/AirIcon12x12.gif')"/>
</Graphic>
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/comps/ScaledBitmapGraphicComp.fxg -->
<Graphic xmlns="http://ns.adobe.com/fxg/2008" version="2">
<BitmapImage
source="@Embed('../../assets/AirIcon12x12.gif')"
height="120"
width="120"
fillMode="scale"
/>
</Graphic>
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/comps/RepeatedBitmapGraphicComp.fxg -->
<Graphic xmlns="http://ns.adobe.com/fxg/2008" version="2">
<BitmapImage
source="@Embed('../../assets/AirIcon12x12.gif')"
width="120"
height="120"
fillMode="repeat"/>
</Graphic>
MXML graphics examples
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/BitmapGraphicExampleMXML.mxml -->
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:comps="comps.*">
<mx:Panel title="Bitmap MXML Graphic Example"
height="75%" width="75%" layout="horizontal"
paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
<s:HGroup>
<!-- Single image, not resized, not repeated. -->
<s:Graphic>
<s:BitmapImage
width="120"
height="120"
fillMode="clip"
source="@Embed('../assets/AirIcon12x12.gif')"/>
</s:Graphic>
<!-- Single image, scaled to fit specified dimensions. -->
<s:Graphic>
<s:BitmapImage
source="@Embed('../assets/AirIcon12x12.gif')"
width="120"
height="120"
fillMode="scale"
/>
</s:Graphic>
<!-- Repeated image to fit specified dimensions. -->
<s:Graphic>
<s:BitmapImage
source="@Embed('../assets/AirIcon12x12.gif')"
width="120"
height="120"
fillMode="repeat"/>
</s:Graphic>
</s:HGroup>
</mx:Panel>
</s:Application>
Ôªø<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/BitmapGraphicExampleAS.mxml -->
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
creationComplete="initApp()">
<fx:Script>
<![CDATA[
import mx.graphics.BitmapFillMode;
[Embed(source="../assets/AirIcon12x12.gif")]
[Bindable]
public var airLogo:Class;
private function initApp():void {
clippedImage.fillMode = BitmapFillMode.CLIP;
repeatedImage.fillMode = BitmapFillMode.REPEAT;
scaledImage.fillMode = BitmapFillMode.SCALE;
}
]]>
</fx:Script>
<mx:Panel title="Bitmap MXML Graphic Example"
height="75%" width="75%" layout="horizontal"
paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
<s:HGroup>
<!-- Single image, not resized, not repeated. -->
<s:Graphic>
<s:BitmapImage id="clippedImage"
width="120" height="120"
source="{airLogo}"/>
</s:Graphic>
<!-- Single image, scaled to fit specified dimensions. -->
<s:Graphic>
<s:BitmapImage id="scaledImage"
width="120" height="120"
source="{airLogo}"/>
</s:Graphic>
<!-- Repeated image to fit specified dimensions. -->
<s:Graphic>
<s:BitmapImage id="repeatedImage"
width="120" height="120"
source="{airLogo}"/>
</s:Graphic>
</s:HGroup>
</mx:Panel>
</s:Application>
For more information on embedding images in MXML, see Embedding assets.
For more information on using the BitmapImage class, see the ActionScript 3.0 Reference for Apache Flex.
Effects in FXG and MXML graphics
You can add effects such as masks, alpha, and blend modes to graphic elements and groups.
-
GraphicElement or Group
-
Alpha
-
Masks
-
Filters
-
Blend modes
Masks in FXG and MXML graphics
You can add masks to any instance group element. A mask defines the region in which the group's content is rendered. There are two kinds of masking: clipping and alpha.
In clip masking, only the actual path, shapes, and fills defined by the mask are used to determine the effect on the source content. Strokes and bitmap filters on the mask are ignored. Filled regions in the mask are considered filled, and Flash Player renders the source content. The type of fill is not relevant: solid color, gradient fill, or bitmap fills in a mask all render the underlying source content, regardless of the alpha values of the mask fill.
In alpha masking, the opacity of each pixel in the source content is multiplied by the opacity of the corresponding region of the mask.
To specify a mask, you add a mask as a child of a group or graphic element. A mask must contain a single child tag, either a Group instance or a locally-defined tag from the library. The mask defines its child to be the clipping mask for its parent.
You set the type of masking to use with the maskType property on the mask's parent graphical element. You can set the value of this property to either alpha or clip.
In FXG, if the <mask> tag is a child of the root tag, then it must be the first tag. If there is a <Library> tag, then it must be the second tag.
FXG example
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/SimpleMaskExample.mxml -->
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:comps="comps.*">
<s:VGroup gap="10" left="10" top="10">
<s:RichText text="Ellipse.maskType = 'alpha'"/>
<comps:AlphaMaskComp/>
<s:RichText text="Ellipse.maskType = 'clip'"/>
<comps:ClipMaskComp/>
</s:VGroup>
</s:Application>
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/comps/AlphaMaskComp.fxg -->
<Graphic xmlns="http://ns.adobe.com/fxg/2008" version="2">
<Ellipse width="400" height="200" maskType="alpha">
<mask>
<Group>
<Rect width="100" height="100">
<fill>
<SolidColor alpha="0.1"/>
</fill>
</Rect>
</Group>
</mask>
<fill>
<SolidColor color="#FF00FF"/>
</fill>
</Ellipse>
</Graphic>
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/comps/ClipMaskComp.fxg -->
<Graphic xmlns="http://ns.adobe.com/fxg/2008" version="2">
<Ellipse width="400" height="200" maskType="clip">
<mask>
<Group>
<Rect width="100" height="100">
<fill>
<SolidColor/>
</fill>
</Rect>
</Group>
</mask>
<fill>
<SolidColor color="#FF00FF"/>
</fill>
</Ellipse>
</Graphic>
MXML graphics example
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/SimpleMaskExampleMXML.mxml -->
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark">
<s:VGroup gap="10" left="10" top="10">
<s:RichText text="Ellipse.maskType = 'alpha'"/>
<s:Ellipse width="400" height="200" maskType="alpha">
<s:mask>
<s:Group>
<s:Rect width="100" height="100">
<s:fill>
<s:SolidColor alpha="0.1"/>
</s:fill>
</s:Rect>
</s:Group>
</s:mask>
<s:fill>
<s:SolidColor color="#FF00FF"/>
</s:fill>
</s:Ellipse>
<s:RichText text="Ellipse.maskType = 'clip'"/>
<s:Ellipse width="400" height="200" maskType="clip">
<s:mask>
<s:Group>
<s:Rect width="100" height="100">
<s:fill>
<s:SolidColor/>
</s:fill>
</s:Rect>
</s:Group>
</s:mask>
<s:fill>
<s:SolidColor color="#FF00FF"/>
</s:fill>
</s:Ellipse>
</s:VGroup>
</s:Application>
Filters in FXG and MXML graphics
A filter effect consists of a series of graphic operations applied to the rendered graphic of a grouping element and its children before compositing it into the background.
Filters can only be defined on shapes and group instances, not group definitions. That means they can be defined on a Group tag placed as an immediate child of a Graphic or other Group tag, or as a child of a library object that references a defined group.
To define a filter in FXG, add the <filters> child tag to the Group or shape you want to apply the filter to. To define a filter in MXML graphics, you add a <s:filters> tag to the Group or shape you want to apply the filter to. The filters are defined in the spark.filters package.
The FXG <filters> child tag and the <s:filters> MXML tag must contain one or more of the bitmap filter types.
Flash Player applies filters to the rendered content of the tag in the order that they appear in the document: the first filter modifies the rendered content, the second filter modifies the output of the first filter, and so on.
|
FXG tag |
Equivalent MXML graphics tag and ActionScript class |
FXG tag attributes |
Children |
|---|---|---|---|
|
BevelFilter |
<s:BevelFilter> |
angle blurX blurY highlightAlpha highlightColor distance knockout quality shadowAlpha shadowColor strength type |
None. |
|
BlurFilter |
<s:BlurFilter> |
blurX blurY quality |
None. |
|
ColorMatrixFilter |
<s:ColorMatrixFilter> |
matrix |
None. |
|
DropShadowFilter |
<s:DropShadowFilter> |
alpha angle blurX blurY color distance inner hideObject knockout quality strength |
None. |
|
GlowFilter |
<s:GlowFilter> |
alpha blurX blurY color inner knockout quality strength |
None. |
|
GradientGlowFilter |
<s:GradientGlowFilter> |
angle blurX blurY distance inner knockout quality strength |
GradientEntry |
|
GradientBevelFilter |
<s:GradientBevelFilter> |
angle blurX blurY distance knockout quality strength type |
GradientEntry |
MXML graphics also support an AnimateFilter effect, that lets you animate a filter at runtime. Unlike effects that animate properties of the target, the AnimateFilter effect animates properties of the filter applied to the target. For more information, see Spark filter effects.
In some cases, you can use the RectangularDropShadow class to apply a drop shadow to a graphic element, rather than using the DropShadowFilter effect. It is more efficient, but limited in some ways.
FXG examples
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/FilteredRectExample.mxml -->
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:comps="comps.*">
<mx:Panel title="Rectangle With DropShadowFilter Example"
height="75%" width="75%" layout="horizontal"
paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
<s:Group>
<comps:FilteredRectComp/>
</s:Group>
</mx:Panel>
</s:Application>
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/comps/FilteredRectComp.fxg -->
<Graphic xmlns="http://ns.adobe.com/fxg/2008" version="2">
<Group>
<filters>
<DropShadowFilter distance="12" alpha=".5" strength=".33"/>
</filters>
<Rect height="100" width="200">
<stroke>
<SolidColorStroke color="#000000" weight="1"/>
</stroke>
<fill>
<SolidColor color="#FF0000"/>
</fill>
</Rect>
</Group>
</Graphic>
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/FilteredTextExample.mxml -->
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:comps="comps.*">
<mx:Panel title="TextGraphic with BlurFilter Example"
height="75%" width="75%" layout="horizontal"
paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
<s:Group>
<comps:TextFilterComp/>
</s:Group>
</mx:Panel>
</s:Application>
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/comps/TextFilterComp.fxg -->
<Graphic xmlns="http://ns.adobe.com/fxg/2008" version="2">
<Group>
<filters>
<BlurFilter/>
</filters>
<RichText>
<content>Hello World!</content>
</RichText>
</Group>
</Graphic>
MXML graphics examples
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/FilteredRectExampleMXML.mxml -->
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:comps="comps.*">
<mx:Panel title="Rectangle With DropShadowFilter MXML Graphics Example"
height="75%" width="75%" layout="horizontal"
paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
<s:Group>
<s:filters>
<s:DropShadowFilter distance="12" alpha=".5" strength=".33"/>
</s:filters>
<s:Rect height="100" width="200">
<s:stroke>
<s:SolidColorStroke color="0x000000" weight="1"/>
</s:stroke>
<s:fill>
<s:SolidColor color="0xFF0000"/>
</s:fill>
</s:Rect>
</s:Group>
</mx:Panel>
</s:Application>
Blend modes in FXG and MXML graphics
Graphical elements can control how their content is composited with the background by specifying a blendMode attribute. A grouping element with the blendMode property set to normal acts only as a transformation on the elements contained within. Its 2D transform, color transform, and opacity are multiplied down into its child elements, where they are combined with any local values to render the child element into the current surface.
In FXG, you specify a blend mode by setting the value of the blendMode attribute on the <Group> or graphic element (like <Rect>).
In MXML graphics, you specify a blend mode by setting the value of the blendMode attribute on the <s:Group> tag or graphic tag (like <s:Rect>). The possible values are defined by the flash.display.BlendMode class.
|
Blend mode |
Description |
|---|---|
|
add |
Adds the values of the constituent colors of the element to the colors of its background, applying a ceiling of 0xFF. |
|
alpha |
Applies the alpha value of each pixel of the element to the background. |
|
auto |
For grouping elements, acts the same as setting the blend mode to normal when the alpha of the group is 0 or 1, and the blend mode is layer when the alpha of the group is strictly between 0 and 1. For shape elements, acts the same as setting the blend mode to normal. |
|
color |
Creates a resulting color with the luminance of the base color and the hue and saturation of the blend color. This preserves the gray levels in the artwork and is useful for coloring monochrome artwork and for tinting color artwork. |
|
colordodge |
Brightens the base color to reflect the blend color. Blending with black produces no change. |
|
colorburn |
Darkens the base color to reflect the blend color. Blending with white produces no change. |
|
darken |
Selects the darker of the constituent colors of the element and the colors of the background (the colors with the smaller values). |
|
difference |
Compares the constituent colors of the element with the colors of its background, and subtracts the darker of the values of the two constituent colors from the lighter value. |
|
erase |
Erases the background based on the alpha value of the element. |
|
exclusion |
Creates an effect similar to but lower in contrast than the Difference mode. Blending with white inverts the base-color components. Blending with black produces no change. |
|
hardlight |
Adjusts the color of each pixel based on the darkness of the element. If the element is lighter than 50% gray, the element and background colors are screened, which results in a lighter color. If the element is darker than 50% gray, the colors are multiplied, which results in a darker color. This setting is commonly used for shading effects. |
|
hue |
Creates a resulting color with the luminance and saturation of the base color and the hue of the blend color. |
|
invert |
Inverts the background. |
|
layer |
The element content is pre-composed in a temporary buffer before it is processed further. |
|
lighten |
Selects the lighter of the constituent colors of the element and the color of the background (the colors with the larger values). |
|
luminosity |
Creates a resulting color with the hue and saturation of the base color and the luminance of the blend color. This mode creates an inverse effect from that of the Color mode. |
|
multiply |
Multiplies the values of the element's constituent colors by the colors of the background color, and then normalizes by dividing by 0xFF, resulting in darker colors. |
|
normal |
The element content appears in front of the background. Pixel values of the element override those of the background. Where the element is transparent, the background is visible. |
|
overlay |
Adjusts the color of each pixel based on the darkness of the background. If the background is lighter than 50% gray, the element and background colors are screened, which results in a lighter color. If the background is darker than 50% gray, the colors are multiplied, which results in a darker color. |
|
saturation |
Creates a resulting color with the luminance and hue of the base color and the saturation of the blend color. Painting with this mode in an area with no saturation (gray) causes no change. |
|
screen |
Multiplies the complement (inverse) of the display object color by the complement of the background color, resulting in a bleaching effect. This setting is commonly used for highlights or to remove black areas of the display object. |
|
softlight |
Darkens or lightens the colors, depending on the blend color. The effect is similar to shining a diffused spotlight on the artwork.If the blend color (light source) is lighter than 50% gray, the artwork is lightened, as if it were dodged. If the blend color is darker than 50% gray, the artwork is darkened, as if it were burned in. Painting with pure black or white produces a distinctly darker or lighter area but does not result in pure black or white. |
|
subtract |
Subtracts the values of the constituent colors in the element from the values of the background color, applying a floor of 0. |
You can also set the blend mode of a shape.
For more information about using blend modes in FXG, see the FXG 2.0 specification.
Color transformations in FXG and MXML graphics
Color transformations are a high performance way to modify the color of a group or shape element. A color transform can be used, for example, to tint a group, adjust its brightness, or modify its opacity.
Color transforms are applied to the rendering of a group or shape element after any bitmap filters are applied; color transforms affect the output of a filter (such as tinting the drop shadow). They are applied before the group element is composited with its background. Blend modes use the transformed color value when combining the group with the background content.
In FXG, you specify a color transformation by adding a <transform> tag as a child tag of a group. The <transform> tag must have a single child tag <Transform>. The <Transform> tag can have a child tag <colorTransform>. The <colorTransform> tag must have a single child tag <ColorTransform>. The supported attributes of the <ColorTransform> tag are shown in Graphics classes and elements.
In MXML graphics, you specify a color transformation with the flash.geom.ColorTransform class.
Transformations are considered instanced group properties, and can only be defined on shape elements and Groups whose parent tag is another grouping element, or on instances of symbols. Specifically, transformations cannot be defined on Groups whose parent tag is a <Definition> tag, or on the topmost <Graphic> tag of an FXG document.
Transformations can be defined on an element in one of two ways: through discrete transform attributes, or through a child Transformation and Matrix element. It is illegal to specify both a child element matrix transformation and one or more transform attributes on the same Group instance.
-
Scale by scaleX, scaleY
-
Rotate by rotation
-
Translate by x, y
For more information about using color transformations in FXG, see the FXG 2.0 specification.
Navigation
Adobe, Adobe Photoshop, Adobe Illustrator, Adobe Fireworks, Adobe Flash Platform and Adobe Flash Player are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries and are used by permission from Adobe. No other license to the Adobe trademarks are granted.