Embed font for dynamic text animation

Posted: March 1st, 2010 | Author: guindex

One thing that worried us at first is find the best way to do embedFonts. I do not know if there is the “best” way to do this, but many people talk about it out there. The TextAnim has nothing implemented to do this, it only expects a TextField with everything ready.

TextAnim effect glow example

It depends on your workflow, some people prefer to load the font from an external file (.ttf) as a property class. Others prefer the SWC approuch, creating an instance of the font library and exports from Fash. Theres the approach of loading a swf with font inside, and registerFont in the application. Actually, you need to ensure that fonts are loaded and instantiated, as in any other case to use dynamic fonts in Flash.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
package
{
    import flash.display.Sprite;
    import flash.text.TextField;
    import flash.text.TextFormat;
   
    import flupie.textanim.*;
    import caurina.transitions.*;
   
    [SWF(width='605', height='200', backgroundColor='#000000', frameRate='60')]
   
    public class TAExternalFont extends Sprite
    {
        [Embed(source="/BradBunR.ttf", fontName="BradBunR", mimeType="application/x-font")]
        public var BradBunR:Class;
       
        public var ta:TextAnim;
        public var tf:TextField;

        public function TAExternalFont()
        {
            tf = new TextField();
            tf.autoSize = "left";
            tf.embedFonts = true;
            tf.defaultTextFormat = new TextFormat("BradBunR", 26, 0xFFFFFF);
            tf.text = "TextAnim with external font";
            addChild(tf);

            TextAnim.create(tf, {effects:myEffect, mode:"lastToFirst"}).start();
        }
       
        public function myEffect(block:TextAnimBlock):void
        {
            //...

            Tweener.addTween(block, {alpha:1, scaleX:5, scaleY:5, time:.5, transition:"easeinoutback"});
            Tweener.addTween(block, {scaleX:1, scaleY:1, time:.3, transition:"easeinoutquart", delay:.5});

            //...
        }
    }
}

I prepared two examples, the first “ta_external_font.zip” loads the file (.ttf) that piece of code above is part of that example. The other “ta_swc_font.zip” font is created in Flash and export a SWC with the class, I used this example to show how you can use external text with HTML, for example loading an XML and assigning the htmlText property of TextAnim.

Download source

  1. External font file example: ta_external_font.zip
  2. Embed font inside swc file: ta_swc_font.zip
  3. TextAnim latest version: downloads list
Filed under: TextAnim | Tags: , , , , , , , , , , , | 3 Comments »