Using Flash CS5 to embed Fonts in SWC to use with Flex Hero and Flex Mobile Hero
All that I am about to show can be done in AS3 with Metadata to embed different fonts. But where Flash Professional CS5 comes in is that it has a nice UI for selecting font Unicode ranges to limit the number of glyphs you actually embed for the font, and that reduces file size.
The first thing to understand is that Flash Player has different font engines. With the different font engines there are different ways to embed fonts. In Flex 4 and more specifically in Hero this becomes very important to understand. By default with Flex 4 and Hero if you are creating Web/Desktop applications, MORE SPECIFICALLY, if you are using the Web/Desktop theme all components use TLF and thus use the CFF embedding format. The CFF embedding format is the newest and allows TLF to do its stuff. This is not compatible with non-TLF textfields (ie: TextField in an AS3 only project).
Next, Flex Hero also implements mobile components and a mobile theme. In the Flex Hero applications that use the mobile theme most of the components use non-TLF text parts.
NOTE: Label does not use a Flex skin so it will still use the TLF for its text part.
This means you have to handle both types of embedding fonts for your application, especially if you are going from web/desktop to mobile with Flex.
Like I mentioned above using Flash Professional CS5 gives you a nice UI to embed both types of fonts and limit the Unicode character range to keep the file size down. Here is a look at that UI:
Flash Professional CS5 Font Embedding UI
Flash Professional CS5 Font Embed Linkage UI
I’ll explain the steps of what I did to make this happen but first lets look at what I am talking about by showing a Flex app using both web/desktop them and mobile themes and also using the Flash CS5 SWC with the two embedded font types. Here is a picture of the example application as a web app and mobile app:
Flex Hero web/desktop vs mobile
First off the app is using a Marker Felt embedded font with a character range of only A-Z. What we are looking at is that Flex web/desktop uses CFF embedded fonts for TextInput and Label and falls back to characters not embedded in the unicode range. But on the mobile themed application you’ll see that the TLF label picks up the embedding of the CFF font and uses font fall back, a TLF enabled text field feature. But the TextInput that uses the older non-CFF embedded type font only shows the characters that where embedded. As well as the TLF TextInput shows no text as it was giving a CFF font but the TextInput mobile skin requires non-CFF typed font embedding.
NOTE: I am not sure why the the TLF shows lower cased a-z and not 1-9 when I only set A-Z on the Unicode range.
Well thats the real world state of things, but now back to the steps to get you to this point to build your applications with this in mind.
Flash Professional CS5 exporting SWC with both type of embedded Fonts
Create a new Flash .fla file, or grab the file from github, and then give it a name and save the file. I created a AS3 project but it probably wont matter much as we just want to export a SWC. Here are the rest of the steps:
- File -> Publish Settings, then check the “Export SWC” checkbox, click OK.
- In Library Panel, click the right top corner menu for New Font… (it brings up the Font Embedding UI shown above)
- Click on font you want, select Unicode Ranges, then click on ActionScript tab.
- Check the “Export for ActionScript” checkbox, it will default the Export in frame 1 and Base Class.
- Enter a Class name, name can be package name ie: com.renaun.fonts.MyMarkerFelt
- Select Outline format of either TLF (DF4) or Classic (DF3).
- Repeat to embed same font for each Outline format.
- Publish .fla file to create the SWC file.
Using in Flex projects (both web/desktop and mobile)
For each project type you will create the appropriate Flex project type. Then copy the CS generated SWC file and add it to the libs folder of the Flex project.
NOTE: The github source files provides two Flash Builder Burrito type projects for you look at: Flex Project and Flex Mobile Project (with blank template). They both use the same code.
The sample application looks like this:
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
creationComplete="getFonts()"
minWidth="955" minHeight="600">
<s:layout>
<s:VerticalLayout />
</s:layout>
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
#TLF s|TextInput, #TLF s|Label
{
font-family: "Marker Felt";
}
#nonTLF s|TextInput, #nonTLF s|Label
{
font-family: "Marker Felt Thin";
}
</fx:Style>
<fx:Script>
<![CDATA[
private function getFonts():void
{
out("getFonts");
var myFont1:Font = new MyMarkerFelt() as Font;
var myFont2:Font = new MyMarkerFeltNonTLF() as Font;
var fonts:Array = Font.enumerateFonts();
for each (var key:Font in fonts)
{
out(key.fontName + " - " + key.fontStyle + " - " + key.fontType);
}
}
private function out(msg:String):void
{
output.text += msg + "\n";
}
]]>
</fx:Script>
<s:VGroup id="TLF">
<s:TextInput text="TLF Here *1234* four chars" width="200" />
<s:Label text="TLF Here *1234* four chars" />
</s:VGroup>
<s:VGroup id="nonTLF">
<s:TextInput text="Non-TLF Here *1234* four chars" width="200" />
<s:Label text="Non-TLF Here *1234* four chars" />
</s:VGroup>
<s:VGroup>
<s:TextInput text="Default Here *1234* four chars" width="200" />
<s:Label text="Default Here *1234* four chars" />
</s:VGroup>
<s:TextArea id="output" width="100%" height="100%" editable="false" />
</s:Application>
The main step to make this work is in the getFonts() method. You have to create an instance of the Font class for the class to be register by the Font manager. The rest is pretty straightforward, as I just apply both types of the embedded font on TextInput and Label components with a device font version as a baseline.