Artkabis

Salut !!!
Si vous êtes membre du forum, vous pouvez vous connecter.
Au cas contraire vous avez la possibilité de créer gratuitement un compte...

Forum d'entraide en graphisme et webdesign. Formation pour Flash, Photoshop et les langages: as2, as3, html, php, javascript, etc.


    Les touches du pavé numerique (as3)

    Partagez

    artkabis
    Fondateur
    Fondateur

    Messages : : 4545
    Age : : 32
    Logiciels : Logiciels : : Photoshop CS4, Flash CS4, Indesign CS4, After Effects CS4, Illustrator CS4, Premier Pro CS4, Encore CS4, Flexbuilder 3, Papervision 3D, Camtasia, Captivate, InDesign, Swift 3d, Illustrator, Dreamweaver CS3, Blender, Swift 3D, WampServer.
    Date d'inscription : 11/09/2008

    Capacités en graphisme
    Capacité graph:
    9/10  (9/10)

    Les touches du pavé numerique (as3)

    Message par artkabis le Mer 10 Déc - 21:47

    .::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.


    Dernière édition par artkabis le Jeu 11 Déc - 11:49, édité 2 fois

    artkabis
    Fondateur
    Fondateur

    Messages : : 4545
    Age : : 32
    Logiciels : Logiciels : : Photoshop CS4, Flash CS4, Indesign CS4, After Effects CS4, Illustrator CS4, Premier Pro CS4, Encore CS4, Flexbuilder 3, Papervision 3D, Camtasia, Captivate, InDesign, Swift 3d, Illustrator, Dreamweaver CS3, Blender, Swift 3D, WampServer.
    Date d'inscription : 11/09/2008

    Capacités en graphisme
    Capacité graph:
    9/10  (9/10)

    Re: Les touches du pavé numerique (as3)

    Message par artkabis le Mer 10 Déc - 23:06

    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:

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

    seven
    Nouveau membre
    Nouveau membre

    Messages : : 12
    Age : : 31
    Logiciels : Logiciels : : photoshop flash illustrator Dreamweather
    Date d'inscription : 13/08/2009

    Capacités en graphisme
    Capacité graph:
    0/0  (0/0)

    Re: Les touches du pavé numerique (as3)

    Message par seven le Dim 29 Nov - 11:45

    Pratiques les minis apllications !! merci bien pour commencer

    Plumaillon
    Ceinture jaune
    Ceinture jaune

    Messages : : 274
    Age : : 28
    Date d'inscription : 28/03/2009

    Capacités en graphisme
    Capacité graph:
    0/0  (0/0)

    Re: Les touches du pavé numerique (as3)

    Message par Plumaillon le Dim 29 Nov - 15:38

    Excellent les tableaux pour avoir les codes.
    Merci!

    Demeter
    Ancien staff

    Messages : : 4569
    Age : : 45
    Logiciels : Logiciels : : Quelles logiciel utilisez vous?
    Logiciel Adobe Photoshop, flash, dreamweaver, the gimp, blender 3D, visual studio 2010, expression studio 4, Aptana studio 1.5, Illustrator, indesign.

    Date d'inscription : 14/07/2009

    Capacités en graphisme
    Capacité graph:
    0/0  (0/0)

    Re: Les touches du pavé numerique (as3)

    Message par Demeter le Dim 29 Nov - 19:09

    sa ne pouvais pas mieux tomber un grand merci art

    artkabis
    Fondateur
    Fondateur

    Messages : : 4545
    Age : : 32
    Logiciels : Logiciels : : Photoshop CS4, Flash CS4, Indesign CS4, After Effects CS4, Illustrator CS4, Premier Pro CS4, Encore CS4, Flexbuilder 3, Papervision 3D, Camtasia, Captivate, InDesign, Swift 3d, Illustrator, Dreamweaver CS3, Blender, Swift 3D, WampServer.
    Date d'inscription : 11/09/2008

    Capacités en graphisme
    Capacité graph:
    9/10  (9/10)

    Re: Les touches du pavé numerique (as3)

    Message par artkabis le Lun 30 Nov - 13:28

    Mais c'est avec plaisir !!!!


    _________________
    J'me fais de la pub et na tongue

    Contenu sponsorisé

    Re: Les touches du pavé numerique (as3)

    Message par Contenu sponsorisé Aujourd'hui à 16:17


      La date/heure actuelle est Mer 7 Déc - 16:17