Unsmiley face in Actionscript 3

I found an interesting tutorial here that draws a smiley face using the Actionscript 3 drawing API. The face shape is created using only Actionscript code to draw the eyes, mouth and face using the drawCirle() and curveTo() methods. In this post I have modified the code to draw an unsmiley face which is basically an unhappy face.


Unsmiley face in Actionscript 3

Step 1

Open a new AS3 file. Then on the timeline rename ‘layer 1’ to ‘Actions’ and open up the actions panel (F9) and enter the following code.

//Creates a new instance of the shape class adds it onto the stage.
var my_shape:Shape= new Shape();
addChild(my_shape);

//This draws the circle for the face with the black line thickness
//at 3px, red(#FF3603) face colour, the width of circle at 195 and the
//height at 190.
my_shape.graphics.lineStyle(3);
my_shape.graphics.beginFill(0xFF3603);
my_shape.graphics.drawEllipse(0, 0, 195, 190);


//This draws the two eyes for the unsmiley face.
my_shape.graphics.beginFill(0x000000);
my_shape.graphics.drawEllipse(45,47,24,37);
my_shape.graphics.drawEllipse(124,47,24,37);
my_shape.graphics.endFill();

//This draws the upside down smile by moving to the drawing location
//to (39, 150) then using the curveTo() method to draw the unsmiley
//face
my_shape.graphics.moveTo(39,150);
my_shape.graphics.curveTo(110,120,161,150);

Step 2 – optional

The unsmiley face is currently positioned at (0, 0) on the stage. If you wish to position the face in the centre of the stage, checkout this tutorial.


Step 3

Test your movie clip Ctrl + Enter.



You should now have an umsmiley face. Now that you have created one unsmiley face, why not put the code into a ‘For loop’ and create multiple instances of unsmiley faces. To reduce the size of the original face I have used the scaleX and scaleY properties.