Animer son site avec des bannières

Vous souhaitez ajouter un texte animé à votre site Internet pour créer un titre original. Le plus simple est de réaliser un fichier Gif animé, du même type que ceux utilisés pour les avatars animés ou de nombreuses bannières. Un tel fichier se compose d’images qui s’affichent l’une après l’autre. Pour cela, nous vous proposons un logiciel spécifique, Easy Gif Animator (Shareware, 20 euros, version d’évalution complète durant 20 jours). Ne cherchez pas à créer un film de 30 minutes à l’aide de ce format : vous devrez vous contenter d’une dizaine d’images. Mais, dans la plupart des cas, ce sera largement suffisant !

Installez le logiciel

Téléchargez Easy Gif Animator sur www.01net.com/telecharger. Lors de l’installation, ne cochez pas Easy Gif Animator Extension ni Set as my default web search engine afin de ne pas modifier votre navigateur.

Choisissez le format de la bannière

Lancez le logiciel et fermez les éventuelles pages d’accueil. Déroulez le menu File, New banner wizard. Sélectionnez la taille de votre bannière (par exemple 468 pixels de large x 60 pixels de haut). Cliquez sur Next. Pour définir une couleur de fond, cochez Simple color et choisissez une couleur dans la liste. Pour insérer une image de fond, cliquez sur Picture or texture et utilisez le bouton Browse pour Ouvrir un fichier image. L’option Stretch permet d’étirer la photo au format de la bannière. Validez par Next.

Ajoutez un texte

Par défaut, vous pouvez saisir trois messages de texte consécutifs. Saisissez le premier texte à la place de Your text goes here. Modifiez si besoin la police et la couleur de fond. Le texte apparaît dans le cadre d’aperçu, juste au-dessous. En cliquant sur l’onglet Text2, saisissez le deuxième texte. Idem pour le troisième avec l’onglet Text3. Les trois phrases vont apparaître successivement dans la zone d’aperçu (par défaut, chacune est affichée cinq secondes).

Réglez les effets

Chacun des trois textes dispose d’un effet de transition spécifique qui s’applique au début et à la fin de l’affichage. Cliquez sur l’onglet Text1. Dans la liste How to show, réglez l’effet à l’apparition du premier texte, tel que Slide from top pour faire glisser le texte depuis le haut. Dans la liste How long to show, spécifiez le temps d’affichage du texte (par exemple 2 secondes). Enfin, dans la liste How to hide, choisissez l’effet de sortie, par exemple Slide out to buttom pour faire sortir le texte par le bas. Pour ne pas ajouter d’effet, utilisez Hide at once. Cliquez sur Next puis sur Finish.

Vérifiez le minutage

Le logiciel crée un ensemble d’images qui apparaissent sous forme de liste à gauche de la fenêtre. À côté de chaque image, vous pouvez lire le temps pendant lequel elle sera affichée. Cette durée peut être facilement modifiée en cliquant sur l’image puis en faisant varier la valeur Delay (en centièmes de seconde). Appuyez sur la touche F7 (Preview) pour afficher l’animation. Pour en vérifier le bon fonctionnement dans votre navigateur, appuyez sur F8 et validez par OK. Si tout vous convient, sauvegardez l’image via le menu File, Save. Veillez à l’enregistrer au format Gif et dans le même dossier que votre page Web, par exemple sous le nom banniere.gif.

Insérez l’image dans votre page web

Si vous disposez d’un éditeur HTML, il vous suffit d’insérer normalement l’image banniere.gif dans la page. Si, en revanche, vous utilisez le Bloc-notes de Windows pour modifier la page, déroulez dans Easy Gif Animator le menu Tools, Generate HTML Code. Si vous souhaitez que votre bannière renvoie vers une autre page Web, saisissez, dans le champ Address l’adresse de cette page. Cliquez sur le bouton Copy. De retour dans le Bloc-notes, placez-vous en début de page, juste après la balise < BODY . . . > et collez (Ctrl + V) le code HTML afin d’insérer l’image. Enregistrez le fichier puis transférez via FTP l’image et la page Web mise à jour sur votre site Web.