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:

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();
}


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:

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();
}


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.

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;
}

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:

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();
}


This code draws a rectangle with rounded corners:



Then using gradients we can draw pretty much anything:

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();
}




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.