Using this thoroughly explained, detailed lesson, you will see how to create modern circle animation in flash using the Motion Tween and the Free Transform Tool (Q). You don't have to use action script code to make this lesson. Using this lesson, you will also learn how to draw circle shape using the Oval Tool (O), how to animate it, convert it into a Movie Clip Symbol and much more. You can use this simple circle animation for some elements on your web site

Step 1

Create a new flash document. Press Ctrl+J key on the keyboard (Document Properties) and set the dimensions of your document as whatever you like. Select some dark color as background color. Set your Flash movie's frame rate to 30 and click ok.



Step 2

Take now the Oval Tool (O). In the Colors portion of the Tool panel, block the Fill color by clicking on the little pencil icon and then on the small square with the red diagonal line. For Stroke color choose white color and draw the Oval shape about 440x2 px like it is shown on the picture below!



Then, go to the Properties Panel (Ctrl+F3) below the stage and Select Solid as the type of outline, with the line thickness set to 0.2. See the picture below!



Step 3

After that, draw a circle shape about 15x15 like it is shown on the picture below!



Step 4

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



Step 5

Click now on frame 15 and 30 and press F6 key on the keyboard.

Step 6

Go back now on frame 15, Select the Free Transform Tool (Q), press and hold down Shift key and increase the circle as shown in the picture below!



Step 7

Select now frame 30, take again the Free Transform Tool (Q) and increase the circle again, but this time, increase it a little more...

Step 8

While you're still on frame 30, select the Selection Tool (V) and click once on the circle to select it. Then, 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 9

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



Step 10

Call the current layer circle. Double-click on its default name (Layer 1) to change it. Press Enter once you have typed in the new name.

Step 11

Create a new layer above the layer circle and name it circle 1.

Step 12

Go back on the first frame of layer circle and press Ctrl+C key (Copy) on the keyboard. After that, select frame 5 of layer circle 1 and press F6 key on the keyboard. Then, while you're still on frame 5, press Ctrl+Shift+V key (Paste in Place).

Step 13

Click now on frame 20 and 35 and press F7 key (Blank keyframe). Go back now on frame 15 of layer circle and press again Ctrl+C key (Copy). Then, select frame 20 of layer circle 1 and press Ctrl+Shift+V key (Paste in Place).

Step 14

Go back now on frame 30 and press Ctrl+C key (Copy). Then, select frame 35 of layer circle 1 and press Ctrl+Shift+V key (Paste in Place).

Step 15

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



Step 16

Create now a new layer above the layer circle 1 and name it circle 2.

Step 17

Go back now on the first frame of layer circle and press again Ctrl+C key (Copy). Then, select frame 10 of layer circle 2 and press F6 key. After that, while you're still on frame 10, press Ctrl+Shift+V key (Paste in Place).

Step 18

Click now on frame 25 and 40 of layer circle 2 and press F7 key. Go back now on frame 15 of layer circle and press again Ctrl+C key. Then, select frame 25 of layer circle 2 and press Ctrl+Shift+V key (Paste in Place).

Step 19

Go back now on frame 30 of layer circle and press Ctrl+C key (Copy). Then, select frame 40 of layer circle 2 and press Ctrl+Shift+V key (Paste in Plac).

Step 20

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

Now, we're done!

Test your Movie and enjoy!

Download source file (.fla)