Les V-Toys Enfants2 - Dessin animé sans déplacement

From OFSET Wiki

1 L’animation sans déplacement
2 PRINCIPE DE CONSTRUCTION DU V-SCRIPT D’ANIMATION
3 LA MODIFICATION DU MOTIF D’ORIGINE – LE HALO et LA MACHINE A DESSINER
- 3.1 Le Halo et la machine à dessiner
4 LES ANIMATIONS SANS DEPLACEMENT
- 4.1 l’objet garde son identité – l’enfant qui joue avec la balle
5 QUELQUES EXEMPLES D'ANIMATION
6 QUELQUES PROJETS
7 En résumé
- 7.1 Les projets OUTILS
- 7.2 La version anglaise du chapitre

[edit] L’animation sans déplacement

On trouve, dans le tiroir des outils V-toys, , un container particulier qui a les apparences du container déjà utilisé pour construire les scripts V-toys, mais qui a des caractéristiques un peu différentes. Il accepte également de recevoir des objets , et ici nous allons lui fournir des images et non des briques . Mais il est surtout pourvu d’un curseur qui va passer d’image en image et permet de créer des images animées. On lui donne le nom de récipient d’images.

Le récipient d’images est placé à l’intérieur d’une brique verte pourvue d’un désignateur qui renvoie à l’objet à animer., mais la brique est sans point d’exclamation , ce qui fait qu’il va falloir la placer dans un container de programmation ou V-Script d’animation qui sera à activer avec les horloges quand l’ensemble des opérations nécessaire à l’animation sera réalisé.

Nous allons avoir 2 types d’animation, :

l’animation sans déplacement, l’objet modifiant son apparence et bougeant sans changer de place.
l’animation avec trajectoire, l’objet animé se déplaçant sur la surface de l’écran.

Mais l’un et l’autre passent par une transformation du motif d’origine .

Il faut donc expliquer aux enfants les manœuvres nécessaires pour modifier l’apparence du motif à animer et, ensuite, comment construire le V-script d’animation.

Ce chapitre est consacré à l ‘animation sans déplacement.

[edit] PRINCIPE DE CONSTRUCTION DU V-SCRIPT D’ANIMATION

Dans le V-script ci-dessous on a placé à l’intérieur du récipient d’images, un dessin et sa modification (le pacman avec la bouche ouverte puis fermée). Mais on aurait pu prévoir une suite plus longue de modifications que l’on aurait placées les unes à la suite des autres. Automatiquement, le récipient s’agrandit à chaque nouvelle admission et la première s’entoure d’un rectangle mobile appelé curseur qui passe d’image en image lorsque le script est activé.. Quand leur nombre dépasse ce que l’on peut mettre à l’intérieur de la surface visible du récipient, il continue de se remplir hors écran et il suffit de déplacer vers l’extérieur la poignée jaune du halo de la brique d’animation verte pour mettre à jour les formes engrangées (voir halo).

Pour provoquer l’animation du motif, il faut :

placer la suite des images modifiées dans le récipient d’images.
dupliquer la première image placée dans le récipient à l’aide de la poignée verte de son halo et la déposer sur l’écran..
inscrire cette image dupliquée dans le désignateur de la brique.
inscrire le script d’animation dans le désignateur des 2 horloges et activer l’horloge de démarrage.

Le curseur passe d’image en image et, simultanément, sur l’écran, le motif prend la forme du dessin entouré du curseur à l’intérieur du récipient (ici, le pacman ouvre et ferme la bouche sans interruption jusqu’à l’intervention de l’horloge d’arrêt).

[edit] LA MODIFICATION DU MOTIF D’ORIGINE – LE HALO et LA MACHINE A DESSINER

Nous venons de faire allusion, pour déplacer et agrandir 2 des éléments placés dans le croquis ci-dessus, aux poignées vertes et jaunes de leur halo. C’est le moment de parler avec plus de précision de cet outil déjà évoqué précédemment, et dont, avec la machine à dessiner de l’espace dessin, nous allons avoir besoin constamment pour produire et modifier les formes qui vont être à la base de l’animation. .

[edit] Le Halo et la machine à dessiner

Le halo apparaît dès que l’on appuie, avec la souris, sur n’importe quel objet présent sur l’écran en tenant la touche ALT enfoncée. Il est constitué d’une couronne de boutons de diverses couleurs appelés des poignées. Le croquis ci-dessus résume le rôle de chacune d’entr’elles. Certaines ne seront pas utilisées car elles ressortissent de la programmation Etoys ( la poignée bleu clair qui donne accès au visualiseur de commandes et la poignée marron produisant une brique au nom de l’objet). Pour les autres, nous verrons au fur et à mesure quel usage on peut en faire dans l’étude qui nous occupe.

Pour réaliser le premier motif de notre animation , on rejoint l’écran dessin à partir de la barre orange des fonctions, au bas de l’écran (le pinceau). Chaque enfant peut le construire à son idée, à l’aide de la machine à dessiner, et le rapatrier sur l’écran Monde avec la touche FINI.

Comme décrit dans le croquis ci-dessous, la machine à dessiner comporte un nombre important de fonctions sur lesquelles il suffit d’appuyer avec la souris pour que l’on puisse les utiliser (la fonction désignée s’entoure d’un Halo ou pâlit ) :

dessiner avec le pinceau en trait libre dont on choisira , dans les cercles sous-jacents, l’épaisseur du trait et sa teinte dans le nuancier (les cercles prennent la couleur choisie).
effacer dans les mêmes conditions d’épaisseur avec la gomme.
remplir avec le seau une surface entourée de trait et bien fermée.
utiliser la pipette qui permet à la fois de prendre la couleur sur un objet et de la réutiliser ailleurs sans avoir à la chercher sur le nuancier (cela permet également de faire disparaître un détail dans une surface d’une couleur donnée , ce qui correspond à une autre façon de gommer).
etc.( à décrire selon les besoins).

Nous avons là les 2 outils indispensables pour créer et modifier un dessin et passer , selon les besoins, d’un écran à l’autre. Le mieux est de prendre un exemple concret pour voir ce qu’il faut faire pour construire un objet et le modifier afin de créer, par exemple, une animation sans déplacement .

[edit] LES ANIMATIONS SANS DEPLACEMENT

[edit] l’objet garde son identité – l’enfant qui joue avec la balle

On va procéder à l’animation du dessin d’un enfant qui joue à la balle, en ayant recours à 2 attitudes seulement, comme pour le pacman :

l’enfant a le bras levé et touche la balle pour l’envoyer au sol.
Le bras est baissé et la balle est au sol.

Dans le va et vient entre ces 2 attitudes déclenché par la programmation, et grâce à la persistance rétinienne, on a l’impression que l’enfant fait rebondir la balle. Pour réussir cette opération, il va falloir aller sur l’écran dessin pour faire un premier dessin (avec l’aide du pinceau de la barre orange).

L’enfant et sa balle sont dessinés en utilisant le pinceau avec un trait large. Si le motif n’est pas jugé satisfaisant, on l’élimine avec la touche VIDE de la machine à dessiner et on recommence .
Si la dernière intervention ne convient pas on l’élimine avec la touche DFAIT ce qui préserve le reste du dessin. Terminé, il est renvoyé sur Monde avec la touche FINI.
Sur l’écran Monde il est dupliqué avec la poignée verte de son halo.
On garde précieusement l’un des 2 exemplaires ( en cas d’erreur de manipulation) et l’on renvoie l’autre sur l’espace dessin avec la poignée grise de son halo, pour être modifié.

Puis retour sur l’écran Monde où nous allons sortir du tiroir des outils V-toys les briques nécessaires à l’animation du petit personnage comme cela a été expliqué en début de chapitre :

Introduire la brique d’animation dans un récipient à commandes pour former le V-script d’animation .
Placer successivement les 2 exemplaires du mouvement à l’intérieur du récipient d’images (le premier est aussitôt encadré par le curseur ).
Dupliquer, avec la poignée verte de son halo, un des 2 modèles à l’intérieur du récipient, et le placer n’importe où sur l’écran. S’en servir pour initialiser le désignateur de la brique d’animation.
Sortir les 2 horloges de marche et d’arrêt et les mettre en service. En activant l’horloge bleue, l’enfant doit jouer avec la balle.

Le passage d’une image à une autre est assez rapide et on peut avoir envie de ralentir ce rythme. Un moyen va consister à augmenter le nombre des images , non pas en en fabriquant de nouvelles , mais en dupliquant celles existant déjà que l’on place côte à côte dans le récipient d’images. Cela va attarder plus longtemps l’image sur chaque geste et aboutir à un mouvement plus lent.

Le V-script d’animation peut prendre une place importante sur l’écran, aussi allons nous chercher une solution pour la réduire. Il est composé de plusieurs parties imbriquées les unes à l’intérieur des autres qui ont chacune leur halo. On fait apparaître cette série de halos en cliquant plusieurs fois sur le groupe. Ils défilent en partant du halo de l’objet le plus extérieur pour atteindre ceux du centre en affichant, chaque fois, le nom de l’objet. Il suffit de choisir celui dont on a besoin.

Au passage, lorsque la souris clique sur la zone verte de la brique d’animation nous voyons apparaître un halo avec le nom ‘ANIMATION’. En utilisant la poignée jaune de ce halo, on peut agrandir ou refermer cette brique ce qui entraîne la diminution du script tout entier et cela en occulte le contenu sans le détruire et tout ce qu’il contient reste virtuellement présent et actif.

[edit] QUELQUES EXEMPLES D'ANIMATION

[edit] animations à 2 variantes

Le papillon - Le très petit écart entre les 2 dessins des ailes crée un frémissement plus qu’un battement. L’insecte est animé sur une fleur sous-jacente fixe.

La fillette – elle a deux expressions seulement (les yeux fermés et ouverts). Mais si l’on multiplie les duplications de l’une ou l’autre , elle peut garder les yeux fermés et les ouvrir de façon sporadique, ou bien avoir une expression courroucée persistante avec quelques battements espacés. (On aurait pu également multiplier les variantes pour animer davantage le visage, et faire bouger la direction du regard par exemple) .

Le mini paysage avec la foudre - plusieurs exemplaires du premier avec un seul du second font se déclencher la foudre de façon rapide et espacée.

[edit] L’animation par déplacement du centre de rotation

Dans les cas précédents, le motif modifié à partir d’un premier dessin occupe à peu près la même surface et son centre de rotation reste situé à peu près à la même place , ce qui donne une certaine stabilité à l’objet animé. Mais si la formule n° 2 a une superficie différente (plus grande , plus petite, excentrée dans une direction ou une autre), le centre de rotation change de place et la masse globale de l’objet se réorganise autour de ce nouveau centre , ajoutant des mouvements de translation à ceux de l’animation proprement dite. On peut en tenir compte quand on construit l’animation . Dans les croquis A l’oiseau bouge uniquement le bec et la queue, dans les croquis B il agite aussi une aile et le passage d’un dessin à l’autre le fait sautiller dans le sens vertical.

[edit] l’animation avec un seul élément

Avec des enfants ayant des difficultés pour conserver l’identité d’un dessin dans les opérations d’évolution d’un mouvement, on peut leur faire construire une animation avec un seul dessin que l’on transportera sur l’écran dessin et que l’on orientera dans diverses directions avec la poignée rouge placée en haut de l’écran de l'espace dessin. Rapatriée sur l’écran Monde, cette forme réorientée peut être placée comme un dessin supplémentaire dans le récipient d’images. On peut même en multiplier le nombre en faisant basculer le motif selon différentes orientations et créer ainsi toutes sortes de cabrioles avec des personnages , de caracolages avec des animaux ou de mouvements bizarres avec des objets .

[edit] une multiplicité d’éléments

On peut placer, les uns à la suite des autres, des dessins dont la forme évolue, se transforme et peut même aboutir à quelque chose de tout à fait différent, du type de la métamorphose ou de l’anecdote, ou bien on peut avoir une suite de formes hétéroclites sans rapport les unes avec les autres. Ce qu’il faut savoir, c’est que le déroulement est assez rapide . Quand le motif change de nature à chaque image , on peut ne pas avoir le temps visuel de l’identifier, aussi sera-t-il nécessaire de placer à la suite l’un de l’autre plusieurs exemplaires de la même image, ce qui n’est pas forcément utile quand le sujet garde son identité.

[edit] Les formes préenregistrées du magasin des accessoires

Il faut évoquer maintenant l’animation des formes géométriques que l‘on trouve dans le magasin des accessoires (ellipses , rectangles , étoiles, formes polygonales ). Leur halo n’a pas la poignée grise qui aurait permis de les transporter sur l’espace dessin pour leur faire subir des modifications. Mais il est impossible de construire une animation à partir de ces formes.

Le V-script d’animation n’anime que des formes construites sur l’espace dessin.

Cependant, grâce à une capture d’écran ,il est possible de changer cet état de fait.

Prenons un exemple simple :

Nous voulons jouer avec une ellipse et la montrer en train de gonfler et changer de couleur.

En utilisant son halo, nous la dupliquons avec la poignée verte. Nous l’agrandissons avec la poignée jaune et changeons sa couleur avec sa poignée rose. Puis nous dupliquons cette première modification et la faisons varier de la même façon . Et ainsi de suite jusqu’à l’obtention de l’évolution voulue.

Cette série de formes introduites dans le récipient d’images, et programmée ne fonctionne pas. Il va donc falloir convertir l’ellipse 1 en objet-dessin. L’opération est simulée ci-dessous :

capture de l’ellipse à l’aide de l’outil spécialisé que l’on trouve dans le catalogue des accessoires. La surface capturée est une aire rectangulaire qui contient une portion de fond et l’objet. Il faut évacuer la surface de fond qui entoure l’ellipse.

En faisant apparaître le halo de cette masse rectangulaire et en sélectionnant sa poignée grise, on est transporté sur l’espace dessin.
on choisit dans le nuancier la zone de couleur transparente nommée ‘no color’ et on utilise le seau pour évacuer toute trace de fond autour de l’objet. Revenue sur l’écran monde l’ellipse-objet est tout à fait comparable à l’ellipse originale et on pourra s’en servir pour lancer l’animation en la posant sur l’écran et EN LA METTANT EN RELATION AVEC LE DESIGNATEUR.

En activant le V-script d’animation comme cela a été expliqué précédemment , l’ellipse-objet prend la forme de toutes les images contenu dans le récipient au fur et à mesure que le curseur se déplace.

NB. Cette opération de Capture d’une forme (géométrique ou non) sur l’écran Monde que l’on débarrasse de son fond sur l’espace dessin, est une manœuvre importante dont il faut bien maîtriser le mécanisme car elle sera utilisée de multiples fois dans des circonstances très différentes.

[edit] Des gifs animés comme sur internet

On en trouve sur le net en tapant ‘gif animé’ dans la case du moteur de recherche. Certains sont gratuits. En les examinant, on s’aperçoit que ceux qui sont graphiques ont des caractéristiques comparables à celles des animations que nous sommes en train d’explorer. L'animation est réduite à l'alternance entre 2 dessins seulement.Le format est très petit. On peut en concevoir d’identiques en utilisant les outils de création et de programmation de Squeak V-toys.

4 exemples animés trouvés sur http://www.informatiquegifs.com,:

motif 1 – le père Noël - Animation basée sur le changement des couleurs. 2 dessins identiques dans la brique d'animation mais on a modifié les couleurs de l'un d'eux. Il en résulte un effet de clignotement.
motif 2 – le bateau qui se déplace sur un fond vert. Pas de brique d’animation. Il s’agit simplement de construire le déplacement sur une SCENE décorée, ramenée à un très petit format et sur laquelle bouge un petit bateau, avec les briques ‘AVANCE’et ‘ENROULE’.
motif 3 – le bateau agité par la houle - 2 images donc. Chacune nécessite l’emploi de 2 dessins séparés : un petit fond carré de couleur et un petit bateau d’une taille adaptée. Chacun de ces 2 objets est dupliqué. Sur le premier carré on dépose un bateau et l’on fait une image par capture d’écran. On fait pivoter le 2eme bateau avec la poignée bleu foncé de son halo et on le dépose sur le 2eme carré avant de capturer la 2eme image. On place alors les 2 images à l’intérieur de la brique d’animation et l’on procède à une programmation traditionnelle. Le bateau se met à osciller.
motif 4 – La tête qui grossit - Les 2 vignettes que l’on va placer dans le script d’animation ont été construites comme celles du bateau, mais la tête de la 2eme vignette à été changée de taille en utilisant la poignée jaune de son halo. Le visage enfle et rétrécit.

Une grande variété de gifs animés utilisant des formes simples devraient pouvoir être produits même avec des enfants assez jeunes.

[edit] QUELQUES PROJETS

le chat à l’affût d’un oiseau – plusieurs duplications de chaque image pour comprendre le sens de l’anecdote.

Les exemples donnés jusqu’ici sont figuratifs mais on peut aussi faire faire des recherches avec des traits, des taches, des formes géométriques qui se succèdent ou changent de couleur.

un jeu de taches hétéroclites sur fond d'écran.

le projet de l’enfant et de la balle – développé en tête de chapitre.

le joueur de foot – chaque mouvement est construit sur le principe du pantin articulé par regroupement et réorientation d’éléments séparés - plusieurs attitudes - Commentaires non verbaux.

l’animation de formes géométriques – le jeu des rectangles est une animation dont chaque motif est composé de rectangles superposés . Pour former un bloc solidaire, le rectangle supérieur bleu clair A est incrusté sur le rectangle inférieur noir B en faisant apparaître le halo du rectangle supérieur et en choisissant, dans le menu rouge , l’option ‘inclus dans…’

le projet Mes gifs

le projet comporte plusieurs motifs de type ‘gifs animés’.

Le gif du pacMan - 2 fonds carrés rigoureusement identiques quant à la forme mais que l’on peut changer de couleur et sur lesquels on pose les 2 versions de la tête.
Le gif étoilé – le fond est une scène sur laquelle on a posé le motif, un rectangle décoré d’étoiles. On change les couleurs du rectangle et on le fait pivoter avec la poignée bleu foncée de son halo pour le réorienter en le laissant placé sur la scène. Quand certaines parties du rectangle sortent de la scène elles disparaissent . Des images de ces 2 positions ont été placées dans la brique d’animation.

le gif peut également se présenter comme un dessin sans fond.

Si les changements s’opèrent dans la partie intérieure sans que se modifie la silhouette extérieur le motif reste à la même place (le soleil, la fleur).
Si la découpe extérieur se modifie , même légèrement, d’une image à l’autre, le motif se déplacera doucement sur le fond de l’écran.
La maison a été placée sur un fond carré rendu transparent, ce qui autorise des modifications à l’intérieur de ce carré .

Dernier point important – il peut s’avérer très difficile, surtout pour des enfants, de réaliser des dessins dans des formats aussi petits. La meilleure solution est de les laisser les exécuter dans des formats normaux, de les faire placer tels quels dans le récipient des images et de faire réduire l’IMAGE TEMOIN au format désiré avec la poignée jaune de son halo.

[edit] En résumé

L’animation proprement dite de croquis de type ‘dessin animé’ ne présente que peu de difficultés. La réussite passe par l’apprentissage des manœuvres indispensables et demande attention et mémoire. Le projet , lui, sollicite davantage l’imagination.