Custom Search

Monday, November 26, 2007

Circle transformation

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 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;
}
i++;

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!

No comments: