Skip navigation
jtomai2012
Currently Being Moderated

how did blizzard.com create the fire effect on the background flash layer with the dragon?

Dec 28, 2012 12:45 AM

Blizzard.com has a gorgeous flash fire effect on the background layer of their website.  Does anybody know of a tutorial that can help one achieve a similar effect?   Thanks.

 
Replies
  • Currently Being Moderated
    Dec 28, 2012 8:21 AM   in reply to jtomai2012

    Looks to me like they used two layers, the main one with the character, then the effects on a layer on top of that that was most likely a series of hand painted .png's which would show the smoke but allow for transparency to show the image underneath.  The effects are animated one image at a time changing the position of the leaves and shape of the smoke, and then played in sequence to give the illusion its a moving object as opposed to several stitched images.  Does that make sense?

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 28, 2012 11:26 AM   in reply to jtomai2012

    Are you referring to the fire behind Diablo? If so that's simply a video loop. The easiest way to spot a loop is to look for "the same thing" to happen over and over. Just fixate your eyes in a single position and wait for the same flame to happen over and over.

     

    Otherwise I don't see any other flame effects on their current website but I didn't look too deep.

     

    To create that it could have been any of several techniques. Stock video footage of a fire in a loop on a layer behind the dragon (and one in front on the left). If it wasn't a video (which it is) they could have a few sliding/fading layers of fire images with transparency moving in random fashion to fake the illusion of random flames. Or if they really wanted to show off, they could have done some particle effect in Stage3D.

     

    Stock video loops are the cheapest/easiest and I'm sure they already had plenty. Many 3d apps have their own elemental particle system that generate fire, water, etc. Blizzard has their own.

     

    Just practice using layers to put certain things in front and behind others as you need. No real tutorial needed besides the basics of using Flash.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points