Toxiclab.org

Photo listing by effect

13.11.2007, 15:7
Submited in: Flash | Total Views: 66003

See this tutorial and learn how to create photo listing using some special flash effects and tricks. You don't have to use action script code to make this tutorial. You can use this tutorail for every photo presentation, listing, animation, photo banner...



Step 1

First of all, download my photos that we will use for this lesson. After you have downloaded my photos, unzip the zip file and place that photos on some folder.



Step 2


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 350 pixels. Select any color as background color.Set your Flash movie's frame rate to 28 and click ok. See the picture below.



Step 3

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



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

After that, while the photo is still selected, press F8 key (Convert to Symbol) to convert this photo into a Movie Clip Symbol. See the picture below.



Step 7

Double click on layer 1 to rename its name in photo. After that, click on frame 60 and press F6 key.

Step 8

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

Step 9

Select the effect 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” over the photo about 300x350px. See the picture belows.



Step 10

While the rectangle is still selected, go to the Color Mixer Panel (Shoetcut key: Shift+F9) and choose the following options:

1. Click on the paint bucket icon to select the Fill color.
2. Choose Radial as Type.
3. Click on the small color rectangle that is on the left side and set its color to #ECC013. Alpha property set to100 %
4. For the rectangle from the right side, for color choose #D29B1C. Alpha property set to100 %.
5. Create a new color rectangle and place it on the middle. Then, set its color to #F8E8A9. Alpha property set to100 %.



Now, you have this:



Step 11

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



Step 12

After that, click on frame 15, 50 and 65 of layer effect and press F6 key.

Step 13

Then, click on frame 15, take the Selection Tool (V) and click once on the photo to select it.Then, go to the to the Properties Panel below the stage. On the right, you will see the Color menu. Select Alpha in it and put it down to 0%.




Do this also for frame 50.

Step 14

Choose right-click anywhere on the gray area between the frame 1 and 15 and frame 50 and 65 on the timeline and choose Create Motion Tween from the menu that appears.See the picture below.



Step 15

Select layer photo and click also on frame 15, 50 and 65 and press F6 key.

Step 16

After that, select the first frame of layer photo1, take again the Selection Tool (V) and click once om the photo to select it. Then, go again to the Properties Panel. On the right, you will see the Color menu. Select Advanced in it, click on Settings button and make the adjustments as follows:



Do this also for frame 65.

Step 17

Choose right-click anywhere on the gray area between the frame 1 and 15 and frame 50 and 65 on the timeline and choose Create Motion Tween from the menu that appears.See the picture below.



Step 18

It's time for another (second) photo, so create a new layer above the layer effect and name it photo 2. Then, click on frame 65 of layer photo 2 and press F6 key.

Step 19

Then, while you're still on frame 65, take the Selection Tool (V), and using the "drag and drop" technique, move the second photo from the library on the stage.

Step 20

While the photo is still selected, repeat 5 to aligned this photo also with the background.

Step 21

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



Step 22

After that, click on frame 80, 115 and 130 and press F6 key.

Step 23

Go back on frame 65 and repeat step 16. Do that also for frame 130.

Step 24

Choose right-click anywhere on the gray area between the frame 65 and 80 and frame 115 and 130 on the timeline and choose Create Motion Tween from the menu that appears.See the picture below.



Step 25

Go back on the first frame of layer effect. Then. press Ctrl+C key (Copy). After that, create a new layer above the layer photo and name it also effect1. After that, click on frame 65 of layer effect 1 and press F6 key. Then, press Ctrl+Shift+V key (Paste in place).

Step 26

Click after that on frame 80, 115 and 130 and press again F6 key.

Step 27

Go back on frame 80 and repeat step 13. Do this also for frame 115.

Step 28

Choose right-click again anywhere on the gray area between the frame 65 and 80 and frame 115 and 130on the timeline and choose Create Motion Tween from the menu that appears.

We're done!

Test your movie and enjoy!

Download example

Are you a website owner?
Click here to register and submit your tutorials!

Browse by category


Most popular tutorials