Scrolling Web Menu

2 posts Page 1 of 1
Contributors
User avatar
hungryhounduk
VIP - Site Partner
VIP - Site Partner
Posts: 2870
Joined: Mon Jul 27, 2009 11:58 am

Scrolling Web Menu
hungryhounduk
Hi All

Image

Here is another Tutorial.......... a Looping Scrolling Web Menu

This is a really easy Menu to do and i have done lots of these over the years and this one i did in about 15 minutes just to show you what its like and how to do it. cooll;

*The Pic above is a Screenshot of the Menu in action, and i just added it to a Blank HTML page in DreaMweaverMX.
It has Buttons on it and they all point to "Codenstuff" justo show you it all working, But you can add your own Web URL's to it too go anywhere you like cooll;

Right Lets get Flashing wahooo;

1. Start Flash and create a New Document

2. Mine is 550 x 200 Pixels

3. With the RECTANGLE TOOL create a RECTANGLE that is the Width of your Flash Blank Document (550 Pixels ) and 200 Pixels in Height

4. Make a New Layer above the RECTANGLE layer and Draw a Rectangle like you see on my pic above ( this will be for your Buttons )

5. When you have done that select the Rectangle and press F8 and in the Dialog that appears select >Button and click OK.

6. Delete the Button ( the one on the Stage you just created, its in the Library and deleting the one on the Stage will not effect the one in the Library )

7. Drag 4 Instances of the Button out of the Libray and place on the Rectangle ( on the Button Layer ) Space them out so that they all fit central to each other and in line )

8. Create a NEW Layer and with the Text Tool Create some text like mine above ( to say whatever you want, maybe links to your website or other website links, when you have done that, COPY and PASTE the TEXT..* you could add Small Pictures instead of Text if you dont want Text, its up to you cooll; 3 Times more so that you have 4 lots of Text.

9. Position the Text on top of your Buttons (on the TEXT Layer ) and center the Text on all Buttons

10. Select all the Text ( all 4 ) and go to MODIFY >BREAK APART from the Main Flash Menu ( if you dont Break all the Text Apart, then when your Mouse goes over the Button when its Finished it wont work Properly )

*You Should have 3 Layers in the FLASH Timeline (1) with the Big Rectangle (1) with the 4 Buttons and (1) with the TEXT (Broken Apart )..

***The Next part is very IMPORTANT and if you dont do this right IT WONT WORK......

11. Click OFF the Stage and DRAG your Mouse over the Whole STAGE AREA so that you select everything on the STAGE (ALL OF THE (3) LAYERS should be Selected as you SELECT EVERYTHING)

12. Press F8 and CHOOSE >MOVIE CLIP from the DIALOG that appears and call it "menu" ( **MAKE SURE YOUR REGISTRATION POINT IS IN THE LEFT HAND SIDE LIKE THE PIC BELOW ) ( **It wont work if its not )
* IF ITS NOT IN THE LEFT HAND SIDE LIKE BELOW, THEN CLICK ON THE LEFT HAND SIDE TO SELECT IT

Image

13. When you have done that Click OK

14. NEXT Click once on the MENU MOVIE CLIP you have just created ( in the LIBRARY ) AND RIGHT CLICK AND Choose > COPY fron the MENU

15. GOTO > FILE > NEW and Create a NEW Flash Document the same size as your last one ( 550 x 200 Pixels )

16. WITH THE LIBRARY OPEN > RIGHT CLICK IN THE LIBRARY AND > Choose > PASTE, You are pasting your "Menu" you created in the other document into the NEW DOCUMENTS LIBRARY.

17. Next Drag a Copy of the MENU MOVIE CLIP from the library and position it at '0' on the 'X' Position in the Properties, THEN DRAG another Copy of the MENU MOVIE CLIP out of the LIBRARY and Position it at 550 on the 'X' Position in the Properties ( Like the Pic Below )
Image

18. Like before DRAG over the 2 Movie Clips onstage to select them BOTH and PRESS F8

19. CHOOSE > MOVIE CLIP from the Dialog and give the NEW MOVIE CLIP the name of "menu_general" ( this turns the 2 movie clips into (1) MOVIE CLIP )

* Now we have to make our Movie Clip move accordingly to the position of the Mouse: When you go LEFT the MENU goes LEFT and the Same on the RIGHT.

20. Click on the Movie clip to select it, And PRESS F9 to open the ACTION Panel

and paste the code below into the Actions Panel
Code: Select all
onClipEvent (load)
{
	xcenter=275;
	speed=1/10;
}
onClipEvent (enterFrame)
{
	var distance=_root._xmouse-xcenter;
	_x+=(distance*speed);
	if (_x > 0) _x=-550;
	if (_x < -550) _x=0;
}
**Explanation of the Code

XCenter is the Center point of the Animation, If the Mouse is on the Left of this then it will go Left and the same on the Right. In the EnterFrame we first calculate the distance between the Mouse and the Centerpoint, and then we move the Clip depending on this distance. This is why SPEED <1. Otherwise the Clip would jump all around.

21. save the Flash Document and TEST your Movie

22. Next we Create a MASK so you only see a small part of the it.

23. Create a NEW Layer in your main Timeline and DRAW A RECTANGLE SQUARE on it ( like the Pic Below )

Image

24. Then Right Click on the Layer and CHOOSE > MASK from the Menu

JOB DONE wahooo; wahooo;

TEST YOUR MOVIE

** I forgot to tell you how to add the "URLs"

Image

WHEN YOU CREATE YOUR BUTTONS AND YOU HAVE DRAGGED (4) OF THEM ONTO THE RECTANGLE as we did earlier
SELECT each button and Press F9 to Open the ACTIONS Panel, And Paste this code into EACH Button.
Code: Select all
on (release) {
	getURL("http://www.codenstuff.com", "_blank");
}

*Which tells Flash ON Release of the Button goto Codenstuff.com, and load into a NEW BLANK Page.. Or add your own URLs cooll;

I HAVE INCLUDED BELOW the Flash File which is on a HTML Docunment, so all you have to do is open it and run the HTML, The Flash Project file is included as well.... cooll;

I hope you enjoy this, this is just a simple example which can be modified with Pictures and any buttons that you like, even buttons from Fireworks/Photoshop or whatever........Enjoy

Chris
Image
User avatar
Twiffler
Member
Member
Posts: 46
Joined: Wed Sep 22, 2010 10:50 pm

Re: Scrolling Web Menu
Twiffler
This is Great, I like it a lot... gives me ideas thanks :D
2 posts Page 1 of 1
Return to “Tutorials”