The Infinite Menu
         by ilyas usal

Introduction
We are going to see in this tutorial how to achieve very simply one of the most popular menus: the infinite menu. There are of course several ways to do it, from the first one created by Yugo Nakamura (hang on to your seat) a while ago, to the one you are going to create...

[ an infinite menu, just like the title says ]

Steps to Create Animation
Please download the partial source first here.
The following steps will help you to create the animation you see above:

  1. Open the source provided. There is nothing on the scene, everything is in the library. So open it (Ctrl+L). You can see a button, and a clip called menu. This clip contains a grey background, buttons on top of it and finally text. Also notice that the registration point of this clip is on its left end, which is very important.
     
  2. In order to make this effect, you need 2 instances of this clip on your scene. Drag and drop them in the main timeline. Position them with the Properties Panel, the first at X:0 and the second at X:300 (the clip is 300 pixels wide). Now select both clips, and hit F8 to turn them into 1 clip.
     

[ clips are one after another ]

  1. Be sure to put the registration point of this new clip on its left end too. If you're working with Flash MX, just specify it when you create the movie clip (see picture above, the registration), and if you're working with Flash 5, just do it manually.
     
  2. Now we have to make our menu move accordingly to the position of the mouse: when you go left, the menu goes left and the same on the right. Open the Actions panel, and enter this code:
  3. onClipEvent (load)
    {
       xcenter=150;
       speed=1/10;
    }
    onClipEvent (enterFrame)
    {
       var distance=_root._xmouse-xcenter;
       _x+=(distance*speed);
    }

  4. If you test your movie, you will see that it moves like we wanted. Let's see how the code works:
    We define a couple of variables:
    1. xcenter: this is the centerpoint of the animation. If the mouse if on the left of this point the clip will go left and the same on the right.
    2. speed: well, hue... the speed of the clip, yeah. Notice that it is inferior to 1.

    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. You can test it if you're not convinced.
     

  5. OK, we're almost done now. We only have to make so that the menu seems to loop. In order to do that, we are going to check the position of the menu. If it is more than 0, it means that we are going to see some white space on the left, so we will make the clip jump to the right. The same thing happens if _x < 300, so we'll make it jump to the left. It should be clear when you see it work.
     
  6. onClipEvent (enterFrame)
    {
       var distance=_root._xmouse-xcenter;
       _x+=(distance*speed);
       if (_x > 0) _x=-300;
       if (_x < -300) _x=0;
    }

  7. Save your work and test the movie. I hope you can see how it works now. Be careful though: the value 300 is only here because one menu is 300 pixels wide. You'll have to change that to match your own values.

    Last thing we have to do: mask our movie so that we can only see a small part of it. Create a new layer in your main timeline(mask), and draw a square in it. Right click the layer and set it as a mask. Save your work and test the movie. Tadaaa!!!
     
  8. [ mask over the menu ]

  9. A final note: it is normal that you cannot see text through a mask. To solve this problem, you can either embed the font, or break it apart twice (Ctrl+B). To do so, edit the clip menu and select the text layer and press Ctrl+B twice.

There, it's over. I hope you liked this effect. You have free to experiment with the parameters of this movie: you can try and give it some inertia, various speeds, elastic effects... Be creative!

-pom
Don't check my site, please
You can download the final source here.

 




SUPPORTERS:

kirupa.com's fast and reliable hosting provided by Media Temple.