Décomposer les cartes d'un gif animé


Avec l'essor des cartes animées, il peut être utile d'avoir quelques rudiments pour composer ou décomposer des GIFs animés. Il existe de nombreux sites permettant de créer un GIF à partir d'images : Picasion, MakeAGif.com, Gifmaker.me. On peut aussi en fabriquer avec le logiciel gratuit Gimp (voir ce tutoriel). Ce billet a pour objectif d'apprendre à décomposer un gif animé déjà existant, une opération moins courante qui peut avoir son utilité.

Voici un tutoriel à partir d'un exemple : l'évolution du territoire américain depuis 170 ans (1789-1959).



Ce gif animé est issu du site Smithsonian.com. Cette animation est également disponible sur Youtube sous forme de vidéo.

Cette carte animée résume 170 ans d'évolution du territoire des Etats-Unis, de l'application de la Constitution américaine en 1789 jusqu'au rattachement de Hawaï en 1959. Les changements sont considérables, en particulier pour la Géorgie ou le Texas qui constituent d'abord de gigantesques étendues territoriales avant de se réduire progressivement. On peut voir également les divisions de la Nouvelle Espagne et les rétractions successives de l'état du Mexique, de son origine en 1821 à sa disparition en 1854. D'autres gif animés sont disponibles sur le site Vividmaps.com en ce qui concerne par exemple l'évolution de l'appartenance religieuse.

Le défilement, très rapide, ne permet guère de suivre les différentes étapes de construction du territoire américain. L'objectif est donc de décomposer le fichier en autant de cartes intermédiaires de manière à pouvoir faire des arrêts sur image, ce que ne permet pas un gif animé.

Solution 1 : utiliser un outil en ligne


Plusieurs sites proposent leurs services. Avantage d'une solution en ligne : il n'est pas nécessaire d'installer un logiciel sur son ordinateur. Le traitement est plus rapide. Inconvénient : le résultat peut cependant être de moins bonne qualité.

Blog gif : ce site permet de récupérer l'ensemble des frames (images) qui composent un GIF animé. Il suffit de parcourir son disque dur pour charger le fichier gif. Une option importante : cocher le bouton "Supprimer l'optimisation du GIF", sans quoi les résultats peuvent être surprenants. Une limite cependant : le site ne permet pas de décomposer plus de 50 images, ce qui est déjà important mais pas suffisant pour notre gif animé qui continent 97 images.

Gifs.com : cet outil a été conçu pour créer et éditer des GIF à partir d’une vidéo, qu'elle soit en provenance de YouTube, d'Instagram ou autre. Ce n’est pas mentionné, mais l’application gère aussi les pseudo GIF animés de Twitter (vidéo en MP4) en les convertissant en véritables images GIF. La sauvegarde nécessite de se créer un compte sur le site.

Ezgif : ce site est semblable dans son principe de fonctionnement aux sites précédents. Ezgif est néanmoins beaucoup plus puissant. Il n'est pas limité en nombre d'images et surtout il fournit des outils de retouche directement en ligne permettant de recadrer, de réagencer, de recalibrer les images selon un pas de temps plus lent ou plus rapide. On peut récupérer un gif animé depuis Twitter simplement en copiant-collant son URL. Les possibilités d'export comprennent des formats de fichier image ou vidéo :



 Solution 2 : utiliser un logiciel de retouche d'image

Plusieurs outils graphiques proposent ce type de fonctionnalité : GIMP, XnView, Photophiltre (version gratuite)... Inkscape ne gère pas nativement l'animation, mais il y a plusieurs moyens d'animer des images réalisées avec Inkscape, qui sont étudiées dans cette page.

Nous utiliserons le logiciel GIMP qui est libre et gratuit. De nombreux tutoriels sont disponibles pour apprendre à assembler ou désassembler les images d'un gif animé à l'aide de GIMP : voir par exemple ce tutoriel du CRDP d'Amiens ou encore ce pas à pas proposé par l'ABC du GIMP.

En ouvrant le fichier gif dans GIMP, le logiciel décompose automatiquement les images sous forme de calques. Il devient possible d'enregistrer chaque calque comme un fichier spécifique. Dans la fenêtre d'affichage des calques apparaît le nom de chaque ainsi que le temps de défilement indiqué en millisecondes (entre parenthèses) :

 
Il suffit de cliquer sur les propriétés du calque pour modifier ce temps de défilement puis de réenregistrer le fichier, si l'on veut conserver l'animation en gif. Attention : le changement de pas de temps alourdit considérablement le fichier. Il est donc conseillé d'optimiser le poids en utilisant le menu Filtres --> animation --> optimisation (GIF). A la fin, pour sauvegarder cliquer sur le menu Fichier --> Exporter sous --> format GIF (cocher la cas animation Gif). Deux possibilités s'offrent à vous : soit l'option "Calques cumulatifs (Combiner)", soit l'option "Une image par calque (Remplacer)" plus gourmande en poids.





Autres exemples de carte historique en GIF animé :

La guerre de Corée 1950-53 résumée en cartes (source : Le Monde)



  L'expansion de l'empire mongol de 1206 à 1294 (source : Brillants Maps)



La construction historique des pays d'Amérique du Nord entre 1750 et 1999 (source : Amazing Maps)



Il est possible de faire ce même travail de décomposition à partir de graphiques ou d'images. Voici par exemple un Gif animé sur la répartition de la population mondiale (1950 - prévisions 2100) montrant de manière dynamique l'explosion démographique de l'Asie puis de l'Afrique.


Source : http://www.visualcapitalist.com/animation-global-population-by-region-1950-2100/



Voici un autre GIF animé de Guy Abel qui permet d'étudier la dynamique et la répartition des flux migratoires mondiaux par grandes régions continentales entre 1960 et 2015 (l'animation peut mettre quelques secondes à s'afficher) :


Source : http://guyabel.com/post/animated-directional-chord-diagrams/


Le site Flowing Maps, dont la devise est "d'apprendre à visualiser des données du niveau débutant au niveau confirmé", propose un grand nombre de data visualisations, avec notamment des tutoriels pour créer des dataviz animées.

Le site Geolounge fournit un tutoriel pour créer des gifs animés à partir d'images satellitaires.

Le forum Reddit r/educationalgifs propose des gifs animés éducatifs, dont cette superbe infographie concernant les infrastructures dans le monde :



@PamelaChougne2 propose un tutoriel pour produire des gifs animés à partir de Photoshop et d'images d'un fabuleux bestiaire du XVIe siècle :
https://twitter.com/PamelaChougne2/status/1354463700795727882



 Comment le gif est devenu ringard. A moins qu'il ne revienne en force.
L'effet vintage des post-boomers ?


Articles connexes

Utiliser des graphiques animés pour donner à voir des évolutions et des ruptures

Comment différencier infographie et data visualisation ?

Ecrit par -