Toxiclab.org

Advanced interior menu with sound and url

22.5.2008, 12:58
Submited in: Flash | Total Views: 35416

In this easy ActionScript lesson I will explain to you how to create professional, very attractive flash menu with sound. This modern interior menu, you can use for any web site. Using this easy lesson, you will also learn:

1. How to make full interior menu design,
2. How to animate it,
3. How to apply action script code on it and make it more powerful,
4. How to create Movie Clip,
5. How to Import, create and apply filter effects to movie clips and text fields, and much more.



Step 1

Create a new flash document. Press Ctrl+J key on the keyboard (Document Properties) and set the width of your document to 300 pixels and the height to 400 pixels. Select #26130A as background color. Set your Flash movie's frame rate to 30 and click ok.



Step 2


Save my picture below!



Step 3

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

Step 4

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



Step 5

After that, take the Selection Tool (V) and click once on the picture to select it. 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 59%.



Step 6

After that, place the picture on the position like it is shown on the picture below.



Step 7

Download my pictures of interior which we will use for menu.

Step 8

After that, choose File > Import > Import to Library. In the file explorer window that appears, find a four pictures (picture1, picture2...) and Shift-click to select them all.Then click open. If you now open your flash library (Ctrl+L key) you will see a four pictures that you just imported. See the picture below.



Step 9

Double click on layer 1 to rename its name into a background. After that, create a new layer above the layer background and name it interior pictures.

Step 10

Select interior picture layer and using the drag and drop technique, move the all pictures from the library on the stage, and place it on the position like it is shown on the picture below.



Step 11

Take the Selection Tool (V) and click once on the first picture to select it. After that, press F8 key (Convert to Symbol) to convert this picture into a Movie Clip Symbol.



Step 12

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 13

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



Step 14

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



Step 15

Click now on frame 15 and press F6 key. Afte that, while you're still on frame 15, take the Selection Tool (V) and click once on the picture to select it. After that, go to the Properties Panel (Ctrl+F3) below the stage.On the right, you will see the Color menu. Select Advanced on it, click on Settings button set the following options and click ok.



Step 16

After that, while you're still on frame 15, move your picture a little up and right.

Step 17

Right-click anywhere on the gray area between frame1 and frame 15 on the timeline and choose Create Motion Tween from the menu that appears.See the picture below.



Step 18

Create a new layer above the layer 1 (layer 2).

Step 19

Select layer 2 and 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 #D6D6D6 and draw a “rectangle” about 126x12px and place it on the position like it is shown on the picture below.



Step 20

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



Step 21

Click now on frame 15 and press F6 key. After that, move the rectangle a little up and right like we have done for the first picture and place it on the center of picture. See the picture below.



Step 22

Go back now on the first frame, take the Selection Tool (V) and click once on the rectangle to select it. After that, go 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 0%.



Step 23

Right-click anywhere on the gray area between frame1 and frame 15 on the timeline and choose Create Motion Tween from the menu that appears.See the picture below.

Step 24

Create a new layer above the layer 2 and name it text.

Step 25

Click on frame 15 of layer text and press F6 key. Then, 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 Arial CE as font and bold it.
3. Choose 11 as font size.
4. Select #515151 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 "HOME" on the ceneter of rectangle. See the picture below.



Step 26

After that, press F6 key five times. Then, go back on frame 16 and 18 and press delete key on the keyboard.



Step 27

It's time for sound, so create a new layer above the layer text and name it sound.

Step 28

Download now, my sound file.

Step 29

Go back into a flash. Choose File > Import > Import to Library (Ctrl+Shift+O) and import my sound into a flash Library.

Step 30

After that, click on frame 5 of layer sound, and press F6 key. After that, while you're still on frame 5, move the sound file from the library on the stage.



Step 31

Go back on the main scene (Scene 1).

Step 32

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 33

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



Step 34

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 35

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

Step 36

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