« Creating and accessing JavaScript objects from ActionScript classes in AIR | Main | Image editing with Flex applications »

Using the Loader class to load and set dimensions of an image from the remote server in Flex 3

Working and creating images in Flex could not be as easy as it looks. When you load an image loaded from the remote server you will tipicaly receive a ByteArray data. The ByteArray image doesn't contain any information such as the width and height of that data. Moreover you must know when the entire bytearray it's been fully loaded on the client.

To do this we need to load the bytearray with the Loader Class.
So we need to extend an mx.control.Image Class and add the loader information:

private var _loader:Loader = new Loader();

Now wee need to implement a method to load the bytes:

public function loadBytes(bytes:ByteArray, context:LoaderContext = null):void
{
_loader.loadBytes(bytes, context);
_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onBytesLoaded);
}

This method will load the byte array image and add the listener to know when is ready.

After the event.complete handler will bring up with the loader information:

private function onBytesLoaded( e:Event ):void
{
source = _loader.content;
width = _loader.contentLoaderInfo.width;
height = _loader.contentLoaderInfo.height;
removeChild(_loader);
}

You can see that now we can set the source for the image and than set the correct width and height getting the information from the _loader.contentLoaderInfo.

Finally we remove the loader.
Here you can find the complete source for the ByteArrayImage Class:

The Class

package
{
import flash.display.Loader;
import flash.events.Event;
import flash.system.LoaderContext;
import flash.utils.ByteArray;

import mx.controls.Image;

public class ByteArrayImage extends mx.controls.Image
{
private var _loader:Loader = new Loader();

public function ByteArrayImage()
{
}

override protected function createChildren():void
{
_loader.visible = false;
addChild(_loader);
}

public function loadBytes(bytes:ByteArray, context:LoaderContext = null):void
{
_loader.loadBytes(bytes, context);
_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onBytesLoaded);
}

private function onBytesLoaded( e:Event ):void
{
source = _loader.content;
width = _loader.contentLoaderInfo.width;
height = _loader.contentLoaderInfo.height;
removeChild(_loader);
}
}
}

A simple implementation:

import flash.image.JPEG;
import flash.image.PNG32;
myJPG:ByteArray = new JPEG( bitmapData , 300, 300, 80 );
myPNG:ByteArray = new PNG32( bitmapData , 1500, 1260 );

myByteImage:ByteArrayImage = new ByteArrayImage();
myByteImage.loadBytes( myJPG or myPNG );

Reference:
ByteArray LiveDocs
Loader LiveDocs

TrackBack

TrackBack URL for this entry:
http://blog.comtaste.com/mt-tb.cgi/58

Comments (4)

Jed Schneider:

where is the overridden function "createChildren" implemented in the Flex source code? By overriding this function, what is the intended result? Thanks.

This is the overrided function:

override protected function createChildren():void
{
_loader.visible = false;
addChild(_loader);
}

By overriding this when you add to stage the ByteArrayImage automaticaly create and and the child "_loader" setted to invisible. The _loader child component need to load the byteArray.

Anton Serbin:

Whenever I try to call loadBytes as you suggested I receive the next error:

Error #2044: Unhandled IOErrorEvent:. text=Error #2124: Loaded file is an unknown type.

Rui:

hi there!
Is it possible to do this for VideoDisplay components?
My question is, basically: after i load the video into an array using FileReference.load(), how do i show the video in the component. The source property of the VideoDisplay only accepts String and i want to show a video form the client side, so obviously i cannot access the file path. Any ideas?

Post a comment

(If you haven't left a comment here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thanks for waiting.)

About

This page contains a single entry from the blog posted on July 8, 2008 9:07 AM.

The previous post in this blog was Creating and accessing JavaScript objects from ActionScript classes in AIR.

The next post in this blog is Image editing with Flex applications.

Many more can be found on the main index page or by looking through the archives.

Powered by
Movable Type 3.33