Embedding and animating fonts in a Flex application

In this example we embed a font (the awesome “Base 02″ PC TrueType font (TTF) from http://www.stereo-type.net/), animate it using the Zoom effect and the Elastic.easeOut easing method. We also set the rotation and alpha properties (which you can’t do with non-embedded fonts), and we set the fontAntiAliasType to “advanced” to give the font a cleaner look. Finally we use the effectEnd event to loop the animation.

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Script> <![CDATA[ /* Import all the easing classes so its easier to switch between them on the fly without tweaking import statements. */ import mx.effects.easing.*; ]]> </mx:Script> <mx:Style> @font-face { src: url('assets/base02.ttf'); font-family: Base02; } .MyEmbeddedFont { font-family: Base02; font-size: 16px; } </mx:Style> <!-- Set zoom effect for 2.5 seconds (2500 milliseconds) and use the Elastic.easeOut easing method. --> <mx:Zoom id="zoom" duration="2500" easingFunction="Elastic.easeOut" target="{embeddedText}" /> <!-- Use advanced font anti-aliasing for the embedded font, set the rotation to 5 degrees, alpha to 80% and loop the animation. --> <mx:Text id="embeddedText" text="The quick brown fox jumped over the lazy dog." styleName="MyEmbeddedFont" rotation="5" alpha="0.8" fontAntiAliasType="advanced" creationComplete="zoom.play();" effectEnd="zoom.play()" /> </mx:Application>

Specifying certain unicode-ranges for embedded fonts

you want to embed the numbers 0-9, you would click on “0″ and note it’s Unicode value (U+0030), then click on “9″ and do the same (U+0039). Now, in your Flex application, you would specify this range in the @font-family style block like so:

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Script> <![CDATA[ /* Import all the easing classes so its easier to switch between them on the fly without tweaking import statements. */ import mx.effects.easing.*; ]]> </mx:Script> <mx:Style> @font-face { src: url('assets/base02.ttf'); font-family: Base02; unicode-range: U+0054-U+0054, /* T */ U+0061-U+007A, /* a-z */ U+002E-U+002E; /* . (period) */ } .MyEmbeddedFont { font-family: Base02; font-size: 14px; } </mx:Style> <!-- Set zoom effect for 2.5 seconds (2500 milliseconds) and use the Elastic.easeOut easing method. --> <mx:Zoom id="zoom" duration="2500" easingFunction="Elastic.easeOut" target="{embeddedText}" /> <!-- Use advanced font anti-aliasing for the embedded font, set the rotation to 5 degrees, alpha to 80% and loop the animation. --> <mx:Text id="embeddedText" text="The quick brown fox jumped over the lazy dog." styleName="MyEmbeddedFont" rotation="5" alpha="0.8" fontAntiAliasType="advanced" creationComplete="zoom.play();" effectEnd="zoom.play()" /> </mx:Application>

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="http://www.adobe.com/2006/mxml" applicationComplete="init()" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:String id="fileName" /> <mx:String id="fileSize" /> <mx:Script> <![CDATA[ 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); } ]]> </mx:Script> <mx:Style> @font-face{ 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:Style> <mx:ApplicationControlBar id="applicationControlBar" dock="true"> <mx:Label id="info" text="{fileName} ({fileSize}kb)" /> </mx:ApplicationControlBar> <mx:Button id="btn" label="{btn.getStyle('fontFamily')}" styleName="myButtonStyle" /> </mx:Application>

Embedding fonts by name instead of location

The following example shows how you can embed a font in Flex by specifying the font name instead of a location by using the local() function instead of the src() function when embedding a font.

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white" applicationComplete="init();"> <mx:Style> @font-face { src:local("Arial"); fontFamily: ArialEmbedded; } @font-face { src:local("Arial"); fontFamily: ArialEmbedded; fontWeight: bold; } </mx:Style> <mx:Script> <![CDATA[ private var bTotal:Number; private function init():void { bTotal = Application.application.loaderInfo.bytesTotal; /* Convert from bytes to kilobytes. */ lbl.text = (bTotal / 1024).toFixed(2) + " KB"; } ]]> </mx:Script> <mx:ApplicationControlBar dock="true"> <mx:Label id="lbl" /> </mx:ApplicationControlBar> <mx:ProgressBar id="progressBar" label="Loading Flex Application" labelPlacement="center" fontFamily="ArialEmbedded" rotation="15" indeterminate="true" themeColor="haloSilver" /> </mx:Application>