Creating a Sliding Menu in Flash

By Blue Chi (Riyadh Al Balushi) | Intermediate | Flash CS3 | Page 1, 2, 3

The third section of our tutorial will explain the code line by line. We will create two functions, one to slide out the menu, and the other to slide it back in. We will then attach one of these functions to a roll over event handler attached to the menu movie clip background and the other function to the hidden button. We will finally attach the code to the menu buttons to display their respective image container images.

Scripting the Menu and Buttons.

Back in the main timeline, select the Actions layer and then right-click the only frame and open up the Actions Panel.

We will start off by stopping our Images Container movie clip from playing automatically when the movie is started. We can do that easily by using the stop() method. We also need to hide our Hidden Button by setting its transparency level to zero.

images_mc.stop();
hidden_btn._alpha = 0;

We are going to use the Tween Class to slide our menu in and out. To be able to use the Tween Class we have to import the class assets before we use any of its objects. (Refer to the link above for more details on the Tween Class)

import mx.transitions.Tween;
import mx.transitions.easing.*;

Before we start moving our menu, we need to create some initial Variables to hold organisational data of our movie. The variable rolled_up stores the current location of the menu movie - this will be used by the Tween class to tell the menu to go back to this position when the menu slides back in. The rolled_out variables stores the position at which the movie should end up at when it is fully slid out, zero here means that the menu is fully outside.

var rolled_up = menu_mc._x;
var rolled_out = 0;

We are going to create a Function that commands the menu to slide out. This function should be easy to understand if you read the Tween Class tutorial. I added the current_x variable to store the current location of the menu so that the animation rolls out from the exact point at which the menu is at instead of jumping if triggered before the menu is fully rolled back.

function slide_out() {
current_x = menu_mc._x;
var anim:Tween = new Tween(menu_mc, "_x", Strong.easeOut, current_x, rolled_out, 1, true);
}

We will create the function to roll back the menu, the only difference between this one and the one above is that it uses the rolled_up variable instead of rolled_out.

function slide_in() {
current_x = menu_mc._x;
var anim:Tween = new Tween(menu_mc, "_x", Back.easeOut, current_x, rolled_up, 1, true);
}

Our basic functions are set. We need to assign these functions to event handlers attached to the menu background and our hidden button. The next code is self explanatory.

menu_mc.menu_bg_mc.onRollOver = function(){
slide_out();
}

hidden_btn.onRollOver = function(){
slide_in();
}

Finally, our buttons need to have event handler properties attached to them as well to command the images container to show the required image when clicked.

menu_mc.my1_btn.onRelease = function(){
images_mc.gotoAndStop(1);
}

menu_mc.my2_btn.onRelease = function(){
images_mc.gotoAndStop(2);
}

menu_mc.my3_btn.onRelease = function(){
images_mc.gotoAndStop(3);
}

You can test your movie now. The menu should work as described! However, there is a small touch that we can add to help make our menu a little bit nicer. A point that you might not be aware of is the fact that our hidden button covers the entire stage any any buttons below it cannot be used now. So if you plan on having anything interactive below the hidden button it will not work. We can fix this by moving the hidden button outside the stage when it is not used and then bring it back when we need it. We will also disable the menu background button when it is not need as well to remove the finger mouse pointer when the menu is already out.

function slide_out() {
current_x = menu_mc._x;
var anim:Tween = new Tween(menu_mc, "_x", Strong.easeOut, current_x, rolled_out, 1, true);
hidden_btn._x=0;
menu_mc.menu_bg_mc.enabled=false;
}

function slide_in() {
current_x = menu_mc._x;
var anim:Tween = new Tween(menu_mc, "_x", Back.easeOut, current_x, rolled_up, 1, true);
hidden_btn._x=-1000000;
menu_mc.menu_bg_mc.enabled=true;
}

That should do it. Test your movie to see your fully functional sliding menu!

This concludes our tutorial. You can download the end source file here. Please feel free to post any questions you have on the Oman3D Forum.

- End of Tutorial.