Fading Concentric Rings

Fading Concentric Ring Effect

by Cameron Gaut

This tutorial assumes you know the basics of Flash drawing and movie clips.

Step 1: Making the initial circle animation

First, create a small circle with no fill, just an outline. Then select it, hit F8 to make it into a new movie clip. Name it circle. Now that it's a movieclip, give it an instance name of "circle" as well. Now double-click on the movie clip to edit it. Make a key frame at about frame 40. click on your circle and hit "q" to size it up. Make it as big as you like. Select it, and in the info palette, make its transparency 0%. The circle will seem to disappear once you deselect it. Don't worry, it's still there. Now click on the first keyframe of this movieclip and create a shape tween with easing out (value 100). When you play the clip, it the circle should grow fast at first, then fade out while growing slower. Now for a last step, add a final keyframe just after the last one. You should now have 3 keyframes. One at 1, one at 40, and one at 41. Paste the following code into this new keyframe:

this.removeMovieClip()

The function of this code is to eliminate this particular copy when the animation is finished. (We will add code later that copies this movie clip many times over) That way it will free up memory, and won't bog the system down with unnecessary processing.

Step 2: The rest of the code

Now it's time to create an actions layer in the root timeline, and in the first (and only) frame, paste this code:

circle._visible = false; // hide our source circle


listener = new Object(); // create a function to "listen" for mouse events
listener.onMouseDown = function(){
	_root._quality = "MEDIUM";
	instructions._visible = false;
	msDown = true;
}
listener.onMouseUp = function(){
	msDown = false;
}
Mouse.addListener(listener);

var circleCount = 0; // an arbitrary name to count the unique instances of the circle movie clip
this.onEnterFrame = function(){ // updates every frame
	if (msDown==true){ // if the mouse is down
		circleCount++; // increment a counter by 1
		_root.circle.duplicateMovieClip("circle"+circleCount, circleCount); // create a circle with a unique ID and depth
		_root["circle"+circleCount]._x = _root._xmouse; //move the circle to the mouse location
		_root["circle"+circleCount]._y = _root._ymouse;
	}
}

Ok, how does this work?

By creating a listener, we can determine when the mouse is being pressed. From there, we will draw these circles only if the mouse is down. Got it? Good. Then, in order to create all the duplicate movie clips, we create a function that, on the root level, will run some code every single new frame. If the frame rate is 20 fps, this event will occur 20 times per second. So what we're doing is duplicating the circle movie clip over and over, each time moving it to the exact location of the cursor. Pretty simple huh?

I hope you enjoyed this tutorial brought to you by www.modcam.com