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

Tagged , , , , . Bookmark the permalink.

2 Responses to Create a button with font-icon and pure actionscript 3

  1. rwheadon says:

    I don’t think the whole picture is painted here. My button background doesn’t change when I click my button. I used your source but some small piece must not be present.

    thanks for the post though

  2. Ah yes, you are correct I must have not included the eventListener for the click event. Its not that complicated to add one.
    Simply add an event listener for click event on the button and on the callback function redraw the gradient background of the button with slightly different values.

    I hope it helps.

Leave a Reply

Your email address will not be published. Required fields are marked *