Learn Flash: Scrolling Menus	Home • Food • Mates • Members • Tutorials • Forum • Buy Templates • Contact Us

Flash - Scrolling Menus

Free Flash Tutorial

A scrolling menu is an extremely useful thing to be able to do and though it is not difficult, how to do it is far from obvious. This technique can be used to scroll any object such as a long movie clip or picture. In this tutorial I will show you how to create a horizontally scrolling menu like the one below:

Example: Download the Flash file Int 114a

Example of a horizontal scrolling menu

Cross Ref: The technique used here is the same as that which enables a movie to play backwards see intermediate tutorial: Playing a Flash Movie Backwards

Creating a vertically scrolling menu is no different:

Example: Download the Flash file Int 114b

Example of a long vertical menu.

You could even scroll an object diagonally or wiggle it back and forth or around and around. It is getting the buttons to play the movie in either a forward or backwards motion that is the trick. The movement is created with a standard tween.

Cross Ref: To learn more about tweening see beginners tutorial: Tweening

Step One: Create a Menu

A menu usually consists of a series of buttons. It does not matter if it is the same button repeated many times, each with its own individual label or a series of unique buttons.

In my movie I have a series of 10 unique buttons in a long line.

1. Create a number of buttons.
   
   Note: It is important that these buttons are not on stage but contained inside a movie clip:
   
   Cross Ref: To learn how to create buttons see beginners tutorial: Creating Simple Buttons
   
2. Go to: Insert > New Symbol
   Name: Menu MC
   Behavior: Movie Clip
   
3. Open your Library: Window > Library
4. Drag the buttons out of your library and place them on Stage.
5. Place them in a long line.
   
   
   A line of buttons inside Menu MC.
   
   Tip: Use the Align pallet to space them out: Window > Align
   If the Align to Stage button is highlighted objects will Align to stage. With this selected click the Align Vertical centre to get them in a straight line.
   Deselect the Align to Stage button and click the Space Vertically button . The buttons on both the left and right will say in position while all the others will spread out evenly.
   
   
6. Click the tab to go back to the main stage.

The Edge of the Stage
You cannot place many buttons in a line before you get to the edge of the work area. If you need more buttons than space you will need to nest Movie Clips within Movie Clips. Each successive Movie clip goes off the edge of the previous one. It is a bit like overlapping cards except they are inside one another.

If you are not used to nesting this is not easy and as of yet I have not written a tutorial on how to do this but you can download the file below to look how it is done:

Example: Download the Flash file Int 114c


The menu is longer than Flash's work area so the Movie Clips are nested.

Step Two: Tweening the Menu

1. Place your Menu MC on the main stage.
2. Move you menu so that it aligns near the left side of the stage:
   
   
   Menu MC placed near the left of the stage.
   
   
3. Right click (Mac: Ctrl click) in the Timeline on frame 60 and select: Insert KeyFrame
4. Right click on frame 1 select: Create Motion Tween
5. Click on frame 60 and move Menu MC so that it aligns near the right side of the stage.
   
   
   Tween in the Timeline and Menu MC placed near the Right of the stage.
   
   
6. Go to: Movie > Test Movie
   Your movie it should scroll from one left to right. At present it will animate continuously.
   
7. To get the speed of the scroll effect correct either add frames to make the movie scroll slower or remove frames to make it scroll faster.
   To do this use the Insert menu.

Step Three: Stopping the Movie from Playing

1. Create a new layer called: Actions
2. In the frame 1 place:
   
       stop();
   
3. Do the same thing in the last frame of your movie.
   
   
   The Timeline with a stop at each end.

Step Four: Left Button

1. Create a new Layer called: Left Button
2. Remove the last frame of this Layer. Once you get to the last frame there is no more left to go unless you want the movie to loop back to frame one.
   
   
   The last frame of the left button layer is gone.
   
   
3. Place a button on Stage.
   
   Note: If you take a button from the Common Button Library avoid Knobs, Faders and Component buttons as they work differently.
   
   
4. Attach the following script to the button:
   
       on (rollOver) {
           play();
       }
       on (rollOut) {
           stop();
       }
   
   Quite straight forward: The movie plays when the mouse is over the button and stops when the mouse moves away.

Step Five: The Controller

I am not aware of an ActionScript command that will make a movie play backwards. To do this you need to create a controller that will manages the movement.

1. Go to: Insert > New Symbol
   Name: Controller MC
   Behavior: Movie Clip
   
2. In frame 1 place the following ActionScript:
   
       stop();
   
3. In frame 2 place the following ActionScript:
   
       _root.prevFrame();
   
   This will make the movie go back one frame. Nearly playing backwards but not quite.
   
4. In frame 3 place the following ActionScript:
   
       gotoAndPlay (2);
   
   This will repeat the action of the previous frame. It is this loop which will make the movie play backwards.
   
   
5. Click the tab to go back to the main stage.
6. Create a new Layer called: Controller MC
7. In this layer right click on frame 2 and select: Insert Blank Keyframe
8. Drag the Controller MC onto the main stage in frame 2.
   
   Note: The Controller MC can be placed anywhere on the stage or to the side of the stage but it must start on frame 2 and remain on stage until the last frame. If the controller is placed in frame 1 you may get errors !! Once the controller is active it will trap you in frame 1 because it is always be sending you backwards.
   
   
   The controller starts on frame 2 and is placed to the right of the main stage (the white dot).
   
   
9. In the Property panel give the Controller MC an instance name: controller
   

Step Six: The Right Button

1. Create a new Layer called: Right Button
2. Place a button in frame 2 of this Layer.
   There is no point in having it on frame 1 as it does not do anything.
3. Attach the following script to this button:
   
       on (rollOver) {
           _root.controller.gotoAndPlay(2);
       }
       on (rollOut) {
           _root.controller.gotoAndStop(1);
       }
   
   This turns the controller loop on and off.
   
   
   All the layers complete.
   
   Note: I have placed a red box around the stage. This is just outside the main stage so it is not visible in the final movie. It is used to see the edge of the stage is during test mode.
   
   
4. Test your movie as it should now scroll happily back and forth.

Here's a slight variation on the theme. In the movie below the menu scrolls continually to the left or the right.

Example: Download the Flash file Int 114d

Non stop movement in any direction.