In my last post I did explain how to use the EMBED method to use multiple fonts in just one text field. This method works a bit different, it uses a combination of embedded fonts and style sheets.
This is a quit simple technique to apply to any project. When you're creating new fonts in the library you need to give them there original name instead of using Font1, Font2 etc. It's really annoying for other developers when the fonts aren't named properly in the library. So give the fonts a proper name, it saves you and your colleagues a lot of time.
So first thing we are going tot do is create a font.fla. where we are going to put in all our font files.On the stage you are going to put text fields with all the fonts you want to use.
But before we're going to do that we are first going to put the fonts in to the library. See picture below.
You can add fonts to the library by clicking on the small triangle in the library panel. See picture on the right side. You now created a new font in your library.
Right click on the font in your library. You should see then the same panel as in the picture below. Select the font give it the same name as in the drop down and also include the style of the font. This is so you know witch font it is and witch style it has. After you did that, select all the characters you want to embed. You can include the characters you want by clicking on the check boxes under “Character ranges”.
In this properties panel go to the “actionscript” tab. Check “Export for runtime sharing” and give as URL the swf name of this asset. In my case that's fonts.swf. No compile this file if everything went ok you should have a swf file in the output folder of your fla.
The next step is very easy create a new fla file. I called my fla file fontTest.fla. So what you are going to do is copy the fonts from the font.fla library to this new fla file you just have created. Now create a text field as in the picture shown below.
In properties panel select the font from the library. A library font is always marked with a (*). Select the library font you want to use for that particular text field. Do one final check to see if the fonts are ready to be imported.
Go to your library and right click one the font, go to properties, select the “actionscript” tab and check if the check box “import for runtime sharing” is checked.
In order to use a different font in the same text field we have to use a style sheet in flash and point to this particular font. To make this work you need to have the internal font name, you can retrieve this by adding a text field tot the stage and set library font you want. After you did that you click on the menu item in the flash IDE “commands” and select the option “Copy Font Name for Actioscript”. Now you have the internal font name on the clipboard.
What I didn't mention was that you have to give the just placed text field on the stage a instance name. I named my text field “tf”.
So now create a new class named MainIDE.as place this class in the same folder as your fla file and add the following code:
MainIDE.as
package
{
import flash.display.MovieClip;
import flash.text.AntiAliasType;
import flash.text.StyleSheet;
import flash.text.TextField;
import flash.text.TextFieldAutoSize;
/**
* @author iason.vandermeulen
*/
public class MainIDE extends MovieClip
{
public var tf : TextField;
private var _css : StyleSheet;
public function MainIDE()
{
this._css = new StyleSheet();
this._css.parseCSS("strong{color:#000000; font-family:Univers LT Std 57 Cn; fontSize:14; leading:0px; display:inline;}");
this.tf.styleSheet = this._css;
this.tf.embedFonts = true;
this.tf.antiAliasType = AntiAliasType.ADVANCED;
this.tf.autoSize = TextFieldAutoSize.LEFT;
this.tf.htmlText = "<strong>Just a test</strong> for a test example.";
}
}
}
{
import flash.display.MovieClip;
import flash.text.AntiAliasType;
import flash.text.StyleSheet;
import flash.text.TextField;
import flash.text.TextFieldAutoSize;
/**
* @author iason.vandermeulen
*/
public class MainIDE extends MovieClip
{
public var tf : TextField;
private var _css : StyleSheet;
public function MainIDE()
{
this._css = new StyleSheet();
this._css.parseCSS("strong{color:#000000; font-family:Univers LT Std 57 Cn; fontSize:14; leading:0px; display:inline;}");
this.tf.styleSheet = this._css;
this.tf.embedFonts = true;
this.tf.antiAliasType = AntiAliasType.ADVANCED;
this.tf.autoSize = TextFieldAutoSize.LEFT;
this.tf.htmlText = "<strong>Just a test</strong> for a test example.";
}
}
}
Now look at the line where the css style is defined and where the font name is bold. There where it is bold you will paste your just copied internal font name. Now it's going to use this particular font where ever it finds a <strong> html tag in the text.
In order to compile this example you need to a sign the MainIDE.as file in the document root of your fla file. If you don't know how to do that, search on google!
See the result in the image below after compiling
In order to compile this example you need to a sign the MainIDE.as file in the document root of your fla file. If you don't know how to do that, search on google!
See the result in the image below after compiling
