Initiation Expérience Hors-série Formation Auteurs Suppléments Trucs et astuces Travail
 

Tous nos manuels
Abonnez-vous à la liste de diffusion:
 
Chercher
 

Supplément au manuel "Paint Shop Pro 5"

Animer des pages Web
Le concept d'image animée

Animer des pages Web permet de les dynamiser. Le seul danger, c'est l'excès d'animation qui ralentit le chargement de ces pages et lasse le surfeur. Pensez donc à l'économie et privilégiez les petites images et les animations courtes, au format Gif.

Les animations sont en fait composées d'une série d'images fixes qui se suivent et donnent l'impression de mouvement quand elles sont projetées rapidement sur l'écran par un programme d' animation. Chaque image d'une animation doit être téléchargée l'une après l'autre, ce qui explique la relative lenteur d'affichage des animations dans votre navigateur.

Paint Shop Pro est fourni avec un module d'animation puissant - Animation Shop - qui permet d'animer n'importe laquelle série d'images.

Créer une image animée

Vous allez créer des images au format Gif avec Paint Shop Pro, puis vous les assemblerez dans Animation Shop pour créer l'image animée.

Créer la séquence des images

Créons les images d'un ballon qui tombe au sol et rebondit. La création des images d'une séquence destinée à l'animation a quelque chose de laborieux et répétitif mais c'est le prix à payer pour réaliser des animations. Inspirez-vous tout au long de l'exercice des illustrations fournies.

1. Sélectionnez Fichier | Nouveau, puis cliquez sur OK pour ouvrir une nouvelle image.
2. Choisissez dans la Palette Couleurs une couleur d'arrière-plan qui contraste bien avec la couleur de fond de l'image. 2. Choisissez dans la Palette Couleurs une couleur d'arrière-plan qui contraste bien avec la couleur de fond de l'image.
3. Sélectionnez l'outil Forme, puis Forme = Cercle, puis Style = Plein.
4. Dessinez un rond de taille moyenne (80x80 environ, à contrôler dans la Barre d'état) à mi-hauteur et à gauche de l'image.
5. Cliquez sur l'outil Baguette magique puis dans le cercle pour isoler le cercle du fond.
6. Appuyez sur Ctrl+C pour copier le cercle puis, à 10 reprises, sur Ctrl+L pour copier le cercle sur 10 nouvelles couches. Les 10 cercles symbolisant le ballon et posés chacun sur une des 10 couches semblent ne faire qu'un car ils sont superposés à l'écran.

7.

Si nécessaire, affichez la Palette Couches en cliquant sur le bouton Afficher / Masquer la Palette Couches de la Barre d'outils : vous devez constater dans la boîte de dialogue Couches que l' arrière-plan et les 10 couches sont visibles (le carré situé à droite du bouton portant le nom des couches est coloré pour chaque couche et pour l'arrière-plan).

8. Désactivez la visibilité des 10 couches en cliquant sur le bouton coloré situé à droite de leur nom mais laissez visible l'arrière-plan.
9. Rendez actif l'arrière-plan en cliquant sur son nom, toujours dans la Boîte de dialogue Couches.
10. Cliquez sur l'outil Sélection, entourez le cercle de l'arrière-plan puis supprimer-le en appuyant sur la touche Suppr. car vous n'en aurez plus besoin pour la suite. L'image ne doit faire apparaître aucune forme à ce stade. Cliquez sur le nom Couche1 pour l'activer et sur le bouton de visibilité pour la rendre visible. Vous devez voir le cercle.
11. Cliquez sur l'outil Déplacement et déplacez le cercle à mi-hauteur de l'image, à gauche : c'est de là que partira le ballon dans l'animation.
12. Cliquez sur le nom Couche2 dans la boîte de dialogue Couches pour l'activer puis sur le bouton de visibilité pour la rendre visible.
13. Recommencez l'opération précédente de déplacement pour positionner ce deuxième cercle à côté du premier, à droite et un peu plus bas : il symbolisera le début de la chute du ballon. Recommencez ces opérations avec les couches 3 puis 4 en gardant des intervalles réguliers entre les cercles.
14. Le cercle de la Couche 4 symbolisera le ballon touchant le sol : il faut donc le déformer légèrement. Cliquez sur l'outil Déformation, puis ovalisez le cercle en agissant sur les "poignées" qui entourent le cercle. Sélectionnez ensuite l'outil Flèche pour désélectionner l'outil Déformation et validez la déformation en cliquant sur OK dans la boîte de dialogue qui apparaît.
15. Le ballon doit maintenant rebondir : cliquez sur couche5 pour la rendre active puis rendez la visible. Cliquez sur l'outil Déplacement puis positionner le cercle à droite de celui que vous avez déformé, mais un peu plus haut puisque c'est le début du rebond que vous êtes en train de symboliser. Recommencez avec la couche 6. Amorcez une redescente du ballon avec la couche 7 en positionnant le cercle à droite mais en dessous du cercle précédent. Même chose avec la couche 8. Les cercles des couches 9 et 10 doivent être placés en bas de l'image, côte à côte : ils symbolisent le ballon qui est retombé et qui roule. Enregistrez votre image comprenant les 10 cercles positionnés sous le nom BALLON ANIME.PSP
Il faut maintenant enregistrer au format Gif chacune des images qui composeront la séquence animée :

1. Désactivez la visibilité des couches 2 à 8 : vous ne devez plus voir à l'écran qu'un cercle. :
2. Sélectionnez Fichier | Enregistrer sous, choisissez dans Type de fichier le format Gif et enregistrez cette première image avec le nom BALLON1.GIF.
3. Cliquez sur OK au message d'avertissement vous signalant que l'image sera en 256 couleurs et sur une seule couche.
4. Rendez invisible la couche 1 et visible la couche 2 : le cercle 2 apparaît.
5. Enregistrez l'image au format Gif, comme la première, avec le nom BALLON2.GIF.
6. Recommencez pour chacune des autres couches la même opération : rendez invisible la couche 2 et visible la couche 3 puis enregistrez avec le nom Ballon3, etc.
Vous devez au final avoir 10 fichiers au format Gif avec les noms BALLON1.GIF à BALLON10.GIF.

 

Créer l'animation
1. Ne fermez pas Paint Shop Pro.
2. Lancez le module d'animation Animation Shop en cliquant sur son icône située dans le même dossier que Paint Shop Pro (en principe, dans le menu Démarrer | Programme si vous avez installé Paint Shop Pro avec les options par défaut).
3. Choisissez un format d'image de 80x80 dans la boîte de dialogue qui s'affiche
4. Choisissez Couleur du 4. Choisissez Couleur du canevas = Opaque
5. Choisissez la couleur d'arrière-plan utilisée pour créer les images Gif et cliquez sur OK (dans l'exemple des illustrations, les images ont été réalisées sur fond blanc dans Paint Shop Pro. C'est donc Blanc que j'ai choisi dans Animation Shop).
6. Une bande s'affiche : elle symbolise les images d'une pellicule sur laquelle vous allez "jouer" du Copier / Coller entre Paint Shop Pro et Animation Shop, à l'aide des touches Ctrl+C et Ctrl+V. Une première case est sélectionnée par défaut : elle va recevoir la première des 10 images composant la séquence.
7. Activez Paint Shop pro en cliquant sur son nom dans la Barre des Taches (la Barre de Windows qui est tout en bas de l'écran) et ouvrez l'image BALLON1.GIF. Appuyez sur Ctrl+C pour copier l'image.
8. Activez Animation Shop et appuyez sur Ctrl+V pour coller la première image : vous la voyez s'installer dans la case sélectionnée par défaut et la pellicule se décale automatiquement pour recevoir l'image suivante.
9. Recommencez l'opération avec l'image BALLON2.GIF, puis BALLON3.. jusqu'à BALLON10.GIF.
10. Une fois les 10 images copiées, lancez l'animation dans Animation Shop en cliquant sur le bouton Afficher l'animation pour visualiser l'effet animé.

11. Si la séquence est trop rapide, cliquez avec le bouton droit de la souris sur la première image, puis cliquez sur Propriétés dans la fenêtre qui apparaît et réglez la Durée d'affichage à 50/100° de secondes ou plus puis cliquez sur OK : l'animation est ralentie.
Bravo ! Vous voilà devenu réalisateur de clip ! Il ne reste plus qu'à peaufiner le travail et mettre en œuvre d'autres idées d'animations.
12. Enregistrez cette animation en cliquant sur Fichier | Enregistrer, puis réglez votre préférence dans la fenêtre qui apparaît, cliquez deux fois sur Suivant puis sur OK. Cliquez sur l'outil Baguette magique puis dans le cercle pour isoler le cercle du fond.

 


Téléchargement :
   
Supplément gratuit à Frontpage 2000 : supplPSP.PDF
Deux images du manuel :
Acrobat Reader pour lire les fichiers PDF :