1. #1
    Nouveau Candidat au Club
    Homme Profil pro
    Enseignant
    Inscrit en
    août 2013
    Messages
    3
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Enseignant
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2013
    Messages : 3
    Points : 1
    Points
    1

    Par défaut Drag & Drop et magnétisme

    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 !
    Fichiers attachés Fichiers attachés

  2. #2
    Nouveau Candidat au Club
    Homme Profil pro
    Enseignant
    Inscrit en
    août 2013
    Messages
    3
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Enseignant
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2013
    Messages : 3
    Points : 1
    Points
    1

    Par défaut

    Personne ? J'ose un petit up...

  3. #3
    Membre confirmé Avatar de zulad
    Homme Profil pro
    creatif
    Inscrit en
    juin 2007
    Messages
    694
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : Belgique

    Informations professionnelles :
    Activité : creatif

    Informations forums :
    Inscription : juin 2007
    Messages : 694
    Points : 485
    Points
    485

    Par défaut

    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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.
    Une tortue peut dormir 6 heure en apnée ... hihihi

  4. #4
    Nouveau Candidat au Club
    Homme Profil pro
    Enseignant
    Inscrit en
    août 2013
    Messages
    3
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Enseignant
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2013
    Messages : 3
    Points : 1
    Points
    1

    Par défaut

    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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];
    	}
    }
    Fichiers attachés Fichiers attachés

  5. #5
    Membre à l'essai
    Profil pro
    Inscrit en
    juin 2008
    Messages
    21
    Détails du profil
    Informations personnelles :
    Localisation : Maroc

    Informations forums :
    Inscription : juin 2008
    Messages : 21
    Points : 11
    Points
    11

    Par défaut

    Citation Envoyé par tionline Voir le message
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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
    tu trouve 3 parties mais c'est en anglais.
    A+

Discussions similaires

  1. Drag n drop et magnétisme
    Par stupidgrin dans le forum jQuery
    Réponses: 1
    Dernier message: 16/05/2014, 13h08
  2. Drag and drop "de l'extérieur"
    Par Kaji dans le forum C++Builder
    Réponses: 11
    Dernier message: 14/11/2008, 11h43
  3. [JSP][DRAG AND DROP]
    Par hamed dans le forum Servlets/JSP
    Réponses: 7
    Dernier message: 23/01/2004, 17h36
  4. drag and drop
    Par jujuesteban dans le forum Composants VCL
    Réponses: 5
    Dernier message: 20/06/2003, 09h23

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo