Tutorial: How to Draw Simple Shapes in AS3


Written By MrSun at 8:00 am - Saturday, September 13th, 2008
Categories: All Tutorials, AS3, Beginner Tutorials, Flash

Hey guys, today we’re going to learn something fun and exciting! That is, drawing shapes in ActionScript 3.0. I’ve actually covered a little bit of this in my platform tutorial, but I want to make it the focus of this tutorial. So, let’s get started shall we?

First of all, we’re going to create a new flash file. Then, we’ll name “Layer 1″ to “actions” because that will be the only layer that we’ll need to use today.

Drawing Circles

In order to draw a circle, we have to place the following code into the first frame:

//defining a new variable that will be the circle
var newCircle:Shape = new Shape();
//now we begin adding a fill to the variable
//this will make the circle red
newCircle.graphics.beginFill(0xFF0000);
//now we call a function that will draw the circle
//the first value (100) is the x value
//the second value (100) is the y value
//and the third value(50), is the radius
//the x and y values count for the center of the circle,
//now the left corner like you'd usually see
newCircle.graphics.drawCircle(100,100,50);
//this function just tells actionscript that we're done
//using this red fill
newCircle.graphics.endFill();
//adding the circle to the stage
addChild(newCircle);

I really commented out this one so hopefully you can understand what this code does. This will just draw a red circle that is 50 pixels in radius, 50 pixels from left and top of the stage. Without the comments, it only takes 5 lines, so it isn’t too complicated.

End Product

(I made the stage a bit smaller)

Drawing Rectangles/Squares

Drawing a rectangle or square is very similar to the circle, except with a different function called. Here’s the commented code for doing so:

var newRect:Shape = new Shape();
newRect.graphics.beginFill(0xFF0000);
//now we call a function that will draw the square
//the first value (50) is the x value
//the second value (50) is the y value
//the third value (100), is the width
//and the final value (100), is the height
newRect.graphics.drawRect(50,50,100,100);
newRect.graphics.endFill();
addChild(newRect);

I just commented the new stuff that was added in.

The End Product

2 Comments

Martin:

ive entered the code correctly, ive double checked and triple checked, but the shape doesnt show on the screen is there some kind o promt to make it appear that you havent mentioned?


Steve:

It’s correct code from what I can understand.

Try (I double drew a sprite which need to be deleted but it works):

package {

import flash.display.*;
import flash.geom.*

public class boat extends Sprite {

var triangleUp:Sprite = new Sprite();
var switchorbfill:Sprite = new Sprite();
var boatcompass:Sprite = new Sprite();

var boatColor = [0x333333];

var backgroundTopColor = [0x777777] //De achtergrond, kan weg.
var backgroundBottomColor = [0x333333]; //De achtergrond, kan weg.

var fillType:String = GradientType.LINEAR;
var backgroundCol:Array = [backgroundTopColor, backgroundBottomColor]; //Dit is de achtergrond, en kan worden verwijderd
var alphas:Array = [1, 1]; //Dit is de achtergrond, en kan worden verwijderd
var ratios:Array = [0, 255]; //Dit is de achtergrond, en kan worden verwijderd
var matrix:Matrix = new Matrix(); //Dit is de achtergrond, en kan worden verwijderd
var gradWidth:Number = 30; //Dit is de achtergrond, en kan worden verwijderd
var gradHeight:Number = 5; //Dit is de achtergrond, en kan worden verwijderd
var gradRotation:Number = 0 / 180 * Math.PI; //Dit is de achtergrond, en kan worden verwijderd
var gradOffsetX:Number = 0-20; //Dit is de achtergrond, en kan worden verwijderd
var gradOffsetY:Number = 0; //Dit is de achtergrond, en kan worden verwijderd
var orbRad:Number=100; //Dit is de achtergrond, en kan worden verwijderd
var gradientBoxMatrix:Matrix = new Matrix(); //Dit is de achtergrond, en kan worden verwijderd

public function boat() {

matrix.createGradientBox(gradWidth, gradHeight, gradRotation, gradOffsetX, gradOffsetY);
var spreadMethod:String = SpreadMethod.PAD;

boatcompass.graphics.lineStyle(3, 0×222222);
boatcompass.graphics.beginGradientFill(fillType, backgroundCol, alphas, ratios, matrix, spreadMethod);
boatcompass.graphics.moveTo(-12, -50);
boatcompass.graphics.curveTo(-8, -65, 0, -85);
boatcompass.graphics.curveTo(8, -65, 12, -50);
boatcompass.graphics.curveTo(18, -30, 20, 0);
boatcompass.graphics.curveTo(20, 40, 10, 72);
boatcompass.graphics.curveTo(0, 82, -10, 72);
boatcompass.graphics.curveTo(-20, 40, -20, 0);
boatcompass.graphics.curveTo(-18, -30, -12, -50);
boatcompass.graphics.endFill();
addChild(boatcompass);

}
}
}


«
»