Exposé Flash 3 - Tir aux canards - DIDELOT Guillaume GI02 VAN DER PLAETSEN Virginie GSU04Printemps 06

Exposé Flash 3 Objectif : Réalisation d’un jeu de tir aux canards

Création de l’interface d’accueil1.

Création de l’interface d’accueil1. Propriétés du document Fond : noir Taille : 800*600 px Nombre d’images par seconde : 24 Zone de « texte statique » Zone de « texte de saisie » Bouton de la bibliothèque commune Fond : une image.png

Création de l’interface d’accueil1. · Propriété du document : (CTRL + F3 pour afficher le panneau de propriété) - couleur de fond : noir, - taille du document : 800px X 600px, - nombre d'images par seconde : 24 (pour avoir une animation fluide). · Fond d'écran : - importer "parchemin.png" (Fichier/Importer), - le placer au centre (outil « Aligner » : CTRL + K pour afficher le panneau).

· Insertion du bouton depuis la bibliothèque : - menu "Fenêtre / Bibliothèques Communes / Boutons », - mettre le bouton « Arcade boutons / arcade button – red » sur la scène, - lui donner "mon_bouton" comme nom d’occurrence (panneau « propriétés »). · Phrase invitant l’utilisateur à saisir son prénom : - sélectionner l'outil « texte » et créer une zone de texte en haut du parchemin, - dans les propriétés, choisir "texte statique" et saisir la phrase. · Champ pour saisir son prénom : - faire une nouvelle Zone de texte, mais cette fois, sélectionner "texte de saisie" dans les propriétés, - lui donner "pseudo" comme nom d’occurrence et affecter le nom entré à une variable “nom”. Création de l’interface d’accueil1.

Mise en place du décor du jeu2.

· Création de la deuxième image clé : - cliquer sur l'image 2 dans le scénario et faites une deuxième image clé vide, - importer l'image "fond_shoot.png" dans la scène, - la positionner en 0px, 0px (panneau « Propriétés »). · Lancer l'animation et constater le problème... - appuyer sur CTRL + Entrée. · Stopper la tête de lecture sur le première image clé : - cliquer sur l'image 1 dans le scénario, - appuyer sur F9 pour afficher la fenêtre « Actions », - passez en mode expert, - vérifier d'avoir bien sélectionné "Actions pour l'image 1 du Calque 1" en haut de la fenêtre de code : tout le code saisi dans le cadre en dessous sera exécuté à chaque fois que l'image 1 sera affichée, - taper stop(); et tester votre animation (CTRL + Entrée). Mise en place du décor du jeu2.

Gestion du bouton3. · Fonctionnement d’un bouton : - dans le code d'un bouton, il ne peut y avoir que des gestions d'événements : - vous pouvez facilement voir tous les événements gérés par un bouton en tapant on( : - "press" c'est quand on appuie sur le bouton de la souris, - "release" quand on relâche le bouton de la souris sur le bouton - "mouseOver" quand on passe sur le bouton... · Ajouter le code sur le bouton : on(release){ if(pseudo.text != ""){ gotoAndStop(2); // On va à l'image 2 et on arrête là }

Création d’un clip « canard » animé4. · Création du clip : - créez un nouveau symbole de type clip (raccourci ctrl F8), - appelez le "canard", - puis cochez "Exporter pour l'action script". (pour que le clip soit utilisable dans le code Action Script)

Création d’un clip « canard » animé4. · Insertion des images dans le clip « canard » : - importer l'image duck1.png en répondant oui à la question pour importer une séquence d'image : les images duck1.png, duck2.png et duck3.png vont être chargées automatiquement dans des images clés différentes, - pour les trois images, placez l'image du canard en (-110, -100), cela va définir le point de rotation au centre des canards pour qu'ils tournent correctement en tombant par la suite, - déplacez la dernière image clé sur l'image 10 et la deuxième en image 5. - Si on lit l'animation (Entrée) on se rend compte du problème...

Création d’un clip « canard » animé4. · Ajouter le code pour gérer la lecture du clip : But : créer l’animation du canard qui vole. - créer un image clé sur l'image 9, - dans le code de cette image, ajoutez la commande : gotoAndPlay(1); Ceci va faire revenir la tête de lecture au début (sur l’image 1) et créer ainsi une animation infinie.

Remplacement du curseur de la souris5. · Création du clip « souris » - créer un nouveau symbole de type clip (raccourci ctrl F8) - nommer ce clip "souris", - cocher la case « exporter pour Action Script », - importer l'image cible.png, - centrer l’image : se servir des commandes d’alignement ou placer l'image en (-35, -35). · Créer une instance du symbole « souris » sur la scène : - créer un objet souris sur la scène en faisant glisser le symbole « souris » de la bibliothèque vers la scène (image 2 de la séquence principale). - nommer cet objet « souris » également. - afficher la fenêtre « Actions » de ce clip et ajouter le code suivant : onClipEvent(load) { // Quand ce clip sera chargé sur la scène (autrement dit quand l'image sera affichée ) startDrag(this, true); // On dit que 'cet' objet (l'image de la souris) suit la souris. Mouse.hide(); // On cache l'image de la souris standard (la flèche blanche). } Testez, vous avez bien un curseur de souris personnalisé (CTRL + Entrée)

Écriture de la classe « daffy »6. · Définition de la classe « daffy » : Nous allons lier notre classe « daffy » et notre clip « canard » de manière à ce que les actions que nous allons programmer dans daffy s'ajoute à notre clip canard. Le canard est un Clip, ou plutôt un MovieClip dans le langage Action Script, ainsi pour accéder aux propriétés du canard (comme sa taille, sa position, sa transparence) nous devons dire que notre classe daffy hérite des propriétés des objets graphiques en général. Insérer dans les actions de l'image 2 de la séquence principale : /* La classe hérite des propriété d'un clip car notre canard est un objet de la bibliothèque */ daffy.prototype = new MovieClip(); Pour intégrer l’animation du canard à la séquence : utilisation d’une classe

Écriture de la classe « daffy »6. · Constructeur de la classe daffy : Grâce à cette classe nous allons pouvoir initialiser chaque canard avec des valeurs différentes à leur arrivée sur la scène, pour cela nous utilisons le constructeur qui est appelé lorsqu'un nouveau canard est créé : function daffy() { this.mort = false; // Un canard est vivant par défaut this.crash = false; // Un canard vole par défaut this.vitesse = Math.random() * 5 + 3; // La vitesse est aléatoire this.sens = int(Math.random()); // sens aléatoire également (ici sens = 0 ou 1) if(this.sens == 0) this.sens = -1; // fait en sorte que sens soit -1 ou 1 uniquement. this._xscale = this._yscale = Math.random() * ; // lui donne une grosseur aléatoire this._x = Math.random() * ; // donne une position aléatoire au canard this._y = Math.random() * ; this._xscale = this._xscale * -this.sens;// le canard est dirigé vers le sens ou il va }

Création dynamique d’un canard7. · Tout d'abord il faut dire à Flash que notre classe est liée à l'objet canard de la bibliothèque : /* Liaison de notre classe avec l'objet de la bibliothèque */ Object.registerClass("canard",daffy); · Mais nous voulons plusieurs canards et nous voulons limiter leur nombre à 10. (chaque canard sera géré sur un calque différent) - Pour cela nous allons créer une fonction : var niveau = 1; // "Calques Action Script" où sera placé le prochain canard var total = 0; // Nombre de canards affichés /* Affiche le canard */ function nouveau_canard() { if(total < 10) { _root.attachMovie("canard","mon_canard",niveau); niveau++; total++; } } nouveau_canard();

Création dynamique d’un canard (suite)8. - Nous allons faire une temporisation pour appeler régulièrement la fonction nouveau_canard(); pour qu'il y ait toujours des canards à shooter sur la scène. - Ajoutez tout simplement à la fin du code que nous venons d’écrire : setInterval(nouveau_canard, 700); Ceci va ajouter un nouveau canard à l'écran toutes les 700 millisecondes. - Lancer l’animation pour tester (CTRL + Entrée)

Animation dynamique du canard9. · Maintenant il nous faut animer tous ces canards. La fonction « onEnterFrame » de la classe « daffy » est appelée 24 fois par secondes, à chaque rafraîchissement de l'image de canard. Donc à chaque rafraîchissement, nous allons faire avancer chaque canard. Pour faire avancer le canard, il suffit de modifier les propriétés _x de chaque canard, donc _x = _x + 1; ferait avancer chaque canard vers la droite. Nous pouvons directement gérer les cas où le canard à été touché (il tombe), où il est par terre (il disparaît) et où il est sortit de l'écran (dans ce cas on change son sens). Pour réaliser toute cette gestion du déplacement du canard, saisir le code :

Animation dynamique du canard9. daffy.prototype.onEnterFrame = function() { if(not this.crash) { // Si le canard n'est pas au sol this._x = this._x + this.vitesse * this.sens;// Déplace le canard horizontalement if(((this._x - this._width > 800) or (this._x + this._width < 0)) and not this.mort) { this.sens = -this.sens;// On change son sens this._xscale = -this._xscale; // On inverse horizontalement l'image } if(this.mort) { // S'il a été touché, il faut qu'il tombe this._y = this._y (this._rotation*this.sens) / 4;// Fait descendre le canard if(this._rotation < 30) this._rotation += this.sens; // Fait tourner l'image du canard if(this._y > 450) this.crash = true;// S'il touche terre : il est crashé } } else { // Le canard est par terre this._alpha--; // On réduit sa transparence if(this._alpha < 0) { // S'il n'est plus visible total--; // On le retire du total des canards this.removeMovieClip(); // On le retire de la scène }

Interaction à la souris10. · Pour que le canard soit touché, il suffit de cliquer dessus, donc de définir l'événement onPress de la classe daffy : /* Action quand on clique dessus */ daffy.prototype.onPress = function() { this.mort = true; // Change l'état du canard this.gotoAndStop(10); // Change l'image du canard } La variable "mort" est passée à « true », d'après la fonction d'affichage précédemment programmée, le canard commencera sa chute. De plus, on arrête l'animation du canard et on affiche une image de canard touché pour plus de réalisme (image 10 du clip canard). - Lancer l’animation pour tester (CTRL + Entrée)

Sonorisation11. Avec action script, on peut facilement charger et lancer la lecture de sons dynamiquement. · Musique de fond : Ajouter une musique de fond : dans le code de l'image 2 de la séquence principale, ajoutez : var son3 = new Sound(); // créer une nouvelle instance de l’objet Sound son3.onLoad = function() { son3.start(); } son3.loadSound("zikette.mp3"); // bien mettre le chemin relatif vers le son son3.setVolume(80); // volume en pourcentage son3.onSoundComplete = function() { son3.start(); // pour que la musique soit jouée en continu } - Lancer l’animation pour tester (CTRL + Entrée)

Sons événementiels12. « coin coin » quand un nouveau canard apparaît. - Ajouter le code dans l'image 2 pour charger les sons sans qu'ils soient joués : son1 = new Sound(); // variables des sons son2 = new Sound(); son1.loadSound("duck.mp3");// Charge les fichiers son2.loadSound("gunfire.mp3"); // Charge les fichiers son1.setVolume(80); // définit les volumes son2.setVolume(100); // définit les volumes - Ajouter cette commande dans la fonction nouveau_canard() dans la boucle if : son1.start(); Vous pouvez tester, quand un nouveau canard arrive, il fait « coin coin ».

Sons événementiels12. · « Coup de feu » lors du clic. - Sélectionner Actions sur « souris » en haut de la fenêtre de code action script : on va ajouter la lecture du coup de feu lorsqu'on clique. - Créer un nouvel événement « onMouseDown » comme ceci : onClipEvent(mouseDown) { _root.son2.start(); } La présence du _root est obligatoire pour indiquer que l'on s'adresse à une variable située "dans le code de l'image" et non pas à une variable de l'objet souris. - Tester l’animation (CTRL+entrée) : à chaque clic de souris, un coup de feu se fait entendre…

Interactivité au clavier : la canon13. · Nous allons ajouter un autre élément : le canon du fusil. Nous pourrons le déplacer de gauche à droite avec les flèches de direction du clavier et il se dirigera automatiquement vers le pointeur de la souris. - importer l’image canon.png - charger l'image canon.png dans un nouveau clip nommé canon, - placer l'image en (-52px, -170px), - placer une instance du clip sur la scène en position (350, 430), - donner le nom "fusil" à cette instance, - dans le code "Actions sur fusil (canon)", nous allons ajouter une gestion des événements du clavier pour le déplacer latéralement. On peut par exemple intercepter l'appui sur un a : keyPress "a", cela peut également être,,, etc... pour intercepter les touches spéciales du clavier. Dans notre cas nous voulons simplement gérer gauche et droite et déplacer le fusil quand c'est le cas. On ajoute donc dans le script du canon : on(keyPress " ") { _x = _x - 4; } on(keyPress " ") { _x = _x + 4; }

Interactivité au clavier : la canon (suite)14. Enfin, nous allons diriger le canon du fusil vers la cible, nous cela nous allons détecter l'événement souris "onMouseMove" appelé à chaque mouvement de la souris, et faire une rotation du fusil pour qu'il soit dirigé vers la cible. - Pour cela il faut mettre dans le code de l'image 2 de la séquence principale : fusil.onMouseMove = function () { var mx = souris._x - fusil._x; // calcul d'angle var my = souris._y - fusil._y; var angle = -Math.atan(mx / my) * 180 / Math.PI; if(angle 40) angle = 40; fusil._rotation = angle; // définit l'orientation };

Affichage du score15. Nous pouvons enfin ajouter le score au fur et à mesure que le joueur tue des canards : à chaque canard tué, un point de plus… - ajouter une variable score initialisée à 0 sur la séquence principal à l’image 1 : var score=0; - à chaque canard tué, il faut augmenter le score de 1 point : après le code : /* Action quand on clique dessus */ daffy.prototype.onPress = function() { this.mort = true; // Change l'état du canard ajouter cette ligne : score++; - sur l’image 2 de la séquence principale, on peut ajouter deux champs de texte :. un champ de texte statique, dans lequel on écrit : « Score : ». un champ de texte dynamique auquel on affecte la variable « score » :

Page de fin16. Un texte statique donne une phrase de fin. On peut ajouter : -un texte dynamique reprenant le nom donné par l’utilisateur au début (variable “nom”), - un autre texte dynamique donnant le nombre de canards tués (variable “score”). CTRL+entrée pour se rendre compte de la dernière chose à ajouter…

Insertion du chronomètre17. Nous pouvons ajouter un chronomètre pendant le jeu… Pour cela, nous allons dans quelques instants utiliser des frame : On nomme des frame afin de renvoyer à un calque précis à un moment donné, plutôt qu’à la série de calques correspondant à une image (colonne de la timeline). -ajouter un calque « chrono », dans lequel on mettra tout le script concernant le chronomètre. -dupliquer l’image 2 trois fois (utile pour diviser le calque chrono) : c’est-à-dire déplaçer de trois images l’image 3 (elle arrive à l’image 6), puis, pour avoir des frame différentes à chaque image, ajouter à chaque image située entre la 2 et la 6 une image clé. - nommer les frame (dans “propriétés”) : L’image 3 se nomme “debut”, L’image 4 se nomme “boucle”, L’image 6 se nomme “fin” (il n’est pas nécessaire dans le cas présent de nommer l’image 5 qui ne sert qu’à une partie du script de boucle).

Insertion du chronomètre16. stop (); t = 30; // valeur de depart if (Number(t)>0) {// debut du compte a rebour gotoAndPlay ("debut"); } n = getTimer()+t*1000; if (getTimer()>n) {// fin du decompte gotoAndPlay ("fin"); } t = Math.round((n-getTimer())/1000);// calcul du rebour chrono = t; // affichage du decompte Image 1 : pas de script (interface d’accueil) Image 2 : initialisation de la boucle Image 3, frame « debut » : conversion des millisecondes du getTimer en secondes Image 4, frame « boucle » : calcul du temps

Insertion du chronomètre16. gotoAndPlay ("boucle"); stop(); Image 5 : retour en boucle Image 6, frame « fin » : fin Ajouter maintenant à l’image 2 du claque de départ, à côté du score, le compte à rebours avant la fin du jeu : un texte statique « chrono » et un texte dynamique auquel on affecte la variable « chrono ». Et maintenant… place au jeu !!!