Adobe Fireworks MX Manuel utilisateur

Utilisation de Fireworks MX
™
macromedia
®
Marques de commerce
Afterburner, AppletAce, Attain, Attain Enterprise Learning System, Attain Essentials, Attain Objects for Dreamweaver, Authorware,
Authorware Attain, Authorware Interactive Studio, Authorware Star, Authorware Synergy, Backstage, Backstage Designer, Backstage
Desktop Studio, Backstage Enterprise Studio, Backstage Internet Studio, Design in Motion, Director, Director Multimedia Studio,
Doc Around the Clock, Dreamweaver, Dreamweaver Attain, Drumbeat, Drumbeat 2000, Extreme 3D, Fireworks, Flash, Fontographer,
FreeHand, FreeHand Graphics Studio, Generator, Generator Developer’s Studio, Generator Dynamic Graphics Server, Knowledge
Objects, Knowledge Stream, Knowledge Track, Lingo, Live Effects, Macromedia, Macromedia M Logo Design, Macromedia Flash,
Macromedia Xres, Macromind, Macromind Action, MAGIC, Mediamaker, Object Authoring, Power Applets, Priority Access, Roundtrip
HTML, Scriptlets, SoundEdit, ShockRave, Shockmachine, Shockwave, Shockwave Remote, Shockwave Internet Studio, Showcase, Tools
to Power Your Ideas, Universal Media, Virtuoso, Web Design 101, Whirlwind et Xtra sont des marques de commerce de Macromedia,
Inc. et peuvent avoir été déposées aux Etats-Unis ou dans d’autres pays. D’autres noms de produits, logos, conceptions, titres, mots ou
expressions mentionnées dans cette publication peuvent être des marques de commerce, des marques de service ou des dénominations
commerciales de Macromedia, Inc. ou d’autres entités et peuvent être déposées dans certains pays.
Le présent manuel comporte des liens vers des sites Web d’autres tiers, Macromedia ne peut en aucun cas être tenu pour responsable du
contenu de ces sites. Vous accédez à ces sites sous votre propre responsabilité. Macromedia mentionne ces liens pour faciliter votre travail
et l’inclusion de ces liens n’implique pas que Macromedia approuve le contenu de ces sites tiers ou en accepte la responsabilité.
Déni de responsabilités Apple
APPLE COMPUTER, INC. NE FOURNIT AUCUNE GARANTIE, EXPRESSE OU IMPLICITE, CONCERNANT LE LOGICIEL INCLUS, QUANT A SA QUALITE LOYALE ET MARCHANDE, OU SON ADAPTATION A UN OBJECTIF PARTICULIER. L’EXCLUSION DES GARANTIES IMPLICITES N’EST PAS AUTORISEE DANS CERTAINS ETATS. L’EXCLUSION CIDESSUS PEUT NE PAS S’APPLIQUER à VOTRE CAS. CETTE GARANTIE VOUS CONFERE DES DROITS JURIDIQUES
SPECIFIQUES. CES DROITS PEUVENT VARIER D’UN ETAT à L’AUTRE.
Copyright © 2002 Macromedia, Inc. Tous droits réservés. U.S. Brevets 5,353,396, 5,361,333, 5,434,959, 5,467,443, 5,500,927,
5,594,855 et 5,623,593. Certaines parties du logiciel sont licenciées aux Etats-Unis Brevet n°4,558,302 et duplicatas étrangers. Autres
brevets en cours d’homologation. Copyright de certaines parties 1988, 2000 Aladdin Enterprises. Tous droits réservés. Ce logiciel est
basé en partie sur le travail du groupe indépendant JPEG. Copyright de certaines parties 1998 Soft Horizons. Tous droits réservés. Ce
manuel ne peut pas être copié, photocopié, reproduit, traduit ou converti sous n’importe quelle forme électronique ou lisible par une
machine, dans son intégralité ou en partie, sans un accord écrit préalable de Macromedia, Inc.
Numéro de référence ZFW60M200F
Remerciements
Rédaction : Dale Crawford, Tonya Estes, David Jacowitz, Kenneth Price
Edition : Rosana Francescato
Gestion de projet : Stuart Manning
Production : Caroline Branch, John Francis, Patrice O'Neill
Responsable production de la localisation : Masayo Noda
Responsable de la localisation : Sami Kaied
Chef de projet localisation : Gloria Figueroa
Photographie : Chris Basmajian
Multimedia : Aaron Begley
Première édition : Juin 2002
Macromedia, Inc.
600 Townsend St.
San Francisco, CA 94103
2
TABLE DES MATIÈRES
INTRODUCTION
Bien démarrer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
Configuration requise . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
Installation de Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
Nouveautés de Fireworks. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
CHAPITRE 1
Didacticiel des bases de la conception graphique . . . . . . . . . . . . . . . . . . . . . 15
Objectifs du didacticiel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Prérequis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Copier le dossier Tutorials . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Afficher le fichier final . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Créer et sauvegarder un nouveau document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Explorer l’environnement de travail de Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Créer et modifier des objets vectoriels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Importer un bitmap et sélectionner des pixels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Ajouter et modifier des effets en direct . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Travailler avec des calques et des objets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Créer et modifier un masque . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Créer et éditer du texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Exporter le document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Récapitulatif . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
15
15
16
16
16
18
19
22
24
26
29
32
39
43
CHAPITRE 2
Didacticiel des bases de la conception Web . . . . . . . . . . . . . . . . . . . . . . . . . . 45
Objectifs du didacticiel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
Prérequis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
Copier le dossier Tutorials . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
Affichage de la page Web finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
Ouvrir le fichier source . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
Importer un graphisme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
Découper le document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
Créer un survol par glisser-déposer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
Créer et modifier des boutons pour constituer une barre de navigation . . . . . . . . . . . . . 54
Créer et modifier un menu contextuel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
Optimiser le document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
Exporter du HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
Tester le fichier terminé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
Récapitulatif . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
3
CHAPITRE 3
Concepts de base de Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
Graphiques vectoriels et de bitmap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
Travailler avec Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
Création d’un nouveau document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
Ouverture et importation de fichiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78
Enregistrement de fichiers Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84
L’environnement de travail de Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
Modification du document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
CHAPITRE 4
Sélection et transformation d’objets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107
Sélection d’objets. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107
Sélection de pixels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110
Edition d’objets sélectionnés . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122
Transformation et distorsion d’objets sélectionnés et sélections . . . . . . . . . . . . . . . . . . 123
Organisation des objets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127
CHAPITRE 5
Traitement des bitmaps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131
Traitement des bitmaps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131
Création d’objets bitmap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131
Traçage et modification d’objets bitmap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133
Retouche de bitmaps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136
Réglage de la couleur et du ton d’un bitmap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139
Application d’un flou et accentuation des bitmaps. . . . . . . . . . . . . . . . . . . . . . . . . . . . 148
CHAPITRE 6
Utilisation d’objets vectoriels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153
Traçage d’objets vectoriels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153
Modification des trajets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166
CHAPITRE 7
Utilisation d’un texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175
Saisie de texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175
Modification d’un texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177
Applications de traits, de trames et d’effets à un texte . . . . . . . . . . . . . . . . . . . . . . . . . 186
Rattachement de texte à un trajet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187
Transformation du texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189
Conversion de texte en trajets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189
Importation de texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 190
Correction orthographique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191
Utilisation de l’Editeur de texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193
CHAPITRE 8
Application de couleurs, de traits et de trames . . . . . . . . . . . . . . . . . . . . . . . 195
Utilisation de la section Couleurs du panneau Outils . . . . . . . . . . . . . . . . . . . . . . . . . 195
Organisation des groupes d’échantillons et des modèles de couleurs . . . . . . . . . . . . . . 196
Utilisation des puits de couleurs et des fenêtres contextuelles. . . . . . . . . . . . . . . . . . . . 203
Utilisation des traits. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204
Utilisation des trames . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210
Application de trames et dégradés . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211
Ajout d’une texture aux traits et aux trames . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216
4
Table des matières
CHAPITRE 9
Utilisation des effets en direct . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219
Application directe des effets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219
Modification des effets en direct . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224
CHAPITRE 10
Calques, masquage et fondu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227
Utilisation des calques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227
Masquage d’images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233
Fondu et transparence . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 251
CHAPITRE 11
Utilisation des styles, des symboles et des adresses URL . . . . . . . . . . . . 255
Utilisation des styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255
Utilisation de symboles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 259
Utilisation des URL. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264
CHAPITRE 12
Découpes, survols et références . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 269
Création et modification d’une découpe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 269
Affectation de comportements interactifs aux découpes . . . . . . . . . . . . . . . . . . . . . . . . 277
Préparation des découpes pour l’exportation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 285
Utilisation des références et des cartes images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 290
CHAPITRE 13
Création de boutons et de menus déroulants . . . . . . . . . . . . . . . . . . . . . . . . 295
Création d’un symbole de bouton . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 295
Création d’une barre de navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 305
Création de menus contextuels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 306
CHAPITRE 14
Création d’animations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 317
Création d’une animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 317
Utilisation des symboles d’animation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 318
Utilisation des images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 322
Interpolation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 328
Aperçu d’une animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 328
Exportation d’une animation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 329
Utilisation d’animations existantes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 331
Utilisation de fichiers multiples pour une animation . . . . . . . . . . . . . . . . . . . . . . . . . . 331
CHAPITRE 15
Optimisation et exportation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 333
Optimisation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Utilisation de l’Assistant Exportation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Optimisation dans l’espace de travail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Exportation depuis Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Utilisation du bouton Exportation rapide . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Table des matières
333
334
337
356
371
5
CHAPITRE 16
Utilisation de Fireworks avec d’autres applications . . . . . . . . . . . . . . . . . . . 373
Utilisation de Macromedia Dreamweaver MX. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 373
Utilisation de Macromedia Flash MX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 388
Utilisation de Macromedia FreeHand . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 393
Utilisation de Macromedia Director . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 397
Utilisation de Macromedia HomeSite . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 400
Utilisation de Microsoft FrontPage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 403
Utilisation avec Adobe Photoshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 406
Utilisation avec Adobe GoLive . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 411
Utilisation avec les éditeurs HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 411
CHAPITRE 17
Automatisation des tâches répétitives. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 413
Recherche et remplacement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 413
Traitement par lots . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 419
Utilisation du journal du projet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 427
Extension de Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 428
CHAPITRE 18
Préférences et raccourcis clavier . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 433
Définition des préférences . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 433
Modification des raccourcis clavier . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 436
Utilisation des fichiers de configuration. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 439
INDEX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 445
6
Table des matières
INTRODUCTION
Bien démarrer
Macromedia Fireworks MX est la solution de conception et de production de graphiques Web
professionnels. Il s’agit du premier environnement de production permettant de faire face et de
résoudre les défis posés aux concepteurs et aux développeurs de graphiques Web.
Créez, modifiez et animez des graphismes Web avec Fireworks, ajoutez des fonctions d’interactivité
avancées et optimisez les images dans un environnement professionnel. Dans Fireworks, vous
pouvez créer et modifier des graphique bitmap et vectoriels dans une seule application. Tout reste
entièrement modifiable, à tout moment. En outre, vous pouvez automatiser vos procédures de
travail pour faire face aux exigences de longues mises à jour et modifications.
Fireworks s’intègre aux autres produits Macromedia, tels que Dreamweaver, Flash, FreeHand et
Director, ainsi qu’à vos applications graphiques préférées et aux éditeurs HTML pour offrir une
solution Web réellement intégrée. Exportez facilement vos graphismes Fireworks avec les codes
HTML et JavaScript qui ont été personnalisés pour l’éditeur HTML que vous utilisez.
Configuration requise
Avant d’installer Fireworks, assurez-vous que vous disposez des matériels et des logiciels suivants :
Microsoft Windows™
•
•
•
•
•
•
Processeur Intel® Pentium® II de 300MHz
Windows 98 SE, ME, NT® 4 (Service Pack 6), 2000 ou XP
64 Mo de RAM disponibles (128 Mo recommandés) plus 80 Mo d’espace disque disponibles
Résolution 800 x 600 pixels, affichage 256 couleurs ou supérieur
Adobe Type Manager® Version 4 ou supérieure pour utiliser les polices Type 1
Lecteur de CD-ROM
Macintosh®
• Processeur Power Macintosh G3, fonctionnant sur OS 9.1 ou supérieur, ou OS X version 10.1
•
•
•
•
ou supérieure
64 Mo de RAM disponibles (128 Mo recommandés) plus 80 Mo d’espace disque disponibles
Résolution 800 x 600 pixels, affichage 256 couleurs ou supérieur
Adobe Type Manager Version 4 ou supérieure pour utiliser les polices Type 1 (SE 9.x
uniquement)
Lecteur de CD-ROM
7
Installation de Fireworks
Lisez le document LisezMoi figurant sur le CD-ROM Fireworks pour prendre connaissance des
toutes dernières informations ou instructions.
Pour installer Fireworks :
1
Insérez le CD-ROM de Fireworks dans le lecteur de CD-ROM.
2
Utilisez l’une des méthodes suivantes :
• Sous Windows, le programme d’installation de Fireworks démarre automatiquement. Si ce
n’est pas le cas, choisissez Démarrer > Exécuter. Cliquez sur Parcourir et choisissez le fichier
Setup.exe situé sur le CD de Fireworks. Cliquez sur OK dans la boîte de dialogue Exécuter.
• Sur le Macintosh, double-cliquez sur l’icône d’installation de Fireworks.
3
Suivez les instructions affichées à l’écran.
Le programme d’installation vous demande d’entrer les informations requises.
4
Si nécessaire, redémarrez votre ordinateur.
Exécution de Fireworks sur des systèmes connectés à un réseau
Macromedia utilise une détection de licence réseau afin d’éviter que des copies de Fireworks ayant
le même numéro de série ne soient utilisées sur plusieurs systèmes connectés par un réseau local.
Si vous tentez de démarrer Fireworks et que, sur le même réseau, un nombre supérieur au nombre
de personnes autorisées défini par la licence est également en train d’utiliser Fireworks, un message
d’alerte vous notifiera les restrictions imposée par la licence.
Si vous pensez avoir obtenu ce message par erreur, ou bien si vous souhaitez obtenir des
licences supplémentaires du produit, contactez le support technique de Macromedia à
l’adresse http://www.macromedia.com/support/email/cs/.
Affichage des fichiers installés avec Fireworks
A un certain stade de l’installation, il pourrait être souhaitable d’afficher ou d’accéder aux fichiers
installés avec Fireworks. Pendant l’installation, Fireworks place des fichiers à différents endroits de
votre système. Il est important de savoir où résident ces fichiers et pourquoi. Pour plus
d’informations, voir « Utilisation des fichiers de configuration » à la page 439.
Les utilisateurs Macintosh doivent porter une attention toute particulière au nouveau format
utilisé par Fireworks pour stocker l’application et ses fichiers de configuration par défaut. Pour
plus d’informations, voir « Affichage du contenu du module (Macintosh uniquement) » à la
page 443.
Apprentissage de Fireworks
Plusieurs ressources sont à votre disposition pour l’apprentissage de Fireworks. Elles incluent un
manuel démarrage rapide (Bien démarrer avec Fireworks MX), le système d’aide accessible
directement à partir de l’application, une version PDF de la documentation complète de
Fireworks et différentes sources d’informations accessibles sur le Web.
L’ aide de Fireworks est
disponible lorsque l’application est active et contient la documentation
complète de Fireworks. Choisissez Aide > Utilisation de Fireworks pour ouvrir l’aide de
Fireworks. Pour les utilisateurs Mac OS X, choisissez Aide > Aide de Fireworks).
8
Introduction
Le didacticiel de Fireworks présente une description interactive des principales fonctions de
Fireworks, chacune pouvant être lues en moins d’une heure. Elles incluent des tâches Fireworks
courantes telles que l’utilisation des outils de dessin et de modification, l’optimisation d’images et
la création d’éléments interactifs tels que les survols et les barres de navigation.
Le panneau Réponses est une zone centrale où vous pouvez trouver des didacticiels, des notes
techniques et les informations les plus à jour sur Fireworks. Le panneau Réponses est dynamique.
Un simple clic sur un bouton permet d’obtenir les dernières mises à jour et informations sur
Fireworks provenant directement de Macromedia.
L’application Fireworks comporte de nombreuses boîtes de dialogue et info-bulles pour rendre
l’utilisation du programme encore plus facile. Les info-bulles apparaissent au bout de quelques
secondes lorsque vous placez le pointeur au-dessus de l’un des éléments de l’interface utilisateur.
La prise en main de Fireworks MX comprend
des informations sommaires concernant les
fonctions de base de Fireworks.
Le fichier PDF Utilisation de Fireworks MX est un document que vous pouvez consulter et imprimer.
Il contient la documentation complète de Fireworks. Ce document est disponible sur le CD
d’installation ainsi que sur le site Web de Macromedia à l’adresse http://www.macromedia.com/fr/.
Le site Web de Macromedia est
mis à jour régulièrement et comporte les informations les plus
récentes relatives à Fireworks, ainsi que des conseils pour les utilisateurs, des rubriques avancées,
des exemples, des astuces et des mises à jour. Consultez le site Web de Macromedia
http://www.macromedia.com/fr/support/ pour prendre connaissance des nouvelles relatives à
Fireworks et savoir comment tirer pleinement parti des fonctionnalités du programme.
Le groupe de discussion de Fireworks permet de communiquer en direct avec les autres utilisateurs de
Fireworks, les techniciens d’assistance et l’équipe de développement de Fireworks. Utilisez un lecteur de
groupes de discussion pour accéder à news://forums.macromedia.com/macromedia.fireworks.
Le manuel Extension de Fireworks MX indique
comment automatiser les tâches de Fireworks à
l’aide du code JavaScript. Toutes les commandes ou options de Fireworks peuvent être contrôlées
avec des commandes JavaScript spéciales. La version PDF de Extending Fireworks MX est
disponible sur le CD et sur le site Web de Macromedia à l’adresse http://www.macromedia.com/
support/fireworks/extend.html.
Enregistrement de Fireworks
Pour obtenir une assistance Macromedia supplémentaire, il est judicieux d’enregistrer en ligne ou
par courrier votre copie de Macromedia Fireworks.
Lorsque vous vous enregistrez, vous êtes placé sur une liste prioritaire vous permettant de recevoir
des notifications presque en temps réel concernant les mises à jour et les nouveaux produits
Macromedia. Vous recevrez des notifications par courrier électronique concernant les mises à jour
du produit et les nouveaux contenus paraissant sur les sites Web www.macromedia.com et
www-euro.macromedia.com.
Pour enregistrer votre copie de Fireworks, exécutez l’une des actions suivantes :
• Choisissez Aide > Enregistrement en ligne et remplissez le formulaire électronique.
• Choisissez Aide > Enregistrement par courrier, imprimez le formulaire et envoyez-le par courrier
postal à l’adresse affichée dans le formulaire.
Bien démarrer
9
Nouveautés de Fireworks
Grâce à ses nouvelles fonctions, Fireworks MX devient une application de plus en plus accessible
avec une capacité accrue de création de graphismes et d’interactivité pour les sites Web.
Fireworks MX maximise la productivité des concepteurs Web expérimentés, des développeurs
HTML qui travaillent également à la création de graphiques, et des développeurs Web débutants
ayant besoin de développer des pages Web interactives, riches graphiques et ayant peu ou aucune
connaissance de la programmation ou du langage JavaScript.
Fireworks MX a été profondément repensé, avec une interface utilisateur efficace, davantage de
boutons et de menus contextuels puissants, ainsi que des outils bitmap et vectoriels intuitifs.
L’intégration des autres applications Macromedia, aussi bien que des applications tierces, facilite
l’importation de différents formats de fichier dans Fireworks et le transfert vers d’autres
applications lorsque vous travaillez. Une autre nouveauté de Fireworks est la possibilité de créer
des commandes JavaScript avec Macromedia Flash qui apparaissent dans Fireworks MX sous la
forme de panneaux ou de boîtes de dialogue.
Fonctions simples d’utilisation
Un environnement de travail agréable et intuitif, y compris un Vérificateur de propriétés et des
outils répondant aux besoins des professionnels font de Fireworks MX une application simple
d’utilisation et facile à mettre en oeuvre. Fireworks MX possède une nouvelle interface, mieux
organisée et plus compatible avec les autres applications Macromedia MX Studio.
L’amélioration de la gestion des panneaux permet notammant de regrouper des panneaux, puis
de réduire les groupes de manière à n’afficher que la barre de titre du groupe de panneaux, tant
que vous navez pas besoin d’utiliser les panneaux. Vous pouvez ancrer les groupes de panneaux
dans une zone d’ancrage de panneaux afin d’organiser votre espace de travail, ou bien faire glisser
des groupes ou des panneaux individuels vers n’importe quel endroit de l’espace de travail. Pour
plus d’informations, voir « Organisation des groupes de panneaux et des panneaux » à la page 90.
Le Vérificateur de propriétés est
un panneau dynamique contenant de nombreuses options qui
changent votre façon de travailler. Ouvrez un document et le Vérificateur de propriétés affiche les
propriétés du document telles que la couleur et la taille du document. Choisissez un outil à partir
du panneau Outils, et le Vérificateur de propriétés affiche les options de l’outil. Sélectionnez un
objet vectoriel, et il affiche des informations concernant le trait et la trame.
Vous pouvez changer ces options ainsi que d’autres options, y compris les effets appliqués en
direct, les modes de fondu et l’opacité, directement à partir du Vérificateur de propriétés, au lieu
de devoir cliquer pour ouvrir ou activer un panneau après l’autre. Le Vérificateur de propriétés,
familier aux utilisateurs de Macromedia Dreamweaver et Flash, réduit le nombre de panneaux
dans l’espace de travail. Pour plus d’informations, voir « Utilisation du Vérificateur de propriétés »
à la page 88.
L’édition bitmap et vectorielle non modale permet d’éviter de maintenir constamment les modes
vectoriel et bitmap. La sélection d’un outil ou d’un type d’objet détermine automatiquement si
vous allez créer et modifier des bitmaps, des vecteurs ou du texte.
Les améliorations de l’édition bitmap vous donne la possibilité de créer intuitivement des bitmaps
par couper, copier et coller, de déplacer des zones de sélection parmi les bitmaps et d’ajuster
précisément les images avec un nouveau groupe d’outils de retouche d’image. Les commandes de
sélection habituelles sont organisées dans un nouveau menu Sélection.
10
Introduction
Les sections du panneau Outils séparent
les outils utilisés pour la création et la modification de
bitmaps, de vecteurs et d’objets Web. Elles offrent des repères permettant de choisir intuitivement
l’outil approprié et d’atteindre des résultats de création prévisibles. Les autres outils et fonctions
d’outils sont répartis dans les catégories Sélection, Couleurs et Affichage. Pour plus
d’informations, voir « Utilisation du panneau Outils » à la page 87.
Le bouton Exportation rapide affiche des options facilitant l’exportation vers de nombreux formats
de fichier ou styles HTML, ou facilitant le démarrage d’autres applications Macromedia à partir
de la fenêtre du document, éliminant le temps de configuration et rationalisant les procédures.
Pour plus d’informations, voir « Utilisation du bouton Exportation rapide » à la page 371.
Le texte à l’écran vous permet d’intégrer visuellement du texte et des graphiques sans devoir
utiliser l’éditeur de texte. Choisissez simplement l’outil Texte, cliquez sur le document et
commencez votre saisie. Dans le Vérificateur de propriétés, vous pouvez soit déterminer des
attributs de texte pour l’outil Texte avant de commencer la saisie ou bien sélectionner un texte
existant et le formater. Fireworks MX possède une panoplie de nouveaux outils de contrôler de
texte et de paragraphe permettant de formater du texte. Pour plus d’informations, voir
« Utilisation d’un texte » à la page 175.
Le zoom variable vous laisse glisser l’outil de zoom afin de déterminer avec précision le facteur de
zoom. Après avoir zoomé votre document, le facteur de zoom est affiché dans la zone de texte
Zoom en bas du document.
Les versions comptabiles Windows XP et Macintosh OS X tirent
parti des dernières innovations
de ces systèmes d’exploitation. Fireworks MX est intégralement carbonisé afin de supporter toutes
les améliorations de l’interface utilisateur OS X.
L’exportation XHTML vous
permet d’exporter, de mettre à jour et d’utiliser la modification
Roundtrip avec l’ensemble des styles qu’offre Fireworks pour le code HTML. Vous pouvez utiliser
les documents existants qui ont été convertis en documents XHTML dans Dreamweaver MX.
Le panneau Réponses, une nouvelle fonction de Fireworks MX, Dreamweaver MX et Flash MX,
est un lien vers des contenus Web pouvant être mis à jour et se trouve judicieusement placé dans
l’espace de travail Fireworks. Vous pouvez cliquer sur le bouton Mise à jour lorsque vous êtes en
ligne et charger des informations de référence récentes de Macromedia, ou consultez en ligne des
bases de données de documentation comme TechNotes.
Le vérificateur orthographique recherche dans chaque bloc de texte de votre document les mots mal
orthographiés. Lorsqu’il trouve un mot qu’il ne reconnaît pas, il propose des suggestions de
correction ou vous permet de l’ajouter dans votre dictionnaire.
Le cache multi plates-formes des polices permet de simplifier le partage des fichiers des groupes
de travail et clients, sans soucier des problèmes de polices relatifs aux différents systèmes utilisés.
Fireworks conserve l’apparence de tous les textes d’un document sur les systèmes qui n’ont pas les
polices utilisées par le document.
De nouvelles fonctionnalités puissantes
Fireworks MX possède une panoplie de nouvelles fonctions de créativité et d’automatisation
puissantes que les concepteurs Web débutants trouveront simples d’utilisation et que les
développeurs expérimentés apprécieront. Cette fonctionnalié fait de Fireworks un outil
indispensable à la conception et de développement de sites Web, depuis la conception jusqu’à
l’intégration.
Bien démarrer
11
L’Assistant Graphique vous permet d’affecter des variables à du texte, des images, des références et
des découpes. Il génère ensuite de plusieurs documents basés sur l’original, chaque document
contenant des informations spécifiques provenant d’un fichier base de données séparé par une
virgule ou fichier XML.
Le générateur de barres de navigation du menu Commandes automatise la procédure de création
rapide des barres de navigation grâce à l’utilisation judicieuse de symboles de bouton Fireworks
MX. Vous pouvez sélectionner l’occurrence d’un bouton symbole, puis choisir le nombre de
copies à effectuer, choisir l’orientation et l’espacement vertical ou horizontal, et assigner des
étiquettes de bouton et des URL dans une boîte de dialogue intégrée.
Les améliorations de l’éditeur des menus contextuels ont
ajouté un contrôle créatif à la
fonctionnalité la plus populaire de Fireworks 4. Vous pouvez maintenant créer un menu
contextuel horizontal ou vertical, et déterminer les caractéristiques de la bordure, l’espacement et
la taille des cellules indépendamment de la taille du texte. Vous pouvez également fixer le
positionnement des menus par rapport à l’objet de déclenchement aussi bien que le placement des
sous-menus par rapport au déclencheur de l’élément de menu ou du menu contextuel principal.
Fireworks génère automatiquement pour vous le code JavaScript. Les menus exportés sont
entièrement compatibles avec Dreamweaver MX. Pour plus d’informations, voir « Création de
menus contextuels » à la page 306.
La fonction de modification du symbole de bouton d’occurrence vous permet de créer un symbole
de bouton, puis d’identifier aisément chaque bouton en leur affectant un texte, des URL et cibles
spécifiques dans le Vérificateur de propriétés. Vous pouvez également modifier d’autres
caractéristiques graphiques du symbole et répercuter ces modifications sur toutes les occurrences
de bouton sans affecter les propriétés de l’occurrence. Pour plus d’informations, voir « Création
d’un symbole de bouton » à la page 295.
Procédures de travail ouvertes
Vous n’avez pas tenu de respecter les procédures de travail d’un autre utilisateur. En utilisant
Fireworks MX, vous pouvez intégrer la production graphique dans votre processus de
développement avec une procédure de travail ouverte, efficace qui reconnaît et prend en charge les
formats de fichier, applications et standards que vous utilisez.
Les commandes JavaScript avec l’interface SWF place la création de commandes JavaScript à
niveau supérieur. Les développeurs peuvent créer et exécuter des commandes complexes afin
d’étendre et d’automatiser Fireworks MX en combinant l’extensibilité de l’API JavaScript de
Fireworks avec des interfaces développées sous Flash MX en utilisant des composants ainsi que
ActionScript. Pour plus d’informations, voir Extending Fireworks MX, disponible sous la forme
d’un fichier PDF sur le CD d’installation et à l’adresse http://www.macromedia.com/support/
fireworks/extend.html.
Le support Macromedia Exchange signifie
que les utilisateurs, même ceux qui ne sont pas
intéressés par la création de commandes JavaScript, peuvent charger des commandes créées par
des utilisateurs depuis Exchange. Les commandes apparaissent dans l’espace de travail de
Fireworks MX sous la forme de panneaux ou de boîtes de dialogue simples d’utilisation.
Fireworks MX est livré avec plusieurs commandes utilisateur dans le menu Commandes, ainsi
qu’avec un panneau utilisateur Aligner dans le menu Fenêtre.
12
Introduction
Les contrôles de la table de mise en page des découpes vous permettent de définir et d’optimiser
les mises en page de la table des découpes par simple déplacement des repères de découpe.
Fireworks redimensionne automatiquement les découpes attachées, ajoutant et supprimant des
découpes, si nécessaire. Pour plus d’informations, voir « Déplacement des repères d’une découpe
pour modifier la découpe » à la page 275.
La fonction de reconstitution des tables permet de reconstruire instantanément un nouveau
fichier source PNG lorsque vous pointez vers un fichier HTML contenant des tables avec des
découpes d’image. Macromedia Fireworks et les comportements Dreamweaver, comme les survols
d’image et les menus contextuels, sont importés et attachés aux découpes appropriées.
Cela est utile lorsque vous travaillez sur des projets de site Web existants, et que les seuls fichiers
disponibles sont les pages HTML publiées. Vous pouvez importer les fichiers HTML dans
Fireworks et créer des fichiers source PNG à partir de ces derniers. Pour plus d’informations, voir
« Création de fichiers PNG dans Fireworks à partir de fichiers HTML » à la page 80.
Roundtrip Photoshop 6 text vous permet d’ouvrir un fichier Photoshop 6 ou 7 en laissant intact le
texte modifiable. Le graphisme peut ainsi être modifié, puis réexporté au format Photoshop tout
en maintenant l’apparence correcte du texte et la possibilité de le modifier. Pour plus
d’informations, voir « Importation de texte depuis Photoshop » à la page 407.
Roundtrip avec Microsoft FrontPage est disponible en cliquant sur le bouton Exportation rapide.
Les tables de lancement et de modification agissent sur le fichier original : les tables sont mises à
jour dans FrontPage sans que les modifications de code faites dans FrontPage soient perdues. Pour
plus d’informations, voir « Exportation de code HTML Fireworks vers FrontPage » à la page 404.
L’intégration de Macromedia Sitespring vous permet de disposer sur votre espace de travail
Fireworks MX des meilleurs outils de production et gestion des clients. Choisissez simplement
Fenêtre > Sitespring pour ouvrir la fenêtre Sitespring. Pour plus d’informations, consultez la
documentation de Sitespring.
Bien démarrer
13
14
Introduction
CHAPITRE 1
Didacticiel des bases
de la conception graphique
Le présent didacticiel vous guidera à travers les opérations de base de la conception de graphismes
avec Macromedia Fireworks MX. L’utilisation de l’application leader de l’industrie informatique
dans le domaine du graphisme Web vous permettra d’acquérir une expérience pratique et
d’apprendre les concepts de base de la conception graphique.
Si vous êtes déjà familier avec la conception graphique de Fireworks, vous pouvez continuer avec
« Didacticiel des bases de la conception Web » à la page 45, où vous apprendrez comment
concevoir des pages Web avec Fireworks.
Objectifs du didacticiel
Ce didacticiel vous permet d’effectuer les tâches nécessaires permettant de créer avec FireWorks
une petite annonce pour un loueur de voitures classique qui peut être effectuée en moins d’une
heure. Vous apprendrez à :
•
•
•
•
•
•
•
•
•
•
•
Copier le dossier Tutorials
Afficher le fichier final
Créer et sauvegarder un nouveau document
Explorer l’environnement de travail de Fireworks
Créer et modifier des objets vectoriels
Importer un bitmap et sélectionner des pixels
Ajouter et modifier des effets en direct
Travailler avec des calques et des objets
Créer et modifier un masque
Créer et éditer du texte
Exporter le document
Prérequis
Bien que ce didacticiel ait été conçu pour des personnes n’ayant jamais utilisé Fireworks, il couvre
beaucoup de nouvelles fonctionnalités de Fireworks, et peut donc également être utile aux
utilisateurs expérimentés. Vous n’avez pas besoin d’être un concepteur graphique pour utiliser ce
didacticiel, mais vous devez avoir des connaissances informatiques de base et être capable d’utiliser
les applications bureautiques standard. Cela implique savoir comment trouver des fichiers et des
dossiers sur votre disque dur.
15
Copier le dossier Tutorials
Avant de commencer, vous devrez créer une copie du dossier Tutorials. Vous pourrez ainsi
enregistrer votre travail tout en vous permettant, vous ou un autre utilisateur, de terminer le
didacticiel plus tard en utilisant les fichiers originaux.
1
Ouvrez le dossier de l’application Fireworks de votre disque dur.
Remarque : Si vous ne pouvez pas voir le dossier de votre application Fireworks, vous avez certainement un
accès limité aux fichiers de votre système. Vous pouvez charger les fichiers nécessaires à ce didacticiel depuis le
Centre d’assistance sur le Web à l’adresse http://www.macromedia.com/fr/support/.
2
Faites une copie du dossier Tutorials sur votre bureau.
Afficher le fichier final
Affichez le fichier final du didacticiel pour voir à quoi ressemblera le projet achevé.
1
Démarrez votre navigateur Web.
2
Ouvrez le dossier Tutorials que vous avez copié sur votre bureau et recherchez Tutorial1/Complete.
Remarque : Certaines versions de Microsoft Windows cachent par défaut les extensions de fichier reconnues.
Si vous n’avez pas modifié cette option, les fichiers du dossier Complete s’afficheront sans les extensions.
Lorsque l’on traite des graphismes pour le Web, il est préférable de pouvoir voir les extensions de fichier.
Reportez-vous à l’aide de Windows pour obtenir plus d’informations concernant l’affichage des extensions de
fichier.
3
Sélectionnez le fichier final.jpg et faites-le glisser vers la fenêtre du navigateur actif.
Pour ce didacticiel, vous utiliserez Fireworks pour concevoir et exporter une copie de cette petite
annonce pour loueur de voitures classique.
Remarque : Le dossier Complete contient également le document Fireworks avec lequel le fichier JPEG a été
généré. Pour afficher le document, double-cliquez sur final.png.
Créer et sauvegarder un nouveau document
Maintenant que vous avez vu le fichier final.jpg, vous êtes prêt à commencer votre projet.
1
Dans Fireworks, choisissez Fichier > Nouveau.
La boîte de dialogue Nouveau document s’affiche alors.
16
Chapitre 1
2
Saisissez 480 pour la largeur et 214 pour la hauteur. Vous devez vous assurer que ces deux
valeurs sont en pixels et que la couleur du fond est blanche, puis cliquez sur OK.
Une fenêtre document ayant comme titre Sans Titre-1.png (Windows) ou Sans Titre-1
(Macintosh) est maintenant ouverte.
3
Si la fenêtre du document n’est pas maximisée, c’est-à-dire qu’elle n’occupe pas toute la surface
de l’écran, maximisez-la en utilisant le bouton d’agrandissement (Windows) ou la case zoom
(Macintosh) en haut de la fenêtre du document. Cela vous procurera beaucoup d’espace de
travail.
4
Choisissez Fichier > Enregistrer sous.
La boîte de dialogue Enregistrer sous (Windows) ou Enregistrer (Macintosh) s’ouvre.
5
Ouvrez le dossier Tutorials/Tutorial1 de votre bureau.
6
Nommez le fichier vintage.
7
Choisissez l’option Ajouter l’extension du nom du fichier si elle n’est pas encore sélectionnée
(Macintosh uniquement).
8
Cliquez sur Enregistrer.
La barre de titre affiche le nouveau nom de fichier avec une extension PNG. PNG est le format
de fichier natif de Macromedia Fireworks. Le fichier PNG est votre fichier source : c’est là que
vous effectuerez l’ensemble de votre travail dans Fireworks. A la fin de ce didacticiel, vous
apprendrez à exporter votre document vers un autre format afin de l’utiliser sur le Web.
Pendant l’exécution du didacticiel, pensez à enregistrer fréquemment les modifications en
choisissant Fichier > Enregistrer.
Remarque : Pendant l’exécution du didacticiel, il peut être utile d’annuler une partie des modifications. Fireworks
peut annuler plusieurs de vos modifications récentes, le nombre exact dépend du nombre spécifié dans la boîte de
dialogue Préférences. Pour annuler la modification la plus récente, choisissez Edition > Annuler.
Didacticiel des bases de la conception graphique
17
Explorer l’environnement de travail de Fireworks
Avant de poursuivre, examinez les éléments qui constituent l’environnement de travail de
Fireworks :
• Au centre de l’écran se trouve la fenêtre du document. Au centre de la fenêtre se trouve le
document. C’est là que s’affichent le document Fireworks et tout graphisme que vous créez.
• En haut de l’écran se trouve une barre de menus. La plupart des commandes de Fireworks sont
accessibles à partir de la barre de menus.
• A gauche de l’écran se trouve le panneau Outils. Si le panneau Outils n’est pas visible,
choisissez Fenêtre > Outils. Le panneau Outils est l’endroit où vous trouverez des outils pour
sélectionner, créer et modifier toute une variété d’éléments graphiques d’objets Web.
• En bas de l’écran se trouve le Vérificateur de propriétés. Si le Vérificateur de propriétés n’est pas
visible, choisissez Fenêtre > Propriétés. Le Vérificateur de propriétés affiche des propriétés pour
un objet ou un outil sélectionné. Vous pouvez changer ces propriétés. Si aucun objet ni aucun
outil n’est sélectionné, le Vérificateur de propriétés affiche les propriétés du document.
Le Vérificateur de propriétés affiche deux ou quatre lignes de propriétés. Si le Vérificateur de
propriétés est à mi-hauteur, autrement dit s’il n’affiche que deux lignes, vous pouvez cliquer sur
la flèche d’extension située dans le coin inférieur droit afin de voir toutes les propriétés.
Flèche d’extension à mi-hauteur
18
Chapitre 1
• Sur la droite de l’écran se trouve toute une variété de panneaux tels que le panneau Calques et
le panneau Optimiser. Vous pouvez les ouvrir, ainsi que d’autres panneaux, à partir du menu
Fenêtre.
• Placez votre pointeur au-dessus des différents éléments de l’interface. Si vous gardez le pointeur
suffisamment longtemps au-dessus d’un élément de l’interface, une info-bulle apparaît. Les
info-bulles identifient des outils, des menus, des boutons ainsi que d’autres options de
l’interface de Fireworks. Les info-bulles disparaissent lorsque vous éloignez le pointeur des
éléments d’interface qu’elles identifient.
Plus vous progresserez dans le didacticiel, plus vous en apprendrez sur chacun de ces éléments.
Créer et modifier des objets vectoriels
Avec Fireworks, vous pouvez créer et modifier deux types de graphismes : les objets vectoriels et
les images bitmap.
Un objet vectoriel est la description mathématique d’une forme géométrique. Le trajet des
vecteurs est défini par des points. Le trajet des vecteurs ne présente pas de dégradation de la
qualité lorsque vous effectuez un zoom ou bien si vous agrandissez ou réduisez l’échelle. La feuille
de l’illustration ci-dessous est un ensemble d’objets vectoriels. Notez les bords lissés de la feuille, et
ce même si vous effectuez un zoom avant.
A l’opposé, une image bitmap est constituée d’une grille de pixels colorés. Les images comportant
des variations de couleur complexes, comme les photographies, sont plus souvent des images
bitmap.
Didacticiel des bases de la conception graphique
19
Tandis que de nombreuses applications proposent des outils permettant de modifier soit des
formes vectorielles, soit des images bitmap, Fireworks vous laisse travailler avec les deux types de
graphismes. Dans cette partie, vous allez travailler avec des graphismes vectoriels.
Créer des objets vectoriels
Vous allez maintenant créer deux des éléments graphiques de votre document. Pour commencer,
vous allez créer un rectangle bleu qui sera positionné en bas du document. Puis, vous créerez un
rectangle qui fera office de bord pour le contenu du document.
1
Choisissez l’outil Rectangle dans la partie Vecteur du panneau Outils.
2
Cliquez sur Couleur de remplissage dans le Vérificateur de propriétés.
La fenêtre contextuelle Couleur de remplissage s’ouvre.
3
Tapez 333366 dans le champ de saisie situé en haut de la fenêtre et appuyez sur Entrée.
La case Couleur de remplissage devient bleu foncé afin de refléter la couleur de votre choix.
4
20
Dans la fenêtre du document, positionnez le pointeur en forme de croix sur le document, et
faites-le glisser vers le bas et vers la droite afin de créer un rectangle. Vous pouvez tracer le
rectangle n’importe où sur le document. Plus tard dans cette procédure, vous modifierez la
taille et vous le positionnerez.
Chapitre 1
5
Lorsque vous relâchez le bouton de la souris, un rectangle bleu foncé apparaît, sélectionné,
dans la zone que vous avez définie.
Vous pouvez dire à quel moment un objet est sélectionné, car des points bleus apparaissent
dans les coins. La plupart des objets possède également une surbrillance bleue autour de leurs
bords extérieurs, mais les rectangles sont des exceptions.
6
Dans le coin inférieur gauche du Vérificateur de propriétés, tapez 480 dans la case de la largeur
et 15 dans la case de la hauteur, puis appuyez sur Entrée.
La taille du rectangle s’adapte aux dimensions spécifiées.
7
Choisissez l’outil Pointeur dans la section Sélection du panneau Outils.
8
Faites glisser le rectangle de manière à ce qu’il soit positionné en bas du document, comme
présenté ci-dessous. Utilisez les touches fléchées pour effectuer un placement précis.
9
Choisissez à nouveau l’outil Rectangle et tracez un second rectangle. Tracez-le n’importe où sur
le document et donnez-lui la taille de votre choix. Vous modifierez ses propriétés et sa position
dans la section suivante.
Modifier les propriétés d’objets
Ici, vous modifierez le deuxième rectangle que vous avez créé en changeant sa taille, sa position et
sa couleur dans le Vérificateur de propriétés.
1
Le rectangle toujours sélectionné, cliquez sur la case Couleur du trait du Vérificateur de
propriétés et entrez la valeur de couleur CCCCCC. Appuyez sur Entrée pour appliquer les
modifications.
2
Reglez la taille de pointe sur 1 en faisant glisser le curseur ou en tapant la valeur la zone de saisie.
Didacticiel des bases de la conception graphique
21
3
Cliquez sur la case Couleur de remplissage du Vérificateur de propriétés et cliquez sur le
bouton Transparent.
4
Dans le Vérificateur de propriétés, saisissez les valeurs suivantes dans les cases correspondant à
la largeur, à la hauteur et aux coordonnées. Cliquez ensuite en-dehors du Vérificateur de
propriétés pour appliquer vos modifications.
•
•
•
•
Largeur : 480
Hauteur : 215
X:0
Y: 0
Le rectangle se transforme en un cadre gris situé tout autour du bord du document.
Si votre système utilise le gris comme couleur de fond de la fenêtre, il vous sera difficile à ce
niveau-là de voir le rectangle. Mais ne vous inquiétez pas, il est toujours là.
5
Choisissez l’outil Pointeur et cliquez n’importe où à l’exception du rectangle afin de
désélectionner ce dernier.
Les propriétés changent dans le Vérificateur de propriétés. Comme aucun objet n’est
sélectionné, vous voyez maintenant les propriétés du document au lieu des propriétés de
l’objet.
Importer un bitmap et sélectionner des pixels
Vous allez ensuite importer une image bitmap et créer une sélection flottante de ses pixels.
Importer une image
Vous allez modifier l’image d’une voiture classique. Vous devez commencer par importer l’image.
22
1
Choisissez Fichier > Importer et ouvrez le dossier Tutorials de votre bureau. Ouvrez le dossier
Tutorial1/Assets.
2
Sélectionnez car.jpg et cliquez sur Ouvrir.
Chapitre 1
3
Alignez le pointeur d’insertion au coin supérieur gauche du document et cliquez, comme
présenté dans l’illustration suivante.
L’image apparaît, sélectionnée, sur le document.
4
Cliquez n’importe où à l’exception de l’image sélectionnée afin de la désélectionner.
Créez une sélecion de pixels
Ensuite, vous allez sélectionner les pixels qui constituent la voiture dans l’image que vous avez
importée, puis copier et coller les pixels en qualité de nouvel objet.
1
Choisissez l’outil Zoom dans la partie Affichage du panneau Outils.
L’outil Zoom
2
Cliquez une fois sur l’image.
L’affichage est agrandi de 150 %. Le zoom avant vous permet de mieux voir ce que vous êtes en
train de sélectionner et de contrôler plus finement votre sélection.
3
Cliquez sur l’outil Lasso dans la section Bitmap du panneau Outils et maintenez enfoncé le
bouton de la souris. Choisissez l’outil Lasso polygonal à partir du menu contextuel qui
apparaît.
L’outil Lasso polygonal vous permet de tracer une sélection autour des pixels en utilisant une
série de lignes droites. Vous utiliserez l’outil Lasso polygonal pour sélectionner les pixels qui
constituent l’image de la voiture.
4
Dans le Vérificateur de propriétés, fixez l’option Bord sur Anticrénelé.
Didacticiel des bases de la conception graphique
23
5
Avec le pointeur de l’outil Lasso polygonal, cliquez sur le bord supérieur de la voiture, puis
cliquez de manière répétée tout autour du bord de la voiture afin de poursuivre la sélection.
6
Terminez la sélection en déplaçant le pointeur à l’endroit où vous avez commencé la sélection.
Un petit carré gris apparaît à côté du pointeur du lasso polygonal pour vous indiquer que vous
êtes sur le point de terminer la sélection. Cliquez pour achever la sélection.
Une bordure de sélection apparaît autour des pixels que vous avez sélectionnés.
7
Choisissez Edition > Copier.
La sélection est copiée dans le Presse-papiers.
8
Choisissez Edition > Coller.
L’image de la voiture est collée dans le document sous la forme d’un nouvel objet bitmap.
9
Choisissez l’outil Pointeur et double-cliquez n’importe où à l’exception du bitmap afin de le
désélectionner.
10
Cliquez sur le menu contextuel Définir le Zoom situé en bas de la fenêtre du document et
rétablissez un affichage de 100 %.
Ajouter et modifier des effets en direct
Vous appliquerez ensuite les effets en direct à l’image bitmap d’origine. Vous changerez la teinte et
la saturation de l’image et vous appliquerez un flou.
24
Chapitre 1
1
Cliquez n’importe où sur l’image du désert. (Faites toutefois attention à ne pas cliquer sur la
voiture.)
2
Dans le Vérificateur de propriétés, cliquez sur le bouton Ajouter des effets (le bouton avec le
signe plus (+)).
Le bouton Supprimer l’effet
Le bouton Ajouter des effets
3
Choisissez Régler la couleur > Teinte/Saturation à partir du menu contextuel des effets.
La boîte de dialogue Teinte/Saturation s’ouvre.
4
Choisissez l’option Coloriser et cliquez sur OK.
L’image devient colorée sur le document, et l’effet est ajouté à la liste des effets en direct dans le
Vérificateur de propriétés. Les effets en direct sont modifiables : vous pourrez toujours ajouter
des éléments à cette liste, supprimer l’effet ou le modifier.
5
Double-cliquez sur l’effet Teinte/Saturation afin de le modifier.
Didacticiel des bases de la conception graphique
25
Conseil : Une alternative consiste à cliquer sur le bouton Info à côté de l’effet.
La boîte de dialogue Teinte/Saturation s’ouvre à nouveau.
6
Choisissez une teinte de 25 et une saturation de 20, puis cliquez sur OK.
Le niveau de teinte et de saturation de l’image change et un aspect sépia apparaît, comme sur
les anciennes photographies.
7
Cliquez à nouveau sur le bouton Ajouter des effets pour ajouter un nouvel effet en direct.
8
Choisissez Flou > Accentuer le flou à partir du menu contextuel Effets.
Les pixels du bitmap sélectionné deviennent flous, et le nouvel effet est ajouté à la liste des
effets en direct dans le Vérificateur de propriétés.
Travailler avec des calques et des objets
Les calques permettent de diviser un document Fireworks en plusieurs plans verticaux discrets.
Un document peut être composé de plusieurs calques, et chaque calque peut contenir de
nombreux objets. Dans Fireworks, le panneau Calques affiche la liste des calques et des objets
contenus par chaque calque.
Le panneau Calques vous permet de nommer, masquer, afficher et changer l’ordre d’empilement
des calques et des objets, ainsi que de fusionner des bitmaps et d’appliquer des masques bitmap.
Vous pouvez également ajouter et supprimer des calques en utilisant le panneau Calques.
Dans cette partie du didacticiel, vous utiliserez le panneau Calques pour fusionner les deux images
bitmap. Puis, vous nommerez les objets de votre document. Vous utiliserez également le panneau
Calques pour changer l’ordre d’empilement des objets.
Plus loin dans le didacticiel, vous utiliserez le panneau Calques pour appliquer un masque à
l’image fusionnée.
Fusionner des bitmaps
Maintenant que vous avez appliqué les effets en direct à l’image d’arrière-plan, vous allez la
fusionner avec l’image en niveaux de gris de la voiture afin de créer un bitmap simple.
26
Chapitre 1
1
Si le panneau Calques est réduit ou invisible, cliquez sur sa flèche d’extension ou choisissez
Fenêtre > Calques.
La flèche d’extension
2
Cliquez sur la vignette de l’image en niveaux de gris de la voiture dans le panneau Calques.
3
L’image de la voiture sélectionnée, cliquez sur l’icône du menu contextuel Options située en
haut à droite du panneau Calques.
L’icône du menu contextuel
Options
4
Choisissez Fusionner vers le bas.
Dans le panneau Calques, les deux objets bitmap se fusionnent en un bitmap.
Dans le Vérificateur de propriétés, la liste des effets en direct ne comporte plus aucun effet.
Cela est dû au fait que la fusion vers le bas combine les pixels de chaque bitmap et les rend non
modifiables en tant qu’images séparées. Les effets en direct que vous appliquez à un objet ou à
un bitmap ne sont plus modifiables après l’exécution d’une fusion vers le bas avec un autre
bitmap.
Didacticiel des bases de la conception graphique
27
Nommer des objets
Il est toujours judicieux de nommer vos objets, cela vous permettra par la suite de les identifier
facilement. Lorsqu’un document prend du volume et qu’il contient plusieurs objets, il peut
devenir difficile à gérer si vos objets ne possèdent pas de noms uniques.
Vous nommerez les objets de votre document en utilisant le panneau Calques et le Vérificateur de
propriétés.
1
Dans le panneau Calques, double-cliquez sur le mot Bitmap situé à côté de la vignette de
l’image.
Un champ d’édition apparaît.
2
Tapez Classic Car dans le champ d’édition et appuyez sur Entrée.
Le nouveau nom est appliqué à l’objet bitmap.
3
Dans la fenêtre du document, sélectionnez le rectangle gris qui borde le document. S’il n’est
pas bien visible sur le document, sélectionnez-le dans le panneau Calques.
Cette fois-ci, vous allez nommer un objet en utilisant le Vérificateur de propriétés.
4
Dans le Vérificateur de propriétés, tapez Border dans la zone du nom de l’objet et appuyez sur
Entrée.
Le nom que vous saisissez est également affiché dans le panneau Calques, à côté de la vignette
de l’objet.
5
28
Entrez un nom pour l’objet rectangle restant en utilisant le panneau Calques ou le Vérificateur
de propriétés. Utilisez le nom de votre choix, mais assurez-vous de choisir un nom significatif
qui vous permettra par la suite d’identifier et de modifier facilement des objets dans le
document.
Chapitre 1
Changer l’ordre d’empilement des objets
L’image bitmap fusionnée recouvre l’objet bordure et le rectangle bleu. La bordure et le rectangle
bleu doivent rester au-dessus, c’est pourquoi vous allez utiliser le panneau Calques afin de changer
l’ordre d’empilement des objets du document.
1
Dans le panneau Calques, cliquez sur la vignette du rectangle bleu afin de le sélectionner.
2
Faites-le glisser au sommet du calque 1, au-dessus de la vignette de la voiture classique.
Remarque : Le calque situé au-dessus de la pile dans le panneau Calques est toujours le calque Web. Vous
trouverez plus de détails concernant le calque Web dans « Didacticiel des bases de la conception Web » à la
page 45.
Lorsque vous faites glisser un objet, le pointeur se transforme afin de refléter le glissement
effectué (Windows uniquement). Une ligne sombre dans le panneau Calques indique l’endroit
où il serait placé si vous relâchiez le bouton de la souris à ce moment précis.
3
Relâchez le bouton de la souris.
Le rectangle bleu est placé juste au-dessus de l’objet bitmap dans le panneau Calques. L’ordre
d’empilement des objets change également sur le document. Le rectangle bleu recouvre à
présent l’objet bitmap et l’objet de la bordure.
4
Si vous voulez que l’objet de la bordure soit l’objet placé au sommet, sélectionnez sa vignette et
faites-la glisser en haut du panneau Calques, au-dessus du rectangle bleu.
Créer et modifier un masque
Maintenant que vous avez effectué différentes modifications au niveau de l’image Voiture
classique, vous allez devoir effectuer une dernière procédure pour lui conférer une apparence de
transparence graduelle.
Didacticiel des bases de la conception graphique
29
Dans Fireworks, vous pouvez appliquer deux types de masques : les masques vectoriels et les
masques bitmap. Pour ce didacticiel, vous appliquerez un masque bitmap simple à l’image de la
voiture. Puis, vous le modifierez en lui assignant une trame de dégradé. Les pixels du masque
afficheront ou masqueront l’image de la voiture, selon la valeur de leur échelle de gris.
Appliquer un masque
Pour commencer, vous allez appliquer à l’image de la voiture un masque bitmap vide et blanc. Un
masque blanc présente un objet ou une image sélectionnée, attendu que les pixels noirs d’un
masque masquent un objet ou une image sélectionnée.
Vous dessinerez également sur le masque afin de donner l’impression que l’image de la voiture
s’évanouit à l’arrière-plan.
1
Avec l’outil Pointeur, sélectionnez l’image bitmap.
2
Cliquez sur le bouton Ajouter masque, dans la partie inférieure du panneau Calques.
Un masque vide transparent est ajouté à l’image sélectionnée. Vous pouvez voir que le masque
a été ajouté en jetant un oeil à la vignette du masque, dans le panneau Calques. La surbrillance
jaune autour de la vignette du masque indique qu’elle est sélectionnée.
La vignette du masque
L’objet masque
Modifier le masque
Vous allez maintenant assigner à l’image bitmap une apparence transparente en ajoutant au masque
une trame de dégradé.
1
La vignette du masque sélectionnée dans le panneau Calques, cliquez et maintenez enfoncé le
bouton de la souris au niveau de l’outil Pot de peinture dans la section Bitmap du panneau
Outils. Choisissez l’outil Dégradé à partir du menu contextuel qui apparaît.
2
Cliquez sur la case Couleur de remplissage dans le Vérificateur de propriétés.
La fenêtre contextuelle Modifier le dégradé s’ouvre.
30
Chapitre 1
3
Choisissez Blanc, Noir en bas du menu contextuel Réglage prédéfini.
La rampe de couleurs et les nuanciers se modifient afin de refléter le nouveau paramètre. Les
nuanciers de couleurs localisés juste au-dessous de la rampe de couleurs vous permettent de
modifier les couleurs de dégradé.
Rampe de couleurs
Nuanciers de couleurs
4
Faites glisser le nuancier de couleurs de gauche (blanc) d’environ 1/4 de la distance vers la
droite afin d’ajuster le dégradé.
5
Cliquez en dehors de la fenêtre contextuelle Modifier le dégradé afin de la fermer.
6
Sur le document, faites glisser le pointeur de dégradé au-dessus de l’image bitmap, comme
présenté dans l’illustration suivante. Lorsque vous effectuez le glissement, vous voyez
directement l’application de l’effet à l’écran. Cela vous permet de définir l’angle et la distance
qui seront appliqués au dégradé.
7
Relâchez le bouton de la souris.
Le masque est modifié avec la trame de dégradé que vous avez créée. Le masque affecte l’image
de la voiture en lui donnant une apparence transparente graduellement. La vignette du masque
du panneau Calques affiche la trame de dégradé que vous avez appliquée.
Didacticiel des bases de la conception graphique
31
8
Choisissez l’outil Pointeur et cliquez sur la vignette du masque dans le panneau Calques.
Le Vérificateur de propriétés montre que le masque a été appliqué en utilisant son aspect
échelle de gris. Les pixels sombres du masque désactivent l’image de la voiture, tandis que les
pixels plus clairs du masque affichent la voiture.
Créer et éditer du texte
Vous allez ensuite ajouter du texte dans le document et appliquer des propriétés de texte en
utilisant le Vérificateur de propriétés. Vous allez créer quatre blocs de texte, deux pour le titre de
l’annonce et deux pour le corps du texte.
Créer le texte du titre
Vous allez commencer par créer le texte du titre pour l’annonce de location de voitures.
1
Choisissez l’outil Texte dans la partie Vecteur du panneau Outils, puis déplacez le pointeur sur
la fenêtre du document.
Le pointeur prend l’aspect d’une poutre en I, et le Vérificateur de propriétés affiche les
propriétés du texte.
Taille
Couleur de remplissage
Police
Boutons de style
Interlignage
Echelle horizontale
2
Boutons d’alignement
Dans le Vérificateur de propriétés, exécutez les actions suivantes :
• Choisissez Times New Roman à partir du menu contextuel Police.
• Tapez 85 pour la taille de la police.
• Cliquez sur la case Couleur de remplissage. Le pointeur prend l’aspect d’une pipette. Avec la
pipette, cliquez sur le rectangle bleu du document.
La fenêtre contextuelle des couleurs se ferme, et la case Couleur de remplissage se transforme
afin de refléter la couleur choisie.
32
Chapitre 1
• Assurez-vous qu’aucun des boutons de style (Gras, Italique, Souligné) ne soit sélectionné.
• Cliquez sur le bouton Alignement à gauche.
3
Avec le pointeur en forme de trait vertical, cliquez une fois au centre du document.
Un bloc de texte vide est créé.
Le cercle vide situé dans le coin supérieur droit du bloc de texte indique que le bloc de texte se
redimensionne automatiquement. Dans Fireworks, un bloc de texte à redimensionnement
automatique ajuste sa largeur en se basant sur la ligne de texte la plus longue du bloc.
Indicateur de redimensionnement automatique
4
Tapez Vintage dans le bloc de texte.
La largeur du bloc de texte augmente lorsque vous tapez.
5
Cliquez une fois en dehors du bloc de texte afin d’appliquer votre saisie de texte.
Le bloc de texte reste sélectionné et l’outil Texte demeure l’outil sélectionné. Le cercle vide du
bloc de texte n’est plus visible. Cet indicateur est visible uniquement lorsque vous saisissez ou
lorsque vous modifiez du texte.
6
Choisissez l’outil Pointeur et faites glisser le texte afin de le positionner conformément à
l’illustration suivante.
7
Cliquez en dehors du bloc de texte pour le désélectionner, et choisissez à nouveau l’outil Texte.
8
Dans le Vérificateur de propriétés, choisissez la police Arial et la taille de police 12.
9
Cliquez à nouveau sur le document, en-dessous du bloc de texte que vous venez juste de créer,
et tapez CLASSIC RENTALS en majuscules.
Didacticiel des bases de la conception graphique
33
10
Choisissez l’outil Pointeur pour appliquer la saisie de texte.
En sélectionnant un autre outil du panneau Outils, les saisies et les modifications de texte sont
appliquées comme si vous cliquiez en dehors d’un bloc de texte. En appuyant sur la touche
Echap, vous atteindriez le même résultat.
11
Faites glisser le nouveau bloc de texte afin de le positionner juste en-dessous du bloc de texte
Vintage, comme présenté dans l’illustration suivante.
12
Cliquez en dehors du bloc de texte pour le désélectionner.
Créer le corps du texte
Vous allez maintenant créer deux blocs de texte qui constitueront le corps du texte de cette
annonce.
1
Choisissez l’outil Texte.
2
Cette fois, au lieu de cliquer simplement sur le document, effectuez un glissement afin de
tracer une sélection avec le pointeur en forme de trait vertical, comme cela est présenté dans
l’illustration suivante.
Un bloc de texte apparaît. Le carré vide situé dans le coin supérieur droit indique que le bloc de
texte a une largeur fixe, définie par la zone de sélection que vous avez tracée. Les blocs de texte
aux largeurs fixes conservent la largeur que vous spécifiez, quelle que soit la quantité de texte
que vous saisissez. Le poignée d’angle vide du coin indique une commande à bascule. En
double-cliquant dessus, un bloc de texte permutera entre redimensionnement automatique et
largeur fixe.
34
Chapitre 1
3
Tapez le texte suivant sans saut de ligne :
Indulge yourself by traveling in a Vintage classic automobile, with a chauffeur to whisk you
to any destination.
Conseil : Si vous visionnez ce didacticiel en ligne, il vous suffit de copier et coller le texte ci-dessus dans le bloc
de texte de Fireworks.
Le texte se place dans le bloc de texte que vous avez créé. Le bloc de texte s’étend verticalement
et non pas horizontalement.
4
Choisissez l’outil Pointeur et cliquez en dehors du bloc de texte pour le désélectionner. Ensuite,
choisissez à nouveau l’outil Texte.
5
Dans le Vérificateur de propriétés, cliquez sur la case Couleur de remplissage et choisissez le
blanc comme couleur de texte.
6
Cliquez dans le coin inférieur gauche du document.
Un nouveau bloc de texte apparaît en haut du rectangle bleu.
7
Tapez les mots suivants en majuscules, sans entrer aucun retour à la ligne :
SPORTS - LUXURY - CONVERTIBLE - LIMOUSINE - ANTIQUE - NEO-CLASSIC EXOTIC - ROADSTER
Conseil : Si vous visionnez ce didacticiel en ligne, il vous suffit de copier et coller le texte ci-dessus dans le bloc
de texte de Fireworks.
8
Choisissez l’outil Pointeur et repositionnez le bloc de texte comme indiqué ci-dessous.
Didacticiel des bases de la conception graphique
35
Tout texte que vous créez dans Fireworks peut être modifié, comme dans un traitement de texte.
Pour modifier un texte, double-cliquez simplement sur un bloc de texte avec l’outil Pointeur,
sélectionnez le texte que vous voulez changer et écrasez le texte. Ou alors, cliquez n’importe où
dans le bloc de texte avec le pointeur en forme de trait vertical afin d’ajouter un nouveau texte.
Modifier les propriétés des textes
Maintenant que les blocs de texte ont été créés, vous allez utiliser le Vérificateur de propriétés
pour changer diverses propriétés des textes.
1
Sélectionnez le bloc de texte Vintage.
Les propriétés du bloc de texte apparaissent dans le Vérificateur de propriétés. Ces propriétés
sont similaires à celles affichées lorsque l’outil Texte est sélectionné.
2
Dans le Vérificateur de propriétés, exécutez les actions suivantes :
• S’il n’est pas déjà sélectionné, choisissez Anticrénelage lissé dans le menu contextuel Niveau
d’anticrénelage. L’anticrénelage lisse les bords du texte afin que les caractères du texte apparaissent
plus propres et plus lisibles.
En général, les polices serif Times New Roman avec une taille supérieure à 45 points sont plus
lisibles lorsque l’anticrénelage lissé est activé. De même, les polices sans serif Arial avec une
taille supérieure à 32 points sont plus lisibles lorsque l’anticrénelage lissé est activé.
Conseil : Le terme serif se réfère aux toutes petites lignes (souvent comparées à des « pieds ») attachées aux
caractères des polices telles que Times New Roman. Arial est considérée comme une police sans serif car ses
caractères ne contiennent pas de serif.
• Dans le Vérificateur de propriétés, fixez l’option Echelle horizontale à 89 % et appuyez sur
Entrée.
Les caractères du bloc de texte Vintage deviennent plus minces. L’échelle horizontale étire ou
diminue horizontalement les caractères du texte sélectionné. Le paramètre par défaut est
100 %. Toute valeur supérieure étirera horizontalement le texte et toute valeur inférieure
diminuera sa largeur.
36
3
Faites glisser le bloc de texte Vintage de manière à le positionner conformément à l’illustration
suivante.
4
Sélectionnez le bloc de texte Locations classiques.
Chapitre 1
5
Dans le Vérificateur de propriétés, exécutez les actions suivantes :
• Cliquez sur la case Couleur de remplissage, entrez la valeur de couleur FF6600 et appuyez sur
Entrée.
• Cliquez sur le bouton Gras.
• Choisissez Anticrénelage net à partir du menu contextuel Niveau d’anticrénelage.
En général, les polices sans serif telles que Arial avec une taille située entre 12 et 18 points, sont
plus lisibles lorsque l’anticrénelage net est activé. De même, les polices serif avec une taille
située entre 24 et 32 points, sont plus lisibles lorsque l’anticrénelage net est activé.
6
Faites glisser le bloc de texte afin de le repositionner tel que cela est présenté ci-dessous.
7
Sélectionnez le bloc de texte Indulge yourself.
8
Dans le Vérificateur de propriétés, exécutez les actions suivantes :
•
•
•
•
•
•
Définissez une taille de police de 13.
Choisissez le noir comme couleur de texte.
Cliquez sur le bouton Alignement à droite.
Choisissez Anticrénelage net à partir du menu contextuel Niveau d’anticrénelage.
Fixez l’option Echelle horizontale à 88 %.
Fixez l’option Interlignage à 150 % et appuyez sur Entrée. L’interlignage détermine l’espace
entre les lignes d’un texte. L’interlignage normal d’un texte est de 100 %. Toute valeur
supérieure à 100 % augmente l’espace entre les lignes, et toute valeur inférieure rapproche les
lignes les unes des autres.
Didacticiel des bases de la conception graphique
37
9
Faites glisser un des points d’ancrage du bloc de texte afin de changer ses dimensions, de
manière à ce qu’il s’apparente à l’illustration ci-dessous. Si nécessaire, faites glisser tout le bloc
de texte afin de le repositionner, lui aussi.
10
Sélectionnez le bloc de texte en bas du document.
11
Dans le Vérificateur de propriétés, exécutez les actions suivantes :
• Définissez une taille de police de 13.
• Choisissez Anticrénelage net à partir du menu contextuel Niveau d’anticrénelage.
• Fixez l’option Echelle horizontale à 75 % et appuyez sur Entrée.
12
Si nécessaire, repositionnez le bloc de texte.
Ajouter une ombre portée
Vous pouvez appliquer des effets en direct au texte. Vous allez ajouter une ombre portée au texte
Vintage en utilisant les outils d’effets en direct dans le Vérificateur de propriétés.
1
Sélectionnez le bloc de texte Vintage.
2
Dans le Vérificateur de propriétés, cliquez sur le bouton Ajouter l’effet. A partir du menu
contextuel des effets du panneau Effet, choisissez Ombre et néon > Ombre portée.
Les options du nouvel effet apparaissent dans une fenêtre contextuelle.
3
Entrez 5 pour la distance et 60 % pour l’opacité. Cliquez en dehors de la fenêtre contextuelle
pour la fermer.
Un effet d’ombre portée est ajouté au bloc de texte Vintage.
4
38
Cliquez sur une zone vide de la fenêtre du document pour désélectionner le bloc de texte.
Chapitre 1
Exporter le document
Vous avez créé un objet vectoriel et modifié ses propriétés, importé une image bitmap et effectué
des modifications à ses pixels, et vous avez également créé et formaté un texte. Vous êtes prêt à
optimiser et à exporter le document.
Optimiser le graphisme
Avant d’exporter un document Fireworks, vous devez toujours commencer par l’optimiser.
L’optimisation assure l’exportation d’un graphisme avec la meilleure compression et qualité
possibles.
1
Exécutez l’une des actions suivantes pour ouvrir le panneau Optimiser, s’il n’est pas déjà
ouvert :
• Choisissez Fenêtre > Optimiser.
• Si le panneau est minimisé à droite de l’écran, cliquez sur la flèche d’extension afin de voir
l’intégralité du panneau.
2
Choisissez JPEG, Qualité supérieure à partir du menu contextuel Paramètres.
Les options du panneau se modifient afin de refléter le nouveau paramètre.
Ces paramètres peuvent être modifiés, mais pour ce didacticiel, vous utiliserez les paramètres
par défaut.
Didacticiel des bases de la conception graphique
39
3
Cliquez sur l’onglet Aperçu en haut de la fenêtre du document.
L’onglet Aperçu affiche votre document tel qu’il apparaîtrait s’il était exporté avec les paramètres
courants.
Taille du fichier
Temps de chargement
En haut à droite de la fenêtre, Fireworks affiche la taille que prendrait le fichier une fois exporté,
et l’estimation du temps nécessaire pour afficher le graphisme s’il était visionné sur le Web.
40
Chapitre 1
Exporter le graphisme
Vous avez optimisé votre graphisme, vous êtes donc prêt à l’exporter sous la forme d’un fichier JPEG.
1
Choisissez Fichier > Exporter.
La boîte de dialogue Exporter s’ouvre.
Le nom de fichier listé possède une extension .jpg. Fireworks choisit ce format de fichier, car
vous l’avez sélectionné dans le panneau Optimiser.
2
Naviguez dans le dossier Tutorials de votre bureau et ouvrez le dossier Tutorial1/Exporter.
3
Assurez-vous que le menu contextuel Type (Windows) ou Enregistrer sous (Macintosh) lit
Images uniquement, et cliquez sur Enregistrer.
Le fichier JPEG est exporté vers l’emplacement que vous avez spécifié.
Rappelez-vous que le fichier PNG est votre fichier source ou fichier de travail. Bien que vous
ayez exporté votre document dans le format JPEG, vous devez également enregistrer le PNG de
manière à ce que toute modification effectuée par vos soins se reflète également dans le fichier
source.
4
Choisissez Fichier > Enregistrer pour enregistrer les modifications dans le fichier PNG.
5
Choisissez Fichier > Fermer.
Didacticiel des bases de la conception graphique
41
Visionner le document exporté
Le nouveau fichier créé au cours du processus d’exportation est localisé dans le dossier que vous
avez spécifié.
1
Dans Fireworks, choisissez Fichier > Ouvrir et placez-vous dans le dossier Export.
Fireworks a créé à cet emplacement un fichier nommé vintage.jpg.
2
Sélectionnez vintage.jpg et cliquez sur Ouvrir.
Le graphisme s’ouvre dans une nouvelle fenêtre du document de Fireworks. Tous vos objets du
panneau Calques ont été fusionnés. Lorsque des objets sont fusionnés, ils sont regroupés dans
un seul objet et ne sont pas modifiables en tant qu’objets séparés.
Le Vérificateur de propriétés affiche les propriétés d’un bitmap. Tous les effets en direct et les
autres attributs que vous avez appliqués en utilisant le Vérificateur de propriétés ne sont plus
disponibles pour le bitmap sélectionné.
Le document présente de cette façon, car Fireworks doit fusionner l’image et toutes ses
propriétés lorsque vous choisissez de l’exporter vers le format JPEG. Toutefois, vous disposez
toujours de votre fichier PNG source, donc, si vous devez travailler davantage sur le projet,
vous pouvez toujours ouvrir le fichier PNG et tous les objets demeureront modifiables.
3
Choisissez Fichier > Ouvrir et sélectionnez vintage.png dans le dossier Tutorial1. Cliquez sur
Ouvrir.
Dans le panneau Calques, l’ensemble de vos objets sont à nouveau disponibles en tant
qu’objets séparés. Chaque objet est modifiable, accompagné de ses propriétés.
4
Cliquez sur chaque objet.
Le Vérificateur de propriétés affiche les différentes options pour chacun des objets que vous
sélectionnez.
42
Chapitre 1
5
Sélectionnez le texte Vintage du document.
L’effet en direct Ombre portée de cet objet texte apparaît dans le Vérificateur de propriétés.
Vous pouvez maintenant apprécier les avantages apportés par l’utilisation d’un fichier PNG
Fireworks en qualité de fichier source. Vous pouvez effectuer des modifications à un document
et il reste toujours modifiable, même si vous choisissez d’exporter le document vers un autre
format tel que le JPEG.
Récapitulatif
Vous avez accompli les tâches requises pour créer des graphismes dans Fireworks. Vous avez appris
à créer et enregistrer un nouveau document, et à ajouter des objets vectoriels ainsi que des
graphismes bitmap dans votre document. Vous avez également appliqué des effets en direct,
travaillé avec des calques, créé un masque et ajouté du texte. Pour terminer, vous avez appris à
exporter le graphisme terminé.
Pour obtenir des informations détaillées sur certaines des fonctions mentionnées dans ce
didacticiel, et pour obtenir des informations sur d’autres fonctions de Fireworks, référez-vous à
l’index Utilisation de Fireworks ou consultez l’Aide de Fireworks. Pour obtenir d’autres didacticiels
pour Fireworks, visitez le site Web de Macromedia à l’adresse http://www.macromedia.com/fr/.
Assurez-vous également de visiter le centre d’assistance de Macromedia (qui a été gratifié d’un
prix) à l’adresse http://www.macromedia.com/fr/support/.
Pour apprendre comment utiliser Fireworks afin de créer des pages Web interactives, voir
« Didacticiel des bases de la conception Web » à la page 45. Vous utiliserez l’image JPEG que vous
avez exportée dans ce document et vous l’importerez vers une page Web. Vous apprendrez également
comment créer de l’interactivité sur le Web via les boutons, les survols et les menus contextuels.
Didacticiel des bases de la conception graphique
43
44
Chapitre 1
CHAPITRE 2
Didacticiel des bases de la conception Web
Ce didacticiel vous guidera à travers les tâches de base de la conception des graphismes et des
intéractions Web de Macromedia Fireworks MX. Vous acquerrez une expérience pratique en
utilisant l’application de graphismes Web leader dans le monde de l’industrie, et vous apprendrez
tout le long des concepts de création pour le Web.
Objectifs du didacticiel
Ce didacticiel se présente sous la forme d’un processus type de conception de pages Web
Fireworks. Vous apprendrez à :
•
•
•
•
•
•
•
•
•
•
•
Copier le dossier Tutorials
Affichage de la page Web finale
Ouvrir le fichier source
Importer un graphisme
Découper le document
Créer un survol par glisser-déposer
Créer et modifier des boutons pour constituer une barre de navigation
Créer et modifier un menu contextuel
Optimiser le document
Exporter du HTML
Tester le fichier terminé
Prérequis
Pour pouvoir utiliser ce didacticiel, vous devez être familier avec la conception graphique sous
Fireworks ou toute autre application graphique bitmap ou vectorielle. Vous devez disposer d’un certain
nombre de connaissances de base sous Fireworks « Didacticiel des bases de la conception graphique » à
la page 15. Plus précisément, vous devez être capable d’effectuer les tâches suivantes avec Fireworks :
•
•
•
•
•
•
Sauvegarde d’un document
Sélection d’objets
Modification de propriétés d’objets
Affichage et utilisation de panneaux
Travailler avec des calques et des objets
Création et modification de texte
45
• Exportation d’un graphisme
Copier le dossier Tutorials
Avant de commencer, vous devrez créer une copie du dossier Tutorials. Vous pourrez ainsi enregistrer
votre travail tout en vous permettant, vous ou un autre utilisateur, de terminer le didacticiel plus tard
en utilisant les fichiers originaux.
Si vous avez terminé le didacticiel des bases de la conception graphique, vous avez déjà copié le
dossier Tutorials et vous pouvez alors ignorer cette étape.
1
Ouvrez le dossier de l’application Fireworks de votre disque dur.
Remarque : Si vous ne pouvez pas voir le dossier de votre application Fireworks, vous avez certainement un
accès limité aux fichiers de votre système. Vous pouvez charger les fichiers nécessaires à ce didacticiel depuis le
Centre d’assistance sur le Web à l’adresse http://www.macromedia.com/fr/support/.
2
Faites une copie du dossier Tutorials sur votre bureau.
Affichage de la page Web finale
Vous pouvez alors observer le fichier du didacticiel tel qu’il sera lorsque vous aurez terminé le
didacticiel, lorsque vous l’aurez exporté en tant que fichier HTML.
1
Démarrez votre navigateur Web.
2
Ouvrez le dossier Tutorials que vous avez copié sur votre bureau et recherchez Tutorial2/
Complete.
Remarque : Certaines versions de Microsoft Windows cachent par défaut les extensions de fichier reconnues. Si
vous n’avez pas modifié cette option, les fichiers du dossier Complete s’afficheront sans les extensions. Lorsque
l’on traite des graphismes pour le Web, il est préférable de pouvoir voir les extensions de fichier. Reportez-vous à
l’aide de Windows pour obtenir plus d’informations concernant l’affichage des extensions de fichier.
3
Sélectionnez le fichier final.htm et faites-le glisser vers la fenêtre du navigateur actif.
Dans le cadre de ce didacticiel, vous devez compléter la pré-version d’une page Web pour
Global, une société de location de voiture.
4
Déplacez le pointeur sur la grande image Vintage.
Lorsque le pointeur passe au-dessus de l’image Vintage, une autre image de la page est
modifiée. C’est ce que l’on appelle un survol non superposé.
5
Déplacez le pointeur sur la barre de navigation située en haut de la page Web. Les boutons changent
en fonction du bouton situé sous le pointeur. Cliquez sur le bouton Taux pour tester le lien.
Le lien vous envoie vers la page de Fireworks à l’adresse http://www.macromedia.com/fr/. Au
fur et à mesure du didacticiel, vous saisirez votre propre URL pour ce lien et d’autres éléments.
6
Utilisez le bouton Retour de votre navigateur pour retourner à la page final.htm.
7
Déplacez le pointeur sur l’image Aéroports mondiaux. Un menu contextuel apparaît. Survolez avec
le pointeur chacun des éléments du menu ainsi que le premier élément qui contient un sous-menu.
8
Cliquez sur Etats-Unis pour tester le lien et retournez à la page final.htm.
9
Après avoir consulté la page Web, vous pouvez la conserver ouverte comme référence ou bien la
refermer.
Remarque : Le dossier Complete inclut également le document Fireworks à partir duquel le fichier HTML a été
généré. Pour afficher ce document, double-cliquez sur final.png.
46
Chapitre 2
Ouvrir le fichier source
Maintenant que vous avez consulté le fichier final.htm à partir d’un navigateur, vous êtes prêt à
commencer votre projet.
1
A partir de Fireworks, choisissez Fichier > Ouvrir.
2
Ouvrez le dossier Didacticiel se trouvant sur votre bureau. A partir du dossier Tutorial2/Start,
ouvrez le fichier global.png.
Remarque : Au fur et à mesure du didacticiel, veillez à enregistrer fréquemment les modifications en choisissant
Fichier > Enregistrer.
Importer un graphisme
Maintenant que vous avez ouvert la conception incomplète de la page Web Global, vous allez
importer un graphisme.
Si vous avez terminé le didacticiel des bases de la conception graphique avec Fireworks, vous
utiliserez le fichier JPEG que vous avez créé. Si ce n’est pas le cas, une image achevée vous est
fournie.
1
Choisissez Fichier > Importer et suivez les étapes suivantes :
• Si vous avez terminé le didacticiel des bases de la conception graphique, recherchez le dossier
Tutorial1/Export.
• Si vous n’avez pas terminé le didacticiel des bases de la conception graphique, recherchez le
dossier Tutorial2/Assets.
2
Sélectionnez vintage.jpg et cliquez sur Ouvrir.
3
Cliquez n’importe où dans l’espace vide, donc blanc, du document.
L’image apparaît, sélectionnée.
4
Faites glisser l’image, de façon à la positionner conformément à l’illustration suivante.
Didacticiel des bases de la conception Web
47
Découper le document
Les concepteurs Web utilisent un processus nommé découpage pour couper des documents Web
en morceaux plus petits, et ce pour diverses raisons. Les petites images se téléchargent plus
rapidement sur le Web, de telle sorte que les utilisateurs peuvent observer un chargement
progressif de la page au lieu d’attendre le chargement d’une grande image. En outre, le découpage
permet d’optimiser différemment diverses parties d’un document. Le découpage est également
nécessaire pour ajouter de l’interactivité.
Vous allez créer ici des découpes pour certains éléments graphiques d’une page Web. Plus tard,
vous ajouterez de l’interactivité à ces découpes et vous leur définirez des paramètres d’optimisation
et de compression.
1
L’image Vintage toujours sélectionnée, choisissez Edition > Insertion > Découpe.
Une découpe est insérée en haut de l’image. Les découpes possèdent une superposition verte
par défaut.
2
Cliquez en dehors de la découpe pour la désélectionner.
Les repères de découpe rouges définissent la découpe, entourant la largeur et la hauteur du
document. Lorsque vous avez créé la découpe, Fireworks a découpé automatiquement pour
vous le reste du document.
Remarque : Si vous ne voyez pas les repères de découpe rouges, choisissez Affichage > Repères de découpe.
3
48
A l’aide du bouton Maj, cliquez sur les graphismes Aéroports mondiaux et Super tarifs de
week-end à gauche du document afin de les sélectionner simultanément.
Chapitre 2
4
Choisissez Edition > Insertion > Découpe. Dans la boîte de dialogue qui apparaît, choisissez
Multiple. Cela vous permet d’insérer simultanément plusieurs découpes.
Les découpes sont insérées en haut de chaque graphisme sélectionné. L’ajout de découpes
supplémentaires change la mise en page des découpes automatiques dans le reste du document.
5
Cliquez en dehors des découpes pour les désélectionner.
Il y a maintenant un espace entre la découpe Vintage et la découpe Great Weekend Rates. Il
s’agit d’une mince découpe automatique.
6
Placez le pointeur sur le repère de découpe gauche de l’image Vintage.
Le pointeur se transforme en un pointeur de déplacement du repère, indiquant que vous
pouvez saisir le repère de la découpe et le faire glisser. En faisant glisser le repère d’une découpe,
vous pouvez changer la forme d’une découpe.
7
Faites glisser le repère de la découpe vers la gauche, jusqu’à ce qu’il atteigne le repère de la
découpe droite du graphisme Super tarifs de week-end, comme cela est montré dans
l’illustration ci-dessous.
Didacticiel des bases de la conception Web
49
8
Relâchez le bouton de la souris.
La découpe Vintage s’étend à présent tout le long de la découpe Super tarifs de week-end, et la
minuscule découpe automatique est supprimée. Représentez-vous les découpes comme étant
les cellules d’un tableau dans un tableur ou un traitement de texte. Le fait de glisser les repères
d’une découpe pour redimensionner une découpe dans Fireworks provoque le
redimensionnement d’autres découpes, tout comme le glissement des bords d’une cellule d’un
tableau redimensionne d’autres cellules du tableau. Si vous faites glisser un repère de découpe
sur et au-delà de découpes automatiques, les repères de découpe fusionnent et les découpes
automatiques inutiles sont supprimées.
9
Si le panneau Calques est réduit ou invisible, cliquez sur sa flèche d’extension ou choisissez
Fenêtre > Calques.
Le calque Web se trouve en haut du panneau. Il contient tous les objets Web d’un document.
Les trois découpes que vous avez créées sont listées ici. Dans tout document, le calque Web est
toujours le calque le plus haut. Il ne peut être ni déplacé, ni renommé ou supprimé.
Créer un survol par glisser-déposer
Maintenant que vous avez découpé votre document, vous êtes prêt à ajouter de l’interactivité.
Pour créer un survol par glisser-déposer, vous utiliserez deux des découpes insérées lors de la
précédente étape.
Il existe deux sortes de survols : les survols simples et les survols non superposés. Dans un
navigateur Web, un survol simple affiche une image différente lorsque le pointeur passe pardessus. Un survol non superposé engendre le changement d’une autre image dans une autre partie
de l’écran lorsque le pointeur passe par-dessus. Vous créerez ici un survol non superposé.
50
Chapitre 2
1
Sélectionnez la découpe recouvrant l’image Vintage.
L’icône ronde au centre de la découpe est appelée poignée de comportement. Elle vous permet
d’ajouter des comportements ou de l’interactivité à une découpe. Si vous êtes familier avec les
comportements dans Macromedia Dreamweaver, vous reconnaîtrez de nombreux
comportements identiques dans Fireworks.
La poignée de comportement
Les comportements peuvent également être appliqués par l’intermédiaire du panneau
Comportements. Mais pour une interactivité simple telle que les survols, la poignée de
comportement d’une découpe est une méthode plus simple et rapide pour appliquer un
comportement.
2
Faites glisser la poignée de comportement sur la découpe Great Weekend Rates et relâchez le
bouton de la souris.
Une ligne de comportement bleue s’étend de la poignée de comportement au coin de la
découpe, et la boîte de dialogue Permuter les images apparaît.
Didacticiel des bases de la conception Web
51
3
Dans le menu contextuel Permuter l’image à partir de, assurez-vous que Image 2 soit
sélectionné, puis cliquez sur OK.
Dans un navigateur, si le pointeur se déplace sur la découpe Vintage, une image dans Image 2
remplacera le graphisme Great Weekend Rates. L’image Vintage est considérée comme étant
l’élément déclencheur de l’effet de survol, et l’image qui remplace le graphisme Super tarifs de
week-end comme l’image de permutation.
4
Si le panneau Images est réduit ou s’il n’est pas visible, cliquez sur la flèche d’extension du groupe de
panneaux Images et Historique, puis cliquez sur l’onglet Images, ou choisissez Fenêtre > Images.
Le panneau Images liste les images disponibles dans le document actif. Il n’y a actuellement
qu’une seule image dans le document. Le panneau Images est généralement utilisé pour
l’animation. Dans le cas de survols, il est utilisé pour conserver les images de permutation.
5
Cliquez sur le bouton Nouvelle image / Dupliquer dans la partie inférieure du panneau.
Une nouvelle image nommée Image 2 est créée dans le panneau Images. L’espace de travail est
maintenant vide, à l’exception des découpes que vous avez insérées.
Aucun objet n’est listé dans le panneau calques, excepté le contenu du calque Web. Cela est dû
au fait que, par défaut dans Fireworks, les calques ne sont pas partagés par toutes les images, à
l’exception du calque Web qui est toujours partagé. Les objets du calque Web apparaissent dans
chaque image du document, ainsi, toute modification que vous imposez aux objets Web, telle
que les découpes, affecte toutes les images.
52
Chapitre 2
6
Choisissez Fichier > Importer et recherchez le dossier Tutorial2/Assets. Sélectionnez le fichier
nommé rates.gif et cliquez sur Ouvrir.
7
Placez le pointeur d’insertion sur la découpe, là où le graphisme Super tarifs de week-end était
localisé dans Image 1. Alignez le mieux possible le pointeur avec le coin supérieur gauche de la
découpe.
8
Cliquez pour insérer le graphisme.
Le graphisme Vintage Classic Rates apparaît.
9
Cliquez sur l’onglet Aperçu en haut de la fenêtre du document, puis masquez les découpes du
document en cliquant sur le bouton Masque les découpes et les références dans la partie Web
du panneau Outils.
Déplacez le pointeur sur l’image Vintage. L’image Super tarifs de week-end change lorsque le
pointeur survole l’image Vintage.
Conseil : Si l’image semble un peu sauter ou si la transition entre les images ne semble pas fluide, ajustez la
position de l’image de permutation dans Image 2, affichage d’origine. Pour un positionnement précis, activez
Séquence de calques dans le panneau Images, ou vérifiez que les coordonnées X et Y de l’image Vintage
Classic Rates sont les mêmes que celles de l’image Great Weekend Rates dans le Vérificateur de propriétés.
Lorsque vous avez terminé, retournez dans Image 1 et, si nécessaire, désactivez Séquence de calques. Pour en
apprendre davantage sur ces options, référez-vous à l’index de Utilisation de Fireworks ou bien consultez l’aide
de Fireworks.
10
Lorsque vous avez terminé, cliquez sur l’onglet Original en haut de la fenêtre du document
pour revenir à l’affichage normal, et réactivez les découpes en cliquant sur le bouton Affiche les
découpes et les références du panneau Outils.
Vous venez de créer un survol non superposé. Les survols simples sont créés de manière similaire :
lorsque vous faites glisser la poignée de comportement d’une découpe, ce que vous avez fait à
l’étape 2, il vous suffit de la faire glisser sur la même découpe.
Didacticiel des bases de la conception Web
53
En général, les concepteurs Web ajoutent un effet de survol à une image pour fournir aux
utilisateurs un signe visuel leur indiquant que l’on peut cliquer sur l’image. Si le site Web Global
était un site réél sur Internet, vous voudriez certainement que les images Vintage et Tarifs
renvoient vers d’autres pages fournissant davantage d’informations. Pour ce didacticiel, vous
laisserez le survol non superposé tel qu’il est. Dans la partie suivante, vous allez pouvoir
expérimenter l’insertion de liens vers d’autres objets Web.
Créer et modifier des boutons pour constituer une barre de
navigation
Les boutons sont des objets Web qui renvoient vers d’autres pages Web. Leur apparence change
généralement selon le mouvement de la souris de l’utilisateur ou d’autres actions, telles que le clic
de souris, un signe visuel témoignant d’une interactivité. Par exemple, si le pointeur passe audessus du bouton ou si l’on a cliqué dessus, l’effet de survol de ce bouton sera différent.
Une barre de navigation est une série de boutons qui apparaissent sur une ou plusieurs pages d’un
site Web. En général, tous les boutons d’une barre de navigation ont la même apparence, mis à
part leur texte.
Vous allez créer ici une barre de navigation pour le site Web Global.
Créer le symbole d’un bouton
L’image et le texte initial d’un bouton ont déjà été créés à votre place. Vous convertirez cette image
en un symbole de bouton.
1
Dans Fireworks, sélectionnez l’image du bouton (nommée BUTTON TEXT) dans le coin
supérieur gauche du document.
2
Choisissez Modification > Symbole > Convertir en symbole.
La boîte de dialogue Propriétés du symbole s’ouvre.
3
Tapez My Button dans la zone de texte Nom, choisissez le type de symbole Bouton et cliquez
sur OK.
Une découpe apparaît en haut du graphisme du bouton, et une icône raccourci apparaît à gauche
de la découpe. Cela signifie que la sélection dans l’espace de travail est une occurrence du symbole
que vous venez tout juste de créer. Les symboles sont comme des copies maître de vos images.
Lorsque vous changez un symbole, toutes les occurrences de ce symbole présentes dans votre
document changent automatiquement. Les symboles se trouvent dans la bibliothèque.
54
Chapitre 2
4
Si le panneau Bibliothèque est minimisé ou s’il n’est pas visible, cliquez sur la flèche d’extension
du groupe de panneaux Actifs et cliquez sur l’onglet Bibliothèque, ou bien choisissez Fenêtre >
Bibliothèque.
Votre symbole est listé dans le panneau Bibliothèque.
Créer des états de bouton
Vous allez ensuite créer différents états pour le symbole du bouton. Les états des boutons
correspondent aux différentes apparences des boutons lorsqu’il apparaissent dans un navigateur
Web, lorsque le pointeur le survole ou lorsque l’on clique dessus.
1
Double-cliquez sur l’instance du bouton que vous avez créée.
Conseil : Une alternative consiste à double-cliquer sur l’aperçu du bouton dans le panneau Bibliothèque ou sur
l’icône du symbole située à côté de ce dernier, dans la liste des symboles du panneau Bibliothèque.
L’éditeur de boutons s’ouvre avec l’image du bouton affichée dans la zone de travail.
Didacticiel des bases de la conception Web
55
2
Cliquez sur les onglets placés en haut de l’éditeur de boutons.
Les quatre premiers onglets représentent les états des boutons. Le dernier onglet, Zone active,
représente la zone active du bouton, autrement dit la partie qu’un utilisateur doit cliquer ou
survoler pour activer les états du bouton. La zone active est également la zone d’inversion du
bouton, autrement dit la zone qui change avec chacun des états du bouton. Il n’y a
actuellement aucun état pour le symbole du bouton mis à part l’état Relevé, l’état du bouton
avant qu’il ne soit survolé ou cliqué.
3
Cliquez sur l’onglet Au-dessus, en haut de l’éditeur de boutons, puis cliquez sur le bouton
Copier le graphisme Relev.
Le graphisme du bouton est copié à partir de l’onglet Relevé. L’état Au-dessus d’un bouton est
son apparence lorsque le pointeur le survole. Pour donner à l’utilisateur un effet visuel de
réaction, vous changerez la couleur du rectangle derrière le texte.
4
Sélectionnez le rectangle. Assurez-vous de sélectionner le rectangle et non pas le texte. Si vous
n’êtes pas sûr de votre sélection, vérifiez dans le panneau Calques lequel des deux est
sélectionné.
5
Cliquez sur la case Couleur de la trame dans le Vérificateur de propriétés, et choisissez la
couleur noire.
Le rectangle est maintenant noir.
6
Cliquez sur l’onglet Enfoncé en haut de l’éditeur de boutons, et cliquez sur le bouton Copier le
graphisme Au-dessus.
L’image du bouton est copiée à partir de l’onglet Au-dessus. L’état Enfoncé d’un bouton est son
apparence après qu’un utilisateur ait cliqué dessus. Cette fois-ci, vous ne changerez pas la
couleur du rectangle, vous le laisserez tel qu’il est.
7
Cliquez sur Terminé dans l’éditeur de boutons pour appliquer vos modifications au symbole
du bouton.
8
Cliquez sur l’onglet Aperçu dans la fenêtre du document et testez les états du bouton. Si
nécessaire, désactivez les découpes. Lorsque vous avez terminé, cliquez sur l’onglet Original et
réactivez les découpes.
Créer des occurrences de boutons multiples
Vous allez maintenant créer plusieurs occurrences du symbole du bouton.
1
Sélectionnez le bouton dans l’espace de travail, si cela n’a pas encore été fait.
2
Choisissez Edition > Cloner.
Une nouvelle occurrence du bouton apparaît en haut du bouton d’origine.
56
Chapitre 2
3
Maintenez appuyée la touche Maj tout en appuyant sur la touche fléchée droite de manière
répétée pour déplacer la nouvelle occurrence vers la droite.
Le déplacement de l’occurrence s’effectue avec des incréments de 10 pixels. Si nécessaire,
utilisez uniquement les touches fléchées afin de déplacer la sélection d’un pixel à la fois.
Positionnez l’occurrence directement à droite de l’occurrence d’origine, mais sans le superposer,
comme indiqué dans l’illustration ci-dessous.
4
Clonez deux autres instances du bouton, et positionnez-les à droite de la précédente occurrence.
Conseil : Un raccourci : appuyez sur Alt (Windows) ou Option (Macintosh) tout en faisant glisser l’occurrence
sélectionnée avec le pointeur afin d’en faire une copie. Une fois que la nouvelle occurrence est positionnée
immédiatement à droite de la précédente occurrence, choisissez Edition > Répéter Dupliquer pour créer et placer
automatiquement une autre copie de l’occurrence.
Changer le texte de l’occurrence du bouton
Maintenant que vous avez créé tous les boutons de votre barre de navigation, vous devez assigner
un texte unique à chacun des boutons. Vous pouvez facilement changer le texte de l’occurrence
d’un bouton en utilisant le Vérificateur de propriétés.
1
Sélectionnez l’occurrence du bouton à l’extrême gauche.
Les propriétés de l’occurrence du bouton apparaissent dans le Vérificateur de propriétés. A
l’exception du menu contextuel Paramètres d’exportation, ces propriétés s’appliquent
uniquement à l’occurrence sélectionnée. Effectuer des modifications ici n’affectera pas le
symbole du bouton d’origine dans la Bibliothèque.
2
Dans le Vérificateur de propriétés, remplacez le texte de la zone de texte par le mot HOME
écrit en majuscules. Puis appuyez sur Entrée.
Le texte du bouton change pour refléter votre saisie.
3
Pour les trois boutons restant, changez respectivement le texte des boutons par VEHICLES,
RATES et CONTACT US.
Didacticiel des bases de la conception Web
57
Association d’URL aux boutons
Vous allez ensuite associer une URL unique ou un lien à chaque occurrence de bouton. Une URL,
ou Uniform Resource Locator (localisateur uniforme de ressources), est l’adresse ou
l’emplacement d’une page sur le Web. Il est très simple d’associer des URL à des boutons en
utilisant le Vérificateur de propriétés.
1
Sélectionnez l’occurrence de bouton nommée Accueil.
2
Saisissez index.htm dans le champ d’édition Lien de le Vérificateur de propriétés.
Si le bouton Accueil est cliqué dans un navigateur Web, ce dernier ira à une page nommée
index.htm. Plus loin dans le didacticiel, vous découvrirez pourquoi vous avez associé le bouton
Accueil à cette page.
3
Sélectionnez l’occurrence du bouton Véhicules et entrez votre URL préférée dans le champ
d’édition Lien de le Vérificateur de propriétés.
Pour ce didacticiel, toute URL active fera l’affaire. Dans un site Web réel, vous entreriez l’URL
vers laquelle vous voudriez que le bouton Véhicules redirige l’utilisateur.
Remarque : Assurez-vous de bien saisir l’URL d’un site Web existant, de manière à ce que puissiez tester plus
tard les liens de votre bouton.
4
Associez une URL à chacune des occurrences de bouton restantes. Une fois encore, n’importe
quelle URL active fait l’affaire.
5
Choisissez Fichier > Aperçu dans le navigateur > Aperçu dans [votre navigateur préféré]. Pour
tester les liens des boutons, vous devez prévisualiser le document dans un navigateur.
Remarque : Si votre navigateur n’est pas listé, vous devez d’abord sélectionner un navigateur en choisissant
Fichier > Aperçu dans le navigateur > Sélectionner le navigateur principal.
Lorsque le document s’ouvre dans votre navigateur, testez les boutons que vous avez créés. Mis
à part le bouton Accueil, qui renvoie vers un fichier que vous n’avez pas encore créé, chaque
bouton doit renvoyer vers le lien que vous avez spécifié dans Fireworks.
Modifier le symbole du bouton
Ensuite vous modifierez le symbole du bouton d’origine. Les changements seront
automatiquement appliqués à toutes les occurrences de bouton de votre barre de navigation.
Vous vous demandez peut-être à quoi peut bien ressembler le symbole d’origine du bouton
maintenant que vous avez changé le texte de plusieurs de ses occurrences.
58
Chapitre 2
1
Dans l’espace de travail, double-cliquez sur l’une des occurrences du bouton.
L’éditeur de boutons s’ouvre avec le symbole d’origine du bouton et le texte affichés dans
l’espace de travail. Le symbole d’origine du bouton est intact et il affiche le texte d’origine.
Si vous aviez changé le texte de chaque bouton de l’espace de travail, vous auriez uniquement
modifié chaque occurrence de bouton. Si vous effectuez ici des modifications au niveau de
l’apparence du rectangle ou du texte, vous changeriez le symbole d’origine, et ces modifications
se reflèteraient dans toutes les occurrences de l’espace de travail.
2
Cliquez sur l’onglet Au-dessus.
3
Sélectionnez le rectangle noir.
4
Cliquez sur Couleur de la trame dans le Vérificateur de propriétés et entrez la valeur de couleur
FF6633. Appuyez sur Entrée pour appliquer le changement de couleur.
Le rectangle est maintenant orange.
5
Cliquez sur Terminé dans l’éditeur de boutons pour appliquer les modifications au symbole de
bouton.
6
Cliquez sur l’onglet Aperçu de la fenêtre du document et testez les boutons.
Chaque bouton appartenant à l’état Au-dessus est maintenant orange. Vous avez changé
uniquement le symbole du bouton, mais les modifications ont été appliquées à toutes les
occurrences de bouton de votre barre de navigation.
7
Cliquez sur l’onglet Original et double-cliquez sur une occurrence de bouton de l’espace de
travail. Cette fois, vous allez changer le texte du symbole du bouton.
8
Sélectionnez le texte du bouton dans l’éditeur de boutons, puis, dans le Vérificateur de
propriétés, choisissez la police Arial. Faites ceci pour chacun des états du bouton.
9
Double-cliquez sur le bloc de texte dans l’éditeur de boutons, et supprimez le mot BOUTON.
10
Dans la boîte de dialogue qui vous demande si vous voulez changer le texte des autres états du
bouton, cliquez sur Oui.
Examinez les différents états de bouton dans l’éditeur de boutons. Les changements de texte
d’un état se reflètent dans tous les états du bouton. Rappelez-vous lorsque vous avez changé la
police : vous aviez également dû la changer dans chacun des états. Cela est dû au fait que vous
pouvez appliquer différents attributs graphiques et de texte à chaque état d’un bouton. C’est
utile si vous voulez que la couleur du texte change lorsqu’un utilisateur survole un bouton, par
exemple.
Didacticiel des bases de la conception Web
59
11
Cliquez sur Terminé pour quitter l’éditeur de boutons.
La police de chaque occurrence de bouton change afin de refléter la nouvelle sélection de
police, mais le texte reste le même. Les occurrences de boutons reflètent uniquement les
modifications apportées à l’apparence graphique d’un symbole de bouton, y compris ses
attributs de texte, mais pas les modifications apportées au texte lui-même.
Les symboles de bouton vous permettent de changer rapidement l’apparence graphique de
toutes les occurrences de bouton d’une barre de navigation, tout en conservant le texte unique
de chaque occurrence.
Créer et modifier un menu contextuel
Un menu contextuel est un menu qui apparaît lorsque, dans un navigateur, vous déplacez le
pointeur sur une image de déclenchement. Il contient une liste d’éléments qui créent des liens
vers d’autres pages Web.
Vous allez créer et modifier un menu contextuel qui liste la localisation des aéroports de Global.
Créer les éléments de liste d’un menu contextuel
Vous allez commencer par créer les éléments de liste du menu contextuel en utilisant l’éditeur de
menu contextuel.
1
Sélectionnez la découpe recouvrant le graphisme Aéroports mondiaux.
2
Choisissez Modifier > Menu contextuel > Ajouter menu contextuel.
L’éditeur de menu contextuel s’ouvre.
3
60
Double-cliquez sur le champ d’édition situé dans le coin supérieur gauche (Windows
uniquement).
Chapitre 2
4
Saisissez North America dans le champ d’édition et appuyez sur Entrée.
La boîte d’édition suivante est sélectionnée, prête à accueillir une autre saisie.
5
Tapez Europe et appuyez sur Entrée.
6
Créez trois entrées supplémentaires pour Africa, Middle East et Asia/Pacific.
7
Double-cliquez sur le champ d’édition Lien pour l’entrée North America.
8
Saisissez une URL active de votre choix et appuyez sur Entrée.
Pour ce didacticiel, toute URL fera l’affaire. Assurez-vous qu’il s’agisse bien d’une URL
existante, de manière à ce que puissiez tester plus tard vos liens.
9
Entrez des URL pour les entrées restantes.
Remarque : Il y a toujours une ligne supplémentaire en bas de la liste des entrées de l’éditeur de menu contextuel.
Elle vous permet d’ajouter facilement de nouvelles entrées sans avoir à cliquer sur le bouton Ajouter un menu.
10
Cliquez sur Terminé pour fermer l’éditeur de menu contextuel.
Dans l’espace de travail, le contour de votre menu contextuel apparaît attaché à la découpe.
Didacticiel des bases de la conception Web
61
11
Pour tester votre menu contextuel, choisissez Fichier > Aperçu dans le navigateur > Aperçu
dans [votre navigateur préféré] pour prévisualiser le document dans un navigateur.
Remarque : Les menus contextuels doivent être prévisualisés dans un navigateur. Ils ne sont pas visibles en
utilisant l’onglet Aperçu dans Fireworks.
Lorsque le document s’ouvre dans votre navigateur, déplacez le pointeur sur le graphisme
Aéroports mondiaux. Le menu contextuel que vous avez créé apparaît. Cliquez sur chaque
entrée pour tester les liens.
Personnaliser le menu contextuel
Vous allez ensuite retourner dans l’éditeur de menu contextuel pour modifier l’apparence du
menu contextuel.
1
Dans Fireworks, double-cliquez sur le contour du menu contextuel.
L’éditeur de menu contextuel s’ouvre en affichant vos entrées.
2
Cliquez sur le bouton Suivant.
L’onglet Aspect apparaît. C’est là que vous pouvez changer les couleurs et les polices utilisées
dans les menus contextuels.
62
3
Choisissez le type de cellule HTML et Menu vertical pour l’alignement.
4
Choisissez la police Arial, Helvetica, sans-serif et une taille de police de 12.
5
Dans la partie Etat relevé, définissez une couleur de texte noire, si le noir n’a pas encore été
sélectionné. Cliquez ensuite sur la case Couleur de la cellule. Si CCCCCC ne s’affiche pas
encore dans le champ d’édition en haut de la fenêtre contextuelle des couleurs, entrez
CCCCCC et appuyez sur Entrée.
Chapitre 2
Ces valeurs de couleur sont les couleurs par défaut sélectionnées dans l’éditeur de menu
contextuel si vous n’avez jamais créé un menu contextuel auparavant. Une fois que vous avez
modifié ces couleurs, elles seront utilisées à chaque fois que vous créerez un menu contextuel,
jusqu’à ce que vous choisissiez d’autres couleurs.
6
Dans la partie Etat au-dessus, déterminez une couleur de texte blanche, si elle n’a pas encore été
sélectionnée et cliquez sur la case Couleur de la cellule. Avec le pointeur en forme de pipette,
cliquez sur le rectangle bleu du document qui entoure le graphisme Worldwide Airports,
comme présenté ci-dessous.
7
Cliquez sur le bouton Suivant.
La barre Avancé apparaît. L’onglet Avancé vous permet de changer différentes propriétés de
cellules et de bordures. Vous allez augmenter ici la largeur de cellule, élargissant ainsi le menu
contextuel.
8
Choisissez Pixels dans le menu contextuel Largeur de cellule.
Cela active la case Largeur de cellule.
9
Entrez 137 pour la largeur de cellule.
Didacticiel des bases de la conception Web
63
10
Choisissez Automatique dans le menu contextuel Hauteur de cellule, et cliquez sur le bouton
Suivant.
L’onglet Position apparaît. C’est là que vous pouvez spécifier la position à laquelle le menu
contextuel apparaîtra à l’écran. Les coordonnées 0,0 signifient que le coin supérieur gauche du
menu contextuel s’alignera avec le coin supérieur gauche de la découpe de déclenchement.
Vous pouvez également choisir entre plusieurs positions prédéfinies.
11
Entrez 3 dans les cases X et Y de positionnement du menu, puis cliquez sur Terminé.
Remarque : Vous pouvez également repositionner un menu contextuel en faisant glisser son contour dans
l’espace de travail.
12
Prévisualisez dans un navigateur les modifications de votre menu contextuel.
Déplacez le pointeur sur le graphisme Aéroports mondiaux. Le menu contextuel est positionné
différemment et apparaît plus large. Survolez chaque entrée du menu pour observer vos
changements de couleur.
Modifier le menu contextuel
Vous allez à nouveau utiliser l’éditeur de menu contextuel pour ajouter une autre entrée au menu
contextuel. Vous modifierez également l’ordre des entrées et vous ajouterez un sous-menu.
1
Dans Fireworks, double-cliquez sur le contour du menu contextuel.
2
Cliquez sur l’entrée Europe pour la sélectionner.
3
Cliquez sur le bouton Ajouter un menu au-dessus de la liste des entrées.
Une ligne blanche est insérée.
64
Chapitre 2
4
Double-cliquez sur le champ Texte de la nouvelle entrée et saisissez Latin/Amérique du Sud.
Cliquez en dehors du champ Texte pour appliquer l’entrée.
Les Amériques ne sont pas ensemble dans la liste.
5
Faites glisser l’entrée Latin/South America d’une ligne vers le haut et relâchez le bouton de la
souris. Lorsque vous faites glisser le pointeur, une ligne blanche indique l’endroit où serait placée
l’entrée si vous relâchiez ici le bouton de la souris.
L’entrée est placée à l’endroit que vous avez spécifié.
6
Sélectionnez l’entrée North America et cliquez sur le bouton Ajouter un menu.
7
Double-cliquez sur le champ Texte de la nouvelle entrée et saisissez United States. Puis, cliquez
en dehors des champs de l’entrée. Faites toutefois attention à ne pas sélectionner une autre
entrée.
8
Sélectionnez l’entrée United States, si cela n’a pas déjà été fait, et cliquez sur le bouton Menu
Renfoncement.
L’entrée est renfoncée sous l’entrée North America.
Didacticiel des bases de la conception Web
65
9
Cliquez à nouveau sur le bouton Ajouter un menu, et créez une nouvelle entrée pour le
Canada.
Vous venez juste de créer un sous-menu qui apparaîtra lorsque, dans un navigateur, vous
survolerez l’entrée North America.
10
Associez des URL à toutes les nouvelles entrées. Vous pouvez optionnellement supprimer le
lien de l’Amérique du Nord, car les utilisateurs choisiront des éléments à partir de son sousmenu.
11
Cliquez sur Terminé pour fermer l’éditeur de menu contextuel, puis prévisualisez les
modifications du menu contextuel dans un navigateur.
Optimiser le document
Votre document est presque prêt pour le Web. La seule chose que vous avez besoin de faire avant
de l’exporter est de l’optimiser. Avant d’exporter un document Fireworks, vous devez toujours
commencer par l’optimiser. L’optimisation assure que vos graphismes seront exportés avec le
meilleur équilibre de compression et la meilleure qualité possible.
Lorsque différentes sortes de graphismes se trouvent dans le même document, il est judicieux de
choisir pour chacun un format de fichier et des paramètres de compression appropriés. La page
Web Global est composée d’une variété d’éléments : des bitmaps, des objets vectoriels et du texte.
1
66
Si le panneau Optimiser est minimisé ou s’il n’est pas visible, cliquez sur sa flèche d’extension
ou bien choisissez Fenêtre > Optimiser.
Chapitre 2
Fireworks choisit le GIF comme format de fichier d’exportation par défaut et Websnap
Adaptive comme palette de couleurs par défaut. La plupart des graphismes de la page Web
Location de voitures globale seront splendides avec ces paramètres. Toutefois, l’image bitmap
Vintage contient une photographie et un dégradé. Compte tenu de ses variations de couleur
complexes, il serait préférable de l’exporter dans un autre format.
2
Cliquez sur l’onglet d’aperçu 2 en 1 de la fenêtre du document.
L’onglet 2 en 1 vous permet de visualiser le résultat de vos paramètres d’optimisation et de les
comparer avec l’original. Vous avez probablement déjà noté la couche de découpe blanche à
chaque fois que vous visionnez un des onglets d’aperçu. La couche vous permet de cibler
uniquement la zone que vous voulez optimiser.
3
Dans l’aperçu à droite, cliquez sur la découpe pour l’image Vintage.
La couche de la découpe disparaît, de telle sorte que vous pouvez visionner l’image située audessous de la découpe. Au bas de l’aperçu, le format de fichier d’exportation de la découpe
sélectionné est affiché, l’estimation de la taille du fichier d’exportation, ainsi que le temps de
téléchargement du graphisme à partir du Web.
Conseil : Utilisez l’outil Main de la partie Affichage du panneau Outils pour visualiser une plus grande partie de
l’image dans le cas où elle n’est pas entièrement visible.
4
Masquez provisoirement les découpes en cliquant sur le bouton Masque les découpes et les
références dans la partie Web du panneau Outils.
Cela vous permet de comparer l’aperçu à l’original, et de voir la différence entre les deux
graphismes. L’aperçu à droite possède des bandes dans le dégradé.
5
Réactivez les découpes et cliquez sur l’image Vintage avec l’outil pointeur.
Didacticiel des bases de la conception Web
67
6
Dans le panneau Optimiser, choisissez JPEG - Fichier réduit à partir du menu contextuel
Paramètres.
Les bandes de dégradé ont maintenant disparu, et la taille du fichier a diminué de manière
significative. Cela est dû au fait que les photographies et les images comportant des variations
de couleur complexes sont mieux optimisées et compressées en JPEG qu’en GIF.
Maintenant que la taille du fichier a été diminuée, l’image est devenue floue.
7
Pour améliorer l’aspect du bitmap, faites glisser le curseur Qualité du panneau Optimiser à la
valeur 77 et placez l’option Lissage sur 0.
Le bitmap est plus clair, mais la taille du fichier a également augmentée. On obtient toutefois
une amélioration au niveau de la taille du fichier lorsque l’image a été optimisée en tant que
GIF.
8
68
Cliquez sur l’onglet Original pour revenir à l’affichage normal.
Chapitre 2
Exporter du HTML
HTML, ou HyperText Markup Language (langage de marquage pour hypertexte) est la première
méthode utilisée sur Internet pour créer et afficher des pages Web. Vous n’êtes pas obligé de
comprendre le HTML pour utiliser Fireworks, mais cela vous aide à garder à l’esprit que si des
découpes de Fireworks sont exportées, elles deviennent des cellules dans une table HTML.
Vous allez maintenant exporter et visionner votre document terminé dans un navigateur Web.
Vous examinerez également le code HTML que Fireworks exporte.
Définir les préférences HTML
Avant d’exporter le document, vous avez besoin de définir les préférences d’exportation HTML.
1
Choisissez Fichier > Configuration HTML.
La boîte de dialogue Configuration HTML s’ouvre. Les options que vous définissez dans cette
boîte de dialogue affecteront tous les futurs documents Fireworks que vous créerez, exceptées
les options de l’onglet Propre au document.
2
Dans l’onglet Générales, choisissez un style HTML.
Si vous utilisez un éditeur HTML tel que Macromedia Dreamweaver ou Microsoft FrontPage,
choisissez-le à partir de ce menu contextuel. Agir de la sorte vous permet d’ouvrir et de
modifier facilement le fichier exporté dans cet éditeur HTML. Si vous n’utilisez pas un éditeur
HTML ou si vous en utilisez un qui ne se trouve pas dans cette liste, choisissez Generic
HTML.
3
Choisissez l’extension de fichier .htm.
Didacticiel des bases de la conception Web
69
4
Cliquez sur l’onglet Table.
L’onglet Table vous permet de changer les propriétés de la table HTML.
5
Dans le menu contextuel Espace avec, choisissez Espace transparent de 1 pixel.
Lorsque cette option est sélectionnée, Fireworks exporte un fichier graphique nommé
spacer.gif, qui représente une image transparente de 1 pixel. Les espaces sont utilisés par les
concepteurs Web afin de faciliter la création de la mise en page. Ils gardent ouverts les cellules
vides d’une table HTML. Sans eux, les cellules vides des tables HTML disparaîtraient,
modifiant la mise en page initialement prévue. Vous verrez le fichier spacer.gif un peu plus
tard, lorsque vous visionnerez vos fichiers exportés.
Vous n’avez pas besoin de comprendre ce que sont les espaces, mais il est utile de connaître
cette option si vous souhaitez la réutiliser dans le futur.
6
70
Cliquez sur l’onglet Propre au document.
Chapitre 2
L’onglet Propre au document vous permet de choisir une variété de préférences spécifiques au
document, y compris une convention de nomination personnalisée pour vos fichiers exportés.
Rappelez-vous que les options que vous définissez ici s’appliquent uniquement au document
Fireworks actif.
Conseil : Vous pouvez appliquer les paramètres de l’onglet Propre au document à tous les nouveaux documents
en cliquant sur le bouton Paramètres par défaut.
7
Cliquez sur OK pour accepter les paramètres de l’onglet Propre au document, et fermez la
boîte de dialogue Configuration HTML.
Exporter le document au format HTML
Votre document est maintenant prêt pour l’exportation.
1
Choisissez Fichier > Exporter.
La boîte de dialogue Exporter s’ouvre.
2
Dans la boîte de dialogue, recherchez le dossier Tutorial2/Export.
3
Assurez-vous que Documents HTML et Images soit sélectionnés pour le type de fichier, puis
entrez index.htm pour le nom de fichier. Nommer la page d’accueil index.htm est une
convention communément utilisée sur le Web. De nombreux navigateurs affichent même
automatiquement la page index.htm lorsqu’une URL pointe simplement sur un nom de site et
non pas un nom de page.
En outre, plus tôt dans le didacticiel, vous avez associé l’URL de index.htm au bouton Accueil.
Il n’y a actuellement qu’une seule page sur le site Web Global, ainsi, associer cette page à ellemême n’aurait pas beaucoup de sens à ce niveau-là. Mais si dans le futur vous créerez d’autres
pages pour ce site, vous pourrez utiliser la barre de navigation sur toutes ses pages, proposant
aux utilisateurs une méthode de navigation logique.
Didacticiel des bases de la conception Web
71
4
Assurez-vous que Exporter le fichier HTML soit choisi dans le menu contextuel HTML, et
que Exporter les découpes soit choisi dans le menu contextuel Découpes.
5
Choisissez les options suivantes et laissez désactivées toutes les autres :
• Inclure les zones sans découpes
• Placer les images dans des sous-dossiers
Si vous choisissez cette option, Fireworks vous permettra de choisir un dossier dans lequel
stocker vos fichiers graphiques exportés. S’il n’existe pas, Fireworks crée pour vous le dossier. Si
vous ne choisissez pas de dossier, Fireworks choisit par défaut un dossier nommé images. Pour
ce didacticiel, acceptez les paramètres par défaut.
6
Cliquez sur Enregistrer.
Les fichiers sont exportés à l’emplacement que vous avez spécifié.
7
Choisissez Fichier > Enregistrer pour enregistrer votre fichier PNG.
Tester le fichier terminé
Vos fichiers ont été exportés, il est maintenant temps de vérifier ce que vous avez créé.
Visionner la liste des fichiers exportés
Commencez par examiner la liste des fichiers exportés par Fireworks. Les nouveaux fichiers créés
pendant le processus d’exportation sont affichés dans le dossier d’exportation.
1
Sur votre bureau, recherchez le dossier Export et ouvrez-le.
Fireworks a créé un fichier HTML nommé index.htm. Il s’agit de la page d’accueil du site Web
Global. Il a également créé un fichier nommé mm_menu.js, qui contient le code nécessaire
pour afficher les menus contextuels.
2
Ouvrir le sous-dossier des images.
Fireworks a également exporté toutes vos oeuvres dans des fichiers graphiques. Les découpes de
Fireworks ont toutes été converties en fichiers distincts. Il y a plusieurs fichiers GIF et un
fichier JPEG. Le JPEG est l’image bitmap que vous avez optimisée un peu plus tôt. Le fichier
nommé spacer.gif est le résultat de l’option d’espacement que vous avez sélectionnée dans la
boîte de dialogue Configuration HTML, et il sera utilisé pour la création de la mise en page.
72
Chapitre 2
Visionner le fichier HTML de Fireworks dans un navigateur
Maintenant que vous avez examiné les fichiers exportés, vous êtes prêt à tester la page Web dans
un navigateur.
1
A partir du dossier Export, faites glisser le fichier index.htm et ouvrez le navigateur Web.
2
Dans le navigateur, cliquez sur les boutons que vous avez ajoutés pour tester les liens, puis
retournez dans le fichier index.htm.
3
Testez les fonctions que vous avez ajoutées.
4
La plupart des navigateurs Web permettent d’afficher le code source avec une commande telle
que Affichage > Source. Recherchez et exécutez la commande permettant d’afficher le code.
5
Parcourez le document code source. Si vous connaissez le HTML et le JavaScript, vous
reconnaîtrez le code que Fireworks a créé pour vous. Si vous ne connaissez pas le HTML et le
JavaScript, vous apprécierez sans doute que Fireworks rende inutile l’apprentissage de ces
langages.
Récapitulatif
Vous avez accompli les tâches essentielles d’un processus de création de pages Web avec Fireworks.
Vous avez appris à ouvrir un document, y importer des graphismes et découper le document.
Vous avez également créé un survol glisser-déposer, créé des boutons et créé un menu contextuel.
Et pour finir, vous avez appris à optimiser et à exporter votre document terminé.
Didacticiel des bases de la conception Web
73
Pour obtenir des informations détaillées sur certaines des fonctions mentionnées dans le
didacticiel, et pour obtenir des informations sur d’autres fonctions de Fireworks, référez-vous à
l’index de Utilisation de Fireworks ou consultez l’aide Fireworks. Pour plus de didacticiels, visitez
http://www.macromedia.com/fr/. Assurez-vous également de visiter le centre d’assistance de
Macromedia (qui a été gratifié d’un prix) à l’adresse http://www.macromedia.com/fr/support/.
74
Chapitre 2
CHAPITRE 3
Concepts de base de Fireworks
L’application Macromedia Fireworks MX met à votre disposition des outils de conception de
graphiques Web. Ses solutions novatrices permettent de résoudre les principaux problèmes posés
aux concepteurs et aux webmasters. Grâce à la large palette d’outils proposée par Fireworks, vous
pouvez créer et éditer des graphiques vectoriels et bitmap dans un simple fichier.
L’avènement de Fireworks a libéré les concepteurs de sites Web des tâches fastidieuses impliquant
l’ouverture de douzaines d’applications spécifiques. L’application directe et non destructive des
effets évite de devoir recréer des graphiques Web après une modification simple. La génération de
code JavaScript facilite considérablement la création de survols. Des fonctions d’optimisation
efficaces réduisent la taille de fichiers graphiques Web sans sacrifier la qualité.
Si vous débutez avec Fireworks, il vous serait utile de comprendre les concepts généraux de
Fireworks tels que l’ouverture, l’importation et l’enregistrement de fichiers, vous familiariser à
l’environnement de Fireworks et travailler dans un fichier. Une fois que vous avez créé un nouveau
fichier ou que vous avez ouvert un fichier existant, l’environnement de travail Fireworks est
accessible. Fireworks MX introduit plusieurs améliorations dans l’espace de travail, y compris le
Vérificateur de propriétés, un panneau Outils segmenté et des groupes de panneaux.
Graphiques vectoriels et de bitmap
Les ordinateurs affichent des graphiques au format vectoriel ou bitmap. Comprendre la différence
entre les deux formats vous aidera à comprendre Fireworks, qui contient des outils vectoriels et
bitmap, et qui est capable d’ouvrir ou d’importer les deux formats.
Graphiques vectoriels
Les graphiques vectoriels reproduisent des images en utilisant des lignes et des courbes, appelées
vecteurs, qui incluent des informations de couleur et de position. Par exemple, l’image d’une
feuille peut être décrite par une série de points, dont le résultat est le contour de la feuille. La
couleur de la feuille est déterminée par la couleur du contour, autrement dit du trait, et la couleur
de la zone délimitée par ce contour, autrement dit la trame.
Lorsque vous modifiez un graphisme vectoriel, vous modifiez les propriétés des lignes et des
courbes qui en décrivent la forme. Les graphiques vectoriels ne dépendent pas de la résolution, ce
qui signifie que vous pouvez déplacer, redimensionner, reformer ou changer la couleur d’un
graphisme vectoriel et l’afficher sur des écrans de diverses résolutions, sans affecter la qualité de
son aspect.
75
Graphiques bitmap
Les graphiques bitmap sont composés de points, appelés pixels, organisés dans une grille. L’écran
de votre ordinateur est une grande grille de pixels. Dans une version bitmap, l’image serait
déterminée par l’emplacement et la valeur de couleur de l’ensemble des pixels de la grille. Chaque
point est associé à une couleur. Lorsque ces points sont affichés à la bonne résolution, ils forment
une image comparable à une mosaïque.
Lorsque vous modifiez un graphisme, vous modifiez des pixels et non pas des lignes et des
courbes. Ces graphiques bitmap dépendent de la résolution, autrement dit les données décrivant
l’image sont conditionnées par une grille de taille spécifique. L’agrandissement d’un graphique
risque de produire une image aux bords dentelés du fait du changement de distribution des points
dans la grille. L’affichage d’un graphique bitmap sur un écran dont la résolution est inférieure à
celle de l’image risque également de dégrader la qualité.
Travailler avec Fireworks
Fireworks est une application souple de création, d’édition et d’optimisation de graphiques pour
le Web. Vous pouvez créer et modifier des images bitmap et vectorielles, créer des effets pour le
Web tels que les survols et les menus contextuels, recadrer et optimiser des graphiques afin de
réduire la taille de leur fichier et gagner du temps en automatisant les tâches répétitives. Le
document une fois terminé, vous pouvez l’exporter dans un format de fichier JPEG, GIF ou autre
— avec des fichiers HTML contenant des tables HTML et du code JavaScript — afin de l’utiliser
sur le Web. Vous pouvez également exporter un type de fichier spécifique vers une autre
application telle que Photoshop ou Macromedia Flash, si vous voulez continuer à travailler dans
l’autre application.
Objets vectoriels et bitmap
Dans le panneau Outils de Fireworks, vous trouverez des sections distinctes contenant des outils
de création et de modification de vecteurs et de bitmaps. Dans Fireworks MX, l’outil que vous
choisissez détermine si l’objet que vous créez est un objet vectoriel ou bitmap. Par exemple,
choisissez l’outil Plume dans la partie Vecteur du panneau Outils, et vous pouvez commencer à
tracer des trajets vectoriels en plaçant des points. Choisissez l’outil Pinceau, et vous pouvez faire
glisser le pointeur afin de dessiner un objet bitmap. Choisissez l’outil Texte, et vous pouvez
démarrer votre saisie.
Après avoir dessiné des objets vectoriels, des objets bitmap ou du texte, vous pouvez utiliser toute
une panoplie d’outils, d’effets, de commandes et de techniques pour mettre en valeur et achever
vos graphiques. Vous pouvez utiliser les outils de Fireworks situés dans l’éditeur de boutons pour
créer des boutons de navigation interactifs.
Vous pouvez également utiliser les outils de Fireworks pour modifier des graphiques importés.
Vous pouvez importer et modifier les formats de fichier JPEG, GIF, PNG, PSD et bien d’autres
encore. Une fois que vous avez importé une image graphique, vous pouvez ajuster sa couleur et
son ton, et vous pouvez également la recadrer, la retoucher et la masquer.
76
Chapitre 3
Graphiques interactifs
Les découpes et les références sont des objets Web qui spécifient des zones interactives dans un
graphisme pour le Web. Les découpes permettent de sélectionner des portions d’image et
d’appliquer des comportements de survol, des animations et des liens URL (Uniform Ressource
Locator) à des sections de l’image. En outre, les découpes vous permettent d’exporter les sections
avec des paramètres différents. Sur une page Web, chaque découpe apparaît dans une cellule de
tableau. Les références permettent d’affecter un lien URL et des comportements à l’ensemble ou à
une partie du graphisme. Pour plus d’informations, voir Chapitre 12, « Découpes, survols et
références », à la page 269.
Les découpes et les références possèdent des poignées de survol glisser-déposer vous permettant
d’assigner rapidement aux graphiques des images d’interversion et des comportements de survol
directement dans l’espace de travail. L’éditeur de boutons et l’éditeur de menus contextuels sont
des fonctions pratiques de Fireworks qui vous aident à créer des graphiques interactifs spéciaux
pour naviguer sur les sites Web.
Optimisation et exportation de graphiques
Fireworks possède des fonctions d’optimisation puissantes qui vous aident à trouver l’équilibre
entre la taille des fichiers et une qualité acceptable lorsque vous vous apprêtez à exporter des
graphiques. Optimisez les graphiques Web avec Fireworks pour réduire la taille du fichier et
accélérer ainsi le chargement des sites Web. Comparez la qualité des graphiques dans l’affichage de
l’aperçu 2 en 1 ou 4 en 1 de l’espace de travail.
Vous pouvez découper une image en plusieurs unités, puis optimiser ces unités pour obtenir un
format qui correspond mieux au contenu. Pour ajouter de la souplesse au niveau de
l’optimisation, vous pouvez utiliser une compression JPEG sélective afin de centraliser la partie la
plus importante d’un JPEG tandis que la qualité de l’arrière-plan est réduite.
Après avoir optimisé vos graphiques, l’étape suivante consiste à les exporter afin de les utiliser sur
le Web. A partir de votre document PNG source de Fireworks, vous pouvez exporter vers un
certain nombre de types de fichier, y compris le JPEG, le GIF, le GIF animé et les tables HTML
contenant des images découpées en différents types de fichiers. Pour plus d’informations, voir
Chapitre 15, « Optimisation et exportation », à la page 333.
Création d’un nouveau document
Lorsque vous choisissez Fichier > Nouveau pour créer un nouveau document avec Fireworks, un
fichier de type PNG (Portable Network Graphic - Graphisme réseau portable) est créé. PNG est
le format de fichier natif de Macromedia Fireworks. Lorsque vous créez des graphiques avec
Fireworks, vous pouvez les exporter sous d’autres formats Web courants, tels que JPEG, GIF et
GIF animé. Vous pouvez également exporter des graphiques vers de nombreux formats populaires
utilisés en dehors du Web, tels que le TIFF et le BMP. Quels que soient les paramètres
d’optimisation et d’exportation choisis, le fichier PNG Fireworks d’origine est conservé afin de
permettre une modification ultérieure aisée.
Avant de créer un graphisme avec Fireworks, vous devez créer ou ouvrir un document existant.
Vous pourrez par la suite ajuster les options de paramétrage dans le Vérificateur de propriétés.
Concepts de base de Fireworks
77
Pour créer un nouveau document :
1
Choisissez Fichier > Nouveau.
La boîte de dialogue Nouveau document est alors affichée.
2
Entrez la largeur et la hauteur du document en pixels, pouces ou centimètres.
3
Entrez une résolution en pixels par pouce ou pixels par centimètre.
4
Sélectionnez une couleur de fond blanche, transparente ou personnalisée.
Remarque : Utilisez le puits de couleurs près de l’option Personnalisée de la boîte de dialogue pour sélectionner
la couleur de votre choix.
5
Cliquez sur OK pour créer le nouveau document.
Pour créer un nouveau document de la même taille qu’un objet du Presse-papiers :
1
Copiez un objet dans le Presse-Papiers à partir de :
• un autre document Fireworks ;
• un navigateur Web ;
• l’une des applications énumérées dans « Collage dans Fireworks » à la page 82 ;
2
Choisissez Fichier > Nouveau.
La boîte de dialogue Nouveau document est ouverte et affiche la hauteur et la largeur de l’objet
copié dans le Presse-papiers.
3
Choisissez une résolution et une couleur de fond, puis cliquez sur OK.
4
Choisissez Edition > Coller pour coller dans le nouveau document l’objet en provenance du
Presse-papiers.
Ouverture et importation de fichiers
Dans Fireworks, vous pouvez facilement ouvrir, importer et modifier des images vectorielles et
bitmap créées dans d’autres programmes graphiques. En outre, vous pouvez importer des images
en provenance d’un appareil photo numérique ou d’un scanner.
78
Chapitre 3
Pour plus d’informations sur l’importation de graphiques à partir de Photoshop, Macromedia
FreeHand, CorelDraw ou Illustrator, voir « Utilisation de Fireworks avec d’autres applications » à
la page 373.
Pour ouvrir un document Fireworks :
1
Choisissez Fichier > Ouvrir.
La boîte de dialogue Ouvrir est alors ouverte.
2
Sélectionnez le fichier, puis cliquez sur Ouvrir.
Conseil : Pour ouvrir un fichier sans effacer la précédente version, choisissez Ouvrir en tant que Sans titre, puis
enregistrez le fichier en utilisant un autre nom.
Ouverture des derniers documents fermés
Le menu Fichier liste les 10 derniers documents fermés dans le sous-menu Ouvrir fichier récent.
Pour ouvrir un fichier récemment fermé :
1
Choisissez Fichier > Ouvrir fichier récent.
2
Choisissez un fichier à partir du sous-menu.
Ouverture de graphiques créés dans d’autres applications
Fireworks permet d’ouvrir des fichiers créés dans d’autres applications ou à des formats différents,
ce qui inclut les fichiers Photoshop, Macromedia FreeHand, Illustrator, CorelDRAW non
compressés, WBMP, EPS, JPEG, GIF et GIF animés.
Lorsque vous ouvrez un format de fichier autre que PNG en utilisant la commande Fichier >
Ouvrir, vous créez un nouveau document Fireworks PNG basé sur le fichier que vous ouvrez.
Lorsque le nouveau document est un fichier PNG, l’original reste inchangé.
Pour plus d’informations sur la manière de travailler avec Freehand, Photoshop, Illustrator et
CorelDraw, voir « Utilisation de Fireworks avec d’autres applications » à la page 373.
GIF animés
Vous pouvez ouvrir les fichiers GIF dans Fireworks de deux façons.
• Vous pouvez importer un GIF animé en tant que symbole d’animation, ce qui vous permet de
modifier et de déplacer tous les éléments de l’animation en tant qu’unité simple et d’utiliser le
panneau Bibliothèque pour créer de nouvelles occurrences du symbole.
Remarque : Lorsque vous importez un GIF animé, la cadence de diffusion des images est de 0,20 seconde par
défaut. Si nécessaire, utilisez le panneau Images pour rétablir la cadence de diffusion d’origine.
• Ouvrez le fichier GIF animé comme un fichier GIF ordinaire. Les éléments du fichier GIF sont
placés en tant qu’image distincte dans une image de Fireworks. Dans Fireworks, vous pouvez
convertir le graphisme en un symbole d’animation.
EPS, fichiers
Fireworks ouvre la plupart des fichiers EPS, tels que les fichiers PhotoShop EPS, en tant
qu’images bitmap fusionnées, dans lesquelles tous les objets sont rassemblés dans un calque
unique. Toutefois, certains fichiers EPS exportés à partir d’Illustrator conservent leurs
informations vectorielles.
Concepts de base de Fireworks
79
Pour la plupart des fichiers EPS que vous ouvrez ou que vous importez, la boîte de dialogue
Options de fichier EPS s’ouvre.
Taille de l’image détermine
les dimensions de l’image et les unités dans lesquelles les proportions
de l’image sont affichées. Choisissez pixels, pourcentage, pouces ou centimètres.
Résolution indique
les pixels par unité pour la résolution.
Respecter les proportions ouvre
Anticrénelé lisse
le fichier en respectant les proportions du fichier d’origine.
les bords irréguliers dans le fichier EPS ouvert.
Si vous ouvrez ou importez des fichiers EPS Illustrator qui contiennent des informations
vectorielles, vous verrez la boîte de dialogue Options de fichier vectoriel. C’est la même boîte de
dialogue qui apparaît lorsque vous ouvrez ou importez des fichiers FreeHand. Pour plus de détails
sur les options de cette boîte de dialogue, voir « Importation de graphiques FreeHand dans
Fireworks » à la page 394.
WBMP, fichiers
Fireworks peut ouvrir des fichiers WBMP. Il s’agit de fichiers 1 bit (monochromes) qui ont été
optimisés pour les périphériques d’informatique mobile. Ce format est conçu pour les pages WAP
(Wireless Application Protocol). Vous pouvez ouvrir un fichier WBMP directement en utilisant
Fichier > Ouvrir ou importer un fichier WBMP en utilisant Fichier > Importer.
Création de fichiers PNG dans Fireworks à partir de fichiers HTML
Fireworks peut ouvrir et importer des contenus HTML créés dans d’autres applications. Lorsque
vous ouvrez ou importez un fichier HTML, Fireworks reconstruit la mise en page et les
comportements définis par le code HTML, vous permettant de recréer des pages Web contenant
des graphiques découpés, des boutons JavaScript ainsi que d’autres types d’interactivité. Cela vous
permet de récupérer des sites Web dont vous avez hérité, même si vous ne possédez pas les fichiers
PNG source. Grâce à cette fonction, vous pouvez ouvrir ou importer rapidement une page Web
afin de mettre à jour des graphiques, changer la mise en page du document ou modifier des liens
de navigation, des boutons et d’autres éléments interactifs, le tout sans avoir à reconstruire la page
depuis le début ou à modifier les scripts.
80
Chapitre 3
Etant donné que Fireworks exporte les contenus HTML sous la forme d’une table HTML, cela
détermine également la mise en page du document pour des HTML importés se basant sur des
tables HTML. Un fichier HTML doit contenir au moins une table pour que Fireworks soit en
mesure de le reconstruire. Pour plus de détails à propos de l’HTML, voir « Exportation du fichier
au format HTML » à la page 362.
Vous avez plusieurs façons d’intégrer des contenus HTML dans Fireworks :
• Vous pouvez ouvrir toutes les tables HTML dans un fichier HTML.
• Vous pouvez ouvrir la première table HTML rencontrée par Fireworks dans un fichier HTML.
• Vous pouvez importer la première table HTML rencontrée par Fireworks dans un
document Fireworks existant.
Remarque : Fireworks peut également importer des documents qui utilisent un encodage UTF-8 ainsi que ceux
écrits en XHTML. Les fichiers XHTML utilisent habituellement l’extension .xhtm ou .xhtml. Pour plus d’informations
concernant ces types de fichier, « Exportation de fichiers avec le codage UTF-8 » à la page 369 et « Exportation
d’un fichier XHTML » à la page 368.
Pour ouvrir toutes les tables d’un fichier HTML :
1
Choisissez Fichier > Reconstituer la table.
2
Sélectionnez le fichier HTML contenant les tables que vous voulez ouvrir et cliquez sur Ouvrir.
Chaque table s’ouvre dans sa propre fenêtre de document.
Pour ouvrir uniquement la première table d’un fichier HTML :
1
Choisissez Fichier > Ouvrir.
2
Sélectionnez le fichier HTML contenant la table que vous voulez ouvrir et cliquez sur Ouvrir.
La première table du fichier HTML s’ouvre dans une nouvelle fenêtre de document.
Pour importer la première table d’un fichier HTML vers un document Fireworks ouvert :
1
Choisissez Fichier > Importer.
2
Sélectionnez le fichier HTML à partir duquel vous voulez effectuer l’importation et cliquez sur
Ouvrir.
3
Lorsque vous vous trouvez à l’endroit où vous désirez qu’apparaisse la table importée, cliquez
sur le pointeur d’insertion.
Insertion d’objets dans un document Fireworks
Importez des images, utilisez la méthode glisser-déposer ou copiez-collez des objets vectoriels, des
images bitmap ou du texte créé dans d’autres applications dans un document Fireworks. Vous
pouvez également importer des images en provenance d’un appareil photo numérique ou d’un
scanner.
Glisser-déposer
Utilisez la méthode glisser-déposer pour importer des objets vectoriels, des images bitmap ou du
texte dans Fireworks à partir d’applications prenant en charge ce type de méthode :
• FreeHand 7 ou plus récent ;
• Flash 3 ou plus récent ;
Concepts de base de Fireworks
81
•
•
•
•
•
•
Photoshop 4 ou plus récent ;
Illustrator 7 ou plus récent ;
Microsoft Office 97 ou plus récent ;
Microsoft Internet Explorer 3 ou plus récent ;
Netscape Navigator 3 ou plus récent ;
CorelDRAW 7 ou plus récent.
Pour utiliser la méthode glisser-déposer dans Fireworks :
A partir de l’autre application, faites glisser l’objet ou le texte dans Fireworks.
Collage dans Fireworks
Lorsque vous collez dans Fireworks un objet copié à partir d’une autre application, cet objet est
placé au centre du document actif. Vous pouvez copier et coller un objet ou du texte dans
n’importe lesquels des formats suivants depuis le Presse-papiers :
•
•
•
•
•
•
•
•
•
•
•
FreeHand 7 ou plus récent ;
Illustrator ;
fichiers PNG ;
PICT (Macintosh) ;
DIB (Windows) ;
BMP (Windows) ;
texte ASCII ;
EPS ;
WBMP ;
TXT ;
RTF.
Pour coller dans Fireworks :
1
Dans l’autre application, copiez l’objet ou le texte que vous souhaitez coller.
2
Dans Fireworks, collez l’objet ou le texte dans votre document.
Localisation des objets collés
Lorsque vous collez un objet dans Fireworks, le placement de l’objet collé dépend de ce qui
est sélectionné :
• Si au moins un objet d’un calque simple est sélectionné, l’objet collé est placé devant — ou
empilé directement au-dessus — l’objet sélectionné dans ce même calque.
• Si le calque est sélectionné ainsi que, soit aucun, soit tous les objets, l’objet collé est placé
devant — ou empilé directement au-dessus — l’objet placé tout en haut de ce même calque.
• Si deux ou davantage objets de plusieurs calques sont sélectionnés, l’objet collé est placé devant
— ou empilé directement au-dessus — l’objet placé tout en haut du calque le plus haut.
82
Chapitre 3
• Si le calque Web ou bien un objet du calque Web est sélectionné, l’objet collé est placé devant
— ou empilé au-dessus de — tous les autres objets du calque le plus bas.
Remarque : Le calque Web est un calque spécial qui contient tous les objets Web et qui demeure toujours en haut
du panneau Calques. Pour plus d’informations concernant les calques, voir Chapitre 10, « Calques, masquage et
fondu », à la page 227.
Rééchantillonnage des objets collés
Lorsque vous collez un bitmap avec une résolution différente de celle du document Fireworks de
destination, Fireworks vous demande si vous souhaitez rééchantillonner le bitmap.
Le rééchantillonnage ajoute ou supprime des pixels d’un bitmap redimmensionnée afin de
correspondre le plus possible à l’apparence du bitmap d’origine. Le rééchantillonnage d’un
bitmap dans une résolution trop haute provoque généralement une petite perte de qualité.
Toutefois, le rééchantillonnage dans une résolution trop basse cause toujours une perte de
données et généralement une baisse de qualité.
Pour rééchantillonner un objet bitmap en le collant :
1
Copiez le bitmap dans le Presse-papiers de Fireworks ou d’un autre programme.
2
Choisissez Edition > Coller dans Fireworks.
Si l’image bitmap du Presse-papiers possède une résolution différente du document actif, une
boîte de dialogue apparaît, vous demandant si vous voulez oui ou non effectuer un
rééchantillonnage.
3
Choisissez l’une des options suivantes :
•
Oui conserve la largeur et la hauteur d’origine du bitmap collé, ajoutant ou supprimant des
pixels si nécessaire.
•
Non conserve
tous les pixels d’origine, ce qui peut rendre la taille relative de l’image collée plus
grande ou plus petite que prévu.
Importation de fichiers PNG
Vous pouvez importer des fichiers PNG de Fireworks dans le calque courant du document
Fireworks actif. Tous les objets référence et les objets découpe sont placés sur le calque Web du
document. Pour plus d’informations concernant les découpes et les objets Web, voir
« Visualisation et affichage des découpes et des repères de découpe » à la page 273. Pour plus
d’informations concernant les calques, voir « Utilisation des calques » à la page 227.
Pour importer un fichier PNG dans le calque d’un document Fireworks :
1
Dans le panneau Calques, sélectionnez le calque dans lequel vous voulez importer le fichier.
2
Choisissez Fichier > Importer pour ouvrir la boîte de dialogue Importer.
3
Recherchez le fichier à importer, puis cliquez sur Ouvrir.
4
Sur le document, positionnez le pointeur d’importation à l’endroit où vous voulez placer le
coin supérieur gauche de l’image.
5
Importez le fichier :
• Cliquez pour importer l’image.
Concepts de base de Fireworks
83
• Faites glisser le pointeur d’importation pour redimensionner l’image importée.
Les proportions de l’image sont respectées.
Importation d’une image par l’intermédiaire d’un scanner ou d’un appareil
photo numérique
Pour être en mesure d’importer des images, le scanner ou l’appareil photo numérique doivent être
comptatibles TWAIN (Windows) ou bien supporter les plug-ins Photoshop Acquire
(Macintosh). Ces images sont ouvertes dans un nouveau document.
Remarque : Fireworks ne peut pas importer d’images issues d’un scanner ou d’un appareil photo numérique, à
moins que les pilotes, modules et plug-ins appropriés du logiciel soient installés. Pour avoir des instructions plus
spécifiques sur l’installation, les paramètres et les options, consultez la documentation livrée avec le module TWAIN
ou le plug-in Photoshop Acquire utilisé.
Sur le Macintosh, Fireworks recherche automatiquement les plug-ins Photoshop Acquire dans le
dossier Plug-ins du dossier de l’application Fireworks. Si vous ne souhaitez pas placer les plug-ins
à cet endroit, vous devez indiquer un autre emplacement à Fireworks.
Remarque : L’emplacement exact du dossier Plug-ins dépend de votre système d’exploitation. Pour plus
d’informations, voir « Utilisation des fichiers de configuration » à la page 439.
Pour diriger Fireworks vers les plug-ins Photoshop Acquire :
1
Dans Fireworks, choisissez Edition > Préférences.
Remarque : Sur Mac OS X, choisissez Fireworks > Préférences.
2
Cliquez sur l’onglet Dossiers.
3
Activez Plug-ins Photoshop.
4
Cliquez sur Parcourir si la boîte de dialogue Sélectionner le dossier contenant les plug-ins de
Photoshop (Windows) ou Choisissez un dossier (Macintosh) ne s’ouvre pas automatiquement.
5
Recherchez le dossier comportant les plug-ins Photoshop.
Pour importer une image par l’intermédiaire d’un scanner ou d’un appareil photo numérique :
1
Connectez le scanner ou l’appareil photo à votre ordinateur.
2
Installez le logiciel qui accompagne le scanner ou la camera, si cela n’a pas déjà été fait.
3
Dans Fireworks, choisissez Fichier > Scanner et choisissez un module TWAIN ou un plug-in
Photoshop Acquire qui corresponde à l’appareil à partir duquel vous importez une image.
Remarque : Pour la plupart des modules TWAIN ou des plug-ins Photoshop Acquire, des boîtes de dialogue
supplémentaires permettent de spécifier d’autres options.
4
Suivez les instructions pour appliquer les paramètres désirés.
L’image importée est ouverte dans un nouveau document Fireworks.
Enregistrement de fichiers Fireworks
Lorsque vous créez ou ouvrez un document dans Fireworks, le nom de fichier du document
possède l’extension .png. Cela survient même si vous ouvrez un fichier avec une autre extension,
telle que .jpg, .gif ou .psd. Le fichier affiché dans le document Fireworks devient votre fichier
source, ou fichier de travail. Toute modification que vous effectuez est appliquée au fichier PNG.
L’utilisation d’un PNG de Fireworks comme fichier source amène les avantages suivants :
84
Chapitre 3
• Le fichier PNG source est toujours modifiable. Vous pouvez faire marche arrière et effectuer
des modifications supplémentaires, même après l’exportation du fichier dans le but de l’utiliser
sur le Web.
• Si vous ouvrez un fichier existant d’un format différent, tel que le JPEG, et que vous le
modifiez, votre fichier d’origine est protégé. Les modifications sont en fait réalisées sur un
fichier PNG de Fireworks, laissant intact le fichier d’origine.
• Les graphiques complexes peuvent être découpés en morceaux dans le fichier PNG, puis
exportés sous forme de fichiers multiples avec différents formats de fichier et divers paramètres
d’optimisation.
Les documents Fireworks sont toujours enregistrés dans le format PNG. Pour enregistrer les
modifications effectuées sur un fichier JPEG, GIF ou un autre fichier graphique dans son format
d’origine, vous devez exporter le fichier.
Remarque : Sous Windows, lorsque vous ouvrez un fichier non-PNG dans Fireworks, le fichier est encore identifié
via son extension d’origine, dans la fenêtre du document de Fireworks. Toutefois, toute modification que vous
effectuez est effectivement faite dans le fichier PNG de Fireworks.
Pour enregistrer un nouveau document Fireworks :
1
Choisissez Fichier > Enregistrer sous.
La boîte de dialogue Enregistrer sous apparaît.
2
Recherchez l’emplacement désiré et tapez le nom du fichier.
Vous n’avez pas besoin de saisir une extension, Fireworks s’en chargera.
3
Cliquez sur Enregistrer.
Pour enregistrer un document Fireworks existant :
Choisissez Fichier > Enregistrer.
Pour enregistrer (exporter) un document dans un autre format :
1
Choisissez un format de fichier dans le panneau Optimiser.
2
Choisissez Fichier > Exporter pour exporter le document.
Pour plus d’informations, voir « Optimisation et exportation » à la page 333.
Concepts de base de Fireworks
85
L’environnement de travail de Fireworks
Lorsque vous ouvrez pour la première fois un document dans Fireworks MX, l’environnement de
travail est activé, y compris le panneau Outils, le Vérificateur de propriétés, les menus et d’autres
panneaux. Le panneau Outils, à gauche de l’écran, contient des catégories libellées, incluant les
groupes d’outils bitmap, vectoriels et Web. Le Vérificateur de propriétés apparaît par défaut en bas
du document, et affiche initialement les propriétés du document. Il change ensuite pour afficher les
propriétés d’un outil nouvellement sélectionné ou d’un objet actuellement sélectionné lorsque vous
travaillez dans le document. Les panneaux sont initialement rassemblés en groupes le long du bord
droit de l’écran. La fenêtre du document apparaît au centre de l’application.
86
Chapitre 3
Utilisation du panneau Outils
Le panneau Outils est organisé en six catégories : Sélection, Bitmap, Vecteur, Web, Couleurs et
Affichage. Dans les précédentes versions de Fireworks, vous deviez commuter entre les modes
vecteur et bitmap. Maintenant, il vous suffit de choisir un outil et de l’utiliser. L’application
applique l’outil de manière appropriée.
Modification des options des outils
Lorsque vous choisissez un outil, le Vérificateur de propriétés affiche les options des outils.
Certaines options d’outils restent affichées lorsque vous travaillez avec l’outil. Pour les autres
outils, tels que les outils des formes de base, la Plume et la Ligne, le Vérificateur de propriétés
affiche les propriétés des objets sélectionnés. Pour plus d’informations sur le Vérificateur de
propriétés, voir « Utilisation du Vérificateur de propriétés » à la page 88.
Pour que s’affiche dans le Vérificateur de propriétés les options d’un outil que vous êtes déjà en
train d’utiliser :
Choisissez Sélection > Désélectionner pour désélectionner tous les objets.
Concepts de base de Fireworks
87
Pour plus d’informations sur des options d’outils spécifiques, voir les sections qui introduisent les
différents outils dans Utilisation de Fireworks ou consultez l’aide de Fireworks.
Sélection d’un outil à partir d’un groupe d’outils
Un petit triangle dans le coin inférieur droit d’un outil dans le panneau Outils indique qu’il fait
partie d’un groupe d’outils. Par exemple, l’outil Rectangle fait partie du groupe des outils destiné
aux formes de base, qui inclut également les outils Rectangle arrondi, Ellipse et Polygone.
Pour choisir un outil à partir d’un groupe d’outils :
1
Cliquez sur l’icône de l’outil et maintenez enfoncé le bouton de la souris.
Un menu contextuel apparaît avec les icônes des outils, le nom des outils et les touches de
raccourci. L’outil actuellement sélectionné possède une encoche à gauche de son nom.
2
Faites glisser le pointeur afin de sélectionner l’outil désiré et relâchez le bouton de la souris.
L’outil apparaît dans le panneau Outils, et les options de l’outil apparaissent dans le
Vérificateur de propriétés.
Utilisation du Vérificateur de propriétés
Le Vérificateur de propriétés est un panneau sensible au contexte qui affiche les propriétés de la
sélection courante, les options de l’outil courant ou bien les propriétés du document. Par défaut,
le Vérificateur de propriétés est ancré en bas de l’espace de travail.
Le Vérificateur de propriétés peut être ouvert à mi-hauteur, présentant deux lignes de propriétés,
ou quatre en pleine hauteur. Vous pouvez également masquer totalement le Vérificateur de
propriétés en le laissant dans l’espace de travail.
Remarque : Dans Utilisation de Fireworks, la plupart des procédures supposent que le Vérificateur de propriétés est
complètement déployé.
Pour annuler l’ancrage du Vérificateur de propriétés :
Faites glisser la poignée du coin supérieur gauche vers un autre endroit de l’espace de travail.
88
Chapitre 3
Pour ancrer le Vérificateur de propriétés en bas de l’espace de travail (uniquement Windows) :
Faites glisser la barre latérale du Vérificateur de propriétés en bas de l’écran.
Pour déployer le Vérificateur de propriétés de la mi-hauteur à la pleine hauteur, permettant ainsi
de découvrir des options supplémentaires :
• Cliquez sur la flèche d’extension située dans le coin inférieur droit du Vérificateur de
propriétés.
• Cliquez sur l’icône en haut à droite du Vérificateur de propriétés et choisissez Pleine hauteur à
partir du menu Options du Vérificateur de propriétés.
Remarque : Sous Windows, le menu Options est disponible uniquement lorsque le Vérificateur de propriétés est
ancré.
Pour réduire à mi-hauteur le Vérificateur de propriétés :
• Cliquez sur la flèche d’extension située dans le coin inférieur droit du Vérificateur de
propriétés.
• Choisissez Demi-hauteur à partir du menu Options du Vérificateur de propriétés.
Remarque : Sous Windows, le menu Options est disponible uniquement lorsque le Vérificateur de propriétés est
ancré.
Pour réduire le Vérificateur de propriétés lorsqu’il est ancré :
• Cliquez sur la flèche d’extension ou sur le titre du Vérificateur de propriétés.
• Choisissez Réduire le groupe Panneau à partir du menu Options du Vérificateur de propriétés
ancré.
Pour plus d’informations sur des options spécifiques du Vérificateur de propriétés, voir les parties
appropriées dans Utilisation de Fireworks ou l’aide de Fireworks.
Utilisation des panneaux
Les panneaux sont des groupes de commandes flottants qui permettent de modifier l’aspect d’un
objet sélectionné ou d’éléments du document. Il permettent, entre autres, de travailler sur des
images, des calques, des symboles et des couleurs du nuancier. Il est possible de faire glisser les
panneaux de façon à les regrouper en fonction de vos préférences.
Les panneaux Mélangeur et Nuancier permettent
de gérer la palette de couleurs du document
actif.
Les panneaux Calques et Images permettent d’organiser la structure d’un document et
comportent des options de création, suppression et manipulation des calques et des images. Le
panneau Images inclut des options de création d’animations.
Le panneau Informations fournit des informations sur les dimensions des objets sélectionnés et les
coordonnées exactes du pointeur au cours de son déplacement.
Concepts de base de Fireworks
89
Le panneau Comportements gère
les comportements qui déterminent ce qui se produit lorsque
des références ou des découpes réagissent aux déplacements de la souris.
Le panneau Historique répertorie les commandes que vous avez utilisées récemment de façon à
pouvoir les annuler et les rétablir rapidement. En outre, vous pouvez sélectionner des actions
multiples, puis les enregistrer et les réutiliser en tant que commandes. Pour plus d’informations,
voir « Utilisation du panneau Historique pour annuler et répéter des actions multiples » à la
page 105.
Le panneau Bibliothèque comporte des symboles graphiques, de boutons et d’animation. Vous
pouvez facilement faire glisser les occurrences de ces symboles, du panneau Bibliothèque vers
votre document. Vous pouvez modifier l’ensemble des occurrences en modifiant simplement le
symbole. Pour plus d’informations, voir Chapitre 11, « Utilisation des styles,
des symboles et des adresses URL », à la page 255.
Le panneau Optimiser vous
permet de gérer les paramètres qui contrôlent la taille et le type de
fichier d’un objet, de travailler avec la palette des couleurs du fichier ou de la découpe à exporter.
Le panneau Styles vous permet de stocker et de réutiliser des combinaisons de caractéristiques
d’objets ou de choisir un style stocké.
Le panneau URL vous permet de créer des bibliothèques contenant les URL les plus fréquemment
utilisées.
Le panneau Rechercher et remplacer vous permet de rechercher et de remplacer des éléments tels
que du texte, des URL, des polices et des couleurs dans un ou plusieurs documents.
Le Journal de projets aide
à trouver et à contrôler les modifications effectuées dans des fichiers
multiples lors de l’utilisation de l’outil rechercher/remplacer ou du traitement par lots.
Le panneau Réponses est une nouvelle ressource qui télécharge de manière dynamique une
grande quantité d’informations utiles à partir du site Web de Macromedia. Le panneau dispose de
fonctions de recherche par mot-clé permettant de trouver des informations Web à partir d’une
variété de sources.
Organisation des groupes de panneaux et des panneaux
Par défaut, les panneaux Fireworks MX sont rassemblés par groupes dans la zone d’ancrage, dans
la partie droite de l’espace de travail. Vous pouvez annuler l’ancrage des groupes de panneaux,
ajouter des panneaux à un groupe, annuler l’ancrage de panneaux individuels, réorganiser l’ordre
des groupes de panneaux ancrés, et réduire et fermer des groupes de panneaux. Vous pouvez
également ouvrir et fermer des panneaux individuels.
Pour annuler l’ancrage ou déplacer un groupe de panneaux ou un panneau :
Faites glisser la poignée du panneau dans le coin supérieur gauche et déplacez-le de la zone
d’ancrage des panneaux vers la droite de l’écran.
Pour ancrer un groupe de panneaux ou un panneau :
Faites glisser la poignée du panneau vers la zone d’ancrage des panneaux.
Lorsque vous faites glisser un panneau ou un groupe de panneaux au-dessus de la zone d’ancrage
des panneaux, une ligne ou un rectangle d’aperçu du placement montre où s’effectuera le
placement au sein des groupes.
90
Chapitre 3
Pour réduire ou déployer un groupe de panneaux ou un panneau, exécutez l’une des actions
suivantes :
• Cliquez sur le titre du groupe de panneaux ou du panneau.
Remarque : La barre de titre est encore visible si le groupe de panneaux ou le panneau est réduit.
• Cliquez sur la flèche d’extension située dans le coin supérieur gauche du groupe de panneaux
ou du panneau.
Pour séparer un panneau d’un groupe de panneaux :
Faites glisser l’onglet du panneau et éloignez-le du groupe de panneaux.
Pour ajouter un panneau dans un groupe de panneaux ouvert :
Faites glisser la poignée dans la zone située sous le nom du groupe de panneaux.
Pour renommer un groupe de panneaux :
1
Cliquez sur l’icône située en haut à droite du groupe de panneaux et choisissez Renommer le
groupe Panneau à partir du menu Options.
2
Tapez le nouveau nom.
Pour que la résolution de votre écran récupère les positions par défaut des panneaux, exécutez
l’une des actions suivantes :
• Choisissez Commandes > Jeux de disposition panneau > 800 x 600.
• Choisissez Commandes > Jeux de disposition panneau > 1024 x 768.
• Choisissez Commandes > Jeux de disposition panneau > 1280 x 1024.
Pour ouvrir un panneau :
Choisissez le nom du panneau dans le menu Fenêtre.
Conseil : Une encoche à côté du nom d’un panneau dans le menu Fenêtre indique que le panneau est ouvert.
Pour fermer un panneau, utilisez l’une des méthodes suivantes :
• Choisissez le nom du panneau dans le menu Fenêtre.
• Si le panneau est flottant, cliquez sur le bouton Fermer de la barre de titre du panneau.
Pour masquer tous les panneaux et le Vérificateur de propriétés :
Choisissez Affichage > Masquer les panneaux. Pour afficher les panneaux masqués, choisissez à
nouveau Affichage > Masquer les panneaux.
Remarque : Les panneaux qui sont masqués lorsque vous choisissez Masquer les panneaux restent masqués
lorsque vous désélectionnez cette commande.
Paramétrage des options de panneaux
En général, vous pouvez modifier les options sur un panneau en utilisant les menus contextuels,
les palettes de couleurs, les curseurs ou les cadrans. Certaines options possèdent des champs
d’édition dans lesquels vous pouvez entrer du texte ou des valeurs.
Concepts de base de Fireworks
91
Pour changer une option en utilisant un menu contextuel :
1
Cliquez sur l’option.
2
Changez la valeur :
• Choisissez une option ou un échantillon de couleur.
• Faites glisser le curseur de la glissière ou le sélecteur.
• Tapez la première lettre de l’option que vous voulez choisir, et appuyez sur la lettre de manière
répétée pour faire le tour de toutes les options commençant par cette lettre (Windows
uniquement).
Pour taper des informations dans la zone de texte d’un panneau :
1
Cliquez à l’intérieur du champ d’édition.
2
Tapez une valeur.
3
Appuyez sur Entrée.
Utilisation du menu Option des groupes de panneaux ou des panneaux
Chaque panneau et groupe de panneaux possède un menu Options qui liste toute une sélection
spécifique au panneau ou groupe de panneaux actif. Un menu Options apparaît également dans le
Vérificateur de propriétés (excepté sous Windows lorsque le Vérificateur de propriétés est
flottant).
Pour choisir une option à partir du menu Option d’un panneau ou d’un groupe de panneaux :
1
Cliquez sur l’icône du menu Options dans le coin supérieur droit du panneau ou du groupe de
panneaux pour ouvrir le menu.
2
Cliquez pour choisir un élément du menu.
Enregistrement des dispositions des panneaux
Vous pouvez enregistrer la disposition des panneaux en utilisant le menu Commandes. Ainsi, la
prochaine fois que vous ouvrirez Fireworks, les panneaux seront placés à la même position.
92
Chapitre 3
Pour enregistrer la disposition d’un panneau :
1
Choisissez Commandes > Enregistrer la disposition des panneaux.
2
Nommez la disposition du panneau et cliquez sur OK.
Pour ouvrir une disposition de panneau enregistrée :
Choisissez Commandes > Jeux de disposition panneau et choisissez une disposition à partir du
sous-menu.
Bouton Exportation rapide
Le bouton Exportation rapide vous permet d’exporter vos fichiers Fireworks vers un certain
nombre d’applications Macromedia, y compris Dreamweaver, Flash, Director et FreeHand. En
outre, vous pouvez exporter vos fichiers vers Photoshop, FrontPage, Adobe® GoLive® et
Illustrator, ou vous pouvez prévisualiser vos fichiers dans le navigateur de votre choix. Pour plus
d’informations, voir « Utilisation du bouton Exportation rapide » à la page 371.
Ouverture et déplacement des barres d’outils (Windows uniquement)
Fireworks MX pour Windows dispose de deux barres d’outils incluant des commandes classiques
de Fireworks.
Pour afficher ou masquer une barre d’outils :
Choisissez Fenêtre > Barres d’outils et choisissez une barre d’outils.
Pour rendre une barre d’outils flottante :
Faites glisser la barre d’outils en l’éloignant de son lieu d’ancrage.
Remarque : Si une barre d’outils est flottante, vous pouvez cliquer sur le bouton Fermer situé en haut à droite de la
barre titre pour la fermer.
Pour ancrer une barre d’outils :
Faites glisser la barre d’outils vers une zone d’ancrage, en haut, en bas, à gauche ou à droite de la
fenêtre de l’application jusqu’à ce qu’apparaisse le rectangle de visualisation du placement.
Navigation et visualisation d’un document
Vous pouvez contrôler le grossissement du document, le nombre de fenêtres et le mode
d’affichage. En outre, vous pouvez obtenir facilement une vue d’ensemble d’un document. Cette
option est particulièrement utile lorsque vous grossissez une partie de votre document et perdez la
vue l’ensemble.
Concepts de base de Fireworks
93
Zoom avant et vue d’ensemble
Fireworks vous permet d’effectuer un zoom avant ou arrière en fonction d’un pourcentage de
grossissement préétabli ou défini par l’utilisateur.
L’outil Zoom
Le menu contextuel Zoom
L’outil Main
Pour réaliser un zoom avant en utilisant des agrandissements prédéfinis, exécutez l’une des
actions suivantes :
• Choisissez l’outil Zoom et cliquez pour spécifier le nouveau point central à l’intérieur de la
fenêtre du document. A chaque clic, l’image s’agrandit, passant ainsi au prochain stade
d’agrandissement prédéfini.
• Choisissez un paramètre de zoom à partir du menu contextuel Définir le zoom situé en bas de
la fenêtre du document.
• Choisissez Zoom avant ou alors un agrandissement prédéfini à partir du menu Affichage.
Pour effectuer un zoom arrière en utilisant des réductions prédéfinies, exécutez l’une des actions
suivantes :
• Cliquez à l’intérieur de la fenêtre du document avec l’outil Zoom tout en appuyant sur la
touche Alt (Windows) ou Option (Macintosh). Chaque clic réduit l’affichage au prochain
pourcentage prédéfini.
94
Chapitre 3
• Choisissez un paramètre de zoom à partir du menu contextuel Définir le zoom situé en bas de
la fenêtre du document.
• Choisissez Zoom arrière ou alors une réduction prédéfinie à partir du menu Affichage.
Pour zoomer une zone spécifique sans être contraint par des agrandissements de zoom
prédéfinis :
1
Choisissez l’outil Zoom.
2
Effectuez un glissement au-dessus de la partie de l’image que vous voulez agrandir.
La taille du cadre de la sélection du zoom détermine le pourcentage exact d’agrandissement qui
est affiché dans le champ Définir le zoom.
Remarque : Vous ne pouvez pas saisir de pourcentage d’agrandissement dans le champ Définir le zoom.
Pour effectuer un zoom arrière basé sur une zone spécifique :
En maintenant la touche Alt (Windows) ou Option (Macintosh) appuyée, faites glisser une zone
de sélection avec l’outil Zoom.
Pour revenir à un agrandissement de 100 % :
Double-cliquez sur l’outil Zoom dans le panneau Outils.
Pour obtenir une vue d’ensemble du document :
1
Choisissez l’outil Main.
2
Faites glisser le pointeur Main.
Si la vue d’ensemble passe au-delà des limites du document, l’affichage demeure une vue
d’ensemble de telle sorte que vous pouvez continuer à travailler avec des pixels le long du bord
du document.
Pour afficher l’ensemble du document dans la fenêtre active :
Double-cliquez sur l’outil Main.
Utilisation des modes d’affichage pour gérer l’espace de travail
Les boutons du mode d’affichage dans la zone Affichage du panneau Outils vous permettent de
choisir parmi les trois modes d’affichage afin de contrôler la disposition de votre espace de travail :
Le Mode normal est
l’affichage par défaut de la fenêtre du document.
Le Mode plein écran avec affichage des menus est un affichage maximisé de la fenêtre du
document placé sur un arrière-plan gris avec des menus, des barres d’outils, des barres de
défilement et des panneaux visibles.
Le Mode plein écran est
un affichage maximisé de la fenêtre du document placé sur un arrièreplan noir avec aucun menu, aucune barre d’outils ou barre de titre visible.
Pour changer les modes d’affichage, exécutez l’une des actions suivantes :
• Pour passer au Mode plein écran avec affichage des menus, cliquez sur le bouton Mode plein
écran avec affichage des menus du panneau Outils.
• Pour passer au Mode plein écran, cliquez sur le bouton Mode plein écran dans le panneau
Outils.
Concepts de base de Fireworks
95
• Pour revenir au Mode normal, cliquez sur le bouton droit de la souris (Windows) ou sur le
bouton Contrôle et cliquez (Macintosh) dans la fenêtre du document, puis sélectionnez
Quitter le mode plein écran, ou bien cliquez sur le bouton Mode normal à partir du panneau
Outils.
Affichage de vues multiples du document
Vous pouvez afficher simultanément différents niveaux de grossissement d’un même document. Les
modifications que vous effectuez dans un affichage sont automatiquement appliquées dans tous les
autres affichages du même document.
Pour ouvrir une vue de document supplémentaire à un niveau de grossissement différent :
1
Choisissez Fenêtre > Nouvelle fenêtre.
2
Choisissez un paramètre de zoom pour la nouvelle fenêtre.
Pour disposer les vues de document en mosaïque :
Choisissez Fenêtre > Mosaïque horizontale ou Fenêtre > Mosaïque verticale.
Pour fermer une fenêtre de document :
Cliquez sur la case de fermeture de la fenêtre.
Contrôle de l’actualisation de document
Les modes d’affichage affectent la représentation à l’écran d’un document, mais pas les données de
l’objet ni la qualité de la sortie.
Pour contrôler le réaffichage du document :
Choisissez Affichage > Affichage normal.
Si Affichage normal est sélectionné, Fireworks affiche le document avec toutes les couleurs
disponibles et tous les détails. Si Affichage normal est désactivé, Fireworks affiche des trajets d’une
largeur d’un pixel, sans trame, et représente les emplacements d’images par des cases comportant
une croix.
Les modes Affichage et brouillon
Pour afficher un document tel qu’il apparaîtrait sur une autre plate-forme :
• Sous Windows, choisissez Affichage > Gamma Macintosh.
96
Chapitre 3
• Sur un Macintosh, choisissez Affichage > Gamma Windows.
Fireworks prévisualise le document tel qu’il apparaîtrait sur la plate-forme de l’autre ordinateur.
Par exemple, si vous travaillez sur la plate-forme Windows, vous pouvez utiliser cette
commande pour prévisualiser un document qui s’afficherait sur la plate-forme Macintosh.
Utilisation de la barre de lancement
La barre de lancement comporte des icônes pour l’ouverture et la fermeture des panneaux les plus
utilisés, ce qui inclut le mélangeur ainsi que les panneaux Informations, Optimiser, Calques,
Bibliothèque, Styles et Comportements. Si vous l’avez activé, la Barre de lancement se trouve en
bas de la fenêtre du document. Par défaut, la barre de lancement n’est pas visible.
Pour afficher la Barre de lancement :
1
Choisissez Edition > Préférences.
2
Dans l’onglet Général, choisissez Afficher les icônes des onglets à partir de l’espace de travail,
puis cliquez sur OK.
Pour ouvrir ou fermer un panneau à partir de la barre de lancement :
Cliquez sur l’icône correspondant du panneau.
Remarque : L’arrière-plan de l’icône du panneau est sélectionné tandis que le panneau est ouvert.
Utilisation de la barre d’état (Windows uniquement)
Lorsqu’elle est activée, la barre d’état est affichée en bas de la fenêtre de l’application de Fireworks.
Elle fournit des conseils et des informations utiles concernant les objets et les outils sélectionnés.
La barre d’état est désactivée par défaut.
Pour activer ou désactiver la barre d’état :
Choisissez Affichage > Barre d’état.
Pour utiliser la barre d’état :
Sélectionnez un objet ou un outil, ou bien déplacez le pointeur sur un outil du panneau Outils.
Des informations concernant l’objet sélectionné ou l’opération sont affichées dans la barre d’état.
Modification du document
La première fois que vous créez un nouveau document Fireworks, vous devez spécifier les
caractéristiques du document. Vous pouvez modifier la taille et la couleur du document et
changer la résolution de l’image à n’importe quel moment en utilisant le menu Modifier ou le
Vérificateur de propriétés. Vous pouvez également faire pivoter le document et en supprimer les
parties inutiles.
Modification de la taille, de la couleur et de la résolution du document
Fireworks facilite la modification de la taille et de la couleur du document ainsi que de la
résolution de l’image.
Concepts de base de Fireworks
97
Pour changer la taille du document :
1
Utilisez l’une des méthodes suivantes :
• Choisissez Modification > Document > Taille du document.
• Choisissez Sélection > Aucune sélection, cliquez sur l’outil Pointeur pour afficher les propriétés
du document dans le Vérificateur de propriétés, puis cliquez sur le bouton Taille du document.
2
Entrez les nouvelles dimensions dans les champs Largeur et Hauteur.
3
Cliquez sur l’un des boutons d’ancrage pour spécifier les côtés du document où Fireworks
pourra ajouter ou supprimer des éléments, puis cliquez sur OK.
Remarque : L’ancre centrale est sélectionnée par défaut, ce qui indique que les changements de taille du
document se font sur tous les côtés.
Pour changer la couleur du document à partir du menu Modification :
1
Choisissez Modification > Document > Couleur du fond.
2
Choisissez une couleur de fond blanche, transparente ou personnalisée. Si vous choisissez
Personnalisée, cliquez sur une couleur de la fenêtre contextuelle du nuancier.
Pour sélectionner la couleur du document à partir du Vérificateur de propriétés :
1
Choisissez Sélection > Aucune sélection, cliquez sur l’outil Pointeur pour afficher les propriétés
du document dans le Vérificateur de propriétés, puis cliquez sur la case Couleur de fond.
2
Sélectionnez une couleur à partir de la fenêtre contextuelle du nuancier ou cliquez sur une
couleur quelconque de l’écran avec la pipette. Pour choisir un document transparent, cliquez
sur le bouton Aucune de la fenêtre contextuelle du nuancier.
Pour redimensionner un document et son contenu :
1
Utilisez l’une des méthodes suivantes :
• Choisissez Sélection > Aucune sélection, cliquez sur l’outil Pointeur pour afficher les propriétés
du document dans le Vérificateur de propriétés, puis cliquez sur le bouton Taille de l’image
dans le Vérificateur de propriétés.
• Choisissez Modification > Document > Taille de l’image.
La boîte de dialogue Taille de l’image s’affiche.
98
Chapitre 3
2
A partir des zones de texte Dimensions en pixels, tapez les dimensions horizontales et verticales
voulues.
Vous pouvez changer les unités de mesure. Si l’option Rééchantillonner l’image est désactivée,
vous pouvez changer la Résolution ou la Taille, mais pas les dimensions en pixels.
3
Dans les champs du groupe Taille, saisissez les dimensions horizontales et verticales pour
l’image imprimée.
4
A partir de la zone de texte Résolution, tapez une nouvelle résolution.
Vous pouvez choisir entre pixels/pouce et pixels/cm pour l’unité de mesure ou choisir
Rééchantillonner l’image. Lorsque vous changez la valeur de Résolution, vous changez
également la dimension en pixels.
5
Utilisez l’une des méthodes suivantes :
• Pour conserver les proportions du document, sélectionnez l’option Respecter les proportions.
• Désactivez cette option pour redimensionner la largeur et la hauteur indépendamment.
6
Activez la case Rééchantillonner l’image pour ajouter ou supprimer des pixels pendant le
redimensionnement de l’image de façon à obtenir un aperçu du document sous sa nouvelle taille.
7
Cliquez sur OK.
Rééchantillonnage
La méthode de rééchantillonnage utilisée par Fireworks, diffère de celle des autres applications
d’édition d’image. Le programme Fireworks traite aussi bien des objets image bitmap composés
de pixels que des trajets composés d’objets vectoriels.
• Lorsqu’un objet bitmap est rééchantillonné, des pixels sont ajoutés ou supprimés pour
l’agrandir ou le réduire.
• Lorsqu’un objet vectoriel est rééchantillonné, la perte de qualité est faible, car le trajet est
redessiné mathématiquement pour obtenir la taille voulue.
Dans la mesure où les attributs des objets vectoriels de Fireworks sont en fait des pixels, certains
traits ou certaines trames peuvent sembler légèrement différents à la suite du rééchantillonnage,
car les pixels qui composent le trait ou la trame doivent être redessinés.
Remarque : Les repères, les objets référence et les objets découpe sont redimensionnés lorsque la taille de l’image
du document est modifiée.
Le redimensionnement des objets bitmap pose toujours le même problème : faut-il ajouter ou
supprimer despixels pour redimensionner l’image, ou faut-il changer le nombre de pixels par
pouce ou par centimètre ?
Modifiez la taille d’une image bitmap en réglant sa résolution ou en rééchantillonnant l’image.
Lorsque vous réglez la résolution, vous changez la taille des pixels de l’image de façon à ajouter ou
retirer des pixels d’un espace donné. Le réglage de la résolution sans rééchantillonnage ne provoque
pas de pertes de données.
Un rééchantillonnage positif ou l’ajout de pixels pour agrandir l’image, peut parfois entraîner une
perte de qualité, car les pixels ajoutés ne correspondent pas toujours à l’image d’origine.
Un rééchantillonnage négatif ou le retrait de pixels pour réduire l’image, entraîne
systématiquement une perte de qualité, car des pixels sont physiquement supprimés. La perte de
données de l’image est un autre effet pervers du rééchantillonnage négatif.
Concepts de base de Fireworks
99
Rotation du document
La fonction de rotation du document est particulièrement utile lorsqu’une image importée est à
l’envers 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 qu’il contient subissent le
même mouvement.
Pour appliquer une rotation au document, utilisez l’une des méthodes suivantes :
• Choisissez Modification > Document > Rotation 180°.
• Choisissez Modification > Document > Rotation 90° sens horarie.
• Choisissez Modification > Document > Rotation 90° sens anti-horarie.
Réduction du document
Si votre document comporte des espaces autour du contenu du document, vous pouvez réduire la
taille du document de façon simple. Vous pouvez également enlever les espaces non utilisés en
recadrant le document. Pour plus d’informations sur le recadrage, voir « Recadrage d’un
document » à la page 101.
original; document réduit
Pour réduire le document :
Choisissez Modification > Document > Réduire le document.
Les parties du document s’étendant au-delà des pixels les plus à l’extérieur sont supprimées
automatiquement. Les bords du document sont recadrés de façon à épouser les bords de l’objet ou
des objets du document. Lorsque le document comporte plusieurs images, la commande Réduire
le document recadre tous les objets de toutes les images et pas seulement l’image active.
Réglage du document
Vous pouvez modifier le document en l’agrandissant afin d’accommoder des objets qui dépassent
des limites.
Pour ajuster le document :
Choisissez Modification > Document > Ajuster le document.
100 Chapitre 3
Recadrage d’un document
En effectuant un recadrage, vous pouvez supprimer des parties inutiles d’un document. Le
document se redimensionne afin de s’adapter à une zone que vous définissez.
Par défaut, le recadrage supprime les objets qui dépassent les limites du document. Vous pouvez
maintenir des objets à l’extérieur du document en changeant une préférence avant le recadrage.
Pour recadrer un document :
1
Choisissez l’outil Recadrage à partir du panneau Outils ou choisissez Edition > Recadrer le
document.
2
Faites glisser un cadre sur le document. Utilisez les poignées pour cadrer la zone du document
que vous souhaitez conserver.
3
Double-cliquez à l’intérieur du cadre et appuyez sur Entrée pour recadrer le document.
Le document se redimensionne en fonction de la zone que vous avez définie, et les objets situés
au-delà des bords du document sont supprimés.
Conseil : Vous pouvez conserver des objets à l’extérieur du document en désélectionnant Supprimer les objets
pendant le recadrage dans l’onglet Edition de la boîte de dialogue Préférences avant le recadrage. Pour plus
d’informations concernant les préférences, voir « Définition des préférences » à la page 433.
Utilisation des menus contextuels
Les menus contextuels permettent d’accéder rapidement à des commandes qui s’appliquent à la
sélection.
Pour afficher un menu contextuel :
Cliquez avec le bouton droit de la souris (Windows) ou appuyez sur la touche Contrôle et cliquez
(Macintosh) sur un élément sélectionné dans la fenêtre du document.
Concepts de base de Fireworks 101
Utilisation des règles, des repères et de la grille
Vous pouvez utiliser des règles et des repères pour disposer les objets de façon aussi précise que
possible et faciliter les tâches de dessin. Vous pouvez placer des repères dans le document afin d’y
accrocher des objets, ou bien activer la grille de Fireworks et accrocher des objets à cette dernière.
Utilisation des règles
Les règles permettent de mesurer, d’organiser et de planifier la mise en page de votre travail.
Comme les images Fireworks sont destinées au Web, où les graphiques sont mesurés en pixels, les
règles dans Fireworks mesurent toujours en pixels, sans se soucier de l’unité de mesure que vous
avez utilisée lorsque vous avez créé le document.
Pour afficher et masquer les règles :
Choisissez Affichage > Règles.
102 Chapitre 3
La règle horizontale et la règle verticale sont affichées le long des marges de la fenêtre de
document.
Utilisation des repères
Les repères sont des lignes que vous faites glisser sur le document à partir des règles. Ils facilitent les
opérations de dessin en vous aidant à placer et aligner les objets. Vous pouvez utiliser des repères
pour marquer les parties importantes de votre document, telles que les marges, le centre du
document et les zones où vous devez effectuer une tâche précise.
Afin de faciliter l’alignement des objets, Fireworks permet d’accrocher des objets aux repères.
Verrouillez les repères pour prévenir les déplacements accidentels.
Remarque : Les repères ne font pas partie d’un calque et ne sont pas exportés avec le document. Ils servent
uniquement d’outils de dessin.
Fireworks possède également des repères de découpe qui vous permettent de découper un
document à utiliser sur le Web. Cependant, les repères normaux des images et les repères de
découpe sont deux éléments distincts. Pour plus d’informations concernant les repères de
découpe, voir « Déplacement des repères d’une découpe pour modifier la découpe » à la page 275.
Pour créer un repère horizontal ou vertical :
1
Cliquez et faites glisser à partir de la règle verticale ou horizontale.
2
Positionnez le repère à l’endroit voulu sur le document et relâchez le bouton de la souris.
Remarque : Changez la position du repère en le faisant glisser de nouveau.
Concepts de base de Fireworks 103
Pour déplacer un repère de façon précise :
1
Double-cliquez sur le repère.
2
Tapez la nouvelle position dans la boîte de dialogue Déplacer le repère et cliquez sur OK.
Pour afficher ou masquer les repères :
Choisissez Affichage > Repères > Afficher les repères.
Pour accrocher des objets aux repères :
Choisissez Affichage > Repères > Accrocher aux repères.
Pour changer la couleur des repères :
1
Choisissez Affichage > Repères > Modifier les repères.
2
Sélectionnez la nouvelle couleur du repère à partir du puits de couleurs et cliquez sur OK.
Pour verrouiller ou déverrouiller tous les repères :
Choisissez Affichage > Repères > Verrouiller les repères.
Pour supprimer un repère :
Faites glisser le repère en dehors du document.
Utilisation de la grille
La grille de Fireworks affiche un ensemble de lignes horizontales et verticales sur le document. La
grille permet de placer les objets de façon précise. En outre, vous pouvez afficher, modifier,
redimensionner et changer la couleur de la grille.
Remarque : La grille ne fait pas partie d’un calque et n’est pas exportée avec le document. Elle sert uniquement
d’outilde dessin.
Pour afficher et masquer la grille :
Choisissez Affichage > Grille > Afficher la grille.
Pour accrocher des objets à la grille :
Choisissez Affichage > Grille > Accrocher à la grille.
Pour changer la couleur de la grille :
1
Choisissez Affichage > Grille > Modifier la grille.
2
Sélectionnez la nouvelle couleur de la grille à partir du puits de couleurs et cliquez sur OK.
Pour changer la taille des cellules de la grille :
1
Choisissez Affichage > Grille > Modifier la grille.
2
Tapez les valeurs voulues dans les champs d’espacement horizontal et vertical, puis cliquez sur OK.
104 Chapitre 3
Utilisation du panneau Historique pour annuler et répéter des actions multiples
Le panneau Historique permet d’afficher, de modifier et de refaire des actions. Le panneau
Historique énumère les dernières actions exécutées dans Fireworks. Le nombre maximum
d’entrées est spécifié dans le champ Nombre max. d’actions annulées de la boîte de dialogue
Préférences de Fireworks.
Le panneau Historique permet d’effectuer les actions suivantes :
•
•
•
•
Annuler et rétablir rapidement les actions récentes.
Choisir des actions exécutées récemment à partir du panneau Historique, et les répéter.
Copier dans le Presse-papiers des commandes sélectionnées sous forme de texte JavaScript.
Enregistrer un groupe d’actions exécutées récemment en tant que commande personnalisée,
puis la choisir à partir du menu Commandes afin de la réutiliser comme une commande
unique. Pour plus d’informations concernant la création de commandes en utilisant le panneau
Historique, voir « Automatisation des tâches avec le panneau Historique » à la page 429.
Pour annuler et refaire des actions :
1
Choisissez Fenêtre > Historique pour ouvrir le panneau Historique.
2
Faites glisser le marqueur d’annulation vers le haut ou vers le bas.
Pour refaire des actions :
1
Effectuer les actions.
2
Faites ce qui suit afin de sélectionner les commandes à répéter dans le panneau Historique :
• Cliquez sur une action pour la sélectionner.
• Cliquez sur Maj pour sélectionner une série ininterrompue d’actions.
• Maintenez enfoncée la touche Maj tout en cliquant pour sélectionner une série continue de
commandes.
3
Cliquez sur le bouton Relire situé en bas du panneau Historique.
Pour enregistrer des actions à réutiliser par la suite :
1
Sélectionnez les actions à enregistrer à partir du panneau Historique.
Concepts de base de Fireworks 105
2
Cliquez sur le bouton Enregistrer situé en bas du panneau.
3
Entrez un nom de commande, puis cliquez sur OK.
Pour utiliser une commande personnalisée enregistrée :
Choisissez le nom de la commande dans le menu Commandes.
106 Chapitre 3
CHAPITRE 4
Sélection et transformation d’objets
Lorsque vous travaillez dans Macromedia Fireworks MX, vous manipulez des objets vectoriels et
bitmap, des blocs de texte, des découpes et des références, ainsi que des zones de pixels.
L’utilisation des outils de sélection et de transformation vous permettent de déplacer, copier,
supprimer, faire pivoter, mettre à l’échelle ou incliner des objets. Dans les documents qui
comportent plusieurs objets, vous pouvez organiser ces derniers en les empilant, en les groupant et
en les alignant.
Sélection d’objets
Avant de pouvoir effectuer quoi que ce soit avec un objet du document, vous devez le
sélectionner. Cela s’applique à un objet vectoriel, un trajet ou des points ; un bloc de texte, un
mot ou une lettre ; une découpe ou une référence ; une occurrence ou un objet bitmap.
Utilisez un des outils suivants pour sélectionner des objets :
Le panneau Calques affiche
chaque objet. Vous pouvez cliquer sur un objet du panneau Calques
pour le sélectionner lorsque le panneau est ouvert et les calques déployés. Pour plus
d’informations, voir Chapitre 10, « Calques, masquage et fondu », à la page 227.
L’outil Pointeur sélectionne des objets lorsque vous cliquez sur les objets ou lorsque vous faites glisser
une zone de sélection autour d’eux.
L’outil Sous-sélection sélectionne un objet individuel dans un groupe ou les points d’un objet vectoriel.
L’outil Sélectionner derrière sélectionne un objet se trouvant derrière un autre objet.
L’outil Exporter zone sélectionne une zone à exporter sous la forme d’un fichier séparé.
Pour plus d’informations sur la sélection de zones spécifiques de pixels dans une image bitmap,
voir « Sélection de pixels » à la page 110.
Utilisation de l’outil Pointeur
L’outil Pointeur permet de sélectionner des objets lorsque vous cliquez dessus ou lorsque vous
faites glisser une zone de sélection autour d’un objet ou d’une partie de ce dernier.
Pour sélectionner un objet en cliquant, exécutez l’une des actions suivantes :
• Déplacez l’outil Pointeur vers le trajet ou le cadre de l’objet, puis cliquez.
• Cliquez sur le bord ou la trame de l’objet.
107
• Sélectionnez l’objet dans le panneau Calques.
Conseil : Pour prévisualiser ce que vous sélectionnerez si vous cliquiez sur un objet au-dessous du pointeur du
document, choisissez l’option Surbrillance souris dans l’onglet Edition de la boîte de dialogue Préférences. Pour
plus d’informations sur les préférences, voir « Définition des préférences » à la page 433.
Pour sélectionner des objets en faisant glisser le pointeur :
Faites glisser l’outil Pointeur pour inclure un ou plusieurs objets dans la zone de sélection.
Utilisation de l’outil Sous-sélection
Utilisez l’outil Sous-sélection pour sélectionner, déplacer ou modifier les points d’un trajet
vectoriel ou d’un objet faisant partie d’un groupe.
Pour déplacer ou modifier des objets avec l’outil Sous-sélection :
1
Choisissez l’outil Sous-sélection.
2
Effectuez une sélection.
Les poignées de sélection apparaissent.
3
Utilisez l’une des méthodes suivantes :
• Pour modifier un objet, faites glisser un de ses points ou l’une de ses poignées de sélection.
• Pour déplacer l’intégralité d’un objet, faites glisser le pointeur n’importe où dans l’objet,
excepté sur un point ou une poignée de sélection.
Utilisation de l’outil Sélectionner derrière
Lorsque vous travaillez sur des graphismes qui comportent plusieurs objets, utilisez l’outil
Sélectionner derrière pour sélectionner un objet qui est masqué ou partiellement masqué par
d’autres objets.
Pour sélectionner un objet se trouvant derrière d’autres objets :
Cliquez plusieurs fois avec l’outil Sélectionner sur la pile d’objets, pour les sélectionner de haut en
bas dans l’ordre d’empilement, jusqu’à ce que vous atteignez l’objet voulu.
Remarque : Vous pouvez également sélectionner un objet difficile à atteindre en cliquant dessus à partir du
panneau Calques lorsque les calques sont déployés.
108 Chapitre 4
Informations sur la sélection dans le Vérificateur de propriétés
Lorsque vous sélectionnez un objet, le Vérificateur de propriétés identifie la sélection. La zone
supérieure gauche du Vérificateur de propriétés contient les informations suivantes concernant la
sélection :
• Une description de l’élément inspecté
• Un champ d’édition permettant de saisir un nom pour cet élément
Remarque : Le nom apparaîtra dans la barre de titre du document à chaque fois que vous sélectionnerez cet
élément. En cas d’exportation des découpes et des boutons, le nom est le nom de fichier.
• Le nombre d’objets lorsque plusieurs objets sont sélectionnés
Remarque : Si la barre d’état est activée (Windows uniquement), les objets sélectionnés sont également identifiés
dans la barre d’état, en bas de la fenêtre du document.
Le Vérificateur de propriétés affiche également des informations et des paramètres concernant le
type d’objet sélectionné. Par exemple, lorsque vous sélectionnez un trajet vectoriel, le Vérificateur
de propriétés affiche les propriétés du trajet vectoriel telles que la largeur et la couleur du trait.
Modification d’une sélection
Lorsqu’un objet unique est sélectionné, vous pouvez ajouter des objets à la sélection et
désélectionner les objets sélectionnés. En utilisant une commande unique, vous pouvez
sélectionner ou désélectionner tout ce qui se trouve sur tous les calques du document. Vous
pouvez également masquer le trajet de sélection de façon à pouvoir modifier un objet de sélection
tout en l’affichant tel qu’il doit apparaître sur le Web ou sur une copie imprimée.
Pour ajouter une sélection :
Maintenez la touche Maj enfoncée et cliquez sur des objets supplémentaires avec l’outil Pointeur,
Sous-sélection ou Sélectionner derrière.
Pour désélectionner un objet unique :
Maintenez enfoncée la touche Maj tout en cliquant sur l’objet sélectionné.
Pour sélectionner tout ce figure sur tous les calques du document :
Choisissez Sélection > Sélectionner tout.
Remarque : La commande Sélectionner tout ne sélectionne pas les objets masqués.
Pour désélectionner tous les objets sélectionnés :
Choisissez Sélection > Désélectionner.
Remarque : Vous devez désélectionner la préférence Modification par calque pour sélectionner tous les objets
visibles sur tous les calques d’un document. En effet, lorsque cette préférence est choisie, seuls les objets du calque
actif sont sélectionnés. Pour plus d’informations, voir « Organisation des calques » à la page 230.
Sélection et transformation d’objets 109
Pour masquer l’affichage de la sélection du trajet d’un objet sélectionné :
Choisissez Affichage > Masquer les bords.
Remarque : Vous pouvez utiliser le panneau Calques ou le Vérificateur de propriétés pour identifier l’objet
sélectionné lorsque son contour et ses points sont masqués.
Pour masquer des objets sélectionnés :
Choisissez Affichage > Masquer la sélection.
Remarque : Les objets masqués ne sont pas exportés. (Cela ne s’applique pas aux objets Web découpe et
référence du calque Web.)
Pour afficher tous les objets :
Choisissez Affichage > Tout afficher.
Conseil : Pour masquer des objets sélectionnés ou non sélectionnés, cliquez ou faites glisser le long de la colonne
Oeil du panneau Calques.
Sélection de pixels
Vous pouvez modifier les pixels de l’intégralité d’un document ou bien choisir un des outils de
sélection pour imposer votre modification à une zone particulière d’une image :
L’outil Cadre de sélection sélectionne une zone rectangulaire de pixels sur une image.
L’outil Cadre de sélection oval sélectionne une zone elliptique de pixels sur une image.
L’outil Lasso sélectionne une zone en forme libre de pixels sur une image.
L’outil Lasso polygonal sélectionne une zone de pixels en forme libre mais aux bords droits sur une
image.
L’outil Baguette magique sélectionne une zone de pixels de couleur similaire sur une image.
Les outils de sélection de pixels tracent un cadre de sélection qui définit la zone de pixels
sélectionnés. Après avoir tracé le cadre de sélection, vous pouvez le manipuler en le déplaçant, en
effectuant des ajouts ou bien en le basant sur une autre sélection. Vous pouvez modifier les pixels
à l’intérieur de la sélection, appliquer des filtres aux pixels ou effacer des pixels sans affecter les
pixels se trouvant au-delà de la sélection. Vous pouvez également créer une sélection flottante de
pixels que vous pouvez modifier, déplacer, couper ou copier.
Les options de l’outil de sélection Bitmap
Lorsque vous choisissez l’outil Cadre de sélection, Cadre de sélection oval, Lasso, Lasso polygonal
ou Baguette magique, le Vérificateur de propriétés affiche trois options de bordure pour l’outil :
Net crée
un cadre de sélection avec un bord clairement délimité.
Anticrénelé permet
Diffusion permet
110 Chapitre 4
d’éviter l’apparition de bords dentelés dans le cadre de sélection.
d’adoucir les bords des pixels sélectionnés.
Avant de créer une sélection diffuse en utilisant un outil de sélection, vous devez définir l’option
Diffusion. Vous pouvez rendre diffuses des sélections existantes en utilisant la commande
Diffusion du menu Sélection. Pour plus d’informations, voir « Application d’une diffusion sur
une sélection de pixels » à la page 118.
Lorsque vous choisissez l’outil Cadre de sélection, Cadre de sélection oval ou Baguette magique, le
Vérificateur de propriétés affiche également trois options de style :
Normal permet de créer un cadre de sélection où la hauteur et la largeur sont indépendantes l’une
de l’autre.
Rapport fixe permet
Taille fixe définit
de conserver les proportions entre la hauteur et la largeur.
la hauteur et la largeur à une dimension donnée.
Remarque : L’outil Baguette magique possède également un paramètre Tolérance. Pour plus d’informations, voir
« Sélection de zones de couleur similaire » à la page 113.
Création d’un cadre de sélection de pixels
Les outils Cadre de sélection, Cadre de sélection oval et Lasso de la partie Bitmap du panneau
Outils vous permettent de sélectionner des zones de pixels spécifiques dans une image bitmap en
traçant un cadre de sélection autour d’elles.
Pour sélectionner une zone rectangulaire ou elliptique de pixels :
1
Choisissez l’outil Cadre de sélection ou Cadre de sélection oval.
2
Définissez les options Style et Bord dans le Vérificateur de propriétés. Pour plus
d’informations, voir « Les options de l’outil de sélection Bitmap » à la page 110.
3
Faites glisser le pointeur pour tracer un cadre de sélection qui définit la sélection de pixels.
Lorsque vous faites glisser l’outil Cadre de sélection ou Cadre de sélection oval, maintenez
appuyée la touche Maj afin de tracer des cadres de sélection de forme carrée ou circulaire. Pour
tracer un cadre de sélection à partir d’un point central, désélectionnez tous les autres cadres de
sélection actifs, puis maintenez appuyée la touche Alt (Windows) ou Option (Macintosh) tout
en effectuant votre tracé.
Sélection et transformation d’objets
111
Pour sélectionner une zone en forme libre de pixels :
1
Choisissez l’outil Lasso.
2
Choisissez une option Bord dans le Vérificateur de propriétés. Pour plus d’informations, voir
« Les options de l’outil de sélection Bitmap » à la page 110.
3
Faites glisser le pointeur autour des pixels à sélectionner.
Placement de points afin de créer un cadre de sélection.
L’outil Lasso polygonal vous permet de sélectionner des pixels spécifiques dans une image bitmap
en cliquant de manière répétée autour du périmètre de la zone de pixels que vous voulez
sélectionner.
Pour sélectionner une zone polygonale de pixels :
1
Choisissez l’outil Lasso polygonal.
2
Choisissez une option Bord dans le Vérificateur de propriétés. Pour plus d’informations, voir
« Les options de l’outil de sélection Bitmap » à la page 110.
3
Cliquez pour placer des points autour du périmètre de l’objet ou de la zone afin d’entourer la
sélection.
Maintenez enfoncée la touche Maj pour contraindre les lignes polygonales tracées avec l’outil
Lasso par incréments de 45°.
4
Utilisez l’une des méthodes suivantes pour fermer le polygone :
• Cliquez sur le point d’origine.
112
Chapitre 4
• Double-cliquez dans l’espace de travail.
Sélection de zones de couleur similaire
L’outil Baguette magique vous permet de sélectionner des zones de pixels possédant une couleur
similaire. En ajustant les options Bord et Tolérance de la Baguette magique dans le Vérificateur de
propriétés, vous pouvez contrôler la manière dont la Baguette magique sélectionne les pixels.
Pour sélectionner une zone de pixels avec une plage de couleurs similaires :
1
Choisissez l’outil Baguette magique.
2
Choisissez une option Bord dans le Vérificateur de propriétés. Pour plus d’informations, voir
« Les options de l’outil de sélection Bitmap » à la page 110.
3
Définissez le niveau de tolérance en faisant glisser le curseur de l’option correspondante dans le
Vérificateur de propriétés.
La tolérance représente la plage de couleurs sélectionnée lorsque vous cliquez sur un pixel avec
l’outil Baguette magique. Lorsque vous entrez 0 et que vous cliquez sur un pixel, seuls les pixels
adjacents et exactement de la même couleur sont sélectionnés. Si vous entrez 65, une plage de
couleurs plus grande est sélectionnée.
Sélection et transformation d’objets 113
4
Cliquez sur la zone de couleurs à sélectionner.
Un cadre de sélection apparaît autour de la plage de pixels sélectionnée.
Pixels sélectionnés avec une tolérance basse (en-haut), puis avec une tolérance haute (en-bas)
Pour sélectionner des couleurs similaires dans tout le document :
1
2
Sélectionnez une zone de couleur avec un outil de type Cadre de sélection ou Lasso, ou bien
l’outil Baguette magique.
Choisissez Sélection > Sélectionner couleurs similaires.
Un ou plusieurs cadres de sélection sélectionnent toutes les zones contenant la série de pixels
sélectionnée, en fonction du paramètre Tolérance actuellement défini dans le Vérificateur de
propriétés pour l’outil Baguette magique.
Remarque : Pour ajuster la tolérance pour la commande Sélectionner couleurs similaires, choisissez l’outil Baguette
magique puis changez le paramètre Tolérance dans le Vérificateur de propriétés avant d’utiliser la commande.
Suppression d’un cadre de sélection
Vous pouvez supprimer un cadre de sélection sans affecter le document.
Pour supprimer un cadre de sélection, utilisez l’une des méthodes suivantes :
•
•
•
•
114
Tracez un autre cadre de sélection.
Cliquez en dehors de la sélection active avec un outil Cadre de sélection ou Lasso.
Appuyez sur Echap.
Choisissez Sélection > Désélectionner.
Chapitre 4
Réglage des cadres de sélection
Après avoir sélectionné des pixels par le biais d’un outil Cadre de sélection ou Lasso, vous pouvez
modifier ou déplacer le bord du cadre de sélection sans affecter les pixels se trouvant au-dessous.
Ajoutez manuellement des pixels à un cadre de sélection ou supprimez-en en utilisant les touches
Maj et Alt (ou Option).
En outre, vous pouvez étendre ou réduire la bordure du cadre de sélection selon des proportions
spécifiques, sélectionner une autre zone de pixels autour du cadre d’origine ou lisser ses bords.
Déplacement d’un cadre de sélection
Vous pouvez déplacer un cadre de sélection pour le placer sur une autre zone de pixels.
Pour déplacer le cadre de sélection, utilisez l’une des méthodes suivantes :
• Faites glisser le cadre de sélection avec un outil cadre de sélection ou lasso, ou alors avec l’outil
Baguette magique.
• Déplacez le cadre de sélection pixel par pixel avec les touches fléchées.
• Appuyez sur Maj et déplacez le cadre de sélection par incréments de 10 pixels à l’aide des
touches fléchées.
Réglage d’un cadre de sélection avec la barre d’espace
Vous pouvez facilement repositionner un cadre de sélection que vous créez en appuyant sur la
barre d’espace lorsque vous êtes en train de le tracer.
Pour repositionner une sélection avec la barre d’espace :
1
Commencez à faire glisser le pointeur afin de tracer la sélection.
2
Sans relâcher le bouton de la souris, maintenez appuyée la barre d’espace.
3
Faites glisser le cadre de sélection à un autre endroit du document.
4
Relâchez la barre d’espace tout en gardant appuyé le bouton de la souris.
5
Continuez à faire glisser le curseur pour tracer la sélection.
Sélection et transformation d’objets 115
Ajout de pixels dans une sélection
Après avoir tracé un cadre de sélection avec un outil de sélection bitmap, vous pouvez effectuer
des ajouts à la sélection avec le même outil ou un autre outil de sélection bitmap.
Pour effectuer un ajout dans une sélection de pixels existante :
1
Choisissez un outil de sélection bitmap quelconque.
2
Maintenez enfoncée la touche Maj et tracez d’autres cadres de sélection.
3
Pour continuer à ajouter des éléments à la sélection, répétez les étapes 1 et 2 avec un outil de
sélection bitmap quelconque.
Rejoindre les cadres de sélection par recouvrement afin de réaliser un cadre de sélection
contigu.
Soustraction de pixels dans une sélection
Vous pouvez soustraire des parties d’une sélection, ou « perforer » des parties d’une sélection, en
définissant des zones de pixels à l’intérieur du cadre de sélection d’origine qui ne feront plus partie
de la sélection.
Pour soustraire des pixels d’une sélection :
Maintenez enfoncée la touche Alt (Windows) ou Option (Macintosh) et utilisez un outil de
sélection bitmap pour sélectionner la zone de pixels à supprimer.
Création d’un cadre de sélection à partir de cadres de sélection
s’entrecroisant
Vous pouvez sélectionner des pixels dans un cadre de sélection existant en traçant un cadre de
sélection qui superpose l’original.
Pour sélectionner une zone de pixels définie par la zone d’intersection de deux cadres de
sélection :
1
116
En maintenant appuyées les touches Alt+Maj (Windows) ou Option+Maj (Macintosh), vous
créez un nouveau cadre de sélection qui superpose le cadre de sélection d’origine.
Chapitre 4
2
Relâchez le bouton de la souris.
Seuls les pixels se situant dans la zone d’intersection des deux cadres de sélection seront
sélectionnés.
Cadre de sélection rectangulaire : un cadre de sélection rectangulaire après intersection avec un cadre
de sélection circulaire
Utilisation de vignettes et de touches de modification pour modifier des
sélections de pixels
Avec un bitmap sélectionné, vous pouvez créer une sélection de pixels sur ce bitmap en utilisant
l’opacité de n’importe quel objet ou masque du panneau Calques. Pour plus d’informations sur le
panneau Calques, voir « Utilisation des calques » à la page 227.
Pour créer ou remplacer une sélection de pixels sur un bitmap sélectionné en utilisant l’opacité
d’un objet :
1
Dans le panneau Calques, positionnez le pointeur sur la vignette de l’objet que vous voulez
utiliser pour créer la sélection de pixels.
2
Maintenez appuyée la touche Ctrl (Windows) ou Commande (Macintosh).
Le pointeur change, afin de vous indiquer que vous êtes sur le point de sélectionner la couche
alpha, ou la zone opaque, de l’objet.
3
Cliquez sur la vignette.
Une nouvelle sélection de pixels est créée sur le bitmap sélectionné.
Pour effectuer un ajout dans la sélection de pixels active :
Dans le panneau Calques, cliquez sur la vignette d’un objet avec les touches Ctrl-Maj (Windows)
ou Commande-Maj (Macintosh) pour ajouter la forme de cette zone opaque à la sélection de
pixels active.
Conseil : Une fois positionné sur la vignette, les touches de modification spécifiées maintenues appuyées, le
pointeur indique que vous êtes sur le point d’effectuer un ajout dans la sélection de pixels.
Sélection et transformation d’objets
117
Pour soustraire un élément de la sélection de pixels active :
Dans le panneau Calques, cliquez sur la vignette d’un objet avec les touches Ctrl-Alt (Windows)
ou Commande-Option (Macintosh) pour soustraire la forme de cette zone opaque de la sélection
de pixels active.
Conseil : Une fois positionné sur la vignette, les touches de modification spécifiées maintenues appuyées, le
pointeur indique que vous êtes sur le point de soustraire un élément de la sélection de pixels.
Pour créer une sélection de pixels d’un bitmap sélectionné à partir de l’intersection d’objets
superposés :
1
Cliquez sur la vignette d’un objet tout en appuyant sur la touche Ctrl (Windows) ou
Commande (Macintosh) pour sélectionner sa couche alpha, ou zone opaque.
2
Cliquez sur un autre objet avec Ctrl-Maj-Alt (Windows) ou Commande-Maj-Option
(Macintosh).
Une sélection de pixels est créée sur le bitmap sélectionné à partir de l’intersection des zones
opaques des deux objets superposés.
Conseil : Une fois positionné sur la vignette, les touches de modification spécifiées maintenues appuyées, le
pointeur indique que vous êtes sur le point de créer une sélection de pixels à partir de l’intersection des zones
opaques de deux objets superposés.
Création d’une sélection de pixels inversée
En partant d’une sélection de pixels active, vous pouvez créer une autre sélection de pixels qui
sélectionne tous les pixels qui ne sont pas actuellement sélectionnés. Vous pouvez par exemple
utiliser cette méthode pour sélectionner puis effacer tous les pixels entourant la sélection
d’origine.
Pour créer une sélection de pixels inversée :
1
Effectuez une sélection de pixels en utilisant un outil de sélection bitmap.
2
Choisissez Sélection > Inverser la sélection.
Tous les pixels qui ne se trouvaient pas à l’intérieur de la sélection d’origine sont maintenant
sélectionnés.
Application d’une diffusion sur une sélection de pixels
La diffusion crée un effet de transparence pour les pixels sélectionnés. Si vous utilisez la
commande Diffusion, vous pouvez essayer différents taux de diffusion et afficher le résultat avant
de désélectionner les pixels. Vous pouvez également appliquer une diffusion à une sélection en
définissant un certain taux de diffusion dans le Vérificateur de propriétés avant d’utiliser un outil
de sélection bitmap. Pour plus d’informations, voir « Les options de l’outil de sélection Bitmap » à
la page 110.
Pour appliquer une diffusion à une sélection de pixels :
1
Choisissez Sélection > Diffusion.
2
Entrez un taux de diffusion dans la boîte de dialogue Diffusion.
La taille du cadre de sélection se modifie afin de refléter le taux de diffusion.
3
118
Si nécessaire, changez le nombre dans la boîte de dialogue Diffusion afin d’ajuster le taux de
diffusion.
Chapitre 4
4
Cliquez sur OK.
Conseil : Pour visionner l’apparence de la sélection à laquelle la diffusion est appliquée sans les pixels placés
autour, choisissez Sélection > Sélection inverse et appuyez sur Supprimer. Vous pouvez ensuite utiliser le
panneau Historique ou Edition > Annuler pour réessayer.
Extension ou réduction d’un cadre de sélection
Vous pouvez étendre ou réduire la bordure d’un cadre de sélection existant.
Pour étendre la bordure d’un cadre de sélection :
1
Après avoir tracé le cadre de sélection, choisissez Sélection > Etendre le cadre de sélection.
2
Entrez le nombre de pixels à utiliser pour étendre la bordure du cadre de sélection, puis cliquez sur OK.
Pour réduire la bordure d’un cadre de sélection :
1
Après avoir tracé le cadre de sélection, choisissez Sélection > Réduire le cadre de sélection.
2
Entrez le nombre de pixels à retrancher de la bordure du cadre de sélection, puis cliquez sur OK.
Sélection d’une zone autour d’un cadre de sélection actif
Vous pouvez créer un cadre de sélection supplémentaire d’une largeur spécifique pour entourer le
cadre existant. Cette option permet de créer des effets graphiques spéciaux, tels que la diffusion
des bords d’une sélection de pixels.
Cadre de sélection d’origine : encadrement avec un cadre de sélection supplémentaire
Pour sélectionner une zone autour d’un cadre de sélection actif :
1
Après avoir tracé un cadre de sélection, choisissez Sélection > Délimiter le cadre de sélection.
2
Entrez la largeur du cadre de sélection à placer autour du cadre actif, puis cliquez sur OK.
Sélection et transformation d’objets 119
Lissage de la bordure d’un cadre de sélection
Vous pouvez éliminer les pixels superflus situés sur les bords d’une sélection de pixels. Cette
option est utile si les pixels supplémentaires figurent le long de la bordure d’une sélection ou d’un
cadre de sélection, lorsque vous utilisez la Baguette magique.
Sélection de pixels avant et après le lissage
Pour lisser la bordure d’un cadre de sélection :
1
Choisissez Sélection > Lisser le cadre de sélection.
2
Entrez une valeur pour spécifier le niveau de lissage, puis cliquez sur OK.
Transfert d’un cadre de sélection
Vous pouvez transférer le cadre de sélection d’un objet bitmap vers un autre objet bitmap d’un
même calque ou d’un calque diifférent. Vous pouvez également transférer le cadre de sélection
vers un masque.
Pour transférer un cadre de sélection vers un autre objet bitmap :
1
Effectuez une sélection en traçant le cadre de sélection.
2
Dans le panneau Calques, sélectionnez un autre objet bitmap sur le même calque ou bien un
objet d’un calque différent.
Le cadre de sélection est transféré vers cet objet.
Remarque : Fireworks traite les masques et les objets masqués en tant qu’objets séparés. Pour plus
d’informations sur les masques, voir « Masquage d’images » à la page 233.
Enregistrement et restauration de cadres de sélection
Vous pouvez enregistrer la taille, la forme et l’emplacement d’une sélection afin de les réappliquer
plus tard.
Pour enregistrer un cadre de sélection :
Choisissez Sélection > Enregistrer la sélection de bitmap.
Pour restaurer un cadre de sélection :
Choisissez Sélection > Restaurer la sélection de bitmap.
Remarque : Vous ne pouvez enregistrer qu’une seule sélection à la fois.
120 Chapitre 4
Création et déplacement d’une sélection flottante de pixels
Lorsque vous faites glisser un cadre de sélection vers un nouvel emplacement, c’est le cadre de
sélection même qui est déplacé. Si vous voulez déplacer, modifier, couper ou copier une sélection
de pixels, vous devez d’abord transformer les pixels en une sélection flottante.
Pour créer une sélection flottante de pixels :
1
Effectuez une sélection de pixels avec un outil de sélection bitmap.
2
Utilisez l’une des méthodes suivantes :
• Maintenez appuyée la touche Ctrl (Windows) ou Commande (Macintosh) et faites glisser la
sélection en utilisant un outil de la partie Bitmap du panneau Outils.
• Choisissez l’outil Pointeur et faites glisser la sélection.
Pour déplacer une sélection flottante, exécutez l’une des actions suivantes :
• Faites glisser la sélection flottante avec l’outil Pointeur ou n’importe quel outil de sélection
bitmap.
• Si un outil bitmap non destiné à la sélection est actif, maintenez appuyée la touche Ctrl
(Windows) ou Commande (Macintosh) et faites glisser la sélection flottante.
• Utilisez les touches fléchées ou Maj+touches fléchées.
Si vous désélectionnez la sélection flottante de pixels ou si vous choisissez un outil vectoriel ou
Web, la sélection flottante devient une partie de l’objet bitmap actif.
Insertion d’un nouveau bitmap en coupant ou en copiant
Vous pouvez insérer un nouveau bitmap basé sur une sélection de pixels dans le calque actif d’un
document en coupant ou en copiant les pixels sélectionnés.
Pour insérer un nouveau bitmap en coupant et en collant une sélection de pixels :
1
Sélectionnez une zone de pixels en utilisant un outil de sélection de pixels.
2
Choisissez Edition > Insérer > Bitmap par Couper.
Un nouvel objet bitmap basé sur la sélection de pixels est créé dans le calque actif, et les pixels
sélectionnés sont supprimés de l’objet bitmap d’origine. Dans le panneau Calques, une
vignette du nouveau bitmap apparaît dans le calque actif, au-dessus de l’objet à partir duquel il
a été coupé.
Pour insérer un nouveau bitmap en copiant et en collant une sélection de pixels :
1
Sélectionnez une zone de pixels en utilisant un outil de sélection de pixels.
2
Choisissez Edition > Insérer > Bitmap par Copier.
Un nouvel objet bitmap basé sur la sélection de pixels est créé dans le calque actif, et les pixels
sélectionnés restent dans l’objet bitmap d’origine. Dans le panneau Calques, une vignette du
nouveau bitmap apparaît dans le calque actif, au-dessus de l’objet à partir duquel il a copié.
Sélection et transformation d’objets 121
Edition d’objets sélectionnés
Fireworks vous fournit un certain nombre de façons permettant de modifier des objets
sélectionnés : vous pouvez déplacer des objets sur le document ou d’une application vers une
autre, vous pouvez reproduire des objets avec les commandes Cloner et Dupliquer, ou alors vous
pouvez supprimer l’ensemble des objets de l’espace de travail.
Pour déplacer une sélection, utilisez l’une des méthodes suivantes :
• Faites-la glisser avec l’outil Pointeur, Sous-sélection ou Sélectionner derrière.
• Appuyez sur l’une des touches fléchées pour déplacer cette sélection pixel par pixel.
• Maintenez appuyée la touche Maj tout en appuyant sur une touche fléchée pour déplacer la
sélection par incréments de 10 pixels.
• Dans le Vérificateur de propriétés, entrez les coordonnées X et Y de l’emplacement du coin
supérieur gauche de la sélection.
• Entrez les coordonnées X et Y de l’objet dans le panneau Informations. Si les cases X et Y ne
sont pas visibles, faites glisser le bord inférieur du panneau.
Pour déplacer ou copier des objets sélectionnés en les collant :
1
Sélectionnez un ou plusieurs objets.
2
Choisissez Edition > Couper ou Edition > Copier.
3
Choisissez Edition > Coller.
Pour dupliquer un ou plusieurs objets sélectionnés :
Choisissez Edition > Dupliquer.
En répétant la commande, des doubles de l’objet sélectionné apparaissent en cascade en partant
de l’original, 10 pixels plus bas et 10 pixels à droite de l’exemplaire précédent. L’objet dupliqué le
plus récent devient l’objet sélectionné.
Remarque : Vous ne pouvez pas utiliser les commandes Dupliquer ou Cloner avec des sélections bitmap. Utilisez
l’outil Sous-sélection ou Tampon encreur pour dupliquer des parties d’une image bitmap. Pour plus d’informations
concernant l’outil de Sous-sélection, voir les procédures suivantes.
Pour dupliquer l’objet sélectionné en le faisant glisser :
Tout en appuyant sur Alt (Windows) ou Option (Macintosh), faites glisser l’objet en utilisant
l’outil Pointeur.
Pour dupliquer une sélection de pixels, utilisez l’une des méthodes suivantes :
• Faites glisser la sélection de pixels en utilisant l’outil Sous-sélection.
• Tout en appuyant sur Alt (Windows) ou Option (Macintosh), faites glisser l’objet en utilisant
l’outil Pointeur.
Pour cloner une sélection :
Choisissez Edition > Cloner.
Le clone de la sélection est placé juste devant l’original et devient l’objet sélectionné.
122 Chapitre 4
Conseil : Pour déplacer un clone sélectionné pixel par pixel, utilisez les touches fléchées ou les touches
Maj+touches fléchées. Cette méthode est pratique pour conserver une distance spécifique entre des clones ou bien
pour conserver l’alignement vertical ou horizontal des clones.
Pour supprimer des objets sélectionnés, exécutez l’une des actions suivantes :
•
•
•
•
Appuyez sur la touche Suppr ou Retour arrière.
Choisissez Edition > Effacer.
Choisissez Edition > Couper.
Cliquez sur l’objet avec le bouton droit de la souris (Windows) ou maintenez la touche Contrôle
enfoncée et cliquez (Macintosh) et choisissez Edition > Couper à partir du menu contextuel.
Pour annuler ou désélectionner une sélection, exécutez l’une des actions suivantes :
• Choisissez Sélection > Désélectionner.
• Cliquez sur l’image, mais en-dehors de la zone sélectionnée si vous utilisez l’outil Cadre de
sélection, Cadre de sélection oval ou Lasso.
• Appuyez sur Echap.
Transformation et distorsion d’objets sélectionnés et sélections
Vous pouvez transformer un objet ou un groupe sélectionné, ou bien une sélection de pixels, en
utilisant les outils Echelle, Incliner et Distorsion ainsi que des commandes de menu :
Echelle agrandit ou réduit un objet.
Incliner incline un objet le long d’un axe spécifié.
Distorsion déplace les côtés ou les coins d’un objet conformément à la direction dans laquelle vous faites
glisser une poignée de sélection tandis que l’outil est actif. C’est utile pour créer des effets 3-D.
Lorsque vous choisissez un outil de transformation ou bien la commande de menu
Transformation, les poignées de transformation apparaissent autour de l’objet sélectionné.
Poignées de transformation
Point central
Objet initial
Objet pivoté, mis à l’échelle, incliné, tordu et retourné verticalement et horizontalement
Sélection et transformation d’objets 123
Pour transformer des objets sélectionnés avec les poignées de transformation :
1
Choisissez un outil de transformation.
Lorsque vous déplacez le pointeur sur ou près des poignées de sélection, le pointeur change afin
d’indiquer la transformation active.
2
Pour transformer les objets, exécutez l’une des actions suivantes :
• Placez le pointeur à proximité d’un coin et faites-le glisser pour effectuer une rotation.
• Faites glisser une poignée de transformation pour effectuer une transformation conformément
à l’outil de transformation actif.
3
Double-cliquez à l’intérieur de la fenêtre ou appuyez sur Entrée pour appliquer vos
changements.
Mise à l’échelle des objets
La mise à l’échelle d’un objet permet de l’agrandir ou de le réduire à l’horizontale, à la verticale ou
dans les deux sens.
Pour mettre à l’échelle un objet sélectionné :
1
Affichez les poignées de transformation :
• Choisissez l’outil Echelle.
• Choisissez Modification > Transformation > Echelle.
2
Faites glisser les poignées de transformation :
• Pour mettre l’objet à l’échelle horizontalement et verticalement, faites glisser une poignée
d’angle. Si vous appuyez sur la touche Maj, les proportions changent en fonction du
déplacement.
• Pour mettre l’objet à l’échelle horizontalement ou verticalement, faites glisser une poignée
latérale.
Remarque : Vous pouvez également redimensionner des objets sélectionnés en entrant les dimensions dans le
Vérificateur de propriétés. Pour plus d’informations, voir « Transformation numérique d’objets » à la page 126.
Rotation d’objets
Les objets pivotent autour de leur point central. Vous faites pivoter un objet en faisant glisser ses
poignées de transformation ou en sélectionnant un angle prédéterminé.
Remarque : Vous pouvez également faire pivoter le document. Pour plus d’informations, voir « Rotation du
document » à la page 100.
Pour faire pivoter un objet sélectionné de 90 ou 180 degrés :
Choisissez Modification > Transformation et choisissez une commande de rotation à partir du
sous-menu.
Pour faire pivoter l’objet sélectionné en le faisant glisser :
1
Choisissez un outil de transformation.
124 Chapitre 4
2
Ecartez le pointeur de l’objet jusqu’à ce que le pointeur de rotation disparaisse.
3
Faire glisser pour appliquer une rotation à l’objet.
Conseil : Pour imposer à la rotation des incréments de 15° par rapport à l’horizon, appuyez sur la touche Maj tout
en faisant glisser le pointeur.
4
Double-cliquez à l’intérieur de la fenêtre ou appuyez sur Entrée pour appliquer vos
changements.
Pour déplacer l’axe de rotation :
Faites glisser le point central vers la position voulue.
Faites ce qui suit afin de replacer l’axe de rotation au centre de la sélection
• Double-cliquez sur le point central
• Appuyez sur Echap pour désactiver l’objet, puis le sélectionner à nouveau.
Retournement d’objets
Vous pouvez retourner un objet sur son axe vertical ou horizontal sans changer sa position au sein
du document.
Pour retourner un objet sélectionné :
Choisissez Modification > Transformation > Retournement horizontal.
Inclinaison d’objets
Les objets sont transformés en inclinant leur axe horizontal ou vertical, ou les deux.
Pour incliner un objet sélectionné :
1
Utilisez l’une des méthodes suivantes pour afficher les poignées de transformation :
• Choisissez l’outil Incliner.
• Choisissez Modification > Transformation > Incliner.
2
Faites glisser une poignée pour incliner l’objet.
3
Double-cliquez à l’intérieur de la fenêtre ou appuyez sur Entrée pour supprimer les poignées de
transformation.
Pour obtenir une illusion de perspective :
Faites glisser l’un des points des angles.
Sélection et transformation d’objets 125
Distorsion d’objets
Vous pouvez changer la taille et les proportions d’un objet en faisant glisser une poignée de sélection
avec l’outil Distorsion.
Pour appliquer une distorsion à un objet sélectionné :
1
Utilisez l’une des méthodes suivantes pour afficher les poignées de transformation :
• Choisissez l’outil Distorsion.
• Choisissez Modification > Transformation > Distorsion.
2
Faites glisser une poignée pour appliquer la distorsion à l’objet.
3
Double-cliquez à l’intérieur de la fenêtre ou appuyez sur Entrée pour appliquer vos
changements.
Transformation numérique d’objets
Au lieu de faire glisser un objet pour le mettre à l’échelle, le redimensionner ou le faire pivoter, vous
pouvez entrer des valeurs spécifiques.
Pour redimensionner des objets sélectionnés en utilisant le Vérificateur de propriétés ou le
panneau Informations :
Entrez de nouvelles mesures pour la largeur (L) ou la hauteur (H).
Remarque : Si les cases L et H ne sont pas visibles dans le Vérificateur de propriétés, cliquez sur la flèche
d’extension pour afficher toutes les propriétés.
Pour mettre à l’échelle ou faire pivoter des objets sélectionnés en utilisant Transformation
numérique :
1
Choisissez Modification > Transformation > Transformation numérique.
La boîte de dialogue Transformation numérique s’affiche.
2
A partir du menu contextuel, choisissez le type de transformation à exécuter sur la sélection
active : Echelle, Redimensionner ou Rotation.
3
Choisissez Respecter les proportions pour préserver le rapport entre la hauteur et la largeur
pendant la mise à l’échelle ou le redimensionnement de la sélection.
4
Activez la case Attributs d’échelle pour transformer la trame, le trait et les effets en même temps
que l’objet.
5
Désactivez Attributs d’échelle pour transformer uniquement le trajet.
6
Tapez des valeurs numériques pour transformer la sélection, puis cliquez sur OK.
Affichage des informations de transformation dans le panneau Informations
Le panneau Informations regroupe les valeurs des transformations numériques de l’objet
sélectionné. Ces informations sont mises à jour pendant la modification de l’objet.
126 Chapitre 4
• Pour les transformations de type mise à l’échelle et transformation libre, le panneau
Informations affiche la largeur (L) et la hauteur (H) de l’objet d’origine avant sa transformation
et le pourcentage de modification de la largeur et de la hauteur lors de la transformation.
• Pour l’inclinaison et la distorsion, le panneau Informations affiche l’angle d’inclinaison par
incréments de un degré, ainsi que les coordonnées X et Y du pointeur au cours de la
transformation.
Pour afficher des informations pendant la transformation d’une sélection :
Choisissez Fenêtre > Informations.
Organisation des objets
Lorsque vous travaillez sur plusieurs objets au sein d’un même document, vous disposez de
plusieurs techniques pour organiser le document :
• Vous pouvez associer des objets pour les traiter en tant que groupe ou protéger les relations
mutuelles des objets au sein du groupe.
• Vous pouvez placer des objets derrière ou devant d’autres objets. La façon dont les objets sont
disposés est appelée ordre d’empilage.
• Vous pouvez aligner les objets sélectionnés sur l’une des parties du document, ou selon un axe
vertical ou horizontal.
Association d’objets
Vous pouvez associer des objets sélectionnés et les manipuler comme s’il s’agissait d’un objet
unique. Par exemple, dessinez séparément les pétales d’une fleur, puis sélectionnez-les pour les
associer et déplacer l’ensemble de la fleur en tant qu’objet unique.
Vous pouvez modifier les groupes sans les dissocier. Vous pouvez sélectionner un objet au sein
d’un groupe et le modifier sans dissocier les autres objets. Les objets peuvent être dissociés à tout
moment.
Regroupement d’objets sélectionnés en un seul objet
Pour associer des objets sélectionnés au préalable :
Choisissez Modification > Associer.
Pour dissocier des objets sélectionnés :
Choisissez Modification > Dissocier.
Sélection et transformation d’objets 127
Sélection d’objets dans un groupe
Si vous souhaitez travailler séparément sur les objets d’un groupe, dissociez-les ou utilisez l’outil
Sous-sélection pour ne sélectionner que des objets individuels et laisser le groupe intact.
L’outil Sous-sélection
La modification des attributs d’un objet sous-sélectionné n’affecte que cet objet et non tout le
groupe. Le déplacement d’un objet sous-sélectionné vers un autre calque supprime cet objet du
groupe d’origine.
Sous-sélection d’un objet au sein d’un groupe
Pour sélectionner un objet qui fait partie d’un groupe :
Choisissez l’outil Sous-sélection et cliquez sur l’objet. Vous pouvez également faire glisser une
zone de sélection autour de l’objet. Pour ajouter des objets à la sélection ou pour les supprimer,
maintenez enfoncée la touche Maj lorsque vous cliquez ou faites glisser le pointeur.
Pour sélectionner le groupe qui comporte un objet sous-sélectionné, exécutez l’une des actions
suivantes :
• Cliquez sur le bouton droit de la souris (Windows) ou maintenez la touche Contrôle enfoncée
et cliquez (Macintosh) sur le groupe, puis choisissez Sélectionner > Sous-sélection à partir du
menu contextuel.
• Choisissez Sélection > Supersélectionner.
Pour sélectionner tous les objets au sein d’un groupe sélectionné, exécutez l’une des actions
suivantes :
• Cliquez sur le bouton droit de la souris (Windows) ou maintenez la touche Contrôle enfoncée
et cliquez (Macintosh) sur le groupe, puis choisissez Sélectionner > Sous-sélection à partir du
menu contextuel.
• Choisissez Sélection > Sous-sélection.
Empilage des objets
Au sein d’un calque, Fireworks superpose les objets dans leur ordre de création, en plaçant les
objets les plus récents en haut de la pile. L’ordre d’empilage des objets détermine leur aspect
lorsqu’ils se chevauchent.
128 Chapitre 4
Les calques affectent également l’ordre d’empilage. Par exemple, lorsqu’un document comporte
deux calques appelés Calque 1 et Calque 2, si Calque 1 est affiché en dessous de Calque 2 dans le
panneau Calques, tout ce qui se trouve sur le Calque 2 est placé devant Calque1. Vous pouvez
changer l’ordre des calques en faisant glisser le calque du panneau Calques vers un nouvel
emplacement. Pour plus d’informations, voir « Organisation des calques » à la page 230.
Pour changer l’ordre d’empilage d’un objet sélectionné ou d’un groupe dans un calque :
• Choisissez Modification > Disposition > Premier plan ou Arrière-plan pour déplacer un objet
ou un groupe vers le haut ou le bas de la pile.
• Choisissez Modification > Disposition > Vers l’avant ou Vers l’arrière pour déplacer un objet
ou un groupe vers le haut ou le bas d’une pile.
Lorsque plusieurs objets ou groupes sont sélectionnés, les objets sont placés devant ou derrière les
objets non sélectionnés, tout en préservant leur ordre les uns par rapport aux autres.
Alignement des objets
Les commandes Aligner du menu Modification vous proposent un large éventail d’options
d’organisation, qui vous permettent de :
Aligner des objets en
fonction d’un axe horizontal ou vertical.
Aligner des objets sélectionnés à
la verticale sur le bord droit, le centre, le bord gauche ou à
l’horizontale sur le bord supérieur, le centre ou le bord inférieur.
Remarque : Les bords sont déterminés par le cadre entourant les objets sélectionnés.
Distribuer des objets sélectionnés de
façon à ce que leur partie centrale ou leurs bords soient
espacés de façon homogène.
Vous pouvez appliquer une ou plusieurs commandes d’alignement aux objets sélectionnés.
Pour aligner des objets sélectionnés, exécutez l’une des actions suivantes :
• Choisissez Modification > Aligner > A gauche pour aligner les objets sur l’objet sélectionné
situé le plus à gauche.
• Choisissez Modification > Aligner > Centré vertical pour aligner les points centraux des objets
sur l’axe vertical.
• Choisissez Modification > Aligner > A droite pour aligner les objets sur l’objet sélectionné situé
le plus à droite.
• Choisissez Modification > Aligner > En haut pour aligner les objets sur l’objet sélectionné situé
le plus haut.
• Choisissez Modification > Aligner > Centré horizontal pour aligner les points centraux des
objets sur l’axe horizontal.
• Choisissez Modification > Aligner > En bas pour aligner les objets sur l’objet sélectionné situé
le plus bas.
Pour répartir de façon égale les largeurs et les hauteurs de trois objets sélectionnés ou plus :
Choisissez Modification > Aligner > Répartir en largeur ou Modification > Aligner > Répartir en
hauteur.
Sélection et transformation d’objets 129
Disposition des objets sur les calques
Le panneau Calques met à votre disposition un autre niveau de contrôle de l’organisation. Vous
pouvez déplacer les objets sélectionnés d’un calque vers un autre en faisant glisser la vignette de
ces objets ou l’indicateur de sélection bleu du panneau Calques vers un autre calque. Pour plus
d’informations, voir « Organisation des calques » à la page 230.
130 Chapitre 4
CHAPITRE 5
Traitement des bitmaps
Les bitmaps sont des graphiques composés de petits carrés colorés nommés pixels, organisés comme
les carreaux d’une mosaïque pour former une image. Des exemples de graphiques bitmap :
photographies, images scannées et graphismes créés à partir de programmes de dessin. Elles sont parfois
vues commes des images raster (quadrillage).
Macromedia Fireworks MX combine les fonctionnalités des applications de retouche des photos,
de traçage de vecteurs et de dessin. Vous pouvez créer des images bitmap en dessinant avec des
outils bitmap, en convertissant des objets vecteurs en images bitmap ou bien en ouvrant ou en
important des images.
Fireworks possède un ensemble puissant d’effets en direct pour le réglage du ton et de la couleur,
ainsi qu’un certain nombre de façons permettant de retoucher vos images bitmap, y compris le
recadrage, l’application d’une diffusion et la duplication ou le clonage d’images. En outre,
Fireworks dispose maintenant de nouveaux outils de retouche des images : Flou, Accentuer,
Révélateur, Brûlure et Tache.
Les méthodes de sélection et de transformation des zones d’image et de pixel sont décrites dans
Chapitre 4, « Sélection et transformation d’objets », à la page 107.
Traitement des bitmaps
La partie Bitmap du panneau Outils contient des outils de sélection et de modification des
bitmaps. Pour modifier les pixels d’un bitmap dans votre document, vous pouvez choisir un outil
à partir de la partie Bitmap. Contrairement aux précédentes versions de Fireworks, vous n’avez pas
besoin de commuter délibérément entre le mode bitmap et le mode vectoriel, mais vous pouvez
toujours travailler avec des bitmaps, des objets vectoriels et du texte. Commuter vers le mode
approprié est aussi simple que choisir un outil vectoriel ou bitmap à partir du panneau Outils.
Remarque : Les précédentes versions de Fireworks affichent un bord rayé autour du document pour indiquer que
Fireworks se trouve en mode bitmap. Si vous préférez voir la bordure rayée habituelle lorsque vous travaillez avec
des bitmaps, vous pouvez choisir Options de bitmap > Afficher la bordure rayée à partir de la catégorie Edition de la
boîte de dialogue Préférences.
Création d’objets bitmap
Vous pouvez créer des images bitmap en utilisant les outils de dessin bitmap de Fireworks, en
coupant ou en copiant et en collant des sélections de pixels, ou bien en convertissant une image
vectorielle en un objet bitmap. Une autre manière de créer un objet bitmap consiste à insérer une
image bitmap vide dans votre document puis d’effectuer des dessins, de le colorer ou de le remplir.
131
Lorsque vous créez un nouvel objet bitmap, il est ajouté au calque actif. Dans le panneau Calques
avec les calques déployés, vous pouvez voir une vignette et le nom de chaque objet bitmap sous le
calque sur lequel il se trouve. Tandis que certaines applications bitmap considèrent chaque objet
bitmap comme un calque, Fireworks organise les objets bitmap, les objets vectoriels et le texte en
tant qu’objets séparés placés sur des calques. Pour plus d’informations, voir « Utilisation des
calques » à la page 227.
Pour créer un nouvel objet bitmap :
1
Choisissez l’outil Pinceau ou Crayon à partir de la partie Bitmap du panneau Outils.
2
Utilisez l’outil Pinceau ou Crayon pour créer des objets bitmap sur le document.
Un nouvel objet bitmap est ajouté au calque actif dans le panneau Calques. Pour plus
d’informations sur l’utilisation des outils Crayon ou Pinceau, voir « Traçage et modification
d’objets bitmap » à la page 133.
Vous pouvez créer un nouveau bitmap vide, puis dessiner des pixels dans le bitmap vide.
Pour créer un objet bitmap vide, exécutez l’une des actions suivantes :
• Cliquez sur le bouton Nouvelle image bitmap du panneau Calques.
• Choisissez Edition > Insertion > Bitmap vide.
• Dessinez un cadre de sélection, en partant d’une zone vierge du document et en le remplissant.
Pour plus d’informations, voir « Création d’un cadre de sélection de pixels » à la page 111.
Un bitmap vide est ajouté au calque actif dans le panneau Calques. Si le bitmap actif est
désélectionné avant qu’un pixel ait été dessiné, importé ou placé dessus d’une autre façon,
l’objet bitmap vide disparaît automatiquement du panneau Calques et du document.
Pour couper ou copier des pixels et coller en tant que nouvel objet bitmap :
1
Effectuez une sélection de pixels via l’outil Cadre de sélection, Lasso ou Baguette magique.
Pour plus d’informations, voir « Sélection de pixels » à la page 110.
2
Utilisez l’une des méthodes suivantes :
• Choisissez Edition > Couper, puis Edition > Coller.
• Choisissez Edition > Copier, puis Edition > Coller.
• Choisissez Edition > Insérer > Bitmap par Copier pour copier la sélection active dans un
nouveau bitmap.
• Choisissez Edition > Insérer > Bitmap par Couper pour couper la sélection active afin de la placer
dans un nouveau bitmap.
La sélection apparaît dans le panneau Calques comme un objet dans le calque actif.
Remarque : Cliquez avec le bouton droit de la souris (Windows) ou maintenez la touche Contrôle enfoncée et
cliquez (Macintosh) sur une sélection de pixels, puis choisissez une option couper ou copier à partir du menu
contextuel. Pour plus d’informations sur les options Bitmap par Couper et Bitmap par Copier, voir « Insertion
d’un nouveau bitmap en coupant ou en copiant » à la page 121.
Pour convertir des objets vectoriels sélectionnés en une image bitmap, exécutez l’une des actions
suivantes :
• Choisissez Modification > Fusionner la sélection.
132 Chapitre 5
• Choisissez Fusionner la sélection à partir du menu Options du panneau Calques.
Une conversion vecteur-vers-bitmap est irréversible, excepté lorsque Edition > Annuler ou
l’annulation d’actions dans le panneau Historique est encore possible. Les images bitmap ne
peuvent pas être converties en objets vectoriels.
Traçage et modification d’objets bitmap
La section Bitmap du panneau Outils contient des outils permettant de sélectionner, dessiner et
modifier des pixels dans une image bitmap.
Traçage d’objets bitmap
Vous pouvez utiliser l’outil Crayon pour dessiner des lignes d’un pixel à main levée, des lignes
imposées ou droites, de la même manière que vous utiliseriez un vrai crayon pour dessiner une
ligne au contour net. Vous pouvez également zoomer un bitmap et cliquer sur l’outil Crayon pour
modifier des pixels individuels.
Pour dessiner un objet avec l’outil Crayon :
1
Choisissez l’outil Crayon.
2
Définissez les options de l’outil dans le Vérificateur de propriétés :
Anticrénelé lisse
le bord des lignes que vous dessinez.
Effacement automatique utilise
la couleur de remplissage lorsque l’on clique sur la couleur du
trait avec l’outil Crayon.
Conserver la transparence limite l’utilisation de l’outil Crayon aux pixels existants. Aucun trait
n’apparaît dans les zones transparentes.
3
Faites glisser le pointeur pour dessiner. Faites glisser le pointeur tout en appuyant sur Maj afin
d’imposer au trajet une ligne horizontale, verticale ou diagonale.
Traçage d’objets bitmap
Vous pouvez utiliser l’outil Pinceau pour tracer un trait de pinceau en utilisant la couleur de
l’option Couleur du trait, ou alors vous pouvez utiliser l’outil Pot de peinture pour changer la
couleur des pixels sélectionnés par la couleur de l’option Couleur de la trame. L’outil Dégradé
vous permet de remplir des objets bitmap ou vectoriels avec une combinaison de couleurs aux
motifs ajustables.
Pour dessiner un objet avec l’outil Pinceau :
1
Choisissez l’outil Pinceau.
2
Définissez les attributs du trait dans le Vérificateur de propriétés.
3
Faites glisser le pointeur pour dessiner.
Pour plus d’informations sur la définition des options de l’outil Pinceau, voir « Utilisation des
traits » à la page 204.
Pour changer la couleur des pixels par la couleur de l’option Couleur de la trame :
1
Choisissez l’outil Pot de peinture.
2
Choisissez une couleur de trame dans le puits de couleurs correspondant.
Traitement des bitmaps 133
3
Définissez la valeur de la tolérance dans le Vérificateur de propriétés.
Remarque : La tolérance détermine le degré de similarité de la couleur des pixels qui seront remplis. Une valeur
de tolérance basse remplit les pixels avec des valeurs de couleur similaires au pixel sur lequel vous cliquez. Une
tolérance élevée remplit les pixels avec une plage de valeurs de couleur plus large.
4
Cliquez sur l’image.
Tous les pixels appartenant à la plage de tolérance adoptent la couleur de la trame.
Pour appliquer une trame de dégradé à une sélection de pixels :
1
Effectuez la sélection.
2
Choisissez l’outil Dégradé.
3
Définissez les attributs de la trame dans le Vérificateur de propriétés.
4
Cliquez sur la sélection de pixels pour appliquer la trame.
Les outils Pot de peinture et Dégradé peuvent également être appliqués à des objets vectoriels
sélectionnés. Pour plus d’informations sur la création, l’application et la modification de trames
de dégradé, voir « Utilisation des trames » à la page 210.
Prélèvement d’une couleur à utiliser en tant que couleur de trait ou de trame
L’outil Pipette vous permet de prélever une couleur à partir d’une image afin de désigner une
nouvelle couleur de trait ou de trame. Vous pouvez prélever la couleur d’un pixel unique, la
moyenne des valeurs de couleur dans une zone de 3 pixels sur 3 ou encore la moyenne des valeurs
de couleur dans une zone de 5 pixels sur 5.
Pour prélever la couleur d’un trait ou d’une trame :
1
Si le bon attribut n’est pas encore activé, exécutez l’une des actions suivantes :
• Cliquez sur l’icône Trait à côté de l’option Couleur du trait du panneau Outils pour en faire
l’attribut actif.
• Cliquez sur l’icône Trame à côté de l’option Couleur de la trame du panneau Outils pour en
faire l’attribut actif.
Remarque : Ne cliquez pas sur le puits de couleurs. Si vous cliquez dessus, le pointeur Pipette qui apparaît n’est
pas l’outil Pipette. Pour plus d’informations sur le pointeur Pipette du puits de couleurs, voir « Echantillonnage de
couleurs dans une fenêtre contextuelle des couleurs » à la page 204.
2
Ouvrez un document Fireworks ou n’importe quel document que Fireworks peut ouvrir. Pour
plus d’informations, voir « Ouverture de graphiques créés dans d’autres applications » à la
page 79.
3
Choisissez l’outil Pipette dans la section Bitmap du panneau Outils. Définissez le paramètre
Echantillon dans le Vérificateur de propriétés :
1 Pixel crée
une couleur de trait ou de trame à partir d’un pixel unique.
Moyenne 3x3 crée une couleur de trait ou de trame à partir de la moyenne des valeurs de couleur
d’une zone de 3 pixels sur 3.
Moyenne 5x5 crée une couleur de trait ou de trame à partir de la moyenne des valeurs de couleur
d’une zone de 5 pixels sur 5.
134 Chapitre 5
4
Cliquez sur le document avec l’outil Pipette.
La couleur échantillonnée apparaît dans toutes les options Couleur du trait ou Couleur de la
trame de Fireworks.
Effacement d’objets bitmap
Utilisez l’outil Gomme pour supprimer des pixels. Par défaut, le pointeur de l’outil Gomme
représente la taille de la Gomme active, mais vous pouvez changer la taille et l’apparence du
pointeur dans la boîte de dialogue Préférences. Pour plus d’informations, voir « Préférences
d’édition » à la page 434.
L’outil Gomme
Pour effacer des pixels dans un objet bitmap sélectionné ou une sélection de pixels :
1
Choisissez l’outil Gomme.
2
Dans le Vérificateur de propriétés, choisissez la forme de gomme ronde ou carrée.
3
Faites glisser le curseur Bord pour définir l’adoucissement du bord de la gomme.
4
Faites glisser le curseur Taille pour définir la taille de la gomme.
5
Faites glisser le curseur Opacité de la gomme pour définir le degré d’opacité.
6
Faites glisser l’outil Gomme sur les pixels que vous voulez effacer.
Diffusion des sélections de pixels
La diffusion rend flous les bords d’une sélection de pixels et aide à mélanger la zone sélectionnée
avec les pixels environnants. La diffusion est utile lorsque vous copiez une sélection et que vous la
collez sur un autre arrière-plan.
Pour diffuser les bords d’une sélection de pixels lorsque vous effectuez une sélection de pixels :
1
Choisissez un outil de sélection bitmap à partir du panneau Outils.
2
Choisissez Diffusion à partir du menu contextuel Bord du Vérificateur de propriétés.
Traitement des bitmaps 135
3
Faites glisser le curseur afin de définir le nombre de pixels que vous voulez diffuser le long du
bord de la sélection.
4
Effectuez une sélection.
Pour diffuser les bords d’une sélection de pixels à partir de la barre de menu :
1
Choisissez Sélection > Diffusion.
2
Tapez une valeur dans la boîte de dialogue Appliquer une diffusion à la sélection afin de définir
le rayon de diffusion, puis cliquez sur OK.
La valeur du rayon détermine le nombre de pixels auxquels est appliquée une diffusion le long
de la bordure de sélection.
Retouche de bitmaps
Fireworks fournit une large panoplie d’outils permettant de retoucher vos images. Vous pouvez
modifier la taille d’une image, réduire ou accentuer sa focalisation, ou copier et « imprimer » une
partie de l’image dans une autre zone.
L’outil Tampon encreur vous permet de copier ou cloner une zone d’une image vers une autre.
L’outil Flou réduit la focalisation des zones sélectionnées d’une image.
L’outil Tache prélève une couleur et l’envoie dans la direction dans laquelle vous faites glisser une image.
L’outil Accentuer accentue les zones d’une image.
L’outil Révélateur éclaircit des parties d’une image.
L’outil Brûlure assombrit des parties d’une image.
Clonage de pixels
L’outil Tampon encreur clone une zone d’une image bitmap de manière à ce que vous puissiez
l’imprimer ailleurs sur l’image. Le clonage de pixels est utile lorsque vous voulez réparer une
photographie endommagée ou supprimer la poussière d’une image. Vous pouvez copier une zone de
pixels d’une photo et remplacer la partie endommagée ou poussiéreuse par la zone clonée.
Pour cloner une partie d’une image bitmap :
1
Choisissez l’outil Tampon encreur.
2
Cliquez sur une zone afin de la désigner comme étant la source, ou bien la zone que vous
voulez cloner.
Le pointeur d’échantillonnage se transforme en un pointeur en forme de croix.
Remarque : Pour désigner une autre zone de pixels à cloner, vous pouvez appuyer sur Alt (Windows) ou sur
Option (Macintosh) tout en cliquant sur une autre zone de pixels afin de la désigner comme étant la source.
136 Chapitre 5
3
Déplacez-vous sur une autre partie de l’image et faites glisser le pointeur.
Vous allez voir deux pointeurs. Le premier, la source du clonage, a la forme d’une croix.
« Préférences d’édition » à la page 434 pour plus d’informations.
Selon le type de pinceau que vous avez sélectionné, le deuxième pointeur est un tampon
encreur, une croix ou un cercle bleu. Lorsque vous faites glisser le deuxième pointeur, les pixels
situés sous le premier pointeur sont copiés et appliqués à la zone sous le second pointeur.
Pour définir les options de l’outil Tampon encreur :
1
Choisissez l’outil Tampon encreur.
2
Effectuez un choix parmi les options suivantes du Vérificateur de propriétés :
Taille détermine
la taille du tampon.
Bord détermine
l’adoucissement du trait (100 % = dur, 0 % = doux).
Source alignée affecte l’opération d’échantillonnage. Lorsque Source alignée est sélectionné, le
pointeur d’échantillonnage se déplace verticalement et horizontalement, en alignement avec le
second. Lorsque Source alignée est désélectionné, la zone d’échantillonnage est établie, peu
importe l’endroit où vous déplacez le second pointeur et l’endroit où vous cliquez.
Utiliser l’ensemble du document échantillonne
à partir de tous les objets de tous les calques.
Lorsque cette option est désélectionnée, l’outil Tampon encreur échantillonne uniquement à
partir de l’objet actif.
Opacité détermine
ce qui peut être vu de l’arrière-plan à travers le trait.
Mode de fondu détermine
la façon dont l’image clonée affecte l’arrière-plan.
Pour dupliquer une sélection de pixels, utilisez l’une des méthodes suivantes :
• Faites glisser la sélection de pixels avec l’outil Sous-sélection.
• Maintenez enfoncée la touche Alt (Windows) ou Option (Macintosh) en faisant glisser la
sélection de pixels via l’outil Pointeur.
Application d’un flou, accentuation et maculage des pixels
Les outils Flou et Accentuer affectent la focalisation des pixels. L’outil Flou vous permet
d’accentuer ou de désaccentuer des parties d’image en appliquant un flou à la focalisation
d’éléments de manière sélective, un peu comme un photographe contrôle la profondeur du
champ. L’outil Accentuer peut être utile pour réparer des problèmes de scannage ou de
photographies hors foyer. L’outil Tache vous permet de mélanger délicatement des couleurs,
comme la création du reflet d’une image.
Pour appliquer un flou ou accentuer une image :
1
Choisissez l’outil Flou ou Accentuer.
2
Définissez les options du pinceau dans le Vérificateur de propriétés :
Taille détermine
Bord spécifie
la taille de la pointe du pinceau.
l’adoucissement de la pointe du pinceau.
Forme définit
une pointe de pinceau ronde ou carrée.
Intensité définit
la quantité de flou ou d’accentuation.
Traitement des bitmaps 137
3
Faites glisser l’outil sur les pixels à accentuer ou auxquels appliquer un flou.
Conseil : En maintenant enfoncée la touche Alt (Windows) ou Option (Macintosh), vous alternerez le
comportement de l’outil.
Pour maculer les couleurs d’une image :
1
Choisissez l’outil Tache.
2
Définissez les options de l’outil dans le Vérificateur de propriétés :
Taille spécifie
la taille de la pointe du pinceau.
Forme définit
une pointe de pinceau ronde ou carrée.
Bord spécifie
l’adoucissement de la pointe du pinceau.
Pression définit
l’intensité du trait.
Couleur de la tache vous
permet de maculer en utilisant une couleur spécifique au début de
chaque trait. Si cette option est désélectionnée, l’outil utilise la couleur située sous le pointeur
de l’outil.
Utiliser l’ensemble du document macule en utilisant des données de couleur provenant de tous
les objets de tous les calques. Si cette option est désélectionnée, l’outil Tache utilise les couleurs
provenant uniquement de l’objet actif.
3
Faites glisser l’outil sur les pixels à maculer.
Eclaircissement et assombrissement de pixels
Utilisez l’outil Révélateur ou Brûlure pour respectivement éclaircir ou assombrir des parties
d’image. Ces outils ramènent à la technique de la chambre noire consistant à ajouter ou soustraire
la lumière d’une photographie.
Pour éclaircir ou assombrir des parties d’une image :
1
Choisissez l’outil Révélateur pour éclaircir des parties d’image, ou bien l’outil Brûlure pour
assombrir des parties d’image.
2
Définissez les options du pinceau dans le Vérificateur de propriétés :
Taille détermine
Forme définit
Bord définit
3
la taille de la pointe du pinceau.
une pointe de pinceau ronde ou carrée.
l’adoucissement de la pointe du pinceau.
Définissez l’exposition dans le Vérificateur de propriétés.
L’exposition s’échelonne de 0 % à 100 %. Pour un effet amoindri, spécifiez une valeur de
pourcentage plus basse. Pour un effet plus accentué, spécifiez une valeur plus haute.
4
Définissez l’intervalle dans le Vérificateur de propriétés :
Ombré change
principalement les parties sombres de l’image.
Surbrillances change
Demi-tons change
138 Chapitre 5
principalement les parties claires de l’image.
principalement l’intervalle moyen par couche de l’image.
5
Faites glisser le pointeur sur la partie de l’image que vous voulez éclaircir ou assombrir.
Maintenez enfoncée la touche Alt (Windows) ou Options (Macintosh) tout en faisant glisser
l’outil afin de passer temporairement de l’outil Révélateur à l’outil Brûlure, ou bien de l’outil
Brûlure à l’outil Révélateur.
Recadrage d’un bitmap sélectionné
Vous pouvez isoler un objet bitmap unique dans un document Fireworks et recadrer uniquement
cet objet bitmap, laissant intacts les autres objets du document.
Pour recadrer une image bitmap sans affecter les autres objets du document :
1
Sélectionnez un objet bitmap en cliquant sur l’objet du document ou bien en cliquant sur sa
vignette à partir du panneau Calques, ou alors tracez un cadre de sélection en utilisant un outil
de sélection bitmap.
2
Choisissez Edition > Recadrer le bitmap sélectionné.
Les poignées de recadrage apparaissent tout autour du bitmap sélectionné ou du cadre de
sélection, si vous en avez tracé un au cours de l’étape 1.
3
Utilisez ces poignées pour cadrer l’image que vous souhaitez conserver :
Remarque : Pour annuler une sélection de recadrage, appuyez sur Echap.
Un cadre de délimitation
4
Double-cliquez à l’intérieur du cadre de délimitation ou appuyez sur Entrée pour recadrer la
sélection.
Chaque pixel du bitmap sélectionné se trouvant à l’extérieur du cadre de délimitation est
supprimé, mais les autres objets du document demeurent intacts.
Réglage de la couleur et du ton d’un bitmap
Fireworks possède des filtres de réglage de la couleur et du ton vous permettant d’améliorer et de
rehausser les couleurs de vos images bitmap. Vous pouvez régler le contraste et la luminosité, la
gradation utile ainsi que la saturation de la teinte et de la couleur de vos images.
Traitement des bitmaps 139
Vous pouvez facilement ajouter dans Fireworks vos plug-ins favoris issus de Photoshop et les
appliquer à des bitmaps en utilisant le menu Filtres ou la zone des effets en direct du Vérificateur
de propriétés. L’application de filtres en tant qu’effets en direct à partir du Vérificateur de
propriétés n’est pas destructeur. Les effets en direct ne modifient pas les pixels de manière
permanente. Vous pouvez les déplacer ou les modifier à n’importe quel moment.
Si vous appliquez un filtre à un objet vectoriel sélectionné en utilisant le menu Filtres, la sélection
est convertie en un bitmap.
Si vous préférez appliquer des filtres de façon irréversible et permanente, vous pouvez les choisir à
partir du menu Filtres. Toutefois, nous vous recommandons d’utiliser les filtres en tant qu’effets
en direct à chaque fois que cela est possible. Pour plus d’informations sur l’ajout de plug-ins de
Photoshop, voir « Application de filtres et de plug-ins Photoshop comme effets en direct » à la
page 223.
Les filtres du menu Filtres peuvent être appliqués à des sélections de pixels, mais les effets en direct
ne le peuvent pas. Toutefois, vous pouvez définir une zone d’un bitmap et créer un bitmap séparé
à partir de ce dernier, puis lui appliquer un effet en direct.
Pour appliquer un effet en direct à une zone définie par un cadre de sélection bitmap :
1
Choisissez un outil de sélection bitmap et créez un cadre de sélection.
2
Choisissez Edition > Couper.
3
Choisissez Edition > Coller.
La sélection est collée à l’emplacement exact où étaient localisés les pixels d’origine, mais la
sélection est maintenant un objet bitmap séparé.
4
Cliquez sur la vignette du nouvel objet bitmap à partir du panneau Calques afin de
sélectionner l’objet bitmap.
5
Appliquez un effet en direct à partir du Vérificateur de propriétés.
L’effet en direct est appliqué uniquement au nouvel objet bitmap, simulant l’application d’un
filtre à une sélection de pixels.
Remarque : Bien que les effets en direct soient plus flexibles, un grand nombre d’effets en direct dans un
document peut ralentir la performance de Fireworks. Pour plus d’informations, voir « Contrôle de l’actualisation
de document » à la page 96.
Réglage de la gradation utile
Vous pouvez utiliser les fonctions Niveaux et Courbes pour régler la gradation utile d’un bitmap.
Avec Niveaux, vous pouvez corriger les bitmaps comportant une forte concentration de pixels
dans les zones les plus claires, les demi-tons ou les ombres. Vous pouvez également utiliser
Niveaux automatiques et laisser Fireworks régler à votre place la gradation utile. Si vous désirez un
contrôle plus précis sur la gradation utile d’un bitmap, vous pouvez utiliser Courbes, qui vous
permet de régler toute couleur de la gradation utile sans affecter les autres couleurs.
Utilisation de la fonction Niveaux
Un bitmap avec une gradation utile complète doit avoir un nombre pair de pixels dans toutes les
zones. La fonction Niveaux corrige les bitmaps comportant une forte concentration de pixels dans
les zones les plus claires, les demi-tons ou les ombres.
Surbrillances est
140 Chapitre 5
appliquée lorsqu’une forte concentration de pixels paraît délavée.
Demi-tons est
appliquée lorsqu’un trop grand nombre de pixels demi-ton paraissent fades.
Ombré est appliquée lorsqu’une zone de pixels excessivement sombres masque une grande partie
des détails.
Niveaux définit les pixels les plus sombres et les plus clairs en tant que noir et blanc, puis
redistribue les demi-tons proportionnellement. Cette opération permet d’obtenir une image dont
les pixels sont aussi nets que possible.
Original avec des pixels concentrés dans les zones claires ; image après le réglage avec Niveaux
Vous pouvez utiliser l’histogramme de la boîte de dialogue Niveaux pour visualiser la distribution
des pixels d’un bitmap. L’histogramme est une illustration graphique de la distribution des pixels
dans les zones les plus claires, les demi-tons et les ombres d’un bitmap.
L’histogramme vous aide à déterminer la meilleure méthode de correction de la gradation utile
d’une image. Une forte concentration de pixels au niveau des ombres et des zones les plus claires
indique que l’image peut être améliorée avec les fonctions Niveaux ou Courbes.
L’axe horizontal correspond aux valeurs de couleurs et va des plus foncées (0) aux plus claires (255).
Lisez l’axe horizontal de gauche à droite : la partie gauche représente les pixels les plus sombres, le
centre les pixels des demi-tons et la partie droite les plus clairs.
L’axe vertical indique le nombre de pixels en fonction du niveau de luminosité. En général, vous
devez régler les pixels les plus clairs et les ombres en premier. Le réglage des demi-tons permet
d’améliorer leur valeur de luminosité sans affecter les pixels les plus clairs et les plus sombres.
Pour régler les zones les plus claires, les demi-tons et les ombres :
1
Sélectionnez l’image bitmap.
2
Exécutez l’une des actions suivantes pour ouvrir la boîte de dialogue Niveaux :
• Dans le Vérificateur de propriétés, cliquez sur le bouton Ajouter des effets, puis choisissez
Régler la couleur > Niveaux à partir du menu contextuel Ajouter des effets.
• Choisissez Filtres > Régler la couleur > Niveaux.
Traitement des bitmaps 141
Remarque : Appliquer un filtre à partir du menu Filtres est destructeur. Autrement dit, cette action ne peut pas
être annulée, excepté lorsque Edition > Annuler est possible. Pour conserver la possibilité de régler, désactiver ou
supprimer ce filtre, appliquez-le en tant qu’effet en direct, comme décrit dans la première option de cette étape.
Pour plus d’informations, voir « Utilisation des effets en direct » à la page 219.
La boîte de dialogue Niveaux
Conseil : Pour afficher vos modifications dans l’espace de travail, choisissez Aperçu dans la boîte de dialogue.
Lorsque vous entrez les modifications, l’image est mise à jour automatiquement.
3
Dans le menu contextuel Canal, choisissez si vous voulez appliquer ces modifications à des canaux
de couleurs spécifiques (Rouge, Bleu ou Vert) ou bien à tous les canaux de couleurs (RVB).
4
Faites glisser le curseur Niveaux d’entrée, situé sous l’histogramme, pour régler les zones les plus
claires, les demi-tons et les ombres.
• Le curseur de droite règle les zones les plus claires en utilisant des valeurs comprises entre 255
et 0.
• Le curseur du centre règle les demi-tons en utilisant des valeurs allant de 10 à 0.
• Le curseur de gauche règle les ombres en utilisant des valeurs comprises entre 0 et 255.
Lorsque vous déplacez les curseurs, les valeurs sont entrées automatiquement dans les zones
Niveaux d’entrée.
Remarque : La valeur des ombres ne peut pas être supérieure à la valeur des zones les plus claires, la valeur des
zones les plus claires ne peut pas être inférieure à la valeur des ombres. Quant aux demi-tons, ils doivent se situer
entre les paramètres des ombres et des zones les plus claires.
5
Faites glisser les curseurs de l’option Niveaux de sortie pour régler le contraste de l’image.
• Le curseur de droite règle les zones les plus claires en utilisant des valeurs comprises entre 255
et 0.
• Le curseur de gauche règle les ombres en utilisant des valeurs comprises entre 0 et 255.
Lorsque vous déplacez les curseurs, les valeurs sont entrées automatiquement dans les zones
Niveaux de sortie.
142 Chapitre 5
Utilisation des Niveaux automatiques
Vous pouvez utiliser les Niveaux automatiques pour que Fireworks effectue à votre place les
réglages de la gradation utile.
Pour régler automatiquement les zones les plus claires, les demi-tons et les ombres :
1
Sélectionnez l’image.
2
Choisissez l’une des options suivantes pour sélectionner Niveaux automatiques :
• Dans le Vérificateur de propriétés, cliquez sur le bouton Ajouter des effets, puis choisissez
Régler la couleur > Niveaux automatiques à partir du menu contextuel Ajouter des effets.
• Choisissez Filtres > Régler la couleur > Niveaux automatiques.
Remarque : Appliquer un filtre à partir du menu Filtres est destructeur. Autrement dit, cette action ne peut pas
être annulée, excepté lorsque Edition > Annuler est possible. Pour conserver la possibilité de régler, désactiver ou
supprimer ce filtre, appliquez-le en tant qu’effet en direct, comme décrit dans la première option de cette étape.
Pour plus d’informations, voir « Utilisation des effets en direct » à la page 219.
Conseil : Vous pouvez également régler automatiquement les zones les plus claires, les demi-tons et les ombres
en cliquant sur le bouton Auto dans la boîte de dialogue Niveaux ou Courbes.
Utilisation de Courbes
La fonction Courbes est similaire à la fonction Niveaux, mais elle permet de contrôler de façon
plus précise la gradation utile. Alors que la fonction Niveaux utilise les zones les plus claires, les
ombres et les demi-tons pour corriger la gradation utile, la fonction Courbes permet de régler les
couleurs de l’ensemble de la gradation utile au lieu de se limiter à trois variables et n’affecte pas les
autres couleurs. Par exemple, utilisez Courbes pour corriger un défaut d’exposition.
La grille de la boîte de dialogue Courbes illustre deux valeurs de luminosité :
L’axe horizontal indique la luminosité d’origine des pixels (telle qu’indiquée dans la zone Entrée).
L’axe vertical représente
les nouvelles valeurs de luminosité (telles qu’indiquées dans la zone
Sortie).
Lorsque vous ouvrez la boîte de dialogue Courbes pour la première fois, la ligne diagonale indique
qu’aucune modification n’a été effectuée et que, par conséquent, les valeurs de sortie sont
identiques pour tous les pixels.
Pour régler un point spécifique de la gradation utile :
1
Sélectionnez l’image.
2
Exécutez l’une des actions suivantes pour ouvrir la boîte de dialogue Courbes :
• Dans le Vérificateur de propriétés, cliquez sur le bouton Ajouter des effets, puis choisissez
Régler la couleur > Courbes à partir du menu contextuel Ajouter des effets.
• Choisissez Filtres > Régler la couleur > Courbes.
Traitement des bitmaps 143
Remarque : Appliquer un filtre à partir du menu Filtres est destructeur. Autrement dit, cette action ne peut pas
être annulée, excepté lorsque Edition > Annuler est possible. Pour conserver la possibilité de régler, désactiver ou
supprimer ce filtre, appliquez-le en tant qu’effet en direct, comme décrit dans la première option de cette étape.
Pour plus d’informations, voir « Utilisation des effets en direct » à la page 219.
La boîte de dialogue Courbes
3
Dans le menu contextuel Canal, choisissez si vous voulez appliquer les modifications à des
canaux de couleur spécifiques ou à l’ensemble des couleurs.
4
Pour régler la courbe, cliquez sur l’un des points de la diagonale, puis faites-le glisser à une
autre position.
• Tous les points de la courbe disposent de leurs propres valeurs Entrée et Sortie. Lorsque vous
faites glisser un point, les valeurs Entrée et Sortie sont mises à jour automatiquement.
• La courbe affiche des valeurs de luminosité comprises entre 0 et 255, 0 représentant les ombres.
Courbe après avoir fait glisser un point pour le régler
Conseil : Vous pouvez également régler automatiquement les zones les plus claires, les demi-tons et les ombres
en cliquant sur le bouton Auto dans la boîte de dialogue Courbes.
144 Chapitre 5
Pour supprimer un point le long de la courbe :
Faites glisser le point en dehors de la courbe.
Remarque : Vous ne pouvez pas supprimer les points de terminaison de la courbe.
Utilisation de pipettes de gradation
Vous pouvez régler les zones les plus claires, les ombres et les demi-tons avec la pipette
correspondante à partir de la boîte de dialogue Niveaux ou Courbes.
Pour régler manuellement la balance de gradation en utilisant les pipettes de gradation :
1
Ouvrez la boîte de dialogue Niveaux ou Courbes, puis choisissez un canal de couleur dans le menu
contextuel Canal.
2
Choisissez la pipette appropriée pour redéfinir les valeurs de gradation de l’image :
• A l’aide de la pipette zone claire, cliquez sur le pixel le plus clair de l’image afin de redéfinir la
valeur la plus claire.
• A l’aide de la pipette Demi-tons, cliquez sur un pixel de l’image de couleur neutre afin de redéfinir
la valeur de demi-ton.
• A l’aide de la pipette Ombre, cliquez sur le pixel le plus sombre de l’image pour redéfinir la
valeur de l’ombre.
3
Cliquez sur OK.
Réglage de la luminosité et du contraste
La fonction Luminosité/Contraste modifie le contraste ou la luminosité des pixels d’une image. Cela
affecte les zones les plus claires, les ombres et les demi-tons d’une image. La fonction Luminosité/
Contraste est généralement utilisée pour corriger des images trop sombres ou trop claires.
Original ; après le réglage de la luminosité
Pour régler la luminosité ou le contraste :
1
Sélectionnez l’image.
2
Exécutez l’une des actions suivantes pour ouvrir la boîte de dialogue Luminosité/Contraste :
Traitement des bitmaps 145
• Dans le Vérificateur de propriétés, cliquez sur le bouton Ajouter des effets, puis choisissez
Régler la couleur > Luminosité/Contraste à partir du menu contextuel Ajouter des effets.
• Choisissez Filtres > Régler la couleur > Luminosité/Contraste.
Remarque : Appliquer un filtre à partir du menu Filtres est destructeur. Autrement dit, cette action ne peut pas
être annulée, excepté lorsque Edition > Annuler est possible. Pour conserver la possibilité de régler, désactiver ou
supprimer ce filtre, appliquez-le en tant qu’effet en direct, comme décrit dans la première option de cette étape.
Pour plus d’informations, voir « Utilisation des effets en direct » à la page 219.
3
Faites glisser les curseurs Luminosité et Contraste pour sélectionner le niveau voulu.
Les valeurs vont de -100 à 100.
4
Cliquez sur OK.
Application en direct de l’effet Trame de couleur
Vous pouvez utiliser l’effet Trame de couleur en direct pour changer rapidement la couleur
d’objets, soit en remplaçant tous les pixels soit en mélangeant une couleur à celle d’un objet
existant. Lorsque vous mélangez des couleurs, la couleur est ajoutée au dessus de l’objet. Mélanger
une couleur à celle d’un objet existant revient à utiliser la fonction Teinte/Saturation. Cela permet
toutefois d’appliquer rapidement une couleur spécifique à partir d’un nuancier.
Pour ajouter un effet de type Trame de couleur à un objet sélectionné :
1
Dans le Vérificateur de propriétés, cliquez sur le bouton Ajouter des effets, puis choisissez
Régler la couleur > Trame de couleur à partir du menu contextuel Ajouter des effets.
2
Choisissez un mode de fondu.
Le mode par défaut est Normal. Pour plus d’informations sur les modes de fondu, voir « Les
modes de fondu » à la page 251.
3
Choisissez une couleur de trame dans le puits de couleurs.
4
Choisissez un pourcentage d’opacité pour la couleur de trame et appuyez sur Entrée.
Réglage de la teinte et de la saturation
Utilisez la fonction Teinte/Saturation pour régler l’ombre d’une couleur, sa teinte ; l’intensité
d’une couleur, sa saturation ; ou bien la luminosité de la couleur d’une image.
Original ; après le réglage de la luminosité
146 Chapitre 5
Pour régler la teinte ou la saturation :
1
Sélectionnez l’image.
2
Exécutez l’une des actions suivantes pour ouvrir la boîte de dialogue Teinte/Saturation :
• Dans le Vérificateur de propriétés, cliquez sur le bouton Ajouter des effets, puis choisissez
Régler la couleur > Teinte/Saturation à partir du menu contextuel Ajouter des effets.
• Choisissez Filtres > Régler la couleur > Teinte/Saturation.
Remarque : Appliquer un filtre à partir du menu Filtres est destructeur. Autrement dit, cette action ne peut pas
être annulée, excepté lorsque Edition > Annuler est possible. Pour conserver la possibilité de régler, désactiver ou
supprimer ce filtre, appliquez-le en tant qu’effet en direct, comme décrit dans la première option de cette étape.
Pour plus d’informations, voir « Utilisation des effets en direct » à la page 219.
3
Faites glisser le curseur de Teinte pour régler la couleur de l’image.
Les valeurs vont de -100 à 100.
4
Faites glisser le curseur de Saturation pour régler le niveau de pureté des couleurs.
Les valeurs vont de -100 à 100.
5
Faites glisser le curseur Luminosité pour régler la luminosité des couleurs.
Les valeurs vont de -100 à 100.
6
Cliquez sur OK.
Pour changer une image RVB en une image à deux tons ou pour ajouter des couleurs à une image
en échelles de gris :
Choisissez Coloriser dans la boîte de dialogue Teinte/Saturation.
Remarque : Si vous choisissez Coloriser, la plage de valeurs des curseurs Teinte et Saturation change. Les valeurs
de teinte vont alors de 0 à 360. Les valeurs de saturation vont de 0 à 100.
Inversion des valeurs de couleur d’une image
Vous pouvez utiliser Inverser pour appliquer la valeur inverse des couleurs de l’image à partir de la
roue chromatique. Par exemple, l’application du filtre à un objet rouge (R=255, V=0, B=0)
change la couleur en bleu clair (R=0, V=255, B=255).
Une image noir et blanc ; l’image inversée
Traitement des bitmaps 147
Une image en couleur ; l’image inversée
Pour inverser les couleurs :
1
Sélectionnez l’image.
2
Utilisez l’une des méthodes suivantes :
• Dans le Vérificateur de propriétés, cliquez sur le bouton Ajouter des effets, puis choisissez
Régler la couleur > Inverser à partir du menu contextuel Ajouter des effets.
• Choisissez Filtres > Régler la couleur > Inverser.
Remarque : Appliquer un filtre à partir du menu Filtres est destructeur. Autrement dit, cette action ne peut pas
être annulée, excepté lorsque Edition > Annuler est possible. Pour conserver la possibilité de régler, désactiver ou
supprimer ce filtre, appliquez-le en tant qu’effet en direct, comme décrit dans la première option de cette étape.
Pour plus d’informations, voir « Utilisation des effets en direct » à la page 219.
Application d’un flou et accentuation des bitmaps
Fireworks possède un ensemble d’options de floutage et d’accentuation que vous pouvez
appliquer en tant qu’effets en direct ou en tant que filtres irréversibles et permanents.
Application d’un flou à une image
L’application d’un flou adoucit l’apparence d’une image bitmap. Fireworks possède trois options
de flou :
La commande Flou adoucit
la focalisation des pixels sélectionnés.
La commande Accentuer le flou applique
commande Flou.
148 Chapitre 5
un effet de flou trois fois plus puissant que celui de la
La commande Flou gaussien applique
à chaque pixel une valeur médiane pondérée de flou pour
produire un effet de voilage.
Avant et après l’application du Flou gaussien
Pour rendre une image floue :
1
Sélectionnez l’image.
2
Utilisez l’une des méthodes suivantes :
• Dans le Vérificateur de propriétés, cliquez sur le bouton Ajouter des effets, puis choisissez
Flou > Flou ou Accentuer le flou à partir du menu contextuel Ajouter des effets.
• Choisissez Filtres > Flou > Flou ou Accentuer le flou.
Remarque : Appliquer un filtre à partir du menu Filtres est destructeur. Autrement dit, cette action ne peut pas
être annulée, excepté lorsque Edition > Annuler est possible. Pour conserver la possibilité de régler, désactiver ou
supprimer ce filtre, appliquez-le en tant qu’effet en direct, comme décrit dans la première option de cette étape.
Pour plus d’informations, voir « Utilisation des effets en direct » à la page 219.
Pour rendre une image floue avec la commande Flou gaussien :
1
Sélectionnez l’image.
2
Exécutez l’une des actions suivantes pour ouvrir la boîte de dialogue Flou gaussien :
• Dans le Vérificateur de propriétés, cliquez sur le bouton Ajouter des effets, puis choisissez
Flou > Flou gaussien à partir du menu contextuel Ajouter des effets.
• Choisissez Filtres > Flou > Flou gaussien.
Remarque : Appliquer un filtre à partir du menu Filtres est destructeur. Autrement dit, cette action ne peut pas
être annulée, excepté lorsque Edition > Annuler est possible. Pour conserver la possibilité de régler, désactiver ou
supprimer ce filtre, appliquez-le en tant qu’effet en direct, comme décrit dans la première option de cette étape.
Pour plus d’informations, voir « Utilisation des effets en direct » à la page 219.
3
Faites glisser le curseur du Rayon du flou pour spécifier la force de l’effet.
Les valeurs disponibles vont de 0,1 à 250. Plus le rayon est élevé, plus l’effet est appuyé.
4
Cliquez sur OK.
Traitement des bitmaps 149
Utilisation de l’effet Rechercher les bords pour donner l’apparence d’un croquis
L’effet Rechercher les bords change vos bitmaps, de façon à ce qu’elles ressemblent à des tracés de
lignes en identifiant les transitions de couleurs dans les images et en les changeant en lignes.
Original ; après l’application de la commande Rechercher les bords
Pour appliquer l’effet Rechercher les bords à une zone sélectionnée, utilisez l’une des méthodes
suivantes :
• Dans le Vérificateur de propriétés, cliquez sur le bouton Ajouter des effets, puis choisissez
Autre > Rechercher les bords à partir du menu contextuel Ajouter des effets.
• Choisissez Filtres > Autre > Rechercher les bords.
Remarque : Appliquer un filtre à partir du menu Filtres est destructeur. Autrement dit, cette action ne peut pas
être annulée, excepté lorsque Edition > Annuler est possible. Pour conserver la possibilité de régler, désactiver ou
supprimer ce filtre, appliquez-le en tant qu’effet en direct, comme décrit dans la première option de cette étape.
Pour plus d’informations, voir « Utilisation des effets en direct » à la page 219.
Conversion d’une image en transparent
Utilisez l’effet Convertir en Alpha pour convertir un objet ou du texte en un transparent qui
repose sur la transparence de l’image.
Pour appliquer l’effet Convertir en Alpha à une zone sélectionnée, exécutez l’une des actions
suivantes :
• Dans le Vérificateur de propriétés, cliquez sur le bouton Ajouter des effets, puis choisissez
Autre > Convertir en Alpha à partir du menu contextuel Ajouter des effets.
• Choisissez Filtres > Autres > Convertir en Alpha.
Remarque : Appliquer un filtre à partir du menu Filtres est destructeur. Autrement dit, cette action ne peut pas
être annulée, excepté lorsque Edition > Annuler est possible. Pour conserver la possibilité de régler, désactiver ou
supprimer ce filtre, appliquez-le en tant qu’effet en direct, comme décrit dans la première option de cette étape.
Pour plus d’informations, voir « Utilisation des effets en direct » à la page 219.
150 Chapitre 5
Utilisation de la fonction Accentuer pour accentuer une image
Utilisez la fonction Accentuer pour corriger les images légèrement floues. Fireworks possède trois
options Accentuer :
La commande Accentuer règle la mise au point d’une image
floue en augmentant le contraste des
pixels adjacents.
La commande Accentuer davantage augmente
le contraste des pixels adjacents trois fois plus que
la commande Accentuer.
La commande Masque d’accentuation accentue
une image en réglant le contraste des bords des
pixels. Cette option offre le meilleur contrôle, et doit être utilisée en priorité pour accentuer une
image.
Original ; après l’accentuation
Pour accentuer une image en utilisant une option d’accentuation :
1
Sélectionnez l’image.
2
Exécutez l’une des actions suivantes pour choisir une option d’accentuation :
• Dans le Vérificateur de propriétés, cliquez sur le bouton Ajouter des effets, puis choisissez
Accentuer > Accentuer ou Accentuer davantage à partir du menu contextuel Ajouter des effets.
• Choisissez Filtres > Accentuer > Accentuer ou Accentuer davantage.
Remarque : Appliquer un filtre à partir du menu Filtres est destructeur. Autrement dit, cette action ne peut pas
être annulée, excepté lorsque Edition > Annuler est possible. Pour conserver la possibilité de régler, désactiver ou
supprimer ce filtre, appliquez-le en tant qu’effet en direct, comme décrit dans la première option de cette étape.
Pour plus d’informations, voir « Utilisation des effets en direct » à la page 219.
Pour accentuer une image avec l’option Masque d’accentuation :
1
Sélectionnez l’image.
2
Exécutez l’une des actions suivantes pour ouvrir la boîte de dialogue Masque d’accentuation :
• Dans le Vérificateur de propriétés, cliquez sur le bouton Ajouter des effets, puis choisissez
Accentuer > Masque d’accentuation à partir du menu contextuel Ajouter des effets.
• Choisissez Filtres > Accentuer > Masque d’accentuation.
Remarque : Appliquer un filtre à partir du menu Filtres est destructeur. Autrement dit, cette action ne peut pas
être annulée, excepté lorsque Edition > Annuler est possible. Pour conserver la possibilité de régler, désactiver ou
supprimer ce filtre, appliquez-le en tant qu’effet en direct, comme décrit dans la première option de cette étape.
Pour plus d’informations, voir « Utilisation des effets en direct » à la page 219.
Traitement des bitmaps 151
3
Faites glisser le curseur Intensité de l’accentuation pour sélectionner un facteur d’accentuation
compris entre 1 et 500.
4
Faites glisser le curseur Rayon en pixels pour sélectionner un rayon compris entre 0,1 et 250.
Plus le rayon est élevé plus la zone à fort contraste entourant les pixels est étendue.
5
Avec le curseur Seuil, sélectionnez une valeur comprise entre 0 et 255.
Les valeurs comprises entre 2 et 25 sont les plus communes. Lorsque vous augmentez ce seuil,
vous n’accentuez 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 l’ensemble des pixels de
l’image.
6
Cliquez sur OK.
152 Chapitre 5
CHAPITRE 6
Utilisation d’objets vectoriels
Un objet vectoriel est un graphisme numérique dont la forme est définie par un trajet. La forme
d’un trajet vectoriel est définie par une série de points. La couleur du trait d’un objet vectoriel suit
un trajet. Sa trame occupe la partie située à l’intérieur du trajet. De manière générale, le trait et la
trame déterminent l’aspect du graphisme lorsque ce dernier est publié sous une forme imprimée
ou sur le Web.
Macromedia Fireworks MX contient un grand nombre d’objects vectoriels de dessin et d’édition
utilisant diverses techniques. Les outils de formes élémentaires permettent de dessiner rapidement
des lignes, des cercles et des ellipses, des carrés et des rectangles, des étoiles et des polygones
équilatéraux comportant entre 3 et 360 côtés.
Vous pouvez dessiner des trajets vectoriels de forme libre avec les outils Plume et Trajet vectoriel.
L’outil Plume permet de dessiner des formes complexes avec des courbes lisses, ainsi que des lignes
droites en plaçant des points un par un.
Vous disposez de plusieurs méthodes pour modifier les objets vectoriels sous Fireworks. Vous
pouvez changer la forme d’un objet en déplaçant, ajoutant ou supprimant des points. Vous
pouvez utiliser des poignées de points pour changer la forme des segments de trajet adjacents. Les
outils de forme libre permettent de modifier la forme des objets en modifiant leurs trajets
directement.
Les commandes du menu Modifier offrent des options supplémentaires de modification des
objets, ce qui inclut l’association d’objets, la création d’un objet à partir de l’intersection de
plusieurs objets et l’extension du trait d’un objet. Vous pouvez également importer des graphiques
et les manipuler avec ces commandes.
Traçage d’objets vectoriels
Le programme Fireworks dispose de nombreux outils permettant de dessiner des objets vectoriels.
Vous pouvez dessiner des formes de base, des trajets vectoriels de forme libre et des formes
complexes en joignant les points.
Dessin de formes élémentaires
Les carrés, les rectangles, les cercles, les ovales, les étoiles et autres polygones sont faciles à dessiner
grâce aux outils de dessin des formes élémentaires. Vous pouvez dessiner des rectangles avec des
bords arrondis et changer la valeur de l’angle après avoir dessiné le rectangle. Vous pouvez
également dessiner différentes étoiles, allant des étoiles à bord fin et pointu aux étoiles larges.
153
Les outils de dessin des formes élémentaires figurent dans la section Vecteur des outils de dessin
du panneau Outils. Lorsque vous utilisez l’un des outils de dessin ou de peinture pour créer un
objet, l’outil applique les attributs de trait et de trame actifs à l’objet. Pour changer les attributs de
trait et de trame actifs applicables aux nouveaux objets et aux objets existants, voir Chapitre 8,
« Application de couleurs, de traits et de trames », à la page 195.
Outils de formes élémentaires
Dessin de lignes, de rectangles et d’ellipses
Vous pouvez utiliser l’outil Ligne, Rectangle ou Ellipse pour dessiner rapidement des formes
élémentaires. L’outil Rectangle dessine des rectangles en tant qu’objets associés. Pour déplacer
séparément l’un des angles du rectangle, dissociez le rectangle ou utilisez l’outil Sous-sélection.
Pour dessiner un rectangle avec des angles arrondis, voir « Dessin de rectangles à angles arrondis »
à la page 155.
Pour dessiner une ligne, un rectangle ou une ellipse :
1
Choisissez l’outil Ligne, Rectangle ou Ellipse.
2
Si nécessaire, sélectionnez les attributs de trait et de trame dans le Vérificateur de propriétés.
Voir Chapitre 8, « Application de couleurs, de traits et de trames », à la page 195.
3
Faites glisser le curseur sur le document pour dessiner la forme.
Avec l’outil Ligne, appuyez sur la touche Maj tout en faisant glisser la souris pour obtenir des
lignes inclinées à 45° par rapport à l’horizontale.
Avec les outils Rectangle et Ellipse, appuyez sur la touche Maj tout en faisant glisser la souris
pour obtenir des carrés ou des cercles.
Pour dessiner une ligne, un rectangle ou une ellipse à partir d’un point central spécifique :
Placez le pointeur au niveau du point central voulu, puis appuyez sur la touche Alt (Windows) ou
Option (Macintosh) et faites glisser l’outil de dessin.
Pour obtenir une forme spécifique et dessiner à partir d’un point central :
Placez le pointeur au niveau du point central voulu, puis appuyez sur la touche Maj+Alt
(Windows) ou Maj+Option (Macintosh) et faites glisser l’outil de dessin.
Pour ajuster la position d’une forme élémentaire lorsque vous la dessinez :
Cliquez en maintenant le bouton de la souris enfoncé, maintenez la barre d’espacement enfoncée,
et faites glisser l’objet vers l’emplacment approprié sur le document. Relâchez la barre
d’espacement pour continuer à dessiner l’objet.
Remarque : L’outil ligne constitue une exception. Lorsque vous maintenez la barre d’espace enfoncée avec l’outil
Ligne, la position de la ligne ne change pas.
154 Chapitre 6
Pour redimensionner une ligne, un rectangle ou une ellipse sélectionné, procédez de l’une des
manières suivantes :
• Tapez les nouvelles valeurs de largeur (L) ou de hauteur (H) dans le Vérificateur de propriétés
ou le panneau Informations.
• Choisissez l’outil Echelle de la section de sélection du panneau Outils et faites glisser une
poignée de transformation d’angle. L’objet est redimenssionné proportionnellement.
Remarque : Vous pouvez également redimensionner proportionnellement un objet en choisissant Modification >
Transformation > Echelle et en faisant glisser une poignée de transformation d’angle ou en choisissant
Modification > Transformation > Transformation numérique et en entrant de nouvelles dimensions. Pour plus
d’informations sur le redimensionnement et la mise à l’échelle des objets, voir « Transformation et distorsion
d’objets sélectionnés et sélections » à la page 123.
• Faire glisser l’angle d’un rectangle
Remarque : La mise à l’échelle d’un objet vectoriel ne change pas l’épaisseur de trait.
Dessin de rectangles à angles arrondis
Vous pouvez dessiner un rectangle à angles arrondis en utilisant l’outil Rectangle arrondi ou l’option
Arrondi du Vérificateur de propriétés pour ajuster l’arrondi des angles des rectangles sélectionnés.
L’outil Rectangle arrondi dessine des rectangles en tant qu’objets associés. Pour déplacer séparément
l’un des angles du rectangle arrondi, dissociez le rectangle ou utilisez l’outil Sous-sélection.
Pour dessiner un rectangle avec des angles arrondis :
1
Choisissez l’outil Rectangle arrondi du menu déroulant de l’outil Rectangle.
2
Faites glisser le curseur sur le document pour dessiner le rectangle.
Conseil : Vous pouvez régler l’arrondi des angles pendant le dessin du rectangle en appuyant plusieurs fois sur
les touches fléchées Haut et Bas ou les touches 1 ou 2.
Pour arrondir les angles d’un rectangle sélectionné :
Dans la zone Arrondi du Vérificateur de propriétes, entrez une valeur comprise entre 0 et 100 et
appuyez sur Entrée ou faites glisser la glissière.
Remarque : Si la moitié de la fenêtre du Vérificateur de propriétés est affichée, cliquez sur la flèche d’extension
située dans l’angle inférieur droit pour afficher la totalité de la fenêtre.
Dessin de polygones
L’outil Polygone permet de dessiner un polygone équilatéral, qu’il s’agisse d’un triangle ou d’un
polygone à 360 côtés.
Utilisation d’objets vectoriels 155
Pour dessiner un polygone :
1
Choisissez l’outil Polygone qui fait partie des outils de dessin de formes élémentaires dans la
section Vecteur du panneau Outils.
2
Dans le Vérificateur de propriétés, procédez de l’une des manières suivantes pour définir le
nombre de côtés du polygone :
• Utilisez la glissière pour sélectionner entre 3 et 25 côtés.
• Tapez un nombre compris entre 3 et 360 dans la zone de texte Côtés.
3
Faites glisser la souris pour dessiner le polygone.
Pour contraindre l’orientation d’un polygone par incréments de 45°, maintenez enfoncée la
touche Maj pendant que vous dessinez. Les trajets dessinés à l’aide de l’outil Polygone débutent
toujours à partir d’un point central.
Dessin d’étoiles
Avec l’option Etoile de l’outil Polygone, vous pouvez dessiner des étoiles comportant entre 3 et
360 pointes et sélectionner l’angle de votre choix.
Pour dessiner une étoile :
1
Choisissez l’outil Polygone.
2
Dans le Vérificateur de propriétés, choisissez Etoile dans le menu déroulant Forme.
3
Entrez le nombre de pointes de l’étoile dans la zone de texte Côtés.
4
Choisissez Automatique ou entrez une valeur dans la zone de texte Angle. Les valeurs proches
de 0 produisent des pointes longues et fines, alors que les valeurs proches de 100 ont pour
résultat des pointes courtes et écrasées.
5
Faites glisser le curseur sur le document pour dessiner l’étoile.
Pour contraindre l’orientation d’une étoile par incréments de 45°, maintenez enfoncée la
touche Maj pendant que vous faites glisser la souris. Les trajets dessinés à l’aide de l’outil
Polygone débutent toujours à partir d’un point central.
156 Chapitre 6
Dessin de trajets de forme libre
Vous pouvez dessiner des trajets vectoriels de forme libre avec l’outil Trajet vectoriel pratiquement
de la même manière qu’avec un feutre ou un crayon.
Outil Trajet vectoriel du menu déroulant de l’outil Plume
Vous pouvez changer les attributs de trait et de trame des trajets dessinés avec l’outil Trajet
vectoriel. Voir Chapitre 8, « Application de couleurs, de traits et de trames », à la page 195.
Utilisation de l’outil Trajet vectoriel
L’outil Trajet vectoriel dispose de nombreux types de traits, ce qui inclut l’aérographe, le
vaporisateur, la calligraphie, la craie grasse et artificiel. Ces catégories disposent elles-mêmes de
divers traits, ce qui inclut les feutres sombres et clairs, les éclaboussures d’essence, bambou, ruban,
3D, dentifrice et peinture alien visqueuse.
Bien que les traits ressemblent à de la peinture ou à de l’encre, ils sont constitués de points et de
trajets comme tous les objets vectoriels. Par conséquent, vous pouvez changer la forme des traits
en déplaçant ces points de différentes manières. Lorsque vous reformez un trajet, le trait est
redessiné.
Graphisme modifié en déplaçant des points de vecteurs
Vous pouvez également modifier les traits de pinceau existants et ajouter des trames aux objets
sélectionnés qui ont été dessinés avec l’outil Trajet vectoriel. Les nouveaux paramètres de trait et
de trame sont enregistrés et pourront être utilisés ultérieurement avec l’outil Trajet vectoriel dans
le document actif.
Utilisation d’objets vectoriels 157
Pour dessier un trajet vectoriel de forme libre :
1
Choisissez l’outil Trajet vectoriel du menu déroulant Plume.
2
Si nécessaire, sélectionnez les attributs de trait et de trame dans le Vérificateur de propriétés.
Voir Chapitre 8, « Application de couleurs, de traits et de trames », à la page 195.
3
Faites glisser la souris pour dessiner. Pour contraindre le trajet à une ligne horizontale ou
verticale, maintenez enfoncée la touche Maj et faites glisser la souris.
4
Relâchez le bouton de la souris à la fin du trajet. Pour fermer le trajet, relâchez le bouton de la
souris après avoir placé le pointeur sur le premier point du trajet.
Dessin de trajets à l’aide de points
L’une des façons de dessiner et de modifier des objets vectoriels sous Fireworks est de tracer des
points et de les relier comme dans un dessin pour enfant. Lorsque vous cliquez sur l’un des points
avec l’outil Plume, le trajet de l’objet vectoriel se dessine automatiquement à partir du dernier
point que vous avez cliqué.
L’outil Plume permet non seulement de relier des points avec une ligne droite, mais également de
dessiner des segments de courbe lisses dérivés d’une fonction mathématique appelée courbes de
Bézier. Le type de point, point d’angle ou point de courbe, détermine si la forme adjacente doit
être une ligne droite ou une courbe.
L’outil Plume
Vous pouvez modifier des segments de droite et de courbe en faisant glisser leurs points. Vous
pouvez modifier encore les segments de courbe en faisant glisser les glissières de leurs points. Vous
pouvez convertir un segment de droite en segment de courbe et vice-versa en convertissant ses
points.
Dessin de trajet en tant que segments de droite
Le dessin de segments de droite avec l’outil Plume nécessite simplement de cliquer pour placer les
points. Lorsque vous cliquez avec l’outil Plume, vous formez un angle.
158 Chapitre 6
Pour dessiner un trajet avec des segments de droite :
1
Choisissez l’outil Plume.
2
Si nécessaire, choisissez Edition > Préférences et activer les options suivantes appropriées de
l’onglet Edition de la boîte de dialogue Préférences, puis cliquez sur OK :
• Afficher l’aperçu de la plume permet d’obtenir un aperçu du segment de ligne tel qu’il doit
apparaître lors du clic suivant.
• Afficher les points unis permet de dessiner des points unis.
Remarque : Dans Mac OS X, choisissez Fireworks > Préférences pour ouvrir la boîte de dialogue des
préférences.
3
Cliquez sur le document pour placer le premier point d’angle.
4
Déplacez le pointeur et cliquez pour placer le point suivant. Un segment de droite réunit les deux
points.
5
Continuez à tracer des points. Les segments de droites relient les points.
6
Procédez de l’une des manières suivantes pour créer un trajet ouvert ou fermé :
• Double-cliquez sur le dernier point pour terminer le trajet dans le cas d’un trajet ouvert.
• Choisissez un autre outil pour terminer ce trajet ouvert.
Remarque : Lorsque vous choisissez un outil de sélection ou vectoriel autre que l’outil Texte et réutilisez l’outil
Plume, vous pouvez reprendre le dessin de l’objet lors du clic suivant.
• Pour fermer le trajet, cliquez sur le premier point que vous avez tracé. Les points de départ et de
fin d’un trajet fermé ne font qu’un.
Remarque : Les boucles formées par un trajet qui se chevauche ne constituent pas des trajets fermés. Seuls les
trajets qui commencent et se terminent par le même point sont des trajets fermés.
Dessin de trajet en tant que segments de courbe
Pour dessiner des segments de courbe, il suffit de cliquer et de faire glisser la souris lors du dessin
des points. Les points que vous dessinez comportent des poignées de contrôle. Lorsque vous
dessinez avec l’outil Plume ou un autre outil de de dessin Fireworks, tous les points des objets
vectoriels reçoivent des poignées de transformation. Ces poignées sont visibles uniquement sur les
points des courbes.
Utilisation d’objets vectoriels 159
Pour dessiner un objet avec des segments de courbe :
1
Choisissez l’outil Plume.
2
Cliquez pour placer le premier point d’angle.
3
Placez le curseur à l’emplacement du point suivant, puis cliquez et faites glisser la souris pour
obtenir un point de courbe. Lorsque vous cliquez et faites glisser la souris, Fireworks étend le
segment de droite jusqu’au nouveau point.
4
Continuez à tracer des points. Lorsque vous cliquez et faites glisser un nouveau point, vous
créez un point de courbe.
Conseil : Vous pouvez utiliser temporairement l’outil Sous-sélection pour changer l’emplacement des points et
la forme des courbes que vous tracez. Maintenez enfoncée la touche Ctrl (Windows) ou Commande (Macintosh)
lors du dessin d’un point ou d’une poignée de contrôle avec l’outil Plume.
5
Procédez de l’une des manières suivantes pour créer un trajet ouvert ou fermé :
• Double-cliquez sur le dernier point pour terminer le trajet dans le cas d’un trajet ouvert.
• Choisissez un autre outil pour terminer ce trajet ouvert. Lorsque vous choisissez un autre outil,
puis utilisez de nouveau l’outil Plume, ce dernier permet de reprendre le dessin de l’objet.
• Pour fermer un trajet, cliquez sur le premier point que vous avez tracé. Les points de départ et
de fin d’un trajet fermé ne font qu’un.
Réglage de la forme d’un trajet de segment de droite
Vous pouvez allonger, raccourcir ou changer la position d’un segment de droite en déplaçant ses
points.
Pour changer un segment de droite :
1
Sélectionnez le trajet à l’aide de l’outil Pointeur ou Sous-sélection.
2
Cliquez sur l’un des points avec l’outil Sous-sélection pour le sélectionner.
Les points d’angle sélectionnés sont affichés sous la forme de carrés bleus.
3
Faites glisser le point ou utilisez l’une des touches fléchées pour déplacer le point vers un autre
emplacement.
Réglage de la forme d’un trajet de segment de courbe
Vous pouvez modifier la forme d’un objet vectoriel en faisant glisser ses poignées de contrôle avec
l’outil Sous-sélection. Les poignées de contrôle déterminent l’angle de la courbe entre deux points
fixes. Ces courbes s’appellent des courbes de Bézier.
160 Chapitre 6
Pour moifier la courbe de Bézier d’un segment de trajet :
1
Sélectionnez le trajet à l’aide de l’outil Pointeur ou Sous-sélection.
2
Cliquez sur l’un des points de la courbe avec l’outil Sous-sélection pour le sélectionner.
Les points de courbe sélectionnés sont affichés sous forme de carrés unis bleus. Les poignées de
point s’étendent depuis le point.
3
Faites glisser les poignées vers un nouvel emplacement. Pour contraindre la direction du
déplacement par incréments de 45 degrés, maintenez la touche MAJ enfoncée pendant que
vous tirez la poignée.
L’aperçu du trajet en bleu indique par où passera le nouveau trajet si vous relâchez le bouton de la
souris. bouton.
Poignées de points
Pointeur de sous-sélection
Aperçu du trajet
Trajet
Point sélectionné
Par exemple, si vous faites glisser la poignée de contrôle vers le bas, la poignée de contrôle droite
monte. Appuyez sur la touche Alt et faites glisser la souris pour déplacer la poignée séparément.
Utilisation d’objets vectoriels 161
Conversion de segments de trajet en droites ou en courbes
Les trajets des segments de droite comportent des points d’angle. Les segments de courbe
comportent des points de courbe.
Vous pouvez convertir un segment de droite en segment de courbe et vice-versa en convertissant
ses points.
Pour convertir un point d’angle d’un trajet sélectionné en point de courbe :
1
Choisissez l’outil Plume.
2
Cliquez sur un point d’angle et faites-le glisser à l’écart de sa position initiale.
Les poignées s’étendent et les segments adjacents se courbent.
Remarque : Pour modifier les poignées du point, choisissez l’outil Sous-sélection ou appuyez sur la touche Crtl
(Windows) ou Commande (Mac) lorsque l’outil Plume est actif.
Pour convertir un point de courbe d’un trajet sélectionné en point d’angle :
1
Choisissez l’outil Plume.
162 Chapitre 6
2
Cliquez sur un point de courbe.
Les poignées se rétractent et les segments adjacents se redressent.
Sélection de points
L’outil Sous-sélection permet de sélectionner plusieurs points. Avant de sélectionner un point avec
l’outil Sous-sélection, sélectionnez le trajet avec l’outil Pointeur ou Sous-sélection ou en cliquant
sur sa vignette dans le panneau Calques.
Pour sélectionner des points sur un trajet sélectionné :
1
Choisissez l’outil Sous-sélection.
2
Utilisez l’une des méthodes suivantes :
• Cliquez sur un point ou maintenez la touche Maj enfoncée et cliquez successivement sur les
points.
• Tracez une zone autour des points à sélectionner.
Pour afficher les poignées d’un point de courbe :
Cliquez sur le point avec l’outil Sous-sélection. Si l’un des points situés près du point sur lequel
vous avez cliqué est un point de courbe, sa poignée est également affichée.
Utilisation d’objets vectoriels 163
Déplacement des points et de leurs poignées de contrôle
Vous pouvez modifier la forme d’un objet en faisant glisser ses points et ses poignées de contrôle avec
l’outil Sous-sélection.
Pour déplacer un point :
Faites-le glisser avec l’outil Sous-sélection.
Le trajet est dessiné de nouveau en tenant compte de la nouvelle position du point.
Pour modifier la forme d’un segment de trajet :
Faites glisser une poignée avec l’outil Sous-sélection. Pour déplacer une seule poignée à la fois,
maintenez enfoncée la touche Alt (Windows) ou Option (Macintosh) et déplacez la poignée.
Pour ajuster la poignée d’un angle :
1
Choisissez l’outil Sous-sélection.
2
Sélectionnez un angle.
3
Appuyez sur la touche Alt (Windows) ou Option (Macintosh) et faites glissez la souris pour
afficher sa poignée et courber le segment adjacent.
Pour modifier un segment de trajet adjacent, faites glisser la poignée d’un point à l’aide de l’outil
Sous-sélection.
164 Chapitre 6
Insertion et suppression de points sur un trajet
Vous pouvez ajouter ou supprimer des points à un trajet. Ajoutez des points à un trajet pour
contrôler l’un des segments du trajet. Supprimez-en pour reformer le trajet ou simplifier sa
modification.
Pour insérer un point sur un trajet sélectionné :
Avec l’outil Plume, cliquez sur l’une des parties du trajet qui ne comporte pas encore de point.
Pour supprimer un point d’un segment de trajet sélectionné, procédez comme suit :
• Cliquez avec l’outil Plume sur l’un des points d’angle d’un objet sélectionné.
• Double-cliquez avec l’outil Plume sur l’un des points de courbe d’un objet sélectionné.
• Sélectionnez un point avec l’outil Sous-sélection et appuyez sur la touche Suppr ou Retour arrière.
Prolongement d’un trajet existant
Vous pouvez utiliser l’outil Plume pour continuer à dessiner un trajet ouvert.
Pour reprendre le dessin d’un trajet ouvert :
1
Choisissez l’outil Plume.
2
Cliquez sur le point de terminaison, puis reprenez le tracé.
Le curseur de l’outil Plume change de forme pour indiquer que vous ajoutez un trajet.
Fusion de deux trajets ouverts
Vous pouvez relier deux trajets ouverts (ou plus) afin de constituer un trajet continu. Lorsque
vous reliez deux trajets, les attributs de trait, detrame et d’effet les plus élevés deviennent les
attributs du trajet fusionné.
Pour fusionner deux trajets ouverts :
1
Choisissez l’outil Plume.
2
Cliquez sur le point de terminaison de l’un des trajets.
3
Placez le pointeur sur le point de terminaison de l’autre trajet et cliquez.
Utilisation d’objets vectoriels 165
Liaison automatique de trajets ouverts similaires
Vous pouvez facilement relier deux trajets ouverts qui partagent des attributs de trait et de trame
similaires.
Pour relier automatiquement deux trajets ouverts :
1
Sélectionnez un trajet ouvert.
2
Choisissez l’outil Sous-sélection et faites glisser l’un des points de terminaison du trajet à
quelques pixels de la fin d’un trajet similaire.
Le point de terminaison s’accroche alors à l’autre trajet et les deux ne forment plus qu’un.
Modification des trajets
Vous disposez de plusieurs méthodes pour modifier les objets vectoriels sous Fireworks. Vous
pouvez changer la forme d’un objet en déplaçant, ajoutant ou supprimant les points ou vous
pouvez déplacer les poignées des points pour changer la forme de segments de trajets adjacents.
Les outils de forme libre permettent de modifier la forme des objets en modifiant leurs trajets
directement. Vous pouvez également utiiser les fonctions de trajet pour créer des formes en
combinant ou en modifiant les trajets existants.
Modification avec les outils vectoriels
Certains outils de Fireworks permettent non seulement de déplacer des points et des poignées de
point, mais aussi de modifier directement des objets vectoriels.
Incurvation et remodelage des objets vectoriels
Utilisez l’outil Forme libre pour incurver et remodeler directement les objets vectoriels au lieu de
manipuler les points. Vous pouvez pousser ou tirer l’une des parties d’un trajet, quel que soit
l’emplacement des points. L’ajout, le déplacement et la suppression de points du trajet s’effectuent
automatiquement au fur et à mesure que vous changez la forme de l’objet vectoriel.
Longueur
spécifiée
Outil de forme libre tirant un segment de trajet segment
166 Chapitre 6
Outil de forme libre poussant un segment de trajet et trajet redessiné pour tenir compte de la
modification
Lorsque vous déplacez le pointeur au-dessus d’un trajet sélectionné, il se transforme en pointeur
de poussée ou de traction, en fonction de sa position par rapport au trajet sélectionné.
Pointeur
Indique
L’outil Forme libre est utilisé.
L’outil Forme libre est en cours d’utilisation et le pointeur de traction est en position pour tirer
sur le trajet sélectionné.
L’outil Forme libre est en cours d’utilisation et le pointeur de traction tire sur le trajet
sélectionné.
L’outil Forme libre est utilisé et le pointeur de poussée est activé.
L’outil Reformer la zone est utilisé et le pointeur correspondant est activé. La zone comprise
entre le cercle intérieur et le cercle extérieur reforme le trajet selon une intensité inférieure à
l’intensité maximale.
Lorsque le pointeur se trouve juste au-dessus du trajet, vous pouvez tirer sur celui-ci. Lorsque le
pointeur ne se trouve pas positionné juste au-dessus du trajet, vous pouvez pousser sur celui-ci.
Vous pouvez également changer la taille du pointeur de poussée ou de traction.
Remarque : L’outil Forme libre reporte également la pression exercée sur une tablette Wacom ou compatible.
Pour tirer un chemin sélectionné :
1
Choisissez l’outil Forme libre.
2
Positionnez le pointeur directement sur le trajet sélectionné.
Le pointeur se transforme en pointeur de traction
3
Dessinez le trajet.
Utilisation d’objets vectoriels 167
Pour pousser un chemin sélectionné :
1
Choisissez l’outil Forme libre.
Le pointeur se transforme en pointeur de poussée ou de traction.
2
Pointez légèrement à l’écart du trajet.
3
Faites glisser vers le trajet pour exercer une poussée. Poussez sur le trajet sélectionné pour lui
donner une nouvelle forme.
Pour changer la forme du pointeur de poussée, exécutez l’une des actions suivantes :
• Cliquez et maintenez enfoncé le bouton de la souris, puis appuyez sur la touche Flèche droite
ou sur 2 pour élargir le pointeur.
• Cliquez et maintenez enfoncé la bouton de la souris, puis appuyez sur la touche Flèche gauche
ou sur 1 pour réduire le pointeur.
• Pour définir la taille du pointeur et la longueur du segment de trajet affecté par ce dernier,
désélectionnez tous les objets du document et entrez une valeur comprise entre 1 et 500 dans la
zone de texte Taille de le Vérificateur de propriétés. Cette valeur indique la taille du pointeur
en pixels.
Distorsion de trajets
L’outil Reformer la zone permet de tirer sur la zone de tous les trajets sélectionnés à l’intérieur du
cercle extérieur du pointeur Reformer la zone.
Le cercle intérieur du pointeur correspond à la délimitation de l’outil lorsque l’intensité est
maximale. La zone comprise entre le cercle intérieur et le cercle extérieur reforme le trajet selon
une intensité inférieure à l’intensité maximale. Le cercle extérieur du pointeur détermine la force
d’attraction. Vous pouvez définir son intensité.
Remarque : L’outil Reformer la zone reporte également la pression exercée sur une tablette Wacom ou compatible.
Pour appliquer une distorsion aux trajets sélectionnés :
1
Choisissez l’outil Reformer la zone du menu déroulant de l’outil Forme iibre.
168 Chapitre 6
2
Faites glisser le pointeur sur les trajets pour les dessiner de nouveau.
Pour changer la taille du pointeur Reformer la zone, procédez de l’une des manières suivantes :
• Cliquez et maintenez enfoncé le bouton de la souris, puis appuyez sur la touche Flèche droite
ou sur 2 pour élargir le pointeur.
• Cliquez et maintenez enfoncé la bouton de la souris, puis appuyez sur la touche Flèche gauche
ou sur 1 pour réduire le pointeur.
• Pour définir la taille du pointeur et la longueur du segment de trajet affecté par ce dernier,
désélectionnez tous les objets du document et entrez une valeur comprise entre 1 et 500 dans la
zone de texte Taille de le Vérificateur de propriétés. Cette valeur indique la taille du pointeur
en pixels.
Pour définir l’intensité du cercle intérieur du pointeur Reformer la zone :
Entrez une valeur comprise entre 1 et 100 dans la zone de texte Intensité de le Vérificateur de
propriétés. Cette valeur indique le pourcentage de l’intensité potentielle du pointeur. L’intensité est
directement proportionnelle au pourcentage exprimé.
Dessiner de nouveau des trajets
Utilisez l’outil Redessiner le trajet pour dessiner de nouveau ou étendre un segment de trajet
sélectionné sans modifier les caractéristiques du trait, de la trame et de l’effet du trajet.
Pour redessiner ou étendre un segment de trajet sélectionné :
1
Dans le menu déroulant de l’outil Plume, choisissez Redessiner le trajet.
2
Positionnez le pointeur directement sur le trajet.
Le pointeur se transforme en pointeur Redessiner le trajet.
3
Faites glisser le pointeur pour redessiner ou étendre le segment de trajet. La portion de trajet à
redessiner apparaît en surbrillance rouge.
4
Relâchez le bouton de la souris.
Changement de l’aspect en modifiant la pression et la vitesse
Vous pouvez changer l’apparence d’un trajet à l’aide des outils Modulateur de trajet. En utilisant
une pression ou une vitesse différente, vous pouvez changer les propriétés de trait d’un trajet. Ces
propriétés comprennent la taille de trait, l’angle, la quantité l’encre, la dispsersion, la teinte, la
luminosité et la saturation. Vous pouvez définir les propriétés affectées par la modulation de trajet
en utilisant l’onglet Sensitibilité de la boîte de dialogue Modifier le trait. Vous pouvez également
spécifier comment la pression et la vitesse s’appliquent à ces propriétés. Pour plus d’informations
sur la définition des options de la boîte de dialogue Modifier le trait, see « Utilisation des traits » à
la page 204.
Outils Modulateur de trajet
Utilisation d’objets vectoriels 169
Division de trajets en objets multiples
Utilisez l’outil Cutter pour découper un trajet en deux ou plusieurs
Pour couper un trajet sélectionné :
1
Choisissez l’outil Cutter.
Remarque : L’utilisation de la gomme des plumes Wacom sélectionne automatiquement l’outil Cutter.
2
Utilisez l’une des méthodes suivantes :
• Faites glisser le pointeur sur le trajet.
• Cliquez sur le trajet.
3
Désélectionnez le trajet.
Modification avec les options de trajet
Les options de trajet du menu Modification permettent de créer de nouvelles formes en combinant
ou en modifiant des trajets existants. Pour certaines options de trajet, l’ordre d’empilage des objets
trajet sélectionnés définit le déroulement de l’opération. Pour plus d’informations sur l’ordre
d’empilage des objets sélectionnés, voir la section « Empilage des objets » à la page 128.
Remarque : L’utilisation des options de trajet supprime toutes les informations de pression et de vitesse des trajets
concernés.
Combinaison des objets de trajet
Vous pouvez combiner des objets de trajet en un seul objet trajet. Vous pouvez relier les extrémités
de deux trajets ouverts pour créer un seul trajet fermé ou joindre plusieurs trajets pour créer un trajet
composite.
Pour créer un trajet continu à partir de deux trajets ouverts :
1
Choisissez l’outil Sous-sélection.
2
Sélectionnez deux extrémités sur deux trajets ouverts.
3
Choisissez Modifier > Combiner les trajets > Joindre.
Pour créer un trajet composite :
1
Choisissez deux ou plusieurs trajets ouverts ou fermés.
2
Choisissez Modifier > Combiner les trajets > Joindre.
Pour diviser un trajet composite :
1
Sélectionnez le trajet composite.
2
Choisissez Modifier > Combiner les trajets > Séparer.
170 Chapitre 6
Pour combiner des trajets fermés sélectionnés pour former un trajet englobant toute la zone
occupée par les trajets d’origine :
Choisissez Modifier > Combiner les trajets > Union. Le trajet résultant a les attributs de trait et de
trame de l’objet en arrière-plan.
Création d’un objet à partir de l’intersection d’autres objets
Vous pouvez créer un objet à partir de l’intersection de deux ou de plusieurs objets à l’aide de la
commande Intesection.
Pour créer un trajet fermé qui entoure la zone commune à tous les trajets fermés sélectionnés :
Choisissez Modifier > Combiner les trajets > intersection. Le trajet résultant a les attributs de trait
et de trame de l’objet en arrière-plan.
Suppression de portions d’un objet trajet
Vous pouvez supprimer des portions d’un objet trajet sélectionné telles qu’elles sont définies par
les portions d’un autre objet trajet placé devant et qui le chevauchent.
Pour supprimer des portions d’un objet trajet :
1
Sélectionnez l’objet trajet qui définit la zone à supprimer.
2
Choisissez Modifier > Disposer > Premier plan.
3
Maintenez la touche Maj enfoncée et ajoutez à la sélection l’objet trajet dont les portions
doivent être supprimées.
4
Choisissez Modifier > Combiner les trajets > Poinçon.
Les attributs de trait et de trame restent identiques.
Utilisation d’objets vectoriels
171
Recadrage d’un trajet
Vous pouvez recadrer un trajet à l’aide de la forme d’un autre trajet. Le trajet au premier plan
définit la forme de la zone à recadrer.
Pour recadrer un trajet sélectionné :
1
Sélectionnez l’objet trajet qui définit la zone à recadrer.
2
Choisissez Modifier > Disposer > Premier plan.
3
Maintenez la touche Maj enfoncée et ajoutez à la sélection l’objet trajet à recadrer.
4
Choisissez Modifier > Combiner les trajets > Recadrer.
L’objet trajet résultant a les attributs de trait et de trame de l’objet trajet en arrière-plan.
Simplification d’un trajet
Vous pouvez supprimer des points d’un trajet sans altérer la forme de ce dernier. La commande
Simplifier permet de supprimer les points redondants du trajet correspondant au nombre que
vous définissez.
Vous pouvez utilisez cette commande, par exemple, sur une ligne droite contenant plus de deux
points (seuls deux points sont nécessaires pour produire une ligne droite) ou sur un trajet
contenant des points superposés. La commande Simplifier supprime les points qu ne sont pas
nécessaires à la reproduction du trajet que vous avez dessiné.
Pour simplifier un trajet sélectionné :
1
Choisissez Modifier > Modifier le trajet > Simplifier.
La boîte de dialogue Simplifier s’affiche.
2
Entrez une valeur de simplification, puis cliquez sur OK.
Lorsque vous augmentez la valeur de simplification, vous augmentez le degré de modification
du trajet par Fireworks pour réduire le nombre de points du trajet.
172 Chapitre 6
Extension d’un trait
Vous pouvez convertir le trait d’un trajet sélectionné en trajet fermé. Le trajet qui en résulte crée
l’illusion d’un trajet sans trame dont le trait est similaire à la trame de l’objet d’origine.
Remarque : L’extension du trait d’un trajet qui s’entrecoupe peut produire des résultats intéressants. Si le trajet
d’origine contient une trame, les sections du trajet qui s’entrecoupent ne contiennent pas de tame une fois le trait
étendu.
Pour étendre un trait d’objet sélectionné :
1
Choisissez Modifier > Modifier le trajet > Etendre le trait pour ouvrir la boîte de dialogue
Etendre le trait.
2
Définez la largeur du trajet fermé résultant.
3
Spécifiez un type d’angle : en pointe, rond ou biseauté.
4
Si vous avez choisi la forme en pointe, définissez la limite de pointe, le point auquel un angle
en pointe devient automatiquement biseauté. La limite de pointe est le rapport de la longueur
du coin sur la largeur du trait.
5
Choisissez une option d’extrémité : bout, carré ou rond, puis cliquez sur OK.
Un trajet fermé reprenant la forme de l’original, ainsi que ses attributs de trait et de trame,
remplace cet original.
Réduction ou extension d’un trajet
Vous pouvez réduire ou étendre le trajet d’un objet sélectionné en fonction d’un nombre de pixels.
Pour étendre ou réduire un trajet sélectionné :
1
Choisissez Modifier > Modifier le trajet > Rappporter le trajet pour ouvrir la boîte de dialogue
Rapporter le trajet.
Utilisation d’objets vectoriels 173
2
Choisissez la direction à suivre pour réduire ou étendre le trajet :
A l’intérieur réduit
le trajet.
A l’extérieur étend
le trajet.
3
Définissez la largeur séparant le trajet d’origine et le trajet réduit ou étendu.
4
Spécifiez un type d’angle : en pointe, rond ou biseauté.
5
Si vous avez choisi la forme en pointe, définissez la limite de pointe, le point auquel un angle
en pointe devient automatiquement biseauté. La limite de pointe est le rapport de la longueur
du coin sur la largeur du trait.
6
Cliquez sur OK.
Un objet trajet plus petit ou plus grand, avec les mêmes attributs de trait et de trame, remplace
l’objet trajet original.
174 Chapitre 6
CHAPITRE 7
Utilisation d’un texte
Le programme Fireworks dispose de nombreuses fonctions de traitement de texte normalement
réservées aux applications de PAO complexes. Vous pouvez ainsi tirer parti de la diversité des
polices et des tailles, régler le crénage, l’espacement, la couleur, l’interlignage, le décalage de la
ligne de base, et de bien d’autres options. Associez les fonctions de modification du texte de
Fireworks à la gamme étendue de traits, de trames, d’effets et de styles pour donner encore plus de
vie à vos graphismes. D’autre part, vous pouvez utiliser le correcteur othographique pour corriger
les erreurs orthographiques.
Le fait de pouvoir modifier le texte à volonté, y compris après avoir appliqué des effets en direct
comme des ombres et des biseaux, implique que vous pouver corriger facilement le texte. Vous
pouvez également copier des objets qui incluent du texte et modifier ce texte au niveau des
différentes copies. Les fonctions de texte vertical, transformé, attaché aux trajets, converti en
trajets et en images permettent d’étendre les possibilités de conception.
Vous pouvez conserver les attributs du texte importé au format RTF (Rich Text Format). En outre,
lorsque vous importez un document Photoshop contenant du texte, ce dernier reste modifiable. Lors
de l’importation, Fireworks gère les polices manquantes en vous demandant de choisir des polices de
substitution ou en vous permettant d’importer le texte sous la forme d’une image statique.
Saisie de texte
Tapez, formatez et modifiez le texte de vos graphismes avec l’outil Texte et les options du
Vérificateur de propriétés.
L’outil Texte
Remarque : Si vous avez réduit la fenêtre du Vérificateur de propriétés, agrandissez-la en cliquant sur la flèche
d’extension figurant dans l’angle inférieur droit pour afficher toutes les propriétés de texte.
Vérificateur de propriétés lorsque l’outil texte est sélectionné
175
Création de blocs de texte
Le texte des documents Fireworks est affiché dans un rectangle entouré de poignées, appelé bloc
de texte.
Pour saisir du texte :
1
Choisissez l’outil Texte.
Le Vérificateur de propriétés affiche les options de l’outil Texte.
2
Choisissez la couleur, la police, la taille, l’espacement des caractères ou tout autre paramètre en
fonction de vos besoins.
3
Utilisez l’une des méthodes suivantes :
• Cliquez dans le document, à l’endroit où vous souhaitez commencer le bloc de texte. Cette
opération crée un bloc de texte à redimensionnement automatique.
• Faites glisser la souris pour tracer un bloc de texte. Cette opération crée un bloc de texte de
largeur fixe.
Pour plus d’informations sur les différents types de blocs de texte, voir « Utilisation de blocs de
texte à dimensionnement automatique et de largeur fixe » à la page 177.
4
Tapez le texte. Pour entrer un saut de paragraphe, appuyez sur Entrée.
5
Si nécessaire, sélectionnez le texte dans le bloc après l’avoir tapé et reformatez-le.
6
Une fois le texte entré, procédez de l’une des manières suivantes :
• Cliquez en dehors du bloc de texte.
• Choisissez un autre outil dans le panneau Outils.
• Appuyez sur Echap.
Déplacement des blocs de texte
Vous pouvez sélectionner un bloc de texte et le transférer vers n’importe quel emplacement dans le
document, à l’instar de n’importe quel autre objet. Vous pouvez également déplacer des blocs de
texte lorsque vous faites glisser la souris pour les créer.
Pour déplacer un bloc de texte :
Faites-le glisser jusqu’à son nouvel emplacement.
176 Chapitre 7
Pour déplacer un bloc de texte lorsque vous faites glisser la souris pour le créer :
1
Maintenez le bouton de la souris enfoncé ainsi que la barre d’espacement et faites glisser le bloc
de texte vers un autre emplacement du doucment.
2
Relâchez la barre d’espacement pour continuer à tracer le bloc de texte.
Utilisation de blocs de texte à dimensionnement automatique et de largeur fixe
Le programme Fireworks utilise des blocs de texte à dimensionnement automatique et des blocs
de texte de largeur fixe. Un bloc de texte à dimensionnement automatique s’agrandit lorsque vous
tapez du texte. Si vous effacez une partie du texte, le bloc se réduit pour être ajusté au texte. Des
blocs de texte à dimensionnement automatique sont créés par défaut lorsque vous cliquez sur le
document avec l’outil Texte et saisissez du texte.
Les blocs de largeur fixe permettent de contrôler la largeur des lignes de texte. Des blocs de largeur
fixe sont créés par défaut lorsque vous tracez un bloc de texte à l’aide de l’outil Texte.
Lorqque le pointeur Texte est actif dans un bloc de texte, un cercle ou un carré vide apparaît dans
l’angle supérieur droit du bloc de texte. Le cercle indique qu’il s’agit d’un bloc de texte à
dimensionnement automatique et le carré, qu’il s’agit d’un texte de largeur fixe. Lorsque vous
cliquez dans l’angle, vous passer de l’un à l’autre.
Indicateur de largeur fixe
Indicateur de dimensionnement automatique
Bloc de texte texe de largeur fixe et bloc de texte à dimensionnement automatique
Pour convertir un bloc de texte en bloc de texte de largeur fixe ou en bloc de texte à
dimensionnement automatique :
1
Double-cliquez sur le bloc de texte.
2
Double-cliquez sur le cercle ou le carré dans l’angle supérieur droit du bloc de texte.
Le bloc de texte est converti en conséquence.
Pour convertir un bloc de texte sélectionné en bloc de texte de largeur fixe en le redimensionnant :
Faites glisser une poignée de redimensionnement.
Cette opération convertit le bloc de texte à dimensionnement automatique en bloc de texte de
largeur fixe.
Modification d’un texte
Vous pouvez modifier tous les aspects du texte, ce qui inclut la taille, la police, l’espacement,
l’interlignage et le décalage de la ligne de base au niveau du bloc de texte. Lorsque vous modifiez
un texte, ses attributs de trait, de trame et d’effet sont dessinés de nouveau en conséquence.
Utilisation d’un texte 177
Pour changer les attributs d’un bloc de texte, utilisez le Vérificateur de propriétés. Si vous avez
réduit la fenêtre du Vérificateur de propriétés, cliquez sur la fèche d’extension dans l’angle
inférieur droit pour afficher toutes les propriétés de texte.
Vérificateur de propriétés lorsqu’un texte est sélectionné
Vous pouvez également utiliser l’ Editeur de texte et les commandes du menu Texte pour changer
un texte, mais le Vérificateur de propriétés permet de changer plus rapidement les attributs du
texte et de modifier le texte avec lus de précision que les deux autres options. Pour plus
d’informations sur l’Editeur de texte, voir « Utilisation de l’Editeur de texte » à la page 193.
Remarque : Les modifications que vous effectuez au cours d’une session de modification de texte correspondent
globalement à une seule modification et sont donc toutes annulées lorsque vous utilisez la commande Annuler. Si
vous choisissez Edition > Annuler lorsque vous modifiez un texte, vous annulez toutes les modifications apportées
depuis le moment ou vous avez double-cliqué sur le bloc de texte pour le modifier.
Pour modifier un texte :
1
Sélectionnez le texte :
• Cliquez sur le bloc de texte avec l’outil Pointeur ou Sous-sélection pour le sélectionner en
totalité. Pour sélectionner plusieurs blocs de texte simultanément, maintenez la touche Maj
enfoncée et sélectinnez les blocs appropriés.
• Double-cliquez sur un boc de texte avec l’outil Pointeur ou Sous-sélection et sélectionnez du
texte.
• Cliquez dans un bloc de texte avec l’outil Texte et sélectionnez du texte.
2
Effectuez les modifications appropriées.
Pour plus d’informations sur la modification des attributs de texte, voir « Choix d’une police,
d’une taille et d’un style » à la page 178, « Application de couleurs au texte » à la page 179,
« Définition du crénage » à la page 181, « Définition de l’interlignage » à la page 182,
« Définition de l’orientation » à la page 182, « Définition de l’alignement du texte » à la
page 183 et « Mise en retrait d’un texte » à la page 184.
3
Procédez de l’une des manières suivantes pour appliquer les modifications :
• Cliquez en dehors du bloc de texte.
• Choisissez un autre outil dans le panneau Outils.
• Appuyez sur Echap.
Choix d’une police, d’une taille et d’un style
Pour changer les attributs de police, de taille et de style du texte d’un bloc de texte, utilisez le
Vérificateur de propriétés.
Remarque : Pour pouvoir utiliser les polices Type 1 sur un ordinateur Macintosh, il est nécessaire d’installer Adobe
Type Manager version 4 ou supérieure. Ce programme n’est pas nécessaire pour OS X.
178 Chapitre 7
Pour changer la police, la taille et le style du texte sélectionné utilisez le Vérificateur de propriétés :
1
Pour changer la police, choisissez-en une dans le menu déroulant Police.
2
Pour changer la taille de police, déplacez la glissière du menu déroulant de tailles de police ou
entrez une valeur dans la zone de texte. La taille de police est exprimée en points.
3
Pour appliquer le style gras, italiques ou souligné, cliquez sur le bouton de style correspondant.
Remarque : Lorsque vous transformez un bloc de texte en bloc de texte à dimensionnement automatique, la police
reste inchangée dans le Vérificateur de propriétés lorsque le texte est sélectionné. Si vous changez la taille de police
d’un texte transformé, vous changez la taille du texte, mais uniquement par rapport à la transformation.
Application de couleurs au texte
La couleur du texte est contrôlée par la case Couleur de la trame. Par défaut le texte est noir et ne
comporte pas d’attributs de trait. Vous pouvez changer la couleur de l’ensemble du texte d’un bloc
de texte sélectionné ou d’une partie du texte. L’outil Texte conserve la couleur de texte en cours
d’un bloc de texte à l’autre.
L’outil Texte conserve la couleur de texte en cours indépendamment de la couleur de remplissage
des autres outils. Lorsque vous utilisez un autre outil après avoir utilisé l’outil Texte, les derniers
paramètres de trait et de remplissage appliqués avant l’utilisation de l’outil texte sont utilisés. De
même, lorsque vous réutilisez l’outil texte, la dernière couleur de remplissage de l’outil Texte est
utilisée et aucun trait n’est appliqué. La couleur de l’outil Texte reste active d’un document à
l’autre ou lorsque vous fermez et rouvrez Fireworks.
Vous pouvez ajouter un trait et des effets en direct à l’ensemble d’un bloc de texte sélectionné,
mais pas au texte sélectionné dans le bloc. Les caractéristiques de trait et les effets en direct
appliqués à un bloc de texte sont mises à jour lorsque vous modifiez le texte du bloc de texte, mais
l’outil Texte ne conserve pas les caractéristiques de trait ou les effets en direct si vous créez un bloc
de texte. Pour plus d’informations, voir « Applications de traits, de trames et d’effets à un texte » à
la page 186.
Application d’une couleur à l’ensemble du texte des blocs de texte
sélectionnés
Vous pouvez appliquer une couleur à l’ensemble du texte des blocs de texte sélectionnés à l’aide du
Vérificateur de propriétés, d’une zone Couleur de la trame ou de l’outil Pipette. Vous pouvez
également l’une des méthodes suivantes pour définir la couleur de texte dans l’outil Texte.
Utilisation d’un texte 179
Pour définir la couleur de l’ensemble du texte d’un bloc de texte sélectionné, procédez de l’une
des manières suivantes :
• Cliquez sur la zone Couleur de la trame du Vérificateur de propriétés et choisissez une couleur
dans la source de couleurs couleurs ou échantillonez une couleur n’importe où dans l’écran à
l’aide du pointeur de la pipette lorsque le puits de couleur est ouverts.
Zone Couleur de la trame
Fenêtre contextuelle
Zone Couleur de trait
Couleur de la trame
Zone Couleur de la trame dans le Vérificateur de propriétés
• Cliquez sur la zone Couleur de la trame du panneau Outils et choisissez une couleur dans la
source de couleurs ou échantillonnez une couleur n’importe où dans l’écran à l’aide du
pointeur de pipette pendant que la source de couleurs Couleur de la trame est ouvert.
• Cliquez sur l’icône située à côté de la zone Couleur de la trame du panneau Outils, chosissez
l’outil pipette, puis cliquez pour échantillonner une couleur n’importe où dans un ocument
ouvert.
La couleur de la zone Couleur de la trame du panneau Outils change pour refléter la couleur que
vous avez échantillonnée à l’aide du pointeur Pipette ou de l’outil Pipette ; la couleur du texte
sélectionné change également.
Application d’une couleur à un texte sélectionné dans un bloc de texte
Vous pouvez changer la couleur du texte sélectionné dans un bloc de texte à l’aide du Vérificateur
de propriétés ou de la zone Couleur de la trame. Vous ne pouvez pas utiliser l’outil Pipette pour
modifier la couleur du texte sélectionné.
Remarque : Si vous essayez d’appliquer un trait ou des effets en direct au texte sélectionné d’un bloc de texte,
l’ensemble du bloc de texte est sélectionné automatiquement.
Pour appliquer une couleur de texte uniquement au texte sélectionné dans un bloc de texte,
procédez de l’une des manières suivantes :
• Cliquez sur la zone de couleur de texte du Vérificateur de propriétés et choisissez une couleur
dans la source de couleurs ou échantillonnez une couleur n’importe où dans l’écran à l’aide du
pointeur Pipette pendant que la source de couleurs de texte est ouvert.
180 Chapitre 7
• Cliquez sur la zone Couleur de la trame du panneau Outils et choisissez une couleur dans la
source de couleurs ou échantillonnez une couleur n’importe où dans l’écran à l’aide du
pointeur Pipette pendant que le puits de couleur de trame est ouvert.
Définition du crénage
Le crénage permet d’augmenter ou de réduire la distance entre deux lettres pour des raisons
d’esthétisme. La plupart des polices incluent des informations permettant de réduire
automatiquement l’espace entre certaines paires de lettres telles que TA ou Va. La fonction de
crénage automatique Fireworks utilise les informations de crénage d’une police pour afficher le
texte, mais vous pouvez la désactiver sur des tailles de points plus petites ou lorsque le texte
n’utilise pas l’anticrénelage. Le crénelage est mesuré sous la forme d’un pourcentage.
Utilisez le Vérificateur de propriétés ou le clavier pour définir le crénelage.
Pour désactiver le crénage automatique :
Dans le Vérificateur de propriétés, désélectionnez la fonction de crénelage automatique. Si vous
avez réduit la fenêtre du Vérificateur de propriétés, cliquez sur la flèche d’extension dans l’angle
inférieur droit pour afficher toutes les propriétés.
Pour définir le crénage :
1
Pour sélectionner le texte à créneler, procédez de l’une des manières suivantes :
• Cliquez entre deux caractères avec l’outil Texte.
• Utilisez l’outil Texte pour sélectionner les caractères à modifier.
• Utiisez l’outil Pointeur pour sélectionner l’ensemble d’un texte. Appuyez sur la touche MAJ et
cliquez pour sélectionner plusieurs blocs de texte.
2
Utilisez l’une des méthodes suivantes :
• Dans le Vérificateur de propriétés, déplacez la glissière du menu déroulant Crénage ou entrez
un pourcentage dans la zone de texte.
Pourcentage de crénage
Glissière du menu déroulant Crénage
Une valeur nulle correspond à un crénage normal. Les valeurs positives écartent les lettres et les
valeurs négatives les rapprochent.
• Maintenez la touche Ctrl (Windows) ou la touche Commande (Macintosh) enfoncée et
appuyez sur la touche Flèche gauche ou Flèche droite du clavier.
La touche Flèche gauche augmente l’espace entre les lettres de 1 % et la touche Flèche droite
rapproche les lettre de 1 %.
Conseil : Maintenez les touches Maj et Ctrl (Windows) ou la touche Commande (Macintosh) enfoncées et
appuyez sur la touche Flèche gauche ou Flèche droite du clavier pour ajouter le crénage par pas de 10 %.
Utilisation d’un texte 181
Définition de l’interlignage
L’interlignage conditionne l’espace séparant les lignes d’un paragraphe. L’interlignage peut être
mesuré en pixels ou sous la forme d’un pourcentage de la taille en points utilisée pour séparer les
lignes de base.
Vous pouvez utiliser le Vérificateur de propriétés ou le clavier pour définir l’interlignage.
Options d’interlignage du Vérificateur de propriétés
Pour définir l’interlignage d’un texte sélectionné dans le Vérificateur de propriétés :
1
Dans le Vérificateur de propriétés, déplacez le curseur du menu déroulant Interlignage ou
entrez une valeur dans la zone de texte. (valeur par défaut : 100 %).
2
Pour changer le type d’unité, choisissez % ou px (pixels) dans le menu déroulant Unités
d’interlignage.
Pour définir l’interlignage du texte sélectionné à l’aide du clavier :
Maintenez enfoncée la touche Ctrl (Windows) ou Commande (Macintosh) tout appuyant sur la
touche Flèche Haut ou Flèche Bas.
La touche Flèche haut augmente l’espace entre les lignes et la touche Flèche Bas, le diminue.
Conseil : Maintenez enfoncées les touches Maj et Ctrl (Windows) ou la touche Commande (Macintosh) tout en
appuyant sur la touche Flèche haut ou Flèche Bas pour ajuster l’interligne pas par de 10.
Définition de l’orientation
Vous pouvez orienter un texte horizontalement ou verticalement. Par défaut, le texte est orienté à
l’horizontale.
Orientations horizontale et verticale
Le texte peut également s’enchaîner de droite à gauche ou de gauche à à droite.
Texte enchaîné de gauche à droite et de droite à gauche
182 Chapitre 7
Dans Fireworks, vous définissez les orientations horizontale et verticale ainsi que la direction de
l’enchaînement du texte dans le Vérificateur de propriétés. Ces paramètres s’appliquent à
l’ensemble du bloc de texte.
Pour définir l’orientation d’un bloc de texte sélectionné :
1
Cliquez sur le bouton Orientation du texte dans le Vérificateur de propriétés.
2
Sélectionnez une option d’orientation dans le menu déroulant :
De gauche à droite horizontal est
l’orientation par défaut du texte de la majorité des langues
dans Fireworks. Cette valeur oriente le texte horizontalement et affiche les caractères de gauche
à droite.
De droite à gauche horizontal oriente le texte horizontalement et affiche les caractères de droite à
gauche. Cette option est utile pour afficher un texte dans des langues pour lesquelles le texte
s’enchaîne de droite à gauche, telles que l’hébreu ou l’arabe.
Gauche à droite vertical oriente le texte verticalement. Si vous appliquez cette option à des
lignes de texte séparées par un retour à la ligne matériel ou logiciel, chaque ligne du texte
s’affiche sous la forme d’une colonne. Les colonnes s’enchaînent de la gauche vers la droite.
Droite à gauche vertical oriente le texte verticalement. Des lignes de texte séparées par des
retours chariots s’affichent sous forme de colonnes qui s’enchaînent de la droite vers la gauche.
Cette option est utile pour afficher du texte dans des langues dans lequelles le texte s’enchaîne
de droite à gauche dans des colonnes, telles que le japonais.
Remarque : Le texte vertical s’enchaîne toujours du haut vers le bas. Si vous choisissez l’une des options
d’orientation verticale, seul l’ordre des colonnes de texte est affecté ; celui des caractères ne change pas.
Définition de l’alignement du texte
L’alignement détermine la position des lignes de texte d’un paragraphe par rapport aux bords
gauche et droit d’un bloc de texte. L’alignement horizontal aligne le texte par rapport aux bords
gauche et droit du bloc de texte. L’alignement vertical aligne le texte par rapport aux bords
supérieur et inférieur du bloc de texte. Pour plus d’informations sur l’orientation horizontale ou
verticale, voir « Définition de l’orientation » à la page 182.
Vous pouvez aligner le texte sur le bord gauche ou droit du bloc de texte, le centrer au sein du bloc
ou le justifier pour l’aligner sur les bords gauche et droit. Par défaut, le texte horizontal est aligné
sur la gauche.
Un texte vertical peut être aligné sur le bord supérieur ou le bord inférieur du bloc de texte, centré
dans le bloc de texte ou justifié coplètement entre les bords supérieur et inférieur.
Pour étirer le texte ou pour le placer dans un espace spécifique, choisissez le type d’alignement
permettant de remplir le bloc de texte à l’horizontale ou à la verticale en fonction de l’orientation du
texte.
Texte étiré à l’horizontale pour remplir un bloc de texte
Utilisation d’un texte 183
Les commandes d’alignement apparaissent dans le Vérificateur de propriétés lorsque le texte ou le
bloc de texte est sélectionné.
Options d’alignement de texte dans le Vérificateur de propriétés
Pour définir l’alignement d’un texte :
1
Sélectionnez le texte.
2
Cliquez sur un bouton d’alignement dans le Vérificateur de propriétés.
Mise en retrait d’un texte
Vous pouvez mettre en retrait la première ligne d’un paragraphe à l’aide du Vérificateur de
propriétés. La mise en retrait est exprimée en pixels.
Option de mise en retrait de paragraphe dans le Vérificateur de propriétés
Si vous avez réduit la fenêtre du Vérificateur de propriétés, cliquez sur la flèche d’extension dans
l’angle inférieur droit pour afficher toutes les propriétés.
Pour mettre en retrait la première ligne des paragraphes sélectionnés :
Dans le Vérificateur de propriétés, faites glisser le curseur du menu déroulant Renforcement du
paragraphe ou entrez une valeur dans la zone de texte.
Définition de l’espacement des paragraphes
Vous pouvez définir l’espacement avant et après les paragraphes à l’aide du Vérificateur de
propriétés. L’espacement des paragraphes est exprimé en pixels.
Options d’espacement de paragraphes dans le Vérificateur de propriétés
Si vous avez réduit la fenêtre du Vérificateur de propriétés, cliquez sur la flèche d’extension dans
l’angle inférieur droit pour afficher toutes les propriétés.
Pour définir l’espacement qui précède des paragraphes sélectionnés :
Dans le Vérificateur de propriétés, déplacez le curseur du menu déroulante Espace avant un
paragraphe ou entrez une valeur dans la zone de texte.
Pour définir un espace après des paragraphes sélectionnés :
Dans le Vérificateur de propriétés, déplacez le curseur du menu déroulante Espace après un
paragraphe ou entrez une valeur dans la zone de texte.
184 Chapitre 7
Lissage du bord des caractères
Pour lisser le bord des caractères, vous leur appliquez un anticrénelage. Cela permet de fusionner les bords
du texte avec l’arrière-plan, ce qui le rend plus nette et lisible lorsque vous utilisez de grandes polices.
Utilisez le Vérificateur de propriétés pour définir l’anticrénelage. Si vous avez réduit la fenêtre du
Vérificateur de propriétés, cliquez sur la flèche d’extension dans l’angle inférieur droit pour
afficher toutes les propriétés.
Options d’anticrénelage dans le Vérificateur de propriétés
L’anticrénelage s’applique à l’ensemble des caractères d’un bloc.
Pour lisser le texte sélectionné :
Dans le Vérificateur de propriétés, choisissez une option dans le menu déroulant Anticrénelé :
Net, Fort, Lissé ou Sans anticrénelage.
Remarque : Lorsque vous ouvrez des fichiers vectoriels, tels que des fichiers FreeHand, sous Fireworks, le texte est
lissé. Vous pouvez changer cet attribut en utilisant l’ Vérificateur de propriétés. Pour plus de détails sur l’ouverture de
fichiers vectoriels, voir « Utilisation d’autres applications graphiques vectorielles » à la page 396.
Augmentation et réduction de la largeur des caractères
Vous pouvez augmenter ou réduire la largeur d’un texte horizontal à l’aide de l’option Echelle
horizontale du Vérificateur de propriétés.
L’échelle horizontale est exprimée sous la forme d’un pourcentage. 100 % est la valeur par défaut.
Option Echelle horizontale dans le Vérificateur de propriétés
Si vous avez réduit la fenêtre du Vérificateur de propriétés, cliquez sur la flèche d’extension dans
l’angle inférieur droit pour afficher toutes les propriétés.
Pour augmenter ou réduire la largeur des caractères sélectionnés :
Dans l’Insecteur des propriétés, déplacez le curseur du menu déroulant Echelle horizontale ou
entrez une valeur dans la zone de texte. Si vous déplacez le curseur au-delà de la valeur 100 %,
vous augmentez la largeur et la hauteur des caractères et les réduisez si vous déplacez le curseur endeçà de la valeur 100 %.
Utilisation d’un texte 185
Définition du décalage de la ligne de base
Le décalage de la ligne permet de placer le texte en dessous ou au-dessus de sa ligne de base
normale. S’il n’existe pas de décalage de ligne de base, le texte repose sur la ligne de base. Vous
pouvez utiliser le décalage de la ligne de base pour créer des indices et des exposants.
Les commandes de décalage de la ligne de base se trouvent dans le Vérificateur de propriétés. Le
décalage de la ligne de base est exprimé en pixels.
Options de décalage de la ligne de base dans le Vérificateur de propriétés
Pour définir le décalage de la ligne de base d’un texte sélectionné :
Dans le Vérificateur de propriétés, déplacez le curseur du menu déroulant Décalage de la ligne de
base ou entrez une valeur d’indice ou d’exposant dans la zone de texte. Si vous entrez des valeurs
positives, vous créez des exposants. Si vous entrez des valeurs négatives, vous créez des indices.
Applications de traits, de trames et d’effets à un texte
Vous pouvez appliquer des traits, des trames et des effets au texte de la même façon que pour les
autres objets. Vous pouvez appliquer n’importe quel style du panneau des styles à un texte, même
s’il ne s’agit pas d’un style de texte. Vous pouvez également créer un style en enregistrant des
attributs de texte.
Une fois le texte créé, vous pouvez le modifier dans Fireworks. Les traits, les trames, les effets et les
styles sont mis automatiquement à jour pendant l’édition.
Texte avec des options de trait, de trame, d’effet et de style
Vous pouvez appliquer une couleur de texte unie à un texte sélectionné d’un bloc de texte.
Toutefois, les attributs de trait, d’effets en direct et de trame non unie, tels que le dégradés, sont
appliqués à l’ensemble du texte du bloc et pas seulement au texte sélectionné.
Pour plus d’informations sur les traits et les trames, voir Chapitre 8, « Application de couleurs, de
traits et de trames », à la page 195. Pour pus d’informations sur l’utilisation des styles, voir
« Utilisation des styles » à la page 255. Pour plus d’informations sur les effets en direct, voir
« Application directe des effets » à la page 219.
L’outil Texte ne conserve pas les paramètres de trait ou d’effets en direct lorsque vous créez un bloc
de texte. Toutefois, vous pouvez enregistrer les attributs de trait, de trame et d’effet direct que
vous appliquez au texte pour les réutiliser sous la forme d’un style dans le panneau des styles.
L’enregistrement d’attributs comme styles enregistre les attributs mais pas le texte.
186 Chapitre 7
Pour enregistrer les attributs de texte en tant que style :
1
Créez un objet texte et appliquez les attributs appropriés.
2
Sélectionnez l’objet texte.
3
Choisissez Nouveau style dans le menu Options du panneau des styles.
4
Choisissez les propriétés du nouveau style et nommez-le.
5
Cliquez sur OK.
Rattachement de texte à un trajet
Pour libérer le texte des restrictions des blocs de texte rectangulaires, vous pouvez dessiner un
trajet et y attacher du texte. Le texte suit la forme du trajet et reste modifiable. Pour plus
d’informations sur le traçage de différents types de trajets, voir « Dessin de formes élémentaires » à
la page 153.
Lorsque vous attachez temporairement du texte à un trajet, ce dernier perd ses attributs de trait,
de trame et d’effet. Les attributs de trait, de trame et d’effet appliqués par la suite, le sont au texte
et non pas au trajet. Lorsque vous détachez du texte d’un trajet, le trajet retrouve ses attributs de
trait, de trame et d’effet.
Remarque : Le rattachement d’un texte contenant des retours charits matériels ou logiciels à un trajet peut produire
des résultats inattendus.
Si le texte rattaché à un trajet ouvert est plus long que ce dernier, les caractères excédentaires
apparaissent sur la ligne suivante et prennent la même forme que le trajet.
Le texte de trajet qui s’affiche sur la ligne suivante et qui prend la forme du trajet
Pour placer du texte sur un trajet :
1
Maintenez enfoncée la touche Maj, sélectionnez un bloc de texte et un trajet.
2
Choisissez Texte > Attacher au trajet.
Pour détacher le texte d’un trajet sélectionné :
Choisissez Texte > Détacher du trajet.
Modification des trajets et des textes attachés aux trajets
Vous pouvez modifier le texte que vous avez attaché à un trajet. En outre, vous pouvez modifier la
forme du trajet.
Utilisation d’un texte 187
Pour modifier un texte attaché à un projet, procédez de l’une des manières suivantes :
• Double-cliquez sur l’objet texte sur trajet avec l’outil Pointeur ou Sous-sélection.
• Choisissez l’outil Texte et sélectionnez le texte à modifier.
Pour modifier la forme du trajet :
1
Choisissez Texte > Détacher du trajet.
2
Modifiez le trajet.
3
Replacez le texte sur le trajet.
Modification de l’orientation et la direction d’un texte dans un trajet
L’ordre de dessin du trajet détermine la direction du texte qui lui est attaché. Par exemple, lorsque
vous dessinez un trajet allant de droite à gauche, le texte attaché est à l’envers et retourné.
Texte attaché à un trajet dessiné de droite à gauche
Vous pouvez inverser la direction ou changer l’orientation du texte attaché à un trajet. Vous
pouvez également changer le point de départ du texte sur un trajet.
Pour changer l’orientation du texte d’un trajet sélectionné :
Choisissez Texte > Orientation et sélectionnez une orientation.
Pour inverser la direction du texte sur un trajet sélectionné :
Choisissez Texte > Inverser la direction.
Texte enroulé autour d’un trajet
Texte vertical sur un trajet
Texte incliné verticalement autour d’un trajet
188 Chapitre 7
Texte incliné horizontalement autour d’un trajet
Pour déplacer le point de départ d’un texte rattaché à un trajet :
1
Sélectionnez l’objet texte sur un trajet.
2
Dans le Vérificateur de propriétés, entrez une valeur dans la zone de texte Décalage du texte.
Appuyez sur Entrée.
Remarque : Si vous avez réduit la fenêtre du Vérificateur de propriétés, cliquez sur la flèche d’extension dans
l’angle inférieur droit pour afficher toutes les propriétés.
Transformation du texte
Les blocs de texte sont transformés de la même façon que les autres objets. Vous pouvez mettre le
texte à l’échelle, le faire pivoter, l’incliner et le retourner pour créer des effets inédits.
Vous pouvez également modifier le texte transformé, mais si vous le transformez
considérablement, vous risquez de le rendre illisible. La transformation du texte n’affecte pas sa
taille en points. Lorsque vous transformez un bloc de texte et que le texte est redimensionné ou
mis à l’échelle, la taille de police existante ne change pas dans le Vérificateur de propriétés lorsque
vous sélectionnez le texte. Si vous changez la taille de police d’un texte transformé, vous changez
la taille du texte, mais uniquement par rapport à la transformation. Pour plus d’informations, voir
« Transformation et distorsion d’objets sélectionnés et sélections » à la page 123.
Conversion de texte en trajets
Vous pouvez convertir un texte en trajets, puis modifier la forme des lettres comme vous le feriez
pour n’importe quel autre objet vectoriel. Tous les outils de modification des vecteurs sont
disponibles lorsque vous avez converti le texte en trajets. Cependant, vous perdez la possibilité de
modifier le texte avec l’ Editeur de texte.
Pour convertir le texte sélectionné en trajets :
Sélectionnez Texte > Convertir en trajets.
Le texte converti en trajets conserve tous ses attributs visuels, mais ne peut être modifié que sous
forme de trajets. Vous pouvez modifier le texte converti sous la forme d’un groupe ou modifier
chaque caractère converti.
Pour convertir des trajets de caractères convertis individuellement, procédez de l’une des
manières suivantes :
• Sélectionnez le texte converti, à l’aide de l’outil Sous-sélection.
Utilisation d’un texte 189
• Sélectionnez le texte converti et choisissez Modifier > Dissocier.
Vous pouvez modifier les trajets de caractères convertis individuellement à l’aide des outils de
modification vectorielle. Pour plus d’informations sur la modification des trajets, voir
« Modification des trajets » à la page 166.
Vous pouvez créer un trajet composite à partir d’un objet texte créé par la conversion d’un texte
en trajets.
Pour créer un trajet composite à partir d’un groupe de trajets créé par la conversion de texte en
trajets :
1
Définissez le groupe de trajets.
2
Choisissez Modifier > Dissocier.
3
Choisissez Modifier > Combiner les trajets > Joindre.
Importation de texte
Utilisez le texte en provenance d’autres documents en utilisant la méthode glisser-déposer ou
copier-coller. Vous pouvez également ouvrir ou importer un fichier texte dans Fireworks.
Fireworks permet d’importer des fichiers texte RTF (rich text format) et ASCII (texte ordinaire).
Pour ouvrir ou importer un fichier texte :
1
Choisissez Fichier > Importer ou Fichier > Ouvrir.
2
Ouvrez le dossier contenant le fichier.
3
Choisissez le fichier et cliquez sur OK.
Texte Photoshop
Vous pouvez ouvrir ou importer un fichier Photoshop conteneant du texte ou vous pouvez copiercoller ou glisser-déposer du texte d’un fichier Photoshop vers le document Fireworks actif. Pour
plus d’informations, voir « Insertion de graphiques Photoshop dans Fireworks » à la page 406.
Fichiers RTF
Lorsque vous importez du texte au format RTF, Fireworks préserve les attributs suivants :
•
•
•
•
•
•
•
Police, taille et style (gras, italique, souligné) ;
Alignement (à gauche, à droite, centré, justifié) ;
Interlignage ;
Décalage de la ligne de base ;
Crénage ;
Echelle horizontale ;
Couleur du premier caractères.
Les autres informations RTF sont ignorées.
Il est impossible d’importer du texte RTF dans Fireworks par copier-coller ou glisser-déposer.
190 Chapitre 7
Texte ASCII
Toutes les méthodes d’importations sont à votre disposition pour les fichiers ASCII. Le texte
ASCII importé reçoit les attributs de police par défaut, 12 pixels de hauteur, et utilise la couleur
de trame active.
Traitement des polices manquantes
Si vous ouvrez un document dans Fireworks comportant des polices qui ne sont pas installées sur
votre ordinateur, Fireworks vous demande si vous voulez remplacer les polices ou conserver
l’apparence. Cela est particulièrement utile si vous partagez des fichers avec des utilisateurs sur
d’autres ordinateurs qui n’utilisent pas les mêmes polices.
L’option Conserver l’apparence remplace le texte par une image bitmap qui présente le texte avec
sa police d’origine. Vous pouvez toujours modifier le texte, mais dans ce cas Fireworks remplace
l’image bitmap par une police installée sur votre système. Dans ce cas, l’apparence du texte peut
changer.
Choisissez les polices devant remplacer les polices non installées. Une fois les polices remplacées,
le document s’ouvre pour vous permettre de modifier le texte et de l’enregistrer. Lorsque le fichier
est ouvert de nouveau sur un ordinateur disposant des polices d’origine, Fireworks utilise ces
polices.
Pour sélectionner une police de remplacement :
1
Ouvrez un document avec des polices manquantes.
La boîte de dialogue Polices manquantes s’ouvre.
2
Choisissez une police dans la liste Remplacer les polices manquantes.
3
Utilisez l’une des méthodes suivantes :
• Choisissez une police de remplacement dans la liste.
• Indiquez que vous voulez afficher le texte dans la police par défaut du système.
• Pour laisser la police manquant telle quelle, cliquez sur Pas de modification.
4
Cliquez sur OK.
Ainsi, lorsque vous ouvrez un document comportant la même police, la boîte de dialogue
Polices manquantes affiche les polices que vous avez choisies.
Correction orthographique
Utilisez la commande Vérifier l’orthographe du menu Texte pour vérifier l’orghographe des blocs
de texte ou tout le texte d’un document.
Pour vérifier l’orthographe d’un texte :
1
Sélectionnez au moins un bloc de texte. Si vous ne sélectionnez pas de bloc de texte, l’ensemble
du document est vérifié.
2
Choisissez Texte > Vérifier l’orthographe.
Utilisation d’un texte 191
3
Si vous n’avez pas encore vérifié l’orthographe dans Fireworks, une boîte de dialogue s’ouvre
pour vous demander de choisir un dictionnaire. Cliquez sur OK pour fermer la boîte de
dialogue. Choisissez une langue dans la liste Dictionnaire, puis cliquez sur OK.
Si vous ne choisissez pas une lange, un message vous demande de choisir un dictionnaire de
langue chaque fois que vous vérifiez l’orthographe d’un document.
Remarque : L’option Macromedia.tlx est toujours sélectionnée dans la partie supérieure de la iiste des
dictionnaires. Pour plus d’informations sur cette option, voir « Personnalisation de la vérification
orthographique » à la page 192.
4
La boîte de dialogue Vérifier l’orthographe s’affiche. Pour chaque mot trouvé, choisissez
l’option appropriée :
Ajouter à personnel ajoute
Ignorer ignore
le mot inconnu à votre dictionnaire personnel.
l’occurrence en cours du mot inconnu.
Ignore tout ignore toutes les occurrences du mot inconnu lors de la vérification
orthographique. Lors de la vérification suivante, le mot inconnu sera de nouveau identifié.
Modifier remplace
l’occurrence en cours du mot inconnu par le texte que vous tapez dans la
zone Remplacer par ou la sélection dans la liste des suggestions.
Remplacer tout remplace
Supprimer supprime
toutes les occurrences du mot inconnu de la même manière.
une occurrence lorsqu’un doublon de mot est détecté.
Lorsque Fireworks a terminé de vérifier l’orthographe d’un document, la boîte de dialogue
Vérifier l’orthographe se ferme et un message apparaît pour indiquer que la vérification
orthographique est terminée.
Personnalisation de la vérification orthographique
Vous pouvez personnaliser la manière dont Fireworks vérifie l’orthographe en utilisant la boîte de
dialogue installation du correcteur orthographique.
Cette boîte de dialogue vous permet de définir les dictionnaires de langue que Fireworks doit
utiliser pour vérifier l’orthographe et modifier les mots de votre dictionnaire personnel. Vous
pouvez également modifier les éléments que Fireworks doit vérifier, notamment les adresses
Internet et de fichier.
Pour personnaliser la vérification orthographique dans Fireworks :
1
Utilisez l’une des méthodes suivantes :
• Choisissez Texte > Installation du correcteur orthographique.
• Cliquez sur le bouton Configurer de la boîte de dialogue Vérifier l’orthographe.
2
Choisissez les options nécessaires dans la boîte de dialogue Installation du correcteur
orthographique :
• Choisissez les dictionnaires de langue.
Remarque : L’option Macromedia.tlx est toujours sélectionnée dans la partie supérieure de la iiste des
dictionnaires. Il s’agit du fichier contenant votre dictionnaire orthographique personnalisé.
• Recherchez un dictionnaire personnalisé en cliquant sur l’icône de dossier située à côté du
champ Chemin d’accès du dictionnaire.
192 Chapitre 7
• Modifiez le dictionnaire personnalisé en cliquant sur le bouton Modifier le dictionnaire
personnel et en ajoutant, supprimant ou modifiant les mots de la liste.
• Choisissez les types de mots à inclure dans la vérification orthographique.
3
Cliquez sur OK.
Utilisation de l’Editeur de texte
Dans Fireworks 4 et les versions précédentes, le texte était créé et modifié à l’aide de l’Editeur de
texte. Toutes les options de modification de texte et de formatage de l’Editeur de texte se trouvent
désormais dans le Vérificateur de propriétés. Toutefois, vous pouvez toujours accéder à l’Editeur
de texte via le menu Texte.
L’Editeur de texte est utile pour travailler sur des textes difficiles à éditer à l’écran, tels que les
grands blocs de texte, les textes attachés aux trajets ou un texte dont les polices et la taille sont
difficilement lisibles. Vous pouvez afficher ces textes dans la police système et la taille par défaut
pour faciliter l’édition.
Remarque : Certaines nouvelles fonctions de Fireworks MX sont disponibles dans l’Editeur de texte.
Pour afficher l’Editeur de texte :
1
Sélectionnez un bloc de texte et choisissez Texte > Editeur.
2
Modifiez et formatez le texte à l’aide des options disponibles.
3
Cliquez sur OK pour appliquer les modifications et fermer l’Editeur de texte.
Pour afficher le texte avec la police système :
Désactivez l’option Afficher la police à partir de l’ Editeur de texte.
Pour afficher le texte dans la taille par défaut :
Désactivez l’option Afficher la taille et la couleur dans l’ Editeur de texte.
Utilisation d’un texte 193
194 Chapitre 7
CHAPITRE 8
Application de couleurs, de traits et de trames
Le programme Macromedia Fireworks MX dispose de nombreux panneaux, outils et options
permettant d’organiser, de choisir et d’appliquer des couleurs aux images bitmaps et aux objets
vectoriels.
Dans le panneau Nuanciers, vous pouvez choisir un groupe d’échantillons de couleurs prédéfinis,
telle que Cubes de couleurs, Tons continus ou Echelle de gris, ou créer des couleurs favorites ou
des couleurs acceptées par votre client. Dans le Mélangeur, vous pouvez choisir un modèle de
couleur, tel que Hexadecimal, RVB ou Echelle de gris, ainsi que les couleurs de trait et de trame
directement dans la barre des couleurs ou en entrant des valeurs de couleur.
L’espace de travail Fireworks contient des zones de couleurs contenant les sélections de couleurs en
cours des options et des caractéristiques d’objets. Lorsque vous cliquez sur une zone de couleur,
une source de couleurs s’affiche pour vous permettre de choisir une couleur pour la zone de
couleur. Eloignez le pointeur d’une source de couleurs ouverte et cliquez sur une couleur pour
l’appliquer à la zone de couleur.
La section Couleurs du panneau Outils contient des commandes de trait et de trame et d’autres
options de couleur. La section Bitmap contient les outils Pot de peinture, Trame de dégradé et
Pipette que vous pouvez utiliser pour appliquer une couleur à des bitmaps, des zones ayant une
couleur similaire et des objets vectoriels. Pour plus d’informations sur ces outils de bitmap, voir
Chapitre 5, « Traitement des bitmaps », à la page 131.
Remarque : Pour plus d’informations sur la correction des couleurs à l’aide des effets en direct et de filtres, voir
« Réglage de la couleur et du ton d’un bitmap » à la page 139.
Utilisation de la section Couleurs du panneau Outils
La section Couleurs du panneau Outils contient des commandes permettant d’activer les zones
Couleur de trait et Couleur de trame qui déterminent si les traits ou les trames des objets
sélectionnés sont affectés par les choix de couleurs. Cette section contient également des
commandes qui permettent de restaurer les couleurs par défaut, de ne définir aucun paramètre de
couleur de trait et de trame et de permuter les couleurs de trait et de trame.
Pour activer la zone Couleur de trait u Couleur de trame :
Cliquez sur l’icône située à côté de la zone Couleur de trait ou Couleur de trame dans le panneau
Outils. La zone de couleur active apparaît sous la forme d’un bouton enfoncé dans le panneau
Outils.
195
Remarque : L’outil Pot de peinture remplit les sélections de pixels et les objets vectoriels avec la couleur figurant
dans la zone Couleur de trame du panneau Outils.
Zones de couleur dans le panneau Outils et source de couleurs
Pour rétablir les couleurs par défaut :
Cliquez sur le bouton Couleurs par défaut du panneau Outils ou du Mélangeur.
Pour retirer le trait ou la trame des objets sélectionnés à l’aide du bouton Aucun trait ou Trame :
1
Cliquez sur le bouton Aucun trait ou Trame de la section Couleurs du panneau Outils.
La caractéristique de trait ou de trame active devient Aucune.
2
Pour affecter également la valeur Aucune à la caractéristique inactive, cliquez de nouveau sur le
bouton Aucun trait ou Trame.
Remarque : Vous pouvez également affecter la valeur Aucune au paramètre de trait ou de trame des objets
sélectionnés en cliquant sur le bouton Transparent dans un menu déroulant Couleur de trame ou Couleur de trait ou
en choisissant Aucune dans le menu déroulant Options de remplissage ou Options de trait du Vérificateur de
propriétés.
Pour permuter les couleurs du trait et de la trame :
Cliquez sur le bouton Permuter les couleurs du panneau Outils ou dans le Mélangeur.
Organisation des groupes d’échantillons et des modèles de
couleurs
Le panneau Nuancier et le Mélangeur se combinent pour former le groupe du panneau Couleurs.
Dans le panneau Nuancier vous pouvez afficher, modifier, créer et modifier les groupes
d’échantillons et choisir des couleurs de traits et de trames. Vous pouvez utiliser le Mélangeur
pour choisir un modèle de couleur, des couleurs de traits et de trames mixtes en déplaçant les
curseurs de valeurs de couleurs ou en entrant des valeurs de couleur, et choisir des couleurs de
traits et de trames directement dans la barre des couleurs.
Application de couleurs à l’aide du panneau Nuancier
Le panneau Nuancier contient toutes les couleurs du groupe d’échantillons de couleurs en cours.
Utilisez ce panneau pour appliquer des couleurs de traits et de trames aux objets vectoriels ou au
texte sélectionnés.
Pour appliquer une couleur au trait ou à la trame d’un objet sélectionné depuis le panneau Nuancier :
1
Clïquez sur l’icône située à côté de la zone Couleur de trait ou Couleur de trame du panneau
Outils ou du Vérificateur de propriétés pour l’activer.
196 Chapitre 8
2
Si le panneau Nuancier n’est pas ouvert, choisissez Fenêtre > Nuanciers.
Nuancier
3
Cliquez sur l’échantillon pour appliquer la couleur au trait ou à la trame de l’objet sélectionné.
La couleur apparaît dans la zone active Couleur de trait ou Couleur de trame.
Modification de groupes d’échantillons
Vous pouvez utiliser ou créer un autre groupe d’échantillons. Le menu Options du panneau
Nuancier contient les groupes d’échantillons suivants : Cubes de couleurs, Tons continus,
Système Macintosh, Système Windows et Echelle de gris. Vous ne pouvez pas importer
d’échantillons personnalisés depuis des fichiers de pallette de couleurs enregistrés sous forme de
fichier ACT ou GIF.
Menu Options du panneau Nuancier
Pour choisir un groupe d’échantillons :
Dans le menu déroulant des options du panneau Nuancier, sélectionnez un groupe d’échantillons.
Remarque : La sélection de cubes de couleurs affiche le groupe d’échantillon par défaut.
Pour choisir un groupe d’échantillons :
1
Choisissez Remplacer le nuancier dans le menu Options du Nuancier.
2
Accédez au dossier et choisissez un fichier d’échantillons.
Application de couleurs, de traits et de trames 197
3
Cliquez sur Ouvrir.
Les échantillons de couleurs du fichier remplace les échantillons précédents.
Remarque : Pour plus d’informations sur la création d’un groupe d’échantillons, voir « Personnalisation du
panneau Nuancier » à la page 198 et « Enregistrement de palettes » à la page 348.
Pour ajouter des échantillons d’une palette de couleurs externe au nuancier actif :
1
Dans le menu déroulant des options du panneau Nuancier, sélectionnez Ajouter des
échantillons.
2
Naviguez vers le dossier approprié et choisissez un fichier de palette de couleurs.
Remarque : Fireworks permet d’ajouter des échantillons de palettes exportées sous forme de fichiers ACT ou GIF.
3
Cliquez sur OK.
Les nouveaux échantillons sont ajoutés à la fin des échantillons actifs.
Personnalisation du panneau Nuancier
Vous pouvez ajouter, supprimer, remplacer et trier des groupes d’échantillons de couleurs dans le
panneau Nuancier.
Remarque : La sélection Edition > Annuler n’annule pas les ajouts ou les suppressions d’échantillons.
Nuancier
Pour ajouter une couleur au panneau Nuancier :
1
A partir du panneau Outils choisissez l’outil Pipette.
2
Choisissez le nombre de pixels de l’échantillon dans le menu déroulant Echantillon du
Vérificateur de propriétés : 1 pixel, Moyenne 3x3 ou Moyenne 5x5.
3
Cliquez n’importe où dans une fenêtre de document Fireworks ouverte pour échantillonner
une couleur.
4
Placez le bout de la pipette dans l’espace ouvert après le dernier échantillon dans le panneau
Nuancier.
La pipette se transforme en pot de peinture.
5
Cliquez à cet endroit pour ajouter l’échantillon.
Conseil : Lorsque vous sélectionnez l’option Accrocher à Websafe dans le menu Options de la source de
couleurs, toutes les couleurs sélectionnées avec la pipette prennent la valeur de la couleur WebSafe la plus
proche.
198 Chapitre 8
Pour remplacer un échantillon par une autre couleur :
1
A partir du panneau Outils, choisissez l’outil Pipette.
2
Choisissez le nombre de pixels de l’échantillon dans le menu déroulant Echantillon du
Vérificateur de propriétés : 1 pixel, Moyenn 3x3 ou Moyenne 5x5.
3
Cliquez n’importe où dans une fenêtre de documents Fireworks ouvert pour échantillonner
une couleur.
4
Maintenez la touche Maj enfoncée et placez le pointeur sur un échantillon du panneau
Nuancier.
Le pointeur prend alors la forme de l’outil Pot de peinture.
5
Cliquez sur l’échantillon pour le remplacer par la nouvelle couleur.
Pour supprimer un échantillon du panneau Nuancier :
1
Maintenez la touche Ctrl (Windows) ou Commande (Macintosh) enfoncée et pointez sur un
échantillon.
Le pointeur prend la forme de ciseaux.
2
Cliquez sur l’échantillon pour le supprimer du panneau Nuancier.
Pour enregistrer une sélection de couleurs échantillonnées :
1
Ajoutez les couleurs échantillonnées dans le panneau Nuancier.
2
Dans le menu déroulant des options du panneau Nuancier sélectionnez Enregistrer le nuancier.
La boîte de dialogue Exporter le nuancier est alors ouverte.
3
Choisissez un nom de fichier et de répertoire, puis cliquez sur Enregistrer.
Effacement et tri des échantillons
Vous pouvez effacer et trier des échantillons de couleurs à l’aide du menu Options du panneau
Nuancier.
Pour effacer ou trier des échantillons :
Dans le menu déroulant des options du panneau Nuancier, choisissez l’une des options suivantes :
Effacer le nuancier efface
Trier par couleurs trie
la totalité du panneau Nuancier.
les échantillons par valeur de couleur.
Création de couleurs avec le Mélangeur
Dans le Mélangeur, vous pouvez créer des couleurs en déplaçant les curseurs ou en entrant des
valeurs pour chaque composant d’un modèle de couleur, tel que RGB, Hexadécimal ou CMJ. La
couleur que vous créez est appliquée à la zone active Couleur de trait ou Couleur de trame. Le
Mélangeur contient également une barre de couleurs qui affiche les couleurs du modèle de
couleur actif. Cliquez n’importe où dans la barre de couleurs pour appliquer une couleur. Vous
pouvez également cliquer sur le bouton de sélection de couleurs système pour choisir une couleur
du système Windows ou Macintosh.
Application de couleurs, de traits et de trames 199
Conseil : Bien que CMJ soit une option de modèle de couleur, les graphiques exportés directement depuis
Fireworks ne donnent pas de très bons résultats à l’impression. Pour repréparer des graphiques Fireworks exportés,
vous pouvez les importer dans FreeHand MX qui convertit en mode CMJ les images RVB lors d’une sortie en
séparations de couleurs numériques. Pour plus d’informations, voir la documentation FreeHand MX.
Mélange de couleurs dans le Mélangeur
Utilisez le Mélangeur pour afficher les valeurs de la couleur active et modifier des valeurs de
couleur pour créer de nouvelles couleurs.
Par défaut, le Mélangeur identifie les couleurs à l’aide du mode RVB hexadécimal, affichant des
valeurs de couleur définies à partir du rouge (R), du vert (V) et du bleu (B). Les valeurs RVB
hexadécimales sont comprises entre 00 et FF.
Choisissez
Pour exprimer la composition des couleurs
RVB
Valeurs Rouge, Vert et Bleu, chacun de ces composants étant affecté d’une valeur comprise
entre 0 et 255, 0-0-0 correspondant au noir et 255-255-255 au blanc.
Hexadécimal
RVB Rouge, Vert et Bleu, chacun de ces composants étant affecté d’une valeur hexadécimale
comprise entre 00 et FF. 00-00-00 correspond au noir et FF-FF-FF au blanc.
TSL
Teinte, saturation et luminosité, la teinte étant affectée d’une valeur comprise entre 0 et
360 degrés et la saturation et la luminosité, d’une valeur comprise entre 0 et 100 %.
CMJ
Cyan, Magenta et Jaune, chacun de ces composants étant affecté d’une valeur comprise entre
0 et 255, 0-0-0 correspondant au blanc et 255-255-255 au noir.
Echelle de gris
Un pourcentage de noir. Ce composant unique, Noir (N), est affecté d’une valeur comprise entre
0 et 100 %, 0 correspondant au blanc et 100 au noir. Les valeurs intermédiaires correspondent
à des dégradés du gris.
Vous pouvez choisir d’autres modèles de couleurs à partir du menu Options du Mélangeur. Les
valeurs de composition de la couleur utilisée varient avec chaque nouveau modèle.
Pour afficher le Mélangeur :
Choisissez Fenêtre > Mélangeur.
Pour appliquer une couleur de la barre des couleurs à un objet sélectionné :
1
Cliquez sur l’icône située à côté de la zone des couleurs de trait ou de trame du Mélangeur.
2
Positionnez le pointeur sur la barre de couleurs.
Le pointeur se transforme en pipette.
200 Chapitre 8
3
Cliquez sur une couleur pour la sélectionner.
La couleur est appliquée à l’objet sélectionné et devient la couleur de trait ou de trame active.
Pour sélectionner une couleur dans le Mélangeur :
1
Afin d’éviter que des objets ne soient malencontreusement modifiés lors du mélange des
couleurs, désélectionnez tous les objets avant de commencer à mélanger une couleur.
2
Cliquez sur la zone des couleurs de trait ou de trame pour définir la destination de la nouvelle
couleur.
3
Choisissez un modèle de couleur dans le menu Options du mélangeur.
4
Procédez de l’une des manières suivantes pour définir les valeurs des composants de couleur :
• Entrez des valeurs dans les champs de composition de la couleur.
• Utilisez les curseurs du menu déroulant.
• Sélectionnez une couleur dans la barre de couleurs.
Vous pouvez ajouter la couleur au panneau Nuancier afin de pouvoir la réutiliser. Pour plus
d’informations, voir « Personnalisation du panneau Nuancier » à la page 198.
Pour parcourir les modèles de couleur à l’aide de la barre de couleurs :
La barre de couleurs s’affiche au bas du Mélangeur.
Remarque : Les options du Mélangeur ne sont pas modifiées.
Création de couleurs à l’aide du sélecteur de couleurs du système
Vous pouvez créer des couleurs à l’aide de la boîte de dialogue Couleurs (Windows) ou du
sélecteur de couleurs Apple (Macintosh) au lieu d’utiliser le panneau Mélangeur ou Nuancier.
Pour obtenir une couleur à partir du sélecteur de couleurs du système :
1
Cliquez sur une case de couleur.
2
Choisissez le système Windows ou Mac dans un menu Options de la fenêtre de la source de
couleurs.
Le nuancier du système s’affiche dans la fenêtre de la source de couleurs.
3
Choisissez une couleur dans le sélecteur de couleurs du système.
La couleur est appliquée à l’objet sélectionné et devient la couleur de trait ou de trame active.
Pour plus de détails sur l’ajout d’une couleur à partir du sélecteur de couleurs vers le panneau
Nuancier, reportez-vous à la section « Personnalisation du panneau Nuancier » à la page 198.
Affichage des valeurs de couleur
Pour identifier des valeurs de couleurs, vous pouvez également utiliser le panneau Informations en
plus du Nuancier.
Pour afficher la valeur de la couleur d’une partie de votre document avec le panneau Informations :
1
Choisissez Fenêtre > Informations pour afficher le panneau Informations.
Application de couleurs, de traits et de trames 201
2
Placez le pointeur au-dessus de l’objet contenant la couleur que vous voulez afficher (Windows
uniquement).
Pour afficher la valeur de la couleur active de trait ou de trame, procédez de l’une des manières
suivantes :
• Choisissez Fenêtre > mélangeur pour les valeurs RVB ou d’autres valeurs de couleurs système.
• Cliquez sur la source de couleurs pour ouvrir la fenêtre de la source de couleurs et afficher la
valeur hexadécimale dans la partie supérieure de la fenêtre.
• Placez le pointeur sur une source de couleur et lisez l’info-bulle (Windows uniquement).
Remarque : Par défaut, les valeurs RVB apparaissent dans le panneau Informations et le Mélangeur et les
valeurs hexadécimales apparaissent dans la fenêtre de la source de couleurs et l’nfo-bulle de la source de
couleurs de Windows. Toutefois, vous pouvez changer à tout moment le modèle de couleur affiché dans le
Mélangeur ou le panneau Informations.
Pour afficher des informations pour un autre modèle de couleur :
Choisissez un autre modèle de couleur dans le menu Options du panneau Informations ou du
Mélangeur.
Tramage à l’aide de couleurs Websafe
Il est parfois nécessaire d’utiliser une couleur non Websafe. Par exemple, le logo de votre
entreprise peut utiliser une couleur qui n’est pas Websafe. Pour s’approcher d’une couleur
Websafe qui ne génère ni décalage ni tramage lorsqu’elle est exportée à l’aide d’une palette
Websafe, utilisez un tramage Web.
Remarque : Notez que le tramage Web peut augmenter la taille du fichier.
Deux couleurs Websafe créent un tramage Web
Pour utiliser le tramage Web :
1
Sélectionnez un objet contenant une couleur non Websafe.
2
Dans le menu des options trame de le Vérificateur de propriétés, choisissez Tramage Web.
3
Dans le Vérificateur de propriétés, cliquez sur la source de couleurs de trame.
La fenêtre de la source de couleurs s’ouvre avec les options de trames Web. La couleur nonWebsafe de l’objet apparaît dans la source de couleurs Source de la fenêtre des options de
trames. Les deux couleurs de tramage Websafe figurent dans les zones de couleurs de droite. Le
tramage Web est ensuite appliqué à l’objet et devient la couleur de trame active.
Remarque : Définition du bord d’un tramage Web afin d’obtenir des résultats non crénelés ou diffusés dans les
couleurs non Websafe.
4
Cliquez en dehors de la fenêtre contextuelle pour la fermer.
202 Chapitre 8
Pour créer l’illusion d’une trame réellement transparente dans un navigateur Web :
1
Sélectionnez l’objet auquel vous voulez appliquer une trame transparente.
2
Dans le menu des options trame de le Vérificateur de propriétés, choisissez Tramage Web.
3
Dans le Vérificateur de propriétés, cliquez sur la source de couleurs de trame. La fenêtre de la
source de couleurs s’ouvre avec les options de trames Web.
4
Cliquez sur l’option Transparente.
Les puits de couleurs sur la droite de la fenêtre contextuelle changent pour refléter votre
sélection et l’objet sur le document devient semi-opaque ou translucide.
5
Cliquez en dehors de la fenêtre contextuelle pour la fermer.
6
Exportez l’objet au format GIF ou PNG en sélectionnant l’option Transparence d’index ou
Transparence alpha. Pour plus d’informations sur l’exportation de fichiers avec des
transparences, voir « Création de zones de transparence » à la page 349.
Lorsque le graphisme est affiché dans un navigateur, l’arrière-plan de la page est visible au
travers des pixels du tramage Web transparent.
Remarque : Les navigateurs ne prennent pas tous en charge les fichiers PNG.
Utilisation des puits de couleurs et des fenêtres contextuelles
Fireworks MX contient des puits de couleurs, notamment dans la section Couleurs du panneau
Outils ainsi que dans le Vérificateur de propriétés et le Mélangeur. Chacun de ces emplacements
affichent la couleur de la propriété associée de l’objet.
Choix d’une couleur dans une source de couleurs
Lorsque vous cliquez sur une source de couleurs, une fenêtre contextuelle de couleur similaire au
Nuancier s’ouvre. Vous pouvez afficher les mêmes échantillons dans une fenêtre contextuelle de
couleurs que ceux figurant dans le panneau Nuancier ou des échantillons différents.
Pour choisir la couleur d’une case de couleur :
1
Cliiquez sur la case de couleur.
Le fenêtre contextuelle des couleurs s’affiche.
2
Utilisez l’une des méthodes suivantes :
• Cliquez sur un échantillon pour l’appliquer à la case de couleur.
• Cliquez avec la pipette sur une couleur dans n’importe quel emplacement de l’écran pour
l’appliquer à la case de couleur.
• Cliquez su le bouton Transparente pour rendre la trame ou le trait transparent.
Pour afficher le groupe d’échantillons en cours du panneau Nuancier dans la fenêtre contextuelle
de couleurs :
Choisissez le panneau Nuancier dans le menu options de la fenêtre contextuelle des couleurs.
Pour afficher un groupe d’échanillons différents dans la fenêtre contextuelle des couleurs :
Choisissez un groupe d’échantillons dans le menu Option de la fenêtre contextuelle des couleurs.
Ce choix n’affecte pas le panneau Nuancier.
Application de couleurs, de traits et de trames 203
Echantillonnage de couleurs dans une fenêtre contextuelle des couleurs
Lorsqu’une fenêtre contextuelle de couleurs est ouverte, le pointeur se transforme en pipette
spéciale permettant d’échantillonner des couleurs depuis pratiquement n’importe quel
emplacement de l’écran. Cette opération s’appelle l’échantillonnage.
Pour échantillonner une couleur depuis n’importe quel emplacement de l’écran pour la zone de
couleur en cours :
1
Cliquez sur une case de couleur.
La fenêtre contextuelle des couleurs s’ouvre et le pointeur se transforme en pipette.
2
Cliquez n’importe où dans l’espace de travail Fireworks pour choisir la couleur de la case de
couleur.
La couleur est appliquée à la caractéristique ou l’élément associé à la case de couleur et la
fenêtre contextuelle des couleurs se ferme.
Conseil : Maintenez la touche Maj enfoncée et cliquez pour choisir une couleur Websafe.
Utilisation des traits
Avec le Vérificateur de propriétés, le menu déroulant Options de trait et la boîte de dialogue de
modification de trait, vous contrôlez chaque nuance de pinceau, notamment la quantité d’encre,
l’épaisseur et la forme, la texture, l’effet de bord et l’aspect.
Application de traits
Vous pouvez changer les attributs de trait des outils Plume, Crayon et Pinceau de façon à ce que
les nouveaux objets vectoriels adoptent ces attributs ou vous pouvez appliquer ces attributs après
le dessin des objets.
La couleur de trait en cours apparaît dans la zone correspondante du panneau Outils, le
Vérificateur de propriétés et le Mélangeur. Vous pouvez changer la couleur de trait d’un outil de
dessin ou des objets sélectionnés dans ces trois panneaux.
L’icône de crayon indique la zone Couleur de trait dans le panneau Outils, le Vérificateur de propriétés et le
Mélangeur.
Pour changer les attributs de trait des objets sélectionnés, procédez de l’une des manières
suivantes :
• Choisissez un attribut de trait dans le Vérificateur de propriétés.
Conseil : Choisissez des options de trait dans le menu déroulant Options de trait pour définir des attributs
supplémentaires.
204 Chapitre 8
• Cliquez sur la zone Couleur de trait du panneau Outils, puis sur Options de trait. Choisissez
des attributs de trait dans la fenêtre contextuelle des options de trait.
Utilisez le Vérificateur de propriétés ou la fenêtre contextuelle Options de trait pour changer le trait
d’un objet.
Pour changer la couleur de trait d’un outil de dessin :
1
Appuyez sur Ctrl+D (Windows) ou Command+D (Macintosh) pour désélectionner tous les
objets.
2
Choisissez un outil de dessin dans le panneau Outils.
3
Cliquez sur la zone Couleur de trait du panneau Outils ou dans le Vérificateur de propriétés
pour ouvrir la fenêtre contextuelle des couleurs.
4
Choisissez une couleur de trait parmi les échantillons proposés.
5
Faites glisser la souris pour dessiner l’objet.
Remarque : Un nouveau trait utilise la couleur actuellement affichée dans la source de couleurs du trait.
Pour supprimer tous les attributs de trait d’un objet sélectionné, procédez de l’une des manières
suivantes :
• Choisissez Aucun dans la menu déroulant Options de trait du Vérificateur de propriétés ou
dans la fenêtre contextuelle Options de trait.
• Cliquez sur la zone Couleur de trait du panneau Outils ou du Vérificateur de propriétés, puis
sur le bouton Transparente.
Application de couleurs, de traits et de trames 205
Création de traits personnalisés
Utilisez la boîte de dialogue de modification de trait pour changer les caractéristiques de trait.
Cette boîte de dialogue contient les onglet Options, Forme et Sensitibilité.
L’aperçu de trait au bas de chaque onglet indique le pinceau et les paramètres en cours. Dans
l’aperçu, un trait qui d’effile ou s’estompe ou change de gauche à droite indique les paramètres de
pression et de vitesse-sensibilité.
Pour ouvrir la boîte de dialogue de modification de trait :
1
Procédez de l’une des manière suivantes pour ouvrir la fenêtre contextuelle Options de trait :
• Choisissez Options de trait dans le menu déroulant Options de trait du Vérificateur de
propriétés.
• Cliquez sur Options de trait dans le menu déroulant Couleur de trait du panneau Outils.
2
Cliquez sur Advancé.
La boîte de dialogue de modification de trait s’ouvre.
206 Chapitre 8
Pour définir les options de trait de pineau générale :
1
Dans l’onglet Options de la boîte de dialogue de modification de trait, définissez la quantité
d’encre, l’espacement et le débit. Des débit élevés créent des trait de pinceau qui s’enchaînent
de la même manière qu’avec un aérographe.
2
Pour que les traits de pinceau se chevauchent pour créer des traits denses, choisissez Repasser.
3
Pour définir la texture du trait, changez l’option Texture. La transparence de la texture est
proportionnelle à la valeur définie.
4
Pour définir la texture des bords, entrez une valeur dans le champ Texture du bord et choisissez
un effet de bord dans le menu déroulant Effet de bord.
5
Définissez le nombre de pointes du trait de pinceau. Pour plusieurs extrémités, entrez une
valeur de Espacement des pointes et choisissez la méthode de variation de couleur. Vous pouvez
choisir Aléatoire, Uniforme, Complémentaire, Teinte ou Ombré.
6
Cliquez sur Appliquer pour appliquer les paramètres aux traits sélectionnés, puis cliquez sur OK.
Application de couleurs, de traits et de trames 207
Pour modifier la pointe du pinceau :
1
Dans l’onglet Forme de la boîte de dialiogue de modification de trait, sélectionnez Carrée pour
une pointe carrée ou désélectionnez cette option pour utiliser une pointe ronde.
2
Définissez la taille de la pointe du pinceau, l’épaisseur, l’aspect de la pointe et son angle.
3
Cliquez sur Appliquer, puis sur OK.
Fireworks dispose de paramètres de trait pour définir précisément les attributs de trait contrôlés
par la vitesse et la pression lors de l’utilisation d’une tablette et d’un crayon Wacom sensible à la
pression. Vous pouvez choisir l’attribut de trait à contrôler avec une plume.
208 Chapitre 8
Pour définir la sensibilité de trait :
1
Dans l’onglet Sensibilité de la boîte de dialogue de modification de trait, choisissez une
propriété de trait, telle que la taille, la quantité d’encre ou la saturation dans le menu déroulant
Propriété du trait.
2
Dans les options Facteurs de variation, choisissez le degré auquel la sensibilité affecte la
propriété de trait en cours, puis cliquez sur OK.
3
Cliquez sur OK.
Insertion de traits dans les trajets
Par défaut, le trait de pinceau d’un objet est centré sur un trajet. Vous pouvez modifier des
options pour placer le trait de pinceau complètement à l’intérieur ou à l’extérieur du trajet. Cela
vous permet de contrôler la taille générale des objets au trait et de créer des effets créatifs, tels que
l’utilisation de traits sur les bords des boutons biseautés.
Trait centré, trait situé à l’intérieur et trait situé à l’extérieur
Application de couleurs, de traits et de trames 209
Vous pouvez utiliser le menu déroulant Trait de la fenêtre Options de trait pour réorienter les
traits de pinceau.
Pour déplacer un trait à l’intérieur ou à l’extérieur du trajet sélectionné :
1
Cliquez sur la zone Couleur de trait du panneau Outils ou du Vérificateur de propriétés pour
ouvrir la fenêtre contextuelle de la source de couleur.
2
Choisissez une option dans le menu déroulant Emplacement du trait par rapport au trajet : A
l’intérieur, Centré ou A l’extérieur.
3
Vous pouvez également choisir l’option Recouvrir le tracé avec la trame.
Normalement, le trait chevauche la trame. L’option Recouvrir le tracé avec la trame permet de
dessiner une trame sur le trait. Si vous sélectionnez cette option pour un objet comportant une
trame opaque, toutes les parties du trait qui figurent dans le trajet sont obscurcies. Les trames
comportant un niveau de transparence risquent de teinter les traits de pinceau à l’intérieur des
trajets ou de se mélanger avec ces derniers.
Création de styles de traits
Vous pouvez modifier des caractéristiques de trait spécifiques telles que la quantité d’encre, la
forme et la pression de la pointe, et enregistrer le trait personnalisé en tant que style, de façon à
l’utiliser de nouveau dans les autres documents.
Pour créer des traits personnalisés :
1
Utilisez l’une des méthodes suivantes :
• Cliquez sur la zone Couleur de trait du panneau Outils, puis sur Options de trait.
• Choisissez Options de trait dans le menu déroulant Options de trait du Vérificateur de
propriétés.
La boîte de dialogue Options de trait s’affiche.
2
Modifiez les attributs de trait de pinceau.
3
Enregistrez les attributs de trait personnalisés sous la forme d’un style. Pour plus
d’informations, voir « Création et suppression de styles » à la page 256.
Utilisation des trames
Le Vérificateur de propriétés, le menu déroulant Options de trame, la fenêtre contextuelle
Options de trame et la fenête contextuelle Dégradé ainsi qu’un ensemble de textures et de motifs
bitmap permettent de créer diverses trames pour les objets vectoriels et textuels. L’outil Pot de
peinture ou Dégradé permet également de remplir des pixels en fonction des paramètres de trame
en cours.
210 Chapitre 8
Définition des attributs de trame des outils de dessin
Vous pouvez définir les attributs de trame des outils de dessin Rectangle, Rectangle arrondi,
Ellipse et Polygone pour les appliquer aux nouveaux objets. La trame active figure dans la zone
Couleur de trame du Vérificateur de propriétés, le panneau Outils et le Mélangeur. Vous pouvez
utiliser ces panneaux pour changer la trame d’un outil de dessin.
L’icône du pot de peintuire indique la zone Couleur de trame du paneau Outils, du Vérificateur de
propriétés et du Mélangeur.
Pour changer la couleur de trame unie des outils de dessin vectoriels applicable et de l’outil Pot de
peinture :
1
Choisissez un outil de dessin ou l’outil Pot de peinture.
2
Utilisez l’une des méthodes suivantes :
• Appuyez sur Ctrl+D (Windows) ou Commande +D (Macintosh) pour désélectionner tous les
objets, puis cliquez sur la zone Couleur de trame du Vérificateur de propriétés pour ouvrir la
fenêtre contextuelle Couleur de trame.
3
Cliquez sur la zone Couleur de trame du panneau Outils ou du mélangeur pour ouvrir le puits
des couleurs.
4
Choisissez la couleur de la trame dans les échantillons ou échantillonnez une couleur n’importe
où dans l’écran à l’aide de la pipette.
5
Utilisez l’outil de manière appropriée.
Remarque : L’outil Texte affecte toujours à la zone Couleur de trame la dernière couleur de texte unie utilisée.
Modification des trames unies
Une trame unie est simplement une couleur unie remplissant l’intérieur d’un objet. Vous pouvez
modifier la couleur de trame d’un objet à partir du panneau Outils, du Vérificateur de propriétés
ou du Mélangeur.
Pour modifier la trame unie des objets vectoriels sélectionnés dans le Vérificateur de propriétés :
1
Cliquez sur la zone Couleur de trame du Vérificateur de propriétés, du panneau Outils ou du
Mélangeur pour ouvrir la fenêtre contextuelle des couleurs.
2
Choisissez un échantillon de couleur à partir de la source de couleurs du panneau.
La trame apparaît dans l’objet sélectionné et devient la couleur de trame active.
Application de trames et dégradés
Vous pouvez modifier des trames pour afficher une série de caractéristiques de dégradé uni, tramé
ou à motif, allant des couleurs unies aux dégradés imitant le satin, des ondes ou des plis. En outre,
vous pouvez modifier divers attributs d’une trame, tels que la couleur, le bord, la texture et la
transparence.
Vous disposez de différents types de trames et de dégradés ou vous pouvez en créer.
Application de couleurs, de traits et de trames 211
Remarque : Une nouvelle trame utilise la couleur actuellement affichée dans la source de couleurs de trame du
panneau Outils.
Utilisez les options de trame du Vérificateur de propriétés ou de la fenêtre contextuelle Options de trame
pour modifier les attributs de trame.
Application d’une trame avec motif
Vous pouvez remplir un objet trajet avec un graphique bitmap appelé texture. Fireworks
comprend plus d douze trames texturée dont Berbère, Feuilles et Bois.
Pour appliquer une trame texturée à un objet sélectionné :
1
Utilisez l’une des méthodes suivantes :
• Choisissez Motif dans le menu déroulant Options de trame du Vérificateur de propriétés.
• Cliquez sur la zone Couleur de trame du panneau Outils, puis sur Options de tame et
choisissez Motif dans le menu déroulant Options de trame.
2
Choisissez le motif dans le menu déroulant correspondant.
Le motif apparaît dans l’objet sélectionné et devient la couleur de trame active.
Ajout d’un motif personnalisé
Vous pouvez également définir un fichier bitmap pour l’utiliser comme texture. Vous pouvez
utiliser les formats de fichier suivants comme motifs : PNG, GIF, JPEG, BMP, TIFF et PICT
(Macintosh uniquement). Lorsqu’un fichier de motif est une image transparente de 32 bits, la
transparence affecte la trame lorsqu’elle est utilisée dans Fireworks. Si une image n’est pas 32 bits,
elle apparaît opaque.
Lorsque vous ajoutez un motif, son nom apparaît dans le menu déroulant Nom de motif de la
fenêtre contextuelle Options de trame.
Pour créer un motif depuis un fichier externe :
1
Affichez les propriétés de l’objet vectoriel dans le Vérificateur de propriétés et choisissez Trame
dans le menu déroulant Options de trame.
2
Cliquez sur la zone Couleur de trame et choisissez Autre dans le menu déroulant des noms de
motifs.
212 Chapitre 8
3
Recherchez le fichier bitmap à utiliser comme nouveau motif, puis cliquez sur Ouvrir.
Le nouveau motif est ajouté au bas de la liste des motifs.
Application d’une trame en dégradé
Les catégories de trame, à l’exception de Aucune, Unie, Motif et Tramage Web sont des trames en
dégradé. Ces trames en dégradé mélangent les couleurs pour créer différents effets.
Objets avec trames en dégradé
Pour appliquer une trame en dégradé à un objet sélectionné :
Choisissez un dégradé dans le menu déroulant Options de trame du Vérificateur de propriétés. La
trame apparaît dans l’objet sélectionné et devient la trame active.
Modification de trame dégradée
Vous pouvez modifier la trame dégradée active en cliquant sur n’importe quelle zone Couleur de
trame et en utilisant la fenêtre contextuelle Modifier le dégradé.
Rampe de couleurs
Aperçu
Fenêtre contextuelle Modifier le dégradé
Pour ouvrir la fenêtre Modifier le dégradé :
1
Sélectionnez un objet ayant une trame dégradée ou choisissez une trame dégradée dans le
menu déroulant Options de trame du Vérificateur de propriétés.
Application de couleurs, de traits et de trames 213
2
Cliquez sur la zone Couleur de trame du Vérificateur de propriétés ou du panneau Outils pour
ouvrir la fenêtre contextuelle.
La fenêtre contextuelle Modifier le dégradé s’ouvre avec le dégradé en cours dans la rampe de
couleurs et l’aperçu.
Pour ajouter une nouvelle couleur ou un nouvel échantillon d’opacité au dégradé, procédez de
l’une des manière suivantes :
• Pour ajouter un nouvel échantillon de couleur, cliquez sur la zone sous la rampe de couleur
dégradée.
• Pour ajouter un échantillon d’opacité, cliquez sur la zone au-dessus de la rampe de couleur
dégradée.
Pour supprimer un échantillon de couleur ou d’opacité du dégradé :
Faites glisser l’échantillon à l’écart de la fenêtre contextuelle Modifier le dégradé.
Pour définir ou changer la couleur d’un échantillon de couleur :
1
Cliquez sur un échantillon.
2
Choisissez une couleur.
Pour définir ou changer la transparence d’un échantillon d’opacité :
1
Cliquez sur l’échantillon d’opacité.
2
Utilisez l’une des méthodes suivantes :
• Faites glisser le curseur de transparence, où 0 correspond à une transparence totale et 100 à une
opacité totale.
• Entrez une valeur de 0 à 100 pour définir l’opactié.
Remarque : L’échiquier apparaît à travers le dégradé dans les zones transparentes.
3
Après avoir modifié le dégradé, appuyez sur Entrée ou cliquez en dehors de la fenêtre
contextuelle Modifier le dégradé. La trame en dégradé apparaît dans les objets sélectionnés et
devient la trame active.
Pour régler la transition entre les couleurs de la trame :
Faites glisser les échantillons de couleur de gauche à droite.
Création de trames ave l’outil Dégradé
L’outil Dégradé appartient au même groupe d’outils que l’outil Pot de peinture. Ce nouvel outil
fonctionne similairement à l’outil Pot de peinture, mais il remplit un objet avec un dégradé au
lieu d’une couleur unie. A l’instar de l’outil Pot de peinture, il conserve les propriétés du dernier
dégradé utilsé.
Pour utiliser l’outil dégradé :
1
Cliquez sur l’outil Pot de peinture dans le panneau Outils et choisissez l’outil Dégradé dans le menu
déroulant.
214 Chapitre 8
2
Choisissez les attributs suivants appropriés dans le Vérificateur de propriétés :
Options de trame :
menu déroulant permettant de choisir un type de dégradé.
Zone Couleur de trame : lorsque vous cliquez dessus, la fenêtre contextuelle Modifier le dégradé
s’affiche pour vous permettre de définir des options de couleur et de transparence.
Bord : détermine si le dégradé à un bord net, anticrénelé ou diffusé. Si vous choisissez un bord
diffusé, vous pouvez déterminer la valeur de la diffusion.
Texture permet
d’accéder à diverse options, telles que Grain, Métal, Hatch, Mesh ou
Sandpaper.
3
Cliquez et faites glisser le pointeur pour définir le point de départ du dégradé ainsi que la
direction et la longeur de la zone dégradée.
Transformation et distorsion de trames
Vous pouvez déplacer, faire pivoter, incliner et modifier la largeur de la trame texturée ou en
dégradé d’un objet. Lorsque vous utilisez l’outil Pointeur ou Dégradé pour sélectionner un objet
avec une trame ou un motif dégradé, des poignées apparaissent autour ou à côté de l’objet. Tirez
sur ces poignées pour ajuster la trame de l’objet.
Utilisez les poignées de la trame pour régler de façon interactive une trame en dégradé ou texturée
Pour déplacer la trame dans l’objet :
Faites glisser la poignée ronde ou cliquez sur un nouvel emplacement dans la trame avec l’outil
Dégradé.
Pour appliquer une rotation à la trame :
Faites glisser les lignes reliant les poignées.
Pour régler la largeur et l’inclinaison de la trame :
Tirez sur une poignée carrée.
Spécification de bords de trame nets, anticrénelés ou avec diffusion
Fireworks permet de définir le bord d’une trame comme une ligne continue régulière nette ou
d’atténuer le bord en le diffusant ou en évitant le crénelage. Par défaut, les bords sont anticrénelés.
L’aspect anticrénelé atténue les bords dentelés pouvant apparaître sur des objets arrondis, tels que
les ellipses et les cercles, en fondant subtilement le bord dans l’arrière-plan.
La diffusion produit cependant un effet fondu perceptible de part et d’autre du bord. Cela confère
au bord un effet estompé ; presque un effet de néon.
Application de couleurs, de traits et de trames 215
Pour changer le bord de trame d’un objet sélectionné :
1
Dans le menu déroulant Bord, procédez de l’une des manières suivantes :
• Cliquez dans le menu déroulant Bord du Vérificateur de propriétés.
• Cliquez successivement dans la zone Couleur de trame du panneau Outils, sur Options de trame
et sur le menu déroulant Bord.
2
Choisissez une option de bord : Bord net, Anticrénelé ou Diffusion.
3
Pour un bord diffusé, choisissez également le nombre de pixels, de part et d’autre du bord, qui
doivent être diffusés.
La valeur par défaut est de 10. Vous pouvez choisir une valeur comprise entre 0 et 100. La
diffusion est proportionnelle à la valeur définie.
Enregistrement d’une trame dégradée personnalisée
Pour enregistrer les paramètres de dégradé en cours sous la forme d’un dégradé personnalisé pour
l’utiliser dans plusieurs documents, créez un style. Pour plus d’informations, voir « Création et
suppression de styles » à la page 256.
Suppression d’une trame
Vous pouvez aisément supprimer les attributs de trame des objets sélectionnés.
Pour retirer une trame d’un objet sélectionné, procédez de l’une des manières suivantes :
• Choisissez Aucune dans le menu déroulant Options de trame de le Vérificateur de propriétés
ou de la fenêtre contextuelle Options de trame.
• Cliquez sur la zone Couleur de trame et sur le bouton Transparente. Cette option supprime les
trames unies.
Ajout d’une texture aux traits et aux trames
Vous pouvez ajouter des effets 3D aux traits et aux trames en ajoutant une texture. Fireworks
dispose de textures, mais vous pouvez également utiliser des textures externes.
216 Chapitre 8
Ajout d’une texture à un trait
Les textures modifient la luminosité du trait, mais non sa teinte ; elles lui confèrent un aspect
moins mécanique, plus organique, comme de la peinture sur surface texturée. Les textures
produisent plus d’effet sur les traits larges. Vous pouvez ajouter une texture à n’importe quel trait.
Fireworks comprend plusieurs textures parmi lesquelles vous pouvez opérer votre choix, telles que
Chiffon, Marée noire et Emeri.
Utilisez les options de trait du Vérificateur de propriétés ou de la fenêtre contextuelle Options de trait
pour ajouter une texture à un trait depinceau.
Le menu déroulant Texture affiche un aperçu de la texture en surbrillance
Pour ajouter une texture au trait d’un objet sélectionné :
1
Pour ouvrir le menu déroulant Texture du trait, procédez comme suit :
• Cliquez sur le menu déroulant Texture du trait du Vérificateur de propriétés.
• Cliquez successivement sur la zone Couleur de trait du Panneau Outils, Options de trait et sur
le menu déroulant Texture.
2
Utilisez l’une des méthodes suivantes :
• Choisissez une texture dans le menu déroulant.
• Choisissez Autre dans le menu déroulant et accédez à un fichier de texture à utiliser comme
texture externe.
Remarque : Vous pouvez utiliser les formats de fichier suivants comme textures : PNG, GIF, JPEG, BMP, TIFF
et PICT (Macintosh uniquement).
3
Entrez un pourcentage compris entre 0 et 100 afin de contrôler la profondeur de la texture.
L’augmentation du pourcentage augmente l’intensité de la texture.
Ajout d’une texture à une trame
Les textures modifient la luminosité de la trame, mais non sa teinte ; elles lui confèrent un aspect
moins mécanique, plus organique. Vous pouvez ajouter une texture à n’importe quelle trame.
Fireworks comprend plusieurs textures parmi lesquelles vous pouvez opérer votre choix, telles que
Chiffon Marée noire et Emeri. Vous pouvez également utiliser des fichiers bitmap comme
textures. Cela permet de créer pratiquement n’importe quel type de texture personnalisée.
Application de couleurs, de traits et de trames 217
Pour ajouter une texture à la trame d’un objet sélectionné :
1
Pour ouvrir le menu déroulant Texture de la trame, procédez de l’une des manières suivantes :
• Cliquez sur le menu déroulant Texture de la trame dans le Vérificateur de propriétés.
• Cliquez sur la zone Couleur de trame du panneau Outils, puis sur le menu déroulant Texture.
2
Utilisez l’une des méthodes suivantes :
• Choisissez une texture dans le menu déroulant.
• Choisissez Autre dans le menu déroulant et accédez à un fichier de texture à utiliser comme
texture externe.
3
Entrez un pourcentage compris entre 0 et 100 afin de contrôler la profondeur de la texture.
L’augmentation du pourcentage augmente l’intensité de la texture.
4
Pour donner un effet de transparence à la trame, choisissez Transparente.
Le pourcentage de texture contrôle également le degré de transparence.
Ajout d’une texture personnalisée
Vous pouvez également utiliser des fichiers bitmap de Fireworks et de d’autres applications. Vous
pouvez utiliser les formats de fichier suivants comme textures : PNG, GIF, JPEG, BMP, TIFF et
PICT (Macintosh uniquement).
Lorsque vous ajoutez une nouvelle texture, son nom apparaît dans le menu déroulant du nom de
trame.
Pour créer une texture depuis un fichier externe :
1
Affichez les propriétés de l’objet dans le Vérificateur de propriétés et choisissez Autre dans l’un
des menus déroulants Nom de la trame.
2
Accédez au fichier bitmap à utiliser comme nouvelle texture et cliquez sur Ouvrir.
La nouvelle texture est ajoutée au bas de la liste Nom de la trame.
218 Chapitre 8
CHAPITRE 9
Utilisation des effets en direct
Les effets en direct Macromedia Fireworks MX Live sont des enrichissements que vous pouvez
appliquer aux objets vectoriels, aux images bitmap et aux textes. Les effets en direct incluent les
biseaux, les estampes, les ombres portées et les néons, la correction de couleur, le flou et le
renforcement. Vous pouvez appliquer des effets en direct aux objets sélectionnés directement
depuis le Vérificateur de propriétés.
Les effets en direct sont mis à jour automatiquement lorsque vous modifiez les objets auxquels ils
sont appliqués. Après avoir appliqué un effet en direct, vous pouvez changer ses options à tout
moment ou changer l’ordre des effets en direct pour tester un effet combiné. Vous pouvez activer
ou désactiver les effets en direct ou les supprimer dans le Vérificateur de propriétés. Lorsque vous
supprimez un effet, l’objet ou l’image reprend son apparence précédente.
Vous disposez, entre autres, des effets en direct suivants Niveaux automatiques, Flou gaussien et
Masque d’accentuation, qui étaient auparavant disponibles uniquement comme plug-ins
irreversibles ou filtres. En outre, vous pouvez ajouter des plug-ins tiers pour les utiliser comme
effets en direct dans Fireworks. Si vous préférez, vous pouvez utiliser ces filtres de manière
taditionnelle à l’aide du menu Filtres. Pour plus d’informations, voir « Réglage de la couleur et du
ton d’un bitmap » à la page 139.
Application directe des effets
Vous pouvez appliquer un ou plusieurs effets en direct aux objets sélectionnés à l’aide du
Vérificateur de propriétés. Chaque fois que vous ajoutez un effet en direct à un objet, il est ajouté
à la liste des effets du menu déroulant du Vérificateur de propriétés. Vous pouvez activer ou
désactiver chaque effet en direct.
Menu déroulant des effets du Vérificateur de propriétés
219
Lorsque vous sélectionnez des objets pour leur appliquer des effets en direct, l’emplacement des
options des effets en direct diffère légèrement selon que la fenêtre du Vérificateur de propriétés est
affichée en totalité ou à moitié :
• Lorsque la totalité de la fenêtre est affichée, utilisez le bouton Ajouter des effets, le bouton
Supprimer l’effet et la liste des effets en direct appliqués figurant dans le Vérificateur de
propriétés.
• Lorsque la moitié de la fenêtre est affichée, cliquez sur Modifier l’effet pour afficher le bouton
Ajouter des effets, le bouton Supprimer l’effet et la liste de effets en direct appliqués.
Remarque : Dans Fireworks, les opérations impliquant des effets en direct supposent que la fenêtre du Vérificateur
de propriétés est affichée en totalité.
Vous pouvez personnaliser chaque effet en direct en fonction de vos préférences. Lorsque vous
choisissez un effet Biseau, Estampe, Ombre ou Néon, une fenêtre contextuelle s’affichée pour vous
permettre de sélectionner les paramètres voulus. Lorsque vous choisissez les effets de correction de
couleurs, des boîtes de dialogue s’ouvrent contenant des commandes pour ajuster les
caractéristiques des couleurs, telles que les niveaux automatiques, la luminosité et le contraste, la
teinte et la saturation, l’inversion des couleurs, les courbes et les trames de couleur. Lorsque vous
choisissez un effet flou ou accentué, l’effet est appliqué directement à l’objet.
Essayez les différents paramètres à votre disposition pour obtenir l’aspect voulu. Pour changer
l’effet ultérieurement, voir « Modification des effets en direct » à la page 224.
Largeur du biseau
Contraste
Adoucissement
Angle du biseau
Bouton de biseau prédéfini
Fenêtre Biseau intérieur
Pour appliquer directement un effet aux objets sélectionnés :
1
Cliquez sur le bouton Ajouter des effets dans le Vérificateur de propriétés, puis choisissez une
effet dans le menu déroulant des effets.
L’effet est ajouté à la liste des effets de l’objet sélectionné.
2
Si une fenêtre contextuelle ou une boîte de dialogue s’affiche, entrez les paramètres de l’effet et
procédez de l’une des manières suivantes :
• Si l’effet en direct a une boîte de dialogue, cliquez sur OK.
• Si l’effet en direct a une fenêtre contextuelle, appuyez sur Entée ou cliquez n’importe où dans
l’espace de travail.
3
Répétez les étapes 1 et 2 pour appliquer d’autres effets en direct.
220 Chapitre 9
Remarque : L’ordre d’application des effets en direct affecte l’ensemble de l’effet. Vous pouvez faire glisser les
effets en direct pour changer leur ordre d’empilage. Pour plus d’informations, voir « Réorganisation des effets en
direct » à la page 224.
Conseil : Pour appliquer un effet en direct pour qu’il n’affecte qu’un ensemble de pixels d’une image, coupez et
collez la sélection de pixels au lieu de créer une image bitmap, sélectionnez-la et appliquez l’effet en direct.
Pour activer ou désactiver un effet appliqué à un objet :
Cochez la case à côté de l’effet dans la liste des effets du Vérificateur de propriétés.
Pour activer ou désactiver tous les effets appliqués à un objet :
Cliquez sur le bouton Ajouter des effets dans le Vérificateur de propriétés, puis choisissez
Options > Tous actifs ou Options > Tous inactifs dans le menu déroulant.
Pour plus d’informations sur la suppression permanente des effets, voir « Suppression des effets en
direct » à la page 225.
Application de bords biseautés
L’application d’un bord biseauté à un objet permet de créer une impression de relief. Vous pouvez
créer un biseau intérieur ou extérieur.
Rectangle avec biseau intérieur et biseau extérieur
Pour appliquer un bord biseauté à un objet sélectionné :
1
Cliquez sur le bouton Ajouter des effets du Vérificateur de propriétés, puis choisissez une
option de biseau dans le menu déroulant :
• Biseau et estampe > Biseau intérieur
• Biseau et estampe > Biseau extérieur.
2
Modifiez les paramètres d’effet dans la fenêtre contextuelle.
3
Cliquez en dehors de la fenêtre ou appuyez sur Entrée pour fermer cette fenêtre.
Application d’estampes
Utilisez l’effet Estampe pour donner l’impression d’une image surélevée ou renfoncée par rapport
à l’arrière-plan.
Objet avec estampe enfoncée et surélevée
Utilisation des effets en direct 221
Pour appliquer un effet de type Estampe :
1
Cliquez sur le bouton Ajouter des effets dans le Vérificateur de propriétés, puis choisissez une
option d’estampe dans le menu déroulant :
• Biseau et estampe > Estampe rapportée.
• Biseau et estampe > Estampe en relief.
2
Modifiez les paramètres d’effet dans la fenêtre contextuelle.
Si vous voulez que l’objet d’origine apparaîsse dans la zone estampée, choisissez Afficher l’objet.
3
Lorsque vous avez terminé, cliquez en dehors de la fenêtre ou appuyez sur Entrée pour fermer
cette fenêtre.
Remarque : Pour assurer la compatibilité à rebours, lorsque l’effet estampe provient d’un document plus ancien,
l’option Afficher l’objet est désactivée.
Application d’ombres et d’effets néon
Le programme Fireworks facilite l’application d’ombres portées, d’ombres intérieures et d’effets
néon aux objets. Spécifiez l’angle de l’ombre pour indiquer la direction de la lumière éclairant
l’objet.
Effets Ombre portée, Ombre intérieure et Effet néon
Pour appliquer une ombre ou une ombre intérieure :
1
Cliquez sur le bouton Ajouter des effets du Vérificateur de propriétés, puis choisissez une
option d’ombre dans le menu déroulant :
• Ombre et néon > Ombre portée.
• Ombre et néon > Ombre intérieure.
2
Modifiez les paramètres d’effet dans la fenêtre contextuelle :
• Faites glisser le curseur Distance pour définir la distance séparant l’ombre de l’objet.
• Cliquez sur le puits de couleurs pour ouvrir la fenêtre contextuelle des couleurs et définir une
couleur d’ombre.
•
•
•
•
Faites glisser le curseur Opacité pour régler le niveau de transparence de l’ombre.
3
Lorsque vous avez terminé, cliquez en dehors de la fenêtre ou appuyez sur Entrée pour fermer
cette fenêtre.
Faites glisser le curseur d’adoucissement pour définir le facteur d’adoucissement de l’ombre.
Utilisez la molette Angle pour définir la direction de l’ombre.
Sélectionnez Emporte-pièce pour masquer l’objet et afficher l’ombre uniquement.
222 Chapitre 9
Pour appliquer un effet néon :
1
Cliquez sur le bouton Ajouter des effets du Vérificateur de propriétés, puis choisissez Ombre et
Néon > Néon.
2
Modifiez les paramètres d’effet dans la fenêtre contextuelle :
• Cliquez sur le puits de couleurs pour ouvrir la fenêtre contextuelle des couleurs et définir une
couleur de néon.
•
•
•
•
Faites glisser le curseur Largeur pour définir la largeur du néon.
3
Lorsque vous avez terminé, cliquez en dehors de la fenêtre ou appuyez sur Entrée pour fermer
cette fenêtre.
Faites glisser le curseur Opacité pour régler le pourcentage de transparence du néon.
Faites glisser le curseur Adoucissement pour définir le facteur d’adoucissement du néon.
Faites glisser le curseur Décalage pour spécifier la distance entre le rayonnement néon et l’objet.
Application de filtres et de plug-ins Photoshop comme effets en direct
Vous pouvez appliquer tous les filtres et plug-ins intégrés du menu Filtres comme effets en direct
en utilisant le Vérificateur de propriétés. Cela vous permet de les modifier ou de les supprimer
d’un objet à tout moment.
Les plug-ins Photoshop 6 et 7 ne sont pas compatibles avec Fireworks MX. Sous Macintosh, les
fichiers tiers fonctionnant sous Mac OS 9 sont pris en charge par Fireworks MX pour Mac OS 9
et les filtres tiers fonctionnant sous Mac OS X sont pris en charge par Fireworks MX pour Mac
OS X.
Remarque : Le menu Xtras des versions précédentes de Fireworks s’appelle désormais Filtres dans Fireworks MX.
Les filtres Fireworks Xtras s’appellent des filtres.
Plug-ins dans le menu Filtres
Lorsque vous installez un plug-in Photoshop dans Fireworks, le plug-in est ajouté au menu Filtres
et au Vérificateur de propriétés. Utilisez le menu Filtres pour n’appliquer les filtres et les plug-ins
Photoshop que si vous êtes certain de ne pas devoir modifier ou supprimer l’effet obtenu. Vous ne
pouvez supprimer un filtre que si la commande Annuler est disponible.
Installation des plug-ins Photoshop
Vous pouvez utiliser le Vérificateur de propriétés pour appliquer des plug-ins Photoshop comme
effets en direct. Certains plug-ins Photoshop ne peuvent pas être utilisés en tant qu’effets en
direct. Vous pouvez également importer des plug-ins Photoshop en pointant sur les plug-ins dans
la boîte de dialogue des préférences. Pour plus d’informations, voir « Préférences de l’onglet
Dossiers » à la page 435.
Lorsque vous partagez un fichier Fireworks où un plug-in Photoshop est appliqué en direct, le
destinataire doit disposer du plug-in sur son ordinateur pour afficher cet effet. Les effets intégrés
de Fireworks, quant eux, sont enregistrés dans le fichier.
Pour installer les plug-ins Photoshop :
1
Cliquez sur le bouton Ajouter des effetss dans le Vérificateur propriétés, puis choisissez
Options > Rechercher les plug-ins.
Utilisation des effets en direct 223
2
Ouvrez le dossier où sont installés les plug-ins Photoshop, puis cliquez sur OK.
3
Redémarrez Fireworks pour charger les plug-ins.
Remarque : Si vous placez les plug-ins dans un autre dossier, recommencez la procédure ci-dessus, ou
choisissez Fichier > Préférences, puis cliquez sur l’onglet Dossiers pour spécifier le chemin des plug-ins.
Redémarrez ensuite Fireworks.
Pour appliquer un plug-in Photoshop à un objet sélectionné en tant qu’effet en direct applicable :
Cliquez sur le bouton Ajouter des effets dans le Vérificateur de propriétés, puis choisissez un effet
dans le sous-menu des options.
Application d’effets à un groupe d’objets
Lorsque vous appliquez un effet à un groupe, cet effet est appliqué à tous les objets du groupe. Si
les objets sont dissociés, ces derniers retrouvent leurs paramètres d’effet d’origine.
Vous pouvez appliquer un effet à un objet d’un groupe d’objets en sélectionnant l’objet avec
l’outil Sous-sélection. Pour plus de détails sur la sélection d’un groupe ou d’objets dans un groupe,
voir « Sélection d’objets dans un groupe » à la page 128.
Modification des effets en direct
Lorsque vous cliquez sur le bouton Informations d’un effet en direct dans le Vérificateur de
propriétés, une fenêtre contextuelle s’ouvre avec les paramètres en cours de l’effet pour vous
permettre de les modifier.
Pour modifier un effet appliqué en direct :
1
Dans le Vérificateur de propriétés, cliquez sur le bouton Informations à côté de l’effet à
modifier.
La fenêtre contextuelle ou la boîte de dialogue appropriée s’ouvre.
Remarque : Si la moitié de la fenêtre du Vérificateur de propriétés est ouverte, cliquez sur Ajouter des effets
pour ouvrir la liste des effets en direct.
2
Sélectionnez les paramètres voulus.
Remarque : Si un effet n’est pas modifiable, le bouton Informations n’est pas disponible. Par exemple, vous ne
pouvez pas modifier l’effet Niveaux automatiques.
3
Cliquez en dehors de la fenêtre ou appuyez sur Entrée.
Réorganisation des effets en direct
Vous pouvez changer l’ordre des effets appliqués à un objet. La réorganisation des effets change la
séquence d’application de ces derniers, ce qui peut changer l’effet combiné.
En général, les effets qui changent l’intérieur d’un objet, tels que l’effet Biseau intérieur, doivent
être appliqués avant les effets affectant l’extérieur. Par exemple, appliquez l’effet Biseau intérieur
avant l’effet Biseau extérieur, Néon ou Ombre.
224 Chapitre 9
Pour réorganiser les effets appliqués à un objet sélectionné :
Faites glisser l’effet vers l’emplacement approprié dans le Vérificateur de propriétés.
Remarque : Les effets figurant en haut de la liste sont appliqués en premier.
Suppression des effets en direct
Vous pouvez supprimer aisément chaque effet ou tous les effets d’un objet.
Pour supprimer un effet unique appliqué à un objet sélectionné :
Sélectionnez l’effet à supprimer dans la liste des effets du Vérificateur de propriétés, puis cliquez
sur le bouton Supprimer les effets.
Pour supprimer tous les effets d’un objet sélectionné :
Cliquez sur le bouton Ajouter des effets dans le Vérificateur de propriétés et choisissez Aucun dans
le menu déroulant.
Création d’effets en direct personnalisés
Vous pouvez enregistrer une combinaison de paramètres d’effets en direct en créant un effet en
direct personnalisé. Tous les effets en direct apparaissent dans le menu déroulant Ajouer des effets
du Vérificateur de propriétés et du panneau des styles. Les effets en direct sont des styles dont
toutes les options de propriétés sont désélectionnée, à l’exception de l’option Effet.
• Pour créer un effet en direct personnalisé, utilisez le Vérificateur de propriétés ou le panneau
Styles.
• Vous pouvez appiquer un effet en direct aux objets sélectionnés dans le menu déroulant
Ajouter des effets ou le panneau Styles.
• Vous pouvez renommer ou supprimer un effet personnalisé dans le panneau Styles.
Pour créer un effet personnalisé dans le Vérificateur de propriétés :
1
Appliquez des paramètres d’effet en direct aux objets sélectionnés. Pour plus d’informations,
voir « Application directe des effets » à la page 219.
2
Cliquez sur le bouton Ajouter des effets du Vérificateur de propriétés, puis choisissez
Options > Enregistrer comme style.
La boîte de dialogue d’ajout de style s’affiche.
3
Tapez le nom du style et cliquez sur OK.
Le nom de l’effet en direct personalisé est ajouté au menu déroulant Ajouter des effets et une
icône de style représentant l’effet en direct est ajoutée dans le panneau Styles.
Pour créer un effet en direct personnalisé à l’aide du panneau des styles :
1
Appliquez des paramètres d’effet en direct aux objets sélectionnés. Pour plus d’informations,
voir « Application directe des effets » à la page 219.
2
Sélectionnez l’option d’ajout de style dans le menu déroulant des options du panneau Styles.
La boîte de dialogue d’ajout de style s’affiche.
Utilisation des effets en direct 225
3
Désélectionnez toutes les propriétés (sauf la propriété Effet) entrez un nom, puis cliquez sur OK.
Le nom de l’effet en direct personalisé est ajouté au menu déroulant Ajouter des effets et une
icône de style représentant l’effet en direct est ajoutée dans le panneau Styles.
Remarque : Si vous choisissez des propriétés supplémentaires dans la boîte de dialogue Nouveau style, le style
ne figure plus dans le menu déroulant Ajouter des effets du Vérificateur de propriétés, bien qu’il reste dans le
panneau Styles sous la forme d’un style type.
Pour appliquer un effet en direct personnalisés à des objets sélectionnés, procédez de l’une des
manières suivantes :
• Cliquez sur le bouton Ajouter des effets dans le Vérificateur de propriétés, puis choisissez l’effet
en direct personnalisé.
• Cliquez sur l’icône de l’effet en direct personnalisé dans le panneau des styles.
Vous pouvez renommer ou supprimer un effet en direct personnalisé comme n’importe quel autre
style du panneau des styles. Pour plus d’informations, voir « Création et suppression de styles » à la
page 256 et « Modification de styles » à la page 257.
Remarque : Vous ne pouvez pas renommer ou supprimer un effet standard de Fireworks.
Enregistrement d’effets en direct sous forme de commandes
Vous pouvez enregistrer et réutiliser un effet en créant une commande à partir de l’effet. Avec le
panneau d’historique, vous pouvez automatiser tous les effets en direct appliqués à un objet en
créant une commande disponible dans le menu Commandes. Vous pouvez utiliser ces
commandes dans un traitement par lot. Pour plus d’informations, voir « Exécution de
commandes à l’aide d’un traitement par lots » à la page 424.
Pour enregistrer des paramètres d’effets sous la forme d’une commande :
1
Appliquez les effets à l’objet.
2
Si l’historique n’est pas visible, choisissez Fenêtre > Historique.
3
Appuyez sur la touche Maj et cliquez sur les actions à enregistrer sous la forme d’une
commande.
4
Utilisez l’une des méthodes suivantes :
• Choisissez la commande Enregistrer sous dans le panneau Historique du menu Options.
• Cliquez sur le bouton Enregistrer situé en bas du panneau Historique.
Bouton Enregistrer
5
Entrez un nom de commande, puis cliquez sur OK pour l’ajouter au menu Commandes.
226 Chapitre 9
CHAPITRE 10
Calques, masquage et fondu
Les calques permettent de diviser un document Macromedia Fireworks en plusieurs plans discrets,
comme si les divers composants de l’illustration étaient tracés sur des couches superposées de
papier calque. Un document peut être composé de plusieurs calques, et chaque calque peut
contenir de nombreux objets. Dans Fireworks, le panneau des calques affiche la liste des calques et
les objets contenus dans chaque calque. Les calques de Fireworks sont équivalents à des calques
créés dans Photoshop 6. Les calques de Photoshop sont équivalents à des objets individuels de
Fireworks.
Le masquage vous permet de contrôler de manière créative les calques et les objets. Vous pouvez
appliquer des masques et des modes de fondu depuis le panneau Calques. Vous pouvez également
créer des masques à l’aide des options des menus Sélectionner et Modifier. Vous pouvez utiliser un
objet vectoriel ou bitmap pour masquer une partie d’une image sous-jacente. Par exemple, si vous
souhaitez masquer une partie d’une photographie pour entourer cette dernière d’une ellipse, vous
pouvez coller une forme elliptique en tant que masque sur la photographique. Toutes les zones
situées à l’extérieur de l’ellipse sont alors masquées et seule reste visible la partie de l’image située à
l’intérieur de l’ellipse.
Les modes de fondu offrent un autre niveau de créativité. Vous pouvez créer des effets uniques en
mélangeant les couleurs d’objets qui sont superposés. Fireworks possède plusieurs modes de fondu
qui permettent d’obtenir les effets désirés.
Utilisation des calques
Chaque objet d’un document est placé sur un calque. Vous pouvez créer des calques avant de
commencer à dessiner ou en ajouter au fur et à mesure de vos besoins. La couche de base, appelée
fond du document, est située au-dessous des calques, et n’est pas un calque en soi. Pour plus
d’informations sur l’utilisation du fond, voir « Modification du document » à la page 97.
Vous pouvez afficher l’ordre d’empilement des calques et des objets dans le panneau Calques. Ils
apparaissent de bas en haut, selon leur ordre d’apparition dans le document. Fireworks superpose
les calques dans leur ordre de création, en plaçant les calques les plus récents en haut de la pile.
L’ordre d’empilement des calques détermine la façon dont les objets d’un calque se superposent
aux objets d’un autre calque. Vous pouvez modifier l’ordre d’empliment des calques et des objets
des calques.
227
Le panneau Calques affiche l’état en cours de tous les calques de l’image actuelle d’un document.
Pour afficher d’autres images, vous pouvez utiliser le panneau Images ou choisir une option dans le
menu déroulant Images, dans la partie inférieure du panneau Calques. Pour plus d’informations,
voir « Utilisation des images » à la page 322.
Le nom du calque actif apparaît en surbrillance dans le panneau Calques. Vous pouvez développer
un calque pour afficher la liste de tous les objets qu’il contient. Ces objets sont présentés sous
forme de vignettes.
Les masques apparaissent également dans le panneau Calques. Pour modifier un masque, sélectionnez
la vignette de ce masque. Vous pouvez également créer des masques bitmap à l’aide du panneau
Claques. Pour plus d’informations sur les masques, voir « Masquage d’images » à la page 233.
Les boutons de contrôle des modes d’opacité et de fondu figurent en haut du panneau Calques.
Pour plus d’informations, voir « Réglage de l’opacité et application des fondus » à la page 254.
Développer/réduire le calque
Afficher/Masquer le calque
Verrouillage et déverrouillage d’un calque
Calque actif
Supprimer le calque
Nouvelle image bitmap
Ajouter le masque
Nouveau calque/Dupliquer
Activation des calques
Lorsque vous cliquez sur un calque ou un objet du calque, le calque devient le calque actif. Les
objets suivants que vous dessinez, collez ou importez se trouvent initialement dans le calque actif.
Pour activer un calque, procédez de l’une des manières suivantes :
• Cliquez sur le nom du calque dans le panneau Calques.
• Sélectionnez un objet de ce calque.
Ajout et suppression de calques
A partir du panneau Calques, vous pouvez ajouter de nouveaux calques, supprimer des calques
inutiles et dupliquer des calques et des objets existants.
Lorsque vous créez un calque, un calque vide est inséré au-dessus du calque sélectionné. Ce
nouveau calque devient le calque actif et apparaît en surbrillance dans le panneau Calques.
Lorsque vous supprimez un calque, le calque qui le précède devient le calque actif.
228 Chapitre 10
La duplication d’un calque créé un nouveau calque contenant les mêmes objets que le calque
sélectionné. Les objets dupliqués conservent l’opacité et le mode de fondu des objets originaux.
Vous pouvez ensuite modifier les objets dupliqués sans modifier l’original.
Pour ajouter un calque, procédez de l’une des manières suivantes :
• Cliquez sur le bouton Nouveau calque/Dupliquer, si aucun calque n’est sélectionné.
• Choisissez Modifier > Insérer > Calque.
• Choisissez Nouveau calque dans le menu Options du panneau Calques et cliquez sur OK.
Pour supprimer un calque, procédez de l’une des manières suivantes :
• Tirez le calque sur l’icône de la poubelle, dans le panneau Calques.
• Sélectionnez le calque et cliquez sur l’icône de la poubelle, dans le panneau Calques.
Pour dupliquer un calque, procédez de l’une des manières suivantes :
• Tirez un calque sur le bouton Nouveau calque/Dupliquer.
• Sélectionnez un calque et choisissez Dupliquer le calque dans le menu Options du panneau
Calques. Indiquez ensuite le nombre d’exemplaires à insérer, ainsi que leur emplacement dans
l’ordre de superposition.
En haut : place les nouveaux calques en haut, dans le panneau Claques. Comme le calque Web
est toujours le calque situé au sommet de la pile, le choix de l’option En haut place le calque
dupliqué immédiatement sous le calque Web.
Avant le calque actif :
place les nouveaux calques au-dessus du calque sélectionné.
Après le calque actif :
place les nouveaux calques en dessous du calque sélectionné.
En bas :
place les nouveaux calques au bas, dans le panneau Calques.
Pour dupliquer un objet :
Maintenez enfoncée la touche Alt (Windows) ou Option (Macintosh) et faites glisser l’objet vers
l’emplacement approprié.
Affichage des calques
Le panneau Calques affiche les objets et les calques dans une structure hiérarchique. Lorsqu’un
document contient de nombreux objets et calques, le panneau Claques peut être encombré et il
devient difficile d’y naviguer. La réduction de l’arborescence des calques permet d’éliminer cet
encombrement. Lorsque vous devez afficher ou sélectionner des objets d’un calque, vous pouvez
développer le calque. Vous pouvez également réduire ou développer simultanément tous les
calques.
Pour développer ou réduire l’arborescence des objets d’un calque :
Cliquez sur le signe plus (+) ou moins (-) (Windows) ou sur le triangle (Macintosh) à gauche du
nom du calque dans le panneau Calques.
Pour développer ou réduire l’arborescence de tous les calques :
Maintenez enfoncée la touche Alt et cliquez sur le signe plus (+) ou moins (-) (Windows), ou
maintenez enfoncée la touche Option et cliquez sur le triangle (Macintosh) à gauche du nom du
claque dans le panneau Calques.
Calques, masquage et fondu 229
Organisation des calques
Vous pouvez organiser les calques et les objets d’un document en les renommant et en changeant
leur disposition dans le panneau Calques. Les objets peuvent être déplacés au sein d’un même
calque, ou d’un calque à l’autre.
Le déplacement des calques et des objets dans le panneau Calques modifie l’ordre des objets dans
le document. Les objets situés en haut d’un calque apparaissent au-dessus des autres objets de ce
calque dans le document. Les objets situés sur le calque de niveau supérieur apparaissent devant
les objets des calques de niveau inférieur.
Remarque : Le panneau Calques défile automatiquement lorsque vous faites glisser un calque ou un objet au-delà
de la limite supérieure ou inférieure de la zone affichable.
Pour affecter un nom à un calque ou un objet :
1
Double-cliquez sur le calque ou l’objet dans le panneau Calques.
2
Tapez le nouveau nom du calque ou de l’objet et appuyez sur Entrée.
Remarque : Il est impossible de renommer le calque Web. Toutefois, vous pouvez attribuer des noms aux objets
Web du calque Web, tels que les découpes et les références. Pour plus d’informations, voir « Utilisation du
calque Web » à la page 232.
Pour déplacer un calque ou un objet :
Faites glisser le calque ou l’objet vers l’emplacement approprié dans le panneau Calques.
Pour déplacer vers un autre emplacement tous les objets sélectionnés sur un calque :
Faites glisser le petit indicateur bleu du calque vers un autre calque.
Tous les objets sélectionnés sur le calque sont transférés simultanément vers l’autre calque.
Pour copier vers un autre emplacement tous les objets sélectionnés sur un calque :
Maintenez enfoncée la touche Alt (Windows) ou Option (Macintosh) et faites glisser le petit
indicateur bleu du calque vers un autre calque.
Tous les objets sélectionnés sur le calque sont alors copiés vers l’autre calque.
230 Chapitre 10
Protection des calques et des objets
Le panneau Calques contient des options permettant de contrôler l’accessibilité des objets.
Vous pouvez protéger les objets du document pour éviter de les sélectionner ou de les modifier par
inadvertance. Le verrouillage d’un calque empêche la sélection et la modification des objets du
calque. La fonction Modification par calque protège les objets de tous calques contre la sélection
ou les modifications intempestives, mais pas ceux du claque actif. Vous pouvez également
contrôler la visibilité des objets et des calques du document à l’aide du panneau Calques.
Lorsqu’un objet ou un calque est masqué dans le panneau Calques, il n’apparaît pas dans le
document et ne peut donc pas être sélectionné ou modifié par inadvertance.
Remarque : Les calques et objets masqués ne sont pas inclus lorsque vous exportez le document. Toutefois, les
objets du calque Web peuvent toujours être exportés, qu’ils soient masqués ou pas. Pour plus d’informations sur
l’exportation, voir « Exportation depuis Fireworks » à la page 356.
Pour verrouiller un calque :
Cliquez sur le carré dans la colonne située immédiatement à gauche du nom du calque.
Une icône de cadenas indique que le calque est verrouillé.
Remarque : Les calques peuvent être verrouillés, mais pas les objets.
Pour verrouiller plusieurs calques :
Dans le panneau Claques, faites glisser le pointeur le long de la colonne Verrouillage.
Pour verrouiller ou déverrouiller tous les calques :
Choisissez Tout verrouiller ou Tout déverrouiller dans le menu Options du panneau Calques.
Pour activer ou désactiver la fonction Modification par calque :
Choisissez Modification par calque dans le menu Options du panneau Calques.
La présence d’une coche signifie que la fonction Modification par calque est activée.
Pour afficher ou masquer un calque ou les objets d’un calque :
Cliquez dans la case de la deuxième colonne qui apparaît à gauche du nom du calque ou du nom
de l’objet.
L’icône représentant un oeil signifie que le calque est visible.
Pour afficher ou masquer plusieurs calques ou plusieurs objets :
Faites glisser le pointeur le long de la colonne Oeil, dans le panneau Claques.
Pour afficher ou masquer tous les calques ou tous les objets :
Choisissez Tout afficher ou Tout masquer dans le menu déroulant Options du panneau Calques.
Fusion d’objets dans le panneau Calques
Si vous travaillez avec des objets bitmap, vous remarquerez que le panneau Calques est vite
encombré. Vous pouvez fusionner les objets dans ce panneau si l’objet sélectionné tout au bas de
la pile se trouve immédiatement au-dessus d’un objet bitmap. Les objets et les bitmaps à fusionner
ne doivent pas être contigus dans le panneau Calques ou se trouver sur le même calque.
Calques, masquage et fondu 231
La fusion vers le bas permet de fusionner tous les objects vectoriels et bitmap sélectionnés avec
l’objet bitmap qui se trouve juste au-dessous de l’objet sélectionné tout au bas de la pile. Vous
obtenez un seul objet bitmap. Les objets vectoriels et bitmap fusionnés ne peuvent pas être
modifiés et les possibilités de modification des objets vectoriels sont perdues.
Pour fusionner des objets :
1
Dans le panneau Calques, sélectionnez l’objet ou les objets à fusionner avec un objet bitmap.
Appuyez sur la touche Maj et cliquez pour sélectionner plusieurs objets.
Conseil : Vous pouvez fusionner les contenu d’un claque sélectionné avec un objet bitmap correspondant à
l’objet le plus haut dans le calque immédiatement situé sous le calque sélectionné.
2
Utilisez l’une des méthodes suivantes :
• Choisissez Fusionner vers le bas dans le menu Options du panneau Calques.
• Choisissez Modifier > Fusionner vers le bas.
• Choisissez Fusionner vers le bas dans le menu contextuel qui s’affiche lorsque vous cliquez sur
le bouton droit (Windows) ou maintenez enfoncée la touche Contrôle (Macintosh) et cliquez
sur les objets sélectionnés du document.
Le ou les objets sélectionnés sont fusionnés avec l’objet bitmap. Vous obtenez un seul objet bitmap.
Remarque : La commande Fusionner vers le bas n’affecte pas les découpes, les références, ni les boutons.
Partage des calques
Vous pouvez partager un calque entre toutes les images dans un document. Cela permet de mettre
à jour un objet sur un calque et de procéder à la mise à jour automatique de cet objet dans toutes
les images. Cette fonction est particuilière utile si vous désirez que des objets tels que les éléments
d’arrière-plan apparaissent dans toutes les images d’une animation.
Pour partager un calque sélectionné dans toutes les images, procédez de l’une des manières
suivantes :
• Choisissez Partager ce calque dans le menu Options du panneau Calques.
• Double-cliquez sur le nom du calque dans le panneau Calques et choisissez Utiliser par toutes
les images.
Utilisation du calque Web
Le calque Web est un calque spécial qui apparaît au niveau supérieur de chaque document. Il est
destiné à contenir les objets Web, tels que les découpes et les références, qui prennent en charge
l’interactivité des documents Fireworks exportés. Pour plus d’informations sur les objets Web, voir
Chapitre 12, « Découpes, survols et références », à la page 269.
Il est impossible de renommer, départager, dupliquer ou supprimer le calque Web. Vous ne
pouvez pas non plus fusionner les objets du calque Web. Il est toujours partagé entre toutes les
images, et les objets Web sont visibles sur chaque image.
Pour renommer une découpe ou une référence dans le calque Web :
1
Double-cliquez sur la découpe ou la référence dans le panneau des calques.
2
Tapez le nouveau nom et cliquez en dehors de la fenêtre ou appuyez sur Entrée.
Remarque : Lorsque vous renommez une découpe, ce nom est utilisé lors de l’exportation de cette découpe.
232 Chapitre 10
Importation de groupes de calques Photoshop
Lorsque des fichiers Photoshop contenant des calques sont importés dans Fireworks, chaque
calque est placé en tant qu’objet séparé dans un même calque de Fireworks. Les calques groupés
sont importés individuellement, comme s’ils avaient été dissociés dans Photoshop avant d’être
importés dans Fireworks. L’effet de détourage des calques groupés de Photoshop est perdu lors de
l’importation.
Masquage d’images
Comme le nom l’indique, les masques permettent de cacher ou d’afficher des parties d’un objet
ou d’une image. Vous pouvez appliquer un grand nombre d’effets créatifs aux objets en utilisant
toutes les techniques de masquage disponibles.
Vous pouvez créer un masque faisant office de découpoir dans d’autres objets en recadrant ou
détourant des objets ou des images sous-jacents avec son trajet. Vous pouvez également créer un
masque faisant office de fenêtre ombrée qui permet d’afficher ou de masquer des parties des objets
qui se trouvent en dessous du maque en dessinant sur le masque. Ce type de masque utilise les
nuances de son aspect d’échelle de gris pour déterminer la visibilité des objets sélectionnés. Vous
pouvez également créer un masque qui utilise sa propre transparence pour affecter la visibilité.
Vous pouvez créer un masque à l’aide du panneau Calques ou du menu Edition, Sélection ou
Modification Après avoir créé un masque, vous pouvez ajuster la position de la sélection masquée
sur le document ou modifier l’apparence d’un masque en modifiant l’objet masque. Vous pouvez
également appliquer des transformations au masque en totalité ou à chaque composant d’un
masque.
Les masques
Le masque peut être un objet vectoriel ou bitmap. L’utilisation d’un objet vectoriel sous la forme
d’un masque produit un masque vectoriel et l’utilisation d’un objet bitmap produit un masque
bitmap. Vous pouvez également utiliser plusieurs objets ou des groupes d’objets pour créer un
masque.
Masques vectoriels
Si vous avez utilisé d’autres applications d’illustration vectorielle, telles que Macromedia
FreeHand, vous maîtrisez peut-être les masques vectoriels qu’on désigne parfois par chemins de
recadrage ou collages intérieurs. Le trajet d’un masque vectoriel recadre ou rogne les objets sousjacents dans la forme de son trajet pour créer un effet cookie-cutter.
Masque vectoriel appliqué à l’aide de son contour de trajectoire
Calques, masquage et fondu 233
Lorsque vous créez un masque vectoriel, une vignette de masque avec une icône de plume
apparaît dans le panneau des calques pour indiquer que vous avez créé un masque vectoriel.
Vignette de masque vectoriel dans le panneau des calques
Lorsqu’un masque vectoriel est sélectionné, le Vérificateur de propriétés affiche des informations
sur l’application du masque. La moitié inférieure de la fenêtre du Vérificateur de propriétés
contient d’autres propriétés permettant de modifier le trait et la trame de l’objet masque.
Propriétés de masque vectoriel dans le Vérificateur de propriétés
Par défaut, les masques vectoriels sont appliqués en utilisant le contour de trajectoire, mais vous
pouvez également les appliquer en appliquant d’autres méthodes. Pour plus d’informations, voir
« Changement de l’application des masques » à la page 248.
Remarque : Les masques vectoriels créés dans Fireworks 4 et appliqués à l’aide de l’aspect d’échelle de gris sont
importés dans Fireworks MX sous forme de masques bitmap non modifiables.
Masques bitmap
Si vous avez l’habitude de travailler avec Photoshop, vous devez maîtriser les masques de calques.
Les masques bitmap Fireworks sont similaires aux masques de calques par le fait que les pixels
d’un masque affectent la visibilité des objets sous-jacents. Toutefois, les masques bitmap
Fireworks sont beaucoup plus souples à utiiser ; vous pouvez changer aisément leur application en
utilsant l’aspect de l’échelle de gris ou leur propre transparence. En outre, le Vérificateur des
propriétés Fireworks facilite l’accès aux propriétés des masques et aux options des outils bitmap et
simplifie considérablement la modification des masques. Lorsqu’un masque est sélectionné, le
Vérificateur de propriétés affiche des propriétés non seulement pour le masque sélectionné, mais
également pour les outils de masque que vous pouvez utiliser pour modifier le masque.
234 Chapitre 10
Objets et masque bitmap d’origine appliqués avec l’aspect d’échelle de gris
Vous pouvez appliquer des masques bitmap de deux manières :
• Utilisation d’un objet existant pour masquer d’autres objets. Cette technique est similaire à
l’application des masques vectoriels.
• Création d’un masque vide. Au début, les masques vides sont totalement transparents ou
totalement opaques. Un masque transparent (ou blanc) montre l’ensemble de l’objet masqué et
un masque opaque (ou noir) cache l’ensemble de l’objet masqué. Vous pouvez utiliser les outils
bitmap pour dessiner sur un objet ou modifier un objet masque en révélant ou en cachant les
objets masqués sous-jacents.
Lorsque vous créez un masque bitmap, le Vérificateur de propriétés affiche les informations sur
l’application du masque. Si vous choisissez un outil bitmap lorsqu’un masque bitmap est
sélectionné, le Vérificateur de propriétés affiche les propriétés du masque et des options de l’outil
sélectionné pour simplifier la modification du masque.
Propriétés de masque bitmap dans le Vérificateur de propriétés lorsqu’un outil bitmap est sélectionné.
Par défaut, la plupart des masques bitmap sont appliqués en utilisant leur aspect d’échelle de gris,
mais vous pouvez également les appliquer à l’aide de leur couche alpha. Pour plus d’informations,
voir « Changement de l’application des masques » à la page 248.
Remarque : Les masques d’échelle de gris Fireworks MX se comportent désormais pratiquement comme les
masques des autres applications graphiques. Les masques d’échelle de gris créés dans Fireworks MX diffèrent de
ceux créés dans les versions précédentes de Fireworks dans la mesure où le blanc révèle toujours les objets
masqués, alors que le noir les masque. Cela diffère de la version Fireworks 4 dans laquelle un masque noir révèle les
objets sous-jacents et un masque blanc les masque.
Calques, masquage et fondu 235
Création d’un masque à partir d’un objet existant
Un masque peut être créé à partir d’un objet existant. Lorsqu’il est utilisé comme masque, le
contour de trajectoire d’un objet vectoriel peut être utilisé pour couper ou recadrer d’autres objets.
Lorsque vous utilisez un objet bitmap en tant masque, la luminosité de ses pixels ou de sa
transparence affecte la visibilité des autres objets.
Masquage des objets à l’aide de la commande Coller en tant que masque
La commande Coller en tant que masque permet de créer des masques en masquant un objet ou
un groupe d’objets à l’aide d’un autre objet. La commande crée un masque vectoriel ou bitmap
selon le type d’objet masque que vous utilisez. Lorsque vous utilisez un objet vectoriel en tant que
masque, la commande Coller en tant que masque crée un masque vectoriel qui recadre ou coupe
les objets masqués à l’aide du contour de trajectoire de l’objet vectoriel. Lorsqu’une image bitmap
est utilisée en tant que masque, la commande Coller en tant que masque crée un masque bitmap
qui affecte la visibilité des objets masqués en utilisant les valeurs d’échelle de gris de l’objet
bitmap.
Pour créer un masque à l’aide de la commande Coller en tant que masque :
1
Sélectionnez l’objet à utiliser comme masque. Maintenez enfoncée la touche Maj et
sélectionnez les différents objets.
Remarque : L’utilisation de plusieurs objets en tant que masque crée toujours un masque vectoriel, même si les
deux objets sont des bitmaps.
2
Positionnez la sélection pour qu’elle recouvre l’objet ou le groupe d’objets à masquer.
L’objet ou les objets à utiliser comme masque peuvent se trouver devant ou derrière l’objet ou
les groupes d’objets à masquer.
3
Choisissez Edition > Couper pour couper l’objet ou les objets à utiliser comme masque.
236 Chapitre 10
4
Sélectionnez l’objet ou le groupe à masquer.
Si vous masquez plusieurs objets, les objets doivent être groupés. Pour plus d’informations sur
le regroupement des objets, voir « Association d’objets » à la page 127.
5
Pour coller des masques, procédez de l’une des manières suivantes :
• Choisissez Edition > Coller en tant que masque.
• Choisissez Modification > Masque > Coller en tant que masque.
Masque appliqué
Masque dans le panneau des calques
Calques, masquage et fondu 237
Masquage des objets à l’aide de la commande Coller dedans
Si vous utilisez Macromedia FreeHand, vous devez connaître la commande de création de
masques Coller dedans. Cette commande crée un masque vectoriel ou bitmap en fonction du
type d’objet masque que vous utilisez. La commande Coller dedans crée un masque en
remplissant un trajet fermé ou un objet bitmap avec d’autres objets : graphique vectoriel, texte ou
images bitmap. Le trajet lui-même est parfois appelé trajet de détourage et les éléments qu’ils
contiennent s’appellent contenu ou collages intérieurs. Le contenu qui s’étend au-delà du trajet de
détourage est masqué.
La commande Coller dedans de Fireworks produit un effet similaire à celui de la commande
Coller en tant que masque, mais présente deux différences :
• Avec la commande Coller dedans, l’objet que vous coupez et collez est l’objet à masquer.
Comparez cette commande avec la commande Coller en tant que masque dans laquelle l’objet
que vous coupez et collez est l’objet masque.
• Avec les masques vectoriels, La commande Coller dedans affiche le trait et la trame de l’objet
masque lui-même. Par défaut, le trait et la trame d’un masque vectoriel ne sont pas visibles
lorsque vous utilisez la commande Coller en tant que masque. Toutefois, vous pouvez activer
ou désactiver l’affichage du trait ou de la trame d’un masque vectoriel à l’aide du Vérificaeur de
propriétés. Pour plus d’informations, voir « Changement de l’application des masques » à la
page 248.
Pour créer un masque à l’aide de la commande Coller dedans :
1
Sélectionnez l’objet ou les objets à utiliser comme contenu à coller dedans.
2
Positionnez l’objet ou les objets pour qu’ils recouvrent l’objet de destination du collage.
Remarque : L’ordre d’empilage n’est pas important dès lors que les objets à utiliser comme contenu à coller
dedans reste sélectionnés. Ces objets peuvent se trouver au-dessus ou en dessous de l’objet masque dans le
panneau des calques.
3
Choisissez Edition > Couper pour placer les objets dans le Presse-papiers.
238 Chapitre 10
4
Sélectionnez l’objet dans lequel vous voulez coller le contenu. Cet objet sera utilisé comme
masque ou trajet de détourage.
5
Choisissez Edition > Coller dedans.
Les objets collés apparaissent dans l’objet masque ou sont détourés par le masque.
Utilisation de texte comme masque
Les masques de texte sont un type de masque vectoriel et sont appliqués de la même manière que
les masques utilisant des objets existants. Vous utilisez simplement le texte comme un objet
masque. La méthode la plus courante pour appliquer un masque de texte consiste à utiliser son
contour de trajectoire. Cependant, vous pouvez appliquer un masque de texte en utilisant son
aspect d’échelle de gris.
Masque de texte appliqué en utilisant son contour de trajectoire
Calques, masquage et fondu 239
Pour plus d’informations, voir « Création d’un masque à partir d’un objet existant » à la page 236.
Pour plus d’informations sur les différentes méthodes d’application de masques, voir
« Changement de l’application des masques » à la page 248.
Masquage d’objets à l’aide du panneau Calques
La méthode 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.
Remarque : Pour plus d’informations sur la création de masques opaques (noirs) vides, voir « Masquage d’objet à
l’aide des commandes Révéler la sélection et Masquer la sélection » à la page 241.
Pour créer un masque bitmap à l’aide du panneau Calques :
1
2
3
4
5
6
Sélectionnez l’objet à masquer.
Cliquez sur le bouton Ajouter masque, dans la partie inférieure du panneau Calques.
Un masque vide est appliqué à l’objet sélectionné. Le panneau Calques affiche une vignette de
masque représentant le masque vide.
Si l’objet masqué est un objet bitmap, utilisez également l’un des outils Cadre de sélection ou
lasso pour créer une sélection de pixels.
Choisissez un outil de dessin bitmap dans le panneau Outils, tel que Pinceau, Crayon, Pot de
peinture ou Dégradé.
Définissez les options appropriées de l’outil dans le Vérificateur de propriétés.
Le masque étant sélectionné, dessinez sur le masque vide. Dans les zones où vous dessinez,
l’objet masqué sous-jacent est masqué.
Image d’origine; masque appliqué
Masque tel qu’il apparaît dans le panneau Calques
240 Chapitre 10
Remarque : Pour plus d’informations sur la modification de l’apparence d’un masque bitmap en dessinant
dessus, voir « Modification de l’aspect d’un masque » à la page 247.
Masquage d’objet à l’aide des commandes Révéler la sélection et Masquer la
sélection
Le sous-menu Modification > Masque contient plusieurs options permettant d’appliquer des
masques bitmap vides aux objets :
Tout révéler applique un masque transparent vide à un objet qui révèle la totalité de l’objet. Cette
commande revient à cliquer sur le bouton Ajouter masque dans le panneau Calques.
Tout masquer applique
un masque opaque vide à un objet qui cache la totalité de l’objet.
Révéler la sélection peut
être utilisé uniquement avec des sélection de pixels. La commande
applique un masque de pixels transparent en utilisant la sélection de pixels en cours. Les autres
pixels de l’objet bitmap sont cachés.
Masquer la sélection peut être utilisé uniquement avec des sélections de pixels. La commande
applique un masque de pixels opaque en utilisant la sélection de pixels en cours. Les autres pixels
de l’objet bitmap sont visibles.
Pour créer un masque à l’aide des commandes Tout révéler et Masquer tout :
1
Sélectionnez l’objet à masquer.
2
Exécutez ensuite l’une des opérations suivantes pour créer le masque :
• Choisissez Modification > Masque > Tout révéler pour afficher l’objet.
• Choisissez Modification > Masque > Masquer tout pour cacher l’objet.
3
Choisissez un outil de dessin bitmap dans le panneau Outils, tel que Pinceau, Crayon ou Pot de
peinture.
4
Définissez les options appropriées de l’outil dans le Vérificateur de propriétés.
Si vous avez exécuté la commande Masquer tout, vous devez choisir une couleur autre que le
noir.
5
Dessinez sur le masque vide. Dans les zones dans lesquelles vous dessinez, l’objet masqué sousjacent sera masqué ou visible, selon le type de masque que vous avez appliqué.
Remarque : Pour plus d’informations sur la modification de l’apparence d’un masque bitmap en dessinant
dessus, voir « Modification de l’aspect d’un masque » à la page 247.
Pour créer un masque à l’aide des commandes Révéler la sélection et Masquer la sélection :
1
Choisissez la baguette magique ou un outil Cadre de sélection ou Lasso dans le panneau
Outils.
Calques, masquage et fondu 241
2
Sélectionnez des pixels dans un bitmap.
Image d’origine ; pixels sélectionnés à l’aide de la baguette magique
3
Exécutez ensuite l’une des opérations suivantes pour créer le masque :
• Choisissez Modification > Masque > Révéler la sélection pour afficher la zone définie par les
pixels sélectionnés.
• Choisissez Modification > Masque > Masquer la sélection pour masquer la zone définie par les
pixels sélectionnés.
Résultats des commandes Révéler la sélection et Masquer la sélection
Un masque bitmap est appliqué à l’aide de la sélection de pixels. Vous pouvez modifier
davantage le masque pour afficher ou masquer les pixels restants de l’objet masqué en utilisant
les outils bitmap du panneau Outils. Pour plus d’informations sur la modification de
l’apparence d’un masque bitmap en dessinant dessus, voir « Modification de l’aspect d’un
masque » à la page 247.
242 Chapitre 10
Importation et exportation de masques de calques Photoshop
Dans Photoshop, vous pouvez masquer les images à l’aide de masques de calques ou de calques
groupés. Fireworks vous permet d’importer des images employant des masques de calques sans
perdre la possibilité de les modifier, et sans altérer leur apparence. Les masques de calques sont
importés sous forme de masques bitmap.
Les masques Fireworks peuvent être également exportés vers Photoshop. Ils sont alors convertis en
masques de calques Photoshop. Si l’objet masqué contient du texte que vous voulez rendre
modifiable dans Photoshop, vous devez choisir Conserver le caractère modifiable et sacrifier
l’aspect lors de l’exportation.
Remarque : Si le texte est utilisé comme objet masque, il est converti en bitmap et ne peut plus être modifié comme
texte une fois importé dans Photoshop.
Regroupement d’objets pour former un masque
Vous pouvez grouper au moins deux objets pour créer un masque. Le premier objet devient l’objet
masque.
Vous pouvez grouper des objets comme masques bitmap ou vectoriels. L’ordre d’empilage
détermine le type de masque appliqué. Si le premier objet est un objet vectoriel, le résultat est un
masque vectoriel. S’il correspond à un objet bitmap, le résultat est un masque bitmap.
Remarque : Pour plus d’informations sur les masques vectoriels et bitmap, voir « Les masques » à la page 233.
Pour grouper des objets pour créer un masque :
1
Maintenez enfoncée la touche Maj et cliquez sur deux objets superposés au moins.
Vous pouvez sélectionner les objets sur différents calques.
Calques, masquage et fondu 243
2
Choisissez Modification > Masque > Grouper en tant que masque.
Modification de masques
Vous pouvez modifier les masques de différentes manières. En modifiant la position, la forme et la
couleur d’un masque, vous pouvez changer la visibilité des objets masqués. Vous pouvez
également changer le type d’un masque et son application. En outre, les masques peuvent être
remplacés, désactivés ou supprimés.
Les modifications apportées à un masque sont immédiatement visibles, même si l’objet masque
n’est pas visible sur le document. La vignette de masque du panneau Calques indiquent les
modifications apportées au masque.
Les objets masqués peuvent être également modifiés. Vous pouvez réorganiser les objets masqués
sans déplacer le masque. Vous pouvez également ajouter des objets masqués à un groupe de
masques existant.
Sélection de masques et d’objets masqués à l’aide de vignettes de masques
Les masques et les objets masqués peuvent être aisément identifiés et sélectionnés à l’aide des
vignettes, dans le panneau Calques. Les vignettes vous permettent aisément de sélectionner et de
modifier uniquement le masque ou les objets masqués sans affecter les autres objets.
Lorsque vous sélectionnez la vignette d’un masque, son icône apparaît à côté du masque dans le
panneau des calques et les propriétés du masque figurent dans le Vérificateur des propriétés dans
lequel vous pouvez les modifier.
244 Chapitre 10
Pour sélectionner un masque :
Cliquez sur la vignette du masque dans le panneau des calques.
Lorsque vous sélectionnez une vignette de masque dans le panneau des calques, la vignette
apparaît en jaune.
Pour sélectionner des objets masqués :
Cliquez sur la vignette de l’objet masqué dans le panneau des calques.
Lorsque vous sélectionnez une vignette d’objet masqué dans le panneau des calques, la vignette
apparaît en bleu clair.
Sélection de masques et d’objets masqués à l’aide de l’outil Sous-sélection
Utilisez l’outil Sous-sélection pour sélectionner des masques et des objets masqués individuels sur
le document sans sélectionner les autres composants du masque.
Lorsque vous sélectionnez un masque ou un objet masqué avec l’outil Sous-sélection, le
Vérificateur de propriétés affiche les propriétés de l’objet sélectionné.
Pour sélectionner un masque ou un objet masqué de manière indépendante :
Cliquez avec l’outil Sous-sélection sur l’objet dans le document.
Lorsqu’ils sont sélectionnés, les masques apparaissent en jaune et les objets masqués en bleu clair.
Déplacement de masques et d’objets masqués
Vous pouvez repositionner les masques et les objets masqués. Vous pouvez les déplacer ensemble
ou individuellement.
Pour déplacer un masque et ses objets masqués simultanément :
1
A l’aide de l’outil Pointeur, sélectionnez le masque dans le document.
2
Faites glisser le masque vers son nouvel emplacement, sans tirer la poignée de déplacement
pour ne pas déplacer l’objet masqué du masque séparément.
Calques, masquage et fondu 245
Pour déplacer les masques et les objets masqués indépendamment en les déliant :
1
Cliquez sur l’icône de lien du masque dans le panneau des calques.
Cette opération permet de dissocier les masques des objets masqués pour les déplacer
indépendamment.
icône Lien
2
Sélectionnez la vignette de l’objet (masque ou objets masqués) à déplacer.
3
A l’aide de l’outil Pointeur, faites glisser l’objet ou les objets masqués sur le document.
Remarque : Si vous déplacez des objets masqués, tous les objets masqués sont déplacés simultanément.
4
Cliquez entre les vignettes des masques dans le panneau des calques. Cette opération permet de
relier les objets masqués au masque.
Pour déplacer un masque indépendamment à l’aide de sa poignée de déplacement :
1
A l’aide de l’outil Pointeur, sélectionnez le masque dans le document.
2
Choisissez l’outil Sous-sélection et faites glisser la poignée de déplacement du masque vers le
nouvel emplacement.
Pour déplacer les objets masqués indépendamment du masque à l’aide de la poignée de
déplacement :
1
A l’aide de l’outil Pointeur, sélectionnez le masque dans le document.
2
Faites glisser la poignée de déplacement vers le nouvel emplacement.
246 Chapitre 10
Les objets sont déplacés sans modifier la position du masque.
Remarque : S’il existe plusieurs objets masqués, tous les objets masqués sont déplacés simultanément.
Pour déplacer les objets masqués indépendamment les uns des autres :
Cliquez avec l’outil Sous-sélection sur l’objet pour le sélectionner, puis faites glisser l’objet.
C’est la seule méthode permettant de sélectionner et de déplacer un objet masqué sans affecter les
autres objets masqués.
Modification de l’aspect d’un masque
En modifiant la forme et la couleur d’un masque, vous pouvez changer la visibilité des objets
masqués.
Vous pouvez modifier la forme d’un masque bitmap en dessinant dessus avec les outils bitmap. Il
est possible de modifier la forme d’un masque vectoriel en déplaçant les points de l’objet masqué.
Lorsqu’un masque est appliqué avec son aspect d’échelle de gris, vous pouvez modifier ses
couleurs pour changer l’opacité des objets masqués sous-jacents. L’utilisation de couleurs de demiton sur un masque d’échelle de gris rend les objets masqués translucides. Les couleurs claires
affichent les objets masqués et les couleurs sombres les masquent et affichent l’arrière-plan.
Vous pouvez également modifier un masque en lui ajoutant des objets masques. En outre, les
outils de transformation peuvent être également utiliser pour modifier les masques.
Pour modifier la forme d’un masque sélectionné, procédez de l’une des manières suivantes :
• Dessinez sur le masque bitmap avec n’importe quel outil de dessin bitmap.
• A l’aide de l’outil Sous-sélection, déplacez les points d’un objet masque vectoriel.
Pour modifier la couleur d’un masque sélectionné, procédez de l’une des manières suivantes :
• Pour les masques bitmap en échelle de gris, utilisez les outils bitmap pour dessiner sur le
masque en utilisant diverses valeurs d’échelle de gris.
• Pour les masques vectoriels en échelle de gris, changez la couleur de l’objet masque.
Remarque : Utilisez des couleurs claires pour afficher les objets masqués et des couleurs sombres pour les
cacher.
Pour modifier un masque en ajoutant des objets masque :
1
Choisissez Edition > Couper pour couper l’objet ou les objets sélectionnés à ajouter.
Calques, masquage et fondu 247
2
Sélectionnez la vignette de l’objet masqué dans le panneau des calques.
3
Choisissez Edition > Coller en tant que masque.
4
Choisissez Ajouter lorsqu’un message vous demande si vous voulez remplacer le masque ou y
ajouter des objets.
L’objet ou les objets sont ajoutés au masque.
Pour modifier un masque à l’aide des outils de transformation :
1
A l’aide de l’outil Pointeur, sélectionnez le masque dans le document.
2
Dans le sous-menu Modification > Transformer, choisissez un outil ou une commande de
transformation pour appliquer une transformation au masque. Pour plus d’informations sur
l’utilisation des outils de transformation, voir « Transformation et distorsion d’objets
sélectionnés et sélections » à la page 123.
La transformation est appliquée au masque et à ses objets masqués.
Remarque : Pour appliquer une transformation à l’objet masqué uniquement, déliez-le d’abord des autres objets
masque du panneau des calques, puis exécutez la transformation.
Changement de l’application des masques
Vous pouvez utiliser le Vérificateur de propriétés pour vous assurer que vous modifiez un masque et
pour identifier le type de masque que vous utilisez. Lorsqu’un masque est sélectionné, le Vérificateur
de propriétés permet de changer de méthode d’application du masque. Si la fenêtre du Vérificateur de
propriétés est réduite, cliquez sur la flèche d’extension pour afficher toutes les propriétés.
Par défaut, les masques vectoriels sont appliqués avec leur contour de trajectoire. Le contour de
trajectoire ou le texte est utilisé comme masque. Vous pouvez également afficher le trait et la
trame du masque. Cela revient à utiliser la commande Coller dedans pour créer des masques. Pour
plus d’informations, voir « Création d’un masque à partir d’un objet existant » à la page 236.
Masque vectoriel appliqué avec son contour de trajectoire et avec l’option Afficher la trame et le trait
activée
248 Chapitre 10
En appliquant un masque bitmap avec son canal alpha, vous pouvez créer un masque qui
ressemble à un masque vectoriel appliqué avec son contour de trajectoire. Lorsque vous appliquez
un masque avec son canal alpha, la transparence de l’objet masque affecte la visibilité de l’objet à
masquer.
Masque appliqué avec son canal alpha
Les masques vectoriels et bitmap peuvent être appliqués avec leur aspect d’échelle de gris. Par
défaut, les masques bitmap sont appliqués avec leur aspect d’échelle de gris. Lorsque vous
appliquez un masque avec son aspect d’échelle de gris, la luminosité des pixels détermine le
pourcentage d’affichage de l’objet masqué. Les pixels clairs laissent apparaître l’objet masqué. Les
pixels sombres du masque dissimulent l’image et laissent apparaître l’arrière-plan. L’application de
masques avec leur aspect d’échelle de gris crée des effets intéressants si l’objet masque contient un
motif ou une trame de dégradé.
Masque vectoriel avec une trame de motif appliqué avec son aspect d’échelle de gris
Vous pouvez également convertir les masques vectoriels en masques bitmap, mais vous ne pouvez
pas convertir des masques bitmap en masques vectoriels.
Pour plus d’informations sur les masques vectoriels et bitmap, voir « Les masques » à la page 233.
Pour appliquer un masque vectoriel avec son contour de trajectoire :
Si un masque vectoriel est sélectionné, choisissez Contour de trajectoire dans le Vérificateur de
propriétés.
Calques, masquage et fondu 249
Pour afficher le trait et la trame d’un masque vectoriel :
Dans le Vérificateur de propriétés, choisissez Afficher la trame et le trait, si le masque vectoriel
sélectionné a été appliqué avec son contour de trajectoire.
Pour appliquer un masque avec son canal alpha :
Si un masque bitmap est sélectionné, choisissez Canal alpha dans le Vérificateur de propriétés.
Pour appliquer un masque vectoriel ou bitmap avec son aspect d’échelle de gris :
Si un masque est sélectionné, choisissez Aspect échelle de gris dans le Vérificateur de propriétés.
Pour convertir un masque vectoriel en masque bitmap :
1
Dans le panneau Calques, sélectionnez la vignette de l’objet masque.
2
Choisissez Modification > Fusionner la sélection.
Ajout d’objets à une sélection masquée
Vous pouvez ajouter plusieurs objets à une sélection masquée existante.
Pour ajouter des objets masqués à une sélection masquée :
1
Choisissez Edition > Couper pour couper l’objet ou les objets sélectionnés à ajouter.
2
Dans le panneau Calques, sélectionnez la vignette de l’objet masqué.
3
Choisissez Edition > Coller dedans.
L’objet ou les objets sont ajoutés aux objets masqués.
Remarque : L’exécution de la commande Coller dedans sur un masque existant ne permet pas d’afficher le trait
et la trame de l’objet masque, à moins que le masque d’origine ait été appliqué avec son trait et sa trame.
Remplacement, désactivation et suppression de masques
Vous pouvez remplacer un masque par un nouvel objet masque. Vous pouvez également
désactiver ou supprimer un masque. La désactivation d’un masque cache le masque
temporairement. La suppression le supprime définitivement.
Pour remplacer un masque :
1
Choisissez Edition > Couper pour couper l’objet ou les objets sélectionnés à utiliser comme
masque.
2
Dans le panneau Calques, sélectionnez la vignette de l’objet masqué, puis choisissez Edition >
Coller en tant que masque.
3
Cliquez sur Remplacer lorsqu’un message vous demande si vous voulez remplacer ou ajouter le
masque existant.
Le masque objet est remplacé par le nouveau.
Pour désactiver ou activer un masque sélectionné, procédez de l’une des manières suivantes :
• Choisissez Désactiver le masque ou Activer le masque dans le menu Options du panneau
Calques.
250 Chapitre 10
• Choisissez Modification > Masque > Désactiver le masque.
Un X rouge apparaît sur la vignette du masque lorsqu’il est désactivé. Cliquez sur X pour
activer le masque.
Pour suppprimer un masque sélectionné :
1
Pour supprimer le masque, procédez de l’une des manières suivantes :
• Choisissez Supprimer le masque dans le menu Options du panneau Calques.
• Choisissez Modification > Masque > Supprimer le masque.
• Tirez la vignette du masque sur l’icône de la poubelle, dans le panneau Calques.
2
Avant de supprimer le masque, indiquez si vous voulez appliquer ou annuler l’effet du masque
sur les objets masqués :
Appliquer permet
de conserver les modifications que vous effectuez dans l’objet, mais le
masque ne peut plus être modifié. Si l’objet à masquer est un objet vectoriel, le masque et
l’objet vectoriel sont convertis en image bitmap.
Rejeter permet
d’annuler tous les changements effectués et restaure l’état d’origine de l’objet.
Annuler annule
la suppression et laisse le masque intact.
Fondu et transparence
La création d’une image composite est une technique consistant à faire varier la transparence ou
l’interaction des couleurs de plusieurs objets superposés. Dans Fireworks, les modes de fondu
permettent de créer des images composites. Les modes de fondu permettent également de
contrôler l’opacité des objets et des images.
Les modes de fondu
Le choix d’un mode de fondu permet de l’appliquer à tout l’aspect des objets sélectionnés. Les
objets d’un document ou d’un calque peuvent avoir des modes de fondu différents de ceux des
autres objets du document ou du calque.
Lorsque des objets ayant des modes de fondu différents sont associés, ces modes sont remplacés par le
mode de fondu du groupe. La dissociation des objets restaure le mode de fondu individuel de chacun
de ces objets.
Un mode de fondu contient les éléments suivants :
La couleur de fondu est
L’opacité est
la couleur à laquelle est appliquée le mode de fondu.
le degré de transparence à appliquer au mode de fondu.
La couleur de base est
la couleur des pixels sous la couleur de fondu.
La couleur résultante est
le résultat de l’effet du mode de fondu sur la couleur de base.
Voici les divers modes de fondu de Fireworks :
Normal aucun
mode de fondu n’est appliqué.
Multiplicateur multiplie
la couleur de base par la couleur de fondu, ce qui produit des couleurs
plus sombres.
Multiplicateur multiplie
la couleur inverse de la couleur de fondu par la couleur de base, ce qui
produit un effet blanchissant.
Calques, masquage et fondu 251
Foncer sélectionne
la couleur la plus dense, entre la couleur de fondu et la couleur de base, pour
l’utiliser comme couleur résultante. Seuls sont remplacés les pixels qui sont plus clairs que la
couleur de fondu.
Eclaircir sélectionne
la couleur la plus claire, entre la couleur de fondu et la couleur de base, pour
l’utiliser comme couleur résultante. Seuls sont remplacés les pixels qui sont plus sombres que la
couleur de fondu.
Différence soustrait la couleur de fondu de la couleur de base, ou la couleur de base de la couleur
de fondu. La couleur la moins lumineuse est soustraite de la couleur la plus lumineuse.
Teinte combine
la valeur de teinte de la couleur de fondu avec la luminance et la saturation de la
couleur de base afin de créer la couleur résultante.
Saturation combine la saturation de la couleur de fondu avec la luminance et la teinte de la
couleur de base afin de créer la couleur résultante.
Couleur combine la teinte et la saturation de la couleur de fondu avec la luminance de la couleur
de base afin de créer la couleur résultante, tout en préservant les niveaux de gris pour les
monochromes et en modifiant la teinte des images en couleur.
Luminosité combine la luminance de la couleur de fondu avec la teinte et la saturation de la couleur
de base.
Inverser inverse
Nuance ajoute
la couleur de base.
du gris à la couleur de base.
Effacer supprime
252 Chapitre 10
tous les pixels de la couleur de base, y compris ceux de l’image d’arrière-plan.
Exemples de mode de fondu
Image d’origine
Normal
Multiplicateur
Ecran
Foncer
Eclaircir
Différence
Teinte
Saturation
Couleur
Luminosité
Inverser
Nuance
Effacer
Calques, masquage et fondu 253
Réglage de l’opacité et application des fondus
Vous pouvez utiliser le Vérificateur de propriétés ou le panneau Calques pour régler l’opacité des
objets sélectionnés et appliquer des modes de fondu. Une opacité de 100 rend un objet
totalement opaque. La valeur 0 (zéro) donne un objet complètement transparent.
Vous pouvez également définir un mode de fondu et une opacité avant de dessiner un objet.
Pour définir un mode de fondu et une opacité avant de dessiner un objet :
Après avoir sélectionné l’outil approprié dans le panneau Outils, définissez les options de fondu et
d’opacité dans le Vérificateur de propriétés avant de dessiner l’objet.
Remarque : Les options de fondu et d’opacité ne sont pas disponibles avec tous les outils.
Pour définir un mode de fondu et un niveau d’opacité sur des objets existants :
1
Entre deux objets superposés, sélectionnez celui qui se trouve au-dessus de l’autre.
2
Choisissez une option de fondu dans le menu déroulant Mode de fondu du Vérificateur de
propriétés ou du panneau Calques.
3
Choisissez une valeur avec le curseur, dans la zone Opacité, ou tapez une valeur dans le champ.
Pour définir un mode de fondu et un niveau d’opacité par défaut à appliquer aux objets que vous
dessinez :
1
Choisissez Sélection > Aucune sélection pour éviter d’appliquer un mode de fondu et une
opacité par inadvertance.
2
Après avoir sélectionné un outil de dessin vectoriel ou bitmap, choisissez un mode de fondu et
un niveau d’opacité dans le Vérificateur de propriétés.
Le mode de fondu et le niveau d’opacité que vous choisissez seront utilisés par défaut pour tous
les nouveaux objets que vous dessinez avec cet outil.
Effet en direct de la couleur de trame
Fireworks dispose également d’une fonction d’effets en direct qui permet de régler la couleur d’un
objet en modifiant son opacité ou son fondu. Cette fonction, appelé Couleur de trame, produit le
même effet que la superposition d’un objet sur un autre objet utilisant un niveau d’opactité et un
fondu différents. Pour plus d’informations sur l’effet en direct de la couleur de trame, voir
Chapitre 9, « Utilisation des effets en direct », à la page 219.
254 Chapitre 10
CHAPITRE 11
Utilisation des styles,
des symboles et des adresses URL
Macromedia Fireworks MX fournit trois panneaux qui permettent de conserver et de réutiliser
des styles, des symboles et des adresses URL. Les styles sont stockés dans le panneau Styles, les
symboles dans le panneau Bibliothèque et les adresses URL dans le panneau URL. Par défaut, ces
trois panneaux sont placés dans le groupe de panneaux Actifs.
Le panneau Styles contient un jeu de styles Fireworks prédéfinis. En outre, si vous avez créé une
combinaison de traits, de trames et d’autres attributs que vous voulez réutiliser, vous pouvez
enregistrer ces attributs sous forme de style. Plutôt que de recréer ces attributs à chaque fois, il
suffit de les enregistrer dans le panneau Styles et d’appliquer ensuite cette combinaison d’attributs
à d’autres objets.
Fireworks dispose de trois types de symboles : symbole graphique, d’animation et de bouton.
Chaque type possède des caractéristiques exclusives pour une utilisation spécifique. Vous pouvez
créer de nouveaux symboles, dupliquer, importer et modifier des symboles à l’aide du panneau
Bibliothèque. Pour toute information sur les fonctions spécifiques intégrées aux symboles
d’animation et de bouton, voir Chapitre 14, « Création d’animations », à la page 317 et Chapitre
13, « Création de boutons et de menus déroulants », à la page 295.
Une adresse URL, ou Uniform Resource Locator (localisateur uniforme de ressources), est
l’adresse d’une page ou d’un fichier spécifique sur l’Internet. Si vous utilisez la même URL à
plusieurs reprises, vous pouvez l’ajouter au panneau URL. Vous pouvez organiser vos URL et les
grouper en bibliothèques d’URL.
Utilisation des styles
Vous pouvez enregistrer et réutiliser un ensemble prédéfini d’attributs de trame, de trait, d’effet et
de texte, en créant un style. Lorsque vous appliquez un style à un objet, celui-ci reprend les
caractéristiques de ce style.
255
Fireworks possède de nombreux styles prédéfinis. Vous pouvez ajouter, modifier ou supprimer des
styles. Le CD-ROM de Fireworks et le site Web de Macromedia proposent de nombreux autres
styles prédéfinis que vous pouvez importer dans Fireworks. Vous pouvez également exporter des
styles et les partager avec d’autres utilisateurs de Fireworks, ou importer des styles depuis d’autres
documents Fireworks.
Remarque : Les styles ne peuvent pas être appliqués aux objets bitmap.
Application d’un style
Le panneau Styles permet de créer, de stocker et d’appliquer des styles à des objets ou à du texte.
Panneau Styles
Lorsque vous appliquez un style à un objet, vous pouvez modifier ce style par la suite sans affecter
l’objet original. Fireworks ne garde pas la trace du style que vous avez appliqué à un objet. Si vous
supprimez un style personnalisé, vous ne pouvez plus le récupérer. En revanche, si vous supprimez
l’un des styles fournis avec Fireworks, vous pouvez le récupérer à l’aide de la commande
Réinitialiser les styles dans le menu Options du panneau Styles. Toutefois, une réinitialisation des
styles supprimera les styles personnalisés que vous avez créés.
Pour appliquer un style à un objet ou à un bloc de texte :
1
Choisissez Fenêtre > Styles pour afficher le panneau Styles.
2
Dans le panneau Styles, cliquez sur le nom d’un style.
Création et suppression de styles
Vous pouvez créer un style basé sur les attributs d’un objet sélectionné. Le style sera affiché dans le
panneau Styles.
Vous pouvez également supprimer des styles du panneau Styles.
Les attributs suivants peuvent être enregistrés dans un style :
• Type de remplissage et couleur, y compris des attributs de motifs, de textures et de dégradé de
vecteur tels que l’angle, la position et l’opacité
256 Chapitre 11
• Type de trait et couleur
• Effets
• Attributs de texte tels que la police, la taille du point, le style (gras, italique ou souligné),
l’alignement, l’anticrénelage, le crénage automatique, l’échelle horizontale, le crénage et
l’interlignage
Pour créer un nouveau style :
1
Créez ou sélectionnez un objet vectoriel ou du texte avec les attributs de trait, de trame, d’effet
ou de texte désirés.
2
Cliquez sur le bouton Nouveau style dans la partie inférieure du panneau Styles.
3
Dans la boîte de dialogue Nouveau Style, choisissez les attributs devant être enregistrés comme
faisant partie du style.
Remarque : Pour enregistrer d’autres attributs de texte non listés, tels que l’alignement, l’anticrénelage, le
crénage automatique, l’échelle horizontale, le crénage et l’interlignage, choisissez l’option Texte autre.
4
Nommez le style, si vous le désirez, et cliquez sur OK.
Une icône représentant le style apparaît dans le panneau Styles.
Pour créer un nouveau style basé sur un style existant :
1
Appliquez le style existant à l’objet sélectionné.
2
Modifiez les attributs de cet objet.
3
Enregistrez ces attributs en créant un nouveau style, comme décrit dans la procédure
précédente.
Pour supprimer un style :
1
Dans le panneau Styles, cliquez sur le nom d’un style.
Appuyez sur la touche Maj et cliquez pour sélectionner des styles multiples ; appuyez sur la
touche Contrôle (Windows) ou sur Commande (Macintosh) et cliquez pour sélectionner des
styles multiples non contigus.
2
Cliquez sur le bouton Supprimer les styles dans le panneau Styles.
Modification de styles
Vous pouvez changer les attributs contenus dans un style en modifiant le style à partir du panneau
Styles.
Pour modifier un style :
1
Choisissez Sélection > Aucune sélection pour désélectionner tous les objets du document.
2
Dans le panneau Styles, double-cliquez sur le nom d’un style.
3
Dans la boîte de dialogue Modifier le style, choisissez ou désactivez les composants des
attributs à appliquer. La boîte de dialogue Modifier le style possède les mêmes options que la
boîte de dialogue Nouveau style. Pour plus de détails sur la sélection d’attributs à inclure dans
un style, voir « Création et suppression de styles » à la page 256.
4
Cliquez sur OK pour appliquer les modifications au style.
Utilisation des styles, des symboles et des adresses URL 257
Exportation et importation de styles
Il pourrait être souhaitable de partager des styles avec d’autres utilisateurs de Fireworks afin de
gagner du temps et de conserver une cohérence. Vous pouvez partager des styles en les exportant
afin de les utiliser sur d’autres ordinateurs.
Pour exporter des styles :
1
Dans le panneau Styles, cliquez sur le nom d’un style.
Appuyez sur la touche Maj et cliquez pour sélectionner des styles multiples ; appuyez sur la
touche Contrôle (Windows) ou Commande (Macintosh) et cliquez pour sélectionner des styles
multiples non contigus.
2
Choisissez Exporter des styles dans le menu Options du panneau Styles.
3
Indiquez un nom et un emplacement pour le document qui contiendra les styles enregistrés.
4
Cliquez sur Enregistrer.
Pour importer des styles :
1
Choisissez Importer des styles dans le menu Options du panneau Style.
2
Choisissez le document de styles à importer.
Tous les styles de ce document de styles sont importés et placés directement après le style
sélectionné dans le panneau Styles.
Utilisation des styles par défaut
Si vous voulez supprimer tous les styles personnalisés du panneau Styles et restaurer tous les styles
par défaut qui ont été supprimés, vous pouvez réinitialiser le panneau Styles à son état par défaut.
Vous pouvez également changer la taille des icônes affichées dans le panneau Styles.
Pour réinitialiser le panneau Styles avec les styles par défaut :
Choisissez Réinitialiser les styles dans le menu Options du panneau Styles.
Remarque : Une réinitialisation des styles supprimera les styles personnalisés que vous aurez enregistrés.
Pour modifier la taille des icônes d’aperçu des styles :
Choisissez Grandes icônes dans le menu Options du panneau Styles, pour passer des icônes de
grande taille aux icônes de petite taille, et réciproquement.
Application d’attributs sans création d’un style
Vous pouvez copier des attributs d’un objet et les appliquer à d’autres objets, sans créer un
nouveau style dans le panneau Styles. Vous pouvez utiliser cette méthode pour appliquer
rapidement des attributs à un objet si vous ne comptez pas réutiliser ces attributs sur d’autres
objets. Les attributs peuvent être copiés et appliqués, y compris les attributs de remplissage, de
trait, d’effet et de texte.
Pour copier les attributs d’un objet et les appliquer à d’autres objets :
1
Sélectionnez l’objet dont vous voulez copier les attributs.
2
Choisissez Edition > Copier.
258 Chapitre 11
3
Déselectionnez l’objet original, puis sélectionnez le ou les objets auxquels vous voulez
appliquer les nouveaux attributs.
4
Choisissez Edition > Coller les attributs.
Les objets sélectionnés héritent des mêmes attributs que l’objet original.
Utilisation de symboles
Fireworks dispose de trois types de symboles : symbole graphique, d’animation et de bouton.
Chaque type possède des caractéristiques exclusives pour une utilisation spécifique. Les
occurrences sont des représentations d’un symbole Fireworks. Lorsque l’objet utilisé pour le
symbole (l’objet original) est modifié, les occurrences (copies) changent automatiquement pour
refléter les modifications apportées au symbole.
Les symboles sont utiles pour réutiliser un élément graphique. Vous pouvez placer des occurrences
dans plusieurs documents Fireworks et conserver l’association avec le symbole. Les symboles sont
utiles pour créer des boutons et animer des objets sur plusieurs images. Pour plus d’informations
sur les fonctions supplémentaires intégrées aux fonctions d’animation et de bouton, voir
« Création de symboles d’animations » à la page 318 et « Création d’un symbole de bouton » à la
page 295.
Création d’un symbole
Pour créer des symboles graphique, d’animation et de bouton, choisissez Edition > Insérer. Vous
pouvez créer un symbole à partir d’un objet, d’un bloc de texte ou d’un groupe, puis les organiser
dans le panneau Bibliothèque. Pour placer des occurrences dans un document, il suffit de les faire
glisser du panneau Bibliothèque vers le document.
Pour créer un nouveau symbole à partir d’un objet sélectionné :
1
Sélectionnez l’objet et choisissez Modification > Symbole > Convertir en symbole.
2
Dans le champ Nom de la boîte de dialogue Propriétés du symbole, tapez le nom du symbole.
3
Choisissez un type de symbole (Graphisme, Animation ou Bouton), puis cliquez ensuite sur OK.
Le symbole apparaît dans la bibliothèque, l’objet sélectionné devient une occurrence du
symbole et le Vérificateur de propriétés affiche les options du symbole.
Pour créer ex nihilo un symbole :
1
Utilisez l’une des méthodes suivantes :
• Choisissez Edition > Insertion > Nouveau symbole.
• Choisissez Nouveau symbole dans le menu Options du panneau Bibliothèque.
2
Choisissez un type de symbole (Graphisme, Animation ou Bouton), puis cliquez ensuite sur OK.
Selon le type de symbole que vous choisissez, l’éditeur de symboles ou l’éditeur de bouton
apparaît.
3
Créez le symbole à l’aide des outils du panneau Outils, puis fermez l’éditeur.
Pour plus d’informations, voir « Création d’un symbole de bouton » à la page 295 et « Création
de symboles d’animations » à la page 318.
Utilisation des styles, des symboles et des adresses URL 259
Mise en place d’occurrences
Vous pouvez placer les occurrences d’un symbole dans le document actuel.
Pour placer une occurrence :
Faites glisser un symbole du panneau Bibliothèque vers le document actif.
Occurrence d’un symbole dans le document
Modification de symboles
Vous pouvez modifier un symbole dans l’éditeur de symboles, qui modifie automatiquement
toutes les occurrences associées.
Remarque : Pour la plupart des types de modification, la modification d’une occurrence affecte son symbole et
toutes les autres occurrences. Il existe toutefois des exceptions. Pour plus d’informations, voir « Modification
d’occurrences » à la page 261.
Pour modifier un symbole et toutes ses occurrences :
1
Utilisez l’une des méthodes suivantes pour ouvrir l’éditeur de symboles :
• Double-cliquez sur une occurrence.
• Sélectionnez une occurrence et choisissez Modification > Symbole > Modifier le symbole.
2
Modifiez le symbole et fermez la fenêtre.
Le symbole et toutes les occurrences associées reprennent ces modifications.
Pour renommer un symbole :
1
Double-cliquez sur le nom du symbole dans le panneau Bibliothèque.
2
Modifiez le nom dans la boîte de dialogue Propriétés du symbole, et cliquez sur OK.
Pour dupliquer un symbole :
1
Sélectionnez le symbole dans le panneau Bibliothèque.
2
Dans le menu des options du panneau Bibliothèque, choisissez Dupliquer.
Pour changer un type de symbole :
1
Double-cliquez sur le nom du symbole dans la Bibliothèque.
2
Choisissez une autre option de type de symbole.
Pour sélectionner tous les symboles inutilisés dans le panneau Bibliothèque :
Choisissez Sélectionner les éléments non utilisés dans le menu Options du panneau Bibliothèque.
260 Chapitre 11
Pour supprimer un symbole :
1
Sélectionnez le symbole dans le panneau Bibliothèque.
2
Dans le menu Options du panneau Bibliothèque, choisissez Supprimer.
3
Cliquez sur Supprimer. Le symbole et toutes ses occurrences sont supprimés.
Modification d’occurrences
Lorsque vous double-cliquez sur une occurrence afin de la modifier, vous modifiez en fait le
symbole dans l’éditeur de symboles ou dans l’éditeur de boutons. Pour modifier uniquement
l’occurrence active, vous devez rompre le lien entre l’occurrence et le symbole. Cela rompt de
manière définitive la relation entre les deux éléments et les modifications futures qui seront
apportées au symbole n’affecteront pas l’occurrence précédente.
Les symboles de bouton possèdent plusieurs fonctions pratiques permettant de conserver la
relation symbole-occurrence pour un groupe de boutons, tandis qu’un texte de bouton et une
adresse URL unique sont assignés à chaque occurrence. Pour plus d’informations, voir
« Modification des symboles de bouton » à la page 301.
Rupture du lien d’un symbole
Vous pouvez modifier une occurrence sans toucher au symbole ni aux autres occurrences, en
rompant auparavant le lien entre cette occurrence et son symbole.
Pour séparer une occurrence d’un symbole :
1
Sélectionnez l’occurrence.
2
Choisissez Modification > Symbole > Séparer.
L’occurrence sélectionnée devient un groupe. Le symbole qui apparaît dans le panneau
Bibliothèque n’est plus associé à ce groupe. Après séparation du symbole, l’occurrence d’un
bouton antérieur perd les caractéristiques du symbole de son bouton, et une occurrence de
l’animation antérieure perd les caractéristiques de son symbole d’animation.
Modification des propriétés d’une occurrence
Les propriétés d’une occurrence peuvent être modifiées dans le Vérificateur de propriétés sans
affecter le symbole ou d’autres occurrences :
•
•
•
•
•
Mode de fondu
Opacité
Effets
Largeur et hauteur
Coordonnées X et Y
Remarque : Les occurrences de bouton possèdent des propriétés supplémentaires pouvant être modifiées sans
affecter le symbole. Pour plus d’informations sur la modification des occurrences de bouton, voir « Modification des
symboles de bouton » à la page 301.
Pour modifier les propriétés d’une occurrence sans affecter le symbole ou rompre le lien du symbole :
1
Sélectionnez l’occurrence.
2
Modifiez les propriétés de l’occurrence dans le Vérificateur de propriétés.
Utilisation des styles, des symboles et des adresses URL 261
Importation et exportation de symboles
Le panneau Bibliothèque conserve les symboles d’animation, de graphisme et de bouton que vous
créez dans le document actuel. Il conserve également les symboles que vous importez dans le
document actuel. Le panneau Bibliothèque est spécifique aux documents, mais vous pouvez
utiliser les symboles d’une bibliothèque dans plusieurs documents Fireworks en important et en
exportant, en coupant et en collant, ou en effectuant un glisser-déposer.
Vous pouvez importer des symboles d’autres bibliothèques, y compris des bibliothèques
contenant des symboles préparés dans Macromedia Fireworks et des bibliothèques contenant des
symboles que vous, ou une autre personne, a préalablement exportés. Inversement, si vous avez
créé des symboles que vous désirez réutiliser ou partager, vous pouvez exporter vos propres
bibliothèques de symboles. Lorsque vous exportez une bibliothèque de symboles, elle est exportée
sous la forme d’un fichier PNG.
Importation de symboles
Fireworks MX possède des bibliothèques de symboles dans le sous-menu Edition > Bibliothèques,
à partir duquel vous pouvez importer des symboles d’animation préparés, des symboles de
graphisme et des symboles de bouton, ainsi que des barres de navigation et des thèmes de
symboles multiples. En utilisant ces symboles, vous pouvez créer rapidement une page Web
sophistiquée contenant des éléments de navigation avancés sans avoir besoin de créer des
symboles originaux.
Pour importer un ou plusieurs symboles préparés à partir d’une bibliothèque de symboles
Fireworks :
1
Ouvrez un document Fireworks.
2
Choisissez Edition > Bibliothèques, puis choisissez une bibliothèque :
Animations ouvre
Puces ouvre
un ensemble de symboles animés.
un ensemble de symboles graphiques ressemblant à différents types de puces.
Boutons ouvre
un ensemble de symboles de boutons Fireworks à 2, 3 et 4 états.
Thèmes ouvre une liste de symboles d’animations, de graphiques et de boutons. Chaque thème se
compose de trois symboles ayant une conception et un nom identiques et dont les couleurs
coordonnées permettent de les utiliser ensemble.
Autre affiche
une boîte de dialogue Ouvrir, à partir de laquelle vous pouvez ouvrir des fichiers
PNG de bibliothèques de symboles préalablement exportés. Pour plus d’informations, voir la
procédure suivante.
En outre, vous pouvez importer des symboles de fichiers PNG de bibliothèques préalablement
exportés et localisés sur votre disque dur, un CD ou un réseau. Pour plus d’informations sur
l’exportation de symboles, voir « Exportation de symboles » à la page 263.
Pour importer des symboles d’un autre fichier dans le document actif :
1
Utilisez l’une des méthodes suivantes :
• Choisissez Importer des symboles dans le menu Options du panneau Bibliothèque.
• Choisissez Edition > Bibliothèques > Autre.
2
Naviguez jusqu’au dossier qui contient le fichier, sélectionnez-le et cliquez sur Ouvrir.
262 Chapitre 11
3
Sélectionnez les symboles à importer, et cliquez sur Importer.
Les symboles importés apparaissent dans le panneau Bibliothèque.
Vous pouvez également importer et exporter individuellement des symboles vers et à partir des
panneaux Bibliothèque de plusieurs documents en effectuant un glisser-déposer ou bien un
copier-coller avec les occurrences.
Pour importer un symbole en effectuant un glisser-déposer ou un copier-coller, utilisez l’une des
méthodes suivantes :
• A partir du document contenant le symbole, faites glisser l’occurrence d’un symbole vers le
document de destination.
• Copiez l’occurrence d’un symbole dans le document contenant le symbole, puis collez-le dans
le document de destination.
Le symbole est importé dans le panneau Bibliothèque du document de destination et conserve
un lien avec le symbole du document original. Pour plus d’informations, voir « Mise à jour de
symboles et d’occurrences exportés dans plusieurs documents » à la page 264.
Exportation de symboles
Si, dans un document Fireworks, vous avez créé ou importé des symboles que vous voulez
enregistrer afin de les réutiliser dans d’autres documents ou de les partager avec d’autres
personnes, vous pouvez utiliser le menu Options du panneau Bibliothèque afin de les exporter
dans un fichier PNG. Vous pouvez ensuite importer les symboles en naviguant jusqu’au fichier
PNG qui contient les symboles en utilisant le sous-menu Edition > Bibliothèques. Pour plus
d’informations, voir « Importation de symboles » à la page 262.
Pour exporter des symboles :
1
Dans le menu Options du panneau Bibliothèque, choisissez Exporter des symboles.
2
Sélectionnez les symboles à exporter, et cliquez sur Exporter.
3
Choisissez un emplacement, indiquez un nom pour le fichier de symboles, et cliquez sur
Enregistrer.
Fireworks enregistre les symboles dans un seul fichier PNG.
Utilisation des styles, des symboles et des adresses URL 263
Mise à jour de symboles et d’occurrences exportés dans plusieurs
documents
Le symbole original conserve son lien vers tous les symboles exportés dans d’autres documents, de
telle sorte que vous pouvez changer les propriétés de symbole et d’occurrence dans tous les
documents si vous modifiez le symbole dans le document original.
Pour mettre à jour tous les symboles et toutes les occurrences exportés :
1
Dans le document original, double-cliquez sur une occurrence pour ouvrir l’éditeur de
symboles approprié, modifiez le symbole et fermez l’éditeur.
2
Enregistrez le fichier.
3
Dans le document vers lequel le symbole a été exporté, sélectionnez le symbole dans le panneau
Bibliothèque.
4
Choisissez Mettre à jour dans le menu Options du panneau Bibliothèque.
Remarque : Pour mettre à jour tous les symboles exportés, sélectionnez tous les symboles dans le panneau
Bibliothèque et choisissez Mettre à jour.
Vous pouvez dissocier automatiquement le symbole exporté et le document original, en modifiant
le symbole dans le document actuel. La rupture du lien permet de modifier le symbole exporté
indépendamment du symbole original.
Pour rompre le lien entre un symbole exporté et le symbole original :
Dans le document vers lequel le symbole a été exporté, double-cliquez sur une occurrence du
symbole afin d’ouvrir l’éditeur de symboles approprié, modifiez le symbole et fermez l’éditeur.
Le lien entre le symbole du document actif et le symbole original est rompu.
Remarque : Fireworks ne vous avertit pas de l’imminence d’une rupture du lien du symbole original. Avant de
modifier un symbole qui apparaît dans plusieurs documents, assurez-vous que vous connaissez le symbole qui se
trouve dans le document original.
Utilisation des URL
L’affectation d’une adresse URL à un objet Web crée un lien vers un fichier tel qu’une page Web.
Vous pouvez affecter des adresses URL à des objets références, boutons et découpes. Lorsque vous
devez utiliser une URL à plusieurs reprises, vous pouvez créer une bibliothèque d’URL à partir du
panneau URL, puis enregistrer les URL dans cette bibliothèque. Le panneau URL permet
d’ajouter, modifier et organiser vos URL.
Par exemple, si votre site Web contient plusieurs boutons de navigation permettant de revenir à la
page d’accueil, ajoutez l’adresse URL de cette dernière au panneau URL. Sélectionnez l’URL dans
la bibliothèque d’URL, puis affectez cette URL à chaque bouton de navigation. Utilisez la
fonction Rechercher et remplacer pour modifier une URL dans plusieurs documents (voir
« Recherche et remplacement » à la page 413).
264 Chapitre 11
Les bibliothèques d’URL sont disponibles pour l’ensemble des documents de Fireworks et sont
enregistrées entre deux sessions.
Panneau URL
Création d’une bibliothèque d’URL
Vous pouvez regrouper les URL dans des bibliothèques. En étant regroupées, les URL relevant du
même domaine sont ainsi plus faciles à retrouver. Vous pouvez enregistrer les URL dans la bibliothèque
d’URL par défaut, URLs.htm, ou dans les nouvelles bibliothèques d’URL que vous créez.
URLs.htm et toute nouvelle bibliothèque que vous créez sont conservées sur votre disque dur,
dans le dossier des bibliothèques d’URL. L’emplacement exact de ce dossier varie en fonction du
système d’exploitation. Pour plus d’informations, voir « Utilisation des fichiers de configuration »
à la page 439.
Pour créer une nouvelle bibliothèque d’URL :
1
Choisissez Nouvelle bibliothèque d’URL dans le menu Options du panneau URL.
2
Indiquez le nom de la bibliothèque dans la zone de texte, puis cliquez sur OK.
Le nom de la nouvelle bibliothèque apparaît dans le menu contextuel Bibliothèque du panneau
URL.
Pour ajouter une nouvelle URL à une bibliothèque d’URL :
1
Choisissez une bibliothèque dans le menu contextuel Bibliothèque.
2
Tapez une adresse d’URL dans le champ Lien.
3
Cliquez sur le bouton Plus (+).
Ajout d’une URL
Le bouton Plus (+) ajoute l’URL courante à la bibliothèque.
Utilisation des styles, des symboles et des adresses URL 265
Vous pouvez améliorer l’organisation de vos URL en n’ajoutant que celles qui sont utilisées dans
votre document.
Pour ajouter simultanément une URL à la bibliothèque lorsque vous affectez cette URL à un objet
Web :
1
Sélectionnez l’objet.
2
Pour spécifier l’adresse de l’URL, procédez de l’une des manières suivantes :
• Choisissez Ajouter une URL dans le menu Options du panneau URL, tapez une adresse URL
absolue ou relative et cliquez sur OK.
• Tapez une adresse d’URL dans le champ Lien. Cliquez sur le bouton Plus (+).
L’URL apparaît dans le panneau URL. Voir « Affectation d’adresses URL » à la page 285 et
« Définition de l’URL d’un symbole ou d’une occurrence de bouton » à la page 303.
Pour ajouter les URL utilisées à une bibliothèque d’URL :
1
Choisissez une bibliothèque dans le menu contextuel Bibliothèque.
2
Choisissez Ajouter les URL utilisées à la bibliothèque dans le menu Options du panneau URL.
Pour supprimer une URL dans le panneau URL :
Cliquez sur le bouton Supprimer l’URL dans la partie inférieure du panneau URL.
Pour supprimer de la bibliothèque toutes les URL non utilisées :
1
Choisissez Supprimer les URL inutilisées dans le menu Options du panneau URL.
2
Cliquez sur OK.
Modification d’une URL
Vous pouvez modifier facilement des URL à partir du panneau URL. Vous pouvez modifier une
seule occurrence d’une URL, ou alors, vous pouvez faire en sorte que vos modifications affectent
l’ensemble du document.
Pour modifier une URL :
1
Sélectionnez l’adresse URL à modifier dans le panneau des URL.
2
Choisissez Modifier une URL dans le menu Options du panneau URL.
3
Modifiez l’adresse URL. Si vous désirez mettre ce lien à jour dans tout le document, activez
l’option Changer toutes les occurrences dans le document.
URL absolues et relatives
Lorsque vous saisissez une URL dans le panneau URL, vous pouvez indiquer une URL absolue ou
relative.
• Si vous établissez un lien vers une page Web n’appartenant par à votre site, vous devez spécifier
une URL absolue.
• Par contre, si vous établissez un lien vers une page Web figurant dans votre site, vous pouvez spécifier
une URL absolue ou relative.
266 Chapitre 11
Les URL absolues sont des adresses URL complètes, incluant le protocole de serveur (qui est
généralement http:// pour les pages Web). Par exemple, http://www.macromedia.com/fr/support/ est
l’URL absolue de la page Web du centre d’assistance de Macromedia Fireworks. Les URL absolues restent
précises, quel que soit l’emplacement du document source, mais le lien est rompu si le document cible est
déplacé.
Les URL relatives sont indiquées par rapport au dossier contenant le document source. Les
exemples ci-dessous sont des syntaxes de navigation d’URL relatives :
• fichier.htm établit un lien avec un fichier situé dans le même dossier que le document source.
• ../../fichier.htm établit un lien avec un fichier situé dans un dossier placé deux niveaux audessus du dossier contenant le document source. Chaque signe ../ représente un niveau.
• htmldocs/fichier.htm établit un lien vers un fichier situé dans un dossier appelé htmldocs,
figurant dans le dossier contenant le document source.
Les URL relatives sont généralement les plus simples pour établir un lien avec un fichier qui
restera toujours placé dans le même dossier que le document actif.
Importation et exportation d’URL
Si le panneau URL contient des URL que vous voulez réutiliser dans d’autres documents
Fireworks, vous pouvez les exporter pour des utilisations ultérieures. Ensuite, vous pouvez
facilement les importer vers n’importe quel autre document Fireworks, ce qui facilitera leur accès.
Vous pouvez également importer toutes les URL référencées dans un document HTML existant.
Pour exporter des URL :
1
Choisissez Exporter des URL dans le menu Options du panneau URL.
2
Indiquez un nom de fichier, puis cliquez sur Enregistrer.
Un fichier HTML est créé. Il contient les URL que vous avez exportées.
Pour importer des URL :
1
Choisissez Importer des URL dans le menu Options du panneau URL.
2
Sélectionnez un fichier HTML, puis cliquez sur Ouvrir.
Toutes les URL contenues dans ce fichier sont importées.
Utilisation des styles, des symboles et des adresses URL 267
268 Chapitre 11
CHAPITRE 12
Découpes, survols et références
Les découpes sont des éléments de base qui permettent de créer des effets interactifs dans
Macromedia Fireworks. Ce sont des objets Web — il n’existent pas réellement en tant qu’images,
mais, en dernière instance, comme code HTML. Vous pouvez les afficher, les sélectionner et les
renommer à partir du calque Web, dans le panneau Calques. Ce chapitre décrit les concepts que
vous devez comprendre pour créer des découpes et explique comment utiliser ces découpes pour
affecter un comportement interactif à vos pages Web.
En appliquant la technique de survol Glisser-déposer pour affecter un comportement interactif
aux découpes, vous pouvez rapidement créer des effets de survol et de permutation d’images dans
l’espace de travail. Vous pouvez afficher les comportements affectés à partir du panneau
Comportements et créer des interactions plus complexes dans ce panneau.
Vous pouvez également utiliser des références pour affecter des comportements interactifs à vos
pages Web. Les références sont généralement utilisées pour créer des images interactives qui
contient des zones sensibles représentant des liens vers d’autres pages Web. Les références peuvent
également recevoir des événements de souris, ce qui permet à des comportements JavaScript d’agir
dans des découpes.
Création et modification d’une découpe
La découpe d’images en zones consiste à diviser un document Fireworks en plusieurs segments dont
chacun sera exporté séparément dans un fichier distinct. Pendant l’exportation, Fireworks crée
également un fichier HTML contenant le code des tables pour reconstituer l’image dans un
navigateur.
La découpe d’images en zones consiste à diviser un document en plusieurs segments dont chacun sera
exporté dans un fichier distinct.
La découpe d’images présente au moins trois avantages majeurs :
269
Optimisation L’une des principales difficultés de la conception graphique pour le Web réside dans
la nécessité de produire des images pouvant être téléchargées rapidement sans sacrifier la qualité
graphique. La découpe d’images permet d’optimiser chaque découpe individuelle en utilisant le
format de fichier et les options de compression les plus appropriés. Pour plus d’informations, voir
« Optimisation et exportation » à la page 333.
Interactivité Vous pouvez utiliser des découpes pour créer des zones qui répondront aux déplacements ou
aux boutons de la souris de l’utilisateur. Pour plus d’informations sur l’affectation de comportements
interactifs aux découpes, voir « Affectation de comportements interactifs aux découpes » à la page 277.
Mise à jour partielle d’une page Web La découpe d’images permet d’effectuer aisément une mise à
jour partielle dans une page Web qui change fréquemment. Par exemple, prenez le cas d’une
entreprise qui aurait une page Web dans laquelle les informations de la section Collaborateur du
mois doivent être modifiées tous les mois. Grâce à la découpe, il est possible de remplacer
rapidement le nom et la photo du collaborateur sans devoir modifier la page entière.
Création d’un objet découpe
Vous pouvez créer un objet découpe en le dessinant à l’aide de l’outil Découpe ou en insérant une
découpe basée sur un objet sélectionné.
Les traits qui partent de l’objet découpe sont les repères de découpe, qui définissent les limites des
divers fichiers image entre lesquels le document sera divisé lors de l’exportation. Par défaut, ces
repères sont de couleur rouge.
Pour insérer une découpe rectangulaire basée sur un objet sélectionné :
1
Choisissez Edition > Insertion > Découpe. La découpe est un rectangle dont la zone couverte
comprend les bords les plus extérieurs de l’objet sélectionné.
2
Lorsque plusieurs objets sont sélectionnés, choisissez la manière dont les repères de découpe
seront appliqués :
Simple crée
une découpe unique, qui recouvre tous les objets sélectionnés.
Multiple crée
270 Chapitre 12
un objet découpe pour chaque objet sélectionné.
Pour tracer un objet découpe rectangulaire :
1
Choisissez l’outil Découpe.
2
Tracez l’objet découpe. L’objet découpe et ses repères de découpe apparaissent sur le calque Web.
Remarque : Vous pouvez ajuster la position d’une découpe à mesure que vous la dessinez. Tout en maintenant
enfoncé le bouton de la souris, appuyez simplement et maintenez enfoncée la barre d’espacement du clavier,
puis faites glisser la découpe vers un autre emplacement du document. Relâchez la barre d’espacement pour
continuer à dessiner la découpe.
Création d’une découpe HTML
Une découpe HTML représente une zone d’une image découpée dans laquelle du texte HTML
apparaît dans le navigateur. Une découpe HTML n’exporte pas de données graphiques, mais du
texte HTML qui apparaît dans la cellule de tableau définie par la découpe.
Les découpes HTML sont utiles pour actualiser rapidement le texte qui apparaît sur votre site
Web, sans devoir créer de nouveaux graphismes.
Pour créer une découpe HTML :
1
Dessinez un objet découpe et laissez-le sélectionné.
2
A partir du Vérificateur des propriétés, choisissez HTML dans le menu déroulant Type.
3
Cliquez sur Edition.
4
Tapez le texte dans la fenêtre Modifier découpe du code HTML et, au besoin, insérez des
balises de mise en forme HTML pour mettre en forme le texte.
Remarque : Vous pouvez également insérer les balises de mise en forme HTML dans le code HTML après
l’avoir exporté à l’aide d’un éditeur de texte ou un éditeur de code HTML.
Découpes, survols et références 271
5
Cliquez sur OK pour appliquer les modifications et refermer la fenêtre Modifier découpe du
code HTML.
Le texte et les balises HTML que vous avez insérés apparaissent dans le fichier PNG Fireworks.
Remarque : L’aspect des découpes de texte HTML peut varier selon les navigateurs et les systèmes
d’exploitation, car la taille et le type des polices peuvent être définis dans le navigateur.
Création d’une découpe non rectangulaire
Les découpes rectangulaires peuvent ne pas suffire à affecter une interaction à une image non
rectangulaire. Si vous envisagez, par exemple, d’affecter un effet de survol à une découpe et que les
objets découpe se chevauchent ou sont de forme irrégulière, une découpe rectangulaire peut faire
apparaître des informations non désirées en même temps que l’image de remplacement. Pour
résoudre ce problème, Fireworks permet d’utiliser l’outil Découpe Polygonale pour tracer des
découpes ayant n’importeforme polygonale.
Vous pouvez aussi convertir des trajets vectoriels en découpes, afin de créer des découpes de forme
irrégulière.
Pour tracer un objet découpe polygonal :
1
Choisissez l’outil Découpe polygonale.
2
Cliquez pour placer les points vectoriels du polygone. L’outil Découpe polygonale ne permet
de tracer que des segments de ligne droite.
3
Lorsque vous tracez un objet découpe polygonal autour d’objets ayant des bords adoucis,
veillez à inclure la totalité de l’objet pour éviter de créer des bords nets indésirables sur le
graphisme.
4
Pour sortir de l’outil Découpe Polygonale, choisissez un autre outil dans la palette d’outils. Il
n’est pas nécessaire de cliquer une seconde fois sur le premier point pour fermer le polygone.
Remarque : Veillez à ne pas faire un usage abusif des découpes polygonales, car elles réclament plus de code
JavaScript que les découpes rectangulaires équivalentes. Un nombre élevé de découpes polygonales peut
nécessiter beaucoup de temps de traitement sur l’ordinateur de l’utilisateur.
Pour créer une découpe polygonale à partir d’un objet ou d’un trajet vectoriel :
1
Sélectionnez un trajet vectoriel.
2
Choisissez Edition > Insertion > Référence.
3
Choisissez Edition > Insertion > Découpe.
Une découpe est générée avec la forme de l’objet vectoriel.
272 Chapitre 12
Visualisation et affichage des découpes et des repères de découpe
Vous pouvez contrôler la visibilité des découpes et autres objets Web de votre document l’aide des
panneaux Calques et Outils. Lorsque vous masquez des découpes dans l’ensemble du document,
vous masquez du même coup les repères de découpe.
A l’aide du Vérificateur de propriétés, vous pouvez organiser les découpes en affectant une couleur
unique à chaque objet découpe. Vous pouvez également modifier la couleur des repères de
découpe dans le menu Affichage.
Affichage des découpes dans le panneau Calques
Le calque Web affiche tous les objets Web du document ; vous pouvez alors sélectionner et afficher
chacun de ces objets.
Pour afficher et sélectionner une découpe dans le panneau Calques :
1
Choisissez Fenêtre > Calques pour ouvrir le panneau Calques.
2
Développez le calque Web en cliquant sur le signe Plus (+) (Windows) ou sur le triangle
(Macintosh).
La liste complète des objets de votre document est affichée dans le calque Web.
3
Cliquez sur le nom d’une découpe pour la sélectionner.
La découpe est alors sélectionnée dans le calque Web et dans la fenêtre du document.
Affichage et masquage des découpes
Une découpe masquée est invisible dans le fichier PGN Fireworks. Vous pouvez désactiver tout ou
partie des objets Web. Les découpes étant des objets Web, elles apparaissent sous le calque Web du
panneau Calques ; vous pouvez choisir d’afficher ou de masquer la découpe sélectionnée. Vous
pouvez également utiliser le panneau Outils pour contrôler la visibilité des découpes. Le
masquage d’un objet découpe n’empêche pas l’exportation de la découpe dans le texte HTML.
Pour masquer et afficher des découpes et références spécifiques :
1
Cliquez sur l’icône représentant un oeil à côté de l’objet Web dans le panneau des calques.
2
Cliquez dans la colonne de l’oeil pour rendre l’objet à nouveau visible. L’icône représentant un
oeil réapparaît lorsque les objets Web sont à nouveau visibles.
Découpes, survols et références 273
Pour afficher ou masquer l’ensemble des références, découpes et repères, procédez de l’une des
manières suivantes :
• Cliquez sur le bouton Masquer/afficher les découpes approprié dans le panneau Outils.
• Cliquez sur l’icône représentant un oeil à côté de calque Web dans le panneau des calques.
Pour afficher ou masquer les repères de découpe dans tous les modes d’affichage du document :
Choisissez Affichage > Repères de découpe.
Modification de la couleur des découpes et des repères de découpe
Si les couleurs utilisées dans un document sont les mêmes que celles des découpes, il peut être
difficile de faire la distinction entre les découpes et les objets. Pour identifier les découpes plus
facilement, vous pouvez affecter une nouvelle couleur aux découpes sélectionnées. Vous pouvez
également organiser les découpes en affectant une couleur spécifique à chacune d’elles. Vous
pouvez modifier la couleur des repères de découpe.
Remarque : Lorsque vous prévisualisez le document, les découpes désélectionnées y aparaissent comme du
papier calque blanc.
Pour modifier la couleur de l’objet découpe sélectionné :
Dans le Vérificateur de propriétés, choisissez une nouvelle couIeur dans la boîte de couleurs.
Pour modifier la couleur des repères de découpe :
1
Choisissez Affichage > Repères > Modifier les repères.
274 Chapitre 12
2
Sélectionnez une nouvelle couleur dans la section Couleur de la découpe de la boîte de
dialogue Repères, puis cliquez sur OK.
Modification d’une découpe
Sous Fireworks, vous pouvez travailler sur la disposition d’une découpe comme s’il s’agissait d’un
tableau dans un programme de traitement de texte. Lorsque vous déplacez le repère d’une
découpe pour redimensionner la découpe, toutes les découpes rectangulaires adjacentes sont
automatiquement redimensionnées. En outre, vous pouvez également utiliser le panneau Outils
pour redimensionner et transformer des découpes, comme s’il s’agissait d’objets vectoriels et
bitmap.
Déplacement des repères d’une découpe pour modifier la découpe
Les repères d’une découpe déterminent le périmètre et la position de la découpe. Les repères qui
s’étendent au-delà des objets découpe déterminent la manière dont le reste du document sera
divisé lors de l’exportation. Vous pouvez modifier la forme d’un objet découpe rectangulaire en
déplaçant les repères de découpe qui entourent l’objet. Il n’est pas possible de redimensionner des
objets découpe rectangulaires en déplaçant les repères de découpe.
Redimensionnement d’un objet découpe par déplacement de ses repères de découpe
Remarque : Lorsque vous déplacez des repères de découpe entourant un bouton Fireworks dans la fenêtre du
document, vous redimensionnez du même coup la découpe définissant la zone active (ou découpe) de ce bouton.
Vous ne pouvez supprimer la zone active d’un bouton Fireworks qu’en déplaçant les repères de découpe entourant
la zone.
Découpes, survols et références 275
Si plusieurs objets découpe sont alignés sur un même repère de découpe, faites glisser ce repère
pour redimensionner simultanément tous les objets découpe.
Redimensionnement de plusieurs objets découpe par déplacement d’un seul repère
Lorsque vous faites glisser un repère le long d’une coordonnée, tous les autres repères figurant sur
cette coordonnée se déplacent en même temps.
Pour redimensionner une ou plusieurs découpes :
1
Placez l’outil Pointeur ou Sous-sélection sur un repère de découpe.
Le pointeur se transforme en pointeur de déplacement de repère.
2
Faites glisser le repère de découpe vers la position voulue.
Les découpes sont alors redimensionnées et toutes les découpes adjacentes sont également
redimensionnées automatiquement.
Pour supprimer un repère de découpe :
A l’aide de l’outil Pointeur ou Sous-sélection, faites glisser le repère de découpe au-delà des limites
du document.
Pour déplacer des repères de découpe adjacents :
1
Appuyez sur la touche Maj tout en faisant glisser un repère de découpe sur les repères de
découpe adjacents.
2
Déposez le repère de découpe à l’endroit voulu.
Tous les repères que vous déplacerez ainsi seront positionnés à cet endroit.
Conseil : Vous pouvez annuler cette opération en relâchant la touche Maj avant de relâcher le bouton de la
souris. Tous les repères sélectionnés et déplacés reviennent à leur position d’origine.
Utilisation des outils pour modifier des objets découpe
Vous pouvez utiliser l’outil Pointeur, Sous-sélection et les outils Transformation pour modifier la
forme ou redimensionner une découpe. Vous pouvez recadrer, mettre à l’échelle, incliner et
appliquer une distortion aux découpes.
276 Chapitre 12
Remarque : En redimensionnant ou en modifiant la forme des découpes à l’aide de ces outils, vous pouvez créer
des découpes se chevauchant car la taille des objets découpe adjacents sera modifiée automatiquement. Lorsque
des découpes se chevauchent et que des effets interactifs leur sont affectés, la découpe située au sommet de la pile
sera la première à avoir un comportement interactif. Pour éviter le chevauchement des découpes, utilisez les repères
de découpe pour modifier les découpes. Pour plus d’informations, voir « Déplacement des repères d’une découpe
pour modifier la découpe » à la page 275.
Pour modifier la forme d’une découpe sélectionnée, procédez de l’une des manières suivantes :
• Choisissez l’outil Pointeur ou Sous-sélection et faites glisser les angles de la découpe pour
modifier sa forme.
• Utilisez un outil de transformation pour effectuer la tansformation désirée et appuyez sur
Entrée.
Pour plus d’informations sur l’utilisation des outils de transformation, voir « Transformation et
distorsion d’objets sélectionnés et sélections » à la page 123.
Remarque : La transformation d’une découpe rectangulaire peut changer sa forme, sa position ou ses
dimensions, mais la découpe elle-même reste rectangulaire.
Utilisation du Vérificateur de propriétés ou du panneau Info pour la
modification des objets découpe
Vous pouvez également modifier la position et les dimensions d’un objet découpe dans le
Vérificateur de propritétés. Pour plus d’informations sur la modification des dimensions d’un
objet, voir « Transformation numérique d’objets » à la page 126. Pour plus d’informations sur la
modification de la position d’un objet, voir « Edition d’objets sélectionnés » à la page 122.
Affectation de comportements interactifs aux découpes
Les éléments de base permettant de créer une interactivité dans Fireworks sont les objets découpe.
Le programme Fireworks offre deux possibilités pour rendre des découpes interactives :
• Pour rendre une découpe interactive, la méthode la plus simple consiste à utiliser la technique
de survol Glisser-déposer. En faisant glisser simplement la poignée du comportement de la
découpe et en la déposant sur une découpe cible, vous pouvez créer rapidement une
interactivité.
• Le panneau Comportements permet de créer des interactivités plus complexes. Il contient une
variété de comportements interactifs que vous pouvez affecter aux découpes. En affectant
plusieurs effets à une seule découpe, vous pouvez créer des effets très intéresssants. Vous pouvez
également créer des interactions personnalisées en modifiant les comportements existants.
Les comportements de Fireworks MX sont compatibles avec ceux de Macromedia
Dreamweaver MX. Après avoir exporté un comportement de Fireworks vers Dreamweaver 4, vous
pouvez le modifier à l’aide du panneau Comportements de Dreamweaver 4.
Ajout d’une interactivié simple aux découpes
La technique de survol Glisser-déposer est la plus rapide et la plus plus efficace pour créer des effets de
survol et de permutation d’images.
Elle permet, en particulier, de déterminer le comportement d’une découpe lorsque le pointeur la
survole. On utilise généralement le terme effet de survol pour désigner ce comportement. Les
effets de survol sont des graphismes qui changent d’apparence dans un navigateur Web lorsqu’ils
sont survolés par le pointeur de la souris.
Découpes, survols et références 277
Lorsqu’une découpe est sélectionnée, un petit cercle avec un croix intérieure apparaît au centre de
la découpe. Cette croix est appelée poignée de comportement.
Nom d’une découpe
Poignée de comportement
Poignée de sélection
En faisant glisser la poignée de comportement d’une découpe de déclenchement et en la déposant
sur une découpe cible, vous pouvez créer rapidement des effets de survol et de permutation
d’images. La découpe de déclenchement et la découpe cible peuvent correspondre à la même
découpe.
Les références disposent également de poignées de comportement pour l’intégration d’effets de
survol. Pour plus d’informations, voir « Création de références » à la page 290.
Les survols
Les effets de survol fonctionnent de la même manière. Un graphisme déclenche l’affichage d’un
autre graphisme lorsqu’il est survolé par le pointeur de la souris. L’objet déclencheur est toujours
un objet Web — une découpe, une référence ou un bouton.
La forme la plus simple d’un effet de survol consiste à remplacer le graphisme de l’image 1 par
celui qui se trouve directement après, dans l’image 2. Il est cependant possible de créer des effets
de survol beaucoup plus sophistiqués : les effets de substitution permettent de remplacer le
graphisme d’une image par celui d’une autre image, alors que les survols séparés font apparaître
une image loin du pointeur.
278 Chapitre 12
Lorsque vous sélectionnez dans Fireworks un objet Web déclencheur créé à l’aide d’une poignée
de comportement ou du panneau Comportements, Fireworks affiche toutes les relations de ses
comportements. Par défaut, une interaction de survol est représentée par un trait bleu.
Création d’un survol simple
La forme la plus simple d’un survol consiste à remplacer le graphisme d’une image par celui d’une
autre image, dans le même objet Web. Un survol simple implique une seule découpe ou référence.
Vous pouvez choisir le graphisme de substitution dans n’importe quelle image.
Pour affecter un effet de survol simple à l’image ou l’objet sélectionné :
1
Assurez-vous que l’image ou l’objet ne se trouve pas sur un calque partagé. Pour plus
d’informations, voir « Partage des calques » à la page 232.
2
Choisissez Edition > Insertion > Découpe pour créer une découpe au-dessus de l’image ou de
l’objet.
3
Cliquez sur le bouton Nouvelle image/Dupliquer dans le panneau Images pour créer une
nouvelle image.
4
Créez, collez ou importez l’image qui sera utilisée comme substitution d’image.
Placez l’image sous la découpe créée à l’étape 1, et qui est encore visible, bien que vous trouvez
dans l’image 2. Les découpes sont visibles dans toutes les images.
5
Sélectionnez Image 1 dans le panneau Images pour revenir à l’image associée au graphisme
d’origine.
6
Sélectionnez la découpe et placez le pointeur au-dessus de la poignée de comportement. Le
pointeur prend l’aspect d’une main.
Remarque : Vous pouvez sélectionner la découpe dans n’importe quelle image.
Découpes, survols et références 279
7
Tirez la poignée de comportement vers le bord supérieur gauche de la découpe.
Un trait bleu de comportement part du centre au coin supérieur gauche de la découpe, et la
boîte de dialogue Permutation d’images apparaît.
8
Dans le menu Permuter l’image à partir de, indiquez l’image dans laquelle se trouve le
graphisme à permuter, puis cliquez sur OK.
9
Cliquez sur l’onglet Aperçu pour visualiser et tester l’effet de survol, ou appuyez sur la touche
F12 pour le prévisualiser dans un navigateur.
Création d’un survol non superposé
Un survol non superposé permet de permuter une image sous un objet Web lorsque le pointeur
de la souris survole un autre objet Web. Dans un survol non superposé, en réponse à un
événement souris (survol ou clic), une image apparaît à un autre endroit de la page Web. Le
graphisme survolé est considéré comme le graphisme déclencheur, alors que le graphisme qui
change est considéré comme le graphisme cible.
A l’instar des survols simples qui utilisent une seule décooupe, vous devez d’abord définir la
découpe de déclenchement, la découpe cible et l’image dans laquelle se trouve le graphisme de la
permutation d’images. Vous devez ensuite relier le déclencheur à la découpe cible à l’aide d’un
trait de comportement.
Remarque : Le déclencheur d’un survol non superposé n’est pas nécessairement une découpe. Les références et
les boutons disposent également de poignées de comportement qui peuvent être utilisées pour créer des effets de
survol non superposé. Pour plus d’informations sur les références, voir « Création de références » à la page 290.
Pour plus d’informations sur les boutons, voir « Création d’un symbole de bouton » à la page 295.
Pour affecter un effet de survol non superposé à une image :
1
Choisissez Edition > Insertion > Découpe pour relier la découpe au graphisme de
déclenchement.
Remarque : Cette étape n’est pas indispensable si l’objet sélectionné est un bouton ou si une découpe ou une
référence recouvre le graphisme.
2
Cliquez sur le bouton Nouvelle image/Dupliquer dans le panneau Images pour créer une
nouvelle image.
3
Placez le deuxième graphisme qui servira de cible dans la nouvelle image à l’endroit voulu, dans
le document. Vous pouvez placer le graphisme à un autre endroit que sous la découpe créée à
l’étape 1.
4
Sélectionnez le graphisme, puis choisissez Edition > Insertion > Découpe pour associer une
découpe à ce graphisme.
280 Chapitre 12
5
Sélectionnez Image 1 dans le panneau Images pour revenir à l’image associée au graphisme
d’origine.
6
Sélectionnez la découpe, la référence ou le bouton qui couvre la zone de déclenchement (le
gaphisme d’origine) et placez le pointeur sur la poignée de comportement. Le pointeur prend
l’aspect d’une main.
7
Tirez la poignée de comportement de la découpe de déclenchement vers la découpe cible créée
à l’étape 4.
Le trait de comportement part du centre du déclencheur au coin supérieur gauche de la
découpe cible, et la boîte de dialogue de Permutation d’images apparaît.
8
Dans le menu Permuter l’image à partir de, sélectionnez le graphisme créé à l’étape 2, puis
cliquez sur OK.
9
Cliquez sur l’onglet Aperçu et testez l’effet de survol non superposé.
Application de plusieurs survols à une découpe
Vous pouvez tirer plusieurs poignées de comportement à partir d’une seule découpe pour créer
plusieurs interactions de survol. Par exemple, vous pouvez déclencher un effet de survol et de
survol non superposé à partir de la même découpe.
Une découpe déclenchant un comportement de survol et un comportement de survol non superposé
Remarque : Vous pouvez également ajouter plusieurs comportements à l’aide du panneau Comportements. Pour
plus d’informations, voir « Utilisation du panneau Comportements pour l’ajout d’effets interactifs aux découpes » à la
page 282.
Découpes, survols et références 281
Pour appliquer plusieurs survols à une découpe sélectionnée :
1
Tirez une poignée de comportement de la découpe sélectionnée vers le bord de cette découpe ou
d’une autre découpe.
Tirez la poignée vers le bord supérieur gauche de cette même découpe pour créer un survol
simple ou tirez-la vers une autre découpe pour créer un survol non superposé.
2
Sélectionnez l’image de la permutation d’images, puis cliquez sur OK.
3
Pour créer d’autres survols, répétez les étapes 1 et 2 autant de fois que vous le désirez.
Suppression d’un survol glisser-déposer
Vous pouvez supprimer aisément le survol glisser-déposer d’une découpe, d’une référence ou d’un
bouton.
Pour supprimer le survol glisser-déposer d’un objet Web ou d’un bouton sélectionné :
1
Cliquez sur le trait bleu de comportement à supprimer.
2
Cliquez sur OK pour supprimer l’interaction de survol.
Utilisation du panneau Comportements pour l’ajout d’effets interactifs aux
découpes
Outre les survols, vous pouvez affecter d’autres types d’interactivité aux découpes à l’aide du
panneau Comportements. Vous pouvez créer des interactions personnalisées en modifiant des
comportements existants.
Remarque : Bien qu’il est possible de créer des survols simples, non superposés et sophistiqués à l’aide du
panneau Comportements, la technique de survol glisser-déposer est recommandée. Pour plus d’informations, voir
« Ajout d’une interactivié simple aux découpes » à la page 277.
Les comportements ci-dessous sont disponibles dans Fireworks :
Survol simple ajoute un effet de survol à la découpe sélectionnée ou à l’objet Web en utilisant
l’image 1 pour l’état Relevé et l’image 2 pour l’état Au-dessus. Après avoir sélectionné ce
comportement, vous devez créer un graphisme dans la deuxième image, en utilisant la même
découpe pour créer l’état Au-dessus. L’option Survol simple est en fait un groupe de
comportements contenant les comportements Permutation d’images et Restaurer la permutation
d’images.
Permutation d’images remplace
le graphisme qui figure sous la découpe spécifiée par le contenu
d’une autre image de la même image multiple, ou par le contenu d’un fichier externe.
Restaurer la permutation d’images restaure
l’apparence par défaut du survol dans l’image 1.
Image de la barre de navigation définit une découpe comme faisant partie d’une barre de
navigation de Fireworks. Toutes les découpes faisant partie de la barre de navigation doivent
posséder ce comportement. L’option Image de la barre de navigation est en fait un groupe de
comportements contenant les comportements Barre de navigation - Au-dessus, Barre de
navigation - Enfoncé, et Restaurer la barre de navigation. Ce comportement est automatiquement
sélectionné pour vous, par défaut, lorsque vous utilisez l’Editeur de bouton pour créer un bouton
incluant un état Enfoncé et Au-dessus Enfoncé. Pour plus d’informations sur les boutons, voir
« Création d’un symbole de bouton » à la page 295.
Barre de navigation Au-dessus indique l’état
Au-dessus de la découpe sélectionnée lorsqu’elle fait
partie d’une barre de navigation, et permet éventuellement de spécifier l’état Au-dessus enfoncé.
282 Chapitre 12
Barre de navigation Enfoncé indique l’état Enfoncé de la découpe sélectionnée lorsqu’elle fait
partie d’une barre de navigation.
Restaurer la barre de navigation ramène toutes les autres découpes de la barre de navigation à leur
état Relevé.
Afficher le menu contextuel associe un menu contextuel à une découpe ou une référence. Ce
comportement est automatiquement défini si vous utilisez l’éditeur de menu contextuel. Pour
plus d’informations, voir « Création de menus contextuels » à la page 306.
Texte de la barre d’état permet de définir le texte d’un message à afficher dans la barre d’état, dans
la partie inférieure de la fenêtre du navigateur.
Affectation de comportements
Vous pouvez affecter un comportement à une découpe à partir du panneau Comportements.
Vous pouvez également affecter plusieurs comportements à la fois.
Pour affecter un comportement à la découpe sélectionnée à l’aide du panneau Comportements :
1
Cliquez sur le bouton Ajouter un comportement (+) dans le panneau Comportements.
Bouton Ajouter un comportement
Bouton Supprimer le comportement
2
Sélectionnez un comportement dans le menu Ajouter un comportement. Pour une description
de chaque comportement, voir « Utilisation du panneau Comportements pour l’ajout d’effets
interactifs aux découpes » à la page 282.
Modification des comportements
Le panneau Comportements vous permet également de modifier des comportements existants.
Vous pouvez spécifier le type d’événement (un clic, par exemple) qui déclenche le comportement.
Remarque : Vous ne pouvez pas changer l’événement associé aux comportements Survol simple et Définir image
barre de navigation.
Pour changer l’événement souris activant le comportement :
1
Sélectionnez la découpe de déclenchement contenant le comportement à modifier.
Tous les comportements associées à cette découpe apparaissent dans le panneau
Comportements.
2
Sélectionnez le comportement à modifier.
Découpes, survols et références 283
3
Cliquez sur la flèche située à côté de l’événement et choisissez un nouvel événement dans le
menu déroulant :
onMouseOver déclenche
le comportement lorsque le pointeur survole la zone de
déclenchement.
onMouseOut déclenche le comportement lorsque le pointeur quitte la zone de déclenchement.
onClick déclenche
le comportement lorsqu’on clique sur l’objet de déclenchement.
onLoad déclenche
le comportement lorsque la page Web est chargée.
Utilisation de fichiers externes pour la définition des états du survol
Vous pouvez utiliser une image externe au document Fireworks actif comme image source d’un
état du survol. Vous pouvez utiliser un fichier GIF, GIF animé, JPEG ou PNG. Si vous utilisez un
fichier externe comme source d’une image, le fichier est subsitué à la découpe cible lorsque le
survol est déclenché dans un navigateur Web.
Ce fichier doit avoir les mêmes dimensions que la découpe à laquelle il doit se substituer. Si ce
n’est pas le cas, le navigateur redimensionne l’image de ce fichier pour l’adapter aux dimensions de
l’objet découpe. Le redimensionnement d’un fichier peut en dégrader la qualité, en particulier
dans le cas d’une image GIF animée.
Pour choisir un fichier externe comme source d’un état du survol :
1
A partir de la boîte de dialogue Permuter les images, Barre de navigation-Au-dessus ou Barre de
navigation-Enfoncé, choisissez Fichier et cliquez sur l’icône de dossier.
Remarque : Si cette option n’apparaît pas dans la boîte de dialogue Permuter les images, choisissez Options
supplémentaires, puis exéctuez l’étape 1.
2
Recherchez le fichier que vous désirez utiliser, puis cliquez sur Ouvrir.
3
Si nécessaire, désactivez la case Précharger les images (si le fichier externe est de type GIF
animé).
Notez que la mise en mémoire cache peut interrompre l’affichage des images GIF animées
utilisées comme états du survol. Pour éviter ce problème, désactivez l’option Précharger les
images lorsque vous définissez le survol.
Remarque : Si vous comptez exporter votre document pour l’utiliser sur le Web, assurez-vous que le fichier
externe est accessible à partir du code HTML Fireworks exporté. Fireworks crée des trajets de document vers
les fichiers image. Il est conseillé de placer les fichiers externes dans votre site local avant de les utiliser comme
états du survol dans Fireworks. Ensuite, lorsque vous chargez vos fichiers sur le Web, assurez-vous que le fichier
externe est également chargé. Pour plus d’informations sur le code HTML, voir « Exportation du fichier au format
HTML » à la page 362.
284 Chapitre 12
Préparation des découpes pour l’exportation
A l’aide du Vérificateur de propriétés, vous pouvez rendre des découpes interactives en leur affectant
des URL et des images cibles. Vous pouvez également spécifier le texte à afficher dans un navigateur
pendant le chargement d’une image. Par ailleurs, vous pouvez choisir un format de fichier
d’exportation pour optimiser la découpe sélectionnée. Si la fenêtre du Vérificateur de propriétés est
réduite, cliquez sur la flèche d’agrandissement située dans l’angle inférieur gauche pour visualiser
toutes les propriétés de découpe.
Propriétés de découpe dans le Vérificateur de propriétés
A partir du Vérificateur de propriétés ou du panneau Calques, vous pouvez affecter des noms
exclusifs aux découpes. Fireworks utilise le nom que vous spécifiez pour nommer les fichiers
générés par la découpe lors de l’exportation. Si aucun nom de découpe n’est spécifié dans le
Vérificateur de propriétés ou dans le panneau Calques, Fireworks affecte automatiquement un
nom aux découpes lors de l’exportation. Vous pouvez modifier la convention d’affectation
automatique de nom que Fireworks utilise, à partir de la boîte de dialogue Configuration HTML.
Lorsque vous exportez un document Fireworks découpé, il est exporté sous forme de fichier HTML
et de plusieurs fichiers graphiques. Vous pouvez définir les propriétés d’un fichier HTML exporté, à
partir de la boîte de dialogue Configuration HTML.
Affectation d’adresses URL
Une adresse URL, ou Uniform Resource Locator (localisateur uniforme de ressources), est
l’adresse d’une page ou d’un fichier spécifique sur l’Internet. Lorsque vous affectez une URL à une
découpe, l’utilisateur peut accéder à cette adresse en cliquant sur la zone définie par la découpe
dans son navigateur Web.
Pour affecteur une URL à une découpe :
Indiquez une URL dans le champ Lien du Vérificateur de propriétés.
Conseil : Si vous devez réutiliser une URL, vous pouvez créer une bibliothèque d’URL dans le panneau URL, puis
enregistrer les URL dans cette bibliothèque. Pour plus d’informations, voir « Utilisation des URL » à la page 264.
Saisie du texte de description
Le texte de description est affiché dans le cadre de l’image pendant le téléchargement de cette
dernière à partir du Web ou à la place d’un graphisme ne pouvant pas être chargé. Dans les
versions récentes d’Internet Explorer, ce texte apparaît à côté du pointeur de souris, dans une infobulle.
La saisie de texte de description bref et explicite devient de plus en plus important dans la conception
de page Web. En effet, un nombre croissant de malvoyants utilisent des applications de lecture à
l’écran qui convertissent le texte de description en signal verbal élaboré par ordinateur lorsque le
pointeur de la souris survole des graphiques sur une page Web.
Découpes, survols et références 285
Pour spécifier le texte de description d’une découpe :
Dans le Vérificateur de propriétés, tapez le texte dans le champ Alt.
Affectation d’une cible
La cible est l’un des cadres de la page Web, ou la fenêtre du navigateur Web, dans lequel ou
laquelle s’ouvrira le document lié. Vous pouvez spécifier, dans le Vérificateur de propriétés, la cible
de la découpe sélectionnée. Si la fenêtre du Vérificateur de propriétés est réduite, cliquez sur la
flèche d’agrandissement pour visualiser toutes les propriétés.
Pour spécifier, dans le Vérificateur de propriétés, la cible de la découpe sélectionnée :
Dans le menu déroulant Cible, tapez le nom du cadre HTML dans le champ Cible ou choisissez
un nom de cible réservé :
_blank charge
les documents liés dans une nouvelle fenêtre, sans nom, du navigateur.
_parent charge les documents liés dans le jeu de cadres parent, ou dans la fenêtre parente du cadre
contenant le lien. Si le cadre contenant le lien n’est pas imbriqué, le document lié sera chargé dans
la fenêtre de base du navigateur.
_self charge
le document lié dans le même cadre ou la même fenêtre que le lien. Cette cible est
implicite et ne nécessite normalement pas d’être spécifiée.
_top charge les documents liés dans la fenêtre de base du navigateur, remplaçant ainsi tous les
cadres.
Paramètres d’exportation
Vous pouvez optimiser une découpe en sélectionnant une option dans le menu contextuel
Paramètres d’exportation du Vérificateur de propriétés. Vous pouvez choisir des paramètres
d’optimisation courants, afin de définir rapidement un format de fichier et d’appliquer des
paramètres spécifiques à un format précis. Pour plus d’informations sur ces paramètres et sur leur
personnalisation, voir « Utilisation des paramètres d’optimisation prédéfinis » à la page 337.
Affectation de nom aux découpes
Une découpe permet de découper une image en plusieurs parties. Chacune de ces parties est
exportée sous forme d’un fichier séparé ; ces fichiers doivent donc avoir un nom.
Fireworks donne automatiquement un nom à chaque fichier de découpe lors de l’exportation.
Vous pouvez accepter la convention de nom par défaut, modifier ou indiquer des noms
personnalisés pour chaque découpe.
Noms de fichiers de découpe personnalisés
Vous pouvez affecter des noms spécifiques aux découpes, afin d’identifier aisément les fichiers de
découpe dans la structure de fichiers de votre site Web. Par exemple, si vous avez dans une barre
de navigation un bouton qui renvoie à la page d’accueil, vous pouvez baptiser cette découpe
Accueil.
Pour indiquer un nom de découpe personnalisé, procédez de l’une des manières suivantes :
• Sélectionnez la découpe dans le dossier, tapez un nom dans la zone Nom de l’objet du
Vérificateur de propriétés, puis appuyez sur Entrée.
286 Chapitre 12
• Dans le calque Web, cliquez deux fois sur le nom de la découpe, indiquez un nouveau nom et
appuyez sur Entrée.
N’ajoutez pas d’extension au nom de fichier. Fireworks ajoute automatiquement les extensions
aux noms des fichiers lors de l’exportation.
Affectation automatique de nom aux fichiers de découpe
Si aucun nom de découpe n’est spécifié dans le Vérificateur de propriétés ou dans le panneau
Calques, Fireworks affecte automatiquementun nom exclusif à chaque fichier de découpe en
utilisant la convention de nom par défaut.
Pour nommer automatiquement un fichier de découpe :
Lorsque vous exportez vos images en découpes, indiquez un nom dans la zone Nom de fichier
(Windows) ou Nom (Macintosh) de la boîte de dialogue d’exportation. N’ajoutez pas d’extension
de fichier. Fireworks ajoute automatiquement les extensions aux noms des fichiers lors de
l’exportation.
Modification de la convention de nom par défaut
Vous pouvez modifier la convention de nom des découpes dans l’onglet Propre au document de la
boîte de dialogue Configuration HTML.
Fireworks vous permet de créer votre propre convention de nom, à l’aide de nombreuses options.
Vous pouvez créer une convention de nom comprenant jusqu’à six éléments. Un élément peut
être l’une des options de nom automatique suivantes :
Option
Description
Aucun
Aucun nom n’est appliqué à l’élément.
doc.nom
L’élément prend le nom du document.
« découpe »
Vous pouvez insérer le mot « découpe » dans la convention de nom.
Découpe # (1,2,3...)
Découpe # (01,02,03...)
Découpe # (A,B,C...)
Découpe # (a,b,c...)
L’élément est numéroté de façon numérique ou alphabétique, selon le style choisi.
ligne/colonne (l3_c2,
l4_c7...)
Ligne (r##) et Colonne (c##) désignent les lignes et colonnes du tableau que les
navigateurs Web utilisent pour reconstruire une image découpée. Vous pouvez
utiliser ces informations dans la convention de nom.
Souligné
Point
Espace
Tiret
L’élément utilise l’un de ces caractères, en général comme séparateur entre d’autres
éléments.
Par exemple, si le nom du document est mondoc, la convention de nom doc.name + « découpe »
+ N° de découpe (A,B,C...) donnera le nom découpe mondocdécoupeA. Vous n’aurez
pratiquement jamais à utiliser une convention de nom utilisant les six éléments.
Si une découpe s’étend sur plusieurs images, Fireworks ajoutera par défaut un numéro au nom de
fichier de chaque image. Par exemple, vous indiquez le nom de fichier accueil pour un bouton à
trois états, Fireworks nommera le graphisme de l’état Relevé accueil.gif, celui de l’état Au-dessus
accueil_f2.gif, et celui de l’état Enfoncé accueil_f3.gif. Vous pouvez créer votre propre convention
de nom pour les découpes en plusieurs images, dans la boîte de dialogue Configuration HTML.
Découpes, survols et références 287
Pour modifier la convention de nom par défaut :
1
Choisissez Fichier > Configuration HTML pour ouvrir la boîte de dialogue correspondante.
2
Cliquez sur l’onglet Propre au document.
3
Dans la section Noms de fichier, créez votre propre convention de nom en choisissant dans les
listes.
Par exemple, la convention de nom doc.name + « découpe » + N° de découpe (A,B,C...)
donnera le nom suivant :
4
(Facultatif ) Pour définir ces données comme paramètres par défaut pour tous les nouveaux
documents Fireworks, cliquez sur Paramètres par défaut.
Remarque : Soyez prudent lorsque vous choisissez Aucun comme option pour la convention de nom des
découpes. Si vous choisissez cette option pour l’un des trois premiers menus, Fireworks exportera des fichiers
de découpe qui s’écraseront successivement. Vous obtiendrez en définitive qu’un seul graphisme exporté et un
tableau affichant ce graphisme dans chaque cellule.
Définition du mode d’exportation des tables HTML
La découpe définit la présentation de la structure de la table HTML lorsqu’un document
Fireworks est exporté pour être utilisé sur le Web.
Lorsque vous exportez en format HTML un document Fireworks découpé, le document est
assemblé dans une table HTML. Chaque partie du document Fireworks occupe une cellule de la
table. Une fois le document exporté, une découpe Fireworks correspond à une cellule de la table
dans le code HTML.
Vous pouvez préciser la manière dont la table Fireworks doit être reconstruite dans un navigateur.
Entre autres options, vous pouvez, lorsque vous exportez un document en fichier HTML, choisir
d’utiliser des séparateurs ou des tables imbriquées :
• Les séparateurs sont des images permettant de régler les espaces entre les cellules de la table de
façon à ce que ces dernières soient alignées correctement lorsqu’elles sont affichées dans un
navigateur.
288 Chapitre 12
• Une table imbriquée est littéralement une table figurant au sein d’une autre table. Les tables
imbriquées ne comportent pas de séparateurs. Elles peuvent mettre plus de temps à se charger
dans les navigateurs et, dans la mesure où elles ne comportent pas de séparateurs, il est plus
simple de modifier leur code HTML.
Pour plus d’informations sur le code HTML, voir « Exportation du fichier au format HTML » à
la page 362.
Pour spécifier le mode d’exportation des tables HTML à partir de Fireworks :
1
Choisissez Fichier > Configuration HTML, ou cliquez sur le bouton Options de la boîte de
dialogue Exporter.
2
Cliquez sur l’onglet Table.
3
Choisissez une option d’espacement dans le menu déroulant Espace avec :
Tables imbriquées — Pas de séparateurs crée
une table imbriquée sans séparateur.
Table unique — pas de séparateur crée une table unique sans séparateur. Cette option risque
d’entraîner un affichage incorrect dans certains cas.
Espace transparent de 1 pixel utilise une image GIF de 1 pixel carré comme séparateur. Ce
séparateur peut ensuite être agrandi en fonction des besoins dans le code HTML. Cela génère
un ligne de 1 pixel de hauteur dans la partie supérieure de la table et une colonne de 1 pixel de
largeur dans la partie inférieure droite de la table.
4
Sélectionnez une couleur de cellule pour les découpes HTML :
• Pour affecter aux cellules la même couleur d’arrière-plan que celle du document, choisissez
Utiliser la couleur du fond.
• Désactivez Utiliser la couleur du fond pour choisir une autre couleur à partir de la source de
couleurs.
5
Cliquez sur le menu déroulant Contenu pour choisir ce qui doit être placé dans les cellules
vides :
Aucun laisse
les cellules vides.
Image du séparateur place
une petite image transparente appelée spacer.gif dans les cellules
vides.
Espace insécable place
une balise d’espacement HTML dans les cellules vides. Ce type cellule
est d’aspect creux.
Remarque : Des cellules vides ne sont ajoutées que si vous avez désélectionné Inclure les zones sans découpe
à partir de la boîte de dialogue Exporter pendant l’exportation.
6
Cliquez sur OK.
Pour plus d’informations sur le choix des options d’explortation HTML, voir « Définition des
options d’exportation du code HTML » à la page 369.
Remarque : Vous pouvez spécifier des paramètres d’exportation de table propres aux objets découpe des
documents. Si nécessaire, utilisez le bouton Paramètres par défaut de dans l’onglet Propre au document la boîte
de dialogue Configuration HTML pour appliquer les valeurs par défaut à l’ensemble des documents.
Découpes, survols et références 289
Utilisation des références et des cartes images
Les concepteurs Web font souvent un grand usage des références pour créer des petites parties
d’une image interactive plus grande. Une référence est une zone inscrite à l’intérieur d’une image
Web ; cette zone pointe vers une adresse URL. Une carte image n’est rien de plus qu’une image
sur laquelle une ou plusieurs zones de référence ont été placées.
Carte image avec références
Les références et les cartes images utilisent souvent moins de ressources que les images découpées.
La découpe peut exiger plus de ressources au navigateur, en raison du code HTML
supplémentaire qu’il doit télécharger et de la puissance de traitement requise pour rassembler les
images découpées.
Remarque : Il est possible de créer une carte image découpée. L’exportation d’une carte image découpée génère
en général de nombreux fichiers graphiques. Pour plus d’informations sur les découpes, voir « Création d’un objet
découpe » à la page 270.
Les références sont une solution idéale lorsque vous liez des zones d’une image à des pages Web et
que vous ne souhaitez pas que ces zones soient sélectionnées ou produisent des effets de survol en
réponse à un événement souris (déplacement ou clic). Les références et les cartes images sont
également très intéressantes si le graphisme sur lequel vous avez placé les références serait mieux
exporté sous forme d’un seul fichier graphique. En d’autres termes, l’ensemble du gaphisme serait
mieux exporté en utilisant les mêmes format de fichier et paramètres d’optimisation.
Création de références
Après avoir identifié les zones du graphisme source représentant de bons repères de navigation,
créez les références, puis associez-leur des liens URL. Il existe deux méthodes pour créer des
références :
• Vous pouvez tracer la zone de référence au-dessus de la zone cible du graphisme, à l’aide des
Outils Référence rectangulaire, circulaire ou polygonale (forme irrégulière).
• Vous pouvez sélectionner un objet et insérer la référence par-dessus cet objet.
Une référence ne doit pas nécessairement être un rectangle ou un cercle. Vous pouvez également
créer des références polygonales, composées de nombreux points. Cette approche est
particulièrement intéressante avec les images complexes.
290 Chapitre 12
Pour créer une référence rectangulaire ou circulaire :
1
Choisissez l’outil Référence rectangulaire ou référence circulaire dans la section Web du
panneau Outils.
2
Faites glisser l’outil Référence pour dessiner une zone de référence sur l’une des zones du
graphisme. Maintenez enfoncée la touche Alt (Windows) ou Option (Macintosh) pour
dessiner à partir du point central.
Remarque : Vous pouvez ajuster la position d’une référence à mesure que vous la dessinez. Tout en maintenant
enfoncé le bouton de la souris, appuyez simplement et maintenez enfoncée la barre d’espacement du clavier,
puis faites glisser la découpe vers un autre emplacement du document. Relâchez la barre d’espacement pour
continuer à dessiner la référence.
Pour créer une référence de forme irrégulière :
1
Choisissez l’outil Référence polygonale.
2
Cliquez aux endroits désirés pour placer des points vectoriels, un peu de la même façon que
pour dessiner des segments de droites avec l’outil Plume. La trame définit la zone de référence,
que le trajet soit ouvert ou fermé.
Pour créer une référence en décalquant un ou plusieurs objets sélectionnés :
1
Choisissez Edition > Insertion > Référence.
Si vous avez sélectionné plusieurs objets, un message vous demande si vous souhaitez créer une
référence rectangulaire unique couvrant tous les objets ou plusieurs références, une pour
chaque objet.
2
Cliquez sur Simple ou Multiple. Le calque Web affiche la ou les nouvelles références.
Modification d’une référence
Les références sont des objets Web et, à l’instar de nombreux objets, elles peuvent être modifiées à
l’aide des outils Pointeur, Sous-sélection et Transformation. Pour plus d’informations sur ces
outils de modification d’objet Web, voir « Utilisation des outils pour modifier des objets
découpe » à la page 276.
Découpes, survols et références 291
Vous pouvez changer la position et les dimensions d’une référence dans le Vérificateur de
propriétés ou le panneau Info. Pour plus d’informations sur la modification des dimensions d’un
objet, voir « Transformation numérique d’objets » à la page 126. Pour plus d’informations sur la
modification de la position d’un objet, voir « Edition d’objets sélectionnés » à la page 122.
Vous pouvez également modifier la forme d’une référence dans le Vérificateur de propriétés.
Pour convertir une référence sélectionnée en rectangle, cercle ou polygone :
Dans le Vérificateur de propriétés, choisissez Rectangle, Cercle ou Polygone dans le menu déroulant
Forme de la référence.
Préparation des découpes pour l’exportation
Vous pouvez utiliser le Vérificateur de propriétés pour affecter aux références des URL, du texte
de description, des cibles et des noms personnalisés. Si la fenêtre du Vérificateur de propriétés est
réduite, cliquez sur la flèche d’agrandissement située dans l’angle inférieur gauche pour visualiser
toutes les propriétés.
Vous affectez des propriétés à des références de la même façon que pour des découpes. Pour plus
d’informations sur l’utilisation du Vérificateur de propriétés pour affecter des URL, du texte de
description, des images cibles et des noms personnalisés, voir « Préparation des découpes pour
l’exportation » à la page 285.
Création d’une carte image
Après avoir inséré plusieurs références au-dessus d’un graphisme, vous devez exporter ce dernier
sous forme de carte image pour qu’il puisse fonctionner dans un navigateur Web. L’exportation
d’une carte image génère le fichier graphique et le fichier HTML qui contient les informations de
la carte relatives aux références et aux liens URL correspondants.
Remarque : Les exportations de Fireworks ne peuvent produire que des cartes images côté client.
Comme autre solution d’exportation, copiez une carte image dans le Presse-papiers et collez-la
dans Dreamweaver ou dans un autre éditeur HTML.
Pour exporter une carte image ou pour la copier dans le Presse-papiers :
1
Optimisez le graphisme avant son exportation.
Pour plus d’informations, voir « Optimisation » à la page 333.
2
Choisissez Fichier > Exporter.
3
Si vous choisissez d’exporter l’image (plutôt que de la copier dans le Presse-papiers), placezvous dans le dossier où vous souhaitez placer le fichier HTML et nommez ce dernier.
Si vous avez déjà créé l’arborescence locale de votre site Web, enregistrez le graphisme dans le
dossier approprié de ce site.
4
Dans le menu déroulant Type, choisissez HTML et images.
292 Chapitre 12
5
Choisissez une option dans menu déroulant HTML :
Exporter le fichier HTML crée le fichier HTML approprié et les fichiers graphiques correspondants,
que vous pouvez importer ensuite dans Dreamweaver ou dans un autre éditeur HTML.
Copier dans le Presse-papiers copie simplement la carte image dans le Presse-papiers et vous
permet de la coller ensuite dans Dreamweaver ou dans un autre éditeur HTML.
6
Dans la zone Découpes, choisissez Aucune.
7
Si nécessaire, activez la case à cocher Placer les images dans des sous-dossiers, et ouvrez le
dossier approprié. (Cette opération n’est pas nécessaire si vous copiez l’image dans le Pressepapiers.)
8
Cliquez sur Enregsitrer pour fermer la boîte de dialogue Exporter.
Conseil : Lorsque vous exportez des fichiers, Fireworks permet d’utiliser les commentaires en HTML pour
identifier clairement le début et la fin du code des cartes images et autres éléments Web créées dans Fireworks.
Par défaut, aucun commentaire n’est ajouté dans le code HTML. Pour les inclure, ouvrez la boîte de dialogue
Configuration HTML et activez l’option Inclure les commentaires HTML.
Pour toutes informations sur la mise en place du contenu Fireworks exporté dans Dreamweaver
ou dans un autre éditeur HTML, voir « Utilisation de Fireworks avec d’autres applications » à
la page 373.
Création de survols avec références
Avec la technique de survol de Glisser-déposer, utilisée pour la création d’effets interactifs, vous
pouvez aisément affecter un effet de survol non superposé à une référence, si la zone cible est une
découpe. Les effets de survol sont appliqués aux références de la même manière que pour les
découpes. Pour plus d’informations, voir « Ajout d’une interactivié simple aux découpes » à la
page 277.
Remarque : Une référence ne peut déclencher qu’un survol non superposé. Ce dernier ne peut pas être la cible d’un
survol provenant d’une autre référence ou d’une découpe.
Une fois que vous avez affecté un comportement de survol non superposé à une référence, la ligne
bleue de connexion n’est visible que lorsque la référence est sélectionnée.
Utilisation des références par-dessus des découpes
Vous pouvez placer une référence par-dessus une découpe pour déclencher une action ou un
comportement. Choisissez cette methode si vous avez un graphisme de taille importante et
n’utilisez qu’une petite section du graphisme comme déclencheur d’action.
Découpes, survols et références 293
Par exemple, appliquez cette méthode si ce graphisme comporte du texte et que vous voulez que le
texte uniquement déclenche une action ou un comportement tel qu’un effet de survol. Vous
pouvez placer une découpe par-dessus le graphisme et une référence par-dessus le texte. Le simple
déplacement du pointeur au-dessus du texte déclenchera l’effet de survol, mais l’ensemble du
graphisme placé sous la découpe sera substitué lorsque l’éffet de survol se produira. Ne créez pas
de références qui chevauchent plusieurs découpes car leur comportement peut être imprévisible.
Pour créer le déclencheur d’un effet de survol à l’aide d’une référence placée par-dessus une
découpe :
1
Insérez une découpe par-dessus l’image originale de l’effet de substitution.
2
Dans le panneau Images, créez une nouvelle image et insérez le graphisme qui sera utilisé
comme image permutée. Veuillez à placer cette image sous la découpe insérée à l’étape 1.
3
Tirez un trait de comportement de la référence à la découpe contenant l’image à permuter.
La boîte de dialogue Permuter l’image s’affiche alors.
4
Dans la liste Permuter l’image à partir de, choisissez l’image qui contient le graphisme du
survol, puis cliquez sur OK.
294 Chapitre 12
CHAPITRE 13
Création de boutons et de menus déroulants
Avec Macromedia Fireworks MX, vous pouvez créer tout un ensemble de boutons et de menus
déroulants JavaScript, même si vous n’avez jamais utilisé JavaScript.
L’éditeur de boutons de Fireworks vous permet de créer des boutons étape par étape et
d’automatiser de nombreuses tâches. Vous obtenez ainsi un symbole de bouton qui, une fois créé,
permet de produire aisément des instances du symbole pour créer des barres de navigation.
Fireworks dispose également d’un Editeur de menus déroulants qui permet de créer rapidement et
aisément des menus déroulants verticaux et horizontaux. Dans l’éditeur de menus déroulants,
l’onglet Avancé vous permet de définir l’espacement des cellules et leur marge intérieure, le retrait
du texte, les bordures des cellules et bien d’autres propriétés.
Lors de l’exportation d’un bouton ou d’un menu déroulant, Fireworks génère automatiquement
le code JavaScript nécessaire pour l’afficher dans un navigateur Web. Macromedia Dreamweaver
permet d’insérer aisément le code HTML et JavaScript de Fireworks dans vos pages Web ou de
couper/coller le code dans un fichier HTML. Pour plus d’informations, voir « Utilisation de
Macromedia Dreamweaver MX » à la page 373.
Création d’un symbole de bouton
Les boutons sont des éléments de navigation dans une page Web. Les boutons créés dans l’éditeur
de boutons présentent les caractéristiques suivantes :
• Vous pouvez insérer n’importe quel type d’objet graphique ou textuel dans un bouton.
• Vous pouvez créer entièrement un nouveau bouton, convertir un objet existant en bouton ou
importer des boutons déjà créés.
• Un bouton est un type particulier de symbole. Vous pouvez en faire glisser ses occurrences de la
Bibliothèque vers le document.
Cette opération va permettre de changer l’aspect d’un bouton et de mettre automatiquement à
jour l’aspect de toutes les occurrences de ce bouton dans la barre de navigation. Pour plus
d’informations sur les symboles, voir « Utilisation de symboles » à la page 259.
• Vous pouvez modifier le texte, l’URL et la cible d’une occurrence d’un bouton sans toucher à
ses autres occurrences, ni rompre le lien entre cette occurrence et son symbole.
• Une occurrence d’un bouton est un objet encapsulé. Le déplacement d’une occurrence de
bouton au sein d’un document déplace également tous les composants et les états qui lui sont
associés. Vous n’avez donc plus besoin d’effectuer des modifications pour réograniser les images.
• Un bouton est facile à modifier. Double-cliquez sur l’occurrence au sein du document, et
effectuez les modifications dans l’éditeur de boutons ou dans le Vérificateur de propriétés.
295
• Comme les autres symboles, les boutons ont un point d’alignement. Le point d’alignement est
un point de centrage qui vous aide à aligner le texte et les différents états du bouton lorsque
vous utilisez l’éditeur de boutons.
Etats de bouton
Vous pouvez affecter quatre états différents à un bouton. Chaque état correspond à l’aspect que
doit prendre le bouton en réponse à un événement souris :
L’état Relevé (état
par défaut) représente l’apparence normale du bouton.
L’état Au-desus conditionne l’aspect du bouton lorsque le pointeur le survole. Cet état signale à
l’utilisateur que le fait de cliquer produira une action.
L’état Enfoncé correspond souvent à l’aspect du bouton lorsque l’utilisateur clique dessus ; il est
alors généralement représenté tel qu’il apparaît sur la page Web active d’une barre de navigation
comportant plusieurs boutons.
L’état Au-dessus Enfoncé est
affiché lorsque l’utilisateur déplace le pointeur de la souris sur le
bouton en état Enfoncé ; il est alors généralement représenté tel qu’il apparaît sur la page Web
active d’une barre de navigation comportant plusieurs boutons.
L’éditeur de boutons permet de créer les différents états, ainsi que la zone active qui déclenche les
action du bouton.
Utilisation de l’Editeur de boutons
Dans Fireworks, l’Editeur de boutons est le programme dans lequel vous créez et modifiez un
symbole de boutons JavaScript. Les onglets figurant au-dessus de l’Editeur de boutons
représentent les quatre états de bouton et à la zone active. Les conseils affichés dans les différentes
options de l’Editeur de boutons facilitent les décisions de conception des quatre états.
L’éditeur de boutons
296 Chapitre 13
Création d’un bouton simple à deux états
L’éditeur de boutons permet de créer des boutons en dessinant des formes, en important des
images ou en déplaçant des objets de la fenêtre du document. Différentes étapes vous alors
proposées pour définir le comportement du bouton.
Pour créer un bouton à l’état Relevé :
1
Choisissez Edition > Insertion > Nouveau bouton pour ouvrir l’éditeur de boutons.
L’éditeur de boutons affiche l’onglet de l’état Relevé.
2
Importer ou créer le graphisme Relevé :
• Utilisez la méthode Glisser-déposer ou importer le graphisme qui représentera l’état Rélevé du
bouton dans la zone active de l’éditeur de boutons.
• A l’aide des outils de dessins, créez un graphisme ou utiliser l’outil Texte pour créer un bouton
à partir d’un texte.
• Cliquez sur Importer un bouton ou sélectionnez un bouton modifiable dans la bibliothèque
d’importation de boutons. Si vous choisissez cette option, vous n’aurez pas à vous soucier de la
création des autres états du bouton. Tous les autres états du boutons seront créés
automatiquement avec les graphismes et texte correspondants.
3
Si nécessaire, choisissez l’outil Texte et créer le texte associé au bouton.
Pour créer un bouton à l’état Au-dessus :
1
Ouvez l’éditeur de boutons, puis cliquez sur l’onglet Au-dessus.
2
Exécutez ensuite l’une des opérations suivantes :
• Cliquez sur l’option Copier le graphisme Relevé pour coller une copie de l’état Relevé dans la
fenêtre Au-dessus, puis modifiez cette copie pour changer son aspect.
• Faites glisser-déposer, importez ou dessinez le graphisme.
Création d’un bouton à trois ou quatre états
Lorsque vous créez un bouton, en plus des états Relevé et Au-dessus, vous pouvez lui affecter les
états Enfoncé et Au-dessus Enfoncé. Ces états ajoutent des effets visuels pour les utilisateurs de
page Web.
Vous pouvez créer une barre de navigation comportant des boutons à un voire deux états, mais
dans Fireworks, seuls les boutons à quatre états sont considérés comme de véritables boutons de
barre de navigation. Dans Fireworks, plusieurs comportements de barre de navigation peuvent
être appliquées pour faire fonctionner les boutons comme s’ils étaient interdépendants. Par
exemple, vous pouvez créer des boutons de barre de navigation qui se comportent comme des
boutons-poussoirs d’un vieux poste radio de voiture ; lorsque vous cliquez sur un bouton, il reste
enfoncé tant que vous ne cliquez pas sur un autre bouton.
Les boutons à quatre états ne sont pas indispensables pour la création d’une barre de navigation.
Toutefois, leur utilisation permet de tirer parti des comportements de barre de navigation
prédéfinis dans Fireworks.
Pour plus d’informations sur la création des états de bouton Relevé et Au-dessus, voir « Création
d’un bouton simple à deux états » à la page 297.
Création de boutons et de menus déroulants 297
Pour créer un bouton à l’état Enfoncé :
1
Dans l’éditeur de boutons, ouvrez un bouton à deux états, puis cliquez sur l’onglet Enfoncé.
2
Exécutez ensuite l’une des opérations suivantes :
• Cliquez sur l’option Copier le graphisme Au-dessus pour coller une copie du graphisme de
l’état Au-dessus dans la fenêtre Au-dessus, puis modifiez cette copie pour changer son aspect.
• Faites glisser-déposer, importez ou dessinez le graphisme.
Remarque : Lorsque vous insérez ou créez le graphisme associé à l’état Enfoncé, l’option Inclure l’état Enfoncé
de la barre de navigation est automatiquement sélectionnée. Cet état est associé aux boutons faisant partie de la
barre de navigation.
Pour créer un état Au-dessus Enfoncé :
1
Dans l’éditeur de boutons, ouvrez un bouton à trois états, puis cliquez sur l’onglet Au-dessus
Enfoncé.
2
Exécutez ensuite l’une des opérations suivantes :
• Cliquez sur l’option Copier le graphisme Enfoncé pour coller une copie du graphisme de l’état
Enfoncé dans la fenêtre Au-dessus Enfoncé, puis modifiez cette copie pour changer son aspect.
• Faites glisser-déposer, importez ou dessinez le graphisme.
Remarque : Lorsque vous insérez ou créez le graphisme associé à l’état Au-dessus Enfoncé, l’option Inclure
l’état Au-dessus Enfoncé de la barre de navigation est automatiquement sélectionnée. Cet état est associé aux
boutons faisant partie de la barre de navigation.
Utilisation d’effets de biseau pour tracer les états des boutons
Pendant la création du graphisme associé à chaque état de bouton, vous pouvez appliquer des effets
en direct prédéfinis pour affecter des aspects communs à chaque état. Par exemple, si vous créez un
bouton à quatre états, vous pouvez appliquer l’effet En relief au graphisme de l’état Relevé, En
surbrillance au graphisme de l’état Enfoncé, etc.
Pour appliquer à un symbole de bouton des effets en direct prédéfinis :
1
Dans l’éditeur de bouton, ouvrez le symbole de bouton désiré, sélectionnez le graphisme dans
lequel vous allez ajouter un effet en direct.
2
Dans le Vérificateur de propriétés, cliquez sur le bouton Ajouter l’effet.
3
A partir du menu déroulant qui s’affiche, choisissez l’une des options suivantes :
• Choisissez Biseau et estampe > Biseau intérieur.
• Choisissez Biseau et estampe > Biseau extérieur.
4
Dans la fenêtre contextuelle qui s’affiche, choisissez un réglage prédéfini de bouton. Les
réglages prédéfinis de bouton sont décrits ci-dessous.
298 Chapitre 13
Effet de réglage prédéfini
Description
En relief
Le biseau semble en volume au-dessus des objets environnants.
En surbrillance
Les couleurs du bouton s’illuminent.
Cartouche
Le biseau semble enfoncé au-dessous des objets environnants.
Inversé
Le biseau semble enfoncé au-dessous des objets environnants, et les
couleurs s’illuminent.
5
Répétez les étapes 1 à 4 pour les autres boutons en affectant un effet prédéfini différent à
chaque état de bouton.
Conversion des survols de Fireworks en boutons
Vous pouvez créer des boutons à partir des survols créés dans les précédentes versions de
Fireworks. Les composants sont convertis en bouton et le nouveau bouton est placé dans la
bibliothèque.
Pour plus d’informations sur les survols, voir « Affectation de comportements interactifs aux
découpes » à la page 277.
Pour convertir un survol Fireworks en bouton :
1
Supprimez la découpe ou la référence recouvrant les images de survol.
2
Dans le panneau Images, choisissez Afficher toutes les images dans le menu déroulant
Séquence de calques.
3
Sélectionnez tous les objets à inclure dans le bouton.
Conseil : A l’aide de l’outil Sélectionner derrière, sélectionnez les objets masqués par d’autres objets. Pour plus
d’informations, voir « Utilisation de l’outil Sélectionner derrière » à la page 108.
4
Choisissez Modification > Symbole > Convertir en symbole.
La boîte de dialogue Propriétés du symbole s’affiche.
5
Dans le champ Nom, tapez le nom du symbole.
Création de boutons et de menus déroulants 299
6
Choisissez le type de symbole du bouton.
7
Cliquez sur OK.
Le nouveau bouton est ajouté à la bibliothèque.
Conseil : Vous pouvez également convertir en bouton des animations à quatre images. Sélectionnez tous les quatre
objets, et chacun d’eux est placé dans son état respectif.
Insertion de boutons dans un document
Vous pouvez insérer des occurrences de symboles de bouton à partir du panneau Bibliothèque.
Pour placer des occurrences d’un symbole de bouton dans un document :
1
Ouvrez le panneau Bibliothèque.
2
Tirez le symbole de bouton dans le document.
Pour placer des occurrences supplémentaires d’un symbole de bouton dans un document,
exécutez l’une des opérations suivantes :
• Sélectionnez une occurrence, puis choisissez Edition > Cloner pour placer une autre
occurrence directement devant l’occurrence sélectionnée. La nouvelle occurrence devient
l’objet sélectionné.
Conseil : Le clonage des occurrences de bouton est pratique lorsque vous créez une barre de navigation
alignée, car il permet de déplacer les clones dans un sens à l’aide des touches de direction, tout en conservant
l’alignement avec l’autre coordonnée.
• Tirez une autre occurrence de bouton depuis le panneau Bibliothèque dans le document.
• Maintenez enfoncée la touche Alt (Windows) ou Option (Macintosh) en faisant glisser une
occurrence sur le document pour créer une autre occurence du bouton.
• Copiez l’occurrence, puis collez des occurrences supplémentaires.
Importation des symboles de bouton
Les symboles de bouton figurant dans le panneau Bibliothèque sont spécifiques à chaque
document. Si vous ouvrez un document dont les symboles figurent dans le panneau Bibliothèque,
puis créez un nouveau document, le panneau Bibliothèque de ce dernier sera vide. Il existe
cependant plusieurs méthodes pour importer des symboles de bouton dans le panneau
Bibliothèque d’un document, que ce soit à partir d’une bibliothèque ou d’un autre document
Fireworks.
Pour importer des symboles d’un bouton dans le panneau Bibliothèque d’un document, exécutez
l’une des actions suivantes :
• Tirez une occurrence du bouton d’un autre document Fireworks et déposez-la dans le
document actif.
• Coupez une occurrence d’un autre document Fireworks et collez-la dans le document actif.
• Exportez les symboles de bouton depuis un autre document Fireworks vers un fichier
bibliothèque PNG, puis importez les symboles du fichier bibliothèque PNG dans le
document.
300 Chapitre 13
• Choisissez Edition > Bibliothèques, puis à partir des bibliothèques de boutons du sous-menu,
importez les symboles dans le panneau Bibliothèque du document. Ces bibliothèques
contiennent une grande variété de symboles de bouton prédéfinis créés par Macromedia.
Les méthodes d’importation et d’exportation des symboles de bouton sont les mêmes que celles
utilisées pour l’animation et les symboles graphiques. Pour plus d’informations, voir
« Importation de symboles » à la page 262 et « Exportation de symboles » à la page 263.
Modification des symboles de bouton
Dans Fireworks MX, les symboles de bouton sont des symboles particuliersayant deux types de
propriété : lorsque vous modifiez une occurrence ou son symbole certaines propriétés changent
dans toutes les autres occurrences, alors que dans d’autres cas, les changements se limitent
uniquement aux propriétés de l’occurrence active.
Dans Fireworks, les symboles de bouton permettent d’utiliser des symboles tout en autorisant la
modification de certaines propriétés d’une occcurrence de bouton telles que du texte, sans toucher
aux autres occurrences.
Modification des propriétés d’un symbole
Utilisez l’éditeur de boutons pour modifier les symboles de bouton. Les propriétés qui changent
dans une occurrence lorsque vous modifiez le symbole de son bouton sont celles qui sont
généralement communes à une série de bouton utilisés dans la barre de navigation ou dans un site
Web :
• La modification d’attributs graphiques tels que la couleur et le type des traits, la couleur et le
type de trame, la forme du trajet et les images
• Les effets en direct, l’opacité ou le mode de fondu appliqués à chaque objet du symbole de
bouton
•
•
•
•
•
Les dimensions et la position de la zone active
Comportement du bouton principal
Optimisation et paramètre d’exportation
Lien URL (utilisé également comme propriété d’une occurrence)
Image cible (utilisée également comme propriété d’une occurrence)
Pour modifier les propriétés d’un bouton au niveau de son symbole :
1
Dans l’éditeur de boutons, procédez de l’une des manières suivantes pour ouvrir le bouton :
• Double-cliquez sur l’occurrence du bouton dans l’espace de travail.
• Dans le panneau Bibliothèque, double-cliquez sur l’aperçu du bouton ou sur l’icône du
symbole, à côté du symbole du bouton.
2
Modifiez les attributs graphiques du bouton et cliquez sur Terminé.
Les modifications sont appliquées à toutes les occurrences du symbole du bouton.
Création de boutons et de menus déroulants 301
Modification des propriétés des occurrences
Dans le Vérificateur de propriétés, les propriétés des occurrences sont modifiées lorsque vous
sélectionnez une seule occurrence. Les propriétés que vous pouvez modifier dans une occurrence,
sans toucher à son symbole ou aux autres occurrences de ce symbole, sont celles qui varient
généralement d’un bouton à l’autre dans une série de boutons :
• Le nom d’objet d’une occurrence apparaissant dans le panneau Calques et utilisé lors de
l’exportation pour nommer les découpes exportées de l’occurrence du bouton
• Les effets en direct, l’opacité ou le mode de fondu appliqué à l’ensemble de l’occurrence
• Les caractères et la mise en page du texte, notamment la police, la taille des caractères,
l’orientation et la couleur du texte
•
•
•
•
Le lien URL (utilisé également comme propriété d’un symbole)
La description de l’image
L’image cible (utilisée également comme propriété d’un symbole)
Les comportements supplémentaires affectés à une occurrence à partir du panneau
Comportements
• L’option Afficher l’état Enfoncé lors du chargement dans le Vérificateur de propriétés, au sein
d’une barre de navigation
Remarque : Dans Fireworks MX, vous n’êtes pas tenu de choisir l’option Afficher l’état Enfoncé lors du
chargement, pour chaque occurrence de bouton dans une barre de navigation. La section Propre au document
de la boîte de dialogue Configuration HTML contient une option appelée Exportation de plusieurs fichiers.
Lorsque vous choisissez cette option, puis exportez une barre de navigation, Fireworks MX exporte chaque page
HTML avec l’état Enfoncé du bouton correspondant. Pour plus d’informations, voir « Définition des options
d’exportation du code HTML » à la page 369.
Pour modifier les propriétés de l’occurrence d’un seul symbole de bouton :
1
Sélectionnez l’occurence de bouton dans la zone de travail.
2
Définissez les propriétés dans le Vérificateur de propriétés.
Définition des propriétés d’un bouton interactif
Dans Fireworks, vous pouvez contrôler les éléments interactifs d’un bouton, notamment la zone
active, l’URL, la cible et la description de l’image.
Modification de la zone active d’un symbole de bouton
La zone active du symbole d’un bouton déclenche les effets interactifs lorsque le pointeur survole
le bouton ou que vous cliquez sur ce dernier dans un navigateur Web. La zone active d’un bouton
est une propriété de symbole et est exclusive à chaque symbole de bouton.
302 Chapitre 13
Lorsque vous créez un symbole de bouton, Fireworks crée automatiquement une découpe
spéciale, suffisamment grande pour englober tous les états d’un bouton. La découpe d’un bouton
ne peut être modifiée que dans l’onglet Zone active de l’éditeur de boutons. Chaque bouton ne
peut avoir qu’une seule découpe. Si vous dessinez dans la zone active une découpe à l’aide d’un
outil de découpe, la découpe précédente est remplacée par la nouvelle découpe dessinée. Vous
pouvez dessiner des objets références dans l’onglet Zone active, mais ces objets ne sont
modifiables que dans l’éditeur de boutons.
Remarque : Les objets Web définissant la zone active d’un symbole de bouton apparaissent dans le document
lorsque les découpes et références sont masquées, mais les objets Web d’un bouton ne s’affichent pas dans le
panneau Calques et ne peuvent pas être modifiés dans la zone de travail.
Pour modifier une découpe ou une référence dans la zone active d’un symbole de bouton :
1
Dans l’éditeur de boutons, ouvrez le symbole de bouton en procédant de l’une des manières
suivantes :
• Double-cliquez sur l’occurrence du bouton dans l’espace de travail.
• Dans le panneau Bibliothèque, double-cliquez sur l’aperçu du bouton ou sur l’icône du symbole, à
côté du symbole du bouton.
2
Cliquez sur l’onglet Zone active.
3
Utilisez l’une des méthodes suivantes :
• Utilisez l’outil Pointeur pour déplacer ou reformer la découpe ou déplacez le repère de
découpe.
• Utilisez un outil de découpe ou de référence quelconque pour desiner une nouvelle zone active.
Définition de l’URL d’un symbole ou d’une occurrence de bouton
Une adresse URL, ou Uniform Resource Locator, est un lien vers une autre page Web, un site
Web ou un point d’ancrage sur une même page Web. L’URL peut correspondre à la propriété du
symbole ou de l’occurrence d’un bouton. Dans le Vérificateur de propriétés ou le panneau URL,
vous pouvez lier une URL à l’occurrence d’un bouton.
Vous pouvez lier une URL à un symbole pour que cette URL apparaisse dans le champ Lien du
Vérificateur de propriétés de chaque occurrence. Cela est très utile lorsque vous définissez des
adresses URL absolues dans un site ; dans le vérificateur de propriétés, il suffit d’indiquer la
dernière partie l’URL dans le champ Lien de chaque occurrence pour lier les occurrences du
bouton.
Remarque : Pour plus d’informations sur les adresses URL absolues et relatives, voir « URL absolues et relatives »
à la page 266.
Pour définir l’adresse URL d’un symbole de bouton dans l’éditeur de boutons :
1
Dans l’éditeur de boutons, procédez de l’une des manières suivantes pour ouvrir le bouton :
• Double-cliquez sur l’occurrence du bouton dans l’espace de travail.
• Dans le panneau Bibliothèque, double-cliquez sur l’aperçu du bouton ou sur l’icône du symbole, à
côté du symbole du bouton.
2
Cliquez sur l’onglet Zone active de l’éditeur de boutons.
3
Sélectionnez la découpe ou la référence de la zone active.
4
Utilisez l’une des méthodes suivantes :
Création de boutons et de menus déroulants 303
• Indiquez l’URL dans le champ Lien du Vérificateur de propriétés.
• Choisissez une URL dans le panneau URL.
Remarque : La modification l’URL du symbole d’un bouton ne modifie pas l’URL des autres occurrences de ce
symbole qui possèdent déjà des URL exclusives. Ce principe s’applique également aux modifications de la cible
et du texte de description du symbole d’un bouton.
Pour définir l’URL de l’occurrence d’un bouton dans l’espace de travail, procédez de l’une des
manières suivantes :
• Indiquez l’URL dans le champ Lien du Vérificateur de propriétés.
• Choisissez une URL dans le panneau URL.
Définition de la cible d’un bouton
La cible est la fenêtre ou le cadre dans lequel la page Web de destination s’ouvrira lorsque
l’utilisateur cliquera sur l’occurrence d’un bouton. Si aucune cible n’est spécifiée dans le
Vérificateur de propriétés, la page Web apparaîtra dans le même cadre ou fenêtre que le lien ayant
servi à l’appeler. La cible peut correspondre à la propriété du symbole ou de l’occurrence d’un
bouton. Vous pouvez définir la cible d’un symbole de manière à ce que toutes les occurrences du
symbole aient la même cible.
Pour définir la cible d’un symbole de bouton dans l’éditeur de boutons :
1
Dans l’éditeur de boutons, procédez de l’une des manières suivantes pour ouvrir le bouton :
• Double-cliquez sur l’occurrence du bouton dans l’espace de travail.
• Dans le panneau Bibliothèque, double-cliquez sur l’aperçu du bouton ou sur l’icône du symbole, à
côté du symbole du bouton.
2
Dans le Vérificateur de propriétés, procédez de l’une des manières suivantes :
• Dans le menu déroulant Cible, choisissez une cible prédéfinie :
Aucun ou _self charge
_blank charge
la page Web dans le même cadre ou la même fenêtre que le lien.
la page Web dans une nouvelle fenêtre, sans nom, du navigateur.
_parent charge la page Web dans le jeu de cadres ou dans la fenêtre parente du cadre contenant
le lien.
_top charge
la page Web dans la fenêtre de base du navigateur, remplaçant tous les cadres.
• Indiquez la cible dans le champ Cible.
Remarque : La modification la cible du symbole d’un bouton ne modifie pas la cible URL des autres occurrences
de ce symbole qui possèdent déjà des cibles exclusives. Ce principe s’applique également aux modifications de
l’URL et du texte de description du symbole d’un bouton.
Pour définir la cible de l’occurrence d’un bouton dans l’espace de travail :
1
Sélectionnez l’occurrence dans l’espace de travail.
2
Dans le Vérificateur de propriétés, procédez de l’une des manières suivantes :
304 Chapitre 13
• Dans le menu déroulant Cible, choisissez une cible prédéfinie :
Aucun ou _self charge
_blank charge
la page Web dans le même cadre ou la même fenêtre que le lien.
la page Web dans une nouvelle fenêtre, sans nom, du navigateur.
_parent charge la page Web dans le jeu de cadres ou dans la fenêtre parente du cadre contenant
le lien.
_top charge
la page Web dans la fenêtre de base du navigateur, remplaçant tous les cadres.
• Indiquez la cible dans le champ Cible.
Définition du texte de description d’un symbole ou d’une occurrence de
bouton
Le texte de description est affiché dans le cadre d’une image pendant le téléchargement de cette
dernière à partir du Web ou à la place d’une image ne pouvant pas être chargée. Il remplace
également le graphisme lorsque l’utilisateur interdit l’affichage d’images dans le navigateur. Le
texte de description peut correspondre à la propriété du symbole ou de l’occurrence d’un bouton.
Vous pouvez définir le texte de description du symbole ou de l’occurrence d’un bouton dans le
Vérificateur de propriétés.
Remarque : Des applications d’aide aux malvoyants lisent le texte de description des graphismes des pages Web
dans un navigateur. Dans la mesure du possible, le texte de description doit être concis et explicite.
Pour définir le texte de description du symbole d’un bouton dans l’éditeur de boutons :
1
Dans l’éditeur de boutons, procédez de l’une des manières suivantes pour ouvrir le bouton :
• Double-cliquez sur l’occurrence du bouton dans l’espace de travail.
• Dans le panneau Bibliothèque, double-cliquez sur l’aperçu du bouton ou sur l’icône du
symbole, à côté du symbole du bouton.
2
Dans le Vérificateur de propriétés, tapez le texte devant apparaître comme texte de description
dans un navigateur.
Remarque : La modification du texte de description du symbole d’un bouton ne modifie pas le texte de
description des autres occurrences de ce bouton qui possèdent déjà un texte de description. Ce principe
s’applique également aux modifications de la cible et de l’URL du symbole d’un bouton.
Pour définir le texte de description de l’occurrence d’un bouton dans l’espace de travail :
1
Sélectionnez l’occurrence dans l’espace de travail.
2
Tapez le texte de description dans le champ Texte de description du Vérificateur de propriétés.
Création d’une barre de navigation
Une barre de navigation est un groupe de boutons qui fournissent des liens entre les différentes
zones d’un site Web. En général, elle reste est la même dans l’ensemble des pages du site Web,
assurant ainsi une méthode de navigation constante quelque soit l’endroit où l’utilisateur se
trouve dans le site. La barre de navigation est donc identique d’une page Web à l’autre mais, dans
certains cas, les liens sont spécifiques à chaque page.
Pour créer une barre de navigation dans Fireworks, créez un symbole de bouton dans l’éditeur de
boutons, puis placez les occurrences de ce symbole dans l’espace de travail.
Création de boutons et de menus déroulants 305
Pour créer une barre de navigation de base :
1
Créez un symbole de bouton. Pour plus d’informations, voir « Création d’un symbole de
bouton » à la page 295.
2
Tirez une occurrence (copie) du symbole depuis le panneau Bibliothèque dans la zone de
travail.
3
Pour créer une copie de l’occcurrence, procédez de l’une des manières suivantes :
• Sélectionnez l’occurrence, puis choisissez Edition > Cloner.
• Maintenez enfoncée la touche Alt (Windows) ou Option (Macintosh) tout en faisant glisser
l’occurrence du bouton.
Une copie de l’occurrence est alors créée.
4
Pour positionner le bouton cloné, maintenez enfoncée la touche Maj en appuyant plusieurs
fois sur une touche de direction. Pour un contrôle plus précis, utilisez les touches de direction
sans maintenir enfoncée la touche Maj.
5
Pour créer d’autres occurrences, répétez les étapes 3 et 4.
6
Sélectionnez chaque occurrence et affectez-leur un texte de description, une URL et des
propriétés exclusives dans le Vérificateur de propriétés.
Création de menus contextuels
Les menus contextuels sont des menus qui apparaissent dans un navigateur en réponse à un
événement souris (survol ou clic) sur un objet Web de déclenchement tel qu’une découpe ou une
référence. Les éléments d’un menu contextuel peuvent être associés à des liens URL pour la
navigation. Par exemple, vous pouvez utiliser des menus contextuels pour organiser plusieurs
options de navigation reliées à un bouton d’une barre de navigation. Vous pouvez créer des sousmenus dans les menus contextuels et disposer ainsi d’autant de niveaux que vous le souhaitez.
Chaque élément d’un menu contextuel apparaît sous la forme d’un code HTML ou d’une cellule
d’image ayant un état Relevé, Au-dessus et un texte de description dans les deux états. Pour
prévisualiser un menu contextuel, appuyez sur la touche F12 pour l’afficher dans un navigateur. Il
n’est pas possible de prévisualiser un menu contextuel dans l’espace de travail de Fireworks MX.
Editeur de menus contextuels
L’éditeur de menus contextuels est une boîte de dialogue dotée d’onglets qui vous guide tout au long du
processus de création du menu contextuel. Ses nombreuses options de contrôle des caractéristiques de
menu contextuel sont réparties sur quatre onglets :
L’onglet Contenu contient les options permettant de définir la structure du menu de base, ainsi
que le texte, le lien URL et la cible de chaque élément du menu.
L’onglet Aspect contient les options permettant de définir l’aspect de l’état Relevé et Au-dessus de
chaque cellule du menu, ainsi que l’orientation verticale ou horizontale du menu.
L’onglet Avancé contient les options permettant de définir les dimensions, la marge inférieure et
l’espacement des cellules, la largeur et la couleur de bordure des cellules, l’intervalle des menus et
le retrait du texte.
L’onglet Position contient les options permettant de définir la position des sous-menus :
306 Chapitre 13
• L’option Menu place le menu contextuel par rapport à la découpe. Avec les positions
prédéfinies, vous pouvez placer le menu contextuel en bas, dans la partie inférieure, la partie
supérieure et la partie supérieure droite d’une découpe.
• L’option Sous-menu permet de placer le sous-menu contextuel à droite ou dans la partie
inférieure droite du menu parent ou en-dessous de ce dernier.
En fonction du menu contextuel que vous créez, vous n’aurez peut être pas besoin d’utiliser tous
les onglets ou options de l’éditeur de menus contextuels. Vous pouvez à tout moment modifier
des options d’un onglet, mais vous devez ajouter au moins une option de menu dans l’onglet
Contenu pour créer un menu que vous prévisualiserez dans un navigateur.
Création d’un menu contextuel de base
C’est dans l’onglet Contenu de l’éditeur de menus contextuels que vous définissez la structure de
base et le contenu du menu contextuel. Les options actives ou par défaut des autres onglets de
l’éditeur de menus contextuels sont appliquées lors de la création du menu.
Pour créer un menu contextuel simple :
1
Sélectionnez la référence ou la découpe qui servira de zone de déclenchement du menu
contextuel.
2
Pour ouvrir l’éditeur de menus contextuels, procédez de l’une des manières suivantes :
• Choisissez Modifier > Menu contextuel > Ajouter menu contextuel.
• Cliquez sur la poignée de comportement, au milieu de la découpe, puis choisissez Ajouter
menu contextuel.
3
Cliquez sur l’onglet Contenu.
Création de boutons et de menus déroulants 307
4
Cliquez sur le bouton Ajouter un menu pour ajouter une option de menu vide.
Vous pouvez à tout moment ajouter ou effacer des cellules.
5
Double-cliquez sur chaque cellule et tapez ou choisissez l’information qui convient :
Texte indique
le texte de l’option du menu.
Lien définit l’URL de l’option du menu. Vous pouvez spécifier un lien personnalisé ou en
choisir un dans le menu contextuel Lien, s’il en existe de disponible. Si vous avez affecté des
URL aux autres objets Web du document, elles appararaîtront dans le menu contextuel Lien.
Cible désigne la cible de l’URL. Vous pouvez spécifier une cible personnalisée ou en choisir une
prédéfinie dans le menu contextuel Cible.
La saisie du contenu sur la dernière ligne de la fenêtre insère automatiquement une ligne vide
en-dessous la dernière ligne.
Conseil : Pour passer de la cellule active à une autre cellule et continuer la saisie des informations, appuyez sur la
touche Tab. Utilisez les touches de direction Vers le bas ou Vers le haut pour faire défiler la liste verticalement.
6
Répétez les étapes 4 et 5 jusqu’à ce que tous les élements de menu soient définis.
7
Vous pouvez également supprimer un élément de menu. Pour ce faire, sélectionnez l’élément
concerné, puis cliquez sur le bouton Menu supprimer.
8
Utilisez l’une des méthodes suivantes :
• Cliquez sur Suivant pour accéder à l’onglet Aspect ou choisissez une autre onglet pour
continuer la création du menu contextuel.
• Créez les entrées du sous-menu du menu contextuel. Pour plus d’informations, voir « Création
de sous-menus dans un menu contextuel » à la page 308.
• Cliquez sur Terminé pour achever la création du menu contextuel et fermer l’éditeur de menus
contextuels.
Dans l’espace de travail, la référence ou la découpe sur laquelle vous avez créé le menu
contextuel affiche un trait de comportement de couleur bleue relié à un contour du niveau
supérieur du menu contextuel.
Remarque : Pour prévisualiser un menu contextuel, appuyez sur la touche F12 pour l’afficher dans un navigateur.
Il n’est pas possible de prévisualiser un menu contextuel dans l’espace de travail de Fireworks MX.
Création de sous-menus dans un menu contextuel
A l’aide des boutons Menu Renforcement et Menu Renforcement négatif de l’éditeur de menus
contextuels, vous pouvez créer des sous-menus. Ces menus contextuels apparaissent lorsque que le
pointeur survole un autre élément de menu contextuel ou que vous cliquez sur cet élément. Vous
pouvez créer autant de niveaux de sous-menus que vous le désirez.
Pour créer un sous-menu contextuel :
1
Ouvrez l’onglet contenu de l’éditeur de menus contextuels et créez des éléments de menu.
Créez les éléments de menu que vous comptez également utiliser pour le sous-menu et placezles directement sous l’élément pour lequel ils représenteront un sous-menu. Pour plus
d’informations, voir « Création d’un menu contextuel de base » à la page 307.
2
Cliquez et sélectionnez l’élément de menu contextuel qui sera un élément de sous-menu.
308 Chapitre 13
3
Cliquez sur le bouton Menu Renforcement pour faire de cet élement un élément de sous-menu
apparaissant sous l’élément placé directement au-dessus lui dans la liste des éléments de menu.
4
Pour insérer l’élément suivant dans le sous-menu, mettez cet élément en surbrillance et cliquez
sur le bouton Menu renforcement.
Tous les éléments adjacents et mis en retrait au même niveau representent un seul sous-menu
contextuel.
5
Pour insérer un nouvel élément juste en dessous de l’élément mis en surbrillance, vous pouvez
également sélectionner un menu ou sous-menu et cliquez sur le bouton Ajouter un menu.
6
Utilisez l’une des méthodes suivantes :
• Cliquez sur Suivant pour accéder à l’onglet suivant ou choisissez une autre onglet pour continuer
la création du menu contextuel.
• Cliquez sur Terminé pour refermer l’éditeur de menus contextuels.
Pour créer un sous-menu contextuel au sein d’un sous-menu contextuel :
1
Sélectionnez un élément de sous-menu contextuel dans l’onglet Contenu de l’éditeur de menus
contextuels. Pour plus d’informations, se reporter à la procédure précédente.
2
Cliquez sur le bouton Menu Renforcement pour remettre en retrait le sous-menu, afin qu’il
soit positionné en retrait par rapport au sous-menu situé directement au-dessus.
Continuez la mise en retrait pour créer d’autres sous-menus au sien des sous-menus, avec autant
de niveaux que vous le désirez.
Pour placer un élément de menu dans un sous-menu de niveau supérieur ou dans le menu
contextuel principal :
1
Sélectionnez l’élément dans l’onglet Contenu de l’éditeur de menus contextuels.
2
Cliquez sur le bouton Menu Renforcement.
Pour plus d’informations sur le positionnement des sous-menus, voir « Positionnement des
menus contextuels et des sous-menus » à la page 314.
3
Pour terminer la création des menus contextuels ou pour continuer à en créer d’autres,
procédez de l’une des manières suivantes :
• Cliquez sur Suivant pour accéder à l’onglet Aspect ou choisissez une autre onglet pour
continuer la création du menu contextuel.
• Cliquez sur Terminé pour fermer l’éditeur de menus contextuels.
Dans l’espace de travail, la référence ou la découpe sur laquelle vous avez créé le menu
contextuel affiche un trait de comportement de couleur bleue relié à un contour du niveau
supérieur du menu contextuel.
Remarque : Pour prévisualiser un menu contextuel, appuyez sur la touche F12 pour l’afficher dans un navigateur.
Il n’est pas possible de prévisualiser un menu contextuel dans l’espace de travail de Fireworks MX.
Création de boutons et de menus déroulants 309
Réglage de l’apparence d’un menu contextuel
Après avoir créé un menu de base et des sous-menus optionnels, vous pouvez mettre en forme le
texte, appliquer des attributs graphiques aux états Au-dessus et Relevé ou choisir l’option
d’orientation verticale ou horizontale à partir de l’onglet Aspect de l’éditeur de menus contextuels.
Pour définir l’orientation d’un sous-menu contextuel :
1
Dans l’éditeur de menus contextuels, ouvrez le menu contextuel désiré et cliquez sur l’onglet
Aspect.
Pour plus d’informations sur l’ouverture d’un menu contextuel existant dans l’éditeur de
menus contextuels, voir « Modification d’un menu contextuel » à la page 315.
2
Dans le menu Orientation, choisissez l’option Verticale ou Horizontale.
Pour indiquer si un menu contextuel est un menu à base de code HTML ou de graphismes :
1
Dans l’éditeur de menus contextuels, ouvrez le menu contextuel désiré et cliquez sur l’onglet
Aspect.
Pour plus d’informations sur l’ouverture d’un menu contextuel existant dans l’éditeur de
menus contextuels, voir « Modification d’un menu contextuel » à la page 315.
2
Choisissez une option Cellules :
HTML définit
l’apparence du menu en utilisant un code HTML uniquement. Cette option
crée de pages correspondant à des fichiers de petite taille.
Image propose
une sélection de styles de graphisme pour l’arrière-plan des cellules. Cette
option crée des pages correspondant à des fichiers de taille importante.
Remarque : Vous pouvez enrichir cette sélection de styles en créant des styles de menu contextuel
personnalisés. Pour plus d’informations, voir « Ajout des styles de menu contextuel » à la page 311.
310 Chapitre 13
Pour mettre en forme le texte dans le menu contextuel actif :
1
Dans l’éditeur de menus contextuels, ouvrez le menu contextuel désiré et cliquez sur l’onglet
Aspect.
Pour plus d’informations sur l’ouverture d’un menu contextuel existant dans l’éditeur de
menus contextuels, voir « Modification d’un menu contextuel » à la page 315.
2
Dans le menu contextuel Taille, choisissez une taille prédéfinie ou indiquez une valeur dans le
champ Taille.
Remarque : Lorsque la largeur et la hauteur des cellules est réglée sur Automatique, dans l’onglet Avancé de
l’éditeur de menus contextuels, la taille du texte détermine celle des graphismes associés à l’élément de menu.
3
Dans le menu contextuel Police, choisissez un groupe de polices système ou indiquez le nom
d’une police personnalisée.
Remarque : Soyez prudent lorsque vous choisissez une police. Si les utilisateurs qui visualiseront votre page
Web n’ont pas installé sur leur ordinateur la police que vous avez choisie, une police de substitution sera utilisée
dans leur navigateur Web.
4
Pour appliquer le style gras ou italique, vous pouvez également cliquer sur un bouton de style
de texte.
5
Cliquez sur un bouton de justification pour aligner le texte à gauche ou à droite ou pour le
centrer.
6
Choisissez une couleur dans la source de couleurs.
Pour définir l’apparence des cellules de menu :
1
Dans l’éditeur de menus contextuels, ouvrez le menu contextuel désiré et cliquez sur l’onglet
Aspect.
Pour plus d’informations sur l’ouverture d’un menu contextuel existant dans l’éditeur de
menus contextuels, voir « Modification d’un menu contextuel » à la page 315.
2
Choisissez les couleurs du texte et des cellules pour chaque état.
3
Si vous avez choisi Image comme type de cellule, choisissez un style graphique pour chaque
état.
4
Utilisez l’une des méthodes suivantes :
• Cliquez sur Suivant pour accéder à l’onglet Avancé ou choisissez un autre onglet pour
continuer la création du menu contextuel.
• Cliquez sur Terminé pour fermer l’éditeur de menus contextuels.
Dans l’espace de travail, la référence ou la découpe sur laquelle vous avez créé le menu
contextuel affiche un trait de comportement de couleur bleue relié à un contour du niveau
supérieur du menu contextuel.
Remarque : Pour prévisualiser un menu contextuel, appuyez sur la touche F12 pour l’afficher dans un navigateur.
Il n’est pas possible de prévisualiser un menu contextuel dans l’espace de travail de Fireworks MX.
Ajout des styles de menu contextuel
Vous pouvez ajouter des styles de cellule personnalisés dans l’éditeur de menus contextuels. Des
styles de cellule personnalisés et prédéfinis sont proposés dans l’onglet Aspect lorsque vous
choisissez l’option Image comme type de cellule pour utiliser un arrière-plan graphique dans les
cellules des menus contextuels.
Création de boutons et de menus déroulants 311
Pour ajouter un style de cellule personnalisé à la sélection de styles de cellule de l’onglet Aspect
de l’éditeur de menus contextuels :
1
Appliquez une combinaison de trait, trame, texture et effets en direct à un objet, et enregistrez
cette combinaison sous forme de style dans le panneau Styles. Pour plus d’informations, voir
« Création et suppression de styles » à la page 256.
2
Dans le panneau Styles, sélectionnez le nouveau style, puis choisissez Exporter des styles dans le
menu Options du panneau Styles.
3
Localisez le dossier Nav Menu sur votre disque dur, renommez le fichier de styles, si vous le
désirez, puis cliquez sur Enregistrer.
Remarque : L’emplacement exact du dossier Nav Menu varie en fonction du système d’exploitation. Pour plus
d’informations, voir « Utilisation des fichiers de configuration » à la page 439.
Lorsque vous revenez à l’onglet Aspect de l’éditeur de menus contextuels et choisissez l’option
Image d’arrière-plan des cellules, le nouveau style s’affiche avec les styles prédéfinis associés aux
états Relevé et Au-dessus des cellules du menu contextuel.
Définition des propriétés avancées de menu contextuel
Dans l’éditeur de menus contextuels, l’onglet Avancé propose des options supplémentaires
permettant de définir la taille, les marges intérieures et l’espacement des cellules ; le retrait du texte,
le delai de disparition du menu ; la largeur, la couleur, l’ombre et la surbrillance des bordures.
Pour définir des propriétés de cellule avancées pour le menu contextuel actif :
1
Dans l’éditeur de menus contextuels, ouvrez le menu contextuel désiré et cliquez sur l’onglet
Avancé.
Pour plus d’informations sur l’ouverture d’un menu contextuel existant dans l’éditeur de
menus contextuels, voir « Modification d’un menu contextuel » à la page 315.
312 Chapitre 13
2
Dans le menu déroulant Automatique/Fixe, choisissez une largeur ou une hauteur maximale :
Automatique règle la hauteur de cellule sur la taille du texte définie dans l’onglet Aspect de l’éditeur
de menus contextuels et la largeur de cellule sur celle de l’élément de menu contenant le texte le plus
long.
Pixels permet d’indiquer des valeurs spécifiques, en pixels, dans les champs Largeur de cellule
et Hauteur de cellule.
3
Indiquez une valeur dans le champ Marge intérieure des cellules pour définir la distance entre
le texte du menu contextuel et la bordure de la cellule.
4
Indiquez une valeur dans le champ Espacement des cellules pour définir l’espacement entre les
cellules du menu.
5
Indiquez une valeur dans le champ Retrait du texte pour définir la valeur du retrait du texte du
menu contextuel.
6
Indiquez une valeur dans le champ Menu intervalle pour définir, en secondes, la durée pendant
laquelle le menu reste affiché après son survol par le pointeur.
7
Propriétés prédéfinies pour bordures de menu contextuel :
Afficher les bordures permet d’afficher ou de masquer les bordures du menu contextuel. Si
cette option n’est pas sélectionnée, les options ci-dessous sont désactivées.
Largeur de bordure définit
la largeur de la bordure du menu contextuel.
Couleur de bordure, Ombre et Surbrillance permettent
de modifier la couleur des bordures du
menu contextuel.
Remarque : Plusieurs de ces options sont désactivées lorsque l’option Image est le type de cellule sélectionnée
dans l’onglet Aspect.
8
Pour achever la création des menus contextuels ou pour continuer à en créer d’autres, procédez
de l’une des manières suivantes :
• Cliquez sur Suivant pour accéder à l’onglet Position ou choisissez une autre onglet pour
continuer la création du menu contextuel.
• Cliquez sur Terminé pour fermer l’éditeur de menus contextuels. Dans l’espace de travail, la
référence ou la découpe sur laquelle vous avez créé le menu contextuel affiche un trait de
comportement de couleur bleue relié à un contour du niveau supérieur du menu contextuel.
Remarque : Pour prévisualiser un menu contextuel, appuyez sur la touche F12 pour l’afficher dans un navigateur.
Il n’est pas possible de prévisualiser un menu contextuel dans l’espace de travail de Fireworks MX.
Création de boutons et de menus déroulants 313
Positionnement des menus contextuels et des sous-menus
L’onglet Position de l’éditeur de menus contextuels permet de définir la position d’un menu
contextuel. Vous pouvez également positionner un menu contextuel de niveau supérieur en
déplaçant son contour dans l’espace de travail lorsque le Calque Web est visible.
Pour définir la position d’un menu contextuel dans l’éditeur de menus contextuels :
1
Dans l’éditeur de menus contextuels, ouvrez le menu contextuel désiré et cliquez sur l’onglet
Position.
Pour plus d’informations sur l’ouverture d’un menu contextuel existant dans l’éditeur de
menus contextuels, voir « Modification d’un menu contextuel » à la page 315.
2
Pour définir la position du menu, procédez de l’une des manières suivantes :
• Cliquez sur le bouton Position pour positionner le menu contextuel par rapport à sa découpe
de déclenchement.
• Indiquez les coordonnées X et Y. Les valeurs 0,0 alignent l’angle supérieur gauche du menu
contextuel sur l’angle supérieur gauche de la découpe de déclenchement.
3
Utilisez l’une des méthodes suivantes :
• Si vous avez des sous-menus, positionnez-les comme indiqué dans la procédure qui suit.
• Cliquez sur En arrière pour modifier les propriétés dans les autres onglets.
• Cliquez sur Terminé pour fermer l’éditeur de menus contextuels.
314 Chapitre 13
Pour définir la position d’un sous-menu contextuel dans l’éditeur de menus contextuel :
1
Dans l’éditeur de menus contextuels, ouvrez le menu contextuel désiré et cliquez sur l’onglet
Position.
Pour plus d’informations sur l’ouverture d’un menu contextuel existant dans l’éditeur de
menus contextuels, voir « Modification d’un menu contextuel » à la page 315.
2
Pour définir la position du sous-menu, procédez de l’une des manières suivantes :
• Cliquez sur le bouton Position pour positionner le sous-menu contextuel par rapport à son
élément déclencheur.
• Indiquez les coordonnées X et Y. Les valeurs 0,0 alignent l’angle supérieur gauche du sousmenu contextuel sur l’angle supérieur droit du menu ou de l’élément de menu déclencheur.
3
Utilisez l’une des méthodes suivantes :
• Pour définir la position de chaque sous-menu par rapport à l’élément de menu parent qui le
déclenche, choisissez l’option Placer à la même position.
• Pour définir la position de chaque sous-menu par rapport à l’ensemble du sous-menu
contextuel, désactivez l’option Placer à la même position.
4
Cliquez sur Terminé pour quitter l’éditeur de menus contextuel ou sur En arrière pour
modifier les propriétés des autres onglets.
Pour définir la position d’un menu contextuel en le déplaçant :
1
Procédez de l’une des manières suivantes pour afficher le Calque Web :
• Dans le panneau Outils, cliquez sur le bouton Affiche les découpes et les références.
• Cliquez sur la colonne Oeil, dans le panneau Calques.
2
Sélectionnez l’objet Web de déclenchement du menu contextuel.
3
Dans l’espace de travail, tirez le contour du menu contextuel vers un autre emplacement.
Modification d’un menu contextuel
L’éditeur de menus contextuels permet de modifier ou de mettre à jour le contenu d’un menu
contextuel, de réorganiser les éléments de menu ou de modifier des propriétés dans n’importe
lequel des quatre onglets.
Pour modifier le contenu d’un menu dans l’éditeur de menus contextuels :
1
Procédez de l’une des manières suivantes pour afficher le Calque Web :
• Dans le panneau Outils, cliquez sur le bouton Affiche les découpes et les références.
• Cliquez sur la colonne Oeil, dans le panneau Calques.
2
Sélectionnez la découpe à laquelle le menu est affecté.
3
Double-cliquez sur le contour bleu du menu contextuel, dans l’espace de travail.
L’éditeur de menus contextuel s’ouvre, affichant les entrées du menu contextuel.
4
Effectuez les modifications voulues dans n’importe lequel des quatre onglets et cliquez sur
Terminé.
Création de boutons et de menus déroulants 315
Pour modifier une entrée de menu contextuel :
1
Dans l’éditeur de menus contextuels, ouvrez le menu contextuel désiré et cliquez sur l’onglet
Contenu.
2
Double-cliquez dans les champs Texte, Lien ou Cible pour modifier le texte du menu.
3
Cliquez à l’extérieur de la liste des entrées pour appliquer les modifications.
4
Cliquez sur Terminé.
Pour déplacer une entrée dans le menu contextuel :
1
Dans l’éditeur de menus contextuels, ouvrez le menu contextuel désiré et cliquez sur l’onglet
Contenu.
2
Déplacez l’élément de menu vers l’emplacement désiré dans la liste.
3
Cliquez sur Terminé.
Exportation des menus contextuels
Fireworks génère tout le code JavaScript nécessaire à l’affichage de menus contextuels dans un
navigateur Web. Lorsqu’un document Fireworks contenant des menus contextuels est exporté en
fichier HTML, un fichier JavaScript appelé mm_menu.js est exporté vers le même emplacement
que le fichier HTML.
Lorsque vous transférez vos fichiers sur le serveur, ce fichier menu.js doit être transféré dans le
même dossier que la page Web qui contient le menu contextuel. Si vous désirez stocker ce fichier
dans un autre emplacement, tous les liens hypertextes faisant référence à mm_menu.js dans le
code HTML de Fireworks doivent être mis à jour pour refléter ce nouvel emplacement. Si votre
document contient plusieurs menus contextuels ou si plusieurs documents contiennent des
menus contextuels, Fireworks ne crée pas pour autant de fichiers mm_menu.js supplémentaires :
un seul fichier est utilisé pour tous les menus des documents.
Lorsque vous insérez des sous-menus, Fireworks génère un fichier image appelé arrow.gif. Il s’agit
de l’image de la petite flèche qui apparaît à côté d’un élément de menu et qui indique à
l’utilisateur qu’il existe un sous-menu. Quel que soit le nombre de sous-menus que contient votre
document, Fireworks utilise toujours le même fichier arrow.gif.
Pour plus d’informations sur l’exportation de fichier HTML et JavaScript, voir « Exportation du
fichier au format HTML » à la page 362.
316 Chapitre 13
CHAPITRE 14
Création d’animations
L’animation de graphismes ajoute une dimension attrayante et sophistiquée aux sites Web.
Fireworks MX permet de créer des graphismes animés pour faire se déplacer vos bannières, logos,
bandes dessinées, etc. Par exemple, la mascotte qui symbolise votre société peut danser sur une
page pendant que le logo apparaît et disparaît.
Dans Fireworks, les animations sont réalisées en créant des symboles et en modifiant leurs
propriétés sur une échelle temporelle, afin de créer l’illusion du mouvement. Vous pouvez
considérer les symboles comme des acteurs dont vous mettez les mouvements en scène. L’action
de chaque symbole est enregistrée dans une image. Lorsque toutes ces images sont reproduites à la
suite, en séquence, vous obtenez l’illusion du mouvement.
Vous pouvez appliquer divers paramètres aux symboles afin de faire changer peu à peu le contenu
des images successives. Un symbole peut sembler se déplacer dans l’image, apparaître ou
disparaître progressivement, grossir ou rétrécir, ou encore pivoter.
Comme un même fichier contient plusieurs symboles, vous pouvez créer une animation complexe
dans laquelle différents types d’actions se produisent simultanément.
Le panneau Optimiser permet de définir les paramètres d’optimisation et d’exportation lors de la
création du fichier. Fireworks peut exporter des animations dans les formats GIF animé ou Flash
SWF. Vous pouvez également importer des animations Fireworks directement dans Macromedia
Flash pour l’améliorer.
Création d’une animation
Dans Fireworks, les animations sont créées en affectant des propriétés à des objets appelés
symboles d’animation. L’animation d’un symbole est répartie dans une suite d’images, qui
contient les images et objets constituant chaque phase de l’animation. Une animation peut
comporter plusieurs symboles, et chacun d’eux peut avoir une action différente. Les divers
symboles peuvent être animés sur un nombre d’images différent. L’animation se termine lorsque
toutes les actions de tous les symboles sont terminées.
Pour créer une animation à partir des symboles d’animation de Fireworks :
1
Créez un symbole d’animation, soit en créant un nouveau symbole, soit en convertissant un
objet existant en symbole. Pour plus d’informations, voir « Création de symboles
d’animations » à la page 318.
317
2
Dans le Vérificateur de propriétés ou dans la boîte de dialogue Animer, indiquez les paramètres
d’animation du symbole. Vous pouvez définir l’angle et la direction du mouvement, l’échelle,
l’opacité (pour les apparitions et disparitions progressives), ainsi que l’angle et la direction de la
rotation. Pour plus d’informations, voir « Modification d’un symbole d’animation » à la
page 319.
Remarque : L’angle et la direction du mouvement sont définis uniquement dans la boîte de dialogue Animer.
3
Les contrôles Cadence des images du panneau Images permettent de définir la vitesse des
mouvements. Pour plus d’informations, voir « Réglage de la cadence d’images » à la page 322.
4
Optimisez le document au format GIF animé. Pour plus d’informations, voir « Optimisation
d’une animation » à la page 330.
5
Exportez le document sous forme de fichier GIF animé ou SWF, ou enregistrez-le sous forme
de fichier PNG Fireworks et importez-le dans Macromedia Flash pour l’améliorer. Pour plus
d’informations, voir « Formats d’exportation des animations » à la page 330.
Utilisation des symboles d’animation
Les symboles d’animation exécutent des actions dans votre fichier Fireworks, comme des acteurs
de film. Par exemple, dans une animation représentant trois oies sauvages traversant le ciel,
chaque oie est un personnage.
Un symbole d’animation peut être composé de n’importe quel objet que vous créez ou importez,
et il peut y avoir un grand nombre de symboles dans un même fichier. Chaque symbole possède
ses propres propriétés et est animé indépendamment. Vous pouvez donc créer des symboles qui
traversent l’écran, pendant que d’autres apparaissent progressivement ou changent de taille.
Il n’est pas nécessaire d’utiliser des symboles pour chaque aspect de votre animation. Cependant,
outre les avantages présentés dans ce chapitre, l’utilisation des symboles et occurrences des
graphismes qui apparaissent dans plusieurs images permet de réduire la taille de vos fichiers
d’animation.
Vous pouvez modifier les propriétés des symboles d’animation à tout moment, à l’aide de la boîte
de dialogue Animer ou du Vérificateur de propriétés. Vous pouvez aussi modifier les graphismes
que contiennent les symboles dans l’éditeur de symboles. Celui-ci permet de modifier un symbole
sans affecter le reste du document. Vous pouvez également modifier le déplacement d’un symbole
en changeant son trajet.
Comme les symboles d’animation sont automatiquement placés dans la bibliothèque, vous
pouvez les réutiliser pour créer de nouvelles animations.
Création de symboles d’animations
Après avoir créé un symbole d’animation, vous pouvez définir les propriétés qui déterminent le
nombre d’images de l’animation et le type d’action (changement d’échelle ou rotation, par
exemple). Par défaut, le nouveau symbole d’animation comporte cinq images, dont chacune est
affichée pendant 0,07 centièmes de seconde.
Pour créer un symbole d’animation :
1
Choisissez Edition > Insertion > Nouveau symbole.
2
Dans la boîte de dialogue Propriétés du symbole, indiquez le nom du nouveau symbole.
3
Choisissez l’option Animation, puis cliquez sur OK.
318 Chapitre 14
4
Dans l’éditeur, créez un nouvel objet à l’aide des outils dessin ou texte.
Vous pouvez tracer des objets vectoriels ou bitmap.
5
Fermez la fenêtre de l’éditeur de symboles.
Fireworks classe le symbole dans la bibliothèque, et en place une copie au centre du document.
Vous pouvez ajouter de nouvelles images au symbole à l’aide du curseur Images du Vérificateur de
propriétés. Choisissez Fenêtre > Propriétés pour ouvrir le Vérificateur de propriétés, si nécessaire.
Pour convertir un objet en symbole d’animation :
1
Sélectionnez l’objet.
2
Choose Modification > Animation > Animer la sélection.
3
Indiquez les paramètres désirés dans la boîte de dialogue. Pour plus d’informations sur les
paramètres, voir « Modification d’un symbole d’animation » à la page 319.
Les contrôles d’animation apparaissent sur le cadre qui délimite l’objet, et une copie de ce
dernier est ajoutée à la bibliothèque.
Modification d’un symbole d’animation
Vous pouvez manipuler les propriétés des symboles d’animation pour rendre votre site Web
attractif. Vous pouvez modifier un grand nombre de caractéristiques, de la vitesse d’animation à
l’opacité en passant par la rotation. En manipulant ces caractéristiques, un symbole peut tourner
sur lui-même, accélérer, apparaître et disparaître progressivement, et ces effets peuvent être
combinés.
La principale propriété pour tout symbole d’animation est son nombre d’images. Cette propriété
définit le nombre d’étapes qu’il faut au symbole pour effectuer son animation. Lorsque vous
définissez le nombre d’images d’un symbole, Fireworks ajoute automatiquement au document le
nombre d’images nécessaire pour accomplir cette action. Si le symbole nécessite plus d’images
qu’il n’en existe dans l’animation, Fireworks vous demande si vous souhaitez ajouter des images.
Modifications des propriétés des symboles d’animation
Vous pouvez modifier les propriétés des symboles d’animation, à l’aide de la boîte de dialogue
Animer ou du Vérificateur de propriétés.
Propriétés des symboles d’animation dans le Vérificateur de propriétés
Vous pouvez modifier les propriétés suivantes d’un symbole d’animation :
Images est le nombre d’images à inclure dans l’animation. Bien que le curseur n’autorise qu’un
maximum de 250 images, vous pouvez spécifier n’importe quelle valeur dans le champ Images. La
valeur par défaut est 5.
Création d’animations 319
Mouvement est la distance, en pixels, que doit parcourir chaque objet. Cette option est accessible
uniquement dans la boîte de dialogue Animer. La plage de valeurs va de 0 à 250 pixels, 72 étant la
valeur par défaut. Les mouvements sont linéaires et il n’existe pas d’images principales (ce qui n’est
pas le cas dans Macromedia Flash et Director).
Direction est la direction, en degrés, de déplacement de l’objet. Les valeurs possibles vont de 0 à
360 degrés. Cette option est accessible uniquement dans la boîte de dialogue Animer.
Vous pouvez également modifier les valeurs de Mouvement et Direction en tirant les poignées
d’animation de l’objet (voir « Modification des trajets de déplacement des symboles » à la
page 321).
Echelle est la modification de taille, en pourcentage, entre le début et la fin de l’animation. La
plage de valeurs va de 0 à 250 pixels, 100% étant la valeur par défaut. Pour mettre à l’échelle un
objet de 0 à 100%, l’objet d’origine doit être très petit ; des objets vectoriels sont recommandés.
Opacité est le degré de fondu (apparition ou disparition) entre le début et la fin de l’animation. La
plage de valeurs va de 0 à 100 pixels, 100% étant la valeur par défaut. La création d’effets
d’ouverture en fondu et de fondu enchaîné nécessite deux occurrences du même symbole — un
pour la lecture des effets d’ouverture en fondu et l’autre pour la lecture des effets de fondu
enchaîné.
Rotation est la valeur de rotation, en degrés, du symbole entre le début et la fin. Les valeurs
possibles vont de 0 à 360 degrés. Vous pouvez taper des valeurs supérieures pour obtenir plusieurs
rotations. La valeur par défaut est 0 degré.
Horaire et Anti-horaire indiquent la direction de rotation de l’objet. Horaire signifie une rotation
dans le sens des aiguilles d’une montre, et Anti-horaire dans le sens inverse.
Pour modifier les propriétés d’un symbole d’animation :
1
Sélectionnez un symbole d’animation.
2
Choisissez Modification > Animation > Paramètres pour afficher la boîte de dialogue Animer
ou Fenêtre > Propriétés pour afficher le Vérificateur de propriétés, s’il n’est pas encore ouvert.
3
Modifiez les propriétés désirées.
320 Chapitre 14
Suppression des animations
Pour supprimer des animations, supprimez le symbole d’animation de la bibliothèque ou
supprimez l’animation du symbole.
Pour supprimer un symbole de la bibliothèque :
1
Dans le panneau Bibliothèque, sélectionnez le symbole d’animation à supprimer.
2
Tirez le symbole sur l’icône de poubelle, dans le coin inférieur droit.
Pour supprimer l’animation du symbole d’animation sélectionné :
Choisissez Modification > Animer > Supprimer l’animation.
Le symbole devient un symbole graphique et n’est plus animé. Si, par la suite, vous convertissez à
nouveau le symbole en symbole d’animation, les paramètres d’animation précédents seront
restaurés.
Modification des graphismes des symboles
Vous pouvez modifier le graphisme de votre symbole et ses propriétés. Pour modifier le graphisme de
votre symbole, utilisez l’éditeur de symboles. Il vous permet de modifier vos graphismes à l’aide des
outils texte, de dessin et de couleur. Lorsque vous travaillez dans l’éditeur de symboles, seul le
symbole sélectionné est affecté.
Comme ce symbole est un des éléments de la bibliothèque, si vous modifiez l’aspect de l’une de
ses occurrences vous modifiez toutes les autres.
Pour modifier les attributs du graphisme du symbole sélectionné :
1
Utilisez l’une des méthodes suivantes pour ouvrir l’éditeur de symboles :
• Double-cliquez sur l’objet symbole.
• Choisissez Modification > Symbole > Modifier le symbole.
• Cliquez sur le bouton Modification dans la boîte de dialogue Animer.
2
Modifiez le symbole d’animation et changez le texte, les traits, les trames ou les effets selon vos
besoins.
3
Fermez l’éditeur de symboles.
Modification des trajets de déplacement des symboles
Lorsque vous sélectionnez un symbole d’animation, il est entouré d’une bordure spécifique et
accompagné d’une trajectoire de déplacement qui indique la direction de son mouvement.
Sur cette trajectoire, le point vert est le point de départ et le point rouge indique le point d’arrivée.
Les points bleus intermédiaires représentent les images. Par exemple, la trajectoire d’un symbole
qui s’étend sur cinq images comporte un point vert, trois points bleus et un point rouge. La
position de l’objet sur la trajectoire indique l’image courante. Ainsi, si l’objet apparaît sur le
troisième point, l’image 3 est l’image courante.
Création d’animations 321
Vous pouvez modifier la direction du déplacement en changeant l’angle de la trajectoire.
Pour modifier le mouvement ou la direction :
Tirez l’une des poignées de début ou de fin d’animation du symbole vers un nouvel emplacement.
Le point vert indique le point de départ, le point rouge indique le point d’arrivée.
Pour contraindre la direction du déplacement par incréments de 45 degrés, maintenez la touche
MAJ enfoncée pendant que vous tirez le symbole.
Utilisation des images
Pour créer une animation, il faut disposer d’un certain nombre d’images. Le contenu de chaque
image apparaît dans le panneau Images. C’est dans le panneau Images que vous créez et organisez
les images. Vous pouvez nommer les images, les réorganiser, définir manuellement la cadence de
l’animation, et déplacer des objets d’une image dans une autre.
Colonne de la séquence
Nom de l’image
Colonne de cadence des images
Options de la
séquence
d’images
Supprimer l’image
Nouvelle image / Dupliquer
Répartir dans les images
Un certain nombre de propriétés sont également associées à chaque image. En définissant la
cadence des images ou en cachant une image, vous pouvez obtenir l’animation désirée durant la
création et la modification.
Réglage de la cadence d’images
La cadence des images détermine la durée d’affichage de chaque image. Elle est indiquée en
centièmes de seconde. Par exemple, la valeur 50 affiche l’image pendant une 50/100 (une demi
seconde), et la valeur 300 affiche l’image pendant 3 secondes.
Pour définir la cadence d’images :
1
Sélectionnez une ou plusieurs images :
322 Chapitre 14
• Pour sélectionner une plage d’images contiguës, maintenez la touche MAJ enfoncée tout en
cliquant sur les noms de la première et la dernière image.
• Pour sélectionner une plage d’images non contiguës, maintenez la touche Control (Windows)
ou Commande (Macintosh) enfoncée tout en cliquant sur le nom de chaque image désirée.
2
Utilisez l’une des méthodes suivantes :
• Choisissez Propriétés dans le menu des options du panneau Images.
• Double-cliquez sur la colonne de cadence d’image.
La fenêtre contextuelle des propriétés des images s’affiche.
3
Indiquez la valeur de cadence d’image désirée.
4
Appuyez sur Entrée ou cliquez en dehors du panneau pour fermer cette fenêtre.
Affichage et masquage d’images pour la lecture
Vous pouvez afficher ou masquer certaines images pour la lecture. Si une image est masquée, elle
ne sera pas affichée pendant la lecture et ne sera pas exportée.
Pour afficher ou masquer une image :
1
Utilisez l’une des méthodes suivantes :
• Choisissez Propriétés dans le menu des options du panneau Images.
• Double-cliquez sur la colonne de cadence d’image.
La fenêtre contextuelle des propriétés des images s’affiche.
2
Désactivez la case à cocher Inclure lors de l’exportation.
Un X rouge s’affiche à la place de la durée de cadence de cette image.
3
Appuyez sur Entrée ou cliquez en dehors de la fenêtre des propriétés des images pour fermer
cette fenêtre.
Noms des images d’une animation
Lorsque vous préparez une animation, Fireworks crée le nombre d’images nécessaire et les affiche
dans le panneau Images. Par défaut, ces images sont nommées Image 1, Image 2, etc. Lorsque
vous déplacez une image dans la séquence, Fireworks renomme les images concernées en fonction
du nouvel ordre d’apparition.
Création d’animations 323
Il peut être utile de nommer vos images pour les reconnaître aisément. De la sorte, vous saurez
toujours quelle image contient une partie précise de l’animation. Si vous déplacez une image après
l’avoir renommée, son nom ne sera pas modifié.
Pour renommer une image :
1
Dans le panneau Images, double-cliquez sur le nom de l’image.
2
Dans la zone de texte qui apparaît, tapez le nouveau nom et appuyez sur la touche Entrée.
Ajout, déplacement, copie et suppression d’images
Le panneau Images permet d’ajouter, copier et supprimer des images, ainsi que d’en modifier
l’ordre.
Pour ajouter une nouvelle image :
Cliquez sur le bouton Nouvelle image / Dupliquer dans la partie inférieure du panneau Images.
Pour ajouter des images à un emplacement spécifique de la séquence :
1
Choisissez Ajouter des images dans le menu déroulant des options du panneau Images.
2
Indiquez le nombre de nouvelles images à ajouter.
3
Choisissez si elles doivent être insérées : avant l’image courante, après cette image, au début ou
à la fin de la séquence, puis cliquez sur OK.
Pour réaliser une copie d’une image :
Tirez une image existante sur le bouton Nouvelle image / Dupliquer dans la partie inférieure du
panneau Images.
Pour copier l’image sélectionnée et la placer dans une séquence :
1
Choisissez Dupliquer l’image dans le menu déroulant des options du panneau Images.
2
Indiquez le nombre de copies à créer à partir de l’image sélectionnée, choisissez leur point
d’insertion, puis cliquez sur OK.
Il est utile de dupliquer une image si vous désirez que des objets apparaissent dans une autre partie
de l’animation.
Pour réorganiser les images :
Déplacez-les une par une à l’emplacement désiré dans la liste.
324 Chapitre 14
Pour supprimer l’image sélectionnée, exécutez l’une des actions suivantes :
• Cliquez sur le bouton Supprimer l’image dans le panneau Images.
• Tirez le nom de l’image sur le bouton Supprimer l’image.
• Choisissez Supprimer l’image dans le menu déroulant des options du panneau Images.
Déplacement des objets sélectionnés dans le panneau Images
Vous pouvez utiliser le panneau Images pour déplacer des objets dans une autre image. Les objets
qui n’apparaissent que dans une seule image semblent disparaître en cours d’animation. Vous
pouvez déplacer des objets pour les faire apparaître ou disparaître en différents points de
l’animation.
Pour déplacer l’objet sélectionné dans une autre image :
Dans le panneau Images, tirez l’indicateur de sélection (le carré bleu) qui apparaît à droite de la
durée de cadence de l’image vers son image de destination.
Partage de calques entre plusieurs images
Les calques permettent de diviser un document Fireworks en plusieurs plans verticaux discrets,
comme des couches superposées de papier calque. Dans le cadre d’une animation, vous pouvez
utiliser les calques pour organiser les objets selon qu’ils font partie de l’action principale ou de
l’arrière-plan de l’animation. Vous pouvez alors intervenir aisément sur des objets d’un calque sans
qu’ils interfèrent avec le reste de l’animation. Pour plus d’informations, voir « Utilisation des
calques » à la page 227.
Si vous désirez que des objets apparaissent tout au long de l’animation, vous pouvez les placer sur
un calque, puis partager celui-ci entre différentes images à l’aide du panneau Calques. Lorsqu’un
calque est partagé entre plusieurs images, tous les objets de calque sont visibles dans chaque
image.
Vous pouvez modifier les objets des calques partagés dans n’importe quelle image ; ces
modifications se reflètent dans toutes les autres images.
Création d’animations 325
Dans cet exemple, le calque carré de couleur rouge est partagé entre plusieurs images.
Pour partager un calque entre plusieurs images :
1
Double-cliquez sur le calque.
2
Activez la case à cocher Utiliser pour toutes les images.
Remarque : Tout le contenu d’un calque partagé apparaît sur chacune des images de ce partage.
Pour désactiver le partage d’un calque entre plusieurs images :
1
Double-cliquez sur le calque partagé.
2
Désactivez la case à cocher Utiliser pour toutes les images.
3
Choisissez l’une des options de ci-dessous pour copier des objets dans les images :
• Conservez le contenu du calque partagé uniquement dans l’image courante.
• Copiez le contenu du calque partagé dans toutes les images.
Visualisation des objets dans une image spécifique
Vous pouvez aisément visualiser des objets dans un image spécifique à l’aide du menu déroulant
Image du panneau Claques.
Pour visualiser des objets dans une image spécifique :
Choisissez une image dans le menu déroulant Images, dans la partie inférieure du panneau Calques.
Tous les objets présents dans cette image apparaissent dans le panneau Claques et sont affichés
dans le document.
326 Chapitre 14
Utilisation de la séquences de calques
L’affichage de la séquence de calques permet de voir le contenu des images qui précèdent et
suivent l’image actuellement sélectionnée. Cela vous permet d’affiner la transition entre les objets
sans devoir passer incessamment d’un objet à une autre. Le terme anglais équivalent, onion
skinning (pelure d’oignon), vient d’une technique d’animation traditionnelle qui consiste à utiliser
des couches de papier calque fin pour visualiser les séquences animées.
Lorsque l’affichage de la séquence de calques est activée, le niveau lumineux des objets situés dans
les images qui précèdent et suivent l’image actuellement sélectionnée est atténué, ce qui vous
permet de les distinguer des objets de l’image courante.
Par défaut, la modification de plusieurs images est activée, ce qui implique que vous pouvez
sélectionner et modifier des objets estompés dans d’autres images sans quitter l’image active.
Utilisez l’outil Sélectionner derrière pour sélectionner de manière séquentielle des objets dans des
images.
Pour ajuster le nombre d’images visibles avant et après l’image courante :
1
Dans le panneau Images, cliquez sur le bouton Séquence de calques.
2
Choisissez une option d’affichage :
• Pas de séquence de calques désactive l’affichage de la séquence de calques et n’affiche que le
contenu de l’image courante.
•
•
•
•
Afficher image suivante affiche le contenu de l’image courante et celui de l’image suivante.
Avant et après affiche le contenu de l’image courante et celui des images adjacentes.
Afficher toutes les images affiche le contenu de toutes les images.
Personnalisé permet de définir le nombre d’images à afficher avant et après l’image courante, et
de définir leur opacité.
• Modification de plusieurs images vous permet de sélectionner et modifier tous les objets
visibles. Désactiver cette option vous permet de ne sélectionner et n’éditer que les objets de
l’image courante.
Création d’animations 327
Interpolation
L’interpolation est un terme employé en technique d’animation traditionnelle pour décrire le
processus selon lequel un animateur principal dessine uniquement les images clés (images
contenant d’importantes modifications) pendant que des assistants dessinent les images
intermédiaires.
Dans Fireworks, l’interpolation permet de mélanger deux occurrences ou plus du même symbole
pour générer les occurrences intermédiaires avec des attributs interpolés. L’interpolation est un
technique manuel pratique applicable au mouvement plus sophistiqué d’un objet dans le
document et aux objets dont les effets en direct changent dans chaque image de l’animation.
Par exemple, vous pouvez interpoler un objet pour qu’il donne l’impression de se déplacer sur un
trajet linéaire.
Pour interpoler des occurrences :
1
Sélectionnez plusieurs occurrences du même symbole graphique dans le document. Ne
sélectionnez pas des occurrences de symboles différents.
2
Choisissez Modification > Symbole > Occurrences interpolées.
3
Dans la boîte de dialogue Occurrences interpolées, indiquez le nombre d’étapes interpolées à
insérer entre les deux occurrences d’origine.
4
Pour répartir les objets interpolés dans des images distinctes choisissez Répartir dans les images et
cliquez sur OK.
Si vous choisissez de ne pas répartir les objets dans des images distinctes, vous pouvez le faire
plus tard en sélectionnant toutes les occurrences et en cliquant sur le bouton Répartir dans les
images dans le panneau Images.
Remarque : Dans la plupart des cas, l’utilisation de symboles d’animation est préférable à l’interpolation. Pour plus
d’informations, voir « Utilisation des symboles d’animation » à la page 318.
Aperçu d’une animation
Vous pouvez prévisualiser une animation en cours de travail pour en vérifier l’avancement. Vous
pouvez également prévisualiser une animation après optimisation, pour vérifier l’aspect qu’elle
aura dans un navigateur Web.
Pour prévisualiser une animation dans l’espace de travail :
Utilisez les contrôles d’animation qui apparaissent à la base de la fenêtre du document.
Contrôles d’animation
Lorsque vous prévisualisez des animations, prenez en compte les points suivants :
• Pour définir la durée d’apparition d’une image dans la fenêtre du document, indiquez la valeur
de cadence d’image désirée dans le panneau Images.
• Les images qui n’ont pas été exportées n’apparaissent pas lors de la visualisation.
328 Chapitre 14
• L’animation telle qu’elle apparaît dans la fenêtre Original affiche les sources des graphismes à
leur résolution normale, pas les versions optimisées qui ont été exportées dans le fichier.
Pour prévisualiser une animation dans la fenêtre d’aperçu :
1
Cliquez sur le bouton Aperçu en haut de la fenêtre du document.
2
Utilisez les contrôles d’animation.
Remarque : Il n’est pas recommandé de visualiser l’animation dans les fenêtres 2 en 1 ou 4 en 1.
Pour afficher une animation dans un navigateur Web :
Choisissez Fichier > Aperçu dans le navigateur, et sélectionnez un navigateur dans le sous-menu.
Remarque : Vous devez sélectionner le format de fichier GIF animé comme format de fichier d’exportation dans le
panneau Optimiser, autrement vous ne percevrez aucun mouvement lorsque vous prévisualiserez le document dans
le navigateur. Cela est obligatoire, même si vous comptez importer votre animation dans Flash sous forme de fichier
SWF ou de fichier PNG Fireworks.
Exportation d’une animation
Après avoir créé et paramétré les symboles et les images qui composent votre animation, vous êtes
prêt à les exporter dans un fichier d’animation. Avant d’exporter le fichier, vous devez définir
quelques paramètres qui permettront à votre animation d’être chargée plus rapidement et de
s’exécuter de façon plus fluide. Vous pouvez définir les paramètres de lecture (boucle et
transparence), et utiliser l’optimisation pour que le fichier exporté soit plus compact et plus rapide
à charger.
Remarque : Si vous comptez importer votre animation dans Macromedia Flash pour l’améliorer, il n’est pas
nécessaire de l’exporter. Flash MX permet d’importer directement les fichiers sources PNG Fireworks. Voir
« Utilisation de Macromedia Flash MX » à la page 388.
Réglage du nombre de répétitions de l’animation
Le paramètre Boucle de la boîte de dialogue Images détermine le nombre de répétitions de
l’animation. Comme le défilement d’images se répète autant de fois que vous l’avez indiqué, vous
pouvez réduire le nombre d’images nécessaires pour créer l’animation.
Pour définir le nombre de répétitions de l’image animée sélectionnée :
1
Choisissez Fenêtre > Images pour afficher le panneau Images.
2
Cliquez sur le bouton Lecture en boucle de l’animation GIF, en bas de la fenêtre du document.
3
Choisissez le nombre de répétitions après la lecture initiale.
Par exemple, si vous choisissez 4, l’animation sera exécutée cinq fois en tout. Avec En continu,
l’animation se répète indéfiniment.
Paramétrage de la transparence
Au cours du processus d’optimisation, vous pouvez définir une ou plusieurs couleurs d’une image
GIF animé qui seront transparentes dans un navigateur Web. Cette possibilité est
particulièrement utile pour que la couleur ou l’image d’arrière-plan d’une page Web apparaisse à
travers l’animation.
Création d’animations 329
Pour qu’une couleur soit affichée comme transparente dans un navigateur Web :
1
Si le panneau n’est pas visible, choisissez Fenêtre > Optimiser.
2
Dans le menu contextuel Transparence du panneau Optimiser, choisissez Transparence d’Index
ou Transparence Alpha. Pour une description de ces options, voir « Création de zones de
transparence » à la page 349.
3
Utilisez l’outil Transparence du panneau Optimiser pour sélectionner les couleurs utilisées
pour la transparence.
Optimisation d’une animation
L’optimisation consiste à compresser les fichiers dans la mesure du possible pour en accélérer le
chargement et l’exportation, ce qui les fait apparaître beaucoup plus rapidement sur la page Web.
Pour optimiser une animation :
1
Si vous comptez exporter votre animation en format GIF animé, choisissez GIF animé, dans le
panneau Optimiser, comme format de fichier d’exportation.
Si le panneau n’est pas visible, choisissez Fenêtre > Optimiser.
2
Paramétrez les options Couleurs, Tramer et Transparence. Pour plus d’informations sur les
options d’optimisation, voir « Optimisation des images GIF, PNG, TIFF, BMP et PICT » à la
page 342.
3
Dans le panneau Images, indiquez la valeur de cadence d’image désirée. Pour plus
d’informations, voir « Réglage de la cadence d’images » à la page 322.
Formats d’exportation des animations
Lorsque vous avez créé et optimisé une animation, elle est prête à être exportée.
Le format GIF animé est celui qui donne les meilleurs résultats pour les graphismes de type aplats
et dessins animés. Pour plus d’informations sur l’exportation de fichiers GIF animés, voir
« Exportation d’une animation » à la page 359.
Vous pouvez exporter l’animation sous forme de fichier Flash SWF, et l’importer ensuite dans
Macromedia Flash MX. Ou, vous pouvez sauter l’étape d’exportation et importer votre fichier
source PNG Fireworks directement dans Flash MX. Cette option permet de mieux contrôler
l’importation de votre animation. Vous pouvez importer tous les calques et images de votre
animation pour l’améliorer dans Flash. Pour plus d’informations, voir « Utilisation de
Macromedia Flash MX » à la page 388.
Vous pouvez également exporter des images ou calques de vos animations dans des fichiers
distincts. Cela peut être utile si de nombreux symboles figurent dans différents calques du même
objet. Par exemple, vous pouvez exporter une bannière publicitaire sous forme de fichiers
multiples si chaque lettre du nom d’une société est animée dans un graphisme. Chaque lettre est
séparée des autres. Pour plus d’informations sur l’exportation de calques ou d’images dans des
fichies distincts, voir « Exportation des images ou calques » à la page 360.
330 Chapitre 14
Utilisation d’animations existantes
Vous pouvez utiliser un fichier GIF animé existant dans le cadre d’une animation Fireworks. Il
existe deux façons d’utiliser ce type de fichiers : en important le fichier GIF dans un fichier
Fireworks existant, ou en ouvrant le fichier GIF comme nouveau fichier.
Lorsque vous importez un fichier GIF animé, Fireworks le convertit en symbole d’animation et le
place dans l’image active. Si l’animation importée compte plus d’images que l’animation en cours,
vous pouvez choisir de faire ajouter automatiquement le nombre d’images nécessaire.
Les images GIF importées perdent leurs paramètres de cadence d’images d’origine, au profit de
ceux du document courant. Comme le fichier importé est transformé en symbole d’animation,
vous pouvez lui appliquer des mouvements supplémentaires. Par exemple, vous pouvez importer
l’animation d’un homme marchant sur place et lui appliquer des propriétés de direction et de
mouvement qui lui feront traverser l’écran.
Lorsque vous ouvrez une image GIF animé dans Fireworks, un nouveau fichier est créé, et chaque
image du fichier GIF est placée dans une image séparée. Bien que l’image GIF d’origine ne soit
pas un symbole d’animation, elle ne conserve pas ses paramètres de cadence d’images d’origine.
Une fois le fichier importé, vous devez définir son format de fichier comme GIF animé pour
exporter l’animation depuis Fireworks.
Pour importer une image GIF animé :
1
Choisissez Fichier > Importer.
2
Naviguez jusqu’au fichier et cliquez sur Ouvrir.
3
Ouvrez le fichier, et cliquez sur Oui pour ajouter des images supplémentaires à votre
animation.
Si vous cliquez sur Annuler, seule la première image du fichier GIF animé sera affichée. Bien que
tout le document d’origine soit importé, vous devez ajouter des images pour voir le reste du
fichier.
Pour ouvrir une image GIF animé :
Choisissez Fichier > Ouvrir, puis sélectionnez le fichier GIF.
Utilisation de fichiers multiples pour une animation
Fireworks peut créer une animation à partir d’un groupe de fichiers image. Par exemple, vous
pouvez créer une bannière publicitaire sur la base de plusieurs graphismes existants, en ouvrant
chaque graphisme et en le plaçant dans une image individuelle d’un même document.
Pour ouvrir plusieurs fichiers comme base d’une animation :
1
Choisissez Fichier > Ouvrir.
2
Maintenez enfoncée la touche Maj et sélectionnez les différents fichiers.
3
Choisissez Ouvrir comme animation, puis cliquez sur OK.
Fireworks ouvre les fichiers dans un nouveau document unique, en plaçant chaque fichier
image dans une image séparée, dans l’ordre dans lequel vous avez sélectionné les fichiers.
Création d’animations 331
332 Chapitre 14
CHAPITRE 15
Optimisation et exportation
La gageure de la conception graphique pour le Web consiste à créer des images sophistiquées
pouvant être chargées le plus vite possible. Pour ce faire, vous devez choisir un format offrant le
taux de compression le mieux adapté à votre image, tout en préservant le plus possible la qualité.
Cette recherche du meilleur équilibre est appelée Opimisation. Elle consiste à trouver les valeurs
les mieux adaptées pour le nombre de couleurs, le niveau de compression et la qualité.
L’exportation de graphisme depuis Macromedia Fireworks s’exécute en deux étapes :
• Vous préparez d’abord un document ou des graphismes découpés individuels pour
l’exportation en choisissant des options d’optimisation et en comparant les aperçus pour
déterminer le juste équilibre entre la qualité et la taille des fichiers.
• Vous exportez ensuite le document ou les graphismes à partir d’options d’exportation adaptées
à leur destination sur le Web ou ailleurs.
Si vous ne maîtrisez pas les procédures d’optimisation et d’exportation des graphismes Web,
utilisez l’ Assistant Exportation. Vous pourrez ainsi aborder le processus d’exportation étape par
étape et bénéficier de suggestions. Il affiche également la fenêtre Aperçu avant exportation, dans
laquelle vous pouvez optimiser un document dans le cadre de la procédure d’exportation.
Si vous maîtrisez bien les procédures d’optimisation et d’exportation de graphismes, utilisez les
outils d’optimisation et d’exportation disponibles dans Fireworks. Pour l’optimisation, utilisez le
panneau Optimiser et les onglets de prévisualisation figurant dans la fenêtre du document. Ils vous
permettent de mieux contrôler le processus d’optimisation. Pour l’exportation, utilisez la boîte de
dialogue Exporter ou le bouton Exportation rapide.
Le bouton Exportation rapide l’exportation des graphismes vers d’autres applications rend plus
aisée, en ce sens qu’il définit automatiquement les options dans la boîte de dialogue Exporter. Si
vous utilisez Fireworks avec d’autres applications, ce bouton peut simplifier le processus de
conception.
Optimisation
Dans Fireworks, l’optimisation des graphismes implique les actions suivantes :
• Le choix du meilleur format. Chaque format de fichier repose sur sa propre technique de
compression des informations colorimétriques. Le choix du format le plus approprié à un type
de graphisme précis permet de diminuer de beaucoup la taille de son fichier.
• Le choix des options spécifiques au format. Chaque format de fichier possède un jeu d’options
particulier. Vous pouvez utiliser des options telles que la profondeur de couleur pour réduire la
taille des fichiers. Certains formats graphiques tels que les format GIF et JPEG possèdent
également des options permettant de contrôler la compression des images.
333
• Le réglage des couleurs dans le graphisme (pour format de fichier 8 bits uniquement). Vous pouvez
limiter le nombre de couleurs en confinant l’image à un jeu de couleurs spécifique, appelée palette
de couleurs. Supprimez ensuite les couleurs inutilisées de la palette de couleurs. La réduction du
nombre de couleurs de la palette diminue le nombre de couleurs utilisées dans l’image, ce qui
permet d’obtenir des fichiers de plus petite taille pour les types de fichier d’images couleur.
Vous devez essayer tous les contrôles d’optimisation pour trouver le meilleur équilibre entre la
qualité et la taille de fichier.
Utilisation de l’Assistant Exportation
Si vous ne maîtrisez pas les procédures d’optimisation et d’exportation des graphismes Web,
utilisez l’ Assistant Exportation. L’Assistant Exportation vous permet d’exporter aisément des
graphismes sans connaître les détails des procédures d’optimisation et d’exportation.
L’Assistant Exportation vous guide, étape par étape, tout au long du processus d’optimisation et
d’exportation. Après avoir répondu aux questions sur la destination et l’usage prévu des fichiers,
choisissez l’une des suggestions de type de fichier et d’optimisation.
Lorsque vous devez optimiser le fichier en fonction de la taille voulue du fichier cible, l’Assistant
Exportation permet d’optimiser le fichier exporté en fonction de la taille spécifiée.
Assistant Exportation
Une fois que vous maîtrisez bien les procédures d’optimisation et d’exportation, utilisez les
onglets Optimiser et Aperçu, dans la fenêtre du document, pour optimiser les graphismes. Elles
sont plus pratiques à utiliser que l’Assistant Exportation et offrent un meilleur contrôle aux
utilisateurs qui maîtrisent bien les procédures d’optimisation. Après avoir optimisé les graphismes
à l’aide de cette procédure, vous devez exécuter une étape supplémentaire pour exporter les
graphismes. Pour plus d’informations, voir « Optimisation dans l’espace de travail » à la page 337
et « Exportation depuis Fireworks » à la page 356.
Pour exporter un document avec l’ Assistant Exportation :
1
Choisissez Fichier > Assistant Exportation
2
Répondez à toutes les questions qui s’affichent et cliquez sur Continuer dans chaque panneau.
334 Chapitre 15
Conseil : Choisissez Taille du fichier d’exportation cible dans le premier panneau pour spécifier la taille maximum
du fichier cible.
Fireworks fournit quelques recommandations sur les formats de fichier.
3
Cliquez sur Quitter.
Dans la fenêtre Aperçu avant exportation, la fenêtre présente des options d’exportation
recommandées. Pour plus d’informations, voir la section suivante.
Utilisation de la fenêtre Aperçu avant exportation
La fenêtre Aperçu avant exportation affiche les options d’optimisation et d’exportation
recommandées pour le document actif.
Remarque : La fenêtre Aperçu avant exportation était utilisée dans les précédentes versions de Fireworks pour
optimiser et exporter simultanément des graphismes. Vous pouvez toujours ouvrir la fenêtre Aperçu avant
exportation dans l’Assistant Exportation ou en choisissant Fichier > Aperçu avant exportation.
Le graphisme apparaît dans la zone de prévisualisation de la fenêtre Aperçu avant exportation sous
la forme exacte qu’il aura lors de l’exportation. Cette zone fournit également une estimation de la
taille du fichier et du temps de téléchargement avec les paramètres d’exportation choisis.
Estimation du temps de téléchargement et de la taille du fichier cible
Enregistrement des paramètres de la vue active
Prévisualisation des paramètres d’exportation
choisis
Jeu d’options enregistré pour l’exportation sélectionnée
Vous pouvez afficher plusieurs vues, correspondant à des paramètres différents, de façon à obtenir
le meilleur compromis possible entre la taille du fichier et le niveau de qualité requis. Vous pouvez
également limiter la taille du fichier avec l’Assistant Optimiser la taille.
Dans le cas de GIF animés ou de survols JavaScript, l’estimation de la taille du fichier correspond
à la somme des tailles de toutes les images.
Remarque : Pour accélérer le rafraîchissement de l’aperçu, désactivez la case Aperçu. Pour interrompre le
rafraîchissement de la zone d’aperçu lorsque vous changez les paramètres, appuyez sur Echap.
Pour exporter un graphisme à partir de l’Aperçu avant exportation :
1
Choisissez Fichier > Aperçu avant exportation pour ouvrir la fenêtre Aperçu avant exportation,
si elle n’est pas déjà ouverte.
Optimisation et exportation 335
2
Cliquez sur le bouton Zoom en bas de la boîte de dialogue pour appliquer un zoom avant ou
arrière dans la fenêtre d’affichage. Cliquez sur ce bouton pour agrandir la fenêtre d’affichage.
Cliquez en maintenant la touche Alt (Windows) ou Options (Macintosh) enfoncée pour
réduire l’aperçu.
3
Pour appliquer un panoramique sur la fenêtre d’affichage exécutez l’une des actions suivantes :
• Cliquez sur le bouton Pointeur en bas de la boîte de dialogue et faites glisser la fenêtre
d’affichage.
• Lorsque le pointeur Zoom est actif, maintenez enfoncée la barre d’espacement et tirez la fenêtre
aperçu.
4
Pour comparer les paramètres d’exportation avec l’ Aperçu avant exportation, cliquez sur un
bouton de fractionnement et divisez la zone d’aperçu en deux ou quatre fenêtres.
Ces fenêtres permettent d’afficher un aperçu du graphisme avec des paramètres d’exportation
différents.
Remarque : Si vous appliquez un zoom ou un panoramique lorsque plusieurs fenêtres sont ouvertes, toutes les
fenêtres sont agrandies et panoramiquées simultanément.
5
Pour optimiser un graphisme en fonction de la taille du fichier cible, cliquez sur le bouton de l’
Assistant Optimiser la taille. Indiquez la taille du fichier en Ko et cliquez sur OK.
L’ Assistant Optimiser la taille tente d’obtenir la taille de fichier requise par les méthodes
suivantes :
•
•
•
•
•
En ajustant la qualité JPEG ;
6
Cliquez sur Exporter après avoir modifié les paramètres d’exportation.
7
A partir de la boîte de dialogue Exporter, tapez un nom de fichier, choisissez une destination,
définissez d’autres options, si vous le désirez, puis cliquez sur Enregistrer.
En modifiant le lissage JPEG ;
En modifiant le nombre de couleurs dans les images 8 bits ;
En changeant les paramètres de tramage dans les images 8 bits ;
En activant ou désactivant les paramètres d’optimisation.
Pour plus d’informations sur les options de la boîte de dialogue Exporter, voir « Exportation
depuis Fireworks » à la page 356.
336 Chapitre 15
Optimisation dans l’espace de travail
L’exportation de graphismes sur le Web s’effectue en deux étapes : l’optimisation, puis
l’exportation. L’optimisation des graphismes permet de s’assurer qu’ils possèdent le nombre de
couleurs, le niveau de compression et la qualité appropriés. Après avoir défini les paramètres
d’optimisation d’un gaphisme, ce dernier est prêt à être exporté.
Vous pouvez vous passer de l’Assistant Exportation et de la fenêtre Aperçu avant exportation si
vous maîtrisez bien le procédure d’optimisation et d’exportation de graphismes. L’espace de travail
de Fireworks possède des fonctions d’optimisation et d’exportation qui vous permettent de mieux
contrôler la manière dont les fichiers sont exportés :
• Le panneau Optimiser contient les principaux contrôles d’optimisation. Pour les formats de
fichier de 8 bits, il contient également une table de couleurs qui affiche les couleurs utilisées
dans la palette de couleurs exportées.
• Lorsqu’une découpe est sélectionnée, vous pouvez choisir des paramètres d’optimisation
prédéfinis ou sauvegardés à partir du menu contextuel Paramètres d’exportation du Vérificateur
de propriétés.
• L’onglet Aperçu affiche le graphisme exporté tel qu’il apparaîtra en tenant compte des
paramètres d’optimisation actifs.
Vous pouvez ainsi optimiser l’ensemble du document ou sélectionner des découpes individuelles
d’un graphisme JPEG et affecter à chacune d’elles différents paramètres d’optimisation.
Utilisation des paramètres d’optimisation prédéfinis
Vous pouvez choisir des paramètres d’optimisation courants dans le Vérificateur de propriétés ou
dans le panneau Optimiser, afin de définir rapidement un format de fichier et d’appliquer des
paramètres spécifiques à un format précis. Lorsque vous choisissez une option dans le menu
déroulant Paramètres, les autres options du panneau Optimiser sont automatiquement définies. Si
vous le désirez, vous pouvez améliorer chaque option individuellement.
Pour obtenir un contrôle plus précis de l’optimisation que celui des options prédéfinies, vous pouvez
créer vos propres paramètres d’optimisation dans le panneau Optimiser. Vous pouvez également
modifier la palette de couleurs d’un graphisme à l’aide de la table de couleurs du panneau Optimiser.
Optimisation et exportation 337
Pour choisir un paramètre d’optimisation prédéfini :
Choisissez un réglage prédéfini dans le menu déroulant Paramètres du Vérificateur de propriétés
ou du panneau Optimiser :
GIF Web 216 forces toutes les couleurs à respecter la palette de couleurs Websafe. Cette palette
contient jusqu’à 216 couleurs (voir « Optimisation des images GIF, PNG, TIFF, BMP et PICT »
à la page 342).
GIF WebSnap 256 convertit
les couleurs qui ne font pas partie de la palette Websafe dans la
couleur Websafe la plus proche. Cette palette contient jusqu’à 256 couleurs au maximum.
GIF WebSnap 128 convertit les couleurs qui ne font pas partie de la palette Websafe dans la
couleur Websafe la plus proche. Cette palette contient jusqu’à 128 couleurs.
GIF Adaptive 256 ne
contient que les couleurs exactes utilisées dans le graphisme. Cette palette
contient jusqu’à 256 couleurs au maximum.
JPEG - Qualité supérieure définit le taux de qualité JPEG à 80 % et le lissage à 0, ce qui donne
des graphisme de haute qualité visuelle mais des fichiers de taille importante.
JPEG - Fichier réduit définit le taux de qualité JPEG à 60 % et le lissage à 2, ce qui produit des
graphismes dont la taille de fichier est réduite de plus de la moitié par rapport au type JPEG Qualité supérieure, mais au prix d’une réduction de la qualité d’images.
GIF animé WebSnap 128 sélectionne le format de fichier GIF animé et convertit les couleurs qui
ne font pas partie de la palette Websafe dans la couleur Websafe la plus proche. Cette palette
contient jusqu’à 128 couleurs.
Pour plus d’informations sur les types de fichiers, voir « Choix d’un type de fichier » à la
page 341.
Pour spécifier des paramètres d’optimisation personnalisés :
1
Dans le panneau Optimiser, choisissez une option dans le menu contextuel Exporte un format
de fichier.
2
Définissez les options spécifiques à ce format (code des couleurs, tramage et qualité).
3
Si nécessaire, choisissez un autre paramétrage d’optimisation dans le menu contextuel du
panneau Optimiser.
Pour plus de détails sur le contrôles d’optimisation disponibles, consultez les sections
appropriées dans « Optimisation dans l’espace de travail » à la page 337.
4
Vous pouvez nommer et sauvegarder vos paramètres d’optimisation personnels. Lorsque des
propriétés de découpe, de bouton ou de document sont affichées, les noms des paramètres
sauvegardés sont ajoutés à la liste des paramètres d’optimisation prédéterminés figurant dans le
menu contextuel Paramètres et dans le Vérificateur de propriétés. Pour plus d’informations,
voir « Enregistrement et réutilisation des paramètres d’optimisation » à la page 355.
Pour modifier la palette de couleurs :
Choisissez Fenêtre > Optimiser pour afficher et modifier la palette de couleurs d’un document.
Pour plus d’informations, voir « Optimisation des images GIF, PNG, TIFF, BMP et PICT » à la
page 342.
338 Chapitre 15
Pour optimiser des découpes individuelles :
1
Cliquez sur une découpe pour la sélectionner. Pour sélectioner plusieurs découpes à la fois,
appuyez sur la touche Maj et cliquez sur chacune d’elles.
2
Dans le panneau Optimiser, optimisez les découpes sélectionnées.
Prévisualisation et comparaison des paramètres d’optimisation
Les onglets Aperçu affichent le graphisme tel qu’il apparaîtra dans un navigateur et tient compte
des paramètres d’optimisation. Vérifiez les survols et les comportements de navigation, ainsi que
les animations, dans la fenêtre Aperçu.
L’onglet Original et les onglets d’aperçu figurent dans la partie supérieure gauche de la fenêtre du
document.
Les onglet d’aperçu affichent la taille totale du document, une estimation du temps de
téléchargment et le format du fichier. L’estimation représente la moyenne du temps nécessaire au
téléchargement de l’ensemble des découpes et images du document en supposant qu’un modem
de 56 K est utilisé. Les fenêtres 2 en 1 et 4 en 1 affichent des informations complémentaires qui
varient en fonction du type de fichier sélectionné.
Une fenêtre d’aperçu affichant un fichier de type GIF
Vous pouvez utiliser le panneau Optimiser pour optimiser un document dans une fenêtre
d’aperçu comme si vous vous trouviez dans la fenêtre Original. Optimisez l’ensemble du
document ou uniquement les découpes sélectionnées. La couche de découpe permet de
différencier la zone du document qui est en cours d’optimisation du reste du document. La
couche de découpe affiche avec une teinte laiteuse, atténuée, les zones qui ne sont pas en cours
d’optimisation. Vous pouvez activer ou désactiver la couche de découpe.
Optimisation et exportation 339
Lorsque vous préparez l’optimisation de la découpe sélectionnée, les densités des parties qui ne sont pas
en cours d’optimisation sont atténuées.
Pour afficher un aperçu d’un graphisme prenant en compte les paramètres d’optimisation actifs :
Cliquez sur l’onglet Aperçu dans le coin supérieur gauche de la fenêtre de document.
Remarque : A partir du panneau Outils, cliquez sur l’icône Masquer les découpes pour masquer les découpes et les
repères de découpe pendant la prévisualisation.
Pour comparer des aperçus ayant des paramètres d’optimisation différents :
1
Cliquez sur l’onglet 2 en 1 ou 4 en 1 dans le coin supérieur gauche de la fenêtre du document.
2
Cliquez sur l’un des aperçus pour le sélectionner.
3
Indiquez les paramètres d’optimisation dans le panneau Optimiser.
4
Sélectionnez les autres aperçus et spécifiez d’autres paramètres d’optimisation pour chaque
aperçu afin de les comparer.
Lorsque vous choisissez un aperçu 2 en 1 ou 4 en 1, la première fenêtre affiche le document
PNG d’origine de Fireworks, ce qui vous permet de le comparer avec les versions optimisées.
Vous pouvez afficher la version optimisée de votre choix.
Pour remplacer l’affichage optimisé par l’affichage de l’original en mode 2 en 1 ou 4 en 1 :
1
Sélectionnez une fenêtre d’aperçu.
340 Chapitre 15
2
Choisissez Original (pas d’aperçu) dans le menu déroulant d’affichage qui se trouve à la base de
la fenêtre du document.
Pour remplacer l’affichage de l’original par un aperçu optimisé en mode 2 en 1 ou 4 en 1 :
1
Sélectionnez l’affichage de l’image originale.
2
Choisissez Aperçu avant exportation dans le menu déroulant Aperçu.
Pour afficher ou masquer la couche de découpe :
Choisissez Affichage > Couche de découpe.
Choix d’un type de fichier
Le choix du format de fichier doit dépendre du type de graphisme et de son utilisation. L’intégrité
visuelle d’un graphisme peut varier d’un format à un autre, surtout si vous utilisez différentes
méthodes de compression. En outre, seuls certains formats de fichiers graphiques sont acceptés
par la plupart des navigateurs Web. Cependant, d’autres formats de fichier sont parfaits pour
l’édition et l’utilisation dans des applications multimédia.
Voici les formats de fichier disponibles :
Le format d’échange de données graphiques GIF (Graphics Interchange Format) est l’un des
formats d’image les plus utilisés sur le Web. Il contient un maximum de 256 couleurs. Par ailleurs,
les fichiers GIF peuvent contenir une zone transparente et être composés de plusieurs images,
pour les effets d’animation. Les images dans lesquelles se trouvent des plages de couleurs
identiques sont parfaites pour la compression lorsqu’elles sont exportées en en format GIF. Ce
format est généralement idéal pour les graphismes de type dessin animé, les logos, les images
comportant des zones transparentes ou les animations.
Optimisation et exportation 341
Le format JPEG a été développé par le Joint Photographic Experts Group pour les besoins
spécifiques des images photographiques ou comportant un nombre très élevé de couleurs. Le
format JPEG permet de coder 16 millions de couleurs (24 bits). Le format JPEG est idéal pour
exporter des photographies numérisées, des images comportant des textures ou des dégradés, ou
toute autre image nécessitant plus de 256 couleurs.
Le format PNG (Portable Network Graphic) est le plus complet des formats graphiques utilisables
sur le Web. Cependant, tous les navigateurs Web ne peuvent pas prendre en charge les images
PGN. Le format PNG permet de coder les graphismes sur un maximum de 32 bits, peut inclure
une transparence ou une couche alpha, et prend en charge l’affichage progressif des images. PNG
est le format de fichier natif de Macromedia Fireworks. Cependant, les fichiers PNG de Fireworks
comportent des informations spécifiques à l’application qui ne sont pas enregistrées dans le fichier
PNG exporté ou dans les fichiers créés dans d’autres applications.
Le format WBMP (Wireless Bitmap) est utilisé pour les périphériques de l’informatique mobile
(téléphones portables assistants numériques personnels). Il a été conçu spécifiquement pour les
pages WAP (Wireless Application Protocol). Dans la mesure où il s’agit d’un format 1bit, seules
deux couleurs sont disponibles : noir et blanc.
Le format TIFF (Tagged Image File Format) est utilisé pour le stockage des images bitmap. Il s’agit
du format le plus utilisé dans l’édition. De nombreuses applications multimédia prennent
également en charge les images importées en format TIFF.
Le format de fichier graphique de Microsoft Windows, BMP, est un format de fichier
couramment utilisé pour l’affichage d’images bitmap. Les fichiers BMP sont essentiellement
utilisés sur des ordinateurs fonctionnant sous le système d’exploitation de Windows. De
nombreuses applications peuvent importer des images BMP.
Mis au point par Apple Computer, le format PICT est un format de fichier graphique
couramment utilisé sur les ordinateurs fonctionnant sous les systèmes d’exploitation Macintosh.
La plupart des applications Mac peut importer des images PICT.
Optimisation des images GIF, PNG, TIFF, BMP et PICT
Dans Fireworks, chaque format de fichier possède un jeu d’options d’optimisation. Dans la
plupart des cas, seuls les fichiers sur 8 bits de type GIF, PNG 8, TIFF 8, BMP 8 et PICT 8 offrent
des contrôles d’optimisation intéressants.
Remarque : Les fichiers JPEG constituent l’exception. Pour plus de détails sur les contrôles d’optimisation de
fichiers JPEG, voir « Optimisation des fichiers JPEG » à la page 351.
Les paramètres d’optimisation de Fireworks s’appliquent de façon identique à tous les fichiers sur
8 bits. Pour les fichiers Web tels que les fichiers GIF et PNG, il est possible d’indiquer le niveau
de compression à appliquer aux graphismes.
342 Chapitre 15
Vous pouvez optimiser des fichiers sur 8 bits en modifiant leur palette de couleurs. La réduction
du nombre de couleurs de la palette diminue le nombre de couleurs utilisées dans l’image, ce qui
permet d’obtenir des fichiers de plus petite taille. Mais la réduction du nombre de couleurs peut
également diminuer la qualité de l’image.
Comme vous l’avez expérimenté avec des paramètres d’optimisation différents, utilisez les aperçus
2 en 1 et 4 en 1 pour tester et comparer l’apparence du gaphisme et la taille estimée du fichiers
résultant. Pour plus d’informations sur l’utilisation des onglets Aperçu, voir « Prévisualisation et
comparaison des paramètres d’optimisation » à la page 339.
Choix d’une palette de couleurs
Les formats GIF et et autres formats d’images sur 8 bits incluent une palette de couleurs. Une
palette de couleurs est une liste pouvant comporter jusqu’à 256 couleurs utilisables dans un
fichier. Seules les couleurs définies dans la palette de couleurs apparaissent dans un graphisme.
Cependant, certaines palettes de couleurs contiennent des couleurs qui ne sont pas utilisées par le
graphisme.
Voici les palettes de couleurs disponibles dans Fireworks :
Adaptative est une palette personnalisée établie à partir des couleurs utilisées dans le document.
Les palettes adaptatives offrent en général la meilleure qualité d’image.
WebSnap Adaptive est une palette adaptive qui convertit les couleurs proches du format Websafe
dans la couleur Websafe la plus proche. Les couleurs Websafe correspondent à celles provenant de
la palette Web 216.
Web 216 est
une palette des 216 couleurs qui sont communes aux ordinateurs Windows et
Macintosh. Cette palette est souvent dite Websafe ou « compatible avec les navigateurs » parce
qu’elle donne des résultats relativement réguliers en 256 couleurs (8 bits), quels que soient la
plate-forme et le navigateur utilisés.
Exact contient exactement les couleurs utilisées dans le graphisme. La palette exacte n’est utilisable
que pour les images comportant au maximum 256 couleurs. Au-delà, la palette adaptative est
automatiquement activée.
Les palettes Système (Windows) et Système (Macintosh) comportent respectivement les 256
couleurs définies par les plates-formes standard Windows ou Macintosh.
Echelle de gris est une palette de 256 nuances de gris ou moins. Choisissez cette palette pour
convertir l’image exportée en échelles de gris.
Noir et blanc est
Uniforme est
une palette à deux, ne comportant que du noir et du blanc.
une palette mathématique regroupant les valeurs en pixels des couleurs RVB.
Personnalisée est une palette qui a été modifiée ou chargée à partir d’une palette externe (fichier
ACT) ou d’un fichier GIF.
Le réglage de la palette de couleurs pendant l’optimisation affecte les couleurs de l’image exportée.
Optimisez et personnalisez les palettes de couleurs en utilisant la table de couleurs ou le panneau
Optimiser.
Pour choisir une palette de couleurs :
Choisissez une option dans le menu déroulant Palette indexée du panneau Optimiser.
Optimisation et exportation 343
Pour importer une palette personnalisée :
1
Utilisez l’une des méthodes suivantes :
• Choisissez Charger la palette dans le menu déroulant des options du panneau Optimiser.
• Choisissez Personnalisée dans le menu déroulant Palette du panneau Optimiser.
2
Recherchez un fichier de palette ACT ou GIF, puis cliquez sur Ouvrir.
Remarque : Les utilisateurs Windows doivent sélectionner les fichiers GIF dans le menu déroulant Fichiers ou
Type pour pouvoir afficher dans la boîte de dialogue Ouvrir tous les fichiers ayant l’extension .gif.
Les couleurs du fichier de palette ACT ou GIF sont ajoutées dans la table de couleurs du
panneau Optimiser.
Choix de la profondeur de couleurs
La profondeur de couleur désigne le nombre de couleurs utilisées dans le graphisme exporté. Vous
pouvez créer des fichiers de plus petite taille en réduisant le nombre de couleurs. En réduisant la
profondeur de couleur, certains couleurs de l’image (en priorité celles les moins utilisées) sont
rejetées. Les pixels qui contiennent des couleurs rejetées sont convertis dans la couleur la plus
proche restant dans la palette. Cela peut affecter la qualité de l’image.
Remarque : L’option de profondeur de couleur est disponible pour le format de fichier GIF et les autres formats de
fichier 8 bits uniquement.
Pour choisir une profondeur de couleur :
A partir du menu déroulant Couleurs du panneau Optimiser, choisissez une option ou tapez une
valeur dans le champ. Vous pouvez sélectionner une valeur entre 2 et 256.
Conseil : Le nombre de couleurs utilisées dans l’image peut être inférieur au nombre maximum de couleurs que vous
avez choisi. Le nombre situé dans le coin inférieur de la table de couleurs indique le nombre de couleurs visibles dans
l’image. Si aucun nombre n’est indiqué, le bouton Reconstituer est affiché, ce qui indique que vous devez reconstituer
la palette de couleurs. Pour plus d’informations, voir « Affichage des couleurs d’une palette » à la page 346.
Pour choisir une profondeur de couleur supérieure à 256 couleurs :
Dans le panneau Optimiser, choisissez un format de fichier 24 ou 32 bits dans le menu contextuel
Exporte un format de fichier.
344 Chapitre 15
Remarque : L’augmentation de la profondeur de couleurs s’accompagne de celle de la taille des fichiers à exporter.
C’est pourquoi les profondeurs importantes ne sont généralement pas idéales pour les graphismes sur le Web. Il est
donc préférable de réserver l’utilisation des fichiers JPEG, ou PNG sur 24 ou 3 2 bits, à l’exportation d’images
photographiques à variation continue ou comportant des dégradés complexes. Pour les gaphismes destinés au
Web et ayant une profondeur de couleur très importante, utilisez le format JPEG. Pour plus d’informations, voir
« Optimisation des fichiers JPEG » à la page 351.
Suppression des couleurs non utilisées
Pour réduire plus encore la taille des fichiers, vous pouvez supprimer de la palette les couleurs qui
ne sont pas utilisées dans l’image avant l’exportation de celle-ci.
Remarque : L’option de profondeur de couleur est disponible pour le format de fichier GIF et les autres formats de
fichier graphique 8 bits uniquement.
Pour supprimer les couleurs non utilisées :
Activez l’option Supprimer les couleurs non utilisés dans le menu déroulant des options du
panneau Optimiser.
Désactivez l’option Supprimer les couleurs non utilisées pour conserver toutes les couleurs de la
palette, y compris les couleurs ne figurant pas dans l’image exportée.
Utilisation du tramage pour simuler les couleurs perdues
Le tramage permet de créer une approximation des couleurs ne figurant pas dans la palette de
couleurs active, en alternant des pixels de couleur proche. Vu de loin, le fondu des couleurs donne
l’apparence de la couleur manquante. Le tramage est particulièrement utile pour exporter des
images avec des fondus complexes ou des dégradés, ou pour exporter des photographies à un
format de fichier graphique 8 bits, tel que GIF par exemple.
Le tramage peut augmenter considérablement la taille du fichier.
Remarque : L’option de tramage est disponible pour le format de fichier GIF, les formats de fichier gaphique 8 bits
et WBMP uniquement.
Pour appliquer un tramage à un graphisme :
Indiquez une valeur en pourcentage dans le champ Tramer du panneau Optimiser.
Optimisation et exportation 345
Affichage des couleurs d’une palette
La table de couleurs du panneau Optimiser indique les couleurs utilisées dans l’aperçu actif de
l’image lorsque vous travaillez en mode 8 bits ou moins, et permet de modifier la palette de
l’image. La Table des couleurs est automatiquement mise à jour en mode Aperçu. Elle paraît vide
si vous optimisez plusieurs découpes à la fois, ou si vous n’optimisez pas dans un format sur 8 bits
tel que GIF.
Divers petits symboles apparaissent sur certains échantillons de couleur pour en indiquer les
caractéristiques. suit :
Symbole
Indique
La couleur a été modifiée, ce qui n’a d’effet que sur le document exporté. Cela ne modifie pas la
couleur dans le document source.
La couleur est verrouillée.
La couleur est transparente.
Cette couleur est Websafe.
La couleur possède plusieurs attributs. Dans le cas présent, cette couleur est compatible avec le
Web, verrouillée et elle a été modifiée.
Si vous modifiez le document, le panneau Table de couleurs risque de ne plus afficher l’ensemble
des couleurs du document. Dans ce cas, vous devez reconstituer la table de couleurs. Le bouton
Reconstituer apparaîtra au bas du panneau Optimiser si vous devez reconstituer la table de
couleurs.
Pour reconstituer la table de couleurs afin de refléter les modifications apportées au document :
Cliquez sur le bouton Reconstituer, en bas du panneau Optimiser.
Une fois la table reconstruite, le bouton Reconstituer disparaît et le nombre de couleurs utilisées
dans l’image apparaît à sa place.
346 Chapitre 15
Pour sélectionner une couleur :
Cliquez sur la couleur désirée dans la table de couleurs du panneau Optimiser.
Pour sélectionner plusieurs couleurs :
Appuyez sur la touche Contrôle (Windows) ou sur la touche Commande (Macintosh) et cliquez
sur les couleurs.
Pour sélectionner une plage de couleurs :
1
Cliquez sur une couleur.
2
Maintenez enfoncée la touche Maj et cliquez sur la dernière couleur de la page de couleurs à
sélectionner.
Pour afficher un aperçu de tous les pixels du document contenant une couleur spécifique :
1
Cliquez sur l’onglet Aperçu dans la fenêtre du document.
2
Cliquez sur une couleur dans la table de couleurs du panneau Optimiser et maintenez le
bouton de la souris enfoncé.
Les pixels contenant le nuancier sélectionné changent temporairement de couleur tant que le
bouton de la souris reste enfoncé.
Remarque : Lorsque vous affichez un aperçu des pixels du document par l’intermédiaire des fenêtres d’aperçu 2
en 1 ou 4 en 1, ne sélectionnez pas la fenêtre de l’original.
Verrouillage des couleurs d’une palette
Vous pouvez verrouiller certaines couleurs de façon à empêcher leur suppression ou modification
lors d’un changement de palette ou du retrait de l’une des couleurs de la palette. Lorsque vous
changez de palette, les couleurs verrouillées sont ajoutées à la nouvelle palette.
Pour verrouiller une couleur sélectionnée :
• Cliquez sur le bouton Verrouiller, en bas du panneau Optimiser.
Pour déverrouiller une couleur :
1
Sélectionnez une couleur verrouillée dans la table de couleur du panneau Optimiser.
2
Cliquez sur le bouton Verrouiller dans le panneau Optimiser
Pour déverrouiller toutes les couleurs :
Choisissez l’option Déverrouiller toutes les couleurs dans le menu déroulant des options du
panneau Optimiser.
Modification des couleurs d’une palette
Vous pouvez changer l’une des couleurs de la palette en la modifiant à partir de table de couleurs
du panneau Optimiser. La modification d’une couleur remplace toutes ses occurrences dans
l’image à exporter. La couleur de l’image d’origine n’est pas affectée.
Pour modifier une couleur :
1
Pour ouvrir le sélecteur de couleurs du système, utilisez l’une des méthodes suivantes :
Optimisation et exportation 347
• Sélectionnez une couleur, puis cliquez sur le bouton Modifier une couleur, en bas du panneau
Optimiser.
• Double-cliquez sur une couleur dans la table de couleurs.
2
Modifiez la couleur à l’aide du sélecteur de couleurs du système.
La nouvelle couleur remplace toutes les occurrences de la couleur remplacée dans la zone
d’aperçu.
Remarque : Cliquez avec le bouton droit de la souris (Windows) ou appuyez sur la touche Commande
(Macintosh) et cliquez sur une couleur de la palette pour afficher un menu contextuel d’options de modification
de la couleur sélectionnée.
Utilisation des couleurs Websafe
Les couleurs Websafe sont communes aux plates-formes Macintosh et Windows. Elles ne sont pas
tramées lorsqu’elles sont affichées dans un navigateur Web sur un écran d’ordinateur paramétré
pour 256 couleurs.
Fireworks dispose de plusieurs méthodes permettant d’appliquer et d’utiliser les couleurs Websafe.
Pour forcer l’utilisation de couleurs Websafe :
Choisissez Web 216 dans le menu déroulant Palette indexée du panneau Optimiser.
Pour créer une palette adaptative favorisant les couleurs Websafe :
Choisissez la palette WebSnap adaptative.
Les couleurs non Websafe qui sont proches de couleurs Websafe sont converties en ces couleurs.
Pour forcer l’application des couleurs Websafe équivalentes :
1
Sélectionnez une couleur dans la table de couleurs du panneau Optimiser.
2
Cliquez sur le bouton Accrocher à Websafe.
L’application de couleurs Websafe dans le panneau Optimiser n’affecte pas l’image en tant que
telle, mais seulement sa version exportée.
Enregistrement de palettes
Vous pouvez enregistrer des palettes personnalisées en tant que fichiers de palette externe. Utilisez
les palettes enregistrées avec d’autres documents Fireworks ou dans des applications prenant en
charge les fichiers de palettes externes, tels que Macromedia Freehand, Macromedia Flash et
Adobe Photoshop. Les fichiers des palettes enregistrées ont l’extension .act.
Pour enregistrer une palette de couleurs personnalisée :
1
Choisissez Enregistrer la palette dans le menu déroulant des options du panneau Optimiser.
2
Tapez le nom de la palette et choisissez le dossier de destination.
3
Cliquez sur Enregistrer.
Chargez le ficher de palette enregistré dans le panneau Echantillons ou Optimiser et utilisez-le
pour exporter d’autres documents.
348 Chapitre 15
Réglage de la compression
Vous pouvez obtenir un taux de compression encore supérieur pour les fichiers GIF en modifiant
la valeur de leur paramètre Perte. Plus cette valeur est élevée, plus les fichiers sont de petite taille,
mais plus la qualité de l’image est réduite. Une valeur de perte comprise entre 5 et 15 permet
généralement d’obtenir les meilleurs résultats.
Fichier gif d’origine ; Perte de 30 ; perte de 100
Pour changer le taux de compression d’un fichier GIF :
Indiquez la valeur du paramètre Perte dans le panneau Optimiser.
Création de zones de transparence
Vous pouvez définir des zones de transparence dans les fichiers GIF et PNG 8 bits, de façon à ce
que l’arrière-plan de la page Web soit visible au travers de ces zones dans le navigateur. Dans
Fireworks, un échiquier gris et blanc dans les onglets Aperçu indique les zones transparentes.
Aperçu d’une image optimisée dans Fireworks ; image exportée avec transparence et placée sur une page
Web ayant un fond coloré
Remarque : Des zones de transparence sont automatiquement définies dans les fichiers PNG 32 bits, même si
aucune option de transparence pour fichier PGN 32 bits n’est visible dans le panneau Optimiser.
Utilisez l’option Transparence d’index lorsque vous exportez des images GIF contenant des zones
de transparence. La transparence d’index vous permet de spécifier les couleurs qui seront
transparentes lors de l’exportation des fichiers. Cette option active ou désactive des pixels ayant
des valeurs de couleur spécifiques. Etant donné que les images GIF prennent en charge la
transparence d’index, elles représentent la forme de transparence la plus utilisée sur le Web.
Remarque : Par défaut, les images GIF sont exportées sans transparence dans Fireworks. Bien que le document
apparaissant derrière une image ou un objet soit transparent dans la fenêtre Original de Fireworks, cela n’implique
pas que l’arrière-plan de l’image sera transparent lorsqu’elle sera exportée en format GIF pour être utilisée sur le Web.
Vous devez sélectionner l’option Transparence d’index avant d’exporter l’image.
Optimisation et exportation 349
Vous pouvez également choisir l’option Transparence Alpha, bien qu’elle ne soit pas souvent
utilisée pour les graphismes du Web étant donné qu’elle n’est prise en charge que par les fichiers
de format PNG et que la plupart des navigateurs Web n’utilisent pas ce format. Cette option est
souvent utilisée dans les graphismes exportés qui contiennent une transparence de dégradés et des
pixels semi-opaques. La transparence alpha s’avère également utile lorsque vous exportez des
fichiers vers Macromedia Flash ou Director, puisque ces deux applications prennent en charge ce
type de transparence.
Remarque : L’application de la transparence à des couleurs n’affecte pas l’image en tant que telle, mais seulement
sa version exportée. Vous pouvez voir l’aspect qu’aura l’image exportée dans une fenêtre Aperçu. Pour plus
d’informations sur les onglets Aperçu, voir « Prévisualisation et comparaison des paramètres d’optimisation » à la
page 339.
Pour sélectionner une couleur de transparence :
1
Cliquez sur l’un des onglets Aperçu, 2 en 1 ou 4 en 1. Dans l’onglet 2 en 1 ou 4 en 1, cliquez
sur une autre fenêtre que celle de l’ original.
2
Dans le panneau Optimiser, choisissez Transparence d’index dans le menu contextuel
Transparence à la base du panneau.
La couleur du fond apparaît transparente dans l’aperçu.
3
Pour choisir une autre couleur, cliquez sur le bouton Définir la couleur de transparence
d’index.
Le pointeur prend l’aspect d’une pipette.
4
Pour choisir la couleur de la transparence, procédez de l’une des manières suivantes :
• Cliquez sur une couleur dans la table des couleurs du panneau Optimiser.
• Cliquez sur une couleur dans le document.
Pour ajouter ou supprimer des couleurs de la transparence :
1
Cliquez sur l’un des onglets Aperçu, 2 en 1 ou 4 en 1. Dans l’onglet 2 en 1 ou 4 en 1, cliquez
dans une autre fenêtre que celle de l’original.
Remarque : Vous pouvez ajouter ou supprimer des couleurs de la transparence dans la fenêtre Original, mais
vous ne pourrez visualiser les résultats que dans une fenêtre d’aperçu.
2
Dans le panneau Optimiser, cliquez sur le bouton Ajouter la couleur à la transparence ou
Effacer la couleur de la transparence.
3
Pour choisir une autre couleur de la transparence ou pour surpprimer la couleur de la
transparence, procédez de l’une des manières suivantes :
• Cliquez sur une couleur dans la table des couleurs du panneau Optimiser.
• Cliquez sur une couleur dans la fenêtre d’aperçu.
Pour appliquer un effet de transparence à l’arrière-plan d’une image :
1
Cliquez sur l’un des onglets Aperçu, 2 en 1 ou 4 en 1. Dans l’onglet 2 en 1 ou 4 en 1, cliquez
sur une autre fenêtre que celle de l’ original.
350 Chapitre 15
2
Choisissez le format GIF dans le panneau Optimiser, puis Transparence d’index dans le menu
contextuel Transparence.
La couleur de fond apparaît transparente dans l’aperçu et l’image peut être alors exportée.
Interlacement : Téléchargement graduel
Lorsqu’elles sont affichées dans un navigateur Web, les images entrelacées apparaissent
progressivement au fur et à mesure du téléchargement. Elles s’affichent à faible résolution, puis
atteignent leur résolution finale à la fin du téléchargement.
Remarque : Cette option est disponible pour les formats de fichier GIF et PNG. Vous pouvez obtenir des résultas
identiques avec une image JPEG en rendant son téléchargement progressif. Pour plus d’informations, voir
« Optimisation des fichiers JPEG » à la page 351.
Pour exporter une image GIF ou PNG entrelacée :
Activez l’option Entrelacée dans le menu déroulant des options du panneau Optimiser.
Optimisation des fichiers JPEG
A partir du panneau Optimiser, vous pouvez optimiser les fichiers JPEG en définissant des options
de compression et de lissage.
Les fichiers JPEG étant toujours enregistrés en couleur 24 bits, vous pouvez les optimiser en
modifiant leur palette de couleurs. La table de couleurs est vide lorsque vous sélectionnez une
image JPEG.
Comme vous l’avez expérimenté avec des paramètres d’optimisation différents, utilisez les aperçus
2 en 1 et 4 en 1 pour tester et comparer l’apparence d’une image JPEG et la taille estimée du
fichiers résultant. Pour plus d’informations sur l’utilisation des onglets Aperçu, voir
« Prévisualisation et comparaison des paramètres d’optimisation » à la page 339.
Optimisation et exportation 351
En ajustant la qualité JPEG
Le format JPEG est un format « avec perte », ce qui signifie qu’une partie des données de l’image
est rejetée lors de la compression, ce qui réduit la qualité du fichier final. Toutefois, dans la
plupart des cas, certaines données de l’image peuvent être perdues sans qu’il soit possible de
déceler à l’oeil nu une importante différence de qualité.
Image originale : réglage de la qualité sur 50 ; réglage de la qualité sur 20
Pour déterminer l’importance de la perte de qualité lors de la compression d’un fichier JPEG à
exporter :
Réglez la perte de qualité à l’aide du curseur du menu déroulant Qualité du panneau Optimiser.
• Utilisez une valeur élevée pour préserver au maximum la qualité ; la compression sera alors
moins importante et les fichiers résultants plus volumineux.
• A l’inverse, une valeur faible permet d’obtenir un fichier de taille réduite mais d’une qualité
graphique inférieure.
Compression sélective des zones dans une image JPEG
La compression JPEG sélective permet de compresser différentes zones d’une image JPEG à
différents niveaux. Les zones importantes d’une image peuvent ainsi être compressées en
conservant un niveau de qualité élevé. Les zones moins importantes, par exemple les arrière-plans,
peuvent être compressées à un niveau de qualité moins élevé, ce qui réduit la taille générale du
fichier image tout en préservant la qualité des zones principales.
La zone sélectionnée dans cette image est compressée à un niveau de qualité de 90, tandis que la zone
non sélectionnée est compressée à un niveau de qualité de 50.
352 Chapitre 15
Pour compresser des zones sélectionnées dans un fichier JPEG :
1
Dans la fenêtre Original, sélectionnez la zone à compresser dans le graphisme à l’aide de l’outil
Cadre.
2
Choisissez Modification > JPEG sélective > Enregistrer en tant que masque JPEG.
3
Si ce n’est déjà fait, choisissez JPEG dans le menu contextuel Export un format de fichier.
4
Cliquez sur le bouton Modifier les options de qualité sélective dans le panneau Optimiser.
La boîte de dialogue Paramètres JPEG sélectifs s’affiche.
5
Activez la case à cocher Activer la qualité sélective et indiquez un taux de compression dans la
zone de texte.
Plus la valeur indiquée sera faible, plus la zone de qualité JPEG sélective sera compressée à un
taux important par rapport au reste de l’image. Plus la valeur indiquée sera élevée, moins la
zone de qualité JPEG sélective sera compressée à un taux important par rapport au reste de
l’image.
6
Au besoin, changez la couleur de la zone de qualité JPEG sélective. Cela n’affecte pas le résultat.
7
Activez la case à cocher Préserver la qualité du texte. Tous les éléments texte seront
automatiquement exportés avec un niveau de qualité élevé, quelle que soit la valeur de qualité
sélective de la zone dans laquelle ils sont inclus.
8
Activez la case à cocher Préserver la qualité du bouton. Tous les symboles de boutons seront
automatiquement exportés avec un niveau de qualité élevé.
9
Cliquez sur OK.
Pour modifier la zone de compression JPEG sélective :
1
Choisissez Modification > JPEG sélective > Restaurer le masque JPEG en tant que sélection.
La sélection apparaît en surbrillance.
2
Pour modifier la taille de la zone de sélection, utilisez l’outil Cadre de sélection ou tout autre
outil dede sélection.
3
Choisissez Modification > JPEG sélective > Enregistrer en tant que masque JPEG.
4
Au besoin, modifiez les paramètres de qualité sélective dans le panneau Optimiser.
Remarque : Pour annuler une sélection, choisissez Modification > JPEG sélective > Supprimer le masque JPEG.
Adoucissement ou accentuation des détails
Dans le panneau Optimiser, l’option Lissage permet de réduire la taille des fichiers JPEG. Le
lissage consiste à adoucir les contours francs, qui n’offrent pas de bonnes possibilités de
compression en JPEG. Les valeurs élevées produisent un niveau de lissage élevé dans les fichiers
JPEG exportés, ce qui crée en général des fichiers de plus petite taille. Une valeur de lissage de 3
environ suffit à réduire la taille du fichier image, tout en préservant une qualité raisonnable.
Pour préserver la netteté des séparations entre deux couleurs :
Choisissez l’option Bords des JPEG plus nets dans le menu déroulant des options du panneau
Optimiser.
Optimisation et exportation 353
Utilisez cette option pour exporter des fichiers JPEG qui contiennent du texte ou des détails fins
et préserver la netteté de ces zones. L’option Bords des JPEG plus nets a pour conséquence
d’augmenter la taille du fichier.
Utilisation d’images JPEG progressive
Comme les images GIF et PNG entrelacées, les images JPEG progressives commencent par
apparaître à faible résolution, et leur qualité s’améliore au cours de la suite du chargement.
Pour exporter une image JPEG progressive :
Choisissez JPEG progressive dans le menu déroulant des options du panneau Optimiser.
Remarque : Certaines applications anciennes d’édition d’images bitmap ne peuvent pas ouvrir les JPEG à image
progressive.
Réglage de l’anticrénelage en fonction de la couleur d’arrière-plan cible
L’anticrénelage permet d’adoucir les contours d’un objet en mélangeant progressivement sa
couleur avec celle de l’arrière-plan dans lequel il est placé. Par exemple, si l’objet est noir et que la
plage sur laquelle il est placé est blanche, la fonction d’anticrénelage ajoutera plusieurs niveaux de
gris intermédiaires aux pixels qui forment le contour de l’objet, pour adoucir la transition entre le
noir et le blanc.
En sélectionnant l’option Matage dans le panneau Optimiser, vous pouvez appliquer la couleur
mate aux objets placés directement sur le fond. Cette option est utile lorsque vous exportez des
graphismes à placer dans des pages Web ayant des arrière-plans de couleur.
Pour régler l’anticrénelage en fonction de la couleur d’arrière-plan cible :
Dans le panneau Optimiser, choisissez une couleur dans le menu contextuel Matage. Prenez une
couleur le plus proche possible de la couleur de l’arrière-plan cible sur lequel le graphisme exporté
sera placé.
Remarque : L’anticrénelage s’applique uniquement aux objets à contours adoucis placés directement sur le fond.
354 Chapitre 15
Suppression des halos
Lorsque vous rendez transparente la couleur de fond d’une image ayant été anticrénelée, les pixels
créés pour assurer l’anticrénelage restent en place. Lorsque vous exportez le graphisme et le placez
sur une page Web ayant une couleur d’arrière-plan différente, les pixels qui sont à la périphérie de
l’objet sur lequel a été effectué l’anticrénelage peuvent apparaître sur le fond de la page Web. Ce
sont ces pixels qui forment un halo, qui se remarque particulièrement sur un arrière-plan sombre.
Vous pouvez éviter l’apparition de halos dans les fichiers natifs PNG Fireworks et les fichiers
importés depuis Photoshop. Toutefois, pour les fichiers exportés tels que les fichiers GIF, le halo
peut être supprimé manuellement.
Pour éviter l’apparition de halos dans les fichiers natifs PNG Fireworks et les fichiers importés
depuis Photoshop, procédez de l’une des manières suivantes :
• Choisissez une couleur de fond dans le Vérificateur de propriétés ou une couleur de matage
dans le panneau Optimiser qui soit identique à celle de l’arrière-plan de la page Web cible.
• Après avoir sélectionné l’objet à exporter, choisissez Net dans le menu contextuel Bord du
Vérificateur de propriétés.
Pour supprimer manuellement un halo d’une image GIF ou d’un fichier graphique exporté :
1
Ouvrez le fichier dans Fireworks, puis cliquez sur l’onglet Aperçu 2 en 1 ou 4 en 1. Dans
l’onglet 2 en 1 ou 4 en 1, cliquez sur une autre fenêtre que celle de l’original.
2
Dans le panneau Optimiser, choisissez Transparence d’index dans le menu contextuel
Transparence.
3
Cliquez sur le bouton Ajouter la couleur à la transparence, puis cliquez sur le un pixel dans le
halo.
Tous les pixels de couleur identique sont effacés dans la fenêtre Aperçu.
4
Si le halo subsiste, répétez l’étape 3 jusqu’à ce qu’il disparaisse.
Enregistrement et réutilisation des paramètres d’optimisation
Vous pouvez enregistrer vos paramètres d’optimisation personnels pour les réutiliser
ultérieurement dans un processus d’optimisation ou de traitement par lots. Voici les paramètres
personnels qui sont enregistrés :
• Les paramètres et la table de couleur définis dans le panneau Optimiser
• Paramètres de cadence des images du panneau Images (pour les animations uniquement)
Optimisation et exportation 355
Pour enregistrer les paramètres d’optimisation comme paramètres prédéfinis :
1
Dans le panneau Optimiser, cliquez sur le bouton Enregistrer les paramètres actifs.
2
Indiquez le nom de l’optimisation prédéfinie, et cliquez sur OK.
Le paramétrage d’optimisation enregistré apparaît dans la partie inférieure du menu contextuel
Paramètres du panneau Optimiser et dans le Vérificateur de propriétés. Il sera disponible pour
tous les documents ultérieurs. Le fichier de ces paramètres prédéfinis est enregistré dans le
dossier Export Settings de votre disque dur.
Remarque : L’emplacement exact de ce dossier varie en fonction du système d’exploitation. Pour plus
d’informations, voir « Utilisation des fichiers de configuration » à la page 439.
Pour le transmettre à un autre utilisateur de Fireworks :
Copiez le fichier de paramétrage d’optimisation depuis le dossier Export Settings dans le dossier
équivalent sur l’autre ordinateur.
Pour supprimer une optimisation prédéfinie :
1
Dans le menu contextuel Paramètres du panneau Optimiser, choisissez le paramétrage
d’optimisation à supprimer.
2
Dans le panneau Optimiser, cliquez sur le bouton Supprimer les paramètres enregistrés.
Vous ne pouvez pas supprimer l’un des paramétrages prédéfinis de Fireworks.
Exportation depuis Fireworks
L’exportation Fireworks s’exécute en deux étapes : Vous préparez d’abord un graphisme ou un
document pour l’exportation en choisissant des options d’optimisation. Une fois le graphisme ou
le document optimisé, vous pouvez l’exporter. Pour plus d’informations sur l’optimisation, voir
« Optimisation » à la page 333.
Sous Fireworks, vous pouvez exporter des graphismes de différentes manières. Vous pouvez
exporter un document sous forme de fichier simple au format GIF, JPEG ou dans un autre format
de fichier. Vous pouvez également exporter l’ensemble du document sous la forme d’un fichier
HTML et de plusieurs fichiers graphiques associés. Par ailleurs, vous pouvez choisir d’exporter
uniquement les découpes sélectionnées. Vous pouvez également exporter uniquement une zone
spécifique du document. En outre, vous pouvez exporter des images et des calques dans des
fichiers d’image distincts.
356 Chapitre 15
Exportation d’une seule image
Utilisez Fichier > Exporter pour exporter un graphisme après l’avoir optimisé à partir de l’espace
de travail.
Boite de dialogue Exporter
Remarque : Pour exporter uniquement certaines images d’un document, vous devez d’abord découper votre
document, puis exporter uniquement les découpes désirées. Pour plus d’informations, voir « Exportation des
découpes sélectionnées » à la page 358.
Pour exporter un document Fireworks sous la forme d’une image unique :
1
Choisissez Fichier > Exporter.
2
Indiquez l’emplacement vers lequel le fichier image sera exporté.
Pour les graphismes du Web, le meilleur emplacement est généralement un dossier du site Web
local.
3
Indiquez un nom de fichier. Vous pouvez ne pas indiquer une extension pour le nom de
fichier ; Fireworks la fournit automatiquement à partir du type de fichier que vous avez spécifié
dans les paramètres d’optimisation. Pour plus d’informations sur l’optimisation, voir
« Optimisation » à la page 333.
4
Dans le menu contextuel Type, choisissez Images uniquement.
5
Cliquez sur Enregistrer.
Optimisation et exportation 357
Exportation d’un document découpé
Par défaut, lorsque vous exportez un document Fireworks découpé, il est exporté sous forme de
fichier HTML et de plusieurs fichiers graphiques. Le fichiers HTML exporté peut être visualisé
dans une navigateur Web ou importé dans d’autres applications pour être amélioré.
Remarque : Vous pouvez utiliser plusieurs méthodes pour importer des fichiers Fireworks HTML dans d’autres
applications. Pour plus de détails sur les fichiers HTML et les méthodes d’exportation de fichiers Fireworks HTML,
voir « Exportation du fichier au format HTML » à la page 362.
Avant d’exporter le fichier, assurez-vous que vous utilisez le style HTML approprié sélectionné
dans la boîte de dialogue Configuration HTML. Pour plus d’informations, voir « Définition des
options d’exportation du code HTML » à la page 369.
Pour exporter un document Fireworks découpé :
1
Choisissez Fichier > Exporter.
2
Localisez le dossier désiré sur votre disque dur.
3
Dans le menu déroulant Type, choisissez HTML et images.
4
Indiquez un nom de fichier dans le champ Nom du fichier (Windows) ou Enregistrer sous
(Macintosh).
5
Sélectionnez Exporter le fichier HTML dans le menu déroulant HTML.
6
Choisissez Exporter les découpes dans le menu contextuel Découpes.
7
(Facultatif ) Choisissez Placer les images dans des sous-dossiers.
8
Cliquez sur Enregistrer.
Les fichiers Fireworks exportés apparaissent sur le disque dur. Des images et un fichier HTML
sont créés dans l’emplacement spécifié dans la boîte de dialogue Exporter. Pour plus
d’informations sur les options disponibles dans la boîte de dialogue Exporter lorsque HTML
ou Images est sélectionné comme type de fichier, voir « Exportation de code généré par
Fireworks » à la page 363.
Exportation des découpes sélectionnées
Vous pouvez exporter des découpes sélectionnées dans un document Fireworks. Cliquez en
maintenant la touche Maj enfoncée pour sélectionner plusieurs découpes.
Remarque : Pour plus de détails sur la découpe, voir « Création et modification d’une découpe » à la page 269.
Pour exporter les découpes sélectionnées :
1
Utilisez l’une des méthodes suivantes :
• Choisissez Fichier > Exporter.
• Pour exporter une découpe sélectionnée, cliquez avec le bouton droit (Windows) ou maintenez
la touche Contrôle enfoncée et cliquez (Macintosh), puis choisissez Exporter la découpe
sélectionnée.
2
Choisissez ensuite un dossier de destination pour les fichiers exportés.
En général, il est préférable de choisir un dossier figurant dans votre site Web local.
358 Chapitre 15
3
Indiquez un nom de fichier. Vous pouvez ne pas indiquer une extension pour le nom de
fichier ; Fireworks la fournit automatiquement.
Si vous exportez plusieurs découpes, Fireworks utilise le nom spécifié comme étant le nom
racine de tous les graphismes exportés, à l’exception des graphismes auxquels vous avez affecté
des noms personnalisés dans le panneau Calques ou dans le Vérificateur de propriétés.
4
Choisissez Exporter les découpes dans le menu contextuel Découpes.
5
Pour exporter uniquement les découpes sélectionnées avant l’exportation, choisissez Découpes
sélectionnées uniquement, puis vérifiez que l’option Inclure les zones sans découpes est
désactivée.
6
Cliquez sur Enregistrer.
Les découpes sont exportées en utilisant des paramètres d’optimisation qui leur sont propres et
tels que définis à partir du panneau Optimiser. Pour plus d’informations sur l’optimisation,
voir « Optimisation » à la page 333.
Mise à jour d’une découpe
Si vous avez déjà exporté un document découpé et avez modifié le document original Fireworks
apès l’avoir exporté, vous pouvez mettre à jour l’image ou la découpe modifiée uniquement, sans
devoir exporter et mettre à jour l’ensemble de l’image. Il est recommandé d’utiliser des noms de
découpe personnalisés afin de pouvoir aisément trouver la découpe de remplacement. Pour plus
d’informations, voir « Affectation de nom aux découpes » à la page 286.
Pour mettre à jour une seule découpe :
1
Masquez la découpe pour modifier la zone qu’elle recouvre.
2
Affichez ensuite la découpe, et sélectionnez-la.
3
Choisissez Fichier > Exporter.
4
Choisissez Découpes sélectionnées uniquement.
5
Cliquez sur Enregistrer pour exporter la découpe dans le même dossier que la découpe originale,
en utilisant le même nom de base.
6
Cliquez sur OK lorsque le programme vous demande si vous voulez remplacer le fichier
existant.
Si vous reprenez le nom de fichier original pour la nouvelle version et téléchargez cette nouvelle
découpe au même emplacement de votre site Web que pour l’original, la nouvelle découpe
remplace l’ancienne dans le document HTML.
Remarque : Sous Fireworks, évitez de redimensionner la découpe au-delà de sa taille d’exportation d’origine
car vous risquez d’obtenir des résultats imprévisibles dans le document HTML après la mise à jour de la
découpe.
Exportation d’une animation
Lorsque vous avez créé et optimisé une animation, elle est prête à être exportée. Vous pouvez
exporter une animation dans les formats GIF animé ou Flash SWF ou sous forme de plusieurs
fichiers distincts.
Si votre document comporte plusieurs animations, vous pouvez insérer des découpes par dessus
chaque animation en utilisant différents paramètres d’animation tels que la lecture ne boucle et la
cadence d’images.
Optimisation et exportation 359
Pour plus d’informations sur l’exportation d’animations sous forme de fichiers Flash SWF, voir
« Utilisation de Macromedia Flash MX » à la page 388. Pour plus d’informations sur l’exportation
d’animations vers plusieurs fichiers, voir « Exportation des images ou calques » à la page 360.
Pour exporter une animation en fichier GIF animé :
1
Choisissez Edition > Aucune sélection pour désélectionner tous les objets et découpes, puis,
dans le panneau Optimiser, choisissez le format de fichier GIF animé.
Pour plus d’informations sur l’optimisation, voir « Optimisation des images GIF, PNG, TIFF,
BMP et PICT » à la page 342.
2
Choisissez Fichier > Exporter.
3
Dans la boîte de dialogue d’exportation, tapez un nom pour le fichier, puis choisissez le dossier
de destination.
4
Cliquez sur Enregistrer.
Pour exporter sous forme de fichiers GIF animé plusieurs animations ayant des paramètres
d’animation distincts :
1
Maintenez enfoncée la touche Maj et cliquez pour sélectionner toutes les animations.
2
Choisissez Edition > Insérer > Découpe.
Un message vous demande si vous souhaitez insérer une ou plusieurs découpes.
3
Cliquez sur Multiple.
4
Sélectionnez chaque découpe individuellement, puis dans le panneau Images, définissez les
paramètres d’animation de chaque découpe. Pour plus d’informations sur les paramètres
d’animations, voir Chapitre 14, « Création d’animations », à la page 317.
5
Choisissez Edition > Aucune sélection pour désélectionner tous les objets et découpes, puis,
dans le panneau Optimiser, choisissez le format de fichier GIF animé.
Pour plus d’informations sur l’optimisation, voir « Optimisation des images GIF, PNG, TIFF,
BMP et PICT » à la page 342.
6
Cliquez sur le bouton droit (Windows) ou maintenez enfoncée la touche Contrôle
(Macintosh) et cliquez sur chaque découpe ; dans le menu contextuel, choisissez ensuite
Exporter la découpe sélectionnée pour exporter individuellement chaque découpe. A partir de
la boîte de dialogue Exporter, tapez un nom pour chaque fichier, sélectionnez une destination,
puis cliquez sur Enregistrer.
Exportation des images ou calques
Fireworks permet d’exporter les calques et les images dans des fichiers distincts en tenant compte
des paramètres d’optimisation spécifiés dans le panneau Optimiser. Le nom du calque ou de
l’image détermine le nom du fichier exporté correspondant. Cette méthode d’exportation est
souvent utilisée pour exporter des animations.
Pour exporter les images ou les calques dans des fichiers distincts :
1
Choisissez Fichier > Exporter.
2
Tapez un nom de fichier et choisisssez un dossier de destination.
3
Dans le menu déroulant Type, choisissez l’une des options suivantes :
360 Chapitre 15
• Pour exporter les images dans des fichiers distincts, choisissez Images vers fichiers.
• Pour exporter les calques dans des fichiers distincts, choisissez Calques vers fichiers.
Remarque : Cette option exporte l’ensemble des calques de l’image active.
4
Choisissez Rogner les images pour recadrer automatiquement les images exportées en fonction
des objets qu’elles contiennent.
Lorsque vous devez exporter des images ou des calques dont la taille est identique à celle du
document, désactivez Rogner les images.
5
Cliquez sur Enregistrer.
Exportation d’une zone
L’outil Exporter zone sert à exporter une partie d’un document Fireworks.
Pour exporter une partie d’un document :
1
A partir du panneau Outils, choisissez l’outil Exporter zone.
2
Cliquez et faites glisser pour tracer un cadre de sélection autour de la partie à exporter.
Remarque : Vous pouvez ajuster la position d’un cadre de sélection à mesure que vous le dessinez. Tout en
maintenant enfoncé le bouton de la souris, appuyez simplement et maintenez enfoncée la barre d’espacement
du clavier, puis faites glisser le cadre de sélection vers un autre emplacement du document. Relâchez la barre
d’espacement pour continuer à dessiner le cadre de sélection.
Lorsque vous relâchez le bouton de la souris, la zone d’exportation reste sélectionnée.
3
Au besoin, redimensionnez la zone d’exportation :
• Pour redimensionner le cadre de sélection de la zone d’exportation tout en conservant les
proportions, appuyez et maintenez enfoncée la touche Maj tout en faisant glisser la poignée de
redimensionnement.
• Pour redimensionner le cadre de sélection à partir du centre, maintenez la touche Alt (Windows)
ou Options (Macintosh) enfoncée pendant l’opération.
• Maintenez enfoncées les touches Alt+Maj (Windows) ou Option+Maj (Macintosh) et faites
glisser une poignée pour maintenir les proportions et dessiner à partir du centre du cadre de
sélection.
4
Double-cliquez à l’intérieur du cadre de sélection de la zone à exporter pour activer l’ Aperçu
avant exportation.
5
Définissez les paramètres d’exportation à partir de la boîte de dialogue Aperçu avant
exportation, puis cliquez sur Exporter.
6
A partir de la boîte de dialogue Exporter, tapez un nom de fichier et choisissez un dossier de
destination.
7
A partir du menu déroulant Enregistrer sous, choisissez Images uniquement.
8
Cliquez sur Enregistrer.
Remarque : Pour annuler l’exportation, double-cliquez à l’extérieur du cadre de sélection, appuyez sur la touche
Echap ou choisissez un autre outil.
Optimisation et exportation 361
Exportation du fichier au format HTML
Sauf indication contraire, lorsque vous exportez un document Fireworks découpé, il est exporté
sous forme de fichier HTML et de plusieurs fichiers graphiques.
Fireworks génère un véritable fichier HTML qui peut être lu dans la plupart des navigateurs Web
et éditeurs de code HTML. Il existe plus façons d’exporter un document Fireworks en fichier
HTML :
• Exportez un fichier HTML que vous pouvez ouvrir plus tard pour le modifier dans un éditeur
de code HTML.
• Copier le code HTML dans le Presse-papiers de Fireworks, puis coller directement ce code
dans un document HTML existant.
• Exporter un fichier HTML, l’ouvrir dans un éditeur de code HTML, sélectionner
manuellement des parties du code dans le fichier, puis coller ces parties dans un autre
document HTML.
• Utiliser la commande Mettre à jour le code HTML pour modifier un fichier HTML créé
précédemment.
Remarque : Les applications Macromedia Dreamweaver et Microsoft FrontPage sont étroitement intégrées à
Fireworks. Fireworks gère les exportations de code HTML vers ces applications de manière différente des autres
éditeurs de code HTML. Si vous exportez un code HTML généré par Fireworks vers l’une de ces applications, voir
Chapitre 16, « Utilisation de Fireworks avec d’autres applications », à la page 373.
Vous pouvez aussi exporter des fichiers HTML sous forme de calques CSS (Cascading Style
Sheet). Fireworks prend en charge les codes UTF-8 et XHTML, ce qui permet également
d’exporter des documents dans ces codes standard.
Utilisez la boîte de dialogue Configuration HTML pour définir les paramètres d’exportation de
code HTML. Ces paramètres peuvent se limiter au document ou servir de paramètres par défaut
pour toutes les exportations de code HTML.
Code HTML
Fireworks génère automatiquement le code HTML lorsque vous exportez, copiez ou mettez à jour
fichier HTML. Vous n’avez pas besoin de le comprendre pour l’utiliser. Une fois ce code généré, il
n’est pas nécessaire de le modifier pour l’utiliser, tant que vous ne renommez pas ou ne déplacez
pas les fichiers.
HTML est l’abréviation de HyperText Markup Language et représente actuellement le langage
standard pour la création et l’affichage de pages Web sur Internet. Un fichier HTML est un
fichier texte contenant les éléments suivants :
• Le texte qui doit apparaître sur la page Web.
• Les balises HTML qui définissent la mise en page et la structure de ce texte et de la totalité du
document, ainsi que les liens vers des images et d’autres documents HTML (pages Web).
Les balises HTML sont incluses entre des signes « inférieur à » et « supérieur à », ce qui leur
donne l’aspect suivant :
<TAG> texte concerné </TAG>
La balise d’ouverture peut, par exemple, indiquer au navigateur que le texte doit être mis en
forme d’une certaine manière, ou qu’une image doit être insérée. La balise de fermeture (</TAG>),
lorsqu’elle existe, indique la fin de cette instruction.
362 Chapitre 15
Insertion de commentaires dans un code HTML
Le code HTML généré par Fireworks est abondamment commenté, et vous indique la fonction
de chaque portion de code. En HTML, tout commentaire de code commence par le marqueur
<!-- et se termine par le marqueur -->. Le texte qui figure entre ces deux marqueurs n’est pas
interprété comme du code HTML ou JavaScript. Si vous désirez insérer des commentaires dans
un code HTML, vous devez indiquer à Fireworks d’activer cette option.
Pour inclure des commentaires dans un code HTML exporté :
Avant l’exportation, ouvrez la boîte de dialogue Configuration HTML et activez l’option Inclure
les commentaires HTML dans la fenêtre de l’onglet Générales.
Résultats de l’exportation
Lorsque vous exportez ou copiez un code HTML depuis Fireworks, le code ci-dessous est généré
afin que votre image Fireworks puisse être reconstituée sur une page Web :
• Le code HTML nécessaire pour rassembler les images découpées et un code JavaScript, si le
document contient des éléments interactifs. Le code HTML généré par Fireworks contient des
liens vers les images exportées et utilise la couleur du document pour le fond de la page Web.
• Il génère un ou plusieurs fichiers d’image, en fonction du nombre de découpes figurant dans
votre document et du nombre d’états de boutons.
• Si nécessaire, il génère un fichier de séparateurs appelé Spacer.gif, qui est un fichier GIF
transparent, d’1- pixel carré que Fireworks utilise pour corriger les problèmes d’espacement
lorsque les images découpées sont assemblées de nouveau dans une table HTML. La création
de ce fichier d’espacement est facultative. Pour plus d’informations, voir « Définition des
options d’exportation du code HTML » à la page 369.
• Si votre document contient plusieurs menus contextuels, Fireworks crée un fichier
mm_menu.js contenant le code utilisé pour l’affichage des menus contextuels.
• Lorsque vous exportez ou copiez un code HTML dans Macromedia Dreamweaver, des fichiers
de commentaires sont créés pour permettre une étroite intégration entre Fireworks et
Dreamweaver.
Exportation de code généré par Fireworks
Fireworks permet d’exporter le code HTML dans les formats suivants : Générique, Dreamweaver,
FrontPage, et Adobe® GoLive®. Le format Générique est utilisé dans la plupart des éditeurs de
code HTML. L’exportation de code HTML généré par Fireworks crée un fichier HTML et des
fichiers d’image à l’emplacement que vous avez spécifié.
Remarque : Fireworks exporte également le code HTML lorsque vous exportez un document dans Macromedia
Director et dans des calques CSS. Pour plus d’informations, voir « Utilisation de Macromedia Director » à la
page 397 et « Exportation de calques CSS » à la page 368.
La méthode d’exportation permettant de récupérer dans d’autres applications un code HTML
généré par Fireworks est une méthode idéale pour le travail en équipe. L’exportation d’un fichier
HTML fractionne la charge de travail, ce qui permet à une personne d’exécuter une tâche donnée
dans une application, puis à une autre de prendre la suite plus tard et de travailler dans une autre
application.
Optimisation et exportation 363
Vous pouvez définir des préférences globales pour l’exportation de code HTML dans la boîte de
dialogue HTML. Pour plus d’informations, voir « Définition des options d’exportation du code
HTML » à la page 369.
Remarque : Les applications Macromedia Dreamweaver et Microsoft FrontPage sont étroitement intégrées à
Fireworks. Fireworks gère les exportations de code HTML vers ces applications de manière différente des autres
éditeurs de code HTML. Si vous exportez un code HTML généré par Fireworks vers l’une de ces applications,
suivez les instructions ci-dessous, mais lisez également Chapitre 16, « Utilisation de Fireworks
avec d’autres applications », à la page 373.
Pour exporter un code HTML généré par Fireworks :
1
A partir de la boîte de dialogue Exporter, procédez de l’une des manières suivantes :
• Choisissez Fichier > Exporter.
• Cliquez sur le bouton Exportation rapide, dans l’angle inférieur droit de la fenêtre du
document, puis choisissez une option d’exportation dans le menu déroulant de l’application de
destination. Fireworks renseigne automatiquement les champs de la boîte de dialogue Exporter
en y faisant figurer les paramètres appropriés à l’application sélectionnée.
Remarque : Les applications autres que Macromedia sont accessibles à partir du sous-menu Exportation
rapide > Autres.
2
Localisez le dossier désiré sur votre disque dur.
3
Dans le menu déroulant Type, choisissez HTML et images.
4
Dans la boîte de dialogue Configuration HTML, cliquez sur le bouton Options, puis choisissez un
éditeur de code HTML dans le menu contextuel Style HTML de l’onglet Générales. Si votre
éditeur de code HTML n’est pas répertorié, choisissez Générique.
Remarque : Il est important de choisir l’option Style de code HTML comme éditeur de code HTML, car si vous
choisissez une autre option, les éléments interactifs tels que les boutons et les survols ne fonctionneront pas
correctement lorsque vous les importerez dans votre éditeur HTML.
5
Cliquez sur OK pour revenir à la boîte de dialogue Exporter.
6
Indiquez un nom de fichier dans le champ Nom du fichier (Windows) ou Enregistrer sous
(Macintosh).
7
Sélectionnez Exporter le fichier HTML dans le menu déroulant HTML.
L’option Exporter le fichier HTML génère un fichier HTML et les fichiers d’image associées
dans l’emplacement que vous avez spécifié.
8
Si votre document contient des découpes, choisissez Exporter les découpes dans le menu
contextuel Découpes.
9
Sélectionnez Placer les images dans le sous-dossier si vous souhaitez stocker les images dans des
dossiers distincts. Vous pouvez choisir un dossier spécifique ou utiliser le dossier Fireworks par
défaut, Images.
10
Cliquez sur Enregistrer.
Une fois exportés, les fichiers Fireworks apparaissent sur votre disque dur. Des images et un
fichier HTML sont créés dans l’emplacement spécifié dans la boîte de dialogue Exporter.
Copie d’un code HTML dans le Presse-papiers
Il est possible d’exporter très rapidement un code HTML généré par Fireworks en le copiant dans
le Presse-papiers.
364 Chapitre 15
La copie du code HTML dans Fireworks peut être réalisée de deux manières. Vous pouvez utiliser
la commande Copier le code HTML ou, dans la boîte de dialogue Exporter, sélectionner l’option
Copier dans le Presse-papiers. Cette option copie le code HTML dans le Presse-papiers et génère
des fichiers d’image à l’emplacement que vous avez spécifié. Vous pouvez ensuite coller ce code
dans un document ouvert dans votre éditeur de code HTML.
Bien que la copie dans le Presse-papiers soit la méthode la plus rapide pour copier un code
HTLM dans une autre application, elle n’est pas idéale dans toutes les situations. La copie de code
HTML dans le Presse-papiers présente les inconvénients suivants :
• Vous ne pouvez pas enregistrer des images dans un sous-dossier. Les images doivent se trouver
dans le même dossier que le fichier HTML dans lequel vous avez collé le code HTML copié,
sauf si vous copiez un code HTML dans Macromedia Dreamweaver.
• Les liens ou trajets utilisés dans les menus contextuels Fireworks sont mappés au lecteur de
disque dur, sauf si vous copiez un code HTML dans Dreamweaver.
• Si vous utilisez un éditeur de code HTML autre que Dreamweaver ou Microsoft FrontPage, le
code JavaScript associé aux graphismes des boutons, comportements et survols est copié, mais ne
fonctionne pas correctement.
Si vous rencontrez ce problème, sélectionnez l’option Exporter le fichier HTML à la place de
l’option de copie du code HTML dans le Presse-papiers.
Remarque : Avant de copier le code HTML, assurez-vous que vous avez choisi le style HTML approprié et activé
l’option Inclure les commentaires HTML dans l’onglet Générales de la boîte de dialogue Configuration HTML. Pour
plus d’informations, voir « Définition des options d’exportation du code HTML » à la page 369.
Pour copier un code HTML à partir de l’option Copier le code HTML :
1
Utilisez l’une des méthodes suivantes :
• Choisissez Edition > Copier le code HTML.
• Cliquez sur le bouton Exportation rapide, puis choisissez Copier le code HTML dans le menu
contextuel.
2
Un Assistant vous guide dans le paramétrage de l’exportation du code HTML et des images.
Lorsque cela vous est demandé, indiquez un dossier comme chemin de destination des images
exportées. Ce dossier doit être celui dans lequel se trouve le fichier HTML.
Remarque : Si vous collez le code HTML dans Macromedia Dreamweaver, peu importe le dosssier dans lequel
vous exportez les images, pourvu qu’il se trouve sur le même site Dreamweaver que le fichier HTML dans lequel
vous allez coller le code.
L’Assistant exporte les images dans le dossier indiqué, et copie le code HTML dans le Pressepapiers.
Pour copier le code HTML à partir de la boîte de dialogue Exporter :
1
Choisissez Fichier > Exporter.
Remarque : Si vous exportez le code dans Dreamweaver, vous pouvez aussi cliquer sur le bouton Exportation
rapide, puis choisir l’option Copier le code HTML dans le Presse-papiers à partir du sous-menu Dreamweaver.
2
Dans la boîte de dialogue d’exportation, indiquez un dossier comme destination des images
exportées. Ce dossier doit être celui dans lequel se trouve le fichier HTML.
Remarque : Si vous collez le code HTML dans Macromedia Dreamweaver, peu importe le dosssier dans lequel
vous exportez les images, pourvu qu’il se trouve sur le même site Dreamweaver que le fichier HTML dans lequel
vous allez coller le code.
Optimisation et exportation 365
3
Dans le menu déroulant Type, choisissez HTML et images.
4
Choisissez Copier dans le Presse-papiers dans le menu déroulant HTML.
5
Si votre document contient des découpes, choisissez Exporter les découpes dans le menu
contextuel Découpes.
6
Dans la boîte de dialogue Configuration HTML, cliquez sur le bouton Options, choisissez un
éditeur de code HTML, puis cliquez sur OK.
7
A partir de la boîte de dialogue Exporter, cliquez sur Enregistrer.
Pour coller dans un document HTML un code HTML copié depuis Fireworks :
1
Dans l’éditeur HTML, ouvrez un document HTML existant ou créez-en un nouveau.
Enregistrez le document dans le même dossier que celui des images exportées.
Remarque : Si vous utilisez Macromedia Dreamweaver, vous n’êtes pas tenu d’enregistrer le fichier HTML dans
le même dossier que celui des images exportées. Dès 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 indique
automatiquement les chemins vers les images associées.
2
Affichez le code HTML et placez le point d’insertion à l’emplacement désiré, entre les balises
<BODY>.
Remarque : Le code HTML copié depuis Fireworks ne contient pas les balises d’ouverture et de fermeture
<HTML> et <BODY>.
3
Collez le code HTML. Reportez-vous aux informations d’aide de votre éditeur HTML pour
savoir comment coller le contenu du Presse-papiers.
Lorsque vous collez un code dans un éditeur HTML, il est important de conserver à
l’emplacement exact les fichiers des images et les fichiers du code HTML pour ne pas rompre les
liens. Si possible, lorsque vous effectuez une copie dans le Presse-papiers, assurez-vous que les
images sont exportées à leur emplacement final sur le site Web. Comme Fireworks utilise des
adresses URL relatives aux documents, les liens seront rompus si les fichiers HTML ou des
images sont déplacés.
Copie et collage d’un code HTML à partir d’un fichier Fireworks
Vous pouvez ouvrir dans un éditeur de code HTML un code HTML généré par Fireworks et
copier/coller des parties du code dans un autre fichier HTML.
Pour copier un code depuis un fichier Fireworks exporté et le coller dans un autre document
HTML :
1
Dans l’éditeur de code HTML, ouvrez le fichier HTML Fireworks que vous avez exporté.
2
Sélectionnez le code désiré et copiez-le dans le Presse-papiers.
3
Ouvrez un document HTML existant ou créez-en un nouveau.
4
Collez le code contenu dans le Presse-papiers à l’emplacement désiré dans le nouveau fichier
HTML. Il n’est pas nécessaire de copier les balises <HTML> et <BODY> qui doivent déjà figurer
dans le document HTML de destination.
Si vous avez activé l’option Inclure les commentaires HTML dans la boîte de dialogue
Configuration HTML de Fireworks, suivez les instructions fournies dans les commentaires
pour copier/coller le code à l’emplacement approprié.
366 Chapitre 15
5
Si le document Fireworks contient des éléments interactifs, vous devez également copier le
code JavaScript.
Le code JavaScript est entouré de balises <SCRIPT> et se trouve dans la section <HEAD> du
document. Copiez et collez l’intégralité de la section <SCRIPT>, à moins que cette section
figure déjà dans votre document de destinationSi c’est le cas, vous ne devez copier et coller que
le contenu de la section <SCRIPT> dans la section <SCRIPT> existante en veillant à ne pas
écraser le contenu de cette dernière. Après avoir collé le code, vérifiez également qu’il n’existe
pas de fonctions JavaScript en double dans la section <SCRIPT>.
Mise à jour d’un code HTML exporté
La commande Mettre à jour le code HTML permet de modifier un document HTML déjà
exporté. Cette fonctionn est utile lorsque vous ne souhaitez mettre à jour qu’une partie d’un
document.
Remarque : La mise à jour du code HTML ne s’effectue pas de la même manière dans les documents Macromedia
Dreamweaver et les autres documents HTML. Pour plus d’informations, voir « Utilisation de Macromedia
Dreamweaver MX » à la page 373.
Pour mettre à jour un code HTML généré par Fireworks, vous pouvez choisir de remplacer
uniquement les images modifiées ou l’intégralité du code et des images. Si vous choisissez de ne
remplacer que les images modifiées, toutes les modifications appportées au fichier HTML en
dehors de Fireworks seront préservées.
Remarque : Si vous souhaitez apporter d’importantes modifications à la présentation du document, effecutez les
modifications dans Fireworks, puis réexportez le fichier HTML.
Pour mettre à jour le code HTML à partir de la commande Mettre à jour le code HTML :
1
Utilisez l’une des méthodes suivantes :
• Choisissez Fichier > Mettre à jour le code HTML.
• Cliquez sur le bouton Exportation rapide, puis choisissez Mettre à jour le code HTML dans le
menu contextuel.
2
Sélectionnez le fichier à mettre jour à partir de la boîte de dialogue Rechercher fichier HTML.
3
Cliquez sur Ouvrir.
4
Si aucun code HTML généré par Fireworks n’est détecté, cliquez sur OK pour insérer le
nouveau code HTML à la fin du document.
5
Par contre, si du code HTML généré par Fireworks est détecté, choisissez l’une des options cidessous et cliquez sur OK.
Remplacer les images et leur code HTML remplace
Mettre à jour les images uniquement écrase
6
le code HTML Fireworks précédent.
uniquement les images.
Lorsque la boîte de dialogue Sélectionnez le dossier Images s’affiche, choisissez un dossier et
cliquez sur Ouvrir.
Optimisation et exportation 367
Exportation de calques CSS
Les calques de type CSS (Cascading Style Sheets) permettent mieux contrôler l’affichage des pages
Web. Vous pouvez ainsi créer des feuilles de style ou modèles qui définissent la façon dont
différents éléments, tels que les en-têtes et les liens apparaissent. Avec les calques CSS, vous
pouvez définir en une seule opération le style et la présentation de plusieurs pages Web. Les
calques CSS peuvent se chevaucher et être empilés les uns au-dessus des autres. Sous Fireworks, les
sorties en code HTML normal ne se chevauchent pas.
Pour exporter un graphisme dans un calque CSS :
1
Choisissez Fichier > Exporter.
2
A partir de la boîte de dialogue Exporter, tapez un nom de fichier et choisissez un dossier de
destination.
3
Choisissez Calques CSS à partir du menu déroulant Enregistrer sous.
4
A partir du menu déroulant Source, choisissez l’une des options suivantes :
• Calques Fireworks exporte tous les calques en tant que calques CSS.
• Images Fireworks exporte tous les images en tant que calques CSS.
• Découpes Fireworks exporte les découpes du document en tant que calques CSS.
5
Sélectionnez Rogner les images pour recadrer automatiquement les images exportée et les
calques pour accommoder les objets.
6
Sélectionnez Placer les images dans le sous-dossier pour choisir le dossier devant recevoir les
images.
7
Cliquez sur Enregistrer.
Exportation d’un fichier XHTML
Dans un proche avenir, le langage XHTML est appelé à remplacer le langage HTML comme
langage standard pour l’affichage de contenu Web. Non seulement le code XHTML garantit une
compatibilité descendante — ce qui signifie qu’il peut être affiché dans la plupart des navigateurs
Web, mais il peut être également lu par tous les périphériques affichant un contenu XML tels que
les assistants numériques personnels, les téléphones mobiles et autres périphériques portables.
Le langage XHTML est une combinaison du langage HTML, le standard actuel pour la création
et l’affichage de pages Web, et du langage XML (eXtensible Markup Language). XHTML
contient les éléments du langage HTML tout en adpotant les règles de syntaxe plus strictes du
langage XML.
Pour prendre en charge ce nouveau standard, Fireworks permet d’exporter des fichiers XHTML.
Remarque : Fireworks peut également importer des fichiers XHTML. Pour plus d’informations, voir « Création de
fichiers PNG dans Fireworks à partir de fichiers HTML » à la page 80.
Pour plus d’informations sur le langage XHTML, consultez les spécifications XHTML du W3C
(Web World Wide Web Consortium ) sur le site http://www.w3.org.
Pour exporter un fichier XHTML depuis Fireworks :
1
Choisissez Fichier > Configuration HTML, sélectionnez un Style XHTML dans le menu
contextuel Style HTML de l’onglet Générales, puis cliquez sur OK.
368 Chapitre 15
2
Exportez le document en utilisant l’une des méthodes d’exportation ou de copie de document
HTML disponibles. Pour plus d’informations sur les différentes manières d’exporter et de
copier un document HTML depuis Fireworks, voir « Exportation du fichier au format
HTML » à la page 362.
Remarque : Fireworks utilise le codage UTF-8 lorsque vous exportez un document XHTML. Pour plus
d’informations sur le codage UTF-8, voir « Exportation de fichiers avec le codage UTF-8 » à la page 369.
Exportation de fichiers avec le codage UTF-8
Auparavant, les navigateurs Web ne pouvaient pas afficher des jeux de caractères distincts dans un
même document HTML. Par exemple, il n’était pas possible d’afficher sur une même page Web
des textes chinois et anglais, car les navigateurs Web ne pouvaient pas afficher des jeux de
caractères différents dans un même document.
Le UTF-8, acronyme de Universal Character Set Transformation Format-8, est une technique de
codage de texte qui permet aux navigateurs Web d’afficher différents jeux de caractères nationaux
sur une même page HTML. Fireworks permet d’exporter un document HTML avec le codage
UTF-8.
Remarque : Fireworks peut également importer des documents utilisant le codage UTF-8. Pour plus
d’informations, voir « Création de fichiers PNG dans Fireworks à partir de fichiers HTML » à la page 80.
Pour exporter des documents utilisant le codage UTF-8 :
1
Choisissez Fichier > Configuration HTML, sélectionnez Utiliser le codage UTF-8 dans
l’onglet Propre au document, puis cliquez sur OK.
Remarque : Pour plus d’informations sur les options de configuration HTML, voir « Définition des options
d’exportation du code HTML » à la page 369.
2
Exportez le document en utilisant l’une des méthodes d’exportation ou de copie de document
HTML disponibles. Pour plus d’informations sur les différentes manières d’exporter et de
copier un document HTML depuis Fireworks, voir « Exportation du fichier au format
HTML » à la page 362.
Définition des options d’exportation du code HTML
La boîte de dialogue Configuration HTML permet de définir le mode d’exportation du code
HTML à partir de Fireworks. Ces paramètres peuvent se limiter au document ou servir de
paramètres par défaut pour toutes les exportations de code HTML. Les modifications effectuées
dans l’onglet Propre au document affectent uniquement le document actif. Cependant, vous
pouvez utiliser ces paramètres comme paramètres par défaut pour tous les nouveaux documents, si
vous cliquez sur le bouton Paramètres par défaut avant de refermer la boîte de dialogue
Configuration HTML. Les paramètres Générales et Table sont des préférences globales et affectent
tous les nouveaux documents.
Pour spécifier le mode d’exportation du code HTML à partir de Fireworks :
1
Choisissez Fichier > Configuration HTML, ou cliquez sur le bouton Options dans la boîte de
dialogue Exporter.
2
A partir de l’onglet Générales, choisissez l’une des options suivantes :
Optimisation et exportation 369
• Choisissez l’une des options de Style HTML. Ces options s’appliquent au code HTML
exporté.
Le format Générique est utilisé dans tous les éditeurs de code HTML. Cependant, si le
document contient des comportements ou des contenus interactifs, choisissez un éditeur
spécifique s’il est répertorié dans la liste. Fireworks exporte différemment les éléments
interactifs en fonction de l’option de style HTML sélectionnée.
Pour exporter un document en appliquant le code standard XHTML, choisissez le style
XHTML approprié à partir du menu contextuel. Pour plus d’informations sur le code
XHTML, voir « Exportation d’un fichier XHTML » à la page 368.
• Choisissez un nom d’extension de fichier à partir du menu déroulant Extension ou tapez
l’extension de votre choix.
• Sélectionnez Inclure les commentaires HTML pour inclure des commentaires sur les endroits où
vous souhaitez couper et coller dans le code HTML. Il est recommandé d’utiliser cette option si
le document contient des éléments interactifs tels que des graphismes de bouton, de
comportement ou de survol. Les commentaires HTML permettent d’identifier les parties du
code à copier et à coller.
• Sélectionnez Nom de fichier en minuscules pour vous assurer que le nom du fichier HTML et
des fichiers d’image sont écrits en minuscules lors de l’exportation.
Remarque : Notez que l’extension du nom du fichier HTML ne s’affichera pas en minuscule si elle a été
sélectionnée en majuscule dans le menu contextuel Extension.
• Choisissez une application associée à partir du menu déroulant correspondant (Macintosh).
Lorsque vous double-cliquez sur le fichier HTML exporté sur le disque dur, ce dernier est
ouvert avec l’application spécifiée.
3
A partir de l’onglet Table, choisissez les paramètres requis pour vos tables HTML. Pour plus
d’informations sur la définition des propriétés des tables HTML Firewroks exportées, voir
« Définition du mode d’exportation des tables HTML » à la page 288.
4
A partir de l’onglet Propre au document, choisissez l’une des options suivantes :
• Choisissez l’une des formules permettant de nommer automatiquement les découpes à partir
des menus déroulants correspondants. Vous pouvez utiliser les options par défaut ou choisir
vos propres options.
Remarque : Soyez prudent lorsque vous choisissez Aucun comme option pour la convention de nom des
découpes. Si vous choisissez cette option pour l’un des trois premiers menus, Fireworks exportera des fichiers
de découpe qui s’écraseront successivement. Vous obtiendrez en définitive qu’un seul graphisme exporté et un
tableau affichant ce graphisme dans chaque cellule.
• Tapez un texte dans la zone Description de l’image. Ce texte descriptif apparaît à la place de
toutes les images pendant le téléchargement à partir du Web et à la place d’un graphisme ne
pouvant pas être téléchargé. Dans certains navigateurs, ce texte peut être également affiché sous
forme d’info-bulle lorsque le curseur de la souris passe au-dessus de l’image. Cette fonction est
également utilisée pour les utilisateurs malvoyants.
• Sélectionnez Pages HTML avec barres de navigation multiples lorsque vous exportez une barre
de navigation qui lie plusieurs pages ensemble. Lorsque vous choisissez cette option, Fireworks
exporte des pages supplémentaires pour chaque bouton de la barre de navigation.
• Choisissez l’option de codage UTF-8, si le document affiche des caractères provenant de plusieurs
jeux de caractères nationaux. Pour plus d’informations sur le codage UTF-8, voir « Exportation de
fichiers avec le codage UTF-8 » à la page 369.
370 Chapitre 15
5
Cliquez sur Paramètres par défaut pour enregistrer ces paramètres en tant que paramètres par
défaut globaux.
6
Cliquez sur OK.
Utilisation du bouton Exportation rapide
Le bouton Exportation rapide, situé dans l’angle inférieur droit de la fenêtre du document,
permet d’accéder aisément aux options le plus couramment utilisées pour exporter des fichiers
depuis Fireworks vers d’autres applications. Il permet d’exporter des fichiers sous différents
formats, notamment vers les applications Macromedia et d’autres applications telles que
Microsoft FrontPage et Adobe ® GoLive®.
Toutes les options d’exportation disponibles à partir du bouton Exportation rapide sont
également accessibles dans Fireworks, notamment à partir de la boîte de dialogue Exporter et du
menu Edition. Ce bouton offre un raccourci aux options d’exportation les plus courantes. Pour
plus d’informations sur l’exportation de fichiers sous les différents formats, voir « Utilisation de
Fireworks avec d’autres applications » à la page 373.
Pour la plupart des formats, il existe plusieurs méthodes d’exportation. Vous pouvez exporter un
fichier HTML Dreamweaver, par exemple, ou mettre à jour un fichier HTML Dreamweaver
existant. Vous pouvez également copier le fichier HTML Dreamweaver dans le Presse-papiers.
Vous pouvez exporter un fichier Flash SWF ou copier les objets sélectionnés sous forme d’objets
vectoriels.
Vous pouvez même utiliser le bouton Exportation rapide pour démarrer d’autres applications ou
prévisualiser un document Fireworks dans un navigateur spécifique. En simplifiant le procédure
d’exportation, le bouton Exportation rapide permet de gagner du temps et d’améliorer le
processus de conception.
Remarque : Le bouton Exporation rapide permet d’exporter des graphisme et des découpes à partir des
paramètres spécifiés dans le panneau Optimiser. Vous devez donc vous assurer que vos graphismes ont été
optimisés avant de les exporter à l’aide du bouton Exportation rapide. Pour plus d’informations sur l’optimisation,
voir « Optimisation » à la page 333.
Pour exporter un document Fireworks ou un graphisme à partir du bouton Exportation rapide :
1
Cliquez sur le bouton Exportation rapide, puis choisissez une option d’exportation dans le
menu déroulant qui est affiché.
Les options appropriées sont automatiquement définies dans la boîte de dialogue Exporter. Au
besoin, modifiez ces options.
Optimisation et exportation 371
2
Choisissez un emplacement pour stocker les fichiers exportés, tapez un nom de fichier, puis
cliquez sur Enregistrer.
Pour démarrer une autre application Macromedia à l’aide du bouton Exportation rapide :
Cliquez sur le bouton d’exportation rapide, puis choisissez l’option Launcer dans le sous-menu de
l’application.
Personnalisation du menu contextuel Exportation rapide
Vous pouvez ajouter des options au menu contextuel Exportation rapide si vous maîtrisez bien le
langage JavaScript et XML.
Pour ajouter des options au menu contextuel Exportation rapide :
1
Créez des fichiers JSF et déposez-les dans le dossier Quick Export Menu sur votre disque dur.
Remarque : L’emplacement exact de ce dossier varie en fonction du système d’exploitation. Pour plus
d’informations, voir « Utilisation des fichiers de configuration » à la page 439.
2
Modifiez le fichier Quick Export Menu.xml en incluant des références dans les nouveaux
fichiers JSF.
Au prochain démarrage de Fireworks, les nouvelles options créées sont ajoutées au menu
contextuel Exportation rapide. Pour plus d’informations, voir Extending Fireworks MX,
disponible sous forme de fichier PDF sur le CD d’installation de Macromedia Fireworks MX.
372 Chapitre 15
CHAPITRE 16
Utilisation de Fireworks
avec d’autres applications
Qu’il s’agisse de créer un contenu Web ou multimédia, Macromedia Fireworks est un élément
essentiel de la boîte à outils du concepteur. Fireworks fonctionne parfaitement avec d’autres
applications et offre une multitude de fonctions d’intégration qui rationalisent la procédure de
conception.
Vous pouvez exporter les graphiques Fireworks vers de nombreuses applications, notamment les
produits Macromedia. Utilisé avec d’autres applications Macromedia, Fireworks offre des
fonctions d’intégration puissantes :
• Vous pouvez lancer Fireworks pour modifier des graphiques sélectionnés dans de nombreuses
applications Macromedia, telles que Dreamweaver, Flash, HomeSite, FreeHand et Director.
• Les fonctions Fireworks sont conservées lors de l’exporation vers de nombreuses applications,
ce qui vous permet d’exporter des éléments interactifs, tels que des boutons et des survols.
• Dreamweaver et Fireworks partagent une intégration complète appelée Roundtrip HTML.
Roundtrip HTML permet d’effectuer des modifications dans une application qui apparaissent
telles quelles dans une autre application.
• Flash et Fireworks sont également étroitement intégrés. Vous pouvez importer des fichiers
sources Fireworks PNG directement dans Flash sans avoir à exporter dans autre format
graphique. Flash offre diverses options permettant de contrôler l’importation des objets et des
calques Fireworks.
Fireworks simplifie également l’utilisation des applications non Macromedia. Vous pouvez lancer
aisément Fireworks pour modifier des graphiques et des tableaux Microsoft FrontPage, par
exemple, ou importez et exportez des graphiques Photoshop sous forme de fichiers totalement
modifiables.
Utilisation de Macromedia Dreamweaver MX
Des fonctionnalités d’intégration uniques permettent de travailler de façon interchangeable sur
un même fichier dans Macromedia Dreamweaver et Macromedia Fireworks. Dreamweaver et
Fireworks reconnaissent et partagent un grand nombre de modifications possibles dans un même
fichier, dont la modification des liens, les cartes graphiques (cartes images), les découpes en
tableau, etc. Utilisées conjointement, ces deux applications permettent de rationaliser le processus
de modification et d’insertion de fichiers graphiques Web dans des pages HTML.
373
Pour modifier des images et des tables provenant de Fireworks et placées dans un document
Dreamweaver, vous pouvez utiliser Fireworks, puis revenir au document modifié dans
Dreamweaver. Si vous voulez effectuer rapidement des modifications d’optimisation sur des
images et des animations placées dans Fireworks, vous pouvez lancer la boîte de dialogue
Fireworks Aperçu avant exportation et modifier les paramètres appropriés. Dans les deux cas, les
modifications sont effectuées à la fois sur les fichiers dans Dreamweaver et sur les fichiers source
dans Fireworks, si ces derniers étaient déjà ouverts.
Pour rationaliser davantage le processus de conception Web, vous pouvez créer des marques de
réservation d’images dans Dreamweaver pour y placer des images Fireworks. Vous pouvez ensuite
sélectionner ces marques de réservation et lancer Fireworks pour créer des graphiques
correspondant aux dimensions définies par les marques de réservation Dreamweaver. Dans
Fireworks, vous pouvez alors modifier les dimensions des images, si nécessaire.
Insertion d’images Fireworks dans des fichiers Dreamweaver
Vous pouvez placer des graphiques Fireworks dans un document Dreamweaver de deux manières.
Vous pouvez insérer un graphique Fireworks terminé à l’aide du menu d’insertion dans
Dreamweaver ou créer un document Fireworks à partir d’une marque de réservation d’image
Dreamweaver.
Insertion d’images Fireworks dans Dreamweaver
Vous pouvez insérer des images GIF ou JPEG Fireworks directement dans un document
Dreamweaver. Vous devez d’abord exporter prélablement les images depuis Fireworks. Pour plus
d’informations sur l’exportation d’images GIF et JPE, voir « Exportation d’une seule image » à la
page 357.
Pour insérer une image Fireworks dans un document Dreamweaver :
1
Placez le curseur à l’endroit où vous désirez insérer l’image dans le document Dreamweaver.
2
Utilisez l’une des méthodes suivantes :
• Choisissez Insérer > Image.
• Cliquez sur le bouton Insérer une image dans le panneau Commun de la palette Objets.
3
Accédez à l’image à exporter depuis Fireworks et cliquez sur Ouvrir.
Si l’image ne se trouve pas dans le site Dreamweaver en cours, un message apparaît pour vous
demander si vous voulez copier le fichier vers le dossier du site.
Création de fichiers Fireworks à partir de marques de réservation
Dreamweaver
Les marques de réservation d’images combine la puissance de Fireworks et Dreamweaver en vous
permettant de tester diverses présentations de pages Web avant de créer le document final de votre
page. Les marques de réservationd’images permettent de définir la taille et la position des images
Fireworks à placer dans Dreamweaver.
Lorsque vous créez une image Fireworks à partir d’une marque de réservation d’image
Dreamweaver, un document Fireworks est créé avec un fond ayant les dimensions de la marque de
réservation sélectionnée. Dans Fireworks, vous pouvez utiliser n’importe quels outils pour créer
votre graphique. Vous pouvez même découper votre document et ajouter des fonctions
interactives telles que des boutons, des survols et d’autres comportements.
374 Chapitre 16
Remarque : Toutes les fonctions appliquées dans Fireworks sont conservées lors de l’exportation vers
Dreamweaver. De même, la plupart des fonctions Dreamweaver appliquées à des marques de réservation d’images
sont également conservées lorsque vous les ouvrez et les modifiez dans Fireworks. Toutefois, il existe une
exception. En effet, les survols disjoints appliqués aux marques de réservation d’images dans Dreamweaver ne sont
pas conservés 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 la réservation d’image sélectionnée.
Pour créer une image Fireworks à partir d’une marque de réservation dans Dreamweaver :
1
Dans Dreamweaver, enregistrez le document HTML dans un emplacement du dossier de site
Dreamweaver.
2
Placez le curseur à l’endroit approprié du document et choisissez Insertion > Image de
réservation.
Une marque de réservation d’image est insérée dans le document Dreamweaver.
3
Utilisez l’une des méthodes suivantes :
• Sélectionnez la réservation d’image et cliquez sur Créer dans le Vérificateur de propriétés.
• Appuyez sur la touche Ctrl (Windows) ou Commande (Macintosh) et cliquez deux fois sur
l’image de réservation.
• Cliquez avec le bouton droit de la souris (Windows) ou maintenez enfoncée la touche Contrôle
et choisissez l’option de création d’image dans Fireworks.
Dreamweaver lance Fireworks si ce dernier n’est pas encore ouvert. Le document indique que
vous modifiez une image transférée depuis Dreamweaver.
4
Créez une image dans Fireworks et cliquez sur Terminé une fois que vous avez terminé.
5
Définissez le nom et l’emplacement du fichier source PNG dans la boîte de dialogue
Enregistrer sous et cliquez sur Enregistrer.
Remarque : Si vous avez entré un nom pour l’image de réservation dans le Vérificateur de propriétés dans
Dreamweaver, le nom est utilisé par défaut dans Fireworks.
Pour plus d’informations sur l’enregistrement des fichiers PNG Fireworks, voir
« Enregistrement de fichiers Fireworks » à la page 84.
6
Spécifiez le nom de ou des images exportées dans la boîte de dialogue Exporter. Il s’agit des
fichiers JPEG ou GIF qui seront affichés dans Dreamweaver.
Utilisation de Fireworks avec d’autres applications 375
7
Spécifiez l’emplacement de l’image ou des images exportées. L’emplacement que vous
choisissez doit se trouver dans le dossier de site Dreamweaver.
Pour plus d’informations sur l’exportation, voir « Exportation depuis Fireworks » à la
page 356.
8
Cliquez sur Enregistrer.
Lorsque vous revenez dans Dreamweaver, l’image de réservation que vous avez sélectionnée est
remplacée par la nouvelle image ou le nouveau tableau Fireworks que vous avez créé.
Insertion de code HTML Fireworks dans Dreamweaver
Vous pouvez placer du code HTML Fireworks dans Dreamweaver de différentes manières. Vous
pouvez exporter le code HTML Fireworks ou le copier dans le Presse-papiers. Vous pouvez
également ouvrir un fichier HTML Fireworks exporté dans Dreamweaver et copier et coller les
sections de code sélectionnées. Vous pouvez aisément mettre à jour le code que vous avez exporté
vers Dreamweaver en utilisant la commande Mettre à jour le code HTML de Fireworks. Vous
pouvez même exporter du code HTML sous la forme d’un élément de bibliothèque
Dreamweaver.
Vous pouvez également exporter du code HTML Fireworks sous forme de calques CSS
(Cascading Style Sheet). Pour plus d’informations, voir « Exportation du fichier au format
HTML » à la page 362.
Remarque : Avant d’exporter, copier ou mettre à jour du code HTML Fireworks pour l’utiliser Dreamweaver,
choisissez Dreamweaver comme type HTML dans la boîte de dialogue Configuration HTML. Pour plus
d’informations, voir « Définition des options d’exportation du code HTML » à la page 369.
Exportation de code HTML Fireworks vers Dreamweaver
L’exportation de fichiers Fireworks vers Dreamweaver s’effectue en deux étapes. Dans Fireworks,
vous pouvez exporter directement vers un dossier de site Dreamweaver. Cette opération génère un
fichier HTML et les fichiers images associés dans l’emplacement que vous définissez. Vous pouvez
ensuite placer le code HTML dans Dreamweaver à l’aide de la fonction d’insertion.
Remarque : Avant d’exporter, choisissez Dreamweaver comme type HTML dans la boîte de dialogue Configuration
HTML. Pour plus d’informations, voir « Définition des options d’exportation du code HTML » à la page 369.
Pour exporter du code Fireworks :
Exportez le document dans le format HTML. Pour plus d’informations, voir « Exportation de
code généré par Fireworks » à la page 363.
Pour insérer du code HTML Fireworks dans un document Dreamweaver :
1
Dans Dreamweaver, enregistrez votre document dans un site défini.
2
Dans la fenêtre du document, placez le curseur à l’endroit où vous voulez insérer le fichier
HTML.
376 Chapitre 16
3
Utilisez l’une des méthodes suivantes :
• Choisissez Insertion > Images interactives > HTML Fireworks.
• Cliquez sur le bouton d’insertion de fichier HTML Fireworks, dans le panneau Commun de la
palette Objets.
4
Dans la boîte de dialogue qui s’affiche, cliquez sur Parcourir pour sélectionner le fichier
HTML Fireworks.
5
Choisissez Effacer fichier après insertion pour transférer le fichier HTML vers la corbeille
(Windows) ou la poubelle (Macintosh) une fois l’opération terminée.
Utilisez cette option si vous n’avez plus besoin d’utiliser le fichier HTML de Fireworks après
l’avoir inséré. Cette option n’affecte pas le fichier source PNG associé au fichier HTML.
Remarque : Si le fichier HTML se trouve sur un autre lecteur en réseau, il ne sera pas envoyé vers la corbeille
(Windows) ou la poubelle (Macintosh), mais il sera supprimé définitivement.
6
Cliquez sur OK pour insérer le fichier HTML généré par Fireworks, avec les images, les
découpes et le JavaScript qui lui sont éventuellement associés, dans le document Dreamweaver.
Copie d’un fichier HTML Fireworks vers le Presse-papiers pour l’utiliser
dans Dreamweaver
L’une des méthodes permettant de placer rapidement un code HTML Fireworks dans
Dreamweaver consiste à le copier dans le Presse-papiers de Fireworks, puis à le coller directement
dans un document Dreamweaver. L’ensemble du code HTML et JavaScript associé au document
Fireworks est copié dans le document Dreamweaver, les images sont exportées vers un
emplacement spécifié et Dreamweaver met à jour le code HTML avec des liens de site vers ces
images.
Remarque : Avant d’effectuer la copie vers le Presse-papiers, choisissez Dreamweaver comme type HTML dans la
boîte Configuration HTML. Pour plus d’informations, voir « Définition des options d’exportation du code HTML » à
la page 369.
Pour copier de fichier HTML Fireworks vers le Presse-papiers pour l’utiliser dans Dreamweaver :
Copiez le fichier HTML vers le Presse-papiers de Fireworks, puis collez-le dans un document
Dreamweaver. Pour plus d’informations, voir « Copie d’un code HTML dans le Presse-papiers » à
la page 364.
Copie de code d’un fichier Fireworks exporté et collage du fichier dans
Dreamweaver
Vous pouvez ouvrir un fichier HTML Fireworks exporté dans Dreamweaver et copier et coller
manuellement uniquement les parties appropriées dans un autre document Dreamweaver.
Remarque : Avant d’effectuer l’exportation depuis Fireworks, choisissez Dreamweaver comme type HTML dans la
boîte Configuration HTML. Pour plus d’informations, voir « Définition des options d’exportation du code HTML » à
la page 369.
Pour copier le code d’un fichier Fireworks exporté et le coller dans Dreamweaver :
Exportez un fichier HTML Fireworks, puis copiez et collez le code dans un document
Dreamweaver existant. Pour plus d’informations, voir « Copie et collage d’un code HTML à
partir d’un fichier Fireworks » à la page 366.
Utilisation de Fireworks avec d’autres applications 377
Mise à jour de code HTML Fireworks exporté dans Dreamweaver
La commande Mettre à jour le code HTML de Fireworks permet de modifier un document
HTML que vous avez exporté vers Dreamweaver.
Remarque : Bien que la commande Mettre à jour HTML soit utile pour mettre à jour du code HTML que vous avez
exporté vers Dreamweaver, Roundtrip HTML fournit des avantages supplémentaires. Pour plus d’informations, voir
« Modification des fichiers Fireworks dans Dreamweaver » à la page 379.
La commande Mettre à jour le code HTML permet de modifier une image source PNG dans
Fireworks, puis de mettre à jour automatiquement le code HTML exporté et les fichiers image
placés dans un document Dreamweaver. Cette commande permet de mettre à jour des fichiers
Dreamweaver même lorsque Dreamweaver n’est pas en cours d’exécution.
Remarque : Avant de mettre à jour du code HTML, veillez à choisir Dreamweaver comme type HTML dans la boîte
de dialogue Configuration. Pour plus d’informations, voir « Définition des options d’exportation du code HTML » à la
page 369.
Pour mettre à jour du code HTML placé dans Dreamweaver :
1
Modifiez le document PNG approprié PNG dans Fireworks.
2
Choisissez Fichier > Mettre à jour le code HTML ou cliquez sur le bouton d’exportation
rapide et choisissez Mettre à jour le code HTML dans le menu déroulant Dreamweaver.
3
Localisez le fichier Dreamweaver contenant le code HTML que vous désirez mettre à jour et
cliquez sur Ouvrir.
4
Accédez au dossier de destination des fichiers image mis à jour et cliquez sur Ouvrir.
Fireworks met à jour le code HTML et JavaScript dans le document Dreamweaver. Fireworks
exporte également les images mises à jour associées au code HTML et les place dans le dossier
de destination indiqué.
Si Fireworks ne détecte pas de code HTML à mettre à jour, il vous propose d’insérer du
nouveau code HTML dans le document Dreamweaver. La section JavaScript du nouveau code
est placée au début du document, et le tableau HTML ou le lien vers l’image est inséré à la fin.
Exportation de fichiers Fireworks vers des bibliothèques Dreamweaver
Les éléments de bibliothèque Dreamweaver simplifient la modification et la mise à jour des
composants de site Web, tels que les logos et d’autres graphiques qui apparaissent sur chaque page
d’un site. Un élément de bibliothèque est une partie d’un fichier HTML situé dans un dossier
appelé Bibliothèque dans le dossier racine de votre site. Les éléments de bibliothèque sont affichés
dans la palette Bibliothèque de Dreamweaver. Vous pouvez faire glisser une copie de la palette
Bibliothèque vers n’importe quelle page de votre site Web.
Vous ne pouvez pas modifier un élément de bibliothèque directement à partir de votre document
Dreamweaver. Vous ne pouvez modifier cet élément que dans la bibliothèque sourceEnsuite, vous
pouvez utiliser Dreamweaver pour mettre à jour toutes les copies de cet élément dans l’ensemble
de votre site Web. Les éléments de bibliothèque Dreamweaver ressemblent à des symboles
Fireworks ; les modifications de la bibliothèque source sont répercutées dans les instances de
bibliothèques de l’ensemble du site.
Pour exporter un fichier Fireworks sous la forme d’un élément de bibliothèque Dreamweaver :
1
Choisissez Fichier > Exporter.
378 Chapitre 16
2
Choisissez Bibliothèque Dreamweaver dans le menu déroulant Enregistrer comme type.
Choisissez le dossier de bibliothèque cible dans votre site Dreamweaver comme destination des
fichiers. Si ce dossier n’existe pas, utilisez la boîte de dialogue Sélectionner dossier pour créer ou
rechercher le dossier. Le dossier doit s’appeler Bibliothèque et la casse est importante, car
Dreamweaver en tient compte.
Remarque : Dreamweaver ne reconnaîtra pas le fichier exporté comme élément de bibliothèque s’il n’est pas
enregistré dans le dossier Bibliothèque.
3
Tapez un nom de fichier dans la boîte de dialogue d’exportation.
4
Si l’image contient des découpes, choisissez les options de découpe. Pour plus d’informations,
voir « Exportation d’un document découpé » à la page 358.
5
Sélectionnez Placer les images dans le sous-dossier pour choisir le dossier devant recevoir les
images à enregistrer.
6
Cliquez sur Enregistrer.
Modification des fichiers Fireworks dans Dreamweaver
Roundtrip HTML est une fonction puissante qui s’intègre étroitement à Fireworks et
Dreamweaver. Elle permet d’effectuer des modifications dans une application et de les conserver
dans une autre. Avec Roundtrip HTML, l’intégration des fonctionnalités de lancement et de
modification permet de modifier des images et des tableaux générés par Fireworks et insérés dans
un document Dreamweaver. Dreamweaver exécute automatiquement le fichier source PNG
Fireworks de l’image ou du tableau pour vous permettre de les modifier dans ce dernier. Les
modifications effectuées dans Fireworks sont automatiquement appliquées à l’image ou au tableau
lorsque vous revenez dans Dreamweaver.
Remarque : Avant d’utiliser Roundtrip HTML, vous devez au préalable effectuer quelques tâches. Pour plus
d’informations, voir « Définition des options de lancement et de modification » à la page 385.
Utilisation de Fireworks avec d’autres applications 379
Roundtrip HTML
Fireworks reconnaît et préserve la plupart des types de modifications apportées à un document
dans Dreamweaver (liens modifiés, cartes images modifiées, texte et code HTML modifiés dans
des découpes HTML et comportements partagés entre Fireworks et Dreamweaver). Le
Vérificateur de propriétés de Dreamweaver permet d’identifier les images, découpes et tableaux
provenant de Fireworks.
Bien que Fireworks accepte la plupart des modifications Dreamweaver, d’importantes modifications
affectuées sur la structure d’une table dans Dreamweaver peuvent créer des différences
irréconciliables entre les deux applications. Si vous modifiez radicalement la structure d’un tableau
dans Dreamweaver et modifiez le tableau dans Fireworks, un messsage s’affiche pour indiquer que
les modifications effectuées dans Fireworks replaceront celles effectuées précédemment dans
Dreamweaver. Si vous devez modifier radicalement la structure d’un tableau, utilisez la commande
Lancer et modifier de Dreamweaver pour modifier le tableau dans Fireworks.
Modification d’images Fireworks
Vous pouvez exécuter Fireworks pour modifier les images individuelles placées dans un document
Dreamweaver.
Remarque : Avant de modifier des graphiques Fireworks dans Dreamweaver, vous devez au préalable exécuter
quelques tâches. Pour plus d’informations, voir « Définition des options de lancement et de modification » à la
page 385.
Pour ouvrir et modifier une image Fireworks placée dans Dreamweaver :
1
Dans Dreamweaver, choisissez Fenêtre > Propriétés pour ouvrir le Vérificateur de propriétés, si
nécessaire.
2
Utilisez l’une des méthodes suivantes :
• Sélectionnez l’image désirée. Le Vérificateur de propriétés identifie la sélection comme étant
une image Fireworks et affiche le nom du fichier source PNG associé à cette image. Dans le
Vérificateur de propriétés, cliquez sur Modifier.
• Appuyez et maintenez enfoncée la touche Contrôle (Windows) ou Commande (Macintosh) et
double-cliquez sur l’image à modifier.
• Cliquez sur le bouton droit (Windows) ou maintenez enfoncée la touche Contrôle
(Macintosh) et cliquez sur l’image voulue, puis choisissez Modifier avec Fireworks dans le
menu contextuel.
Dreamweaver lance Fireworks si ce dernier n’est pas encore ouvert.
3
Lorsque le programme vous le demande, indiquez si vous désirez que le fichier source
Fireworks de l’image insérée soit ouvert. Pour plus d’informations sur les fichiers source PNG,
voir « Enregistrement de fichiers Fireworks » à la page 84.
4
Modifiez l’image dans Fireworks. Le document indique que vous modifiez une image
transférée depuis Dreamweaver.
Dreamweaver reconnaît et préserve les modifications suivantes effectuées dans Fireworks.
5
Lorsque vos modifications sont terminées, cliquez sur Terminé dans la fenêtre du document.
L’image est exportée à l’aide des paramètres d’optimisation en cours, le fichier GIF ou JPEG
utilisé par Dreamweaver est mis à jour et le fichier source PNG est enregistré si un fichier
source a été sélectionné.
380 Chapitre 16
Remarque : Lorsque vous ouvrez directement une image à partir de la fenêtre Site de Dreamweaver, les
fonctionnalités d’intégration de Fireworks décrites ci-dessus sont inopérantes ; Fireworks n’ouvre pas le fichier
PNG d’origine. Pour utiliser ces fonctionnalités d’intégration de Fireworks, ouvrez les images à partir de la
fenêtre du document Dreamweaver.
Modification de tableaux Fireworks
Lorsque vous ouvrez et modifiez une découpe d’image faisant partie d’un tableau Fireworks inséré
dans Dreamweaver, ce dernier ouvre automatiquement le fichier source PNG du tableau entier.
Remarque : Avant de modifier des tableaux Fireworks dans Dreamweaver, vous devez au préalable exécuter
quelques tâches. Pour plus d’informations, voir « Définition des options de lancement et de modification » à la
page 385.
Pour ouvrir et modifier un tableau Fireworks placé dans Dreamweaver :
1
Dans Dreamweaver, choisissez Fenêtre > Propriétés pour ouvrir le Vérificateur de propriétés, si
nécessaire.
2
Procédez de l’une des manières suivantes :
• Cliquez dans le tableau, puis sur la balise TABLE dans la barre d’état, afin de sélectionner
l’ensemble du tableau. Le Vérificateur de propriétés identifie la sélection comme étant un
tableau Fireworks et affiche le nom du fichier source PNG associé à ce tableau.) Dans le
Vérificateur de propriétés, cliquez sur Modifier.
• Cliquez dans l’angle supérieur gauche du tableau pour le sélectionner, puis sur Modifier dans le
Vérificateur de propriétés.
• Sélectionnez une image dans le tableau, puis cliquez sur Modifier dans le Vérificateur de
propriétés.
• Appuyez et maintenez enfoncée la touche Contrôle (Windows) ou Commande (Macintosh) et
double-cliquez sur l’image à modifier.
• Cliquez sur le bouton droit (Windows) ou maintenez enfoncée la touche Contrôle
(Macintosh) et cliquez sur l’image voulue, puis choisissez Modifier avec Fireworks dans le
menu contextuel.
Dreamweaver lance Fireworks si ce dernier n’est pas encore ouvert. Le fichier source PNG du
tableau apparaît dans la fenêtre du document.
Remarque : Pour plus d’informations sur les fichiers source PNG, voir « Enregistrement de fichiers Fireworks » à
la page 84.
3
Effectuez les modifications appropriées dans Fireworks.
Dreamweaver reconnaît et préserve les modifications suivantes effectuées dans Fireworks.
4
Lorsque vos modifications sont terminées, cliquez sur Terminé dans la fenêtre du document.
Cette opération exporte les fichiers HTML et des découpes d’images du tableau en utilisant les
paramètres d’optimisation en cours, met à jour le tableau dans Dreamweaver, et enregistre le
fichier source PNG.
Utilisation de Fireworks avec d’autres applications 381
A propos des comportements Dreamweaver
Si un seul graphique Fireworks non découpé est inséré dans un document Dreamweaver et qu’un
comportement Dreamweaver est appliqué, une découpe se trouve sur le graphique lorsqu’il est
lancé et modifié dans Fireworks. La découpe n’est pas visible immédiatement, car les découpes
sont désactivées automatiquement lorsque vous lancez et modifiez un graphique non découpé
auquel vous appliquez des fonctions Dreamweaver. Pour afficher la découpe, activez sa visibilité
dans le calque Web du panneau des calques.
Lorsque vous affichez les propriétés d’une découpe dans Fireworks et qu’elle contient un
comportement Dreamweaver, le champ Lien du Vérificateur de propriétés affiche javascript:;.
La suppression de ce texte n’a pas d’effet négatif. Vous pouvez l’écraser pour entrer une URL si
nécessaire et le comportement reste intact lorsque vous revenez dans Dreamweaver.
Dreamweaver prend en charge tous les comportements Fireworks, y compris ceux nécessaires aux
survols et aux boutonsFireworks accepte les comportements Dreamweaver suivants au cours d’une
session de lancement et de modification :
•
•
•
•
•
•
Survol simple
Substitution d’image
Restauration de permutation d’image
Texte de la barre d’état
Image de la barre de navigation
Menu contextuel
Optimisation des images Fireworks et des animations placées dans
Dreamweaver
Vous pouvez appeler Fireworks à partir de Dreamweaver pour procéder à des modifications
d’exportation rapides (ré-échantillonnage ou changement de type de fichier) dans les images et
animations Fireworks insérées. Fireworks permet de modifier les paramètres d’optimisation et
d’animation, ainsi que la taille et la zone exportée de l’image.
Pour modifier les paramètres d’optimisation d’une image Fireworks placée dans Dreamweaver :
1
Dans Dreamweaver, sélectionnez l’image appropriée et choisissez Commandes > Optimiser
l’Image dans Fireworks.
382 Chapitre 16
2
Si le programme vous le demande, indiquez si vous désirez que le fichier source Fireworks de
l’image insérée soit ouvert.
Une boîte de dialogue s’ouvre. Bien que la barre de titre ne contienne pas de nom, il s’agit de la
boîte de dialogue d’aperçu d’exportation Fireworks.
3
Effectuez les modifications appropriées dans cette boîte de dialogue :
• Pour modifier les paramètres d’optimisation, cliquez sur l’onglet Options. Pour plus
d’informations, voir « Utilisation de la fenêtre Aperçu avant exportation » à la page 335.
• Pour modifier la taille et la zone de l’image exportée, cliquez sur l’onglet Fichier et changez les
paramètres appropriés. Si vous changez les dimensions de l’image dans Fireworks, vous devez
également redéfinir la taille de l’image dans le Vérificateur de propriétés lorsque vous
retournerez sous Dreamweaver.
• Pour modifier les paramètres d’animation de l’image, cliquez sur l’onglet Animation et changez les
paramètres appropriés.
4
Lorsque vous avez fini de modifier l’image, cliquez sur Mettre à jour.
L’image est exportée en utilisant les nouveaux paramètres d’optimisation, le fichier GIF ou
JPEG est mis à jour dans Dreamweaver et le fichier source PNG est enregistré si un fichier
source a été sélectionné.
Si vous avez modifié le format de fichier de l’image, le vérificateur de liens de Dreamweaver
vous proposera de mettre à jour les références à cette image sur votre site. Par exemple, si vous
avez changé le format d’une image appelée mon_image de GIF en JPEG, cliquez sur OK pour
que toutes les références à mon_image.gif soient remplacées par des références à
mon_image.jpg, sur tout votre site.
Utilisation de Fireworks avec d’autres applications 383
Redimensionnement d’images Fireworks insérées
Lorsque vous ouvrez et optimisez une image Fireworks à partir de Dreamweaver, vous pouvez
redimensionner cette image et sélectionner une zone d’image à exporter.
Remarque : Si vous changez les dimensions de l’image dans Fireworks, vous devez également redéfinir la taille de
l’image dans le Vérificateur de propriétés lorsque vous retournerez sous Dreamweaver.
Pour spécifier les dimensions de l’image à exporter :
1
Dans la boîte de dialogue d’aperçu d’exportation de Fireworks, cliquez sur l’onglet Fichier.
2
Pour modifier l’échelle de l’image à exporter, indiquez un pourcentage ou tapez directement les
valeurs désirées, en pixels, pour la largeur et la hauteur. Choisissez Respecter les proportions
pour modifier les proportions (hauteur et largeur) de l’image d’une valeur identique.
3
Pour exporter une zone sélectionnée de l’image, sélectionnez l’option Exporter zone et
procédez de l’une des manières suivantes pour définir la zone à exporter :
• Déplacez le rectangle pointillé qui apparaît autour de l’aperçu pour délimiter la zone
d’exportation désirée. Tirer le rectangle à l’intérieure de la zone d’aperçu pour voir les zones
non affichées.
• Indiquez les coordonnées en pixels des limites de la zone à exporter.
Modification des paramètres d’animation
Dans le cadre de l’ouverture et l’optimisation d’une animation Fireworks, vous pouvez modifier
les paramètres de l’animation. Les options d’animation de la boîte de dialogue d’aperçu
d’exportation sont identiques à celles du panneau Images de Fireworks.
Remarque : Vous ne pouvez pas modifier individuellement les éléments graphiques d’une animation Fireworks au
cours d’une session d’optimisation dans Dreamweaver. Pour modifier les éléments graphiques dans une animation,
vous devez lancer et modifier l’animation Fireworks. Pour plus d’informations, voir « Modification des fichiers
Fireworks dans Dreamweaver » à la page 379.
Pour modifier une image animée :
1
Dans la boîte de dialogue d’aperçu d’animation de Fireworks, cliquez sur l’onglet Animation.
2
Vous pouvez à tout moment utiliser l’une des techniques suivantes pour voir les images
animées :
384 Chapitre 16
• Pour afficher une seule image, sélectionnez l’image désirée dans la liste à gauche de la boîte de
dialogue, ou utilisez les contrôles d’animation dans le coin inférieur droit de la boîte de
dialogue.
• Pour voir fonctionner l’animation, cliquez sur le contrôle Lire/Arrêter dans la partie inférieure
droite de la boîte de dialogue.
3
Modifiez l’animation :
• Pour choisir la méthode d’élimination d’une image, sélectionnez l’image désirée dans la liste et
choisissez l’une des options du menu déroulant (indiqué par l’icône d’une poubelle).
• Pour définir la cadence d’une animation, sélectionnez l’image désirée dans la liste et indiquez la
cadence d’animation en centièmes de seconde.
• Pour que l’animation se répète en continu, cliquez sur le bouton Boucle et choisissez le nombre
de répétitions désiré dans le menu déroulant.
• Choisissez l’option Recadrage automatique pour définir une zone rectangulaire dans chaque
image, pour que seule la zone qui diffère entre les images soit exportée. Le choix de cette option
réduit la taille des fichiers.
• Choisissez l’option Différence automatique pour que seuls les pixels qui changent entre deux
images consécutives soient exportés. Le choix de cette option réduit la taille des fichiers.
Définition des options de lancement et de modification
Pour utiliser Roundtrip HTML de manière efficace, vous devez exécuter préalabement quelques
tâches, telles que définir Fireworks comme éditeur d’image principal dans Dreamweaver et
spécifier les préférences de lancement et de modification dans Fireworks.
Remarque : Vous devez également définir un site local dans Dreamweaver avant d’utiliser Roundtrip HTML. Pour
plus d’informations, voir Utilisation de Dreamweaver MX.
Désignation de Fireworks comme l’éditeur d’image externe principal pour
Dreamweaver
Dans les Préférences de Dreamweaver, il est possible d’indiquer des applications spécifiques qui
doivent être automatiquement exécutées pour modifier des types de fichiers spécifiques. Pour
utiliser la fonctionnalité « Lancer et Modifier » de Fireworks, vérifiez que Fireworks est bien
désigné dans Dreamweaver comme éditeur externe principal pour les fichiers GIF, JPEG et PNG.
Utilisation de Fireworks avec d’autres applications 385
Bien qu’il soit possible d’utiliser des versions antérieures de Fireworks comme éditeur d’image
externe, les possibilités de ces versions sont limitées en matière de lancement et modification.
Lorsque vous utilisez Roundtrip HTML, Fireworks 4 ne prend pas en charge totalement les
modifications des propriétés de cellule des tableaux Dreameweaver, ni les comportements
appliqués dans Dreamweaver. Fireworks 3 ne prend pas entièrement en charge le lancement et la
modification des tableaux et des découpes dans des tableaux, et Fireworks 2 ne prend pas en
charge le lancement et la modification des fichiers source PNG des images insérées.
Pour définir Fireworks comme l’éditeur d’image externe principal pour Dreamweaver :
1
Dans Dreamweaver, choisissez Edition > Préférences, puis sélectionnez Types de fichiers/
Editeurs.
2
Dans la liste des extensions, sélectionnez une extension de fichier Web (.gif, .jpg, ou .png).
3
Dans la liste Editeurs, sélectionnez Fireworks s’il y figure. Si Fireworks ne se trouve pas dans la
liste, cliquez sur le bouton Plus (+), recherchez l’application Fireworks, puis cliquez sur Ouvrir.
4
Cliquez sur Principal.
5
Répétez les étapes 2 et 3 pour définir Fireworks comme éditeur principal pour les autres
extensions de fichiers Web.
386 Chapitre 16
Design Notes et fichiers source
Lorsque vous exportez vers un site Dreamweaver un fichier Fireworks à partir d’un fichier source
PNG, Fireworks crée une Design Note (note de conception) contenant des informations sur le
fichier. Par exemple, lorsque vous exportez un tableau Fireworks, Fireworks écrit une note de
conception pour chaque image exportée. Ces notes contiennent des références au fichier source
PNG qui contient l’ensemble des fichiers exportés.
Lorsque vous exécutez Fireworks à partir de Dreamweaver pour modifier une image,
Dreamweaver utilise la note de conception correspondante pour localiser le fichier source PNG de
cette image. Pour obtenir les meilleurs résultats, enregistrez toujours vos fichiers source PNG dans
Fireworks, et les fichiers exportés dans un site Dreamweaver. Tout autre développeur du site sera
ainsi en mesure d’ouvrir le fichier source PNG lorsqu’il exécutera Fireworks à partir de
Dreamweaver.
Définition des préférences de lancement-modification pour les fichiers
source Fireworks
Les préférences de lancement et de modification Fireworks permettent de définir la manière dont
les fichiers source PNG seront traités lorsque vous lancez des fichiers Fireworks dans une autre
application.
Dreamweaver ne reconnaît ces préférences de Fireworks que dans certains cas, lorsque vous lancez
une image Fireworks et optimisez l’image. Plus précisément, vous devez ouvrir et optimiser une
image qui ne fait pas partie d’un tableau Fireworks et qui ne contient pas un chemin de note de
conception correct vers un fichier source PNG. Dans tous les autres cas, et notamment compris
dans les cas de lancement-modification d’images Fireworks, Dreamweaver ouvre
automatiquement le fichier source PNG, et vous demande d’indiquer le chemin de ce fichier
source s’il ne le trouve pas.
Pour définir les préférences de lancement- modification pour Fireworks :
1
Dans Fireworks, choisissez Edition > Préférences.
Remarque : Sous Mac OS X, choisissez Fireworks > Préférences.
2
Cliquez sur l’onglet Lancer et modifier (Windows) ou choisissez Lancer et modifier dans le
menu déroulant (Macintosh).
3
Indiquez les options à utiliser pour modifier ou optimiser des images Fireworks insérées dans
une application externe :
Toujours utiliser le fichier PNG
source ouvre automatiquement le fichier PNG créé dans
Fireworks qui est défini dans la note de conception comme source de l’image insérée. Les
modifications effectuées dans l’image source PNG sont reflétées dans l’image insérée
correspondante.
Ne jamais utiliser le fichier PNG source ouvre automatiquement l’image Fireworks insérée,
qu’il existe ou non un fichier source PNG. Les modifications n’affectent que l’image mise en
place.
Demander lors du lancement vous permet de spécifier à chaque fois si le fichier source PNG
doit être ouvert et modifié. Lorsque vous modifiez ou optimisez une image déjà insérée,
Fireworks affiche un message vous demandant de choisir le type d’image à modifier. Vous
pouvez également définir des préférences de lancement et de modification globales dans cette
invite.
Utilisation de Fireworks avec d’autres applications 387
Utilisation de Macromedia Flash MX
Fireworks s’intègre parfaitement à Macromedia Flash. Vous pouvez aisément exporter des
vecteurs, bitmaps, animations et des graphiques de boutons multi-états Fireworks pour les utiliser
dans Flash. La fonction de lancement et de modification permet également de modifier aisément
des graphiques Fireworks dans Flash.
Remarque : Les comportements de boutons Fireworks et d’autres éléments d’interactivité ne sont pas importés
dans Flash.
Insertion de fichiers Fireworks dans Flash
Vous pouvez insérer des graphiques Fireworks dans Flash de différentes manières. La meilleure
méthode consiste à importer un fichier PNG Fireworks. Cette méthode vous permet de contrôler
totalement l’importation des graphiques et des animations dans Flash.
Vous pouvez importer des fichiers JPEG, GIF, PNG et SWF Fireworks, mais cette méthode est
moins précise. Vous pouvez également copier manuellement des gaphiques dans Fireworks et les
coller directement dans Flash.
Importation de fichiers PNG Fireworks dans Flash
Vous pouvez importer des fichiers source PNG Fireworks directement dans Flash sans avoir à les
exporter dans d’autres formats graphiques. Tous les vecteurs, bitmaps, animations et boutons
multi-états peuvent être importés dans Flash.
Remarque : Les comportements de boutons Fireworks et d’autres éléments d’interactivité ne sont pas importés
dans Flash.
Lorsque vous importez un fichier PNG Fireworks dans Flash, vous pouvez choisir diverses options
d’importation. Vous pouvez importer tous les calques et objets sous la forme d’un symbole de
bibliothèque ou tout le contenu dans un nouveau calque. Avec les objets vectoriels et texte, vous
pouvez conserver leur caractère modifiable ou conserver uniquement leur apparence si ces objets
ont des effets ou d’autres propriétés non disponibles dans Flash. Ou bien, vous pouvez annuler le
caractère modifiable de ces objets et importer le fichier PNG Fireworks sous la forme d’un image
bitmap.
Pour importer un fichier PNG Fireworks dans Flash :
1
Enregistrez le document dans Fireworks.
Pour plus d’informations sur l’enregistrement des fichiers, voir « Enregistrement de fichiers
Fireworks » à la page 84.
2
Accédez à un document ouvert dans Flash.
3
(Facultatif ) Cliquez sur le cadre et le calque vers lequel vous voulez importez le contenu
Fireworks. Cette opération n’est nécessaire que si vous voulez importer le fichier PNG sous la
forme d’un symbole de bibliothèque (film).
4
Choisissez Fichier > Importer.
388 Chapitre 16
5
Accédez au fichier PNG et sélectionnez-le dans la boîte de dialogue d’importation, puis cliquez
sur OK.
La boîte de dialogue des paramètres d’importation Fireworks PNG s’affiche.
6
Choisissez une option de structure de fichier :
L’option Importation sous forme de film et de rétention de calque importe le fichier Fireworks
sous la forme d’un film contenant tous les calques et images du fichier Fireworks d’origine. Le
film est inséré dans le calque et le cadre en cours. Si vous n’avez pas sélectionné un cadre avant
l’importation, le film est placé dans le cadre précédent.
L’option Importation dans un nouveau calque dans la scène en cours importe le fichier
Fireworks vers un nouveau calque sans changer les images.
7
Choisissez la méthode d’importation des objets vectoriels et texte :
L’option Rastérisation pour maintenir l’aspect permet de conserver le caractère modifiable des
objets vectoriels, sauf s’ils contiennent des trames, des traits ou des effets spéciaux que Flash ne
prend pas en charge. Pour conserver l’apparence de ces objets, Flash les convertit en image
bitmap non modifiables.
L’option Conservation du caractère modifiable de tous les trajets permet de conserver le
caractère non modifiable de tous les objets vectoriels. Si les objets contiennent des trames, traits
et des effets que Flash ne prend pas en charge, les propriérés sont perdues.
8
Choisissez la méthode d’importation des textes :
L’option Rastérisation pour maintenir l’aspect permet de conserver le caractère modifiable du
texte, sauf si le texte contient des trames, des traits ou des effets spéciaux que Flash ne prend
pas en charge. Pour conserver l’apparence des textes, Flash les convertit en image bitmap non
modifiables.
L’option Conservation du caractère modifiable de l’ensemble du texte permet de conserver le
caractère modifiable de tout le texte. Si les objets texte contiennent des trames, traits et des
effets que Flash ne prend pas en charge, les propriérés sont perdues.
9
Choisissez l’option d’importation sous la forme d’une image fusionnée pour importer le fichier
sous la forme d’une image bitmap et éliminer toutes les fonctions de modification.
Remarque : Si vous sélectionnez cette option, aucune autre option de la boîte de dialogue n’est disponible.
Utilisation de Fireworks avec d’autres applications 389
10
Cliquez sur OK.
Le fichier PNG Fireworks est importé dans Flash en utilisant les options d’importation que
vous avez choisies.
Copie et collage de fichiers graphiques Fireworks dans Flash
Vous pouvez placer rapidement des graphiques Fireworks dans Flash en les copiant et en les
collant.
Remarque : Pour copier des gaphiques dans les versions précédentes de Flash, vous devez choisir Edition > Copier
les contours de trajet.
Lorsque vous copiez et collez des graphiques Fireworks dans Flash, certains attributs sont perdus,
tels que les effets en direct et les textures. En outre, Flash supporte uniquement les trames unies,
les trames dégradées et les traits élémentaires.
Pour copier et coller des graphiques dans Flash :
1
Sélectionnez les objets à copier.
2
Choisissez Edition > Copier ou cliquez sur le bouton Exporation rapide et choisissez Copier
dans le menu déroulant Macromedia Flash.
3
Dans Flash, créez un nouveau document et choisissez Edition > Coller.
Remarque : Il peut être nécessaire de choisir Modification > Dissocier pour dissocier les objets afin de les
modifier comme objets vectoriels individuels dans Flash.
Exportation de graphiques Fireworks dans d’autres formats et leur
utilisation dans Flash
Vous pouvez exporter des graphiques Fireworks sous forme de fichiers JPEG, GIF etd PNG et les
importer dans Flash.
Pour plus d’informations sur l’exportation de fichiers JPEGs et GIF, voir « Exportation d’une
seule image » à la page 357. Pour plus d’informations sur l’exportation dans le format PNG, voir
« Exportation de fichiers PNG avec transparence » à la page 392. Pour plus d’informations sur
l’importation de ces formats dans Flash, voir « Importation de graphiques et d’animations
exportés Fireworks vers Flash » à la page 392.
Remarque : Bien que PNG soit le format de fichier natif de Fireworks, les fichiers graphiques PNG exportés depuis
Fireworks sont différents des fichiers source PNG que vous enregistrez dans Fireworks. Les fichiers PNG exportés
ne sont pas différents des fichiers GIF ou JPEG ; ils contiennent uniquement des données d’images et ne
contiennent pas d’autres informations, telles que des découpes, des calques, des éléments d’interactivité, des effets
en direct ou un contenu modifiable. Pour plus d’informations sur les fichiers source PNG, voir « Enregistrement de
fichiers Fireworks » à la page 84.
Exportation de graphiques et d’animation Fireworks sous forme de
fichiers SWF
Le graphiques et les animations Fireworks peuvent être exportés sous forme de fichiers SWF
Flash. Vous pouvez définir diverses options d’exportation d’objets.
Une partie du formatage est perdue si vous ne sélectionnez pas l’option Conserver l’apparence à
partir de la boîte de dialogue Options d’exportation Flash SWF. La couleur et la taille des traits
sont préservées. Les informations de formatage perdues lors de l’exportation dans le format SWF
sont les suivantes :
390 Chapitre 16
• Les effets applicables en direct ;
• les catégories de trames et de traits, textures et bords diffusés ;
• l’anticrénelage des objets (le lecteur Flash applique l’anticrénelage au niveau du document et
l’anticrénelage est donc appliqué au document lorsque vous l’exportez) ;
• l’opacité et les modes de fondu (les objets opaques sont convertis en symboles avec un canal
alpha) ;
•
•
•
•
Calques ;
Masques ;
Découpes, cartes-images et comportements ;
Certaines options de formatage de texte, telles que le crénage et les traits bitmap.
Pour exporter un graphique ou une animation Fireworks sous la forme d’un fichier SWF :
1
Choisissez Fichier > Exporter ou cliquez sur le bouton Exportation rapide et choisissez
Exporter SWF dans le menu déroulant Macromedia Flash.
2
A partir de la boîte de dialogue Exporter, tapez un nom de fichier et choisissez un dossier de
destination.
3
Choisissez Macromedia Flash SWF dans le menu déroulant Enregistrer sous.
4
Cliquez sur le bouton Options.
La boîte de dialogue des options d’exportation Flash SWF s’affiche.
5
Dans la section Objets, choisissez l’une des options suivantes :
Conserver les trajets pour
conserver le caractère modifiable des trajets. Les effets et le
formatage sont perdus.
Conserver l’apparence pour
convertir les objets vectoriels en objets bitmap et conserver
l’apparence des traits et des trames appliqués. Le caractère modifiable est perdu.
Utilisation de Fireworks avec d’autres applications 391
6
Dans la section Texte, choisissez l’une des options suivantes :
Conserver le caractère modifiable pour pouvoir modifier le texte. Les effets et le formatage sont
perdus.
Convertir en trajet pour
préserver les paramètres de crénelage ou d’espacement spécifiés dans
Fireworks. Le caractère modifiable du texte est perdu.
7
Définissez la qualité des images JPEG avec la glissière de réglage correspondante.
8
Sélectionnez les images à exporter et leur cadence de diffusion en secondes.
9
Cliquez sur OK.
10
A partir de la boîte de dialogue Exporter, cliquez sur Enregistrer.
Pour plus d’informations sur l’importation d’un fichier SWF exporté dans Flash, voir
« Importation de graphiques et d’animations exportés Fireworks vers Flash » à la page 392.
Exportation de fichiers PNG avec transparence
Le format PNG permet la transparence avec les images couleurs 32 bits. Le fichier PNG
Fireworks, le fichier source Fireworks, supporte également la transparence avec les images couleur
32 bits. Vous pouvez importer des fichiers source PNG Fireworks directement dans Flash.
Vous pouvez également créer une transparence avec un fichier PNG 8 bits. Vous pouvez exporter
des graphiques PNG Fireworks 8 bits avec transparence pour l’insertion dans Flash.
Pour exporter un fichier PNF 8 bits avec transparence :
1
Dans Fireworks, choisissez Fenêtre > Optimiser pour ouvrir le panneau Optimiser s’il n’est pas
ouvert.
2
Choisissez PNG 8 comme format de fichier d’exportation et Transparence alpha dans le menu
déroulant Transparence.
3
Choisissez Fichier > Exporter.
4
Sélectionnez Images uniquement dans le menu déroulant Enregistrer comme type. Nommez le
fichier, puis cliquez sur Enregistrer.
Pour plus d’informations sur l’importation de fichiers PGN exportés vers Flash, voir
« Importation de graphiques et d’animations exportés Fireworks vers Flash » à la page 392.
Importation de graphiques et d’animations exportés Fireworks vers Flash
Utilisez la commande Importer de Flash pour importer des graphiques et des animations exportés
depuis Fireworks.
Pour importer des graphiques et des animations Fireworks dans Flash :
1
Créez un document Flash.
2
Choisissez Fichier > Importer et recherchez le graphique ou l’animation.
3
Cliquez sur Ouvrir pour importer le fichier.
392 Chapitre 16
Utilisation de Fireworks pour modifier des graphiques importés dans Flash
Grâce à l’intégration de la fonction Lancer et modifier vous pouvez utiliser Fireworks pour
modifier un graphique que vous avez importé dans Flash. Vous pouvez modifier n’importe quel
graphique de cette manière, même si le graphique n’a pas été exporté depuis Fireworks.
Remarque : Les fichiers PNG natifs Fireworks importés dans Flash constituent une exception, à moins que vous les
ayez importés sous forme d’images fusionnées.
Si le graphique a été exporté depuis Fireworks et que vous avez enregistré le fichier PNG d’origine
avec le fichier graphique exporté, vous pouvez lancer le fichier PNG d’origine dans Fireworks
depuis Flash pour effectuer les modifications. 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 appuyez sur la touche Contrôle
et cliquez (Macintosh) sur le fichier graphique dans le panneau Bibliothèque.
2
Choisissez Edition dans le menu déroulant Fireworks.
Remarque : Si cette commande est absente, choisissez l’option de modification de largeur et recherchez
l’application Fireworks.
3
Cliquez sur Oui dans la zone de recherche de la source pour rechercher le fichier PNG
d’origine du graphique Fireworks, puis cliquez sur Ouvrir.
Remarque : Si vous avez changé les préférences de lancement et de modification Fireworks, cette boîte de
dialogue ne s’affiche pas.
Le fichier s’affiche dans Fireworks et la fenêtre du document indique que vous modifiez un
fichier de Flash.
4
Modifiez l’image et cliquez sur Terminé.
Fireworks exporte un nouveau fichier graphique vers Flash et si vous avez modifié le fichier PNG
d’origine, ce fichier est également enregistré.
Extension de Fireworks avec des commandes personnalisés créées dans Flash
A l’aide de Flash, vous pouvez créer des films SWF contenant du code JavaScript. Ces films
peuvent être utilisés sous forme de commandes Fireworks accessibles depuis le menu Commandes
de Fireworks ou de panneaux accessibles dans le menu Fenêtre.
Pour plus d’informations, voir Extending Fireworks MX, disponible dans le format PDF sur le CD
d’installation Macromedia Fireworks.
Utilisation de Macromedia FreeHand
Du fait que les deux applications supportent les vecteurs, vous pouvez aisément partager des
graphiques vectoriels entre Fireworks et Macromedia FreeHand. L’apparence des objets peut être
différente d’une application à l’autre par le fait que Fireworks et FreeHand ne partagent pas les
mêmes fonctions. Pour plus d’informations, voir « Utilisation d’autres applications graphiques
vectorielles » à la page 396.
Les procédures de cette section s’appliquent à l’utilisation de Fireworks avec FreeHand et à l’utilisation
de Fireworks avec d’autres applications graphiques vectorielles, telles que Adobe Illustrator et
CorelDraw. Pour plus d’informations, voir « Utilisation d’autres applications graphiques vectorielles »
à la page 396.
Utilisation de Fireworks avec d’autres applications 393
Insertion de graphiques FreeHand dans Fireworks
Vous pouvez placer des graphiques FreeHand dans Fireworks de différentes manières. Vous
pouvez les importer, les copier et les coller ou les faire glisser et les déposer. Fireworks MX
supporte les graphiques de FreeHand 7 et des versions supérieures.
Importation de graphiques FreeHand dans Fireworks
Fireworks peut importer des graphiques vectoriels créés dans FreeHand. Vous pouvez définir les
options suivantes lors de l’importation d’un graphique FreeHand :
Mise à l’échelle indique
le pourcentage de mise à l’échelle appliqué au fichier importé.
Largeur et hauteur définit la largeur et la hauteur du fichier importé exprimées en pixels, pouces ou
centimètres.
Résolution indique
la résolution à appliquer au fichier importé.
Anticrénelé lisse
les objets importés pour éviter l’affichage de bords dentelés. Vous pouvez choisir
cette option séparément pour les trajets ou du texte.
Remarque : Pour donner aux bords des objets importés un aspect lissé (anticrénelé) ou un aspect net, utilisez la
commande Modification > Modifier le trajet > Trame nette, Trame anticrénelée ou Trame avec diffusion après
l’importation.
Conversion de fichier permet de spécifier le mode de traitement des documents de plusieurs pages
pendant l’importation :
• L’option Ouvrir une page importe uniquement la page spécifiée.
• L’option Ouvrir les pages en tant qu’images importe toutes les pages du document et les place
dans des images différentes.
• L’option Ignorer les calques importe tous les objets d’un calque.
• L’option Mémoriser les calques permet de préserver la structure du fichier importé.
• L’option Convertir les calques en images place les calques du document importé dans des
images différentes.
Inclure les calques invisibles importe
les objets figurant sur des calques désactivés. Si vous ne
choisissez pas cette option, les calques invisibles ne sont pas pris en compte.
Inclure les calques d’arrière-plan importe les objets en provenance du calque d’arrière-plan du
document. Sinon, le calque d’arrière-plan ne sera pas pris en compte.
Rendu sous forme d’image transforme
en bitmap les groupes complexes, les fondus ou les trames
assemblées et les place dans des objets bitmap distincts dan un document Fireworks. Saisissez un
nombre dans la zone de texte pour déterminer le nombre d’objets qu’un groupe, un objet ou une
trame en mosaïque peut contenir avant d’être converti en bitmap lors de l’importation.
394 Chapitre 16
Pour importer des graphiques vectoriels depuis un fichier FreeHand :
1
Dans Fireworks, choisissez Fichier > Ouvrir pour accéder au fichier FreeHand et cliquez sur
Ouvrir.
La boîte de dialogue Options de fichier vectoriel s’affiche.
2
Choisissez les options nécessaires.
3
Cliquez sur OK.
Copier et coller ou Glisser et déposer des graphiques FreeHand dans
Fireworks
Pour placer rapidement des graphiques FreeHand dans Fireworks, copiez et collez-les ou faites les
glisser et déposez-les.
Pour copier et coller un graphique sélectionné FreeHand dans Fireworks :
1
Dans FreeHand, choisissez Edition > Copier.
2
Créez un document dans Fireworks ou ouvrez un document existant.
3
Choisissez Edition > Coller.
Pour faire glisser et déposer un fichier graphique FreeHand dans Fireworks :
Faites glisser le graphique de FreeHand vers le document Fireworks.
Insertion de graphiques Fireworks dans FreeHand
Vous pouvez exporter des trajets vectoriels deFireworks vers FreeHand. Vous pouvez également
copier et coller des graphiques vectoriels Fireworks dans FreeHand.
Utilisation de Fireworks avec d’autres applications 395
Pour exporter un graphisme vers FreeHand :
1
Dans Fireworks, choisissez Fichier > Exporter ou cliquez sur le bouton d’exportation rapide et
choisissez l’option d’exportation vers FreeHand dans le menu déroulant FreeHand.
2
A partir de la boîte de dialogue Exporter, tapez un nom de fichier et choisissez un dossier de
destination.
3
A partir du menu déroulant Enregistrer sous, choisissez Illustrator 7.
Remarque : Illustrator 7 est un format de fichier graphique que vous utilisez lorsque vous exportez depuis
Fireworks vers une autre application graphique vectorielle, notamment Macromedia FreeHand. La plupart des
applications vectorielles lisent les fichiers Illustrator 7.
4
Cliquez sur le bouton Options.
5
A partir de la boîte de dialogue Options d’exportation vers Illustrator, choisissez l’une des
options suivantes :
• Exporter l’image active uniquement préserve les noms des calques et exporte uniquement
l’image en cours.
• Convertir les images en calques exporte les images Fireworks en tant que calques.
6
Sélectionnez Compatible FreeHand pour exporter le fichier et l’utiliser dans FreeHand.
Cette option ignore et convertit les trames dégradées en trames unies.
7
Cliquez sur OK.
8
A partir de la boîte de dialogue Exporter, cliquez sur Enregistrer.
Remarque : Lors de l’exportation, Fireworks définit des bords nets.
9
Accédez à un document ouvert dans FreeHand.
10
Choisissez Fichier > Ouvrir ou Fichier > Importer pour naviguer vers le fichier que vous avez
exporté depuis Fireworks, puis cliquez sur Ouvrir.
Copie et collage de vecteurs dans FreeHand
Vous pouvez utiliser la commande de copie de contours de trajets pour copier des trajets
Fireworks vers FreeHand. Cette commande copie uniquement les trajets Fireworks.
Remarque : La copie et le collage de vecteurs Fireworks dans d’autres applications fonctionne avec FreeHand et
avec Illustrator, CorelDraw et Adobe Photoshop.
Pour copier les trajets Fireworks sélectionnés :
1
Choisissez Edition > Copier les contours de trajet ou cliquez sur le bouton Exportation rapide
et choisissez la commande de copie de contours de trajets dans le menu déroulant FreeHand.
2
Accédez à un document ouvert dans FreeHand.
3
Choisissez Edition > Coller pour coller les trajets.
Utilisation d’autres applications graphiques vectorielles
Fireworks peut partager des graphiques vectoriels avec d’autres applications graphiques, dont
Adobe Illustrator et Corel Draw. Dans Fireworks, vous exportez et importez des graphiques
vectoriels depuis ces applications comme vous le faites dans Macromedia FreeHand. Pour plus
d’informations, voir « Utilisation de Macromedia FreeHand » à la page 393.
396 Chapitre 16
Fonctions non prises en charge
Etant donné que Fireworks et d’autres éditeurs graphiques vectoriels ne partagent pas toujours les
mêmes fonctions, l’apparence des objets d’une application à l’autre peut varier.
La plupart des éditeurs graphiques vectoriels, dont Macromedia FreeHand, ne prennent pas en
charge les fonctions suivantes :
•
•
•
•
•
•
•
•
Les effets applicables en direct ;
Modes de fondu ;
Texture, motif, tramage Web et trames dégradées ;
Objets découpe et cartes-images ;
Nombreuses options de formatage du texte ;
Repères, grilles et couleur du document ;
Images bitmap ;
Certains traits.
Remarque : Du fait que ces fonctions ne sont pas prises en charge par la plupart des autres applications graphiques
vectorielles, Fireworks ne les utilise pas lors de l’exportation vers ces applications.
De même, Fireworks ne prend pas en charge toutes les fonctions des autres éditeurs graphiques
vectoriels. Par exemple, lorsque Fireworks importe des fichiers CorelDraw (CDR), il effectue les
ajustements suivants pour tenir compte des fonctions non prises en charge :
• Le contenu de la page de référence est répété dans toutes les images de Fireworks.
• Seuls les deux derniers objets d’un dégradé CorelDRAW sont importés. Les objets sont
regroupés après importation.
• Les dimensions sont converties en objets vectoriels.
• Le texte sans mise en forme est importé. La plupart des attributs de caractères et de paragraphes
ne sont pas pris en charge.
• Les couleurs sont converties en RVB.
Remarque : Fireworks ne peut pas ouvrir les fichiers compressés CorelDraw.
Utilisation de Macromedia Director
Vous pouvez combiner la puissance de Fireworks et Director. Fireworks permet d’exporter des
contenus graphiques et interactifs dans Director. Le processus d’exportation préserve les
comportements et les découpes du graphisme. Vous pouvez exporter en toute sécurité les images
découpées avec des survols, voire des images comportant des calques. Cela permet aux utilisateurs
de Director de tirer parti des outils d’optimisation et de conception de graphismes de Fireworks
sans compromettre la qualité.
Remarque : Si vous utilisez Director 8.0 ou une version supérieure, vous devez télécharger la version gratuite
Fireworks Import Xtra pour Director depuis le site http://www.macromedia.com/fr/, et l’installer.
Insertion de fichiers Fireworks dans Director
Director peut importer des images fusionnées dans Fireworks, tels que des fichiers JPEG et GIF. Il
peut également importer des images PNG 32 bits avec transparence. Pour les contenus découpés,
interactifs et animés, Director peut importer du code HTLM Fireworks.
Utilisation de Fireworks avec d’autres applications 397
Pour plus d’informations sur l’exportation d’images Fireworks fusionnées, telles que des images
aux formats JPEG et GIF, voir « Exportation d’une seule image » à la page 357.
Exportation de graphiques avec tranparence
Dans Director, la transparence peut être réalisée en important des images PNG 32 bits. Vous
pouvez exporter des graphiques PGN 32 bits avec transparence depuis Fireworks.
Pour exporter un fichier PNG 32 bits avec transparence :
1
Dans Fireworks, choisissez Fenêtre > Optimiser, remplacez le format d’exportation par PNG
32 et affectez la valeur Transparente à Matage.
2
Choisissez Fichier > Exporter.
3
Sélectionnez Images uniquement dans le menu déroulant Enregistrer comme type. Nommez le
fichier, puis cliquez sur Enregistrer.
Exportation de contenu calqué et découpé vers Director
En exportant des découpes Fireworks vers Director, vous pouvez exporter des contenus découpés
et interactifs, tels que des boutons et des images de survol. En exportant des calques vers Director,
vous pouvez exporter des contenus Fireworks calqués tels que des animations.
Pour exporter des fichiers Fireworks vers Director :
1
Dans Fireworks, choisissez Fichier > Exporter.
Remarque : Vous pouvez également cliquer sur le bouton d’exportation rapide et choisir l’option de source
comme calques ou de source comme découpes dans le menu déroulant Director. Choisissez l’option de source
comme calques, si vous exportez une animation et l’option de source comme découpes si vous exportez un
contenu interactif, tels que des boutons.
2
A partir de la boîte de dialogue Exporter, tapez un nom de fichier et choisissez un dossier de
destination.
3
A partir du menu déroulant Enregistrer sous, choisissez Director.
4
Choisissez une option dans le menu déroulant Source.
Calques Fireworks exporte les calques du document. Choisissez cette option, si vous exportez
un contenu ou une animation avec calque.
Découpes Fireworks exporte
les découpes du document. Choisissez cette option si vous
exportez un contenu découpé ou interactif, tel que des images de survol et des boutons.
5
Activez Rogner les images pour recadrer automatiquement les images exportées en fonction des
objets qu’elles contiennent.
6
Sélectionnez Placer les images dans le sous-dossier pour choisir le dossier devant recevoir les
images.
7
Cliquez sur Enregistrer.
Importation de fichiers Fireworks vers Director
Dans Director, vous pouvez importer des images fusionnées que vous avez exportées depuis
Fireworks, telles que JPEG, GIF et PNG 32 bits. Ou, vous pouvez importer des calques, des
découpes et des éléments interactifs en insérant du code HTML Fireworks.
398 Chapitre 16
Pour importer une image Fireworks fusionnée :
1
Dans Director, choisissez Fichier > Importer.
2
Accédez au fichier approprié et cliquez sur Importer.
3
Si nécessaire, changez les options de la boîte de dialogue des options d’image. Pour plus
d’informations sur ces options, voir Utilisation de Director.
4
Cliquez sur OK.
Le graphique importé apparaît sous la forme d’un fichier bitmap.
Pour importer des calques, des découpes et des éléments interactifs Fireworks :
1
Dans Director, choisissez Insertion > Fireworks > Images dans Fireworks HTML.
Remarque : L’emplacement et le nom de cette commande peuvent être différents dans votre version Director.
2
Recherchez le fichier HTML Fireworks que vous avez exporté dans Director.
La boîte de dialogue d’ouverture Fireworks HTML s’affiche.
3
Changez les options appropriées :
Couleur permet de définir
la profondeur de couleur des graphiques importés. S’ils contiennent
une transparence, choisisssez Couleur 32 bits.
Enregistrement permet
de définir le point de repère du graphique importé.
Importation de comportements de survol en code Lingo convertit les comportements Fireworks
en code Lingo.
Importer selon scénario place
4
les acteurs dans le Scénario après l’importation.
Cliquez sur Ouvrir.
Le graphique et le code du fichier HTML Fireworks sont importés.
Remarque : Si vous importez une animation Fireworks, faites glisser les cadres dans Director pour compenser
le délai de chaque calque importé, si nécessaire.
Utilisation de Fireworks avec d’autres applications 399
Modification des acteurs Director dans Fireworks
L’intégration avec lancement et modification permet de modifier les acteurs Director en lançant
Fireworks pour les modifier dans Director. Vous pouvez également lancer Fireworks dans Director
pour optimiser les acteurs.
Pour lancer Fireworks pour modifier les acteurs Director :
1
Dans Fireworks, cliquez avec le bouton droit de la souris (Windows) ou appuyez sur la touche
Contrôle et cliquez (Macintosh) dans la fenêtre Distribution.
2
Choisissez Lancer éditeur externe dans le menu déroulant.
Remarque : Si Fireworks ne démarre pas comme éditeur d’image externe, dans Director, choisissez Fichier >
Préférences > Editeurs et définissez Fireworks comme éditeur externe de fichiers graphiques bitmap.
Le fichier s’ouvre dans Fireworks et la fenêtre de document indique que vous modifiez un
fichier de Director.
3
Modifiez l’image et cliquez sur Terminé.
Fireworks exporte le nouveau graphique vers Director.
Optimisation des acteurs dans Director
Vous pouvez lancer Fireworks dans Director pour effectuer rapidement des modifications
d’optimisation sur acteurs sélectionnés.
Pour lancer Fireworks pour changer les paramètres d’optimisation d’un acteur Director :
1
Dans Director, sélectionnez l’acteur dans la fenêtre Distribution et cliquez sur Optimiser dans
l’onglet Bitmap du Vérificateur de propriétés de Fireworks.
2
Dans Fireworks, modifiez les paramètres d’optimisation de manière appropriée.
3
Cliquez sur Mettre à jour une fois que vous avez terminé. Cliquez sur Terminé si la boîte de
dialogue Edition MIX apparaît.
L’image est exportée vers Director avec les nouveaux paramètres.
Utilisation de Macromedia HomeSite
Vous pouvez utiliser Fireworks et HomeSite pour créer et modifier des pages Web. L’exportation
et l’ouverture de code Fireworks HTML dans HomeSite est simple et l’insertion de graphiques
Fireworks dans des documents HomeSite est tout aussi simple. Mais élément important,
Fireworks et HomeSite partagent une intégration puissance qui permet de lancer Fireworks
depuis HomeSite pour modifier des graphiques Web.
400 Chapitre 16
Insertion d’images Fireworks dans HomeSite
Vous pouvez placer des images GIF ou JPEG Fireworks dans un document HomeSite. Vous devez
exporter préalablement les images depuis Fireworks. Pour pus d’informations sur l’exportation
d’images aux formats GIF et JPEG, voir « Exportation d’une seule image » à la page 357.
Pour importer une image Fireworks dans un document HomeSite :
1
Enregistrez le document dans HomeSite.
Remarque : HomeSite crée des chemins relatifs vers les images, mais il ne peut le faire que si vous avez
enregistré le document.
2
Dans la fenêtre des ressources, accédez à l’image Fireworks que vous avez exportée.
3
Créez un lien vers l’image Fireworks dans le document :
• Faites glisser le fichier de la fenêtre des ressources vers l’emplacement sélectionné dans le code
HTML sous l’onglet d’édition de la fenêtre Document.
• Dans l’onglet d’édition de la fenêtre Document, placez le curseur à l’endroit où vous désirez
insérer l’image Fireworks, puis cliquez le bouton droit de la souris dans la fenêtre des Ressources
et choisissez l’option d’insertion sous la forme d’un lien.
Un lien vers l’image Fireworks est créé dans le code HTML. Cliquez sur l’onglet Parcourir pour
afficher l’aperçu de l’image dans le document.
Insertion de code HTML Fireworks dans HomeSite
Vous pouvez placer du code HTML de différentes manières dans HomeSite. Vous pouvez
exporter le code Fireworks ou le copier dans le Presse-papiers. Vous pouvez également ouvrir un
fichier HTML Fireworks exporté dans HomeSite et copier et coller des parties du code. En outre,
vous pouvez aisément mettre à jour le code que vous avez exporté vers HomeSite en utilisant la
commande Mettre à jour le code HTML de Fireworks.
Remarque : Avant d’exporter, de copier ou de mettre à jour du code HTML Fireworks pour l’utiliser dans HomeSite,
veillez à définir le type de code HTL générique dans la boîte de dialogue Configurer HTML. Pour plus
d’informations, voir « Définition des options d’exportation du code HTML » à la page 369.
Exportation de code HTML Fireworks vers HomeSite
L’exportation de code HTML Fireworks génère un fichier HTML et les fichiers images associées
dans l’emplacement que vous définssez. Vous pouvez ensuite ouvrir le fichier HTML dans
HomeSite pour le modifier.
Remarque : Avant d’exporter, définissez le type HTML générique dans la boite de dialogue Configurer HTML. Pour
plus d’informations, voir « Définition des options d’exportation du code HTML » à la page 369.
Pour exporter du code HTML Fireworks vers HomeSite :
Exportez le document dans le format HTML dans Fireworks et ouvrez le fichier exporté dans
HomeSite en choisissant Fichier > Ouvrir. Pour plus d’informations, voir « Exportation de code
généré par Fireworks » à la page 363.
Utilisation de Fireworks avec d’autres applications 401
Copie de code HTML Fireworks dans le Presse-papiers pour l’utiliser
dans HomeSite
Une méthode rapide d’insertion de code HTML Fireworks-dans HomeSite consiste à copier le
code dans le Presse-papiers de Fireworks et à le coller directement dans le document HomeSite.
Lorsque vous copiez du code HTLM Fireworks dans le Presse-papiers, les images nécessaires sont
exportées vers l’emplacement que vous définissez.
Remarque : Avant de copier le code dans le Presse-papiers, définissez le code HTML générique dans la boîte de
dialogue Configurer HTML. Pour plus d’informations, voir « Définition des options d’exportation du code HTML » à
la page 369.
Pour copier du code HTML Fireworks pour l’utiliser dans HomeSite :
Copiez le code HTML dans le Presse-papiers de Fireworks et collez-le dans un nouveau document
HomeSite. Pour plus d’informations, voir « Copie d’un code HTML dans le Presse-papiers » à la
page 364.
Copie de code d’un fichier exporté Fireworks et collage du code dans
HomeSite
Vous pouvez ouvrir un fichier HTML Fireworks exporté dans HomeSite et copier et coller
uniquement les sections appropriées dans un autre document HomeSite.
Remarque : Avant d’exporter, définissez le type HTML générique dans la boîte de dialogue Configurer HTML. Pour
plus d’informations, voir « Définition des options d’exportation du code HTML » à la page 369.
Pour copier du code d’un fichier Fireworks exporté et le coller dans HomeSite :
Exportez un fichier HTML Fireworks et copiez et collez le code approprié dans un document
HomeSite existant. Pour plus d’informations, voir « Copie et collage d’un code HTML à partir
d’un fichier Fireworks » à la page 366.
Mise à jour de code HTML Fireworks exporté dans HomeSite
La commande Mettre à jour le code HTML pemet de modifier un document HTML Fireworks
que vous avez exporté vers HomeSite.
Remarque : Avant de mettre à jour le code HTML, définissez le type HTML générique dans la boîte de dialogue
Configurer HTML. Pour plus d’informations, voir « Définition des options d’exportation du code HTML » à la
page 369.
Pour mettre à jour du code HTML Fireworks exporté dans HomeSite :
Utilisez la commande Mettre à jour le code HTML dans Fireworks. Pour plus d’informations,
voir « Mise à jour d’un code HTML exporté » à la page 367.
Modification d’images Fireworks dans HomeSite
Vous pouvez utiliser l’intégration des fonctionnalités de lancement et de modification pour
modifier des images dans un document HomeSite. HomeSite lance automatiquement Fireworks
pour vous permettre de modifier l’image. Lorsque vous quittez Fireworks, les mises à jour que
vous avez effectuées sont automatiquement appliquées à l’image insérée dans HomeSite.
Ensemble, les deux applications fournissent un processus rationnel de modification de graphiques
Web dans les pages HTML.
402 Chapitre 16
Pour lancer et modifier des images Fireworks dans HomeSite :
1
Enregistrez le document dans HomeSite.
2
Utilisez l’une des méthodes suivantes :
• Cliquez avec le bouton droit sur le fichier image dans l’un des onglets de fichiers de la fenêtre
des ressources.
• Cliquez avec le bouton droit sur l’onglet Vignettes de la fenêtre du résultat.
• Cliquez avec le bouton droit sur la balise <img> associée dans le code HTML sous l’onglet d’édition
de la fenêtre Document.
3
Choisissez l’option d’édition dans Macromedia Fireworks dans le menu déroulant.
HomeSite lance Fireworks, s’il n’est pas ouvert.
4
Si un message vous le demande, indiquez si vous désirez rechercher le fichier source Fireworks
de l’image insérée. Pour plus d’informations sur les fichiers source PNG, voir « Enregistrement
de fichiers Fireworks » à la page 84.
5
Modifiez l’image dans Fireworks.
La fenêtre du document indique que vous modifiez une image Fireworks d’une autre application.
6
Une fois les modifications terminées, cliquez sur Terminé dans la fenêtre du document.
L’image mise à jour est exportée vers HomeSite et le fichier source PNG est enregistré si un
fichier source a été sélectionné.
Utilisation de Microsoft FrontPage
Fireworks dispose de fonctions d’intégration puissantes lorsqu’il est combiné avec de nombreuses
applications, y compris les produits autres que ceux de Macromedia. Fireworks facilite la création et
la modification des pages Web avec Microsoft FrontPage. Avec Roundtrip HTML, vous pouvez
aisément lancer Fireworks depuis FrontPage pour créer ou modifier des graphiques et des tables
HTML. Roundtrip HTML, une fonction d’intégration puissante que Fireworks partage avec
FrontPage et Macromedia Dreamweaver, permet d’effectuer des modifications dans une
application et de répercuter ces modifications dans une autre.
Insertion d’images Fireworks dans FrontPage
Vous pouvez insérer des graphiques Fireworks dans un document FrontPage de deux manières.
Vous pouvez insérer un graphique Fireworks terminé à l’aide du menu Insert de FrontPage ou
créer un graphique Fireworks en cliquant sur le bouton d’édition Fireworks de la barre d’outils
principale de FrontPage.
Insertion d’images Fireworks dans FrontPage
Vous pouvez insérer des images Fireworks GIF ou JPEG directement dans un document
FrontPage. Vous devez exporter préalablement les images depuis Fireworks. Pour pus
d’informations sur l’exportation d’images aux formats GIF et JPEG, voir « Exportation d’une
seule image » à la page 357.
Pour insérer une image Fireworks dans un document FrontPage :
1
Dans la vue Edit ou Code, placez le curseur à l’endroit où vous désirez insérer l’image.
2
Choisissez Insertion > Image > Depuis fichier.
Utilisation de Fireworks avec d’autres applications 403
3
Accédez aux fichiers Fireworks approprié, puis cliquez sur OK.
Création d’images Fireworks dans FrontPage
Vous pouvez lancer Fireworks dans FrontPage pour créer une image non découpée.
Remarque : Pour créer une image découpée, vous devez préalablement créer et exporter une image non
découpée. Lancez et modifiez ensuite le graphique dans Fireworks pour ajouter des découpes et des éléments
d’interactivité. Pour plus d’informations sur le lancement et la modification de graphiques existants depuis
FrontPage, voir « Modification de fichiers Fireworks dans FrontPage » à la page 406.
Pour créer une image non découpée Fireworks dans FrontPage :
1
Lorsque vous lancez et modifiez des images Fireworks placées dans Dreamweaver, le Vérificateur
de propriétés de Dreamweaver indique s’il s’agit d’une image ou d’une table.
2
Cliquez sur Oui, si le message qui s’affiche vous demande si vous voulez créer une image.
Fireworks démarre s’il n’est pas ouvert.
3
Ouvrez un nouveau document dans Fireworks et créez une image.
4
Choisissez Fichier > Enregistrer une fois que vous avez terminé. Spécifiez le nom et
l’emplacement du fichier source PNG dans la boîte de dialogue Enregistrer sous et cliquez sur
Enregistrer.
Pour plus d’informations sur l’enregistrement des fichiers PNG, Fireworks, voir
« Enregistrement de fichiers Fireworks » à la page 84.
5
Choisissez Fichier > Exporter. Spécifiez le nom et l’emplacement de l’image exportés dans la
boîte de dialogue Exporter.
6
Cliquez sur Enregistrer dans la boîte de dialogue Exporter pour exporter le fichier.
7
Revenez dans FrontPage.
8
Dans la vue Edit ou Code, placez le curseur à l’endroit où vous désirez insérer l’image.
9
Choisissez Insertion > Image > Depuis fichier.
10
Accédez au fichier image que vous venez d’exporter, puis cliquez sur Insérer.
Insertion de code HTLML Fireworks dans FrontPage
Vous pouvez placer du code HTLM Fireworks dans FrontPage de différentes manières. Vous
pouvez exporter le code HTML Fireworks ou le copier dans le Presse-papiers. Vous pouvez
également ouvrir un fichier HTML Fireworks exporté vers FrontPage et copier et coller des
parties du code. En outre, vous pouvez mettre à jour aisément le code que vous avez exporté vers
FrontPage en utilisant la commande Mettre à jour le code HTML dans Fireworks.
Remarque : Avant d’exporter, de copier ou de mettre à jour un fichier HTL Fireworks pour l’utiliser dans FrontPage,
définissez le type HTML FrontPage dans la boîte de dialogue Configurer HTML. Pour plus d’informations, voir
« Définition des options d’exportation du code HTML » à la page 369.
Exportation de code HTML Fireworks vers FrontPage
L’exportation de code HTML Fireworks génère un fichier HTML et les fichiers images associés
dans l’emplacement que vous définissez. Vous pouvez ensuite ouvrir le fichier HTML dans
FrontPage pour le modifier.
404 Chapitre 16
Remarque : Avant de copier le code HTML Fireworks pour l’utiliser dans FrontPage, définissez le type HTML
FrontPage dans la boîte de dialogue Configurer HTML. Pour plus d’informations, voir « Définition des options
d’exportation du code HTML » à la page 369.
Pour exporter du code HTML Fireworks vers FrontPage :
Exportez le document Fireworks dans le format HTML et choisissez Fichier > Ouvrir pour ouvrir
dans FrontPage le fichier HTML exporté. Pour plus d’informations, voir « Exportation de code
généré par Fireworks » à la page 363.
Copie de code HTML Fireworks dans le Presse-papiers pour l’utiliser
dans FrontPage
L’une des méthodes permettant d’insérer rapidement un code HTML Fireworks dans FrontPage
consiste à le copier dans le Presse-papiers de Fireworks, puis à le coller directement dans un
document FrontPage. L’ensemble du code HTML et JavaScript associé au document Fireworks
est copié dans le document FrontPage et toutes les images sont exportées vers l’emplacement
spécifié.
Remarque : Avant de copier le code HTML Fireworks pour l’utiliser dans FrontPage, définissez le type HTML
FrontPage dans la boîte de dialogue Configurer HTML. Pour plus d’informations, voir « Définition des options
d’exportation du code HTML » à la page 369.
Pour copier du code HTML Fireworks dans le Presse-papiers pour l’utiliser dans FrontPage :
Copiez le code HTML vers le Presse-papiers dans Fireworks et collez-le dans un nouveau
document FrontPage. Pour plus d’informations, voir « Copie d’un code HTML dans le Pressepapiers » à la page 364.
Remarque : Cette méthode n’est pas recommandée si le document Fireworks contient des boutons ou d’autres
éléments interactifs nécessitant du code JavaScript, car le code HTML et JavaScript devra être modifié après l’avoir
collé dans FrontPage. Pour plus d’informations, voir « Exportation du fichier au format HTML » à la page 362.
Copie de code depuis un fichier Fireworks exporté et collage dans
FrontPage
Vous pouvez ouvrir un fichier HTML Fireworks exporté et copier et coller manuellement
uniquement les sections appropriées dans un autre document FrontPage.
Remarque : Définissez le type HTML FrontPage dans la boîte de dialogue Configurer HTML avant d’exporter le
code depuis Fireworks. Pour plus d’informations, voir « Définition des options d’exportation du code HTML » à la
page 369.
Pour copier du code d’un fichier Fireworks exporté et le coller dans FrontPage :
Exportez un fichier HTML Fireworks et copiez et collez le code approprié dans un document
FrontPage existant. Pour plus d’informations, voir « Copie et collage d’un code HTML à partir
d’un fichier Fireworks » à la page 366.
Mise à jour de code HTML Fireworks exporté dans FrontPage
La commande Mettre à jour le code HTML permet de modifier dans frontPage un document
HTML Fireworks que vous avez exporté.
Remarque : Avant de le modifier, définissez le type HMTL FrontPage dans la boîte de dialogue Configurer HTML.
Pour plus d’informations, voir « Définition des options d’exportation du code HTML » à la page 369.
Utilisation de Fireworks avec d’autres applications 405
Pour mettre à jour du code HTML Fireworks exporté dans FrontPage :
Utilisez la commande Mettre à jour le code HTML dans Fireworks. Pour plus d’informations,
voir « Mise à jour d’un code HTML exporté » à la page 367.
Modification de fichiers Fireworks dans FrontPage
L’utilisation combinée de Fireworks et FrontPage facilite l’utilisation de Roundtrip HTML, une
fonction qui permet d’effectuer des modifications dans une application et de les répercuter dans
une autre.
Avec Roundtrip HTML, l’intégration des fonctionnalités de lancement et de modification permet
de modifier des images et des tableaux Fireworks insérés dans un document FrontPage. FrontPage
lance automatiquement Fireworks pour vous permettre de modifier l’image Fireworks. Les
modifications effectuées dans Fireworks sont automatiquement appliquées à l’image dans
FrontPage. Utilisées conjointement, ces deux applications permettent de rationaliser le processus
de modification et d’insertion de fichiers graphiques Web dans des pages HTML.
Pour lancer et modifier des images et des tableaux Fireworks dans FrontPage :
1
Enregistrez le document dans FrontPage
2
Sélectionnez la découpe d’image ou de tableau à modifier et cliquez sur le bouton Lancer et
modifier le graphique sélectionné dans Fireworks.
FrontPage lance Fireworks s’il n’est pas ouvert.
3
Si le programme vous le demande, indiquez si vous désirez lancer le fichier source Fireworks de
l’image ou du tableau inséré. Pour plus d’informations sur les fichiers source PNG, voir
« Enregistrement de fichiers Fireworks » à la page 84.
Remarque : Lorsque vous lancez et modifiez une image ou une découpe d’un tableau Fireworks, Fireworks
lance le fichier source PNG de l’ensemble du tableau.
4
Modifiez l’image dans Fireworks. La fenêtre du document indique que vous modifiez une
image Fireworks dans FrontPage.
5
Une fois les modifications terminées, cliquez sur Terminé dans la fenêtre du document.
L’image ou le code HTML est exporté en utilisant les paramètres d’optimisation en cours, les
graphiques utilisés par FrontPage sont mis à jour et le fichier source PGN est sauvegardé si un
fichier source a été sélectionné.
Utilisation avec Adobe Photoshop
Fireworks assure une excellente prise en charge de l’importation de fichiers natifs Photoshop
(PSD), avec des options qui permettent de conserver de nombreux aspects des fichiers importés
(calques, masques et texte modifiable). Vous pouvez donc importer des images Photoshop dans
Fireworks afin de les modifier et de les optimiser pour le Web, sans perdre la possibilité de
réexporter ces images vers Photoshop.
Insertion de graphiques Photoshop dans Fireworks
Vous pouvez faire glisser et déposer des graphiques individuels Photoshop dans Fireworks ou
importer la totalité d’un fichier Photoshop.
406 Chapitre 16
Insertion de graphiques Photoshop dans Fireworks par Glisser-déposer
Vous pouvez insérer des graphiques Photoshop dans Fireworks en effectuant une action de glisserdéposer.
Pour faire glisser et déposer un graphique Photoshop dans Fireworks :
Faites glisser le graphique de Photoshop vers un document ouvert dans Fireworks.
Chaque graphique que vous faites glisser devient un nouvel objet bitmap. Les texte est également
importé sous la forme d’un objet bitmap et devient un texte non modifiable. Pour plus
d’informations, voir « Importation de texte depuis Photoshop » à la page 407.
Importation de fichiers Photoshop dans Fireworks
Lorsque vous importez ou ouvrez un fichier Photoshop dans Fireworks, le fichier est converti en
fichier PNG selon les préférences d’importation que vous avez indiquées. Outre la conservation
des calques et du texte selon les options d’importation que vous avez définies, Fireworks préserve
et convertit les éléments de Photoshop suivants :
• Les masques de calques sont convertis en masques d’objets dans Fireworks.
• Les effets de calques sont convertis en effets en direct Fireworks si l’effet en direct
correspondant existe. Par exemple, l’effet de calque Ombre portée est converti dans Fireworks
en effet Ombre portée.
Remarque : Les effets de calque et les effets en direct peuvent modifier légèrement l’apparence.
• Les modes de fusion des calques sont convertis en modes de fusion Fireworks pour les objets
correspondants, si ces modes sont pris en charge par Fireworks.
• La première couche alpha de la palette Couches est convertie en zones transparentes dans
l’image Fireworks. Fireworks ne prend pas en charge les autres couches alpha de Photoshop.
Les calques de réglage, les groupes de détourage et les trajectoires de Photoshop ne sont pas pris en
charge par Fireworks. Fireworks ignore donc ces fonctionnalités lors de l’importation de fichiers
Photoshop.
Remarque : Sous Windows, les noms de fichiers Photoshop doivent inclure une extension PSD de façon à être
identifiés correctement par Fireworks.
Pour importer un fichier Photoshop dans Fireworks :
1
Choisissez Fichier > Importer ou Fichier > Ouvrir et accédez à un fichier Photoshop (PSD).
2
Cliquez sur Ouvrir.
Le fichier Photoshop est importé comme fichier PNG. Si vous effectuez des modifications et
voulez enregistrer le fichier dans le format PSD, vous devez l’exporter dans ce format. Pour plus
d’informations, voir « Insertion de graphiques Fireworks dans Photoshop » à la page 409.
Importation de texte depuis Photoshop
Vous pouvez ouvrir ou importer un fichier Photoshop contenant du texte.
Lorsque vous ouvrez le fichier, Fireworks vérifie si vous disposez des polices nécessaires sur votre
système. Si tel n’est pas le cas, Fireworks vous demande si vous voulez remplacer les polices ou
conserver l’apparence. Pour plus d’informations, voir « Traitement des polices manquantes » à la
page 191.
Utilisation de Fireworks avec d’autres applications 407
Si le texte du fichier Photoshop contient des effets pris en charge par Fireworks, ces effets sont
conservés dans Fireworks. Toutefois, étant donné que Fireworks et Photoshop n’appliquent pas les
effets de la même manière, ces effets peuvent être différents dans chaque application.
Lorsque vous ouvrez ou importez dans Fireworks des fichiers Photoshop 6 ou 7 contenant du
texte, une image cache du texte s’affiche pour conserver son apparence Photoshop. Lorsque vous
modifiez le texte, l’image cache est remplacée par le texte réel dont l’apparence peut être différente
de celle de l’original.
Remarque : Fireworks ne permet pas d’exporter du texte dans le format Photoshop 6 ou 7. Si vous modifiez un
document contenant du texte Photoshop 6 ou 7 et exportez le document dans Photoshop, le fichier est exporté
dans le format Photoshop 5.5. Si vous ne modifiez pas le texte, le fichier est exporté dans le format Photoshop 6.
Pour plus d’informations sur les fichiers Photoshop, voir « Insertion de graphiques Fireworks dans Photoshop » à la
page 409.
Options d’importation des fichiers Photoshop
Les options d’importation de Fireworks permettent de définir la manière dont les calques et le
texte seront traités dans les fichiers Photoshop importés. Selon les options que vous choisissez,
vous pouvez contrôler le degré d’apparence et de possibilité de modification des fichiers importés.
Pour spécifier des options d’importation de fichiers Photoshop :
1
Choisissez Edition > Préférences.
Remarque : Sous Mac OS X, choisissez Fireworks > Préférences.
2
Cliquez sur l’onglet d’importation (Windows) ou choisissez l’option d’importation dans le
menu déroulant (Macintosh).
3
Choisissez les options d’importation :
Calques : Convertir en objets Fireworks importe
chaque calque du fichier Photoshop sous la
forme d’un objet dans un calque de Fireworks.
Calques : Partager le calque entre les images rend
les calques importés visibles dans toutes les
images du fichier Fireworks.
Calques : Convertir en images importe chaque calque du fichier Photoshop comme objet dans
un calque séparé de Fireworks. Cette option est utile pour importer des fichiers destinés à une
animation.
Texte : Modifiable convertit le texte du fichier Photoshop en texte modifiable dans Fireworks.
Cette option permet de modifier le texte importé à l’aide du Vérificateur de propriétés et des
outils Texte Fireworks. Le texte converti peut changer légèrement d’aspect par rapport à
l’original.
Texte : Conserver l’apparence convertit le texte du fichier Photoshop en objet bitmap dans
Fireworks. Cette option préserve l’aspect original du texte, mais ne vous permet pas de
modifier celui-ci à l’aide des outils Texte de Fireworks.
Utiliser image composite 2 D importe
sans les calques d’origine.
4
Cliquez sur OK.
408 Chapitre 16
le fichier Photoshop sous la forme d’image fusionnée
Importation de filtres et de plug-ins Photoshop
Fireworks permet d’importer des filtres et des plug-ins Photoshop et d’autres filtres et plug-ins
tiers. Vous pouvez importer des filtres dans la fenêtre des effets en direct ou le menu des filtres.
L’importation de filtres dans ces deux emplacements permet d’y accéder depuis les deux
emplacements.
Remarque : Les filtres et les plug-ins Photoshop 6 et 7 ne sont pas compatibles avec Fireworks MX. Sous
Macintosh, les filtres tiers fonctionnant sous Mac OS 9 sont pris en charge par Fireworks MX pour Mac OS 9 et
ceux fonctionnant sous Mac OS X sont pris en charge par Fireworks MX pour Mac OS X.
Pour plus d’informations sur la fenêtre des effets en direct et le menu des filtres, voir« Utilisation
des effets en direct » à la page 219.
Pour importer des filtres et des plug-ins Photoshop ou des filtres et plug-ins tiers à l’aide de la
boîte de dialogue Préférences :
1
Choisissez Edition > Préférences.
Remarque : Sous Mac OS X, choisissez Fireworks > Préférences.
2
Cliquez sur l’onglet Dossiers (Windows) ou choisissez Dossiers dans le menu déroulant
(Macintosh).
3
Choisissez l’option Plug-ins Photoshop.
La boîte de dialogue de sélection de dossier Windows ou Macintosh s’affiche.
Remarque : Si la boîte de dialogue ne s’ouvre pas, cliquez sur Parcourir.
4
Accédez au dossier d’installation des filtres et des plug-ins Photoshop ou tiers et cliquez sur
Sélectionner (Windows) ou Choisir (Macintosh).
5
Cliquez sur OK pur fermer la boîte de dialogue Préférences.
6
Redémarrez Fireworks pour charger les filtres et les plug-ins.
Pour importer des filtres et des plug-ins Photoshop et tiers avec la fenêtre des effets en direct :
1
Sélectionnez n’importe quel objet vectoriel, objet bitmap ou bloc de texte sur le fond et cliquez
sur le bouton Ajouter des effets dans le Vérificateur de propriétés.
Remarque : Ce bouton est disponible uniquement lorsqu’un objet est sélectionné dans le document.
2
Choisissez Options > Rechercher les plug-ins dans le menu déroulant qui apparaît.
3
Accédez au dossier d’installation des filtres et des plug-ins Photoshop ou tiers et cliquez sur
Sélectionner (Windows) ou Choisir (Macintosh). Cliquez sur OK, si le message qui s’affiche
vous demande si vous voulez redémarrer Fireworks.
4
Redémarrez Fireworks pour charger les filtres et les plug-ins.
Insertion de graphiques Fireworks dans Photoshop
Fireworks offre de nombreuses options d’exportation de fichiers au format Photoshop (PSD). Les
paramètres d’exportation permettent de contrôler les éléments du fichier qui resteront modifiables
lorsque vous rouvrirez le fichier dans Photoshop.
Utilisation de Fireworks avec d’autres applications 409
Une image Fireworks exportée dans Photoshop reste modifiable lorsque vous la rouvrez dans
Fireworks en tant que graphisme Photoshop. Les options d’exporation pour la modification,
l’apparence et la taille de fichier permettent de déterminer la meilleure procédure d’exportation
d’un graphique. Les utilisateurs de Photoshop peuvent travailler sur leurs graphismes dans
Fireworks, puis poursuivre leur modification dans Photoshop.
Pour exporter un graphisme au format Photoshop :
1
Choisissez Fichier > Exporter ou cliquez sur le bouton Exportation rapide et choisissez Autre >
Exporter vers Photoshop.
2
A partir de la boîte de dialogue Exporter, donnez un nom au fichier et choisissez le format
Photoshop PSD dans le menu Type.
3
Pour choisir les paramètres d’exportation groupés, sélectionnez une option dans le menu
Paramètres qui apparaît. Ces groupes de paramètres représentent des combinaisons prédéfinies
d’options d’exportation pour les objets, les effets et le texte du fichier Fireworks. Les options
d’exportation sont décrites en détail dans « Personnalisation des fichiers à exporter vers
Photoshop » à la page 410.
• Conserver le caractère modifiable et sacrifier l’aspect convertit les objets en calques, préserve le
caractère modifiable des effets et convertit le texte en calques de texte Photoshop modifiables.
Choisissez cette option si vous désirez retoucher l’image dans Photoshop et n’avez pas besoin de
préserver l’aspect exact de l’image Fireworks.
• Conserver l’aspect de Fireworks convertit chaque objet en calque Photoshop, mais les effets et
le texte ne peuvent plus être modifiés. Choisissez cette option si vous désirez garder le contrôle
des objets Fireworks dans Photoshop tout en préservant l’aspect original de l’image Fireworks.
• Fichier Photoshop réduit fusionne les calques pour créer une image. Choisissez cette option si
vous exportez un fichier contenant un grand nombre d’objets Fireworks.
• Personnalisé permet de choisir des paramètres spécifiques pour les objets, les effets et le texte.
4
Cliquez sur Enregistrer pour exporter votre fichier Photoshop.
Remarque : Photoshop 5.5 et les versions précédentes ne permettent pas d’ouvrir 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 fichiers à exporter vers Photoshop
Lorsque vous exportez un fichier vers Photoshop, vous pouvez choisir des paramètres
personnalisés pour l’exportation des objets, des effets et du texte.
Pour personnaliser les paramètres d’exportation vers Photoshop :
1
Dans la boîte de dialogue Exporter, lorsque Phtoshop PSD est sélectionné comme fichier
d’exportation, choisissez Personnalisé dans le menu déroulant Paramètres.
2
A partir du menu déroulant Objets, choisissez l’une des options suivantes :
Convertir en calques Photoshop convertit chaque objet Fireworks en calque Photoshop et
chaque masque Fireworks en masque de calque Photoshop.
Fusionner tous les calques Fireworks fusionne l’ensemble des calques Fireworks dans un calque
Photoshop. Si vous choisissez cette option, vous n’aurez plus la possibilité de modifier les objets
de Fireworks dans Photoshop. Vous perdez également d’autres caractéristiques (modes de
fusion) qui sont associées aux objets de Fireworks.
410 Chapitre 16
3
A partir du menu déroulant des effets, choisissez l’une des options suivantes :
Conserver le caractère modifiable convertit
les effets en direct de Fireworks en équivalents
Photoshop. Les effets qui n’existent pas dans Photoshop sont ignorés.
Rendu des effets fusionne
les effets avec les objets auxquels ils s’appliquent. Si vous choisissez
cette option, vous préservez l’aspect des effets, mais n’avez plus la possibilité de les modifier
dans Photoshop.
4
A partir du menu déroulant Texte, choisissez l’une des options suivantes :
Conserver le caractère modifiable convertit
le texte en calque Photoshop modifiable. Le
formatage de texte qui n’est pas pris en charge par Photoshop est alors perdu.
Rendu du texte transforme le texte en objet image. Si vous choisissez cette option, vous
préservez l’aspect du texte, mais n’avez plus la possibilité de le modifier.
Utilisation avec Adobe GoLive
Vous pouvez utiliser Fireworks et Adobe GoLive® GoLive® ensemble pour créer et modifier des
pages Web. Vous pouvez exporter et copier du code HTML Fireworks dans Adobe GoLive,
comme vous le faites avec la plupart des éditeurs HTML. La seule exception réside dans le fait que
vous devez choisir GoLive HTML comme type HTML avant d’exporter ou de copier le code
HTML de Fireworks.
Pour plus d’informations sur le choix d’un type HTML, voir « Définition des options
d’exportation du code HTML » à la page 369. Pour plus d’informations sur l’exportation et la
copie de code HTML Fireworks, voir « Exportation du fichier au format HTML » à la page 362.
Remarque : Le type HTML Adobe GoLive ne prend pas en charge les menus déroulants. Si document Fireworks
contient des menus déroulants, vous devez choisir le type HTML générique avant l’exportation.
Utilisation avec les éditeurs HTML
Fireworks génère du code HTML pur qui peut être lu par tous les éditeurs HTML. Pour des
informations générales sur l’insertion de code HTML Fireworks dans les éditeurs HTML, voir
« Exportation du fichier au format HTML » à la page 362.
Fireworks contient des fonctions d’intégration speciales pour Macromedia Dreamweaver,
Macromedia HomeSite et Microsoft FrontPage. Pour plus d’informations sur l’utilisation des ces
applications, voir Chapitre 16, « Utilisation de Fireworks avec d’autres applications », à la page 373.
Fireworks permet d’importer également des contenus HTML. Il s’agit d’une fonction puissante qui
permet d’ouvrir et de modifier la plupart des documents HTML dans Fireworks. Pour plus
d’informations, voir « Création de fichiers PNG dans Fireworks à partir de fichiers HTML » à la page 80.
Utilisation de Fireworks avec d’autres applications 411
412 Chapitre 16
CHAPITRE 17
Automatisation des tâches répétitives
Les concepteurs Web perdent souvent du temps à effectuer les mêmes tâches répétitives telles que
l’optimisation ou la conversion d’images pour respecter certaines contraintes. Une partie de la
puissance de Fireworks MX réside dans sa capacité à automatiser et simplifier de nombreuses
tâches fastidieuses dans divers domaines, qu’il s’agisse de dessin, de modification ou de conversion
de fichiers.
Pour accélérer le processus de modification globale, la fonction Rechercher et remplacer peut être
appliquée à des éléments dans un ou plusieurs fichiers. Vous pouvez rechercher et remplacer de
nombreux types d’éléments (URL, polices, couleurs, texte et commandes) créés dans le panneau
Historique.
Vous pouvez utiliser la fonction de traitement par lots pour convertir des groupes entiers de fichiers
image dans d’autres formats, ou pour modifier leur palette de couleurs. Le traitement par lots
permet d’appliquer des paramètres d’optimisation personnalisés à des groupes de fichiers. Vous
pouvez également redéfinir la taille d’un groupe de fichiers, le traitement par lots étant alors un outil
idéal pour la création de vignettes.
Le panneau Historique permet de créer des commandes représentant des raccourcis vers des
fonctions couramment utilisées, ou un script destiné à accomplir une série d’actions complexes.
Comme Fireworks reconnaît et exécute le code JavaScript, les utilisateurs chevronnés peuvent
automatiser des tâches très complexes en programmant des séquences de code JavaScript qui
pourront ensuite être exécutées par Fireworks. Vous pouvez contrôler pratiquement toutes les
commandes et fonctions de Fireworks en JavaScript, à l’aide de commandes JavaScript spéciales
que Fireworks peut interpréter.
Le programme Extension Manager permet d’importer, d’installer et de supprimer des extensions
dans les applications Macromedia pour étendre les capacités de Fireworks.
Recherche et remplacement
La commande Rechercher et remplacer permet de rechercher des éléments (texte, URL, police ou
couleur) dans un document et de les remplacer par un élément du même type. Cette recherche /
remplacement peut être effectuée dans le document actif ou dans un groupe de fichiers.
413
Lorsque vous utilisez la commande Rechercher et remplacer, Fireworks peut enregistrer la liste des
modifications effectuées dans le journal du projet. La commande Rechercher et remplacer ne
fonctionne qu’avec des fichiers PNG de Fireworks ou des fichiers contenant des objets vectoriels,
tels que les fichiers FreeHand, CorelDRAW non compressés et Illustrator.
Rechercher, option
Rechercher, option
Panneau Rechercher et remplacer
Pour sélectionner la source de recherche :
1
Ouvrez le document.
2
Pour ouvrir le panneau Rechercher et Remplacer, procédez de l’une des manières suivantes :
• Choisissez Fenêtre > Rechercher et remplacer.
• Choisissez Edition > Rechercher et remplacer.
• Appuyez sur CTRL+F (Windows) ou sur Commande+F (Macintosh).
3
Dans le premier menu déroulant Rechercher, choisissez la source dans laquelle la recherche doit
s’effectuer.
Rechercher dans la sélection n’effectue de recherche / remplacement que parmi les éléments
actuellement sélectionnés (objets et texte).
Rechercher dans l’image n’effectue
de recherche / remplacement que dans l’image active.
Rechercher dans le document n’effectue de
recherche / remplacement que dans le document
actif.
Rechercher dans le journal du projet effectue une recherche / remplacement dans tous les
fichiers qui figurent dans la liste du journal du projet. Pour plus d’informations, voir « Gestion
des recherches à l’aide du journal du projet » à la page 427.
Rechercher dans les fichiers effectue une recherche / remplacement parmi plusieurs fichiers. Si
cette option n’est pas déjà activée dans le menu déroulant Rechercher, sa sélection ouvre une
boîte de dialogue dans laquelle vous pouvez indiquer les fichiers à rechercher. Si l’option
Rechercher dans les fichiers est déjà sélectionnée dans le menu déroulant Rechercher, indiquez
les fichiers à rechercher après avoir lancé la recherche en cliquant sur Rechercher, Remplacer ou
Remplacer tout.
4
Dans le second menu déroulant Rechercher, choisissez l’attribut à rechercher. Les options du
panneau changent en fonction de votre sélection.
5
Définissez les options de l’attribut de recherche sélectionné.
414 Chapitre 17
6
Choisissez le type de recherche et remplacement désiré :
La fonction Recherche détecte la première occurrence de l’élément. Les éléments trouvés sont
affichés comme sélectionnés dans le document.
La fonction Remplacement remplace les éléments trouvés par le contenu indiqué dans le
champ Remplacer par.
Le bouton Remplacer tout permet de remplacer en une seule fois tous les éléments trouvés par
leur élément de remplacement.
Remarque : Lorsque des objets sont remplacés dans plusieurs fichiers, ces fichiers sont automatiquement
enregistrés ; ce type de remplacement n’est donc pas réversible à l’aide de la commande Edition > Annuler. Pour
plus d’informations, voir « Recherche et remplacement durant un traitement par lots » à la page 423.
Définition des options d’une recherche / remplacement dans plusieurs fichiers
Lorsque vous effectuez une recherche / remplacement dans plusieurs fichiers, vous pouvez
indiquer comment les fichiers ouverts doivent être traités après la recherche.
Pour enregistrer, fermer et sauvegarder chaque fichier après la recherche :
1
Choisissez Options de remplacement dans le menu contextuel Options du panneau
Rechercher et remplacer.
2
Choisissez Enregistrer et fermer les fichiers pour enregistrer et fermer les fichiers après la
recherche / remplacement.
Seuls les documents originaux déjà actifs restent ouverts.
Remarque : Si l’option Enregistrer et fermer les fichiers est désactivée, et si vous traitez en une seule fois un
grand nombre de fichiers, Fireworks peut se trouver à court de mémoire et interrompre le processus de
traitement par lots.
3
Choisissez l’une des options suivantes dans le menu contextuel Sauvegarder les fichiers
originaux :
Pas de copies effectue
une recherche / remplacement sans sauvegarder la version originale des
fichiers. Le fichier modifié remplace alors le fichier original.
Ecraser les copies existantes crée et ne conserve qu’une seule copie de sauvegarde de la version
originale de chaque fichier modifié par la recherche / remplacement. Si vous effectuez par la
suite de nouvelles opérations de recherche / remplacement sur les mêmes fichiers, le fichier
original précédent remplacera toujours la copie de sauvegarde de sa version antérieure. Les
copies de sauvegarde sont conservées dans un sous-dossier appelé Original Files.
Automatisation des tâches répétitives 415
Sauvegardes incrémentielles conserve toutes les copies de sauvegarde des fichiers modifiés au cours
d’opérations de recherche / remplacements. Les fichiers originaux sont alors déplacés dans le sousdossier Original Files au sein de leur dossier actuel, et un chiffre incrémentiel est ajouté à la suite de
leur nom. Si vous effectuez par la suite de nouvelles opérations de recherche / remplacement sur les
mêmes fichiers, le fichier original précédent sera copié dans le dossier Original Files, et le chiffre
suivant sera ajouté à son nom de fichier. Par exemple, la copie de sécurité d’un fichier nommé
Dessin.png sera nommée Dessin-1.png lors de la première opération de recherche / remplacement.
La seconde fois, le fichier de sauvegarde sera renommé Dessin-2.png, etc.
4
Cliquez sur OK.
Recherche et remplacement de texte
Fireworks permet de rechercher et remplacer facilement des mots dans un document. Vous
disposez de plusieurs options permettant d’affiner votre recherche en respectant la casse ou en
faisant porter la recherche sur tout ou partie d’un mot.
Pour chercher et remplacer des mots, des phrases ou toute autre chaîne texte :
1
Choisissez l’option Rechercher du texte dans le second menu déroulant du panneau
Rechercher et remplacer.
2
Dans la zone Rechercher, indiquez le texte à rechercher.
3
Indiquez ensuite le texte de remplacement dans la zone Remplacer par.
4
Vous pouvez activer des options permettant d’affiner la recherche :
Mot entier permet de rechercher le texte uniquement sous la forme du mot tel qu’il apparaît
dans le champ de recherche, et non pas comme partie de mot.
Respecter la casse permet
de faire la distinction entre les lettres en majuscules et en
minuscules pendant la recherche du texte.
Caractères génériques permet
d’effectuer une recherche conditionnelle sur une partie de mot
ou de nombre.
Recherche et remplacement de polices de caractères
Vous pouvez également chercher et remplacer rapidement des polices de caractères dans des
documents Fireworks.
416 Chapitre 17
Pour chercher et remplacer des polices de caractères dans des documents Fireworks :
1
Choisissez l’option Rechercher une police dans le second menu déroulant du panneau
Rechercher et remplacer.
2
Choisissez la police de caractères et le style à rechercher.
Conseil : Vous pouvez affiner la recherche en définissant des tailles de police minimum et maximum.
3
Indiquez la police, le style et la taille de remplacement dans la zone Remplacer par.
Recherche et remplacement de couleurs
Vous pouvez rechercher toutes les occurrences d’une couleur dans vos documents Fireworks et les
remplacer par une autre couleur.
Pour chercher et remplacer une couleur dans des documents Fireworks :
1
Choisissez l’option Rechercher une couleur dans le second menu déroulant du panneau
Rechercher et remplacer.
2
Dans le menu contextuel Appliquer à, choisissez un élément pour indiquer comment les
couleurs trouvées doivent être appliquées :
L’option Trames et traits permet d’effectuer une recherche / remplacement sur les couleurs des
trames et des traits à la fois.
L’option Toutes les propriétés permet d’effectuer une recherche / remplacement sur les
couleurs des trames, des traits et des effets à la fois.
Automatisation des tâches répétitives 417
L’option Trames permet d’effectuer une recherche / remplacement sur une couleur de trame, à
l’exception des trames à motifs.
L’option Traits permet d’effectuer une recherche / remplacement sur les couleurs des traits.
L’option Effets permet d’effectuer une recherche / remplacement sur les couleurs des effets.
Recherche et remplacement d’URL
Outre les mots, polices et couleurs vous pouvez également chercher et remplacer des URL
affectées à des éléments interactifs dans vos documents Fireworks.
Pour chercher et remplacer des adresses URL affectées à des objets Web :
1
Choisissez l’option Rechercher une URL dans le second menu déroulant du panneau
Rechercher et remplacer.
2
Dans la zone Rechercher, indiquez l’URL à rechercher.
3
Indiquez ensuite l’URL de remplacement dans la zone Remplacer par.
4
Vous pouvez activer des options permettant d’affiner la recherche :
Mot entier permet de rechercher le texte uniquement sous la forme du mot tel qu’il apparaît
dans le champ de recherche, et non pas comme partie de mot.
Respecter la casse permet
de faire la distinction entre les lettres en majuscules et en
minuscules pendant la recherche du texte.
Caractères génériques permet
d’effectuer une recherche conditionnelle sur une partie de mot
ou de nombre.
Recherche et remplacement de couleurs non Websafe
Une couleur non Websafe est une couleur qui ne fait pas partie de la palette Web216, en d’autres
termes, qui n’est pas utilisée à la fois sur les plates-formes Macintosh et Windows. Pour plus
d’informations sur les couleurs non Websafe, voir « Optimisation des images GIF, PNG, TIFF,
BMP et PICT » à la page 342.
418 Chapitre 17
Pour chercher toutes les couleurs non Websafe et les remplacer par des couleurs Websafe :
Choisissez l’option Rechercher non Web216 dans le second menu déroulant du panneau
Rechercher et remplacer.
Remarque : L’option Rechercher non Web216 ne permet pas d’effectuer une recherche / remplacement sur les
pixels des objets image bitmap.
Traitement par lots
Le traitement par lots est très utile pour convertir automatiquement un groupe de fichiers
graphiques. Les options de traitement par lots proposées sont les suivantes :
• Conversion d’une sélection de fichiers dans un autre format.
• Conversion d’une sélection de fichiers dans le même format avec d’autres paramètres
d’optimisation.
•
•
•
•
Mise à l’échelle des fichiers exportés.
Recherche et remplacement de texte, de couleurs, d’URL, de polices et de couleurs non Web216.
Changement de nom de groupes de fichiers par l’ajout d’un préfixe ou suffixe commun.
Exécution de commandes sur une sélection de fichiers.
Pour effectuer un traitement par lots sur des fichiers :
1
Choisissez Fichier > Traitement par lots.
Automatisation des tâches répétitives 419
2
Choisissez les fichiers à traiter. Sélectionnez des fichiers dans différents dossiers ou par groupe
portant la même extension de fichier.
Ajouter ajoute les fichiers et dossiers sélectionnés à la liste de fichiers à traiter dans le même lot.
Si vous sélectionnez un dossier, tous les fichiers valides et lisibles de ce dossier sont ajoutés au
processus de traitement par lots.
Remarque : Les fichiers valides sont les fichiers qui existent vraiment, c’est-à-dire qui ont été créés, nommés et
enregistrés. Si la dernière version d’un fichier n’a pas été enregistrée, il vous est demandé de le faire pour permettre
au processus de traitement par lots de continuer. Si vous n’enregistrez pas le fichier, le traitement par lots est
interrompu.
Ajouter tout ajoute
tous les fichiers valides du dossier sélectionné à la liste de fichiers à traiter
dans le même lot.
Supprimer supprime
3
les fichiers sélectionnés de la liste de fichiers à traiter dans le même lot.
Activez l’option Inclure les fichiers de projet pour ajouter tous les fichiers figurant dans le
journal du projet.
Tous ces fichiers seront inclus dans le traitement, bien qu’ils n’apparaissent pas individuellement
dans la liste des fichiers à traiter.
4
Activez l’option Inclure les fichiers courants pour ajouter les fichiers ouverts dans le
programme.
Tous ces fichiers seront inclus dans le traitement, bien qu’ils n’apparaissent pas individuellement
dans la liste des fichiers à traiter.
5
Cliquez sur Suivant, puis effectuez une ou les deux opérations suivantes :
• Pour ajouter une tâche au traitement par lots, sélectionnez-la dans la liste Options de
traitement par lots et cliquez sur Ajouter. Chaque tâche ne peut être ajoutée qu’une fois. Pour
plus d’informations sur l’ajout des commandes, voir « Exécution de commandes à l’aide d’un
traitement par lots » à la page 424.
• Pour modifier l’ordonnancement de la liste, sélectionnez la tâche dans la liste Inclure dans le
lot, et cliquez sur les boutons fléchés.
420 Chapitre 17
Remarque : L’ordre dans lequel les tâches apparaissent dans la liste Inclure dans le lot est l’ordre dans lequel elles
seront exécutées durant le traitement par lots, à l’exception de l’exportation qui est toujours effectuée en dernier.
6
Pour voir les options supplémentaires de cette tâche, sélectionnez une tâche dans la liste Inclure
dans le lot.
7
Choisissez les paramètres adaptés à chaque option.
Pour supprimer une tâche du traitement par lots, sélectionnez-la dans la liste Inclure dans le lot
et cliquez sur Supprimer.
8
Cliquez sur Suivant.
9
Choisissez les options relatives à l’enregistrement des fichiers traités :
Même emplacement que le fichier d’origine enregistre chaque fichier dans le même chemin que
le fichier source, en écrasant ce dernier si le nom et le format sont identiques.
Emplacement personnalisé vous
permet de choisir le chemin d’enregistrement des fichiers
traités.
10
Activez la case à cocher Sauvegardes pour utiliser les options de sauvegarde des fichiers
originaux.
Il est toujours conseillé d’effectuer une copie de sauvegarde des fichiers. Pour plus
d’informations, voir « Définition de l’emplacement du dossier de sortie du traitement par lots »
à la page 425.
11
Cliquez sur Enregistrer le script, si vous souhaitez enregistrer les paramètres du traitement par
lots pour les réutiliser plus tard.
Pour plus d’informations, voir « Enregistrement des traitements par lots sous forme de scripts »
à la page 425.
12
Cliquez sur Lot pour exécuter le traitement par lots.
Modification des paramètres d’optimisation à l’aide d’un traitement par lots
Dans la boîte de dialogue Traitement par lots, ajoutez Exporter pour modifier les paramètres
d’optimisation des fichiers.
Automatisation des tâches répétitives 421
Pour définir les paramètres d’exportation à appliquer à un traitement par lots :
1
Choisissez Exporter dans la liste Options de traitement par lots et cliquez sur Ajouter.
2
Dans le menu déroulant Paramètres, choisissez l’une des options ci-dessous et cliquez sur OK :
• Choisissez Utiliser les paramètres de tous les fichiers pour conserver les paramètres
d’exportation de chaque fichier durant le traitement par lots. Par exemple, lors du traitement
par lots d’un dossier contenant des fichiers GIF et JPEG, les fichiers résultants seront toujours
au format GIF ou JPEG, et la palette originale de chaque fichier et son paramétrage de
compression seront utilisés pour l’exportation.
• Choisissez Personnaliser ou cliquez sur le bouton Edition pour modifier les paramètres dans la
boîte de dialogue Aperçu avant exportation.
• Choisissez un paramétrage d’exportation prédéfini, par exemple GIF Web 216 ou JPEG Qualité supérieure. Tous les fichiers seront convertis avec ce paramétrage.
3
Cliquez sur Suivant pour continuer le traitement par lots.
Pour plus d’information sur l’exécution du traitement par lots, voir « Traitement par lots » à la
page 419.
Mise à l’échelle de graphismes à l’aide d’un traitement par lots
Dans la boîte de dialogue Traitement par lots, ajoutez l’option Mise à l’échelle pour modifier la
hauteur et la largeur des images à exporter.
Pour définir les options de mise à l’échelle lors d’un traitement par lots :
1
Choisissez Mise à l’échelle dans la liste Options de traitement par lots et cliquez sur Ajouter.
2
Dans le menu déroulant Mise à l’échelle choisissez une option.
Pas de mise à l’échelle exporte
les fichiers sans modification d’échelle.
Mise à l’échelle avec cette taille permet
une mise à l’échelle des images avec la largeur et la
hauteur spécifiées.
Mise à l’échelle de la zone permet une mise à l’échelle des images qui est proportionnelle à la
largeur et la hauteur maximales spécifiées.
Conseil : Choisissez Mise à l’échelle de la zone pour convertir un groupe d’images en vignettes de taille égale.
Mise à l’échelle avec ce pourcentage modifie
3
la taille des images du pourcentage indiqué.
Cliquez sur Suivant pour continuer le traitement par lots.
Pour plus d’information sur l’exécution du traitement par lots, voir « Traitement par lots » à la
page 419.
422 Chapitre 17
Recherche et remplacement durant un traitement par lots
Dans la boîte de dialogue Traitement par lots, vous pouvez ajouter l’option Rechercher et
remplacer pour chercher et remplacer du texte, des polices, des couleurs ou des URL au sein de
boutons, références ou découpes.
Le remplacement par lots n’est disponible qu’avec les formats de fichiers suivants : PNG
Fireworks, Illustrator, FreeHand et CorelDRAW. Il ne permet pas d’intervenir sur les fichiers GIF
et JPEG.
Pour sélectionner les attributs faisant l’objet de la recherche / remplacement durant un traitement
par lots :
1
Choisissez Rechercher et remplacer dans la liste Options de traitement par lots et cliquez sur
Ajouter.
2
Cliquez sur Edition.
3
Choisissez les types d’attributs à chercher et remplacer dans le menu contextuel Rechercher :
texte, police, URL ou non Web 216.
4
Dans la zone Rechercher, indiquez l’élement à rechercher.
5
Dans la zone Remplacer par indiquez ou choisissez l’élément de remplacement.
Conseil : Pour ajouter les fichiers modifiés au journal du projet afin de les localiser ensuite plus aisément, activez
la case à cocher Mettre à jour le journal du projet.
6
Cliquez sur OK pour enregistrer les paramètres de recherche et remplacement.
7
Cliquez sur Suivant pour continuer le traitement par lots.
Pour plus d’informations sur l’exécution du traitement par lots, voir « Traitement par lots » à la
page 419. Pour plus d’informations sur les options de recherche et remplacement, voir
« Recherche et remplacement » à la page 413.
Modification de noms de fichiers à l’aide d’un traitement par lots
Pour modifier les noms des fichiers à traiter, ajoutez l’option Renommer dans la boîte de dialogue
du traitement par lots.
Automatisation des tâches répétitives 423
Pour définir les options de noms lors d’un traitement par lots :
1
Choisissez Renommer dans la liste Options de traitement par lots et cliquez sur Ajouter.
2
Choisissez une option dans le menu déroulant Renommer.
Nom d’origine conserve
le nom original des fichiers.
Ajouter un préfixe permet d’indiquer un texte à ajouter au début du nom de chaque fichier. Par
exemple, si vous indiquez « nuit_ », le fichier Soleil_levant.gif est renommé
nuit_Soleil_levant.gif lors de son traitement par lots.
Ajouter un suffixe permet d’indiquer un texte à ajouter à la fin du nom de chaque fichier, avant
son extension. Par exemple, si vous indiquez « _jour », le fichier Soleil_levant.gif est renommé
Soleil_levant_jour.gif lors de son traitement par lots.
3
Cliquez sur Suivant pour continuer le traitement par lots.
Pour plus d’informations sur l’exécution du traitement par lots, voir « Traitement par lots » à la
page 419.
Exécution de commandes à l’aide d’un traitement par lots
Pour exécuter des commandes JavaScript sur des fichiers, ajoutez l’option Commandes dans la
boîte de dialogue Traitement par lots.
Pour définir les options de commandes lors d’un traitement par lots :
1
Pour voir les commandes disponibles, cliquez sur le bouton Plus (Windows) ou sur le triangle
(Macintosh) qui apparaissent à côté de l’option Commandes.
2
Pour ajouter une commande au traitement par lots, sélectionnez-la dans la liste et cliquez sur
Ajouter.
Remarque : Ces commandes ne peuvent pas être modifiées.
3
Cliquez sur Suivant pour continuer le traitement par lots.
Pour des informations sur l’exécution du traitement par lots, voir « Traitement par lots » à la
page 419. Pour plus de détails sur la création de commandes, voir « Automatisation des tâches
avec le panneau Historique » à la page 429.
Remarque : Par ailleurs, certaines commandes ne peuvent fonctionner durant un traitement par lots. Choisissez
des commandes pouvant être exécutées dans les documents sans qu’il soit nécessaire qu’un objet ait été
sélectionné.
424 Chapitre 17
Définition de l’emplacement du dossier de sortie du traitement par lots
Après avoir défini toutes les options de traitement dans la boîte de dialogue Traitement par lots,
vous devez choisir les options de sauvegarde de vos fichiers. Vous pouvez effectuer des copies de
sauvegarde des fichiers originaux lors d’un traitement par lots. Les copies de sauvegarde sont
placées dans le dossier de chaque fichier original, dans un sous-dossier appelé Original Files.
Pour effectuer des copies de sauvegarde des fichiers lors d’un traitement par lots :
1
Choissez l’emplacement du dossier de sortie du traitement par lots.
2
Activez la case à cocher Sauvegardes pour définir vos options de sauvegarde.
3
Choisissez le type de sauvegarde des fichiers :
Ecraser les copies existantes remplace
les éventuels fichiers de sauvegarde précédents.
Sauvegardes incrémentielles conserve
une copie de tous les fichiers de sauvegarde. Lors d’un
nouveau traitement par lots, un chiffre incrémentiel est ajouté à la suite du nom de chaque
copie de sauvegarde.
Remarque : Si l’option Sauvegardes n’est pas activée, le traitement par lots écrasera le fichier original si le fichier
exporté porte le même nom et est enregistré dans le même format. Toutefois, si le traitement par lots comporte
un changement de format de fichier, le fichier original ne sera ni déplacé ni effacé.
4
Cliquez sur Lot pour exécuter le traitement par lots, ou sur Précédent pour revenir à la boîte de
dialogue précédente du traitement par lots.
Enregistrement des traitements par lots sous forme de scripts
Vous pouvez enregistrer les paramètres de traitement par lots sous la forme de script ou de
commande pour recréer ensuite facilement le processus de traitement par lots. Après avoir défini
toutes les options de traitement dans la boîte de dialogue Traitement par lots, vous devez choisir
les options de sauvegarde de vos fichiers.
Pour créer un script de traitement par lots :
1
Cliquez sur Enregistrer le script.
2
Indiquez le nom et la destination du script.
Automatisation des tâches répétitives 425
3
Cliquez sur Enregistrer.
Remarque : Si vous enregistrez votre script dans le dossier Commands de votre disque dur, il sera ajouté ensuite
dans le menu Commandes de Fireworks. L’emplacement exact du dossier Commands varie en fonction du
système d’exploitation. Pour plus d’informations, voir « Utilisation des fichiers de configuration » à la page 439.
Pour exécuter un script de traitement par lots :
1
Utilisez l’une des méthodes suivantes :
• Dans Fireworks, choisissez Commandes > Exécuter un script.
• En dehors de Fireworks, double-cliquez sur le nom de fichier du script enregistré sur le disque
dur.
2
Sélectionnez le script, puis cliquez sur Ouvrir.
3
Choisissez les fichiers à traiter à l’aide du script :
Fichiers actuellement ouverts traite
tous les documents ouverts.
Journal du projet (tous les fichiers) traite
tous les fichiers qui figurent dans le panneau Journal
du projet.
Journal du projet (fichiers sélectionnés) traite
tous les fichiers qui sont actuellement
sélectionnés dans le panneau Journal du projet.
Personnalisé permet
de choisir les fichiers à traiter.
Remarque : Cliquez sur le bouton des ellipses (...), à côté du menu déroulant Fichiers à traiter, puis sélectionnez
les fichiers à traiter.
4
Cliquez sur OK.
Pour plus d’informations sur le choix des fichiers, voir « Traitement par lots » à la page 419.
Exécution de scripts par glisser-déposer
Si vous êtes amené à répéter fréquemment un traitement par lots, enregistrez-le sous forme de
script, puis tirez l’icône de ce script depuis le répertoire de votre disque dur sur l’icône de
Fireworks pour exécuter le traitement par lots. L’application Fireworks démarre et exécute ce
script.
Pour exécuter un script par glisser-déposer :
1
Enregistrer un script.
2
Utilisez l’une des méthodes suivantes :
• Tirez l’icône du fichier du script sur l’icône du bureau Fireworks.
• Faites glisser l’icône du fichier du script dans un document Fireworks ouvert.
Remarque : Si vous tirez plusieurs fichiers de scripts et plusieurs fichiers graphiques sur l’icône de Fireworks, les
fichiers graphiques seront traités plusieurs fois, une fois pour chaque script.
426 Chapitre 17
Utilisation du journal du projet
Le journal du projet permet de suivre et de contrôler les modifications apportées à plusieurs
fichiers à l’aide de la commande Rechercher et remplacer ou d’un traitement par lots. Les noms de
tous les documents modifiés par l’intermédiaire de la commande Rechercher et remplacer sont
enregistrés dans le journal du projet.
Gestion des recherches à l’aide du journal du projet
Le journal du projet permet de naviguer parmi les fichiers sélectionnés, de les exporter sur la base
de leurs derniers paramètres d’exportation, ou de sélectionner des fichiers devant faire l’objet d’un
traitement par lots. Le journal du projet enregistre les noms de tous les documents modifiés et
affiche, pour chaque document, l’image qui a été modifiée, ainsi que la date et l’heure de la
modification.
Vous pouvez ajouter manuellement des fichiers au journal du projet pour garder trace de ceux que
vous désirez modifier fréquemment.
Pour ajouter manuellement des fichiers au journal du projet :
1
Choisissez Fenêtre > Journal du projet.
2
Dans le menu contextuel Options du panneau Journal du projet choisissez Ajouter les fichiers
au journal
3
Naviguez jusqu’au fichier à ajouter.
4
Sélectionnez le fichier.
5
Cliquez sur Ouvrir.
Pour ouvrir les fichiers qui figurent dans les journal du projet :
• Double-cliquez sur le fichier.
• Sélectionnez le fichier, puis cliquez sur Ouvrir.
Pour supprimer une entrée du journal du projet :
Sélectionnez une ou plusieurs entrées, et choisissez Effacer la sélection dans le menu contextuel
Options du panneau Journal du projet.
Automatisation des tâches répétitives 427
Pour exporter un fichier figurant dans le journal du projet avec ses derniers paramètres d’exportation :
Sélectionnez le fichier et choisissez Réexporter.
Affichage et impression du journal du projet
La version la plus récente du journal du projet est enregistrée, au format HTML, sur le disque
dur. L’emplacement du journal du projet varie en fonction du système d’exploitation. Pour plus
d’informations, voir « Utilisation des fichiers de configuration » à la page 439.
Pour visualiser ou imprimer le journal du projet :
Ouvrez le fichier Project_Log.htm dans un navigateur.
Extension de Fireworks
L’extension de Fireworks n’a jamais été aussi facile. Avec Fireworks, vous pouvez créer tout un
ensemble de commandes personnalisées pour accroître les capacités de votre application.
Le programme Extension Manager permet d’installer et de gérer des extensions pour étendre les
capacités de Fireworks. Vous pouvez également créer un code JavaScript personnalisé et l’utiliser
en tant que commande personnalisée dans Fireworks. Les films Flash SWF peuvent être
également utilisés dans Fireworks sous forme de commandes personnalisées. Par ailleurs, le
panneau Historique offre une interface conviviale permettant de créer de commandes
personnalisées à partir d’une série de tâches enregistrées.
Lorsque vous installez une extension ou créez une commande personnalisée, elle apparaît dans le
menu Commande de Fireworks.
Remarque : Lorsqu’elles sont enregistrées sous forme de fichiers SWF dans le dossier Command Panels du disque
dur, les commandes apparaissent sous forme de panneaux dans le menu Fenêtre. Pour plus d’informations, voir
« Création de scripts à l’aide de fichiers Flash SWF » à la page 430.
Utilisation du programme Macromedia Extension Manager
Une extension est un script de commande, une bibliothèque un filtre, un motif ou une texture
pouvant être ajouté à une application Macromedia pour accroître les capacités de cette dernière.
L’application Fireworks est livrée avec Macromedia Extension Manager, un programme qui
permet d’installer, de gérer et de supprimer aisément des extensions. Lors de l’installation,
Fireworks ajoute un ensemble d’extensions par défaut dans le menu Commandes.
Vous pouvez également utiliser Extensions Manager pour créer vos propres extensions et envoyer
ces dernières vers Macromedia Exchange pour Fireworks. A travers Exchange, vous pouvez
partager vos extensions avec d’autres utilisateurs Fireworks. Pour en savoir plus sur Macromedia
Exchange, consultez le site Web http://www.macromedia.com/fr/exchange/.
Les extensions Fireworks se trouvent dans le sous-dossier Configuration/Commands du dossier de
l’application Fireworks, sur le disque dur. Pour plus d’informations sur l’emplacement du dossier
Commands, voir « Utilisation des fichiers de configuration » à la page 439.
Remarque : Les commandes utilisateurs telles que celles enregistrées à partir du panneau Historique et certaines
extensions tierces sont gérées différemment. Elle sont stockées dans le sous-dossier du dossier de configuration
de chaque utilisateur. Pour plus d’informations, voir « Utilisation des fichiers de configuration » à la page 439.
Pour plus d’informations sur l’utilisation de Extension Manager, voir Utilisation de Macromedia
Extension Manager, accessible à partir du menu d’aide Extension Manager.
428 Chapitre 17
Automatisation des tâches avec le panneau Historique
Le panneau Historique enregistre la liste de toutes vos actions dans Fireworks. Chaque étape est
affichée sur une ligne distincte du panneau Historique dans l’ordre chronologique inverse (en
commençant par la plus récente). Par défaut, le panneau conserve la trace des vingt dernières
étapes. Vous pouvez cependant modifier cette valeur à tout moment.
Création de commandes
Vous pouvez enregistrer des groupes d’étapes du panneau Historique sous forme de commandes
réutilisables. Ces commandes peuvent être exécutées sur n’importe quel document Fireworks.
Elles ne sont pas spécifiques à un type de document.
Les commandes mémorisées sont conservées dans des fichiers JSF enregistrés dans le dossier de
vos commandes utilisateur spécifiques. L’emplacement exact de ce dossier varie en fonction du
système d’exploitation. Pour plus d’informations, voir « Utilisation des fichiers de configuration »
à la page 439.
Pour enregistrer des étapes sous forme de commandes :
1
Choisissez les étapes à enregistrer sous forme de commandes :
• Cliquez sur une étape, puis maintenez la touche MAJ enfoncée avant de cliquer sur une autre
étape pour sélectionner toute une sélection d’étapes à enregistrer comme commande.
• Appuyez sur la touche CTRL (Windows) ou Commande (Macintosh), puis cliquez pour
sélectionner des étapes non adjacentes.
2
Cliquez sur le bouton Enregistrer les étapes sous forme de commande, en bas du panneau
Historique.
3
Indiquez le nom de la commande, et cliquez sur OK.
La commande apparaît dans le menu Commandes.
Pour annuler ou répéter des étapes à l’aide du panneau Historique :
• Déplacez le curseur d’annulation vers le haut du panneau jusqu’à la dernière étape à annuler ou
répéter.
• Cliquez sur le trajet du curseur dans la partie gauche du panneau Historique.
Remarque : Les étapes annulées restent dans le panneau Historique, mais elles apparaissent en grisé.
Pour modifier le nombre d’étapes mémorisées par le panneau Historique :
1
Choisissez Edition > Préférences.
Remarque : Sous Mac OS X, choisissez Fireworks > Préférences.
2
Indiquez le nombre d’étapes que vous désirez que le panneau Historique mémorise.
Remarque : Plus ce nombre d’étapes sera élevé, plus la mémoire vive de l’ordinateur sera sollicitée.
Pour effacer toutes les étapes qui apparaissent dans le panneau Historique :
Choisissez Effacer l’historique dans le menu contextuel des options du panneau Historique
pour libérer de la mémoire vive et de l’espace disque.
Remarque : Si vous effacez des étapes du panneau Historique, vous ne pourrez plus les annuler.
Automatisation des tâches répétitives 429
Exécution des commandes
Vous pouvez à tout moment exécuter des commandes ou une sélection d’actions enregistrées à
partir du panneau Historique.
Pour reproduire une commande enregistrée :
1
Si nécessaire, choisissez un ou plusieurs objets.
2
Choisissez la commande voulue dans le menu Commandes.
Pour reproduire une sélection d’étapes :
1
Sélectionnez un ou plusieurs objets.
2
Sélectionnez les étapes désirées dans le panneau Historique.
3
Cliquez sur le bouton Réexécuter, en bas du panneau Historique.
Les étapes marquées d’un X ne peuvent pas être répétées ni reproduites. Des lignes de
séparation indiquent qu’un objet différent a été sélectionné. Les commandes créées à partir
d’étapes situées de part et d’autre d’une ligne de séparation peuvent donner des résultats
imprévisibles.
Pour appliquer les étapes sélectionnées à des objets situés dans de nombreux documents :
1
Sélectionnez une plage d’étapes.
2
Cliquez sur le bouton Copier les étapes dans le Presse-papiers, en bas du panneau Historisque.
3
Sélectionnez un ou plusieurs objets dans un document Fireworks.
4
Choisissez Edition > Coller.
Pour répéter la dernière action :
Choisissez Edition > Répéter le script de commandes.
Exécution de scripts à l’aide de JavaScript
Vous pouvez réduire l’aspect fastidieux de certaines tâches répétitives en créant dans un éditeur de
texte votre propre code JavaScript à faire exécuter dans Fireworks. Vous pouvez contrôler
pratiquement toutes les commandes et fonctions de Fireworks en JavaScript.
Macromedia Dreamweaver utilise également le JavaScript. Vous pouvez donc écrire des scripts
permettant de contrôler Fireworks à partir de Dreamweaver.
Pour consulter la documentation sur l’API JavaScript API, voir Extending Fireworks MX,
disponible sous forme de fichier PDF sur le CD d’installation de Macromedia Fireworks MX.
Création de scripts à l’aide de fichiers Flash SWF
A l’aide de Flash, vous pouvez créer des films SWF contenant du code JavaScript. Ces films
peuvent être utilisés comme des commandes Fireworks accessibles à partir du menu Commandes
de Fireworks.
Vous pouvez même créer un film SWF et l’utiliser en tant que panneau Fireworks, accessible à
partir du menu Fenêtre. Dans Fireworks, le panneau Aligner est un exemple de film Flash importé
sous la forme de panneau.
430 Chapitre 17
Les films SWF utilisés comme commandes sont mémorisés dans le dossier Commandes de votre
disque dur, alors que ceux utilisés comme panneaux sont mémorisés dans le dossier Command
Panels. L’emplacement exact de ces dossiers varie en fonction du système d’exploitation et selon
que vos commandes personnalisées sont utilisées par vous uniquement ou accessibles à tous les
utilisateurs connectés au système. Pour plus d’informations sur l’emplacement du dossier, voir
« Utilisation des fichiers de configuration » à la page 439.
Pour des instructions détaillées sur la création de commandes à partir de films Flash SWF, voir
Extending Fireworks MX, disponible sous forme de fichier PDF sur le CD d’installation de
Macromedia Fireworks MX.
Gestion des commandes
Vous pouvez renommer ou supprimer des commandes apparaissant dans le menu Commandes.
Dans Fireworks, utilisez l’option Gérer les commandes enregistrées pour renommer et supprimer
les commandes que vous créez. Pour gérer les autres commandes et extensions installées à l’aide de
Fireworks ou celles que vous avez téléchargées, puis installées à partir du site Web Macromedia
Exchange, utilisez Extension Manager.
Pour renommer une commande personnalisée :
1
Choisissez Commandes > Gérer les commandes enregistrées...
2
Sélectionnez la commande désirée.
3
Cliquez sur Renommer, tapez un nouveau nom, puis cliquez sur OK.
Pour supprimer une commande personnalisée, exécutez l’une des actions suivantes :
• Dans Fireworks, choisissez Commandes > Gérer les commandes enregistrées. Sélectionnez
ensuite la commande, puis cliquez sur Supprimer.
• Dans le dossier Commands du disque dur, supprimez le fichier JSF associé à la commande.
L’emplacement exact de ce dossier varie en fonction du système d’exploitation. Pour plus
d’informations, voir « Utilisation des fichiers de configuration » à la page 439.
Pour renommer ou supprimer une commande fournie avec Fireworks ou téléchargée à partir de
Macromedia Exchange :
Choisissez Commande > Gérer les extensions.
La fenêtre Extension Manager s’affiche. Pour plus d’informations sur la gestion des extensions,
voir l’aide du programme Extension Manager.
Modification ou personnalisation d’un script de commandes
Les scripts de commandes sont enregistrés en JavaScript. Si vous maîtrisez bien le langage
JavaScript, vous pouvez les ouvrir et les modifier dans un éditeur de texte tel que le Bloc-notes de
Windows ou dans SimpleText sur le Macintosh.
Pour modifier une commande à l’aide de JavaScript :
1
A partir du bureau, localisez le dossier Commands ou Command Panels approprié sur le
disque dur.
Automatisation des tâches répétitives 431
Remarque : L’emplacement exact de ces dossiers varie d’un système à l’autre et selon que la commande est
accessible à votre profil utilisateur uniquement ou à tous les utilisateurs. Pour plus d’informations, voir
« Utilisation des fichiers de configuration » à la page 439.
2
Ouvrez le fichier script désiré dans un éditeur de texte et modifiez le code JavaScript.
3
Enregistrez et fermez le fichier script.
Pour modifier les actions sélectionnées dans le panneau Historique à l’aide de JavaScript :
1
Dans Fireworks, sélectionnez une plage d’étapes dans le panneau Historique.
2
Cliquez sur le bouton Copier les étapes dans le Presse-papiers, en bas du panneau Historisque.
3
Créez un nouveau document dans l’éditeur de texte.
4
Collez les étapes dans le nouveau document.
5
Modifiez les étapes.
6
Enregistrez et fermez le fichier script.
7
Copiez le fichier script dans le dossier Commands du disque dur.
Remarque : L’emplacement exact de ce dossier varie d’un système à l’autre et selon que la commande est
accessible à votre profil utilisateur uniquement ou à tous les utilisateurs. Pour plus d’informations, voir
« Utilisation des fichiers de configuration » à la page 439.
Au prochain démarrage de Fireworks, la nouvelle commande apparaît dans le menu
Commandes.
432 Chapitre 17
CHAPITRE 18
Préférences et raccourcis clavier
Les préférences Macromedia Fireworks permettent de contrôler la présentation générale de
l’interface utilisateur, ainsi que la modification et l’apparence des dossiers. En outre, Fireworks
vous permet de personnaliser les raccourcis clavier. Cela signifie que vous pouvez personnaliser
vos raccourcis clavier et les utiliser dans tous vos programmes favoris.
Définition des préférences
Les préférences de Fireworks permettent de contrôler la présentation génétale de l’interface
utilisateur, ainsi que les options associées à certaines fonctions spécifiques telles que les couleurs
par défaut, les options des outils, l’emplacement des dossiers, et la conversion des fichiers.
Pour définir vos préférences :
1
Choisissez Edition > Préférences.
Remarque : Sous Mac OS X, choisissez Fireworks > Préférences.
2
Sélectionnez le groupe de préférences que vous souhaitez modifier : Générales, Lancer et
Modifier, Dossiers ou Importer.
3
Effectuez les modifications requises, puis cliquez sur OK.
Préférences générales
Les options ci-dessous apparaissent dans l’onglet des préférences générales :
Nombre max. d’actions annulées permet de sélectionner entre 0 et 100 niveaux d’annulation. Ce
paramètre s’applique à la fois à la commande Edition > Annuler et au panneau Historique. Plus ce
nombre est élevé plus la quantité de mémoire utilisée par Fireworks augmente. Vous devez
redémarrer Fireworks pour que la modification de ce paramètre prenne effet.
Couleurs par défaut définit les couleurs par défaut utilisées pour les traits de pinceau, les trames et
la surbrillance des trajets. Les options Trait et trame ne modifient pas automatiquement les
couleurs affichées dans les cases couleurs du panneau Outils. Elles permettent de modifier les
couleurs par défaut définies par le bouton Définir trait et trame par défaut dans le panneau
Outils.
Interpolation permet de choisir l’une des quatre méthodes de mise à l’échelle pouvant être utilisées
par Fireworks pour interpoler les pixels lors des mises à l’échelle d’images.
• L’interpolation bicubique permet d’obtenir les résultats les plus nets et de la meilleure qualité
dans la plupart des cas, et est par conséquent sélectionné par défaut.
433
• L’interpolation bilinéaire permet d’obtenir des résultats plus nets que le mode Adouci, mais
moins nets que le mode Bicubique.
• L’interpolation adoucie, qui était utilisée par Fireworks 1, produit un léger flou et élimine les
détails nets. Cette méthode est utile lorsque les autres produisent des résultats indésirables.
• L’interpolation au plus proche produit des bords dentelés avec des contrastes élevés et pas de
flou. L’effet obtenu ressemble à une image grossie ou réduite avec l’outil Zoom.
Espace de travail : Afficher les icônes des onglets est
désélectionnée par défaut. Cette option
permet d’afficher ou de masquer les icônes sur les onglets de panneau qui étaient visibles dans les
précédentes versions de Fireworks. Elle affecte également l’affichage du Mini-Launcher situé en
bas de la fenêtre du document.
Enregistrement des fichiers : Ajouter des icônes d’aperçu (Macintosh uniquement) permet
d’afficher ou de masquer les vignettes des fichiers PNG Fireworks présents sur le disque dur.
Lorsque cette option est désactivée, Fireworks affiche l’icône standard des fichiers PNG. Cette
option prend effet après l’enregistrement du fichier.
Préférences d’édition
Les options d’édition permettent de spécifier des préférences pour la forme du pointeur et d’afficher
des indicateurs visuels des objets bitmap.
Curseurs précis permet
de remplacer les pointeurs des différents outils par un pointeur en croix.
Supprimer les objets pendant le recadrage supprime
de façon définitive les pixels ou les objets
situés en dehors de la zone de sélection lorsque vous choisissez Edition > Recadrer le document ou
Modification > Taille du document.
Curseurs de peinture et de taille de trait s’applique aux pointeurs des outils Pinceau, Gomme,
Flou, Accentuer, Révélateur, Brûlure et Tache et permet d’obtenir un curseur dont la taille et la
forme correspondent à ce que vous allez dessiner ou effacer. Pour certains pinceaux larges à
plusieurs pointes, le curseur prend par défaut la forme d’une croix. Lorsque cette option et la
préférence Curseurs précis sont désactivées, les pointeurs des différents outils sont affichés.
Afficher la bordure rayée place
la bordure rayée standard autour du document lorsque vous
travaillez sur des objets bitmap (mode bitmap).
Afficher l’aperçu de la plume fournit un aperçu du prochain segment de trajet qui sera créé lors du
clic sur l’outil Plume.
Afficher les points unis affiche
kes points sélectionnées en creux ; les points désélectionnés sont
unis.
Désactiver les « bords » désactive
automatiquement l’option Masquer les bords lorsque la
sélection change.
Choisir la distance permet de spécifier la distance à partir de laquelle un objet est sélectionné par
le pointeur. Cette distance doit être comprise entre 1 et 10 pixels.
Distance d’accrochage permet de spécifier à partir de quelle distance l’objet que vous approchez
doit s’accrocher à la grille ou au repère. L’option Distance d’accrochage fonctionne lorsque
l’option Accrocher à la grille ou Accrocher aux repères est activée. Cette distance doit être
comprise entre 1 et 10 pixels.
434 Chapitre 18
Préférences Lancer et Modifier
En définissant les préférences Lancer et Modifier, vous pouvez contrôler la manière dont des
applications externes telles que Macromedia Flash, Macromedia Director et Microsoft FrontPage,
lancent et modifient des graphismes dans Fireworks.
Dans la plupart des cas, Fireworks tente automatiquement de localiser le fichier source PNG associé
au graphisme. S’il ne parvient pas à le localiser, Fireworks utilise les préférences Lancer et Modifier
que vous avez définies pour déterminer la manière dont il localisera le fichier source PNG.
Remarque : L’application Macromedia Flash constitue une exception. Lorsque vous lancez et modifiez des
graphismes dans Flash, Fireworks utilise toujours les préférences que vous avez définies dans la section Lancer et
Modifier de la boîte de dialogue Préférences.
Modification à partir d’une autre application détermine si le fichier PNG d’origine s’ouvre lorsque
vous utilisez Fireworks pour modifier des images à partir d’autres applications.
Lors de l’optimisation d’un document à partir d’une application externe détermine si le fichier
PNG d’origine s’ouvre lorsque vous utilisez Fireworks pour optimiser une image.
Remarque : Cette préférence ne s’applique pas à Director, qui ouvre et optimise automatiquement une image sans
demander de spécifier le fichier source PNG, même si cette préférence est définie différemment dans Fireworks.
Pour plus d’informations sur la manipulation des images Fireworks dans Flash, voir « Utilisation de
Macromedia Flash MX » à la page 388. Pour plus d’informations sur la manipulation d’images
Fireworks dans Director, voir « Utilisation de Macromedia Director » à la page 397. Pour plus
d’informations sur la manipulation d’images Fireworks dans FrontPage, voir « Utilisation de
Microsoft FrontPage » à la page 403.
Remarque : Macromedia Dreamweaver gère différemment les péférences Lancer et Modifier. Dreamweaver ouvre
systématiquement le fichier source PNG, même si les préférences Lancer et Modifier ont été définies différemment
dans Fireworks. Si aucune Design Note (note de conception) n’est présente ou si le chemin d’accès au fichier
source PNG est rompu, Dreamweaver vous demande systématiquement de localiser le fichier source PNG. Pour
plus d’informations sur la manipulation d’images et d’éléments interactifs Fireworks dans Dreamweaver, voir
« Utilisation de Macromedia Dreamweaver MX » à la page 373.
Préférences de l’onglet Dossiers
Les préférences de l’onglet Dossiers permettent d’accéder aux plug-ins Photoshop
supplémentaires, aux fichiers de texture et aux fichiers de motifs en provenance de sources
externes. De même, sous Mac OS 9.x, vous pouvez spécifier l’emplacement des fichiers
temporaires de Fireworks.
Autres (Plug-ins Photoshop, Textures et motifs) permet
de spécifier les dossiers cibles contenant
les plug-ins, les textures et les motifs. Les dossiers peuvent se trouver dans un autre dossier de
votre disque dur, sur un CD-ROM ou un lecteur externe ou encore sur un réseau.
Les plug-ins Photoshop figurent dans le menu Filtres de Fireworks et dans le menu Ajouter du
Vérificateur de propriétés. Les textures ou motifs enregistrés en tant que fichiers PNG, JPEG et
GIF apparaissent en tant qu’options dans les menus déroulants Motif et Texture du Vérificateur
de propriétés.
Pour plus de détails sur les textures et les motifs, voir « Ajout d’une texture à une trame » à la
page 217.
Disques de travail (Primaire et Secondaire) permet
de spécifier l’emplacement des fichiers cache
temporaires de Fireworks qui peuvent parfois être très volumineux. Si votre ordinateur comporte
plusieurs disques durs, utilisez le disque comportant le plus d’espace libre comme disque de travail
principal. Spécifiez un disque dur secondaire au cas où le disque primaire deviendrait saturé.
Préférences et raccourcis clavier 435
La fonction Disques de travail est disponible uniquement sous le système d’exploitation
Macintosh OS 9. Etant donné que Windows et OS X offre une meilleure gestion de la mémoire,
la fonction Disques de travail n’est pas nécessaire sur ces systèmes.
Préférences d’importation de fichiers Photoshop
Les préférences figurant dans l’onglet Importer permettent de définir des options de conversion
des fichiers Photoshop :
• Vous pouvez convertir des calques en objets ou en nouvelles images.
• Vous pouvez choisir de modifier le texte importé ou de le conserver tel quel.
• Vous pouvez importer un fichier Photoshop sous forme d’objet bitmap lissé.
Pour plus d’informations sur les préférences d’importation, voir « Insertion de graphiques
Photoshop dans Fireworks » à la page 406.
Restauration des préférences
Vous pouvez restaurer les valeurs d’origine des préférences en supprimant le fichier des
préférences. La première fois que vous lancez Fireworks après la suppression du fichier des
préférences, un nouveau fichier de préférences est créé, restaurant ainsi la configuration d’origine
de Fireworks.
Pour restaurer les préférences par défaut :
1
Quittez Fireworks.
2
Localisez le fichier des préférences de Fireworks MX sur le disque dur et supprimez-le.
L’emplacement exact de ce dossier varie d’un système à un autre. Pour plus d’informations, voir
« Localisation du fichier des préférences Fireworks » à la page 442.
3
Redémarrez Fireworks.
Modification des raccourcis clavier
Le programme Fireworks permet d’utiliser des raccourcis clavier pour sélectionner des commandes
de menu, choisir des outils à partir du panneau Outils et accélérer différentes tâches qui n’existent
pas en tant que commandes de menu. L’utilisation des raccourcis accroît votre productivité en vous
permettant d’effectuer rapidement des actions simples. Si vous avez l’habitude d’utiliser les
raccourcis clavier d’applications telles que FreeHand, Illustrator, Photoshop ou de produits
utilisant la norme Macromedia, vous pouvez choisir le jeu de raccourcis de votre choix.
Pour changer le jeu de raccourcis actif :
1
Choisissez Edition > Raccourcis clavier pour ouvrir la boîte de dialogue Raccourcis clavier.
Remarque : Sous Macintosh OS X, choisissez Fireworks > Raccourcis clavier.
436 Chapitre 18
2
Dans le menu déroulant Jeu actif, sélectionner le jeu désiré, puis cliquez sur OK.
Boîte de dialogue Raccourcis clavier
Création de raccourcis personnalisés et secondaires
Vous pouvez créer des raccourcis clavier personnalisés et des raccourcis secondaires si vous
souhaitez exécuter une action de différentes manières. Un jeu de raccourcis personnalisés est
toujours basé sur un jeu prédéfini.
Remarque : Sous Fireworks, les raccourcis d’outils ne doivent pas inclure de touches de modification (Ctrl, Maj, Alt
sous Windows, et Commande, Maj, Option et Contrôle, sous Macintosh). Les raccourcis d’outils consistent en une
lettre ou un chiffre unique.
Pour créer un raccourci personnalisé ou secondaire pour une commande de menu, un outil ou une
action quelconque :
1
Choisissez Edition > Raccourcis clavier pour ouvrir la boîte de dialogue Raccourcis clavier.
2
Cliquez sur le bouton Dupliquer l’ensemble.
3
Entrez le nom de l’ensemble dupliqué dans la boîte de dialogue Ensemble dupliqué, puis
cliquez sur OK.
Le nom du nouveau menu personnalisé est alors affiché dans le champ Ensemble actif.
4
Sélectionnez la catégorie de raccourci voulue à partir de la liste Commandes.
• Choisissez Commandes de menu pour créer un raccourci personnalisé pour toutes les
commandes activées par l’intermédiaire de la barre de menus.
Préférences et raccourcis clavier 437
• Choisissez Outils pour créer un raccourci personnalisé pour l’un des outils du panneau Outils.
• Choisissez Divers pour créer un raccourci personnalisé pour une série d’actions prédéfinies.
Une fois la catégorie sélectionnée, tous les raccourcis possibles pour cette dernière sont affichés
dans la liste Commandes.
5
Sélectionnez la commande dont vous souhaitez modifier le raccourci à partir de la liste
Commandes.
Si le raccourci existe, il s’affiche dans la liste Raccourcis.
6
Cliquez dans le champ Appuyer sur la touche et appuyez sur les touches désirées pour définir le
nouveau raccourci sur le clavier.
Si la combinaision de touches choisies est déjà utilisée par un autre raccourci, un message
d’avertissement apparaît sous le champ Appuyer sur la touche.
7
Utilisez l’une des méthodes suivantes :
• Cliquez sur le bouton Ajouter un nouveau raccourci (+) pour ajouter un raccourci secondaire
dans la liste des raccourcis.
• Cliquez sur le bouton Modifier pour remplacer le raccourci sélectionné.
Suppression de raccourcis personnalisés et d’ensembles de raccourcis
personnalisés
Vous pouvez supprimer n’importe quel raccourci ou ensemble de raccourcis personnalisé.
Pour supprimer un ensemble de raccourcis personnalisés :
1
Choisissez Edition > Raccourcis clavier pour ouvrir la boîte de dialogue Raccourcis clavier.
2
Cliquez sur le bouton Supprimer l’ensemble.
Bouton Supprimer l’ensemble
3
Sélectionnez le raccourci à supprimer à partir de la boîte de dialogue Supprimer l’ensemble.
4
Cliquez sur le bouton Supprimer.
Pour supprimer un raccourci personnalisé :
1
Sélectionnez la commande dans la liste Commandes.
2
Sélectionnez le raccourci personnalisé à supprimer à partir de la liste Raccourcis.
3
Cliquez sur le bouton Supprimer un raccourci sélectionné (-).
438 Chapitre 18
Création d’une feuille de référence pour l’ensemble de raccourcis actif
Une feuille de référence est un enregistrement de l’ensemble de raccourcis actif qui est enregistré
sous forme de table HTML. Vous pouvez afficher cette feuille de référence avec un navigateur
Web ou l’imprimer.
Pour créer une feuille de référence :
1
Choisissez Edition > Raccourcis clavier pour ouvrir la boîte de dialogue Raccourcis clavier.
2
Cliquez sur le bouton Exporter l’ensemble en tant que code HTML près du champ Ensemble
actif.
La boîte de dialogue Enregistrer sous est alors affichée.
3
Entrez le nom de la feuille de référence, puis sélectionnez un emplacement pour son fichier.
4
Cliquez sur Enregistrer.
Utilisation des fichiers de configuration
Pour gérer des systèmes multi-utilisateurs, Fireworks utilise des fichiers de profil utilisateur. Ainsi,
certains utilisateurs peuvent personnaliser des fonctionnalités de Fireworks telles que les styles, les
raccourcis clavier, les commandes et bien d’autres encore, sans affecter la configuration Fireworks
pour les autres utilisateurs.
Pour chaque utilisateur, Fireworks crée un ensemble de fichiers de configuration distinct.
Fireworks installe également les fichiers de configuration maîtres dans le dossier de l’application
Fireworks. Ces fichiers contiennent les paramètres de configuration par défaut de Fireworks et
s’appliquent à tous les utilisateurs. Certains fichiers de configuration, tels que les plug-ins de
Fireworks, se trouvent uniquement dans le dossier de l’application Fireworks. Sur certains
systèmes, seul l’administrateur système peut accéder aux fichiers de configuration maîtres dans le
dossier de l’application Fireworks.
Fichiers des profils utilisateur
Les fichiers des profils utilisateur de Fireworks sont conservés dans votre dossier des profils
utilisateur. L’emplacement exact de ce dossier varie en fonction du système d’exploitation. Pour
plus d’informations, voir « Localisation des fichiers de configuration » à la page 441.
Dans le dossier des profils utilisateur de Fireworks MX, les fichiers des profils utilisateur sont
organisés comme suit :
Les commandes, panneaux de configuration, les styles, les paramètres d’exportation et les
bibliothèques d’URL sont placés dans des sous-dossiers du dossier Macromedia/Fireworks MX.
Le journal du projet est
conservé dans un fichier appelé Project_Log.htm, qui se trouve dans le
dossier Macromedia/Fireworks MX.
Les préférences sont conservées dans un fichier appelé Fireworks MX Preferences.txt (sous
Windows) ou Fireworks MX Preferences (sous Macintosh). L’emplacement exact de ce dossier
varie d’un système à un autre. Il ne se trouve pas toujours dans le dossier des profils utilisateur.
Pour plus d’informations, voir « Localisation du fichier des préférences Fireworks » à la page 442.
Les raccoucis clavier se
trouvent dans le dossier Macromedia/Fireworks MX/English/Keyboard
Shortcuts.
Préférences et raccourcis clavier 439
Votre dictionnaire personnel se trouve dans un fichier appelé Personal Dictionary.tlx figurant dans
le dossier Macromedia/Common. Ce dictionnaire est utilisé par d’autres applications
Macromedia.
Les fichiers STL (Custom style) peuvent être enregistrés dans Nav Menu, un sous-dossier du
dossier Macromedia/Fireworks MX. Vous pouvez y enregistrer les fichiers STL et les utiliser
comme couleur d’arrière-plan des cellules de l’éditeur de menu contextuel.
Le dossier Macromedia/Fireworks MX contient également plusieurs autres fichiers de profils
utilisateur.
Fichiers de configuration maîtres appliqués à tous les utilisateurs
Les fichiers de configuration maîtres appliqués à tous les utilisateurs se trouvent dans le dossier de
l’application Fireworks, c’est-à-dire le dossier du disque dur dans lequel vous avez installé
Fireworks. Pour plus d’information sur l’emplacement de ce dossier, voir « Localisation des
fichiers de configuration » à la page 441.
Remarque : D’autres fichiers de configuration sont placés dans des sous-dossiers du dossier de l’application
Fireworks. Leur emplacement exact varie en fonction du système d’exploitation. Par ailleurs, les utilisateurs
Macintosh doivent connaître le concept du nouveau logiciel d’Apple. Pour plus d’informations, voir « Affichage du
contenu du module (Macintosh uniquement) » à la page 443.
Les fichiers de configuration maîtres du dossier de l’application Fireworks incluent les éléments
suivants :
Le dossier Keyboard Shortcuts contenant les jeux de raccourcis par défaut. Les raccourcis clavier que
vous modifiez dans Fireworks ne seront pas enregsitrés dans ce dossier, mais dans votre dossier de profil
utilisateur.
Sur les systèmes Windows, le dossier Keyboard Shortcuts se trouve dans le sous-dossier English. Sur
les systèmes Macintosh, ce dossier se trouve dans le dossier Contents/Resources/English.lproj de
l’application Fireworks. Pour plus d’informations, voir « Localisation des fichiers de configuration »
à la page 441.
Le dossier Plug-ins est
le dossier dans lequel vous pouvez installer des plug-ins et des filtres
supplémentaires. Le filtres ou plug-ins de société tierce ne sont copiés dans ce dossier que si vous
choisissez ce dernier lors de leur installation. Etant donné qu’il n’existe pas d’équivalent de dossier
de profil utilisateur pour ce dossier, les plug-ins que vous installerez dans ce dossier seront
accessibles à tous les utilisateurs. L’emplacement exact du sous-dossier Plug-ins dans le dossier de
l’application Fireworks varie en fonction du système d’exploitation.
Le dossier Quick Export Menu est le dossier dans lequel est stocké le contenu du menu déroulant
Exportation rapide. Vous pouvez personnaliser ce menu si vous maîtrisez bien JavaScript et XML.
Pour plus d’informations, voir « Personnalisation du menu contextuel Exportation rapide » à la
page 372.
Sur les systèmes Windows, le dossier Quick Export Menu se trouve dans le sous-dossier English. Sur
les systèmes Macintosh, ce dossier se trouve dans le dossier Contents/Resources/English.lproj de
l’application Fireworks. Pour plus d’informations, voir « Localisation des fichiers de configuration »
à la page 441.
Le dossier Configuration contient les sous-dossiers Batch Code, Commands, Command Panels,
Libraries, Patterns, Spelling et Textures. Toute modification effectuée dans ce dossier s’appliquera
à tous les utilisateurs.
Le dossier de l’application Fireworks contient
440 Chapitre 18
également d’autres fichiers de configuration.
Localisation des fichiers de configuration
L’emplacement exact des fichiers de configuration varie en fonction du système d’exploitation et
selon que vous utilisez un système multi-utilisateur ou un système autonome.
Remarque : Par défaut, les systèmes Windows masquent souvent certains fichier et dossiers. Vérifiez que les
options d’affichage des dossiers sont définies de manière à ce que que tous les fichiers et dossiers soient visibles.
Sur certains systèmes, vous pouvez également activer l’option d’affichage des fichiers pour visualiser le contenu
d’un dossier. Pour plus de détails sur l’affichage des fichiers et dossiers, consultez l’aide en ligne Windows.
Pour localiser votre dossier de profil utilisateur :
Sur votre disque dur, localisez dossier ci-dessous correspondant à votre système d’exploitation, où
User ID est le nom d’utilisateur que vous utilisez pour vous connecter au système :
Mac OS X : HD/Users/User
ID/Library/Application Support/Macromedia/Fireworks MX
Mac OS 9.1 ou supérieure, système autonome :
HD/System Folder/Application Support/Macromedia/Fireworks MX
Mac OS Mac 9.1 ou supérieure, système multi-utilisateur, utilisateur standard :
HD/Users/User ID/Preferences/Macromedia/Fireworks MX
Mac OS Mac 9.1 ou supérieure, système multi-utilisateur, administrateur (Propriétaire):
HD/System Folder/Application Support/Macromedia/Fireworks MX
Windows 98 et Windows ME, système autonome :
C:\Windows\Application Data\Macromedia\Fireworks MX
Windows 98 et Windows ME, système multi-utilisateur :
C:\Windows\Profiles\User ID\Application \Application Data\Macromedia\Fireworks MX
Windows NT 4 : C:\WINNT\Profiles\User
ID\Application Data\Macromedia\Fireworks MX
Windows 2000 et Windows XP :
C:\Documents and Settings\User ID\Application \Application Data\Macromedia\Fireworks MX
Si vous ne parvenez pas à localiser votre dossier de profil utilisateur à partir des chemins cidessous, c’est que votre système doit avoir une configuration personnalisée. Pour plus
d’informations sur la localisation manuelle de votre dossier de profil utilisateur, voir « Localisation
de votre dossier de profil utilisateur sur un système personnalisé » à la page 441.
Remarque : Sur les systèmes personnalisés, les noms de certains dossiers système peuvent être différents.
Pour localiser les fichiers de configuration maîtres applicables à tous les utilisateurs :
Localisez le dossier d’installation de Fireworks sur le disque dur.
Sous les systèmes Windows, l’emplacement par défaut est Program Files/Macromedia/Fireworks
MX. Sous les systèmes Macintosh, l’emplacement par défaut est Applications/Macromedia
Fireworks MX.
Remarque : Sur les systèmes personnalisés, les noms de certains dossiers système peuvent être différents.
Localisation de votre dossier de profil utilisateur sur un système
personnalisé
Si vous n’êtes pas parvenu à localiser votre dossier de profil utilisateur à l’aide de la procédure
décrite dans « Localisation des fichiers de configuration » à la page 441, c’est que votre système a
été installé avec une configuration personnalisée. Vous devrez alors localiser ce dossier
manuellement en effectuant une recherche sur le disque dur.
Préférences et raccourcis clavier 441
Si vous ne parvenez toujours pas à localiser ce dossier, contactez l’administrateur système pour
obtenir de l’aide.
Remarque : Sur les systèmes personnalisés, les noms de certains dossiers système peuvent être différents.
Pour localiser votre dossier de profil utilisateur sous Mac OS X, Windows XP, Windows NT,
Windows 2000 et des systèmes multi-utilisateurs Windows 98 et Windows ME :
1
Recherchez sur votre disque dur le nom d’utilisateur que vous utilisez pour vous connecter au
système.
Plusieurs fichiers ou dossiers peuvent apparaître dans le fenêtre des résultats de la recherche.
2
Ouvrez le dossier portant votre nom d’utilisateur.
3
Ouvrez le dossier Application Data/Macromedia/Fireworks MX (Windows) ou le dossier
Application Support/Macromedia/Fireworks MX (Macintosh).
Pour localiser votre dossier de profil utilisateur sur des systèmes autonomes Mac OS 9.x,
Windows 98 et Windows ME :
1
Recherchez le dossier Application Data (Windows) ou Application Support (Macintosh) sur
votre disque dur.
2
Ouvrez le dossier Macromedia/Fireworks MX.
Pour localiser votre dossier de profil utilisateur sur un système multi-utilisateur Mac OS 9.x :
1
Recherchez sur votre disque dur le nom d’utilisateur que vous utilisez pour vous connecter au
système.
Plusieurs fichiers ou dossiers peuvent apparaître dans le fenêtre des résultats de la recherche.
2
Ouvrez le dossier portant votre nom d’utilisateur.
3
Ouvrez le dossier Preferences/Macromedia/Fireworks MX.
Localisation du fichier des préférences Fireworks
Les préférences Fireworks sont conservées dans un fichier appelé Fireworks MX Preferences.txt
(sous Windows) ou Fireworks MX Preferences (sous Macintosh). L’emplacement de ce fichier
varie en fonction du système d’exploitation.
• Sous Windows, les préférences sont enregistrées dans le dossier Application Data/Macromedia/
Fireworks MX.
• Sous Mac OS X, elles se trouvent dans le dossier Library/Preferences de votre dossier utilisateur.
• Sur un système Mac OS 9.x autonome, les préférences sont conservées dans le dossier System/
Preferences.
• Sur un système Mac OS 9.x multi-utilisateur, elles sont conservées dans le dossier Preferences
de votre dossier utilisateur. Si vous possédez les autorisations d’accès de l’administrateur
(niveau propriétaire), l’emplacement du fichier des préférences est le même que sur un système
autonome.
Pour plus d’informations sur l’emplacement de votre dossier utilisateur ou du dossier Application
Data, voir « Localisation des fichiers de configuration » à la page 441.
442 Chapitre 18
Personnalisation des fichiers de configuration de tous les utilisateurs
Que vous travailliez sur un système multi-utilisateur ou sur un système autonome, Fireworks
modifie les fichier de profil utilisateur (mais pas les fichiers de configuration maîtres) dans le
dossier de l’application Fireworks lorsque vous enregistrez des paramètres. Cela s’explique par le
fait que, sur un système multi-utilisateur, bon nombre d’utilisateurs n’ont pas accès à tous les
fichiers.
Les utilisateurs ayant les autorisations d’accès de l’administrateur peuvent personnaliser des
fonctions pour tous les autres utilisateurs en modifiant les fichiers de configuration maîtres dans le
dossier de l’application Fireworks.
Pour sauvegarder un fichier de configuration maître pour tous les utilisateurs :
Enregistrez ou placez une copie du fichier à l’emplacement approprié dans le dossier de l’application
Fireworks.
Pour plus d’informations sur la localisation du dossier de l’application Fireworks, voir
« Localisation des fichiers de configuration » à la page 441.
Réinstallation de Fireworks
Lorsque vous désinstallez Fireworks, vos fichiers de profil utilisateur restent intacts sur la plupart
des systèmes. Si vous réinstallez Fireworks à partir des paramètres de configuration par défaut,
supprimez manuellement vos fichiers de profil utilisateur avant de réinstaller l’application. Pour
plus d’informations sur la localisation de ces fichiers, voir « Localisation des fichiers de
configuration » à la page 441.
Toutefois, pendant la procédure de désinstallation sur des systèmes Windows XP, Windows 2000
et Windows NT 4, le programme vous demandera si vous souhaitez supprimer les fichiers de
préférences et de configuration. En supprimant ces fichiers, vous supprimez du même coup tous
les utilisateurs du système.
Affichage du contenu du module (Macintosh uniquement)
Sur un ordinateur Macintosh, Fireworks est installé sous la forme d’un module. Cette nouvelle
fonctionnalité d’Apple permet d’installer des applications dans un module autonome.
Le fichier de l’application Fireworks, ainsi que ses fichiers de configuration par défaut sont placés
dans le module de l’application. Par défaut, le contenu du module est masqué.
Lorsque vous ouvrez le module, vous remarquez qu’ils contient plusieurs fichiers et dossiers. Deux
de ces fichiers sont spécifiques à votre système d’exploitation. Les fichiers du dossier MacOS
s’appliquent uniquement aux utilisateurs Mac OS X et ceux du dossiers MacOSClassic, aux
utilisateurs Classic Mac. Pour plus d’informations, voir « Exécution de Fireworks MX Classic
(Macintosh uniquement) » à la page 444.
Pour afficher ou masquer le contenu du module Fireworks :
1
Localisez le dossier d’installation de Fireworks sur le disque dur.
2
Maintenez enfoncée la touche Contrôle et cliquez sur l’icône Fireworks MX, puis choisissez
Afficher le contenu du module dans le menu contextuel.
La nouvelle fenêtre qui apparaît affiche le contenu du module. Pour une description du
contenu du module, voir « Fichiers de configuration maîtres appliqués à tous les utilisateurs » à
la page 440.
Préférences et raccourcis clavier 443
Exécution de Fireworks MX Classic (Macintosh uniquement)
Pour la version Mac OS X, Fireworks dispose d’une nouvelle interface Aqua. Sur un système
Macintosh, Fireworks installe à la fois la version Aqua de l’application et la version Classic
habituelle. Fireworks démarre la version de l’application qui est appropriée à votre système
d’exploitation.
Cependant, les utilisateurs Mac OS X peuvent exécuter l’application Classic s’ils le désirent.
Conseil : Les utilisateurs Mac OS X peuvent exécuter la version Classic de Fireworks si, par exemple, ils disposent
d’anciennes versions de plug-ins qui ne sont pas prises en charge par Mac OS X. En exécutant la version Classic de
Fireworks, ils pourront utiliser ces plug-ins. Pour plus d’informations sur le module Fireworks, voir « Affichage du
contenu du module (Macintosh uniquement) » à la page 443.
Pour exécuter la version Classic de Fireworks sur un système Mac OS X :
1
A partir du disque dur, sélectionnez le module Fireworks. Ce module se trouve dans le dossier
d’installation de l’application Fireworks.
2
Choisissez Fichier > Lire les informations.
3
Activez l’option Ouvrir dans l’environnement Classic.
4
Fermez la fenêtre Lire les informations.
5
Démarrez Fireworks MX comme vous le faites habituellement.
Après avoir modifié ce paramètre, Fireworks démarrera en chargeant l’environnement Classic
chaque fois que ouvrirez l’application. Pour revenir à la version Aqua de Fireworks,
désélectionnez l’option Ouvrir dans l’environnement Classic, dans la fenêtre Lire les
informations avant de démarrer Fireworks.
444 Chapitre 18
INDEX
A
accentuation 151
images 137
zones bitmap 136
Accentuer davantage, filtre 151
Accentuer le flou, filtre 148
Accentuer, filtre 151
Accentuer, outil 136
actions, refaire 105
Adobe GoLive 371
Adobe Type Manager 7
affichage
barres d’outils 93
bords 110
fichiers Fireworks dans un navigateur 73
panneaux 91
règles 102
Afficher/masquer les références et les découpes 274
ajout
images 324
styles 257
alignement des objets 129
alpha, conversion des images en 150
alpha, couche d’un objet, sélection 117
ancrage de panneaux 90
animation 317
activation et désactivation d’images 323
affectation de noms aux images 323
affichage de l’image suivante 327
affichage de plusieurs images 327
affichage de toutes les images 327
affichage des images courantes et adjacentes 327
affichage personnalisé des images 327
ajout d’images 324
aperçu 328
création à partir de fichiers multiples 331
Déplacement d’objets dans une autre image 325
désactivation du partage d’un calque 326
exécution 328
exportation 330
images 319
images, utilisation 322
insertion d’images 324
lecture en boucle 329
mise à l’échelle 320
modification d’animations 384
modification de plusieurs images 327
mouvement 320
opacité 320
optimisation 330
ouverture 331
partage de calques entre plusieurs images 325
propriétés 319
réglage de la cadence d’images 322
réorganisation 324
rotation 320
séquence de calques 327
suppression 321
suppression des images 325
transparence 329
annulation 105
d’une étape, utilisation du panneau Historique 429
définir le nombre d’étapes annulées 433
anticrénelage
bords 216
couleur de l’arrière-plan de destination 354
lissage du bord des caractères 185
suppression des halos 355
aperçu
avec Aperçu avant exportation 335
pixels contenant une couleur spécifique 347
traits 206
Aperçu avant exportation 335
affichage panoramique 336
aperçu 335
aperçu de l’optimisation 335
445
comparaison des paramètres d’optimisation 336
optimisation 335
zoom 336
application d’un flou 148
images 137
zones bitmap 136
application d’une diffusion 135
apprentissage de Fireworks
groupe de discussion 9
ressources 8
Arrière-plan, commande 129
assistants
Exportation 334
Optimiser la taille 336
association
Voir fusion
association d’objets 127
assombrissement
de zones d’image 136
images 138
automatisation des tâches 413
B
barre de couleurs 196, 199
affichage des modèles de couleurs 201
choix d’une couleur avec 200
barre de lancement 97
barres d’outils
affichage et masquage 93
ancrage 93
flottante 93
verrouillage 93
barres de nav (navigation)
comportement Restaurer 283
création 305
état Au-dessus 282
état Enfoncé 283
bibliothèque d’URL 264
ajout d’URL 265
ajout d’URL utilisées 266
création 265
saisie d’URL absolues ou relatives 266
bibliothèque de symboles 259
Bibliothèque, panneau 90
bitmap, graphiques 76
Voir bitmaps
bitmap, mode 76
appliquer avec les outils 87
basculer vers 131
bitmaps
effacement 135
446 Index
flou et accentuation 148
réglage de la couleur et du ton 139
réglage de la luminosité et du contraste 145
réglage de la teinte et de la saturation 146
retouche 136
blocs de texte
déplacement 176
largeur fixe 177
redimensionnement 177
redimensionnement automatique 177
boîte de dialogue
Exporter 357
Modifier le dégradé 213
Propriétés du symbole 259
Traitement par lots 419
boîte de dialogue de modification de trait 206
bords
affichage et masquage 110
biseautés 221
Bordure, commande 119
bouton, symboles
création 54
modification 58
boutons
association d’URL vers 58
barres de navigation 305
création 54, 295
définition 296
définition d’une cible 304
éditeur de boutons 295
effets en direct 298
états 55
exportation 295
Exportation rapide 93
généralités 295
occurrences 56
Qualité sélective 353
texte de l’occurrence 57
zone active 302
Brûlure, outil 136
C
cadence d’images par défaut 79
cadence des images, animations 322
cadres de sélection 23, 110
déplacement 115
désélection 114
extension 119
lissage 120
réduction 119
sauvegarde et restauration 120
sélection d’une zone autour 119
sélection de pixels par intersection 116
suppression 114
transfert vers un autre objet 120
Calque Web 232
calques 26
activation 228
affectation d’un nom 230
affichage 229
ajout et suppression 228
déplacement 230
désactivation du partage entre plusieurs images 326
duplication 229
exportation 360
partage 232
partage entre plusieurs images pour l’animation 325
verrouillage 231
calques CSS, exportation 368
Calques, panneau 89
caractères
Voir polices
carrés, dessin 154
cartes images
création 290
exportation 292
cercles, dessin 154
clonage
images 136
objets 122
zones bitmap 136
codage UTF-8 369
code HTML 362
configuration 369
copier-coller de Fireworks dans Dreamweaver 365
exportation 364
code source HTML
copier-coller de Fireworks dans Dreamweaver 365
collage d’un code HTML 366
colorier les images 146
combinaison
Voir fusion
commandes
Coller dedans 238
création 429
enregistrement 105
Etendre le trait 173
Fusionner la sélection 132
Masquer la sélection 241
Mettre à jour le code HTML 367, 378
modification 431
Occurrences interpolées 328
Optimiser l’image dans Fireworks 382
renommer des commandes personnalisées 431
renommer ou supprimer des commandes Fireworks 431
Révéler la sélection 241
supprimer des commandes personnalisées 431
Tout révéler 241
traitements par lots 424
Vérifier l’orthographe 191
comportements
Afficher le menu contextuel 283
Barre de navigation Au-dessus 282
Barre de navigation Enfoncé 283
Image de la barre de navigation 282
Macromedia Dreamweaver 4 277
panneau 90
panneau Comportements 282
Permutation d’images 282
Restaurer la barre de navigation 283
Survol Simple 282
Survol simple 282
Texte de la barre d’état 283
comportements glisser-déposer
création d’effets de survol non superposé avec 280
définition 278
pour découpe unique 279
suppression 281, 282
trait bleu 279
compression
choix d’un type de fichier 341
et optimisation 337
flou de contours 353
réglage 349
sélective 353
Compression JPEG sélective
activer la qualité sélective 353
couleur de superposition 353
préserver la qualité du bouton 353
préserver la qualité du texte 353
compression JPEG sélective 352
configuration de Fireworks 433
configuration système pour Fireworks 7
contenu du module, visualisation 443
contextuels, menus, personnalisation 62
contours 204
Voir aussi traits
Contraction, commande 119
contraste 145
copie
attributs d’objet 258
bitmaps 121
code HTML 364
Index 447
images 324
objets 122
pixels 110
tous les objets sélectionnés sur un calque 230
copier et coller
code HTML de Fireworks 365
objets provenant d’autres applications 82
occurrences de symbole 263
copies de sauvegarde, durant une recherche /
remplacement 415
correction des couleurs
avec la pipette 145
Courbes 143
luminosité et contraste 145
Niveaux 141
correction orthographique 191
couleur
24 bits 344
32 bits 344
affichage des valeurs des couleurs 201
application à partir du panneau Nuancier 196
changement de trait 205
choix avec l’outil Pipette 204
choix d’un groupe d’échantillons 197
choix de la profondeur de couleur 344
création avec le sélecteur de couleurs du système 201
création dans le Mélangeur 201
définition des préférences 433
échantillonnage 204
enregistrement d’échantillons personnalisés 199
fenêtre contextuelle 203
inversion des valeurs 147
modèles de couleurs 200
modifier 133
prélèvement 134
recherche et remplacement 417
recherche et remplacement de couleur non Websafe 418
réglage 139
remplacement d’un échantillon 199
rétablissement des couleurs par défaut 196
sélection à partir de la barre de couleurs 200
suppression dans le panneau Nuancier 199
suppression des couleurs non utilisées 345
tramage à l’aide de Websafe 202
trame en dégradé 213
Couleur de remplissage 133
Couleurs du système Windows, comme groupe
d’échantillons 197
Couleurs Websafe 348
coupe de trajets 170
448 Index
Crayon, outil 133
création d’une zone
Voir document
création de scripts, fichiers Flash SWF 430
crénelage 181
Cutter, outil 170
D
décalage de la ligne de base 186
découpage 48
d’un document 48
découpes 77
affichage ou masquage de la couche de découpe 341
chevauchement 277
création 270
définition 269
exportation 358
interactivité 270
mise à jour 359
modification de découpes de tableaux de
Macromedia Dreamweaver 381
modification de la couleur 274
nom automatique 286, 287
nom automatique, changement de la convention de
nom par défaut 288
polygone 272
redimensionnement 276
se chevauchant 277
texte 271
utilisation de séparateurs 288
utilisation de tables imbriquées 288
défilement du document
Voir vue d’ensemble
dégradés
modification 213
trames en 134
demi-tons 141
désélection de tous les objets 109
Désélectionner, commande 114
désinstallation de Fireworks 443
dessin
changement des segments adjacents 164
conversion de trajets droits en trajets courbes 162
courbe de segments adjacents 164
objets de distorsion 126
sélection d’un point. 163
séparation de trajets 170
dessiner de nouveau des trajets 169
didacticiels 9
Didacticiel des bases de la conception graphique 15, 45
diffusion
création de bords diffusés 216
sélections de pixels 118
Diffusion, commande 135
disques de travail 435
dissociation d’objets 127
distorsion d’objets 126
Distorsion, outil 126
documents
affichages multiples 96
création d’un nouveau document 78
mode par défaut 153
modification de la résolution 98
modification des caractéristiques 98
mosaïque 96
ouverture 79
récents 79
réduction 100
rotation 100
sauvegarde 84
DPI
Voir résolution
duplication
en faisant glisser le pointeur 122
objets sélectionnés 122
E
échantillons ACT 197
éclaircissement
de zones bitmap 136
images 138
Editeur de boutons 296
création de symboles 259
modification de symboles 261
édition
objets bitmap 133
objets sélectionnés 122
effacement de bitmaps 135
effets
application aux objets 220
Effets en direct 219
modification 224
néon 223
plug-ins 224
recherche et remplacement 417
suppression 225
valeurs par défaut 226
effets en direct 24
activation ou désactivation 221
application 226
couleur de trame 254
création 225
dans les boutons 298
modification 224
plug-ins Photoshop 223
renommer 226
suppression 225
Ellipse, outil 154
ellipses, dessin 154
empilage des objets 128
enterlacement d’images 351
environnement de travail 86
EPS, fichiers, ouverture dans Fireworks 79
espacement des caractères
Voir crénelage
espacement des lettres
Voir crénelage
espacement des lignes
Voir interlignage
espacement des paragraphes 184
estampe 221
état, barre de (Windows) 97
états de bouton
Au-dessus 296, 297
Au-dessus Enfoncé 296, 298
Enfoncé 296, 298
Relevé 296, 297
étoiles
contrainte 156
dessin avec l’outil Polygone 156
événements souris 283
exécution
animations 328
commandes enregistrées 430
macros 430
exportation 41
animations 329, 360
Assistant 334
boutons 295
calques CSS 368
calques dans des fichiers distincts 360
codage UTF-8 369
découpes 285, 358
fichier HTML 362
fichier XHTML 368
fichiers Fireworks vers Dreamweaver 401, 405
GIF animés 330
graphiques 77
HTML 69
images 357
images dans des fichiers distincts 360
paramètres du traitement par lots 422
Index 449
Photoshop 409
références 292
résultats 363
styles 258
symboles 263
vers des fichiers WBMP 342
vers Illustrator 395
vers Macromedia Director 398
vers Macromedia Dreamweaver 378
vers Macromedia Flash 388, 390
vers Macromedia FreeHand 395
vers Photoshop 410
zone 361
Exportation rapide 371
menu contextuel 372
Exporter zone, outil 361
extension de Fireworks 9
extension de traits 173
Extension Manager 428
Extension, commande 119
F
fichier HTML
exportation 362
insertion depuis Fireworks dans Dreamweaver 376
fichier PNG, transparence 392
fichier XHTML 368
fichiers de configuration 439
localisation 441
maîtres 440
personnalisation 443
systèmes multi-utilisateurs 441
fichiers de profils utilisateur 439
fichiers externes, conversion en survols 284
fichiers JPEG
choix d’un format JPEG 342
commande Bords des JPEG plus nets 353
compression JPEG sélective 352
modification des zones sélectionnées 353
paramètres d’optimisation 351
progressive 354
fichiers temporaires 435
fichiers valides, définition 420
fichiers WBMP, exportation vers 342
filtres 24
accentuer 151
Accentuer davantage 151
Accentuer le flou 148
Flou 148
Flou gaussien 149
Inverser 147
450 Index
Luminosité/Contraste 145
Masque d’accentuation 151
plug-ins Photoshop 223
Rechercher les bords 150
Teinte/Saturation 146
Fireworks MX Classic 444
Fireworks, aide 8
flottante, sélection de pixels
création 121
déplacement 121
Flou gaussien, filtre 149
Flou, filtre 148
Flou, outil 136
fondu
application 254
couleurs des objets superposés 251
définition du mode de fondu 254
format de fichier
BMP 342
GIF 341
GIF, choix 341
GIF, choix d’une palette de couleurs 343
GIF, échantillons 197
JPEG 342
PICT 342
PNG 342
PNG, choix 342
PNG,choix d’une palette de couleurs 343
TIFF 342
TIFF, choix 342
formes
Voir graphiques vectoriels
FrontPage 371
création d’images Fireworks dans 403
insertion d’images Fireworks dans 403
insertion de code HTML Fireworks dans 404
modification de fichiers Fireworks dans 406
fusion
bitmaps 26
trajets 165, 170
G
généralités 95
Glisser-déposer 81
GoLive 371, 411
Gomme, outil 135
gradation utile 140
réglage avec Courbes 143
réglage avec Niveaux 141
grille
accrocher des objets à 104
affichage ou masquage de 104
changement de la couleur par défaut 104
modification de la taille des cellules 104
groupe d’échantillons, choix d’un groupe personnalisé 197
groupe de discussion, Fireworks 9
H
halos, suppression 355
histogramme 141
Historique, panneau 90, 105
HomeSite
insertion d’images Fireworks dans 401
insertion de code HTML Fireworks HTML dans 401
HTML
exportation 69
mise à jour de code HTML Fireworks placé dans
Macromedia Dreamweaver 378
ouvertures de tables 81
préférences d’exportation 69
remplacement d’une ancienne version 367
Roundtrip 380
utilisation avec les éditeurs 411
I
illusion de transparence 203
Illustrator, exportation vers 395
images
activation et désactivation 323
affichage de la suivante 327
affichage des images courantes et adjacentes 327
affichage personnalisé 327
afficher toutes 327
ajout 324
cadence 322
collées 83
comme trames, voir Commande Coller dedans
composites 251
Déplacement d’objets dans une autre image 325
désactivation de la séquence de calques 327
désactivation du partage d’un calque 326
exportation 357, 360
gestion 322
icônes, voir vignettes
insertion 324
matricielles 131
modification de plusieurs images 327
noms dans l’animation 324
partage de calques pour l’animation 325
peinture 133
réorganisation 324
sélection 110
sélection de pixels 110
séquence de calques 327
suppression 325
Images, panneau 89
Import Xtra pour Director 397
importation
appareil photo numérique 84
fichiers Photoshop 407
fichiers PNG 83
graphismes 47
images 22
préférences d’importation de fichiers Photoshop 436
styles 258
symboles 263
importation de texte 190
fichiers Photoshop 190, 407
fichiers RTF 190
texte ASCII 191
imposer à la rotation 125
inclinaison d’objets 125
Inclinaison, outil 125
info-bulles 9
Informations, panneau 89
insertion
fichier HTML Fireworks dans Dreamweaver 376
images Fireworks dans Dreamweaver 374
installation de Fireworks 8
installation de plug-ins Photoshop 223
intégration de Dreamweaver et Fireworks
commande Optimiser l’image dans Fireworks 382
Design Notes 387
lancement et modification d’images Fireworks 380
lancement et modification de tableaux Fireworks 381
lancement et optimisation d’images Fireworks 383
mise à jour de code HTL Fireworks 378
modification d’animations Fireworks 384
préférence d’éditeur externe 386
préférences, Lancer et modifier 387
redimensionnement d’images Fireworks 384
Intégration Design Notes pour Macromedia
Dreamweaver et Fireworks 387
interactivité 77
interface carbonisée 444
interlignage 182
interpolation
caractéristiques 328
définition 328
mise à l’échelle 433
objets 328
Intersection, commande 171
Inverser, filtre 147
Index 451
J
JavaScript 7
jeux de raccourcis
Voir raccourcis clavier
jeux de raccourcis personnalisés, voir raccourcis clavier
Journal de projets 90
Journal du projet 427
affichage 428
ajout de fichiers 427
enregistrement des modifications à l’aide de
Rechercher et remplacer 413
exportation d’un fichier 428
impression 428
ouverture 427
recherche 427
suppression d’une entrée 427
JPEG progressive 354
L
lancement de Fireworks dans Dreamweaver 381
lancement de Fireworks depuis Dreamweaver. Voir
Intégration Macromedia Dreamweaver et
Fireworks
Le site Web du Centre d’assistance de Fireworks 9
Ligne, outil 154
lignes
dessin 154
Voir traits
limites 204
Lissage, commande 120
luminosité 145
Luminosité/Contraste, filtre 145
M
Macintosh 7
configuration requise 7
OS 9.1 441
OS X 441
Macromedia Director 7
acteurs 400
exportation vers 398
insertion de fichiers Fireworks dans 397
Macromedia Dreamweaver 7
bibliothèques 378
comportements 382
comportements Dreamweaver 4 277
définition de Fireworks comme éditeur d’images par
défaut 385
exportation vers 378
fichiers 374
marques de réservation 374
452 Index
modification d’images Fireworks dans 379
Macromedia Flash 7
exportation vers 388, 390
importation Fireworks PNG vers 388
Macromedia FreeHand 7
exportation vers 395
insertion de graphiques Macromedia Fireworks dans 394
Macromedia, aide 8
macros 430
maculage
images 138
zones bitmap 136
masquage
barres d’outils 93
bords 110
calques 231
objets des calques 231
panneaux 91
Masque d’accentuation, filtre 151
masque vectoriel
conversion en masque bitmap 250
création 236
utilisation d’un objet existant 238, 240
Masquer les panneaux, commande 91
Masquer tout 241
masques 29, 233
activation 250
application 30
bitmap 234
création de masques vides 241
déplacement avec les objets masqués 245
désactivation 250
modification 30, 247
regroupement d’objets pour former un masque 243
suppression 251
texte comme masque 239
utilisation d’un objet existant 238
utilisation d’un objet existant comme 240
vectoriels 233
masques bitmap 233, 234
création 240
utilisation d’un objet existant 238, 240
mélange d’objets 328
Mélangeur 89, 199, 200
affichage 200
création de couleurs avec 201
mélange de couleurs dans 200
Mémoire vive
Voir Configuration requise
menu Commandes 430
gestion des commandes enregistrées 431
menu déroulant Effets 219
menus contextuels 101
création 60
définition des positions 314
description 306
exportation 316
modification 64, 315
propriétés avancées 312
réglage de l’apparence 310
saisie du texte du menu 307, 308
méthode de mise à l’échelle
par interpolation adoucie 434
par interpolation au plus proche 434
par interpolation bicubique 433
par interpolation bilinéraire 434
miroir
Voir retournement d’objets
mise à jour des découpes 359
mise à l’échelle
de graphismes 422
objets 124
options d’interpolation 433
Mise à l’échelle, outil 124
Mise en retrait d’un texte 184
Mode normal 95
Mode plein écran avec affichage des menus 95
modèles de couleurs
CMJ 200
Echelle de gris 200
Hexadécimal 200
RVB 200
TSL 200
modes
bitmap, préférence Afficher la bordure rayée 434
d’affichage 95
d’affichage, basculer 97
entrée d’un bitmap 76
entrée d’un vecteur 76
vectoriel 153
vectoriel, dessin dans 153
modes de fondu 251
couleur 252
différence 252
éclaircir 252
Ecran 251
effacer 252
foncer 252
inverser 252
luminosité 252
multiplicateur 251
nuance 252
saturation 252
teinte 252
modification
comportements 283
effets en direct 224
étapes dans le panneau Historique 432
menus contextuels 315
par calque 231
pixels 110
styles 257
symboles d’animation 319
symboles de bouton 58
trajets 166
trames dégradées 213
trames unies 211
module de l’application 443
multiples, occurrence de boutons 56
N
nav (navigation), barres, création 54
navigateur, affichage des fichiers dans Fireworks 73
navigation dans un document 93
négatif 99
néon, effets 223
Niveaux automatiques, fonction de réglage de la
gradation utile 140
Niveaux, fonction de réglage de la gradation utile 140
nommer des objets 28
noms de fichiers, modification à l’aide d’un traitement
par lots 423
nouveau document, correspondant à la taille du Pressepapiers 78
nouvelles fonctions 10
Nuancier 196
panneau 89
nuancier, choix d’un nuancier personnalisé 197
O
objets 26
association 127
conversion en symbole d’animation 319
création de bitmaps 132
déplacement d’objets sélectionnés 122
dissociation 127
distorsion 126
empilage 128
fusion 231
inclinaison 125
localisation des objets collés 82
Index 453
nommer 28
ordre d’empilement 29
pivoter 125
propriétés 21
sélection 107
sélection d’une couche alpha 117
suppression d’un effet 225
objets vectoriels 19
modification de la forme 166
occurrences
définition 259
interpolation 328
mise en place dans le document 260
ombres 38, 141, 222
ombres portées 38, 222
Onglet Aperçu 339
opacité
réglage 254
Voir transparence
optimisation 39, 66
animations 330
graphiques 77
images Fireworks depuis Dreamweaver 382
notions de base 333
utilisation de l’Assistant Exportation 335
optimisation, paramètres
comparaison de deux ou quatre paramétrages 340
enregistrement 338, 355
modification dans un traitement par lots 421
partage avec un autre utilisateur 356
réutilisation 338, 355
suppression des paramètres prédéfinis 356
Optimiser, panneau 90
Option Respecter les proportions 80
Options, menu, dans des panneaux 92
organisation des images 324
orientés objet, graphiques
Voir graphiques vectoriels
OS X, Macintosh 441
outils
Accentuer 136
Baguette magique 110
Brûlure 136
Cadre de sélection 110
Cadre de sélection oval 110
Crayon 133
Distorsion 126
Flou 136
Gomme 135
Inclinaison 125
454 Index
Lasso 110
Lasso polygonal 110
mise à l’échelle 124
modification de couleur de trait 205
modifier les options 87
Modulateur de trajet 169
outil de groupe des menus contextuels 88
Pinceau 133, 157
Pipette 134, 198
Plume, ajout de points avec 165
Plume, suppression de points avec 165
Pointeur 107, 110
Polygone 155
dessin d’étoiles avec 156
Révélateur 136
section Couleurs du panneau Outils 195
Sous-sélection 166, 245
Sous-sélection, jonction automatique de trajets avec 166
Sous-sélection, sélection de masques 245
Tache 136
Tampon encreur 136
Texte 175
Transformation 123
Zoom 94
Outils, panneau 87
ouverture
affichages de document multiples 96
documents 79
fichiers multiples pour une animation 331
GIF animés 79, 331
ouvrir
fichiers récents 79
graphiques créés depuis d’autres applications 79
ovales, dessin 154
P
palettes de couleurs
adaptative 343
affichage 346
ajout au nuancier actif 198
définition du nombre de couleurs 344
Echelle de gris 343
enregistrement 348
Exact 343
importation 344
modification 347
Noir et Blanc 343
optimisation 347
Personnalisée 343
Système (Macintosh) 343
Système (Windows) 343
Uniforme 343
verrouillage des couleurs 347
Web 216 343
WebSnap Adaptive 343
panneaux 89
ancrage 90
annulation de l’ancrage 90
Bibliothèque 90, 259
Bibliothèque, insertion des symboles de bouton 300
Calques 89
Calques, affichage des découpes 273
Calques, nom des découpes 287
Comportements 90, 282
déplacement 90
enregistrement de dispositions personnalisées 93
Historique 90, 105
Historique, effacement de toutes les étapes 429
Historique, modification des étapes 432
Historique, modification du nombre d’étapes dans 429
Historique, réexécution de étapes 430
Images 89, 322
Informations 89
journal de projets 90
masquage 91
menu Options dans 92
Nuancier 89, 196
Nuancier, ajout d’échantillons 198
Nuancier, couleurs du système Windows 197
Nuancier, enregistrement personnalisé 199
Nuancier, remplacement d’une couleur 199
Nuancier, suppression d’une couleur 199
Optimiser 90
organisation 90
Outils 87
ouverture de dispositions personnalisées 93
Rechercher et remplacer 90, 414
Réponses 9, 90
restauration des positions par défaut 91
Styles 90, 256
supprimer d’un groupe 91
URL 90, 264
Zone Rechercher 416
paramètres d’optimisation
JPEG 351
prédéfinis 286, 338
partage des calques 232
permutation d’images par survol 279
avec découpe unique 279
création de survols non superposés 280
perspective, illusion 125
Photoshop
application de plug-ins 224
exportation 409
groupes de calques 233
importation de fichiers dans Fireworks 407
installation de plug-ins 223
installation des plug-ins Acquire 84
masques de calques 243
motifs 435
plug-ins 409, 435
préférences dimportation 436
textures 435
Photoshop et Fireworks
exportation de fichiers PSD depuis Fireworks 410
Importation de fichiers PSD dans Fireworks 407
Pinceau, outil 133
pinceaux
configuration 208
enregistrement des paramètres 210
options de trait 207
Pipette, outil 134
pivoterdes objets 125
pixels
application d’une diffusion 135
clonage 136
copier 110
couper 110
déplacement 110
extension du cadre de sélection 119
gradation utile 141
lissage de la bordure du cadre de sélection 120
peinture 133
réduction de la bordure de sélection 119
réglage de la gradation utile avec les boutons pipette 145
sélection 23, 110
sélection d’un ensemble polygonal 112
sélection d’une forme libre 112
sélection d’une zone autour d’un cadre de sélection 119
sélection de couleurs similaires 113
plug-ins 24, 409
emplacement des fichiers 440
Plume, outil 158
prolongement d’un trajet 165
segments de courbe 159
segments de droite 159
poignées de point 161
affichage 163
poignées, transformer 123
Poinçon, commande 171
point central
Index 455
dessiner depuis 154
et l’axe de rotation 125
pointeur de pipette 200, 203, 204, 211
Pointeur, outil 107, 110
points
ajout 165
conversion 162
conversion de droites en courbes 162
courbe de segments adjacents 164
d’angle 159
de courbe 159
déplacement 164
modification des segments adjacents 164
sélection 163
suppression 165
Voir pixels
polices
recherche et remplacement 416
styles 178
tailles de type 178
traitement des polices manquantes 191
polygones
contrainte 156
dessin 155
préférences 433
Afficher l’aperçu de la plume 434
Afficher la bordure rayée 434
Afficher les icônes des onglets 434
Afficher les points unis 434
Ajouter des icônes d’aperçu 434
annuler des actions 433
Choisir la distance 434
couleurs par défaut 433
Curseurs de peinture et de taille de trait 434
Curseurs précis 434
d’éditeur externe 386
définition 433
Désactiver les bords 434
Distance d’accrochage 434
emplacement des fichiers 439, 442
exportation HTML 69
Importation 408
Lancer et modifier 387
options d’édition 434
options d’importation 436
options d’interpolation 433
options de dossiers 435
par défaut 436
restauration de valeurs par défaut 436
Supprimer les objets pendant le recadrage 434
456 Index
Premier plan, commande 129
prévisualisation
documents dans un navigateur 371
documents sur différentes plates-formes 96
paramètres d’optimisation 339, 340
Procédure de travail dans Fireworks 76
propriétés
affichage dans le Vérificateur de propriétés 88
d’un bouton interactif 302
d’un symbole 301
des bordures de cellule 313
des occurrences 302
objet 21
texte 36
Vérificateur 88, 109
R
raccourcis clavier
changement du jeu actif 436
feuille de référence pour l’ensemble de raccourcis
actif 439
jeux de raccourcis clavier 437
raccourcis secondaires 437
suppression des jeux de raccourcis personnalisés 438
Rapporter le trajet, commande 173
recadrer
document 100
documents 101
Recadrer, commande 172
recherche
Voir aussi recherche et remplacement
recherche et remplacement 414
choix de la source de recherche 414
couleurs 417
couleurs non Websafe 418
dans plusieurs fichiers 415
de texte 416
fichiers de traitements par lots 423
polices de caractères 416
URL 418
utilisation 413
rechercher 413
Rechercher et remplacer, panneau 90, 416
Rechercher les bords, filtre 150
Rectangle arrondi, outil 155
Rectangle, outil 154
rectangles
angle arrondi 155
dessin 154
Redessiner le trajet, outil 169
redimensionnement d’images Fireworks depuis
Dreamweaver 384
réduction de traits 173
réduction des points 172
réduction du document 100
rééchantillonnage
description 99
négatif 99
objet vectoriel 99
objets bitmap 99
positif 99
réexécution des animations 328
références 77
affectation de l’URL 285
applications de survols de glisser-déposer 293
création 290
irrégulières 291
modification de la forme 291
par-dessus des découpes 293
réglage
gradation utile avec les boutons pipette 145
teinte ou saturation 146
règles 102
réinstallation de Fireworks 443
remodelage d’objetsvectoriels 168
remplacementdes éléments 413
renommer des symboles 260
repères
accrocher des objets à 104
verrouillage 104
repères de découpe
affichage 274
modification de la couleur 274
suppression 276
répétition d’une étape à l’aide du panneau Historique 429
Réponses, panneau 90
résolution 7
ressources d’apprentissage de Fireworks 8
retournement d’objets 125
Révélateur, outil 136
rotation
déplacement de l’axe 125
objets 124
rotation, imposer à la 125
S
saturation, réglage 139
sauvegarde des documents 84
scripts 430
modification des scripts 431
scripts de commandes, modification 431
scripts de traitement par lots 425
exécution 426
glisser-déposer 426
segments de courbe, édition 161
segments de droite, édition 160
segments, conversion 162
sélecteur de couleur, système 201
Sélecteur de couleurs du système 201
sélecteur de couleurs du système 201
sélection
ajout dans une sélection de pixels 116, 117
annulation d’une sélection 123
application d’une diffusion à une sélection de pixels 118
contraction de la bordure du cadre 119
couche alpha 117
couleurs similaires 113
désélectionner un cadre de sélection 114
désélectionner un objet 109
diffusion des bords 135
ensemble de pixels forme libre 112
ensemble polygonal de pixels 112
extension d’un cadre de sélection 119
images 110
inversion d’une sélection de pixels 118
lissage de la bordure du cadre de sélection 120
objet supplémentaire 109
objets associés 128
pixels 23, 110
points 163
rendre flottante une sélection de pixels 121
soustraction d’une sélection de pixels 118
superposition de zones de bitmaps 118
zone entourant un cadre de sélection 119
zones de pixels 111
sélection, rectangles
Voir cadres de sélection
séparateurs 289
Séparer, commande 170
séquence de calques
affichage de l’image suivante 327
affichage de toutes les images 327
affichage des images courantes et adjacentes 327
affichage personnalisé 327
définition 327
désactivation 327
éditeur de boutons 295
modification de plusieurs images 327
simplification de trajets 172
Simplifier, commande 172
styles
Index 457
ajout 257
application 256
basés sur des styles existants 257
changement de taille des icônes 258
définition 255
exportation 258
importation 258
modification 257
nouveau 257
réinitialisation avec les valeurs par défaut 258
suppression 257
styles de texte
effets 186
gras 179
italique 179
souligné 179
traits 186
trames 186
Styles, panneau 90
suppression
calques 229
effets 225
effets en direct 225
images 325
masques 251
objets sélectionnés 123
points 165
points des courbes 145
portions d’un trajet 171
styles 257
survols 77
barres de navigation 305
comportement Survol Simple 282
conversions en boutons 299
création 50, 295
définition 277
fichiers externes 284
forme irrégulière 272
permutation d’images 279
simples 282
simples, création 282
zone active 302
survols non superposés 280
affectation à des références 293
application à une découpe 281
création 280
symboles
création 259
création d’occurrences 260
définition 259
458 Index
duplication 260
exportation 263
importation 263
interpolation 328
mise en place d’occurrences dans le document 260
modification 260
modification des graphismes 321
rupture de lien 261
suppression 261
symboles de bouton
insertion dans un document 300
modification 301
T
table de couleurs 346
nuancier avec plusieurs attributs 346
nuancier modifié 346
nuancier transparent 346
nuancier verrouillé 346
nuancier Websafe 346
sélection de couleurs 347
Table de couleurs, panneau
mise à jour 346
tables imbriquées 289
Tache, outil 136
taille de fichier
niveau de perte acceptable pour la réduction de la
taille du fichier 349
réduction de la qualité 352
Tampon encreur, outil 136
teinte, réglage 139, 146
Teinte/Saturation, filtre 146
téléphone cellulaire, graphiques
Voir WBMP, fichiers
téléphone mobile, graphiques
Voir WBMP, fichiers
test de fichiers 72
texte
alignement 183
attributs, enregistrement 186
augmentation et réduction de la largeur des
caractères 185
couleur 179
création 32, 34
découpes 271
direction de 182
Editeur de texte 193
espacement des paragraphes 184
gras 178
italique 178
mise en retrait 184
modification 177
occurrences du bouton 57
orientation 182
propriétés 36
recherche et remplacement 416
saisie 175
souligné 178
vérifier l’orthographe 191
texte de description 285
affectation aux boutons ou aux occurrences 305
texture
ajout à des traits 216
ajout à des trames 217
ton, réglage 139
traçage de points 158
traitements par lots 419
commandes 424
copies de sauvegarde, fichiers 425
enregistrement des fichiers 421
enregistrement sous forme de scripts 425
mise à l’échelle de graphismes 422
noms de fichiers 423
optimisation, paramètres 421
paramètres d’exportation 422
Rechercher et remplacer 423
traits 204
ajout d’une texture 216, 217
bords de 205
choix 205
couleur des outils de dessin 205
création personnalisée 206
définition de la sensibilité 209
enregistrement des paramètres 210
fenêtre 205
modification 204
modification du centrage 209
permutation des couleurs de trait et de trame 196
recherche et remplacement 417
recouvrement du tracé 210
réorientation 209
rétablissement de couleur par défaut 196
trajets 170
ajout d’une texture de trait 216
changement de forme 164
changement de segments adjacents 164
composites 170
conversion de droites en courbes 162
copie et collage 396
courbe de segments adjacents 164
création de traits personnalisés 206
de forme libre 157
édition de traits 204
permutation des couleurs de trait et de trame 196
pousser 168
recadrage 172
rétablissement des couleurs par défaut 196
sélection d’un point. 163
séparation 170
traction 167
trajets de texte
attacher le texte au trajet 187
conversion de texte en trajets 189
déplacement du point de départ du texte 189
détacher des trajets 188
modification de la forme 188
modification du texte attaché à un trajet 188
placement de texte sur un trajet 188
tramage 345
couleurs Websafe 202
trame de couleur 146
trames
ajout d’une texture à 217
application d’une trame de couleur 146
application d’une trame unie 211
application de dégradé 134, 213
application de motif 212
changement des bords 216
couleur des formes de base 211
déplacement 215
diffusion ou anticrénelage 216
enregistrement d’un dégradé personnalisé 216
enregistrement de dégradé 216
illusion de transparence 203
modification de trames unies 211
modificationde dégradé 213
permutation des couleurs de trait et de trame 196
recherche et remplacement 417
recouvrement de traits 210
réglage 215
rétablissement de couleurs par défaut 196
rotation 215
tramage Web 202
transformation de dégradé 215
transformation de motif 215
trames dégradées
ajout d’une nouvelle couleur 214
Index 459
ajustement de la transition entre les couleurs 214
application 213
boîte de dialogue Modifier le dégradé 213
conversion des images en transparents 150
déplacement 215
enregistrement personnalisé 216
modification 213
modification de couleurs 214
réglage 215
rotation 215
suppression de couleurs dans 214
transformation 215
trames texturées
application 212
déplacement 215
réglage 215
rotation 215
trames unies
ajout d’une texture à 217
application 211
transformation
numérique 126
objets 123
par glissement 123
texte 189
textures 215
trames dégradées 215
Transformation numérique, commande 126
transformation, outils
Distorsion 126
Inclinaison 125
Mise à l’échelle 124
transparence
ajout ou suppression de couleurs 350
animation 329
conversion des images en transparents en dégradé 150
dans les fichiers PNG 392
sélection d’une couleur 350
Voir aussi opacité
travail, environnement de 18
travail, espace de 18
triangles, dessin 155
U
Union, commande 171
URL
absolues, saisie 266
affectation à d’un objet Web 266
affectation aux boutons ou occurrences 303
association à des boutons 58
cible, choix de l’option 286
460 Index
panneau 90
recherche et remplacement 418
relatives, saisie 266
V
vectoriel
graphique 75
mode 76
mode, basculer vers 131
objet 19
objet, création 20
Vérificateur de propriétés 109
ancrage 89
annulation de l’ancrage 88
déploiement 89
masquage avec 248
réduction 89
sélection, informations sur 109
utilisation de texte dans 175
verrouillage des claques 231
Vers l’arrière, commande 129
Vers l’avant, commande 129
vignettes
dans le panneau Calques 228
sélection de masques 244
W
WAP, graphiques
WBMP, fichiers
Windows
configuration requise 7
Windows 2000 441
Windows 98 441
Windows ME 441
Windows NT4 441
Windows XP 441
X
Xtras
Voir filtres
Z
zone Couleur de trait 205
zones de transparence 349
zones les plus claires 141
zoom 93
avant, utilisation zoom prédéfinis 94
zone spécifique 95
Zoom, outil 94
">