Embedding and animating fonts in a Flex application

Embed, Fonts, Zoom, ,

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.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/06/embedding-and-animating-fonts-in-a-flex-application/ -->
<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>

View source is enabled in the following example.

[Base02]

It is important to note that embedding fonts can dramatically increase the size of generated SWFs. The size of the SWF above is roughly 260 KB (the base02.ttf file (not included in the ZIP) on its own is 177 KB). By comparison, if embedded fonts were not used, the file size of the SWF would have been only 147 KB, although the rotation and alpha effects would not have been possible. In a future entry I’ll cover how to embed certain characters/ranges of a font-face to reduce the overall size.

11 thoughts on “Embedding and animating fonts in a Flex application”

  4. Rotation of text is not happening when I try to run sample as web application.
    I am not seeing any text either.
    I have added other components to the application and found them visible.

    Could you please provider your inputs.

    Thanks.

  5. Suresh,

    For the text that isn’t visible after being rotated. Is it italic or bold (or both)? If so, have you embedded the bold and/or italic versions of the font as well?

    Peter

  6. Hi,

    How about there is a form. For example i’ve entered a quotation message and after that it should be appeared and animated. I mean there is a text area and a submit button. And I’m going to put some message in the text area and when i clicked the button it will now display the message that i’ve type with matching animation. And also I was able also to select font type, font sizes and type of animation. Can you provide examples on this. Your help will gladly be appreciated. Thanks in advance and more power.

    Regards,
    Ridge

  7. hi,
    Is there a maximum fontSize that can be displayed in a Text Component (or TextField, TextArea, etc)in Flex 2? Because whenever I try to display a font size greater than 150 ( by setting fontSize=’180′ in the Text Component definition) , the size doesn’t change past that of 150. Any help with this would be very appreciated. I’ve searched around some and I’m not seeing much written on it. I’ve tried this with both embedded and non embedded fonts.

    thanks.
    Diego

    mx:Text id=’flash2′ text=’A’ fontSize=’270′

  9. I’m having a problem animating the zoom or scale properties of labels with embedded fonts.
    It works smoothly as long as the label is rotated slightly (at least .5), but with out any rotation the text is very jumpy and looks like what happens if you animate some dynamic text in flash with anti-alias for readability applied.

    Any tips?

  11. @Andy It might be caused by pixel hinting being turned on. When it’s not rotated, it will try to snap font edges to the pixel, so that it is sharper.

Comments are closed.