Circular Progress Bar

[KaworuNagisa]

Okay, I'm trying to make a progress bar shaped like a ring. Let's say the ring starts out black and then based on the loading progress, the rings fills up with blue in a clockwise motion.

I decided to try doing this by starting with something that rotates. I thought it would work if I created a movie clip that had 100 frames, then if I could find some way to set the frame number with the value of the percent variable, it would advance the animation based on the amount loaded.

Here's the code I triied using:


onClipEvent (load) {
total = _root.getBytesTotal();
}
onClipEvent (enterFrame) {
loaded = _root.getBytesLoaded();
percent = Math.floor(loaded/total*100);
rotater._currentframe = percent;
gotoAndStop(percent);
if (percent == 100) {
_root.gotoAndPlay(2);
}
}


"rotater" is the name of the Movie Clip with the animation in it. The movie can be seen here:*link gone*
You'll notice that the circle rotates not based on the amount loaded, but on the framerate (30 fps). I figure I'm just using the wrong property on the rotater line. Any ideas on how I can achieve my desired result?

KN

[KaworuNagisa]

Okay, the movie in that link has changed now, so don't pay attention to that. I still need some help though.

[KaworuNagisa]

Well, for those that are interested, I solved my own problem. I did a bit of research and discovered that the _currentframe property only returns the value of the current frame. By putting a .gotoAndStop right after the Movie Clip name and then adding the value of the percent variable to the _currentframe, I was able to set the playback head to each frame as the loading progressed. You could probably do this with any animation as a loading thingy.

KN

[NTD]

Hi,

Maybe something like this.....

Frame 1 of main timeline containing a 100 frame movieclip named "rotater"...



stop();
this.onEnterFrame=function() {
total = _root.getBytesTotal();
loaded = _root.getBytesLoaded();
percent = Math.floor(loaded/total*100);
_root.rotater.gotoAndStop(percent);
trace(percent);
if (percent == 100) {
delete this.onEnterFrame;
_root.play();
}
}