Bienvenue sur le blog de Boris Forconi, designer web à Nantes, France.
 
17/07/09

Animation Flash : tweens ou timeline ?

Par le passé, les animateurs vieille école ont reproché aux interpolations de Flash de mécaniser les mouvements, parce qu’ils automatisent la générations des intervalles. Ces fameuses “intervalles”, ou images clés entre position initiale et position finale (“extrêmes”), sont en effet des points cruciaux pour l’animateur.

Depuis, la pratique a prouvé que les interpolations de la timeline (ligne de temps de Flash,) utilisées à bon escient, n’entravait pas l’ajout d’intervalles et le processus d’animation.

Entre temps sont apparues ce que le flasheur appelle communément les “tweens”, ces classes Actionscript qui mettent à disposition un jeu de mouvements à appliquer aux objets. Grâce, entre autres, aux travaux de Robert Penner, ces classes permettent même d’altérer les échelles d’intervalles (ou transitions) à l’aide d'équations physiques.

tweensVStimeline
Ce qui change fortement la donne. Entre les deux outils, timeline ou tweens, lequel choisir, et dans quels cas? Peut-on, ici aussi, reprocher aux tweens de systématiser les intervalles?

Préambule : le poids

Le mouvement strictement linéaire n’existe quasiment pas à l’état naturel — ce qui fait que, dans Flash, je m’interdis de laisser la valeur d’accélération d’une interpolation à 0. Tout simplement parce que chaque chose qui entre en mouvement possède un poids, de même que son environnement (air, liquide, etc.) Lorsque l’on anime un objet, c’est son poids qu’il est crucial de faire ressentir.

Comment? Il existe énormément de composantes en animation. De façon très raccourcie et très basique, la clé est de souligner l’une ou plusieurs des étapes suivantes :

  • l’extrême initial.
  • l’extrême final.
  • l’intervalle principal ou breakdown.

Par quel moyens (entre autres) ?

  • l’exagération (taille, position, etc.)
  • l’échelle d’intervalle (temporisation, amorti, accélération, etc.)
  • l’optique (duplication, flou, traînées, etc.)

bunny
Historiquement, on attribue aux animateurs Disney, au travers d’un objectif qu’ils appelaient “l’illusion de vie”, les toutes premières expérimentations de ces moyens de soulignement. Ce sont les premiers à s’être écarté de la stricte observation physique, très largement basée sur les travaux photographiques d’Eadweard Muybridge.

Dans the illusion of life, on peut lire :

“The illusion of life is a rare accomplishement in animation […] This is the truly unique achievement. This is what must be examined and explained, understood and appreciated, thaught to others and passed on to animators of the future.”

Pour illustrer ces aspects et leur complexité, voici une marche décomposée par Muybridge puis Bill Tytla pour Disney (sources : The human figure in motion et the illusion of life)

walk
Ces principes sont profondément ancrés dans notre paysage visuel. Ils s’appliquent tout aussi bien à des mouvements complexes, comme la marche d’un être vivant, qu’aux mouvements d’un site web — du survol des boutons à l’apparition de texte. Voilà pourquoi tout Flasheur devrait avoir dans sa bibliothèque l’excellent manuel de Richard Williams, Techniques d'animation.

Animer sur la Timeline de Flash, c’est garder la main sur ces aspects cruciaux d’animation. Moyennant des notions d’animation, du senti, du temps et surtout de la pratique, il est possible d’appliquer sans restrictions l’ensemble de ces techniques d’animation aux mouvements de vos objets.

Les tweens

Les classes de tween constituent un outil précieux. Voici quelques-uns de leurs nombreux avantages :

  • Ils sont légers, et feront sans doute gagner des octets à vos fichiers swf. Certaines classes sont mêmes très peu gourmandes en ressources.
  • Moyennant quelques notions d’Actionscript, elles sont simples à mettre en oeuvre, pour un résultat visuel effectif immédiatement.
  • Un même effet peut s’appliquer à un grand nombre d’instances. Ce qui est très pratique pour des objets chargés dynamiquement, comme des galleries d'images animées.
  • Il est facile de modifier à postériori vos effets et mouvements, en changeant quelques directives Actionscript. Les flasheurs ayant expérimenté des allers-retours clients voient de quoi je parle.

Ce qui fait beaucoup d’avantages, surtout dans le contexte actuel, avec ses délais serrés et la flexibilité que demandent les projets. En revanche, nous avons vu dans la section précédente qu’une bonne animation nécessite de jouer sur un certaines étapes, comme les extrêmes et intervalles, avec un certain nombre d’outils, comme l’exagération, l’échelle d’intervalle ou l’optique. Les tweens trouvent ici leurs restrictions.

En ce qui concerne les étapes : bien que l’on puisse agir sur les extrêmes (états initiaux et finaux,) il est difficile de jouer sur les intervalles — cruciales. Pour ce qui est des outils, les restrictions sont importantes. Grâce aux équations physiques et aux éditeurs de mouvement, on conservera de la souplesse sur l’échelle d’intervalle. En revanche, la limitation de moyen se fait sentir sur les effets d’optiques, limitées quasiment à un flou directionnel mathématique. De même pour l’exagération qui sera limitée aux propriétés de Flash (_x, _xscale, etc.) Le tout dans un environnement d’équations, où l’oeil et la sensibilité ont une place plus réduite.

Alors, tweens ou timeline ?

La réponse dépend bien sûr du projet et de son contexte. Voici quelques graphiques récapitulatifs pour guider vos choix :

Sur la facilité de mise en place et de modification, en fonction de la complexité de l’animation:

facilite
Sur le poids et les ressources consommées, en fonction de la complexité de l’animation:

poids
Sur la qualité du rendu, en fonction de la complexité de l’animation:

qualite
Sur la qualité du rendu, en fonction des compétences de l’animateur (je ne parle pas ici de compétence en actionscript, mais bien de compétence en animation):

competences
Le principal est d’éviter la systématisation de l’un de ces deux moyens : jetez vos habitudes à la corbeille! Quand on peut choisir entres différents outils, le tout est de bien connaître leurs forces et faiblesses, pour les utiliser à bon escient. Et bien sûr, les deux méthodes ne sont pas incompatibles, un juste mélange des deux solutions est souvent le bienvenu.

2 commentaires


borisforconi

17/07/09

Note : vous remarquerez que je n’ai nulle part parlé d’images par seconde. En effet, quelque soit le nombre d’image par seconde, si l’on veut que l’internaute percoive une animation comme agréable et vivante, il faut avoir recours à des effets d’animation.

Pour l’exemple du cinéma et ses 24 images secondes, c’est le noir et le flou des mouvement qui nous les fait percevoir comme “fluides”.

Une animation peut-être de très bonne qualité visuelle avec peu d’images/secondes. Une animation peut avoir un très mauvais rendu à 100 images/secondes.

Le réglage du nombre d’images/seconde n’est donc qu’un point de départ technique obligatoire, variant selon les ressources et les contraintes du projet.


Superbe article !

Ajoutez votre commentaire

(Votre adresse e-mail ne sera pas publiée.)

(Facultatif.)

Construit avec blueprint CSS & Wordpress — ©2012 — boris@stereosuper.fr — (+33)683037291 — RSS