The forums have permanently moved to forum.kirupa.com. This forum will be kept around in read-only mode for archival purposes. To learn how to continue using your existing account on the new forums, check out this thread.


Page 1 of 3 123 LastLast
Results 1 to 15 of 35

Thread: Adobe.com's preloader's circle

  1. #1

    Adobe.com's preloader's circle

    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

  2. #2
    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.

    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;
    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();
    	}
    }
    “Who were you, Krilnon, and how did you know so much about AS4?”
    The historian sighed as she gazed up at the sky and saw… not stars. A story.

  3. #3
    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.

  4. #4

    a great preloader

    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();
    };

  5. #5
    Try this and call clearCircles(circles); at some point:
    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();
        }
    }
    (I really just added the one function and rewrote part of the code to use an indexed array instead of an associative array.)
    “Who were you, Krilnon, and how did you know so much about AS4?”
    The historian sighed as she gazed up at the sky and saw… not stars. A story.

  6. #6


    nice

  7. #7

    Color

    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();
    }
    }

  8. #8
    Change this line (line 11 for me):
    Code:
    drawCircle(circles[i],4,0xf1f1f1,100);
    More specifically, change the third argument to the call.
    “Who were you, Krilnon, and how did you know so much about AS4?”
    The historian sighed as she gazed up at the sky and saw… not stars. A story.

  9. #9
    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?

  10. #10
    Quote Originally Posted by mbailey View Post
    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.
    Attached Files Attached Files
    “Who were you, Krilnon, and how did you know so much about AS4?”
    The historian sighed as she gazed up at the sky and saw… not stars. A story.

  11. #11
    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.

  12. #12
    To spin it clockwise, change the code on line 13 from post #2 in this thread to:
    Code:
    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:
    Code:
    this["circle" + i]._alpha -= 7;
    Since 7 > 3, the thing appears to spin faster.

  13. #13

    re:

    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

  14. #14
    1,839
    posts
    Registered User
    just out of curiousity why woul u do this rather than have a comet semicircle single imageand rotating it....or using an animated gif?

  15. #15
    It looks better and was more interesting to code.

Page 1 of 3 123 LastLast

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Home About kirupa.com Meet the Moderators Advertise

 Link to Us

 Credits

Copyright 1999 - 2012