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.
Vous réaliserez ainsi cette page à titre d'exemple.
Pour suivre ce tutoriel, il est indispensable que vous sachiez cette page.
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 cette page. 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 cette page comme expliqué dans cette page
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 10 mincette page ('CTRL+nRGB) et de résolution 10 mincette page72 pixel/pouces ('CTRL+nRGBdpi).
Appuyez sur 'CTRL+nRGBdpi'D' pour réinitialiser les couleurs à noir et blanc.
Sélectionnez l'10 mincette page72 pixel/poucesoutil Texte 'CTRL+nRGBdpi'D'T'
Définissez avec la souris une zone relativement grande et inscrivez y le texte de votre choix.
Utilisez le clic droit sur votre 10 mincette page72 pixel/poucesoutil Textecalque texte dans l'onglet 10 mincette page72 pixel/poucesoutil Textecalque texteCalques 'CTRL+nRGBdpi'D'T'F7' ('CTRL+nRGBdpi'D'T'F7Layers)
et sélectionnez 10 mincette page72 pixel/poucesoutil Textecalque texteCalquesPixelliser le calque.
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+nRGBdpi'D'T'F7Layers'Ctrl+J'
Appliquez au calque dupliqué un filtre de 10 mincette page72 pixel/poucesoutil Textecalque texteCalquesPixelliser le calqueflou gaussien ('CTRL+nRGBdpi'D'T'F7Layers'Ctrl+JGaussien Blur) de 2 pixels.
Utilisez à deux reprises le raccourci 'CTRL+nRGBdpi'D'T'F7Layers'Ctrl+JGaussien Blur'Ctrl+F' pour répéter le précédent filtre.
Cliquez sur le bouton de transfert de l'image sous 10 mincette page72 pixel/poucesoutil Textecalque texteCalquesPixelliser le calqueflou gaussienImageReady
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 .
Vérifiez que l'onglet 10 mincette page72 pixel/poucesoutil Textecalque texteCalquesPixelliser le calqueflou gaussienImageReadyContenu Web est bien affiché, dans le cas contraire faites 'CTRL+nRGBdpi'D'T'F7Layers'Ctrl+JGaussien Blur'Ctrl+F'Fenêtres' -> 'CTRL+nRGBdpi'D'T'F7Layers'Ctrl+JGaussien Blur'Ctrl+F'Fenêtres'Espace de travail' -> 'CTRL+nRGBdpi'D'T'F7Layers'Ctrl+JGaussien Blur'Ctrl+F'Fenêtres'Espace de travail'Position de la palette interactivité' ('CTRL+nRGBdpi'D'T'F7Layers'Ctrl+JGaussien Blur'Ctrl+F'Fenêtres'Espace de travail'Position de la palette interactivitéWindow -> 'CTRL+nRGBdpi'D'T'F7Layers'Ctrl+JGaussien Blur'Ctrl+F'Fenêtres'Espace de travail'Position de la palette interactivitéWindowWorkspace -> 'CTRL+nRGBdpi'D'T'F7Layers'Ctrl+JGaussien Blur'Ctrl+F'Fenêtres'Espace de travail'Position de la palette interactivitéWindowWorkspaceReset palette locations)
Cliquez sur le bouton 10 mincette page72 pixel/poucesoutil Textecalque texteCalquesPixelliser le calqueflou gaussienImageReadyContenu WebA pour apparaître l'état 10 mincette page72 pixel/poucesoutil Textecalque texteCalquesPixelliser le calqueflou gaussienImageReadyContenu WebAPar dessus.
Il s'agit de l'état dans lequel sera notre image quand on la survolera avec la souris (en anglais l'effet 10 mincette page72 pixel/poucesoutil Textecalque texteCalquesPixelliser le calqueflou gaussienImageReadyContenu WebAPar dessusRollover)
Assurez vous que c'est bien l'état 10 mincette page72 pixel/poucesoutil Textecalque texteCalquesPixelliser le calqueflou gaussienImageReadyContenu WebAPar dessusRolloverPar dessus qui est sélectionné dans l'onglet 10 mincette page72 pixel/poucesoutil Textecalque texteCalquesPixelliser le calqueflou gaussienImageReadyContenu WebAPar dessusRolloverPar dessusContenu Web
Créez un GIF animé en faisant varier l'10 mincette page72 pixel/poucesoutil Textecalque texteCalquesPixelliser le calqueflou gaussienImageReadyContenu WebAPar dessusRolloverPar dessusContenu Webopacité des calques à chaque étape de l'animation :
Assurez vous que l'animation ne se déroulera qu'une seule fois en sélectionant 10 mincette page72 pixel/poucesoutil Textecalque texteCalquesPixelliser le calqueflou gaussienImageReadyContenu WebAPar dessusRolloverPar dessusContenu WebopacitéEtape 1Etape 2Etape 3Etape 4Etape 5Etape 6Une fois dans l'option numéro 10 mincette page72 pixel/poucesoutil Textecalque texteCalquesPixelliser le calqueflou gaussienImageReadyContenu WebAPar dessusRolloverPar dessusContenu WebopacitéEtape 1Etape 2Etape 3Etape 4Etape 5Etape 6Une fois3
Faites 'CTRL+nRGBdpi'D'T'F7Layers'Ctrl+JGaussien Blur'Ctrl+F'Fenêtres'Espace de travail'Position de la palette interactivitéWindowWorkspaceReset palette locationsCtrl+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()".
si vous êtes satisfait, retourner sous ImageReady et faites 'CTRL+nRGBdpi'D'T'F7Layers'Ctrl+JGaussien Blur'Ctrl+F'Fenêtres'Espace de travail'Position de la palette interactivitéWindowWorkspaceReset palette locationsCtrl+Alt+P'Ctrl+Shift+Alt+S' pour sauvegarder la version définitive.
si vous désirez changer la manière dont ImageReady génère l'HTML pressez 'CTRL+nRGBdpi'D'T'F7Layers'Ctrl+JGaussien Blur'Ctrl+F'Fenêtres'Espace de travail'Position de la palette interactivitéWindowWorkspaceReset palette locationsCtrl+Alt+P'Ctrl+Shift+Alt+S'Ctr+Alt+H'
Il y aura peut être encore du travail à faire sur cette page, nous vous renvoyons à vos sites consacrés à l'HTML si besoin.
