In this thoroughly explained, detailed lesson, I will show you how to create a really cool and advanced circular animation using a little action script code. You can use this lesson, for any presentation, some flash banner, header... Using this lesson, you will also learn how to convert any image into a Movie Clip Symbol, how to create motion tween, how to draw circle using the Oval Tool (O) and much more!


Example:



Step 1

Start flash. Press Ctrl+J on your keyboard (or select Modify > Document ) to open the Document Properties panel. Set the width of your document to 300 pixels and the height to 225 pixels. Select white as background color.Change the Frame rate to 44 fps (Frames per Second). Click ok.



Step 2

Download my picture.



Step 3

Go back in flash, choose File > Import > Import to Stage (Ctrl+R) and Import my picture.

Step 4

While the picture is still selected, open the Align Panel (Window > Align - shortcut key: Ctrl+K). Then, 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.



Step 5

While the picture is still selected, press F8 key (Modify > Convert to Symbol) to convert this picture 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. See the picture below.



Step 7

While the picture is still selected, press again F8 key to convert this picture again into a Movie Clip Symbol.



Step 8

After that, take again the Selection Tool (V) and double-click on the movie clip on the stage.



Step 9

While the picture is still selected, press again F8 key to convert this picture again into a Movie Clip Symbol.



Step 10

Click on frame 15 and press F6 key. Then, while you're still on frame 15 go to the Action Script Panel (F9) and enter this code:

stop ();

Step 11

Go back on the first frame, take the Selection Tool (V), click once on the picture to selecte it and 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%. See the picture below.



Step 12

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 13

Go back on the previous scene.



Step 14

Click on frame 15 and press F5 key.

Step 15

Create a new layer above layer 1 and name it mask.

Step 16

Lock layer 1, select mask1 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" 390x390 px. After that, select the "circle" and go to the Align Panel (Ctrl+K). Then, 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 "circle" with the background. See the picture below.







Step 17

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



Step 18

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