Dynamic image appearance

In this detailed lesson you have a chance to learn how to create dynamic image appearance in flash 8 with no action script. You will also learn:

1. How to import an image in Flash,
2. How to convert a bitmap image into a symbol,
3. How to apply flash filter on image and more.



Step 1

Start flash. Press Ctrl+J key (Modify > Document) and set the width of your document to 300 pixels and the height to 250 pixels. Select white as background color. Set your Flash movie's frame rate to 42 and click OK.



Step 2

Find any image and set their dimension in photoshop or some other graphic program to 300x250px. You can alos download my image if You like.



Step 3

Go back in flash and choose file > Import > Import to Stage (Ctrl+R) and imort that image.

Step 4

While the image is still selected, go to the Align Panel (shortcut key: Ctrl+K) and choose 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 your image with the background.

Step 5

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



Step 6

Double click on layer 1 to rename its name in image 1. After that, click on frame 15 and press F6 key.Then, take the Free Transform Tool (Q), click once on the image to select it, and enlarge it to 82x69px. See the Info Panel below.



Step 7

Go back on layer 1, take again the Free Transform Tool (Q) and decrease the image to 7x6px. See the picture below.



Step 8

While you're still on frame 1, take the Selection Tool (V), click once on the image that you have just decreased and go to the Properties Panel (Ctrl+F3) blow the stage.On the right, you will see the Color menu. Select Advanced in it, click on Settings button and choose the following options:





Then, click ok.

Step 9

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



Step 10

Click again on frame 15 and press Ctrl+C key (Copy). After that, create a new layer above the image 1 layer and name it image2. Then, click on frame 15 and press F6 key. After that, press Ctrl+Shift+V key (Paste in Place).

Step 11

Click on frame 30 of layer image 2 and press F6 key. Then, take again the Free Transform Tool (Q) and enlarge the image to 108x91px. See the Info panel (shortcut key: Ctrl+I ) below:



Step 12

Go back on frame 15, take the Selection Tool (V), click once on the image to select it, and repeat step 8.

Step 13

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 14

Click on frame 30 of layer image 2 and press Ctrl+C key (Copy). Then, create a new layer above the image 2 layer and name it image 3. Then, click on frame 30 of layer image 3, press F6 key, and after that Ctrl+Shift+V key (Paste in place).

Step 15

Then, click on frame 45 and press F6 key. While you're still on frame 45,take again the Free Transform Tool (Q) and enlarge the image to 146x123px. See the Info panel again below:



Step 16

Go back on frame 30, take again the Selection Tool (V), click once on the image to select it, and repeat step 8.

Step 17

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



Step 18

Repeat the previous process until you came to the end (300x250px).Below is a values, which you will use, when you will be enlarging the image using the Free Tramsform Tool (Q).

frame 60:



frame 75:



frame 90:



frame 105:



Step 19

Click on the first frame of layer image 1 and go to the Properties panel below the stage. On the left side, you will see Rotate option. Set the rotate to CCW. See the picture below.



Step 20

Click on frame 15 of layer image 2 and go again to the Properties panel below the stage. Then, set Rotate to CW.

Step 21

Click on frame 30 of layer image 3 and for Rotate set CCW.

Step 22

Click on frame 60 of layer image 5 and for Rotate set CW.

Step 23

Click on frame 200 of layer image 7 and press F5 key.

We're done!

Bye!

Downlaod source file (.fla)