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.
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? Do you need more help? Ask now!
|
|
| Last Updated ( Friday, 28 March 2008 ) |