Flash tutorials
Home 3D (2) Actionscripting (65) Animation (100) Audio (4) Drawing (7) Full flash sites (4) Getting Started (15) Navigation (25) Special Effects (52) Text Effects (38)

Blur Picture Animation

27.11.2007, 1:40    Total views: 31084

Using this lesson you will see how to create on a very simple way very modern picture animation using the Blur effect.This animation you can use for any flash header, animation, presentation... You don't have to use action script code to make this lesson. Let's go!



Step 1

First of all, downalod my picture to make this lesson quickly.





Step 2


Open a new flash document. Press Ctrl+J key on the keyboard (Document Properties) and set the width of your document to 295 pixels and the height to 320 pixels. Select any color as background color.Set your Flash movie's frame rate to 33 and click ok.



Step 3

Choose File > Import > Import to Stage (Shortcut key: Ctrl+R) and Import my picture into a flash stage.

Step 4

While the picture 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.



Now you have aligned a photo with the background.

Step 5

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



Step 6

Click on frame 20 and 35 and press F6 key.

Step 7

Go back on the first frame and place the picture above the stage using the mouse or by arrows key. See the picture below.



Step 8

After that, take 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.Click on the Filters tab in the Properties Panel.After that, click on the plus icon and select the Blur filter. Make the adjustements as follows:

1. Blur X and Y : 20
2. Quality : Low



Now, you have this:



Step 9

Repeat this process also for frame 20.

Step 10

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



Step 11

After that, click on frame 100 and 110 and press F6 key.

Step 12

Select frame 110 and take the Free Transform Tool (Q). Then, enlarge the picture a lot like it is shown on the picture below.



Step 13

Then, take again the Selection Tool (V) and click once on the picture to select it. After that go again to the Properties Panel (Ctrl+F3) below the stage.Click on the Filters tab in the Properties Panel.After that, click on the plus icon and select the Blur filter. Make the adjustements as follows:

1. Blur X and Y : 100
2. Quality : Low



Step 14

Click after that on frame 112 and press F7 key. Then, go back on frame 110 and press Ctrl+C key (Copy). After that, select the frame 112 and press Ctrl+Shift+V key (Paste in Place).

Step 15

Then, take again the Selection Tool (V) and click once on the picture to select it. After that go again 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 16

Choose right-click anywhere on the gray area between the frame 100 and 110 and frame 110 and 112 on the timeline and choose Create Motion Tween from the menu that appears.See the picture below.



Test your movie (Ctrl+Enter).

We're done!

Enjoy!

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

2. Water effect
Total views: 166042

3. Photo slide show
Total views: 153641

4. High-tech city animation
Total views: 151459

5. Special Picture Effect
Total views: 146247

Related links