Overblog Suivre ce blog
Editer l'article Administration Créer mon blog
19 janvier 2008 6 19 /01 /janvier /2008 16:08
    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.

Partager cet article

Repost 0
Published by AtChA - dans Programmation
commenter cet article

commentaires

Nimo 19/01/2008 19:41

Super tutos !!! le flash, ca me donne trop envie de m'y mettre, surtout avec ce peut de ligne de code et le resultat final : IMPRESSIONNANT ^-^

 395149_10150485772854288_664024287_8595839_1160149945_n.jpg

Bonjour et bienvenue.

Je mé présente AtChA.

Je suis Web designer, développeur front end, community manager, gamer et donc forcément geek. Je suis basé à Poitiers.

Né dans les années 80, j'ai grandis avec la nouvelle technologie et ce blog est là pour apporter des connaissances et de la distractions aux âmes qui s'aventurent par ici.

Recherche

Catégories