Recipe 7.13.
Filling a Shape with a Gradient
Problem
You want
to draw a shape and fill it with a gradient at runtime.
Solution
Use the beginGradientFill( ) and
endFill( ) methods to
initiate and close a shape drawn at runtime.
Discussion
A gradient fill
is one in which there is a graded change in colors. Flash supports
linear gradients, in which one color fades into the next from left
to right. (If you want the gradient to change vertically then you
can simply rotate the gradient using the matrix transform discussed
in this recipe.) Flash also supports radial gradients, in which the
colors radiate out from a center point. You can initiate a
gradient-filled shape by using beginGradientFill( ) in the
same way that you can initiate a solid-filled shape with
beginFill( ). The difference is that the call to
beginGradientFill( ) requires a more complex set of
parameters:
gradientType
-
One of the constants from the
flash.display.GradientType class. The options are
LINEAR or RADIAL.
colors
-
An array of RGB values for the colors to use in
the gradient. They are displayed in the gradient from left to right
in a linear gradient, or from the center outward in a radial
gradient.
alphas
-
An array of alpha values that correspond to the
colors in the colors parameter
array.
ratios
-
An array whose elements are numbers
corresponding to the colors and
alphas elements. The values in the
ratios array indicate the point
within the gradient at which each color is pure. The range of
values for the ratios should be
from 0 (left-most point in a linear fill, or inner-most point in a
radial fill) to 255 (rightmost or outer-most).
matrix
-
A flash.geom.Matrix object that
defines the transform to apply to the gradient. The default
gradient is a unit gradient (1x1) that must be transformed to
correctly fill the shape. The Matrix class defines a
createGradientBox( ) method that you can use to populate the
object. The createGradientBox( ) method accepts the
following parameters:
scaleX
-
The amount by which the object is scaled
horizontally. Since the gradient that's being transformed is a unit
gradient (1x1) the scaleX value is equal to the width of the
fill.
scaleY
-
The amount by which the object is scaled
vertically. Since the gradient that's being transformed is a unit
gradient (1x1) the scaleY value is equal to the height of
the fill.
rotation
-
The amount to rotate the gradient in radians.
You can convert from degrees to radians by multiplying by
Math.PI/180. The default value is 0.
tx
-
The amount to translate in the x direction. The default is 0.
ty
-
The amount to translate in the y direction The default is 0.
spreadMethod
-
One of the flash.display.SpreadMethod
constants. The options are PAD, REFLECT, and
REPEAT. The default is PAD. When the method is
PAD, the gradient is padded on either side with the colors
on the sides. For example, if a gradient is defined to be 100
pixels wide with red on the left side and blue on the right side,
and if the gradient is applied to a rectangle that is 200 pixels
wide, the blue will fill the right-most 100 pixels of the
rectangle. If the method is REFLECT, then the gradient
continually repeats in a mirror-image fashion. Using the same
100-pixel red to blue gradient example, the gradient will fill a
200-pixel-pixel rectangle with red to blue and blue to red when the
spreadMethod parameter is set to REFLECT. When the
method is set to REPEAT, the gradient repeats end to
end.
interpolationMethod
-
One of the constants of the
flash.display.InterpolationMethod class. The options are
LINEAR_RGB and RGB. The default is RGB.
The interpolation method affects how colors gradate.
focalPointRatio
-
A value from -1 to 1 indicating the focal point
for radial gradients (there is no effect for linear gradients). The
default value is 0, which places the focal point in the center. A
value of -1 places the focal point to the left edge of the
gradient, and a value of 1 places the focal point to the right edge
of the gradient.
The following example draws a radial gradient
that fills a circle:
var matrix:Matrix = new Matrix( );
matrix.createGradientBox(100, 100, 0, 50, 50);
var colors:Array = [0xFF0000, 0x0000FF];
var alphas:Array = [100, 100];
var ratios:Array = [0x00, 0xFF];
sampleSprite.graphics.lineStyle( );
sampleSprite.graphics.beginGradientFill(GradientType.GRADIENT, colors, alphas, ratios, matrix);
sampleSprite.graphics.drawCircle(100, 100, 50);
sampleSprite.graphics.endFill( );
|