FlexVN

When building complex and large application, you should take care of used memoy and size of module. This post will help you decrease size of module by using dynamic font.

In regular application,  you usually embeds font for text field in fla or mxml file. It is a cause the publish or compiled file(swf) will be large.  Such as with Arial font, the file of size will increase from 30kb to 80kb. If there are more than 1 font, the file of size will be increase more than 100kb. You do not like this. Here is the way.

The first in fla file or mxml file, the font family of textfield should be “_sanf” and no font is embeded or no style tag will be meet in mxml file.

The second, you will load compiled font. The compiled font will be swf file that using flex sdk or normally publish by flash using export action script code.

Assume that you have compiled font. Using Loader load this file and register this font. Then apply this font for all textfield that need this font family.

Because you use two way to compiled font, so we create interface for using in two way.

[sourcecode language='javascript']

package {
public interface IFont {
function get font():Class;
function get fontName():String;
function get fontClass():String;
}
}

[/sourcecode].
There are 3 function that compiled font must be implements:
The first is font() for flex sdk. When you embed font using tag Embed, the instance must be return by font method.
The second, the fontName method, is name of origional font, if you embed font you give his name: Arial, Verdana….
The third is fontClass. You create New Font in library in flash file and export it to actionscript class. The fontClass is name of class that you export.

The compiled font class must be implements this interface. Here is compiled font example that built by flex sdk:
[sourcecode language='javascript']
package {
import flash.display.Sprite;
public class Arial extends Sprite implements IFont {

[Embed(source="fonts/arial.ttf", fontName="Arial")]
protected static var embedClass:Class;

public function Arial() {

}

public function get font():Class {
return embedClass;
}

public function get fontName():String {
return “Arial”;
}

public function get fontClass():String {
return “Arial”;
}
}
}
[/sourcecode]
Build font using flex sdk by type the command in cmd: mxmlc Arial.as. Flex sdk will be compile it to Arial.swf file that hold your font.

If you do not have flex sdk, you have font and flash ide, you can create font by the way:
Create New Font in library and select font family and some property and export it to actionscript class, (in our exampe is FontClass).
Then write some code:
[sourcecode language='javascript']
package {

import flash.display.Sprite;

public class MyFont extends Sprite implements IFont {

protected var exportFont:FontClass;

public function MyFont() {
exportFont = new FontClass();
}

public function get font():Class {
return null;
}

public function get fontName():String {
return ‘Your Font Name Here’;
}

public function get fontClass():String {
return ‘FontClass’;
}
}
}
[/sourcecode]
Yes, after create compiled font, we shoul load it and register font. Here is code to register Font.
[sourcecode language='javascript']
var ldrContext:LoaderContext = new LoaderContext(false, ApplicationDomain.currentDomain);
var ldr:Loader = new Loader();
ldr.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);
ldr.load(new URLRequest(Arial.swf’), ldrContext);
[/sourcecode]
Waiting for loading completely:
[sourcecode language='javascript'] var iFont:IFont = (evt.currentTarget as LoaderInfo).content as IFont;
if (iFont.font) {
Font.registerFont(iFont.font);
} else {
var fontClass:Class = (evt.target as LoaderInfo).applicationDomain.getDefinition(iFont.fontClass) as Class;
Font.registerFont(fontClass);
}
[/sourcecode]
You can apply this font by:
[sourcecode language='javascript']
var format:TextFormat = new TextFormat();
format.font = iFont.fontName;
txt.embedFonts = true;
txt.setTextFormat(format);
[/sourcecode]

Get full source code here