Learn Flash Menus	Home • Tutorials • Forum • Webwasp Members • Templates • Mates • Food • Contact

Flash - Menu that Swings In

Free Flash Tutorial

The aim of the tutorial is to learn how to create a Menu with swings in and out. When your mouse goes over the gray Menu Bar to the left, the Flash Menu swings into view. You can then click on the Flash menu buttons. When you move your mouse away from the buttons in the Menu swings away.

Note: Depending on your Browser settings you may need to click on the Movie to activate it:

Example: Download the Flash file  Int 104c

Example of a Flash Menu that swings into view.

Update Notes: This Menu tutorial has proved to be one of the most popular tutorials on this site and so I have now fully updated it. This updated tutorial is now compatible with Flash 8 (also Flash MX04). In particular the ActionScript code has been changed so that you can use this Menu in the newer versions of Flash and it is now compatible with both ActionScript 1 and ActionScript 2. The build of the Flash Movie has been simplified and it is now easier to make and a more lean and streamlined Flash file.

Flash Version: This tutorial will work in Flash 8, Flash MX04 and Flash MX. This tutorial has been written specifically with Flash 8 in mind. However users of other versions of Flash should also be able to follow this tutorial without difficulty.

Flash MX Users: You can either follow this tutorial or follow the the original MX tutorial. As the original tutorial was written specifically for MX it maybe easier for you to follow but alas the original tutorial is slightly more complex to build. However the code in the original tutorial has been updated so that you will find that it is forward compatible making it easier to upgrade to the newer versions of Flash: Flash MX Tutorial

Direction X or Y:
It is easy to change the code so that every thing moves from the top. All you need to do is swap the X values for Y values:

Example: Download the Flash file  Int 104d

Menu come in from the top on the Y axis's.

Step One: Setting up the Document

1. Open a New Flash Document: File > New (Ctrl N)
2. If the General Tab is not selected, select it: General Tab
3. Select Flash Document:
4. Click: OK

Note: You should now be able to see a new Flash document.

5. Go to: Modify > Document (Ctrl J)
6. Set the size to: 525 x 200 px
7. Select a: Background colour
   
   I selected: 003366
   
   
   My background Colour.
   
   
8. Click: OK

Step Two: Creating the Menu Bar

1. In the Timeline rename Layer 1 to: Menu Bar
2. Using the rectangle tool on the left off the Stage draw a long: Rectangle
3. With the Text Tool type: Menu
   
   
   
   
4. I added a triangle to my Menu:
   
   

Cross Ref: Flash does not have a Triangle tool but there is a very simple technique: Drawing Triangles

5. With the Free Transformation Tool : Rotate the Menu Bar
   
   
   The rotated Menu Bar in the correct position.
   
   
6. In the Timeline right click (Mac: Ctrl click) on Frame 55 and select: Insert Frame
   
   
   

Note: These 55 frames are so that the Menu Bar will be visible throughout the entire Movie. At present the Movie has no content but we will add content. If your content exceeds 55 frames you will need to return to this Layer and add additional frames to ensure that the Menu Bar is visible throughout the Movie.

Step Three: Creating the Graphics

1. To avoid errors lock the Menu Bar Layer:
2. Click on the Insert Layer button:
3. Rename the new Layer to: Graphics
   
4. Place any graphics or text that you may want:
   
   
   My Graphics Layer looks like this.
   
   
5. In Frame 10 of the Graphics Layer, right click and select: Insert Blank KeyFrame
   
   
   Your Layers should look like this.

Note: This new Keyframe will contain the content of Menu item one. The new Keyframe does not need to be in Frame 10 but could be on the next unused Frame, which is Frame 2. I have selected to use Frame 10 so that Button 1 will match Frame 10 and Button 2 will match Frame 20 etc. An alterative would be to use Frame Labels (which I do not cover in this tutorial).

6. In Frame 10 place any graphics or text that you want to be visible when the first Button is clicked:
   
   
   My Graphics Layer looks like this. I painted the word using the Brush Tool.
   
   
7. Repeat five times what you have just done with different graphics for frame 20, frame 30, frame 40 & frame 50.
   
   
   My Graphics Layer and Timeline Keyframes.
   
   
8. To avoid errors lock the Graphics Layer:
   

Step Four: Creating the Buttons

1. Go to: Insert > New Symbol (Ctrl F8)
2. Name it: Button 1
3. For Type select: Button
   
   
   
   
4. Click: OK
   
   
5. Draw a small: Rectangle
6. Type a label on it such as: Button 1
   
   
   
   My Button.

Note: Make sure your text and your rectangle are different colours!!

Cross Ref: If you do not know how to create buttons see the tutorial: Creating Buttons

7. Repeat what you have done to create: Button 2 through to Button 6

Note: My last button returns the user back to the starting point so I have typed Home as the Label.


My six buttons.

8. When you have finished your Buttons go back to the Main Stage by clicking on the Tab:

   Note: Do not place your buttons on the Main Stage. If you have delete them (don't worry they still in the Library).

Step Five: Adding the Menu

1. Go to: Insert > New Symbol (Ctrl F8)
2. Name the Symbol: Menu 1 MC
3. The Type should be: Movie Clip
   
   
   
   
4. Click: OK
   
   
5. Open your Library: Window > Library (F11)
6. Drag Button 1 into the new Symbol: Menu 1 MC
   
   
   My Menu 1 MC with the Button nested inside the Movie Clip.
   
   
7. Repeat what you have done to create:

   Note: All your symbols are still in the Library, none of them have yet been placed on the Main Stage.
   
   
   
   All the Symbols in the Library.

Step Six: Placing the Menu

1. When you have finished go back to the Main Stage by clicking on the Tab:
2. If your Graphics Layer is not locked, lock it:
3. Click on the Insert Layer button:
4. Rename the new Layer to: Buttons
5. If your Library is closed, open it: Window > Library (F11)
6. Drag from the Library on to the Stage all your: Movie Clips (Not the Buttons)
7. Position the Movie Clips to the Left and just: Off Stage
8. You may want to use your Align Panel to get them in a straight line and spaced evenly: Window > Align (Ctrl K)
   
   
   The Movie Clips are on the left and are just off stage.
   
   
9. If the Property Inspector is closed, open it: Window > Properties (Ctrl F3)
10. Select the first Movie Clip and give it an Instance Name of: MC1
    
    Note: Do not type a space between the MC and the 1. It must be one word: MC1
    
    
    The Instance Name for:MC1
    
    
11. Give as Instance Name the next Movie Clip: MC2
12. Give Instance Names to the rest of the buttons: MC3 etc.
    
    
13. You may need to re-arrange the order of the Layers. They should look like this:
    
    
    The Layer Order has been changed.

    Note: The Menu Bar needs to cover the Buttons which is why it is the top Layer. The Buttons should swing onto the Stage over the Graphics.
    

Step Seven: ActionScript for the Timeline

The following Actionscript will make the first button move. There is additional code that makes the other buttons follow the first button, a bit like follow the leader.

1. To avoid errors lock the Buttons Layer:
2. Click on the Insert Layer button:
3. Rename the new Layer to: Actions
4. Place the following ActionScript on Frame 1 in the: Actions Layer
   
   // stops the movie on frame 1
   stop();

   // sets the x position for the menu to stop and go back to. You may need to adjust these two settings
   var goto = 30;
   var backto = -80;
   
   // declares a variable called go which will be used to help create the movement
   var go = 0;

   // sets the speed - don't set it too slow
   setInterval(mousePosition, 5);

   // this function is called by the word 'mousePosition' in the setInterval above
   function mousePosition() {
      // sets the x position for the mouse to activate the menu movement
      if (_xmouse<=20) { //adjust number as necessary
         MC1._x = MC1._x+bounce("right");
      }
      if (_xmouse>=110) { //adjust number as necessary
         MC1._x = MC1._x-bounce("left");
      }
   }

   // this function is called by 'bounce' in the mousePosition function above
   function bounce(leftOrRight) {
      // sets the swing properties
      if (leftOrRight == "right") {
         go = (goto-MC1._x);
         go *= .09;
      }
      if (leftOrRight == "left") {
         go -= (backto-MC1._x);
         go *= .09;
      }
      return go;
   }

   Note: If you are struggling to understand the functions above see the tutorial: Intro to functions

5. Test Your Movie: Control > Test Movie (Ctrl + Enter)
6. Place the Mouse over the: Menu bar

   
   So far only the first Button works.

   Note: Only one Button will work. To make the rest of the Buttons work there one more step.

7. Close the Test Window:

Step Eight: ActionScript for the Movie Clips

The ActionScript below makes sure that the Movie Clips follow the lead of Movie Clip 1.

1. Lock the: Actions Layer
2. Unlock the: Buttons Layer
3. Open the Actions Panel: Window > Actions (Ctrl F7)
4. Switch Script Assist off. Go to the Actions Panel Side Menu Button:   

   Script Assist is off when there is: No Tick
   
   Cross Ref: If you do not know about Script Assist or struggle with the Actions Panel look here: Actions Panel

5. Select Movie Clip 2

Tip: In the top left of the Actions Panel you must be able to read:



6. Attach the following to Movie Clip 2:
   
       onClipEvent (enterFrame) {
           _x = _root.MC1._x; // button 2 refers back to button 1
       }
   
   
7. Select Movie Clip 3 and attach the code:
   
       onClipEvent (enterFrame) {
           _x = _root.MC2._x
       }
   
   
8. Select Movie Clip 4 and attach the code:
   
       onClipEvent (enterFrame) {
           _x = _root.MC3._x
       }
   
   
9. Select Movie Clip 5 and attach the code:
   
       onClipEvent (enterFrame) {
           _x = _root.MC4._x
       }
   
   
10. Select Movie Clip 6 and attach the code:
    
        onClipEvent (enterFrame) {
            _x = _root.MC5._x
        }

    Note:
    The code for MC 2 refers back to MC 1,
    The code for MC 3 refers back to MC 2,
    The code for MC4 refers back to MC3,
    etc.

11. Test Your Movie: Control > Test Movie (Ctrl + Enter)
12. Place the Mouse over the: Menu bar

    
    All the Buttons works.

13. Close the Test Window:

Step Nine: Making the Menu Buttons Work

Although the Menu should now be working correctly the Buttons don't actually function. This last section will make them function correctly

1. Open MC1 by double clicking on: Movie Clip 1

2. Select: Button 1

Tip: In the top left of the Actions Panel you must be able to read:



3. Place the following code on: Button 1
   
       on (release) {
           _root.gotoAndStop(10);
       }
   
   
4. Place the following code on: button 2
   
       on (release) {
           _root.gotoAndStop(20);
       }
   
   
5. Place the following code on: button 3
   
       on (release) {
           _root.gotoAndStop(30);
       }
   
   
6. Place the following code on: button 4
   
       on (release) {
           _root.gotoAndStop(40);
       }
   
   
7. Place the following code on: button 5
   
       on (release) {
           _root.gotoAndStop(50);
       }
   
8. Place the following code on: button 6
   
       // Note this goes back to frame 2 which is the first real frame or Home Page
       on (release) {
           _root.gotoAndStop(2);
       }
   
   
   
9. Test Your Movie: Control > Test Movie (Ctrl + Enter)
10. Place the Mouse over the: Menu bar

    Note: All your Buttons should now work.

11. Close the Test Window:

Your Movie should have a Menu that swings in with buttons that go to different locations in your Flash Movie. I hope you found this tutorial useful and easy to follow.

Webwasp is Phil Schulz's baby. You are welcome to contact me or become my Facebook friend: Click here