Moving A MovieClip to Left/Right Using Touch Events with simultaneous touches

Question

I am Developing a game, AS3 Adobe air targeted for both android and ios, in which you have a movie clip in the center, and two buttons ( left and right ) that should move that movie clip. My goal is to make the shift between the left/right as smooth as possible :
- if the player is touching the left button, the movie clips moves left. if he removes he's finger from the left button, and touches immediately the right button, the movie clip won't move, it's until he re-touches the right button , that the movie clips moves right. I have tried to implement multitouch events, but i seem to have something wrong since this is the behavior i'm getting.
- if the player is touching the left button, the movie clips moves left as expected, if he touches the right button, the movie clip stops as expected, but if he removes his finger from the left button while keeping it on the right button, the movie clip still freezes and don't move, it should move then to the right
This is the code i am using :

leftButtonCreated.addEventListener(TouchEvent.TOUCH_BEGIN,mouseDown);
rightButtonCreated.addEventListener(TouchEvent.TOUCH_BEGIN,mouseDown2);
stage.addChild(leftButtonCreated);
stage.addChild(rightButtonCreated);

function mouseDown(e:TouchEvent):void
        {

            stage.addEventListener(TouchEvent.TOUCH_END,mouseUp1);
            //listen for mouse up on the stage, in case the finger/mouse moved off of the button accidentally when they release.;
            addEventListener(Event.ENTER_FRAME,myButtonClick);//while the mouse is down, run the tick function once every frame as per the project frame rate
        }

        function mouseUp1(e:TouchEvent):void
        {

            removeEventListener(Event.ENTER_FRAME,myButtonClick);//stop running the tick function every frame now that the mouse is up
            stage.removeEventListener(TouchEvent.TOUCH_END,mouseUp1);
        }

        function mouseDown2(e:TouchEvent):void
        {

            stage.addEventListener(TouchEvent.TOUCH_END,mouseUp2);
            //listen for mouse up on the stage, in case the finger/mouse moved off of the button accidentally when they release.;
            addEventListener(Event.ENTER_FRAME,stopDragging);//while the mouse is down, run the tick function once every frame as per the project frame rate
        }

        function mouseUp2(e:TouchEvent):void
        {

            removeEventListener(Event.ENTER_FRAME,stopDragging);//stop running the tick function every frame now that the mouse is up
            stage.removeEventListener(TouchEvent.TOUCH_END,mouseUp2);
        }

    function stopDragging(ev2:Event):void
    {

        if (MC.x <= rightButtonCreated.x)
        {
            MC.x = MC.x + 10;
        }


    }

    function myButtonClick(ev:Event):void
    {


        if (MC.x > leftButtonCreated.x)
        {
            MC.x = MC.x - 10;

        }
        else
        {



        }

    }

The Code was initially set for mouseEvents, so i tried to shift to touch events so i could fix this problem, and the code above is what i got. Thank you for your time.

EDIT:

And, i use the following code :

var leftButtonCreated:leftB= new leftB();

Vesper Vesper · Accepted Answer · 2016-07-22T09:25:51

Your current problem is that both mouseUp1 and mouseUp2 are triggered once you release the left button, as they are both attached to stage. But your actual problem is deeper. You should first move the object left and right if corresponding buttons are pressed, and use TouchEvent.touchPointID to track which touch has been released to understand which button was released.

Also a potential caveat: If you touch both left and right button, then swap fingers while retaining both touches, then release the finger that's over the right button - where should your object move, left or right? I say the correct answer is to the right, as the finger released corresponds to the left button.

leftButtonCreated.addEventListener(TouchEvent.TOUCH_BEGIN,touchDown);
rightButtonCreated.addEventListener(TouchEvent.TOUCH_BEGIN,touchDown);
leftButtonCreated.addEventListener(TouchEvent.TOUCH_END,touchUp);
rightButtonCreated.addEventListener(TouchEvent.TOUCH_END,touchUp);
addEventListener(Event.ENTER_FRAME,moveObject);

function touchDown(e:TouchEvent):void {
    var button:DisplayObject=e.currentTarget as DisplayObject; 
    if (!button) return; // can't fail typecast to DisplayObject in this context, but leave for good measure
    if (button==leftButtonCreated) {
        leftButtonPressed=true;
        leftButtonTouchID=e.touchPointID;
        return;
    }
    if (button==rightButtonCreated) {
        rightButtonPressed=true;
        rightButtonTouchID=e.touchPointID;
        return;
    }
}
function touchUp(e:TouchEvent):void {
    var button:DisplayObject=e.currentTarget as DisplayObject;
    if (!button) return;
    var ti:int;
    if (button==leftButtonCreated) {
        ti=leftButtonTouchID; 
        if (ti==e.touchPointID) {
            leftButtonPressed=false;
        }
    }
    if (button==rightButtonCreated) {
        ti=rightButtonTouchID;
        if (ti==e.touchPointID) {
            rightButtonPressed=false;
        }
    }
}
function moveObject(e:Event):void {
    if (leftButtonPressed) MC.x-=10;
    if (rightButtonPressed) MC.x+=10;
    if (MC.x<leftButtonCreated.x) MC.x=leftButtonCreated.x;
    if (MC.x>rightButtonCreated.x) MC.x=rightButtonCreated.x;
}

EDIT: Apparently SimpleButtons don't allow the events to propagate outside to their parents. Okay, this can still be remedied, but you will have to store the required properties in your Main class.

var leftButtonPressed:Boolean=false;
var rightButtonPressed:Boolean=false;
var leftButtonTouchID:int=0;
var rightButtonTouchID:int=0;

The above code has been updated. Please return to using SimpleButtons directly, as you were using with var leftButtonCreated:leftB= new leftB();.

Moving A MovieClip to Left/Right Using Touch Events with simultaneous touches

1 Answers