Changing skin properties in the prototype

If a component does not directly support skin variables, you can subclass the component and replace its skins. For example, the ComboBox component doesn't directly support skinning its drop-down list because the ComboBox uses a List component as its drop-down list.

If a component is composed of subcomponents, the subcomponents are identified in the component's entry in Components Dictionary.

To skin a subcomponent, do the following:

  1. Follow the steps in Editing component skins, but edit a scroll bar skin. For this example, edit the ScrollDownArrowDown skin and give it the new name MyScrollDownArrowDown.
  2. Select File > New and create a Flash document.
  3. Select File > Save and give the file a unique name, such as MyComboTest.fla.
  4. Drag MyScrollDownArrowDown from the theme library above to the Stage of MyComboTest.fla and delete it.

    This adds the symbol to the library, but doesn't make it visible on the Stage.

  5. Select Insert > New Symbol and give it a unique name, such as MyComboBox.
  6. Select the Export for ActionScript checkbox and click OK.

    Export in First Frame is automatically selected.

  7. Enter the following code in the Actions panel on Frame 1 actions of MyComboBox:
    #initclip 10
      import MyComboBox
      Object.registerClass("ComboBox", MyComboBox);
    #endinitclip
    
  8. Drag a ComboBox component to the Stage.
  9. In the Property inspector, enter as many Label parameters as it takes for the vertical scroll bar to appear.
  10. Select File > Save.
  11. Select File > New and create a new ActionScript file (Flash Professional only).
  12. Enter the following code:
    import mx.controls.ComboBox
    import mx.controls.scrollClasses.ScrollBar
    class MyComboBox extends ComboBox{
      function getDropdown():Object{
        var oldName = ScrollBar.prototype.downArrowDownName;
        ScrollBar.prototype.downArrowDownName = "MyScrollDownArrowDown";
        var r = super.getDropdown();
        ScrollBar.prototype.downArrowDownName = oldName;
        return r;
      }
    }
    
  13. Select File > Save and save this file as MyComboBox.as.
  14. Click a blank area on the Stage and, in the Property inspector, select the Publish Settings button.
  15. Select the ActionScript version Settings button.
  16. Click the Plus button to add a new classpath, and select the Target button to browse to the location of the MyComboBox.as file on your hard drive.
  17. Select Control > Test Movie.