Search Flex Components Free

Custom Search

January 23, 2008

Styling a Flex Button control using embedded fonts

The following example shows how you can customize the appearance of a Flex Button control by using an embedded font and removing the Button’s default skin.

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx=""





<mx:String id="fileName" />

<mx:String id="fileSize" />



private function init():void {

var appInfo:LoaderInfo = Application.application.loaderInfo;

/* Just grab the filename from the SWF URL. */

fileName = (appInfo.url).split("/").pop();

/* Convert bytes to kilobytes. */

fileSize = (appInfo.bytesTotal / 1024).toFixed(2);






src: url("./fonts/base02.ttf");

fontFamily: "Base02";


.myButtonStyle {

embedFonts: true;

fontFamily: Base02;

fontWeight: normal;

fontSize: 24;

cornerRadius: 0;

letterSpacing: 4;

textRollOverColor: red;

skin: ClassReference(null);

icon: Embed(source="./assets/iconInstall.png");



<mx:ApplicationControlBar id="applicationControlBar" dock="true">

<mx:Label id="info" text="{fileName} ({fileSize}kb)" />


<mx:Button id="btn" label="{btn.getStyle('fontFamily')}" styleName="myButtonStyle" />


Related Flex Tutorials