1 Exposé Flash 3 Objectif : Réalisation d’un jeu de tir aux canards Si28 - Paméla GUERIZEC – le 28 novembre 2005.

Slides:



Advertisements
Présentations similaires
Comment utiliser PowerPoint
Advertisements

SI28 FLASH MX Partie 1 Jérémy Dufetre - Ludovic Pilache.
Éléments de présentation
Lexique des manœuvres de base pour utiliser à PowerPoint
Principe de défilement du document dans un traitement de texte
Support Initiation Publisher 2010
12 novembre 2012 Grégory Petit
Commission scolaire des Laurentides
Accès aux Métiers de l’Informatique
Créer une animation simple Gif avec ImageReady.
Création d'un diaporama Création d'un diaporama
LOGICIEL PL7 MICRO PROGRAMMATION MISE AU POINT Consignes?
Interaction 1 COM3562 Communication Multimédia Février 2012.
ROLE DES DIFFERENTS ELEMENTS
Création et présentation d’un tableau avec Word 2007
POWERPOINT.
Éléments de présentation
S’initier à Google Sketch Up avec la création d’une maison Commencez par ouvrir le logiciel, nous allons afficher tous les outils dont nous aurons besoin.
LOGICIEL PL7 MICRO PROGRAMMATION MISE AU POINT Consignes?
Faire déplacer le personnage à l’aide des flèches du clavier Il y a plusieurs façon de procéder selon nos attentes, mais en voici une qui est très simple:
Scénario Les scénarios permettent de modifier la position, taille … des calques au cours du temps. Son fonctionnement est très proche de celui de Macromedia.
Dreamweaver MX Jauneau Marie Claude-Antoine Zarate.
FLASH MX : séance 1 Sandrine Rabin Nicolas Mollet SI28.
Environnement Flash MX
Guillaume MICHAUD – Yvan LECOMTE
FLASH MX : séance 1 Vivien FILIPPINI Jeanne VERRE Exposé SI28.
Séance Flash 2 TD SI28 du 16/04/07 Nadel Ben Ghmiss Bruno Prémartin.
Exposé DREAMWEAVER 2 Guillaume DUBREUIL Adrien HADOUX.
EXPOSE N° 1 Thomas CLARISSE Yann GUIGUET.
Padmanaathan Gaayathrie
Réalisation d'un jeu de tir aux Canards Florian GAUCHER Alexandre LEVY SI 28 Exposé Flash 3.
Deuxième Exposé Si Nicolas Debeljak Sun Young Park.
FLASH SEANCE 2 Interaction avec Action Script. Action script Langage de programmation utilisé par Flash. Définir des propriétés, des actions des comportements.
** Flash séance 2 Action script. ** Action Script Ajoute de l’interactivité Permet de contrôler les clips  Langage de programmation orienté objet.
Flash 2 ème séance Interaction François Marliac Mickaël Moreira.
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.
Flash MX – Séance 2 Interactions & ActionScript David Rapin Si28 P06.
Dreamweaver le retour Avec Les Formulaires Les Calques
Flash MX er Séance LIU Xinlei GI02.
FLASH MX : séance 1 Adrien Deken Thomas Bergonzini SI28.
Télécharger :
Les formulaires Les calques Les comportements Les scénarios Les modèles Les feuilles de styles (CSS) La mise en ligne Les formulaires permettent à l’utilisateur.
Amine Benabdennbi - Omar Berrada Rekhami Flash 2 – Interactivité Avancée Flash 2 Séance de Flash n°2 TD SI28 du 16/04/2007 Amine Benabdennbi Omar Berrada.
SI28 - Écriture interactive et multimédia Laurent FETZER GSU04, Lucie SOLA GSU06 P PRESENTATION Dreamweaver 2.
 Flash : animations mais aussi interactions  ActionScript : langage de programmation multipliant les possibilités de dynamisme et d’interactivité d’un.
Flash 1 Cariou SandraCoffinot Nicolas. Sommaire : I)Généralités II)Interface de Flash III)Grouper et Dissocier IV)Image clé V)Scénario et calques VI)Symboles.
Télécharger :
Réalisation d’un jeu de tir au canards. Page d’accueil Télécharger les fichiers sources. Importez les images parchemins et fond_shoot Insérer l’image.
Flash : deuxième séance Yannick Bresson Alessandro Camozzato Tien-Quang Tong 22/10/07.
SI28 Flash 3 Tir’O’Canard 1 Téléchargez le swf : 1.Présentation 5.Fin 4.Jeu 2.Zone de travail 3.Menu.
EXPOSE FLASH 2 SI 28 24/10/2006 Delphine GODREAU Hélène PERRIER.
Sommaire : -A propos des images importées -Les boutons et l’interactivité dans la scène -Textes dynamiques -Les clips (les liaisons) -Les sons -Les composants.
DREAMWEAVER MX2 - Séance 2 Les calques Les comportements Les scénarios Les formulaires Les feuilles de style Les modèles Les cadres Mise en ligne Jérôme.
On va découvrir la magie de ....
L’interactivité avec ActionScript. ActionScript Langage de programmation de Flash qui permet de : Gérer des actions et des animations sur la scène Contrôler.
Gaëtan MARANZANA SI28-A04 Flash MX DEUXIEME EXPOSE.
Exposé Flash 3 - Tir aux canards - DIDELOT Guillaume GI02 VAN DER PLAETSEN Virginie GSU04Printemps 06.
Interface Tutorial Flash 2 Par Vincent ² SI28 – P06 Bibliothèque Composant s Panneau actions Barre d'outils Timeline.
Dreamweaver 2 Feuilles de Style CSS Formulaires Calques Comportements
AKOONE Farouck LI Li SI 28 A2004. Flash permet de : Créer des animations pour le Web, pouvant contenir une forte interactivité Des fichiers de faible.
Les calques Les Template (modèles) Les Comportements Les scénarios Les formulaires Les CSS Le serveur Web de l’UTC Présentation.
BOUTET Antoine MARICOT Benoit ActionScript Flash Séance 2.
FLASH Séance 2 Xiaoliang Liang Morgane Le Nan SI28 P05.
Flash – séance 2 Interactions avec Action Script.
Présenté par: François-Xavier LECHEVALIER Fateh BOUGOUFFA
PRESENTATION FLASH 2 MAURIN Marion BERETTI Vincent.
Lundi 20 octobre 2008Séance Flash 21 Séance Flash 2 ActionScript Cheikh DIEDHIOU Germain LEDRUT.
Introduction à PowerPoint, logiciel de présentation Session hiver 2007 Commission scolaire Lac-St-Jean par Stéphanie Boivin.
Cours 5 : Premiers pas avec PowerPoint  L’insertion de diapositives  Appliquer un modèle de conception  Les zones de texte  L’insertion d’images 
Transcription de la présentation:

1 Exposé Flash 3 Objectif : Réalisation d’un jeu de tir aux canards Si28 - Paméla GUERIZEC – le 28 novembre 2005

2 Création de l’interface d’accueil1.

3 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

4 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).

5 · 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 : ceci nous permettra d'accéder ensuite à cet objet via le code Action Script. Création de l’interface d’accueil1.

6 Mise en place du décor du jeu2.

7 · 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.

8 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à } · Utilisation de la fenêtre de déboguage : - dans la partie code du bouton, ajoutez ceci : trace(pseudo.text); - lancez l'exécution. La fenêtre de déboguage n'est jamais affichée avec le Flash Player mais uniquement dans le logiciels Flash lorsque l’on teste l’application.

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

10 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...

11 Création d’un clip « canard » animé4. · Ajouter le code pour gérer la lecture du clip : - 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.

12 Remplacement du curseur de la souris5. · Création du clip « souris » - créer un nouveau symbole de type clip (touche F8) - nommer ce clip "souris", - cocher la case « exporter pour Action Script », - importer l'image cible.png, - placer l'image en (-35, -35) de manière à la centrer. · 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 » 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)

13 É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();

14 É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 }

15 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 à Pour cela nous allons créer une fonction : var niveau = 1; // "Calques Action Script" où sera placé le prochain canard var total = 0; // Combien y a t-il de canards affichés /* Affiche le canard */ function nouveau_canard() { if(total < 10) { _root.attachMovie("canard","mon_canard",niveau); niveau++; total++; } } nouveau_canard();

16 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)

17 Animation dynamique du canard9. · Maintenant il nous faut animer tous ces canards. La fonctions « 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 :

18 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 canard affichés this.removeMovieClip(); // On le retire de la scène }

19 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).

20 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

21 Sons événementiels12. · « Coup de feu » lors du clic et « 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 : // variables des sons son1 = new Sound(); 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() : son1.start(); Vous pouvez tester, quand un nouveau canard arrive, il fait « coin coin »

22 Sons événementiels12. · « Coup de feu » lors du clic et « coin coin » quand un nouveau canard apparaît. - 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 : à chaque clic de souris, un coup de feu se fait entendre…

23 Interactivité au clavier : la canon13. · Nous allons ajouter un dernier é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. - 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. Il faut utiliser : 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(keyPress " ") { _x = _x - 4; } on(keyPress " ") { _x = _x + 4; }

24 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 };

25 Affichage du score15. Nous pouvons enfin ajoute 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 » :