Adding fonts to your SWF with FAMES

Carlos Rovira, author of the excellent Towards Open Source Flash Development, posted a question today on the MTASC mailing list: "Today a collegue asked me how to rotate some text using only OS tools. To rotate text he must embed the font and to do this he must use the Flash IDE... so I responded that he must use Flash IDE to do this task . . . Do you know some alternative method to insert fonts without the need of Flash IDE?"

Yessir, FAMES to the rescue!

Although my previous post on FAMES didn't make use of it, Swfmill allows you to add fonts to your SWF's library. You do this using the FONT tag in the simple dialect of SWFML. Here's an example:

1. Create a new project in Eclipse, call it Swfmill Font Test.

2. Create your SWFML file, FontTest.xml:

XML:

<?xml version="1.0" encoding="iso-8859-1"?>


<movie width="200" height="70" framerate="30">


	<background color="#ffffff"/>


	<frame>


		<font 	


			id="kharon" 


			import="library/kharon.ttf"


			glyphs="Helo,Wrd!"


		/>


	</frame>


</movie> 

Note how you can specify only the glyphs you want to use to be embedded.

3. Compile your skeleton swf from the command line, using:

swfmill simple FontTest.xml FontTest.swf

4. Create a new ActionScript file called FontTest.as:

ActionScript:

class FontTest extends MovieClip


{


	var tfMessage:TextField;


	


	var sW:Number = null; 	// Stage width


	var sH:Number = null;	// Stage height 	


		


	private function FontTest ( target )


	{	


		// Assimilate the target


		target.__proto__ = this.__proto__;


		target.__constructor__ = FontTest;


		this = target;		


 


		Flashout.log ("Application initialized: " + this );


		


		// Store stage dimensions for easy look-up


		sW = Stage.width - 1;


		sH = Stage.height - 1;


		


		// Draw border around the stage


		lineStyle ( 1, 0x000000 );


		moveTo ( 0, 0 );


		lineTo ( sW, 0 );


		lineTo ( sW, sH );


		lineTo ( 0, sH );


		lineTo ( 0, 0 );


		


		//


		// Create message


		//


		var CORRECTION_FACTOR = 1.40; 	// getTextExtent workaround


		


		var messageTextFormat = new TextFormat();


		messageTextFormat.size = 8;


		messageTextFormat.font = "kharon";


		


		var messageText:String = "Hello, World!";


		


		var messageTextExtent:Object = messageTextFormat.getTextExtent ( messageText );


		var messageWidth:Number = messageTextExtent.textFieldWidth * CORRECTION_FACTOR;


		var messageHeight:Number = messageTextExtent.textFieldHeight * CORRECTION_FACTOR;


		var messageX = sW / 2 - messageWidth / 2;


		var messageY = sH / 2 - messageHeight / 2;


		


		createTextField( "tfMessage", 10000, messageX, messageY, messageWidth, messageHeight );


	


		// Write message text


		tfMessage.embedFonts = true;


		tfMessage.text = messageText;


		// tfMessage.border = true; // used to debug getTextExtent


		tfMessage.setTextFormat ( messageTextFormat );


		


	}


	


	static function main ()


	{


		// Create a FontTest instance and 


		// have is assimilate _root.


		var test:FontTest = new FontTest( _root );


	}


} 

Note how we specify the font name ("kharon") based on the id in our SWFML file. Also note that I had to massage the results getTextExtent() was giving me (if you turn the textfield's border on remove the correction, you'll see why.)

5. Create your Flashout file, FontTest.flashout and set your SWF and root class.

6. Compile to run! You should see the SWF below, using the Kharon4a pixel font by orgdot.

Note: I noticed that Flashout doesn't display the resulting SWF correctly. See snapshow below:

Download the example files (22kb)

[Update] George (from Square Circle) just emailed me to let me know that the text field doesn't completely display on a Mac. Oh gotta love getTextExtent() Just alter the CORRECTION_FACTOR constant (raise it) if you get the same issue.

I tried using getTextExtent2() but that didn't work. Actually, mx.core.ext.UIObjectExtensions wouldn't run under MTASC. It gave an annoying Local variable redefinition error due to the way the class is coded. That's one compiler error I'm not too fond of (and usually I just love the critters) as it's very convenient to use local vars like i, etc. all over the place and I actually *do* want to think of them as different variables each time I use them.)

The Adding fonts to your SWF with FAMES article by Aral Balkan, unless otherwise expressly stated, is licensed under a Creative Commons Attribution-Noncommercial 2.0 UK: England License.

9 Comments

1. 
   Carlos Rovira
   1

   Thanks Aral for your tutorials, I must give a try to SWFML : )

   About “getTextExtent2″, we could copy the behaviour of this v2 method. Keith Peters wrote in his blog about what’s going on behind the scenes:

   http://www.bit-101.com/blog/archives/000060.html

   It seems like we’re really going totaly OS!

   

   May 26th, 2005 at 11:28 am
   
   
2. 
   Aral Balkan
   2

   Hey Carlos — hey, anytime — your article got me (and quite a few others started on all this).

   I did try copying getTextExtent2 method but that produced incorrect results here too.

   I had a post on this with another workaround a long time ago on onRelease (which I should go through one of these days and at least copy important posts from to here.) You can still see it on the mobile page (which I apparently forgot to take down) here.

   May 26th, 2005 at 11:44 am
   
   
3. 
   Kim Hansen
   3

   Great article Aral!

   Thanks for sharing and for paving the road for Flash OS! I was needing a good way to add fonts, images etc. to projects compiled with MTASC and with Swfmill it seems we are getting there.

   I will now (finally) see if I can compile one of my bigger RIA’s with MTASC from within Eclipse.

   Maybe all my development from now on can be done from within Eclipse! Cool!

   May 28th, 2005 at 3:02 pm
   
   
4. 
   gabon
   4

   cool! this time fames definitively worked! I’m still looking to make the particle one works.

   Thanks, chr

   June 2nd, 2005 at 12:50 am
   
   
5. 
   Thierry Chen
   5

   Hi

   Thanks for this article but I can’t make it work. I get no text in the rectangle.

   I don’t see were you make the link between the font generated with SWFMILL whitch ouputs a FontTest.swf and the ACTIONSCRIPT file that produces also a file called FonTest.swf. The 2 files erase each others.

   June 6th, 2006 at 7:01 pm
   
   
6. 
   Thierry Chen
   6

   Ok guys I found the pb:

   With eclipse you must set the option -keep in MTASC tags

   June 6th, 2006 at 7:39 pm
   
   
7. 
   Jan
   7

   hey great tutorial!

   but now i’m wondering how i can get all upper- and lowercase glyphs, without typing them all down. is there any kind of a shortcut?

   October 3rd, 2006 at 11:00 pm
   
   
8. 
   Steve
   8

   This is very useful. Thanks.

   I ran into some trouble getting text to display and found out that, at least with the versions of mtasc and swfmill that I am using (1.12 and 0.2.11), the and tags should be wrapped with and tags. In case anybody runs into similar problems, that may be worth trying.

   November 19th, 2006 at 7:25 am
   
   
9. 
   Steve
   9

   That should say the frame tags need to be wrapped by library tags.

   November 19th, 2006 at 7:27 am