A Flash Developer Resource Site

Results 1 to 14 of 14

Thread: Particle Trail

  1. #1
    Member
    Join Date
    Jun 2003
    Location
    London
    Posts
    38

    Particle Trail

    Hi,

    I'm making an animation where I need to have a sparkly trail following an object. At first I was animating it, but I realised it would probably look and run better using actionscripted sparkles...

    I've looked for various tutorials and found this one (attached) which looks pretty much the way I want my sparkles to look, but it trails the mouse.
    Is it possible to change this script to make the sparkles follow a movie clip intance instead of the mouse position and still keep the nice trail effects?

    Thanks in advance for any help you can offer!
    Attached Files Attached Files

  2. #2
    KoolMoves Moderator blanius's Avatar
    Join Date
    Jul 2001
    Location
    Atlanta GA
    Posts
    5,244
    Swap the _mouseX and _mouseY for movieClipName._x and movieClipName._y and it should work.

  3. #3
    Member
    Join Date
    Jun 2003
    Location
    London
    Posts
    38
    Thanks for the help...it doesn't quite have the desired effect...

    I guess the best way to describe what I need to do is, to be able to animate an movieclip object on the stage and have a "pixie dust" effect trailing behind it.

    Unfortunatley my brain can't cope with code! Man, I wish I knew how to do this stuff, it's doing my head in now!

    If any of you kind souls want to point me in the right direction, I'd appreciate it greatly! (Just remember you have to explain things to me in the manner that you'd use to explain actionscripting to your ageing grandmother!)

    http://www.domesticadesign.com/animtest/anim.html
    This is a little taster of my animation...see I can draw quite nice pictures, even if I can't code!

    Pleeeease help me, I don't want to have to draw each individual particle of bloody pixie dust hehe

    ...and relax

  4. #4
    KoolMoves Moderator blanius's Avatar
    Join Date
    Jul 2001
    Location
    Atlanta GA
    Posts
    5,244
    How about you put a pixie dust movie clip within your object movieclip.

  5. #5
    Member
    Join Date
    Jun 2003
    Location
    London
    Posts
    38
    Aye, I guess that's what I'll end up having to do, just thought actionscript could 'animate' particles better and more smoothly than I'll be able to!

  6. #6
    Uses MX 2004 Pro Quixx's Avatar
    Join Date
    Nov 2004
    Location
    U.S.
    Posts
    877
    Hi,
    The following code will attach a movie clip with the Linkage Identifier "spark" to the screen at the position the Movie Clip with the instance name "bug" is. The "spark" MC's will fall and pick up speed as they drop. Once they go beyond 400 pixels (y axis) they get removed from the Stage.

    Code:
    mSpark = function () {
    	this._x += this.xspeed;
    	this._y += this.yspeed += 0.2;
    	this._xscale = this._yscale += 1;
    	if (this._y>=400) {
    		removeMovieClip(this);
    	}
    };
    onEnterFrame = function () {
    	var level:Number = _root.getNextHighestDepth();
    	var s:MovieClip = _root.attachMovie("spark", "s"+level, level);
    	s._x = bug._x-(random(20)-10);
    	s._y = bug._y-(random(20)-10);
    	s._xscale = s._yscale=60;
    	s.xspeed = (random(10)-5)*0.25;
    	s.yspeed = 0;
    	s.onEnterFrame = mSpark;
    };
    Last edited by Quixx; 12-30-2005 at 11:07 PM.

  7. #7
    Member
    Join Date
    Jun 2003
    Location
    London
    Posts
    38
    Aww wow, thank you so much for your help and the easy to understand explanation Quixx!

    Unfortunately, I'm still using Flash MX and I wasn't able to open your attached file. I just tried using the code in the way you explained in mx and it doesn't seem to be working properly (although I've not been able to see what yours looked like of course
    It attaches a 'spark' to the movie clip 'bug' which seems to be doing some small random jiggling movements (that's a technical term!), but it's only attaching the one spark and there wasn't any falling, dropping or picking up speed...
    Is the code that you gave specific to mx2004?

    Anyways, if you're able to help further that would be very cool, but I don't wan't to be a complete pain in the bum and I really appreciate what you've already done, thanks!

  8. #8
    Uses MX 2004 Pro Quixx's Avatar
    Join Date
    Nov 2004
    Location
    U.S.
    Posts
    877
    Hi,

    Yes, the code I posted has syntax specific to Flash MX 2004 pro. I've changed the syntax below so it will work for Flash MX. Have a look...

    (Changes are colored in red)
    Code:
    mSpark = function () {
    	this._x += this.xspeed;
    	this._y += this.yspeed += 0.2;
    	this._xscale = this._yscale += 1;
    	if (this._y>=400) {
    		removeMovieClip(this);
    	}
    };
    var level = 0;
    onEnterFrame = function () {
    	level++;
    	var s = _root.attachMovie("spark", "s"+level, level);
    	s._x = bug._x-(random(20)-10);
    	s._y = bug._y-(random(20)-10);
    	s._xscale = s._yscale=60;
    	s.xspeed = (random(10)-5)*0.25;
    	s.yspeed = 0;
    	s.onEnterFrame = mSpark;
    };

  9. #9
    Uses MX 2004 Pro Quixx's Avatar
    Join Date
    Nov 2004
    Location
    U.S.
    Posts
    877
    Hello again,

    Sorry for the double post, but I figured this might need it. It occured to me that you would probably like to turn the sparks on and off again depending on what's happening during your movie (a slight oversight ). So I made the example a bit more flexible in terms of use. First I'll show you the code, then explain briefly (since I have heavily commented the code in the attachment)...

    Okay, so here's the code (no comments here for the sake of posting):
    Code:
    _global.mSpark = function() {
    	this._x += this.xspeed;
    	this._y += this.yspeed += 0.2;
    	this._xscale = this._yscale += 1;
    	if (this._y>=400) {
    		removeMovieClip(this);
    	}
    };
    var level = 0;
    _global.sFun = function(wc) {
    	level++;
    	var s = _root.attachMovie("spark", "s"+level, level);
    	s._x = wc._x-(random(20)-10);
    	s._y = wc._y-(random(20)-10);
    	s._xscale = s._yscale=60;
    	s.xspeed = (random(10)-5)*0.25;
    	s.yspeed = 0;
    	s.onEnterFrame = mSpark;
    };
    _global.startSpark = function(wc, hf) {
    	sInt = setInterval(function () {
    		sFun(wc);
    	}, hf);
    };
    _global.stopSpark = function() {
    	clearInterval(sInt);
    };
    startSpark(bug, 40);
    ...and here's how to use it:

    1. Copy and paste the code above onto the actions panel of the first frame of the Stage.
    2. On the frame you wish your sparks to start falling from the target MC, write: startSpark(targetMC, howFast), where "targetMC" is the MC name, and "howFast" is a number (my example above used an MC I called "bug" at a speed of 40, so it would look like: startSpark(bug, 40)).
    3. Now should you wish to stop the sparks, just place the following code: stopSpark(), on the frame you'd like to stop them.


    And that's it.

  10. #10
    Member
    Join Date
    Jun 2003
    Location
    London
    Posts
    38
    You are an absolute star, that's exactly what I needed, perfect! And your explanations are fantastic too!
    A massive big thank you to you

    I'd like to give you credit, if you have a web address message it to me and I'll be sure to link you up

    Yeeehar!

  11. #11
    Uses MX 2004 Pro Quixx's Avatar
    Join Date
    Nov 2004
    Location
    U.S.
    Posts
    877
    Quote Originally Posted by Sarah-Brown
    I'd like to give you credit, if you have a web address message it to me and I'll be sure to link you up
    I appreciate it, but no thanks are necessary. I benefit from working on the code as much as you benefit from using/learning from it, as I will often think of new ways to code myself. For example, this code marks the first time I have ever used _global. While I was always aware of the code, I never really thought of a time where I myself would need to use it. But now I do .

  12. #12
    Senior Member whispers's Avatar
    Join Date
    Mar 2001
    Location
    CFA2h (respect the HEX)
    Posts
    12,755
    Quixx- very nice..

    couple questions:

    1.) I noticed after few seconds..the "bug" disappears..and comes back witht he "ability" to follow the mouse..

    did I miss somethign from the code above?? LOL

    thanks

  13. #13
    Uses MX 2004 Pro Quixx's Avatar
    Join Date
    Nov 2004
    Location
    U.S.
    Posts
    877
    Quote Originally Posted by whispers
    did I miss somethign from the code above?? LOL
    thanks
    Hi Whispers,

    Yes. The code above only pertains to what is needed to add the spark trail. If you download the attachment and check out the actions panel for the very last frame, you'll find the following code that allows the bug to start following the mouse. I separated the code from the rest, because I felt putting it on the first frame may cause some confusion for anyone trying to understand the spark trail code.

    Code:
    bug.onEnterFrame = function() {
    	bug._x += (_xmouse-bug._x)/4;
    	bug._y += (_ymouse-bug._y)/4;
    };
    The disappearing/reappearing trick was just an animation. But it wouldn't be impossible to achieve using actionScript.

  14. #14
    Junior Member
    Join Date
    Dec 2009
    Posts
    1
    Hi

    I am really struggling with this and can't seem to find the attachment? Quixx, could you help?

    Thanks
    John

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center