The Artima Developer Community
Articles | Discuss | Print | Email | Screen Friendly Version | Previous | Next
This article is sponsored by Adobe.

Fills in Flex 4: It's What's on the Inside that Counts
by Chet Haase
August 12, 2010

Advertisements

Summary
With a demo app from his book, Flex 4 Fun, Chet Haase shows how the new graphics primitives in Flex 4 use fills to achieve different rendering effects for the shapes.

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:

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.

Share your opinion

Discuss this article in the Articles Forum topic, Fills in Flex 4: It's What's on the Inside that Counts.

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

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.

Articles | Discuss | Print | Email | Screen Friendly Version | Previous | Next

This article is sponsored by Adobe.

Copyright © 1996-2014 Artima, Inc. All Rights Reserved. - Privacy Policy - Terms of Use - Advertise with Us