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)

Blue flash menu with sound

8.12.2008, 21:52    Total views: 64993
Page:  1  2

In this Flash 8 lesson explained in extreme detail, I will teach you how to make a powerful flash menu with sound. You can use this sound menu for any web site. To make this lesson, you also have to use action script code. Using this lesson, you will also learn:

1. How to design flash menu,
2. How to animate it,
3. How to apply action script code on it,
4. How to create movie clip,
5. How to create invisible button,
5. how to use action script panel and much more!


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.

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: 306837

2. High-tech city animation
Total views: 267219

3. Water effect
Total views: 235136

4. Photo slide show
Total views: 216596

5. Special Picture Effect
Total views: 189911

Related links