Fish & Trip UTC P15 Rapport de projet SI28. Auteurs : ADHEMAR Mehdi, PASSERI Nicolas, PAJOT ANNE
RAPPORT Fish & Trip Table des matières I- Concept... 2 II- Public cible... 2 III- Objectifs... 2 IV- Ressources médias :... 2 V- Structure et navigation :... 3 VI- Formes et degrés d'interactivité :... 4 VII- Choix techniques... 4 VIII- Budgétisation... 4 IX- Modifications par rapport au cahier des charges... 5 X- Scénario... 6 XI- Story Board... 10 a- Charte graphique... 10 b- Intégration du son... 11 XII- Réalisation... 11 a- Détails techniques... 11 b- Optimisation... 12
I- Concept Fish & Trip est une interface pédagogique et ludique permettant aux enfants de découvrir le monde marin des différents océans terrestres. Les enfants s identifieront à un poisson qu ils choisiront en début d application (choix du nom et de la couleur). Par le biais de ce personnage, qui crée l interactivité entre le joueur et le jeu, ils pourront choisir d explorer chaque mer, chaque océan séparément, selon un voyage, une trajectoire définie à l avance par les réalisateurs. Tout au long du voyage l enfant découvrira les différentes espèces qui peuplent l océan ou la mer choisi(e), leurs caractéristiques etc, puis pourra mettre à profit ce qu il a appris sous forme d un petit quizz de trois ou quatre questions. II- Public cible Notre interface visera un public assez jeune, des enfants de 5-8 ans, afin qu ils puissent apprendre tout en se divertissant, et découvrir un monde peut-être méconnu jusqu ici. Il n y a pas de compétences pré requises à avoir pour ce jeu, car même si il y a certaines rubriques écrites, nous enregistrons nos voix pour créer une interface encore plus interactive et immersive pour l enfant. III- Objectifs L objectif principal ici est de faire découvrir aux enfants le monde marin (faune et flore) qu ils n ont peut-être pas l occasion de connaître par le biais de l école ou de leurs activités. Bien évidemment étant donné que c est un public relativement jeune il faut que l interface soit ludique, animée, l enfant devra y trouver son chemin de manière intuitive. Le jeu aura également une dimension instructive notamment avec le quiz de trois ou quatre questions qui sera proposé aux enfants après qu ils aient visité un océan. L enfant sera également sensibilisé aux problématiques écologiques qui se posent actuellement dans les milieux marins. IV- Ressources médias : - Image : utilisation d images bitmap (photos, photos trouvées sur le net) et vectorielles (dessinées sur Flash) pour créer tout le visuel de l interface - Sons : enregistrement de nos voix tout au long du jeu, pour que les enfants ne sachant pas lire puissent jouer, cela donnera également un côté encore plus ludique et interactif. Nous incorporerons également des bruits d animaux marins. Tout se fera à partir d Audacity, nous basculerons en.mp3 pour que ce soit reconnaissable par Flash. - Textes : la forme texte sera présente sous plusieurs formes, premièrement à titre informatif, pour les boutons d accès et de navigation, les règles du jeu, le nom des océans, les informations sur les espèces, le quiz. L enfant pourra également saisir du texte sur le clavier,
- pour donner un nom au poisson qu il choisira au début de son aventure, cela créera encore plus d interactivité. V- Structure et navigation : L organigramme suivant représente la navigation qui l utilisateur pourra réaliser. Premièrement, dans la page d accueil, il aura deux options : soit il clique dans un point d interrogation pour bien connaître des instructions du jeu (et après il retourne vers l accueil), soit il commence le jeu en créant son poisson personnalisé. Ensuite, il passera vers le planisphère où se trouvent des océans interactifs. En choisissant un océan, il sera dirigé vers une page d interaction avec les poissons de l océan en question. Une fois qu il a interagi avec tous les poissons, il y aura un quiz sur cet océan. Remarque : les processus d interaction et réalisation du quiz sur chaque océan sont les mêmes pour les autres océans. Ils ne sont pas dans le schéma à cause d une possible pollution visuelle.
VI- Formes et degrés d'interactivité : - Navigation : L enfant va accéder aux différentes parties du jeu (planisphère, océans, quizz). Grâce à des boutons, au début du jeu, il va aller de l écran d accueil jusqu à la visite des océans en passant par le planisphère. Puis, grâce à des flèches il va pouvoir se déplacer dans l océan afin de voir les espèces qu il souhaite rencontrer. - Manipulation : L enfant va manipuler un poisson dans l espace (son vis-à-vis dans le jeu), grâce à la souris. Dans le même temps l enfant intègre une autre forme d interactivité, la navigation. De plus il sera amené à répondre à un quizz en fin de séquence. - Introduction de données : L enfant va définir les caractéristiques du poisson au début du jeu, la couleur, en cliquant sur un des poissons selon ses préférences. Nous avions prévu qu il pourrait lui donner un prénom mais nous nous sommes rendus compte que cela serait peutêtre inutile compte-tenu du fait que nous ne prévoyions plus la mise en place d un dialogue entre utilisateur et animaux marins. VII- Choix techniques Au début de projet nous nous sommes mis d accord, que par rapport au projet à réaliser et compte tenu de nos compétences respectives, nous n utiliserons comme logiciels uniquement Adobe Flash Professional et Audacity. L interactivité fonctionnelle et l implémentation de sons (.mp3) seront donc assurées par Adobe flash (animations, déplacements, mouvements etc), et les effets sonores par Audacity (enregistrement de nos voix, prélèvement de sons d animaux depuis des fichiers audios). VIII- Budgétisation Notre budget se résume à un budget temps, car nous n avons pas de montant prévu pour ce projet. Chacun d entre nous a environ travaillé 3h/semaine sur le projet, en dehors des heures allouées pour les travaux dirigés. Pour se faire nous avions à disposition le matériel de l UTC, à savoir les ordinateurs avec notamment le logiciel Flash.
IX- Modifications par rapport au cahier des charges Nouvelle structure de navigation : Contrairement à ce que nous avions prévu dans le cahier des charges, nous n avons finalement pas inclus les quizz ni l océan Arctique. Concernant l océan Arctique, nous avons fait ce choix assez tôt dans le semestre estimant que les trois autres océans étaient suffisants. En revanche nous tenions vraiment à inclure les quizz car cela aurait diversifié les activités proposées aux enfants mais aurait également permis de mettre plus en valeur le degré d intéractivité de manipulation de notre projet. Nous projetions également de permettre à l enfant de se déplacer de lui même dans l espace mis à sa disposition cependant nous n avons pas réussi à créer un environement mobile. Ceci est dommage car cela aurait considérablement augmenté le dynamisme de l interface.
X- Scénario Le scénario de Fish & Trip se doit d être ludique, tout en introduisant des notions d écologie marine. Ainsi le scénario se présente sous une forme d ateliers découverte que l enfant interprétera comme une aventure. En effet au début du jeu il choisira un poisson qui sera destiné à être son vis-à-vis dans le jeu, et à ce moment là il pourra visiter les océans qu il aura envie de découvrir, le curseur n étant alors plus une flèche mais le poisson choisi. - L écran d accueil : il est très important car l enfant ne doit pas se sentir perdu dès le début du jeu, il doit savoir où aller et ce qu il va y trouver. Ainsi il comporte des boutons d accès, un bouton jouer pour directement accéder à la création de poisson s il connaît déjà les règles, et un bouton? pour découvrir les instructions. Une bande audio est également lancée pour qu il sache où cliquer.
- Les instructions : une bande audio se lance pour lire les instructions, qui sont bien sur écrites, puis l enfant doit cliquer sur le bouton choisir poisson pour commencer l aventure dans les océans.. Le choix d un poisson : l enfant va choisir un poisson pour débuter l aventure et visiter les océans. Après qu il ait cliqué sur un des 3 poissons, le curseur en prendra la forme et restera comme tel tout le long du jeu.
. Le choix d un océan : L enfant accède à un planisphère par un bouton «commencer l aventure». Ici nous avons mis en place la visite de 3 océans, l Atlantique, le Pacifique, et l Indien. Ce sont les ateliers découverte qui vont se subdiviser en deux phases. Premièrement l enfant va découvrir 3 espèces caractéristiques de l océan choisi. Et deuxièmement il va découvrir chacune des espèces en détail selon les problématiques écologiques associées à chacun. - Le choix d une espèce à découvrir : Après avoir cliqué sur l océan de son choix l enfant va avoir le choix de découvrir 3 espèces en cliquant sur des flèches vertes. Une bande audio se lance pour expliquer ce qu il va pouvoir faire à partir de cette séquence.
- La découverte de l espèce : en arrivant sur la séquence, il y a trois choses. Premièrement, une image de l espèce considérée en fond, un titre, et un texte. Le titre est dynamique, et occupe une surface importante, par conséquent quand l enfant va se balader avec son curseur personnalisé il va forcément le survoler. A ce moment là le titre changera de couleur, ce qui signifie, intuitivement, qu il faut cliquer dessus pour avoir plus d informations. Donc quand il y a un clic, une bande audio se lance, et l enfant peut la suivre avec le texte en le déroulant manuellement. Nous expliquerons pourquoi nous avons choisi cette configuration dans la partie réalisation, techniques. -La mise en place de boutons retour : à chaque niveau et à chaque séquence nous avons mis en place des boutons «retour» afin d accéder à la séquence précédente, cela fait également partie du scénario, on peut visiter, revenir en arrière, changer d atelier etc.
XI- Story Board a- Charte graphique Concernant la charte graphique de notre projet, il est important de rappeler qu elle est destinée à des enfants et qu elle doit ainsi être adaptée dans ce sens. Nous sommes donc partis de différentes constations afin de la concevoir. Nous avons tout d'abord imaginé l arborescence de notre application afin d avoir chaque séquence bien définie, savoir ce qu on allait y mettre comme informations. Puis nous nous sommes mis d accord sur les images de fond que nous allions mettre, ainsi nous avons utilisé uniquement des images bitmap, des photos, pour chaque fond d écran des séquences. En effet comme nous travaillions sur l océan, il nous paraissait logique de créer un environnement des plus immersifs pour l enfant. Concernant les couleurs que nous avons utilisées, sachant que notre thème était les océans, il nous est apparu évident que le bleu devait être prépondérant afin de rendre l expérience immersive et que l enfant se sente tout de suite plongé dans l environnement qu il s attend à découvrir. Il a fallu ensuite trouver des couleurs à la fois complémentaires au bleu (nous avons pu utiliser à cette occasion des outils mentionnés en cours tel que le site kuler adobe) pour que les différents éléments de nos séquences ressortent mais également fantaisistes car c est ce qui plaît aux enfants. Ce sont finalement des couleurs assez vives que nous avons choisies pour colorer nos titres (orange, jaune) ainsi que les différents éléments agrémentant nos séquences (poissons animés, végétation sousmarine). Nous avons également fait le choix de dessiner ces éléments plutôt que d utiliser des images bitmap qui auraient certes été plus fidèle à la réalité mais également moins familières à nos futurs utilisateurs. Pour faciliter l utilisation et la rendre intuitive, nous avons porté une attention particulière à l aspect des différents boutons présents dans notre projet. En effet se sont les éléments sur lesquels les enfants doivent agir pour naviguer dans notre application ce qui les rend très importants. Nous avons ainsi distingué les boutons de navigation qui sont de forme plutôt arrondie et à fond jaune des boutons plus interactifs. Ce que nous considérons comme des boutons de navigation sont les boutons présents dans les différents menus lorsqu on lance l application, qui participent à l initialisation de l expérience (choix du poisson, prise de connaissance des règles) ainsi que les boutons retour présents dans tout le projet. Les boutons plus interactifs sont ceux que l on retrouve au sein des séquences et qui vont apporter un réel contenu à l enfant (flèches permettant de sélectionner un poisson, nom des poissons qui déclenchent le lancement des pistes audio). De ce fait nous avons voulu les rendre plus dynamiques (leur aspect change considérablement lorsqu on les survole) afin de distinguer les deux aspects.
b- Intégration du son Comme nous l avons indiqué dans notre cahier des charges, Fish & Trip est destiné à des enfants de 5 à 8 ans. Cela inclut donc des enfants non lecteurs d où la nécessité d intégrer des sons à l application, dans un premier temps pour les guider puis pour leur permettre d accéder aux différentes informations concernant les poissons. Pour la première catégorie, les sons se lancent automatiquement lorsque l on arrive dans la séquence. Bien que cela puisse paraître un peu redondant pour un utilisateur sachant lire et ne désirant pas écouter les instructions, cela était nécessaire pour éviter qu un enfant non lecteur se retrouve bloqué au lancement de l application ne sachant comment faire pour accéder à la suite. Ainsi, toutes les instructions permettant d utiliser Fish & Trip sont communiquées à l utilisateur de manière arbitraire. Ensuite c est à l enfant de jouer les différents sons en cliquant sur les boutons destinés à cet effet à l aide de son curseur-poisson (c est assez intuitif). Nous avons également intégré des sons qui se jouent automatiquement lors d évènements particuliers tels que les changements de séquence afin de rendre la manipulation plus ludique et dynamique. XII- Réalisation a- Détails techniques Dès le début, on imaginait que notre projet serait entièrement basé sur Flash. Pendant le développement, il nous a offert des fonctionnalités assez simples à utiliser et aussi efficaces, notamment au niveau de l architecture du projet qui a été facilitée grâce au système de séquences. Bien que nous n ayons pas eu les compétences les plus qualifiées dans le logiciel, nous avons appris à nous en servir et avons beaucoup évolué dans sa maîtrise. - Les boutons : nous avons deux types de boutons dans notre projet. Les boutons de navigation et les boutons plus dynamiques qui déclenchent par le clic le lancement d une piste audio. - Le passage d une séquence à une autre : nous avons utilisé les fragments de code ActionScript, nous avons eu cependant à faire attention à ne pas avoir le même nom de fonction pour chaque action, à bien définir les noms d occurrence de nos boutons. Nous avons également dû créer des séquences «copies» des séquences «Début» et «Règles» afin de ne pas avoir les mêmes fonctions sur les boutons de navigation «Jouer» lorsque les boutons retour étaient utilisés pour y revenir. - Les sons : l implantation des sons nous a pris énormément de temps sur le projet, il fallait faire attention à ce qu ils ne se répètent pas lorsque ce n était pas nécessaire, à ce qu ils ne se superposent pas, qu ils ne se jouent plus lorsqu on changerait de séquence. On a aussi, grâce au logiciel Audacity, superposé plusieurs
sons volontairement, notamment le fond musical et nos voix, en ajustant le volume de chacun pour. - Les animations Flash : nous avons utilisé différentes fonctionnalités du logiciel afin de créer du dynamisme pour nos séquences. Sur la séquence d accueil nous avons su créer une animation «vagues» pour rendre la mer beaucoup plus réelle qu avec la seule photo de fond que nous avions importée. Sur la séquence «création d un poisson» nous avons dynamisé le décor créé en faisant se mouvoir des poissons et en rendant le corail vivant, en le faisant respirer, par la création de bulles en continu. - Le texte : nous avons créé, sur les séquences présentant les espèces marines, des textes que l on peut dérouler manuellement. Pourquoi avoir choisi le déroulement manuel? Car de cette façon l enfant peut suivre la piste audio en découvrant le texte de lui-même, c est une forme d interaction. De plus il peut, s il n a pas envie d écouter la piste vocale, seulement lire le texte, à son rythme. Bien sûr nous avons fait attention à la police du texte, il ne fallait pas qu elle soit trop importante pour ne pas monopoliser la surface de l image, principalement caractérisée par une photo de l espèce en question. De plus il fallait que le texte soit suffisamment lisible et compréhensible, ainsi il y a en moyenne 3 lignes affichées, ce qui permet d avoir des phrases complètes et qui ont du sens, plutôt que 5 mots affichés à la fois et qui, lus sans suite, n ont plus vraiment de sens. b- Optimisation Afin d améliorer l interactivité de notre projet, on envisagerait d utiliser plus d animations surtout dans la page d accueil et dans le planisphère. Dans la page d accueil, travailler dans l animation du logo et dans le planisphère travailler afin de donner vie à la carte. De plus, on pourrait ajouter la partie quizz que nous n avons pas eu de temps de faire comme nous ne connaissions pas parfaitement le logiciel et que nous étions en train de découvrir et appliquer petit à petit les fonctionnalités. Un autre point intéressant pour dynamiser notre interface aurait été de faire se mouvoir chaque espèce marine, par des animations. Nous aurions pu, dans ce sens également, permettre à l enfant de visualiser des vidéos de ces espèces dans leur état naturel. Un de nos parents étant enseignant dans une école pour des élèves de 5 à 7 ans il aurait été très utile de leur proposer de tester l application puis de recueillir sous forme d un sondage les réactions positives / négatives. Malheureusement le
projet ayant pris du retard il n était pas prêt à être testé, nous aurions eu trop de réponses négatives. CONCLUSION Au début du projet, il faut avouer que nous n étions vraiment pas confiants, aucun de nous ne sachant utiliser les logiciels présentés pour la création d interfaces/d applications etc. Cependant en visionnant des tutos sur internet, en lisant des articles d aide à l utilisation de Flash, et en nous entraidant, nous avons réussi à utiliser des fonctionnalités primaires, puis des fonctionnalités plus poussées, afin de proposer un projet qui répond tout de même globalement à nos attentes, malgré nos ambitions qui n ont pas été réellement atteintes.