I love to write my own visual classes in actionscript3. Some days ago I was searching for an undefined loader, like a rotating animated gif. But I thought that it would be great to have something wrote in as3 to do that, so I code it.
I wrote a simple as3 class that shows some circles that moves from a point to the external of the loader, creating a simple bubble effect.
Here you can see it in action: UndefinedLoader.swf
What do we need? Well, I usually use Caurina.Tweener for the animations, you can download it on google code. Download the as3 version and copy it in your source directory.
After that create a new class extending Sprite and create a simple costructor like this:
package myControls { import caurina.transitions.Tweener; import flash.display.*; public class UndefinedLoader extends Sprite { private var w:Number; private var h:Number; private var colors:Array = [0xFFFFFF]; public function UndefinedLoader(w:Number, h:Number, colors:Array = null) { this.w = w; this.h = h; this.visible = false; if (colors != null) this.colors = colors; } }
We set the width and height attributes, and if the user want to change the color of the loader we set it.
We will use the ‘visible’ attribute to indicate if the loader is running or not. So we have to write a get function for that:
public function get loading(): Boolean { return this.visible; }
After that, we need some constants in the class, indicating the minimum and the maximum radius of the circles, the time for the animation, how many circles we want and the type of transition (see the Tweener documentation for the possible values)
private const NCIRCLES: int = 25; private const MIN_DURATION: Number = 1; private const MAX_DURATION: Number = 2.5; private const MIN_RADIUS:int = 2; private const MAX_RADIUS:int = 5; private const TRANSITION: String = "linear";
Ok, now we need the start and the stop functions. When we start the loader, we want to create the circles, storing them into a private array. After that we will call the animation function on each of them. Stopping the loader will only hide it. The animation will automatically stop by itself (see later).
public function start(): void { if (this.visible) return; // animazione gia` partita! this.visible = true; if (circles.length == 0) for (var i:int = 0; i < NCIRCLES; i++) { circles[i] = new Sprite(); addChild(circles[i]); } for (i = 0; i < circles.length; i++) tween(circles[i]); }
public function stop(): void { this.visible = false; }
Now let we write the tween function: first of all we need to check if the loader is still shown. If it’s not, we will return, doing nothing. Otherwise, we generate randomly the color of the circle, the duration of the animation, the radius and the angle to move on. After that, reset the circles attribute, redraw it, and start the animation. When it will be completed, it will be recalled the tween function, checking if the loader is still working or not.
private function tween(c:Sprite): void { if (!this.visible) { return; // fermiamo l'animazione. } var color:int = (colors.length == 1) ? colors[0] : Math.random()*(Math.abs(colors[1]-colors[0])); var time:Number = Math.random()*(MAX_DURATION - MIN_DURATION); var radius:Number = Math.random()*(MAX_RADIUS - MIN_RADIUS); var beta:Number = Math.random()*(2*Math.PI); c.alpha = 1; c.x = 0; c.y = 0; c.graphics.clear(); c.graphics.lineStyle(1, color, 1); c.graphics.drawCircle(w/2, h/2, radius); Tweener.addTween(c, {x:w/2*Math.cos(beta), y:h/2*Math.sin(beta), alpha:0, time:time, transition:TRANSITION, onComplete: tween, onCompleteParams:[c]} ); }
You can download the source code here: undefinedloader.as
Recent Comments