Toxiclab.org

Very advanced business flash menu

23.4.2008, 1:51
Submited in: Flash | Total Views: 68452

In this thoroughly explained, detailed lesson made for Flash 8, I will show you how to create a really cool, attractive and advanced business flash menu which you can use for any web site. Using this tutorial, you will also learn:

1. How to design a menu,
2. How to apply action script code on it,
3. How to animate it,
4. How to apply alpha effect on it,
5. How to import any picture into a flash stage and much more.

Example:



Step 1

First of all, download my two pictures (one picture is original in color and one is grayscale with some effect) which we will use for this lesson.



Step 2


Open a new flash document. Select Modify > Document (shortcut key: Ctrl+J ). Set the dimensions of your document as whatever you like. Select white as background color and set your Flash movie's frame rate to 44 fps. Then, click ok.

Step 3

Choose file > Import > Import to stage (Shortcut key: Ctrl+R) and import my grayscale picture into a flash stage.

Step 4

While the picture is still selected, press F8 key (Convert to Symbol) to convert this picture into a Movie Clip Symbol.



Step 5

While the new made Movie Clip is still selected, go to the Properties Panel below the stage. On the left side, You will find the Instance name input field there. Call this Movie Clip picture1. See the picture below.



Step 6

Double-click on the movie clip on stage with the Selection tool(V).You should now be inside the Movie Clip.



Step 7

After that, create a new layer (layer 2) above the layer 1 and name it original picture. Then, choose again File > Import > Import to stage (Shortcut key: Ctrl+R) and import my original picture into a flash stage and place it on the same position as the grayscale picture.

Step 8

While the original picture is still selected, press F8 key (Convert to Symbol) to convert this original picture into a Movie Clip Symbol.



Step 9

Press then F6 key twenty times. See the picture below.



Step 10

Go back on the first frame and press delete key on the keyboard. Do this also for frame 3,5,7,9,11,13,15,17 and 19. See the picture below.



Step 11

Go back now on the frame 2, take the Selection Tool (V) and click once on the original picture. After that, go again 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 22%.



Step 12

Select now frame 4 and repeat step 10, but for this time for alpha set 34%.

Step 13

After that, select frame 6 and for Alpha set 48%. Now, For frame 8 set alpha to 58%, for frame 10 to 66%, for frame 12 to 77%, for frame 14 to 80%, for frame 16 to 90% and for frame 20 to 100%.

Step 14

Go back now on frame 10, take the Free Transform Tool (Q) and enlarge picture a little.



Do that also for frame 12 and 16.

Step 15

Create a new layer above the layer original picture and name it button. After that, click on frame 20 and press F6 key.

Step 16

While you're still on frame 20, 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 #D01515 and draw a “rectangle” about 268x24px and place it on the position like it is shown on the picture below.



Step 17

While the rectangle is still selected, press F8 key (Convert to Symbol) to convert this rectangle into a Movie Clip Symbol.



Step 18

Click on frame 30 and press F6 key. After that, go back on frame 20, take the Free Transform Tool (Q). press and hold down Shift key and decrease the rectangle like it is shown on the picture below.

 

Step 19

While you're still on frame 20, take the Selection Tool (V) and click once on the rectangle to select it. Then, go to the to the Properties Panel below the stage. On the right, you will see the Color menu. Select Alpha in it and put it down to 0%.



Step 20

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 21

Create a new layer above the layer button and name it text. After that, click on frame 30 and press F key.

Step 22

While you're still on frame 30 of layer text, 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 14 as font size.
4. Select white as color,
5. As the Change orientation of text option, select Vertical, Left to Right,
5. As the rendering option, select Use Anti-alias for readability.





Then, type some text on the button. For this example, I have typed "About us". See the picture below.



Step 23

Press now F6 key five times. See the picture below.



Step 24

After that, go back on frame 31 and 33 and press delete key on the keyboard.



Step 25

Click on frame 34 of layer original picture and layer 1 and press F5 key.



Step 26

Go back on the main scene (Scene 1).



Step 27

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 28

Select the invisible button layer and create the invisible button over the picture. See the picture below.



Step 29

Take the Selection Tool (V), click once on the invisible button to select it and go the Action Script Panel (Shortcut key: F9). Then, enter the following action script code inside the actions panel:

on (rollOver) {
_root.mouse_over_picture1 = true;
} on (rollOut) {
_root.mouse_over_picture1 = fstartlse;
} on (release){
getURL(" http://www.toxiclab.org/ ");
}

Step 30

Create a new layer above the invisible button layer and name it action.

Step 31

Click on the first frame of layer action , go again to the Action Script Panel (F9), and enter this code inside the action panel:

_root.picture1.onEnterFrame = function() {
if (mouse_over_picture1) {
_root.picture1.nextFrame();
} else {
_root.picture1.prevFrame();
}
};

We're done with the first picture. Repeat this process for every other photos in menu.Only difference is that you must to use another instanca name.

Download example

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

Browse by category




Most popular tutorials


Resources Worth visiting


Friends