ASWebCreations.com

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 height and enter 30 for the frame rate.

2. Open the “Actions” panel.

3. Copy and Paste this code:

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;

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() method.

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:

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;
}}
}

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:

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;

Document Class (simple_rounded_shape.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;
}}
}

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:

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();
}

Document Class (simple_lineTo_shape.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();
}}
}

MoveTo() and lineTo() methods were already part of AS2 and I covered how to use them in details in this AS2 tutorial. These are actually 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.