First time here? First time here? Newsletter Signup Newsletter
Search tutorials
Author: Cameorn Gaut | Website: http://www.modcam.com/

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:


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;

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

» Level Intermediate

Added: 2005-07-06
Rating: 8.03 Votes: 38
» Author
Cameron Gaut is a freelance graphic designer and programmer.
» Download
Download the files used in this tutorial.
» Forums
More help? Search our boards for quick answers!
Featured Flash FLA
» Author: Inocreato
» Title: RaiseTheBlocks
» Description: Raise all the blocks to win the game
Featured Sound Loops
Image for equalize

Audio Player

» Author: TomCat Carty
» Title: The Wood
» Description: Just a little game ending or it can maybe be looped. Recorders with music box and percussion to give the feel of well, I don't know, the woods? Free to use, just credit me. thank you
Latest Font
» Author: Fábio FAFERS
» Description: I created this font for free use. Everyone can apply it in personal or business texts. Its free, but I want to be communicated in case of business use. Donations are accepted to keep the project of free fonts alive! Thank you all
Featured Sound Fx
Image for equalize

Audio Player

» Author: Davisigner
» Description: Hmm... what to say about this one? It's reminiscent of the closing notes of the opening music from the Three Stooges done in a church organ style with a closing cymbal crash. I'll give this one away gratis, but feel free to check out my free loops and potential upcoming license-mandated ones over in the respective part of Flashkit.