Adobe.com's preloader's circle

[Flash_Test]

Hi everyone,
I've been looking for ages for a tutorial which teaches me how to make that rotating circle using flash's gradient tools... (am talking about the one on adobe.com)
Thanks in advance

[Krilnon]

So, something like this?

http://www.reclipse.net/kirupa/circleAlphaTwirl.html

I don't exactly have a tutorial for it, but the source is below and I could explain it if you'd like.


var numCircles:Number = 35;
var centerX:Number = 200;
var centerY:Number = 100;
var radius:Number = 20;
var angle:Number = numCircles/180;
var radians:Number = (360/numCircles)*Math.PI/180;
var count:Number = 1;
for (i=0; i<numCircles; i++) {
this.createEmptyMovieClip("circle"+i, i);
drawCircle(this["circle"+i], 4, 0x99FF00, 100);
this["circle"+i]._x = centerX+Math.sin(radians*i)*radius;
this["circle"+i]._y = centerY+Math.cos(radians*i)*radius;
this["circle"+i]._alpha = i*(100/numCircles);
trace(this["circle"+i]._alpha);
}
this.onEnterFrame = function() {
for (i=0; i<numCircles; i++) {
if (this["circle"+i]._alpha<=0) {
this["circle"+i]._alpha = 100;
}
this["circle"+i]._alpha -= 3;
}
};
function drawCircle(target_mc:MovieClip, radius:Number, fillColor:Number, fillAlpha:Number):Void {
var x:Number = radius;
var y:Number = radius;
with (target_mc) {
beginFill(fillColor, fillAlpha);
moveTo(x+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, x, 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, -radius+x, 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, x, -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, radius+x, y);
endFill();
}
}

[Flash_Test]

that's exactly what I wanted. I should have thought of that, but was trying to get it done with that gradient tools in flash... which I don't like very much.
thanks a lot mate, it's really appreciated.

[capdetrons]

But how do you clear it when you move to the called frame?

I tried this on the frame I'm calling but I can't figure it out:

stop();
onEnterFrame = function() {
_root.target_mc.clear();
_root["circle"+i].clear();
};

[Krilnon]

Try this and call clearCircles(circles); at some point:
var numCircles:Number = 35;
var centerX:Number = 200;
var centerY:Number = 100;
var radius:Number = 20;
var angle:Number = numCircles / 180;
var radians:Number = (360 / numCircles) * Math.PI / 180;
var count:Number = 1;
var circles:Array = new Array();
for (i = 0; i < numCircles; i++) {
circles.push(createEmptyMovieClip('circle' + i, i));
drawCircle(circles[i],4,0x99FF00,100);
circles[i]._x = centerX + Math.sin(radians * i) * radius;
circles[i]._y = centerY + Math.cos(radians * i) * radius;
circles[i]._alpha = i * (100 / numCircles);
}
onEnterFrame = function():Void {
for (i = 0; i < numCircles; i++) {
if (circles[i]._alpha <= 0) {
circles[i]._alpha = 100;
}
circles[i]._alpha -= 3;
}
};
function clearCircles(circleArray:Array):Void {
for(var i:Number = circleArray.length - 1; i >= 0; i--){
removeMovieClip(circleArray.pop());
}
onEnterFrame = null;
}
function drawCircle(target_mc:MovieClip, radius:Number, fillColor:Number, fillAlpha:Number):Void {
var x:Number = radius;
var y:Number = radius;
with (target_mc) {
beginFill(fillColor,fillAlpha);
moveTo(x + 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,x,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,-radius + x,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,x,-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,radius + x,y);
endFill();
}
}

(I really just added the one function and rewrote part of the code to use an indexed array instead of an associative array.)

[kellohitty]

:bandit:

nice

[Chawthorne]

How Do I change the color for the preloader? It works great by the way! Cheers ActionScript Code:

var numCircles:Number = 35;
var centerX:Number = 200;
var centerY:Number = 100;
var radius:Number = 20;
var angle:Number = numCircles / 180;
var radians:Number = (360 / numCircles) * Math.PI / 180;
var count:Number = 1;
var circles:Array = new Array();
for (i = 0; i < numCircles; i++) {
circles.push(createEmptyMovieClip('circle' + i, i));
drawCircle(circles[i],4,0x99FF00,100);
circles[i]._x = centerX + Math.sin(radians * i) * radius;
circles[i]._y = centerY + Math.cos(radians * i) * radius;
circles[i]._alpha = i * (100 / numCircles);
}
onEnterFrame = function():Void {
for (i = 0; i < numCircles; i++) {
if (circles[i]._alpha <= 0) {
circles[i]._alpha = 100;
}
circles[i]._alpha -= 3;
}
};
function clearCircles(circleArray:Array):Void {
for(var i:Number = circleArray.length - 1; i >= 0; i--){
removeMovieClip(circleArray.pop());
}
onEnterFrame = null;
}
function drawCircle(target_mc:MovieClip, radius:Number, fillColor:Number, fillAlpha:Number):Void {
var x:Number = radius;
var y:Number = radius;
with (target_mc) {
beginFill(fillColor,fillAlpha);
moveTo(x + 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,x,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,-radius + x,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,x,-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,radius + x,y);
endFill();
}
}

[Krilnon]

Change this line (line 11 for me):
drawCircle(circles[i],4,0xf1f1f1,100);

More specifically, change the third argument to the call.

[mbailey]

I'm a newbie to actionscript and this preloader is exactly what I've been looking too!

I don't know how to "clear it when you move to the called frame". Can you give me an example within the code you provided and tell me exactly where to put it in the code?

[Krilnon]

I'm a newbie to actionscript and this preloader is exactly what I've been looking too!

I don't know how to "clear it when you move to the called frame". Can you give me an example within the code you provided and tell me exactly where to put it in the code?
Look at the ActionScript on frame 20 of the attached FLA file (MX04). The second line of code is what removes the circles.

[78.spotter]

What about spinning it clockwise? And how would you control the speed via AS2? Maybe you could increase the frame rate, but that's cheating I think.

[Krilnon]

To spin it clockwise, change the code on line 13 from post #2 in this thread to:
this["circle" + i]._alpha = 100 - i * (100 / numCircles);

You can see that I just added "100 - " to the code to invert the initial alphas.

To control the speed, adjust the value on line 21:
this["circle" + i]._alpha -= 7;

Since 7 > 3, the thing appears to spin faster.

[oopop]

I'm a newbie to actionscript and this preloader is exactly what I've been looking too!

I don't know how to "clear it when you move to the called frame". Can you give me an example within the code you provided and tell me exactly where to put it in the code?

__________________________________________________ ___________
louis vuitton replica handbags (http://www.bagsdeal.com)

[joran420]

just out of curiousity why woul u do this rather than have a comet semicircle single imageand rotating it....or using an animated gif?

[Krilnon]

It looks better and was more interesting to code.

[mj-simon]

Instead of a hard stop, can you manipulate the AS you've posted to have the alpha fade out gradually?

[Krilnon]

You could add on some fade functions like these:
setTimeout(fade1, 3500);

function fade1():Void {
onEnterFrame = function () {
var finished:Boolean = true;
for (var i:Number = 0; i < numCircles; i++) {
if (this["circle" + i]._alpha > 0) {
finished = false;
}
this["circle" + i]._alpha -= 3;
}
if (finished) {
this.onEnterFrame = null;
}
};
}

function fade2():Void {
var alphaMax:Number = 100;
onEnterFrame = function() {
trace(alphaMax);
for (var i:Number = 0; i < numCircles; i++) {
if (this["circle" + i]._alpha <= 0) {
this["circle" + i]._alpha = alphaMax;
}
this["circle" + i]._alpha -= 3;

}
alphaMax -= 2.5;
if (alphaMax <= 1) {
this.onEnterFrame = null;
}
};
}


I prefer the look of the first one. The second one isn't exactly what I'm guessing that most people would want for an alpha fade because it just so happens that the actual alpha of the circles also partially determines the apparent rotation speed. The easy way to do one that looks like the second but doesn't have a speed increase would be to stuff all of the circles into another MovieClip and fade that one's alpha. You could also just rework the alpha fading code in the fade2 function, but that might be more trouble than it's worth.

Note: I just copied/pasted parts of the original code to make the fade functions. There are 'better' ways to do it, but at this point I'm just making modifications to my ridiculously old code, so I don't mind if I make people cringe even further by adding this code.

[78.spotter]

Is there a good way to call the animation and then clear it in one frame?

[Krilnon]

I think that that's already addressed earlier in this thread.

[78.spotter]

Hey Krilnon,

I appreciate your input into this thread. This is some great info.

I was really asking how you achieve the preloader starting and stopping in just one frame? Not 2 frames as the example you provided has.

Calling clearCircles in the same frame doesn't seem to work. I assume the code has to be altered somehow to get rid of onEnterFrame possibly?




I think that that's already addressed earlier in this thread.

[Krilnon]

I was really asking how you achieve the preloader starting and stopping in just one frame?

What's going to determine when the circle goes away? I'm assuming that you're talking about one frame as far as the playhead/timeline is concerned, since you wouldn't really be able to see the circle at all if it were just visible for one rendered frame, since that would only be 1/30th of a second or so.

Anyway, it's probably possible to do what you want, I just don't know what exactly you want.


I assume the code has to be altered somehow to get rid of onEnterFrame possibly?


That probably won't work, since onEnterFrame refers to frames being rendered by the player, not necessarily when the playhead enters a frame that is different than the previous frame.

[78.spotter]

Right, I'm speaking about just one frame in the timeline.

At the moment I am continuously looping the circle animation as a movie clip.

I'm making the mc visible when a different function is called, then when a handler function returns (remoting) I am changing the visibilty to 0.

So I was wondering if there is a better way to do this with say "startCircles();" and "clearCircles();" to make the preloader a little leaner on performance?

[dipset0181]

i was just wondering does this really preload the files and if so what line in the actionscript does that?

thankyou

[Krilnon]

It doesn't. It just draws that circle thing.

[capdetrons]

Would it make it much harder if you wanted to create spikes instead of the circles?

I have been trying, but my AS level is that of a begginer and have no clue. I managed to create the spikes following a clock tutorial but those dashes are obviously static. The most I could have accomplished is to rotate the whole container.

here is my code:

var numLines:Number = 12;
var extRadAsterisc:Number = 20;
var intRadAsterisc:Number = 10;
var centreX:Number = 110;
var centreY:Number = 110;
for (var j = 0; j<numLines; j++) {
createEmptyMovieClip("asterisc"+j, j);
this["asterisc"+j]._x = centreX;
this["asterisc"+j]._y = centreY;
this["asterisc"+j].lineStyle(3, 0x000000, 100, false, "none", "round");
}
for (i=0; i<numLines; i++) {
angleAsterisc = i*30;
radAngleAsterisc = angleAsterisc*Math.PI/180;
xCoord1 = Math.cos(radAngleAsterisc)*extRadAsterisc;
yCoord1 = Math.sin(radAngleAsterisc)*extRadAsterisc;
xCoord2 = Math.cos(radAngleAsterisc)*intRadAsterisc;
yCoord2 = Math.sin(radAngleAsterisc)*intRadAsterisc;
this["asterisc"+i].moveTo(xCoord1, yCoord1);
this["asterisc"+i].lineTo(xCoord2, yCoord2);
}
onEnterFrame = function () {
for (k=0; k<numLines; k++) {
this["asterisc"+k]._rotation += 4;
// weird effect
if (this["asterisc"+k]._alpha<=0) {
this["asterisc"+k]._alpha = 100;
}
this["asterisc"+k]._alpha -= k/4;
}
};

[Tawura]

hey ppl i would like to ask anybody has a clue how can i have/make preloader like this:
http://www.mmfiles.com/flash/preloaders/simple_circle_preloader_282.html
thanks ahead :)

[Krilnon]

Yep; use the code I posted above. You just need to replace the circles with those little wedge things. Or could pay $5 for the one you linked to…

[Tawura]

ah but im not american/english and not even have a bank account so that would be difficult to purchase it.
so i should do something with that code:hugegrin:

[Tawura]

oh, and your preloader fades in white( i mean those spots are disappear when becoming lighter) but in that it becomes darker coulour. how can i change that?

[celeiner]

Attached is a AS3 class version if anyone is interested

paramenters

$thickness=radius of the small circles
$color=color of small circles
$radius=radius of the large circle
$clockwise=true for clockwise rotation, false for counter clockwise rotation
$numCircles=total number of circles to draw
$speed=speed (alpha property)

hope it's helpful

[Krilnon]

There's also one here: http://www.erikhallander.com/blog/2008/a-customizable-gradient-circle-loader-animation-for-as3.html

[debs7]

I'm not sure if this thread is still open, but I'm trying to do a loading circle on my flash image. I have the circle showing but is there a way to move it?

Maybe I'm doing the wrong thing but I have a flash image for a header of my webpage - it's going to be some images in rotation and what I want to do is have the loading image in the top right corner so people can see when the next image is coming.

Is there a way to use the code here to move the circle to the top right corner?

[Krilnon]

Yes, change the center.