Web Design Tutorials: Photoshop, HTML, Flash, PHP

Flash Tutorial – Full flash menu with sound and url

Posted on Jan 23rd, 2011 in Flash Tutorials | 0 comments

In this thoroughly explained, detailed lesson, I will show you how to create full flash menu with sound and url. To make this attractive and advanced flash menu, you have to use action script code and some special flash tricks. You can use this menu for any web site. Using this lesson, you will also learn how to design flash menu, how to animate it, how to import any sound file into a flash library and after that into a flash stage, how to apply action script code on menu and much much more!

Step 1

Create a new flash document. Select Modify > Document (shortcut key: Ctrl+J ). Set the width of your document to 390 pixels and the height to 64 pixels. Select #B4B2AB as background color and set your Flash movie’s frame rate to 44 fps. Then, click ok.

Step 2

Select 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 ( Futura BdCn BT ) as font.
3. Choose 14 as font size and bold it,
4. Select #221914 as color,
5. As the rendering option, select Use Anti-alias for readability.

Type now text like it is shown on the picture below!

Step 3

Using a flash tools for drawing and painting (Line Tool and Paint Bucket Tool), draw the black arrows shape above the text like it is shown on the picture below!

Step 4

Take now the Selection Tool (V) and select only the first text and arrow. See the picture below!

After that, hit F8 key (Convert to Symbol) to convert this text and arrow into a Movie Clip Symbol.

Step 5

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 “About_Us”. See the picture below!

Step 6

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

Step 7

Call the current layer text. Double-click on its default name (Layer 1) to change it. Press Enter once you have typed in the new name!

Step 8

It’s time for menu animation, so select the Selection Tool (V) and select only the arrow. After that, hit Ctrl+X key (Cut) to cut it. Then, create a new layer above the text and name it arrow.

Step 9

Select now arrow layer and press Ctrl+Shift+V key (Paste in Place).

Step 10

While the arrow shape is still selected, hit F8 key (Convert to Symbol) to convert it into a Movie Clip Symbol.

Step 11

Click now on frame 5 and 10 and hit F6 key on the keyboard.

Step 12

While you’re still on frame 10, take the Selection Tool (V) and click once on the arrow to select it. Then, go to the Properties Panel (Ctrl+F3) below the stage. On the right, you will see the Color menu. Select Tint on it and make the adjustments as follow:

Step 13

Go back now on frame 5, select the Selection Tool (V) and move the arrow shape a little up.

Step 14

Right-click anywhere on the gray area between frame 1 and 5 and frame 5 and 10 on the timeline and choose Create Motion Tween from the menu that appears.

Step 15

Go back now on text layer, select the text and hit F8 key (Convert to Symbol) to convert it into a Movie Clip Symbol.

Step 16

Click now on frame 5 and 10 and hit F6 key. While you’re still on frame 10, repeat step 12, but for Tint color for this time set #F8F8EE color.

Step 17

Go back now on frame 5 and move text a little up, using the Selection Tool (V), or by arrows key on the keyboard.

Step 18

Repeat now step 14.

Step 19

Create now a new layer and name it rectangle shape. After that, place that rectangle shape layer above the layer text. See the picture below!

Step 20

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 #303030 and draw a rectangle shape about 130×2 px and place it on the position like it is shown on the picture below!

Step 21

While the rectangle shape is still selected, hit F8 key (Convert to Symbol) to convert this rectangle shape into a Movie Clip Symbol.

Step 22

Click now on frame 10 and hit F6 key on the keyboard. While you’re still on frame 10, select the Free Transform Tool (Q) and do like it is shown on the pictur below!

Step 23

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

Step 24

Go back now on the first frame, select the Selection Tool (V) and click once on the rectangle shape to select it. Then, go to the Properties Panel (Ctrl+F3) below the stage. On the right, you will see the Color menu. Select Alpha in it and put it down to 0%.

Step 25

Go back on the main scene (Scene 1).

Step 26

Call the current layer menu. Double-click on its default name (Layer 1) to change it. Press Enter once you have typed in the new name!

Step 27

After that, create a new layer above the layer menu and name it Invisible Button.

Step 28

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 shape over the first button shape. See the picture below!

Step 29

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

Step 30

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

Step 31

It’s time for sound, so create now a new layer above layer 1 and name it sound. Download now my example file (fla) at the end of tutorial and open it into a flash. After that, open my flash library (Ctrl+L), find my sound file, select it and press Ctrl+C key (Copy). After that, go back on the flash stage of lesson, select the flash library and hit Ctrl+V key (Paste). See the picture below!

Step 32

Click on the Over state of layer sound and press F6 key. While you’re still on Over state frame, move the sound file using the drag and drop technique, from flash library on the flash stage.

Step 33

Go back on the main scene (Scene1).

Step 34

Select 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_About_Us = true;
}

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

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

Step 35

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

_root.About_Us.onEnterFrame = function() {
if (mouse_over_About_Us) {
_root.About_Us.nextFrame();
} else {
_root.About_Us.prevFrame();
}
};

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

Have a nice day!

Source: flashvault.net