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)

Transformation photo effect

28.8.2009, 16:47    Total views: 48929

Read this thoroughly explained, detailed flash lesson and see how to create transformation photo effect using some special flash tips and tricks. You don't have to use action script code to make this lesson. This effect you can use as some flash banner, or for some presentation. Using this lesson, you will also learn how to import any photos into a flash library, how to convert it into a movie clip symbol, how to animate it and much more.

Example:



Step 1

First, save two photos below that we will use for this lesson.

Original Photo:



Photo with effect:





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 338 pixels. Select any color as background color. Set your Flash movie's frame rate to 44 and click ok.

Step 3

Call the current layer photo with effect. 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 two photos and Shift-click to select them. Then click open. If you now open your flash library (Ctrl+L key) you will see two photos (Original and Photo with effect) that you just imported. See the picture below.



Step 5

Select the Selection Tool (V) now and move the photo with effect on the flash stage.

Step 6

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 7

Click now on frame 160 and hit F5 key.

Step 8

Create a new layer above the layer photo with effect and name it photo. See the picture below!



Step 9

Click now on frame 75 of layer photo and hit F6 key. While you're still on frame 75 of layer photo, move original photo from flash library on the flash stage using the Selection Tool (V).

Step 10

While the original photo is still selected, repeat step 6.

Step 11

After that, while the photo is still selected, hit F8 key (Convert to Symbol) to convert it into a Movie Clip Symbol.



Step 12

Click now on frame 160 and hit F6 key.

Step 13

Go back now on frame 75, take the Selection Tool (V) and click once on the photo to select it. Then, go 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 0%.



Step 14

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



We're done now!

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

2. High-tech city animation
Total views: 272025

3. Water effect
Total views: 236792

4. Photo slide show
Total views: 219736

5. Special Picture Effect
Total views: 190575



Related links