Category Archives: Font-icons

Create a button with font-icon and pure actionscript 3

  By Michael Dobekidis | September 10, 2011 - 01:13 | , , ,
2 Comments

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

facebooktwittergoogle_pluspinterestlinkedin
linkedinrss

Flex 4.5.1 Create button with font-icon technique

  By Michael Dobekidis | August 8, 2011 - 08:11 | , ,
Leave a comment

In the last few months I have seen the growth of what designers call Font-Icons, these are font files with hand-drawn vector icons instead of letters, however each icon corresponds to a letter or number.

So I thought to make use of this technique which greatly reduces the number of images one should embed into AS3/MXML code.  Also these can be scaled infinitely since they are vectors, and that is good news for mobile applications that aim multi-density screens such as mobiles and tablets or even desktop.

For this example we used the “Signify” font family:

Heres a simple View with a button made with font-icon technique:

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" title="Custon Button" currentState="out">

<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";

@font-face {
src: url("assets/signify-webfont.ttf");
fontFamily: 'Signify';
embedAsCFF: true;
}

</fx:Style>

<s:states>
<s:State name="out"/>
<s:State name="in" />
</s:states>

<s:BorderContainer height="80" borderColor="#cccccc" borderWeight="2" cornerRadius="8" mouseOver="{this.currentState='in'}" mouseOut="{this.currentState='out'}"
horizontalCenter="0" verticalCenter="0">
<s:Rect width="100%" height="100%" bottomLeftRadiusX="8" bottomLeftRadiusY="8"
bottomRightRadiusX="8" bottomRightRadiusY="8" radiusX="8" radiusY="8">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color.out="#efefef" color.in="#1e1e1e"/>
<s:GradientEntry color.out="#afafaf" color.in="#4d4d4d"/>
</s:LinearGradient>
</s:fill>
</s:Rect>
<s:Label left="20" height="100%" color.out="#131313" fontFamily="Arial" color.in="#f7f7f7" fontSize="20" fontWeight="normal"
kerning="auto" paddingTop="7" text="Test" verticalAlign="middle"/>
<s:Label right="20" height="100%" color.out="#131313" color.in="#f7f7f7" fontFamily="Signify" fontSize="20"
fontWeight="normal" text="h" verticalAlign="middle"/>
</s:BorderContainer>
</s:View>
facebooktwittergoogle_pluspinterestlinkedin
linkedinrss