Creating a Sliding Menu in Flash

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

This tutorial will teach you how to create an animated sliding menu that appears when the user points his mouse on its tip and then slides back inside when the user moves his mouse away. In this intermediate level tutorial we are going to use our ever favourite Tween Class. Below is an example movie showing an effect similar to the one we will create by the end of this tutorials.

http://www.republicofcode.com/tutorials/flash/slidingmenu/

Photography By Riyadh Al Balushi ©

The menu in the movie above slides out when the mouse rolls over the menu background and slides back in when the mouse rolls over a hidden invisible button placed over the rest of the movie stage. This technique is used because a basic roll out event handler will cause the menu to slide back whenever a button inside the menu is touched making our menu disfunctional.

The process for creating this menu could be divided into the following sections:

1. Setting up the movie and timeline.
2. Creating a movie clip to hold our images (content).
3. Creating the hidden button required for sliding back the menu.
4. Creating the menu and buttons.
5. Writing the ActionScript required to move the menu and configure the buttons.

The images and menu graphic required to follow this tutorial are found in this zip file. Download and unzip all the contents of that file to proceed with this tutorial.

Setting Up the Movie and Timeline

Create a new ActionScript 1.0 or 2.0 Flash movie, set the dimensions of the movie to 500x375 px, I used the default settings for the frame rate and background.

Create 4 layers on the timeline each with a single frame, name them Actions, Menu, Hidden Button, Content.

Creating the Image Container Movie Clip

Our content in this movie will be a set of images that will be contained within one movie clip. By the end of this tutorial, our menu will command this movie clip to display a specific image when the corresponding button is clicked.

To create this new movie clip to contain our images go through Insert>New Symbol... (Ctrl+F8) to create a new symbol. Name the clip Images Container, select Movie Clip as the symbol type and click OK.

You should find yourself on the timeline of our new Images Container movie clip. To add your images to this movie clip simply go through File>Import>Import to Stage and browse for the folder in which you extracted the images we provided you with. If you select and import Image1, Flash should detect that this is a sequenceof images, so let it import them all in one go. You should end up with our three images, each on a different keyframe on the only layer of our Images Container movie clip.

Our Images Container movie clip is now done. Go back to the main timeline (Scene 1). Open up the Library (Ctrl+L), look for the Images Container movie clip and drag an instance of it onto the only frame of the Content layer of your timeline. You should see the first frame of that movie clip now on the stage. Select the movie clip, access the Properties Inspector and assign the instance name images_mc to it. We are done workign with the actual subject of our movie.

Creating the Roll Back Hidden Button

Our hidden button will be used to command the menu to slide back when the mouse rolls over this button. This button must cover the entire area of the stage in order for it to work well. Select the Hidden Button layer, and then use the Rectangle Tool to draw a box that cover the whole canvas in whatever colour that you choose. Once done, click on the layer again on the Timeline to select the box and its outline, then press F8 to convert it to a Movie Clip Symbol. Name this symbol Hidden Button.

While your newly created Movie Clip symbol is still selected, access the Properties Inspector and assign the Instance Name hidden_btn to it.

We do not need to see this layer any more, access the Timeline and hide the Hidden Button layer by clicking on the Display as Outlines option for the layer.

We are done working with the hidden button, we now need to create the menu that will hold the navigation buttons of this movie. Head to the next page to do that when you're ready.

Creating a Sliding Menu in Flash

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

We will create in this section of the tutorial the menu that will slide in and out during playback. The menu will be contained within a separate movie clip, this movie clip will have the background of the menu and the buttons from which the images container will be controlled.

Creating the Menu

To start create our menu select the layer labeled Menu and then go through File>Import>Import to Stage to browse for the menu graphic of our menu that was in the zip file you downloaded earlier. Make sure you check the option to import the file as a Single Flattened Bitmap and then click on OK.

Select your imported menu and click on F8 to convert it to a Movie Clip symbol. Name this movie clip Menu. Make sure that you set the Registration Point to the top left corner - this will help us align the menu on the stage easily. Once you have the graphic as a movie clip on the stage, access the Properties Inspector to assign the instance name menu_mc to it

Double click the menu_mc movie clip to start editing its own timeline. You should have a single layer on this movie clips timeline, rename that layer to Menu Background and then create another layer and name it Buttons.

Select the only object on this timeline (the menu graphic), press F8 to convert it to a movie clip symbol again. Name this movie clip Menu Background, assign the instance name menu_bg_mc. This is required to have access to the background itself as the background is the object that will trigger the slide back function when the mouse rolls over it.

We cannot attach an onRollOver event handler property to the menu movie clip as a whole because that will override any event handlers attached to the actual buttons of the menu and they will not work that way.

Time to create the actual buttons of the menu, for the sake of simplicity we will use the basic Button component instead of creating graphic buttons. Select the layer named Buttons and then go through Window>Component to display the Components Panel. Drag an instance of the Button component onto stage, access the Properties Inspector, assign the instance name my1_btn to this button, then access the Parameters tab of the Properties Inspector and change the label parameter to Image 1.

Repeat the process to add two component buttons labeled Image 2 and Image 3, then assign the instance names my2_btn and my3_btn to them respectively.

Our menu is now done! Go back to the main timeline and then move the menu to the left side of the screen so that the word menu and a little bit of the body of the menu is only on the stage. An easier way to move the menu can be done by accessing the Properties Inspector and settings its X position to -110.

All of our movie assets are now set. We will write the code required to move the menu around in the last page of this tutorial.

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.