Creating an Image Cache with ActionScript 3

Brandon — Wed, 19 Aug 2009 03:04:49 +0000

A Flash application that loads images at runtime and uses them over and over won’t attempt to reuse any previously downloaded assets. Instead, the Flash Player will download a new image from the server over and over, wasting time and bandwidth. The additive effect of this can create a real noticeable difference in performance on a large scale.

For example, we ran into this problem on the leaderboard of the PGA Tour Shot Tracker. The leaderboard displays the player’s name and the flag of the country they’re from. There can be hundreds of players in the tournament, but they all come from about 2 dozen countries or so. This setup is a perfect use case for caching images internally.

I started looking around for a solution, and came across this question on StackOverflow.com as well as an excellent pseudo-code example: this blog post.

With about an hour’s worth of free time I created a fully functioning ActionScript image cache of my own. There are only 2 parts:

CachedImage.as – A subclass of the Image control. A CachedImage adds itself to the cache when its COMPLETE event is fired.
ImageCache.as – Stores the BitMapData of the CachedImages in a dictionary and provides a small set of static methods for querying, adding, and retrieving from the cache.

CachedImage.as

package com.bdement.imagecache
{
import flash.events.Event;
 
import mx.controls.Image;
 
public class CachedImage extends Image
{
	private function onComplete(event:Event) : void
	{		
		ImageCache.add(this);
	} 
 
	public override function set source(source:Object) : void
	{
		if(!ImageCache.contains(source)) {
			addEventListener(Event.COMPLETE, onComplete); 
		}			
		super.source = ImageCache.get(source);
	}		
}
}

ImageCache.as

package com.bdement.imagecache
{
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.utils.Dictionary;
 
/**
 * 
 * @author bdement
 * 
 * This class reduces the amount of HTTP requests your application has to make
 * by storing the BitMapData of CachedImage objects in memory for reuse
 * by images created after the first one completes.
 */
public class ImageCache
{
	/**
	 * The internal representation of the cache
	 */		
	private static var cache:Dictionary = new Dictionary(false);				
	/**
	 * All the methods of ImageCache are static, so the constructor shouldn't be called.
	 * 
	 */				
	public function ImageCache()
	{
		throw new Error("You don't need to instantiate the ImageCache!");
	}	
	/**
	 * 
	 * @param imageSource The source of an image
	 * @return Whether the cache already contains the image indicated by imageSource 
	 * 
	 */				
	public static function contains(imageSource:Object) : Boolean
	{
		return cache[imageSource] != null;
	}		
	/**
	 * Retrieves the image 
	 * 
	 * @param imageSource The source of an image
	 * @return Either: The image if it exists in the cache, OR the default
	 * source that was passed in via imageSource.
	 * 
	 */		
	public static function get(imageSource:Object) : Object
	{
		if(contains(imageSource)) {
			trace("using '" + imageSource + "' from cache!");
			return new Bitmap(cache[imageSource] as BitmapData);	
		}
		return imageSource; // String or Object
	}
	/**
	 * Adds an image to the cache
	 * @param image The image to be cached 
	 * 
	 */		
	public static function add(image:CachedImage) : void
	{			
	    if (!contains(image.source))
	    {
	    	trace("adding '" + image.source + "' to cache!");
	        var bitmapData:BitmapData = 
	        	        new BitmapData(	image.content.width, 
	        	                                        image.content.height,
                                                                true,
	        		                                0x00000000);
 
	        bitmapData.draw (image.content);
 
	        cache[image.source] = bitmapData;
	    }
	}
 
}
}

Finally, you leverage the ImageCache and CachedImage in your application. You can set the source of your CachedImages in all the ways you normally would, and the ImageCache will be used automatically. Note that our ImageCache doesn’t cache embedded images. This is because embedded images don’t fire the COMPLETE event, which is OK because they’re already cached in memory and they can be reused without using our ImageCache.

Application.mxml

 version="1.0" encoding="utf-8"?>
 
	xmlns:mx="http://www.adobe.com/2006/mxml" 
	xmlns="*"
	width="500" height="200"
	layout="horizontal"	
 >  
	 id="image1" source="http://www.brandondement.com/blog/wp-content/uploads/2009/08/rooster.gif" />			
 
	>
		 text="Set image2.source to..." />
		 click="{image2.source = image1.source}" label="image1.source" toolTip="image1.source" />
		 click="{image2.source = 'http://www.brandondement.com/blog/wp-content/uploads/2009/08/rooster.gif'}"	label="HTTP URL" toolTip="http://www.brandondement.com/blog/wp-content/uploads/2009/08/rooster.gif" />
		 click="{image2.source = null}"	label="null" />
	>
 
	 id="image2" />
 
>

And finally, here’s the working example. To doublecheck that it’s actually using the cache, reload this page with a web debugging proxy on, like Charles. You’ll notice a request for “rooster.gif,” which is the flash movie downloading the image on the left. (There will probably be two, since there are two example files) But notice that when you click the buttons below, no more requests are made. Success!

And here, just for comparison’s sake, is the example using normal mx:Images without caching built in. With Charles on you’ll notice that every time the image source is changed from null, a new request is made!

The bAS3 Class » cache

Creating an Image Cache with ActionScript 3