When we use a particular font for a textfield but the font is not installed on user’s system, the system looks for and displays the text in a similar installed font. To avoid this, we can embed fonts in our Flash file but doing so increases the size of the swf. It becomes particularly problematic when we use a large veriety of fonts in our appication.
However, Flash AS3 allows loading fonts during runtime, so we don’t have to load the embedded fonts when the application is launched. We can create different SWFs for different fonts and load them dynamically..
Example:
Let’s test for “Gravur-CondensedBoldExtra” font. 1. Create a .fla file.
2. Import the following actionscript file to it. 3. Get the path of the font, want to load
4. Execute the .fla file. |
DynamicFontLoad.as
|
package { import flash.display.Sprite; import flash.text.Font; import flash.text.TextFormat; import flash.text.TextField; import flash.net.URLLoader; import flash.net.URLRequest; import flash.events.Event; import flash.display.Loader; public class Main extends Sprite { private var fontToLoad:String; private var reqFontSize:Number = 15; private var txtFldHt:Number = 60; private var txtFldWt:Number = 250; // Stores the name of the font we want to use. This is the name of the font used in the loaded font swf private var reqFontName:String = "Gravur-CondensedBoldExtra"; // constructore // can dynamically pass curFontName and curFontSwfToLoad value to load any type of fonts dynamically at runtime but the fonttype needs to be imported in the swf public function Main(curFontName:String = "Gravur-CondensedBoldExtra", curFontSwfToLoad:String = "GravBoldExtra.swf"):void { var fontLoader:Loader; // this fontToLoad variable contains the path of the font swf you want to load. We can pass any font swf // to it to load any other type of font swf var fontToLoad:String = curFontSwfToLoad; var urlReq:URLRequest = new URLRequest(fontToLoad); fontLoader = new Loader(); fontLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onFontLoadComplete); fontLoader.load(urlReq); this.addChild(fontLoader); } private function onFontLoadComplete(evt:Event):void { // this set of code is to test the current fonts loaded and available in the swf // fonts array contains all the fonts imported in the loaded font swf var fonts:Array = Font.enumerateFonts(); var font:Font; for(var x:uint=0; x<fonts.length;x++) { font = fonts[x]; trace("name : "+font.fontName); trace("style : "+font.fontStyle); trace("type : "+font.fontType); } // ends here // setting the text style of the subtitle text field var myFormat:TextFormat = new TextFormat(); myFormat.size = reqFontSize; myFormat.font = reqFontName; // creating the textfield to show the font of text used var textMsg:TextField = new TextField(); textMsg.embedFonts = true; // mandatory while embeding fonts textMsg.defaultTextFormat = myFormat; textMsg.textColor = 0xFF0000; textMsg.wordWrap = true; textMsg.width = txtFldWt; textMsg.height = txtFldHt; this.addChild(textMsg); textMsg.text = "Dynamic loading of fonts."; } } }
Note : Here we need to check the path of the font .ttf file in the font swf and the font swf file in the main swf properly, else it will generate message “error in transcoding“. And while creating the font swf it will ask for Flex SDK Path upgrade, there we need to click on update library path as we are using a flex code [EmbedCode].