Toxiclab.org

Red flash sound menu

8.2.2007, 15:34
Submited in: Flash | Total Views: 74613

This step-by-step tutorial explains how to create advanced red flash sound menu in flash 8 using the Action Script. This sound menu is very attractive and you can use it for any web sites. You will also learn:

1. How to design a menu.
2. How to create stylish menu buttons.
3. How to use Free Transform Tool (Q).
4. How to create the Invisible Button.
5. How to apply Action Script code on mene and more

 

Step 1

Make a new flash document, size 250x180px. Set the frame rate at 42 fps (Frames per Second), and background color at #E3E3E3.



Step 2


Now, it's time for menu design, so take the Line Tool (N), for line color set #C0C0C0 and choose Solid as type of line, with thickness set to 1. See the picture below.



Step 3

Then, draw a five "lines" that will represent a menu lines.See the picture below.



Step 4

Take the Text Tool (T), go to the Properties Panel (Ctrl+F3) below the stage and choose the following options:

1.Select a Static Text field.
2. Select a Trebuchet MS font
3.Choose 12 as font size and bold it.
4.Select black as color
5.As the rendering method, select Anti-alias for readability.



After that, create your text like it is shown on the picture below.



Step 5

Using the Flash tools for drawing, draw on the left side of every text two arrows. See the picture below.



Step 6

Take the Selection Tool (V) and select the first text in menu (in my example "home page"), including the arrows. After that, press F8 key to convert this text into a Movie Clip Symbol. See the picture below.



Step 7

While the new made Movie Clip is still selected, go to the Properties Panel (Ctrl+F3) below the stage. On the left side, You will find the Instance name input field there. Call this Movie Clip HomePage. See the picture below.



Step 8

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



Step 9

Take the Selection Tool (V) and select only the arrows. Then, press Ctrl+X key (Cut), create a new layer, select it and press Ctrl+Shift+V key (Paste in Place).

Step 10

Go back on layer 1, select the text again and press again F8 key to convert it again into a Movie Clip Symbol.



Step 11

Click on frame 10 and 20 and press F6 key. While you're still on frame 20, take the Selection Tool (V), click once on the Movie Clip ("home page") to select it and go to the Properties Panel (Ctrl+F3) below the stage. On the right, you will see the Color menu. Select Tint and for Tint color set white. See the picture below.



Step 12

After that, go back on frame 10 and using the arrow keys or by mouse, move the text ("home page") a little left. Then, take the Selection Tool (V), click once again on the Movie Clip ("home page") to select it and go to the Properties Panel (Ctrl+F3) below the stage. On the right, you will see the Color menu. Select Tint and for Tint color set white.



Step 13

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



Step 14

Lock layer 1, select layer 2 (arrows layer), and press F8 key (Convert to Symbol) to convert this arrows into a Movie Clip Symbol.

Step 15

Click on frame 10 and 20 and press F6 key. Then, while you're still on frame 20, take the Selection Tool (V) and click once on the arrows to select it. Then, go to the Properties Panel (Ctrl+F3) and on the Color menu choose Tint. For Tint color choose again white color and for Tint Amount 100%. See the picture in step 11.

Step 16

Go back on frame 15 and using the Arrow keys or by mouse, move the arrows a little right.After that, repeat step 15. See the picture below.



Step 17

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



Step 18

Lock layer 2 and create a new layer above layer 2 (layer 3).

Step 19

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 set #D9031C. See the picture below.



Step 20

Then, on the left side of arrows, draw a "rectangle" about 2.5x21px. See the picture below.



Step 21

While the "rectangle" is still selected, press F8 key to convert it into a Movie Clip Symbol.



Step 22

Click on frame 30 of layer 3 and press F6 key. Then, take the Free Transform Tool (Q), press and hold down Alt key and do like it is shown on the picture below.



After that, go back on frame 1, take the Selection Tool (V), click once on the "rectangle" to select it and go to the Properties Panel below the stage.

On the right, you will see the Color menu. Select Alpha in it and put it down to 0%.



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 appears.

Step 24

Go back on the main scene (Scene1). Create a new layer above layer 1 and name it I.B.1 (Invisible Button 1). Take the Rectangle Tool (R), for Stroke color choose no color, for Fill color choose any color, and draw a "rectangle" over the Movie Clip ("home page"). See the picture below.



Step 25

While the "rectangle" is still selected, press F8 key to convert it into a Button.



Step 26

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

Step 27

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



Step 28

Create 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), and Import it into a Flash library (File > Import > Import to Library).



Step 30

While you're still on Over state, using the "drag and drop" technique, move the sound from the Library on the stage. See the picture below.



Step 31

Go back on the main scene (Scene1).

Step 32

Take 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_HomePage = true;
}

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

on (release){
getURL("http://www.toxiclab.org/");
}

Step 33

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

_root.HomePage.onEnterFrame = function() {
if (mouse_over_HomePage) {
_root.HomePage.nextFrame();
} else {
_root.HomePage.prevFrame();
}
};

We're done!

Test your movie (Ctrl+Enter).

Enjoy!

Download example

Are you a website owner?
Click here to register and submit your tutorials!

Browse by category


Most popular tutorials


Resources Worth visiting


Friends