Editing component skins in a document

To edit the skins associated with all instances of a particular component in a single document, copy the skin symbols from the theme to the document and edit the graphics as desired.

The procedure described below is very similar to creating and applying a new theme (see About themes). The primary difference is that this procedure describes copying symbols directly from the theme already in use to a single document and editing only a small number of all skins available. This is appropriate when your modifications are all in a single document and when you are modifying skins for only a few components. If the edited skins will be shared in multiple documents or encompass changes in several components, you may find editing the skins easier if you create a new theme.

An article on advanced skinning can be found online in the Adobe Developer Center at www.adobe.com/devnet/flash/articles/skinning_2004.html.

To edit component skins in a document:

  1. If you already applied the Sample theme to a document, skip to step 5.
  2. Select File > Import > Open External Library, and select the SampleTheme.fla file.

    This file is located in the application-level configuration folder. For the exact location on your operating system, see About themes.

  3. In the theme's Library panel, select Flash UI Components 2/Themes/MMDefault and drag the Assets folder of any components in your document to the library for your document.

    For example, drag the RadioButton Assets folder to the ThemeApply.fla library.

  4. If you dragged individual component Assets folders to the library, make sure the Assets symbol for each component is set to Export in First Frame.

    For example, the Assets folder for the RadioButton component is called RadioButton Assets; it has a symbol called RadioButtonAssets, which contains all of the individual asset symbols. If you set Export in First Frame on the RadioButtonAssets symbol, all individual asset symbols will also export in the first frame.

  5. Double-click any skin symbol you want to modify to open it in symbol-editing mode.

    For example, open the States/RadioFalseDisabled symbol.

  6. Modify the symbol or delete the graphics and create new graphics.

    You may need to select View > Zoom In to increase the magnification. When you edit a skin, you must maintain the registration point in order for the skin to be displayed correctly. The upper-left corner of all edited symbols must be at (0,0).

    For example, change the inner circle to a light gray.

  7. When you finish editing the skin symbol, click the Back button at the left side of the edit bar at the top of the Stage to return to document-editing mode.
  8. Repeat steps 5-7 until you've edited all the skins you want to change.

    NOTE

     

    The live preview of the components on the Stage will not reflect the edited skins.

  9. Select Control > Test Movie.

    In this example, make sure you have a RadioButton instance on the Stage and set its enabled property to false in the Actions panel in order to see the new disabled RadioButton appearance.


Flash CS3