Tutorial
Animation: Clignement des yeux.

Dans ce tutorial, je vais vous expliquer comment fairepour qu'une doll cligne des yeux.
Je le fais quasi-systématiquement. C'est un peu long, mais ça rend la doll plus vivante, pour un avatar c'est parfait.
J'illustre ce tutorial avec ma doll "Star-racer", sur la base "Funny" par Pinkland.

Avant de commencer.

Premièrement, qu'est-ce qu'une animation?
C'est une successions d'images qui se répètent ou pas. Dans notre cas, l'animation se répète en boucle: une fois la dernière image atteinte, on revient à la première.

On parle quand même d'une image au sens large du terme: Les formats d'images sur ordinateur les plus courants sont .bmp, .jpg ou .jpeg, .png et .gif .
C'est ce dernier qui nous intéresse.
Le format gif (Graphic Interchange Format, merci Wikipedia) comporte de nombreux avantages pour les images de petites taille et le pixel art:
_ Il est relativement léger, pratique pour l'upload et la vitesse de chargement
_ Il est possible d'y inclure des transparences, ainsi on peut retirer le contour d'une image pour laisser apparaitre le fond de la page web
_ Et surtout, surtout: il permet de faire des animations!

Il comporte néanmoins quelques inconvénients:
_ Une image gif ne peut comporter qu'un nombre limité de couleurs (256), ce qui ne permet pas de l'utiliser pour des photos classiques.
_ Il vous faut un logiciel pour faire des animations.

Logiciels nécessaires.

Pas de panique, vous n'aurez pas à vous ruiner.
On utilisera toujours Paint, dans un premier temps, pour créer les images.

Ensuite, il vous faut un logiciel d'animation. On peut en trouver pas mal sur les sites de téléchargements.
Il y a des gratuits, des démos et de payants. Tant qu'à faire, on se servira des gratuits, on peut très bien s'en sortir sans débourser un centime.
Où les trouver? Télécharger.com, infos-du-net.com, clubic.com... N'importe quelle logithèque en contient.
Je vous mets ceux que je connais et qui sont assez sympa:
_ Gif Movie Gear (limité à 30 jours d'essai :( )
Un très bon logiciel, facile à utiliser, mais payant malheureusement.

_ Animagic gif animator (Version gratuite sans les effets spéciaux)
Plutot rudimentaire, mais assez simple d'utilisation. C'est celui que j'utilise le plus souvent.

Après, vous pouvez toujours chercher par vous-mêmes, tous fonctionnent à peu près de la même manière.
Méfiez-vous cependant. Certains affichent les durées en millisecondes, d'autres en centièmes de secondes.

1. Les images.

Comme je vous l'ai dit plus haut, une animation est une succession d'images.
Un gif est donc logiquement composé de plusieurs images, qu'on appelle cadres (frames en anglais) qui se suivent à intervalles bien définis.
Concrètement, pour créer votre animation, il faudra que vous ayez plusieurs images. Revenons en à nos yeux.

En général, les yeux sont de petite taille, il n'y a pas besoin de 50 frames pour que l'animation soit fluide.
Je vous explique ma façon de faire, mais ce n'est pas forcément la seule ;)

Je fais 3 frames différentes (/!\ ça ne veut pas forcément dire que mon animation n'a que 3 cadres.)
_ Les yeux normalement ouverts
_ Les yeux à demi fermé
_ Les yeux totalement fermés

Comment faire?

Etape 1.1:
Dans Paint, collez votre doll, et entourez là (le plus étroitement possible, histoire de ne pas changer les dimensions), d'une couleur qui ne se trouve pas déjà dessus. Cette couleur sera notre couleur transparente. Copiez-là (avec l'outil sélection rectangulaire puis clic droit dessus, copier).

Etape 1.2:
Ensuite, collez-là encore 2 fois, les unes à coté des autres. Vous vous retrouvez avec des triplées!

(Vous voyez, par exemple, ce vert immonde, je suis certaine de ne pas l'avoir utilisé.
Notez bien qu'elles ne se touchent pas, pour bien les distinguer les unes des autres.)

Etape 1.3.a:
On ne touche pas à la première puisqu'il y a une image où les yeux doivent rester ouverts.

Agrandissez la deuxième avec le zoom et débrouillez vous pour qu'elle ait les yeux à moitié fermés:
_ Coloriez de la couleur de la peau jusqu'à un peu moins que la moitié de l'oeil, en haut.
_ Redessinez la paupière et éventuellement les cils en noir, en essayant de respecter les nuances et les formes.
(je sais, c'est pas évident)

Etape 1.3.b:
Pour la troisième, soit vous êtes tombé sur une dolleuse très gentille qui avait prévu des bases avec les yeux fermés (ce qui est le cas ici :P)
Soit vous devez vous débrouiller. C'est plus facile que la deuxième: servez vous de la paupière inférieure, et redessinez-y la paupière supérieure de la bonne épaisseur (et avec la bonne forme!) , avec les cils,
Coloriez tout ce qui est au-dessus, de la couleur de la peau, toujours en respectant les nuances.

Nous avons maintenant nos 3 frames.
Pour s'y retrouver, numérotons-les.


Nous allons pouvoir maintenant passer à...
2. L'animation proprement dite.

C'est ici que ça se complique pour ceux qui n'ont jamais manipulé de gifs.
Là, il y a deux façons de faire. La méthode des débutants et de ceux qui ont un logiciel avec beaucoup d'options, et la méthode un tout petit peu plus compliquée.
Je vais commencer par celle des débutants, histoire de prendre le logiciel en main.
Déjà, je vais vous montrer le "scénario", c'est à dire, la façon dont vont se succéder les images: numéro et durée.

_ Image 1: 2000 millisecondes=200 centièmes (il faut que les yeux restent longtemps ouverts pour faire plus réaliste, à vous de voir.)
_ Image 2: 100 millisecondes= 10 centièmes
_ Image 3: 150 millisecondes= 15 centièmes
_ Image 2: 100 millisecondes= 10 centièmes
_ retour en 1.

Ceci pour un simple clignement. On peut faire plus compliqué, mais ne nous embrouillons pas.

Pour la suite je vais décrire comment faire dans les deux logiciels cités plus haut.
Animagic est un logiciel plutot simplifié avec peu d'options et Gif Movie Gear est plus complet.

Etape 2.1:
Zoomez puis sélectionnez l'image 1 en prenant garde à bien coller au contour de couleur (sans laisser de blanc, quoi.)
Dans votre logiciel faites Edition -> Coller (Edit -> Paste).

Etape 2.2:
Sélectionnez de la même manière l'image 2 puis "Fichier > mettre les cadres à la suite", ou autre chose du même genre (File > Append Frames) [sur Animagic],

ou désélectionnez le premier cadre (en cliquant ailleurs) puis collez encore [Sur Gif Movie Gear ou autre du même type]
Répétez l'opération avec la même image (vous avez deux images 2 à la suite.)

Etape 2.3:
Sélectionnez l'image 3 dans Paint, copiez là de la même manière que les autres.
Dans le logiciel d'animation, sélectionnez l'image n°2 de la fin (la deuxième 2, si vous voulez, dernière de la liste),
puis collez votre image 3.
(quand on colle quelque chose, il se place avant la frame sélectionnée. Si aucune n'est sélectionnée, ça se met tout à la fin.)[sur les 2 logiciels]

Vous devez vous retrouver avec la séquence 1, 2, 3, 2.

Etape 2.4:
Si ce n'est pas déjà réglé, activez le mode "boucle":
Dans Animagic, c'est une flèche tournante verte (icônes en haut, vers la droite ),

Dans GMG, Cadre > Propriétés globales > onglet Animation > Nombre d'itérations: 0, ou encore mettre 0 dans le champ à droite

Etape 2.5:
Passons au réglage de la durée.

Dans Animagic: Animation > Délai des cadres (Animation > Frame Rate),
Clic gauche sur la frame voulue puis taper le délai en millisecondes, dans repeat: taper 1,
Faire pareil avec les autres cadres.
Si vous y retournez, vous verrez peut-être le délai changé, ainsi que le nombre de répétitions, c'est normal. Il se règle tout seul, il veut la durée pareille pour tous, c'est le nombre de répétitions qui change, n'y touchez pas.

Dans GMG: La barre d'icones la plus basse vous donne le numéro du cadre et sa durée à coté (en centièmes de secondes).
Clic simple sur le cadre puis tapez la durée dans le champ à droite de la petite pendule .


Derniers réglages:
Etape 2.6.a:
Couleur transparente:
Sur Animagic: icône pipette , puis cliquer sur votre couleur de contour, directement sur l'image.

Sur GMG: Cadre > Propriétés globales > Cocher "Transparent" > cliquer sur éditer puis, dans la nouvelle fenêtre sur votre couleur de contour.

Etape 2.6.b:
Méthode de suppression:
Sur Animagic: Cadres (Frame) > Méthode de suppression (Set Restore Mode) > bouton "tout sélectionner" (select all)> Choisir "retour à l'arrière plan" (restore to background), OK

sur GMG: Sélectionnez toutes les frames (touche Ctrl enfoncée et clic simple sur chaque),
Cadre > Propriétés > dernière option en bas: choisir "Couleur d'arrière plan" OK
Ceci pour éviter, si jamais on avait des silhouettes différentes, qu'elles apparaissent les unes sur les autres.

Etape 2.7:
Il ne vous reste plus qu'a sauvegarder votre oeuvre (de la même manière que sur n'importe quel logiciel, la petite disquette), et le tour est joué!

Deuxième méthode (plus fine et pas obligatoire):
Ceci vous permet de réduire la taille (et donc la vitesse de chargement) de votre gif.
Etape 2.6.c:
Maintenant, si vous avez un logiciel avec pas mal d'options type Gif Movie Gear:
Animation > Optimiser. Il le fait tout seul.
L'astuce, c'est la case "remplacer les pixels dupliqués par la transparence: il n'y a que les pixels qui changent qui se trouveront sur l'image, et qui s'afficheront sur l'image originale (l'option "retour couleur d'arrière plan" sera donc changée en "laisser tel quel").
Ceci peut réduire considérablement la taille du gif.
Vous, vous avez juste à faire OK puisque tout est coché. Ensuite n'oubliez pas de sauvegarder de nouveau.


Passons maintenant à quelque chose de plus compliqué, si vous possédez un logiciel qui n'a pas d'option "optimisation".
Le truc consiste à faire manuellement ce que GMG fait tout seul.
Entre l'étape 1.3.b l'étape 2.1.:
Etape 1.4:
Vous devez recouvrir de votre couleur transparente les parties qui ne changent pas.
Ne vous prenez pas là tête, faites ca grosso modo. Il faut juste faire attention de ne pas colorier ce qui change.
A peu près comme ceci:

Ensuite, procédez comme décrit plus haut, sauf pour la méthode de suppression (Etape 2.6.b), où il faut choisir "laisser tel quel" (Do not restore).

Et voilà, vous pouvez ensuite sauvegarder. Vous pouvez admirer votre oeuvre dans l'apercu du logiciel, dans l'aperçu des images ou dans votre navigateur web!



J'espère que ce tutorial ne vous semble pas trop compliqué, ce n'est pas évident à écrire, quand on le montre directement c'est plus facile.
Si vous avez des questions, n'hésitez pas.
N'hésitez pas non plus à "expérimenter" par vous-même, c'est encore comme ça qu'on apprend le mieux!