Zoom Motion-Blur Transition.
Lately, I’ve read that people have been trying to figure out how to achieve one of the latest fads in image transitions, the “zoom motion-blur” transition. At first, this transition may appear to be hand-held video footage or perhaps manipulation of z space coupled with some motion blur done in After Effects.
Fortunately, this effect can be achieved through some clever use of Flash and very basic ActionScript. In this tutorial, you will learn how to create the ‘zoom motion-blur’ transition using Photoshop and a single hi-res image:
Before you get started, it’s best to decide what your subject will be. The effect works best if you can zero-in on something smaller or some place you might move towards. In this case, I have car, and I simulate someone quickly moving towards it.
Let’s get started:
1. Obtain a hi-res image and open it in Photoshop. This is the only image you will need. My image was from my 3.2 megapixel digital point and shoot measuring 2048 x 1536 px.
Once you have your photo. Perform any touching up as if you were going to prepare it for web.
Our final Flash movie will be 320 x 200. If you choose to make your final zoom/transition larger or smaller, please note that you will have to adjust accordingly.
2. In Photoshop, we will create a series of crops from the original image at 320 x 200. Please be sure to select the crop tool in Photoshop and set the crop dimensions to 320 x 200.
Proceed to crop about 8-9 images on the ORIGINAL image. Carefully moving each crop closer to simulate the zoom. Don’t worry if you are not exact, this is what will create the shaking effect. Save these images using the ‘Save for Web’ option in Photoshop using the .PNG file format using a sequential naming convention (ie. car1.png, car2.png, etc)
3. After you have created your images, you are ready to apply the blur effect on each image. To simulate a motion blur, we will use the Radial Blur, found in the Filter, menu of Photoshop.
However, before we apply the blur, create copies of the first and last images and rename them ‘first.png’ and ‘final.png’. These will serve as the endpoints that are not in motion.
Let’s start applying the effect! Open your first car image (not the copy) and select the Radial Blur. The following panel should appear:
Be sure to set your Blur Method to Zoom. Keep the quality set to Good. Save your images again. Repeat for all images except for ‘first.png’ and ‘final.png’. If you are clever, set a batch save for this process.
4. Now it is time to create your Flash file. Launch Flash and create a new file called ‘car_zoom’.
5. Next, set your movie properties in the Modify | Document menu. set your movie dimensions to 320 x 200px, with a frame rate of 24 fps.
6. With your movie setup, create a new movieclip called ‘car_mc’ . This can be done via the Insert menu | new symbol.
7. Once you have created the movieclip, you must import your .png images into the library. To do this, go to the File | import menu and choose import to library. Select all the images you created and import them. Your library should be populated with the following files:
8. Double click ‘car_mc’ in the Library to make sure you are in its timeline. Next start placing the images on the stage, one at a time as keyframes (Insert | Timeline | Blank Keyframe). Start with your non-blurred first frame and then place your blurred images, ending with your non-blurred end frame. This will create the moving forward sequence.
9. When you have finished the moving forward sequence, reverse the sequence to create the zooming out portion. To add the reverse sequence, select all the all frames and click and drag them to the end of the timeline. Before letting go of the mouse hold down the Alt/OptionKey. You should see a ‘+’ sign indicating you are copying the frames, not moving them over, then release the mouse button:
Next, we will reverse the frames. With the copied frames still selected, choose Modify | Timeline | Reverse Frames. You should see the movement by scrubbing through the timeline:
Now, go back to the main/root stage by clicking ‘Scene 1′:
Let’s add some code to get our motion-blur working when the user clicks on the image with the mouse pointer. Add the following code onto the first frame:
Now drag your car movie clip (located in the library) onto the stage. In order for the ActionScript to reference the car movieclip, be sure to give it the variable name ‘car_mc’ in the properties menu. Also, make sure you set your X, Y coordinates to 0,0:
The last thing we need to do is apply the stop points inside the car movie clip. To do this, double-click the car movieclip on the stage. This should bring you back to the car_mc timeline.
To prevent the movieclip from starting before we have initiated a click, you must add the following line to the first frame of the car_mc timeline:
Next you must add code to the first stop point. Go to the frame where the end of the zoom in occurs and add the following code:
The frame referenced in the above code (_parent.frame) should be referencing the next frame number of the first stop point. For example, in this case, frame 11 is the frame where the zoom-in ends and there is a non-blurred image. We are going to tell Flash that on the next click, go to frame 12 to initiate the zoom out sequence (the images you reversed).
To complete the zoom-out, and reset the function for another zoom-in, add the following code to the last frame of the sequence:
The timeline of car_mc should look something like this:
Now, go back to main scene and run your movie! When click on the image, you should find yourself zooming in while blurring!
Author: Kirupa
