FlashMX Masking Components Text Problem

Posted by Aaron West at 2:10 PM in Flash

Under default conditions, FlashMX will not render component text when the component is masked. This behavior affects any component that utilizes text such as the combo box and scrollpane components. I had not heard of this behavior until I ran into it recently. To see the effects of this problem, drag a combo box component from the components panel to your stage in a new Flash movie. Name the instance of the combo box myComboBox. Create a new style format (call it myStyleFormat) in the Actions panel specifying only the font outline (myStyleFormat.textFont = "Arial"; for example) and the font size (myStyleFormat.textSize = 12; for example). Now, add your combo box as a listener to this style format (myStyleFormat.addListener(myComboBox);). Apply your changes (myStyleFormat.applyChanges();) so your combo box is affected.

Now, using the Properties Inspector create one or two default labels for your combo box. Next, create a new layer and on this new layer create a simple square mask that covers the combo box. Be sure the combo box layer is rolled up under the mask. Test your movie to see the results. What happened? You can see text for the two combo box choices when you have the drop-down activated, but you are not able to see the text for your selected entry. Baaaaaaaad Flash!

What I referred to as "default" conditions, is what we have just set up. Default is a terrible thing to call it, but I can't think of anything better that describes dropping a combo box on the stage, setting up it's font and font size, and then masking it. So what's the problem? In order for all the text in the combo box to show up we must embed the font that the combo box uses. In this example, we must embed the Arial font.

The best method is for embedding Arial is to create a new font directly in the library. Use the upper right drop-down menu (of the Library panel) and select New Font. Give the font any symbol name you wish, select the Arial font in the drop-down menu and then click "Ok." Now, right click your new symbol in the library and select the "Linkage" option. Check the "Export for ActionScript" checkbox, give the font a linkage identifier and click "Ok."

Think it will work now? If you said no, you're right. Our combo box is still set to use the "Arial" font. Change the ActionScript line to set the font outline to the instance name of the new font symbol you created. In my case the line would look like this: myStyleFormat.textFont = "myFont";. Surely it'll work now? Test your movie. Doesn't work does it? There's a property of the FStyleFormat object called "embedFonts." This property, if not explicity set, is by default false. Add this property to your style format: myStyleFormat.embedFonts = true;. Now test your movie. It works!!

The only downside to embedding fonts in your movie is file size. It will add about 15KB - 20KB per embedded font. However, if you wish to mask components and still be able to see the text in those components you don't really have a choice.

Final Note: The above scenario was tested under FlashMX and FlashMX 2004 Professional (using AS 1.0 under FMX 2004 Pro).

UPDATE: 03.09.2004

Please refer to this entry for more information on this problem under FlashMX 2004 Professional.

Aaron West's Gravatar
About this post:

This entry was posted by Aaron West on November 20, 2003 at 2:10 PM. It was filed in the following categories: Flash. It has been viewed 1779 times and has 0 comments.

0 Responses to FlashMX Masking Components Text Problem