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.

Slides:



Advertisements
Présentations similaires
Exposé Flash 3 - Tir aux canards - BRIGOLLE Mathieu GI04Printemps 07.
Advertisements

Principes de fonctionnement de base
12 novembre 2012 Grégory Petit
Accès aux Métiers de l’Informatique
Cours 7 - Les pointeurs, l'allocation dynamique, les listes chaînées
Créer une animation simple Gif avec ImageReady.
LOGICIEL PL7 MICRO PROGRAMMATION MISE AU POINT Consignes?
Animation 3 COM3562 Communication Multimédia Janvier 2011.
Interaction 1 COM3562 Communication Multimédia Février 2012.
1. Personnaliser lanimation 1 ère étape – Sélectionnez lobjet à animer (cliquez sur lobjet pour le sélectionner) 2 ème étape – Ouvrez le volet « Personnaliser.
Animation 2 COM3562 Communication Multimédia Janvier 2011.
Illustrator Photosphop Retour sur les animations COM3562 Communication Multimédia Hiver 2012.
Spécificités Techniques Campagne NPI Nov Orange : Flash Transparent + 300x250 ATTENTION : s’il y a une interaction entre les deux créations les.
Cliquez pour modifier le style du titre
Tutoriel pour les contributeurs. Comment mettre des articles.
Comment créer un montage vidéo?
Éléments de présentation
Scripts et fonctions Instructions de contrôle
Conception des pages Web avec
LOGICIEL PL7 MICRO PROGRAMMATION MISE AU POINT Consignes?
Programmation créative Semaine 03. Agenda de leçon  Rotation d’un sprite  Modifier la couleur d’un sprite.
Formation Didapages Gilles BADUFLE À partir d’un PPT modifié du C.A.H.M.
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:
FLASH MX : séance 1 Sandrine Rabin Nicolas Mollet SI28.
Environnement Flash MX
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.
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.
SI28 - Écriture multimédia interactive – A2004 Présentation Dreamweaver Partie 2 Pierre Malet GSU05.
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.
FORMULAIRES FOMULAIRE Permet à l’utilisateur d’entrer des renseignements le concernant. Utilisation –Inscription sur un site –Mise à jour d’une base.
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.
 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 :
Flash : deuxième séance Yannick Bresson Alessandro Camozzato Tien-Quang Tong 22/10/07.
1 Exposé Flash 3 Objectif : Réalisation d’un jeu de tir aux canards Si28 - Paméla GUERIZEC – le 28 novembre 2005.
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.
FLASH SEANCE 1 – SI28 Benjamin MONTICO GI05 Automne 2006 Cyrille BOITEL, Sofiann YOUSFI MONOD Printemps 2007 Écriture interactive & multimédia Présentation.
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.
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
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
Gaël DELBARY Benoît DEVEAUX
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.
Transcription de la présentation:

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 parchemin. Ctrl+F8 pour le transformer en symbole. Centrer l’image : fenetre/aligner ou ctrl+K 1

Texte dynamique en multiligne Nom de l’occurrence : oublienom Texte de saisie Nom de l’occurrence : pseudo Texte statique Inserer un bouton de la bibliothèque. Nommer l’occurrence : mon_bouton par ex. Ajouter les zones de texte. Ceci constitue la première image clé du projet. Penser à mettre un stop() dans le code pour cette image Page d’accueil

Décor de la scène principale Créer une deuxième image clé vide. Ajouter fond_shoot sur la scène et la placer en (0,0). Mettre en fonctionnement le bouton de la fonction d’accueil. on(release) { if (pseudo.text!=""){ var nomJoueur=pseudo.text; gotoAndStop(2); } else {Oublie_nom.text="N'oubliez pas d'entrer votre nom"; }

Création du clip canard Créer un clip « canard » ctrl+F8, et cocher exporter pour action script Créer une image clé en 1 et insérer la première image. Les deux autres s’insèrent toutes seules en 2 et 3 Placer les 3 images en (-110, -100) (point de rotation de la chute) Déplacer la dernière image clé en 10 et la deuxième en 5 Image clé en 9, et ajouter gotoAndPlay(1) On gèrera le passage à l’image 10 (mort du canard) plus tard

Création d’une classe Nanard  Ajouter des propriétés au movie Clip canard : taille, sens, transparence et les initialiser nanard.prototype=new MovieClip(); function nanard() { this.mort=false ; this.crash=false; this.vitesse=Math.random()*5+3; if (Math.random()<0.5){this.sens=-1; } else { this.sens=1;} this._xscale=this._yscale=(40+Math.random()*30); this._xscale=this._xscale*-this.sens; if (this.sens==1){ this._x=-10; } else { this._x=810;} this._y=100+Math.random()*150; } vitesse aléatoire comprise entre 3 et 8 Taille de l’occurrence entre 40 et 70% On accorde sa taille en x avec son sens puis avec son déplacement Position verticale aléatoire (entre 100 et 250) État des canards : vivant et en vol Sens de circulation dans un sens ou dans un autre de manière aléatoire Object.registerClass("canard",nanard); Liaison du MC canard avec la classe nanard

nanard.prototype.onEnterFrame=function(){ if(end){ this.removeMovieClip() } if(not this.crash){ this._x=this._x+this.vitesse*(this.sens); if((this._x 880) and (not this.mort)){ this.sens=-this.sens; this._xscale=-this._xscale; } if (this.mort){ this._y=this._y+1+(this._rotation*this.sens); if(this._rotation<45){ this._rotation+=this.sens; } if (this._y>450){ this.crash=true; } var end=false; Var total:Number=0; Déclaration de la variable booleenne jeu fini ou pas. supprimer le canard quand la partie est terminée Déplacement du canard dans le bon sens Fonction appelée à chaque nouvelle image soit 25 fois par sec Quand le canard sort de l’image vivant il change de sens de déplacement et se retourne On fait tourner et tomber le canard quand il est mort : Accélération de la chute et rotation du canard Gestion temporelle du canard

if (this.crash){ --this._alpha; if (this._alpha<0){ total--; this.removeMovieClip(); } on augmente la transparence puis on supprime le canard de la scène avec this.removeMovieClip

Ajout dynamique des canards Création d’une fonction qui ajoute un canard: var total:Number=0; var maxCanard:Number=15; Exporter le clip canard pour l’actionScript (clic-droit->Liaison) function ajoutCanard(){ if (total<=maxCanard){ _root.attachMovie("canard",nouveaucanard, profondeur); //instanciation dynamique d’une occurrence canard au niveau=profondeurtotal++; profondeur++;// nouvelle couche } Chaque objet sur la scène est associé à un niveau de profondeur (ici profondeur), chaque niveau de profondeur ne peut accueillir qu’un seul objet). Il permet de définir quel objet chevauche l’autre. Initialisons donc la variable profondeur : Var profondeur:Number=0;

Ajout dynamique des canards Ajout de canard au départ: for (i=0;i<maxCanard;i++){ ajoutCanard(); } La fonction SetInterval: SetInterval permet d’exécuter une fonction à intervalle de temps régulier, indépendamment de la cadence de l’animation. Nomdelinterval=SetInterval(nom de la fonction sans les parenthèses, intervalle de temps en milisecondes) nouveaucanard=setInterval(ajoutCanard,700); Toutes les 700 ms, la fonction ajoutCanard() sera appelée.

Interactions souris Création de la cible Importer l’image « cible.jpg » dans la bibliothèque Créer un nouveau symbole CibleSouris (Ctrl+F8) Ajouter l’image au centre du symbole (utilisation du panneaux Aligner) Insérer le symbole CibleSouris dans l’image 2 de votre scène nommer l’occurrence « souris » Déplacement de la souris On souhaite remplacer la souris par la cible, pour cela on ajoute le code suivant à l’occurrence du symbole CibleSouris onClipEvent(load){ //lorsque l’on charge le clip Mouse.hide(); // cacher la souris startDrag(this, true); // l’objet suit la souris }

Interactions souris Gestion du clic A chaque clic, le nombre de munitions diminue, lorsqu’il n’y a plus de munitions, la partie est terminée. Création d’une variable munitions initialisé à 50 (par exemple…) sur l’image 2 de la scène principale: var munitions:Number=50; A nouveau, sur l’occurrence de CibleSouris: onClipEvent(mouseUp){ //Quand on clique sur l’objet if (_root.end==false){ //tant qu’on est toujours en train de jouer _root.munitions--; // On décrémente les munitions if(_root.munitions==1){ //lorsqu’il n’y a plus de munitions findujeu(); //On lance la fonction findujeu() }

Interactions souris Clic sur les canards et morts des canards (niarf!) A chaque clic sur un canard « vivant », celui-ci devient « mort », son animation change et le score est incrémenté. var score:Number=0; nanard.prototype.onPress=function(){ //lorsqu’on clique un objet « nanard » if(this.mort==false){ // s’il est vivant this.gotoAndStop(10);// on remplace l'image du canard par celle du canard mort score++; //on incrémente le score du joueur this.mort=true; // le canard devient "mort" }

Un canon de tir Création d’un canon de tir On souhaite maintenant associé à la cible, un canon fixe qui pointe dans la direction de la cible Importation de l’image Création d’un nouveau symbole « canon » Centré l’image dans le symbole Insérer le symbole dans la scène, centré en X, y=450. Nommer le « fusil ». fusil.onMouseMove=function(){ var dx =souris._x-fusil._x; var dy=souris._y-fusil._y; var angle=-Math.atan(dx/dy)*180/Math.PI; if(angle <-40) { angle=-40;} //limitation de l'angle canon if (angle>40){ angle=40;} fusil._rotation=angle;//fait tourner le fusil de l'angle voulu; } On détermine l’angle entre le canon et la cible à chaque mouvement de souris (onMouseMove), puis on fait tourner le canon de cet angle pour l’aligner avec la cible. On limite toutefois cette angle à 40°.

Informations aux joueurs Score et Munitions Importer l’image cartouche. Instancier l’image cartouche et l’image duck3 sur la scène Ajouter des zones de texte dynamique en vis-à-vis, dans le champs « variable », taper « score » et « munitions ».

Fin du jeu Image de fin du jeu Copier l’image 1 dans l’image trois de votre animation. Retirer les zones de texte. Ajouter de nouvelles zones de texte qui donnent : le nom du joueur et son score. Modifier le code du bouton pour en faire un bouton « Rejouer » Finir la partie Nous allons maintenant créer une fonction qui gère la fin de la partie : _global.findujeu=function():Boolean { //on crée une fonction qui renvoie une valeur booléenne gotoAndStop(3); clearInterval(nouveaucanard); // On arrête l’intervalle qui ajoutait des canards Mouse.show();// on remontre la souris end=true; return findujeu; //on renvoie la dernière valeur (ici celle de end) }

Gestion du son Ajout d’un son lors de l’apparition d’un canard Importer les sons « duck », « gunfire » et « musique » Dans le code principal: var son1=new Sound(); son1.loadSound("duck.mp3"); son1.setVolume(80); Dans la fonction ajoutCanard(); _root.son1.start(); A vous d’ajouter un son lorsque l’utilisateur tire. La musique : var musique=new Sound(); musique.loadSound("musique.mp3");//Chargement du son associé à la variable "musique" musique.setVolume(80); musique.onLoad=function(){ musique.start(); } Dans l’image 3, ajouter au code: musique.stop(); pour arrêter la musique.

De nombreuses améliorations sont possibles : - Changer les conditions d’arrêt - Ajouter un chrono - Ajouter un commentaire en fonction du score - … A vous de jouer!