See this tutorial and learn how to create black-and-white flash menu. To create this tutorial, you have to use action script. You will aslo learn:
1. How to design a menu,
2. How to animate it,
3. How to apply action script on menu to make it more powerful and more.
Step 1
Open Flash and start a new project with dimension of 420 X50. Select #393838 as background color. Set your Flash movie's frame rate to 28 and click ok.
Step 2
Choose View > Rulers. Then, place the left side of background on the zero points of rulers. See the picture below.
Step 3
After that, take the Line Tool (N) and go to the Properties Panel (Ctrl+F3) below the stage. Then, make the adjustements as follows:
1. Enter #616060 for the stroke color,
2. Select Solid as the type of outline, with the line thickness set to 1.
Then, draw a vertical line on 140px points of rulers. See the picture below.
Do that also for 280px points of rulers. Now you have this:
Step 4
Take the Text Tool (A) and go to the Properties Panel (Ctrl+F3) below the stage again. Then, make the adjustements as follows:
1. Select a Static Text field,
2. Select a Antigoni as font,
3. Choose 20 as font size,
4. Select #858383 as color,
5. As the rendering option, select Anti-alias for readability.
Then, type on the left top corner of the first field "01". See the picture below.
Step 5
While the Text Tool (A) is still selected, go again to the Properties Panel (Ctrl+F3) below the stage. Then, make the adjustements as follows:
1. Select a Static Text field,
2. Select a Franklin Gothic Book as font,
3. Choose 12 as font size,
4. Select white as color,
5. As the rendering option, select Anti-alias for readability.
After that, type below the number "ABOUT US" or some other text. See the picture below:
Do that also for other two fields, but for 01, typ 02 and 03. Also, change the text. See the picture below.
Now, we have designed our menu, and its time for animation.
Step 7
Take the Selection Tool (V) and select the first field (including text and number).
Then, press F8 key (Convert to Symbol) to convert this text and number into a Movie Clip Symbol.
Step 8
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 AboutUs_mc.
Step 9
Double-click on the movie clip on stage with the Selection tool(V).You should now be inside the Movie Clip.
1. How to design a menu,
2. How to animate it,
3. How to apply action script on menu to make it more powerful and more.
Step 1
Open Flash and start a new project with dimension of 420 X50. Select #393838 as background color. Set your Flash movie's frame rate to 28 and click ok.
Step 2
Choose View > Rulers. Then, place the left side of background on the zero points of rulers. See the picture below.
Step 3
After that, take the Line Tool (N) and go to the Properties Panel (Ctrl+F3) below the stage. Then, make the adjustements as follows:
1. Enter #616060 for the stroke color,
2. Select Solid as the type of outline, with the line thickness set to 1.
Then, draw a vertical line on 140px points of rulers. See the picture below.
Do that also for 280px points of rulers. Now you have this:
Step 4
Take the Text Tool (A) and go to the Properties Panel (Ctrl+F3) below the stage again. Then, make the adjustements as follows:
1. Select a Static Text field,
2. Select a Antigoni as font,
3. Choose 20 as font size,
4. Select #858383 as color,
5. As the rendering option, select Anti-alias for readability.
Then, type on the left top corner of the first field "01". See the picture below.
Step 5
While the Text Tool (A) is still selected, go again to the Properties Panel (Ctrl+F3) below the stage. Then, make the adjustements as follows:
1. Select a Static Text field,
2. Select a Franklin Gothic Book as font,
3. Choose 12 as font size,
4. Select white as color,
5. As the rendering option, select Anti-alias for readability.
After that, type below the number "ABOUT US" or some other text. See the picture below:
Do that also for other two fields, but for 01, typ 02 and 03. Also, change the text. See the picture below.
Now, we have designed our menu, and its time for animation.
Step 7
Take the Selection Tool (V) and select the first field (including text and number).
Then, press F8 key (Convert to Symbol) to convert this text and number into a Movie Clip Symbol.
Step 8
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 AboutUs_mc.
Step 9
Double-click on the movie clip on stage with the Selection tool(V).You should now be inside the Movie Clip.
Step 10
While the Selection Tool (V) is still selected, select only a number and press Ctrl+X key (Cut). After that, create a new layer above the layer 1 and name it number.Select it and press Ctrl+Shift+V key (Paste in place).
Step 11
Go back on layer 1, double click on it with Selection Tool (V) and change its name in text.
Step 12
While the text layer is still selected, press F8 key (Convert to Symbol) to convert this text into a Movie Clip Symbol.
Step 13
Click on frame 5 and 10 and press F6 key. While you're still on frame 10, take the Selection Tool (V), click once on the text and go to the Properties Panel (Ctrl+F3) below the stage. On the right, you will see the Color menu. Select Tint in it, and choose black color and put it down to 100%. See the picture below.
Step 14
Go back on frame 5, and move your text a little right using the arrows key or by mouse.
Right-click anywhere on the gray area between frame 1 and 5 and frame 5 and 10 on the timeline and choose Create Motion Tween from the menu that appears.
Step 15
Take the Selection Tool (V), select the number layer and press F8 key (Convert to Symbol) to convert this number into a Movie Clip Symbol.
Step 16
Click on frame 5 and 10 and press F6 key. Go back on frame 5 and move the number a little down using the arrows key or by mouse. See the picture below.
Step 17
Right-click anywhere on the gray area between frame 1 and 5 and frame 5 and 10 on the timeline and choose Create Motion Tween from the menu that appears.
Step 18
Create a new layer above the number layer and name it white rectangle.
Step 19
Click on frame 8 of layer white rectangle and press F6 key. Then, take the Rectangle Tool (R) and draw a white rectangle about 140x6px and place it on the top of the first field. See the picture below.
While the white rectangle is still selected, press F8 key (Convert to Symbol) to convert this white rectangle into a Movie Clip Symbol.
Step 20
Take the Selection Tool (V) and move the white rectangle layer below the text layer. See the picture below.
Step 21
Click on frame 13 of layer white rectangle and press F6 key. After that, take the Free Transform Tool (Q), press and hold down Alt key and do like it is shown on the picture below.
Step 22
Go back on frame 8, take the Selection Tool (V), click once on the white rectangle to select it and 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%.
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
Click on frame 13 of layer text and number and press F5 key
Step 25
Go back on the main scene (Scene 1).
While the Selection Tool (V) is still selected, select only a number and press Ctrl+X key (Cut). After that, create a new layer above the layer 1 and name it number.Select it and press Ctrl+Shift+V key (Paste in place).
Step 11
Go back on layer 1, double click on it with Selection Tool (V) and change its name in text.
Step 12
While the text layer is still selected, press F8 key (Convert to Symbol) to convert this text into a Movie Clip Symbol.
Step 13
Click on frame 5 and 10 and press F6 key. While you're still on frame 10, take the Selection Tool (V), click once on the text and go to the Properties Panel (Ctrl+F3) below the stage. On the right, you will see the Color menu. Select Tint in it, and choose black color and put it down to 100%. See the picture below.
Step 14
Go back on frame 5, and move your text a little right using the arrows key or by mouse.
Right-click anywhere on the gray area between frame 1 and 5 and frame 5 and 10 on the timeline and choose Create Motion Tween from the menu that appears.
Step 15
Take the Selection Tool (V), select the number layer and press F8 key (Convert to Symbol) to convert this number into a Movie Clip Symbol.
Step 16
Click on frame 5 and 10 and press F6 key. Go back on frame 5 and move the number a little down using the arrows key or by mouse. See the picture below.
Step 17
Right-click anywhere on the gray area between frame 1 and 5 and frame 5 and 10 on the timeline and choose Create Motion Tween from the menu that appears.
Step 18
Create a new layer above the number layer and name it white rectangle.
Step 19
Click on frame 8 of layer white rectangle and press F6 key. Then, take the Rectangle Tool (R) and draw a white rectangle about 140x6px and place it on the top of the first field. See the picture below.
While the white rectangle is still selected, press F8 key (Convert to Symbol) to convert this white rectangle into a Movie Clip Symbol.
Step 20
Take the Selection Tool (V) and move the white rectangle layer below the text layer. See the picture below.
Step 21
Click on frame 13 of layer white rectangle and press F6 key. After that, take the Free Transform Tool (Q), press and hold down Alt key and do like it is shown on the picture below.
Step 22
Go back on frame 8, take the Selection Tool (V), click once on the white rectangle to select it and 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%.
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
Click on frame 13 of layer text and number and press F5 key
Step 25
Go back on the main scene (Scene 1).
Step 26
Double click on layer 1 to rename its name in menu. After that, create a new layer above the menu layer and name it Invisible Button.
Step 27
Create the Invisible button over the first button. See the picture below.
Step 28
Take the Selection Tool (V), click once on the invisible button to select it and go to the Action Script Panel (F9). Then, enter the following action script code inside the action script panel:
on (rollOver) {
_root.mouse_over_AboutUs_mc = true;
} on (rollOut) {
_root.mouse_over_AboutUs_mc = fstartlse;
}
on (release){
getURL("http://www.flashfridge.com/");
}
Step 29
Create a new layer above the invisible button layer and name it action. Click on the first frame of layer action, go again to the A.S.panel and enter this action script code inside the actions panel:
_root.AboutUs_mc.onEnterFrame = function() {
if (mouse_over_AboutUs_mc) {
_root.AboutUs_mc.nextFrame();
} else {
_root.AboutUs_mc.prevFrame();
}
};
We're done with the first button in menu. Repeat this proces for other two buttons in menu.
Enjoy!
Download source file (.fla)
discuss this topic to forum
