 |
 |
De nombreux sites Web contiennent des boutons de transformation, (RollOver) c'est-à-dire des boutons qui changent lorsque la souris glisse dessus ou lorsque qu'ils sont sélectionnés. Les différents modes d'affichage de ce type de bouton sont appelés des états de transformation.
Par défaut, chaque image est dotée d'un état : l'état Normal. Cet état correspond à l'aspect de l'image lorsqu'elle est chargée pour la première fois dans un navigateur Web et qu'aucun effet de transformation par souris n'a encore modifié son aspect. Vous pouvez ajouter des états à une image. Les autres états sont affichés, par exemple, lorsque le pointeur survole l'image ou lorsqu'un utilisateur clique sur l'image.
Vous avez la possibilité de concevoir un bouton et ses états
de transformation à l'aide de calques dans Photoshop ou Photoshop Element ou
plus directement dans Image Ready . Vous pouvez placer chacun des éléments qui
changent sur son propre calque et visualiser les différents calques à l'aide de
la palette Calques.
L'exemple présenté ici utilise aussi la technique de transformations par souris
distantes qui permet d'afficher ou masquer le contenu d'une tranche se trouvant
dans une autre partie de la page Web: ImageReady permettant de
contrôler les tranches devant changer dans un état de transformation par souris
donné.
Ouvrez dans Image Ready une image de fond de votre choix (mais d'au minimum 800 px pour qu'elle puisse servir de support à du texte et des images), ou reprenez Air.jpg utilisée pour la galerie Web, nommez le calque obtenu "Air" enregistrez le fichier au format *.psd (par exemple Air.psd)
|
|
|
Utilisez l'outil Texte avec une police Verdana pour ajouter dans la partie droite de l'image de fond le texte "Rollover" ( taille 60 px / couleur rouge )
Nommez ce calque également Rollover dans la palette Calque
Depuis la palette calque (icône
en bas de la fenêtre) ajoutez un style de calque biseautage et estampage
|
|
|
|
Rajoutez ensuite d'autres styles sur le même texte depuis la boîte de dialogue qui s'ouvre:
Ces effets seront ensuite disponibles dans la palette Calque.
 |
 |
Créez un triangle jaune dans Photoshop Element
ou récupérez cette image au format
*.psd et ouvrez-la dans Image Ready, pour la faire glisser à côté du texte "Rollover",
sur votre image Air.psd.
Nommez ce calque "Fleche1". Redimensionnez la flèche jaune ( Menu Edition
Transformation manuelle ou Ctrl+T) pour que sa taille corresponde à celle du texte.
Dupliquez ensuite les calques "Rollover" et
"Flèche1" ( Menu Calque - Nouveau - Calque par Copier).
Renommez ces calques "Gif Animé" et "Fleche2" dans la palette de
Calques et déplacez-le pour qu'ils
s'alignent au dessous des 2 premiers éléments
Utilisez l'outil texte pour mettre en surbrillance le second
texte "Rollover"
et changez ce texte en tapant "Gif Animé" en lieu et place.
La palette calque réunit alors de 5 calques ayant chacun leurs effets
Ouvrez alors 2 images qui serviront d'illustrations lorsque l'on passera la souris sur les flèches du Rollover et du Gif Animé par exemple bouton.psd et animation.psd et placez les dans le ciel sur l'image Air (renommez les nouveaux calques "Bouton" et "Animation")
Sélectionnez ensuite successivement les 2 calques des Flèches
afin de créer des tranches pour chacun d'eux ("Fleche1" et "Fleche2") - Menu
Calque - Nouvelle tranche d'après un calque .
Les tranches permettent de définir des états de transformation par souris et de
paramétrer les affichages pour chaque état à partir de la palette "Contenu Web"
(Menu Fenêtre - Contenu Web)
Dans la palettte "Contenu Web" utilisez l'icône
"Créer un Etat de transformation par souris",
pour ajouter 2 états de transformation à chacun des calques Flèches: un état
"par dessus" et un état "bas" (Enfoncé), qui déclencheront respectivement une
action lors du survol de la flèche et une autre lorsque l'utilisateur
appuyera sur le bouton de la souris)
Le travail d'animation commence alors et vous devez pour cela utiliser conjointement les 2 palettes "Calques" et "Contenu Web"
Par défaut les états initiaux des 2 flèches ne
doivent pas afficher les images "Bouton" et "Animation" l'icône de l'oeil
doit donc être désactivé dans la palette
Calques à côté des vignettes correspondantes.
Il faut ensuite définir les états que l'on désire afficher lorsque l'utilisateur va intervenir avec sa souris:
A.- lors du passage de la souris au dessus de la
"Fleche1":
►affichage de l'image "Bouton" dans le ciel
et modification de l'apparence de la flèche
(donc l'icône de l'oeil doit être
activé à côté de la vignette de l'image
"Bouton", mais désactivé à côté de l'effet "Lueur interne" du calque Flèche
correspondant)
B.- lorsque l'on enfonce le bouton de la souris sur la "Fleche1":
► modification de l'apparence du texte "Rollover" et passage à une page Web traitant du sujet
dans ce cas l'icône de l'oeil
doit être désactivé à côté de l'effet "Lueur interne" et
"Lueur externe" du calque texte "Rollover" pour que celui-ci change d'aspect.
le lien hypertexte pour pour atteindre une page sur Internet
( par exemple
http://wwwedu.ge.ch/cptic/prospective/enseignements/sic/pages_web/scripts.html
)
doit être inscrit dans le champ URL que l'on atteint en double-cliquant dans la
palette "Contenu Web" sur la vignette
de la tranche correspondant à la première
flèche :
Répétez ensuite les opérations A et B pour la deuxième flèche:
A.- Etat de transformation "Par dessus" de la "Fleche2":
►affichage de l'image "Animation" dans le
ciel
et modification de l'apparence de la flèche
B.- Etat de transformation "Bas" la "Fleche2":
► modification de
l'apparence du texte "Gif animé"
et passage à une page Web traitant du sujet ( par exemple
http://fr.wikipedia.org/wiki/Animation#Histoire_de_l.27animation )
Avant de vérifier que tout fonctionne il faut impérativement passer par le menu déroulant de la palette "Contenu Web" pour vérifier toutes les tranches distantes
Vous pouvez alors tester le résultat soit depuis Image Ready (
icône aperçu du document 
de la palette
d'outil ) ou directement dans un navigateur par le Menu Fichier - Aperçu dans le
Navigateur ou en cliquant sur son icône dans la palette d'outils
Pour
terminer, testez encore la fonctionalité "Carte-Image", qui vous permet de
dessiner des zones réactives sur la photo, par exemple en entourant l'éolienne,
avec l'outil "Carte-image polygonale", afin d'indiquer un hyperlien
( ici vers la page "le vent du changement"
http://www.ourplanet.com/imgversn/123/french/auken.html )
Lorsque vous serez satisfait du résultat conservez une version
de votre fichier au format *.psd (Air.psd) et générez la page Web correspondante
grâce au menu Fichier - Enregistrez une copie optimisée, qui vous donnera la
page Air.html.
Cette page pourra toujours être améliorée en reprenant le code html "à la
source": par exemple ici la couleur de fond a été fixée dans la balise <BODY>
avec un attribut bgcolor="#95AAFF" et l'image recentrée avec l'attribut align =
"center" dans la balise <TABLE>.
Retour au sommaire du support de cours
