STIC2 Rapport de Julien Venni, 15 mai 2016


EXERCICE 15 - Animation interactive avec Animate CC


Liens

  • lien vers le dispositif html
  • lien vers le fichier.fla - code source
  • Page Travaux
  • contribution wiki
  • page contributeur wiki - venni6

  • Objectifs du dispositif

    Public cible

    Cette page s'adresse:

    Objectifs

    Le but de ce module est de fournir un support démontrant le développement d'un embryon humain de 9 à 23 jours.


    Design

    J'ai opté pour une animation image par image de type dessins animés en me basant sur la théorie de la Gesthalt étudiée durant ma 1er année de l'université en psychologie - qui détermine, selon wikipedia , que les processus de la perception et de la représentation mentale traitent spontanément les phénomènes comme des ensembles structurés (les formes) et non comme une simple addition ou juxtaposition d'éléments - ainsi, l'animation est perçue comme continue et pas comme des images individuelles. De plus, la technique image par image m'a permis d'associer à l'animation le jour exacte de la photo de l'embryon. Pour une meilleure expérience utilisateur, j'ai ajouté des boutons de contrôle pour rendre l'animation interactive et ainsi permettre à l'apprenant de recommencer l'animation au début, de la mettre en pause pour étudier l'image ou prendre des notes, et de la continuer quand il le souhaite. J'ai décidé d'utiliser des images réalistes - et non des schémas par exemple - pour assurer une meilleur continuité entre les images et donner un effet d'échographie en directe.


    Résumé de la démarche

    J'ai téléchargé une image représentant différents stades de l'embryon humain, puis j'ai décomposé l'image en plusieurs parties pour faire de chaque étape du développement une image unique grâce à photoshop. Je l'ai ensuite vectorisée sous illustrator en 16 niveaux de gris puis un peu modifiée pour permettre une meilleure lisibilité et assurer des transitions plus fluide en manipulant certaines parties de l'embryon, puis je les ai exportées une à une en svg - l'image est ainsi plus légère en vecteur et grâce aux midifcations de forme et de style je me l'approprie et ne suis pas soumis à d'éventuels droits d'auteur, mais j'ai quand même vérifié la source et il s'agit d'une image dont les droits d'auteurs sont notés DR, l'image est donc utilisable gratuitement car l'auteur est inconnu, il peut toute fois demander une rémunération - que je lui paierais - s'il se faisait connaitre.

    Avec animate cc, j'ai créé une séquence dans ma scène ou j'ai intégré les 15 images avec un cours intervalle pour donner un effet de continuité entre chaque cliché. J'ai intégré les jours relatifs au stade de développement de la photo correspondante et un script pour interragire avec l'animation.

    Finalement, j'ai exportée le tout en utilisant les options de publication pour obtenir le code .html et .js. J'ai modifié le code html dans brackets et appliqué une feuille de style pour organiser ma page pédagogique plus proprement.


    Difficultés

    J'ai essayé plusieurs techniques d'animations. J'ai commencé par un effet de morphing qui m'aurait garantit une fluidité dans les transitions entre les frames, mais cela n'a pas donné le résultat que j'attendait car mes images étaient trop complexes. En effet, les images intermédiaires crée par animate cc n'étaient pas satisfaisantes, les couleurs se mélangeaient de manière peu structurée et je n'obtenais pas de transition logique, par exemple un bras dans l'état 1 ne devenait pas le bras dans l'état 2, mais c'était plutôt les couleurs qui s'organisaient différement d'une image à l'autre. J'ai donc opté pour une animation image par image.

    Il était difficile de placer les images de l'embryon toujours au même endroit, ainsi que le texte qui décompte le nombre de jour, en utilisant la technique de copier sur place car il y avait des bugs, et cela ne se plaçait pas exactement à l'endroit voulu ce qui amenait des sauts de positionnement d'une image à une autre. J'ai dû donc repositionner mes éléments sur chaque frame pour qu'ils apparaissent toujours au même endroit et vérifier en lançant l'animation et en corrigeant la position.

    Il y avait un bug de manipulation dans animate cc, si j'utilisait le drag and drop le logiciel plantait, alors je faisait des copier coller des éléments dans ma scène.

    Le temps imparti de 7 jours pour l'utilisation du logiciel animate cc est beaucoup trop court et cela peut être problématique pour la réalisation de l'exercie 15 mais je suis quand même content d'avoir appris à utiliser ce logiciel.


    auto-évaluation

    Je trouve dommage que le morphing n'ai pas fonctionné car cela aurait permis des transitions plus fluides et permis peut être une meilleure qualité d'animation.

    L'animation démarre au moment où la page se charge ce que je trouve dommage et cela ne permet pas une expérience utilisateur optimale selon moi, pourtant il me semble avoir intégré le bon code - celui vu en cours - dans le script avec this.anim1.stop(); mais cela ne fonctionne pas. Pour une prochaine fois, je corrigirai ce point qui je trouve important.


    Bibliographie