After Effects, le motion design à la rencontre du web

par Jean-Michel Kabemba le 20 mars 2020

Lorsque j’ai commencé l’infographie, Flash était LA solution animation/vidéo/motion. Les clients ne voulaient rien d’autre, les graphistes redoublaient d’imagination… C’était une époque, créativement parlant, très intéressante. Mes premiers sites internet possédaient bien entendu une version Flash et j’en garde un excellent souvenir. Mais les temps changent et les outils aussi. Flash est mort et n’a pas vraiment de successeur, beaucoup d’infographistes se sont donc tournés vers After Effects pour le remplacer.

Pourtant, le logiciel d’Adobe ne semble pas le premier choix qui vient en tête lorsqu’on parle d’animation pour le web, mais, dans la pratique, After Effects s’avère être un outil remarquable pour tout infographiste qui se respecte, même dans le milieu du web.

Beaucoup l’utilisent pour créer des animations de police de caractère, des éléments graphiques, des loadings , des effets de transition d’icônes pour les applications, des mockups d’interface d’application mobile, des illustrations et plus encore. De quoi le retrouver de plus en plus souvent sur les machines des web designers.

Réalisation de maquette/mockup de site internet
Réalisation de maquette/mockup de site internet afin de présenter les possibles interactions du site ou de l’élément graphique web.

After Effect pour quoi faire ?

En dehors du compositing vidéo, son domaine de prédilection, on retrouve dorénavant After Effects dans 3 grandes catégories orientées Web : le motion design principalement, le prototypage de sites ou d’applications et la création d’effets visuels de transition.

Le motion design

Le motion design est l’art de créer du contenu graphique animé grâce à une utilisation combinées d’images fixes ou animées, de sons, de typos.

Pour rendre attractifs les sites internet, le motion design apporte des contenus animés qui dynamisent un page ou une intro d’article. Et dans ce domaine After Effects est le roi. La plupart des publicités sur le net sont en réalité de petites animations vidéo réalisées sur After Effects. La création de séquences simples pour facebook en est le parfait exemple. De plus, l’utilisation de templates permet de gagner du temps pour créer toute sorte d’effets visuels.

After Effects Web Site template
Utilisation de Template pour les animations d’intro de site et de capsule web.

Le  prototypage

Alors que la plupart des logiciels de prototypage se focalisent sur le côté interactif, After Effects permet de montrer exactement ce que vous voulez atteindre comme résultat visuel et animé… sans devoir se soucier du code. Le travail du graphiste ici n’est pas de savoir comment techniquement les animations vont fonctionner mais de donner des idées et des pistes pour le travail final. Une présentation vidéo permet de pouvoir se focaliser sur ce que l’on veut montrer plutôt que sur la méthode pour y parvenir. De plus, lors d’une présentation client, la vidéo à l’avantage de ne pas planter… Oui, ça sent le vécu.

La création d’effets visuels

Flash à été « le » logiciel pour réaliser des loadings, des transitions, des menus animés dans les années 2000. Mais avec l’arrivée de la navigation mobile, les développeurs web ont rapidement découvert un vrai problème. Créer des animations web en utilisant Flash n’était plus une solution cross platform viable ! Même s’il était possible de créer des animations flash pour les navigateurs internet, la plupart des appareils mobiles ne le supportaientt pas correctement.

Nous sommes en 2020 et la situation de Flash est encore pire qu’elle ne l’était il y a 10 ans. La plupart des navigateurs internet ne permettront bientôt plus d’installer Flash et les navigateurs mobiles n’ont même plus pris la peine d’essayer d’intégrer Flash de quelque manière que ce soit. Les développeurs se sont tournés vers le HTML5 ou les fichiers SVG pour créer du contenu animé pour le web.

L’HTML5 est intégré dans l’HTML, les fonctions JavaScript sont soit directement intégrée au fichier HTML ou via un lien externe. L’HTML5 fait partie du document HTML et ne doit donc pas passer par un lecteur externe pour être lu et il peut communiquer directement avec le reste du document sans limite. L’avantage de ne pas avoir à importer un fichier, puis de le décoder, puis de le lire rend l’utilisation du JavaScript très efficace. Tout est dans le même fichier et peut être modifier «on the fly» sans avoir à réencoder et/ou exporter un fichier. Cela rend les animations très fluides et « responsive ». Élément très important sachant que de plus en plus de contenus sont visionnés sur appareil mobile.

L’HTML et le SVG semblent être la panacée mais un problème subsiste… les graphistes ne sont pas des programmeurs…

Ici aussi, After Effects vient à notre rescousse. Il existe des solutions, des passerelles telles que Bodymovin qui permettent de convertir des animations After Effects en fichier SVG. Toute personne qui a essayé de créer des animations en HTML5 sait que le code peut devenir très compliqué surtout si l’animation est complexe et subtile. Lorsqu’on sait à quel point les clients peuvent vouloir des modifications, on réalise assez vite l’avantage à ne pas devoir tout réencoder surtout si l’animation est totalement différente… oui, ça aussi, ça sent le vécu.

After Effects Loading & Transition
Utilisation d’After effect pour réaliser les éléments graphiques animé d’un site web au format SVG grâce au plug-in Bodymovin.

La force d’After Effects est la simplicité des outils dont il dispose pour animer des formes, des images ou même du texte.  Une fois After Effects maîtrisé, on oublie la partie technique pour se focaliser sur la création.

After Effect ne peut pas faire de site internet. Mais il peut s’avérer d’une aide précieuse pour la création de contenus visuels, que ce soit pour l’aspect dynamique, le prototypage ou l’animation d’éléments graphiques d’un site.

Le catalogue de formation du Cepegra s’est enrichi récemment d’un nouveau module de trois jours spécialement dédié à cet usage d’After Effects.

Retrouvez-en la description sur notre site web et n’hésitez pas à vous inscrire : bit.ly/AfterEffectsPourAnimationWebCepegra

Prochaine session le 5 mai 2020.