Getting rid of jagged fonts in the Flash CS3 ComboBox Component
Posted in Software Development on September 26th, 2008 by Russ TarletonI 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;