Custom Skin Tutorial

By reading this section you will learn to crate your very own skin. It's simple and it's fast.

This tutorial only refers to the basic skin elements one needs to create a Creative Vertical Menu skin.

The values given for colors can be approximate.

1. This will be the result of our work - a simple, elegant skin - having the name of: "airy":

2. Let's start by creating the backgrounds:

A. For the Main Menu:

- Use a rectangular shape , change its fill, when you're done choosing colors jump to the next step:

- Convert to symbol and for Action Script following the naming rules: skin_element_name_skin_name as stated in help files : Naming rules for Skin Elements

main menu's buttons design:

- draw a rectangle 160X26 and fill it using alpha property too

- draw another rectangle identical in properties with the one before, having the width equal to the previous rectangle's height;

- apply a gradient with 3 transparency steps:

-

- rotateusing the transform tool in order to have a vertical gradient

- set the same width as for the first rectangle with solid fill:

- Convert to symbol and for Action Script following the naming rules: skin_element_name_skin_name as stated in help files : Naming rules for Skin Elements

- for the up state just change the color gradient and save it as: "main_button_up_airy":

B. For the Submenu:

Duplicate the main menu's background as the submenu's background is intended to be identical

- Convert to symbol and for Action Script following the naming rules: skin_element_name_skin_name as stated in help files : Naming rules for Skin Elements : sub_back_airy

- submenu buttons

Name the submenu buttons as it follows: skin_element_name_skin_name as stated in help files : Naming rules for Skin Elements

- duplicate the over state button from the main menu and delete its background. name it "sub_button_over";

- duplicate the up state button from the main menu and lower its alpha property to make it even more transparent;

4. Create a separator :

- draw a line using the line tool

- choose a color fill for it:

- convert lines to fills

- convert to movie clip, naming it as specified in the naming rules help file.and export for ActionScript.

- have the line resized to 165 so it can be smaller than the width of the main menu's background of 176 pixels.

- the Library currently looks this way, after having gathered all skin elements created in a folder:

5. After you've dragged a vertical menu component on stage, you should change some parameters to make your skin suitable for usage:

Define a Menu Structure to test your skin with:

Test your project to see the progress made.

As you can see in few easy steps we've managed to create a custom skin that is functional and easy to integrate as design.

For additional design elements consult this extra-page that continues this tutorial with more advanced "making-of" tips.