This is a complete, step-by-step tutorial that will help you create a cool Flash menu with swings in and out. After you finish it, this is how it will look:

Don’t be scared if it’s pretty long, as it includes every step in the book so you can understand better how to create the menu. Here we go!

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:

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

Step I: 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 II: 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:

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 included so that the Menu Bar will be visible throughout the entire Movie. At this stage, the Movie has no content, but we will add content in the following steps. 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 III: 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 IV: 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!!

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 V: 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 VI: 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 VII: 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