Transforming picture effect

Date: 3.8.2009, 16:31    Total views: 11853

In this thoroughly explained, detailed flash lesson, I will explain to you how to create modern transforming picture effect without action script code. You can use this picture effect for some flash banner or for some presentation. Using this lesson, you will also learn how to import any picture into a flash stage, how to apply flash filters on it, how to convert it into a movie clip symbol, how to create Motion Tween and much much more! Let's go!

Example:



Step 1

First, save the pictures below that we will use for this lesson.







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



Step 3

Choose now File > Import > Import to Library and import the pictures that you just saved in step 1. Go now to the flash library (Ctrl+L), select the Selection Tool (V) and move picture 2 from flash library on the flash stage. While the picture 2 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 4

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

Step 5

Click now on frame 15,30 and 40 and hit F6 key. While you're still on frame 40, select the Selection Tool (V) and click once on the picture to select it. After that, go to the Properties Panel (Ctrl+F3) below the stage! Then, select Filters tab from the left side. Click after that on the plus icon and select the Blur filter. Make the adjustments as follows:



After that, select the Properties button. On the right, you will see the Color menu. Select Alpha in it and put it down to 0%.



Step 7

Right-click anywhere on the gray area between frame 1 and 15 and frame 30 and 40 on the timeline and choose Create Motion Tween from the menu that appears.



Step 8

Click now on frame 50 and hit F5 key.

Step 9

Call the current layer picture 2. Double-click on its default name (Layer 1) to change it. Press Enter once you have typed in the new name!

Step 10

Create a new layer above the layer 2 and name it picture 1.

Step 11

Click now on frame 40 of layer picture 1 and hit F6 key. While you're still on frame 40, move picture 1 from the flash library on the flash stage and repeat steps 3 and 4.

Step 12

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

Step 13

While you're still on frame 80, select the Selection Tool (V) and click once on the picture 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:



Step 14

Go back now on frame 40, select again the Selection Tool (V) and click once on the picture to select it. After that, go to the Properties Panel (Ctrl+F3) below the stage! Then, select Filters tab from the left side. Click after that on the plus icon and select the Blur filter. Make the adjustments as follows:



Step 15

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



We're done now!

Test your movie and enjoy!

Download source file (.fla)