Make your own free website on Tripod.com
Create a simple sliding menu - part 1
ericlin@ms1.hinet.net

This is the base of a menu unit. There are two elements. One is a button that handles rollover, - when rollover the submenu parts slide out. The other element is several submenu movieClip that contains a button for commands like getURL.

How do we make the effect that, when the green button got rollOver, the submenus slide out ? And when rollOut, the submenus slides in ?

Now we script the submenu button like this: The submenu movieClip has two positions: one is endposition of slide-in. I set it as 0; The other is the end position of slide-out. The slide-out end position of the first submenu is 40; the second is 60, the third one is 80 ...etc.

If button get rollOver, all the submenu movieClip animate toward its slide-out end position. If button get rollOut, all the submenu movieClip animate toward its slide-in end position.

That is all. Below is the code for the second submenu

onClipEvent (load) {
    endY = 60;
    txt = "submenu 2";
}
onClipEvent (enterFrame) {
    if (_parent.active) {
        _y += 5;
        if (_y>endY) {
            _y = endY;
        }
    } else {
        _y -=10;
        if (_y<0) {
            _y = 0;
        }
    }
}
 

1. Here we create all submenu movieClips on the stage. So, we have very similar enterFrame block for each submenu clips. Later we will try make script into a symbol and use attach Movie instead of create manually on to the stage.

2. This is only a simple model to animate slide-in and slide-out. It is more attractive to make it faster when slide-in and slower on slide-out.

3. The goal is make a sliding menu unit. It does not matter how we create it. We can create it by tween instead of scripting. We use scripting to animate the sliding menu because we dont know how many submenu we are going to have. If we know, we can create it on the stage and animate them by tween. Here we want to generalize its usage for 3, or 5, or any number of submenu, so we use script.

4. I believe the guy that write tutorial in FlashKit use a more attractive algorithm. In addition to the change of _y, we can add _alpha or visibility changes. Even color transform. If we add scale changes, then it is Liquid menu.

5. Anyway, the basic part is create a sliding menu on the stage. If you "can't", then you need not read the next article.

Download the zipped fla of all 3 fla