Flash CS4 TextField: embedded fonts
Embedding a font in AS3 in Flash CS4 seems more challenging than at a first glance.
Flash had problems with fonts and texts for a very long time, but the new editor adds up problems rather then removing them.
Soo, here is what should always work when creating a textfield dynamically:
Firstly, embed the font you want to apply for your textfield inside the editor: in the library, right-click, select New Font…
Set a name for the font (you can leave it as it is), choose the font you want from the Drop down, select a style (if any is available), if not you can check the appropriate Faux box..
The size property has effect only if you select the Bitmap option: this option specifies that the font will be embed as bitmap rather then vector
Since we’ll use this font in code, we must set a Linkage for it: check Export for actionscript, leave checked Export in frame 1, and in the Class field set a name you want: let’s say MyFont, leave the base class to be Font and click ok
A warning popup should appear saying that there’s no class MyFont found in the classpath and Flash will create one for us: that’s ok, that’s exactly what we want
Soo, the class MyFont will be created by Flash and it will have the base class Font.
ok.
Now we can create the textfield in code
You can write the code on the first frame or on a separate file inside a class.
I’ll just create a new class that extends MovieClip and set this class as the document class for my swf
import flash.display.MovieClip;
import flash.utils.getDefinitionByName;
import flash.text.TextFieldAutoSize;
import flash.text.TextField;
import flash.text.TextFormat;
import flash.text.Font;
public class Main extends MovieClip {
public function Main() {
super();
this.createTextField();
}
private function createTextField() : void {
// create the textField object
var text : TextField = new TextField();
// optionally set a name for the textfield, so we can refer to it, if we need to, later
text.name = "text";
// set the autosize option to "left"; using constants is more error proof
text.autoSize = TextFieldAutoSize.LEFT;
// set the the multiline property to be true; so we can have multiple lines in it
text.multiline = true;
// true so that line wrap at words end (at white characters)
text.wordWrap = true;
// the key to whether the font will be embedded (true) or not (false) in the swf
text.embedFonts = true;
// set size and positions of the text field
text.width = 200;
text.height = 150;
text.x = text.y = 100;
// we get a reference to the definition of the MyFont class (the class of our font created in the library)
// we could have just used 'MyFont' directly, but some editors, like FDT, complain about it, saying that the specified definition does not exist, and if we have errors, the editor will not give us code completion... corectly; the point is we can do without it
var MyFontClass : Class = getDefinitionByName("MyFont") as Class;
// create an instance of our font class
var myFont : Font = new MyFontClass() as Font;
// in order to specify what font we'll use for our textfield, we need a textformat object
var textFormat : TextFormat = new TextFormat();
// set it's font property (String) to the name of our font
// you might notice that we could have passed in the name of the font directly, hard coded; and it would have worked; but it's safer this way; fonts may have different names on different OSs, so when compiling the fla on a different OS, the font might not be found, thus the text will not be displayed; although you might argue that the font is there; also it's easier to change the font; only change it in library and recompile
textFormat.font = myFont.fontName;
// set font size
textFormat.size = 16;
// set font color
textFormat.color = 0xff0000;
// apply the text format to the text; this only works if you're not using the stylesheet property of the textfield
// also, using defaultTextFormat property instead using setTextFormat method seems to work better; i couldn't find a reason for that, all i can think of, is that when setting the defaultTextFormat property, it takes only the values that are NOT NULL from the text format, and when using setTextFormat method, it sets all the values even if they are NULL; anyway, not even the old way, a combination of getTextFormat, setting the values needed, and setTextFormat, doesn't work anymore
text.defaultTextFormat = textFormat;
// set some text to see our text field; htmlText also works
text.text = "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.";
// Add the text field in the display list of our document
this.addChild(text);
}
}
}
Where your fla is situaded on the file system (in the classpath) create a folder named ‘textfield’, inside this folder create a new file ‘Main.as’ and paste in the code above;
In your fla, set the Class property of the document to “textfield.Main”.
Compile and run the app, you should see the text in red.
If the text doesn’t appear, it means that the font is not embedded properly
Notice that i didn’t set the antiAliasType Property of the text field to be “advanced”, that’s because i noticed on some fonts, setting this property breaks the embedding mecanism, the text won’t show, the font will not be embedded.
however on most of the fonts it works, so you should try and see the result first.
You should keep in mind however, if the text doesn’t show, try not setting the property and see if it works without it.
You can check if your font is embedded: use the static method enumerateFonts of the Font class, which returns an Array of fonts: all the fonts installed on the system or only the fonts embedded in the swf, depending on the value of the enumerateDeviceFonts parameter
Here is the declaration of the method
if
is
, then it will return the list of all the fonts installed on the local machine
if it’s false will return an Array of all embedded fonts in the current swf
Hope it helps anyone
