Tutorial – Multi Touch in AS3 / Flash Player 10.1 – Part 2. TouchEvent & MouseEvent Sequences

5 actionscript,as3,as3 tutorials,flash,work  |   December 13, 2009  |     5746

Hi Everyone,

In this installment I will cover the TouchEvent and how it is intertwined with MouseEvent. First you need to understand that touches will fire MouseEvent‘s too. You will get a TouchEvent first, then a MouseEvent. This can prove annoying in some cases, and good in others.

For the complete listing of TouchEvent‘s as well as some basic description of the information it carries please refer to this page.

First let us register the following events on a target Sprite:

  • TouchEvent.TOUCH_BEGIN
  • TouchEvent.TOUCH_OVER
  • TouchEvent.TOUCH_OUT
  • MouseEvent.MOUSE_DOWN
  • MouseEvent.MOUSE_OVER
  • MouseEvent.MOUSE_OUT

The actual series of events goes like this:

  • You apply your finger — nothing happens
  • You start dragging your fingerTOUCH_BEGIN, TOUCH_OVER, MOUSE_OVER, MOUSE_DOWN get fired, in that order
  • You move your finger out of the objectTOUCH_OUT, MOUSE_OUT get fired, in that order
  • You move your finger back on the objectTOUCH_OVER, MOUSE_OVER get fired, in that order

Stage Action
Just like with MouseEvent.MOUSE_UP, it is better to listen to TouchEvent.TOUCH_END on the Stage. Just as in the MouseEvent.MOUSE_DOWN handler we add a listener to MouseEvent.MOUSE_UP on the Stage; in the TouchEvent.TOUCH_BEGIN handler we add a listener to TouchEvent.TOUCH_END on the Stage.

Then we get one more action that fires event:

  • You remove your finger from the screenTOUCH_END, MOUSE_UP get fired, in that order.

Testing it yourself
Try the following code to test it yourself:

TouchEvent.TOUCH_MOVE, MouseEvent.MOUSE_MOVE
This is where, in my opinion, it gets a little strange in my opinion. You cannot expect the TouchEvent to be fired before the MouseEvent; but in any case in common practice you will not listen to both simultaneously. You will either pick one or the other.

To test this yourself, first modify the doTouchBegin and doTouchEnd functions like so:

Next, let’s code the doTouchMove function…

You will notice that I “trace” the touchPointID property of the event; to demonstrate that it is a constant in the case of single touch.

Same deal with the MouseEvent.MOUSE_MOVE, first modify doMouseDown and doMouseUp functions:

finally, code the doMouseMove function like so:

How to disable this intertwining nightmare
In many cases, you will have a different handler for TouchEvents and MouseEvents, and you will not want BOTH to be triggered. This is because in a multi-touch ideology you will have multiple touches to track, meaning many TouchEvents being fired and with a couple of touchPointID’s being referenced. Hence your handler cannot simply copy the logic you use in typical mouse handlers.

The method I have found that works best is to remove the mouse listeners on TOUCH_BEGIN and add them again on TOUCH_END, but making sure you add them only once all touches have ended. In most cases the user will use the Mouse or Touch; but not both simultaneously.

First we will need to track how many touches are active by adding a _activeTouches protected property to the class..

Then, in the doTouchBegin handler, increment this property; and in the doTouchEnd handler, decrement it. Next, in the doTouchBegin handler, if the value before incrementation is 0, remove mouse listeners; and in the doTouchEnd handler, if the value after decrementation is 0, add the mouse listeners. Like so:

Did you notice that I add and remove TouchEvent‘s on the Stage only in certain conditions?
Now that this is out of the way, no more intertwining action! You can concentrate on programming your Touch logic separately from your Mouse logic w/o having fears of interference.

TouchEvent.TOUCH_TAP
The last thing to cover is this event. Basically to show you when it is fired.. Basically, they are fired too often. They are fired even if you keep your finger moving on the screen for 2-3-4 seconds. To me, that is not a TAP. If you press your finger, but do not move, the Windows 7 will transform the touch into a right-click, you will see a circle draw itself around your finger, if you wait for it to be completely drawn: it is a right-click AND a touch, but not a TAP. Otherwise whatever you do, with one single finger, is a TAP.

To demonstrate this, add the following property to your Main class:

add this event listener code with the other ones (TouchEvent.TOUCH_BEGIN, TOUCH_OVER, TOUCH_OUT)

Next modify doTouchBegin and doTouchEnd like so:

finally, add a doTouchTap handler:

If you run this updated code, you will notice that no matter how much your move your finger around once it is done, and how long you keep it down, it will fire a TOUCH_TAP event.. useless in my opinion.

Oki, that’s it for today. Hope you enjoyed! I will keep going next week.

Martin

Comments
  • December 18, 2009 at 2:27 pm

    Hannes

    Hello,
    great tutorial

    can you please also show us how to move a object(image) with touch support?

    thx

  • December 27, 2009 at 5:50 am

    Metachoir

    wow great!!!
    thx~

  • December 30, 2009 at 10:11 am

    Gemma18MK

    Very useful article about this post. I try essay writing services and buy custom essay papers or essays written about this good post.

  • January 25, 2010 at 8:52 am

    TheDeadKoiClub

    Nice tutorial, but I must disagree. I’m working with a Dell Latitude XT2 and touch events are not always fired in the the same order with mouse events on my machine. Actually it seems to work most of the times but every now and then the order is switched. I’m not quite sure if this may be hardware dependent (or at least caused somehow by the system and not by the Flash Player). I think the better solution by Adobe would have been to implement a switch to simply disable this behaviour when needed.

  • June 10, 2010 at 3:34 am

    Aşk Büyüsü

    Nice tutorial, but I must disagree. I’m working with a Dell Latitude XT2 and touch events are not always fired in the the same order with mouse events on my machine. Actually it seems to work most of the times but every now and then the order is switched. I’m not quite sure if this may be hardware dependent (or at least caused somehow by the system and not by the Flash Player). I think the better solution by Adobe would have been to implement a switch to simply disable this behaviour when needed.

Leave a Reply