Dynamic Flash Menu

Flash Game Design

			Tutorials		Articles

This Flash tutorial will show you how to create a menu, with some advanced script.

Level: Intermediate Version: MX 2004+

Funky Flash Site	Shooting Bullets	Jagged Transition	Circular Slideshow


Falling Star Text	Basic Flash Site	Rotatin Gallery	Drop Down Menu

Step 1.

This tutorial will show you how you can add the same functionality to multiple menu buttons, without having to write a function or onClipEvent for each button. You might find it gets tedious writing the same code with a minor difference for each button! :) Feel free to create a larger area for the content, but since this tutorial will be focusing on creating the menu, I've kept the content area small.

For this tutorial I've create 6 layers, as you can see in image a). Image b) shows the menu background, which I've placed on the "menu bg" layer. There's no need to make it a symbol, although you may want to lock the layer.

a )		b)

Step 2.

Next, I've created a MC (Movie Clip :)), called "content_mc" on the "content" layer. In this MC I've created the rounded rectangles on layer 1 and some text for each section on layer 2, above. So on frame 1 there is the text "home".

a )		b)

Step 3.

On frame 2 there is the text "Portfolio".

a )		b)

Step 4.

Go back to the main timeline and give the content MC the instance name "content_mc", in the properties panel. Next create a grey rectangle on the "buttons" layer. Convert the rectangle into an Button symbol called "buttonA" and then double click on it. Create an keyframe (f6) on the over state.

a )		b)

Step 5.

Make the overstate rectangle a nice bright blue.

a )		b)

Step 6.

Create another Button symbol called ButtonB, with a slightly darker tone, but with the same bright blue "over" state. Create 3 of each button, nicely aligned, as in the image below. Give the top button the instance name "button1", the second, "button2" and so on down to "button6".

Step 7.

Next, create a blue rectangle MC, with the same dimensions as the buttons. Give this MC the instance name "current". This MC will slide to cover the last pressed button. Make sure that the "current" instance is at the same X co-ordainte as the buttons. Where you position it's Y co-ordinate will be where it starts when the menu is loaded, but it will move to cover the "home" button. Lastly, add text for each button on the text layer. Making sure that button1 text matches the text from frame 1 of the "sections" MC and the same for button2 and frame 2 and so on.

a )		b)

Step 8.

Now for the interesting part! :) The following code will go on the script layer. I'll explain each line below the code.

Code Explanation

Line 1 - The Content_MC needs to be told to stop, since it contains 5 frames.

Line 2 - A speed is set for the sliding "current" MC to move at.

Line 3 - An initial target position is set for the "current" MC to move to when the menu loads.

Line 4 - Rather that write each button function individually, a for loop is created to loop through each button and assign an onPress function to it. The "i" in the loop will start off at 1 and increment by 1 (i++), while i is below 7 (i<7). If we had 10 buttons we would set this to i<11.

Line 5 - Each button is refered to using this["button"+i]. The For loop increments "i", so each button will be referenced. On this line a page number (pageNum) property is assigned to each button, using "i". Button1 will be assigned the pageNum "1", button2 "2" and so on.

Line 6 - An onPress function is assigned to each button.

Line 7 - When the any of the buttons is pressed the target variable is to the position of the button (this._y).

Line 8 - Content_Mc is told to go to the page number that was stored, on line 5, in the pageNum property.

Line 11 - An onEnterFrame function is created which will execute any code inbetween the braces {} repedly, at the frame rate of the movie.

Line 12 - This is the code used to move the "current" MC to the "target" value, whenever a button is pressed.

Step 9.

And that brings us to the end of this tutorial! Download FLA