Drawing curves with AS2

Logical following of the "Drawing shapes" tutorial, here comes the "Drawing curves" tutorial. Most likely, it will be followed by a "Drawing lines" tutorial. So let's get started and draw some curves!

1. Open your Flash software, select "new", "Flash document", click "Ok", then go to "Modify", "Document", enter 300 for the width and height and enter 30 for the frame rate.

2. Open the "Actions" panel.

3. Copy and Paste this code:

this.createEmptyMovieClip("circle_mc", 1);
with (circle_mc) {
beginFill(0xFF0000);
moveTo(100, 100);
curveTo(200,0,300,100);
curveTo(400,200,300,300);
curveTo(200,400,100,300);
curveTo(0,200,100,100);
endFill();
}

I know it's not pretty, it doesn't look like a circle but actually to draw a nice circle we really need to know how the curveTo() method works so let's go on:

this.createEmptyMovieClip("circle_mc", 1);

We know this line already, we used practically exactly the same for the preceding tutorial, we create a new movie clip and give it a depth (1).

with (circle_mc) {

That's a new line, in fact we use the keyword "with" and assign to it the new movie clip we just created. Now everything between the next two brackets will refer to "circle_mc" which will save us some typing.

beginFill(0xFF0000);

beginFill is a method that applies a fill color, we used it in the preceding tutorial.

moveTo(100, 100);

We need to start drawing somewhere so we use the moveTo() method to go to 100 on the x coordinate and 100 on the y coordinate.

curveTo(200,0,300,100);

Here is where we start drawing a curve but unlike the lineTo() method here we need to give 4 numbers to the method to be able to draw a curve. So what are these numbers and what do they do? Well, the first and second number give a x and y coordinate for a point called control point and I'll come back to that in a few second. The third and fourth numbers give a x and y coordinate which is the end of the actual curve, let's see that in these following examples:





Flash uses the control point to draw the actual curve:



So now we can figure out what the numbers do in this code:

moveTo(100, 100);
curveTo(200,0,300,100);
curveTo(400,200,300,300);
curveTo(200,400,100,300);
curveTo(0,200,100,100);

the red numbers above tell Flash where to start and stop drawing:



moveTo(100, 100);
curveTo(200,0,300,100);
curveTo(400,200,300,300);
curveTo(200,400,100,300);
curveTo(0,200,100,100);

Now the numbers in blue tell flash where the control points to use to draw the curve are:



Still, why can't we draw a circle that look like a circle? Well, we used only 4 curveTo() and that's not enough to draw a nice shaped circle so we need more curveTo() to achieve a nice result. Let's do that in the second part...