 Fire Effect Component & Source CodePosted on November 15, 2007 by Grant SkinnerI 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.
Follow @gskinner on Twitter for more news and views on interactive media.
|
|
|
69 Comments
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 on Nov 15, 2007 2:40pm
Excellent! It's amazing Grant! Thanks for sharing!
Posted by: Rafeo on Nov 15, 2007 5:42pm URL: http://diario.de/rafeo
Awesome!So many thanks Grant for sharing.
P.D. I would like a compiled version too :D.
Posted by: Rafe on Nov 15, 2007 5:49pm URL: http://diario.de/rafeo
Awesome!So many thanks Grant for sharing.
P.D. I would like a compiled version too :D.
Posted by: Rafeo on Nov 15, 2007 5:51pm URL: 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 on Nov 16, 2007 12:18am URL: 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 on Nov 16, 2007 10:13am URL: http://gskinner.com/blog/
I like the waterfalls effect.
Makes me think of this tune and lyrics: "Don't go chasing waterfalls..." ;)
Thanks for posting!
Posted by: Keith on Nov 16, 2007 2:47pm URL: http://keith-hair.com
A compiled version would be excellent. Great work by the way.
Posted by: Mike on Nov 16, 2007 7:23pm URL: 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 on Nov 17, 2007 2:41am URL: 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 on Nov 17, 2007 10:09am URL: http://www.magicpictures.ca
never mind, my apologies, didn't realize all the effects are combined in one
Posted by: Evan on Nov 17, 2007 10:22am
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 on Nov 18, 2007 9:21pm
wow!
Amazing!
thanks for sharing the code and the component!
Posted by: Oren on Nov 20, 2007 11:53am URL: http://www.orizens.com
Amazing stuff as usual
Posted by: Platfuse on Nov 20, 2007 12:15pm URL: http://www.platfuse.com
awesome code,
sharing is the best for everyone!!!
Posted by: alec on Nov 21, 2007 7:31am URL: http://www.miguelzapata.net
RockOnFlash \m/ :: John Grden » One up on Keith and the new AIR Logo ;)
John Grden wrote: "I created a vector version of the logo in Flash IDE, exported as illustrator 6 file and imported into 3D Studio Max. Then extruded and applied a red shaded texture to it. Bingo, 3D AIR logo. So...
Posted by: Actionscript Hero on Nov 22, 2007 4:51am URL: http://www.actionscripthero.org/blog/2007/11/…
We are going to see a lot of fires around. :)
THANKS
Posted by: C4RL05 on Nov 22, 2007 1:34pm URL: http://carlosulloa.com
This is really amazing. Looking for water fountain or water fall effects. :)
Posted by: Min Thu on Nov 23, 2007 10:52pm URL: http://www.flashmo.com
Wow, now thats sumthin
Posted by: Platfuse on Nov 24, 2007 10:22am URL: http://https://www.platfuse.com
cant wait for the pure as3 version for flex!
this is really tight! thanx for sharing!
Posted by: xero / fontvir.us on Nov 26, 2007 12:22pm URL: http://the.fontvir.us/b10g/
It's a nice effect :)
Thanks for sharing the source code.
Posted by: Matthieu on Nov 28, 2007 1:03pm URL: http://www.delfiweb.com/
WOW!
I'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!
Posted by: JoanMMK on Nov 30, 2007 7:48am
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 on Dec 3, 2007 9:33am
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 on Dec 3, 2007 11:31am URL: 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 on Dec 22, 2007 8:23am URL: http://www.helihobby.com
WOW, i am pretty amazed from the fire fx, thanks alot for sharing!
I 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/
Posted by: Kim on Dec 30, 2007 8:12am URL: http://blog.bigsource.de
I am pretty amazed of the fire fx component, thanks for sharing!
I made a flex version. The class is available in our blog.
Posted by: Kim on Dec 30, 2007 8:15am 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 on Dec 30, 2007 8:37am URL: http://blog.bigsource.de
I just made this into Sandy tutorial (clicky linky).
Posted by: makc on Jan 6, 2008 5:24am URL: http://www.flashsandy.org/tutorials/3.0/sandy…
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 on Feb 17, 2008 11:02am URL: http://www.oroede.org
Need help with the Flames
Posted by: Tony on Feb 17, 2008 8:08pm
is awesome!! but i use flash8, can you make a version in flash 8?,... thnks,...
Alejandro
Posted by: alejandro on Mar 3, 2008 7:07am
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 on Mar 6, 2008 8:01am
PLease send me complied version. Great work! i appriciate it.
Posted by: arvind on Mar 27, 2008 5:28am
This is excellent I would love a complied version.
Thanks for sharing your work- its inspirational!
Posted by: Alexis Kestler on Mar 30, 2008 8:20pm URL: http://www.alexiskestler.com
can i have the compiled version??
by the way this is a very good work
Posted by: Ivan on Apr 3, 2008 5:15am
love this, I would love to use it, but when Idrag the fireSymbol into my new movie(fla) it doesn't work at all,..
I did name the target, and tried several different ways to get in (cntrl-V, drag, etc).
Please, whats wrong?..
anyone else experience this.?
Posted by: shane colella on Apr 16, 2008 6:15am
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 on Jun 1, 2008 11:30am URL: http://solutionset.com
Is there an AS2.0 version available?
Posted by: Danny on Jun 24, 2008 10:45am
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 on Jun 28, 2008 5:37am
sorry, my fault, i wasnt ordering correctly in the timeline =)
Posted by: matemago on Jun 29, 2008 5:17am
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 on Sep 24, 2008 7:32pm URL: http://www.midiacriativa.com
I want it too please!!
Posted by: Ivette on Oct 16, 2008 4:17pm
thanks a lot dude. very very very good and impressive work. keep the source open : )
Posted by: Subspect on Oct 27, 2008 4:02pm
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 on Nov 6, 2008 3:18pm
I'd love a compiled version!
Posted by: Bas Hemmes on Nov 19, 2008 11:13am
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 on Nov 27, 2008 3:59am
Greate work! i might use it in a game! This is very cool.
Posted by: P48L0 on Jan 19, 2009 4:30am URL: 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 on Feb 19, 2009 7:02am
very cool!!!!
Thank you :)
Posted by: soso on Apr 14, 2009 6:55am
this program is fire
Posted by: shaykwan on May 15, 2009 6:14am
te kelo mucho d:
Posted by: alberjito (: on May 21, 2009 2:10pm
Thanks so much for sharing!
Posted by: DD on Jun 17, 2009 7:18pm
Great work! Could I get the compiled clip too, please?
Posted by: kamiblue on Jun 30, 2009 11:33am URL: 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 on Jul 29, 2009 9:10pm
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.
and sorry for my english... xD
Posted by: Aydim Dagam on Aug 25, 2009 7:33am URL: http://www.gandalfumeta.com
Great job! I was wondering if you still offer the compiled component version. If so, can I get one?
Thanks... I loved it!
Posted by: AngelicaBB on Aug 25, 2009 11:35pm
Great job! I was wondering if you still offer the compiled component version. If so, can I get one?
Thanks... I loved it!
Posted by: AngelicaBB on Aug 25, 2009 11:40pm
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 on Sep 6, 2009 5:27am URL: http://www.locopimp.com
impressive! thx!
Posted by: tomi on Oct 6, 2009 1:26pm
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 on Oct 28, 2009 10:04am URL: 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 on Nov 16, 2009 11:59am
It's wonderful effects!!! Thankyou for sharing. Can I add Green flame?? Or Can you add a slidebar to adjust color? It's how great if true :)
Posted by: Invin on Apr 19, 2010 12:31pm URL: http://gnews.vn
Hi not sure how often you check this,but I'd love a compiled version too! Is this posted anywhere? can you email it to me?
Posted by: Bryan Tamayo on Jun 3, 2010 11:57am
Hi Grant, Just want to express a sincere THANKS for all of your hard work and contributions to the Flash community, and I am personally super grateful for all that you've done, and the fact that you make so much freely available to the rest of us aspiring Actionscript masters! Thanks again!!
Posted by: John Currie on Aug 25, 2010 10:44pm
thankssssssssssssssssssssssssss
Posted by: saba on Feb 23, 2011 12:25am
EL MEJOR. MAESTRO DE MAESTROS!
Posted by: Pablo Ossa Ríos on Mar 2, 2011 9:11am
Thanks so much for sharing this with us all; it's a great tool.
I used it in a couple of screens for this flash game/Christmas card:
http://www.inspiregroup.co.nz/manual/christmas11/index.html
Many thanks again.
Posted by: Jack Delgado on Dec 13, 2011 5:55pm URL: http://www.jackdelgado.com
I love this stuff! I can however only make it work through dragging the box over the object i want to apply it to, on stage in the .fla... If I try to make it work in pure AS3 (so no objects on the stage in the .fla), I don't know how to...
Could anyone *Please* give me a hint?
I tried numerous ways, such as:
var someMC:FireFX = new FireFX;
// included all the params as provided in the example .fla in the main class function
//included the array too, of course
And variations to this.
Adding this
FireFX[evt.target.name] = evt.target.value;(which is also provided in the .fla) makes Flash give an error, saying it doesn't understand what 'evt' is..
So basically my question is: Could anyone show me how to apply the effect to an object (movieclip) in pure AS3 (I don't mind putting things in the library btw)? Thanks!
Posted by: Paddotk on Sep 5, 2012 11:49am