Embedding and animating fonts in a Flex application

by Peter deHaan on August 6, 2007

in 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.

Full code after the jump.

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.

I didn’t include the TrueType font in the source code ZIP. If you want to grab that exact font, head over to the creator’s site @ http://www.stereo-type.net/ and download “Base 02″.

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.

{ 10 comments… read them below or add one }

1 peterd August 6, 2007 at 10:19 pm

For other fonts, check out http://www.urbanfonts.com/ and http://www.dafont.com/.

Reply

2 Steve September 13, 2007 at 5:57 pm

I’m not picking up any rotaion or alpha. I’m only seeing an elastic zoom/settle loop.

Missing something?

Reply

3 peterd September 13, 2007 at 6:16 pm

Not seeing the rotation/alpha in my embedded example above, or in your file?

Peter

Reply

4 Suresh November 1, 2007 at 8:45 pm

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.

Reply

5 peterd November 3, 2007 at 11:00 am

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

Reply

6 Ridge November 19, 2007 at 4:09 am

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

Reply

7 diego November 27, 2007 at 6:13 am

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′

Reply

8 pythagoras February 7, 2009 at 11:01 am

Yes there seems to be maximum font size. See this:

http://blog.flexcommunity.net/?p=46

Reply

9 Andy May 26, 2009 at 5:01 pm

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?

Reply

10 pythagoras August 4, 2009 at 11:52 am

The greensock tweening library seems to be much more efficient than flex effects i.e. ‘<mx:zoom. Check this out:
http://blog.flexcommunity.net/?p=165

http://blog.greensock.com/tweenmaxas3/

Reply

Leave a Comment

Sorry, this blog is terrible at eating HTML comments.
If you're pasting any HTML/XML/MXML code, you need to convert your < characters to &lt; and your > characters to &gt; .

You can use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Anti-Spam Protection by WP-SpamFree

Previous post:

Next post: