Flex Examples » fontAntiAliasType http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Setting the font sharpness for a Label control in Flex http://blog.flexexamples.com/2008/08/21/setting-the-font-sharpness-for-a-label-control-in-flex/ http://blog.flexexamples.com/2008/08/21/setting-the-font-sharpness-for-a-label-control-in-flex/#comments Fri, 22 Aug 2008 06:05:01 +0000 Peter deHaan http://blog.flexexamples.com/2008/08/21/setting-the-font-sharpness-for-a-label-control-in-flex/ The following example shows how you can set the font sharpness on a Flex Label control by setting the fontSharpness and fontAntiAliasType styles.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/08/21/setting-the-font-sharpness-for-a-label-control-in-flex/ --> <mx:Application name="Label_fontSharpness_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Style> @font-face { src: local("Arial"); fontFamily: ArialEmbedded; } @font-face { src: local("Base 02"); fontFamily: Base02Embedded; } </mx:Style> <mx:ApplicationControlBar dock="true"> [...]]]> The following example shows how you can set the font sharpness on a Flex Label control by setting the fontSharpness and fontAntiAliasType styles.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/21/setting-the-font-sharpness-for-a-label-control-in-flex/ -->
<mx:Application name="Label_fontSharpness_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        @font-face {
            src: local("Arial");
            fontFamily: ArialEmbedded;
        }

        @font-face {
            src: local("Base 02");
            fontFamily: Base02Embedded;
        }
    </mx:Style>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="fontFamily:">
                <mx:ComboBox id="comboBox"
                        dataProvider="[ArialEmbedded,Base02Embedded]" />
            </mx:FormItem>
            <mx:FormItem label="fontSharpness:" direction="horizontal">
                <mx:HSlider id="slider"
                        minimum="-400"
                        maximum="400"
                        value="0"
                        snapInterval="10"
                        tickInterval="50"
                        liveDragging="true" />
                <mx:Label text="{slider.value}" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:Label id="lbl"
            text="The quick brown fox jumped over the lazy dog."
            fontFamily="{comboBox.selectedItem}"
            fontSize="16"
            fontAntiAliasType="advanced"
            fontSharpness="{slider.value}" />

</mx:Application>

View source is enabled in the following example.

You can also set the fontSharpness style in an external .CSS file or <mx:Style /> block, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/21/setting-the-font-sharpness-for-a-label-control-in-flex/ -->
<mx:Application name="Label_fontSharpness_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        @font-face {
            src: local("Base 02");
            fontFamily: Base02Embedded;
        }

        Label {
            fontAntiAliasType: advanced;
            fontFamily: Base02Embedded;
            fontSize: 16;
            fontSharpness: 400;
        }
    </mx:Style>

    <mx:Label id="lbl"
            text="The quick brown fox jumped over the lazy dog." />

</mx:Application>

Or, you can set the fontSharpness style using ActionScript, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/21/setting-the-font-sharpness-for-a-label-control-in-flex/ -->
<mx:Application name="Label_fontSharpness_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        @font-face {
            src: local("Arial");
            fontFamily: ArialEmbedded;
        }

        @font-face {
            src: local("Base 02");
            fontFamily: Base02Embedded;
        }

        .myLabel {
            fontAntiAliasType: advanced;
            fontFamily: ArialEmbedded;
            fontSize: 16;
        }
    </mx:Style>

    <mx:Script>
        <![CDATA[
            import mx.events.ListEvent;
            import mx.events.SliderEvent;

            private function comboBox_change(evt:ListEvent):void {
                lbl.setStyle("fontFamily", comboBox.selectedItem);
            }

            private function slider_change(evt:SliderEvent):void {
                lbl.setStyle("fontSharpness", evt.value);
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="fontFamily:">
                <mx:ComboBox id="comboBox"
                        dataProvider="[ArialEmbedded,Base02Embedded]"
                        change="comboBox_change(event);" />
            </mx:FormItem>
            <mx:FormItem label="fontSharpness:" direction="horizontal">
                <mx:HSlider id="slider"
                        minimum="-400"
                        maximum="400"
                        value="0"
                        snapInterval="10"
                        tickInterval="50"
                        liveDragging="true"
                        change="slider_change(event);" />
                <mx:Label text="{slider.value}" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:Label id="lbl"
            text="The quick brown fox jumped over the lazy dog."
            styleName="myLabel" />

</mx:Application>

Base 02 font by www.stereo-type.net.

 
]]> http://blog.flexexamples.com/2008/08/21/setting-the-font-sharpness-for-a-label-control-in-flex/feed/ 4 Setting the font thickness for a Label control in Flex http://blog.flexexamples.com/2008/08/21/setting-the-font-thickness-for-a-label-control-in-flex/ http://blog.flexexamples.com/2008/08/21/setting-the-font-thickness-for-a-label-control-in-flex/#comments Fri, 22 Aug 2008 05:18:13 +0000 Peter deHaan http://blog.flexexamples.com/2008/08/21/setting-the-font-thickness-for-a-label-control-in-flex/ The following example shows how you can set the font thickness on a Flex Label control by setting the fontThickness and fontAntiAliasType styles.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/08/21/setting-the-font-thickness-for-a-label-control-in-flex/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Style> @font-face { src: local("Base 02"); fontFamily: Base02Embedded; } </mx:Style> <mx:ApplicationControlBar dock="true"> <mx:Form styleName="plain"> <mx:FormItem label="fontThickness:" [...]]]> The following example shows how you can set the font thickness on a Flex Label control by setting the fontThickness and fontAntiAliasType styles.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/21/setting-the-font-thickness-for-a-label-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        @font-face {
            src: local("Base 02");
            fontFamily: Base02Embedded;
        }
    </mx:Style>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="fontThickness:" direction="horizontal">
                <mx:HSlider id="slider"
                        minimum="-200"
                        maximum="200"
                        value="0"
                        snapInterval="10"
                        tickInterval="20"
                        liveDragging="true" />
                <mx:Label text="{slider.value}" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:Label id="lbl"
            text="The quick brown fox jumped over the lazy dog."
            fontFamily="Base02Embedded"
            fontSize="16"
            fontAntiAliasType="advanced"
            fontThickness="{slider.value}" />

</mx:Application>

View source is enabled in the following example.

You can also set the fontThickness style using an external .CSS file or <mx:Style /> block, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/21/setting-the-font-thickness-for-a-label-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        @font-face {
            src: local("Base 02");
            fontFamily: Base02Embedded;
        }

        Label {
            fontAntiAliasType: advanced;
            fontFamily: Base02Embedded;
            fontSize: 16;
            fontThickness: -200;
        }
    </mx:Style>

    <mx:Label id="lbl"
            text="The quick brown fox jumped over the lazy dog." />

</mx:Application>

Or, you can set the fontThickness style using ActionScript, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/21/setting-the-font-thickness-for-a-label-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        @font-face {
            src: local("Base 02");
            fontFamily: Base02Embedded;
        }
    </mx:Style>

    <mx:Script>
        <![CDATA[
            import mx.events.SliderEvent;

            private function slider_change(evt:SliderEvent):void {
                lbl.setStyle("fontThickness", evt.value);
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="fontThickness:" direction="horizontal">
                <mx:HSlider id="slider"
                        minimum="-200"
                        maximum="200"
                        value="0"
                        snapInterval="10"
                        tickInterval="20"
                        liveDragging="true"
                        change="slider_change(event);" />
                <mx:Label text="{slider.value}" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:Label id="lbl"
            text="The quick brown fox jumped over the lazy dog."
            fontFamily="Base02Embedded"
            fontSize="16"
            fontAntiAliasType="advanced" />

</mx:Application>

Base 02 font by www.stereo-type.net.

 
]]> http://blog.flexexamples.com/2008/08/21/setting-the-font-thickness-for-a-label-control-in-flex/feed/ 0 Setting a font’s anti-alias type, sharpness, thickness and grid fit type in Flex http://blog.flexexamples.com/2007/10/24/setting-a-fonts-anti-alias-type-sharpness-thickness-and-grid-fit-type-in-flex/ http://blog.flexexamples.com/2007/10/24/setting-a-fonts-anti-alias-type-sharpness-thickness-and-grid-fit-type-in-flex/#comments Thu, 25 Oct 2007 03:43:45 +0000 Peter deHaan http://blog.flexexamples.com/2007/10/24/setting-a-fonts-anti-alias-type-sharpness-thickness-and-grid-fit-type-in-flex/ The following example shows you how to change an embedded font’s appearance by setting the fontAntiAliasType style, fontSharpness style, fontThickness style, and fontGridFitType style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2007/10/24/setting-a-fonts-anti-alias-type-sharpness-thickness-and-grid-fit-type-in-flex/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Style> @font-face { src: local("Arial"); fontFamily: "ArialEmbedded"; } Label { [...]]]> The following example shows you how to change an embedded font’s appearance by setting the fontAntiAliasType style, fontSharpness style, fontThickness style, and fontGridFitType style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/10/24/setting-a-fonts-anti-alias-type-sharpness-thickness-and-grid-fit-type-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        @font-face {
            src: local("Arial");
            fontFamily: "ArialEmbedded";
        }

        Label {
            fontFamily: ArialEmbedded;
        }
    </mx:Style>

    <mx:Array id="antiAliasTypes">
        <mx:Object label="normal" />
        <mx:Object label="advanced" />
    </mx:Array>

    <mx:Array id="gridFitTypes">
        <mx:Object label="none" />
        <mx:Object label="pixel" />
        <mx:Object label="subpixel" />
    </mx:Array>

    <mx:Boolean id="isAdvanced">
        {antiAliasTypeComboBox.selectedIndex == 1}
    </mx:Boolean>

    <mx:ApplicationControlBar dock="true">
        <mx:Form>
            <mx:FormItem label="fontSize:">
                <mx:HSlider id="sizeSlider"
                        minimum="6"
                        maximum="24"
                        value="10"
                        liveDragging="true"
                        snapInterval="1"
                        tickInterval="1" />
            </mx:FormItem>
            <mx:FormItem label="rotation:">
                <mx:HSlider id="rotationSlider"
                        minimum="-3"
                        maximum="3"
                        value="0"
                        liveDragging="true"
                        snapInterval="0.1"
                        tickInterval="1" />
            </mx:FormItem>
            <mx:FormItem label="fontAntiAliasType:">
                <mx:ComboBox id="antiAliasTypeComboBox"
                        dataProvider="{antiAliasTypes}" />
            </mx:FormItem>
            <mx:FormItem label="fontSharpness:"
                    enabled="{isAdvanced}">
                <mx:HSlider id="sharpnessSlider"
                        minimum="-400"
                        maximum="400"
                        value="0"
                        liveDragging="true"
                        snapInterval="1"
                        tickInterval="20" />
            </mx:FormItem>
            <mx:FormItem label="fontThickness:"
                    enabled="{isAdvanced}">
                <mx:HSlider id="thicknessSlider"
                        minimum="-200"
                        maximum="200"
                        value="0"
                        liveDragging="true"
                        snapInterval="1"
                        tickInterval="10" />
            </mx:FormItem>
            <mx:FormItem label="fontGridFitType:"
                    enabled="{isAdvanced}">
                <mx:ComboBox id="gridFitTypeComboBox"
                        dataProvider="{gridFitTypes}" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:Label id="lbl"
            text="The quick brown fox jumped over the lazy dog."
            fontSize="{sizeSlider.value}"
            fontAntiAliasType="{antiAliasTypeComboBox.selectedItem.label}"
            fontSharpness="{sharpnessSlider.value}"
            fontThickness="{thicknessSlider.value}"
            fontGridFitType="{gridFitTypeComboBox.selectedItem.label}"
            rotation="{rotationSlider.value}"
            truncateToFit="false" />

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2007/10/24/setting-a-fonts-anti-alias-type-sharpness-thickness-and-grid-fit-type-in-flex/feed/ 8 Specifying certain unicode-ranges for embedded fonts http://blog.flexexamples.com/2007/08/07/specifying-certain-unicode-ranges-for-embedded-fonts/ http://blog.flexexamples.com/2007/08/07/specifying-certain-unicode-ranges-for-embedded-fonts/#comments Wed, 08 Aug 2007 05:15:44 +0000 Peter deHaan http://blog.flexexamples.com/2007/08/07/specifying-certain-unicode-ranges-for-embedded-fonts/ In a previous post (“Embedding and animating fonts in a Flex application“), we looked at embedding a font in a Flex application so we could animate, rotate, and set the alpha for a Text control. Well, as we learnt, sometimes embedding a whole font face can dramatically increase the size of the final SWF [...]]]> In a previous post (“Embedding and animating fonts in a Flex application“), we looked at embedding a font in a Flex application so we could animate, rotate, and set the alpha for a Text control. Well, as we learnt, sometimes embedding a whole font face can dramatically increase the size of the final SWF output. In this post we’ll look at only specifying a certain range of characters for an embedded font, which will help reduce file sizes.

Full code after the jump.

Before we get too far, we’ll quickly look at some of the font basics. If you’re a Windows user, a good place to start is with the Character Map application. Its a little Window’s utility that gets installed on most modern operating systems and lets you quickly browse a font’s supported characters, different character sets, filter characters by Unicode subranges, search for certain characters (such as © or ®), see a characters Unicode value as well as character code. It also lets you quickly copy certain characters to the clipboard for easy copy-pasting between applications. Because I can never remember where the application gets installed, or where to find its icon, it is usually just easiest to type “charmap” from a command prompt. If you have a modern-day keyboard, hit Windows+R to bring up the Run dialog, type “charmap”, hit Enter, and get ready to be amazed! Most of the features I mentioned before are cleverly hidden behind the “Advanced view” checkbox, so if you’re feeling up to the challenge check that checkbox to go to advanced view, otherwise the basic view will do just fine for now. At the top of the Character Map application is a Font drop down menu which lists all the fonts you currently have installed on your system. If you just downloaded a TrueType font (TTF) and didn’t install it into the Fonts directory (C:\Windows\Fonts by default), it won’t be listed here. Don’t worry if your specific font isn’t listed here, it isn’t the end of the world. Select any old font and click around.

If 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:

unicode-range: U+0030-U+0039;

If you wanted to specify multiple ranges, you would just separate them with commas:

unicode-range:
    U+0030-U+0039, /* 0-9 */
    U+0041-U+0051, /* Uppercase A-Z */
    U+0052-U+007A; /* Lowercase a-z */

And if you just want to embed the whole range of all uppercase, lowercase, punctuation, and symbols, you could just specify the following unicode range:

@font-face {
    src: url('assets/base02.ttf');
    font-family: Base02;
    unicode-range: U+0021-U+007B; /* whole range of uppercase, lowercase, symbols and punctuation. */
}

Again, use the character map if you want to find additional character such as the copyright symbol (©) or other symbols.

Remember, all fonts may not include special “extended” characters such as copyright symbols, dollar signs, fractions, pound signs, euro signs, etc. Make sure you check that your font includes the characters you need.

Now, with that out of the way, lets look at a full sample of unicode-range embedding in action!

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/07/specifying-certain-unicode-ranges-for-embedded-fonts/ -->
<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+0021-U+007B; /* whole range of uppercase, lowercase, symbols and punctuation. */
        }

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

Shocking? No, not really, because we saw the new unicode-range style earlier in the pre-code discussion. But what kind of filesize savings did we encounter by only embedding a “small range” of characters? Well, in this case, none really. The Base02 font really only has the regular letters, numbers, punctuation and symbols to begin with, so our SWF size is still ~260 KB, same as the previous article where we didn’t specify a range at all.

But what if we only specify the exact characters that we need, the uppercase “T”, full range of lowercase letters and the period? Well, as luck has it, I did just that:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/07/specifying-certain-unicode-ranges-for-embedded-fonts/ -->
<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>

Yeah, the same big snippet for a minor little tweak, but hey. I’m sure it makes somebody’s life easier if they can grab all the code in one place instead of copying from two sources.

So, with the bare minimum of characters embedded, what is the new file size of the SWF? My main SWF file is now down to 193 KB (down from ~260 KB), which is about 74% of its original size, and only 46 KB larger than the same example without any embedded font. Not too bad for a tiny bit of work! Of course, its pretty easy when you know exactly which characters are used. If we were using the font for multiple text fields or a TextInput/TextArea control you would probably need to embed the whole range of characters since you couldn’t be sure of what the user would be entering.

View source is enabled in the following example.

Base 02 font by www.stereo-type.net.

 
]]> http://blog.flexexamples.com/2007/08/07/specifying-certain-unicode-ranges-for-embedded-fonts/feed/ 8 Embedding and animating fonts in a Flex application http://blog.flexexamples.com/2007/08/06/embedding-and-animating-fonts-in-a-flex-application/ http://blog.flexexamples.com/2007/08/06/embedding-and-animating-fonts-in-a-flex-application/#comments Tue, 07 Aug 2007 05:58:28 +0000 Peter deHaan http://blog.flexexamples.com/2007/08/06/embedding-and-animating-fonts-in-a-flex-application/ 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) [...]]]> 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.

Base 02 font by www.stereo-type.net.

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.

 
]]> http://blog.flexexamples.com/2007/08/06/embedding-and-animating-fonts-in-a-flex-application/feed/ 11