Cool image presentation with text

Date: 30.5.2008, 3:3 Total views: 42797

In this tutorial, I will show you how to create very useful

image presentation which you can use for any flash
header, banner or some presentation. You don't have to
use action script code to make this tutorial. You will also
use a little text animation to make this presentation more
powerful.

Step 1

First of all, download my images that we will use for this example.

Step 2

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

After that, choose File > Import > Import to Library. In the file explorer window that appears, find a three
images (image1, image 2 and image 3 ) 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 4

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

Step 5

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 6

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

Step 7

Double click on layer 1 to rename its name into a photo 1. After that, click on frame 15 and 25 and press
F6 key.

Step 8

Go back on frame 15, take the Free Transform Tool (Q), press and hold down Shift key and decrease the
image like it is shown on the picture below.

Step 9

After that, take 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. On the right, you will see the Color menu. Select Tint on it and
choose the following options.

Now, you have this:

Step 10

While you're still on frame 15, press Ctrl+C key (Copy) to copy this rectangle. After that, go back on the
first frame, and press Delete key on the keyboard.

Step 11

After that, while you're still on frame 1, press Ctrl+Shift+V key (Paste in Place).

Step 12

Then, place the rectangle on the position like it is shown on the picture below.

Step 13

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

Step 14

Select frame 25 and press F6 key then times.

Step 15

Go back on frame 26, take 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.On the right, you will see the Color menu. Select Advanced
on it, click on Settings button set the following options and click ok.

Do this also for frame 28,30,32 and 34.

Step 16

Click now on frame 120, 130 and 135 and press F6 key.

Step 17

While you're still on frame 135, press delete key on the keyboard to delete it. Then, go back on frame 15
and press Ctrl+C key (Copy).

Step 18

After that, click on frame 135 and press Ctrl+Shift+V key (Paste in Place).

Step 19

While you're still on frame 135, place the rectangle on the position like it is shown on the picture below.

Step 20

Go back now on frame 130 and press also delete key on the keyboard. After that, press Ctrl+Shift+V key
(Paste in place).
Step 21

Choose right-click anywhere on the gray area between the frame 120 and 130 and frame 130 and 135 on
the timeline and choose Create Motion Tween from the menu that appears.

It's time for text animation.

Step 22

Create a new layer above the layer 1 and name it text.

Step 23

Select the text layer, click on frame 35 and 65 and press F6 key.

Step 24

Go back on frame 35, take the Text Tool (A), for text color choose white and type any text and place on
the position like it is shown on the picture below.

Step 25

After that, click on frame 65 and place the text on this position:

Step 26

While you're still on frame 65, press F6 key then times.

Step 27

Go back on frame 66 and press delete key on the keyboard. Do this also for frame 68,70 and 72. See the
picture below.
Step 28

Click now on frame 120 and press F6 key. After that, place the text on this position:

Step 29

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

Now, we're done with the first image. Do this also for every other...

Have a nice day!

Download source file (.fla)