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.
First of all, download the sample photos for this lesson that you'll use to quickly create this lesson.
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.
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.
Take the Selection Tool (V), and using the "drag and drop" technique, move the first photo from the library on the stage.
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.
Double click on layer 1 to rename its name in photo1. After that, click on frame 80 and press F5 key.
Create a new layer above the layer photo1 and name it photo2.
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.
Then, repeat step 5.
While the photo is still selected, press F8 key (Convert to Symbol) to convert this photo into a Movie Clip Symbol.
Double-click now on the movie clip on stage with the Selection tool(V).You should now be inside the Movie Clip.
While, the photo is still selected, press again F8 key (Convert to Symbol) to convert this photo again into a Movie Clip Symbol.
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.
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.
Click now also on frame 80 and press F5 key.
Go back on the main scene (Scene 1).
Create a new layer above the photo layer and name it mask1.
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.
While the rectangle is still selected, press F8 key (Convert to Symbol) to convert this rectangle into a Movie Clip Symbol.
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.
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.
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%.
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.
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.
Now, you have this:
Repeat this process until you don't fill the all photos.
Have a nice day!
Download source file (.fla)