Guide Complet pour Utiliser l'Extension Bodymovin
Objectifs
Les objectifs de cette vidéo sont de montrer comment utiliser l'extension Bodymovin pour exporter des animations After Effects et de familiariser les utilisateurs avec les différentes options d’exportation disponibles.
Résumé
Découvrez comment utiliser l'extension gratuite Bodymovin pour exporter vos animations After Effects au format HTML5 en SVG ou JSON.
Description
After Effects exporte initialement les animations au format vidéo ou bitmap. L'extension Bodymovin, qui est gratuite, vous permet d'exporter l'animation au format HTML5 en SVG ou dans un fichier de type JSON, pour l'intégrer ensuite dans un projet web ou mobile. L'avantage de cet export, outre le fait de gagner en poids puisque l'export est du code, c'est que cela reste vectoriel. Ce ne sont donc pas des images, c'est beaucoup plus léger. Vous pouvez également modifier le fichier ultérieurement puisqu'il s'agit de code. Il faut toutefois avoir des connaissances en Javascript. Cette extension est disponible sur le site Exchange de Adobe.
Après avoir identifié l'extension, téléchargez-la et retrouvez-la dans le menu Extension d’After Effects. Assurez-vous que dans les préférences du logiciel, dans les modules de script et expressions, l'option ‘autoriser des scripts à écrire des fichiers et accéder au réseau’ soit cochée. Une fois le plugin installé, ouvrez-le depuis le menu Fenêtre.
Dans la boîte de dialogue, sélectionnez les compositions à exporter. Plusieurs options de réglage sont proposées, notamment la conversion des éléments graphiques en formes vectorielles, la préservation des calques masqués, et l'intégration des compositions imbriquées non utilisées.
Pour l'exportation, plusieurs formats sont disponibles. Pour une version locale HTML, cochez l'option ‘démo’ et choisissez une couleur d’arrière-plan si nécessaire. Sélectionnez ensuite le dossier de destination, nommez le fichier, puis lancez le rendu. Une fois l'export terminé, vous pouvez exécuter la page HTML dans le navigateur pour visualiser l'animation. Notez que certains effets graphiques peuvent ne pas être gérés par le moteur du navigateur. Malgré cela, le résultat est généralement fluide et léger.
Questions fréquentes
Programme détaillé
Module 1 - Introduction
Module 2 - Dessin vectoriel
Module 3 - Interpolation de formes
Module 4 - Interpolation d'éléments isolés
Module 5 - Animer une forme sur un tracé
Module 6 - Contrôler le style graphique
Module 7 - Lisser l'animation dans le temps
Module 8 - Exporter l'animation
J'apprécie particulièrement l'utilisation au strict nécessaire de la souris, qui nous évite de voir le curseur faire des ronds en continue sur l'écran.
Je ferai tout pour suivre ce formateur, félicitations.