Attracitve photo animation

2.8.2008, 2:6
Submited in: Flash | Total Views: 34975

In this tutorial, I will show you how to create very attractive and practical photo animation in flash. I will show you how to present some photo in flash on a very simple, but in the same time very modern way... You don't have to use action script code to make this animation. This animation, you can use for any any flash banner, header, presentation... Using this tutorial, you will also learn how to Import any photo into a flash stage, how to convert it into a Movie Clip Symbol, how to use Free Transform Tool for photo manipulation and much more!

Step 1

First of all, save a photo below which we will use for this animation!

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 200 pixels (as the dimensions of picture). Select any color as background color. Set your Flash movie's frame rate to 32 and click ok. See the picture below.

Step 3

Choose now, file > Import > Import to stage (Shortcut key: Ctrl+R) and import a photo that you just saved in step 1 into a flash stage.

Step 4

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 5

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

Step 6

Click now on frame 15,40 and 50 and press F6 key.

Step 7

Go back now on the first frame, take the Free Transform Tool (Q) and decrease the photo like it is shown on the picture below!

Step 8

Take now the Selection Tool (V) and place this decreased photo on this position:

Step 9

After that, take again the Free Transform Tool (Q) and do this:

Step 10

After that, do this:

Step 11

Select now frame 15 and using again the Free Transform Tool (Q), decrease this photo again. See the picture below!

Step 12

Then, do this, using again the Free Transform Tool (Q):

Step 13

Select now frame 40, take 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 Alpha in it and put it down to 65%.

Step 14

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

Step 15

Go back now again on frame 15, and go again to the Properties Panel (Ctrl+F3) below the stage. Then, choose the following options:

Now, we're done!

Have a nice day and enjoy!

Download example

Are you a website owner?
Click here to register and submit your tutorials!

Browse by category

Most popular tutorials