Sliding Roll Over Menu

Flash Game Design

Tutorials

Articles

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

Flash website	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)

Next go to Sliding Rollover Menu - Part 2)

Part: 1 | 2