FlashRespect.com

This lesson will teach you how to Import an image into a flash and after that how to animate it and apply on it shadow filter. You don’t have to use action script code for this lesson. This image animation can help you to create some flash banner, header…

Example:

Step 1

Start flash. Choose Modify > Document (Shortcut key: Ctrl+J). Set the width of your document to 350 pixels and the height to 350 pixels. Select white as background color. Set your Flash movie’s frame rate to 26 and click ok.

Step 2

Download the sample images for this tutorial and use it to quickly create this lesson.

Step 3

Choose File > Import > Import to Stage (Ctrl+R) and Import the first image into a flash. After that, place that image on the left top corner of background. See the picture below.

Step 4

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

Step 5

While the new made Movie Clip, image is still selected, go to the Properties Panel (Ctrl+F3) and click on the Filters tab. After that, click on plus icon to open the list of filters. Then, choose the Drop Shadow filter.Then, set the options for this filter as follows:

1. Blur X and Y to 8,
2. Strength to 86%,
3. Quality to Low,
4. Angle to 45°,
5. Distance to 8 and
6. Color as #333333.

Now you have this:

Step 6

Click on frame 20 and press F6 key. After that, 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.

Now, you have aligned the image with the background.

Step 7

While you’re still on frame 20, take the Selection Tool (V) and click once on the image to select it. After that, go again to the Properties Panel (Ctrl+F3) below the stage and click on filters tab. Then, set the options for Drop Shadow filter as follows:

1. Blur X and Y to 8,
2. Strength to 50%,
3. Quality to Medium,
4. Angle to 45°,
5. Distance to 21and
6. Color as #333333.

Step 8

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

Step 9

Click on frame 30 and after that on frame 40 and press F6 key. Go back on frame 30 and go to the Properties Panel (Ctrl+F3) below the stage. Then, for Tween choose Motion, for Ease set CW and for Ease choose 100. See the picture below.

Step 10

Click on frame 50 and press F6 key. After that, take again the Selection Tool (V), click once on the image to select it and go to the Properties Panel. Click on Properties tab. On the right, you will see the Color menu. Select Alpha in it and put it down to 0%.

Step 11

Go back on frame 40 and go again to the Properties Panel below the stage. Then, for Tween choose Motion, for Ease set CCW and for Ease choose 0. See the picture below.

Step 12

Click on frame 60 and press F6 key. While you’re still on frame 60, take the Selection Tool (V), click once on the image again to select it and go to the Properties Panel below the stage. On the right, you will see the Color menu. Select Alpha in it and put it down to 100%

.

Step 13

Go back on frame 50 and in the Properties Panel below the stage for Tween choose Motion, for Rotate set CW and for Ease choose -100. See the picture below.

Step 14

Click on frame 80 and press F6 key. While you’re still on frame 80, place the image on the left top corner as we have placed it on frame 1.

Step 15

Repeat step 5.

Step 16

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

Step 17

Click on frame 120 and press F5 key.

Step 18

Now, we’re done with the first image and it’s time for second image.

Step 19

Create a new layer above the first layer (layer 2). Lock layer 1, select layer 2.

Step 20

Press Ctrl+R key (Import to Stage) and import the second image into a flash.

Step 21

Place it on the right bottom corner using the arrows key or by mouse. See the picture below.

Step 22

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

Step 23

Apply the previous process that we have used for the first image on this image. Only difference that you must to do, is that for Rotate chose a contrary by comparison with the first image. For example, If we have choosed for Rotation CCW for the first image, for this image you must choose CW. I hope so that you understand me.

We’ re done!

Download source file (.fla)