Avec l’annonce de la sortie d’Adobe Animate CC, qui remplace Flash Pro, on comprend que les lignes continuent de bouger dans l’univers de l’animation HTML5. Arzhur Caouissin, expert en interactivité et formateur référent chez Apaxxdesigns, répond à nos questions pour mieux comprendre quels outils aujourd’hui disponibles conviennent à quels usages.
Apaxxdesigns : Une première question, un peu cash : peut-on vraiment animer en HTML5 ?
Arzhur Caouissin : Oui. HTML5 intègre plusieurs spécifications qui gèrent l’animation.
- CSS3 permet d’appliquer des transformations de base et Javascript offre la possibilité stabiliser l’ensemble pour tous les navigateurs.
- Canvas, autre norme du HTML5, permet de lancer un rendu bitmap temps réel, généré par le navigateur lui-même. Le résultat est identique à un flux vidéo, à la différence que l’affichage est temps réel et permet d’intégrer des actions contrôlées par l’utilisateur. Ce standard est idéal pour le jeu.
- La vidéo traditionnelle, préenregistrée, est également utilisable sans plugin en HTML5.
Donc, oui, un site HTML5 peut animer de bien nombreuses manières.
Quel standard privilégier alors et pour quel type de rendu exactement ? Pourquoi autant de possibilités ? On s’y perd !
- Les animations Javascript/CSS sont à préférer pour les contenus accessibles et référençables. Mais les possibilités restent limitées. On anime des transitions simples (position, opacité, rotation, etc).
- Les animations Canvas qui activent un affichage bitmap instantané sont comparables à un rendu de type vidéo. Les données moulinées en Javascript sont traduites par le navigateur en images PNG pour alléger l’affichage lors de calculs imposants comme les transformations vectorielles (SVG), les effets de particules, les mouvements d’objets dans un espace en 3D. Il convertit en une seule image un tracé complexe et gourmand en ressources. Le standard WebGL peut aider Canvas à déléguer pour ce faire une partie des calculs au processeur graphique. On utilise ces standards principalement pour du jeu, ou des projets impactants. Mais attention, le résultat étant une séquence animée d’images bitmaps, il en résulte un contenu non référençable et peu accessible.
- La vidéo, quand à elle, peut être exploitée également pour ses capacités de rendu mais ne peut intégrer des données modifiées par l’utilisateur, contrairement à Canvas. Le standard vidéo reste donc idéal pour des créations calibrées et montées en amont de leur diffusion, y compris si le projet intègre une couche d’interactivité. Mais l’interactivité servira à naviguer entre différentes séquences audiovisuelles déjà enregistrées, uniquement. C’est ce que l’on nomme plus explicitement un Webdoc.
Parmi ces trois grandes familles de standard d’animation HTML5 : CSS, Canvas et vidéo, quels sont les outils connus qui permettent de les générer, de préférence sans coder ?
Chez Adobe, c’est Edge Animate qui gère le Javascript/CSS. Le nouvel Animate CC (ex Flash Pro), gère le canvas/WebGL et la vidéo. After Effects, Premiere Pro et même Photoshop exportent eux en vidéo ou en séquences animées. Pour l’authoring vidéo HTML5, en revanche, Edge et Flash ne sont pas encore à la hauteur. Je recommande Klynt.
Animate CC fait renaître Flash Pro, n’est-ce pas ? Peut-on résolument miser sur cet outil ? Adobe a-t-il vraiment fait table rase du format Flash ?
Oui. Depuis déjà quelques années le moteur de Flash Pro génère du HTML5. Animate CC met désormais en marge le standard propriétaire SWF, qu’on appelait plus communément le Flash. Et les quelques années de pratique des standards HTML5 à partir de l’ex Flash ont permis de fiabiliser l’expérience autour de ces nouveaux formats reconnus maintenant par tous les navigateurs. Animate CC bénéficie en outre d’un moteur entièrement recodé pour une expérience HTML5 optimale. Les animations vectorielles caractéristiques de l’environnement de Flash (stylées flat et 2D) sont adaptées au HTML5. Et l’interactivité s’y ajoute à l’aide de bibliothèques de commandes Javascript prédéfinies et personnalisables. Le standard Canvas qui en est le noyau central est si prometteur que de nombreux sites l’exploitent déjà et le rendu dépasse bien souvent ce que l’on savait faire en SWF. Animate CC va redevenir le standard de l’animation Web, c’est indéniable.
Quid alors de Edge Animate ? On entend dire qu’il devrait disparaître ? Est-il donc prudent de continuer à l’utiliser ?
Oui. Plusieurs choses doivent être précisées. Edge permet d’abord de créer des animations référençables et basées sur CSS et Javascript. Edge complète donc parfaitement Animate CC. Mais son moteur au demeurant instable n’a pas rencontré le succès escompté par Adobe. Et les possibilités y restent graphiquement limitées. Adobe a par ailleurs développé d’autres logiciels dont Muse, qui a, lui, rencontré un succès inattendu. Donc, plutôt que de développer trois outils d’intégration HML5, voire quatre si l’on ajoute Dreamweaver, Adobe a préféré se concentrer sur les plus prometteurs, Animate CC et Muse. Edge devrait être progressivement démantelé pour servir les autres logiciels de la suite, comme Reflow l’a été au profit de Muse et Dreamweaver, et probablement vers ces deux derniers en effet, de vocations plus éditoriales et donc sémantiques que l’ex Flash. En attendant, les animations générées par Edge restent très utiles du fait de leur accessibilité structurelle et, bien que cela doit être confirmé prochainement par Adobe, le format d’édition de Edge sera juste déplacé, donc réutilisable. Par prudence toutefois, on peut aussi limiter ses réalisations Edge à des projets ponctuels qui n’imposent pas une top grande longévité. Edge reste un bon outil très actuel, à condition de rester léger. Il serait vraiment dommage de s’en priver, même s’il devait disparaître complètement. Le HTML5 qui en sort restera de toutes façons compatible, ce qui ne fut pas le cas du SWF issu, lui, de Flash Pro. Sans tout miser sur Edge, on peut donc affirmer qu’il reste intéressant de continuer à s’en servir pour encore un bon moment.
Pourquoi privilégier les outils Adobe ? N’y a-t-il pas d’autres solutions ?
J’ai toujours pensé qu’il était important de connaître les outils les plus favorables à l’employabilité d’un designer, dans une agence ou chez un annonceur, quitte à ne pas toujours y trouver l’excellence attendue. Il y a des logiciels qui animent uniquement en CSS. D’autres qui gèrent bien mieux le séquençage audiovisuel en HTML5. Mais, pour cette raison d’intégration professionnelle et dans un contexte de maintien des emplois assez déterminent à notre époque, je recommande naturellement les produits Adobe, disponibles dans tout studio créatif quel qu’il soit. Chacun reste libre, en plus, de compléter l’offre avec ses outils de prédilection, bien sûr. Je n’hésite pas à recourir personnellement à Klynt, Aquafadas et PandaSuite pour étoffer ma boîte à outils. D’autres préfèreront WordPress ou Hype. Mais si la suite Adobe ne figure pas sur votre CV avec une mention 5 étoiles, je vous souhaite vraiment du courage pour décrocher un job !
En résumé, quels sont les profils d’animateurs que l’on peut distinguer pour chaque outil ? Doit-on tout apprendre pour animer ?
Le motion designer utilisera toujours After Effects. Le réalisateur de dessin-animé, de jeu vidéo, d’animations flat et 2D, de dataviz, ou de site richmédia impactant et désormais de bannières, se penchera sur Animate CC. L’animateur de portfolio, de menus et dispositifs de navigation, de profiloscopes, de contenus plus sémantiques, préfèrera rester dans Edge. Mais il est à parier que c’est le couple After/Animate CC qui devrait l’emporter dans les années qui viennent comme le couple After/Flash a émancipé les créatifs du milieu des années 2000.
Le panorama des logiciels d’animation HTML5 est plus clair. Peux tu nous préciser comment ton offre de formation chez Apaxxdesigns couvre cette nouvelle topographie du HTML5, et quelles sont les spécificités des 3 modules d’interactivité et d’animation que tu enseignes ?
- Animateur 2D est la formation qui introduit clairement à Animate CC. Vous y apprenez non seulement l’outil, mais un réalisateur professionnel de dessin-animé enseigne en outre la physique de mouvement, comme dans les grandes écoles d’animation. Cette formation est conçue pour ceux qui veulent vraiment animer avec un grand A.
- Designer d’interactivité HTML5 a été élaborée avant l’annonce du repli de Edge, mais son contenu, essentiellement basé sur l’utilisation d’une ligne de temps et de librairies de code externes (non liées à Edge), permet non seulement de continuer à produire des interactions accessibles, puisque réalisées dans Edge, mais au demeurant compatibles avec Animate CC qui accepte les mêmes librairies de code (Greensock). La formation prépare donc parfaitement à cette transition tout en répondant à un besoin actuel du marché de produire avec les outils en place. Il ne vous sera que plus facile d’aborder plus tard, si vous le souhaitez, Animate CC, lorsque l’outil sera devenu vraiment incontournable.
- Webdoc HTML5 enfin propose de réaliser des sites Web basés sur des contenus audiovisuels. C’est une autre façon d’aborder le richmédia. Une approche qui séduit généralement les auteurs, réalisateurs, producteurs de documents, mais aussi les marques et les institutionnels qui possèdent des fonds audiovisuels.
Laisser un commentaire