OrangeFlash

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:SecurityErrorEvent):void
		{
			dispatchEvent(new SecurityErrorEvent(event.type, event.bubbles, event.cancelable, event.text));
		}
		/**
		 * @private
		 */
		private function onStreamHTTPStatus(event:HTTPStatusEvent):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 progressive on your right. Note you have to be 18 years old to view the content :)
View It

This entry was posted on Friday, October 6th, 2006 at 1:10 am and is filed under Flash Platform, GUI/UI, Usability, Examples, ActionScript 3.0. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.