AtChA's Blog ! Un blog tendance sur les nouvelles technologies et la création Web

    Bonjour à tous et bienvenue en ce début de week end.
    Aujourdhui nous revenons sur l'ActionScript 3 et sur le dessin vectoriel. Je vous ai concocté une petite application flash qui va nous permettre de dessiner une ligne noir toute simple et de pouvoir l'effacer par clique sur un bouton prévu à cet effet.

    Pour ce qui est du code, j'ai essayer de commenter au mieux pour que vous compreniez le plus facilement possible :

 // Importation des classes événement, évènement souris et scène
 import flash.events.Event;
 import flash.events.MouseEvent;
 import flash.display.Stage;
 
 // Ajout des évènements souris et de la fonction correspondante à la scène
 stage.addEventListener( MouseEvent.MOUSE_DOWN, startDessine );
 stage.addEventListener( MouseEvent.MOUSE_UP, stopDessine );
 btnClean.addEventListener( MouseEvent.CLICK, clean );
 
 // Définition du style de la ligne
 this.graphics.lineStyle( 10, 0, 1 );
 
 // Fonction qui permet de dessiner à l'appuie du clique gauche de la souris
 function startDessine( pEvt:MouseEvent ) {
     this.graphics.moveTo( this.mouseX, this.mouseY );     
     stage.addEventListener( MouseEvent.MOUSE_MOVE, onDessine );
 }
 
 // Fonction qui permet d'arréter de dessiner au relachement du clique gauche de la souris
 function stopDessine( pEvt:MouseEvent ) {
     stage.removeEventListener( MouseEvent.MOUSE_MOVE, onDessine );
 }
 
 // fonction de dessin (définition des variable de position de la souris, utilisation de la fonction dessine)
 function onDessine( pEvt:MouseEvent ) {
     var posX:Number = pEvt.localX;
     var posY:Number = pEvt.localY;
     //----------------------------------------------------
     dessine( this, posX, posY );
     pEvt.updateAfterEvent();
 }
 
 // Fonction qui récupère les positions de la souris pour créer une ligne
 function dessine( cont:Sprite, posX:Number, posY:Number ) {
     cont.graphics.lineTo( posX, posY );
 }
 
 // Fonction pour effacer le dessin (on redéfinit le style de la ligne pour pouvoir redessiner après)
 function clean( pEvt:MouseEvent ) {
    this.graphics.clear();
    this.graphics.lineStyle( 10, 0, 1 );
 }
 
    Tout se joue grâce aux évènements de la souris, le principe est simple on se sert de la méthode addEventListener pour lier un évènement et une fonction à un objet. On créé ensuite les fonctions de dessin récupérant les informations de positions de la souris pour dessiner et enfin la fonction qui associe l'évènement click de la souris à la fonction clean qui va clear la zone.

    Voilà donc pour aujourdhui avec l'ActionScript 3, je continuerai ce petit tutoriel au fur et à mesure en rajoutant des options, telles que taille de la ligne, changement de la couleur grâce à une palette de couleur et changement de l'apha. Peut être d'autres options qui sait xD.

    Je vous laisse maintenant voir par vous même le fonctionnement de ce programme en dessous :






    J'espère que ce petit tuto vous plait et que vous en apprenez un peu plus sur ActionScript 3 et l'API de dessin.
J'espère que ce petit tuto vous plais et que vous en apprenez un peu plus sur ActionScript et l'API de dessin.