Search code examples
actionscript-3touchcharactermove

How to move the character up when touched the stage in ActionScript 3


I am new to ActionScript 3 and yes it is quite interesting. But I have got a problem with touch event.

I have already coded for the character (bird) to move forward and down at each frame and now I need to insert a function to move the bird upwards when tapping on the screen. I have tried it with an example in this url - https://help.adobe.com/en_US/as3/dev/WS1ca064e08d7aa93023c59dfc1257b16a3d6-7ffe.html But still nothing happens. Please help me.

My code is as below.

package{
import flash.display.MovieClip;
import flash.events.Event;
import flash.events.TouchEvent;
import flash.ui.Multitouch;

Multitouch.inputMode=MultitouchInputMode.TOUCH_POINT;


public class MyBirdy extends MovieClip{

    public var bird: Birdy;
    public var sky: Background;
    public var sky2: Background;
    public var birdinsky: MovieClip;
    public var skyBreadth:Number;

    public function MyBirdy(){
        bird = new Birdy();
        sky = new Background();
        sky2 = new Background();
        skyBreadth = 1453.15;

        sky.x = 730;
        sky.y = 360;
        bird.x = 100;
        bird.y = 340;
        sky2.x = sky.x + skyBreadth;
        sky2.y = sky.y;

        birdinsky = new MovieClip();
        birdinsky.addChild(sky);
        birdinsky.addChild(sky2);
        birdinsky.addChild(bird);

        stage.addChild(birdinsky);

        addEventListener(Event.ENTER_FRAME, onEnterFrame);
    }


    public function onEnterFrame(e:Event):void{
        bird.x += 4;
        birdinsky.x = 100 - bird.x;
        bird.y += 2


        if(sky.x + skyBreadth + birdinsky.x < 700){
            sky.x = sky.x +  (2 * skyBreadth);
        }
        if(sky2.x + skyBreadth + birdinsky.x < 700){
            sky2.x = sky2.x + (2 * skyBreadth);
        }


        birdinsky.addEventListener(TouchEvent.TOUCH_TAP, onTap);
    }


    function onTap(e:TouchEvent): void {
        bird.y -= 2;
        //I want my bird to fly up when tapped!
    }
}

Solution

  • The reason it doesn't work, is because your tap movement is always going to be negated by the movement in the enter frame handler. e.g. you tap, which moves the bird up 2 pixels, but then on the next frame tick of your application (when you'd see the visual change) you move the bird down again 2 pixels in onEnterFrame - which runs every frame tick.

    Here is a way to do what you'd like:

    Take this line, and remove it completely (or if you actually want a tap and not a hold, move it out of the onEnterFrame method and into your constructor - you don't want to add a listener over and over again every frame)

    birdinsky.addEventListener(TouchEvent.TOUCH_TAP, onTap);
    

    If you don't need multiple simultaneous touch support, it would be simpler to use mouse events. remove this line if switching to mouse events instead of touch (though you could still use touch if you'd like):

    Multitouch.inputMode=MultitouchInputMode.TOUCH_POINT;
    

    In your constructor function (MyBirdy) add the following lines to listen for the mouse up and down events:

    As suggested in the comments, you should listen on the stage for the mouse down (or touch begin) if you want a press anywhere on the screen to work

    stage.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);   //or TouchEvent.TOUCH_BEGIN
    stage.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);  //or TouchEvent.TOUCH_END
    

    Then create the handler functions for those listeners, as well as a var to track the mouse button state:

    private var isMouseDown:Boolean = false;
    
    private function onMouseDown(e:Event):void {
        isMouseDown = true;
    }
    
    private function onMouseUp(e:Event):void {
        isMouseDown = false;
    }
    

    With the above you now have a var (isMouseDown) that will be set to true when the mouse is down, and false when the mouse is up. Remember that mouse here is also the same of a finger press/hold.

    Now, inside your enter frame handler (onEnterFrame), add the following:

    remove the line bird.y += 2. Add:

    if(isMouseDown){
        bird.y -= 2; //move the bird up, as the screen is being pressed/clicked
    }else{
        bird.y += 2  //move the bird down
    }
    

    Now, instead of a single tap event, any frame where the mouse is down (or a press and hold) the bird will move up instead of down.