Working with ActionScript projects can offer some rather interesting challenges with some of the most basic parts of Flash development. Things like preloading your application and using linked MovieClips from a library, not to mention using embedded fonts in your TextFields. This really becomes interesting when you want to use more than one font in a single TextField. And sure you can embed font files right into the AS class, but that doesn't always work. I've had numerous issues with otf fonts.

The method that I have had the best success with is using the same technique as embedding symbols from Flash AS2 swfs. Here's a step-by-step on how to do this.

1) Create a new FLA and set to publish to Flash 9 / AS2.

2) Create a New Font in the Library.

3) Set the Linkage to export for ActionScript on the first frame.

4) Publish the swf to a directory within your project.

5) Set non-embeded files to not copy to bin

6) Associate a standard Embed meta tag with a property of the class.
7) Create a new StyleSheet.
8) Create a style with fontFamily set to the name of the embedded symbol.
8) Assign the StyleSheet

package {
    import flash.display.Sprite;
    import flash.text.AntiAliasType;
    import flash.text.StyleSheet;
    import flash.text.TextField;
    import flash.text.TextFieldAutoSize;
    
    [SWF(width="450", height="60", backgroundColor="#CCCCCC", frameRate="30")]
    public class EmbeddedFonts extends Sprite {
        private var _style:StyleSheet;
        private var _copy:TextField;
        
        [Embed(source="/embed/fonts.swf",symbol="Myriad Pro")]
        private var MyriadPro:Class;
        
        [Embed(source="/embed/fonts.swf",symbol="Myriad Pro Bold")]
        private var MyriadProBold:Class;
        
        public function EmbeddedFonts() {
            var main:Object = new Object();
            main.fontSize = 30;
            main.letterSpacing = 8;
            main.textAlign = "center";
            main.color = "#FFFFFF";
            main.fontFamily = "Myriad Pro";
            
            var main_bold:Object = new Object();
            main_bold.fontSize = 30;
            main_bold.letterSpacing = 8;
            main_bold.textAlign = "center";
            main_bold.color = "#000000";
            main_bold.fontFamily = "Myriad Pro Bold";
            
            _style = new StyleSheet();
            _style.setStyle(".main", main);
            _style.setStyle(".main_bold", main_bold);
            
            _copy = new TextField();
            addChild(_copy);
            _copy.autoSize = TextFieldAutoSize.LEFT;
            _copy.embedFonts = true;
            _copy.selectable = false;
            _copy.mouseWheelEnabled = false;
            _copy.styleSheet = _style;
            _copy.htmlText = "<span class='main'>I </span><span class='main_bold'>LIKE </span><span class='main'>MONKEYS!</span>";
            _copy.x = 450/2 - _copy.textWidth/2;
            _copy.y = 60/2 - _copy.height/2;
        }
    }
}

9) And voila.

This entry was posted on Thursday, May 15th, 2008 at 9:21 pm and is filed under code example, ActionScript 3, Flex. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.