First time here? First time here? Newsletter Signup Newsletter
651326 Members and growing! | Flash Jobs
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:

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

» Level Intermediate

Added: 2005-07-06
Rating: 8 Votes: 37
(10 being the highest)
» 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!

Comments

  • There are no comments yet. Be the first to comment!

  • You must have javascript enabled in order to post comments.

Leave a Comment
  • Your email address will not be published. All fields are required.
Featured Flash FLA
» Author: work2survive
» Title: Girl Walking 1kb
» Description: Walking girl, animation just takes 1kb, using high heels shoes, and fashion model attitude.
Featured Sound Loops
Image for equalize

Audio Player

» Author: BoxCat
» Title: CPU Talk
» Description: From the cyberpunk RPG, "Nameless: the Hackers" Completely Free to use! Keywords: edm hip hop rap electronic mysterious mission hacking chase exciting spy ios ambient chilling love happy sad angry suspense
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: nathan
» Description:

A recorded sound of the Dimensional Fork Gate.