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:
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)
There are two ways to configure the matrix object, the more common of which contains the following properties:
Following is an example of the syntax used to create a gradient-filled shape: _root.createEmptyMovieClip("holder_mc", 1); with (_root.holder_mc) { lineStyle(0, 0x000000, 0); rotation = 90 * (Math.PI/180); colors = [ 0x6666FF, 0xFF6600 ]; alphas = [ 100, 100 ]; ratios = [ 0, 255 ]; matrix = {matrixType:"box", x:0, y:150, w:200, h:100, r:rotation }; beginGradientFill( "linear", colors, alphas, ratios, matrix ); moveTo(0,0); lineTo(550,0); lineTo(550,300); lineTo(0,300); lineTo(0,0); endFill(); } This example creates a square and fills it with a gradient. The lines of the square have an alpha of 0 so you can't see them. You'll probably need to test beginGradientFill() a few times to feel comfortable using it. |