• Articles and Tutorials
• Contact

Flash image presentation tutorial

This Flash tutorial is based on a readers request, more of less. I got an email from a person who had a flash animation problem. Here is a part of the email to see what the is.

The email sounded like this.

Basically I want another 4 pictures to appear in the middle of the screen, one by one they should shrink and tween to each corner. Can you tell me how I can achieve that?

And of cause I can, just though I would make a tutorial about it then :-)

So in this Flash tutorial we will make a nice looking image animation, presentation like the one below.

First we have to import all the four images to the stage, so go to file -> import -> import to stage and locate all the images (remember to make them all 200 by 200 px) then make the stage about 450 x 450 so we have a nice looking work area.

Now that we have all images in place, they all are centered on the stage by default, very convenient, as that is where we want them to start at the animation begins.

Only one problem, we want each image on a separate layer, so make 4 layers, (I just named them 1, 2, 3 and 4) cut the images out and place them in each layer.

Also remember to right click each image and convert them into a movie clip at this point. (if you forget this, you cant animate them to do anything).

So now we are ready to do some animation tweens, all the following steps needs to be done for each layer separately, so just repeat them 4 times :-)

First right click at frame 20 and 40 and insert a new keyframe.

Select frame 20 and with the free transform tool scale out the image to make it a bit bigger (about one half bigger then the original image).

Now right click between frame 1 and 20 and choose create shape tween.

Select frame 40 and drag the image to the right left corner (for the other images do the other 3 corners of cause).

Right click between frame 20 and 40 and choose create shape tween again.

Repeat these steps for all the four layers to make this animation work.

That was the worst part, now the final step will be not to have the images animate at the same time.

So drag - select all the frames at layer 2 as shown below.

Now drag all the selected frames to the right, so it start at the frame after the layer 1 animation has finished (see below)

Do the same for layer 3 and 4 and the timeline should look like mine.

Now test the flash movie and see how your animation looks.