Tutoriel N°1

Stage : Créer des animations multiplateformes Eric Fusin – Christophe Vinay
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 Ajouter une condition : choisir « Scène » puis « Au lancement de la scène » et valider.
o Ajouter une action : choisir « Tous les objets » puis « Visibilité » et enfin « Caché ». Cliquer sur et
sélectionner l’objet à cacher. Valider.
o Ajouter autant d’action qu’il y a d’objets à cacher.
o Ajouter une action pour donner une valeur aléatoire à la variable « Angle_bact1 ». Pour cela éditer
l’action « Modifier une variable d’un objet ».
o 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
Choisir le calque de
base et la caméra 0.
Choisir le groupe
« Bacteries ».
- 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.
o Ajouter une action afin que la coordonnée Y de la souris soit rangée dans la variable globale Souris_Y.
o 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.
o 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 ci-
contre.
o Ajouter une action à
l’évènement « Collision » afin que
l’objet (ici le groupe) « Bacteries »
soit supprimé. Voir ci-dessous :

Stage : Créer des animations multiplateformes Eric Fusin – Christophe Vinay
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.