Learn this tutorial and see how to create coloring Up and Down menu in flash. To create this tutorial you have to use Action Script. You will also learn, how to design a menu and how to animate it. Let's go!
Step 1
Start flash. Select Modify > Document (shortcut key: Ctrl+J ). Set the width of your document to 380 pixels and the height to 100 pixels. Select #f8f8f2 as background color and set your Flash movie's frame rate to 24 fps. Then, click ok.
Step 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 #393939 color and draw a "rectangle" about 70x70px and place it on the position like it is shown on the picture below.
Step 3
While the rectangle is still selected, take the Selection Tool (V), press and hold down Shift key and duplicate it four times like it is shown on the picture below.
Step 4
After that, while the Selection Tool (V) is still selected, select only the second rectangle and change its color to #FF5400. See the picture below.
Step 5
After that, select the another rectangle (third) and change its color in #19A3CB.
Step 6
Then, select another rectangle (fourth) and change its color in #FFA800.
Step 7
And finally, select the last rectangle and change its color in #94CA1A. See the picture below.
Step 8
Take the Text Tool (A) and go again to the Properties Panel (Ctrl+F3) below the stage. Then, choose the following options:
1. Select a Static Text field,
2. Select a MS Reference Sans Serif font.
3. Choose 10 as font size,
4. Select white as color,
5. As the rendering option, select Use Anti-alias for readability.
Then, create your text like it is shown on the picture below.
Step 9
Take the Selection Tool (V) and select only the first rectangle with text (in my example "home page"). Then, press F8 key (Convert to Symbol) to convert this recatngle and text into a Movie Clip Symbol. See the picture below.
Step 10
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_mc.
Step 11
Double-click on the movie clip on stage with the Selection tool(V).You should now be inside the Movie Clip.
Step 12
Take again the Selection Tool (V), select only a text and press Ctrl+X key (Cut). After that, create a new layer and name it text.Then, select the text layer and press Ctrl+Shift+V key (Paste in place).
Step 13
Go back on layer 1, double click on it with Selection Tool (V) and change its name in rectangle.
Step 14
While you're still on layer recatngle, press again F8 key (Convert to Symbol) to convert this rectangle into a Movie Clip Symbol.
Step 15
Click on frame 15 of layer rectangle and press F6 key on the keyboard.
Step 16
While you're still on frame 15, take the Free Transform Tool (Q), press and hold down Alt key and decrease a rectangle like the picture below shows you:
Step 17
Right-click anywhere on the gray area between the two keyframes on the timeline and choose Create Motion Tween from the menu that appears.See the picture below.
Step 18
Select the text layer and press F8 key (Convert to Symbol) to convert this text into a Moive Clip Symbol.
Step 19
Click on frame 15 of layer text and press F6 key.
Step 20
Then, using the arrows key, or by mouse, move your text a little up.
Step 21
Right-click again anywhere on the gray area between the two keyframes on the timeline and choose Create Motion Tween from the menu that appears.
Step 22
Go back on the main scene (Scene 1).
Step 23
Create a new layer and name it Invisible Button. Then, create the invisible button over the first rectangle and text (Movie Clip). See the picture below.
Step 24
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 actions panel:
on (rollOver) {
_root.mouse_over_homepage_mc = true;
} on (rollOut) {
_root.mouse_over_homepage_mc = fstartlse;
}
on (release){
getURL("http://www.toxiclab.org/");
}
Step 25
Create a new layer above the invisible button layer and name it action script.
Step 26
Click on the first frame of action script layer and go again to the Action Script Panel. After that, enter this code inside the actions panel:
_root.homepage_mc.onEnterFrame = function() {
if (mouse_over_homepage_mc) {
_root.homepage_mc.nextFrame();
} else {
_root.homepage_mc.prevFrame();
}
};
We're done!
Have a nice day!
Downlaod example
