如何同时拖动两个动画片段(在不同的图层上)

时间:2011-06-28 19:49:53

标签: flash actionscript-3 draggable

我一直在寻找几个小时,但仍未找到问题的答案。

我的目标是制作一张可以在网页框架内拖动的地图。 找到合适的代码在限制框架内移动地图并不是太容易,但我设法找到了(这就像一个魅力):

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();
}

现在的问题是,我希望地图能够与位于上方的动画片段同时拖动,其中包含地区,城市等的名称...... 两者都不能在我需要的层之间放置一层纹理。

是否有一种简单的方法可以链接两个图层并立即移动它们?

希望我很清楚,英语是我的第二语言。 感谢阅读,也许还有帮助。

1 个答案:

答案 0 :(得分:2)

你可以:

  • 在开始拖动时添加一个enterframe事件侦听器(在停止拖动时将其删除)。跟踪拖动的动画片段的位置差异,并将其应用到第二个。
  • 覆盖拖动剪辑的x和y的setter,并在拖动的剪辑上镜像它,或者调度第二个movieclip侦听并相应更新的事件

选项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;
}

**选项“:** 更多OO方法。您不需要覆盖x和y,但zoom3需要扩展类如下所示:

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 ) );
    }
}

然后听一下这些事件:

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;
}