Toxiclab.org

Advanced show me the way flash menu

24.10.2008, 13:56
Submited in: Flash | Total Views: 15553

Using this detailed, thoroughly explained lesson, you will see how to create very modern and advanced "show me the way" flash menu. You can use this flash menu for any web site. To create this lesson, you have to use action script code. Using this lesson, you will also learn, how to draw this menu, how to animate it, how to use action script panel, how to apply action script menu on this menu to make it more powerful and much more!



Step 1

First of all, using the flash tools for drawing (Line Tool, Paint Bucket Tool...), draw a "show me the way" menu like it is shown on the picture below!





Step 2


After that, take the Text Tool (T) and type a text for menu like it is shown on the picture below!



Now, it's time for animation.

Step 3

Take now the Selection Tool (V), and select only one arrow and text! After that, press F8 key (Convert to Symbol) to convert this arrow and text into a Movie Clip Symbol.








Step 4

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. Call this Movie Clip "HotOffers". See the picture below.



Step 5

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



Step 6

Take the Selection Tool (V) and select only this part of arrow!



Then, press Ctrl+X key (Cut), create a new layer (layer 2) and place it using the "drag and drop" technique below the layer 1. Then, while the layer 2 is still selected, press Ctrl+Shift+V key (Paste in Place).

Step 7

Now, select only this part of arrow!



Press now again Ctrl+X key (Cut), create a new layer (layer 3) and press Ctrl+Shift+V key on the keyboard (Paste in Place).

Step 8

Go back on layer 1, take the Selection Tool (V) and select only the border of arrow. After that, press again Ctrl+X key (Cut), create a new layer (layer 4) , select it and press Ctrl+Shift+V key (Paste in Place).

Step 9

While you're still on layer 4 (border layer ), click on frame 15 and press F5 key.

Step 10

Go back now on layer 1 (text layer), select it and press F8 key (Convert to Symbol), to convert this text into a Movie Clip Symbol. See the picture below.



Step 11

Click on frame 15 and press F6 key. Then, take the Selection Tool (V) and click once on text (Movie Clip)  to select it. Then, go to the Properties Panel (Ctrl+F3) below the stage. After that, find the Color menu on the right side, choose Tint, for Tint color choose #962A24 and for Tint Amount set 100 %. See the picture below!





Step 12

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 13

Select layer 2 (beneath the layer 1) and press F8 key to Convert it into a Movie Clip Symbol.

Step 14

Click now on frame 15 and press F6 key.

Step 15

Take again the Selection Tool (V) and click once on the new made Movie Clip to select it. After that, go again to the Panel below the stage. Then, Find the Color menu again and choose Tint. For Tint color choose #F9B66B and for Tint Amount choose set again 100%. See the picture below!





Step 16

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 17

Select layer 3 and press F8 key (Convert to Symbol) to Convert this part of arrow into a Movie Clip.

Step 18

Click on frame 15 and press F6 key. Then, repeat step 14, but for this time, choose #F8F1D5 for Tint Color.





Step 19

Repeat step 15.



Step 20

Go back on the Main scene (Scene 1).

Step 21

Create a new layer and name it (Invisible Button). Then, create the Invisible Button over the first arrow. See the picture below.



Step 22

Take the Selection Tool (V) again, 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_HotOffers = true;
}

on (rollOut) {
_root.mouse_over_HotOffers = fstartlse;
}

on (release){
getURL("http://www.toxiclab.org/");
}

Step 23

Create a new layer above the layer Invisible Button and name it Action. Then, click on the first frame, open again the Action Script Panel (F9), and enter this script:

_root.HotOffers.onEnterFrame = function() {
if (mouse_over_HotOffers) {
_root.HotOffers.nextFrame();
} else {
_root.HotOffers.prevFrame();
}
};

Test your Movie (Ctrl+Enter).

That's it!

Enjoy!

Download example

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

Browse by category


Most popular tutorials