How to create a Codepen Like/Love button

So I have to admit that I’m using Codepen alot, I’m also liking their “love/like” button. So I set to recreate the effect.

This pen is still quite sought after and has received many “likes”

This is the end result

See the Pen Codepen heart by Michael Dobekidis (@netgfx) on CodePen.

Continue if you want to know how it was build.

Continue reading

Facebooktwittergoogle_pluspinterestlinkedin
linkedin

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

[cc lang=”Actionscript”]
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();
}
}
}
[/cc]

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

[cc lang=”Actionscript”]
public function createButton(gradientColor_:Array = null, width:Number=120, height:Number=60, x:Number=10, y:Number=10, _text:String = ‘E’)
{

}
[/cc]

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

[cc lang=”Actionscript”]
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();
[/cc]

And now we create the icon:

[cc lang=”Actionscript”]
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;
[/cc]

finally we add them to the display object:

[cc lang=”Actionscript”]
this.addChild(myShape);
this.addChild(tfl);
[/cc]

we can easily call this class by doing:

[cc lang=”Actionscript”]
var button:UIButton = new UIButton();
button.createButton([0xffffff,0xf1f1f1,0xf8f8f8]);
addChild(button);
[/cc]

View an example here: MobileUI

Facebooktwittergoogle_pluspinterestlinkedin
linkedin

Flex 4.5.1 Create button with font-icon technique

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:
[cc lang=”mxml”]


@namespace s “library://ns.adobe.com/flex/spark”;

@font-face {
src: url(“assets/signify-webfont.ttf”);
fontFamily: ‘Signify’;
embedAsCFF: true;
}
















[/cc]

Facebooktwittergoogle_pluspinterestlinkedin
linkedin

Flex 4.5 add Icon to Buttons with AS3

This has changed since the pre-release and I thought I should mention it, because Icons on buttons are awesome.
So if you have set your button with mxml the property icon is right there, however if you want to dynamically create a button with an Icon with AS3 script you will have to declare it like this:


var Btn = new Button();
Btn.setStyle("icon","assets/icon.png");

As you see Icon property is now a style rather than a property.

Enjoy!

Facebooktwittergoogle_pluspinterestlinkedin
linkedin