Toxiclab.org

Zoom in Zoom out photo gallery

13.4.2009, 14:13
Submited in: Flash | Total Views: 26132

In this thoroughly explained, detailed flash lesson, you will see how to create trendy zoom in zoom out photo gallery using some special flash tips and tricks. This lesson can be used for any presentation, flash banner and animation. You don't have to use action script code to make it. Using this lesson, you will also learn how to import any images into a flash library, how to move it from the flash library on the flash stage, how to convert it into a Movie Clip Symbol, how to animate it, aligned it with the background, use Free Transform Tool (Q) to enlarge it and much much more! Let's go!

Example:



Step 1

First, download photos that we will use for this photo gallery.



Step 2


Create a new flash document. Press Ctrl+J key on the keyboard (Document Properties) and set the width of your document to 300 pixels and the height to 225 pixels. Select white as background color. Set your Flash movie's frame rate to 40 and click ok.



Step 3

Call the current layer photo 1. Double-click on its default name (Layer 1) to change it. Press Enter once you have typed in the new name!

Step 4

Choose File > Import > Import to Library. In the file explorer window that appears, find a four photos and Shift-click to select them all. Then click open. If you now open your flash library (Ctrl+L key) you will see four photos that you just imported.

Step 5

Select the Selection Tool (V) and using the drag and drop technique, move the first photo from the Library on the stage!

Step 6

While the photo is still selected, go to the Align Panel (Ctrl+K) and do the following:

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 7

After that, while the photo is still selected, press F8 key (Convert to Symbol) to convert it into a Movie Clip Symbol.



Step 8

Click now on frame 15,40 and 55 and hit F6 key.

Step 9

While you're still on frame 55, select the Free Transform Tool (Q), press and hold down Shift key and enlarge photo like it is shown on the picture below!



After that, select the Selection Tool (V) and click once on the photo to select it. Then, go to the Properties Panel (Ctrl+F3) below the stage. On the right, you will see the Color menu. Select Advanced in it, click on Settings button and make the adjustments as follow:



Repeat this process also for frame 1.

Step 10

Right-click anywhere on the gray area between frame 1 and 15 and frame 40 and 55 on the timeline and choose Create Motion Tween from the menu that appears.



Step 11

Create a new layer above the layer photo 1 and name it photo 2.

Step 12

Click now on frame 50 of layer photo 2 and press F6 key. While you're still on frame 12, move the second photo from the library on the stage using the Selection Tool (V). After that, repeat steps 6 and 7.

Step 13

Click now on frame 65, 100 and 115 and press F6 key. While you're still on frame 115, repeat step 9. Do this also for frame 50.

Step 14

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



We're done now with the first two photos.

Repeat this process also for every other photos.

Have a nice day!

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