Creative FL Tabbed Menu Documentation
Creative FL Tabbed Menu> Create a Custom Skin > Custom Skin Tutorial

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 Tabbed Menu skin.

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

2. Let's start by creating the backgrounds:

A. For the Main Menu:

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

- draw another rectangle and apply gradient on

 

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

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

- Place the gradient rectangle as to partly cover the rectangle with solid filling

- Convert lines to fills

 

 

- 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

 

 

B. For the Submenu:

-duplicate symbol (the main background symbol):

- Name it as it follows: skin_element_name_skin_name as stated in help files : Naming rules for Skin Elements

- erased the lower part of the movie clip, trying to make the submenu's background a little smaller :

- as seen for the main menu's background, another rectangle was created

- the height of this rectangle was modified until reached 30 pixels, that is smaller than the main menu's 55 pixels in height;

 

(also took care of the positioning on X and Y axis so the movie clip would be at (0,0);

 

C. Final Design Touch: drawing a line in the main menu's background movie clip:

- searching for a good filling manner:

- then, of course, Convert Lines to Fills...:

 

3. Create the buttons for the main menu and the submenu:

A. For the Main Menu:

The buttons should have an up state and an over state, so you can seethe difference on mouse rollover :

• Up State

-From inside the main menu's background movie clip select an area,

- copy it, then, outside the movie clip, paste it:

- change its color:

- convert it to movie clip, exporting it for Action Script and name it following the instructions in the special help file: Naming Rules for Skin Elements.

 

• Over State

- Duplicate the up state movie clip and rename it according to the naming rules

 

- I'll have it's transparency set to: 50%

 

B. For the Submenu:

-follow the same steps as above;

The buttons should have an up state and an over state, so you can seethe difference on mouse rollover :

• Up State

Duplicate the main button, in its up state, change its height to 30 and save it under the corresponding name.

• Over State

Duplicate the up state movie clip and rename it according to the naming rules

I'll have it's transparency set to:50

 

 

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 Action Script.

- have the line resized to match the height of the main menu's background that was of 55 pixels.

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

 

5. After you've dragged a tabbed 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.