Advanced color menu in flash with sound
1. How to design a menu,
2. How to animate it,
3. How to import any sound file into a flash library,
4. How to apply action script code on menu to make it more powerful,
5. How to use Free Transform Tool (Q) 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 380 pixels and the height to 50 pixels. Select #f8f8f2 as background color. Set your Flash movie's frame rate to 28 and click ok.
Step 2
Take now 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 #E9E9E9 and draw a rectangle about 380x9px on the top position of stage like it is shown on the picture below!
Step 3
Take now the Line Tool (N) and go to the Properties Panel (Ctrl+F3) below the stage. Then, choose the following options:
Then, draw a three vertical lines like it is shown on the picture below.
First vertical line place on X:95 and y:22, second on X:190, Y:22 and the third place on x:285 and y:22. See the pictures below!
Step 4
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 Trebuchet MS as font.
3. Choose 12 as font size and bold it,
4. Select #585858 as color,
5. As the rendering option, select Use Anti-alias for readability.
Then, type the name of buttons like it is shown on the picture below.
Step 5
Take the Selection Tool (V) and select the first buttons text (in my example “HOME”). Then, press F8 key (Convert to Symbol) to convert this buttons name (HOME) into a Movie Clip Symbol.
Step 6
While the new made Movie Clip is still selected, go again 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". See the picture below!
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
It's time for animation, so while the text home is still selected, press again F8 key (Convert to Symbol) to convert this text again into a Movie Clip Symbol again.
Step 9
Click after that on frame 10 and press F6 key.
Step 10
While you're still on frame 10, move your buttons text a little up. See the picture below!
Step 11
After that, take the Selection Tool (V) and click once on the buttons text (Movie Clip) to select it. After that, go to the Properties Panel (Ctrl+F3) below the stage. On the right, you will see the Color menu. Select Tint in it, for Tint color choose white and put it down to 100%. See the picture below.
Step 12
Right-click now anywhere on the gray area between frame 1 and 10 on the timeline and choose Create Motion Tween from the menu that appears. See the picture below!
Step 13
Create now a new layer above the layer 1 (layer 2). After that, using the drag and drop technique, move layer 2 below the layer 1.
Step 14
Select layer 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 #D7D3C1 and draw a rectangle 93x40px on the position like it is shown on the picture below!
Step 15
While the rectangle is still selected, press F8 key (Convert to Symbol) to convert this recatngle into a Movie Clip Symbol.
Step 16
Click now on frame 10 and press F6 key. Then, go back on the first frame, take the Free Transform Tool (Q) and do the following.
Step 17
After that, take the Selection Tool (V) and click once on the rectangle that you just decreased. 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%. See the picture below!
Step 18
Right-click now anywhere on the gray area between frame 1 and 10 on the timeline and choose Create Motion Tween from the menu that appears. See the picture below!
Step 19
Go back on the main scene (Scene 1).
Step 20
Double click on layer 1 with the Selection Tool to rename its name in menu. After that, create a new layer above the layer 1 and name it invisible button.
Step 21
Select now the invisible button layer and take again 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 any color and draw a rectangle over the first button. See the picture below!
Step 22
While the rectangle is still selected, press F8 key (Convert to Symbol) to convert this rectangle into a Button Symbol.
Step 23
Move now 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) which you like to use, and Import it into a Flash library (File > Import > Import to Library).
Step 26
Go back 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_home = true;
}
on (rollOut) {
_root.mouse_over_home = fstartlse;
}
on (release){
getURL("http://www.toxiclab.org/");
}
Step 28
Create a new layer above the invisible button layer 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.home.onEnterFrame = function() {
if (mouse_over_home) {
_root.home.nextFrame();
} else {
_root.home.prevFrame();
}
};
Now, we're donw with the first button. Repeat this process also for every other buttons in menu!
Have a nice day!
Download example
via : flashperfection
Labels: flash tutorial
1 Comments:
cool effect
fine.
Post a Comment
Subscribe to Post Comments [Atom]
<< Home