uiFonts

Required: Aspire UI Components Standard Edition

The uiFonts manager implements the use of embedded fonts loaded into the application via external SWF files during run-time.

The use of this manager makes it possible to use embedded fonts without compiling/embedding them into the application SWF. Instead, each individual font exists in its own external SWF file which can be loaded into the application during run-time.

uiFonts is a singleton class. To access the singleton instance, use uiFonts.manager.

Loading Font SWFs Automatically

Your application can be set up to load external Font SWFs automatically by calling the following line of code:

uiFonts.manager.load(); // ** call load() method without passing any parameter **

The list of Font SWFs to load is specified in “text.css” (this is the same CSS file containing text styles used in your application, stored in the theme folder which by default is “assets/skins/default/”). The loading directive is declared in the CSS as follows:

@load
{
    fonts:Tahoma;
}

The above would tell the uiFonts manager to load “Tahoma.swf” into your application when the CSS is parsed.

@load
{
    fonts:Arial,Comic Sans MS,Verdana;
}

The above would load “Arial.swf”, “Comic_Sans_MS.swf” and “Verdana.swf”.

The Font SWFs must be stored in the “assets/fonts/” folder. This path can be changed via the uiFonts.manager.path property:

uiFonts.manager.path = "someotherpath/"; // ** must end with trailing slash **

NOTE: The automatic loading of the Font SWFs is initiated after the uiTextStyles manager is initialized (completes loading and parsing “text.css”).

Loading Font SWFs Manually

A Font SWF can also be loaded in an ad-hoc basis by calling the load() method at the desired time in your application, passing in the name of the font as the parameter.

uiFonts.manager.load("Tahoma"); // ** load "Tahoma.swf" **

To load multiple fonts, you can either call the load() method multiple times, or simply specify a comma-delimited list of the fonts to load:

uiFonts.manager.load("Tahoma,Comic Sans MS,Verdana"); // ** load "Tahoma.swf", "Comic_Sans_MS.swf" and "Verdana.swf" **

NOTE: The uiFonts manager will load each font only once.

Automatic Invalidation

Once a Font SWF is loaded, the uiTextStyles manager is notified and any affected text style(s) will be invalidated, and existing uiText instances on the display list that are affected will be redrawn.

Font SWFs should be stored in the folder “assets/fonts/”. Each Font SWF contains one font and should be named after that font.

IMPORTANT NOTE: Before compiling fonts into SWF files, read the font EULA to see if permission to do so has been granted. If in doubt, contact the font vendor for advice before proceeding.

Creating a Font SWF

To create a Font SWF, follow the steps below:

• Create a new Flash File (FLA Document).

• In the empty document, bring up the Library (CTRL-L), bring up the pop-up menu and select New Font….

• In the Font Symbol Properties dialog, set the properties accordingly:

• Create three more Font Symbols for BOLD, BOLD_ITALIC and ITALIC versions of the font.

• For each of the Font Symbols, make sure they are exported:

• In the Linkage Properties dialog, set the Class accordingly and ensure that the Export for ActionScript and Export in first frame options are checked:

• The Class for the regular, bold, bold italic and italic versions of the font should be FONTNAME, FONTNAME_BOLD, FONTNAME_BOLD_ITALIC and FONTNAME_ITALIC respectively, where FONTNAME is the actual name of the font¹⁾:

• Save the FLA document naming it after the actual name of the font. In the above example, the file would be named as “Verdana.fla”²⁾.

• Compile. The resulting “Verdana.swf” is the Font SWF. This asset should be stored in “assets/fonts”.

For more information on the members of the com.ghostwire.ui.managers.uiFonts class, please refer to the API Reference.