Customizing a Component Skin

I l @ ve RuBoard

You can easily change the look of a component by modifying its skin. The skin is a graphic that's used by all the instances of a component. For example, every instance of the CheckBox component has a check that appears when it's selected. In this exercise, you will modify the appearance of a component skin. Start with guestbook5.fla open .

1. Open the fcb_check movie clip in symbol-editing mode.

   

   You'll find the fcb_check movie clip in the FCheckBox Skins folder, which is in the Component Skins folder inside of the Flash UI Components folder. You can open the movie clip in symbol-editing mode by double-clicking the icon on the left of its name .

   The fcb_check movie clip is part of the CheckBox component. It controls the appearance of the check in the check box.

2. Double-click the instance of the fcb_check movie clip nested inside the fcb_check movie clip.

   

   There are actually two fcb_check movie clips in the Flash UI Components folder. You opened one in the last step, and you just opened the other one in this step. The one you just opened is the graphic for the first one. The two clips have the same names , but are in different folders.

3. Select the check graphic in the element layer, and press Delete or Backspace.

   

   You're going to replace this check graphic with a custom graphic, but you need to remove the existing graphic first. After you delete the graphic, the element layer should be empty.

4. Import check_black.swf from the Lesson08/Assets folder.

   

   Choose File > Import and browse to the Lesson08/Assets folder. Locate check_black.swf in that folder, select it, and click Open. A small black X should appear on the screen. The top-left corner of the X should be located at the center of the symbol. If not, use the Property inspector to set the X and Y of the X graphic to 0 and 0.

   If you want to add check boxes that can be disabled, you will also want to change the fcb_check_disabled in the FCheckBox Skins. The Lesson08/Assets folder contains another graphic, check_gray.swf, if you'd like to try this on your own.

5. Choose Control > Test Movie.

   

   When you click the check box in the movie, an X should appear instead of a check. If you had multiple instances of the CheckBox component in your movie, each instance would contain an X when selected.

   You can customize the look of your components using this same technique. When you opened the Component Skins folder, you probably noticed there were folders for other components: FPushButton Skins, FScrollBar Skins, and Global Skins. You can explore the movie clips in these folders and make additional changes if you'd like to further customize the skins.

   If you mess up any components during your exploration, simply double-click the component in the Components panel. The Resolve Component Conflict dialog box will open and ask if you would like to use the existing component (the one you modified) or replace the existing component (with the original). Select "Replace existing component" and click OK, and your component will revert back to the original.

   Close the Test Movie window when you're finished looking at the updated check box.

6. Choose Edit > Document to return to the main timeline. Save your movie as guestbook6.fla in the FlashTFS folder on your hard drive.

   As you can see, customizing the skin of a component is pretty easy. Modifying the skin is useful if you want to change the shape of any part of the component. But as you'll learn in the next exercise, it's best to use ActionScript to change colors.

I l @ ve RuBoard