Drawing Irregular Shapes

When you draw the built-in shapes, ActionScript does a lot of the work for you, but you're limited to the shapes that ActionScript offers. Sometimes you need to draw irregular shapes. For example, suppose you needed to draw a floor plan for a modern home with a number of odd angles and curves. In that case, you need to draw each line and curve separately. To fill the shape with a color, use the beginFill() method when you begin drawing lines. Then, when you're finished with the shape, use endFill().

For example, here's some code that draws a very irregular shape that includes a variety of angles and one curved edge (see Figure 18-6). Open a new document and type the following into the Actions panel—or you can use 18-5_Draw_Irregular_Shape.fla from the Missing CD (www.missingmanuals.com/cds):

1  var mcShapes:MovieClip = new MovieClip();
2
3  mcShapes.graphics.lineStyle(4,0x330000,.5);
4  mcShapes.graphics.beginFill(0xFF3300,.5);
5  mcShapes.graphics.moveTo(200,50);
6  mcShapes.graphics.lineTo(300,150);
7  mcShapes.graphics.lineTo(400,150);
8  mcShapes.graphics.curveTo(425,175,400,200);
9  mcShapes.graphics.lineTo(200,200);
10 mcShapes.graphics.lineTo(200,150);
11 mcShapes.graphics.lineTo(100,150);
12 mcShapes.graphics.lineTo(200,50);
13 mcShapes.graphics.endFill();
14
15 addChild(mcShapes);

If you worked your way through the previous sections in this chapter, most of this will look familiar. The first two lines set the line style and the fill color. The third line moves the virtual pen to point 200, 50. Following that are several lineTo() methods with one curveTo() method added for good measure. If you want to match up the code with the lines in the shape, see Figure 18-6. These lines form a closed path when the last lineTo() method ends up back at the beginning: 200, 50. The final line runs the endFill() method.

Note

Flash fills shapes even if they aren't entirely enclosed. So, even if line 12 (the line that closes the shape) was missing in the example above, Flash would still apply a fill to the shape that's defined by the rest of the lines.

Figure 18-6. This illustration shows the irregular shape drawn by the code. The callouts show the end points for the moveTo(), lineTo(), and curveTo() methods. You can find the complete statements in the code on the facing page.

When you test your animation (Ctrl+Enter on a PC or ⌘-Return on a Mac) you see an image like Figure 18-6.