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 (61)
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:
What could you do me the courtesy to give me a complilada version of FireFX for FlashCS3 ?
Tank you !
Sidney
Posted by: Sidney Vitorio - Brazil at September 24, 2008 07:32 PMURL: http://www.midiacriativa.com
I want it too please!!
Posted by: Ivette at October 16, 2008 04:17 PMURL:
thanks a lot dude. very very very good and impressive work. keep the source open : )
Posted by: Subspect at October 27, 2008 04:02 PMURL:
one of my first questions regarding progaming
was:
CAN ONE DO FIRE EFFECT WITH ONLY PROGRAMMING ?
WITHOUT ANY PICTURES..
and here is the greate answer..
u throw me back some 10 years back mate.. thanks :)
ofer from israel ..
long live obama!
Posted by: ofer at November 6, 2008 03:18 PMURL:
I'd love a compiled version!
Posted by: Bas Hemmes at November 19, 2008 11:13 AMURL:
hi love the effect could you please send me a comiled component version of this.... i really need it for my uni project
Posted by: luke at November 27, 2008 03:59 AMURL:
Greate work! i might use it in a game! This is very cool.
Posted by: P48L0 at January 19, 2009 04:30 AMURL: http://pablobandin.wordpress.com
Thanks for the information. I am working on a webpage for a fire department and have been looking for a fire effect. Thanks again. Do you have a compiled version? I know the original post was a couple of years ago back, but please let me know if there is a compiled version.
Thanks,
Scott
Posted by: Scott Danton at February 19, 2009 07:02 AMURL:
very cool!!!!
Posted by: soso at April 14, 2009 06:55 AMThank you :)
URL:
this program is fire
Posted by: shaykwan at May 15, 2009 06:14 AMURL:
te kelo mucho d:
Posted by: alberjito (: at May 21, 2009 02:10 PMURL:
Thanks so much for sharing!
Posted by: DD at June 17, 2009 07:18 PMURL:
Great work! Could I get the compiled clip too, please?
Posted by: kamiblue at June 30, 2009 11:33 AMURL: http://www.kamiblue.com
Hi
I am a newbie when it comes to programming and would really appreciate some help with how to apply this effect to an object or symbol.
Or even a link to a tutorial would be great.
Cheers Levi
Posted by: Levi at July 29, 2009 09:10 PMURL:
realy awesome!! i thank for your magic!... xD
but i´m from spain and i have a little problem. this class (fireFX) doesn´t accept certain special characters like á or ä, and i don´t know what can i do... can you help me??
thanks.
Posted by: Aydim Dagam at August 25, 2009 07:33 AMand sorry for my english... xD
URL: http://www.gandalfumeta.com
Great job! I was wondering if you still offer the compiled component version. If so, can I get one?
Posted by: AngelicaBB at August 25, 2009 11:35 PMThanks... I loved it!
URL:
Great job! I was wondering if you still offer the compiled component version. If so, can I get one?
Posted by: AngelicaBB at August 25, 2009 11:40 PMThanks... I loved it!
URL:
I am VERY Confused on how to use this.. i cant make the component have tried.. dotn knwo what to do exactly.. i have cs4 and flex 3... ii jsut want to apply the [baroque] effect to a movie clip HELP
Posted by: geister at September 6, 2009 05:27 AMURL: http://www.locopimp.com
impressive! thx!
Posted by: tomi at October 6, 2009 01:26 PMURL:
I would also love to have a compiled version. You're doing great work.. love that MLB project!. Anyways.. Thanks again and good luck!
Posted by: Hod at October 28, 2009 10:04 AMURL: http://hodtek.com
Im trying to use the fire effect for a flash tower ad. I am having no success at all at placing this effect on to the tower ad. Can you help me?
Posted by: Craig at November 16, 2009 11:59 AMURL: