The Infinite Scrolling Menu

Using inspiration from two Kirupa tutorials, “Create the Infinite Menu” and “Adding Thumbnails” I have decided to post a tutorial on how to create an infinite scrolling menu that pauses on rollover without the weird stuttering.


Steps to Creating the Infinite Scrolling Menu

1. Download the partial source first here.
2. Open the source provided. There is nothing on the stage yet, all of the assets are in the library. If your library is not already open, open it now (Ctrl + L).
3. You will see a movie clip named, menu. This movie clip contains the buttons and is where you can add your text, images, etc. notice that the registration point of this clip is on its left end, which is very important.
4. In order to make the clip look like it is continually scrolling/repeating on the stage you will need two instances of the menu movie clip.
5. Drag and drop the menu movie clip onto the stage. Position them with the Properties Panel, the first at X:0 / Y:100 and the second at X:800 / Y:100 (the clip is 800 pixels wide and the registration mark is 100 pixels from the top of the stage). Now select both clips, and hit F8 to turn them into 1 clip. Be sure to put the registration point of this new clip in the top left. Name this movie clip, scrolling_menu and give it an instance name of scrolling_mc.
   
   

   

6. To make the hit areas, create a new layer and call it, hit area, now drag the hit_area movie clip on to the stage twice. You will need to align one to the far left of the stage and another to the far right of the stage (not the movie clip). The hit_area movie clip that you placed on to the left of the stage should have an instance name of hit_left while the right should have an instance name of hit_right. Now that you have the hit areas on the stage you will want to make them invisible by setting their alpha to 0 (zero).
   
   
   
   
7. Now to make the menu scroll! Make a new layer and call it actions. Open the Actions panel (F9) and enter this code:
   
   
   this.createEmptyMovieClip(”scroller”, 1000);
   scroll_speed = 5;
   scroller.onEnterFrame = function() {
   if ((_root._ymouse>=scrolling_mc._y) && (_root._ymouse<=scrolling_mc._y+scrolling_mc._height)) {
   if ((_root._xmouse>=(hit_right._x-100)) && (scrolling_mc.hitTest(hit_right))) {
   scrolling_mc._x -= scroll_speed;
   } else if ((_root._xmouse<=(hit_left._x+100)) && (scrolling_mc.hitTest(hit_left))) {
   scrolling_mc._x += scroll_speed;
   }
   } else {
   delete scroller;
   }
   };




8. Also, you can always change the speed, mine is set at 5, but you can make it faster or slower if you want. Now, if you test your movie you will notice it is scrolling but not repeating when you scroll to the left. That is because you need to add a litt more code. Select your movie clip, scrolling_mc and open the Actions panel for the movie clip (F9). Now enter this code:
   
   
   onClipEvent (enterFrame)
   {

   if (_x > 0) _x=-800;
   if (_x < -800) _x=0;

   }

9. Now test your movie and scroll to the left and to the right, you will notice that no matter which way you move you mouse and no matter how long you go in one direction your menu will continue to scroll and repeat!

You can download the final source here.