• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint

Skinning a Component

Drag a few instances of the PushButton component and one ComboBox component into a new movie. Populate the ComboBox component with a few labels (like you did in the first part of this workshop chapter). Test the movie. You should see the default _sans typeface.

You can change the font choice for all components in just one move. Open the Library window and notice the folder structure shown in Figure W7.3. Navigate to the Component Skins folder and then to the Global Skins folder, and finally double-click to edit the FLabel symbol.

Figure W7.3. All the skins for components that ship with Flash are contained in a single folder.

Once inside the FLabel symbol, unlock the layers and select the text field on the Stage. Use the Properties panel to select a different font and font size. Test the movie again. Depending on the font choice, you might want to return to the FLabel symbol and click the Character button so that you can select to Embed Font Outlines for All Characters (see Figure W7.4).

Figure W7.4. Embedding all characters with a text field will often make the text appear clearer (although this also adds to the filesize).

Although we changed only the font, you can also change any graphic element in the component. For example, in the FPushButton Skins Library folder you’ll find a symbol called fpb_up. That’s basically the button in its Up state. Replacing graphical elements in components can be tedious because there are often skin elements. The PushButton component has five separate skin elements (independent instances within the component).

Because skinning a component can be a bit of work, you certainly don’t want to do it for every movie. However, once you complete one component “makeover,” you can save it to use later. In the remaining steps, I’ll show you how to save the modified PushButton component.

To make components available to other movies, you need to confirm two things: that the source .fla is saved in Flash’s Configuration folder and that the component is set to display in the Components panel. Select the PushButton component symbol in the Library of your working file. (It should be in a folder called Flash UI Components.) Select Component Definition from the Library options menu and verify that the Display in Components panel check box is selected (see Figure W7.5).

Figure W7.5. Before a component will appear in the Components panel, you must select the Display in Components panel option in the Component Definition dialog box.

Next we need to save a copy of our working file inside Flash’s Configuration folder. This folder’s location varies based on your operating system. You can find the exact location in the readme.html file located in the Configuration folder adjacent to your installed version of Flash MX. On Windows 98, for example, you’ll find the Configuration folder inside C:\WINDOWS\Application Data\Macromedia\Flash MX\. Inside the Configuration folder are several subfolders, including the Components folder. It is into this folder that you should save the working file containing the modified component. Save the file as myComponents.fla.

Quit Flash and restart the program to implement the changes (that is, so that the component will appear in the Components panel). Now, you’ll find an additional sub-menu item in the Components panel based on the filename you provided in Step 5 (see Figure W7.6).

Figure W7.6. Components that you add to Flash’s Configuration folder appear in the Components panel.


After you save a .fla file inside the Components folder (inside the Configuration folder), you will not be able to edit it from Flash. If you need to make an edit, just copy the folder to another location, make the edit, and then return it to the Components folder.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint