|
|
Advanced flash menu with effects and sound - ActionScript Webmaster Tips, Knowledge Base Webmaster Tools
| Home > ActionScript > Advanced flash menu with effects and sound | |
| | Category | : ActionScript | | Written by | : Admin | | Date | : 2008-11-10 | | Rating | : 0  | Voted : 0 times | | Hit | : 37 | | | | |
|
1. How to apply action script code on this menu to make it more powerful and attractive,
2. How to apply flash 8 filters on it,
3. How to use some special flash tips and tricks,
4. How to Import sound file on it,
5. How to create invisible button and much more!
Step 1
Create a new flash document. Press Ctrl+J key on the keyboard (Document Properties) and set the width of your document to 450 pixels and the height to 340 pixels. Select #222222 color as background color.Set your Flash movie's frame rate to 36 and click ok. See the picture below.
Step 2
Take the Rectangle Tool (R) and go to the Properties Panel (Ctrl+F3) below the stage. Then, choos the following options:
1. Enter #656565 for the stroke color.
2. Enter #222222 for the fill color.
3. Select broken line as the type of outline, with the line thickness set to 2.
Then, draw a four rectangles like it is shown on the picture below.
Step 3
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 a Verdana as font.
3. Choose 16 as font size,
4. Select white as color,
5. As the rendering option, select Use Anti-alias for readability.
Then, type on the center of the first rectangle "HOME PAGE". See the picture below.
Do that also for every other rectangle.See the picture below.
Step 4
Take the Selection Tool (V) and select only the first rectangle and text. See the picture below.
Step 5
Then, press F8 key (Convert to Symbol) to convert this rectangle and text into a Movie Clip Symbol. See the picture below.
Step 6
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.
Step 7
Double-click on the movie clip on stage with the Selection tool(V).You should now be inside the Movie Clip.
Step 8
Take again the Selection Tool (V), select only a text and press Ctrl+X key (Cut). After that, create a new layer above the layer 1 and name it text.Then, select the text layer and press Ctrl+Shift+V key (Paste in place).
Step 9
Go back on layer 1, double click on it with Selection Tool (V) and change its name in rectangle.
Step 10
After that, select only the rectangle and press F8 key (Convert to Symbol) to convert this rectangle into a Movie Clip Symbol.
Step 11
Click after that on frame 2 and frame 15 of layer rectangle and press F6 key.
Step 12
While you're still on frame 15, take the Selection Tool (V) and click once on the rectangle to select it. After that, go to the Properties Panel (Ctrl+F3). On the right, you will see the Color menu. Select Tint in it, for Tint color choose D95000 and put it down to 100%. See the picture below.
Step 13
Go back on frame 2, take the Selection Tool (V) and click again once on the rectangle to select it. Then, go to the Properties Panel (Ctrl+F3) below the stage.Click on the Filters tab in the Properties Panel.After that, click on the plus icon and select the Bevel filter. Make the adjustements as follows:
1. Blur X and Y : 100
2. Quality : Medium
3. Strength:1000%
4. Shadow: white
5. Highlight: white
6. Angle:304
7. Type: Inner
Now, you have this:
Step 14
Right-click again anywhere on the gray area between the frame 2 and frame 15 on the timeline and choose Create Motion Tween from the menu that appears.
Step 15
Select now text layer and press again F8 key (Convert to Symbol) to convert this text into a Movie Clip Symbol.
Step 16
While the new made Movie Clip is still selected (text), go to the Properties Panel (Ctrl+F3) again. Click on the Filters tab in the Properties Panel.After that, click on the plus icon and select the Glow filter. Make the adjustements as follows:
1. Blur X and Y : 8
2. Quality : Low
3. Strength:100%
4. Color:White
Now, you have this:
Step 17
Click on frame 15 of layer text and press F6 key.
Step 18
Go back on the main scene (Scene1).
Step 19
Double click on layer 1 to rename its name into a menu. After that, create a new layer above the layer menu and name it invisible button.
Step 20
Take the Rectangle Tool (R), for Stroke color choose no color, for Fill color choose any color, and draw a "rectangle" over the first rectangle (Movie Clip).See the picture below.
Step 21
While the rectangle is still selected, press F8 key (Convert to Symbol) to convert this rectangle into a button. See the picture below.
Step 22
Double-click on the button on stage with the Selection tool (V). You should now be inside the button.
Step 23
Move the keyframe from the Up state to the Hit state. See the picture below.
Step 24
Create a new layer above layer 1 (layer 2).
Step 25
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) . You can also if you like download my sound.
Step 26
Go back again on the main scene (Scene1).
Step 27
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.flashfridge.com/");
}
Step 28
Create a new layer above the layer invisible button 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 with the first button (rectangle). Repeat this process for every other rectangle. Only difference is that you must use another instanca name.
|
|
