draw primitive with actionscript

[macbef]

i'm trying to make a loaderbar that's roud... so now i have done something with keyframes, but it makes the loader so big that it needs to be loaded itself anyone an idea on how to draw a circel (only a rounded line...) with some kind of script?!
i hope i'm clear enough...


i've attached an example of what i want, and how i've done it...

[jbum]

code:

---

kRadiansToDegrees = 180/Math.PI;

kDegreesToRadians = Math.PI/180;



MovieClip.prototype.drawCircle = function(x,y,radius)

{

	var r = radius;

	

	var theta = 45*kDegreesToRadians;

	var cr = radius/Math.cos(theta/2);

	var angle = 0;

	var cangle = -theta/2;

	

	this.moveTo(x+r, y);

	for (var i=0;i < 8;i++) 

	{

		angle += theta;

		cangle += theta;

		var endX = r*Math.cos (angle);

		var endY = r*Math.sin (angle);

		var cX = cr*Math.cos (cangle);

		var cY = cr*Math.sin (cangle);

		this.curveTo(x+cX,y+cY, x+endX,y+endY);

	}

}



_root.clear();

_root.lineStyle(1,0xFF0000,100);

_root.drawCircle(100,100,50);

---

[macbef]

really thanks man!

[macbef]

ok one more question... i've turned it into the loader i wanted, and i'm really pleased with the effect, but the only thing is that it slows down when the flash movie is further loaded.. now i think that's because i've placed the "for" loop in an "onEnterFrame", because i thought that was the only way the loader can be updated.. but is there an other way?!

[jbum]

yeah, get rid of the onEnterFrame stuff you put inside drawcircle.

Instead, redraw the circle everytime you want to change theta, like so:

theta = laadHoek * kDegreesToRadians;
_root.clear();
_root.lineStyle(5, 0x9D9D9D, 100);
_root.drawCircle(20, 20, 15);


Secondly, I'm not sure why you're animating theta. If you want to change the size of the circle, you should animate the radius (the 15 you are passing in), and leave theta at 45*kDegreesToRadians. In this case, you would use something like:


theta = 45*kDegreesToRadians;
rad = kMinimumRadius + kMaximumRadius*percentloaded/100;
_root.clear();
_root.lineStyle(5, 0x9D9D9D, 100);
_root.drawCircle(20, 20, rad);

[macbef]

i don't get it, if i change the radius the circle gets smaller or bigger, so it's not like a line that goes round (like i want) so that's why i used theta...

[jbum]

Ah, you need something different, then what I imagined.

Do you want a line that emanates from the center of the circle (like a radar display)

or do you want a curved line that travels around the edge of the circle?

The first one is easy to do, and is not nearly as complicated as drawing a circle.

I have a different routine for doing the second (it's a variant of drawcircle that accepts a start-angle and end-angle) - you still need to keep theta at 45 degrees.

[jbum]

Here's the general purpose arc drawing routine. It accepts two additional arguments, bA (begin angle) and eA (end angle), both of which are expressed in degrees (0-360).

code:

---

degToRad = Math.PI/180;



MovieClip.prototype.drawArc = function(x,y,radius, bA,eA)

{

	if (eA < bA) eA += 360;

	var r = radius;



	var n= Math.ceil((eA-bA)/45);

	

	var theta = ((eA-bA)/n)*degToRad;

	var cr = radius/Math.cos(theta/2);

	var angle = bA*degToRad;

	var cangle = angle-theta/2;

	

	this.moveTo(x+r*Math.cos(angle), y+r*Math.sin(angle));

	for (var i=0;i < n;i++) 

	{

		angle += theta;

		cangle += theta;

		var endX = r*Math.cos (angle);

		var endY = r*Math.sin (angle);

		var cX = cr*Math.cos (cangle);

		var cY = cr*Math.sin (cangle);

		this.curveTo(x+cX,y+cY, x+endX,y+endY);

	}

}

---

This is a modified version of the routine I used to make this:

http://krazydad.com/bestiary/bestiary_piechart.html

[macbef]

hmm i think i can use that as well... i'll try tomorrow if i can make it work with my idea! thanks for helping me so far!