Toxiclab.org

Mask Flash menu

22.10.2006, 17:23
Submited in: Flash | Total Views: 90002

In this tutorial you have a chance to learn how to create advanced mask flash menu in flash 8 using the Action Script. You will also learn:

1. How to design a menu,
2. how to use instance name,
3. how to turn layer into a mask,
4. how to apply action script on menu and more.



Step 1

Create a new flash document, take the Rectangle Tool (R), under Fill color set this color: #FFB93F, Stroke color must be switched off and draw the background for menu. See the picture below.







Step 2


Double click on layer 1 to rename its name in background. Then, insert a new layer and name it lines.



Step 3

Take the Line Tool (N), under Stroke color set this color: #742D0E, in Properties Panel (Ctrl+F3) under Stroke height set 1px, under Stroke Style set Solid and draw the " menu lines" like it is shown on the picture below.





Step 4

Insert a new layer and name it animation1.

Step 5

Lock all layers except animation1 layer, select it, take the Oval Tool and draw the "circle" like it is shown on the picture below.



Step 6

Then, set that "circle" on the position like it is shown on the picture below.



Step 7

Take the Text Tool and type any text for the first button on menu. See the picture below.



Step 8

Select the animation1 layer, and press F8 on the keyboard (Convert to Symbol) to convert it into a Movie Clip.



Step 9

Then, in Properties Panel (Ctrl+F3) under <Instance Name> type animation1.



Step 10

Double click on a new made Movie Clip or choose right click and Edit in Place.

Step 11

After that, select only the text (in my example "About us"), press Ctrl+X (cut) on the keyboard, insert an new layer, click on the first frame and press Ctrl+Shift+V (Paste in Place).

Step 12

Go back on layer 1, select the "circle" and press F8 key (Convert to Symbol) to convert it into a Movie Clip.





Step 13

Click on frame 5 and press F6 (Keyframe). Then click on frame 10 and press again F6. While you're still on frame 10, open the Action Script Panel (F9), and paste this script:

stop();

Step 14

Go back on frame 5, take the Free Transform Tool (Q) and increase the "circle" a little.



Step 15

While your "circle" is still selected, in Properties Panel under Color choose Alpha and set it to 0%.



Step 16

Select the layer1, and in Properties Panel under Tween choose Motion.





Step 17

Lock that layer, click on frame 10 of layer 2 and press F5 on the keyboard.



Step 18

Create a new layer (layer 3), take the Rectangle Tool (R), Fill color must be switched off, under Stroke color set this color: #742D0E, in Properties Panel under Stroke height set 1px, under Stroke style: Solid and draw the "rectangle" like it is shown on the picture below.



Step 19

Create a new layer (layer 4), take again the Rectangle Tool (R), this time - Stroke color must be switched off, under Fill color choose any color and draw the "rectangle" and set it on the position like it is shown on the picture below.





Step 20

While your "rectangle" is still selected, press F8 on the keyboard (Convert to Symbol) to convert it into a Movie Clip.

Step 21

Then, click on frame 5 and press F6. After that set the "rectangle" on the position like it is shown on the picture below.



Step 22

Click on frame 10 and press again F6 (Keyframe). Then, set your "rectangle" on your text position. See the picture below.



Step 23

Select the layer 4, open the Properties Panel (Ctrl+F3), and under Tween choose Motion.



Step 24

Select the layer 4 and choose right-click and select mask to turn the layer into a mask.



Step 25

Go back on the main scene (Scene1), insert a new layer and name it Invisible Button.



Step 26

Then, create the Invisible Button and set it on the position like it is shown on the picture below.



Step 27

While your "Invisible Button" is still selected, open the Action Script Panel (F9), and paste this script:

on (rollOver) {
_root.mouse_over_animation1 = true;
}

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

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

}

Step 28

Insert a new layer and name it AS (Action Script). Then, click on the first frame, open the Action Script Panel (F9) and paste this script:


_root.animation1.onEnterFrame = function() {
if (mouse_over_animation1) {
_root.animation1.nextFrame();
} else {
_root.animation1.prevFrame();
}
};

We're done for the first button. Repeat this steps for all other buttons in menu.

Have a nice day!

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