Runtime Fonts for Flash is a wonderful way when building apps, even better if you are as me and creating international apps for a lot of countries, you have the language supports and the problem with characters in fonts when staring to look at Greek, Japanese, Korea, Chinese and so on. I have a old Runtime font for CS3 that works pretty well. But when starting to use CS4 I wanted to improve the loading and sharing.
So the idea was to use Flex to compile Font SWF files, a big problem when I use Flash CS4 (fp9) and Flex 3. Flex will not recognize my font SWF file, it will also not recognize my local fonts to embed bold/italic font sets. Using an exported CS3 (fp9) file it works just fine.
Note; fp9 = Flash Player 9.
So lets look of how to do this.
First we need to create our font file.
1.) Create an Flex ActionScript project (I use framework 3.2)
2.) The Class name will be something that we will get later so I renamed my as file to FontHolder.as
3.) Remove the constructor and add the embed tags, example below. Note the unicodeRange tag, these are used to select characters to be embedded, remove to embed the entire font.
package {
import flash.display.Sprite;
public class FontHolder extends Sprite
{
[Embed(systemFont='Verdana', fontFamily='Verdana', mimeType='application/x-font', unicodeRange='U+0061-U+0074')]
public static const verdana_regular:Class;
[Embed(systemFont='Verdana', fontFamily='Verdana', mimeType='application/x-font', fontWeight='bold', unicodeRange='U+0061-U+0074')]
public static const verdana_bold:Class;
}
}4.) Now you have your font SWF file to use for the project.
So with your font file it’s time to use it in the project. In this example I use my Flex 3 as CS3 development tool., this is because I create Flash Player 9 project. You can of course use only Flash IDE or any other kind of code editor.
1.) Create a new ActionScript project, change the SDK to CS3.
2.) Click next, “Main source folder”, type “src”, this is just to put the files more pretty =), Click Finish.
3.) Create a CSS file that will control the fonts. “default.css”. Just add two classes that we can work with.
h1{
font-family: Verdana;
font-size: 24px;
font-weight: bold;
}
body{
font-family: Verdana;
font-size: 12px;
}5.) Download the FontManager.swc file and add it to your project.
Add SWC HowTo for Flex
6.1.) Create a folder called swc in project folder.
6.2.) Place the FontManager.swc file into the created folder.
6.3.) Right-Click on project folder and select properties
6.4.) In menu choose “ActionScript Build Path”, Choose the tab “Library path”
6.5.) Click on “Add SWC Folder”, Select the created swc folder and close the windows, all done.
Add SWC HowTo for Flash
7.1.) Create a folder called swc in project folder.
7.2.) Place the FontManager.swc file into the created folder.
7.3.) Open Flash and Publish Settings.
7.4.) Choose the Flash tab and click on Settings next to the script combobox.
7.5.) Choose the “Library Path” tab and add the swc file to the list, all done.
So, everything is there. How am I using it? Well, this is a dump on the project playground.
To be able to use the fonts they are needed first to be loaded. By default this is the structure for font swf and css file named default. They can be changed by FontManager.name = ‘default’ (the name) and the path with FontManager.path = ‘fonts/’.
The easiest way is to just get the singleton and load it.
var manager:FontManager=FontManager.instance();
manager.addEventListener(Event.COMPLETE, onManagerComplete);
manager.loadStandalone();
When it’s loading just send the textfield, style and text to the FontManager, you can add only textfield and text if you want to add e.g. multiple styles to one textfield.
Here’s some examples.
private function onManagerComplete(event:Event):void
{
var tf:TextField = new TextField();
tf.autoSize = TextFieldAutoSize.LEFT;
tf.border = true;
tf.rotation = 6;
FontManager.instance().register(tf, "h1", "abc");
this.addChild(tf);
var tf1:TextField = new TextField();
tf1.autoSize = TextFieldAutoSize.LEFT;
tf1.x = 150;
tf1.border = true;
tf1.rotation = 6;
FontManager.instance().register(tf1, "body", "abc");
this.addChild(tf1);
var tf2:TextField = new TextField();
tf2.autoSize = TextFieldAutoSize.LEFT;
tf2.x = 300;
tf2.border = true;
tf2.rotation = 6;
FontManager.instance().text(tf2, "<h1>abc</h1>\nabc");
this.addChild(tf2);
}
Flash, Flex
cs4, dynamic, Flash, Flex, font, runtime, sharing
