Flash CS4 Resources |
## Creating gradient lines and fillsThe graphics object can also draw strokes and fills with
gradients rather than solid colors. A gradient stroke is created
with the Both methods accept the same parameters. The first four are required: type, colors, alphas, and ratios. The remaining four are optional but are useful for advanced customizing. The first parameter specifies the type of gradient you are creating. Acceptable values are `GradientType.LINEAR`or`GradientType.RADIAL`.The second parameter specifies the array of the color values to use. In a linear gradient, the colors will be arranged from left to right. In a radial gradient, they will be arranged from inside to outside. The order of the colors of the array represents the order that the colors will be drawn in the gradient. The third parameter specifies the alpha transparency values of the corresponding colors in the previous parameter. The fourth parameter specifies ratios, or the emphasis each color has within the gradient. Acceptable values range from 0-255. These values do not represent any width or height, but rather the position within the gradient; 0 represents the beginning of the gradient, 255 represents the end of the gradient. The array of ratios must increase sequentially and have the same number of entries as both the color and alpha arrays specified in the second and third parameters.
Although the fifth parameter, the transformation matrix, is optional,
it is commonly used because it provides an easy and powerful way
to control the gradient’s appearance. This parameter accepts a Matrix
instance. The easiest way to create a Matrix object for a gradient
is to use the Matrix class’s ## Defining a Matrix object for use with a gradientYou use the The easiest way to define the matrix is by using the Matrix class’s Gradient box width: the width (in pixels) to which the gradient will spread Gradient box height: the height (in pixels) to which the gradient will spread Gradient box rotation: the rotation (in radians) that will be applied to the gradient Horizontal translation: how far (in pixels) the gradient is shifted horizontally Vertical translation: how far (in pixels) the gradient is shifted vertically
For example, consider a gradient with the following characteristics: `GradientType.LINEAR`Two colors, green and blue, with the `ratios`array set to`[0, 255]``SpreadMethod.PAD``InterpolationMethod.LINEAR_RGB`
The following examples show gradients in which the
The following examples show the effects on a green-to-blue linear
gradient in which the
The
The following code produces the last radial gradient illustrated: import flash.display.Shape; import flash.display.GradientType; import flash.geom.Matrix; var type:String = GradientType.RADIAL; var colors:Array = [0x00FF00, 0x000088]; var alphas:Array = [1, 1]; var ratios:Array = [0, 255]; var spreadMethod:String = SpreadMethod.PAD; var interp:String = InterpolationMethod.LINEAR_RGB; var focalPtRatio:Number = 0; var matrix:Matrix = new Matrix(); var boxWidth:Number = 50; var boxHeight:Number = 100; var boxRotation:Number = Math.PI/2; // 90° var tx:Number = 25; var ty:Number = 0; matrix.createGradientBox(boxWidth, boxHeight, boxRotation, tx, ty); var square:Shape = new Shape; square.graphics.beginGradientFill(type, colors, alphas, ratios, matrix, spreadMethod, interp, focalPtRatio); square.graphics.drawRect(0, 0, 100, 100); addChild(square); Note that the width and height of the gradient fill is determined
by the width and height of the gradient matrix rather than the width
or height that is drawn using the Graphics object. When drawing
with the Graphics object, you draw what exists at those coordinates
in the gradient matrix. Even if you use one of the shape methods
of a Graphics object such as The following illustrates the visual difference between the dimensions of the gradient matrix and the dimensions of the draw itself: var myShape:Shape = new Shape(); var gradientBoxMatrix:Matrix = new Matrix(); gradientBoxMatrix.createGradientBox(100, 40, 0, 0, 0); myShape.graphics.beginGradientFill(GradientType.LINEAR, [0xFF0000, 0x00FF00, 0x0000FF], [1, 1, 1], [0, 128, 255], gradientBoxMatrix); myShape.graphics.drawRect(0, 0, 50, 40); myShape.graphics.drawRect(0, 50, 100, 40); myShape.graphics.drawRect(0, 100, 150, 40); myShape.graphics.endFill(); this.addChild(myShape); This code draws three gradients with the same fill style, specified
with an equal distribution of red, green, and blue. The gradients
are drawn using the The var myShape:Shape = new Shape(); var gradientBoxMatrix:Matrix = new Matrix(); gradientBoxMatrix.createGradientBox(200, 40, 0, 0, 0); myShape.graphics.lineStyle(5, 0); myShape.graphics.lineGradientStyle(GradientType.LINEAR, [0xFF0000, 0x00FF00, 0x0000FF], [1, 1, 1], [0, 128, 255], gradientBoxMatrix); myShape.graphics.drawRect(0, 0, 200, 40); this.addChild(myShape); For more information on the Matrix class, see Using Matrix objects. |