Toxiclab.org

Coloring Up and Down menu

24.4.2007, 23:59
Submited in: Flash | Total Views: 96179

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

Are you a website owner?
Click here to register and submit your tutorials!

Browse by category


Most popular tutorials


Resources Worth visiting


Friends