Flash ComboBox Style

For a recent project, I needed to change how a Flash ComboBox looked. How do you change the font style for the ComboBox text and its dropdown list? Can you make the text one font size and the dropdown another? Yes, but I found it wasn't as easy as I thought it should be. Basically, I embedded a new font and created a CellRenderer to style the dropdown.

ComboBox Designed with Embedded Font

The ComboBox above was created in Flash CS3, and the text styles were modified using ActionScript 3.0. By extending the ComboBox class, I created a custom DesignComboBox class, then added the CBDesignRenderer class to style the dropdown fields.

The ComboBox component needs to exist in the library before you can create it with AS3. The DesignComboBox class and CBDesignRenderer class are listed below.

You can DM me on Twitter @jazzairtech if you want me to send you the FLA and AS files.

/* DesignComboBox.as */
 
package com.jazzairtech.ComboBoxDesign
{
  import flash.text.TextFormat;
  import fl.controls.ComboBox;
  import fl.controls.List;
 
  /**
  * DesignComboBox class
  * Apply embedded font to ComboBox List items
  */
  public class DesignComboBox extends ComboBox {
    private var cdDesignFmt:TextFormat;
 
    public function DesignComboBox() {
      super();
 
      var cbFmt:TextFormat = new TextFormat();
      var myArial:Arial = new Arial();
      cbFmt.font = myArial.fontName;
      cbFmt.size = 20;
      
      textField.setStyle("embedFonts", true);
      textField.setStyle("textFormat", cbFmt);
 
      // Apply CBDesignRenderer to set dropdown format
      dropdown.setStyle("cellRenderer", CBDesignRenderer);
    }
    
    override protected function drawLayout():void {
      super.drawLayout();
      textField.y = 0;
    }
  }
}

/* CBDesignRenderer.as */
 
package com.jazzairtech.ComboBoxDesign
{
  import flash.text.TextFormat;
  import fl.controls.listClasses.CellRenderer;
 
  /**
  * CBDesignRenderer class
  * Adds an embedded font (Arial) to ComboBox List items
  */
  public class CBDesignRenderer extends CellRenderer {
 
    public function CBDesignRenderer() {
      super();
      
      var cbFmt:TextFormat = new TextFormat();
      var myArial:Arial = new Arial();
      cbFmt.font = myArial.fontName;
      cbFmt.size = 16;
      
      this.setStyle("embedFonts", true);
      this.setStyle("textFormat", cbFmt);
    }
  }
}

Styling the ComboBox with AS3 takes a little extra coding, but I think it's worth the effort to improve how it looks.

Aloha, Joe