Flash Tutorial: Menu

Home • Food • Mates • Members • Tutorials • Forum • Buy Templates • Contact Us 

 

Flash Tutorials

   

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

 

 

Example: Download the Flash file  Int 104a

 
Example of a Flash menu that swings into view.

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 104b

 

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



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

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

    Note: At present the Movie only has one frame but latter we will additional frames to the Movie. To ensure that the Menu Image is visible throughout the Movie you will need to come back to this layer and add additional frames. I will remind you of this at the end of the tutorial.

Step Four: Creating the Graphics

  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.

  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.
  5. Repeat five times what you have just done with different graphics for frame 20, frame 30, frame 40 etc.


    My Graphics layer.


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.

    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.

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

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


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


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.

 

Please indicate what you thought of this tutorial 
10 is the best: 
10 9 8 7 6 5 4 3 2 1

Webwasp Community: Webwasp Mates & Dates

Why not try out webwasp's new community. Meet new people, find friends in your area: Webwasp Mates & Dates

 Top of Page • Home • Food • Mates • Members • Tutorials • Forum • Buy Templates • Contact Us 
 All material on this site is protected under international copyright © law. DO NOT reproduce any material from this site without written permission. Please ask as permission is often granted.