par Yves Piguet , IA-DGM

Depuis un peu plus d'une année, quiconque se balade sur le Web a pu constater la prolifération d'animations de toutes sortes: logos, publicité, division de cellules, cartes météorologiques... Après l'apparition des images il y a quatre ans, les animations étaient la suite logique du progrès en matière de multi-média.

En ce qui concerne les images, deux formats se sont imposés: GIF, efficace pour celles comportant un nombre limité de couleurs, qui reste très répandu malgré certaines restrictions imposées par le propriétaire de son algorithme de compression LZW; et JPEG, qui autorise un fort taux de compression pour les photographies au prix d'une dégradation souvent imperceptible s'il est bien utilisé. Le format GIF possède un certain nombre d'options particulièrement intéressantes pour le Web. L'entrelacement consiste à changer l'ordre des lignes pour permettre l'affichage rapide d'une première ébauche suivie d'améliorations successives. La transparence de certains pixels donne l'apparence d'une forme quelconque se détachant sur le fond de la page. Enfin, depuis que Netscape (suivi de Microsoft) a amélioré la compatibilité de son décodeur avec le standard GIF fin 1995, on peut créer des animations en ayant plusieurs images par fichier GIF. Le succès des animations GIF est considérable. Les avantages des GIF sont préservés: tous les serveurs et la plupart des browsers les supportent sans aucune configuration spéciale, et ils sont très faciles à créer et à placer dans un document HTML. Leurs inconvénients sont aussi conservés: pour des films vidéo, il vaut mieux utiliser MPEG ou QuickTime, dont le taux de compression est bien supérieur et qui permettent d'ajouter une piste sonore. Pour les GIF animés, les deux programmes les plus anciens sont encore les plus utilisés. Sur PC, il s'agit de GIF Construction Set (shareware), qui nécessite certaines connaissances de la structure interne du format GIF. Les utilisateurs de Mac utilisent pour la plupart GifBuilder (freeware). Le but de cet article est de montrer à quel point ce dernier est facile à utiliser.

Pour résumer, tout ce que vous avez à faire est de créer un fichier par image avec votre éditeur graphique préféré, puis faire glisser les icônes correspondantes du Finder à la fenêtre de GifBuilder, éventuellement changer quelques options, prévisualiser l'animation pour vérifier qu'elle correspond à vos désirs, et enregistrer le tout. Le résultat peut être utilisé comme n'importe quel autre fichier GIF. Voyons cela en détails avec la dernière version en français, GifBuilder 0.5 F.

Création de l'animation

1

Utilisez n'importe quel logiciel graphique pour dessiner les images. Enregistrez chacune d'entre elles au format PICT (ou picture), GIF, TIFF ou Photoshop dans le même dossier pour faciliter leur utilisation.

2

Lancez GifBuilder. Pour partir des mêmes options que nous, choisissez Options/Options d'usine.

3

Vérifiez que les fenêtres Images et Sans-titre.gif sont ouvertes. Si tel n'est pas le cas, choisissez Fenêtres/Images et Fenêtres/Prévisualisation. Si vous avez déjà ouvert une animation, choisissez Fichier/Nouveau.
Dans GifBuilder, une seule animation peut être ouverte à la fois. Les fenêtres peuvent être ouvertes ou fermées; contrairement aux logiciels basés sur des documents, le fait de fermer une fenêtre ne fait que la cacher et ne perd jamais d'information.

4

Faites en sorte que la fenêtre Images de GifBuilder et le dossier contenant vos images dans le Finder soient visibles. Que GifBuilder ou le Finder soit actif n'a pas d'importance.

5

Sélectionnez vos images dans le Finder et faites-les glisser dans la fenêtre Images. Le nom des fichier est affiché et la première image apparaît dans la fenêtre de prévisualisation (figure 1).
Votre Mac peut être configuré pour cacher le Finder lorsqu'une autre application est active. Cela rend le transfert des images du Finder à GifBuilder plus difficile. Vous pouvez afficher le Finder en choisissant l'option correspondante dans le tableau de bord Général.

Fig. 1: les images ont été créées avec Photoshop et enregistrées en TIFF. Pour les importer dans GifBuilder, on les a fait glisser du Finder à la fenêtre «Images».

6

Suivant comment les fichiers sont triés dans le Finder, les images peuvent être dans le désordre. Il y a plusieurs moyens de les remettre dans l'ordre. Tout d'abord, vous pouvez déplacer les images dans la fenêtre Images en les faisant glisser. Pour sélectionner plusieurs images, enfoncez la touche Majuscule (pour une sélection continue) ou Pomme (pour une sélection quelconque). Vous pouvez aussi trier les images sélectionnées par ordre alphabétique ou inverser leur ordre avec Edition/Trier la sélection et Edition/Inverser la sélection.
A ce stade, vous pourriez choisir Fichier/Enregistrer pour avoir une animation prête à l'emploi. Mais avant de le faire, changeons quelques options.

7

Dans la fenêtre Images, la première colonne indique normalement le nom des images. Pour afficher une vue réduite des images, choisissez Fenêtres/Montrer les images. Les colonnes suivantes montrent les options associées à chaque image. Elles correspondent au deuxième groupe du menu Options.
Pour changer d'option, sélectionnez une ou plusieurs images, puis changez un paramètre dans le menu Options (figure 2).

Fig. 2: menu Options

Commençons par l'attente entre chaque image. Choisissez Edition/Tout sélectionner, puis Options/Attente inter-image. Une boîte de dialogue apparaît. Evitez une attente aussi courte que possible, car cela risque d'aller vraiment trop vite sur un ordinateur moderne.

8

Quand l'animation est téléchargée sur le Web, sa vitesse est déterminée principalement par la vitesse du réseau. De plus, elle va commencer à s'animer avant que la page ne soit totalement affichée. Pour permettre au cybernaute de jouir de votre animation dans des conditions optimales, il vaut mieux répéter l'animation quelques fois ou indéfiniment. Choisissons cette dernière option avec Options/Répétitions.
Vous pouvez maintenant prévisualiser l'animation en choisissant Animation/Démarrer.

9

Suivant la façon dont vous avez créé les images, il se peut que les dessins ne soient pas parfaitement alignés, ce qui provoque un sautillement. Arrêtez l'animation avec Animation/Stop. Pour aligner la seconde image sur la première, sélectionnez-la dans la fenêtre «Images», puis faites glisser l'image dans la fenêtre de prévisualisation. Si vous maintenez la touche Option enfoncée, vous verrez l'image précédente par transparence.

10

Lorsque vous créez une nouvelle animation, sa taille est déterminée par la taille et la position des images. Ce mode automatique est indiqué par des parenthèses autour de la taille de l'animation dans la fenêtre Images. Vous pourriez la changer avec Options/Taille de l'animation, mais il y a plus pratique. Maintenez la touche Control enfoncée, et sélectionnez dans la fenêtre de prévisualisation la zone que vous voulez conserver. Si vous n'êtes pas satisfait, cliquez à l'extérieur du rectangle pour annuler, ou déplacez-le avec Control-touche de curseur. Vous pouvez lancer l'animation pour vérifier que tout est parfait. Cliquez à l'intérieur du rectangle pour accepter la nouvelle taille. Vous pouvez toujours utiliser Edition/Annuler si vous vous ravisez...

11

Pour enregistrer l'animation, choisissez Fichier/Enregistrer. La plupart des browsers préfèrent les noms de fichier sans espace ni caractère bizarre et se terminant par «.gif». Mettez le fichier dans le même dossier que le document HTML qui l'utilisera pour faciliter la suite.

Transitions

En dessinant chaque image à la main, vous pouvez obtenir exactement la séquence que vous voulez, mais au prix de beaucoup de travail. GifBuilder peut créer lui-même les images intermédiaires pour assurer une transition fluide entre deux images.

12

Sélectionnez une ou plusieurs images. Les images de transitions se basent sur chaque image sélectionnée et l'image précédente. Ne sélectionnez la première image que si l'animation se répète.

13

Choisissez Effets/Transitions/Effeuiller, l'une des animations les plus riches en options (figure 3).

Fig. 3: options pour l'effet «Transition/Effeuiller»

Le nombre de pas vaut un de plus que le nombre d'images intermédiaires. Au dos de l'image qui est enlevée, vous pouvez conserver des traces de l'ancienne image (qui serait visible à travers la feuille) ou de la nouvelle image (qui aurait déteint). Ces traces sont atténuées et combinées avec une couleur uniforme que vous pouvez choisir. L'intensité de cette couleur est spécifiée par la valeur alpha, qui peut prendre n'importe quelle valeur entre 0 (ancienne ou nouvelle image) et 255 (couleur uniforme).

Fig. 4: image intermédiaire ajoutée par la transition «Effeuiller»

14

Cliquez sur OK, et les images intermédiaires sont ajoutées avec l'attente inter-image par défaut (figure 4).
Comme seules les images intermédiaires sont sélectionnées, vous pouvez facilement changer cette attente si vous le désirez.
Remarquez que les nouvelles images sont en italique. Cela signifie qu'elles n'existent qu'en mémoire vive, contrairement aux images en romain correspondant à des fichiers sur disque. Vous pouvez toujours éditer une image sur disque en double-cliquant son nom, ce qui l'ouvre dans le logiciel qui l'a créée; pour les autres, vous devez les copier-coller pour les retoucher.

15

Enregistrez le résultat en choisissant Fichier/Enregistrer.

Options avancées

Avant de voir comment insérer les animations dans un document HTML, il est utile de donner quelques conseils sur l'utilisation d'options qui ont une grande importance sur le résultat. L'entrelacement est à éviter pour les animations, car il détruit totalement leur fluidité. Les GIF, animés ou non, utilisent des palettes de 2 à 256 couleurs. Comme de nombreux ordinateurs sont aussi limités dans le nombres de couleurs qu'ils peuvent afficher simultanément, il est conseillé de se limiter à la palette standard utilisée par la plupart des browsers pour éviter des changements aux résultats souvent catastrophiques. Cette palette est nommée «Palette 6x6x6» dans GifBuilder, en référence aux six valeurs que prend chacun des canaux rouge, vert et bleu. Pour réduire le nombre d'octets transférés sur le réseau, on peut charger GifBuilder de trouver la plus petite palette qui contient le sous-ensemble des couleurs utilisées en activant Options/Couleurs/Supprimer les couleurs inutilisées. Enfin, la méthode d'effacement spécifie ce que devient chaque image lorsque la suivante est affichée. Pour des images sans transparence, Ne pas effacer est recommandé; conjointement à l'option Optimisation des images, elle permet de réduire considérablement la taille de l'animation en n'enregistrant que les parties qui ont changé d'une image à l'autre. Réafficher le fond est utile pour les animations à fond transparent. Dans ce cas, vous pouvez choisir la couleur des pixels qui sont remplacés par le fond de la page HTML.

Document HTML

Si vous avez déjà inséré des images dans vos documents HTML, vous savez comment utiliser une animation GIF. Ajoutez le code suivant à l'endroit où vous voulez faire apparaître l'animation:

set s to "x=pi*(0:0.01:2);plot(cos(2*x+phi),sin(3*x));axis off"
repeat with i from 0 to 39
     tell application "MATLAB"
               activate
          DoScript "phi=0.05*pi*" & i & ";" & s
          Copy
     end tell
     tell application "GifBuilder"
          activate
          paste
     end tell
end repeat

Enfin, un dernier conseil: n'abusez pas des animations et limitez leur taille à des valeurs raisonnables. Les surfeurs australiens apprécieront.

NB: pour les personnes hors EPFL qui désirent se procurer le GifBuilder, il est sur un serveur ftp anonyme:

ftp iaftp.epfl.ch
... 
cd Software

1. GifBuilder est disponible sur Cyclope dans Applications:Imagerie.

2. Pour éviter tout malentendu, il est utile de préciser que l'auteur de GifBuilder et celui de cet article ne font qu'un.

retour au sommaire du Flash informatique no 6/97

retour à la page principale des Flash informatique

Vos commentaires

© FI-6 du 17 juin 1997