Table des matières. 10 Gimp et le Web. Option de traitement d'images Mémento pour la séance N o Création d'animation

Transcription

1 Université de NiceSophia Antipolis Semaine du 26 novembre 2007 Licence de Sciences de la vie, semestre 1 Option de traitement d'images Mémento pour la séance N o 8 Table des matières 10 Gimp et le Web Création d'animation Création d'animations plus élaborées Génération automatique d'étapes intermédiaires Déformation interactive Construction manuelle d'une animation Amélioration de l'animation Image de carte cliquable Gimp et le Web 10.1 Création d'animation Un des moyens de rendre une page Web attractive est l'utilisation d'animations. Il peut s'agir de chiers en codage GIF ou Png directement inclus dans la page et rendus visibles par le navigateur luimême, ou alors de chiers séparés, dans des codages vidéo tels que Mpeg ou AVI, et en général visionnés grâce à un outil séparé. Une animation est une séquence d'images ou trames d'animation. Ces images sont jouées dans l'ordre où elles se présentent, et selon l'information de synchronisation attachée à chacune d'elles. Gimp permet d'attacher une information de synchronisation à chaque calque, ce qui permet de considérer un calque comme une trame d'animation. Supposons par exemple que nous souhaitons acher Joyeux Noël (gure 1a page suivante) sur notre page Web de manière dynamique. Pour cela, il sut de créer une nouvelle image, avec un calque diérent pour chacune des lettres (gure 1b page suivante). Il est utile de renommer les calques pour rendre l'ensemble plus lisible. On ajoute ensuite une information de synchronisation (délai en millisecondes) à chaque nom de calque en utilisant la forme (XXXX ms). On peut ajouter cette information en double-cliquant sur la partie droite de chaque calque dans le dialogue des calques (gure 2a page suivante). Sans autre indication, tous les calques seront joués pendant la même durée, par défaut 100 ms. Gimp permet de jouer l'animation à l'aide de l'outil Image : Filtres Animations Rejouer Animation (gure 2b page suivante). La barre de progression montre l'état courant de la trame. Comme on peut le remarquer en jouant cet exemple d'animation, Gimp utilise par défaut le mode Combiner : chaque nouveau cadre est empilé sur le précédent. On peut aussi utiliser le mode Remplacer, qui au lieu de combiner les calques, remplace chaque calque par le calque suivant. Pour cela, il faut spécier ce mode en double-cliquant à droite du calque et en ajoutant (replace) à l'information de synchronisation (gure 3 page 3). Dans ce cas précis, on verrait déler les lettres, mais sans jamais voir le message entier. Les deux modes peuvent être employés ensemble. On peut le faire pour l'image de fond, décorée un peu plus richement, et remplacée au bout d'un moment par autre chose. 1

2 (a) Inscription Joyeux Noël (b) Un calque pour chaque lettre Fig. 1: (a) L'information de synchronisation est ajoutée à chaque calque (b) Le joueur d'animation de Gimp Fig. 2: Avant de sauvegarder le chier sous forme de GIF animé, il faut le convertir en mode indexé à l'aide de la fonction Image : Image Mode Indexer. La boîte de dialogue Conversion de couleur en mode indexé s'ouvre alors (gure 4 page suivante). On peut se contenter des options par défaut pour cette conversion, qui prend un temps proportionnel au nombre de calques. Après la conversion en mode indexé, on peut sauvegarder l'image dans le codage GIF à l'aide de la fonction Enregistrer sous du menu principal. Une boîte de dialogue Exporter chier va alors s'ouvrir (gure 5 page 4), dans laquelle il faut cocher l'option Enregistrer commme une animation, et enn en cliquant sur le bouton Exporter, une dernière boîte de dialogue Enregistrer en Gif s'ouvre (gure 6 page 4). Par défaut, l'animation fait une boucle ininterrompue. Le résultat apparaît sur le site dans 2

3 Fig. 3: Les calques en mode remplacer Fig. 4: Dialogue de la conversion en couleurs indexées 10.2 Création d'animations plus élaborées Génération automatique d'étapes intermédiaires Supposons que nous voulons voir une image oue devenir progressivement de plus en plus nette. Construire manuellement dans des calques intermédiaires des copies de l'image avec un degré de ou de plus en plus faible est assez fastidieux. En fait, si l'on s'aperçoit en utilisant un ordinateur qu'on eectue une tâche répétitive, c'est à peu près certainement qu'on utilise mal l'ordinateur. Ici, Gimp fournit l'outil voulu avec la commande Image : Filtres Filtrer tous les calques. On part de l'image de la gure 7 page suivante. On duplique le calque de l'image autant de fois qu'on désire d'étapes intermédiaires (gure 8a page 5), puis on ouvre le dialogue de ce ltre (gure 9 page 5). Ici, on choisit un ou gaussien. On xe les paramètres du premier calque, comme le montre la gure 8b page 5. Le ltre demande 3

4 Fig. 5: Dialogue de l'exportation Fig. 6: Dialogue de la sauvegarde en GIF Fig. 7: Image de départ 4

5 (a) Duplication des calques (b) Paramètres appliqués au premier calque Fig. 8: Fig. 9: Dialogue du ltre de ltrage de tous les calques alors de passer au dernier calque (gure 10a page suivante). On xe alors les paramètres du dernier calque, comme le montre la gure 10b page suivante. Le ltre demande où ranger les chiers intermédiaires produits pendant l'application non interactive aux calques intermédiaires (gure 11a page suivante). Il faut donc choisir un nom de dossier, dont la seule propriété importante est qu'il n'existe pas déjà si on ne veut pas en remplacer le contenu. Il reste enn à sauvegarder l'image en codage GIF, sous la forme d'une animation. Le résultat apparaît sur le site dans Déformation interactive Le ltre Image : Filtres Distorsions Déformation Interactive permet de déformer interactivement des parties de l'image et de produire une animation à partir de l'image originale déformée. La gure 11b page suivante montre des pucerons sur une feuille de rose. La gure 12 page suivante montre la boîte de dialogue pour le ltre de Déformation interactive. L'onglet Paramètres vous permet de 5

6 (a) Passage au dernier calque (b) Paramètres appliqués au dernier calque Fig. 10: (a) Filtrage non interactif des autres calques (b) Des pucerons sur une feuille de rose Fig. 11: Fig. 12: Dialogue du ltre de déformation interactive 6

7 Fig. 13: Réglage de l'animation régler le ltre. Le Rayon de déformation règle la taille de l'eet de déformation et Quantité de déformation permet de régler l'intensité de celui-ci. On peut alors choisir un type de déformation : Déplacer, Agrandir, Tourbillon sens anti-horaire, Enlever, Réduire, Tourbillon sens horaire. On doit ensuite indiquer la zone de déformation à l'aide de cliqués-glissés (typiquement avec le stylet). Il faut enn dénir l'animation à l'aide de l'onglet Animer de la boîte de dialogue (gure 13). On sélectionne l'option Animer et on spécie le nombre d'images à employer pour l'animation. L'option Inverser va de l'image originale vers l'image déformée. L'option Ping-pong va de l'image originale à l'image déformée puis revient à l'image originale. Une barre de progression en-dessous de l'image montre l'évolution de la création de la déformation. Pour visualiser l'animation, il faut la jouer avec l'outil Image : Filtres Animations Rejouer Animation. Attention à ce ltre, si on l'applique à une image de grande taille et qu'on fait calculer un grand nombre de trames, le travail est très long. Le résultat obtenu ici apparaît sur le site dans Construction manuelle d'une animation Gimp permet avec des outils simples de faire des animations plus élaborées que celles que nous venons de faire. Le travail est cependant très long, puisque une seconde d'animation nécessite une douzaine d'images : en eet, même si le cinéma produit normalement 24 images par seconde, on accepte en animation de n'en produire que 12 et de dupliquer chacune d'elles. Heureusement, une animation pour une page Web n'a pas besoin d'être ni très longue ni très compliquée. Pour déplacer un objet sur un fond, on peut procéder de la manière suivante : obtenir plusieurs vues de l'objet sous divers angles ; prévoir la trajectoire de l'objet ; choisir pour chaque point la vue de l'objet, son échelle et son orientation ; placer chaque vue de l'objet sur un calque séparé ; fusionner chaque calque avec une copie du fond. Par exemple, on veut montrer l'animation d'un hydravion amerrissant sur les côtes de l'estérel (gure 14a page suivante). Pour cela, il faut chercher sur le Web plusieurs vues du même hydravion (gures 14b page suivante à 16b page 9). On doit extraire de chaque vue l'hydravion lui-même, par 7

8 (a) Image de fond (b) Première vue Fig. 14: (a) Deuxième vue (b) Troisième vue Fig. 15: exemple par un premier dégrossissage avec l'outil lasso (gure 17 page suivante), suivi d'un ranement de la sélection à l'aide d'outils plus précis (gure 18 page 10). Il faut ensuite sélectionner ces diérentes vues et transformer chacune d'elles en calque. Pour représenter la trajectoire de l'avion, on utilisera les outils de transformation et de déplacement. On peut utiliser plusieurs fois la même vue, avec des modications simples compatibles avec le déplacement prévu. Pour l'image de fond, on peut par exemple créer un calque initial avec un eet de scintillement avec l'outil Filtres : Eets de Lumière Supernova pour rendre l'animation plus spectaculaire. Pour créer l'animation désirée, ni le mode Combiner, ni le mode Remplacer ne conviennent. Il faut en fait donner à chaque calque une copie du calque de fond. Cela se fait rapidement par utilisation des boutons de la fenêtre des calques. On rend actif le calque de fond, on le duplique et on le monte d'une position. Répéter ensuite ces deux dernières actions autant de fois que nécessaire. Chaque copie est fusionnée avec le calque correspondant, ce qui se fait également très rapidement par l'action Calques : Fusionner vers le bas pour chacun des calques comportant un avion. (gure 19a page 10). On peut 8

9 (a) Quatrième vue (b) Cinquième vue Fig. 16: Fig. 17: Premier dégrossissage au lasso maintenant ajouter l'information de synchronisation et jouer l'animation. La fonction Image : Filtres Animation Optimiser (pour GIF) permet de sauvegarder l'animation en prenant en compte la redondance d'information entre les diérents cadres d'animation. La gure 19b montre que les nouveaux calques ne contiennent que la partie variable, et sont en mode combiner. Cela permet de réduire la taille du chier résultant, qui dans notre cas passe dans sa forme en XCF de 16 Mo à 3,1 Mo. La conversion nale en GIF produit un chier de seulement 318 Ko, ce qui est acceptable pour une page Web. On trouvera sur le site le chier initial dans hydravion.xcf, le chier optimisé dans xcf et le chier en GIF dans De toutes manières, une animation est toujours assez encombrante, puisque la taille de l'image animée est multipliée par le nombre de cadres. On peut avoir intérêt à utiliser la compression au vol que permet Gimp : si l'on ajoute le suxe.gz au nom d'un chier au moment de sa sauvegarde (par exemple 9

10 Fig. 18: Ranement des sélections (a) Calques après duplication du fond (b) Calques après optimisation Fig. 19: hydravion.xcf.gz), alors Gimp utilise l'outil de compression gzip, qui peut diviser par trois la taille du chier. Plus tard, au moment de l'ouverture du chier adns Gimp, ce dernier reconnaît la forme du nom et eectue la décompression au vol Amélioration de l'animation L'animation produite précédemment est tout juste acceptable pour une page Web, car elle est beaucoup trop saccadée. Produire indépendamment chacune des trames nécessaires serait beaucoup trop long, et malheureusement le ltre Filtrage de tous les calques ne convient pas, puisque l'image initiale et l'image nale de chaque séquence ne sont pas produites par ltrage. On peut alors recourir à l'extension de Gimp appelée Gimp-GAP (Gnu Animation Package), dont fait d'ailleurs partie le ltre de ltrage de tous les calques, vu en sous-section Cette extension permet de : construire automatiquement les trames intermédiaires entre deux positions ; 10

11 (a) Image de départ (b) Duplication du calque inférieur Fig. 20: choisir les transformations sur le trajet ; combiner des segments de trajet successifs. On doit partir d'images séparées pour les trames, et dont le nom est de la forme nom xcf. Les outils fournis permettent les transformations entre diverses représentations. On part d'une image xe, formée de trois calques, que montre la gure 20a. Par copie du calque d'arrière-plan dans une nouvelle image, on obtient la base de l'animation. Il faut sauvegarder cette image en codage XCF et l'appeler d'un nom de la forme nom xcf. On a intérêt à la sauvegarder ainsi dans un classeur qui lui est réservé, parce que les trames créées vont être placées dans ce classeur. Il faut produire le nombre d'images nécessaires pour construire la séquence d'animation, ce qu'on peut faire de deux manières diérentes : En dupliquant ce calque 19 fois puis en eectuant la commande Image : Vidéo Scinder un chier multicalque en images, on obtient les 20 images de l'animation, nommées de la manière voulue. Notons que la manière de nommer les calques obtenus par duplication conduit à un nom interminable de la forme Copie de copie de... et qu'il est préférable de renommer tous les calques : si on le fait en choisissant chaque fois le même nom, Gimp ajoute un suxe de la forme # nombre. C'est ce qui a été fait dans la gure 20b. On peut aussi dupliquer directement l'image de départ avec la commande Image : Vidéo Dupliquer des images. Le résultat est plus vite obtenu, puisque les images sont directement nommées sous la forme voulue. Sauf cas particulier, c'est donc la méthode la meilleure. On peut alors ouvrir le dialogue Image : Vidéo Animation selon un chemin, que montre la gure 21 page suivante. Il faut noter qu'on l'ouvre depuis l'image aux 20 calques de fond, et que l'image contenant les calques à animer est ouverte à côté. Dans ce dialogue, on choisit : le calque à animer (image source), ici le logo ; le mode d'utilisation des calques de l'image source ( mode pas ), ici aucun puisqu'on ne prend qu'un seul calque de l'image source ; les paramètres du point de départ : coordonnées, facteurs d'échelle, opacité, rotation, perspective, etc. 11

12 Fig. 21: Dialogue principal de l'animation selon un chemin Ici, nous avons choisi de déplacer le texte du calque inférieur en partant d'une position où il a subi une rotation, une réduction d'échelle et une réduction d'opacité. On ajoute un point et on choisit les paramètres du point d'arrivée, qui concerne donc la dernière image de la séquence de 20. On peut visionner l'animation et la modier. En particulier on pourrait, ce qui n'est pas le cas ici, déterminer les paramètres dans des positions intermédiaires, correspondant à des images de la séquence. La validation produit la séquence d'images. On peut la visualiser grâce à la commande Image : Vidéo Magnétoscope. Le dialogue de la gure 22 page suivante permet en particulier de voir les images trame par trame, ou de visualiser l'image entière, comme le montre la gure 23 page suivante. On peut alors recommencer avec l'autre calque. En eet, notre animation est formée de deux objets qui se déplacent indépendammant, plus le calque de fond. On a toujours ouverte l'image xe initiale avec ses trois calques. On part de la suite de trames créées par l'application précédente, et on rappelle l'outil Image : Vidéo Animation selon un chemin. On choisit cette fois-ci comme image source le dernier calque de l'image de départ, et on lui fait subir d'autres transformations. Le Mode pas doit toujours être Aucun, puisqu'on n'utilise que ce seul calque de l'image source. On obtient une nouvelle animation, qui combine dans ses trames les deux parties du logo, issues de deux calques diérents. Chaque partie correspond à un calque, et chaque trame de l'animation comprend donc trois calques. Beaucoup de transformations sont possibles à partir de l'animation obtenue, et il n'est pas question de détailler toutes les possibilités de Gimp-GAP. On pourrait convertir cette animation en un chier en codage Mpeg ou AVI, eectuer de nombreuses opérations sur les trames, etc. On a en fait un véritable outil de construction d'animations, utilisable de manière semi-professionnelle. Ici, puisqu'on désire construire une animation très simple sous la forme d'un chier GIF, on peut se 12

13 Fig. 22: Dialogue du magnétoscope Fig. 23: Lecture des images dans le magnétoscope 13

14 Fig. 24: Dialogue de l'outil Carte d'image cliquable contenter de transformer la séquence de trames en une image multi-calques par la commande Image : Video Images vers chier multicalque. Cette image peut alors être sauvegardée en codage GIF, qui permettra l'animation sur une page Web. On commence par appliquer la fonction Image : Filtres Animation Optimiser (pour GIF). Le temps de présence de la dernière trame est augmenté, car le temps proposé par défaut par Gimp-GAP est de seulement 41ms. Bien sûr, on n'oublie pas de sauvegarder l'ensemble des calques comme une animation. Le résultat apparaît sur le site dans unice.fr/~ol/l1sv/logo.gif Image de carte cliquable L'image de carte cliquable est une image accompagnée d'hyperliens multiples associés à diérentes zones de cette image. C'est un outil graphique commun sur le Web. Il est très pratique comme moyen de navigation vers d'autres pages Web. Un exemple d'utilisation est par exemple une carte touristique de la France. Un clic sur chaque région de la France amène à une page concernant des informations touristiques précises sur cette région. Créer une image de carte cliquable est un travail coûteux et assez lourd, car il faut dénir pour chaque hyperlien la région (le polygone) de l'image qui l'active lors d'un clic à la souris. Gimp permet cela à l'aide de la fonction Image : Filtres Web Image cliquable (imagemap). La boîte de dialogue de la gure 24 s'ouvre alors. Cet outil ore la possibilité de dénir les diérents polygones en dessinant directement sur l'image. L'outil permet d'ajouter les liens hypertextes ou les javascripts aux régions sélectionnées, et il produit automatiquement le chier HTML correspondant. À la gauche de la fenêtre, se trouve le canevas de dessin montrant l'image pour laquelle la carte est créée. La barre d'outils à gauche du canevas permet de dessiner les contours des régions qui deviendront les zones cliquables : rectangles, ellipses ou polygones fermés. On peut modier ces régions à l'aide d'un clic droit sur le point à modier. Dans le cas du polygone, sa construction se termine par un double-clic avec le bouton gauche de la souris. Pour le rectangle et l'ellipse, la construction se termine au deuxième clic. Une boîte de dialogue paramètres s'ouvre alors. C'est ici que l'on dénit le lien vers une autre page web. La gure 25 page suivante montre la partie où l'on dénit le lien, et la gure 26 page suivante montre l'onglet qui donne les caractéristiques du polygone construit. Les diérentes pages d'index des photos du site de cet enseignement sont toutes construites à l'aide de cet outil. 14

15 Fig. 25: Dialogue de l'outil Carte d'image cliquable avec sélection Fig. 26: Paramètres de la region sélectionnée 15