Les comportements & les scénarios

Le langage de programmation par excellence des comportements est le Javascript. Attendez, ne partez pas tout de suite, si la programmation vous enchose, Dreamweaver vous permet tout de même de créer quelques types d'évènements sans avoir à taper une seule ligne de code. Cependant, si vous connaissez le Javasript, vous pouvez insérer votre code dans une page soit avec Insertion / Script (dans ce cas vous tapez votre code), soit, si votre script est dans un fichier, en le chargeant grâce à la boîte de dialogue de l'inspecteur de script et au champ source.

Afin de formaliser tout ce nouveau vocabulaire, on va dire qu'un comportement se produit si un évènement particulier affecte un objet particulier (vous prenez une allumette - objet - vous la craquer - évènement - elle s'allume et se consumme - comportement). En HTML, un objet est un élément de HTML (image, calque, lien, ...). Un évènement est soit causé par l'utilisateur (il pointe le curseur de la souris sur un objet), soit gérer de façon interne (au bout de x minutes quelque chose apparaît).

Avant de vous laisser patauger dans tout cela, une petite remarque qui a son importance : tous les navigateurs ne comprennent pas les scripts, voire même, un script peut fonctionner sous Netscape, mais pas sous Internet Explorer (ça vous rappelle quelque chose ...... mais oui ..... les calques). Vous pouvez paramétrer des scripts que pour Netscape, ou que pour IE (ou pour les 2, je vous rassure). Alors, après avoir créé un comportement, testez le (F12) pour voir comment réellement il se comporte.

Attention, mesdames et messieurs ....

Comme tout objet, les comportements ont un inspecteur que vous pouvez appelez par Fenêtre / Comportements, ou F8, ou encore par le lanceur.

Une petite description s'impose : le '+' veut dire ajouter un comportement, et le '-' supprimer; la liste déroulante permet de choisir le type de navigateur; les boutons haut et bas, de modifier la priorité, entendez l'ordre hiérarchique d'exécution des comportements.

Vous pouvez associer autant d'évènements que vous voulez à un objet.

Vous avez savamment réfléchi à votre premier comportement, alors, sélectionner l'objet, cliquer sur le + de l'inspecteur et choisissez parmi les évènements offerts celui que vous désirez, remplissez la boîte de dialogue de l'évènement puis testez.

Ok, ok, vous allez me dire, c'est bien bô, mais on sait pas trop à quoi ça correspond toutes ces actions? Voici donc quelques exemples très, mais alors très, bateau :

Afficher un message dans la barre d'état de bas de votre navigateur

Ceci vous sert lorsque vous ne désirez pas que le lien s'affiche dans la barre d'état du bas de votre navigateur (alors, peur des espions, on veut garder ses secrets).

Sélectionnez un objet (un lien, par exemple), cliquez sur le + et choisissez Afficher message d'état (très banal quoi), inscrivez votre message dans la boîte de dialogue qui apparaît, cliquez sur ok et, ultime manipulation, à côté du nom de l"évènement apparaît un bouton bas, cliquez dessus et choisissez si vous voulez que le message s'affiche quand le pointeur de la souris est sur le lien (onMouseOver), lorsque l'on clique (onClick), etc. Lancez votre navigateur et voyez le résultat.

Ouvrir un autre navigateur lorsque l'on clique sur un lien

Faîtes comme précédement, mais cette fois, choisissez Ouvrir fenêtre navigateur, une boîte de dialogue apparaît, remplissez les différents champs, puis testez.

Ouvrir une fenêtre de message

Ce comportement est pratique lorsque l'on veut avertir l'utilisateur de quelque chose, par exemple, il remplit un formulaire, l'envoie, et rien ne se passe car il a oublié de remplir un champs, assitôt arrive la super fenêtre de message (c'est pas cool ça!!). Bien sûr, dans ce cas, il faut avoir fait un formulaire qui peut être testé grâce au comportement Valider formulaire....

Faîtes tout comme dit avant, mais choisissez Fenêtre de message, écrivez votre message puis testez.

Changer une image

Si vous voulez qu'une image change lorsque l'on se positionne dessus (ce qui équivaut à Insertion / Image retournée), choisissez Intervertir image, et roule poulette!!!

Afficher ou masquer un calque

Vous désirez qu'en pointant sur un lien, une explication apparaîsse, alors testez l'action Afficher-masquer calque (à condition évidemment d'avoir créé avant le / les calques nécessaires et de les avoir correctement paramétré).

Ainsi, après avoir créé vos calques, il faut les rendre invisibles. Pour cela, sélectionnez les calques un par un et dans l'inspecteur de propriété, choisissez Hidden dans le champs Vis. Appuyez sur F8 (ou Fenêtre / Comportement - Windows / Behaviors) pour faire apparaître l'inspecteur de comportement.
Choisissez le navigateur (champs Events for), sélectionnez l'objet (une image, un hyperlien, ...) et cliquez sur le + dans l'inspecteur de comportement. Un menu déroulant contenant les différents comportements possibles s'affiche. Choisissez Afficher/masquer calques - Show/Hide layers. Dreamweaver détecte les calques de la page et affiche leur nom dans une fenêtre de dialogue. Sélectionner le calque dont vous voulez changer la propriété en cliquant sur l'un des 3 boutons : Afficher (Show) - Masquer (Hide) - Par défaut (Default). Par défaut rétablit les propriétés originales de l'objet.
Une fois le comportement choisi, il faut choisir l'évènement (event). Par défaut, vous voyez que onMouseClick apparaît. Pour le changer, sélectionner le, un triangle pointant vers le bas apparaît. En cliquant sur ce triangle, un menu déroulant s'affiche. Choissisez l'évènement.
Par exemple, si vous voulez faire apparaître un calque en pointant sur un objet, il faut choisir onMouseOver. Si ensuite vous désirez que lorsque le pointeur de la souris n'est plus sur l'objet le calque disparaîsse, il faut créer un nouveau comportement (vous pouvez appuyer sur le bouton Par defaut pour rétablir les propiétés de l'objet) avec cette fois-ci comme évènement onMouseOut.

Je vous laisse vous amusez avec le reste.

Les scénarios

Et que diriez-vous, toujours sans taper une seule ligne de code, de créer des animations? Faire avancer un personnage, tourner une roue, etc.

Le principe est en fait très simple, on séquence une série de calques en les déplaçant d'une coordonnée (x,y) à une ou plusieurs autres (xn,yn).

Comme pour les autres manipulations, la première chose à faire est ....., est ....., allez, un petit effort. C'est d'appeler, ..... d'appeler qui, mais oui, l'inspecteur de scénario (F9, Fenêtre / Scénarios - Timelines en outre channel- ou enfin avec le lanceur).

De haut en bas et de droite à gauche, l'inspecteur comprend : un champs indiquant le nom du scénario; un bouton de rembobinage, un autre de retour arrière et un de lecture avec, entre ces 2 derniers, un champs indiquant le numéro du calque (ou de l'image); puis arrive la vitesse (en images d'animation par seconde), la lecture automatique et la boucle; houaouuuu, je reprends mon souffle et je continue ..........en dessous, le B est le canal de comportement (appelé à partir d'une image d'animation du comportement) puis enfin, le rectangle rouge est la tête de lecture. Les chiffres placés verticalement sont les canaux d'animation.

On se jette à l'eau?

Après avoir fait apparaître l'inspecteur de scénarios, sélectionner un calque dans votre document. Allez dans Modifier / Ajouter un objet au scénario. Une barre d'animation apparaît dans le canal 1, ou, selon les cas, dans le premier canal disponible. Cliquez sur le petit rond à droite du nom du calque et faîtes le glisser vers le droite afin d'indiquer un numéro d'image d'animation. Puis cliquez sur le calque et déplacez le sur votre document, une ligne devrait relier le calque entre son point de départ et celui d'arriver. Cochez Lecture auto et boucle, lancez votre navigateur et voyez le résultat.

C'est bien joli tout ça, mais voir un calque qui se déplace en ligne droit, c'est un peu barbant à la fin. Ok, et si il faisait une courbe, par exemple? Rien de plus simple. Cliquez, au niveau de la barre d'animation, là ou vous désirez que ce produise la nouvelle action, allez dans Modifier / Scénario / Ajouter une image clé, cliquez sur la calque et déplacez le, aussitôt la ligne symbolisant le déplacement du calque se courbe. Alors, heureux?

Non!!! Bon, y vous en faut plus, alors que pensez vous de faire apparaître un autre calque à un certain moment, puis de le faire disparaître? Tentez, hein? Les manipulations du début sont les mêmes que précédement - changez juste les attributs du nouveau calque en mettent caché dans le champs Visib - puis ajouter une image clé et là, seulement là, changez les attributs du calque, rendez le visible. Et, hop, le tour est joué.

La ligne du B correspond à l'emplacement où on veut mettre un comportement. Cliquez sur l'endroit désirez, l'inspecteur de comportement apparaît, choisissez celui que vous désirez ..... enfin, faîtes comme dit plus haut. Magique non?
Si vous désirez qu'un scénario commence à partir d'un certain comportement, dans l'inspecteur de comportement, cliquez sur le + et choisissez Scénario / Exécuter le scénario puis choisissez le nom du scénario. Il en est de même pour arrêter un scénario.