Flash-MX: News

Ah, the age old question, how does one embed fancy fonts into a Flash document? Particularly when you're creating dynamic text fields with code?

Well, it is actually easier than most people think. All you need to do is add a font to your library by clicking the options button in the Library panel and selecting New Font... well, ok, there's a few more steps than that. But after you do this, you can rotate and fade out dynamic text, so it's pretty useful.

There are probably more than a couple occasions when you want to embed a font, or modify its _alpha or _rotation properties without having to break apart the text and convert it into a MovieClip symbol. This quick mini-tutorial shows you how you can take your fancy fonts and embed them into your Flash document so the end users can see your font, even if they don't have it installed.

1. Open the Library panel (Ctrl+L).
2. Add a font to your library - click the options menu in the upper right corner of the panel and select New Font from the menu.
3. In the Font Symbol Properties dialog box select the font, size and style that you want and give the font combination a name. Click OK to close the dialog box.
4. Right-click the font symbol in the library and select Linkage from the contextual menu.
5. In the Linkage Properties dialog box, click the Export for ActionScript button to enable both the Identifier and AS 2.0 Class text input fields. Leave the default Identifier value and click OK to close the dialog box.
6. Select the text tool from the Tools panel and draw a dynamic text field on the Stage.
7. Give the text field an instance name of "my_txt". In the Font menu select the symbol name you gave the embedded font earlier. You should see a little asterisk (*) beside the name.
8. In the Property inspector set the font size and style to match those in the Font Symbol Properties dialog box earlier.
9. Open the Actions Panel and add the following code to Frame 1 of your Flash document:

   my_txt.embedFonts = true;
my_txt._rotation = 15;
my_txt._alpha = 10;


Enter some text into the dynamic text field and test the SWF file. You should see your text slightly rotated by 15° and nearly transparent.

This is useful if you need to create your text field with ActionScript. Using the same general techniques you can also create dynamically created text fields using the createTextField method, although this requires a few more steps...

With the font already embedded into your library, you can now use the following code:

var my_fmt:TextFormat = new TextFormat();
my_fmt.bold = true;
my_fmt.font = "Palatino 24pt Bold"; /* this is the LinkageID not the symbol name. */
my_fmt.size = 24;
this.createTextField("new_txt", this.getNextHighestDepth(), 10, 10, 100, 200);
new_txt.setNewTextFormat(my_fmt);
new_txt._rotation = 45;
new_txt._alpha = 50;
new_txt.autoSize = true;
new_txt.embedFonts = true;
new_txt.text = "hello world";


The only real snag in all of this is that if you are using a manually created text field, the font name is taken from the Symbol name in the library. But, if you are dynamically creating text fields, it seems that you have to use the Linkage identifier instead.

You can even build feedback forms with embedded forms by modifying the code to the following:

/* Note: You'll still the "my_fmt" code for this example to work. */
this.createTextField("new_txt", this.getNextHighestDepth(), 10, 10, 400, 300);
new_txt.setNewTextFormat(my_fmt);
new_txt._rotation = 10;
new_txt._alpha = 50;
new_txt.embedFonts = true;
new_txt.text = "";
new_txt.type = "input";
new_txt.multiline = true;
new_txt.wordWrap = true;
new_txt.border = true;


Note that the autoSize property was also removed since that just throws a giant wrench into the works.

Posted by jen on July 15, 2004 at 02:09 PM