Menu that Swings In

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 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.

Step one: Setting up the Document

This movie works by tracking the position of the mouse. If the mouse is not visible to the Flash Movie when your web page first loads, the menu buttons may be visible. The mouse may not be visible to Flash because it is over the address line of the browser or elsewhere. Once the shock wave has locked onto the mouse (the mouse cursor has moved over the movie) this problem will not occur even if the mouse moves out of the movie and onto the browser.

1. Go to Modify > Document
2. Set up a small movie. Mine is: 525 x 200 pixels
3. If you wish select a: Background Colour
4. Click: OK

Step two: The Invisible Button

1. Go to: Insert > New Symbol
2. Name it: Invisible Button
3. For Behaviour select: Button
4. Click: OK
5. In the frame below the word HIT, right click (Mac: Ctrl click) and select: Insert Blank Keyframe
6. Using the Rectangle Tool draw a: Rectangle

Note: It does not matter how big the rectangle is.

7. Place the rectangle on top of the cross in the: Centre of Stage
8. Return to the Main Stage by clicking on the Scene 1 button:
9. Open your Library: Window>Library (F11)
10. Rename Layer 1: Buttons
11. Drag onto the Main Stage the new button: Invisible Button
12. With the Free Transformation Tool resize the button so that it covers the: Entire Stage
    
    
    

    The Invisible Button now covers the entire Stage.
    
    
13. Attach the following Actionscript to the button:
    
    

    on (rollOver) {         gotoAndStop(2);     }

    
    Because it is a Roll Over button, as soon as the mouse goes over top of the movie, the Play Head will move to frame 2 and stop. The reason for the Invisible Button is to give Flash an opportunity to find the location of the Mouse Cursor.

Step three: Create the Menu Image

1. In the Timeline click on the Insert Layer button:
2. Rename the new Layer to: Menu
3. Using the rectangle tool on the left off the Stage draw a long: Rectangle
4. With the Text Tool type: Menu
5. With the Free Transformation Tool : Turn the Text
   

It looks like this.

1. Create a new Layer and call it: Graphics
   
2. Place any graphics or text that you may want:
   
   

My Graphics layer looks like this. (Click to enlarge)


3. In Frame 10 of the Graphics Layer, right click and select: Insert Blank KeyFrame
   
   
   

   Your Layers should look like this.
   
   Note: Technically the new Keyframe does not need to be on frame 10 but could be on the next unused frame, which is frame 3. I have selected to use frame 10 so that Button 1 will match frame 10 and Button 2 will match frame 20 etc. The reason I have done this is because frame 1 is occupied with the invisible button so my real Button 1 cannot match frame 1.
   
   
4. Place any graphics or text you want:
   
   
   

   My graphics layer looks like this. I painted the one using the Brush Tool. (Click to enlarge)
   
   
5. Repeat five times what you have just done with different graphics for frame 20, frame 30, frame 40 etc.
   
   
   

   My Graphics layer. (Click to enlarge)

Step five: Create Buttons

1. Go to: Insert > New Symbol
2. Name it: Button 1
3. For Behaviour select: Button
4. Click: OK
   
   
5. Draw a small: Rectangle
6. Type text on it: button 1
   
   
   

   My Button. (Click to enlarge)
   
   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. Return to the Main Stage by clicking on the Scene 1 button:
   
8. Repeat what you have done to create: Button 2 through to Button 6
   
   Note: My Button 6 returns the user back to the starting point so I have typed Home as the Label.
   
   
   

   My six buttons.
   
   
9. When you have finished your Buttons go back to the Main Stage by clicking on the Scene 1 Tab:
   
   Note: Do not place your buttons on the Main Stage.

Step six: Adding the Menu

1. Create a new symbol called: Menu 1 MC
2. The behaviour should be: Movie Clip
3. Open your Library and drag Button 1 into the new Symbol: Menu 1 MC
   
   
   

   My Menu 1 MC.
   
   
4. When you have finished your Menu 1 MC go back to the main stage by clicking on the Scene 1 Tab:
   
   
5. To create other menu Items: Repeat Step 1 to Step 5
   
   Note: All your symbols are still in the Library, none of them have yet been placed on the Main Stage.
   
   
   

   All the Symbols in my Library.

Step seven: Placing the Menu

1. When you have finished go back to the Main Stage.
2. Right click on Frame 2 of the layer: Buttons
3. Select Insert > Blank Keyframe
4. Place all your Menu Movie Clip buttons just off the left hand side of the stage.
   
   
   

   The buttons on the left are off stage. (Click to enlarge)
   
   
5. If the Property Inspector is closed, open it: Window > Properties (Ctrl F3)
6. 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
   
   
7. Give as Instance Name the next button: MC2
8. Give instance names to the rest of the buttons: MC3 etc.

Step eight: 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. Create a new layer called: Actions
2. Place the following actionscript on Frame 1 in the: Actions Layer
   
   

   // stops the movie so that the roll over button moves the user to frame 2 stop(); // sets the x position for the menu to stop at and go back to goto = 30; backto = -80; // 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) {       MC1._x = MC1._x+bounce("right");    }    if (_xmouse>=110) {       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; }

If you are using Flash MX your menu should now happily swing back and forth depending on the mouse position.

Important Note If you are using Flash MX 2004 you will need to do one extra step:

For Flash MX 2004 Uses Only

1. Go to: File > Publish Settings.
2. Under Formats tick the: Flash box
3. Click on the: Flash Tab
4. Under Version select: Flash Player 6
5. Click: OK
6. Test you movie. It should now work correctly.
   
   Note: You seem to be able to Publish in ActionScript Version 1 or 2.

I have never know a Flash file not to work when published in a newer Player, but there is always a first time! I have looked at the code in detail and cannot see why it should not function as a Player 7 publication. When I have solved this puzzle I will update the tutorial.

Step nine: ActionScript for the Movie Clips

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

1. Place the following code on: Movie Clip 2
   
   

   onClipEvent (enterFrame) {         _x = _root.MC1._x; // button 2 refers back to button 1     }

   
   
2. Place the following code on: Movie Clip 3
   
   

   onClipEvent (enterFrame) {         _x = _root.MC2._x     }

   
   
3. Place the following code on: Movie Clip 4
   
   

   onClipEvent (enterFrame) {         _x = _root.MC3._x     }

   
   
4. Place the following code on: Movie Clip 5
   
   

   onClipEvent (enterFrame) {         _x = _root.MC4._x     }

   
   
5. Place the following code on: Movie Clip 6
   
   

   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.

Step ten: Making the Menu Graphic Visible

At present the Menu Label is only visible in frame 1. It needs to be visible throughout the Movie:

1. Right click in the last frame of the Menu Layer and select: Insert Frame

Step eleven: Making the 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. Place the following code on: button 1
   
   

   on (release) { _root.gotoAndStop(10); }

   
   
3. Place the following code on: button 2
   
   

   on (release) { _root.gotoAndStop(20); }

   
   
4. Place the following code on: button 3
   
   

   on (release) { _root.gotoAndStop(30); }

   
   
5. Place the following code on: button 4
   
   

   on (release) { _root.gotoAndStop(40); }

   
   
6. Place the following code on: button 5
   
   

   on (release) { _root.gotoAndStop(50); }



7. 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); }

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