Flash tabs menu |
| Written by AnaS | |
|
Following the steps of this tutorial you would obtain the below Flash tabs menu: 1. Create a new Adobe Flash document having dimensions 500x150. Choose Modify >> Document (Ctrl+J) or go to the Properties panel and change Frame rate to 50 fps. 2. Create 5 new layers. Rename layers from top to bottom: actions, button5, button4, button3, button2, button1.
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.
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.
11. Now go to the frame 50 of the mask layer >> right-click and choose Insert Frame (F5).
on (rollOver) {
15. Great! Now go to the first frame of the actions layer and open the Actions panel (F9). Put the next ActionScript code in: 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) { 20. Now go in the first frame of the actions layer and add the next ActionScript code:
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.
You need to Register in order to download the FLA file.
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 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 humam , June 23, 2008
i have a problem in draging when am draging a movie clip it not interact with the bottom movie clip so mouseover is not working (since the mouse button is already clicked) how can i make the drag(while holding the mouse button clicked) interactive with the bottom layer
written by north cyprus holidays , October 04, 2008
The writings , explanations and pictures are so usuful that i will keep in my mind and they are really interesting so thank you because of your hard work of your web page.I enjoyed too much and i will wait for next new writings of you.
written by en güzel oyunlar , October 23, 2008
This article clear things up for me. Thanks for showing us the truth about this case. I have been wondering about such things back then. Thank you for posting the artic
written by chuck , November 12, 2008
Hi I have the following script working fine: on(rollOver){ cube.nextFrame(); } I would like to have something like this but I dont know how to do it: on(mouseOver){ cube.nextFrame(); } BTW: I dont want to use any EnterFrame and _xmouse stuff for this. Can it be done?
written by kei , November 19, 2008
This is really a great tutorial, thank you very much!
written by Martin Cheung , November 22, 2008
i have problem they shown"current selection cant have action applied to it " when i press F9 for adding code how can i solve it
written by Kei , December 03, 2008
hello Martin, I think I had the same problem before. I am not sure about the reason, but it is solved if you use Actionscript 2.0 (you can select when you start a new file) Hope this can help.
written by sava? oyunlar? , December 20, 2008
? have followed your writing for a long time.really you have given very successful information. In spite of my english trouale,I am trying to read and understand your writing. And ? am following frequently.I hope that you will be with us together with much more scharings. I hope that your success will go on.
written by radyo çhat , December 25, 2008
The writings , explanations and pictures are so usuful that i will keep in my mind and they are really interesting so thank you because of your hard work of your web page.I enjoyed too much and i will wait for next new writings of you.
written by North Cyprus Holiday , December 26, 2008
I like very much the writings and pictures and explanations in your adress so I look forward to see your next writings. I congratulate you.
written by North Cyprus Holiday , January 10, 2009
I read your article.The things you have written sound very sincere and nice topics i am looking forward to its continuation.
written by Brain Cancer , January 30, 2009
The informations are so lovely and so usefull so thank you very much. Be sure i will use all of them keeping in my mind.Have a goog luck.
written by Oyun , February 03, 2009
Go to the Properties panel and gve it ans instance name of invb2_btn. Also set x: 109, Y:40
written by ee , April 05, 2009
great tut, but how can we use this template in dreamweaver 8?
written by radyo dinle , April 21, 2009
The informations are so lovely and so usefull so thank you very much. Be sure i will use all of them keeping in my mind.Have a goog luck. Do you need more help? Ask now!
|
|
| Last Updated ( Friday, 28 March 2008 ) |
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.
