Animated Zoom Blur in Flash CS3

CATEGORIES: Flash, Tutorials | Lee Brimelow | May 08, 2008

Some Flash effects never seem to go out of style. One such classic is a zoom-blur effect used on photographs that’s much more eye-catching than simply zooming in or out on the image. In this tutorial, we’ll combine Flash CS3 with Photoshop CS3 to create a similar zoom-blur effect on a photo. These techniques can be applied to any Photoshop filters and experimentation is the key here. Integrating Flash and Photoshop is now easier than ever thanks to the improved workflow features of Creative Suite 3.

[If you’d like to download the project files used here to follow along with this tutorial, as well as preview the final effect, visit layersmagazine.com/downloads.html or click here. All files are for personal use only.]

STEP 1 Start in Photoshop CS3
We’ll be using Photoshop to apply the zoom-blur effect to our images, as Flash doesn’t have this capability. Open the zoom.psd file that’s included in the tutorial files. In the Layers panel, you’ll see that there’s a single layer that contains the photograph we’ll be using for the effect. We’ll create multiple versions of this image that we can then import into Flash. We’ll also create a zoom-out effect in this example, but you can change it to a zoom-in effect just as easily.

©ISTOCKPHOTO/LISE GAGNE

STEP 2 Duplicate the Photo
Duplicate the z4 layer three times so that you have four identical layers. The easiest way to accomplish this is to select the z4 layer and press Command-J (PC: Ctrl-J) three times to create the duplicate layers. Name the new layers z1, z2, and z3, from top to bottom. When you’re finished, your layers should look identical to the image above.

STEP 3 Scale the Layers
Each layer needs to be scaled in a way that will provide the base for our zoom effect. Click the Eye icons to hide all layers except z4. Press Command-T (PC: Ctrl-T) to enter Free Transform mode, enter 40% in both the Width and Height fields in the Options Bar, and press Return (PC: Enter) twice to lock in the new scale values. Follow the same steps for the z3 layer but give it a scale value of 60%. For the z2 layer, use a scale value of 80%. Turn on the visibility of all layers.

STEP 4 Position the Layers
To achieve a nice effect, we need to make sure that the layers are properly aligned. Position the z1 layer where you want it and then lower its Opacity to 50% so you can see the z2 layer underneath it. Move the z2 layer so that the women are in the same position as they are on the z1 layer. Use the same techniques to align layers z3 and z4. Don’t forget to reduce the Opacity as you go. If the photo isn’t large enough to center, you may need to clone some areas to make the image larger.

STEP 5 Add Radial Blur
Now that our layers have been properly scaled and positioned, the last step is to apply a radial blur to the two middle layers. Turn off the visibility of all layers except for z3 and then select it. Choose Filter>Blur>Radial Blur. In the Radial Blur dialog, set the Amount to 100 and choose Best for Quality. Do the same steps for layer z2, except choose 50 for the Amount this time. Once finished, save the PSD and open Flash CS3.

STEP 6 Create a New Flash Movie
From the Flash CS3 welcome screen, choose Flash File (ActionScript 3.0) to create a new Flash document. In the Properties panel, click the Size button to open the Document Properties dialog. Set the Width to 600 px, Height to 400 px, and the Frame Rate to 30 fps. Save the newly created file as zoom.fla to your project directory. That’s all we have to do to set up the Flash movie. Now we can import the images we created in Photoshop.

STEP 7 Import the PSD File
Thanks to the new features in Flash CS3, we can import PSD files. Go to File>Import>Import to Stage and navigate to the zoom.psd file that you created earlier. Select it and click Import (PC: Open) to launch the Import [filename] to Stage dialog. Uncheck the Background layer because we won’t need to import it. Shift-click to select the remaining layers. With the layers selected, turn on the Create Movie Clips for These Layers checkbox and then click OK to import the images. In the Timeline, click on Layer 1 then click the Trash icon to delete it.

STEP 8 Set Up the Timeline
Select frame 40 on all layers and hit the F5 key to insert frames onto the Timeline. Now select frame 1 on the z1 layer, choose Alpha from the Color menu in the Properties panel, and set it to 0%. (Note: If you don’t see the Color menu in the Properties panel, click the photo on the Stage.) Lock the z1 layer. Follow the same steps for layers z2 and z3. You should now see the z4 layer, which represents the start of the zoom animation. We’ll fade in each layer one by one to achieve the effect.

STEP 9 Fade in Photo 2
Unlock the z3 layer and select frame 10. Hit the F6 key to insert a new keyframe. Now select frame 17 and hit F6 again to insert another keyframe. With frame 17 still selected, select the photo on the Stage. In the Properties panel, set the Color Alpha to 100%. Control-click (PC: Right-click) on frame 10 and choose Create Motion Tween. You should now see the familiar blue arrow in between the two keyframes. Press Command-Return (PC: Ctrl-Enter) to test the movie and see the beginning of the effect.

STEP 10 Fade in Photo 3
Unlock the z2 layer and insert a new keyframe on frame 14 using the same techniques from Step 9. Insert the second keyframe on frame 22. Once again, set the Color Alpha to 100% on this keyframe and create a motion tween. Test the movie again to see your progress. You can see that the effect is really starting to take shape now.

STEP 11 Fade in Photo 4
Now all we need to do to finish the effect is to fade in the last photo. Unlock the z1 layer and insert the first keyframe on frame 18 and the second keyframe on frame 26. Once again, set the Color Alpha to 100% on the last keyframe and create a motion tween.

STEP 12 See Your Work
The effect is now complete. Test the movie to see the finished result. You can experiment with the timing of the animations to create different effects. You can also add more images in Photoshop because the more there are, the smoother the effect will look. Experiment with animating different Photoshop filters using the techniques in this tutorial. And keep in mind that Flash does have some basic bitmap effects, such as drop shadows and blurs, that you can animate on the Timeline.

STEP 13 Experiment with Blend Modes
We can take our example a little further by experimenting with the layer blend modes of our images. Lock layers z1 and z2. Select frame 10 on the z3 layer and then select the photo on the Stage. In the Properties panel, set the Blend pop-up menu to Screen. Follow these same steps for the keyframe on frame 17. Now unlock layer z2 and follow the same steps you did for the z3 layer.

STEP 14 View the Modified Effect
Test the movie again to see the result of the changed blend modes. You can spend hours experimenting with different combinations of blend modes, as you can in Photoshop. This timeless effect has been used on many Flash websites and can be used any time you need a cool way to zoom in on something. Some things never go out of style.

Share This

Back to Top

1. Photoshop
2. Illustrator
3. Indesign
4. Dreamweaver
5. Fireworks
6. Premiere
7. Flash
8. After Effects
9. Lightroom
10. Acrobat

Featured Partner

• 
• Dragging an Object Between Documents
• TV Scanline Effect
• Trick to the Glossy Effect
• 3D Text
• Changing Type on a Path
• more tips