Toxiclab.org

Zoom citiy effect

13.6.2007, 23:48
Submited in: Flash | Total Views: 93329

Learn how to zoom any image using some special flash tricks. For this example we will use image of city, but you can apply this really cool and practical effect on any image.To create this lesson you don't have to use action script code. Only one thing that you need is to following the next steps. :)

Example:



Step 1

First of all, download my image that you'll use, to quickly create this tutorial. Unpack the zip file and place the images in some folder where you will easily find them.



Step 2


Start flash. Choose File > Import > Import to Library. In the file explorer window that appears, find the image that you just downloaded and select it.Then click open. If you now open your flash library (Ctrl+L key), you will see the image that you just imported. See the picture below.



Step 3

Press Ctrl+J key on the keyboard (Document Properties) and set the width of your document to 300 pixels and the height to 200 pixels. Select any color as background color. Set your Flash movie's frame rate to 30 and click ok.



Step 4

Take the Selection Tool (V), and using the "drag and drop" technique, move the image from the library on the stage. This image is so huge and now you have to decrease it. Decrease it on 300x200px as the background dimension. You can decrease it, using the Free Transform Tool (Q), or just go to the Info Panel (Ctrl+I key) and for W: set 300 and H: 200 (W-Width, H-Height). See the picture below.



Step 5

While the image is still selected, go to the Align Panel (Ctrl+K) and set the following options:

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 6

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



Step 7

Click on frame 40 and after that on frame 45 and press F6 key.

Step 8

While you're still on frame 45, take the Free Transform Tool (Q), press and hold down Shift key and enlarge the image of city a little. See the picture below.



Step 9

Right-click anywhere on the gray area between the two keyframes on the timeline and choose Create Motion Tween from the menu that appears.



Step 10

Click on frame 60 and press F6 key. After that, take again the Free Transform Tool (Q) and enlarge the image again. Then, move it a little left

Step 11

Choose again right-click anywhere on the gray area between the frame 45 and frame 60 on the timeline and choose Create Motion Tween from the menu that appears.



Step 12

Click on frame 65 and press F6 key. After that, enlarge the image again a little.

Step 13

Right-click anywhere on the gray area between the frame 60 and frame 65 on the timeline and choose Create Motion Tween from the menu that appears.

Step 14

Click on frame 85 and press F6 key. After that, enlarge again the image and move it a little right.

Step 15

Right-click anywhere on the gray area between the frame 65 and frame 85 on the timeline and choose Create Motion Tween from the menu that appears.

Step 16

Click on frame 100 and press F6 key. Then, enlarge the image again a little.

Step 17

Right-click anywhere on the gray area between the frame 85 and frame 100 on the timeline and choose Create Motion Tween from the menu that appears.

Step 18

Click on frame 125 and press F7 key (blank keyframe). Then, go back on the first frame and press Ctrl+C key (Copy). After that, click on frame 125 and press Ctrl+Shift+V key (Paste in Place).

Step 19

Right-click anywhere on the gray area between the frame 100 and frame 125 on the timeline and choose Create Motion Tween from the menu that appears.

Test your Movie (Ctrl+Enter).

We're done!

Download example

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

Browse by category


Most popular tutorials


Resources Worth visiting


Friends