Adding Actions to Menu Items

When a menu item has been clicked you may want to perform an action, for example when somebody clicks on a menu item called 'Products' you may want to load a movie called 'products.swf', or similarly you may want to open a webpage called 'products.html'. This is quite simple to do.

Select an instance of the zoomMenu component on the stage. Open the Component Inspector (Window > Development Panels > Component Inspector).

Ensure the Parameters tab is selected and then click the Configuration button.

You will see a list of settings that allow you to customize the zoomMenu component.

The two settings we are interested in are the fields 'Zoom Finished Function' and 'Click Function'.

These two fields allow you to enter the name of an actionscript function that the zoomMenu component should call when specific events occur.

The Zoom Finished Function that you specify is called whenever a menu item has finished zooming in or out.

The Click Function that you specify is called whenever a menu item is clicked on.

The function's that you specify must be defined inside of your Flash Movie on the same timeline as the component.

Calling a function when an item is clicked

For the sake of this example, let's say we have a menu that contains four menu items:

• Products
• Services
• About
• Contact

When any of these menu items is clicked we want to load an external flash movie:

• Products loads products.swf
• Services loads services.swf
• About load about.swf
• Contact loads contact.swf

To do this we need to create an actionscript function which will be called when a menu item is clicked.

Select an instance of the zoomMenu component on the stage. Open the Component Inspector (Window > Development Panels > Component Inspector)

Ensure the Parameters tab is selected and then click the Configuration button.

Enter the name of an actionscript function that you want the component to call whenever a menu item is clicked on into the 'Click Function' field.

For the sake of this example enter 'itemClicked' into the 'Click Function' field.

Now select the frame on which the component resides in the timeline and open the Actions panel. (Window > Development Panels > Actions)

Add the following code to the Actions panel, note that the name of the function we are creating in actionscript is the same as the name we entered in the 'Click Function' field:

function itemClicked(label)
{
	holderMovieclip.loadMovie(label.toLowerCase()+".swf")
}

This actionscript function takes one argument, this argument is a string called label, which is the label of the menu item which was clicked. This is passed automatically to the function by the component.

When this function is called by the component it uses the loadMovie() actionscript method to load the correct Flash Movie into a movieclip with an instance name of 'holderMovieclip'.

Now test your movie and see if it works (Control > Test Movie)

Calling a function when an item finishes zooming

For the sake of this example, lets say we have a menu that contains four menu items:

• Products
• Services
• About
• Contact

When any of these menu items has finished zooming we want to open a webpage in a separate HTML frame:

• Products opens products.html
• Services opens services.html
• About opens about.html
• Contact opens contact.html

To do this we need to create an actionscript function which will be called when a menu item has finished zooming.

Select an instance of the zoomMenu component on the stage. Open the Component Inspector (Window > Development Panels > Component Inspector)

Ensure the Parameters tab is selected and then click the Configuration button.

Enter the name of an actionscript function that you want the component to call whenever a menu item finishes zooming into the 'Zoom Finished Function' field.

For the sake of this example enter 'zoomFinished' into the 'Zoom Finished Function' field.

Now select the frame on which the component resides in the timeline and open the Actions panel. (Window > Development Panels > Actions)

Add the following code to the Actions panel, note that the name of the function we are creating in actionscript is the same as the name we entered in the 'Zoom Finished Function' field:

function zoomFinished(label)
{
	getURL(label.toLowerCase()+".html","_sideFrame");
}

This actionscript function takes one argument, this argument is a string called label, which is the label of the menu item which was clicked. This is passed automatically to the function by the component.

When this function is called by the component it uses the getURL() actionscript function to open the correct webpage into an html frame called "_sideFrame".

Now test your movie to see if it works correctly(Control > Test Movie)