Comment créer une animation LottieFiles dans After Effects

LottieFiles a créé un type de fichier modifiable rapide, évolutif et post-rendu, et il est facile pour vous de vous impliquer et de créer des animations dans ce format. À l'aide d'Adobe After Effects et de certains plug-ins, vous pouvez faire partie du nouveau type de fichier en vogue: le Lottie.

Qu'est-ce qu'un loto ?

Un Lottie, ou dotLottie, est un type de fichier qui prend d'assaut les développeurs Web. Vous avez peut-être créé des animations à inclure dans vos conceptions, que ce soit pour les médias sociaux, la conception Web ou la conception UX et UI. Et vous enregistrez probablement vos animations sous forme de fichiers GIF, SVG ou PNG. Un fichier Lottie est toutes les bonnes parties de ces types de fichiers, mais plus petit, plus rapide et plus facile à modifier après le rendu.

LottieFiles est une énorme base de données d'animations prédéfinies enregistrées aux formats Lottie ou JSON. Ces animations sont rendues en temps réel, permettant une expédition plus rapide dans vos conceptions. Il n'y a pas d'attente pour le téléchargement de ces fichiers; ils apparaîtront dès que la page s'ouvrira.

Pour en savoir plus sur LottieFiles, consultez notre introduction à la Lottie.

Commencer

Nous allons créer une Lottie en utilisant Adobe After Effects, mais il existe d'autres logiciels que vous pouvez utiliser pour créer votre animation Lottie. Vous pouvez utiliser Adobe Animate avec le plugin LottieFiles pour créer un Lottie. Vous pouvez également convertir une animation au format SVG en Lottie si vous avez déjà réalisé une animation dans ce format.

Cependant, After Effects est notre premier choix, étant donné que LottieFiles a été créé à l'origine pour être utilisé dans After Effects. Commençons.

1. Créez votre animation

L'aspect animé de votre Lottie est le même que pour tout autre format. Nous avons créé l'illustration de notre animation à l'aide d'Adobe Illustrator. Cela permet de garder les calques séparés et prêts à être importés dans After Effects. Une fois votre illustration importée, vous pouvez adapter les calques de votre composition pour l'animation finale.

Les animations Lottie s'exécutent sur une boucle continue, alors considérez cela pour les points de fin et de début de votre conception. L'animation doit être simple et durer environ trois secondes.

2. Téléchargez les plugins

Il existe deux plugins que vous pouvez utiliser pour créer un fichier Lottie: le plugin LottieFiles ou le plugin Bodymovin. Les deux sont disponibles pour After Effects, mais le plugin LottieFiles peut également être trouvé dans d'autres logiciels. Ils font chacun des choses légèrement différentes, mais nous allons nous concentrer sur le plugin LottieFiles en ce moment.

Pour télécharger le plugin LottieFiles, rendez-vous sur Page du plug-in LottieFiles After Effects. Vous trouverez deux options de téléchargement.

L'option de droite nécessite un Gestionnaire d'extensions d'Anastasiy qui fonctionne avec Mac et Windows. Une fois que vous avez téléchargé le gestionnaire d'extensions, téléchargez le plug-in ZXP à partir de la page LottieFiles.

Une fois le plugin ZXP téléchargé, ouvrez le gestionnaire d'extensions Anastasiy, cliquez sur Effets secondaires, sélectionnez le plug-in LottieFiles dans la liste et appuyez sur Installer.

De retour sur la page du plugin LottieFiles, téléchargez également le plugin Adobe Exchange; ouvrez votre application de bureau Creative Cloud et installez le plug-in. Revenez à votre fini animations dans After Effects.

Certaines personnes ont une erreur d'autorisation lors de l'utilisation de ces plugins. Pour éviter ce problème, rendez-vous sur Effets secondaires > Préférences > Scripts et expressions > Script d'application et cochez la case pour Autoriser les scripts à écrire des fichiers et à accéder au réseau.

Une fois cela fait, la fenêtre contextuelle de LottieFiles vous demandera de vous connecter. Si vous n'avez pas encore de compte LottieFiles, il est maintenant temps d'en créer un.

3. Exportez votre loterie

Avec les plugins LottieFiles installés, vous pouvez rendre votre animation Lottie. Lorsque votre composition d'animation est terminée, cliquez sur La fenêtre > Rallonges > LottieFiles. Cela fera apparaître une fenêtre contextuelle avec les noms de vos compositions. Clique le Flèche verte à côté du nom de votre composition, cela fera apparaître la fenêtre de rendu Lottie.

Après quelques secondes, votre animation apparaîtra dans la fenêtre contextuelle. L'animation jouera en temps réel en boucle. Ici, vous pouvez choisir d'enregistrer votre animation ou de télécharger votre animation dans la bibliothèque LottieFiles.

En cliquant Enregistrer sous vous donnera deux options d'exportation: Lottie JSON (*.json) ou dotLottie (*.lottie). Le fichier dotLottie est un fichier compressé qui inclut des métadonnées, dont nous n'avons pas vraiment besoin pour l'exportation. Nous sommes allés avec Lottie JSON.

Votre fichier exporté sera un fichier texte, pas un fichier d'animation visuelle; c'est ainsi que fonctionnent les fichiers JSON. Et si vous vouliez que l'animation soit prête à démarrer? Voyons comment vous pouvez y accéder.

Comment vous pouvez utiliser votre animation Lottie

Pour télécharger votre Lottie dans la bibliothèque LottieFiles, cliquez sur Télécharger. Cela s'affichera pendant quelques secondes. Ensuite, cliquez sur le bouton avec le globe dessus. Cela ouvre le site Web LottieFiles où vous pouvez soumettre votre animation Lottie à la bibliothèque LottieFiles. Nommez votre fichier et appuyez sur Remise.

Une fois que votre animation a été approuvée dans la bibliothèque LottieFiles, vous pouvez utiliser le plugin LottieFiles dans des logiciels comme Adobe XD, Figma ou Sketch pour expédier votre animation à votre conception.

Il existe d'autres façons d'utiliser votre animation LottieFiles que directement dans la bibliothèque de plugins. Vous pouvez modifier davantage votre animation Lottie à partir de la fenêtre du navigateur. Il propose un panneau de calques de base; vous pouvez modifier la couleur d'arrière-plan, la vitesse de lecture, la fréquence d'images et quelques autres choses.

Dans la fenêtre Handoff, vous pouvez télécharger votre animation en tant que Fichier JSON pour l'implémentation dans le développement Web et la conception, ou vous pouvez le convertir en GIF pour des utilisations plus conventionnelles. Vous pouvez également intégrer votre animation avec un code d'intégration HTML, et il existe également des options iOS et Android, afin que vous puissiez intégrer l'animation dans votre conception Web.

L'intégration du Lottie HTML vous permet de modifier le code pour modifier votre animation. Vous pouvez modifier les couleurs et les tailles directement dans le code lorsque vous l'ajoutez à votre site Web.

Le téléchargement de l'application LottieFiles sur votre téléphone vous permet de scanner le code QR de l'animation pour prévisualiser l'animation dans l'application. Vous pouvez également utiliser le clavier LottieFiles et déposer votre dotLottie en tant que commentaire dans certains messages.

Créer une loterie dans After Effects

Bien que cela puisse toujours ressembler à un type de fichier non conventionnel, puisque vous ne pouvez pas simplement télécharger votre animation directement sur les réseaux sociaux comme vous pouvez avec un GIF ou un PNG, le Lottie présente de nombreux avantages pour les développeurs Web et les concepteurs qui utilisent des plugins ou intègrent des codes dans leur conceptions.

Les fichiers Lottie et JSON permettent d'économiser de l'espace et du temps de chargement, et préservent la qualité par rapport aux types de fichiers traditionnels. LottieFiles crée constamment de nouvelles façons de mettre en œuvre les conceptions, les possibilités sont infinies.

Comment créer une animation de mouvement à l'aide de Procreate

Créer une animation de mouvement dans Procreate est facile, et cet article vous montrera comment le faire.

Lire la suite

A propos de l'auteur