Création d'interactivité avec ActionScript > Création d'interactivité complexe > Capture des pressions sur les touches

 

Capture des pressions sur les touches

Vous pouvez utiliser les méthodes de l'objet intégré Key pour détecter la dernière touche enfoncée par l'utilisateur. L'objet Key ne requiert pas de fonction constructeur ; pour utiliser ses méthodes, vous appellerez simplement l'objet même, comme dans l'exemple suivant : 

Key.getCode();

Vous pouvez obtenir les codes des touches ou les valeurs ASCII des touches enfoncées :

Pour obtenir le code de la dernière touche enfoncée par l'utilisateur, utilisez la méthode getCode.

Pour obtenir la valeur ASCII de la dernière touche enfoncée par l'utilisateur, utilisez la méthode getAscii.

Un code est affecté à chaque touche physique du clavier. Par exemple, la touche Flèche gauche possède le code virtuel de touche 37. L'utilisation d'un code de touche vous permet de vous assurer que les commandes de votre animation sont les mêmes sur chaque clavier, quelle que soit la langue ou la plate-forme utilisée.

Les valeurs ASCII sont affectées aux 127 premiers caractères de chaque jeu de caractères. Les valeurs ASCII fournissent des informations sur un caractère affiché à l'écran. Par exemple, la lettre « A » et la lettre « a » ont des valeurs ASCII différentes.

Pour décider des touches que vous allez utiliser et déterminer leurs codes, utilisez l'une des approches suivantes :

La liste des codes de touches est publiée dans Touches du clavier et valeurs de code correspondantes.

Utilisez une constante d'objet Key. Dans la boîte à outils Actions, cliquez sur la catégorie Objets, puis sur Animation, puis sur Key, puis sur Constantes.

Affectez l'action de clip suivante, puis choisissez Contrôle > Tester l'animation et appuyez sur la touche choisie :

 
onClipEvent(keyDown) {
	trace(Key.getCode());
}

Le code de la touche souhaitée apparaît dans la fenêtre Sortie.

Les méthodes de l'objet Key sont fréquemment placées dans un gestionnaire d'événement. Dans l'animation suivante, la voiture est déplacée à l'aide des touches fléchées. La méthode Key.isDown indique si la touche enfoncée est la flèche vers la droite, la gauche, le haut ou le bas. Le gestionnaire d'événement, onEnterFrame, détermine la valeur de Key.isDown(codeDeTouche) à partir des instructions if. En fonction de la valeur, le gestionnaire indique à Flash Player de mettre à jour la position de la voiture et d'afficher sa direction.

La procédure suivante indique comment capturer les pressions sur les touches, en utilisant une voiture comme exemple.

Pour créer un clip activé via le clavier :

1

Sur la scène, créez un clip qui se déplacera en réponse aux touches fléchées du clavier.

Dans cet exemple, le nom de l'occurrence de clip est car.

2

Sur la scène, créez un champ de texte dynamique qui sera mis à jour en fonction de la direction de la voiture. Utilisez l'inspecteur des propriétés pour lui donner un nom de variable de display.

Remarque   Ne confondez pas le nom des variables avec celui des occurrences.

3

Sélectionnez l'image 1 dans le scénario, puis choisissez Fenêtre > Actions pour ouvrir le panneau Actions si ce dernier n'est pas déjà visible.

4

Pour définir la vitesse à laquelle la voiture se déplace à l'écran après chaque pression sur une touche, cliquez sur la catégorie Actions dans la boîte à outils du panneau Actions, puis sur Variables et double-cliquez sur set variable et nommez enfin la variable speed. Activez ensuite l'option Expression pour Valeur et entrez une valeur de 10.

5

Pour créer le gestionnaire d'événement qui traite l'événement et le comportement qui en résulte, dans la boîte à outils Actions, cliquez sur la catégorie Objets, puis sur Animation, puis sur MovieClip, puis sur Evénements et double-cliquez sur onEnterFrame. Entrez car comme nom d'objet.

6

Cliquez dans le champ Paramètres afin d'y placer le point d'insertion. Cliquez ensuite sur la catégorie Actions, puis sur Variables et double-cliquez sur with. Entrez car comme nom d'objet.

Le code devrait avoir cette forme :

 
speed = 10;
car.onEnterFrame = function() {
    with (car) {
    }
};

7

Pour ajouter les conditions au gestionnaire d'événement, dans la boîte à outils Actions, cliquez sur la catégorie Actions, puis sur Conditions/boucles et double-cliquez sur if.

8

Cliquez dans le champ Condition afin d'y placer le point d'insertion. Cliquez sur la catégorie Objets, puis sur Animation, puis sur Key, puis sur Méthodes, et double-cliquez sur isDown. Cliquez ensuite sur la catégorie Objets, puis sur Animation, puis sur Key, puis sur Constantes et double-cliquez sur RIGHT pour le code de touche.

 
speed = 10;
car.onEnterFrame = function() {
    with (car) {
        if (Key.isDown(Key.RIGHT)) {
        }
    }
};

Ensuite, l'instruction if doit recevoir des paramètres au cas où Key.isDown(Key.RIGHT) est true. En d'autres termes, si la touche portant une flèche vers la droite est enfoncée, la voiture doit tourner à droite et la valeur de la propriété _x doit augmenter. En outre, les mots Flèche droite doivent être affichés dans l'animation, ce qui exige la mise à jour du champ de texte dynamique.

9

Pour entrer les instructions conditionnelles, dans la boîte à outils Actions, cliquez sur la catégorie Opérateurs, puis sur Affectation, et faites glisser += sur la ligne 5 du volet Script (entre les parenthèses de l'instruction if). Entrez le code suivant dans le champ Expression :

 
_x += speed

10

Pour empêcher la voiture de sortir du bord droit de l'animation, ajoutez une instruction if imbriquée. Dans la boîte à outils Actions, cliquez sur la catégorie Actions, puis sur Conditions/boucles, et faites glisser if sur la ligne 6 du volet Script. Entrez le code suivant dans le champ Condition :

 
_x > 339

11

Cliquez sur la catégorie Actions, puis sur Variables et double-cliquez sur set variable. Entrez _x = 339 dans le champ Expression.

12

Pour mettre à jour le champ de texte dynamique, dans la boîte à outils Actions, cliquez sur la catégorie Actions, puis sur Variables et faites glisser set variable sur la ligne 9 du volet Script. Entrez _root.display dans le champ Variable et Flèche droite dans le champ Valeur.

Le code devrait avoir cette forme :

 
speed = 10;
car.onEnterFrame = function() {
	with (car) {
		if (Key.isDown(Key.RIGHT)) {
			_x += speed;
			if (_x >= 339) {
				_x = 339;
			}
			_root.display = "Flèche droite";
		}
	}
};

Vous pouvez à présent tester l'animation (Contrôle > Tester l'animation), mais la voiture ne se déplacera que vers la droite.

13

Pour ajouter le mouvement vers la gauche, le haut et le bas, dans la boîte à outils Actions, cliquez sur la catégorie Actions, puis sur Conditions/boucles et faites glisser else if sur la ligne 10 du volet Script. Répétez ensuite les étapes 8 à 11 en modifiant les détails des paramètres comme dans le code suivant:

 
} else if (Key.isDown(Key.LEFT)) {
	_x -= speed;
	if (_x < 60) {
		_x = 60;
	}
	_root.display = "Flèche gauche";
} else if (Key.isDown(Key.UP)) {
	_y -= speed;
	if (_y < 114) {
		_y = 114;
	}
	_root.display = "Flèche haut";
} else if (Key.isDown(Key.DOWN)) {
	_y += speed;
	if (_y > 244) {
		_y = 244;
	}
	_root.display = "Flèche bas";
}

Veillez à placer le code sur les lignes appropriées (10 à 28). La parenthèse qui ferme l'instruction if extérieure et celle qui ferme le gestionnaire d'événement doivent suivre sur les lignes 29 et 30.

14

Choisissez Contrôle > Tester l'animation pour tester l'animation.

Pour plus d'informations sur les méthodes de l'objet Key, consultez l'entrée Key (objet) dans le dictionnaire ActionScript.