Créer un logo animé
Un logo animé attire l’attention avec sobriété. Le principe est simple : une forme, deux images-clés, et une interpolation qui relie les deux poses. La démonstration ci-dessous illustre le résultat visé.
Dessiner la forme
Dans l’éditeur, dessinez votre marque. Pour cet exemple, un carré aux angles adoucis et un disque en négatif suffisent. Sélectionnez l’ensemble, puis regroupez-le : vous obtenez un objet unique, que l’on pourra animer d’un seul tenant. Donnez-lui un nom explicite dans la bibliothèque, par exemple Marque.
Poser la première image-clé
La timeline, en bas de l’écran, représente le temps. Une image-clé est une pose enregistrée à un instant donné. Placez la tête de lecture au début, sélectionnez la marque, puis appuyez sur F6 pour fixer la pose de départ.
Avancez ensuite la tête de lecture, par exemple jusqu’au milieu de l’animation, et modifiez légèrement la pose : agrandissez la marque et faites-la pivoter de quelques degrés. Un nouvel appui sur F6 enregistre cette seconde pose.
Relier les deux poses
Entre deux images-clés, FlatInk peut interpoler. Double-cliquez sur l’intervalle qui sépare les deux clés, ou choisissez l’interpolation dans le menu : la marque passe alors en douceur de la première pose à la seconde. Ce procédé porte le nom d’interpolation de mouvement.
Pour obtenir un effet de respiration, ajoutez une troisième image-clé identique à la première, en fin d’animation. La marque grandit puis revient, en boucle.
Ajuster le mouvement
Quelques réglages modifient sensiblement le ressenti.
- Le pivot est le point autour duquel s’appliquent la rotation et l’échelle. Placez-le au centre de la marque pour un mouvement équilibré.
- L’accélération (easing) règle le rythme entre deux clés. Une courbe douce produit un mouvement plus naturel qu’une vitesse constante.
- La durée se définit sur la timeline. Plus elle est longue, plus le mouvement est lent et posé.
Et ensuite
Une fois l’animation au point, vous pouvez la lire en boucle dans le lecteur, l’exporter, ou ajouter une couche d’interactivité, par exemple déclencher un léger sursaut au survol avec un événement when hovered. L’étape suivante introduit justement les événements : voir le mini-jeu à glisser-déposer.