Le terme Dynamic HTML, ou DHTML, se rapporte à la capacité de modifier les propriétés de style ou de positionnement d’éléments d’une page à l’aide d’un langage de script. Les scénarios emploient DHTML pour modifier, sur une échelle temporelle (ce qui explique la métaphore du scénario de film), les propriétés des calques et des images. Utilisez les scénarios pour créer des animations ne nécessitant pas de contrôles ActiveX, d’appliquette Java, ou de plug-ins.

Les scénarios créent une animation en modifiant, suivant une échelle temporelle, la position, la taille, la visibilité et / ou l’ordre de superposition d’un calque. Ils sont également utiles pour produire d’autres actions après le chargement de la page. Par exemple, les scénarios peuvent modifier le fichier source d’une image, et exécuter des comportements à un moment donné. Les fonctions des scénarios liées aux calques ne fonctionnent que dans des navigateurs de la version 4.0 ou ultérieure.

Créer un scenario

Tout d’abord, ouvrez l’inspecteur de code HTML pour afficher le code JavaScript généré par un scénario. Le code du scénario se trouve dans la fonction MM_initTimelines, à l’intérieur d’une balise SCRIPT dans la section HEAD du document.

Lorsque vous modifiez le code HTML d’un document qui contient des scénarios, veillez à ne pas déplacer, renommer ou supprimer des éléments auxquels le scénario fait référence.

• Comment faire ?

1- Sélectionnez un calque

2- Amenez le calque à sa position initiale au début de l’animation. Vérifiez que vous avez bien sélectionné le bon élément. Cliquez sur le symbole de calque, ou servez-vous de la palette de calques pour en sélectionner un.

3- Choisissez Modifier > Enregistrer le chemin du calque.

4- Déplacez le calque sur la page pour décrire son parcours.

5- Relâchez la souris à l’emplacement où l’animation doit s’arrêter. Dreamweaver ajoute une barre d’animation au scénario, avec le nombre nécessaire d’images-clés.

6 Dans l’inspecteur de scénario, cliquez sur le bouton Rembobiner, puis maintenez le bouton Lecture enfoncé pour visualiser votre animation.

Les actions pour controller les scenarios

Associez les actions de comportement suivantes à un lien, à un bouton ou à tout autre objet pour contrôler les scénarios. Pour créer des effets intéressants, vous pouvez placer les comportements contenant ces actions dans le canal de comportements. Par exemple, vous pouvez faire en sorte qu’un scénario s’arrête de lui-même.

Déplacement de calque
permet à l’utilisateur de déplacer un calque. Utilisez cette action pour créer des puzzles, des commandes de défilement et autres éléments mobiles de l’interface.

Afficher-Masquer les calques
affiche, masque, ou rétablit la visibilité par défaut d’un ou plusieurs calques. Cette action permet d’afficher des informations en fonction des interactions de l’utilisateur avec la page. Voir "Afficher-masquer les calques".

Lecture du scénario et Arrêter le scénario
permettent aux visiteurs de la page de lire et arrêter un scénario en cliquant sur un lien ou un bouton. Ces actions permettent aussi de démarrer et arrêter un scénario automatiquement lorsque l’utilisateur passe sur un lien, une image ou tout autre objet.

Atteindre une image du scénario
entraînera un saut du scénario à une image donnée. La case à cocher Boucle de l’inspecteur de scénario ajoute l’action "Atteindre une image du scénario" après la dernière image de l’animation, ce qui fera revenir celle-ci à la première image avant de redémarrer.