Previous Page
Next Page

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(  );


Previous Page
Next Page
Converted from CHM to HTML with chm2web Pro 2.85 (unicode)