Embedding Fonts Using ActionScript 3.0
Posted by Anthony in Flash, Tutorials tagged actionscript 3, Flash, fonts, text format
If you read my previous post on Embedding Fonts Using ActionScript 2.0, you’ll remember that I didn’t cover embedding fonts in ActionScript 3.0 in that post. So now, I’ll take you through the steps necessary to embed fonts in your ActionScript 3.0 files.
As we did when embedding in ActionScript 2.0, you’ll need to make a new Font item in your Library. Click on the Library menu, and select “New Font…”. Find your Font and Style from the dropdown menus in the dialog box, and give it a unique name. I generally give it a name that includes reference to both the Font and Style (in this example, I am using RockwellBold). Then, make sure the “Export for ActionScript” checkbox is checked under the Linkage section of the dialog box, which will auto-check the “Export in frame 1″ checkbox. Lastly, give your new Font a unique identifier in the “Class” field beneath the checkboxes. I like to make this Class the same as the Name I gave it above. Once all that is done, click OK.
(Note: You may get a dialog box that tells you, “A definition for this class could not be found in the classpath, so one will be automatically generated in the SWF file upon export.” This is fine. It’s just telling you that the Class you identified isn’t a built-in Flash Class. As long as you don’t need to access additional functionality beyond that of the Font class, you don’t have to worry.)
Next comes the ActionScript:
var rockwellBold:Font = new RockwellBold as Font;
var rockwellBoldTF:TextFormat = new TextFormat();
rockwellBoldTF.font = rockwellBold.fontName;
myText_txt.text = "Hello World!";
myText_txt.setTextFormat(rockwellBoldTF);
myText_txt.embedFonts = true;
myText_txt.antiAliasType = AntiAliasType.ADVANCED;
First, we create a new Font object, and assign it to our Font Class we created above (RockwellBold). Then, we create a new TextFormat, and give it the font attribute with the name of the Font object you just created, appended with fontName property. Then, set the text of your text field ("Hello World!"). After setting the text, use the setTextFormat attribute, and pass in the TextFormat variable you created in the first line. Next, set the embedFonts attribute to "true". Lastly, you can optionally set the antiAliasType attribute of your text to either ADVANCED or NORMAL. By anti-aliasing your text, you effectively smooth the edges of your font to avoid any distortion artifacts that may be introduced through screen display. According to Adobe's documentation, the ADVANCED setting is most useful for applications that have a lot of small text, and isn't recommended for font sizes above 48 pts. The NORMAL setting is most useful for applications that don't have a lot of text, and sets the anti-aliasing to the setting that was used in Flash Player 7. Once these steps are done, you're all set.
As with embedding fonts in AS 2.0, it's nothing too complicated. Until next time, happy coding!
Facebook
LinkedIn
Twitter
Along side your post, Anthony, if you are wanting to incorporate the embedded fonts along with dynamically created text, there’s a few other things to tack on. Create empty dynamic text fields on the stage. I usually place mine to the side of the stage. Embed the characters you want applied to these fields (i.e. special characters that may not register). Also, if you want to use bold or bold italic, those text fields have to be created separately. This also goes for creating the fonts in the library. As stated above with your steps of creating the fonts in your library and naming the uniquely as stated, that name will be used within the style sheet, wrapped in quotes:
Example:
/* text attributes */
p { color: #333333; font-family: “Gill Sans MT”; font-size: 14; line-height: 16; display: block }
Here’s a class I developed that I use to load style sheets and apply the text style to the newly created style sheet within another class.
package classes{
import flash.text.StyleSheet;
import flash.text.*;
import flash.events.*;
import flash.net.*;
/*********************************************/
/* class is responsible for loading the */
/* course stylesheet that holds all text, */
/* bullets, citations, copyright, fonts, and */
/* any other textual related styling */
/*********************************************/
public class LoadStyleSheet extends EventDispatcher {
/* variables needed to load the stylesheet */
static public var styleSheetCSS:StyleSheet;
private var cssLoader:URLLoader;
private var cssRequest:URLRequest;
/* constructor function */
public function LoadStyleSheet() {
}
public function loadStyleSheetItem(styleSheetLocation:String):void {
var cssLoader:URLLoader = new URLLoader();
cssLoader.addEventListener( Event.COMPLETE, handleLoadComplete, false, 0, true );
cssLoader.load(new URLRequest(styleSheetLocation));
}
public function handleLoadComplete(event:Event):void {
event.target.removeEventListener( Event.COMPLETE, handleLoadComplete, false );
if ( !styleSheetCSS )styleSheetCSS = new StyleSheet();
styleSheetCSS.parseCSS(event.target.data);
dispatchEvent(event);
}
public function grabStyleSheet():StyleSheet {
return styleSheetCSS;
}
/*********************************************/
/* this function can be reused at anytime to */
/* apply the css to a textArea or textField */
/* be sure to call the grabStyleSheet first */
/* before applying as it needs to be passed */
/* from the class that its being called from */
/*********************************************/
public function setTextStyle(whatTextField_txt:TextField, styleSheetCSS:StyleSheet):void {
/* set text propeties */
whatTextField_txt.styleSheet = styleSheetCSS;
whatTextField_txt.selectable = false;
whatTextField_txt.autoSize = TextFieldAutoSize.LEFT;
whatTextField_txt.condenseWhite = true;
whatTextField_txt.multiline = true;
whatTextField_txt.wordWrap = true;
whatTextField_txt.embedFonts = true;
whatTextField_txt.antiAliasType = “advanced”;
}
}
}