L'animation par script
From OFSET Wiki
Contents |
[edit] Les principes de l'animation
Le principe est celui du projecteur cinématographique qui envoie sur l'écran, les prises de vues successives d'un objet qui bouge et crée ainsi, pour l'oeil, l'illusion du mouvement.
Dans l'animation Squeak, nous avons sur l'écran, une image témoin qui est remplacée au fur et à mesure par une autre que l'on a emmagasinée à l'intérieur d'une surface spéciale appelée RECIPIENT et que pointe, l'une après l'autre, sous l'impulsion d'une programmation qui le déplace, un marqueur appelé CURSEUR.
Le résultat est une animation similaire à un dessin animé.
[edit] Les moyens de l'animation
Pour produire l'effet désiré, il va falloir :
- créer sur l'espace Dessin ou différemment, plusieurs images qui représentent les différentes étapes d'un mouvement.
- introduire dans un certain ordre ces images à l'intérieur du récipient ou réservoir d'images.
- puis construire le script dont l'activation déclenchera le processus d'animation.
Nous pourrons avoir des images qui se modifient sans se déplacer et d'autres dont les modifications sont associées à un déplacement.
Il y a celles qui seront produites directement sur l'espace Dessin, mais on peut envisager aussi de faire appel à des images extérieures qui seront récupérées à partir de fichiers.
[edit] Les images créées sur l'espace Dessin
Dans certains cas, on va essayer de créer des formes que l'on devra modifier plusieurs fois tout en leur gardant leur identité (le personnage, l'animal, l'objet qui bouge).
Mais on pourra également concevoir des animations avec des objets qui se transforment en autre chose, ou qui regroupent des objets hétéroclites.
[edit] Modification d'une image source qui garde son identité
On commence par créer, selon sa fantaisie, une image de départ dont on va faire évoluer les détails.
- La première image fabriquée sur l'espace dessin est rapatriée sur l'écran Monde (FINI), dupliquée (POIGNEE VERTE de son halo) et laissée en attente.
- La première duplication reste aussi sur le fond Monde, elle est l'écho de l'image source.
- La 2eme duplication est amenée sur l'espace dessin à l'aide de la poignée grise de son halo, 'redessiner' et subit une première modification.
On peut vouloir modifier la forme en supprimant un détail avec la gomme et en recréant de toutes pièces le même détail positionné différemment.
Mais on peut aussi faire évoluer un détail interne en gardant l'essentiel de la forme (le personnage qui parle).
Dans le graphique n°1, la forme est créée sur l'espace dessin et transférée sur Monde.
Dans le graphique n°2 le 2eme duplicata est ramené sur l'espace dessin, la couleur du visage est identifiée par la PIPETTE qui la propose à l'emploi. Cette couleur sert de gomme, les détails intérieurs sont effacés avec le pinceau avant d'être redessinés.
L'opération se répète aussi souvent que nécessaire.
[edit] L'image source peut aussi être découpée en utilisant les ressources des menus
La démarche est la même que l'on parte d'un dessin créé sur place ou d'un document photo que l'on aura récupérée dans un fichier.
Ici nous avons ramené sur l'écran un document photo représentant une oeuvre de l'art Noir. On va extraire des fragment significatifs de cette image (tête, bras, jambes etc) pour les recomposer et créer de nouvelles attitudes.
Le menu MONDE va nous proposer l'option NOUVEAU MORPH dans laquelle on trouve plusieurs types de CAPTURES D'ECRAN. Nous choisirons 'SAISIR UNE PARTIE DE L'ECRAN AVEC UN POLYGONE . Cette option permet de cerner une portion de surface à l'aide d'un trait polygonal qui, quand la boucle est fermée détache une copie du fragment de la photo ou du dessin. Devenu objet, ce fragment pourra être déplacé et réorienté avec la poignée bleu foncé de son halo. On pourra composer des changements de positions. Mais cet ensemble n'est pas utilisable de cette façon, car les fragments regroupés ne forment pas un tout indissociable. Pour cela, on va faire une nouvelle capture d'écran avec, cette fois, 'SAISIR UN RECTANGLE'.
Cette copie rectangulaire soude fragments et une partie du fond.
Il va falloir évacuer le fond et corriger, sur l'espace dessin la forme qui garde trop son apparence de découpage :
- Utilisation du SEAU A PEINTURE et de la couleur invisible – NO COLOR pour supprimer le fond.
- Les outils de la palette sont très utiles pour modifier, gommer, arranger les détails, mais la pipette que nous avons déjà utilisée va nous donner la réplique de la couleur locale exacte pour supprimer traits intempestifs ou améliorer les détails.
Les mêmes méthodes seront utilisées pour fabriquer un objet qui se transforme en autre chose.
[edit] Utilisation du récipient
Le récipient est une surface rectangulaire qui se trouve dans le magasin des accessoires et doit être tirée sur l'écran.
Il prend en charge automatiquement, dans l'ordre où on les y place, un certain nombre d'images qui présentent les modifications successives d'un objet en train de bouger. Il est malléable et s'agrandit automatiquement dès qu'un objet y est introduit.
Le curseur est un rectangle, que la programmation fait se déplacer d'image en image selon un ordre progressif partant de la première image à gauche, qui revient à son point de départ quand la série est terminée et qui tourne en boucle.
L'image désignée par le curseur se projette en remplacement de l'image témoin posée sur l'écran et la succession des images projetées produit l'effet d'animation.
La forme source est déposée sur l'écran n'importe où (forme A).
Sa copie (A1) et ses modifications (A2, A3, A4) sont placées à l'intérieur du Récipient dans l'ordre voulu par la logique du mouvement.
Le nombre des formes à l'intérieur du Récipient n'est pas limité et les mêmes images peuvent être utilisées plusieurs fois .
[edit] Le script d'animation
C'est un script tiré du visualiseur de l'objet à animer (forme A – script vide). Il est nommé 'anime'. Il gère à la fois le déplacement du rectangle à l'intérieur du Récipient et l'animation de la forme projetée.
Le défilement des images tournant inlassablement en boucle est de nature répétitive. Un seul script est nécessaire pour créer l'animation d'une forme, mais sa construction interne mérite que l'on s'y arrête.
Il va faire appel à 2 catégories de commandes, celles de l'objet à animer et celles du récipient.
Script d'animation d'une image source :
Prendre un script vide dans la catégorie SCRIPTS du visualiseur de commandes de l'objet A (objet anime)
- la première commande du script va s'occuper de ce qui se passe à l'intérieur du récipient, à savoir le déplacement du curseur qui passe d'une image à l'autre.
On ouvrira donc le visualiseur de commandes du récipient . Dans sa catégorie 'BASE', on prendra par la flèche la commande qui est susceptible de donner l'ordre au curseur de passer d'une image à l'autre :
Récipient | curseur ß 1
Il faut maintenant dire au curseur de se déplacer d'image en image.
En agissant sur les flèches placées avant le mot Curseur, on voit apparaître les propositions : multiplie, diminue, augmente. On choisira AUGMENTE (incrémente). Les flèches placées avant le chiffre vont permettre de déterminer le style de la progression : AUGMENTE DE 1 va entraîner un passage régulier de l'image n°1 à ses suivantes jusqu'à la dernière et reprendra au commencement.
Un chiffre différent, 3, 5, 20 etc, va provoquer un comptage différent.
Si l'on choisit le chiffre 3, le compteur qui tourne en boucle sur 5 images provoquera des apparitions tous les 3 coups, ce qui donnera des apparitions plus aléatoires des images de la série.
- La 2eme commande va réglementer la transformation de l'objet source.
L'image A, celle qui est en dehors du récipient, va devoir ressembler à celle, chaque fois différente, que lui présente le curseur du Récipient au cours de sa progression.
Pour réussir cette opération, il va nous falloir composer une commande mixte qui aura besoin de conjuguer les actions de commandes venues à la fois du visualiseur de commandes de l'objet source A ET du visualiseur de commandes du récipient .
L'ordre concernant le changement d'apparence de l'objet A se trouve dans la catégorie DIVERS de son visualiseur :
Objet | ressemble à| point (ou Dot), ce qui laisse en suspend la nature du point de ressemblance.
Il faut donc préciser ce que va devenir 'Point'.
Dans le cas d'un changement de forme banal, il suffit de faire apparaître le Halo du 2eme Objet dont A doit prendre l'apparence (A2 par exemple), et de prélever dans le Halo de ce dernier le petit rectangle d'identification placé sous l'œil bleu. Mais ici nous avons affaire à une succession de formes, aussi ne pouvons nous pas identifier 'Point' à un seul objet ; nous devons trouver la formule qui dira que l'objet A doit ressembler à l'objet qui est entourée par le Curseur à l'intérieur du Récipient ( ce qui sous-entend que cette forme sera différente chaque fois que le curseur va se déplacer).
La formule prenant en charge le changement successif de la forme se trouve dans la catégorie COLLECTIONS du visualiseurdu du récipient :
Récipient |objet au curseur
On va prélever cette tuile et la déposer telle qu 'elle sur le mot 'Point' et l'ensemble va devenir une commande composite et autonome :
Objet | ressemble à | récipient | objet au curseur.
- régler la vitesse de déplacement des images en tenant appuyée l'horloge pour faire apparaître le tableau qui donne le rythme d'exécution du script à la seconde (faire des essais).
Il suffit ensuite d'activer l'horloge du script ANIME pour déclencher l'animation A partir de ce principe de fonctionnement, on peut imaginer de nombreuses animations jouant avec toutes sortes de modifications de formes. Mais on pourra aussi avoir plusieurs types d'animation dans le même projet.
La porte est ouverte à toutes les d'extrapolations.
Quelques exemples suivent.
[edit] Exemples d'animations
[edit] Animation sans déplacement : le projet MAGICIEN
Le projet MAGICIEN présente 2 séries d'objets qui fonctionnent simultannément :
- un magicien qui lance une balle devant un cercle jaunes et la rattrape inlassablement.
- une rosace située au milieu du cercle et qui modifie son apparence à chaque passage du curseur.
Si on isole le magigien on a un geste répétitif basé sur une seule transformation de l'image source.
la rosace comporte un plus grand nombre de modifications et le passage de l'une à l'autre se fait de façon aléatoire.
Curseur |augmente de | 41.
Les deux sont activés par la réglette Go/Step/Stop.
Bien que n'utilisant que 2 attitudes, l'un des 2 gestes du magicien est répété 2 fois dans le récipient pour ralentir le mouvement et donner l'impression d'attendre le retour de la balle . Le démarrage se fait avec 'GO', mais l'action est stoppée lorsque la flèche rencontre une rosace ( procédé Stop Bouton Clique développé dans le chapitre 'construire un projet') et le magicien disparaît :
La réapparition du magicien et le retour de la flèche à son point de départ, se fait à l'aide du script 'départ' de la flèche qui utilise la fonction SOURIS ENTRE que l'on trouve parmi les propositions de la case 'NORMAL' à droite de l'horloge.
Ce dispositif original permet de démarrer le script d'un objet lorsque la souris effleure cet objet, et d'exécuter les ordres qui y sont contenus.
Le projet Magicien :
[edit] Animation avec déplacement : le projet Vol d'oiseau
Le projet présente un oiseau qui vole répétitivement vers un nid en construction en portant une brindille dans son bec.
Il y a 2 Récipients : dans l'un on décompose le mouvement des ailes de l'oiseau en vol (2 positions), l'autre contient 3 rectangles amincis différents évoquant des brindilles et qui se déposent en rond, se réorientent et se dupliquent pour construire le nid.
Le vol de l'oiseau est régi par un script principal : oiseau vole qui contrôle à la fois le défilement des images du Récipient, l'avancée de l'oiseau (oiseau avance de 10) et fait appel à un script secondaire, circonstanciel, qui décrit les conditions du retour de l'oiseau au bord de l'écran lorsqu'il rencontre un obstacle, pour entreprendre un autre voyage (oiseau ARRIVEE).
Ne pas oublier de réorienter le vol de l'oiseau vers sa forme butoir, si on le change de place.
Le projet vol de l'oiseau :
[edit] Amélioration: oiseau fluide.
Durant son vol, le corps de l'oiseau monte et descend, ceci provient du fait que la position de l'image est repérée par son centre de rotation, le centre de rotation est le point autours duquel un morph (objet graphique Squeak) pivote.Lorque l'on affiche le halo d'un morph dessin, il apparaît au pied de la flèche de direction. En cliquant dessus avec la touche Maj enfoncée, on peut le déplacer en glissant.
Si l'on place le centre de rotation dans l'oeil de l'oiseau pour chacun des deux dessins modèles dans le récipient, L'image sera positionnée par rapport à ce point pour les deux dessins et l'oiseau restera sur sa trajectoire sans monter et descendre.
Le projet vol de l'oiseau fluide:
[edit] Amélioration: L'oiseau transporte divers brins
Pour une construction du nid plus réaliste, on peut modifier l'animation pour que l'oiseau transporte chaque fois un brin différend.
Pour celà, il faut:
- Effacer l'image du brin ans les deux dessins modèles.
- Mettre un nouvel objet, brin, qui prendra l'apparence d'un des brins au hasard.
- Ajouter au script oiseau ARRIVEE la mofification de la forme,la commande mélanger change l'ordre des objets dans le récipient au hasard.
- Ajouter un script brin suitoiseau pour que le brin suive les coordonées x et y de l'oiseau, avec un décalage pour x afin que le brin soit dans le bec de l'oiseau.
Le projet l'oiseau transporte divers brins:
[edit] Des formes hétéroclites et une association image/son : le projet Flash
Établir un lien de parenté entre l'apparition d'une forme et le bruit qui l'accompagne.
- un seul Récipient
- 4 formes, (1 cercle rouge, 1 cercle vert, 2 formes d'explosion)
- 4 sons choisis dans la liste de sons préenregistrés de la commande 'joue son...x et dont le tempo a été ralenti à 1/sec.
Chaque objet est associé à un script de sonorisation différent mais chacun de ces scripts porte le même nom (ici JSON, joue un son), ce qui fait que lorsque le curseur passe sur une forme, il active en même temps le son qui l'accompagne et la particularité de ce son à cet endroit précis.
Les cercles verts et oranges sont silencieux et créent des intervalles de repos entre les images.. Ils collaborent à l'établissement d'un rythme sonore qui souligne le rythme visuel. Les objets du projet se dupliquent en même temps que leurs scripts.
Les mêmes objets peuvent être répartis différemment à l'intérieur du Récipient. On peut les multiplier , les ajouter ou les retirer du récipient selon l'effet visuel ou sonore personnel que l'on veut obtenir.
Pour qu'un objet reste plus longtemps à l'écran, il faudra placer côte à côte, plusieurs duplications de la même image.
- tempo visuel et sonore à composer soi-même en expérimentant divers regroupements.
Pour des spécialistes en sons audio, il est possible de remplacer les sons préenregistrés de Squeak par des sons personnels ou de la musique avec la catégorie MULTIMEDIA du catalogue des objets.
Le projet Flash :
[edit] Réalisations d'élèves
Le port par NICOLAS
En plus de l’utilisation du récipient pour animer la marche du personnage Nicolas utilise la fonction ‘ENROULE’ décrite dans un autre chapitre, pour organiser la marche des bateaux.
le projet :
La trampoline par Tiffany
Ce projet utilise les commandes de la catégorie contrôle des scripts pour déclencher successivement diverses actions, ainsi que la collision avec le plafond pour déclencher l'animation du saut périlleux.
le projet :
[edit] En conclusion
Dans ce chapitre nous avons vu comment programmer un script pour qu'il assure l'animation d'un objet qui fait séquentiellement évoluer sa forme.
En observant le libellé de chaque commande, nous voyons qu'il est utilisé un vocabulaire dont les mots sont reliés entre eux par une logique qui est celle du langage ( le nom de l'objet, le verbe qui décrit les actions , le cadre circonstanciel nécessaire aux réalisations, le qualificatif qui propose des modifications structurelles ou d'apparence.
Mais cette formulation est condensée et schématisée. Elle constitue, en fait, un nouveau langage caractérisé par une structure à la fois linguiste, logique et schématique.
Mais, pour rendre une commande opérationnelle, il faut, en supplément, au sein du script, utiliser des règles de construction spécifiques et arbitraires qu'il faut connaître et qui transforment ce langage en outil de programmation informatique rendu plus familier et plus accessible en raison de sa facilité d'emploi et de sa parenté avec le langage.
