Relax Breath of Solution.

I meant to post this earlier, and I already touched on font embedding in an earlier post (Building a basic controller for the VideoDisplay control), but here’s a quick little way to embed a font 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 name="Font_antiAliasType_test"
        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>