case
ADM Blog

Extended Image

What's this about ?

 

Extended Image is a Flex 3 component that extends the capabilities of the normal mx.control.Image component and will allow you to read and import a large variety of graphical formats from a large variety of sources

Image Formats

 

Available codecs at the moment are for the following formats :

  • PointLineCAD 3D objects (*.p3d)
  • Photoshop images (*.psd, *.pdd)
  • ZSoft images (*.pcx)
  • Truevision TGA (*.tga, *. icb, *.vda, *.vst, *.win)
  • Windows icon files (*.ico)
  • GIF images (*.gif - static and animated gifs)
  • JPEG images (*.jpg. *.jpeg, *.gfif)
  • PNG (Portable network graphic) images (*.png)
  • Windows Bitmap images ( *.bmp, *.rle, *.dib)
  • Adobe Shockwave Flash (*.swf)

The correct codec for a format is detected at runtime and it doesn't care about the file extension. So you can rename your .psd file as .txt if you want and it won't matter. Each codec will try to match it's format signature before decoding.

MXML Syntax

 
1
<adm:extendedimage id="img" width="100" height="100" preloader="auto" source="file.psd" />

The component extends the standard Flex mx.controls.Image component, so any property or method available for Image will be available here too and I will only explain what was added as extra or modified.

Public properties

 

source property
data : Object

Beside the number of formats this component can read, the sources can be provided in a number of cool ways as well.

1. local file - The default functionality that allows you to load files at runtime

1
<adm:extendedimage id="img" source="images/image.psd" />

2. url - The default functionality that allows you to load files from a URL at runtime

1
<adm:extendedimage id="img" source="http://www.site.com/image.png" />

3. base64 encoding - Plain text (String) base64 encoding of a image file assigned to a bindable string variable or directly in the MXML source tag if the length of the encoding is within reason

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<mx :Script>
< ![CDATA[
[Bindable]
private var png : String =  "iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAIAAAADnC86AAAACXBIWXMAAAsTAAALEwEAmpwYAAAA" +
                            "B3RJTUUH1wYHDQEIzmBhDgAAAB10RVh0Q29tbWVudABDcmVhdGVkIHdpdGggVGhlIEdJTVDvZCVu" +
                            "AAABrElEQVRYw2P8//8/w0AAJoYBAqMWj1pMM8BCvNL/n179Ob/5z60j/55c/f/h2f9fPxjZOBgF" +
                            "pJhktFnUbFgMfRn5xIg3jZGYfPzvxa1fOyf+Pr4cvzJWy0g293wmCTXqWPxrR//PDc3Ee4U9oJbN" +
                            "o5BSi3/Mz/h9chWp8cdqHsaROIN8i7/PSflzZh1WKd4Z7yCMzxlC2NOOSRBnyhxyUvXPja24bCUG" +
                            "/Dmz7ufGVpIt/nv35K/tvRRmmF/be//ePUmaxb929FMls+IxB4vF/55e/XN5F1Us/nN517+nV4m1" +
                            "+M/5LVQsoXCZhs3iOyeoaTEO07AF9YubVLQYl2lYLP7/+S0VLcZlGuFKAl5W4CkuiFeGz8eMvMLI" +
                            "XGRTkE0n0lY00/BZzCShjiaC3278fsU0DafFLCoWmIK47CYYwlhNw2GxoQ9WpfhjDmdtgcM0bEEt" +
                            "rc2i60aS6Tht1XVjktYmoazGU5Nj2oEnJPCYg91iZmVzNs9iYuzGZ6tnMbOyOcn1Mbt/NYtJEH67" +
                            "8djKYhLE7l891Jo+A9nYG8jm7UA26Ec7baMWj1pMDAAAaWDdb2/Rd0wAAAAASUVORK5CYII=";
]]>
</mx>
<adm :ExtendedImage id="img" source="{png}" />

will output

4. plain text - only available for some formats where the data in the files is also plain text (p3d for example or svg)

1
2
3
4
5
6
7
8
<mx :Script>
< ![CDATA[
[Bindable]
private var p3d: String =  "# 1 1 1, 1 1 -1, -1 1 -1, -1 1 1, 1 -1 1, 1 -1 -1, -1 -1 -1, -1 -1 1\n" +
                             "# 0 1 2 3 -1 7 6 5 4 -1 0 4 5 1 -1 5 6 2 1 -1 6 7 3 2 -1 0 3 7 4 -1";
]]>
</mx>
<adm:extendedimage id="img" source="{p3d}" />

will output: (note: you can use your mouse to rotate the object)

5. local zip files - A file within a zip. Really useful if you have a lot of resources (small or large) and you don't want to make a lot of server requests, or show the images here and there as they download asynchronously. Just pack them all together in a single zip file and load them from within the archive at runtime

1
<adm:extendedimage id="img" source="archive.zip://image.png" />

6. remote zip files - Same as local zip but the archive can come from a different domain

1
<adm:extendedimage id="img" source="http://www.site.com/archive.zip://images/image.psd" />

7. embeded asset - Just as the normal Image component, you can embed assets and load them. The only thing you must take into consideration here is that flex won't embed anything else beside jpg, gif and png as images so you'll have to specify the mimetype as "application/octet-stream"

1
2
3
4
5
6
7
8
<script>
< ![CDATA[
 [Embed(source="image.psd",mimeType="application/octet-stream")]
[Bindable]
private var psd: Class;
]]>
</script>
<adm :ExtendedImage id="img" source="{psd}" />
 

 

preloader property
data: UIComponent
default: "auto" (String)

This value can have one of the following values:
- "none" (String) to hide the preloader
- "auto" (String) to show the internal component preloader
- a mx.control.ProgressBar id to link the progress bar to the loading progress
- or to any UIComponent that has a "text" property (such as Label, Text, Textarea, and so on)

Default value is set to "auto" which means a internal preloader will be shown.

In case if you set the preloader property to a ProgressBar id, you will have to customize your own ProgressBar. The ExtendedImage component only sets the curent progress and it won't apply any styles to it

Setting the preloader to a UIComponent with a text property, will display the curent loading percentage.

Even tho, some codecs might take a second or two to decode the images, the preloader will only show the loading progress and it has nothing to do with the decoding progress.

 

 

codec property
data: String
default: "auto"

This property allows you to specify a desired codec for the ExtendedImage instance. Doing so will override the auto-detection. Providing a image that cannot be decoded by the specified coded fill result in a fail event.

 

 

currentCodec property (Read-Only)
data : Object

Gives a reference to the curently used codec where individual methods and properties can be accesed.

Events

 

detected Event
Event Object Type: com.adm.graphics.events.CodecEvent

Dispatched when the component detects the right codec to decode the image. If you manually specify a codec with the codec property, this event will not be dispatched

 

 

metadata Event
Event Object Type: com.adm.graphics.events.MetaDataEvent

Dispatched when the file header was read and image was successfully rendered.
The event has a meta property of type com.adm.graphics.extensions.MetaData with the following properties:

type : String; - codec name (image type)
mimeType : String; - web mimeType
hasControls : Boolean; - set to true if the codec has methods that you can call
controls : Array; - a list of controls you can call to manipulate the image or null if hasControls is false
width : int; - image real width
height : int; - image real height
extended : Object; - other header informations specific to each codec or null if none

 

 

error Event
Event Object Type: com.adm.graphics.events.ExtendedImageErrorEvent

Dispatched when a IO, Security or Codec error occurs. Error message is specified in the text property of the event

Codecs

 

All codec extend the com.adm.graphics.extensions.ICodec interface and expose the following methods/properties:

name : property (ReadOnly) - returns codec name
metaData : property (ReadOnly) - returns the MetdaData object for the decoded image
isFormat(ba : Object) : method - returns true if the specified Object (String or ByteArray) can be decoded by the codec
render(ba : Object, container : ExtendedImage) : method - renders the given Object (String or ByteArray) to the given container.

You should not call render() method unless you do a isFormat() check on the Object.

Disclaimer

 

Doing the codec I followed the official formats specifications. You might not be able to load for example a .psd file created in Paint .NET or edited by some other graphical editor that didn't fully respect the specifications when encoding the file. If you encounter such a problem, please email methe file and I'll try to adapt the codec.

Known issues for future fixes

 

- Some .ico files don't render correctly the 8bit icons
- Truevision TGA only (yet) renders 24 and 32 bit encoded files
- Photoshop files with Indexed color mode are shown blank

Work in progress...

 

More codecs will be available soon. I'm currently working on TIFF, SVG and anything you might suggest

Download

 

What is this worth to you ?
Any price grants the download of the component .swc. $15 or more adds the options of tech support. $50 or more includes all of the above + source code so....

Name your price:
$