The Infinite Menu
by ilyas usal
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
The following steps will help you to create the animation
you see above:
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.
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 ]
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.
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:
If you test your movie, you will see that it moves like we wanted. Let's see how the code
We define a couple of variables:
- 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.
- 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.
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.
if (_x > 0) _x=-300;
if (_x < -300) _x=0;
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!!!
[ mask over the menu ]
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!
Don't check my site, please
You can download the final source