Drag limité sur une zone
Par Cédric Tabin le lundi 24.03.2008, 17:20 - ActionScript - Lien permanent
La méthode startDrag de la classe Sprite permet de pouvoir "coller" un clip au déplacement de la souris. Il est également possible une zone rectangulaire via le deuxième paramètre. Deux problèmes suite à cela :
- seul un Sprite peut être glissé.
- la zone de limitation est toujours rectangulaire.
Voici une petite API pour pouvoir faire un startDrag sur un DisplayObject dans une zone quelconque !
L'utilisation de l'API est très simple : il suffit de créer un nouvel objet DragManager en définissant l'objet que l'on souhaite déplacer et la zone de limitation :
import ch.capi.display.*; import ch.capi.geom.*; var lm:Circle = new Circle(100, 100, 75); //x, y, rayon var dm:DragManager = new DragManager(monClip, lm);
Ensuite, il ne reste plus qu'a mettre en place le comportement de glisser-déposer (drag & drop). Pour cela, il y a les méthodes startDrag et stopDrag comme habituellement :
dm.startDrag(false); //lockCenter //... dm.stopDrag();
Afin de gagner du temps, une méthode est implémentée pour gérer cela automatiquement :
dm.setDragDropBehaviorEnabled(true, false); //activation, lockCenter
Et voici un petit exemple de ce que ça donne. Pour l'instant, je n'ai implémenté que le cercle basique et le rectangle. Mais il est très facile d'étendre l'API pour coller à n'importe quelle forme moyennant quelques formules mathématiques. Il suffit d'implémenter l'interface IDragDelimiter ! J'en ajouterai au fur et à mesure de mes développements.
Pour ce qui est du code de l'exemple, il est assez court :
import ch.capi.geom.*; import ch.capi.display.*; //shape delimiter var c:BasicCircle = new BasicCircle(100, 100, 70); var r:BasicRectangle = new BasicRectangle(250, 30, 170, 140); //display the shapes var g:Graphics = this.graphics; g.lineStyle(2, 0); c.draw(g); r.draw(g); var useLockCenter:Boolean = false; //circle manager var dc:DragManager = new DragManager(clipDragCircle, c); dc.setDragDropBehaviorEnabled(true, useLockCenter); //rectangle manager var dr:DragManager = new DragManager(clipDragRectangle, r); dr.setDragDropBehaviorEnabled(true, useLockCenter);
Voila pour cette petite API. Si quelqu'un a un retour à me faire...
Commentaires
Heureusement que cette fonctionnalité existe encore avec l'AS3. La possibilité d'enfermer le déplacement dans un rectangle existe depuis Flash 4 et l'AS1 ...
Mais c'est vrai que la méthode à évoluée ... je n'irais pas jusqu'à dire qu'elle s'est simplifiée.
Hello,
Oui la méthode a évolué, mais la fonctionnalité n'a pas changé... on en reste sur des rectangles
@++
Bonjour,
=) Je suis un gros débutant en flash et en essayant de faire à ma vitesse un lecteur de musique j'ai rencontré un problème ...
Je souhaiterai faire en gros un petit bouton rond qui se promène sur un arc de cercle pour régler le volume . Mais je n'arrive pas à faire en sorte qu'il suive l'arc et qu'il reste dessus. En fait j'aimerai faire de l'arc, sa zone de déplacement autorisé (désolé de ne pas parlé en langage d'initié c'est un peu n'importe quoi ce que je dis...). Alors s'il l'un de vous a l'astuce qui me permet de faire sa j'apprécierai boucoup par ce que j'ai passer un certain temps dessus !!!
En vous remerciant d'avance. =)
Jonathan
L'API n'est plus fonctionnel, après les import etc, la simple créaction d'un SimpleCircle ne fonctionne pas, bref une bonne perte de temps.
C'est à cause de la classe Vector qui désormais existe dans l'API par défaut. Je l'ai renommée en CVector et plus de problème !
Petit up de ton api bien utile : Je cherchais à contraindre la rotation d'un clip sur un cercle et uniquement sur, la où ton api ne permettait que de fixer comme limites au drag du clip la taille de ce cercle.
En ouvrant la classe BasicCircle, j'ai remplacé à la ligne 81 le :
var v:CVector = new CVector(x - this.x, y - this.y) par
var v:CVector = new CVector(x - radius, y + radius).
Mon clip ne bouge maintenant que sur le contour du cercle