Picture listing using a shape technique

Date: 14.4.2009, 17:26    Total views: 11619

In this thoroughly explained, detailed lesson, I will show you how to create picture listing in flash using a shape technique. You don't have to use action script code to make this lesson. This lesson is so easy for create, but in the same time, you can use it as flash banner, for some simple presentation or animation. Using this lesson, you will also learn how to import any pictures into a flash library, how to move any picture into a flash stage, how to animate it, aligned it with the background and much much more!

Example:



Step 1

First, download pictures that we will use for this picture listing.



Step 2

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



Step 3

Call the current layer pictures. 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 pictures and Shift-click to select them all. Then click open. If you now open your flash library (Ctrl+L key) you will see four pictures 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

While the picture is still selected, hit Ctrl+B key on the keyboard (Break apart) to break apart it.

Step 8

After that, click on frame 25 and press F6 key. Then, click on frame 40 and hit F7 key (blank keyframe). While you're still on frame 40, move the second picture from the library on the stage.

Step 9

While the second picture is still selected, repeat steps 6 and 7.

Step 10

Right-click anywhere on the gray area between frame 25 and frame 40 on the timeline and choose Create Shape Tween from the menu that appears.



We're done now with the first two pictures. Repeat this process also for every other pictures.

Have a nice day!

Download source file (.fla)