How to Make a Multifaceted Flash Menu with Dynamic Contents, Tip and Information (with screenshots)

This will be the most interactive and remarkable lesson on flash menu, that you have ever learnt.

We are going to make a flash menu that will show tips, dynamic interface and user friendly.

Click here to view what we are going to make.


Setting Up Your Document

Create a new flash document and give it the following properties.

Width-500px

Height-200px

Background colour- #0066CC

Fps-12

Then click ok.

Now insert three more extra layers on top of the layer 1. and rename them from top to button as follows “actions” “text” “tips” “buttons”.

Click on the buttons layer.

Double click on the rectangle tool (R)
and a popup window will appear showing corner radius – type in 10 and click ok.

On the property bar set the stroke strokeless and the fill colour -#00CCFF.

Draw a simple rectangle on the stage but don’t worry about the size we will change it.

After you have drawn you rectangle select it and give it the following properties.

Width-102.3

Height-15.2

x—51.1

y- -7.5.

Double click on your rectangle and press F8 to convert it to a symbol.

Set the registration point center, choose the Button option and click ok.

Now you have finish making your button.

Double click on your newly created button and you will see this on the timeline panel.

(Note: don’t worry about the over, yours is not going to be the same as shown in the screenshot).

Click on the over frame and press F6 to insert a new keyframe on that layer.

Now use the zoom tool to zoom into your button on the over frame. Click on your rectangle and convert it to a movie clip, give it any name and click ok.

Select your movie clip and on the property bar > colour > choose Alpha and type in 30% inside the alpha textbox.

Now it will look similar to this..

(Be sure you are saving your work to avoid interruption)

After you have finish setting the movie clip’s alpha still on the over layer. Double click on the rectangle tool and set the corner radius to 0. click ok to return to your stage.

Take the rectangle tool and draw a simple rectangle like this

After you have finish drawing you rectangle click on the Selection Tool (V) and drag the nodes of your rectangle to turn into something like this.

Finally this

Now double click on your rectangle that you have transform into a sliced triangle and convert it to a movie clip symbol.

Click and drag it to this position.

Remember that we are still on the over frame. This all this we are doing is what is going to take place when someone takes the mouse over the menu.

Double click on your sliced rectangle that we transformed. Then inside your sliced rectangle movie clip, click on Frame 3 and press F6 to insert a keyframe in frame in frame 3.

Now select your sliced rectangle and on the property bar change the colour to red. #FF0000

Now click on Scene 1 to return to the main Scene.

Click on your menu and make to more duplicates like shown in the Screen Shot above. Button change their instances names beginning from the first

“home_btn” “tutorials_btn” and “support_btn”

Make sure you change the other two “Tutorials” and “Support”

Now click on the text layer and take the text tool (A) then on the property bar select Static text then click on the stage and type “Home” take the selection tool and click once on your text and give it the following properties.

Then drag it and place it in this position.

Click on the “Home” text and duplicate two more but changing the “home” to “tutorials” and then “support”. Finally this is what we should have.

Good we are now going to proceed to making the tips holder.

Making the Tips

Click on the tips layer and draw a small rectangle with the following properties.

Width- 189.6

Height- 17.6

x- -94.0

y-54.4

Background colour- #FFFF00 (or you can use the colour mixer to mix your colour) Make it strokeless.

7

Double click on your rectangle and Press F8 to convert it to a movie clip symbol and name it Mover. Then click ok.

Now double click on your movie clip (this takes you inside the tips movie clip) rename the current layer to “MYTIPS” then select your movie clip again and convert it to a movie clip. Double click on it, then right click on frame 50 and Choose Insert Keyframe. Click on frame 50 and on the property bar choose motion.

Then go back to your movie clip, click it and on the property bar colour choose > colour, select alpha then type in 30% on the alpha textbox.

Right click any where on frame 2 to Frame 49 and Choose Create Motion Tween.

Click on frame 50 of you tips and press F9 to bring up the actions panel. Type in

Stop();

This is how your frame will look like.

Click on the mover to go back to the MyTIPS layer. Insert three more layers after the first frame of the mover Movie Clip.

See this image

Now return to the first frame and delete what you have on the stage.

Click on the second layer and on the property bar type in the frame label
”home”. Click on the 3rd frame and on the property bar type in “tutorials” on the frame label. Finally click on the 4th frame and type in “support” on the frame labels.

We are done with the necessary procedure its time to name our tips.

Naming the Tips

Still on the Mover Movie Clip, Click on Frame 2 of the Mover Movie Clip and take the text and make a static text with like this

Welcome to Otodeluxe World

That was for the Frame Label – Home

Click on the 3rd Frame and take the static text and type in

You can find in stock exotic flash tutorials

That was for the Frame Label – Tutorials

Finally click on the 4th Frame and take the static text and type in

That was for the Frame Label – Support.

Go back to frame one of the mover movie clip and press F9 to bring up the actions panel of Frame 1 of the mover movie clips.

Type in

stop();

Congratulations we are done with the Tips what is remaining now is coding.

Go back to the Main stage, that’s scene 1 and click on the actions layer then press F9 to bring up the actions panel.

Finally type in these piece of codes inside the actions panel.

//Actions

import mx.transitions.Tween;

import mx.transitions.easing.*;

var cities:Array = ["home", "tutorials", "support"]

function mover (targetX, targetY){

currentX = tips_mc._x;

currentY = tips_mc._y;

var xTween:Tween = new Tween(tips_mc, "_x", Strong.easeOut, currentX, targetX, .5, true);

var yTween:Tween = new Tween(tips_mc, "_y", Back.easeOut, currentY, targetY, 1.5, true);

}

for (var i = 0; i

var my_btn = this[cities[i]+"_btn"];

my_btn.myCity = cities[i];

my_btn.onRollOver = function() {

mover( this._x, this._y);

tips_mc.gotoAndStop(this.myCity);

}

}

Now press Ctrl Enter to test your movie.

Note: You can add gotoAndStop functions or other navigation to your menus.

Thank you for following this tutorial. If in any case you might have encountered any error please feel free to post your comments and questions. Thank you!!!

You can download the Full Fla File here.