Tag Archives: howto

How to embed fonts in pure AS3

On my travels as a contractor, I’ve seen various methods used for embedding fonts in ActionScript 3 projects (code embedded, creating font SWFs, runtime loading, etc). Each of them has its own merits (and limitations), but generally you’re looking for something that’s easy to do, easy to maintain (for others, not just yourself) and of course that works!

So, here’s the method I use for pure AS3 projects I compile with the Flex SDK. I embed the TTF or OTF file in a ‘Style’ class and include those font files in the CVS/SVN repository too – it does my head in when fonts go missing, because a designer can’t remember which font they used:

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

Default ranges
U+0020-U+0040, // Punctuation, Numbers
U+0041-U+005A, // Upper-Case A-Z
U+005B-U+0060, // Punctuation and Symbols
U+0061-U+007A, // Lower-Case a-z
U+007B-U+007E, // Punctuation and Symbols

Extended ranges (if multi-lingual required)
U+0080-U+00FF, // Latin I
U+0100-U+017F, // Latin Extended A
U+0400-U+04FF, // Cyrillic
U+0370-U+03FF, // Greek
U+1E00-U+1EFF, // Latin Extended Additional

[Embed(source = '../fonts/myfont.ttf', fontName = 'MY_FONT',
fontWeight = 'regular', unicodeRange =
mimeType = 'application/x-font')]
public static const MY_FONT :Class;

public static const DEFAULT_FONT :String        = "MY_FONT";
public static const DEFAULT_TEXT_COLOUR :int = 0xFFFFFF;
public static const DEFAULT_TEXT_SIZE :int = 14;
public static const MY_TEXT_FORMAT :TextFormat = new

Through experience, this seems to be the most robust and maintainable way of dealing with fonts (not to throw out more flexible, but perhaps less robust ways, such as runtime loading), especially when you need control of the unicode ranges you are embedding – which I have included for reference.

How to use ExternalInterface to integrate AS3 with JavaScript

Here’s a quick snippet of code for setting up intercommunication between a SWF and JavaScript, using ExternalInterface:

import flash.external.ExternalInterface;

// Calling a JavaScript function from AS3 (with optional parameters)
if (ExternalInterface.available) ExternalInterface.call("javascriptFunction", param1, param2);

// Implementing a JavaScript callback in AS3 (flashFunction is called when JavaScript calls javascriptFunction)
if (ExternalInterface.available) ExternalInterface.addCallback("javascriptFunction", flashFunction);

Attaching a Bitmap – AS2 vs AS3

A common task that has changed drastically in ActionScript 3.0 is loading a library image via its linkageID into a BitmapData object and attaching it to a movieclip. In ActionScript 2.0, this can be done like so:

import flash.display.BitmapData
var bmp:BitmapData = BitmapData.loadBitmap("linkageID");
var img = createEmptyMovieClip("img",0);

In ActionScript 3.0 movieclips and bitmaps are not attached or created like this – everything is created with the new keyword. Also, a BitmapData object should be dropped into a new Bitmap, which can be added to the stage with the all-important addChild() method.

Since a library bitmap inherits from BitmapData, you now set the class of the bitmap its Linkage Properties in Flash CS3, instantiate it and wrap it in a Bitmap object that you add to the stage:

Attaching a bitmap in AS3

Where ‘Butterfly’ refers to the bitmap library item you’ve given the class definition ‘Butterfly’. The Base class is generated automatically. These five lines of code can be shortened to one, but is less readable:

var img = addChild(new Bitmap(new Butterfly(0,0)));

Note that in Flex Builder, unlike Flash CS3, you would embed an image using the embed meta tag, associating it with a variable, instead of its Linkage Properties dialog:

[Embed(source='image.jpg')] public var Butterfly:Class;

Building SWFs in Flex Builder is a whole different topic – so stay tuned!