Circular preloader

[punstc]

I've been trying to make a circular preloader like you see all over the web but can't find any good info on how to actually do it. I can get it draw a circle fine in an enterframe but using the percent from a loader I can't get it to work properly.

heres what I have



var l:Loader = new Loader();
var mc:MovieClip = new MovieClip();
var xpos:Number = 0;
var ypos:Number = 0;
var angle:Number = 0;
var speed:Number = .05;
var radius:Number = 50;
l.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, onProgress)
l.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete)
l.load(new URLRequest("large.swf"));

mc.graphics.moveTo(stage.stageWidth/2,stage.stageHeight/2);
mc.graphics.beginFill(0x00ff00);
addChild(mc);

function onProgress(e:ProgressEvent):void
{
var perc = (e.bytesLoaded / e.bytesTotal) * 100;

xpos = stage.stageWidth/2 + Math.cos(angle) * radius;
ypos = stage.stageHeight/2 + Math.sin(angle) * radius;
angle = (perc*radius)/360;
trace(angle)

mc.graphics.lineTo (xpos,ypos);

}

function onComplete(e:Event)
{
addChildAt(l,0);
//removeChild(mc);
}


right now it goes around about 3 and a quarter times, and based of the speed of the download the circle becomes less smooth.

I have a demo of what i got now at:
http://www.jchamb.com/files/circlepreloader/preload.swf

the fla is there too.

I've really just started messing around with the graphics and math classes in flash and don't really know what I'm doing. Any help would be appreciated.

[Medyman]

http://www.gotoandlearnforum.com/viewtopic.php?f=35&t=8974

[punstc]

Thanks Medyman I searched gotoAndLearn but that didn't pop up I just got a bunch of stuff on simple preloaders.

I adapted what sekasi posted to fix mine for the most part it's still a little rough and could use some work though.

for those interested here is the code I have



var l:Loader = new Loader(); // loader to load in your movie
var mc:MovieClip = new MovieClip(); // movieClip to draw circle on
var mc_x = stage.stageWidth/2; // x position of circle
var mc_y = stage.stageHeight/2; // y position of circle
var xpos:Number = 0; // x position of line to be drawn
var ypos:Number = 0; // y position of line to be drawn
var angle:Number = 0; // angle of the line
var radius:Number = 50; // radius of circle
var perc:Number = 0; // percent of what is loaded
l.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, onProgress)
l.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete)
l.load(new URLRequest("large.swf"));
addChild(mc);
mc.graphics.moveTo(mc_x,mc_y);
mc.graphics.beginFill(0x00ff00);

function onProgress(e:ProgressEvent):void
{
perc = Math.round((e.bytesLoaded / e.bytesTotal) * 100);

xpos = mc_x + Math.cos(Math.PI/90*angle) * radius;
ypos = mc_y + Math.sin(Math.PI/90*angle) * radius;
angle = Math.round(perc * (1.8));
mc.graphics.lineTo (xpos,ypos);

}

function onComplete(e:Event)
{
//---------draws last segment of circle-----------//
xpos = mc_x + Math.cos(Math.PI/90*angle) * radius;
ypos = mc_y + Math.sin(Math.PI/90*angle) * radius;
angle = Math.round(perc * (1.8));
mc.graphics.lineTo (xpos,ypos);
mc.graphics.endFill();
//------------------------------------------------//
addChildAt(l,0);
removeChild(mc);
}


The one big problem with it right now is that if it preloads more then at T1 speeds the circle begins to get choppy and more polygon like.

The other problem is that t1 and above it doesn't draw the last segment so i had to include the code to draw the last segment in the onComplete

Any one have any ideas on how to improve on this?

[punstc]

Made a little adjustment that fixes having to have duplicate code in the onComplete.



var l:Loader = new Loader(); // loader to load in your movie
var mc:MovieClip = new MovieClip(); // movieClip to draw circle on
var mc_x = stage.stageWidth/2; // x position of circle
var mc_y = stage.stageHeight/2; // y position of circle
var xpos:Number = 0; // x position of line to be drawn
var ypos:Number = 0; // y position of line to be drawn
var angle:Number = 0; // angle of the line
var radius:Number = 50; // radius of circle
var perc:Number = 0; // percent of what is loaded
l.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, onProgress)
l.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete)
l.load(new URLRequest("large.swf"));
addChild(mc);
mc.graphics.moveTo(mc_x,mc_y);
mc.graphics.beginFill(0x00ff00);

function onProgress(e:ProgressEvent):void
{
var perc = (e.bytesLoaded / e.bytesTotal);
angle = (360*perc)* Math.PI/180;
xpos = mc_x + Math.cos(angle) * radius;
ypos = mc_y + Math.sin(angle) * radius;
mc.graphics.lineTo (xpos,ypos);
}

function onComplete(e:Event)
{
addChildAt(l,0);
//removeChild(mc);
}


still working on a way to make it smooth no matter how fast it downloads any idea's on that would be appreciated.