Getting Started Tutorial

In this tutorial we're going to configure Creative FL Vertical Menu by configuring each tab step by step. We will go through:

- the General tab;
- the Layout tab;
- the Animation tab;
- the Text tab.

We will obtain a „.swf” file that will contain our dropdown menu; I'm going to show you how the menu looks like after we configure all the parameters. In order to get a glimpse of the menu's high customizability, I recommend you to preview your menu after the configuration of each tab. In order to be able to do this tutorial, the first thing you have to do is install Creative FL Vertical Menu extension on your computer; if you encounter any problems doing that, check out the "How to install an extension" tutorial.

Configure the General tab

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")

2. Drag an instance of Creative Vertical Menu on the stage. Place it at (10,10) coordinates.

3. Select the menu you just dragged on the stage and open the Component Inspector.

4. Let's take a look at the General tab.

5. Firstly follow the link – “Click here to edit the menu structure visually”. There is another option for the menu structure as well (using XMLs), but we'll do that in another tutorial. Insert a structure similar to the one you see in the following picture:

I chose to link only the first button to a web page, for simplicity. As you probably realized, a sub-menu item has in front the “>” character.

6. Now let's open the preview mode; this is a very helpful option which allows you to test your menu without publishing after every change – you just use the update button. You should see something like this:

Change the width to 140 pixels and the height to 200 pixels.

7. Let's choose the skin next. I would like to go with “Art Dream” for now (don't forget to copy the skin directory in your own library, as prompted when choosing the skin). As you saw you can choose your own colors, and the check-boxes will uncheck themselves. To return to the original setting, click on the check-box. I will use default colors for this tutorial.

Configure the Layout tab

9. Let's now configure this tab. If you didn't notice, there is an instant help which appears in the bottom of the window if you go over the different options on the menu; I recommend you to read them and them play with the parameters and apply whatever changes you would like. Next you can see the changes I applied:

Configure the Animations tab

10. In the Component Inspector panel and select the Animations tab. Using the instant help, read about the properties from here and what they do. I modified the options in the following way:

Configure the Text tab

11. In the Component Inspector, the Text tab, make the following changes:

12. In order for the text to be visible, we need to create it in the Library and export it for ActionScript. Right-click in the Library panel and select “New Font”; choose “Comic Sans MS” of 10 without any parameters selected.

13. Right click on your newly created font and select Linkage. Tick the “Export for ActionScript” checkbox and use the same name.

14. Let's take a final look at our menu now:

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.