Faire un GIF animé très facilement !

Gif, qui signifie Graphics Interchange Format (format d'échange de graphiques), est un format d'image numérique que l'on rencontre fréquemment sur le Web, dans des logos ou images animées par exemple.

Origine du Gif :

"GIF a été mis au point par CompuServe en 1987 pour permettre le téléchargement d'images en couleur. Ce format utilise l'algorithme de compression LZW, nettement plus efficace que l'algorithme RLE utilisé par la plupart des formats alors disponibles." (Wikipédia)

Vous pouvez retrouver toutes les caractéristiques du Gif sur la page de Wikipédia indiquée ci-dessus, mais je ne vais pas m'y attarder car ce n'est pas le but de mon tutoriel. Retenez qu'un Gif peut avoir de nombreuses utilités et que vous gagnerez donc beaucoup à lire les quelques lignes de ce tuto .

Surtout de la fluidité dans l'animation, mais aussi une vitesse de conception qui rend la réalisation d'un Gif beaucoup plus rapide. En effet, si vous savez vous servir ne serait-ce que des bases de Flash, vous remarquerez qu'il est très aisé et rapide de faire une petite animation, que ce soit un personnage qui bouge ou un texte qui se dandine. Et l'avantage de Flash, c'est qu'on n'est plus obligés de travailler image par image, vous vous êtes sûrement déjà servi des interpolations, je présume.

Pour être concret, voilà un exemple vite réalisé pour vous montrer un rendu de Gif avec Flash :

Si le Gif ne s'anime pas, cliquez dessus !

Et maintenant si vous le voulez bien, nous allons passer à la pratique .

Pour commencer

Alors, c'est parti : ouvrez Flash, et un nouveau document. Sachez qu'un Gif peut demander beaucoup de ressources pour tourner de façon fluide, donc faites-les petits, de préférence. Pour cet exemple, j'ai choisi 60 x 60 pixels pour ma scène, mais vous pouvez mettre les dimensions que vous voulez.



Maintenant, faites votre animation . Je ne suis pas là pour vous apprendre à animer : je suppose alors que
vous savez le faire ; sinon, n'hésitez pas à lire des tutoriels à ce sujet pour maîtriser la chose. Bref, faites quelque chose de simple, à la limite rien qu'une boule qui avance ou un texte qui gigote, mon but est de vous montrer comment en faire un Gif.

Bien : n'hésitez pas non plus à augmenter la cadence de l'animation pour avoir un rendu plus fluide. Dans le cadre "Cadence" de la fenêtre des propriétés, remplacez le 12 par 30 pour avoir un lecture de 30 images par seconde, par exemple.

La transformation en Gif

Votre animation est prête ? Bien, enregistrez-la sous le nom que vous voulez (par exemple mon_gif.fla). Puis, attention ! Toute l'importance du tutoriel repose là-dessus, cliquez sur Ficher, Exporter et Exporter l'animation. Vous pouvez aussi faire directement Ctrl + Alt + Maj + S. Appelez maintenant votre animation mon_gif.gif, par exemple. Une nouvelle fenêtre va s'ouvrir :

• Dimensions : laissez 60 x 60 pour avoir un Gif de la même taille que l'animation (et donc non coupé).
• Résolution : 72 pixels par pouce est un bon compromis pour utiliser vos Gif sur le net, ou où vous voulez.
• Couleurs : je vous conseille de laisser les couleurs standard pour avoir le moins de perte possible de couleurs.
• Entrelacer : cela permet d'afficher l'image Gif dans un navigateur au fur et à mesure qu'elle est téléchargée, mais ne cochez pas cela dans le cas d'un Gif animé ! (Ce qui est notre cas.)
• Transparent : l'arrière-plan devient transparent, très utile pour des smilies ou des Gif que vous voulez insérer dans un site sans qu'un cadre n'apparaisse autour : je vous conseille vivement de le cocher !
• Lisser : applique l'anti-aliasing pour avoir une image de meilleure qualité et un texte plus lisible, cependant elle devient un peu plus grosse.. c'est comme vous préférez.
• Tramer les couleurs : cela s'applique à la combinaison de pixels de couleurs, je ne saurais pas trop vous expliquer cela et je vous recommande de faire des tests ; sachez simplement que ça augmente aussi la taille de votre Gif.
• Animation : le nombre de fois que vous voulez que votre animation se joue. 0, comme c'est précisé, permet de la jouer en boucle (c'est souvent le cas pour des Gif animés).

Un clic sur OK et voilà, votre Gif est prêt !

Autre méthode

Pour ceux qui ont soif de réglages, sachez qu'il existe une autre manière plus précise d'exporter vos Gif. Allez dans "Paramètres de publication", sélectionnez le format Image Gif et allez dans l'onglet "Gif" qui est apparu. Vous pourrez y régler des paramètres plus poussés comme bon vous semble, mais je ne les détaillerai pas ici car ce n'est pas le but de mon tutoriel, et parce que je ne connais pas exactement l'effet et l'origine des effets de chaque option .

Encore un exemple

Pendant que j'explique tout cela, j'ai confectionné un autre petit Gif qui peut vous montrer la fluidité que Flash leur procure, ainsi que ce que j'entendais par "transparence" (n'oubliez pas que vous pouvez très facilement utiliser ces Gif avec des logiciels tels que MSN).

..... Remarquez qu'il est de la couleur du fond du site, et cela serait le cas n'importe où ! (Encore une fois cliquez dessus s'il ne s'anime pas.)

Si vous utilisez Internet Explorer, l'animation sera saccadée... Je n'ai pas essayé les autres navigateurs, mais avec Firefox, le rendu sera bien plus agréable ; voilà encore une bonne raison de l'utiliser .