Simple Loader with AS3 and TweenMax

This a loader that I created for my OSMF-based player. This is lightweight and simple to use.
Colors and shapes can easily be customized, text could also be included and event animated to match blocks.

The creation function, simple drawing.

public function createLoader(bgColor:uint=0x2e2e2e):void
{
this.x = 0;
this.y = 0;
bg = new Sprite();
bg.graphics.beginFill(bgColor,1);
bg.graphics.lineStyle(3,0xf7f7f7,1,true);
bg.graphics.drawRoundRectComplex(0,0,200,100,5,5,5,5);
bg.graphics.endFill();
var gap:Number = 45;
var block:Sprite;

for(var i:int = 0;i<6;i++){
                block = new Sprite();
                block.graphics.beginFill(0xffffff,1);
                block.graphics.lineStyle(1,0x7e7e7e,1,false);
                block.graphics.drawRect(gap+(20*i),40,9,22);
                block.graphics.endFill();
                bg.addChild(block);
            }
           
            this.addChild(bg);
            tint();

And the function that handles the animation, it applies colorization to each block in order then calls it self with the index increased by one.

private function tint(value:Number=0):void
{
    var length:Number = bg.numChildren;
    var indexItem:Number;
for(var i:int = 0;ilength-1)
{
indexItem = 0;
}
else
{
indexItem = value;
}

TweenMax.to(bg.getChildAt(indexItem), .2, {colorMatrixFilter:{colorize:0x3399ff, amount:1.2, contrast:1, brightness:1, saturation:1, hue:50}, onComplete:function(){

TweenMax.to(bg.getChildAt(indexItem), .6, {colorMatrixFilter:{colorize:0xffffff, amount:1}, ease:Quad.easeInOut});
tint(indexItem+1);
}});
}

The release version is a mere 20kb file.

Download the source here: UILoader

View Example here: UILoader-Demo

Create a button with font-icon and pure actionscript 3

As I see that the font-icon technique is becoming very popular, and I personally like it very much I decided to post some code of how to create a simple button with an Icon using only AS3 as it is lighter and much faster on mobile devices.

We will create a class that will hold our button, as you will see I have embedded the signify font, (signify is a font which has icons corresponding to letters and numbers):

package
{
import flash.display.GradientType;
import flash.display.Shape;
import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.geom.Matrix;
import flash.text.TextField;
import flash.text.TextFormat;
import flash.utils.getQualifiedClassName;

public class UIButton extends Sprite
{
[Embed(source="fonts/signify-webfont.ttf", fontFamily="Signify", embedAsCFF="false")]
public static var signify:String;

private var myShape:Shape;
private var gradientBoxMatrix:Matrix;
private var masterWidth:Number;
private var masterHeight:Number;

private var radius:Number = 10;

public function UIButton()
{
super();
}
}
}

Next we will create the main function that draws the button:

public function createButton(gradientColor_:Array = null, width:Number=120, height:Number=60, x:Number=10, y:Number=10, _text:String = 'E')
{

}

First we draw the matrix for the gradients and the rectangle:

myShape = new Shape();
gradientBoxMatrix = new Matrix();
gradientBoxMatrix.createGradientBox(width, height, Math.PI/2, 0, 0);
myShape.graphics.beginGradientFill(GradientType.LINEAR, gradientColor_, [1,1,1], [0,128,255],gradientBoxMatrix);
myShape.graphics.lineStyle(2, 0x1e1e1e);
myShape.graphics.drawRoundRect(0,0,width,height,radius);
myShape.graphics.endFill();

And now we create the icon:

var tfl:TextField = new TextField();
tfl.text = _text;
tfl.width = width/2;
tfl.height = height/2;
tfl.textColor = 0x0e0e0e;
tfl.embedFonts = true;
var tf:TextFormat = new TextFormat('Signify',38,0x0e0e0e); //here we define the embedded font
tfl.setTextFormat(tf);
tfl.selectable = false;

tfl.x = width/2 - tfl.textWidth+19;
tfl.y = -10;

finally we add them to the display object:

this.addChild(myShape);
this.addChild(tfl);

we can easily call this class by doing:

var button:UIButton = new UIButton();
button.createButton([0xffffff,0xf1f1f1,0xf8f8f8]);
addChild(button);

View an example here: MobileUI