shared font library, programatic textfields, and css

Posted by eric | Filed under Lab Work, Programming

recently, i was tasked to do a gallery of images with captions. A few cavates to the request:

  1. we must use a shared library.
  2. we can not embed fonts to the working fla
  3. captions must be html enabled

…and so begins the dissection of Flash and Fonts

I was remoting the objects so didn’t have to think about xml, and getting all the data silky smooth. The problem i was encountering was the captions box. Essentially, in my class, i had a generic method that would allow me to create a textfield, and apply all the necessary properties in one command. The method looked like this:

private function makeTextField():TextField
{
var tf:TextField = new TextField();
with(tf)
{
width = 210;
autoSize = 'left';
wordWrap = true;
styleSheet = AssetLoader.instance.css; //SINGLETON from earlier, holding my stylesheet, xml, and few other things
embedFonts = true;
antiAliasType = AntiAliasType.ADVANCED;
}return tf;
}
//later in my code
textfieldintance.htmlText = myHTMLText; //html formated text

fine and dandy, however, on compile i was getting a blank. Going back, i removed the embedFonts to make sure i was populating well, and sure enough, i was. So begins the debugging. I found that if embeded a text field with the font on the stage, things looked good. However, this was not an option as i need to use a shared library. Enter fix in a nut shell

  1. in the shared lib, give class names to the fonts…make them simple . We were using the Futura font, so i called it Sans
  2. place and instance on stage of your font, emebeded
  3. compile
  4. import in your working fla
  5. ApplicationDomain is your friend (see new method below)
  6. Font.registerFont(fontCLASSName) is your other friend (again, see below)
private function makeTextField():TextField
{
var fontLibrary = AssetLoader.instance.getAssetById("fontLibrary");//font library swf imported earlier
var ThisFont:Class = fontLibrary.contentLoaderInfo.applicationDomain.getDefinition('Sans') as Class; //ApplicationDomain to get the CLASS NAME (font was Futura, but class was Sans...remember?
var ThisFontBold:Class = fontLibrary.contentLoaderInfo.applicationDomain.getDefinition('SansBold') as Class;//the bold version
Font.registerFont(ThisFont);
Font.registerFont(ThisFontBold);
var font:Font = new ThisFont();
var fontbold:Font = new ThisFontBold();//this instance is only needed because i wanted to trace the note below for future debuggin
trace(font.fontName+" & "+fontbold.fontName+" is the font from the Font Library and SHOULD BE the font name in the stylesheet -\r DOUBLE CHECK THIS if you are not seeing text displayed")
var tf:TextField = new TextField();
with(tf)
{
width = 210;
autoSize = 'left';
wordWrap = true;
styleSheet = AssetLoader.instance.css;
embedFonts = true;
antiAliasType = AntiAliasType.ADVANCED;
}
return tf;
}

one thing to note about this, is the trace i put in there. I did this so i could get the font name as FLASH SEES IT. This was key becuase it is the same name you need to use in the stylesheet:

.orangeTitle
{
font-family: Futura Bold Condensed;
font-size: 20;
font-weight: bold;
color:#FFB83D;
}
p
{
font-family: Futura Medium;
color:#000000;
font-size:11;
}

Flash sees the font as Futura Medium when compiled, but when creating the font library, in the paragraph panel, it simple read Futura. Without knowing the fontName in “FlashSpeak”, you will be hitting you head on the wall….good luck- i will try to post a sample source later.

Tags: , , , , ,

Permalink | September 3rd, 2009

Leave a Reply