Toxiclab.org

Advanced pink circle animation using the action script code

19.2.2009, 16:52
Submited in: Flash | Total Views: 10970

In this thoroughly explained, detailed lesson, I will show you how to create pink circle animation using the action script code and some special flash tips and tricks. Using this lesson, you will also learn how to draw pink circle using the Oval Tool (O), how to convert it into a Movie Clip Symbol, how to create instance name and much more!

Example:

Move your mouse cursor over the image!



Step 1

Create a new flash document. Press Ctrl+J key on the keyboard (Document Properties) and set the width of your document to 300 pixels and the height to 225 pixels. Select white as background color (you can also use some image as background). Set your Flash movie's frame rate to 36 and click ok.





Step 2


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 3

Select 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 pink color and draw the Oval shape about 45x45px like it is shown on the picture below!





Step 4

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



Step 5

While the new made Movie Clip (Oval shape) is still selected, go to the Properties Panel below the stage. On the left side, You will find the Instance name input field there. Call this Movie Clip circle. See the picture below!



Step 6

Click now on frame 3 and press F5 key.

Step 7

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

Step 8

Select the first frame of layer action and go to the Action Script Panel (F9). Then, enter this code inside the actions panel:

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

Step 9

Click now on frame 2 and press F6 key. While you're still on frame 2 of layer action, enter this code inside the actions panel:

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

Step 10

Click now on frame 3 and press F6 key. After that, eneter this code inside the actions panel:

gotoAndPlay(_currentframe - 1);

Step 11

Select now the Selection Tool (V) and click once on the circle to select it.

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

That's it!

Test your Movie (Ctrl+Enter)!

Have a nice day!

Download example

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

Browse by category


Most popular tutorials


Resources Worth visiting


Friends