Drawing A Face

Although it would be much easier to create a Movie Clip of a face and put it on the stage using addChild, we will draw a face here for illustration purposes.

Before you start to write the code, look at this illustration to understand the math:

In the movie below, a small red square with a blue dot in the middle is drawn whenever the user clicks on the stage.

stage.addEventListener(MouseEvent.CLICK,drawFace);
function drawFace(e:MouseEvent) : void {
 //to make the calculations easier we will set x and y to stageX and stageY
   var x,y:int;
   x=e.stageX;
   y=e.stageY;
  //draw a circle with a black stroke and a yellow fill
  this.graphics.lineStyle(1,0x000000); //width of 1, black
  this.graphics.beginFill(0xFFFF00);  //yellow
  this.graphics.drawCircle(x,y,15);
  this.graphics.endFill();
  //draw the left eye
  this.graphics.beginFill(0x000000);
  this.graphics.drawCircle(x-5,y-3,3);
  this.graphics.endFill();
  //draw the right eye
  this.graphics.beginFill(0x000000);
  this.graphics.drawCircle(x+5,y-3,3);
  this.graphics.endFill();
  //draw a mouth
  this.graphics.lineStyle(2,0xFF0000);
  this.graphics.moveTo(x-5,y+6);
  this.graphics.curveTo(x,y+10,x+5,y+6);
  this.graphics.moveTo(x+5,y+6);
} //drawFace
Download the movie to experiment.

Experiment: Try drawing another shape.

Copyright © Zebra0.com
All rights reserved worldwide.

Drawing a Face