Nội dung Text: Creating Filled Shapes Dynamically

< Day Day Up >
Creating Filled Shapes Dynamically
Even though we're not going to devote an exercise to the topic, drawing filled shapes is
still worth discussing.
By building on the syntax you've used thus far in this lesson, you can use the drawing
methods to create a shape and then fill it with a single color (a flat fill) or a gradient (a
gradient fill).
To create a flat fill, you must let Flash know that the shape you're about to draw will be
filled. You do this by employing the following method:
path.beginFill(color,alpha)
The path points to the timeline where the lines will exist. The color parameter accepts a
hex color value. The alpha parameter accepts a number between 0 and 100 to set the
alpha level of the fill. To let Flash know when you're finished drawing a shape, use the
following method:
path.endFill()
The following example shows how this method is used:
_root.createEmptyMovieClip("box_mc",1);
with (_root.box_mc) {
lineStyle(0,0x000000,100);
beginFill(0x990000,100);
moveTo(0,0);
lineTo(100,0);

lineTo(100,100);
lineTo(0,100);
lineTo(0,0);
endFill();
}
This ActionScript does the following:
1. Creates an empty movie clip instance.
2. Sets the line style.
3. Initiates the fill.
4. Draws a shape.
5. Ends the fill.
It's important to note that when creating a filled shape, the starting point of the shape, as
defined by moveTo(), must also be the ending point of the shape, as defined by the last
lineTo().
Creating a gradient fill is a little more difficult than creating a flat fill. You must first tell
Flash that the shape you're about to draw is to be filled with a gradient. The syntax is as
follows:
path.beginGradientFill(type, colors, alphas, ratios, matrix)

• The type parameter accepts the string linear or radial.
• The colors parameter is an array of hex color values that you want to use in your
gradient. This array can contain two or more elements.
• The alphas parameter is an array of alpha values to be applied to each respective
color. This array should have the same number of elements as the colors array.
• The ratios parameter is an array of elements that contain values between 0 and
255. These values determine the color distribution.
• The matrix parameter of the beginGradientFill() method contains values that are
used to move, skew, and rotate the gradient.
There are two ways to configure the matrix object, the more common of which contains
the following properties:
• matrixType is a variable with a value of "box". You must set it so that Flash
knows which type of matrix you're using.
• x is the x position at which to start the gradient. Flash uses the upper-left corner of
the overall gradient to place this gradient.
• y is the y position at which to start the gradient. Flash uses the upper-left corner of
the overall gradient to place this gradient.
• w is the width of the gradient.
• h is the height of the gradient.
• r is the rotation of the gradient (in radians).