I finally got the time to finish off my fire effect Flash CS3 component, which makes it easy to add flames and other cool effects to objects on stage. I am also releasing the AS3 source code that powers it, which is one of the most requested piece of source code I've had.
Here's a simple sample SWF that lets you play with most of the settings.
And here is a picture of some of my favourite effects that can be created with this code: Fire, plasma, sparks, water fall, baroque, and 70s.
I'll probably write up a short article next week outlining how the ActionScript works, so people can modify it, and work with it more easily in Flex.
You can download the component and source code here. There are some instructions in the FLA on how to use it. Note that this is not a compiled component, so it won't show up in the components panel. You will have to copy the component, and the source file into your project. If anyone really wants a compiled version, let me know and I can provide one.
As always, I'd love to hear how people use it, and would appreciate it if you would post back to the comments if you make any significant modifications so that other people can benefit from them.
Comments (40)
I've been wanting to have this capability ever since I saw it done in Flash 8. Thanks for making it available! Any chance there would ever be a .MXP installer?
Posted by: Lee at November 15, 2007 02:40 PMURL:
Excellent! It's amazing Grant! Thanks for sharing!
Posted by: Rafeo at November 15, 2007 05:42 PMURL: http://diario.de/rafeo
Awesome!So many thanks Grant for sharing.
P.D. I would like a compiled version too :D.
Posted by: Rafe at November 15, 2007 05:49 PMURL: http://diario.de/rafeo
Awesome!So many thanks Grant for sharing.
P.D. I would like a compiled version too :D.
Posted by: Rafeo at November 15, 2007 05:51 PMURL: http://diario.de/rafeo
hehe. Very retro Grant. While I don't imagine putting a flaming logo anywhere near my web site, I do appreciate you sharing the source code for the effect. Who knows, it could come in useful somewhere. Thanks, Nathan.
Posted by: Nathan Youngman at November 16, 2007 12:18 AMURL: http://www.nathany.com/developer
Flaming logos are so 1998. Now, spinning, flaming logos (via PaperVision 3D)... now that's hot!!
Posted by: Grant Skinner at November 16, 2007 10:13 AMURL: http://gskinner.com/blog/
I like the waterfalls effect.
Posted by: Keith at November 16, 2007 02:47 PMMakes me think of this tune and lyrics: "Don't go chasing waterfalls..." ;)
Thanks for posting!
URL: http://keith-hair.com
A compiled version would be excellent. Great work by the way.
Posted by: Mike at November 16, 2007 07:23 PMURL: http://www.swiftdev.com
I saw your fireFX first with one of Adobe's logos, it is an audio-visual experimental.
Thanks for sharing the code now. I will comment back and link it when use your effect in one of my project...
May the force be with you :)
Posted by: Özgür ALTAY at November 17, 2007 02:41 AMURL: http://labs.ozguraltay.com
Hi Grant,
i'm a Canadian fan follower of yours... your fx rock...how may I come across the source for the waterfall and plasma effects ... is that being shared as well?
thanks,
Evan evan_mail@sympatico.ca
Posted by: Evan at November 17, 2007 10:09 AMURL: http://www.magicpictures.ca
never mind, my apologies, didn't realize all the effects are combined in one
Posted by: Evan at November 17, 2007 10:22 AMURL:
Brilliant stuff Grant.
When I first clicked on your latest I was like "Another fucking fire effect! what...ever..."
Then I played with the demo for a few minutes and I was like "Shit! I take it all back, this is the fire effect fleshed out to a proper level!"
Very professional and it reflects exactly how much depth you bring to our community.
Thanks.
Posted by: noah aronsson-brown at November 18, 2007 09:21 PMURL:
wow!
Posted by: Oren at November 20, 2007 11:53 AMAmazing!
thanks for sharing the code and the component!
URL: http://www.orizens.com
Amazing stuff as usual
Posted by: Platfuse at November 20, 2007 12:15 PMURL: http://www.platfuse.com
awesome code,
Posted by: alec at November 21, 2007 07:31 AMsharing is the best for everyone!!!
URL: http://www.miguelzapata.net
We are going to see a lot of fires around. :)
THANKS
Posted by: C4RL05 at November 22, 2007 01:34 PMURL: http://carlosulloa.com
This is really amazing. Looking for water fountain or water fall effects. :)
Posted by: Min Thu at November 23, 2007 10:52 PMURL: http://www.flashmo.com
Wow, now thats sumthin
Posted by: Platfuse at November 24, 2007 10:22 AMURL: http://https://www.platfuse.com
cant wait for the pure as3 version for flex!
Posted by: xero / fontvir.us at November 26, 2007 12:22 PMthis is really tight! thanx for sharing!
URL: http://the.fontvir.us/b10g/
It's a nice effect :)
Posted by: Matthieu at November 28, 2007 01:03 PMThanks for sharing the source code.
URL: http://www.delfiweb.com/
WOW!
Posted by: JoanMMK at November 30, 2007 07:48 AMI'm just starting to play with the component. But, at first, I change the text for an Alpha PNG image. And It works just I expect it.
Thanks Grant! Great work!
URL:
Fantastic work, could you explain the code:
public function set distortion(value:Number):void {
filtersValid&&= value == _fadeRate;
_distortion=value;
}
its not a syntax i recognise or can work out!
Posted by: mh at December 3, 2007 09:33 AMURL:
filtersValid &&= (value == _fadeRate);
This is simply shorthand for:
filtersValid = filtersValid && (value == _fadeRate);
Basically it invalidates the filters if the value is different than the existing value. If filtersValid is false, it remains false, if it's true, it will become false if the new value does not equal the old value.
Make sense?
Posted by: Grant Skinner at December 3, 2007 11:31 AMURL: http://gskinner.com/blog/
Hello,
Tried to get it to work in Flex with no luck :(
Any news on the Flex version of this ?
Thank you for all the help,
Sean - HeliHobby.com
Posted by: Sean at December 22, 2007 08:23 AMURL: http://www.helihobby.com
WOW, i am pretty amazed from the fire fx, thanks alot for sharing!
Posted by: Kim at December 30, 2007 08:12 AMI made a flex version of the component.
Here is the url:
http://blog.bigsource.de/index.php/2007/12/30/fire-effect-update-for-flex-sdk/
URL: http://blog.bigsource.de
I am pretty amazed of the fire fx component, thanks for sharing!
Posted by: Kim at December 30, 2007 08:15 AMI made a flex version. The class is available in our blog.
URL: http://blog.bigsource.de
Awesome fire fx component, thanks for sharing! I made a flex version of the component. The class is available at our blog.
Posted by: Kim at December 30, 2007 08:37 AMURL: http://blog.bigsource.de
I just made this into Sandy tutorial (clicky linky).
Posted by: makc at January 6, 2008 05:24 AMURL: http://www.flashsandy.org/tutorials/3.0/sandy_cs3_tut17a
Really useful, comparable to the Flex fire component in Flexlib at code.google.com. It should be easy to convert this component to create other textures such as natural looking woods or clouds in applications
Posted by: Olumide Otuyelu at February 17, 2008 11:02 AMURL: http://www.oroede.org
Need help with the Flames
Posted by: Tony at February 17, 2008 08:08 PMURL:
is awesome!! but i use flash8, can you make a version in flash 8?,... thnks,...
Posted by: alejandro at March 3, 2008 07:07 AMAlejandro
URL:
I am very new at this but love the FLA. Can someone explaine to me how i can make this work? I am a student and would love someone to mentor me.
Posted by: Bill at March 6, 2008 08:01 AMURL:
PLease send me complied version. Great work! i appriciate it.
Posted by: arvind at March 27, 2008 05:28 AMURL:
This is excellent I would love a complied version.
Posted by: Alexis Kestler at March 30, 2008 08:20 PMThanks for sharing your work- its inspirational!
URL: http://www.alexiskestler.com
can i have the compiled version??
Posted by: Ivan at April 3, 2008 05:15 AMby the way this is a very good work
URL:
love this, I would love to use it, but when Idrag the fireSymbol into my new movie(fla) it doesn't work at all,..
Posted by: shane colella at April 16, 2008 06:15 AMI did name the target, and tried several different ways to get in (cntrl-V, drag, etc).
Please, whats wrong?..
anyone else experience this.?
URL:
Hi Grant. Thanks for the base code for this distortion. I have used it in a new micro site for Scion. I used it on the intro flames (HOT logo), on the manhole cover steam/smoke and on the preloader for images in the viewer. The only thing I had to alter was the way it is created and destroyed so I could easily turn it off and on. Thanks again and I hope this shows how it can be used to complement an environment/feel.
http://www.scion.com/rsxd/
Posted by: Ken Rogers at June 1, 2008 11:30 AMURL: http://solutionset.com
Is there an AS2.0 version available?
Posted by: Danny at June 24, 2008 10:45 AMURL:
hi, thanks for this great code. but guess what? i cannot make it work if i put a background image behing it.
seems to be that the flames are generated behing the image, but how can i make them appear at front?
thanks again...
Posted by: matemago at June 28, 2008 05:37 AMURL:
sorry, my fault, i wasnt ordering correctly in the timeline =)
Posted by: matemago at June 29, 2008 05:17 AMURL: