Andrew Trice

Wednesday April 15, 2009

Using Image Loops for Motion Graphics

I was recently chatting with Mike Wolf, our Principal Architect for .NET/Silverlight/WPF, and we stumbled upon an odd conclusion... With the power of the modern runtimes (Flash/Silverlight), motion graphics & tweens, and high definition video, you sometimes lose track of the basics. In particular, image sequences for motion graphics.

I know... there ends up being more "moving parts", it is not compressed, and ends up being a series of assets, instead of a single asset. However, in some cases, it can be a very effective solution for showing changes over time. After all, it is the origin of animation.

Here's an example showing this technique in action. It loads recent weather data from www.weather.gov to show an animated loop of weather activity over the US. Just click on the "play" button to show a loop of weather activity for the last 4 hours -- yes, this is near real time data, updated every 10 minutes.

You can check out the source images for the animation here: http://radar.weather.gov/Conus/RadarImg/

Now, let's examine how it works. The immediate thought is to use an mx:Image object and update the "source" property based on a timer. It sounds easy, and you would assume that it would do the trick, but unfortunately it's not quite that simple. If you were to take the Image approach, you end up with a flicker based on loading/unloading image content, and it would not be a great user experience.

Instead, I went with something a little more complex, yet providing a much more fluid experience. I created a class that manages an array of mx:Loader objects, and preloads each image in the sequence within its own Loader instance.

var request : URLRequest = requests.removeItemAt( 0 ) as URLRequest;
var loader : Loader = new Loader();
loader.contentLoaderInfo.addEventListener( Event.COMPLETE, onLoaderComplete );
loader.contentLoaderInfo.addEventListener( IOErrorEvent.IO_ERROR, onLoaderError );
loader.load( request );

Once all images are loaded, the animation is controlled by a regular Flex Timer instance. During the animation, I just remove the currently visible Loader image, and then use addChild on the next image in the sequence. The result is a smooth animation created by a series of independent images.

imageContent.removeAllChildren();
imageContent.addChild( radarLoader.images.getItemAt( index ) as DisplayObject );

In cases like such as this, the image-loop technique works exceptionally well.

Enjoy!