Flash tutorials
Home 3D (2) Actionscripting (66) Animation (108) Audio (4) Drawing (7) Full flash sites (4) Getting Started (15) Navigation (25) Special Effects (61) Text Effects (38)

Trendy photography flash menu with sound and URL

13.3.2009, 15:24    Total views: 37455

Using this thoroughly explained, detailed flash lesson, you will see how to create advanced and trendy photography flash menu with sound and URL which can be used for any web site. Using this lesson, You will also learn how to import any picture into a flash stage, how to convert it into a Movie Clip Symbol, how to animate it, how to draw invisible button over picture, how to apply action script code on it, how to import any sound file into a flash library and much much more!

Example:



Step 1

First, download photos for this lesson!



Step 2


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



Step 3

Call the current layer photos. Double-click on its default name (Layer 1) to change it. Press Enter once you have typed in the new name!

Step 4

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



Step 5

Select now the Selection Tool (V) and using the "drag and drop" technique, move all photos from the Library and place it on the stage like it is shown on the picture below!



Step 6

Select the Selection Tool (V) again and select only one photo. After that, press F8 key (Convert to Symbol) to convert it into a Movie Clip Symbol.



Step 7

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 8

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



Step 9

While the photo is still slected, press F8 key (Convert to Symbol) to convert it again into a Movie Clip Symbol.



Step 10

Click now on frame 15 and press F6 key. While you're still on frame 15, select the Selection Tool (V) and click once on the photo to select it. After that, go to the Properties Panel (Ctrl+F3) below the stage! Then, select FIlters tab on the left side, click on plus icon and choose Bevel. Make the adjustments as follows:



Click after that again on the plus icon and select the Adjust Color Filter. Make the adjustments as follows:



Step 11

Right-click anywhere on the gray area between the two keyframes on the timeline and choose Create Motion Tween from the menu that appear.



Step 12

Go back now on frame 15, select the Free Transfrom Tool (Q) and enlarge photo a little like it is shown on the picture below!



Step 13

Go back on the previous scene (Scene 1).

Step 14

Create a new layer above the layer photos and name it Invisible Button 1.

Step 15

Select invisible button layer and create the invisible button over the photo like it is shown on the picture below!



Step 16

Select the Selection Tool (V) and click once on the invisible button to select it. After that, go to the Action Script Panel (F9) and enter this code inside the actions panel:

on (rollOver) {
_root.mouse_over_photo_mc = true;
} on (rollOut) {
_root.mouse_over_photo_mc = fstartlse;
}

on (release){
getURL("http://www.flashvault.net/");
}

Step 17

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

Step 18

Select the first frame of layer action and go again to the Action Script Panel (F9). Aftre that, enter this code inside the actions panel:

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

We're done now with the first photo.

Repeat this process also for every other photo in menu.

Have a nice day!

Download source file (.fla)

Have questions about this tutorial?
Visit our friendly Community Forums!
Digg it! Add this tutorial to del.icio.us! Furl it! Add this tutorial to reddit! Spurl it! Add this tutorial to technorati!

Top tutorials

1. Advanced full flash site - Part 1
Total views: 297952

2. High-tech city animation
Total views: 248589

3. Water effect
Total views: 227350

4. Photo slide show
Total views: 209579

5. Special Picture Effect
Total views: 185170



Related links