RSS link icon

Draw a smiley face shape with actionscript 3.0 

 

In this actionscript 3.0 tutorial we will be playing with the drawing api, so you can learn to draw by coding strokes and fills to make a simple but cute smiley graphic, just have a look at the final result below.

In this tutorial we dont need to do anything on the stage, so just jump right into the actionscript panel.

Now you need to remember in which order we type in the code to draw lines and fills, so we dont need to change the depth of the graphics, just to make things easier.

So here comes the actionscript source code.

 

First we refer to this, as in the stage, so we will draw graphics on the stage and set the line style
a black with a 2 px thick line.

this.graphics.lineStyle(2,0x000000);

 

Draw circle, this is the outer of the head shape, and we give it a yellow fill, because it is a smiley.

this.graphics.beginFill(0xf0ff00);

 

We specify a x and y position for the circle and a radius to tell how big it should be.

this.graphics.drawCircle(200,180,140);

 

Now we tell flash to stop drawing and find a starting point to draw a line.

this.graphics.moveTo(100,200);
this.graphics.lineTo(150,250);

 

Create a curve and then another line for the mouth part of the smiley.

this.graphics.curveTo(200,300,250,250);
this.graphics.lineTo(300,200);

 

Draw two filled (black) circles for the eyes to finish up our smiley face.

this.graphics.beginFill(0x000000);
this.graphics.drawCircle(250,100,20);
this.graphics.drawCircle(150,100,20);
this.graphics.endFill();

 

I hope this was easy to understand, I broke it up into small pieces to make it more simple for you.



   


 

 

 

 8

 
 
   Web Premium
 
 

All rights reserved, Copyright 2008. Contact