Using Runtime Shared Fonts

To use runtime shared fonts (rsf) we create as an example a library swf that stores our fonts that are used in the project. As the workflow with Flash CS4 and FlexBuilder is different there will be seperate descriptions:

Flash CS4

First we create a new Font Symbol and export the Font as a class:

tl_files/documentation/images/FontSymbol.png

Then we have to register the Font with the modular framework by writing in the ActionscriptPanel on frame 1:

import modular.core.assets.FontManager;

// register the font class name
FontManager.registerFont( ArialFont );

Pay attention that you include the modular.swc file as an external library in Flash CS4 as the following screenshot shows: File - Publish Settings... - Flash - Actionscript 3.0 Settings... - External Library Path

tl_files/documentation/images/AdvancedASSettings.png

Flex Builder

In FlexBuilder we create a new application class where we register the font that is included by the Embed tag. The following example shows such an application class:

package {
	import flash.display.Sprite;
	
	import modular.core.assets.FontManager;

	public class Fonts extends Sprite {
		
		[Embed(systemFont="Tahoma", fontName="TahomaItalic", fontStyle="italic", advancedAntiAliasing="true",mimeType="application/x-font")]
		private var TahomaItalic:Class;
		
		public function Fonts() {
			super();
			
			FontManager.registerFont( TahomaItalic );
		}
	}
}
Include the font swf

Now we have either by the FlexBuilder or the Flash CS4 IDE a new fonts.swf file that has to be loaded at runtime. So we do it as any other resources and include it in the boot.xml:

 

<?xml version="1.0" encoding="UTF-8"?>
<ModularApplication>
	
	<Page>
		<Assets>
			<Library path="swf/ProjectLibrary.swf" />
			
			<!-- include our new font swf file. -->
			<Library path="swf/Fonts.swf" />
		</Assets>
		<Modules>
			<Module class="modules.Image" url="imgs/logo.png" />
		</Modules>
	</Page>

</ModularApplication>

If you have setup debugging you will see as soon as the font swf file is loaded a modular message that says something like:

21:32:27 : loaded: [object LibraryAsset] from url: swf/Fonts.swf (modular)
21:32:27 : installed font: Fonts_TahomaItalic (modular)

That tells you that the font swf is successfully loaded and which fonts are installed. Here we have the font: Fonts_TahomaItalic installed that can be used now in the CSS style definitions.

Comments

*
*
Please add 6 and 5.*