Gestion des événements tactiles

Flash Player 10.1 et les versions ultérieures, Adobe AIR 2 et les versions ultérieures

ActionScript gère les événements tactiles de base comme tout autre événement (les événements de souris, par exemple). Vous pouvez écouter une série d’événements tactiles définis par les constantes de type d’événement de la classe TouchEvent .
Remarque : dans le cas d’une saisie multipoint (toucher de plusieurs doigts un périphérique, par exemple), le premier point de contact distribue un événement de souris et un événement tactile.
Pour gérer un événement tactile de base :

  1. Activez la gestion des événements tactiles dans l’application en définissant la propriété flash.ui.Multitouch.inputMode sur MultitouchInputMode.TOUCH_POINT .

  2. Associez un écouteur d’événements à une occurrence de classe qui hérite des propriétés de la classe InteractiveObject (Sprite ou TextField, par exemple).

  3. Indiquez le type d’événement tactile à gérer.

  4. Appelez une fonction de gestionnaire d’événement en réponse à l’événement.

Le code suivant affiche par exemple un message lorsque l’utilisateur appuie brièvement sur le carré dessiné sur mySprite sur un écran tactile : 

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

Propriétés des événements tactiles

Lorsqu’il se produit un événement, un objet d’événement est créé. L’objet TouchEvent contient des informations sur l’emplacement et les conditions de l’événement tactile. Vous disposez des propriétés de l’objet d’événement pour récupérer ces informations.

Le code suivant crée par exemple un objet TouchEvent evt , puis affiche la propriété stageX de l’objet d’événement (la coordonnée x du point dans l’espace de scène où s’est produite l’action tactile) dans le champ de texte : 

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); 
}
Pour plus d’informations sur les propriétés disponibles via l’objet d’événement, voir la classe TouchEvent .
Remarque : certains environnements d’exécution ne prennent pas en charge toutes les propriétés TouchEvent. Ainsi, certains périphériques tactiles ne sont pas en mesure de détecter la pression appliquée par l’utilisateur sur l’écran tactile. Ils ne prennent par conséquent pas en charge la propriété TouchEvent.pressure . Essayez de tester la prise en charge de propriétés spécifiques pour assurer le fonctionnement de l’application. Pour plus d’informations, voir Résolution des problèmes .

Phases d’un événement tactile

Vous pouvez suivre les différentes phases des événements tactiles se produisant sur un objet interactif, mais aussi en dehors, exactement comme vous le feriez pour des événements de souris. Vous pouvez également suivre les événements tactiles du début à la fin d’une interaction tactile. La classe TouchEvent comporte des valeurs de gestion des événements touchBegin , touchMove et touchEnd .

Vous disposez par exemple des événements touchBegin , touchMove et touchEnd pour proposer à l’utilisateur un feedback visuel lorsqu’il touche et déplace un objet d’affichage : 

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; 
}
Remarque : à l’encontre des écouteurs chargés de déplacer l’événement tactile et de mettre fin à celui-ci, l’écouteur d’événements tactiles initial est associé à mySprite. Si l’objet d’affichage précède le doigt de l’utilisateur ou le périphérique de pointage, la scène continue à écouter l’événement tactile.

ID de point tactile

La propriété TouchEvent.touchPointID est un composant fondamental de la programmation d’applications qui réagissent à la saisie tactile. Le moteur d’exécution de Flash affecte à chaque point tactile une valeur touchPointID unique. Lorsqu’une application réagit aux phases ou au mouvement d’une saisie tactile, vérifiez la valeur touchPointID avant de gérer l’événement. Les méthodes de déplacement par glissement de la saisie tactile de la classe Sprite utilisent la propriété touchPointID en tant que paramètre pour assurer le traitement de l’occurrence de saisie correcte. La propriété touchPointID vérifie qu’un gestionnaire d’événement réagit au point tactile approprié. Le gestionnaire d’événement réagit sinon à n’importe quelle occurrence du type d’événement tactile (tous les événements touchMove , par exemple) sur le périphérique, d’où un comportement imprévisible. La propriété est particulièrement importante lorsque l’utilisateur fait glisser des objets.

La propriété touchPointID permet de gérer une séquence entière d’actions tactiles. Une séquence d’actions tactile se compose d’un événement touchBegin , de zéro, un ou plusieurs événements touchMove et d’un événement touchEnd , qui possèdent tous la même valeur touchPointID .

L’exemple suivant définit une variable touchMoveID , qui vérifie que la valeur touchPointID est correcte avant de réagir à un événement de mouvement tactile. Si tel n’est pas le cas, d’autres actions tactiles déclenchent également le gestionnaire d’événement. Notez que les écouteurs associés aux phases de déplacement et de fin sont situés sur la scène, plutôt que l’objet d’affichage. La scène écoute les phases de déplacement et de fin au cas où l’action tactile de l’utilisateur dépasserait les limites de l’objet d’affichage. 
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(); 
addChild(myTextField); 
myTextField.width = 200; 
myTextField.height = 20; 
var touchMoveID:int = 0; 
 
mySprite.addEventListener(TouchEvent.TOUCH_BEGIN, onTouchBegin); 
function onTouchBegin(event:TouchEvent) { 
    if(touchMoveID != 0) { 
        myTextField.text = "already moving. ignoring new touch";     
        return; 
    } 
    touchMoveID = event.touchPointID; 
 
    myTextField.text = "touch begin" + event.touchPointID; 
    stage.addEventListener(TouchEvent.TOUCH_MOVE, onTouchMove); 
    stage.addEventListener(TouchEvent.TOUCH_END, onTouchEnd); 
} 
function onTouchMove(event:TouchEvent) { 
    if(event.touchPointID != touchMoveID) { 
        myTextField.text = "ignoring unrelated touch"; 
        return; 
    } 
    mySprite.x = event.stageX; 
    mySprite.y = event.stageY; 
    myTextField.text = "touch move" + event.touchPointID; 
} 
function onTouchEnd(event:TouchEvent) { 
    if(event.touchPointID != touchMoveID) { 
        myTextField.text = "ignoring unrelated touch end"; 
        return; 
    } 
    touchMoveID = 0; 
    stage.removeEventListener(TouchEvent.TOUCH_MOVE, onTouchMove); 
    stage.removeEventListener(TouchEvent.TOUCH_END, onTouchEnd); 
    myTextField.text = "touch end" + event.touchPointID; 
}