Drag & Drop et magnétisme

Version imprimable

1 pièce(s) jointe(s)

Bonjour à tous,

Petit nouveau, je me permets de faire quelque chose qui ne se fait pas, c'est à dire arriver les mains dans les poches (ou presque) et demander de l'aide. Je m'en excuse par avance et ne me vexerai pas si vous m'envoyez bouler. J'aimerais savoir le faire seul, mais je n'ai que peu de temps devant moi (trop peu pour maîtriser les bases de l'AS3 en tout cas).

J'essaie de réaliser une petite application pédagogique, dans laquelle il s'agit de placer des mots dans un texte à trous. Il n'y a pas besoin de procédure de validation, ce qui doit j'imagine simplifier la tâche.

Je ne suis pas familier du tout des environnements de programmation, mais j'ai tout de même réussi à faire en sorte qu'un symbole puisse être déplacé par drag and drop, grâce à des bribes de code. Je suis également parvenu à faire un bouton pour afficher la solution. Ce qui me manque, en revanche, c'est le magnétisme de la zone d'arrivée, de sorte que le texte apparaisse proprement là où il est censé être (ou pas).

J'ai trouvé de nombreuses solutions sur internet, mais souvent en AS2 ou trop complexes pour que je parvienne à vraiment les déchiffrer et les adapter à mon projet.

Bien entendu, je n'attends pas une réponse toute faite de votre part (encore que... ;) ), mais une petite aide serait la bienvenue. Je vous envoie au passage le fichier .fla sur lequel je planche, pour que vous puissiez vous faire une idée.

Pour le moment, j'en suis là :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 /* Drag and Drop de mot1 */ mot1.addEventListener(MouseEvent.MOUSE_DOWN, fl_ClickToDrag_1); function fl_ClickToDrag_1(event:MouseEvent):void { mot1.startDrag(); } stage.addEventListener(MouseEvent.MOUSE_UP, fl_ReleaseToDrop_1); function fl_ReleaseToDrop_1(event:MouseEvent):void { mot1.stopDrag(); } /* Drag and Drop de mot2 */ mot2.addEventListener(MouseEvent.MOUSE_DOWN, fl_ClickToDrag_2); function fl_ClickToDrag_2(event:MouseEvent):void { mot2.startDrag(); } stage.addEventListener(MouseEvent.MOUSE_UP, fl_ReleaseToDrop_2); function fl_ReleaseToDrop_2(event:MouseEvent):void { mot2.stopDrag(); } /* Affichage de la solution */ solution.addEventListener(MouseEvent.CLICK, fl_ClickToPosition); function fl_ClickToPosition(event:MouseEvent):void { mot1.x = 596; mot1.y = 261; mot2.x = 322; mot2.y = 292; }
Un grand merci à tous ceux qui prendront le temps de me filer un petit coup de main !

21/08/2013, 21h57
tionline

Personne ? J'ose un petit up... :oops:

Bonsoir,

ma petite idée là dessus est que pour positionner correctement vous pouvez placer la pièce "draggée" à une position exacte x et y. Cette position vous pouvez la voir en faisant un trace(nomDeMaPiece.x+" "+nomDeMaPiece.y).

Maintenant pour engager ce pseudo-magnétisme c'est une détection de collision entre la pièce draggée et la pièce survolée.

Les "valeurDeXEtablie" et "valeurDeYEtablie" étant en dur dans le code. Vous pouvez les stocker dans un tableau et les récupérer par le nom de movieClips par exemple.

Ca donnerait un truc du genre :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 function magnetisme(e:MouseEvent):void { stopDrag(); if (nomDePieceA.hitTestObject(nomDePieceB)) { nomDePieceA.x = valeurDeXEtablie; nomDePieceA.y = valeurDeYEtablie; //trace("Collision detected!"); } else { // trace("No collision."); } }
J'espère que ça vous aidera.

PS : Je me suis inspiré de cet article ci.

1 pièce(s) jointe(s)

Merci pour cette réponse !

Du coup, j'en ai profité pour "optimiser" mon code (c'est un bien grand mot).

J'ai remplacé la fonction hitTestObject par hitTestPoint, de sorte que des zones proches les unes des autres ne rentrent pas en conflit en magnétisant des objets qui passeraient trop près d'elles !

Au passage, j'ai également utilisé des tableaux pour éviter d'avoir à recopier autant de bouts de codes qu'il y aura d'objets à placer... il suffit de déclarer un objet au départ pour qu'il se comporte comme les autres.

Si vous voyez des erreurs ou des choses à améliorer, je suis encore un gros débutant... ;)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
// Définition des objets et des zones.
var objets:Array = [objet0, objet1];
var zones:Array = [zone0, zone1];
 
// Remplissage du tableau XY avec les coordonnées de chaque zone.
var zonesXY:Array = new Array;
for(var j:int = 0; j < zones.length; j++)
	{
	zonesXY[j] = [zones[j].x, zones[j].y];
	}
 
var currentClip:MovieClip;
 
for(var i:int = 0; i < objets.length; i++) {
	objets[i].buttonMode = true;
	objets[i].addEventListener(MouseEvent.MOUSE_DOWN, item_onMouseDown);
}
 
function item_onMouseDown(event:MouseEvent):void {
	currentClip = MovieClip(event.currentTarget);
	addChild(currentClip); //bring to the front
	currentClip.startDrag();
	stage.addEventListener(MouseEvent.MOUSE_UP, stage_onMouseUp);
}
 
function stage_onMouseUp(event:MouseEvent):void {
	stage.removeEventListener(MouseEvent.MOUSE_UP, stage_onMouseUp);
	currentClip.stopDrag();
 
			// Teste une correspondance entre le hitPoint et une entrée du tableau zonesXY.
			for(var i:int = 0; i < zones.length; i++)
			{
				if (currentClip.hitTestPoint(zonesXY[i][0], zonesXY[i][1], true))
				{
   					currentClip.x = zonesXY[i][0];
  					currentClip.y = zonesXY[i][1];
				}	
			}
	}
 
 
// Afficher la solution
solution.addEventListener(MouseEvent.CLICK, solve);
function solve(event:MouseEvent):void
{
	for(var k:int = 0; k < objets.length; k++)
	{
		objets[k].x = zonesXY[k][0];
		objets[k].y = zonesXY[k][1];
	}
}

Citation:
Envoyé par tionline
Merci pour cette réponse !

Du coup, j'en ai profité pour "optimiser" mon code (c'est un bien grand mot).

J'ai remplacé la fonction hitTestObject par hitTestPoint, de sorte que des zones proches les unes des autres ne rentrent pas en conflit en magnétisant des objets qui passeraient trop près d'elles !

Au passage, j'ai également utilisé des tableaux pour éviter d'avoir à recopier autant de bouts de codes qu'il y aura d'objets à placer... il suffit de déclarer un objet au départ pour qu'il se comporte comme les autres.

Si vous voyez des erreurs ou des choses à améliorer, je suis encore un gros débutant... ;)
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 // Définition des objets et des zones. var objets:Array = [objet0, objet1]; var zones:Array = [zone0, zone1]; // Remplissage du tableau XY avec les coordonnées de chaque zone. var zonesXY:Array = new Array; for(var j:int = 0; j < zones.length; j++) { zonesXY[j] = [zones[j].x, zones[j].y]; } var currentClip:MovieClip; for(var i:int = 0; i < objets.length; i++) { objets[i].buttonMode = true; objets[i].addEventListener(MouseEvent.MOUSE_DOWN, item_onMouseDown); } function item_onMouseDown(event:MouseEvent):void { currentClip = MovieClip(event.currentTarget); addChild(currentClip); //bring to the front currentClip.startDrag(); stage.addEventListener(MouseEvent.MOUSE_UP, stage_onMouseUp); } function stage_onMouseUp(event:MouseEvent):void { stage.removeEventListener(MouseEvent.MOUSE_UP, stage_onMouseUp); currentClip.stopDrag(); // Teste une correspondance entre le hitPoint et une entrée du tableau zonesXY. for(var i:int = 0; i < zones.length; i++) { if (currentClip.hitTestPoint(zonesXY[i][0], zonesXY[i][1], true)) { currentClip.x = zonesXY[i][0]; currentClip.y = zonesXY[i][1]; } } } // Afficher la solution solution.addEventListener(MouseEvent.CLICK, solve); function solve(event:MouseEvent):void { for(var k:int = 0; k < objets.length; k++) { objets[k].x = zonesXY[k][0]; objets[k].y = zonesXY[k][1]; } }
Bonsoir,
tu trouve la réponse satisfaisante dans youtube https://www.youtube.com/watch?v=ALqGYMsRWxw
tu trouve 3 parties mais c'est en anglais.
A+