flash drag and drop one of many sprite instances

Question

I have problem with drag and drop function and object selection.

I create simple flash arranger (add table icon to stage - room). I have button which create new instance of table icon, wchich i can drag and drop over the stage.

Problem is that i can drag and drop only last added icon. If i add new instance od icon i can not take (drag and drop) any icon created before :/

my code here: main class

import flash.events.MouseEvent;
import flash.events.Event;
import com.adobe.images.JPGEncoder;
import flash.geom.Point;

btn_middleTable.addEventListener(MouseEvent.CLICK, f_middleIco);
btn_bigTable.addEventListener(MouseEvent.CLICK, f_bigIco);
btnSave.addEventListener(MouseEvent.CLICK, f_save);

function f_middleIco(event:MouseEvent):void
{
    var middle:MiddleIco = new MiddleIco();
    middle.x = 20;
    middle.y = 20;
    stage.addChild(middle);
    trace("created");
}

function f_bigIco(event:MouseEvent):void
{
    var big:BigIco = new BigIco();
    big.x = 20;
    big.y = 20;
    stage.addChild(big);
    trace("created");
}

function f_save(event:MouseEvent)
{
    var jpgEncoder:JPGEncoder;
    jpgEncoder = new JPGEncoder(90);

    var bitmapData:BitmapData = new BitmapData(stage.width, stage.height);
    bitmapData.draw(stage, new Matrix());
    var img = jpgEncoder.encode(bitmapData);

    var file:FileReference = new FileReference();
    file.save(img, "filename.png");
}

icon instance package:

package  {

    import flash.display.MovieClip;
    import flash.events.MouseEvent;
    import flash.events.Event;
    import flash.geom.Point;

    public class BigIco extends MovieClip {
            public var active:Boolean;

        public function BigIco() {
            // constructor code
            this.addEventListener(Event.ENTER_FRAME, f_move);
            this.addEventListener(MouseEvent.MOUSE_DOWN,downf);
            this.addEventListener(MouseEvent.MOUSE_UP,upf);
        }

        public function f_move(e:Event)
        {
            if(active==true)
            {
                startDrag();
            }
            else if(active==false)
            {
                stopDrag();
            }
        }

        public function downf(e:MouseEvent)
        {
            active = true;
        }
        public function upf(e:MouseEvent)
        {
            active = false;
        }
}
}

what can i do to have ability to select every icon (instance) which is actually over mouse cursor?

Answer 1

Theory: startDrag and stopDrag aren't meant to be called repeatedly - but they will be, once every frame, for every clip you add, because you're using an ENTER_FRAME listener.

I haven't tested this, but calling stopDrag may actually stop any dragging - including on other clips - because you're only allowed to drag a single Sprite (and hence MovieClip) in the first place.

So, if that theory holds, startDrag() on your first icon will be cancelled immediately by f_move() on the new icon calling stopDrag().

But there's no need for you the ENTER_FRAME listener in any event. This should give the same result (except it actually works) - simply calling the drag methods immediately in the mouse listeners:

public class BigIco extends MovieClip {
    public var active:Boolean;

    public function BigIco() {
        // constructor code
        this.addEventListener(MouseEvent.MOUSE_DOWN, downf);
        this.addEventListener(MouseEvent.MOUSE_UP, upf);
    }

    public function downf(e:MouseEvent)
    {
        // Unless you're going to use 'active' for other stuff,
        // you can remove this line:
        active = true; 
        startDrag();
    }
    public function upf(e:MouseEvent)
    {
        // Same here:
        active = false;
        stopDrag();
    }
}

Other than that, I can't spot any real problems in your code.

EDIT: "Perfect" version, also detecting mouse up if pointer isn't over icon:

public class BigIco extends MovieClip {

    public function BigIco() {
        // Only add mouse down listener here. We'll add up when needed below:
        this.addEventListener(MouseEvent.MOUSE_DOWN,downf);
    }

    public function downf(e:MouseEvent)
    {
        // Add event listener to stage, so as to be triggered even if
        // the pointer isn't over the icon when releasing the button.
        // Note that this will also work even with the mouse *outside*
        // the stage/swf area:
        stage.addEventListener(MouseEvent.MOUSE_UP,upf);
        startDrag();
    }
    public function upf(e:MouseEvent)
    {
        // Remember to remove the event listener after use:
        stage.removeEventListener(MouseEvent.MOUSE_UP, upf);
        stopDrag();
    }
}