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

1. Open your Flash CS3 software, select "new", "Flash File (Actionscript 3) ", 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] var square:Sprite = new Sprite();
addChild(square);
square.graphics.lineStyle(3,0x00ff00);
square.graphics.beginFill(0x0000FF);
square.graphics.drawRect(0,0,100,100);
square.graphics.endFill();
square.x = stage.stageWidth/2-square.width/2;
square.y = stage.stageHeight/2-square.height/2;[/as]

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:

var square:Sprite = new Sprite();

We create a sprite object which is pretty much like a MovieClip but without a timeline.

addChild(square);

We add our sprite to the display list which means we tell Flash that we want this sprite to be displayed.

square.graphics.lineStyle(3,0x00ff00);

We assign a graphics object to our sprite (If you worked with Java that might seem pretty familiar). Then we assign a line style to the graphic object.

square.graphics.beginFill(0x0000FF);

We assign a fill color to our graphic object.

square.graphics.drawRect(0,0,100,100);

We draw a rectangle using the drawRect() function.

square.graphics.endFill();

We tell Flash we are done drawing. (the other two lines of code are for positioning).

Now since there are many platforms and many ways to write AS3 code, I'm going to try to make this tutorial as versatile as possible so here is a document class version that you can use with a Flex Actionscript project or simply by using the document class box in the Flash CS3 environment. So copy and paste the following code in Notepad for example and save it as simple_shape.as:

[as] package{
import flash.display.Sprite;
public class simple_shape extends Sprite{
var square:Sprite;
public function simple_shape(){
square = new Sprite();
addChild(square);
square.graphics.lineStyle(3,0x00ff00);
square.graphics.beginFill(0x0000FF);
square.graphics.drawRect(0,0,100,100);
square.graphics.endFill();
square.x = stage.stageWidth/2-square.width/2;
square.y = stage.stageHeight/2-square.height/2;
}}
}[/as]

Now in Flex, set this file as the document class, and in Flash CS3 write "simple_shape" in the document class box. Run the example.

Now starting from a document class, it's easy enough to create a real class out of it so I'll leave that up to you.

We can as easily create a rounded rectangle:

[as]var square:Sprite = new Sprite();
addChild(square);
square.graphics.lineStyle(3,0x00ff00);
square.graphics.beginFill(0x0000FF);
square.graphics.drawRoundRect(0,0,100,100,20);
square.graphics.endFill();
square.x = stage.stageWidth/2-square.width/2;
square.y = stage.stageHeight/2-square.height/2; [/as]

Document Class (simple_rounded_shape.as):

[as]package{

import flash.display.Sprite;
public class simple_rounded_shape extends Sprite{
var square:Sprite;
public function simple_rounded_shape(){
square = new Sprite();
addChild(square);
square.graphics.lineStyle(3,0x00ff00);
square.graphics.beginFill(0x0000FF);
square.graphics.drawRoundRect(0,0,100,100,20);
square.graphics.endFill();
square.x = stage.stageWidth/2-square.width/2;
square.y = stage.stageHeight/2-square.height/2;
}}
} [/as]

And here is the result:



You can of course get a total control on how the shape is drawn with the good old moveTo() and lineTo() methods:

[as]var square:Sprite = new Sprite();
addChild(square);
square.graphics.lineStyle(3,0x00ff00);
square.graphics.beginFill(0x0000FF);
drawShape(square);
square.graphics.endFill();
square.x = stage.stageWidth/2-square.width/2;
square.y = stage.stageHeight/2-square.height/2;

function drawShape(sprite:Sprite):void{
sprite.graphics.lineStyle(3,0x00ff00);
sprite.graphics.beginFill(0x0000FF);
sprite.graphics.moveTo(0,0);
sprite.graphics.lineTo(100,0);
sprite.graphics.lineTo(100,100);
sprite.graphics.lineTo(0,100);
sprite.graphics.lineTo(0,0);
sprite.graphics.endFill();
}[/as]

Document Class (simple_lineTo_shape.as):

[as]package{ import flash.display.Sprite; public class simple_lineTo_shape extends Sprite{ var square:Sprite; public function simple_lineTo_shape(){
square = new Sprite();
addChild(square);
square.graphics.lineStyle(3,0x00ff00);
square.graphics.beginFill(0x0000FF);
drawShape(square);
square.graphics.endFill();
square.x = stage.stageWidth/2-square.width/2;
square.y = stage.stageHeight/2-square.height/2;
}
private function drawShape(sprite:Sprite):void{
sprite.graphics.lineStyle(3,0x00ff00);
sprite.graphics.beginFill(0x0000FF);
sprite.graphics.moveTo(0,0);
sprite.graphics.lineTo(100,0);
sprite.graphics.lineTo(100,100);
sprite.graphics.lineTo(0,100);
sprite.graphics.lineTo(0,0);
sprite.graphics.endFill();
}}
}[/as]

MoveTo() and lineTo() methods were already part of AS2 and I covered how to use them in details in this AS2 tutorial. These are actualy the methods that we will need most of the time if we want to create a dynamic shape. Let's see that in the next page.

Let's create a simple dynamic shape to illustrate the concepts of moveTo() and lineTo() methods. We are going to create four little squares and draw a big square going through the little squares, as we'll move the little squares, the big one will redraw itself.

First, let's create our four little squares:

[as]var arrayOfLittleSquare:Array = new Array();
var Xpos:Number = 50;
var Ypos:Number = 50;
for(var i:uint = 0; i<4; i++){
var littleSquare:Sprite = new Sprite();
addChild(littleSquare);
arrayOfLittleSquare.push(littleSquare);
littleSquare.graphics.beginFill(0x000000);
drawShape(littleSquare,10,10);
littleSquare.graphics.endFill();
littleSquare.x = Xpos;
littleSquare.y = Ypos;
Xpos+=100;
if(Xpos>150){
Xpos = 50;
Ypos+=100;
}
}
function drawShape(sprite:Sprite,Width:Number, Height:Number):void{
sprite.graphics.moveTo(-Width/2,-Height/2);
sprite.graphics.lineTo(Width/2,-Height/2);
sprite.graphics.lineTo(Width/2,Height/2);
sprite.graphics.lineTo(-Width/2,Height/2);
sprite.graphics.lineTo(-Width/2,-Height/2);
} [/as]

I use arrayOfLittleSquare to store the little squares so I can reference them later on. I'll show the document class version at the end. Now let's draw the big square. We create a new Sprite, add it to the display list before the little squares so it'll be under them, then we create a function that will draw the square according to the little square positions:

[as]var arrayOfLittleSquare:Array = new Array();
var Xpos:Number = 50;
var Ypos:Number = 50;
var square:Sprite = new Sprite();//new line
addChild(square);//new line
for(var i:uint = 0; i<4; i++){
var littleSquare:Sprite = new Sprite();
addChild(littleSquare);
arrayOfLittleSquare.push(littleSquare);
littleSquare.graphics.beginFill(0x000000);
drawShape(littleSquare,10,10);
littleSquare.graphics.endFill();
littleSquare.x = Xpos;
littleSquare.y = Ypos;
Xpos+=100;
if(Xpos>150){
Xpos = 50;
Ypos+=100;
}}
drawDynamicShape(square);//new line function drawShape(sprite:Sprite,Width:Number, Height:Number):void{
sprite.graphics.moveTo(-Width/2,-Height/2);
sprite.graphics.lineTo(Width/2,-Height/2);
sprite.graphics.lineTo(Width/2,Height/2);
sprite.graphics.lineTo(-Width/2,Height/2);
sprite.graphics.lineTo(-Width/2,-Height/2);
}
function drawDynamicShape(sprite:Sprite):void{//new function
sprite.graphics.clear();
sprite.graphics.beginFill(0x0000FF);
sprite.graphics.moveTo(arrayOfLittleSquare[0].x,arrayOfLittleSquare[0].y);
sprite.graphics.lineTo(arrayOfLittleSquare[1].x,arrayOfLittleSquare[1].y);
sprite.graphics.lineTo(arrayOfLittleSquare[3].x,arrayOfLittleSquare[3].y);
sprite.graphics.lineTo(arrayOfLittleSquare[2].x,arrayOfLittleSquare[2].y);
sprite.graphics.lineTo(arrayOfLittleSquare[0].x,arrayOfLittleSquare[0].y);
sprite.graphics.endFill();
}[/as]

Notice the clear() method at the beginning of the new drawDynamicShape function. It erases anything that was drawn in the graphics object before. Not relevant so far but when the code will be complete we'll call this function many times and so we want the display to be refreshed and the old grapics to be cleared. Now if you compile this you'll see a big blue square with at each of its corner 4 little black squares. Now we need to be able to drag the little squares, so we add two MouseEvent listeners so we can startDrag our little square and stopDrag them as well, we add also the corresponding functions:

[as]var arrayOfLittleSquare:Array = new Array();
var Xpos:Number = 50;
var Ypos:Number = 50;
var square:Sprite = new Sprite();
addChild(square);
for(var i:uint = 0; i<4; i++){
var littleSquare:Sprite = new Sprite();
addChild(littleSquare);
arrayOfLittleSquare.push(littleSquare);
littleSquare.graphics.beginFill(0x000000);
drawShape(littleSquare,10,10);
littleSquare.graphics.endFill();
littleSquare.x = Xpos;
littleSquare.y = Ypos;
Xpos+=100;
if(Xpos>150){
Xpos = 50;
Ypos+=100;
}
arrayOfLittleSquare[i].addEventListener(MouseEvent.MOUSE_DOWN, dragSquares);//new line
arrayOfLittleSquare[i].addEventListener(MouseEvent.MOUSE_UP, stopSquares);//new line
}
drawDynamicShape(square) function dragSquares(e:MouseEvent):void{//new function
e.target.startDrag();
}
function stopSquares(e:MouseEvent):void{//new function
e.target.stopDrag();
}
function drawShape(sprite:Sprite,Width:Number, Height:Number):void{
sprite.graphics.moveTo(-Width/2,-Height/2);
sprite.graphics.lineTo(Width/2,-Height/2);
sprite.graphics.lineTo(Width/2,Height/2);
sprite.graphics.lineTo(-Width/2,Height/2);
sprite.graphics.lineTo(-Width/2,-Height/2);
}
function drawDynamicShape(sprite:Sprite):void{
sprite.graphics.clear();
sprite.graphics.beginFill(0x0000FF);
sprite.graphics.moveTo(arrayOfLittleSquare[0].x,arrayOfLittleSquare[0].y);
sprite.graphics.lineTo(arrayOfLittleSquare[1].x,arrayOfLittleSquare[1].y);
sprite.graphics.lineTo(arrayOfLittleSquare[3].x,arrayOfLittleSquare[3].y);
sprite.graphics.lineTo(arrayOfLittleSquare[2].x,arrayOfLittleSquare[2].y);
sprite.graphics.lineTo(arrayOfLittleSquare[0].x,arrayOfLittleSquare[0].y);
sprite.graphics.endFill();
}[/as]

So far so good, now we just need to add an enterframe event that calls our drawDynamicShape() and you are done. When the mouse is down we add the enterFrame event, when the mouse is up we remove it, easy!

[as]var arrayOfLittleSquare:Array = new Array();
var Xpos:Number = 50;
var Ypos:Number = 50;
var square:Sprite = new Sprite();
addChild(square);
for(var i:uint = 0; i<4; i++){
var littleSquare:Sprite = new Sprite();
addChild(littleSquare);
arrayOfLittleSquare.push(littleSquare);
littleSquare.graphics.beginFill(0x000000);
drawShape(littleSquare,10,10);
littleSquare.graphics.endFill();
littleSquare.x = Xpos;
littleSquare.y = Ypos;
Xpos+=100;
if(Xpos>150){
Xpos = 50;
Ypos+=100;
}
arrayOfLittleSquare[i].addEventListener(MouseEvent.MOUSE_DOWN, dragSquares);
arrayOfLittleSquare[i].addEventListener(MouseEvent.MOUSE_UP, stopSquares);
}
drawDynamicShape(square) function dragSquares(e:MouseEvent):void{
e.target.startDrag();
e.target.addEventListener(Event.ENTER_FRAME, redrawShape);//new line
}
function stopSquares(e:MouseEvent):void{
e.target.stopDrag();
e.target.removeEventListener(Event.ENTER_FRAME, redrawShape);//new line
}
function drawShape(sprite:Sprite,Width:Number, Height:Number):void{
sprite.graphics.moveTo(-Width/2,-Height/2);
sprite.graphics.lineTo(Width/2,-Height/2);
sprite.graphics.lineTo(Width/2,Height/2);
sprite.graphics.lineTo(-Width/2,Height/2);
sprite.graphics.lineTo(-Width/2,-Height/2);
}
function redrawShape(e:Event):void{//new function that we use to call the drawDynamicShape function
drawDynamicShape(square);
}
function drawDynamicShape(sprite:Sprite):void{
sprite.graphics.clear();
sprite.graphics.beginFill(0x0000FF);
sprite.graphics.moveTo(arrayOfLittleSquare[0].x,arrayOfLittleSquare[0].y);
sprite.graphics.lineTo(arrayOfLittleSquare[1].x,arrayOfLittleSquare[1].y);
sprite.graphics.lineTo(arrayOfLittleSquare[3].x,arrayOfLittleSquare[3].y);
sprite.graphics.lineTo(arrayOfLittleSquare[2].x,arrayOfLittleSquare[2].y);
sprite.graphics.lineTo(arrayOfLittleSquare[0].x,arrayOfLittleSquare[0].y);
sprite.graphics.endFill();
}[/as]

Now if you run this example you should see this:



And here is the document Class version:

[as]package{ import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.events.Event; public class simple_lineTo_dynamic_shape extends Sprite{ var arrayOfLittleSquare:Array = new Array();
var Xpos:Number = 50;
var Ypos:Number = 50;
var square:Sprite = new Sprite(); public function simple_lineTo_dynamic_shape(){ addChild(square);
for(var i:uint = 0; i<4; i++){
var littleSquare:Sprite = new Sprite();
addChild(littleSquare);
arrayOfLittleSquare.push(littleSquare);
littleSquare.graphics.beginFill(0x000000);
drawShape(littleSquare,10,10);
littleSquare.graphics.endFill();
littleSquare.x = Xpos;
littleSquare.y = Ypos;
Xpos+=100;
if(Xpos>150){
Xpos = 50;
Ypos+=100;
}
arrayOfLittleSquare[i].addEventListener(MouseEvent.MOUSE_DOWN, dragSquares);
arrayOfLittleSquare[i].addEventListener(MouseEvent.MOUSE_UP, stopSquares);
}
drawDynamicShape(square)
}
function dragSquares(e:MouseEvent):void{
e.target.startDrag();
e.target.addEventListener(Event.ENTER_FRAME, redrawShape);
}
function stopSquares(e:MouseEvent):void{
e.target.stopDrag();
e.target.removeEventListener(Event.ENTER_FRAME, redrawShape);
}
function drawShape(sprite:Sprite,Width:Number, Height:Number):void{
sprite.graphics.moveTo(-Width/2,-Height/2);
sprite.graphics.lineTo(Width/2,-Height/2);
sprite.graphics.lineTo(Width/2,Height/2);
sprite.graphics.lineTo(-Width/2,Height/2);
sprite.graphics.lineTo(-Width/2,-Height/2);
}
function redrawShape(e:Event):void{
drawDynamicShape(square);
}
function drawDynamicShape(sprite:Sprite):void{
sprite.graphics.clear();
sprite.graphics.beginFill(0x0000FF);
sprite.graphics.moveTo(arrayOfLittleSquare[0].x,arrayOfLittleSquare[0].y);
sprite.graphics.lineTo(arrayOfLittleSquare[1].x,arrayOfLittleSquare[1].y);
sprite.graphics.lineTo(arrayOfLittleSquare[3].x,arrayOfLittleSquare[3].y);
sprite.graphics.lineTo(arrayOfLittleSquare[2].x,arrayOfLittleSquare[2].y);
sprite.graphics.lineTo(arrayOfLittleSquare[0].x,arrayOfLittleSquare[0].y);
sprite.graphics.endFill();
}}
}[/as]

Have fun with this and you can always contact me via my website for any questions.