Tutoriel N°1
publicité
Eric Fusin – Christophe Vinay Stage : Créer des animations multiplateformes Ma première animation pas à pas avec L’animation à créer est un jeu sérieux basique : - Au lancement du jeu les bactéries prennent un angle aléatoire et se déplacent suivant cet angle - Un panneau d’information s’affiche pendant 5 secondes puis disparaît. - Un macrophage est déplaçable à l’aide de la souris ou du touché tactile. - Au contact du macrophage les bactéries disparaissent. - Le nombre de bactéries est décrémenté de 1 à chaque bactérie touchée. - Quand le nombre de bactéries atteint 0, un panneau apparaît indiquant que l’infection est terminée. - Un bouton d’information permet de faire apparaître et disparaître des légendes. 1) Dans un premier temps il faut créer les 13 objets nécessaires à l’animation et les positionner sur la scène : 2) Une fois tous les objets mis en place, il s’agit ensuite de rendre l’animation interactive et … animée. - Créer 4 variables globales appelées Souris_X, Souris_Y, Nb_bacteries et Var_angle. Initialiser la variable Nb_bacteries à 3. - Créer une variable d’objet pour chaque bactérie. Appeler ces variables objets : Angle_bact1, Angle_bact2 et Angle_bact3. - Créer un premier évènement. Au lancement de la scène, les objets « Derme », « Epiderme » et « Blessure » doivent être cachés. Les variables d’objets Angle_bact1, Angle_bact2 et Angle_bact3 doivent prendre une valeur aléatoire comprise entre 0 et 360. Pour cela : o o o o o Ajouter une condition : choisir « Scène » puis « Au lancement de la scène » et valider. Ajouter une action : choisir « Tous les objets » puis « Visibilité » et enfin « Caché ». Cliquer sur et sélectionner l’objet à cacher. Valider. Ajouter autant d’action qu’il y a d’objets à cacher. Ajouter une action pour donner une valeur aléatoire à la variable « Angle_bact1 ». Pour cela éditer l’action « Modifier une variable d’un objet ». Ajouter deux autres actions pour les angles des deux autres bactéries. Astuce pour aller plus vite : copier-coller une action et modifier les paramètres directement dans l’action. Stage : Créer des animations multiplateformes Eric Fusin – Christophe Vinay - Créer un nouvel évènement Cet évènement sera sans condition et lancera les actions suivantes : par défaut l’animation du macrophage est en pause, l’objet texte Var_nb_bacteries reçoit les données de la variable globale qui compte les bactéries, les bactéries prennent l’angle rangé dans leur variable objet et subissent une force qui les fait se déplacer suivant cet angle. Pour cela : o Ajouter une action permettant de mettre en pause l’animation du macrophage : choisir « Sprite » puis « Animations et images » et enfin « Mettre en pause l’animation ». Renseigner l’objet à mettre en pause : Macrophage et valider. o Ajouter une action permettant d’afficher le nombre de bactéries : choisir « Objet Texte » puis « Modifier le texte ». Renseigner les lignes comme ci-dessous et valider. o Ajouter une action pour donner un angle aléatoire à la bactérie 1 : choisir « Tous les objets » puis « Angle » et enfin « Tourner vers un angle ». Renseigner les lignes comme ci-dessous et valider. o Ajouter deux autres actions afin de donner un angle aléatoire aux deux autres bactéries. o Ajouter trois actions afin d’ajouter une force d’angle aux trois bactéries. La capture d’écran ci-contre donne une force d’angle à la bactérie 1. Stage : Créer des animations multiplateformes Eric Fusin – Christophe Vinay - Créer un nouvel évènement En cliquant sur la scène ou en touchant la scène, le macrophage se dirigera vers la zone cliquée ou touchée. En maintenant le clic ou le touché et en déplaçant la souris ou le doigt, le macrophage suivra. Pour cela ajouter la condition comme ci-contre. o Ajouter une action afin que la coordonnée X de la souris soit rangée dans la variable globale Souris_X : voir ci-dessous. Choisir le calque de base et la caméra 0. o o o Ajouter une action afin que la coordonnée Y de la souris soit rangée dans la variable globale Souris_Y. Ajouter une action qui applique au macrophage une force dirigée vers les coordonnées X et Y contenues dans les variables Souris_X et Souris_Y. Ajouter une dernière action à l’évènement afin que l’animation du macrophage se lance. - Créer un nouvel évènement Une bactérie touchée par le macrophage disparaît. Le nombre de bactérie est décrémenté de 1. Comme les bactéries 1, 2 et 3 ont le même comportement lorsqu’elles entrent en contact avec le macrophage, on peut créer un groupe contenant ces bactéries. C’est le groupe créé qui sera alors utilisé dans le test de collision. o Dans l’éditeur d’objets : cliquer droit sur « Groupes » pour ajouter un groupe et le renommer « Bacteries ». Ajouter au groupe les objets « Bacterie1 », « Bacterie2 » et « Bacterie3 ». o Ajouter une condition à l’évènement et choisir « Tous les objets » puis « Collision ». Renseigner les lignes comme cicontre. o Ajouter une action à l’évènement « Collision » afin que l’objet (ici le groupe) « Bacteries » soit supprimé. Voir ci-dessous : Choisir le groupe « Bacteries ». Eric Fusin – Christophe Vinay Stage : Créer des animations multiplateformes o Ajouter une nouvelle action à l’évènement « Collision » afin de décrémenter de 1 la variable globale « Nb_bacteries ». - Ajouter un évènement afin que les bactéries entrant en collision avec l’épiderme s’arrêtent. - Ajouter un évènement afin que le macrophage entrant en collision avec l’épiderme s’arrêtent et se séparent de l’épiderme (cette action est obligatoire si on veut que l’objet « Macrophage » soit toujours libre de ses mouvements). - Créer un évènement afin que quand la variable globale atteint 0, l’objet « Infection_terminee » se positionne au centre de la scène. - Créer un évènement afin que, lorsque le curseur ou le touché est sur l’objet « Btn_infos », les objets « Blessure », « Derme » et « Epiderme » se montrent. - Créer un évènement afin que, lorsque le curseur ou le touché n’est plus sur l’objet « Btn_infos », les objets « Blessure », « Derme » et « Epiderme » se cachent. - Créer un évènement Le panneau « Infos » reste pendant 5 s lorsque l’animation commence puis disparaît. Pour cela ajouter une condition de temps comme ci-contre. o Ajouter une action qui positionne l’objet « Infos » en dehors de la scène. FIN Comment éditer l’animation une fois celle-ci terminée ? L’animation une fois terminée doit être compilée : Fichier Exporter pour le web. - Choisir « Exporter pour le web » (choix par défaut) Choisir un dossier vierge pour l’exportation puis cliquer sur « Exporter ». Ouvrir le dossier d’exportation : il comporte deux dossiers vides, les images utilisées, un fichier java nommé code, un fichier html nommé index. L’animation se lance à partir du fichier index (utiliser uniquement le navigateur Firefox de Mozilla). Le dossier comportant les fichiers de l’animation ne doit pas être accessible aux élèves. En effet, il suffit de supprimer les images dans le dossier ou de remplacer les images par d’autres en gardant le même nom pour que l’animation soit modifiée. Il est donc prudent de créer un raccourci pointant vers le fichier index. Seul ce raccourci sera accessible aux élèves.
