Toxiclab.org

Boom picture listing

22.5.2007, 20:29
Submited in: Flash | Total Views: 63415

This tutorial will show you how to create on a simple way and few steps very practical and useful picture listing, which you can use it for any presentation, flash banner... To create this tutorial you don't have to use action script code. Using this lesson, you will also learn how to convert any picture into a symbol, how to aligned it with the background and more.



Step 1

First of all, downlaod my pictures to quickly create this tutorial. After you have downloaded my pictures, unzip the zip file and place that pictures on some folder.



Step 2


Open a new flash document.

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 220 pixels. Select black as background color. Set your Flash movie's frame rate to 52 and click ok.



Step 4

Choose File > Import > Import to Library. In the file explorer window that appears, find the six pictures (picture1, picture2, picture3....) and Shift-click to select them all.Then click open. If you now open your flash library (Ctrl+L key) you will see all six pictures that you just imported. See the picture below.



Step 5

Take the Selection Tool (V), and using the "drag and drop" technique, move the first picture from the library on the stage.

Step 6

While the picture 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

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



Step 8

Click on frame 15,60 and 80 and press F6 key.

Step 9

While you're still on frame 80, take the Selection Tool (V), click once on the picture to select it and go to the Properties Panel (Ctrl+F3) below the stage. On the right, you will see the Color menu. Select Tint in it, set black color and put it down to 100%. See the picture below.



Step 10

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



Step 11

Go back on the first frame, take again the Selection Tool (V), and click again once on the picture to select it. After that, go again 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 follows:



Step 12

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



Step 13

Double click on layer 1 to rename its name in picture 1. After that, create a new layer above the picture 1 layer and name it picture 2.

Step 14

Click on frame 80 and press F6 key. After that, take the Selection Tool (V) and using the "drag and drop" technique, move the second picture from the Library on the stage.

Step 15

While the picture is still selected, aligned it with the background, like we have done for the first picture (See step 6).

Step 16

Then, while the picture is still selected, press again F8 key (Convert to Symbol) to convert this picture into a Movie Clip Symbol.



Step 17

Click on frame 95, 140 and 160 and press F6 key. While you're still on frame 160, repeat step 9 and 10.

Step 18

Go back on frame 80 and repeat step 11 and 12.

Now, we're done with the first two picture. Repeat the previous process for every other picture.

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