Everybody! This is important. In a few days, these forums will be moving over to using the totally sweet Discourse platform. To ensure this migration happens smoothly with no loss of content, these forums are currently in a read-only mode. I do apologize for the inconvenience.

There is never a good time to turn the forums off for an extended period of time, but I promise the new forums will be a billion times better. I'm pretty sure of it.

See you all on the other side in a few days, and if you have any (non-technical) questions, please e-mail me at kirupa@kirupa.com. For technical questions, try to find a tutorial that corresponds to what you are looking for and post in the comments section of that page.

Cheers,
Kirupa

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