5 Replies Latest reply on Aug 19, 2009 10:56 AM by NSurveyor

# Drawing circle using actionscript

Hi,

I am created a circle using the following script,

this.createEmptyMovieClip("circle_mc", 10);
circle_mc._x = 0;
circle_mc._y = 0;
drawCircle(circle_mc, 100, 0x000000, 100);

function drawCircle(target_mc:MovieClip, radius:Number, fillColor:Number, fillAlpha:Number):Void {
with (target_mc) {
beginFill(fillColor, fillAlpha);
curveTo(radius + x, Math.tan(Math.PI / 8) * radius + y, Math.sin(Math.PI / 4) * radius + x, Math.sin(Math.PI / 4) * radius + y);
curveTo(-Math.tan(Math.PI / 8) * radius + x, radius+ y, -Math.sin(Math.PI / 4) * radius + x, Math.sin(Math.PI / 4) * radius + y);
curveTo(-radius + x, -Math.tan(Math.PI / 8) * radius + y, -Math.sin(Math.PI / 4) * radius + x, -Math.sin(Math.PI / 4) * radius + y);
curveTo(Math.tan(Math.PI / 8) * radius + x, -radius + y, Math.sin(Math.PI / 4) * radius + x, -Math.sin(Math.PI / 4) * radius + y);
endFill();
}
}

Now what i want to know is that  can I increase the radius of the circle by applying tween class?

Thank and Regards,

Sreelash

• ###### 1. Re: Drawing circle using actionscript

Yes, you can make the circle_mc change in size using the Tween class, effectively changing the radius.  You could probably specify a radius value to change to, in terms of using the _width/height properties, which you can tween (radius = _width/2).

• ###### 2. Re: Drawing circle using actionscript

Hi,

Can you explain a little bit more for implemeting this. How should i give this in tween class. Can you explain a little bit more.

Thanks and Regards,

Sreelash

• ###### 3. Re: Drawing circle using actionscript

If we really wanted to make a "radius" property that could be set for this MovieClip so that when we change the value, the MovieClip's radius is re-set, we could. Using Object.addProperty(); and slightly modifying the drawCircle function (so that it clears() before drawing), we get the following:

```//Import Tween class
import mx.transitions.Tween;
import mx.transitions.easing.*;

this.createEmptyMovieClip("circle_mc", 10);
circle_mc._x = 0;
circle_mc._y = 0;
}
drawCircle(this,r,0x000000,100);
}

//Now, create tween on the 'radius' property.

//Modified drawCircle function
function drawCircle(target_mc:MovieClip, radius:Number, fillColor:Number, fillAlpha:Number):Void {
with (target_mc) {
clear();
beginFill(fillColor, fillAlpha);
curveTo(radius + x, Math.tan(Math.PI / 8) * radius + y, Math.sin(Math.PI / 4) * radius + x, Math.sin(Math.PI / 4) * radius + y);
curveTo(-Math.tan(Math.PI / 8) * radius + x, radius+ y, -Math.sin(Math.PI / 4) * radius + x, Math.sin(Math.PI / 4) * radius + y);
curveTo(-radius + x, -Math.tan(Math.PI / 8) * radius + y, -Math.sin(Math.PI / 4) * radius + x, -Math.sin(Math.PI / 4) * radius + y);
curveTo(Math.tan(Math.PI / 8) * radius + x, -radius + y, Math.sin(Math.PI / 4) * radius + x, -Math.sin(Math.PI / 4) * radius + y);
endFill();
}
}
```

While this may work, it certainly isn't the best way to go about it. For one, it would seem more logical to make a Circle class that had a radius property instead of a sole MovieClip. And also, we assume a fixed colour of black in this way (which could have been made into another property I assume). Though, I guess it's easier to see what the Tween is doing in the above code: changing the 'radius' from 0 to 200 in 6 seconds.

The easier and simpler way would be to simply tween the width and the height, where width and height are simply double the desired radius:

```//Import Tween class
import mx.transitions.Tween;
import mx.transitions.easing.*;

//Draw initial circle
this.createEmptyMovieClip("circle_mc", 10);
circle_mc._x = 0;
circle_mc._y = 0;
drawCircle(circle_mc,100,0x000000,100);

//Do the tween
var startR:Number = 0;
var endR:Number = 200;
var duration:Number = 6;
var widthT:Tween = new Tween(circle_mc, "_width", Elastic.easeOut, startR*2, endR*2, duration, true);
var heightT:Tween = new Tween(circle_mc, "_height", Elastic.easeOut, startR*2, endR*2, duration, true);

//drawCircle function
function drawCircle(target_mc:MovieClip, radius:Number, fillColor:Number, fillAlpha:Number):Void {
with (target_mc) {
beginFill(fillColor, fillAlpha);
curveTo(radius + x, Math.tan(Math.PI / 8) * radius + y, Math.sin(Math.PI / 4) * radius + x, Math.sin(Math.PI / 4) * radius + y);
curveTo(-Math.tan(Math.PI / 8) * radius + x, radius+ y, -Math.sin(Math.PI / 4) * radius + x, Math.sin(Math.PI / 4) * radius + y);
curveTo(-radius + x, -Math.tan(Math.PI / 8) * radius + y, -Math.sin(Math.PI / 4) * radius + x, -Math.sin(Math.PI / 4) * radius + y);
curveTo(Math.tan(Math.PI / 8) * radius + x, -radius + y, Math.sin(Math.PI / 4) * radius + x, -Math.sin(Math.PI / 4) * radius + y);
endFill();
}
}
```

The key note to make here is the syntax of the Tween constructor: new Tween(object, property_str, init_val, final_val, duration, in_seconds);

If you would like to use the Tween class, you should be tweening a property of the object, not just some arbitrary variable. This can be accomplished by either making our own property, or using the ones already in our disposal to create an identical effect.

Note: If you want to have it tween from the centre of the circle instead of the top-left corner, simply change the drawCircle function to begin with:

```var x:Number = 0;
var y:Number = 0;
```
• ###### 4. Re: Drawing circle using actionscript

Hi Nsurveryor. Thank you very much for ur reply.

Regards,

Sreelash

• ###### 5. Re: Drawing circle using actionscript

You're welcome.