Simple rotating preload icon class

A common requirement in applications is to have a small icon that can be used to indicate that some processing or a request is carried out, but not an actual preloader indicating progress.

On most projects lately I have been supplied graphical assets for the typical circle of lines with a rotating fade effect. In most cases a simple class not requiring any graphical assets would have sufficed, so I decided to make one:

package com.blixtsystems.utils

{

import com.greensock.plugins.TintPlugin;

import com.greensock.plugins.TweenPlugin;

import com.greensock.TweenLite;

import flash.display.Sprite;

import flash.events.TimerEvent;

import flash.geom.ColorTransform;

import flash.utils.Timer;

/**

* Circle of lines with rotating fade effect

* @author leo@blixtsystems.com

*/

public class PreloadIcon extends Sprite

{

private var _color1:uint;

private var _color2:uint;

private var _w:int;

private var _speed:int;

private var _numLines:int;

private var _thickness:Number;

private var _lineLength:Number;

private var _rotationStep:Number;

private var _currLine:int = 0;

/**

* Create preload icon

* @param color1 color

* @param color2 highlight color

* @param w width of central circle

* @param lineLength length of lines

* @param speed number of seconds for one rotation

* @param lines number of lines

* @param thickness thickness of lines

*/

public function PreloadIcon(color1:uint, color2:uint, w:int, lineLength:Number, speed:Number=2, lines:int=12, thickness:Number=6)

{

_color1 = color1;

_color2 = color2;

_w = w;

_lineLength = lineLength;

_speed = speed;

_numLines = lines;

_thickness = thickness;

_rotationStep = 360 / _numLines;

draw();

}

private function draw():void

{

TweenPlugin.activate([TintPlugin]);

var line:Sprite;

var step:Number = (Math.PI * 2) / _numLines;

var theta:Number;

var angle:Number;

for (var i:int = 0; i < _numLines; i++)

{

line = new Sprite();

line.graphics.lineStyle(_thickness, _color1);

line.graphics.lineTo( 0, _lineLength);

line.name = "line_" + i;

addChild(line);

theta = step * i;

line.x = _w * Math.cos(theta);

line.y = _w * Math.sin(theta);

line.rotation = (i * _rotationStep)-90;

}

var timer:Timer = new Timer((_speed/_numLines)*1000);

timer.addEventListener(TimerEvent.TIMER, handleTimer, false, 0, true);

timer.start();

}

private function handleTimer(e:TimerEvent):void

{

var line:Sprite = getChildByName("line_" + _currLine) as Sprite;

var ct:ColorTransform = new ColorTransform();

ct.color = _color2;

line.transform.colorTransform = ct;

TweenLite.to(line, _speed, { tint:_color1 } );

_currLine++;

if (_currLine == _numLines)

{

_currLine = 0;

}

}

}

}

You do need TweenLite included in your project. Input parameters are explained in the source.

Share/Bookmark