How to create a custom skin

In this tutorial we're going to create a custom skin from scratch. Because it's from scratch, we're going to have to design it ourselves as nice as we can in a short tutorial, but better performances could be attained by using previously created images and so on. After some practice with the tutorial and on your own, you will see what I mean. In order to have an idea on what we have to do, I recommend you to look over the following section in the complete product manual: Creative FL Tabbed Menu> Create a Custom Skin.

In order to be able to do this tutorial, the first thing you have to do is install Creative FL Tabbed Menu extension on your computer; if you encounter any problems doing that, check out the "How to install an extension" tutorial.

1. Open Flash and create a new file. (For CS3 users: in order to set-up the frame rate and name your file, right-click the stage and select "Document properties")

Create file

Create file

2. The idea for creating a Custom Skin with Creative Tabbed Menu in Flash is to create a set of movie clips which will be put together to form the menu. As you can see in the documentation, there are some files whose creation is mandatory (the main button's up and over states, the sub button's up and over states and the back areas for main and sub buttons) and some which can be added if desired (there are a lot, but the one we will use here is a separator for the main buttons).

3. Those being said, let's get to work. Create a rectangle with these dimensions – W=550.0, H=30.0 – and make it color #0066FF for the fill and no color for the stroke. Convert it to a movie clip and name it “main_back_blueSkin” (don't forget to read about the naming and design rules from the complete product documentation); blueSkin will be the name of our skin, as you probably understood already. Don't forget to export the movie clip for ActionScript.

Export for ActionScript 1

Export for ActionScript 1

4. This is what we should obtain after editing all the skin elements.

Movieclips to be created

Movieclips to be created

5. Create a rectangle with the same colors and height as the previous one, only give it weight W=100.0. Convert it to a movie clip (don't forget to export it for ActionScript) and name it “main_button_up_blueSkin”.

6. Let's speed up a bit the process. You need another movie clip named “main_button_over_blueSkin” with the same settings as the previous one, just a different color: #0000FF. As well create two more rectangles with the following properties: “sub_button_up_blueSkin” - W=130.0, H=30.0, color=#FF6600 and “sub_button_over_blueSkin” - W=130.0, H=30.0, color=#FF0000. Don't forget to export them for ActionScript when you convert the rectangles to movie clips.

7. Now the only thing that we have to create is the area in the back of the sub-menu. Create a rectangle with the following properties: W=130.0, H=120.0 and color=#010101. The only trick is that we'll set the alpha parameter to 0%, so full transparency. Convert it to a movie clip and name it “sub_back_blueSkin”.

Color picker

Color picker

8. Let's create an additional graphic element for our menu, the separator between main buttons. Draw a vertical line long of 32 pixels and thick of 2 and apply the following change on it: Modify>Shape>Convert Lines to Fills. Afterwards, convert it to a movie clip named “main_separator_blueSkin” and export it for ActionScript.

Convert lines to fills

Convert lines to fills

9. Next I'll insert a screen-shot with all the elements you should have in your library, just to check if everything went fine. If its correct, move further, if not you have to read again to see what you skipped.

Required movieclips

Required movieclips

10. Now let's move on to the next step. From Components panel drag an instance of Creative Tabbed Menu on the stage and place it at (0,0) coordinates. After resize it so that it covers all the scene horizontally but no more than that.

Insert menu on stage

Insert menu on stage

11. Open the Component Inspector and make the following modifications to the General panel:

General tab configuration

General tab configuration

Define the menu structure

Define the menu structure

12. Apply the following changes to the text tab:

Text tab configuration

Text tab configuration

13. The next step is to preview your menu. Press CTRL+Enter to do it; you should see something like this:

Preview your file

Preview your file

Thank you for your time and I hope this tutorial was useful to you. I invite you to read the rest of our tutorials and check out our other products on www.extendstudio.com. If you have any questions please contact us at support@extendstudio.com.