Skinning the ComboBox Flash component

This post is more for me because I keep forgetting how to do this. For my defense I have to say that it is not exactly the first thing that comes to mind when you are trying to change the font in the ComboBox component, but at least I won’t have to remember in which project I did it; I’ll just turn to my friend Google and type : comboBox + zedia.

Editing the visual is mostly easy inside of flash but my main problem is always the fonts. In a previous post I talked about fonts in Flash in general, this one will use that as a base and apply it to the ComboBox. Here is the code to change the font in the textfield and the dropping list:

var myFormatWhite:TextFormat = new TextFormat();
myFormatWhite.font = "DFC GillSansLight";
myFormatWhite.size = 15;
myFormatWhite.color = 0xffffff;
 
var myFormatBeige:TextFormat = new TextFormat();
myFormatBeige.font = "DFC GillSansLight";
myFormatBeige.size = 14;
myFormatBeige.color = 0xa18c52;
 
comboBox.textField.setStyle("embedFonts", true);
comboBox.textField.setStyle("textFormat", myFormatWhite);<
 
comboBox.dropdown.setRendererStyle("embedFonts", true);
comboBox.dropdown.setRendererStyle("textFormat", myFormatBeige);
 
comboBox.prompt = "Province"; //default value that won't show in the dropdown
comboBox.addItem( { label:"New Brunswick", data:"New Brunswick" } );
comboBox.addItem( { label:"Nova Scotia", data:"Nova Scotia" } );
comboBox.addItem( { label:"Ontario", data:"Ontario" } );
comboBox.addItem( { label:"Prince Edward Island", data:"Prince Edward Island" } );

My problem was mostly with the setRendererStyle method; not that obvious. I also put the code for adding items in the ComboBox and to have a default text in it that doesn’t show in the dropdown. Now the next bit of code if to check, when you used ComboBox.prompt, if something was selected:

if (comboBox.selectedIndex == -1) {
//show error message because comboBox wasn't changed
}

P.S. all this code assumes that I have dragged the component to the stage in the Flash IDE

, , ,

  1. #1 by Joel Nealy - June 29th, 2010 at 17:01

    This does not work. The combBox reflects the fact that it is receiving values but does not populate with any data.

    In other words the text is invisible.

    Also I have to delete the “<” you wrote at the end of this method: comboBox.textField.setStyle(“textFormat”, myFormatWhite);

    Why is it registering the values but not showing the text. I changed my font to Arial also…so its not a font issue.

  2. #2 by zedia.net - June 29th, 2010 at 17:22

    @ Joel Nealy I’m pretty sure you have a font issue. When I used this, my font was embedded using the Flex Embed metatag. see this post for an example http://www.zedia.net/2010/fonts-are-my-bane-not-anymore/

  3. #3 by Luis - July 19th, 2010 at 19:52

    It works!

    Thanks, I’ve been looking for this information for a while!

  4. #4 by www.glossygames.com - September 20th, 2010 at 11:25

    embed the fonts and check export for actionscript.

(will not be published)
Subscribe to comments feed
  1. No trackbacks yet.