Using Components > Customizing component skins > About creating and registering skin elements |  |

About creating and registering skin elements

The best way to understand the process of creating graphics and registering skin elements is to dissect one of the graphic symbols in the library, and view the Read Me file on the first layer of the Timeline. Double-click the symbol in the library, open the Read Me file on the first layer of the Timeline, and pull apart the symbol on the Stage.

The following image shows the `fcb_downArrow` symbol as it appears whole and as separate skin elements.

In the dissected version, you can see that the `fcb_downArrow` symbol is made up of several skin elements. You can view the names of selected skin elements in the Property inspector. The `fcb_downArrow` symbol has six skin elements: `arrow_mc`, `shadow_mc`, `darkshadow_mc`, `highlight_mc`, and `highlight3D_mc`.

Each skin symbol is a movie clip registered to the component and associated with properties of the FStyleFormat object in the Read Me file for the movie clip. To register a skin element to a component, you enter the name for the skin element in the first frame of the Read Me layer for the skin symbol which contains the skin element.

The following code from the Read Me file for the `fcb_downArrow` symbol shows how the movie clip skin elements are registered to properties of the FStyleFormat object.

    component.registerSkinElement(arrow_mc, "arrow");
    component.registerSkinElement(face_mc, "face");
    component.registerSkinElement(shadow_mc, "shadow");
    component.registerSkinElement(darkshadow_mc, "darkshadow");
    component.registerSkinElement(highlight_mc, "highlight");
    component.registerSkinElement(highlight3D_mc, "highlight3D");