Sunday, July 11, 2010

Text embedding in Flash

If you are using dynamic or input text areas in your flash, it is important that you embed the necessary fonts. There are two main reasons why you should do that:

1) Embedded fonts usually have better quality
2) Embedded fonts are displayed even if the user doesn't have them installed on their hard drive

Con: embedded fonts can add a few kb to the final file size.

In this flash, I am using 3 fonts - Chiller, Bleeding Cowboys and Vladimir Script. If you don't have a font installed (for example Bleeding Cowboys) it will be replaced with a system font:


In this second flash, I am using the same 3 fonts, however I embedded them, and you should see the custom fonts even if you don't have them installed on your computer:


So how do you embed fonts?

If you are creating a text field manually and placing it on stage, it is quite simple. Select your field and hit the Character Embedding button as shown on the picture:


After that, select the presets you want or enter the characters manually.
NOTE: If you embed some characters, for example letters, and then give the field characters that you didn't embed, for example numbers, then the numbers will not show.


You can also embed fonts through library and use them through Actionscript:



Check the "Export for Actionscript" box and enter a name for this font's class.


Now you can, for example, create the text field and apply the font using AS3:

var myFormat:TextFormat = new TextFormat();
var thisFont = new MyFont(); // MyFont - name of the font's class you defined before
myFormat.font = thisFont.fontName;
myFormat.size = 50

var texty:TextField = new TextField
texty.width=400
texty.text="This is sample text"
texty.setTextFormat(myFormat);
addChild(texty);

Then there is a way to embed fonts using only Actionscript. Here is the syntax:
[Embed(source="FileTtf", fontName="FontName", mimeType="application/x-font-truetype")]

The directory for the TrueType font can be relative or absolute:
[Embed(source="C:\Windows\Fonts\IncredibleFont.ttf", fontName="FontName", mimeType="application/x-font-truetype")]

If you want to embed system fonts, like Times New Roman, use systemFont instead of source:
[Embed(systemFont="Times New Roman", fontName="Times New Roman", mimeType="application/x-font-tyuetype")]

Text fields have property embedFonts (false by default), if you change it to true - only embedded fonts will be allowed in the field.
mytextfield.embedFonts = true;

After that, you need to tell the text field what fonts exactly do you allow, use TextFormat (like it was shown before). If the fontName of your font was "Times New Roman", then the code should look like this:

mytextformat.font = "Times New Roman";

That's all! Now you know how to embed fonts in your Flash.

No comments:

Post a Comment