Pure code AS3 spinning loading animation

While working on the video player, I wanted to show spinning loading animation while buffering, and since I decided that the whole thing will be pure code, with no library assets, I had to code this animation – just the kind of things I like.
It didn’t take long, and I decided to share it – why not?

So here it is:

loader animation with action script 3 code

What you need to do in order to use it is add two functions:


import LoadAnim;
...
private var myAnim :LoadAnim;
...

public function showAnim():void
{
myAnim = new LoadAnim(0x333333); // animation color
myAnim.x = stage.stageWidth / 2;
myAnim.y = stage.stageHeight / 2;
addChild(myAnim);
}

public function hideAnim():void
{
myAnim.stopAnim();
removeChildAt(1);
}

Download the class here, enjoy : )

10 thoughts on “Pure code AS3 spinning loading animation

  1. thanks… exactly what I was looking for… changed the implementation functions so implementation is a little easier (for others that are copying and pasting)

    public function showAnim(_x=stage.stageWidth / 2,_y=stage.stageHeight / 2):void
    {
    myAnim = new LoadAnim(0x333333); // animation color
    myAnim.name=”myAnim”;
    myAnim.x = _x;
    myAnim.y = _y;
    addChild(myAnim);
    }

    public function hideAnim():void
    {
    myAnim.stopAnim();
    if(myAnim!=null && contains(myAnim))
    {
    removeChild(getChildByName(“myAnim”));
    }
    }

  2. It’s a Trap!

    Just letting you guys know, there’s a memory leak of 75kbps inside that script somewhere, I’ll try hunting it down this afternoon.

  3. package
    {
    import flash.display.Sprite;
    import flash.display.Stage;
    import flash.events.TimerEvent;
    import flash.utils.Timer;
    /**
    * This class is a simple animated pinWheel to represent a loading asset
    * You can set the color of the pinWheel by applying a 0xRRGGBB format
    * as a parameter for the constructor.
    */
    public class pinwheelLoader extends Sprite
    {
    private var _pinWheel:Sprite = new Sprite();
    private var _timer:Timer = new Timer(100);

    public function pinwheelLoader(color:Number = 0x000000)
    {
    _buildPinWheel(color);
    _timer.addEventListener(TimerEvent.TIMER, _rotate, false, 0, true);
    _timer.start();
    }

    private function _buildPinWheel(color:Number):void
    {
    for (var i:int = 0; i < 12; i++)
    {
    var pin:Sprite = _buildPinSprite(color);
    pin.rotation = (i * 30);
    pin.alpha = 0 + (1 / 12 * i);
    _pinWheel.addChild(pin);
    }

    addChild(_pinWheel);
    }

    private function _buildPinSprite(color:Number):Sprite
    {
    var spr:Sprite = new Sprite();
    spr.graphics.beginFill(color, 1);
    spr.graphics.moveTo( -1, -12);
    spr.graphics.lineTo( 2, -12);
    spr.graphics.lineTo( 1, -5);
    spr.graphics.lineTo( 0, -5);
    spr.graphics.lineTo( -1, -12);
    spr.graphics.endFill();

    return spr;
    }

    private function _rotate(e:TimerEvent):void
    {
    for (var i:int = 0; i < 12; i++)
    {
    _pinWheel.getChildAt(i).rotation = (_pinWheel.getChildAt(i).rotation + 30) % 360;
    }
    }

    }

    }

    I rebuilt the class and instead of constantly recreating sprites for animating the loader, I recycled and simply spun the old sprites around instead.

    1. Thank you adi and Griallia.
      For anyone who’s a complete n00b like I am, here’s exactly what I had to do to get this to work:

      –Copy and paste Griallia’s code into a new empty plain text file, and save that text file as “pinwheelLoader.as” in same directory as the .fla file of the project I’m working on.

      –Fix one line in Griallia’s code. Here is the problematic line:

      public function pinwheelLoader(color:Number = 0×000000)

      The problem is that the “x” is not a normal “x” but some other weird character that looks like a normal “x”. I just deleted it and replaced it with a regular “x”. Here is the fixed line:

      public function pinwheelLoader(color:Number = 0x000000)

      –In my project, in the frame where I want to make the pinwheel, I added the following code:

      import pinwheelLoader;
      var LoadingPinwheel = new pinwheelLoader();
      LoadingPinwheel.x=stage.stageWidth/2;
      LoadingPinwheel.y=stage.stageHeight/2;
      addChild(LoadingPinwheel);

      –To make the pinwheel go away:

      removeChild(LoadingPinwheel);

Leave a Reply

Your email address will not be published. Required fields are marked *