SEARCH
Newsletter
Subscribe to get design
tips, latest trends, free
stuff and more.
It doesn't look like an e-mail address

hosting

Drop down Menu

Phil Flash Tutorials Sep 28, 2005

The aim of the tutorial is to learn how to create a drop down menu that will allow you to create a navigation system. This can be used to move from one part of a Flash movie to another, or to different web pages.

Example of a simple dropdown menu.

Step One: Creating a Button

You will only need one button. Each instance of the button will have different text on top of the same original symbol. You will need your button to be in your Library. To do this:

  1. Go to: Insert > New Symbol
  2. For Name type: My Button
  3. For Behavior select: Button
  4. Click: OK
  5. With the Rectangle tool image 1 draw a: Rectangle
  6. If the Property Inspector is closed, open it: Window > Properties
  7. With the Selection tool image 2 double click on the rectangle.
  8. In the Property Inspector select any fill colour you may want: Fill Colour
  9. Select any: Stroke colour
  10. Select any: Stroke width
  11. For W (width) type: 120
  12. For H (height) type: 27
  13. For X position type: 0
  14. For Y position type: 0

    Settings in the Property Inspector for the rectangle in the Up frame.

  15. In the Timeline right click (Mac: Ctrl click) in the Over frame and select: Insert keyframe
  16. With the Selection tool image 2 double click on the rectangle.
  17. In the Property Inspector select a new: Fill colour

    The Over frame.
Step Two: Creating a symbol to contain the menu - Menu Button - Frame 1

It is best to have the menu inside a symbol, as it makes the menu much more flexible. Then you can have the menu on stage and move from frame to frame within the movie and the menu stays intact. You can also copy and paste the menu to a completely different movie and reuse it. If you build the menu on the main stage you have to re-build it for every new frame that you wish to use it in.

  1. Go to: Insert > New Symbol
  2. Type the name: Menu
  3. Click: OK
  4. For behavior select: Movie Clip
  5. If your Library is not open, open it: Window > Library
  6. Drag onto the stage: My button
  7. In Property Inspector position the button at X: 0
  8. In Property Inspector position the button at Y: 0
  9. With the text tool image 4, type on top of My Button: Menu
  10. Open the Actions panel (Window > Actions) and attach the following actionscript to : My Button

    on (release) {
        gotoAndStop(2);
    }

    Note: Make sure you select gotoAndStop(2) not gotoAndPlay(2)

  11. Attach the following actionscript to: frame 1

    stop();
Frame 1 of the Menu symbol.


Step three: The Menu - Frame 2

    1. Go to frame 2 and right click and select: Insert Keyframe
    2. Attach the following actionscript to the Menu button in frame 2:

      on (release) {
          gotoAndStop(1);
      }

      Note: This button will now take you back to frame 1, the button in frame 1 takes you forward to frame 2.

    3. Double click on the word Menu and type: Close Menu
    4. When you have finished typing return to the Selection tool: image 2

      image 6
      Close Menu Button in Frame 2.

    5. Drag out three (or more) buttons from the Library and place them in a column next to the menu button.
    6. Open the Align panel: Window > Design Panels > Align (ctrl+k)
    7. Select all three buttons (use image 2 shift click to select multiple objects).
    8. Deselect the Align to stage button (if it is selected): image 8
    9. Use the Align panel to get the distance between the buttons the same: image 9
    10. Use the Align panel to get the buttons in a straight line: image 10
    11. For X position type: 130
    12. For Y position type: 0

      image 11
      The three new buttons correctly aligned.

    13. With the Text tool image 4, type on top of the buttons: Home, Next Page, webwasp

      Your stage should look similar to this. (Click to enlarge)

    14. Place the following actions onto the: Home Button

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

      Note: You need to type _root so that the button refers back to the main stage and not to frame 10 in the menu Symbol.

    15. Place the following actions onto the: Next Page Button

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

      Note: Takes you to frame 20 of the main stage.

    16. Place the following actions onto the: webwasp Button

      on (release) {
          getURL("http://www.webwasp.co.uk");
      }

      Note: Takes you to to a new web page.

Step four: The main stage
    1. If your Edit Bar is closed, open it: Window > Tool Bars > Edit Bar
    2. Click on the Scene 1 button: image 13

      Note: This will take you back to the main stage. At this point your main stage should still be empty.

    3. Attach the following actionscript to: frame 1

          stop();

    4. In the timeline right click on frame 10 and select: Insert Keyframe
    5. Type on stage Home and place any other content you may wish to have.
    6. Go to frame 20 in the time line, right click and select: Insert Keyframe
    7. Remove the word Home and replace it with something else (such as Frame 20). If you do not do this, you cannot see the difference between frame 10 and 20.
    8. In the Timeline click on the Insert New Layer button: image 14
    9. In the Timeline click in frame 1 of this new layer. Select: Frame 1
    10. If your Library is closed, open it: Window > Library
    11. Drag onto stage the symbol: Menu

      Hey presto you've finished your movie! So now it's time to test.

    12. Go to: Control > Test Movie

Step five: Auto Retract the Menu - Layer 2

This is an section is an added feature. If you wish you can get the menu to auto-retract:

This Menu has an auto retract. Click on Menu then move the mouse to the right of the movie. The menu should close automatically.
  1. Right click on the Menu button and select: Edit in Place

    You can see the Menu tab at the top in the Edit Bar.

  2. Double click on Layer 1 and re-name it to: Menu
  3. In the timeline add a new Layer by clicking on the Insert Layer button: image 14
  4. Re-name this new Layer to: Retract
  5. Drag the Retract Layer so that it is under the Menu Layer.
  6. Right click on frame 2 of the Retract Layer and select: Insert Blank Keyframe
  7. With the Brush tool image 16 draw a thick line right around the buttons. Make sure the brush marks do not touch the buttons or come too close to them.

    image 17
    Gray brush stroke going all the way around the buttons.

    • Make sure the line is not too close to the buttons.
    • Make sure the line does not touch the buttons.

  8. Continue to brush in the area between the line and the edge of stage.

    Brush marks go right up to the edge of stage.

  9. Return to the Selection tool: image 2
  10. Right click the brush mark and select: Convert to Symbol
  11. For Name type: Retract Button
  12. For Behavior select: Button
  13. Click: OK
  14. Right click on this new Retract button and select: Edit in Place

    Note:
    This will enable you to edit the new button.

  15. In the Timeline right click the Hit frame and select: Insert Keyframe

    Note: This makes a copy of the brush strokes in the hit area.

    The hit area is now ready. (Click to enlarge)

  16. Click on the Keyframe (black dot) in the Up frame.
  17. This should not only move you to the Up frame but select the brush stoke on stage. If it is not selected click on it to select it.
  18. Delete the brush stroke from this frame by going to your keyboard and pressing: Delete

    The Up frame is now empty.

  19. We have now finished editing the button. Click on the at the top to return to editing the Menu.

    Drop down Menu
    The brush mark should now be a aqua blue. (Click to enlarge)

    Note: The aqua blue is transparent in the Movie

  20. Attach the following actionscript to Retract button:

        on (rollOver){
            gotoAndStop(1);
        }

    What this does is on roll-over go back to frame 1. This means that the movie will move automatically to frame 1 and the menu is closed in frame 1. Try it

  21. Go to: Control > Test Movie


Alternative

This has a tweened dropdown that is masked.

The menu above is identical to the previous example except that the dropdown section opens with a tween. The first part of the tween is masked so that the menu appears to come out of nowhere.

Cross Ref: To learn how to create a Tween see beginners tutorial: Tweening

Cross Ref: To learn how to create a Mask see beginners tutorial: Masks


Other Flash Menus Systems on this site

Sliding Menu: An Intermediate level tutorial on how to build a very flexible menu system based on actionscript. This is the menu system used on the webwasp home page. I used this as it is allows you to pull any menu, or several menus, on and off stage at once. You can also use the same actionscript to move other objects around the stage.

Swinging Menu: An Intermediate level tutorial for a menu that bounces on and off stage and looks great. Built with actionscript.

Scrolling Menus: An Intermediate level tutorial for a menu that scrolls.

   
subscribe to newsletter