INFOS-AREA - Utiliser les rollover


	INFOS-AREA

Navigation


	Utiliser les rollover

Introduction

Ce tutoriel a pour objet de vous familiariser avec les rollovers dans ImageReady. C'est-à-dire les transformations d'apparence par survol de la souris et la génération automatique de javascript que ça implique.

Pour suivre ce tutoriel, il est indispensable que vous sachiez faire un gif animé

La durée approximative pour y arriver est de : 10 min

L'avantage de cette technique est la rapidité d'exécution. C'est une solution si on est peu attaché aux normes du W3C. De plus ceux qui ont désactivé le javascript ne pourront pas voir l'effet. La "bonne méthode" pour faire cet exemple, serait d'utiliser les CSS

1. Préparation dans Photoshop

Créez un nouveau document 'CTRL+n' avec un fond blanc, une taille de 100 pixels de largeur et de hauteur, en mode de couleur RVB (RGB) et de résolution 72 pixel/pouces (dpi).

nouveau_document

Appuyez sur 'D' pour réinitialiser les couleurs à noir et blanc.

noir_blanc

Sélectionnez l'outil Texte 'T'

Définissez avec la souris une zone relativement grande et inscrivez y le texte de votre choix.

texte

Utilisez le clic droit sur votre calque texte dans l'onglet Calques 'F7' (Layers)

et sélectionnez Pixelliser le calque.

pixelliser

Remarquez que le grand "T" a disparu, nous avons maintenant affaire à un calque non vectoriel et le texte n'est d'ailleurs plus éditable.

Dupliquez le calque 'Ctrl+J'

Appliquez au calque dupliqué un filtre de flou gaussien (Gaussien Blur) de 2 pixels.

flou

Utilisez à deux reprises le raccourci 'Ctrl+F' pour répéter le précédent filtre.

2. On passe à ImageReady

Cliquez sur le bouton de transfert de l'image sous ImageReady

image_ready

Si ImageReady n'est pas déjà lancé, il se lance. Ce qui peut être plus ou moins long en fonction de votre système.

Ne laissez de visible que le calque avec le texte flou et le fond blanc .

yeux

Vérifiez que l'onglet Contenu Web est bien affiché, dans le cas contraire faites 'Fenêtres' -> 'Espace de travail' -> 'Position de la palette interactivité' (Window -> Workspace -> Reset palette locations)

rollover

Cliquez sur le bouton A pour apparaître l'état Par dessus.

Il s'agit de l'état dans lequel sera notre image quand on la survolera avec la souris (en anglais l'effet Rollover)

Assurez vous que c'est bien l'état Par dessus qui est sélectionné dans l'onglet Contenu Web

Créez un GIF animé en faisant varier l'opacité des calques à chaque étape de l'animation :

opacity

Etape 1 :
- texte : 0%
- texte flou : 100%
Etape 2 :
- texte : 20%
- texte flou : 80%

Etape 3 :
- texte : 40%
- texte flou : 60%
Etape 4 :
- texte : 60%
- texte flou : 40%
Etape 5 :
- texte : 80%
- texte flou : 20%
Etape 6 :
- texte : 100%
- texte flou : 0%

Assurez vous que l'animation ne se déroulera qu'une seule fois en sélectionant Une fois dans l'option numéro 3

animation

Etape 3 : l'HTML

Faites Ctrl+Alt+P pour avoir un aperçu dans votre navigateur.

Si vous vous êtes bien débrouillé, le GIF animé devrait être affiché quand vous survolez l'image avec votre souris.

Vous pouvez remarquer en dessous de l'image, les options d'optimisation de l'image ainsi que le code html généré par ImageReady et les fonctions javascript "changeImages()" et "newImage()".

preview