It's possible to store individual skin graphics as discrete image files, but bundling them together into a single SWF file reduces load time considerably. The SWF format also supports vector based artwork and scale9 resizing, so the size of controls can be flawlessly adjusted through the configuration without the need to rebuild all the graphics.

To create new control skin graphics, launch Adobe Flash™ and open the FLA file. Each frame in the file is a different graphic, and frame labels are used to identify each one. The first frame in the file is blank and should contain a stop() command. There are also some items in the Library, which holds all graphics that will be scale9 resized.

Note that every possible state for each interface control has a separate graphic. Putting a Flash button object with various hilite states on a frame will not work! Each frame in a skin file is treated graphically with only its initial state appearing.

Once graphics have been created for every state of a control, their URLs are used as attribute values in its control tag. To refer to a graphic on a frame in an SWF file, append a pound symbol (#) and the frame label to the file's URL. To refer to a graphic in the Library, append an at symbol (@) and the class name to the file's URL (the complete class path must be used if it doesn't start with 'com.moviemasher.display.').

Most controls support the icon and overicon attributes. See the documentation for each of the Controls for information about which states and corresponding attribute names it supports. To use scale9 resizing for a particular graphic, it MUST be in a library symbol. Make sure to check the 'Enable guides for 9-slice scaling' option in the Symbol Properties dialog box. Learn more about scale9 resizing and file publishing in the Adobe Flash™ documentation.