Création de Gif animés


Avant toute chose, je vous recommande très fortement de vous licencier au remarquable logiciel, très primé d'ailleurs, de Visicom Media, à savoir : "Gif Movie Gear" ! Pour les licenciés, il vous est possible de télécharger dans la page des ressources de Visicom Media un tutoriel le concernant...
De plus, un forum de discussion sur Gif Movie Gear vient d'être créé sur le site de Visicom pour vous aider à résoudre vos problèmes et/ou à aider d'autres internautes : forum

Vous pouvez apprendre néanmoins ci-dessous comment créer des Gif animés avec le petit programme gratuit fourni par Microsoft (Microsoft GIF Animator).

Téléchargez directement celui-ci sur le site, dans la page "Download" ou directement ici (gifsetup.exe) si vous désirez employer ce logiciel pour commencer...

Quelque soit le logiciel spécialisé que vous allez employer, le principe des Gif animés est le même et assez simple en fait !Il suffit de prendre plusieurs images qui vont se suivre, dans un délai que vous choisissez et qui vont créer ainsi une animation (principe du dessin animé...).

Voici l'écran d'accueil de Microsoft GIF Animator :

Comme vous le constatez, vous avez différentes options classiques. la première chose, évidemment, c'est d'avoir à sa disposition les différentes images qui vont constituer l'animation : soit vous les créez vous-mêmes (du texte ou des images) par un programme graphique ou vous les téléchargez (pour autant qu'elle soit libres de droit).

Je vous conseille d'ouvrir (icône dossier) le programme par la dernière image de l'animation, car nous allons incorporer les autres en ordre décroissant : la dernière d'abord, ensuite les autres, pour arriver à la première image. Dans l'exemple que je prends ici (le téléphone qui se trouve dans le menu de Page-Web), il n'y aura que deux images, mais le principe reste le même pour plusieurs images ou textes différentes.

Premier travail donc, incorporer la dernière image :

Vous pouvez déjà configurer le programme pour que l'image apparaisse seule sur le fond d'écran, c'est à dire que l'image est "posée" sur le fond d'écran existant sans que la couleur qui l'entoure par exemple, ne vienne cacher le fond d'écran : c'est une image avec fond transparent. Pour ce faire, vous indiquer dans l'option "Undraw method" : "Restore background" qui veut bien dire que le fond d'écran sera restitué derrière l'image !

Attention, pour que cela soit possible, vous devez cocher aussi l'option "Tranparency" et choisir la couleur "transparent Color", c'est-à-dire, celle qui ne devra pas apparaître sur le fond d'écran : dans ce cas, c'est le blanc qui entoure l'image...

La boîte de texte "Comment" vous permet par exemple d'indiquer l'origine de l'animation.

Deuxième étape : incorporer les autres images, dans ce cas-ci, la deuxième (qui en fait sera la première image...) :

Pour ce faire, vous devez cliquez sur l'icône représentant une feuille blanche avec un "+" qui en fait, incorpore dans le projet actuel, une image supplémentaire ! Celle-ci sera incorporée avant l'autre image, c'est la raison pour laquelle je vous ai demandé de commencer par la dernière image de l'animation...

Ici, vous pouvez déjà configurer le projet en spécifiant que l'animation tournera en boucle (si c'est ce que vous désirez) et l'onglet "Animation" va le permettre, en cochant "Looping" et "Repeat Forever". n'oubliez pas de cocher dans l'onglet "Image" l'option "restore background" (comme vu ci-dessus) pour cette image également.

Nous allons maintenant configurer l'animation, pour que les images se superposent correctement...

!

Pour cela, il faut choisir de nouveau l'onglet "Image" pour configurer la première image. Cette image est plus petite que la deuxième (puisque l'effet escompté est un agrandissement) donc, il faut la positionner de manière à ce qu'elle soit centrée par rapport à l'autre : vous disposez des options "Left" et "Top" qui vont (par essai et erreur) placer correctement l'image ! Pour visionner le résultat immédiat, vous cliquer sur l'icône représentant "une flêche vers la droite" (visionneur interne).

Quand cela est fait, vous devez encore, pour chaque image, décider de la durée d'apparition de celle-ci, par exemple, ici j'ai choisi "150" pour les deux images : de cette façon, l'effet d'agrandissement n'est pas trop rapide...

Voilà, quand tout est fait et vérifié (visionneur interne), vous avez terminé l'animation et vous l'enregistrez (icône "disquette" = "sauvegarder" ou "plusieurs disquettes" = "sauvegarder sous"). Voici le résultat :

Voilà, bon travail et si vous avez créé de belles animations avec ce cours, envoyez-les moi, je les mettrai dans ma page "Animations".

[F.A.Q.].