Continue reading »]]> 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

Continue reading »]]> Here there are some projects I’m working / I’ve been working on:

Gaja: Just another Judge for algorithms…

Gaja is a web application written in Java (jsp and servlets) that lets students to submit their algorithms (C/C++, Java and Pascal). The goal is to solve some tipical informatic problems, like sorting, searching, data manipulation, …
This OpenSource Software is written for the OII italian students, and it was commissioned by the “Liceo Galileo Galilei” of Trento and the University of Trento.
Gaja on SourceForge
Gaja on university server
Liceo Galilei WebSite
University of Trento

MooGraph (was MindGapper): a GapMinder clone

MooGraph is an OpenSource clone of GapMinder, the Google’s software for multidimensional data-view. Written in Flex 3 and ActionScript 3, MooGraph is a scatterplot that lets you to see interesting data associated with countries. Three different indicators can be shown by it (x and y axis and bubble dimensions). It also support countries aggregation.
Written with the italian students of WebValley 2008, organized by the Bruno Kessler Foundation.
MooGraph on SourceForge
Bruno Kessler Foundation