Introduction
Dessin vectoriel
Interpolation de formes
Interpolation d'éléments isolés
Animer une forme sur un tracé
Contrôler le style graphique
Lisser l'animation dans le temps
Détails de la leçon
Description de la leçon
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.
Objectifs de cette leçon
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.
Prérequis pour cette leçon
Il est recommandé d'avoir des connaissances de base en After Effects et en JavaScript pour suivre cette vidéo.
Métiers concernés
Cette vidéo est particulièrement utile pour les animateurs, graphistes, et développeurs travaillant dans les domaines du web et du mobile.
Alternatives et ressources
En alternatives, vous pourriez utiliser des outils comme Lottie par Airbnb pour des animations similaires ou des frameworks JavaScript tels que GreenSock (GSAP).
Questions & Réponses
Je m'abonne