Flash 3 : Le jeu du canard. Objectif de la séance Battre M. Bouchardon au jeu du canard Mettre en pratique les connaissances acquises pour créer un jeu.

Présentation au sujet: "Flash 3 : Le jeu du canard. Objectif de la séance Battre M. Bouchardon au jeu du canard Mettre en pratique les connaissances acquises pour créer un jeu."— Transcription de la présentation:

1 Flash 3 : Le jeu du canard

2 Objectif de la séance Battre M. Bouchardon au jeu du canard Mettre en pratique les connaissances acquises pour créer un jeu complet Plan: Création d'un menu Rappels de programmation Création d'une classe Fonctionnement du jeu

3 Commençons... Dans un premier temps, nous allons réaliser un menu on ne peut plus simple 1. 1 une image de fond. 2. 1 champ de saisie. 3. 1 bouton de validation. Un bon réflexe est de tout de suite enregistrer votre travail et de lui donner un nom.

4 Paramétrage Ajuster les propriétés du document

5 Importation Importer dans la Bibliothèque les éléments dont nous aurons besoin : Les images Les sons

6 Espace de travail Les calques et images clés : Comme nous l’avons vu précédemment, on crée 2 calques : “code” qui contiendra le code; “Fond” pour l’ajout et l'organisation des éléments sur la scène; On ajoute ensuite une image-clé vide sur chaque calque :

7 Création du Menu Par un glissé-déposé, insérez une occurrence du parchemin sur la scène. Inutile de la nommer, elle ne servira qu’au décor.

8 Création du Menu Sélectionnez le fond puis allez dans le panneau “Aligner & info & transformer” Puis nous allons ajouter un bouton des bibliothèques communes de Flash.

9 Création du Menu Pour cet exemple, nous prendrons un bouton classic de type arcade : Mais vous êtes libre de prendre celui-que vous désirez… Insérez le sur la scène par un glissé-déposé classique. Il est important de donner un nom à l'occurrence de ce bouton, c’est ce qui va nous permettre de le rendre fonctionnel via le code action script. Par exemple : “bouton_start” Comme d’habitude dans le volet propriété de l’objet.

10 Création du Menu : les champs de texte Ces champs vont nous permettre de dialoguer avec l’utilisateur. Pour ce faire nous allons créer 3 champs texte : 1.Un Statique, qui va lui donner la consigne; 2.Un de Saisie, qui va nous permettre de connaître son nom; 3.Un dynamique, pour le rappeler à l’ordre.

11 Création du Menu : les champs de texte Nous allons devoir donner un nom aux cadres de texte de Saisie et Dynamique pour que ceux-ci soient utilisables dans notre code Action-Script. Pourquoi pas : “inputNom” pour le champ de saisie et “Oubli_nom” pour champ dynamique ? Vous avez sûrement deviné que le champ dynamique va afficher un message indiquant que l’utilisateur n’a pas saisie de nom si tel est le cas et qu’il essaie de lancer le le jeu. Pour le cadre “inputNom”, vous pouvez activer les bordures du champ pour que l’utilisateur puisse voir où il doit écrire. Par contre, puisque le champ “oubli_nom” est conditionnel, ne lui en mettez pas.

12 Création du Menu : le Code Vous pouvez désormais ajouter le code suivant sur l’image-clé vide du calque "code" correspondant à l’image-clé du calque "fond". Sélectionnez l’image d’un clic gauche et dérouler le menu “Action” stop(); var pseudo:String; var score:int; var temps:uint; var int1:uint; var int2:uint; startButton.addEventListener (MouseEvent.CLICK, startGame); //Quand on clique sur le bouton : function startGame(e:MouseEvent):void { /*On affecte le nom saisi à une variable "pseudo" pour pouvoir l'utiliser dans une autre frame.*/ pseudo = inputNom.text; if (pseudo.length==1) { Oubli_nom.text = "Oups, vous avez oublié de rentrer votre pseudo!"; } Else { // cette fonction sera codée plus tard //demarrer_jeu(); }

13 Création du Menu : le test Voilà vous pouvez déjà tester cette première partie. Si vous entrez votre nom et cliquez, rien ne se passe puisque nous n’avons pas encore défini “Jeu”.

14 Le jeu Pour réaliser le jeu, nous allons commencer par recréer une nouvelle image-clé vide pour chaque calque. Nous ajoutons un nouveau clip qui prendra toute la scène.

15 Le jeu : les canards ■ Faites : “Fichier/Importer/Importer dans la scène...” ■ Sélectionnez le premier canard (le fait que celui-ci soit numéroté duck1, implique que Flash le reconnaîtra comme une séquence d’images => cliquez sur Ok pour valider l’import de tous les canards);

16 Le jeu : les canards On va faire une édition sur toutes les frames à la fois : 1. On sélectionne la frame 1 et on choisit oignon sur tout 2. On clique sur modifier plusieurs images 3. Maintenant tous les images apparaissent à l’écran mais superposées. On les décale et on les sélectionne toutes avec SHIFT. 4. On les centre toutes à la fois 5. On les décale légèrement du centre, car le centre d’un clip représente le centre de rotation et on va faire tourner les canards plus tard. On met X=-110 et Y=-100

17 On désactive « modifier plusieurs images ». On fait glisser la frame 3 en 10 (on clique dessus, on relâche et on re-clique pour faire glisser) et la frame 2 en 5. On insère une image clef sur la frame 9 et on associe le code : gotoAndPlay(1); pour que le canard batte des ailes en boucle. ==> Cela signifie revenir à la séquence 1. Ainsi dès qu’on arrive à la 9 on reviens à la 1 et ainsi de suite. On nomme la frame 10 dead. Le jeu : les canards

18 Le jeu : le fond ■ Revenez sur la scène principale (cliquez sur “séquence” en haut de la time line) ■ Faites glisser une occurrence du fond de votre choix; ■ Alignez-la horizontalement et verticalement; ■ Transformez-la en Sprite;

19 Le jeu : le fond Notez l’apparition d’un centre. Renommez ce clip en “Fond”;

20 Le jeu : Le viseur Faites glisser la cible et procédez aux même opérations : ■ Nommez cette instance “curseur” pour que nous ayons le même code. ■ Editez le clip : on l’aligner horizontalement et verticalement pour que le clic se fasse bien au centre de la cible quand on va remplacer la souris par ce clip. Pour éditer le clip, il faut que l’image soit devenue un symbole, et même un sprite pour nous. Ensuite il suffit de double-cliquer dessus. Pour sortir de l’édition, cliquez à côté de la scène.

21 Le jeu : Le fusil ■ Instanciez le canon; ■ Convertissez-le en sprite => nom fusil; ■ Nommez l’instance =>: fusil; ■ Editez-le Sprite ; ■ Alignez-le horizontalement et mettez sa coordonnée Y à -170 pour que le centre de rotation coïncide à peu près avec le bas de la scène; ■ Revenez à la scène, alignez-le horizontalement et mettez Y=430;

22 Le jeu : indications Insérez 4 zones de texte : ■ 2 Statiques, pour signaler les zones d'affichage; ■ 2 Dynamiques : nommés “ft_score” et “ft_temps”

23 Le jeu : La musique Finissons en ajoutant la musique de fond du jeu. Pour ce faire, sélectionnez la frame “Jeu” et choisissez le son désiré comme musique de fond. Configurez ensuite pour que la musique démarre au début et qu'elle boucle le temps du jeu. Et voilà vous avez votre environnement, mais pour le moment il n’est pas fonctionnel car il va falloir coder...

24 Le système de Coordonnées de Flash x y 0 x y 0 En noir, le système de coordonnées de la scène. En rouge, le système de coordonnées du clip. Attention : quand on met le clip sur la scène, il est repéré par rapport au coin supérieur gauche, mais quand le fichier.swf est créé, il est repéré par rapport à son centre.

25 Programmation Orientée Objet L'héritage L'héritage permet de créer une hiérarchie dans les classes et de permettre de créer des sous-classe qui ont les mêmes types d'informations que leurs parents plus d'autres informations. Exemple Nous pouvons créer une première grande classe : la classe Véhicule qui va contenir plusieurs attributs : une vitesse un nombre de passager un nom de propriétaire un nombre de roues

26 Programmation Orientée Objet L'héritage Cette classe véhicule possède également une méthode : c'est le constructeur de la classe qui va permettre de contruire l'objet véhicule. De cette classe Véhicule, héritent 2 autres classes : Voiture et Moto ces 2 classes vont alors avoir une vitesse, un nombre de passager,... comme la classe véhicule plus d'autres caractéristiques comme la capacité du coffre. Ici, une twingo est par exemple une instance de la classe voiture.

27 Action Script Dans cette première partie, nous allons créer une classe "Canard". Gardez à l'esprit ce schéma UML qui est une représentation de ce que nous allons créer ensemble. En ActionScript 2, les classes se déclarent à l'extérieur du fichier flash (.fla). Nous allons donc créer un nouveau fichier texte dans notre répertoire de jeu avec comme nom : "Canard.as". Plus tard nous verrons comment importer cette classe à l'intérieur de notre projet. Placez la classe Canard que nous vous fournissons dans le repertoire de votre fichier.fla

28 Action Script : Explications de Canard Nous commençons par déclarer les attributs de notre classe Canard : package{ import flash.display.*; import flash.events.*; public class Canard extends MovieClip{ public var mort:Boolean = false;// va permettre d'identifier si un canard est mort ou non private var crash:Boolean = false;// va permettre d'identifier si un canard est au sol ou non private var vitesse:Number = 5;// règle la vitesse de déplacement du canard private var sens:Number;// défini le sens de déplacement du canard private var scene:MainTimeLine;// permet d'intéragir avec la scene

29 Je suis un Canard Passons maintenant aux méthodes de la classe Canard : Tout d'abord afin de créer des objets canard qui seront des instances de notre classe Canard, nous devons implémenter le constructeur de la classe. C'est une méthode qui sera appelée à chaque fois qu'un objet sera créé. public function Canard(p_scene:Object):void{ trace("je suis un canard"); this.scene=p_scene; // attribue au canard un sens aléatoirement this.sens = Math.round(Math.random()); if (this.sens == 0) { this.sens = -1; } // va initialiser la position d'apparition du canard et sa taille var coef_taille:Number=1-(Math.random()-0.5)/2; this.scaleX = coef_taille; this.scaleY=coef_taille; // Permet de définir la taille du canard tout en gardant le canard proportionne // donne une position aléatoire aux canards : this.x = (this.sens==-1)?800+this.width/2:-this.width/2; this.y = 500*Math.random()+this.height/2; // le canard est dirigé vers le sens où il va. La droite est le sens positif. this.scaleX = this.scaleX*-this.sens; //Lance la méthode enterFrameHandler à chaque rafraichissement this.addEventListener(Event.ENTER_FRAME,enterFrameHandler); this.addEventListener(MouseEvent.CLICK,clickHandler); }

30 … qui bouge et qui meurt Ici il s'agit de la méthode qui va déplacer le canard. private function enterFrameHandler(event:Event):void { trace("qui bouge"); if (this.mort) this.chute(); else this.voler(); if (this.est_hors_scene()) this.demi_tour(); }; Et là qui gère le comportement en cas de tir réussi private function clickHandler(event:MouseEvent):void { trace("et qui... PAF"); if (!this.mort) this.scene.incrementer_score(); // Change l'état du canard : this.mort = true; // Change l'image du canard : this.gotoAndStop("dead"); this.removeEventListener(MouseEvent.CLICK,clickHandler); };

31 Sous méthodes private function voler():void { this.x +=this.vitesse*this.sens; } private function chute():void { if (this.y<550) this.y += 10; else if (this.alpha>=0.05) this.alpha-=0.05; else this.detruire(); } private function est_hors_scene():Boolean { var sortie_droite=800+this.width/2; var sortie_gauche=-this.width/2; var sortie_haut=-this.height/2; var sortie_bas=600+this.height/2; return (this.x>sortie_droite || this.x<sortie_gauche || this.y<sortie_haut || this.y>sortie_bas ); };

32 Je suis un canard propre je ne laisse pas de trace private function detruire():void { trace("pas de trace..."); this.removeEventListener(Event.ENTER_FRAME,enterFrameHandler); this.parent.removeChild(this); };

33 Démarrage et création du viseur function demarrer_jeu (e:MouseEvent=null):void { gotoAndStop(2); score=0; ft_score.text=String(score); temps=30; ft_temps.text=String(temps); viseur (); setTimeout(fin,temps*1000); int1=setInterval(decrementer_temps,1000); int2=setInterval(ajouter_canard,500); } function viseur ():void { cible.startDrag(true); Mouse.hide(); addEventListener (Event.ENTER_FRAME, orienter_fusil); } function orienter_fusil (e:Event):void { img_fusil.rotation =90+ Math.atan2(mouseY-img_fusil.y, mouseX-img_fusil.x)/(Math.PI/180); } Nous allons désormais nous intéresser à la partie ActionScript à intégrer dans le fichier.fla. Placez-vous donc dans l'image du calque "code" et attaquons sans attendre!

34 Compte à rebours et Ajout des canards //Indicateur approximatif (à peaufiner) function compter_canard ():int { return numChildren; } function ajouter_canard ():void { //Ajouter un canard sur la scène //Sauf si il y en a trop (20) } function decrementer_temps ():int { temps-=1; ft_temps.text=String(temps); return temps; }

35 Gestion du score Rappelons que cette fonction est appelée par les objets canard lorsqu'ils sont touchés function incrementer_score ():int { //Incrémenter le score de 1 //Et l'afficher }

36 Menu Résultats La frame de fin va, à l'image du menu, être très simple. Elle sera composée : 1 champ texte statique 1 champ de texte dynamique qui affichera les résultats, que l’on nomme : ft_fin 1 bouton “bt_rejouer“;

37 Fin du jeu et feedback function supprimer_canard ():void { for(var i:int=0;i<numChildren;i++){ var enfant:Object=getChildAt(i); if (enfant is Canard) enfant.mort=true; } function fin ():void { clearInterval(int1); clearInterval(int2); supprimer_canard(); cible.stopDrag(); Mouse.show(); removeEventListener(Event.ENTER_FRAME, orienter_fusil); gotoAndStop(3); ft_fin.text="Bravo "+pseudo+"!\n Vous avez descendu "+score+" canard(s)."; bt_rejouer.addEventListener(MouseEvent.CLICK, demarrer_jeu); }