ActionScript: Filling a Shape with a Gradient

written by: Elis Frugalo; article published: year 2006, month 12;


In: Categories » Computers and technology » Flash » ActionScript: Filling a Shape with a Gradient

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 the drawRectangle(  ) 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 a colors array with RGB values for blue, green, and red.
   colors = [0x0000FF, 0x00FF00, 0xFF0000];
// Create an alphas array in which the colors are 100% opaque.
   alphas = [100, 100, 100];
// Create a ratios 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 the matrix object. Set the x and y coordinates so that the bottom-left 
   // corner of the gradient lines up with the bottom-left corner of the rectangle. Set
   // the width and height of the gradient to match the rectangle.
   matrix = {matrixType: "box", x: -rectWidth/2, y: -rectHeight/2, w: rectWidth, 
   h: rectHeight, r:0};
// Call beginGradientFill(  ) 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 (requires DrawingMethods.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 the drawEllipse(  ) 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);
// Create colors, alphas, and ratios 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 the matrix 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 (requires DrawingMethods.as).
   shape_mc.drawEllipse(ellipseWidth/2, ellipseHeight/2);
// End the fill.
   shape_mc.endFill(  );
 

legal disclaimer

1) Our website is not responsible for the information contained by this article as well for any and all copyright infringements by authors and writers. E-articles is a free information resource. If you suspect this article for any copyright infringements, please read the Terms of service and contact us to investigate the problem.
2) The E-articles directory team is not responsible for inaccuracies, falsehoods, or any other types of misinformation this tutorial may contain and will not be liable for any loss or damage suffered by a user through the user's reliance on the information gained here. Please read the Terms of service

Useful tools and features

Translate this article to...    Send this article to you or to a friend

Link to this article from your page   
If you like this article (tutorial), please link to it from your web page using the information above. Linking to this page, this is the only way to help us improve our service, the same time providing your visitors with a way to improve their online experience.

related articles

1. How to draw a line using ActionScript
Use the lineStyle( ) method to specify the thickness, color, and transparency of the line. Then use the lineTo( ) method to draw a line from the current pen position to a destination point. Before you can draw anything using ActionScript, you need to tell Flash what kind of line style to use. The line style consists of the line's thickness, color, and alpha value (opacity), and you can set these values using the lineStyle( ) method on the movie clip in which you wish to draw. The line's thickness should be specified in pixels, but an...

2. Drawing an Ellipse using ActionScript
Create a custom MovieClip.drawEllipse( ) method using the Drawing API and invoke it on a movie clip. You can create a method of the MovieClip class to draw an ellipse that is very similar to the drawCircle( ) method. In fact, the drawCircle( ) method is merely a degenerate version of drawEllipse( ), in which the radii in the x and y directions are the same. The custom drawEllipse( ) method accepts four parameters: xRadius The radius of the ellipse in the x direction (major axis). yRadius ...

3. Scripting Masks in Flash
Use the Drawing API to create a shape and then use MovicClip.setMask( ) to apply the mask. Masks can be used to create unique shapes or visual effects. For example, you can use masks to create wipes and transitions or interesting animations in which only the masked portion of the artwork is visible at a given time. You can even create masks that change shape over time, and use them to mask bitmapped graphics (in movie clips). You can use any movie clip as a mask of another movie clip using the setMask( ) method. The setMask( ...

4. Drawing a Triangle using ActionScript
Create a custom MovieClip.drawTriangle( ) method using the Drawing API and invoke it on a movie clip. You can determine and plot the vertices of a triangle given the lengths of two sides and the angle between them. This is a better approach than specifying the lengths of the three sides because knowing the lengths of two sides and the angle between them always determines a triangle, whereas three arbitrary sides may not fit together to make a triangle. The custom drawTriangle( ) method accepts six parameters: ab ...

5. ActionScript: Filling a Shape with a Solid or Translucent Color
Use the beginFill( ) and endFill( ) methods to initiate and close a shape drawn at runtime. To draw a filled shape, call beginFill( ) prior to any other drawing methods, including the custom methods you have defined such as drawCircle( ) and drawPolygon( ). Invoke endFill( ) after calling other drawing methods to create the shape. You cannot apply a fill to an existing shape drawn at authoring time or runtime. You must invoke beginFill( ) before drawing the shape to be filled. This example creates a solid blue ...

6. Drawing a rectangle using ActionScript
Create a custom MovieClip.drawSimpleRectangle( ) method using the Drawing API and invoke it on a movie clip. To draw a simple rectangle, specify the stroke's attributes using the lineStyle( ) method and then draw four lines using the lineTo( ) method: // Create rectangle_mc with a depth of 1 on the main timeline. _root.createEmptyMovieClip("rectangle_mc", 1); // Specify a one-pixel, solid, black line. rectangle_mc.lineStyle(1, 0x000000, 100); // Draw four lines to form the perimeter ...

7. How to draw a rectangle with rounded corners
You want to draw a rectangle with rounded corners, an offset, or rotation.Create a custom MovieClip.drawRectangle( ) method using the Drawing API and invoke it on a movie clip. The drawSimpleRectangle( ) method is, as the name suggests, quite simple. Let's create a more complex version that also: Draws a rectangle with a specified angle of rotation Let's you specify the rectangle center's coordinates Can draw a rectangle with rounded corners The drawRectangle( ) method accepts...

8. Reusing and Organizing Code in Flash Movies
You want to reuse code that you've created for one project in another Flash movie. Or you want to write your ActionScript code in an external text editor. Place your ActionScript code in external .as files and use the #include directive to add them to your Flash movies: // Adds all the code within MyActionScriptFile.as to your Flash movie. #include "MyActionScriptFile.as" Use the #include directive to incorporate code from external text files into your Flash movie during compilation from a .fla file ...