Flash CS3 Documentation

Learning ActionScript 2.0 in Adobe Flash > Animation, Filters, and Drawings > Drawing with ActionScript > Drawing specific shapes

Drawing specific shapes

This section shows you how to create some more flexible methods that you can use to draw more advanced shapes, such as rounded rectangles and circles.

To create a rectangle:

1. Create a new Flash document and save it as rect.fla.
2. Add the following ActionScript code to Frame 1 of the Timeline:

   this.createEmptyMovieClip("rectangle_mc", 10);
   rectangle_mc._x = 100;
   rectangle_mc._y = 100;
   drawRectangle(rectangle_mc, 240, 180, 0x99FF00, 100);
   function drawRectangle(target_mc:MovieClip, boxWidth:Number, boxHeight:Number, fillColor:Number, fillAlpha:Number):Void {
       with (target_mc) {
           beginFill(fillColor, fillAlpha);
           moveTo(0, 0);
           lineTo(boxWidth, 0);
           lineTo(boxWidth, boxHeight);
           lineTo(0, boxHeight);
           lineTo(0, 0);
           endFill();
       }
   }
   

3. Save your Flash document and select Control > Test Movie to test the Flash document.

   Flash draws a simple green rectangle on the Stage and positions it at 100,100. To change the dimensions of the rectangle, or its fill color or transparency, you can change those values within the call to the drawRectangle() method instead of having to modify the contents of the MovieClip.beginFill() method.

You can also create a rectangle with rounded corners using the Drawing API, as the following procedure shows.

To create a rounded rectangle:

1. Create a new Flash document and save it as roundrect.fla.
2. Add the following ActionScript code to Frame 1 of the Timeline:

   this.createEmptyMovieClip("rectangle_mc", 10);
   rectangle_mc._x = 100;
   rectangle_mc._y = 100;
   drawRoundedRectangle(rectangle_mc, 240, 180, 20, 0x99FF00, 100);
   function drawRoundedRectangle(target_mc:MovieClip, boxWidth:Number, boxHeight:Number, cornerRadius:Number, fillColor:Number, fillAlpha:Number):Void {
       with (target_mc) {
           beginFill(fillColor, fillAlpha);
           moveTo(cornerRadius, 0);
           lineTo(boxWidth - cornerRadius, 0);
           curveTo(boxWidth, 0, boxWidth, cornerRadius);
           lineTo(boxWidth, cornerRadius);
           lineTo(boxWidth, boxHeight - cornerRadius);
           curveTo(boxWidth, boxHeight, boxWidth - cornerRadius, boxHeight);
           lineTo(boxWidth - cornerRadius, boxHeight);
           lineTo(cornerRadius, boxHeight);
           curveTo(0, boxHeight, 0, boxHeight - cornerRadius);
           lineTo(0, boxHeight - cornerRadius);
           lineTo(0, cornerRadius);
           curveTo(0, 0, cornerRadius, 0);
           lineTo(cornerRadius, 0);
           endFill();
       }
   }
   

3. Save the Flash document and select Control > Test Movie to test the document.

   A green rectangle appears on the Stage that is 240 pixels wide and 180 pixels high with 20-pixel rounded corners. You can create multiple instances of rounded rectangles by creating new movie clips using MovieClip.createEmptyMovieClip() and calling your custom drawRoundedRectangle() function.

You can create a perfect circle using the Drawing API, as the following procedure shows.

To create a circle:

1. Create a new Flash document and save as circle2.fla.
2. Add the following ActionScript code to Frame 1 of the Timeline:

   this.createEmptyMovieClip("circle_mc", 10);
   circle_mc._x = 100;
   circle_mc._y = 100;
   drawCircle(circle_mc, 100, 0x99FF00, 100);
   
   function drawCircle(target_mc:MovieClip, radius:Number, fillColor:Number, fillAlpha:Number):Void {
       var x:Number = radius;
       var y:Number = radius;
       with (target_mc) {
           beginFill(fillColor, fillAlpha); 
           moveTo(x + radius, y);
           curveTo(radius + x, Math.tan(Math.PI / 8) * radius + y, Math.sin(Math.PI / 4) * radius + x, Math.sin(Math.PI / 4) * radius + y);
           curveTo(Math.tan(Math.PI / 8) * radius + x, radius + y, x, radius + y);
           curveTo(-Math.tan(Math.PI / 8) * radius + x, radius+ y, -Math.sin(Math.PI / 4) * radius + x, Math.sin(Math.PI / 4) * radius + y);
           curveTo(-radius + x, Math.tan(Math.PI / 8) * radius + y, -radius + x, y);
           curveTo(-radius + x, -Math.tan(Math.PI / 8) * radius + y, -Math.sin(Math.PI / 4) * radius + x, -Math.sin(Math.PI / 4) * radius + y);
           curveTo(-Math.tan(Math.PI / 8) * radius + x, -radius + y, x, -radius + y);
           curveTo(Math.tan(Math.PI / 8) * radius + x, -radius + y, Math.sin(Math.PI / 4) * radius + x, -Math.sin(Math.PI / 4) * radius + y);
           curveTo(radius + x, -Math.tan(Math.PI / 8) * radius + y, radius + x, y);
           endFill();
       }
   }
   

3. Save your Flash document and select Control > Test Movie to test the SWF file.

This code creates a more complex, and realistic, circle than the previous circle example. Instead of only using four calls to the curveTo() method, this example uses eight calls to the curveTo() method, which gives the shape a much rounder appearance.

You can use the Drawing API to create a triangle, as the following procedure shows.

To create a fancy triangle:

1. Create a new Flash document and save it as fancytriangle.fla.
2. Add the following ActionScript to Frame 1 of the Timeline:

   this.createEmptyMovieClip("triangle_mc", 10);
   triangle_mc._x = 100;
   triangle_mc._y = 100;
   drawTriangle(triangle_mc, 100, 0x99FF00, 100);
   
   function drawTriangle(target_mc:MovieClip, sideLength:Number, fillColor:Number, fillAlpha:Number):Void {
       var tHeight:Number = sideLength * Math.sqrt(3) / 2;
       with (target_mc) {
           beginFill(fillColor, fillAlpha);
           moveTo(sideLength / 2, 0);
           lineTo(sideLength, tHeight);
           lineTo(0, tHeight);
           lineTo(sideLength / 2, 0);
           endFill();
       }
   }
   

   The Drawing API draws an equilateral triangle on the Stage and fills it with the specified fill color and amount of alpha (transparency).

3. Save the Flash document and select Control > Test Movie to test the Flash document.

For a sample source file which shows you how to use the Drawing API in a Flash application, drawingapi.fla, see the Flash Samples page at www.adobe.com/go/learn_fl_samples. Download the Samples zip file and navigate to the ActionScript2.0/DrawingAPI folder to access this sample.

Flash CS3