Voir la source de Tutoriel:Animation pas à pas d'une construction géométrique simple avec boutons et scripts.

= Créer une animation pas-à-pas =

== Objectif ==
Le but de ce tutoriel est de donner les techniques de bases pour créer des animations pas à pas, par exemple pour montrer les étapes d'une construction. 
J'ai choisi, vu mon métier, un exemple niveau collège (6°): les étapes de la construction de la perpendiculaire à une droite passant par un point, en faisant coulisser l'équerre le long de la droite jusqu'à buter contre le crayon, puis tracé. Mais on peut utiliser les mêmes techniques à tout niveau. 
[http://www.geogebra.org/student/m51941  Voici le produit fini.]

On verra dans ce tutoriel: 
* L'utilisation de l'affichage conditionnel pour voir les étapes une à une
* L'utilisation de boutons et de leurs scripts pour passer d'une étape à l'autre et déclencher des événements à certains changements d'étapes, comme démarrer une animation.

== Établir la structure de l'animation == 
C'est le côté didactique du travail, décider ce qu'on montre. Ici le but est que les élèves apprennent à tracer la perpendiculaire à une droite (d) passant par le point A.
Dans l'exemple, il y a 6 étapes (de 0 à 5, on verra plus loin pourquoi je commence à 0).
* Étape 0: (départ) la droite (d) et le point A.
* Étape 1: on place l'équerre le long de la droite et le crayon sur le point A.
* Étape 2: on fait glisser l'équerre le long de la droite jusqu'à buter sur le point A.
* Étape 3: on trace alors le long de l'autre côté de l'angle droit de l'équerre.
* Étape 4: on cache l'équerre et on prolonge la perpendiculaire.
* Étape 5: on place le pied de la perpendiculaire et on code l'angle droit.

Le gros du travail est fait ici! Il faut vraiment y réfléchir, il peut être très compliqué d'en changer la structure une fois le développement commencé.

== Commencer par dessiner le but == 
Le plus facile: placer un point A, une droite (d) - ici créée par les points M et N, cachés. Si vous ne souhaitez pas que la droite puisse être déplacée, vous pouvez par le menu Propriétés->Avancé la rendre non sélectionnable. Astuce: mettre tout de suite de la couleur aux objets importants, on les repère alors plus facilement dans la fenêtre algèbre.

Créez donc une droite (MN), un point libre A, la perpendiculaire à (MN) qui passe par A, son pied. Éditez la légende de la droite : (d) puis cachez les points M et N. Appelez H le pied de la perpendiculaire. Afficher l'angle droit.


== Décider la commande des animations == 
On a ici deux animations:
* L'équerre qui coulisse: cette animation sera commandée par son angle droit. On doit donc définir un segment sur la droite (d): entre la position de départ de l'équerre et sa position finale, le pied de la perpendiculaire. L'animation consiste à déplacer le point de commande, qui entraîne l'équerre.
* Le coup de crayon le long de l'autre côté de l'équerre: un point du segment formé par le côté à tracer de l'équerre. L'animation sera rendue par la trace active du point.

Il faut donc définir, dans l'ordre: 
* un segment dans la droite (d), sur lequel l'équerre va coulisser: le segment [BH] : placer le point B sur la droite, cacher la droite, tracer le segment.
* un point C dans ce segment: l'angle droit de l'équerre. Utiliser l'outil "nouveau point" en cliquant dans le segment [BH]. Cacher alors le segment et afficher la droite à nouveau.
* les dimensions de l'équerre: disons, 2 le long de la droite (d), 3 dans la dimension perpendiculaire.
* le segment à tracer: il est préférable de l'attacher au but, qui est à la bonne position, plutôt qu'à l'équerre, qui peut bouger. On va donc placer un point sur la perpendiculaire, à la distance 3 du pied: D. 
* le point que va tracer: E, un point du segment [DH] (ici aussi, il vaut mieux cacher la perpendiculaire pour être sur que le point E appartienne au segment et non à la droite).

Les points animés sont donc:
* C, point du segment [BH] inclus dans la droite (d), qui commande l'équerre: aller dans ses propriétés, onglet algèbre, et régler l'animation sur "une fois (croissant)".
* E, point du segment [DH] inclus dans la perpendiculaire, qui fera le tracé. Même réglage: animation en mode "une fois (croissant)".
Une fois C et E créés, les segments [BH] et [DH] doivent être cachés.

== Créer les objets animés ==
Ils doivent entièrement dépendre du point de commande.
* Pour l'équerre, c'est facile, on s'en tire avec la perpendiculaire à (d) passant par C, des intersections avec des cercles de centre C et de rayon 2 et 3, puis l'outil polygone.
* Pour le crayon, il faut un peu plus de graphisme: on peut pour faire simple se contenter d'un segment défini à l'aide d'un vecteur. Définir u=(2,-0.5), F=E+u et le segment [EF]: ça fera une première version du crayon, qu'on pourra toujours améliorer plus tard.

Une fois les objets créés, cacher les étapes de la construction.

== Mettre en place l'animation == 
L'animation est contrôlée par un entier "step", créé par step=0 dans la zone de saisie.
On définit un entier nstep=6 (le nombre d'étapes) et on crée deux boutons: 
* "Suivant" avec comme script: step=Reste[step+1,nstep]
* "RAZ" avec comme script: step=0
Ainsi, chaque fois que l'on clique sur suivant, step parcourt la séquence: 0 1 2 3 4 5 0 1 2 3 4 5 0 1 ... (pour nstep=6). Et quand on clique sur RAZ, step est remis à 0. On enrichira ces scripts au fur et à mesure.

On doit alors décider à quelles étapes apparaissent les différents objets.
* la droite (d) et le point A seront présents tout le temps, on les laisse tranquilles.
* L'équerre apparaît aux étapes 1 (positionnement le long de la droite), 2 (elle glisse), 3 (on trace): on lui met comme condition d'affichage: 
step >= 1 ^ step <= 3
*  Le crayon apparaît de l'étape 1 (placé sur le point) à 3 (tracé):  même condition
* La perpendiculaire apparaît à l'étape 4 (on prolonge à la règle le tracé), on lui met comme condition : step==4
* Le pied et l'angle ont pour condition d'affichage: step==5.

== Animer ==
C'est ici que ça devient technique. Au démarrage de l'étape 2, l'équerre doit glisser.
Il faut donc que le bouton "Suivant" détecte l'étape 2 et déclenche l'animation. 
La manière naturelle est d'utiliser du javascript, parce qu'on a besoin d'une structure de contrôle (test, boucle...). Mais je déteste ça. Mon opinion est qu'il faut tendre vers le zéro javascript, par souci d'élégance! 
On peut simuler les structures de contrôle à l'aide de la commande Exécute: 
Rajouter dans le script du bouton "Suivant": 

Exécute[ {Si[ step==2 , "StartAnimation[D,true]" ,"ZoomIn[1]"] } ] 

'''Commentaire 1''' : la commande Exécute prend en entrée une liste de chaînes de caractères, puis les évalue comme des commandes geogebra. 
Ici il y a une liste avec une chaîne, elle-même résultat d'un test:  Si[ step==2 , "StartAnimation[D]" ,"ZoomIn[1]"]  : donc si step vaut 2, ça sera la chaine "StartAnimation[D, true]", qui une fois exécutée lancera l'animation du point D; si step n'est pas égal à 2, la chaîne sera "ZoomIn[1]" (Agrandir[1] en français), qui ne fait rien sur le graphique à part nettoyer les traces. Il est nécessaire de prévoir une commande pour le cas où le test n'est pas satisfait. Sinon, le test renvoie "null", et Exécute une erreur. Agrandir[1] est bien pratique comme commande qui ne fait pratiquement rien.

'''Commentaire 2''' : les noms de commandes argument de Exécute doivent être en anglais. Ah là là, que c'est dommage. Astuce: toujours avoir la page "commandes" du wiki affichée, trouver sa commande en français, puis changer la langue: on trouve alors tout de suite le nom anglais de la commande.

'''Commentaire 3''' : en combinant Exécute et Séquence, on arrive à simuler des boucles. Mais c'est plus chaud!

Au démarrage de l'étape 3, c'est le crayon qui bouge. Astuce: activer la trace de l'extrémité E du crayon, ça sera plus visuel. Le principe est le même: rajouter dans le script du bouton "Suivant": 

Exécute[ {Si[ step==3 , "StartAnimation[E,true]" ,"ZoomIn[1]"] } ]

== Ajuster la remise à zéro == 
Si on clique sur "RAZ", step est remis à zéro. On peut en profiter pour nettoyer le graphique de la trace du point E, et repositionner équerre et crayon dans leur position initiale. Pour cela, rajouter dans le script du bouton "RAZ" les lignes: 
* Agrandir[1] (nettoyage du graphique)
* SoitValeur[C,B] (C est mis dans sa position de départ: B)
* SoitValeur[E,D] (E est mis en D).

== Mettre en forme ==
* Cacher tout ce qui doit l'être.
* Rajouter des textes à chaque étape (condition d'affichage, p.ex. step==2 pour les textes devant s'afficher à l'étape 2). 
* Mettre plein de couleurs et des gros traits, ça passe bien mieux une fois projeté. Plus l'animation est jolie, plus il est facile d'accrocher les jeunes élèves.

Et bien, à vous de jouer !