Horizontal cursor controlled scrolling navigation

Horizontal cursor controlled scrolling navigation

Introduction

This tutorial will walk you through the development of a cursor controlled scrolling navigation menu. This tutorial assumes prior knowledge of flash basics like movieclips, buttons, frame actions, key frames, tweening etc. Since I know you have all that knowledge stored away somewhere we'll get started by taking a look at what you will be creating.

Step 1: Create the scrolling movieclip.

The first thing we need to do is make the movieclip that contains the buttons we will be scrolling. Once you get this looking good it is all down hill from here on. In your movieclip make two layers; in the first frame of the lowest layer add all the text or images that you want to use as buttons. Put all your text/images in a nice straight line so they will look smooth when moving. Your movieclip should look similar to the following if you are using images.

When your future buttons are positioned where you like them select each image and press F8, select button from the menu and press ok. Do this for all your images. After you have all your buttons made select them all and press ctrl G to group them. Make a copy of that group and paste it in frame one with the original. Line that copy up so that it starts at the end of the furtherest right button. You should now have one long row of buttons that repeat, like below.

Now group both of those together so that you have one big line of repeating buttons. Skip down 60 frames in the same layer and place a copy of frame one. Right click on frame one, select motion tween. Move the group of buttons in frame 60 to the left to achieve the scrolling effect. It may take some trail and error to get this to work smoothly. After you have made that tween copy all the frames from 1 to 60 (including the tween) and paste that starting at frame 60 of the top layer. Your layers should now look close to the below.



Step 2: Get a cup of coffee.

Step one was the hardest part, so why not relax a little.

Step 3: Add the actionscript.

When you are finished with the all-important step 2 we will add the actionscript. In frame one of the bottom layer and frame 120 (the last frame) of the top layer add

gotoAndPlay

These frame actions will make your buttons loop continuously. The last bit of actionscript makes the magic happen. Take your movieclip and drop it on the main time line of your movie. Give your movieclip the instance name of 'scrollclip'.

Right click on your scrollclip, select actions and paste this code

onClipEvent (mouseMove)

if (xmousepos1-98 && ymousepos1<-33)

if (ymousepos1<-98 || ymousepos1>-33)

xmousepos2 = _xmouse;

ymousepos2 = _ymouse;

You are now most of the way finished. The only thing left for you to do is alter the numbers -98 and -33. These numbers tell the movieclip to start playing when the mouse is above or below the moveiclip. The values you use for these numbers will depend on both the size and position of your movieclip. I would just take one and change it until it worked the way you wanted and then move to the second one, starting from 0. That is about all there is to it. I would recommend you download the .fla file and take a look at it if you are having any trouble. If all else fails you can just change the buttons in my file and use it.