Drawing shapes with AS2

Drawing any shapes with Actionscript2 is very easy. In this tutorial I will show you how to draw a basic shape and then, in part 2, how to apply this knowledge into a dynamic application.

1. Open your Flash software, select "new", "Flash document", click "Ok", then go to "Modify", "Document", enter 300 for the width and heigth and enter 30 for the frame rate.

2. Open the "Actions" panel.

3. Copy and Paste this code:

this.createEmptyMovieClip("square_mc", this.getNextHighestDepth());
square_mc.lineStyle(5, 0xff00ff, 100, true, "none", "round", "miter", 1);
square_mc.beginFill(0xFF0000);
square_mc.moveTo(10, 10);
square_mc.lineTo(100, 10);
square_mc.lineTo(100, 100);
square_mc.lineTo(10, 100);
square_mc.lineTo(10, 10);
square_mc.endFill();

4. Hit "Ctrl+Enter" or go to "Control", "Test Movie" to test our Flash movie. You should see this:

Here is what the code does:

this.createEmptyMovieClip("square_mc", this.getNextHighestDepth());

The "this" keyword similar to the one in Javascript refers to the actual "root" of the Flash movie, createEmptyMovieClip is a method of the movieclip class with which we can create dynamic movieclip at run time, it takes two arguments: 1. the name we give it. 2. the depth (z-index). So far, this movieclip is empty, meaning it has no shape, size, color and so on, so let's fix that and draw something inside it.

square_mc.lineStyle(5, 0xff00ff, 100, true, "none", "round", "miter", 1);

Now that we created "square_mc" we can reference it in the code. Here we apply the lineStyle method. It will add a line around the shape we will draw later on. It takes 8 arguments:
1. thickness. 2. color. 3. alpha(transparency) . 4. pixelHinting . 5. the way to react to scaling (default : none) . 6. style of the line. 7 style of the "joint" line. 8. a value that affects how the style "miter" behaves.

square_mc.beginFill(0xFF0000);

beginFill is a method that applies a fill color, it takes 1 argument and must be ended by a endFill method (see later).

square_mc.moveTo(10, 10);

We are about to draw but before that we need to tell Flash where to start. With the method moveTo we are here telling Flash to go to 10 pixel right and 10 pixel down starting from the left top corner of the Flash movie itself.

square_mc.lineTo(100, 10);

Now we draw with the lineTo method. here we tell flash to draw from the point defined with moveTo to 100 pixels to the right of the left top corner and 10 pixels down from the left top corner.

square_mc.lineTo(100, 100);
square_mc.lineTo(10, 100);
square_mc.lineTo(10, 10);

lineTo(100, 100) : bottom right corner of the square. lineTo(10, 100) : bottom left corner of the square. lineTo(10, 10) : top left corner of the square.

square_mc.endFill();

Time to put some color! We tell Flash we are done drawing and it can now apply the fill.

Fairly easy isn't it? If we use only 3 lineTo we will draw a triangle. You can add as many lineTo as you want and draw any shapes. There is also a curveTo method to draw circles and ovals. Now let's do a simple dynamic application of what we learned here.