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
Nice work.
Hello!
Very Interesting post! Thank you for such interesting resource!
PS: Sorry for my bad english, I’v just started to learn this language
See you!
Your, Raiul Baztepo
thx for this, this is the only code that works for me,
i’ve also tried the Font.registerFont(”myFontClass”) without success.
I still have a font “PhontPhreak’s Handwriting” that don’t work, i haven’t figured out why …
If you figure out how to make that font work let us know through a comment, to help other users as well.
Thanks.
Thanks for that – would have spent hours trying to find solution. Crazy that embedding a font requires so many steps…
Best wishes
Tim
hi, y followed all the steps, but when i want to compile and run the swf, it sends the error 1037, i don´t know how to avoid this
oh! by the way, i’m a newbie is it obvious ?
thank you very much
The code on this post must be on a separate as file. Please follow the tutorial accordingly.
You cannot place that code on a frame, unless you remove some of the class information.
i don’t understand how exactly link the file ‘Main.as’ with the .fla in order to make it work
Hi,
You only need to set it as the class of you document (Document Class).
On the properties tab, displaying the properties of the stage, you shall find a text field saying Document Class. Write there the path to the Main.as file.
If Main.as is in the same directory as your fla file, write just Main, otherwise write entire folder structure.
Example: Main.as is in the pinosh folder, write: pinosh.Main
This should get you working.
Hi guys,
I had a similar problem but with the AS code inside the flash. I found a solution (i think there’s a bug in CS4 somewhere) : i had to set the exact same parameters (font name+size etc) to the dynamic text field on the scene and in the embeded font otherwise my text don’t show up. It’s the only way for me to have the same look on Mac+PC.
Hi,
Thank you for sharing this with us.
Hi,
I have used your code and it worked great only, when i switched off the font i embedded into flash, i could not see it anymore (i am using a font manager). what is the point of embedding a font if i cannot see it on machines where it is not installed…?
If you turned of your font in the system and the text disappeared in the flash file, it means that the font didn’t get embedded.
To see if your font is properly embedded use the enumerateFonts static function of the Font class. Pass false as the enumarateDeviceFonts parameter, so only the embedded fonts are returned.
Hope it helps.
Hello everyone, i found one strange situation with using dymanic textfields with embed fonts. I would use this text: …. ‘Design My Garage’ …. and if embedFonts is true, flash display single quotes with unwanted spaces before and after letters. Do you know how to fix this problem ?
Thanks for help!
That’s an interesting problem which I never had, or heard of.
That’s something that’s worth investigating.
I’ll let you all know if I find anything.
Thank you!
After spending literally months reading posts for solutions on font embedding, your solution is simply “eloquent”! Thanks for the hard work and being willing to share your code.
I have tried to apply the example above to a label but I can’t seem to get it to work. Everything compiles but the font sytle is not applied. Am I doing something wrong here:
var MyFontClass : Class = getDefinitionByName(”LibFontArialBold”) as Class;
var LibFontArialBold : Font = new MyFontClass() as Font;
myTf=new TextFormat();
myTf.font = LibFontArialBold.fontName;
myTf.size=20;
myTf.color=0xFF0000;
label1=new Label();
label1.setStyle(”myTf”,myTf);