animating sparks in Animate

Explorer ,
Apr 06, 2022 Apr 06, 2022

Copy link to clipboard

Copied

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.

TOPICS
How to

Views

128

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 2 Correct answers

Adobe Community Professional , Apr 06, 2022 Apr 06, 2022
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...

Likes

Translate

Translate
Adobe Community Professional , Apr 06, 2022 Apr 06, 2022
_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...

Likes

Translate

Translate
Guide ,
Apr 06, 2022 Apr 06, 2022

Copy link to clipboard

Copied

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/

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Apr 07, 2022 Apr 07, 2022

Copy link to clipboard

Copied

Thank you for replying

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Apr 06, 2022 Apr 06, 2022

Copy link to clipboard

Copied

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 

 


Animator and content creator for Animate CC

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Apr 07, 2022 Apr 07, 2022

Copy link to clipboard

Copied

Thanks so much for this.

 

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

 

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Apr 06, 2022 Apr 06, 2022

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Apr 07, 2022 Apr 07, 2022

Copy link to clipboard

Copied

Thank you for replying.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Apr 07, 2022 Apr 07, 2022

Copy link to clipboard

Copied

LATEST

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.


Animator and content creator for Animate CC

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines