Apache – Programmatically load images in Flex

apache-flex

I need to load several images as Bitmap or BitmapData objects. The images are hosted outside the Flex project, and they're referenced by an external configuration file, so I can't embed them. Because the images won't be displayed directly to the user (they're being added to a PDF that is generated for download), creating a grouping of Image objects, attaching them to the application, and waiting for their LoadComplete handler to fire seems inefficient.

What is the best way to load these images into an application?

Best Answer

Have you considered using Loader class?

var ldr:Loader = new Loader();
ldr.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoad);
ldr.load(new URLRequest("image.png"));

function onLoad(e:Event):void
{
    var image:Bitmap = Bitmap(LoaderInfo(e.target).content);
    var bmpData:BitmapData = image.bitmapData;
    //use bmpdata the way you want
    trace(bmpdata.width);
    trace(bmpdata.height);
}

Related Solutions

Apache – When do controls in Flex become addressable

Yes, this is referred to as "creation policy" and it's a property on all Container classes. To do what you we're looking for, you can use a creation policy of "all"; "auto" is the default.

A creationPolicy of ContainerCreationPolicy.AUTO means that the container delays creating some or all descendants until they are needed, a process which is known as deferred instantiation. This policy produces the best startup time because fewer UIComponents are created initially. However, this introduces navigation delays when a user navigates to other parts of the application for the first time. Navigator containers such as Accordion, TabNavigator, and ViewStack implement the ContainerCreationPolicy.AUTO policy by creating all their children immediately, but wait to create the deeper descendants of a child until it becomes the selected child of the navigator container.

A creationPolicy of ContainerCreationPolicy.ALL means that the navigator containers immediately create deeper descendants for each child, rather than waiting until that child is selected. For single-view containers such as a VBox container, there is no difference between the ContainerCreationPolicy.AUTO and ContainerCreationPolicy.ALL policies.

More info here:

http://livedocs.adobe.com/flex/3/html/layoutperformance_04.html

Be careful with this though: Flex picked AUTO as the default for a reason. If your app grows large, the initialization time under creationPolicy=all will be large.

R – Flex: Duplicating instance of an image

I believe the problem is you aren't setting a width and height for the image (somehow redundant for embedded images):

dragImage:IFlexDisplayObject (default = null) — The image to drag. This argument is optional. If omitted, a standard drag rectangle is used during the drag and drop operation. If you specify an image, you must explicitly set a height and width of the image or else it will not appear.

If you define a width and a height for the Image proxy in your example, it will probably work:

var dragProxy : Image = new Image ();
dragProxy.source = dragInitiator.source;
dragProxy.width = dragInitiator.width;
dragProxy.height = dragInitiator.height;

Best Answer

Related Solutions

Apache – When do controls in Flex become addressable

R – Flex: Duplicating instance of an image

Related Topic