Tutorial
Title: Zoom Effect
Time: 30 Mins
Difficulty Level: Intermediate
Summary: How to make a pseudo-zoom effect
Assumed knowledge: Tween, Photoshop Filters
Author: Chris Calangi
Website: Templates247.com
Tutorial Files: Source

 

 

Preview:

 

Chris here, and I have another tutorial for you. This is the zoom effect you see mostly in websites. To start our little tutorial. We need to have a logo, in this example, we gonna use Templates247's logo.

Open up photoshop and use the settings below:


Paste the logo you gonna use for the project like I did here:

Duplicate the logo layer and make a radial blur with these settings:


You should have these results:

Save Layer 1 Copy as a new gif as well as Layer1, by making Layer 1 Copy Invisible (Basic Photoshop skill here :) )
You should have these 2 gifs

 

Open up flash with the same dimensions as your image, in this case 400px X 400px will do. Import both gifs into library, by File > Import > Import to library. Now that you have both images in your library we can now start making this effect.

Start with making a keyframe on layer 1, fame no. 6 and drag the blurred logo into the stage and align it with the stage using ctrl-K and pressing horizontal align and vertical align while the align on stage is selected

now that its aligned, press control f8 and make it a symbol, name it as "blurlogo" or any name you want as long as it makes sense. Select frame 19 and make a keyframe. And use the alpha settings to make it 0%

Select any frame between frame 6th and frame 19th and right click create motion tween. You should have now the blurlogo fading to nothing effect. :)

To make things more interesting. select frame 6th and press ctrl-T for the Transformation toolbox to show if its not showing. Under the toolbox, make the symbol 90% and make sure the contstraint checkbox is selected.

Select frame 13, make it a keyframe and under the transformation toolbox make it 105%. This will be the bouncing effect that animation usually have. :)

Make a new layer, and place it under layer 1, under Frame 13, make a keyframe and drag the logo copy, and make it a symbol (ctrl f8 for the shortcut) and name it as "logo" or again any name you want as long as it makes sense.

Select frame 22 and make another keyframe by pressing f6 and again select a frame inbetween frame 22 and frame 6 and right click make motion tween. Select frame 13 again and set the alpha settings to 0%. Select Frame 40 and press F5 to make a layer. Finaly, make the frame rate 20fps or so to make the animation smooth.

You should have now this in your fla file.

Publish the fla. and you have now have the zoom effect, Enjoy! :)