Flash tutorials
Home 3D (2) Actionscripting (66) Animation (108) Audio (4) Drawing (7) Full flash sites (4) Getting Started (15) Navigation (25) Special Effects (61) Text Effects (38)

Full flash menu with sound and url

24.4.2009, 12:14    Total views: 51806
Page:  1  2

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!

Example:



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 130x2 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%.

Have questions about this tutorial?
Visit our friendly Community Forums!
Digg it! Add this tutorial to del.icio.us! Furl it! Add this tutorial to reddit! Spurl it! Add this tutorial to technorati!

Top tutorials

1. Advanced full flash site - Part 1
Total views: 292727

2. High-tech city animation
Total views: 240778

3. Water effect
Total views: 224845

4. Photo slide show
Total views: 207565

5. Special Picture Effect
Total views: 183335



Related links