Applying an edited skin to a subcomponent

In certain situations you may want to modify the skins of a subcomponent in a component, but the skin properties are not directly available (for example, there is no direct way to alter the skins of the scroll bar in a List component). The following code allows you to access the scroll bar skins. All the scroll bars that are created after this code runs will also have the new skins.

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

To apply a new skin to a subcomponent, do the following:

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.
Select File > New to create a new Flash document.
Select File > Save and give it a unique name such as SubcomponentProject.fla.
Double-click the List component in the Components panel to add it to the Stage and press Backspace to delete it from the Stage.
This adds the component to the Library panel, but doesn't make the component visible in the document.
Drag MyScrollDownArrowDown and any other symbols you edited from MyTheme.fla to the Stage of SubcomponentProject.fla and delete them.
This adds the component to the Library panel, but doesn't make the component visible in the document.

Do one of the following:

If you want to change all scroll bars in a document, enter the following code in the Actions panel on Frame 1 of the Timeline:
```
import mx.controls.List
import mx.controls.scrollClasses.ScrollBar
ScrollBar.prototype.downArrowDownName = "MyScrollDownArrowDown";
```
You can then either enter the following code on Frame 1 to create a list dynamically:
```
createClassObject(List, "myListBox", 0, {dataProvider: ["AL","AR","AZ", "CA","HI","ID", "KA","LA","MA"]});
```
Or, you can drag a List component from the library to the Stage.

If you want to change a specific scroll bar in a document, enter the following code in the Actions panel on Frame 1 of the Timeline:

import mx.controls.List
import mx.controls.scrollClasses.ScrollBar
var oldName = ScrollBar.prototype.downArrowDownName;
ScrollBar.prototype.downArrowDownName = "MyScrollDownArrowDown"; 
createClassObject(List, "myList1", 0, {dataProvider: ["AL","AR","AZ", "CA","HI","ID", "KA","LA","MA"]}); 
myList1.redraw(true);
ScrollBar.prototype.downArrowDownName = oldName;

Note: You must set enough data to have the scroll bars show up, or set the vScrollPolicy property to true.

Select Control > Test Movie.

You can also set subcomponent skins for all components in a document by setting the skin property on the subcomponent's prototype object in the #initclip section of a skin symbol. For more information about the prototype object, see Function.prototype in ActionScript Dictionary Help.

To use #initclip to apply an edited skin to all components in a document, do the following:

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.
Select File > New and create a new Flash document. Save it with a unique name such as SkinsInitExample.fla.
Select the MyScrollDownArrowDown symbol from the library of the edited theme library example, drag it to the Stage of SkinsInitExample.fla, and delete it.
This adds the symbol to the library without making it visible on the Stage.
Select MyScrollDownArrowDown in the SkinsInitExample.fla library and select Linkage from the Options menu.
Select the Export for ActionScript check box. Click OK.
Export in First Frame is automatically selected.
Double-click MyScrollDownArrowDown in the library to open it in edit symbol mode.

Enter the following code on Frame 1 of the MyScrollDownArrowDown symbol:

#initclip 10
  import mx.controls.scrollClasses.ScrollBar;
  ScrollBar.prototype.downArrowDownName = "MyScrollDownArrowDown";
#endinitclip

Do one of the following to add a List component to the document:
- Drag a List component from the Components panel to the Stage. Enter enough label parameters so that the vertical scroll bar will appear.
- Drag a List component from the Components panel to the Stage and delete it. Enter the following code on Frame 1 of the main Timeline of SkinsInitExample.fla:
```
createClassObject(mx.controls.List, "myListBox1", 0, {dataProvider: ["AL","AR","AZ", "CA","HI","ID", "KA","LA","MA"]});
```
  Note: Add enough data so that the vertical scroll bar appears, or set vScrollPolicy to true.

The following example explains how to skin something that's already on the stage. This example skins only Lists; any TextArea or ScrollPane scroll bars would not be skinned.

To use #initclip to apply an edited skin to specific components in a document, do the following:

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.
Select File > New and create a Flash document.
Select File > Save and give the file a unique name, such as MyVScrollTest.fla.
Drag MyScrollDownArrowDown from the theme library to the MyVScrollTest.fla library.
Select Insert > New Symbol and give it a unique name like MyVScrollBar.
Select the Export for ActionScript check box. Click OK.
Export in First Frame is automatically selected.

Enter the following code on Frame 1 of the MyVScrollBar symbol:

#initclip 10
  import MyVScrollBar
  Object.registerClass("VScrollBar", MyVScrollBar);
#endinitclip

Drag a List component from the Components panel to the Stage.
In the Property inspector, enter as many Label parameters as it takes for the vertical scroll bar to appear.
Select File > Save.
Select File > New and create a new ActionScript file.

Enter the following code:

import mx.controls.VScrollBar
import mx.controls.List
class MyVScrollBar extends VScrollBar{
  function init():Void{
    if (_parent instanceof List){
      downArrowDownName = "MyScrollDownArrowDown";
    }
    super.init();
  }
}

Select File > Save and save this file as MyVScrollBar.as.
Click a blank area on the Stage and, in the Property inspector, select the Publish Settings button.
Select the ActionScript version Settings button.
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.
Select Control > Test Movie.