animating sparks in Animate

_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.