Kommunauty
Connexion
Inscription

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

  
12 commentaires

XD OWIII

le 16 juin 2009

OWII startdDrag(); moi

le 21 juin 2009

wow c'est super bien fait comme fiche technique avec en + un exercice à faire je vais tenter!

le 22 octobre 2010

Fais aussi attention :

Quand tu dragues (oui, on drague ) en dehors du bouton (quand tu arrives à la fin de la barre et que tu continues mais pas le bouton), et que tu relèves ta souris, si l'évenement stopDrag est commandé par on(release), ça va pas s'annuler quand tu vas relever la souris puisque tu ne seras plus en train de cliquer sur le bouton

le 22 octobre 2010

hey je viens de tester et sans tricher j'ai capté! TROP TROP GENIAL! par contre je ne comprends pas ton commentaire! Je peux t'envoyer mon truc aussi peut-être? j'aime bien avoir des avis c'est ainsi que je comprends!

le 22 octobre 2010

Ok, tu peux me l'envoyer, je t'envoie mon adresse mail par MP

le 23 octobre 2010

Merci beaucoup pour ce tuto!!!

le 19 décembre 2011

Par contre vous n'auriez pas un tuto qui expliquerait comment lorsqu'on veut relâcher l'objet, celui ci va se placer à un endroit précis, mais si on le place au mauvais endroit, il retourne à sa place de départ..

Merci

le 19 décembre 2011

Ok...

Eh bien tu gères le désappuiyage (oui oui ! ça existe ) en disant que :


//désappuyage :
on(release){
    // Condition pour savoir si il est dans la bonne zone :
    if(monClip._x <= positionOptimaleX+marge && monClip._x >= positionOptimaleX-marge && monClip._y <= positionOptimaleY+marge && monClip._y >= positionOptimaleY-marge){
//alors on le place exactement là où on visait
monClip._x = positionOptimaleX;
monClip._y = positionOptimaleY;
}
else{
//Sinon oulala le méchant :
monClip._x = positionDepartX;
monClip._y = positionDepartY;
}
}

Alors oui, il faut définir toutes les variables, mais globalement dans la condition if on vérifie si les positions du clips sont proches (à + ou - la "marge" pixels) de la position optimale

le 19 décembre 2011

Merciiii beaucoup, je cherchais justement comment on pouvait définir la "marge"

le 19 décembre 2011

Bonjour,

votre code m'a beaucoup aidé, cependant dans la condition if.. j'aimerai ajouter une autre condition qui est si l'on se trouve sur une image précise. Or je ne connais pas la syntaxe...

Pour être plus précise, j'ai mon scénario avec une succession d'image dans lequel j'ai aussi une barre d'inventaire présente dans toutes les images. Mon but et de pouvoir placer mes objet de l'inventaire dans une zone précise mais pas dans n'importe quel image...

le 20 décembre 2011

Quand tu parles d'image, tu veux bien dire une "frame" dans le scénario ?

Si c'est le cas, tu peux utiliser la propriété _currentframe :


if(monClip._currentframe = numeroDeLImage){
  // mon code
}

La propriété _currentframe renvoie le numéro de la frame actuelle.

Si en revanche tu veux parler d'une zone de l'image dans laquelle tu veux lacher ton objet dragé, comme par exemple pour "place le rond, l'étoile et le carré dans leurs emplacements respectifs", à ce moment là, il faut savoir si quand on relâche, le clip est aux bonnes positions. Donc avec clip._x = positionXOptimale.

Par contre ça veut dire que l'utilisateur place son clip au pixel près dans la case, et soyons honnêtes, il suffit d'une bière ou deux et ni toi ni moi n'en sommes capables

Donc, je te propose un truc : tu définis une marge d'erreur :


marge = 10; // Ne pas confondre avec Marge Simpson

Puis tu testes si la position en _x est égale à la position optimale plus ou moins la marge (et de même avec la position en _y) :

N-B : ici les position optimales s'appellent posOptX ou posOptY


if(clip._x <= posOptX+marge && clip._x <= posOptX-marge && clip._y <= posOptY+marge && clip._y <= posOptY-marge){

}

ça fait une grosse condition mais c'est compréhensible.

Voilà, j'espère que 4 mois de retard pour une réponse c'est acceptable

Désolé du retard et à bientôt

le 19 avril 2012



Ajoute un commentaire !

Ajouter une image... Trouvée sur internet » De mon PC »
Adresse URL :
Adresse de la page de la vidéo :
Taille du texte :
Couleur du texte :

Article lu 6632 fois.