.::Les dessous du pavé numerique::.

Il y a quelques temps, on m'a demandé comment il était possible d'utiliser les touches du pavé numérique pour déplacer un objet de la scène. Voici donc un mini tutoriel sur l'utilisation des keyCode. Nous allons voir différentes possibilités de la plus facile à la plus complexe.

Contexte simple

Ce contexte nous permet simplement d'attribuer un déplacement à un carré créé sur la scène grâce aux touches du pavé numérique. Commencez donc par créer un nouveau carré, puis convertissez le en clip. Une fois le clip créé, donné lui un nom d'occurrence, dans notre cas nous allons le nommer "carre" sans accent.

Voici un exemple:
key_simple.swf
key_simple.fla

Créé un nouveau calque au-dessus de celui qui contient notre fameux carré et nommez le "AS". Voici le code à placer dans la partie code, je rappelle que, pour ouvrir le panneau des actions, vous devez soit: faire "F9" soit faire: Fenetre>>actions.

Copiez ce code et placez le dans le calque approprié:

Code:


//déplacer un objet simplement
//on créé un écouteur de stage pour savoir si un bouton est préssé
stage.addEventListener(KeyboardEvent.KEY_DOWN,avancer);
//on créé la fonction "avancer"
function avancer(evt:KeyboardEvent) {
         //gauche::::Keyboard.LEFT>>37
            if(evt.keyCode==37) carre.x = carre.x-3;
         //droite::::Keyboard.RIGHT>>39
            if(evt.keyCode==39) carre.x = carre.x+3;
         //bas::::Keyboard.DOWN>>40
         if(evt.keyCode==40) carre.y = carre.y+3;
         //haut::::Keyboard.UP>>38
         if(evt.keyCode==38) carre.y = carre.y-3;
}


voilà, vous pouvez faire un "CTRL+ENTREE" pour tester l'animation, si vous utilisez les touches du pavé numérique, vous verrez que le carré ce déplacera en fonction de la touche enfoncée.

Contexte basic:

Dans ce deuxième contexte, nous allons créer nous-même notre forme, vous pouvez donc ouvrir un nouveau document. Comme je viens de le dire, cette fois-ci vous n'aurez plus qu'à copier le code ci-dessous dans un calque situé sur la scène principale.

Voici un exemple:
key_basic.swf
key_basic.fla

Code:


// création d'un nouveau symbole
var rectangle:Sprite = new Sprite();
// couleur de remplissage du rectangle
rectangle.graphics.beginFill(0x00FF00);
// taille est position du rectangle
rectangle.graphics.drawRect(50, 200, 100, 30);
// création de la fonction de deplacement
function deplacer(evt:KeyboardEvent):void
{
   // Vérifie si présence d’IME (éditeur de méthode d’entrée) car les touches peuvent ne pas être renvoyées dans ce cas
   if (Capabilities.hasIME) {
            IME.enabled = false;
         }

    // Test de la touche utilisée
    switch(evt.keyCode)
    {
      // déplacement vers la gauche
      case Keyboard.LEFT:
          evt.target.x-=5;
          break;
      // déplacement vers le haut
      case Keyboard.UP:
          evt.target.y-=5;
          break;
      // déplacement vers la droite
      case Keyboard.RIGHT:
          evt.target.x+=5;
          break;
      // déplacement vers le bas
      case Keyboard.DOWN:
          evt.target.y+=5;
          break;
      // pas de déplacement
      default :
          evt.target.x+=0;
    }
}
// Affichage du rectangle
this.addChild(rectangle);
// Focus sur le rectangle pour qu'il puisse être actif
stage.stageFocusRect = false; // Le rectangle jaune du focus est supprimé pour tous les objets
stage.focus = rectangle;
// Ecouteur de l'événement keyDown sur le rectangle
rectangle.addEventListener(KeyboardEvent.KEY_DOWN, deplacer);


En testant l'animation avec "CTRL+ENTRE" vous verrez que la forme et automatiquement créé et qu'il est aussi possible de la déplacer grâce aux touches du pavé numérique, remarquez aussi qu'il n'est pas encore possible d'utiliser simultanément plusieurs touches du pavé. Voyons comment il est possible d'ajouter cette fonctionnalité grâce au prochain contexte:

Contexte avancé:
Dans ce contexte vous verrez que les touches du pavé numérique peuvent s'additionner pour déplacer l'objet en diagonale.

Voici un exemple:
key_avance.swf
key_avance.fla

Commencez par créer un nouveau document Flash AS3, la taille de la scène importe peu.

Il nous faut ensuite créer un nouveau symbole, pour ce faire, créez un carré avec l'outil approprié et une fois la totalité de la forme sélectionné convertissez le en clip ( F8 ) . Donnez-lui l'identifiant "carre", puis cochez "exporter pour actionscript" situé dans l'onglet "avancé". Normalement le nom de liaison sera créé automatiquement, vous devrez changer "carre" par "Carre" avec une majuscule. Une fois ceci fait, appuyez sur "ok", un message vous avertie qu'une classe vient d'être auto-généré.

Vous pouvez maintenant supprimer le symbole situé sur la scène, car nous l'afficherons par l'intermédiaire du code actionscript.

Nommez le calque (il n'y en a qu'un) "AS" et ouvrez le panneau des actions (F9) .

Nous allons ensuite coller ce code:

Code:


//on  prépare l'apparition du carre sur la scéne
var carre:Carre = new Carre;
//on définit les variable pour les différentes touches
var droite:Boolean    = new Boolean ();
var haut:Boolean    = new Boolean ();
var gauche:Boolean    = new Boolean ();
var bas:Boolean    = new Boolean ();

//on créé une fonction bouger() pour definir les actions
//des touches du pavé numerique
function bouger() {
  if (droite) carre.x++;
  if (haut)  carre.y--;
  if (gauche) carre.x--;
  if (bas)    carre.y++;
}
//on créé une fonction pour activer les touches du pavé numerique
function activ(evt:KeyboardEvent) {
  if (evt.keyCode == Keyboard.UP)    haut=true;
  if (evt.keyCode == Keyboard.RIGHT) droite=true;
  if (evt.keyCode == Keyboard.LEFT)  gauche=true;
  if (evt.keyCode == Keyboard.DOWN)  bas=true;
}
//on créé une fonction pour desactiver les touches du pavé numerique
function desactiv(evt:KeyboardEvent) {
  if (evt.keyCode == Keyboard.UP)    haut=false;
  if (evt.keyCode == Keyboard.RIGHT) droite=false;
  if (evt.keyCode == Keyboard.LEFT)  gauche=false;
  if (evt.keyCode == Keyboard.DOWN)  bas=false;
}
//on créé notre fonction pour initialiser tout les éléments
function init():void{
     this.addChild(carre);//on affiche le carre sur la scéne
     stage.stageFocusRect = false; // on supprime les contour jaune du focus
     stage.focus = carre; // on active le focus pour que le carré soit actif
   
   //on créé les écouteurs pour savoir si les touche du pavé numerique sont enfoncé
   //si oui on applique la fonction activ()
     carre.addEventListener(KeyboardEvent.KEY_DOWN, activ);
   //sinon on applique la fonction desactiv()
     carre.addEventListener(KeyboardEvent.KEY_UP, desactiv);
   // on fait appel à la fonction bouger()
   setInterval(bouger, 5);
}
//on initialise notre code
init();


Voilà, grâce à ces trois contextes, vous pourrez adapter le code selon vos besoins, si vous avez des questions concernant les différents codes, n'hésitez pas à me le faire savoir.

Pour ceux qui s'intéresseraient au keyCode, voici deux petites applications qui vous permettront de récupérer le code Ascii des touches du pavé numérique. Je les ai préparés en as2, mais aussi en as3, comme ça, pas de jaloux.

Les voici:

...............................

Pratiques les minis apllications !! merci bien pour commencer

Excellent les tableaux pour avoir les codes.
Merci!

sa ne pouvais pas mieux tomber un grand merci art

Mais c'est avec plaisir !!!!