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.

Most FXG elements are roughly equivalent to an MXML graphics class of the same name. But, they do not support all the properties of the MXML graphics class, nor are they backed by ActionScript classes. The following table shows the FXG 2.0 elements and their supported attributes and children. In addition, it lists the equivalent MXML graphics tag:

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.