R – Flex: Duplicating instance of an image

apache-flexdragduplicatesimagePROXY

I have a drag and drop handler in my Flex application. The drag proxy, or the 'ghost' image to be displayed while dragging, must be loaded before I drag, and that takes some time. How can I make it load immediately or preload? One solution is to duplicate the image, but as far as I know, image objects can't be duplicated without creating another variable, which must still take some time to load.

Perhaps this code will illustrate it better:

public function DragApp (e : MouseEvent) : void {
    var dragInitiator : Image = e.currentTarget as Image;
    var dragSource : DragSource = new DragSource ();

    var dragProxy : Image = new Image ();
    dragProxy.source = e.currentTarget.source; // Won't work unless image is embedded
    dragProxy.load (e.currentTarget.source); // Must load

    setTimeout (DragManager.doDrag, 350, dragInitiator, dragSource, e, dragProxy);
}

Best Answer

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;

Related Solutions

Android – Strange OutOfMemory issue while loading an image to a Bitmap object

To fix the OutOfMemory error, you should do something like this:

BitmapFactory.Options options = new BitmapFactory.Options();
options.inSampleSize = 8;
Bitmap preview_bitmap = BitmapFactory.decodeStream(is, null, options);

This inSampleSize option reduces memory consumption.

Here's a complete method. First it reads image size without decoding the content itself. Then it finds the best inSampleSize value, it should be a power of 2, and finally the image is decoded.

// Decodes image and scales it to reduce memory consumption
private Bitmap decodeFile(File f) {
    try {
        // Decode image size
        BitmapFactory.Options o = new BitmapFactory.Options();
        o.inJustDecodeBounds = true;
        BitmapFactory.decodeStream(new FileInputStream(f), null, o);

        // The new size we want to scale to
        final int REQUIRED_SIZE=70;

        // Find the correct scale value. It should be the power of 2.
        int scale = 1;
        while(o.outWidth / scale / 2 >= REQUIRED_SIZE && 
              o.outHeight / scale / 2 >= REQUIRED_SIZE) {
            scale *= 2;
        }

        // Decode with inSampleSize
        BitmapFactory.Options o2 = new BitmapFactory.Options();
        o2.inSampleSize = scale;
        return BitmapFactory.decodeStream(new FileInputStream(f), null, o2);
    } catch (FileNotFoundException e) {}
    return null;
}

Html – When to use IMG vs. CSS background-image

Proper uses of IMG

Use IMG if you intend to have people print your page and you want the image to be included by default. —JayTee
Use IMG (with alt text) when the image has an important semantic meaning, such as a warning icon. This ensures that the meaning of the image can be communicated in all user-agents, including screen readers.

Pragmatic uses of IMG

Use IMG plus alt attribute if the image is part of the content such as a logo or diagram or person (real person, not stock photo people). —sanchothefat
Use IMG if you rely on browser scaling to render an image in proportion to text size.
Use IMG for multiple overlay images in IE6.
~~Use IMG with a z-index in order to stretch a background image to fill its entire window.~~
Note, this is no longer true with CSS3 background-size; see #6 below.
Using img instead of background-image can dramatically improve performance of animations over a background.

When to use CSS background-image

Use CSS background images if the image is not part of the content. —sanchothefat
Use CSS background images when doing image-replacement of text eg. paragraphs/headers. —sanchothefat
Use background-image if you intend to have people print your page and you do not want the image to be included by default. —JayTee
Use background-image if you need to improve download times, as with CSS sprites.
Use background-image if you need for only a portion of the image to be visible, as with CSS sprites.
Use background-image with background-size:cover in order to stretch a background image to fill its entire window.