Applying new skins 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 lets you 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 the ActionScript 2.0 Components Language Reference.

To apply a new skin to a subcomponent:

Follow the steps in Creating new 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 the file a unique name, such as SubcomponentProject.fla.

Drag the List component in the Components panel to the library.

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 library of SubcomponentProject.fla.

This adds the symbol to the Library panel, but doesn't make it 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 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

Set enough data so that the scroll bars appear, 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.

To use #initclip to apply an edited skin to all components in a document:

Follow the steps in Creating new 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 library of SkinsInitExample.fla.

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 Library options menu.

Select the Export for ActionScript check box. Click OK.

Export in First Frame should be automatically selected; if it is not, select it.

Double-click MyScrollDownArrowDown in the library to open it in symbol-editing 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 library. 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 List scroll bars; any TextArea or ScrollPane scroll bars would not be skinned.

To use #initclip to apply an edited skin to specific components in a document:

Follow the steps in Editing component skins in a document, 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 the symbol a unique name, such as MyVScrollBar.

Select the Export for ActionScript check box. Click OK.

Export in First Frame should be automatically selected; if it is not, select it.

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 necessary 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, click the Publish Settings button.

Click the ActionScript Version Settings button.

Click the Add New Path (+) button to add a new classpath, and select the Target button to browse to the location of the MyVScrollBar.as file on your hard disk.

Select Control > Test Movie.

Flash CS3