Passons aux choses intéressantes !
Après avoir découvert les outils de dessin d'Animate, et étudié et manipulé les symboles, nous sommes prêts à créer une interpolation classique.
Pour cela, je clique sur cette première image clé et j'appuie sur la touche Suppr.
Rappelez-vous, un clic sur une image clé sélectionne l'ensemble de son contenu.
Les trois bateaux sont donc sélectionnés.
J'appuie sur Suppr et je fais glisser une nouvelle occurrence du symbole du bateau dans la scène.
Elle est un peu grande.
J'active donc l'outil Transformation libre, ou j'appuie sur la touche Q, et je la réduis à partir d'un angle, tout en maintenant la touche Maj enfoncée pour conserver les proportions.
Je la déplace vers la gauche de la scène et je nomme le calque « boat ».
J'ai maintenant une image clé.
Une animation comprend au moins deux images clés : une pour le point de départ et une autre pour le point de fin.
Supposons que la fin se situe autour de trois secondes.
Je clique avec le bouton droit à la marque des trois secondes et je choisis Insérer une image clé.
J'ai à présent deux images clés.
Sur la première, le bateau est à gauche de la scène.
Chaque image clé créée ensuite est une copie de la précédente.
La seconde image clé affiche donc le même bateau, de la même taille, au même endroit dans la scène.
Je vais la faire glisser vers la droite tout en maintenant la touche Maj enfoncée pour la déplacer le long du même axe X.
Désormais, j'ai une image clé 1 avec le bateau à gauche de la scène, et une image clé 2 avec le bateau à droite.
Je configure ainsi le déplacement que le bateau doit effectuer.
Normalement, des animateurs que l'on appelle « intervallistes » doivent dessiner chaque état intermédiaire pour que le bateau traverse la scène de façon fluide.
Là, il suffit de cliquer n'importe où entre les deux premières images clés avec le bouton droit et de choisir Créer une interpolation classique.
Si je fais défiler le scénario, je visualise l'animation du bateau dans la scène.
C'est une animation simple.
Nous allons lui ajouter un arrière-plan, pour que le bateau n'ait pas l'air de flotter dans les airs.
J'ajoute un calque, que je nomme « Sky ».
J'ai préalablement créé un bitmap, « Sky », qui est dans la bibliothèque et que je fais glisser dans la scène.
J'ai créé ce bitmap à partir d'une image dans Photoshop.
J'ai sélectionné une partie du ciel que j'ai copiée et placée dans un nouveau fichier, j'ai effectué quelques réglages colorimétriques, puis je l'ai faite glisser dans la bibliothèque Creative Cloud pour pouvoir y accéder dans Animate.
C'est très simple.
Je déplace le calque du ciel sous celui du bateau, afin qu'il passe à l'arrière-plan.
Je crée un calque de plus, que j'intitule « Water ».
Ensuite, je clique sur le symbole d'eau que j'ai créé et je le fais glisser dans la scène.
C'est juste un rectangle, sans contour.
En maintenant la touche Option enfoncée – ou la touche Alt sur un PC – j'ai cliqué et fait glisser pour ajouter des points le long de ce bord, puis j'ai peaufiné les courbes des vagues.
Après avoir sélectionné cette forme, je l'ai importée dans la bibliothèque en choisissant Modification > Convertir en symbole.
Maintenant que j'ai l'eau et le bateau, je vais placer ce dernier derrière l'eau.
Pour ce faire, je place le calque du bateau entre les calques de l'eau et du ciel.
J'appuie sur Retour.
Pas mal du tout !
Comme le bateau est censé flotter, il manque peut-être un léger mouvement.
Je sélectionne donc le calque du bateau, je clique avec le bouton droit et je choisis Ajouter un guide de mouvement classique.
Cela va me permettre de tracer une trajectoire sur laquelle je pourrai animer le bateau.
Un nouveau calque intitulé « Guide » a été créé, avec une image clé vide, juste ici.
Je clique dessus et je sélectionne l'outil Crayon, en mode Lisser.
À partir du centre, je fais glisser vers le haut et la droite en essayant de tracer une ligne fluide qui suit les vagues.
Si ça ne me plaît pas, je peux la modifier.
Je double-clique dessus pour la sélectionner entièrement et j'utilise cet outil pour lisser les lignes.
C'est mieux comme ça.
Il ne me reste plus qu'à sélectionner le bateau et à le lier au guide.
La première image clé est liée au guide par défaut, donc, aucun problème.
Je clique sur la seconde image clé.
Voici le point central sur cette image clé.
Je le fais glisser pour l'accrocher au guide.
Vous voyez qu'une partie du bateau restera visible à l'intérieur du cadre.
Je vais donc faire glisser le guide un peu plus loin.
Après avoir sélectionné à nouveau cette image clé du bateau, je peux la faire glisser hors du cadre afin qu'elle ne soit plus visible dans la scène quand nous l'aurons publiée.
Si je parcours le scénario, le bateau suit désormais les oscillations du guide, qui a l'avantage d'être transparent.
Il sera donc invisible lorsque je testerai l'animation.
Nous pouvons encore améliorer l'animation du bateau, qui monte et descend comme dans un manège.
Après avoir cliqué sur la première image clé, j'affiche le panneau Propriétés et j'active l'option Orienter vers la trajectoire en cochant sa case.
Le bateau s'orientera à présent de lui-même vers la trajectoire.
C'est bien mieux comme ça.
Si le tangage du bateau semble excessif, vérifiez que la première image clé est bien orientée vers la trajectoire.
Le début de la trajectoire est orienté vers le haut.
Je clique sur le bateau, puis sur l'outil de transformation rapide.
Lorsque j'approche le pointeur d'un angle, l'icône de l'outil Rotation apparaît.
Je peux alors faire pivoter le bateau pour l'orienter dans la même direction que la trajectoire.
Après la première image clé, je répète l'opération sur la seconde.
Cela m'a l'air bien, la trajectoire est quasi horizontale.
Je pourrais aussi redresser la ligne et déplacer le bateau pour l'accrocher.
Si je fais défiler le scénario, le bateau se déplace à la surface de l'eau selon l'orientation du guide de mouvement de la trajectoire.
On peut maintenant prévisualiser l'animation en choisissant Contrôle > Tester l'animation ou en appuyant sur Cmd + Retour.
Voici l'interpolation de mouvement du bateau, le long d'un guide de mouvement.
Dans la vidéo suivante, nous nous intéresserons à un autre type de symbole : la séquence vidéo.
Ne la manquez pas !
