Ces derniers temps, je produis pas mal de vidéos qui simulent une utilisation d’interface. Le but est de pouvoir simuler, rapidement, des interactions, des comportements, dans une interface qui n’est pas réellement développée. Et je fais ça dans After Effects. Quand j’ai commencé à faire cela, c’est ce qui m’a paru le plus évident. Je travaille dans Illustrator, le transfert est facile grâce à la compatibilité entre les softs de la suite Adobe. L’animation se fait donc en full GUI, dans un soft où l’on manipule des images-clés. Le résultat est rapidement visible, le temps de production est ridicule par rapport à un vrai prototype vivant. Tout le monde est content. Au bout de quelques projets, outre l’aspect ball-break de la suite Adobe, quelques aspects m’ont quand même interpellé :

Les expressions

J’en utilise de plus en plus, et il m’a semblé qu’on répétait souvent les mêmes choses. Assez dur (impossible ?) de factoriser le tout en une fonction, qu’on pourrait appeler en passant des paramètres e.g.

La composition est une boîte noire

Pas de passages de valeurs. La composition, pierre angulaire de la conception dans Ae, est une boite noire : rien n’y rentre n’y n’en sort dynamiquement. Donc, on ne peut pas passer de paramètres à l’intérieur, ou faire s’afficher des informations différentes en fonction du contexte.

Une interface dans un outil de compositing

Ça semble idiot de produire une interface, même si elle n’est que simulée, dans un outil qui est plutôt conçu pour faire du compositing. Je n’utilise que très peu d’effets, certains sont même assez lourdingues à mettre en place (tracer une ligne entre deux objets avec l’effet Beam) pour un truc quand même trivial ― des coordonnées x,y de départ, des x,y d’arrivées, et une ligne qui s’actualise à mesure que ces deux points bougent.

Gestion de la cartographie

C’est un peu particulier, mais j’ai souvent à intégrer de la map dans ces anims (pour des simulations de softs de supervision, e.g.). La gestion des niveaux de zoom est bien pénible à mettre en place, là où des tas de librairies js font le boulot en temps réel (OpenLayers, Mapbox). Et le fait d’intégrer des cartes à bonne résolution, à différents niveaux de rendus, allonge le temps de rendu de façon significative, à cause de tous ces pixels.

Rendu bitmap

Tout est traité en bitmap, pas de rendus vectoriels des comps, par exemple, donc pas moyen de les triturer et de les agrandir, par exemple, sans voir les pixels.

Besoins, pistes

Bon, tout ça pour dire que ça me parait un peu lourdingue de produire de l’interface animée dans After Effects. Donc, je me mets en quête d’un nouvel outil pour mieux faire. Le tryptique HTML/CSS/Js me paraît tout désigné. Dans le cadre d’un projet, la mise en route serait peut-être un peu plus longue, mais j’ai bon espoir de me rattraper sur le temps de traitement des différentes modifs, et sur… les temps de rendus.

Je note tous mes besoins ici, ce sont des notes de parcours qui tracent la démarche :

  • principe des comps (conteneur, groupe), qui permettent de bouger un ensemble d’objets de façon synchronisée (rotation, échelle, position)
  • sinon, notion de lien de parenté
  • imbrication des comps
  • gestion des moments de départ de chaque objet
  • rendus et réimports
  • comment exporter en format film (mov, h264) ? Capture d’écran ? Pouvoir définir un temps et une zone à capturer/rendre en vidéo
  • comment gérer les masques ?
  • gestion des courbes d’interpolation

Je me suis vite fait interessé à <canvas>, c’est une première piste qui permet de tout gérer en javascript. Sinon, on peut faire du simple markup html + styles & anims CSS, la notion de conteneur ne pose plus de souci, les <div> embarquent les <div>… Dans ce cas, il reste quand même des aspects programmatiques qu’il faudra traiter en js. Splitter le travail en deux endroits peut-être pénible (notamment pour la gestion du timing).

On devrait pouvoir écrire son code et tweaker les paramètres à un seul endroit (visibilité des objets, moment du départ, lien de parenté).

L’idée serait de pouvoir sortir un film de l’interface de ce set de travail, et de l’intégrer ensuite dans un soft de montage simple (KDEnLive) pour produire le rendu final (le film avec l’intro, les fondus, la musique de Hans Zimmer et tout le bazar). Je ne sais pas si c’est bizarre, je verrai en me relisant : produire un truc dynamique rendu dans le navigateur, et le capturer ensuite dans une vidéo figée. Bon, le but, c’est de proposer un truc portable au client, pour qu’il puisse le diffuser où il veut. Rien de plus portable qu’un film… Bon je m’égare, mais je trace, je trace.

J’ai bien conscience que ce que j’écris est peu ou prou ce que des softs comme Edge Animate ou des trucs comme ça proposent. J’ai eu l’occasion d’en tester un (Tumult Hype sur Mac OS) : ça m’a laissé l’impression d’un outil qui est assez efficace en ce qui concerne le basique, rotation, opacité, position, échelle. En gros, la mise en place est rapide. Après, j’ai trouvé ça court sur les aspects de parenté, l’imbrication des objets. Et surtout, l’outil sort un code par essence compliqué à tweaker (car ce n’est pas moi qui l’ai écrit). Donc, ensuite, c’est plus difficile à manipuler avec d’autres librairies. Enfin, l’utilisation de Hype m’a surtout fait sentir que rien ne valait la manipulation directe du code source (je veux dire, dès le début).

Pour finir, il y a sûrement pleins de choses qui me posent problème dans After Effects, et pour lesquelles il existe une solution dans After Effects. Le fait est que je n’ai pas exactement besoin de l’étendue des possibilités de ce soft : mais peut-être que cette étendue cache des tas de solutions à mes problèmes. Malgré tout, cela ne dissout pas mon intuition que cet attirail n’est pas adapté pour ce genre de production.