animating sparks in Animate

[@russellsdesk]

Hello.

Looking for advice/tutorial on how to create sparks (from an angle grinder) in Adobe Animate.

Any help would be much appreciated.

Thank you.

[rayek.elfin]

Ideally a particle generator effect would be used for this. But Animate does not include a particle generator.

After Effects could be used to render out the animated particles as frames with transparency. Or use the free Particle Illusion Standalone and the free particle libraries to create the effect, render out frames, and import into Animate.

https://borisfx.com/products/particle-illusion/

[@russellsdesk]

Thank you for replying

[_keyframer · Accepted solution]

This was a fun request! 
Very hard to explain via text so I made a video showing you how I would approach it. The thing about sparks coming off a grinder like this is that it's easy to over think it. Randomness is key and I literally took the brush tool and drew brush strokes for each keyframe. 
It may help you to search YouTube for "grinder sparks" and simply watch how the sparks act. Then emulate it. In this video I animated about 6 keyframes and then I copied/pasted them into a Graphic symbol. Then created a new layer on the main timeline and dragged an instance of this symbol to the stage so they can loop. As a nested symbol I also was able to rotate, scale and position the animation how I liked.

You may want more or less keyframes in your animation. It's all personal preference.

Last touch was to add a layer glow filter to give it a bit more realism. 

Here's the YouTube video...
https://www.youtube.com/watch?v=z3Ev5f1wboQ

LINK TO SOURCE FILE 

[@russellsdesk]

Thanks so much for this.

This is great. Really appreciate you spending time on it.

You're right, I was overthinking it...

[Colin Holgate · Accepted solution]

_keyframer gave you an animator's answer, and really, if you animate like it needs to be, it could not be better!

Sometimes though, you may not have the time, or you are programming something that needs to have sparks. I can show you the idea of how it would be solved as a programming question. My bet is that you want the animator's answer, so I'm mainly posting this for future visitors to the page, in case they are solving the problem with programming.

When you control particles with code you want to think about one particle, and how would its life go. Then think about what variations of life it might have. Program one particle to be able to live all of its possible lives. Here is some JavaScript code that covers a wide range of lives for a particle:

var init;
var myx, myy;
var startx, starty, dx, dy, count
var sparkle = this;
var delay;
if (!init) {
	createjs.Ticker.on("tick", updateme);
	startx = sparkle.x + Math.random() * 40 - 20;
	starty = sparkle.y + Math.random() * 40 - 20;
	dx = Math.random() * 10 - 5;
	dy = Math.random() * -20;
	count = 0;
	delay = Math.random() * 40;
	init = true;
}
function updateme() {
	if (count > delay) {
		sparkle.x = startx + (dx * count)
		sparkle.y = starty + (dy * count)
		dy = dy + .1;
	}
	count++;
	if (sparkle.y > starty + 500) {
		sparkle.x = startx;
		sparkle.y = starty;
		dx = Math.random() * 10 - 5;
		dy = Math.random() * -20;
		delay = 0;
		count = 0;
	}
}

That's written as timeline code inside one particle. It starts off remembering where it began, some time later it jumps up, gravity effects it, and it falls below the view. When it does, it can be reborn, and start again. Here is how that might look.

Here is how a lot of them with the same code looks.

To some extent you can add your own particle system to Animate.

[@russellsdesk]

Thank you for replying.

[_keyframer]

Absolutely love this! One of the greatest strengths of Animate has always been how 2 different minds can use the same application and approach the same challenge using 2 very different journeys.