after_effect_animation.png

Exportez vos animations en format .json depuis After Effects, optimisez le poids et améliorez la  qualité de vos animations. Insérez-les via le composant After Effects, créez des marqueurs sur les frames, interagissez et synchronisez avec les autres composants (défilement, mouvement...).

Exportez votre animation en .json

Bodymovin est un plug-in conçu par les équipes AirBnB pour exporter vos animations After Effects pour le web (en SVG + Javascript).
 
 
Ouvrez votre projet dans After Effects.
 
Rendez-vous dans FenêtresExtensions et ouvrez le plug-in Bodymovin.
 
Sélectionnez la composition que vous souhaitez exporter et choisissez un dossier de destination. 
 
Cliquez sur le bouton Render pour voir le rendu de la composition et prévisualisez votre animation.
 
 
render_bodymovin.jpg
 
 
Rendez-vous dans le dossier de destination et retrouvez votre animation au format .json . Si vous aviez des images, vous avez également un dossier Images.
 
Sélectionnez tous les fichiers à la racine et compressez au format ZIP.
 

Le composant After Effects

Cliquez sur Composants et insérez le composant After Effect.
 
 
composant_after_effect.png
 
 
Importez le dossier de ZIP de votre animation dans la fenêtre Propriétés.
 
Indiquer le nom du fichier (lorem.json) pour qu'il s'affiche correctement dans le studio.
 
 
proprie_te_s_composant_AE.png
 
 
Personnalisez l'animation avec les propriétés suivantes : boucle, vitesse (min/max) et lecture automatique.
 
Par défaut, l'animation After Effects s'appuie sur la web view, qui permet une plus grande compatibilité. Vous pouvez choisir d'utiliser la version native iOS et/ou Android pour une meilleure performance, mais attention à la compatibilité.
 
 

Marqueurs

Identifiez une ou plusieurs frames de votre animation qui vont vous servir de déclencheur ou d'objet d'une action.
 
Cliquez sur + AJOUTER MARQUEUR.
 
 
marqueur_composant_AE.png
 
 

Interactions & Synchronisation

Déclencher une action depuis votre animation After Effects

Sélectionnez votre animation et ouvrez la fenêtre Interactivités.
 
Voici les déclencheurs disponibles :
  • Fin de lecture
  • Mise en pause
  • Commence lecture
  • Arrêt lecture
 
de_clencheurs_composant_AE.png
 
 

Créer une action sur votre animation After Effects

Choisissez un objet, le déclencheur et l'action Agir sur un composant de la fenêtre Interactivités.
 
Voici les actions disponibles :
  • Changer frame
  • Augmenter/diminuer la vitesse
  • Avancer/Reculer
  • Mettre en pause
  • Lecture
  • Pause
  • Redémarrer au début
  • Mettre la vitesse
  • Arrêter
  • Aller à
 
actions_composant_AE.png
 
 

Synchroniser avec un autre composant 

Pour synchroniser votre animation AE avec un autre composant (par exemple le capteur de mouvement), insérez le composant Synchronisation depuis Composants.

Dans la fenêtre Propriétés, cliquez sur Ajouter composant. Choisissez le composant AE et l'autre composant dans la liste. Sélectionnez le composant AE et cliquez sur Frames dans les options.

 
Cet article vous a-t-il été utile ?
Utilisateurs qui ont trouvé cela utile : 1 sur 2

Créez votre contenu interactif dès aujourd'hui

Simple d'utilisation ∗ Gratuit ∗ Pas d'installation

COMMENCEZ MAINTENANT !