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 photo animation

14.6.2008, 2:1    Total views: 15098
In this easy, detailed Flash lesson, I will show you how to create simple photo animation using some special flash tips and tricks. You don't have to use action script code to make this lesson. You can also use this simple animation for some presentation, flash banner...



Step 1

First of all, save my photo below to quickly create this tutorial!





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

Step 3

Go back into a flash stage. Choose file > Import > Import to stage (Shortcut key: Ctrl+R) and import any photo 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.



After that, while the photo is still selected, press Ctrl+B key (Break apart) to break apart this photo.



Step 5

Click now on frame 20,30, 80 and 100 and press F6 key.

Step 6

Go back now on the first frame and place the photo on the position like it is shown on the picture below.



Step 7

Go back now on frame 20, take the Selection Tool (V) and do like it is shown on the picture below.



Step 8

Select now frame 100 and place the photo on this position:



Step 9

While you're still on frame 100, repeat step 7.

Step 10

Go back again on the first frame and open the Properties Panel (Ctrl+F3). Then, under Tween drop down menu choose Shape. See the picture below.



Now, you have this:



Do this also for frame 20 and 80.

We're done!

Test your movie (Ctrl+Enter).

Have a nice day!

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: 166041

3. Photo slide show
Total views: 153641

4. High-tech city animation
Total views: 151459

5. Special Picture Effect
Total views: 146246

Related links