Use the beginGradientFill( )
and
endFill( )
methods to initiate and close a shape
drawn at runtime.
In a gradient fill
, there is a graded change in
colors. Flash supports linear gradients, in which one color fades
into the next from left to right. Flash also supports radial
gradients, in which the colors radiate out from a center point. You
can initiate a gradient-filled shape using
beginGradientFill( )
in
the same way you initiate a solid-filled
shape with beginFill( )
. The difference is that
the call to beginGradientFill( )
requires a more
complex set of parameters:
gradientType
Either “linear” for a linear gradient, or “radial” for a radial gradient.
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 (leftmost point in
a linear fill, or innermost point in a radial fill) to 255 (rightmost
or outermost).
matrix
An object with the following properties:
matrixType
This value should always be “box”.
x
The x coordinate of the bottom-left corner of the gradient.
y
The y coordinate of the bottom-left corner of the gradient.
width
The width of the gradient in pixels.
height
The height of the gradient in pixels.
r
The rotation of the gradient in radians (not degrees).
Here is an example that uses a linear gradient to fill a rectangle:
// Include the drawing methods, which are needed for thedrawRectangle( )
method. #include "DrawingMethods.as" // Define the width and height of the rectangle to be drawn and filled. rectWidth = 100; rectHeight = 200; // Create an empty clip into which we will draw the shape. _root.createEmptyMovieClip("shape_mc", 1); shape_mc.lineStyle(3, 0, 100); // Create acolors
array with RGB values for blue, green, and red. colors = [0x0000FF, 0x00FF00, 0xFF0000]; // Create analphas
array in which the colors are 100% opaque. alphas = [100, 100, 100]; // Create aratios
array where pure blue is at the left edge of the gradient, pure // green is in the center, and pure red at the right edge. ratios = [0, 127.5, 255]; // Create thematrix
object. Set thex
andy
coordinates so that the bottom-left // corner of the gradient lines up with the bottom-left corner of the rectangle. Set // thewidth
andheight
of the gradient to match the rectangle. matrix = {matrixType: "box", x: -rectWidth/2, y: -rectHeight/2, w: rectWidth, h: rectHeight, r:0}; // CallbeginGradientFill( )
so that the rectangle will be // filled with a linear gradient. shape_mc.beginGradientFill("linear", colors, alphas, ratios, matrix); // Draw the rectangle with rounded corners (requiresDrawingMethods.as
). shape_mc.drawRectangle(rectHeight, rectWidth, 10); // End the fill. shape_mc.endFill( );
Note that the endFill( )
method is used to end a
drawing operation begun with either beginFill( )
or beginGradientFill( )
.
Here is an example of a radial, gradient fill used to fill an ellipse:
// Include the drawing methods, which are needed for thedrawEllipse( )
method. #include "DrawingMethods.as" // Define the width and height of the ellipse to be drawn and filled. ellipseWidth = 100; ellipseHeight = 200; _root.createEmptyMovieClip("shape_mc", 1); shape_mc.lineStyle(3, 0x000000, 100); // Createcolors
,alphas
, andratios
arrays for white and black, both 100% opaque. // Pure white starts in the center and grades into pure black at the outside edge. colors = [0xFFFFFF, 0x000000]; alphas = [100, 100]; ratios = [0, 255]; // Define thematrix
object. matrix = {matrixType: "box", x: -ellipseWidth/2, y: -ellipseHeight/2, w: ellipseWidth, h: ellipseHeight, r:0}; // Begin the radial fill. shape_mc.beginGradientFill("radial", colors, alphas, ratios, matrix); // Draw the ellipse (requiresDrawingMethods.as
). shape_mc.drawEllipse(ellipseWidth/2, ellipseHeight/2); // End the fill. shape_mc.endFill( );
See Recipe 4.4 and Recipe 4.6 for implementations of the custom
drawRectangle( )
and drawEllipse(
)
methods. See Recipe 4.11
for
details on creating a custom
gradient fill.
No credit card required