Toxiclab.org

Zoom Radial Blur Effect

7.4.2006, 15:1
Submited in: Flash | Total Views: 106117

In this tutorial, I will show how to create Zoom Radial Blur Effect in Flash. To create this tutorial you have to use Action Script and photoshop. This tutorial is very complicated to explain, but I'll try on to be clear as possible. In this lesson, you will also learn how to aligned image and more.


Example:




Befor you open the Flash and go to work, you must to prepare a pictures. We need two pictures. One "normal" picture, and another one which is Radial Blur (In Photoshop: Filter > Blur > Radial Blur > Zoom > 85px). Look at the picture below!





For this example, I recommend to download my pictures:

Normal picture



Radial Blur picture



Step 1

Open a new Flash document. Select Modify > Document (shortcut key: Ctrl+J). Set the width of your document to 380 pixels and the height to 285 pixels. See the picture below.





Step 2


Choose File > Import > Import to Library and import the "normal" and "Radial Blur" picture into the Library.

Step 3

Open the Library (Ctrl+L), and using "drag and drop technique", drag the "normal" picture on the stage.

Step 4

Go to the Align panel. If it isn't opened already, just select Window > Align or press Ctrl+K to open it.While the image is still selected do the following in the Align panel:

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 5

Create a new layer (layer 2), and from Library (Ctrl+L) move the  "Radial Blur" picture on the stage.
After that, repeat step 4.

Step 6

Take the Selection Tool (V) and click once on the picture (Radial Blur picture) to select it. After that press F8 key on the keyboard (Convert to symbol) to convert this picture into a Graphic Symbol. See the picture.



Step 7

Choose frame 10 for both layers (layer1 and layer 2) and press F6 key. See the picture below.



Step 8

Choose frame 20 for both layers (layer1 and layer 2) and press again F6.



Step 9

Click on frame 20 of layer 2 and choose Modify > Transform > Scale.

Step 10

Take the Toom Tool (M,Z), and zoom in the picture to get a "shooting star" a lot larger than it is. Be careful! When you do that, the "shooting star" must be inside of  stage.



Step 11

Select that larger picture, open the Properties Panel (Ctrl+F3), and for Color choose Alpha and set it to 0%. See the picture below.



Step 12

While the Properties Panel is still open, see what the dimensions are W,H, X,Y  and memorize that dimensions.



Step 13

Go back on frame 10, and hide layer 2 ( layer of Radial Blur picture ).



Step 14

While you're still on frame 10, select "normal" picture, open again the Properties Panel (Ctrl+F3), and under W,H;X,Y, type the number, that you have memorized in step 12.

Step 15

Select the "normal" picture, press Ctrl+C key on the keyboard (Copy), click on frame 20 and press delete on the keyboard to delete a small picture. After that press Ctrl+Shift +V key (paste in place) to paste a large picture.

Step 16

Click on frame 10 of layer 2 (layer of Radial Blur picture), and in the Properties Panel, below the scene, for Tween choose Motion, and for Ease choose 100. See the picture below.





Step 16

Click on frame 30 of layer 1 and 2 and press F6 key. See the picture below.



Step 17

Create a new layer above layer 2. After that click on the first frame of layer 1 and press Ctrl+C key (Copy). Then go back on the first frame of layer 3 and press Ctrl+Shift+V (Paste in Place).



Step 18

Click on the first frame of layer 3, open the Action Script Panel (F9), and paste this script:

stop ();

Step 19

Create a new layer above layer 3 and name it button.



Step 20

Create some button, or use the original Flash Button like I have done! (Window > Other Panels > Common Libraries >Buttons. Open Library (Ctrl+L) and drag any button on the stage).



Step 21

Select that button, open the Action Script Panel (F9) and paste this script:

on (release) {
gotoAndPlay(10);
}

Step 22

For this example you can't test the Movie with Ctrl+Enter, because you must see this Movie in life size so, click on File > Export > Export Movie. Everything by default.

We're done.

Download example (136 KB)

Are you a website owner?
Click here to register and submit your tutorials!

Browse by category


Most popular tutorials