In this thoroughly explained, detailed flash lesson, I will show you how to create distort photo simulation using some special flash and photoshop tips and tricks. You don't have to use action script code to make this lesson. You can use this simulation for some flash banner, presentation or animation. Using this lesson, you will also learn how to import any image into a flash stage, how to convert any image into a Movie Clip Symbol, how to create Moion Tween and much much more! Let's go!

Example:



Step 1

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

Original Photo:



Distort Photo:





Step 2

Create a new flash document. Press Ctrl+J key on the keyboard (Document Properties) and set the width of your document to 400 pixels and the height to 495 pixels. Select white as background color. Set your Flash movie's frame rate to 28 and click ok.



Step 3

Call the current layer original photo. 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 Distort) that you just imported. See the picture below.



Step 5

Click now on frame 20 and hit F6 key. While you're still on frame 20, select the Selection Tool (V) and using the drag and drop technique, move the original image from the Library on the 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

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



Step 8

Click now on frame 40, 70 and 90 and hit F6 key.

Step 9

While you're still on frame 90, select 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 Advanced in it, click on Settings button and make the adjustments as follow:



Repeat this process also for frame 20.

Step 10

Right-click anywhere on the gray area between frame 20 and 40 and frame 70 and 90 on the timeline and choose Create Motion Tween from the menu that appears.



Step 11

Create a new layer above the layer original photo and name it distort photo. After that, select the Selection Tool (V) and using the drag and drop technique, move the Distort photo from the Library on the stage.

Step 12

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

Step 13

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



Step 14

Click now on frame 20,40,70 and 90 and hit F6 key.

Step 15

Go back now on frame 70, select 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%.



Repeat this process also for frame 40.

Step 16

Right-click anywhere on the gray area between frame 20 and 40 and frame 70 and 90 on the timeline and choose Create Motion Tween from the menu that appears.

We're done now!

Test your Movie (Ctrl+Enter).

Have a nice day!

Download source file (.fla)

Have questions about this tutorial? Visit our friendly Community Forums!