Articles:Dynamic Font Loading

From CASA Framework

Contents 1 Dynamic Font Loading/Shared Fonts Manager 1.1 Preface 1.2 An Example 1.3 The Trick 1.3.1 Setting Up Your Files 1.3.2 Implementing the Code 1.4 Caveats 1.4.1 Static TextField problem 1.5 Conclusion

[edit] Dynamic Font Loading/Shared Fonts Manager

(This article is using the CASA Framework)

[edit] Preface

Many large flash projects or multilingual sites are prime candidates for dynamic font loading and switching. Unfortunately this is not as easy as a loadMovie call. Flash makes it close to impossible to accomplish this. So hard in fact that there are costly Flash components to handle this need. Hold onto your money; after reading this article you will be able to dynamically load fonts for FREE!

[edit] An Example

As you can see below, dynamic font loading in Flash is possible. Click on a font name to load it in! The great advantage of the CASA implementation is the ability to define which characters you embed (as opposed to embedding an entire font face). It also allows the use of non ttf fonts.

[edit] The Trick

Getting Font loading to work in Flash is really a hack. It is complicated to set the files up, but CASA has made the code aspect simple, quick and elegant.

Please note: This is also fairly well covered in the org.casaframework.load.media.font.FontManager class.

[edit] Setting Up Your Files

To create an externally loadable Font resource please use the following steps:

1. Create a new FLA file and name it yourFontDesc_lib.fla.
2. On the root of yourFontDesc_lib.fla create a dynamic TextField.
3. Choose a typeface and embed all characters you want to include. Include "Basic Latin" for this example.
4. Enter some text into the TextField. This is required to have the font successfully register. It is recommend to enter the font name into the field.
5. Give the TextField an instance name of font_txt.
6. Convert the TextField to a symbol, give it a name of myFont, and make sure its type is MovieClip.
7. Make sure "Export for runtime sharing" is checked under Linkage, and give it an Indentifier of myFont.
8. In the URL field type [yourFontDesc_lib].swf (Univers_55_lib.swf in the screenshot below). This path is relative to the HTML file that your shell SWF will be loaded into, so change the path in this URL field if necessary.

   

9. Click OK to apply these changes to the symbol.
10. Publish this file and save it. You can now close this FLA.
11. Create a new FLA and name it yourFontDesc.fla.
12. In yourFontDesc.fla create a new symbol, give it a name of myFontContainer, and make sure its type is MovieClip.
13. Check "Import for runtime sharing" under Linkage, and give it an Indentifier of myFontContainer.
14. In the URL field type the same URL you used in the [yourFontDec_lib].fla URL field (Univers_55_lib.swf in the screenshot below). It actually doesn't matter what you type here, because it will automatically update with the correct value (even if it gives you an error) once you complete the next few steps.

    

15. Under Source click the browse button and find yourFontDesc_lib.fla and click Open.
16. Select source symbol myFont and click OK.

    

17. Click OK to apply these changes to the symbol.
18. Make sure the the symbol is on the main stage at the root level and give it an instance name of fontContainer_mc.
19. On a frame at the root place the following code (REQUIRED):

    import org.casaframework.load.media.font.FontManager;

    FontManager.registerFont("myFontRefrenceName", this.fontContainer_mc.font_txt, this, true);

    Please also read the documentation for registerFont.

    Note: If you are concerned about the extra file size added by the FontManager class, you can compile against an intrinsic class for your external font SWFs.

20. Publish this file and save it. You can now close this FLA.

[edit] Implementing the Code

First let's explain the ActionScript you added to your external font SWF.

FontManager.registerFont(referenceName:String, field:TextField, sender_mc:MovieClip, isLastRegister:Boolean):Boolean

Parameters:

• referenceName

  The unique reference name of your font. This can be any name of your choice. You will need this name later to assign the typeface to a textfield.

  field

  TextField with the embedded font.

  sender_mc

  Reference to the external SWFs root/shell; if this code is on the top timeline sender_mc should be this.

  isLastRegister

  [optional] Indicates it's the last font registered true, or that there are other fonts left to register false; defaults to false. This is used when registering multiple fonts in the same file. You only set true on the last register so FontManager knows when it can clean up and unload the SWF.

Returns

Returns true if parameter sender_mc was referenced correctly and the font was successfully registered; otherwise false.

The hardest parts is over.

Let's create a final FLA, name it shell.fla. In shell.fla on root timeline enter the following code:

1. First we need to import the FontManager class into our Flash shell (the SWF loading the fonts):

   import org.casaframework.load.media.font.FontManager;

2. Before we can start the load process we will create a dynamic TextField:

   this.createTextField("headline_txt", this.getNextHighestDepth(), 10, 10, 250, 250);

   this.headline_txt.multiline = this.headline_txt.wordWrap = this.headline_txt.border = true;

   this.headline_txt.type = "input";

   var myFormat:TextFormat = new TextFormat();

   this.myFormat.size = 20;

   this.headline_txt.setNewTextFormat(myFormat);

   this.headline_txt.text = "Lorem Ipsum.";

3. Now we create a new FontManager object, passing in the path to the SWF font wrapper containing the code we entered above:

   var fontLoad:FontManager = FontManager.loadFont("yourFontDesc.swf");

4. We add an event observer so we know when the font has successfully loaded and registered:

   this.fontLoad.addEventObserver(this, FontManager.EVENT_FONT_REGISTER, "onFontRegister");

   (See documentation for all dispatched events)

5. Now let us create the function that handles the event:

   function onFontRegister(refrenceName:String, fontTextFormat:TextFormat):Void { FontManager.applyTextFormatByReferenceName(refrenceName, this.headline_txt); }

   The function uses the applyTextFormatByReferenceName method to apply the Font to a TextField with an instance name of headline_txt. FontManager automatically determines if the font is a System Font (_sans, _typewriter or _serif) or a non-system font and sets the embedFonts property of the TextField accordingly.

6. Now all we have to do is start the font load process:

   this.fontLoad.start();

You should see the TextField with containing "Lorem Ipsum." set in the typeface you just loaded.

[edit] Caveats

[edit] Static TextField problem

If any static/dynamic embeded text field in the flash movie uses the same font as the font you're trying to load, that font will not be properly registered. This is true for any dynamic font loading and is due to a limitation in Flash and not the CASA Framework. Note that this will not generate any error messages. Even though the font loads appear to register properly, they will fail silently.

The solution is to not use any fonts in static text fields that you want to load or breaking apart the static text fields into shapes.

[edit] Conclusion

This article only covers the basics of FontManager. There are additional options and functions we did not cover. This example should serve as a great start to creating robust, dynamic font loading solutions.

If you have any questions regarding this article, feel free to ask them on the CASA discussion list.