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 a previous article, Fills: It's What's on the Inside that Counts, I discussed color and bitmap fills for the new graphics primitives in Flex 4. Shapes can also be filled with both linear and radial gradients for a richer and more modern feel. In this article, I'll show how to use linear gradients.

Linear gradient fills transition through their colors along a straight line. This type of gradient is useful for backgrounds that are much richer than solid colors. It is also useful for some 3D effects, such as making buttons look convex or concave, because it is good at mimicking shadows and highlight dropoff.

The LinearGradient class provides a single property in addition to those inherited from GradientBase: scaleX. This property is responsible for defining the scale factor of the gradient, which is an easy way to define the area covered by the gradient. By default, the gradient fills the area of the target object, but this scale factor can be used to define the gradient pattern over a larger or smaller area. Note that the scale factor is only in the x direction; no scaling in the y direction exists since the gradient only operates in one dimension. So if you want the gradient to be half the size of a 100-pixel wide shape that it fills, you set scaleX = 50.

Here are some simple samples from Flex 4 Fun's SimpleObjects application that show various linear gradient fills inside Rect objects:

    <s:Rect x="20" y="120" width="80" height="80">
        <s:fill>
            <s:LinearGradient>
                <s:GradientEntry color="black"/>
                <s:GradientEntry color="white"/>
                <s:GradientEntry color="gray"/>
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
    <s:Rect x="120" y="120" width="80" height="80">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="0xb0b0b0"/>
                <s:GradientEntry color="0x404040"/>
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
    <s:Rect x="220" y="120" width="80" height="80">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="0x808080"/>
                <s:GradientEntry color="0xa0a0a0" ratio=".25"/>
                <s:GradientEntry color="0x202020"/>
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
    <s:Rect x="320" y="120" width="80" height="80">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="0x808080"/>
                <s:GradientEntry color="0x202020" ratio=".1"/>
                <s:GradientEntry color="0x404040" ratio=".75"/>
                <s:GradientEntry color="0xa0a0a0"/>
            </s:LinearGradient>
        </s:fill>
    </s:Rect>  

This code results in the following:

The first of these rectangles shows a gradient that transitions from black to white to gray. This example uses the default rotation, so the linear gradient proceeds horizontally from left to right. The second example shows a subtle vertical gradient between two shades of gray, caused by using a rotation value of 90. This gradient is appropriate for some application window backgrounds.

The third and fourth examples show the pseudo-3D effects that linear gradients are sometimes used for. The third object simulates a convex object lit from above, where the light shows most at the top of the object. The rounded effect is achieved by having the gradient proceed from one color to a lighter color at a ratio of .25, then down to a darker color at the bottom. The final object shows more of a concave effect, with the light showing most at the bottom of the object.

To see a slightly more involved example, take a look at the example application from the book, LinearGradientProperties, below. The application uses several GUI controls to allow the user to change the gradient colors, the rotation, and other properties of the gradient. The gradient is specified with data bindings to those input values and fills a Rect object as follows:

    <s:Rect id="rect" width="180" height="180">
        <s:stroke>
            <s:SolidColorStroke color="black"/>
        </s:stroke>
        <s:fill>
            <s:LinearGradient rotation="{Number(rotationInput.text)}"
                    x="{Number(xInput.text)}" y="{Number(yInput.text)}"
                    scaleX="{Number(scaleXInput.text)}"
                    spreadMethod="{spreadMethodInput.selectedItem}">
                <s:GradientEntry color="{startColor.selectedColor}"/>
                <s:GradientEntry color="{endColor.selectedColor}"/>
            </s:LinearGradient>
        </s:fill>
    </s:Rect>

The stroke on the Rect is defined just to give the shape a visual boundary. When you run the application, you can play with various properties of the gradient to see how they affect the visual result:

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

Gradients are some of the greatest tools in the toolbox for creating rich applications, particularly because Flex 4 makes them so easy to use: just create your shape and fill it with a gradient. They make backgrounds richer and objects pop out of the screen.

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.