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)

Advanced photo listing with effect

6.6.2008, 1:17    Total views: 26469

This tutorial will show you how to create very cool, practical and advanced photo listing with no action script code. This tutorial is so easy for create, but in the same time very attractive, and you can use it for any photo presentation, animation, flash header, banner... You will also learn how to apply some special flash 8 filters to make this tutorial more powerful.



Step 1

First of all, download the sample photos for this lesson that you'll use to quickly create this lesson.

Step 2

Open a new Flash document by selecting File > New > Flash document and clicking ok. Set the dimensions of your Flash movie to 300 by 200 pixels and set the speed (frame rate) to 40 fps. Select white as background color and click ok. 



Step 3

Select File > Import > Import to Library. In the file explorer window that appears, find the three photos (photo1,photo2 and photo3) and Shift-click to select them all. Then click Open. If you now open your flash library (Ctrl+L key) you will see a three photos that you just imported. See the picture below.



Step 4

Take the Selection Tool (V), and using the "drag and drop" technique, move the first photo from the library on the stage.

Step 5

While the photo is still selected, go to the Align Panel (Ctrl+K) and do the following:

1. Make sure that the Align/Distribute to Stage button is turned on,
2. Click on the Align horizontal center button and
3. Click the Align vertical center button.



Step 6

Double click on layer 1 to rename its name in photo1. After that, click on frame 80 and press F5 key.

Step 7

Create a new layer above the layer photo1 and name it photo2.

Step 8

After that, select the layer photo 2 and using the "drag and drop" technique again , move the second photo from the library on the stage.

Step 9

Then, repeat step 5.

Step 10

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



Step 11

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



Step 12

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



Step 13

Click now on frame 25 and press F6 key. After that, go back on the first frame, take 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. 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 14

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



Step 15

Click now also on frame 80 and press F5 key.

Step 16

Go back on the main scene (Scene 1).

Step 17

Create a new layer above the photo layer and name it mask1.

Step 18

Select the mask1 layer 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 any color and draw a “rectangle” about 330x26px and place it on the position like it is shown on the picture below.



Step 19

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



Step 20

Click now on frame 15 and press F6 key. After that, move the rectangle on the top center position of the photo. See the picture below.



Step 21

Click now on frame 20 and 25 and press F6 key. Go back now on frame 20, take the Free Transform Tool (Q), press and hold down Alt key and enlarge the rectangle a little like it is shown on the picture below.



Step 22

While you're still on frame 20, take the Selection Tool (V) and click once on the photo to select it. Then, 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 35%.



Step 23

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



Step 24

Select mask1 area layer and convert it to a mask by right-clicking on the mask1 area layer and selecting Mask. See the picture below.



Step 25

Now, you have this:



Repeat this process until you don't fill the all photos.

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: 292749

2. High-tech city animation
Total views: 240812

3. Water effect
Total views: 224851

4. Photo slide show
Total views: 207569

5. Special Picture Effect
Total views: 183338



Related links