Drawing in ActionScript3

When we draw shapes, we must start in the back, and then draw additional shapes on top.

In the movie below, a small red square with a blue dot in the middle 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-10,e.stageY-10,20,20); //make center of dot the point clicked
this.graphics.endFill();
this.graphics.beginFill(0x0000FF); //blue
this.graphics.drawEllipse(e.stageX-5,e.stageY-5,10,10); //draw circle in center
this.graphics.endFill();
} //drawSquare

Notice that we draw the red square first, and then draw the bnlue dot on top. The center of the drawing is the point we clicked. Since the square is 20 by 20, we started the drawing at e.stageX-10,e.stageY-10 (10 away from the point clicked) so that the center of the square is in the center. The blue dot has a width and height of 10 so we started drawing it 5 away from 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 a Face