02) Animez vos calques

Ce tutorial est crée à partir de la version 2 de Dreamweaver, mais cela ne changera guère avec la version 3 ou 4.
Petite explication avant de commencer:
Les animations sous Dreamweaver sont du type linéaires, c'est à dire que si vous désirez effectuer des déplacements d'objets sur votre page, cela sera possible, mais par contre si vous désirez effectuer du morphing d'objets, je vous conseille plutôt Flash car Dreamweaver ne saurait le faire.

Donc dans ce tutorial, je vais vous expliquer comment animer un calque contenant du texte, un menu déroulant une image ou un gif animé et comment modifier sa durée sa vitesse et son chemin.

Création de l'image de base:
Commencez par créer un calque avec l'icône et placez-y votre image avec l'icône . Placez précisément votre calque à l'endroit désiré car se sera la position de départ de notre animation.


Voila ce que l'on obtient.

Notre calque est prêt, mais il est encore immobile. Ne vous inquiétez pas, nous allons l'animer.

Animation de notre calque:
Votre calque sélectionné, cliquez sur l'icône Scénario du Lanceur (Si vous ne le voyez pas, allez dans le menu Fenêtre / Lanceur).


La palette Scénario (TimeLine) s'affiche (F9). C'est elle qui va nous permettre de construire notre animation du calque.


Attention: Les animations sous Dreamweaver sont effectuées sur les calques et non sur les images. Il faut donc bien avoir sélectionné le calque pour que votre animation fonctionne.

Sur votre Scénario, placez-vous sur l'image 1 et cliquez sur le bouton droit de la souris. Dans le menu contextuel choisissez "Ajoutez un Objet".


Une boîte de dialogue apparaît (si la case "Ne plus affichez ce message" n'a pas été cochée) vous donnant quelques précisions. Cliquez sur OK.


Dreamweaver vous octroie par défaut 15 images pour votre animation (Vous pouvez bien sûr augmenter ou diminuer cette durée, voir plus loin), ce qui correspond à 1 seconde d'animation.


Placez votre indicateur de position (rectangle rouge) à l'image 15.


Cette image, correspond à notre position d'arrivée de notre animation.

Déplacez votre calque (veillez à bien le sélectionner) à la position désirée, et si tout s'est bien passé, vous obtiendrez un tracé gris représentant votre animation. Si ce n'est pas le cas, c'est qu'il y a eu en cours de route une mauvaise manipulation (une désélection du calque par exemple). Dans ce cas, je vous conseille de recommencer.


Voila, notre animation est terminée. Facile, non? Vous pouvez pour la visionner, déplacer de gauche à droite ou de droite à gauche votre indicateur de position sur le Scénario ou appuyer sur la touche F12 qui vous ouvrira votre navigateur. N'oubliez pas de cocher les cases Lecture Auto et Boucle.


Pour visionner l'animation cliquez ICI.

Modifications de l'animation:

Modification du nombre d'images:
Si vous désirez augmenter la durée de votre animation (en gardant 15 images par seconde), rien de plus simple. Cliquez sur la dernière image de votre animation dans la palette du Scénario, et tout en restant appuyé sur le bouton, déplacez vers la droite votre souris jusqu'à la position désirée.


Dans le cas ci-dessus, l'animation durera 2 secondes.

Si vous désirez diminuer la durée de votre animation, effectuez la même opération que ci-dessus mais au lieu de déplacer la souris vers la droite, déplacez-la vers la gauche.

Modification de la vitesse:
Pour augmenter ou diminuer la vitesse de votre animation, il suffit de changer la valeur par défaut dans la case IPS (Images par Seconde).

Modification du chemin de l'animation:
Si vous désirez modifier le chemin de votre animation (lui donner par exemple un effet de vagues), rien de plus facile.

Placez-vous sur l'image (Palette Scénario) où vous désirez effectuer un changement. Cliquez avec le bouton droit de la souris et dans le menu contextuel, choisissez "Ajouter une Image Clé".


Dreamweaver place à l'endroit sélectionné, un nouveau rectangle avec à l'intérieur un cercle: C'est une nouvelle image clé.

Explication: Une animation (quelle soit effectuée sur Dreamweaver, Flash, Bryce...) est composée d'images et d'images clés. Les images clés permettent à partir de l'endroit où elles sont insérées d'effectuer des modifications de l'animation (ici ce sera une modification de position).

Déplacez votre calque de quelques pixels vers le bas par exemple. Vous remarquerez que le chemin tracé en gris suit la nouvelle position. Effectuez l'opération autant de fois que vous le désirez.

Pour ma part, j'ai placé 5 images clés pour donner un bel effet de vague à mon animation.


Vérifiez ensuite votre animation. Si elle ne vous plaît pas, vous pourrez toujours venir la retoucher.



Tutorial crée par le super webmaster de lewebfacile.net 






Cet article provient de TheBestWeb.fr

L'URL pour cet article est : http://www.thebestweb.fr/sections.php?op=viewarticle&artid=21