Stick Page Forums Archive

Blade trail effect tut using AS3 [Flash][Effects][Actionscript]

Started by: c0olzero | Replies: 12 | Views: 8,444

c0olzero
2

Posts: 64
Joined: Dec 2008
Rep: 10

View Profile
Dec 17, 2008 8:59 AM #316055
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

PrevTopX=topmarker.x;
PrevTopY=topmarker.y;
PrevBottomX=bottommarker.x;
PrevBottomY=bottommarker.y;
}

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));
}
}


EXPLANATION:
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.
RawGreen
2

Posts: 2,543
Joined: Jun 2008
Rep: 10

View Profile
Dec 17, 2008 9:50 PM #316365
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.
Raffi
2

Posts: 4,326
Joined: Aug 2006
Rep: 10

View Profile
Dec 22, 2008 10:45 AM #319889
Quote from rawgreen
more less

What ?
RawGreen
2

Posts: 2,543
Joined: Jun 2008
Rep: 10

View Profile
Mar 18, 2009 3:16 PM #376383
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) 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.
m2244

Posts: 0
Joined: Jul 2025
May 12, 2009 1:25 PM #417379
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,

MH
ShootNow
2

Posts: 2
Joined: May 2009
Rep: 10

View Profile
May 21, 2009 1:04 PM #421982
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
TurboT

Posts: 473
Joined: Oct 2008
Rep: 10

View Profile
May 23, 2009 1:59 PM #423070
there are quite a lot of newbies inthis thread...
ShootNow
2

Posts: 2
Joined: May 2009
Rep: 10

View Profile
May 23, 2009 4:12 PM #423167
Quote from TurboT
there are quite a lot of newbies inthis thread...


got anything helpfull to say pro?
hazetray

Posts: 2
Joined: Mar 2009
Rep: 10

View Profile
Sep 3, 2009 9:00 PM #483315
is there a way to make it for flash cs3
Brainstick
2

Posts: 320
Joined: Sep 2009
Rep: 10

View Profile
Sep 4, 2009 5:17 AM #483586
Yeah thats NOT understand able (sorry I've I was mean)
LazyJoe
2

Posts: 20
Joined: Oct 2009
Rep: 10

View Profile
Oct 5, 2009 11:08 AM #496284
Nice i like your drawing style :D !
Shuffle

Posts: 2
Joined: Jan 2010
Rep: 10

View Profile
Jan 9, 2010 7:41 AM #534632
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^^
gokuta

Posts: 1
Joined: Nov 2009
Rep: 10

View Profile
Jan 22, 2010 2:31 AM #539454
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
Website Version: 1.0.4
© 2025 Max Games. All rights reserved.