SynerCoding

Requirements:
Using the drawing api. Part 1

In this tutorial I’ll will teach you how to use actionscript code to generate the following image:.
The first part is simpel. We create a red circle and add a smaller white circle in the center of it:

var returnSpr:Sprite = new Sprite();
returnSpr.graphics.beginFill(0xFF0000);
returnSpr.graphics.drawCircle(200,200,200);
returnSpr.graphics.endFill();
 
returnSpr.graphics.beginFill(0xFFFFFF);
returnSpr.graphics.drawCircle(200,200, 150);
returnSpr.graphics.endFill();
addChild(returnSpr);

Now we want to make the inner star. We do this by drawing a line from point to point till the moment we have completed the star. For the purpose of this tutorial I’ll provide a list of coordinates:

200,50
244,139
342,153
271,223
288,321
200,275
111,321
128,223
57,153
155,139

When you begin your draw pointer is at position 0,0 so first we need to move it to the first coordinate before we can start to draw. Therefor we use the method graphics.moveTo(x,y) after that it can line to the rest of the coordinates using the graphics.lineTo(x,y) method.
We now have this code:

var returnSpr:Sprite = new Sprite();
returnSpr.graphics.beginFill(0xFF0000);
returnSpr.graphics.drawCircle(200,200,200);
returnSpr.graphics.endFill();
 
returnSpr.graphics.beginFill(0xFFFFFF);
returnSpr.graphics.drawCircle(200,200, 150);
returnSpr.graphics.endFill();
 
returnSpr.graphics.beginFill(0xff0000);
returnSpr.graphics.moveTo(200,50);
returnSpr.graphics.lineTo(244,139);
returnSpr.graphics.lineTo(342,153);
returnSpr.graphics.lineTo(271,223);
returnSpr.graphics.lineTo(288,321);
returnSpr.graphics.lineTo(200,275);
returnSpr.graphics.lineTo(111,321);
returnSpr.graphics.lineTo(128,223);
returnSpr.graphics.lineTo(57,153);
returnSpr.graphics.lineTo(155,139);
returnSpr.graphics.endFill();
 
addChild(returnSpr);

And that is it. The graphics is now made.

The only import function we havent discussed in this tutorial is the curveTo(controlX,controlY, anchorX, anchorY) method.
This method is used (as the name suggests) for make curves.

In this image you can see the result of graphics.curveTo(100,0,100,100); The parameters can be divided in 100,0 and 100,100 the first set is the control point and the second the point it is drawing the line to. The line you now draw it going from start to the anchor point and it is curving in the direction of the control point.

This was the tutorial for now. And I hope you enjoyed it.