tutorial.jcwcn.com home / 2D Graphics / Flash / Animation > text Go back Print

Cool and simple photo animation with sound

  2009-04-27 10:30:49  

Using this thoroughly explained, detailed flash lesson, you will see how to create very cool and simple photo animation with sound. To make this lesson, you have to use Advanced color Settings, Motion tween and sound. You don't have to use action script code to make this lesson. You can use this animation for any presentation, flash header, banner... Let's start!

Example:

 

Step 1

Start flash. Press Ctrl+J key on the keyboard (Document Properties) and set the width of your document to 300 pixels and the height to 225 pixels. Select white as background color. Set your Flash movie's frame rate to 33 and click ok.



Step 2

Save the photo below!



Step 3

Call the current layer photo. Double-click on its default name (Layer 1) to change it. Press Enter once you have typed in the new name!

Step 4

Choose now File > Import > Import to Stage (Ctrl+R) and import the photo into a flash stage.

Step 5

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



Step 6

While the new made Movie Clip 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

Click now on frame 10 and 40 and press F6 key on the keyboard.

Step 8

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



Step 9

After that, Select 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 Advanced in it, click on Settings button and make the adjustments as follow:



Step 10

Select now frame 10, Select the Selection Tool (V) again 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 Advanced in it, click on Settings button and make the adjustments as follow:



Step 11

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



Step 12

Select now frame 10 and go again to the Properties Panel (Ctrl+F3) below the stage. Then, choose the following options:



Step 13

Create now a new layer above the layer photo and name it sound.

Step 14

Download now my example file (fla) at the end of tutorial and open it into a flash. After that, open my flash library (Ctrl+L), find my sound file, select it and press Ctrl+C key (Copy). After that, go back on the flash stage of lesson, select sound layer and press Ctrl+V key (Paste).



That's it!

Test your movie (Ctrl+Enter).

Have a nice day!

Download source file (.fla)



/2D-Graphics/Flash/Animation/2009-04-27/13673.html