12.06.2010

17:10

Flash's font hell 2 - embedding a font

This time we will learn how we can embed a font into the swf file.

Last time we have heard the way how we embed the font depends on what tool we use to create the swf and what we want to do with the text field.

Flash IDE

In the flash IDE we have two ways to embed a font:

Text field properties

The easiest way to embed a font is to use the embed button in the text field's properties. This allows you to select exactly the characters you need.

pros:

* Holds the swf file as small as possible because just the needed characters can be embedded.

cons:

* There can just be one font linked to a text field. So it's not possible to combine different fonts or font variations like regular, bold or italic in one text field.

Embedding a font in the library.

A more flexible way to embed a font into the swf file is to put it into the library. This way we can link the font to a text field at runtime and so it allows us to use different fonts on the same text field. (If we use the text property we can just use one font at a time. To combine different fonts at the same time we have to use the htmlText property. More about it later.)

Don’t forget to activate the "export for actionscript" checkbox in the library's font entry. The linkage name is not important, we don’t need it. But it has to be activated to make flash putting the font into the swf file.

pros:

* Fonts are more flexible to use.

cons:

* If we put a font into the library, flash embeds all characters and we don’t have a chance to embed just some of them. This leads to bigger file size of the swf file.

Flex

In flex we just have one way how we can embed a font into a swf file. It’s the equivalent version of the second method in the Flash IDE. But here we can select characters to keep file size low.

Here is an example how it might look:

...
[Embed(source='C:/WINDOWS/Fonts/ARIAL.TTF', fontName='_Arial', unicodeRange='U+0020-U+002F,U+0030-U+0039')]
public static var _Arial:Class;
...

More about the embed metatag:
http://livedocs.adobe.com/flex/3/html/help.html?content=embed_4.html

That' it for today!

We have now the font embedded in the swf file. The next time we will see how we use this font in a text field.

PermalinkComments 0

AS3

06.06.2010

13:18

Flash's font hell 1 - introduction

In the last weeks I was working on a web app for a big company making sun blinds. One of the objectives was to make it highly customisable and prepare multilanguage usage in future.

To meet all goals I planed to load all parameters and texts from a xml file. On top of that(to give the customer a bit more than he requested, what is a good practice in my opinion) I decided to fill all textfields with the htmlText property, this gives the customer the possibility to use the textfield's html capabilities. I never did this before in this way, so I didn't know what was awaiting me :-)

Firstly everything was working fine(the text was taken from the xml structure and fontfaces were controlled by html tags.), but then I tried to use the embedded font of the CI.

From this time on the whole project was frustrating me for several days. I am sure you know what I am talking about. It's hell to use embedded fonts in flash. I was searching the web and I just found other people asking how this is working and showing there not working source codes.

Finally after nearly a week everything was working as I wanted, but to get there I had to try every combination of commands in as3 with all embedding techniques of flash to see what's working or not and how it works. It was a hard piece of work and this problem decreased my hourly rate of this project a lot. But what really counts is I know now how it's working :-)

I decided to write in the Blog about it, in the hope it will safe you some time.

Introduction

To make flash using an embedded font in a textfield we have to do some classifications of the way we want to reach our goal and what exactly we want the textfield to do.

Our problem will split into three parts: