Flash tutorials
Home 3D (2) Actionscripting (65) Animation (100) Audio (4) Drawing (7) Full flash sites (4) Getting Started (15) Navigation (25) Special Effects (52) Text Effects (38)

Simple image gallery animation

15.9.2009, 23:2    Total views: 14523

Using this thoroughly explained, detailed flash lesson, I will explain to you how to create simple image gallery. You don't have to use action script code to make this gallery. You can use this gallery for some image presentation, animation or for some flash banner. Using this lesson, you will also learn how to import any images into a flash library, how to convert any image into a movie clip symbol, how to animate it, aligned it with the background and much
more!

Example:



Step 1

First, download images that we will use for this lesson!



Step 2


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

Step 3

Call the current layer image 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 three images and Shift-click to select them all. Then click open. If you now open your flash library (Ctrl+L key) you will see three images that you just imported. See the picture below.



Step 5

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

Step 6

While the image 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 image is still selected, press F8 key (Convert to Symbol) to convert it into a Movie Clip Symbol.



Step 8

Click now on frame 35 and hit F6 key.

Step 9

Go back now on the first frame, select the Selection Tool (V) and click once on the image to select it. After that, go to the Properties Panel (Ctrl+F3) below the stage! Then, select Filters tab from the left side. Click after that on the plus icon and select the Adjust color filter. Make the adjustments as follows:



Step 10

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



Step 11

Create a new layer above the layer image 1 and name it image 2. After that, select frame 35 of layer image 2 and hit F6 key.

Step 12

While you're still on frame 35, move the second image from the library on the flash stage.

Step 13

While the image is still selected, repeat step 6.

Step 14

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



Step 15

Click now on frame 70 and hit F6 key. After that, go back on frame 35 and repeat step 9!

Step 16

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



Step 17

Create now a new layer above the layer image 2 and name it image 3. After that, select frame 70 of layer image 3 and hit F6 key.

Step 18

While you're still on frame 70 of layer image 3, move image 3 from the flash library on the flash stage.

Step 19

While the image is still selected, repeat step 6.

Step 20

Then, while the image is still selected, hit F8 key (Convert to Symbol) to convert it into a Movie Clip Symbol.



Step 21

Click now on frame 105 and 140 and hit F6 key. While you're still on frame 140, repeat step 9!

Step 22

Go back now on frame 70 and repeat step 9 again!

Step 23

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



We're done now!

Test your movie (Ctrl+Enter) and enjoy!

Download source file (.fla)

Have questions about this tutorial?
Visit our friendly Community Forums!
Digg it! Add this tutorial to del.icio.us! Furl it! Add this tutorial to reddit! Spurl it! Add this tutorial to technorati!

Top tutorials

1. Advanced full flash site - Part 1
Total views: 221536

2. Water effect
Total views: 166040

3. Photo slide show
Total views: 153641

4. High-tech city animation
Total views: 151459

5. Special Picture Effect
Total views: 146246

Related links