Flash tutorials
Home 3D (2) Actionscripting (66) Animation (108) Audio (4) Drawing (7) Full flash sites (4) Getting Started (15) Navigation (25) Special Effects (61) Text Effects (38)

Circle transformation

3.11.2006, 21:42    Total views: 44791

This flash tutorila will show you how to create a circle transformation, using the Action Script.

Move your mouse over the circle, to transformate it.

Step 1

Create a new flash document, choose Modify > Document (Ctrl+J) and set width to 300 and Height to 200px. Frame rate set to 24fps (Frames per Second).

Step 2

Double click on layer 1 to rename its name in background. After that, lock the background layer, insert a new layer and name it circle.

Step 3

Take the Oval Tool (O), and draw a "circle" 30x30px. See the picture below.

Step 4

Select the "circle" and press F8 key, to convert it into a Movie Clip.

Step 5

Then, select the "circle" again, open the Action Script Panel (F9), and paste this script:

onClipEvent (load) {
setProperty(this, _xscale, (300 - _root._xmouse) * 2);
setProperty(this, _yscale, (300 - _root._ymouse) * 2);
setProperty(this, _alpha, 100);
onClipEvent (enterFrame) {
setProperty(this, _xscale, _xscale - 10);
setProperty(this, _yscale, _yscale - 10);
if (_alpha > 4) {
setProperty(this, _alpha, _alpha - 5);

Step 6

Afte that, while your new made Movie Clip ("circle") is still selected, open the Properties Panel (Ctrl+F3), and under <Instance Name> type: circle

Step 7

Insert a new layer and name it Action. Click on frame 1, open the Action Script Panel (F9), and paste this script:

i = 0;
setProperty("circle", _visible, false);

Step 8

Click on frame 2, press F6 (keyframe), and in Action Script Panel, paste this scritp:

duplicateMovieClip("circle", "circle" + i, i);
removeMovieClip("circle" + (i-15));
if (i > 14) {
i = 0;

Step 9

Click on frame 3, press F6, and paste this script:

gotoAndPlay(_currentframe - 1);

Step 10

Click on frame 3 of layers circle and background and press F5 key.

Test your Movie (Ctrl+Enter)

We're done!

Download source file (.fla)

Have questions about this tutorial?
Visit our friendly Community Forums!
Digg it! Add this tutorial to del.icio.us! Furl it! Add this tutorial to reddit! Spurl it! Add this tutorial to technorati!

Top tutorials

1. Advanced full flash site - Part 1
Total views: 308353

2. High-tech city animation
Total views: 269066

3. Water effect
Total views: 236163

4. Photo slide show
Total views: 218167

5. Special Picture Effect
Total views: 190225

Related links