Blue flash menu with sound

Step 1

Create a new flash document. Select Modify > Document (shortcut key: Ctrl+J ). Set the width of your document to 410 pixels and the height to 40 pixels. Select white as background color and set your Flash movie's frame rate to 28 fps. Then, click ok.



Step 2

Take the Rectangle Tool (R). In the Colors portion of the Tool panel, block the Stroke color by clicking on the little pencil icon and then on the small square with the red diagonal line. For Fill color choose #3487B3 and draw a rectangle shape about 100x30 px like it is shown on the picture below!





Step 3

While the rectangle shape is still selected, press Ctrl+D key (duplicate - three times). After that, set your rectangle shapes as shown in the picture below - one to the other!



Step 4

Select now all rectangle shapes and go to the Align Panel (Ctrl+K) and do the following:

1. Make sure that the Distribute horizontal center turned on.



Step 5

After that, while the rectangle shapes is still selected, press Ctrl+G (Group) key on the keyboard, to all groups!

Step 6

Then, go again to the Align Panel (Ctrl+K) and do the following:

1. Make sure that the Align/Distribute to Stage button is turned on,
2. Click on the Align horizontal center button and
3. Click the Align vertical center button.



Now, we aligned our rectangle shapes with background.



Step 7

Press now Ctrl+B key (Break apart), to break apart this rectangle shapes.



Step 8

It's time for text, so take the Text Tool (A) and go to the Properties Panel (Ctrl+F3) below the stage. Then, choose the following options:

1. Select a Static Text field,
2. Select Arial Narrow as font.
3. Choose 14 as font size and bold it,
4. Select white as color,
5. As the rendering option, select Use Anti-alias for readability.



Type now text for each rectangle separately, like it is shown on the picture below!



Step 9

Using a flash tools for drawing, draw a symbol and place it on the position like it is shown on the picture below!



Step 10

Also, create that symbol for each button like it is shown on the picture below!



Step 11

Take now the Selection Tool (V) and select only the first shape of button. See the picture below!



Step 12

Then, press F8 key (Convert to Symbol) to convert this shape of button into a Movie Clip Symbol.



Step 13

While the new made Movie Clip is still selected, go to the Properties Panel below the stage. On the left side, You will find the Instance name input field there. Call this Movie Clip "home_mc". See the picture below!



Step 14

Double-click on the movie clip on stage with the Selection tool(V).You should now be inside the Movie Clip.

Step 15

It's time for animation, so take the Selection Tool (V) and select only symbol. Then, press Ctrl+X key (Cut). After that, create a new layer above the layer 1 (layer 2) and press Ctrl+Shift+V key (paste in palce).

Step 16

Click now on frame 15 of layer 2 and press F6 key. Then, move symbol a little right. See the picture below!



Step 17

Right-click anywhere on the gray area between the two keyframes on the timeline and choose Create Motion Tween from the menu that appears.See the picture below.



Step 18

Go back now on layer 1, take again the Selection TOol (V) and select only text (Home). Then, press agian Ctrl+X key (Cut). Afetr that, create a new layer above the layer 1 (layer 3), select it and press Ctrl+Shift+V key (Paste in Place).

Step 19

Select now frame 15 of layer 3 and press F6 key. After that, move Home text a little left like it is shown on the picture below!



Step 20

Right-click anywhere on the gray area between the two keyframes on the timeline and choose Create Motion Tween from the menu that appears. See the picture below!



Step 21

Go back on the main scene (Scene 1).

Step 22

Take now the Selection Tool (V) and click twice on the layer 1 to change his name in menu.

Step 23

After that, create a new layer above the layer menu and name it invisible button.

Step 24

Select now the invisible button layer and take again the Rectangle Tool (R). In the Colors portion of the Tool panel, block the Stroke color by clicking on the little pencil icon and then on the small square with the red diagonal line. For Fill color choose any color and draw a rectangle over the first button shape. See the picture below!



Step 25

While the rectangle is still selected, press F8 key (Convert to Symbol) to convert this rectangle into a Button Symbol.



Step 26

Double-click on the button on stage with the Selection tool(V). You should now be inside the button.



Step 27

Move now the keyframe from the Up state to the Hit state. See the picture below.



Step 28

Create now a new layer above layer 1 (layer 2).

Step 29

Click on the Over state of layer 2 and press F6 key. After that, find somewhere any sound (mp3. file) which you like to use for this lesson, and Import it into a Flash library (File > Import > Import to Library). You can also if you like, download my source file at the end of lesson, and use my sound file from flash library!



Step 30

Then, while you're still on Over state frame, move that sound using the drag and drop technique from flash library on flash stage.



Step 31

Go back on the main scene (Scene1).

Step 32

Take now the Selection Tool (V), click once on the Invisible Button to select it, open the Action Script Panel (F9) and enter the following Action Script code inside the Actions panel:

on (rollOver) {
_root.mouse_over_home_mc = true;
}

on (rollOut) {
_root.mouse_over_home_mc = fstartlse;
}

on (release){
getURL("http://www.flashvault.net/");
}

Step 33

Create a new layer above the invisible button layer and name it action. Then, click on the first frame of layer action script and enter the following Action Script code inside the Actions panel:

_root.home_mc.onEnterFrame = function() {
if (mouse_over_home_mc) {
_root.home_mc.nextFrame();
} else {
_root.home_mc.prevFrame();
}
};

Now, we're donw with the first button. Repeat this process also for every other buttons in menu!
Enjoy..!!

Download source file (.fla)

Posted in: Flash