Getting Started Tutorial

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

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

Finally, we'll obtain an „.swf” file which will contain our result – a dropdown menu. I'm going to show you how the menu looks like after every step and as well a final version of it; like this, you'll get a glimpse of the menu's high customizability. In order to be able to do this tutorial, the first thing you have to do is install the Creative FL Drop Down 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 FL Drop Down Menu on the stage. Place it at (15,0) 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 - "How to use wih XML". 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, while the sub-menu of a sub-menu, “>>”, and so on.

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 645 pixels and the height to 77 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.

8. The advanced skin options button is connected to the creation of custom skins, which I'll present later in a full tutorial. Preview your menu now, it should look like this:

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.