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: Example: Download the Flash file  Int 104d

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: