Drawing in ActionScript3

ActionScript has a Graphics class that includes many methods (functions) for creating interactive drawings.

In the movie below, a small red square is drawn whenever the user clicks on the stage.

Get Adobe Flash player
stage.addEventListener(MouseEvent.CLICK,drawSquare);
function drawSquare(e:MouseEvent): void {
	this.graphics.beginFill(0xFF0000); //red
	this.graphics.drawRect(e.stageX,e.stageY,10,10);
	this.graphics.endFill();
} //drawSquare

For any drawing that we want to draw, we start by calling beginFill and pass the RGB color that we want to use.
Then we draw the shape, and then we end the fill.

The drawRect method takes 4 arguments: the x and y position for the top left corner, the width and the height. If the width and the height are the same we get a square.

Notice that when you click the top left corner of the square is the position you clicked. If you want the center of the square at the point clicked use this statement:

this.graphics.drawRect(e.stageX-5,e.stageY-5,10,10); //make center of dot the point clicked

Download the movie to experiment.

Experiment: Look at the lesson on RGB colors and try making the squares different sizes and colors. Look at the Adobe documentation on Graphics for a complete list of graphics methods.

NEXT: Drawing Multiple Shapes