Search Flex Components Free

Custom Search

January 23, 2008

Embedding and animating fonts in a Flex application

In this example we embed a font (the awesome “Base 02″ PC TrueType font (TTF) from, 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="" layout="vertical"

verticalAlign="middle" backgroundColor="white">



/* Import all the easing classes so its

easier to switch between them on the

fly without tweaking import statements. */

import mx.effects.easing.*;




@font-face {

src: url('assets/base02.ttf');

font-family: Base02;


.MyEmbeddedFont {

font-family: Base02;

font-size: 16px;



<!-- 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"


creationComplete=";" effectEnd="" />


Related Flex Tutorials