Un dessin animé pour votre site web

Cela vous dirait, une image en mouvement pour animer votre site web ? Suivez le guide ! Au travers des lignes qui suivent, vous découvrirez plusieurs solutions pour afficher sur une page web, ou simplement sur votre écran, une animation. Nous allons prendre comme exemple un superbe écran 21 pouces d’Apple, qui devra tourner sur lui-même en continu.

Apple 21 studio display animated gif

L’animation provient d’un fichier « QuickTime VR » récupéré il y a quelques années sur le site d’Apple. Vous pouvez utiliser indifféremment toutes sortes d’animation, en adaptant ou supprimant au passage les instructions selon le format de fichier dont vous disposez.

Animer des images pour le web, sur Macintosh

 

Du VR au MOV

Un fichier VR est constitué d’une série de photographies d’un même objet, prises sous différents angles, et qui s’affichent en fonction des mouvements de la souris. Nous allons commencer par transformer ce fichier VR en un simple film QuickTime. Cette étape n’est pas nécessaire mais elle permettra à ceux qui souhaitent utiliser directement un film QuickTime, de mieux suivre la procédure ! Ouvrez votre fichier VR dans le lecteur QuickTime, et choisissez le menu « Exporter ». Choisissez « Séquence vers QuickTime » et réglez les options en utilisant un compresseur léger (Sorenson haute qualité par exemple), une dizaine d’images par secondes et un maximum de couleurs. Cliquez sur OK pour obtenir un fichier QuickTime, un simple film dans lequel votre animation se déroule en continu, tours par tours autour de l’objet.

Du MOV aux fichiers d’images

Effacez maintenant de ce film ce qui ne vous intéresse pas : il faut que la dernière image et la première puissent s’enchaîner. Dans l’exemple, je conserverai une rotation complète de l’écran. Si j’avais choisi un personnage en mouvement, j’aurais conservé un cycle, de sorte à ce que plusieurs mouvements semblent s’enchaîner naturellement. Vous pouvez utiliser l’option « Boucle » du lecteur QuickTime pour vérifier la cohérence de votre animation. Une fois que c’est au point, vous pouvez enregistrer cette animation en utilisant à nouveau le menu « Exporter », pour enregistrer cette fois votre animation dans un format compatible avec Internet, comme un QuickTime bien compressé pour être chargé plus rapidement, ou un fichier MPEG 4. Une fois insérée dans votre page web, l’animation devra être réglée pour passer en boucle. Mais vous pouvez aussi exporter votre fichier en choisissant « Séquence vers Suite d’images », ce qui vous permet de modifier encore quelques réglages comme nous allons le voir tout de suite. Dans ce cas, choisissez le nombre d’images « optimal » dans le menu déroulant et enregistrez toutes vos images dans un dossier vide.

Suites d'images exportées par QuickTime
Suites d’images exportées par QuickTime 7 Pro, toujours opérationnel sous High Sierra !

 

Des images au MOV et au GIF animé

Vous pouvez commencer par modifier vos images avec un éditeur (AppleWorks, GraphicConverter, Photoshop…). Rajoutez un titre, un copyright, un fond… tout ce que vous pouvez imaginer est possible à réaliser. Pensez à la fonction « Convertir » de GC qui vous permettra d’automatiser certaines fonctions (recadrage, couleurs, orientation…). Vous disposez maintenant d’une série d’images, prêtes à redevenir un film. Vous pouvez les ouvrir à nouveau directement avec QuickTime (menu « Ouvrir une suite d’images ») et exporter votre film en format QuickTime ou MPEG 4 comme indiqué plus haut. Mais vous pouvez aussi utiliser les capacités de GraphicConverter, qui sait créer un GIF animé, spécialement pour Internet. Ce type de fichier est relativement léger, et compatible avec tous les navigateurs sous toutes les plates-formes, même sans QuickTime. Dans GraphicConverter, sélectionnez le menu « Convertir », choisissez le format « GIF » et « Créer une animation » et « Itérations infinies » dans les Options, puis cliquez sur le dossier qui contient toutes vos images (dans la liste de gauche). Vous obtiendrez ainsi un fichier GIF, prêt à être envoyé sur Internet, et affichant votre animation.

Cette astuce, qui n’a pas pris une ride, a été publiée en 2002 dans la revue A Vos Mac.

Vous avez aimé ? Partagez !