2. Préparer, animer, exporter un fichier
########################################

.. raw:: html

   <div style="max-width:256px;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAGklEQVQYlWM4c+bMf3TMgA0MBYWDzDkUKQQAlHCpV9ycHeMAAAAASUVORK5CYII=) repeat;margin-bottom:2em;" id="mon-animation"></div>
   <script src="../../_static/lottie.min.js" charset="utf-8"></script>
   <script type="text/javascript">
   bodymovin.loadAnimation({
     container: document.getElementById('mon-animation'),
     path: '../../_static/animations/espace.json',
     renderer: 'svg',
     loop: true,
     autoplay: true,
   })
   </script>

objectifs
*********

* Être capable de préparer un fichier Illustrator pour After Effects
* Être capable d'importer un fichier illustrator pour export avec bodymovin
* Être capable d'animer avec des expressions simples
* Être capable d'exporter un fichier JSON avec BodyMovin
* Être capable d'afficher son travail dans le navigateur

Prérequis
*********

* Adobe Illustrator
* After Effects
* BodyMovin
* serveur local (activité précédente)
* modèle de base (activité précédente)

Fichier de travail
******************

:download:`fichier <base.ai>`

A. Préparation avec Illustrator
*******************************

Ici, vous devez simplement ranger le fichier en créant des calques nommés.

B. Import avec After Effects
****************************

1. Importez comme composition
2. Convertissez les calques illustrator en formes

.. seealso::

   Voir :ref:`pratique__preparer-importer`.

C. Animation avec After Effects
*******************************

Utilisez la propriété rotation et une expression pour faire une boucle de rotation

Rappelez-vous qu'un tour complet = 360° et que diviser ``time`` par ``thisComp.duration`` donne un nombre entre 0 et 1.

D. Export en JSON
*****************

.. seealso::

   :ref:`pratique__exporter-avec-bodymovin`

E. Affichage dans le navigateur
*******************************

En vous aidant de l'activité précédente, et de ses fichiers de travail, affichez votre animation dans le navigateur.