Flash CS3 Documentation

Learning ActionScript 2.0 in Adobe Flash > Animation, Filters, and Drawings > Drawing with ActionScript > Using drawing methods to draw lines, curves, and shapes

Using drawing methods to draw lines, curves, and shapes

You can use the Flash Drawing API to dynamically create shapes on the Stage at runtime. You can use these shapes to dynamically mask content, apply filters to them, or animate them around the Stage. You can also use the Drawing API to create various drawing tools, which let users use the mouse or keyboard to draw shapes on the SWF file.

To draw a line:

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

   this.createEmptyMovieClip("line_mc", 10);
   line_mc.lineStyle(1, 0x000000, 100);
   line_mc.moveTo(0, 0);
   line_mc.lineTo(200, 100);
   line_mc._x = 100;
   line_mc._y = 100;
   

   This code draws a line from 0,0 on the Stage to 200,100. The line's _x and _y coordinates are then modified to reposition the line to 100,100 on the Stage.

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

To draw a more complex shape, continue calling the MovieClip.lineTo() method and draw a rectangle, square, or oval, as the following procedures show.

To draw a curve:

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

   this.createEmptyMovieClip("circle_mc", 1);
   with (circle_mc) {
       lineStyle(4, 0x000000, 100);
       beginFill(0xFF0000);
       moveTo(200, 300);
       curveTo(300, 300, 300, 200);
       curveTo(300, 100, 200, 100);
       curveTo(100, 100, 100, 200);
       curveTo(100, 300, 200, 300);
       endFill();
   }
   

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

   This code uses the Drawing API to draw a circle on the Stage. The circle shape uses only four calls to the MovieClip.curveTo() method and therefore can look a little distorted. For another example that uses the Drawing API to create a circle, see the procedure on creating a circle under Drawing specific shapes for code that uses eight calls to the MovieClip.curveTo() method to draw a more realistic circle.

To draw a triangle:

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

   this.createEmptyMovieClip("triangle_mc", 1);
   

   This code uses the MovieClip.createEmptyMovieClip() method to create an empty movie clip on the Stage. The new movie clip is a child of an existing movie clip (in this case, the main timeline).

3. Add the following ActionScript to Frame 1 of the Timeline, following the code you added in the preceding step:

   with (triangle_mc) {
       lineStyle(5, 0xFF00FF, 100);
       moveTo(200, 200);
       lineTo(300, 300);
       lineTo(100, 300);
       lineTo(200, 200);
   }
   

   In this code, the empty movie clip (triangle_mc) calls drawing methods. This code draws a triangle with 5-pixel purple lines and no fill.

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

For detailed information on these methods, see their entries in MovieClip in the ActionScript 2.0 Language Reference.

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