by Grant Skinner

Fire Effect Component & Source Code

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.

Grant Skinner

The "g" in gskinner. Also the "skinner".

@gskinner

If you enjoyed this, you might like these articles…

Squeeze Effect Source Code, Simple Component For Monitoring Memory and FrameRate, CS3 Component bug: Component Styles, Simple Flash Player 10 3D Demo w/ Source

69 Comments

  1. Lee November 15, 2007 at 2:40pm

    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?

  2. Rafeo November 15, 2007 at 5:42pm

    Excellent! It’s amazing Grant! Thanks for sharing!

  3. Rafe November 15, 2007 at 5:49pm

    Awesome!So many thanks Grant for sharing.

    P.D. I would like a compiled version too :D.

  4. Rafeo November 15, 2007 at 5:51pm

    Awesome!So many thanks Grant for sharing.

    P.D. I would like a compiled version too :D.

  5. Nathan Youngman November 16, 2007 at 12:18am

    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.

  6. Grant Skinner November 16, 2007 at 10:13am

    Flaming logos are so 1998. Now, spinning, flaming logos (via PaperVision 3D)… now that’s hot!!

  7. Keith November 16, 2007 at 2:47pm

    I like the waterfalls effect.

    Makes me think of this tune and lyrics: “Don’t go chasing waterfalls…” 😉

    Thanks for posting!

  8. Mike November 16, 2007 at 7:23pm

    A compiled version would be excellent. Great work by the way.

  9. Özgür ALTAY November 17, 2007 at 2:41am

    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 🙂

  10. Evan November 17, 2007 at 10:09am

    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

  11. Evan November 17, 2007 at 10:22am

    never mind, my apologies, didn’t realize all the effects are combined in one

  12. noah aronsson-brown November 18, 2007 at 9:21pm

    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.

  13. Oren November 20, 2007 at 11:53am

    wow!

    Amazing!

    thanks for sharing the code and the component!

  14. Platfuse November 20, 2007 at 12:15pm

    Amazing stuff as usual

  15. alec November 21, 2007 at 7:31am

    awesome code,

    sharing is the best for everyone!!!

  16. Actionscript Hero November 22, 2007 at 4:51am

    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…

  17. C4RL05 November 22, 2007 at 1:34pm

    We are going to see a lot of fires around. 🙂

    THANKS

  18. Min Thu November 23, 2007 at 10:52pm

    This is really amazing. Looking for water fountain or water fall effects. 🙂

  19. Platfuse November 24, 2007 at 10:22am

    Wow, now thats sumthin

  20. xero / fontvir.us November 26, 2007 at 12:22pm

    cant wait for the pure as3 version for flex!

    this is really tight! thanx for sharing!

  21. Matthieu November 28, 2007 at 1:03pm

    It’s a nice effect 🙂

    Thanks for sharing the source code.

  22. JoanMMK November 30, 2007 at 7:48am

    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!

  23. mh December 3, 2007 at 9:33am

    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!

  24. Grant Skinner December 3, 2007 at 11:31am

    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?

  25. Sean December 22, 2007 at 8:23am

    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

  26. Kim December 30, 2007 at 8:12am

    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/

  27. Kim December 30, 2007 at 8:15am

    I am pretty amazed of the fire fx component, thanks for sharing!

    I made a flex version. The class is available in our blog.

  28. Kim December 30, 2007 at 8:37am

    Awesome fire fx component, thanks for sharing! I made a flex version of the component. The class is available at our blog.

  29. makc January 6, 2008 at 5:24am

    I just made this into Sandy tutorial (clicky linky).

  30. Olumide Otuyelu February 17, 2008 at 11:02am

    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

  31. Tony February 17, 2008 at 8:08pm

    Need help with the Flames

  32. alejandro March 3, 2008 at 7:07am

    is awesome!! but i use flash8, can you make a version in flash 8?,… thnks,…

    Alejandro

  33. Bill March 6, 2008 at 8:01am

    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.

  34. arvind March 27, 2008 at 5:28am

    PLease send me complied version. Great work! i appriciate it.

  35. Alexis Kestler March 30, 2008 at 8:20pm

    This is excellent I would love a complied version.

    Thanks for sharing your work- its inspirational!

  36. Ivan April 3, 2008 at 5:15am

    can i have the compiled version??

    by the way this is a very good work

  37. shane colella April 16, 2008 at 6: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.?

  38. Ken Rogers June 1, 2008 at 11:30am

    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/

  39. Danny June 24, 2008 at 10:45am

    Is there an AS2.0 version available?

  40. matemago June 28, 2008 at 5:37am

    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…

  41. matemago June 29, 2008 at 5:17am

    sorry, my fault, i wasnt ordering correctly in the timeline =)

  42. Sidney Vitorio - Brazil September 24, 2008 at 7:32pm

    What could you do me the courtesy to give me a complilada version of FireFX for FlashCS3 ?

    Tank you !

    Sidney

  43. Ivette October 16, 2008 at 4:17pm

    I want it too please!!

  44. Subspect October 27, 2008 at 4:02pm

    thanks a lot dude. very very very good and impressive work. keep the source open : )

  45. ofer November 6, 2008 at 3:18pm

    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!

  46. Bas Hemmes November 19, 2008 at 11:13am

    I’d love a compiled version!

  47. luke November 27, 2008 at 3:59am

    hi love the effect could you please send me a comiled component version of this…. i really need it for my uni project

  48. P48L0 January 19, 2009 at 4:30am

    Greate work! i might use it in a game! This is very cool.

  49. Scott Danton February 19, 2009 at 7:02am

    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

  50. soso April 14, 2009 at 6:55am

    very cool!!!!

    Thank you 🙂

  51. shaykwan May 15, 2009 at 6:14am

    this program is fire

  52. alberjito (: May 21, 2009 at 2:10pm

    te kelo mucho d:

  53. DD June 17, 2009 at 7:18pm

    Thanks so much for sharing!

  54. kamiblue June 30, 2009 at 11:33am

    Great work! Could I get the compiled clip too, please?

  55. Levi July 29, 2009 at 9:10pm

    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

  56. Aydim Dagam August 25, 2009 at 7:33am

    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

  57. AngelicaBB August 25, 2009 at 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!

  58. AngelicaBB August 25, 2009 at 11:40pm

    Great job! I was wondering if you still offer the compiled component version. If so, can I get one?

    Thanks… I loved it!

  59. geister September 6, 2009 at 5:27am

    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

  60. tomi October 6, 2009 at 1:26pm

    impressive! thx!

  61. Hod October 28, 2009 at 10:04am

    I would also love to have a compiled version. You’re doing great work.. love that MLB project!. Anyways.. Thanks again and good luck!

  62. Craig November 16, 2009 at 11:59am

    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?

  63. Invin April 19, 2010 at 12:31pm

    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 🙂

  64. Bryan Tamayo June 3, 2010 at 11:57am

    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?

  65. John Currie August 25, 2010 at 10:44pm

    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!!

  66. saba February 23, 2011 at 12:25am

    thankssssssssssssssssssssssssss

  67. Pablo Ossa Ríos March 2, 2011 at 9:11am

    EL MEJOR. MAESTRO DE MAESTROS!

  68. Jack Delgado December 13, 2011 at 5:55pm

    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.

  69. Paddotk September 5, 2012 at 11:49am

    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!

Leave a Reply

Your email address will not be published. Required fields are marked *