Oct 102010

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;
		private function draw():void
			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;
				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);
		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 } );
			if (_currLine == _numLines)
				_currLine = 0;


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


Switch to our mobile site