Création d'aides
pour le logiciel Mathenpoche

L'aide d'un exercice de Mathenpoche est un fichier swf situé dans le même repertoire que le fichier de l'exercice.
Elle est chargée en même temps que l'exercice lui-même, au niveau 100 de l'animation (_level100) : elle est au-dessus des autres élèments de l'exercice mais est en arrière-plan au lancement grâce à la ligne de code « _level100._visible = false » située sur l'image 1 du calque « loading ».

La conception de l'aide se pense essentiellement à partir de l'exercice : pour Mathenpoche, elle correspond à un besoin d'explication, de clarification... Elle reprend souvent des élèments des exercices pour garder une évidente cohérence. Elle ne doit pas être trop « longue » : l'élève ne doit pas être lassé par son utilisation sinon il a tendance à la « zapper ». Elle peut-être un rappel de cours, une explication d'une méthode, le détail d'une construction... L'objectif est de donner les moyens de progresser à l'élève sans toutefois lui donner une réponse directe à la question de l'exercice.

Malgré sa spécificité, l'aide peut bien souvent être aussi utilisée de manière indépendante pour, par exemple, illustrer une leçon lors d'une videoprojection en classe.

Mise à part le premier paragraphe, ce document va essentiellement décrire le modèle de l'aide par ses calques : il s'agit d'une description « verticale ». Puis pour la conception propre de l'animation, nous verrons plutôt une utilisation « horizontale » de Flash, image par image comme pour la conception d'un film.

Description du modèle

Le fichier « modele_aide.fla » est consitué de plusieurs calques que nous allons détailler : ils représentent le corp principal de l'animation.

L'image 1 : le « loading »

Cette image contient les éléments relatifs au chargement de l'aide. Ils permettent de suspendre la lecture de l'animation jusqu'à ce qu'elle soit complètement téléchargée par le navigateur.

Cette image est vérouillée et ne nécessite aucune modification.

Le calque « fond »

Situé dans le deuxième calque à partir de la deuxième image, il permet de rendre invisible et inactif l'exercice Mathenpoche (qui se situera en dessous) grâce à la ligne « fond.useHandCursor = false » placée dans le même calque. Ce calque doit être présent tout le long de l'animation.

Cette image est vérouillée et ne nécessite aucune modification.

Le calque « titre »

Situé dans le troisième calque à partir de la deuxième image, il correspond au nom de l'exercice présent dans l'interface de Mathenpoche. Il est à modifer dans ce sens et n'a plus à être changé par la suite.

Pour cela dévérouiller ce calque, cliquer dans l'image 2 et selectionner le texte statique pour y taper votre titre.

Les calques intermédiaires : le « corps de l'aide »

Les calques « centraux » sont ceux où l'on va placer tous les éléments décrivant l'animation en elle-même : images et textes fixes, clips avec interpollation, interpolation sur un calque... On donnera des exemples à la fin de ce document.

Le calque « bouton aide »

Ce calque contient seulement le bouton aide contenant le code ci-dessus. Il permet de visualiser le mode d'emploi de l'aide (voir paragraphe 7 : Le calque : « aide »).

Le calque « boutons »

Ce calque contient les quatre boutons permettant le pilotage de l'animation.

Le bouton « fermer »

Il permet de masquer l'aide pour revenir à l'exercice (_level100._visible = false) et rembobine l'animation dans le même temps (gotoAndStop(1)). Dans le cas d'aides avec menu, dans les scènes secondaires, il permettra également de revenir au menu de l'aide.

(Autrement dit, un code différent peut être placé sur un bouton identique si celui-ci est placé dans une image ou une séquence différente.)

Le bouton « suivant »

Il permet de faire avancer l'animation en passant à l'image suivante (nextFrame()) ou à une image déterminer (goToAndStop(7)).

Le bouton « précédent »

Il permet de revenir à l'étape précédente dans l'animation en affichant l'image précédente (prevFrame()) ou toute autre image qui précéde celle visionnée (gotoAndStop(7)).

Remarque : il est parfois utile de « cacher » ces boutons lors de l'utilisation de certains clips.

Le bouton « revoir »

Il renvoit la lecture sur le début de l'animation.

Le calque « aide »

Comme pour le fond, inutile d'y toucher : on le laisse vérouillé et en mode « caché » dans Flash pour se consacrer à la réalisation de l'animation.
Dans l'image contenant le clip aide se trouve le code « setProperty(aide, _visible, 0) » afin de rendre invisible ce clip à la lecture de l'animation. Il est rendu visible grâce au bouton aide vu au paragraphe 5.

L'objetif de ce clip est d'expliquer comment utiliser les différentes parties de l'animation.

Le calque « action »

Placé au sommet des calques, il contient essentiellement un peu de code pour le défilement des images ou l'arrêt sur une image. Souvent « stop() » ou « play() ».

Création d'aides

Voici quelques propositions de types d'aides différentes à réaliser.

Une aide avec du texte.

A partir de modele_aide.fla, réaliser une animation expliquant avec uniquement un texte la règle d'addition des fractions. Dans ce type d'aide, un seul calque suffit. Utilisez celui qui est présent.

Le texte devant apparaître en cinq étapes sera le suivant :

Pour additionner des fractions, il faut qu'elles aient le même dénominateur.
Dans ce cas, la somme des fractions :
- a pour dénominateur le dénominateur commun des deux fractions ;
- a pour numérateur la somme des numérateur.

Remarque : « F5 » pour insérer une nouvelle image, « F6 » pour insérer une nouvelle image clé.

Une aide avec du mouvement.

Pour créer une animation avec des interpolations, il est conseillé d'insérer un calque spécifique à chaque interpolation. Une autre possibilité est d'insérer l'interpolation dans un clip.

Vous allez créer une animation sur la base de la précédente où seront présentes en même temps que le texte l'addition de deux fractions ayant le même dénominateur.

Attention, pour commencer une animation, pensez toujours au résultat final pour éviter à avoir à bouger textes, clips et graphiques ensuite dans chaque image !

Si vous examinez « 6N2s3ex5_an.fla », vous constatez une superposition « lourde » de calques contenant les interpollation : dans ce cas il faut travailler sur les calques « action » et « boutons » pour la lecture et l'arrêt de l'animation. De plus le code sur les boutons « retour » doivent spécifier le numéro de l'image précédent l'interpollation.

Remarque : vous pouvez examiner « 5G5s2ex1_an.fla » pour trouver quelques idées. Dans cette aide les interpolations ont été intégrées au clip. La première image du clip , afin que l'élève ne fasse pas avancer l'animation, contient le code suivant :

_parent.boutonR._visible = 0;

_parent.boutonG._visible = 0;

_parent.boutonD._visible = 0;

A la dernière image, on redonnera la main à lélève avec le code suivant :

_parent.boutonR._visible = 1;

_parent.boutonG._visible =1;

_parent.boutonD._visible = 1;

stop();

Cette méthode permet la modification d'une interpolation sans se soucier des autres calques.

Une aide avec un menu.

Si vous éxaminez « 6G1s3ex4_an.fla », vous constatez ici l'utilisation de 4 séquences (« scènes ») : ce type d'animation est très utile si on veut détailler différents cas analogues.

Exercices

Exercice 1 :
Réaliser une aide sur la somme des fractions avec un menu à trois entrées :

fractions de même dénominateur

fractions dont un dénominateur est multiple des autres

recherche d'un multiple des dénominateur

Exercice 2 :
Réaliser une animation simple détaillant les côtés d'un triangle rectangle à partir d'un de ses angles aigus.

Exercice 3 :
Même exercice avec animation des angles et côtés.

Exercice 4 :
Réaliser une animation avec un menu à trois entrées détaillant les formules du cosinus, du sinus et de la tangente d'un angle aigu.

Création d'aides animées pour le logiciel Mathenpoche	5/5

Laurent Hennequart

2005-01-22T15:41:50