Multiple photo animation

Date: 17.3.2009, 20:13 Total views: 13795

Read this thoroughly explained, detailed lesson and see how to create multiple photo animation using the mouse cursor and action script code. You can use this animation for some presentation, flash banner, some flash elements. Using this lesson, you will also learn how to import any photo into a flash stage, how to animate it, how to apply action script code on it and much much more! Let's start!

Example:

Step 1

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

Step 2

Save the image 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 that you saved in step 2!

Step 5

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

Step 6

Double-click on the movie clip on stage with the Selection tool(V). You should now be inside the Movie Clip.

Step 7

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

Step 8

Click now on frame 15 and 20 and press F6 key.

Step 9

Go back now on frame 15, select the Free Transform Tool (Q) and enlarge photo a little like it is shown on the picture below!

Step 10

After that, select the Selection Tool (V) and click once on the photo 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 Alpha in it and put it down to 22%.

Step 11

Select now frame 20, take the Selection Tool (V) again and click once on the photo to select it. Than, 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 0%.

Step 12

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

Step 13

Create now a new layer above the layer 1 and name it invisible button. After that, create the Invisible Button over the photo. See the picture below!

Step 14

Select now the Selection Tool (V), select all frames and move it, using the "drag and drop" technique on frame 2.

Step 15

Select the first frame of layer invisible button and go to the Action Script Panel (F9). Then, enter this code inside the actions panel:

stop();

Step 16

Select the Selection Tool (V) and click once on the invisible button to select it. Then, go to the Action Script Panel (F9) and enter this code inside the actions panel:

on (rollOver) {
gotoAndPlay(2);
}

Step 17

Go back now on the previouse scene (Scene 1) and duplicate your Movie Clip by pressing Ctrl+D key many times. See the picture below!

We're done now!

Test your Movie (Ctrl+Enter) and move your mouse cursor over the flash example to see the animation.

Download source file (.fla)