Flash tabs menu

In this tutorial it will be shown step by step how can be developed an awesome flash menu with tabs. We will use MovieClips, masks, invisible buttons and some ActionScript.

Following the steps of this tutorial you would obtain the below Flash tabs menu:

2. Create 5 new layers. Rename layers from top to bottom: actions, button5, button4, button3, button2, button1.

3. Now go to the first frame of button1 layer. Save the image below on your disk. Select File >> Import >> Import to Stage (Ctrl+R) and select the image below.

4. Select the image you just inserted. Go to Properties panel and be sure that it has W: 89, and H: 56. Now go to Modify >> Convert to Symbol (F8) to convert the image in a MovieClip. In the window that appears choose MovieClip as type and choose center for Registration point. Give it also a name of button1MC.

5. Select the MovieClip you just created, go in the Properties panel and give it an instance name on button1_mc. Set also X: 20, Y: 40. Now double-click it or right-click and choose Edit in Place to start edit it.

6. We are now in Edit mode for button1MC (see picture below). Insert two new layers. Rename the bottom layer tab, the middle one name it mask and the top layer text.

7. In the text layer create a text field using the Text Tool (T) and write Home. In the Properties panel set the following properties: Text Type: Static Text, font:Verdana, size 15, bold. Align the text to the center of the MovieClip. Go to the frame 50 of the text layer and press F5 to insert frames from 1 to 50.

8. In the tab layer select the first frame (make a click on it) and go to the Properties panel. Choose Tween: Motion.

9. Go to frame 50 >> right-click and choose Insert Keyframe (F6). Now select the tab Bitmap here, go to the Properties panel and set Y: -40.

10. Now go to the first frame of the mask layer. Using the Rectangle Tool (R) draw a rectangle with no stroke. Select the rectangle and in the Properties panel set W: 89, H: 56. Set also x:-44.5, Y: -40.

11. Now go to the frame 50 of the mask layer >> right-click and choose Insert Frame (F5).

12. Good job! Now go to mask layer >> right click and choose Mask ( see next picture).

13. Choose Scene 1 to go back to the main movie. Now create a invisible button with dimensions W: 89, H: 44. Name the symbol invb. Go to the Properties panel and give it an instance name of invb1_btn. Also set x: 20 and Y: 40. For found out how to create an invisible button go to the tutorial Creating an invisible button in Flash.

14. Select the invisible button and open the Actions panel (F9). Put this ActionScript code in:

on (rollOver) {
_root.over_button1 = true;
_root.button1_mc.nextFrame();
}
on (rollOut) {
_root.over_button1 = elsevalue;
_root.button1_mc.prevFrame();
}

15. Great! Now go to the first frame of the actions layer and open the Actions panel (F9). Put the next ActionScript code in:

_root.button1_mc.onEnterFrame = function() {
if (over_button1) {
_root.button1_mc.nextFrame();
} else {
_root.button1_mc.prevFrame();
}
};

16. Good job! We have now our first tab. Go to the Library (Window >> Library or Ctrl+L), click the button1MC and then right-click and choose Duplicate. In Duplicate Symbol window that appear chage name to button2MC and then OK.

17. Go to the first frame of the button2 layer. Drag button2MC on the stage. Go to the Properties panel and give it instance name of button2_mc, set x: 109, Y:40. Double click the button2_mc or right-click >> Edit in Place to edit it. Go to the first frame of the text layer and change the text to About us. Click Scene 1 to go back to the main movie.

18. Drag also from the Library an instance of invb. Go to the Properties panel and gve it ans instance name of invb2_btn. Also set x: 109, Y:40.

19. While invb2_btn is selected open the Actions panel (F9) and put the following ActionScript code:

on (rollOver) {
_root.over_button2 = true;
_root.button2_mc.nextFrame();
}
on (rollOut) {
_root.over_button2 = elsevalue;
_root.button2_mc.prevFrame();
}

20. Now go in the first frame of the actions layer and add the next ActionScript code:

_root.button2_mc.onEnterFrame = function() {
if (over_button2) {
_root.button2_mc.nextFrame();
} else {
_root.button2_mc.prevFrame();
}
};

21. Great! now repeat steps 16 to 20 to create three new tabs like in my example. Of course give them different names and instance names and make sure you use the proper names in the ActionScript code too. Also for all tabs and invisible buttons set Y:40 and X: 89+the X of the one from the left.

22. Your stage should look like image below. Now we will add a rectagle to complete the menu. Using the Rectangle Tool (R) draw a rectangle with no Stroke and Fill color #00CCFF. In the Properties panel set W: 445, H: 10, X: 20, Y: 84.

23. Now test the movie and enjoy your Flash rounded tabs menu. I hope this tutorial improved your Flash knowledge.

Download Flash tabs menu FLA

Subscribe now via RSS feed and get all the new tutorials

written by Eric Kim , November 03, 2007

i need some help here, after i typed in the code i get this error when testing my menu
"1087: Syntax error: extra characters found after end of program."

i put the correct action script code in, but got that error. Any help?

written by Bobby Faruqi , November 06, 2007

Here i my version in AS3. Works well with 3 lines.
Also note here that I have no invb button.
This is the script for 1 button.


button1mc.addEventListener(MouseEvent.MOUSE_OVER ,bobbymoveit);
function bobbymoveit(e:MouseEvent):void{
mybtn.play();
}

written by Dx , January 18, 2008

I have a flash for my we page, this flash not make i. This flash have two menu, then i put this flash en .net (xml). Then a need select each one options the menu for open other windows.

My problem is that donīt known access a each option the menu of flash from to .Net

written by aryotalk , February 21, 2008

Good Tutorial
and for hidden menu i give getURL, so this menu have two function :)

on (rollOver) {
_root.over_button2 = true;
_root.button2_mc.nextFrame();
}
on (rollOut) {
_root.over_button2 = elsevalue;
_root.button2_mc.prevFrame();
}

on (press) {
getURL("http://www.tutorial5.com/", "_blank");
}

thanks guys

written by oyun , March 04, 2008

thanks

written by Tony jacob , March 20, 2008

how do i actually create an invisible button on a movie clip text?

written by puffin_d_herb , March 20, 2008

this seems to work fine when the size of my image is 89 by 56 how ever when i try to use a smaller image but use the same coordinates for movment i do not get the same effect?

i have even tried moving the mask about but this does not achieve the effect either, can anyone help?

written by puffin_d_herb , March 20, 2008

tony i would say come out of the movie clip and create the button within the scene, place it over the text and resize it to fit around the text?

written by Oyun , April 09, 2008

thank u

Do you need more help? Ask now!

Comment
Name
Email
Website
	Add Comment

Trackback(0)

Comments (9)