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

Talking about graphic design and image editing I have tried two interesting Flex applications that you can use to work on pictures adding effects or just text layers. They have both a direct connection to some of the most famous community websites as Flickr, Facebook, Picasa or even to personal website.

http://www.splashup.com this is an image editor similar to Adobe Photoshop. The interface is plain but nice to see and very easy to use, it’s perfect if you don’t want to waste time to understand a professional image editor and you need just to do fast correction or adding some simple effects to an image.

The interface is designed in order to let the user move all the window inside the workspace which is one of the main characteristic of Flex applications.

The only thing I can say it would be nice to see updated soon, is the effects section which is a little bit too much empty, it would be nice to have the chance to play with many different kind of special effects and not only with blur, desaturate, emboss ecc. So let’s check in some weeks if there will be something new in this application:)

http://www.flauntr.com/ This editor it has more buttons, sections and tricks to use on your images.

The interface is not as user friendly as the other one, but you have the possibilities to transform your pictures in something different adding funny frames, overlay graphics, text, effects and then transform the image to fit the size of your mobile, some magazine covers or the profile picture of your social networks. This is a very useful and nice thing to have on an application like this.

The interface is more static that the one we have seen before, but you can navigate all sections using a TAB navigation for the main menu and using an accordion menu for the effects to apply.
It’s interesting to see how Flex is starting to be used not only to create widgets, commercial websites or private company applications but also to create alternative on-line tools for private or professional users to work with.