How do I dynamically add Image objects to the display and then interact with them?

Answer 1

1. Use the startDrag and stopDrag method on an DisplayObject you will avoid to do it yourself
2. numChildren will give you the number of children in the display list
3. getChildIndex will give you the index of a object in the display list
4. setChildIndex / swapChildren can be used to change the "z-index" into the display list

So mixing this different functions you could end up with:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
    import mx.controls.Image;

    private function addImage() : void {
        var img : Image = new Image();
        img.source = imgClass;
        img.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown, false, 0, true);
        canvas.addChild(img);
    }

    private function onMouseUp(e : MouseEvent) : void {
        var img : Image = e.currentTarget as Image;
        if (img !== null) {
            stopDrag();
            img.removeEventListener(MouseEvent.MOUSE_UP, onMouseUp);
        }
    }

    private function onMouseDown(e : MouseEvent) : void {
        var img : Image = e.currentTarget as Image;
        if (img !== null) {
            var parent : DisplayObjectContainer = img.parent;

           // get the index of the image and do what you want with it
            var idxImg : int = parent.getChildIndex(img);

           // put the clicked object on top of the list
            parent.setChildIndex(img, parent.numChildren - 1);

            img.addEventListener(MouseEvent.MOUSE_UP, onMouseUp, false, 0, true);
            img.startDrag();
        }
    }

    [Embed(source="assets/logo.png")]
    private var imgClass : Class;
]]>
</mx:Script>
<mx:Canvas id="canvas">
    <mx:Button label="add" click="addImage()"></mx:Button>
</mx:Canvas>
</mx:Application>