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.

You may want to draw lines in your UI to achieve a particular effect, like borders on filled areas, outlines on empty areas, or separator lines between different elements in the interface. These may be straight or curved lines, or bounding lines around larger, filled areas. These lines can be drawn in different ways, with different colors, widths, and joins at the corners. These line properties are defined as strokes on the objects.

All of the graphics objects in Flex 4 except for BitmapImage have an optional stroke property that defines the characteristics of the object's lines, like their color and width. For the one-dimensional Line object, the stroke is all there is; it's all that you see of the object. For the rest of the objects, Path, Rect, and Ellipse, the stroke is the border line around the object's filled area.

Strokes come in three varieties: SolidColorStroke, which has a single color, and two strokes that use gradients, LinearGradientStroke and RadialGradientStroke. For now, we'll talk about solid color strokes, which is the common case for lines.

A stroke has a few properties that are necessary for specific situations, but for which the defaults are generally sufficient. For example, the joints and miterLimit properties are useful for controlling how the intersections look with multi-segment stroked objects like Path and Rect. And the scaleMode property controls how scaling on the object affects the width of the stroke. Here we'll focus on just the more common stroke properties used to achieve particular effects on the stroke.

• weight: determines the width of the stroke in pixels. A value of 0 is equal to a one-pixel-wide line, but the line stays at that thickness even when scaled. This behavior is in contrast to that when weight equals 1, which also results in a one-pixel-wide line on an unscaled object. But a line with weight equal to 1 will scale with the object so an object with a scale factor of 2 will have lines twice as wide as that object with a scale factor of 1.
• color: an unsigned integer value that describes the red, green, and blue (RGB) values that contribute to the final color value. This is a standard RGB representation in an integer, where the bottom-most (least significant) byte represent the blue value, the next byte holds the green value, and the next byte holds the red value. You can picture the color in hex form as the number 0xRRGGBB. The left-most (most significant) byte of the 32-bit value is unused.
  For convenience, the MXML compiler will turn standard color names into the appropriate integer values. You can also use the numeric form of a color in either hex, integer, or HTML-color formats. For example, color="blue" is equivalent to color="0xff" and color="255" and color="#FF".
• alpha: the amount of translucency that the object's stroke has. A value of 1 causes the stroke to be completely opaque (nothing behind the object's stroke can be seen through it). A value of 0 causes the stroke to be completely transparent (the stroke is not seen at all, and objects behind it are fully visible). Any value between 0 and 1 causes the stroke to be translucent, allowing both the stroke and the objects behind it to be partially visible, with greater values of alpha making the stroke more opaque. The opacity of the overall object you create is typically controlled with the object's alpha property, not the object's stroke's alpha, but if you want separate control over the stroke's opacity, use this property.

Here is an example of two lines drawn with different strokes:

    <s:Line xFrom="20" yFrom="20" xTo="100" yTo="100">
        <s:stroke>
            <s:SolidColorStroke color="black"/>
        </s:stroke>
    </s:Line>
    <s:Line xFrom="100" yFrom="20" xTo="20" yTo="100">
        <s:stroke>
            <s:SolidColorStroke color="gray" alpha=".6" weight="10"/>
        </s:stroke>
    </s:Line>

The first object is a black line with the default weight (0) and alpha (1). The second object is a wide gray that is translucent (note that you can see the black line through the wide gray line), as seen here:

The StrokeTest application helps visualize how the various stroke parameters affect the look of our stroked primitives. This code draws a Rect object with a stroke whose properties come from the input controls in the application:

    <s:Rect x="20" y="170" width="30" height="30"
            scaleX="{Number(scaleXInput.text)}" 
            scaleY="{Number(scaleYInput.text)}">
        <s:stroke>
            <s:SolidColorStroke color="black"
                weight="{Number(weightInput.text)}"
                miterLimit="{Number(miterLimitInput.text)}"
                joints="{jointsInput.selectedItem}"
                scaleMode="{scaleModeInput.selectedItem}"/>
            </s:stroke>
    </s:Rect>

The Rect object takes its scale factors from the text input fields so that you can see how scaling in either direction affects the results. The stroke object is an instance of SolidColorStroke with a color of black. The stroke object has other properties that are bound to the values of the various controls in the GUI. Here is the application that you can play with to see how the stroke properties affect the results:

Either scripts and active content are not permitted to run or Adobe Flash Player version 10.0.0 or greater is not installed.

The application is pretty simple as Flex applications go. The interesting part is in how the properties affect the look of the graphic primitive. Play with the application to get a feel for how the properties interact.

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.