SynerCoding

Requirements:
The very beginning

In this tutorial I will teach you how to draw things using actionscript.

In actionscript you have a class called Graphics. This class can be used to draw things into a Shape or a Sprite (or any that extends those). You cant make a object of the graphics class so calling var something:Graphics = new Graphics(); WILL NOT WORK. You need to use the build in graphics of the shape or sprite.

The graphics class has the following methods that we will use in this tutorial:
Part 1:

• beginFill
• endFill
• drawCircle
• drawEllipse
• drawRect
• drawRoundRect

Part 2:

• moveTo
• lineTo
• curveTo
• lineStyle
• clear

We start by making a simple class that extends the sprite class.

package
{
	import flash.display.Sprite;
 
	[SWF(width='640', height='480', backgroundColor='#000000', frameRate='20')]
	public class GraphicTest extends Sprite
	{
 
		public function GraphicTest()
		{
			//do stuff
		}
	}
}

Save this file as GraphicTest.as in your main actionscript directory.

Now we will draw a simple circle and a square into our class. This we do by a few simple steps. First we need to say what kind of fill it needs. Lets say we want a red circle. So we call the beginFill function. This function takes 2 parameters from which one is optional. We can set the color and optionally the alpha (if not specified it is set to 1). So we call by saying

this.graphics.beginFill(0xFF0000);

After that we can do all the drawings that we want to be red. After all the drawings we close with

this.graphics.endFill();

public function GraphicTest()
{
	this.graphics.beginFill(0xFF0000);
	//all the red drawings
	this.graphics.endFill();
}

Now we want to draw a circle. Therefor we can use the function drawCircle OR drawEllipse.
If you want a perfect circle the drawCircle is your best option. If you want a ellipse you can use the drawEllipse function. We will use the drawCircle function. It takes 3 parameters. The first is the X coordinate, the second the Y coordinate and the last is the radius. Let say we want to position the circle with X = 100 and Y = 200 and it needs a 50px radius.

this.graphics.drawCircle(100,200,50);

Now our function looks like this:

public function GraphicTest()
{
	this.graphics.beginFill(0xFF0000);
	this.graphics.drawCircle(100,200,50);
	this.graphics.endFill();
}

Now you can save this file again and compile it. Test it now. You should see a red circle.
We could now add a orange rectangle. First we say beginFill again (but now with the orange color code: FF8800). Then we call the drawRect function (needs x,y,width,height) and then the endFill again.

Now our function looks like this:

public function GraphicTest()
{
	this.graphics.beginFill(0xFF0000);
	this.graphics.drawCircle(100,200,50);
	this.graphics.endFill();
 
	this.graphics.beginFill(0xFF8800);
	this.graphics.drawRect(50,100,200,50);
	this.graphics.endFill();
}

Now we have added a 200px x 50px rectangle to position x = 50 and y = 100;

If you like you could give the corners a rounded look. This you can do by calling the drawRoundRect function. This function takes 6 parameters. The first 4 are the same as the drawRect function but this function add 2 parameters. The ellipseWidth and ellipseHeight. You don’t have to set the ellipseHeight. Cause if you don’t it will be the same as the ellipseWidth. Lets say we replace the orange rectangle by a rounded rectangle with corners of 10px radius. Our code would look like this:

public function GraphicTest()
{
	this.graphics.beginFill(0xFF0000);
	this.graphics.drawCircle(100,200,50);
	this.graphics.endFill();
 
	this.graphics.beginFill(0xFF8800);
	this.graphics.drawRoundRect(50,100,200,50,10);
	this.graphics.endFill();
}

If you save and compile again the orange rectangle should now have rounded corners.

Complete code:
GraphicTest.as

package
{
	import flash.display.Sprite;
 
	[SWF(width='640', height='480', backgroundColor='#000000', frameRate='20')]
	public class GraphicTest extends Sprite
	{
 
		public function GraphicTest()
		{
				this.graphics.beginFill(0xFF0000);
				this.graphics.drawCircle(100,200,50);
				this.graphics.endFill();
 
				this.graphics.beginFill(0xFF8800);
				this.graphics.drawRoundRect(50,100,200,50,10);
				this.graphics.endFill();
		}
	}
}

This was it for part 1.
Using the drawing api. Part 2