To create a gradient fill, you must first understand its component parts. First is the type of gradient: linear or radial. Next is a set of parallel arrays (arrays with an equal number of objects in the same order) that represent up to 15 colors in the gradient. These arrays contain the color values themselves, their alpha values, and the amount of the total gradient each color is meant to occupy, respectively. Finally, an optional matrix can be used to rotate, scale, skew, or offset the location of the gradient. Here is the gradient fill creation segment:
var gradType:String = GradientType.LINEAR; var colors:Array = [0x000000, 0x000000]; var alphas:Array = [1, 0]; var ratios:Array = [0, 255]; var matrix:Matrix = new Matrix(); matrix.createGradientBox(100, 100, 0, 0, 0);
The color values use standard hexadecimal notation. The alpha values are expressed in decimal notation of percent values between 0 and 1. However, the ratio of color quantity, is expressed as an increasing set of numbers between 0 and 255, representing their position along the gradient.
An equally spaced two-color gradient, such as this example uses, is created using the two extreme values of 0 and 255. Both colors are full at the ends of the gradient, and mix together in the middle. Adding another equally spaced third color would require a ratio array of 0, 127, and 255. Finally, to skew a gradient toward one dominant color, you might use a ratio array of 0 and 127. This would show the first color in one third of the gradient and mix over to the second color that occupied two thirds of the gradient.
The last part of creating a gradient is the optional matrix to
manipulate its position, scale, and angle. You create the matrix with
the standard use of the
but editing it can get complex. Fortunately, you have a special method
Matrix class specifically for
The eponymous method accepts a width, height, rotation, horizontal
translation, and vertical translation to manipulate the gradient for
This example uses a width and height that matches the size of the rectangle itself, and no horizontal or vertical translation is specified, so the full gradient is visible. With a rotation of 0, the gradient moves from first color to last color, in a left to right direction.
Finally, these values are passed into the
beginGradientFill() method (used in place of
beginFill() method of prior
recipes) in the order discussed: gradient type, color array, alpha
array, ratio array, and matrix. The result is a smooth gradient from
opaque black to transparent.
var sp:Sprite = new Sprite(); addChild(spMask); sp.x = sp.y = 100; var g:Graphics = sp.graphics; g.beginGradientFill(gradType, colors, alphas, ratios, matrix); g.drawRect(0, 0, 100, 100); g.endFill();