Getting rid of jagged fonts in the Flash CS3 ComboBox Component
I was working with the CS3 ComboBox component yesterday and my fonts inside the component kept looking more jagged than the designer’s comp. After some testing, I found there were a few things I needed to do in order to fix the problem:
- Toggle embedFonts to true only after items are added to the combobox.
- There are two separate parts of the component where you embed fonts: the main textField and dropdown text fields.
- If applying a larger font size to the text format, the dropdown list also needs to have its “rowHeight” increased in order to see the resulting larger font – in my case I was testing at 25pt for a more dramatic test and wasn’t seeing the font at all due to it shifting down.
Here’s the resulting code (stripped out package/class info):
// Remember to Import TextField and ComboBox
import flash.text.TextField;
import fl.controls.ComboBox;
// Setup the Text Format to use Arial, 12pt, Bold, Black
var myTextFormat : TextFormat = new TextFormat();
myTextFormat.font = “Arial“;
myTextFormat.size = 12;
myTextFormat.bold = true;
myTextFormat.color = 0x000000;
// Embed the font in the ComboBox dislpay and dropdown
// Pre-condition: myCB is a ComboBox component on the stage
// and all items have already been added to it
myCB.textField.setStyle(“embedFonts“, true);
myCB.textField.setStyle(“textFormat“, myTextFormat);
myCB.dropdown.setRendererStyle(“embedFonts“, true);
myCB.dropdown.setRendererStyle(“textFormat“, myTextFormat);
myCB.dropdown.rowHeight = 25;