Skinning

The following instructions explain of how to skin the look and the colors for the menu buttons.

1. Open the library (CTRL-L) and locate the movie clip called "menuButton".

If you intend to use the same skinned background for all the instances of the menu in your project then you may skip to step 4.

2. Right click on the menuButton movie clip and select "Duplicate".

3. Enter a name for this skin the in "Name" field. Check "Export for ActionScript" and "Export in first frame" and enter the same name in the "Identifier" field. Press "Ok" when you are done.

4. Double click on the movie clip for the appropriate menu skin to edit it. This would be the menuButton movie clip if you intend to use the same skin for all menu instances through your project or the name of the menu button skin as defined in step 3 above, if you are creating different skins for each menu instance. The timeline should now look like this:

There are 4 keyframe on the timeline with frame labels. Each keyframe contains an image of the menu button for each of the following button stages:

up - The button is unselected
down - Current button image
over - Mouseover position
clicked - Menu button has previously been clicked/visited

5. Edit the menu button for each of the 4 positions accordingly. Note that the menu button should always be position with the center of the button along the center of the Y axis and the left of the button on the X=0. Like this:

6. If you created a new menu skin instance (in steps 2 and 3 above), you must enter the identifier name of this skin in the "Button Skin" parameter in the textMenu properties panel.

Notes:

- The layer containing the frame names must never be deleted.

- You may wish to use images for the menu buttons as well.

- If you create a menu button with a border, it is recommended to use a hairline border to prevent the border size from increasing when using the "zoom" effects.

- To create a menu button position that is text only, without any background, you must still provide a transparent background as this defines the click are of the button. To do this, select the menu button element that is on the stage and set the alpha to 0% (using the color mixer palette):