Handling clicks and touch events

Certify and Increase Opportunity.
Be
Govt. Certified Blackberry Apps Developer

Touch event handling

Touch Event properties
Touch event phases
Touch Point ID

Basic touch events are handled the same way you handle other events, like mouse events, in ActionScript. You can listen for a series of touch events defined by the event type constants in the TouchEvent class.

Note: For multiple touch point input (such as touching a device with more than one finger), the first point of contact dispatches a mouse event and a touch event.

To handle a basic touch event:

Set your application to handle touch events by setting the
flash.ui.Multitouch.inputMode property toMultitouchInputMode.TOUCH_POINT.
Attach an event listener to an instance of a class that inherits properties from the InteractiveObject class, such as Sprite or TextField.
Specify the type of touch event to handle.
Call an event handler function to do something in response to the event.

For example, the following code displays a message when the square drawn on mySprite is tapped on a touch-enabled screen:

Multitouch.inputMode=MultitouchInputMode.TOUCH_POINT; 

var mySprite:Sprite = new Sprite(); 
var myTextField:TextField = new TextField(); 

mySprite.graphics.beginFill(0x336699); 
mySprite.graphics.drawRect(0,0,40,40); 
addChild(mySprite); 

mySprite.addEventListener(TouchEvent.TOUCH_TAP, taphandler); 

function taphandler(evt:TouchEvent): void { 
    myTextField.text = "I've been tapped"; 
    myTextField.y = 50; 
    addChild(myTextField); 
}

Touch Event properties

When an event occurs, an event object is created. The TouchEvent object contains information about the location and conditions of the touch event. You can use the properties of the event object to retrieve that information.

For example, the following code creates a TouchEvent object evt, and then displays the

stageXproperty of the event object (the x-coordinate of the point in the Stage space that the touch occurred) in the text field:

Multitouch.inputMode=MultitouchInputMode.TOUCH_POINT; 

var mySprite:Sprite = new Sprite(); 
var myTextField:TextField = new TextField(); 

mySprite.graphics.beginFill(0x336699); 
mySprite.graphics.drawRect(0,0,40,40); 
addChild(mySprite); 

mySprite.addEventListener(TouchEvent.TOUCH_TAP, taphandler); 

function taphandler(evt:TouchEvent): void { 
myTextField.text = evt.stageX.toString; 
myTextField.y = 50; 
addChild(myTextField); 
}

See the TouchEvent class for the properties available through the event object.

Note: Not all TouchEvent properties are supported in all runtime environments. For example, not all touch-enabled devices are capable or detecting the amount of pressure the user is applying to the touch screen. So, theTouchEvent.pressure property is not supported on those devices. Try testing for specific property support to ensure your application works, and seeTroubleshooting for more information.

Touch event phases

Track touch events through various stages over and outside an InteractiveObject just as you do for mouse events. And, track touch events through the beginning, middle, and end of a touch interaction. The TouchEvent class provides values for handling

touchBegin,

touchMove, and

touchEndevents.

For example, you could use

touchBegin,

touchMove, and

touchEndevents to give the user visual feedback as they touch and move a display object:

Multitouch.inputMode = MultitouchInputMode.TOUCH_POINT; 
var mySprite:Sprite = new Sprite(); 
mySprite.graphics.beginFill(0x336699); 
mySprite.graphics.drawRect(0,0,40,40); 
addChild(mySprite); 
var myTextField:TextField = new TextField(); 
myTextField.width = 200; 
myTextField.height = 20; 
addChild(myTextField); 

mySprite.addEventListener(TouchEvent.TOUCH_BEGIN, onTouchBegin); 
stage.addEventListener(TouchEvent.TOUCH_MOVE, onTouchMove); 
stage.addEventListener(TouchEvent.TOUCH_END, onTouchEnd); 
function onTouchBegin(event:TouchEvent) { 
    myTextField.text = "touch begin" + event.touchPointID; 
} 
function onTouchMove(event:TouchEvent) { 
    myTextField.text = "touch move" + event.touchPointID; 
} 
function onTouchEnd(event:TouchEvent) { 
    myTextField.text = "touch end" + event.touchPointID; 
}