Blur spatter image animation

Date: 18.5.2009, 17:56    Total views: 12357

Using this thoroughly explained, detailed flash lesson, I will explain to you how to create advanced spatter photo animation using some special photoshop and flash tips and tricks and mask. You don't have to use action script code to make this lesson. Using this lesson, you will also learn how to convert any image into Movie Clip Symbol, how to apply flash filters on any image and much much more! You can use this animation for any presentaion, flash banner or flash header.

Example:



Step 1

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

Original Image:



Spatter image:





Step 2

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



Step 3

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



Step 5

Select the Selection Tool (V) and using the drag and drop technique, move the spatter image from the Library on the stage.

Step 6

While the image 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 70 and hit F5 key.

Step 8

Create a new layer above the layer spatter image and name it original image. After that, click on frame 40 and hit F6 key.

Step 9

While you're still on frame 40, select again the Selection Tool (V) and using the drag and drop technique, move the original image from the Library on the stage.

Step 10

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



Step 11

Click now on frame 70 and hit F6 key.

Step 12

Go back now on frame 40, select the Selection Tool (V) and click once on the image 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 13

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



Step 14

Create a new layer above the layer original image and name it mask. After that, click on frame 40 and hit F6 key.

Step 15

While you're still on frame 40 of layer mask, select the Rectangle Tool (R) and draw a rectangle shape about 450x50 px above the image. After that, click on frame 70 and hit F6 key. While you're still on frame 70 of layer mask, select the Free Transform Tool (Q), press and hold down Shift key and do like it is shown on the image below!



Step 16

Go back now on frame 40 of layer mask and in the Properties Panel (Ctrl+F3) below the stage, for Tween drop down menu choose Shape. See the picture below!



Step 17

Select now mask layer and convert it to a mask by right-clicking on the mask layer and selecting Mask. See the picture below.



We're done!

Test your Movie (Ctrl+Enter) and enjoy!

Download source file (.fla)