View Full Version : Blade trail effect tut using AS3 [Flash][Effects][Actionscript]

12-17-2008, 01:59 AM
I saw M3D's ripped blade animation and was very impressed by the blade trail effect. I have figured a way to make the same effect.
This tut is for AS3, for AS2 users, contact me for helps

Step 1: Create your blade, sword, katana or watever...
Step 2: Convert your blade into a Movie clip and name it watever you want.
Step 3 (important): Create 1 small circle, convert it into a Movie Clip and name it Marker (Capital M, AS is case-sensitive). Go to your library, right click on Marker, check Export for Actionscript, click OK.
Step 4: Place 1 instance of Marker on the tip of your blade, change the instance name to topmarker (lowercase, no space)
Step 5: Place another instance of Marker on the handler of your blade, change the instance name to bottommarker (again, lowercase, no space)
*NOTE: Instance name is unique for each instance you place on the stage, it could be left blank while Symbol name is for each symbol. So basically, you can have 10 instances of a symbol.

Step 6: Create a new layer, name it Script, action, or watever helps you organize your layers and click on the first frame. Copy the following code:

//Set timer so trail will be draw at every frame
var timer:Timer = new Timer(10,400000);
timer.addEventListener (TimerEvent.TIMER, createTrail);
timer.start ();

/*PrevTopX - x of the top marker on previous frame
PrevTopY - y of the top marker on previous frame
PrevBottomX - x of the bottom marker on previous frame
PrevBottomY - y of the bottom marker on previous frame

var PrevTopX:Number=topmarker.x;
var PrevTopY:Number=topmarker.y;
var PrevBottomX:Number=bottommarker.x;
var PrevBottomY:Number=bottommarker.y;

function createTrail (e:Event):void {
var trail:MovieClip = new MovieClip ();
//You can change your color here
trail.graphics.beginFill (0x0033CC);

//Basically, I draw a 4-end polygon connect the 4 markers

trail.graphics.moveTo (topmarker.x, topmarker.y);
trail.graphics.lineTo (PrevTopX, PrevTopY);
trail.graphics.lineTo (PrevBottomX, PrevBottomY);
trail.graphics.lineTo (bottommarker.x, bottommarker.y);
trail.graphics.lineTo (topmarker.x, topmarker.y);
trail.graphics.endFill ();
trail.addEventListener (Event.ENTER_FRAME, animateTrail);
addChildAt (trail, 0);
//If you use addChild here, the trail will be created on top of the blade
//Since you don't want that, addChildAt will add new clip on level 0 which is the bottom


function animateTrail (e:Event):void {
//Reduce the alpha of the trail in each frame by 20%
//Reduce this number for longer trail.
e.target.alpha -= 0.20;

//Remove the trail when alpha is smaller than 0
if (e.target.alpha < 0) {
e.target.removeEventListener (Event.ENTER_FRAME,animateTrail);
removeChild ((MovieClip)(e.target));

What I did here was to create 2 markers and placed them on the tip and the handler of the blade. All the PrevX and PrevY store the coordination of both marker in the current frame.
In the next frame, those PrevX and PrevY become the value of the last frame.
The next step is pretty simple, I just have to connect all 4 markers (2 on the current frame, 2 on the previous frame) to make the trail and then reduce alpha.

You'll have to tweak the code a little if you wanna put the whole thing into a movie clip. I'm too lazy and sleepy to do it.

I'm gonna edit this if I have time.

If anyone needs some help, I'm on Yahoo!Messenger and MSN almost all the time. If I don't respond, it means I'm sleeping or go out
Sticky this if it helps.

12-17-2008, 02:50 PM
this deserves a sticky, sticky please?

This is very impressive dude. Justsolo made one for as2, but this one leaves a more less smooth trail. I like the way it looks, good job, yo.

12-22-2008, 03:45 AM
more less
What ?

03-18-2009, 09:16 AM
I really hate to do a major bump like this, but there's an error found inside the script.

//Set timer so trail will be draw at every frame
var timer:Timer = new Timer(10,400000);
timer.addEventListener (TimerEvent.TIMER, createTrail);
timer.start ();

now, I'm not completely sure what's going on, but I can give a good example.
In the site whirled(Link (http://www.whirled.com)) when this script is used for an avatar, the fail rate of the timer to stop drawing is 90%
Generally, it will only happen when another person enters a room.

I am looking for a way to get the script to re-create itself if it is terminated or fails.

05-12-2009, 07:25 AM
This is close to what I am trying to do. Here is an explanation.

I have a satellite moving along a path over a map of the world. The orbit chages so there will multiple paths. I want the satellite to leave a single line trace which eventually fades away once the satellite gets to a certain point or tween to a different color at tha point. I have searched and found things similar to this, and from this search I am concerned with processor usage. Does this sound like something anyone would like to help with?

Thanks in advance,


05-21-2009, 07:04 AM
in step 4, what do you mean by "place instance" ? how do i place an instance?

and after that how do i create my trail? i didnt get it

05-23-2009, 07:59 AM
there are quite a lot of newbies inthis thread...

05-23-2009, 10:12 AM
there are quite a lot of newbies inthis thread...

got anything helpfull to say pro?

09-03-2009, 03:00 PM
is there a way to make it for flash cs3

09-03-2009, 11:17 PM
Yeah thats NOT understand able (sorry I've I was mean)

10-05-2009, 05:08 AM
Nice i like your drawing style :D !

01-09-2010, 12:41 AM
Thx alot!

But, Well, i cant script at all... so please, can someone help me?:
im havin' 2 figures in the stage (both have swords). how should i do that? (i mean like with that code)

btw to be able to have everything in a movieclip also sounds nice
...hope you have time^^

01-21-2010, 07:31 PM
dude nice it worked for me in as3 uhh o yeah is there a way 2 make 2 trails??? lyk on 2 swordzzz?plz tell meh