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):

import flash.display.GradientType;
import flash.display.Shape;
import flash.display.Sprite;
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()

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);, gradientColor_, [1,1,1], [0,128,255],gradientBoxMatrix);, 0x1e1e1e);,0,width,height,radius);;

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.selectable = false;

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

finally we add them to the display object:


we can easily call this class by doing:

var button:UIButton = new UIButton();

View an example here: MobileUI