Glénan
Finistère
Bretagne

L'archipel des Glénan à Fouesnant

une production
LÉOST Informatique
Nouvelle version 2016 du site sur Glenan.fr
[Accueil] [Glénan] [Fouesnant] [Textes] [Séjours] [Visite virtuelle] [Jeux] [ Formation] [Bonus]

Formation multimédia

[Accueil] [PowerPoint] [FrontPage] [Dreamweaver] [Contribute] [Traitement image] [Flash] [HTML]

Macromédia Flash

Animation

[Introduction] [Interface] [Objets] [Bouton et action] [Finalisation] [Conseils]

Programmation

[Introduction] [Bouton et programmation] [Le jeux] [Finalisation] [Conclusion] [Conseil] [Code]

Programmation : La pêche miraculeuse

Notre action sur le bouton fonctionne et le poisson saute quand on clique sur la bouée. Tous les éléments sont en place pour faire un jeu. La règle peut être la suivante :
Au clic sur la bouée, une dizaine de poissons de tailles variables et localisés à des endroits différents sautent. Le joueur doit cliquer sur les poissons. Chaque fois qu’il attrape un poisson, il augmente son score. Au bout d’un temps défini, le jeu s’arrête et il peut « contempler » son score.
Charger l’animation 11_debut.fla (qui est en fait 10_programmation_fin_goto.fla)

Un poisson variable

Il faut suivre la piste du poisson pour connaître son espace vital. En l’occurrence, sur l’image ci-contre, on retient un rectangle d’environ 380 par 130 pixels pour le déplacement (mouvement normal) de son centre de gravité. Pour être précis il faudrait intégrer l’épaisseur du poisson mais, comme il sera possible de cliquer au moins sur un filet, l’approximation est donc faite. Pour la suite du calcul nous représenterons ces données par les variables v et w.

Le centre du repère (le point 0) se trouve au sommet de la courbe, normalement à la moitié de la largeur et en haut du rectangle qui circonscrit la courbe (coordonnée : (1/2 v, 0))
Le poisson se déplace dans une scène de 550 par 400, notés L et H. Comme seul le mouvement normal du poisson nous intéresse, il faut connaître la zone normale dans laquelle le centre du repère peut se déplacer.

Pour que le poisson soit accessible, il faudra définir sa taille qui sera toujours comprise entre la taille normale et la moitié de la taille normale. Du fait de la taille réduite de moitié de l’objet, le mouvement réduit est plus petit de moitié, permettant une zone réduite plus grande sans que le poisson sorte de l’écran dans sa trajectoire. Le poisson étant plus petit, positionner la plus bas pour qu’il donne toujours l’impression de sortir de l’eau. Avec une plage sur l’axe des _y entre 180 et 280 pixels, plus le décalage d’échelle, la formule tenant compte du facteur d’échelle S du poisson (compris entre 0,5 et 1) et d’un coefficient aléatoire R (compris entre 0 et 1) permet de positionner le poisson (grâce à ces coordonnées (x, y)) dans la zone de mouvement de façon aléatoire.

_x = v / 2 x S + (L – v x S) x R et _y = 180 + 100 x R + 100 x (1 – S)
soit en code ActionScript après conversion et factorisation :

on (release) {
if (_root.nage=="oui") {
_root.nage = "non";
alea = Math.random()/2 + .5; facteur S dans notre formule
Nombre aléatoire divisé par 2 + ½ pour un nombre compris entre 0,5 et1
_root.attachMovie("pesket", "pesket1", 0);
setProperty("pesket1", _xscale, alea * 100); alea en % pour l’échelle
setProperty("pesket1", _yscale, alea * 100);
setProperty("pesket1",_x,190*alea+(550-380*alea)*Math.random());
setProperty("pesket1",_y,180+100*(Math.random()+1-alea)); } }

Tu la boucles !

Maintenant qu’un poisson apparaît de façon aléatoire dans la scène il faut, comme pour la multiplication des petits pains, créer une dizaine de poissons. Pour cela on peut utiliser une boucle (catégorie : Actions- Conditions/boucles).
Le principe d’une boucle est de réitérer une partie de programme de façon automatique. Le contrôle se faisant sur une condition. Suivant les langages, plusieurs types de boucles existent. Dans quasiment tous les cas, un compteur ou équivalent permet de modifier une variable au sein de la boucle

While do

La syntaxe générale de cette boucle est :
WHILE condition DO instruction
En ActionScript, elle se structure de la façon suivante :
while (condition) {
instructions
}

Do until

La syntaxe générale de cette boucle est :
DO instruction UNTIL condition
Contrairement à la syntaxe précédente, la boucle est exécutée au minimum une fois avant de passer par le crible du test.
En ActionScript, elle se structure de la façon suivante :
do { instructions
} while (condition);

For

La syntaxe de cette boucle appelée aussi itération, bien connue des utilisateurs de tableurs, est :
FOR (initialisation, condition, modification) DO instruction
En ActionScript, elle se structure de la façon suivante
for (initialisation; condition ; modification) {
instructions
}

ex : for (i=1 ; i<10 ; i=i+1) {instructions}
Dans de nombreux langages la notion d’incrémentation (ajouter 1) ou de décrémentation (retrancher 1) conduit à une simplification de la syntaxe qui s’écrit i++ (i=i+1) et i - - (i=i-1).
Bien évidement ceci concerne toutes les variables et est compris par la majorité des compilateurs et/ou interpréteurs.

For In

La syntaxe générale de cette boucle est :
FOR chaque_choix IN liste DO instruction
Dans certains langages le mot EACH apparaît en clair
En ActionScript, elle se structure de la façon suivante
for (chaque_choix in liste) {
instruction
}

Stop et Encore

Au sein d’une boucle, il est possible de placer des instructions permettant :

  • d’arrêter la boucle (break;)
  • de passer au cas suivant sans finir le traitement du cas présent (continue;)

Ces instructions sont souvent exécutées en fonction du résultat d’un test conditionnel.
Les puristes estiment que ces instructions ne sont pas propres et qu’il est préférable de revoir l’algorithme si un tel cas se présente, car l’analyse est mal faite.
Dans la pratique et quand il faut produire, on peut être amené à faire de tels appels. Attention toutefois à ceux qui seraient notés sur le code de leur programmation ;-)

C’est mon choix !

Dans le cas de notre pauvre pesket, autant utiliser une boucle FOR
La variable i va de 0 à 9 pour créer 10 occurrences du poisson. Chaque cas doit être identifié ; donc en plus du mot pesket, on ADD(itionne) le numéro de la variable (opération de concaténation).
La profondeur est différente pour chaque objet afin de bien les gérer.
La syntaxe aura la structure suivante

on (release) {
if (_root.nage=="oui") {
_root.nage = "non";
for (i=0; i<10; i++) {
alea = Math.random()/2 + .5;
_root.attachMovie("pesket",
"pesket" add i, i);
setProperty(
"pesket" add i, _xscale, alea * 100);
setProperty(
"pesket" add i, _yscale, alea * 100);
setProperty(
"pesket"add i,_x,190*alea+(550-380*alea)*Math.random());
setProperty(
"pesket"add i,_y,180+100*(Math.random()+1-alea));}}}

Quel poisson choisir ?

10 poissons sautent et sautent à nouveau tels des moutons. Comme il faut toujours contrôler la situation, en repensant au code généré sur la dernière image du poisson en mouvement, on trouve :

_root.nage = "oui";
_root.pesket1.removeMovieClip();

Pesket1 est donc éliminé à chaque fois. Le problème est que seul pesket1 est supprimé et on passe de n à n-1 pesket (pas facile à compter 9 ou 10 poissons si vous manipulez encore !).
Il ne faut pas supprimer le pesket N°1 à chaque fin de mouvement d’un poisson, mais uniquement le poisson qui finit sa trajectoire.

A partir de la bibliothèque, avec le symbole « poisson mouvement », cliquez sur l’image 48 du calque programmation et modifier les lignes ci-dessus en cliquant sur « Insérer un chemin cible » et en sélectionnant en mode « Points - Relatif » This pour obtenir un code proche de celui-ci-dessous
_root.nage = "oui";
this.removeMovieClip();

Pour ne plus voir qu’une seule tête

Nos 10 poissons font 1 saut et puis s’en vont. Le problème est qu’ils sautent tous en même temps. Il est souhaitable qu’ils sautent séparement.
Pour nos débuts en programmation, cette temporisation sera mise sur la première image (et uniquement sur la première image pour éviter des arrêts intempestifs sur image) de l’occurrence du poisson dans le clip « poisson mouvement ».
Pour que le jeu soit plus ludique, il faudrait qu’il soit impossible de cliquer sur le poisson tant qu’il n’est pas en mouvement. Il faut lors de la génération du poisson, en plus de sa taille et de son positionnement, rajouter une propriété de visibilité
setProperty("pesket" add i, _visible, 0);
Si un objet est invisible (0 ou false), il sera impossible de cliquer dessus. Sa visibilité sera rendue au démarrage de son mouvement. Pour des raisons de commodité, il est préférable pour l’instant de mettre cette propriété visible (1 ou true) pour tester notre temporisation

Avant de créer notre temporisation, il est évident qu’il nous faudra cliquer sur le poisson pour qu’il puisse disparaître (être péché). Cela sera possible sur un bouton. Il faut donc transformer le poisson en bouton pour permettre le clic de l’utilisateur.
Notre poisson, en plus d’être un bouton, devra avoir un comportement de clip pour permettre de tester sur chaque image (onClipEvent (enterFrame)) si la temporisation est terminée. La première chose est de gérer ces nouveaux symboles.
Ouvrir la bibliothèque, et sélectionner le « poisson mouvement ».

Cliquer sur le poisson dans la scène à l’image 1 et le convertir en un symbole bouton appelé « poisson bouton ». le poisson ne bouge pas, mais une zone rectangulaire plus grande inclut notre « poisson bouton ». Toujours sur notre bouton poisson, convertissez-le en un symbole clip nommé « poisson emballé »
Copier le « poisson emballé » et mettez-le en remplacement du « poisson » dans l’image 48. Faire éventuellement des modifications de positionnement et de rotation du poisson et vérifier si la trajectoire est correcte.
Le « poisson mouvement » (alias « pesket » en programmation) se décompose de la façon suivant :

Poisson emballé (clip sur la trajectoire)
     Poisson bouton (bouton pour nos futures actions dans le jeu)
          Poisson (clip intégrant les parties de poisson et de la texture écailleuse)
               Ecaille texture (texture appliquée dans la forme poisson)
                    Ecailles ligne (2 lignes d’écailles)
                         Ecailles (1 ligne d’écailles)
                              Ecaille (de base composant notre texture)

Notre poisson bouton ayant été créé un peu rapidement, il est souhaitable de l’ouvrir dans la bibliothèque. Cliquer sur l’image « cliquable » et insérer une image pour avoir les différents états du poisson, identiques et surtout la zone de clic.
En lançant l’animation, il n’y a pas de grosses différences avec l’étape précédente sauf qu’une main apparaît au passage du curseur de la souris sur les poissons.

Pour mettre une temporisation avant l’animation de chaque « pesket », ouvrir « poisson mouvement » et sur l’image 1 du calque « Programme », insérer une image clé vide sur les images 1 et 2.
Sur l’image 1, mettre un stop pour arrêter le clip.
Sur l’image 2, rendre le clip visible (setProperty(this, _visible, 1);)

Créer un nouveau calque au dessus du « Guide : poisson » et le nommer « etiquette ». Sur l’image 2, insérer une image-clé vide et la nommer « suite » dans les propriétés de l’image.

Il vous reste à temporiser le poisson sur l’image 1.
Insérer une image clé sur l’image 2 du calque poisson. Ce poisson est légèrement décalé par rapport au poisson de l’image 1. Il est possible de copier le poisson de l’image 1 : supprimer le poisson de l’image 2 et coller en place (Ctrl + Maj + V) le poisson pour que les poissons de l’image 1 et 2 soient identiques. Il est possible de tolérer le léger décalage de la trajectoire du poisson.

Il existe de nombreuses possibilités pour ralentir ou temporiser une animation. Dans notre cas, nous allons utiliser une fonction simple qui consiste à tirer un nombre aléatoire et à le comparer à un nombre choisi au préalable. Si le nombre aléatoire est plus petit que le nombre choisi, l’animation se poursuit, sinon le poisson « reste dans l’ombre ». Même sans avoir fait de probabilité, il paraît évident que cette fonction n’est pas à l’abri d’une très longue suite de nombres, tous supérieurs au nombre permettant de déclencher la suite. Le test est effectué chaque fois que l’on rentre dans l’image (12 fois par seconde dans notre cas), aussi même si une grande série de nombres arrivait, cela donnerait au contraire du piment à notre jeu : le joueur relâchant son attention au fur et à mesure que le temps s’écoule, il pourrait être surpris par les poissons retardataires. Pour maintenir son attention, il faudra mettre un indicateur qui permetta de connaître le nombre de poissons restants.

La temporisation sur le « poisson emballé » de l’image 1 du calque poisson peut ressembler à celle-ci dessous.

onClipEvent (enterFrame) {
PesketAvance = Math.random()*100;
if (PesketAvance<5) {
with (_parent) {
gotoAndPlay(2);
}
}
}

Une variable PesketAvance comprise entre 0 et 100 est créée. Test si cette variable est inférieure à 5. Ce chiffre est obtenu par essais successifs de plusieurs valeurs, jusqu’à trouver une valeur suffisante pour la jouabilité.
Si la valeur de la variable est inférieure à 5, alors il faut passer à la « suite », qui ne se trouve pas sur le poisson emballé sur lequel est la programmation, mais sur « Poisson mouvement ». Il faut donc demander qu’il passe avec son parent (with (_parent)) à l’image 2. Cette image 2 ayant une étiquette, il sera possible de modifier l’instruction.

Une fois la valeur testée il est souvent préférable, au sein d’un clip qui n’est pas visible par l’explorateur d’animation, de mettre les paramètres, variables… directement dans l’animation pour les modifier plus facilement. Le test de comparaison se fait donc par rapport à une variable _root.proba et il ne reste plus qu’à initialiser cette variable dans l’image 1 de la séquence de l’animation :
_root.proba = 6;
Cette valeur étant celle retenue dans le jeu.

Résultat ici.

Combien j’ai péché ?

Un clic sur la bouée fait sauter, avec une temporisation, 10 poissons de taille variable. En approchant la souris des poissons une main apparaît, mais aucune action n’est lancée.
Il faut ajouter un compteur qui indiquera le nombre de poissons péchés et incrémenter le compteur à chaque clic sur un poisson.

On est les champions…

Créer un calque « score » entre les calques texte et étiquette pour un affichage du score pendant toute la durée de l’animation.

Avec l’outil texte créer une première zone de texte et la remplir avec le mot « score ».
Créer une deuxième zone de texte à côté et mettre un score fictif à 0000 pour avoir une idée du format du score. Faire les modifications nécessaires sur la police et surtout demander à avoir un texte dynamique au lieu de statique. Dans la partie « Var : » (comme variable) des propriétés du texte mettre « _root.score ». Cette variable sera initialisée ultérieurement et permettra de connaître le nombre de poissons cliqués avec succès.

Pour le texte, la troisième possibilité est « texte de saisie » qui servirait à récupérer dans un autre écran le nom du joueur qui s’afficherait ensuite sur cet écran en temps que « Texte dynamique » du moment qu’ils utilisent la même variable.
Utiliser les outils d’alignement si nécessaire.

Il faut maintenant positionner la variable _root.score à 0. Comme les autres variables, il est préférable de la mettre dans l’image 1 du calque programme.

Dans la partie Action, il existe déjà d’autres variables. Plutôt que de taper le texte ou de sélectionner l’action, il est préférable de dupliquer du code existant. Le copier-coller par clic droit ou raccourci clavier fonctionne bien, mais il est plus rapide de sélectionner le code à dupliquer et de le déplacer en maintenant la touche « Maj » enfoncée.
Changer ensuite le nom de la variable et mettre 0 dans la valeur.

Ça nous file des boutons

C’est uniquement le fait de cliquer sur le poisson qui incrémente la variable. Il faut aussi tenir compte qu’un poisson cliqué est un poisson péché et donc il n’est plus possible de cliquer dessus. Après le clic sur le poisson, le faire disparaître de l’écran (il est dans le bateau de pêche et non dans la mer).
Ouvrir la bibliothèque (F11) et double-cliquer sur le « poisson mouvement » dans la boîte poisson. Sélectionner le poisson sur l’image 1, c’est le « poisson emballé » qui est un clip.

Un double clic sur le poisson emballé permet, en cliquant sur le poisson, d’obtenir le « poisson bouton » qui est une occurrence de bouton que l’on peut programmer en tant que tel.

En ayant cliqué sur le bouton « poisson bouton » dans le clip « poisson emballé », rentrer les actions qui seront effectuées lors du clic, à savoir incrémenter la variable _root.score et faire disparaître le poisson :

on (release) {
_root.score = _root.score + 1;
_parent.removeMovieClip();
}

Cette syntaxe est tout à fait correcte pour une application normale, sauf que dans un jeu il faut tenir compte de la jouabilité. Avec une interface graphique (Windows, Mac OS, BeOS, Motif…) l’action n’est pas lancée lors du clic mais à la remontée du bouton de la souris. Cela est relativement pratique car, si l’utilisateur se trompe sur l’endroit où il clique, il peut, avant de relâcher le clic, se positionner à un autre endroit, ce qui permet de changer le cours de l’action première. C’est plutôt pénalisant dans le cas d’un jeu d’action (à moins de l’indiquer au joueur), car dans ce cas c’est le clic et non pas lors de la remontée du bouton que doit s’effectuer l’action.
Il est possible de garder on press avec on release. Si c’est le cas, il faudra l’indiquer au joueur…
Le code devient donc

on (press) {
_root.score = _root.score + 1;
_parent.removeMovieClip();
}

Le score est au départ à 0, et au fur et à mesure des clics sur les poissons il s’incrémente.
Comme le montre l’exemple ci-contre : le score est de 5 et le nombre de poissons de 4.
2 hypothèses sont possibles : le joueur a raté un poisson ou un poisson n’est pas encore apparu.
Rien ne permet de lever cette ambiguïté et, comme le temps d’apparition d’un poisson peut être long, il serait souhaitable d’établir une deuxième variable permettant de connaître le nombre de poissons à venir.

Ça va durer encore longtemps ?

Une variable _root.restant doit être initialisée. Elle sera incrémentée chaque fois qu’un poisson est créé sur la scène et décrémentée chaque fois qu’un poisson quitte la scène (que l’on clique dessus ou qu’il arrive en fin de trajectoire).
Pour être certain du nombre de poissons générés, il est aussi possible de demander à gérer une variable _root.total, indiquant le nombre total de poissons qui ont été générés.
Dans l’image 1 du calque Programmation, mettre :

_root.total = 0;
_root.restant = 0;

Sur le calque score : ajouter un slash (barre oblique) en texte statique et 0000 en texte dynamique avec pour nom de variable _root.total.
En-dessous, mettre un texte statique « Poissons restants » et un texte dynamique de valeur 0000 et de variable _root.restant.
Utiliser les possibilités d’alignement pour présenter au mieux les résultats.

Sur la séquence 1, cliquer sur la bouée et au sein de la boucle « for », insérer le code :

_root.restant = _root.restant + 1;
_root.total = _root.total+ 1;

Pour décrémenter la variable _root.restant, il faut se positionner sur le « poisson bouton » dans le « poisson emballé », il faut mettre décrémenter les restant par une instruction du style :

on (press) {
_root.score = _root.score + 1;
_root.restant = _root.restant - 1;

_parent.removeMovieClip();
}

Quand un poisson sort de l’écran, ne pas oublier de décrémenter les restants.

Sur l’image 48 du calque programme du clip « poisson mouvement » de la bibliothèque, il est possible de mettre aussi la décrémentation de la variable :

_root.nage = "oui";
_root.restant = _root.restant - 1;
this.removeMovieClip();

En testant le jeu vous remarquez que suivant le cas, le jeu peut-être relancé une deuxième fois, voire une troisième et que, rien ne se passe quand on clique sur la bouée. Dans le feu de l’action, il n’est jamais facile de trouver ce qu’une analyse préliminaire aurait permis de trouver. A savoir : si le joueur clique sur tous les « poissons boutons », ils disparaissent sans remettre la variable _root.nage à 0. Il suffit de rajouter cette modification de variable sur le bouton « poisson bouton » pour pallier au problème et continuer à jouer, même avec 10/10 au score.

Le jeu fonctionne et, à chaque clic sur la bouée, vous repartez avec 10 nouveaux poissons. Le problème : un clic malencontreux sur la bouée au cours du jeu fait disparaître tous les poissons et repartir une nouvelle dizaine, sans positionner le compteur des restants à 0.
Il suffit, sous l’instruction _root.nage = "non";, de rajouter _root.restant = 0;.sur la bouée.
Il suffira d’indiquer au joueur d’éviter de cliquer sur la bouée lors de la pêche aux poissons, sous peine de perdre les poissons restants. Cette fonction donnant un peu de piment au jeu.

Elle va encore nous faire une scène !

Le jeu fonctionne et il serait intéressant de l’habiller avec un écran de début. Un écran de fin pour indiquer le score final et éventuellement une règle du jeu compléterait le tout.
Plutôt que de rajouter des images au début et à la fin de la séquence 1, il est préférable d’ajouter des séquences (scènes dans les versions précédentes et dans d’autres logiciels).
Utiliser le menu « Insertion – Séquence » pour ajouter une séquence.
Utiliser le menu « Modification – Séquence… » pour passer la Séquence 1 en deuxième position par glisser-déplacer
Faire un double-clic sur les séquences pour les renommer : intro et jeux.

En cliquant sur le petit clap, il est possible d’accéder à la séquence voulue et de choisir « Intro ».
Cette séquence est vide.
Créer un calque Programmation (prg) et mettre un stop.
Créer un calque Glénan et mettre le clip « texte » de l’archipel des Glénan, dont la taille du clip peut être augmentée d’un facteur 150 à 200%.
Créer un calque Texte et mettre le nom du jeux (la pêche miraculeuse ou un autre nom si vous avez une meilleure idées).

Sur cette page d’accueil, il peut y avoir 3 possibilités : jouer, aide et quitter le jeu.
C’est 3 actions étant différentes, 3 boutons sont nécessaires. Pour réutiliser au maximum les objets, il est intéressant de prendre le « bouton poisson » et de le cloner 3 fois. Il est préférable, avant de le cloner, de l’agrandir (200%) et de lui faire effectuer une rotation (-60 degrés) en utilisant le menu « Modification – Transformer – Redimensionner et faire pivoter… ».

Sur les boutons, mettre respectivement de gauche à droite : Jouer, Aide, Quitter sur chaque « bouton poisson ».
Sélectionner le « bouton poisson » Jouer et mettre une action Goto sur la séquence jeux à l’image 1.

Help me if you can, I'm feeling down

Pour l’aide sur le jeu, il est préférable de la mettre dans la séquence d’intro sur une autre image.

Sur l’image 2 insérer une image clé vide sur le calque « prg » et mettre une action « Stop »
Créer un nouveau calque appelé étiquette et mettre dans les propriétés de l’image « Aide ».
Les boutons peuvent être les mêmes que sur la première image. Sur l’image 2 du calque « Boutons », insérer une image pour permettre aux boutons d’être visibles sur les 2 images.
Insérer une image clé vide sur l’image 2 du calque texte. Sélectionner le texte ci-dessous de la règle, le copier et le coller dans une zone de texte dans Flash. La zone de texte est trop large et si l’outil de redimensionnement est utilisé, il étroitise la police au-delà des limites du raisonnable. Il faut cliquer avec l’outils « texte » dans le texte et sélectionner le rond (ou le carré) dans le coin supérieur droit de la zone de texte pour la modifier jusqu’aux valeurs souhaitées (avec les zones de texte dynamique, c’est le coin inférieur droit qu’il faut utiliser).

Règle du jeu
Vous êtes un patron pêcheur et vous comptez pêcher le plus possible de poissons.
Vous avez la possibilité d’effectuer trois traits de pêche.
Pour commencer chaque trait, vous devez cliquer sur la bouée.
Un clic sur un poisson et il est péché. Un clic sur la bouée et le niveau change (dommage pour les poissons restants). Regardez bien le nombre de poissons restant à pêcher.

L’image d’aide doit correspondre à l’image ci-contre.Sélectionner le « bouton poisson » d’aide et mettre une action gotoAndPlay sur l’étiquette d’image « Aide ».

Ne me quitte pas !

Pour quitter le jeu, le plus simple est d’utiliser une instruction très puissante FScommand qui permet, entre autre, de communiquer avec l’extérieur de Flash. Dans notre cas : sélectionner le « bouton poisson » quitter et utiliser Action – Navigateur/réseau – fscommand. Dans la liste des commandes de lecteur autonome, sélectionner « quit ».

Attention en utilisant le menu « Contrôle – tester l’animation », le bouton quitter ne semble pas fonctionner. Avec l’explorateur « cherche le dossier » dans lequel vous strocker vos fichier FLA, vous trouverez un fichier du même nom en SWF pour lequel le clic sur « quitter » fonctionne.

Same player shoot again

Le jeu est opérationnel mais les niveaux sont identiques. Il n’y a pas de difficulté croissante sur les niveaux. Il existe plusieurs possibilités pour augmenter la difficulté du jeu. Pour notre jeu : le nombre de poissons va augmenter à chaque niveau. Il faut donc, à la place de la constante 10, instaurer une variable « nbpesket » modifiable à chaque niveau. Par exemple 10, 15 et 20 poissons aux niveaux 1, 2 et 3. Si une variable niveau est créée, il est possible d’avoir l’équivalence de nbpeskets en fonction du niveau par la formule : nbpesket = 5 + niveau x 5
Sur l’image 1 du calque programme de la séquence jeu, initialiser les variables nbpesket et niveau.

_root.niveau = 1;
_root.nbpesket = 10;

Cliquer sur la bouée dans l’image 1 de la séquence jeux et à la place de : for (i=0; i<10; i++), mettre le code suivant : for (i=0; i<_root.nbpesket; i++).
Sur le calque score rajouter une zone de texte statique avec le mot score et une zone de texte dynamique affichant la variable _root.niveau.
Il existe plusieurs possibilités pour changer de niveau : quand le joueur clique malencontreusement sur la bouée et quand le dernier poisson quitte la scène, qu’il soit péché ou pas. Pour faciliter la programmation, une fonction PassageNiveau va être créée ce qui lui permettra d’être appelée depuis toute partie de l’animation demandeuse.
Pour l’action sur la bouée, faire intervenir la fonction une fois que la variable nage est revenue à « oui » pour éviter que, par mégarde, le joueur ne reclique sur la bouée. Il n’est donc pas possible de cliquer sur la bouée pour passer au niveau suivant, avant la disparition du premier poisson (pêché ou fin de trajectoire). Pour éviter qu’à chaque clic de bouée, on puisse passer au niveau suivant, le passage ne se fera que s’il reste des poissons à pêcher (le nombre de poissons restants est supérieur à 0). Ajouter sur le code de la bouée les instructions :

on (release) {
if (_root.nage=="oui") {
if (_root.restant > 0) {
_root.PassageNiveau();

}
_root.nage = "non";…}

L’appel de fonction se trouve dans « Actions – Fonctions définies par l’utilisateur – call function ». Il est inutile de renseigner un objet (qui contiendrait la fonction) et il n’y a pas de paramètre à passer. Comme pour les fonctions livrées avec Flash, il est possible de passer des paramètres à la fonction. Dans notre cas, il aurait été possible de passer le niveau actuel…
Après disparition du poisson, le compteur _root.restant est décrémenté. Si ce compteur arrive à 0, il faut effectuer le passage de niveau. Après l’instruction : _root.restant = _root.restant - 1; qui se trouve sur le « poisson bouton » dans le « poisson emballé » du « poisson mouvement » et sur l’image 48 du calque programme du « clip poisson mouvement»

_root.restant = _root.restant - 1;
if (_root.restant <= 0) {
_root.PassageNiveau();
}

La fonction permettant le passage de niveau sera créé dans l’image 1 du calque programme de la séquence jeux. Vous trouverez la création de fonction dans « Actions – Fonctions définies par l’utilisateur – function ». Il faut lui donner un nom : PassageNiveau, mais pas de paramètres. Si le joueur est déjà au niveau 3 c’est la fin du jeu, sinon faire les actions suivantes : incrémenter le niveau, augmenter nbpesket, diminuer _root.proba, ce qui donne le code :

function PassageNiveau() {
if (_root.niveau < 3) {
_root.niveau = _root.niveau + 1;
_root.nbpesket = 5 + _root.niveau *5;
_root.proba = 6 - _root.niveau;
} else {
gotoAndPlay("Intro", "Fin");
}
}

This is the end, my friend

La séquence de fin est sur l’image 3 de la séquence Intro et comprend les éléments suivants :
Un stop sur une nouvelle image clé vide du calque « prg »
Une étiquette de Fin sur une nouvelle image clé vide du calque « etiquette »
L’intégralité du score qui est récupéré par « copier-coller en place » du calque score de la séquence intro et placé sur une image clé vide d’un nouveau calque score. Pour être plus visible, le score peut être passé en gras et d’une autre couleur.
Le texte des Glénan sur une image clé vide du calque Glénan (attention à ce qu’il n’y ait rien sur l’image 2 de ce calque)

Le texte de l’image 1 copié sur une nouvelle image clé vide, sur lequel on ajoute le texte « fin de la partie ». Enregistrer et jouer.
Si arrivé au niveau 3 vous cliquez sur la bouée, vous passez à la séquence de fin. A la fin de fonction PassageNiveau la suite des instructions de la bouée sont exécutées et 20 nouveaux poissons passent encore à l’écran et permettent d’augmenter le score.

Il faux arrêter le code de la bouée si le niveau 3 est fini.
Comme il est impossible de mettre un break dans un test conditionnel, une nouvelle variable FinOK sera ajoutée avant de passer à l’étiquette de fin dans la fonction PasssageNiveau. On profitera de l’occasion pour supprimer tous les poissons restant éventuellement sur la scène, par une boucle for (utiliser « Actions – Contrôle sur les clips – RemoveMovieClip » avec « "pesket" add i » comme Cible) :

} else {
_root.FinOK = "oui";
for (i=0; i<_root.nbpesket; i++) {
removeMovieClip("pesket" add i);
}

gotoAndPlay("Intro", "Fin");
}

Sur la bouée, effectuer un test après le passage de niveau pour savoir si FinOK est diffèrent de « oui » pour exécuter le code qui devient :

on (release) {
if (_root.nage=="oui") {
if (_root.restant > 0) {
PassageNiveau();
}
if (_root.FinOK <> "oui") {
_root.nage = "non";
_root.restant = 0;
for (i=0; i<_root.nbpesket; i++) {

}}}}

Ne pas oublier d’initialiser _root.FinOK <> "non" dans le calque programmation de l’image 1 dans la séquence « jeux ».
Le fichier swf fait 28 Ko, soit environ 9 secondes de chargement avec un modem 56K, 4 secondes avec Numéris et moins d’1 seconde avec ADSL 512. Il n’est donc pas nécessaire de mettre une boucle pour faire patienter l’utilisateur jusqu’à la fin du chargement.
Le jeu est terminé ;-)

Un bug, des bogues

Dans toute programmation il y a des bogues (bug en anglais). Ce court chapitre n’a pas pour objectif de donner un cours sur le déboguage (qui pourrait faire l’objet d’un autre manuel), mais simplement de montrer quelques outils utilisables dans Flash.

L’explorateur d’animations (menu fenêtre) est un outil pratique pour lire le code généré. Laisser uniquement l’icône de code ActionScript affiché pour ne voir que le code des objets présents dans les séquences. Si un clip, comme le « poisson en mouvement », uniquement est utilisé par la programmation, il n’apparaît pas dans la liste de code.

Plus intéressant, mais plus lourd : le débogueur. Plusieurs usages sont possibles, mais l’exemple suivant permettra d’en découvrir un.
Pour connaître les paramètres des poissons quand ils sont lancés et pour valider de façon pragmatique des paramètres corrects :
Aller à l’image 48 du clip « poisson mouvement » de la bibliothèque et sur le calque Programme, mettre un point d’arrêt sur la ligne de commande this.removeMovieClip(); par clic droit sur la ligne ou en utilisant l’icône idoine de la fenêtre Actions. Attention Ctrl+Entrée (menu « Contrôle – Tester l’animation » n’active pas les points d’arrêts. Utiliser le menu « Contrôle – Déboguer l’animation » (Ctrl+Maj+Entrée). La fenêtre Débogueur apparaît et l’animation est à l’arrêt, ce qui permet de tester les paramètres de départ. Cliquer sur le triangle vert (Continuer) pour exécuter l’animation. Cliquer sur « Jouer » et dans la fenêtre du Débogeur, sélectionner _level0, puis l’onglet variable pour voir les variables initialisées sur l’image 1 de la séquence jeux et pour remarquer que PassageNiveau n’est pas initialisé. Cliquer sur la bouée et attendre que le jeu s’arrête en rencontrant un point d’arrêt.

Il est possible maintenant de se positionner sur l’occurrence _level0.pesket9 et de regarder les propriétés de l’objet. Un clip sur le triangle vert « continuer » permet d’aller jusqu’au point d’arrêt suivant : un autre poisson arrive en fin de course…

Très pratique également, la fonction trace (Actions – Actions diverses – Trace) qui permet d’envoyer des informations textuelles ou des variables dans une fenêtre Sortie les informations souhaitées. N’oubliez pas avant de compiler le programme d’enlever du code ces fonctions traces ;-)

 

 


© 2004 Léost Informatique - Fouesnant les Glénan (contact@glenan.fr)
Chercher version