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.

Menu MC Timeline - 2 Layers

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.

Properties Inspector - Menu Background Instance Name

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.

First component, configured and set

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.

All Buttons Layed on the Stage

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.

Menu moved outside the stage

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.

- Next Page.