Little known fact: One of our partners was named after Chuck Norris' younger and genetically less magnificent brother Aaron. True story.

Just cranked out some sweet rich media take over banners for Wyoming Tourism featuring Old Faithful. We worked with our homeboy Dave Yost over at Barnhart Advertising to get these banners bangin. Usually we just throw our work up on the site and move on. But this time we’re going to pull back the curtain a little so you can get a glimpse of what it takes to make a banner that doesn’t suck. I’ll let one of our developer savants we call Surly Thom take it from here. Enjoy.

To create the Old Faithful geyser, we started the process by creating a particle generator that creates about thirty water droplets per second. We then add a positive initial velocity to the particles and instantiate them from a point of origin. Simultaneously as the drops are brought on to the screen they are assigned a decay level that slowly reduces their velocity level causing them to slow as they reach their apex and pause slightly. At this point we allow the velocity to go into the negative, causing the particles to drop back to the ground where a splash animation would end the droplets life on the screen.

We wanted to make this banner interactive and for the user to be able to play with the geyser stream with their cursor. We added in some more code to make it so the water droplet engine could actually detect the “Old Faithful” text and also the current position of the users mouse. Now we had a geyser that could push the text up and interact with the mouse in a pretty realistic fashion.

Our next hurdle was that we had a very fake looking geyser, it was comprised of only small single pixel white dots going up and down and splashing around. We fixed this problem by using some of the graphics rendering tools that Actionscript 3 has to offer. First we added a little bit of code into the geyser to simulate wind blowing from left to right. This gave the geyser that signature Old Faithful look when the water dropped. Next we needed the geyser to look more like it was misty and smokey instead of looking like a 70’s arcade game. We did this by taking snapshots of the geyser thirty times per second. Each time the snapshot is taken it gets duplicated into two separate images. The top image gets a slight motion blur to make it look like the drops are actually small streams of water. The bottom image gets a much heavier blur applied to it and also reduced opacity and a unique blending filter is applied to make it appear as realistic mist.

The end result is one that we are very happy with. We tried to cover every detail, even if you block the geyser completely you can see the mist slowly dissipate the way it should.  We hope you like it too.