Sliding Menu

by ilyas usal a.k.a. pom   | filed under Flash and ActionScript

Introduction

This effect is a prolongation of the draggable menu effect, and since both effects have a lot in common, I will not explain everything. That's why I'd recommend you to complete the draggable menu tutorial before you start this one.

Take a look at the effect:
 

[ Just click on the buttons to see the effect ]

The main idea

There are 2 very important things in this effect : the clip that is going to scroll, and the buttons that clip.
Basically, this is how this effect functions : by pressing on the buttons, you set a destination that you have calculated with your little hands, and then the clip goes there with Actionscript. The difference between that effect and the draggable menu is that the destination was set by the position of the dragger, whereas now it is set automatically. But the idea is exactly the same.
The tutorial:
 

1. When you open the .fla, you'll see 3 layers, buttons, mask and fond. On the fond layer, there's a large clip containing 4 numbers. If you open your library, you'll find it under the name clipgeneral. On the mask layer, you'll find a mask, a movie clip in fact, called mask in the library.
   
   On the buttons layer, there is an instance of clipgeneral, called scroller in the library, only it has been resized to 1/10. Actually, it is not an instance of clipgeneral, but a clip containing a small instance of clipgeneral.
   
   Now, what we want is to click on that scroller, and make clipgeneral move. You sense that somehow we are going to have to put buttons inside scroller.
    
2. Edit scroller by double clicking it, or right clicking it and choosing "edit in place". You can now see that the rest of the scene has faded. There's one layer in the timeline called backclip that contains a small instance of clipgeneral.
   
   Open your library with Ctrl + L. There is a button called button. It has the same size as one little square so that it covers it perfectly. Create a new layer that you will name invisible buttons. Drag and drop in that layer an instance of button, and put it on top of the 1 of the scroller. Don't hesitate to zoom in (View > Zoom in) as much as you need to see what you're doing.
   
    

Check out the orange button on top of 1

Do the same for all the numbers, so that you don't see the scroller anymore. Save your work.
Now select any of your buttons, and open the Effect panel, choose Alpha and set it to 0. Do the same for all the buttons. We can now see the scroller under the buttons.

3. Now we have all the objects we need on the stage. Time to write some code ! Open the Actions panel of the first button. (Remember that we are presently in Scene1, editing the scroller movie clip, in which there are 2 layers. To open the Actions panel, right click on a button and choose Actions, or click on the blue arrow at the bottom right of the screen). Click inside the window and press Ctrl + E to switch to Expert Mode. Put the code :

That code sets a new destination xnew for clipgeneral. _root.xnew = _root.mask2._x +(4-1)*100/2; sets the destination to the current position of mask2 plus a certain offset. In the second button, just replace 4 by 2, and so on (0, and then -2). If you've completed the Dragging menu tutorial, everything is similar from this point on. If there's something I overlook, just go to that tutorial, you should find an explanation.

4. Now click at the Scene 1 vignette. You're back at the root of your scene. We have to put that mask2 thing or Flash won't know where to go. On top of the buttons layer, create a layer called mask position. Drag an instance of mask from the library on that layer. Make it match exactly the position of mask with the Info panel. Open the Instance panel and give it the name mask2. There it is ! Now open the Effect panel and set the alpha to 0. Lock the layer because you won't be modifying it. Save your work.
   
    
5. We want to use the variable xnew from clipgeneral because it is the destination it has to go to. Click on clipgeneral and open the Actions panel. In expert mode, copy that code :

Save your work. Now save it under a new name, because I'd like to see what we're doing here. In that copy, delete teh mask layer. Test your movie now. When you click on the buttons, you should see the right numbers appear. Do you see what's happening now ?

6. You can finish your work with that file and add the mask at the end (more interesting), or with the first one. We need to make the transition between frames a little bit more fluid, so we'll change the code we just wrote in clipgeneral. Make that :

                      onClipEvent (load) {

_root.xnew = _root.mask2._x + (4-1)*100/2 ;

}

onClipEvent (enterFrame) {

_x += (_root.xnew-_x)/10 ;

}

 

In the onClipEvent (enterFrame) handler, we just made so that the clip gets to his new position little by little, adding to its position 1/10 of the way it has to go. In the onClipEvent (load) handler, we make so that when the clip loads, the 1 appears.

7. Save your work. If you didn't delete the mask, set it as a mask of the layer fond. Everthing should work fine now. But to make it clearer, you can decide to declare functions, or even movie clip prototypes, like I did in the other tutorial. Anyway I leave this part to you.

You can find here all the source code of that sliding menu.

This tutorial is written by Ilyas Usal. Ilyas is also known as ilyaslamasse on the kirupa.com forums!
pom

Just a final word before we wrap up. What you've seen here is freshly baked content without added preservatives, artificial intelligence, ads, and algorithm-driven doodads. A huge thank you to all of you who buy kirupa's books, became a paid subscriber, watch the videos, and/or interact on the forums.

Your support keeps this site going! 😇