Comment faire pour que Animate CC reconnaisse les gouttes dans mon glisser-déposer?

Question

J'essaie de créer une interaction glisser-déposer dans CC animé à l'aide d'un symbole de clip. Le but est d'animer quand il est déposé dans une zone de dépôt. J'ai vu, mais n'ai pas mis en place une feuille de sprite pour cela, mais cela semble être une bonne idée.

Cependant, ma question est plus basée sur l'obtention d'une goutte quand elle se produit. Je ne peux pas tester l'idée de la feuille de sprite jusqu'à ce que je l'obtiens. J'ai regardé un tas de tutoriels comme celui-ci, here, qui est en train d'éditer this one pour manipuler des symboles dans Animate CC ou d'autres objets. Ça m'a donné un bon bout de chemin, mais ça ne marche pas trop bien en gouttes. Je peux très bien prendre le draggable, mais je n'arrive pas à l'enlever même lorsque je relâche la souris.

dragger est le symbole dans l'animation que j'essaie de faire glisser (juste au cas où ce n'était pas évident).

dragger.on("pressmove", function(evt){ 
    evt.currentTarget.x = evt.stageX; 
    evt.currentTarget.y = evt.stageY; 
    stage.update(evt); 
}); 

Cette partie est ce qui me donne du mal, je pense:

//refuses to release. doesn't recognize it. 
dragger.on("pressup", function(evt){  
    //lock position of thermometer and play stabby animation 
    dragger.x = dragger.x; 
    dragger.y = dragger.y; 

    if(intersect(evt.currentTarget, this.targetRight)){ //Intersection testing for good 
     alert("YAY you're right AND it works!"); 

    }else if(intersect(evt.currentTarget, this.targetWrong)){ //intersection Testing for bad 
     alert("BOO its wrong, but YAY it works"); 
    } 
    stage.update(evt); 
}); 

puis mon code pour Intersection (pour vérifier si elle est sur la zone de chute):

function intersect(obj1, obj2){ 
    var objBounds1 = obj1.getBounds().clone(); 
    var objBounds2 = obj2.nominalBounds.clone(); // <-----Changed this line 

    var pt = obj1.globalToLocal(objBounds2.x, objBounds2.y); 

    var h1 = -(objBounds1.height/2 + objBounds2.height); 
    var h2 = objBounds2.height/2; 
    var w1 = -(objBounds1.width/2 + objBounds2.width); 
    var w2 = objBounds2.width/2; 


    if(pt.x > w2 || pt.x < w1) return false; 
    if(pt.y > h2 || pt.y < h1) return false; 

    return true; 
} 

Answer 1

Analysant la démo incluse, et j'obtiens une erreur immédiate quand je commence à glisser (notez que j'ai toujours l'option "break on error" dans Chrome lorsque l'inspecteur est ouvert). Le problème vient du fait que le gestionnaire "pressup" n'a pas de portée, donc le obj2 n'est pas défini. Si vous ne transmettez pas de portée, la méthode est appelée dans la portée globale.

var objBounds2 = obj2.getBounds().clone(); // Error! 

Vous pouvez facilement corriger cela en passant une portée à la méthode on(). Cela garantira que this fait référence à la portée actuelle.

dragger.on("pressup", function(evt){ //this function will be very custom, always 
    //lock position of thermometer and play stabby animation 
    dragger.x = dragger.x; 
    dragger.y = dragger.y; 

    if(intersect(evt.currentTarget, this.targetRight)){ //Intersection testing for good 
     alert("YAY you're right AND it works!"); 

    }else if(intersect(evt.currentTarget, this.targetWrong)){ //intersection Testing for bad 
     alert("BOO its wrong, but YAY it works"); 
    } 
    stage.update(evt); 

}, this); // <-------------------- Only thing I changed 

I a ajouté un troisième paramètre de la méthode on(), pour passer le champ d'application. Cela devrait résoudre cette erreur et pourrait même résoudre votre problème.

Cheers,