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

Summary

With a demo app from his book, Flex 4 Fun, Chet Haase shows how the new graphics primitives in Flex 4 use linear gradients to get a richer look.

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:

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:

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:

To view this page ensure that Adobe Flash Player version
10.0.0 or greater is installed.

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.

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.