Trail effect

[Flep]

Hello everybody!

Here is a new example of animation created with Flash CS3 and Actionscript 3.0 .
In this case, I simulate the trail of an object in movement.
As always I underline the fact that this example is purely didactic (not to say that my graphics can be ugly) and therefore once learned the logic and the techniques of the code, it will be up to you to personalize the SWF to your liking with the better graphics.
Free your fantasy and let it take over the control...

This is the final result:

I create a FLA and I save it as "main.fla".
Into which, I have a MovieClip in library named "mc_clip" to which I associate the class named Clip (let Flash create it for you).

I create the Document Class, an AS file saved as "Main.as", implemented the following way:

package
{
	import flash.display.MovieClip;
	import flash.events.Event;
	
	public class Main extends MovieClip
	{
		private var clip_mc:MovieClip;
		
		private const RADIUS:int=120;
		private const FRICTION:Number=.95;
		
		public function Main()
		{
			init();
		}
		
		private function init():void
		{
			stage.frameRate=31;
			
			createClip();
		}
		
		private function createClip():void
		{
			clip_mc=new Clip();
			clip_mc.x=stage.stageWidth/2+Math.cos(clip_mc.angle*2)*RADIUS;
			clip_mc.y=stage.stageHeight/2+Math.sin(clip_mc.angle*3)*RADIUS;
			clip_mc.angle=0;
			addChild(clip_mc);
			
			clip_mc.addEventListener(Event.ENTER_FRAME,go);
		}
		
		private function go(evt:Event):void
		{
			evt.target.x=stage.stageWidth/2+Math.cos(clip_mc.angle*2)*RADIUS;
			evt.target.y=stage.stageHeight/2+Math.sin(clip_mc.angle*3)*RADIUS;
			evt.target.angle+=.05;
			
			var copy_mc:MovieClip=new Clip();
			addChild(copy_mc);
			
			copy_mc.x=evt.target.x;
			copy_mc.y=evt.target.y;
			copy_mc.addEventListener(Event.ENTER_FRAME,goCopy);
		}
		
		private function goCopy(evt:Event):void
		{
			evt.target.alpha*=FRICTION;
			evt.target.scaleY=evt.target.alpha;
			if(evt.target.alpha<=.3) 
			{
				evt.target.removeEventListener(Event.ENTER_FRAME,goCopy);
				var m:MovieClip=evt.target as MovieClip;
				removeChild(m);
			}
		}
	}
}

Let us analyse the code

Properties
a variable of type MovieClip which will instance the class Clip associated to the MovieClip "mc_clip" placed in the FLA"s library
private var clip_mc:MovieClip;
a constant containing the radius value of the angle used to move the MovieClip
private const RADIUS:int=120;
a constant used as friction ( see this tutorial )
private const FRICTION:Number=.95;

Constructor function
I call the method init
init();

Methods
init();
I impost the frame rate
stage.frameRate=31;
I call the method createClip
createClip();

createClip();
I create a new Clip
clip_mc=new Clip();
I impost the x and y using sinus and co sinus. To start the animation, I will use the same logic of sinus and co sinus so the clip will already have the initial coordinates and when I attach the clip, no scat will be seen.
clip_mc.x=stage.stageWidth/2+Math.cos(clip_mc.angle*2)*RADIUS;
clip_mc.y=stage.stageHeight/2+Math.sin(clip_mc.angle*3)*RADIUS;
I add a property to clip_mc named "angle" and I impost it to zero
clip_mc.angle=0;
I add clip_mc to the stage
addChild(clip_mc);
I add ENTER_FRAME to clip_mc which will call the method go as many times by seconds based on the frame rate (in this case, the method go will be called 31 times)
clip_mc.addEventListener(Event.ENTER_FRAME,go);

go(evt:Event):void
I assign x and y to clip_mc based on the values obtained on simple trigonometry
evt.target.x=stage.stageWidth/2+Math.cos(clip_mc.angle*2)*RADIUS;
evt.target.y=stage.stageHeight/2+Math.sin(clip_mc.angle*3)*RADIUS;
I increase the property angle of clip_mc
evt.target.angle+=.05;
I create another Clip named copy_mc
var copy_mc:MovieClip=new Clip();
I add it to the stage
addChild(copy_mc);
I assign the same coordinate x and y of clip_mc to copy_mc
copy_mc.x=evt.target.x;
copy_mc.y=evt.target.y;
copy_mc will have its own ENTER_FRAME which will call the method goCopy
copy_mc.addEventListener(Event.ENTER_FRAME,goCopy) ;

goCopy(evt:Event):void
I apply the friction to the property alpha of copy_mc
evt.target.alpha*=FRICTION;
I impost the property scelY of copy_mc with a value equal to its alpha
evt.target.scaleY=evt.target.alpha;
I check if the alpha of copy_mc is lesser then 0.3
if(evt.target.alpha<=.3)
{
If it is, I stop the ENTER_FRAME of copy_mc
evt.target.removeEventListener(Event.ENTER_FRAME,g oCopy);
I remove copy_mc
var m:MovieClip=evt.target as MovieClip;
removeChild(m);
}

See you soon!

[Oldarney]

awesome effect, i searched this on Google and brought me here. i was looking for an arrow animation that leaves a smooth and permanent trail. with a few mods this actually works for my needs. is there a better way to make such a trail. i hope so, but for now i dont have much time.

[lex_ph]

such cool effect...

[Oldarney]

such cool effect...

yes and... i used this on my presentation for the the growing arrow tail or trail. its hard to think of a better way, i think it would involve a lot more as3 drawing.

[chandler7888]

Hello Flep! I'm kinda new to flash.. couple weeks into it actually. But I am trying to create what you have done here. I have created the fla with movie clip mc_clip and selected Export for Actionscript and used Clip for the linkage class. saved it as main.fla.

i created an Actionscript file and copy/pasted your code and saved it as Main.as in the same directory as main.fla.

I test the movie (Main.as) but nothing shows up except the mc_clip on the stage where I have it on the main.fla file's stage.

Is there ActionScript that needs to be on the mc_clip?

Any knowledge is appreciated and will help me in my journey to bigger and better things! :D

thanks!!!

Chandler
chandlerr.com

[chandler7888]

Hello again Flep! I did get this to work with my own graphic. But I was wondering if you could help me figure out how to make it start off really small and fly in towards me until it just expands out of the screen. similar to what these logos are doing.. http://www.boardwalkag.com/ any hints? :D

Thanks a mil

Chandler
chandlerr.com

[p4parry]

Hi Chandler,

It would be great, if you please upload the source file......I tried the same thign which you did, but it didnt work....looking for ward for your reply.

Parry

[chandler7888]

i have not been able to create my own movement.
I can connect the fla file with the .as file to make the actual example here work.
you can use any movie clip you want as long as the movie clip has the assigned clas 'Clip' and the fla is in the same directory as the .as file.
i'm a newbie to flash period and i really need help trying to recreate that flash intro for the boardwalk link in my last post:
http://www.boardwalkag.com/
Flep creates this example with just a random movement like the number 8.
i don't want my movie clip to move like that. I want it to start small like it's in the distance and motion guide and zoom in at me. like a race care that runs over the camera.. like the example at:
http://www.boardwalkag.com/
i can't put an instance on the stage in the fla file. the .as dynamically generates the movie clip. so the fla file's stage is actually blank with no timeline.
how in the world do I do this?
can anyone spare a few minutes that has this knowledge?

[Onsitus]

Hi,

to me it does not look like this animation has been created in flash. Looks more like a video imported in flash.

[chandler7888]

you are correct. but how was that video created? even if it was not in flash.. this trail effect is perfect. I just need to be able to create the 'FLY IN" effect while maintaining that 'trail effect'. here is what I have tried to do. Coming Soon does not look enough like it. I have to have that trail effect and the smooth 'FLY IN' on my logos.

in this tutorial for the trail effect.. he has it randomly moving. how can I control the way it moves? can I start it at a specific x/y point and size? and then have it tween to a new x/y point and larger size? maybe some alpha at the very end so it fades out smoothly? basically what I am saying I need to recreate that logo fly in exactly like boardwalk. have any idea how to?