Introducing SuperLoader: a better AS3 library for fetching images

This post is way overdue but in any case, I’d like to introduce (rather belatedly) SuperLoader, an image loading library for AS3. The library grew out of my work when I was building the magazine view for EspressoReader. The magazine view builds a visual grid from the images found in a collection of blogs you are browsing. Here is a screenshot of the experience:

While building the Magazine View, I was faced with a problem. Each “page” of the view read 10 blog entries and then needed to find the most relevant image to show in the interface for each entry. Posts tend to have multiple images and a lot of them are not usable. For example, the image may be a tracking 1×1 pixel image used for analytics or may be too small or large to be effective. Loading each image using a Loader was not feasable since the loader only gave dimension information once loading had been completed and I didnt really want to load a bunch of images completely only to discover they weren’t useful.

The SuperLoader library  takes care of this by actually parsing the binary data in the URLStream that it uses to load the images and can identify very early in the loading process the type and the size of the image being loaded (since that information is available in the first few bytes of the incoming data). Moreover it also includes an api for immediately canceling the load process so that you can jump to the next image in the list of images you are loading. The API looks something like this:

 

var loader:SuperLoader = new SuperLoader();
loader.addEventListener(SuperLoaderEvent.IMAGE_TYPE_IDENTIFIED, 
                                          onImageTypeIdentified)
loader.addEventListener(SuperLoaderEvent.IMAGE_SIZE_IDENTIFIED,
                                               onImageSizeIdentified);
loader.addEventListener(SuperLoaderEvent.LOAD_COMPLETE, onLoadComplete);

private function onImageTypeIdentified(event:SuperLoaderEvent):void{
  trace(loader.imageType)
}

private function onImageSizeIdentified(event:SuperLoaderEvent):void{
  if(loader.imageWidth < 20 || loader.imageHeight < 20){
   loader.abort();
  }
}

private function onLoadComplete(event:SuperLoaderEvent):void{
  var image:Loader = new Loader();
  addChild(image)
  image.loadBytes(loader.data)
}

The library also includes a SuperLoaderQueue object to manage the load process of multiple images.

The library is released under the MIT open source license and is available on Github.

 

3 thoughts on “Introducing SuperLoader: a better AS3 library for fetching images”

  1. This is super-cool! A smart approach and very useful. Have you found many images that can’t be parsed (formatting is off)? or is this approach pretty reliable.

    Like

    1. I really haven’t had any issues with any kind of images. I havent done a very thorough analysis but it powers the image view in the EspressoReader app which pulls feeds from all kinds of places and shows me the images I expect so I’d say its pretty reliable.

      Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s