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.
Bitmap graphics support the following types of images:
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
The following FXG-based example displays bitmap images
in FXG:
<?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>
The executing SWF file for the previous example is shown below:
The following FXG file defines the BitmapGraphicComp FXG component
used in the previous example:
The following MXML graphics example embeds an image and
displays it in three different ways, original size, resized, and
tiled:
<?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>
The executing SWF file for the previous example is shown below:
The following MXML graphics example embeds the image once, and
reuses that embedded class for each of the BitmapImage instances.
It also uses the BitmapFillMode class’s constants to define the
fill mode for each image.
<?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>
The executing SWF file for the previous example is shown below:
For more information on embedding images in MXML, see Embedding assets.
