Question

Below is sample code from a Module I have in my Flex app. I want to dynamically create mx.controls.Image objects and add them to the display. I want the user to be able to move them (this works as below) and be able to change their z-index as well as record new X and Y coords after moving back to the database. How do I determine which object in this.getChildren() is the ‘selected’ item the user is working with? When I add a MOUSE_OVER event, for example, it does not work.

<?xml version="1.0" encoding="utf-8"?>

        import flash.display.DisplayObject;
        import flash.events.MouseEvent;
        import mx.controls.Image;

        public var draggedObject:DisplayObject;
        public var selectedObject:DisplayObject;
        public var offsetX:Number;
        public var offsetY:Number;


        public function Add():void
        {
            var _image:Image = new Image;
            _image.source = "myimage.png";
            _imagem.x = 100;
            _image.y = 100;
            _image.addEventListener(MouseEvent.MOUSE_DOWN, startDragging);
            _image.addEventListener(MouseEvent.MOUSE_UP, stopDragging);
            this.addChild(_image);
        }

        // This function is called when the mouse button is pressed.
        public function startDragging(event:MouseEvent):void
        {
            // remember which object is being dragged
            draggedObject = DisplayObject(event.target);
            selectedObject = draggedObject;

            // Record the difference (offset) between where the cursor was when
            // the mouse button was pressed and the x, y coordinate of the
            // dragged object when the mouse button was pressed.
            offsetX = event.stageX - draggedObject.x;
            offsetY = event.stageY - draggedObject.y;

            // move the selected object to the top of the display list
            //stage.addChild(draggedObject);

            // Tell Flash Player to start listening for the mouseMove event.
            stage.addEventListener(MouseEvent.MOUSE_MOVE, dragObject);                  
        }

        // This function is called when the mouse button is released.
        public function stopDragging(event:MouseEvent):void
        {
            // Tell Flash Player to stop listening for the mouseMove event.
            stage.removeEventListener(MouseEvent.MOUSE_MOVE, dragObject);
        }

        // This function is called every time the mouse moves,
        // as long as the mouse button is pressed down.
        public function dragObject(event:MouseEvent):void
        {
            // Move the dragged object to the location of the cursor, maintaining 
            // the offset between the cursor's location and the location 
            // of the dragged object.
            draggedObject.x = event.stageX - offsetX;
            draggedObject.y = event.stageY - offsetY;

            // Instruct Flash Player to refresh the screen after this event.
            event.updateAfterEvent();
        }
    ]]>
</mx:Script>
<mx:Button x="83" y="93" label="New Image" click="this.Add()"/>
<mx:Label x="83" y="138" id="label1"/>
<mx:Label x="83" y="164" id="label2"/>

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>