Icon Animation

See this lesson and learn how to create icon animation in flash 8 with no Action Script.

Step 1

Open a new Flash document.

Step 2

Press Ctrl+J or select Modify > Document to open the Document Properties dialog. Set the width of your document to 250 pixels and the height to 250 pixels. Select white as background color. Set your Flash movie's frame rate to 30 and click ok.

Step 3

Download my icon.



Step 4

Go back in flash and choose File > Import > Import to Stage to import that icon into the flash stage.

Step 5

While the icon 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 6

While the icon is still selected, press Ctrl+B key on the keyboard to break apart it.



Step 7

Click on frame 45 and press F6 key.

Step 8

Take the Selection Tool (V) and double click on layer 1 to rename its name in icon. After that, create a new layer above layer icon and name it shape.

Step 9

Select shape layer and take the Oval Tool (O). In the Colors portion of the Tool panel, block the Stroke color by clicking on the little pencil icon and then on the small square with the red diagonal line. For Fill color choose any color and draw a circle above the icon about 300x100px. See the picture below.



Step 10

Click on frame 20 and press F6 key.Then, take the Selection Tool (V), and do like it is shown on the picture below.



Step 11

Click on frame 25 and frame 30 and press F6 key. While you're still on frame 30, take again the Selection Tool (V) and do like it is shown on the picture below.



Step 12

Take the Selection Tool (V), select the shape layer and go to the Properties Panel (Ctrl+F3) below the stage. Then, select Shape from the Tween menu.



Step 13

Select shape layer and convert it to a mask by right-clicking on the shape layer and selecting Mask. See the picture below.



Step 14

Lock shape layer. Click on frame 35 and after that on frame 40 of layer icon and press F6 key.

Step 15

While you're still on frame 40, take the Free Transform Tool (Q),select the icon, press and hold down Shift key and do like it is shown on the picture below.



Step 16

Click on frame 35, go to the Properties Panel below the stage and select Shape from the Tween menu.Do that also for frame 40. See the picture below.



Step 17

Click on frame 70 of layer icon and press F6 key.

Step 18

After that, press Ctrl+C key (Copy). Then, create a new layer above shape layer and name it icon_mc.

Step 19

Clcik on frmae 70 of icon_mc layer and press F6 key. After that, press Ctrl+Shift+V key (Paste in Place).

Step 20

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



Step 21

Click on frame 75 and press F6 key

Step 22

While you're still on frame 75, take the Free Transform Tool (Q) and increase the icon a lot. See the picture below.



Step 23

Take the Selection Tool (V) and click once on the icon 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 0%.



Step 24

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



We're done!

Test your Movie (Ctrl+Enter)