Running Circles Effect

Flash allows you to create many cool effects using only (or almost only)  ActionScript. An example of such effect can be found in the tutorial that this link leads to. It explains you how to create a flame trailer using duplicateMovieclip function.

This time, I'm going to create a similar effect, again using the same function, except that this time the effect will be happening without your cursor. Here's what we will create:

 

 

 


 

 

I think this is an eye-catching effect that could not be created too easily without ActionScript.

Getting started

We first need to create a basic animation inside a Movieclip that we will then duplicate. So:

i. Draw a circle using the Oval Tool (O).

TIP: Hold down the Shift key so that it is a circle, not an oval.


Then, convert it  to a Movieclip by pressing F8. Remember - a Movieclip. The Graphic symbol won't work with ActionScript!.


Once it's done, double-click on the Movieclip to edit it.

Now, what animation do we want to create in this Movieclip? Well, we want to create a tween in which the ball gradually gets smaller and more transparent plus, it goes in a given direction.


In order to do that, just make the circle on the last frame of the tween very small and more transparent by reducing alpha in the Color Mixer window. Also, don't forget to move it to the right so that it changes its position, too!

TIP: The Color Mixer Window can be opened by pressing Shift + F8

Below is a picture of the Color Mixer. Alpha property can be specified in the text field located at the very bottom.


TIP:  To learn more about tweens, click here.


 And now goes the important part:

Select the last frame + 1  of the tween (so if your tween is 30 frames long, then select the 31-th frame), press F7 to create a blank keyframe there. We're going to place a code on this blank keyframe. So, select it, press to open AS window and type in this simple, but how necessary code:

stop();

Of course, what this code does is stop the animation. We do that because we don't want the animation inside the MovieClip to loop.

Below is how your timeline should look like:



ii. Go back to the main timeline, select the symbol "circle"  and give it an instance name "circle".  We specify the instance name in order to be able to "talk" to the MovieClip by means of ActionScript.


Important:
Instance Name should not be confused with Symbol Name! You can read a tutorial on this topic here.

 

 

 

iii. Select the first frame of the Timeline and press F9 for the ActionScript window to appear. Type in the following code:

i = 0;
this.onEnterFrame = function() {
i++;
circle.duplicateMovieClip(_root.circle+i, i, {_alpha:100, _rotation:random(360)});
};
};
The above code duplicates the Movieclips every frame. After a few minutes we will have thousands of Movieclips on the stage, most of them invisible, but still there. So, we have to include a code that will delete Movieclips we don't need.  If we don't do that, the number of Movieclips will be so large that it will make your computer very slow.

So, to get rid of this problem, select the circle Movieclip, press F9 and Copy and Paste the following code:

This piece of code will take care of this problem.
onClipEvent(enterFrame){
if(random(300) == 0){
removeMovieClip(this)
}
}

 

This is it! Everything should work like a dream!


Explanation

If you have any  doubts, here is the explanation to the entire AS part we've done in this tutorial.

i = 0;


We declare the variable i.

 


this.onEnterFrame = function()


We begin by telling Flash to execute a given function every frame. We will specify what function in the next two lines of the code below. Given that your fps is 20, the function will be executed 20 times every second.


i++


The double + sign means that we want the variable "i" to rise by 1. You're going to find out what we wrote this little piece of code for shortly.


circle.duplicateMovieClip(_root.circle+i, i, {_alpha:100, _rotation:random(360)})
Now it's time for duplicating! What we do now is duplicate the Movieclip called "circle" and give it a new name which is circle + i. So the new Movieclips will be like circle1. circle2, circle3 and so on.

Also, we give the duplicated Movieclips new Rotation properties, which can be anything between 0 and 359. It is thanks to this piece of code that the circles fly in all directions.


onClipEvent(enterFrame){
if(random(300) == 0){
removeMovieClip(this)
}
}

This piece of code takes care of the Movieclips which we don't need anymore, and which we have to get rid of because they slow down the computer.

This is one of the ways to achieve that. I think there are more "professional" ones, but then is it really that important?




I guess this is it. Hope this info was helpful. Click here  to see other tutorials.

Have a nice day.

AttachmentSize
effect_circle.rar5.31 KB
Average: 3.5 (208 votes)