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
