Drawing Built-in Shapes

When you graduate from lines to shapes, you get to fill your shapes with a color. The lineStyle() method becomes optional, because shapes don't have to have an outline stroke. You can draw simple shapes using ActionScript's built-in methods. The technique is very similar to drawing lines and curves with the addition of the beginFill() method that lets you choose a color and transparency percentage for the fill color. Here's the step-by-step for drawing a rectangle and a circle in a MovieClip. You can find all the code in 18-4_Draw_Shape.fla in the Missing CD (www.missingmanuals.com/cds):

Select File→New and choose ActionScript 3.0.
A new, empty Flash document appears.
Press F9 (Option-F9 on a Mac).
The Actions panel opens, where you can enter ActionScript code.
Type this line into the Actions panel to create an instance of the mcShapes MovieClip class:
```
var mcShapes:MovieClip = new MovieClip();
```
MovieClip is one of three data types that let you draw vector graphics. The other two classes are Sprite and Shape.
Define a lineStyle() for your first shape:
```
mcShapes.graphics.lineStyle(4,0x003300,.75);
```
This statement uses the Graphics class, which is a property of the MovieClip class. As explained on Drawing Lines, the lineStyle() method can accept several parameters. This code uses three parameters, and the remaining ones are left unchanged from their original values. The first parameter sets the line or stroke thickness to 4 pixels. The second parameter provides a hexadecimal color value (dark green) for the line color. The third and last parameter sets the transparency for the line to 75%.
Define a fill style for your shape:
```
mcShapes.graphics.beginFill(0x339933, .75);
```
The method to fill a shape is beginFill(). The beginFill() method uses only two parameters. The first sets the fill color, a lighter green, and the second sets the transparency to 75%.
Position the mcShapes movie clip on the stage:
```
mcShapes.x=mcShapes.y=50;
```
This line sets both the x and y properties of mcShapes to 50 in one statement. You can use this form or use separate statements for each property.
Use the built-in drawRect() method to define a rectangle.
```
mcShapes.graphics.drawRect(0,0,300,250);
```
The first two parameters for drawRect() set the x and y values for the rectangle. Set at 0,0, the rectangle is positioned in the upper-left corner of the mcShapes movie clip; but keep in mind that the movie clip is positioned at 50, 50 on the stage. The next two parameters set the rectangle's width and height values. In this case, the rectangle is 300 pixels wide and 250 pixels high. As with the other vector drawings, even though you've defined the object, it won't be visible until you add it to the Display List.
Use the endFill() method to stop filling the shape:
```
mcShapes.graphics.endFill();
```
The endFill() method doesn't use any paramaters.
Use the addChild method to display the movie clip mcShapes:
```
addChild(mcShapes);
```
The addChild method adds the movie clip to the Display List, which makes its contents visible.
Test the animation.
When the animation runs, the rectangle appears with its registration point (upper-left corner) at 50, 50 on the stage. Though you gave the stroke and fill some transparency, the rectangle looks pretty solid because it's on a plain white background.
Set new colors for the stroke and fill for a second shape, the circle:
```
mcShapes.graphics.lineStyle(4,0x0033CC,.5);
mcShapes.graphics.beginFill(0x003333,.5);
```
These are the same methods used in steps 4 and 5, but you're changing the color values to shades of blue and setting the transparency to 50%.
Use the built-in drawCircle() method to define a circle and then use the endFill() method to stop filling the shape.
```
mcShapes.graphics.drawCircle(275,100,75);
mcShapes.graphics.endFill();
```
To define a circle, you need to provide the drawCircle() method with a center point and a radius. The first two parameters are the x and y values of the center point. The third parameter is the radius, which means this circle will be 150 pixels in diameter. The endFill() method stops filling the shape.
Test the animation.
When the animation runs, the circle appears overlapping the rectangle as shown in Figure 18-5. The rectangle (the first shape you defined) appears on the bottom. Both the rectangle and the circle are positioned relative to their container mcShapes, not to the stage.
Figure 18-5. These two shapes are drawn on a movie clip that's positioned at 50, 50 on the stage. The rectangle was defined first, so it appears underneath the circle.

ActionScript includes two other built-in shapes, and you use them the same way: Define the stroke and fill, use one of the drawing methods to create the shape, and then use the addChild() method to display the shape. All that varies from shape to shape are the parameters you use to describe them. Here are definitions and a brief explanation for each built-in shape:

drawEllipse(x:Number, y:Number, width:Number, height:Number). The first two parameters position the center of the ellipse. The next two parameters set the dimensions for the ellipse.
drawRoundRect(x:Number, y:Number, width:Number, height:Number, ellipseWidth:Number, ellipseHeight:Number). The first two parameters are numbers that position the rectangle using its registration point. The next two parameters set the rectangle's width and height. The last two parameters, ellipseWidth and ellipseHeight, define the curve for the rounded corners. If the curves are equal, you can set just the first number, ellipseWidth, and ignore the second value. If the curve isn't equal, use both parameters to set different width and height values.

If you entered the statements in this exercise line by line, following the instructions, the code in your Actions panel looks something like this:

var mcShapes:MovieClip = new MovieClip();

mcShapes.graphics.lineStyle(4,0x003300,.75);
mcShapes.graphics.beginFill(0x339933, .75);
mcShapes.x=mcShapes.y=50;
mcShapes.graphics.drawRect(0,0,300,250);
mcShapes.graphics.endFill();

addChild(mcShapes);

mcShapes.graphics.lineStyle(4,0x0033CC,.5);
mcShapes.graphics.beginFill(0x003333,.5);
mcShapes.graphics.drawCircle(275,100,75);
mcShapes.graphics.endFill();

The order of the statements in this code is worth a closer look. First of all, even though the addChild() statement precedes the definition for the circle, the circle appears in the movie clip when it's added to the Display List. Also, the first shape defined, the rectangle, appears beneath the circle. You can change its position by changing its position in the code. If you want the rectangle to appear on top of the circle in the movie clip, move the code that defines the rectangle to follow the code that defines the circle.