Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Déplacer un objet d'après les coordonnées de la souris - Suivre la souris (avec la POO)

Compatible ActionScript 3. Cliquer pour en savoir plus sur les compatibilités.Par gnicos (Nicolas Gauville), le 08 mai 2010

Dans ce tutoriel, nous allons utiliser l’ActionScript 3 et la programmation orientée objet pour créer une classe d’objet qui suit la souris de l’utilisateur. Par la suite, toutes les instances du symbole de la bibliothèque lié à cette classe suivront automatiquement la souris dès leur instanciation (ajout) dans la scène. D'autres tutoriels suivront pour expliquer comment réaliser d'autres mouvements en fonction des coordonnées de la souris.

Ce tutoriel est la suite d'un premier tutoriel sur le même sujet sans la programmation orientée objet, mais nous aurons cette fois l'ambition de réaliser ceci en utilisant la POO pour rendre le script plus flexible.

A la fin de ce tutoriel, nous obtiendrons ceci : (survolez le cadre pour voir la balle)

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Etape 0 : l'idée

Pour qu'un objet (dans ce tutoriel, on prendra un Sprite) suive la souris, c'est relativement simple : il suffit de faire tendre progressivement les coordonnées de l'objet vers celles de la souris. Ici, on mesurera simplement l'écart entre les deux coordonnées pour ensuite le réduire petit à petit, jusqu'à ce que le sprite ait adopté les mêmes coordonnées que le curseur de la souris de l'utilisateur. Nous n'irons pas plus loin sur ce principe puisqu'il a déjà été abordé ici.

Etape 1 : préparons le terrain ...

Nous allons commencer par créer un nouveau document flash et l'enregistrer dans un nouveau dossier. Sur la scène, utilisez l'outil ovale (touche O) pour tracer une balle. Nous la transformerons en symbole plus tard, car nous allons, avant cela, préparer notre classe. C'est cette classe qui va contenir le code AS qui fera bouger la balle en suivant la souris. Nous allons voir comment la créer dans l'étape suivante.

Etape 2 : création de la classe "Balle"

Faites un nouveau document (fichier > nouveau ou ctrl/commande + N), et dans la boite de dialogue qui s'affiche, sélectionnez “Fichier ActionScript” - comme illustré ci-dessous - pour créer le fichier de notre future classe.

Une fois le document ouvert, enregistrez le dans le même dossier que l'autre fichier, sous le nom de “Balle.as”.

Le principe, c'est de lier notre Sprite avec une classe “Balle”. Ainsi, à l'inverse du tutoriel précèdent, le script ne sera pas situé dans la première image de la timeline mais directement dans cette classe. Ainsi, il suffira de glisser le Sprite sur la scène (depuis la bibliothèque) pour que celui-ci suive automatiquement la souris.

Le constructeur de notre classe comprendra seulement un paramètre dans ce tutoriel, qui définira la latence avec laquelle l’objet devra suivre la souris de l’utilisateur. Ainsi, plus la latence sera élevée et plus le clip mettra de temps pour rejoindre la souris. Cette classe doit également fonctionner si on glisse simplement le Sprite sur la scène (donc sans utiliser l'ActionScript dans le fichier principal), ce paramètre devra donc être facultatif.

On va donc créer une classe «Balle», qui comprendra une propriété «latence» qui correspondra à cette latence, le constructeur de classe, et une fonction qui sera appelée par l’évènement «ENTER_FRAME» qui devra rapprocher l’objet de la souris de l’utilisateur, comme dans le tutoriel précèdent.

Pour le moment, nous obtenons donc ceci :

package
{
	//On importe les classes Sprite et Event
	import flash.display.Sprite;
	import flash.events.Event;
 
	//On rend notre classe héritière de la classe Sprite
	public class Balle extends Sprite
	{
		//On crée la propriété «latence»
		private var latence:int;
 
		//Constructeur de classe, on ajoute "=15" de façon a rendre le paramètre facultatif
		public function Balle ( param_latence:int=15 )
		{
			latence = param_latence;
 
			//Ecoute de l'événement «ENTER_FRAME»				
			addEventListener ( Event.ENTER_FRAME, onEnterFrame );
		}
 
		//Fonction déclenchée par l’évènement ENTER_FRAME
		private function onEnterFrame ( e:Event ) : void
		{
			//Je ne re-détaille pas cette partie, on l'a vue dans le tuto sans POO
			x += ( ( stage.mouseX - x ) / latence );
			y += ( ( stage.mouseY - y ) / latence );
		}
	}
}

Etape 2 : test de la classe sans ActionScript

Nous allons maintenant tester notre classe dans une animation de test. Dans le fichier fla, transformez la balle en clip (touche F8). La boite de dialogue “Convertir en symbole” s'ouvre alors. Si les options avancées ne sont pas affichées, cliquez sur le bouton “Avancé”. Vous voyez alors ceci :

Les parties de la fenêtre auxquelles vous devez faire attention sont en rouge. Nommez le symbole Balle, vérifiez que le type est bien “Clip” et que l'alignement soit centré puis cochez “Exporter pour ActionScript”. La case “Exporter dans l'image 1” doit se cocher automatiquement, et le champ texte “Classe :” devrait également reprendre le nom “Balle” de lui même. Si ce n'est pas le cas, rectifiez le. Une fois ceci terminé, vous n'avez plus qu'à valider.

Note : la classe “Balle” étend la classe Sprite (puisque nous l'avons spécifié dans le fichier Balle.as). Le symbole Balle deviendra donc automatiquement un sprite lorsqu'il sera lié à la classe Balle, nous n'avons donc rien de plus à préciser à ce niveau dans la fenêtre “Convertir en Symbole”.

Si vous exécutez l'animation, la balle devrait directement suivre la souris !

Autre méthode : ajouter la balle en ActionScript

Bien sûr, vous pouvez aussi la supprimer de la scène et la rajouter en suite en ActionScript, ce qui permettra de définir, cette fois, la latence :

var balle:Balle = new Balle ( 5 ); //Cette fois, la latence sera de 5
addChild ( balle ); //On oublie pas d'ajouter la balle à la liste d'affichage

Annexe : l'utilisation d'un MovieClip

Vous l'avez remarqué, nous avons rendu notre classe héritière de la classe Sprite, et non de la classe MovieClip. Il est donc important de connaître les différences principales entre ces deux classes. En fait, un Sprite ressemble beaucoup à un MovieClip à la différence qu'il ne possède pas de TimeLine. Ainsi, notre code convient-il bien pour le cas d'une balle, mais il ne fonctionnerait pas si notre objet était animé. Nous allons donc maintenant voir comment faire dans le cas d'un objet animé, en rendant, cette fois, notre classe héritière de la classe MovieClip.

Au niveau du code, il n'y a que deux lignes à changer : au niveau de l'importation, nous devons maintenant importer la classe MovieClip, et au niveau de l'héritage, où il suffit également de remplacer Sprite par MovieClip.

Pour tout le reste, cela fonctionne exactement de la même façon ! Pour cette raison, je ne détaillerai pas plus ce cas particulier, mais je vous ai quand même fait un petit exemple :

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Cette fois, j'ai remplacé la classe Balle par une classe Papillon, héritière de la classe MovieClip. On obtient donc ceci :

package
{
	//On importe les classes MovieClip et Event
	import flash.display.MovieClip;
	import flash.events.Event;
 
	//Cette fois, on rend notre classe héritière de la classe MovieClip
	public class Papillon extends MovieClip
	{
		//On crée la propriété «latence»
		private var latence:int;
 
		//Constructeur de classe
		public function Papillon ( param_latence:int=15 )
		{
			latence = param_latence;
 
			//Ecoute de l'événement «ENTER_FRAME»				
			addEventListener ( Event.ENTER_FRAME, onEnterFrame );
		}
 
		//Fonction déclenchée par l’évènement ENTER_FRAME
		private function onEnterFrame ( e:Event ) : void
		{
			//On fait tendre les coordonnées vers celles de la souris
			x += ( ( stage.mouseX - x ) / latence );
			y += ( ( stage.mouseY - y ) / latence );
 
			//On empêche le magnifique Papillon de sortir du cadre
			if ( (x - width/2 ) < 0 )
				x = width/2;
			else if ( (x + width/2) > 400 )
				x = 400 - width/2;
			if ( (y - height/2 ) < 0 )
				y = height/2;
			else if ( (y + height/2) > 300 )
				y = 300 - height/2;
		}
	}
}

Sources

Vous pouvez télécharger les sources de ce tutoriel ici : balle_avec_poo.zip, et le petit bonus, le cas du papillon volant : papillon_poo.zip

Conclusion

On a vu comment faire pour qu'un sprite suive la souris tout en utilisant la programmation orientée objet pour rendre notre code le plus flexible possible. Nous verrons plus tard d'autres mouvements possibles en fonction des coordonnées de la souris, voire d'autres objets.