Flash tutorials
Home 3D (2) Actionscripting (66) Animation (108) Audio (4) Drawing (7) Full flash sites (4) Getting Started (15) Navigation (25) Special Effects (61) Text Effects (38)

Simple picture animation

10.7.2007, 20:45    Total views: 72778

See this lesson and learn how to create simple picture animation in flash. You don't have to use action script code to create this lesson. To create this lesson, you will also learn how to use flash filters, how to enlarge the picture using the Free Transform Tool and more.



Step 1

First of all, download my picture that you will be use for this lesson.





Step 2


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



Step 3

Choose File > Import > Import to Stage (Shortcut key: Ctrl+R) and import my picture into a flash.

Step 4

While the picture is still selected, go to the Info Panel (Ctrl+I). Then, for Width set 210 and for Height set 150px. See the picture below.



Step 5

While the picture is still selected, go to the Align Panel (Ctrl+K) and set the following options:

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.



Now you have aligned the picture with the background.

Step 6

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



Step 7

Double click on layer 1 to rename its name in picture. After that, click on frame 15 and after that on frame 25 and press F6 key.



Step 8

While you're still on frame 25, take the Free Transform Tool (Q), press and hold down Shift key and enlarge the picture a little, like it is shown on the picture below.



Step 9

After you have enlarged the picture, take the Selection Tool (V) and click once on it to select it.Then, go to the Properties Panel (Ctrl+F3) below the stage. Click on the Filters tab. Click on the plus icon and select the Adjust Color. Make the adjustments as follows:

1. Brightness: 38
2. Contrast : 24



Now, you have this:



Step 10

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



Step 11

Click on frame 30 and press F6 key. Then, take again the Selection Tool (V) and click once on the picture to select it. Then, go again to the Properties Panel below the stage. Click on the Filters tab and make the adjustments as follows:

Saturation: 70



Step 12

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



Step 13

Click on frame 40 and press F6 key. Then, take again the Selection Tool (V) and click once on the picture to select it. Then, go again to the Properties Panel below the stage. Click on the Filters tab and make the adjustments as follows:

Hue:136



Step 14

Go back on frame 30 and go to the Properties Panel (Ctrl+F3) below the stage.Then, for Tween choose Motion and for Rotate set CW. See the picture below.



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

2. High-tech city animation
Total views: 249218

3. Water effect
Total views: 227574

4. Photo slide show
Total views: 209723

5. Special Picture Effect
Total views: 185301



Related links