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:

[as]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();
}[/as]

4. Hit "Ctrl+Enter" or go to "Control", "Test Movie" to test our Flash movie. You should see this:

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...

 

Now let's add more curveTo() to our initial code and see if we can improve the way our circle looks!

Replace the code we used in the first part by this one:

[as]this.createEmptyMovieClip("circle_mc", 1);
with (circle_mc) {
beginFill(0xFF0000);
moveTo(100, 100);
curveTo(150,58,200,58);
curveTo(250,58,300,100);
curveTo(342,150,342,200);
curveTo(342,250,300,300);
curveTo(250,342,200,342);
curveTo(150,342,100,300);
curveTo(58,250,58,200);
curveTo(58,150,100,100);
endFill();
}[/as]

Hit "Ctrl+Enter" or go to "Control", "Test Movie" to test our Flash movie. You should see this:



Hey, that's getting better! Still no perfect though. By using 8 curveTo() we certainly got a better result. But we want something that really looks like a circle don't we? Now in the "help" section of your Flash software there is an example for drawing circle, let's try it. Replace the code we used before by this one:

[as]this.createEmptyMovieClip("circle2_mc", 2);
drawCircle(circle2_mc, 200, 200, 100);
function drawCircle(mc:MovieClip, x:Number, y:Number, r:Number):Void {
mc.beginFill(0xff0000);
mc.moveTo(x+r, y);
mc.curveTo(r+x, Math.tan(Math.PI/8)*r+y, Math.sin(Math.PI/4)*r+x,
Math.sin(Math.PI/4)*r+y);
mc.curveTo(Math.tan(Math.PI/8)*r+x, r+y, x, r+y);
mc.curveTo(-Math.tan(Math.PI/8)*r+x, r+y, -Math.sin(Math.PI/4)*r+x,
Math.sin(Math.PI/4)*r+y);
mc.curveTo(-r+x, Math.tan(Math.PI/8)*r+y, -r+x, y);
mc.curveTo(-r+x, -Math.tan(Math.PI/8)*r+y, -Math.sin(Math.PI/4)*r+x,
-Math.sin(Math.PI/4)*r+y);
mc.curveTo(-Math.tan(Math.PI/8)*r+x, -r+y, x, -r+y);
mc.curveTo(Math.tan(Math.PI/8)*r+x, -r+y, Math.sin(Math.PI/4)*r+x,
-Math.sin(Math.PI/4)*r+y);
mc.curveTo(r+x, -Math.tan(Math.PI/8)*r+y, r+x, y);
mc.endFill();
}[/as]

Here is the result:



That's a pretty good looking circle right here! This makes use of trigonometry to achieve a better result. I'm not covering trigonometry in this tutorial but maybe in a later one. So let's just use this drawCircle function and make it into a dynamic application.

[as]var count:Number = 0;
this.onMouseDown = function(){
count++;
this.createEmptyMovieClip("circle_mc"+count, count);
var theX=Math.random()*Stage.height;
var theY=Math.random()*Stage.width;
var radius=Math.random()*100; drawCircle(this["circle_mc"+count], theX, theY, radius);
}
function drawCircle(mc:MovieClip, x:Number, y:Number, r:Number):Void {
mc.beginFill(0xff0000);
mc.moveTo(x+r, y);
mc.curveTo(r+x, Math.tan(Math.PI/8)*r+y, Math.sin(Math.PI/4)*r+x,
Math.sin(Math.PI/4)*r+y);
mc.curveTo(Math.tan(Math.PI/8)*r+x, r+y, x, r+y);
mc.curveTo(-Math.tan(Math.PI/8)*r+x, r+y, -Math.sin(Math.PI/4)*r+x,
Math.sin(Math.PI/4)*r+y);
mc.curveTo(-r+x, Math.tan(Math.PI/8)*r+y, -r+x, y);
mc.curveTo(-r+x, -Math.tan(Math.PI/8)*r+y, -Math.sin(Math.PI/4)*r+x,
-Math.sin(Math.PI/4)*r+y);
mc.curveTo(-Math.tan(Math.PI/8)*r+x, -r+y, x, -r+y);
mc.curveTo(Math.tan(Math.PI/8)*r+x, -r+y, Math.sin(Math.PI/4)*r+x,
-Math.sin(Math.PI/4)*r+y);
mc.curveTo(r+x, -Math.tan(Math.PI/8)*r+y, r+x, y);
mc.endFill();
var my_color:Color = new Color(mc);
var myColorTransform:Object = new Object();
myColorTransform.ra = Math.random()*200-100;
myColorTransform.rb = Math.random()*510-255;
myColorTransform.ga = Math.random()*200-100;
myColorTransform.gb = Math.random()*510-255;
myColorTransform.ba = Math.random()*200-100;
myColorTransform.bb =Math.random()*510-255;
myColorTransform.aa = 100;
myColorTransform.ab = Math.random()*510-255;
my_color.setTransform(myColorTransform);
mc.cacheAsBitmap=true;
}[/as]

Click many times on the following Flash file and see random circles appearing anywhere with random colors!



















But of course drawing circles is not the only thing we can do with the curveTo() method. We can assiociate it with the lineTo() method and draw many different shapes like a rectangle with rounded corners:

[as]this.createEmptyMovieClip("circle_mc", 1);
with (circle_mc) {
beginFill(0xFF0000);
moveTo(100, 110);
curveTo(100,100,110,100);
lineTo(290,100);
curveTo(300,100,300,110);
lineTo(300,190);
curveTo(300,200,290,200);
lineTo(110,200);
curveTo(100,200,100,190);
endFill();
}[/as]

This code draws a rectangle with rounded corners:



Then using gradients we can draw pretty much anything:

[as]import flash.geom.*
this.createEmptyMovieClip("circle_mc", 2);
colors = [0xF0E0F0, 0x0000FF];
fillType = "linear"
alphas = [100, 100];
ratios = [0, 0xFF];
spreadMethod = "reflect";
interpolationMethod = "linearRGB";
focalPointRatio = 1;
matrix = new Matrix();
matrix.createGradientBox(110, 1, Math.PI, 00, 100);
with (circle_mc) {
beginGradientFill(fillType, colors, alphas, ratios, matrix,
spreadMethod, interpolationMethod, focalPointRatio);
moveTo(100, 110);
curveTo(50,50,110,50);
curveTo(350,50,300,110);
curveTo(300,200,290,200);
curveTo(100,200,100,190);
endFill();
}
this.createEmptyMovieClip("circle2_mc", 1);
colors2 = [0xF0E0F0, 0x0000FF];
fillType2 = "linear"
alphas2 = [90, 90];
ratios2 = [0, 0xFF];
spreadMethod2 = "reflect";
interpolationMethod2 = "RGB";
focalPointRatio2 = 1;
matrix2 = new Matrix();
matrix2.createGradientBox(300, 100, Math.PI, 100, 500);
with (circle2_mc) {
beginGradientFill(fillType2, colors2, alphas2, ratios2, matrix2,
spreadMethod2, interpolationMethod2, focalPointRatio2);
moveTo(20, 200);
curveTo(150,130,380,200);
curveTo(400,300,110,250);
curveTo(10,250,20,200);
endFill();
}[/as]



In case you are wondering, it's supposed to be a hat... well, anyway that's it for this tutorial. I hope you learned enough to start drawing a lot of cool things! Next time we will see how to draw lines. Contact me if you had any problems running these codes.