Exercice HTML : GIF-animés et traitement d'images

Thème

Réalisation d'images GIF animées (format GIF89a). Apprentissage de quelques techniques de base relatives au traitement d'images raster : usage de calques (layers) et de masques, déformations et autres effets...

Intérêt des GIF-animés (format de prédilection des bannières publicitaires notamment) :

Balises

Aucune balise particulière, hormis la balise <IMG SRC=...> déjà présentée (utilisée pour insérer en-ligne l'image animée dans la page).

Remarque : si l'on désire n'animer qu'une portion d'une image, on peut découper l'image en parties (image multipart) assemblées dans la page avec la technique des tableaux (voir exercice "Rollovers")

Références

Exercice

Remarques sur PaintShop Pro


Exercice 1

 EtapeSolution
1 Sur la base des 2 images ci-dessous,
réalisez un GIF-animé qui affiche
alternativement ces 2 images avec un
effet de fondu-enchaîné


Fabriquez les 2 images de base (ou récupérez-les depuis cette page Web avec <droite>Save Image as). Puis, dans Animation Shop :
  • File>Animation Wizard :
    - Dimension: Same size as the first image frame [Suivant]
    - Canvas color : Transparent [Suivant]
    - (si diff. ratio) [Suivant]
    - Animation looped : Yes, How long each frame : 50 [1/100sec.] [Suivant]
    - [Add image]: désignez image1, [Add image]: image2, [Suivant]
    - [Terminer]
  • prévisualisez l'animation avec View>Animation
  • effet de transition : sélectionnez 1ère image, puis Effects>Image Transitions :
    - activez l'option "Show Preview"
    - Transition length : 1 sec.
    - effet : Fade
    - Frames per sec. : 10 fps
    - [OK]
  • puis prévisualisez à nouveau avec View>Animation
  • puis sauvez l'animation avec File>Save
2 Résultat :

Testez que votre animation fonctionne bien dans un browser Web


Exercice 2

Sur la base de la photo du monde ci-dessous (que vous trouvez sous R:\Si-dgr\Internet\monde_photo.jpg : 480x160 pixels), réalisez un globe terrestre animé (diam. 160 pixels) à l'aide des logiciels PaintShop Pro 5 et Animation Shop.


       








 EtapeSolution
1 Réaliser dans PaintShop Pro le masque ci-dessous correspondant au diamètre du globe

Pour réaliser le masque ci-contre dans PaintShop Pro :
  • File>New : "Width" 160 pixels pixels, "Height" 160, "Background color" Black, "Image type" greyscale (8 bits)
  • puis choisissez la couleur active blanc (dans la "Color Palette")
  • prenez l'outil de dessin [Shape] : type de "Shape" Circle, "Outline witdh" 1 (épaisseur trait), "Style" Filled (remplissage)
  • et dessinez un disque blanc centré dans l'image (aidez-vous des coordonnées affichées en bas à gauche de la fenêtre PaintShop Pro)
  • sauvez ce fichier en format GIF sous le nom monde_masque.gif et gardez-le ouvert dans PaintShop
2 Nous allons créer un fichier de dessin multi-layer constitué, dans chacun de ses layers, d'une image du globe à un instant donné.

Si l'on prend des portions d'image de 160x160 pixels de la photo monde_photo.jpg décalées les unes des autres de 10 pixels, cela nous fera 32 frames pour un tour de globe.

On appliquera les opérations suivantes à chacune de ces images : déformation de type "punch", puis application du masque créé précédemment.

Pour la première image, dans PaintShop Pro :
  • ouvrir le fichier monde_photo.jpg
  • avec l'outil [Selection] ("Selection Type" Rectangle, "Feather" 0, option "Antialias" non activée), sélectionner la portion de 160x160 pixels tout à gauche de l'image
  • puis la copier avec <ctrl-C> (Edit>Copy), et la coller en temps que nouveau fichier-image avec Edit>Past>As New Image
  • déformation: Image>Deformations>Punch, choisir "% Effect" 45, et appliquer l'effet avec [OK]
  • masquage: Masks>New>From Image, choisir "Source window" monde_masque.gif, et appliquer l'effet avec [OK]
  • suppression du masque dans layer: Masks>Delete et répondre [Oui] à la question "Merge mask into current layer ?"
3 Et ainsi de suite pour les 31 autres images...

Après quelques images (lorsque vous aurez compris toute cette procédure) arrêtez et reprenez le fichier corrigé R:\Si-dgr\Internet\monde_layers.jpg

Pour les 31 autres images, dans PaintShop Pro :
  • avec l'outil [Mover] et le bouton de <droite> de la souris dans l'image monde_photo.jpg, décaler la sélection (carré de 160x160 pixels qui clignotte) de 10 pixels sur la droite (aidez-vous des coordonnées affichées en bas à droite de la fenêtre PaintShop)
  • puis copier cette sélection (<ctrl-C>), et la coller en temps que nouveau layer dans votre fichier en cours de travail (sélectionner la fenêtre de ce fichier, et faire <ctrl-L> ou Edit>Past>As New Layer)
  • déformation: Image>Deformations>Punch, choisir "% Effect" 45, et appliquer l'effet avec [OK]
  • masquage: Masks>New>From Image, choisir "Source window" monde_masque.gif, et appliquer l'effet avec [OK]
  • suppression du masque dans layer: Masks>Delete et répondre [Oui] à la question "Merge mask into current layer ?"
Une fois que le travail est terminé, le fichier multi-layer devrait comporter 32 layers et devrait être sauvegardé en format PaintShop Pro (extension .psp) sous le nom monde_layers.jpg
4 Ouverture d'un fichier de frames multi-layer dans AnimationShop Démarrez AnimationShop :
  • définissez les préférences suivantes : File>Preferences>General Program Preferences, onglet "Layered Files" : activer "Keep each layer as a separate frame"
  • puis ouvrez le fichier monde_layers.jpg
5 Prévisualisation de l'animation, puis sauvegarde en format GIF-animé Dans AnimationShop :
  • prévisualisation de l'animation avec View>Animation
  • puis sauvegarde en format GIF89a avec File>Save
Vérifiez ensuite que votre GIF-animé fonctionne dans un browser Web !


Exercices HTML © J.-D. Bonjour / SI-DGR, EPFL / Révision 18.5.99