Month: May 2010

How to embed fonts using actionscript 3

This was causing my to bang my head for a little while. There are different ways depending on  whether you are using Flash or Flash Builder (previously Flex Builder). If you are using Flash you can go here for a good example/tutorial: http://www.adobe.com/devnet/flash/quickstart/embedding_fonts/. Basically you add a font to the library by clicking the pop-up menu (in the upper-right corner of the Library panel), export it for actionscript and then give it a class name. After that your code looks something like this:

var myFont:Font = new Font1();
var myFormat:TextFormat = new TextFormat();
myFormat.font = myFont.fontName;

Embedding fonts in AS3 seems to be a big problem for many people out there especially if you are using Flash Builder/Flex Builder. I know it was driving me crazy! I was following the examples, but still seemed to keep getting the same error: “An Embed variable must not have an existing value.”. Okay maybe it’s just me but that one was a little cryptic. Finally after a long time, but before having to do a Google search for straight jackets I figured out what I was missing. In all of the examples the embed line was right above a Class variable, but mine was not, so I added one and  cha ching it worked. Here is a sample:

[Embed(source="assets/MONACO.TTF", fontName="monaco",
mimeType="application/x-font-truetype")]
private var MonacoFontEmbed:Class;

It may just be me but this was not obvious I must confess. You don’t use that variable at least I didn’t, you simple set the .font property to the fontName value. It looks something like this:

myFormat.font = "monaco";

monaco is what I named it. You can name that whatever you want along with the variable. I named it MonacoFontEmbed, but you can name it whatever. I hoped this helped. If you have any questions feel free to post them. Embedding fonts is very useful especially if you are planning to manipulate a text field. Manipulations like rotation will just cause your text field to disappear if created dynamically and without embedding the font.

W3C Page Validation Issue

It’s good practice to always make sure that each page on your site validates to its proper doctype. Recently I noticed that some pages on a site I did that use to validate no longer did. It was giving me an error saying that it didn’t know how to decode Content-Encoding ‘none’. This was saying that I wasn’t declaring the encoding at the top of my page. The thing is I was. Here is what the problem was. I am using php and have an external php page that contains functions on it that are used by the page and I was including that page at the top of the document. The problem with this was that it was above the doctype declaration. All I had to do was move it down one line and that fixed it. I’m not sure if something has changed with the validation because it use to validate, but if you run into this problem just move it down one line. Here is an example:

Before:
<?php include_once(“my-file.php”);?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

After:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<?php include_once(“my-file.php”);?>

PS
I use a cool plugin for Firefox called Web Developerthat has a built-in tool that will validate your page straight from the W3C Validator. If you are not currently using this I suggest checking it out!