There are now two types of font embedding available to both Flash (CS4) and Flex 3 and 4. These are DefineFont3 (classic), and DefineFont4 (supporting CFF and the new text engine.)

In Flash, Flex 2 and 3 you’d traditionally embed fonts for use in the TextField class, whether that’s a vanilla TextField, or a component that uses the TextField class and has been set to use embedded fonts. This is DefineFont3 embedding. The steps are usually:

  1. Embed fonts in a SWF using the Flash IDE or the [Embed()] tag in Flex.
  2. Set myTextField.embedFonts = true; (or setStyle(“embedFonts”,true) for a component.)
  3. Either set myTextField.defaultTextFormat, use setTextFormat(), or setStyle().
  4. Set the text with .text or .htmlText (using CSS or the font tag).

Via Andrew Shorten, Flex Builder Professional is free to students. You can sign up for a copy here.

Edit: Also free to those unemployed, limited time only on this one I would think.

I don’t have enough time right now to go into too much detail so I’m afraid this post will just consist of pointers and no real code samples, but I wanted to say that bullet points, although technically un-supported in the Text Layout Framework right now (in terms of <li> tags), are possible. Text alignment is already supported, and you can build a pretty solid text editor that uses these, as well as all the kinds of formatting you’d expect from colour to font weight.

In my case I have a further requirement where the editor needs to work on the whole TextFlow (imagine a user is moving/operating on the entire block of text, that might contain several paragraphs, spans, and a mixture of formatting, alignment and styling), but also on a particular selection, when the user places the carat between two characters, or selects a range of text (again that range might go over multiple different paragraphs). This is similar to the sizable TextBoxes in Microsoft Word.

Short and sweet, if you want to know the Unicode ranges for various glyphs, such as Latin 1, Cyrillic and so on, open up flash-unicode-table.xml from your “Flex SDK/frameworks/” directory.

You’ll find everything listed, and it’s a good way to save on font size.

In a nutshell: Don’t try to use Windows TTF files when embedding fonts in Flex on OSX, possibly a CFF thing.

Long version: I had a strange problem with font embedding in Flex Gumbo on OS X when trying to embed the following character ranges (using CFF):

																// numerals, full stop, lower, upper, punctuation, basic latin
[Embed(source='ttf/arial.ttf', fontFamily='Arial', unicodeRange='U+0030-U+0039,   U+002E,   U+0041-U+005A, U+0061-U+007A,   U+0020-U+002F,U+0030-U+0039,U+003A-U+0040,U+0041-U+005A,U+005B-U+0060,U+0061-U+007A,U+007B-U+007E', cff='true')]
public static var Arial:Class;

The first range (U+0030-U+0039) contains the numerals 0 through 9, but they were not being embedded in the resultant SWF. The TTF font I was using was Arial (regular) from my XP machine, this is because on a Mac you get a totally opaque “suitcase” file (dfont) for the whole family.

For some reason the numerals, in fact any punctuation characters, were not embedding; but letters were fine. I tested this with:

var font:Font = Font.enumerateFonts()[0] as Font;
trace(font.fontFamily + " has numerals: " + font.hasGlyphs("0"));

Very strange. Anyway the solution to this problem is to extract the TTF files from the Mac font suitacase files using Fondu (see Aral’s post on how to do this, it only takes a minute to install).

Then a simple “fondu Arial” in Terminal will extract the 4 TTF files (one for each style/weight), which will work with the DefineFont4 embedding process. Phew.

In my previous post I posed the problem of using the new Text Layout Framework in an application where you already have an Undo stack/mechanism, for example in PureMVC with the Undo utility (CommandHistoryProxy).

The challenge arises because the TLF already has an UndoManager, so the solution must hook into that. Added to that, in an application you’re likely to need to serialize your TextFlow to disk/server, which means de-serializing it, which means you’re storing your data outside of the TextFlow instance and needing to keep this store up to date as the user interacts with the TextFlow via the EditManager provided by the TLF.

UPDATE: I’ve posted a solution to this PureMVC + Text Layout Framework integration here (this applies not just to PureMVC, but anywhere you want to use your own “undo” stack in an MVC application).


I’m having a bit of a tricky time with integrating the TLF into an application which already has an “undo” system. The TLF has itself an UndoManager, but more on that later…

I’ve been using the TLF for the last day, and it’s really a major leap forward from the limitations of the TextField class introduced in Flash 6. TextField still has its uses, it’s most likely more processor friendly (unconfirmed). But if you’re in need of some of TLF’s advanced features like bi-di text (or complex script like TCY elements), support for flowing text between multiple columns and containers, better handling of in-line images, advanced styling of things like ligatures, superscript, and tracking, then TLF is for you.

The key thing for me was understanding how these key concepts fit together:

Back in October 2007 I wrote a post entitled “Does Flash Lite Have a Future?” which is one of my most popular posts and it sparked some interesting comments. The main argument I had for this wasn’t that Flash Lite was going down the pan, it was simply that we didn’t need it because the full Flash Player would be suitable for mobile due to touch-screen, higher powered mobile devices and lower power requirements for our applications anyway (the argument here is that we only use a tiny percentage of the CPU for most applications now unlike before).

Think about it another way. You can happily code a Flex application to work in the browser, or in the AIR runtime, I’m doing this at the moment. Both environments have special classes available, different properties on existing classes, but you know where you are with Capabilities.playerType, this same mechanism will help on mobile, and the mobile player itself will deal with user input/interaction differences as it does at present.


This announcement
from the GSMA Mobile World Congress seems to re-inforce this. I’m aware Flash Lite will continue to be used for the very low powered phones (the other end of the spectrum can hardly be called “phones” anymore when calling makes up a tiny fraction of what most kids use phones for now in the UK at least) but those’ll eventually shift to the full FP too. Windows Mobile, Google’s Android, Nokia S60/Symbian and Palm are the initial supported platforms. LG have signed up for 50 Windows Mobile devices by the looks of it, and I can see Android getting one hell of an adoption rate with OEMs struggling to compete against Symbian and iPhone, and the second that lower-end devices rise to meet the demands of Android, we’re in for a new boom era for Flash.

A thorn in the side of Flash Lite has been removed. Today Adobe has released a developer redistributable version of the Flash Lite 3.1 player along with the packager tool. This greatly improves the situation of not knowing whether someone has the player, and being helpless to get them it if they haven’t.

Read more here.

EDIT: I just tested this on my E71 by visiting m.adobe.com (thanks Scott), it works amazingly. Things may have been very different over the last few years of Flash Lite if this mechanism had been around. The application was small, installed quickly with only 1 nag, then prompted me to install Adobe Version Checker which installed Flash Lite 3.1 for me and immediately launched the game I had downloaded (Tower Bloxx). Good work! (Now for a Sony Ericsson version?).

Flash Lite 3.1 Distribution Workflow