 |
|
|
|
|
- BROWSE FLASH TUTORIALS
- BROWSE DOWNLOADS
- Related links
Flash menu with sound
Date: 14.2.2007, 21:47 Total views: 56503
Using this thoroughly explained, detailed flash lesson, you will see how to create attractive flash menu with sound using the Action Script Code and some special flash tips and tricks. You can use this menu for any web site. Using this lesson, you will also learn how to design menu, how to animate it, how to import any sound file into a flash stage and much more! Let's start!
Step 1
Open a new Flash document.Select Modify > Document (shortcut key: Ctrl+J ). Set the width of your document to 450 pixels and the height to 50 pixels. Select white as background color. Set your Flash movie's frame rate to 30 fps and click ok See the picture below.
Step 2
Take the Text Tool (T), and in the Properties Panel (Ctrl+F3) below the stage, select the following options:
a) Select a Static Text field.
b) Select a Tahoma font
c) Choose 12 as font size and bold it.
d) Select black as color.
e) As the rendering option, select Anti-alias for animation.
Then, type the buttons name for menu. See the picture below.
Step 3
Press Ctrl+A key (Select all), to select the all buttons name, go to Align Panel (Ctrl+F3) and do the following in the Align panel:
1. Make sure that the Align/Distribute to Stage button is turned off,
2. Click on the Distribute horizontal center button.
Step 4
Take the Line Tool (N), go to the Properties Panel below the stage and chose the following options:
a) Enter #BCBCBC for the stroke color.
b) Select Solid as the type of outline, with the line thickness set to 1.
c) Turn on the Stroke hinting option to get rid of any blurry edges while drawing.
Then, draw a vertical lines between the buttons name. See the picture below.
Our menu now looks like this:
Step 5
Take the Selection Tool (V), select the first button name (in my example "home page") and press F8 key (Convert to Symbol), to convert this button name into a Movie Clip Symbol. 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.
While the buttons name ("home page") is still selected, press again F8 key (Convert to Symbol), to convert it again into a Movie Clip Symbol.
Step 8
Click on frame 10 and 20, and press F6 key.
Step 9
Go back on frame 10, take the Selection Tool (V), click once on the new made 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, for Tint color set #75B020 and for Tint Amount 100%. See the picture below.
Step 10
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 11
Create a new layer above layer 1 and name it Invisible Button. Now, it's time for Invisible Button. 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 12
While the "rectangle" is still selected, press F8 key to convert it into a Button.
Step 13
Double-click on the button on stage with the Selection tool (V). You should now be inside the button.
Step 14
Move the keyframe from the Up state to the Hit state. See the picture below.
Now, you have the invisible button. It's time for sound.
Step 15
Create a new layer above layer 1 (layer 2).
Step 16
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 17
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 18
Go back on the HomePage scene.
Step 19
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) {
gotoAndPlay(2);
}
on (rollOut) {
gotoAndPlay(11);
}
Step 20
Create a new layer above layer invisible button and name it action.
Step 21
Click on frame 10 of layer action and press F6 key. Then, go to the Action Scritp Panel and enter this code inside the Actions panel:
stop();
Step 22
Go back on frame 1 and in Action Script Panel paste this script:
stop();
Go back on the main scene (Scene 1) and test your Movie (Ctrl+Enter).
We're done with the first button in menu. Repeat this process for every other buttons in menu.
Enjoy!
Download source file (.fla)
Step 1
Open a new Flash document.Select Modify > Document (shortcut key: Ctrl+J ). Set the width of your document to 450 pixels and the height to 50 pixels. Select white as background color. Set your Flash movie's frame rate to 30 fps and click ok See the picture below.
Step 2
Take the Text Tool (T), and in the Properties Panel (Ctrl+F3) below the stage, select the following options:
a) Select a Static Text field.
b) Select a Tahoma font
c) Choose 12 as font size and bold it.
d) Select black as color.
e) As the rendering option, select Anti-alias for animation.
Then, type the buttons name for menu. See the picture below.
Step 3
Press Ctrl+A key (Select all), to select the all buttons name, go to Align Panel (Ctrl+F3) and do the following in the Align panel:
1. Make sure that the Align/Distribute to Stage button is turned off,
2. Click on the Distribute horizontal center button.
Step 4
Take the Line Tool (N), go to the Properties Panel below the stage and chose the following options:
a) Enter #BCBCBC for the stroke color.
b) Select Solid as the type of outline, with the line thickness set to 1.
c) Turn on the Stroke hinting option to get rid of any blurry edges while drawing.
Then, draw a vertical lines between the buttons name. See the picture below.
Our menu now looks like this:
Step 5
Take the Selection Tool (V), select the first button name (in my example "home page") and press F8 key (Convert to Symbol), to convert this button name into a Movie Clip Symbol. 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.
While the buttons name ("home page") is still selected, press again F8 key (Convert to Symbol), to convert it again into a Movie Clip Symbol.
Step 8
Click on frame 10 and 20, and press F6 key.
Step 9
Go back on frame 10, take the Selection Tool (V), click once on the new made 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, for Tint color set #75B020 and for Tint Amount 100%. See the picture below.
Step 10
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 11
Create a new layer above layer 1 and name it Invisible Button. Now, it's time for Invisible Button. 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 12
While the "rectangle" is still selected, press F8 key to convert it into a Button.
Step 13
Double-click on the button on stage with the Selection tool (V). You should now be inside the button.
Step 14
Move the keyframe from the Up state to the Hit state. See the picture below.
Now, you have the invisible button. It's time for sound.
Step 15
Create a new layer above layer 1 (layer 2).
Step 16
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 17
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 18
Go back on the HomePage scene.
Step 19
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) {
gotoAndPlay(2);
}
on (rollOut) {
gotoAndPlay(11);
}
Step 20
Create a new layer above layer invisible button and name it action.
Step 21
Click on frame 10 of layer action and press F6 key. Then, go to the Action Scritp Panel and enter this code inside the Actions panel:
stop();
Step 22
Go back on frame 1 and in Action Script Panel paste this script:
stop();
Go back on the main scene (Scene 1) and test your Movie (Ctrl+Enter).
We're done with the first button in menu. Repeat this process for every other buttons in menu.
Enjoy!
Download source file (.fla)
 |
Home - Contact - Privacy Policy
