Drag and Drop AS3
But de ce tutoriel : créer un système de drag and drop d'un élément entre deux Sprites. Notre élément prendra la forme d'un cercle rouge, et nos conteneurs la forme de deux carrés bleus.
Le code :
import flash.display.MovieClip;
import flash.events.MouseEvent;
class Main {
private var _root : MovieClip;
private var _mv1 : MovieClip;
private var _mv2 : MovieClip;
private var _mv_cercle : MovieClip;
public function new(parent:MovieClip):Void {
this._root = parent;
// creation du premier rectangle
this._mv1 = new MovieClip();
this._mv1.graphics.beginFill(0x0000CC, 1);
this._mv1.graphics.drawRect(0, 0, 50, 50);
this._mv1.graphics.endFill();
this._root.addChild(this._mv1);
// creation du deuxieme rectangle
this._mv2 = new MovieClip();
this._mv2.graphics.beginFill(0x0000CC, 1);
this._mv2.graphics.drawRect(100, 0, 50, 50);
this._mv2.graphics.endFill();
this._root.addChild(this._mv2);
// creation du cercle
this._mv_cercle = new MovieClip();
this._mv_cercle.graphics.beginFill(0xA90A08, 1);
this._mv_cercle.graphics.drawCircle(5,5,5);
this._mv_cercle.graphics.endFill();
this._mv1.addChild(this._mv_cercle);
// creation des ecouteurs
this._mv_cercle.addEventListener(MouseEvent.MOUSE_DOWN, startDragging);
this._root.addEventListener(MouseEvent.MOUSE_UP, stopDragging);
}
private function startDragging(event:MouseEvent):Void {
if (event.currentTarget == this._mv_cercle) { // si l'élément courant correspond au cercle
this._mv_cercle.startDrag(false); // on lance le déplacement
// on change le parent du cercle pour qu'il puisse passer au dessus des rectangles
this._root.addChild(event.currentTarget);
}
}
private function stopDragging(event:MouseEvent):Void {
this._mv_cercle.stopDrag();
if (this._mv1.hitTestObject(this._mv_cercle)) {
trace("Dans le rectangle 1");
// on place l'objet dans le rectangle 1
this._mv1.addChild(this._mv_cercle);
}
else if (this._mv2.hitTestObject(this._mv_cercle)) {
trace("Dans le rectangle 2");
// on place l'objet dans le rectangle 2
this._mv2.addChild(this._mv_cercle);
}
else
trace("Aucune collision");
}
public static function main():Void {
new Main(flash.Lib.current);
}
}
Les explications :
Je ne pense pas que des explications detaillées soit nécessaires.
Dans le doute, j'explique un peu le code :
Tout d'abord, nous avons créer deux rectangles et un cercle à l'aide de la propriété graphics de notre MovieClip.
Ensuite, sur notre cercle, nous ajoutons un écouteur qui va permettre de savoir quand l'utilisateur cliquera sur celui-ci. Pour ce faire, nous utilisons la méthode startDrag(), pour lancer le déplacement, et stopDrag(), pour le terminer.
Notre deuxième écouteur permet de lacher l'objet et de faire les tests de collision grâce à la méthode hitTestObject de la classe MovieClip.
L'exemple :
Et voici le code en action :
Déplacez le cercle rouge et visualisez les collisions.