I’ve been building Flash sites and applications for a while now and I still sometimes forget how to properly embed fonts for use with dynamic text. I’m not talking about populating existing TextFields that have manually had fonts embedded in them, but rather more complex situations where you are either dynamically creating TextFields or you want to have complex formatted paragraphs, perhaps containing different fonts and weights in the one field. This is when things start to get a bit trickier.

Benefits of Embedding Fonts

• You can be sure the font will display (even if the user does not have the font installed on their computer)
• You have the option to use antialiasing
• Centrally change fonts used in all text fields at once

If you are using a CMS for Flash such as Rainbow Live, you will want the text to display in your swf file the same way it looks in the rich text editor, and that means embedding fonts. What can make this confusing is that if the font is installed on your computer (as it probably will be seeming as your the developer) the text will appear to display properly while you test on your machine, however when someone views the file that doesn’t have the font installed, they will be greeted with a default font instead, and that could really kill your site’s mojo (Times New Roman anyone?). One clue you might have as to an unembedded font is that it will not display antialiased.

Two Approaches

So we’re going to go through two approaches here and the difference depends on how you want to work, as well as if you want font and style variations in your text display. These examples will be as code focused as possible, but there is no reason why you can’t apply the same approach to TextFields on the stage or from the library.

Method 1 – Embedding for use with a single font (for use with the TextField.text property)

I use this approach when I only need to have a single font per TextField, but I want the flexibility to be able to change what that font is via code without having to go in and change the font properties on an actual TextField in the Flash IDE.

The first thing to do is embed some fonts. For this example we’ll choose two fonts, I’ve chosen Comic Sans and Impact as they are both easily recognisable and it will be easy to double check if they are displaying properly. To embed the fonts, go to the Flash IDE and do the following:

Embedding a Font in the Library

1. Open up the library and select “New Font” from the properties menu on the top right
   
   
2. Choose a name for your font. I like to take a styles approach and name the fonts acccording to their function as opposed to font name, so for the name value I’ll put “heading_font”.
   
   
3. Choose which font and font style you want, in this case I’ll choose Impact and as there are no styles (Usual options ar Normal, Bold, Italic and Bold Italic) I won’t bother selecting a style. Remember Bold, Italic etc. are considered seperate fonts as far as Flash is concerned and have to be embedded individually.
4. Tick the “Export for Actionscript” option in the linkage section and add a Class name for the font, I’ll keep this as “heading_font” – this will be the id we use to refer to the font later on. We’ll leave Export in Frame 1 ticked so that we can simply call the font from code
   
5. That’s it, press ok and close the Font Symbol Properties window, you’ll notice that there is now a font in your library named “heading_font”
   

Now that the font is embedded let’s see how we use that font in a TextField. Remember you can do this with a TextField you’ve manually created and placed on the stage, but I will be creating the field with code in this example.

import flash.text.Font;
import flash.text.TextField;
import flash.text.TextFormat;
//
//-------------------------------------------------------
// CREATE HEADING
//
// Build Textfield and Set Some Basic Properties.
// (You won't have to do this if you are using a manually created TextField)
//-------------------------------------------------------
var myHeadingField:TextField = new TextField()
myHeadingField.embedFonts = true
myHeadingField.selectable = false
myHeadingField.autoSize = "left"
//
//-------------------------------------------------------
// Create Font Reference and TextFormat
//-------------------------------------------------------
var myHeadingFont:Font = new heading_font()
var myHeadingFormat:TextFormat = new TextFormat(myHeadingFont.fontName,20)
myHeadingField.defaultTextFormat = myHeadingFormat
//
//-------------------------------------------------------
// Populate TextField With Text and Add to Stage
//-------------------------------------------------------
myHeadingField.text = "Here Is An Example Headline In Impact"
myHeadingField.x = 10
myHeadingField.y = 10
addChild(myHeadingField)

As you can see in the code above we simply create an instance of the font, and then use the fontName property to set this as the font of a new TextFormat. We can then use this TextFormat to style and TextField we choose. You could reference the font name directly without creating a Font instance such as:

var myFormat:TextFormat = new TextFormat("Impact",20)

But I find that there are a couple of downfalls with this approach. Firstly it means that you are being specific about which font you are using for the headline, this means that if you change your font from Impact to Helvetica you are going to have to come in and change your code so that you’re telling the TextFormat to use “Helvetica” instead of “Impact”, abstacting this part means that you only have to update the font in the IDE and everythign will continue to work. The second advantage is if you are working with swcs as opposed to an FLA file (You might be working with FlashDevelop, Flash Builder or a similar development environment) your font won’t actually be embedded unless it is mentioned explicitly somewhere in the code, hence this technique kills two birds with one stone.

Similarly, to embed a second font for your body copy follow the same process by first embedding the font and then aplying it with code. You might end up with something along the lines of the following:

//
//-------------------------------------------------------
// CREATE BODY
//
// Build Textfield and Set Some Basic Properties.
// (You won't have to do this if you are using a manually created TextField)
//-------------------------------------------------------
var myBodyField:TextField = new TextField()
myBodyField.embedFonts = true
myBodyField.selectable = false
myBodyField.wordWrap = true
myBodyField.width=450
//
//-------------------------------------------------------
// Create Font Reference and TextFormat
//-------------------------------------------------------
var myBodyFont:Font = new body_font()
var myBodyFormat:TextFormat = new TextFormat(myBodyFont.fontName,16)
myBodyField.defaultTextFormat = myBodyFormat
//
//-------------------------------------------------------
// Populate TextField With Text and Add to Stage
//-------------------------------------------------------
myBodyField.text = "Here is some body copy for the text embed example. You could use data from an XML file to provide the text content for each of these TextFields"
myBodyField.x = 10
myBodyField.y = 40
addChild(myBodyField)

And heres our output:

Method 2 – Embedding for use with complex multi-font formatting (for use with the TextField.htmlText property)

The second technique is for those times when you wish to use more than one font, or even just use more than one font style (such as using Bold and Italic) as these are considered separate fonts by Flash.

You start things off the same way by embedding the fonts that you’ll need to use, remember to embed Bold, Italic and Bold Italic as individual fonts. Follow the ‘Embedding a Font in the Library’ section above.

In this example I’ll use the same two fonts, Impact and Comic sans, but instead of using two separate TextFields to display the Heading and Body I will display them both in the one field. This is useful for a number of reasons, but in general it means that you can display a chunk of HTML formatted text in the one TextField without having to create a new one for each piece of different formatting within the text block. This is great for working with Rich Text Editors in a Flash CMS such as the one in Rainbow Live, which means the user can edit and format the text as they wish and it can display within Flash without having to be limited by a predefined content structure.

Here’s a screen shot of the text as edited in Rainbow Live:

You can see there are two heading sections and a couple of paragraphs along with some bold and italic text. You can display embedded fonts at any size so there is a smaller footnote section thrown in for good measure also.

The trick behind Rich Text Editors in Flash is that they use a subset of Flash Friendly HTML to style the text. Flash only supports some of the more simple HTML elements such as <p>, <a> and <img>,for a complete list view the support docs from adobe.

Here’s the HTML output from Rainbow:

<TEXTFORMAT LEADING="2">
  <P ALIGN="LEFT">
    <FONT FACE="Impact" SIZE="20" COLOR="#333333" LETTERSPACING="0"
    KERNING="0">Here Is An Example Headline in Impact</FONT>
  </P>
</TEXTFORMAT>
<TEXTFORMAT LEADING="2">
  <P ALIGN="LEFT">
    <FONT FACE="Comic Sans MS" SIZE="12" COLOR="#333333"
    LETTERSPACING="0" KERNING="0"></FONT>
  </P>
</TEXTFORMAT>
<TEXTFORMAT LEADING="2">
  <P ALIGN="LEFT">
    <FONT FACE="Comic Sans MS" SIZE="16" COLOR="#818181"
    LETTERSPACING="0" KERNING="0">Here is some body copy for the
    text embed example. This data has been formated with the
    <I>Rich Text Editor</I>in
    <B>Rainbow Live*</B></FONT>
  </P>
</TEXTFORMAT>
<TEXTFORMAT LEADING="2">
  <P ALIGN="LEFT">
    <FONT FACE="Comic Sans MS" SIZE="12" COLOR="#818181"
    LETTERSPACING="0" KERNING="0">
      <I>* learn more about</I>
      <FONT COLOR="#333333">
        <I></I>
        <FONT COLOR="#3452FF">
          <A HREF="http://www.codeandvisual.com/rainbow"
          TARGET="_blank">
            <I>Rainbow Live Flash CMS</I>
          </A>
          <FONT COLOR="#818181"></FONT>
        </FONT>
      </FONT>
    </FONT>
  </P>
</TEXTFORMAT>
<TEXTFORMAT LEADING="2">
  <P ALIGN="LEFT">
    <FONT FACE="Comic Sans MS" SIZE="12" COLOR="#333333"
    LETTERSPACING="0" KERNING="0"></FONT>
  </P>
</TEXTFORMAT>
<TEXTFORMAT LEADING="2">
  <P ALIGN="LEFT">
    <FONT FACE="Comic Sans MS" SIZE="12" COLOR="#333333"
    LETTERSPACING="0" KERNING="0"></FONT>
  </P>
</TEXTFORMAT>
<TEXTFORMAT LEADING="2">
  <P ALIGN="LEFT">
    <FONT FACE="Impact" SIZE="20" COLOR="#333333" LETTERSPACING="0"
    KERNING="0">Here is a Second Heading</FONT>
  </P>
</TEXTFORMAT>
<TEXTFORMAT LEADING="2">
  <P ALIGN="LEFT">
    <FONT FACE="Comic Sans MS" SIZE="12" COLOR="#333333"
    LETTERSPACING="0" KERNING="0"></FONT>
  </P>
</TEXTFORMAT>
<TEXTFORMAT LEADING="2">
  <P ALIGN="LEFT">
    <FONT FACE="Comic Sans MS" SIZE="16" COLOR="#818181"
    LETTERSPACING="0" KERNING="0">If we wanted to do this with the
    first text embed example we would have had to have a separate
    TextField for each heading and copy section. This option allows
    us to have as many heading and body sections as we like within
    the one TextField.</FONT>
  </P>
</TEXTFORMAT>

You’ll notice a lot of TEXTFORMAT and FONT tags in the markup. These are created especially for use in Flash and are now superceded in standard HTML. Flash will also recognise HTML formatted without these tags but unfortunately won’t recognise div or table tags (along with many others).

Now that you have some HTML to display, we can display this text very similarly to the first example, with one important difference in particular – use of the TextField.htmlText Property rather than TextField.text

import flash.text.Font;
import flash.text.TextField;
import flash.text.TextFormat;
//
//-------------------------------------------------------
// Make Reference To Fonts
//-------------------------------------------------------
var style_heading:Class = heading_font
var style_body:Class = body_font
var style_body_italic:Class = body_font_italic
var style_body_bold:Class = body_font_bold
var style_body_bold_italic = body_font_bold_italic
//
//-------------------------------------------------------
// CREATE HEADING
//
// Build Textfield and Set Some Basic Properties.
// (You won't have to do this if you are using a manually created TextField)
//-------------------------------------------------------
var myField:TextField = new TextField()
myField.embedFonts = true
myField.selectable = false
myField.wordWrap = true
myField.width = 450
myField.multiline = true
myField.autoSize="left"
myField.condenseWhite = false
//
//
//-------------------------------------------------------
// Populate TextField With Text and Add to Stage
//-------------------------------------------------------
myField.htmlText = '&lt;TEXTFORMAT LEADING="2"&gt;&lt;P ALIGN="LEFT"&gt;&lt;FONT FACE="Impact" SIZE="20" COLOR="#333333" LETTERSPACING="0" KERNING="0"&gt;Here Is An Example Headline in Impact&lt;/FONT&gt;&lt;/P&gt;&lt;/TEXTFORMAT&gt;&lt;TEXTFORMAT LEADING="2"&gt;&lt;P ALIGN="LEFT"&gt;&lt;FONT FACE="Comic Sans MS" SIZE="12" COLOR="#333333" LETTERSPACING="0" KERNING="0"&gt;&lt;/FONT&gt;&lt;/P&gt;&lt;/TEXTFORMAT&gt;&lt;TEXTFORMAT LEADING="2"&gt;&lt;P ALIGN="LEFT"&gt;&lt;FONT FACE="Comic Sans MS" SIZE="16" COLOR="#818181" LETTERSPACING="0" KERNING="0"&gt;Here is some body copy for the text embed example. This data has been formated with the &lt;I&gt;Rich Text Editor&lt;/I&gt; in &lt;B&gt;Rainbow Live*&lt;/B&gt; &lt;/FONT&gt;&lt;/P&gt;&lt;/TEXTFORMAT&gt;&lt;TEXTFORMAT LEADING="2"&gt;&lt;P ALIGN="LEFT"&gt;&lt;FONT FACE="Comic Sans MS" SIZE="12" COLOR="#818181" LETTERSPACING="0" KERNING="0"&gt;&lt;I&gt;* learn more about&lt;/I&gt;&lt;FONT COLOR="#333333"&gt;&lt;I&gt; &lt;/I&gt;&lt;FONT COLOR="#3452FF"&gt;&lt;A HREF="<a href="http://www.codeandvisual.com/rainbow">http://www.codeandvisual.com/rainbow</a>" TARGET="_blank"&gt;&lt;I&gt;Rainbow Live Flash CMS&lt;/I&gt;&lt;/A&gt;&lt;FONT COLOR="#818181"&gt;&lt;/FONT&gt;&lt;/FONT&gt;&lt;/FONT&gt;&lt;/FONT&gt;&lt;/P&gt;&lt;/TEXTFORMAT&gt;&lt;TEXTFORMAT LEADING="2"&gt;&lt;P ALIGN="LEFT"&gt;&lt;FONT FACE="Comic Sans MS" SIZE="12" COLOR="#333333" LETTERSPACING="0" KERNING="0"&gt; &lt;/FONT&gt;&lt;/P&gt;&lt;/TEXTFORMAT&gt;&lt;TEXTFORMAT LEADING="2"&gt;&lt;P ALIGN="LEFT"&gt;&lt;FONT FACE="Comic Sans MS" SIZE="12" COLOR="#333333" LETTERSPACING="0" KERNING="0"&gt;&lt;/FONT&gt;&lt;/P&gt;&lt;/TEXTFORMAT&gt;&lt;TEXTFORMAT LEADING="2"&gt;&lt;P ALIGN="LEFT"&gt;&lt;FONT FACE="Impact" SIZE="20" COLOR="#333333" LETTERSPACING="0" KERNING="0"&gt;Here is a Second Heading&lt;/FONT&gt;&lt;/P&gt;&lt;/TEXTFORMAT&gt;&lt;TEXTFORMAT LEADING="2"&gt;&lt;P ALIGN="LEFT"&gt;&lt;FONT FACE="Comic Sans MS" SIZE="12" COLOR="#333333" LETTERSPACING="0" KERNING="0"&gt;&lt;/FONT&gt;&lt;/P&gt;&lt;/TEXTFORMAT&gt;&lt;TEXTFORMAT LEADING="2"&gt;&lt;P ALIGN="LEFT"&gt;&lt;FONT FACE="Comic Sans MS" SIZE="16" COLOR="#818181" LETTERSPACING="0" KERNING="0"&gt;If we wanted to do this with the first text embed example we would have had to have a separate TextField for each heading and copy section. This option allows us to have as many heading and body sections as we like within the one TextField.&lt;/FONT&gt;&lt;/P&gt;&lt;/TEXTFORMAT&gt;'
myField.x = 10
myField.y = 10
addChild(myField)

You’ll see at the beginning of the code we’ve made reference to the font classes the we created and embedded in the library, there’s no need to make instances of them as we don’t need to apply the fonts to the text manually because this is all being set in the HTML content. As long as the classes are referenced by name we can be sure they’ll be available to Flash at run time.

Here’s the output:

Immediately the power of this approach becomes clear – you don’t have to limit or second guess the exact structure of the content being displayed in the text field, and by using an external XML source you’ll have incredible flexibility in what you’ll be able to display. You’ll see that you can change colours and font sizes and even embed links. It’s also possible to display images via a standard <img>, tag within your HTML content, however your control options about how the images display are slightly limited.

That’s It!

And so that’s the end of the Flash text embed crash course, I hope you found it a useful reference. If you’d like to download the sample files you can download them here:Download example files

Learn more about Rainbow Live and how to use it a a simple Flash CMS, or even to make your Flash sites more Google Friendly.

Tags: Flash CMS, Font Embedding, rainbow live, Rich Text Editor, Tutorials