Je serai disponible pour vos projets web à partir du 5 juillet. N'hésitez pas à me consulter.
contact@borisforconi.net
(+33)6 83 03 72 91
 
17/07/09

Animation Flash : tweens ou timeline ?

Par le passé, les ani­ma­teurs vieille école ont re­pro­ché aux in­ter­po­la­tions de Flash de mé­ca­ni­ser les mou­ve­ments, parce qu’ils au­to­ma­tisent la gé­né­ra­tions des in­ter­valles. Ces fa­meuses “in­ter­valles”, ou images clés entre po­si­tion ini­tiale et po­si­tion fi­nale (“ex­trêmes”), sont en ef­fet des points cru­ciaux pour l’animateur.

De­puis, la pra­tique a prouvé que les in­ter­po­la­tions de la ti­me­line (ligne de temps de Flash,) uti­li­sées à bon es­cient, n’entravait pas l’ajout d’intervalles et le pro­ces­sus d’animation.

Entre temps sont ap­pa­rues ce que le fla­sheur ap­pelle com­mu­né­ment les “tweens”, ces classes Ac­tions­cript qui mettent à dis­po­si­tion un jeu de mou­ve­ments à ap­pli­quer aux ob­jets. Grâce, entre autres, aux tra­vaux de Robert Penner, ces classes per­mettent même d’altérer les échelles d’intervalles (ou tran­si­tions) à l’aide d'équations physiques.

tweensVStimeline
Ce qui change for­te­ment la donne. Entre les deux ou­tils, ti­me­line ou tweens, le­quel choi­sir, et dans quels cas? Peut-on, ici aussi, re­pro­cher aux tweens de sys­té­ma­ti­ser les in­ter­valles?

Pré­am­bule : le poids

Le mou­ve­ment stric­te­ment li­néaire n’existe qua­si­ment pas à l’état na­tu­rel — ce qui fait que, dans Flash, je m’interdis de lais­ser la va­leur d’accélération d’une in­ter­po­la­tion à 0. Tout sim­ple­ment parce que chaque chose qui entre en mou­ve­ment pos­sède un poids, de même que son en­vi­ron­ne­ment (air, li­quide, etc.) Lorsque l’on anime un ob­jet, c’est son poids qu’il est cru­cial de faire res­sen­tir.

Com­ment? Il existe énor­mé­ment de com­po­santes en ani­ma­tion. De fa­çon très rac­cour­cie et très ba­sique, la clé est de sou­li­gner l’une ou plu­sieurs des étapes sui­vantes :

  • l’extrême ini­tial.
  • l’extrême fi­nal.
  • l’intervalle prin­ci­pal ou break­down.

Par quel moyens (entre autres) ?

  • l’exagération (taille, po­si­tion, etc.)
  • l’échelle d’intervalle (tem­po­ri­sa­tion, amorti, ac­cé­lé­ra­tion, etc.)
  • l’optique (du­pli­ca­tion, flou, traî­nées, etc.)

bunny
His­to­ri­que­ment, on at­tri­bue aux ani­ma­teurs Dis­ney, au tra­vers d’un ob­jec­tif qu’ils ap­pe­laient “l’illusion de vie”, les toutes pre­mières ex­pé­ri­men­ta­tions de ces moyens de sou­li­gne­ment. Ce sont les pre­miers à s’être écarté de la stricte ob­ser­va­tion phy­sique, très lar­ge­ment ba­sée sur les tra­vaux pho­to­gra­phiques d’Eadweard Muybridge.

Dans the illusion of life, on peut lire :

“The illu­sion of life is a rare ac­com­pli­she­ment in ani­ma­tion […] This is the truly unique achie­ve­ment. This is what must be exa­mi­ned and ex­plai­ned, un­ders­tood and ap­pre­cia­ted, thaught to others and pas­sed on to ani­ma­tors of the fu­ture.”

Pour illus­trer ces as­pects et leur com­plexité, voici une marche dé­com­po­sée par Muy­bridge puis Bill Tytla pour Dis­ney (sources : The human figure in motion et the illusion of life)

walk
Ces prin­cipes sont pro­fon­dé­ment an­crés dans notre pay­sage vi­suel. Ils s’appliquent tout aussi bien à des mou­ve­ments com­plexes, comme la marche d’un être vi­vant, qu’aux mou­ve­ments d’un site web — du sur­vol des bou­tons à l’apparition de texte. Voilà pour­quoi tout Fla­sheur de­vrait avoir dans sa bi­blio­thèque l’excellent ma­nuel de Ri­chard Williams, Techniques d'animation.

Ani­mer sur la Ti­me­line de Flash, c’est gar­der la main sur ces as­pects cru­ciaux d’animation. Moyen­nant des no­tions d’animation, du senti, du temps et sur­tout de la pra­tique, il est pos­sible d’appliquer sans res­tric­tions l’ensemble de ces tech­niques d’animation aux mou­ve­ments de vos ob­jets.

Les tweens

Les classes de tween consti­tuent un ou­til pré­cieux. Voici quelques-uns de leurs nom­breux avan­tages :

  • Ils sont lé­gers, et fe­ront sans doute ga­gner des oc­tets à vos fi­chiers swf. Certaines classes sont mêmes très peu gour­mandes en res­sources.
  • Moyen­nant quelques no­tions d’Actionscript, elles sont simples à mettre en oeuvre, pour un ré­sul­tat vi­suel ef­fec­tif im­mé­dia­te­ment.
  • Un même ef­fet peut s’appliquer à un grand nombre d’instances. Ce qui est très pra­tique pour des ob­jets char­gés dy­na­mi­que­ment, comme des galleries d'images animées.
  • Il est fa­cile de mo­di­fier à pos­té­riori vos ef­fets et mou­ve­ments, en chan­geant quelques di­rec­tives Ac­tions­cript. Les fla­sheurs ayant ex­pé­ri­menté des allers-retours clients voient de quoi je parle.

Ce qui fait beau­coup d’avantages, sur­tout dans le contexte ac­tuel, avec ses dé­lais ser­rés et la flexi­bi­lité que de­mandent les pro­jets. En re­vanche, nous avons vu dans la sec­tion pré­cé­dente qu’une bonne ani­ma­tion né­ces­site de jouer sur un cer­taines étapes, comme les ex­trêmes et in­ter­valles, avec un cer­tain nombre d’outils, comme l’exagération, l’échelle d’intervalle ou l’optique. Les tweens trouvent ici leurs res­tric­tions.

En ce qui concerne les étapes : bien que l’on puisse agir sur les ex­trêmes (états ini­tiaux et fi­naux,) il est dif­fi­cile de jouer sur les in­ter­valles — cru­ciales. Pour ce qui est des ou­tils, les res­tric­tions sont im­por­tantes. Grâce aux équa­tions phy­siques et aux édi­teurs de mou­ve­ment, on conser­vera de la sou­plesse sur l’échelle d’intervalle. En re­vanche, la li­mi­ta­tion de moyen se fait sen­tir sur les ef­fets d’optiques, li­mi­tées qua­si­ment à un flou di­rec­tion­nel ma­thé­ma­tique. De même pour l’exagération qui sera li­mi­tée aux pro­prié­tés de Flash (_x, _xscale, etc.) Le tout dans un en­vi­ron­ne­ment d’équations, où l’oeil et la sen­si­bi­lité ont une place plus ré­duite.

Alors, tweens ou ti­me­line ?

La ré­ponse dé­pend bien sûr du pro­jet et de son contexte. Voici quelques gra­phiques ré­ca­pi­tu­la­tifs pour gui­der vos choix :

Sur la fa­ci­lité de mise en place et de mo­di­fi­ca­tion, en fonc­tion de la com­plexité de l’animation:

facilite
Sur le poids et les res­sources consom­mées, en fonc­tion de la com­plexité de l’animation:

poids
Sur la qua­lité du rendu, en fonc­tion de la com­plexité de l’animation:

qualite
Sur la qua­lité du rendu, en fonc­tion des com­pé­tences de l’animateur (je ne parle pas ici de com­pé­tence en ac­tions­cript, mais bien de com­pé­tence en ani­ma­tion):

competences
Le prin­ci­pal est d’éviter la sys­té­ma­ti­sa­tion de l’un de ces deux moyens : je­tez vos ha­bi­tudes à la cor­beille! Quand on peut choi­sir entres dif­fé­rents ou­tils, le tout est de bien connaître leurs forces et fai­blesses, pour les uti­li­ser à bon es­cient. Et bien sûr, les deux mé­thodes ne sont pas in­com­pa­tibles, un juste mé­lange des deux so­lu­tions est sou­vent le bien­venu.

2 commentaires


borisforconi

17/07/09

Note : vous re­mar­que­rez que je n’ai nulle part parlé d’images par se­conde. En ef­fet, quelque soit le nombre d’image par se­conde, si l’on veut que l’internaute per­coive une ani­ma­tion comme agréable et vi­vante, il faut avoir re­cours à des ef­fets d’animation.

Pour l’exemple du ci­néma et ses 24 images se­condes, c’est le noir et le flou des mou­ve­ment qui nous les fait per­ce­voir comme “fluides”.

Une ani­ma­tion peut-être de très bonne qua­lité vi­suelle avec peu d’images/secondes. Une ani­ma­tion peut avoir un très mau­vais rendu à 100 images/secondes.

Le ré­glage du nombre d’images/seconde n’est donc qu’un point de dé­part tech­nique obli­ga­toire, va­riant se­lon les res­sources et les contraintes du pro­jet.


Su­perbe ar­ticle !

Ajoutez votre commentaire

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

(Facultatif.)

Construit avec blueprint CSS & Wordpress — ©2010 — contact@borisforconi.net — (+33)683037291 — RSS