Vous êtes sur la page 1sur 323

Utilisation dADOBE FIREWORKS CS5

Informations juridiques

Informations juridiques
Vous trouverez des informations juridiques l'adresse http://help.adobe.com/fr_FR/legalnotices/index.html.

Dernire mise jour le 12/5/2011

iii

Sommaire
Chapitre 1 : Nouveauts Meilleures performances et stabilit accrue Prcision des pixels Intgration d'Adobe Device Central Amlioration des extensions ............................................................................ 1 .................................................................................................... 1 .................................................................................... 1 ........................................................ 1

Flux de travail pris en charge avec Flash Catalyst et Flash Builder Partage du nuancier entre toutes les applications de la suite

........................................................................................... 1 ............................................................ 2

Chapitre 2 : Principes de base de Fireworks A propos de lutilisation de Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 Graphiques vectoriels et bitmap Cration dun document Fireworks Modles Ouverture et importation de fichiers ....................................................................................... 4 ..................................................................................... 5 ................................................................................... 6 ............................................................ 8 ........................................................................ 8

.............................................................................................................. 6

Cration de fichiers PNG Fireworks partir de fichiers HTML Insertion dobjets dans un document Fireworks Enregistrement de fichiers Fireworks Chapitre 3 : Espace de travail Principes de base de lespace de travail Modification dune zone de travail Aperu dans navigateur

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26

Navigation dans les documents et affichage de documents

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33

Annulation et rptition de plusieurs actions

Chapitre 4 : Slection et transformation dobjets Slection des objets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36 Modification dune slection Slection de pixels Edition dobjets slectionns Mise lchelle en 9 tranches . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38

Organisation de plusieurs objets

Chapitre 5 : Utilisation dimages bitmap Cration dimages bitmap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56 Modification dobjets bitmap Retouche des images bitmap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71

Ajustement des couleurs et des tons dune image bitmap Attnuation et accentuation des images bitmap Ajout de bruit une image

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73

Chapitre 6 : Utilisation des objets vectoriels Formes simples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74 formes automatiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Sommaire

iv

Formes libres

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89

Formes composes

Techniques spcifiques de retouche vectorielle

Chapitre 7 : Utilisation du texte Entre de texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97 Slection de texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99 Mise en forme et dition de texte

Chapitre 8 : Application de couleurs, de contours et de fonds Application de couleurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111 Enregistrement de nuanciers Panneau Kuler . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118

Application de contours et de fonds

Chapitre 9 : Utilisation des filtres dynamiques Application de filtres dynamiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129 Modification et personnalisation des filtres dynamiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133

Chapitre 10 : Calques, masques et fondus Calques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135 Masquage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152 Fusion et transparence

Chapitre 11 : Styles, symboles et adresses URL Styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157 Symboles URL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 170

Chapitre 12 : Tranches, survols et zones sensibles Cration et modification de tranches . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173 Tranches interactives . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188 Prparation des tranches pour lexportation Zones sensibles et cartes-images

Chapitre 13 : Cration de boutons et de menus contextuels Principes de base de la navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193 Cration de symboles de bouton Menus contextuels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 197 Modification de symboles de bouton

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 199

Chapitre 14 : Prototypage de sites Web et dinterfaces dapplications Flux de production de prototypage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205 Utilisation de pages Fireworks Cration de dispositions CSS Prototypage dapplications Flex . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216

Prototypage dapplications Adobe AIR

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Sommaire

Chapitre 15 : Cration danimations Notions de base sur les animations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218 Cration de symboles danimation Etats . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220 Modification de symboles danimation Utilisation des tats Interpolation

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 228 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 229

A propos des pelures doignon Prvisualisation dune animation Optimisation dune animation

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226

Utilisation danimations existantes

Cration danimations Torsion et Nuance Chapitre 16 : Cration de diaporamas Cration et organisation dun diaporama Personnalisation dun diaporama

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 234

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 232

Cration dun lecteur Fireworks personnalis

Chapitre 17 : Optimisation et exportation Utilisation de lassistant Exportation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 237 Utilisation de laperu de limage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 237 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 240 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 244 Optimisation dans lespace de travail Optimisation des fichiers JPEG

Optimisation des fichiers GIF, PNG, TIFF, BMP et PICT Exportation depuis lespace de travail

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 251 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265

Envoi dun document Fireworks comme pice jointe dun message lectronique

Chapitre 18 : Utilisation de Fireworks avec dautres applications Utilisation de Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 266 Utilisation de HomeSite, GoLive et dautres diteurs HTML Utilisation de Flash Utilisation dIllustrator Utilisation de Photoshop Utilisation de Director . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 275 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 276 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 282 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 284 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 289 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 292 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 295

Partage de mtadonnes dimage avec Adobe XMP

Aperu de documents Fireworks dans des mulateurs mobiles

Chapitre 19 : Automatisation des tches Recherche et remplacement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 297 Slection de la source de recherche Recherche et remplacement de texte Recherche et remplacement de polices Recherche et remplacement des couleurs Recherche et remplacement dURL Traitement par lots . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 298 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 298 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 299 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 299 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 299 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 300 Dfinition des options de recherche/remplacement dans plusieurs fichiers

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 299

Recherche et remplacement de couleurs non scurises pour le Web Utilisation de commandes pour le traitement par lots

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 300 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 304

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Sommaire

vi

Extension de Fireworks Scripts Gestion des commandes

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 306 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 309

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 307

Chapitre 20 : Prfrences et raccourcis clavier Dfinition des prfrences . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 311 Slection et personnalisation des raccourcis clavier Utilisation des fichiers de configuration A propos de la rinstallation de Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 315 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 316 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 317 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 317

Affichage du contenu du module (Mac OS uniquement)

Dernire mise jour le 12/5/2011

Chapitre 1 : Nouveauts
Meilleures performances et stabilit accrue
Nombreuses amliorations apportes aux outils les plus utiliss dans Fireworks pour vous aider renforcer votre
efficacit

Meilleures performances globales Meilleur contrle du placement des pixels des lments de conception Outil de trac transparent mis jour

Prcision des pixels


Une meilleure prcision du placement des pixels garantit des conceptions claires et nettes sur tous les priphriques. Correction rapide et facile des lments de conception qui ne figurent pas sur un pixel entier.

Intgration d'Adobe Device Central


L'utilisation d'Adobe Device Central permet de slectionner des profils pour les priphriques mobiles ou autres, pus cre un flux de travail automatis pour crer un projet Fireworks. Le projet reprend la taille d'cran et la rsolution du priphrique cible. Une fois la conception termine, vous pouvez en afficher un aperu sous diffrentes conditions au moyen des fonctionnalits d'mulation de Device Central. Vous pouvez galement crer des profils de priphriques personnaliss. Flux de conception pour priphriques mobiles amlior ce qui inclut l'mulation des conceptions interactives avec l'intgration d'Adobe Device Central.

Flux de travail pris en charge avec Flash Catalyst et Flash Builder


Crez des interfaces utilisateur avances et du contenu interactif utilisant de nouveaux flux de travail entre Fireworks et Flash Catalyst. Procdez la conception dans Fireworks et slectionnez des objets, des pages ou des documents entiers exporter au format FXG, un nouveau format graphique de type XML pour les outils de la plate-forme Adobe Flash. Exportez vos conceptions de faon efficace vers Flash Professional, Flash Catalyst et Flash Builder au moyen d'un script extensible personnalisable.

Amlioration des extensions


Bnficiez d'un meilleur contrle lorsque vous travaillez avec d'autres applications : API amliore prenant en charge les scripts d'exportation extensibles par l'utilisateur, le traitement par lots et le contrle avanc du format de fichiers FXG.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Nouveauts

Partage du nuancier entre toutes les applications de la suite


Meilleur contrle de la prcision des couleurs en exploitant la capacit de Fireworks partager les nuanciers entres les applications da Creative Suite. La possibilit de partager le format de fichiers ASE encourage l'change de couleurs unifies entre les concepteurs, y compris ceux qui utilisent Adobe Kuler.

Dernire mise jour le 12/5/2011

Chapitre 2 : Principes de base de Fireworks


A propos de lutilisation de Fireworks
Adobe Fireworks est un programme polyvalent de cration, ddition et doptimisation de graphiques Web. Vous pouvez crer et modifier des images bitmap et vectorielles, crer des effets pour le Web, tels que des survols et des menus contextuels, recadrer et optimiser des graphiques afin de rduire la taille de leur fichier et gagner du temps en automatisant les tches rptitives. Vous pouvez exporter ou enregistrer un document au format de fichier JPEG, GIF ou autre. Vous pouvez enregistrer ces fichiers avec des fichiers HTML comportant des tables HTML et du code JavaScript pour pouvoir les utiliser sur le Web. Pour visionner un didacticiel vido sur les principes de base de Fireworks, reportez-vous www.adobe.com/go/lrvid4032_fw_fr.

Dessin et modification dobjets vectoriels et bitmap


Le panneau Outils de Fireworks, organis en sections, regroupe des outils de dessin et ddition spcifiques aux objets vectoriels et bitmap. Loutil que vous slectionnez dtermine si lobjet que vous crez est un objet vectoriel ou bitmap. Aprs avoir dessin un objet ou trac du texte, toute une gamme doutils, deffets, de commandes et de techniques sont votre disposition pour enrichir vos graphiques ou crer des boutons de navigation interactifs. Vous pouvez galement importer et modifier des images, notamment aux formats JPEG, GIF, PNG et PSD.

Ajout dinteractivit aux graphiques


Les tranches et les zones sensibles sont des objets Web qui spcifient des zones interactives dans un graphique Web. Les tranches dcoupent une image en portions exportables auxquelles vous pouvez appliquer des comportements de survol, des animations et des liens URL (Uniform Ressource Locator). Sur une page Web, chaque tranche saffiche dans une cellule de tableau. Vous pouvez affecter rapidement des comportements de permutation dimages ou de survol des graphiques laide des poignes de survol par glisser-dposer sur des tranches et des zones sensibles. Vous pouvez crer des graphiques interactifs insolites destins la navigation sur des sites Web laide de lditeur de boutons et de lditeur de menu contextuel de Fireworks.

Optimisation et exportation des graphiques


Les fonctions doptimisation sophistiques de Fireworks vous permettent dobtenir lquilibre parfait entre taille de fichier et qualit daffichage des graphiques exports. Le type doptimisation dpend des besoins des utilisateurs et du contenu. Aprs loptimisation de vos graphiques, ltape suivante consiste les exporter afin de les utiliser sur le Web. A partir de votre document PNG source Fireworks, vous pouvez exporter divers types de fichiers, notamment des fichiers JPEG, GIF, GIF anim et des tables HTML contenant des images dcoupes, vers diffrents types de fichiers.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Principes de base de Fireworks

Graphiques vectoriels et bitmap


Les ordinateurs affichent les graphiques au format vectoriel ou bitmap. Comprendre la diffrence entre les deux formats vous aidera comprendre Fireworks, qui contient des outils vectoriels et bitmap et qui est capable douvrir ou dimporter les deux formats.

A propos des graphiques vectoriels


Les graphiques vectoriels reproduisent des images en utilisant des lignes et des courbes (appeles vecteurs) qui incluent des informations de couleur et de position. Par exemple, limage dune feuille peut tre dfinie par une srie de points dcrivant son contour La couleur de la feuille est dtermine par la couleur de son trac (le contour) et la couleur de la zone dlimite par ce trac (le fond).

Les graphiques vectoriels ne dpendent pas de la rsolution. Cela signifie que la qualit de laspect dun graphique vectoriel est conserve lorsque vous modifiez sa couleur, sa taille, sa forme ou sa position, ou que la rsolution du priphrique de sortie change.

A propos des graphiques bitmap


Les graphiques bitmap sont composs de points (pixels) organiss selon une grille. Lcran de votre ordinateur est une grande grille de pixels. Dans une version bitmap de la feuille, limage est dtermine par lemplacement et la valeur chromatique de lensemble des pixels de la grille. Chaque pixel est associ une couleur. Lorsque ces points sont affichs la bonne rsolution, ils sembotent comme les carreaux dune mosaque.

Lorsque vous modifiez un graphique bitmap, vous modifiez des pixels et non des lignes et des courbes. Ces graphiques bitmap dpendent de la rsolution, ce qui signifie que les donnes dcrivant limage sont conditionnes par une grille de taille spcifique. Lagrandissement dun graphique bitmap modifie la distribution des pixels dans la grille, ce qui peut rendre les bords de limage lgrement dentels. Laffichage dun graphique bitmap sur un priphrique de sortie dont la rsolution est infrieure celle de limage risque galement den altrer la qualit.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Principes de base de Fireworks

Cration dun document Fireworks


Les documents crs dans Fireworks sont enregistrs au format PNG (Portable Network Graphic). PNG est le format de fichier natif de Fireworks. Les graphiques crs dans Fireworks peuvent tre exports ou enregistrs sous divers formats graphiques et Web. Quels que soient les paramtres doptimisation et dexportation slectionns, le fichier PNG Fireworks dorigine est conserv afin de pouvoir le modifier plus tard trs facilement.

Cration dun nouveau document


1 Choisissez Fichier > Nouveau.

La bote de dialogue Nouveau document saffiche.

2 Entrez les paramtres du document, puis cliquez sur OK.

Remarque : utilisez la fentre contextuelle de la case de couleur Personnalise pour slectionner une couleur de zone de travail personnalise.

Dfinition des dimensions par dfaut pour le nouveau document


Lorsque vous ouvrez Fireworks pour la premire fois, les dimensions suivantes s'affichent dans la bote de dialogue Nouveau document par dfaut :

660 x 440 (Windows) 500 x 500 (Mac)


Les paramtres de la bote de dialogue Nouveau document restent inchangs lorsque vous modifiez la taille de la zone de travail dans Fireworks. Les paramtres par dfaut changent lorsque vous copiez un objet. Les dimensions de l'objet copi (dans le PressePapiers) sont reprises automatiquement par la bote de dialogue Nouveau document. Pour supprimer les dimensions d'un objet du Presse-papiers, procdez de la faon suivante (Windows) :
1 Crez un document avec les dimensions voulues. 2 Enregistrez ce document et fermez Fireworks. 3 Ouvrez nouveau Fireworks et crez un document.

Les dimensions du document enregistr prcdemment s'affichent dans la bote de dialogue Nouveau document.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Principes de base de Fireworks

Pour Mac OS, Fireworks conserve la dimension de l'objet copi prcdemment lors de la cration d'un document. Ceci est d au fat que le contenu du Presse-Papiers est conserv jusqu' ce que vous coupiez ou copiez d'autres lments, tels que du texte. Si vous copiez des lments sans rapport avec les dimensions, puis slectionnez Nouveau , la taille enregistre auparavant s'affiche par dfaut.

Cration dun document de la mme taille quun objet du Presse-papiers


1 Copiez un objet dans le Presse-papiers depuis un autre document Fireworks, un navigateur Web ou toute autre

application adquate.
2 Choisissez Fichier > Nouveau.

La bote de dialogue Nouveau document saffiche, prsentant la hauteur et la largeur de lobjet dans le Pressepapiers.
3 Slectionnez une rsolution et une couleur de zone de travail, puis cliquez sur OK. 4 Choisissez Edition > Coller pour coller dans le nouveau document lobjet en provenance du Presse-papiers.

Modles
Enregistrez un fichier Fireworks en tant que modle et crez des fichiers partir de ce modle. Le modle est enregistr au format PNG Fireworks. Fireworks propose une liste de modles personnaliss prdfinis pour les priphriques mobiles, prototypes, sites Web et cadres Web que vous personnalisez.

Cration dun modle


1 Crez un fichier. Vous pouvez ajouter des espaces rservs de cration ou de contenu afin duniformiser laspect

des documents crs partir de ce modle.


2 Slectionnez Fichier > Enregistrer comme modle pour enregistrer le fichier en tant que fichier de modle PNG

Fireworks.

Cration dun fichier partir dun modle


1 Slectionnez Fichier > Nouveau partir dun modle. 2 Slectionnez le modle souhait pour crer le fichier et cliquez sur Ouvrir.

Remarque : Le modle contient des donnes propres Fireworks, telles que des pages, calques et informations vectorielles.

Ouverture et importation de fichiers


Remarque : lorsque vous importez un fichier depuis Adobe Dreamweaver, Fireworks conserve la plupart des comportements JavaScript, mais pas tous. Si Fireworks prend en charge un comportement particulier, ce dernier est reconnu et conserv lorsque vous rimportez le fichier dans Dreamweaver.

Ouverture d'un document Fireworks


Choisissez Fichier > Ouvrir, puis slectionnez le fichier.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Principes de base de Fireworks

Pour ouvrir un fichier sans craser la version prcdente, cliquez sur Ouvrir en tant que Sans titre, puis enregistrez le fichier en utilisant un autre nom.

Ouverture dun fichier rcemment ferm


1 Choisissez Fichier > Ouvrir les fichiers rcents. 2 Slectionnez un fichier dans le sous-menu.

Ouverture dun fichier rcemment ferm lorsque aucun fichier nest ouvert
Cliquez sur le nom du fichier dans la page de dmarrage.

Ouverture de graphiques crs dans dautres applications


Vous pouvez ouvrir des fichiers crs dans dautres applications ou formats de fichier, notamment Photoshop, Adobe Illustrator, WBMP, EPS, JPEG, GIF et les fichiers GIF anims. Lorsque vous ouvrez un format de fichier autre que PNG en choisissant la commande Fichier > Ouvrir, vous crez un nouveau document PNG Fireworks bas sur le fichier que vous ouvrez. Vous pouvez utiliser toutes les fonctions de Fireworks pour modifier limage. Vous pouvez ensuite slectionner Enregistrer sous pour enregistrer votre travail dans un nouveau fichier PNG Fireworks, ou tout autre format. Dans certains cas, vous pouvez enregistrer le fichier sous son format dorigine. Le cas chant, tous les calques de limage fusionnent, ce qui empche dagir sur les fonctions Fireworks ajoutes limage. Vous pouvez enregistrer les formats de fichier suivants directement depuis Fireworks : PNG Fireworks, GIF, GIF anim, JPEG, BMP, WBMP, TIFF, SWF, AI, PSD et PICT (Mac uniquement). Remarque : Fireworks enregistre les images TIFF 16 bits une profondeur de couleur de 24 bits.

GIF anim
Importez un fichier GIF anim en tant que symbole danimation, puis modifiez et dplacez tous les lments de
lanimation en tant quune seule unit. Pour crer de nouvelles instances du symbole, servez-vous du panneau Bibliothque de documents. Remarque : lorsque vous importez un GIF anim, la cadence des tats est de 0,07 seconde par dfaut. Si ncessaire, utilisez le panneau Etats pour rtablir la cadence dorigine.

Ouvrez un fichier GIF anim de la mme manire quun fichier GIF ordinaire. Les lments du fichier GIF sont
placs en tant quimage distincte dans un tat de Fireworks. Dans Fireworks, vous pouvez convertir le graphique en un symbole danimation.

Fichiers EPS
Fireworks ouvre la plupart des fichiers EPS en tant quimages bitmap aplaties, dont tous les objets sont rassembls sur un seul et mme calque. Certains fichiers EPS exports partir dAdobe Illustrator conservent leurs informations vectorielles.

Fichiers PSD
Fireworks peut ouvrir des fichiers PSD crs dans Photoshop tout en conservant la plupart des fonctions PSD, notamment les calques hirarchiques, les effets de calques et les modes de fusion couramment utiliss. Pour personnaliser limportation PSD, faites appel aux diffrentes options du panneau Importation/Ouverture PS de la bote de dialogue Prfrences.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Principes de base de Fireworks

Fichiers WBMP
Fireworks peut ouvrir des fichiers WBMP. Il sagit de fichiers 1 bit (monochromes) qui ont t optimiss pour les priphriques dinformatique mobile. Ce format est conu pour les pages WAP (Wireless Application Protocol). Lextension Import Multiple Files permet dimporter plusieurs fichiers slectionns dans de nouvelles pages dun fichier PNG Fireworks. Cet utilitaire permet de regrouper les fichiers de projet crs dans des versions antrieures de Fireworks. Vous pouvez galement importer des fichiers PNG aplatis, PSD, AI, BMP, Freehand, GIF, GIF anims, JPEG, PICT et TIFF. Vous pouvez tlcharger cette extension sur la page http://www.adobe.com/go/learn_fw_multiplepages_fr.

Cration de fichiers PNG Fireworks partir de fichiers HTML


Dans Fireworks, vous pouvez ouvrir et importer des contenus HTML crs dans dautres applications et contenant des lments de table HTML.

Ouverture de la premire table dun fichier HTML


1 Choisissez Fichier > Ouvrir. 2 Slectionnez le fichier HTML contenant la table ouvrir, puis cliquez sur Ouvrir.

La premire table du fichier HTML saffiche dans une nouvelle fentre de document.

Importation de la premire table dun fichier HTML vers un document Fireworks ouvert
1 Choisissez Fichier > Importer. 2 Slectionnez le fichier HTML partir duquel vous voulez effectuer limportation, puis cliquez sur Ouvrir. 3 Cliquez pour placer le point dinsertion lendroit o vous souhaitez que la table importe apparaisse.

Remarque : Fireworks peut importer des documents qui utilisent un codage UTF-8 ainsi que ceux crits en XHTML.

Insertion dobjets dans un document Fireworks


Glissement dune image ou dun texte dans Fireworks
Utilisez la mthode du glisser-dposer pour importer des objets vectoriels, des images bitmap ou du texte partir dapplications prenant en charge ce procd.
A partir de lautre application, faites glisser lobjet ou le texte dans Fireworks.

Collage dans Fireworks


Lorsque vous collez dans Fireworks un objet copi partir dune autre application, cet objet est plac au centre du document actif. Vous pouvez coller depuis le Presse-papiers des objets ou du texte aux formats suivants :

Adobe FreeHand 7 ou version ultrieure

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Principes de base de Fireworks

Adobe Illustrator PNG PICT (Mac OS) DIB (Windows) BMP (Windows) Texte ASCII EPS WBMP TXT RTF
1 Dans lautre application, copiez lobjet ou le texte coller. 2 Dans Fireworks, collez lobjet ou le texte dans votre document.

Localisation des objets colls


Lemplacement des fichiers colls dpend de la slection :

Si au moins un objet dun seul calque est slectionn, lobjet coll est plac devant (empil directement au-dessus
de) lobjet slectionn sur ce mme calque.

Si le calque lui-mme est slectionn, ainsi que tous ses objets ou aucun dentre eux, lobjet coll est plac devant
(empil directement au-dessus de) lobjet suprieur (plac sur le dessus) de ce mme calque.

Si au moins deux objets de plusieurs calques sont slectionns, lobjet coll est plac devant (empil directement audessus de) lobjet suprieur (plac sur le dessus) du calque suprieur (du dessus).

Si le calque Web ou un objet du calque Web est slectionn, lobjet coll est plac devant (empil au-dessus de) tous
les autres objets du calque infrieur (du dessous). Remarque : le calque Web est un calque spcial qui contient tous les objets Web. Il est toujours plac en haut du panneau Calques.

Rchantillonnage des objets colls


Le rchantillonnage ajoute ou supprime des pixels dans une image bitmap redimensionne pour quelle se rapproche le plus possible de laspect de limage bitmap dorigine. Le rchantillonnage dune image bitmap dans une rsolution suprieure provoque gnralement une lgre perte de qualit. Le rchantillonnage une rsolution infrieure provoque toujours une perte de donnes et donc une perte de qualit.

Rchantillonnage dun objet bitmap par collage


1 Copiez lobjet bitmap dans le Presse-papiers de Fireworks ou dun autre programme. 2 Choisissez Edition > Coller dans Fireworks. 3 Si la rsolution de limage bitmap qui se trouve dans le Presse-papiers est diffrente de celle du document actif,

choisissez une option de rchantillonnage.


Oui Conserve la largeur et la hauteur initiales de limage bitmap colle, en ajoutant ou en supprimant des pixels en fonction des besoins.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Principes de base de Fireworks

10

Non Conserve tous les pixels dorigine, ce qui peut rendre la taille relative de limage colle plus grande ou plus petite que prvu.

Importation dun fichier PNG dans le calque dun document Fireworks


Lorsque vous importez des fichiers PNG Fireworks sur le calque actif du document Fireworks en cours, des zones sensibles et des tranches sont places sur le calque Web du document. Fireworks conserve les proportions de limage importe.
1 Dans le panneau Calques, slectionnez le calque dans lequel vous voulez importer le fichier. 2 Choisissez Fichier > Importer pour ouvrir la bote de dialogue Importer. 3 Accdez au fichier importer, puis cliquez sur Ouvrir. 4 Sur la zone de travail, positionnez le pointeur dimportation lendroit o vous voulez placer le coin suprieur

gauche de limage.
5 Procdez de lune des manires suivantes :

Cliquez pour importer limage en taille relle. Faites glisser le pointeur dimportation pour redimensionner limage importe.

Importation partir dun scanner ou dun appareil photo numrique


Vous pouvez importer des images partir dun scanner ou dun appareil photo numrique uniquement sil est compatible TWAIN (Windows) ou sil utilise la fonctionnalit de capture dimage intgre (Mac OS). Les images importes dans Fireworks partir dun appareil photo numrique ou dun scanner sont ouvertes en tant que nouveaux documents. Avant dimporter des images dans Fireworks, installez tous les pilotes, modules et modules externes ncessaires pour lappareil photo numrique ou le scanner. Le dossier des modules externes se trouve dans le dossier de lapplication Fireworks. Sous Mac OS, Fireworks recherche automatiquement les modules externes Photoshop Acquire dans ce dossier.

Direction de Fireworks vers les modules externes Photoshop Acquire


1 Dans Fireworks, choisissez Edition > Prfrences (Windows) ou Fireworks > Prfrences (Mac OS). 2 Cliquez sur la catgorie Modules externes. 3 Slectionnez Modules externes Photoshop, puis accdez au dossier des modules externes.

Si la bote de dialogue de slection du dossier de modules externes Photoshop (Windows) ou Choisissez un dossier (Mac OS) ne souvre pas automatiquement, naviguez jusquau dossier.

Importation dune image partir dun appareil photo numrique (Windows)


1 Connectez lappareil photo votre ordinateur. 2 Dans Fireworks, choisissez Fichier > Numrisation, puis slectionnez Acquisition Twain ou Source Twain. 3 Slectionnez la source des images et les images importer.

Linterface utilisateur de votre logiciel dappareil photo saffiche.


4 Suivez les instructions pour appliquer les paramtres.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Principes de base de Fireworks

11

Importation dune image partir dun appareil photo numrique (Mac OS)
1 Connectez lappareil photo votre ordinateur. 2 Dans Fireworks, choisissez Fichier > Acquisition, puis slectionnez Acquisition appareil photo ou Source appareil

photo.
3 Slectionnez lappareil photo et les images importer. 4 Suivez les instructions pour appliquer les paramtres.

Importation dune image partir dun scanner


1 Connectez le scanner votre ordinateur. 2 Installez le logiciel qui accompagne le scanner, si cela na pas dj t fait. 3 Procdez de lune des manires suivantes :

(Windows) Dans Fireworks, choisissez Fichier > Scanner, puis slectionnez Acquisition Twain ou
Source Twain.

(Mac OS) Dans Fireworks, choisissez Fichier > Acquisition, puis slectionnez Acquisition Twain ou
Source Twain. Remarque : pour la plupart des modules TWAIN ou des modules externes Photoshop Acquire, vous pouvez spcifier des options complmentaires dans dautres botes de dialogue.
4 Suivez les instructions pour appliquer les paramtres.

Enregistrement de fichiers Fireworks


Lorsque vous crez un document ou ouvrez des fichiers au format PSD ou HTML, choisissez la commande Fichier > Enregistrer pour crer un fichier PNG Fireworks. Les fichiers PNG Fireworks prsentent les avantages suivants :

Le fichier PNG source est toujours modifiable. Vous pouvez faire marche arrire et effectuer des modifications
supplmentaires, mme aprs lexportation du fichier dans le but de lutiliser sur le Web.

Vous pouvez dcouper en plusieurs tranches des graphiques complexes dans le fichier PNG et les exporter dans
diffrents formats et avec divers paramtres doptimisation. Si Fireworks met du temps enregistrer un document complexe, vous pouvez modifier dautres documents ouverts en attendant que lopration de sauvegarde se termine.

Enregistrement dun fichier Fireworks au format PNG pour lutiliser dans une version antrieure
1 Choisissez Fichier > Exporter. 2 Recherchez lemplacement o vous voulez enregistrer le fichier. 3 Si le fichier Fireworks contient plusieurs pages, slectionnez la commande Pages vers Fichiers dans le menu

contextuel Exporter.
4 Slectionnez Images ou PNG Fireworks dans la liste droulante Exporter en tant que. Si vous slectionnez Images,

chaque page est enregistre au format de fichier par dfaut. Vous pouvez dfinir ce format de fichier via le panneau Optimisation. Pour plus de dtails, reportez-vous la section Optimisation et exportation la page 237.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Principes de base de Fireworks

12

Tous les objets des calques suprieurs sont enregistrs lors de lexportation. Les lments des calques infrieurs ne sont pas exports.

Enregistrement de tous les documents ouverts


Vous pouvez enregistrer tous les documents ouverts tout en continuant de travailler dessus. Vous pouvez galement spcifier des noms de fichiers pour les documents ne portant pas de nom. Les documents qui ont t modifis depuis le dernier enregistrement apparaissent avec un astrisque (*) ct du nom du fichier dans longlet du document.
Choisissez Commandes > Enregistrer tout.

Remarque : Lutilitaire Auto Backup de Fireworks permet de sauvegarder automatiquement tous les documents Fireworks ouverts. Pour le tlcharger partir dAdobe AIR Marketplace, accdez http://www.adobe.com/go/learn_fw_autobackuputility_fr.

Enregistrement de documents dans dautres formats


Si vous choisissez la commande Fichier > Ouvrir pour ouvrir un fichier dans un format autre que PNG, vous pouvez ensuite slectionner la commande Fichier > Enregistrer sous pour sauvegarder votre travail en tant que nouveau fichier PNG Fireworks ou dans un autre format. Pour les types de fichier suivants, vous pouvez choisir la commande Fichier > Enregistrer pour sauvegarder le document dans son format dorigine : PNG Fireworks, GIF, GIF anim, JPEG, BMP, WBMP, TIFF, SWF, AI, PSD et PICT (Mac OS uniquement). Fireworks enregistre les images TIFF 16 bits une profondeur de couleur de 24 bits. Remarque : si vous enregistrez un fichier PNG en tant que fichier bitmap, tel que GIF ou JPEG, les objets graphiques que vous avez manipuls dans le fichier PNG ne sont plus disponibles dans le fichier bitmap. Si vous retouchez limage, ditez le fichier PNG source, puis exportez-le de nouveau.

Ajout dune image


1 Slectionnez Commandes > Cration > Ajouter image. 2 Slectionnez un motif et dfinissez une taille de cadre. 3 Cliquez sur OK.

Rinitialisation des messages davertissement


Si vous avez dsactiv laffichage des messages davertissement, vous pouvez de nouveau les activer.
Slectionnez Commandes > Rinit. Mess. Avertissement.

Capture dcran (Windows uniquement)


1 Slectionnez Commandes > Capturer. 2 Accdez la fentre dans laquelle vous souhaitez effectuer une capture dcran. 3 Cliquez sur OK et faites glisser le pointeur pour slectionner la zone de la fentre. 4 Collez le contenu du Presse-papiers sur la zone de travail ou dans lapplication de retouche dimage.

Dernire mise jour le 12/5/2011

13

Chapitre 3 : Espace de travail


Principes de base de lespace de travail
Prsentation de lespace de travail Fireworks
Lorsque vous ouvrez pour la premire fois un document dans Adobe Fireworks, lespace de travail se compose du panneau Outils, de linspecteur des proprits, des menus et dautres panneaux. Le panneau Outils, gauche de lcran, contient des catgories tiquetes comprenant les groupes doutils bitmap, vectoriels et Web. Linspecteur des proprits apparat par dfaut en bas du document et affiche initialement les proprits du document. Il change ensuite pour afficher les proprits dun outil nouvellement slectionn ou dun objet actuellement slectionn lorsque vous travaillez dans le document. Les panneaux sont initialement ancrs en groupes le long du bord droit de lcran. La fentre du document apparat au centre du programme.

Page de dmarrage
Lorsque vous lancez Fireworks sans ouvrir de document, la page de dmarrage de Fireworks saffiche dans lenvironnement de travail. Cette page vous permet daccder rapidement aux didacticiels Fireworks, aux fichiers rcents et Fireworks Exchange, do vous pouvez amliorer les fonctions de Fireworks. Pour dsactiver la page de dmarrage, cliquez sur Ne plus afficher cette fentre lorsque la page de dmarrage souvre.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Espace de travail

14

A propos des panneaux dans Fireworks


Les panneaux sont des commandes flottantes qui permettent de modifier laspect dun objet slectionn ou des lments du document. Ils permettent, entre autres, de travailler sur des tats, des calques, des symboles et des nuanciers. Il est possible de faire glisser les panneaux de faon les disposer en fonction de vos prfrences.
Panneau Optimisation Il permet de grer les paramtres de taille et de type dun fichier et de travailler avec la palette

de couleurs du fichier ou de la tranche.


Panneau Calques Il structure un document et fournit des options de cration de suppression et de manipulation de

calques.
Panneau Bibliothque commune Il affiche le contenu du dossier Common Library contenant des symboles. Vous

pouvez facilement faire glisser des occurrences de ces symboles du panneau Bibliothque de documents vers votre document.
Panneau Pages Il vous permet dafficher les pages du fichier actif et comporte des options de manipulation des pages. Etats, panneau Il affiche les tats du fichier actif et comporte des options de cration danimations. Historique, panneau Il rpertorie les commandes que vous avez utilises rcemment de faon vous permettre de les annuler et de les rtablir rapidement. En outre, vous pouvez slectionner plusieurs actions puis les enregistrer et les rutiliser comme des commandes. Panneau Formes automatiques Il contient les formes automatiques qui ne sont pas affiches dans le panneau Outils. Panneau Styles Il vous permet de stocker et de rutiliser des combinaisons de caractristiques dobjets ou de slectionner un style stock. Panneau Bibliothque de documents Il contient des symboles graphiques, de bouton et danimation qui figurent dj

dans le document Fireworks actif. Vous pouvez facilement faire glisser les occurrences de ces symboles du panneau Bibliothque de documents vers votre document. Vous pouvez modifier lensemble des occurrences en modifiant uniquement le symbole.
URL, panneau Il vous permet de crer des bibliothques contenant des URL frquemment utilises. Panneau Mlangeur Il permet de crer de nouvelles couleurs et de les ajouter la palette de couleurs du document actif, ou de les appliquer aux objets slectionns. Panneau Nuancier Il gre la palette de couleurs du document actif. Panneau Info Il fournit des informations sur les dimensions des objets slectionns et les coordonnes exactes du pointeur au cours de son dplacement dans la zone de travail. Panneau Comportements Il permet de grer les comportements qui dterminent ce qui se produit lorsque des zones

sensibles ou des tranches ragissent aux dplacements de la souris.


Panneau Rechercher Il vous permet de rechercher et de remplacer des lments tels que du texte, des URL, des polices

et des couleurs dans un ou plusieurs documents.


Panneau Alignement Il regroupe les commandes dalignement et de rpartition des objets dans la zone de travail. Panneau Proprits de forme automatique Il vous permet de modifier les proprits dune forme automatique aprs

lavoir insre dans votre document.


Panneau Palette de couleurs (Fentre > Autres) Il vous permet de crer et dchanger des palettes de couleurs, dexporter des nuanciers ACT personnaliss, dexplorer les diffrentes gammes de couleur et daccder aux contrles couramment utiliss pour choisir des couleurs. Panneau Edition dimages (Fentre > Autres) Il vous permet dorganiser les outils et les options utiliss pour modifier

les objets bitmap dans un panneau.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Espace de travail

15

Panneau Trac (Fentre > Autres) Il vous permet daccder rapidement de nombreuses commandes associes aux

tracs.
Panneau Caractres spciaux (Fentre > Autres) Il vous permet dafficher les caractres spciaux utilisables dans les

blocs de texte.
Panneau Proprits du symbole Il gre les proprits personnalisables des symboles graphiques.

Prsentation de lespace de travail


Vous pouvez crer et manipuler vos documents et fichiers laide de divers lments tels que des panneaux, barres et fentres. Un espace de travail dsigne lorganisation de ces lments. Les espaces de travail des diffrentes applications de la suite Adobe Creative Suite 5 ont une apparence similaire, facilitant ainsi le passage dune application une autre. Vous pouvez galement adapter chaque application aux exigences de votre travail, en crant votre propre espace de travail ou en effectuant une slection parmi ceux prdfinis. Bien que la disposition de lespace de travail par dfaut varie selon les applications, la manipulation des lments est pratiquement identique dans chacune delles.
A B C D

E G

F H

Espace de travail Illustrator par dfaut A. Documents sous forme donglets B. Barre dapplication C. Slecteur d'espace de travail D. Barre de titre de panneau E. Panneau Contrle F. Panneau Outils G. Bouton de rduction la taille dune icne H. Quatre groupes de panneaux en ancrage vertical

La barre dapplication occupe la partie suprieure et contient un slecteur permettant de basculer vers un autre
espace de travail, des menus (sous Windows uniquement), ainsi que dautres commandes dapplication. Sous Mac et pour certains produits, vous pouvez lafficher ou la masquer laide du menu Fentre.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Espace de travail

16

Le panneau Outils contient des outils permettant de crer et de modifier des images, des illustrations, des lments
de page, etc. Les outils connexes sont regroups.

Le panneau Contrle affiche des options relatives loutil slectionn. Dans Illustrator, le panneau Contrle affiche
des options relatives lobjet slectionn. (Il est appel Barre doptions dans Adobe Photoshop. Dans Adobe Flash, Adobe Dreamweaver et Adobe Fireworks, il est appel Inspecteur de proprits et inclut les proprits relatives llment actuellement slectionn.)

La fentre de document affiche le fichier sur lequel vous travaillez. Les fentres de document peuvent prsenter un
onglet et, dans certains cas, tre regroupes et ancres.

Les panneaux vous permettent de contrler et de modifier votre travail. Citons notamment le panneau Montage
dans Adobe Flash, le panneau Pinceau dans Adobe Illustrator, le panneau Calques dans Adobe Photoshop et le panneau Styles CSS dans Adobe Dreamweaver. Ils peuvent tre regroups, empils ou ancrs.

Le Cadre de lapplication regroupe tous les lments des espaces de travail dans une seule et mme fentre uniforme,
ce qui permet de manipuler toutes les applications comme sil sagissait dune seule entit. Lorsque vous dplacez ou que vous redimensionnez le Cadre de lapplication ou lun de ses lments, tous les lments quil contient sont ragencs pour viter tout chevauchement. Les panneaux ne disparaissent pas lorsque vous changez dapplication ou lorsque vous cliquez par erreur ct de lapplication. Si vous utilisez plusieurs applications, vous pouvez les placer cte cte lcran ou sur plusieurs moniteurs. Si vous prfrez linterface utilisateur Mac classique que vous pouvez personnaliser votre convenance, il vous suffit de dsactiver le Cadre de lapplication. Dans Adobe Illustrator par exemple, slectionnez la commande Fentre > Cadre de lapplication pour lactiver ou le dsactiver. (Dans Flash, le Cadre de l'application est activ en permanence pour Mac et Dreamweaver pour Mac n'en utilise pas.)

Affichage et masquage de tous les panneaux


(Illustrator, Adobe InCopy, Adobe InDesign, Photoshop, Fireworks) Pour afficher ou masquer tous les panneaux,
y compris les panneaux Outils et Contrle, appuyez sur la touche de tabulation.

(Illustrator, InCopy, InDesign, Photoshop) Pour afficher ou masquer tous les panneaux, lexception des panneaux
Outils et Contrle, appuyez sur les touches Maj+tabulation. Vous pouvez afficher temporairement les panneaux masqus si loption Afficher automatiquement les panneaux masqus est slectionne dans les prfrences Interface. Cette option est toujours active dans Illustrator. Dplacez le pointeur vers le bord de la fentre de lapplication (Windows) ou vers le bord de lcran (Mac OS) et laissez le pointeur au-dessus de la bande qui saffiche.

(Flash, Dreamweaver, Fireworks) Pour afficher ou masquer tous les panneaux, appuyez sur la touche F4.

Affichage des options de panneau


Cliquez sur licne de menu de panneau

dans le coin suprieur droit du panneau.

Louverture dun menu est possible mme lorsque le panneau est rduit. Dans Photoshop, vous pouvez modifier le corps de la police du texte des panneaux et des info-bulles. Dans les prfrences dinterface, choisissez une option dans le menu Corps de la police de linterface utilisateur.

Rglage de la luminosit du panneau (Illustrator)


Faites glisser le curseur Luminosit dans les prfrences de linterface utilisateur. Cette commande affecte tous les

panneaux, y compris le panneau Contrle.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Espace de travail

17

Reconfiguration du panneau Outils


Vous pouvez afficher les outils du panneau Outils dans une seule colonne ou cte cte dans deux colonnes. (Cette fonction nest pas disponible dans le panneau Outils de Fireworks et Flash.) Dans InDesign et InCopy, une option des prfrences dinterface vous permet galement de basculer dun affichage en une colonne vers un affichage en deux colonnes.
Cliquez sur la double flche dans la partie suprieure du panneau Outils.

Gestion des fentres et des panneaux


Pour crer un espace de travail personnalis, vous dplacez et manipulez les fentres de document et les panneaux. Vous pouvez galement enregistrer des espaces de travail, puis passer de lun lautre. Dans Fireworks, renommer les espaces de travail personnaliss peut provoquer un comportement inattendu. Remarque : les exemples suivants sont bass sur Photoshop. Lespace de travail est le mme dans tous les produits.

Rorganisation, ancrage ou dplacement des fentres de document


Les fentres de document comportent des onglets lorsque plusieurs fichiers sont ouverts.

Pour modifier lordre des onglets de la fentre de document, faites glisser un onglet de la fentre lemplacement
voulu dans le groupe.

Pour annuler lancrage dune fentre de document un groupe de fentres, faites glisser longlet de cette fentre
hors du groupe. Remarque : dans Photoshop, vous pouvez galement slectionner Fentre > Rorganiser > Afficher dans une fentre flottante pour afficher une seule fentre flottante de document ou Fentre > Rorganiser > Tout afficher dans des fentres flottantes pour afficher simultanment toutes les fentres flottantes de document. Pour plus dinformations, voir la note technique kb405298. Remarque : Dreamweaver ne prend pas en charge lancrage des fentres de document ni son annulation. Utilisez le bouton Rduire de la fentre de document pour crer des fentres flottantes (sous Windows), ou Fentre > Mosaque verticale pour crer des fentres de document cte cte. Pour plus dinformations sur cette rubrique, recherchez Mosaque verticale dans laide de Dreamweaver. Le flux de travaux diffre lgrement pour les utilisateurs Macintosh.

Pour ancrer une fentre de document un groupe de fentres de document distinct, faites glisser cette fentre dans
le groupe.

Pour crer des groupes de documents empils ou juxtaposs, faites glisser la fentre vers lune des zones de largage
situes en haut, en bas ou sur les cts dune autre fentre. Vous pouvez galement slectionner une disposition pour le groupe en utilisant le bouton Disposition de la barre dapplication. Remarque : certains produits ne prennent pas en charge cette fonctionnalit. Cependant, votre produit peut prsenter des commandes Cascade et Mosaque (ou Juxtaposer), sous le menu Fentre, pour vous permettre dorganiser vos documents.

Dans un groupe onglets, pour passer un autre document lors du glissement dune slection, faites glisser cette
slection sur longlet du document souhait pendant un moment. Remarque : certains produits ne prennent pas en charge cette fonctionnalit.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Espace de travail

18

Ancrage et annulation dancrage de panneaux


Un dock est un ensemble de panneaux ou de groupes de panneaux affichs ensemble, gnralement en position verticale. Pour ancrer et annuler lancrage des panneaux, insrez-les dans le dock et dplacez-les hors du dock.

Pour ancrer un panneau, cliquez sur longlet correspondant et faites-le glisser dans le dock, au-dessus, sous ou entre
dautres panneaux.

Pour ancrer un groupe de panneaux, cliquez sur sa barre de titre (barre vide de couleur unie situe au-dessus des
onglets) et faites-le glisser dans le dock.

Pour supprimer un panneau ou un groupe de panneaux, faites-le glisser en dehors du dock en cliquant sur longlet
ou la barre de titre. Vous pouvez faire glisser llment vers un autre dock ou le rendre flottant.

Dplacement du panneau Navigation vers un nouveau dock ; cette opration est indique par une surbrillance verticale bleue.

Panneau Navigation dans son propre dock

Vous pouvez faire en sorte que les panneaux noccupent pas la totalit de lespace disponible dans un dock. Faites glisser le bord infrieur du dock vers le haut de sorte quil ne concide plus avec le bord de lespace de travail.

Dplacement de panneaux
Lorsque vous dplacez des panneaux, des zones de largage en surbrillance bleue apparaissent : il sagit des zones dans lesquelles vous pouvez dplacer le panneau. Vous pouvez, par exemple, dplacer un panneau vers le haut ou vers le bas en le faisant glisser sur la fine zone de largage bleue situe au-dessus ou sous un autre panneau. Si vous faites glisser le panneau vers un emplacement autre quune zone de largage, ce dernier flotte dans lespace de travail. Remarque : la position de la souris active la zone de largage (au lieu de la position du panneau). Si la zone de largage ne s'affiche pas, faites glisser la souris l'emplacement o devrait se situer la zone de largage.

Pour dplacer un panneau, faites-le glisser en cliquant sur son onglet. Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Espace de travail

19

Pour dplacer un groupe de panneaux, faites glisser la barre de titre.


A B

La fine zone de largage bleue indique que le panneau Couleur va tre ancr seul au-dessus du groupe de panneaux Calques. A. Barre de titre B. Onglet C. Zone de largage

Pour empcher lancrage dun panneau, appuyez sur la touche Ctrl (Windows) ou Commande (Mac OS) lors de son dplacement. Pour annuler lopration, appuyez sur la touche Echap lors du dplacement du panneau.

Ajout et suppression de panneaux


Lorsque vous supprimez tous les panneaux dun dock, ce dernier disparat. Vous pouvez crer un dock en dplaant les panneaux vers le bord droit de lespace de travail jusqu ce quune zone de largage soit visible.

Pour supprimer un panneau, cliquez sur son onglet avec le bouton droit de la souris (Windows) ou en appuyant
sur la touche Contrle (Mac), puis slectionnez loption Fermer ; vous pouvez galement le dslectionner dans le menu Fentre.

Pour ajouter un panneau, slectionnez-le dans le menu Fentre et ancrez-le lemplacement de votre choix.

Manipulation de groupes de panneaux


Pour dplacer un panneau dans un groupe, faites glisser son onglet vers la zone de largage en surbrillance situe
dans le groupe.

Ajout dun panneau un groupe

Pour rorganiser les panneaux dun groupe, faites glisser longlet du panneau de votre choix vers son nouvel
emplacement.

Pour rendre un panneau flottant, faites-le glisser en dehors du groupe au moyen de son onglet. Pour dplacer un groupe, faites glisser la barre de titre (zone situe au-dessus des onglets).

Empilage de panneaux flottants


Lorsque vous faites sortir un panneau de son dock et que vous le placez en dehors de toute zone de largage, ce panneau flotte dans lespace de travail. Un panneau flottant peut tre plac nimporte quel endroit dans lespace de travail. Vous pouvez empiler des panneaux ou groupes de panneaux flottants de sorte quils se comportent comme une seule entit lorsque vous faites glisser la barre de titre suprieure.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Espace de travail

20

Panneaux empils flottants

Pour empiler des panneaux flottants, cliquez sur un onglet pour faire glisser le panneau correspondant vers la zone
de largage situe au bas dun autre panneau.

Pour modifier lordre dempilage, cliquez sur un onglet afin de faire glisser le panneau correspondant vers le haut
ou vers le bas. Remarque : prenez soin de dposer longlet sur ltroite zone de largage situe entre les panneaux, plutt que sur la large zone de largage situe dans une barre de titre.

Pour rendre un panneau ou groupe de panneaux de la pile flottant, dplacez-le hors de la pile au moyen de son
onglet ou de sa barre de titre.

Redimensionnement des panneaux


Pour rduire ou agrandir un panneau, un groupe de panneaux ou une pile de panneaux, cliquez deux fois sur un
onglet. Vous pouvez galement double-cliquer sur la zone donglets (lespace vide situ ct des onglets).

Pour redimensionner un panneau, faites glisser lun de ses cts. Cette mthode de redimensionnement ne
fonctionne pas toujours, notamment avec le panneau Couleur de Photoshop.

Rduction et dveloppement des icnes de panneaux


Vous pouvez rduire des panneaux la taille dicnes afin de limiter lencombrement de lespace de travail. Dans certains cas, les panneaux sont rduits de la sorte dans lespace de travail par dfaut.

Panneaux rduits la taille dicnes

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Espace de travail

21

Panneaux agrandis

Pour rduire ou dvelopper toutes les icnes de panneau dune colonne, cliquez sur la double flche situe dans la
partie suprieure du dock.

Pour dvelopper une seule icne de panneau, cliquez sur cette dernire. Pour redimensionner les icnes de panneau afin de voir les icnes uniquement (et non les libells), rglez la largeur
du dock jusqu ce que le texte ne soit plus visible. Pour afficher nouveau le texte, augmentez la largeur du dock.

Pour rduire la taille dune icne un panneau qui a t dvelopp, cliquez sur son onglet, sur son icne ou sur la
double flche affiche dans sa barre de titre. Dans certaines applications, si vous slectionnez loption Rduction automatique des panneaux dicnes dans les prfrences dinterface ou les options dinterface utilisateur, une icne de panneau dveloppe est rduite automatiquement lorsque vous cliquez en dehors de cette dernire.

Pour ajouter un panneau flottant ou un groupe de panneaux un dock dicnes, faites-le glisser au moyen de son
onglet ou de sa barre de titre (les panneaux sont rduits automatiquement la taille dicnes lorsque vous les ajoutez un dock dicnes).

Pour dplacer une icne de panneau (ou un groupe dicnes de panneau), faites-la glisser. Vous pouvez dplacer
des icnes de panneau vers le haut et vers le bas dans le dock, dans dautres docks (elles apparaissent dans le style du panneau de ce dock) ou en dehors du dock (elles apparaissent sous la forme d'icnes flottantes).

Utilisation de ConnectNow
Adobe ConnectNow met votre disposition une salle de runion en ligne scurise et personnelle, o vous pouvez rencontrer dautres personnes et collaborer avec elles sur le Web en temps rel. Grce ConnectNow, vous pouvez partager et annoter votre cran dordinateur, envoyer des messages instantans et communiquer laide de la fonction audio intgre. Vous pouvez galement diffuser des vidos en temps rel, partager des fichiers, capturer des comptes rendus et contrler lordinateur dun participant. Vous pouvez accder ConnectNow directement partir de linterface de lapplication.
1 Choisissez la commande Fichier > Partager mon cran. 2 Dans la bote de dialogue Se connecter Adobe CS Live, entrez votre adresse de messagerie lectronique et votre

mot de passe, puis cliquez sur le bouton Se connecter. Si vous ne disposez pas dID Adobe, cliquez sur le bouton Crer un ID Adobe.
3 Pour partager votre cran, cliquez sur le bouton Partager lcran de mon ordinateur, au centre de la fentre de

lapplication ConnectNow. Pour obtenir des instructions compltes sur lutilisation de ConnectNow, rendez-vous sur http://help.adobe.com/fr_FR/Acrobat.com/ConnectNow/index.html. Pour accder au didacticiel vido sur l'utilisation de ConnectNow, consultez la page Web Using ConnectNow to share your screen (7:12) (cette prsentation est effectue dans Dreamweaver).

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Espace de travail

22

Enregistrement et basculement dun espace de travail lautre


En enregistrant la taille et la position actuelles des panneaux comme espace de travail nomm, vous gardez la possibilit de restaurer cet espace par la suite, et ce, mme si vous avez dplac ou ferm un panneau. Les noms des espaces de travail enregistrs sont visibles dans le slecteur despace de travail de la barre dapplication.

Enregistrement dun espace de travail personnalis


1 Lorsque lespace de travail se trouve dans la configuration que vous souhaitez enregistrer, utilisez lune des

mthodes suivantes :

(Illustrator) Choisissez la commande Fentre > Espace de travail > Enregistrer lespace de travail. (Photoshop, Illustrator, InCopy) Choisissez la commande Fentre > Espace de travail > Nouvel espace de
travail.

(Dreamweaver) Choisissez la commande Fentre > Prsentation de lespace de travail > Nouvel espace de
travail.

(Flash) Choisissez la commande Nouvel espace de travail dans le slecteur despace de travail de la barre
dapplication.

(Fireworks) Choisissez la commande Enregistrer la prsentation active dans le slecteur despace de travail de la
barre dapplication.
2 Attribuez un nom lespace de travail. 3 (Photoshop, InDesign) Slectionnez ensuite une ou plusieurs options dans la section Capture :
Position des panneaux Enregistre la position actuelle des panneaux (InDesign uniquement). Raccourcis clavier Enregistre lensemble de raccourcis clavier actuel (Photoshop seulement). Menus ou Personnalisation des menus Enregistre lensemble de menus actuels.

Affichage de lespace de travail ou basculement dun espace de travail lautre


Slectionnez un espace de travail dans le slecteur despace de travail de la barre dapplication.

Dans Photoshop, vous pouvez attribuer un raccourci clavier chacun des espaces de travail pour pouvoir passer de lun lautre plus rapidement.

Suppression dun espace de travail personnalis


Choisissez loption Grer les espaces de travail dans le slecteur despace de travail de la barre dapplication,
slectionnez lespace de travail, puis cliquez sur la commande Supprimer. (Cette option nest pas disponible dans Fireworks.)

(Photoshop, InDesign, InCopy) Slectionnez la commande Supprimer lespace de travail dans le slecteur despace
de travail.

(Illustrator) Choisissez la commande Fentre > Espace de travail > Grer les espaces de travail, slectionnez lespace
de travail, puis cliquez sur licne Supprimer.

(Photoshop, InDesign) Choisissez la commande Fentre > Espace de travail > Supprimer lespace de travail,
slectionnez lespace de travail, puis cliquez sur le bouton Supprimer.

Restauration de lespace de travail par dfaut


1 Slectionnez lespace de travail de base ou par dfaut laide du slecteur situ dans la barre dapplication. Pour

Fireworks, consultez larticle http://www.adobe.com/devnet/fireworks/articles/workspace_manager_panel.html.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Espace de travail

23

Remarque : dans Dreamweaver, Designer correspond lespace de travail par dfaut.


2 Pour Fireworks (Windows), supprimez les dossiers suivants :
Windows Vista \\utilisateur\<nom utilisateur>\AppData\Roaming\Adobe\Fireworks CS4\ Windows XP \\Documents and Settings\<nom utilisateur>\Application Data\Adobe\Fireworks CS4

3 (PhotoShop, InDesign, InCopy) Choisissez la commande Fentre > Espace de travail > Rinitialiser [Nom de

lespace de travail].

(Photoshop) Restauration d'une disposition despace de travail enregistre


Dans Photoshop, les espaces de travail saffichent automatiquement en fonction de leur dernire disposition, mais vous pouvez restaurer la disposition dorigine des panneaux.

Pour restaurer un espace de travail individuel, slectionnez Fentre > Espace de travail > Rinitialiser Nom de
lespace de travail.

Pour restaurer tous les espaces de travail installs avec Photoshop, cliquez sur Restaurer les espaces de travail par
dfaut dans les prfrences dinterface. Pour rorganiser l'ordre des espaces de travail de la barre dapplication, faites-les glisser.

Panneau Outils
Le panneau Outils est organis en six catgories : Slection, Bitmap, Vecteur, Web, Couleurs et Affichage. Lorsque vous slectionnez un outil, linspecteur des proprits affiche les options de loutil.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Espace de travail

24

Affichage des options de loutil dans linspecteur des proprits


Une fois que vous avez slectionn un outil, choisissez Slection > Dslectionner pour dslectionner tous les

objets de la zone de travail.

Slection dun outil parmi un groupe doutils


Un petit triangle dans le coin infrieur droit dun outil dans le panneau Outils indique quil fait partie dun groupe doutils.

1 Cliquez sur licne de loutil, puis maintenez enfonc le bouton de la souris. 2 Faites glisser le pointeur afin de slectionner loutil souhait, puis relchez le bouton de la souris.

Pour slectionner rapidement un outil masqu, appuyez plusieurs fois sur le raccourci clavier du groupe, jusqu ce que loutil recherch apparaisse. (Les raccourcis figurent entre parenthses en regard des noms doutils.)

Inspecteur des proprits


Linspecteur des proprits est un panneau contextuel qui affiche les proprits de la slection active, les options de loutil actif ou les proprits du document. Par dfaut, linspecteur des proprits est ancr au bas de lespace de travail. Linspecteur des proprits prsente deux lignes de proprits sil est affich mi-hauteur, ou quatre en pleine hauteur. Vous pouvez galement masquer totalement linspecteur des proprits en le laissant dans lespace de travail. Remarque : sous Windows, le menu Options est disponible uniquement lorsque linspecteur des proprits est ancr.

Dtachement de linspecteur des proprits


Faites glisser longlet du panneau vers une autre zone de lespace de travail.

Ancrage de linspecteur des proprits dans la partie infrieure de lespace de travail


Faites glisser longlet du panneau vers la partie infrieure de lcran.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Espace de travail

25

Dveloppement ou rduction de linspecteur Proprits


Procdez de lune des manires suivantes :

Cliquez deux fois sur longlet du panneau.

Cliquez sur la flche situe dans langle suprieur gauche du panneau.

Affichage et dplacement des barres doutils (Windows uniquement)


Affichage ou masquage dune barre doutils
Choisissez Fentre > Barres doutils, puis slectionnez lune des options suivantes : Principale Affiche une barre doutils au-dessus de la fentre du document, avec des boutons de commande couramment utiliss tels que Ouvrir, Enregistrer, Imprimer et Copier. Modifier Affiche une barre doutils au-dessous de la fentre du document, avec des boutons utiliss pour le

regroupement, la disposition, lalignement et la rotation.

Dtachement dune barre doutils


Faites glisser la barre doutils hors de son lieu dancrage.

Ancrage dune barre doutils (Windows uniquement)


Faites glisser la barre doutils vers une zone dancrage, en haut de la fentre de lapplication jusqu lapparition du

rectangle daperu demplacement.

Verrouillage dun fichier pour empcher toute modification lors de son enregistrement
Si vous tentez de modifier un document lors de son enregistrement, il se peut que Fireworks ne rponde plus. Lorsque vous rglez AsynchronousSave sur true dans le fichier preferences.txt, Fireworks verrouille le fichier pour empcher sa modification jusqu ce que lenregistrement soit termin. Libre vous cependant dintervenir sur dautres documents Fireworks ouverts. Les objets mis jour pendant l'opration d'enregistrement ne sont pas mis jour en mode AsynchronousSave. Dfinissez AsynchronousSave=false dans le fichier preferences.txt lorsque vous manipulez ce type d'objets. Par exemple, la fonction d'horodatage de l'enregistrement des formes automatiques n'est pas mise jour lorsque AsynchronousSave=True. Par dfaut, loption denregistrement asynchrone est rgle sur true sous Windows et sur false sous MacOS.
1 Recherchez le fichier preferences.txt. Sous Windows, ce fichier est dans \\<nom utilisateur>\Application
Data\Adobe\Fireworks CS5\French\Fireworks CS5 Preferences. Sous Mac OS, le fichier figure dans /<nom utilisateur>/Library/Preferences/Adobe Fireworks CS5/fr/Fireworks CS5 Preferences.

2 Dfinissez AsynchronousSave = true dans le fichier.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Espace de travail

26

3 Enregistrez le fichier.

Navigation dans les documents et affichage de documents


Utilisation des onglets pour slectionner des documents
Lorsque votre document est agrandi, utilisez les onglets figurant en haut de la fentre pour alterner entre diffrents documents ouverts. Le nom de fichier de chaque document ouvert apparat dans un onglet situ sous les boutons daffichage. Lorsque vous dplacez la souris sur l'onglet, l'emplacement du fichier s'affiche sous forme d'info-bulle.

Zoom et panoramique avant et arrire

A. Outil Main B. Outil Zoom C. Menu contextuel Dfinir le zoom

Zoom avant par incrments prdfinis


Procdez de lune des manires suivantes :

Slectionnez loutil Zoom, puis cliquez pour spcifier le nouveau point central lintrieur de la fentre du
document. A chaque clic, limage sagrandit, passant ainsi au prochain facteur de zoom prdfini.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Espace de travail

27

Slectionnez un paramtre de zoom dans le menu contextuel Dfinir le zoom, situ en bas de la fentre du
document.

Dans le menu Affichage, slectionnez Zoom avant ou choisissez un facteur de zoom prdfini.

Zoom arrire par incrments prdfinis


Procdez de lune des manires suivantes :

Slectionnez loutil Zoom, maintenez la touche Alt (Windows) ou Option (Mac OS) enfonce, puis cliquez
lintrieur de la fentre du document. Chaque clic rduit laffichage au prochain pourcentage prdfini.

Slectionnez un paramtre de zoom dans le menu contextuel Dfinir le zoom, situ en bas de la fentre du
document.

Dans le menu Affichage, slectionnez Zoom arrire ou choisissez un facteur de zoom prdfini.

Zoom avant dans une zone spcifique


1 Slectionnez loutil Zoom. 2 Cliquez puis faites glisser le pointeur de loutil sur la partie de limage agrandir.

La taille du cadre de slection du zoom dtermine le pourcentage exact de zoom, qui est visible dans la zone Dfinir le zoom. Remarque : vous ne pouvez pas entrer de pourcentage de zoom dans la zone Dfinir le zoom.

Zoom arrire partir dune zone spcifique


Tout en maintenant la touche Alt (Windows) ou Option (Mac OS) enfonce, faites glisser le pointeur de loutil

Zoom pour dlimiter une zone de slection.

Retour un facteur de zoom de 100 %


Dans le panneau Outils, cliquez deux fois sur loutil Zoom.

Application dun panoramique autour du document


1 Slectionnez loutil Main. 2 Faites glisser le pointeur Main.

Si votre translation stend au-del des bords de la zone de travail, laffichage continue de glisser de sorte que vous pouvez travailler avec des pixels le long du bord de la zone de travail.

Adaptation du document la fentre active


Dans le panneau Outils, cliquez deux fois sur loutil Main.

Utilisation des modes daffichage pour grer lespace de travail


Dans le panneau Outils, slectionnez lun des trois modes daffichage permettant de contrler la disposition de votre espace de travail.
Mode Normal Affichage par dfaut de la fentre du document. Mode Plein cran avec affichage des menus Affichage agrandi de la fentre de document sur un arrire-plan gris. Les menus, les barres doutils, les barres de dfilement et les panneaux sont visibles.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Espace de travail

28

Mode Plein cran Affichage agrandi de la fentre de document sur un arrire-plan noir. Aucun menu, aucune barre doutils ou barre de titre nest visible.

Pour plus dinformations, voir larticle sur le site Web Fireworkszone.

Affichage de plusieurs vues dun document


Vous pouvez afficher simultanment un document diffrents niveaux de zoom dans plusieurs vues. Les modifications que vous apportez dans un affichage sont automatiquement appliques tous les autres affichages du mme document.
1 Choisissez Fentre > Dupliquer la fentre. 2 Slectionnez un paramtre de zoom pour la nouvelle fentre.

Affichage des documents tels quils apparaissent sur diffrentes plateformes


Windows et Mac OSX Snow Leopard version 10.6 appliquent une valeur gamma de 2,2, par dfaut, aux crans. Macintosh (version prcdant Snow Leopard) applique une valeur gamma de 1,8.
Procdez de lune des manires suivantes :

Sous Windows, slectionnez Affichage > Gamma 1,8 pour obtenir un aperu du document tel qu'il sera affich
sur le Macintosh (version prcdant Snow Leopard).

Sur le Macintosh, slectionnez Affichage > Gamma 1,8 pour obtenir un aperu du document tel qu'il sera
affich sur un Mac dont la version est antrieure Snow Leopard.

Modification dune zone de travail


Vous pouvez modifier la zone de travail tout moment.

Modification de la taille de la zone de travail


1 Procdez de lune des manires suivantes :

Choisissez Modification > Zone de travail > Taille de la zone de travail. Choisissez Slection > Dslectionner, cliquez sur loutil Pointeur pour afficher les proprits du document dans
linspecteur des proprits, puis cliquez sur le bouton Taille de la zone de travail.
2 Entrez les nouvelles dimensions dans les zones de texte Largeur et Hauteur. 3 Cliquez sur un des boutons Ancre pour spcifier les cts du document o Fireworks pourra ajouter ou supprimer

de lespace, puis cliquez sur OK. Remarque : lancre centrale est slectionne par dfaut, ce qui indique que les variations de taille de la zone de travail se rpartissent sur tous les cts.

Modification de la couleur de la zone de travail


Procdez de lune des manires suivantes :

Choisissez la commande Modification > Zone de travail > Couleur de la zone de travail, puis slectionnez une
option de couleur. Pour utiliser une couleur personnalise, cliquez sur une couleur dans la fentre contextuelle Nuancier.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Espace de travail

29

Dans linspecteur des proprits, choisissez Slection > Dslectionner, cliquez sur loutil Pointeur pour afficher
les proprits du document, puis activez la case Couleur de la zone de travail. Dans la fentre contextuelle Nuancier, slectionnez une couleur ou cliquez sur une couleur quelconque avec la pipette. Pour slectionner une zone de travail transparente, cliquez sur le bouton Transparente dans la fentre contextuelle Nuancier. Pour modifier la couleur de la zone de travail par dfaut, cliquez sur le nuancier personnalis dans la bote de dialogue Nouveau document (voir la section Cration dun document Fireworks la page 5).

Redimensionnement dun document et de son contenu


1 Procdez de lune des manires suivantes :

Choisissez Slection > Dslectionner, cliquez sur loutil Pointeur pour afficher les proprits du document dans
linspecteur des proprits, puis cliquez sur le bouton Taille de limage dans linspecteur des proprits.

Choisissez Modification > Zone de travail > Taille de limage.


La bote de dialogue Taille de limage saffiche.
2 Dans les zones de texte Dimensions en pixels, entrez les nouvelles dimensions horizontales et verticales.

(Facultatif) Modifiez les units de mesure. Si loption Rchantillonner limage est dslectionne, vous pouvez changer la rsolution ou la taille, mais pas les dimensions en pixels.
3 Dans les zones de texte Taille, entrez les dimensions horizontales et verticales pour limage imprime. 4 Dans la zone Rsolution, entrez une nouvelle rsolution de limage.

Lorsque vous changez la valeur de la rsolution, vous changez galement la dimension en pixels.
5 Procdez de lune des manires suivantes :

Pour conserver les proportions (rapport entre les dimensions horizontale et verticale) du document,
slectionnez Conserver les proportions.

Pour redimensionner la largeur indpendamment de la hauteur, et inversement, dslectionnez Conserver les


proportions.
6 Pour ajouter ou supprimer des pixels lors du redimensionnement, afin que limage conserve le mme aspect une

taille diffrente, slectionnez Rchantillonner limage.


7 Slectionnez Page active uniquement pour nappliquer la modification de la taille de la zone de travail qu la page

actuellement affiche.

A propos du rchantillonnage
Fireworks rchantillonne (redimensionne) les images selon une mthode qui diffre de celle de la plupart des applications de retouche dimages.

Lorsquun objet bitmap est rchantillonn, des pixels sont ajouts ou supprims dans limage pour lagrandir ou
la rduire.

Lorsquun objet vectoriel est rchantillonn, la perte de qualit est faible dans la mesure o le trac est redessin
mathmatiquement pour obtenir la taille voulue. Dans Fireworks, les attributs des objets vectoriels sont visibles sous forme de pixels ; par consquent, certains contours ou certains fonds peuvent tre lgrement diffrents une fois le rchantillonnage effectu. Cela est d au fait que les pixels qui composent ces contours ou fonds doivent tre redessins. Remarque : les repres, les objets zones sensibles et les objets tranches sont redimensionns lorsque la taille de limage du document est modifie.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Espace de travail

30

Vous pouvez modifier la taille dune image bitmap en rglant sa rsolution ou en rchantillonnant limage.

Lorsque vous rglez la rsolution, vous changez la taille des pixels de limage de manire faire tenir plus ou moins
de pixels dans un espace donn. Le rglage de la rsolution sans rchantillonnage ne provoque pas de perte de donnes.

Lors du rchantillonnage, vous pouvez ajouter ou supprimer des pixels :


Rchantillonnage positif Ajoute des pixels pour agrandir limage. Cette mthode risque dentraner une perte de

qualit, car les pixels ajouts ne correspondent pas toujours limage dorigine.
Rchantillonnage ngatif Supprime des pixels pour rduire la taille de limage mais entrane une perte de donnes dans limage. Cette mthode entrane toujours une baisse de qualit suite la suppression de pixels pour redimensionner limage.

Rotation de la zone de travail


Appliquez une rotation la zone de travail lorsquune image importe est lenvers ou de travers. Vous pouvez faire pivoter le document de 180, de 90 vers la droite ou de 90 vers la gauche. Lorsque vous appliquez une rotation au document, tous les objets quil contient subissent le mme mouvement.
Choisissez Modification > Zone de travail, puis choisissez une option de rotation.

Rognage ou ajustement de la zone de travail


Dveloppez ou rduisez la taille de la zone de travail en fonction des objets qui la composent.

Zone de travail dorigine (gauche), zone de travail rogne (droite)

1 Choisissez Slection > Dslectionner pour afficher les proprits du document dans linspecteur des proprits. 2 Cliquez sur Ajuster la zone de travail dans linspecteur des proprits.

Recadrage dun document


Le recadrage permet de supprimer des parties inutiles dun document. La zone de travail est redimensionne la taille dune zone que vous dfinissez. Par dfaut, le recadrage supprime les objets qui dpassent les limites de la zone de travail. Vous pouvez maintenir des objets lextrieur de la zone de travail en changeant une prfrence avant le recadrage.
1 Slectionnez loutil Recadrage

dans le panneau Outils ou choisissez la commande Edition > Recadrer le

document.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Espace de travail

31

2 Faites glisser un cadre de slection sur la zone de travail. Ajustez les poignes de recadrage jusqu ce que le cadre

de slection dlimite la zone conserver.


3 Cliquez deux fois lintrieur du cadre de slection, ou appuyez sur la touche Entre, pour recadrer le document.

Fireworks redimensionne la zone de travail la taille de la zone que vous avez dfinie et supprime les objets situs lextrieur de la zone de travail. Pour conserver ces objets, avant de recadrer, dslectionnez Supprimer les objets pendant le recadrage dans longlet Edition de la bote de dialogue Prfrences.

Utilisation des rgles, des repres et de la grille


Les rgles, les repres et la grille vous permettent de placer et daligner des objets. Les repres sont des lignes que vous faites glisser sur la zone de travail du document partir des rgles. Vous pouvez utiliser des repres pour marquer dimportantes parties de votre document (marges et point central, par exemple). La grille affiche un ensemble de lignes horizontales et verticales sur la zone de travail afin de faciliter les positionnements. Les repres et les grilles ne se trouvent pas sur un calque et ne sont pas exports avec le document. Les extensions Fireworks suivantes facilitent lutilisation des repres :
Extension Guides Panel Lorsque vous installez cette extension, un panneau Guides apparat sur la zone de travail. Il permet de manipuler les repres dans le document ou dexporter et dimporter des repres depuis un jeu de repres enregistrs au pralable. Cette extension est disponible sur http://www.adobe.com/go/learn_fw_usingguidespanel_fr. Extension Copy-Paste Guides Cette extension permet de copier des repres sur une page et de les copier sur une autre au sein dun mme document. Utilisez-la si le document Fireworks contient plusieurs pages requrant des repres similaires. Cette extension est disponible sur http://www.adobe.com/go/learn_fw_copypasteguides_fr. Extension Inherit Guides Cette extension permet de copier des repres depuis le gabarit ou la page active et de les

appliquer toutes les pages du document. Cette extension est disponible sur http://www.adobe.com/go/learn_fw_inheritguides_fr.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Espace de travail

32

Pour modifier la taille de la grille ou la couleur de la grille et des repres, reportez-vous la section Prfrences de repres et de grilles la page 312.

Affichage et masquage de rgles


Choisissez Affichage > Rgles.

Les rgles horizontale et verticale saffichent le long des marges de la fentre de document. Les rgles utilisent lunit de mesure pixel.

Cration dun repre horizontal ou vertical


1 Cliquez puis faites glisser partir de la rgle correspondante. 2 Positionnez le repre lendroit voulu de la zone de travail, puis relchez le bouton de la souris.

Remarque : repositionnez le repre en le faisant glisser de nouveau.

Dplacement dun repre jusqu une position prcise


1 Cliquez deux fois sur le repre. 2 Entrez la nouvelle position dans la bote de dialogue Dplacer un repre, puis cliquez sur OK.

Affichage ou masquage des repres ou de la grille


Choisissez la commande Affichage > Repres > Afficher les repres ou Affichage > Grille > Afficher la grille.

La slection est applique tous les documents ouverts dans Fireworks.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Espace de travail

33

Accrochage dobjets des repres ou la grille


Choisissez la commande Affichage > Repres > Accrocher aux repres ou Affichage > Grille > Accrocher la grille.

La slection est applique tous les documents ouverts dans Fireworks.

Verrouillage ou dverrouillage de tous les repres


Choisissez Affichage > Repres > Verrouiller les repres.

La slection est applique tous les documents ouverts dans Fireworks.

Suppression dun repre


Faites glisser le repre en dehors de la zone de travail.

Affichage de la distance entre les repres


Appuyez sur la touche Maj quand le pointeur est situ entre les repres.

Pour afficher la distance entre les repres, appuyez sur la touche Maj tout en faisant glisser les repres dans la zone de travail.

Repres comments
Les repres comments sont temporairement accrochs aux repres pour vous aider crer, aligner, modifier et transformer des objets par rapport dautres objets. Pour activer des repres comments et les accrocher, choisissez Affichage > Repres comments, puis slectionnez Afficher les repres comments et Accrocher aux repres comments. Vous pouvez utiliser les repres comments comme suit :

Lorsque vous crez un objet, utilisez les repres comments pour le positionner par rapport aux objets existants.
Les outils Ligne, Rectangle, Ellipse, Polygone et Formes automatiques affichent des repres comments, ainsi que les outils de tranche rectangulaire et circulaire.

Lorsque vous dplacez un objet, utilisez des repres comments pour laligner par rapport aux autres objets. Lorsque vous transformez un objet, des repres comments apparaissent automatiquement pour faciliter la
transformation. Pour modifier laffichage des repres comments, dfinissez leurs prfrences (voir Prfrences de repres et de grilles la page 312).

Aperu dans navigateur


Slectionnez Fichier > Aperu dans le navigateur, puis slectionnez l'une des options.
Aperu de toutes les pages dans <navigateur principal> Ctrl+F12/Cmd+Maj+F12 Vous pouvez obtenir un aperu de

l'interaction entre les pages si ces dernires sont lies entre elles.
Aperu dans <navigateur principal> F12 Offre un aperu du document Fireworks dans votre navigateur principal. Si

un seul navigateur est install sur votre ordinateur, Fireworks l'utilise en tant que navigateur principal. Par contre, lorsque plusieurs navigateurs sont disponibles, vous pouvez slectionner un navigateur principal pour afficher les documents Fireworks en cliquant sur Fichier > Aperu dans le navigateur > Slectionner le navigateur principal.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Espace de travail

34

Aperu dans Maj/Cmd+F12 Offre un aperu du document Fireworks dans votre navigateur secondaire. Avant d'utiliser cette option, dfinissez votre navigateur secondaire en cliquant sur Fichier > Aperu dans le navigateur > Slectionner le navigateur secondaire. Recherchez et slectionnez le fichier EXE de votre navigateur secondaire.

Annulation et rptition de plusieurs actions


Le panneau Historique rpertorie les dernires oprations effectues dans Fireworks. Vous pouvez spcifier le nombre dtapes dans le champ Nombre maximum dactions annules de la bote de dialogue Prfrences de Fireworks.

Annulation et rtablissement dactions


1 Choisissez Fentre > Historique pour ouvrir le panneau Historique. 2 Faites glisser le marqueur dannulation vers le haut ou vers le bas.

Rptition dactions
1 Effectuez les actions. 2 Pour slectionner les actions rpter dans le panneau Historique, utilisez lune des mthodes suivantes :

Cliquez sur une action pour la slectionner (mettre en surbrillance). Tout en maintenant la touche Ctrl (Windows) ou Cmde (Mac OS) enfonce, cliquez pour slectionner des
actions individuelles.

Tout en maintenant la touche Maj enfonce, cliquez sur des actions pour slectionner une srie continue
dactions.
3 Cliquez sur le bouton Rexcuter, en bas du panneau Historique.

Enregistrement dactions en vue de leur rutilisation


1 Slectionnez les actions enregistrer dans le panneau Historique. 2 Cliquez sur le bouton Enregistrer situ en bas du panneau. 3 Entrez un nom de commande.

Utilisation de la commande personnalise enregistre


Dans le menu Commandes, slectionnez le nom de la commande.

Restauration des fichiers non enregistrs (Mac seulement)


Lorsquune session Fireworks prend fin la suite dune anomalie, les fichiers non enregistrs sont placs sur le bureau. Lorsque vous relancez Fireworks, un message vous informe de la prsence du dossier contenant les fichiers non enregistrs sur le bureau. Les fichiers sont enregistrs par dfaut lemplacement suivant : Bureau\Fireworks restaur\<horodatage>. Les fichiers non enregistrs auxquels aucun nom na t attribu sont enregistrs sous le nom Sans titre, Sans titre (1), Sans titre (2), etc. Les noms de fichier correspondent aux noms par dfaut gnrs par Fireworks lors de la cration des fichiers. Les fichiers non enregistrs auxquels un nom a t attribu sont enregistrs sous ce mme nom.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Espace de travail

35

Les fichiers ne sont pas restaurs dans les cas suivants :

Lopration denregistrement est lorigine du problme. La mmoire disponible est insuffisante pour restaurer les fichiers non enregistrs.
DisableSaveOnCrash dans le fichier Preferences d'Adobe Fireworks CS5 est dfini sur True.

Le fichier ouvert ntait pas en cours de modification lorsque le problme sest produit.

Dsactivation de la restauration des fichiers


1 Ouvrez le fichier Fireworks CS5 Preferences.txt, qui rside dans

\Users\<nom_utilisateur>\Library\Preferences\Adobe Fireworks CS5\<langue>\.


2 Rglez DisableSaveOnCrash sur True.

Modification de lemplacement par dfaut des fichiers restaurs


1 Ouvrez le fichier Fireworks CS5 Preferences.txt, qui rside dans

\Users\<nom_utilisateur>\Library\Preferences\Adobe Fireworks CS5\<langue>\.


2 Spcifiez lemplacement par le biais du paramtre SaveOnCrashRecoveredFolderPath. Vous pouvez entrer un

chemin relatif ou absolu.

Dernire mise jour le 12/5/2011

36

Chapitre 4 : Slection et transformation dobjets


Slection des objets
Avant de pouvoir manipuler un objet du document, slectionnez-le. Cela sapplique un objet vectoriel, un trac ou des points ; un bloc de texte, un mot ou une lettre ; une tranche ou une zone sensible ; une occurrence ou un objet bitmap. Pour slectionner un objet, utilisez le panneau Calques ou un outil de slection.
Panneau Calques Affiche chaque objet. Vous pouvez cliquer sur un objet dans le panneau Calques pour le slectionner lorsque le panneau est ouvert et les calques dvelopps. Outils de slection Chacun dentre eux joue un rle spcifique :
Loutil Pointeur slectionne des objets lorsque vous cliquez sur les objets ou faites glisser une zone de slection autour deux. Loutil Sous-slection slectionne un objet individuel dans un groupe ou les points dun objet vectoriel. Loutil Slectionner derrire slectionne un objet se trouvant derrire un autre objet. Loutil Zone dexportation slectionne une zone exporter sous la forme dun fichier distinct.

Slection dobjets par clics


Procdez de lune des manires suivantes :

Dplacez loutil Pointeur sur le trac ou le cadre de slection de lobjet, puis cliquez. Cliquez sur le contour ou le fond de lobjet. Slectionnez lobjet dans le panneau Calques.
Pour prvisualiser ce que vous slectionnez lorsque vous cliquez sur un objet au-dessous du pointeur sur la zone de travail, slectionnez loption Surbrillance souris dans la catgorie Edition de la bote de dialogue Prfrences.

Slection dobjets par glissement


Faites glisser loutil Pointeur pour inclure un ou plusieurs objets dans la zone de slection.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Slection et transformation dobjets

37

Dplacement ou modification dobjets laide de loutil Sous-slection


Utilisez loutil Sous-slection pour slectionner, dplacer ou modifier des points sur un trac vectoriel ou un objet faisant partie dun groupe.
1 Slectionnez loutil Sous-slection. 2 Effectuez une slection. 3 Procdez de lune des manires suivantes :

Pour modifier un objet, faites glisser un de ses points ou lune de ses poignes de slection. Pour dplacer lintgralit dun objet, faites glisser le pointeur nimporte o dans lobjet, except sur un point ou
une poigne de slection.

Slection dun objet se trouvant derrire dautres objets


Cliquez sur loutil Slectionner derrire en continu au-dessus des objets empils, en commenant par le haut

jusqu ce que vous slectionniez lobjet souhait. Remarque : vous pouvez galement slectionner un objet difficile atteindre en cliquant dessus dans le panneau Calques lorsque les calques sont dvelopps.

Informations sur la slection dans linspecteur des proprits


Lorsque vous slectionnez un objet, linspecteur des proprits identifie la slection. La partie suprieure gauche de linspecteur des proprits contient une description de llment en cours dinspection et le nombre dobjets slectionns si plusieurs objets sont slectionns. Linspecteur des proprits fournit galement une zone pour saisir le nom des lments slectionns. Remarque : le nom saffiche dans la barre de titre du document chaque fois que vous slectionnez cet lment. En cas dexportation des tranches et des boutons, le nom est le nom de fichier. (Windows uniquement) Si la barre dtat est active, les objets slectionns sont identifis dans la barre dtat, en bas de la fentre du document.

Inspecteur des proprits

Modification dune slection


Lorsquun objet unique est slectionn, vous pouvez ajouter des objets la slection et dslectionner les objets slectionns. En utilisant une commande unique, vous pouvez slectionner ou dslectionner tout ce qui se trouve sur tous les calques du document. Vous pouvez galement masquer le trac de slection de faon pouvoir modifier un objet slectionn tout en laffichant tel quil doit apparatre sur le Web ou sur une copie imprime.

Ajout la slection
Tout en maintenant la touche Maj enfonce, cliquez sur des objets supplmentaires avec loutil Pointeur, Sous-

slection ou Slectionner derrire.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Slection et transformation dobjets

38

Dslection dun objet en laissant les autres objets slectionns


Tout en maintenant la touche Maj enfonce, cliquez sur lobjet slectionn.

Slection de tout le contenu de tous les calques du document


Choisissez Slection > Tout slectionner.

Remarque : la commande Tout slectionner ne slectionne pas les objets masqus.

Dslection de tous les objets slectionns


Choisissez Slection > Dslectionner.

Remarque : dslectionnez la prfrence Modification par calque pour slectionner tous les objets visibles sur tous les calques dun document. En effet, lorsque vous slectionnez la prfrence Modification par calque, seuls les objets du calque actif sont slectionns. Pour plus de dtails, reportez-vous la section Organisation des calques la page 137.

Masquage de la slection du trac dun objet slectionn


Slectionnez la commande Affichage > Bords.

Remarque : vous pouvez utiliser le panneau Calques ou linspecteur des proprits pour identifier lobjet slectionn lorsque son contour et ses points sont masqus.

Masquage dobjets slectionns


Choisissez Affichage > Masquer la slection.

Remarque : les objets masqus ne sont pas exports. (Cela ne sapplique pas aux objets Web tranches et zones sensibles du calque Web.)

Affichage de tous les objets


Choisissez Affichage > Tout afficher.

Remarque : pour masquer des objets, que ceux-ci soient slectionns ou non, cliquez dans la colonne il du panneau Calques (ou faites glisser le pointeur dessus).

Slection de pixels
Vous pouvez modifier les pixels de toute la zone de travail ou slectionner lun des outils de slection pour imposer votre modification une zone particulire dune image :
Loutil Cadre de slection slectionne une zone de pixels rectangulaire dans une image. Pour plus d'informations, voir l'article de Thierry Lorey. Loutil Cadre de slection ovale slectionne une zone de pixels elliptique dans une image.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Slection et transformation dobjets

39

Loutil Lasso slectionne une zone de pixels de forme libre dans une image. Loutil Lasso polygonal slectionne une zone de pixels de forme libre mais aux bords droits dans une image. Loutil Baguette magique slectionne une zone de pixels de couleur similaire dans une image.

Les outils de slection de pixels tracent des cadres de slection qui dfinissent la zone de pixels slectionns. Aprs avoir trac le cadre de slection, vous pouvez le manipuler en le dplaant, en lui ajoutant des lments ou en lutilisant pour effectuer une autre slection. Vous pouvez modifier les pixels lintrieur de la slection, appliquer des filtres aux pixels ou effacer des pixels sans affecter les pixels se trouvant au-del de la slection. Vous pouvez galement crer une slection flottante de pixels que vous pouvez modifier, dplacer, couper ou copier.

Options des outils de slection bitmap


Plusieurs options sont disponibles avec les outils utiliss pour la slection dobjets bitmap.

Options de bord
Net Cre un cadre de slection avec un bord clairement dlimit. Lissage Permet dviter lapparition de bords dentels sur cadre de slection. Contour progressif Permet dadoucir les bords des pixels slectionns.

Options de style de loutil Cadre de slection ou Cadre de slection ovale


Normal Permet de crer un cadre de slection dont la hauteur et la largeur sont indpendantes. Rapport fixe Contraint les proportions entre la hauteur et la largeur. Taille fixe Dfinit la hauteur et la largeur sur une dimension donne.

Remarque : loutil Baguette magique possde galement un paramtre Tolrance. Pour plus dinformations, reportezvous la section Slection des zones de pixels de couleur similaire la page 40.

Cration de cadres de slection de pixels


Utilisez les outils de la section Bitmap du panneau Outils pour dessiner un cadre de slection autour des zones spcifiques de pixels dune image bitmap. Remarque : pour modifier les paramtres de votre slection lorsque vous utilisez lun de ces outils, cochez la case Slection interactive avant deffectuer la slection.

Slection dune zone de pixels rectangulaire ou elliptique


1 Slectionnez loutil Cadre de slection ou Cadre de slection ovale. 2 Dfinissez les options Style et Bord dans linspecteur des proprits. 3 Faites glisser le pointeur pour tracer un cadre de slection qui dfinit la slection de pixels.

Maintenez la touche Maj enfonce tout en faisant glisser le pointeur de loutil Cadre de slection ou Cadre de
slection ovale afin de tracer des cadres de slection de forme carre ou circulaire. Si la case cocher Slection interactive est active lorsque vous faites une srie de slections, la fonction correspondante nagit que sur la dernire slection de la srie.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Slection et transformation dobjets

40

Pour tracer un cadre de slection partir dun point central, dslectionnez tous les autres cadres de slection
actifs, puis dessinez votre trac tout en maintenant la touche Alt (Windows) ou Option (Mac OS) enfonce.

Slection dune zone de pixels en forme libre


1 Slectionnez loutil Lasso. 2 Slectionnez une option Bord dans linspecteur des proprits. 3 Faites glisser le pointeur autour des pixels slectionner.

Placement de points afin de crer un cadre de slection


Utilisez loutil Lasso polygonal pour slectionner une zone polygonale de pixels spcifiques dans une image bitmap.
1 Slectionnez loutil Lasso polygonal. 2 Slectionnez une option Bord dans linspecteur des proprits. 3 Dlimitez la slection en cliquant sur des points situs autour du primtre de lobjet ou de la zone en question.

Maintenez la touche Maj enfonce pour imposer des incrments de 45 degrs aux segments du cadre de slection trac avec loutil Lasso polygonal.
4 Pour fermer le polygone, procdez de lune des manires suivantes :

Cliquez sur le point dorigine. Cliquez deux fois dans lespace de travail.

Slection des zones de pixels de couleur similaire


1 Slectionnez loutil Baguette magique. 2 Slectionnez une option de bord. 3 Dfinissez le niveau de tolrance en faisant glisser le curseur de loption correspondante dans linspecteur des

proprits. La tolrance reprsente la plage tonale slectionne lorsque vous cliquez sur un pixel avec loutil Baguette magique. Si vous entrez la valeur 0 et que vous cliquez sur un pixel, seuls les pixels adjacents du mme ton sont slectionns. Si vous entrez la valeur 65, une gamme de tons plus tendue est slectionne.
4 Cliquez sur la zone de couleur slectionner.

Un cadre de slection apparat autour de la plage de pixels slectionne.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Slection et transformation dobjets

41

Pixels slectionns avec une tolrance basse (en haut), puis avec une tolrance haute (en bas)

Slection des couleurs similaires dans un document entier


1 Slectionnez une zone de couleur avec un outil de cadre de slection ou de lasso, ou avec loutil Baguette magique. 2 Choisissez Slection > Slectionner les couleurs similaires.

Un ou plusieurs cadres de slection affichent toutes les zones contenant la plage de pixels slectionne. Cela dpend du paramtre Tolrance actif de linspecteur des proprits de loutil Baguette magique. Remarque : pour ajuster la tolrance pour la commande Slectionner les couleurs similaires, slectionnez loutil Baguette magique, puis changez le paramtre Tolrance dans linspecteur des proprits avant dutiliser la commande. Vous pouvez galement cocher la case Slection interactive pour modifier le paramtre de tolrance lorsque vous utilisez loutil Baguette magique.

Cration dune slection daprs les zones opaques des objets


A partir dun objet bitmap slectionn, vous pouvez crer une slection de pixels base sur lopacit de tout objet ou masque du panneau Calques.
1 Slectionnez un objet bitmap dans la zone de travail. 2 Dans le panneau Calques, positionnez le pointeur sur la vignette de lobjet utiliser pour crer la slection de pixels. 3 Maintenez la touche Alt (Windows) ou Option (Mac OS) enfonce.

Le pointeur change afin de vous indiquer que vous tes sur le point de slectionner la couche alpha, ou zone opaque, de lobjet.
4 Cliquez sur la vignette.

Une nouvelle slection de pixels est cre sur lobjet bitmap slectionn.
5 (Facultatif) Pour tendre la slection, cliquez sur un autre objet du panneau Calques tout en maintenant les touches

Alt+Maj (Windows) ou Option+Maj (Mac OS) enfonces.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Slection et transformation dobjets

42

Pour rduire la slection, cliquez sur des objets tout en maintenant les touches Ctrl+Maj enfonces.

Suppression dun cadre de slection


Vous pouvez supprimer un cadre de slection sans affecter le document.
Procdez de lune des manires suivantes :

Tracez un autre cadre de slection. Cliquez en dehors de la slection active avec un outil de cadre de slection ou de lasso. Appuyez sur la touche Echap.

Ajustement des cadres de slection


Repositionnement dune slection pendant sa cration
1 Commencez par faire glisser le pointeur afin de tracer la slection. 2 Maintenez la barre despace enfonce sans relcher le bouton de la souris. 3 Faites glisser le cadre de slection un autre emplacement de la zone de travail. 4 Relchez la barre despace tout en maintenant le bouton de la souris enfonc. 5 Continuez faire glisser le pointeur pour tracer la slection.

Dplacement dun cadre de slection existant


Procdez de lune des manires suivantes :

Faites glisser le cadre de slection laide de loutil Cadre de slection, Lasso ou Baguette magique. Dplacez le cadre de slection par incrments dun pixel avec les touches flches. Appuyez sur la touche Maj, et dplacez le cadre de slection par incrments de 10 pixels avec les touches flches.

Ajout de pixels une slection existante


1 Slectionnez un outil de slection bitmap quelconque. 2 Tout en maintenant la touche Maj enfonce, tracez dautres cadres de slection. 3 Pour continuer ajouter des lments la slection, rptez les tapes 1 et 2 avec un outil de slection bitmap.

Les cadres de slection superposs sunissent pour former un cadre de slection contigu.

Soustraction de pixels dune slection


Tout en maintenant la touche Alt (Windows) ou Option (Mac OS) enfonce, utilisez un outil de slection bitmap

pour slectionner la zone de pixels retirer.

Slection dune partie dun cadre de slection existant


Slectionnez une partie dun cadre de slection existant en dessinant un nouveau cadre de slection recouvrant le cadre dorigine.
1 Maintenez les touches Alt+Maj (Windows) ou Option+Maj (Mac OS) enfonces pendant que vous dessinez un

cadre de slection superpos au cadre de slection dorigine.


2 Relchez le bouton de la souris.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Slection et transformation dobjets

43

Seuls les pixels situs lintersection des deux cadres de slection sont slectionns.

Inversion dune slection de pixels


En partant de la slection de pixels active, vous pouvez crer une autre slection de pixels utilise pour slectionner tous les pixels dslectionns.
1 Slectionnez des pixels en utilisant un outil de slection bitmap. 2 Choisissez Slection > Slection inverse pour slectionner tous les pixels qui ntaient pas slectionns initialement.

Application dun contour progressif une slection de pixels


Le contour progressif cre un effet de transparence pour les pixels slectionns.
1 Choisissez Slection > Contour progressif. 2 Entrez une intensit dans la bote de dialogue Contour progressif. 3 Si ncessaire, changez le nombre dans la bote de dialogue Contour progressif afin dajuster lintensit.

Pour afficher laspect de la slection au contour progressif sans les pixels placs autour, choisissez Slection > Inverser la slection, et appuyez sur la touche Suppr.

Extension ou rduction dun cadre de slection


Une fois le cadre de slection trac pour slectionner les pixels, vous pouvez tendre ou rduire sa bordure.
1 Aprs avoir trac le cadre de slection, choisissez Slection > Etendre le cadre de slection. 2 Entrez le nombre de pixels utiliser pour dvelopper ou contracter la bordure du cadre de slection, puis cliquez

sur OK.

Slection dune zone autour dun cadre de slection existant


Pour ajouter des effets graphiques spciaux un cadre de slection, crez un cadre supplmentaire englobant le cadre existant.
1 Aprs avoir trac un cadre de slection, choisissez Slection > Dlimiter le cadre de slection. 2 Entrez la largeur du cadre de slection placer autour du cadre existant, puis cliquez sur OK.

Lissage de la bordure dun cadre de slection


Supprimez les pixels superflus visibles sur la bordure dune slection de pixels ou dun cadre de slection aprs lutilisation de loutil Baguette magique.
1 Choisissez Slection > Lisser le cadre de slection. 2 Saisissez un rayon pour spcifier le niveau de lissage souhait, puis cliquez sur OK.

Slection de pixels avant et aprs le lissage

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Slection et transformation dobjets

44

Conversion, transfert ou enregistrement de cadres de slection


Conversion dun cadre de slection en trac
Vous pouvez convertir une slection bitmap en objet vectoriel en traant un cadre de slection autour de la partie de lobjet bitmap convertir. Cette manipulation est pratique pour commencer crer une animation en traant une slection daprs un objet bitmap.
Aprs avoir trac un cadre de slection, choisissez Slection > Convertir le cadre de slection en trac.

Transfert dun cadre de slection vers un autre objet bitmap


Vous pouvez transfrer un cadre de slection dun objet bitmap vers un autre, ou vers un masque.
1 Effectuez une slection en traant le cadre de slection. 2 Dans le panneau Calques, slectionnez un autre objet bitmap prsent sur le calque de votre choix.

Pour plus dinformations, reportez-vous la section Masquage la page 140.

Enregistrement ou restauration dun cadre de slection


1 Choisissez Slection > Enregistrer la slection bitmap ou Slection > Restaurer la slection bitmap. 2 Dans le menu Document, slectionnez le document ouvert contenant la slection enregistre. 3 Dans le menu Slection, slectionnez Nouveau ou une slection prcdemment enregistre que vous souhaitez

modifier.
4 Si vous slectionnez Nouveau, entrez le nom de votre nouvelle slection. 5 (Pour la restauration uniquement) Pour inverser la slection restaure, cochez la case Inverser. 6 Slectionnez lune des options de la section Opration :

Remarque : si vous enregistrez une nouvelle slection, toutes les options de modification ci-dessous sont dsactives.
Nouvelle slection Permet de remplacer la slection active dans le document actif par celle spcifie dans la

zone Slection.
Ajouter la slection Permet dajouter la slection active celle spcifie dans les zones Document et Slection. Soustraire de la slection Permet de soustraire la slection active de celle spcifie dans les zones Document

et Slection.
Intersection avec la slection Permet de combiner la slection active avec celle spcifie dans les zones Document

et Slection.
7 Cliquez sur OK, puis rptez ce processus pour chaque cadre de slection enregistrer ou restaurer.

Suppression dun cadre de slection enregistr


Remarque : cette fonction est active uniquement si un document ouvert contient au moins une slection enregistre.
1 Choisissez Slection > Supprimer la slection bitmap. 2 Dans le menu Document, slectionnez le document ouvert contenant la slection enregistre. 3 Dans le menu Slection, choisissez la slection.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Slection et transformation dobjets

45

Copie ou dplacement du contenu dun cadre de slection


Lorsque vous utilisez un outil de slection pour faire glisser un cadre de slection vers un nouvel emplacement, le cadre est dplac, mais pas son contenu. Pour copier ou dplacer les pixels slectionns, utilisez loutil Pointeur ou un outil bitmap tout en maintenant une touche de modification enfonce. En maintenant les touches de modification enfonces comme indiqu ci-dessous, vous pouvez dplacer et copier des slections laide des touches flches. Pour effectuer des dplacements par incrments de 10 pixels, maintenez galement la touche Maj enfonce.

Dplacement du contenu dun cadre de slection


1 Effectuez une slection de pixels avec un outil de slection bitmap. 2 Procdez de lune des manires suivantes :

Slectionnez lun des outils de la section Bitmap du panneau Outils, puis faites glisser la slection tout en
maintenant la touche Ctrl (Windows) ou Cmde (Mac OS) enfonce.

Faites glisser la slection laide de loutil Pointeur.

Copie du contenu dun cadre de slection


Effectuez lune des oprations suivantes :

Faites glisser la slection laide de loutil Sous-slection


(Mac OS) enfonce.

Faites glisser la slection laide de loutil Pointeur tout en maintenant la touche Alt (Windows) ou Option Faites glisser la slection laide de lun des outils bitmap tout en maintenant les touches Ctrl+Alt (Windows)
ou Cmde+Option (Mac OS) enfonces. Remarque : lorsque vous utilisez lune des procdures ci-dessus, la slection dplace ou copie fait toujours partie de lobjet bitmap actif. Pour crer un objet bitmap partir dune slection de pixels, suivez la procdure ci-dessous.

Insertion dun nouvel objet bitmap par copie dune slection


1 Slectionnez une zone de pixels en utilisant un outil de slection de pixels. 2 Procdez de lune des manires suivantes :

Choisissez Edition > Insertion > Bitmap par Couper.


Un nouvel objet bitmap bas sur la slection de pixels est cr dans le calque actuel, et les pixels slectionns sont supprims de lobjet bitmap dorigine.

Choisissez Edition > Insertion > Bitmap par Copier.


Un nouvel objet bitmap bas sur la slection de pixels est cr dans le calque actuel. Dans le panneau Calques, une vignette du nouvel objet bitmap apparat dans le calque actif, au-dessus de lobjet partir duquel il a coup ou copi.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Slection et transformation dobjets

46

Edition dobjets slectionns


Dplacement, duplication ou suppression dobjets
Dplacement dune slection
Procdez de lune des manires suivantes :

Faites-la glisser avec loutil Pointeur, Sous-slection ou Slectionner derrire. Appuyez sur lune des touches flches pour dplacer la slection par incrments dun pixel. Tout en maintenant la touche Maj enfonce, appuyez sur une touche flche pour dplacer la slection par
incrments de 10 pixels.

Dans linspecteur des proprits, entrez les coordonnes x et y de lemplacement du coin suprieur gauche de la
slection.

Entrez les coordonnes x et y de lobjet dans le panneau Info. Si les cases X et Y ne sont pas visibles, faites glisser
le bord infrieur du panneau.

Dplacement ou copie dobjets slectionns par collage


1 Slectionnez un ou plusieurs objets. 2 Choisissez Edition > Couper ou Edition > Copier. 3 Choisissez Edition > Coller.

Duplication dun ou plusieurs objets slectionns


Choisissez Edition > Dupliquer.

En rptant la commande, les doublons de lobjet slectionn saffichent dans une disposition en cascade par rapport loriginal. Les doublons saffichent 10 pixels plus bas et 10 pixels droite du doublon prcdent. Lobjet dupliqu le plus rcent devient lobjet slectionn.

Clonage dune slection


Choisissez Edition > Cloner.

Le clone de la slection est plac juste devant loriginal et devient lobjet slectionn. Remarque : pour loigner, pixel par pixel, un clone slectionn de loriginal, utilisez les touches flches en maintenant ou non la touche Maj enfonce. Ce procd est pratique pour conserver une certaine distance entre des clones ou lalignement vertical ou horizontal des clones.

Suppression dobjets slectionns


Procdez de lune des manires suivantes :

Appuyez sur la touche Suppr ou Retour arrire. Choisissez Edition > Effacer ou Edition > Couper. Cliquez sur lobjet avec le bouton droit de la souris (Windows) ou tout en maintenant la touche Ctrl enfonce
(Mac OS), puis choisissez Edition > Couper dans le menu contextuel.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Slection et transformation dobjets

47

Annulation ou dslection dune slection


Procdez de lune des manires suivantes :

Choisissez Slection > Dslectionner. Si vous utilisez loutil Cadre de slection, Cadre de slection ovale ou Lasso, cliquez sur limage, mais hors de la
zone slectionne.

Appuyez sur la touche Echap.

Transformation et dformation des objets et des slections


Vous pouvez transformer un objet ou un groupe slectionn, ou encore une slection de pixels, en utilisant les outils et les commandes de menu de mise lchelle, dinclinaison et de distorsion :
Loutil Mise lchelle permet dagrandir ou de rduire un objet. Loutil Inclinaison permet dincliner un objet le long dun axe spcifi. Loutil Distorsion dplace les cts ou les coins dun objet conformment la direction dans laquelle vous faites glisser une poigne de slection tandis que loutil est actif. Cest utile pour crer des effets 3D.

Lorsque vous slectionnez un outil de transformation quelconque ou la commande de menu Transformer, Adobe Fireworks affiche des poignes de transformation autour des objets slectionns.

A. Point central B. Poignes de transformation

Objet pivot, mis lchelle, inclin, tordu et retourn verticalement et horizontalement

Transformation dobjets slectionns laide des poignes de transformation


1 Slectionnez un outil de transformation.

Lorsque vous dplacez le pointeur sur les poignes de slection ou proximit de ces poignes, il change pour reflter la transformation actuelle.
2 Procdez de lune des manires suivantes :

Placez le pointeur proximit dun coin, puis faites-le glisser en cliquant dessus pour effectuer une rotation. Faites glisser une poigne de transformation pour effectuer une transformation conformment loutil de
transformation actif.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Slection et transformation dobjets

48

3 Cliquez deux fois lintrieur de la fentre ou appuyez sur la touche Entre pour appliquer vos changements.

Redimensionnement dun objet slectionn


La mise lchelle (synonyme de redimensionnement) dun objet permet de lagrandir ou de le rduire lhorizontale, la verticale ou sur les deux axes. Pour des informations sur les attributs de mise l'chelle, voir l'article de Thierry Lorey.
1 Procdez de lune des manires suivantes :

Slectionnez loutil Mise lchelle

Choisissez Modification > Transformation > Mise lchelle.


2 Faites glisser les poignes de transformation :

Pour mettre lobjet lchelle horizontalement et verticalement, faites glisser une poigne dangle. Si vous
appuyez sur la touche Maj, les proportions sont respectes lors de la mise lchelle.

Pour mettre lobjet lchelle horizontalement ou verticalement, faites glisser une poigne latrale. Pour mettre lobjet lchelle partir du centre, appuyez sur la touche Alt (Windows) ou Option (Mac) tout en
faisant glisser lune des poignes.

Redimensionnement/mise l'chelle contours et des effets lorsque l'objet associ est redimensionn
Vous pouvez choisir les effets de mise l'chelle et les contours appliquer aux objets de faon proportionnelle lors de leur redimensionnement. Remarque : Pour la mise l'chelle normale et la mise lchelle en 9 tranches, les contours sont mis l'chelle en appliquant les paramtres de la bote de dialogue Prfrences ou du panneau Info.
Procdez de lune des manires suivantes :

Cliquez sur Edition > Prfrences (Windows) ou Fireworks > Prfrences (Mac OS). Dans la catgorie Gnral,
slectionnez Mise l'chelle des contours et des effets.

Slectionnez Fentre > Info. Dans le menu Options du panneau Info, slectionnez Attributs d'chelle.

Redimensionnement de lensemble des objets slectionns


Vous pouvez slectionner des objets dans la zone de travail et les redimensionner lhorizontale, la verticale ou sur les deux axes.
1 Slectionnez les objets de la zone de travail laide de loutil Pointeur. 2 Slectionnez Commandes > Redimen. Obj. slectionns. 3 Redimensionnez les objets lhorizontale ou la verticale laide des contrles de redimensionnement de la bote

de dialogue, puis cliquez sur le bouton Appliquer. Remarque : slectionnez les contrles dagrandissement ou de rduction pour ajuster les incrments de redimensionnement.

Inclinaison des objets


Vous pouvez transformer un objet en linclinant sur laxe horizontal et/ou sur laxe vertical.
1 Pour afficher les poignes de transformation, procdez de lune des manires suivantes :

Slectionnez loutil Inclinaison

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Slection et transformation dobjets

49

Choisissez Modification > Transformation > Inclinaison.


2 Faites glisser une poigne pour incliner lobjet.

Pour crer lillusion de perspective, faites glisser un point dangle.


3 Cliquez deux fois sur le document ou appuyez sur la touche Entre.

Distorsion des objets


Vous pouvez changer la taille et les proportions dun objet en faisant glisser une poigne de slection avec loutil Distorsion.
1 Pour afficher les poignes de transformation, procdez de lune des manires suivantes :

Slectionnez loutil Distorsion

Choisissez Modification > Transformation > Distorsion.


2 Faites glisser une poigne pour appliquer la distorsion lobjet. 3 Cliquez deux fois dans la fentre ou appuyez sur la touche Entre.

Rotation ou renversement des objets


La rotation et le renversement font pivoter un objet sur son centre. Pour crer lillusion de perspective, suggrant quun objet pivote en trois dimensions, reportez-vous la section Inclinaison des objets la page 48.

Rotation dun objet slectionn 90 ou 180 degrs


Choisissez Modification > Transformation, puis slectionnez une commande de rotation dans le sous-menu.

Rotation dun objet slectionn par glissement


1

Slectionnez un outil de transformation.

2 Eloignez le pointeur de lobjet jusqu ce que le pointeur de rotation saffiche.

3 Faites glisser lobjet pour le faire pivoter.

Pour imposer la rotation des incrments de 15 degrs par rapport lhorizon, faites glisser le pointeur tout en maintenant la touche Maj enfonce.
4 Cliquez deux fois lintrieur de la fentre ou appuyez sur la touche Entre pour appliquer vos changements.

Dplacement de laxe de rotation


Faites glisser le point central hors du centre.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Slection et transformation dobjets

50

Redfinition de laxe de rotation au centre de la slection


Procdez de lune des manires suivantes :

Cliquez deux fois sur le point central. Appuyez sur la touche Echap pour dslectionner lobjet, puis reslectionnez-le.

Renversement dun objet avec maintien de sa position relative


Choisissez Modification > Transformation > Symtrie axe horizontal ou Symtrie axe vertical.

Transformation numrique des objets


Au lieu de faire glisser un objet pour le mettre lchelle, le redimensionner ou le faire pivoter, vous pouvez le transformer en entrant des valeurs spcifiques. Pour cela, utilisez linspecteur des proprits, le panneau Info ou la commande Transformation numrique.
Dans linspecteur des proprits ou dans le panneau Info, entrez les nouvelles mesures pour la largeur (L) ou la

hauteur (H). Remarque : si les cases L et H ne sont pas visibles dans linspecteur des proprits, cliquez sur la flche dextension pour afficher toutes les proprits.

Mise lchelle ou rotation des objets slectionns laide de la commande Transformation numrique
1 Choisissez Modification > Transformation > Transformation numrique. 2 Slectionnez le type de transformation effectuer dans le menu contextuel. 3 Slectionnez Conserver les proportions pour prserver les proportions horizontales et verticales pendant la mise

lchelle ou le redimensionnement dune slection.


4 Slectionnez Attributs dchelle pour transformer le fond, le contour et les effets en mme temps que lobjet lui-

mme.
5 Dslectionnez Attributs dchelle pour transformer uniquement le trac. 6 Saisissez des valeurs numriques pour transformer la slection, puis cliquez sur OK.

Affichage des valeurs de transformation numrique


Utilisez le panneau Info pour afficher les valeurs des transformations numriques de lobjet actuellement slectionn. Ces informations sont mises jour pendant la modification de lobjet.
Choisissez Fentre > Info.

Mise lchelle en 9 tranches


La mise lchelle en 9 tranches permet de mettre lchelle des objets vectoriels et des objets bitmap sans distorsion gomtrique ; ils conservent ainsi les aspects dlments cls tels que le texte ou des angles arrondis. Il est impossible dappliquer la mise lchelle en 9 tranches aux lments suivants :

Texte Symbole contenant du texte

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Slection et transformation dobjets

51

Groupe contenant du texte pivot/dform/inclin


Remarque : Si vous appliquez la mise lchelle en 9 tranches un groupe ou symbole contenant du texte, celui-ci est mis lchelle mais pas avec la mthode en 9 tranches. Dans Fireworks, vous pouvez utiliser deux mthodes de mise lchelle en 9 tranches : la mise lchelle par symboles, avec utilisation de repres de dcoupe permanents rajustables, et la mise lchelle standard avec repres temporaires applicables une seule fois. La mise lchelle par symboles est parfaitement adapte aux objets que vous envisagez de rutiliser plusieurs fois. La mise lchelle standard, quant elle, convient pour les rglages appliqus rapidement et une seule fois aux objets bitmap ou aux formes simples intgrs vos maquettes. Pour visionner un didacticiel vido sur la cration dobjets extensibles laide dune mise lchelle en 9 tranches, accder www.adobe.com/go/lrvid4036_fw_fr. Larticle de Sarthak Singhal, accessible ladresse http://www.adobe.com/go/learn_fw_9slicescaling_fr contient une dmonstration de lutilisation de la mise lchelle en 9 tranches. Pour bnficier dune souplesse optimale lors des mises lchelle, la tranche centrale doit tre la plus tendue possible. (Si un objet est trs rduit, Fireworks limite les tranches qui lentourent leur taille dorigine.)

Voir aussi
Symboles la page 161 Ouverture de graphiques crs dans dautres applications la page 7 Prfrences de repres et de grilles la page 312

Symboles de mise lchelle en 9 tranches


Application de repres 9 tranches un symbole
1 Cliquez deux fois sur le symbole ou sur le bouton pour passer en mode de modification de symboles. 2 Dans le panneau Proprits, slectionnez Activer les repres de mise lchelle en 9 tranches. 3 Dplacez les repres, et placez-les de faon approprie sur le bouton ou symbole. Vrifiez que les diffrentes parties

du symbole que vous ne souhaitez pas dformer lors de la mise lchelle (les angles, par exemple) se trouvent en dehors des repres.

Les repres de mise lchelle en 9 tranches sont positionns de manire viter toute dformation des angles pendant le redimensionnement du bouton.

4 (Facultatif) Verrouillez les repres : dans le panneau Proprits, slectionnez Verrouiller les repres de mise

lchelle en 9 tranches.
5 Pour revenir la page contenant les repres, cliquez sur licne de page situe en haut du document 6 Si ncessaire, redimensionnez le symbole laide de loutil Mise lchelle

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Slection et transformation dobjets

52

Le bouton est redimensionn sans dformation des angles.

Aprs lapplication de repres 9 tranches un symbole, vous pouvez imbriquer ce dernier dans les zones protges dautres symboles de mise lchelle en 9 tranches, en crant des objets complexes mis la bonne chelle.

Voir aussi
Symboles la page 161

Mise lchelle en une dimension avec trois tranches


Si vous envisagez dappliquer un objet une mise lchelle en une seule dimension, vous pouvez utiliser trois tranches au lieu de neuf.
Excutez la procdure de mise lchelle en 9 tranches standard, mais, ltape 3, procdez de lune des manires

suivantes :

Pour une mise lchelle verticale, faites glisser les repres de dcoupe horizontaux vers le bord de lobjet. Pour une mise lchelle horizontale, faites glisser les repres verticaux vers le bord.

Identification des symboles qui utilisent la mise lchelle en 9 tranches


Dans le panneau Bibliothque de documents, cliquez deux fois sur une icne de symbole pour passer en mode de

modification de symboles, puis recherchez les repres de dcoupe.

Voir aussi
Passage du mode ddition de symboles au mode ddition de pages la page 162

Objets standard 9 tranches


Loutil Mise lchelle en 9 tranches cre temporairement des repres de dcoupe qui permettent de mettre des objets lchelle plus facilement sans dformer leur gomtrie. Cet outil est utile pour les mises lchelle rapides dobjets bitmap ou de formes simples destins aux prototypes et aux prmaquettes. Les repres que vous crez laide de loutil Mise lchelle en 9 tranches disparaissent aprs une premire utilisation. Pour plus de dtails sur les repres de dcoupe permanents rutilisables plusieurs fois, reportez-vous la section Symboles de mise lchelle en 9 tranches la page 51.
1 Dans la zone de travail, slectionnez un objet bitmap ou une forme vectorielle. 2 Dans le panneau Outils, slectionnez loutil Mise lchelle en 9 tranches

Remarque : si vous avez slectionn une forme automatique ltape 1, Fireworks vous demande de la dissocier. Vous ne pouvez le faire quune fois que vous avez termin de rgler les points de contrle de la forme automatique.
3 Dans le document, disposez les repres de dcoupe de faon conserver autant que possible la gomtrie de lobjet.

(Pour plus de dtails, reportez-vous la section Mise lchelle en 9 tranches la page 50.)
4 Transformez lobjet en faisant glisser un angle ou une poigne latrale.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Slection et transformation dobjets

53

Voir aussi
Formes simples la page 74 formes automatiques la page 78 Prfrences de modification la page 312

Organisation de plusieurs objets


Options dorganisation des objets
Groupement dobjets Permet de considrer les objets comme un seul objet ou de protger les relations de chaque objet

avec les autres objets du groupe.


Empilement des objets Permet de disposer les objets derrire ou devant dautres objets Alignement dobjets slectionns Permet daligner des objets sur lune des parties de la zone de travail, ou sur un axe

vertical ou horizontal.

Association ou dissociation des objets


Vous pouvez associer des objets distincts slectionns et les manipuler comme sils formaient un seul objet. Par exemple, aprs avoir dessin les ptales dune fleur comme objets individuels, associez-les pour slectionner et dplacer la fleur tout entire en tant quobjet unique. Vous pouvez modifier les groupes sans les dissocier. Vous pouvez slectionner un objet individuel au sein dun groupe et le modifier sans dissocier les autres objets. Les objets peuvent tre dissocis tout moment.
Choisissez la commande Modification > Associer ou Modification > Dissocier.

Slection dobjets dans des groupes


Si vous souhaitez travailler sparment sur les objets dun groupe, dissociez-les ou utilisez loutil Sous-slection pour ne slectionner que des objets individuels et laisser le groupe intact. La modification des attributs dun objet sous-slectionn ne sapplique qu lobjet sous-slectionn lui-mme. Le dplacement dun objet sous-slectionn vers un autre calque supprime cet objet du groupe.

Sous-slection dun objet au sein dun groupe

Slection dun objet appartenant un groupe


Slectionnez loutil Sous-slection, puis cliquez sur lobjet ou faites glisser une zone de slection autour de lobjet.

Pour ajouter des objets la slection ou pour en supprimer, maintenez enfonce la touche Maj lorsque vous cliquez dessus ou faites glisser le pointeur.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Slection et transformation dobjets

54

Slection du groupe contenant un objet sous-slectionn


Procdez de lune des manires suivantes :

Cliquez nimporte o dans le groupe avec le bouton droit de la souris (Windows) ou tout en maintenant la
touche Ctrl enfonce (Mac OS), puis choisissez Slection > Superslection dans le menu contextuel.

Choisissez Slection > Superslection.

Slection de tous les objets dun groupe slectionn


Procdez de lune des manires suivantes :

Cliquez nimporte o dans le groupe avec le bouton droit de la souris (Windows) ou tout en maintenant la
touche Ctrl enfonce (Mac OS), puis choisissez Slection > Sous-slection dans le menu contextuel.

Choisissez Slection > Sous-slection.

Empilement des objets


Au sein dun calque, Fireworks empile les objets dans leur ordre de cration, en plaant les objets les plus rcents en premier. Lordre dempilage des objets dtermine leur aspect lorsquils se chevauchent. Les calques affectent galement lordre dempilage. Par exemple, supposons quun document possde deux calques : le calque 1 et le calque 2. Si le calque 1 apparat sous le calque 2 dans le panneau Calques, tous les lments du calque 2 apparaissent devant les lments du calque 1. Vous pouvez modifier lordre des calques dans le panneau Calques en faisant glisser un calque vers un nouvel emplacement. Pour plus de dtails, reportez-vous la section Organisation des calques la page 137.

Modification de lordre dempilage dun objet slectionn ou dun groupe dans un calque
Pour dplacer lobjet ou le groupe tout en haut ou tout en bas de la pile, slectionnez Modification > Disposition >
Premier plan ou Arrire-plan.

Pour dplacer lobjet ou le groupe dune place vers le haut ou vers le bas de la pile, slectionnez Modification >
Disposition > Vers lavant ou Vers larrire. Lorsque plusieurs objets ou groupes sont slectionns, les objets sont placs devant ou derrire les objets non slectionns, tout en prservant leur ordre les uns par rapport aux autres.

Disposition des objets entre les diffrents calques


Le panneau Calques met votre disposition un autre niveau de contrle de lorganisation. Pour dplacer des objets slectionns dun calque vers un autre, faites glisser la vignette de lobjet ou lindicateur de slection bleu vers un autre calque.

Alignement des objets


Vous pouvez appliquer une ou plusieurs commandes dalignement aux objets slectionns. Pour accder rapidement ces commandes, utilisez le panneau Alignement (Fentre > Alignement).

Alignement dobjets slectionns


1 Choisissez Modification > Alignement.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Slection et transformation dobjets

55

2 Choisissez lune des options suivantes :


A gauche Permet daligner les objets sur lobjet slectionn situ le plus gauche. Centre vertical Permet daligner les points centraux des objets sur un axe vertical. A droite Permet daligner les objets sur lobjet slectionn situ le plus droite. En haut Permet daligner les objets sur lobjet slectionn situ le plus haut. Centre horizontal Permet daligner les points centraux des objets sur un axe horizontal. En bas Permet daligner les objets sur lobjet slectionn situ le plus bas.

Pour plus d'informations sur l'alignement des objets, voir le didacticiel sur l'alignement et la rpartition des objets .

Alignement des formes automatiques


Pour dfinir les options dalignement des formes automatiques, utilisez lAPI correspondante. Par exemple :
smartShape.elem.elements[0].pathAttributes.brushPlacement="center"; smartShape.elem.elements[0].pathAttributes.brushPlacement="inside"; smartShape.elem.elements[0].pathAttributes.brushPlacement="outside"; smartShape.elem.elements[0].pathAttributes.fillOnTop=false;

Les paramtres spcifis sutilisent pour la forme automatique correspondante uniquement. Les contours et tracs dessins aprs lapplication de ces paramtres une forme automatique sont utiliss pour les formes automatiques futures, mais pas pour les objets.

Rpartition gale des largeurs et des hauteurs de trois objets slectionns ou plus
Choisissez Modification > Alignement > Rpartir en largeur ou Modification > Alignement > Rpartir en hauteur.

Dernire mise jour le 12/5/2011

56

Chapitre 5 : Utilisation dimages bitmap


Cration dimages bitmap
Les images bitmap sont des graphiques composs de petits carrs colors nomms pixels, organiss comme les carreaux dune mosaque pour former une image. Les photographies, les images numrises et les graphiques crs partir de programmes de dessin sont des exemples dimages bitmap. Elles sont parfois appeles images pixellises. Adobe Fireworks combine les fonctionnalits des applications de retouche de photos, de traage de vecteurs et de dessin. Vous pouvez crer des images bitmap en dessinant laide doutils bitmap, en convertissant des objets vectoriels en images bitmap ou en ouvrant ou en important des images. Les images bitmap ne peuvent pas tre converties en objets vectoriels.

Voir aussi
A propos des graphiques bitmap la page 4

Cration dobjets bitmap par trac


Lorsque vous crez un objet bitmap, il saffiche sur le calque actif. Dans le panneau Calques avec les calques dvelopps, vous pouvez voir une vignette et le nom de chaque objet bitmap sous le calque sur lequel il se trouve. Bien que certaines applications dobjets bitmap considrent chaque objet bitmap comme un calque distinct, Fireworks combine les objets bitmap, vectoriels et texte sur des calques.
1 Dans la section Bitmap du panneau Outils, slectionnez loutil Pinceau ou Crayon. 2 Utilisez loutil Pinceau ou Crayon pour crer des objets bitmap dans la zone de travail.

Un nouvel objet bitmap est ajout au calque actif dans le panneau Calques. Pour plus dinformations sur lutilisation des outils Crayon ou Pinceau, reportez-vous la section Modification dobjets bitmap la page 57.

Cration dobjets bitmap vides


Vous pouvez crer un objet bitmap vide et y tracer ou peindre des pixels ultrieurement.
Procdez de lune des manires suivantes :

Cliquez sur le bouton Nouvelle image bitmap

du panneau Calques.

Choisissez Edition > Insertion > Image bitmap vide. Dessinez un cadre de slection, en partant dune zone vierge de la zone de travail, puis remplissez-le. Pour plus
de dtails, reportez-vous la section Cration de cadres de slection de pixels la page 39. Une image bitmap vide est ajoute au calque actuel dans le panneau Calques.

Coupage ou copie de pixels et collage en tant que nouvel objet bitmap


1 Effectuez une slection de pixels laide des outils Cadre de slection, Lasso ou Baguette magique. 2 Coupez-collez (ou copiez-collez) la slection dans le nouvel objet bitmap.

La slection apparat dans le panneau Calques comme un objet sur le calque actif.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Utilisation dimages bitmap

57

Remarque : vous pouvez galement cliquer avec le bouton droit de la souris (Windows) ou maintenir la touche Ctrl enfonce et cliquer (Macintosh) sur un cadre de slection de pixels pour slectionner une option de coupage ou de copie.

Conversion des objets vectoriels slectionns en image bitmap


Remarque : la conversion dun objet vectoriel en objet bitmap est irrversible, sauf si la commande Edition > Annuler ou lannulation dactions dans le panneau Historique est encore possible.
Procdez de lune des manires suivantes :

Choisissez Modification > Aplatir la slection. Cliquez sur Aplatir la slection dans le menu Options du panneau Calques.

Modification dobjets bitmap


Les outils les plus couramment utiliss pour la retouche photo sont regroups dans le panneau Modification dimages (Fentre > Autres > Modification dimages). Pour plus dinformations, voir larticle de Ruth Kastenmayer, http://www.adobe.com/go/learn_fw_imageeditingpanel_fr, dans le Centre des dveloppeurs Adobe.

Dessin dobjets bitmap


1 Slectionnez loutil Crayon

2 Dfinissez les options de loutil dans linspecteur des proprits :


Lissage Lisse le bord des traits que vous dessinez. Effacement automatique Utilise la couleur de fond lorsque vous cliquez sur la couleur de contour avec loutil

Crayon.
Conserver la transparence Limite laction de loutil Crayon aux pixels existants. Aucun trait napparat dans les zones transparentes du graphique.

3 Faites glisser le pointeur pour dessiner. Tout en maintenant la touche Maj enfonce, faites glisser le pointeur afin

dimposer au trac une ligne horizontale, verticale ou diagonale.

Dessin dun objet avec loutil Pinceau


Pour plus dinformations, reportez-vous la section Application et modification de contours la page 120.
1 Slectionnez loutil Pinceau

2 Dfinissez les attributs du contour dans linspecteur des proprits. 3 Faites glisser le pointeur pour dessiner.

Application de la couleur de fond aux pixels


1 Slectionnez loutil Pot de peinture

2 Slectionnez une couleur dans la case Couleur de fond. 3 Dfinissez la valeur de la tolrance dans linspecteur des proprits.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Utilisation dimages bitmap

58

Remarque : la tolrance dtermine le degr de similarit de la couleur des pixels qui seront remplis. Une valeur de tolrance faible remplit les pixels dont les valeurs chromatiques sont similaires celles du pixel sur lequel vous cliquez. Une valeur de tolrance leve remplit les pixels dont la plage des valeurs chromatiques est plus large.
4 Cliquez sur limage.

Tous les pixels appartenant la plage de tolrance adoptent la couleur de fond.

Application dun fond en dgrad une slection de pixels


1 Effectuez la slection. 2 Dans le panneau Outils, cliquez sur loutil Pot de peinture, puis slectionnez loutil Dgrad

dans le menu

contextuel.
3 Dfinissez les attributs de fond dans linspecteur des proprits. 4 Cliquez sur la slection de pixels pour appliquer le fond.

Echantillonnage dune couleur utiliser comme couleur de contour ou de fond


Remarque : le pointeur de la pipette du slecteur de couleurs est diffrent de loutil Pipette (voir la section Echantillonnage de couleurs partir dune fentre contextuelle pour la slection des couleurs la page 116). Prlevez une couleur dans une image laide de loutil Pipette .

1 Si le bon attribut nest pas encore activ, procdez de lune des manires suivantes :

Cliquez sur licne de contour en regard de la case Couleur de contour du panneau Outils pour en faire lattribut
actif.

Cliquez sur licne de fond en regard de la case Couleur de fond du panneau Outils pour en faire lattribut actif.
Remarque : ne cliquez pas sur la case de couleur. Si vous cliquez dessus, le pointeur de pipette saffiche la place de loutil Pipette.
2 Ouvrez un document Fireworks ou nimporte quel document que Fireworks peut ouvrir. 3 Dans la section Couleurs du panneau Outils, slectionnez loutil Pipette. Dfinissez ensuite le paramtre

dchantillon Egalisation des couleurs dans linspecteur des proprits :


1 pixel Cre une couleur de contour ou de fond partir dun pixel unique. Moyenne 3 x 3 Cre une couleur de contour ou de fond partir de la moyenne des valeurs chromatiques dune zone de 3 pixels sur 3. Moyenne 5 x 5 Cre une couleur de contour ou de fond partir de la moyenne des valeurs chromatiques dune zone de 5 pixels sur 5.

4 Cliquez sur le document avec loutil Pipette.

La couleur chantillonne est disponible dans toutes les cases Couleur de contour et Couleur de fond de Fireworks.

Effacement des pixels dun objet bitmap ou dune slection


1 Slectionnez loutil Gomme

2 Dans linspecteur des proprits, slectionnez une forme de gomme ronde ou carre. 3 Faites glisser les curseurs pour ajuster les niveaux Bord, Taille et Opacit.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Utilisation dimages bitmap

59

4 Faites glisser le pointeur de loutil Gomme sur les pixels effacer.

Recadrage dun objet bitmap slectionn


Vous pouvez isoler un seul objet bitmap dans un document Fireworks et recadrer uniquement cet objet bitmap, laissant intacts les autres objets de la zone de travail.
1 Slectionnez un objet bitmap ou tracez un cadre de slection laide dun outil de slection bitmap. 2 Choisissez Edition > Recadrer lobjet bitmap slectionn. 3 Ajustez les poignes de recadrage jusqu ce que le cadre de slection entoure la zone de limage bitmap conserver.

Remarque : pour annuler une slection de recadrage, appuyez sur la touche Echap.

Cadre de slection

4 Cliquez deux fois lintrieur du cadre de slection ou appuyez sur la touche Entre pour recadrer la slection.

Retouche des images bitmap


Loutil Tampon encreur vous permet de copier ou de cloner une zone dune image dans une autre. Loutil Goutte deau rduit la focalisation des zones slectionnes dans une image. Loutil Doigt prlve une couleur et ltale dans la direction dans laquelle vous faites glisser le pointeur dans une image. Loutil Nettet accentue les zones dune image. Loutil Densit - claircit des parties dune image. Loutil Densit + assombrit des parties dune image. Loutil Retouche des yeux rouges rduit leffet yeux rouges sur vos photos. Loutil Remplacement de couleur permet de recouvrir une couleur existante par une autre couleur.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Utilisation dimages bitmap

60

Clonage de pixels
Le clonage de pixels est utile lorsque vous voulez rparer une photographie endommage ou liminer la poussire dune image. Vous pouvez copier une zone de pixels dune photo et remplacer la partie endommage ou poussireuse par la zone clone.
1 Slectionnez loutil Tampon encreur. 2 Cliquez sur une zone afin de la dsigner comme tant la source (la zone cloner).

Le pointeur dchantillonnage se transforme en un pointeur en forme de croix. Remarque : pour dsigner une autre zone de pixels cloner, cliquez sur cette zone tout en maintenant la touche Alt (Windows) ou Option (Macintosh) enfonce.
3 Dplacez-vous sur une autre partie de limage, puis faites glisser le pointeur.

Deux pointeurs saffichent.

Le premier, de la forme dune croix, reprsente la source. Selon les prfrences de pinceau que vous avez slectionnes, le deuxime pointeur est un tampon encreur, une
croix ou un cercle bleu. Lorsque vous faites glisser le deuxime pointeur, les pixels situs sous le premier pointeur sont copis et appliqus la zone situe sous le second pointeur.

Dfinition des options de loutil Tampon encreur


1 Slectionnez loutil Tampon encreur. 2 Dans linspecteur des proprits, dfinissez les options de loutil Tampon encreur :
Corps Dtermine la taille du tampon. Bord Dtermine ladoucissement du contour (100 % = dur, 0 % = doux). Source aligne Dtermine lopration dchantillonnage. Lorsque loption Source aligne est slectionne, le pointeur dchantillonnage se dplace verticalement et horizontalement, en alignement avec le second. Lorsque loption Source aligne est dslectionne, la zone dchantillonnage est fixe, indpendamment de lendroit o vous dplacez le second pointeur et lendroit o vous cliquez. Utiliser lensemble du document Permet deffectuer un chantillonnage de tous les objets sur tous les calques. Lorsque cette option est dslectionne, loutil Tampon encreur prlve des chantillons uniquement partir de lobjet actif. Opacit Dtermine ce qui peut tre vu de larrire-plan travers le contour. Mode de fusion Dtermine la manire dont limage clone affecte larrire-plan.

Reproduction dune slection de pixels


Faites glisser la slection de pixels laide de loutil Sous-slection. Tout en maintenant la touche Alt (Windows) ou Option (Mac OS) enfonce, faites glisser la slection de pixels
laide de loutil Pointeur.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Utilisation dimages bitmap

61

Attnuation, accentuation et maculage des images


Les outils Goutte deau et Nettet agissent sur la focalisation des pixels. Loutil Goutte deau vous permet de mettre en avant certaines parties dune image en appliquant une attnuation slective sur la focalisation des lments. Loutil Nettet est utile pour corriger des problmes de numrisation ou des photographies floues. Loutil Doigt vous permet de mlanger lgrement les couleurs.
1 Slectionnez loutil Goutte deau, Nettet ou Doigt. 2 Dfinissez les options du pinceau dans linspecteur des proprits :
Corps Dfinit la taille de la pointe. Bord Dfinit la douceur de la pointe. Forme Dfinit une pointe ronde ou carre. Intensit Dfinit la quantit dattnuation ou daccentuation.

Options de maculage
Pression Dfinit lintensit du trait. Couleur de la tache Permet de choisir la couleur utiliser au dbut de chaque trait pour ltaler. Si cette option est dslectionne, loutil utilise la couleur situe sous le pointeur de loutil. Utiliser lensemble du document Etale la couleur en utilisant les donnes chromatiques de tous les objets sur tous les calques. Si cette option est dslectionne, loutil Doigt utilise les couleurs provenant uniquement de lobjet actif.

3 Faites glisser loutil sur les pixels accentuer, attnuer ou taler.

Maintenez la touche Alt (Windows) ou Option (Mac OS) enfonce pour passer dun outil un autre.

Eclaircissement et assombrissement de portions dimage


Vous pouvez claircir ou assombrir des pixels dune image laide des outils Rvlateur ou Brlure, respectivement. Utiliser ces outils revient augmenter ou diminuer lexposition lumineuse pendant le dveloppement dune photo.
1 Slectionnez loutil Densit - pour claircir des parties dimage, ou loutil Densit + pour les assombrir. 2 Dfinissez les options du pinceau et lexposition dans linspecteur des proprits.

Lexposition est comprise entre 0 et 100 %. Des valeurs leves accentuent les effets.
3 Dfinissez la gamme dans linspecteur des proprits :
Tons foncs Change principalement les parties sombres de limage. Tons clairs Change principalement les parties claires de limage. Tons moyens Change principalement la plage des tons moyens par couche de limage.

4 Faites glisser le pointeur sur la partie de limage claircir ou assombrir.

Remarque : pour basculer temporairement entre loutil Densit - et loutil Densit +, maintenez la touche Alt (Windows) enfonce.

Suppression de leffet yeux rouges sur des photos


Loutil Retouche des yeux rouges traite rapidement les zones rouges de la photographie en les recouvrant de tons de gris ou de noir.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Utilisation dimages bitmap

62

Photographie originale et aprs utilisation de loutil Retouche des yeux rouges

1 Dans la section Bitmap du panneau Outils, cliquez sur loutil Suppression de lil rouge 2 Dans linspecteur des proprits, dfinissez les options suivantes :

. (Si loutil est masqu, maintenez le curseur enfonc sur loutil Tampon encreur jusqu lapparition dun menu contextuel.)

Tolrance Dtermine la plage des teintes remplacer (0 remplace uniquement le rouge ; 100 remplace toutes les

teintes contenant du rouge).


Intensit Dfinit la puissance des gris utiliss pour remplacer les couleurs rouges.

3 Faites glisser le pointeur en forme de croix sur les pupilles rouges des sujets de la photographie.

Si les yeux rouges persistent, choisissez Edition > Annuler, puis rptez les tapes 2 et 3 avec dautres valeurs de tolrance et dintensit.

Remplacement des couleurs dans les objets bitmap

Photographie originale et aprs utilisation de loutil Remplacement de couleur

Remplacement dune couleur laide du nuancier


1 Dans la section Bitmap du panneau Outils, slectionnez loutil Remplacer la couleur 2 Dans la zone De dans linspecteur des proprits, cliquez sur Nuance. 3 Cliquez sur la case de couleur De pour slectionner la pipette, puis slectionnez une couleur dans le menu

. (Si loutil est masqu, maintenez le curseur enfonc sur loutil Tampon encreur jusqu lapparition dun menu contextuel.)

contextuel pour spcifier la couleur remplacer.


4 Cliquez sur la case de couleur A dans linspecteur des proprits, puis slectionnez une couleur dans le menu

contextuel pour slectionner la couleur de remplacement.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Utilisation dimages bitmap

63

5 Dfinissez les autres attributs du contour dans linspecteur des proprits :


Tolrance Dtermine la plage des couleurs remplacer (0 remplace uniquement la couleur De ; 100 remplace

toutes les couleurs semblables cette couleur).


Intensit Dtermine la quantit de couleur De qui est remplace. Coloriser Remplace la couleur De par la couleur A. Dslectionnez Coloriser pour remplacer la couleur De par la

couleur A en laissant un peu de la couleur De intacte.


6 Faites glisser loutil sur la couleur remplacer.

Remplacement dune couleur par une couleur slectionne dans une image
1 Dans la section Bitmap du panneau Outils, slectionnez loutil Remplacer la couleur 2 Dans la zone De dans linspecteur des proprits, cliquez sur Image. 3 Cliquez sur la case de couleur A dans linspecteur des proprits pour slectionner la pipette, puis slectionnez une

. (Si loutil est masqu, maintenez le curseur enfonc sur loutil Tampon encreur jusqu lapparition dun menu contextuel.)

couleur dans le menu contextuel.


4 Dfinissez les autres attributs de contour dans linspecteur des proprits. 5 A laide de loutil, cliquez sur une section de limage bitmap contenant la couleur remplacer. Sans soulever loutil,

continuez peindre limage.

Attnuation des bords par contour progressif


La diffusion attnue les bords dune slection de pixels et aide fusionner la zone slectionne avec les pixels environnants. Le contour progressif est pratique lorsque vous copiez une slection et que vous la collez sur un autre arrire-plan.

1 Importez limage laquelle vous souhaitez appliquer un contour progressif sur la zone de travail laide de Fichier >

Importer.
2 Slectionnez la partie concerne de limage laide de lun des outils de slection. 3 Slectionnez Slection > Inverser la slection. 4 Slectionnez Slection > Contour progressif. Vous pouvez galement slectionner cette option dans le menu Bord

du panneau Proprits.
5 Dans la bote de dialogue Appliquer un contour progressif la slection, entrez le rayon du contour progressif. La

valeur par dfaut, 10, convient dans la plupart des cas. Vous pouvez aussi slectionner le rayon souhait dans le menu Bord.
6 Appuyez sur Supprimer.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Utilisation dimages bitmap

64

Ajustement des couleurs et des tons dune image bitmap


Les filtres dajustement de la couleur et du ton permettent damliorer et de rehausser les couleurs des images bitmap.

Les filtres dynamiques vous permettent dappliquer des filtres que vous pouvez supprimer ou modifier sans altrer
dfinitivement les pixels. Il est recommand dutiliser les filtres dynamiques dans la mesure du possible. Remarque : Les filtres dynamiques soient plus souples manipuler, cependant leur utilisation en grand nombre dans un document peut ralentir Fireworks.

Pour appliquer des filtres de manire irrversible et dfinitive, slectionnez-les partir du menu Filtres. Vous ne pouvez pas appliquer de filtres dynamiques aux slections de pixels depuis le menu Filtres. Vous pouvez
dfinir une zone dune image bitmap et lutiliser pour crer une image bitmap distincte puis lui appliquer un filtre dynamique.

Si vous appliquez un filtre un objet vectoriel slectionn en utilisant le menu Filtres, Fireworks convertit la
slection en un objet bitmap.

Application dun filtre dynamique une zone dlimite par un cadre de slection bitmap
1 Slectionnez un outil de slection bitmap, puis tracez un cadre de slection. 2 Choisissez Edition > Couper. 3 Choisissez Edition > Coller.

Fireworks colle la slection lemplacement exact o taient localiss les pixels dorigine, mais la slection est maintenant un objet bitmap distinct.
4 Cliquez sur la vignette du nouvel objet bitmap dans le panneau Calques afin de slectionner lobjet bitmap. 5 Appliquez un filtre dynamique partir de linspecteur des proprits.

Fireworks applique le filtre dynamique uniquement au nouvel objet bitmap, simulant lapplication dun filtre une slection de pixels.

Rglage de la plage tonale des images bitmap


Une image bitmap avec une plage tonale complte doit contenir un nombre pair de pixels dans toutes les zones. Trois options sont proposes pour ajuster la plage tonale : la fonction Niveaux, la fonction Courbes pour un contrle prcis ou la fonction Niveaux automatiques pour des rglages automatiques. La fonction Niveaux corrige les images bitmap comportant une forte concentration de pixels dans les tons clairs, les tons moyens ou les tons foncs.
Tons clairs Corrige un excs de pixels clairs, qui donne limage un aspect dlav. Tons moyens Corrige un excs de pixels dans les tons moyens, qui rend limage fade. Tons foncs Corrige un excs de pixels sombres, qui masque une grande partie des dtails.

La fonction Niveaux dfinit les pixels les plus sombres sur le noir et les plus clairs sur le blanc, puis redistribue les tons moyens proportionnellement. Cette opration permet dobtenir une image dont les pixels sont aussi nets que possible.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Utilisation dimages bitmap

65

Original avec des pixels concentrs dans les tons clairs et aprs excution de la fonction Niveaux

Lhistogramme de la bote de dialogue Niveaux permet dafficher la rpartition des pixels dun bitmap. Lhistogramme est une illustration graphique de la rpartition des pixels dans les tons clairs, les tons moyens et les tons foncs. Lhistogramme vous aide dterminer la meilleure mthode de correction de la plage tonale dune image. Une forte concentration de pixels dans les tons foncs et les tons clairs indique que limage peut tre amliore avec la fonction Niveaux ou Courbes. Laxe horizontal reprsente les valeurs chromatiques des plus fonces (0) aux plus claires (255). Laxe horizontal se lit de gauche droite : les pixels les plus sombres se situent gauche, les pixels moyens au centre et les pixels les plus clairs droite. Laxe vertical reprsente le nombre de pixels en fonction du niveau de luminosit. En gnral, vous rglez les tons clairs et les tons foncs en premier. Le rglage des tons moyens en second permet damliorer leur valeur de luminosit sans affecter les tons clairs et les tons foncs.

Rglage des tons clairs, des tons moyens et des tons foncs laide de la fonction Niveaux
1 Slectionnez limage bitmap. 2 Procdez de lune des manires suivantes :

Dans linspecteur des proprits, cliquez sur licne plus (+) en regard de ltiquette Filtres, puis choisissez
Rgler la couleur > Niveaux dans le menu contextuel Filtres.

Choisissez Filtres > Rgler la couleur > Niveaux.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Utilisation dimages bitmap

66

Bote de dialogue Niveaux

Pour afficher vos modifications dans lespace de travail, cliquez sur Aperu dans la bote de dialogue. Limage est actualise mesure que vous apportez des modifications.
3 Dans le menu contextuel Couche, choisissez dappliquer ces modifications des couches de couleur spcifiques

(Rouge, Bleu ou Vert) ou toutes les couches de couleur (RVB).


4 Faites glisser les curseurs Niveaux dentres sous lhistogramme :

Le curseur de droite permet de rgler les tons clairs avec des valeurs comprises entre 255 et 0. Le curseur du centre permet de rgler les tons moyens avec des valeurs comprises entre 10 et 0. Le curseur de gauche permet de rgler les tons foncs avec des valeurs comprises entre 0 et 255.
Remarque : la valeur des tons foncs ne peut pas tre suprieure la valeur des tons clairs, la valeur des tons clairs ne peut pas tre infrieure la valeur des tons foncs, et les tons moyens doivent se situer entre les paramtres des tons foncs et des tons clairs.
5 Faites glisser les curseurs Niveaux de sortie pour rgler le contraste.

Le curseur de droite permet de rgler les tons clairs avec des valeurs comprises entre 255 et 0. Le curseur de gauche permet de rgler les tons foncs avec des valeurs comprises entre 0 et 255.

Rglage automatique des tons clairs, des tons moyens et des tons foncs
1 Slectionnez limage. 2 Procdez de lune des manires suivantes :

Dans linspecteur des proprits, cliquez sur licne plus (+) en regard de ltiquette Filtres, puis choisissez
Rgler la couleur > Niveaux automatiques dans le menu contextuel Filtres.

Choisissez Filtres > Rgler la couleur > Niveaux automatiques.


Vous pouvez galement rgler automatiquement les tons clairs, les tons moyens et les tons foncs en cliquant sur le bouton Auto dans la bote de dialogue Niveaux ou Courbes.

Ajustement dune couleur spcifique dans la plage tonale laide de la fonction Courbes
La fonction Courbes permet un contrle de la plage tonale plus prcis quavec la fonction Niveaux. Grce la fonction Courbes, vous pouvez ajuster nimporte quelle couleur dans la plage tonale, sans toucher aux autres couleurs.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Utilisation dimages bitmap

67

La grille de la bote de dialogue Courbes illustre deux valeurs de luminosit :


Laxe horizontal Reprsente la luminosit dorigine des pixels (telle quillustre dans la zone Entre). Laxe vertical Reprsente les nouvelles valeurs de luminosit (telles quillustres dans la zone Sortie).

Lorsque vous ouvrez la bote de dialogue Courbes pour la premire fois, la diagonale indique quaucune modification na t apporte et que, par consquent, les valeurs dentre et de sortie sont identiques pour tous les pixels.
1 Slectionnez limage. 2 Pour ouvrir la bote de dialogue Courbes, procdez de lune des manires suivantes :

Dans linspecteur des proprits, cliquez sur le bouton Plus (+) en regard de ltiquette Filtres, puis choisissez
Rgler la couleur > Courbes dans le menu contextuel Filtres. Remarque : si linspecteur des proprits est partiellement rduit, cliquez sur le bouton Ajouter des filtres la place du bouton Plus.

Choisissez Filtres > Rgler la couleur > Courbes.

Bote de dialogue Courbes

3 Dans le menu contextuel Couche, choisissez si vous voulez appliquer les modifications des couches de couleur

spcifiques ou lensemble des couleurs.


4 Pour rgler la courbe, cliquez sur lun des points de la diagonale de la grille, puis faites-le glisser une autre position.

Tous les points de la courbe disposent de leurs propres valeurs Entre et Sortie. Lorsque vous faites glisser un
point, les valeurs Entre et Sortie sont actualises en consquence.

La courbe affiche des valeurs de luminosit comprises entre 0 et 255, 0 reprsentant les tons foncs.

Courbe aprs dplacement dun point par glissement pour le rgler

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Utilisation dimages bitmap

68

Pour ajuster automatiquement les tons clairs, les tons moyens et les tons foncs, cliquez sur le bouton Auto dans la bote de dialogue Courbes.

Suppression dun point le long de la courbe


Faites glisser le point hors de la courbe.

Remarque : vous ne pouvez pas supprimer les points des extrmits de la courbe.

Rglage manuel de la balance des tons


1 Ouvrez la bote de dialogue Niveaux ou Courbes, puis slectionnez une couche de couleur dans le menu

contextuel Couche.
2 Slectionnez la pipette approprie pour rtablir les valeurs tonales de limage :

A laide de la pipette Ton clair clairs.

, cliquez sur le pixel le plus clair de limage afin de redfinir la valeur des tons

A laide de la pipette des tons moyens, cliquez sur un pixel de couleur neutre dans limage afin de redfinir la valeur des tons moyens. A laide de la pipette des tons foncs, cliquez sur le pixel le plus sombre de limage pour redfinir la valeur des tons foncs.

3 Cliquez sur OK.

Rglage de la luminosit et du contraste


La fonction Luminosit/Contraste modifie le contraste ou la luminosit des pixels dune image. Elle agit sur les tons clairs, les tons foncs et les tons moyens dune image.

Original et aprs rglage de la luminosit

1 Slectionnez limage. 2 Procdez de lune des manires suivantes :

Dans linspecteur des proprits, cliquez sur licne plus (+) en regard de ltiquette Filtres, puis choisissez
Rgler la couleur > Luminosit/Contraste dans le menu contextuel Filtres.

Choisissez Filtres > Rgler la couleur > Luminosit/Contraste.


3 Faites glisser les curseurs Luminosit et Contraste pour rgler les paramtres dans la plage comprise entre 100

et 100.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Utilisation dimages bitmap

69

Modification des couleurs dun objet par fusion


Pour plus de dtails, reportez-vous la section A propos des modes de fusion la page 153. Lorsque vous mlangez des couleurs, la couleur est ajoute par-dessus lobjet. La fusion dune couleur celle dun objet existant produit un rsultat semblable celui de la fonction Teinte/Saturation. La fusion permet cependant dappliquer rapidement une couleur spcifique dun nuancier.
1 Dans linspecteur des proprits, cliquez sur licne plus (+) en regard de ltiquette Filtres, puis choisissez Rgler

la couleur > Fond dans le menu contextuel Filtres.


2 Slectionnez un mode de fusion. Le mode par dfaut est Normal. 3 Slectionnez une couleur de fond dans le menu contextuel de la case de couleur. 4 Slectionnez un pourcentage dopacit pour la couleur de fond, puis appuyez sur la touche Entre.

Rglage de la teinte et de la saturation


Vous pouvez rgler la nuance (teinte), lintensit (saturation) ou la clart (luminosit) dune couleur dans une image.

Original et aprs rglage de la saturation

1 Slectionnez limage. 2 Procdez de lune des manires suivantes :

Dans linspecteur des proprits, cliquez sur licne plus (+) en regard de ltiquette Filtres, puis choisissez
Rgler la couleur > Teinte/Saturation dans le menu contextuel Filtres.

Choisissez Filtres > Rgler la couleur > Teinte/Saturation.


3 Faites glisser les curseurs pour ajuster les couleurs de limage.

La valeur de teinte peut tre comprise entre -180 et 180. Les valeurs de saturation et de luminosit peuvent tre comprises entre 100 et 100.

Modification dune image RVB en une image deux tons ou colorisation dune image en niveaux de gris
Dans la bote de dialogue Teinte/Saturation, slectionnez Coloriser.

Remarque : si vous slectionnez Coloriser, la plage de valeurs des curseurs Teinte et Saturation change. Les valeurs de teinte sont comprises entre 0 et 360, et les valeurs de saturation entre 0 et 100.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Utilisation dimages bitmap

70

Inversion des valeurs chromatiques dune image


Vous pouvez appliquer la valeur inverse de chaque couleur dune image partir de la roue chromatique. Par exemple, lapplication du filtre un objet rouge (R=255, V=0, B=0) change la couleur en bleu clair (R=0, V=255, B=255).

Image monochrome et aprs inversion

Image couleur et aprs inversion

1 Slectionnez limage. 2 Procdez de lune des manires suivantes :

Dans linspecteur des proprits, cliquez sur licne plus (+) en regard de ltiquette Filtres, puis choisissez
Rgler la couleur > Inverser dans le menu contextuel Filtres.

Choisissez Filtres > Rgler la couleur > Inverser.

Conversion dun objet en niveaux de gris


1 Slectionnez lobjet. 2 Slectionnez Commandes > Cration > Convertir en niveaux de gris.

Conversion dun objet en spia


1 Slectionnez lobjet. 2 Slectionnez Commandes > Cration > Convertir en spia.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Utilisation dimages bitmap

71

Attnuation et accentuation des images bitmap


Options dattnuation
Attnu Adoucit la focalisation des pixels slectionns. Plus flou Applique un flou trois fois plus puissant que celui de la commande Flou. Flou gaussien Applique chaque pixel une valeur mdiane pondre dattnuation pour produire un effet de voilage.

Les valeurs de rayon de flou peuvent tre comprises entre 0,1 et 250. Plus le rayon est grand, plus leffet de flou est marqu.
Flou directionnel Donne limpression que limage est en mouvement. Les valeurs de distance peuvent tre comprises

entre 1 et 100. Plus la distance est grande, plus leffet de flou est marqu.
Flou radial Confre un effet de rotation limage. Les valeurs de qualit peuvent tre comprises entre 1 et 100. Une

qualit leve se traduit par moins de rptitions de limage originale dans leffet de flou.
Flou de zoom Donne limpression que le sujet de limage sapproche ou sloigne de la personne qui regarde la photo. Les valeurs Intensit et Qualit sont requises. Une qualit leve se traduit par moins de rptitions de limage originale dans leffet de flou. Plus lintensit est leve, plus leffet de flou est marqu.

1 Slectionnez limage. 2 Procdez de lune des manires suivantes :

Dans linspecteur des proprits, cliquez sur licne plus (+) en regard de ltiquette Filtres, puis choisissez, puis
choisissez une option dattnuation dans le menu contextuel Filtres.

Choisissez Filtres > Attnuation > [option dattnuation].


3 Dfinissez dautres valeurs pour loption dattnuation choisie.

Transformation dune image bitmap en dessin au trait


Donnez vos images bitmap lapparence de dessins au trait en identifiant les transitions de couleurs dans les images et en les changeant en traits. Procdez de lune des manires suivantes :

Dans linspecteur des proprits, cliquez sur licne plus (+) en regard de ltiquette Filtres, puis choisissez Autre >
Trac des contours dans le menu contextuel Filtres.

Choisissez Filtres > Autre > Trac des contours.

Original et aprs application de la commande Trac des contours

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Utilisation dimages bitmap

72

Conversion dune image en transparent


Convertissez un objet ou du texte en transparent selon le degr de transparence de limage. Procdez de lune des manires suivantes :

Dans linspecteur des proprits, cliquez sur licne plus (+) en regard de ltiquette Filtres, puis choisissez Autre >
Convertir en Alpha dans le menu contextuel Filtres.

Choisissez Filtres > Autre > Convertir en Alpha.

Accentuation dune image


Slectionnez une option daccentuation de la nettet pour corriger des images floues :
Plus net Rgle la focalisation dune image floue en augmentant le contraste des pixels adjacents. Encore plus net Augmente le contraste des pixels adjacents trois fois plus que la commande Plus net. Accentuation Rgle le contraste des bords des pixels pour rendre limage plus nette. Cette option offre le meilleur contrle et doit tre utilise en priorit pour accentuer une image.

Original et aprs accentuation

1 Slectionnez limage. 2 Procdez de lune des manires suivantes :

Dans linspecteur des proprits, cliquez sur licne plus (+) en regard de ltiquette Filtres, slectionnez
Renforcement, puis slectionnez une option daccentuation dans le menu contextuel Filtres.

Choisissez Filtres > Renforcement > [option daccentuation].


Les options Plus net ou Encore plus net prennent effet.
3 (Option Accentuation) Faites glisser le curseur Intensit de laccentuation pour slectionner un facteur de nettet

compris entre 1 et 500 %.


4 Rglez le curseur Rayon en pixels pour slectionner un rayon compris entre 0,1 et 250.

Plus le rayon est lev, plus la zone fort contraste entourant les pixels est tendue.
5 Rglez le curseur Seuil pour slectionner une valeur comprise entre 0 et 255.

Les valeurs comprises entre 2 et 25 sont les plus communes. Lorsque vous augmentez ce seuil, vous naccentuez que les pixels dont le contraste est lev. Par contre, lorsque vous le diminuez, vous incluez les pixels de plus faible contraste. Un seuil de 0 accentue lensemble des pixels de limage.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Utilisation dimages bitmap

73

Ajout de bruit une image


Lorsquelles sont affiches un niveau de zoom lev, la plupart des images obtenues partir dappareils photo numriques ou de scanners prsentent des couleurs qui ne sont pas parfaitement uniformes. Les couleurs sont constitues de pixels comprenant de nombreuses couleurs diffrentes. Dans le domaine du traitement de limage, la notion de bruit fait rfrence ces variations chromatiques alatoires dans les pixels qui composent une image. Dans certains cas (notamment lorsque vous collez une partie dune image dans une autre image), lcart de variation chromatique alatoire entre deux images peut tre visible. Ceci empche les images de se fondre lune dans lautre. Dans ce cas, ajoutez du bruit lune des images, ou aux deux, afin de crer lillusion que ces deux images proviennent de la mme source. Vous pouvez galement ajouter du bruit une image pour des raisons artistiques (pour imiter une vieille photographie ou des parasites sur un cran de tlvision, par exemple).

Photographie originale et aprs ajout de bruit

Ajout de bruit
1 Slectionnez limage. 2 Pour ouvrir la bote de dialogue Ajout de bruit, procdez de lune des manires suivantes :

Dans linspecteur des proprits, cliquez sur licne plus (+) en regard de ltiquette Filtres, puis choisissez
Bruit > Ajout de bruit dans le menu contextuel Filtres.

Choisissez Filtres > Bruit > Ajout de bruit.


Remarque : lapplication dun filtre partir du menu Filtres est une action irrversible ; elle ne peut pas tre annule, sauf si la commande Edition > Annuler est disponible. Pour conserver la possibilit deffectuer des ajustements, dsactivez ou supprimez ce filtre, puis appliquez-le en tant que filtre dynamique, comme dcrit dans la premire option de cette tape. Pour plus dinformations, reportez-vous la section Utilisation des filtres dynamiques la page 129.
3 Rglez le curseur Quantit pour dfinir la quantit du bruit.

Les valeurs vont de 1 400. Plus la quantit est leve, plus le positionnement des pixels est alatoire dans limage.
4 Slectionnez loption Couleur afin dappliquer le bruit color. Dsactivez-la pour appliquer uniquement un bruit

monochrome.
5 Cliquez sur OK.

Dernire mise jour le 12/5/2011

74

Chapitre 6 : Utilisation des objets vectoriels


Un objet vectoriel est un graphique numrique dont la forme est dfinie par un trac. La forme dun trac vectoriel est dfinie par une srie de points. La couleur de contour dun objet vectoriel pouse le trac et son fond occupe lespace situ lintrieur du trac. Le contour et le fond dterminent laspect du graphique lorsque ce dernier est publi sous une forme imprime ou sur le Web. Les objets vectoriels peuvent prendre des formes lmentaires, des formes automatiques (groupes dobjets vectoriels dont les attributs sont modifiables au moyen de contrles spcifiques) ou des formes libres (dessines main leve). Vous pouvez utiliser un grand nombre doutils et de techniques pour dessiner et retoucher des objets vectoriels.

Formes simples
Les lignes, les rectangles, les ellipses, les rectangles arrondis, les polygones et les toiles sont des formes simples. Remarque : Pour viter les pixels parasites et amliorer la nettet des objets vectoriels, cliquez sur Commandes > Slection > Utiliser le rendu vectoriel existant.

Dessin et retouche de formes simples


Les outils Rectangle et Rectangle arrondi permettent de dessiner des rectangles sous forme dobjets groups. Pour dplacer sparment un point dangle de rectangle, dissociez le rectangle ou utilisez loutil Sous-slection . Pour plus dinformations sur le redimensionnement et la mise lchelle des objets, reportez-vous la section Transformation et dformation des objets et des slections la page 47.

Dessin dune ligne, dun rectangle ou dune ellipse


1 Dans le panneau Outils, slectionnez loutil Ligne, Rectangle ou Ellipse. 2 (Facultatif) Slectionnez les attributs de contour et de fond dans linspecteur des proprits. 3 Faites glisser le pointeur sur la zone de travail pour dessiner la forme.

Maintenez la touche Maj enfonce lorsque vous faites glisser le pointeur de loutil Ligne pour tracer des lignes
par incrments de 45 degrs.

Maintenez la touche Maj enfonce lorsque vous faites glisser le pointeur de loutil Rectangle ou Ellipse pour
tracer des carrs ou des cercles.

Dessin dune forme partir du point central


Placez le pointeur sur le point central voulu, puis, tout en maintenant la touche Alt (Windows) ou Option

(Mac OS) enfonce, faites glisser loutil de dessin. Pour conserver les proportions, maintenez galement la touche Maj enfonce.

Ajout de pointes de flches sur une ligne


1 Tracez ou slectionnez une ligne.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Utilisation des objets vectoriels

75

2 Choisissez la commande Commandes > Cration > Ajouter indicateur sous-menu. 3 Dfinissez les lments suivants :

Slectionnez Ajouter au dbut ou Ajouter la fin si ncessaire, puis dfinissez le style de la pointe de flche. Slectionnez Appliquer un contour et Fond uni, si ncessaire.

Repositionnement dune forme lmentaire mesure que vous la dessinez


Tout en maintenant le bouton de la souris et la barre despace enfoncs (rectangles et ellipses uniquement), faites

glisser lobjet vers un autre emplacement de lespace de travail. Relchez la barre despace pour continuer dessiner lobjet.

Redimensionnement dune ligne, dun rectangle ou dune ellipse aprs leur slection
La mise lchelle dun objet vectoriel ne change pas lpaisseur du trait. Le redimensionnement des objets respecte leurs proportions.
Procdez de lune des manires suivantes :

Entrez les nouvelles valeurs de largeur (L) ou de hauteur (H) dans linspecteur des proprits ou le panneau Info. Dans la section Slection du panneau Outils, slectionnez loutil Mise lchelle, puis faites glisser une poigne
de transformation dangle.

Choisissez Modification > Transformer > Mise lchelle et faites glisser une poigne de transformation dangle,
ou choisissez Modification > Transformer > Transformation numrique et entrez les nouvelles dimensions.

Faites glisser le point dangle sur un rectangle.

Optimisation de la nettet des lignes


Il arrive que les lignes traces dans Fireworks ne soient pas aussi nettes que souhait. Ce flou vient du fait que les nuds du trac sont espacs dun demi-pixel lors de lutilisation de la souris. Pour optimiser la nettet des objets, faites appel la commande Accrocher au pixel. Cette commande intervient sur les lignes droites lorsque la diffrence entre les coordonnes x ou y des deux nuds est infrieure ou gale 0,5 px. Si les nuds Fireworks sont distants dun demi-pixel, les coordonnes x ou y des deux nuds doivent se trouver dans les limites dun mme pixel. Un dplacement de 0,5 px entrane parfois un cart dun pixel dans les coordonnes x et y dans linspecteur des proprits, car celui-ci remplace les valeurs fractionnaires par lentier le plus proche. Remarque : Pour viter les pixels parasites et amliorer la nettet des objets vectoriels, cliquez sur Commandes > Slection > Utiliser le rendu vectoriel existant.
Numro 1 Scnario Un rectangle primitif est mis lchelle, loption Mise lchelle des contours et des effets tant dslectionne dans la bote de dialogue Prfrences. Une ligne dune paisseur uniforme est trace laide de loutil Ligne. Problme Le rectangle nest pas accroch au pixel le plus proche et ses bords sont flous. Solution Slectionnez lobjet, cliquez dessus avec le bouton droit de la souris et choisissez Accrocher au pixel.*

Elle est floue.

Slectionnez lobjet, cliquez dessus avec le bouton droit de la souris et choisissez Accrocher au pixel.* Slectionnez lobjet, cliquez dessus avec le bouton droit de la souris et choisissez Accrocher au pixel.*

Un trac vectoriel droit est cr laide de Le trac est flou. loutil Plume.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Utilisation des objets vectoriels

76

*La fonctionnalit Accrocher au pixel est galement disponible dans le menu Modifier ou au moyen des touches de raccourci Ctrl+K (Windows) ou Cmd+K (Mac OS). Remarque : Il est impossible dannuler la commande Accrocher au pixel.

Scnario 1

Scnario 2

Scnario 3

JSAPI : fw.getDocumentDOM().snapToPixel() : la fonction Accrocher au pixel est applique lobjet slectionn sur la zone de travail.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Utilisation des objets vectoriels

77

Dessin de rectangles arrondis lmentaires


Indiquez la valeur de larrondi des angles en pourcentages ou en pixels. Lorsque vous optez pour une valeur en pixels, la valeur maximum correspond la moiti de la longueur du ct de rectangle le plus petit ; les valeurs suprieures nauront aucun effet. Pour plus dinformations sur la prservation de larrondi des angles dun rectangle lors de sa mise lchelle, voir larticle de Sarthak.
1 Dans la section Vecteur du panneau Outils, slectionnez loutil Rectangle. 2 Faites glisser le pointeur sur la zone de travail pour dessiner le rectangle. 3 Dans linspecteur des proprits, choisissez pourcentage ou pixels dans le menu contextuel situ droite de la

case Arrondi. A laide du curseur, dfinissez un pourcentage, ou entrez une valeur comprise entre 0 et 100 dans la zone. Si vous avez choisi pixels, vous pouvez saisir jusqu la moiti de la longueur du ct le plus court du rectangle. Appuyez sur les touches flches Haut et Droite tout en faisant glisser les angles du rectangle pour les arrondir. Utilisez les touches flches Bas et Gauche pour rduire larrondi des angles.

Dessin dun polygone lmentaire


Loutil Polygone permet de dessiner des polygones quilatraux (y compris des triangles) partir dun point central.
1 Slectionnez Fentre > Proprits de forme automatique. 2 Cliquez sur l'outil Polygone. 3 Procdez de lune des manires suivantes :

Faites glisser les points de contrle jaunes pour obtenir le nombre de cts voulus. Dans la bote de dialogue Proprits de forme automatique, spcifiez les points et les cts requis.

Dessin dune toile


1 Cliquez sur le panneau Outils et appuyez sur U. 2 Cliquez sur la flche vers le bas et slectionnez l'icne Etoile dans le menu. 3 Procdez de lune des manires suivantes :

Slectionnez Fentre > Proprits de forme automatique. Personnalisez l'toile au moyen des diffrentes options
de la bote de dialogue Proprits de forme automatique.

Faites glisser les points jaunes de l'toile. Dplacez la souris sur le point jaune. Une info-bulle dcrit la fonction.
Pour contraindre lorientation dune toile par incrments de 45 degrs, maintenez la touche Maj enfonce pendant que vous faites glisser le pointeur.

Modification/enregistrement de rectangles primitifs


Les options de modification et denregistrement dun rectangle primitif ne sont accessibles dans linspecteur des proprits quune fois le rectangle dissoci. Il est impossible de modifier larrondi dun rectangle dans linspecteur des proprits une fois quil est dissoci. Vous pouvez cependant effectuer cette opration laide de loutil Vecteur.

Options de contour dans linspecteur des proprits avant la dissociation du rectangle

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Utilisation des objets vectoriels

78

Options de contour dans linspecteur des proprits aprs la dissociation du rectangle

formes automatiques
Les formes automatiques, contrairement aux autres groupes dobjets, comportent des points de contrle en forme de losange en plus des poignes de groupes dobjets. Lorsque vous faites glisser un point de contrle, vous modifiez uniquement la proprit visuelle associe. Les points de contrle saccompagnent, pour la plupart, dinfo-bulles qui dcrivent leur impact sur la forme automatique.

Les outils Formes automatiques crent des formes avec des orientations prdfinies. Par exemple, loutil Flche dessine des flches horizontales. De mme, avec la forme automatique Etoile, cliquez sur le point de contrle gauche et faitesle glisser vers le haut ou le bas pour modifier le nombre de points. Les autres points de contrle permettent de modifier la nettet et la profondeur des rayons. Pour plus de dtails sur la modification de lorientation, reportez-vous la section Transformation et dformation des objets et des slections la page 47.

Outils de formes automatiques


Flche Flches simples de toutes proportions, avec des lignes droites ou courbes. Corps de flche Minces lignes droites permettant daccder rapidement aux pointes de flche les plus courantes (il

suffit de cliquer sur une extrmit de la ligne).


Rectangle biseaut Rectangles avec angles biseauts. Rectangle chanfrein Rectangles avec chanfreins (angles arrondis lintrieur du rectangle). Connecteur Lignes connectrices trois segments, telles que celles utilises pour relier les lments dun organigramme. Anneau Anneaux remplis. Forme en L Formes angles droits. Outil Mesure Simples lignes de flche indiquant les dimensions des lments de conception principaux en pixels ou

en pouces.
Graphique secteurs Diagrammes circulaires. Rectangle arrondi Rectangles aux angles arrondis. Polygone intelligent Polygones quilatraux comportant de 3 25 cts. Spirale Spirales ouvertes.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Utilisation des objets vectoriels

79

Etoile Etoiles comportant un nombre de points compris entre 3 et 25.

Dessin dune forme automatique


1 Dans la section Vecteur du panneau Outils, slectionnez un outil Forme automatique dans le menu contextuel. 2 Procdez de lune des manires suivantes :

Faites glisser le pointeur sur la zone de travail pour dessiner la forme. Cliquez sur la zone de travail pour y placer la forme sa taille par dfaut.

Ajout dune ombre une forme automatique


Loption Ajouter une ombre ajoute une ombre sous lobjet slectionn en fonction des dimensions de cet objet. Lombre est en ralit une forme automatique dote de points de contrle que vous pouvez manipuler pour modifier son aspect. Par exemple, vous pouvez maintenir la touche Maj enfonce en faisant glisser le point de contrle directionnel afin de forcer son mouvement un angle de 45 degrs. Un clic sur le point de contrle directionnel restitue lombre sa forme dorigine. La commande Ajouter une ombre fait automatiquement reculer la nouvelle forme dombre dun niveau. Lombre se superpose lobjet slectionn, sauf si vous appliquez cette commande un seul objet situ dans la partie suprieure du calque actif.
1 Slectionnez un objet dans la zone de travail. 2 Choisissez Commandes > Cration > Ajouter une ombre. 3 (Facultatif) Pour modifier lombre, procdez de lune des manires suivantes :

Faites glisser le point de contrle directionnel de faon effectuer un mouvement correspondant un angle de
45 degrs.

Cliquez sur le point de contrle directionnel pour redfinir lombre (sa taille est identique la forme dorigine). Tout en maintenant les touches Ctrl + Cmde enfonces, cliquez sur le point de contrle directionnel pour
redfinir uniquement laxe des x.

Cliquez deux fois sur le point de contrle de perspective pour redfinir uniquement la largeur de lombre.

Modification prcise des proprits des formes automatiques


Pour exercer un contrle numrique prcis sur une forme automatique slectionne ou pour insrer une autre forme automatique dans votre document, utilisez le panneau Proprits de forme automatique. Remarque : ce panneau ne prend en charge que les formes automatiques figurant dans le panneau Outils. Il ne prend en charge ni les formes automatiques tierces ni celles du panneau Formes (Fentre > Formes automatiques). Selon le type de forme automatique utilis, les proprits modifiables peuvent varier.
1 Insrez une forme automatique dans votre document. 2 Choisissez Fentre > Proprits de forme automatique. 3 Dfinissez les proprits.

Vous pouvez verrouiller les angles des formes rectangulaires de faon ce que les modifications apportes un angle se rpercutent sur les quatre. Vous pouvez galement modifier les proprits pour chaque angle individuellement.
4 Pour appliquer les changements, appuyez sur la touche de tabulation ou Entre.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Utilisation des objets vectoriels

80

Pour effectuer dautres rglages de formes automatiques dans la zone de travail, utilisez les points de contrle. Les valeurs correspondantes sont mises jour de faon dynamique dans le panneau Proprits de forme automatique.

Modification des proprits de forme automatique laide des points de contrle


Slectionnez une forme automatique, puis utilisez les points de contrle jaunes pour dfinir les proprits de forme automatique. Le nom dun point de contrle voque sa fonction. Pour afficher un nom, faites glisser la souris sur un point de contrle jusqu ce quune info-bulle apparaisse.

Rglage des formes automatiques en forme de flches


Pour rgler la nettet de la pointe de la flche, faites glisser les points de contrle de pointe de la flche et de taille
de la flche.

Pour rgler la largeur, la hauteur, lpaisseur et larrondi de la queue de la flche, faites glisser le point de contrle
portant le nom correspondant. Pour crer une flche incurve, faites glisser le point de contrle de largeur ou de hauteur vers la droite ou vers la gauche.

Rglage des formes automatiques en forme de lignes flches


Pour passer en revue les options de pointes de flche, cliquez sur un point de contrle lune des extrmits de la
ligne.

Pour allonger ou raccourcir la ligne, faites glisser un point de contrle.

Rglage des formes automatiques reprsentant des rectangles biseauts, chanfreins et arrondis
Pour rgler simultanment tous les angles dun rectangle, faites glisser un point de contrle dangle. Pour rgler un seul angle du rectangle, glisser un point de contrle dangle tout en maintenant la touche Alt
(Windows) ou Option (Mac OS) enfonce.

Pour redimensionner un rectangle en conservant les angles intacts, faites glisser le point de contrle de glissementredimensionnement.

Pour convertir tous les angles dun rectangle dans un type diffrent, cliquez sur un point de contrle dangle. Pour convertir un seul angle de rectangle dans un autre type, cliquez sur un point de contrle dangle tout en
maintenant la touche Alt (Windows) ou Option (Mac OS) enfonce.

Rglage des formes automatiques reprsentant des connecteurs


Pour dplacer le point de dbut ou le point de fin, faites glisser le point de contrle au dbut ou la fin de la ligne
connecteur.

Pour repositionner la barre transversale, faites glisser le point de contrle de position horizontale. Pour rgler tous les angles, faites glisser un point de contrle dangle. Pour rgler un seul angle, faites glisser un point de contrle dangle tout en maintenant la touche Alt (Windows)
ou Option (Mac OS) enfonce.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Utilisation des objets vectoriels

81

Rglage des formes automatiques en forme danneaux


Les formes automatiques reprsentant des anneaux disposent initialement de trois points de contrle. Pour chaque nouvelle section, Fireworks ajoute un point de contrle permettant de la redimensionner ou de la diviser.

Pour ajouter une section, faites glisser un point de contrle dajout/de division de secteur sur le primtre extrieur
de la forme tout en maintenant la touche Alt (Windows) ou Option (Mac OS) enfonce.

Pour supprimer une section, faites glisser le point de contrle dajout/division de secteur sur le primtre extrieur
de la forme pour dfinir la portion de la forme qui doit rester dans la zone de travail.

Pour redimensionner le rayon intrieur, faites glisser son point de contrle. Pour affecter la valeur zro au rayon intrieur, cliquez sur son point de contrle de rinitialisation.

Rglage des formes automatiques reprsentant des formes en L


Pour modifier la hauteur ou la largeur dune section, faites glisser le point de contrle de hauteur ou de largeur. Pour rgler larrondi des angles, faites glisser le point de contrle de rayon dangle.

Rglage des formes automatiques de loutil Mesure


Pour modifier la longueur ou langle de la section mesure, faites glisser le point de contrle lune des extrmits
de la ligne.

Pour modifier les units et passer des pixels aux pouces, maintenez la touche Ctrl (Windows) ou Cmde (Mac OS)
enfonce tout en faisant glisser un point de contrle lune des extrmits.

Pour allonger ou raccourcir les lignes de dlimitation de la section mesure, faites glisser un point de contrle sur
lun des cts de la valeur mesure. Loutil Mesure est utile lorsque vous dfinissez des spcifications dinterface. Pour masquer les mesures, cliquez sur licne reprsentant un il situe dans le panneau Calques.

Rglage des formes automatiques en forme de graphiques secteurs


Les formes automatiques reprsentant des graphiques secteurs disposent initialement de trois points de contrle. Pour chaque nouvelle section, Fireworks ajoute un point de contrle permettant de la redimensionner ou de la diviser.

Pour ajouter un secteur, faites glisser un point de contrle de glissement vers un segment sur le primtre extrieur
de la forme tout en maintenant la touche Alt (Windows) ou Option (Mac OS) enfonce.

Pour redimensionner une tranche (secteur) de graphique secteurs, faites glisser un point de contrle de glissement
vers un segment sur le primtre extrieur de la forme.

Pour rinitialiser un graphique secteurs une tranche, cliquez sur son point de contrle de rinitialisation.

Rglage des formes automatiques reprsentant des polygones intelligents


Pour redimensionner ou faire pivoter le polygone, faites glisser le point de contrle de mise lchelle/rotation.
Pour effectuer une rotation uniquement, faites glisser le point de contrle de mise lchelle/rotation tout en maintenant la touche Alt (Windows) ou Option (Mac OS).

Pour ajouter ou supprimer des sections, faites glisser le point de contrle de sections. Pour modifier le nombre de cts, faites glisser le point de contrle de cts. Pour segmenter le polygone, faites glisser le point de contrle des cts tout en maintenant la touche Alt (Windows)
ou Option (Mac OS).

Pour redimensionner un polygone intrieur, faites glisser son point de contrle.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Utilisation des objets vectoriels

82

Pour rinitialiser un polygone intrieur, faites glisser son point de contrle de rinitialisation.

Rglage des formes automatiques en forme de spirales


Pour modifier le nombre de spires, faites glisser le point de contrle de spirales. Pour ouvrir ou fermer la spirale, cliquez sur le point de contrle douverture/fermeture de spirale.

Rglage des formes automatiques toiles


Pour modifier le nombre de cts, faites glisser le point de contrle de pointes. Pour rgler la base des branches, faites glisser le point de contrle correspondant. Pour rgler les pointes, faites glisser le point de contrle de sommet. Pour rgler larrondi des sommets et des bases, faites glisser le point de contrle darrondi.

Utilisation de formes automatiques supplmentaires


Le panneau Formes automatiques contient dautres formes automatiques plus complexes que celles du panneau Outils. Pour insrer ces formes automatiques dans votre dessin, faites-les glisser du panneau Formes automatiques vers la zone de travail.
1 Choisissez Fentre > Formes automatiques pour afficher le panneau Formes automatiques. 2 Faites glisser un aperu de forme automatique du panneau Formes automatiques vers la zone de travail. 3 (Facultatif) Modifiez la forme automatique en faisant glisser lun de ses points de contrle.

Ajout de nouvelles formes automatiques dans Fireworks


Vous pouvez ajouter de nouvelles formes automatiques provenant du site Web dAdobe Fireworks Exchange. Les nouvelles formes automatiques apparaissent soit dans le panneau Formes automatiques, soit dans le menu Outils. Vous pouvez galement programmer de nouvelles formes automatiques dans Fireworks en code JavaScript. Pour plus dinformations, reportez-vous la section Extension de Fireworks.
1 Choisissez Fentre > Formes automatiques pour afficher le panneau Formes automatiques. 2 Dans le menu Options, slectionnez Acqurir plus de formes automatiques. 3 Sur le site Web Fireworks Exchange, suivez les instructions dajout de formes qui saffichent lcran.

Formes libres
Vous pouvez dessiner et retoucher des tracs vectoriels pour crer pratiquement toutes les formes dobjets vectoriels souhaites.

Dessin de tracs de forme libre laide de loutil Trac vectoriel


Vous pouvez utiliser loutil Trac vectoriel, qui figure dans le menu contextuel Plume, pratiquement de la mme manire quun marqueur ou un crayon. Cet outil saccompagne dune grande varit de catgories de traits, notamment larographe, la calligraphie, le fusain, la craie grasse et les artifices. Ces catgories disposent elles-mmes de plusieurs types de contours, tels que le marqueur clair, le marqueur fonc, les claboussures, le bambou, le ruban, les confettis, le 3D, le dentifrice et lalien visqueux.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Utilisation des objets vectoriels

83

Mme si les contours ressemblent de la peinture ou de lencre, ils sont constitus de points et de tracs comme tous les objets vectoriels. Par consquent, vous pouvez changer la forme des contours selon diffrentes techniques de retouche vectorielle. Lorsque vous remodelez un trac, le contour est redessin. Vous pouvez galement modifier les traits de pinceau existants et appliquer des fonds aux objets slectionns qui ont t dessins avec loutil Trac vectoriel. Voir Application de couleurs, de contours et de fonds la page 111.
1 Dans le menu contextuel de loutil Plume, slectionnez loutil Trac vectoriel

2 (Facultatif) Slectionnez les attributs de contour et les options de loutil Trac vectoriel dans linspecteur des

proprits. (Facultatif) Pour obtenir un lissage plus prcis du trac, slectionnez un nombre dans le menu contextuel Prcision de linspecteur des proprits, que vous appliquerez loutil Trac vectoriel. Plus le nombre slectionn est lev, plus le nombre de points visibles sur le trac que vous dessinez est lev.
3 Faites glisser le pointeur pour dessiner. Pour contraindre le trac une ligne horizontale ou verticale, faites glisser

le pointeur tout en maintenant la touche Maj enfonce.


4 Relchez le bouton de la souris la fin du trac. Pour fermer le trac, relchez le bouton de la souris aprs avoir

plac le pointeur sur le premier point du trac.

Dessin de tracs de forme libre au moyen de points placs avec loutil Plume
Le traage de points est une technique semblable celle utilise pour dessiner une image de points relis. Lorsque vous cliquez sur chaque point avec loutil Plume, Fireworks dessine automatiquement le trac de lobjet vectoriel partir du dernier point sur lequel vous avez cliqu. Loutil Plume permet non seulement de relier des points par des segments de droite, mais galement de dessiner des segments incurvs lisses drivs dune fonction mathmatique appels des courbes de Bzier. Le type de point, point dangle ou point de courbe, dtermine si la forme adjacente est une droite ou une courbe.

Vous pouvez modifier les segments droits et incurvs en faisant glisser leurs points. Vous pouvez les retoucher davantage en faisant glisser leurs poignes de point. Vous pouvez galement convertir un segment droit en segment incurv, et inversement, en convertissant ses points.

Dessin dun trac avec des segments de droite


1 Dans le panneau Outils, cliquez sur loutil Plume. 2 (Facultatif) Choisissez la commande Edition > Prfrences (Windows) ou Fireworks > Prfrences (Mac OS X) et

slectionnez lune des options dans longlet Edition, puis cliquez sur le bouton OK :
Afficher laperu de loutil Plume Permet dobtenir un aperu du segment de droite tel quil doit apparatre lors du

clic suivant.
Points pleins Permet dafficher des points unis mesure que vous dessinez.

3 Cliquez sur la zone de travail pour placer le premier point dangle. 4 Dplacez le pointeur et cliquez pour placer le point suivant. 5 Continuez tracer des points. Les segments de droite relient les points.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Utilisation des objets vectoriels

84

6 Procdez de lune des manires suivantes :

Cliquez deux fois sur le dernier point pour terminer le trac dans le cas dun trac ouvert. Slectionnez un autre outil pour laisser ce trac ouvert.
Remarque : si vous slectionnez un outil diffrent (autre que loutil Texte) puis revenez loutil Plume, Fireworks reprend le dessin de lobjet votre prochain clic.

Pour fermer le trac, cliquez sur le premier point que vous avez trac. Les points de dpart et de fin dun trac
ferm sont les mmes. Remarque : les boucles formes par un trac qui se chevauche ne constituent pas des tracs ferms. Seuls les tracs qui commencent et se terminent par le mme point sont des tracs ferms.

Dessin dun trac avec des segments incurvs


1 Dans le panneau Outils, slectionnez loutil Plume. 2 Cliquez pour placer le premier point dangle. 3 Dplacez le pointeur vers lemplacement du point suivant, puis faites glisser le pointeur pour obtenir un point de

courbe. Lorsque vous faites glisser le pointeur, Fireworks tend le segment de droite jusquau nouveau point.

4 Continuez tracer des points. Lorsque vous faites glisser un nouveau point, vous crez un point de courbe. Si vous

cliquez simplement, vous crez un point dangle. Vous pouvez utiliser temporairement loutil Sous-slection pour changer lemplacement des points et la forme des courbes que vous tracez. Faites glisser un point ou une poigne de point avec loutil Plume tout en maintenant la touche Ctrl (Windows) ou Commande (Mac OS) enfonce.
5 Procdez de lune des manires suivantes :

Pour terminer le trac en tant que trac ouvert, cliquez deux fois sur le dernier point ou slectionnez un autre
outil. Si vous slectionnez certains outils puis revenez loutil Plume, Fireworks reprend le dessin de lobjet votre prochain clic.

Pour fermer le trac, cliquez sur le premier point que vous avez trac. Les points de dpart et de fin dun trac
ferm sont les mmes.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Utilisation des objets vectoriels

85

Conversion de segments de trac en points droits ou incurvs


Des points dangle figurent lintersection des segments droits. Les segments incurvs comportent des points de courbe.

Vous pouvez convertir un segment droits en segment incurv, et inversement, en convertissant ses points.

Conversion dun point dangle en point de courbe


1 Dans le panneau Outils, cliquez sur loutil Plume. 2 Cliquez sur un point dangle du trac slectionn, puis faites-le glisser lcart de sa position initiale.

Les poignes stendent, courbant ainsi les segments adjacents.

Remarque : pour modifier les poignes du point, choisissez loutil Sous-slection ou appuyez sur la touche Ctrl (Windows) ou Cmde (Mac OS) lorsque loutil Plume est actif.

Conversion dun point de courbe en point dangle


1 Dans le panneau Outils, cliquez sur loutil Plume. 2 Cliquez sur un point de courbe du trac slectionn.

Les poignes se rtractent, et les segments adjacents se redressent.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Utilisation des objets vectoriels

86

Retouche de tracs de forme libre laide des points et des poignes de points
Loutil Sous-slection du panneau Outils permet de slectionner plusieurs points. Avant de slectionner un point avec loutil Sous-slection, slectionnez le trac en utilisant loutil Pointeur ou Sous-slection, ou bien en cliquant sur sa vignette dans le panneau Calques.

Slection de points spcifiques sur un trac slectionn


A laide de loutil Sous-slection, procdez de lune des manires suivantes :

Cliquez sur un point ou cliquez successivement sur plusieurs points tout en maintenant la touche Maj enfonce.

Tracez une zone autour des points slectionner.

Insertion dun point sur un trac slectionn


Ajoutez des points un trac pour contrler lun des segments du trac.
Avec loutil Plume, cliquez sur lune des parties du trac qui ne comporte pas encore de point.

Suppression dun point sur un trac slectionn


Supprimez des points pour remodeler le trac ou simplifier sa modification.
Procdez de lune des manires suivantes :

Cliquez avec le pointeur de loutil Plume sur lun des points dangle dun objet slectionn. Cliquez deux fois avec le pointeur de loutil Plume sur lun des points de courbe dun objet slectionn. Slectionnez un point avec loutil Sous-slection, et appuyez sur la touche Suppr ou Retour arrire.

Dplacement dun point


Faites-le glisser avec loutil Sous-slection.

Modification dun segment de droite


1 Slectionnez le trac laide de loutil Pointeur ou Sous-slection. 2 Cliquez sur un point avec loutil Sous-slection.

Les points dangle slectionns prennent la forme de carrs pleins bleus.


3 Faites glisser le point ou utilisez lune des touches flches pour dplacer le point vers un autre emplacement.

Modification de la forme dun segment de trac de courbe


1 Slectionnez le trac laide de loutil Pointeur ou Sous-slection. 2 Cliquez sur un point de courbe avec loutil Sous-slection.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Utilisation des objets vectoriels

87

Les points de courbe slectionns prennent la forme de carrs pleins bleus. Les poignes du point stendent depuis le point.

3 Faites glisser les poignes vers un nouvel emplacement. Maintenez la touche Maj enfonce pendant que vous faites

glisser une poigne pour imposer son dplacement un angle de 45 degrs. Laperu du trac en bleu indique lemplacement du nouveau trac si vous relchez le bouton de la souris.
A B C

A. Poigne de point B. Point slectionn C. Pointeur de sous-slection D. Aperu du trac E. Trac

Par exemple, si vous faites glisser la poigne de point gauche vers le bas, la poigne de point droite monte. Tout en maintenant la touche Alt enfonce, faites glisser la poigne pour la dplacer sparment.

Rglage de la poigne dun point dangle


1 A laide de loutil Sous-slection, slectionnez un point dangle. 2 Tout en maintenant la touche Alt (Windows) ou Option (Mac OS) enfonce, faites glisser le point pour afficher sa

poigne et incurver le segment adjacent.

Pour modifier un segment de trac adjacent, faites glisser la poigne dun point dangle laide de loutil Sous-slection.

Extension et fusion de tracs de forme libre


Pour poursuivre le dessin dun trac ouvert existant et fusionner les tracs, utilisez loutil Plume.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Utilisation des objets vectoriels

88

Reprise du dessin dun trac ouvert existant


1 Dans le panneau Outils, cliquez sur loutil Plume. 2 Cliquez sur le point de fin (extrmit), puis reprenez le trac.

Fusion de deux tracs ouverts


Lorsque vous reliez deux tracs, les attributs de contour, de fond et de filtre du trac suprieur deviennent les attributs du trac nouvellement fusionn.
1 Dans le panneau Outils, slectionnez loutil Plume. 2 Cliquez sur le point de fin (extrmit) de lun des tracs. 3 Placez le pointeur sur le point de fin (extrmit) de lautre trac, puis cliquez.

Jonction automatique de tracs ouverts similaires


Vous pouvez relier deux tracs ouverts qui partagent des attributs de contour et de fond similaires.
1 Slectionnez un trac ouvert. 2 Choisissez loutil Sous-slection, puis faites glisser lun des points de fin du trac quelques pixels du point de fin

dun trac similaire.

Formes composes
Cration de formes composes
Crez une forme compose laide de tracs vectoriels simples, tels que des rectangles, ellipses ou autres. Loutil Sousslection permet de dplacer et de modifier les objets individuels dune forme compose, mme aprs quils ont t associs. Avec le mode Forme compose, tous les nouveaux objets de vecteur sont ajouts au mme objet dans le panneau des calques. Pour ajouter des objets un autre objet, quittez ce mode au moyen du bouton Normal. Pour crer des formes composes, procdez de lune des manires suivantes :

Crez un vecteur, slectionnez lopration de forme compose requise (Ajouter ou Soustraire, par exemple) et
dessinez dautres vecteurs.

Crez plusieurs vecteurs et utilisez lopration de forme compose.

Application dune forme compose aprs cration de plusieurs objets vectoriels


1 Slectionnez tous les objets inclure dans la forme compose. Tous les tracs ouverts slectionns sont

automatiquement ferms.
2 Slectionnez un outil Vecteur (rectangle, ellipse, plume ou trac vectoriel) dans la palette doutils. 3 Slectionnez lune des options suivantes dans linspecteur des proprits.

Ajouter / Union Soustraire / Poinon Intersection Recadrer


Pour lopration Poinon, le dernier objet ajout est poinonn lors de lunion des autres objets. Cest le cas galement pour lopration Poinon excute par le biais de Modification > Combiner les tracs.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Utilisation des objets vectoriels

89

Application dune forme compose avant cration de plusieurs objets vectoriels


1 Crez un objet vectoriel. 2 Slectionnez lune des options suivantes dans linspecteur des proprits.

Ajouter / Union Soustraire / Poinon Intersection Recadrer


3 Dessinez dautres objets par-dessus le premier pour obtenir leffet souhait.

Conversion dune forme compose en trac composite


Une fois une forme compose convertie en trac composite, il est impossible de dplacer ou de modifier les objets individuels la composant.
Pour convertir une forme compose en trac composite, cliquez sur le bouton Associer.

Techniques spcifiques de retouche vectorielle


Certains outils de Fireworks permettent non seulement de dplacer des points et des poignes de point, mais aussi de modifier directement des objets vectoriels. Vous pouvez galement utiliser les fonctions de trac pour crer des formes en combinant ou en modifiant les tracs existants. Par ailleurs, le panneau Trac vous permet daccder rapidement aux commandes propres aux tracs. Pour plus d'informations sur les nouveaux outils de manipulation des vecteurs dans Fireworks CS4, voir http://www.adobe.com/devnet/fireworks/articles/vector_manipulation_tools_02.html.

Retouche de tracs avec les outils vectoriels


Les outils vectoriels figurent dans le panneau Outils.

Courbure et remodelage dobjets vectoriels laide de loutil Forme libre


Utilisez loutil Forme libre pour incurver et remodeler directement les objets vectoriels au lieu de manipuler les points. Vous pouvez pousser ou tirer lune des parties dun trac, quel que soit lemplacement des points. Fireworks ajoute, dplace ou supprime des points le long du trac mesure que vous changez la forme de lobjet vectoriel.
A

Segment de trac tir avec loutil Forme libre (A mesurant la longueur spcifie)

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Utilisation des objets vectoriels

90

Segment de trac pouss avec loutil Forme libre

Lorsque vous dplacez le pointeur sur un trac slectionn, il se transforme en pointeur de pousse ou de traction, en fonction de sa position par rapport au trac slectionn. Vous pouvez galement changer la taille du pointeur de pousse ou de traction.
Pointeur Signification Loutil Forme libre est en cours dutilisation. Loutil Forme libre est en cours dutilisation, et le pointeur de traction est en position pour tirer sur le trac slectionn. Loutil Forme libre est en cours dutilisation, et le pointeur de traction tire sur le trac slectionn. Loutil Forme libre est en cours dutilisation, et le pointeur de pousse est actif. Loutil Reformer la zone est en cours dutilisation, et le pointeur correspondant est actif. La zone comprise entre le cercle intrieur et le cercle extrieur reforme le trac selon une intensit infrieure lintensit maximale.

Remarque : loutil Forme libre reporte galement la pression exerce sur une tablette Wacom ou compatible. Tirage dun trac slectionn Lorsque le pointeur se trouve juste au-dessus du trac, vous pouvez tirer sur celui-ci.
1 Dans le panneau Outils, cliquez sur loutil Forme libre 3 Dessinez le trac.

2 Positionnez le pointeur directement sur le trac slectionn.

Pousse dun trac slectionn Lorsque le pointeur ne se trouve pas juste au-dessus du trac, vous pouvez pousser celui-ci.
1 Dans le panneau Outils, slectionnez loutil Forme libre. 2 Positionnez le pointeur lgrement lcart du trac. 3 Faites glisser le pointeur vers le trac pour exercer une pousse. Dplacez lgrement le trac slectionn pour lui

donner une nouvelle forme. Modification de la taille du pointeur de pousse Procdez de lune des manires suivantes :

Tout en maintenant le bouton de la souris enfonc, appuyez sur la touche flche Droite ou sur la touche
numrique 2 pour largir le pointeur.

Tout en maintenant le bouton de la souris enfonc, appuyez sur la touche flche Gauche ou sur la touche
numrique 1 pour rendre le pointeur plus troit.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Utilisation des objets vectoriels

91

Pour dfinir la taille du pointeur (en pixels) et la longueur du segment de trac affect par ce dernier,
dslectionnez tous les objets du document, puis entrez une valeur comprise entre 1 et 500 dans la zone de texte Taille de linspecteur des proprits.

Distorsion de tracs laide de loutil Reformer la zone


Loutil Reformer la zone permet de tirer la zone forme par tous les tracs slectionns dans le cercle extrieur du pointeur Reformer la zone.

Le cercle intrieur du pointeur correspond la dlimitation de loutil lorsque lintensit est maximale. La zone comprise entre les cercles intrieur et extrieur reforme le trac selon une intensit infrieure lintensit maximale. Le cercle extrieur du pointeur dtermine la force dattraction. Vous pouvez dfinir son intensit. Remarque : loutil Reformer la zone reporte galement la pression exerce sur une tablette Wacom ou compatible.
1 Dans le menu contextuel de loutil Forme libre, slectionnez loutil Reformer la zone. 2 Faites glisser le pointeur sur les tracs pour les redessiner.

Modification de la taille du pointeur Reformer la zone Procdez de lune des manires suivantes :

Tout en maintenant le bouton de la souris enfonc, appuyez sur la touche flche Droite ou sur la touche
numrique 2 pour largir le pointeur.

Tout en maintenant le bouton de la souris enfonc, appuyez sur la touche flche Gauche ou sur la touche
numrique 1 pour rendre le pointeur plus troit.

Pour dfinir la taille du pointeur (en pixels) et la longueur du segment de trac affect par ce dernier,
dslectionnez tous les objets du document, puis entrez une valeur comprise entre 1 et 500 dans la zone de texte Taille de linspecteur des proprits. Dfinition de lintensit du cercle intrieur du pointeur Reformer la zone Dans la zone Intensit de linspecteur des proprits, entrez une valeur comprise entre 1 et 100 pour spcifier le pourcentage dintensit potentielle du pointeur. Lintensit est directement proportionnelle au pourcentage exprim.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Utilisation des objets vectoriels

92

Nouveau dessin ou extension dun segment de trac slectionn laide de loutil Redessiner le trac
Lorsque vous utilisez loutil Redessiner le trac, les attributs de contour, de fond et deffet sont conservs.
1 Dans le menu contextuel de loutil Plume, slectionnez loutil Redessiner le trac

2 (Facultatif) Modifiez le niveau de prcision de loutil Redessiner le trac en slectionnant un nombre dans le menu

contextuel de la zone Prcision, dans linspecteur des proprits. Plus le nombre slectionn est lev, plus le nombre de points affichs sur le trac est lev.
3 Positionnez le pointeur directement sur le trac. 4 Faites glisser le pointeur pour redessiner ou tendre le segment de trac. 5 Relchez le bouton de la souris.

Modification de laspect dun trac par variation de la pression et de la vitesse laide des outils Modulateur de trac
En utilisant une pression ou une vitesse diffrente, vous pouvez modifier les proprits de contour dun trac. Pour dfinir les proprits affectes par les outils Modulateur de trac, utilisez longlet Sensibilit de la bote de dialogue Modifier le contour. Vous pouvez galement spcifier dans quelle mesure la pression et la vitesse sappliquent ces proprits. Pour plus de dtails sur la dfinition des options de la bote de dialogue Modifier le contour, reportez-vous la section Application et modification de contours la page 120.

Dcoupage dun trac en plusieurs objets laide de loutil Cutter

1 Dans le panneau Outils, slectionnez loutil Cutter .

Remarque : lutilisation de la gomme sur des stylets Wacom slectionne automatiquement loutil Cutter.
2 Procdez de lune des manires suivantes :

Faites glisser le pointeur sur le trac. Cliquez sur le trac.


3 Dslectionnez le trac.

Retouche de tracs avec les options de trac


Les fonctions de trac du menu Modification permettent de crer des formes en combinant ou en modifiant des tracs existants. Pour certaines fonctions de trac, lordre dempilage des objets tracs slectionns dfinit le droulement de lopration. Pour plus de dtails sur lordre dempilement des objets slectionns, reportez-vous la section Empilement des objets la page 54. Remarque : lutilisation des fonctions de trac supprime toutes les informations de pression et de vitesse des tracs concerns.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Utilisation des objets vectoriels

93

Cration dun trac continu partir de deux tracs ouverts


1 Dans le panneau Outils, slectionnez loutil Sous-slection. 2 Slectionnez deux points de fin (extrmits) sur deux tracs ouverts. 3 Slectionnez la commande Modification > Combiner les tracs > Joindre.

Cration dun trac composite


1 Slectionnez au moins deux tracs ouverts ou ferms. 2 Slectionnez la commande Modification > Combiner les tracs > Joindre.

Sparation dun trac composite


1 Slectionnez le trac composite. 2 Choisissez Modification > Combiner les tracs > Sparer.

Combinaison de tracs ferms slectionns en un trac englobant toute la zone occupe par les tracs dorigine
Slectionnez la commande Modification > Combiner les tracs > Union. Le trac qui en rsulte a les attributs de

contour et de fond de lobjet situ larrire-plan.

Conversion dun trac en cadre de slection


Vous pouvez convertir une forme vectorielle en une slection bitmap, puis utiliser les outils bitmap pour diter la nouvelle slection bitmap.
1 Slectionnez un trac. 2 Choisissez Modification > Convertir le trac en cadre de slection. 3 Dans la bote de dialogue Convertir le trac en cadre de slection, slectionnez un paramtre Bord appliquer au

cadre de slection.
4 Si vous avez slectionn Contour progressif comme bord, spcifiez la valeur de diffusion utiliser. 5 Cliquez sur OK.

Remarque : la conversion dun trac en cadre de slection supprime le trac slectionn. Pour modifier cette valeur par dfaut, choisissez la commande Edition > Prfrences > Edition, puis dslectionnez loption Supprimer les tracs lors de la conversion en slection.

Cration dun objet partir de lintersection dautres objets


Slectionnez la commande Modification > Combiner les tracs > Intersection. Le trac qui en rsulte a les attributs

de contour et de fond de lobjet situ larrire-plan.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Utilisation des objets vectoriels

94

Suppression de portions dun objet trac


Vous pouvez supprimer des portions dun objet trac slectionn telles quelles sont dfinies par les portions superposes dun autre objet trac slectionn dispos devant lui.

1 Slectionnez lobjet trac qui dfinit la zone supprimer. 2 Choisissez la commande Modification > Disposer > Premier plan. 3 Tout en maintenant la touche Maj enfonce, ajoutez la slection lobjet trac dont les portions doivent

tre supprimes.
4 Choisissez Modification > Combiner les tracs > Poinon.

Recadrage dun trac


Vous pouvez recadrer un trac laide de la forme dun autre trac. Le trac au premier plan (suprieur) dfinit la forme de la zone recadre.

1 Slectionnez lobjet trac qui dfinit la zone recadrer. 2 Choisissez la commande Modification > Disposer > Premier plan. 3 Tout en maintenant la touche Maj enfonce, ajoutez la slection lobjet trac recadrer. 4 Choisissez Modification > Combiner les tracs > Recadrage.

Lobjet trac qui en rsulte adopte les attributs de contour et de fond de lobjet trac situ compltement larrire-plan.

Simplification dun trac


La commande Simplifier permet de supprimer du trac le nombre de points redondants que vous spcifiez. Sont considrs comme redondants un nombre de points suprieur deux sur une droite ou des points entirement superposs.
1 Choisissez Modification > Modifier le trac > Simplifier. 2 Entrez une valeur de simplification, puis cliquez sur OK.

La simplification dun trac augmente la possibilit pour Fireworks de modifier le trac afin de rduire le nombre de points sur ce trac.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Utilisation des objets vectoriels

95

Extension du contour dun objet slectionn


Vous pouvez convertir le contour dun trac slectionn en trac ferm. Le trac ainsi obtenu cre lillusion dun trac sans fond mais dot dun contour reprenant les mmes attributs que ceux du fond de lobjet dorigine.

Remarque : lextension du contour dun trac qui sentrecoupe peut produire des rsultats intressants. Si le trac dorigine contient un fond, les portions du trac qui sentrecoupent ne contiennent pas de fond une fois le contour tendu.
1 Choisissez Modification > Modifier le trac > Etendre le contour. 2 Dfinissez la largeur du trac ferm obtenu. 3 Slectionnez un type dangle. 4 Si vous avez slectionn la forme en pointe, dfinissez la pointe (le point auquel un angle en pointe devient

automatiquement biseaut). La limite est le rapport de la longueur du coin sur la largeur du trait.
5 Slectionnez une option dextrmit, puis cliquez sur OK.

Contraction et dilatation dun trac


1 Choisissez Modification > Modifier le trac > Rapporter le trac. 2 Slectionnez une direction suivre pour contracter ou dilater le trac :
A lintrieur Permet de contracter le trac. A lextrieur Permet de dilater le trac.

3 Dfinissez la largeur sparant le trac dorigine du trac contract ou dilat. 4 Slectionnez un type dangle. 5 Si vous avez slectionn la forme en pointe, dfinissez la pointe correspondante. 6 Cliquez sur OK.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Utilisation des objets vectoriels

96

Retouche de tracs laide du panneau Trac


Pour acclrer lexcution des tches de modification de tracs, utilisez les outils suivants du panneau Trac (Fentre > Autres > Trac).

Pour plus d'informations, voir http://www.adobe.com/go/learn_fw_designguide_fr

Dernire mise jour le 12/5/2011

97

Chapitre 7 : Utilisation du texte


Adobe Fireworks permet dutiliser un grand nombre de fonctions gnralement rserves aux applications de PAO sophistiques (multitude de polices et de corps de caractres, rglage du crnage, de lespacement, des couleurs, de linterlignage et du dcalage vertical, etc.). Vous pouvez tout moment modifier du texte, mme aprs avoir appliqu des filtres dynamiques. Vous pouvez mme importer un texte modifiable partir dun document Adobe Photoshop.

Entre de texte
Utilisez loutil Texte vos graphiques. et les options de linspecteur des proprits pour saisir, mettre en forme et diter du texte dans Remarque : Si l'inspecteur des proprits est rduit, double-cliquez sur sa barre pour consulter toutes les proprits de texte. Les objets texte sont automatiquement enregistrs sous un nom correspondant au texte que vous avez saisi. Vous pouvez modifier ce nom dans la zone Texte de linspecteur des proprits ou dans la vignette de panneau dobjet affiche dans le panneau Calques. Dans le panneau Calques, les objets texte peuvent tre identifis par licne T.

Voir aussi
Prfrences de texte la page 312

Cration et dplacement de blocs de texte


Dans les documents Fireworks, le texte figure dans un bloc de texte (rectangle dot de poignes). Il existe des blocs de texte redimensionnement automatique ou de largeur fixe.

Un bloc de texte redimensionnement automatique stend horizontalement mesure que vous saisissez le texte
et se rduit lorsque vous supprimez du texte. Des blocs de texte redimensionnement automatique sont crs par dfaut lorsque vous cliquez sur la zone de travail avec loutil Texte et commencez la saisie.

Les blocs de texte de largeur fixe vous permettent de contrler la largeur des lignes de texte. Ces blocs sont crs par
dfaut lorsque vous tracez un bloc de texte laide de loutil Texte.

Lorsque le pointeur de texte est actif dans un bloc de texte, un cercle ou un carr vid saffiche dans le coin
suprieur droit du bloc de texte. Le cercle indique quil sagit dun bloc de texte redimensionnement automatique, tandis que le carr identifie un bloc de texte de largeur fixe. Cliquez deux fois sur langle pour basculer dun bloc de texte lautre.
1 Slectionnez loutil Texte. 2 Slectionnez les caractristiques du texte. 3 Crez un bloc de texte :

Pour crer un bloc de texte redimensionnement automatique, cliquez dans votre document lendroit o
commencer le bloc.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Utilisation du texte

98

Pour crer un bloc de texte largeur fixe, dessinez un bloc en faisant glisser le pointeur de loutil. Pour dplacer le
bloc de texte mesure que vous le crez en faisant glisser le pointeur de loutil, tout en maintenant enfoncs le bouton de la souris et la barre despace, faites glisser le bloc de texte vers lemplacement souhait.
1 Saisissez le texte. 2 (Facultatif) Mettez en surbrillance le texte contenu dans le bloc de texte, puis mettez-le en forme. 3 (Facultatif) Pour dplacer le bloc de texte, faites-le glisser vers un nouvel emplacement. 4 Procdez de lune des manires suivantes :

Cliquez hors du bloc de texte. Dans le panneau Outils, slectionnez un autre outil. Appuyez sur la touche Echap.

Changement des blocs de texte redimensionnement automatique et largeur fixe


A B

Bloc de texte de largeur fixe et bloc de texte redimensionnement automatique A. Indicateur de largeur fixe B. Indicateur de redimensionnement automatique

Pour changer un bloc de texte en bloc de largeur fixe ou redimensionnement automatique, cliquez deux fois
lintrieur du bloc de texte, puis cliquez deux fois sur le cercle ou le carr figurant dans langle suprieur droit du bloc de texte.

Pour changer un bloc de texte slectionn en bloc de largeur fixe par redimensionnement, faites glisser une poigne
de redimensionnement.

Pour affecter une largeur fixe plusieurs blocs de texte, slectionnez ces blocs, puis choisissez Commandes >
Texte > Dfinir la largeur.

Pour dfinir des blocs de texte largeur fixe en tant que blocs redimensionnement automatique, slectionnez ces
blocs, puis choisissez Commandes > Texte > Basculer largeur fixe.

Indicateur de dpassement du texte


Lorsque le texte dpasse l'espace allou par un bloc de texte ou un chemin, l'indicateur de dpassement de texte s'affiche. Pour plus d'informations, voir http://www.fireworkszone.com/g-2-565.

Slection de texte
Slection dun mot ou dun paragraphe Cliquez deux fois dans un mot pour le slectionner et trois fois pour slectionner le paragraphe entier.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Utilisation du texte

99

Slection de morceaux de texte dans un paragraphe Pour slectionner des morceaux de texte dans un paragraphe, appuyez sur Maj et slectionnez tous les morceaux souhaits. Slection de texte dot dattributs similaires Pour slectionner du texte dot dattributs similaires, appuyez sur Alt (Windows)/Option (Mac) et cliquez deux fois sur un mot comportant les attributs spcifis. Tous les mots dots des attributs correspondants sont automatiquement slectionns dans le bloc de texte. Pour slectionner tous les mots en gras, par exemple, appuyez sur Alt (Windows)Options (Mac) et cliquez deux fois sur un mot en gras. Tous les mots en gras du bloc de texte sont automatiquement slectionns. Ajout de texte dot dattributs diffrents la slection prcdente Vous pouvez ajouter au texte slectionn prcdemment du texte dot dun autre ensemble dattributs. Aprs avoir slectionn du texte en gras, appuyez sur Alt+Maj (Windows)/Option+Maj (Mac) et cliquez deux fois sur un mot en italique, par exemple. Les mots en gras et en italique sont alors slectionns. Ajout de texte une slection existante Pour ajouter des mots un par un une slection existante, appuyez sur Alt+Maj (Windows)/Option+Maj (Mac) et cliquez sur chaque mot. Dslection de texte au sein dune slection Pour dslectionner un morceau de texte lorsque plusieurs morceaux sont slectionns, appuyez sur Alt (Windows)/Option (Mac) et cliquez sur le morceau concern.

Mise en forme et dition de texte


Le moyen le plus rapide dditer du texte avec prcision consiste utiliser linspecteur des proprits. Vous pouvez galement utiliser les commandes du menu Texte. Pour plus d'informations sur les commandes de texte, voir http://www.fireworkszone.com/page-2-4-1-566.html. Important : les modifications que vous apportez au cours dune session de modification de texte correspondent globalement une seule modification et sont donc toutes annules ensemble lorsque vous utilisez la commande Annuler. Si vous choisissez Edition > Annuler lorsque vous modifiez un texte, vous annulez toutes les modifications apportes depuis le moment o vous avez cliqu deux fois sur le bloc de texte pour modifier son contenu.
1 Pour slectionner le texte modifier, procdez de lune des manires suivantes :

Cliquez sur le bloc de texte avec loutil Pointeur ou Sous-slection pour le slectionner en totalit. Pour
slectionner plusieurs blocs de texte simultanment, slectionnez-les un par un tout en maintenant la touche Maj enfonce.

Cliquez deux fois sur un bloc de texte avec loutil Pointeur ou Sous-slection, puis slectionnez une zone
de texte.

Cliquez dans un bloc de texte avec loutil Texte, puis slectionnez du texte.
2 Modifiez le texte ou la police. Les polices se mesurent en points. 3 Procdez de lune des manires suivantes :

Cliquez hors du bloc de texte.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Utilisation du texte

100

Dans le panneau Outils, slectionnez un autre outil. Appuyez sur la touche Echap.

A propos des polices


Une police est un ensemble complet de caractres alphabtiques, chiffres et symboles qui partagent une graisse, une chasse et un style (par exemple, Adobe Garamond, 10 points, gras). Les types de caractres (souvent appels familles de caractres ou familles de polices) sont des ensembles de polices de caractres apparents par le graphisme et conus pour tre utiliss ensemble (par exemple, Adobe Garamond). Un style de caractres est une variante dune police au sein dune mme famille de caractres. En gnral, llment dune famille de polices appel Romain ou Normal (le nom diffre dune famille lautre) constitue la police de base comprenant les styles de caractres tels que normal, gras, demi-gras, italique et gras italique. Outre les polices installes sur votre systme, vous pouvez crer les dossiers suivants et utiliser les polices qui y sont installes :
Windows Program Files/Fichiers communs/Adobe/Fonts Mac OS Bibliothque/Application Support/Adobe/Fonts

Si vous installez une police Type 1, TrueType, OpenType ou CID dans le dossier Fonts local, cette police apparat uniquement dans les applications Adobe.

Aperu des polices


Vous pouvez afficher un aperu dune police dans le menu Famille de polices de linspecteur des proprits. Vous pouvez dsactiver la fonction daperu ou changer le corps de caractre des noms de police ou des chantillons de polices dans les prfrences de texte.

Indication du corps dun caractre


Par dfaut, le corps dun caractre est mesur en points (un point quivaut 1/72 de pouce). Vous pouvez spcifier un corps de caractre compris entre 0,1 et 1296 par incrments de 0,001 point. Remarque : dans Adobe Fireworks, le corps dun caractre est mesur par dfaut en pixels.
1 Slectionnez les caractres ou les objets texte modifier. Si vous ne slectionnez pas de texte, le corps de caractre

sapplique au nouveau texte.


2 Effectuez lune des oprations suivantes :

Dfinissez loption Corps de police dans le panneau Caractre ou dans la barre de commandes. Choisissez un corps dans le menu Texte > Corps. Lorsque vous choisissez Autre, vous pouvez entrer un nouveau
corps dans le panneau Caractre. Vous pouvez modifier lunit de mesure des caractres dans la bote de dialogue Prfrences. Cette option nest pas disponible dans Fireworks.

Pour rendre les polices manquantes disponibles


Effectuez lune des oprations suivantes :

Installez les polices manquantes sur votre systme. Activez les polices manquantes laide dune application de gestion des polices.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Utilisation du texte

101

Placez les polices manquantes dans le dossier Polices, situ dans le dossier dapplication. Les polices de ce dossier
sont uniquement disponibles dans lapplication. Sous Mac OS, les polices peuvent tre installes dans le dossier Macintosh HD > Bibliothque > Application Support > Adobe > Fonts. Les polices installes cet emplacement ne peuvent tre utilises que dans les produits Adobe. Si vous navez pas accs aux polices manquantes, recherchez-les et remplacez-les.

Slection dune famille et dun style de caractres


Linspecteur des proprits ou le menu Texte permettent de slectionner une famille et un style de polices.

Voir aussi
Prfrences de texte la page 312

Slection dune famille et dun style de caractres dans linspecteur des proprits
1 Slectionnez une famille de caractres dans le menu Police. Si plusieurs versions dune police sont installes sur

votre ordinateur, le nom de la police est suivi dune abrviation : (T1) pour les polices PostScript, (TT) pour les polices TrueType ou (OT) pour les polices OpenType. Sous Windows, pour slectionner une famille et un style de police, vous pouvez saisir le nom correspondant dans la zone. Au fur et mesure de la saisie, le nom de la premire police ou du premier style commenant par cette lettre apparat. Poursuivez la saisie jusqu ce que le nom de la police ou du style recherch(e) apparaisse.
2 Pour slectionner un style de caractres, procdez de lune des manires suivantes :

Slectionnez un style install dans le menu Style de linspecteur des proprits. Si la famille de caractres ne comprend pas de styles, cliquez sur le bouton Faux gras, Faux italique ou Soulign
pour appliquer une simulation de style.

Slection dune famille et dun style de caractres dans le menu Texte


Choisissez la commande Texte > Police > [famille] > [style]. Si la famille de caractres recherche ne comprend pas

de styles, slectionnez Standard, Faux gras, Faux italique ou Soulign dans le menu Texte > Style. (Windows) : pour rechercher une police, tapez son nom dans le menu.

Conversion du texte en majuscules


Il est possible de convertir le texte slectionn en majuscules.
Slectionnez Commandes > Texte > Majuscules.

Conversion du texte en minuscules


Il est possible de convertir le texte slectionn en minuscules.
Slectionnez Commandes > Texte > Minuscules.

Application dune majuscule en dbut de phrase


Il est possible de modifier le texte slectionn pour quil commence avec une majuscule.
Slectionnez Commandes > Texte > Majuscule initiale.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Utilisation du texte

102

Insertion dun saut de ligne


Pour insrer un saut de ligne, appuyez sur Maj+Entre.

Annulation des modifications apportes au texte


En mode de modification de texte, vous pouvez utiliser la fonction dannulation (Ctrl + Z) pour annuler des modifications individuelles. Lorsque vous quittez ce mode, les modifications sont valides et cette fonction na plus aucun effet.

Insertion de caractres spciaux


1 Aprs avoir cr un bloc de texte, cliquez dans le bloc de texte lemplacement auquel insrer un caractre spcial. 2 Choisissez la commande Fentre > Autres > Caractres spciaux, puis slectionnez le caractre insrer.

Insertion dun texte despace rserv


Il est possible dinsrer un bloc de texte despace rserv nayant pas de signification spcifique. Cette option permet de placer un bloc de texte (lorem ipsum) dans la zone de travail.
Slectionnez Commandes > Texte > Lorem ipsum.

Remarque : Vous pouvez galement faire appel au gnrateur de texte alatoire LoremIpsum, qui permet dinsrer rapidement un bloc de texte despace rserv aux maquettes. Cette extension est disponible sur http://www.adobe.com/go/learn_fw_randomtextgenerator_fr.

Application de couleur un texte


Par dfaut, le texte est noir et sans contour. Vous pouvez changer la couleur de lensemble ou dune partie du texte
dans un bloc de texte slectionn. Vous pouvez galement ajouter des contours et appliquer des filtres dynamiques tout le texte dun bloc de texte slectionn (mais pas au texte mis en surbrillance au sein dun bloc de texte).

Loutil Texte conserve la couleur de texte actuelle dun bloc de texte lautre. Les caractristiques de contour et les filtres dynamiques appliqus un bloc de texte sont actualiss au fur et
mesure des modifications apportes au bloc de texte ; toutefois, ces mises jour ne sappliquent pas aux nouveaux blocs de texte.

Loutil Texte conserve la couleur de texte actuelle indpendamment de la couleur de remplissage des autres outils.
De mme, lorsque vous rutilisez loutil Texte aprs avoir appliqu une couleur de fond, le paramtre de couleur le plus rcent de loutil Texte lui est restitu, et le contour est rinitialis sur Aucun. Voir la section Enregistrement des attributs de texte de contour, de fond et de filtre sous forme de style la page 106.

Dfinition de la couleur du texte dans un bloc de texte slectionn


Procdez de lune des manires suivantes :

Cliquez sur la case Couleur de fond dans linspecteur des proprits, puis slectionnez une couleur dans le menu
contextuel. Dans une fentre contextuelle de couleurs, vous pouvez galement utiliser le pointeur de pipette pour chantillonner une couleur un emplacement quelconque de lcran.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Utilisation du texte

103

Case Couleur de fond

Dans le panneau Outils, cliquez sur licne situe en regard de la case Couleur de fond, puis slectionnez une
couleur dans la fentre contextuelle de couleurs. Dans la fentre contextuelle de la case Couleur de fond, vous pouvez galement utiliser la pipette pour chantillonner une couleur un emplacement quelconque de lcran. Remarque : lorsque vous appliquez un contour au texte en surbrillance lintrieur dun bloc de texte, tout le bloc de texte est slectionn automatiquement.

Dfinition de linterligne et de linterlettrage


Le crnage consiste augmenter ou rduire lespace (exprim en pourcentage) entre certaines paires de lettres pour des raisons desthtisme. Le crnage automatique utilise les informations de crnage dune police lors de laffichage de texte. Lapproche augmente ou rduit lespacement entre les caractres slectionns. Dans Fireworks CS5, le crnage et lapproche fonctionnent comme dans CS3. Pour les changer, placez le curseur dans un mot et modifiez les valeurs correspondantes. Laspect du texte import partir de versions existantes (CS3 et versions antrieures) ne change pas. Les valeurs de crnage et dapproche sont cependant modifies en consquence des changements apports Adobe Text Engine depuis Fireworks CS3. Pour dsactiver le crnage automatique, dslectionnez loption Crnage automatique dans linspecteur des proprits. Linterlignage dtermine lespace sparant les lignes adjacentes dun paragraphe. Linterligne peut tre mesur en pixels ou sous la forme dun pourcentage de la distance en points sparant les lignes de base. Pour en savoir plus sur la faon dont Fireworks utilise Adobe Text Engine (ATE) pour assurer le rendu des lments de texte, voir larticle dArun Kaza, ladresse http://www.adobe.com/go/learn_fw_textengine_fr.

Voir aussi
Prfrences de texte la page 312

Dfinition du crnage ou de lapproche


1 Pour slectionner le texte crner, procdez de lune des manires suivantes :

A laide de loutil Texte, cliquez entre deux caractres ou mettez en surbrillance les caractres modifier. Utilisez loutil Pointeur pour slectionner un bloc de texte entier. Cliquez sur plusieurs blocs de texte tout en
maintenant la touche Maj enfonce pour les slectionner.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Utilisation du texte

104

2 Slectionnez les caractres dont vous souhaitez dfinir lespacement et procdez de lune des manires suivantes :

Dans linspecteur des proprits, faites glisser le curseur contextuel Approche ou entrez un pourcentage dans la
zone correspondante. Une valeur nulle correspond une approche normale. Les valeurs positives cartent les lettres, et les valeurs ngatives les rapprochent.

Tout en maintenant la touche Ctrl (Windows) ou Cmde (Mac OS) enfonce, appuyez sur la touche flche
Gauche ou la touche flche Droite du clavier. La touche flche Gauche permet de rapprocher les lettres de 1 %, et la touche flche Droite de les loigner de 1 %. Tout en maintenant les touches Maj et Ctrl (Windows) ou Maj et Cmde (Mac OS) enfonces, appuyez sur la touche flche Gauche ou la touche flche Droite pour rgler lapproche par incrments de 10 %.

Dfinition de linterlignage du texte slectionn

Options dinterlignage de linspecteur des proprits

1 Procdez de lune des manires suivantes :

Dans linspecteur des proprits, faites glisser le curseur contextuel Interlignage ou entrez une valeur dans la
zone correspondante. La valeur par dfaut est 100 %.

A laide du clavier, tout en maintenant la touche Ctrl (Windows) ou Cmde (Mac OS) enfonce, appuyez sur la
touche flche Haut (pour augmenter lespacement) ou la touche flche Bas (pour diminuer lespacement). Tout en maintenant les touches Maj et Ctrl (Windows) ou Maj et Cmde (Mac OS) enfonces, appuyez sur la touche flche Haut ou la touche flche Bas pour rgler linterligne par incrments de 10.
2 Pour changer le type dunit dinterlignage, slectionnez % ou px (pixels) dans le menu contextuel Units

dinterlignage.

Dfinition de lorientation et de lalignement du texte


Dfinition de lorientation du texte
Vous pouvez orienter des blocs de texte entiers horizontalement ou verticalement. Plusieurs lignes de texte vertical vont de droite gauche, comme pour les langues asiatiques.
1 Cliquez sur le bouton Orientation du texte 2 Slectionnez une option dorientation :
De gauche droite horizontalement Il sagit de la valeur par dfaut. De droite gauche verticalement Oriente le texte verticalement, laffichant de haut en bas. Des lignes de texte

dans linspecteur des proprits.

spares par des retours la ligne saffichent sous forme de colonnes qui senchanent de la droite vers la gauche. Pour donner au texte un effet spcial en linversant, utilisez loutil Distorsion et faites glisser une poigne latrale.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Utilisation du texte

105

Dfinition de lalignement du texte


Lalignement dtermine la position dun paragraphe de texte par rapport aux bords dun bloc de texte. Par dfaut, le texte horizontal est align gauche. Un texte vertical peut tre align sur le bord suprieur ou infrieur du bloc de texte, centr lintrieur du bloc de texte ou justifi entre les bords suprieur et infrieur.
1 Slectionnez le texte. 2 Cliquez sur un bouton dalignement dans linspecteur des proprits.

Les commandes dalignement un bloc de texte est slectionn.

sont visibles dans linspecteur des proprits lorsquun texte ou

Dfinition du retrait et de lespacement des paragraphes


Pour mettre un texte en retrait, dans linspecteur des proprits, faites glisser le curseur contextuel Retrait de

paragraphe ou saisissez une valeur (en pixels) dans la zone de texte.

Option Retrait de paragraphe dans linspecteur des proprits

Pour dfinir lespacement respecter avant et aprs les paragraphes dans linspecteur des proprits, faites glisser

le curseur contextuel Espace avant le paragraphe ou Espace aprs le paragraphe ou entrez une valeur dans la zone de texte.

Options despacement des paragraphes dans linspecteur des proprits

Application deffets au texte


Lissage des bords du texte
Le lissage des bords dun texte slectionn est appel lissage. Le lissage permet de fusionner les bords du texte avec larrire-plan, ce qui le rend plus net et lisible lorsque vous le composez dans un grand corps de caractre. Le lissage sapplique tous les caractres dun bloc de texte donn.

Texte dorigine ; aprs lissage

Dans linspecteur des proprits, slectionnez lune des options du menu contextuel Lissage : Sans lissage Dsactive le lissage du texte. Lissage net Cre une transition nette entre les bords du texte et larrire-plan. Lissage fort Cre une transition trs abrupte entre les bords du texte et larrire-plan, prservant la forme des

caractres du texte et amliorant la nettet des zones dtailles des caractres.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Utilisation du texte

106

Lissage lger Cre une transition lgre entre les bords du texte et larrire-plan. Lissage personnalis Fournit les commandes de lissage avances suivantes :

Surchantillonnage Dtermine la quantit de dtails utilise pour crer la transition entre les bords du texte et
larrire-plan.

Nettet Dtermine le lissage de la transition entre les bords du texte et larrire-plan. Intensit Dtermine le degr de mlange entre les bords du texte et larrire-plan.
Remarque : Le texte figurant dans un fichier vectoriel est anticrnel louverture du fichier dans Fireworks.

Rglage de la chasse des caractres slectionns


Dans linspecteur des proprits, faites glisser le curseur contextuel Echelle horizontale ou entrez une valeur dans

la zone de texte. Pour augmenter la largeur ou la hauteur des caractres, faites glisser le curseur au-del de 100 % ; pour les rduire, faites glisser le curseur en de de 100 %. 100 % est la valeur par dfaut.

Option Echelle horizontale dans linspecteur des proprits

Modification de la proximit du texte par rapport la ligne de base


Le dcalage vertical dfinit la proximit du texte par rapport sa ligne de base naturelle (indice et exposant, par exemple). En labsence de dcalage vertical, le texte repose sur la ligne de base. Les dcalages verticaux se mesurent en pixels.

Option de dcalage vertical dans linspecteur des proprits

Dans linspecteur des proprits, faites glisser le curseur contextuel Dcalage vertical, ou entrez une valeur dans la

zone de texte correspondante, pour dfinir la position du texte en indice ou en exposant. Entrez des valeurs positives pour mettre des caractres en exposant, et des valeurs ngatives pour les mettre en indice.

Enregistrement des attributs de texte de contour, de fond et de filtre sous forme de style
Vous pouvez ajouter des contours, des fonds et des filtres au texte dun bloc de texte slectionn, puis enregistrer ces attributs de texte sous forme de style. Une fois le texte cr, vous pouvez le modifier dans Fireworks. Les contours, les fonds, les filtres et les styles sont automatiquement mis jour en cours ddition.

Texte avec des options de contour, de fond, de filtre et de style

1 Crez un objet texte, puis appliquez-lui les attributs appropris. Appliquez lun des styles du panneau Styles, mme

sil ne sagit pas dun style de texte.


2 Slectionnez lobjet texte.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Utilisation du texte

107

3 Dans le menu Options du panneau Styles, slectionnez Nouveau style. 4 Slectionnez les proprits du style, puis nommez-le.

Voir aussi
Prfrences de texte la page 312

Attachement de texte un trac


A dfaut dutiliser des blocs de texte rectangulaires, vous pouvez dessiner un trac et attacher un texte ce dernier. Le texte pouse alors la forme du trac. Tant le texte que le trac sont modifiables. Lorsque vous attachez temporairement du texte un trac, ce dernier perd ses attributs de contour, de fond et de filtre. Les attributs de contour, de fond et de filtre appliqus par la suite affectent le texte mais pas le trac. Lorsque vous dtachez le texte dun trac, le trac retrouve ses attributs de contour, de fond et de filtre. Remarque : lattachement un trac dun texte contenant des retours la ligne automatiques ou forcs peut produire des rsultats inattendus. Lorsque la totalit du texte ne tient pas dans lespace intrieur ou extrieur un trac, une icne indiquant quil existe du texte excdentaire saffiche. Supprimez ce texte ou redimensionnez le trac en consquence. Licne disparat lorsque tout le texte peut tre affich.

Attachement de texte un trac et modification du texte


Pour associer du texte au primtre dun trac, slectionnez un objet de texte et un trac en maintenant la touche
Maj enfonce, puis choisissez la commande Texte > Attacher au trac.

Pour placer un bloc de texte lintrieur dun trac, slectionnez un objet de texte et un trac en maintenant la
touche Maj enfonce, puis choisissez la commande Texte > Attacher dans le trac.

Pour dtacher un texte dun trac slectionn, choisissez Texte > Dtacher du trac. Pour modifier un texte attach un trac, cliquez deux fois sur lobjet de texte curviligne laide de loutil Pointeur
ou Sous-slection ; dfaut, cliquez dessus pour slectionner le texte modifier laide de loutil Texte.

Pour modifier la forme du trac, utilisez loutil Sous-slection pour slectionner lobjet de texte curviligne, puis
faites glisser les points sous-slectionns pour remodeler le trac. Remarque : vous pouvez galement utiliser loutil Plume (courbe de Bzier) pour diter le trac. Le texte suit automatiquement le trac mesure que vous modifiez des points.

Modification de lorientation et du sens dun texte sur un trac


Lordre de dessin du trac dtermine la direction du texte qui lui est attach. Par exemple, lorsque vous dessinez un trac allant de droite gauche, le texte attach apparat lenvers et retourn.

Texte attach un trac dessin de droite gauche

Choisissez Texte > Orientation, puis slectionnez une orientation.

Texte enroul autour dun trac

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Utilisation du texte

108

Texte orient verticalement sur un trac

Texte inclin verticalement autour dun trac

Texte inclin horizontalement autour dun trac

Pour inverser le sens du texte sur un trac slectionn, choisissez Texte > Inverser la direction. Pour dplacer le point dorigine du texte attach un trac, slectionnez lobjet de texte curviligne, puis, dans
linspecteur des proprits, entrez une valeur dans la zone de texte Dcalage du texte.

Attachement de texte dans un trac


Vous pouvez attacher un texte dans un objet vectoriel. Le texte figure dans une zone dtermine par les limites vectorielles. Le texte et lobjet vectoriel restent modifiables. Lorsque vous attachez un texte dans un trac, la quantit de texte visible dpend de la taille de la zone dans le trac.
1 Slectionnez le texte et lobjet vectoriel dans la zone de travail. 2 Cliquez sur Texte > Attacher dans le trac.

Conversion de texte en tracs


Vous pouvez convertir un texte en tracs, puis reformer les lettres comme vous le feriez avec un objet vectoriel. Tous les outils ddition vectorielle sont utilisables avec un texte converti en trac. Remarque : un texte converti ne peut pas tre modifi comme du texte.

Pour convertir du texte, choisissez Texte > Convertir en tracs. Pour modifier individuellement des tracs de texte converti, slectionnez le texte converti laide de loutil Sousslection (ou slectionnez-le, puis choisissez Modification > Dissocier).

Pour crer un trac composite partir dun groupe de tracs rsultant de la conversion de texte en tracs,
slectionnez le groupe de tracs, choisissez ensuite Modification > Dissocier, puis choisissez Modification > Combiner les tracs > Joindre.

Transformation des blocs de texte


Les blocs de texte sont transforms de la mme faon que les autres objets. Vous pouvez mettre le texte lchelle, le faire pivoter, lincliner et le retourner pour crer des effets indits. Lorsque dimportantes transformations sont effectues, le texte peut devenir difficile lire. Lorsque la transformation dun bloc de texte provoque le redimensionnement ou la mise lchelle du texte, le corps de police obtenu apparat dans linspecteur des proprits lorsque le texte est slectionn.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Utilisation du texte

109

Voir aussi
Prfrences de texte la page 312

Solidification dun texte


Il est possible de convertir un texte en objets vectoriels composites. Vous ne pouvez plus modifier le texte aprs sa conversion en objets vectoriels. Puisque les caractres sont regroups en tant quobjet composite, vous devez segmenter les tracs combins avant de pouvoir modifier sparment les diffrents caractres.

Pour solidifier le texte, slectionnez Commandes > Texte > Solidifier. Pour segmenter le trac combin en caractres modifiables indpendamment, utilisez loutil de sous-slection ou
choisissez Modifier > Combiner les tracs > Sparer.

Importation de texte
Fireworks prend uniquement en charge le texte ASCII et le texte s'affiche sous forme de caractres parasites lorsque le fichier texte Unicode est ouvert ou import dans Fireworks. Convertissez le texte Unicode au format ASCII avant de l'importer dans Fireworks. Sinon, copiez le texte ASCII et collez-le dans Fireworks.

Pour importer du texte depuis Adobe Photoshop ou Adobe Illustrator, importez un fichier Photoshop ou
Illustrator, ou copiez le texte dans Fireworks. Vous pouvez copier jusqu 8 000 caractres partir de Fireworks ou dune autre application. Par dfaut, le texte import depuis Photoshop ou Illustrator conserve tous ses attributs dans Fireworks. Cependant, vous pouvez galement importer du texte Photoshop sous forme dimages bitmap (Voir Prfrences dimportation et douverture de fichiers Photoshop la page 313.)

Pour importer du texte aux formats RTF (format de texte enrichi) et ASCII (texte seul), copiez-le dans Fireworks.
Vous pouvez aussi slectionner Fichier > Ouvrir ou Fichier > Importer pour atteindre un fichier. (Le texte ASCII import apparat avec la couleur de fond active, la police par dfaut et une hauteur de 12 pixels.)

Remplacement des polices manquantes


Si le document que vous ouvrez dans Fireworks comporte des polices qui ne sont pas installes sur votre ordinateur, vous pouvez soit remplacer les polices, soit conserver leur aspect. La police Myriad Pro est applique par dfaut au texte contenant des polices non disponibles sur votre ordinateur. Vous pouvez modifier ce paramtre dans la bote de dialogue Prfrences.
Conserver laspect Permet de remplacer le texte par une image bitmap reprsentant le texte dans sa police dorigine.

Vous pouvez toujours modifier le texte, mais, le cas chant, Fireworks remplace limage bitmap par une police installe sur votre systme. La modification risque daltrer laspect du texte.
Remplacer les polices Permet de remplacer les polices dans le document. Vous pouvez modifier et enregistrer le texte.

Lorsque le fichier est rouvert sur un ordinateur disposant des polices dorigine, Fireworks utilise ces polices.

Voir aussi
Prfrences de texte la page 312

Slection dune police de substitution


1 Ouvrez un document contenant des polices manquantes, puis slectionnez lune dentre elles dans la liste

Remplacer les polices manquantes.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Utilisation du texte

110

2 Procdez de lune des manires suivantes :

Dans la liste A, slectionnez une police de remplacement. Cliquez sur Aucun changement si vous souhaitez conserver la police manquante telle quelle.
Ainsi, lorsque vous ouvrez un document comportant la mme police manquante, la bote de dialogue Polices manquantes affiche la police que vous avez slectionne.

Correction orthographique dun texte


Vrification orthographique dun texte
1 Slectionnez au moins un bloc de texte. Si vous ne slectionnez pas de bloc de texte, Fireworks vrifie lorthographe

de lensemble du document.
2 Choisissez Texte > Orthographe.

Personnalisation de la correction orthographique


1 Choisissez Texte > Installation du correcteur orthographique ou cliquez sur le bouton Configurer de la bote de

dialogue Orthographe.
2 Dans la bote de dialogue Installation du correcteur orthographique, slectionnez les options ncessaires :

Choisissez les dictionnaires de langue. Slectionnez un dictionnaire personnalis en cliquant sur licne de dossier situe ct de la zone de texte
Chemin daccs du dictionnaire personnel.

Modifiez le dictionnaire personnalis en cliquant sur le bouton Modifier le dictionnaire personnel puis en
ajoutant, supprimant ou modifiant des mots dans la liste.

Slectionnez les types de mots inclure dans la vrification orthographique.

Dernire mise jour le 12/5/2011

111

Chapitre 8 : Application de couleurs, de contours et de fonds


Adobe Fireworks prsente un grand nombre doptions dorganisation, de slection et dapplication des couleurs.

Application de couleurs
Activation, suppression ou permutation du contour et du fond
Pour dterminer lattribut affect par vos rglages chromatiques, activez la couleur de contour ou la couleur de fond. Pour appliquer les valeurs par dfaut spcifies dans la bote de dialogue Prfrences, rinitialisez les couleurs de contour et de fond.

Activation de la couleur de contour ou de fond


Dans la section Couleurs du panneau Outils, cliquez sur licne situe gauche de la case Couleur de contour ou

Couleur de fond. Remarque : loutil Pot de peinture remplit les slections de pixels et les objets vectoriels avec la couleur affiche dans la case Couleur de fond.

Cases de couleurs de contour et de fond dans le panneau Outils et fentre contextuelle pour la slection des couleurs

Rtablissement des couleurs de contour et de fond par dfaut


Cliquez sur le bouton Dfinit les couleurs de contour/fond par dfaut du panneau Outils ou du Mlangeur.

Suppression des couleurs de contour et de fond des objets slectionns


Cliquez sur le bouton Aucun contour ou fond dans la section Couleurs du panneau Outils. Pour dfinir la

caractristique inactive sur Aucune, cliquez de nouveau sur le bouton Aucun contour ou fond. Remarque : vous pouvez galement supprimer la couleur de contour ou de fond en cliquant sur le bouton Transparent dans la fentre contextuelle Couleur de fond ou Couleur de contour, ou en slectionnant Aucune dans le menu contextuel Options de fond ou Options de contour de linspecteur des proprits.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Application de couleurs, de contours et de fonds

112

Permutation des couleurs de fond et de contour


Dans le panneau Outils ou dans le Mlangeur, cliquez sur le bouton Permute les couleurs de contour/fond

Application et organisation de nuances


Dans le panneau Nuancier, vous pouvez afficher, modifier, crer et diter les groupes de nuances, ainsi que slectionner des couleurs de contour et de fond.

Application dune couleur de nuancier au contour ou au fond dun objet slectionn


1 Cliquez sur licne situe ct de la case Couleur de contour ou Couleur de fond dans le panneau Outils ou dans

linspecteur des proprits pour lactiver.


2 Choisissez Fentre > Nuancier. 3 Cliquez sur lchantillon pour appliquer la couleur au contour ou au fond de lobjet slectionn.

Slection, modification ou ajout de groupes de nuances


Vous pouvez aisment utiliser ou crer un autre groupe de nuances. Vous pouvez galement importer des nuances personnalises partir de fichiers de palette de couleurs enregistrs au format ACT ou GIF.
Pour slectionner un groupe de nuances, choisissez-le dans le menu Options du panneau Nuancier.

Remarque : la slection de Cubes de couleurs affiche le groupe de nuances par dfaut.

Pour slectionner un groupe de nuances personnalis, slectionnez Remplacer le nuancier dans le menu Options
du panneau Nuancier, accdez ensuite au dossier, puis slectionnez le fichier.

Pour ajouter un nuancier partir dune palette de couleurs externe, choisissez Ajouter des chantillons dans le
menu Options du panneau Nuancier, accdez ensuite au dossier, puis slectionnez un fichier de palette de couleurs au format ACT ou GIF.

Ajout ou remplacement dune couleur dans le panneau Nuancier


Remarque : la commande Edition > Annuler ne permet pas dannuler lajout ou la suppression dun nuancier.
1 Dans le panneau Outils, slectionnez loutil Pipette. 2 Dans le menu contextuel Echantillon de linspecteur des proprits, slectionnez le nombre de pixels

chantillonner : 1 pixel, Moyenne 3x3 ou Moyenne 5x5.


3 Cliquez nimporte o dans une fentre de document Fireworks ouverte pour prlever une couleur.

Pour ajouter une couleur, placez le bout du pointeur de la pipette dans lespace libre aprs le dernier chantillon
dans le panneau Nuancier.

Pour remplacer une nuance (couleur de nuancier), placez le pointeur dessus dans le panneau Nuancier tout en
maintenant la touche Maj enfonce.
4 Cliquez pour ajouter ou remplacer la nuance.

Lorsque vous slectionnez Accrocher la couleur scurise pour le Web dans le menu Options de la fentre contextuelle pour la slection des couleurs, toutes les couleurs non scurises pour le Web prleves avec le pointeur de la pipette prennent la valeur de la couleur scurise pour le Web la plus proche.

Suppression dune nuance


Pour supprimer une nuance, maintenez la touche Ctrl (Windows) ou Cmde (Mac OS) enfonce, placez le pointeur

sur une nuance, puis cliquez dessus.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Application de couleurs, de contours et de fonds

113

Effacement ou tri de nuances


Pour effacer la totalit du panneau des nuances, slectionnez loption Effacer le nuancier dans le menu Options du
panneau Nuancier.

Pour trier le nuancier par valeur colorimtrique, slectionnez loption Trier par couleur dans le menu Options du
panneau Nuancier.

Cration et modification de couleurs dans le Mlangeur


Pour afficher et modifier les couleurs de contour et de fond actives, utilisez le Mlangeur (Fentre > Mlangeur). Par dfaut, le Mlangeur identifie les couleurs RVB comme tant hexadcimales ; il affiche donc des valeurs chromatiques hexadcimales pour les composantes de couleur rouge (R), vert (V) et bleu (B). Les valeurs RVB hexadcimales sont comprises entre 00 et FF.
Modle de couleurs RVB Mode dexpression de couleur Valeurs de rouge, de vert et de bleu, o chacun des composants correspond une valeur comprise entre 0 et 255. 0-0-0 correspond au noir, et 255-255-255 au blanc. Valeurs RVB de rouge, de vert et de bleu, o chacun de ces composants a une valeur hexadcimale comprise entre 00 et FF. 00-00-00 correspond au noir, et FFFFFF au blanc. Valeurs de teinte, de saturation et de luminosit. Les valeurs de teinte peuvent aller de 0 360 degrs ; les valeurs de saturation et de luminosit peuvent aller de 0 % 100 %. Valeurs de cyan, de magenta et de jaune, o chacun des composants a une valeur comprise entre 0 et 255. 0-0-0 correspond au blanc, et 255-255-255 au noir. Pourcentage de noir. Lunique composante Noir (N) correspond une valeur comprise entre 0 et 100 %, 0 correspondant au blanc, et 100 au noir. Les valeurs intermdiaires correspondent des nuances de gris.

Hexadcimal

TSL

CMJ

Niveaux de gris

Dans le menu Options du Mlangeur, vous pouvez slectionner dautres modles de couleurs. Les valeurs des composantes de la couleur actuelle changent avec chaque nouveau modle. Bien que CMJ soit une option de modle de couleurs, les graphiques exports directement depuis Fireworks ne donnent pas de trs bons rsultats limpression. Pour redfinir les graphiques Fireworks exports en vue de leur impression, importez-les dans Adobe Illustrator, Adobe Photoshop ou Adobe FreeHand. Pour plus dinformations, reportez-vous la documentation fournie avec ces applications.

Application dune couleur un objet vectoriel slectionn


1 Dans le Mlangeur, cliquez sur licne situe ct de la case Couleur de contour ou Couleur de fond. 2 Positionnez le pointeur sur la barre de couleurs, puis cliquez dessus.

Prlvement dune couleur


1 Afin dviter que des objets ne soient malencontreusement modifis lors du mlange des couleurs, dslectionnez

tous les objets.


2 Cliquez sur la case Couleur de contour ou Couleur de fond. 3 Dans le menu doptions du Mlangeur, slectionnez un modle de couleurs. 4 Pour dfinir des valeurs chromatiques, entrez-les dans les diffrentes zones de texte des composantes de couleurs,

utilisez les curseurs contextuels ou prlevez une couleur dans la barre de couleurs.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Application de couleurs, de contours et de fonds

114

Navigation dans les modles de couleurs


Tout en maintenant la touche Maj enfonce, cliquez sur la barre de couleurs au bas du Mlangeur.

Remarque : les options du Mlangeur ne sont pas changes.

Cration de couleurs laide des slecteurs de couleurs systme


1 Cliquez sur une case de couleur. 2 Dans un menu Options de la fentre contextuelle pour la slection des couleurs, slectionnez le systme Windows

ou Mac.
3 Slectionnez une couleur parmi les couleurs systme.

Gestion des couleurs avec le panneau Palette de couleurs


Pour ouvrir le panneau Palette de couleurs, choisissez Fentre > Autres > Palette de couleurs.

Recherche de la couleur Web scurise la plus proche de chaque valeur chromatique


1 Cliquez sur la case de couleur de fond dans longlet Slecteur du panneau Palette de couleurs. 2 Pour chantillonner une couleur, utilisez le pointeur de la pipette pour cliquer dans un document Fireworks,

lemplacement de votre choix. La couleur Web scurise la plus proche saffiche sous la couleur de fond active. Remarque : vous pouvez galement utiliser longlet Slecteur pour convertir des couleurs dans diffrents modles de couleurs (RVB et CMJN, par exemple) ou pour slectionner le mode daffichage des couleurs.

Cration et permutation de palettes de couleurs


1 Slectionnez longlet Mlangeurs dans le panneau Palette de couleurs. 2 A laide des quatre cases de couleur de fond situes en bas du panneau, dfinissez les quatre couleurs de base

utiliser pour le document.


3 Au besoin, utilisez la roue chromatique TSL, en bas droite du panneau, pour modifier la palette. 4 Pour essayer diffrentes palettes dans le document, cliquez sur Palette 2, sur le ct gauche du panneau, puis

slectionnez les couleurs de base de cette seconde palette.


5 Pour alterner entre les deux palettes, cliquez sur les deux icnes Remplacer la couleur.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Application de couleurs, de contours et de fonds

115

Remarque : la fonction de permutation des palettes permet de remplacer les fonds, les contours et les dgrads dans des lments vectoriels, mais pas dans des lments bitmap ni des symboles graphiques.

Exportation dune palette


1 Slectionnez la palette exporter (Palette 1 ou Palette 2). 2 Cliquez sur licne Exporter comme fichier bitmap pour exporter la palette sous forme de fichier bitmap, ou cliquez

sur licne Exporter comme table de couleurs pour lexporter sous forme de fichier ACT.

Cration dune srie de dgrads de couleurs


1 Slectionnez longlet Mlangeur dans le panneau Palette de couleurs. 2 laide des quatre cases de couleur de fond situes en bas du panneau, dfinissez la couleur de dbut et la couleur

de fin.
3 Pour slectionnez le nombre dtapes composant la srie, utilisez le curseur contextuel Etapes.

Remarque : pour afficher la valeur hexadcimale de la couleur, placez le pointeur sur une nuance de couleur.

Cration dune palette partage


Si vous modifiez plusieurs images comprenant une palette de couleurs restreinte, vous pouvez exporter une palette comprenant ces couleurs dans ces images. Pour crer une palette de couleurs partage, toutes les images doivent figurer dans le mme dossier.
1 Slectionnez Commandes > Web > Crer palette partage. 2 Indiquez le nombre maximal de couleurs inclure dans la palette de couleurs partage. 3 Cliquez sur Parcourir pour indiquer le dossier contenant les images, puis cliquez sur OK.

Slection de couleurs dans une fentre contextuelle pour la slection des couleurs
Lorsque vous cliquez sur une case de couleur, une fentre contextuelle pour la slection des couleurs semblable au panneau Nuancier saffiche.

Slection dune couleur pour une case de couleur


1 Cliquez sur une case de couleur. 2 Procdez de lune des manires suivantes :

Pour appliquer une nuance la case de couleur, cliquez sur une nuance. Pour appliquer la couleur la case de couleur, cliquez avec le pointeur de la pipette sur lune des couleurs
affiches lcran.

Pour rendre un contour ou un fond transparent, cliquez sur le bouton Transparent dans la fentre contextuelle.

Affichage du groupe de nuances actif dans le panneau Nuancier


Dans le menu Options de la fentre contextuelle pour la slection des couleurs, slectionnez le panneau Nuancier.

Affichage dun groupe de nuances diffrent dans la fentre contextuelle pour la slection des couleurs
Dans le menu Option de la fentre contextuelle pour la slection des couleurs, slectionnez un groupe de nuances.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Application de couleurs, de contours et de fonds

116

Remarque : la slection dun groupe de nuances naffecte pas le panneau Nuancier.

Echantillonnage de couleurs partir dune fentre contextuelle pour la slection des couleurs
Lorsquune fentre contextuelle pour la slection des couleurs est ouverte, le pointeur se transforme en pipette spciale permettant dchantillonner des couleurs depuis quasiment tous les endroits de lcran. Cette opration sappelle lchantillonnage.
1 Cliquez sur une case de couleur. 2 Cliquez nimporte o dans lespace de travail Fireworks pour slectionner et appliquer la couleur pour la case de

couleur. Tout en maintenant la touche Maj enfonce, cliquez sur une couleur scurise pour le Web pour la slectionner.

Identification des valeurs chromatiques


Pour identifier des valeurs chromatiques, vous pouvez galement utiliser le panneau Info en plus du Mlangeur et de la fentre contextuelle pour la slection des couleurs.

Affichage de la valeur chromatique dune partie de document


Procdez de lune des manires suivantes :

Utilisez le Mlangeur ou la fentre contextuelle pour la slection des couleurs. Utilisez le panneau Info. Cliquez sur loutil Pipette, choisissez ensuite Fentre > Info, puis dplacez le pointeur
sur lobjet contenant la couleur afficher (Windows uniquement).

Affichage de la valeur chromatique de la couleur de contour ou de fond active


Procdez de lune des manires suivantes :

Choisissez Fentre > Mlangeur pour les valeurs RVB ou les autres valeurs de couleur systme. Cliquez sur une case de couleur pour ouvrir la fentre contextuelle pour la slection des couleurs et afficher la
valeur hexadcimale dans la partie suprieure de la fentre.

Placez le pointeur sur une case de couleur, puis lisez linfo-bulle (Windows uniquement).
Remarque : par dfaut, les valeurs RVB sont visibles dans le panneau Info et dans le Mlangeur. La valeur hexadcimale correspondante apparat dans la fentre contextuelle pour la slection des couleurs.

Affichage des informations chromatiques relatives un autre modle de couleurs


Dans le menu Options du panneau Info ou du Mlangeur, slectionnez un autre modle de couleurs.

Simulation des couleurs scurises pour le Web et de la transparence par tramage


Si vous utilisez une couleur non scurise pour le Web, veillez appliquer un tramage Web. Vous pourrez ainsi simuler une couleur scurise pour le Web qui ne varie pas ni ne se juxtapose une autre lors de son exportation avec une palette de couleurs scurises pour le Web. Pour crer un aspect transparent, appliquez loption de tramage Transparent. Dans les objets transparents, larrireplan de la page Web laisse transparatre tous les autres pixels du fond tram Web transparent.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Application de couleurs, de contours et de fonds

117

Remarque : notez que le tramage Web peut augmenter la taille du fichier.

Deux couleurs scurises pour le Web crent un fond tram Web.

Application dun fond tram Web


1 Slectionnez un objet contenant une couleur non scurise pour le Web. 2 Dans le menu contextuel Options de fond de linspecteur des proprits, cliquez sur Tramage Web. 3 Dans linspecteur des proprits, cliquez sur la case Couleur de fond pour afficher la fentre contextuelle Options

de fond. La couleur non scurise pour le Web de lobjet apparat dans le slecteur Couleur source. Les deux couleurs de tramage scurises pour le Web saffichent dans les cases de couleur de droite. Le tramage Web est appliqu lobjet et devient la couleur de fond active. Remarque : la dfinition du bord dun fond tram Web sur Lissage ou Contour progressif gnre des couleurs non scurises pour le Web.
4 Cliquez hors de la fentre contextuelle pour la fermer.

Application dun fond tram transparent


1 Slectionnez lobjet auquel vous voulez appliquer un fond transparent. 2 Dans le menu contextuel Options de fond de linspecteur des proprits, cliquez sur Tramage Web. 3 Dans linspecteur des proprits, cliquez sur la case Couleur de fond pour afficher la fentre contextuelle Options

de fond.
4 Slectionnez loption Transparent.

Lobjet devient semi-opaque ou transparent sur la zone de travail.


5 Cliquez hors de la fentre contextuelle pour la fermer. 6 Exportez lobjet au format GIF ou PNG aprs avoir slectionn loption Transparence dindex ou Transparence

alpha. Pour plus dinformations, reportez-vous la section Transformation de zones en zones transparentes la page 248. Remarque : les navigateurs ne prennent pas tous en charge les fichiers PNG.

Enregistrement de nuanciers
Enregistrement dun groupe de nuances
Pour enregistrer une slection de couleurs chantillonnes, ajoutez les couleurs, choisissez loption Enregistrer le

nuancier dans le menu Options du panneau Nuancier, puis slectionnez un nom de fichier et un rpertoire.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Application de couleurs, de contours et de fonds

118

Enregistrement de nuanciers au format ASE


Les fichiers ASE contiennent des couleurs quil est possible dchanger entre des applications comme Photoshop, Illustrator et InDesign. Grce eux, vous pouvez partager les couleurs que vous avez cres dans une application avec les autres applications. Fireworks prend en charge les espaces colorimtriques RVB et CMJN. Les nuanciers appartenant aux autres espaces colorimtriques ne sont pas pris en compte. Les nuanciers CMJN sont convertis en valeurs RVB, puis imports dans Fireworks. Aucune information concernant cette conversion nest toutefois affiche explicitement.

Enregistrement de nuanciers au format ASE


1 Ouvrez lensemble de nuances enregistrer dans le panneau Nuanciers. 2 Dans les options de ce panneau, slectionnez Enregistrer le nuancier. 3 Entrez le nom du fichier de nuancier et enregistrez celui-ci.

Importation de nuanciers partir dautres applications CS


1 Ouvrez lensemble de nuances dans le panneau Nuanciers. 2 Dans les options de ce panneau, slectionnez Ajouter des chantillons.

Panneau Kuler
A propos du panneau Kuler
Le panneau Kuler permet d'accder des groupes de couleurs et des thmes crs par la communaut de concepteurs en ligne. Vous pouvez l'utiliser pour parcourir des milliers de thmes sur Kuler et pour tlcharger ceux de votre choix afin de les modifier ou de les inclure dans vos projets. Vous pouvez galement utiliser le panneau Kuler pour crer et enregistrer des thmes. Il vous suffit ensuite de les tlcharger pour les partager avec la communaut Kuler. Le panneau Kuler est disponible dans Adobe Photoshop CS5, Adobe Flash Professional CS5, Adobe InDesign CS5, Adobe Illustrator CS5 et Adobe Fireworks CS5. Le panneau nest pas disponible dans les versions franaises de ces produits. Une vido consacre au panneau Kuler est disponible ladresse suivante : www.adobe.com/go/lrvid4088_xp_fr. Pour consulter un article sur Kuler et des conseils sur les couleurs, consultez le blog de Veerle Pieters l'adresse http://veerle.duoh.com/blog/comments/adobe_kuler_update_and_color_tips/ (en anglais).

Consultation des thmes


Il convient de disposer dune connexion Internet pour parcourir les thmes en ligne.

Recherche de thmes
1 Choisissez la commande Fentre > Extensions > Kuler, puis slectionnez le panneau Parcourir. 2 Effectuez l'une des oprations suivantes :

Dans la zone de recherche, entrez le nom d'un thme, d'une balise ou d'un concepteur.
Remarque : utilisez uniquement des caractres alphanumriques (Aa-Zz, 0-9) lors dune recherche.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Application de couleurs, de contours et de fonds

119

Vous pouvez filtrer les rsultats obtenus : il vous suffit pour cela de slectionner une option dans les menus
droulants situs au-dessus de la liste de rsultats.

Affichage dun thme en ligne sur Kuler


1 Accdez au panneau Parcourir, puis slectionnez un thme dans la liste des rsultats de la recherche. 2 Cliquez sur le triangle situ droite du thme et slectionnez loption Afficher la version en ligne dans Kuler.

Enregistrement de termes frquemment recherchs


1 Slectionnez l'option Personnalis dans le premier menu droulant du panneau Parcourir. 2 Dans la bote de dialogue qui saffiche, entrez les termes rechercher et enregistrez-les.

Pour effectuer une recherche sur ces termes, slectionnez-les dans le premier menu droulant. Pour supprimer une recherche enregistre, slectionnez l'option Personnalis dans le menu contextuel. Effacez ensuite les recherches de votre choix, puis cliquez sur Enregistrer.

Utilisation de thmes
Le panneau Kuler permet de crer ou de modifier des thmes et de les utiliser dans le cadre d'un projet. Remarque : si vous souhaitez crer ou modifier des thmes dans Illustrator, vous devez utiliser la bote de dialogue Modifier les couleurs/Redfinir les couleurs de l'illustration plutt que le panneau Crer. Pour plus de dtails, reportezvous l'aide d'Illustrator.

Ajout d'un thme au panneau Nuancier de votre application


1 Dans le panneau Parcourir, slectionnez le thme que vous souhaitez utiliser. 2 Cliquez sur le triangle situ droite du thme et slectionnez l'option Ajouter au nuancier.

Vous pouvez galement ajouter un thme partir du panneau Crer l'aide du bouton Ajouter le thme slectionn au nuancier.

Modification d'un thme


1 Accdez au panneau Parcourir, recherchez le thme que vous souhaitez modifier dans la liste des rsultats, puis

cliquez deux fois dessus. Le thme s'ouvre dans le panneau Crer.


2 Dans le panneau Crer, modifiez le thme l'aide des outils mis votre disposition. Pour plus d'informations,

reportez-vous la rubrique Outils du panneau Crer ci-dessous.


3 Effectuez l'une des oprations suivantes :

Enregistrez votre thme l'aide du bouton Enregistrer le thme. Ajoutez le thme au panneau Nuancier de votre application l'aide du bouton Ajouter au nuancier situ au bas
du panneau.

Tlchargez le thme vers le service Kuler l'aide du bouton de tlchargement situ en bas du panneau.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Application de couleurs, de contours et de fonds

120

Outils du panneau Crer


Le panneau Crer propose une gamme d'outils permettant de crer ou de modifier des thmes.

Choisissez une rgle d'harmonie dans le menu droulant de slection d'une rgle. La rgle dharmonie utilise la
couleur de base pour la gnration des couleurs du groupe de couleurs. Par exemple, si vous choisissez une couleur de base bleue et la rgle dharmonie complmentaire, un groupe de couleurs est cr avec la couleur de base, le bleu, et sa couleur complmentaire, le rouge.

Slectionnez la rgle Personnalise pour crer un thme sur la base de rglages personnaliss. Utilisez la roue chromatique pour grer les couleurs. A mesure que vous effectuez des modifications, les couleurs
du groupe de couleurs sont gnres en fonction de la rgle d'harmonie slectionne.

Dplacez le curseur de rglage Luminosit situ en regard de la roue pour ajuster la luminosit des couleurs. la roue pour dfinir la couleur de base. Vous pouvez galement dfinir la couleur de base l'aide des curseurs de rglage des couleurs situs au bas de la bote de dialogue.

Faites glisser le marqueur de la couleur de base (c'est--dire le plus grand des marqueurs, celui double cercle) sur

Dfinissez l'une des quatre autres couleurs du groupe comme couleur de base. Slectionnez la nuance de la couleur
et cliquez sur le bouton en forme de cible situ en dessous du groupe de couleurs.

Dfinissez la couleur de premier plan/d'arrire-plan ou de contour/de fond comme couleur de base. Cliquez sur
l'un des deux premiers boutons situs en dessous du groupe de couleurs.

Pour supprimer une couleur du groupe de couleurs, slectionnez la nuance de la couleur, puis cliquez sur le bouton
Supprimer la couleur situ en dessous du groupe de couleurs. Pour ajouter une couleur, slectionnez une case de couleur vide, puis cliquez sur le bouton Ajouter une couleur.

Pour essayer diffrents effets de couleur, slectionnez une nouvelle rgle d'harmonie et dplacez les marqueurs de
la roue chromatique.

Cliquez deux fois sur l'une des nuances du groupe de couleurs pour dfinir la couleur active (premier plan/arrireplan ou contour/fond) dans votre application. S'il n'est pas possible d'activer ou de slectionner une couleur dans l'application utilise, le panneau Kuler dfinit la couleur de premier plan ou la couleur de fond selon le cas.

Application de contours et de fonds


Application et modification de contours
Vous pouvez appliquer avec prcision chacun de vos traits de pinceau, en contrlant notamment lencrage, la taille et forme de la pointe, la texture, les effets de bord et laspect. Vous pouvez modifier les attributs de contour avant ou aprs la cration dobjets. Licne de crayon indique le slecteur Couleur de trait dans le panneau Outils, lInspecteur des proprits et le Mlangeur. Les paramtres, catgories et noms de contour de lobjet slectionn sont prservs dun document lautre et dune session dapplication lautre. Lorsque vous crez un objet dans un nouveau document, dans la session en cours ou aprs avoir rouvert Fireworks, les derniers paramtres de contour slectionns sont utiliss. Les paramtres sont conservs dune session lautre. Pour appliquer un contour un objet bitmap, utilisez les effets dynamiques Photoshop, puis slectionnez lattribut Contour (voir la section Application de filtres dynamiques la page 130).

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Application de couleurs, de contours et de fonds

121

Modification des attributs de contour des objets slectionns


Procdez de lune des manires suivantes :

Dans le menu contextuel Catgorie de contour de linspecteur des proprits, slectionnez un attribut de contour. Pour afficher davantage doptions, slectionnez Options de contour dans le menu contextuel Catgorie de contour,
puis choisissez un attribut de contour.

Modification de la couleur de contour dun outil de dessin


1 Appuyez sur les touches Ctrl+D (Windows) ou Cmde+D (Mac OS) pour dslectionner tous les objets. 2 Dans le panneau Outils, slectionnez un outil de dessin. 3 Dans le panneau Outils ou dans linspecteur des proprits, cliquez sur la case Couleur de contour. 4 Slectionnez une couleur, puis faites glisser le pointeur pour dessiner lobjet.

Remarque : un nouveau contour utilise la couleur actuellement affiche dans la case Couleur de contour.

Suppression dattributs de contour dun objet slectionn


Procdez de lune des manires suivantes :

Dans le menu contextuel Catgorie de contour de linspecteur des proprits ou dans la fentre contextuelle
Options de contour, cliquez sur Aucune.

Activez le slecteur Couleur de contour dans le panneau Outils ou linspecteur des proprits, puis cliquez sur le bouton Transparent .

Alignement du contour
Utilisez les options dalignement du contour de linspecteur des proprits (Aligner le contour vers le centre, Aligner le contour vers lintrieur et Aligner le contour vers lextrieur). Les icnes dalignement de linspecteur des proprits permettent un accs plus rapide ces options.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Application de couleurs, de contours et de fonds

122

Cration et modification de contours personnaliss


Utilisez la bote de dialogue Modifier le contour pour changer des caractristiques de contour spcifiques.

Ouverture de la bote de dialogue Modifier le contour


Procdez de lune des manires suivantes :
1 Cliquez sur Modifier le contour dans l'inspecteur de proprits. 2 Chaque onglet prsente le mme pinceau avec des paramtres diffrents. Dans laperu, les paramtres actuels de

sensibilit la pression et la vitesse sont reprsents par un contour trac de gauche droite qui seffile, sestompe ou se transforme dune manire ou dune autre.

Dfinition des options de trait de pinceau gnrales


1 Dans longlet Options, dfinissez la quantit dencre, lespacement et le dbit. Une vitesse dcoulement leve

produit des traits de pinceau qui senchanent progressivement comme si vous utilisiez un arographe.
2 Slectionnez des options de trait de pinceau :

Pour que les traits de pinceau se chevauchent et crent des contours denses, slectionnez Repasser. Pour dfinir la texture du contour, changez loption Texture. Laspect de la texture est proportionnel la valeur
dfinie.

Pour dfinir la texture des bords, entrez une valeur dans la zone de texte Texture du bord, puis slectionnez un
effet de bord dans le menu contextuel Effet de bord.

Dfinissez le nombre de pointes du trait de pinceau. Pour plusieurs extrmits, entrez une valeur despacement
des pointes, puis slectionnez la mthode de variation de couleur.

Pour slectionner une ligne pointille ou discontinue, slectionnez une option dans le menu contextuel Tiret.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Application de couleurs, de contours et de fonds

123

Pour dfinir la longueur des tirets et des espaces dune ligne pointille, utilisez les trois ensembles de zones
dentre de texte Activ(e) et Dsactiv(e) pour contrler le premier, le deuxime et le troisime tiret.
3 Cliquez sur OK.

Modification de la pointe
1 Dans longlet Forme, slectionnez Carre pour obtenir une pointe carre, ou dslectionnez cette option si vous

prfrez une pointe de pinceau ronde.


2 Dfinissez la taille, laspect et langle de la pointe, ainsi que le lissage des bords. 3 Cliquez sur OK.

Remarque : si vous travaillez avec une tablette graphique et un stylet Wacom sensibles la pression, Fireworks utilise des paramtres de contour pour dfinir prcisment les attributs de contour contrls par la vitesse et la pression. Vous pouvez slectionner lattribut de contour contrler avec le crayon.

Dfinition de la sensibilit du contour


1 Dans longlet Sensibilit, slectionnez une proprit de contour dans le menu contextuel Proprit du contour. 2 Dans les options Facteurs de variation, slectionnez le degr auquel la sensibilit affecte la proprit de contour

actuelle.

Enregistrement/Suppression dun contour personnalis


Cliquez sur Enregistrer le contour personnalis ou Supprimer le contour personnalis dans linspecteur des proprits pour enregistrer ou supprimer un contour personnalis.

Dplacement dun trait de pinceau lintrieur ou lextrieur dun trac

Contour centr, contour situ lintrieur et contour situ lextrieur

Pour dplacer des traits de pinceau de la position par dfaut (centrage sur un trac) vers un autre emplacement, utilisez le menu contextuel Contour de la fentre Options de contour.
1 Dans le panneau Outils ou dans linspecteur des proprits, cliquez sur la case Contour pour ouvrir la fentre

contextuelle de nuancier.
2 Dans la partie infrieure de cette fentre, slectionnez A lintrieur du trac ou A lextrieur du trac dans le menu

contextuel.
3 (Facultatif) Slectionnez loption Fond sur contour.

Normalement, le contour recouvre le fond. La slection de loption Fond sur contour permet de dessiner un fond sur le contour. Lorsque loption Fond sur contour est utilise avec un objet comportant un fond opaque, toute partie du contour situe lintrieur du trac est obscurcie. Les fonds comportant un niveau de transparence risquent de teinter les traits de pinceau lintrieur des tracs ou de se mlanger avec ces derniers.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Application de couleurs, de contours et de fonds

124

Cration de styles de contour


Vous pouvez modifier des caractristiques de contour spcifiques, telles que la quantit dencre, la forme et la pression de la pointe, puis enregistrer le contour personnalis en tant que style, de faon lutiliser de nouveau dans les autres documents.
1 Procdez de lune des manires suivantes :

Activez la case Couleur de contour du panneau Outils, puis cliquez sur Options de contour. Dans le menu contextuel Options de contour de linspecteur des proprits, cliquez sur Options de contour.
2 Modifiez les attributs de trait de pinceau. 3 Cliquez sur le bouton Enregistrer les contours personnaliss pour enregistrer les attributs de contour personnalis

en tant que style en vue dune utilisation ultrieure.

Cration et modification de fonds unis


Crez et utilisez des fonds pour les objets vectoriels et le texte, et utilisez les outils Pot de peinture ou Dgrad pour remplir les slections de pixels en leur appliquant les paramtres de fond actuels. Licne de pot de peinture du Mlangeur. symbolise la case Couleur de fond du panneau Outils, de linspecteur des proprits et

Modification de la couleur de fond unie des outils de dessin vectoriels et de loutil Pot de peinture
1 Slectionnez un outil de dessin vectoriel ou loutil Pot de peinture. 2 Procdez de lune des manires suivantes :

Appuyez sur les touches Ctrl+D (Windows) ou Cmde+D (Mac OS) pour dslectionner tous les objets, puis
cliquez sur la case Couleur de fond de linspecteur des proprits pour ouvrir la fentre contextuelle correspondante.

Activez la case Couleur de fond du panneau Outils ou du Mlangeur pour ouvrir la fentre contextuelle pour la
slection des couleurs.
3 Slectionnez une couleur de fond dans le nuancier, ou utilisez le pointeur de la pipette pour chantillonner une

couleur sur lcran. Remarque : suite la slection de loutil Texte, la case Couleur de fond adopte toujours la dernire couleur de texte unie utilise par cet outil.

Modification du fond uni dun objet vectoriel slectionn


1 Activez la case Couleur de fond de linspecteur des proprits, du panneau Outils ou du Mlangeur pour ouvrir la

fentre contextuelle pour la slection des couleurs.


2 Slectionnez une nuance.

Cration et application de fonds en dgrad ou motifs


Utilisez les fonds motifs pour remplir un objet trac avec un graphique bitmap. Utilisez les fonds en dgrad pour mlanger les couleurs et obtenir ainsi divers effets. Les fonds nappartenant pas
aux catgories Aucun, Uni, Motif et Tramage Web sont des fonds en dgrad. Remarque : les nouveaux fonds utilisent la couleur actuellement affiche dans la case Couleur de fond du panneau Outils.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Application de couleurs, de contours et de fonds

125

Application dun fond motifs un objet slectionn


1 Procdez de lune des manires suivantes :

Dans le menu contextuel Options de fond de linspecteur des proprits, cliquez sur Motif. Activez la case Couleur de fond du panneau Outils, cliquez ensuite sur Options de fond, puis slectionnez Motif
dans le menu contextuel Options de fond.
2 Dans le menu contextuel Nom de motif, slectionnez un motif.

Cration dun fond motifs personnalis partir dun fichier externe


Dfinissez un fichier bitmap en tant que nouveau motif, en utilisant comme motifs les formats suivants : PNG, GIF, JPEG, BMP, TIFF et PICT (Mac OS uniquement). Lorsquun motif est une image transparente 32 bits, la transparence affecte le fond lorsquil est utilis dans Fireworks. Les images qui ne sont pas de 32 bits deviennent opaques.
1 Affichez les proprits de lobjet vectoriel dans linspecteur des proprits, puis slectionnez Motif dans le menu

contextuel Options de fond.


2 Activez la case Couleur de fond, puis slectionnez Autre dans le menu contextuel Nom de motif. 3 Recherchez le fichier bitmap utiliser comme nouveau motif, puis cliquez sur Ouvrir.

Application dun fond en dgrad un objet slectionn

Objets avec divers fonds en dgrad

Dans le menu contextuel Options de fond de linspecteur des proprits, slectionnez un dgrad.

Modification dun fond en dgrad

Fentre contextuelle Modifier le dgrad

1 Dans le menu contextuel Options de fond de linspecteur des proprits, slectionnez un fond en dgrad ou un

objet dot dun fond en dgrad.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Application de couleurs, de contours et de fonds

126

2 Activez la case Couleur de fond dans linspecteur des proprits ou le panneau Outils pour ouvrir la fentre

contextuelle.
3 Effectuez lune des oprations suivantes :

Pour ajouter une nouvelle nuance de couleur, cliquez sur la zone situe sous la gamme des dgrads. Pour ajouter une nuance dopacit, cliquez sur la zone au-dessus de la rampe de couleurs dgrade. Pour supprimer une couleur ou une nuance dopacit du dgrad, faites glisser la nuance hors de la fentre
contextuelle Modifier le dgrad.

Pour dfinir ou modifier la couleur dune nuance, cliquez dessus, puis slectionnez une couleur. Pour dfinir ou modifier la transparence dune nuance dopacit, cliquez dessus, puis faites glisser le curseur vers
le pourcentage de transparence (la valeur 0 reprsente une transparence totale, et la valeur 100 une opacit totale) ou entrez une valeur numrique dopacit comprise entre 0 et 100. Ensuite, appuyez sur la touche Entre ou cliquez hors de la fentre contextuelle Modifier le dgrad. Remarque : le damier de transparence apparat travers le dgrad dans les zones transparentes.

Pour rgler la transition entre les diffrentes couleurs dun fond, faites glisser les nuances de couleur vers la
gauche ou vers la droite.

Cration de fonds avec loutil Dgrad


Pour remplir un objet avec un dgrad plutt quune couleur unie, utilisez loutil Dgrad. Loutil Dgrad permet de conserver les proprits du dernier lment utilis.
1 Dans le panneau Outils, cliquez sur loutil Pot de peinture, puis slectionnez loutil Dgrad dans le menu

contextuel.
2 Slectionnez des attributs dans linspecteur des proprits. 3 Cliquez et faites glisser le pointeur pour dfinir le point de dpart du dgrad, ainsi que la direction et la longueur

de la zone dgrade.

Correction de leffet de bandes dans les dgrads


Cette option permet de corriger leffet de bandes dans les dgrads. Vous pouvez uniquement appliquer un tramage aux objets vectoriels contenant des dgrads linaires ou concentriques. Le tramage disparat lorsque vous importez le fichier dans une version antrieure de Fireworks.
1 Dessinez un objet vectoriel et remplissez-le dun dgrad linaire ou concentrique. 2 Dans la bote de dialogue Options de remplissage, rglez loption Bord sur Anticrnel. 3 Rglez la texture sur 0 %. 4 Slectionnez Tramage.

Transformation et distorsion des fonds


Vous pouvez dplacer, faire pivoter, incliner et modifier la largeur du dgrad ou du motif dun objet. Lorsque vous utilisez loutil Pointeur ou Dgrad pour slectionner un objet dot dun fond en dgrad ou dun fond motifs, des poignes apparaissent autour ou ct de lobjet. Faites glisser les poignes pour rgler le fond de lobjet.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Application de couleurs, de contours et de fonds

127

Utilisez les poignes du fond pour ajuster de faon interactive un fond en dgrad ou un fond motifs.

Pour dplacer le fond dans un objet, faites glisser la poigne arrondie, ou utilisez loutil Dgrad pour cliquer un
nouvel emplacement.

Pour rgler la largeur et linclinaison dun fond, faites glisser une poigne carre. Pour faire pivoter le fond, faites glisser les lignes qui relient les poignes.
Pour faire pivoter un fond par incrments de 45 degrs, maintenez la touche Maj enfonce tout en faisant glisser les lignes.

Modification des bords des fonds


Les bords dun fond peuvent tre nets et rguliers comme ils peuvent tre adoucis par un lissage ou un contour progressif. Par dfaut, les bords sont lisss. Le lissage permet dobtenir un subtil fondu des bords dans larrire-plan, afin dadoucir les bords dentels observs sur les objets arrondis (les ellipses et les cercles, par exemple). La diffusion, quant elle, produit une fusion perceptible de part et dautre du bord. Il adoucit le bord, crant ainsi un effet proche de la lueur.
1 Procdez de lune des manires suivantes :

Cliquez dans le menu contextuel Bord de linspecteur des proprits. Cliquez sur la case Couleur de fond dans le panneau Outils, cliquez ensuite sur Options de fond, puis sur le menu
contextuel Bord.
2 Slectionnez une option de bord : Bord net, Lissage ou Contour progressif. 3 Pour le contour progressif, slectionnez le nombre de pixels (compris entre 0 et 100) applicable de part et dautre

du bord rendre progressif. La valeur par dfaut est 10. Plus ce nombre est lev, plus le contour progressif est marqu.

Enregistrement dun fond en dgrad personnalis


Pour enregistrer les paramtres de dgrad actuels sous la forme dun dgrad personnalis rutiliser dans

plusieurs documents, crez un style.

Suppression dun fond dun objet slectionn


Procdez de lune des manires suivantes :

Dans le menu contextuel Options de fond de linspecteur des proprits ou dans la fentre contextuelle Options de
fond, slectionnez Aucune.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Application de couleurs, de contours et de fonds

128

Activez la case Couleur de fond, et cliquez sur le bouton Transparent. Cette option supprime uniquement les fonds unis.

Ajout deffets 3D aux contours et aux fonds


Ajoutez des effets 3D aux contours et aux fonds en les texturant. Les textures modifient la luminosit, mais pas la teinte, et donnent un aspect plus organique aux contours et aux fonds. Les textures produisent plus deffet sur les contours larges.

Utilisez les options de contour de linspecteur des proprits ou de la fentre contextuelle Options de contour pour ajouter une texture un trait de pinceau.

Ajout dune texture un contour ou un fond


1 Procdez de lune des manires suivantes :

Cliquez sur le menu contextuel Texture du contour ou Texture du fond dans linspecteur des proprits. Cliquez sur la case Couleur de contour ou Couleur de fond du panneau Outils, cliquez sur Options de contour
ou sur Options de fond, puis sur le menu contextuel Texture.
2 Procdez de lune des manires suivantes :

Dans le menu contextuel, slectionnez une texture. Dans le menu contextuel, slectionnez loption Autre, puis ouvrez un fichier de texture.
Remarque : vous pouvez appliquer des textures des fichiers aux formats suivants : PNG, GIF, JPEG, BMP, TIFF et PICT (Mac OS uniquement).
3 Entrez un pourcentage compris entre 0 (intensit la plus faible) et 100 (intensit la plus leve) afin de dfinir la

profondeur de la texture.
4 (Fonds uniquement) Pour donner un effet de transparence au fond, slectionnez Transparent.

Ajout dune texture personnalise


Utilisez comme textures des fichiers bitmap de Fireworks et dautres applications. Vous pouvez appliquer des

textures partir de fichiers aux formats suivants : PNG, GIF, JPEG, BMP, TIFF et PICT (Mac OS uniquement).

Cration dune nouvelle texture partir dun fichier externe


1 Affichez les proprits de lobjet vectoriel dans linspecteur des proprits, puis slectionnez Autre dans lun des

menus contextuels Nom de la texture.


2 Accdez au fichier bitmap utiliser comme nouvelle texture, puis cliquez sur Ouvrir.

Dernire mise jour le 12/5/2011

129

Chapitre 9 : Utilisation des filtres dynamiques


Application de filtres dynamiques
Les filtres dynamiques dAdobe Fireworks (prcdemment appels effets dynamiques) sont des amliorations que vous pouvez appliquer des objets vectoriels, des images bitmap et du texte. Les filtres dynamiques incluent le biseautage, lestampage, les ombres unies, les ombres portes, les lueurs, la correction colorimtrique, lattnuation et laccentuation. Vous pouvez appliquer des filtres dynamiques des objets slectionns directement dans linspecteur des proprits.

A propos des filtres dynamiques


Fireworks met jour les filtres dynamiques lorsque vous modifiez des objets auxquels ils sont appliqus. Aprs avoir appliqu un filtre dynamique, vous pouvez changer ses options tout moment ou changer lordre des filtres pour tester un filtre combin. Vous pouvez activer ou dsactiver des filtres dynamiques ou les supprimer dans linspecteur des proprits. Lorsque vous supprimez un filtre, lobjet ou limage reprend son aspect prcdent.

Menu contextuel Filtres dynamiques dans linspecteur des proprits

Certains filtres (Niveaux automatiques, Flou gaussien ou Accentuation par exemple), qui taient des filtres ou
modules externes irrversibles, sont dsormais disponibles en tant que filtres dynamiques Fireworks.

Vous pouvez ajouter des modules externes tiers utiliser comme filtres dynamiques dans Fireworks ou utiliser ces
filtres de manire traditionnelle depuis le menu Filtres.

Lorsque linspecteur des proprits est affich mi-hauteur, cliquez sur Editer les filtres ou sur Ajouter des filtres
pour afficher le menu contextuel Filtres dynamiques. Remarque : les nouveaux fonds utilisent la couleur actuellement affiche dans la case Couleur de fond du panneau Outils.

Pour personnaliser des filtres dynamiques, essayez plusieurs paramtres jusqu obtenir le rsultat souhait.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Utilisation des filtres dynamiques

130

C D E

Fentre du menu contextuel Biseau intrieur A. Largeur du biseau B. Biseau prdfini de bouton C. Contraste D. Adoucissement E. Angle du biseau

Application de filtres dynamiques


Application dun filtre dynamique aux objets slectionns
1 Cliquez sur licne plus (+) en regard de ltiquette Filtres dans linspecteur des proprits, puis choisissez un filtre

dans le menu contextuel Ajouter des filtres dynamiques. Le filtre est ajout la liste Filtres dynamiques pour lobjet slectionn. Pour appliquer un filtre dynamique de faon ce quil naffecte quune slection de pixels dans une image, coupez et collez la slection au lieu de crer une image bitmap, slectionnez-la, puis appliquez le filtre dynamique.
2 Si un menu contextuel ou une bote de dialogue apparat, entrez les paramtres du filtre, puis procdez de lune des

manires suivantes :

Si le filtre dynamique a une bote de dialogue, cliquez sur OK. Si le filtre dynamique comporte un menu contextuel, appuyez sur la touche Entre ou cliquez nimporte o dans
lespace de travail.
3 Rptez les tapes 1 et 2 pour appliquer dautres filtres dynamiques.

Remarque : lordre dapplication des filtres dynamiques affecte lensemble du filtre. Faites glisser les filtres dynamiques pour en modifier lordre dempilage.

Activation ou dsactivation dun filtre dynamique appliqu un objet


Cochez la case situe en regard du filtre dans la liste Filtres dans linspecteur des proprits.

Activation ou dsactivation de tous les filtres dynamiques appliqus un objet


Cliquez sur licne plus (+) en regard de ltiquette Filtres dans linspecteur des proprits, puis choisissez

Options > Tous actifs ou Options > Tous inactifs dans le menu contextuel.

Enregistrement deffets appliqus


Aprs avoir ajout ou modifi un filtre dynamique, cliquez en dehors du menu contextuel de paramtres ou

appuyez sur la touche Entre.

Application de bords biseauts


Un bord biseaut donne un effet de relief un objet.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Utilisation des filtres dynamiques

131

Rectangle avec biseau interne et biseau externe

1 Cliquez sur licne plus (+) en regard de ltiquette Filtres dans linspecteur des proprits, puis choisissez une

option de biseau dans le menu contextuel.


2 Dans le menu contextuel, modifiez les paramtres du filtre.

Estampage
Le filtre dynamique Estampage donne limpression quune image, un objet ou un texte est rapport ou en relief sur la zone de travail.

Objet avec estampe rapporte et en relief

1 Cliquez sur licne plus (+) en regard de ltiquette Filtres dans linspecteur des proprits, puis choisissez une

option destampage dans le menu contextuel.


2 Modifiez les paramtres du filtre.

Si vous voulez que lobjet dorigine saffiche dans la zone estampe, slectionnez Afficher lobjet. Remarque : par soucis de rtrocompatibilit avec les documents plus anciens, loption Afficher lobjet est dsactive pour les objets auxquels des filtres dynamiques destampage sont appliqus.

Application dombres et de lueurs


Choisissez parmi une slection dombres, puis indiquez langle de lombre pour simuler un effet de lumire sur lobjet.

Filtres Ombre porte, Ombre interne et Lueur

Paramtres des filtres pour les ombres


Les options disponibles varient selon le type dombre choisi.

Faites glisser le curseur Angle pour dfinir la direction de lombre. Faites glisser le curseur Distance pour dfinir la distance entre lombre et lobjet. Slectionnez loption Couleur unie pour appliquer une couleur unie lombre. Pour dfinir la couleur de lombre, ouvrez le menu contextuel de slection des couleurs, puis choisissez la couleur
de lombre.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Utilisation des filtres dynamiques

132

Faites glisser le curseur Opacit pour dfinir le pourcentage de transparence de lombre. Faites glisser le curseur Adoucissement pour dfinir la nettet de lombre. Cliquez sur loption Aperu pour obtenir un aperu de lombre. Cochez la case Masquage pour masquer lobjet et afficher uniquement son ombre.

Application dune ombre unie


1 Dans linspecteur des proprits, cliquez sur licne plus (+) en regard de ltiquette Filtres, pointez le curseur sur

Ombre et lueur, puis cliquez sur Ombre unie.


2 Dans la bote de dialogue Ombre unie, rglez les paramtres du filtre. 3 Lorsque vous avez termin, cliquez sur OK.

Application dune ombre porte ou dune ombre interne


1 Cliquez sur licne plus (+) en regard de ltiquette Filtres dans linspecteur des proprits, puis choisissez une

option dombre dans le menu contextuel.

Ombre et lueur > Ombre porte. Ombre et lueur > Ombre interne.
2 Dans le menu contextuel, modifiez les paramtres du filtre.

Application dune lueur


1 Cliquez sur le bouton Ajouter des filtres dynamiques dans linspecteur des proprits, puis choisissez Ombre et

lueur > Lueur.


2 Dans le menu contextuel, modifiez les paramtres du filtre :

Cliquez sur la case de couleur pour dfinir la couleur de la lueur. Faites glisser le curseur Largeur pour dfinir le rayonnement de la lueur. Faites glisser le curseur Opacit pour dfinir le pourcentage de transparence de la lueur. Faites glisser le curseur Adoucissement pour dfinir la nettet de la lueur. Faites glisser le curseur Dcalage pour dfinir la distance qui spare la lueur de lobjet.

Application de filtres et de modules externes Photoshop comme des filtres dynamiques


Remarque : le menu Xtras de certaines versions antrieures de Fireworks a t renomm le menu Filtres dans Fireworks 8 et versions ultrieures. Les extensions Xtra de Fireworks sont maintenant appeles des filtres. Lapplication des modules externes et filtres intgrs du menu contextuel Ajouter des filtres comme des filtres dynamiques permet de les modifier ou de les supprimer dun objet. Utilisez le menu Filtres pour appliquer des filtres et des modules externes Adobe Photoshop uniquement si vous tes certain de ne pas devoir modifier ou supprimer le filtre. Vous ne pouvez supprimer un filtre que si la commande Annuler est disponible.

Installation et application des modules externes Photoshop


1 Dans linspecteur des proprits, cliquez sur le bouton Ajouter des filtres, puis choisissez Options > Rechercher les

modules externes.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Utilisation des filtres dynamiques

133

2 Ouvrez le dossier dans lequel sont installs les modules externes Photoshop, puis cliquez sur OK. 3 Relancez Fireworks pour charger les modules externes.

Remarque : si vous dplacez les modules externes vers un autre dossier, recommencez la procdure ou choisissez la commande Edition > Prfrences, puis cliquez sur longlet Modules externes pour changer le chemin des modules externes. Relancez ensuite Fireworks.
4 Pour appliquer le module externe Photoshop un objet slectionn, dans linspecteur des proprits, cliquez sur

licne plus (+) en regard de ltiquette Filtres, puis slectionnez un filtre dans le sous-menu Options. Application deffets de calques Photoshop Remarque : si vous importez un fichier PSD, vous pouvez galement modifier les effets de calques qui existent dj dans ce fichier.
1 Dans linspecteur des proprits, cliquez sur le bouton Ajouter des filtres, puis slectionnez Effets dynamiques

Photoshop.
2 Dans le volet gauche, slectionnez lun des effets, puis modifiez les paramtres dans le volet droit. Vous pouvez

slectionner plusieurs effets la fois. Application de filtres des objets associs Lorsque vous appliquez un filtre un groupe, il est appliqu tous les objets du groupe. Si les objets sont dissocis, ils retrouvent leurs paramtres de filtre dorigine. Pour appliquer isolment un filtre un objet dun groupe, slectionnez uniquement cet objet laide de loutil Sousslection.

Modification et personnalisation des filtres dynamiques


Modification des paramtres de filtre
1 Dans linspecteur des proprits, cliquez sur le bouton dinformation situ en regard du filtre modifier. 2 Rglez les paramtres du filtre.

Les filtres que vous ne pouvez pas modifier sont griss.


3 Cliquez hors de la fentre ou appuyez sur la touche Entre.

Rorganisation ou suppression de filtres dynamiques


Rorganisation des filtres dynamiques
Vous pouvez changer lordre des filtres appliqus un objet. La rorganisation des filtres modifie la squence dapplication de ces derniers, ce qui peut entraner des modifications du filtre combin. Les filtres figurant en haut de la liste sont appliqus les premiers. En gnral, les filtres qui modifient lintrieur dun objet, tels que le filtre Biseau interne, doivent tre appliqus avant les filtres qui en changent lextrieur. Par exemple, appliquez le filtre Biseau interne avant le filtre Biseau externe, Lueur ou Ombre.
Pour rorganiser les filtres, dans linspecteur des proprits, faites glisser un filtre vers un autre emplacement dans

la liste.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Utilisation des filtres dynamiques

134

Suppression dun seul filtre appliqu un objet slectionn


Slectionnez le filtre supprimer de la liste Filtres dans linspecteur des proprits, puis cliquez sur le bouton

Supprimer les filtres dynamiques.

Suppression de tous les filtres dun objet slectionn


Dans linspecteur des proprits, cliquez sur licne plus (+) en regard de ltiquette Filtres, puis choisissez Aucun

dans le menu contextuel.

Cration de filtres dynamiques personnaliss


Les filtres dynamiques personnaliss sont des styles dont les options de proprit sont toutes dsactives, lexception de loption Filtre. Pour enregistrer une combinaison particulire de paramtres de filtres dynamiques, crez un filtre dynamique personnalis.

Cration dun filtre dynamique personnalis laide du panneau Styles


1 Appliquez des paramtres de filtre dynamique aux objets slectionns. Pour plus dinformations, reportez-vous

la section Application de filtres dynamiques la page 129.


2 Dans le menu Options du panneau Styles, slectionnez Nouveau style. 3 Dslectionnez toutes les proprits (sauf la proprit Effet) tapez un nom, puis cliquez sur OK.

Une icne de style reprsentant le filtre dynamique est ajoute au panneau Styles. Remarque : si vous slectionnez des proprits supplmentaires dans la bote de dialogue Nouveau style, le style ne figure plus dans le menu contextuel Ajouter des filtres dynamiques de linspecteur des proprits, bien quil reste dans le panneau Styles sous la forme dun style type.

Application dun filtre dynamique personnalis aux objets slectionns


Cliquez sur licne du filtre dynamique personnalis dans le panneau Styles.

Vous pouvez renommer ou supprimer un filtre dynamique personnalis comme tout autre style du panneau Styles. Vous ne pouvez pas renommer ni supprimer un filtre standard Fireworks.

Enregistrement des filtres dynamiques sous forme de commandes


Pour enregistrer et rutiliser un filtre, crez une commande partir de ce dernier. Vous pouvez utiliser cette commande dans un traitement par lots.
1 Appliquez les filtres lobjet. 2 Si le panneau Historique nest pas visible, choisissez Fentre > Historique. 3 Tout en maintenant la touche Maj enfonce, cliquez sur les actions enregistrer sous la forme dune commande. 4 Procdez de lune des manires suivantes :

Dans le menu Options du panneau Historique, cliquez sur Enregistrer en tant que commande. Cliquez sur le bouton Enregistrer situ en bas du panneau Historique.
5 Entrez un nom de commande, puis cliquez sur OK pour lajouter au menu Commandes.

Dernire mise jour le 12/5/2011

135

Chapitre 10 : Calques, masques et fondus


Les calques divisent les documents Adobe Fireworks en plusieurs plans discrets, donnant limpression que les composants de lillustration sont dessins sur diffrentes couches de papier superposes. Un document peut tre compos de diffrents calques, chacun contenant de nombreux sous-calques ou objets. Les calques Fireworks sont lquivalent des ensembles de calques utiliss dans Adobe Photoshop. Les calques Photoshop sont lquivalent des objets individuels de Fireworks. Les masques vous permettent de cacher une partie de limage sous-jacente. Vous pouvez, par exemple, coller une forme elliptique en tant que masque par-dessus une photo. Toutes les zones situes lextrieur de lellipse sont alors masques, et seule reste visible la partie de limage situe lintrieur de lellipse. Les modes de fusion vous offrent un autre niveau de crativit. Vous pouvez crer des effets uniques en mlangeant les couleurs dobjets qui se chevauchent. Fireworks compte plusieurs modes de fusion qui vous permettent dobtenir les effets souhaits.

Calques
Chaque objet dun document est plac sur un calque. Vous pouvez crer des calques avant de commencer dessiner ou en ajouter au fur et mesure de vos besoins. La zone de travail est situe sous tous les calques et nest pas un calque en soi.

Le panneau Calques affiche ltat actuel de tous les calques de ltat actif ou de la page dun document. Le nom du calque actif est mis en surbrillance. Lordre dempilage est lordre selon lequel les objets apparaissent dans le document. Il dtermine la manire dont les objets dun calque se superposent aux objets dun autre. Fireworks place le calque le plus rcent en haut de la pile. Vous pouvez modifier lordre des calques et des objets lintrieur des calques. Vous pouvez galement crer des sous-calques et dplacer les objets qui sy trouvent. Le panneau Calques affiche galement les masques, les commandes dopacit et les modes de fusion.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Calques, masques et fondus

136

A B C

E F G H I

A. Dvelopper/Rduire le calque B. Verrouiller/Dverrouiller le calque C. Afficher/Masquer le calque D. Calque actif E. Supprimer le calque F. Nouveau calque/Dupliquer le calque G. Nouveau sous-calque H. Ajouter un masque I. Nouvelle image bitmap

Activation dun calque


Les objets que vous tracez, collez ou importez viennent se placer par-dessus le calque actif.
Procdez de lune des manires suivantes :

Dans le panneau Calques, cliquez sur le nom dun calque. Slectionnez un objet sur un calque.

Ajout et suppression de calques


Dans le panneau Calques, vous pouvez ajouter de nouveaux calques et sous-calques, supprimer des calques inutiles et dupliquer des calques et des objets existants.

Ajout dun calque


Un calque vide est insr au-dessus du calque slectionn et devient alors le calque actif.
Procdez de lune des manires suivantes :

Cliquez sur le bouton Nouveau calque/Dupliquer Choisissez Edition > Insertion > Calque.

Dans le menu Options du panneau Calques ou dans le menu contextuel, choisissez Nouveau calque ou
Nouveau sous-calque, puis cliquez sur OK.

Suppression dun calque


Le calque au-dessus du calque supprim devient le calque actif. Si le calque supprim est le dernier, un nouveau calque vide est cr.
Procdez de lune des manires suivantes :

Faites glisser le calque jusqu licne de la corbeille

dans le panneau Calques.

Slectionnez le calque, puis cliquez sur licne de la corbeille dans le panneau Calques. Slectionnez un calque, puis choisissez Supprimer le calque dans le menu Options du panneau Calques ou dans
le menu contextuel.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Calques, masques et fondus

137

Lextension Delete Empty Layers permet de supprimer tous les calques normaux et Web vides sur lensemble des tats et pages du document actif. Cette extension est disponible sur http://www.adobe.com/go/learn_fw_deleteemptylayers_fr.

Duplication dun calque et dobjets


Un calque dupliqu contient les mmes objets que le calque slectionn. Les objets dupliqus conservent lopacit et le mode de fusion des objets dorigine. Vous pouvez modifier les objets dupliqus sans agir sur les originaux.
Procdez de lune des manires suivantes :

Faites glisser un calque vers le bouton Nouveau calque/Dupliquer le calque. Dans le menu Options du panneau Calques ou dans le menu contextuel, slectionnez un calque, puis
choisissez Dupliquer le calque. Slectionnez ensuite le nombre de calques dupliqus insrer, ainsi que leur emplacement dans lordre dempilage. Le calque Web est toujours le calque suprieur. Cest pourquoi loption En haut signifie juste en dessous du calque Web.

Duplication dun objet


Faites glisser un objet tout en maintenant la touche Alt (Windows) ou Option (Mac OS) enfonce.

Dveloppement ou rduction des calques


Vous pouvez rduire laffichage des calques pour viter dencombrer le panneau Calques. Dveloppez le calque pour afficher ou slectionner ses objets.

Pour dvelopper ou rduire un seul calque, cliquez sur le triangle situ gauche de son nom. Pour dvelopper ou rduire tous les calques, cliquez sur le triangle situ gauche du nom dun calque tout en
maintenant la touche Alt (Windows) ou Option (Mac OS) enfonce.

Organisation des calques


Vous pouvez organiser les calques et les objets dun document en les renommant et en changeant leur disposition dans le panneau Calques. Les objets peuvent tre dplacs au sein dun mme calque ou dun calque lautre. Le dplacement des calques et des objets dans le panneau Calques modifie lordre dapparition des objets sur la zone de travail. Les objets situs en haut dun calque saffichent au-dessus des autres objets de ce calque sur la zone de travail. Les objets situs sur le calque de niveau suprieur saffichent devant les objets des calques de niveau infrieur. Remarque : le panneau Calques dfile automatiquement lorsque vous faites glisser un calque ou un objet au-del de la limite suprieure ou infrieure de la zone visible.

Attribution dun nom un calque ou un objet


1 Cliquez deux fois sur le calque ou lobjet dans le panneau Calques. 2 Entrez le nouveau nom du calque ou de lobjet, puis appuyez sur la touche Entre.

Remarque : bien que vous ne puissiez pas renommer le calque Web, vous pouvez renommer ses sous-calques et ses objets Web, notamment les tranches et les zones sensibles.

Dplacement dun seul calque ou objet


Faites glisser le calque ou lobjet vers son nouvel emplacement dans le panneau Calques.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Calques, masques et fondus

138

Dplacement de tous les objets slectionns sur un calque


Procdez de lune des manires suivantes :

Faites glisser le bouton radio situ en regard du nom du calque vers un autre calque. Cliquez une fois dans la colonne de droite du calque de destination.
Remarque : vous ne pouvez pas faire glisser un calque parent vers son calque enfant.

Protection des calques et des objets


Le verrouillage dun objet individuel permet de le protger en empchant quil soit slectionn ou modifi. Le verrouillage dun calque protge tous les objets qui le composent. Une icne de cadenas signale un lment verrouill. La fonction Modification par calque protge les objets de tous les calques contre la slection ou les modifications intempestives, mais pas ceux du calque actif et des sous-calques. Vous pouvez galement masquer des objets et des calques pour les protger. Remarque : les calques et objets masqus dun document ne sont pas exports avec celui-ci. Les objets du calque Web peuvent tre exports dans tous les cas, quils soient masqus ou non. Pour plus dinformations sur lexportation, reportezvous la section Exportation depuis lespace de travail la page 253.

Verrouillage des objets et des calques


Pour verrouiller un objet, cliquez sur le carr dans la colonne situe immdiatement gauche du nom de lobjet. Pour verrouiller un calque, cliquez sur le carr dans la colonne situe immdiatement gauche du nom du calque. Pour verrouiller plusieurs calques, faites glisser le curseur le long de la colonne de verrouillage du panneau Calques. Pour verrouiller ou dverrouiller tous les calques, dans le menu Options du panneau Calques ou dans le menu
contextuel, slectionnez Tout verrouiller ou Tout dverrouiller.

Activation ou dsactivation de la fonction Modification par calque


Dans le menu Options du panneau Calques ou dans le menu contextuel, cliquez sur Modification par calque.

La prsence dune coche signifie que la fonction Modification par calque est active.

Affichage ou masquage dobjets et de calques


Pour afficher ou masquer un calque ou les objets dun calque, cliquez sur le carr dans la colonne situe la plus
gauche du nom dun calque ou dun objet. Licne en forme dil Calques. indique que le calque ou lobjet est visible.

Pour afficher ou masquer plusieurs calques ou objets, faites glisser le curseur le long de la colonne il du panneau Pour afficher ou masquer tous les calques et objets, dans le menu Options du panneau Calques ou dans le menu
contextuel, slectionnez Afficher tout ou Masquer tout.

Masquage ou verrouillage des autres calques


Vous pouvez masquer ou verrouiller tous les calques lexception du calque actif, pour modifier de faon prcise un logo ou une icne.
1 Dans le panneau Calques, slectionnez le calque sur lequel vous souhaitez travailler. 2 Slectionnez Commandes > Document > Masquage des autres calques ou Commandes > Document > Verrouiller

autres calques.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Calques, masques et fondus

139

Fusion des objets dans le panneau Calques


Pour viter dencombrer le panneau Calques, vous pouvez fusionner des objets. Les images bitmap et les objets fusionner ne doivent pas ncessairement tre contigus dans le panneau Calques ou se trouver sur le mme calque. La fusion vers le bas permet daplatir tous les objets vectoriels et bitmap slectionns avec lobjet bitmap qui se trouve juste au-dessous de lobjet slectionn tout au bas de la pile. Vous obtenez un seul objet bitmap. Les objets vectoriels et bitmap fusionns ne peuvent plus tre modifis sparment, et les possibilits de modification des objets vectoriels sont perdues.
1 Dans le panneau Calques, slectionnez lobjet fusionner avec un objet bitmap. Tout en maintenant la touche Maj

ou Contrle enfonce, cliquez sur les objets pour en slectionner plusieurs. Vous pouvez fusionner le contenu dun calque slectionn avec un objet bitmap correspondant lobjet le plus haut dans le calque situ immdiatement sous le calque slectionn.
2 Procdez de lune des manires suivantes :

Dans le menu Options du panneau Calques, cliquez sur Fusionner vers le bas. Choisissez Modification > Fusionner vers le bas. Cliquez avec le bouton droit de la souris (Windows) ou tout en maintenant la touche Ctrl enfonce (Mac OS)
sur les objets slectionns sur la zone de travail, puis slectionnez Fusionner vers le bas. Remarque : la commande Fusionner vers le bas nagit pas sur les tranches, les zones sensibles et les boutons.

Distribution dobjets vers les calques


Si un calque contient plusieurs objets, vous pouvez distribuer les objets vers de nouveaux calques afin dviter tout encombrement. Vous crez ainsi des calques situs au mme niveau que celui du calque parent. Ces calques crs conservent galement la hirarchie des calques. La distribution des objets encombrants vers dautres calques permet de mieux manipuler ces objets.
1 Slectionnez le calque comprenant les objets distribuer. 2 Slectionnez Commandes > Document > Rpartir dans les calques.

Partage des calques


Lorsque diffrentes pages ou diffrents tats se partagent un calque, la modification apporte un objet sur un calque se rpercute sur toutes les pages ou dans tous les tats. Partagez des calques si vous voulez que des objets, tels que des lments darrire-plan, saffichent sur toutes les pages dun site Web ou dans tous les tats dune animation. Pour plus d'informations, voir http://www.adobe.com/go/learn_fw_usingpagesstates_fr Remarque : vous ne pouvez pas partager des sous-calques ; pour les partager, vous devez slectionner le calque parent.

Partage du calque slectionn entre plusieurs tats


Procdez de lune des manires suivantes :

Dans le menu Options du panneau Calques ou dans le menu contextuel, slectionnez Calque partag vers les
tats.

Slectionnez la commande Nouveau calque dans le menu Options du panneau Calques ou dans le menu
contextuel, puis choisissez loption Partager dans tous les tats. Une icne de film saffiche en regard du calque partag entre plusieurs tats dans le panneau Calques.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Calques, masques et fondus

140

Partage du calque slectionn entre plusieurs pages


Dans le menu Options du panneau Calques ou dans le menu contextuel, slectionnez Calque partag vers pages.

Une icne de page saffiche en regard du calque partag entre plusieurs pages dans le panneau Calques.

Dsactivation du partage de calque


1 Slectionnez le calque partag et dslectionnez loption Partager dans tous les tats dans le menu Options du

panneau Calques ou dans le menu contextuel.


2 Indiquez le procd de copie des objets dans les tats :

Conservez le contenu du calque partag uniquement dans ltat actif. Copiez le contenu du calque partag dans tous les tats.

Utilisation du calque Web


Le calque Web correspond au calque suprieur (celui en haut de la pile) dans chaque document. Il contient les objets Web, tels que les tranches et les zones sensibles, qui rendent les documents Fireworks exports interactifs. Il est impossible de dpartager, supprimer, dupliquer, dplacer ou renommer le calque Web. Vous ne pouvez pas non plus fusionner les objets du calque Web. Il est toujours partag sur tous les tats dune page et les objets Web sont visibles sur chaque tat dune page.

Modification du nom dune tranche ou dune zone sensible sur le calque Web
1 Cliquez deux fois sur la tranche ou la zone sensible dans le panneau Calques. 2 Entrez le nouveau nom, puis cliquez hors de la fentre ou appuyez sur la touche Entre.

Remarque : le nouveau nom est utilis lexportation de la tranche.

A propos de limportation de calques associs Photoshop


Lorsque des fichiers Photoshop contenant des calques sont imports, chaque calque est plac en tant quobjet spar dans un mme calque de Fireworks. Les calques associs sont imports un par un, comme sils avaient t dissocis dans Photoshop avant dtre imports dans Fireworks. Leffet de dtourage des calques associs de Photoshop est perdu lors de limportation.

Masquage
Vous pouvez masquer ou afficher des parties dun objet ou dune image. Il existe diffrentes techniques de masquage permettant dobtenir de nombreux types deffets cratifs partir dobjets. Vous pouvez utiliser un masque comme un emporte-pice pour recadrer ou dtourer des objets ou images sousjacents. Certains masques produisent un effet de fentre embue, rvlant ou bloquant des portions dobjets sousjacents. Vous pouvez crer un objet masque partir dun objet vectoriel (masque vectoriel) ou dun objet bitmap (masque bitmap). Vous pouvez galement utiliser plusieurs objets ou des objets associs pour crer un masque, et mme utiliser du texte (pour crer un masque vectoriel). Aprs avoir cr un masque, vous pouvez ajuster la position de la slection masque sur la zone de travail ou modifier laspect du masque. Vous pouvez galement appliquer des transformations au masque en totalit ou chaque composant dun masque.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Calques, masques et fondus

141

A propos des masques vectoriels


Les masques vectoriels, parfois appels masques ou masques de trac dcrtage, sont utiliss dans les applications dillustration vectorielle. Lobjet masque vectoriel recadre ou dcoupe les objets sous-jacents selon la forme de son trac pour crer un effet demporte-pice.

Masque vectoriel appliqu laide du contour de son trac

Lorsque vous crez un masque vectoriel, une vignette de masque accompagne dune icne en forme de crayon apparat dans le panneau Calques.

Vignette de masque vectoriel dans le panneau Calques

Lorsquun masque vectoriel est slectionn, linspecteur des proprits affiche des informations sur lapplication du masque. La partie infrieure de linspecteur des proprits affiche des proprits supplmentaires qui permettent de modifier le contour ou le fond de lobjet masque. Par dfaut, les masques vectoriels sont appliqus en utilisant le contour de leur trac, mais vous pouvez galement les appliquer selon dautres mthodes.

A propos des masques bitmap


Les masques bitmap de Fireworks ressemblent aux masques de fusion de Photoshop en ce sens que les pixels dun objet masque agissent sur la visibilit des objets sous-jacents.

Objets dorigine et masque bitmap appliqu avec laspect de niveaux de gris

Vous pouvez appliquer des masques bitmap de deux manires :

En utilisant un objet existant pour masquer dautres objets. Cette technique est semblable lapplication dun
masque vectoriel.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Calques, masques et fondus

142

En crant un masque vide. Au dbut, les masques vides sont transparents ou opaques. Un masque transparent (ou
blanc) montre lensemble de lobjet masqu, et un masque opaque (ou noir) cache lensemble de lobjet masqu. Vous pouvez utiliser les outils bitmap pour dessiner sur lobjet masque ou le modifier en rvlant ou en masquant les objets sous-jacents. Lorsque vous crez un masque bitmap, linspecteur des proprits affiche les informations sur lapplication du masque. Si vous slectionnez un outil bitmap lorsquun masque bitmap est slectionn, linspecteur des proprits affiche les proprits du masque et les options de loutil slectionn. Par dfaut, la plupart des masques bitmap sont appliqus en utilisant leur aspect de niveaux de gris, mais vous pouvez galement les appliquer laide de leur couche alpha.

Cration dun masque partir dun objet existant


Lorsque vous utilisez un objet vectoriel comme masque, vous pouvez recadrer ou dtourer dautres objets selon son trac. Lorsque vous utilisez un objet bitmap en tant masque, la luminosit de ses pixels ou sa transparence affecte la visibilit des autres objets.

Masquage dobjets laide de la commande Coller en tant que masque


La commande Coller en tant que masque permet de crer des masques en superposant un objet ou un groupe dobjets sur un autre objet. Le masque cr au moyen de cette commande est vectoriel ou bitmap.
1 Slectionnez lobjet utiliser comme masque. Tout en maintenant la touche Maj enfonce, cliquez sur les diffrents

objets pour les slectionner. Remarque : lutilisation de plusieurs objets en tant que masque produit toujours un masque vectoriel, mme si les deux objets sont de type bitmap.
2 Positionnez la slection de sorte quelle recouvre lobjet ou le groupe dobjets masquer.

La slection peut se trouver devant ou derrire les objets masquer.

3 Choisissez Edition > Couper pour couper les objets utiliser comme masque. 4 Slectionnez lobjet ou le groupe masquer.

Si vous masquez plusieurs objets, ceux-ci doivent tre associs.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Calques, masques et fondus

143

5 Procdez de lune des manires suivantes :

Choisissez Edition > Coller en tant que masque. Choisissez Modification > Masque > Coller en tant que masque.

Masque appliqu une image avec une zone de travail noire

Masquage dobjets laide de la commande Coller dedans


Le masque cr est un masque vectoriel ou bitmap, selon le type dobjet masque utilis. La commande Coller dedans cre un masque en remplissant un trac ferm ou un objet bitmap avec dautres objets : graphiques vectoriels, textes ou images bitmap. Le trac lui-mme est parfois appel masque, et les lments quil contient sappellent des contenus ou des collages intrieurs. Le contenu qui stend au-del du masque est masqu.
1 Slectionnez lobjet ou les objets utiliser comme contenu coller dedans. 2 Positionnez lobjet ou les objets pour quils recouvrent lobjet de destination du collage.

Remarque : lordre dempilage nest pas important ds lors que les objets utiliser comme contenu coller dedans restent slectionns. Ces objets peuvent se trouver au-dessus ou en dessous de lobjet masque dans le panneau Calques.

3 Choisissez Edition > Couper pour dplacer les objets dans le Presse-papiers. 4 Slectionnez lobjet dans lequel coller le contenu. Cet objet sera utilis comme masque (trac dcrtage).

5 Choisissez Edition > Coller dedans.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Calques, masques et fondus

144

Les objets colls apparaissent dans lobjet masque ou sont dtours par le masque.

Utilisation de texte comme masque


Le masque de texte est un type de masque vectoriel qui sapplique de la mme manire quun masque utilisant des objets existants. Le texte constitue lobjet masque. La mthode la plus courante pour appliquer un masque de texte consiste utiliser le contour de son trac. Il est toutefois possible dappliquer un masque de texte en utilisant son aspect de niveaux de gris.

Masque de texte appliqu laide du contour de son trac

Utilisation du masque vectoriel automatique


Les masques vectoriels automatiques appliquent des motifs prdfinis en tant que masques vectoriels sur des objets bitmap et vectoriels. Vous pouvez modifier ultrieurement laspect des masques vectoriels automatiques, ainsi que leurs proprits.
1 Slectionnez les objets bitmap ou vectoriels. 2 Slectionnez Commandes > Cration > Masque vectoriel auto. 3 Slectionnez le type de masque, puis cliquez sur Appliquer.

Masquage dobjets laide du panneau Calques


La mthode la plus rapide pour ajouter un masque bitmap transparent vide consiste utiliser le panneau Calques. Le panneau Calques ajoute un masque blanc un objet que vous pouvez personnaliser en dessinant dessus avec les outils bitmap.
1 Slectionnez lobjet masquer. 2 En bas du panneau Calques, cliquez sur le bouton Ajouter un masque.

Un masque vide est appliqu lobjet slectionn. Le panneau Calques affiche une vignette de masque reprsentant le masque vide.
3 (Facultatif) Si lobjet masqu est un objet bitmap, utilisez lun des outils de cadre de slection ou de lasso pour crer

une slection de pixels.


4 Dans le panneau Outils, slectionnez un outil de dessin bitmap. 5 Dfinissez les options de loutil dans linspecteur des proprits.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Calques, masques et fondus

145

6 Le masque tant slectionn, dessinez sur le masque vide. Dans les zones o vous dessinez, lobjet masqu sous-

jacent est masqu.

Image avec masque appliqu

Masque tel quil apparat dans le panneau Calques

Masquage dobjets laide des commandes de rvlation et de masquage


Le sous-menu Modification > Masque contient plusieurs options permettant dappliquer des masques bitmap vides aux objets :
Tout rvler Applique un masque transparent vide un objet qui rvle la totalit de lobjet. Cette commande revient cliquer sur le bouton Ajouter un masque dans le panneau Calques. Tout masquer Applique un masque opaque vide un objet qui cache la totalit de lobjet. Rvler la slection A utiliser exclusivement avec des slections de pixels, cette commande applique un masque de

pixels transparent en utilisant la slection de pixels actuelle. Les autres pixels de lobjet bitmap sont masqus. Cette commande revient slectionner des pixels puis cliquer sur le bouton Ajouter un masque.
Masquer la slection A utiliser exclusivement avec des slections de pixels, cette commande applique un masque de

pixels opaque en utilisant la slection de pixels actuelle. Les autres pixels de lobjet bitmap sont visibles. Cette commande revient slectionner des pixels puis cliquer sur le bouton Ajouter un masque tout en maintenant la touche Alt (Windows) ou Option (Mac OS) enfonce.

Cration dun masque laide des commandes Tout rvler et Tout masquer
1 Slectionnez lobjet masquer. 2 Pour afficher lobjet, choisissez la commande Modification > Masque > Tout rvler. Pour le masquer, choisissez

Modification > Masque > Tout masquer.


3 Dans le panneau Outils, slectionnez un outil de dessin bitmap. 4 Dfinissez les options de loutil dans linspecteur des proprits.

Si vous avez excut la commande Tout masquer, vous devez slectionner une couleur autre que le noir.
5 Dessinez sur le masque vide. Dans les zones dans lesquelles vous dessinez, lobjet masqu sous-jacent sera masqu

ou visible, selon le type de masque que vous avez appliqu.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Calques, masques et fondus

146

Cration dun masque laide des commandes Rvler la slection et Masquer la slection
1 Dans le panneau Outils, slectionnez loutil Baguette magique ou un outil de slection ou de lasso. 2 Slectionnez des pixels dans une image bitmap.

Image dorigine ; pixels slectionns laide de la Baguette magique

3 Pour afficher la zone dfinie par la slection de pixels, choisissez la commande Modification > Masque > Rvler la

slection. Pour la masquer, choisissez Modification > Masque > Masquer la slection.

Rsultats des commandes Rvler la slection et Masquer la slection

Un masque bitmap est appliqu laide de la slection de pixels. Vous pouvez modifier davantage le masque pour rvler ou masquer les pixels restants de lobjet masqu en utilisant les outils bitmap du panneau Outils.

A propos de limportation et de lexportation de masques de fusion Photoshop


Dans Photoshop, vous pouvez masquer les images laide de masques de fusion ou de calques associs. Fireworks vous permet dimporter des images employant des masques de calque tout en conservant la possibilit de les modifier. Les masques de fusion sont imports sous forme de masques bitmap. Les masques Fireworks peuvent tre galement exports vers Photoshop. Ils sont alors convertis en masques de fusion Photoshop. Si les objets masqus contiennent du texte que vous souhaitez pouvoir continuer modifier dans Photoshop, vous devez slectionner Privilgier le caractre modifiable lors de lexportation. Remarque : si le texte fait office dobjet masque, il est converti en objet bitmap et nest plus modifiable une fois import dans Photoshop.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Calques, masques et fondus

147

Association dobjets pour former un masque


Si vous regroupez plusieurs objets pour crer un masque, lobjet suprieur devient lobjet masque. Le type de lobjet suprieur dtermine le type du masque (vectoriel ou bitmap).
1 Tout en maintenant la touche Maj enfonce, cliquez sur au moins deux objets qui se chevauchent.

Vous pouvez slectionner les objets sur diffrents calques.


2 Choisissez Modification > Masque > Associer comme masque.

Slection et dplacement des masques


Slection de masques et dobjets masqus laide des vignettes de masques
Dans le panneau Calques, les vignettes vous permettent de slectionner et de modifier le masque ou les objets masqus uniquement, sans affecter les autres objets. Lorsque vous slectionnez la vignette du masque, licne de masque apparat en regard de cette dernire dans le panneau Calques. Linspecteur des proprits affiche les proprits du masque, quand vous pouvez les modifier.

Pour slectionner un masque, dans le panneau Calques, cliquez sur la vignette du masque. Pour slectionner un objet masqu, dans le panneau Calques, cliquez sur la vignette de lobjet masqu.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Calques, masques et fondus

148

Slection de masques et dobjets masqus laide de loutil Sous-slection


Utilisez loutil Sous-slection pour slectionner des masques et objets masqus individuels sur le document sans slectionner les autres composants du masque. Les proprits de lobjet slectionn sont visibles dans linspecteur des proprits.
Cliquez avec loutil Sous-slection sur lobjet dans la zone de travail.

Dplacement de masques et dobjets masqus


Vous pouvez repositionner les masques et les objets masqus. Vous pouvez les dplacer ensemble ou individuellement. Dplacement simultan dun masque et de ses objets masqus 1 A laide de loutil Pointeur, slectionnez le masque sur la zone de travail.
2 Faites glisser le masque vers son nouvel emplacement sans tirer la poigne de dplacement, moins que vous ne

souhaitiez dplacer lobjet masqu indpendamment du masque.

Dplacement isol de masques et dobjets masqus par rupture de leur lien 1 Dans le panneau Calques, cliquez sur licne de lien sur le masque. Cette opration permet de dissocier les masques des objets masqus pour les dplacer indpendamment.
2 Slectionnez la vignette dun masque ou dun objet masqu. 3 A laide de loutil Pointeur, faites glisser lobjet ou les objets sur la zone de travail.

Remarque : si plusieurs objets masqus sont slectionns, ils se dplacent tous simultanment.
4 Pour rtablir le lien entre les objets masqus et le masque, cliquez entre les vignettes de masque dans le

panneau Calques. Dplacement isol dun masque laide de sa poigne de dplacement 1 A laide de loutil Pointeur, slectionnez le masque sur la zone de travail.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Calques, masques et fondus

149

2 Slectionnez loutil Sous-slection, puis faites glisser la poigne de dplacement du masque vers le nouvel

emplacement.

Dplacement dobjets masqus indpendamment du masque laide de la poigne de dplacement 1 A laide de loutil Pointeur, slectionnez le masque sur la zone de travail.
2 Faites glisser la poigne de dplacement vers le nouvel emplacement.

Les objets sont dplacs sans modifier la position du masque.

Remarque : sil existe plusieurs objets masqus, tous les objets masqus se dplacent simultanment. Dplacement dobjets masqus indpendamment les uns des autres
Cliquez avec le pointeur de loutil Sous-slection sur lobjet pour le slectionner, puis faites-le glisser.

Cest la seule mthode permettant de slectionner et de dplacer un objet masqu sans affecter les autres objets masqus.

Modification des masques


En modifiant la position, la forme et la couleur dun masque, vous pouvez changer la visibilit des objets masqus. Vous pouvez galement changer le type dun masque et son application. En outre, les masques peuvent tre remplacs, dsactivs ou supprims. Lorsque vous modifiez un masque, les rsultats sont immdiatement visibles sur sa vignette dans le panneau Calques, mme si lobjet masque lui-mme nest pas visible sur la zone de travail. Les objets masqus peuvent galement tre modifis. Vous pouvez rorganiser les objets masqus sans dplacer le masque. Vous pouvez galement ajouter des objets masqus un groupe de masques existant.

Modification de la forme dun masque slectionn


Procdez de lune des manires suivantes :

Dessinez sur le masque bitmap avec nimporte quel outil de dessin bitmap.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Calques, masques et fondus

150

A laide de loutil Sous-slection, dplacez les points dun objet masque vectoriel.

Modification de la couleur dun masque slectionn


Pour les masques bitmap en niveaux de gris, utilisez les outils bitmap pour dessiner sur le masque en utilisant
diverses valeurs de niveaux de gris.

Pour les masques vectoriels en niveaux de gris, changez la couleur de lobjet masque.
Remarque : utilisez des couleurs claires pour afficher les objets masqus, et des couleurs sombres pour les cacher.

Ajout dobjets masques supplmentaires un masque


1 Choisissez Edition > Couper pour couper lobjet ou les objets slectionns ajouter. 2 Dans le panneau Calques, slectionnez la vignette de lobjet masqu. 3 Choisissez Edition > Coller en tant que masque. 4 Choisissez Ajouter lorsquun message vous demande si vous voulez remplacer le masque ou ajouter des objets.

Modification dun masque laide des outils de transformation


1 A laide de loutil Pointeur, slectionnez le masque sur la zone de travail. 2 Dans le sous-menu Modification > Transformer, slectionnez un outil de transformation ou une commande pour

appliquer une transformation au masque. Pour appliquer une transformation lobjet masque uniquement, dliez-le dabord des autres objets masques dans le panneau Calques, puis excutez la transformation.

Ajout dobjets masqus une slection masque


1 Choisissez Edition > Couper pour couper lobjet ou les objets slectionns ajouter. 2 Dans le panneau Calques, slectionnez la vignette de lobjet masqu. 3 Choisissez Edition > Coller dedans.

Remarque : lexcution de la commande Coller dedans sur un masque existant ne permet pas dafficher le contour et le fond de lobjet masque, moins que le masque dorigine ait t appliqu avec son contour et son fond.

Remplacement dun masque


1 Choisissez Edition > Couper pour couper lobjet ou les objets slectionns utiliser comme masque. 2 Dans le panneau Calques, slectionnez la vignette de lobjet masqu, puis choisissez Edition > Coller en tant que

masque.
3 Cliquez sur Remplacer lorsquun message vous demande si vous voulez remplacer ou ajouter le masque existant.

Dsactivation ou activation dun masque slectionn


La dsactivation dun masque le masque provisoirement.
Procdez de lune des manires suivantes :

Dans le menu Options du panneau Calques, slectionnez Dsactiver le masque ou Activer le masque. Choisissez Modification > Masque > Dsactiver le masque ou Modification > Masque > Activer le masque.
Une croix (X) rouge saffiche sur la vignette du masque lorsquil est dsactiv. Cliquez sur X pour activer le masque.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Calques, masques et fondus

151

Suppression dun masque slectionn


La suppression dun masque le supprime dfinitivement.
1 Procdez de lune des manires suivantes :

Dans le menu Options du panneau Calques, slectionnez Supprimer le masque. Choisissez Modification > Masque > Supprimer le masque. Faites glisser la vignette du masque vers licne de la corbeille, dans le panneau Calques.
2 Avant de supprimer le masque, indiquez si vous voulez appliquer ou annuler leffet du masque sur les objets

masqus :
Appliquer Permet de conserver les modifications que vous apportez dans lobjet. Le masque ne peut alors plus tre

modifi. Si lobjet masquer est un objet vectoriel, le masque et lobjet vectoriel sont convertis en une image bitmap unique.
Rejeter Permet dannuler tous les changements effectus et de rtablir la forme dorigine de lobjet. Annuler Annule la suppression et laisse le masque intact.

Changement du mode dapplication des masques


Lorsquun masque est slectionn, linspecteur des proprits permet de changer de mthode dapplication du masque. Si la fentre de linspecteur des proprits est rduite, cliquez sur la flche dextension pour afficher toutes les proprits. Par dfaut, les masques vectoriels sont appliqus laide de leur contour de trac. Afficher le fond et le contour du masque revient utiliser la fonction Coller dedans pour crer des masques.

Masque vectoriel appliqu laide du contour de son trac et avec loption Afficher le fond et le contour active

En appliquant un masque bitmap avec sa couche alpha, vous pouvez crer un masque qui ressemble un masque vectoriel appliqu avec le contour de son trac. La transparence de lobjet masque affecte la visibilit de lobjet masqu.

Masque bitmap appliqu avec sa couche alpha

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Calques, masques et fondus

152

Vous pouvez appliquer les masques vectoriels et bitmap avec leur aspect de niveaux de gris. La luminosit des pixels dun masque dtermine ce qui est rvl de lobjet masqu. Les pixels clairs rvlent lobjet masqu, tandis que les pixels foncs masquent limage pour laisser transparatre larrire-plan. Cette technique cre des effets intressants si lobjet masque contient un fond motifs ou un fond en dgrad.

Masque vectoriel avec un fond motifs appliqu avec son aspect de niveaux de gris

Vous pouvez convertir des masques vectoriels en masques bitmap. Cependant, linverse nest pas possible.

Application dun masque vectoriel laide du contour de son trac


Si un masque vectoriel est slectionn, cliquez sur Contour de trac dans linspecteur des proprits.

Affichage du fond et du contour dun masque vectoriel


Dans linspecteur des proprits, cliquez sur Afficher le fond et le contour si le masque vectoriel slectionn a t

appliqu en utilisant le contour de son trac.

Application dun masque bitmap laide de sa couche alpha


Si un masque bitmap est slectionn, cliquez sur Couche alpha dans linspecteur des proprits.

Application dun masque vectoriel ou bitmap laide de son aspect de niveaux de gris
Si un masque est slectionn, cliquez sur Aspect de niveaux de gris dans linspecteur des proprits.

Conversion dun masque vectoriel en masque bitmap


1 Dans le panneau Calques, slectionnez la vignette de lobjet masque. 2 Choisissez Modification > Aplatir la slection.

Fusion et transparence
La cration dune image composite est une technique consistant faire varier la transparence ou linteraction des couleurs de plusieurs objets qui se chevauchent. Dans Fireworks, les modes de fusion permettent de crer des images composites.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Calques, masques et fondus

153

A propos des modes de fusion


Lorsque vous slectionnez un mode de fusion, Fireworks lapplique aux objets slectionns dans leur intgralit. Les objets dun document ou dun calque unique peuvent avoir des modes de fusion diffrents de ceux des autres objets du document ou du calque. Lorsque des objets prsentant des modes de fondu diffrents sont associs, ces modes individuels sont remplacs par le mode de fondu du groupe. La dissociation des objets restaure le mode de fusion individuel de chacun des objets. Remarque : Les modes de fusion d'un symbole sont ignors lorsque vous quittez le mode d'dition de symbole.

Elments dun mode de fusion


Couleur de fusion Couleur laquelle est appliqu le mode de fusion. Opacit Degr de transparence auquel est appliqu le mode de fusion. Couleur de base Couleur des pixels sous la couleur de fusion. Couleur rsultante Rsultat de leffet du mode de fusion sur la couleur de base.

Modes de fusion
Les teintes, la saturation et les modes de mlange des couleurs sutilisent comme dans Photoshop. Pour plus d'informations sur les modes de fusion, voir l'article de Jim Babbage portant sur les modes de fusion.
Normal Napplique aucun mode de fusion. Dissoudre Choisit des couleurs de manire alatoire entre le calque actif et le calque darrire-plan pour crer leffet

de fusion.
Obscurcir Slectionne la couleur la plus dense, entre la couleur de fusion et la couleur de base, pour lutiliser comme

couleur rsultante. Ce mode remplace uniquement les pixels qui sont plus clairs que la couleur de fusion.
Produit Multiplie la couleur de base par la couleur de fusion et cre des couleurs plus fonces. Densit couleur + Assombrit la couleur de base de chaque couche pour reflter la couleur de fusion par augmentation

du contraste. Le mlange avec du blanc ne produit aucun rsultat.


Densit linaire + Vrifie chaque couche des calques actif et darrire-plan et assombrit la couleur darrire-plan pour reflter la couleur de fusion par rduction de la luminosit. Leffet global consiste assombrir limage. Le blanc tant la couleur neutre, le fusion de densit linaire + avec le blanc ne produit aucun effet. Eclaircir Slectionne la couleur la plus claire, entre la couleur de fusion et la couleur de base, pour lutiliser comme couleur rsultante. Ce mode remplace uniquement les pixels qui sont plus sombres que la couleur de fusion. Superposition Multiplie linverse de la couleur de fusion par la couleur de base, ce qui cre un effet de blanchiment. Densit couleur - Eclaircit la couleur de base pour reflter la couleur de fusion par rduction du contraste. Le mlange avec du noir ne produit aucun rsultat. Densit linaire - Vrifie chaque couche des calques actif et darrire-plan et claircit la couleur darrire-plan pour

reflter la couleur de fusion par augmentation de la luminosit. Leffet global consiste claircir limage. Le noir tant la couleur neutre, le fusion de densit linaire - avec le noir ne produit aucun effet.
Recouvrement Multiplie ou trame les couleurs, en fonction de la couleur de base. Les motifs ou les couleurs recouvrent

les pixels existants tout en conservant les tons clairs et les tons foncs de la couleur de base. La couleur de base nest pas remplace : elle est mlange la couleur de fusion pour reflter la luminosit ou lobscurit de la couleur dorigine.
Lumire douce Assombrit ou claircit les couleurs, en fonction de la couleur de fusion. Cela a le mme effet que si lon

dirigeait un spot de lumire diffuse sur limage. Si la couleur de fusion (source lumineuse) est plus claire que 50 % de

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Calques, masques et fondus

154

gris, limage est claircie comme avec loutil Densit -. Si la couleur de fusion (source lumineuse) est plus sombre que 50 % de gris, limage est assombrie comme avec loutil Densit +. Si vous utilisez du noir ou du blanc purs, vous obtenez une zone nettement plus sombre ou plus claire. Cependant, il ne sagit pas de noir ou blanc purs.
Lumire crue Multiplie ou trame les couleurs, en fonction de la couleur du de fondu. Cela a le mme effet que si lon

dirigeait un spot de lumire crue sur limage. Si la couleur de fusion (source lumineuse) est plus claire que 50 % de gris, limage est claircie comme avec loutil Superposition. Cette mthode est pratique pour ajouter des tons clairs une image. Si la couleur de fusion est plus sombre que 50 % de gris, limage est assombrie comme avec loutil Produit. Cette mthode est pratique pour ajouter des tons foncs une image. Si vous utilisez du noir ou du blanc purs, vous obtenez du noir ou du blanc purs.
Lumire vive Augmente le contraste par combinaison des effets des modes Densit couleur + et Densit couleur -. Si la couleur de fusion est plus sombre que le gris moyen, la lumire vive assombrit ou densifie limage en augmentant le contraste. Sinon, limage est claircie par rduction du contraste. Lumire linaire Ajuste la luminosit par combinaison des modes Densit linaire + et Densit linaire -. Si la couleur

de calque de fusion est plus sombre que le gris moyen, le mode Lumire linaire diminue la luminosit de limage. Dans le cas contraire, il laugmente.
Lumire ponctuelle Remplace la couleur en fonction de la couleur de fusion. Si la couleur de fusion est plus claire que

50 % de gris, les pixels qui sont plus sombres que la couleur de fusion sont remplacs. Si la couleur de fusion est plus sombre que 50 % de gris, les pixels qui sont plus clairs que la couleur de fusion sont remplacs.
Mlange net Rduit les couleurs dune image huit couleurs pures uniquement. Diffrence Soustrait la couleur de fusion de la couleur de base, ou inversement. La couleur la moins lumineuse est

soustraite de la couleur la plus lumineuse.


Exclusion Cre un effet similaire, quoiquavec un moindre contraste, celui du mode Diffrence. Si vous mlangez

avec du blanc, vous inversez les valeurs de la couleur de base. Le mlange avec du noir ne produit aucun rsultat.
Teinte Combine la valeur de teinte de la couleur de fusion avec la luminance et la saturation de la couleur de base afin

de crer la couleur rsultante.


Saturation Combine la saturation de la couleur de fusion avec la luminance et la teinte de la couleur de base afin de

crer la couleur rsultante.


Couleur Combine la teinte et la saturation de la couleur de fusion avec la luminance de la couleur de base afin de crer la couleur rsultante. Ce mode conserve les niveaux de gris qui permettent de colorer les images monochromes et de teinter les images en couleur. Luminosit Combine la luminance de la couleur de fusion avec la teinte et la saturation de la couleur de base. Inverser Inverse la couleur de base. Nuance Ajoute du gris la couleur de base. Effacer Supprime tous les pixels de la couleur de base, y compris ceux de limage darrire-plan.

Pour des informations gnrales et des exemples de modes de fusion (en particulier des modes de fusion de Photoshop), consultez le site Web suivant : www.pegtop.net/delphi/articles/blendmodes/ (en anglais).

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Calques, masques et fondus

155

Exemples de modes de fusion

Image dorigine

Normal

Produit

Superposition

Obscurcir

Eclaircir

Diffrence

Teinte

Saturation

Couleur

Luminosit

Inverser

Nuance

Effacer

Rglage de lopacit et application de modes de fusion


Vous pouvez rgler lopacit des objets slectionns et appliquer des modes de fusion laide de linspecteur des proprits ou du panneau Calques. Une opacit de 100 rend un objet totalement opaque. La valeur 0 (zro) donne un objet compltement transparent. Vous pouvez galement dfinir un mode de fusion et une opacit avant de dessiner un objet.

Dfinition dun mode de fusion et dun niveau dopacit avant de dessiner un objet
Aprs avoir slectionn loutil souhait dans le panneau Outils, dfinissez les options de fusion et dopacit dans

linspecteur des proprits avant de dessiner lobjet. Remarque : les options de fusion et dopacit ne sont pas disponibles avec tous les outils.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Calques, masques et fondus

156

Dfinition dun mode de fusion et dun niveau dopacit pour des objets existants
1 Des deux objets qui se chevauchent, slectionnez celui qui se trouve au-dessus. 2 Dans le menu contextuel Mode de fusion de linspecteur des proprits ou du panneau Calques, slectionnez une

option de fusion.
3 Slectionnez un paramtre avec le curseur contextuel Opacit ou saisissez une valeur dans la zone de texte.

Dfinition dun mode de fusion et dun niveau dopacit par dfaut appliquer aux objets mesure que vous les dessinez
1 Choisissez Slection > Dslectionner pour viter dappliquer un mode de fusion et une opacit par inadvertance. 2 Aprs avoir slectionn un outil de dessin vectoriel ou bitmap, slectionnez un mode de fusion et un niveau

dopacit dans linspecteur des proprits. Le mode de fusion et le niveau dopacit que vous slectionnez sont utiliss par dfaut pour tous les nouveaux objets que vous dessinez avec cet outil.

A propos du filtre dynamique Fond de couleur


Le filtre dynamique Couleur de remplissage Fireworks vous permet dajuster la couleur dun objet en modifiant lopacit et le mode de fusion de ce dernier. Ce filtre dynamique produit le mme effet que la superposition dun objet sur un autre objet utilisant un niveau dopacit et un mode de fusion diffrents.

Dernire mise jour le 12/5/2011

157

Chapitre 11 : Styles, symboles et adresses URL


Adobe Fireworks est dot de trois panneaux permettant de stocker et de rutiliser des styles, des symboles et des adresses URL. Les styles sont stocks dans le panneau Styles, les symboles du document actif dans le panneau Bibliothque de documents et les adresses URL dans le panneau URL. Par dfaut, ces trois panneaux sont placs dans le groupe de panneaux Actifs. Pour visionner un didacticiel vido sur lutilisation des styles et des symboles dans Fireworks, reportez-vous www.adobe.com/go/lrvid4033_fw_fr.

Styles
Vous pouvez enregistrer et rutiliser un ensemble prdfini dattributs de fond, de contour, de filtre et de texte en crant un style. Lorsque vous appliquez un style un objet, celui-ci reprend les caractristiques de ce style. Remarque : les objets bitmap reoivent uniquement les attributs de filtre dun style.

Fireworks possde de nombreux styles prdfinis. Vous pouvez ajouter, modifier ou supprimer des styles. Le DVD de Fireworks et le site Web dAdobe proposent de nombreux autres styles prdfinis que vous pouvez importer dans Fireworks. Vous pouvez galement exporter des styles et les partager avec dautres utilisateurs de Fireworks ou importer des styles depuis dautres documents Fireworks.

Application dun style


Le panneau Styles permet de crer ou denregistrer des styles et dappliquer toute la gamme de styles des objets, du texte, des groupes et des formes automatiques. Pour accder rapidement au sous-ensemble des styles dun document, utilisez le menu de styles actif de linspecteur des proprits.
1 Slectionnez les objets des zones de travail auxquels vous souhaitez appliquer un style. 2 Slectionnez la commande Fentre > Styles pour afficher le panneau Styles. 3 Slectionnez Document actif pour accder aux styles actuellement utiliss ou slectionnez un style prdfini dans

le menu contextuel pour accder aux styles Fireworks prdfinis. Remarque : si aucun style napparat dans un document, le panneau Styles reste vide tant que vous ne slectionnez pas un style prdfini.
4 Dans le panneau, cliquez sur le nom dun style.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Styles, symboles et adresses URL

158

Voir aussi
Exportation et importation de styles la page 159 Modification ou redfinition de styles la page 159 Rupture du lien vers un style la page 160

Cration et suppression de styles


Vous pouvez crer un style reposant sur les attributs de lobjet, groupe, texte ou forme automatique slectionn. Les attributs suivants peuvent tre enregistrs dans un style :

Type et couleur de fond, y compris des attributs de motifs, de textures et de dgrad de vecteur tels que langle, la
position et lopacit

Type et couleur de contour Filtres Attributs de texte tels que la police, la taille du point, le style (gras, italique ou soulign), lalignement, le lissage, le
crnage automatique, lchelle horizontale, lapproche et linterlignage Si vous supprimez un style personnalis, vous ne pouvez pas le rcuprer. Cependant, tout objet utilisant le style en conserve les attributs.

Cration dun style


1 Crez ou slectionnez un objet vectoriel, du texte, un groupe ou une forme automatique dot des attributs de

contour, remplissage, filtre ou texte souhaits.


2 Cliquez sur le bouton Nouveau style

de la partie infrieure du panneau Styles ou de linspecteur des proprits.

3 Slectionnez les attributs inclure dans le style.

Remarque : pour enregistrer dautres attributs de texte, utilisez loption Texte autre.
4 Nommez le style, puis cliquez sur OK.

Changement de nom dun style


1 Dans le panneau Styles, cliquez sur le nom dun style. 2 Dans le menu Options du panneau Styles, cliquez sur Renommer le style. 3 Entrez un nouveau nom pour le style, puis cliquez sur OK.

Cration dun nouveau style daprs un style existant


1 Appliquez le style existant lobjet slectionn. 2 Modifiez les attributs de cet objet. 3 Enregistrez les attributs en crant un style.

Suppression dun style


1 Dans le panneau Styles, cliquez sur le nom dun style.

Cliquez tout en maintenant la touche Maj enfonce pour slectionner plusieurs styles ; cliquez tout en maintenant la touche Ctrl (Windows) ou Cmde (Mac OS) enfonce pour slectionner plusieurs styles non contigus.
2 Cliquez sur le bouton Supprimer

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Styles, symboles et adresses URL

159

Pour rtablir l'tat prcdent de votre objet, procdez de lune des manires suivantes :

Annulez le style que vous avez appliqu. Modifiez les attributs manuellement et dfinissez-les tels qu'ils taient avant l'application du style.
Vous pouvez, si ncessaire, crer un style par dfaut qui applique les proprits par dfaut de Fireworks un objet. Crez un objet, slectionnez-le et assurez-vous qu'aucune des options de la bote de dialogue Nouveau style n'est slectionne. Ensuite, enregistrez-le en tant que nouveau style. Ce style par dfaut ou vide permet de rinitialiser les attributs d'un autre style, mais ne rtablit pas l'aspect prcdent de l'objet.

Modification ou redfinition de styles


La modification de styles permet dactiver ou de dsactiver des proprits spcifiques, notamment celles du fond ou du contour. La redfinition de styles, quant elle, permet de modifier les filtres quils contiennent. Lorsque vous modifiez ou redfinissez un style, tous les objets qui lui ont t appliqus sont automatiquement mis jour. Toutefois, vous pouvez rompre le lien entre des objets slectionns et des styles (voir la section Rupture du lien vers un style la page 160).

Voir aussi
Modification et personnalisation des filtres dynamiques la page 133

Modification dun style


1 Choisissez Slection > Dslectionner pour dslectionner tous les objets de la zone de travail. 2 Dans le panneau Styles, cliquez deux fois sur le nom dun style. 3 Dans la bote de dialogue Modifier le style, slectionnez ou dslectionnez des attributs. 4 Cliquez sur OK pour appliquer les modifications au style.

Redfinition dun style


1 Dans la zone de travail, slectionnez un objet qui utilise ce style. 2 Dans linspecteur des proprits, modifiez les filtres appliqus, puis cliquez sur le bouton Redfinir le style.

Remarque : lors de la redfinition dun style partir dun groupe, seuls les effets sont redfinis. Tous les attributs de chemin daccs sont ignors. Pour remplacer rapidement un style par un autre dans les styles du Document actif, faites glisser un style vers un autre style du panneau Styles tout en maintenant la touche Alt (Windows) ou Option (Mac OS) enfonce.

Exportation et importation de styles


Pour gagner du temps et dans un souci de cohrence, vous pouvez partager des styles ; pour cela, exportez-les pour quils puissent tre utiliss par dautres utilisateurs.

Enregistrement de la bibliothque de styles


Vous pouvez enregistrer les styles crs ou modifis sous forme de bibliothque de styles. Les noms des styles sont classs par ordre alphabtique. Il est galement possible dappliquer des styles des groupes, des formes automatiques et des symboles.
1 Dans le menu Options du panneau Styles, slectionnez loption Enregistrer la bibliothque de styles. 2 Entrez un nom et un emplacement pour la bibliothque de styles.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Styles, symboles et adresses URL

160

3 Cliquez sur Enregistrer.

Importation de styles
1 Dans le menu Options du panneau Styles, slectionnez loption Importer une bibliothque de styles. 2 Slectionnez une bibliothque de styles (*.stl) importer. La bibliothque de styles est disponible dans plusieurs

documents et plusieurs sessions de Fireworks.

Chargement des styles dans le document actif


1 Dans le menu Options du panneau Styles, cliquez sur Charger un style. 2 Slectionnez une bibliothque de styles (*.stl) charger dans le document actif. Les styles chargs sont disponibles

dans le document actif.

Modification de la taille dune icne de style


Pour modifier la taille des icnes daperu des styles, slectionnez Grandes icnes dans le menu Options du

panneau Styles, afin dalterner entre la grande et la petite taille daperu.

Copie dattributs dun objet dans un autre sans application de style


1 Slectionnez lobjet dont vous voulez copier les attributs. 2 Choisissez Edition > Copier. 3 Dslectionnez lobjet original, puis slectionnez les objets auxquels vous voulez appliquer les nouveaux attributs. 4 Choisissez Edition > Coller les attributs.

Rupture du lien vers un style


Vous pouvez rompre le lien tabli entre un objet et le style qui lui est appliqu. Cet objet conserve les mmes attributs mais nest plus modifi en cas de changement de styles.
1 Slectionnez lobjet sur lequel le style est appliqu. 2 Dans la partie infrieure droite de linspecteur des proprits, cliquez sur le bouton Rompre le lien avec le style.

Si la fentre de linspecteur des proprits est rduite, choisissez loption Rompre le lien avec le style dans le menu du panneau Styles.

Suppression des remplacements de style des objets


1 Slectionnez les objets modifis suite lapplication dun style. 2 Dans le menu Options du panneau Styles, cliquez sur Effacer les remplacements.

Slection des styles inutiliss dans le document actif


Dans le menu Options du panneau Styles, choisissez Slectionner les styles inutiliss.

Duplication dun style


1 Dans le panneau Styles, cliquez sur le nom dun style. 2 Dans le menu Options du panneau Styles, cliquez sur Dupliquer un style.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Styles, symboles et adresses URL

161

Symboles
Dans Fireworks, les lments graphiques rutilisables sont appels symboles. Dans Fireworks, trois types de symboles sont disponibles : graphique, animation et bouton. Lorsque vous modifiez lobjet symbole dorigine, les occurrences copies changent automatiquement afin de reflter le symbole modifi (sauf si vous rompez le lien entre les deux). Les symboles sont galement pratiques pour crer des boutons et animer des objets sur plusieurs tats. Pour plus dinformations sur les symboles, voir Flux de production avec les styles et les symboles dans le Centre des dveloppeurs.

Voir aussi
Cration de symboles de bouton la page 194 Cration de symboles danimation la page 219

Cration dun symbole


Vous pouvez crer un symbole partir dun objet, dun bloc de texte ou dun groupe, puis le stocker dans longlet Bibliothque commune du panneau Actifs. Vous pouvez ensuite, partir de cet onglet, modifier le symbole et linsrer dans vos documents.

Cration dun symbole partir dun objet slectionn


1 Slectionnez lobjet, puis choisissez Modification > Symbole > Convertir en symbole. 2 Dans la zone Nom, entrez le nom du symbole. 3 Slectionnez un type de symbole. 4 Pour effectuer une mise lchelle du symbole sans distorsion de sa gomtrie, slectionnez loption Activer les

repres de mise lchelle en 9 tranches (voir la section Mise lchelle en 9 tranches la page 50).
5 Pour stocker le symbole afin de lutiliser dans diffrents documents, slectionnez loption Enregistrer dans la

bibliothque commune.
6 Cliquez sur OK pour enregistrer le symbole.

Lobjet slectionn devient une occurrence du symbole et linspecteur des proprits affiche les options du symbole.

Cration dun symbole ex nihilo


1 Procdez de lune des manires suivantes :

Choisissez Edition > Insertion > Nouveau symbole. Dans le menu Options du panneau Bibliothque de documents, cliquez sur Nouveau symbole.
2 Slectionnez un type de symbole. 3 Pour utiliser des repres de mise lchelle 9 tranches pour le symbole, slectionnez loption Activer les repres de

mise lchelle en 9 tranches, puis cliquez sur OK.


4 Crez le symbole laide des outils du panneau Outils.

Placement dune occurrence de symbole


Faites glisser un symbole du panneau Bibliothque de documents vers le document actif.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Styles, symboles et adresses URL

162

Occurrence dun symbole dans la zone de travail

Modification dun symbole et de toutes ses occurrences


Lorsque vous modifiez un symbole, toutes les occurrences associes sont automatiquement mises jour pour reflter les modifications apportes. Toutefois, certaines proprits sont indpendantes. Pour plus dinformations, reportezvous la section Modification doccurrences de symboles spcifiques la page 163. Lorsque vous fractionnez le symbole, les graphiques sont groups par dfaut. Dissociez les graphiques (boutons, barre de dfilement ou autres) pour les modifier. Vous pourrez ensuite grouper nouveau les graphiques et les convertir en symbole. Si vous ne groupez pas les graphiques avant la conversion, les graphiques composant le symbole deviennent modifiables.

Modification dun symbole


1 Pour accder au mode de modification de symboles, procdez de lune des manires suivantes :

Dans la zone de travail, cliquez deux fois sur une occurrence de symbole. Slectionnez une occurrence, puis choisissez Modification > Symbole > Modifier le symbole. Dans le panneau Bibliothque de documents, cliquez deux fois sur une icne de symbole. (Symboles danimation uniquement) Cliquez sur le bouton Modifier dans la bote de dialogue Animer.
2 Modifiez le symbole selon vos besoins.

Remarque : si loption Mise lchelle en 9 tranches nest pas active pour le symbole slectionn, vous pouvez modifier le symbole dans le contexte lui-mme. Vous pouvez choisir la commande Modification > Symbole > Modifier en place. Utilisez des repres de mise lchelle en 9 tranches pour empcher toute distorsion lorsque vous redimensionnez le symbole (voir la section Mise lchelle en 9 tranches la page 50).

Passage du mode ddition de symboles au mode ddition de pages


Lorsque vous modifiez un symbole, le document passe en mode de modification de symboles. Ce mode estompe les autres objets de la zone de travail, ce qui vous permet de modifier rapidement les symboles en visualisant la page entire ( lexception des symboles utilisant la mise lchelle en 9 tranches, qui apparaissent seuls). Pour alterner entre le mode ddition de symboles et le mode ddition de pages, procdez de lune des manires suivantes :

Dans la zone de travail, cliquez deux fois sur une zone vide. Dans le plateau situ en haut du panneau du document, cliquez sur licne reprsentant une page ou sur la flche
arrire. (Si le symbole est imbriqu, le plateau donne galement accs au symbole le contenant.)

Affectation dun nouveau nom un symbole


1 Dans le panneau Bibliothque de documents, cliquez deux fois sur une icne de symbole.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Styles, symboles et adresses URL

163

2 Dans la bote de dialogue Convertir en symbole, modifiez le nom, puis cliquez sur OK.

Duplication dun symbole


1 Dans le panneau Bibliothque de documents, slectionnez le symbole. 2 Dans le menu Options du panneau Bibliothque de documents, cliquez sur Dupliquer. 3 Modifiez le nom et le type du doublon si ncessaire et cliquez sur OK.

Modification du type de symbole


1 Cliquez deux fois sur le nom du symbole dans la bibliothque. 2 Slectionnez une autre option de type de symbole.

Slection de tous les symboles inutiliss dans le panneau Bibliothque de documents


Dans le menu Options du panneau Bibliothque de documents, cliquez sur Slectionner les lments inutiliss.

Suppression dun symbole et de toutes ses occurrences


Dans le panneau Bibliothque de documents, faites glisser le symbole jusqu licne de la corbeille.

Permutation dun symbole


1 Dans la zone de travail, cliquez avec le bouton droit de la souris sur un symbole, puis slectionnez Permuter le

symbole.
2 Dans la bote de dialogue Permuter le symbole, slectionnez un autre symbole parmi ceux disponibles dans la

bibliothque de documents, puis cliquez sur OK.

Modification doccurrences de symboles spcifiques


Lorsque vous cliquez deux fois sur une occurrence pour la modifier, cest en fait le symbole lui-mme que vous modifiez. Pour modifier uniquement loccurrence active, vous devez rompre le lien entre cette occurrence et le symbole. Cela supprime dfinitivement la relation entre les deux. Aucune des modifications futures apportes au symbole naffectera loccurrence prcdente. Les symboles de bouton sont associs plusieurs fonctions permettant de conserver la relation entre symbole et instance, tout en affectant un texte et une adresse URL uniques chaque occurrence. Pour adapter les comportements JavaScript aux symboles de composant, modifiez les valeurs correspondantes dans le panneau Proprits du symbole. Pour ajouter des proprits personnalisables ce panneau, vous devez modifier le fichier JavaScript associ au symbole. Remarque : Les attributs de hauteur et de largeur ne peuvent pas tre dfinis pour un composant utilisant JavaScript.

Rupture de liens de symboles


1 Slectionnez loccurrence. 2 Choisissez Modification > Symbole > Sparer.

Loccurrence slectionne devient un groupe. Le symbole qui saffiche dans le panneau Bibliothque de documents nest plus associ ce groupe. Aprs sparation du symbole, une occurrence antrieure dun bouton perd les caractristiques du symbole de son bouton, et une occurrence antrieure de lanimation perd les caractristiques de son symbole danimation.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Styles, symboles et adresses URL

164

Modification dune instance sans rupture du lien au symbole


1 Slectionnez loccurrence. 2 Modifiez les proprits de loccurrence dans linspecteur des proprits.

Vous pouvez modifier ces proprits sans que cela naffecte le symbole et les autres occurrences :

Mode de fusion Opacit Filtres Largeur et hauteur


Coordonnes x et y

Cration et utilisation de symboles de composant


Les symboles de composant sont des symboles graphiques que vous pouvez mettre lchelle de manire intelligente tout en leur affectant des attributs spcifiques laide dun fichier JavaScript (JSF). Ils sont galement appels symboles enrichis . Si vous modifiez une occurrence dans le panneau Proprits, cela affecte non seulement le symbole, mais aussi toutes les autres occurrences. En revanche, si vous modifiez des paramtres dans le panneau Proprits du symbole (Fentre > Proprits du symbole), cela affecte uniquement loccurrence slectionne. Fireworks comprend une bibliothque de symboles de composant prdfinis ; vous pouvez personnaliser ces derniers pour reproduire laspect dun site Web ou dune interface utilisateur spcifique.

Ajout dun symbole de composant un document


1 Dans le menu Fentre, slectionnez Bibliothque commune. 2 Pour utiliser un symbole, faites-le glisser depuis le panneau Bibliothque commune pour le dposer dans la zone

de travail Fireworks.

Ajustement des proprits des symboles de composant


1 Dans la zone de travail, slectionnez le symbole souhait. 2 Dans le panneau Proprits du symbole (Fentre > Proprits du symbole), vous pouvez rgler des paramtres tels

que ltat, ltiquette et la couleur. Pour crer des boutons interactifs destins des prototypes HTML et logiciels, reportez-vous la section Tranches interactives la page 178.

Cration dun symbole de composant


Pour plus de dtails, consultez l'article Using rich symbols in Fireworks (Utilisation de symboles enrichis dans Fireworks), ou le didacticielwww.wonderhowto.com.
1 Crez un objet dont vous voulez personnaliser les attributs.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Styles, symboles et adresses URL

165

La couleur de puce et le numro de puce peuvent tre des options personnalisables de ce symbole.

2 Lorsque vous crez lobjet, personnalisez les noms des fonctions modifiables ; pour cela, saisissez un nom dans le

panneau Calques. Vous devez utiliser le nom Label pour le calque de texte en conservant le L majuscule. En effet, ce nom est utilis dans le fichier JavaScript. Remarque : pour viter les erreurs JavaScript, omettez les espaces dans les noms de fonctions. Par exemple, utilisez tiquette_numro et non tiquette de numro .
3 Slectionnez lobjet, puis choisissez Modification > Symbole > Convertir en symbole. 4 Dans la zone Nom, entrez le nom du symbole. 5 Slectionnez Graphique comme type de symbole, slectionnez ensuite Enregistrer dans la bibliothque commune,

puis cliquez sur OK.


6 A linvite, enregistrez le nouveau symbole dans le dossier Symboles personnaliss par dfaut, ou crez un autre

dossier au mme niveau que le dossier par dfaut. Remarque : vous devez enregistrer les symboles de composant dans un dossier de la bibliothque commune. Une fois enregistr, le symbole est supprim de la zone de travail et figure dans la bibliothque commune.
7 Slectionnez Crer le script du symbole dans le menu Commandes. 8 Cliquez sur le bouton Parcourir dans le coin suprieur droit du panneau, puis recherchez le fichier PNG de

symboles. Lemplacement par dfaut est le suivant :

Pour Microsoft Windows XP : <paramtres utilisateur>\Application Data\Adobe\Fireworks CS5\Common


Library\Symboles personnaliss

Pour Windows Vista : \Utilisateurs\<nom dutilisateur>\AppData\Roaming\Adobe\Fireworks CS5\Common


Library\Symboles personnaliss

Pour Mac OS : <nom dutilisateur>/Application Support/Adobe/Fireworks CS5/Common Library/Symboles


personnaliss
9 Cliquez sur le bouton Plus pour ajouter un nom dlment. 10 Dans la zone Nom de l'lment, slectionnez le nom de l'lment personnaliser dans le menu. 11 Dans la zone Attribut, slectionnez le nom de lattribut personnaliser. Par exemple, pour personnaliser le texte de

ltiquette, slectionnez textChars. Remarque : pour plus dinformations sur ces options dattribut, reportez-vous lextension de Fireworks.
12 Dans le champ Nom de proprit, saisissez le nom de la proprit personnalisable, par exemple Etiquette ou

Numro . Il sagit du nom de proprit qui apparat dans le panneau Proprits du symbole.
13 Dans le champ Valeur, entrez une valeur par dfaut pour la proprit utilise lors de linsertion initiale dune

occurrence du symbole dans un document.


14 Ajoutez des lments supplmentaires au fur et mesure de vos besoins. 15 Cliquez sur Enregistrer pour enregistrer les options slectionnes et crer un fichier JavaScript.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Styles, symboles et adresses URL

166

16 Dans le menu Options du panneau Bibliothque commune, cliquez sur Recharger pour recharger le nouveau

symbole. Une fois le fichier JavaScript cr, vous pouvez crer une instance en faisant glisser le symbole vers la zone de travail. Vous pourrez modifier ultrieurement ses attributs dans le panneau Proprits du symbole. Remarque : si vous supprimez ou renommez un objet rfrenc par le script, le panneau Proprits du symbole signale la prsence derreurs.

Enregistrement dun symbole existant en tant que symbole de composant


1 Slectionnez un symbole dans le panneau Bibliothque de documents. 2 Dans le menu Options du panneau Bibliothque de documents, cliquez sur Enregistrer dans la bibliothque

commune.
3 Crez un fichier JavaScript pour contrler les proprits du symbole.

Cration de paramtres de symbole modifiables avec JavaScript


Lorsque vous enregistrez un symbole de composant, Fireworks enregistre un fichier PNG dans les dossiers par dfaut suivants :

(Windows XP) <paramtres utilisateur>\Application Data\Adobe\Fireworks CS5\Common Library\Symboles


personnaliss

(Windows Vista) \Utilisateurs\<nom dutilisateur>\AppData\Roaming\Adobe\Fireworks CS5\Common


Library\Symboles personnaliss

(Mac OS) <nom dutilisateur>/Application Support/Adobe/Fireworks CS5/Common Library/Symboles


personnaliss Pour crer un symbole de composant, vous devez crer un fichier JavaScript portant le mme nom que le symbole et lenregistrer au mme emplacement avec lextension .JSF. Par exemple, mybutton.graphic.png est associ un fichier JavaScript appel mybutton.jsf. Le panneau Crer le script du symbole permet aux utilisateurs qui ne sont pas des programmeurs daffecter des attributs de symboles simples et de crer le fichier JavaScript automatiquement. Pour ouvrir ce panneau, slectionnez Crer le script du symbole dans le menu Commandes. Cration du fichier JavaScript Vous devez dfinir les deux fonctions suivantes dans le fichier JavaScript afin de pouvoir ajouter des paramtres modifiables au symbole :

Fonction setDefaultValues() : elle dfinit les paramtres qui peuvent tre modifis ainsi que leurs valeurs par
dfaut.

Fonction applyCurrentValues() : elle applique les valeurs entres dans le panneau Proprits du symbole au
symbole graphique. Lexemple suivant illustre un fichier .JSF permettant de crer un symbole personnalis :

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Styles, symboles et adresses URL

167

function setDefaultValues() { var currValues = new Array(); //to build symbol properties currValues.push({name:"Selected", value:"true", type:"Boolean"}); Widget.elem.customData["currentValues"] = currValues; } function applyCurrentValues() { var currValues = Widget.elem.customData["currentValues"]; // Get symbol object name var Check = Widget.GetObjectByName("Check"); Check.visible = currValues[0].value; } switch (Widget.opCode) { case 1: setDefaultValues(); break; case 2: applyCurrentValues(); break; default: break; } This sample JavaScript shows a component symbol that can change colors: function setDefaultValues() { var currValues = new Array(); //Name is the Parameter name that will be displayed in the Symbol Properties Panel //Value is the default Value that is displayed when Component symbol loads first time. In this case, Blue will be the default color when the Component symbol is used. //Color is the Type of Parameter that is displayed. Color will invoke the Color Popup box in the Symbol Properties Panel. currValues.push({name:"BG Color", value:"#003366", type:"Color"}); Widget.elem.customData["currentValues"] = currValues; } function applyCurrentValues() { var currValues = Widget.elem.customData["currentValues"]; //color_bg is the Layer name in the PNG that will change colors var color_bg = Widget.GetObjectByName("color_bg"); color_bg.pathAttributes.fillColor = currValues[0].value; } switch (Widget.opCode) { case 1: setDefaultValues(); break; case 2: applyCurrentValues(); break; default: break; }

Afin de mieux comprendre la faon dont le fichier .JSF peut tre utilis pour personnaliser les proprits du symbole, explorez les exemples de composants inclus au logiciel.

Importation et exportation de symboles


Le panneau Bibliothque de documents permet de stocker les symboles que vous crez ou importez dans le document actif. Le panneau Bibliothque de documents est propre au document actif ; pour utiliser des symboles contenus dans la bibliothque dun document diffrent, vous pouvez les importer, les exporter, les copier ou les faire glisser.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Styles, symboles et adresses URL

168

Importation dun ou plusieurs symboles prpars partir dune bibliothque de symboles Fireworks
Vous pouvez importer des symboles danimation, des symboles graphiques et des symboles de boutons, ainsi que des barres de navigation et des thmes aux symboles multiples.
1 Ouvrez un document Fireworks. 2 Slectionnez un dossier dans le panneau Bibliothque commune.

Vous pouvez galement importer des symboles provenant de fichiers PNG de bibliothques pralablement exports et placs sur votre disque dur, un CD ou un rseau.

Importation de symboles dun autre fichier dans le document actif


1 Dans le menu Options du panneau Bibliothque de documents, cliquez sur Importer des symboles. 2 Naviguez jusquau dossier PNG qui contient le fichier, slectionnez-le, puis cliquez sur Ouvrir. 3 Slectionnez les symboles importer, puis cliquez sur Importer.

Les symboles imports saffichent dans le panneau Bibliothque de documents.

Importation dun symbole par glisser-dposer ou par copier-coller


Procdez de lune des manires suivantes :

A partir du document contenant le symbole, faites glisser loccurrence dun symbole vers le document
de destination.

Copiez loccurrence dun symbole dans le document contenant le symbole, puis collez-le dans le document de
destination. Le symbole est import dans le panneau Bibliothque de documents du document de destination et conserve un lien avec le symbole du document original.

Exportation de symboles
1 Dans le menu Options du panneau Bibliothque de documents, cliquez sur Exporter des symboles. 2 Slectionnez les symboles exporter, puis cliquez sur Exporter. 3 Slectionnez un emplacement, entrez un nom pour le fichier de symboles, puis cliquez sur Enregistrer.

Fireworks enregistre les symboles dans un seul fichier PNG.

Mise jour de symboles et doccurrences exports dans plusieurs documents


Les symboles imports restent lis leur document de symbole dorigine. Vous pouvez modifier le document de symbole dorigine puis mettre jour les documents cibles pour quils refltent vos modifications.
1 Dans le document dorigine, cliquez deux fois sur une occurrence, ou slectionnez une instance et choisissez

Modification > Symbole > Modifier le symbole.


2 Modifiez le symbole. 3 Enregistrez le fichier. 4 Dans le document dans lequel le symbole a t import, slectionnez le symbole dans le panneau Bibliothque de

documents.
5 Dans le menu Options du panneau Bibliothque de documents, cliquez sur Mettre jour.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Styles, symboles et adresses URL

169

Remarque : pour mettre jour tous les symboles imports, slectionnez tous les symboles dans le panneau Bibliothque de documents, puis slectionnez Mettre jour.

Cration de symboles imbriqus


On dit dun symbole cr dans un autre quil est imbriqu.
1 Crez un objet sur une page laide de loutil Vecteur, un rectangle, par exemple. 2 Cliquez avec le bouton droit de la souris sur le rectangle et slectionnez Convertir en symbole. 3 Dans la bote de dialogue Convertir en symbole, procdez de la manire suivante : a Attribuez un nom au symbole, Symbole A, par exemple. b Si vous avez lintention de lui appliquer la mise lchelle en 9 tranches, slectionnez Activer les repres de mise

lchelle 9 tranches.
4 Cliquez deux fois sur licne + au centre du symbole. 5 Rptez les tapes 1 4 pour crer un autre symbole, Symbole B. Parce que vous lavez cr dans le Symbole A, il

est imbriqu dans celui-ci. Remarque : Libre vous de crer plusieurs symboles imbriqus.

Mise lchelle en 9 tranches de symboles imbriqus


Vous pouvez crer des symboles au sein dun symbole. Il est possible de mettre individuellement lchelle ces symboles, qui sont dits imbriqus. Avant de procder la mise lchelle en 9 tranches dun symbole, effectuez les oprations suivantes.

Lorsque vous crez le symbole, slectionnez Activer les repres de mise lchelle 9 tranches. Veillez activer le mode de modification du symbole mettre lchelle. Pour ce faire, cliquez deux fois sur licne
+ du symbole le plus imbriqu. Lorsque vous transformez des symboles imbriqus en leur appliquant une mise lchelle en 9 tranches, vous pouvez intervenir sur chacun deux individuellement. Imaginons par exemple trois niveaux dimbrication : le symbole A se trouve dans le symbole B, qui se trouve dans le symbole C. Vous pouvez mettre lchelle les symboles A (le plus imbriqu) et B (intermdiaire) par rapport leurs repres de mise lchelle en 9 tranches. Pour ce faire, veillez dabord activer le mode de modification du symbole le plus imbriqu. En mode de modification en place, seul le panneau Bibliothque permet de visualiser les repres de mise lchelle en 9 tranches des symboles imbriqus. Cliquer deux fois sur un symbole ne permet pas dafficher ces repres sur la zone de travail.

Activation de la mise lchelle en 9 tranches dun symbole existant


1 Activez laffichage dans lequel vous avez cr le symbole. 2 Slectionnez le symbole dans le panneau Bibliothque de documents et cliquez sur Proprits du symbole.

Remarque : Si ce panneau nest pas visible, slectionnez Fentre > Bibliothque de documents pour lafficher.
3 Dans la bote de dialogue Convertir en symbole, slectionnez Activer les repres de mise lchelle 9 tranches.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Styles, symboles et adresses URL

170

URL
Laffectation dune adresse URL un objet Web cre un lien vers un fichier tel quune page Web. Vous pouvez affecter des URL des tranches, des zones sensibles et des boutons. Pour stocker, modifier et organiser des URL en vue de leur rutilisation, crez une bibliothque dadresses URL dans le panneau URL. Par exemple, si votre site Web contient plusieurs boutons de navigation permettant de revenir la page daccueil, ajoutez lURL de cette dernire au panneau URL. Affectez ensuite cette URL chaque bouton de navigation en la slectionnant dans la bibliothque dURL. Utilisez la fonction Rechercher et remplacer pour changer une URL dans plusieurs documents (voir la section Recherche et remplacement la page 297). Les bibliothques dURL sont disponibles pour lensemble des documents de Fireworks et sont enregistres entre deux sessions.

A propos des URL absolues et relatives


Vous pouvez entrer une URL absolue ou relative dans le panneau URL.

Pour lier une page Web situe hors de votre site Web, utilisez une URL absolue. Pour lier une page Web de votre site, vous pouvez utiliser lune ou lautre.
Les URL absolues sont des adresses URL compltes incluant le protocole de serveur (gnralement http:// pour les pages Web). Par exemple, http://www.adobe.com/support/fireworks est lURL absolue de la page Web du Centre dassistance de Fireworks. Les URL absolues restent prcises, quel que soit lemplacement du document source, mais le lien est rompu si le document cible est dplac. Les URL relatives sont indiques par rapport au dossier contenant le document source. Les URL relatives sont gnralement les plus simples utiliser pour tablir un lien avec un fichier plac dans le mme dossier que le document actif. Les exemples suivants prsentent la syntaxe de navigation dURL relatives :

fichier.htm tablit un lien avec un fichier situ dans le mme dossier que le document source. ../../fichier.htm tablit un lien avec un fichier situ dans un dossier plac deux niveaux au-dessus du dossier
contenant le document source. Chaque signe ../ reprsente un niveau.

htmldocs/fichier.htm tablit un lien vers un fichier situ dans un dossier nomm htmldocs, figurant dans le dossier
contenant le document source.

Lien vers des pages dans un document Fireworks


Dans un document Fireworks, vous pouvez crer des liens entre plusieurs pages en utilisant des URL pour chaque page. Le menu contextuel Lien, prsent dans linspecteur des proprits et dans le panneau URL, contient la liste des adresses URL de chaque page dun document. Slectionnez lune de ces URL pour tablir le lien la page correspondante.

Affectation dune autre extension que .htm aux URL de page par dfaut
1 Le document tant ouvert, choisissez Fichier > Exporter. 2 Slectionnez Documents HTML et Images. 3 Cliquez sur le bouton Options. 4 Dans longlet Gnral, slectionnez une extension de fichier dans le menu contextuel Extension, puis cliquez

sur OK.
5 Dans la bote de dialogue Exporter, cliquez sur Annuler.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Styles, symboles et adresses URL

171

Affectation dune URL un objet Web


1 Dans le panneau URL, entrez lURL dans la zone de texte URL active. 2 Cliquez sur le bouton Ajouter lURL active la bibliothque (+) pour ajouter lURL la bibliothque dURL. 3 Slectionnez un objet Web. 4 Slectionnez lURL dans le panneau daperu des URL.

Cration dune bibliothque dURL


Les bibliothques regroupent les URL lies, ce qui en facilite laccs. Vous pouvez enregistrer les URL dans la bibliothque dURL par dfaut (URLs.htm) ou dans une bibliothque que vous avez cre. Vous pouvez galement importer les URL dun document HTML existant et les regrouper dans une bibliothque. La bibliothque URLs.htm et les nouvelles bibliothques que vous crez se trouvent dans le dossier Adobe/Fireworks CS5/URL Libraries, dans votre dossier de profil utilisateur Application Data (Windows) ou Application Support (Mac OS). Pour plus dinformations sur lemplacement de ces dossiers, reportez-vous la section Utilisation des fichiers de configuration la page 316.

Cration dune bibliothque dURL


1 Dans le menu Options du panneau URL, cliquez sur Nouvelle bibliothque dURL. 2 Entrez le nom de la bibliothque dans la zone, puis cliquez sur OK.

Ajout dune nouvelle URL une bibliothque dURL


1 Dans le menu contextuel Bibliothque, slectionnez une bibliothque. 2 Entrez une URL dans la zone Lien. 3 Cliquez sur le bouton Plus (+).

Ajout simultan dune URL la bibliothque et affectation de cette URL un objet Web
1 Slectionnez lobjet. 2 Pour entrer lURL, excutez lune des actions suivantes :

Dans le menu Options du panneau URL, cliquez sur Ajouter une URL, entrez une URL absolue ou relative, puis
cliquez sur OK.

Entrez une URL dans la zone Lien, puis cliquez sur le bouton Plus (+).
LURL apparat dans le panneau daperu des URL.

Ajout dURL utilises une bibliothque dURL


1 Dans le menu contextuel Bibliothque, slectionnez une bibliothque. 2 Dans le menu Options du panneau URL, slectionnez Ajouter les URL utilises la bibliothque.

Suppression dune URL slectionne du panneau daperu des URL


Cliquez sur le bouton Supprimer lURL de la bibliothque

dans la partie infrieure du panneau URL.

Suppression de la bibliothque de toutes les adresses URL inutilises


1 Dans le menu Options du panneau URL, slectionnez Effacer les URL inutilises.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Styles, symboles et adresses URL

172

2 Cliquez sur OK.

Modification des URL


Vous pouvez modifier une occurrence dURL unique, ou encore appliquer une modification toutes les occurrences.
1 Slectionnez lURL dans le panneau daperu des URL. 2 Dans le menu Options du panneau URL, cliquez sur Modifier une URL. 3 Modifiez ladresse URL. 4 Pour mettre jour ce lien dans le document entier, slectionnez loption Changer toutes les occurrences dans le

document.

Importation et exportation dadresses URL


Vous pouvez exporter des URL, puis les importer dans un autre document Fireworks. Vous pouvez galement importer toutes les URL dans un document HTML existant.

Exportation dURL
1 Dans le menu Options du panneau URL, cliquez sur Exporter des URL. 2 Indiquez un nom de fichier, puis cliquez sur Enregistrer.

Un fichier HTML est cr ; il contient les URL exportes.

Importation dURL
1 Dans le menu Options du panneau URL, cliquez sur Importer des URL. 2 Slectionnez un fichier HTML, puis cliquez sur Ouvrir.

Toutes les URL de ce fichier sont importes.

Dernire mise jour le 12/5/2011

173

Chapitre 12 : Tranches, survols et zones sensibles


Cration et modification de tranches
Les tranches sont les lments de base de linteractivit dans Adobe Fireworks. Les tranches sont des objets Web qui existent sous forme de code HTML. Vous pouvez les afficher, les slectionner et les renommer via le calque Web dans le panneau Calques. Le dcoupage consiste diviser un document Fireworks en plusieurs segments dont chacun sera export dans un fichier distinct. Pendant lexportation, Fireworks cre un fichier HTML contenant le code des tables permettant de rassembler le graphique dans un navigateur.

Le dcoupage consiste diviser un document en plusieurs segments dont chacun sera export dans un fichier distinct.

Le dcoupage dune image prsente principalement trois avantages :


Optimisation des images Pour un tlchargement plus rapide. Accroissement de linteractivit Les images peuvent rpondre aux vnements de souris. Simplification des mises jour Pour les sections de pages Web modifies frquemment (photos et noms dune page consacre lemploy du mois, par exemple).

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Tranches, survols et zones sensibles

174

Cration de tranches rectangulaires


Pour crer des tranches rectangulaires, dessinez un trac laide de loutil Tranche ou insrez une tranche en prenant comme base un objet slectionn. Utilisez les repres de dcoupe (lignes qui stendent partir de lobjet tranche) pour dfinir les limites des fichiers dimage qui seront obtenus par fractionnement du document lexportation.

Trac dun objet tranche rectangulaire


1

Slectionnez loutil Tranche

2 Faites glisser le pointeur pour dessiner lobjet tranche.

Remarque : pour rgler la position dune tranche mesure que vous faites glisser le pointeur pour la dessiner, faites glisser la tranche vers un autre emplacement de la zone de travail tout en maintenant la barre despace enfonce. Relchez la barre despace pour continuer dessiner la tranche.

Cration dune tranche rectangulaire daprs un objet slectionn


1 Slectionnez la commande Edition > Insrer > Tranche rectangulaire. La tranche est un rectangle dont la zone

comprend les bords les plus extrieurs de lobjet slectionn.


2 Si plusieurs objets sont slectionns, slectionnez loption Simple pour crer un seul objet tranche couvrant tous les

objets slectionns ou Multiple pour crer un objet tranche par objet slectionn.

Cration de tranches non rectangulaires


Pour crer des tranches non rectangulaires, utilisez loutil Tranche polygonale. Les tranches non rectangulaires sont pratiques pour essayer deffectuer de faon interactive une association une image non rectangulaire.

Dessin dobjets tranches polygonaux


1 Slectionnez loutil Tranche polygonale

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Tranches, survols et zones sensibles

175

2 Cliquez pour placer les points vectoriels du polygone. Cela est ncessaire car loutil Tranche polygonale trace des

segments de droite.
3 Lorsque vous tracez un objet tranche polygonal autour dobjets ayant des bords lisses, veillez inclure lobjet en

entier pour viter de crer des bords nets indsirables sur le graphique de la tranche.
4 Pour arrter lutilisation de loutil Tranche polygonale, slectionnez un autre outil dans le panneau Outils. Il nest

pas ncessaire de cliquer sur le premier point pour fermer le polygone. Remarque : les tranches polygonales associent tables HTML et cartes-images ; elles ncessitent donc davantage de code que les tranches rectangulaires. Lutilisation dun grand nombre de tranches polygonales risque daugmenter le temps de traitement du graphique dans le navigateur Web.

Cration dune tranche polygonale partir dun objet ou trac vectoriel


1 Slectionnez un trac vectoriel. 2 Slectionnez la commande Edition > Insertion > Tranche polygonale.

Cration de tranches de texte HTML


Une tranche HTML reprsente une zone dans laquelle un texte HTML ordinaire apparat dans le navigateur. Le texte HTML affich dans la cellule de la table dfinie par la tranche est ensuite export.

Les tranches HTML permettent de mettre jour rapidement le texte des sites Web sans crer de nouveaux graphiques. Remarque : le corps et le type de la police de caractres pouvant tre dfinis dans le navigateur, laspect des tranches de texte HTML peut varier selon les navigateurs et les systmes dexploitation.
1 Tracez un objet tranche rectangulaire 2 Une fois lobjet tranche slectionn, slectionnez HTML dans le menu contextuel Type de linspecteur des

proprits.
3 Cliquez sur Edition. 4 Saisissez le texte dans la fentre Modifier tranche du code HTML, puis insrez les balises HTML appropries pour

le mettre en forme. Remarque : vous pouvez galement appliquer les balises de mise en forme de texte HTML une fois le texte HTML export.
5 Cliquez sur OK pour appliquer les modifications et refermer la fentre Modifier tranche du code HTML.

Le texte et les balises HTML saisis figurent dans le fichier PNG Fireworks sous forme de code HTML brut, dans le corps de la tranche.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Tranches, survols et zones sensibles

176

Affichage des tranches et des repres de dcoupe


Vous pouvez agir sur la visibilit des tranches et des autres objets Web de votre document laide des panneaux Calques et Outils. Lorsque vous masquez des tranches dans lensemble du document, vous masquez du mme coup les repres de dcoupe.

Affichage et slection de tranches


Le calque Web affiche tous les objets Web prsents dans le document.
1 Choisissez Fentre > Calques. 2 Dveloppez le calque Web en cliquant sur le triangle. 3 Cliquez sur le nom dune tranche pour la slectionner.

Affichage et masquage des tranches


Une tranche masque est invisible dans le fichier PNG Fireworks. Les objets tranches masqus peuvent tre exports dans le code HTML.

Pour masquer une tranche, cliquez sur licne reprsentant un il


panneau Calques.

en regard de lobjet Web correspondant du

Pour afficher une tranche masque, cliquez sur la colonne il pour rtablir sa visibilit. Pour masquer ou afficher la totalit des zones sensibles, des tranches et des repres, cliquez sur le bouton
Masquer/Afficher les tranches dans la section Outils Web du panneau Outils. Vous pouvez galement cliquer sur licne reprsentant un il situe en regard du calque Web, dans le panneau Calques.

Pour masquer ou afficher des repres de dcoupe dans un document, slectionnez Affichage > Repres de dcoupe.

Modification de la couleur des objets tranches et des repres de dcoupe


Pour faciliter laffichage et lorganisation des tranches et des repres de dcoupe, vous pouvez leur affecter des couleurs uniques.

Pour modifier la couleur dun objet tranche slectionn, slectionnez une couleur dans la case de couleur de
linspecteur des proprits.

Pour modifier la couleur des repres de dcoupe, choisissez la commande Edition > Prfrences (Windows) ou
Fireworks > Prfrences (Mac OS). Ensuite, slectionnez une nouvelle couleur de repre de dcoupe dans la catgorie Repres et Grilles de la bote de dialogue Prfrences. Remarque : lorsque vous prvisualisez le document, les tranches dslectionnes saffichent comme du papier calque blanc.

Voir aussi
Prfrences de repres et de grilles la page 312

Modification des tranches


Lutilisation dune disposition de tranche est comparable celle dun tableau dans une application de traitement de texte. Lorsque vous faites glisser un repre de dcoupe pour redimensionner une tranche, toutes les tranches rectangulaires adjacentes sont redimensionnes en consquence. Vous pouvez galement redimensionner et transformer des tranches dans linspecteur des proprits.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Tranches, survols et zones sensibles

177

Modification des tranches par dplacement des repres


Les repres de dcoupe dterminent le primtre et la position de la tranche. Les repres qui stendent au-del des objets tranches dterminent la manire dont le reste du document sera dcoup lors de lexportation. Vous pouvez modifier la forme dun objet tranche rectangulaire en faisant glisser les repres de dcoupe qui entourent lobjet. Ce procd ne vous permet pas de redimensionner des objets tranches non rectangulaires.

Redimensionnement dun objet tranche par glissement de ses repres de dcoupe

Remarque : lorsque vous faites glisser des repres de dcoupe entourant un bouton Fireworks dans la fentre de document, vous redimensionnez galement la tranche dfinissant la zone active de ce bouton. Cependant, vous ne pouvez pas supprimer la zone active dun bouton Fireworks en faisant glisser les repres de dcoupe qui lentourent. Si plusieurs objets tranches sont aligns sur un mme repre de dcoupe, faites glisser ce repre pour redimensionner simultanment tous les objets tranches.

Redimensionnement de plusieurs objets tranches par glissement dun seul repre

De plus, lorsque vous faites glisser un repre le long dune coordonne, tous les autres repres figurant sur cette coordonne suivent le mouvement.

Redimensionnement dune ou plusieurs tranches


1 Placez loutil Pointeur ou Sous-slection sur un repre de dcoupe.

Le pointeur se transforme en pointeur de dplacement de repre


2 Faites glisser le repre de dcoupe vers lemplacement souhait.

Les tranches et toutes les tranches adjacentes sont redimensionnes.

Repositionnement dun repre de dcoupe tout au bord de la zone de travail


A laide de loutil Pointeur ou Sous-slection, faites glisser le repre de dcoupe au-del des limites de la zone de

travail.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Tranches, survols et zones sensibles

178

Dplacement de repres de dcoupe adjacents


1 Tout en maintenant la touche Maj enfonce, faites glisser un repre de dcoupe sur les repres de dcoupe

adjacents.
2 Dposez le repre de dcoupe lemplacement souhait.

Tous les repres de dcoupe que vous faites ainsi glisser seront dplacs vers cet emplacement. Pour annuler cette opration et restaurer les positions initiales de tous les repres de dcoupe, relchez la touche Maj avant de relcher le bouton de la souris.

Modification des tranches laide doutils


Vous pouvez utiliser les outils Pointeur, Sous-slection et Transformation pour remodeler ou redimensionner une tranche. Remarque : seules les tranches polygonales peuvent tre inclines ou dformes. La taille des objets tranches adjacents ntant pas automatiquement ajuste, des tranches risquent de se superposer aprs le redimensionnement ou la modification de la forme des tranches. Lorsque des tranches se chevauchent et que des effets interactifs leur sont affects, la tranche situe au sommet de la pile est prioritaire. Pour viter le chevauchement des tranches, utilisez les repres de dcoupe pour modifier les tranches.
Pour modifier la forme dune tranche slectionne, procdez de lune des manires suivantes :

Slectionnez loutil Pointeur ou Sous-slection, et faites glisser les points dangle de la tranche pour modifier sa
forme.

Effectuez la transformation souhaite laide dun outil de transformation. La transformation dune tranche
rectangulaire peut changer sa forme, sa position ou ses dimensions, mais la tranche elle-mme reste rectangulaire.

Utilisez linspecteur des proprits pour modifier la position et la taille dun objet tranche de faon numrique.

Suppression dune tranche


1 Dans le panneau Calques, slectionnez la tranche dans le calque Web. 2 Au bas de ce panneau, cliquez sur licne de la corbeille.

Lorsque vous faites glisser un symbole de bouton de la bibliothque commune vers la page, une tranche visible sur la zone de travail, mais non dans le calque Web, est automatiquement cre. Si vous slectionnez la tranche sur la zone de travail laide de loutil Pointeur et la supprimez, le symbole de bouton tout entier est supprim. Pour conserver le graphique sous-jacent, slectionnez la tranche/lobjet sur la zone de travail laide de loutil Pointeur, puis slectionnez Modification > Symbole > Sparer. La tranche disparat mais le graphique de bouton de ltat 1 est conserv. Les graphiques des tats 2, 3 et 4 sont toutefois perdus.

Tranches interactives
Dans Fireworks, il existe deux moyens de rendre des tranches interactives :

Pour obtenir une interactivit simple, utilisez la mthode du survol par glisser-dposer.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Tranches, survols et zones sensibles

179

Pour obtenir une interactivit plus complexe, utilisez le panneau Comportements. Les comportements de
Fireworks sont compatibles avec ceux dAdobe Dreamweaver. Aprs avoir export un survol de Fireworks vers Dreamweaver, vous pouvez modifier les comportements Fireworks laide du panneau Comportements de Dreamweaver.

Ajout dune interactivit simple aux tranches


La technique de survol par glisser-dposer est la plus rapide et la plus efficace pour crer des effets de survol et de permutation dimages. Elle permet en particulier de dterminer le comportement dune tranche lorsque le pointeur la survole. Le rsultat obtenu est un graphique appel image survole. Lorsquune tranche est slectionne, un petit cercle avec un rticule apparat au centre de la tranche. Il sagit dune poigne de comportement.
A B C

A. Nom de la tranche B. Poigne de comportement C. Poigne de slection

En faisant glisser la poigne de comportement dune tranche de dclenchement et en la dposant sur une tranche cible, vous pouvez aisment crer des effets de survol et de permutation dimages. La tranche de dclenchement et la tranche cible peuvent correspondre la mme tranche.

Remarque : les zones sensibles disposent galement de poignes de comportement pour lintgration deffets de survol.

A propos des survols


Les survols fonctionnent tous de la mme manire : lorsque le pointeur de la souris survole un graphique, cette action dclenche laffichage dun autre graphique. Le dclencheur est toujours un objet Web (tranche, zone sensible ou bouton).

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Tranches, survols et zones sensibles

180

Le survol le plus simple permute une image dans ltat 1 avec une image situe directement au-dessous dans ltat 2. Vous pouvez galement concevoir des survols plus labors. Les survols de permutation dimages permettent de permuter des images partir de nimporte quel tat. Les survols spars permettent de permuter une image partir dune tranche autre que la tranche de dclenchement.

Lorsque vous slectionnez dans Fireworks un objet Web dclencheur cr laide dune poigne de comportement ou du panneau Comportements, toutes ses relations de comportements saffichent. Par dfaut, un trait de comportement bleu reprsente une interaction de survol.

Cration et association dun survol simple


Un survol simple permute ltat directement sous ltat du dessus et implique une seule tranche.

1 Assurez-vous que lobjet de dclenchement ne se trouve pas sur un calque partag. 2 Choisissez Edition > Insertion > Tranche rectangulaire ou Tranche polygonale pour crer une tranche par-dessus

lobjet de dclenchement.
3 Cliquez sur le bouton Nouvel tat / Dupliquer ltat dans le panneau Etats pour crer un tat. 4 Crez, collez ou importez une image utiliser pour la permutation dans le nouvel tat.

Placez limage sous la tranche cre ltape 2. Mme si vous vous trouvez dans limage 2, la tranche est visible.
5 Slectionnez Etat 1 dans le panneau Etats pour revenir ltat associ limage dorigine.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Tranches, survols et zones sensibles

181

6 Slectionnez la tranche, puis placez le pointeur au-dessus de la poigne de comportement.

Remarque : vous pouvez slectionner la tranche dans nimporte quel tat.


7 Cliquez sur la poigne de comportement et sur Ajouter le comportement Survol simple dans le menu. 8 Cliquez sur longlet Aperu pour tester le survol simple ou appuyez sur la touche F12 pour le prvisualiser dans un

navigateur.

Cration et association dun survol spar


Un survol spar permute une image sous un objet Web lorsque le pointeur survole un autre objet Web. En rponse un vnement souris (survol ou clic), une image saffiche un autre endroit de la page Web. Limage survole est considre comme le dclencheur, alors que limage qui change est considre comme la cible. Vous devez tout dabord configurer le dclencheur, les tranches cibles et ltat dans lequel se trouve limage de permutation. Vous devez ensuite relier le dclencheur la tranche cible laide dun trait de comportement. Le dclencheur dun survol spar peut tre une tranche, une zone sensible ou un bouton.
1 Choisissez Edition > Insertion > Tranche rectangulaire, Tranche polygonale ou Zone sensible pour affecter une

tranche ou une zone sensible limage de dclenchement (cette tape nest pas indispensable si lobjet slectionn est un bouton ou si une tranche ou une zone sensible recouvre dj limage).
2 Cliquez sur le bouton Nouvel tat / Dupliquer ltat dans le panneau Etats pour crer un nouvel tat. 3 Placez une deuxime image (la cible) dans le nouvel tat. 4 Positionnez ltat nimporte o sur la zone de travail, en vitant lemplacement situ sous la tranche cre ltape 1. 5 Slectionnez limage, puis choisissez la commande Edition > Insertion > Tranche rectangulaire ou Tranche

polygonale pour associer une tranche cette image.


6 Slectionnez Etat 1 dans le panneau Etats pour revenir ltat associ limage dorigine. 7 Slectionnez la tranche, la zone sensible ou le bouton qui couvre la zone de dclenchement (limage dorigine), puis

placez le pointeur sur la poigne de comportement.


8 Faites glisser la poigne de comportement de la tranche de dclenchement ou de la zone sensible vers la tranche

cible.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Tranches, survols et zones sensibles

182

Le trait de comportement stend du centre du dclencheur vers langle suprieur gauche de la tranche cible, et la bote de dialogue Permuter les images saffiche.

9 Dans le menu contextuel Permuter limage partir de, slectionnez ltat cr ltape 2, puis cliquez sur le

bouton OK.
10 Affichez laperu du survol spar, puis testez-le.

Application de plusieurs survols une tranche

Tranche dclenchant des comportements de survol et de survol spar

1 Faites glisser une poigne de comportement de la tranche slectionne vers le bord de cette tranche ou dune autre

tranche.

Pour crer une image de permutation, faites glisser la poigne vers le bord suprieur gauche de la mme tranche. Pour crer un survol spar, faites-la glisser vers une autre tranche.
2 Slectionnez ltat de la permutation dimages, puis cliquez sur OK.

Suppression dun survol par glisser-dposer dune tranche, dune zone sensible ou dun bouton
Cliquez sur le trait de comportement de couleur bleue supprimer, puis cliquez sur OK.

Ajout dune interactivit complexe aux tranches


Utilisez les options du panneau Comportements pour crer et modifier des interactions personnalises. Les interactions personnalises reposent sur des comportements existants.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Tranches, survols et zones sensibles

183

Options de comportement
Remarque : la mthode de survol par glisser-dposer est recommande pour les survols simples, spars et complexes.
Survol simple Permet dajouter un comportement de survol la tranche slectionne en utilisant ltat 1 pour ltat

Relev et ltat 2 pour ltat Au-dessus. Aprs avoir slectionn ce comportement, vous devez crer une image dans le deuxime tat, sous la mme tranche, pour crer ltat Au-dessus. Loption Survol simple est en fait un groupe de comportements contenant les comportements Permuter les images et Restaurer la permutation dimages.
Dfinition de limage de la barre de navigation Permet de dfinir une tranche comme faisant partie dune barre de navigation Fireworks. Toutes les tranches faisant partie de la barre de navigation doivent possder ce comportement. Loption Dfinir image barre de navigation est en fait un groupe de comportements contenant les comportements Barre de navigation - Au-dessus, Barre de navigation - Enfonce et Restaurer la barre de navigation. Ce comportement est dfini automatiquement par dfaut lorsque vous crez, avec lditeur de boutons, un bouton qui inclut un tat Inclure ltat au-dessus enfonc ou Afficher limage enfonce lors du chargement. Lorsque vous crez un bouton deux tats, un comportement de survol simple est affect sa tranche. Lorsque vous crez un bouton trois ou quatre tats, un comportement Dfinir image barre de navigation est affect sa tranche.

Remarque : vous ne pouvez pas changer lvnement associ aux comportements Survol simple et Dfinir image barre de navigation.
Permutation dimages Permet de remplacer limage qui figure sous la tranche spcifie par le contenu dun autre tat

ou dun fichier externe.


Restauration de permutation dimages Permet de redonner son aspect dorigine lobjet cible de ltat 1. Barre de navigation - Au-dessus Indique ltat Au-dessus de la tranche slectionne lorsquelle fait partie dune barre

de navigation et permet ventuellement de spcifier les tats Prcharger les images et Inclure ltat au-dessus enfonc.
Barre de navigation - Enfonce Indique ltat Enfonc de la tranche slectionne lorsquelle fait partie dune barre de

navigation et permet ventuellement de spcifier ltat Prcharger les images.


Restaurer la barre de navigation Permet de rtablir ltat Relev de toutes les autres tranches de la barre de navigation. Afficher le menu contextuel Permet daffecter un menu contextuel une tranche ou une zone sensible. Vous pouvez appliquer un comportement de menu contextuel laide de lditeur de menus contextuels. Dfinition du texte de la barre dtat Permet de dfinir le texte dun message afficher dans la barre dtat, en bas de

la plupart des fentres de navigateur.

Association de comportements une tranche slectionne


1 Cliquez sur le bouton Ajouter un comportement dans le panneau Comportements.
A B

A. Bouton Ajouter un comportement B. Bouton Supprimer le comportement

2 Slectionnez un ou plusieurs comportements.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Tranches, survols et zones sensibles

184

Changement de lvnement de souris activant le comportement


1 Slectionnez la tranche ou zone sensible de dclenchement qui contient le comportement modifier.

Tous les comportements associs cette tranche ou zone sensible saffichent dans le panneau Comportements.
2 Slectionnez le comportement modifier. 3 Cliquez sur la flche situe ct de lvnement, puis slectionnez un nouvel vnement dans le menu contextuel.

Cette option nest pas disponible pour le comportement de survol simple.


onMouseOver Dclenche le comportement lorsque le pointeur survole la zone de dclenchement. onMouseOut Dclenche le comportement lorsque le pointeur quitte la zone de dclenchement. onClick Dclenche le comportement lorsque vous cliquez sur lobjet de dclenchement. onLoad Dclenche le comportement lorsque la page Web est charge.

Utilisation de fichiers dimage externes pour les images de permutation


Vous pouvez utiliser une image externe au document Fireworks actif comme source pour une permutation dimages. Les images sources peuvent tre au format GIF, GIF anim, JPEG ou PNG. Si vous slectionnez un fichier externe comme source dimages, Fireworks permute ce fichier avec la tranche cible lorsque la permutation dimages est dclenche dans un navigateur Web. Si le fichier na pas la mme largeur et la mme hauteur que la tranche dans laquelle seffectue la permutation, le navigateur redimensionne le fichier pour ladapter lobjet tranche. Le redimensionnement dun fichier peut tre prjudiciable sa qualit, et tout particulirement pour les images au format GIF anim.
1 Dans la bote de dialogue Permuter les images, Barre de navigation - Au-dessus ou Barre de navigation - Enfonce,

slectionnez Fichier dimage, puis cliquez sur licne de dossier.


2 Recherchez le fichier utiliser, puis cliquez sur Ouvrir. 3 Si le fichier externe est au format GIF anim, dslectionnez loption Prcharger les images. Cela permet dviter les

problmes daffichage des fichiers GIF en tant qutats de survols. Remarque : Fireworks cre des chemins de document vers les fichiers dimage. Si vous exportez votre document pour lutiliser sur le Web, assurez-vous que le fichier dimage externe soit accessible partir du code HTML Fireworks export. Placez les fichiers externes sur votre site local avant de les utiliser dans Fireworks en tant quimages de permutation ; par ailleurs, veillez tlcharger les fichiers dimage externes lorsque vous transfrez les fichiers sur le Web.

Prparation des tranches pour lexportation


Pour prparer les tranches en vue de leur exportation, utilisez linspecteur des proprits.

Proprits de tranche dans linspecteur des proprits

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Tranches, survols et zones sensibles

185

Pour optimiser rapidement une tranche, slectionnez un paramtre prdfini dans le menu contextuel Paramtres dexportation de linspecteur des proprits ou du panneau Optimisation. Pour afficher les options dtailles, reportez-vous la section Optimisation dans lespace de travail la page 240.

Affectation dadresses URL des tranches


Lorsque vous affectez une URL une tranche, lutilisateur peut accder cette adresse en cliquant sur la zone dfinie par la tranche dans son navigateur Web.
Pour affecter une adresse URL, saisissez-la dans la zone de texte Lien de linspecteur des proprits.

Si votre fichier contient un certain nombre de pages que vous avez lintention dexporter, ouvrez le menu contextuel Lien, puis slectionnez lune des pages pour lURL. Une fois les pages exportes, ce lien renvoie automatiquement lutilisateur vers la page spcifie. Si vous envisagez de rutiliser des adresses URL, crez une bibliothque dURL dans le panneau URL.

Saisie dun texte de description


La saisie dun texte de description bref et clair est important compte tenu du nombre croissant de personnes malvoyantes qui utilisent des logiciels de lecture dcran. Ces applications transmettent lutilisateur une description sonore du texte de description lorsquil passe le pointeur sur les graphiques dune page Web.
Dans linspecteur des proprits, entrez le texte dans le champ de texte secondaire.

Slection de tranches ou de zones sensibles sans texte de description


Vous pouvez slectionner les tranches et zones sensibles pour lesquelles vous navez pas indiqu de texte de description. Vous pouvez alors dfinir un texte de description par dfaut pour ces objets.
Slectionnez Commandes > Web > Sl. texte ALT vides.

Dfinition du texte de description par dfaut


Vous pouvez slectionner les tranches et zones sensibles pour lesquelles vous navez pas indiqu de texte de description et dfinir un texte ALT par dfaut pour celles-ci.
Slectionnez Commandes > Web > Texte ALT et entrez le texte de description par dfaut.

Affectation dune cible une tranche ou une zone sensible slectionne


Une cible est un autre tat de page Web ou un autre navigateur Web dans lequel souvre le document li.
Dans la zone de texte Cible, entrez le nom de ltat HTML ou slectionnez une cible rserve dans le menu

contextuel Cible :
_blank Permet de charger les documents lis dans une nouvelle fentre, sans nom, du navigateur. _parent Permet de charger les documents lis dans le jeu dtats parent ou dans la fentre de ltat contenant le lien. Si ltat contenant le lien nest pas imbriqu, le document li est charg dans la fentre principale du navigateur. _self Permet de charger le document li dans le mme tat ou la mme fentre que le lien. Il sagit de la cible par

dfaut, de sorte quil est le plus souvent inutile de la spcifier.


_top Permet de charger les documents lis dans la fentre principale du navigateur, remplaant ainsi tous les tats.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Tranches, survols et zones sensibles

186

Affectation de nom aux tranches


Un dcoupage permet de dcouper une image en plusieurs parties. Etant donn que chaque partie dtat est exporte sparment, chacune doit porter un nom unique. Pour cela, vous pouvez utiliser la convention de nom par dfaut, ou affecter des noms personnaliss. Remarque : najoutez pas dextension au nom de fichier. Fireworks ajoute automatiquement les extensions aux noms des fichiers de tranche lors de lexportation.

Saisie dun nom de tranche personnalis


Procdez de lune des manires suivantes :

Slectionnez la tranche dans la zone de travail, entrez un nom dans la zone Modifier le nom de lobjet de
linspecteur des proprits, puis appuyez sur Entre.

Dans le calque Web, cliquez deux fois sur le nom de la tranche, entrez un nouveau nom, et appuyez sur la
touche Entre.

Affectation automatique dun nom un fichier de tranche


Lorsque vous exportez votre image dcoupe en tranches, entrez un nom dans la zone de texte Nom de fichier

(Windows) ou Nom (Mac OS) de la bote de dialogue dexportation. Najoutez pas dextension de fichier.

Modification de la convention de dnomination par dfaut


Vous pouvez crer une convention de nom comprenant jusqu huit lments. Un lment peut comprendre lune des options de dnomination automatique suivantes :
Option Aucune nom document tranche Tranche n (1, 2, 3, ...) Tranche n (01, 02, 03, ...) Tranche n (A, B, C, ...) Tranche n (a, b, c, ...) Ligne/colonne (l3_c2, l4_c7, ...) Ligne (l##) et Colonne (c##) dsignent les lignes et colonnes du tableau que les navigateurs Web utilisent pour reconstruire une image dcoupe. Vous pouvez utiliser ces informations dans la convention de nom. Llment utilise lun de ces caractres, en gnral comme sparateur entre dautres lments. Description Aucun nom nest appliqu llment. Llment prend le nom du document. Vous pouvez insrer le mot tranche dans la convention de dnomination. Llment est tiquet de faon numrique ou alphabtique, selon le style slectionn.

Soulign Point Espace Tiret

Par exemple, si le nom du document est mondoc, selon la convention nom.doc + tranche + n de tranche (A,B,C...), la tranche est appele mondoctrancheA.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Tranches, survols et zones sensibles

187

Si une tranche stend sur plusieurs tats, Fireworks ajoute par dfaut un numro au nom de fichier de chaque tat. Par exemple, si vous entrez le nom de fichier de tranche personnalis accueil pour un bouton trois tats, Fireworks nomme le graphique de ltat Relev accueil.gif, celui de ltat Au-dessus accueil_s2.gif et celui de ltat Enfonc, accueil_s3.gif. Vous pouvez crer votre propre convention de dnomination pour les tranches multi-tats, dans la bote de dialogue Configuration HTML.
1 Choisissez Fichier > Configuration HTML pour ouvrir la bote de dialogue Configuration HTML. 2 Cliquez sur longlet Propre au document. 3 Dans la section Noms des fichiers de dcoupe, crez votre propre convention de nom en effectuant des slections

dans les listes.

4 (Facultatif) Pour dfinir ces donnes comme paramtres par dfaut pour tous les nouveaux documents Fireworks,

cliquez sur Paramtres par dfaut. Remarque : soyez prudent lorsque vous slectionnez Aucun comme option pour la convention de nom des tranches. Si vous slectionnez cette option pour lun des trois premiers menus, Fireworks exporte des fichiers de tranche qui scraseront successivement. Vous nobtiendrez en dfinitive quun seul graphique export et un tableau affichant ce graphique dans chaque cellule.

Dfinition du mode dexportation des tables HTML


Le dcoupage dfinit la prsentation de la structure de la table HTML lorsquun document Fireworks est export pour tre utilis sur le Web. Lorsque vous exportez au format HTML un document Fireworks dcoup, le document est assembl laide dune table HTML. Chaque lment dcoup du document Fireworks occupe une cellule de la table. Une fois exporte, une tranche Fireworks correspond une cellule de la table dans le code HTML. Vous pouvez spcifier la mthode de reconstruction dune table Fireworks dans un navigateur (en prcisant si vous souhaitez utiliser des espaces ou des tables imbriques).

Les sparateurs sont des images permettant daligner correctement les cellules dun tableau lorsquelles sont
affiches dans un navigateur.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Tranches, survols et zones sensibles

188

Une table imbrique est littralement une table figurant dans une autre table. Les tables imbriques ne comportent
pas de sparateurs. Elles peuvent mettre plus de temps tre charges dans les navigateurs mais, dans la mesure o elles ne comportent pas de sparateurs, il est plus simple de modifier leur code HTML.
1 Choisissez Fichier > Configuration HTML ou cliquez sur le bouton Options de la bote de dialogue Exporter. 2 Cliquez sur longlet Table. 3 Dans le menu contextuel Espace avec, slectionnez une option despacement :
Tables imbriques Pas de sparateurs Permet de crer une table imbrique sans sparateur. Table unique Pas de sparateur Permet de crer une seule table sans sparateur. Cette option risque dentraner un affichage incorrect dans certains cas. Espace transparent de 1 pixel Permet dutiliser une image GIF transparente de 1 pixel sur 1 pixel comme

sparateur, lequel peut ensuite tre redimensionn, si ncessaire, dans le code HTML. Cela gnre une ligne de 1 pixel de hauteur dans la partie suprieure de la table et une colonne de 1 pixel de largeur dans la partie droite de la table.
4 Slectionnez une couleur de cellule pour les tranches HTML :

Remarque : si vous slectionnez une couleur dans la fentre contextuelle des couleurs, elle est applique aux tranches HTML uniquement. Les tranches dimage conservent la couleur de la zone de travail.
5 Dans le menu contextuel Contenu, slectionnez les lments insrer dans les cellules vides :
Aucune Laisse les cellules vides. Image despacement Place une petite image transparente appele spacer.gif dans les cellules vides. Espace inscable Place une balise despacement HTML dans les cellules vides. Cette cellule est daspect creux.

Remarque : des cellules vides ne sont ajoutes que si vous avez dslectionn Inclure les zones sans tranches dans la bote de dialogue Exporter pendant lexportation.
6 Cliquez sur OK.

Remarque : pour appliquer les paramtres par dfaut tous les nouveaux documents, vous pouvez spcifier des paramtres dexportation de table pour chaque document, ou utiliser le bouton Paramtres par dfaut (dans longlet Propre au document de la bote de dialogue Configuration HTML).

Zones sensibles et cartes-images


Les concepteurs Web peuvent utiliser des zones sensibles pour crer des petites parties interactives dans un graphique plus grand en liant des zones de ce graphique Web une URL. Dans Fireworks, vous pouvez crer une carte-image en exportant le code HTML dun document contenant des zones sensibles.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Tranches, survols et zones sensibles

189

Carte-image avec zones sensibles

Les zones sensibles et les cartes-images utilisent souvent moins de ressources que les graphiques dcoups. Le dcoupage ncessite davantage de puissance de traitement en raison du code HTML supplmentaire utilis pour le tlchargement et le rassemblage des graphiques dcoups. Remarque : il est possible de crer une carte-image dcoupe. Lexportation dune carte-image dcoupe gnre en gnral de nombreux fichiers graphiques. Pour plus dinformations sur le dcoupage, reportez-vous la section Cration de tranches rectangulaires la page 174.

Cration de zones sensibles


Les zones sensibles sont une solution idale lorsque vous liez des zones dune image des pages Web et que vous
ne souhaitez pas que ces zones soient slectionnes ou produisent des effets de survol en rponse un vnement souris (dplacement ou clic).

Les zones sensibles et les cartes-images sont galement trs intressantes si le graphique sur lequel vous avez plac
les zones sensibles tait mieux export sous forme dun seul fichier graphique. En dautres termes, lensemble du graphique est mieux export en utilisant les mmes formats de fichier et paramtres doptimisation.

Les zones sensibles peuvent prendre une forme rectangulaire, circulaire ou polygonale. Les polygones sont utiles
lorsque vous utilisez des images imbriques.

Vous pouvez slectionner un objet et insrer la zone sensible sur cet objet.

Cration dune zone sensible rectangulaire ou circulaire


1 Dans la section Web du panneau Outils, slectionnez loutil Zone sensible rectangulaire ou Zone sensible circulaire.

2 Faites glisser loutil de zone sensible pour dessiner une zone sensible sur lune des zones du graphique. Maintenez

la touche Alt (Windows) ou Option (Mac OS) enfonce pour dessiner partir du point central. Remarque : vous pouvez ajuster la position dune zone sensible mesure que vous la dessinez. Tout en maintenant le bouton de la souris et la barre despace enfoncs, faites glisser la zone sensible vers un autre emplacement de la zone de travail. Relchez la barre despace pour continuer dessiner la zone sensible.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Tranches, survols et zones sensibles

190

Cration dune zone sensible de forme irrgulire


1

Slectionnez loutil Zone sensible polygonale

2 Cliquez pour placer des points vectoriels, un peu de la mme faon que pour dessiner des segments de droite avec

loutil Plume. Le fond dfinit la zone sensible, que le trac soit ouvert ou ferm.

Cration dune zone sensible en traant un ou plusieurs objets slectionns


1 Slectionnez plusieurs objets, puis choisissez la commande Edition > Insertion > Zone sensible. 2 Cliquez sur Simple pour crer une seule zone sensible rectangulaire couvrant tous les objets, ou sur Multiple pour

crer plusieurs zones sensibles (une par objet). Le calque Web affiche la ou les nouvelles zones sensibles.

Conversion dune zone sensible slectionne en rectangle, cercle ou polygone


Dans linspecteur des proprits, slectionnez Rectangle, Cercle ou Polygone dans le menu contextuel Forme de la

zone sensible.

Prparation des zones sensibles pour lexportation


Affectez des proprits de zone sensible (adresses URL ou texte de description, par exemple) dans linspecteur des proprits, comme vous le feriez pour les proprits de tranches.

Cration de cartes-images
Aprs avoir insr des zones sensibles sur un graphique, exportez le graphique en tant que carte-image pour quil fonctionne dans un navigateur Web. Lexportation dune carte-image gnre le fichier graphique et le fichier HTML qui contient les informations de la carte relatives aux zones sensibles et aux liens URL correspondants. Les exportations de Fireworks ne peuvent produire que des cartes-images ct client. Vous pouvez galement copier la carte-image dans le Presse-papiers puis la coller dans Dreamweaver ou dans un autre diteur HTML. Pour plus dinformations sur linsertion de contenus Fireworks exports dans Dreamweaver, reportez-vous la section Utilisation de Dreamweaver la page 266
1 Optimisez le graphique avant son exportation. 2 Choisissez Fichier > Exporter. 3 Si vous exportez limage, accdez au dossier de destination du fichier HTML, puis nommez le fichier.

Si vous avez dj cr la structure de fichiers locale de votre site Web, enregistrez le graphique dans le dossier appropri de ce site.
4 Dans le menu contextuel Type, slectionnez Documents HTML et Images. 5 Dans le menu contextuel HTML, slectionnez une option :
Exporter le fichier HTML Cre le fichier HTML requis et les fichiers de graphiques correspondants importer dans

Dreamweaver ou dans un autre diteur HTML.


Copier dans le Presse-papiers Copie tous les codes HTML (ainsi quune table si le document est dcoup en tranches) dans le Presse-papiers ; ils seront ensuite colls dans Dreamweaver ou dans un autre diteur HTML.

Remarque : pour les tranches, slectionnez Aucun si le document ne contient pas de tranches.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Tranches, survols et zones sensibles

191

6 (Exportation uniquement) Si ncessaire, slectionnez Placer les images dans des sous-dossiers, puis ouvrez le

dossier appropri.
7 Cliquez sur Enregistrer. 8 Lorsque vous exportez des fichiers, Fireworks permet dutiliser les commentaires en HTML pour identifier

clairement le dbut et la fin du code des cartes-images et autres lments Web. Par dfaut, aucun commentaire nest ajout dans le code HTML. Pour en ajouter, sous longlet Gnral de la bote de dialogue Configuration HTML, cliquez sur Inclure les commentaires HTML.

Cration de survols avec zones sensibles


Utilisez la mthode du survol par glisser-dposer pour associer un effet de survol spar une zone sensible. La zone cible doit tre dlimite par une tranche. Les effets de survol sont appliqus aux zones sensibles de la mme manire que pour les tranches. Remarque : une zone sensible ne peut dclencher quun survol spar. Elle ne peut pas tre la cible dun survol provenant dune autre zone sensible ou dune tranche.

Une fois que vous avez affect un survol spar une zone sensible, le trait de comportement de connexion nest visible que lorsque la zone sensible est slectionne.

Utilisation de zones sensibles par-dessus des tranches


Si vous ne souhaitez utiliser quune petite partie dun large graphique en tant que dclencheur, placez une zone sensible par-dessus une tranche pour dclencher une action ou un comportement. Vous pouvez galement placer une tranche par-dessus le graphique, puis une zone sensible au-dessus du texte. Le survol du texte par le pointeur dclenche alors leffet de survol, mais le graphique entier plac sous la tranche permute lorsque leffet de survol survient.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Tranches, survols et zones sensibles

192

Remarque : vitez de crer des zones sensibles qui chevauchent plusieurs tranches.

1 Insrez une tranche par-dessus limage originale de la permutation. 2 Dans le panneau Etats, crez un tat, puis insrez limage qui sera utilise comme image permute. Veillez placer

cette image sous la tranche insre ltape 1.


3 Faites glisser un trait de comportement de la zone sensible vers la tranche contenant limage permuter. 4 Dans la liste Permuter limage partir de, slectionnez ltat qui contient limage survole, puis cliquez sur OK.

Dernire mise jour le 12/5/2011

193

Chapitre 13 : Cration de boutons et de menus contextuels


Principes de base de la navigation
A propos des fonctions de navigation
Ajoutez des boutons, des menus et des barres de navigation pour simplifier la navigation dans vos documents. Avec Adobe Fireworks, vous pouvez aisment crer et mettre en place ces aides la navigation, mme si vos connaissances en code CSS et JavaScript sont plus que limites. Lors de lexportation dun bouton ou dun menu contextuel, Fireworks gnre automatiquement le code CSS ou JavaScript ncessaire pour lafficher dans un navigateur Web. Adobe Dreamweaver permet dinsrer aisment le code CSS, HTML et JavaScript de Fireworks dans vos pages Web ou tout fichier HTML ou CSS.

Cration dune barre de navigation standard


Une barre de navigation est un ensemble de boutons qui fournissent des liens vers les diffrentes zones dun site Web. Une barre de navigation reste en principe constante dans lensemble du site pour assurer un mode de navigation logique. Les liens de la barre de navigation peuvent cependant varier pour rpondre aux spcificits de certaines pages. Pour une navigation harmonieuse, vous pouvez dupliquer des symboles de bouton laide doccurrences de symbole. Si vous modifiez laspect ou la fonctionnalit du symbole original, toutes les occurrences qui lui sont associes adoptent automatiquement ces modifications (voir la section Symboles la page 161).
1 Crez un symbole de bouton. 2 Faites glisser une occurrence (copie) du symbole depuis le panneau Bibliothque de documents dans la zone de

travail.
3 Pour crer une copie de loccurrence du bouton, procdez de lune ou lautre des manires suivantes :

Slectionnez loccurrence de bouton, puis choisissez Edition > Cloner. Tout en maintenant la touche Alt (Windows) ou Option (Mac OS) enfonce, faites glisser loccurrence de
bouton.
4 Tout en maintenant la touche Maj enfonce, faites glisser un bouton pour laligner horizontalement ou

verticalement. Utilisez les touches flches pour un dplacement plus prcis de loccurrence.
5 Pour crer dautres occurrences de bouton, rptez les tapes 3 et 4. 6 Slectionnez chaque occurrence, puis attribuez-lui un texte unique, une URL ou dautres proprits laide de

linspecteur des proprits.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Cration de boutons et de menus contextuels

194

Cration de symboles de bouton


Les boutons sont un type particulier de symbole, utiliss comme lments de navigation dans une page Web. Linspecteur des proprits permet de modifier facilement les boutons. Vous pouvez faire glisser dans votre document des occurrences dun bouton depuis la bibliothque de symboles, ce qui vous permet de modifier laspect graphique dun seul bouton et de mettre jour systmatiquement laspect de toutes les occurrences du bouton dans la barre de navigation. Vous pouvez modifier le texte, lURL et la cible dune occurrence de bouton sans affecter ses autres occurrences, ni rompre le lien entre cette occurrence et son symbole. Une occurrence de bouton est un objet encapsul. Fireworks dplace tous les composants et tats associs aux boutons que vous dplacez dans le document. Tout comme les autres symboles, chaque bouton dispose dun point dalignement (point central servant de repre pour aligner du texte et les diffrents tats du bouton quand vous ditez un bouton).
1 Slectionnez lobjet convertir en bouton. 2 Choisissez Modification > Symbole > Convertir en symbole. 3 Dans la bote de dialogue Convertir en symbole, entrez le nom du bouton. 4 Dans la section des options de Type, slectionnez Bouton. 5 (Facultatif) Pour activer la mise l'chelle en 9 tranches pour le bouton, slectionnez Activer les repres de mise

lchelle en 9 tranches.
6 (Facultatif) Pour enregistrer le graphique en tant que bouton dans la bibliothque graphique de Fireworks,

slectionnez Enregistrer dans la bibliothque commune.

Application dtats des boutons


Vous pouvez dfinir jusqu quatre tats par bouton. Ceux-ci reprsentent laspect que peut prendre le bouton selon laction de la souris. Les boutons deux tats disposent dun tat Relev et dun tat Enfonc. Les boutons trois et quatre tats disposent dun tat Au-dessus et dun tat Au-dessus Enfonc. Ces tats reprsentent laspect du bouton lorsque le pointeur de la souris le survole lorsquil est relev (Au-dessus) ou enfonc (Au-dessus Enfonc). Vous pouvez crer une barre de navigation qui utilise des boutons deux ou trois tats. Cependant, seuls les boutons quatre tats peuvent tirer parti des comportements intgrs de barre de navigation de Fireworks.

Cration dun bouton simple deux tats


1 Pour accder au mode ddition de symboles, procdez de lune ou lautre des manires suivantes :

Cliquez deux fois sur un bouton existant sur la zone de travail. Choisissez Edition > Insertion > Nouveau bouton.
2 Pour importer ou crer le graphique de ltat Relev, procdez de lune des manires suivantes :

Glissez et dposez ou importez dans lespace de travail le graphique que vous souhaitez faire correspondre ltat
relev du bouton.

Crez un graphique laide des outils de dessin, ou utilisez loutil Texte pour crer un bouton partir dun texte. Dans linspecteur des proprits, cliquez sur Importer un bouton et slectionnez un bouton ditable prt
lemploi dans la bibliothque de boutons Importer des symboles. Cette option permet dassocier automatiquement chaque tat du bouton aux textes et graphiques correspondants.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Cration de boutons et de menus contextuels

195

(Facultatif) Dfinissez les repres de mise lchelle en 9 tranches de sorte que le bouton ne soit pas dform lors
du redimensionnement (voir la section Application de repres 9 tranches un symbole la page 51).

(Facultatif) Slectionnez loutil Texte, puis crez le texte associ au bouton.


3 Pour crer ltat Au-dessus, dans le menu contextuel, slectionnez Au-dessus et procdez de lune des manires

suivantes :

Cliquez sur Copier le graphique Relev pour coller une copie du bouton ltat Relev dans la fentre Au-dessus,
puis modifiez cette copie.

Glissez et dposez, importez ou dessinez le graphique.


4 (Facultatif) Pour utiliser des filtres dynamiques afin de crer des aspects communs pour chaque tat, slectionnez

le graphique auquel ajouter un filtre dynamique, puis cliquez sur licne plus (+) en regard de ltiquette Filtres dans linspecteur des proprits.
5 Slectionnez la commande Biseau et estampage > Biseau intrieur, Estampe rapporte, Biseau externe ou Estampe

en relief.
6 Slectionnez un filtre prdfini de bouton pour chaque tat.
Filtre prdfini de bouton Description Le biseau semble en relief au-dessus des objets sous-jacents.

En relief
Les couleurs du bouton sclaircissent.

En surbrillance
Le biseau semble enfonc au-dessous des objets sous-jacents.

Cartouche
Le biseau semble enfonc au-dessous des objets sous-jacents et les couleurs silluminent.

Invers

Cration dun bouton trois ou quatre tats


Bien que les boutons quatre tats ne soient pas obligatoires, ils vous permettent de tirer parti des comportements intgrs de barre de navigation.
1 Avec un bouton deux tats ouvert dans la zone de travail et en mode ddition du symbole, dans le menu

contextuel de linspecteur des proprits, slectionnez Enfonc et procdez de lune des manires suivantes :

Cliquez sur Copier le graphique Au-dessus pour coller une copie du bouton ltat Au-dessus dans la fentre
Enfonc, puis modifiez cette copie pour changer son aspect.

Glissez et dposez, importez ou dessinez le graphique.


2 Pour ajouter un tat Au-dessus Enfonc, vrifiez que le bouton de ltat Enfonc est ouvert, puis rptez ltape 1. 3 (Facultatif) Appliquez des filtres prdfinis aux boutons.

Remarque : lorsque vous insrez ou crez un graphique pour les tats Enfonc ou Au-dessus Enfonc, les options dintgration de ltat la barre de navigation sont slectionnes automatiquement.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Cration de boutons et de menus contextuels

196

Conversion de survols Fireworks en boutons


Vous pouvez convertir en boutons des survols crs dans des versions prcdentes de Fireworks et les enregistrer dans la bibliothque. Pour plus dinformations sur les survols, reportez-vous la section Tranches interactives la page 178.
1 Supprimez la tranche ou la zone sensible recouvrant les images survoles. 2 Dans le menu Pelures doignon du panneau Etats, cliquez sur Afficher tous les tats. 3 Slectionnez tous les objets que vous voulez inclure dans le bouton. Slectionnez des objets masqus laide de

loutil Slectionner derrire.


4 Choisissez Modification > Symbole > Convertir en symbole. 5 Entrez le nom du symbole dans la zone Nom, puis slectionnez le type de symbole Bouton.

Pour convertir en boutons des animations quatre tats, slectionnez les quatre objets pour placer chacun deux sur leur tat de bouton respectif.

Insertion et importation de symboles de bouton


Vous pouvez insrer des occurrences de symboles de bouton dans un document partir du panneau Bibliothque commune. Vous pouvez galement importer des symboles de bouton existants dans le panneau Bibliothque de documents dun nouveau document. Pour plus dinformations, reportez-vous la section Importation et exportation de symboles la page 167.
1 Pour insrer dans un document les occurrences dun bouton, ouvrez le panneau Bibliothque commune, puis faites

glisser le symbole de bouton vers le document.


2 Pour importer dautres occurrences dun symbole de bouton, procdez de lune des manires suivantes :

Slectionnez une occurrence, puis choisissez la commande Edition > Cloner pour placer une autre occurrence
directement devant loccurrence slectionne. La nouvelle occurrence devient lobjet slectionn.

Faites glisser une autre occurrence de bouton depuis le panneau Bibliothque de documents vers le document. Tout en maintenant la touche Alt (Windows) ou Option (Mac OS) enfonce, faites glisser une occurrence sur la
zone de travail pour crer une autre occurrence de bouton.

Copiez loccurrence, puis collez des occurrences supplmentaires.


3 Pour importer des symboles de bouton dans le panneau Bibliothque de documents dun nouveau document,

procdez de lune des manires suivantes :

Insrez une occurrence de bouton par un glisser-dposer (ou par un couper-coller) depuis un autre
document Fireworks.

Importez les symboles de bouton partir dun fichier PNG Fireworks. Exportez les symboles de bouton depuis un autre document Fireworks vers un fichier bibliothque PNG, puis
importez les symboles de bouton du fichier bibliothque PNG dans le document.

Dans le menu Options du panneau Bibliothque de documents, cliquez sur Importer des symboles. Les
bibliothques contiennent une grande varit de symboles de bouton prconus, prpars par Adobe.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Cration de boutons et de menus contextuels

197

Modification de symboles de bouton


Vous pouvez modifier plusieurs occurrences de proprits dun bouton au niveau du symbole ou modifier des occurrences individuelles de ses proprits.

Modification des proprits dun bouton au niveau de son symbole


Cliquez deux fois sur le bouton pour modifier ses caractristiques. En haut de la zone de travail, cliquez sur licne

page, ou cliquez deux fois en dehors du bouton pour revenir la zone de travail. En principe, les proprits des boutons que vous pouvez modifier au niveau des symboles sont les mmes pour tous les boutons dune barre de navigation. En voici quelques exemples :

les attributs graphiques tels que la couleur et le type de contour et de fond, la forme du trac et les images les filtres dynamiques ou lopacit appliqus chaque objet du symbole de bouton les dimensions et la position de la zone active le comportement du bouton principal les paramtres doptimisation et dexportation le lien URL (utilis galement comme proprit dune occurrence) la cible (utilise galement comme proprit dune occurrence)

Modification des proprits dun bouton au niveau dune occurrence


Slectionnez loccurrence du bouton dans lespace de travail, puis dfinissez ses proprits dans linspecteur des

proprits. Les proprits que vous pouvez modifier au niveau de chaque occurrence sont gnralement diffrentes dun bouton lautre dans une srie de boutons. Vous pouvez modifier ces proprits pour une seule occurrence sans agir sur le symbole associ ou toute autre occurrence de ce symbole. En voici quelques exemples :

le nom dobjet dune occurrence apparaissant dans le panneau Calques et utilis lors de lexportation pour nommer
les tranches exportes de loccurrence du bouton

les filtres dynamiques ou lopacit appliqus toute loccurrence les caractres et la mise en forme du texte le lien URL (crase toute URL existante au niveau du symbole) la description de limage la cible (crase tout cadre cible existant en tant que proprit de symbole) les comportements supplmentaires affects une occurrence partir du panneau Comportements loption Afficher ltat Enfonc lors du chargement, dans linspecteur des proprits, pour les occurrences dune
barre de navigation Remarque : lorsque vous slectionnez loption Exportation de plusieurs fichiers dans la section Propre au document de la bote de dialogue Configuration HTML, puis que vous exportez une barre de navigation, Fireworks exporte chaque page HTML avec ltat Enfonc de chaque bouton (voir la section Dfinition des options dexportation de code HTML la page 262).

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Cration de boutons et de menus contextuels

198

Dfinition des proprits des boutons interactifs


Vous pouvez contrler les lments interactifs suivants dun bouton :
Zone active La zone active dclenche les effets interactifs lorsque le pointeur de la souris survole le bouton ou lorsque vous cliquez sur ce dernier dans un navigateur Web. La zone active dun bouton est une proprit de symbole et est exclusive pour chaque symbole de bouton. Dans le menu contextuel, slectionnez Zone active pour modifier une tranche de bouton ou tracer des zones sensibles. Si vous tracez une nouvelle tranche, celle-ci remplace la tranche prcdente. URL dun symbole ou dune occurrence de bouton LURL peut correspondre la proprit du symbole ou de loccurrence de bouton. Elle relie le bouton une autre page Web, un autre site Web ou une ancre sur la page Web active. Dans linspecteur des proprits ou le panneau URL, vous pouvez lier une URL une occurrence de bouton slectionne. Cible de bouton La cible dun bouton est la fentre ou le cadre dans lesquels la page Web de destination apparat lorsque lutilisateur clique sur une occurrence du bouton. Si aucune cible nest spcifie dans linspecteur des proprits, la page Web saffiche dans le mme cadre ou la mme fentre que le lien ayant servi lappeler. La cible peut correspondre la proprit du symbole ou de loccurrence dun bouton. Vous pouvez dfinir la cible dun symbole de manire ce que toutes les occurrences du symbole aient la mme cible. Texte de description dun symbole ou dune occurrence de bouton Le texte de description apparat dans ou

proximit de lespace rserv pour limage pendant son tlchargement ou la place dune image impossible tlcharger. Il remplace galement le graphique lorsque lutilisateur interdit laffichage dimages dans le navigateur. Le texte secondaire peut correspondre la proprit du symbole ou de loccurrence de bouton.

Modification des proprits des boutons interactifs


Remarque : la modification de la cible, de lURL ou du texte de description dun symbole de bouton na aucun effet sur les occurrences de bouton existantes de ce symbole.
1 En mode ddition du symbole, ouvrez le symbole du bouton. 2 Procdez de lune des manires suivantes :

Pour modifier une tranche ou une zone sensible dans la zone active du symbole de bouton, slectionnez Zone
active dans le menu contextuel, dans linspecteur des proprits. Loutil Pointeur permet de dplacer ou de reformer la tranche ou un repre de tranche. Vous pouvez galement utiliser un outil de tranche ou de zone sensible pour tracer une nouvelle zone active.

Pour associer une URL un symbole de bouton, dans le menu contextuel, slectionnez Zone active. Dans
linspecteur des proprits, entrez ensuite lURL dans la zone Lien, puis slectionnez une page dans la liste ou une URL dans le panneau URL. Remarque : lorsque vous saisissez des URL absolues au sein dun mme site, vous pouvez lier une URL un symbole afin que cette URL saffiche dans la zone Lien de linspecteur des proprits pour chaque occurrence.

Pour associer une cible un symbole de bouton, dans lespace de travail, ouvrez le bouton. Indiquez ensuite une
cible dans la zone Cible ou slectionnez, dans le menu Cible de linspecteur des proprits, une cible prdfinie parmi les suivantes :
Aucune ou _self Charge la page Web dans le mme cadre, ou dans la mme fentre, que le lien. _blank Charge la page Web dans une nouvelle fentre, sans nom, du navigateur. _parent Charge la page Web dans le jeu de cadres parent ou dans la fentre du cadre contenant le lien. _top Charge la page Web dans la fentre principale du navigateur et supprime tous les cadres.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Cration de boutons et de menus contextuels

199

Pour associer un texte de description un symbole de bouton ou une instance de bouton, dans lespace de
travail, slectionnez linstance du bouton. Dans linspecteur des proprits, saisissez le texte ou la description appliquer.

Menus contextuels
Les menus contextuels saffichent dans un navigateur en rponse un vnement souris (survol ou clic) sur un objet Web de dclenchement tel quune tranche ou une zone sensible.

Chaque lment de menu contextuel saffiche en tant que cellule dimage ou HTML. La cellule est associ aux
tats Relev et Au-dessus et contient du texte dans les deux cas.

Vous pouvez affecter des liens URL des lments de menu contextuel pour la navigation et crer autant de niveaux
de sous-menus que vous le souhaitez dans un menu contextuel.

Vous pouvez utiliser certains onglets ou tous les onglets et modifier leurs paramtres tout moment. Vous devez ajouter au moins un lment de menu dans longlet Contenu pour crer une option de menu que vous
pouvez prvisualiser dans un navigateur.

Appuyez sur la touche F12 pour afficher laperu dun menu contextuel. Les menus contextuels ne saffichent pas
dans lespace de travail de Fireworks.

Cration dun menu contextuel simple


1 Slectionnez la zone sensible ou la tranche qui va servir de zone de dclenchement au menu contextuel. 2 Procdez de lune des manires suivantes :

Choisissez Modification > Menu contextuel > Ajouter menu contextuel. Cliquez sur la poigne de comportement au milieu de la tranche, puis slectionnez Ajouter menu contextuel.
3 Cliquez sur longlet Contenu puis sur Ajouter un menu. 4 Cliquez deux fois sur chaque cellule, puis renseignez les informations Texte, Lien et Cible par saisie ou par slection.

Pour les champs Lien et Cible, saisissez des informations spcifiques ou effectuez une slection dans les menus affichs. La saisie du contenu sur la dernire ligne de la fentre insre une ligne vide en dessous de la dernire ligne. Appuyez sur la touche Tabulation pour vous dplacer entre les cellules, et sur les touches flches Haut ou Bas pour faire dfiler verticalement la liste.
5 Rptez les tapes 3 et 4 jusqu ce que tous les lments de menu soient dfinis. Pour supprimer un lment de

menu, cliquez sur le bouton Supprimer le menu.


6 Cliquez sur Suivant ou Termin, ou slectionnez un autre onglet.

Dans lespace de travail, la zone sensible ou la tranche sur laquelle vous avez cr le menu contextuel affiche un trait de comportement de couleur bleue reli un contour du niveau suprieur du menu contextuel.

Cration de sous-menus dans un menu contextuel


Les sous-menus sont des menus contextuels qui saffichent en rponse un vnement de souris (survol ou clic) sur un autre lment de menu contextuel. Vous pouvez crer autant de niveaux de sous-menus que vous le voulez.
1 Ouvrez longlet Contenu de lditeur de menu contextuel, puis crez des lments de menu. Placez les lments de

menu utiliser pour le sous-menu directement sous llment de menu pour lequel ils reprsenteront un sousmenu.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Cration de boutons et de menus contextuels

200

2 Mettez en surbrillance un lment de menu contextuel transformer en lment de sous-menu, puis cliquez sur le

bouton Retrait du menu.


3 Pour ajouter llment suivant au sous-menu, slectionnez cet lment, puis cliquez sur le bouton Retrait du menu.

Pour insrer un nouvel lment juste en dessous de llment mis en surbrillance, vous pouvez galement mettre en surbrillance un lment de menu ou de sous-menu et cliquer sur Ajouter un menu. Tous les lments adjacents et mis en retrait au mme niveau reprsentent un seul sous-menu contextuel.
4 Pour crer un sous-menu au sein dun sous-menu contextuel, mettez en surbrillance un lment de sous-menu

dans longlet Contenu de lditeur de menu contextuel, puis cliquez de nouveau sur le bouton Retrait du menu.
5 Cliquez sur Suivant pour continuer llaboration du menu contextuel, ou cliquez sur Termin.

Modification de laspect dun menu contextuel


Aprs avoir cr un menu de base et des sous-menus facultatifs, vous pouvez mettre en forme le texte, appliquer des styles graphiques aux tats Au-dessus et Relev et slectionner lorientation verticale ou horizontale sous longlet Aspect de lditeur de menu contextuel.
1 Dans lditeur de menu contextuel, ouvrez le menu contextuel, puis cliquez sur longlet Aspect. 2 Slectionnez Vertical ou Horizontal pour loption Choisit lalignement du menu droulant. 3 Slectionnez une option Cellules :
HTML Dfinit laspect du menu en utilisant uniquement du code HTML. Cette option cre des pages

correspondant des fichiers de petite taille.


Image Propose une slection de styles de graphique pour larrire-plan des cellules. Cette option cre des pages

correspondant des fichiers de taille importante.


4 Slectionnez une taille prdfinie dans le menu contextuel Taille ou entrez une valeur dans la zone de texte Taille.

Remarque : lorsque la largeur et la hauteur des cellules sont dfinies sur Automatique, dans longlet Avanc de lditeur de menu contextuel, la taille du texte dtermine celle des graphiques associs llment de menu.
5 Dans le menu contextuel Police, slectionnez un groupe de polices systme ou entrez le nom dune police

personnalise. Remarque : si la police que vous choisissez nest pas installe sur lordinateur de lutilisateur, une police de substitution est utilise dans son navigateur Web.
6 (Facultatif) Appliquez un style, un paramtre de justification ou une couleur au texte. 7 Slectionnez les couleurs du texte et des cellules pour chaque tat. 8 Si vous avez choisi Image comme type de cellule, slectionnez un style graphique pour chaque tat. 9 Poursuivez llaboration du menu contextuel ou cliquez sur Termin.

Ajout de styles de menu personnaliss dans lditeur de menu contextuel


Slectionnez un style de cellule utiliser lorsque le style de cellule Image est slectionn. Pour plus dinformations sur les styles, reportez-vous la section Cration et suppression de styles la page 158. Remarque : lemplacement exact du dossier Menu Bars varie en fonction du systme dexploitation. Pour plus dinformations, reportez-vous la section Utilisation des fichiers de configuration la page 316.
1 Appliquez une combinaison de contour, fond, texture et filtres dynamiques un objet, et enregistrez cette

combinaison sous forme de style dans le panneau Styles.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Cration de boutons et de menus contextuels

201

2 Dans le panneau Styles, slectionnez le nouveau style, puis choisissez la commande Enregistrer la bibliothque de

styles dans le menu Options du panneau Styles.


3 Localisez le dossier Barres de menu sur votre disque dur, renommez le fichier de styles si vous le souhaitez, puis

cliquez sur le bouton Enregistrer.

Dfinition de proprits de cellule avances


1 Ouvrez lditeur de menu contextuel et cliquez sur longlet Avanc. 2 Dans le menu contextuel Automatique/Pixels, slectionnez une largeur ou une hauteur maximale :
Automatique Rgle la hauteur de cellule sur la taille du texte dfinie dans longlet Aspect de lditeur de menu

contextuel et la largeur de cellule sur celle de llment de menu contenant le texte le plus long.
Pixels Permet dentrer des mesures spcifiques, en pixels, dans les zones de texte Largeur de cellule et Hauteur de cellule.

3 Entrez une valeur dans la zone de texte Marge intrieure des cellules pour dfinir la distance entre le texte du menu

contextuel et la bordure de la cellule.


4 Entrez une valeur dans la zone de texte Espacement entre les cellules pour dfinir lespacement entre les cellules du menu. 5 Entrez une valeur dans la zone de texte Retrait du texte pour dfinir la valeur de retrait du texte du menu contextuel. 6 Entrez une valeur dans la zone de texte Affichage menu pour dfinir, en millisecondes, la dure pendant laquelle le

menu reste affich aprs son survol par le pointeur.


7 Choisissez dafficher ou de masquer les bordures du menu contextuel. Si vous optez pour laffichage des bordures,

dfinissez les attributs des bordures.


8 Poursuivez llaboration du menu contextuel ou cliquez sur Termin.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Cration de boutons et de menus contextuels

202

Repositionnement des menus et sous-menus contextuels


Longlet Position de lditeur de menu contextuel vous permet de dfinir la position dun menu contextuel. Vous pouvez galement positionner un menu contextuel de niveau suprieur en faisant glisser son contour dans lespace de travail lorsque le calque Web est visible.

Dfinition de la position exacte dun menu ou sous-menu contextuel


1 Dans lditeur de menu contextuel, ouvrez le menu contextuel souhait, puis cliquez sur longlet Position. 2 Pour dfinir la position du menu, procdez de lune des manires suivantes :

Cliquez sur le bouton Position pour positionner le menu contextuel par rapport sa tranche de dclenchement. Entrez les coordonnes x et y. Les coordonnes 0,0 alignent le coin suprieur gauche du menu contextuel sur le
coin suprieur gauche de la tranche ou de la zone sensible qui le dclenche.
3 Dfinissez la position dun sous-menu :

Cliquez sur le bouton Position du sous-menu pour positionner le sous-menu par rapport son lment
dclencheur du menu contextuel.

Entrez les coordonnes x et y. Les coordonnes 0,0 alignent le coin suprieur gauche du sous-menu contextuel
sur le coin suprieur droit du menu ou de llment de menu dclencheur.
4 Dfinissez une position relative :

Pour dfinir la position de chaque sous-menu par rapport llment de menu parent qui le dclenche,
dslectionnez loption Placer la mme position.

Pour dfinir la position de chaque sous-menu par rapport au menu contextuel parent, slectionnez loption
Placer la mme position.
5 Cliquez sur Termin pour fermer lditeur de menu contextuel ou sur Prcdent pour modifier les proprits des

autres onglets.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Cration de boutons et de menus contextuels

203

Dfinition de la position dun menu contextuel en le faisant glisser


1 Pour afficher le calque Web, procdez de lune des manires suivantes :

Dans le panneau Outils, cliquez sur le bouton Afficher les tranches et les zones sensibles. Cliquez sur la colonne il dans le panneau Calques.
2 Slectionnez lobjet Web de dclenchement du menu contextuel. 3 Dans lespace de travail, faites glisser le contour du menu contextuel vers un autre emplacement.

Modification ou dplacement dlments dans des menus contextuels


Lditeur de menu contextuel permet de modifier ou de mettre jour le contenu dun menu contextuel, de rorganiser les lments de menu ou de modifier des proprits dans nimporte lequel des quatre onglets.
1 Pour afficher le calque Web, procdez de lune des manires suivantes :

Dans le panneau Outils, cliquez sur le bouton Afficher les tranches et les zones sensibles. Cliquez sur la colonne il dans le panneau Calques.
2 Slectionnez la tranche laquelle est reli le menu contextuel. 3 Cliquez deux fois sur le contour bleu du menu contextuel dans lespace de travail. 4 Dans lditeur de menu contextuel, effectuez les modifications ncessaires sur les onglets.

Modification du texte dun menu


1 Dans lditeur de menu contextuel, ouvrez le menu contextuel, puis cliquez sur longlet Contenu. 2 Cliquez deux fois dans la zone de texte Texte, Lien ou Cible pour modifier le texte du menu. Cliquez ensuite en

dehors de la liste des entres pour appliquer les modifications.

Dplacement dun lment de menu


1 Slectionnez llment de menu dans longlet Contenu de lditeur de menu contextuel. 2 Procdez de lune des manires suivantes :

Pour dplacer un lment vers un sous-menu suprieur ou vers le menu contextuel principal, cliquez sur le
bouton Retrait ngatif du menu.

Pour dplacer un lment dans le mme menu, faites glisser llment lemplacement souhait dans la liste.

A propos de lexportation des menus contextuels


Fireworks gnre tout le code CSS ou JavaScript (selon loption slectionne) ncessaire laffichage des menus contextuels dans les navigateurs Web. Si vous utilisez du code CSS pour vos menus contextuels, un document Fireworks contenant des menus contextuels est export au format HTML partir de code CSS. Vous pouvez galement choisir dcrire le code CSS dans un fichier .css externe et dexporter ce fichier avec un fichier mm_css_menu.js au mme emplacement que le fichier HTML. Vous pouvez utiliser du code JavaScript au lieu du code CSS. Si vous optez pour le code JavaScript, un document Fireworks contenant des menus contextuels est export en HTML, et un fichier JavaScript appel mm_menu.js est export vers le mme emplacement que le fichier HTML.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Cration de boutons et de menus contextuels

204

Lorsque vous chargez les fichiers, ce fichier mm_css_menu.js (ou mm_menu.js pour du JavaScript) doit tre transfr dans le mme dossier que la page Web qui contient le menu contextuel. Pour stocker ce fichier dans un autre emplacement, mettez jour tous les liens hypertextes faisant rfrence au fichier mm_css_menu.js et au fichier .css (ou mm_menu.js) dans le code HTML de Fireworks pour reflter ce nouvel emplacement. Un seul fichier .css est export pour chaque document contenant des menus contextuels CSS que vous exportez en tant que fichier HTML accompagn dimages depuis Fireworks. Lorsque vous incluez des sous-menus, un fichier dimage est cr (arrows.gif) dans Fireworks. Il correspond la petite flche qui saffiche en regard de chaque lment de menu qui contient un sous-menu. Quel que soit le nombre de sousmenus que contient un document, Fireworks utilise toujours ce fichier arrows.gif. Pour plus dinformations sur lexportation de code HTML, reportez-vous la section Exportation de code HTML la page 257.

Dernire mise jour le 12/5/2011

205

Chapitre 14 : Prototypage de sites Web et dinterfaces dapplications


Adobe Fireworks fournit un environnement de prototypage idal, convertissant de faon transparente des modles de conception en sites Web et applications relles.

Flux de production de prototypage


En associant le panneau Pages dautres fonctions performantes de Fireworks, vous pouvez crer rapidement des prototypes de logiciels et de sites Web interactifs. Pour convertir un prototype finalis en site fonctionnel, il vous suffit de lexporter vers Adobe Flash, Adobe Flex, Adobe AIR ou Adobe Dreamweaver. Pour obtenir des conseils dordre gnral sur les flux de production de prototypage, voir les articles suivants dans le ple de dveloppement Fireworks :

Larticle de Nick Myers sur la conception de produits interactifs laide de Fireworks :


http://www.adobe.com/go/learn_fw_interactiveproducts_fr

Larticle de Dave Cronin sur les tendances du prototypage :


http://www.adobe.com/go/learn_fw_prototypingtrends_fr

Larticle de Matt Stow sur lutilisation de modles CSS prdfinis dans Fireworks (en anglais) : Prebuilt CSS
templates in Fireworks CS4.

Larticle de Jim Babbage (en anglais) : Fireworks CS4 How-Tos excerpts: Importing, exporting, symbols,
prototyping, scaling.

Les didacticiels vido de Dave Hogue sur lutilisation de pour la cration de linteraction et le prototypage rapide : Utilisation de Fireworks pour la cration de linformation et de linteraction :
http://www.adobe.com/go/learn_fw_infointeract_fr

Cration de prototypes interactifs laide de Fireworks :


http://www.adobe.com/go/learn_fw_creatinginteractivepro_fr

Prototypage rapide laide de Fireworks : http://www.adobe.com/go/learn_fw_rapidpro_fr Fireworks partie intgrante du processus de cration :
http://www.adobe.com/go/learn_fw_completedesignpro_fr

Article sur la cration dune application de site Web laide de Fireworks :


http://www.adobe.com/go/learn_fw_designwebsiteapp_fr

Larticle de Kumar Vivek sur la cration de projets pour les priphriques mobiles dans Fireworks :
http://www.adobe.com/go/learn_fw_designmobiledevices_fr Pour visionner un didacticiel vido sur les principes de base de Fireworks, reportez-vous www.adobe.com/go/lrvid4032_fw_fr.
1. Cration des pages

Dans le panneau Pages, crez le nombre de pages ou dcrans ncessaires la ralisation de votre projet initial. Au fur et mesure que votre projet volue, vous pouvez y ajouter des pages, ou en supprimer, votre convenance.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Prototypage de sites Web et dinterfaces dapplications

206

2. Disposition des lments de conception communs

Dans la zone de travail, disposez les lments conceptuels reproduire sur plusieurs pages (barres de navigation et images darrire-plan, par exemple). Servez-vous des repres comments pour aligner les lments. Pour travailler avec un maximum de souplesse, structurez votre mise en page avec des feuilles de style CSS (voir les sections Repres comments la page 33 et Cration de dispositions CSS la page 211)..
3. Partage dlments communs entre plusieurs pages

La modification dun lment commun plusieurs pages se rpercute systmatiquement sur toutes les pages concernes. Servez-vous dun gabarit pour partager tous les lments du contenu, ou partagez les calques pour copier des sous-ensembles dlments (voir les sections Utilisation dun gabarit la page 208 et Partage des calques la page 139).
4. Ajout dlments uniques des pages individuelles

Sur chaque page, vous pouvez ajouter des lments uniques de conception, de navigation ou de forme. Dans le panneau Bibliothque commune, vous trouverez de nombreux boutons, des zones de texte et des menus contextuels qui vous permettront dacclrer le processus de conception. Les symboles contenus dans les dossiers Flex Components, HTML, Mac, Win, Web et Application et Barres de menu prsentent des proprits que vous pouvez personnaliser pour certaines occurrences de symboles (voir la section Cration et utilisation de symboles de composant la page 164).
5. Simulation de la navigation utilisateur laide de liens

A partir dobjets Web tels que tranches, zones sensibles ou boutons de navigation, vous pouvez relier les diffrentes pages de votre prototype (voir la section Lien vers des pages dans un document Fireworks la page 170).
6. Exportation du prototype finalis interactif

Pour votre prototype, Fireworks propose de nombreux formats de sortie qui conservent tous les liens hypertextes de navigation. Voir les articles suivants :

Pour partager avec des clients un prototype CSS flexible ou le peaufiner dans Adobe Dreamweaver, voir
Exportation dune disposition CSS la page 212.

Pour crer un prototype plus classique reposant sur une table, voir Exportation de code HTML Fireworks la
page 258.

Pour distribuer une version du prototype au format PDF en vue de le commenter ou de limprimer, voir
Exportation de fichiers Adobe PDF la page 263.

Pour crer un prototype dapplication Flex, reportez-vous la section Prototypage dapplications Flex la
page 213. Pour crer une application Adobe AIR, reportez-vous la section Cration dune application Adobe AIR la page 216.

Utilisation de pages Fireworks


Un seul fichier PNG Fireworks peut contenir plusieurs pages, ce qui est idal pour le prototypage de sites Web et dinterfaces dapplications. Chaque page contient des paramtres uniques relatifs la taille, la couleur, la rsolution graphique et les repres. Vous pouvez dfinir ces options soit page par page, soit globalement (pour toutes les pages dun document). Chaque page peut galement contenir un ensemble unique de calques, outre le calque Web. Toutefois, pour les lments communs, vous pouvez utiliser un gabarit ou partager des calques sur plusieurs pages (voir la section Partage des calques la page 139).

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Prototypage de sites Web et dinterfaces dapplications

207

Si vous ne crez pas dautres pages, tous les lments de votre document rsident sur une seule page. Vos pages sont visibles dans le panneau Pages, qui affiche les objets prsents sur chaque page sous forme de vignettes en regard du nom de la page. La page active est mise en surbrillance dans le panneau et indique dans le menu contextuel de pages, au-dessus du document actif. Pour plus dinformations sur lexportation de pages, reportez-vous la section Exportation depuis lespace de travail la page 253.

Ajout et suppression de pages, navigation dans les pages


Dans le panneau Pages, vous pouvez ajouter de nouvelles pages, supprimer des pages inutiles et dupliquer des pages existantes. Lorsque vous ajoutez, supprimez ou dplacez des pages, Fireworks met systmatiquement jour le nombre de pages indiqu gauche des titres de pages. Ces numros gnrs automatiquement permettent daccder rapidement des pages spcifiques, dans des conceptions multipages.

Ajout dune page


Une page vierge est insre la fin de la liste de pages ; elle devient la page active.
Procdez de lune des manires suivantes :

Dans le panneau Pages, cliquez sur le bouton Nouvelle page/Dupliquer la page


contextuel.

Cliquez avec le bouton droit de la souris dans le panneau, puis slectionnez Nouvelle page dans le menu Choisissez Edition > Insertion > Page.

Accs une page


Procdez de lune des manires suivantes :

Dans le panneau Pages, slectionnez une page. Au clavier, utilisez les boutons Page vers le haut et Page vers le bas. Choisissez une page dans le menu contextuel de pages dans la partie suprieure de la fentre du document ou
dans la partie infrieure droite du panneau Pages. Un astrisque situ en regard du nom de la page dans le menu contextuel de pages indique le gabarit.

Duplication dune page


La duplication permet dajouter une nouvelle page contenant les mmes objets et la mme hirarchie de calques que la page slectionne. Les objets dupliqus conservent lopacit et le mode de fusion des objets dorigine. Vous pouvez modifier les objets dupliqus sans agir sur les originaux.
Procdez de lune des manires suivantes :

Faites glisser une page vers le bouton Nouvelle/Dupliquer page. Cliquez avec le bouton droit de la souris sur la page, puis slectionnez Dupliquer la page dans le menu
contextuel.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Prototypage de sites Web et dinterfaces dapplications

208

Dplacement dune ou plusieurs pages


Dans le panneau Pages, dplacez des pages pour rapprocher des conceptions apparentes et acclrer la mise en page.
1 (Facultatif) Si vous dplacez plusieurs pages, procdez de lune des manires suivantes :

Cliquez dessus en maintenant la touche Maj enfonce pour slectionner un groupe contigu. Tout en maintenant la touche Ctrl (Windows) ou Cmde (Mac OS) enfonce, cliquez dessus pour slectionner
un groupe non contigu.
2 Faites glisser les pages slectionnes vers le haut ou vers le bas du panneau. Au-dessus et au-dessous dautres pages,

des bordures sombres apparaissent ; vous pouvez relcher le bouton de la souris dans ces zones pour y dplacer les pages slectionnes.

Suppression dune page


La page situe au-dessus de la page supprime devient la page active.
Procdez de lune des manires suivantes :

Dans le panneau Pages, faites glisser la page jusqu licne de la corbeille


contextuel.

Cliquez avec le bouton droit de la souris sur la page, puis slectionnez Supprimer la page dans le menu

Modification de la zone de travail dune page


Chaque page prsente une zone de travail qui lui est propre, avec une taille, une couleur et une rsolution graphique indpendantes.
1 Slectionnez une page dans le panneau Pages ou dans le menu contextuel de pages, dans la partie suprieure de la

fentre du document.
2 Choisissez Modification > Zone de travail > Taille de limage, Modification > Zone de travail > Couleur de la zone

de travail ou Modification > Zone de travail > Taille de la zone de travail.


3 Apportez les modifications ncessaires. Vous pouvez galement effectuer ces modifications via le panneau

Proprits lorsque la zone de travail dune page est slectionne.


4 Pour appliquer les modifications la page slectionne uniquement, ne dslectionnez pas loption Page actuelle

uniquement. Pour appliquer les modifications toutes les pages, dslectionnez loption.

Utilisation dun gabarit


Pour exploiter un mme ensemble dlments sur toutes vos pages, utilisez une page matresse appele un gabarit. Lorsque vous convertissez une page ordinaire en gabarit, cette page devient la premire de la liste affiche dans le panneau Pages. Lorsque vous crez un gabarit, un calque de gabarit est ajout au bas de la hirarchie des calques pour chaque page.

Cration dun gabarit


Dans le panneau Pages, cliquez avec le bouton droit sur une page existante, puis slectionnez Dfinir comme gabarit

dans le menu contextuel. Tous les calques partags sur plusieurs pages deviennent des calques ordinaires (non partags). En revanche, les calques partags entre les images restent inchangs. Pour afficher des cadres de gabarit dans une page lie, reportezvous la section Affichage des objets dans un tat la page 225.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Prototypage de sites Web et dinterfaces dapplications

209

Voir aussi
Partage des calques la page 139

Liaison de pages au gabarit


Une fois le gabarit cr, toutes les pages nouvellement cres hritent systmatiquement des paramtres de ce gabarit. En revanche, vous devez lier les pages existantes au gabarit pour quelles adoptent ses paramtres. Si vous modifiez ensuite le gabarit, toutes les pages lies sont automatiquement mises jour. Les restrictions suivantes sappliquent lhritage des objets et des comportements entre les gabarits et dautres pages :

Les pages hritent uniquement de ltat actif de lensemble des objets dun gabarit. Pour quelles hritent de tous les
tats de tous les objets, sur chaque page, ajoutez le mme nombre dtats ou plus dtats lobjet associ au plus grand nombre dtats. Tous les objets de cette page hritent de tous les tats issus du gabarit.

Les modifications apportes la taille de la zone de travail ou de limage se rpercutent sur toutes les pages, y
compris celles non lies au gabarit. Pour que les modifications ne sappliquent qu la page active, slectionnez Page active uniquement.

Seules les pages lies hritent des modifications relatives la couleur de la zone de travail du gabarit.
Procdez de lune des manires suivantes :

Dans le panneau Pages, cliquez avec le bouton droit sur une page existante, puis slectionnez Lien vers le gabarit
dans le menu contextuel.

Cliquez dans la colonne gauche de la vignette de page dans le panneau Pages. Licne de lien indique que la
page est lie au gabarit. Remarque : si vous modifiez un paramtre dans une page lie au gabarit, le nouveau paramtre est pris en compte mais annule le lien avec le gabarit.

Affichage ou masquage du calque de gabarit


Tout changement de visibilit se rpercute sur toutes les pages.
Dans le panneau Calques, cliquez sur licne en forme dil situ gauche du calque de gabarit.

Suppression des calques de gabarit


Cliquez avec le bouton droit de la souris sur le panneau Calques, puis slectionnez Supprimer le calque du gabarit

dans le menu contextuel. Pour rintgrer le calque de gabarit la page, cliquez avec le bouton droit dans le panneau Calques, puis slectionnez Ajouter le calque du gabarit dans le menu contextuel.

Transformation dun gabarit en page ordinaire


Cliquez avec le bouton droit de la souris dans le panneau Pages, puis slectionnez Rinitialiser le gabarit dans le

menu contextuel.

Exportation des pages slectionnes


Vous pouvez exporter plusieurs pages en une mme opration. Seules les pages slectionnes sont exportes. Lors de cette opration, les paramtres doptimisation de chaque page sont utiliss.
1 Dans le panneau Pages, slectionnez les pages exporter. 2 Cliquez avec le bouton droit de la souris et slectionnez Exporter la/les page(s) slectionne(s).

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Prototypage de sites Web et dinterfaces dapplications

210

3 Dans la bote de dialogue Exporter, slectionnez lune des options suivantes dans le menu Exporter :
Calques vers fichiers Exporte les calques que contiennent les pages slectionnes en tant que fichiers distincts. Etats vers fichiers Exporte les tats que contiennent les pages slectionnes en tant que fichiers distincts. Pages vers fichiers Exporte les pages slectionnes en tant que fichiers distincts.

Personnalisation des noms de fichier lors de l'exportation des pages


1 Dans le panneau Pages, slectionnez les pages exporter. 2 Cliquez avec le bouton droit de la souris et slectionnez Exporter la/les page(s) slectionne(s). 3 Dans la bote de dialogue Exporter, cliquez sur Options. Le bouton Options est activ en fonction de l'option

slectionne dans le menu Exporter.


4 Dans la bote de dialogue Options dexportation, slectionnez Ajouter un prfixe ou Ajouter un suffixe, puis

choisissez une option dans le menu. Vous pouvez attribuer un nom aux fichiers laide de lune des options suivantes :
nom document Le nom du fichier source est ajout en tant que prfixe ou suffixe. Si, par exemple, vous exportez la page Index du fichier source sites.png et slectionnez loption Ajouter un prfixe, le fichier gnr sappelle Sites_Index.gif . Numrique (1, 2, 3...ou 01, 02, 03...) Les fichiers sont gnrs par ordre numrique, des nombres tant ajouts

comme prfixe ou suffixe. Tous les fichiers de page exports sont numrots dans lordre dans lequel ils figurent dans le panneau Pages. Lorsque vous exportez un grand nombre de pages, faites appel la squence deux chiffres.
5 Les options du menu Type de fichier permettent doptimiser les paramtres du fichier export.

Exportation des tranches des pages slectionnes


Lors de lexportation, les tranches que contient le fichier source ne sont pas prises en compte. Pour les exporter, faites appel aux paramtres suivants de la bote de dialogue Exporter.
1 Dans le menu Exporter, slectionnez Documents HTML et images ou Images uniquement. 2 Dans le menu HTML, slectionnez Exporter le fichier HTML. 3 Dans le menu Dcoupes, slectionnez Exporter les tranches. 4 Slectionnez lune des options suivantes :
Dcoupes slectionnes uniquement Les zones marques en tant que tranches sont exportes. Inclure les zones sans tranches Les zones qui ne sont pas marques en tant que tranches sont galement exportes.

Aperu de plusieurs pages


Lors de limportation ou de louverture de fichiers, affichez un aperu de toutes les pages, except le gabarit. La page slectionne lors de laperu reoit le focus louverture du fichier. Lorsque vous insrez une page contenant des objets issus du calque du gabarit, le gabarit est converti en un calque ordinaire et import.

Activation de laperu de plusieurs pages


Lorsque vous importez ou ouvrez un fichier, affichez un aperu de toutes les pages quil contient. Loption daperu de plusieurs pages est active par dfaut dans la bote de dialogue Prfrences.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Prototypage de sites Web et dinterfaces dapplications

211

Pour activer laperu de plusieurs pages pour les fichiers crs dans les versions prcdentes, ouvrez ceux-ci dans la version en cours et enregistrez-les.
1 Dans la bote de dialogue Prfrences, slectionnez Gnrales. 2 Slectionnez Enregistrer les vignettes sur chaque page pour activer laperu de plusieurs pages. Lorsque cette option

est dsactive, les noms de page sont enregistrs mais les vignettes ne sont pas gnres pour les fichiers correspondants.

Aperu de plusieurs pages avant ouverture ou importation


Sous Windows, laperu est affich dans la bote de dialogue Importer ou Ouvrir lorsque vous importez ou ouvrez
un fichier.

Sur le Mac, cliquez sur Aperu dans la bote de dialogue Importer ou Ouvrir. Vous pouvez galement cliquer deux
fois sur le fichier dans la bote de dialogue Importer pour activer le mode Aperu. Lors de l'importation de fichiers, slectionnez Insrer aprs la page active pour ajouter des pages importes aprs la page slectionne dans le document.

Cration de dispositions CSS


Vous pouvez crer des dispositions CSS dans un document Fireworks, puis les convertir en pages HTML via des rgles CSS rpliquant vos dispositions. Les dispositions CSS fournissent une mthode normalise et offrent un code compatible avec diffrents navigateurs. Pour visionner un didacticiel vido sur la cration de dispositions de page HTML CSS, accder www.adobe.com/go/lrvid4035_fw_fr. Voir galement les ressources suivantes :

Didacticiel d'exportation de fichiers CSS et d'images dans Fireworks sur


http://www.adobe.com/go/learn_fw_exportcssimages_fr.

Didacticiel de cration de sites Web conformes aux normes avec Fireworks sur
http://www.adobe.com/go/learn_fw_standardscompliantdesign_fr.

A propos de la mise en page CSS


Fireworks permet de concevoir des pages et dexporter instantanment le code HTML et CSS grce un moteur dexportation qui analyse lemplacement des objets. En outre, vous pouvez dfinir lalignement des pages et spcifier une image darrire-plan rcurrente. Vous pouvez utiliser les lments HTML disponibles dans le dossier HTML de la bibliothque commune. Le dossier HTML contient des lments HTML, par exemple des boutons, des listes droulantes et des champs de texte. Vous pouvez modifier les proprits de ces lments dans le panneau Proprits du symbole. Lorsque vous faites glisser les lments de forme sur la page, le moteur dexportation insre des balises <form> pendant lexportation de la disposition CSS. Tout texte auquel a t ajoute une tranche saffiche sous la forme dimages dans le code HTML export. Pour que ce texte saffiche sous la forme dun texte, utilisez les composants HTML dans la bibliothque commune. Les composants HTML comprennent les en-ttes 1 6 et des lments de lien.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Prototypage de sites Web et dinterfaces dapplications

212

Rgles des dispositions CSS


Quelques rgles doivent tre observes pendant la cration des dispositions CSS pour obtenir les rsultats souhaits.
Rgle 1 : utilisez les rectangles pour exporter du texte et les tranches pour exporter des images Le moteur

dexportation exporte le texte plac dans les rectangles. Comme seules les images qui sont recouvertes par des tranches rectangulaires sont exportes, placez des tranches sur les images exporter. Ces tranches indiquent au moteur dexportation lemplacement de ces images.
Rgle 2 : vitez la superposition des objets Le moteur dexportation traite le texte, les images et les rectangles comme

des blocs rectangulaires. Il examine la taille et la position de ces objets pour dterminer les lignes et les colonnes logiques dans lesquelles les placer dans la disposition. Positionnez avec soin les objets en veillant ce que les limites ne se superposent pas.
Rgle 3 : planifiez la disposition des lignes et des colonnes Le moteur dexportation recherche les partitions logiques o une dlimitation nette peut tre place entre les objets et les groupes dobjets. Dlimitez les dispositions des colonnes dans un rectangle pour empcher le moteur dexportation dinsrer une ligne logique qui viendrait rompre la disposition des colonnes. Rgle 4 : traitez le document en deux dimensions Lorsque vous crez votre page, utilisez des rectangles pour encadrer

les objets que vous souhaitez traiter comme les enfants du rectangle. Le moteur dexportation dtecte ces relations parent-enfant. Il analyse les lments enfants des lignes et des colonnes logiques comme dans la rgle 3. En plus de ces rgles, vous devez faire attention aux points suivants :

Le moteur dexportation nexporte que des rectangles primitifs. Pour exporter les angles arrondis des rectangles,
recouvrez-les avec des tranches rectangulaires.

Pour exporter les contours des rectangles, recouvrez-les avec des tranches rectangulaires. Pour exporter les symboles, recouvrez-les avec une tranche rectangulaire. Pour exporter les filtres que vous avez appliqus au texte ou aux rectangles, recouvrez-les avec des tranches
rectangulaires.

Exportation dune disposition CSS


Fireworks permet dexporter des dispositions cres en tant que fichiers CSS. Vous pouvez ensuite ouvrir et modifier ces fichiers CSS dans Dreamweaver ou dans un autre diteur compatible avec CSS.
1 Choisissez la commande Fichier > Exporter. 2 Dans le menu contextuel Exporter, slectionnez la commande CSS et Images. 3 Pour dfinir les proprits de la page HTML, cliquez sur Options. 4 Pour dfinir une image darrire-plan et la faire apparatre en mosaque, cliquez sur Parcourir :

Pour afficher limage une seule fois, slectionnez Pas de rptition. Pour rpter, ou mettre en mosaque, limage lhorizontale et la verticale, slectionnez Rptition. Slectionnez Rpter-x pour former une mosaque horizontale. Pour former une mosaque verticale, slectionnez Rpter-y.
5 Dans le navigateur, slectionnez un alignement de page gauche, au centre ou droite. 6 Slectionnez le dfilement des pices jointes en mode fixe ou dfilement. 7 Cliquez sur le bouton OK, puis sur Enregistrer.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Prototypage de sites Web et dinterfaces dapplications

213

Cration dune dmonstration du document


Vous pouvez crer une dmonstration du document Fireworks sur lequel vous travaillez. La dmonstration souvre dans un navigateur afin de prsenter les caractristiques et vous permet de naviguer dans les pages.
1 Slectionnez Commandes > Dmonstration - Document actif. 2 Slectionnez les pages pour lesquelles vous voulez crer une dmonstration, puis cliquez sur loption de cration

dune dmonstration.
3 Slectionnez le dossier, puis cliquez sur Ouvrir.

Prototypage dapplications Flex


Le processus de prototypage pour Flex est semblable au flux de production utilis pour les sites Web et les interfaces logicielles (voir la section Flux de production de prototypage la page 205). Avec Fireworks, vous avez la possibilit de faire glisser des composants Flex dans la zone de travail, de spcifier leurs proprits et dexporter linterface utilisateur rsultante vers MXML. Vous pouvez ensuite amliorer linterface utilisateur dans Flex Builder.
1. Cration dune interface utilisateur Flex

A laide du panneau Pages, crez le nombre dcrans dinterface ncessaires la ralisation de votre projet initial.
2. Insertion de composants de conception Flex dans la disposition

Dans la zone de travail, insrez des composants Flex depuis le dossier Flex dans le panneau Bibliothque commune. Ces symboles de composant sont spcifiquement utiliss avec lexportation MXML de faon obtenir les rsultats souhaits. Lors de lexportation de votre document en tant que MXML, chacun de ces symboles est respectivement converti en la balise MXML qui lui correspond. Les objets qui ne sont pas reconnus comme composants Flex sont exports en tant que bitmaps, qui sont lis au MXML via une balise <mx:Image> (voir la section Cration et utilisation de symboles de composant la page 164). Lors de la modification dun composant de conception Flex dans Fireworks, vous pouvez copier le code XML modifi dans votre projet Flex. Vous gagnez ainsi du temps si vous souhaitez rpliquer le comportement du composant modifi dans votre projet. Les symboles Curseur, BarreDeDfilement, Onglet et Info-bulle sont ignors pendant une sortie MXML tant donn que ces composants ne sont pas directement convertis depuis Fireworks vers MXML. Par exemple, le symbole BarreDeDfilement saffiche automatiquement dans les instances du conteneur Flex lorsquil est possible de faire dfiler leur contenu. Dans Fireworks, ces symboles font simplement office dindicateurs sur le mode de fonctionnement des parties dune conception dinterface. Remarque : les tranches dimage, les survols et les zones sensibles sappliquent uniquement aux prototypes HTML. Evitez ces objets Web lors de la cration de prototypes Flex.
3. Partage de composants Flex communs entre plusieurs pages

Si un composant Flex est commun plusieurs pages, toute modification met automatiquement jour toutes les pages (ou crans) affect(e)s. Servez-vous dun gabarit pour partager tous les composants Flex quil contient ou partagez les calques pour copier des sous-ensembles des composants (voir les sections Utilisation dun gabarit la page 208 et Partage des calques la page 139).

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Prototypage de sites Web et dinterfaces dapplications

214

4. Spcification de proprits pour les composants Flex

Dans le panneau Proprits du symbole (Fentre > Proprits du symbole), spcifiez les proprits et les vnements de chaque composant Flex insr dans la zone de travail.
5. Exportation de la disposition Flex au format MXML

Exportez la disposition dinterface utilisateur Flex, puis ouvrez le fichier MXML rsultant dans Flex. Fireworks exporte le MXML requis tout en conservant le style et le positionnement absolu. Les dveloppeurs Flex peuvent utiliser cette interface sans avoir recrer la disposition dans Flex.

Modification des proprits de composants Flex


Vous pouvez modifier les proprits et les vnements des composants Flex dans le panneau Proprits du symbole.
1 Slectionnez le composant Flex dans la zone de travail. 2 Ouvrez le panneau Proprits du symbole (Fentre > Proprits du symbole). 3 Dfinissez les proprits et les vnements du composant dans le panneau Proprits du symbole.

Exportation dun document Fireworks au format MXML


Fireworks peut vous permettre de structurer des applications Internet enrichies (RIA) en activant lexportation dactifs de bibliothque communs en tant que composants connus utiliser dans Adobe Flex Builder. Fireworks exporte le code Flex requis (MXML) tout en conservant le style et le positionnement absolu. Lors de la finalisation dun prototype dapplication Flex, exportez-le au format MXML en vue dditions supplmentaires dans Flex Builder. En mode de conception, le prototype ressemble son quivalent Fireworks, sauf en ce qui concerne les composants tels que les curseurs et les barres de dfilement qui ne sont pas exports.
1 Choisissez la commande Fichier > Exporter. 2 Dans le menu contextuel Exporter, slectionnez MXML et images. 3 Slectionnez loption Placer les images dans des sous-dossiers si vous souhaitez enregistrer les images dans un

dossier distinct de celui contenant le code MXML.


4 Slectionnez loption Page active uniquement pour nexporter que la page slectionne. 5 Cliquez sur Enregistrer pour terminer lexportation.

Les images associes au prototype sont exportes vers le dossier dimages. De plus, les images des pages MXML compltes sont galement cres avec les autres fichiers dimages. Vous pouvez supprimer les pages MXML car elles ne requirent pas ces images daperu.

Cration et exportation dhabillages Flex


Vous pouvez habiller des composants Flex dans Fireworks, puis les exporter afin de les utiliser dans des sites Web et des interfaces dapplication Flex.

Composants Flex dhabillage


Vous pouvez crer des habillages pour de nombreux composants Flex bass sur les modles dhabillage Flex et les modifier dans Fireworks.
1 Slectionnez Commandes > Habillage Flex > Nouvel habillage Flex.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Prototypage de sites Web et dinterfaces dapplications

215

2 Procdez de lune des manires suivantes :

Pour crer des habillages Flex pour tous les composants disponibles, slectionnez Composants multiples.
Fireworks cre un seul document avec tous les composants Flex disponibles.

Pour spcifier les composants pour lesquels vous voulez crer des habillages, slectionnez
Composants spcifiques. Slectionnez uniquement les composants qui ont un style spcifique ou slectionner toutes les instances du composant.
3 Cliquez sur OK.

Exportation dhabillages Flex


1 Slectionnez Commandes > Habillage Flex > Exporter habillage Flex. 2 Slectionnez le dossier dexportation du document Fireworks et cliquez sur Ouvrir.

Restrictions de lexportation MXML


Avant dutiliser la fonction dexportation Flex MXML, il est important de connatre ses fonctionnalits et ses limites :
Lexportation MXML ne procde pas lhabillage des composants Lexportation au format MXML ne cre pas

dhabillages pour les composant dans Flex, mme si vous les avez modifis dans Fireworks. Lexportation au format MXML gnre simplement des documents MXML utiliser dans Flex. Ces documents peuvent galement comporter des images lies pour des objets Fireworks qui ne peuvent pas tre convertis en balises MXML. Ces images sont ajoutes au document MXML via des balises <mx:Image>.
Lexportation MXML ignore les tranches Lexportation au format MXML tant conue pour gnrer un document

dot de balises utiliser avec Flex, les tranches ne sont pas prises en compte dans la cration dimages ou de cellules de tableau. Lorsque lexportation au format MXML cre des images, elle utilise les paramtres doptimisation du document pour dterminer le format dimage et la mthode de compression.
Les proprits MXML sont limites aux proprits de symboles enrichis Lexportation au format MXML base les

proprits dune balise MXML sur le composant Flex dans Fireworks. Fireworks fournit un sous-ensemble de composants Flex avec un nombre de proprits limit.
Les styles sont intgrs Les proprits reconnues en tant que styles sont spares des balises MXML cres, mais sont

conserves dans le mme document MXML dans une balise <mx:Style>. Fireworks ne peut pas dfinir les styles dans un fichier CSS externe.
Les cadres ne sont pas pris en charge Lors de la cration de conceptions et de mises en page pour une sortie MXML, nutilisez pas de cadres. Si vous souhaitez obtenir des conceptions diffrentes dans un document, utilisez des pages.

Voir aussi
Cration et utilisation de symboles de composant la page 164

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Prototypage de sites Web et dinterfaces dapplications

216

Prototypage dapplications Adobe AIR


Grce Adobe AIR pour Fireworks, vous pouvez convertir un prototype Fireworks en une application de bureau. Par exemple, certaines pages de prototype interagissent entre elles pour afficher des donnes. Vous pouvez utiliser Adobe AIR pour regrouper cet ensemble de pages en une petite application qui peut tre installe sur lordinateur dun utilisateur. Lorsquun utilisateur excute lapplication depuis son bureau, celle-ci se charge et affiche le prototype dans sa propre fentre dapplication, indpendamment dun navigateur. Lutilisateur peut ainsi consulter le prototype en local sur son ordinateur sans connexion Internet. Voir larticle dEthan Eismann sur Adobe AIR et lexprience utilisateur de la marque : http://www.adobe.com/go/learn_fw_airexperiencebrand_fr.

Ajout dvnements de souris Adobe AIR


Vous pouvez ajouter des vnements de souris Adobe AIR prdfinis aux objets de votre document. Fireworks propose quatre vnements de souris prdfinis : fermer la fentre, faire glisser la fentre, agrandir la fentre et rduire la fentre.
1 Slectionnez les objets sur la zone de travail auxquels vous souhaitez appliquer les vnements de souris. 2 Slectionnez la commande Commandes > Evnements de souris 3D et choisissez lvnement.

Aperu dune application Adobe AIR


Vous pouvez prvisualiser une application Adobe AIR sans dfinir de paramtres dapplication Adobe AIR.
Choisissez la commande Commandes > Crer un package AIR, puis cliquez sur l'option Aperu.

Cration dune application Adobe AIR


Slectionnez Commandes > Crer un package AIR et dfinissez les options suivantes : Nom de lapplication Spcifiez le nom qui saffiche sur les crans dinstallation lorsque des utilisateurs installent

lapplication. Lextension spcifie le nom du site Fireworks par dfaut.


ID de lapplication Entrez un ID unique pour votre application. Nutilisez pas despaces ni de caractres spciaux

dans lID. Les seuls caractres valides sont 0 9, a z, A Z, . (point) et - (tiret). Ce paramtre est obligatoire.
Version Spcifiez un numro de version pour votre application. Ce paramtre est obligatoire. Dossier du menu Programmes Spcifiez un dossier dans le menu Dmarrer de Windows o vous souhaitez crer le

raccourci vers lapplication. (Non applicable sous Mac OS)


Description Ajoutez la description afficher lorsque lutilisateur linstalle lapplication. Copyright Spcifiez lavis de copyright qui saffiche dans la section indiquant des informations sur les applications

Adobe AIR installes sous Mac OS. Ces informations ne sont pas utilises pour les applications installes sous Windows.
Contenu du package Slectionnez loption Document actif pour dfinir automatiquement le dossier partir

duquel les fichiers sont inclus.


Contenu racine Cliquez sur Parcourir pour choisir la page qui saffiche en tant que contenu racine. Si vous avez slectionn Document actif, le contenu racine est dfini automatiquement. Fichiers inclus Spcifiez les fichiers ou dossiers inclure dans votre application. Vous pouvez ajouter des fichiers HTML et CSS, des fichiers dimage et des fichiers de bibliothque JavaScript. Cliquez sur le bouton Plus (+)

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Prototypage de sites Web et dinterfaces dapplications

217

pour ajouter des fichiers et sur licne de dossier pour ajouter des dossiers. Pour supprimer un fichier ou un dossier de la liste, slectionnez-le et cliquez sur le bouton Moins (-). Les fichiers ou les dossiers slectionns inclure dans le package Adobe AIR doivent appartenir au dossier du contenu racine.
Chrome systme et Transparent Spcifiez le style de fentre (ou chrome) utiliser lorsque les utilisateurs excutent lapplication sur leur ordinateur. Le chrome systme entoure lapplication avec le contrle de fentre standard du systme dexploitation. Le chrome transparent supprime le chrome systme standard et vous permet de crer le vtre pour lapplication. Vous pouvez donc crer des fentres dapplication qui ne sont pas rectangulaires. Largeur et Hauteur Spcifiez les dimensions de la fentre dapplication en pixels lorsquelle souvre. Slectionner les images dicne Cliquez pour slectionner des images personnalises pour les icnes de lapplication. Slectionnez le dossier pour chaque taille dicne et choisissez limage utiliser. Seuls les fichiers PNG sont pris en charge pour les images dicnes de lapplication.

Remarque : les images personnalises slectionnes doivent rsider dans le site de lapplication et leurs chemins doivent tre relatifs la racine du site.
Signature numrique Cliquez sur Dfinir pour signer votre application laide dune signature numrique. Ce

paramtre est obligatoire. Pour plus dinformations, reportez-vous aux sections suivantes.
Crer un package du fichier Spcifiez le dossier dans lequel est enregistr le nouveau programme dinstallation de

lapplication (fichier .air). Lemplacement par dfaut est la racine du site. Cliquez sur le bouton Parcourir pour choisir un autre emplacement. Le nom de fichier par dfaut est bas sur le nom du site suivi de lextension .air. Ce paramtre est obligatoire.

Signature dune application Adobe AIR laide dun certificat numrique


Une signature numrique permet de garantir que le code dune application na pas t modifi ou corrompu depuis sa cration par lauteur du logiciel. Toutes les applications Adobe AIR ncessitent une signature numrique et ne peuvent tre installes sans celle-ci.
1 Dans la bote de dialogue Crer un package AIR, cliquez sur le bouton Dfinir situ en regard de loption Signature

numrique.
2 Dans la bote de dialogue Signature numrique, effectuez lune des oprations suivantes :

Pour signer une application avec un certificat numrique prachet, cliquez sur le bouton Parcourir,
slectionnez le certificat, entrez le mot de passe correspondant et cliquez sur OK.

Pour crer votre propre certificat numrique dauto-signature, cliquez sur le bouton Crer et remplissez la bote
de dialogue. Loption de type de cl du certificat fait rfrence au niveau de scurit du certificat : 1024-RSA utilise une cl 1 024 bits (moins scurise) et 2048-RSA une cl 2 048 bits (plus scurise). Lorsque vous avez termin, cliquez sur Crer. Ensuite, entrez le mot de passe correspondant dans la bote de dialogue Signature numrique et cliquez sur OK. Remarque : Java Runtime Environment (JRE) doit tre install sur lordinateur.

Dernire mise jour le 12/5/2011

218

Chapitre 15 : Cration danimations


Notions de base sur les animations
Adobe Fireworks permet de crer des graphiques anims pour vos bannires publicitaires, logos, bandes dessines, etc. Pour crer une animation, vous affectez des proprits aux objets appels symboles danimation. Lanimation dun symbole est dcompose en tats, qui contiennent les images et les objets de lanimation. Une animation peut comporter plusieurs symboles, et chacun deux peut avoir une action diffrente. Les divers symboles peuvent contenir un nombre dtats diffrent. La fin de lexcution de toutes les actions de tous les symboles marque la fin de lanimation. Vous pouvez appliquer des paramtres au symbole afin de modifier peu peu le contenu des tats successifs. Un symbole peut sembler se dplacer dans la zone de travail, apparatre et disparatre progressivement, grossir ou rtrcir, ou encore pivoter. Comme un mme fichier contient parfois plusieurs symboles, vous pouvez crer une animation complexe dans laquelle diffrents types dactions se produisent simultanment. Vous pouvez modifier les paramtres doptimisation et dexportation du panneau Optimiser pour contrler le mode de cration du fichier. Fireworks peut exporter des animations dans les formats GIF anim ou Flash SWF. Vous pouvez galement importer des animations Fireworks directement dans Flash pour les amliorer. Larticle de Zsolt Szekely dans le Centre des dveloppeurs Adobe contient des informations utiles sur la cration de logos anims www.adobe.com/go/learn_fw_creatinganimlogos_fr.

Flux de production de lanimation


1 Crez un symbole danimation partir de zro ou en convertissant un objet existant en symbole (voir Cration

de symboles danimation la page 219).


2 Modifiez le symbole danimation dans linspecteur des proprits ou la bote de dialogue Animer. Vous pouvez

dfinir langle et la direction du mouvement, la mise lchelle, lopacit (pour les apparitions et disparitions progressives), ainsi que langle et la direction de la rotation (voir Modification de symboles danimation la page 220). Remarque : langle et la direction du mouvement sont dfinis uniquement dans la bote de dialogue Animer.
3 Vous pouvez dfinir la vitesse de lanimation laide des contrles Cadence des tats du panneau Etats (voir la

section Dfinition de la dure des tats la page 223).


4 Optimisez le document sous forme de fichier GIF anim (voir la section Optimisation dune animation la

page 227).
5 Exportez le document au format de fichier GIF anim ou SWF, ou enregistrez-le au format de fichier

PNG Fireworks et importez-le dans Flash pour lamliorer (voir la section Exportation dune animation la page 255).

A propos des symboles danimation


Les symboles danimation sont les acteurs de lanimation. Un symbole danimation peut tre tout objet que vous crez ou importez, et il peut y avoir un grand nombre de symboles dans un mme fichier. Chaque symbole dispose de proprits qui lui sont propres et se comporte de manire indpendante. Vous pouvez ainsi crer des symboles qui traversent lcran, tandis que dautres apparaissent, disparaissent ou rapetissent.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Cration danimations

219

Chaque aspect de votre animation na pas ncessairement besoin de symboles. Lutilisation de symboles ou doccurrences de graphiques qui apparaissent plusieurs tats permet toutefois de rduire la taille du fichier. Vous pouvez modifier les proprits des symboles danimation tout moment, laide de la bote de dialogue Animer ou de linspecteur des proprits. Vous pouvez galement modifier lapparence des symboles sans affecter le reste du document. Vous pouvez aussi modifier le mouvement dun symbole en dplaant sa trajectoire. Comme les symboles danimation sont automatiquement placs dans la bibliothque, vous pouvez les rutiliser pour crer dautres animations.

Cration de symboles danimation


Vous pouvez crer un symbole danimation de toutes pices ou convertir un objet existant en symbole. Vous pouvez dfinir des proprits qui dterminent le nombre dtats de lanimation et le type daction (changement dchelle ou rotation, par exemple). Par dfaut, un nouveau symbole danimation comporte cinq tats, dont chacun saffiche pendant 0,07 seconde. Pour plus d'informations sur les tats des animations, consultez l'article de David Hogue http://www.adobe.com/go/learn_fw_pagestatelay_fr.

Cration dun symbole danimation


1 Choisissez Edition > Insertion > Nouveau symbole. 2 Dans la bote de dialogue Convertir en symbole, entrez le nom du nouveau symbole. 3 Slectionnez Animation, puis cliquez sur OK. 4 Dans le panneau du document, crez un objet laide des outils de dessin ou de texte. Vous pouvez tracer des objets

vectoriels ou bitmap.
5 Lorsque vous avez termin de travailler sur le symbole, accdez la vue densemble de la page (voir la section

Passage du mode ddition de symboles au mode ddition de pages la page 162). Fireworks intgre le symbole la bibliothque de documents et en place une copie au centre de la page. Vous pouvez ajouter de nouveaux tats au symbole laide du curseur Etats de linspecteur des proprits. Choisissez Fentre > Proprits pour ouvrir linspecteur des proprits, sil nest pas ouvert.

Conversion dun objet en symbole danimation


1 Slectionnez lobjet. 2 Choisissez la commande Modification > Animation > Animer la slection. 3 Dfinissez les proprits danimation pour modifier le symbole.

Les contrles danimation apparaissent sur le cadre de slection de lobjet, et une copie du symbole est ajoute la bibliothque.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Cration danimations

220

Modification de symboles danimation


Vous pouvez modifier diverses proprits des symboles, telles que lopacit ou la rotation de lanimation. Un symbole peut tourner sur lui-mme, prendre de la vitesse, apparatre et disparatre progressivement, et vous pouvez combiner ces effets. Le nombre dtats est une proprit cl. Lorsque vous dfinissez cette proprit, Fireworks ajoute automatiquement au document le nombre dtats requis pour terminer laction. Si le symbole ncessite plus dtats quil nen existe dans lanimation, un message Fireworks vous demande si vous souhaitez ajouter des tats. Vous pouvez modifier les proprits de lanimation laide de la bote de dialogue Animer ou de linspecteur des proprits. Pour rgler la vitesse de lanimation, reportez-vous la section Dfinition de la dure des tats la page 223. Pour modifier du texte, des graphiques, des contours, des fonds ou des effets, reportez-vous aux sections Modification dun symbole et de toutes ses occurrences la page 162 et Modification doccurrences de symboles spcifiques la page 163.

Proprits des symboles danimation


Etats Nombre dtats de lanimation. Faites glisser le curseur pour choisir une valeur comprise entre 0 et 250 ou

saisissez une valeur dans la zone Etats. La valeur par dfaut est 5.
Dplacer (bote de dialogue Animer uniquement) Distance de dplacement de lobjet, exprime en pixels. La valeur par dfaut est 72, mais il nexiste aucune limite de valeur. Les mouvements sont linaires et il nexiste aucun tat cl (ce qui nest pas le cas dans Flash et Adobe Director). Direction (bote de dialogue Animer uniquement) Direction du dplacement de lobjet, exprime en degrs, de 0 360. Vous pouvez galement modifier les valeurs Mouvement et Direction en faisant glisser les poignes danimation de lobjet. Mise lchelle Redimensionnement du symbole, exprim en pourcentage, entre le dbut et la fin de lanimation. La valeur par dfaut est 100 %, mais il nexiste aucune limite de valeur. Pour mettre lchelle un objet de 0 % 100 %, lobjet dorigine doit tre petit ; des objets vectoriels sont recommands. Opacit Degr de fondu (apparition ou disparition) entre le dbut et la fin de lanimation. Les valeurs possibles sont comprises entre 0 et 100, 100 % tant la valeur par dfaut. La cration dun fondu enchan ncessite deux occurrences du mme symbole : une pour le fondu louverture en fondu et lautre pour le fondu la fermeture. Rotation Degr de rotation entre le dbut et la fin de lanimation. Les valeurs possibles sont comprises entre 0 et 360.

Vous pouvez entrer des valeurs suprieures pour obtenir plusieurs rotations. La valeur par dfaut est 0.
Horaire et Antihoraire Sens de la rotation de lobjet : sens des aiguilles dune montre (horaire) ou sens inverse des aiguilles dune montre (antihoraire).

Modification des proprits des symboles danimation


1 Slectionnez un symbole danimation. 2 Slectionnez Modification > Animation > Paramtres pour ouvrir la bote de dialogue Animer. Choisissez

Fentre > Proprits pour ouvrir linspecteur des proprits, sil nest pas ouvert.
3 Modifiez les proprits. 4 Si vous utilisez la bote de dialogue Animer, cliquez sur OK pour accepter les proprits modifies.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Cration danimations

221

Suppression danimations
Pour supprimer des animations, supprimez le symbole danimation de la bibliothque ou supprimez lanimation du symbole.

Suppression de lanimation depuis le symbole danimation slectionn


Choisissez Modification > Animation > Supprimer lanimation.

Le symbole devient un symbole graphique et nest plus anim. Si, ultrieurement, vous convertissez de nouveau le symbole en symbole danimation, il conserve ses paramtres danimation prcdents.

Suppression dun symbole de la bibliothque de documents


1 Slectionnez le symbole danimation dans le panneau Bibliothque de documents. 2 Faites glisser le symbole vers licne de la corbeille, dans le coin infrieur droit.

Modification du mouvement ou de la direction dun symbole


Le symbole danimation slectionn dispose dun cadre de slection unique et dune trajectoire qui indique la direction de son dplacement. Sur cette trajectoire, le point vert est le point de dpart, et le point rouge indique le point darrive. Les points bleus intermdiaires reprsentent les tats. Par exemple, la trajectoire dun symbole qui stend sur cinq tats comporte un point vert, trois points bleus et un point rouge. Si lobjet apparat sur le troisime point, ltat 3 est ltat actif. Vous pouvez modifier la direction du dplacement en changeant langle de la trajectoire.

Faites glisser lune des poignes de dbut ou de fin danimation de lobjet vers un nouvel emplacement. Pour

contraindre la direction du dplacement par incrments de 45, faites glisser le symbole tout en maintenant la touche Maj enfonce.

Voir aussi
Dfinition de la dure des tats la page 223

Etats
Pour plus dinformations sur lintroduction du concept de pages dans Fireworks, voir larticle de Sarthak www.adobe.com/go/learn_fw_simplifyingpagesstates_fr. Ce que nous appelons maintenant tats correspondent des images dans les versions antrieures Fireworks CS4.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Cration danimations

222

Pour crer des animations, vous crez des tats. Leur contenu saffiche dans le panneau Etats. Dans ce panneau, vous pouvez nommer les tats, les rorganiser, dfinir manuellement la cadence de lanimation et dplacer des objets dun tat une autre. Chaque tat est galement associ des proprits. Vous pouvez dfinir la cadence des tats ou masquer un tat pour visualiser lanimation au fur et mesure de son laboration. Vous pouvez utiliser des calques dans des animations pour organiser les objets selon quils font partie de laction principale ou de larrire-plan de lanimation. Pour que des objets apparaissent tout au long dune animation, placezles sur un calque, puis utilisez le panneau Calques pour partager le calque avec tous les tats. Les objets qui se trouvent sur un calque partag sont visibles sur chaque tat. Pour plus dinformations, reportez-vous la section Partage des calques la page 139.

Etats et calques
Les pages contiennent des tats, tandis que les tats contiennent des calques. Une nouvelle page ne contient qu'un seul tat. Tous les calques que vous crez et tous les objets qui figurent sur ces calques n'ont qu'un seul tat. Pour comprendre la relation entre les tats, les pages et les calques, voir l'article de David Hogue www.adobe.com/go/learn_fw_usingpagesstates_fr. Lorsque vous crez un tat dans le panneau Etats, le nouvel tat comporte le mme nombre de calques que l'tat prcdent. Cependant, ces calques sont vides et ne contiennent pas d'objets provenant de l'tat prcdent. Pour reproduire des objets d'un tat l'autre, crez un double d'un tat et non pas un nouvel tat. Les instances d'objet restent indpendantes aprs leur duplication quel que soit l'tat associ. Remarque : La suppression d'un calque de l'un des tats supprime ce calque dans tous les autres tats. Pour partager les objets d'un calque entre plusieurs tats, cliquez du bouton droit sur ce calque, puis slectionnez Calque partag vers tats. Les objets du calque sont partags entre les diffrents tats, ainsi que sur les nouveaux tats lors de leur cration. Tous les objets du calque correspondant dans les autres tats sont supprims et remplacs par des objets provenant du calque partag. Toute modification des objets dans le calque partag est reporte dans les diffrents tats.

Etats et gabarits
Les tats d'un gabarit correspondent directement aux tats des autres pages de votre document. Lorsque vous copiez l'tat 1 sur une page A ordinaire, tous les objets de la page A avec l'tat 1 sont copis sur la page A avec l'tat 2, et le gabarit avec l'tat 2 est partag. Dans la mesure o le gabarit ne comporte qu'un seul tat, l'tat 2 de toute autre page est vide. Si vous dupliquez l'tat 1 pour crer l'tat 2 sur un gabarit, le calque d'arrire-plan du gabarit est galement dupliqu sur l'tat 2 du gabarit. L'tat 2 du gabarit est partag avec l'tat 2 de l'ensemble des pages du document. En rsum, l'tat 1 du gabarit est partag avec l'tat 1 de toutes les pages, l'tat 2 du gabarit est partag avec l'tat 2 de toutes les pages, et ainsi de suite. Si une page ordinaire contient davantage d'tats que le gabarit, aucun tat du gabarit n'est partag avec ces tats supplmentaires. Il est cependant possible d'ajouter des tats au gabarit qui sont ensuite reports sur ces tats.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Cration danimations

223

Cration d'un prototype/d'une page de dmonstration avec des boutons et des animations
Les documents Fireworks contenant la fois des boutons et des animations ne sont gnralement pas affichs comme prvu. Fireworks traite les animations comme une page entire, tandis que pour les boutons il considre que vous changez simplement les images sous cette dcoupe. Lorsqu'une animation est en cours de lecture, tout change sur la page, ce qui inclut les tats de boutons. Les animations et les boutons doivent tre crs et exports de faon distincte dans une page Web. Les boutons avec une fonction de survol ont recours JavaScript pour afficher les diffrents tats, mais les animations de Fireworks sont exportes au format GIF ou SWF, qui est autonome.

Dfinition de la dure des tats


La cadence des tats indique la dure (en centimes de seconde) daffichage de ltat. Par exemple, indiquez 50 pour afficher ltat pendant une demi-seconde, ou 300 pour lafficher pendant trois secondes.
1 Slectionnez un ou plusieurs tats :

Pour slectionner une plage dtats contigus, maintenez la touche Maj enfonce et cliquez sur le nom du premier
et du dernier tat.

Pour slectionner une plage dtats non contigus, cliquez sur le nom de chaque tat tout en maintenant la
touche Ctrl (Windows) ou Commande (Mac OS) enfonce.
2 Procdez de lune des manires suivantes :

Dans le menu Options du panneau Etats, cliquez sur Proprits. Cliquez deux fois sur la colonne Cadence des tats.
3 Entrez une valeur de cadence des tats. 4 Appuyez sur la touche Entre ou cliquez en dehors du panneau.

Masquage dtats en cours de lecture


Les tats masqus ne saffichent pas en cours de lecture et ne sont pas exports.
1 Procdez de lune des manires suivantes :

Dans le menu Options du panneau Etats, cliquez sur Proprits. Cliquez deux fois sur la colonne Cadence des tats.
2 Dslectionnez Inclure lors de lexportation. 3 Appuyez sur la touche Entre ou cliquez en dehors du panneau.

Modification des noms dtats


Lorsque vous dfinissez une animation, Fireworks cre les tats ncessaires et les affiche dans le panneau Etats en tant que Etat 1, Etat 2, etc. Lorsque vous dplacez un tat dans le panneau, Fireworks renomme les tats concerns en fonction du nouvel ordre dapparition. Donnez un nom significatif vos tats pour les retrouver facilement. Dplacer un tat renomm na aucun effet sur le nom de ltat.
1 Dans le panneau Etat, cliquez deux fois sur le nom de ltat. 2 Saisissez un nouveau nom et appuyez sur la touche Entre.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Cration danimations

224

Personnalisation des noms des tats


1 Slectionnez Fichier > Configuration HTML. 2 Dans la bote de dialogue Configuration HTML, slectionnez longlet Propre au document. 3 Slectionnez Personnalis dans le menu Noms des tats. 4 Dans la bote de dialogue qui saffiche, dfinissez les noms personnaliss ajouter aux tats.

Le nom personnalis est conserv pendant toute la session. Comme il sagit dun paramtre propre au document, slectionnez Personnalis comme indiqu dans la premire image-cran.

Utilisation des tats


Dans le panneau Etats, vous pouvez ajouter, copier et supprimer des tats ou en changer lordre.

Ajout dun nouvel tat


Cliquez sur le bouton Nouvel tat/Dupliquer ltat

dans la partie infrieure du panneau Etats.

Ajout dtats une squence


1 Dans le menu Options du panneau Etats, slectionnez Ajouter des tats. 2 Indiquez le nombre dtats ajouter. 3 Slectionnez lemplacement o vous souhaitez insrer les tats, puis cliquez sur OK.

Copie dun tat


Faites glisser un tat existant sur le bouton Nouvel tat/Dupliquer ltat dans la partie infrieure du panneau Etats.

Copie dun tat slectionn pour le placer dans une squence


Il est utile de dupliquer un tat pour faire rapparatre des objets dans une autre partie de lanimation.
1 Dans le menu Options du panneau Etats, slectionnez Dupliquer ltat. 2 Saisissez le nombre de doublons de ltat slectionn que vous souhaitez crer, indiquez o insrer ces doubles, puis

cliquez sur OK.

Rorganisation des tats


Faites glisser les tats un par un vers un nouvel emplacement dans la liste.

Inversion de lordre des tats


Vous pouvez inverser lordre de tous les tats ou celui des tats dune plage slectionne.
1 Slectionnez Commandes > Document > Inverser les tats. 2 Procdez de lune des manires suivantes :

Slectionnez Tous les tats pour inverser la squence des tats du dbut vers la fin. Pour inverser lordre des tats dune plage, slectionnez Plage dtats, puis choisissez les tats Dbut et Fin. Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Cration danimations

225

3 Cliquez sur OK.

Suppression de ltat slectionn


Procdez de lune des manires suivantes :

Dans le panneau Etats, cliquez sur le bouton Supprimer ltat Faites glisser ltat vers le bouton Supprimer ltat.

Dans le menu Options du panneau Etats, slectionnez Supprimer ltat.

Dplacement des objets slectionns dans le panneau Etats


Vous pouvez utiliser le panneau Etats pour dplacer des objets dans un autre tat. Les objets qui saffichent sur un seul tat disparaissent au cours de la lecture de lanimation. Vous pouvez les faire disparatre et rapparatre diffrents points. Dans le panneau Etats, un petit rond sur la droite de la dure de cadence des tats indique ltat des objets de ltat.
1 Dans la zone de travail, slectionnez les objets que vous souhaitez afficher sur un autre tat. 2 Dans le panneau Etats, faites glisser lindicateur de slection (petit rond noir droite de la dure de cadence des

tats) vers le nouvel tat. Pour copier les objets slectionns vers dautres tats, appuyez sur les touches Alt (Windows) ou Option (Mac OS) et faites glisser les objets.

Affichage des objets dans un tat


Slectionnez ltat laide du menu contextuel correspondant, situ dans la partie infrieure du panneau Calques.

Tous les objets prsents dans cet tat sont rpertoris dans le panneau Calques et affichs dans la zone de travail.

A propos des pelures doignon


Les pelures doignon permettent dafficher le contenu des tats prcdant et suivant ltat slectionn. Cela vous permet daffiner la transition entre les objets sans devoir passer incessamment dun objet un autre. Lorsque vous activez les pelures doignon, les objets des tats prcdant et suivant ltat slectionn sont griss. Ainsi, vous pouvez les distinguer des objets de ltat slectionn.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Cration danimations

226

Par dfaut, loption Modification de plusieurs tats est active. Vous pouvez ainsi slectionner et modifier des objets griss dans dautres tats sans quitter ltat actif. Utilisez loutil Slectionner derrire pour slectionner de manire squentielle des objets dans divers tats. Pour ajuster le nombre dtats visibles avant et aprs ltat actif, cliquez sur le bouton Pelures doignon, puis slectionnez une option daffichage. Loption Personnalise vous permet dindiquer le nombre dtats et de contrler lopacit. Utilisez loption Modification de plusieurs tats pour slectionner et modifier tous les objets visibles. Dsactivez cette option pour modifier uniquement la page active.

Interpolation
Dans Fireworks, linterpolation est une technique manuelle qui permet de fusionner plusieurs occurrences du mme symbole pour gnrer les occurrences intermdiaires avec des attributs interpols. Pour crer le dplacement sophistiqu dun objet sur la zone de travail et pour les objets dont les filtres dynamiques changent chaque tat de lanimation, utilisez linterpolation. Par exemple, vous pouvez interpoler un objet pour quil donne limpression de se dplacer sur un trac linaire. Remarque : dans la plupart des cas, lutilisation de symboles danimation est prfrable linterpolation. Pour plus dinformations, reportez-vous la section A propos des symboles danimation la page 218.

Occurrences interpoles
1 Slectionnez plusieurs occurrences du mme symbole graphique dans la zone de travail. Ne slectionnez pas des

occurrences de symboles diffrents.


2 Choisissez Modification > Symbole > Occurrences interpoles. 3 Dans la bote de dialogue Occurrences interpoles, entrez le nombre dtapes interpoles insrer entre les deux

occurrences dorigine.
4 Pour rpartir les objets interpols dans des tats distincts, slectionnez Rpartir dans les tats, puis cliquez sur OK.

Vous pouvez effectuer cette opration ultrieurement. Dans le panneau Etats, slectionnez toutes les occurrences et cliquez sur le bouton Rpartir dans les tats .

Prvisualisation dune animation


Vous pouvez prvisualiser une animation en cours de travail pour en vrifier lavancement. Vous pouvez galement prvisualiser une animation aprs optimisation pour vrifier laspect quelle aura dans un navigateur Web. il est dconseill de prvisualiser lanimation dans la fentre 2 en 1 ou 4 en 1. Remarque : Les animations ajoutes aux gabarits ne sont pas affiches. Ajoutez les animations dans les pages enfant et partagez-les entre toutes les pages.

Prvisualisation dune animation dans lespace de travail


Utilisez les contrles dtat qui apparaissent au bas de la fentre Document.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Cration danimations

227

Contrles dtat

Pour dfinir la dure dapparition dun tat dans la fentre de document, entrez la valeur de cadence des tats
souhaite dans le panneau Etats.

Les tats masqus qui nont pas t exports napparaissent pas dans laperu (voir la section Masquage dtats en
cours de lecture la page 223).

Laperu de lanimation dans la fentre Original affiche les graphiques sources leur rsolution normale, et non
laperu optimis utilis pour le fichier export.

Prvisualisation dune animation dans la fentre Aperu


1 Cliquez sur le bouton Aperu dans le coin suprieur gauche de la fentre Document. 2 Utilisez les contrles dtat.

Prvisualisation dune animation dans un navigateur Web


Choisissez Fichier > Aperu dans le navigateur, puis slectionnez un navigateur dans le sous-menu.

Remarque : pour afficher le dplacement lorsque vous prvisualisez lanimation, dans le panneau Optimisation, slectionnez le format de fichier dexportation GIF anim, mme si vous souhaitez importer lanimation en Flash en tant que fichier SWF ou PNG Fireworks.

Optimisation dune animation


Aprs la configuration des symboles et des tats qui composent une animation, optimisez lanimation pour faciliter son chargement et sa lecture. Lorsque vous avez cr et optimis une animation, elle est prte tre exporte. Pour plus de dtails, reportez-vous la section Exportation dune animation la page 255.

Configuration de la lecture en boucle dune animation


Loption Boucle permet de rpter une animation et de limiter le nombre dtats requis pour celle-ci.
1 Slectionnez la commande Fentre > Etats pour afficher le panneau Etats. 2

Cliquez sur le bouton Lecture en boucle de lanimation GIF

, au bas du panneau.

3 Slectionnez le nombre de rptitions aprs la lecture initiale de lanimation.

Par exemple, si vous slectionnez 4, lanimation sera lue cinq fois en tout. Avec loption En continu, lanimation se rpte indfiniment.

Slection de paramtres depuis le panneau Optimisation


Loptimisation permet de comprimer un fichier au maximum et den rduire ainsi le temps de tlchargement partir du Web. Pour plus de dtails sur les options doptimisation, reportez-vous la section Optimisation des fichiers GIF, PNG, TIFF, BMP et PICT la page 244.
1 Choisissez Fentre > Optimisation.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Cration danimations

228

2 Slectionnez le format de fichier dexportation dans le panneau Optimisation. 3 Slectionnez les options Palette et Tramage. 4 Dans le menu contextuel Transparence du panneau Optimisation, slectionnez Transparence dindex ou

Transparence Alpha.
5 Utilisez les outils de transparence du panneau Optimisation pour slectionner les couleurs utilises pour la

transparence.
6 Dans le panneau Etats, dfinissez la cadence des tats.

Utilisation danimations existantes


Pour utiliser un fichier GIF anim existant, importez celui-ci dans un fichier Fireworks ou ouvrez-le en tant que nouveau fichier. Lorsque vous importez un fichier GIF anim, Fireworks le convertit en symbole danimation et le place dans ltat slectionn. Si lanimation importe compte plus dtats que lanimation active, vous pouvez choisir dajouter automatiquement le nombre dtats ncessaire. Les fichiers GIF imports adoptent les paramtres de cadence dtats du document actif. Comme le fichier import est un symbole danimation, vous pouvez lui appliquer des mouvements supplmentaires. Par exemple, importez lanimation dune personne marchant sur place et appliquez-lui des proprits de direction et de mouvement pour lui faire traverser lcran. Lorsque vous ouvrez un GIF anim dans Fireworks, un nouveau fichier est cr, et chaque tat du fichier GIF est plac dans un tat distinct. Bien que le fichier GIF ne soit pas un symbole danimation, il conserve les paramtres de cadence des tats dorigine. Les animations ajoutes aux gabarits ne sont pas affiches. Ajoutez l'animation dans une page enfant et partagez-la entre toutes les pages. Une fois le fichier import, vous dfinissez son format de fichier comme GIF anim pour exporter le mouvement depuis Fireworks.

Importation dun fichier GIF anim


1 Choisissez Fichier > Importer. 2 Naviguez jusquau fichier, puis cliquez sur Ouvrir. 3 Cliquez sur le fichier et faites-le glisser sur la zone de travail.

Ouverture dun fichier GIF anim


Choisissez Fichier > Ouvrir, puis localisez le fichier GIF.

Utilisation de fichiers multiples pour une animation


Fireworks peut crer une animation partir dun groupe de fichiers dimage. Vous pouvez, par exemple, crer une bannire publicitaire partir de plusieurs images existantes.
1 Choisissez Fichier > Ouvrir. 2 Maintenez la touche Maj enfonce et cliquez sur diffrents fichiers pour les slectionner.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Cration danimations

229

3 Cliquez sur Ouvrir en tant quanimation, puis sur OK.

Fireworks ouvre les fichiers dans un nouveau document unique, en plaant chaque fichier dans un tat distinct, dans lordre dans lequel vous avez slectionn les fichiers.

Cration danimations Torsion et Nuance


La commande Torsion et Nuance permet de crer plusieurs occurrences dun objet qui apparaissent et disparaissent progressivement le long dune trajectoire tordue. Une fois le premier objet cr, les autres occurrences sont cres automatiquement en fonction des options que vous dfinissez dans la bote de dialogue Torsion et Nuance. Vous pouvez galement animer les objets crs laide des options de la bote de dialogue et enregistrez lanimation au format GIF.
1 Crez ou placez un objet sur la zone de travail. Dessinez un cercle ou placez une image sur la zone de travail, par

exemple.
2 Slectionnez Commandes > Cration > Torsion et Nuance. 3 Dans la bote de dialogue Torsion et Nuance, configurez les paramtres en fonction de vos prfrences. Manipulez

les diffrentes options de la bote de dialogue pour personnaliser leffet. Positionnez la bote de dialogue de telle sorte que vous puissiez voir les modifications au fur et mesure que vous les effectuez.
Etapes Nombre doccurrences de lobjet cr. Opacit Opacit des objets crs. Direction Direction dans laquelle les objets sont successivement crs par rapport au premier objet. En retard Chaque objet se place derrire lobjet suivant de lensemble. Animer Slectionnez cette option pour animer lensemble dobjets que vous avez cr. Attnu Lorsque vous augmentez la valeur de ce champ, leffet dattnuation est appliqu en partant du dernier objet cr jusquau premier objet. Satur Modifiez la valeur pour changer les couleurs des objets crs. Pas Plus vous augmentez le pas et plus les objets crs sont espacs. Rotation Degr de rotation des objets successifs. Direction Angle dalignement des autres objets par rapport au premier objet. Echelle Facteur de mise lchelle des autres objets par rapport au premier objet. Opacit Opacit des autres objets par rapport au premier objet. Alatoire Cliquez sur Alatoire pour faire des essais avec un ensemble alatoire de valeurs dfinies par le systme. Boug Ajoute des variations loption que vous avez slectionne. La valeur que vous entrez dtermine le taux de

variation.
Paramtres prdfinis Slectionnez le paramtre prdfini qui vous convient le mieux. Il est judicieux de partir

dun paramtre prdfini, puis de configurer les diffrentes options en fonction du rsultat souhait. Vous pouvez galement slectionner Par dfaut ou Dernire utilisation pour appliquer lensemble de prfrences par dfaut ou prcdent, respectivement.
Aperu Slectionnez Aperu pour voir leffet des options que vous choisissez dans la bote de dialogue sur lobjet.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Cration danimations

230

Remarque : Si vous avez slectionn loption Animer, le graphique disparat de la zone de travail lorsque vous cliquez sur OK.
4 Dans la bote de dialogue Proprits, slectionnez Gif anim Websnap 128 dans la liste des options de format. 5 Appuyez sur F12 pour afficher un aperu de lanimation dans un navigateur.

Remarque : Vous pouvez dissocier les objets crs comme nimporte quels autres objets.

Dernire mise jour le 12/5/2011

231

Chapitre 16 : Cration de diaporamas


Cration et organisation dun diaporama
La fentre Crer un diaporama permet de crer un diaporama de type Adobe Flash ou HTML/SPRY, en slectionnant un dossier contenant des images et en ajoutant des options de diaporama. Vous pouvez modifier des diaporamas en ajoutant ou en supprimant des images, ou en ajoutant plusieurs albums dans un diaporama unique. Si vous tes un concepteur ou dveloppeur Flash, vous pouvez galement crer un lecteur dalbum personnalis dans Flash pour afficher la sortie XML du crateur dalbum Adobe Fireworks.

Cration dun diaporama


1 Choisissez Commandes > Crer un diaporama. 2 Cliquez sur le bouton Ajouter un album (le signe plus) situ ct de lentre Albums. 3 Choisissez les fichiers dimage inclure dans le diaporama et cliquez sur OK. 4 Renseignez les Proprits du livre dalbums et les Proprits de lalbum. 5 Slectionnez les panneaux de droite pour configurer les proprits du diaporama. 6 Spcifiez lemplacement du diaporama termin dans le panneau Options dexportation. 7 Aprs avoir configur tous les paramtres du diaporama, cliquez sur Crer. 8 (Facultatif) Pour afficher le diaporama dans votre navigateur, slectionnez loption Lancer le diaporama dans le

navigateur, puis cliquez sur Terminer.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Cration de diaporamas

232

Ouverture dun diaporama existant


1 Choisissez Commandes > Crer un diaporama. 2 Dans la fentre Crer un diaporama, cliquez sur le bouton Ouvrir un album existant ou cliquez sur le bouton

Parcourir (...) en regard de lentre Albums.


3 Accdez au dossier contenant le fichier XML du diaporama existant et cliquez sur Ouvrir.

Suppression dun album


1 Ouvrez un diaporama existant. 2 Slectionnez un album dans les listes Albums, puis cliquez sur le bouton Supprimer album(s) slectionn(s) (signe

moins) en regard de lentre Albums.

Organisation dun album


1 Ouvrez un diaporama existant. 2 Slectionnez un album dans la liste.

Pour ajouter des images, cliquez sur le bouton Ajouter image(s) (signe plus) en regard de lentre Images.
Ensuite, cliquez sur le bouton Parcourir (...), puis slectionnez une ou plusieurs images.

Pour modifier lordre des images, slectionnez une image, puis cliquez sur les boutons flchs situs en haut de
la liste des images afin de la dplacer.

Personnalisation dun diaporama


Pour afficher un panneau Proprits et personnaliser les proprits quil contient, cliquez dessus dans la partie droite de la fentre Crer un diaporama.

Panneau Proprits de lalbum


Les proprits de lalbum sappliquent un livre, qui peut contenir plusieurs albums.
Titre Il peut contenir un espace ( Mon voyage , par exemple). Description Entrez une description. Lecteur Slectionnez le type. Icne Info (en regard de lentre Lecteur) Cliquez dessus pour afficher des informations complmentaires sur le

lecteur, y compris les proprits des albums pris en charge par le type de lecteur slectionn.
Dmarrer automatiquement le diaporama Permet de dmarrer le diaporama louverture du lecteur. Autoriser lactivation des images Permet lutilisateur de cliquer sur limage pour louvrir dans une nouvelle fentre

de navigateur et lenregistrer ou de lafficher dans un nouvel onglet ou en taille relle.

Panneau Proprits de lalbum


Les proprits de lalbum sappliquent uniquement lalbum slectionn.
Description Entrez une description de lalbum.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Cration de diaporamas

233

Vignette Slectionnez une image pour obtenir un aperu de la vignette dans le diaporama. Arrire-plan Slectionnez une image darrire-plan personnalise, puis redimensionnez-la lchelle du diaporama.

Panneau Lgendes
Utilisez les options de lgendes pour personnaliser les lgendes des diffrentes images du diaporama.
Appliquer tous les albums Permet dappliquer les options de lgendes tous les albums du livre. Aucun changement Conserve les lgendes existantes. Effacer toutes les lgendes Efface toutes les lgendes de lalbum. Utiliser les noms de fichiers Utilise les noms de fichiers des images comme lgende. Inclure lextension Si vous choisissez les noms de fichiers comme lgendes, indiquez les extensions de fichiers. Insrer un texte Utilise le texte spcifi comme lgende pour chacune des images. Remplacer les lgendes Applique toutes les images le texte que vous avez insr.

Panneau Filtres
Vous ne pouvez appliquer des filtres qu un nouvel album. Pour appliquer des filtres slectionns tous les albums du livre, slectionnez loption Appliquer tous les albums.

Panneau Proprits du diaporama


Les proprits du diaporama sappliquent au diaporama slectionn.
Appliquer tous les albums Permet dappliquer les options spcifies tous les albums du livre. Intervalle Nombre de secondes entre les images. Utiliser la transition Permet de slectionner un effet de transition entre les diffrentes images. Premire image Dfinit la premire image de lalbum. Il sagit du numro de squence de limage dans lalbum. Squence daffichage Permet de choisir dafficher les images dans un ordre ou de faon alatoire.

Panneau Options dexportation


Les options de ce panneau permettent de paramtrer lexportation des images.
Exporter des images Permet dexporter les images en taille relle ou sous forme de vignettes, avec les paramtres

appropris. Dslectionnez cette option pour exporter uniquement le fichier XML.


Gnrer un fichier XML Permet de gnrer un fichier slideshow.xml pour les images et rpertoires du diaporama.

Dslectionnez cette option pour exporter uniquement les images.


Format XML Slectionnez le format XML export en choisissant loption Crer un diaporama ou Adobe Media Gallery

si vous slectionnez la commande Gnrer un fichier XML.


Chemin dexportation Dossier dans lequel le diaporama et les fichiers associs sont gnrs et exports. Largeur et Hauteur Largeur et hauteur des images en taille relle exportes. Les images mises lchelle conservent leurs proportions dorigine. Exporter des vignettes Permet dexporter les vignettes et les images en taille relle. Largeur et Hauteur Largeur et hauteur des vignettes exportes.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Cration de diaporamas

234

Qualit dimage Spcifiez la qualit de sortie des images exportes (en taille relle et vignettes). La valeur 100

correspond la meilleure qualit possible.


Ajuster limage Si ncessaire, agrandissez les images la taille dexportation spcifie.

Cration dun lecteur Fireworks personnalis


Vous pouvez crer un lecteur personnalis que vous utiliserez avec la commande Crer un diaporama. Les fichiers source des lecteurs de diaporama par dfaut sont galement inclus dans le logiciel pour vous permettre de modifier ou dhabiller les lecteurs.
1 Publiez le fichier SWF et, le cas chant, le fichier HTML (portant lextension .htm ou .html). 2 Remplacez lextension .swf du fichier SWF par une autre extension.

Remarque : sous Mac OS, lopration qui consiste simplement renommer le fichier SWF dans le Finder peut ne pas fonctionner (sauf si vous avez dfini loption Afficher les extensions de fichier). Vous devrez peut-tre le renommer laide de la bote de dialogue de proprits de fichier, sous Nom & Extension.
3 Dans le mme dossier que le fichier SWF, crez un fichier XML semblable lexemple suivant :
<?xml version="1.0"encoding="utf-8"?> <FWACPlayer> <Player name="Player - Black (Flash)"preview="player_black.jpg"launch="index.html"> <File src="player_black.fap"dst="player_black.swf"/> <File src="player_black.html"dst="index.html"/> <Info src="player_black.info"/> </Player> <Player name="Player - White (Flash)"preview="player_white.jpg"launch="index.html"> <File src="player_white.fap"dst="player_white.swf"/> <File src="player_white.html"dst="index.html"/> <Info src="player_white.info"/> </Player> </FWACPlayer>

Remarque : si vous disposez de plusieurs versions du mme lecteur de base, vous pouvez les rpertorier dans le fichier XML (comme indiqu plus haut).
4 Pour chaque nud de lecteur (Player), indiquez le nom du fichier source et du fichier cible dans le nud de fichier File. 5 (Facultatif) Pour fournir des informations supplmentaires sur le lecteur, ajoutez le nud Info, dans lequel

lattribut src contient le nom du fichier. Le fichier Info doit contenir du texte HTML. Si le fichier contient un simple texte non HTML, les sauts de page, retours chariot et tabulations sont supprims avant laffichage du texte.
6 Crez ou modifiez le fichier MXI de telle sorte que le fichier SWF et le fichier HTML renomms soient placs dans

un dossier Configurations/Commandes/Lecteurs. Remarque : pour que loption de lancement du diaporama dans le navigateur fonctionne en fin de processus, les fichiers SWF et HTML doivent porter le mme nom. Le fichier XML gnr prsente la structure suivante :

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Cration de diaporamas

235

<AlbumBook... > <Album ... > <Slide ... <Slide ... <Slide ... </Album> <Album ... > <Slide ... <Slide ... <Slide ... </Album> </AlbumBook>

/> /> />

/> /> />

Dfinition des nuds


Nud AlbumBook
ver Version de la commande Crer un diaporama qui a permis de crer le fichier XML. title Titre principal du diaporama. description Description de lintgralit du diaporama. firstAlbum Index de base zro du premier album afficher. width Largeur du diaporama. height Hauteur du diaporama. showThumbnails Dtermine laffichage ou non des vignettes (ou lexportation ou non des vignettes). thumbWidth Largeur de la vignette. thumbHeight Hauteur de la vignette. autoStart Permet de dmarrer automatiquement le diaporama. allowClick Autorisation ou non des utilisateurs cliquer sur les images. clickAction Action excuter lorsquun utilisateur clique sur une image (louvrir dans une nouvelle fentre, un nouvel

onglet ou laisser le lecteur dcider).

Nud Album
title Titre de lalbum. description Description de lalbum. path Nom du dossier contenant les images de cet album. Les vignettes sont exportes dans le dossier Thumbs (Vignettes) contenu dans le chemin. hasThumb Indique que lalbum possde une vignette. thumbSrc Image source utilise pour la vignette de lalbum. hasBg Indique que lalbum possde une image darrire-plan. bgSrc Image darrire-plan de lalbum. bgScale Mthode de mise lchelle de limage darrire-plan de lalbum. interval Intervalle du diaporama exprim en secondes pour cet album.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Cration de diaporamas

236

useTransition Indique quun effet de transition doit tre utilis lors du passage dune image une autre. transType Transition du diaporama pour cet album. transTime Dure de la transition. firstImage Index de base zro de la premire image afficher. dispSequence Ordre daffichage des images (squentiel ou alatoire).

Noeud Slide (Diapositive)


src Nom du fichier dimage de cette diapositive. caption Lgende associe cette diapositive. width Largeur de la diapositive. height Hauteur de la diapositive. thumbWidth Largeur de la vignette de diapositive. thumbHeight Hauteur de la vignette de diapositive.

Dernire mise jour le 12/5/2011

237

Chapitre 17 : Optimisation et exportation


Lexportation de graphiques depuis Adobe Fireworks se droule en deux tapes. Avant de procder lexportation, il convient doptimiser les graphiques, cest--dire de slectionner les options proposant le meilleur compromis entre la qualit des graphiques et la taille de leur fichier afin de les tlcharger aussi rapidement que possible. Lassistant Exportation vous guide tout au long des processus doptimisation et dexportation. Il vous propose certains paramtres et affiche laperu de limage pour vous aider loptimiser. Vous pouvez galement utiliser laperu de limage indpendamment de lassistant. Pour davantage de prcision, utilisez les outils de lespace de travail, tels que le panneau Optimisation, les boutons daperu de la fentre de document et la bote de dialogue Exporter. Dans certains cas, vous pouvez enregistrer des graphiques sans les exporter. Pour plus dinformations, reportez-vous la section Enregistrement de documents dans dautres formats la page 12.

Utilisation de lassistant Exportation


Lassistant Exportation vous guide, tape par tape, tout au long des processus doptimisation et dexportation.
1 Choisissez Fichier > Assistant Exportation. 2 Rpondez toutes les questions qui saffichent, puis cliquez sur Continuer dans chaque panneau.

Cliquez sur Taille du fichier dexportation cible dans le premier panneau pour optimiser selon une taille de fichier maximum.
3 Cliquez sur Quitter dans la fentre Rsultats de lanalyse de lassistant.

La fentre Aperu de limage prsente des options dexportation recommandes.

Utilisation de laperu de limage


Vous pouvez ouvrir laperu de limage depuis lassistant Exportation ou depuis le menu Fichier (Fichier > Aperu de limage). Le document ou le graphique saffiche dans la zone daperu tel quil est export, accompagn dune estimation de la taille du fichier et du temps de tlchargement selon les paramtres dexportation choisis.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Optimisation et exportation

238

B C

A. Jeu doptions enregistr pour lexportation slectionne B. Estimation du temps de tlchargement et de la taille du fichier C. Aperu avec les paramtres dexportation slectionns D. Enregistrement des paramtres dexportation dans la vue active

Dans le cas de lexportation de fichiers GIF anims ou de survols JavaScript, lestimation de la taille du fichier correspond la somme des tailles de tous les tats. Remarque : pour acclrer le rafrachissement de laperu de limage, dsactivez Aperu. Pour interrompre le rafrachissement de la zone daperu lorsque vous modifiez les paramtres, appuyez sur la touche Echap.

Utilisation de la zone daperu


Zoom sur limage
Cliquez sur le bouton Zoom

, puis cliquez dans laperu pour lagrandir. Tout en maintenant la touche Alt (Windows) ou Option (Mac OS) enfonce, cliquez sur le bouton dans laperu pour effectuer un zoom arrire.

Panoramique de limage
Procdez de lune des manires suivantes :

Cliquez sur le bouton Pointeur

en bas de la bote de dialogue, puis faites glisser le pointeur dans laperu.

Lorsque le pointeur Zoom est actif, faites-le glisser dans laperu tout en maintenant la barre despace enfonce.

Division de la zone daperu pour comparer des paramtres


Cliquez sur un bouton de vue scinde

Chaque fentre daperu permet dafficher un aperu du graphique avec des paramtres dexportation diffrents. Remarque : le zoom et le panoramique sont appliqus simultanment toutes les fentres ouvertes.

Dfinition des options de laperu de limage


Optimisation dune image en fonction de la taille du fichier cible
1 Cliquez sur longlet Options. 2 Cliquez sur le bouton Assistant Optimiser la taille

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Optimisation et exportation

239

3 Entrez la taille du fichier en Ko, puis cliquez sur OK.

Lassistant Optimiser la taille tente dobtenir la taille de fichier requise comme suit :

En ajustant la qualit JPEG En modifiant le lissage JPEG En modifiant le nombre de couleurs dans les images 8 bits En changeant les paramtres de tramage dans les images 8 bits En activant ou dsactivant les paramtres doptimisation

Dfinition des dimensions des images exportes


1 Cliquez sur longlet Fichier. 2 Spcifiez le pourcentage de mise lchelle ou entrez la largeur et la hauteur en pixels. Slectionnez Contraindre

pour mettre proportionnellement la largeur et la hauteur lchelle.

Dfinition dune seule partie dune image exporter


1 Cliquez sur longlet Fichier. 2 Slectionnez Zone dexportation, puis procdez de lune des faons suivantes :

Faites glisser le rectangle en pointills qui entoure laperu pour dlimiter la zone dexportation. (Faites glisser
le rectangle lintrieur de laperu pour voir les zones non affiches.)

Entrez les coordonnes en pixels des limites de la zone dexportation.

Slection des paramtres danimation


1 Cliquez sur longlet Animation.

Pour afficher un seul tat, dans la liste gauche de la bote de dialogue, slectionnez ltat que vous voulez
afficher. Vous pouvez galement utiliser les contrles dtat qui se trouvent dans le coin infrieur droit de la bote de dialogue.

Pour voir lanimation, cliquez sur le contrle Lire/Arrter dans la partie infrieure droite de la bote de dialogue.
2 Pour dfinir la mthode de suppression des tats, slectionnez un tat dans la liste, cliquez sur licne de la corbeille,

puis choisissez lune des options suivantes :


Non spcifie Dtermine automatiquement une mthode de suppression pour ltat actif, en rejetant ce dernier si ltat suivant contient une transparence de calque. Pour la plupart des animations, cette option automatique active par dfaut permet dobtenir les meilleurs rsultats visuels ainsi que les tailles de fichier les plus rduites. Aucune Conserve ltat actif tandis que ltat suivant vient sajouter dans laffichage. Ltat actif (et les tats

prcdents) peut tre visible travers les zones transparentes de ltat suivant. Si vous choisissez cette option, utilisez un navigateur pour afficher un aperu prcis de lanimation.
Restaurer larrire-plan Rejette ltat actif et le remplace temporairement par larrire-plan de la page Web. Un seul tat saffiche la fois. Choisissez cette option si des objets anims se dplacent sur un arrire-plan transparent.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Optimisation et exportation

240

Restaurer la version prcdente Rejette ltat actif et le remplace temporairement par ltat prcdent. Choisissez

cette option si des objets anims se dplacent sur un arrire-plan opaque.


3 Pour dfinir la cadence des tats, slectionnez un tat dans la liste, puis entrez la cadence en centimes de seconde

dans la zone Cadence des tats.


4 Pour que lanimation se rpte en continu, cliquez sur le bouton de lecture en boucle, puis slectionnez le nombre

de rptitions dans le menu contextuel.


5 Pour recadrer chaque tat afin que seule la zone qui diffre dun tat lautre saffiche, slectionnez Recadrer chaque

tat. Cette option permet de rduire la taille du fichier.


6 Pour obtenir une sortie exclusive en pixels qui change entre les tats, slectionnez loption Enregistrer les

diffrences entre les tats. Cette option permet de rduire la taille du fichier.

Exportation laide de laperu de limage


1 Choisissez Fichier > Aperu de limage. 2 Slectionnez les options souhaites sur chaque onglet. 3 Cliquez sur Exporter. 4 Dans la bote de dialogue Exporter, entrez un nom de fichier, slectionnez un rpertoire de destination, dfinissez

dautres options, puis cliquez sur Enregistrer.

Optimisation dans lespace de travail


Lespace de travail de Fireworks propose des fonctions doptimisation et dexportation qui vous permettent de contrler la manire dont les fichiers sont exports. Vous pouvez utiliser des options doptimisation prdfinies ou choisir des options particulires, telles que le type de fichier ou la palette de couleurs, pour personnaliser le processus doptimisation. Le panneau Optimisation contient les commandes doptimisation cls et (pour les formats de fichier 8 bits) un tableau affichant les couleurs dont est compose la palette de couleurs dexportation active. Le panneau affiche des paramtres de la slection active (une tranche ou le document entier). Les boutons daperu de la fentre de document permettent dafficher le graphique export tel quil apparatrait avec les paramtres doptimisation actifs. Vous pouvez ainsi optimiser lensemble du document, ou bien slectionner des tranches individuelles ou des zones slectionnes dun graphique JPEG et affecter chacune delles diffrents paramtres doptimisation.

Optimisation de tranches individuelles


Lorsquune tranche est slectionne, vous pouvez choisir des paramtres doptimisation prdfinis (enregistrs) dans le menu contextuel Paramtres dexportation de la tranche de linspecteur des proprits.
1 Cliquez sur une tranche pour la slectionner. Pour slectionner plusieurs tranches la fois, cliquez sur chacune

delles tout en maintenant la touche Maj enfonce.


2 Slectionnez des options dans le panneau Optimisation.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Optimisation et exportation

241

Aperu et comparaison des paramtres doptimisation


Les boutons daperu de document vous permettent dafficher le graphique tel quil apparatrait dans un navigateur Web selon les paramtres doptimisation. Vous pouvez prvisualiser les survols et les comportements de navigation, ainsi que les animations.

Bouton Original et boutons daperu du document

Laperu indique la taille totale, la dure prvue du tlchargement et le format de fichier du document. La dure prvue reprsente la moyenne du temps ncessaire au tlchargement de lensemble des tranches et tats du document en supposant quun modem de 56 K est utilis. Les fentres 2 en 1 et 4 en 1 affichent des informations supplmentaires qui varient en fonction du type de fichier slectionn. Lorsque vous affichez un aperu, vous pouvez optimiser un document entier ou une simple slection de tranches. Le calque de superposition des tranches permet de diffrencier les tranches en cours doptimisation du reste du document.

Lorsque le calque de superposition des tranches est activ, les tranches qui ne sont pas optimises sont grises.

Aperu dun graphique selon les paramtres doptimisation actifs


Cliquez sur le bouton Aperu dans le coin suprieur gauche de la fentre de document.

Remarque : dans le panneau Outils, cliquez sur Masquer les tranches dcoupe pendant laperu.

pour masquer les tranches et les repres de

Comparaison daperus avec des paramtres doptimisation diffrents


1 Cliquez sur le bouton 2 en 1 ou 4 en 1 dans le coin suprieur gauche de la fentre de document. 2 Cliquez sur lun des aperus scinds. 3 Entrez les paramtres dans le panneau Optimisation. 4 Slectionnez les autres aperus, puis spcifiez des paramtres doptimisation diffrents pour chacun deux.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Optimisation et exportation

242

Lorsque vous slectionnez un aperu 2 en 1 ou 4 en 1, la premire fentre affiche le document PNG dorigine de Fireworks, ce qui vous permet de le comparer avec les versions optimises. Vous pouvez afficher la version optimise de votre choix.

Passage dune vue optimise la vue originale en mode 2 en 1 ou 4 en 1


1 Slectionnez une vue optimise. 2 Dans le menu contextuel Aperu situ au bas de la fentre daperu, slectionnez Original (pas daperu).

Passage de la vue du document original vers une vue optimise en mode 2 en 1 ou 4 en 1


1 Slectionnez la vue de limage originale. 2 Dans le menu contextuel Aperu, slectionnez Aperu de limage.

Affichage ou masquage du calque de superposition des tranches


Choisissez Affichage > Calque de superposition des tranches.

Optimisation laide dune option prdfinie


Choisissez Fentre Optimisation pour ouvrir le panneau Optimisation. Lorsque vous choisissez une option prdfinie, les autres options du panneau Optimisation sont automatiquement dfinies.
Slectionnez une option prdfinie dans le menu contextuel Paramtres de linspecteur des proprits ou du

panneau Optimisation.
GIF Web 216 Force toutes les couleurs tre compatibles Web. Cette palette contient jusqu 216 couleurs. GIF WebSnap 256 Convertit les couleurs dans la couleur scurise pour le Web la plus proche. Cette palette

contient jusqu 256 couleurs au maximum.


GIF WebSnap 128 Convertit les couleurs dans la couleur scurise pour le Web la plus proche. Cette palette contient jusqu 128 couleurs. GIF adaptatif 256 Contient uniquement les couleurs relles du graphique. Cette palette contient jusqu 256 couleurs au maximum. JPEG - Qualit suprieure Dfinit la qualit sur 80 et le lissage sur 0, ce qui produit une image de haute qualit mais dont le fichier est de plus grande taille. JPEG - Fichier rduit Dfinit la qualit 60 et le lissage 2, ce qui produit un fichier dont la taille vaut moins que la moiti dun fichier JPEG de qualit suprieure, mais avec un niveau de qualit infrieur. GIF anim WebSnap 128 Slectionne le format de fichier GIF anim et convertit les couleurs dans la couleur scurise pour le Web la plus proche. Cette palette contient jusqu 128 couleurs.

Choix dun type de fichier


Pour une optimisation personnalise, slectionnez un type de fichier dans le menu contextuel Exporter un format de fichier du panneau Optimisation, puis dfinissez des options propres ce format, telles que le codage des couleurs, le tramage et la qualit. Vous pouvez enregistrer ces paramtres comme nouveau paramtre prdfini.
GIF Le format GIF (Graphics Interchange Format) est un format de fichier graphique Web rpandu et idal pour les

bandes dessines, les logos, les images comportant des zones transparentes et les animations. Les images dans lesquelles se trouvent des zones de couleur unie rpondent particulirement bien la compression lorsquelles sont exportes en fichiers GIF. Les fichiers GIF contiennent 256 couleurs maximum.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Optimisation et exportation

243

JPEG Dvelopp par le Joint Photographic Experts Group pour les besoins spcifiques des images photographiques ou des images couleur haute dfinition, le format JPEG prend en charge des millions de couleurs (24 bits). Le format JPEG est idal pour des photographies numrises, des images comportant des textures ou des dgrads, ou toute autre image ncessitant plus de 256 couleurs. PNG Le format PNG (Portable Network Graphic) est un format de fichier graphique Web polyvalent pouvant prendre

en charge les couleurs 32 bits, inclure une transparence ou une couche alpha et tre progressif. Cependant, les navigateurs Web ne peuvent pas tous afficher des images PNG. Bien que le format PNG soit le format de fichier natif de Fireworks, les fichiers PNG Fireworks contiennent des informations supplmentaires propres lapplication qui ne sont pas comprises dans un fichier PNG export ou dans des fichiers crs dans dautres applications.
WBMP Le format graphique WBMP (Wireless Bitmap) a t conu pour les priphriques de linformatique mobile

tels que tlphones portables et assistants numriques personnels. Il est utilis spcifiquement pour les pages WAP (Wireless Application Protocol). Le format WBMP tant un format 1 bit, seules deux couleurs sont visibles : le noir et le blanc.
TIFF Le format graphique TIFF (Tagged Image File Format) est utilis pour le stockage des images bitmap. Les

fichiers TIFF sont plus particulirement utiliss dans ldition. De nombreuses applications multimdia prennent galement en charge les fichiers imports au format TIFF.
BMP Format de fichier graphique de Microsoft Windows. De nombreuses applications peuvent importer des

images BMP.
PICT Format de fichier dvelopp par Apple Computer et principalement utilis sur les systmes dexploitation Macintosh. La plupart des applications Mac peuvent importer des images PICT.

Voir aussi
Optimisation des fichiers GIF, PNG, TIFF, BMP et PICT la page 244 Optimisation des fichiers JPEG la page 251

Enregistrement et rutilisation de paramtres doptimisation


Fireworks mmorise les derniers paramtres doptimisation utiliss aprs lune des actions suivantes :

Fichier > Enregistrer Fichier > Enregistrer sous Fichier > Exporter
Fireworks applique ensuite ces paramtres aux nouveaux documents. Remarque : les paramtres doptimisation par dfaut appliqus aux nouvelles tranches sont ceux du document parent. Vous pouvez galement enregistrer des paramtres doptimisation personnaliss pour les rutiliser ultrieurement dans un processus doptimisation ou un traitement par lots. Les informations suivantes sont enregistres dans les optimisations prdfinies personnalises :

Paramtres et table de couleurs dfinis dans le panneau Optimisation Paramtres de cadence des tats du panneau Etats (pour les animations uniquement)

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Optimisation et exportation

244

Enregistrement des paramtres doptimisation comme paramtres prdfinis


Les paramtres doptimisation enregistrs saffichent dans la partie infrieure du menu contextuel Paramtres du panneau Optimisation et dans linspecteur des proprits. Le fichier prdfini est enregistr dans le dossier Export Settings de votre dossier Fireworks de profil utilisateur spcifique. Pour plus dinformations sur lemplacement de ce dossier, reportez-vous la section A propos des fichiers de profil utilisateur la page 316.
1 Dans le menu Options du panneau Optimisation, slectionnez Enregistrer les paramtres. 2 Entrez le nom de loptimisation prdfinie, puis cliquez sur OK.

Partage de paramtres doptimisation enregistrs avec un autre utilisateur de Fireworks


Copiez le fichier doptimisation prdfini enregistr du dossier Export Settings vers le dossier quivalent sur lautre

ordinateur. Remarque : lemplacement de ce dossier varie en fonction du systme dexploitation.

Suppression dune optimisation prdfinie personnalise


Vous ne pouvez pas supprimer un paramtre doptimisation prdfini de Fireworks.
1 Dans le menu contextuel Paramtres enregistrs du panneau Optimisation, slectionnez un paramtre

doptimisation.
2 Dans le menu Options du panneau Optimisation, slectionnez Supprimer les paramtres.

Optimisation des fichiers GIF, PNG, TIFF, BMP et PICT


Dans Fireworks, chaque format de fichier graphique possde un jeu doptions doptimisation. Les fichiers de type 8 bits, tels que les fichiers aux formats GIF, PNG 8, TIFF 8, BMP 8 et PICT 8, permettent de contrler parfaitement loptimisation. Pour les graphiques Web tons continus, notamment les photos, optez pour un format 24 bits, comme le format JPEG (voir la section Optimisation des fichiers JPEG la page 251). Les paramtres doptimisation de Fireworks sont similaires pour tous les formats de fichier graphique 8 bits. Pour les formats de fichier Web, tels que les formats GIF et PNG, vous pouvez dfinir le taux de compression. Tout en essayant divers paramtres doptimisation, utilisez les boutons 2 en 1 et 4 en 1 pour tester et comparer laspect du graphique et la taille estime de son fichier.

Slection dune palette de couleurs


Toutes les images 8 bits contiennent une palette pouvant contenir jusqu 256 couleurs disponibles. Les images utilisent uniquement ces couleurs, mais pas ncessairement toutes les couleurs.
Dans le menu contextuel Palette indexe du panneau Optimisation, slectionnez lune des options suivantes : Adaptative Palette personnalise tablie partir des couleurs utilises dans le document. Cette option produit en gnral une image de qualit suprieure. Adaptive pour le Web Palette adaptive dans laquelle les couleurs sont converties dans leur quivalent scuris pour le Web le plus proche. Les couleurs scurises pour le Web proviennent de la palette Web 216.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Optimisation et exportation

245

Web 216 Palette compose des 216 couleurs communes aux ordinateurs Windows et Mac OS. Cette palette est

souvent dite scurise pour le Web (ou compatible avec les navigateurs) parce quelle donne des rsultats relativement rguliers en 8 bits, quels que soient la plate-forme et le navigateur utiliss.
Exacte Palette contenant les couleurs relles de limage. La palette exacte nest utilisable que pour les images

contenant au maximum 256 couleurs. Dans le cas contraire, la palette devient Adaptive.
Windows et Mac OS Palette regroupant respectivement les 256 couleurs dfinies par les normes des plates-formes

Windows ou Mac OS.


Niveaux de gris Palette compose de 256 nuances de gris ou moins. Slectionnez cette palette pour convertir

limage exporte en niveaux de gris.


Noir et blanc Palette deux couleurs, comportant uniquement du noir et du blanc. Uniforme Palette mathmatique regroupant les valeurs en pixels des couleurs RVB. Personnalis Palette qui a t modifie ou charge partir dune palette externe (fichier ACT) ou dun fichier GIF.

Optimisez et personnalisez les palettes de couleurs laide de la table de couleurs dans le panneau Optimisation.

Importation dune palette personnalise


1 Procdez de lune des manires suivantes :

Dans le menu contextuel Options du panneau Optimisation, slectionnez Charger la palette. Dans le menu contextuel Palette indexe du panneau Optimisation, cliquez sur Personnalise.
2 Recherchez un fichier de palette ACT ou GIF, puis cliquez sur Ouvrir.

Les couleurs du fichier ACT ou GIF sont ajoutes dans la table de couleurs du panneau Optimisation. Remarque : les utilisateurs Windows doivent slectionner les fichiers GIF dans le menu contextuel Types de fichiers pour pouvoir afficher tous les fichiers portant lextension .gif dans la bote de dialogue Ouvrir.

Slection dun codage de couleurs pour une image 8 bits


Le codage des couleurs (ou profondeur) dsigne le nombre de couleurs utilises dans le graphique. Rduire le codage des couleurs permet dobtenir un fichier de plus petite taille mais amoindrit galement la qualit de limage. Lorsque vous rduisez le codage des couleurs, certaines couleurs de limage sont rejetes, en commenant par les couleurs les moins utilises. Les pixels qui contiennent des couleurs rejetes sont convertis dans la couleur la plus proche prsente dans la palette.
Procdez de lune des manires suivantes :

Dans le menu contextuel Couleurs du panneau Optimisation, slectionnez une option. Entrez une valeur (de 2 256) dans la zone de texte.
Remarque : le nombre situ dans la partie infrieure de la table de couleurs indique le nombre de couleurs visibles dans limage. Si aucun nombre ne saffiche, cliquez sur le bouton Reconstituer.

Suppression des couleurs non utilises dune image 8 bits


Cette opration permet de rduire la taille du fichier.
Dans le menu Options du panneau Optimisation, slectionnez Supprimer les couleurs non utilises.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Optimisation et exportation

246

Inclusion de toutes les couleurs de la palette, dont les couleurs non utilises dans limage enregistre
Dslectionnez Supprimer les couleurs inutilises.

Affichage et modification des couleurs dune palette


La table des couleurs du panneau Optimisation affiche les couleurs utilises dans laperu actif de limage lorsque vous travaillez en mode 8 bits ou moins. Vous pouvez y modifier la palette de limage. La table de couleurs est automatiquement mise jour en mode Aperu. Elle saffiche vide si vous optimisez plusieurs tranches la fois ou si vous ne travaillez pas en mode de couleurs 8 bits. Divers petits symboles apparaissent sur certaines nuances pour indiquer certaines caractristiques des couleurs correspondantes, comme suit :
Symbole Signification La couleur a t modifie, ce qui na deffet que sur le document export. Si vous modifiez une couleur, la couleur dans le document source nest pas modifie. La couleur est verrouille. La couleur est transparente. La couleur est scurise pour le Web. La couleur possde plusieurs attributs. Dans le cas prsent, cette couleur est scurise pour le Web, verrouille et a t modifie.

Reconstitution de la table des couleurs pour prendre en compte les modifications apportes au document
Lorsquune reconstitution est ncessaire, le bouton Reconstituer saffiche en bas du panneau Optimisation.
Cliquez sur le bouton Reconstituer.

Slection des couleurs dune palette


Pour slectionner une seule couleur, cliquez sur celle-ci dans la table des couleurs du panneau Optimisation. Pour slectionner plusieurs couleurs, cliquez sur celles-ci tout en maintenant la touche Ctrl (Windows) ou
Cmde (Mac OS) enfonce.

Pour slectionner une plage de couleurs, cliquez sur une couleur, maintenez la touche Maj enfonce, puis cliquez
sur la dernire couleur de la plage.

Aperu de tous les pixels du document contenant une couleur spcifique


1 Cliquez sur le bouton Aperu dans le coin suprieur gauche de la fentre de document. 2 Dans la table des couleurs du panneau Optimisation, cliquez sur une nuance, puis maintenez le bouton de la souris

enfonc. Les pixels contenant la nuance slectionne changent temporairement de couleur tant que le bouton de la souris reste enfonc. Remarque : lorsque vous prvisualisez des pixels dans le document laide des fentres 2 en 1 ou 4 en 1, slectionnez une fentre plutt que loriginal.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Optimisation et exportation

247

Verrouillage ou dverrouillage des couleurs dune palette


Vous pouvez verrouiller certaines couleurs de faon empcher leur suppression ou modification lors dun changement de palette ou du retrait de couleurs de la palette. Lorsque vous changez de palette aprs un verrouillage de couleurs, les couleurs verrouilles sont ajoutes la nouvelle palette.

Pour verrouiller ou dverrouiller une nuance slectionne, cliquez sur le bouton Verrouiller

en bas du panneau Optimisation. Vous pouvez galement cliquer avec le bouton droit de la souris (Windows) ou maintenir la touche Ctrl enfonce (Mac OS) sur la nuance et choisir loption Verrouiller la couleur. panneau Optimisation.

Pour dverrouiller toutes les couleurs, slectionnez Dverrouiller toutes les couleurs dans le menu Options du

Modification des couleurs dune palette


La modification dune couleur remplace toutes les occurrences de cette couleur dans les images qui sont exportes ou enregistres au format bitmap. A lexception des images bitmap, cette modification ne remplace pas la couleur dans limage dorigine. Si vous utilisez une image bitmap, enregistrez une copie de limage au format de fichier PNG pour conserver une version modifiable de limage dorigine.
1 Pour ouvrir les couleurs systme, procdez de lune des manires suivantes :

Slectionnez une couleur, puis cliquez sur le bouton Modifier une couleur Cliquez deux fois sur une couleur dans la table de couleurs.
2 Modifiez la couleur.

au bas du panneau Optimisation.

Remarque : cliquez avec le bouton droit de la souris (Windows) ou tout en maintenant la touche Ctrl enfonce (Mac OS) sur une couleur de la palette pour afficher les options de modification.

Utilisation de couleurs scurises pour le Web


Les couleurs scurises pour le Web sont communes aux plates-formes Mac OS et Windows. Ces couleurs ne sont pas trames lorsquelles sont affiches dans un navigateur Web sur un cran dordinateur paramtr pour 256 couleurs. Dans le cas dun fichier au format PNG Fireworks, le changement des couleurs en couleurs scurises pour le Web dans le panneau Optimisation agit uniquement sur la version exporte de limage, et non limage elle-mme.

Pour convertir toutes les couleurs en couleurs scurises pour le Web, slectionnez Web 216 dans le menu
contextuel Palette indexe du panneau Optimisation.

Pour crer une palette adaptative qui privilgie les couleurs scurises pour le Web, slectionnez Adaptive pour
le Web dans le menu contextuel Palette indexe du panneau Optimisation.

Pour convertir une couleur en son quivalent scuris pour le Web le plus proche, slectionnez une couleur dans
la table des couleurs du panneau Optimisation, puis cliquez sur le bouton Magntisme de la couleur scurise pour le Web .

Utilisation du tramage pour sapprocher des couleurs manquantes dune palette


Le tramage permet de crer une approximation des couleurs ne figurant pas dans la palette de couleurs active, en alternant des pixels de couleurs proches. A une certaine distance, les couleurs se mlangent et ressemblent la couleur manquante. Le tramage est particulirement utile pour exporter des images avec des fondus complexes ou des dgrads, ou pour exporter des photographies dans un format de fichier graphique 8 bits, tel que le format GIF.
Entrez une valeur de pourcentage dans la zone de texte Tramage du panneau Optimisation.

Remarque : le tramage peut augmenter considrablement la taille du fichier.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Optimisation et exportation

248

Enregistrement des palettes de couleurs


Vous pouvez enregistrer les palettes personnalises en tant que fichiers de palette externes exploitables dans dautres documents Fireworks ou dans dautres applications prenant en charge ce type de fichier, telles quAdobe Flash et Adobe Photoshop. Les fichiers de palettes enregistrs portent lextension .act.
1 Dans le menu Options du panneau Optimisation, slectionnez Enregistrer la palette. 2 Saisissez un nom, puis slectionnez un dossier de destination. 3 Cliquez sur Enregistrer.

Vous pouvez charger le fichier de palette enregistr dans le panneau Nuancier ou Optimisation afin de lutiliser pour exporter dautres documents.

Ajustement de la compression
Vous pouvez compresser des fichiers GIF en modifiant leur paramtre de perte. Plus cette valeur est leve, plus les fichiers sont de petite taille, mais plus la qualit de limage est rduite. Un paramtre de perte dfini entre 5 et 15 est idal dans la plupart des cas.

Fichier GIF dorigine ; perte de 30 ; perte de 100

Dans le panneau Optimisation, entrez une valeur pour le paramtre Perte.

Transformation de zones en zones transparentes


Les zones transparentes prsentes dans les fichiers GIF et PNG 8 bits permettent de rvler larrire-plan dune page Web. Dans Fireworks, un damier gris et blanc dans la fentre de document permet didentifier les zones transparentes.

Aperu dune image optimise dans Fireworks ; image exporte avec transparence et place sur une page Web ayant un arrire-plan color

Remarque : bien que les fichiers PNG 32 bits contiennent de la transparence, le panneau Optimisation ne dispose pas doption de transparence adapte. Pour vos fichiers GIF, utilisez loption Transparence dindex qui active ou dsactive les pixels avec des valeurs chromatiques particulires.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Optimisation et exportation

249

Par dfaut, les images GIF sont exportes sans transparence. Mme si la le document situe derrire limage ou lobjet apparat transparent dans laffichage original dans Fireworks, larrire-plan de limage nest pas ncessairement transparent, moins de slectionner loption Transparence dindex avant lexportation. Pour vos fichiers PNG, vous pouvez utiliser la transparence alpha, souvent employe dans les graphiques exports qui contiennent des dgrads de transparence et des pixels semi-opaques. Bien que la transparence soit peu intressante pour lexportation pour le Web (rares sont les navigateurs qui prennent en charge le format PNG), il est utile dexporter des fichiers au format Flash ou Adobe Director, car les deux applications prennent en charge ce type de transparence. Remarque : lapplication de la transparence des couleurs naffecte pas limage proprement dite, mais seulement sa version exporte. Pour voir laspect quaura limage exporte, affichez un aperu.

Voir aussi
Exportation depuis lespace de travail la page 253

Application dun effet de transparence larrire-plan dune image


1 Cliquez sur le bouton Aperu, 2 en 1 ou 4 en 1 dans le coin suprieur gauche de la fentre de document. En mode

daffichage 2 en 1 ou 4 en 1, cliquez sur une autre fentre que celle de loriginal.


2 Dans le panneau Optimisation (Fentre > Optimisation), slectionnez le format de fichier GIF ou PNG 8.

Slectionnez ensuite Transparence dindex dans le menu contextuel Choisir le type de transparence. La couleur de la zone de travail apparat transparente dans laperu, et le graphique peut alors tre export.

Slection dune couleur de transparence


1 Cliquez sur le bouton Aperu, 2 en 1 ou 4 en 1 dans le coin suprieur gauche de la fentre de document. En mode

daffichage 2 en 1 ou 4 en 1, cliquez sur une autre fentre que celle de loriginal.


2 Dans le panneau Optimisation (Fentre > Optimisation), slectionnez le format de fichier GIF ou PNG 8.

Slectionnez ensuite Transparence dindex dans le menu contextuel Choisir le type de transparence.
3 Pour slectionner une autre couleur, cliquez sur le bouton Slectionner la couleur de transparence

4 Cliquez sur une nuance dans la table des couleurs du panneau Optimisation ou cliquez sur une couleur dans le

document.

Ajout ou suppression de couleurs transparentes


1 Cliquez sur le bouton Aperu, 2 en 1 ou 4 en 1 dans le coin suprieur gauche de la fentre de document. En mode

daffichage 2 en 1 ou 4 en 1, cliquez sur une autre fentre que celle de loriginal. Remarque : bien que vous puissiez ajouter ou supprimer des couleurs transparentes dans laffichage original, vous pouvez en observer le rsultat uniquement en affichant un aperu.
2 Dans le panneau Optimisation (Fentre > Optimisation), slectionnez le format de fichier GIF ou PNG 8.

Slectionnez ensuite Transparence dindex dans le menu contextuel Choisir le type de transparence.
3 Au bas du panneau, cliquez sur le bouton Ajoute la couleur la transparence

ou Efface la couleur de la

transparence

4 Cliquez sur une nuance dans la table des couleurs ou sur une couleur dans le document.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Optimisation et exportation

250

Entrelacement dimages tlcharger progressivement


Les images entrelaces, consultes dans un navigateur Web, commencent par safficher dans une faible rsolution puis parviennent leur rsolution complte la fin de leur tlchargement. Remarque : cette option est disponible uniquement pour les formats de fichier GIF et PNG. Vous pouvez obtenir des rsultats similaires avec une image JPEG en rendant son tlchargement progressif.
Dans le menu Options du panneau Optimisation, slectionnez Entrelace.

Correspondance avec une couleur darrire-plan cible


Le lissage vous permet de lisser laspect dun objet en fusionnant sa couleur avec larrire-plan. Par exemple, si lobjet est noir et que la page sur laquelle il est plac est blanche, la fonction de lissage ajoute plusieurs nuances de gris aux pixels qui forment le contour de lobjet pour adoucir la transition entre le noir et le blanc.

Dans le panneau Optimisation, slectionnez une couleur dans le menu contextuel Cache. Faites en sorte quelle soit

le plus proche possible de la couleur darrire-plan cible sur lequel le graphique sera plac. Remarque : le lissage sapplique uniquement aux objets contours adoucis placs directement sur la zone de travail.

Suppression des halos


Lorsque vous rendez transparente la couleur de zone de travail dune image ayant t lisse, les pixels crs pour assurer le lissage restent en place. Lorsque vous exportez (ou enregistrez) le graphique et le placez sur une page Web ayant une couleur darrire-plan diffrente, les pixels situs la priphrie de lobjet liss peuvent prendre la forme dun halo, effet tout particulirement visible sur un arrire-plan sombre.

Mthodes anti-halos dans les fichiers PNG Fireworks et les fichiers Photoshop imports
Procdez de lune des manires suivantes :

Slectionnez une couleur de zone de travail dans linspecteur des proprits ou une couleur de cache dans le
panneau Optimisation qui soit identique celle de larrire-plan de la page Web cible.

Aprs avoir slectionn lobjet exporter, cliquez sur Net dans le menu contextuel Bord de linspecteur des
proprits.

Suppression manuelle dun halo dune image GIF ou dun fichier graphique
1 Ouvrez le fichier dans Fireworks et cliquez sur le bouton Aperu, 2 en 1 ou 4 en 1 dans le coin suprieur gauche de

la fentre de document. En mode daffichage 2 en 1 ou 4 en 1, cliquez sur une autre fentre que celle de loriginal.
2 Dans le menu contextuel Transparence du panneau Optimisation, cliquez sur Transparence dindex. 3 Cliquez sur le bouton Ajoute la couleur la transparence

, puis cliquez sur un pixel dans le halo.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Optimisation et exportation

251

Tous les pixels de couleur identique sont effacs dans laperu.


4 Si le halo subsiste, rptez ltape 3 jusqu ce quil disparaisse.

Optimisation des fichiers JPEG


Le panneau Optimisation vous permet doptimiser les fichiers JPEG en dfinissant des options de compression et de lissage. Les fichiers JPEG tant toujours enregistrs et exports en couleurs 24 bits, vous ne pouvez pas les optimiser en modifiant leur palette de couleurs. La table de couleurs est vide lorsque vous slectionnez une image JPEG. Tout en essayant divers paramtres doptimisation, utilisez les boutons 2 en 1 et 4 en 1 pour tester et comparer laspect et la taille estime dun fichier JPEG. Remarque : il est possible denregistrer les fichiers JPEG directement depuis la bote de dialogue Enregistrer sous .

Ajustement de la qualit JPEG


Le format JPEG est un format dit avec perte , ce qui signifie quune partie des donnes de limage est supprime lors de la compression, ce qui rduit la qualit du fichier final.

Image originale ; rglage de la qualit sur 50 ; rglage de la qualit sur 20

Rglez la qualit laide du curseur du menu contextuel Qualit du panneau Optimisation.

Utilisez un pourcentage lev pour conserver la qualit ; la compression sera alors moins importante et les fichiers rsultants plus volumineux. A linverse, un faible pourcentage permet dobtenir un fichier de taille rduite mais dune qualit graphique infrieure.

Compression slective de zones dans une image JPEG


Pour rduire la taille totale de limage tout en prservant la qualit des zones les plus importantes, compressez les zones les plus critiques avec un niveau de qualit suprieur, et les zones moins importantes, comme les arrire-plans, avec un niveau de qualit moindre.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Optimisation et exportation

252

La zone slectionne dans cette image est compresse un niveau de qualit de 90, tandis que la zone non slectionne est compresse un niveau de qualit de 50.

1 Dans la fentre Original, slectionnez la zone compresser dans le graphique laide de lun des outils de cadre de

slection.
2 Choisissez Modification > JPEG slective > Enregistrer la slection en tant que masque JPEG. 3 Slectionnez le format JPEG dans le menu contextuel Exporter un format de fichier du panneau Optimisation. 4 Cliquez sur le bouton Modifier les options de qualit slective dans le panneau Optimisation. 5 Slectionnez Activer la qualit slective, puis entrez une valeur dans la zone de texte.

Une valeur faible permet de compresser davantage la zone slectionne que le reste de limage, tandis quune valeur leve permet de compresser davantage le reste de limage que cette zone.
6 (Facultatif) Modifiez la couleur de superposition de la zone JPEG slective. Cela naffecte pas le rsultat. 7 Pour exporter tous les textes dans une qualit suprieure, quelle que soit la valeur Qualit slective, slectionnez

Prserver la qualit du texte.


8 Pour exporter les symboles de bouton un niveau de qualit suprieur, slectionnez Prserver la qualit du bouton.

Modification de la zone de compression JPEG slective


1 Choisissez Modification > JPEG slective > Restaurer le masque JPEG en tant que slection. 2 Pour modifier la taille de la zone de slection, utilisez loutil Cadre de slection ou tout autre outil de slection. 3 Choisissez Modification > JPEG slective > Enregistrer la slection en tant que masque JPEG. 4 (Facultatif) Modifiez les paramtres Qualit slective dans le panneau Optimisation.

Remarque : pour annuler une slection, cliquez sur Modification > JPEG slective > Supprimer le masque JPEG.

Attnuation ou accentuation des dtails JPEG


Le lissage consiste appliquer un flou aux bords nets, qui noffrent pas de bonnes possibilits de compression en JPEG. Les valeurs leves produisent un flou plus lev dans les fichiers JPEG exports ou enregistrs, ce qui cre en gnral des fichiers de plus petite taille. Une valeur de lissage de 3 environ suffit rduire la taille du fichier dimage tout en conservant une qualit raisonnable. Utilisez loption Bords des JPEG plus nets pour exporter ou enregistrer des fichiers JPEG qui contiennent du texte ou des dtails fins et conserver la nettet de ces zones. Cette option augmente la taille de fichier. Procdez de lune des manires suivantes :

Pour attnuer les dtails, slectionnez Lissage dans le panneau Optimisation. Pour accentuer les dtails, cliquez sur Bords des JPEG plus nets dans le menu Options du panneau Optimisation.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Optimisation et exportation

253

Cration dune image JPEG progressive


Comme les images PNG et GIF entrelaces, les images JPEG progressives saffichent initialement dans une faible rsolution, puis leur qualit samliore au fur et mesure de leur tlchargement.
Dans le menu Options du panneau Optimisation, slectionnez JPEG progressive.

Remarque : certaines anciennes applications ddition dimages bitmap ne peuvent pas ouvrir les images JPEG progressives.

Exportation depuis lespace de travail


Lorsquun graphique ou un document est optimis, vous pouvez lexporter (ou lenregistrer, selon le type de fichier dorigine). Vous pouvez exporter (ou enregistrer) un document comme une simple image au format GIF, JPEG ou autre. Vous pouvez galement exporter tout le document en tant que fichier HTML et les fichiers image associs, uniquement des tranches slectionnes ou une zone spcifique. En outre, vous pouvez exporter des tats Fireworks et des calques dans des fichiers dimage distincts. Lemplacement par dfaut dans lequel Fireworks exporte des documents est dtermin par les lments suivants, dans lordre :
1 Prfrence dexportation actuelle du document, dfinie si vous avez dj export le document puis enregistr

le PNG
2 Emplacement actuel dexportation/denregistrement, dfini chaque fois que vous modifiez lemplacement par

dfaut dans la bote de dialogue Enregistrer, Enregistrer sous ou Exporter


3 Emplacement du fichier actif 4 Emplacement denregistrement par dfaut des nouveaux documents ou des nouvelles images sur le systme

dexploitation Lemplacement par dfaut denregistrement par Fireworks dun document est quant lui dtermin par des critres trs diffrents. Pour plus dinformations, reportez-vous la section Enregistrement de fichiers Fireworks la page 11.

Exportation de pages en tant que fichiers dimage


1 Choisissez Fichier > Exporter. 2 Spcifiez lemplacement des fichiers dexportation. 3 Procdez de lune des manires suivantes :

Choisissez Images uniquement dans le menu contextuel Exporter, puis activez ou dsactivez la case Page
actuelle uniquement. Les pages sont exportes au format dimage dfini dans le panneau Optimisation.

Dans le menu contextuel Exporter, slectionnez la commande Pages vers Fichiers, puis choisissez loption
Images dans le menu contextuel Exporter en tant que. Les pages sont exportes au format dimage dfini dans le panneau Optimisation.

Dans le menu contextuel Exporter, cliquez sur Pages vers Fichiers, puis slectionnez PNG Fireworks dans le
menu contextuel Exporter en tant que. Chaque page est exporte sous la forme dun fichier PNG distinct qui garantit une compatibilit descendante avec Fireworks 8. Remarque : Pour exporter toutes les pages dans le format choisi, slectionnez-les toutes, puis optimisez les paramtres.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Optimisation et exportation

254

Exportation dune seule image


Si vous travaillez sur une image existante ouverte dans Fireworks, vous pouvez lenregistrer au lieu de lexporter. Pour plus dinformations, reportez-vous la section Enregistrement de documents dans dautres formats la page 12. Remarque : pour exporter uniquement certaines images dun document, vous devez dabord dcouper votre document en tranches, puis exporter uniquement les tranches souhaites.
1 Dans le panneau Optimisation, slectionnez un format de fichier, puis dfinissez les options propres ce format. 2 Choisissez Fichier > Exporter. 3 Dfinissez lemplacement vers lequel exporter le fichier dimage.

Pour les graphiques Web, le meilleur emplacement est gnralement un dossier du site Web local.
4 Saisissez un nom de fichier sans extension. Une extension est ajoute pendant lexportation selon le type de fichier. 5 Dans le menu contextuel Exporter, slectionnez Images uniquement. 6 Cliquez sur Enregistrer.

Exportation dun document dcoup en tranches


Par dfaut, lorsque vous exportez un document Fireworks dcoup en tranches, il est export sous la forme dun fichier HTML et de plusieurs images associes. Le fichier HTML export peut tre affich dans un navigateur Web ou import dans dautres applications pour y tre retouch. Avant dexporter le fichier, assurez-vous que le style HTML appropri est slectionn dans la bote de dialogue Configuration HTML (voir la section Dfinition des options dexportation de code HTML la page 262).

Exportation de toutes les tranches


1 Choisissez Fichier > Exporter. 2 Accdez au dossier de destination de lexportation sur votre disque dur. 3 Dans le menu contextuel Exporter, slectionnez Documents HTML et Images. 4 Entrez un nom de fichier dans le champ Nom de fichier (Windows) ou Enregistrer sous (Mac OS). 5 Dans le menu contextuel HTML, slectionnez Exporter le fichier HTML. 6 Dans le menu contextuel Tranches, choisissez Exporter les tranches. 7 (Facultatif) Slectionnez Placer les images dans des sous-dossiers. 8 Cliquez sur Enregistrer.

Exportation de tranches slectionnes


1 Tout en maintenant la touche Maj enfonce, cliquez sur plusieurs tranches pour les slectionner. 2 Choisissez Fichier > Exporter. 3 Slectionnez un emplacement de destination des fichiers exports (un dossier de votre site Web local, par exemple). 4 Dans le menu contextuel Exporter, slectionnez Documents HTML et Images. 5 Saisissez un nom de fichier sans extension. Une extension est ajoute pendant lexportation selon le type de fichier.

Si vous exportez plusieurs tranches, Fireworks utilise le nom entr comme tant le nom racine de tous les graphiques exports, lexception des graphiques auxquels vous avez affect des noms personnaliss dans le panneau Calques ou dans linspecteur des proprits.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Optimisation et exportation

255

6 Dans le menu contextuel Tranches, choisissez Exporter les tranches. 7 Pour exporter uniquement les tranches slectionnes avant lexportation, choisissez la commande Tranches

slectionnes uniquement, puis vrifiez que loption Inclure les zones sans tranches est dslectionne.
8 Cliquez sur Enregistrer.

Mise jour dune tranche


Si vous avez dj export un document dcoup en tranches et que vous avez par la suite apport des modifications au document original dans Fireworks, vous pouvez uniquement mettre jour limage ou la tranche modifie. Pour trouver facilement la tranche de remplacement, personnalisez le nom des tranches.
1 Masquez la tranche pour modifier la zone quelle recouvre. 2 Raffichez la tranche. 3 Cliquez avec le bouton droit de la souris (Windows) ou tout en maintenant la touche Ctrl enfonce (Mac OS) sur

la tranche, puis slectionnez Exporter la tranche slectionne.


4 Slectionnez le mme dossier que celui de la tranche dorigine en utilisant le mme nom de fichier, puis cliquez sur

Enregistrer.
5 Cliquez sur OK si un message vous demande de remplacer le fichier existant.

Remarque : dans Fireworks, vitez de redimensionner la tranche au-del de sa taille dexportation dorigine car vous risquez dobtenir des rsultats imprvisibles dans le document HTML aprs la mise jour de la tranche.

Exportation dune animation


Lorsque vous avez cr et optimis une animation, elle est prte tre exporte. Vous pouvez exporter une animation sous les types de fichier suivants :
GIF anim Ce format donne les meilleurs rsultats avec les graphiques de type cliparts et dessins anims. SWF Flash ou PNG Fireworks (aucune exportation ncessaire) Exportez une animation en tant que fichier SWF

importer dans Flash. Vous pouvez passer ltape dexportation en important directement dans Flash un fichier source PNG Fireworks. Cette mthode plus directe vous permet dimporter tous les calques et tous les tats de votre animation et de les peaufiner dans Flash (voir la section Utilisation de Flash la page 276).
Fichiers multiples Il est utile dexporter des tats ou calques danimation en tant que fichiers multiples lorsque

diffrents calques comportent de nombreux symboles pour un mme objet. Par exemple, vous pouvez exporter une bannire publicitaire sous la forme de plusieurs fichiers si chaque lettre du nom dune socit est anime dans un graphique (voir la section Exportation dtats ou de calques en tant que fichiers distincts la page 256). Si votre document comporte plusieurs animations, vous pouvez insrer des tranches pour exporter chaque animation en utilisant diffrents paramtres danimation, tels que la lecture en boucle et la cadence des tats.

Exportation dun fichier GIF anim


1 Choisissez la commande Slection > Dslectionner pour dslectionner tous les objets et tranches, puis, dans le

panneau Optimisation, slectionnez le format de fichier GIF anim.


2 Choisissez Fichier > Exporter. 3 Saisissez le nom du fichier, puis slectionnez le dossier de destination. 4 Cliquez sur Enregistrer.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Optimisation et exportation

256

Exportation de plusieurs fichiers GIF anims avec diffrents paramtres danimation


1 Tout en maintenant la touche Maj enfonce, cliquez sur les animations pour toutes les slectionner. 2 Choisissez la commande Edition > Insrer > Tranche rectangulaire ou Tranche polygonale. 3 Cliquez sur Multiple dans la zone de message. 4 Slectionnez chaque tranche individuellement, puis dans le panneau Etats, dfinissez les diffrents paramtres

danimation de chaque tranche.


5 Slectionnez toutes les tranches animer, puis choisissez GIF anim comme format de fichier dans le

panneau Optimisation.
6 Cliquez avec le bouton droit de la souris (Windows) ou tout en maintenant la touche Ctrl enfonce (Mac OS) sur

chaque tranche exporter individuellement, puis slectionnez Exporter la tranche slectionne. Dans la bote de dialogue Exporter, entrez un nom pour chaque fichier, slectionnez une destination, puis cliquez sur Enregistrer.

Exportation dtats ou de calques en tant que fichiers distincts


Fireworks permet dexporter chaque calque ou tat dun document sous la forme dun fichier dimage distinct en tenant compte des paramtres doptimisation spcifis dans le panneau Optimisation. Le nom du calque ou de ltat dtermine le nom du fichier export correspondant. Cette mthode dexportation est souvent utilise pour exporter des animations.
1 Choisissez Fichier > Exporter. 2 Entrez un nom de fichier, puis slectionnez un dossier de destination. 3 Dans le menu contextuel Exporter, slectionnez une option :
Etats vers fichiers Exporte les tats comme des fichiers distincts. Calques vers fichiers Exporte les calques comme des fichiers distincts.

Remarque : cette dernire option exporte lensemble des calques de ltat actif.
4 Pour recadrer automatiquement chaque image exporte de manire ninclure que les objets sur chaque tat,

slectionnez loption Rogner les images. Sinon, pour inclure la zone de travail entire (y compris les zones vierges au-del des objets), dsactivez cette option.
5 Cliquez sur Enregistrer.

Exportation dune zone de document


1 Dans le panneau Outils, cliquez sur loutil Zone dexportation

2 Faites glisser le pointeur de loutil pour dlimiter la partie du document exporter.

Remarque : vous pouvez ajuster la position du cadre de slection mesure que vous le dlimitez. Tout en maintenant enfoncs le bouton de la souris et la barre despace, faites glisser le cadre de slection vers lemplacement appropri sur la zone de travail. Relchez la barre despace pour continuer dessiner le cadre de slection. Lorsque vous relchez le bouton de la souris, la zone dexportation reste slectionne.
3 Au besoin, redimensionnez la zone dexportation :

Pour redimensionner proportionnellement le cadre de slection de la zone dexportation, faites glisser une
poigne tout en maintenant la touche Maj enfonce.

Pour redimensionner le cadre de slection en partant de son centre, faites glisser une poigne tout en maintenant
la touche Alt (Windows) ou Option (Mac OS) enfonce.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Optimisation et exportation

257

Pour redimensionner le cadre de slection en partant de son centre en conservant ses proportions, faites glisser
une poigne tout en maintenant les touches Alt+Maj (Windows) ou Option+Maj (Mac OS) enfonces.
4 Cliquez deux fois lintrieur du cadre de slection de la zone dexportation pour afficher laperu de limage. 5 Dfinissez les paramtres dans laperu de limage, puis cliquez sur Exporter. 6 Entrez un nom de fichier, puis slectionnez un dossier de destination. 7 Dans le menu contextuel Exporter, cliquez sur Images uniquement. 8 Cliquez sur Enregistrer.

Remarque : pour annuler lexportation, cliquez deux fois lextrieur du cadre de slection de la zone dexportation, appuyez sur la touche Echap ou slectionnez un autre outil.

Exportation de code HTML


Sauf indication contraire, lorsque vous exportez un document Fireworks dcoup en tranches, vous exportez un fichier HTML accompagn de ses images. Utilisez la bote de dialogue Configuration HTML pour dfinir les paramtres dexportation de code HTML Fireworks. Fireworks gnre un vritable fichier HTML qui peut tre lu dans la plupart des navigateurs Web et diteurs HTML. Par dfaut, lexportation spcifie le codage UTF-8. Il existe plusieurs faons dexporter un fichier HTML Fireworks :

Exporter un fichier HTML que vous pouvez ouvrir plus tard pour le modifier dans un diteur HTML Exporter chaque page dun fichier Fireworks dans un fichier HTML distinct Copier le code HTML dans le Presse-papiers de Fireworks, puis coller directement ce code dans un document
HTML existant

Exporter un fichier HTML, louvrir dans un diteur HTML, copier manuellement des sections de code depuis le
fichier, puis coller ce code dans un autre document HTML

Exporter du code HTML en calques CSS (Cascading Style Sheet) et XHTML Utiliser la commande Mettre jour le code HTML pour modifier un fichier HTML cr prcdemment
Fireworks vous permet dexporter du code HTML aux formats Gnrique, Dreamweaver, Microsoft FrontPage et Adobe GoLive. Remarque : Adobe Dreamweaver est troitement intgr Fireworks. Fireworks gre les exportations de code HTML vers Dreamweaver diffremment des exportations vers dautres diteurs HTML. Si vous exportez du code HTML Fireworks vers Dreamweaver, reportez-vous la section Utilisation de Dreamweaver la page 266. La mthode dexportation permettant de rcuprer dans dautres applications un code HTML gnr par Fireworks est une mthode idale pour le travail en quipe. Cette mthode fractionne le flux de production en segments, ce qui permet une personne dexcuter une tche donne dans une application, puis une autre de prendre la suite ultrieurement dans une autre application.

Intgration de commentaires dans du code HTML export


Les commentaires de code HTML Fireworks sont compris entre les squences de caractres <!-- et -->. Tout ce qui se trouve entre ces deux marqueurs nest pas interprt comme code HTML ou JavaScript.
Avant lexportation, ouvrez la bote de dialogue Configuration HTML, puis slectionnez loption Inclure les

commentaires HTML sous longlet Gnral.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Optimisation et exportation

258

Rsultats de lexportation
Lorsque vous exportez ou copiez du code HTML depuis Fireworks, les lments suivants sont gnrs :

Le code HTML ncessaire pour rassembler les images dcoupes et un code JavaScript, si le document contient des
lments interactifs. Le code HTML gnr par Fireworks contient des liens vers les images exportes et utilise la couleur de la zone de travail pour larrire-plan de la page Web.

Un ou plusieurs fichiers dimage, en fonction du nombre de tranches figurant dans votre document et du nombre
dtats de boutons.

Un fichier de sparateurs appel spacer.gif, si ncessaire. Le fichier spacer.gif est un fichier GIF transparent de
1 pixel sur 1 pixel, que Fireworks utilise pour corriger les problmes despacement lorsque les images dcoupes en tranches sont rassembles dans une table HTML. La cration de ce fichier de sparateurs est facultative.

Si vous exportez des menus contextuels, les fichiers suivants sont exports : un fichier mm_css_menu.js et un
fichier .css contenant le code du menu contextuel CSS. Si les menus contextuels contiennent des sous-menus, lapplication exporte galement un fichier arrows.gif.

Lorsque vous exportez ou copiez du code HTML dans Dreamweaver, des fichiers de commentaires sont crs pour
faciliter lintgration entre Fireworks et Dreamweaver. Ces fichiers portent lextension .mno.

Exportation de code HTML Fireworks


1 Choisissez Fichier > Exporter. 2 Accdez au dossier de destination de lexportation sur votre disque dur. 3 Dans le menu contextuel Exporter, slectionnez Documents HTML et Images. 4 Dans la bote de dialogue Configuration HTML, cliquez sur le bouton Options, puis, dans le menu contextuel

Style HTML de longlet Gnral, slectionnez un diteur HTML. Si votre diteur HTML nest pas rpertori, slectionnez Gnrique. Remarque : il est important de slectionner votre diteur HTML comme style HTML de sorte que les lments interactifs, notamment les boutons et les survols, fonctionnent correctement aprs leur importation dans votre diteur HTML.
5 Cliquez sur OK. 6 Dans le menu contextuel HTML, slectionnez Exporter le fichier HTML. 7 Si votre document contient des tranches, dans le menu contextuel Tranches, cliquez sur Exporter les tranches. 8 Pour stocker des images dans un dossier spar, slectionnez la commande Importer les images dans des sous-

dossiers. Vous pouvez slectionner un dossier spcifique ou le dossier Images par dfaut de Fireworks.
9 Si vous exportez un document Fireworks de plusieurs pages, dsactivez la case Page active uniquement de manire

exporter toutes les pages dans des documents HTML distincts.


10 Cliquez sur Enregistrer.

Une fois exports, les fichiers Fireworks saffichent sur votre disque dur. Des images et un fichier HTML sont gnrs lemplacement spcifi dans la bote de dialogue Exporter.

Copie de code HTML dans le Presse-papiers


Il existe deux manires de copier du code HTML dans le Presse-papiers de Fireworks. Vous pouvez utiliser la commande Copier le code HTML ou, dans la bote de dialogue Exporter, slectionner loption Copier dans le Pressepapiers. Vous pouvez ensuite coller ce code HTML dans un document ouvert dans votre diteur HTML prfr.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Optimisation et exportation

259

Pour dcider de la mthode utiliser pour intgrer du code HTML Fireworks dans dautres applications, prenez en compte les inconvnients suivants, conscutifs la copie de code HTML dans le Presse-papiers :

Vous ne pouvez pas enregistrer dimages dans un sous-dossier. Elles doivent se trouver dans le mme dossier que
le fichier HTML dans lequel vous collez le code HTML copi, sauf si vous copiez le code HTML dans Dreamweaver.

Les liens ou chemins utiliss dans les menus contextuels Fireworks sont mapps au disque dur, sauf si vous copiez
le code HTML dans Dreamweaver.

Si vous utilisez un diteur HTML autre que Dreamweaver ou Microsoft FrontPage, le code JavaScript associ aux
boutons, comportements et images survoles est copi mais ne fonctionne pas correctement. Si vous rencontrez ce problme, slectionnez loption Exporter le fichier HTML la place de loption Copier dans le Presse-papiers. Remarque : avant de copier le code HTML, assurez-vous que vous avez slectionn le style HTML appropri et loption Inclure les commentaires HTML dans longlet Gnral de la bote de dialogue Configuration HTML. Copie de code HTML Fireworks laide de loption Copier le code HTML 1 Choisissez Edition > Copier le code HTML.
2 Suivez les tapes proposes par lassistant. Lorsque vous y tes invit, indiquez un dossier de destination des images

exportes. Ce dossier doit tre celui dans lequel se trouve votre fichier HTML. Remarque : si vous comptez coller le code HTML dans Dreamweaver, peu importe le dossier dans lequel vous exportez les images, pourvu quelles se trouvent sur le mme site Dreamweaver que le fichier HTML dans lequel vous allez coller le code. Copie de code HTML Fireworks laide de la bote de dialogue Exporter 1 Choisissez Fichier > Exporter.
2 Dans la bote de dialogue Exporter, spcifiez un dossier de destination pour les images exportes. Ce dossier doit

tre celui dans lequel se trouve votre fichier HTML. Remarque : si vous comptez coller le code HTML dans Dreamweaver, peu importe le dossier dans lequel vous exportez les images, pourvu quelles se trouvent sur le mme site Dreamweaver que le fichier HTML dans lequel vous allez coller le code.
3 Dans le menu contextuel Exporter, slectionnez Documents HTML et Images. 4 Dans le menu contextuel HTML, slectionnez Copier dans le Presse-papiers. 5 Si votre document contient des tranches, dans le menu contextuel Tranches, cliquez sur Exporter les tranches. 6 Cliquez sur le bouton Options, slectionnez votre diteur HTML dans la bote de dialogue Configuration HTML,

puis cliquez sur OK.


7 Cliquez sur Enregistrer.

Collage de code HTML copi depuis Fireworks dans un document HTML 1 Dans votre diteur HTML, ouvrez un document HTML existant ou crez-en un nouveau. Enregistrez le document dans le mme dossier que celui des images exportes. Remarque : si vous utilisez Dreamweaver, vous ntes pas tenu denregistrer le fichier HTML dans le mme dossier que celui des images exportes. Ds lors que vous exportez des images de Fireworks vers un site Dreamweaver et enregistrez le fichier HTML dans un dossier se trouvant sur ce site, Dreamweaver rsout les chemins vers les images associes.
2 Affichez le code HTML, puis placez le point dinsertion entre les balises <BODY>.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Optimisation et exportation

260

Remarque : le code HTML copi partir de Fireworks ne contient pas les balises douverture et de fermeture <HTML> et <BODY>.
3 Collez le code HTML.

Si possible, lorsque vous effectuez une copie dans le Presse-papiers, exportez les images leur emplacement sur le site Web. Comme Fireworks utilise des adresses URL relatives aux documents, les liens URL seront rompus si le code HTML ou des images sont dplacs.

Copie de code depuis un fichier Fireworks export et collage dans un autre document HTML
1 Dans lditeur HTML, ouvrez le fichier HTML Fireworks que vous avez export. 2 Slectionnez le code souhait, puis copiez-le dans le Presse-papiers. 3 Ouvrez un document HTML existant ou crez-en un nouveau. 4 Collez le code dans le nouveau fichier HTML. Il nest pas ncessaire de copier les balises <HTML> et <BODY>, qui

doivent normalement dj figurer dans le document HTML de destination. Si vous avez activ loption Inclure les commentaires HTML dans la bote de dialogue Configuration HTML de Fireworks, suivez les instructions fournies dans les commentaires pour copier/coller le code lemplacement appropri.
5 Si votre document Fireworks contient des lments interactifs, copiez le code JavaScript.

Le code JavaScript est entour des balises <SCRIPT> et situ dans la section <HEAD> du document. Copiez et collez lintgralit de la section <SCRIPT>, sauf si le document de destination contient dj une section <SCRIPT>. Dans ce cas, il vous suffit de copier le contenu de la section <SCRIPT> dans la section <SCRIPT> existante en veillant ne pas craser les donnes de cette dernire. Vrifiez galement quaucune fonction JavaScript nest duplique dans la section <SCRIPT> une fois que vous avez copi le code.

Mise jour de code HTML export


La mise jour vous permet de modifier un document HTML Fireworks dj export, en particulier si vous souhaitez actualiser uniquement une partie dun document. Remarque : la mise jour du code HTML ne seffectue pas de la mme manire dans les documents Dreamweaver et les autres documents HTML. Pour plus dinformations, reportez-vous la section Utilisation de Dreamweaver la page 266. Lorsque vous effectuez une mise jour, vous pouvez choisir de remplacer uniquement les images modifies ou lintgralit du code et des images. Si vous choisissez de remplacer uniquement les images modifies, toutes les modifications apportes au fichier HTML en dehors de Fireworks seront conserves. Remarque : si vous souhaitez apporter dimportantes modifications la prsentation du document, effectuez-les dans Fireworks, puis rexportez le fichier HTML.
1 Slectionnez la commande Fichier > Mettre jour le code HTML. 2 Slectionnez le fichier mettre jour. 3 Cliquez sur le bouton Ouvrir. 4 Procdez de lune des manires suivantes :

Si aucun code HTML gnr par Fireworks nest trouv, cliquez sur OK pour insrer le nouveau code HTML
la fin du document.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Optimisation et exportation

261

Par contre, si un code HTML gnr par Fireworks est trouv, slectionnez lune des options suivantes, puis
cliquez sur OK :
Remplacer les images et leur code HTML Remplace le code HTML Fireworks prcdent. Mettre jour les images uniquement Ecrase uniquement les images.

5 Lorsque la bote de dialogue Slectionnez le dossier Images saffiche, slectionnez un dossier, puis cliquez

sur Ouvrir.

Exportation de calques CSS


Les calques CSS peuvent se chevaucher et tre empils les uns sur les autres. Sous Fireworks, les sorties en code HTML normal ne se chevauchent pas.
1 Choisissez Fichier > Exporter. 2 Entrez un nom de fichier, puis slectionnez un dossier de destination. 3 Dans le menu contextuel Exporter, slectionnez CSS et Images.

Pour exporter ltat actif uniquement, slectionnez Etat actif uniquement. Pour exporter la page active uniquement, slectionnez Page active uniquement. Pour choisir le dossier devant recevoir les images, slectionnez Placer les images dans des sous-dossiers.
4 Pour dfinir les proprits de la page HTML, cliquez sur Options. 5 Pour dfinir une image darrire-plan et la faire apparatre en mosaque, cliquez sur Parcourir :

Pour afficher limage une seule fois, slectionnez Pas de rptition. Pour rpter, ou mettre en mosaque, limage lhorizontale et la verticale, slectionnez Rptition. Slectionnez Rpter-x pour former une mosaque horizontale. Pour former une mosaque verticale, slectionnez Rpter-y.
6 Dans le navigateur, slectionnez un alignement de page gauche, au centre ou droite. 7 Cliquez sur le bouton OK, puis sur Enregistrer.

Exportation de code XHTML


Le langage XHTML est une combinaison du langage HTML, standard actuel pour la mise en forme et laffichage de pages Web, et du langage XML (eXtensible Markup Language). Le code XHTML garantit une compatibilit descendante, ce qui signifie quil peut tre affich dans la plupart des navigateurs Web actuels et lu par tous les priphriques affichant du contenu XML, tels que les assistants numriques personnels, les tlphones portables et autres priphriques mobiles. Fireworks peut galement importer des fichiers XHTML (voir la section Cration de fichiers PNG Fireworks partir de fichiers HTML la page 8). Pour plus dinformations sur le langage XHTML, consultez les spcifications XHTML du W3C (Web World Wide Web Consortium) sur le site www.w3.org.
1 Choisissez Fichier > Configuration HTML, slectionnez un style XHTML dans le menu contextuel Style HTML de

longlet Gnral, puis cliquez sur OK.


2 Exportez le document en utilisant lune des mthodes dexportation ou de copie de code HTML disponibles (voir

la section Exportation de code HTML la page 257). Remarque : Fireworks utilise le codage UTF-8 lorsque vous exportez un document vers XHTML.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Optimisation et exportation

262

Exportation de fichiers avec ou sans codage UTF-8


Le procd de codage de texte UTF-8 (Universal Character Set Transformation Format-8) permet aux navigateurs Web dafficher diffrents jeux de caractres nationaux (texte chinois ou anglais, par exemple) sur une mme page HTML. Le codage UTF-8 est activ par dfaut. Fireworks peut galement importer des documents utilisant le codage UTF-8 (voir la section Cration de fichiers PNG Fireworks partir de fichiers HTML la page 8). Exportation de documents sans codage UTF-8 1 Choisissez Fichier > Configuration HTML.
2 Sous longlet Propre au document, dsactivez la case Utiliser le codage UTF-8, puis cliquez sur OK. 3 Exportez le document en utilisant lune des mthodes dexportation ou de copie de document HTML disponibles.

Dfinition des options dexportation de code HTML


La bote de dialogue Configuration HTML permet de dfinir le mode dexportation du code HTML partir de Fireworks. Les modifications effectues dans longlet propre au document agissent uniquement sur le document actif. Les paramtres Gnral et Table sont des prfrences globales qui affectent tous les nouveaux documents.
1 Procdez de lune des manires suivantes :

Choisissez Fichier > Configuration HTML. Cliquez sur le bouton Options de la bote de dialogue Exporter.
2 Dans longlet Gnral, slectionnez les options souhaites.
Style HTML Slectionnez le style du code HTML export.

Le code HTML Gnrique est compatible avec tous les diteurs HTML. Cependant, si le document contient des comportements ou des contenus interactifs, slectionnez un diteur spcifique sil est rpertori dans la liste. Pour exporter un document en appliquant le standard XHTML, slectionnez le style XHTML appropri dans le menu contextuel.
Extension Dans le menu contextuel , slectionnez un nom dextension de fichier ou entrez lextension de votre

choix.
Inclure les commentaires HTML Slectionnez cette option pour inclure des commentaires sur les endroits o copier et coller dans le code HTML. Elle est recommande si le document contient des lments interactifs tels que des boutons, des comportements ou des images survoles. Nom de fichier en minuscules Slectionnez cette option pour vous assurer que les noms du fichier HTML et des

fichiers dimage associs sont composs en minuscules lors de lexportation. Remarque : cette option ne modifie pas la casse de lextension du fichier HTML, si une extension en majuscules a t choisie dans le menu contextuel Extension.
Utiliser une feuille de style CSS pour les menus contextuels Slectionnez cette option pour utiliser une feuille de

style CSS plutt que du code JavaScript pour le menu contextuel. Vous pouvez indexer les menus laide de Dreamweaver, ainsi que mettre jour les liens dans le code.
Ecrire les feuilles de style CSS dans un fichier externe Slectionnez cette option pour que le code CSS soit crit

dans un fichier .css externe export dans le mme emplacement que le fichier HTML. Le nom du fichier .css correspond au nom du fichier HTML ( lexception de lextension du fichier). Activez cette option pour exporter galement un fichier nomm mm_css_menu.js dans le mme emplacement que le fichier HTML.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Optimisation et exportation

263

Remarque : cette option est disponible uniquement si vous avez slectionn Utiliser une feuille de style CSS pour les menus contextuels.
Crateur de fichiers (Mac OS) Slectionnez une application associe dans le menu contextuel. Lorsque vous cliquez deux fois sur le fichier HTML export sur votre disque dur, il souvre automatiquement dans lapplication spcifie.

3 Sous longlet Table, slectionnez les paramtres requis pour vos tables HTML. Pour plus dinformations, reportez-

vous la section Dfinition du mode dexportation des tables HTML la page 187.
4 Sous longlet Propre au document, slectionnez lune des options suivantes :
Noms des fichiers de tranche Dans les menus contextuels correspondants, slectionnez une formule permettant de

nommer automatiquement les tranches. Vous pouvez utiliser les options par dfaut ou slectionner vos propres options. Important : si vous slectionnez Aucune pour lun des trois premiers menus, Fireworks exporte des fichiers de tranche qui scraseront mutuellement. Vous obtiendrez ainsi un seul graphique export et un tableau affichant ce graphique dans chaque cellule.
Balise ALT par dfaut Saisissez le texte qui doit apparatre la place de toutes les images pendant leur

tlchargement depuis le Web et la place de toute image ne pouvant pas tre tlcharge. Dans certains navigateurs, ce texte peut galement safficher sous forme dinfo-bulle lorsque le pointeur survole limage. Cette fonction constitue galement une aide pour les utilisateurs du Web malvoyants.
Exporter plusieurs fichiers HTML de la barre de navigation ( utiliser sans jeu dimages) Slectionnez cette option pour lexportation dune barre de navigation qui relie plusieurs pages entre elles. Fireworks exporte des pages supplmentaires pour chaque bouton de la barre de navigation. Inclure les zones sans tranches Slectionnez cette option pour inclure les parties de la zone de travail qui ne sont pas recouvertes par des tranches. Utiliser le codage UTF-8 Cette option active par dfaut vous permet dafficher des caractres provenant de

plusieurs jeux de caractres dans le document export. Pour dsactiver cette option, dcochez la case.
5 Pour enregistrer ces paramtres comme paramtres par dfaut globaux, cliquez sur Paramtres par dfaut.

Exportation de fichiers Adobe PDF


Lorsque vous voulez imprimer une cration Fireworks ou lenvoyer en rvision, exportez-la au format de fichier Adobe PDF. Les rviseurs peuvent ajouter des commentaires, rpondre dautres commentaires dans Adobe Reader ou Acrobat. Pour plus dinformations sur la mise en place dun processus de rvision au format PDF, consultez laide Acrobat. Les fichiers PDF exports conservent toutes les pages et leurs liens hypertextes. Les rviseurs peuvent donc naviguer comme ils le feraient sur le Web. Contrairement aux prototypes HTML, les documents Adobe PDF proposent cependant des paramtres de scurit pour empcher les rviseurs de modifier ou de copier vos crations.
1 Choisissez la commande Fichier > Exporter. 2 Dans le menu contextuel Exporter, choisissez Adobe PDF. 3 Choisissez les pages exporter et slectionnez Afficher le PDF aprs exportation pour ouvrir automatiquement le

PDF dans Adobe Reader ou Acrobat.


4 Pour personnaliser le document PDF, cliquez sur Options, puis dfinissez les paramtres suivants :
Compatibilit Dtermine les applications Adobe PDF pouvant ouvrir le fichier export. Compression Dtermine le type de compression des images utilis pour rduire la taille de fichier. En gnral, les

compressions de type JPEG et JPEG2000 sont prfrables pour les images telles que des photographies comportant

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Optimisation et exportation

264

des transitions progressives dune couleur lautre. La compression ZIP est idale pour les illustrations qui comprennent des portions tendues de couleurs en aplat (pleines et unies).
Qualit Pour les compressions de type JPEG et JPEG2000, propose des paramtres de qualit dimage. Si vous

slectionnez Qualit suprieure, vous obtenez un fichier volumineux dont la qualit dimage est bonne.
Convertir en niveaux de gris Convertit toutes les images en niveaux de gris tout en rduisant la taille du fichier. Activer la slection de texte Permet aux rviseurs de copier le texte partir du fichier export. Dslectionnez cette option pour rduire la taille du fichier. Valeur de fond perdu Dtermine la largeur en pixels de la bordure blanche qui dlimite limage sur chaque page.

Une valeur gale 20, par exemple, permet dentourer chaque image dune bordure de 20 pixels.
Utiliser un mot de passe pour ouvrir le document Requiert un mot de passe pour ouvrir le fichier export. Utiliser un mot de passe pour restreindre les tches Requiert un mot de passe pour effectuer les fonctions

suivantes : impression, modification, copie et insertion de commentaires.


5 Cliquez sur OK pour fermer la bote de dialogue Options. 6 Indiquez un nom de fichier et un emplacement, puis cliquez sur Enregistrer.

Remarque : si les pages de votre document Fireworks prsentent des zones de travail transparentes, les objets auxquels des transparences ont t appliques perdent ces caractristiques lorsque vous exportez le document au format PDF. Pour viter cela, dfinissez un arrire-plan non transparent pour la zone de travail avant lexportation au format PDF.

Affichage des fichiers PDF (recommand)


Lorsque vous consultez les fichiers PDF exports dans Adobe Acrobat ou Adobe Reader, appliquez les paramtres suivants :
1 Dans Adobe Acrobat ou Adobe Reader slectionnez Edition > Prfrences. 2 Slectionnez Affichage de page dans le volet gauche. 3 Dfinissez Rsolution personnalise sur 72 pixels par pouce. 4 Rglez la valeur de Zoom sur 100 %.

Exportation de fichiers FXG


Le format de fichier FXG est pris en charge par Flash Catalyst, Fireworks, Illustrator et Photoshop. Lorsque vous exportez un fichier contenant des images vectorielles et bitmap au format FXG, un dossier distinct portant le nom <nom_fichier.assets> est cr. Ce dossier contient les images bitmap associes au fichier. Limportation choue si ces fichiers associs sont supprims, en tout ou en partie, du dossier. Remarque : Les lments, filtres, modes de fusion, dgrads et masques qui ne sont pas associs une balise de mappage sont exports en tant que graphiques bitmap.
1 Slectionnez Fichier > Exporter et accdez lemplacement auquel enregistrer les fichiers. 2 Attribuez un nom au fichier FXG. 3 Dans la bote de dialogue Exporter, slectionnez FXG et images dans le menu Exporter. 4 Cliquez sur Enregistrer.

Remarque : Les objets qui s'tendent en dehors de la zone de travail de Fireworks s'affichent compltement lorsque le fichier FXG export est ouvert dans Flash Catalyst.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Optimisation et exportation

265

Envoi dun document Fireworks comme pice jointe dun message lectronique
Vous pouvez envoyer un fichier au format PNG Fireworks, JPEG compress ou autre en utilisant les paramtres doptimisation disponibles dans le panneau Optimisation.
1 Choisissez Fichier > Joindre au message lectronique. 2 Slectionnez lune des options suivantes :
PNG Fireworks Joint le document PNG actif un nouveau message lectronique. JPG compress Joint le document actif un nouveau message lectronique en lui appliquant le paramtre doptimisation JPEG Qualit suprieure. Utiliser les paramtres dexportation Joint le document actif un message lectronique en lui appliquant les

paramtres dfinis dans le panneau Optimisation. Remarque : Mozilla, Netscape 6 et Nisus Emailer ne sont pas pris en charge par le systme Macintosh.

Dernire mise jour le 12/5/2011

266

Chapitre 18 : Utilisation de Fireworks avec dautres applications


Quil sagisse de crer un contenu Web ou multimdia, Adobe Fireworks est un lment essentiel de la palette doutils du concepteur. Fireworks fonctionne parfaitement avec dautres applications et offre une multitude de fonctions dintgration qui rationalisent le processus de conception. Fireworks sintgre facilement et efficacement dautres produits Adobe comme Adobe Photoshop et Adobe GoLive. Par exemple, vous pouvez importer et exporter trs simplement des graphiques Photoshop en tant que fichiers modifiables ou crer et modifier du code HTML en utilisant Fireworks et GoLive. Pour plus dinformations, voir le didacticiel de Dan Carr, http://www.adobe.com/go/learn_fw_interactivecontent_fr dans le Centre des dveloppeurs.

Utilisation de Dreamweaver
Adobe Dreamweaver et Fireworks reconnaissent et partagent un grand nombre de modifications possibles dans un mme fichier, y compris la modification des liens, des images interactives (cartes-images) et des tranches de table. Par ailleurs, ces deux applications fonctionnent avec un flux de production rationalis pour ldition, loptimisation et linsertion de fichiers graphiques Web dans des pages HTML.

Insertion dimages Fireworks dans des fichiers Dreamweaver


Lorsque vous insrez les fichiers JPEG de Fireworks dans Dreamweaver, la qualit du fichier est calcule de faon automatique. La valeur peut tre de 79 pour certains fichiers. Remarque : avant dutiliser lune de ces procdures, assurez-vous que Dreamweaver est slectionn comme type HTML dans la bote de dialogue Configuration HTML.

Insertion dimages Fireworks dans Dreamweaver laide du panneau Fichiers


1 Exportez votre image depuis Fireworks vers le dossier du site local dfini dans Dreamweaver. 2 Ouvrez le document Dreamweaver, et assurez-vous quil est en mode Cration. 3 Faites glisser limage du panneau Fichiers vers le document Dreamweaver.

Insertion dimages Fireworks dans Dreamweaver laide du menu Insertion


1 Placez le point dinsertion lendroit o vous voulez insrer limage dans la fentre de document de Dreamweaver. 2 Procdez de lune des manires suivantes :

Choisissez Insertion > Image. Cliquez sur le bouton Images: Image dans la catgorie Commun de la barre dinsertion.
3 Accdez limage exporte depuis Fireworks, puis cliquez sur OK.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Utilisation de Fireworks avec dautres applications

267

Cration de fichiers Fireworks partir despaces rservs Dreamweaver


Les espaces rservs aux images vous permettent de tester diffrentes mises en page Web avant de crer lillustration dfinitive destine votre page. Utilisez-les pour spcifier la taille et la position des images Fireworks que vous aurez placer dans Dreamweaver. Lorsque vous crez une image Fireworks partir dun espace rserv pour limage Dreamweaver, un document Fireworks est cr avec une zone de travail ayant les dimensions de lespace rserv slectionn. Remarque : tous les comportements appliqus dans Fireworks sont conservs lors de lexportation vers Dreamweaver. De mme, la plupart des comportements Dreamweaver appliqus aux espaces rservs pour les images sont galement conservs lorsque vous les lancez et les modifiez dans Fireworks. Il existe cependant une exception : les survols spars appliqus aux espaces rservs pour les images dans Dreamweaver ne sont pas conservs lorsque vous les ouvrez et les modifiez dans Fireworks. Lorsque vous fermez la session Fireworks et revenez dans Dreamweaver, le nouveau graphique Fireworks que vous avez cr remplace lespace rserv pour limage initialement slectionn.
1 Dans Dreamweaver, enregistrez le document HTML souhait dans un emplacement du dossier de site

Dreamweaver.
2 Placez le point dinsertion lemplacement de votre choix dans le document, puis procdez de lune des manires

suivantes :

Choisissez Insertion > Objets image > Espace rserv pour limage. Cliquez sur le menu contextuel Images : Image dans la catgorie Commun de la barre Insrer, puis slectionnez
Espace rserv pour limage.
3 Entrez le nom, les dimensions, la couleur et le texte secondaire de lespace rserv pour limage.

Un espace rserv pour limage est insr dans le document Dreamweaver.

4 Procdez de lune des manires suivantes :

Slectionnez lespace rserv pour limage, puis cliquez sur Crer dans linspecteur des proprits. Tout en maintenant la touche Ctrl (Windows) ou Cmde (Mac OS) enfonce, cliquez deux fois sur lespace
rserv pour limage.

Cliquez avec le bouton droit de la souris (Windows) ou tout en maintenant la touche Ctrl enfonce (Mac OS),
puis cliquez sur Cration dimage dans Fireworks. Fireworks souvre avec un document vide exactement de la mme taille que lespace rserv pour limage. La partie suprieure de la fentre Document indique que vous modifiez une image transfre depuis Dreamweaver.
5 Crez une image dans Fireworks, puis cliquez sur Termin. 6 Spcifiez un nom et un emplacement pour le fichier PNG source.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Utilisation de Fireworks avec dautres applications

268

7 Spcifiez un nom pour les fichiers dimage exports.

Il sagit des fichiers dimage qui saffichent dans Dreamweaver.


8 Spcifiez un emplacement pour le ou les fichiers dimage exports dans le dossier de site Dreamweaver, puis cliquez

sur Enregistrer. Lorsque vous revenez dans Dreamweaver, lespace rserv pour limage initialement slectionn est remplac par la nouvelle image ou le nouveau tableau Fireworks.

Insertion de code HTML Fireworks dans Dreamweaver


Lexportation de fichiers Fireworks vers Dreamweaver seffectue en deux tapes. Dans Fireworks, exportez directement des fichiers vers un dossier de site Dreamweaver. Cette opration gnre un fichier HTML et les fichiers dimage associs dans lemplacement que vous dfinissez. Placez ensuite le code HTML dans Dreamweaver laide de la fonction Insrer du HTML Fireworks.
1 Exportez le document Fireworks HTML au format HTML. 2 Dans Dreamweaver, enregistrez votre document dans un site dfini. 3 Placez le point dinsertion dans le document, lendroit o vous voulez insrer le code HTML. 4 Procdez de lune des manires suivantes :

Choisissez Insertion > Objets image > HTML Fireworks. Cliquez sur le menu contextuel Images : Image dans la catgorie Commun de la barre Insrer, puis slectionnez
HTML Fireworks.
5 Dans la bote de dialogue qui saffiche, cliquez sur Parcourir pour slectionner le fichier HTML Fireworks souhait. 6 (Facultatif) Cliquez sur Supprimer fichier aprs insertion pour dplacer le fichier HTML vers la Corbeille

(Windows) ou le supprimer dfinitivement (Mac OS) une fois lopration termine. Cette option naffecte pas le fichier source PNG associ au fichier HTML.
7 Cliquez sur OK pour insrer le code HTML, avec les images, les tranches et le code JavaScript qui lui sont associs,

dans le document Dreamweaver.

Copie de code HTML Fireworks pour une utilisation dans Dreamweaver


Lorsque vous copiez du code HTML Fireworks dans le Presse-papiers, lensemble du code HTML et JavaScript associ au document Fireworks est copi dans le document Dreamweaver, les images sont exportes vers un emplacement spcifi, et Dreamweaver met jour le code HTML avec des liens relatifs au document vers ces images.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Utilisation de Fireworks avec dautres applications

269

Remarque : cette mthode ne fonctionne quavec Dreamweaver. Elle ne fonctionne pas avec les autres diteurs HTML.
Copiez le code HTML dans le Presse-papiers depuis Fireworks, puis collez-le directement dans un document

Dreamweaver. Vous pouvez ouvrir dans Dreamweaver un fichier HTML Fireworks export puis copier et coller les sections appropries dans un autre document Dreamweaver.

Mise jour du code HTML Fireworks export dans Dreamweaver


Roundtrip HTML prsente de nombreux avantages si vous utilisez du code HTML export dans Dreamweaver (voir la section A propos de Roundtrip HTML la page 270).
1 Modifiez le document PNG dans Fireworks. 2 Slectionnez la commande Fichier > Mettre jour le code HTML. 3 Recherchez le fichier Dreamweaver contenant le code HTML mettre jour, puis cliquez sur Ouvrir. 4 Accdez au dossier de destination des fichiers dimage mis jour, puis cliquez sur Ouvrir.

Fireworks met jour le code HTML et JavaScript dans le document Dreamweaver. Fireworks exporte galement les images mises jour associes au code HTML et les place dans le dossier de destination indiqu. Remarque : si Fireworks ne trouve pas de code HTML correspondant mettre jour, vous pouvez insrer du nouveau code HTML dans le document Dreamweaver. La section JavaScript du nouveau code est place au dbut du document, et le tableau HTML ou le lien vers limage est insr la fin.

Exportation de fichiers Fireworks vers des bibliothques Dreamweaver


Un lment de bibliothque est une portion de fichier HTML situe dans un dossier intitul Bibliothque au sein du dossier racine de votre site. Les lments de bibliothque saffichent sous forme de catgorie dans le panneau Actifs de Dreamweaver. Dans Dreamweaver, les lments de bibliothque simplifient les processus de modification et de mise jour des composants de site Web frquemment utiliss. Vous pouvez faire glisser un lment de bibliothque (fichier portant lextension .lbi) depuis le panneau Actifs vers nimporte quelle page de votre site Web. Vous ne pouvez pas modifier un lment de bibliothque directement dans le document Dreamweaver. Vous ne pouvez modifier que llment de bibliothque matre. Ensuite, vous pouvez utiliser Dreamweaver pour mettre jour toutes les copies de cet lment dans lensemble de votre site Web. Les lments de bibliothque Dreamweaver ressemblent des symboles Fireworks ; les modifications apportes au document de bibliothque matre (LBI) sont rpercutes dans toutes les instances de bibliothque de lensemble du site. Remarque : les lments de bibliothque Dreamweaver ne prennent pas en charge les menus contextuels.
1 Choisissez Fichier > Exporter. 2 Slectionnez Bibliothque Dreamweaver dans le menu contextuel Exporter.

Slectionnez ou crez un dossier intitul Bibliothque dans votre site Dreamweaver comme emplacement des fichiers. Le nom respecte la casse. Remarque : Dreamweaver ne reconnat pas le fichier export comme lment de bibliothque sil nest pas enregistr dans le dossier Library.
3 Tapez un nom de fichier. 4 (Facultatif) Lorsque votre image comporte des tranches, slectionnez les options correspondantes. 5 Slectionnez Placer les images dans des sous-dossiers pour choisir un dossier distinct pour recevoir les images

enregistrer.
6 Cliquez sur Enregistrer.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Utilisation de Fireworks avec dautres applications

270

Modification de fichiers Fireworks dans Dreamweaver


La fonction Roundtrip HTML sintgre troitement Fireworks et Dreamweaver. Elle permet deffectuer des modifications dans une application et de les conserver dans une autre.

A propos de Roundtrip HTML


Fireworks reconnat et conserve la plupart des types de modifications apportes un document dans Dreamweaver (liens modifis, cartes-images modifies, texte et code HTML modifis dans des tranches HTML et comportements partags entre Fireworks et Dreamweaver). Linspecteur des proprits de Dreamweaver permet didentifier les images, les tranches de table et les tableaux provenant de Fireworks. Fireworks prend en charge la plupart des types de modification de Dreamweaver. Cependant, les principaux changements apports la structure dun tableau dans Dreamweaver peuvent crer des diffrences inconciliables entre les deux applications. Si vous modifiez radicalement la structure dun tableau, utilisez la fonction de lancement et de modification de Dreamweaver pour modifier le tableau dans Fireworks. Remarque : en sappuyant sur la technologie Fireworks, Dreamweaver offre des fonctions ddition dimages lmentaires permettant de retoucher les images sans avoir recours une application de retouche dimages externe. Les fonctions de modification dimages de Dreamweaver sappliquent uniquement aux formats de fichier JPEG et GIF. Modification dune image Fireworks place dans Dreamweaver Remarque : avant de modifier des graphiques Fireworks dans Dreamweaver, vous devez au pralable excuter quelques tches. Pour plus dinformations, reportez-vous la section Dfinition des options de lancement et de modification la page 272.
1 Dans Dreamweaver, choisissez Fentre > Proprits pour ouvrir linspecteur des proprits. 2 Procdez de lune des manires suivantes :

Slectionnez limage souhaite. (Linspecteur des proprits identifie la slection comme tant une image
Fireworks et affiche le nom du fichier source PNG associ cette image.) Dans linspecteur des proprits, cliquez ensuite sur Modifier.

Tout en maintenant la touche Ctrl (Windows) ou Cmde (Mac OS) enfonce, cliquez deux fois sur limage
modifier.

Cliquez avec le bouton droit (Windows) ou en maintenant la touche Ctrl enfonce (Mac OS) sur limage voulue,
puis, dans le menu contextuel, cliquez sur Modifier avec Fireworks.
3 Lorsque le programme vous y invite, indiquez si vous dsirez que le fichier source Fireworks de limage place soit

ouvert.
4 Modifiez limage dans Fireworks.

Les modifications appliques sont conserves dans Dreamweaver.


5 Cliquez sur Termin pour exporter limage avec les paramtres doptimisation actuels, mettre jour le fichier GIF

ou JPEG utilis par Dreamweaver et enregistrer le fichier source PNG si un fichier source a t slectionn. Remarque : lorsque vous ouvrez une image depuis le panneau Site de Dreamweaver, lditeur par dfaut correspondant ce type dimage ouvre le fichier. Cet diteur est dfini dans les prfrences de Dreamweaver. Lorsque les images sont ouvertes depuis cet emplacement, Fireworks nouvre pas le fichier PNG dorigine. Pour utiliser les fonctions dintgration de Fireworks, ouvrez les images dans la fentre Document de Dreamweaver.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Utilisation de Fireworks avec dautres applications

271

Modification dun tableau Fireworks plac dans Dreamweaver Remarque : avant de modifier des tableaux Fireworks dans Dreamweaver, vous devez au pralable excuter quelques tches de lancement et de modification. Pour plus dinformations, reportez-vous la section Dfinition des options de lancement et de modification la page 272.
1 Dans Dreamweaver, choisissez Fentre > Proprits pour ouvrir linspecteur des proprits. 2 Procdez de lune des manires suivantes pour ouvrir le fichier PNG source dans la fentre de document :

Cliquez dans le tableau, puis sur la balise TABLE dans la barre dtat afin de slectionner lensemble du tableau.
(Linspecteur des proprits identifie la slection comme tant un tableau Fireworks et affiche le nom du fichier source PNG associ ce tableau.) Dans linspecteur des proprits, cliquez ensuite sur Modifier.

Slectionnez une image dans le tableau, puis cliquez sur Modifier dans linspecteur des proprits. Cliquez avec le bouton droit de la souris (Windows) ou tout en maintenant la touche Ctrl enfonce (Mac OS)
sur limage, puis, dans le menu contextuel, cliquez sur Modifier avec Fireworks.
3 Apportez les modifications dans Fireworks.

Dreamweaver reconnat et conserve toutes les modifications apportes au tableau dans Fireworks.
4 Une fois le tableau modifi, cliquez sur Termin dans la fentre de document.

Cette opration exporte les fichiers HTML et des tranches dimages du tableau en utilisant les paramtres doptimisation en cours, met jour le tableau plac dans Dreamweaver et enregistre le fichier source PNG. Remarque : vous pouvez obtenir un message derreur Dreamweaver si vous imbriquez un autre tableau dans le tableau original gnr par Fireworks, puis essayez de le modifier laide de Roundtrip dans Dreamweaver. Pour plus dinformations, consultez la note technique (TechNote) 19231 sur le site Web dAdobe.

A propos des comportements de Dreamweaver pris en charge et non pris en charge


Si un seul graphique Fireworks non dcoup est insr dans un document Dreamweaver et quun comportement Dreamweaver est appliqu, une tranche se trouve sur le graphique lorsquil est ouvert et modifi dans Fireworks. La tranche nest pas visible immdiatement, car les tranches sont dsactives automatiquement lorsque vous ouvrez et modifiez un graphique unique non dcoup auquel vous appliquez des comportements Dreamweaver. Pour afficher la tranche, activez sa visibilit dans le calque Web du panneau Calques. Dans Fireworks, lorsque vous affichez les proprits dune tranche laquelle est associ un comportement Dreamweaver, la zone de texte Lien de linspecteur des proprits peut afficher javascript:;. Vous pouvez supprimer ce texte sans risques. Vous pouvez lcraser pour entrer une URL si ncessaire et le comportement reste intact lorsque vous revenez dans Dreamweaver. Lorsque vous utilisez Roundtrip HTML depuis Dreamweaver, Fireworks prend en charge les formats de fichiers ct serveur, tels que CFM et PHP. Dreamweaver prend en charge tous les comportements Fireworks, y compris ceux ncessaires aux survols et aux boutons. Remarque : les lments de bibliothque Dreamweaver ne prennent pas en charge les menus contextuels. Fireworks prend en charge les comportements de Dreamweaver suivants lors dune session de lancement et de modification :

Survol simple Permutation dimages Restauration de permutation dimages

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Utilisation de Fireworks avec dautres applications

272

Dfinition du texte de la barre dtat Dfinition de limage de la barre de navigation Menu contextuel
Remarque : Fireworks ne prend pas en charge les comportements non natifs, y compris les comportements ct serveur.

Optimisation des images et animations Fireworks places dans Dreamweaver


Modification des paramtres doptimisation dune image Fireworks place dans Dreamweaver
1 Dans Dreamweaver, slectionnez limage, puis procdez de lune ou des deux manires suivantes :

Slectionnez la commande Commandes > Optimiser limage. Cliquez sur le bouton Optimiser de linspecteur des proprits. Cliquez avec le bouton droit de la souris (Windows) ou tout en maintenant la touche Ctrl enfonce (Mac OS),
puis, dans le menu contextuel, slectionnez Optimiser dans Fireworks.
2 Si un message vous y invite, indiquez si vous souhaitez ouvrir le fichier source Fireworks de limage place. 3 Apportez les modifications dans la bote de dialogue Aperu avant exportation :

Pour modifier les paramtres doptimisation, cliquez sur longlet Options. Pour modifier la taille et la zone de limage exporte, cliquez sur longlet Fichier. Si vous changez les dimensions
de limage dans Fireworks, vous devez redfinir la taille de limage dans linspecteur des proprits lorsque vous revenez dans Dreamweaver.

Pour modifier les paramtres danimation de limage, cliquez sur longlet Animation.
4 Une fois limage modifie, cliquez sur OK pour exporter limage, la mettre jour dans Dreamweaver et enregistrer

le fichier PNG. Si vous avez modifi le format de limage, le vrificateur de liens de Dreamweaver vous invite mettre jour les rfrences cette image.

Modification des paramtres danimation


Dans le cadre de louverture et de loptimisation dun fichier GIF anim, vous pouvez modifier les paramtres de lanimation. Les options danimation de la bote de dialogue Aperu avant exportation sont identiques celles du panneau Etats de Fireworks. Remarque : pour modifier des lments graphiques dans une animation Fireworks, vous devez ouvrir et modifier lanimation Fireworks.

Dfinition des options de lancement et de modification


Pour utiliser efficacement la fonction Roundtrip HTML, vous devez excuter pralablement quelques tches, notamment dfinir Fireworks comme diteur dimages principal dans Dreamweaver, spcifier les prfrences de lancement et de modification dans Fireworks et dfinir un site local dans Dreamweaver.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Utilisation de Fireworks avec dautres applications

273

Dfinition de Fireworks comme lditeur dimages externe principal pour Dreamweaver


Dans les prfrences de Dreamweaver, il est possible dindiquer les applications spcifiques qui doivent tre automatiquement dmarres pour modifier des types de fichiers spcifiques. Pour utiliser les fonctions de lancement et de modification de Fireworks, vrifiez que Fireworks est bien dsign dans Dreamweaver comme diteur principal pour les fichiers GIF, JPEG et PNG. Remarque : vous navez besoin de dfinir cette prfrence que sil vous est difficile de dmarrer Fireworks partir de Dreamweaver.
1 Dans Dreamweaver, choisissez Edition > Prfrences, puis slectionnez Types de fichiers/Editeurs. 2 Dans la liste Extensions, slectionnez une extension (.gif, .jpg ou .png) pour le nom du fichier dimage Web. 3 Dans la liste Editeurs, choisissez loption Fireworks. Si Fireworks ne se trouve pas dans la liste, cliquez sur le bouton

Plus (+), recherchez lapplication Fireworks sur votre disque dur, puis cliquez sur Ouvrir.

4 Cliquez sur Rendre Principal. 5 Rptez les tapes 2 4 pour dfinir Fireworks comme diteur principal pour les autres types de fichiers

dimage Web.

Dfinition des prfrences de lancement et de modification pour les fichiers sources Fireworks
Les prfrences de lancement et de modification Fireworks permettent de dfinir la manire dont les fichiers sources PNG sont traits lorsque vous ouvrez des fichiers Fireworks depuis une autre application.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Utilisation de Fireworks avec dautres applications

274

Dreamweaver reconnat les prfrences de lancement et de modification Fireworks uniquement lorsque vous ouvrez et optimisez une image qui ne fait pas partie dun tableau Fireworks et qui ne contient pas de chemin de Design Note correct vers un fichier PNG source. Dans tous les autres cas, y compris dans les cas de lancement et de modification dimages Fireworks, Dreamweaver ouvre automatiquement le fichier source PNG ; si Dreamweaver ne trouve pas lemplacement de ce fichier, un message vous invite le spcifier.
1 Dans Fireworks, choisissez Edition > Prfrences (Windows) ou Fireworks > Prfrences (Mac OS). 2 Cliquez sur la catgorie Lancer et modifier, puis dfinissez les options comme vous le souhaitez.

Pour plus dinformations, reportez-vous la section Prfrences de lancement et de modification la page 314.

A propos des Design Notes et des fichiers sources


Lorsque vous exportez vers un site Dreamweaver un fichier Fireworks partir dun fichier source PNG enregistr, Fireworks cre une Design Note (note de conception) contenant des informations sur le fichier PNG. Lorsque vous ouvrez et modifiez une image Fireworks depuis Dreamweaver, ce dernier utilise la Design Note correspondante pour localiser le fichier source PNG pour cette image. Pour obtenir de meilleurs rsultats, enregistrez toujours votre fichier source PNG Fireworks ainsi que les fichiers exports dans un site Dreamweaver. Tout autre dveloppeur du site est ainsi en mesure de trouver le fichier source PNG lorsquil lance Fireworks partir de Dreamweaver.

Transfert de fichiers de site laide du bouton Gestion des fichiers


Le bouton Gestion des fichiers , situ dans la partie suprieure de la fentre de document, permet daccder facilement aux commandes de transfert de fichier. Utilisez ce bouton si votre document rside dans un dossier de site Dreamweaver et si le site a accs un serveur distant. Pour permettre Fireworks de reconnatre le dossier comme un site, utilisez la bote de dialogue Grer les sites de Dreamweaver pour dfinir le dossier cible (ou un dossier conteneur) comme dossier racine local du site. Remarque : pour utiliser les options darchivage et dextraction de fichier de Fireworks, activez-les pour le site Dreamweaver contenant le document.
Acqurir Copie la version distante du fichier sur le site local en remplaant le fichier local par la copie distante. Extraire Extrait le fichier en remplaant le fichier local par la copie distante. Placer Copie la version locale du fichier sur le site distant en remplaant le fichier distant par la copie locale. Archiver Archive le fichier local en remplaant le fichier distant par la copie locale. Annuler lextraction Annule lextraction du fichier local et larchive en remplaant le fichier local par la copie distante.

Remarque : les commandes Gestion de fichiers sont actives dans Fireworks uniquement si votre document rside dans un dossier de site Dreamweaver pour lequel un serveur distant est dfini. Vous pouvez les utiliser uniquement pour des fichiers rsidant sur des sites qui utilisent les mthodes de transport Local/Rseau et FTP. Vous ne pouvez pas transfrer les fichiers des sites utilisant des mthodes de transport SFTP ou tierces comme SourceSafe, WebDAV et RDS du site distant vers Fireworks et inversement.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Utilisation de Fireworks avec dautres applications

275

Utilisation de HomeSite, GoLive et dautres diteurs HTML


Fireworks et Adobe HomeSite ont en commun une intgration puissante qui vous permet de lancer Fireworks depuis HomeSite pour modifier des graphiques Web. Lorsque vous quittez Fireworks, les mises jour que vous avez apportes sont automatiquement appliques limage place dans HomeSite. Ensemble, les deux applications fournissent un processus rationnel de modification de graphiques Web dans les pages HTML.

Insertion dimages Fireworks dans HomeSite


Une fois les images GIF ou JPEG exportes depuis Fireworks, vous pouvez les insrer dans un document HomeSite.
1 Dans HomeSite, enregistrez votre document (cette tape est ncessaire pour crer les chemins relatifs vers les

images).
2 Dans la fentre Resources (Ressources), slectionnez limage Fireworks que vous avez exporte. 3 Pour insrer limage Fireworks dans votre document HomeSite, procdez de lune des manires suivantes :

Faites glisser le fichier de la fentre Resources (Ressources) vers lemplacement slectionn dans le code HTML,
sous longlet Edit (Modifier) de la fentre de document.

Dans longlet Edit (Modifier) de la fentre de document, placez le point dinsertion lendroit o insrer limage
Fireworks, cliquez ensuite avec le bouton droit de la souris sur le fichier dans la fentre Resources (Ressources), puis slectionnez loption Insert as Link (Insrer comme lien). Un lien vers limage Fireworks est cr dans le code HTML. Cliquez sur longlet Parcourir pour afficher laperu de limage dans le document HomeSite.

Insertion de code HTML Fireworks dans HomeSite


Remarque : avant dexporter, de copier ou de mettre jour le code HTML Fireworks pour lutiliser dans HomeSite, slectionnez le type de code HTML Gnrique dans la bote de dialogue Configuration HTML. Pour plus dinformations, consultez lAide de Fireworks.

Exportation de code HTML Fireworks vers HomeSite


Lexportation du code HTML Fireworks gnre un fichier HTML et les fichiers dimage associs dans lemplacement que vous dfinissez. Vous pouvez ensuite ouvrir le fichier HTML dans HomeSite pour le modifier.
Exportez votre document au format HTML depuis Fireworks, puis ouvrez le fichier export dans HomeSite en

slectionnant Fichier > Ouvrir.

Copie de code HTML Fireworks dans le Presse-papiers pour lutiliser dans HomeSite
Copiez le code HTML gnr par Fireworks dans le Presse-papiers depuis Fireworks, puis collez ce code dans un document HomeSite. Toutes les images requises sont exportes lemplacement que vous spcifiez.
Copiez le code HTML dans le Presse-papiers depuis Fireworks, puis collez directement ce code dans un nouveau

document HomeSite.

Copie du code dun fichier Fireworks export et collage du code dans HomeSite
Exportez un fichier HTML Fireworks, puis copiez et collez le code souhait dans un document HomeSite existant.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Utilisation de Fireworks avec dautres applications

276

Mise jour du code HTML Fireworks export vers HomeSite


Utilisez la commande Mettre jour le code HTML dans Fireworks.

Modification dimages Fireworks dans HomeSite


1 Enregistrez votre document dans HomeSite. 2 Procdez de lune des manires suivantes :

Cliquez avec le bouton droit de la souris sur le fichier dimage dans lun des onglets Fichiers de la fentre des
ressources.

Cliquez avec le bouton droit de la souris sur longlet Vignettes de la fentre Rsultat. Cliquez avec le bouton droit de la souris sur la balise img associe dans le code HTML affich dans longlet Edit
(Modifier) de la fentre de document.
3 Dans le menu contextuel, cliquez sur Edit In Fireworks (Modifier dans Fireworks).

HomeSite lance Fireworks, sil nest pas dj ouvert.


4 Si un message vous y invite, indiquez si vous dsirez rechercher le fichier source Fireworks de limage place. Pour

plus dinformations sur les fichiers source PNG dans Fireworks, consultez lAide de Fireworks.
5 Modifiez limage dans Fireworks.

La fentre de document indique que vous modifiez une image Fireworks depuis une autre application.
6 Une fois les modifications termines, cliquez sur Termin dans la fentre Document.

Limage mise jour est rexporte vers HomeSite, et le fichier source PNG est enregistr si un fichier source a t slectionn.

Utilisation de HomeSite, GoLive et dautres diteurs HTML


Fireworks gnre un vritable fichier HTML lisible par tous les diteurs HTML et pouvant recevoir un contenu HTML import. Cette fonction vous permet douvrir et de modifier presque tous les documents HTML dans Fireworks. Vous pouvez exporter et copier du code HTML Fireworks dans GoLive, comme vous le faites avec la plupart des diteurs HTML. La seule exception rside dans le fait que vous devez slectionner HTML GoLive comme style HTML avant dexporter ou de copier le code HTML depuis Fireworks. Remarque : le style HTML GoLive ne prend pas en charge le code de menus contextuels. Si votre document Fireworks contient des menus contextuels, slectionnez le style HTML Gnrique avant lexportation.

Utilisation de Flash
Vous pouvez facilement importer, copier et coller ou exporter des objets vectoriels, des objets bitmap, des
animations et des graphiques de boutons multi-tats Fireworks pour les utiliser dans Adobe Flash.

Le texte TLF de Flash est copi en tant qu'image bitmap vide dans Fireworks sous Windows. Conversion du texte
TLF en texte ASCII et importation de ce dernier dans Fireworks.

La fonction de lancement et de modification permet de modifier aisment des graphiques Fireworks dans Flash.
Lorsque vous utilisez Flash, les prfrences de lancement et de modification dfinies dans Fireworks sont toujours appliques.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Utilisation de Fireworks avec dautres applications

277

Le style HTML Flash ne prend pas en charge le code de menus contextuels. Les comportements de boutons
Fireworks et dautres lments dinteractivit ne sont pas imports dans Flash.

Insertion de graphiques Fireworks dans Flash


Les procdures dimportation ou de copie de fichiers PNG Fireworks vous permettent de contrler trs prcisment la manire dont les graphiques et les animations sont ajoutes dans Flash. Vous pouvez galement importer des fichiers JPEG, GIF, PNG et SWF exports depuis Fireworks. Remarque : lorsque vous importez ou copiez et collez des graphiques Fireworks dans Flash, certains attributs sont perdus, notamment les filtres dynamiques et les textures. Vous ne pouvez pas importer ni copier et coller un effet de dgrad de contour de Fireworks dans un document Flash. En outre, Flash prend en charge uniquement les fonds unis, les fonds en dgrad et les contours lmentaires.

Importation de fichiers PNG Fireworks dans Flash


Vous pouvez importer des fichiers sources PNG Fireworks directement dans Flash sans avoir exporter dans un autre format graphique. Tous les objets vectoriels, objets bitmap, animations et boutons multi-tats Fireworks peuvent tre imports dans Flash. Remarque : les comportements de bouton Fireworks et autres types dinteractions ne sont pas imports dans Flash car les comportements Fireworks sont activs par du code JavaScript, externe au format de fichier. Flash utilise un code interne, ActionScript.
1 Enregistrez le document dans Fireworks. 2 Accdez un document ouvert dans Flash. 3 (Facultatif) Cliquez sur ltat cl et le calque vers lequel vous voulez importer le contenu Fireworks. 4 Choisissez Fichier > Importer. 5 Recherchez le fichier PNG, puis slectionnez-le. 6 Dans la bote de dialogue Importer un document Fireworks, procdez de lune des manires suivantes :

Slectionnez loption Importer sous la forme dune image bitmap aplatie. Dans les deux menus contextuels, slectionnez une option dimportation.
7 Slectionnez le mode dimportation du texte. 8 Cliquez sur OK.

Remarque : les options slectionnes dans la bote de dialogue Importer un document Fireworks sont enregistres et utilises comme paramtres par dfaut.

Options dimportation de graphiques, dobjets vectoriels et de texte Fireworks


Options dimportation de graphiques
Importer sous la forme dune image bitmap aplatie Importe une image non modifiable. Importer toutes les pages dans de nouveaux tats sous forme de clips Importe toutes les pages du fichier PNG dans

un nouveau calque Flash qui prend le nom du fichier PNG. Un tat cl est cr dans le nouveau calque lemplacement de ltat actif, la premire page du fichier PNG tant place dans cet tat sous forme de clip, et toutes les autres pages places dans les tats suivants sous forme de clips (squences). La hirarchie des calques et des tats au sein du fichier PNG est prserve.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Utilisation de Fireworks avec dautres applications

278

Importer la page 1 dans ltat actif sous forme de clip Le contenu de la page slectionne est import sous forme de

clip plac dans ltat et le calque actifs du fichier Flash. La hirarchie des calques et des tats au sein du fichier PNG est prserve.
Importer toutes les pages dans de nouvelles squences sous forme de clips Importe toutes les pages du fichier PNG et

mappe chacune delles dans une nouvelle squence sous forme de clip. Les calques et les tats au sein des pages sont prservs. Si des squences existent dj dans le fichier Flash, la procdure dimportation ajoute les nouvelles squences la suite des squences existantes.
Importer la page 1 dans un nouveau calque La page slectionne est importe sous forme de nouveau calque. Les tats sont imports dans le scnario en tant qutats distincts.

Options dimportation dobjets vectoriels


Importer au format bitmap pour prserver lapparence Permet de conserver le caractre modifiable des objets

vectoriels, sauf sils contiennent des fonds, des contours ou des effets non pris en charge par Flash. Pour conserver laspect de tels objets, Flash les convertit en images bitmap non modifiables.
Importer sous forme de tracs modifiables Permet de conserver le caractre modifiable de tous les objets vectoriels. Si

les objets contiennent des fonds, des contours ou des effets que Flash ne prend pas en charge, les proprits peuvent se prsenter diffremment aprs importation. Options dimportation de texte
Importer au format bitmap pour prserver lapparence Permet de conserver le caractre modifiable du texte, sauf sil

contient des fonds, des contours ou des effets non pris en charge par Flash. Pour conserver laspect du texte, Flash les convertit en image bitmap non modifiable. Remarque : Le texte TLF de Flash est copi en tant qu'image bitmap vierge dans Fireworks.
Rendre tout le texte modifiable Permet de conserver le caractre modifiable de lensemble du texte. Si les objets texte

contiennent des fonds, des contours ou des effets que Flash ne prend pas en charge, les objets peuvent se prsenter diffremment aprs importation.

Copie ou glissement de graphiques Fireworks dans Flash


Pour copier des graphiques dans des versions de Flash antrieures Flash 8, choisissez Edition > Copier les contours du trac. Remarque : il peut tre ncessaire de cliquer sur Modification > Dissocier pour dissocier les objets afin de les modifier comme objets vectoriels individuels dans Flash.
1 Dans Fireworks, slectionnez les objets copier. 2 Dans le menu contextuel de Flash, cliquez sur Edition > Copier et choisissez Copier. 3 Dans Flash, crez un document puis choisissez Edition > Coller, ou faites glisser le fichier directement de Fireworks

dans Flash.
4 Dans la fentre Importer un document Fireworks, slectionnez une option Dans :
Etats actifs sous forme de clip Le contenu coll est import sous forme de clip, celui-ci tant plac dans ltat et le

calque actifs du fichier Flash. La hirarchie des calques et des tats au sein du fichier PNG est prserve.
Nouveau calque Le contenu coll est import sous forme de nouveau calque. Les tats sont imports dans le

scnario en tant qutats distincts.


5 Slectionnez le mode dimportation des objets vectoriels. 6 Slectionnez le mode dimportation du texte.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Utilisation de Fireworks avec dautres applications

279

7 Cliquez sur OK.

Remarque : les options slectionnes dans la bote de dialogue Importer un document Fireworks sont enregistres et utilises comme paramtres par dfaut.

A propos de la structure de la bibliothque Flash


Les objets Fireworks sont imports dans un dossier dobjets Fireworks dans la bibliothque Flash. La structure de ce dossier se prsente comme suit : Dossier du fichier 1 // Nomm en fonction du nom du fichier Fireworks

Dossier de la page 1 // Nomm en fonction du nom de la page (sil y en a plusieurs)


Page 1 // Nomme en fonction du nom de la page Dossier de ltat 1 // Nomm en fonction du nom de ltat (sil y en a plusieurs) Etat 1 // Nomm en fonction du nom de ltat Symbole 1 de ltat 1 // Nomm en fonction du nom du symbole Symbole 2 de ltat 1 ... Dossier des calques partags // Calques partags entre les tats de la page 1 Dossier de calque partag // Nomm en fonction du calque partag Symbole du calque partag

Dossier de la page 2
Page 2 Symbole 1 de la page 2 (pour une page ne contenant aucun tat) ...

Dossier de gabarit
Gabarit Symbole 1 du gabarit ... Dossier des calques partags // Calques partags entre les pages Dossier de calque partag // Nomm en fonction du calque partag Symbole du calque partag

A propos de limportation de symboles Fireworks dans Flash


Lorsque vous importez des symboles Fireworks dans Flash, vous devez tenir compte des points suivants :

Si un symbole utilise une mise lchelle en 9 tranches, les quatre repres de dcoupe sont imports et conservs
dans Flash. La mise lchelle en 9 tranches nest toutefois pas prserve pour les animations. Les symboles imports sont enregistrs en tant que symboles dans la bibliothque Flash.

Les modifications logicielles appliques aux symboles enrichis sont perdues. La copie matresse (originale) du
symbole est importe.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Utilisation de Fireworks avec dautres applications

280

Les symboles graphiques enrichis sont stocks sous la forme dun fichier PNG et dun fichier JSF. Seul le fichier
PNG est import. Si le symbole est compos de plusieurs tracs, ceux-ci sont combins en un seul symbole.

Pour bnficier pleinement de la fonctionnalit complte du symbole enrichi dans Flash, vous devez le remplacer
par la version Flash du symbole.

A propos de la prservation de la visibilit et du verrouillage


Les objets et les calques masqus dans le fichier PNG sont imports et restent masqus dans Flash. En revanche, les parties invisibles dun symbole graphique enrichi ne sont pas importes (tat Au-dessus ou Enfonc dun bouton, par exemple). Si un calque est verrouill ou masqu, tous les objets et sous-calques qui le composent hritent de cette caractristique et la conservent lors de leur importation dans Flash. Cependant, si vous importez une seule page dans un nouveau calque dans Flash, un calque est cr pour la page entire, et tous les objets sont affichs. Dans ce cas, les attributs de visibilit et de verrouillage ne sont pas conservs.

Effets de calques Photoshop pris en charge


Effet dynamique Photoshop - Ombre porte Leffet est mapp comme suit :

taille est mapp sur flouX, flouY distance est mapp sur distance couleur est mapp sur couleur angle est mapp sur 180 - (angle deffet Photoshop)
Effet dynamique Photoshop - Ombre interne Leffet est mapp comme suit :

taille est mapp sur flouX, flouY distance est mapp sur distance couleur est mapp sur couleur angle est mapp sur 180 - (angle deffet Photoshop)
Effet dynamique Photoshop - Lueur externe Leffet est mapp comme suit :

opacit est mapp sur intensit couleur est mapp sur couleur taille est mapp sur flouX, flouY
Effet dynamique Photoshop - Lueur interne Leffet est mapp comme suit :

opacit est mapp sur intensit couleur est mapp sur couleur taille est mapp sur flouX, flouY Les objets comportant des effets de calque Photoshop autres que ceux indiqus ci-dessus sont pixelliss.

Exportation de graphiques Fireworks dans dautres formats utiliser dans Flash


Vous pouvez exporter des graphiques Fireworks sous forme de fichiers JPEG, GIF, PNG et Adobe Illustrator 8 (AI), puis les importer dans Flash.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Utilisation de Fireworks avec dautres applications

281

Bien que PNG soit le format de fichier natif de Fireworks, les fichiers graphiques PNG exports depuis Fireworks sont diffrents des fichiers sources PNG que vous enregistrez dans Fireworks. Comme les fichiers GIF ou JPEG, les fichiers PNG exports contiennent uniquement des donnes dimages, sans informations complmentaires relatives aux tranches, calques, lments dinteractivit, filtres dynamiques ou autres contenus modifiables. Exportation de graphiques et danimations Fireworks sous forme de fichiers SWF Les graphiques et les animations Fireworks peuvent tre exports sous forme de fichiers SWF Flash. Pour conserver les paramtres dpaisseur et de couleur du contour, slectionnez Conserver lapparence dans la bote de dialogue Options dexportation Flash SWF. Les lments de mise en forme suivants sont perdus lors de lexportation au format SWF : mode de fusion, calques, masques (appliqus avant exportation), tranches, cartes-images, comportements, motifs et dgrads de contour.
1 Choisissez Fichier > Enregistrer sous. 2 Entrez un nom de fichier, puis choisissez un dossier de destination. 3 Slectionnez Adobe Flash SWF pour le format. 4 Cliquez sur le bouton Options, puis slectionnez une option Objets :
Conserver les tracs Permet de conserver le caractre modifiable des tracs. Les effets et la mise en forme sont

perdus.
Conserver laspect Permet de convertir les objets vectoriels en objets bitmap et de conserver laspect des contours

et des fonds appliqus. Le caractre modifiable est perdu.


5 Slectionnez une option Texte :
Conserver le caractre modifiable Permet de continuer modifier le texte. Les effets et la mise en forme sont

perdus.
Convertir en tracs Permet de convertir le texte en tracs tout en conservant le crnage ou lespacement personnalis dans Fireworks. Le caractre modifiable du texte est perdu.

6 Dfinissez la qualit des images JPEG avec le curseur contextuel Qualit JPEG. 7 Slectionnez les tats exporter et leur cadence en secondes. 8 Cliquez sur OK, puis sur Enregistrer dans la bote de dialogue Exporter.

Exportation de fichiers PNG 8 bits avec transparence Pour exporter les fichiers PNG 32 bits avec transparence, importez simplement les fichiers sources PNG Fireworks dans Flash. Pour exporter les fichiers PNG 8 bits avec transparence, procdez comme suit :
1 Dans Fireworks, choisissez Fentre > Optimisation pour ouvrir le panneau Optimisation. 2 Slectionnez le format de fichier dexportation PNG 8 et loption Transparence alpha dans le menu contextuel

Transparence.
3 Choisissez Fichier > Exporter. 4 Slectionnez Images uniquement dans le menu contextuel Type. 5 Donnez un nom au fichier, et enregistrez-le.

Importation dans Flash de graphiques et danimations Fireworks exports 1 Crez un document dans Flash. Remarque : si vous importez un graphique Fireworks dans un fichier Flash existant, crez un nouveau calque dans Flash.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Utilisation de Fireworks avec dautres applications

282

2 Choisissez Fichier > Importer, puis recherchez le graphique ou lanimation. 3 Cliquez sur Ouvrir pour importer le fichier.

Utilisation de Fireworks pour modifier des graphiques dans Flash


Grce lintgration de la fonction de lancement et de modification, vous pouvez utiliser Fireworks pour modifier un graphique que vous avez prcdemment import dans Flash, mme si le graphique na pas t export depuis Fireworks. Remarque : les fichiers PNG natifs Fireworks imports dans Flash constituent une exception, moins que vous les ayez imports sous forme dune image bitmap aplatie. Si le graphique a t export depuis Fireworks et que vous avez enregistr le fichier PNG dorigine, vous pouvez modifier le fichier PNG dans Fireworks depuis Flash. Lorsque vous revenez dans Flash, le fichier PNG et le graphique dans Flash sont mis jour.
1 Dans Flash, cliquez avec le bouton droit de la souris (Windows) ou tout en maintenant la touche Ctrl enfonce

(Mac OS) sur le fichier graphique dans le panneau Bibliothque de documents.


2 Dans le menu contextuel, cliquez sur Modifier avec Fireworks.

Remarque : si cette commande ne saffiche pas dans le menu contextuel, slectionnez Modifier avec et recherchez lapplication Fireworks.
3 Cliquez sur Oui dans la zone Recherche de la source pour rechercher le fichier PNG dorigine du graphique

Fireworks, puis cliquez sur Ouvrir.


4 Modifiez limage, puis cliquez sur Termin.

Fireworks exporte un nouveau fichier graphique dans Flash et enregistre le fichier PNG dorigine.

Voir aussi
Prfrences de lancement et de modification la page 314

Utilisation dIllustrator
Le partage de graphiques vectoriels entre Fireworks et Adobe Illustrator est un jeu denfants. Laspect des objets peut varier dune application lautre, car Fireworks ne partage pas entirement les mmes fonctions avec toutes les applications vectorielles.

Utilisation dIllustrator
Fireworks assure une prise en charge de limportation de fichiers natifs Illustrator (AI) CS2 et versions ultrieures, et propose des options permettant de conserver de nombreux aspects des fichiers imports, notamment les calques et les motifs. Les images lies, en revanche, ne sont pas importes. Vous pouvez importer des images Illustrator dans Fireworks afin de les modifier et de les optimiser pour le Web. Vous pouvez galement exporter des fichiers Illustrator depuis Fireworks. Les fonctions suivantes sont prserves lors de limportation de fichiers Illustrator :
Points de Bzier Le nombre et la position des points de Bzier seront prservs.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Utilisation de Fireworks avec dautres applications

283

Couleurs Les couleurs sont prserves autant que possible lors de limportation de contenu AI dans Fireworks.

Fireworks prend uniquement en charge le schma RVB. Les autres schmas sont automatiquement convertis en RVB 8 bits avant dtre imports dans Fireworks.
Attributs de texte : Copiez du texte dIllustrator vers Fireworks en toute transparence sans en modifier laspect.

Lorsque vous importez du texte, Illustrator prserve les lments suivants :

Police Corps Couleur Gras Italique Alignement (A gauche, A droite, Au centre, Justifier) Orientation (Horizontale, De gauche droite verticalement, De droite gauche verticalement) Interlettrage Position des caractres (Normal, Exposant, Indice) Crnage automatique Paires de crnage
Pour importer rapidement un texte spcifique dans un fichier Illustrator, copiez-le directement dans Fireworks. Le texte copi conserve tous ses attributs textuels.
Fonds en dgrad Les dgrads sont imports sous forme de dgrads Fireworks natifs. Tous les points de la rampe

du dgrad sont prservs. Les valeurs dopacit associes aux remplissages de dgrad sont galement prserves limportation.
Images Les fichiers AI Illustrator peuvent contenir des fichiers imports aux formats suivants : PDF, BMP, EPS, GIF,

JPEG, JPEG2000, PICT, PCX, PCD, PSD, PXR, PNG, TGA et TIFF. Les images incorpores sont importes dans Fireworks en tant quimages pixellises. Fireworks ne peut cependant pas ouvrir les fichiers AI Illustrator contenant des images lies, telles quEPS et AI.
Masques dcrtage Fireworks prend en charge limportation des masques dcrtage contenant des tracs et des

tracs composs, un niveau de base.


Contours avec fond Les contours avec fond sont imports en un seul objet de dessin. Fonds unis Les fonds unis sont imports en un seul objet de dessin. Tracs transparents Les tracs transparents sont imports en un seul objet de dessin. Groupes Le groupe est prserv, et les objets associs individuels saffichent en tant quobjets de dessin. Graphes Les graphes sont imports sous forme de groupes et perdent leur caractre modifiable. Primitives Les primitives Illustrator sont en fait des tracs ; elles ne sont donc pas importes en tant que primitives

Fireworks.
Motifs Les motifs sont imports en tant que mosaque individuelle. Cette mosaque est importe en tant que motif natif dans Fireworks ; ce motif est ensuite affect lobjet de dessin. Contours Les contours sont imports sous forme de groupes multiples (un groupe par trac ferm). Symboles Les symboles sont imports sous forme dobjets de groupe normaux.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Utilisation de Fireworks avec dautres applications

284

Transparence Fireworks importe lopacit de lobjet correctement, prservant ainsi les paramtres de transparence de

lobjet selon les valeurs dorigine dfinies par Illustrator.


Sous-calques Fireworks importe tous les sous-calques en tant que sous-calques Fireworks natifs.

Importation de fichiers Illustrator contenant plusieurs plans de travail


Pour ouvrir un fichier Illustrator contenant plusieurs plans de travail, procdez de lune des manires suivantes :
Importation du fichier Illustrator dans Fireworks Utilisez loption Fichier > Importer pour importer des fichiers

Adobe Illustrator contenant plusieurs plans de travail si vous souhaitez importez ceux-ci individuellement. Lorsque vous importez un fichier Adobe Illustrator contenant plusieurs plans de travail, le menu Page de la bote de dialogue Options de fichier vectoriel est activ. Slectionnez le plan de travail importer dans le menu Page. Chaque plan de travail dIllustrator est mapp une page dans Fireworks. Les plans de travail 1, 2, 3 du fichier Adobe Illustrator, par exemple, saffichent sous la forme 1, 2, 3 dans le menu Page.
Ouverture du fichier Illustrator dans Fireworks Pour ouvrir tous les plans de travail dun fichier Illustrator, slectionnez Fichier > Ouvrir et ouvrez le fichier concern. Tous les plans de travail tant imports sous forme de pages distinctes, les options Conversion de fichiers de la bote de dialogue Options de fichier vectoriel sont dsactives.

Remarque : Les options de conversion de fichiers sont dsactives lorsque vous importez des fichiers Illustrator crs dans les version antrieures CS3 ou contenant un seul plan de travail.

Utilisation de Photoshop
Fireworks importe les fichiers Photoshop (PSD) natifs en conservant la plupart de leurs fonctions propres ce format. Vous pouvez galement exporter les graphiques Fireworks vers Photoshop pour les retoucher avec prcision.

Insertion dimages Photoshop dans Fireworks


Pour placer des images Photoshop dans Fireworks, utilisez les commandes Fichier > Importer et Fichier > Ouvrir ou faites glisser les fichiers sur la zone de travail. La commande Importer permet daccder aux options spcifiques du calque darrire-plan et des dossiers de calque. La commande Ouvrir et la mthode dinsertion par glisser-dposer permettent, quant elles, daccder aux options des repres et des tats.

Voir aussi
Prfrences dimportation et douverture de fichiers Photoshop la page 313

Fonctions Photoshop converties et non prises en charge dans Fireworks


Lorsque vous ouvrez ou importez un fichier Photoshop, Fireworks convertit ltat au format PNG en respectant les prfrences dimportation que vous avez spcifies (Voir Prfrences dimportation et douverture de fichiers Photoshop la page 313.)

Les masques de calques individuels sont convertis en masques dobjets dans Fireworks. Les masques de groupe ne
sont pas pris en charge.

Les masques dcrtage sont convertis en masques dobjet, mais leur apparence est quelque peu modifie. Si vous
souhaitez privilgier laspect par rapport au caractre modifiable des objets, slectionnez la prfrence Masques dcrtage.

Les modes de fusion des calques sont convertis en modes de fusion pour les objets Fireworks, si une correspondance
peut tre tablie.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Utilisation de Fireworks avec dautres applications

285

Les effets de calque sont conservs par dfaut. Si vous prfrez convertir ces effets en filtres dynamiques
correspondants, slectionnez la prfrence Effets de calque. Toutefois, laspect des effets et filtres similaires peut lgrement varier.

La premire couche alpha de la palette Couches est convertie en zones transparentes dans limage Fireworks.
Fireworks ne prend pas en charge les autres couches alpha de Photoshop.

Tous les modes et profondeurs de couleur Photoshop sont convertis au format RVB 8 bits.

Dplacement, ouverture ou importation dimages Photoshop dans Fireworks


Chaque image que vous dplacez, ouvrez ou importez devient un nouvel objet bitmap. Remarque : sous Windows, les noms des fichiers doivent inclure une extension PSD de faon tre identifis correctement par Fireworks.
1 Procdez de lune des manires suivantes :

Faites glisser une image ou un fichier Photoshop dans un document Fireworks ouvert. Choisissez Fichier > Ouvrir ou Fichier > Importer, puis slectionnez un fichier Photoshop (PSD).
2 Cliquez sur le bouton Ouvrir. 3 Dans la bote de dialogue qui saffiche, dfinissez les options dimage, puis cliquez sur OK. 4 Si vous utilisez la commande Fichier > Importer, un curseur en forme de L invers apparat. Dans la zone de travail,

cliquez lendroit o vous voulez placer le coin suprieur gauche de limage.

Voir aussi
Prfrences dimportation et douverture de fichiers Photoshop la page 313

Options dimportation de fichiers Photoshop


Lorsque vous importez ou ouvrez un fichier Photoshop dans Fireworks, une bote de dialogue vous permet de choisir le mode dimportation de limage. Les options que vous choisissez dterminent laspect et le caractre modifiable des fichiers imports.
1 Spcifiez les dimensions de limage en pixels ou en pourcentage, et indiquez une rsolution en pixels. Pour

conserver le rapport largeur/hauteur actuel, slectionnez Conserver les proportions.


2 Si le fichier Photoshop contient des compositions de calques, spcifiez la version de limage importer. Slectionnez

loption Afficher laperu pour afficher un aperu de la composition slectionne. La zone de texte Commentaires affiche les commentaires provenant du fichier Photoshop.
3 Dans le menu contextuel du bas, choisissez le type douverture de limage Photoshop dans Fireworks :
Conserver le caractre modifiable du calque plutt que lapparence Prserve la structure de calques et le caractre

modifiable du texte autant que possible, sans nuire laspect de limage. Si le fichier inclut des fonctions non prises en charge par Fireworks, ce logiciel prserve laspect du document en fusionnant et en pixellisant les calques. Voici quelques exemples :

Les calques CMJN, les calques de rglage et les calques utilisant une option de masquage sont fusionns avec les
calques sous-jacents.

Les calques utilisant des effets de calques non pris en charge peuvent tre fusionns, selon le mode de fusion du
calque et la prsence de pixels transparents.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Utilisation de Fireworks avec dautres applications

286

Conserver lapparence du calque Photoshop Aplatit tous les objets de chaque calque Photoshop et convertit

chacun deux en objet bitmap. Vous naurez plus la possibilit de modifier les calques Photoshop dans Fireworks. Les groupes de calques sont cependant conservs.
Utiliser les prfrences personnalises Importe le fichier en utilisant les paramtres de conversion de fichier personnaliss indiqus dans la bote de dialogue Prfrences (Voir Prfrences dimportation et douverture de fichiers Photoshop la page 313.) Aplatir les calques Photoshop en une seule image Importe le fichier Photoshop sous la forme dune image aplatie sans calques. Le fichier converti ne conserve aucun objet individuel. Lopacit est conserve mais nest plus modifiable.

4 Si vous avez utilis la commande Fichier > Importer, vous pouvez slectionner les options suivantes :
Inclure le calque darrire-plan Importe les objets situs sur le calque darrire-plan de limage. Importer dans un nouveau dossier Importe limage dans un nouveau dossier de calque nomm Importation

Photoshop.
5 Si vous avez utilis la commande Fichier > Ouvrir ou fait glisser le fichier Photoshop dans Fireworks, vous pouvez

slectionner les options suivantes :


Inclure les repres Conserve les repres Photoshop leur position initiale. Convertir les calques en tats Place chaque groupe de calques Photoshop dans son propre tat.

A propos de limportation de texte depuis Photoshop


Pour importer rapidement un texte spcifique dans un fichier Photoshop, copiez-le directement dans Fireworks. Le texte copi conserve tous ses attributs textuels. Lorsque vous importez des fichiers Photoshop contenant du texte, Fireworks vrifie si vous disposez des polices ncessaires sur votre systme. Si tel nest pas le cas, un message Fireworks vous demande si vous souhaitez remplacer les polices ou conserver leur aspect. Si des effets pris en charge par Fireworks sont appliqus au texte dans le fichier Photoshop, ils sont conservs dans Fireworks. Toutefois, tant donn que Fireworks et Photoshop nappliquent pas les effets de la mme manire, ces effets peuvent tre diffrents dans chaque application. Lorsque vous ouvrez ou importez dans Fireworks des fichiers Photoshop 6 ou 7 contenant du texte, si loption Conserver lapparence est active, une image cache du texte saffiche pour conserver laspect Photoshop. Une fois le texte modifi, limage cache est remplace par le texte rel dont laspect peut tre diffrent de celui de loriginal. Les donnes relatives la police dorigine sont stockes dans le fichier PNG de manire ce que, si le fichier se trouve sur un systme disposant des polices adquates, vous puissiez les utiliser. Remarque : Fireworks ne permet pas dexporter du texte dans le format Photoshop 6 ou 7. Si vous modifiez un document Photoshop 6 ou 7 contenant du texte et que vous rexportez le document dans Photoshop, le fichier est export au format Photoshop 5.5. Si vous ne modifiez pas le texte, le fichier est export au format Photoshop 6.

Voir aussi
Prfrences dimportation et douverture de fichiers Photoshop la page 313

Importation/Exportation de dgrads Photoshop


A la suite de limportation ou de lexportation, la qualit du dgrad varie en fonction de son type. Une lgre variation de la couleur et de lopacit des dgrads peut galement se produire.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Utilisation de Fireworks avec dautres applications

287

Dgrad Linaire Concentrique Reflt Losange Angle

Qualit dimportation Presque parfait. Presque parfait. Presque parfait. Correspondance approximative (mappage rectangulaire) Correspondance approximative (mappage conique)

Dgrad Linaire Concentrique Barreaux Rectangulaire Conique Ellipse Ondes Etoile filante Contour, satin, vagues

Qualit dexportation Presque parfait. Presque parfait. Presque parfait. Correspondance approximative (mappage losange) Correspondance approximative (mappage angle) Correspondance approximative (mappage concentrique) Correspondance approximative (mappage concentrique) Correspondance imparfaite (mappage forme clate) Correspondance imparfaite (mappage linaire)

Conservation de laspect dun calque de rglage aprs une importation


Lorsque vous importez un fichier PSD contenant un calque de rglage, laspect des calques individuels est conserv la suite de limportation.
1 Dans la bote de dialogue Prfrences, slectionnez Importation/Ouverture PS. 2 Slectionnez Conserver laspect des calques rgls.

Conservation de laspect des calques rgls


Lorsque vous importez un fichier PSD contenant un calque de rglage, laspect des calques individuels est conserv la suite de limportation. Veillez slectionner Paramtres personnaliss issus des prfrences dans la bote de dialogue.

Utilisation de filtres et de modules externes Photoshop


Fireworks met votre disposition de nombreux filtres et modules externes Photoshop ou de fabricants tiers, accessibles depuis la fentre Filtres dynamiques ou le menu Filtres. Remarque : les modules externes et les filtres de Photoshop 5.5 (et versions antrieures) sont pris en charge. Pour plus d'informations, voir http://www.fireworkszone.com/g-2-536. Les modules externes et les filtres Photoshop partir de la version 6 ne sont pas compatibles avec Fireworks.

Activation des modules externes Photoshop via la bote de dialogue Prfrences


1 Choisissez Edition > Prfrences (Windows) ou Fireworks > Prfrences (Mac OS). 2 Slectionnez la catgorie Modules externes.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Utilisation de Fireworks avec dautres applications

288

3 Slectionnez Modules externes Photoshop.

La bote de dialogue de slection de dossier Windows ou Mac OS saffiche. Remarque : si la bote de dialogue ne saffiche pas, cliquez sur Parcourir.
4 Accdez au dossier dinstallation des filtres et modules externes Photoshop ou tiers, puis cliquez sur le bouton

Slectionner (Windows) ou Choisir (Mac OS).


5 Cliquez sur OK pour fermer la bote de dialogue Prfrences. 6 Relancez Fireworks.

Voir aussi
Prfrences des modules externes la page 314

Activation des modules externes Photoshop via la fentre Filtres dynamiques


1 Choisissez nimporte quel objet vectoriel, objet bitmap ou bloc de texte sur la zone de travail, puis cliquez sur licne

plus (+) en regard de ltiquette Filtres dans linspecteur des proprits.


2 Dans le menu contextuel, cliquez sur Options > Rechercher les modules externes. 3 Accdez au dossier dinstallation des filtres et modules externes Photoshop ou tiers, puis cliquez sur le bouton

Slectionner (Windows) ou Choisir (Mac OS). Cliquez sur OK, si le message qui saffiche vous demande si vous voulez relancer Fireworks.
4 Relancez Fireworks pour charger les filtres et les modules externes.

Remarque : vous pouvez galement installer des modules externes directement dans le dossier Plug-Ins de Fireworks.

Insertion de graphiques Fireworks dans Photoshop


Fireworks offre une prise en charge complte pour lexportation de fichiers au format Photoshop (PSD). Une image Fireworks exporte dans Photoshop reste modifiable lorsque vous la rouvrez dans Fireworks en tant que graphique Photoshop. Les utilisateurs de Photoshop peuvent travailler sur leurs graphiques dans Fireworks, puis poursuivre leur modification dans Photoshop. Lextension PSD Save permet dexporter rapidement les pages et tats que contient le document Fireworks en tant que fichiers PSD distincts. Pour la tlcharger, accdez http://www.adobe.com/go/learn_fw_psdsave_fr

Exportation dun fichier au format Photoshop


1 Choisissez Fichier > Enregistrer sous. 2 Nommez votre fichier, puis slectionnez Photoshop PSD dans le menu Type. 3 Pour spcifier des paramtres dexportation prdfinis pour les objets, les effets et le texte, cliquez sur le bouton

Options, puis choisissez un paramtre prdfini dans le menu Paramtres.


Privilgier le caractre modifiable Convertit les objets en calques, conserve le caractre modifiable des effets et

convertit le texte en calques de texte Photoshop modifiables. Slectionnez cette option si vous dsirez modifier limage dans Photoshop et navez pas besoin de conserver laspect exact de limage Fireworks.
Prserver laspect de Fireworks Convertit chaque objet en calque Photoshop isol, mais les effets et le texte ne

peuvent plus tre modifis. Slectionnez cette option si vous dsirez garder le contrle des objets Fireworks dans Photoshop tout en conservant laspect original de limage Fireworks.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Utilisation de Fireworks avec dautres applications

289

Fichier Photoshop plus petit Aplatit chaque calque en une seule image au rendu complet. Slectionnez cette option si vous exportez un fichier contenant un grand nombre dobjets Fireworks. Personnalis Permet de slectionner des paramtres spcifiques pour les objets, les effets et le texte.

4 Cliquez sur Enregistrer pour exporter le fichier Photoshop.

Remarque : Photoshop 5.5 et les versions antrieures ne permettent pas douvrir les fichiers comportant plus de 100 calques. Vous devez supprimer ou fusionner les objets lorsque le document Fireworks exporter comporte plus de 100 objets.

Personnalisation des paramtres dexportation Photoshop


1 Dans la bote de dialogue Enregistrer sous, slectionnez Photoshop PSD comme type de fichier, puis cliquez

sur Options.
2 Dans le menu contextuel Paramtres, slectionnez Personnaliss. 3 Dans le menu contextuel Objets, choisissez lune des options suivantes :
Convertir en calques Photoshop Convertit chaque objet Fireworks en calque Photoshop et chaque masque

Fireworks en masque de fusion Photoshop.


Aplatir tous les calques Fireworks Aplatit tous les objets de chacun des calques Fireworks, lesquels se transforment

en calque Photoshop. Si vous slectionnez cette option, vous naurez plus la possibilit de modifier les objets de Fireworks dans Photoshop. Vous perdez galement dautres fonctions (modes de fusion) qui sont associes aux objets de Fireworks.
4 Dans le menu contextuel Effets, choisissez lune des options suivantes :
Conserver le caractre modifiable Convertit les filtres dynamiques Fireworks en leur quivalent Photoshop. Les effets qui nexistent pas dans Photoshop sont ignors. Rendu des effets Aplatit les effets avec les objets auxquels ils sappliquent. Si vous slectionnez cette option, vous

conservez laspect des effets mais navez plus la possibilit de les modifier dans Photoshop.
5 Dans le menu contextuel Texte, choisissez lune des options suivantes :
Conserver le caractre modifiable Convertit le texte en un calque Photoshop modifiable. La mise en forme de texte non prise en charge par Photoshop est alors perdue. Rendu du texte Transforme le texte en un objet image. Si vous slectionnez cette option, vous conservez laspect du texte mais navez plus la possibilit de le modifier.

Utilisation de Director
Fireworks permet dexporter des contenus graphiques et interactifs vers Director. Cela permet aux utilisateurs de Director de tirer parti des outils doptimisation et de conception graphique de Fireworks sans compromettre la qualit.

Le processus dexportation conserve les comportements et les tranches du graphique. Vous pouvez exporter les images dcoupes en tranches avec des survols.
Remarque : le style HTML Director ne prend pas en charge le code de menus contextuels.

Dernire mise jour le 12/5/2011

UTILISATION DE FIREWORKS
Utilisation de Fireworks avec dautres applications

290

Insertion de fichiers Fireworks dans Director


Director peut importer des images aplaties depuis Fireworks, telles que des images JPEG et GIF. Il peut galement importer des images PNG 32 bits avec transparence. Pour les contenus dcoups, interactifs et anims, Director peut importer du code HTML Fireworks. Pour plus dinformations sur lexportation dimages Fireworks aplaties JPEG et GIF, consultez lAide de Fireworks.

Exportation dimages PNG 32 bits avec transparence


1 Dans Fireworks, choisissez Fentre > Optimisation, remplacez le format de fichier dexportation par PNG 32, et

dfinissez Cache sur Transparent.


2 Choisissez Fichier > Exporter. 3 Slectionnez Images uniquement dans le menu contextuel Type. 4 Donnez un nom au fichier, et enregistrez-le.

Exportation de contenus Fireworks avec calques et tranches Fireworks vers Director


En exportant des tranches Fireworks vers Director, vous pouvez exporter des contenus dcoups et interactifs, tels que des boutons et des images de survol. En exportant des calques vers Director, vous pouvez exporter des contenus F