Télécharger :

Présentation au sujet: "Télécharger :"— Transcription de la présentation:

1 Télécharger : http://wwwcyg.utc.fr/si28/medias/flash3-fricoteaux.zip

2 Préparation On modifie les propriétés du projet

3 On importe certains fichiers

4 On classe les fichiers On ajoute un calque et on les renomme. On insère 4 images clefs vides à la suite avec 2 par calques. Les 3 frames du calque Fond s’appellent Menu, Jeu et Fin.

5 On insère une instance de parchemin sur la scène et on l’aligne sur les bords 1 \fenêtre\aligner ou ctrl+k pour afficher l’onglet Réalisation du menu

6 On ajoute un bouton de la bibliothèque commune en faisant glisser sur le dossier « Menu »: \fenêtres\bibliothèque commune\boutons\classic buttons\arcade button\arcade button red On le met sur le parchemin et on l’appelle bouton_start On met 5 cadres textes : Textes statiques Textes de saisie avec bordure Nom de l’occurrence : pseudo Nom de variable : munitions

7 Gestion des polices dans Flash Par défaut, il est conseillé d’utiliser uniquement les polices _sans et _serif. Cela assure la compatibilité avec tous les ordinateurs. Si un ordinateur ne possède pas une police demandée, le texte ne s’affiche pas. _sans renvoie vers la police sans sérif par défaut associée à l’ordinateur (souvent c’est Arial) et _serif renvoie à la police par défaut avec serif (souvent Times New Roman) Si jamais on veut utiliser une police particulière, il faut l’intégrer au.swf. On peut intégrer partiellement ou la totalité d’une police grâce à l’icône « Intégrer… » dans les propriétés du cadre texte. Par exemple on peut mettre une police spéciale et intégrer les caractères « Latin basique » pour la saisie du pseudo.

8 On ajoute un composant Flash. On le fait glisser sur le dossier Menu : \fenêtre\composants ou ctrl+F7 et ensuite \user interface\radiobutton On fait glisser 3 instances sur la scène et on les redimensionnent avec l’outil de transformation libre. On change les labels des composants par : facile, moyen et difficile. On nomme les occurrences par : boutonfacile, boutonmoyen et boutondifficile. On change la valeur de selected pour que facile soit coché par défaut

9 On ajoute le code suivant sur le frame 1 du calque code : stop(); //Pour redimensionner les radiobuttons boutonfacile.fontSize = 39; boutonmoyen.fontSize = 39; boutondifficile.fontSize = 39; //Quand on clique sur le bouton rouge : bouton_start.onRelease = function() { /*On affecte le pseudo du joueur a une variable nom pour pouvoir l'utiliser dans une autre frame.*/ nom = pseudo.text; //Si le joueur n'a pas rentré son nom, il ne se passe rien. if (pseudo.text != "") { //Initialisation des variables score = 0; reste = munitions; temps = 0; //On règle la difficulté if (boutonfacile.selected) { difficulte = "facile"; } else if (boutonmoyen.selected) { difficulte = "moyen"; } else if (boutondifficile.selected) { difficulte = "difficile"; } //On lance le jeu gotoAndPlay("Jeu"); } };

10 Le jeu On se positionne maintenant sur la frame 2 du calque Fond. On crée un movieclip canard dans le dossier Jeu et on l’exporte pour ActionScript avec le nom canard. On importe sur la scène duck1.png et on répond oui pour importer les autres duck. On remarque que chaque image s’est mise sur un frame.

11 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

12 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. On nomme la frame 10 dead. On revient sur la scène principale et on met une instance de fond_shoot sur la scène. On l’aligne au centre de la scène (il n’est pas nécessaire de le redimensionner car il a déjà la bonne taille). On le convertit en clip et on l’appelle fond_jeu, car on va lui associer du code ActionScript (on ne peut pas associer de code à une image). On nomme cette instance fond. On met une instance de cible. On le convertit en clip et on l’appelle souris, car on va lui associer également du code. On nomme cette instance curseur. On édite le clip : on l’aligne horizontalement et verticalement pour que le clic se fasse bien au centre de la cible quand on va remplacer la souris par ce clip. On ajoute 3 cadres textes dynamiques et 3 textes statiques associés : Texte statique initialisé par : « Score : » et texte dynamique associé avec comme nom de variable score. Texte statique initialisé par : « Munitions : » et texte dynamique associé avec comme nom de variable reste. Texte statique initialisé par : « Temps : » et texte dynamique associé avec comme nom de variable temps.

13 On ajoute une instance de canon sur la scène et on le convertit en clip. On édite ce clip : on l’aligne horizontalement au centre et on met Y=-170 pour que le centre de rotation coïncide à peu près avec le bas de la scène. On revient sur la scène et on nomme l’instance fusil. On aligne le fusil horizontalement et on le place en Y=430.

14 Nouveautés ActionScript Fonctions mathématiques : - Arrondir à l’unité : Math.round(10,5637) renvoie 11 - Tronquer à l’unité : int(10,5637) renvoie 10 - Générer une variable aléatoire qui suit une loi uniforme sur [0;1] : Math.random() renvoie par exemple 0.72354765236 Propriétés d’un clip : _x : coordonnées en x du clip en pixels _y : coordonnée en y en pixels _xscale : échelle en x en % 50% : la largeur du clip est réduite de moitié -100 % : la largeur du clip a sa taille d’origine mais le symétrique du clip par rapport à un axe parallèle à l’axe des x et passant par le centre du clip est affiché. _yscale : échelle en y en % Axe de symétrie

15 Systèmes de coordonnées de Flash x y 0 x y 0 En noir, c’est le système de coordonnées de la scène. En rouge, c’est 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.

16 On l’ajoute le code suivant à la frame 2 du calque code : stop(); //On remplace le curseur /*On commence à déplacer le curseur avec la souris et on centre la souris au centre du curseur*/ startDrag(curseur, true); //On cache la souris Mouse.hide(); /* La classe hérite des propriété d'un clip car notre canard est un objet de la bibliothèque */ daffy.prototype = new MovieClip(); Autres commandes ActionScript : startDrag(…) : permet de déplacer un clip sous la souris. Il est possible de centrer le clip sur la souris. On peut également contraindre le déplacement dans un rectangle. attachMovie(« bidule », « mon_machin », 0) : permet d’afficher le clip nommé bidule (nom exporté pour ActionScript) à la profondeur 0 et de nommer cette instance mon_machin. On verra plus tard ce qu’est la profondeur.

17 function daffy() { //On crée des variables pour la classe daffy : //On ne peut tuer qu'une seule fois un canard : this.anti_triche = false; // Un canard est vivant par défaut : this.mort = false; // Un canard vol par défaut : this.crash = false; // La vitesse est aléatoire (entre 5 et 8) : this.vitesse = Math.random()*5+3; // sens aléatoire également (ici sens = 0 ou 1) : this.sens = Math.round(Math.random()); // fait en sorte que sens soit -1 ou 1 uniquement : if (this.sens == 0) { this.sens = -1; } // Donne une grosseur aléatoire aux canards (entre 20 et 60 %) : this._xscale = this._yscale=Math.random()*40+20; // donne une position aléatoire aux canards : this._x = Math.random()*680+66; this._y = Math.random()*140+60; // le canard est dirigé vers le sens où il va. La droite est le sens positif. this._xscale = this._xscale*-this.sens; } /* Liaison de notre classe avec l'objet de la bibliothèque */ Object.registerClass("canard", daffy); /* Création d'un canard à l'écran */ _root.attachMovie("canard","mon_canard",0);

18 On a bien un canard qui s’affiche à une position aléatoire. On met en commentaire la ligne _root.attachMovie("canard","mon_canard",0); Nouveautés ActionScript : Le switch : permet d’exécuter une suite de commande selon la valeur d’une variable. switch (variable) { case 0 : //si la variable vaut 0, on exécute ce code variable++; break; /*permet de sortir du switch, sinon toutes les autres commandes sont exécutées.*/ case 1 : …. etc… } Truc=setInterval(ma_fonction, 1000) : permet de lancer ma_fonction toutes les secondes. Truc est le nom de setInterval et on s’en servira pour arrêter les appels de ma_fonction.

19 On tape à la suite le code suivant : //Choix de la difficulté : switch (difficulte) { //si on a coché facile : case "facile" : //Nombre de canards au maximum à l'écran : max_canard = 10; // délai entre chaque apparition d'un nouveau canard : delai = 1000; break; case "moyen" : max_canard = 20; delai = 500; break; case "difficile" : max_canard = 30; delai = 300; break; } // Profondeur du canard : niveau = 1; // Nombre de canards affichés : total=0; //Création d'un canard function nouveau_canard() { if (total<max_canard) { attachMovie("canard", "mon_canard", niveau); niveau++; total++; } //Temporisation de la création de canards creation_canard = setInterval(nouveau_canard, delai);

20 La profondeur La profondeur d’un objet est un nombre qui représente le plan qu’il occupe par rapport aux autres objets. Par exemple, un objet en arrière plan aura la profondeur la plus faible. A une profondeur, correspond au maximum un objet. Flash attribue automatiquement une profondeur à chaque objet de la scène. Le 1 er objet placé sur la scène aura une profondeur de -2 14, le 2 ème une profondeur de -2 14 +1, etc… On peut utiliser les calques pour régler facilement la profondeur. On crée les canards en commençant à une profondeur de 1, ils seront donc au- dessus de tous les autres objets. Pour avoir le curseur au-dessus des canards, il faut changer sa profondeur manuellement via le code suivant : curseur.swapDepths(999999); Le curseur aura alors une profondeur de 999999. Cette commande s’appelle swapDepths car on permute la profondeur avec l’objet qui se situe à ce niveau au cas il y en aurait un. En effet, il ne peut y avoir au plus qu’un objet à une profondeur donnée. Attention : après avoir modifié sa profondeur, le curseur va rester sur toutes les frames si on ne le supprime pas !

21 Nouveautés ActionScript : Fonction mathématique : Pour avoir la valeur absolue d’un nombre : Math.abs(-34.45) retourne 34.45. Propriétés d’un clip : _width : la largeur du clip. _alpha : la transparence d’un clip en %. 50 % : à moitié transparent 0 % : invisible _rotation : angle de rotation du clip. Le centre de rotation est le centre du clip. + 45 : rotation de 45° dans le sens horaire -45 : rotation de 45° dans le sens antihoraire removeMovieClip() : supprime le clip de la scène

22 On ajoute le code suivant à la suite : /*On met le curseur au premier plan (à une profondeur très élevée)*/ curseur.swapDepths(999999); /*Pour faire bouger les canards*/ daffy.prototype.onEnterFrame = function() { if (reste == 0) { //S'il n'y a plus de munitions, on supprime les canards. this.removeMovieClip(); } else { if (not this.crash) { // Si le canard n'est pas au sol : // Déplace le canard horizontalement : this._x = this._x+this.vitesse*this.sens; // Si le canard est sorti de l'écran vivant : if ((((this._x+(this._width*90/200))>800) or ((this._x- (this._width*110/200))<0)) and not this.mort) { // On change son sens : this.sens = -this.sens; // On inverse horizontalement l'image : this._xscale = -this._xscale; //On donne un peu d'élan au canard pour ne pas qu'il reste bloqué sur le bord this._x = this._x+this.sens; //On enlève 1 point au score. score--; }

23 if (this.mort) { // S'il a été touché, il faut qu'il tombe // Fait descendre le canard. La descente accélère quand la rotation augmente : this._y = this._y+1+(Math.abs(this._rotation))/4; // Fait tourner l'image du canard : if (Math.abs(this._rotation)<30) { this._rotation += this.sens; } // S'il touche terre : il est crashé if (this._y>450) { this.crash = true; } } else { // Le canard est par terre // On réduit sa transparence : this._alpha--; if (this._alpha<=0) { // S'il n'est plus visible, on le retire du total des canards affichés : total--; // On le retire de la scène this.removeMovieClip(); } };

24 //On retire 1 point s'il tire sur le fond fond.onMouseDown = function() { score--; }; /* Action quand on clique dessus */ daffy.prototype.onPress = function() { if (not this.anti_triche) { /*On augmente le score de 4 pour l'augmenter de 3 (car ça fait -1 quand on clique sur le fond) :*/ score += 4; // Change l'état du canard : this.mort = true; // Change l'image du canard : this.gotoAndStop("dead"); //Le prochain clic sur ce canard ne sera pas pris en compte : this.anti_triche = true; } else { /*On a cliqué plus d'une fois sur le même canard donc on incrémente le score pour ne pas qu'il change (car ça fait -1 quand on clique sur le fond) :*/ score++; } };

25 Mettre du son dans Flash Il y a 3 différentes manières d’ajouter du son à une animation : on peut charger un fichier externe (seulement s’il est au format MP3) : son2.loadSound("musique.mp3"); on peut lancer un son présent dans la bibliothèque par un code ActionScript : son1.attachSound("mon_son"); on peut associer un son à une frame : On peut alors lui ajouter des effets, jouer le son un certain nombre de fois, régler la synchronisation du son : - événement : le son se déclenche dès que la frame est atteinte. C’est ce qui est utilisé quand on lance un son via un code ActionScript. - démarrage : même chose que évènement sauf qu’il n’est pas possible de superposer plusieurs instances de cette musique (au cas où la frame est atteinte une 2ème fois avant que la musique déclenchée la 1ère fois ne soit finie). - arrêt : la musique sélectionnée s’arrête. - en continu : le son est parfaitement synchronisé. Sur un ordinateur lent, des frames seront passées afin que le son soit toujours en rapport avec l’image.

26 On ajoute zikette.mp3 à la frame 2 du calque fond. On choisit la synchronisation évènement et on la joue en boucle. On va lancer duck.mp3 dès qu’un canard apparaît. Pour cela, il faut l’exporter pour ActionScript sous le nom coincoin. On va charger gunfire.mp3 (présent dans le même dossier que le.fla) avec du code ActionScript. On ajoute le code suivant : // Variables des sons : son1 = new Sound(); son2 = new Sound(); // Charge les fichiers : son1.attachSound("coincoin"); son2.loadSound("gunfire.mp3"); // Définit les volumes : son1.setVolume(80); son2.setVolume(100); Dans la fonction nouveau_canard, dans le if (total<max_canard), on ajoute la ligne suivante : son1.start(); new Sound() permet de créer un son et de lui donner un nom. setVolume permet de changer le volume. Il s’exprime en %. On ne déclare un son qu’une seule fois, ensuite il ne reste plus qu’à lancer ou stopper le son aux endroits voulus.

27 Pour déclencher gunfire.mp3 à chaque fois que l’on clique et pour arrêter la partie, on ajoute le code suivant : curseur.onMouseDown = function() { _root.son2.start(); //On diminue le stock de munitions : _root.reste--; //On attend que le calcul du score soit fini (sinon on sort sans prendre en compte le résultat du dernier tir). //setTimeout est comme setInterval sauf qu'il ne se lance qu'une seule fois. setTimeout(fin_partie, 50); function fin_partie() { if (_root.reste == 0) { Mouse.show(); stopDrag(); //Pour arrêter tous les sons : stopAllSounds(); //Pour arrêter la création de canards clearInterval(creation_canard); _root.gotoAndStop("Fin"); //On supprime le curseur car sinon il va rester puisqu’on a modifié sa profondeur. curseur.removeMovieClip(); } }; On ajoute stop(); à la frame 3 du calque code pour pouvoir tester.

28 Chronomètre On veut ajouter un chronomètre. Pour cela on ajoute le code suivant : // Gestion du chrono function fonc_temps() { temps++; } temps_écoulé = setInterval(fonc_temps, 1000); On ajoute également dans la fonction curseur.onMouseDown dans le if (_root.reste == 0) : //Pour arrêter le chrono clearInterval(temps_écoulé);

29 Le canon On veut que le canon bouge quand on appuie sur le clavier, pour cela on ajoute le code : //On détecte qu'une touche a été pressée (nécessaire quand on n’associe pas le code directement au clip concerné) : Key.addListener(fusil); //Faire bouger de droite à gauche le fusil fusil.onKeyDown = function() { if (Key.getCode() == Key.RIGHT) { fusil._x = fusil._x+4; } if (Key.getCode() == Key.LEFT) { fusil._x = fusil._x-4; } };

30 On veut ensuite qu’il s’oriente en fonction de la position de la souris. Pour cela on ajoute le code suivant : fusil.onMouseMove = function() { // calcul d'angle delta_x = _xmouse-fusil._x; delta_y = _ymouse-fusil._y; angle = -Math.atan(delta_x/delta_y)*180/Math.PI; // limite l'orientation du fusil à +/-40° au max if (angle<-40) { angle = -40; } if (angle>40) { angle = 40; } // On fait la rotation fusil._rotation = angle; }; Nouveautés ActionScript : Math.PI : renvoie 3.14159265358979 Math.atan(nombre) : renvoie l’arc tangente de nombre _xmouse et y_mouse : renvoient les coordonnées de la souris

31 Affichage des résultats On travaille maintenant sur la frame 3 de la couche fond. On ajoute le parchemin et on l’étire pour qu’il prenne toute la scène (de la même façon que pour la frame 1). On ajoute un grand cadre texte dynamique multiligne avec comme nom de variable « resultat ». On ajoute un texte statique initialisé par « Rejouer ? » On convertit ce texte en clip avec le nom « Rejouer » On convertit une nouvelle fois le clip « Rejouer » en clip « Rejouer animé » On édite le clip Rejouer animé : - On insère une image clef à la frame 10 et 20. - On agrandit le clip à la frame 10 (avec l’outil transformation libre) - On ajoute une interpolation de mouvement entre la frame 1 et 10 et une autre entre le frame 11 et 20. - On revient sur la scène. On supprime Rejouer animé de la scène. On ajoute Rejouer sur la scène. On convertit Rejouer en bouton qu’on appelle « Rejouer bouton ». On nomme cette instance « rejouer_bouton ». On édite Rejouer bouton : - On insère une image clef sur les frames 2, 3 et 4. - Sur la frame 4, on dessine un rectangle plein par-dessus le texte. Il faut que le rectangle recouvre complètement le texte, comme cela on ne sera pas obligé de cliquer précisément sur un caractère pour activer le bouton. - Sur la frame 3, on modifie la teinte du texte. - Sur la frame 2, on permute le clip avec « Rejouer animé ». (\Modification\Symbole\Permuter le symbole).

32 On ajoute le code suivant à la frame 3 du calque code : resultat = "Bravo "+nom+" ton score est de "+score+". Tu as joué pendant "+temps+" s."; bouton_rejouer.onRelease = function() { gotoAndPlay("Menu"); }; On obtient :

33 Chargement d’un fichier.swf On crée un fichier « Index.fla » dans le même répertoire que « Tir aux canards.fla ». On règle ce nouveau projet : on met une résolution de 800x700. On ajoute un texte dynamique tout en bas de la scène avec comme nom de variable « scorebis ». On ajoute à la frame 1 le code suivant : loadMovie("Tir aux canards.swf", 1); function rafraichit() { //On affiche le score uniquement s'il est défini if (_level1.score != undefined) { scorebis = _level1.score; } setInterval(rafraichit, 10); Nouveautés ActionScript : loadMovie("fichier.swf", niveau) : permet de charger un fichier.swf et de s’en servir comme un clip. Le niveau correspond à la hierarchie des animations (le niveau 0 est index.swf). On accède aux variables avec le préfixe _levelX avec X le niveau. unloadMovie(_levelX) : permet de fermer le.swf qui est sur le niveau X. Remarque : Quand on charge un.swf, il prend les mêmes propriétés que le.swf qui l’appelle (même cadence, même taille, même fond).