Aller au menu - Aller au contenu

Icône Utiliser le clavier

Par Avatar SuprazZz
Mise à jour : 08/07/2010
4 613 visites depuis 7 jours, dont 109 sur ce chapitre classé 39/786
Voilà une partie très intéressante, puisqu'après l'avoir lue, nous pourrons non seulement passer à la réalisation d'un petit jeu basique, mais vous pourrez commencer à programmer de vrais mini-jeux bien fun. :p

Nous allons étudier l'objet key, et apprendre certaines notions, comme le concept d'écouteurs. Ouvrez bien vos oreilles (sans mauvais jeux de mots :D ).
Retour en haut
Sommaire du chapitre :
Icône du chapitre
Chapitre précédent Sommaire Chapitre suivant
Retour en haut

Les écouteurs

Pour commencer, on va s'intéresser à la notion d'écouteurs.

On essaye... et on se plante



Vous vous souvenez probablement des événements ? Les événements permettent d'exécuter du code selon une action, comme le clic de la souris par exemple :
Code : Actionscript
1
2
3
_root.onMouseDown = function() {
trace('bouton gauche de la souris abaissé');
}


Eh bien dans cet exemple, onMouseDown est un événement.

Curieux comme tous les Zéros, vous allez vous jeter sur l'aide de Flash et voir s'il existe un événement onkeydown pour la classe MovieClip.

Et là : miracle ! Il existe bien un événement onKeyDown. :D
Tout con(tent)s, vous vous empressez de rentrer ce genre de code dans votre animation :

Code : Actionscript
1
2
3
_root.onKeyDown = function() {
trace('Une touche du clavier a été titillée');
}


Et là, enfer et damnation, ça ne fonctionne pas. :(
Donc : retour à l'aide de Flash, et là on voit que ça se complique, car, pour que ce code fonctionne, il faut que le clip ait le focus et pleins d'autres propriétés (chiantes).

Bref, la dernière ligne de l'aide résume bien la situation :
Citation : Aide de Flash
Par conséquent, vous devez utiliser Key.onKeyDown dans la plupart des cas.


Voilà la solution, la classe Key :D

Les écouteurs de Key



L'objet Key ne possède pas d'événements comme les MovieClip, mais des écouteurs. La différence primordiale, c'est que là où un clip ne peut avoir qu'un seul et unique événement, alors que l'objet Key peut avoir un nombre infini d'écouteurs, qui seront tous appelés lors d'une action sur le clavier.

Passons à la réalisation du classique "Hello World" :

Code : Actionscript
1
2
3
4
5
var ecouteur_clavier = new Object(); // On crée un écouteur, qui est en fait un objet quelconque pour l'instant
ecouteur_clavier.onKeyDown = function() { // On écrit une fonction onKeyDown pour cet objet quelconque
     trace("Hello World");
};
Key.addListener(ecouteur_clavier); // On indique que cet objet n'est pas quelconque, mais un écouteur clavier !


Et maintenant que vous avez compris comment ça marchait, vérifions que ce que j'ai dit précédemment sur les écouteurs est vrai (parce que même le prof peut se planter) :

Code : Actionscript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
var ecouteur_clavier:Object = new Object();
var ecouteur_clavier_bis:Object = new Object();
ecouteur_clavier.onKeyDown = function() {
     trace("Hello World");
};
ecouteur_clavier_bis.onKeyDown = function() {
     trace("Hello World (bis)");
};
Key.addListener(ecouteur_clavier);
Key.addListener(ecouteur_clavier_bis);


Et là miracle ! La fenêtre de sortie nous affiche :
Citation : Sortie

Hello World
Hello World (bis)


Les deux écouteurs ont donc été appelés ! :D

Key.onKeyUp



Nous avons déjà vu l'écouteur d'événement Key.onKeyDown, pas besoin donc de le représenter.

Mais il possède aussi son opposé : Key.onKeyUp, qui se déclenche lorsqu'une touche est relâchée.
On l'utilisera comme ceci :
Code : Actionscript
1
2
3
4
5
var ecouteur_clavier:Object = new Object();
ecouteur_clavier.onKeyUp = function() {
     trace('Touche relevée');
};
Key.addListener(ecouteur_clavier);


Rien de bien compliqué !

Pour finir sur les écouteurs, il faut que je vous parle de la fonction Key.removeListener(mon_ecouteur);.
Comme son nom l'indique, elle permet de retirer un écouteur. Pas besoin de vous donner d'exemple, de toute façon on l'utilise presque jamais. :D
Retour en haut

La touche enfoncée

C'est bien beau tout ça, on peut savoir quand une touche est enfoncée ou relâchée, mais pas encore moyen de savoir laquelle ! :p

Les codes de touche



Flash nous offre non pas une méthode pour cela, mais deux ! :lol:

Il existe getAscii() qui renvoie le code ASCII de la touche, et getCode() qui renvoie le code de la touche selon un tableau des valeurs propre à Flash.
La principale différence entre ces deux méthodes, c'est que getAscii() est sensible à la casse (c'est-à-dire qu'elle fait la distinction entre majuscules et minuscules) ; et surtout que getAscii() ne possède des valeurs que pour les caractères. Pour lui, les touches comme "Ctrl", "Alt", "Maj", ... n'ont aucune valeur. Faites donc bien attention !

Voilà un petit code qui permet d'observer les différences des valeurs dans les deux tableaux des caractères.

Code : Actionscript
1
2
3
4
5
6
7
8
var ecouteur_clavier:Object = new Object();
ecouteur_clavier.onKeyDown = function() {
     trace("______________________");
     trace("\t Code : "+Key.getCode());
     trace("\t ASCII: "+Key.getAscii());
     trace("______________________");
};
Key.addListener(ecouteur_clavier);


Et voilà la petite animation qui va bien pour illustrer cette première partie : ICI.


La baballe qui saute



Maintenant qu'on sait tout ça, on va s'amuser à faire notre premier jeu (attendez de le voir avant de pousser des cris de joie :D ).

Créez un clip balle sur la scène principale, et faites-moi un beau code qui va permettre de la faire "sauter" de 100 pixels vers le haut quand on appuie sur la barre d'espace (à vous de vous débrouiller pour connaître la valeur de la barre d'espace). Ensuite, je veux que la balle redescende à sa position d'origine lentement. :D
Hop ! Au boulot ! :p

Solution :Secret (cliquez pour afficher)

Code : Actionscript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
// Initialisation
var y_de_depart = _root.balle._y; //On récupère la position de départ
var ecouteur_clavier:Object = new Object(); // On crée l'écouteur
 
// Saut de la balle
ecouteur_clavier.onKeyDown = function() {
        if (Key.getAscii() == 32) { // 32 est le code de la barre d'espace
                _root.balle._y -= 100; // 100 pixels vers le haut
        }
};
Key.addListener(ecouteur_clavier);
 
// Retombée de la balle
_root.balle.onEnterFrame = function() {
        if (this._y<_root.y_de_depart) {
                this._y += 2;
        }
}


Je suppose que vous avez déjà remarqué qu'un objet qui tombe accélère sa chute au cours du temps. Eh bien simulez-moi ça ! :p

Voilà la solution, en utilisant une variable vitesse :Secret (cliquez pour afficher)

Code : Actionscript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
// Initialisation
var y_de_depart = _root.balle._y; //On récupère la position de départ
var ecouteur_clavier:Object = new Object(); // On crée l'écouteur
 
// Saut de la balle
ecouteur_clavier.onKeyDown = function() {
        if (Key.getAscii() == 32) { // 32 est le code de la barre d'espace
                _root.vitesse = 2;
                _root.balle._y -= 100; // 100 pixels vers le haut
        }
};
Key.addListener(ecouteur_clavier);
 
// Retombée de la balle
_root.balle.onEnterFrame = function() {
        if (this._y<_root.y_de_depart) {
                this._y += _root.vitesse;
                _root.vitesse += 1;
        }
}


Le problème de certaines touches



Flash impose quelques limitations à connaître. Par exemple, il ne peut capturer des entrées clavier que si l'utilisateur a cliqué dans l'animation, si cette dernière est dans une page web.

Maintenant, faisons une petite expérience.
Reprenez votre code qui permet d'afficher le code de la touche enfoncée.
Faites "Ctrl" + "Entrée" pour lancer votre animation.

Appuyez sur "Echap" sur votre clavier : pas de réaction.
Idem pour "Entrée", et pourtant, ce sont des touches indispensables !

Des touches qui ne fonctionnent pas, c'est à priori un problème insoluble. Voici la solution. En fait, une fois dans une page web, tout fonctionnera parfaitement, mais dans "la zone de test" de l'animation de Flash, les touches "Entrée" et "Echap" sont des touches de raccourci : voici l'astuce pour les désactiver :

Image utilisateur
Retour en haut

Les raccourcis des touches

On a vu que chaque touche possédait une correspondance dans le tableau ASCII, ou dans le tableau Code. Mais c'est assez chi*** d'aller chercher à chaque fois à quel code correspond telle ou telle touche. Flash a donc intégré des "raccourcis" pour les touches les plus importantes. Par exemple, dans le code précédent, on avait déterminé que la barre d'espace avait pour valeur en Code : 32.

Eh bien si vous ne le savez pas, utilisez Key.SPACE. C'est un raccourci qui possède la valeur de la barre d'espace dans le tableau Code des caractères. Pour Flash, Key.SPACE = 32.

Voici la liste des correspondances. De nombreuses touches n'ont pas de correspondance avec la table ASCII, tout simplement parce que ce ne sont pas des caractères, mais des touches de contrôle, qui n'ont souvent pas de valeur dans la table ASCII.

ToucheRaccourciCodeASCII
Retour arrière Key.BACKSPACE 8 8
Majuscule Key.SHIFT 16 0
Verrouillage Majuscule Key.CAPSLOCK 20 0
Suppr Key.DELETEKEY 46 127
Echap Key.ESCAPE 27 27
Insert Key.INSERT 45 0
Origine Key.HOME 36 0
Fin Key.END 35 0
Page précédente Key.PGUP 33 0
Page suivante Key.PGDN 34 0
Tabulation Key.TAB 9 9
Espace Key.SPACE 32 32
Ctrl Key.CONTROL 17 0
Entrée Key.ENTER 13 13
Flèche haut Key.UP 38 0
Flèche bas Key.DOWN 40 0
Flèche gauche Key.LEFT 37 0
Flèche droite Key.RIGHT 39 0
Retour en haut

Une condition bien pratique !

Maintenant qu'on connaît les raccourcis, voilà un code qui permettrait de détecter la pression sur la barre d'espace :

Code : Actionscript
1
2
3
4
5
6
7
var ecouteur_clavier:Object = new Object();
ecouteur_clavier.onKeyDown = function() {
        if (Key.getAscii() == Key.SPACE) {
                trace("Barre d'espace appuyée");
        }
};
Key.addListener(ecouteur_clavier);


Je vous présente maintenant la méthode Key.isDown(votre_touche), qui renvoie true si la touche est pressée, ou false dans le cas contraire.
Voilà l'équivalent du code précédent en utilisant cette fonction :

Code : Actionscript
1
2
3
4
5
6
7
var ecouteur_clavier:Object = new Object();
ecouteur_clavier.onKeyDown = function() {
        if (Key.isDown(Key.SPACE)) {
                trace("Barre d'espace appuyée");
        }
};
Key.addListener(ecouteur_clavier);


On ne peut pas vraiment dire que le gain de place soit très perceptible, mais je vous conseille vivement de vous souvenir de cette méthode. ;)
Retour en haut

Trichons avec les écouteurs

Si vous avez bien compris la notion d'écouteurs, alors vous devez avoir intégré que leur seul rôle est d'appeler une fonction s'ils détectent quelque chose, comme la pression d'une touche. Les méthodes Key.getAscii et Key.getCode renvoient le code de la dernière touche pressée. Ce qui veut dire que l'appel à ces fonctions n'a pas besoin d'être parfaitement synchronisé, car même si on appelle la méthode 10 minutes après avoir appuyé sur "Entrée", elle renverra toujours 13.

D'où l'idée qui germe dans vos esprits de Zéros : "pourquoi ne pas se passer d'écouteurs, et effectuer la condition à chaque image (c'est-à-dire presque en continu) ?"

Ce qui nous donnerait par exemple :

Code : Actionscript
1
2
3
4
5
_root.onEnterFrame = function() {
        if (Key.getCode() == Key.SPACE) {
                trace("Barre d'espace appuyée");
        }
};


On lance l'animation, et lors de l'appui sur "Espace", l'animation réagit ! Victoire ! On s'est passé des écouteurs ! :)
Mais, argh, horreur ! La fenêtre de sortie affiche en boucle "Barre d'espace appuyée" sans s'arrêter !

Pourquoi ce comportement ?

Eh bien, lors de l'appui sur la barre d'espace, Key.getCode() reçoit la valeur Key.SPACE. Or, on effectue la condition en boucle : l'affichage de la phrase sera donc en boucle. :(

Pour éviter ce comportement plus qu'ennuyant, il faut utiliser la fonction qui était apparemment si inutile, j'ai nommé : Key.isDown(). :D
En effet, la fonction ne renvoie true si et seulement si la touche est actuellement enfoncée !

Ce qui nous donne :

Code : Actionscript
1
2
3
4
5
_root.onEnterFrame = function() {
        if (Key.isDown(Key.SPACE)) {
                trace("Barre d'espace appuyée");
        }
};
Retour en haut
Après avoir appris à récupérer les entrées clavier, vous devriez être capables de diriger une voiture. Mais comment lui mettre quelques obstacles ? :p C'est le prochain mini-tuto. :)
Chapitre précédent Sommaire Chapitre suivant
Retour en haut

Partager

Retour en haut
13 commentaires pour "Utiliser le clavier"
Note moyenne : 3.24 / 4 (137 votes)
Pseudo Commentaire
Hors ligne sasquatch # Posté le 11/07/2008 à 21:02:00
Avatar

 Bonjour!

Super tuto et chaque élément est amené en son temps de manière à bien comprendre. Meci!

J'ai une question magré tout par rapport au Listener clavier...
Pourquoi dans le code qui suit, la variable qui s'appelle "validation_pasword" (générée par un fichier externe par un bouton ou par la touche "enter" du clavier) n'est interpretée par flash que si j'utilise le bouton et non pas si j'utilise le clavier?


Voici le code:

Code : Actionscript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
sender = new LoadVars(); 
receiver = new LoadVars();

// Receive
receiver.onLoad = function (psuccess){ 
	valid.validation_password.text = this.validation_password;	
        gotoAndPlay("manage_pass"); 
} 
	
function pass_create(){
	sender.newPass = inputPassword.text;
	sender.sendAndLoad ("password_create.php", receiver, "POST"); 
}; 

// Send with button
addPassword.onRelease = function (){ 
	pass_create(); 
}; 

// Send with keyboard 
var listenerKeyboard:Object = new Object(); 
listenerKeyboard.onKeyDown = function(){ 
	if(Key.isDown(Key.ENTER)){ 
		pass_create(); 
		} 
}; 
Key.addListener(listenerKeyboard);


En effet, cela fonctionne bien pour le bouton addPassword mais pas pour l'écouteur clavier.
Or ce n'est pas un problème de variable puisque la variable est bien disponible au niveau du receiver (j'ai vérifié) et cela, qu'on utilise le bouton ou le clavier...

Merci pour le complément d'info!
Hors ligne Boosti # Posté le 25/09/2008 à 23:32:24

Bonjour,
Merci pour ce tuto, j'aimerai savoir s'il est possible de simuler un évenenment KeyPress en actionscript 2 ?? J'ai trouvé un petit script qui le fait en AS3, mais ce dernier n'est pas compatible avec l'utilisation que je veux en faire (sur une tablette multimédia Archos)

D'avance merci
Yann
Hors ligne grate # Posté le 19/01/2009 à 12:45:34

salut
ben,encore un ttttttttttttttttttrès bon tuto, très bien expliqué, merci infiniment
bonne continuation
Hors ligne toto_toto69 # Posté le 13/03/2012 à 18:57:57

Avis : Très bon

A propos d'une utilisation ratée de Flash : Spiral Connect http://spiralconnect.univ-lyon1.fr/
Ce site est l'exemple typique de ce qu'il ne faut pas faire. Ca rame et c'est moche, l'Université Lyon1 a payé très cher pour un boulet inutilisable.
Hors ligne albert_albert69 # Posté le 26/03/2012 à 15:53:20

Avis : Très bon

Je ne sais pas si le lieu est approprié mais je confirme que c'est un site très moche

Voir tous les commentaires