Flash, Flex and ActionScript Resources -
Drawing shapes with AS2
Jean André Mas
Graphic designer converted since 2004 to coding. I play around with C++, OpenGL, Java, Javascript, AND Actionscript.
My website: ASWC 
By Jean André Mas
Published on February 21, 2008
Level: Beginner.
Duration: 10 minutes.
Prerequisites: a basic knowledge of actionscript.

Drawing shapes with AS2 Part1

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:

[as]this.createEmptyMovieClip("square_mc", this.getNextHighestDepth());
square_mc.lineStyle(5, 0xff00ff, 100, true, "none", "round", "miter", 1);
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);

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:

[as]this.createEmptyMovieClip("square_mc", this.getNextHighestDepth());[/as]

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.

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

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.


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

[as]square_mc.moveTo(10, 10);[/as]

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.

[as]square_mc.lineTo(100, 10);[/as]

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.

[as]square_mc.lineTo(100, 100);
square_mc.lineTo(10, 100);
square_mc.lineTo(10, 10);[/as]

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.


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.

Drawing shapes with AS2 part2

Drawing shapes with AS2

A shape that we draw with actionscript doesn't have to stay static. In this second part, we will create a dynamic shape.

1. Create a new Flash document following the instructions from part1.

2. Add this code to the "Actions" panel.

[as]for (var i:Number=1; i<5;i++){
this.createEmptyMovieClip("drag"+i+"_mc", this.getNextHighestDepth());
this["drag"+i+"_mc"].moveTo(10, 10);
this["drag"+i+"_mc"].lineTo(20, 10);
this["drag"+i+"_mc"].lineTo(20, 20);
this["drag"+i+"_mc"].lineTo(10, 20);
this["drag"+i+"_mc"].lineTo(10, 10);

We created a for loop with which we created 4 squares named, drag1_mc, drag2_mc, drag3_mc, drag4_mc. Note this particuliar way to access the newly created movieclips, this["drag"+i+"_mc"] , this refers to the root of the flash file where you can access any movieclip in "array" style. We also set a behavior for these new movieclips, onpress and onrelease. When we will click and hold on one of these movieclips, we will be able to drag them, when we will release them, they will stay where they are.

3. You can already test this movie and drag these little black moviclips on the stage.

4. but we will use these movieclips to draw a shape and then play around with the shape, so now we need to place these black movieclips around the stage:

5. copy and paste this code after the code we already put:

drag4_mc._y=150; [/as]

6. We can set the position of a moviclip using its _x and _y properties. This is what we do here. We reference the movieclip and access the property using dot notation then assign a value. Here is the result:

7. Now let's draw the dynamic shape. To make it dynamic we need to use a dynamic event or a setInterval() (like in javascript), I chose to use an onEnterFrame event. Copy and paste this code after the code we have so far:

this.createEmptyMovieClip("square_mc", 1);
square_mc.moveTo(drag1_mc._x+drag1_mc._width, drag1_mc._y+drag1_mc._height);
square_mc.lineTo(drag2_mc._x+drag2_mc._width*2, drag2_mc._y+drag2_mc._height);
square_mc.lineTo(drag3_mc._x+drag3_mc._width*2, drag3_mc._y+drag3_mc._height*2);
square_mc.lineTo(drag4_mc._x+drag4_mc._width, drag4_mc._y+drag4_mc._height*2);
square_mc.lineTo(drag1_mc._x+drag1_mc._width, drag1_mc._y+drag1_mc._height);

We use a dynamic event (onEnterFrame) to update regularly our screen. We draw a shape using our little black movieclip coordinates as references. Now you can test the movie and drag the little black squares around to play with this dynamic shape!

Contact me if you have any issues when trying this tutorial.