25 May 2005

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:
    

  1. 

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

    2. 

  2. 

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

    3. 

  3. 

    	<background color="#ffffff"/>
    

    4. 

  4. 

    	<frame>
    

    5. 

  5. 

    		<font 	
    

    6. 

  6. 

    			id="kharon" 
    

    7. 

  7. 

    			import="library/kharon.ttf"
    

    8. 

  8. 

    			glyphs="Helo,Wrd!"
    

    9. 

  9. 

    		/>
    

    10. 

  10. 

    	</frame>
    

    11. 

  11. 

    </movie> 
    

    12.

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:
    

  1. 

    class FontTest extends MovieClip
    

    2. 

  2. 

    {
    

    3. 

  3. 

    	var tfMessage:TextField;
    

    4. 

  4. 

    	
    

    5. 

  5. 

    	var sW:Number = null; 	// Stage width
    

    6. 

  6. 

    	var sH:Number = null;	// Stage height 	
    

    7. 

  7. 

    		
    

    8. 

  8. 

    	private function FontTest ( target )
    

    9. 

  9. 

    	{	
    

    10. 

  10. 

    		// Assimilate the target
    

    11. 

  11. 

    		target.__proto__ = this.__proto__;
    

    12. 

  12. 

    		target.__constructor__ = FontTest;
    

    13. 

  13. 

    		this = target;		
    

    14. 

  14. 

     
    

    15. 

  15. 

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

    16. 

  16. 

    		
    

    17. 

  17. 

    		// Store stage dimensions for easy look-up
    

    18. 

  18. 

    		sW = Stage.width - 1;
    

    19. 

  19. 

    		sH = Stage.height - 1;
    

    20. 

  20. 

    		
    

    21. 

  21. 

    		// Draw border around the stage
    

    22. 

  22. 

    		lineStyle ( 1, 0x000000 );
    

    23. 

  23. 

    		moveTo ( 0, 0 );
    

    24. 

  24. 

    		lineTo ( sW, 0 );
    

    25. 

  25. 

    		lineTo ( sW, sH );
    

    26. 

  26. 

    		lineTo ( 0, sH );
    

    27. 

  27. 

    		lineTo ( 0, 0 );
    

    28. 

  28. 

    		
    

    29. 

  29. 

    		//
    

    30. 

  30. 

    		// Create message
    

    31. 

  31. 

    		//
    

    32. 

  32. 

    		var CORRECTION_FACTOR = 1.40; 	// getTextExtent workaround
    

    33. 

  33. 

    		
    

    34. 

  34. 

    		var messageTextFormat = new TextFormat();
    

    35. 

  35. 

    		messageTextFormat.size = 8;
    

    36. 

  36. 

    		messageTextFormat.font = "kharon";
    

    37. 

  37. 

    		
    

    38. 

  38. 

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

    39. 

  39. 

    		
    

    40. 

  40. 

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

    41. 

  41. 

    		var messageWidth:Number = messageTextExtent.textFieldWidth * CORRECTION_FACTOR;
    

    42. 

  42. 

    		var messageHeight:Number = messageTextExtent.textFieldHeight * CORRECTION_FACTOR;
    

    43. 

  43. 

    		var messageX = sW / 2 - messageWidth / 2;
    

    44. 

  44. 

    		var messageY = sH / 2 - messageHeight / 2;
    

    45. 

  45. 

    		
    

    46. 

  46. 

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

    47. 

  47. 

    	
    

    48. 

  48. 

    		// Write message text
    

    49. 

  49. 

    		tfMessage.embedFonts = true;
    

    50. 

  50. 

    		tfMessage.text = messageText;
    

    51. 

  51. 

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

    52. 

  52. 

    		tfMessage.setTextFormat ( messageTextFormat );
    

    53. 

  53. 

    		
    

    54. 

  54. 

    	}
    

    55. 

  55. 

    	
    

    56. 

  56. 

    	static function main ()
    

    57. 

  57. 

    	{
    

    58. 

  58. 

    		// Create a FontTest instance and 
    

    59. 

  59. 

    		// have is assimilate _root.
    

    60. 

  60. 

    		var test:FontTest = new FontTest( _root );
    

    61. 

  61. 

    	}
    

    62. 

  62. 

    } 
    

    63.

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:

Flashout render bug

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.)

Creative Commons LicenseThe 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.

Add Your Comment

Spam Protection by WP-SpamFree

Adding fonts to your SWF with FAMES

11 Comments »

  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!

    :)

    Carlos Rovira

  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.

    Aral Balkan

  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!

    Kim Hansen

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

    Thanks, chr

    gabon

  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.

    Thierry Chen

  6. Ok guys I found the pb:

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

    Thierry Chen

  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?

    Jan

  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.

    Steve

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

    Steve

  10. Hi,
    I cant finish this exercise, i cant download and install the flash out and don understand the 5th point explained by you.. can u explain the flashout concept and give more detail about the 5th point.

    Thanks,
    Jeyachandran

    jeyachandran

  11. we feel so glad to have you visit our website, we here mainly introsuce our leading productugg boots

    ugg boots