[Adobe Flash CS5] La fonction "déplacer/lacher" ("drag&drop" en anglais)

Ceci est un tuto concernant Adobe flash pro CS5, la version que j'utilise est en anglaise.

Je ne suis pas un professionnel d'ailleurs ce que j'ai acquis c'est seulement par auto-formation, comme ce que la plupart d'entre vous on fait pour apprendre à utiliser leurs logiciel de dessin comme gimp ou Paint Tool SAI, ce qui veut dire que mes expliquations peuvent peut être paraître flou et incompréhensible par moment, alors n'hésitez pas à me poser des questions,.

Ce mini tuto est le compte rendu d'un live fait sur la chaine livestream de TheBigKirby.


La fonction déplacer/lacher est une fonction qui permet de porter un objet en laissant le clique gauche enfoncé tout en déplaçant la souris, et de lacher cet objet lorsque le clique est relaché.

Exemple :




Ceci n'est un exemple d'utilisation de cette fonction, avec un peu d'imagination il est possible de faire de petites applications originales (je vous laisse chercher ...).


Pour arriver au résultat ci-dessus c'est très simple, on va procéder par étape, tout d'abord lancer votre logiciel Adobe Flash en créant un nouveau projet en Action Script 3.

commençons par réaliser un simple carré vert à l'aide de l'outil forme :


Une fois le carré créée, il faut transformer son dessin du carré en "objet" que l'on pourrat manipuler par code, pour cela c'est très simple:
selectionnez votre dessin en entier, soit en cliquant sur la frame dans la barre de scénarion ou tout simplement en laissant le clique appuyé et encerclerle carré à l'aide de l'outil de selection.
Puis faire un clique droit dessus pour faire apparaitre le menu contextuel,
selectionnez avec le clique gauche "convertir en symbole" afin de transformer votre dessin en objet.


Une fois votre dessin converti en symbole, cliquez sur le bouton ok de la fenetre qui s'ouvre pour passer a l'étape suivante :


Il va falloir donner un nom a votre objet ! Pour cela ouvrez votre fenêtre de propriété en cliquant en haut sur "fenêtre">"propriété" , puis faites un clique gauche sur votre carré.
Dans le champs de saisie nom d'instance, cliquez dessus et entrer le nom de l'objet, pour l'exemple on va mettre "carré".



Lorsque vous aurez saisie le nom de votre objet, il est temps de mettre un peu de code, c'est très rapide !
Créer un nouveau calque en cliquant sur le raccourcis mis à disposition dans la barre de scénario, et sur la frame vide faite un clique droite dessus>action afin d'ouvrir un editeur de code (qui s'apparente a un éditeur de texte )


Vous arriverez sur un page blanche, ya plus qu'à insérer le code commenté que je vous fournis en faisant un copié/collé :

Code:

import flash.events.MouseEvent;
// importation de truque indispensable pour faire fonctionner les evenments liés a la souris


carré.addEventListener(MouseEvent.MOUSE_DOWN, porter);
//1-carré c'est le nom donné au symbole créé auparavant
//2-création d'un écouteur quand on laisse le clique gauche de la souris appuyé (MOUSE_DOWN)
//3-on fait ensuite appel à la fonction "porter", c'est là dedans que l'on écrira ce qu'il va se passer lorsque l'on clique
carré.addEventListener(MouseEvent.MOUSE_UP, lacher);
//idem que ci-dessus, sauf que cette fois-ci c'est lorsque que l'on relache le clique de la souris (MOUSE_UP)
//et que l'évenement appelé c'est "lacher"

function porter(pEvt: MouseEvent):void{
   //ici c'est la fonction "porter" pour permettre de porter l'objet il faut entrer la ligne ci-dessous
      carré.startDrag();
      //on retrouve le nom de l'objet "carré" suivi d'un fonction interne de l biblhotèque du javascript, la fonction "startDrag()"
}
function lacher(pEvt: MouseEvent):void{
   //ici c'est la fonction lacher, le code dessous permet de relacher l'objet qui est en court de déplacement grâce à la fonction "startDrag()"
      stopDrag();
}


ce qui donne ceci dans la page qui doit contenir le code :

Si vous avez des questions, n'hésitez pas

Oh il à mit carré ♥
C'est un bon pti tuto dark, bravo ^^

Bonne initiative !
En plus tu as eu la bonne idée de ne pas écrire à la main =p

Bon j'ai édité pour mettre une nouvelle image du code inséré dans la page, par contre peut être que c'est un peu pixelisé
Dis moi si tu veut un screen plus propre

Merci pour ce post Dark
Ces très claire