Toxiclab.org

Powerful circle animation with sound

28.7.2008, 17:31
Submited in: Flash | Total Views: 24760

In this easy, detailed Flash lesson, you will see how to create powerful circle animation with sound. Using this detailed lesson, you will also learn how to use Color Mixer Panel, how to convert circle into a Movie Clip Symbol, how to use Free Transform Tool (Q) to enlarge and decrease circle and much more! You don't have to use action script code to make this lesson. Let's go!



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 #271A1B as background color (You can also use some picture as background to make this lesson more powerful) . Set your Flash movie's frame rate to 20 and click ok.



Step 2


Take now the Oval Tool (O). For Stroke color choose No color, for Fill color choose any color and draw a cricle about 95x95 px. See the picture below!





Step 3

While the circle is still selected, open the Color Mixer Panel (Window > Color Mixer) and choose the following options:

1. Click on the paint bucket icon to select the Fill color.
2. Choose Radial as Type.
3. Click on the small color rectangle that is on the left side and move it using the Selection Tool a little right and set its color to #FFFFFF. Alpha property set to 86 %
4. Create a new recatngle on the color scale and place it on the center. After that, set its color also to #FFFFFF. Alpha property set to 0 % (completely transparent).
5. Create now another rectangle and place it a little right from the center and set its color also to #FFFFFF. Alpha property set to 56 %.
6. Click on the second rectangle from the right side, move it a little left and set its color to #FDF9FF. Alpha property set also to 0 % (completely transparent).



Now, you get this:



Step 4

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



Step 5

Click now on frame 4,6 and 13 and press F6 key.

Step 6

While you're still on frame 14, take the Free Transform Tool (Q), select the circle and enlarge it a lot. See the picture below!



Step 7

Afte that, take 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 8

Go back now on the first frame, take again the Free Transform Tool (Q) and for this time, decrease the circle a lot! See the picture below.

Step 9

Go back now on frame 6, take the Free Transform Tool (Q) and enlarge again a circle, but for this time do that a little. Then, repeat step 7, but for this time, set alpha to 75%.



Step 10

Right-click anywhere on the gray area between frame 1 and 4, frame 4 and 6 and frame 6 and 13 on the timeline and choose Create Motion Tween from the menu that appears. See the picture below.



Step 11

Create now a new layer and Import on that layer any sound. That's it!

We're done!

Enjoy!

Download example

Are you a website owner?
Click here to register and submit your tutorials!

Browse by category


Most popular tutorials