Creating vertical Flash menu

Introduction

In this tutorial we will learn how to create and adjust a Flash menu with Flash Menu Labs (FML) Open Source Edition.
We will:

• 1) set our labels and URLs in XML file
• 2) adjust menu behavior setting parameters in XML file
• 3) set our graphics and animation in fla-file

First thing we need to do is to download last version of the project at Open Source Edition page.
Go to the end of the page and download zip-archive of source files. After unpacking the files we start swf-file and ensure that it works.

Menu items appears and disappears smoothly, there is even some simple animation on mouseover (color transition from red to dark red).

Setting our labels and URLs

For example, we want to set a very simple menu structure like:

• Home home.htm
• Products prod.htm
  • Product 1 prod1.htm
  • Product 2 prod2.htm
  • Product 3 prod3.htm
• Links links.htm

To set it we open menu.xml file with notepad and go to the <menu_structure> tag ( press Ctrl+F and write "structure").

What we see there? Huge amount of lines. We need to remove all lines between <menu_structure> and </menu_structure> tags and write our code there. To create a Home menu item we write:

<item text = "Home" url = "home.htm" url_self = "1" />

I think that text and url attributes need no comments. We set url_self =1 to open link in a self window, and url_self =0 to open in a new one.

To create a sub items we write these lines:

<item text = " Products " url = " prod.htm" url_self = "1" >
	<item text = " Product 1" url = " prod1.htm " url_self = "0" />
	<item text = " Product 2" url = " prod2.htm " url_self = "0" />
	<item text = " Product 3" url = " prod3.htm " url_self = "0" />
</item> 
				

Finally we have such a structure:

<menu_structure>
<item>
	<item text = "Home" url = "home.htm" url_self = "1" />
    	<item text = " Products " url = " prod.htm" url_self = "1" />
   	<item text = " Product 1" url = " prod1.htm " url_self = "0" />
    	<item text = " Product 2" url = " prod2.htm " url_self = "0" />
   	<item text = " Product 3" url = " prod3.htm " url_self = "0" />
</item>
<item text = "Links" url = "links.htm" url_self = "1" />
</item>
</menu_structure>
	

Save menu.xml and launch swf file.

Adjusting menu behavior

Ok, let's play with behavior parameters.
Let's set "from sides" effect when sub items appear and simple fade out when disappear in menu.xml file:
enable_soft_wave_when_appear = "0"
appear_effect_pos_type = "2" comment = " Position Effect when appearing; 0 - no pos effect; 1 - from random pos; 2 - from sides"
disappear_effect_pos_type = "0" comment = " Position Effect when disappearing"

Save menu.xml and launch swf-file. It works :)

Now we want to disable smooth moving. In menu.xml we just set
is_physic_enabled = "0"

Save menu.xml and launch swf file. It works again :)
Ok, we can read the comments and play with other parameters for a long time

Setting our graphics and animation in fla-file

To customize graphics we need to open fla-file in Flash editor. We see no clips at the main scene. This is because this menu is totally controlled by ActionScript and all graphics is in the library.
We open library (Ctrl+L) and edit templ_lev0_normal symbol.
This symbol is shown by root menu level in normal state.

We replace this graphics with our animation. As normal state starts after mouseover state is over then this animation will play when mouse will leave this menu item.

Then we replace content of templ_lev0_mouseover and templ_lev0_selected templates.
For this time we don't alter templates for sub levels. Just let them as they are.
It should be noticed that all template clips should have same width and height. It is necessary because menu code calculate proper scale coefficient and then multiply all clips sizes by this coefficient.