Using embedded fonts with the Flash CS3 ComboBox control

The following example shows how you can use embedded fonts with a Flash CS3 ComboBox control’s drop down menu.

Full code after the jump.

The following example requires a ComboBox control in your library as well as an embedded font in your library with a linkage identifier of “VerdanaEmbedded” and a normal font weight.

import fl.controls.ComboBox;import fl.data.DataProvider;var font:Font = new VerdanaEmbedded() as Font;var tf:TextFormat = new TextFormat();tf.font = font.fontName;var arr:Array = new Array();arr.push({label:"One"});arr.push({label:"Two"});arr.push({label:"Three"});arr.push({label:"Four"});arr.push({label:"Five"});arr.push({label:"Six"});var cb:ComboBox = new ComboBox();cb.dropdown.setRendererStyle("embedFonts", true);cb.dropdown.setRendererStyle("textFormat", tf);cb.dataProvider = new DataProvider(arr);cb.move(10, 10);addChild(cb);

Update:

If you want to add anti-aliased text to the main ComboBox itself (and not just the dropdown menu), you can use the setStyle() method to set the embedFonts and textFormat styles on the textInput property, as seen in the following snippet:

var cb:ComboBox = new ComboBox();cb.textField.setStyle("embedFonts", true);cb.textField.setStyle("textFormat", tf);cb.dropdown.setRendererStyle("embedFonts", true);cb.dropdown.setRendererStyle("textFormat", tf);cb.dataProvider = new DataProvider(arr);cb.move(10, 10);addChild(cb);

15 Responses to Using embedded fonts with the Flash CS3 ComboBox control

  1. Steve Jobs says:

    But how do you change the font of the selected item in the combo box? You could do this:cb.textField.setStyle(“textFormat”, tf);But, unlike the text in the dropdown items, the selected item text will not be antialiased. So how do you set set the antialiasing of the selected item text?

  2. peterd says:

    Steve,Good question! In order to get the antialiasing on the text field as well, you need to set the embedFonts style to true, like so:var cb:ComboBox = new ComboBox();cb.rotation = 5;cb.textField.setStyle(“embedFonts”, true);cb.textField.setStyle(“textFormat”, tf);cb.dropdown.setRendererStyle(“embedFonts”, true);cb.dropdown.setRendererStyle(“textFormat”, tf);cb.dataProvider = new DataProvider(arr);cb.move(10, 10);addChild(cb);I’ll update the article above and add a second snippet/example.Thanks,Peter

  3. Steve Jobs says:

    Nice one, Peter. Thanks for the info.

  4. Peter Hesterman says:

    Thanks, Peter. That was a big help. I was trying to set the style like this:cb.setStyle(“embedFonts”, true);which didn’t work.Now, is there any way to get the characters like “∂” (\u2202) and “ƒ” (\u0192) to display in there?Peter

  5. peterd says:

    Peter,As it turns out, that was a very good question!The only solution I came up with was to embed your font, and then create a dynamic text field on the stage (using the Text tool), click the “Embed” button in the Property inspector, and then specify your Basic Latin character set (or whatever character set you want), and then manually paste the “∂” (\u2202) and “ƒ” (\u0192) characters into the “Include these characters” text field.It worked for a plain vanilla TextField and a CS3 Label control, but I didn’t have much time to thoroughly test it with a ComboBox, so your mileage may vary. :)Hope that helps/works,Peter

  6. Peter Hesterman says:

    Forget about the combobox for a moment. I hope that you have time to try this out…it’s been driving me crazy!If I embed Verdana (from my system) in a dynamic text field it will display the special characters, but if I use the VerdanaEmbedded font I added to my library instead, the special characters simply disappear when I test the movie.This is also exactly what happens with VerdanaEmbedded when it’s applied to the combobox (or to a textarea component for that matter).So, it seems that the version of the font embedded in the dynamic text field contains the special characters, but the version added to the library doesn’t (or won’t allow them to be displayed, at least). Is there a way to get a reference to the font embedded in the dynamic text field to use in the other components?Thanks again,Peter

  7. Joseph says:

    I’m trying to the same thing, except I want to use the embedded font with a List. I’ve tried this, with trackList as the List object, and with an embedded font linked as Helvetica11:var font:Font = new Helvetica11() as Font;var tf:TextFormat = new TextFormat();tf.font = font.fontName;trackList.setStyle(“textFormat”,tf);trackList.setStyle(“embedFonts”,true);Based you your example above, though, it sounds like I’d have to address each button in the list. I explored that route by subclassing CellRenderer, with no success.Any ideas?

  8. imran says:

    everything works fine for me when i embed one type of font, but how can i show different type of font style for each entry in my combobox?

  9. ravindra says:

    I want to increase the font size

  10. Frank says:

    “everything works fine for me when i embed one type of font, but how can i show different type of font style for each entry in my combobox?”That’s a very good question Joseph!I’m still looking for a solution to this problem… I thought it wouldn’t be something difficult to do, but I was wrong :/I’ll post here if I found the way to do it.Frank

  11. tom says:

    dude you are a god!!I looked everywhere for this answer; even on the adobe site and could not figure out how to do it.Searched for hours in google, reading through crappy tutorials.Thank you!

  12. Jloa says:

    Dah, i’ve discovered that after 10 mins. But, to say it’s not really convinient as all other components use global setStyle method to change font style 4 ex.instance.setStyle({prop:String, value:String});So the reference to the textField and the dropdown is a bug-fix, i’d say.

  13. mitchell says:

    Great example, thanks.But how do you get this to work with the TextArea?I have been trying:a_txt.textField.setTextFormat( tf );a_txt.textField.embedFonts = true;Which works on a textField. But doesn’t seem to work on the TextArea?

  14. peterd says:

    mitchell,Try setting the styles directly on the TextArea control, as seen in the following example:// ActionScript 3.0import fl.controls.TextArea;var chaparralProEmbeddedFont:Font = new ChaparralProEmbedded();var textFormat:TextFormat = new TextFormat();textFormat.font = chaparralProEmbeddedFont.fontName;textFormat.size = 32;var textArea:TextArea = new TextArea();textArea.setStyle(“textFormat”, textFormat);textArea.setStyle(“embedFonts”, true);textArea.text = “The quick brown dog jumps over the lazy fox.”;textArea.move(10, 10);textArea.setSize(300, 200);addChild(textArea);I’ve also posted this example on “Using an embedded font with the TextArea control in Flash with ActionScript 3.0” on ActionScriptExamples.com since this blog isn’t the best for posting code.Hope that helps,Peter

  15. seany_on_craic says:

    Thanks Peter, this helped a lot with embedding my font into the List Component as well…curious though…I notice that it is doing regular antialiasType; is there anyway to change this to AntiAliasType.ADVANCED for the rendering of the text for each menu item in the combobox/list controls?Thanx in advance :)