Importing fonts to pure AS3 projects in Flex Builder

There are a lot of issues you run across when dumping the Flash IDE and doing pure AS3 projects in Flex Builder (the subject of many future posts), but one of the first ones you’ll run across is the issue of embedding fonts.

There are a number of solutions, but none of them are very elegant or well organized. I hate the idea of embedding fonts at compile time, because it gives you zero control over when you import and register your fonts, and it increases the necessary load time of your initial SWF. Plus its just plain ugly. If you had an FLA as the root of the project, it wouldn’t be an issue at all, you could simply embed the font in each text field you throw on the stage (which you can still do, so long as your text field is in a sub clip that is not directly referenced in the library), but your fonts are not very organized if you choose to do it that way either.

If you encase all your fonts in a SWF, and then give them direct class representations, you can keep track of all your fonts from a centralized SWF and keep their representative classes in a directory. Then you have control over when you load and register those fonts, as well as their organization. People who work on your projects after you can also see exactly what fonts you’ve embedded as well. With Flex Builder 3’s advanced refactoring you can also change an entire font across all text fields that use that font in just a few clicks (try that in your FLA!).

So, to start this you need a flash extension created by Tink, you can find it at this link. The plugin was made to do a similar process with Movie Clips (which turns out to be a very efficient way of auto generating classes that can then be linked to content in a SWF), but there is an updated version at the bottom that allows for fonts to be exported as well other movie clips. Its very similar to writing the classes in the Flash IDE, linking them to their representative MovieClips then exporting that swf and making use of the classes. Except here the classes are auto generated and exist in the flex project rather than in an FLA project. It isn’t completely necessary to have the command installed, but having it saves you a ton of time.

Here is the link to the source of the project if you want to use it to follow along. Here is a link to the finished work, which consists of two text fields being animated to show that the fonts are embedded.

So to start, create a flex builder ActionScript 3 project. create packages for fonts and swfassets, in the project above I create a com folder and place the view folder in it, then I place the fontassets and swfassets folders under the view folder. Now create another fontassets folder on the same level as the com folder, and create an empty fla in that folder:

Once you’ve created the FLA, open it and add fonts to the library (right click on the library and select new Font). I used Futura and Minion Pro. You must make sure the name that you name the font is the exact name of the font (case and space sensitive).

Now we need to set the font to export for Actionscript by linking it to a class. Right click on the font and select linkage. You can name the class whatever you want, its the package thats the important part. Make sure that the package exactly resembles the package that you have it stored in Flex. You’ll get a warning from Actionscript that no definition can be found for the class. We don’t give a rats what Flash thinks though, because we’re about to auto generate our own class! In my case the package name com.view.fonts:

Now we need to actually create the class that will represent our font in our Flex Builder project. To do that its time to activate that command I told you about a bit earlier. Go to window => other panels => create classes. That should open a window up for you. Now change the directory to project directory so that it points to the directory that contains the com directory. This means it will export the classes it sees and place them in the com=>view=>fonts directory. So set your directory and click on the create classes:

Now you should see these classes auto generated in Flex Builder in the fonts folder. The comment at the top will mention its been auto generated as well. Now all you need to do is add a public static constant to the top of the file that represents the Name of the font, which you’ll use when you set text fields to use the font. Here is the Futura class file. Now the swf that contains the fonts must be imported before they can be used. ApplicationDomain is important in this context, so you must set it to currentDomain so that the fonts will be registered and visible across the project.

Once they’ve been loaded, you need to register them:

Once you’ve done that, you can use them in subsequent text fields you create! Here is the class in the project that actually instantiates and uses the text field.

You’ll notice I also do basically the same procedure with a MovieClip class that I create in an FLA and then overwrite. It works essentially the same way with some quirks (that I’ll probably write about at a later date). In that class I have several sub clips on the stage, which I then place the text fields in. This is necessary for this method to work, as the text fields must be dynamically created. Lots of coders let the designers create the actual dynamic text fields (this whole process is obviously irrelevant for static fields). More often than not I end up encasing those text fields in sub movie clips anyways so that they can be tweened and animated according to the designer’s needs. Since the text field itself is dynamic it has to be linked in Actionscript, so the extra 8 or so lines of code it takes to do dynamically create it in Actionscript is worth it.

So there you have it, you’re just a little more separated from those designers than you were before! And you don’t have to use their shitty Flash IDE to write your code in either.