Flash : Drag'n'Drop

le 16 juin 2009 • Flash • par Dawlin

Bonjour, aujourd'hui, totalement en dehors de l'apprentissage petit à petit du flash (je vous conseille donc de lire les tutoriels précédents avant) nous allons apprendre à utiliser la fonction StartDrag(); autrement dit, faire un glisser déposer (Drag : traîner Drop : déposer)

C'est méga super simple, vous allez tout piger bien vite.

J'ai pris ici mon image de la peluche en forme de Tofu de ma copine (j'avais que ça sous la main) et on va s'amuser à la drager (La peluche, pas ma copine)

Donc, on l'importe dans flash soit avec un glisser-déposer soit avec CTRL+R (importer dans l'animation) et on la convertit en bouton, qu'on appelle n'importe comment vu que de toute façon on s'en fiche.

Par contre, en nom d'occurrence on va l'appeler "btn", comme un bouton. On pourrait l'appeller "caca", mais sinon on s'y perdrait...

Enfin bref, en action de ce bouton, on va lui mettre "quand je clique, ça colle à la souris, quand je relâche, ça décolle"...

Pour coller, on va utiliser la fonction startDrag(); et les propriétés de _xmouse et _ymouse. Comme leurs noms l'indiquent, ces fonctions sont les coordonnées en _x et en _y de la souris.


//Quand je clique
on(press)
{
//on amène le bouton aux mêmes coordonées que la souris
	btn._x = _xmouse;
	btn._y = _ymouse;
//puis on le colle à la souris
	startDrag(btn);
}
//Quand je relâche.
on(release)
{
//On le décolle
	stopDrag();
}

Note : startDrag() a besoin d'un nom d'occurence (on lui dit de se coller à "btn") alors que stopDrag() non, il arrête TOUS les drag.

L'ennui n° 1, c'est que c'est beaucoup de code de mettre btn._x = _xmouse ... etc... donc on va utiliser un super paramètre de la fonction startDrag qui est le "Locker".


startDrag(btn,true);

Ce "true" qui veut dire "vrai" va dire que oui, je veux que l'origine de mon symbole se colle à la souris. C'est en 4 lettres le remplacement de deux lignes de code...

L'ennui n°2, c'est que si je drag de trop loin, mon tofu sort de l'animation... ça va pas. Donc on va utiliser encore d'autres paramètres. En fait la fonction startDrag(); se construit comme ça :

startDrag(cible, lock, left, top, right, bottom);

Donc on va lui dire ça :


	startDrag(btn,true,0,0,550,400);

C'est à dire à gauche et en haut, je peux aller jusqu'à 0, à droite et en bas je vais aux limites de l'animation (qui fait 550 sur 400)

Le code final donne donc :


on(press)
{
	startDrag(btn,true,0,0,550,400);
}
on(release)
{
	stopDrag();
}

Note : attention à ce que l'origine du symbole soit le centre de l'image ! pour cela rentrez dans le clip et placez l'image sur la petite croix (l'origine) :

Mais... il me vient une idée... si je peux "drag" avec des limites... je peux faire par exemple une barre comme celle-ci :

Le code ne serait pas très différent... il faudrait seulement que la limite en position de drag haut et bas soit ma même...non ?

Allez, trouvez-moi ce code, bande de bougres !

Cliquer pour afficher la zone invisible

Fermer ce cadre

on(press){
startDrag(btn,false,4,5,124,5);
}
on(release){
stopDrag();
}

Ici, on a une possibilité de 4 à 124 en _x (je ne mets pas 0 parce que la barre noire ne commence qu'à 4 et pas à 0) et en _y... seulement 5 ! donc on ne peut pas la bouger en _y !

Ah, j'oubliais : Les sources en .fla !

Animation n°1 avec le Tofu

Barre de défilement Si jamais vous voulez savoir en plus comment le champ de texte prend sa valeur en fonction de la position.

Voilà, merci d'avoir suivi ce tutoriel,

Dawlin

Flash : Drag'n'Drop

Lisez aussi...

Flash : Le principe d'une Map

Flash : Charger et exploiter un fichier XML externe