Dammit again, Adobe.
Where are the Convenience Functions?
As usual I will start out by bashing adobe for creating this pain in the ass. I don't know what happened at adobe labs but somewhere in the remake of Flash's text rendering engine for AS3 (which was an awesome improvement, no doubt), convenience functions were apparently forgotten completely and thus it takes like 15 lines of code to get 1 line of decent dynamic text going... and embedding fonts, well, that's just plain weird unless you're using the Flash IDE.
Oh well- here's a quick how-to for dynamically getting text on stage rotating with a nice font, in FlashDevelop.
.embedFonts = true or Text is Un-Fun and Ugly
Basically, to fade, rotate, or even just display nicely aliased text dynamically with the FlexSDK (I'm using Flash Develop + FlexSDK) you need to embed the font to compile with the SWF and assign it to a class name (see code comments below (this is my FlashDevelop / AS3 way of doing this) . Then, in your actionscript, you need to make sure that the textfield has the following pseudo-code equivalents:
- textfield's .embedFonts = true
- textfield's .antiAliasType = ADVANCED (see code below)
- your text format object needs to have .font set to the class name associated with your font.
- set textfield's text format object to format object with desired font after ANY change to the text in the textfield (will reset format on change of text string)
Other ways to load embedded fonts
There are other methods of going about this. One worth noting that has worked well for me before, is to create a SWF for each font and load / use them as text containers dynamically, setting the text on the text box placed on stage with the Flash IDE ( i.e. loadedFontMC.textBox.text = "look aliased text!"). This is a somewhat sloppy way to get flash to embed a font, but it's a cool way to support LOTS of fonts externally without compiling them into and bloating the SWF. This way, you don't have to preload them all just to run the app- plus using the Flash IDE is easy to choose the character sets from the Flash properties menu and do more with the mouse than with code...
However, I find that for most purposes you only need 1 or 2 nice embedded fonts to cover all content and titles. For that type of purpose, I prefer this dynamic style method as it is pure AS3 + actual font .ttf files, and has no other dependencies on external files. Wrap this up in a nice class for yourself so you can just pass a font name as a parameter and don't have to deal with this again. Maybe I'll post something like that soon... until then:
A Simple Demo Class Ready for FlashDevelop
You will, as usual, need the FlexSDK downloaded on your computer and attached to your project either by classpath, flexSDK settings in program settings, or by attaching .swc to your project library... take your pic.
Here's a full Main.as class that you can drop into a pure AS3 FlashDevelop project src/ directory and get your embedded font tested / working. Then, you can copy and paste the working code into your other projects. Follow the instructions in the comments for adding the actual font's .ttf file to your lib/ directory (could be any directory really as long as the path is correct in your embed tag).
** Please note that this will embed the whole font into your compiled SWF (all crazy characters included). To greatly reduce the size of the font added to the SWF, look into specifying the character set using the Embed tag and just embed the characters you need (like A-Z 0-1 and punctuation, not all the unnecessary German umlauts and whatnot).
"Embed Font and Rotate Test"
Main.as Source:
package
{
import flash.display.DisplayObject;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.TimerEvent;
import flash.text.AntiAliasType;
import flash.text.TextField;
import flash.text.TextFieldAutoSize;
import flash.text.TextFormat;
import flash.text.TextFormatAlign;
import flash.utils.Timer;
/**
* This is a simple font embedding test that rotates the text to show if embedding worked properly.
* start by creating a new flash develop project and replacing the contents of the Main.as file with this entire source code
* 1) Right click the "lib" folder in the project tab and then pick a font from your fonts folder.
* 2) Once the font file is added to the project view lib/ folder, right click the font and choose "Insert Into Document" to generate the basic Embed tag
* 3) add the fontFamily="FontClassName" to the embed tag properties and no semi colon at the end of the line so it will link to the next line
* 4) Add your class variable on the next line like... ((( public var FontClassName:Class; ))) with the same name as fontFamily
* 5) Use any textField.embedFonts and textFormat.font = FontClassName to set the font.
* 6) Rotation test below will demonstrate if it worked or not, non-embedded fonts will not rotate (will just disappear and not render until rotation is 0 again)
* @author One Giant Media
*/
public class Main extends Sprite
{
//[Embed(source = '../../..some_path_use_FD_AddToProject_RCmenu../FDproject/lib/FooFont.ttf', fontFamily="FooFont")]
[Embed(source='../lib/GOTHIC.TTF', fontFamily="FooFont")]
public var FooFont:Class;
private var _textField:TextField;
public function Main():void {
if (stage) init();
else addEventListener(Event.ADDED_TO_STAGE, init);
}
private function init(e:Event = null):void {
removeEventListener(Event.ADDED_TO_STAGE, init);
// entry point
// create text
_textField = createTestText("test some text here");
// rotation test
var rotateIt:Timer = new Timer(1 / 28);
rotateIt.addEventListener(TimerEvent.TIMER, rotateText);
rotateIt.start();
}
public function createTestText($text:String):TextField {
var t:TextField = new TextField();
t.antiAliasType = AntiAliasType.ADVANCED;
t.embedFonts = true;
t.autoSize = TextFieldAutoSize.LEFT;
t.text = $text;
t.x = stage.stageWidth / 2;
t.y = stage.stageHeight / 2;
var f:TextFormat = new TextFormat();
f.font = "FooFont";
f.align = TextFormatAlign.CENTER;
f.color = 0x333333;
f.size = 28;
t.setTextFormat(f);
return addChild(t) as TextField;
}
private function rotateText(e:TimerEvent = null):void {
_textField.rotation++;
}
}
}
Posted on
Wed, March 31, 2010
by Sean P
filed under