Thursday, 11 March 2010

Embedding Font in CS3 Components (Avoiding Disappearing Button Labels)

When a CS3 Component (i.e. a Button) appears under a mask the text disappears.
To fix this we simply embed the font in the Component. Unfortunately, this isn't like embedding font in a normal programatically generated TextField instance.

How To Embed Font in CS3 Components
(I will use the Button component for this example.)

1.First, we must embed the font in the swf. There are 2 ways to do this:

◦If you wish, you may simply create a TextField off stage and embed the font in that TextField.

◦Or if you have taste, you will open the library and select “new Font” from the library panel menu. Now, create a font symbol in the library. I chose Arial and set the linkage identifier for the font symbol to “ArialFont” exporting it for ActionScript.
2.With the font embedded in the swf, we now need to embed it in our component.
There is only one way to do this. Assuming that our button is named button_btn your ActionScript will look like this:


// you may replace new ArialFont().fontName with the string “Arial” if you prefer. (If you did not create a Font Symbol you must use the string “Arial”)

var tf:TextFormat = new TextFormat(new ArialFont().fontName);
button_btn.setStyle("embedFonts", true);
button_btn.setStyle("textFormat", tf);
button_btn.label = "fox";

3.That's it. The Font is now embedded in the CS3 Component.

A Note about things that don't work: components do not have a “fontFamily” style. The only way to control the style of text in components is to create an instance of TextFormat and set the Button's “textFormat” style to that instance of TextFormat. Also, you cannot set a style directly on the TextField object in the button component. (The CS3 Button Component's TextField can be retrieved through it's textField property.) Setting the style directly on the textField causes a runtime error. Also, setting the textField's defaultTextFormat object does not have an effect, as it is overwritten by the components default styles. Finally setting the textField.embedFonts property to true does not have any effect.

No comments:

Post a Comment