Toxiclab.org

Very advanced photo menu

26.10.2007, 18:46
Submited in: Flash | Total Views: 110921

In this detailed lesson I will show you how to create very advanced and modern photo menu which you can use for any web site. To make this lesson you have to use action script code and some special fash tips and tricks. You will also learn:

1. How to Import photos into a flash,
2. How to convert it into a Movie Clip Symbol,
3. How to apply flash filters on it,
4. How to place it to make a photo design,
5. How to animate it and much more!



Step 1

Create a new flash document.



Step 2


Select Modify > Document (shortcut key: Ctrl+J ). Set the width of your document to 440 pixels and the height to 320 pixels. Select #F8F8F2 as background color and set your Flash movie's frame rate to 28 fps. Then, click ok.



Step 3

Download my photos to quickly create this tutorial. After you have downloaded my pictures, unzip the zip file and place that pictures on some folder.

Step 4

Choose File > Import > Import to Library. In the file explorer window that appears, find a four photos (photo1, photo2...) 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 photos that you just imported. See the picture below.



Step 5

Take the Selection Tool (V), and using the "drag and drop" technique, move the all photos from the library on the stage, and place it on the position like it is shown on the picture below.


#advertising#

Step 6

After that, 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 Tahoma as font.
3. Choose 17 as font size,
4. Select white as color,
5. As the rendering option, select Use Anti-alias for readability.



Then, type the menu text like it is shown on the picture below.



Now we have designed our photos menu and its time for aniamtion.

Step 7

Take the Selection Tool (V) and select the first photo and text and press F8 key on the keyboard (Convert to Symbol) to convert this photo and text into a Movie Clip Symbol.



Step 8

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 photo1. See the picture below.



Step 9

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



Step 10

Take the Selection Tool (V), select only a text (in this example "HOME") and press Ctrl+X key (Cut). After that, create a new layer above the layer 1 and name it text.Then, select the text layer and press Ctrl+Shift+V key (Paste in place).

Step 11

Go back on layer 1, double click on it with Selection Tool (V) and change its name in photo. See the picture below.



Step 12

While you're still on layer photo, press F8 key (Convert to Symbol) to convert this photo again into a Movie Clip Symbol.



Step 13

After that, click on frame 15 and press F6 key.

Step 14

Then, go back on the first frame and take the Selection Tool (V). After that, click once on the photo and go to the Properties Panel (Ctrl+F3) below the stage.Click on the Filters tab in the Properties Panel.After that, click on the plus icon and select the Blur filter. Make the adjustements as follows:

1. Blur X and Y : 8
2. Quality : Medium



Now. You have this:



Step 15

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



Step 16

Lock layer photo and select layer text. After that, press F8 key (Convert to Symbol) to convert this text into a Movie Clip Symbol.



Step 17

After that, select the first frame and press F6 key five times.See the picture below.



Then, click on frame 2 and frame 4 and press delete key on the keyboard.



Step 18

Click after that on frame 15 and press F6 key. Then, move the text a little down, using the mouse or by arrows key.

Step 19

Right-click again anywhere on the gray area between the frame 5 and frame 15 on the timeline and choose Create Motion Tween from the menu that appears.



We're done with animation and it's time for action script, so go back on the main scene (Scene 1).



Step 20

Double click on layer 1 to rename its name into a photo menu. After that, create a new layer above the layer photo menu and name it invisible button.

Step 21

Then, create the invisible button ove the first photo. See the picture below.



Step 22

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_photo1 = true;
} on (rollOut) {
_root.mouse_over_photo1 = fstartlse;
}

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

Step 23

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

Step 24

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

_root.photo1.onEnterFrame = function() {
if (mouse_over_photo1) {
_root.photo1.nextFrame();
} else {
_root.photo1.prevFrame();
}
};

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

Bye!

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