This article is sponsored by Adobe.
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
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
fill property is optional, so any of these objects can have a
stroke or a
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.
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
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
<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
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
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
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
BitmapDataobject, or the class name or instance of a display object. Typically, you use an embedded image file, like this:
smooth: defines whether the image is "smoothed" when it is scaled to a different size than the original bitmap image. By default,
smoothis 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
smoothis 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
BitmapImagein either dimension. Three possible values are available, all of which are specified in the
BitmapFillModeclass (or using the equivalent strings, like “scale” for
SCALE: the default value, which causes the bitmap to be scaled (either down or up) to fit the dimensions of the
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
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.
Discuss this article in the Articles Forum topic, Fills in Flex 4: It's What's on the Inside that Counts.
Chet Haase is author of Flex 4 Fun, which
is available as a PrePrint™ (early access release) at:|
Adobe's Flash Builder 4
For more on states in Flex 4, see "Working with States in Flex 4":
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.
This article is sponsored by Adobe.