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.

The following types of fills are supported by FXG and MXML graphics:

  • 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>
The executing SWF file for the previous example is shown below:
The following FXG file defines the SolidColorComp FXG component used in the previous example:
<?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

The following example draws a rectangle and fills it with a SolidColor fill at 50% opacity:
<?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>
The executing SWF file for the previous example is shown below:

For more information, see the SolidColor class in the ActionScript 3.0 Reference for the Adobe Flash Platform.

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

The following FXG-based example uses a LinearGradient fill:
<?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>
The executing SWF file for the previous example is shown below:
The following FXG file defines the LinearGradientComp FXG component used in the previous example:
<?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

The following MXML graphics example draws a rectangle and fills it with a LinearGradient fill:
<?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>
The executing SWF file for the previous example is shown below:

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

The following FXG-based example uses a radial gradient in an FXG component:
<?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>
The executing SWF file for the previous example is shown below:
The following FXG file defines the RadialGradientComp FXG component used in the previous example:
<?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

The following MXML graphics example draws a rectangle and fills it with a RadialGradient fill:
<?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>
The executing SWF file for the previous example is shown below:

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

The following FXG-based example defines a BitmapFill for a rectangle:
<?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>
The executing SWF file for the previous example is shown below:
The following file defines the BitmapFillComp FXG component used in the previous example:
<?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

The following MXML graphics example defines a bitmap fill:
<?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>
The executing SWF file for the previous example is shown below:

For more information, see the BitmapFill class in ActionScript 3.0 Reference for the Adobe Flash Platform.