We all know what a pain it can be to embed fonts, switching font sets at runtime and using foreign characters in our websites or applications. Especially for dynamic data.

There is no way in Flash to specify the character set you need when embedding a font in your library. If you do this you will always get the Latin glyphs and that’s it. But what if you wanna use the greek glyphs in the Arial font and then switch back to another language with another font? And how about using different fonts in one textfield?

Please enable Javascript and Flash to view this Flash video.

Download the source files here: 

The answer to our prayers is Flex. 

You don’t even need Flexbuilder or typing mxml. I’ll show you how to do this using the free command line compiler.

I have created some classes that you can use in your Flash projects.

I have also included usage for CSS to use more than one font/style in a texftield.

So what do we need:

1. Free Flex3 sdk (or Flexbuilder)
2. Flash CS3
3. The FontController classes provided by us.

Yup that’s it :-)

In general this is what we will be doing:

1. Compile a swf with the font(s) embedded with the Flex compiler.
We are going to create 2 swf’s with embedded fonts. 
a. Western.swf with the fonts BradyBunch and Arial with Basic Latin glyphs
b. Greek.swf with the font Arial with only Greek glyphs.

2. Create a Flash swf.

3. Load the Flex swf’s in the Flash swf.

4. Get the fonts out the Flex swf’s and use them in the Flash swf.

5. Done!

Step 1: Create the Flex swf:

Creating a Flex swf with the fonts embedded.
We will be using two techniques to embed the fonts in our swf.

a. embed through source
b. embed through systemFont

The difference is that using the ’source method’ you can only use *.ttf (TrueType) fonts. Using systemFont you have access to much more font types.

For an example take the file Western.as from the source. You will find it in the Flex folder.

You can compile it using the mxmlc compiler. On a mac it should be something like this:

/Users/wimvanhenden/Documents/sdks/flex_sdk_3/bin/mxmlc /Users/wimvanhenden/Desktop/FontCompiling/Flex/Western.as -output /Users/wimvanhenden/Desktop/FontCompiling/Flash/Western.swf

The -output argument is the output folder where you want your swf to be placed.

That’s the hardest part really. 

Step 2: Use the fonts in Flash

I’ve created a few classes for you to work with on the Flash side of things.
You can find them in the example under flash/src.

The class you really need is the Fontset.as in the be.boulevart.fontsetmanager package.

It works like this:

1. Create a fonstset object (be.boulevart.fontsetmanager.FontSetObject)

2. Create an instance of the FontSet class  (be.boulevart.fontsetmanager.FontSet) and pass the fontsetobject to the constructor.

3. Add an eventlistener of type ACTIVATED on your FontSet instance.

4. Activate the fontset with the method FontSet.activateFontSet()

5. Once the handler for your event is triggerd you are ready to use the fontset.

More on the FontSetObject:

The FontSetObject takes 4 parameters, you have to set using the constructor or through getters/setters.

1. The first one is the path to your swf with the embedded font

2. Second the path to the CSS file you want to use. If you do not want to use CSS just enter an empty string.

3. The name of the class in the Flex swf as a string

4. An array with the font names you have declared in the Flex class.

It’s all in the zip file and you can download it here.


Technorati Tags: , ,