Animation à l’aide de l’outil Déformation d’élément
Voici comment convertir un simple bonhomme allumette en matelot en uniforme et chapeau.
Publié le
Bonjour, ravi de vous retrouver.
Précédemment, nous avons peaufiné ce bateau à l'aide de l'outil Transformer le dégradé.
Nous avons créé dans Photoshop un effet Éclair que nous avons importé dans Adobe Animate à l'aide de la bibliothèque Creative Cloud, puis nous avons importé des sons pour finaliser le tout.
Dans cette vidéo, j'aimerais ajouter un marin qui fait un signe de la main, en utilisant l'outil Déformation d'élément et une interpolation classique.
C'est parti !
J'ouvre la bibliothèque et je double-clique sur le bateau pour pouvoir le modifier.
Je crée un calque « sailor » pour le marin.
Je verrouille les autres calques pour éviter de les sélectionner par inadvertance.
Je commence par tracer un cercle sans contour, je choisis un ton chair et je dessine une tête.
Ce sera vraiment une illustration très basique, juste un personnage auquel on pourra appliquer l'outil Déformation d'élément et ajouter des mouvements.
Ça fonctionne aussi avec des bitmaps.
J'active l'outil de déplacement, je maintiens la touche Option enfoncée et je fais glisser un point vers l'extérieur.
Je répète l'opération ici en maintenant la touche enfoncée, et ici également pour la bouche.
Je peux faire remonter ce point et en créer un dernier à ce niveau pour la bouche.
Pour l'œil, je vais dessiner un autre cercle qui sera blanc, mais cette fois-ci, avec un contour noir.
Je vais maintenant changer de couleur et sélectionner un bleu.
Vous pouvez choisir la couleur que vous voulez.
Je vais me passer de contour cette fois.
Pour la pupille, j'ajoute un cercle noir.
J'appuie sur Cmd + Plus pour agrandir, j'active l'outil Main en appuyant sur la barre d'espace et je trace le cercle de la pupille.
Voilà, l'œil est terminé.
Je peux le sélectionner et appuyer sur Cmd + G pour grouper les objets et les placer au bon endroit, comme ceci.
On pourrait aussi créer un chapeau de marin.
J'active donc l'outil Rectangle, je sélectionne le blanc et je fais glisser pour tracer un petit rectangle.
Je fais remonter ces bords et j'écarte légèrement les côtés.
Je clique sur l'outil Ovale et j'ajoute cette bosse pour former ce chapeau de marin.
Parfait.
Là encore, je sélectionne ces objets et j'appuie sur Cmd + G.
Comme ils sont sur le même calque, cela évitera qu'ils s'imbriquent les uns dans les autres, et je pourrai toujours les déplacer, réduire leur taille, modifier leur échelle, etc.
Et voici notre matelot !
Pour les cheveux, je vais sélectionner l'outil Pinceau et choisir une couleur.
Je peux utiliser les touches de crochet à côté de la lettre P : le crochet droit augmente la taille du pinceau, le crochet gauche la diminue.
Si vous utilisez Photoshop, ce sont les mêmes raccourcis.
Je n'ai plus qu'à griffonner les cheveux.
Comme le chapeau constitue un groupe, les cheveux vont s'afficher derrière.
Et voilà.
Je fais un zoom arrière (Cmd + Moins).
J'appuie sur la barre d'espace pour utiliser l'outil Main.
Je sélectionne ensuite l'outil Ligne et, dans le panneau Propriétés, je règle l'épaisseur du trait sur trois ou quatre.
Je vais représenter les différentes parties du corps par de simples traits.
Notre matelot est assis, avec une jambe pliée, comme ceci, et l'autre, comme cela, un bras appuyé sur ce côté du bateau et l'autre qui part dans le sens opposé.
Rien de très élaboré.
J'active l'outil Pinceau et je sélectionne une couleur bleue pour le pantalon.
J'active à nouveau l'outil Zoom pour agrandir la zone des jambes.
J'augmente l'épaisseur du pinceau en appuyant sur le crochet droit, à côté de la lettre P, et je dessine le pantalon, avec la taille et les hanches.
Ces éléments seront visibles de loin, il n'est donc pas nécessaire de les peaufiner.
Je vais juste supprimer cette extrémité et faire remonter le bas du pantalon à l'intérieur du bateau.
Je vais ensuite dessiner une chemise blanche.
J'appuie donc sur la barre d'espace pour déplacer la zone de travail.
Je dessine la chemise, avec les manches.
Pas besoin de fignoler.
Je peux double-cliquer sur la loupe pour revenir à un affichage à 100 %, comme dans Photoshop.
À présent, je vais agrandir le visage pour échantillonner sa couleur.
J'active l'outil Pinceau, et au lieu de sélectionner une couleur ici, je fais glisser la pipette vers le visage pour prélever la couleur de la peau.
Je peux maintenant dessiner une main, en faisant simple à nouveau.
Juste un poignet éventuellement… Et la main.
Parfait !
Le personnage est terminé, je peux l'agrandir.
Je vais ajouter quelques images dans le scénario, à environ une seconde et demie, vers l'image 30.
Après avoir sélectionné les images de tous les calques, je peux en insérer en appuyant sur F5 ou à l'aide du bouton Insérer une image clé.
Je clique longuement dessus, puis je clique sur Image pour ajouter une série d'images.
Je clique sur le calque de la voile, puis sur sa première image clé, ce qui sélectionne l'ensemble du contenu de l'image clé.
J'appuie sur Cmd + G pour grouper les illustrations, puis j'active l'outil Déformation d'élément.
Cet outil permet d'ajouter des épingles en cliquant à plusieurs endroits.
Si je veux que ce bras bouge, je peux cliquer dessus.
Un filet s'affiche alors sur les objets du calque.
Si je déplace le bras, tout se déplace en même temps.
Je vais maintenant ajouter plusieurs épingles pour verrouiller le corps.
J'en ajoute une à la base du cou et une autre au niveau du coude.
Si je veux que la tête bouge, je peux aussi en insérer une ici.
En faisant glisser l'un de ces points, je peux à présent créer un mouvement.
On peut commencer avec la tête penchée en arrière et le bras dirigé vers le bas.
J'avance de quelques images pour insérer une autre image clé.
Je clique longuement et cette fois-ci, je sélectionne le mot Image clé pour ajouter une image clé dans le scénario.
Dans cette seconde image clé, je clique sur cette épingle pour incliner la tête en arrière.
J'ai maintenant un léger mouvement entre la première image clé et la seconde.
On peut continuer et ajouter une autre image clé à l'aide du nouveau bouton Insérer une image clé.
Revenons au bras.
Je vais le relever, comme ceci, et faire bouger le coude, comme s'il faisait un salut de la main.
J'avance, j'ajoute une autre image clé et je bouge légèrement la main.
J'insère une autre image clé un peu plus loin et je repousse la main.
Ensuite, j'ajoute plusieurs images ici en cliquant longuement et en sélectionnant Image.
Enfin, je crée une dernière image clé dans laquelle le personnage repose la main sur le bateau.
Comme ceci.
C'est vraiment une animation basique.
Mais je vais maintenant pouvoir sélectionner toutes ces images, cliquer avec le bouton droit et créer une interpolation classique pour fluidifier les mouvements entre les images clés que je viens de créer.
Et voilà !
J'appuie sur Cmd + Retour pour tester l'animation.
Vous voyez, il n'est pas vraiment pas difficile de créer des mouvements et des animations avec l'outil Déformation d'élément d'Adobe Animate.
Ce que vous avez appris :
L’outil Déformation d’élément ajoute des épingles et crée un filet sur votre illustration ou votre image bitmap.
Vous pouvez l’utiliser pour ajouter des poignées de marionnette afin de déplacer ou déformer vos illustrations vectorielles et bitmap.
Les poignées permettent de positionner votre personnage à la manière d’une marionnette.
Les poignées de marionnette peuvent être animées à l’aide d’interpolations classiques.
Les illustrations vectorielles groupées peuvent être déplacées ensemble sur le même calque sans pour autant être fusionnées.
