author: Krasimir Tsonev

Hi there, I'm . Senior front-end engineer with over 13 years of experience. I write, speak and occasionally code stuff.

Customize ComboBox in Flash (AS3)

In my work as a flash developer very often I receive from the client just one photoshop file with the design of the application/site that has to be coded. In the last project the designer made the ComboBox in the style of the site. So I couldn't use the default look of the Flash's drop down component.
Here is the code of the document class. At the end of the article you can download the source files.
package lib.document {
    import flash.display.MovieClip;
    import flash.events.Event;
    import flash.text.TextFormat;
    import flash.utils.*;
    import fl.controls.ComboBox;
    import fl.data.DataProvider;
    public class App extends MovieClip {
      private
      var _clip: MovieClip;
  
      function App() {
        var tf: TextFormat = new TextFormat();
        tf.font = "Arial";
        tf.size = 15;
        tf.color = 0x747070;
        var dp: DataProvider = new DataProvider();
        dp.addItem({
          label: "London",
          data: "item1"
        });
        dp.addItem({
          label: "Paris",
          data: "item2"
        });
        dp.addItem({
          label: "Sofia",
          data: "item3"
        });
        dp.addItem({
          label: "Praha",
          data: "item4"
        });
        _clip = new ComboBoxClip();
        _clip.combo.dataProvider = dp;
        _clip.combo.width = 199;
        _clip.combo.height = 33;
        _clip.combo.textField.setStyle("embedFonts", true);
        _clip.combo.textField.setStyle("textFormat", tf);
        _clip.combo.textField.setStyle("textPadding", 5);
        _clip.combo.dropdown.setStyle("cellRenderer", CustomCellRenderer);
        _clip.combo.dropdown.rowHeight = 31;
        _clip.combo.addEventListener(Event.CHANGE, onComboChange);
        _clip.combo.tabIndex = 1;
        _clip.x = _clip.y = 30;
        addChild(_clip);
      }
      private
      function onComboChange(e: Event): void {
        trace("onComboChange data=" + _clip.combo.selectedItem.data + " label=" + _clip.combo.selectedItem.label);
      }
    }
  }
The CustomCellRenderer class:
package lib.document {
    import fl.controls.listClasses.CellRenderer;
    import flash.text.TextFormat;
    public class CustomCellRenderer extends CellRenderer {
      public
      function CustomCellRenderer() {
        super();
        var tf: TextFormat = new TextFormat();
        tf.font = "Arial";
        tf.size = 15;
        tf.color = 0x747070;
        setStyle("embedFonts", true);
        setStyle("textFormat", tf);
      }
      override protected
      function drawLayout(): void {
        super.drawLayout() textField.y += 2;
        textField.x += 4;
      }
    }
  }
If you enjoy this post, share it on Twitter, Facebook or LinkedIn. Or maybe comment below: