![[Fléche]](../images/defaut/icones/puce_navig.gif)
Tutorial Flash : Drag and drop en AS3
Introductions
Informations
Documents
Résultat
Nous avions déjà vu dans un précédent tutorial comment réaliser un "drag and drop" en AS2.
Je vous propose cette fois d'étudier son l'emploi avec AS3.
L'accés aux documents est exclusivement réservé aux membres.
1. Préparation de l'espace de travail
Débutons ce tutorial par l'habituel création d'un nouveau document Flash (AS3) :- dimensions : 400 x 200 pixels (peu importe)
- couleur d'arrière-plan : blanc (peu importe)
- cadence : 12 images par secondes
- unité de la règle : pixels
Dans un premier temps, comme dans le tutorial sur le drag and drop en AS2, j'utiliserai un simple rectangle pour réaliser la démonstration.
Nous réaliserons ensuite un petit puzzle afin de l'adapter en AS3 (comme nous l'avions fait en AS2).
Pour le moment créez un simple rectangle et convertissez le en symbole "movie clip".
Remarque : en AS3 le drag and drop peut-être utilisé sur un symbole clip.
2. Mise en place du Drag and Drop
Avant toute chose définissez un nom pour l'occurrence du symbole clip : j'utiliserai le nom "objet".Cela permettra de cibler l'élément avec notre code AS.
Nous allons maintenant mettre en place le drag and drop de notre symbole clip avec un petit bout de code AS3.
Créez un nouveau calque et placez-y le code suivant :
Code-source : AS3
function dragClip(evt:MouseEvent):void
{
objet.startDrag();
}
function dropClip(evt:MouseEvent):void
{
objet.stopDrag();
}
objet.addEventListener(MouseEvent.MOUSE_DOWN, dragClip);
objet.addEventListener(MouseEvent.MOUSE_UP, dropClip);
Certains peuvent se sentir un peu dérouté par ce code, je vais donc vous expliquer son fonctionnement global :
Dans la première partie du script nous créons les 2 fonctions dragClip() et dropClip().
Celles-ci nous permettront de déclencher le drag and drop sur l'élément grâce aux fonctions startDrag() et stopDrag().
Dans la seconde partie nous affectons un écouteur d'événement à notre symbole clip.
- 1er déclencheur : lance la fonction dragClip() lorsque le clic de la souris est enfoncé.
- 2éme déclencheur : lance la fonction dropClip() lorsque le clic de la souris est relâché.
Enregistrez votre document et publiez le afin de vérifier que tout fonctionne correctement.
3. Réaliser un puzzle (étape 1)
Pour illustrer le drag and drop de plusieurs éléments je vous propose de réaliser un petit puzzle.Créez un nouveau document flash puis importez et placez les pièces de votre puzzle sur la scène.
4. Réaliser un puzzle (étape 2)
Commencez par convertir en symbole clip chaque pièce de votre puzzle et à leur donner un nom d'occurrence .Cela étant fait nous allons légèrement modifier les fonctions rédigées dans le chapitre 2 afin de pouvoir les utiliser avec plusieurs éléments :
Code-source : AS3
function dragClip(evt:MouseEvent):void
{
evt.target.startDrag();
}
function dropClip(evt:MouseEvent):void
{
evt.target.stopDrag();
}
Ici nous affectons la fonction startDrag() à l'élément (target) dont l'écouteur d'événement à enregistré le comportement déclencheur (clic de la souris enfoncé)
Idem pour la fonction stopDrag() (mais avec le clic de la souris relaché)...
Pour finir ajoutez un écouteur d'événement à chaque symbole auquel vous souhaitez attribuer un comportement "drag and drop" :
Code-source : AS3
elmt_1.addEventListener(MouseEvent.MOUSE_DOWN, dragClip);
elmt_1.addEventListener(MouseEvent.MOUSE_UP, dropClip);
elmt_2.addEventListener(MouseEvent.MOUSE_DOWN, dragClip);
elmt_2.addEventListener(MouseEvent.MOUSE_UP, dropClip);
etc...
Commentaires
Aucun commentaire enregistré
