par Chrystian Guy

On en voit partout! Les GIF animés envahissent le web. En fait, ils sont là depuis longtemps, mais avec l'apparition d'outils de création de GIF animés, on en rencontre de plus en plus. Cette semaine, je vais vous démontrer comment réaliser un GIF animé simple et surtout comment faire en sorte qu'il ne soit pas trop lourd.

GIF animé, une définition :

Un GIF animé est tout simplement une séquence de plusieurs images; le même principe qui s'applique pour tous les types d'animation. Pour appeler une image en code html, il faut utiliser la commande suivante :
      <img src=¨nom-image.gif¨>
et si vous essayez d'appeler plus d'une image :
      <img src=¨nom-image1.gif¨>
      <img src=¨nom-image2.gif¨>
      <img src=¨nom-image3.gif¨>
celles-ci s'afficheront l'une après l'autre, mais sans se superposer. Ceci à cause du langage HTML qui ne permet pas les boucles et qui affiche l'information en séquence, ligne après ligne. Alors, comment faire pour appeler une seule image et faire en sorte que d'autres s'y superposent? Il suffit d'incorporer toutes les images de la séquence en un seul fichier GIF. Et pour ce faire, ça prend un logiciel spécial… Un GIF animé est donc un fichier qui contient plusieurs GIF.

Les ingrédients d'une bonne recette

Avant de vous lancer dans la création du GIF animé, il faut avoir en sa possession toutes les images nécessaires. Vous pouvez créer toutes vos images avec n'importe quel logiciel de retouche de photo; on en trouve beaucoup ici. Pour mon exemple de cette semaine, j'ai besoin des éléments suivant :

J'ai donc un cadre, qui me servira de fond, un logo de Megagiciel et trois chiffres. Toutes les images sont en format GIF. Pour les assembler, j'utiliserai le logiciel GIF Animator 4.0 de Ulead.

Préliminaires :

Afin de déterminer la grandeur de notre GIF animé, nous allons ajouter le cadre en premier (l'image la plus grande); pour ce faire il faut utiliser la commande Add Images du menu Layer :

Notre fenêtre de paramètres ressemble donc à celle-ci (il faut sélectionner Global Information) :

1. Choisir Global Information fait apparaître ces informations, remarquez aussi 2 : cadre.gif que nous venons d'insérer
2. Les dimension se sont ajustées automatiquement à celle de cadre.gif
3. La palette globale est celle qui sera utilisée pour optimiser les images (nombre de couleurs). N'y touchez pas pour l'instant, nos images sont déjà optimisées.
4. La couleur du fond devrait être celle la plus proche de celle de notre image de fond (cadre.gif). Pour des raisons obscures, certains navigateurs ont besoin de cette information pour bien afficher les images.
5. Le nombre de boucles à effectuer. Lorsque Infinite est sélectionné, l'animation recommencera sa séquence à l'infini (en fait, 65535 fois…)

On peut maintenant commencer l'animation!

1. Choisir cadre.gif fait apparaître ces informations
2. Puisque cadre.gif nous sert d'image de fond, choisissez DO NOT REMOVE, pour ne pas que l'image soit remplacé
3. Sélectionnez le délai d'affichage, ici 0 pour passer immédiatement à l'autre image

Il faut maintenant ajouter les quatre autres images. Il faut donc refaire la première étape que nous avons fait pour cadre.gif. Commencez par 3.gif, ensuite 2.gif, 1.gif et enfin megagiciel.gif.

Lorsque vous essayez d'insérer 3.gif, une fenêtre vous demande de choisir la palette à utiliser pour cette image:

1. Choisissez Local Palette, de cette façon, le nombre de couleurs de 3.gif (8) sera utilisé et non la palette globale (16).
2. Appuyez sur Insert pour insérer l'image. Assurer-vous d'avoir cliqué sur la dernière image dans la liste (ici, cadre.gif) pour insérer la nouvelle image à sa suite.

À l'aide de votre souris, centrez 3.gif dans le cadre (à droite), comme ceci:

Faites de même pour 2.gif et 1.gif et choisissez un délai d'affichage de 100 pour chacun. Enfin, ajoutez megagiciel.gif de la même manière et choisissez un délai de 300.
Il ne vous reste plus qu'à sauvegarder votre animation. Appelons-la animation1.gif. Pour voir le résultat, ouvrez-la avec un navigateur, avec la fonction Fichier, Ouvrir (*.*)

La voici!

Vous remarquerez que notre animation fait à peine plus de 4Ko. C'est parfait! Pour optimiser la taille de vos fichiers, assurez-vous de ne pas utiliser trop de couleurs inutilement. Par exemple, cadre.gif ne possède que deux couleur (blanc et noir), il n'est donc pas nécessaire d'utiliser une palette de 8bit (256 couleurs). Par contre, megagiciel.gif est une image plus riche, nous l'avons donc sauvegardée en mode 6bit (64 couleurs). Aussi, 3.gif est de dimension 50x50 pixel, il n'est donc pas souhaitable d'utiliser la grandeur maximale du cadre (cadre.gif 183x54): il suffit de prendre une image de réellement 50x50 et de la centrer comme nous l'avons fait dans notre exemple.

Pour plus d'information sur l'optimisation des images, consultez ma chronique du 11 juillet: Économie de bits.

Attention! Si vous ouvrez animation1.gif dans un éditeur standard, vous allez perdre toutes les images qui suivent la première, puisque votre éditeur d'image ne "verra" que la première image. N'ouvrez des GIF animés que dans des éditeurs prévus à cet effet.

La semaine prochaine, je réponds à vos questions. Écrivez-moi!