Tracked by Google

Home
Home
Embedding Fonts in AS2 & AS3
Written by Daniel   
Monday, 20 April 2009 10:44

You'll often find that dynamic text boxes and input boxes don't keep your custom font when you move away from the computer it was developed on, whereas static text boxes do. That is because dynamic and input are designed to work with ActionScript, and that the font isn't fixed.

I'll show you how to make it so your dynamic and input boxes keep their font in both as2 and as3. In both codes the first step is common.

  1. Save your custom font to the library.

In your library, click the more options button alongside the title of the window. Then choose New Font... Here you'll get to choose the font you wish to save, so it's packaged up along with your flash file. You should give it a name, so actionscript knows what to call it.

 

More Options >> New Font
Naming Font

 

Now we need to export this font so actionscript can reference it. To do this, right click on your new font item in the library and choose Linkage. You must select the checkboxes called "Export for ActionScript" and "Export in first frame" as in the example below.

 

Linkage Panel

 

Now (for the purposes of this tutorial), I will create a dynamic text box with the instance name "txtBody" - another name of note is "cowboys"  -my identifier for the font I'm using.

ActionScript 2.0

Embedding fonts in AS2 is pretty easy. All you need to do is create a new text format and apply your saved font to it. You put all this code into the frame where your text box resides. Here you see the code -

txtFormat = new TextFormat();
txtFormat.font = "cowboys";

You've created a new text format and then you apply your saved font "cowboys" to that format. Now I'll show you how to give that font to your text field.

txtBody.setTextFormat(txtFormat);

txtBody.embedFonts = true;

After you have specified the text format, then you can put the words into it.

txtBody.text = "Hello from AS2";

See, Easy.

 

Hello From AS2

 

For more information relating to Text Formats see the last section of the tutorial (along with the link to the free download of the font I used - Bleeding Cowboys).

ActionScript 3.0

ActionScript 3.0 is very different, as you may have experienced during other tutorials on this website. The method for setting up an ActionScript file is alot more complex, importing classes etc. I'll try to make this as simple as possible for you.

First, (as said above) we need to import the classes we're going to use. There are quite a few we'd need to make use of to do with text files as you see below -

import flash.text.Font;
import flash.text.TextField;
import flash.text.TextFormat;

Alternatively you could import all the flash.text classes by using flash.text.*

Importing classes is essential as flash stores all different methods in different classes and you cannot use those methods until you use those 3 lines of magic, above.

The next step is to set up your text format and import your font. To do this, you must first create a new instance of the font you wish to use, then create a new TextFormat, then apply said font to said format.

newfont:Font = new cowboys();
var txtFormat:TextFormat = new TextFormat();
txtFormat.font = newfont.fontName;

txtBody.embedFonts = true;

As you can see above, you've created a brand new instance of the font "cowboys", called newFont, and you've also created a new TextFormat called txtFormat. The last line is to apply newFont to txtFormat. The reason we do it this way is because you may wish to choose other options for format such as size or colour and that would then be encapsulated within the txtFormat for you to easily deploy where you see fit.

The next part is to apply this new TextFormat (with the font) onto the text field that we've created called txtBody.

txtBody.defaultTextFormat = txtFormat;

There. All that's left to do is add your text.

txtBody.text = "Hello from AS3";

And see the output.

 

Hello from AS3

 

Extras

You can expand on both TextFormats and TextFields by giving them new properties and customising them. This is quite simple; below is an example of customising a text format -

txtFormat.color = 0x000000;
txtFormat.align = left;
txtFormat.size = 70;
txtFormat.underline = true;

And customising a Text Field -

txtBody.multiline = true;
txtBody.wordWrap = true;
txtBody.x = 100;
txtBody.y = 100;
txtBody.height = 50;
txtBody.width = 200;

If you would like to use the font I chose for this example you can find it for FREE at - http://www.dafont.com/

Thanks to Sonic who pointed out a fatal flaw in my code ;)

 

Last Updated on Wednesday, 24 June 2009 19:35
 
home search