Stream Image Loading

In ActionScript 1-2, we often needed to create preloader for images, because we couldn’t show them while loading were in progress. ActionScript 3.0 changes this, with ByteArray and URLStream classes we can work with bytes instead of files.

That means that we can show half of the image, or different states of progressive JPEG file.

This is StreamLoader class, which loads image using URLStream class, and passes ByteArray to Loader class.

package eu.orangeflash.display
{
 import flash.display.Loader;
 import flash.events.*;
 import flash.net.*;
 import flash.utils.*;
 import flash.system.LoaderContext;
 
 [Event(name = "complete", type="flash.events.Event")]
 [Event(name = "progress", type="flash.events.ProgressEvent")]
 [Event(name = "open", type="flash.events.Event")]
 [Event(name = "ioError", type="flash.events.IOErrorEvent")]
 
 public class StreamLoader extends Loader
 {
 protected var stream:URLStream = new URLStream();
 protected var bytes:ByteArray = new ByteArray();
 protected var cont:LoaderContext;
  
 import mx.core.UIComponent
  /**
   * Constructor, creates new StreamLoader
   * 
   */
 public function StreamLoader(request:URLRequest = null)
  {
   if(request != null)
   {
    loadStream(request);
   }
  }
  /**
   * Method, loads images as stream
   * 
   * @param request  URLRequest
   * @param context  
LoaderContext, default value is null
   */
  public function loadStream(request:URLRequest, 
context:LoaderContext = null):void
  {
   cont = context;
   
   stream.load(request);
   
stream.addEventListener(Event.COMPLETE,onStreamComplete);
stream.addEventListener(ProgressEvent.PROGRESS,onStreamProgress);
stream.addEventListener(Event.OPEN,onStreamOpen);
stream.addEventListener(IOErrorEvent.IO_ERROR,onStreamIOError);
stream.addEventListener(HTTPStatusEvent.HTTP_STATUS,
onStreamHTTPStatus);
 stream.addEventListener(SecurityErrorEvent.
SECURITY_ERROR,onStreamSecurityError);
  }
  /**
   * @private
   */
  private function onStreamComplete(event:Event):void
  {
   updateBytes();
   dispatchEvent(new Event(event.type, event.
bubbles, event.cancelable));
   
   setTimeout(confirmBytesLoaded,50);   
  }
  /**
   * @private
   */
  private function onStreamProgress(event:ProgressEvent)
                                   :void
  {
  updateBytes();
  dispatchEvent(new ProgressEvent(event.type, event.
                            bubbles,
   event.cancelable, event.bytesLoaded, 
                           event.bytesTotal));
   
  }
  /**
   * @private
   */
  private function onStreamIOError(event:IOErrorEvent)
                                   :void
  {
  dispatchEvent(new IOErrorEvent(event.type, 
                  event.bubbles, event.cancelable, event.text));
  }
  /**
   * @private
   */
  private function onStreamSecurityError(event:Securit
yErrorEvent):void
  {
  dispatchEvent(new SecurityErrorEvent(event.type, 
event.bubbles, event.cancelable, event.text));
  }
  /**
   * @private
   */
  private function onStreamHTTPStatus(event:HTTPStat
                          usEvent):void
  {
  dispatchEvent(new HTTPStatusEvent(event.type, event
.bubbles, event.cancelable, event.status));
  }
  /**
   * @private
   */
  private function onStreamOpen(event:Event):void
  {
  dispatchEvent(new Event(event.type, 
                   event.bubbles, event.cancelable));
  }
  /**
   * @private
   */
  private function updateBytes():void
  {
   stream.readBytes(bytes, bytes.length);
   if(bytes.length > 0)
   {
    loadBytes(bytes,cont);
   }
  }
  /**
   * @private
   * 
   * Method confirms that all bytes loaded, and closes stream
   */
  private function confirmBytesLoaded():void
  {
   updateBytes();
   stream.close();
  }
  
 }
}

In the example below, you can see normal JPEG file on your left, and p
rogressive on your right. Note you have to be 18 years old to view the
content :)