Overview

In the following tutorial I will show you, step by step,  how to create a simple tabbed menu using  Creative FL Tabbed Menu.


Step 1. insert a menu in page

To get started, we have to Drag and Drop the component on stage. The component can be found in the Component Panel under Extend Components folder. To open the Components Panel press CTRL+F7 or select Components from the Window Menu

Drag the Component on Stage

With the component selected on stage we have to start editing the menu by opening the Component Inspector.

The Component on Stage

To open the Components Inspector Panel press SHIFT+F7 or select Component Inspector from the Window Menu




Step 2. create the menu structure

Defining the menu structure is a very easy job (simple & intuitive) and can be done in two ways. One way is to click on the “Edit Menu Structure”which will open a panel where you can add as many menu items  as you want. The “>” is used to define a submenu item.
The second way is to define your menu structure using a XML File.

Edit Menu Structure Interface
Edit your menu from XML



Step 3. choose the skin and colors

Choose the skin  & set the colors from the General Tab

In the Menu Skin section you are asked to choose a skin from the drop-down list and define its style by changing the colors using the given color pickers. For both the menu and the submenu you can set a main color and a highlight color.

In this tutorial I will choose the Adobe Style menu and use the default colors and dimensions




Step 4. work in preview mode

I know how hard it can be to publish the movie every time you do a change. This Flash component will save you from doing these repeated tests by providing an integrated preview mode.

Preview Mode Button

By clicking on the preview mode button you will be able to work in an environment where you can instantly test every change made.

Working in  Preview Mode

Note: The menu will reflect the changes after you click the Update button

From this window you will be able to set the menu width & height, and play around with all given settings for Layout, Animations and Text. When you are pleased with the result click on the OK button and publish the Flash movie




Step 5. adding button actions

In order to add a link you just have to type the link after the button label separated by a comma. The target can be added after the link, separated by a comma. If you do not specify a link then the button will have no link. If you do not specify a target, "_self" will be used.


Home,http://www.extendstudio.com
Products,http://www.extendstudio.com/Products/ Contact,http://www.extendstudio.com/Contact/,_blank


Also, ActionScript functions can be attached to button. In order to add an AS function to a button you will have to add the function name instead of the link, preceded by “as:”. For example, the "Home" button will call the _root.openHome function and "Products" will call _root.openProducts:


Home,as:_root.openHome
Products,as:_root.openProducts



Step 6. finishing

Here is what we have accomplished: