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

Related posts:

1. PixelBender audio mixer with dynamic track count
2. SVN version control in Flashdevelop projects
3. Simple 3-band EQ with Flash Player 10
4. Base62 encode/decode with AS3 and PHP