Liquid Metal Effect

I used this metaball-like effect in a recent banner-ad campaign for Sony’s new range of Cyber-shot cameras. The effect was originally made back in 2005 when the Flash Player 8 beta was released, so I was pretty happy to be able to use it commercially nearly four years layer. Unfortunately, due to archaic banner-ad restrictions, I had to continue targetting FP8.

So I decided to upgrade the effect to AS3, optimise it, and add a bit of attraction/repulsion to simulate the blobs of liquid metal pooling together. I originally wanted a fairly realistic simulation, but ended up with the following results. The blobs seem to have a life of their own and remind me a bit of that awesome scene in Terminator 2. Click the image below to see the effect in action.

The effect is achieved mainly by combining two blend modes – Add and Overlay. First of all, a bunch of blurry white blobs are blitted onto a black bitmap (say that three times quickly) using the Add blend mode. This is how it looks:

Next up, a black rectangle is thrown over the whole lot using blend mode Overlay. This increases the contrast of the blobs, making them sharper (I actually do this part twice to get a nice sharp edge). Try it in Photoshop. No need for BitmapData.threshold – this is much faster. Here’s how it looks now:

Now it’s time to use this black & white image as the alpha channel of our final bitmap using copyChannel. A flat colour would be fine, but I used a metallic gradient image to make the surface of the blobs look reflective:

Finally, apply two bevel filters to get the highlights and shadows around the edge, duplicate the bitmap shifted down a bit to create the reflection, and add a drop shadow filter. I spent a lot of time tweaking the bevels to get them to match the campaign artwork as closely as possible. The artwork was using around five Photoshop filters to achieve the effect, so I was happy to be able to replicate it fairly closely with only two – for performance reasons obviously.

I was impressed at the performance increase I got by using blitting over standard sprites. It also meant that I avoided the Flash Player limitation of 24 overlapping transparent sprites. I was hitting this limit in the original AS2/FP8 version of the effect, but the AS3 version is limited only by performance, and can handle around 200 before things start slowing down too much. The example above contains 100 blobs. Each blob is actually made up of two, so there are only 50 visible at once.

Having just watched that T2 scene again, it’d be cool to try to recreate the same environment & lighting as in the movie. Maybe in a future blog post.

Update: Here is one of the Cyber-shot campaign banners.

3 Comments

Leave a Comment

Username (required) :
Email (required) :
Web Site :
Comment :