This article is sponsored by Adobe.

---

Advertisements

This article is based on material from the book Flex 4 Fun by Chet Haase, available as a PrePrint™ from Artima Press.

In the previous article, Stroke of Genius: Drawing Lines in Flex 4, I discussed how the Flex 4 drawing primitives use a stroke object for drawing lines and outlines. All of the Flex shapes except Line can also have a fill as well as a stroke. The fill specifies what happens on the interior of the object. So, for example, a rectangle's stroke is drawn on the outside of the shape and its fill is the interior of that area. As with stroke, the fill property is optional, so any of these objects can have a stroke or a fill or both or neither (although having neither one makes for a pretty useless shape).

Three types of fills are possible. As with stroke, you can fill with a solid color or a gradient. Additionally, you can fill the area with a bitmap image. We'll discuss solid color and bitmap fills in this article.

Solid color fills

The simplest way to fill an area is with a single solid color. Just like the solid color stroke discussed in the previous article, the solid color fill has the properties color and alpha. These properties are exactly the same for both strokes and fills; see the previous article on strokes for more information on them.

Here is an example of two filled rectangles, from the book's demo SimpleObjects:

    <s:Rect x="150" y="20" width="80" height="80">
        <s:fill>
            <s:SolidColor color="0"/>
        </s:fill>
    </s:Rect>
    <s:Rect x="250" y="20" width="80" height="80">
        <s:fill>
            <s:SolidColor color="black" alpha=".5"/>
        </s:fill>
        <s:stroke>
            <s:SolidColorStroke color="black" weight="5"/>
        </s:stroke>
    </s:Rect>

This code results in the following rectangles on the screen:

The first object is a black-filled rectangle with the default weight (0) and alpha (1). The second object is filled with translucent black (alpha=".5"), making the result gray since the rectangle is drawn over a white background. This second rectangle also has a black, wide stroke object. Note that the opacity of the stroke object is independent of the fill's opacity.

Bitmap fills

Sometimes, you want to fill an area with an image. If you simply want a rectangular image in the scene, it's probably easier to use the Image or BitmapImage class (which is discussed in the Graphics chapter of Flex 4 Fun). But you can fill any arbitrary shape, like a path, rounded rectangle, or circle, with an image using a BitmapFill.

Several properties exist on BitmapFill to define the image resource that the fill uses and the way the image is displayed in the filled area:

• source: defines the bitmap that is displayed in the fill. This parameter is flexible and can be used to specify an embedded image file, an instance of a Bitmap or BitmapData object, or the class name or instance of a display object. Typically, you use an embedded image file, like this: source="@Embed('tree.jpg')".
• smooth: defines whether the image is "smoothed" when it is scaled to a different size than the original bitmap image. By default, smooth is false, which results in using the "nearest neighbor"' approach, where pixels are chosen from the original image based on which one is closest to the current pixel being drawn. This approach is the fastest option when the image is scaled to fit into the fill area, since it requires no calculations. But scaling without smoothing can result in rendering artifacts. If smooth is set to true, scaled images will use a simple bilinear smoothing algorithm, where the pixels to the left, right, top, and bottom of the destination pixel are combined to create a blended pixel value. This property only comes into play when an image is scaled; an image that is displayed in its original resolution will simply use the original pixel values with no smoothing applied.
• fillMode: tells the graphic object how to fill the space in its defined region if the source bitmap is smaller than the dimensions of the BitmapImage in either dimension. Three possible values are available, all of which are specified in the BitmapFillMode class (or using the equivalent strings, like “scale” for BitmapFillMode.SCALE):
  • SCALE: the default value, which causes the bitmap to be scaled (either down or up) to fit the dimensions of the BitmapImage.
  • CLIP: causes the bitmap to be drawn in its original size, either being clipped by the size of the region (if the bitmap is larger than the dimensions of the BitmapImage) or leaving empty space (if the bitmap is smaller).
  • REPEAT: causes the bitmap image to repeat or tile itself inside the region, filling the dimensions of the BitmapImage.
• alpha: represents the amount of translucency that the bitmap fill has. This property acts just like the same property on the solid color fill that we discussed earlier.

BitmapFill also has properties for positioning and transforming the bitmap within the filled area. But those parameters are less commonly used and self-explanatory, so I'll defer to the Flex SDK docs.

Here is a simple example of using a BitmapFill on a rectangle object from the same SimpleObjects demo application:

    <s:Rect x="350" y="20" width="80" height="80">
        <s:fill>
            <s:BitmapFill source="@Embed('images/SanFrancisco.jpg')"/>
        </s:fill>
        <s:stroke>
            <s:SolidColorStroke color="gray" weight="5"/>
        </s:stroke>
    </s:Rect>

This code results in the following rectangle:

The rectangle has a fill with just one parameter specified: the source. Note that the bitmap, by default, scales to fit the area of the object, so little else is needed unless you want to change the way the image is mapped into the area.

To see the other types of strokes, fills, and shapes available, check out the SimpleObjects application on the book site. (Wait for the app to load, click on Graphics under Chapters, then click on SimpleObjects under Demos.) In a future article, we'll talk about another important type of fill, used for achieving very rich effects: gradients.

Resources

Chet Haase is author of Flex 4 Fun, which is available as a PrePrint™ (early access release) at: http://www.artima.com/shop/flex_4_fun

Adobe's Flash Builder 4
http://www.adobe.com/products/flashbuilder

Flex SDK 4
http://opensource.adobe.com/wiki/display/flexsdk/Flex+SDK

For more on states in Flex 4, see "Working with States in Flex 4":
http://www.artima.com/articles/flex_4_states.html

Flex.org
http://www.flex.org

Talk back!

Have an opinion? Be the first to post a comment about this article.

About the author

Chet Haase worked as a senior computer scientist on the Flex SDK team at Adobe Systems, Inc., during the Flex 4 release. He was responsible for Flex effects, and writing the next effects infrastructure and classes for Flex 4. Prior to his work at Adobe, he worked at Sun Microsystems for several years, and co-authored the book Filthy Rich Clients about creating rich user experiences with the Java client platform. His entire career has been in graphics software, from the application level to APIs and libraries to drivers for graphics chips. As long as it puts pixels on the screen, he's interested. He earned a B.A. in Mathematics from Carleton College and an M.S. in Computer and Information Sciences from the University of Oregon.

Chet posts regularly to his technical blog at http://graphics-geek.blogspot.com, where you can find articles, videos, demos, and plenty of source code. Chet is also interested in writing and performing comedy; you can see some his work in this completely unrelated field at http://chetchat.blogspot.com, and in his book When I am King..., which is available at Amazon.com.