Recently I was asked to create to animate water splashing from out from the wheel of a moving car, as if it was driving through a puddle. I studied animation at university, so I can say with some small amount of authority that animating water is generally considered one of the more difficult things an animator can do.

Probably the easiest way to solve the problem is to use video of water with a transparent background that has been modelled in a 3D application.

I used a video from iStock similar to this one:

http://www.istockphoto.com/stock-video-8526304-water-splashes-in-slow-motion-preview-darker-than-original.php

it didn’t have the perfect splash I needed, but there were enough different types of splashes and angles to be able to piece something together with multiple layers and some After Effects trickery.

The biggest problem I encountered was that iStock footage uses Quick Time with Photo JPEG compression which doesn’t have an alpha channel. You can however still create an alpha channel using a “luma track matte”, as this tutorial shows. A luma track matte is basically where After Effects creates an alpha channel based on luminosity while keeping the integrity of the original footage.

Check out the video tutorial here:

http://vimeo.com/7385956

Hey kids,

If you haven't checked out issue 2 of Lee Brimelow's Flasher Magazine yet I recomend you do.It's lots of fun and I really like the whole punk ethos he's going for with all the references to Thrasher Magazine, and interviewing people who swear a lot and hate on Adobe and Flash.

I think it's funny how he's trying create a cult of celebrity within the Flash community. Maybe he'll want to interview me one day...

Hey kids,

I’ve been working on a banner that involves repulsion physics, after a bit of research, trial and error this is what I came up with. I know it's been done a million times but I thought I'd do it one more ‘cause it’s kind of fun and might be useful to someone in the future. It involves high school physics (remember that thing?).

Anyway, this is the juicy part of the code to be constantly triggered for animation:

//distance between mouse and object on the axis’ 

xDif = this.parent.mouseX - this.x; 

 yDif = this.parent.mouseY - this.y;

//the length of the hypotenuse using Pythagoras

   distance = Math.sqrt(xDif*xDif+yDif*yDif);

//the “magic” number to give us the perfect repulsion

   tempX = this.x-(force/distance)*(xDif/distance);

   tempY = this.y-(force/distance)*(yDif/distance);

//the new coordinates, based on half the distance between current pos and our initial pos  + the magic number

    this.x=(homex-this.x)/2+tempX;

    this.y=(homey-this.y)/2+tempY;

So you also need to instantiate three vars on initalisation:

//these act as an anchor point for the object to return to

private var homex:Number;

private var homey:Number;

//force is the level of repulsion, add or subtract a zero from the end

Private var force:int = 2000;

REPULSION, coming to a banner near you!