Why embedding fonts to a dynamic TextField draws a blank!- Flex you suck

Filed under Lab Work, Programming | Tags:

I promised i would write about this because it had both me and my team baffled for over a day. First off, we were using Flex in the project- although the only differences are the UI prefix before TextField and MovieClip, essentially the outcome is/was the same. Everytime we added a dynamic new TextField to a class, we had to apply the same styleSheet and fonts. We embeded the fonts to an external SWF. The styleSheet was also external. For our readers how prefer bullets, here you go:

The Goal-

  • using a custom class, import a stylesheet, xml(for text) and a SWF filled with your embeded font(s)
  • Using the LoaderInfo class, extract your fonts by their CLASS name for later use
  • create a dynamic TextField (var tf:TextField), apply the stylesheet and ebedFonts attribute
  • apply the text
  • addChild(tf);
The Results-
  • an unexplainable empty text box
The Solution-
  • add your text box first to an empty MovieClip
  • do your text stuff in this oredr: new TextField (tf),tf.styleSheet= , tf.embedFonts=true, tf.htmlText=
  • add the mc to the stage
  • LAST- add your textfield to the mc (mc.addChild(tf))
ok- lets see it in action [remember, ours was a Flex project, hence the UI prefixes...but this seems to be the case all around]:


var mc_title:UIMovieClip= new UIMovieClip()
mc_title.mouseEnabled=false;
var tx_title:UITextField = new UITextField();
tx_title.styleSheet=css
tx_title.embedFonts=embedding
tx_title.htmlText = xml.title;
tx_title.x = 228;
tx_title.y = 75;
tx_title.width = 500;
mc_title.addChild(tx_title)
container.addChild(mc_title);

The unexplainable to me is the need for the movieclip. This was the baffler. If i added the textfield simply to the class, the whole thing broke. Perhaps this was a way the Flash developers thought is most secure for handling text…who knows (leave me a comment if you know!). But in the end, this hopefully will save someone a lot of time. So to reiterate the order:
The order of things-
  • create the empty mc as a shell
  • then your textfield
  • FIRST apply the stylesheet (and make sure you really have imported and equated it to the StyleSheet class!!!)
  • NEXT, embedFonts=true
  • now your htmlText
  • properties
  • add the mc to the class (or stage, or wherever)
  • FINALLY….add the textfield to the mc- this apparently must be last