This last week I was taking a look at the different ways my computer could tell me that a process is going on: bouncing icons, progress indicators, splash images, but above all “spinning” things.

It seems in fact that clockwise animations are the most common way of showing the concept of waiting.

see this experiment

First a little bit of reference: let’s take a look at some spinning cursors.

I’m going to examine some of the Mac cursors here, but as you may notice many other system use cursors that are very similar to these ones.

For Mac developers the suggested cursors to show are basically two:

1. Indicates that the system is currently processing an operation,
2. Indicates that the system is stuck and not responding to the user.

Despites the aspect of the “Spinning beach ball”, or “Happiness windmill” as some of my flatmates used to call it, the second one is the most unpleasant to happen. I’m not going to wonder why this chose was made by Apple but I can just guess that the real meaning of it is: “A very bad thing happened! Your computer is now useless and needs to be restarted, meanwhile please cheer up with some colors”.It’s one little thing that makes you really understand the different policies of Microsoft and Apple is also shown by how they show their failures: a blue screen with nasty text code and a colorful windmill.
Anyway I’ve focused my attention on the first animation as it seems more interesting from a programming point of view.It isn’t, in fact, a simple image rotated in runtime, but each of the bars alpha property is changing over time. I decided to build my own and find out some quite interesting code.

Usage

I made a constructor for this class which is:

var myWheel:SpinningWheel = new SpinningWheel(numbersOfBars:Number, shapeType:String)

where numbersOfBars is the number of the elements will be placed around , and shapeType is the shape of these bars.

Public properties

• color:uint sets the color of the bars
• completeFlag:Boolean when set to true it triggers the internal animation that makes the spinning wheel fade away

I had “fun” on making a few variants check them out

Code

Making the wheel is quite easy: we need 8 (or more) different bars rotated on a common center at the same distance to it. We also need to change their alpha value, i assign them a value proportional to their index and then i subtract this to 1.

To draw the graphics I will make a new sprite for each bar, draw a rectangle with its graphics methods and then rotate the sprite.

Here’s the code:

private function init():void {var alphaValue:uint = 0; 
 
for (var i:uint=0; i<barsNumber; i++) { 
 
var newSprite:Sprite= new Sprite(); 
 
newSprite.graphics.beginFill(0x999999); 
 
newSprite.graphics.drawRect(-2.5, 10, 5, 10); 
 
newSprite.rotation=i*(360/barsNumber); 
 
alphaValue=(100/barsNumber)*(i); 
 
newSprite.alpha=1- (alphaValue/100); 
 
spriteArray.push(newSprite); 
 
addChild(newSprite); 
 
}

Ok, now here it comes the main part which is the enterFrame function: here I just say to increase the alpha value for each bar and then if it’s fully opaque turn it down back to 0.

addEventListener(Event.ENTER_FRAME, onEntFrm);private function onEntFrm(event:Event):void { 
 
if (!completeFlag) { 
 
for each (var i:Sprite in spriteArray) { 
 
if (i.alpha>=1) { 
 
i.alpha=0; 
 
} else { 
 
i.alpha+=.02; 
 
} 
 
} 
 
} else { 
 
if (spriteArray.length>0) { 
 
spriteArray[spriteArray.length-1].alpha=0; 
 
spriteArray.pop(); 
 
} else { 
 
removeEventListener(Event.ENTER_FRAME, onEntFrm); 
 
} 
 
}

In the last part of my code I inserted an if cause that will happen when the completeFlag boolean property is set to true.

You usually want to set this property in a loader complete function handler, so the wheel will close when the loading is completed. In the case of my example I associated with the function triggered by my button.