Animer un personnage en Flash

Pantin

Animer un personnage, c'est tout simple : il suffit de le découper en morceaux animables, et de l'animer exactement comme on l'a vu dans les leçons précédentes. Exactement comme un pantin ! Dans cette leçon, nous allons suivre l'animation étape par étape d'un personnage générique pour ne rien perdre des petites astuces à connaître.



Haut
C

réation du personnage



Création du personnage

Nous sommes en 2D alors, pour d'évidentes raisons de pratique, il est plus facile de travailler avec un personnage de profil ! Evidemment, rien n'interdit d'avoir un personnage de face mais le personnage de profil peut facilement traverser l'écran de part en part, ou encore servir d'avatar dans un jeu de plate-forme.

Vous devez concevoir votre personnage comme un tout. Dessinez chaque partie sur un calque différent en vérifiant que les superpositions donnent un tout crédible. Commencez par la tête ou le buste, qui sont deux éléments qui donnent son caractère au personnage. Ensuite, ajoutez un bras (en deux ou trois parties : bras, avant-bras, main) et une jambe (en trois parties : cuisse, molet, pied).

Au fur et à mesure de votre création de personnage, n'oubliez pas de convertir chaque partie du corps en movieClip ! Vous pourrez ainsi récupérer le bras et la jambe, les intégrer une deuxième fois sur la scène, et en faire le bras arrière et la jambe arrière.


Jambes

Attention au positionnement des jambes ! On est souvent tenté de les écarter un peu pour qu'elles soient bien visibles. Mais, de profil, les jambes sont presque superposées ! Si vous écartez trop les jambes, vous risquez de donner à votre personnage une allure d'egyptien et éventuellement un buste de troll.

Petite astuce : vous pouvez ombrer légèrement les membres arrières en y appliquant un effet de teinte noire très léger.

Articulations

Il y a un travail tout particulier à faire au niveau des articulations.

Premièrement, ne coupez jamais une articulation net, préférez lui donner un bout arrondi : ainsi, en tournant sur elle-même, aucune coupure disgracieuse n'apparaîtra.

Deuxièmement, sachez prévoir où mettre des contours et où ne pas en mettre. Si vous mettez des contours partout, on verra les "pièces" de votre personnage. D'une manière générale, vous mettrez :

  • des contours sur les parties recouvertes
  • pas de contours sur les parties recouvrantes

...en sachant que, généralement, chaque pièce a un bout recouvrant et un bout recouvert.


Bibliothèque

Et, attention, voici l'inévitable minute chiante du "nomme-bien-tes-movieClips" !

Dans votre bibliothèque (à gauche), nommez clairement chaque élément et rangez-les dans des dossiers. Tous les commencer par la même particule permet de les avoir tous au même endroit (car rangés par ordre alphabétique).

Idem pour les calques (à droite) : nommez-les de manière explicite. L'ordre dans lequel vous les rangerez dépend évidemment de l'ordre logique d'affichage : la tête doit être tout au-dessus et ne pas être recouverte, les membres arrière sont tout derrière, etc.

Calques



Haut
V

érifications avant l'animation



Check-list avant la partie la plus chouette, l'animation. Vérifiez :

  • que chaque pièce est convertie en un movieClip et correctement nommée et rangée
  • que vous avez un movieClip par calque
  • que les points de pivot sont à leur place
  • que le centre du movieClip est à sa place
Points de pivot

Points de pivot

Ah ! Les points de pivot, parlons-en justement. Le point de pivot est le point autour duquel l'articulation va tourner. Par défaut, le point de pivot est au milieu de la forme. Mais ce n'est pas toujours le plus indiqué ! Par exemple, vous êtes conscient qu'une porte tourne non pas sur son milieu, mais bien autour de ses gonds. De même, si votre bras tournait en son milieu, vous vous retrouveriez démembré : il tourne autour de l'épaule.

Pour le personnage, il faut placer les points de pivots aux articulations. Il vaut mieux le faire avant d'animer, sans quoi vous allez devoir le faire manuellement pour chaque portion d'animation, sans quoi vous aurez des sauts et des bugs.

Utilisez l'outil de transformation manuelle et déplacez le petit rond blanc qui se trouve au centre de la forme. Déposez-le là où doit se trouver l'articulation. Ci-contre, les points de pivots pour mon bonhomme noir. Remaquez qu'il vaut mieux laisser du jeu pour que l'articulation coulisse, par exemple sur le genou.

Désormais, si vous faites une rotation avec l'outil de transformation manuelle , vous remarquerez que la forme tourne autour du point de pivot !


Centre du movieClip

Ce n'est pas obligatoire, mais animer chaque personnage ou objet individuellement au sein d'un movieClip est souvent une bonne idée. Cela permet d'avoir une timeline principale propre et simple, et de pouvoir facilement décaler tout le personnage en cas de rectification.

Si vous travaillez pour un jeu vidéo, la question ne se pose pas : il faut que chacune de vos animations soit convertie en un movieClip.



Le centre du movieClip est le point qui définit où se trouve le movieClip (en coordonnées numériques). Si, en animation, on peut s'en passer, attention car dès que le code entre en jeu (pour un jeu vidéo par exemple), il est crucial !

Vous pouvez choisir où placer le centre au moment de la conversion en movieClip, avec Centre.
Il n'est pas forcément situé au centre. Il peut être différent du point de pivot également.

Le centre du movieClip est matérialisé par une petite croix (voir ci-contre).

Centre du movieClip
  • pour une balle qui tourne, avoir le centre du movieClip au centre réel est un avantage puisque la balle tourne autour de son centre ;
  • pour un personnage, on a plutôt tendance à placer le centre du movieClip à ses pieds, car c'est ce point, en contact avec le sol, qui définit son mouvement, et peu importe ce qui se passe au-dessus ;
  • pour un décor, on le met généralement en haut à gauche.

Si vous voulez rectifier le centre, faites un double-clic sur le movieClip pour entrer à l'intérieur. Repérez la petite croix. On ne peut pas déplacer le centre du movieClip, mais on peut déplacer les autres éléments autour. Par conséquent, il vaut mieux effectuer cette petite manipulation avant d'animer, sinon il faudra déplacer un à un chaque morceau de l'animation (et encore, pas sûr que ça colle !)



Haut
A

nimation !



Animer consiste à bouger un à un chaque élément de votre personnage pour reconstituer une pose-clé (début ou fin d'un geste). Le tout est lié par des interpolations de mouvement (ou interpolation classique dans les versions CS4 ou plus).

L'animation la plus "classique" est la marche ou la course. Voyons comment faire courir notre petit bonhomme.



1. Positionnez le personnage pour la pose initiale de l'animation. Décalez-vous de quelques frames, et positionnez-le pour la pose suivante. Et ainsi de suite, jusqu'à ce que le mouvement soit complété (la pose initiale et finale doivent être la même pour que l'animation boucle).

Attention à faire bien un cycle complet, de sorte que l'une et l'autre des jambes passent devant chacune à son tour.

Animation étape 1

Tracés

Pour plus de facilité à animer, vous pouvez afficher les movieClips sous forme de tracés colorés. Cliquez sur le petit carré en haut de la fenêtre de calque pour passer tous les calques en tracés colorés, ou cliquez sur le carré à droite du calque pour n'affecter que le calque en question. Vous avez ainsi une meilleure visibilité, et vous pouvez saisir les pièces situées en-dessous.

Pensez également à vous créer un calque temporaire sur lequel vous tracerez une ligne qui figure le sol. Ca évitera à votre personnage de léviter au beau milieu de votre animation !

2. Placez des interpolations de mouvement entre tous ces points. Vous obtiendrez un premier résultat qu'il faudra ensuite affiner (voir ci-contre).


3. Retirez des images (clic droit > supprimer l'image) pour accélérer le rythme de l'animation. Attention, on a toujours tendance à faire des animations trop lentes quand on n'a pas de référentiel (décor qui défile) !

4. Affinez l'animation pour éviter tous les bugs (pied qui rentre dans le mollet, genou qui prend le chemin le plus court...). Cela peut ne pas être nécessaire pour certaines parties (la tête par exemple), ou aller jusqu'à de l'image par image pour certaines autres (les pieds).

Ci-contre, voici la timeline finale de mon animation de course. Le résultat ci-dessous :

Affinage de l'animation


Haut
C

e qu'un bon animateur doit savoir



Devenir un bon animateur, c'est le travail d'une vie ! Aussi, je n'aurai pas la prétention de vous enseigner les ficelles du métier. Voici simplement quelques pistes que vous devrez creuser pour prendre la relève des légendes du métier.

Animation
Image tirée de The Animator's Survival Kit de Richard Williams
(directeur de l'animation sur Qui veut la peau de Roger Rabbit ?)

  • Différence entre marche et course
    Pendant la marche, on a toujours au minimum un pied au sol, et au maximum les deux. Pendant la course, on a au maximum un pied au sol, et dans la posture intermédiaire, plus aucun !
  • Déformation des volumes
    Les objets qui bougent se déforment légèrement. Par exemple, une balle qui rebondit se tasse quand elle touche le sol, et s'étire quand elle remonte. De même, les muscles se déforment pendant le mouvement. Il est bon d'exagérer ces déformations pour donner plus de réalisme à vos mouvements !
  • Pas d'arrêts nets
    Bien que peu perceptibles à l'œil nu, les mouvements ne s'arrêtent pas net ni ne commencent net. Quand on tend son bras en avant, on va auparavant le ramener légèrement vers soi pour amorcer le mouvement. De même, le bras va poursuivre légèrement sa course après l'arrêt du mouvement. Exagérez ces principes pour donner de la vie à vos animations !
  • Exagérations
    Exagérez ! Ajoutez des effets spéciaux pour exagérer encore plus ! Une roue qui tourne vite ? Ajoutez des petits traits qui indiquent sa grande vitesse. Un grand coup de pied ? Assortissez-le d'un flash lumineux !
? Visitez la page Wikipédia qui résume les 12 grands principes de l'animation !



Haut
D

'autres animations



Une fois votre personnage créé et mis en place, vous pouvez facilement le décliner en plusieurs animations différentes !

Pendant votre court-métrage, faites un clic droit > permuter le symbole pour permuter une animation du personnage avec la suivante.


Bien évidemment, vos animations dépendront du personnage. Chaque personnage a sa propre construction et ses propres défis techniques à relever !



L'héroïne de Douce Mécanique

Personnage réaliste, mais particulièrement simple avec notamment les pieds et mains liés aux membres, donc une animation simplifiée.


Le dragon du tutoriel Flash programmation

Deux difficultés principale : son aspect flamboyant, rendu grâce à des interpolations de forme rendues floues, et le fait qu'il soit fait d'un seul tenant, réalisé en rajoutant un contour tout autour de la forme.


Paulapin dans le jeu des deux ans (Lubien, l'aventure)

Petit rappel que l'ingénuosité vaut toute la technique du monde ! Pour cette animation, Paulapin a réalisé ses éléments sous Photoshop, sous forme d'images fixes. En remuant les oreilles et en faisant trembler tout le corps, il donne l'illusion d'une course frénétique.



Pour terminer (hé oui ! vous savez déjà presque tout !), nous allons voir quelques effets spéciaux courants. Prêts à mettre le feu ? Cliquez sur la flèche de droite !

Lou Lubie

Tutoriel par Lou Lubie

Publié le 30 Avril 2011