How to drag two movieclips (on separate layers) simultaneously

Question

I've been searching for hours but still haven't found the answer to my problem.

My goal is to have a map that I can drag around within the frame of a webpage. Finding the right code to move the map in a restricted frame wasn't too easy but I managed to find that (which works like a charm):

zoom3.addEventListener(MouseEvent.MOUSE_DOWN, dragArea);
zoom3.addEventListener(MouseEvent.MOUSE_UP, dropArea);

function dragArea(e:MouseEvent):void{
var bounds:Rectangle = new Rectangle(
                            stage.stageWidth - zoom3.width, 
                            stage.stageHeight - zoom3.height, 
                            zoom3.width - stage.stageWidth, 
                            zoom3.height - stage.stageHeight
                        );
zoom3.startDrag(false, bounds);
}

function dropArea(e:MouseEvent):void{
zoom3.stopDrag();
}

Now the catch is that I'd like the map to be dragged simultaneously with a movieclip situated above, that contains names of regions, cities etc... Both can't be on the same layer as I need to put a layer of texture in between.

Is there a simple way to link both layers and make them move at once?

Hope I'm clear enough, English is my second language. Thanks for reading, and maybe helping.

Answer 1

you can:

• add an enterframe event listener when you start the drag (remove it when you stop the drag). track the difference in position with the dragged movieclip and apply it to the second one.
• override the setters for the x and y of the dragged clip, and either mirror it on the dragged clip, or dispatch an event that the second movieclip listens to and update accordingly

Option 1:

private var m_prevX:Number = 0.0;
private var m_prevY:Number = 0.0;

private function dragArea(e:MouseEvent):void
{
    var bounds:Rectangle = ...

    // hold the current x and y so that we can get the difference
    this.m_prevX = zoom3.x;
    this.m_prevY = zoom3.y;

    // add the enterframe listener
    zoom3.addEventListener( Event.ENTER_FRAME, this._onEnterFrame );

    // start dragging
    zoom3.startDrag(false, bounds);
}

private function dropArea(e:MouseEvent):void
{
    zoom3.stopDrag();

    // remove the enter frame listener
    zoom3.removeEventListener( Event.ENTER_FRAME, this._onEnterFrame );
}

// called every frame that we're dragging
private function _onEnterFrame( e:Event ):void
{
    // get the difference in movement
    var diffX:Number = this.m_prevX - zoom3.x;
    var diffY:Number = this.m_prevY - zoom3.y;

    // store the current pos
    this.m_prevX = zoom3.x;
    this.m_prevY = zoom3.y;

    // apply the difference to the other clip
    myOtherClip.x += diffX;
    myOtherClip.y += diffY;
}

** Option ":** A more OO approach. You don't need to override the x and y, but zoom3 needs to extend a class something like this:

public class DraggableClip extends MovieClip
{
    /******************************************************/

    /**
     * The name of the event that we dispatch when we're being dragged
     * and our position changes
     */
    public static const DRAG_UPDATE_POS:String = "drag_update_pos";

    /******************************************************/

    /**
     * The x difference in position if we're being dragged
     */
    public var dragDiffX:Number = 0.0;

    /**
     * The y difference in position if we're being dragged
     */
    public var dragDiffY:Number = 0.0;

    /******************************************************/

    private var m_prevX:Number = 0.0; // our previous x position
    private var m_prevY:Number = 0.0; // our previous y position

    /******************************************************/

    /**
     * Start dragging the clip. This is dispatch an event when
     * our position changes
     */
    override public function startDrag():void
    {
        // reset the drag difference positions
        this.dragDiffX = 0.0;
        this.dragDiffY = 0.0;

        // hold our current position
        this.m_prevX = this.x;
        this.m_prevY = this.y;

        // add an event listener to that we can track the difference
        // you could also set it to listen to MouseEvent.MOUSE_MOVE if
        // you wanted
        this.addEventListener( Event.ENTER_FRAME, this._onEnterFrame );

        // start dragging
        super.startDrag();
    }

    /**
     * Stop dragging the clip
     */
    override public function stopDrag():void
    {
        // remove the event listener
        this.removeEventListener( Event.ENTER_FRAME, this._onEnterFrame );

        // stop draggin
        super.stopDrag();
    }

    /******************************************************/

    // called every frame we're updating
    private function _onEnterFrame( e:Event ):void
    {
        // get the drag difference
        this.dragDiffX = this.m_prevX - this.x;
        this.dragDiffY = this.m_prevY - this.y;

        // store the current x and y
        this.m_prevX = this.x;
        this.m_prevY = this.y;

        // if our position has changed, dispatch an event
        if( this.dragDiffX != 0.0 && this.dragDiffY != 0.0 )
            this.dispatchEvent( new Event( DraggableClip.DRAG_UPDATE_POS ) );
    }
}

Then to listen to the events, something like this:

private function _init():void
{
    // do your init stuff
    zoom3       = new DraggableClip;
    myOtherClip = new MovieClip;

    // add the event listener to zoom3
    zoom3.addEventListener( DraggableClip.DRAG_UPDATE_POS, this._onDragZoom3 );
}

private function _onDragZoom3( e:Event ):void
{
    // zoom3's position has been changed, update myOtherClip
    myOtherClip.x += zoom3.dragDiffX;
    myOtherClip.y += zoom3.dragDiffY;
}