bannière
<< Juillet 2010 >>
LuMaMeJeVeSaDi
1234
567891011
12131415161718
19202122232425
262728293031
Tutoriel
Revenir a la liste des tutoriels Flash de difficulté Intermediaire

0 question
0 commentaire sur ce tutorial
Définition des mots

Détection de collision


tuto by Tchii001

Voici un tutoriel qui vous permettre de détecter la collision entre 2 objets.
Pour commencer, ouvrez un nouveau document flash de 400*200 par exemple.

Créez un carré de 150*150 sans contour avec la couleur de votre choix
Image
Il faut sélectionner le carré avec l'outil de sélection pour afficher les propriétés et changer la taille

Avec l'outil de sélection, sélectionnez votre carré et appuyez sur la touche F8 pour créer un nouveau symbole
Cochez la case "Clip" et nommez le "target"
Image

Dans les propriétés du clip, nommez son occurrence "target_mc"
Image

Maintenant nous allons créer l'objet que l'on pourra déplacer et qui indiquera la collision avec le premier objet

Créez un nouveau clip en appuyant sur Ctrl + F8
Cochez la case "Clip" et nommez-le "box"
Image

Sélectionnez la première frame, et dessinez un carré de 50*50 de la couleur de votre choix mais différente du carré précédent
Image

Ensuite, sélectionnez la deuxième frame et appuyer sur F6 pour dupliquer la première
Sélectionnez le carré et changer sa couleur
Image

Créez un nouveau calque et nommez le "actions"
Image

Sélectionnez le première frame de ce calque et appuyez sur F9, puis insérez ce code
Image

Comme précédemment, sélectionnez la deuxième frame de ce calque et appuyez sur F6 et remettez le code dans la fenêtre d'actions
Sortez du clip "box" en cliquant sur le bouton "Sequence 1" en haut à gauche du chronogramme

Dans la bibliothèque faites glisser votre clip "box" sur la scène de travail
Image

Dans les propriétés mettez comme nom d'occurrence "box_mc"
Image

Prenez l'outil texte et cliquez dans la scène de travail pour créer une zone texte.
Laissez la vide.
Dans les propriétés sélectionnez "Texte dynamique" et dans Var écrivez "result"
Image

Vous pouvez aussi choisir un type de police et une couleur.

Maintenant, créez un nouveau calque nommé "actions" et appuyez sur F9 et mettez ce code :

Code flash


_root.box_mc.onPress = function() {
this.startDrag(false, 0, 0, 400, 200);
this.onMouseMove = function() {
updateAfterEvent();
}
}
_root.box_mc.onRelease = function() {
stopDrag();
};
_root.box_mc.onEnterFrame = function() {
if(this.hitTest(_root.target_mc)) {
this.gotoAndStop(2);
_root.result="Touche";
} else {
this.gotoAndStop(1);
_root.result="Touche pas";
}
};


Vous pouvez maintenant faire un aperçu en appuyant sur Ctrl + Entrée
Si tout fonctionne normalement, vous pouvez prendre le petit carré et le déplacer dans le grand
Lorsqu'il entre en contact, le petit carré change de couleur et le texte affiché change

Exemple du tuto

Installez le plugin Flash pour voir l'animation : Cliquez ici pour le télécharger
Revenir à la liste des tutoriels Flash de difficulté Intermediaire

Haut