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.


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.

Creating a Sliding Menu in Flash - Illustration

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.

Properties Inspector

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

Timeline - 4 Layers, 3 Frames

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.

New Movie Clip Symbol - Images Container

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.

Content Layer - 3 Image Imported

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.

Properties Inspector - Images Container Instance Name

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.

Timeline

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

Properties Inspector - Hidden Button Instance Name

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.

Timeline - Hidden Button  Layer Hidden!

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.

- Next Page