Adobe Fireworks CS5 Manuel utilisateur

Utilisation
d’ADOBE® FIREWORKS® CS5
Dernière mise à jour le 29/4/2010
©2010 Adobe Systems Incorporated and its licensors. All rights reserved.
Copyright
Utilisation d’Adobe® Fireworks® CS5 sous Windows® et Mac OS
This user guide is protected under copyright law, furnished for informational use only, is subject to change without notice, and should not be construed as a
commitment by Adobe Systems Incorporated. Adobe Systems Incorporated assumes no responsibility or liability for any errors or inaccuracies that may appear
in the informational content contained in this guide.
This user guide is licensed for use under the terms of the Creative Commons Attribution Non-Commercial 3.0 License. This License allows users to copy,
distribute, and transmit the user guide for noncommercial purposes only so long as (1) proper attribution to Adobe is given as the owner of the user guide; and
(2) any reuse or distribution of the user guide contains a notice that use of the user guide is governed by these terms. The best way to provide notice is to include
the following link. To view a copy of this license, visit http://creativecommons.org/licenses/by-nc-sa/3.0/
Adobe, the Adobe logo, Adobe AIR, Acrobat, ActionScript, AIR, Creative Suite, Director, Dreamweaver, Fireworks, Flash, Flash Builder, Flash Catalyst, Flex,
Freehand, GoLive, HomeSite, Illustrator, InCopy, InDesign, Photoshop, Reader, Version Cue, and XMP are either registered trademarks or trademarks of Adobe
Systems Incorporated in the United States and/or other countries.
Apple, Macintosh, and Mac OS are trademarks of Apple Inc., registered in the United States and other countries. Microsoft, Windows, and Windows Vista are
either registered trademarks or trademarks of Microsoft Corporation in the United States and/or other countries. All other trademarks are the property of their
respective owners.
Updated Information/Additional Third Party Code Information available at http://www.adobe.com/go/thirdparty.
Portions include software under the following terms:
This product includes software developed by the Apache Software Foundation (http://www.apache.org/).
The Proximity/Merriam-Webster Inc. Database © Copyright 1990. The Proximity/Franklin Electronic Publishers Database © Copyright 1994. © Copyright
1990, 1994, 1997 All Rights Reserved. Proximity Technology Inc.
This Program was written with MacApp®: ©1985-1988 Apple Computer, Inc. APPLE COMPUTER, INC. MAKES NO WARRANTIES WHATSOEVER,
EITHER EXPRESS OR IMPLIED, REGARDING THIS PRODUCT, INCLUDING WARRANTIES WITH RESPECT TO ITS MERCHANTABILITY OR ITS
FITNESS FOR ANY PARTICULAR PURPOSE. The MacApp software is proprietary to Apple Computer, Inc. and is licensed to Adobe for distribution only for
use in combination with Adobe Fireworks.
PANTONE® colors displayed here may not match PANTONE-identified standards. Consult current PANTONE Color Publications for accurate color.
PANTONE® and other Pantone, Inc. trademarks are the property of Pantone, Inc. © Pantone, Inc., 2008.
Portions contributed by Focoltone Colour System.
Portions produced under Dainippon Ink and Chemical, Inc. copyright of color-data-base derived from Sample Books.
Sorenson Spark™ video compression and decompression technology licensed from Sorenson Media, Inc.
MPEG Layer-3 audio coding technology licensed from Fraunhofer IIS and Thomson.
Flash video compression and decompression is powered by On2 TrueMotion video technology. © 1992-2005 On2 Technologies, Inc. All Rights Reserved.
http://www.on2.com.
Portions contributed by Nellymoser, Inc. (www.nellymoser.com)
This product contains either BSAFE and/or TIPEM software by RSA Security, Inc.
This software is based in part on the work of the Independent JPEG Group.
Adobe Systems Incorporated, 345 Park Avenue, San Jose, California 95110, USA.
Notice to U.S. Government End Users. The Software and Documentation are “Commercial Items,” as that term is defined at 48 C.F.R. §2.101, consisting of
“Commercial Computer Software” and “Commercial Computer Software Documentation,” as such terms are used in 48 C.F.R. §12.212 or 48 C.F.R. §227.7202,
as applicable. Consistent with 48 C.F.R. §12.212 or 48 C.F.R. §§227.7202-1 through 227.7202-4, as applicable, the Commercial Computer Software and
Commercial Computer Software Documentation are being licensed to U.S. Government end users (a) only as Commercial Items and (b) with only those rights
as are granted to all other end users pursuant to the terms and conditions herein. Unpublished-rights reserved under the copyright laws of the United States.
Adobe Systems Incorporated, 345 Park Avenue, San Jose, CA 95110-2704, USA. For U.S. Government End Users, Adobe agrees to comply with all applicable
equal opportunity laws including, if appropriate, the provisions of Executive Order 11246, as amended, Section 402 of the Vietnam Era Veterans Readjustment
Assistance Act of 1974 (38 USC 4212), and Section 503 of the Rehabilitation Act of 1973, as amended, and the regulations at 41 CFR Parts 60-1 through 60-60,
60-250, and 60-741. The affirmative action clause and regulations contained in the preceding sentence shall be incorporated by reference.
iii
Dernière mise à jour le 29/4/2010
Sommaire
Chapitre 1 : Nouveautés
Meilleures performances et stabilité accrue
Précision des pixels
............................................................................ 1
.................................................................................................... 1
Intégration d'Adobe Device Central
.................................................................................... 1
Flux de travail pris en charge avec Flash Catalyst et Flash Builder
Amélioration des extensions
........................................................ 1
........................................................................................... 1
Partage du nuancier entre toutes les applications de la suite
............................................................ 2
Chapitre 2 : Principes de base de Fireworks
A propos de l’utilisation de Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
Graphiques vectoriels et bitmap
....................................................................................... 4
Création d’un document Fireworks
Modèles
..................................................................................... 5
.............................................................................................................. 6
Ouverture et importation de fichiers
................................................................................... 6
Création de fichiers PNG Fireworks à partir de fichiers HTML
Insertion d’objets dans un document Fireworks
Enregistrement de fichiers Fireworks
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
Chapitre 3 : Espace de travail
Principes de base de l’espace de travail
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Navigation dans les documents et affichage de documents
Modification d’une zone de travail
Aperçu dans navigateur
............................................................ 8
........................................................................ 8
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
Annulation et répétition de plusieurs actions
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
Chapitre 4 : Sélection et transformation d’objets
Sélection des objets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
Modification d’une sélection
Sélection de pixels
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
Edition d’objets sélectionnés
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
Mise à l’échelle en 9 tranches
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
Organisation de plusieurs objets
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
Chapitre 5 : Utilisation d’images bitmap
Création d’images bitmap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
Modification d’objets bitmap
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
Retouche des images bitmap
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
Ajustement des couleurs et des tons d’une image bitmap
Atténuation et accentuation des images bitmap
Ajout de bruit à une image
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
Chapitre 6 : Utilisation des objets vectoriels
Formes simples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
formes automatiques
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78
UTILISATION DE FIREWORKS CS5 iv
Dernière mise à jour le 29/4/2010
Formes libres
Sommaire
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
Formes composées
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88
Techniques spécifiques de retouche vectorielle
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89
Chapitre 7 : Utilisation du texte
Entrée de texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
Sélection de texte
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98
Mise en forme et édition de texte
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99
Chapitre 8 : Application de couleurs, de contours et de fonds
Application de couleurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111
Enregistrement de nuanciers
Panneau Kuler
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
Application de contours et de fonds
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120
Chapitre 9 : Utilisation des filtres dynamiques
Application de filtres dynamiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129
Modification et personnalisation des filtres dynamiques
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133
Chapitre 10 : Calques, masques et fondus
Calques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135
Masquage
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140
Fusion et transparence
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152
Chapitre 11 : Styles, symboles et adresses URL
Styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157
Symboles
URL
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 170
Chapitre 12 : Tranches, survols et zones sensibles
Création et modification de tranches . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173
Tranches interactives
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178
Préparation des tranches pour l’exportation
Zones sensibles et cartes-images
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188
Chapitre 13 : Création de boutons et de menus contextuels
Principes de base de la navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193
Création de symboles de bouton
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194
Modification de symboles de bouton
Menus contextuels
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 197
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 199
Chapitre 14 : Prototypage de sites Web et d’interfaces d’applications
Flux de production de prototypage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205
Utilisation de pages Fireworks
Création de dispositions CSS
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211
Prototypage d’applications Flex
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213
Prototypage d’applications Adobe AIR
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216
UTILISATION DE FIREWORKS CS5 v
Dernière mise à jour le 29/4/2010
Sommaire
Chapitre 15 : Création d’animations
Notions de base sur les animations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218
Création de symboles d’animation
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219
Modification de symboles d’animation
Etats
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221
Utilisation des états
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224
A propos des pelures d’oignon
Interpolation
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226
Prévisualisation d’une animation
Optimisation d’une animation
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227
Utilisation d’animations existantes
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 228
Création d’animations Torsion et Nuance
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 229
Chapitre 16 : Création de diaporamas
Création et organisation d’un diaporama
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231
Personnalisation d’un diaporama
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 232
Création d’un lecteur Fireworks personnalisé
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 234
Chapitre 17 : Optimisation et exportation
Utilisation de l’assistant Exportation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 237
Utilisation de l’aperçu de l’image
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 237
Optimisation dans l’espace de travail
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 240
Optimisation des fichiers GIF, PNG, TIFF, BMP et PICT
Optimisation des fichiers JPEG
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 244
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 251
Exportation depuis l’espace de travail
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253
Envoi d’un document Fireworks comme pièce jointe d’un message électronique
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265
Chapitre 18 : Utilisation de Fireworks avec d’autres applications
Utilisation de Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 266
Utilisation de HomeSite, GoLive et d’autres éditeurs HTML
Utilisation de Flash
Utilisation d’Illustrator
Utilisation de Photoshop
Utilisation de Director
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 275
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 276
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 282
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 284
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 289
Partage de métadonnées d’image avec Adobe XMP
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 292
Aperçu de documents Fireworks dans des émulateurs mobiles
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 295
Chapitre 19 : Automatisation des tâches
Recherche et remplacement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 297
Sélection de la source de recherche
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 298
Définition des options de recherche/remplacement dans plusieurs fichiers
Recherche et remplacement de texte
Recherche et remplacement de polices
Recherche et remplacement des couleurs
Recherche et remplacement d’URL
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 299
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 299
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 299
Recherche et remplacement de couleurs non sécurisées pour le Web
Traitement par lots
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 298
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 299
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 300
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 300
Utilisation de commandes pour le traitement par lots
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 304
UTILISATION DE FIREWORKS CS5 vi
Dernière mise à jour le 29/4/2010
Extension de Fireworks
Scripts
Sommaire
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 306
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 307
Gestion des commandes
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 309
Chapitre 20 : Préférences et raccourcis clavier
Définition des préférences . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 311
Sélection et personnalisation des raccourcis clavier
Utilisation des fichiers de configuration
A propos de la réinstallation de Fireworks
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 315
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 316
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 317
Affichage du contenu du module (Mac OS uniquement)
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 317
Dernière mise à jour le 29/4/2010
Chapitre 1 : Nouveautés
Meilleures performances et stabilité accrue
• Nombreuses améliorations apportées aux outils les plus utilisés dans Fireworks pour vous aider à renforcer votre
efficacité
• Meilleures performances globales
• Meilleur contrôle du placement des pixels des éléments de conception
• Outil de tracé transparent mis à jour
Précision des pixels
Une meilleure précision du placement des pixels garantit des conceptions claires et nettes sur tous les périphériques.
Correction rapide et facile des éléments de conception qui ne figurent pas sur un pixel entier.
Intégration d'Adobe Device Central
L'utilisation d'Adobe Device Central permet de sélectionner des profils pour les périphériques mobiles ou autres, pus
crée un flux de travail automatisé pour créer un projet Fireworks. Le projet reprend la taille d'écran et la résolution du
périphérique cible. Une fois la conception terminée, vous pouvez en afficher un aperçu sous différentes conditions au
moyen des fonctionnalités d'émulation de Device Central. Vous pouvez également créer des profils de périphériques
personnalisés.
Flux de conception pour périphériques mobiles amélioré ce qui inclut l'émulation des conceptions interactives avec
l'intégration d'Adobe Device Central.
Flux de travail pris en charge avec Flash Catalyst et Flash
Builder
Créez des interfaces utilisateur avancées et du contenu interactif utilisant de nouveaux flux de travail entre Fireworks
et Flash Catalyst. Procédez à la conception dans Fireworks et sélectionnez des objets, des pages ou des documents
entiers à exporter au format FXG, un nouveau format graphique de type XML pour les outils de la plate-forme Adobe
Flash. Exportez vos conceptions de façon efficace vers Flash Professional, Flash Catalyst et Flash Builder au moyen
d'un script extensible personnalisable.
Amélioration des extensions
Bénéficiez d'un meilleur contrôle lorsque vous travaillez avec d'autres applications : API améliorée prenant en charge les
scripts d'exportation extensibles par l'utilisateur, le traitement par lots et le contrôle avancé du format de fichiers FXG.
1
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 2
Nouveautés
Partage du nuancier entre toutes les applications de la
suite
Meilleur contrôle de la précision des couleurs en exploitant la capacité de Fireworks à partager les nuanciers entres les
applications da Creative Suite. La possibilité de partager le format de fichiers ASE encourage l'échange de couleurs
unifiées entre les concepteurs, y compris ceux qui utilisent Adobe Kuler.
Dernière mise à jour le 29/4/2010
Chapitre 2 : Principes de base de Fireworks
A propos de l’utilisation de Fireworks
Adobe® Fireworks® est un programme polyvalent de création, d’édition et d’optimisation de graphiques Web. Vous
pouvez créer et modifier des images bitmap et vectorielles, créer des effets pour le Web, tels que des survols et des
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. Vous pouvez exporter ou enregistrer un document au format de fichier JPEG, GIF
ou autre. Vous pouvez enregistrer ces fichiers avec des fichiers HTML comportant des tables HTML et du code
JavaScript pour pouvoir les utiliser sur le Web.
Pour visionner un didacticiel vidéo sur les principes de base de Fireworks, reportez-vous à
www.adobe.com/go/lrvid4032_fw_fr.
Dessin et modification d’objets vectoriels et bitmap
Le panneau Outils de Fireworks, organisé en sections, regroupe des outils de dessin et d’édition spécifiques aux objets
vectoriels et bitmap. L’outil que vous sélectionnez détermine si l’objet que vous créez est un objet vectoriel ou bitmap.
Après avoir dessiné un objet ou tracé du texte, toute une gamme d’outils, d’effets, de commandes et de techniques sont
à votre disposition pour enrichir vos graphiques ou créer des boutons de navigation interactifs.
Vous pouvez également importer et modifier des images, notamment aux formats JPEG, GIF, PNG et PSD.
Ajout d’interactivité aux graphiques
Les tranches et les zones sensibles sont des objets Web qui spécifient des zones interactives dans un graphique Web.
Les tranches découpent une image en portions exportables auxquelles vous pouvez appliquer des comportements de
survol, des animations et des liens URL (Uniform Ressource Locator). Sur une page Web, chaque tranche s’affiche
dans une cellule de tableau.
Vous pouvez affecter rapidement des comportements de permutation d’images ou de survol à des graphiques à l’aide
des poignées de survol par glisser-déposer sur des tranches et des zones sensibles. Vous pouvez créer des graphiques
interactifs insolites destinés à la navigation sur des sites Web à l’aide de l’éditeur de boutons et de l’éditeur de menu
contextuel de Fireworks.
Optimisation et exportation des graphiques
Les fonctions d’optimisation sophistiquées de Fireworks vous permettent d’obtenir l’équilibre parfait entre taille de
fichier et qualité d’affichage des graphiques exportés. Le type d’optimisation dépend des besoins des utilisateurs et du
contenu.
Après l’optimisation de vos graphiques, l’étape suivante consiste à les exporter afin de les utiliser sur le Web. A partir
de votre document PNG source Fireworks, vous pouvez exporter divers types de fichiers, notamment des
fichiers JPEG, GIF, GIF animé et des tables HTML contenant des images découpées, vers différents types de fichiers.
3
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 4
Principes de base de Fireworks
Graphiques vectoriels et bitmap
Les ordinateurs affichent les 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.
A propos des 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éfinie par une série de points
décrivant son contour La couleur de la feuille est déterminée par la couleur de son tracé (le contour) et la couleur de la
zone délimitée par ce tracé (le fond).
Les graphiques vectoriels ne dépendent pas de la résolution. Cela signifie que la qualité de l’aspect d’un graphique
vectoriel est conservée lorsque vous modifiez sa couleur, sa taille, sa forme ou sa position, ou que la résolution du
périphérique de sortie change.
A propos des graphiques bitmap
Les graphiques bitmap sont composés de points (pixels) organisés selon une grille. L’écran de votre ordinateur est une
grande grille de pixels. Dans une version bitmap de la feuille, l’image est déterminée par l’emplacement et la valeur
chromatique de l’ensemble des pixels de la grille. Chaque pixel est associé à une couleur. Lorsque ces points sont
affichés à la bonne résolution, ils s’emboîtent comme les carreaux d’une mosaïque.
Lorsque vous modifiez un graphique bitmap, vous modifiez des pixels et non des lignes et des courbes. Ces graphiques
bitmap dépendent de la résolution, ce qui signifie que les données décrivant l’image sont conditionnées par une grille
de taille spécifique. L’agrandissement d’un graphique bitmap modifie la distribution des pixels dans la grille, ce qui
peut rendre les bords de l’image légèrement dentelés. L’affichage d’un graphique bitmap sur un périphérique de sortie
dont la résolution est inférieure à celle de l’image risque également d’en altérer la qualité.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 5
Principes de base de Fireworks
Création d’un document Fireworks
Les documents créés dans Fireworks sont enregistrés au format PNG (Portable Network Graphic). PNG est le format
de fichier natif de Fireworks.
Les graphiques créés dans Fireworks peuvent être exportés ou enregistrés sous divers formats graphiques et Web.
Quels que soient les paramètres d’optimisation et d’exportation sélectionnés, le fichier PNG Fireworks d’origine est
conservé afin de pouvoir le modifier plus tard très facilement.
Création d’un nouveau document
1 Choisissez Fichier > Nouveau.
La boîte de dialogue Nouveau document s’affiche.
2 Entrez les paramètres du document, puis cliquez sur OK.
Remarque : utilisez la fenêtre contextuelle de la case de couleur Personnalisée pour sélectionner une couleur de zone
de travail personnalisée.
Définition des dimensions par défaut pour le nouveau document
Lorsque vous ouvrez Fireworks pour la première fois, les dimensions suivantes s'affichent dans la boîte de dialogue
Nouveau document par défaut :
• 660 x 440 (Windows)
• 500 x 500 (Mac)
Les paramètres de la boîte de dialogue Nouveau document restent inchangés lorsque vous modifiez la taille de la zone
de travail dans Fireworks.
Les paramètres par défaut changent lorsque vous copiez un objet. Les dimensions de l'objet copié (dans le PressePapiers) sont reprises automatiquement par la boîte de dialogue Nouveau document.
Pour supprimer les dimensions d'un objet du Presse-papiers, procédez de la façon suivante (Windows) :
1 Créez un document avec les dimensions voulues.
2 Enregistrez ce document et fermez Fireworks.
3 Ouvrez à nouveau Fireworks et créez un document.
Les dimensions du document enregistré précédemment s'affichent dans la boîte de dialogue Nouveau document.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 6
Principes de base de Fireworks
Pour Mac OS, Fireworks conserve la dimension de l'objet copié précédemment lors de la création d'un document. Ceci
est dû au fat que le contenu du Presse-Papiers est conservé jusqu'à ce que vous coupiez ou copiez d'autres éléments,
tels que du texte. Si vous copiez des éléments sans rapport avec les dimensions, puis sélectionnez « Nouveau », la taille
enregistrée auparavant s'affiche par défaut.
Création d’un document de la même taille qu’un objet du Presse-papiers
1 Copiez un objet dans le Presse-papiers depuis un autre document Fireworks, un navigateur Web ou toute autre
application adéquate.
2 Choisissez Fichier > Nouveau.
La boîte de dialogue Nouveau document s’affiche, présentant la hauteur et la largeur de l’objet dans le Pressepapiers.
3 Sélectionnez une résolution et une couleur de zone de travail, puis cliquez sur OK.
4 Choisissez Edition > Coller pour coller dans le nouveau document l’objet en provenance du Presse-papiers.
Modèles
Enregistrez un fichier Fireworks en tant que modèle et créez des fichiers à partir de ce modèle. Le modèle est enregistré
au format PNG Fireworks. Fireworks propose une liste de modèles personnalisés prédéfinis pour les périphériques
mobiles, prototypes, sites Web et cadres Web que vous personnalisez.
Création d’un modèle
1 Créez un fichier. Vous pouvez ajouter des espaces réservés de création ou de contenu afin d’uniformiser l’aspect
des documents créés à partir de ce modèle.
2 Sélectionnez Fichier > Enregistrer comme modèle pour enregistrer le fichier en tant que fichier de modèle PNG
Fireworks.
Création d’un fichier à partir d’un modèle
1 Sélectionnez Fichier > Nouveau à partir d’un modèle.
2 Sélectionnez le modèle souhaité pour créer le fichier et cliquez sur Ouvrir.
Remarque : Le modèle contient des données propres à Fireworks, telles que des pages, calques et informations vectorielles.
Ouverture et importation de fichiers
Remarque : lorsque vous importez un fichier depuis Adobe Dreamweaver®, Fireworks conserve la plupart des
comportements JavaScript, mais pas tous. Si Fireworks prend en charge un comportement particulier, ce dernier est
reconnu et conservé lorsque vous réimportez le fichier dans Dreamweaver.
Ouverture d'un document Fireworks
❖ Choisissez Fichier > Ouvrir, puis sélectionnez le fichier.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 7
Principes de base de Fireworks
Pour ouvrir un fichier sans écraser la version précédente, cliquez sur Ouvrir en tant que Sans titre, puis enregistrez le
fichier en utilisant un autre nom.
Ouverture d’un fichier récemment fermé
1 Choisissez Fichier > Ouvrir les fichiers récents.
2 Sélectionnez un fichier dans le sous-menu.
Ouverture d’un fichier récemment fermé lorsque aucun fichier n’est ouvert
❖ Cliquez sur le nom du fichier dans la page de démarrage.
Ouverture de graphiques créés dans d’autres applications
Vous pouvez ouvrir des fichiers créés dans d’autres applications ou formats de fichier, notamment Photoshop®, Adobe
Illustrator®, WBMP, EPS, JPEG, GIF et les fichiers GIF animés.
Lorsque vous ouvrez un format de fichier autre que PNG en choisissant la commande Fichier > Ouvrir, vous créez un
nouveau document PNG Fireworks basé sur le fichier que vous ouvrez. Vous pouvez utiliser toutes les fonctions de
Fireworks pour modifier l’image. Vous pouvez ensuite sélectionner Enregistrer sous pour enregistrer votre travail dans
un nouveau fichier PNG Fireworks, ou tout autre format.
Dans certains cas, vous pouvez enregistrer le fichier sous son format d’origine. Le cas échéant, tous les calques de
l’image fusionnent, ce qui empêche d’agir sur les fonctions Fireworks ajoutées à l’image.
Vous pouvez enregistrer les formats de fichier suivants directement depuis Fireworks : PNG Fireworks, GIF, GIF
animé, JPEG, BMP, WBMP, TIFF, SWF, AI, PSD et PICT (Mac uniquement).
Remarque : Fireworks enregistre les images TIFF 16 bits à une profondeur de couleur de 24 bits.
GIF animé
• Importez un fichier GIF animé en tant que symbole d’animation, puis modifiez et déplacez tous les éléments de
l’animation en tant qu’une seule unité. Pour créer de nouvelles instances du symbole, servez-vous du
panneau Bibliothèque de documents.
Remarque : lorsque vous importez un GIF animé, la cadence des états est de 0,07 seconde par défaut. Si nécessaire,
utilisez le panneau Etats pour rétablir la cadence d’origine.
• Ouvrez un fichier GIF animé de la même manière qu’un fichier GIF ordinaire. Les éléments du fichier GIF sont
placés en tant qu’image distincte dans un état de Fireworks. Dans Fireworks, vous pouvez convertir le graphique
en un symbole d’animation.
Fichiers EPS
Fireworks ouvre la plupart des fichiers EPS en tant qu’images bitmap aplaties, dont tous les objets sont rassemblés sur
un seul et même calque. Certains fichiers EPS exportés à partir d’Adobe Illustrator conservent leurs informations
vectorielles.
Fichiers PSD
Fireworks peut ouvrir des fichiers PSD créés dans Photoshop tout en conservant la plupart des fonctions PSD,
notamment les calques hiérarchiques, les effets de calques et les modes de fusion couramment utilisés. Pour
personnaliser l’importation PSD, faites appel aux différentes options du panneau Importation/Ouverture PS de la
boîte de dialogue Préférences.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 8
Principes de base de Fireworks
Fichiers WBMP
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).
L’extension Import Multiple Files permet d’importer plusieurs fichiers sélectionnés dans de nouvelles pages d’un
fichier PNG Fireworks. Cet utilitaire permet de regrouper les fichiers de projet créés dans des versions antérieures de
Fireworks. Vous pouvez également importer des fichiers PNG aplatis, PSD, AI, BMP, Freehand, GIF, GIF animés, JPEG,
PICT et TIFF. Vous pouvez télécharger cette extension sur la page http://www.adobe.com/go/learn_fw_multiplepages_fr.
Création de fichiers PNG Fireworks à partir de
fichiers HTML
Dans Fireworks, vous pouvez ouvrir et importer des contenus HTML créés dans d’autres applications et contenant des
éléments de table HTML.
Ouverture de toutes les tables d’un fichier HTML
1 Choisissez Fichier > Reconstituer la table.
2 Sélectionnez le fichier HTML contenant les tables à ouvrir, puis cliquez sur Ouvrir.
Chaque table s’affiche dans sa propre fenêtre de document.
Ouverture de la première table d’un fichier HTML
1 Choisissez Fichier > Ouvrir.
2 Sélectionnez le fichier HTML contenant la table à ouvrir, puis cliquez sur Ouvrir.
La première table du fichier HTML s’affiche dans une nouvelle fenêtre de document.
Importation de 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, puis cliquez sur Ouvrir.
3 Cliquez pour placer le point d’insertion à l’endroit où vous souhaitez que la table importée apparaisse.
Remarque : Fireworks peut importer des documents qui utilisent un codage UTF-8 ainsi que ceux écrits en XHTML.
Insertion d’objets dans un document Fireworks
Glissement d’une image ou d’un texte dans Fireworks
Utilisez la méthode du glisser-déposer pour importer des objets vectoriels, des images bitmap ou du texte à partir
d’applications prenant en charge ce procédé.
❖ A partir de l’autre application, faites glisser l’objet ou le texte dans Fireworks.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 9
Principes de base de 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 coller depuis le Presse-papiers des objets ou du texte aux formats suivants :
• Adobe FreeHand 7 ou version ultérieure
• Adobe Illustrator
• PNG
• PICT (Mac OS)
• DIB (Windows)
• BMP (Windows)
• Texte ASCII
• EPS
• WBMP
• TXT
• RTF
1 Dans l’autre application, copiez l’objet ou le texte à coller.
2 Dans Fireworks, collez l’objet ou le texte dans votre document.
Localisation des objets collés
L’emplacement des fichiers collés dépend de la sélection :
• Si au moins un objet d’un seul calque est sélectionné, l’objet collé est placé devant (empilé directement au-dessus
de) l’objet sélectionné sur ce même calque.
• Si le calque lui-même est sélectionné, ainsi que tous ses objets ou aucun d’entre eux, l’objet collé est placé devant
(empilé directement au-dessus de) l’objet supérieur (placé sur le dessus) de ce même calque.
• Si au moins deux objets de plusieurs calques sont sélectionnés, l’objet collé est placé devant (empilé directement audessus de) l’objet supérieur (placé sur le dessus) du calque supérieur (du dessus).
• Si le calque Web ou un objet du calque Web est sélectionné, l’objet collé est placé devant (empilé au-dessus de) tous
les autres objets du calque inférieur (du dessous).
Remarque : le calque Web est un calque spécial qui contient tous les objets Web. Il est toujours placé en haut du
panneau Calques.
Rééchantillonnage des objets collés
Le rééchantillonnage ajoute ou supprime des pixels dans une image bitmap redimensionnée pour qu’elle se rapproche
le plus possible de l’aspect de l’image bitmap d’origine. Le rééchantillonnage d’une image bitmap dans une résolution
supérieure provoque généralement une légère perte de qualité. Le rééchantillonnage à une résolution inférieure
provoque toujours une perte de données et donc une perte de qualité.
Rééchantillonnage d’un objet bitmap par collage
1 Copiez l’objet bitmap dans le Presse-papiers de Fireworks ou d’un autre programme.
2 Choisissez Edition > Coller dans Fireworks.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 10
Principes de base de Fireworks
3 Si la résolution de l’image bitmap qui se trouve dans le Presse-papiers est différente de celle du document actif,
choisissez une option de rééchantillonnage.
Oui Conserve la largeur et la hauteur initiales de l’image bitmap collée, en ajoutant ou en supprimant des pixels en
fonction des besoins.
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 d’un fichier PNG dans le calque d’un document Fireworks
Lorsque vous importez des fichiers PNG Fireworks sur le calque actif du document Fireworks en cours, des zones
sensibles et des tranches sont placées sur le calque Web du document. Fireworks conserve les proportions de l’image
importée.
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 Accédez au fichier à importer, puis cliquez sur Ouvrir.
4 Sur la zone de travail, positionnez le pointeur d’importation à l’endroit où vous voulez placer le coin supérieur
gauche de l’image.
5 Procédez de l’une des manières suivantes :
• Cliquez pour importer l’image en taille réelle.
• Faites glisser le pointeur d’importation pour redimensionner l’image importée.
Importation à partir d’un scanner ou d’un appareil photo numérique
Vous pouvez importer des images à partir d’un scanner ou d’un appareil photo numérique uniquement s’il est
compatible TWAIN (Windows) ou s’il utilise la fonctionnalité de capture d’image intégrée (Mac OS). Les images
importées dans Fireworks à partir d’un appareil photo numérique ou d’un scanner sont ouvertes en tant que nouveaux
documents.
Avant d’importer des images dans Fireworks, installez tous les pilotes, modules et modules externes nécessaires pour
l’appareil photo numérique ou le scanner.
Le dossier des modules externes se trouve dans le dossier de l’application Fireworks. Sous Mac OS, Fireworks
recherche automatiquement les modules externes Photoshop Acquire dans ce dossier.
Direction de Fireworks vers les modules externes Photoshop Acquire
1 Dans Fireworks, choisissez Edition > Préférences (Windows) ou Fireworks > Préférences (Mac OS).
2 Cliquez sur la catégorie Modules externes.
3 Sélectionnez Modules externes Photoshop, puis accédez au dossier des modules externes.
Si la boîte de dialogue de sélection du dossier de modules externes Photoshop (Windows) ou Choisissez un dossier
(Mac OS) ne s’ouvre pas automatiquement, naviguez jusqu’au dossier.
Importation d’une image à partir d’un appareil photo numérique (Windows)
1 Connectez l’appareil photo à votre ordinateur.
2 Dans Fireworks, choisissez Fichier > Numérisation, puis sélectionnez Acquisition Twain ou Source Twain.
3 Sélectionnez la source des images et les images à importer.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 11
Principes de base de Fireworks
L’interface utilisateur de votre logiciel d’appareil photo s’affiche.
4 Suivez les instructions pour appliquer les paramètres.
Importation d’une image à partir d’un appareil photo numérique (Mac OS)
1 Connectez l’appareil photo à votre ordinateur.
2 Dans Fireworks, choisissez Fichier > Acquisition, puis sélectionnez Acquisition appareil photo ou Source appareil
photo.
3 Sélectionnez l’appareil photo et les images à importer.
4 Suivez les instructions pour appliquer les paramètres.
Importation d’une image à partir d’un scanner
1 Connectez le scanner à votre ordinateur.
2 Installez le logiciel qui accompagne le scanner, si cela n’a pas déjà été fait.
3 Procédez de l’une des manières suivantes :
• (Windows) Dans Fireworks, choisissez Fichier > Scanner, puis sélectionnez Acquisition Twain ou
Source Twain.
• (Mac OS) Dans Fireworks, choisissez Fichier > Acquisition, puis sélectionnez Acquisition Twain ou
Source Twain.
Remarque : pour la plupart des modules TWAIN ou des modules externes Photoshop Acquire, vous pouvez
spécifier des options complémentaires dans d’autres boîtes de dialogue.
4 Suivez les instructions pour appliquer les paramètres.
Enregistrement de fichiers Fireworks
Lorsque vous créez un document ou ouvrez des fichiers au format PSD ou HTML, choisissez la commande Fichier >
Enregistrer pour créer un fichier PNG Fireworks. Les fichiers PNG Fireworks présentent les avantages suivants :
• 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.
• Vous pouvez découper en plusieurs tranches des graphiques complexes dans le fichier PNG et les exporter dans
différents formats et avec divers paramètres d’optimisation.
Si Fireworks met du temps à enregistrer un document complexe, vous pouvez modifier d’autres documents ouverts en
attendant que l’opération de sauvegarde se termine.
Enregistrement d’un fichier Fireworks au format PNG pour l’utiliser dans une
version antérieure
1 Choisissez Fichier > Exporter.
2 Recherchez l’emplacement où vous voulez enregistrer le fichier.
3 Si le fichier Fireworks contient plusieurs pages, sélectionnez la commande Pages vers Fichiers dans le menu
contextuel Exporter.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 12
Principes de base de Fireworks
4 Sélectionnez Images ou PNG Fireworks dans la liste déroulante Exporter en tant que. Si vous sélectionnez Images,
chaque page est enregistrée au format de fichier par défaut. Vous pouvez définir ce format de fichier via le
panneau Optimisation. Pour plus de détails, reportez-vous à la section « Optimisation et exportation » à la
page 237.
Tous les objets des calques supérieurs sont enregistrés lors de l’exportation. Les éléments des calques inférieurs ne
sont pas exportés.
Enregistrement de tous les documents ouverts
Vous pouvez enregistrer tous les documents ouverts tout en continuant de travailler dessus. Vous pouvez également
spécifier des noms de fichiers pour les documents ne portant pas de nom. Les documents qui ont été modifiés depuis
le dernier enregistrement apparaissent avec un astérisque (*) à côté du nom du fichier dans l’onglet du document.
❖ Choisissez Commandes > Enregistrer tout.
Remarque : L’utilitaire Auto Backup de Fireworks permet de sauvegarder automatiquement tous les documents
Fireworks ouverts. Pour le télécharger à partir d’Adobe AIR Marketplace, accédez à
http://www.adobe.com/go/learn_fw_autobackuputility_fr.
Enregistrement de documents dans d’autres formats
Si vous choisissez la commande Fichier > Ouvrir pour ouvrir un fichier dans un format autre que PNG, vous pouvez
ensuite sélectionner la commande Fichier > Enregistrer sous pour sauvegarder votre travail en tant que nouveau
fichier PNG Fireworks ou dans un autre format.
Pour les types de fichier suivants, vous pouvez choisir la commande Fichier > Enregistrer pour sauvegarder le
document dans son format d’origine : PNG Fireworks, GIF, GIF animé, JPEG, BMP, WBMP, TIFF, SWF, AI, PSD et
PICT (Mac OS uniquement). Fireworks enregistre les images TIFF 16 bits à une profondeur de couleur de 24 bits.
Remarque : si vous enregistrez un fichier PNG en tant que fichier bitmap, tel que GIF ou JPEG, les objets graphiques que
vous avez manipulés dans le fichier PNG ne sont plus disponibles dans le fichier bitmap. Si vous retouchez l’image, éditez
le fichier PNG source, puis exportez-le de nouveau.
Ajout d’une image
1 Sélectionnez Commandes > Création > Ajouter image.
2 Sélectionnez un motif et définissez une taille de cadre.
3 Cliquez sur OK.
Réinitialisation des messages d’avertissement
Si vous avez désactivé l’affichage des messages d’avertissement, vous pouvez de nouveau les activer.
❖ Sélectionnez Commandes > Réinit. Mess. Avertissement.
Capture d’écran (Windows uniquement)
1 Sélectionnez Commandes > Capturer.
2 Accédez à la fenêtre dans laquelle vous souhaitez effectuer une capture d’écran.
3 Cliquez sur OK et faites glisser le pointeur pour sélectionner la zone de la fenêtre.
4 Collez le contenu du Presse-papiers sur la zone de travail ou dans l’application de retouche d’image.
Dernière mise à jour le 29/4/2010
Chapitre 3 : Espace de travail
Principes de base de l’espace de travail
Présentation de l’espace de travail Fireworks
Lorsque vous ouvrez pour la première fois un document dans Adobe® Fireworks®, l’espace de travail se compose du
panneau Outils, de l’inspecteur des propriétés, des menus et d’autres panneaux. Le panneau Outils, à gauche de l’écran,
contient des catégories étiquetées comprenant les groupes d’outils bitmap, vectoriels et Web. L’inspecteur des
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 ancrés en groupes le long du bord droit de l’écran. La
fenêtre du document apparaît au centre du programme.
Page de démarrage
Lorsque vous lancez Fireworks sans ouvrir de document, la page de démarrage de Fireworks s’affiche dans
l’environnement de travail. Cette page vous permet d’accéder rapidement aux didacticiels Fireworks, aux fichiers
récents et à Fireworks Exchange, d’où vous pouvez améliorer les fonctions de Fireworks. Pour désactiver la page de
démarrage, cliquez sur Ne plus afficher cette fenêtre lorsque la page de démarrage s’ouvre.
13
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 14
Espace de travail
A propos des panneaux dans Fireworks
Les panneaux sont des commandes flottantes qui permettent de modifier l’aspect d’un objet sélectionné ou des
éléments du document. Ils permettent, entre autres, de travailler sur des états, des calques, des symboles et des
nuanciers. Il est possible de faire glisser les panneaux de façon à les disposer en fonction de vos préférences.
Panneau Optimisation Il permet de gérer les paramètres de taille et de type d’un fichier et de travailler avec la palette
de couleurs du fichier ou de la tranche.
Panneau Calques Il structure un document et fournit des options de création de suppression et de manipulation de
calques.
Panneau Bibliothèque commune Il affiche le contenu du dossier Common Library contenant des symboles. Vous
pouvez facilement faire glisser des occurrences de ces symboles du panneau Bibliothèque de documents vers votre
document.
Panneau Pages Il vous permet d’afficher les pages du fichier actif et comporte des options de manipulation des pages.
Etats, panneau Il affiche les états du fichier actif et comporte des options de création d’animations.
Historique, panneau Il répertorie les commandes que vous avez utilisées récemment de façon à vous permettre de les
annuler et de les rétablir rapidement. En outre, vous pouvez sélectionner plusieurs actions puis les enregistrer et les
réutiliser comme des commandes.
Panneau Formes automatiques Il contient les formes automatiques qui ne sont pas affichées dans le panneau Outils.
Panneau Styles Il vous permet de stocker et de réutiliser des combinaisons de caractéristiques d’objets ou de
sélectionner un style stocké.
Panneau Bibliothèque de documents Il contient des symboles graphiques, de bouton et d’animation qui figurent déjà
dans le document Fireworks actif. Vous pouvez facilement faire glisser les occurrences de ces symboles du
panneau Bibliothèque de documents vers votre document. Vous pouvez modifier l’ensemble des occurrences en
modifiant uniquement le symbole.
URL, panneau Il vous permet de créer des bibliothèques contenant des URL fréquemment utilisées.
Panneau Mélangeur Il permet de créer de nouvelles couleurs et de les ajouter à la palette de couleurs du document
actif, ou de les appliquer aux objets sélectionnés.
Panneau Nuancier Il gère la palette de couleurs du document actif.
Panneau Info Il fournit des informations sur les dimensions des objets sélectionnés et les coordonnées exactes du
pointeur au cours de son déplacement dans la zone de travail.
Panneau Comportements Il permet de gérer les comportements qui déterminent ce qui se produit lorsque des zones
sensibles ou des tranches réagissent aux déplacements de la souris.
Panneau Rechercher Il 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.
Panneau Alignement Il regroupe les commandes d’alignement et de répartition des objets dans la zone de travail.
Panneau Propriétés de forme automatique Il vous permet de modifier les propriétés d’une forme automatique après
l’avoir insérée dans votre document.
Panneau Palette de couleurs (Fenêtre > Autres) Il vous permet de créer et d’échanger des palettes de couleurs,
d’exporter des nuanciers ACT personnalisés, d’explorer les différentes gammes de couleur et d’accéder aux contrôles
couramment utilisés pour choisir des couleurs.
Panneau Edition d’images (Fenêtre > Autres) Il vous permet d’organiser les outils et les options utilisés pour modifier
les objets bitmap dans un panneau.
UTILISATION DE FIREWORKS CS5 15
Dernière mise à jour le 29/4/2010
Espace de travail
Panneau Tracé (Fenêtre > Autres) Il vous permet d’accéder rapidement à de nombreuses commandes associées aux
tracés.
Panneau Caractères spéciaux (Fenêtre > Autres) Il vous permet d’afficher les caractères spéciaux utilisables dans les
blocs de texte.
Panneau Propriétés du symbole Il gère les propriétés personnalisables des symboles graphiques.
Présentation de l’espace de travail
Vous pouvez créer et manipuler vos documents et fichiers à l’aide de divers éléments tels que des panneaux, barres et
fenêtres. Un espace de travail désigne l’organisation de ces éléments. Les espaces de travail des différentes applications
de la suite Adobe® Creative Suite® 5 ont une apparence similaire, facilitant ainsi le passage d’une application à une
autre. Vous pouvez également adapter chaque application aux exigences de votre travail, en créant votre propre espace
de travail ou en effectuant une sélection parmi ceux prédéfinis.
Bien que la disposition de l’espace de travail par défaut varie selon les applications, la manipulation des éléments est
pratiquement identique dans chacune d’elles.
A
B
C
D
E
G
F
H
Espace de travail Illustrator par défaut
A. Documents sous forme d’onglets B. Barre d’application C. Sélecteur d'espace de travail D. Barre de titre de panneau E. Panneau Contrôle
F. Panneau Outils G. Bouton de réduction à la taille d’une icône H. Quatre groupes de panneaux en ancrage vertical
• La barre d’application occupe la partie supérieure et contient un sélecteur permettant de basculer vers un autre
espace de travail, des menus (sous Windows uniquement), ainsi que d’autres commandes d’application. Sous Mac
et pour certains produits, vous pouvez l’afficher ou la masquer à l’aide du menu Fenêtre.
UTILISATION DE FIREWORKS CS5 16
Dernière mise à jour le 29/4/2010
Espace de travail
• Le panneau Outils contient des outils permettant de créer et de modifier des images, des illustrations, des éléments
de page, etc. Les outils connexes sont regroupés.
• Le panneau Contrôle affiche des options relatives à l’outil sélectionné. Dans Illustrator, le panneau Contrôle affiche
des options relatives à l’objet sélectionné. (Il est appelé Barre d’options dans Adobe Photoshop®. Dans Adobe
Flash®, Adobe Dreamweaver® et Adobe Fireworks®, il est appelé Inspecteur de propriétés et inclut les propriétés
relatives à l’élément actuellement sélectionné.)
• La fenêtre de document affiche le fichier sur lequel vous travaillez. Les fenêtres de document peuvent présenter un
onglet et, dans certains cas, être regroupées et ancrées.
• Les panneaux vous permettent de contrôler et de modifier votre travail. Citons notamment le panneau Montage
dans Adobe Flash, le panneau Pinceau dans Adobe Illustrator, le panneau Calques dans Adobe Photoshop® et le
panneau Styles CSS dans Adobe Dreamweaver. Ils peuvent être regroupés, empilés ou ancrés.
• Le Cadre de l’application regroupe tous les éléments des espaces de travail dans une seule et même fenêtre uniforme,
ce qui permet de manipuler toutes les applications comme s’il s’agissait d’une seule entité. Lorsque vous déplacez
ou que vous redimensionnez le Cadre de l’application ou l’un de ses éléments, tous les éléments qu’il contient sont
réagencés pour éviter tout chevauchement. Les panneaux ne disparaissent pas lorsque vous changez d’application
ou lorsque vous cliquez par erreur à côté de l’application. Si vous utilisez plusieurs applications, vous pouvez les
placer côte à côte à l’écran ou sur plusieurs moniteurs.
Si vous préférez l’interface utilisateur Mac classique que vous pouvez personnaliser à votre convenance, il vous
suffit de désactiver le Cadre de l’application. Dans Adobe Illustrator® par exemple, sélectionnez la commande
Fenêtre > Cadre de l’application pour l’activer ou le désactiver. (Dans Flash, le Cadre de l'application est activé en
permanence pour Mac et Dreamweaver pour Mac n'en utilise pas.)
Affichage et masquage de tous les panneaux
• (Illustrator, Adobe InCopy®, Adobe InDesign®, Photoshop, Fireworks) Pour afficher ou masquer tous les panneaux,
y compris les panneaux Outils et Contrôle, appuyez sur la touche de tabulation.
• (Illustrator, InCopy, InDesign, Photoshop) Pour afficher ou masquer tous les panneaux, à l’exception des panneaux
Outils et Contrôle, appuyez sur les touches Maj+tabulation.
Vous pouvez afficher temporairement les panneaux masqués si l’option Afficher automatiquement les panneaux
masqués est sélectionnée dans les préférences Interface. Cette option est toujours activée dans Illustrator. Déplacez
le pointeur vers le bord de la fenêtre de l’application (Windows®) ou vers le bord de l’écran (Mac OS®) et laissez le
pointeur au-dessus de la bande qui s’affiche.
• (Flash, Dreamweaver, Fireworks) Pour afficher ou masquer tous les panneaux, appuyez sur la touche F4.
Affichage des options de panneau
❖ Cliquez sur l’icône de menu de panneau
dans le coin supérieur droit du panneau.
L’ouverture d’un menu est possible même lorsque le panneau est réduit.
Dans Photoshop, vous pouvez modifier le corps de la police du texte du panneau Contrôle, des panneaux et des
info-bulles. Choisissez une option dans le menu Corps de la police de l’interface utilisateur des préférences de
l’interface.
Réglage de la luminosité du panneau (Illustrator)
❖ Faites glisser le curseur Luminosité dans les préférences de l’interface utilisateur. Cette commande affecte tous les
panneaux, y compris le panneau Contrôle.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 17
Espace de travail
Reconfiguration du panneau Outils
Vous pouvez afficher les outils du panneau Outils dans une seule colonne ou côte à côte dans deux colonnes. (Cette
fonction n’est pas disponible dans le panneau Outils de Fireworks et Flash.)
Dans InDesign et InCopy, une option des préférences d’interface vous permet également de basculer d’un affichage en
une colonne vers un affichage en deux colonnes.
❖ Cliquez sur la double flèche dans la partie supérieure du panneau Outils.
Gestion des fenêtres et des panneaux
Pour créer un espace de travail personnalisé, vous déplacez et manipulez les fenêtres de document et les panneaux.
Vous pouvez également enregistrer des espaces de travail, puis passer de l’un à l’autre. Dans Fireworks, renommer les
espaces de travail personnalisés peut provoquer un comportement inattendu.
Remarque : les exemples suivants sont basés sur Photoshop. L’espace de travail est le même dans tous les produits.
Réorganisation, ancrage ou déplacement des fenêtres de document
Les fenêtres de document comportent des onglets lorsque plusieurs fichiers sont ouverts.
• Pour modifier l’ordre des onglets de la fenêtre de document, faites glisser un onglet de la fenêtre à l’emplacement
voulu dans le groupe.
• Pour annuler l’ancrage d’une fenêtre de document à un groupe de fenêtres, faites glisser l’onglet de cette fenêtre
hors du groupe.
Remarque : dans Photoshop, vous pouvez également sélectionner Fenêtre > Réorganiser > Afficher dans une fenêtre
flottante pour afficher une seule fenêtre flottante de document ou Fenêtre > Réorganiser > Tout afficher dans des
fenêtres flottantes pour afficher simultanément toutes les fenêtres flottantes de document. Pour plus d’informations,
voir la note technique kb405298.
Remarque : Dreamweaver ne prend pas en charge l’ancrage des fenêtres de document ni son annulation. Utilisez le
bouton Réduire de la fenêtre de document pour créer des fenêtres flottantes (sous Windows), ou Fenêtre > Mosaïque
verticale pour créer des fenêtres de document côte à côte. Pour plus d’informations sur cette rubrique, recherchez
« Mosaïque verticale » dans l’aide de Dreamweaver.
• Pour ancrer une fenêtre de document à un groupe de fenêtres de document distinct, faites glisser cette fenêtre dans
le groupe.
• Pour créer des groupes de documents empilés ou juxtaposés, faites glisser la fenêtre vers l’une des zones de largage
situées en haut, en bas ou sur les côtés d’une autre fenêtre. Vous pouvez également sélectionner une disposition
pour le groupe en utilisant le bouton Disposition de la barre d’application.
Remarque : certains produits ne prennent pas en charge cette fonctionnalité. Cependant, votre produit peut présenter
des commandes Cascade et Mosaïque (ou Juxtaposer), sous le menu Fenêtre, pour vous permettre d’organiser vos
documents.
• Dans un groupe à onglets, pour passer à un autre document lors du glissement d’une sélection, faites glisser cette
sélection sur l’onglet du document souhaité pendant un moment.
Remarque : certains produits ne prennent pas en charge cette fonctionnalité.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 18
Espace de travail
Ancrage et annulation d’ancrage de panneaux
Un dock est un ensemble de panneaux ou de groupes de panneaux affichés ensemble, généralement en position
verticale. Pour ancrer et annuler l’ancrage des panneaux, insérez-les dans le dock et déplacez-les hors du dock.
• Pour ancrer un panneau, cliquez sur l’onglet correspondant et faites-le glisser dans le dock, au-dessus, sous ou entre
d’autres panneaux.
• Pour ancrer un groupe de panneaux, cliquez sur sa barre de titre (barre vide de couleur unie située au-dessus des
onglets) et faites-le glisser dans le dock.
• Pour supprimer un panneau ou un groupe de panneaux, faites-le glisser en dehors du dock en cliquant sur l’onglet
ou la barre de titre. Vous pouvez faire glisser l’élément vers un autre dock ou le rendre flottant.
Déplacement du panneau Navigation vers un nouveau dock ; cette opération est indiquée par une surbrillance verticale bleue.
Panneau Navigation dans son propre dock
Vous pouvez faire en sorte que les panneaux n’occupent pas la totalité de l’espace disponible dans un dock. Faites
glisser le bord inférieur du dock vers le haut de sorte qu’il ne coïncide plus avec le bord de l’espace de travail.
Déplacement de panneaux
Lorsque vous déplacez des panneaux, des zones de largage en surbrillance bleue apparaissent : il s’agit des zones dans
lesquelles vous pouvez déplacer le panneau. Vous pouvez, par exemple, déplacer un panneau vers le haut ou vers le bas
en le faisant glisser sur la fine zone de largage bleue située au-dessus ou sous un autre panneau. Si vous faites glisser le
panneau vers un emplacement autre qu’une zone de largage, ce dernier flotte dans l’espace de travail.
Remarque : la position de la souris active la zone de largage (au lieu de la position du panneau). Si la zone de largage ne
s'affiche pas, faites glisser la souris à l'emplacement où devrait se situer la zone de largage.
• Pour déplacer un panneau, faites-le glisser en cliquant sur son onglet.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 19
Espace de travail
• Pour déplacer un groupe de panneaux, faites glisser la barre de titre.
A
B
C
La fine zone de largage bleue indique que le panneau Couleur va être ancré seul au-dessus du groupe de panneaux Calques.
A. Barre de titre B. Onglet C. Zone de largage
Pour empêcher l’ancrage d’un panneau, appuyez sur la touche Ctrl (Windows) ou Commande (Mac OS) lors de son
déplacement. Pour annuler l’opération, appuyez sur la touche Echap lors du déplacement du panneau.
Ajout et suppression de panneaux
Lorsque vous supprimez tous les panneaux d’un dock, ce dernier disparaît. Vous pouvez créer un dock en déplaçant
les panneaux vers le bord droit de l’espace de travail jusqu’à ce qu’une zone de largage soit visible.
• Pour supprimer un panneau, cliquez sur son onglet avec le bouton droit de la souris (Windows) ou en appuyant
sur la touche Contrôle (Mac), puis sélectionnez l’option Fermer ; vous pouvez également le désélectionner dans le
menu Fenêtre.
• Pour ajouter un panneau, sélectionnez-le dans le menu Fenêtre et ancrez-le à l’emplacement de votre choix.
Manipulation de groupes de panneaux
• Pour déplacer un panneau dans un groupe, faites glisser son onglet vers la zone de largage en surbrillance située
dans le groupe.
Ajout d’un panneau à un groupe
• Pour réorganiser les panneaux d’un groupe, faites glisser l’onglet du panneau de votre choix vers son nouvel
emplacement.
• Pour rendre un panneau flottant, faites-le glisser en dehors du groupe au moyen de son onglet.
• Pour déplacer un groupe, faites glisser la barre de titre (zone située au-dessus des onglets).
Empilage de panneaux flottants
Lorsque vous faites sortir un panneau de son dock et que vous le placez en dehors de toute zone de largage, ce panneau
flotte dans l’espace de travail. Un panneau flottant peut être placé à n’importe quel endroit dans l’espace de travail.
Vous pouvez empiler des panneaux ou groupes de panneaux flottants de sorte qu’ils se comportent comme une seule
entité lorsque vous faites glisser la barre de titre supérieure.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 20
Espace de travail
Panneaux empilés flottants
• Pour empiler des panneaux flottants, cliquez sur un onglet pour faire glisser le panneau correspondant vers la zone
de largage située au bas d’un autre panneau.
• Pour modifier l’ordre d’empilage, cliquez sur un onglet afin de faire glisser le panneau correspondant vers le haut
ou vers le bas.
Remarque : prenez soin de « déposer » l’onglet sur l’étroite zone de largage située entre les panneaux, plutôt que sur
la large zone de largage située dans une barre de titre.
• Pour rendre un panneau ou groupe de panneaux de la pile flottant, déplacez-le hors de la pile au moyen de son
onglet ou de sa barre de titre.
Redimensionnement des panneaux
• Pour réduire ou agrandir un panneau, un groupe de panneaux ou une pile de panneaux, cliquez deux fois sur un
onglet. Vous pouvez également double-cliquer sur la zone d’onglets (l’espace vide situé à côté des onglets).
• Pour redimensionner un panneau, faites glisser l’un de ses côtés. Cette méthode de redimensionnement ne
fonctionne pas toujours, notamment avec le panneau Couleur de Photoshop.
Réduction et développement des icônes de panneaux
Vous pouvez réduire des panneaux à la taille d’icônes afin de limiter l’encombrement de l’espace de travail. Dans
certains cas, les panneaux sont réduits de la sorte dans l’espace de travail par défaut.
Panneaux réduits à la taille d’icônes
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 21
Espace de travail
Panneaux agrandis
• Pour réduire ou développer toutes les icônes de panneau d’une colonne, cliquez sur la double flèche située dans la
partie supérieure du dock.
• Pour développer une seule icône de panneau, cliquez sur cette dernière.
• Pour redimensionner les icônes de panneau afin de voir les icônes uniquement (et non les libellés), réglez la largeur
du dock jusqu’à ce que le texte ne soit plus visible. Pour afficher à nouveau le texte, augmentez la largeur du dock.
• Pour réduire à la taille d’une icône un panneau qui a été développé, cliquez sur son onglet, sur son icône ou sur la
double flèche affichée dans sa barre de titre.
Dans certaines applications, si vous sélectionnez l’option Réduction automatique des panneaux d’icônes dans les
préférences d’interface ou les options d’interface utilisateur, une icône de panneau développée est réduite
automatiquement lorsque vous cliquez en dehors de cette dernière.
• Pour ajouter un panneau flottant ou un groupe de panneaux à un dock d’icônes, faites-le glisser au moyen de son
onglet ou de sa barre de titre (les panneaux sont réduits automatiquement à la taille d’icônes lorsque vous les ajoutez
à un dock d’icônes).
• Pour déplacer une icône de panneau (ou un groupe d’icônes de panneau), faites-la glisser. Vous pouvez déplacer
des icônes de panneau vers le haut et vers le bas dans le dock, dans d’autres docks (elles apparaissent dans le style
du panneau de ce dock) ou en dehors du dock (elles apparaissent sous la forme d'icônes flottantes).
Utilisation de ConnectNow
Adobe® ConnectNow met à votre disposition une salle de réunion en ligne sécurisée et personnelle, où vous pouvez
rencontrer d’autres personnes et collaborer avec elles sur le Web en temps réel. Grâce à ConnectNow, vous pouvez
partager et annoter votre écran d’ordinateur, envoyer des messages instantanés et communiquer à l’aide de la fonction
audio intégrée. Vous pouvez également diffuser des vidéos en temps réel, partager des fichiers, capturer des comptes
rendus et contrôler l’ordinateur d’un participant.
Vous pouvez accéder à ConnectNow directement à partir de l’interface de l’application.
1 Choisissez la commande Fichier > Partager mon écran.
2 Dans la boîte de dialogue Se connecter à Adobe CS Live, entrez votre adresse de messagerie électronique et votre
mot de passe, puis cliquez sur le bouton Se connecter. Si vous ne disposez pas d’ID Adobe, cliquez sur le bouton
Créer un ID Adobe.
3 Pour partager votre écran, cliquez sur le bouton Partager l’écran de mon ordinateur, au centre de la fenêtre de
l’application ConnectNow.
Pour obtenir des instructions complètes sur l’utilisation de ConnectNow, rendez-vous sur
http://help.adobe.com/fr_FR/Acrobat.com/ConnectNow/index.html.
Pour accéder au didacticiel vidéo sur l'utilisation de ConnectNow, consultez la page Web Using ConnectNow to share
your screen (7:12) (cette présentation est effectuée dans Dreamweaver).
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 22
Espace de travail
Enregistrement et basculement d’un espace de travail à l’autre
En enregistrant la taille et la position actuelles des panneaux comme espace de travail nommé, vous gardez la
possibilité de restaurer cet espace par la suite, et ce, même si vous avez déplacé ou fermé un panneau. Les noms des
espaces de travail enregistrés sont visibles dans le sélecteur d’espace de travail de la barre d’application.
Enregistrement d’un espace de travail personnalisé
1 Lorsque l’espace de travail se trouve dans la configuration que vous souhaitez enregistrer, utilisez l’une des
méthodes suivantes :
• (Illustrator) Choisissez la commande Fenêtre > Espace de travail > Enregistrer l’espace de travail.
• (Photoshop, Illustrator, InCopy) Choisissez la commande Fenêtre > Espace de travail > Nouvel espace de
travail.
• (Dreamweaver) Choisissez la commande Fenêtre > Présentation de l’espace de travail > Nouvel espace de
travail.
• (Flash) Choisissez la commande Nouvel espace de travail dans le sélecteur d’espace de travail de la barre
d’application.
• (Fireworks) Choisissez la commande Enregistrer la présentation active dans le sélecteur d’espace de travail de la
barre d’application.
2 Attribuez un nom à l’espace de travail.
3 (Photoshop, InDesign) Sélectionnez ensuite une ou plusieurs options dans la section Capture :
Position des panneaux Enregistre la position actuelle des panneaux (InDesign uniquement).
Raccourcis clavier Enregistre l’ensemble de raccourcis clavier actuel (Photoshop seulement).
Menus ou Personnalisation des menus Enregistre l’ensemble de menus actuels.
Affichage de l’espace de travail ou basculement d’un espace de travail à l’autre
❖ Sélectionnez un espace de travail dans le sélecteur d’espace de travail de la barre d’application.
Dans Photoshop, vous pouvez attribuer un raccourci clavier à chacun des espaces de travail pour pouvoir passer de
l’un à l’autre plus rapidement.
Suppression d’un espace de travail personnalisé
• Choisissez l’option Gérer les espaces de travail dans le sélecteur d’espace de travail de la barre d’application,
sélectionnez l’espace de travail, puis cliquez sur la commande Supprimer. (Cette option n’est pas disponible dans
Fireworks.)
• (Photoshop, InDesign, InCopy) Sélectionnez la commande Supprimer l’espace de travail dans le sélecteur d’espace
de travail.
• (Illustrator) Choisissez la commande Fenêtre > Espace de travail > Gérer les espaces de travail, sélectionnez l’espace
de travail, puis cliquez sur l’icône Supprimer.
• (Photoshop, InDesign) Choisissez la commande Fenêtre > Espace de travail > Supprimer l’espace de travail,
sélectionnez l’espace de travail, puis cliquez sur le bouton Supprimer.
Restauration de l’espace de travail par défaut
1 Sélectionnez l'espace de travail de base ou par défaut à l'aide du sélecteur situé dans la barre d'application.
Remarque : dans Dreamweaver, Designer correspond à l’espace de travail par défaut.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 23
Espace de travail
2 (PhotoShop, InDesign, InCopy) Choisissez la commande Fenêtre > Espace de travail > Réinitialiser [Nom de
l’espace de travail].
(Photoshop) Restauration d'une disposition d’espace de travail enregistrée
Dans Photoshop, les espaces de travail s’affichent automatiquement en fonction de leur dernière disposition, mais
vous pouvez restaurer la disposition d’origine des panneaux.
• Pour restaurer un espace de travail individuel, sélectionnez Fenêtre > Espace de travail > Réinitialiser Nom de
l’espace de travail.
• Pour restaurer tous les espaces de travail installés avec Photoshop, cliquez sur Restaurer les espaces de travail par
défaut dans les préférences d’interface.
Pour réorganiser l'ordre des espaces de travail de la barre d’application, faites-les glisser.
Panneau Outils
Le panneau Outils est organisé en six catégories : Sélection, Bitmap, Vecteur, Web, Couleurs et Affichage. Lorsque
vous sélectionnez un outil, l’inspecteur des propriétés affiche les options de l’outil.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 24
Espace de travail
Affichage des options de l’outil dans l’inspecteur des propriétés
❖ Une fois que vous avez sélectionné un outil, choisissez Sélection > Désélectionner pour désélectionner tous les
objets de la zone de travail.
Sélection d’un outil parmi 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.
1 Cliquez sur l’icône de l’outil, puis maintenez enfoncé le bouton de la souris.
2 Faites glisser le pointeur afin de sélectionner l’outil souhaité, puis relâchez le bouton de la souris.
Pour sélectionner rapidement un outil masqué, appuyez plusieurs fois sur le raccourci clavier du groupe, jusqu’à ce
que l’outil recherché apparaisse. (Les raccourcis figurent entre parenthèses en regard des noms d’outils.)
Inspecteur des propriétés
L’inspecteur des propriétés est un panneau contextuel qui affiche les propriétés de la sélection active, les options de
l’outil actif ou les propriétés du document. Par défaut, l’inspecteur des propriétés est ancré au bas de l’espace de travail.
L’inspecteur des propriétés présente deux lignes de propriétés s’il est affiché à mi-hauteur, ou quatre en pleine hauteur.
Vous pouvez également masquer totalement l’inspecteur des propriétés en le laissant dans l’espace de travail.
Remarque : sous Windows, le menu Options est disponible uniquement lorsque l’inspecteur des propriétés est ancré.
Détachement de l’inspecteur des propriétés
❖ Faites glisser l’onglet du panneau vers une autre zone de l’espace de travail.
Ancrage de l’inspecteur des propriétés dans la partie inférieure de l’espace de travail
❖ Faites glisser l’onglet du panneau vers la partie inférieure de l’écran.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 25
Espace de travail
Développement ou réduction de l’inspecteur Propriétés
❖ Procédez de l’une des manières suivantes :
• Cliquez deux fois sur l’onglet du panneau.
• Cliquez sur la flèche située dans l’angle supérieur gauche du panneau.
Affichage et déplacement des barres d’outils (Windows uniquement)
Affichage ou masquage d’une barre d’outils
❖ Choisissez Fenêtre > Barres d’outils, puis sélectionnez l’une des options suivantes :
Principale Affiche une barre d’outils au-dessus de la fenêtre du document, avec des boutons de commande
couramment utilisés tels que Ouvrir, Enregistrer, Imprimer et Copier.
Modifier Affiche une barre d’outils au-dessous de la fenêtre du document, avec des boutons utilisés pour le
regroupement, la disposition, l’alignement et la rotation.
Détachement d’une barre d’outils
❖ Faites glisser la barre d’outils hors de son lieu d’ancrage.
Ancrage d’une barre d’outils (Windows uniquement)
❖ Faites glisser la barre d’outils vers une zone d’ancrage, en haut de la fenêtre de l’application jusqu’à l’apparition du
rectangle d’aperçu d’emplacement.
Verrouillage d’un fichier pour empêcher toute modification lors de son
enregistrement
Si vous tentez de modifier un document lors de son enregistrement, il se peut que Fireworks ne réponde plus. Lorsque
vous réglez AsynchronousSave sur true dans le fichier preferences.txt, Fireworks verrouille le fichier pour
empêcher sa modification jusqu’à ce que l’enregistrement soit terminé. Libre à vous cependant d’intervenir sur
d’autres documents Fireworks ouverts.
Les objets mis à jour pendant l'opération d'enregistrement ne sont pas mis à jour en mode AsynchronousSave.
Définissez AsynchronousSave=false dans le fichier preferences.txt lorsque vous manipulez ce type d'objets. Par
exemple, la fonction d'horodatage de l'enregistrement des formes automatiques n'est pas mise à jour lorsque
AsynchronousSave=True.
Par défaut, l’option d’enregistrement asynchrone est réglée sur true sous Windows et sur false sous MacOS.
1 Recherchez le fichier preferences.txt. Sous Windows, ce fichier est dans \\<nom utilisateur>\Application
Data\Adobe\Fireworks CS5\French\Fireworks CS5 Preferences. Sous Mac OS, le fichier figure dans /<nom
utilisateur>/Library/Preferences/Adobe Fireworks CS5/fr/Fireworks CS5 Preferences.
2 Définissez AsynchronousSave = true dans le fichier.
UTILISATION DE FIREWORKS CS5 26
Dernière mise à jour le 29/4/2010
Espace de travail
3 Enregistrez le fichier.
Navigation dans les documents et affichage de
documents
Utilisation des onglets pour sélectionner des documents
Lorsque votre document est agrandi, utilisez les onglets figurant en haut de la fenêtre pour alterner entre différents
documents ouverts. Le nom de fichier de chaque document ouvert apparaît dans un onglet situé sous les boutons
d’affichage. Lorsque vous déplacez la souris sur l'onglet, l'emplacement du fichier s'affiche sous forme d'info-bulle.
Zoom et panoramique avant et arrière
A
B
C
A. Outil Main B. Outil Zoom C. Menu contextuel Définir le zoom
Zoom avant par incréments prédéfinis
❖ Procédez de l’une des manières suivantes :
• Sélectionnez l’outil Zoom, puis 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 facteur de zoom prédéfini.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 27
Espace de travail
• Sélectionnez un paramètre de zoom dans le menu contextuel Définir le zoom, situé en bas de la fenêtre du
document.
• Dans le menu Affichage, sélectionnez Zoom avant ou choisissez un facteur de zoom prédéfini.
Zoom arrière par incréments prédéfinis
❖ Procédez de l’une des manières suivantes :
• Sélectionnez l’outil Zoom, maintenez la touche Alt (Windows) ou Option (Mac OS) enfoncée, puis cliquez à
l’intérieur de la fenêtre du document. Chaque clic réduit l’affichage au prochain pourcentage prédéfini.
• Sélectionnez un paramètre de zoom dans le menu contextuel Définir le zoom, situé en bas de la fenêtre du
document.
• Dans le menu Affichage, sélectionnez Zoom arrière ou choisissez un facteur de zoom prédéfini.
Zoom avant dans une zone spécifique
1 Sélectionnez l’outil Zoom.
2 Cliquez puis faites glisser le pointeur de l’outil sur la partie de l’image à agrandir.
La taille du cadre de sélection du zoom détermine le pourcentage exact de zoom, qui est visible dans la zone Définir
le zoom.
Remarque : vous ne pouvez pas entrer de pourcentage de zoom dans la zone Définir le zoom.
Zoom arrière à partir d’une zone spécifique
❖ Tout en maintenant la touche Alt (Windows) ou Option (Mac OS) enfoncée, faites glisser le pointeur de l’outil
Zoom pour délimiter une zone de sélection.
Retour à un facteur de zoom de 100 %
❖ Dans le panneau Outils, cliquez deux fois sur l’outil Zoom.
Application d’un panoramique autour du document
1 Sélectionnez l’outil Main.
2 Faites glisser le pointeur Main.
Si votre translation s’étend au-delà des bords de la zone de travail, l’affichage continue de glisser de sorte que vous
pouvez travailler avec des pixels le long du bord de la zone de travail.
Adaptation du document à la fenêtre active
❖ Dans le panneau Outils, cliquez deux fois sur l’outil Main.
Utilisation des modes d’affichage pour gérer l’espace de travail
Dans le panneau Outils, sélectionnez l’un des trois modes d’affichage permettant de contrôler la disposition de votre
espace de travail.
Mode Normal Affichage par défaut de la fenêtre du document.
Mode Plein écran avec affichage des menus Affichage agrandi de la fenêtre de document sur un arrière-plan gris.
Les menus, les barres d’outils, les barres de défilement et les panneaux sont visibles.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 28
Espace de travail
Mode Plein écran Affichage agrandi de la fenêtre de document sur un arrière-plan noir. Aucun menu, aucune
barre d’outils ou barre de titre n’est visible.
Pour plus d’informations, voir l’article sur le site Web Fireworkszone.
Affichage de plusieurs vues d’un document
Vous pouvez afficher simultanément un document à différents niveaux de zoom dans plusieurs vues. Les
modifications que vous apportez dans un affichage sont automatiquement appliquées à tous les autres affichages du
même document.
1 Choisissez Fenêtre > Dupliquer la fenêtre.
2 Sélectionnez un paramètre de zoom pour la nouvelle fenêtre.
Contrôle de la manière dont un document se redessine à l’écran
❖ Choisissez Affichage > Affichage normal.
Si la commande Affichage normal est sélectionnée, Fireworks affiche le document avec toutes les couleurs disponibles
et tous les détails.
Si Affichage normal n’est pas sélectionné, Fireworks affiche les tracés au format de 1 pixel de largeur sans fond. Un X
apparaît sur les images.
Modes d’affichage normal et de brouillon
Affichage des documents tels qu’ils apparaissent sur différentes plateformes
Windows et Mac OSX Snow Leopard version 10.6 appliquent une valeur gamma de 2,2, par défaut, aux écrans.
Macintosh (version précédant Snow Leopard) applique une valeur gamma de 1,8.
❖ Procédez de l’une des manières suivantes :
• Sous Windows, sélectionnez Affichage > Gamma 1,8 pour obtenir un aperçu du document tel qu'il sera affiché
sur le Macintosh (version précédant Snow Leopard).
• Sur le Macintosh®, sélectionnez Affichage > Gamma 1,8 pour obtenir un aperçu du document tel qu'il sera
affiché sur un Mac dont la version est antérieure à Snow Leopard.
Modification d’une zone de travail
Vous pouvez modifier la zone de travail à tout moment.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 29
Espace de travail
Modification de la taille de la zone de travail
1 Procédez de l’une des manières suivantes :
• Choisissez Modification > Zone de travail > Taille de la zone de travail.
• Choisissez Sélection > Désélectionner, cliquez sur l’outil Pointeur pour afficher les propriétés du document dans
l’inspecteur des propriétés, puis cliquez sur le bouton Taille de la zone de travail.
2 Entrez les nouvelles dimensions dans les zones de texte Largeur et Hauteur.
3 Cliquez sur un des boutons Ancre pour spécifier les côtés du document où Fireworks pourra ajouter ou supprimer
de l’espace, puis cliquez sur OK.
Remarque : l’ancre centrale est sélectionnée par défaut, ce qui indique que les variations de taille de la zone de travail
se répartissent sur tous les côtés.
Modification de la couleur de la zone de travail
❖ Procédez de l’une des manières suivantes :
• Choisissez la commande Modification > Zone de travail > Couleur de la zone de travail, puis sélectionnez une
option de couleur. Pour utiliser une couleur personnalisée, cliquez sur une couleur dans la fenêtre contextuelle
Nuancier.
• Dans l’inspecteur des propriétés, choisissez Sélection > Désélectionner, cliquez sur l’outil Pointeur pour afficher
les propriétés du document, puis activez la case Couleur de la zone de travail. Dans la fenêtre contextuelle
Nuancier, sélectionnez une couleur ou cliquez sur une couleur quelconque avec la pipette. Pour sélectionner une
zone de travail transparente, cliquez sur le bouton Transparente dans la fenêtre contextuelle Nuancier.
Pour modifier la couleur de la zone de travail par défaut, cliquez sur le nuancier personnalisé dans la boîte de
dialogue Nouveau document (voir la section « Création d’un document Fireworks » à la page 5).
Redimensionnement d’un document et de son contenu
1 Procédez de l’une des manières suivantes :
• Choisissez Sélection > Désélectionner, cliquez sur l’outil Pointeur pour afficher les propriétés du document dans
l’inspecteur des propriétés, puis cliquez sur le bouton Taille de l’image dans l’inspecteur des propriétés.
• Choisissez Modification > Zone de travail > Taille de l’image.
La boîte de dialogue Taille de l’image s’affiche.
2 Dans les zones de texte Dimensions en pixels, entrez les nouvelles dimensions horizontales et verticales.
(Facultatif) Modifiez les unités de mesure. Si l’option Rééchantillonner l’image est désélectionnée, vous pouvez
changer la résolution ou la taille, mais pas les dimensions en pixels.
3 Dans les zones de texte Taille, entrez les dimensions horizontales et verticales pour l’image imprimée.
4 Dans la zone Résolution, entrez une nouvelle résolution de l’image.
Lorsque vous changez la valeur de la résolution, vous changez également la dimension en pixels.
5 Procédez de l’une des manières suivantes :
• Pour conserver les proportions (rapport entre les dimensions horizontale et verticale) du document,
sélectionnez Conserver les proportions.
• Pour redimensionner la largeur indépendamment de la hauteur, et inversement, désélectionnez Conserver les
proportions.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 30
Espace de travail
6 Pour ajouter ou supprimer des pixels lors du redimensionnement, afin que l’image conserve le même aspect à une
taille différente, sélectionnez Rééchantillonner l’image.
7 Sélectionnez Page active uniquement pour n’appliquer la modification de la taille de la zone de travail qu’à la page
actuellement affichée.
A propos du rééchantillonnage
Fireworks rééchantillonne (redimensionne) les images selon une méthode qui diffère de celle de la plupart des
applications de retouche d’images.
• Lorsqu’un objet bitmap est rééchantillonné, des pixels sont ajoutés ou supprimés dans l’image pour l’agrandir ou
la réduire.
• Lorsqu’un objet vectoriel est rééchantillonné, la perte de qualité est faible dans la mesure où le tracé est redessiné
mathématiquement pour obtenir la taille voulue.
Dans Fireworks, les attributs des objets vectoriels sont visibles sous forme de pixels ; par conséquent, certains
contours ou certains fonds peuvent être légèrement différents une fois le rééchantillonnage effectué. Cela est dû au
fait que les pixels qui composent ces contours ou fonds doivent être redessinés.
Remarque : les repères, les objets zones sensibles et les objets tranches sont redimensionnés lorsque la taille de l’image
du document est modifiée.
Vous pouvez modifier 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 manière à faire tenir plus ou moins
de pixels dans un espace donné. Le réglage de la résolution sans rééchantillonnage ne provoque pas de perte de
données.
• Lors du rééchantillonnage, vous pouvez ajouter ou supprimer des pixels :
Rééchantillonnage positif Ajoute des pixels pour agrandir l’image. Cette méthode risque d’entraîner une perte de
qualité, car les pixels ajoutés ne correspondent pas toujours à l’image d’origine.
Rééchantillonnage négatif Supprime des pixels pour réduire la taille de l’image mais entraîne une perte de données
dans l’image. Cette méthode entraîne toujours une baisse de qualité suite à la suppression de pixels pour
redimensionner l’image.
Rotation de la zone de travail
Appliquez une rotation à la zone de travail 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.
❖ Choisissez Modification > Zone de travail, puis choisissez une option de rotation.
Rognage ou ajustement de la zone de travail
Développez ou réduisez la taille de la zone de travail en fonction des objets qui la composent.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 31
Espace de travail
Zone de travail d’origine (gauche), zone de travail rognée (droite)
1 Choisissez Sélection > Désélectionner pour afficher les propriétés du document dans l’inspecteur des propriétés.
2 Cliquez sur Ajuster la zone de travail dans l’inspecteur des propriétés.
Recadrage d’un document
Le recadrage permet de supprimer des parties inutiles d’un document. La zone de travail est redimensionnée à la taille
d’une zone que vous définissez.
Par défaut, le recadrage supprime les objets qui dépassent les limites de la zone de travail. Vous pouvez maintenir des
objets à l’extérieur de la zone de travail en changeant une préférence avant le recadrage.
1 Sélectionnez l’outil Recadrage
document.
dans le panneau Outils ou choisissez la commande Edition > Recadrer le
2 Faites glisser un cadre de sélection sur la zone de travail. Ajustez les poignées de recadrage jusqu’à ce que le cadre
de sélection délimite la zone à conserver.
3 Cliquez deux fois à l’intérieur du cadre de sélection, ou appuyez sur la touche Entrée, pour recadrer le document.
Fireworks redimensionne la zone de travail à la taille de la zone que vous avez définie et supprime les objets situés
à l’extérieur de la zone de travail.
Pour conserver ces objets, avant de recadrer, désélectionnez Supprimer les objets pendant le recadrage dans l’onglet
Edition de la boîte de dialogue Préférences.
Utilisation des règles, des repères et de la grille
Les règles, les repères et la grille vous permettent de placer et d’aligner des objets. Les repères sont des lignes que vous
faites glisser sur la zone de travail du document à partir des règles. Vous pouvez utiliser des repères pour marquer
d’importantes parties de votre document (marges et point central, par exemple). La grille affiche un ensemble de lignes
horizontales et verticales sur la zone de travail afin de faciliter les positionnements. Les repères et les grilles ne se
trouvent pas sur un calque et ne sont pas exportés avec le document.
Les extensions Fireworks suivantes facilitent l’utilisation des repères :
Extension Guides Panel Lorsque vous installez cette extension, un panneau Guides apparaît sur la zone de travail. Il
permet de manipuler les repères dans le document ou d’exporter et d’importer des repères depuis un jeu de repères
enregistrés au préalable. Cette extension est disponible sur http://www.adobe.com/go/learn_fw_usingguidespanel_fr.
Extension Copy-Paste Guides Cette extension permet de copier des repères sur une page et de les copier sur une autre
au sein d’un même document. Utilisez-la si le document Fireworks contient plusieurs pages requérant des repères
similaires. Cette extension est disponible sur http://www.adobe.com/go/learn_fw_copypasteguides_fr.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 32
Espace de travail
Extension Inherit Guides Cette extension permet de copier des repères depuis le gabarit ou la page active et de les
appliquer à toutes les pages du document. Cette extension est disponible sur
http://www.adobe.com/go/learn_fw_inheritguides_fr.
Pour modifier la taille de la grille ou la couleur de la grille et des repères, reportez-vous à la section « Préférences de
repères et de grilles » à la page 312.
Affichage et masquage de règles
❖ Choisissez Affichage > Règles.
Les règles horizontale et verticale s’affichent le long des marges de la fenêtre de document. Les règles utilisent l’unité
de mesure pixel.
Création d’un repère horizontal ou vertical
1 Cliquez puis faites glisser à partir de la règle correspondante.
2 Positionnez le repère à l’endroit voulu de la zone de travail, puis relâchez le bouton de la souris.
Remarque : repositionnez le repère en le faisant glisser de nouveau.
Déplacement d’un repère jusqu’à une position précise
1 Cliquez deux fois sur le repère.
2 Entrez la nouvelle position dans la boîte de dialogue Déplacer un repère, puis cliquez sur OK.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 33
Espace de travail
Affichage ou masquage des repères ou de la grille
❖ Choisissez la commande Affichage > Repères > Afficher les repères ou Affichage > Grille > Afficher la grille.
La sélection est appliquée à tous les documents ouverts dans Fireworks.
Accrochage d’objets à des repères ou à la grille
❖ Choisissez la commande Affichage > Repères > Accrocher aux repères ou Affichage > Grille > Accrocher à la grille.
La sélection est appliquée à tous les documents ouverts dans Fireworks.
Verrouillage ou déverrouillage de tous les repères
❖ Choisissez Affichage > Repères > Verrouiller les repères.
La sélection est appliquée à tous les documents ouverts dans Fireworks.
Suppression d’un repère
❖ Faites glisser le repère en dehors de la zone de travail.
Affichage de la distance entre les repères
❖ Appuyez sur la touche Maj quand le pointeur est situé entre les repères.
Pour afficher la distance entre les repères, appuyez sur la touche Maj tout en faisant glisser les repères dans la zone de
travail.
Repères commentés
Les repères commentés sont temporairement accrochés aux repères pour vous aider à créer, aligner, modifier et
transformer des objets par rapport à d’autres objets. Pour activer des repères commentés et les accrocher, choisissez
Affichage > Repères commentés, puis sélectionnez Afficher les repères commentés et Accrocher aux repères
commentés.
Vous pouvez utiliser les repères commentés comme suit :
• Lorsque vous créez un objet, utilisez les repères commentés pour le positionner par rapport aux objets existants.
Les outils Ligne, Rectangle, Ellipse, Polygone et Formes automatiques affichent des repères commentés, ainsi que
les outils de tranche rectangulaire et circulaire.
• Lorsque vous déplacez un objet, utilisez des repères commentés pour l’aligner par rapport aux autres objets.
• Lorsque vous transformez un objet, des repères commentés apparaissent automatiquement pour faciliter la
transformation.
Pour modifier l’affichage des repères commentés, définissez leurs préférences (voir « Préférences de repères et de
grilles » à la page 312).
Aperçu dans navigateur
Sélectionnez Fichier > Aperçu dans le navigateur, puis sélectionnez l'une des options.
Aperçu de toutes les pages dans <navigateur principal> Ctrl+F12/Cmd+Maj+F12 Vous pouvez obtenir un aperçu de
l'interaction entre les pages si ces dernières sont liées entre elles.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 34
Espace de travail
Aperçu dans <navigateur principal> F12 Offre un aperçu du document Fireworks dans votre navigateur principal. Si
un seul navigateur est installé sur votre ordinateur, Fireworks l'utilise en tant que navigateur principal. Par contre,
lorsque plusieurs navigateurs sont disponibles, vous pouvez sélectionner un navigateur principal pour afficher les
documents Fireworks en cliquant sur Fichier > Aperçu dans le navigateur > Sélectionner le navigateur principal.
Aperçu dans Maj/Cmd+F12 Offre un aperçu du document Fireworks dans votre navigateur secondaire. Avant
d'utiliser cette option, définissez votre navigateur secondaire en cliquant sur Fichier > Aperçu dans le navigateur >
Sélectionner le navigateur secondaire. Recherchez et sélectionnez le fichier EXE de votre navigateur secondaire.
Annulation et répétition de plusieurs actions
Le panneau Historique répertorie les dernières opérations effectuées dans Fireworks. Vous pouvez spécifier le nombre
d’étapes dans le champ Nombre maximum d’actions annulées de la boîte de dialogue Préférences de Fireworks.
Annulation et rétablissement d’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.
Répétition d’actions
1 Effectuez les actions.
2 Pour sélectionner les actions à répéter dans le panneau Historique, utilisez l’une des méthodes suivantes :
• Cliquez sur une action pour la sélectionner (mettre en surbrillance).
• Tout en maintenant la touche Ctrl (Windows) ou Cmde (Mac OS) enfoncée, cliquez pour sélectionner des
actions individuelles.
• Tout en maintenant la touche Maj enfoncée, cliquez sur des actions pour sélectionner une série continue
d’actions.
3 Cliquez sur le bouton Réexécuter, en bas du panneau Historique.
Enregistrement d’actions en vue de leur réutilisation
1 Sélectionnez les actions à enregistrer dans le panneau Historique.
2 Cliquez sur le bouton Enregistrer situé en bas du panneau.
3 Entrez un nom de commande.
Utilisation de la commande personnalisée enregistrée
❖ Dans le menu Commandes, sélectionnez le nom de la commande.
Restauration des fichiers non enregistrés (Mac seulement)
Lorsqu’une session Fireworks prend fin à la suite d’une anomalie, les fichiers non enregistrés sont placés sur le bureau.
Lorsque vous relancez Fireworks, un message vous informe de la présence du dossier contenant les fichiers non
enregistrés sur le bureau. Les fichiers sont enregistrés par défaut à l’emplacement suivant : Bureau\Fireworks
restauré\<horodatage>.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 35
Espace de travail
Les fichiers non enregistrés auxquels aucun nom n’a été attribué sont enregistrés sous le nom Sans titre, Sans titre (1),
Sans titre (2), etc. Les noms de fichier correspondent aux noms par défaut générés par Fireworks lors de la création des
fichiers. Les fichiers non enregistrés auxquels un nom a été attribué sont enregistrés sous ce même nom.
Les fichiers ne sont pas restaurés dans les cas suivants :
• L’opération d’enregistrement est à l’origine du problème.
• La mémoire disponible est insuffisante pour restaurer les fichiers non enregistrés.
•
DisableSaveOnCrash dans le fichier Preferences d'Adobe Fireworks CS5 est défini sur True.
• Le fichier ouvert n’était pas en cours de modification lorsque le problème s’est produit.
Désactivation de la restauration des fichiers
1 Ouvrez le fichier Fireworks CS5 Preferences.txt, qui réside dans
\Users\<nom_utilisateur>\Library\Preferences\Adobe Fireworks CS5\<langue>\.
2 Réglez DisableSaveOnCrash sur True.
Modification de l’emplacement par défaut des fichiers restaurés
1 Ouvrez le fichier Fireworks CS5 Preferences.txt, qui réside dans
\Users\<nom_utilisateur>\Library\Preferences\Adobe Fireworks CS5\<langue>\.
2 Spécifiez l’emplacement par le biais du paramètre SaveOnCrashRecoveredFolderPath. Vous pouvez entrer un
chemin relatif ou absolu.
Dernière mise à jour le 29/4/2010
Chapitre 4 : Sélection et transformation
d’objets
Sélection des objets
Avant de pouvoir manipuler un objet du document, sélectionnez-le. Cela s’applique à un objet vectoriel, un tracé ou
des points ; un bloc de texte, un mot ou une lettre ; une tranche ou une zone sensible ; une occurrence ou un objet
bitmap. Pour sélectionner un objet, utilisez le panneau Calques ou un outil de sélection.
Panneau Calques Affiche chaque objet. Vous pouvez cliquer sur un objet dans le panneau Calques pour le sélectionner
lorsque le panneau est ouvert et les calques développés.
Outils de sélection Chacun d’entre eux joue un rôle spécifique :
L’outil Pointeur sélectionne des objets lorsque vous cliquez sur les objets ou 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 Zone d’exportation sélectionne une zone à exporter sous la forme d’un fichier distinct.
Sélection d’objets par clics
❖ Procédez de l’une des manières suivantes :
• Déplacez l’outil Pointeur sur le tracé ou le cadre de sélection de l’objet, puis cliquez.
• Cliquez sur le contour ou le fond de l’objet.
• Sélectionnez l’objet dans le panneau Calques.
Pour prévisualiser ce que vous sélectionnez lorsque vous cliquez sur un objet au-dessous du pointeur sur la zone
de travail, sélectionnez l’option Surbrillance souris dans la catégorie Edition de la boîte de dialogue Préférences.
Sélection d’objets par glissement
❖ Faites glisser l’outil Pointeur pour inclure un ou plusieurs objets dans la zone de sélection.
36
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 37
Sélection et transformation d’objets
Déplacement ou modification d’objets à l’aide de l’outil Sous-sélection
Utilisez l’outil Sous-sélection pour sélectionner, déplacer ou modifier des points sur un tracé vectoriel ou un objet
faisant partie d’un groupe.
1 Sélectionnez l’outil Sous-sélection.
2 Effectuez une sélection.
3 Procédez de l’une des manières 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.
Sélection d’un objet se trouvant derrière d’autres objets
❖ Cliquez sur l’outil Sélectionner derrière en continu au-dessus des objets empilés, en commençant par le haut
jusqu’à ce que vous sélectionniez l’objet souhaité.
Remarque : vous pouvez également sélectionner un objet difficile à atteindre en cliquant dessus dans le panneau Calques
lorsque les calques sont développés.
Informations sur la sélection dans l’inspecteur des propriétés
Lorsque vous sélectionnez un objet, l’inspecteur des propriétés identifie la sélection. La partie supérieure gauche de
l’inspecteur des propriétés contient une description de l’élément en cours d’inspection et le nombre d’objets
sélectionnés si plusieurs objets sont sélectionnés. L’inspecteur des propriétés fournit également une zone pour saisir le
nom des éléments sélectionnés.
Remarque : le nom s’affiche dans la barre de titre du document à chaque fois que vous sélectionnez cet élément. En cas
d’exportation des tranches et des boutons, le nom est le nom de fichier.
(Windows uniquement) Si la barre d’état est activée, les objets sélectionnés sont identifiés dans la barre d’état, en bas
de la fenêtre du document.
Inspecteur des propriétés
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 tracé de sélection de façon à pouvoir modifier un
objet sélectionné tout en l’affichant tel qu’il doit apparaître sur le Web ou sur une copie imprimée.
Ajout à la sélection
❖ Tout en maintenant la touche Maj enfoncée, cliquez sur des objets supplémentaires avec l’outil Pointeur, Sous-
sélection ou Sélectionner derrière.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 38
Sélection et transformation d’objets
Désélection d’un objet en laissant les autres objets sélectionnés
❖ Tout en maintenant la touche Maj enfoncée, cliquez sur l’objet sélectionné.
Sélection de tout le contenu de tous les calques du document
❖ Choisissez Sélection > Tout sélectionner.
Remarque : la commande Tout sélectionner ne sélectionne pas les objets masqués.
Désélection de tous les objets sélectionnés
❖ Choisissez Sélection > Désélectionner.
Remarque : désélectionnez la préférence Modification par calque pour sélectionner tous les objets visibles sur tous les
calques d’un document. En effet, lorsque vous sélectionnez la préférence Modification par calque, seuls les objets du calque
actif sont sélectionnés. Pour plus de détails, reportez-vous à la section « Organisation des calques » à la page 137.
Masquage de la sélection du tracé d’un objet sélectionné
❖ Sélectionnez la commande Affichage > Bords.
Remarque : vous pouvez utiliser le panneau Calques ou l’inspecteur des propriétés pour identifier l’objet sélectionné
lorsque son contour et ses points sont masqués.
Masquage d’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 tranches et zones sensibles
du calque Web.)
Affichage de tous les objets
❖ Choisissez Affichage > Tout afficher.
Remarque : pour masquer des objets, que ceux-ci soient sélectionnés ou non, cliquez dans la colonne Œil du
panneau Calques (ou faites glisser le pointeur dessus).
Sélection de pixels
Vous pouvez modifier les pixels de toute la zone de travail ou sélectionner l’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 de pixels rectangulaire dans une image. Pour plus d'informations, voir l'article de
Thierry Lorey.
L’outil Cadre de sélection ovale sélectionne une zone de pixels elliptique dans une image.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 39
Sélection et transformation d’objets
L’outil Lasso sélectionne une zone de pixels de forme libre dans une image.
L’outil Lasso polygonal sélectionne une zone de pixels de forme libre mais aux bords droits dans une image.
L’outil Baguette magique sélectionne une zone de pixels de couleur similaire dans une image.
Les outils de sélection de pixels tracent des cadres de sélection qui définissent 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 lui ajoutant des éléments ou en l’utilisant pour
effectuer 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.
Options des outils de sélection bitmap
Plusieurs options sont disponibles avec les outils utilisés pour la sélection d’objets bitmap.
Options de bord
Net Crée un cadre de sélection avec un bord clairement délimité.
Lissage Permet d’éviter l’apparition de bords dentelés sur cadre de sélection.
Contour progressif Permet d’adoucir les bords des pixels sélectionnés.
Options de style de l’outil Cadre de sélection ou Cadre de sélection ovale
Normal Permet de créer un cadre de sélection dont la hauteur et la largeur sont indépendantes.
Rapport fixe Contraint les proportions entre la hauteur et la largeur.
Taille fixe Définit la hauteur et la largeur sur une dimension donnée.
Remarque : l’outil Baguette magique possède également un paramètre Tolérance. Pour plus d’informations, reportezvous à la section « Sélection des zones de pixels de couleur similaire » à la page 40.
Création de cadres de sélection de pixels
Utilisez les outils de la section Bitmap du panneau Outils pour dessiner un cadre de sélection autour des zones
spécifiques de pixels d’une image bitmap.
Remarque : pour modifier les paramètres de votre sélection lorsque vous utilisez l’un de ces outils, cochez la case Sélection
interactive avant d’effectuer la sélection.
Sélection d’une zone de pixels rectangulaire ou elliptique
1 Sélectionnez l’outil Cadre de sélection ou Cadre de sélection ovale.
2 Définissez les options Style et Bord dans l’inspecteur des propriétés.
3 Faites glisser le pointeur pour tracer un cadre de sélection qui définit la sélection de pixels.
• Maintenez la touche Maj enfoncée tout en faisant glisser le pointeur de l’outil Cadre de sélection ou Cadre de
sélection ovale afin de tracer des cadres de sélection de forme carrée ou circulaire. Si la case à cocher Sélection
interactive est activée lorsque vous faites une série de sélections, la fonction correspondante n’agit que sur la
dernière sélection de la série.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 40
Sélection et transformation d’objets
• Pour tracer un cadre de sélection à partir d’un point central, désélectionnez tous les autres cadres de sélection
actifs, puis dessinez votre tracé tout en maintenant la touche Alt (Windows) ou Option (Mac OS) enfoncée.
Sélection d’une zone de pixels en forme libre
1 Sélectionnez l’outil Lasso.
2 Sélectionnez une option Bord dans l’inspecteur des propriétés.
3 Faites glisser le pointeur autour des pixels à sélectionner.
Placement de points afin de créer un cadre de sélection
Utilisez l’outil Lasso polygonal pour sélectionner une zone polygonale de pixels spécifiques dans une image bitmap.
1 Sélectionnez l’outil Lasso polygonal.
2 Sélectionnez une option Bord dans l’inspecteur des propriétés.
3 Délimitez la sélection en cliquant sur des points situés autour du périmètre de l’objet ou de la zone en question.
Maintenez la touche Maj enfoncée pour imposer des incréments de 45 degrés aux segments du cadre de sélection
tracé avec l’outil Lasso polygonal.
4 Pour fermer le polygone, procédez de l’une des manières suivantes :
• Cliquez sur le point d’origine.
• Cliquez deux fois dans l’espace de travail.
Sélection des zones de pixels de couleur similaire
1 Sélectionnez l’outil Baguette magique.
2 Sélectionnez une option de bord.
3 Définissez le niveau de tolérance en faisant glisser le curseur de l’option correspondante dans l’inspecteur des
propriétés.
La tolérance représente la plage tonale sélectionnée lorsque vous cliquez sur un pixel avec l’outil Baguette magique.
Si vous entrez la valeur 0 et que vous cliquez sur un pixel, seuls les pixels adjacents du même ton sont sélectionnés.
Si vous entrez la valeur 65, une gamme de tons plus étendue est sélectionnée.
4 Cliquez sur la zone de couleur à sélectionner.
Un cadre de sélection apparaît autour de la plage de pixels sélectionnée.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 41
Sélection et transformation d’objets
Pixels sélectionnés avec une tolérance basse (en haut), puis avec une tolérance haute (en bas)
Sélection des couleurs similaires dans un document entier
1 Sélectionnez une zone de couleur avec un outil de cadre de sélection ou de lasso, ou avec l’outil Baguette magique.
2 Choisissez Sélection > Sélectionner les couleurs similaires.
Un ou plusieurs cadres de sélection affichent toutes les zones contenant la plage de pixels sélectionnée. Cela dépend
du paramètre Tolérance actif de l’inspecteur des propriétés de l’outil Baguette magique.
Remarque : pour ajuster la tolérance pour la commande Sélectionner les couleurs similaires, sélectionnez l’outil
Baguette magique, puis changez le paramètre Tolérance dans l’inspecteur des propriétés avant d’utiliser la commande.
Vous pouvez également cocher la case Sélection interactive pour modifier le paramètre de tolérance lorsque vous
utilisez l’outil Baguette magique.
Création d’une sélection d’après les zones opaques des objets
A partir d’un objet bitmap sélectionné, vous pouvez créer une sélection de pixels basée sur l’opacité de tout objet ou
masque du panneau Calques.
1 Sélectionnez un objet bitmap dans la zone de travail.
2 Dans le panneau Calques, positionnez le pointeur sur la vignette de l’objet à utiliser pour créer la sélection de pixels.
3 Maintenez la touche Alt (Windows) ou Option (Mac OS) enfoncée.
Le pointeur change afin de vous indiquer que vous êtes sur le point de sélectionner la couche alpha, ou zone opaque,
de l’objet.
4 Cliquez sur la vignette.
Une nouvelle sélection de pixels est créée sur l’objet bitmap sélectionné.
5 (Facultatif) Pour étendre la sélection, cliquez sur un autre objet du panneau Calques tout en maintenant les touches
Alt+Maj (Windows) ou Option+Maj (Mac OS) enfoncées.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 42
Sélection et transformation d’objets
Pour réduire la sélection, cliquez sur des objets tout en maintenant les touches Ctrl+Maj enfoncées.
Suppression d’un cadre de sélection
Vous pouvez supprimer un cadre de sélection sans affecter le document.
❖ Procédez de l’une des manières suivantes :
• Tracez un autre cadre de sélection.
• Cliquez en dehors de la sélection active avec un outil de cadre de sélection ou de lasso.
• Appuyez sur la touche Echap.
Ajustement des cadres de sélection
Repositionnement d’une sélection pendant sa création
1 Commencez par faire glisser le pointeur afin de tracer la sélection.
2 Maintenez la barre d’espace enfoncée sans relâcher le bouton de la souris.
3 Faites glisser le cadre de sélection à un autre emplacement de la zone de travail.
4 Relâchez la barre d’espace tout en maintenant le bouton de la souris enfoncé.
5 Continuez à faire glisser le pointeur pour tracer la sélection.
Déplacement d’un cadre de sélection existant
❖ Procédez de l’une des manières suivantes :
• Faites glisser le cadre de sélection à l’aide de l’outil Cadre de sélection, Lasso ou Baguette magique.
• Déplacez le cadre de sélection par incréments d’un pixel avec les touches fléchées.
• Appuyez sur la touche Maj, et déplacez le cadre de sélection par incréments de 10 pixels avec les touches fléchées.
Ajout de pixels à une sélection existante
1 Sélectionnez un outil de sélection bitmap quelconque.
2 Tout en maintenant la touche Maj enfoncée, 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.
Les cadres de sélection superposés s’unissent pour former un cadre de sélection contigu.
Soustraction de pixels d’une sélection
❖ Tout en maintenant la touche Alt (Windows) ou Option (Mac OS) enfoncée, utilisez un outil de sélection bitmap
pour sélectionner la zone de pixels à retirer.
Sélection d’une partie d’un cadre de sélection existant
Sélectionnez une partie d’un cadre de sélection existant en dessinant un nouveau cadre de sélection recouvrant le cadre
d’origine.
1 Maintenez les touches Alt+Maj (Windows) ou Option+Maj (Mac OS) enfoncées pendant que vous dessinez un
cadre de sélection superposé au cadre de sélection d’origine.
2 Relâchez le bouton de la souris.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 43
Sélection et transformation d’objets
Seuls les pixels situés à l’intersection des deux cadres de sélection sont sélectionnés.
Inversion d’une sélection de pixels
En partant de la sélection de pixels active, vous pouvez créer une autre sélection de pixels utilisée pour sélectionner
tous les pixels désélectionnés.
1 Sélectionnez des pixels en utilisant un outil de sélection bitmap.
2 Choisissez Sélection > Sélection inverse pour sélectionner tous les pixels qui n’étaient pas sélectionnés initialement.
Application d’un contour progressif à une sélection de pixels
Le contour progressif crée un effet de transparence pour les pixels sélectionnés.
1 Choisissez Sélection > Contour progressif.
2 Entrez une intensité dans la boîte de dialogue Contour progressif.
3 Si nécessaire, changez le nombre dans la boîte de dialogue Contour progressif afin d’ajuster l’intensité.
Pour afficher l’aspect de la sélection au contour progressif sans les pixels placés autour, choisissez Sélection >
Inverser la sélection, et appuyez sur la touche Suppr.
Extension ou réduction d’un cadre de sélection
Une fois le cadre de sélection tracé pour sélectionner les pixels, vous pouvez étendre ou réduire sa bordure.
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 développer ou contracter la bordure du cadre de sélection, puis cliquez
sur OK.
Sélection d’une zone autour d’un cadre de sélection existant
Pour ajouter des effets graphiques spéciaux à un cadre de sélection, créez un cadre supplémentaire englobant le cadre
existant.
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 existant, puis cliquez sur OK.
Lissage de la bordure d’un cadre de sélection
Supprimez les pixels superflus visibles sur la bordure d’une sélection de pixels ou d’un cadre de sélection après
l’utilisation de l’outil Baguette magique.
1 Choisissez Sélection > Lisser le cadre de sélection.
2 Saisissez un rayon pour spécifier le niveau de lissage souhaité, puis cliquez sur OK.
Sélection de pixels avant et après le lissage
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 44
Sélection et transformation d’objets
Conversion, transfert ou enregistrement de cadres de sélection
Conversion d’un cadre de sélection en tracé
Vous pouvez convertir une sélection bitmap en objet vectoriel en traçant un cadre de sélection autour de la partie de
l’objet bitmap à convertir. Cette manipulation est pratique pour commencer à créer une animation en traçant une
sélection d’après un objet bitmap.
❖ Après avoir tracé un cadre de sélection, choisissez Sélection > Convertir le cadre de sélection en tracé.
Transfert d’un cadre de sélection vers un autre objet bitmap
Vous pouvez transférer un cadre de sélection d’un objet bitmap vers un autre, ou vers un masque.
1 Effectuez une sélection en traçant le cadre de sélection.
2 Dans le panneau Calques, sélectionnez un autre objet bitmap présent sur le calque de votre choix.
Pour plus d’informations, reportez-vous à la section « Masquage » à la page 140.
Enregistrement ou restauration d’un cadre de sélection
1 Choisissez Sélection > Enregistrer la sélection bitmap ou Sélection > Restaurer la sélection bitmap.
2 Dans le menu Document, sélectionnez le document ouvert contenant la sélection enregistrée.
3 Dans le menu Sélection, sélectionnez Nouveau ou une sélection précédemment enregistrée que vous souhaitez
modifier.
4 Si vous sélectionnez Nouveau, entrez le nom de votre nouvelle sélection.
5 (Pour la restauration uniquement) Pour inverser la sélection restaurée, cochez la case Inverser.
6 Sélectionnez l’une des options de la section Opération :
Remarque : si vous enregistrez une nouvelle sélection, toutes les options de modification ci-dessous sont désactivées.
Nouvelle sélection Permet de remplacer la sélection active dans le document actif par celle spécifiée dans la
zone Sélection.
Ajouter à la sélection Permet d’ajouter la sélection active à celle spécifiée dans les zones Document et Sélection.
Soustraire de la sélection Permet de soustraire la sélection active de celle spécifiée dans les zones Document
et Sélection.
Intersection avec la sélection Permet de combiner la sélection active avec celle spécifiée dans les zones Document
et Sélection.
7 Cliquez sur OK, puis répétez ce processus pour chaque cadre de sélection à enregistrer ou à restaurer.
Suppression d’un cadre de sélection enregistré
Remarque : cette fonction est activée uniquement si un document ouvert contient au moins une sélection enregistrée.
1 Choisissez Sélection > Supprimer la sélection bitmap.
2 Dans le menu Document, sélectionnez le document ouvert contenant la sélection enregistrée.
3 Dans le menu Sélection, choisissez la sélection.
UTILISATION DE FIREWORKS CS5 45
Dernière mise à jour le 29/4/2010
Sélection et transformation d’objets
Copie ou déplacement du contenu d’un cadre de sélection
Lorsque vous utilisez un outil de sélection pour faire glisser un cadre de sélection vers un nouvel emplacement, le cadre
est déplacé, mais pas son contenu. Pour copier ou déplacer les pixels sélectionnés, utilisez l’outil Pointeur ou un
outil bitmap tout en maintenant une touche de modification enfoncée.
En maintenant les touches de modification enfoncées comme indiqué ci-dessous, vous pouvez déplacer et copier des
sélections à l’aide des touches fléchées. Pour effectuer des déplacements par incréments de 10 pixels, maintenez
également la touche Maj enfoncée.
Déplacement du contenu d’un cadre de sélection
1 Effectuez une sélection de pixels avec un outil de sélection bitmap.
2 Procédez de l’une des manières suivantes :
• Sélectionnez l’un des outils de la section Bitmap du panneau Outils, puis faites glisser la sélection tout en
maintenant la touche Ctrl (Windows) ou Cmde (Mac OS) enfoncée.
• Faites glisser la sélection à l’aide de l’outil Pointeur.
Copie du contenu d’un cadre de sélection
❖ Effectuez l’une des opérations suivantes :
• Faites glisser la sélection à l’aide de l’outil Sous-sélection
.
• Faites glisser la sélection à l’aide de l’outil Pointeur tout en maintenant la touche Alt (Windows) ou Option
(Mac OS) enfoncée.
• Faites glisser la sélection à l’aide de l’un des outils bitmap tout en maintenant les touches Ctrl+Alt (Windows)
ou Cmde+Option (Mac OS) enfoncées.
Remarque : lorsque vous utilisez l’une des procédures ci-dessus, la sélection déplacée ou copiée fait toujours partie de
l’objet bitmap actif. Pour créer un objet bitmap à partir d’une sélection de pixels, suivez la procédure ci-dessous.
Insertion d’un nouvel objet bitmap par copie d’une sélection
1 Sélectionnez une zone de pixels en utilisant un outil de sélection de pixels.
2 Procédez de l’une des manières suivantes :
• Choisissez Edition > Insertion > Bitmap par Couper.
Un nouvel objet bitmap basé sur la sélection de pixels est créé dans le calque actuel, et les pixels sélectionnés sont
supprimés de l’objet bitmap d’origine.
• Choisissez Edition > Insertion > Bitmap par Copier.
Un nouvel objet bitmap basé sur la sélection de pixels est créé dans le calque actuel. Dans le panneau Calques,
une vignette du nouvel objet bitmap apparaît dans le calque actif, au-dessus de l’objet à partir duquel il a coupé
ou copié.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 46
Sélection et transformation d’objets
Edition d’objets sélectionnés
Déplacement, duplication ou suppression d’objets
Déplacement d’une sélection
❖ Procédez de l’une des manières 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 la sélection par incréments d’un pixel.
• Tout en maintenant la touche Maj enfoncée, appuyez sur une touche fléchée pour déplacer la sélection par
incréments de 10 pixels.
• Dans l’inspecteur des 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 Info. Si les cases X et Y ne sont pas visibles, faites glisser
le bord inférieur du panneau.
Déplacement ou copie d’objets sélectionnés par collage
1 Sélectionnez un ou plusieurs objets.
2 Choisissez Edition > Couper ou Edition > Copier.
3 Choisissez Edition > Coller.
Duplication d’un ou plusieurs objets sélectionnés
❖ Choisissez Edition > Dupliquer.
En répétant la commande, les doublons de l’objet sélectionné s’affichent dans une disposition en cascade par rapport
à l’original. Les doublons s’affichent 10 pixels plus bas et 10 pixels à droite du doublon précédent. L’objet dupliqué le
plus récent devient l’objet sélectionné.
Clonage d’une sélection
❖ Choisissez Edition > Cloner.
Le clone de la sélection est placé juste devant l’original et devient l’objet sélectionné.
Remarque : pour éloigner, pixel par pixel, un clone sélectionné de l’original, utilisez les touches fléchées en maintenant
ou non la touche Maj enfoncée. Ce procédé est pratique pour conserver une certaine distance entre des clones ou
l’alignement vertical ou horizontal des clones.
Suppression d’objets sélectionnés
❖ Procédez de l’une des manières suivantes :
• Appuyez sur la touche Suppr ou Retour arrière.
• Choisissez Edition > Effacer ou Edition > Couper.
• Cliquez sur l’objet avec le bouton droit de la souris (Windows) ou tout en maintenant la touche Ctrl enfoncée
(Mac OS), puis choisissez Edition > Couper dans le menu contextuel.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 47
Sélection et transformation d’objets
Annulation ou désélection d’une sélection
❖ Procédez de l’une des manières suivantes :
• Choisissez Sélection > Désélectionner.
• Si vous utilisez l’outil Cadre de sélection, Cadre de sélection ovale ou Lasso, cliquez sur l’image, mais hors de la
zone sélectionnée.
• Appuyez sur la touche Echap.
Transformation et déformation des objets et des sélections
Vous pouvez transformer un objet ou un groupe sélectionné, ou encore une sélection de pixels, en utilisant les outils
et les commandes de menu de mise à l’échelle, d’inclinaison et de distorsion :
L’outil Mise à l’échelle permet d’agrandir ou de réduire un objet.
L’outil Inclinaison permet d’incliner un objet le long d’un axe spécifié.
L’outil 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 3D.
Lorsque vous sélectionnez un outil de transformation quelconque ou la commande de menu Transformer,
Adobe® Fireworks® affiche des poignées de transformation autour des objets sélectionnés.
A
B
A. Point central B. Poignées de transformation
Objet pivoté, mis à l’échelle, incliné, tordu et retourné verticalement et horizontalement
Transformation d’objets sélectionnés à l’aide des poignées de transformation
1 Sélectionnez un outil de transformation.
Lorsque vous déplacez le pointeur sur les poignées de sélection ou à proximité de ces poignées, il change pour
refléter la transformation actuelle.
2 Procédez de l’une des manières suivantes :
• Placez le pointeur à proximité d’un coin, puis faites-le glisser en cliquant dessus pour effectuer une rotation.
• Faites glisser une poignée de transformation pour effectuer une transformation conformément à l’outil de
transformation actif.
UTILISATION DE FIREWORKS CS5 48
Dernière mise à jour le 29/4/2010
Sélection et transformation d’objets
3 Cliquez deux fois à l’intérieur de la fenêtre ou appuyez sur la touche Entrée pour appliquer vos changements.
Redimensionnement d’un objet sélectionné
La mise à l’échelle (synonyme de redimensionnement) d’un objet permet de l’agrandir ou de le réduire à l’horizontale,
à la verticale ou sur les deux axes. Pour des informations sur les attributs de mise à l'échelle, voir l'article de Thierry
Lorey.
1 Procédez de l’une des manières suivantes :
•
Sélectionnez l’outil Mise à l’échelle
.
• Choisissez Modification > Transformation > Mise à l’échelle.
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 sont respectées lors de la mise à l’échelle.
• Pour mettre l’objet à l’échelle horizontalement ou verticalement, faites glisser une poignée latérale.
• Pour mettre l’objet à l’échelle à partir du centre, appuyez sur la touche Alt (Windows) ou Option (Mac) tout en
faisant glisser l’une des poignées.
Redimensionnement/mise à l'échelle contours et des effets lorsque l'objet associé est
redimensionné
Vous pouvez choisir les effets de mise à l'échelle et les contours à appliquer aux objets de façon proportionnelle lors de
leur redimensionnement.
Remarque : Pour la mise à l'échelle normale et la mise à l’échelle en 9 tranches, les contours sont mis à l'échelle en
appliquant les paramètres de la boîte de dialogue Préférences ou du panneau Info.
❖ Procédez de l’une des manières suivantes :
• Cliquez sur Edition > Préférences (Windows) ou Fireworks > Préférences (Mac OS). Dans la catégorie Général,
sélectionnez Mise à l'échelle des contours et des effets.
• Sélectionnez Fenêtre > Info. Dans le menu Options du panneau Info, sélectionnez Attributs d'échelle.
Redimensionnement de l’ensemble des objets sélectionnés
Vous pouvez sélectionner des objets dans la zone de travail et les redimensionner à l’horizontale, à la verticale ou sur
les deux axes.
1 Sélectionnez les objets de la zone de travail à l’aide de l’outil Pointeur.
2 Sélectionnez Commandes > Redimen. Obj. sélectionnés.
3 Redimensionnez les objets à l’horizontale ou à la verticale à l’aide des contrôles de redimensionnement de la boîte
de dialogue, puis cliquez sur le bouton Appliquer.
Remarque : sélectionnez les contrôles d’agrandissement ou de réduction pour ajuster les incréments de
redimensionnement.
Inclinaison des objets
Vous pouvez transformer un objet en l’inclinant sur l’axe horizontal et/ou sur l’axe vertical.
1 Pour afficher les poignées de transformation, procédez de l’une des manières suivantes :
•
Sélectionnez l’outil Inclinaison
.
UTILISATION DE FIREWORKS CS5 49
Dernière mise à jour le 29/4/2010
Sélection et transformation d’objets
• Choisissez Modification > Transformation > Inclinaison.
2 Faites glisser une poignée pour incliner l’objet.
Pour créer l’illusion de perspective, faites glisser un point d’angle.
3 Cliquez deux fois sur le document ou appuyez sur la touche Entrée.
Distorsion des 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.
1 Pour afficher les poignées de transformation, procédez de l’une des manières suivantes :
•
Sélectionnez l’outil Distorsion
.
• Choisissez Modification > Transformation > Distorsion.
2 Faites glisser une poignée pour appliquer la distorsion à l’objet.
3 Cliquez deux fois dans la fenêtre ou appuyez sur la touche Entrée.
Rotation ou renversement des objets
La rotation et le renversement font pivoter un objet sur son centre.
Pour créer l’illusion de perspective, suggérant qu’un objet pivote en trois dimensions, reportez-vous à la section
« Inclinaison des objets » à la page 48.
Rotation d’un objet sélectionné à 90 ou 180 degrés
❖ Choisissez Modification > Transformation, puis sélectionnez une commande de rotation dans le sous-menu.
Rotation d’un objet sélectionné par glissement
1
Sélectionnez un outil de transformation.
2 Eloignez le pointeur de l’objet jusqu’à ce que le pointeur de rotation s’affiche.
3 Faites glisser l’objet pour le faire pivoter.
Pour imposer à la rotation des incréments de 15 degrés par rapport à l’horizon, faites glisser le pointeur tout en
maintenant la touche Maj enfoncée.
4 Cliquez deux fois à l’intérieur de la fenêtre ou appuyez sur la touche Entrée pour appliquer vos changements.
Déplacement de l’axe de rotation
❖ Faites glisser le point central hors du centre.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 50
Sélection et transformation d’objets
Redéfinition de l’axe de rotation au centre de la sélection
❖ Procédez de l’une des manières suivantes :
• Cliquez deux fois sur le point central.
• Appuyez sur la touche Echap pour désélectionner l’objet, puis resélectionnez-le.
Renversement d’un objet avec maintien de sa position relative
❖ Choisissez Modification > Transformation > Symétrie axe horizontal ou Symétrie axe vertical.
Transformation numérique des objets
Au lieu de faire glisser un objet pour le mettre à l’échelle, le redimensionner ou le faire pivoter, vous pouvez le
transformer en entrant des valeurs spécifiques. Pour cela, utilisez l’inspecteur des propriétés, le panneau Info ou la
commande Transformation numérique.
❖ Dans l’inspecteur des propriétés ou dans le panneau Info, entrez les nouvelles mesures pour la largeur (L) ou la
hauteur (H).
Remarque : si les cases L et H ne sont pas visibles dans l’inspecteur des propriétés, cliquez sur la flèche d’extension pour
afficher toutes les propriétés.
Mise à l’échelle ou rotation des objets sélectionnés à l’aide de la commande
Transformation numérique
1 Choisissez Modification > Transformation > Transformation numérique.
2 Sélectionnez le type de transformation à effectuer dans le menu contextuel.
3 Sélectionnez Conserver les proportions pour préserver les proportions horizontales et verticales pendant la mise à
l’échelle ou le redimensionnement d’une sélection.
4 Sélectionnez Attributs d’échelle pour transformer le fond, le contour et les effets en même temps que l’objet lui-
même.
5 Désélectionnez Attributs d’échelle pour transformer uniquement le tracé.
6 Saisissez des valeurs numériques pour transformer la sélection, puis cliquez sur OK.
Affichage des valeurs de transformation numérique
Utilisez le panneau Info pour afficher les valeurs des transformations numériques de l’objet actuellement sélectionné.
Ces informations sont mises à jour pendant la modification de l’objet.
❖ Choisissez Fenêtre > Info.
Mise à l’échelle en 9 tranches
La mise à l’échelle en 9 tranches permet de mettre à l’échelle des objets vectoriels et des objets bitmap sans distorsion
géométrique ; ils conservent ainsi les aspects d’éléments clés tels que le texte ou des angles arrondis.
Il est impossible d’appliquer la mise à l’échelle en 9 tranches aux éléments suivants :
• Texte
• Symbole contenant du texte
UTILISATION DE FIREWORKS CS5 51
Dernière mise à jour le 29/4/2010
Sélection et transformation d’objets
• Groupe contenant du texte pivoté/déformé/incliné
Remarque : Si vous appliquez la mise à l’échelle en 9 tranches à un groupe ou symbole contenant du texte, celui-ci est mis
à l’échelle mais pas avec la méthode en 9 tranches.
Dans Fireworks, vous pouvez utiliser deux méthodes de mise à l’échelle en 9 tranches : la mise à l’échelle par symboles,
avec utilisation de repères de découpe permanents réajustables, et la mise à l’échelle standard avec repères temporaires
applicables une seule fois. La mise à l’échelle par symboles est parfaitement adaptée aux objets que vous envisagez de
réutiliser plusieurs fois. La mise à l’échelle standard, quant à elle, convient pour les réglages appliqués rapidement et
une seule fois aux objets bitmap ou aux formes simples intégrés à vos maquettes.
Pour visionner un didacticiel vidéo sur la création d’objets extensibles à l’aide d’une mise à l’échelle en 9 tranches,
accéder à www.adobe.com/go/lrvid4036_fw_fr. L’article de Sarthak Singhal, accessible à l’adresse
http://www.adobe.com/go/learn_fw_9slicescaling_fr contient une démonstration de l’utilisation de la mise à l’échelle
en 9 tranches.
Pour bénéficier d’une souplesse optimale lors des mises à l’échelle, la tranche centrale doit être la plus étendue possible.
(Si un objet est très réduit, Fireworks limite les tranches qui l’entourent à leur taille d’origine.)
Voir aussi
« Symboles » à la page 160
« Ouverture de graphiques créés dans d’autres applications » à la page 7
« Préférences de repères et de grilles » à la page 312
Symboles de mise à l’échelle en 9 tranches
Application de repères 9 tranches à un symbole
1 Cliquez deux fois sur le symbole ou sur le bouton pour passer en mode de modification de symboles.
2 Dans le panneau Propriétés, sélectionnez Activer les repères de mise à l’échelle en 9 tranches.
3 Déplacez les repères, et placez-les de façon appropriée sur le bouton ou symbole. Vérifiez que les différentes parties
du symbole que vous ne souhaitez pas déformer lors de la mise à l’échelle (les angles, par exemple) se trouvent en
dehors des repères.
Les repères de mise à l’échelle en 9 tranches sont positionnés de manière à éviter toute déformation des angles pendant le redimensionnement
du bouton.
4 (Facultatif) Verrouillez les repères : dans le panneau Propriétés, sélectionnez Verrouiller les repères de mise à
l’échelle en 9 tranches.
5 Pour revenir à la page contenant les repères, cliquez sur l’icône de page située en haut du document
6 Si nécessaire, redimensionnez le symbole à l’aide de l’outil Mise à l’échelle
.
.
UTILISATION DE FIREWORKS CS5 52
Dernière mise à jour le 29/4/2010
Sélection et transformation d’objets
Le bouton est redimensionné sans déformation des angles.
Après l’application de repères 9 tranches à un symbole, vous pouvez imbriquer ce dernier dans les zones protégées
d’autres symboles de mise à l’échelle en 9 tranches, en créant des objets complexes mis à la bonne échelle.
Voir aussi
« Symboles » à la page 160
Mise à l’échelle en une dimension avec trois tranches
Si vous envisagez d’appliquer à un objet une mise à l’échelle en une seule dimension, vous pouvez utiliser trois tranches
au lieu de neuf.
❖ Exécutez la procédure de mise à l’échelle en 9 tranches standard, mais, à l’étape 3, procédez de l’une des manières
suivantes :
• Pour une mise à l’échelle verticale, faites glisser les repères de découpe horizontaux vers le bord de l’objet.
• Pour une mise à l’échelle horizontale, faites glisser les repères verticaux vers le bord.
Identification des symboles qui utilisent la mise à l’échelle en 9 tranches
❖ Dans le panneau Bibliothèque de documents, cliquez deux fois sur une icône de symbole pour passer en mode de
modification de symboles, puis recherchez les repères de découpe.
Voir aussi
« Passage du mode d’édition de symboles au mode d’édition de pages » à la page 162
Objets standard 9 tranches
L’outil Mise à l’échelle en 9 tranches crée temporairement des repères de découpe qui permettent de mettre des objets
à l’échelle plus facilement sans déformer leur géométrie. Cet outil est utile pour les mises à l’échelle rapides d’objets
bitmap ou de formes simples destinés aux prototypes et aux prémaquettes.
Les repères que vous créez à l’aide de l’outil Mise à l’échelle en 9 tranches disparaissent après une première utilisation.
Pour plus de détails sur les repères de découpe permanents réutilisables plusieurs fois, reportez-vous à la section
« Symboles de mise à l’échelle en 9 tranches » à la page 51.
1 Dans la zone de travail, sélectionnez un objet bitmap ou une forme vectorielle.
2 Dans le panneau Outils, sélectionnez l’outil Mise à l’échelle en 9 tranches
.
Remarque : si vous avez sélectionné une forme automatique à l’étape 1, Fireworks vous demande de la dissocier. Vous
ne pouvez le faire qu’une fois que vous avez terminé de régler les points de contrôle de la forme automatique.
3 Dans le document, disposez les repères de découpe de façon à conserver autant que possible la géométrie de l’objet.
(Pour plus de détails, reportez-vous à la section « Mise à l’échelle en 9 tranches » à la page 50.)
4 Transformez l’objet en faisant glisser un angle ou une poignée latérale.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 53
Sélection et transformation d’objets
Voir aussi
« Formes simples » à la page 74
« formes automatiques » à la page 78
« Préférences de modification » à la page 312
Organisation de plusieurs objets
Options d’organisation des objets
Groupement d’objets Permet de considérer les objets comme un seul objet ou de protéger les relations de chaque objet
avec les autres objets du groupe.
Empilement des objets Permet de disposer les objets derrière ou devant d’autres objets
Alignement d’objets sélectionnés Permet d’aligner des objets sur l’une des parties de la zone de travail, ou sur un axe
vertical ou horizontal.
Association ou dissociation des objets
Vous pouvez associer des objets distincts sélectionnés et les manipuler comme s’ils formaient un seul objet. Par
exemple, après avoir dessiné les pétales d’une fleur comme objets individuels, associez-les pour sélectionner et déplacer
la fleur tout entière en tant qu’objet unique.
Vous pouvez modifier les groupes sans les dissocier. Vous pouvez sélectionner un objet individuel au sein d’un groupe
et le modifier sans dissocier les autres objets. Les objets peuvent être dissociés à tout moment.
❖ Choisissez la commande Modification > Associer ou Modification > Dissocier.
Sélection d’objets dans des groupes
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.
La modification des attributs d’un objet sous-sélectionné ne s’applique qu’à l’objet sous-sélectionné lui-même. Le
déplacement d’un objet sous-sélectionné vers un autre calque supprime cet objet du groupe.
Sous-sélection d’un objet au sein d’un groupe
Sélection d’un objet appartenant à un groupe
❖ Sélectionnez l’outil Sous-sélection, puis cliquez sur l’objet ou faites glisser une zone de sélection autour de l’objet.
Pour ajouter des objets à la sélection ou pour en supprimer, maintenez enfoncée la touche Maj lorsque vous cliquez
dessus ou faites glisser le pointeur.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 54
Sélection et transformation d’objets
Sélection du groupe contenant un objet sous-sélectionné
❖ Procédez de l’une des manières suivantes :
• Cliquez n’importe où dans le groupe avec le bouton droit de la souris (Windows) ou tout en maintenant la
touche Ctrl enfoncée (Mac OS), puis choisissez Sélection > Supersélection dans le menu contextuel.
• Choisissez Sélection > Supersélection.
Sélection de tous les objets d’un groupe sélectionné
❖ Procédez de l’une des manières suivantes :
• Cliquez n’importe où dans le groupe avec le bouton droit de la souris (Windows) ou tout en maintenant la
touche Ctrl enfoncée (Mac OS), puis choisissez Sélection > Sous-sélection dans le menu contextuel.
• Choisissez Sélection > Sous-sélection.
Empilement des objets
Au sein d’un calque, Fireworks empile les objets dans leur ordre de création, en plaçant les objets les plus récents en
premier. L’ordre d’empilage des objets détermine leur aspect lorsqu’ils se chevauchent.
Les calques affectent également l’ordre d’empilage. Par exemple, supposons qu’un document possède deux calques : le
calque 1 et le calque 2. Si le calque 1 apparaît sous le calque 2 dans le panneau Calques, tous les éléments du calque 2
apparaissent devant les éléments du calque 1.
Vous pouvez modifier l’ordre des calques dans le panneau Calques en faisant glisser un calque vers un nouvel
emplacement. Pour plus de détails, reportez-vous à la section « Organisation des calques » à la page 137.
Modification de l’ordre d’empilage d’un objet sélectionné ou d’un groupe dans un calque
• Pour déplacer l’objet ou le groupe tout en haut ou tout en bas de la pile, sélectionnez Modification > Disposition >
Premier plan ou Arrière-plan.
• Pour déplacer l’objet ou le groupe d’une place vers le haut ou vers le bas de la pile, sélectionnez Modification >
Disposition > Vers l’avant ou Vers l’arrière.
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.
Disposition des objets entre les différents calques
Le panneau Calques met à votre disposition un autre niveau de contrôle de l’organisation. Pour déplacer des objets
sélectionnés d’un calque vers un autre, faites glisser la vignette de l’objet ou l’indicateur de sélection bleu vers un autre
calque.
Alignement des objets
Vous pouvez appliquer une ou plusieurs commandes d’alignement aux objets sélectionnés.
Pour accéder rapidement à ces commandes, utilisez le panneau Alignement (Fenêtre > Alignement).
Alignement d’objets sélectionnés
1 Choisissez Modification > Alignement.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 55
Sélection et transformation d’objets
2 Choisissez l’une des options suivantes :
A gauche Permet d’aligner les objets sur l’objet sélectionné situé le plus à gauche.
Centre vertical Permet d’aligner les points centraux des objets sur un axe vertical.
A droite Permet d’aligner les objets sur l’objet sélectionné situé le plus à droite.
En haut Permet d’aligner les objets sur l’objet sélectionné situé le plus haut.
Centre horizontal Permet d’aligner les points centraux des objets sur un axe horizontal.
En bas Permet d’aligner les objets sur l’objet sélectionné situé le plus bas.
Pour plus d'informations sur l'alignement des objets, voir le didacticiel sur l'alignement et la répartition des objets .
Alignement des formes automatiques
Pour définir les options d’alignement des formes automatiques, utilisez l’API correspondante. Par exemple :
smartShape.elem.elements[0].pathAttributes.brushPlacement="center";
smartShape.elem.elements[0].pathAttributes.brushPlacement="inside";
smartShape.elem.elements[0].pathAttributes.brushPlacement="outside";
smartShape.elem.elements[0].pathAttributes.fillOnTop=false;
Les paramètres spécifiés s’utilisent pour la forme automatique correspondante uniquement. Les contours et tracés
dessinés après l’application de ces paramètres à une forme automatique sont utilisés pour les formes automatiques
futures, mais pas pour les objets.
Répartition égale des largeurs et des hauteurs de trois objets sélectionnés ou plus
❖ Choisissez Modification > Alignement > Répartir en largeur ou Modification > Alignement > Répartir en hauteur.
56
Dernière mise à jour le 29/4/2010
Chapitre 5 : Utilisation d’images bitmap
Création d’images bitmap
Les images bitmap 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. Les photographies, les images numérisées et les graphiques créés à partir de
programmes de dessin sont des exemples d’images bitmap. Elles sont parfois appelées images pixellisées.
Adobe® Fireworks® combine les fonctionnalités des applications de retouche de photos, de traçage de vecteurs et de
dessin. Vous pouvez créer des images bitmap en dessinant à l’aide d’outils bitmap, en convertissant des objets
vectoriels en images bitmap ou en ouvrant ou en important des images. Les images bitmap ne peuvent pas être
converties en objets vectoriels.
Voir aussi
« A propos des graphiques bitmap » à la page 4
Création d’objets bitmap par tracé
Lorsque vous créez un objet bitmap, il s’affiche sur le calque actif. Dans le panneau Calques avec les calques développés,
vous pouvez voir une vignette et le nom de chaque objet bitmap sous le calque sur lequel il se trouve. Bien que certaines
applications d’objets bitmap considèrent chaque objet bitmap comme un calque distinct, Fireworks combine les objets
bitmap, vectoriels et texte sur des calques.
1 Dans la section Bitmap du panneau Outils, sélectionnez l’outil Pinceau ou Crayon.
2 Utilisez l’outil Pinceau ou Crayon pour créer des objets bitmap dans la zone de travail.
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, reportez-vous à la section « Modification d’objets bitmap » à la page 57.
Création d’objets bitmap vides
Vous pouvez créer un objet bitmap vide et y tracer ou peindre des pixels ultérieurement.
❖ Procédez de l’une des manières suivantes :
• Cliquez sur le bouton Nouvelle image bitmap
du panneau Calques.
• Choisissez Edition > Insertion > Image bitmap vide.
• Dessinez un cadre de sélection, en partant d’une zone vierge de la zone de travail, puis remplissez-le. Pour plus
de détails, reportez-vous à la section « Création de cadres de sélection de pixels » à la page 39.
Une image bitmap vide est ajoutée au calque actuel dans le panneau Calques.
Coupage ou copie de pixels et collage en tant que nouvel objet bitmap
1 Effectuez une sélection de pixels à l’aide des outils Cadre de sélection, Lasso ou Baguette magique.
2 Coupez-collez (ou copiez-collez) la sélection dans le nouvel objet bitmap.
La sélection apparaît dans le panneau Calques comme un objet sur le calque actif.
UTILISATION DE FIREWORKS CS5 57
Dernière mise à jour le 29/4/2010
Utilisation d’images bitmap
Remarque : vous pouvez également cliquer avec le bouton droit de la souris (Windows) ou maintenir la touche Ctrl
enfoncée et cliquer (Macintosh) sur un cadre de sélection de pixels pour sélectionner une option de coupage ou de copie.
Conversion des objets vectoriels sélectionnés en image bitmap
Remarque : la conversion d’un objet vectoriel en objet bitmap est irréversible, sauf si la commande Edition > Annuler ou
l’annulation d’actions dans le panneau Historique est encore possible.
❖ Procédez de l’une des manières suivantes :
• Choisissez Modification > Aplatir la sélection.
• Cliquez sur Aplatir la sélection dans le menu Options du panneau Calques.
Modification d’objets bitmap
Les outils les plus couramment utilisés pour la retouche photo sont regroupés dans le panneau Modification d’images
(Fenêtre > Autres > Modification d’images). Pour plus d’informations, voir l’article de Ruth Kastenmayer,
http://www.adobe.com/go/learn_fw_imageeditingpanel_fr, dans le Centre des développeurs Adobe.
Dessin d’objets bitmap
1 Sélectionnez l’outil Crayon
.
2 Définissez les options de l’outil dans l’inspecteur des propriétés :
Lissage Lisse le bord des traits que vous dessinez.
Effacement automatique Utilise la couleur de fond lorsque vous cliquez sur la couleur de contour avec l’outil
Crayon.
Conserver la transparence Limite l’action de l’outil Crayon aux pixels existants. Aucun trait n’apparaît dans les
zones transparentes du graphique.
3 Faites glisser le pointeur pour dessiner. Tout en maintenant la touche Maj enfoncée, faites glisser le pointeur afin
d’imposer au tracé une ligne horizontale, verticale ou diagonale.
Dessin d’un objet avec l’outil Pinceau
Pour plus d’informations, reportez-vous à la section « Application et modification de contours » à la page 120.
1 Sélectionnez l’outil Pinceau
.
2 Définissez les attributs du contour dans l’inspecteur des propriétés.
3 Faites glisser le pointeur pour dessiner.
Application de la couleur de fond aux pixels
1 Sélectionnez l’outil Pot de peinture
.
2 Sélectionnez une couleur dans la case Couleur de fond.
3 Définissez la valeur de la tolérance dans l’inspecteur des propriétés.
UTILISATION DE FIREWORKS CS5 58
Dernière mise à jour le 29/4/2010
Utilisation d’images bitmap
Remarque : la tolérance détermine le degré de similarité de la couleur des pixels qui seront remplis. Une valeur de
tolérance faible remplit les pixels dont les valeurs chromatiques sont similaires à celles du pixel sur lequel vous cliquez.
Une valeur de tolérance élevée remplit les pixels dont la plage des valeurs chromatiques est plus large.
4 Cliquez sur l’image.
Tous les pixels appartenant à la plage de tolérance adoptent la couleur de fond.
Application d’un fond en dégradé à une sélection de pixels
1 Effectuez la sélection.
2 Dans le panneau Outils, cliquez sur l’outil Pot de peinture, puis sélectionnez l’outil Dégradé
contextuel.
dans le menu
3 Définissez les attributs de fond dans l’inspecteur des propriétés.
4 Cliquez sur la sélection de pixels pour appliquer le fond.
Echantillonnage d’une couleur à utiliser comme couleur de contour ou de
fond
Remarque : le pointeur de la pipette du sélecteur de couleurs est différent de l’outil Pipette (voir la section
« Echantillonnage de couleurs à partir d’une fenêtre contextuelle pour la sélection des couleurs » à la page 116).
Prélevez une couleur dans une image à l’aide de l’outil Pipette
.
1 Si le bon attribut n’est pas encore activé, procédez de l’une des manières suivantes :
• Cliquez sur l’icône de contour en regard de la case Couleur de contour du panneau Outils pour en faire l’attribut
actif.
• Cliquez sur l’icône de fond en regard de la case Couleur de fond du panneau Outils pour en faire l’attribut actif.
Remarque : ne cliquez pas sur la case de couleur. Si vous cliquez dessus, le pointeur de pipette s’affiche à la place
de l’outil Pipette.
2 Ouvrez un document Fireworks ou n’importe quel document que Fireworks peut ouvrir.
3 Dans la section Couleurs du panneau Outils, sélectionnez l’outil Pipette. Définissez ensuite le paramètre
d’échantillon Egalisation des couleurs dans l’inspecteur des propriétés :
1 pixel Crée une couleur de contour ou de fond à partir d’un pixel unique.
Moyenne 3 x 3 Crée une couleur de contour ou de fond à partir de la moyenne des valeurs chromatiques d’une zone
de 3 pixels sur 3.
Moyenne 5 x 5 Crée une couleur de contour ou de fond à partir de la moyenne des valeurs chromatiques d’une zone
de 5 pixels sur 5.
4 Cliquez sur le document avec l’outil Pipette.
La couleur échantillonnée est disponible dans toutes les cases Couleur de contour et Couleur de fond de Fireworks.
Effacement des pixels d’un objet bitmap ou d’une sélection
1 Sélectionnez l’outil Gomme
.
2 Dans l’inspecteur des propriétés, sélectionnez une forme de gomme ronde ou carrée.
3 Faites glisser les curseurs pour ajuster les niveaux Bord, Taille et Opacité.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 59
Utilisation d’images bitmap
4 Faites glisser le pointeur de l’outil Gomme sur les pixels à effacer.
Recadrage d’un objet bitmap sélectionné
Vous pouvez isoler un seul objet bitmap dans un document Fireworks et recadrer uniquement cet objet bitmap,
laissant intacts les autres objets de la zone de travail.
1 Sélectionnez un objet bitmap ou tracez un cadre de sélection à l’aide d’un outil de sélection bitmap.
2 Choisissez Edition > Recadrer l’objet bitmap sélectionné.
3 Ajustez les poignées de recadrage jusqu’à ce que le cadre de sélection entoure la zone de l’image bitmap à conserver.
Remarque : pour annuler une sélection de recadrage, appuyez sur la touche Echap.
Cadre de sélection
4 Cliquez deux fois à l’intérieur du cadre de sélection ou appuyez sur la touche Entrée pour recadrer la sélection.
Retouche des images bitmap
L’outil Tampon encreur vous permet de copier ou de cloner une zone d’une image dans une autre.
L’outil Goutte d’eau réduit la focalisation des zones sélectionnées dans une image.
L’outil Doigt prélève une couleur et l’étale dans la direction dans laquelle vous faites glisser le pointeur dans une image.
L’outil Netteté accentue les zones d’une image.
L’outil Densité - éclaircit des parties d’une image.
L’outil Densité + assombrit des parties d’une image.
L’outil Retouche des yeux rouges réduit l’effet yeux rouges sur vos photos.
L’outil Remplacement de couleur permet de recouvrir une couleur existante par une autre couleur.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 60
Utilisation d’images bitmap
Clonage de pixels
Le clonage de pixels est utile lorsque vous voulez réparer une photographie endommagée ou éliminer 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.
1 Sélectionnez l’outil Tampon encreur.
2 Cliquez sur une zone afin de la désigner comme étant la source (la zone à cloner).
Le pointeur d’échantillonnage se transforme en un pointeur en forme de croix.
Remarque : pour désigner une autre zone de pixels à cloner, cliquez sur cette zone tout en maintenant la touche Alt
(Windows) ou Option (Macintosh) enfoncée.
3 Déplacez-vous sur une autre partie de l’image, puis faites glisser le pointeur.
Deux pointeurs s’affichent.
• Le premier, de la forme d’une croix, représente la source.
• Selon les préférences de pinceau que vous avez sélectionnées, 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 située sous le second pointeur.
Définition des options de l’outil Tampon encreur
1 Sélectionnez l’outil Tampon encreur.
2 Dans l’inspecteur des propriétés, définissez les options de l’outil Tampon encreur :
Corps Détermine la taille du tampon.
Bord Détermine l’adoucissement du contour (100 % = dur, 0 % = doux).
Source alignée Détermine l’opération d’échantillonnage. Lorsque l’option Source alignée est sélectionnée, le
pointeur d’échantillonnage se déplace verticalement et horizontalement, en alignement avec le second. Lorsque
l’option Source alignée est désélectionnée, la zone d’échantillonnage est fixe, indépendamment de l’endroit où vous
déplacez le second pointeur et l’endroit où vous cliquez.
Utiliser l’ensemble du document Permet d’effectuer un échantillonnage de tous les objets sur tous les calques.
Lorsque cette option est désélectionnée, l’outil Tampon encreur prélève des échantillons uniquement à partir de
l’objet actif.
Opacité Détermine ce qui peut être vu de l’arrière-plan à travers le contour.
Mode de fusion Détermine la manière dont l’image clonée affecte l’arrière-plan.
Reproduction d’une sélection de pixels
• Faites glisser la sélection de pixels à l’aide de l’outil Sous-sélection.
• Tout en maintenant la touche Alt (Windows) ou Option (Mac OS) enfoncée, faites glisser la sélection de pixels à
l’aide de l’outil Pointeur.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 61
Utilisation d’images bitmap
Atténuation, accentuation et maculage des images
Les outils Goutte d’eau et Netteté agissent sur la focalisation des pixels. L’outil Goutte d’eau vous permet de mettre en
avant certaines parties d’une image en appliquant une atténuation sélective sur la focalisation des éléments. L’outil
Netteté est utile pour corriger des problèmes de numérisation ou des photographies floues. L’outil Doigt vous permet
de mélanger légèrement les couleurs.
1 Sélectionnez l’outil Goutte d’eau, Netteté ou Doigt.
2 Définissez les options du pinceau dans l’inspecteur des propriétés :
Corps Définit la taille de la pointe.
Bord Définit la douceur de la pointe.
Forme Définit une pointe ronde ou carrée.
Intensité Définit la quantité d’atténuation ou d’accentuation.
Options de maculage
Pression Définit l’intensité du trait.
Couleur de la tache Permet de choisir la couleur à utiliser au début de chaque trait pour l’étaler. 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 Etale la couleur en utilisant les données chromatiques de tous les objets sur tous
les calques. Si cette option est désélectionnée, l’outil Doigt utilise les couleurs provenant uniquement de l’objet actif.
3 Faites glisser l’outil sur les pixels à accentuer, à atténuer ou à étaler.
Maintenez la touche Alt (Windows) ou Option (Mac OS) enfoncée pour passer d’un outil à un autre.
Eclaircissement et assombrissement de portions d’image
Vous pouvez éclaircir ou assombrir des pixels d’une image à l’aide des outils Révélateur ou Brûlure, respectivement.
Utiliser ces outils revient à augmenter ou diminuer l’exposition lumineuse pendant le développement d’une photo.
1 Sélectionnez l’outil Densité - pour éclaircir des parties d’image, ou l’outil Densité + pour les assombrir.
2 Définissez les options du pinceau et l’exposition dans l’inspecteur des propriétés.
L’exposition est comprise entre 0 et 100 %. Des valeurs élevées accentuent les effets.
3 Définissez la gamme dans l’inspecteur des propriétés :
Tons foncés Change principalement les parties sombres de l’image.
Tons clairs Change principalement les parties claires de l’image.
Tons moyens Change principalement la plage des tons moyens par couche de l’image.
4 Faites glisser le pointeur sur la partie de l’image à éclaircir ou à assombrir.
Remarque : pour basculer temporairement entre l’outil Densité - et l’outil Densité +, maintenez la touche Alt
(Windows) enfoncée.
Suppression de l’effet yeux rouges sur des photos
L’outil Retouche des yeux rouges traite rapidement les zones rouges de la photographie en les recouvrant de tons de
gris ou de noir.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 62
Utilisation d’images bitmap
Photographie originale et après utilisation de l’outil Retouche des yeux rouges
1 Dans la section Bitmap du panneau Outils, cliquez sur l’outil Suppression de l’œil rouge
. (Si l’outil est masqué,
maintenez le curseur enfoncé sur l’outil Tampon encreur jusqu’à l’apparition d’un menu contextuel.)
2 Dans l’inspecteur des propriétés, définissez les options suivantes :
Tolérance Détermine la plage des teintes à remplacer (0 remplace uniquement le rouge ; 100 remplace toutes les
teintes contenant du rouge).
Intensité Définit la puissance des gris utilisés pour remplacer les couleurs rouges.
3 Faites glisser le pointeur en forme de croix sur les pupilles rouges des sujets de la photographie.
Si les yeux rouges persistent, choisissez Edition > Annuler, puis répétez les étapes 2 et 3 avec d’autres valeurs de
tolérance et d’intensité.
Remplacement des couleurs dans les objets bitmap
Photographie originale et après utilisation de l’outil Remplacement de couleur
Remplacement d’une couleur à l’aide du nuancier
1 Dans la section Bitmap du panneau Outils, sélectionnez l’outil Remplacer la couleur
. (Si l’outil est masqué,
maintenez le curseur enfoncé sur l’outil Tampon encreur jusqu’à l’apparition d’un menu contextuel.)
2 Dans la zone De dans l’inspecteur des propriétés, cliquez sur Nuance.
3 Cliquez sur la case de couleur De pour sélectionner la pipette, puis sélectionnez une couleur dans le menu
contextuel pour spécifier la couleur à remplacer.
4 Cliquez sur la case de couleur A dans l’inspecteur des propriétés, puis sélectionnez une couleur dans le menu
contextuel pour sélectionner la couleur de remplacement.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 63
Utilisation d’images bitmap
5 Définissez les autres attributs du contour dans l’inspecteur des propriétés :
Tolérance Détermine la plage des couleurs à remplacer (0 remplace uniquement la couleur De ; 100 remplace
toutes les couleurs semblables à cette couleur).
Intensité Détermine la quantité de couleur De qui est remplacée.
Coloriser Remplace la couleur De par la couleur A. Désélectionnez Coloriser pour remplacer la couleur De par la
couleur A en laissant un peu de la couleur De intacte.
6 Faites glisser l’outil sur la couleur à remplacer.
Remplacement d’une couleur par une couleur sélectionnée dans une image
1 Dans la section Bitmap du panneau Outils, sélectionnez l’outil Remplacer la couleur
. (Si l’outil est masqué,
maintenez le curseur enfoncé sur l’outil Tampon encreur jusqu’à l’apparition d’un menu contextuel.)
2 Dans la zone De dans l’inspecteur des propriétés, cliquez sur Image.
3 Cliquez sur la case de couleur A dans l’inspecteur des propriétés pour sélectionner la pipette, puis sélectionnez une
couleur dans le menu contextuel.
4 Définissez les autres attributs de contour dans l’inspecteur des propriétés.
5 A l’aide de l’outil, cliquez sur une section de l’image bitmap contenant la couleur à remplacer. Sans soulever l’outil,
continuez à peindre l’image.
Atténuation des bords par contour progressif
La diffusion atténue les bords d’une sélection de pixels et aide à fusionner la zone sélectionnée avec les pixels
environnants. Le contour progressif est pratique lorsque vous copiez une sélection et que vous la collez sur un
autre arrière-plan.
1 Importez l’image à laquelle vous souhaitez appliquer un contour progressif sur la zone de travail à l’aide de Fichier >
Importer.
2 Sélectionnez la partie concernée de l’image à l’aide de l’un des outils de sélection.
3 Sélectionnez Sélection > Inverser la sélection.
4 Sélectionnez Sélection > Contour progressif. Vous pouvez également sélectionner cette option dans le menu Bord
du panneau Propriétés.
5 Dans la boîte de dialogue Appliquer un contour progressif à la sélection, entrez le rayon du contour progressif. La
valeur par défaut, 10, convient dans la plupart des cas. Vous pouvez aussi sélectionner le rayon souhaité dans le
menu Bord.
6 Appuyez sur Supprimer.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 64
Utilisation d’images bitmap
Ajustement des couleurs et des tons d’une image
bitmap
Pour plus d’informations, reportez-vous à la section « Contrôle de la manière dont un document se redessine à
l’écran » à la page 28.
Les filtres d’ajustement de la couleur et du ton permettent d’améliorer et de rehausser les couleurs des images bitmap.
• Les filtres dynamiques vous permettent d’appliquer des filtres que vous pouvez supprimer ou modifier sans altérer
définitivement les pixels. Il est recommandé d’utiliser les filtres dynamiques dans la mesure du possible.
Remarque : bien que les filtres dynamiques soient plus souples à manipuler, leur utilisation en grand nombre dans un
document peut ralentir Fireworks.
• Pour appliquer des filtres de manière irréversible et définitive, sélectionnez-les à partir du menu Filtres.
• Vous ne pouvez pas appliquer de filtres dynamiques aux sélections de pixels depuis le menu Filtres. Vous pouvez
définir une zone d’une image bitmap et l’utiliser pour créer une image bitmap distincte puis lui appliquer un filtre
dynamique.
• Si vous appliquez un filtre à un objet vectoriel sélectionné en utilisant le menu Filtres, Fireworks convertit la
sélection en un objet bitmap.
Application d’un filtre dynamique à une zone délimitée par un cadre de
sélection bitmap
1 Sélectionnez un outil de sélection bitmap, puis tracez un cadre de sélection.
2 Choisissez Edition > Couper.
3 Choisissez Edition > Coller.
Fireworks colle la sélection à l’emplacement exact où étaient localisés les pixels d’origine, mais la sélection est
maintenant un objet bitmap distinct.
4 Cliquez sur la vignette du nouvel objet bitmap dans le panneau Calques afin de sélectionner l’objet bitmap.
5 Appliquez un filtre dynamique à partir de l’inspecteur des propriétés.
Fireworks applique le filtre dynamique uniquement au nouvel objet bitmap, simulant l’application d’un filtre à une
sélection de pixels.
Réglage de la plage tonale des images bitmap
Une image bitmap avec une plage tonale complète doit contenir un nombre pair de pixels dans toutes les zones. Trois
options sont proposées pour ajuster la plage tonale : la fonction Niveaux, la fonction Courbes pour un contrôle précis
ou la fonction Niveaux automatiques pour des réglages automatiques.
La fonction Niveaux corrige les images bitmap comportant une forte concentration de pixels dans les tons clairs, les
tons moyens ou les tons foncés.
Tons clairs Corrige un excès de pixels clairs, qui donne à l’image un aspect délavé.
Tons moyens Corrige un excès de pixels dans les tons moyens, qui rend l’image fade.
Tons foncés Corrige un excès de pixels sombres, qui masque une grande partie des détails.
La fonction Niveaux définit les pixels les plus sombres sur le noir et les plus clairs sur le blanc, puis redistribue les tons
moyens proportionnellement. Cette opération permet d’obtenir une image dont les pixels sont aussi nets que possible.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 65
Utilisation d’images bitmap
Original avec des pixels concentrés dans les tons clairs et après exécution de la fonction Niveaux
L’histogramme de la boîte de dialogue Niveaux permet d’afficher la répartition des pixels d’un bitmap. L’histogramme
est une illustration graphique de la répartition des pixels dans les tons clairs, les tons moyens et les tons foncés.
L’histogramme vous aide à déterminer la meilleure méthode de correction de la plage tonale d’une image. Une forte
concentration de pixels dans les tons foncés et les tons clairs indique que l’image peut être améliorée avec la fonction
Niveaux ou Courbes.
L’axe horizontal représente les valeurs chromatiques des plus foncées (0) aux plus claires (255). L’axe horizontal se lit
de gauche à droite : les pixels les plus sombres se situent à gauche, les pixels moyens au centre et les pixels les plus clairs
à droite.
L’axe vertical représente le nombre de pixels en fonction du niveau de luminosité. En général, vous réglez les tons clairs
et les tons foncés en premier. Le réglage des tons moyens en second permet d’améliorer leur valeur de luminosité sans
affecter les tons clairs et les tons foncés.
Réglage des tons clairs, des tons moyens et des tons foncés à l’aide de la
fonction Niveaux
1 Sélectionnez l’image bitmap.
2 Procédez de l’une des manières suivantes :
• Dans l’inspecteur des propriétés, cliquez sur l’icône plus (+) en regard de l’étiquette Filtres, puis choisissez
Régler la couleur > Niveaux dans le menu contextuel Filtres.
• Choisissez Filtres > Régler la couleur > Niveaux.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 66
Utilisation d’images bitmap
Boîte de dialogue Niveaux
Pour afficher vos modifications dans l’espace de travail, cliquez sur Aperçu dans la boîte de dialogue. L’image
est actualisée à mesure que vous apportez des modifications.
3 Dans le menu contextuel Couche, choisissez d’appliquer ces modifications à des couches de couleur spécifiques
(Rouge, Bleu ou Vert) ou à toutes les couches de couleur (RVB).
4 Faites glisser les curseurs Niveaux d’entrées sous l’histogramme :
• Le curseur de droite permet de régler les tons clairs avec des valeurs comprises entre 255 et 0.
• Le curseur du centre permet de régler les tons moyens avec des valeurs comprises entre 10 et 0.
• Le curseur de gauche permet de régler les tons foncés avec des valeurs comprises entre 0 et 255.
Remarque : la valeur des tons foncés ne peut pas être supérieure à la valeur des tons clairs, la valeur des tons clairs
ne peut pas être inférieure à la valeur des tons foncés, et les tons moyens doivent se situer entre les paramètres des
tons foncés et des tons clairs.
5 Faites glisser les curseurs Niveaux de sortie pour régler le contraste.
• Le curseur de droite permet de régler les tons clairs avec des valeurs comprises entre 255 et 0.
• Le curseur de gauche permet de régler les tons foncés avec des valeurs comprises entre 0 et 255.
Réglage automatique des tons clairs, des tons moyens et des tons foncés
1 Sélectionnez l’image.
2 Procédez de l’une des manières suivantes :
• Dans l’inspecteur des propriétés, cliquez sur l’icône plus (+) en regard de l’étiquette Filtres, puis choisissez
Régler la couleur > Niveaux automatiques dans le menu contextuel Filtres.
• Choisissez Filtres > Régler la couleur > Niveaux automatiques.
Vous pouvez également régler automatiquement les tons clairs, les tons moyens et les tons foncés en cliquant
sur le bouton Auto dans la boîte de dialogue Niveaux ou Courbes.
Ajustement d’une couleur spécifique dans la plage tonale à l’aide de la
fonction Courbes
La fonction Courbes permet un contrôle de la plage tonale plus précis qu’avec la fonction Niveaux. Grâce à la fonction
Courbes, vous pouvez ajuster n’importe quelle couleur dans la plage tonale, sans toucher aux autres couleurs.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 67
Utilisation d’images bitmap
La grille de la boîte de dialogue Courbes illustre deux valeurs de luminosité :
L’axe horizontal Représente la luminosité d’origine des pixels (telle qu’illustrée dans la zone Entrée).
L’axe vertical Représente les nouvelles valeurs de luminosité (telles qu’illustrées dans la zone Sortie).
Lorsque vous ouvrez la boîte de dialogue Courbes pour la première fois, la diagonale indique qu’aucune modification
n’a été apportée et que, par conséquent, les valeurs d’entrée et de sortie sont identiques pour tous les pixels.
1 Sélectionnez l’image.
2 Pour ouvrir la boîte de dialogue Courbes, procédez de l’une des manières suivantes :
• Dans l’inspecteur des propriétés, cliquez sur le bouton Plus (+) en regard de l’étiquette Filtres, puis choisissez
Régler la couleur > Courbes dans le menu contextuel Filtres.
Remarque : si l’inspecteur des propriétés est partiellement réduit, cliquez sur le bouton Ajouter des filtres à la place
du bouton Plus.
• Choisissez Filtres > Régler la couleur > Courbes.
Boîte de dialogue Courbes
3 Dans le menu contextuel Couche, choisissez si vous voulez appliquer les modifications à des couches de couleur
spécifiques ou à l’ensemble des couleurs.
4 Pour régler la courbe, cliquez sur l’un des points de la diagonale de la grille, puis faites-le glisser à une autre position.
• Tous les points de la courbe disposent de leurs propres valeurs Entrée et Sortie. Lorsque vous faites glisser un
point, les valeurs Entrée et Sortie sont actualisées en conséquence.
• La courbe affiche des valeurs de luminosité comprises entre 0 et 255, 0 représentant les tons foncés.
Courbe après déplacement d’un point par glissement pour le régler
UTILISATION DE FIREWORKS CS5 68
Dernière mise à jour le 29/4/2010
Utilisation d’images bitmap
Pour ajuster automatiquement les tons clairs, les tons moyens et les tons foncés, cliquez sur le bouton Auto dans
la boîte de dialogue Courbes.
Suppression d’un point le long de la courbe
❖ Faites glisser le point hors de la courbe.
Remarque : vous ne pouvez pas supprimer les points des extrémités de la courbe.
Réglage manuel de la balance des tons
1 Ouvrez la boîte de dialogue Niveaux ou Courbes, puis sélectionnez une couche de couleur dans le menu
contextuel Couche.
2 Sélectionnez la pipette appropriée pour rétablir les valeurs tonales de l’image :
•
A l’aide de la pipette Ton clair
clairs.
•
A l’aide de la pipette des tons moyens, cliquez sur un pixel de couleur neutre dans l’image afin de redéfinir la
valeur des tons moyens.
•
A l’aide de la pipette des tons foncés, cliquez sur le pixel le plus sombre de l’image pour redéfinir la valeur des
tons foncés.
, cliquez sur le pixel le plus clair de l’image afin de redéfinir la valeur des tons
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. Elle agit sur les tons
clairs, les tons foncés et les tons moyens d’une image.
Original et après réglage de la luminosité
1 Sélectionnez l’image.
2 Procédez de l’une des manières suivantes :
• Dans l’inspecteur des propriétés, cliquez sur l’icône plus (+) en regard de l’étiquette Filtres, puis choisissez
Régler la couleur > Luminosité/Contraste dans le menu contextuel Filtres.
• Choisissez Filtres > Régler la couleur > Luminosité/Contraste.
3 Faites glisser les curseurs Luminosité et Contraste pour régler les paramètres dans la plage comprise entre –100
et 100.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 69
Utilisation d’images bitmap
Modification des couleurs d’un objet par fusion
Pour plus de détails, reportez-vous à la section « A propos des modes de fusion » à la page 153.
Lorsque vous mélangez des couleurs, la couleur est ajoutée par-dessus l’objet. La fusion d’une couleur à celle d’un objet
existant produit un résultat semblable à celui de la fonction Teinte/Saturation. La fusion permet cependant d’appliquer
rapidement une couleur spécifique d’un nuancier.
1 Dans l’inspecteur des propriétés, cliquez sur l’icône plus (+) en regard de l’étiquette Filtres, puis choisissez Régler
la couleur > Fond dans le menu contextuel Filtres.
2 Sélectionnez un mode de fusion. Le mode par défaut est Normal.
3 Sélectionnez une couleur de fond dans le menu contextuel de la case de couleur.
4 Sélectionnez un pourcentage d’opacité pour la couleur de fond, puis appuyez sur la touche Entrée.
Réglage de la teinte et de la saturation
Vous pouvez régler la nuance (teinte), l’intensité (saturation) ou la clarté (luminosité) d’une couleur dans une image.
Original et après réglage de la saturation
1 Sélectionnez l’image.
2 Procédez de l’une des manières suivantes :
• Dans l’inspecteur des propriétés, cliquez sur l’icône plus (+) en regard de l’étiquette Filtres, puis choisissez
Régler la couleur > Teinte/Saturation dans le menu contextuel Filtres.
• Choisissez Filtres > Régler la couleur > Teinte/Saturation.
3 Faites glisser les curseurs pour ajuster les couleurs de l’image.
• La valeur de teinte peut être comprise entre -180 et 180.
• Les valeurs de saturation et de luminosité peuvent être comprises entre –100 et 100.
Modification d’une image RVB en une image à deux tons ou colorisation d’une image en
niveaux de gris
❖ Dans la boîte de dialogue Teinte/Saturation, sélectionnez Coloriser.
Remarque : si vous sélectionnez Coloriser, la plage de valeurs des curseurs Teinte et Saturation change. Les valeurs de
teinte sont comprises entre 0 et 360, et les valeurs de saturation entre 0 et 100.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 70
Utilisation d’images bitmap
Inversion des valeurs chromatiques d’une image
Vous pouvez appliquer la valeur inverse de chaque couleur d’une 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).
Image monochrome et après inversion
Image couleur et après inversion
1 Sélectionnez l’image.
2 Procédez de l’une des manières suivantes :
• Dans l’inspecteur des propriétés, cliquez sur l’icône plus (+) en regard de l’étiquette Filtres, puis choisissez
Régler la couleur > Inverser dans le menu contextuel Filtres.
• Choisissez Filtres > Régler la couleur > Inverser.
Conversion d’un objet en niveaux de gris
1 Sélectionnez l’objet.
2 Sélectionnez Commandes > Création > Convertir en niveaux de gris.
Conversion d’un objet en sépia
1 Sélectionnez l’objet.
2 Sélectionnez Commandes > Création > Convertir en sépia.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 71
Utilisation d’images bitmap
Atténuation et accentuation des images bitmap
Options d’atténuation
Atténué Adoucit la focalisation des pixels sélectionnés.
Plus flou Applique un flou trois fois plus puissant que celui de la commande Flou.
Flou gaussien Applique à chaque pixel une valeur médiane pondérée d’atténuation pour produire un effet de voilage.
Les valeurs de rayon de flou peuvent être comprises entre 0,1 et 250. Plus le rayon est grand, plus l’effet de flou est
marqué.
Flou directionnel Donne l’impression que l’image est en mouvement. Les valeurs de distance peuvent être comprises
entre 1 et 100. Plus la distance est grande, plus l’effet de flou est marqué.
Flou radial Confère un effet de rotation à l’image. Les valeurs de qualité peuvent être comprises entre 1 et 100. Une
qualité élevée se traduit par moins de répétitions de l’image originale dans l’effet de flou.
Flou de zoom Donne l’impression que le sujet de l’image s’approche ou s’éloigne de la personne qui regarde la photo.
Les valeurs Intensité et Qualité sont requises. Une qualité élevée se traduit par moins de répétitions de l’image originale
dans l’effet de flou. Plus l’intensité est élevée, plus l’effet de flou est marqué.
1 Sélectionnez l’image.
2 Procédez de l’une des manières suivantes :
• Dans l’inspecteur des propriétés, cliquez sur l’icône plus (+) en regard de l’étiquette Filtres, puis choisissez, puis
choisissez une option d’atténuation dans le menu contextuel Filtres.
• Choisissez Filtres > Atténuation > [option d’atténuation].
3 Définissez d’autres valeurs pour l’option d’atténuation choisie.
Transformation d’une image bitmap en dessin au trait
Donnez à vos images bitmap l’apparence de dessins au trait en identifiant les transitions de couleurs dans les images
et en les changeant en traits. Procédez de l’une des manières suivantes :
• Dans l’inspecteur des propriétés, cliquez sur l’icône plus (+) en regard de l’étiquette Filtres, puis choisissez Autre >
Tracé des contours dans le menu contextuel Filtres.
• Choisissez Filtres > Autre > Tracé des contours.
Original et après application de la commande Tracé des contours
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 72
Utilisation d’images bitmap
Conversion d’une image en transparent
Convertissez un objet ou du texte en transparent selon le degré de transparence de l’image. Procédez de l’une des
manières suivantes :
• Dans l’inspecteur des propriétés, cliquez sur l’icône plus (+) en regard de l’étiquette Filtres, puis choisissez Autre >
Convertir en Alpha dans le menu contextuel Filtres.
• Choisissez Filtres > Autre > Convertir en Alpha.
Accentuation d’une image
Sélectionnez une option d’accentuation de la netteté pour corriger des images floues :
Plus net Règle la focalisation d’une image floue en augmentant le contraste des pixels adjacents.
Encore plus net Augmente le contraste des pixels adjacents trois fois plus que la commande Plus net.
Accentuation Règle le contraste des bords des pixels pour rendre l’image plus nette. Cette option offre le meilleur
contrôle et doit être utilisée en priorité pour accentuer une image.
Original et après accentuation
1 Sélectionnez l’image.
2 Procédez de l’une des manières suivantes :
• Dans l’inspecteur des propriétés, cliquez sur l’icône plus (+) en regard de l’étiquette Filtres, sélectionnez
Renforcement, puis sélectionnez une option d’accentuation dans le menu contextuel Filtres.
• Choisissez Filtres > Renforcement > [option d’accentuation].
Les options Plus net ou Encore plus net prennent effet.
3 (Option Accentuation) Faites glisser le curseur Intensité de l’accentuation pour sélectionner un facteur de netteté
compris entre 1 et 500 %.
4 Réglez 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 Réglez le curseur Seuil pour sélectionner 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.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 73
Utilisation d’images bitmap
Ajout de bruit à une image
Lorsqu’elles sont affichées à un niveau de zoom élevé, la plupart des images obtenues à partir d’appareils photo
numériques ou de scanners présentent des couleurs qui ne sont pas parfaitement uniformes. Les couleurs sont
constituées de pixels comprenant de nombreuses couleurs différentes. Dans le domaine du traitement de l’image, la
notion de bruit fait référence à ces variations chromatiques aléatoires dans les pixels qui composent une image.
Dans certains cas (notamment lorsque vous collez une partie d’une image dans une autre image), l’écart de variation
chromatique aléatoire entre deux images peut être visible. Ceci empêche les images de se fondre l’une dans l’autre.
Dans ce cas, ajoutez du bruit à l’une des images, ou aux deux, afin de créer l’illusion que ces deux images proviennent
de la même source. Vous pouvez également ajouter du bruit à une image pour des raisons artistiques (pour imiter une
vieille photographie ou des parasites sur un écran de télévision, par exemple).
Photographie originale et après ajout de bruit
Ajout de bruit
1 Sélectionnez l’image.
2 Pour ouvrir la boîte de dialogue Ajout de bruit, procédez de l’une des manières suivantes :
• Dans l’inspecteur des propriétés, cliquez sur l’icône plus (+) en regard de l’étiquette Filtres, puis choisissez
Bruit > Ajout de bruit dans le menu contextuel Filtres.
• Choisissez Filtres > Bruit > Ajout de bruit.
Remarque : l’application d’un filtre à partir du menu Filtres est une action irréversible ; elle ne peut pas être
annulée, sauf si la commande Edition > Annuler est disponible. Pour conserver la possibilité d’effectuer des
ajustements, désactivez ou supprimez ce filtre, puis appliquez-le en tant que filtre dynamique, comme décrit dans
la première option de cette étape. Pour plus d’informations, reportez-vous à la section « Utilisation des filtres
dynamiques » à la page 129.
3 Réglez le curseur Quantité pour définir la quantité du bruit.
Les valeurs vont de 1 à 400. Plus la quantité est élevée, plus le positionnement des pixels est aléatoire dans l’image.
4 Sélectionnez l’option Couleur afin d’appliquer le bruit coloré. Désactivez-la pour appliquer uniquement un bruit
monochrome.
5 Cliquez sur OK.
Dernière mise à jour le 29/4/2010
Chapitre 6 : Utilisation des objets
vectoriels
Un objet vectoriel est un graphique numérique dont la forme est définie par un tracé. La forme d’un tracé vectoriel est
définie par une série de points. La couleur de contour d’un objet vectoriel épouse le tracé et son fond occupe l’espace
situé à l’intérieur du tracé. Le contour et le fond déterminent l’aspect du graphique lorsque ce dernier est publié sous
une forme imprimée ou sur le Web.
Les objets vectoriels peuvent prendre des formes élémentaires, des formes automatiques (groupes d’objets vectoriels
dont les attributs sont modifiables au moyen de contrôles spécifiques) ou des formes libres (dessinées à main levée).
Vous pouvez utiliser un grand nombre d’outils et de techniques pour dessiner et retoucher des objets vectoriels.
Formes simples
Les lignes, les rectangles, les ellipses, les rectangles arrondis, les polygones et les étoiles sont des formes simples.
Remarque : Pour éviter les pixels parasites et améliorer la netteté des objets vectoriels, cliquez sur Commandes > Sélection
> Utiliser le rendu vectoriel existant.
Dessin et retouche de formes simples
Les outils Rectangle et Rectangle arrondi permettent de dessiner des rectangles sous forme d’objets groupés. Pour
déplacer séparément un point d’angle de rectangle, dissociez le rectangle ou utilisez l’outil Sous-sélection .
Pour plus d’informations sur le redimensionnement et la mise à l’échelle des objets, reportez-vous à la section
« Transformation et déformation des objets et des sélections » à la page 47.
Dessin d’une ligne, d’un rectangle ou d’une ellipse
1 Dans le panneau Outils, sélectionnez l’outil Ligne, Rectangle ou Ellipse.
2 (Facultatif) Sélectionnez les attributs de contour et de fond dans l’inspecteur des propriétés.
3 Faites glisser le pointeur sur la zone de travail pour dessiner la forme.
• Maintenez la touche Maj enfoncée lorsque vous faites glisser le pointeur de l’outil Ligne pour tracer des lignes
par incréments de 45 degrés.
• Maintenez la touche Maj enfoncée lorsque vous faites glisser le pointeur de l’outil Rectangle ou Ellipse pour
tracer des carrés ou des cercles.
Dessin d’une forme à partir du point central
❖ Placez le pointeur sur le point central voulu, puis, tout en maintenant la touche Alt (Windows) ou Option
(Mac OS) enfoncée, faites glisser l’outil de dessin. Pour conserver les proportions, maintenez également la
touche Maj enfoncée.
Ajout de pointes de flèches sur une ligne
1 Tracez ou sélectionnez une ligne.
74
UTILISATION DE FIREWORKS CS5 75
Dernière mise à jour le 29/4/2010
Utilisation des objets vectoriels
2 Choisissez la commande Commandes > Création > Ajouter indicateur sous-menu.
3 Définissez les éléments suivants :
• Sélectionnez Ajouter au début ou Ajouter à la fin si nécessaire, puis définissez le style de la pointe de flèche.
• Sélectionnez Appliquer un contour et Fond uni, si nécessaire.
Repositionnement d’une forme élémentaire à mesure que vous la dessinez
❖ Tout en maintenant le bouton de la souris et la barre d’espace enfoncés (rectangles et ellipses uniquement), faites
glisser l’objet vers un autre emplacement de l’espace de travail. Relâchez la barre d’espace pour continuer à dessiner
l’objet.
Redimensionnement d’une ligne, d’un rectangle ou d’une ellipse après leur sélection
La mise à l’échelle d’un objet vectoriel ne change pas l’épaisseur du trait. Le redimensionnement des objets respecte
leurs proportions.
❖ Procédez de l’une des manières suivantes :
• Entrez les nouvelles valeurs de largeur (L) ou de hauteur (H) dans l’inspecteur des propriétés ou le panneau Info.
• Dans la section Sélection du panneau Outils, sélectionnez l’outil Mise à l’échelle, puis faites glisser une poignée
de transformation d’angle.
• Choisissez Modification > Transformer > Mise à l’échelle et faites glisser une poignée de transformation d’angle,
ou choisissez Modification > Transformer > Transformation numérique et entrez les nouvelles dimensions.
• Faites glisser le point d’angle sur un rectangle.
Optimisation de la netteté des lignes
Il arrive que les lignes tracées dans Fireworks ne soient pas aussi nettes que souhaité. Ce flou vient du fait que les nœuds
du tracé sont espacés d’un demi-pixel lors de l’utilisation de la souris. Pour optimiser la netteté des objets, faites appel
à la commande Accrocher au pixel.
Cette commande intervient sur les lignes droites lorsque la différence entre les coordonnées x ou y des deux nœuds est
inférieure ou égale à 0,5 px. Si les nœuds Fireworks sont distants d’un demi-pixel, les coordonnées x ou y des deux
nœuds doivent se trouver dans les limites d’un même pixel.
Un déplacement de 0,5 px entraîne parfois un écart d’un pixel dans les coordonnées x et y dans l’inspecteur des
propriétés, car celui-ci remplace les valeurs fractionnaires par l’entier le plus proche.
Remarque : Pour éviter les pixels parasites et améliorer la netteté des objets vectoriels, cliquez sur Commandes > Sélection
> Utiliser le rendu vectoriel existant.
Numéro
Scénario
Problème
Solution
1
Un rectangle primitif est mis à l’échelle,
l’option « Mise à l’échelle des contours et
des effets » étant désélectionnée dans la
boîte de dialogue Préférences.
Le rectangle n’est pas accroché au
pixel le plus proche et ses bords sont
flous.
Sélectionnez l’objet, cliquez dessus avec
le bouton droit de la souris et choisissez
Accrocher au pixel.*
2
Une ligne d’une épaisseur uniforme est
tracée à l’aide de l’outil Ligne.
Elle est floue.
Sélectionnez l’objet, cliquez dessus avec
le bouton droit de la souris et choisissez
Accrocher au pixel.*
3
Un tracé vectoriel droit est créé à l’aide de Le tracé est flou.
l’outil Plume.
Sélectionnez l’objet, cliquez dessus avec
le bouton droit de la souris et choisissez
Accrocher au pixel.*
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 76
Utilisation des objets vectoriels
*La fonctionnalité Accrocher au pixel est également disponible dans le menu Modifier ou au moyen des touches de
raccourci Ctrl+K (Windows) ou Cmd+K (Mac OS).
Remarque : Il est impossible d’annuler la commande Accrocher au pixel.
Scénario 1
Scénario 2
Scénario 3
JSAPI : fw.getDocumentDOM().snapToPixel() : la fonction Accrocher au pixel est appliquée à l’objet sélectionné
sur la zone de travail.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 77
Utilisation des objets vectoriels
Dessin de rectangles arrondis élémentaires
Indiquez la valeur de l’arrondi des angles en pourcentages ou en pixels. Lorsque vous optez pour une valeur en pixels,
la valeur maximum correspond à la moitié de la longueur du côté de rectangle le plus petit ; les valeurs supérieures
n’auront aucun effet.
Pour plus d’informations sur la préservation de l’arrondi des angles d’un rectangle lors de sa mise à l’échelle, voir
l’article de Sarthak.
1 Dans la section Vecteur du panneau Outils, sélectionnez l’outil Rectangle.
2 Faites glisser le pointeur sur la zone de travail pour dessiner le rectangle.
3 Dans l’inspecteur des propriétés, choisissez pourcentage ou pixels dans le menu contextuel situé à droite de la
case Arrondi. A l’aide du curseur, définissez un pourcentage, ou entrez une valeur comprise entre 0 et 100 dans la
zone. Si vous avez choisi pixels, vous pouvez saisir jusqu’à la moitié de la longueur du côté le plus court du rectangle.
Appuyez sur les touches fléchées Haut et Droite tout en faisant glisser les angles du rectangle pour les arrondir.
Utilisez les touches fléchées Bas et Gauche pour réduire l’arrondi des angles.
Dessin d’un polygone élémentaire
L’outil Polygone permet de dessiner des polygones équilatéraux (y compris des triangles) à partir d’un point central.
1 Sélectionnez Fenêtre > Propriétés de forme automatique.
2 Cliquez sur l'outil Polygone.
3 Procédez de l’une des manières suivantes :
• Faites glisser les points de contrôle jaunes pour obtenir le nombre de côtés voulus.
• Dans la boîte de dialogue Propriétés de forme automatique, spécifiez les points et les côtés requis.
Dessin d’une étoile
1 Cliquez sur le panneau Outils et appuyez sur U.
2 Cliquez sur la flèche vers le bas et sélectionnez l'icône Etoile dans le menu.
3 Procédez de l’une des manières suivantes :
• Sélectionnez Fenêtre > Propriétés de forme automatique. Personnalisez l'étoile au moyen des différentes options
de la boîte de dialogue Propriétés de forme automatique.
• Faites glisser les points jaunes de l'étoile. Déplacez la souris sur le point jaune. Une info-bulle décrit la fonction.
Pour contraindre l’orientation d’une étoile par incréments de 45 degrés, maintenez la touche Maj enfoncée pendant
que vous faites glisser le pointeur.
Modification/enregistrement de rectangles primitifs
Les options de modification et d’enregistrement d’un rectangle primitif ne sont accessibles dans l’inspecteur des
propriétés qu’une fois le rectangle dissocié.
Il est impossible de modifier l’arrondi d’un rectangle dans l’inspecteur des propriétés une fois qu’il est dissocié. Vous
pouvez cependant effectuer cette opération à l’aide de l’outil Vecteur.
Options de contour dans l’inspecteur des propriétés avant la dissociation du rectangle
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 78
Utilisation des objets vectoriels
Options de contour dans l’inspecteur des propriétés après la dissociation du rectangle
formes automatiques
Les formes automatiques, contrairement aux autres groupes d’objets, comportent des points de contrôle en forme de
losange en plus des poignées de groupes d’objets. Lorsque vous faites glisser un point de contrôle, vous modifiez
uniquement la propriété visuelle associée. Les points de contrôle s’accompagnent, pour la plupart, d’info-bulles qui
décrivent leur impact sur la forme automatique.
Les outils Formes automatiques créent des formes avec des orientations prédéfinies. Par exemple, l’outil Flèche dessine
des flèches horizontales. De même, avec la forme automatique Etoile, cliquez sur le point de contrôle gauche et faitesle glisser vers le haut ou le bas pour modifier le nombre de points. Les autres points de contrôle permettent de modifier
la « netteté » et la « profondeur » des rayons.
Pour plus de détails sur la modification de l’orientation, reportez-vous à la section « Transformation et déformation
des objets et des sélections » à la page 47.
Outils de formes automatiques
Flèche Flèches simples de toutes proportions, avec des lignes droites ou courbes.
Corps de flèche Minces lignes droites permettant d’accéder rapidement aux pointes de flèche les plus courantes (il
suffit de cliquer sur une extrémité de la ligne).
Rectangle biseauté Rectangles avec angles biseautés.
Rectangle chanfreiné Rectangles avec chanfreins (angles arrondis à l’intérieur du rectangle).
Connecteur Lignes connectrices à trois segments, telles que celles utilisées pour relier les éléments d’un
organigramme.
Anneau Anneaux remplis.
Forme en L Formes à angles droits.
Outil Mesure Simples lignes de flèche indiquant les dimensions des éléments de conception principaux en pixels ou
en pouces.
Graphique à secteurs Diagrammes circulaires.
Rectangle arrondi Rectangles aux angles arrondis.
Polygone intelligent Polygones équilatéraux comportant de 3 à 25 côtés.
Spirale Spirales ouvertes.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 79
Utilisation des objets vectoriels
Etoile Etoiles comportant un nombre de points compris entre 3 et 25.
Dessin d’une forme automatique
1 Dans la section Vecteur du panneau Outils, sélectionnez un outil Forme automatique dans le menu contextuel.
2 Procédez de l’une des manières suivantes :
• Faites glisser le pointeur sur la zone de travail pour dessiner la forme.
• Cliquez sur la zone de travail pour y placer la forme à sa taille par défaut.
Ajout d’une ombre à une forme automatique
L’option Ajouter une ombre ajoute une ombre sous l’objet sélectionné en fonction des dimensions de cet objet.
L’ombre est en réalité une forme automatique dotée de points de contrôle que vous pouvez manipuler pour modifier
son aspect. Par exemple, vous pouvez maintenir la touche Maj enfoncée en faisant glisser le point de contrôle
directionnel afin de forcer son mouvement à un angle de 45 degrés. Un clic sur le point de contrôle directionnel
restitue à l’ombre sa forme d’origine. La commande Ajouter une ombre fait automatiquement reculer la nouvelle
forme d’ombre d’un niveau. L’ombre se superpose à l’objet sélectionné, sauf si vous appliquez cette commande à un
seul objet situé dans la partie supérieure du calque actif.
1 Sélectionnez un objet dans la zone de travail.
2 Choisissez Commandes > Création > Ajouter une ombre.
3 (Facultatif) Pour modifier l’ombre, procédez de l’une des manières suivantes :
• Faites glisser le point de contrôle directionnel de façon à effectuer un mouvement correspondant à un angle de
45 degrés.
• Cliquez sur le point de contrôle directionnel pour redéfinir l’ombre (sa taille est identique à la forme d’origine).
• Tout en maintenant les touches Ctrl + Cmde enfoncées, cliquez sur le point de contrôle directionnel pour
redéfinir uniquement l’axe des x.
• Cliquez deux fois sur le point de contrôle de perspective pour redéfinir uniquement la largeur de l’ombre.
Modification précise des propriétés des formes automatiques
Pour exercer un contrôle numérique précis sur une forme automatique sélectionnée ou pour insérer une autre forme
automatique dans votre document, utilisez le panneau Propriétés de forme automatique.
Remarque : ce panneau ne prend en charge que les formes automatiques figurant dans le panneau Outils. Il ne prend en
charge ni les formes automatiques tierces ni celles du panneau Formes (Fenêtre > Formes automatiques).
Selon le type de forme automatique utilisé, les propriétés modifiables peuvent varier.
1 Insérez une forme automatique dans votre document.
2 Choisissez Fenêtre > Propriétés de forme automatique.
3 Définissez les propriétés.
Vous pouvez verrouiller les angles des formes rectangulaires de façon à ce que les modifications apportées à un
angle se répercutent sur les quatre. Vous pouvez également modifier les propriétés pour chaque angle
individuellement.
4 Pour appliquer les changements, appuyez sur la touche de tabulation ou Entrée.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 80
Utilisation des objets vectoriels
Pour effectuer d’autres réglages de formes automatiques dans la zone de travail, utilisez les points de contrôle. Les
valeurs correspondantes sont mises à jour de façon dynamique dans le panneau Propriétés de forme automatique.
Modification des propriétés de forme automatique à l’aide des points de
contrôle
Sélectionnez une forme automatique, puis utilisez les points de contrôle jaunes pour définir les propriétés de forme
automatique.
Le nom d’un point de contrôle évoque sa fonction. Pour afficher un nom, faites glisser la souris sur un point de contrôle
jusqu’à ce qu’une info-bulle apparaisse.
Réglage des formes automatiques en forme de flèches
• Pour régler la netteté de la pointe de la flèche, faites glisser les points de contrôle de pointe de la flèche et de taille
de la flèche.
• Pour régler la largeur, la hauteur, l’épaisseur et l’arrondi de la queue de la flèche, faites glisser le point de contrôle
portant le nom correspondant.
Pour créer une flèche incurvée, faites glisser le point de contrôle de largeur ou de hauteur vers la droite ou vers la
gauche.
Réglage des formes automatiques en forme de lignes fléchées
• Pour passer en revue les options de pointes de flèche, cliquez sur un point de contrôle à l’une des extrémités de la
ligne.
• Pour allonger ou raccourcir la ligne, faites glisser un point de contrôle.
Réglage des formes automatiques représentant des rectangles biseautés, chanfreinés et
arrondis
• Pour régler simultanément tous les angles d’un rectangle, faites glisser un point de contrôle d’angle.
• Pour régler un seul angle du rectangle, glisser un point de contrôle d’angle tout en maintenant la touche Alt
(Windows) ou Option (Mac OS) enfoncée.
• Pour redimensionner un rectangle en conservant les angles intacts, faites glisser le point de contrôle de glissementredimensionnement.
• Pour convertir tous les angles d’un rectangle dans un type différent, cliquez sur un point de contrôle d’angle.
• Pour convertir un seul angle de rectangle dans un autre type, cliquez sur un point de contrôle d’angle tout en
maintenant la touche Alt (Windows) ou Option (Mac OS) enfoncée.
Réglage des formes automatiques représentant des connecteurs
• Pour déplacer le point de début ou le point de fin, faites glisser le point de contrôle au début ou à la fin de la ligne
connecteur.
• Pour repositionner la barre transversale, faites glisser le point de contrôle de position horizontale.
• Pour régler tous les angles, faites glisser un point de contrôle d’angle.
• Pour régler un seul angle, faites glisser un point de contrôle d’angle tout en maintenant la touche Alt (Windows)
ou Option (Mac OS) enfoncée.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 81
Utilisation des objets vectoriels
Réglage des formes automatiques en forme d’anneaux
Les formes automatiques représentant des anneaux disposent initialement de trois points de contrôle. Pour chaque
nouvelle section, Fireworks ajoute un point de contrôle permettant de la redimensionner ou de la diviser.
• Pour ajouter une section, faites glisser un point de contrôle d’ajout/de division de secteur sur le périmètre extérieur
de la forme tout en maintenant la touche Alt (Windows) ou Option (Mac OS) enfoncée.
• Pour supprimer une section, faites glisser le point de contrôle d’ajout/division de secteur sur le périmètre extérieur
de la forme pour définir la portion de la forme qui doit rester dans la zone de travail.
• Pour redimensionner le rayon intérieur, faites glisser son point de contrôle.
• Pour affecter la valeur zéro au rayon intérieur, cliquez sur son point de contrôle de réinitialisation.
Réglage des formes automatiques représentant des formes en L
• Pour modifier la hauteur ou la largeur d’une section, faites glisser le point de contrôle de hauteur ou de largeur.
• Pour régler l’arrondi des angles, faites glisser le point de contrôle de rayon d’angle.
Réglage des formes automatiques de l’outil Mesure
• Pour modifier la longueur ou l’angle de la section mesurée, faites glisser le point de contrôle à l’une des extrémités
de la ligne.
• Pour modifier les unités et passer des pixels aux pouces, maintenez la touche Ctrl (Windows) ou Cmde (Mac OS)
enfoncée tout en faisant glisser un point de contrôle à l’une des extrémités.
• Pour allonger ou raccourcir les lignes de délimitation de la section mesurée, faites glisser un point de contrôle sur
l’un des côtés de la valeur mesurée.
L’outil Mesure est utile lorsque vous définissez des spécifications d’interface. Pour masquer les mesures, cliquez sur
l’icône représentant un œil située dans le panneau Calques.
Réglage des formes automatiques en forme de graphiques à secteurs
Les formes automatiques représentant des graphiques à secteurs disposent initialement de trois points de contrôle.
Pour chaque nouvelle section, Fireworks ajoute un point de contrôle permettant de la redimensionner ou de la diviser.
• Pour ajouter un secteur, faites glisser un point de contrôle de glissement vers un segment sur le périmètre extérieur
de la forme tout en maintenant la touche Alt (Windows) ou Option (Mac OS) enfoncée.
• Pour redimensionner une tranche (secteur) de graphique à secteurs, faites glisser un point de contrôle de glissement
vers un segment sur le périmètre extérieur de la forme.
• Pour réinitialiser un graphique à secteurs à une tranche, cliquez sur son point de contrôle de réinitialisation.
Réglage des formes automatiques représentant des polygones intelligents
• Pour redimensionner ou faire pivoter le polygone, faites glisser le point de contrôle de mise à l’échelle/rotation.
Pour effectuer une rotation uniquement, faites glisser le point de contrôle de mise à l’échelle/rotation tout en
maintenant la touche Alt (Windows) ou Option (Mac OS).
• Pour ajouter ou supprimer des sections, faites glisser le point de contrôle de sections.
• Pour modifier le nombre de côtés, faites glisser le point de contrôle de côtés.
• Pour segmenter le polygone, faites glisser le point de contrôle des côtés tout en maintenant la touche Alt (Windows)
ou Option (Mac OS).
• Pour redimensionner un polygone intérieur, faites glisser son point de contrôle.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 82
Utilisation des objets vectoriels
• Pour réinitialiser un polygone intérieur, faites glisser son point de contrôle de réinitialisation.
Réglage des formes automatiques en forme de spirales
• Pour modifier le nombre de spires, faites glisser le point de contrôle de spirales.
• Pour ouvrir ou fermer la spirale, cliquez sur le point de contrôle d’ouverture/fermeture de spirale.
Réglage des formes automatiques étoilées
• Pour modifier le nombre de côtés, faites glisser le point de contrôle de pointes.
• Pour régler la base des branches, faites glisser le point de contrôle correspondant.
• Pour régler les pointes, faites glisser le point de contrôle de sommet.
• Pour régler l’arrondi des sommets et des bases, faites glisser le point de contrôle d’arrondi.
Utilisation de formes automatiques supplémentaires
Le panneau Formes automatiques contient d’autres formes automatiques plus complexes que celles du
panneau Outils. Pour insérer ces formes automatiques dans votre dessin, faites-les glisser du panneau Formes
automatiques vers la zone de travail.
1 Choisissez Fenêtre > Formes automatiques pour afficher le panneau Formes automatiques.
2 Faites glisser un aperçu de forme automatique du panneau Formes automatiques vers la zone de travail.
3 (Facultatif) Modifiez la forme automatique en faisant glisser l’un de ses points de contrôle.
Ajout de nouvelles formes automatiques dans Fireworks
Vous pouvez ajouter de nouvelles formes automatiques provenant du site Web d’Adobe® Fireworks® Exchange. Les
nouvelles formes automatiques apparaissent soit dans le panneau Formes automatiques, soit dans le menu Outils.
Vous pouvez également programmer de nouvelles formes automatiques dans Fireworks en code JavaScript. Pour plus
d’informations, reportez-vous à la section Extension de Fireworks.
1 Choisissez Fenêtre > Formes automatiques pour afficher le panneau Formes automatiques.
2 Dans le menu Options, sélectionnez Acquérir plus de formes automatiques.
3 Sur le site Web Fireworks Exchange, suivez les instructions d’ajout de formes qui s’affichent à l’écran.
Formes libres
Vous pouvez dessiner et retoucher des tracés vectoriels pour créer pratiquement toutes les formes d’objets vectoriels
souhaitées.
Dessin de tracés de forme libre à l’aide de l’outil Tracé vectoriel
Vous pouvez utiliser l’outil Tracé vectoriel, qui figure dans le menu contextuel Plume, pratiquement de la même
manière qu’un marqueur ou un crayon.
Cet outil s’accompagne d’une grande variété de catégories de traits, notamment l’aérographe, la calligraphie, le fusain,
la craie grasse et les artifices. Ces catégories disposent elles-mêmes de plusieurs types de contours, tels que le marqueur
clair, le marqueur foncé, les éclaboussures, le bambou, le ruban, les confettis, le 3D, le dentifrice et l’alien visqueux.
UTILISATION DE FIREWORKS CS5 83
Dernière mise à jour le 29/4/2010
Utilisation des objets vectoriels
Même si les contours ressemblent à de la peinture ou à de l’encre, ils sont constitués de points et de tracés comme tous
les objets vectoriels. Par conséquent, vous pouvez changer la forme des contours selon différentes techniques de
retouche vectorielle. Lorsque vous remodelez un tracé, le contour est redessiné. Vous pouvez également modifier les
traits de pinceau existants et appliquer des fonds aux objets sélectionnés qui ont été dessinés avec l’outil
Tracé vectoriel.
Voir « Application de couleurs, de contours et de fonds » à la page 111.
1 Dans le menu contextuel de l’outil Plume, sélectionnez l’outil Tracé vectoriel
.
2 (Facultatif) Sélectionnez les attributs de contour et les options de l’outil Tracé vectoriel dans l’inspecteur des
propriétés. (Facultatif) Pour obtenir un lissage plus précis du tracé, sélectionnez un nombre dans le menu
contextuel Précision de l’inspecteur des propriétés, que vous appliquerez à l’outil Tracé vectoriel. Plus le nombre
sélectionné est élevé, plus le nombre de points visibles sur le tracé que vous dessinez est élevé.
3 Faites glisser le pointeur pour dessiner. Pour contraindre le tracé à une ligne horizontale ou verticale, faites glisser
le pointeur tout en maintenant la touche Maj enfoncée.
4 Relâchez le bouton de la souris à la fin du tracé. Pour fermer le tracé, relâchez le bouton de la souris après avoir
placé le pointeur sur le premier point du tracé.
Dessin de tracés de forme libre au moyen de points placés avec l’outil Plume
Le traçage de points est une technique semblable à celle utilisée pour dessiner une image de points reliés. Lorsque vous
cliquez sur chaque point avec l’outil Plume, Fireworks dessine automatiquement le tracé de l’objet vectoriel à partir du
dernier point sur lequel vous avez cliqué.
L’outil Plume permet non seulement de relier des points par des segments de droite, mais également de dessiner des
segments incurvés lisses dérivés d’une fonction mathématique appelés des courbes de Bézier. Le type de point, point
d’angle ou point de courbe, détermine si la forme adjacente est une droite ou une courbe.
Vous pouvez modifier les segments droits et incurvés en faisant glisser leurs points. Vous pouvez les retoucher
davantage en faisant glisser leurs poignées de point. Vous pouvez également convertir un segment droit en segment
incurvé, et inversement, en convertissant ses points.
Dessin d’un tracé avec des segments de droite
1 Dans le panneau Outils, cliquez sur l’outil Plume.
2 (Facultatif) Choisissez la commande Edition > Préférences (Windows) ou Fireworks > Préférences (Mac OS X) et
sélectionnez l’une des options dans l’onglet Edition, puis cliquez sur le bouton OK :
Afficher l’aperçu de l’outil Plume Permet d’obtenir un aperçu du segment de droite tel qu’il doit apparaître lors du
clic suivant.
Points pleins Permet d’afficher des points unis à mesure que vous dessinez.
3 Cliquez sur la zone de travail pour placer le premier point d’angle.
4 Déplacez le pointeur et cliquez pour placer le point suivant.
5 Continuez à tracer des points. Les segments de droite relient les points.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 84
Utilisation des objets vectoriels
6 Procédez de l’une des manières suivantes :
• Cliquez deux fois sur le dernier point pour terminer le tracé dans le cas d’un tracé ouvert.
• Sélectionnez un autre outil pour laisser ce tracé ouvert.
Remarque : si vous sélectionnez un outil différent (autre que l’outil Texte) puis revenez à l’outil Plume, Fireworks
reprend le dessin de l’objet à votre prochain clic.
• Pour fermer le tracé, cliquez sur le premier point que vous avez tracé. Les points de départ et de fin d’un tracé
fermé sont les mêmes.
Remarque : les boucles formées par un tracé qui se chevauche ne constituent pas des tracés fermés. Seuls les tracés
qui commencent et se terminent par le même point sont des tracés fermés.
Dessin d’un tracé avec des segments incurvés
1 Dans le panneau Outils, sélectionnez l’outil Plume.
2 Cliquez pour placer le premier point d’angle.
3 Déplacez le pointeur vers l’emplacement du point suivant, puis faites glisser le pointeur pour obtenir un point de
courbe. Lorsque vous faites glisser le pointeur, Fireworks étend le segment de droite jusqu’au nouveau point.
4 Continuez à tracer des points. Lorsque vous faites glisser un nouveau point, vous créez un point de courbe. Si vous
cliquez simplement, vous créez un point d’angle.
Vous pouvez utiliser temporairement l’outil Sous-sélection pour changer l’emplacement des points et la forme des
courbes que vous tracez. Faites glisser un point ou une poignée de point avec l’outil Plume tout en maintenant la
touche Ctrl (Windows) ou Commande (Mac OS) enfoncée.
5 Procédez de l’une des manières suivantes :
• Pour terminer le tracé en tant que tracé ouvert, cliquez deux fois sur le dernier point ou sélectionnez un autre
outil. Si vous sélectionnez certains outils puis revenez à l’outil Plume, Fireworks reprend le dessin de l’objet à
votre prochain clic.
• Pour fermer le tracé, cliquez sur le premier point que vous avez tracé. Les points de départ et de fin d’un tracé
fermé sont les mêmes.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 85
Utilisation des objets vectoriels
Conversion de segments de tracé en points droits ou incurvés
Des points d’angle figurent à l’intersection des segments droits. Les segments incurvés comportent des points
de courbe.
Vous pouvez convertir un segment droits en segment incurvé, et inversement, en convertissant ses points.
Conversion d’un point d’angle en point de courbe
1 Dans le panneau Outils, cliquez sur l’outil Plume.
2 Cliquez sur un point d’angle du tracé sélectionné, puis faites-le glisser à l’écart de sa position initiale.
Les poignées s’étendent, courbant ainsi les segments adjacents.
Remarque : pour modifier les poignées du point, choisissez l’outil Sous-sélection ou appuyez sur la touche Ctrl
(Windows) ou Cmde (Mac OS) lorsque l’outil Plume est actif.
Conversion d’un point de courbe en point d’angle
1 Dans le panneau Outils, cliquez sur l’outil Plume.
2 Cliquez sur un point de courbe du tracé sélectionné.
Les poignées se rétractent, et les segments adjacents se redressent.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 86
Utilisation des objets vectoriels
Retouche de tracés de forme libre à l’aide des points et des poignées de points
L’outil Sous-sélection du panneau Outils permet de sélectionner plusieurs points. Avant de sélectionner un point
avec l’outil Sous-sélection, sélectionnez le tracé en utilisant l’outil Pointeur ou Sous-sélection, ou bien en cliquant sur
sa vignette dans le panneau Calques.
Sélection de points spécifiques sur un tracé sélectionné
❖ A l’aide de l’outil Sous-sélection, procédez de l’une des manières suivantes :
• Cliquez sur un point ou cliquez successivement sur plusieurs points tout en maintenant la touche Maj enfoncée.
• Tracez une zone autour des points à sélectionner.
Insertion d’un point sur un tracé sélectionné
Ajoutez des points à un tracé pour contrôler l’un des segments du tracé.
❖ Avec l’outil Plume, cliquez sur l’une des parties du tracé qui ne comporte pas encore de point.
Suppression d’un point sur un tracé sélectionné
Supprimez des points pour remodeler le tracé ou simplifier sa modification.
❖ Procédez de l’une des manières suivantes :
• Cliquez avec le pointeur de l’outil Plume sur l’un des points d’angle d’un objet sélectionné.
• Cliquez deux fois avec le pointeur de 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.
Déplacement d’un point
❖ Faites-le glisser avec l’outil Sous-sélection.
Modification d’un segment de droite
1 Sélectionnez le tracé à l’aide de l’outil Pointeur ou Sous-sélection.
2 Cliquez sur un point avec l’outil Sous-sélection.
Les points d’angle sélectionnés prennent la forme de carrés pleins bleus.
3 Faites glisser le point ou utilisez l’une des touches fléchées pour déplacer le point vers un autre emplacement.
Modification de la forme d’un segment de tracé de courbe
1 Sélectionnez le tracé à l’aide de l’outil Pointeur ou Sous-sélection.
2 Cliquez sur un point de courbe avec l’outil Sous-sélection.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 87
Utilisation des objets vectoriels
Les points de courbe sélectionnés prennent la forme de carrés pleins bleus. Les poignées du point s’étendent depuis
le point.
3 Faites glisser les poignées vers un nouvel emplacement. Maintenez la touche Maj enfoncée pendant que vous faites
glisser une poignée pour imposer à son déplacement un angle de 45 degrés.
L’aperçu du tracé en bleu indique l’emplacement du nouveau tracé si vous relâchez le bouton de la souris.
A
B
C
D
E
A. Poignée de point B. Point sélectionné C. Pointeur de sous-sélection D. Aperçu du tracé E. Tracé
Par exemple, si vous faites glisser la poignée de point gauche vers le bas, la poignée de point droite monte. Tout en
maintenant la touche Alt enfoncée, faites glisser la poignée pour la déplacer séparément.
Réglage de la poignée d’un point d’angle
1 A l’aide de l’outil Sous-sélection, sélectionnez un point d’angle.
2 Tout en maintenant la touche Alt (Windows) ou Option (Mac OS) enfoncée, faites glisser le point pour afficher sa
poignée et incurver le segment adjacent.
Pour modifier un segment de tracé adjacent, faites glisser la poignée d’un point d’angle à l’aide de l’outil Sous-sélection.
Extension et fusion de tracés de forme libre
Pour poursuivre le dessin d’un tracé ouvert existant et fusionner les tracés, utilisez l’outil Plume.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 88
Utilisation des objets vectoriels
Reprise du dessin d’un tracé ouvert existant
1 Dans le panneau Outils, cliquez sur l’outil Plume.
2 Cliquez sur le point de fin (extrémité), puis reprenez le tracé.
Fusion de deux tracés ouverts
Lorsque vous reliez deux tracés, les attributs de contour, de fond et de filtre du tracé supérieur deviennent les attributs
du tracé nouvellement fusionné.
1 Dans le panneau Outils, sélectionnez l’outil Plume.
2 Cliquez sur le point de fin (extrémité) de l’un des tracés.
3 Placez le pointeur sur le point de fin (extrémité) de l’autre tracé, puis cliquez.
Jonction automatique de tracés ouverts similaires
Vous pouvez relier deux tracés ouverts qui partagent des attributs de contour et de fond similaires.
1 Sélectionnez un tracé ouvert.
2 Choisissez l’outil Sous-sélection, puis faites glisser l’un des points de fin du tracé à quelques pixels du point de fin
d’un tracé similaire.
Formes composées
Création de formes composées
Créez une forme composée à l’aide de tracés vectoriels simples, tels que des rectangles, ellipses ou autres. L’outil Soussélection permet de déplacer et de modifier les objets individuels d’une forme composée, même après qu’ils ont été
associés. Avec le mode Forme composée, tous les nouveaux objets de vecteur sont ajoutés au même objet dans le
panneau des calques. Pour ajouter des objets à un autre objet, quittez ce mode au moyen du bouton Normal.
Pour créer des formes composées, procédez de l’une des manières suivantes :
• Créez un vecteur, sélectionnez l’opération de forme composée requise (Ajouter ou Soustraire, par exemple) et
dessinez d’autres vecteurs.
• Créez plusieurs vecteurs et utilisez l’opération de forme composée.
Application d’une forme composée après création de plusieurs objets vectoriels
1 Sélectionnez tous les objets à inclure dans la forme composée. Tous les tracés ouverts sélectionnés sont
automatiquement fermés.
2 Sélectionnez un outil Vecteur (rectangle, ellipse, plume ou tracé vectoriel) dans la palette d’outils.
3 Sélectionnez l’une des options suivantes dans l’inspecteur des propriétés.
• Ajouter / Union
• Soustraire / Poinçon
• Intersection
• Recadrer
Pour l’opération Poinçon, le dernier objet ajouté est poinçonné lors de l’union des autres objets. C’est le cas également
pour l’opération Poinçon exécutée par le biais de Modification > Combiner les tracés.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 89
Utilisation des objets vectoriels
Application d’une forme composée avant création de plusieurs objets vectoriels
1 Créez un objet vectoriel.
2 Sélectionnez l’une des options suivantes dans l’inspecteur des propriétés.
• Ajouter / Union
• Soustraire / Poinçon
• Intersection
• Recadrer
3 Dessinez d’autres objets par-dessus le premier pour obtenir l’effet souhaité.
Conversion d’une forme composée en tracé composite
Une fois une forme composée convertie en tracé composite, il est impossible de déplacer ou de modifier les objets
individuels la composant.
❖ Pour convertir une forme composée en tracé composite, cliquez sur le bouton Associer.
Techniques spécifiques de retouche vectorielle
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. Vous pouvez également utiliser les fonctions de tracé pour créer des formes
en combinant ou en modifiant les tracés existants. Par ailleurs, le panneau Tracé vous permet d’accéder rapidement
aux commandes propres aux tracés.
Retouche de tracés avec les outils vectoriels
Les outils vectoriels figurent dans le panneau Outils.
Courbure et remodelage d’objets vectoriels à l’aide de l’outil Forme libre
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 tracé, quel que soit l’emplacement des points. Fireworks ajoute,
déplace ou supprime des points le long du tracé à mesure que vous changez la forme de l’objet vectoriel.
A
Segment de tracé tiré avec l’outil Forme libre (A mesurant la longueur spécifiée)
Segment de tracé poussé avec l’outil Forme libre
UTILISATION DE FIREWORKS CS5 90
Dernière mise à jour le 29/4/2010
Utilisation des objets vectoriels
Lorsque vous déplacez le pointeur sur un tracé sélectionné, il se transforme en pointeur de poussée ou de traction, en
fonction de sa position par rapport au tracé sélectionné. Vous pouvez également changer la taille du pointeur de
poussée ou de traction.
Pointeur
Signification
L’outil Forme libre est en cours d’utilisation.
L’outil Forme libre est en cours d’utilisation, et le pointeur de traction est en position pour tirer sur le tracé sélectionné.
L’outil Forme libre est en cours d’utilisation, et le pointeur de traction tire sur le tracé sélectionné.
L’outil Forme libre est en cours d’utilisation, et le pointeur de poussée est actif.
L’outil Reformer la zone est en cours d’utilisation, et le pointeur correspondant est actif. La zone comprise entre le cercle
intérieur et le cercle extérieur reforme le tracé selon une intensité inférieure à l’intensité maximale.
Remarque : l’outil Forme libre reporte également la pression exercée sur une tablette Wacom ou compatible.
Tirage d’un tracé sélectionné
Lorsque le pointeur se trouve juste au-dessus du tracé, vous pouvez tirer sur celui-ci.
1 Dans le panneau Outils, cliquez sur l’outil Forme libre
.
2 Positionnez le pointeur directement sur le tracé sélectionné.
3 Dessinez le tracé.
Poussée d’un tracé sélectionné
Lorsque le pointeur ne se trouve pas juste au-dessus du tracé, vous pouvez pousser celui-ci.
1 Dans le panneau Outils, sélectionnez l’outil Forme libre.
2 Positionnez le pointeur légèrement à l’écart du tracé.
3 Faites glisser le pointeur vers le tracé pour exercer une poussée. Déplacez légèrement le tracé sélectionné pour lui
donner une nouvelle forme.
Modification de la taille du pointeur de poussée
❖ Procédez de l’une des manières suivantes :
• Tout en maintenant le bouton de la souris enfoncé, appuyez sur la touche fléchée Droite ou sur la touche
numérique 2 pour élargir le pointeur.
• Tout en maintenant le bouton de la souris enfoncé, appuyez sur la touche fléchée Gauche ou sur la touche
numérique 1 pour rendre le pointeur plus étroit.
• Pour définir la taille du pointeur (en pixels) et la longueur du segment de tracé affecté par ce dernier,
désélectionnez tous les objets du document, puis entrez une valeur comprise entre 1 et 500 dans la zone de
texte Taille de l’inspecteur des propriétés.
UTILISATION DE FIREWORKS CS5 91
Dernière mise à jour le 29/4/2010
Utilisation des objets vectoriels
Distorsion de tracés à l’aide de l’outil Reformer la zone
L’outil Reformer la zone permet de tirer la zone formée par tous les tracés sélectionnés dans le 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 les cercles intérieur et extérieur reforme le tracé 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.
1 Dans le menu contextuel de l’outil Forme libre, sélectionnez l’outil Reformer la zone.
2 Faites glisser le pointeur sur les tracés pour les redessiner.
Modification de la taille du pointeur Reformer la zone
❖ Procédez de l’une des manières suivantes :
• Tout en maintenant le bouton de la souris enfoncé, appuyez sur la touche fléchée Droite ou sur la touche
numérique 2 pour élargir le pointeur.
• Tout en maintenant le bouton de la souris enfoncé, appuyez sur la touche fléchée Gauche ou sur la touche
numérique 1 pour rendre le pointeur plus étroit.
• Pour définir la taille du pointeur (en pixels) et la longueur du segment de tracé affecté par ce dernier,
désélectionnez tous les objets du document, puis entrez une valeur comprise entre 1 et 500 dans la zone de
texte Taille de l’inspecteur des propriétés.
Définition de l’intensité du cercle intérieur du pointeur Reformer la zone
❖ Dans la zone Intensité de l’inspecteur des propriétés, entrez une valeur comprise entre 1 et 100 pour spécifier le
pourcentage d’intensité potentielle du pointeur. L’intensité est directement proportionnelle au pourcentage
exprimé.
Nouveau dessin ou extension d’un segment de tracé sélectionné à l’aide de l’outil
Redessiner le tracé
Lorsque vous utilisez l’outil Redessiner le tracé, les attributs de contour, de fond et d’effet sont conservés.
1 Dans le menu contextuel de l’outil Plume, sélectionnez l’outil Redessiner le tracé
.
2 (Facultatif) Modifiez le niveau de précision de l’outil Redessiner le tracé en sélectionnant un nombre dans le menu
contextuel de la zone Précision, dans l’inspecteur des propriétés. Plus le nombre sélectionné est élevé, plus le
nombre de points affichés sur le tracé est élevé.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 92
Utilisation des objets vectoriels
3 Positionnez le pointeur directement sur le tracé.
4 Faites glisser le pointeur pour redessiner ou étendre le segment de tracé.
5 Relâchez le bouton de la souris.
Modification de l’aspect d’un tracé par variation de la pression et de la vitesse à l’aide des
outils Modulateur de tracé
En utilisant une pression ou une vitesse différente, vous pouvez modifier les propriétés de contour d’un tracé. Pour
définir les propriétés affectées par les outils Modulateur de tracé, utilisez l’onglet Sensibilité de la boîte de dialogue
Modifier le contour. Vous pouvez également spécifier dans quelle mesure la pression et la vitesse s’appliquent à ces
propriétés.
Pour plus de détails sur la définition des options de la boîte de dialogue Modifier le contour, reportez-vous à la
section « Application et modification de contours » à la page 120.
Découpage d’un tracé en plusieurs objets à l’aide de l’outil Cutter
1 Dans le panneau Outils, sélectionnez l’outil Cutter .
Remarque : l’utilisation de la gomme sur des stylets Wacom sélectionne automatiquement l’outil Cutter.
2 Procédez de l’une des manières suivantes :
• Faites glisser le pointeur sur le tracé.
• Cliquez sur le tracé.
3 Désélectionnez le tracé.
Retouche de tracés avec les options de tracé
Les fonctions de tracé du menu Modification permettent de créer des formes en combinant ou en modifiant des tracés
existants. Pour certaines fonctions de tracé, l’ordre d’empilage des objets tracés sélectionnés définit le déroulement de
l’opération.
Pour plus de détails sur l’ordre d’empilement des objets sélectionnés, reportez-vous à la section « Empilement des
objets » à la page 54.
Remarque : l’utilisation des fonctions de tracé supprime toutes les informations de pression et de vitesse des tracés
concernés.
Création d’un tracé continu à partir de deux tracés ouverts
1 Dans le panneau Outils, sélectionnez l’outil Sous-sélection.
2 Sélectionnez deux points de fin (extrémités) sur deux tracés ouverts.
3 Sélectionnez la commande Modification > Combiner les tracés > Joindre.
Création d’un tracé composite
1 Sélectionnez au moins deux tracés ouverts ou fermés.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 93
Utilisation des objets vectoriels
2 Sélectionnez la commande Modification > Combiner les tracés > Joindre.
Séparation d’un tracé composite
1 Sélectionnez le tracé composite.
2 Choisissez Modification > Combiner les tracés > Séparer.
Combinaison de tracés fermés sélectionnés en un tracé englobant toute la zone occupée par
les tracés d’origine
❖ Sélectionnez la commande Modification > Combiner les tracés > Union. Le tracé qui en résulte a les attributs de
contour et de fond de l’objet situé à l’arrière-plan.
Conversion d’un tracé en cadre de sélection
Vous pouvez convertir une forme vectorielle en une sélection bitmap, puis utiliser les outils bitmap pour éditer la
nouvelle sélection bitmap.
1 Sélectionnez un tracé.
2 Choisissez Modification > Convertir le tracé en cadre de sélection.
3 Dans la boîte de dialogue Convertir le tracé en cadre de sélection, sélectionnez un paramètre Bord à appliquer au
cadre de sélection.
4 Si vous avez sélectionné Contour progressif comme bord, spécifiez la valeur de diffusion à utiliser.
5 Cliquez sur OK.
Remarque : la conversion d’un tracé en cadre de sélection supprime le tracé sélectionné. Pour modifier cette valeur
par défaut, choisissez la commande Edition > Préférences > Edition, puis désélectionnez l’option Supprimer les tracés
lors de la conversion en sélection.
Création d’un objet à partir de l’intersection d’autres objets
❖ Sélectionnez la commande Modification > Combiner les tracés > Intersection. Le tracé qui en résulte a les attributs
de contour et de fond de l’objet situé à l’arrière-plan.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 94
Utilisation des objets vectoriels
Suppression de portions d’un objet tracé
Vous pouvez supprimer des portions d’un objet tracé sélectionné telles qu’elles sont définies par les portions
superposées d’un autre objet tracé sélectionné disposé devant lui.
1 Sélectionnez l’objet tracé qui définit la zone à supprimer.
2 Choisissez la commande Modification > Disposer > Premier plan.
3 Tout en maintenant la touche Maj enfoncée, ajoutez à la sélection l’objet tracé dont les portions doivent
être supprimées.
4 Choisissez Modification > Combiner les tracés > Poinçon.
Recadrage d’un tracé
Vous pouvez recadrer un tracé à l’aide de la forme d’un autre tracé. Le tracé au premier plan (supérieur) définit la
forme de la zone recadrée.
1 Sélectionnez l’objet tracé qui définit la zone à recadrer.
2 Choisissez la commande Modification > Disposer > Premier plan.
3 Tout en maintenant la touche Maj enfoncée, ajoutez à la sélection l’objet tracé à recadrer.
4 Choisissez Modification > Combiner les tracés > Recadrage.
L’objet tracé qui en résulte adopte les attributs de contour et de fond de l’objet tracé situé complètement à l’arrière-plan.
Simplification d’un tracé
La commande Simplifier permet de supprimer du tracé le nombre de points redondants que vous spécifiez. Sont
considérés comme redondants un nombre de points supérieur à deux sur une droite ou des points entièrement
superposés.
1 Choisissez Modification > Modifier le tracé > Simplifier.
2 Entrez une valeur de simplification, puis cliquez sur OK.
La simplification d’un tracé augmente la possibilité pour Fireworks de modifier le tracé afin de réduire le nombre
de points sur ce tracé.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 95
Utilisation des objets vectoriels
Extension du contour d’un objet sélectionné
Vous pouvez convertir le contour d’un tracé sélectionné en tracé fermé. Le tracé ainsi obtenu crée l’illusion d’un tracé
sans fond mais doté d’un contour reprenant les mêmes attributs que ceux du fond de l’objet d’origine.
Remarque : l’extension du contour d’un tracé qui s’entrecoupe peut produire des résultats intéressants. Si le tracé
d’origine contient un fond, les portions du tracé qui s’entrecoupent ne contiennent pas de fond une fois le contour étendu.
1 Choisissez Modification > Modifier le tracé > Etendre le contour.
2 Définissez la largeur du tracé fermé obtenu.
3 Sélectionnez un type d’angle.
4 Si vous avez sélectionné la forme en pointe, définissez la pointe (le point auquel un angle en pointe devient
automatiquement biseauté). La limite est le rapport de la longueur du coin sur la largeur du trait.
5 Sélectionnez une option d’extrémité, puis cliquez sur OK.
Contraction et dilatation d’un tracé
1 Choisissez Modification > Modifier le tracé > Rapporter le tracé.
2 Sélectionnez une direction à suivre pour contracter ou dilater le tracé :
A l’intérieur Permet de contracter le tracé.
A l’extérieur Permet de dilater le tracé.
3 Définissez la largeur séparant le tracé d’origine du tracé contracté ou dilaté.
4 Sélectionnez un type d’angle.
5 Si vous avez sélectionné la forme en pointe, définissez la pointe correspondante.
6 Cliquez sur OK.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 96
Utilisation des objets vectoriels
Retouche de tracés à l’aide du panneau Tracé
Pour accélérer l’exécution des tâches de modification de tracés, utilisez les outils suivants du panneau Tracé (Fenêtre >
Autres > Tracé).
Pour plus d'informations, voir http://www.adobe.com/go/learn_fw_designguide_fr
Dernière mise à jour le 29/4/2010
Chapitre 7 : Utilisation du texte
Adobe® Fireworks® permet d’utiliser un grand nombre de fonctions généralement réservées aux applications de PAO
sophistiquées (multitude de polices et de corps de caractères, réglage du crénage, de l’espacement, des couleurs, de
l’interlignage et du décalage vertical, etc.). Vous pouvez à tout moment modifier du texte, même après avoir appliqué
des filtres dynamiques. Vous pouvez même importer un texte modifiable à partir d’un document Adobe Photoshop®.
Entrée de texte
Utilisez l’outil Texte
vos graphiques.
et les options de l’inspecteur des propriétés pour saisir, mettre en forme et éditer du texte dans
Remarque : Si l'inspecteur des propriétés est réduit, double-cliquez sur sa barre pour consulter toutes les propriétés de
texte.
Les objets texte sont automatiquement enregistrés sous un nom correspondant au texte que vous avez saisi. Vous
pouvez modifier ce nom dans la zone Texte de l’inspecteur des propriétés ou dans la vignette de panneau d’objet
affichée dans le panneau Calques.
Dans le panneau Calques, les objets texte peuvent être identifiés par l’icône T.
Voir aussi
« Préférences de texte » à la page 312
Création et déplacement de blocs de texte
Dans les documents Fireworks, le texte figure dans un bloc de texte (rectangle doté de poignées). Il existe des blocs de
texte à redimensionnement automatique ou de largeur fixe.
• Un bloc de texte à redimensionnement automatique s’étend horizontalement à mesure que vous saisissez le texte
et se réduit lorsque vous supprimez du texte. Des blocs de texte à redimensionnement automatique sont créés par
défaut lorsque vous cliquez sur la zone de travail avec l’outil Texte et commencez la saisie.
• Les blocs de texte de largeur fixe vous permettent de contrôler la largeur des lignes de texte. Ces blocs sont créés par
défaut lorsque vous tracez un bloc de texte à l’aide de l’outil Texte.
• Lorsque le pointeur de texte est actif dans un bloc de texte, un cercle ou un carré évidé s’affiche dans le coin
supérieur droit du bloc de texte. Le cercle indique qu’il s’agit d’un bloc de texte à redimensionnement automatique,
tandis que le carré identifie un bloc de texte de largeur fixe. Cliquez deux fois sur l’angle pour basculer d’un bloc de
texte à l’autre.
1 Sélectionnez l’outil Texte.
2 Sélectionnez les caractéristiques du texte.
3 Créez un bloc de texte :
• Pour créer un bloc de texte à redimensionnement automatique, cliquez dans votre document à l’endroit où
commencer le bloc.
97
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 98
Utilisation du texte
• Pour créer un bloc de texte à largeur fixe, dessinez un bloc en faisant glisser le pointeur de l’outil. Pour déplacer le
bloc de texte à mesure que vous le créez en faisant glisser le pointeur de l’outil, tout en maintenant enfoncés le
bouton de la souris et la barre d’espace, faites glisser le bloc de texte vers l’emplacement souhaité.
1 Saisissez le texte.
2 (Facultatif) Mettez en surbrillance le texte contenu dans le bloc de texte, puis mettez-le en forme.
3 (Facultatif) Pour déplacer le bloc de texte, faites-le glisser vers un nouvel emplacement.
4 Procédez de l’une des manières suivantes :
• Cliquez hors du bloc de texte.
• Dans le panneau Outils, sélectionnez un autre outil.
• Appuyez sur la touche Echap.
Changement des blocs de texte à redimensionnement automatique et à
largeur fixe
A
B
Bloc de texte de largeur fixe et bloc de texte à redimensionnement automatique
A. Indicateur de largeur fixe B. Indicateur de redimensionnement automatique
• Pour changer un bloc de texte en bloc de largeur fixe ou à redimensionnement automatique, cliquez deux fois à
l’intérieur du bloc de texte, puis cliquez deux fois sur le cercle ou le carré figurant dans l’angle supérieur droit du
bloc de texte.
• Pour changer un bloc de texte sélectionné en bloc de largeur fixe par redimensionnement, faites glisser une poignée
de redimensionnement.
• Pour affecter une largeur fixe à plusieurs blocs de texte, sélectionnez ces blocs, puis choisissez Commandes >
Texte > Définir la largeur.
• Pour définir des blocs de texte à largeur fixe en tant que blocs à redimensionnement automatique, sélectionnez ces
blocs, puis choisissez Commandes > Texte > Basculer largeur fixe.
Indicateur de dépassement du texte
Lorsque le texte dépasse l'espace alloué par un bloc de texte ou un chemin, l'indicateur de dépassement de texte
s'affiche. Pour plus d'informations, voir http://www.fireworkszone.com/g-2-565.
Sélection de texte
Sélection d’un mot ou d’un paragraphe
❖ Cliquez deux fois dans un mot pour le sélectionner et trois fois pour sélectionner le paragraphe entier.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 99
Utilisation du texte
Sélection de morceaux de texte dans un paragraphe
❖ Pour sélectionner des morceaux de texte dans un paragraphe, appuyez sur Maj et sélectionnez tous les morceaux
souhaités.
Sélection de texte doté d’attributs similaires
❖ Pour sélectionner du texte doté d’attributs similaires, appuyez sur Alt (Windows)/Option (Mac) et cliquez deux fois
sur un mot comportant les attributs spécifiés. Tous les mots dotés des attributs correspondants sont
automatiquement sélectionnés dans le bloc de texte.
Pour sélectionner tous les mots en gras, par exemple, appuyez sur Alt (Windows)Options (Mac) et cliquez deux fois
sur un mot en gras. Tous les mots en gras du bloc de texte sont automatiquement sélectionnés.
Ajout de texte doté d’attributs différents à la sélection précédente
❖ Vous pouvez ajouter au texte sélectionné précédemment du texte doté d’un autre ensemble d’attributs. Après avoir
sélectionné du texte en gras, appuyez sur Alt+Maj (Windows)/Option+Maj (Mac) et cliquez deux fois sur un mot
en italique, par exemple. Les mots en gras et en italique sont alors sélectionnés.
Ajout de texte à une sélection existante
❖ Pour ajouter des mots un par un à une sélection existante, appuyez sur Alt+Maj (Windows)/Option+Maj (Mac) et
cliquez sur chaque mot.
Désélection de texte au sein d’une sélection
❖ Pour désélectionner un morceau de texte lorsque plusieurs morceaux sont sélectionnés, appuyez sur Alt
(Windows)/Option (Mac) et cliquez sur le morceau concerné.
Mise en forme et édition de texte
Le moyen le plus rapide d’éditer du texte avec précision consiste à utiliser l’inspecteur des propriétés. Vous pouvez
également utiliser les commandes du menu Texte.
Pour plus d'informations sur les commandes de texte, voir http://www.fireworkszone.com/page-2-4-1-566.html.
Important : les modifications que vous apportez au cours d’une session de modification de texte correspondent
globalement à une seule modification et sont donc toutes annulées ensemble 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 où vous avez cliqué deux fois sur le bloc de texte pour modifier son contenu.
1 Pour sélectionner le texte à modifier, procédez de l’une des manières suivantes :
• 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, sélectionnez-les un par un tout en maintenant la
touche Maj enfoncée.
• Cliquez deux fois sur un bloc de texte avec l’outil Pointeur ou Sous-sélection, puis sélectionnez une zone
de texte.
• Cliquez dans un bloc de texte avec l’outil Texte, puis sélectionnez du texte.
2 Modifiez le texte ou la police. Les polices se mesurent en points.
3 Procédez de l’une des manières suivantes :
• Cliquez hors du bloc de texte.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 100
Utilisation du texte
• Dans le panneau Outils, sélectionnez un autre outil.
• Appuyez sur la touche Echap.
A propos des polices
Une police est un ensemble complet de caractères alphabétiques, chiffres et symboles qui partagent une graisse, une
chasse et un style (par exemple, Adobe Garamond, 10 points, gras).
Les types de caractères (souvent appelés familles de caractères ou familles de polices) sont des ensembles de polices de
caractères apparentés par le graphisme et conçus pour être utilisés ensemble (par exemple, Adobe Garamond).
Un style de caractères est une variante d’une police au sein d’une même famille de caractères. En général, l’élément
d’une famille de polices appelé Romain ou Normal (le nom diffère d’une famille à l’autre) constitue la police de base
comprenant les styles de caractères tels que normal, gras, demi-gras, italique et gras italique.
Outre les polices installées sur votre système, vous pouvez créer les dossiers suivants et utiliser les polices qui y sont
installées :
Windows Program Files/Fichiers communs/Adobe/Fonts
Mac OS Bibliothèque/Application Support/Adobe/Fonts
Si vous installez une police Type 1, TrueType, OpenType ou CID dans le dossier Fonts local, cette police apparaît
uniquement dans les applications Adobe.
Aperçu des polices
Vous pouvez afficher un aperçu d’une police dans le menu Famille de polices de l’inspecteur des propriétés. Vous
pouvez désactiver la fonction d’aperçu ou changer le corps de caractère des noms de police ou des échantillons de
polices dans les préférences de texte.
Indication du corps d’un caractère
Par défaut, le corps d’un caractère est mesuré en points (un point équivaut à 1/72 de pouce). Vous pouvez spécifier un
corps de caractère compris entre 0,1 et 1296 par incréments de 0,001 point.
Remarque : Dans Adobe Fireworks, le corps d’un caractère est mesuré par défaut en pixels.
1 Sélectionnez les caractères ou les objets texte à modifier. Si vous ne sélectionnez pas de texte, le corps de caractère
s’applique au nouveau texte.
2 Effectuez l’une des opérations suivantes :
• Définissez l’option Corps de police dans le panneau Caractère ou dans la barre de commandes.
• Choisissez un corps dans le menu Texte > Corps. Lorsque vous choisissez Autre, vous pouvez entrer un nouveau
corps dans le panneau Caractère.
Vous pouvez modifier l’unité de mesure des caractères dans la boîte de dialogue Préférences. Cette option n’est pas
disponible dans Fireworks.
Pour rendre les polices manquantes disponibles
❖ Effectuez l’une des opérations suivantes :
• Installez les polices manquantes sur votre système.
• Activez les polices manquantes à l’aide d’une application de gestion des polices.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 101
Utilisation du texte
• Placez les polices manquantes dans le dossier Polices, situé dans le dossier d’application. Les polices de ce dossier
sont uniquement disponibles dans l’application. Sous Mac OS, les polices peuvent être installées dans le dossier
Macintosh HD > Bibliothèque > Application Support > Adobe > Fonts. Les polices installées à cet emplacement ne
peuvent être utilisées que dans les produits Adobe.
Si vous n’avez pas accès aux polices manquantes, recherchez-les et remplacez-les.
Sélection d’une famille et d’un style de caractères
L’inspecteur des propriétés ou le menu Texte permettent de sélectionner une famille et un style de polices.
Voir aussi
« Préférences de texte » à la page 312
Sélection d’une famille et d’un style de caractères dans l’inspecteur des propriétés
1 Sélectionnez une famille de caractères dans le menu Police. Si plusieurs versions d’une police sont installées sur
votre ordinateur, le nom de la police est suivi d’une abréviation : (T1) pour les polices PostScript, (TT) pour les
polices TrueType ou (OT) pour les polices OpenType.
Sous Windows, pour sélectionner une famille et un style de police, vous pouvez saisir le nom correspondant dans
la zone. Au fur et à mesure de la saisie, le nom de la première police ou du premier style commençant par cette
lettre apparaît. Poursuivez la saisie jusqu’à ce que le nom de la police ou du style recherché(e) apparaisse.
2 Pour sélectionner un style de caractères, procédez de l’une des manières suivantes :
• Sélectionnez un style installé dans le menu Style de l’inspecteur des propriétés.
• Si la famille de caractères ne comprend pas de styles, cliquez sur le bouton Faux gras, Faux italique ou Souligné
pour appliquer une simulation de style.
Sélection d’une famille et d’un style de caractères dans le menu Texte
❖ Choisissez la commande Texte > Police > [famille] > [style]. Si la famille de caractères recherchée ne comprend pas
de styles, sélectionnez Standard, Faux gras, Faux italique ou Souligné dans le menu Texte > Style.
(Windows) : pour rechercher une police, tapez son nom dans le menu.
Conversion du texte en majuscules
Il est possible de convertir le texte sélectionné en majuscules.
❖ Sélectionnez Commandes > Texte > Majuscules.
Conversion du texte en minuscules
Il est possible de convertir le texte sélectionné en minuscules.
❖ Sélectionnez Commandes > Texte > Minuscules.
Application d’une majuscule en début de phrase
Il est possible de modifier le texte sélectionné pour qu’il commence avec une majuscule.
❖ Sélectionnez Commandes > Texte > Majuscule initiale.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 102
Utilisation du texte
Insertion d’un saut de ligne
Pour insérer un saut de ligne, appuyez sur Maj+Entrée.
Annulation des modifications apportées au texte
En mode de modification de texte, vous pouvez utiliser la fonction d’annulation (Ctrl + Z) pour annuler des
modifications individuelles. Lorsque vous quittez ce mode, les modifications sont validées et cette fonction n’a plus
aucun effet.
Insertion de caractères spéciaux
1 Après avoir créé un bloc de texte, cliquez dans le bloc de texte à l’emplacement auquel insérer un caractère spécial.
2 Choisissez la commande Fenêtre > Autres > Caractères spéciaux, puis sélectionnez le caractère à insérer.
Insertion d’un texte d’espace réservé
Il est possible d’insérer un bloc de texte d’espace réservé n’ayant pas de signification spécifique. Cette option permet
de placer un bloc de texte (lorem ipsum) dans la zone de travail.
❖ Sélectionnez Commandes > Texte > Lorem ipsum.
Remarque : Vous pouvez également faire appel au générateur de texte aléatoire LoremIpsum, qui permet d’insérer
rapidement un bloc de texte d’espace réservé aux maquettes. Cette extension est disponible sur
http://www.adobe.com/go/learn_fw_randomtextgenerator_fr.
Application de couleur à un texte
• Par défaut, le texte est noir et sans contour. Vous pouvez changer la couleur de l’ensemble ou d’une partie du texte
dans un bloc de texte sélectionné. Vous pouvez également ajouter des contours et appliquer des filtres dynamiques
à tout le texte d’un bloc de texte sélectionné (mais pas au texte mis en surbrillance au sein d’un bloc de texte).
• L’outil Texte conserve la couleur de texte actuelle d’un bloc de texte à l’autre.
• Les caractéristiques de contour et les filtres dynamiques appliqués à un bloc de texte sont actualisés au fur et à
mesure des modifications apportées au bloc de texte ; toutefois, ces mises à jour ne s’appliquent pas aux nouveaux
blocs de texte.
• L’outil Texte conserve la couleur de texte actuelle indépendamment de la couleur de remplissage des autres outils.
De même, lorsque vous réutilisez l’outil Texte après avoir appliqué une couleur de fond, le paramètre de couleur le
plus récent de l’outil Texte lui est restitué, et le contour est réinitialisé sur Aucun.
Voir la section « Enregistrement des attributs de texte de contour, de fond et de filtre sous forme de style » à la
page 106.
Définition de la couleur du texte dans un bloc de texte sélectionné
❖ Procédez de l’une des manières suivantes :
• Cliquez sur la case Couleur de fond dans l’inspecteur des propriétés, puis sélectionnez une couleur dans le menu
contextuel. Dans une fenêtre contextuelle de couleurs, vous pouvez également utiliser le pointeur de pipette
pour échantillonner une couleur à un emplacement quelconque de l’écran.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 103
Utilisation du texte
Case Couleur de fond
• Dans le panneau Outils, cliquez sur l’icône située en regard de la case Couleur de fond, puis sélectionnez une
couleur dans la fenêtre contextuelle de couleurs. Dans la fenêtre contextuelle de la case Couleur de fond, vous
pouvez également utiliser la pipette pour échantillonner une couleur à un emplacement quelconque de l’écran.
Remarque : lorsque vous appliquez un contour au texte en surbrillance à l’intérieur d’un bloc de texte, tout le bloc
de texte est sélectionné automatiquement.
Définition de l’interligne et de l’interlettrage
Le crénage consiste à augmenter ou à réduire l’espace (exprimé en pourcentage) entre certaines paires de lettres pour
des raisons d’esthétisme. Le crénage automatique utilise les informations de crénage d’une police lors de l’affichage de
texte. L’approche augmente ou réduit l’espacement entre les caractères sélectionnés.
Dans Fireworks CS5, le crénage et l’approche fonctionnent comme dans CS3. Pour les changer, placez le curseur dans
un mot et modifiez les valeurs correspondantes.
L’aspect du texte importé à partir de versions existantes (CS3 et versions antérieures) ne change pas. Les valeurs de
crénage et d’approche sont cependant modifiées en conséquence des changements apportés à Adobe Text Engine
depuis Fireworks CS3.
Pour désactiver le crénage automatique, désélectionnez l’option Crénage automatique dans l’inspecteur des
propriétés.
L’interlignage détermine l’espace séparant les lignes adjacentes d’un paragraphe. L’interligne peut être mesuré en
pixels ou sous la forme d’un pourcentage de la distance en points séparant les lignes de base. Pour en savoir plus sur la
façon dont Fireworks utilise Adobe Text Engine (ATE) pour assurer le rendu des éléments de texte, voir l’article
d’Arun Kaza, à l’adresse http://www.adobe.com/go/learn_fw_textengine_fr.
Voir aussi
« Préférences de texte » à la page 312
Définition du crénage ou de l’approche
1 Pour sélectionner le texte à créner, procédez de l’une des manières suivantes :
• A l’aide de l’outil Texte, cliquez entre deux caractères ou mettez en surbrillance les caractères à modifier.
• Utilisez l’outil Pointeur pour sélectionner un bloc de texte entier. Cliquez sur plusieurs blocs de texte tout en
maintenant la touche Maj enfoncée pour les sélectionner.
UTILISATION DE FIREWORKS CS5 104
Dernière mise à jour le 29/4/2010
Utilisation du texte
2 Sélectionnez les caractères dont vous souhaitez définir l’espacement et procédez de l’une des manières suivantes :
• Dans l’inspecteur des propriétés, faites glisser le curseur contextuel Approche ou entrez un pourcentage dans la
zone correspondante.
Une valeur nulle correspond à une approche normale. Les valeurs positives écartent les lettres, et les valeurs
négatives les rapprochent.
• Tout en maintenant la touche Ctrl (Windows) ou Cmde (Mac OS) enfoncée, appuyez sur la touche fléchée
Gauche ou la touche fléchée Droite du clavier.
La touche fléchée Gauche permet de rapprocher les lettres de 1 %, et la touche fléchée Droite de les éloigner
de 1 %.
Tout en maintenant les touches Maj et Ctrl (Windows) ou Maj et Cmde (Mac OS) enfoncées, appuyez sur la
touche fléchée Gauche ou la touche fléchée Droite pour régler l’approche par incréments de 10 %.
Définition de l’interlignage du texte sélectionné
Options d’interlignage de l’inspecteur des propriétés
1 Procédez de l’une des manières suivantes :
• Dans l’inspecteur des propriétés, faites glisser le curseur contextuel Interlignage ou entrez une valeur dans la
zone correspondante. La valeur par défaut est 100 %.
• A l’aide du clavier, tout en maintenant la touche Ctrl (Windows) ou Cmde (Mac OS) enfoncée, appuyez sur la
touche fléchée Haut (pour augmenter l’espacement) ou la touche fléchée Bas (pour diminuer l’espacement).
Tout en maintenant les touches Maj et Ctrl (Windows) ou Maj et Cmde (Mac OS) enfoncées, appuyez sur la
touche fléchée Haut ou la touche fléchée Bas pour régler l’interligne par incréments de 10.
2 Pour changer le type d’unité d’interlignage, sélectionnez % ou px (pixels) dans le menu contextuel Unités
d’interlignage.
Définition de l’orientation et de l’alignement du texte
Définition de l’orientation du texte
Vous pouvez orienter des blocs de texte entiers horizontalement ou verticalement. Plusieurs lignes de texte vertical
vont de droite à gauche, comme pour les langues asiatiques.
1 Cliquez sur le bouton Orientation du texte
dans l’inspecteur des propriétés.
2 Sélectionnez une option d’orientation :
De gauche à droite horizontalement Il s’agit de la valeur par défaut.
De droite à gauche verticalement Oriente le texte verticalement, l’affichant de haut en bas. Des lignes de texte
séparées par des retours à la ligne s’affichent sous forme de colonnes qui s’enchaînent de la droite vers la gauche.
Pour donner au texte un effet spécial en l’inversant, utilisez l’outil Distorsion et faites glisser une poignée latérale.
UTILISATION DE FIREWORKS CS5 105
Dernière mise à jour le 29/4/2010
Utilisation du texte
Définition de l’alignement du texte
L’alignement détermine la position d’un paragraphe de texte par rapport aux bords d’un bloc de texte. Par défaut, le
texte horizontal est aligné à gauche.
Un texte vertical peut être aligné sur le bord supérieur ou inférieur du bloc de texte, centré à l’intérieur du bloc de texte
ou justifié entre les bords supérieur et inférieur.
1 Sélectionnez le texte.
2 Cliquez sur un bouton d’alignement dans l’inspecteur des propriétés.
Les commandes d’alignement
un bloc de texte est sélectionné.
sont visibles dans l’inspecteur des propriétés lorsqu’un texte ou
Définition du retrait et de l’espacement des paragraphes
❖ Pour mettre un texte en retrait, dans l’inspecteur des propriétés, faites glisser le curseur contextuel Retrait de
paragraphe ou saisissez une valeur (en pixels) dans la zone de texte.
Option Retrait de paragraphe dans l’inspecteur des propriétés
❖ Pour définir l’espacement à respecter avant et après les paragraphes dans l’inspecteur des propriétés, faites glisser
le curseur contextuel Espace avant le paragraphe ou Espace après le paragraphe ou entrez une valeur dans la zone
de texte.
Options d’espacement des paragraphes dans l’inspecteur des propriétés
Application d’effets au texte
Lissage des bords du texte
Le lissage des bords d’un texte sélectionné est appelé lissage. Le lissage permet de fusionner les bords du texte avec
l’arrière-plan, ce qui le rend plus net et lisible lorsque vous le composez dans un grand corps de caractère. Le lissage
s’applique à tous les caractères d’un bloc de texte donné.
Texte d’origine ; après lissage
❖ Dans l’inspecteur des propriétés, sélectionnez l’une des options du menu contextuel Lissage :
Sans lissage Désactive le lissage du texte.
Lissage net Crée une transition nette entre les bords du texte et l’arrière-plan.
Lissage fort Crée une transition très abrupte entre les bords du texte et l’arrière-plan, préservant la forme des
caractères du texte et améliorant la netteté des zones détaillées des caractères.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 106
Utilisation du texte
Lissage léger Crée une transition légère entre les bords du texte et l’arrière-plan.
Lissage personnalisé Fournit les commandes de lissage avancées suivantes :
• Suréchantillonnage Détermine la quantité de détails utilisée pour créer la transition entre les bords du texte et
l’arrière-plan.
• Netteté Détermine le lissage de la transition entre les bords du texte et l’arrière-plan.
• Intensité Détermine le degré de mélange entre les bords du texte et l’arrière-plan.
Remarque : Le texte figurant dans un fichier vectoriel est anticrénelé à l’ouverture du fichier dans Fireworks.
Réglage de la chasse des caractères sélectionnés
❖ Dans l’inspecteur des propriétés, faites glisser le curseur contextuel Echelle horizontale ou entrez une valeur dans
la zone de texte. Pour augmenter la largeur ou la hauteur des caractères, faites glisser le curseur au-delà de 100 % ;
pour les réduire, faites glisser le curseur en deçà de 100 %. 100 % est la valeur par défaut.
Option Echelle horizontale dans l’inspecteur des propriétés
Modification de la proximité du texte par rapport à la ligne de base
Le décalage vertical définit la proximité du texte par rapport à sa ligne de base naturelle (indice et exposant, par
exemple). En l’absence de décalage vertical, le texte repose sur la ligne de base. Les décalages verticaux se mesurent en
pixels.
Option de décalage vertical dans l’inspecteur des propriétés
❖ Dans l’inspecteur des propriétés, faites glisser le curseur contextuel Décalage vertical, ou entrez une valeur dans la
zone de texte correspondante, pour définir la position du texte en indice ou en exposant. Entrez des valeurs
positives pour mettre des caractères en exposant, et des valeurs négatives pour les mettre en indice.
Enregistrement des attributs de texte de contour, de fond et de filtre sous forme de style
Vous pouvez ajouter des contours, des fonds et des filtres au texte d’un bloc de texte sélectionné, puis enregistrer ces
attributs de texte sous forme de style. Une fois le texte créé, vous pouvez le modifier dans Fireworks. Les contours, les
fonds, les filtres et les styles sont automatiquement mis à jour en cours d’édition.
Texte avec des options de contour, de fond, de filtre et de style
1 Créez un objet texte, puis appliquez-lui les attributs appropriés. Appliquez l’un des styles du panneau Styles, même
s’il ne s’agit pas d’un style de texte.
2 Sélectionnez l’objet texte.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 107
Utilisation du texte
3 Dans le menu Options du panneau Styles, sélectionnez Nouveau style.
4 Sélectionnez les propriétés du style, puis nommez-le.
Voir aussi
« Préférences de texte » à la page 312
Attachement de texte à un tracé
A défaut d’utiliser des blocs de texte rectangulaires, vous pouvez dessiner un tracé et attacher un texte à ce dernier. Le
texte épouse alors la forme du tracé. Tant le texte que le tracé sont modifiables.
Lorsque vous attachez temporairement du texte à un tracé, ce dernier perd ses attributs de contour, de fond et de filtre.
Les attributs de contour, de fond et de filtre appliqués par la suite affectent le texte mais pas le tracé. Lorsque vous
détachez le texte d’un tracé, le tracé retrouve ses attributs de contour, de fond et de filtre.
Remarque : l’attachement à un tracé d’un texte contenant des retours à la ligne automatiques ou forcés peut produire des
résultats inattendus.
Lorsque la totalité du texte ne tient pas dans l’espace intérieur ou extérieur à un tracé, une icône indiquant qu’il existe
du texte excédentaire s’affiche. Supprimez ce texte ou redimensionnez le tracé en conséquence. L’icône disparaît
lorsque tout le texte peut être affiché.
Attachement de texte à un tracé et modification du texte
• Pour associer du texte au périmètre d’un tracé, sélectionnez un objet de texte et un tracé en maintenant la touche
Maj enfoncée, puis choisissez la commande Texte > Attacher au tracé.
• Pour placer un bloc de texte à l’intérieur d’un tracé, sélectionnez un objet de texte et un tracé en maintenant la
touche Maj enfoncée, puis choisissez la commande Texte > Attacher dans le tracé.
• Pour détacher un texte d’un tracé sélectionné, choisissez Texte > Détacher du tracé.
• Pour modifier un texte attaché à un tracé, cliquez deux fois sur l’objet de texte curviligne à l’aide de l’outil Pointeur
ou Sous-sélection ; à défaut, cliquez dessus pour sélectionner le texte à modifier à l’aide de l’outil Texte.
• Pour modifier la forme du tracé, utilisez l’outil Sous-sélection pour sélectionner l’objet de texte curviligne, puis
faites glisser les points sous-sélectionnés pour remodeler le tracé.
Remarque : vous pouvez également utiliser l’outil Plume (courbe de Bézier) pour éditer le tracé. Le texte suit
automatiquement le tracé à mesure que vous modifiez des points.
Modification de l’orientation et du sens d’un texte sur un tracé
L’ordre de dessin du tracé détermine la direction du texte qui lui est attaché. Par exemple, lorsque vous dessinez un
tracé allant de droite à gauche, le texte attaché apparaît à l’envers et retourné.
Texte attaché à un tracé dessiné de droite à gauche
❖ Choisissez Texte > Orientation, puis sélectionnez une orientation.
Texte enroulé autour d’un tracé
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 108
Utilisation du texte
Texte orienté verticalement sur un tracé
Texte incliné verticalement autour d’un tracé
Texte incliné horizontalement autour d’un tracé
• Pour inverser le sens du texte sur un tracé sélectionné, choisissez Texte > Inverser la direction.
• Pour déplacer le point d’origine du texte attaché à un tracé, sélectionnez l’objet de texte curviligne, puis, dans
l’inspecteur des propriétés, entrez une valeur dans la zone de texte Décalage du texte.
Attachement de texte dans un tracé
Vous pouvez attacher un texte dans un objet vectoriel. Le texte figure dans une zone déterminée par les limites
vectorielles. Le texte et l’objet vectoriel restent modifiables. Lorsque vous attachez un texte dans un tracé, la quantité
de texte visible dépend de la taille de la zone dans le tracé.
1 Sélectionnez le texte et l’objet vectoriel dans la zone de travail.
2 Cliquez sur Texte > Attacher dans le tracé.
Conversion de texte en tracés
Vous pouvez convertir un texte en tracés, puis reformer les lettres comme vous le feriez avec un objet vectoriel. Tous
les outils d’édition vectorielle sont utilisables avec un texte converti en tracé.
Remarque : un texte converti ne peut pas être modifié comme du texte.
• Pour convertir du texte, choisissez Texte > Convertir en tracés.
• Pour modifier individuellement des tracés de texte converti, sélectionnez le texte converti à l’aide de l’outil Soussélection (ou sélectionnez-le, puis choisissez Modification > Dissocier).
• Pour créer un tracé composite à partir d’un groupe de tracés résultant de la conversion de texte en tracés,
sélectionnez le groupe de tracés, choisissez ensuite Modification > Dissocier, puis choisissez Modification >
Combiner les tracés > Joindre.
Transformation des blocs de 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.
Lorsque d’importantes transformations sont effectuées, le texte peut devenir difficile à lire. Lorsque la transformation
d’un bloc de texte provoque le redimensionnement ou la mise à l’échelle du texte, le corps de police obtenu apparaît
dans l’inspecteur des propriétés lorsque le texte est sélectionné.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 109
Utilisation du texte
Voir aussi
« Préférences de texte » à la page 312
Solidification d’un texte
Il est possible de convertir un texte en objets vectoriels composites. Vous ne pouvez plus modifier le texte après sa
conversion en objets vectoriels. Puisque les caractères sont regroupés en tant qu’objet composite, vous devez
segmenter les tracés combinés avant de pouvoir modifier séparément les différents caractères.
• Pour solidifier le texte, sélectionnez Commandes > Texte > Solidifier.
• Pour segmenter le tracé combiné en caractères modifiables indépendamment, utilisez l’outil de sous-sélection ou
choisissez Modifier > Combiner les tracés > Séparer.
Importation de texte
Fireworks prend uniquement en charge le texte ASCII et le texte s'affiche sous forme de caractères parasites lorsque le
fichier texte Unicode est ouvert ou importé dans Fireworks. Convertissez le texte Unicode au format ASCII avant de
l'importer dans Fireworks. Sinon, copiez le texte ASCII et collez-le dans Fireworks.
• Pour importer du texte depuis Adobe Photoshop ou Adobe Illustrator®, importez un fichier Photoshop ou
Illustrator, ou copiez le texte dans Fireworks.
Vous pouvez copier jusqu’à 8 000 caractères à partir de Fireworks ou d’une autre application.
Par défaut, le texte importé depuis Photoshop ou Illustrator conserve tous ses attributs dans Fireworks. Cependant,
vous pouvez également importer du texte Photoshop sous forme d’images bitmap (Voir « Préférences
d’importation et d’ouverture de fichiers Photoshop » à la page 313.)
• Pour importer du texte aux formats RTF (format de texte enrichi) et ASCII (texte seul), copiez-le dans Fireworks.
Vous pouvez aussi sélectionner Fichier > Ouvrir ou Fichier > Importer pour atteindre un fichier. (Le texte ASCII
importé apparaît avec la couleur de fond active, la police par défaut et une hauteur de 12 pixels.)
Remplacement des polices manquantes
Si le document que vous ouvrez dans Fireworks comporte des polices qui ne sont pas installées sur votre ordinateur,
vous pouvez soit remplacer les polices, soit conserver leur aspect.
La police Myriad Pro est appliquée par défaut au texte contenant des polices non disponibles sur votre ordinateur.
Vous pouvez modifier ce paramètre dans la boîte de dialogue Préférences.
Conserver l’aspect Permet de remplacer le texte par une image bitmap représentant le texte dans sa police d’origine.
Vous pouvez toujours modifier le texte, mais, le cas échéant, Fireworks remplace l’image bitmap par une police
installée sur votre système. La modification risque d’altérer l’aspect du texte.
Remplacer les polices Permet de remplacer les polices dans le document. Vous pouvez modifier et enregistrer le texte.
Lorsque le fichier est rouvert sur un ordinateur disposant des polices d’origine, Fireworks utilise ces polices.
Voir aussi
« Préférences de texte » à la page 312
Sélection d’une police de substitution
1 Ouvrez un document contenant des polices manquantes, puis sélectionnez l’une d’entre elles dans la liste
Remplacer les polices manquantes.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 110
Utilisation du texte
2 Procédez de l’une des manières suivantes :
• Dans la liste A, sélectionnez une police de remplacement.
• Cliquez sur Aucun changement si vous souhaitez conserver la police manquante telle quelle.
Ainsi, lorsque vous ouvrez un document comportant la même police manquante, la boîte de dialogue Polices
manquantes affiche la police que vous avez sélectionnée.
Correction orthographique d’un texte
Vérification orthographique d’un texte
1 Sélectionnez au moins un bloc de texte. Si vous ne sélectionnez pas de bloc de texte, Fireworks vérifie l’orthographe
de l’ensemble du document.
2 Choisissez Texte > Orthographe.
Personnalisation de la correction orthographique
1 Choisissez Texte > Installation du correcteur orthographique ou cliquez sur le bouton Configurer de la boîte de
dialogue Orthographe.
2 Dans la boîte de dialogue Installation du correcteur orthographique, sélectionnez les options nécessaires :
• Choisissez les dictionnaires de langue.
• Sélectionnez un dictionnaire personnalisé en cliquant sur l’icône de dossier située à côté de la zone de texte
Chemin d’accès du dictionnaire personnel.
• Modifiez le dictionnaire personnalisé en cliquant sur le bouton Modifier le dictionnaire personnel puis en
ajoutant, supprimant ou modifiant des mots dans la liste.
• Sélectionnez les types de mots à inclure dans la vérification orthographique.
Dernière mise à jour le 29/4/2010
Chapitre 8 : Application de couleurs, de
contours et de fonds
Adobe® Fireworks® présente un grand nombre d’options d’organisation, de sélection et d’application des couleurs.
Application de couleurs
Activation, suppression ou permutation du contour et du fond
Pour déterminer l’attribut affecté par vos réglages chromatiques, activez la couleur de contour ou la couleur de fond.
Pour appliquer les valeurs par défaut spécifiées dans la boîte de dialogue Préférences, réinitialisez les couleurs de
contour et de fond.
Activation de la couleur de contour ou de fond
❖ Dans la section Couleurs du panneau Outils, cliquez sur l’icône située à gauche de la case Couleur de contour ou
Couleur de fond.
Remarque : l’outil Pot de peinture remplit les sélections de pixels et les objets vectoriels avec la couleur affichée dans la
case Couleur de fond.
Cases de couleurs de contour et de fond dans le panneau Outils et fenêtre contextuelle pour la sélection des couleurs
Rétablissement des couleurs de contour et de fond par défaut
❖ Cliquez sur le bouton Définit les couleurs de contour/fond par défaut du panneau Outils ou du Mélangeur.
Suppression des couleurs de contour et de fond des objets sélectionnés
❖ Cliquez sur le bouton Aucun contour ou fond dans la section Couleurs du panneau Outils. Pour définir la
caractéristique inactive sur Aucune, cliquez de nouveau sur le bouton Aucun contour ou fond.
Remarque : vous pouvez également supprimer la couleur de contour ou de fond en cliquant sur le bouton Transparent
dans la fenêtre contextuelle Couleur de fond ou Couleur de contour, ou en sélectionnant Aucune dans le menu contextuel
Options de fond ou Options de contour de l’inspecteur des propriétés.
111
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 112
Application de couleurs, de contours et de fonds
Permutation des couleurs de fond et de contour
❖ Dans le panneau Outils ou dans le Mélangeur, cliquez sur le bouton Permute les couleurs de contour/fond
.
Application et organisation de nuances
Dans le panneau Nuancier, vous pouvez afficher, modifier, créer et éditer les groupes de nuances, ainsi que
sélectionner des couleurs de contour et de fond.
Application d’une couleur de nuancier au contour ou au fond d’un objet sélectionné
1 Cliquez sur l’icône située à côté de la case Couleur de contour ou Couleur de fond dans le panneau Outils ou dans
l’inspecteur des propriétés pour l’activer.
2 Choisissez Fenêtre > Nuancier.
3 Cliquez sur l’échantillon pour appliquer la couleur au contour ou au fond de l’objet sélectionné.
Sélection, modification ou ajout de groupes de nuances
Vous pouvez aisément utiliser ou créer un autre groupe de nuances. Vous pouvez également importer des nuances
personnalisées à partir de fichiers de palette de couleurs enregistrés au format ACT ou GIF.
❖ Pour sélectionner un groupe de nuances, choisissez-le dans le menu Options du panneau Nuancier.
Remarque : la sélection de Cubes de couleurs affiche le groupe de nuances par défaut.
• Pour sélectionner un groupe de nuances personnalisé, sélectionnez Remplacer le nuancier dans le menu Options
du panneau Nuancier, accédez ensuite au dossier, puis sélectionnez le fichier.
• Pour ajouter un nuancier à partir d’une palette de couleurs externe, choisissez Ajouter des échantillons dans le
menu Options du panneau Nuancier, accédez ensuite au dossier, puis sélectionnez un fichier de palette de couleurs
au format ACT ou GIF.
Ajout ou remplacement d’une couleur dans le panneau Nuancier
Remarque : la commande Edition > Annuler ne permet pas d’annuler l’ajout ou la suppression d’un nuancier.
1 Dans le panneau Outils, sélectionnez l’outil Pipette.
2 Dans le menu contextuel Echantillon de l’inspecteur des propriétés, sélectionnez le nombre de pixels à
échantillonner : 1 pixel, Moyenne 3x3 ou Moyenne 5x5.
3 Cliquez n’importe où dans une fenêtre de document Fireworks ouverte pour prélever une couleur.
• Pour ajouter une couleur, placez le bout du pointeur de la pipette dans l’espace libre après le dernier échantillon
dans le panneau Nuancier.
• Pour remplacer une nuance (couleur de nuancier), placez le pointeur dessus dans le panneau Nuancier tout en
maintenant la touche Maj enfoncée.
4 Cliquez pour ajouter ou remplacer la nuance.
Lorsque vous sélectionnez Accrocher à la couleur sécurisée pour le Web dans le menu Options de la fenêtre
contextuelle pour la sélection des couleurs, toutes les couleurs non sécurisées pour le Web prélevées avec le pointeur
de la pipette prennent la valeur de la couleur sécurisée pour le Web la plus proche.
Suppression d’une nuance
❖ Pour supprimer une nuance, maintenez la touche Ctrl (Windows) ou Cmde (Mac OS) enfoncée, placez le pointeur
sur une nuance, puis cliquez dessus.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 113
Application de couleurs, de contours et de fonds
Effacement ou tri de nuances
• Pour effacer la totalité du panneau des nuances, sélectionnez l’option Effacer le nuancier dans le menu Options du
panneau Nuancier.
• Pour trier le nuancier par valeur colorimétrique, sélectionnez l’option Trier par couleur dans le menu Options du
panneau Nuancier.
Création et modification de couleurs dans le Mélangeur
Pour afficher et modifier les couleurs de contour et de fond actives, utilisez le Mélangeur (Fenêtre > Mélangeur).
Par défaut, le Mélangeur identifie les couleurs RVB comme étant hexadécimales ; il affiche donc des valeurs
chromatiques hexadécimales pour les composantes de couleur rouge (R), vert (V) et bleu (B). Les valeurs RVB
hexadécimales sont comprises entre 00 et FF.
Modèle de couleurs
Mode d’expression de couleur
RVB
Valeurs de rouge, de vert et de bleu, où chacun des composants correspond à une valeur comprise
entre 0 et 255. 0-0-0 correspond au noir, et 255-255-255 au blanc.
Hexadécimal
Valeurs RVB de rouge, de vert et de bleu, où chacun de ces composants a une valeur hexadécimale
comprise entre 00 et FF. 00-00-00 correspond au noir, et FF–FF–FF au blanc.
TSL
Valeurs de teinte, de saturation et de luminosité. Les valeurs de teinte peuvent aller de 0 à
360 degrés ; les valeurs de saturation et de luminosité peuvent aller de 0 % à 100 %.
CMJ
Valeurs de cyan, de magenta et de jaune, où chacun des composants a une valeur comprise entre 0
et 255. 0-0-0 correspond au blanc, et 255-255-255 au noir.
Niveaux de gris
Pourcentage de noir. L’unique composante Noir (N) correspond à une valeur comprise entre 0
et 100 %, 0 correspondant au blanc, et 100 au noir. Les valeurs intermédiaires correspondent à des
nuances de gris.
Dans le menu Options du Mélangeur, vous pouvez sélectionner d’autres modèles de couleurs. Les valeurs des
composantes de la couleur actuelle changent avec chaque nouveau modèle.
Bien que CMJ soit une option de modèle de couleurs, les graphiques exportés directement depuis Fireworks ne donnent
pas de très bons résultats à l’impression. Pour redéfinir les graphiques Fireworks exportés en vue de leur impression,
importez-les dans Adobe Illustrator, Adobe Photoshop ou Adobe FreeHand. Pour plus d’informations, reportez-vous à la
documentation fournie avec ces applications.
Application d’une couleur à un objet vectoriel sélectionné
1 Dans le Mélangeur, cliquez sur l’icône située à côté de la case Couleur de contour ou Couleur de fond.
2 Positionnez le pointeur sur la barre de couleurs, puis cliquez dessus.
Prélèvement d’une couleur
1 Afin d’éviter que des objets ne soient malencontreusement modifiés lors du mélange des couleurs, désélectionnez
tous les objets.
2 Cliquez sur la case Couleur de contour ou Couleur de fond.
3 Dans le menu d’options du Mélangeur, sélectionnez un modèle de couleurs.
4 Pour définir des valeurs chromatiques, entrez-les dans les différentes zones de texte des composantes de couleurs,
utilisez les curseurs contextuels ou prélevez une couleur dans la barre de couleurs.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 114
Application de couleurs, de contours et de fonds
Navigation dans les modèles de couleurs
❖ Tout en maintenant la touche Maj enfoncée, cliquez sur la barre de couleurs au bas du Mélangeur.
Remarque : les options du Mélangeur ne sont pas changées.
Création de couleurs à l’aide des sélecteurs de couleurs système
1 Cliquez sur une case de couleur.
2 Dans un menu Options de la fenêtre contextuelle pour la sélection des couleurs, sélectionnez le système Windows
ou Mac.
3 Sélectionnez une couleur parmi les couleurs système.
Gestion des couleurs avec le panneau Palette de couleurs
❖ Pour ouvrir le panneau Palette de couleurs, choisissez Fenêtre > Autres > Palette de couleurs.
Recherche de la couleur Web sécurisée la plus proche de chaque valeur chromatique
1 Cliquez sur la case de couleur de fond dans l’onglet Sélecteur du panneau Palette de couleurs.
2 Pour échantillonner une couleur, utilisez le pointeur de la pipette pour cliquer dans un document Fireworks, à
l’emplacement de votre choix.
La couleur Web sécurisée la plus proche s’affiche sous la couleur de fond active.
Remarque : vous pouvez également utiliser l’onglet Sélecteur pour convertir des couleurs dans différents modèles de
couleurs (RVB et CMJN, par exemple) ou pour sélectionner le mode d’affichage des couleurs.
Création et permutation de palettes de couleurs
1 Sélectionnez l’onglet Mélangeurs dans le panneau Palette de couleurs.
2 A l’aide des quatre cases de couleur de fond situées en bas du panneau, définissez les quatre couleurs de base à
utiliser pour le document.
3 Au besoin, utilisez la roue chromatique TSL, en bas à droite du panneau, pour modifier la palette.
4 Pour essayer différentes palettes dans le document, cliquez sur Palette 2, sur le côté gauche du panneau, puis
sélectionnez les couleurs de base de cette seconde palette.
5 Pour alterner entre les deux palettes, cliquez sur les deux icônes Remplacer la couleur.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 115
Application de couleurs, de contours et de fonds
Remarque : la fonction de permutation des palettes permet de remplacer les fonds, les contours et les dégradés dans
des éléments vectoriels, mais pas dans des éléments bitmap ni des symboles graphiques.
Exportation d’une palette
1 Sélectionnez la palette à exporter (Palette 1 ou Palette 2).
2 Cliquez sur l’icône Exporter comme fichier bitmap pour exporter la palette sous forme de fichier bitmap, ou cliquez
sur l’icône Exporter comme table de couleurs pour l’exporter sous forme de fichier ACT.
Création d’une série de dégradés de couleurs
1 Sélectionnez l’onglet Mélangeur dans le panneau Palette de couleurs.
2 À l’aide des quatre cases de couleur de fond situées en bas du panneau, définissez la couleur de début et la couleur
de fin.
3 Pour sélectionnez le nombre d’étapes composant la série, utilisez le curseur contextuel Etapes.
Remarque : pour afficher la valeur hexadécimale de la couleur, placez le pointeur sur une nuance de couleur.
Création d’une palette partagée
Si vous modifiez plusieurs images comprenant une palette de couleurs restreinte, vous pouvez exporter une palette
comprenant ces couleurs dans ces images. Pour créer une palette de couleurs partagée, toutes les images doivent
figurer dans le même dossier.
1 Sélectionnez Commandes > Web > Créer palette partagée.
2 Indiquez le nombre maximal de couleurs à inclure dans la palette de couleurs partagée.
3 Cliquez sur Parcourir pour indiquer le dossier contenant les images, puis cliquez sur OK.
Sélection de couleurs dans une fenêtre contextuelle pour la sélection des
couleurs
Lorsque vous cliquez sur une case de couleur, une fenêtre contextuelle pour la sélection des couleurs semblable au
panneau Nuancier s’affiche.
Sélection d’une couleur pour une case de couleur
1 Cliquez sur une case de couleur.
2 Procédez de l’une des manières suivantes :
• Pour appliquer une nuance à la case de couleur, cliquez sur une nuance.
• Pour appliquer la couleur à la case de couleur, cliquez avec le pointeur de la pipette sur l’une des couleurs
affichées à l’écran.
• Pour rendre un contour ou un fond transparent, cliquez sur le bouton Transparent dans la fenêtre contextuelle.
Affichage du groupe de nuances actif dans le panneau Nuancier
❖ Dans le menu Options de la fenêtre contextuelle pour la sélection des couleurs, sélectionnez le panneau Nuancier.
Affichage d’un groupe de nuances différent dans la fenêtre contextuelle pour la sélection
des couleurs
❖ Dans le menu Option de la fenêtre contextuelle pour la sélection des couleurs, sélectionnez un groupe de nuances.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 116
Application de couleurs, de contours et de fonds
Remarque : la sélection d’un groupe de nuances n’affecte pas le panneau Nuancier.
Echantillonnage de couleurs à partir d’une fenêtre contextuelle pour la
sélection des couleurs
Lorsqu’une fenêtre contextuelle pour la sélection des couleurs est ouverte, le pointeur se transforme en pipette spéciale
permettant d’échantillonner des couleurs depuis quasiment tous les endroits de l’écran. Cette opération s’appelle
l’échantillonnage.
1 Cliquez sur une case de couleur.
2 Cliquez n’importe où dans l’espace de travail Fireworks pour sélectionner et appliquer la couleur pour la case de
couleur.
Tout en maintenant la touche Maj enfoncée, cliquez sur une couleur sécurisée pour le Web pour la sélectionner.
Identification des valeurs chromatiques
Pour identifier des valeurs chromatiques, vous pouvez également utiliser le panneau Info en plus du Mélangeur et de
la fenêtre contextuelle pour la sélection des couleurs.
Affichage de la valeur chromatique d’une partie de document
❖ Procédez de l’une des manières suivantes :
• Utilisez le Mélangeur ou la fenêtre contextuelle pour la sélection des couleurs.
• Utilisez le panneau Info. Cliquez sur l’outil Pipette, choisissez ensuite Fenêtre > Info, puis déplacez le pointeur
sur l’objet contenant la couleur à afficher (Windows uniquement).
Affichage de la valeur chromatique de la couleur de contour ou de fond active
❖ Procédez de l’une des manières suivantes :
• Choisissez Fenêtre > Mélangeur pour les valeurs RVB ou les autres valeurs de couleur système.
• Cliquez sur une case de couleur pour ouvrir la fenêtre contextuelle pour la sélection des couleurs et afficher la
valeur hexadécimale dans la partie supérieure de la fenêtre.
• Placez le pointeur sur une case de couleur, puis lisez l’info-bulle (Windows uniquement).
Remarque : par défaut, les valeurs RVB sont visibles dans le panneau Info et dans le Mélangeur. La valeur
hexadécimale correspondante apparaît dans la fenêtre contextuelle pour la sélection des couleurs.
Affichage des informations chromatiques relatives à un autre modèle de couleurs
❖ Dans le menu Options du panneau Info ou du Mélangeur, sélectionnez un autre modèle de couleurs.
Simulation des couleurs sécurisées pour le Web et de la transparence
par tramage
Si vous utilisez une couleur non sécurisée pour le Web, veillez à appliquer un tramage Web. Vous pourrez ainsi
simuler une couleur sécurisée pour le Web qui ne varie pas ni ne se juxtapose à une autre lors de son exportation avec
une palette de couleurs sécurisées pour le Web.
Pour créer un aspect transparent, appliquez l’option de tramage Transparent. Dans les objets transparents, l’arrièreplan de la page Web laisse transparaître tous les autres pixels du fond tramé Web transparent.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 117
Application de couleurs, de contours et de fonds
Remarque : notez que le tramage Web peut augmenter la taille du fichier.
Deux couleurs sécurisées pour le Web créent un fond tramé Web.
Application d’un fond tramé Web
1 Sélectionnez un objet contenant une couleur non sécurisée pour le Web.
2 Dans le menu contextuel Options de fond de l’inspecteur des propriétés, cliquez sur Tramage Web.
3 Dans l’inspecteur des propriétés, cliquez sur la case Couleur de fond pour afficher la fenêtre contextuelle Options
de fond.
La couleur non sécurisée pour le Web de l’objet apparaît dans le sélecteur Couleur source. Les deux couleurs de
tramage sécurisées pour le Web s’affichent dans les cases de couleur de droite. Le tramage Web est appliqué à l’objet
et devient la couleur de fond active.
Remarque : la définition du bord d’un fond tramé Web sur Lissage ou Contour progressif génère des couleurs non
sécurisées pour le Web.
4 Cliquez hors de la fenêtre contextuelle pour la fermer.
Application d’un fond tramé transparent
1 Sélectionnez l’objet auquel vous voulez appliquer un fond transparent.
2 Dans le menu contextuel Options de fond de l’inspecteur des propriétés, cliquez sur Tramage Web.
3 Dans l’inspecteur des propriétés, cliquez sur la case Couleur de fond pour afficher la fenêtre contextuelle Options
de fond.
4 Sélectionnez l’option Transparent.
L’objet devient semi-opaque ou transparent sur la zone de travail.
5 Cliquez hors de la fenêtre contextuelle pour la fermer.
6 Exportez l’objet au format GIF ou PNG après avoir sélectionné l’option Transparence d’index ou Transparence
alpha. Pour plus d’informations, reportez-vous à la section « Transformation de zones en zones transparentes » à
la page 248.
Remarque : les navigateurs ne prennent pas tous en charge les fichiers PNG.
Enregistrement de nuanciers
Enregistrement d’un groupe de nuances
❖ Pour enregistrer une sélection de couleurs échantillonnées, ajoutez les couleurs, choisissez l’option Enregistrer le
nuancier dans le menu Options du panneau Nuancier, puis sélectionnez un nom de fichier et un répertoire.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 118
Application de couleurs, de contours et de fonds
Enregistrement de nuanciers au format ASE
Les fichiers ASE contiennent des couleurs qu’il est possible d’échanger entre des applications comme Photoshop,
Illustrator et InDesign. Grâce à eux, vous pouvez partager les couleurs que vous avez créées dans une application avec
les autres applications.
Fireworks prend en charge les espaces colorimétriques RVB et CMJN. Les nuanciers appartenant aux autres espaces
colorimétriques ne sont pas pris en compte. Les nuanciers CMJN sont convertis en valeurs RVB, puis importés dans
Fireworks. Aucune information concernant cette conversion n’est toutefois affichée explicitement.
Enregistrement de nuanciers au format ASE
1 Ouvrez l’ensemble de nuances à enregistrer dans le panneau Nuanciers.
2 Dans les options de ce panneau, sélectionnez Enregistrer le nuancier.
3 Entrez le nom du fichier de nuancier et enregistrez celui-ci.
Importation de nuanciers à partir d’autres applications CS
1 Ouvrez l’ensemble de nuances dans le panneau Nuanciers.
2 Dans les options de ce panneau, sélectionnez Ajouter des échantillons.
Panneau Kuler
A propos du panneau Kuler
Le panneau Kuler™ permet d'accéder à des groupes de couleurs et à des thèmes créés par la communauté de
concepteurs en ligne. Vous pouvez l'utiliser pour parcourir des milliers de thèmes sur Kuler™ et pour télécharger ceux
de votre choix afin de les modifier ou de les inclure dans vos projets. Vous pouvez également utiliser le panneau Kuler
pour créer et enregistrer des thèmes. Il vous suffit ensuite de les télécharger pour les partager avec la
communauté Kuler.
Le panneau Kuler est disponible dans Adobe Photoshop® CS5, Adobe Flash® Professional CS5, Adobe InDesign® CS5,
Adobe Illustrator® CS5 et Adobe Fireworks® CS5. Le panneau n’est pas disponible dans les versions françaises de ces
produits.
Une vidéo consacrée au panneau Kuler est disponible à l’adresse suivante : www.adobe.com/go/lrvid4088_xp_fr.
Pour consulter un article sur Kuler et des conseils sur les couleurs, consultez le blog de Veerle Pieters à l'adresse
http://veerle.duoh.com/blog/comments/adobe_kuler_update_and_color_tips/ (en anglais).
Consultation des thèmes
Il convient de disposer d’une connexion Internet pour parcourir les thèmes en ligne.
Recherche de thèmes
1 Choisissez la commande Fenêtre > Extensions > Kuler, puis sélectionnez le panneau Parcourir.
2 Effectuez l'une des opérations suivantes :
• Dans la zone de recherche, entrez le nom d'un thème, d'une balise ou d'un concepteur.
Remarque : utilisez uniquement des caractères alphanumériques (Aa-Zz, 0-9) lors d’une recherche.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 119
Application de couleurs, de contours et de fonds
• Vous pouvez filtrer les résultats obtenus : il vous suffit pour cela de sélectionner une option dans les menus
déroulants situés au-dessus de la liste de résultats.
Affichage d’un thème en ligne sur Kuler
1 Accédez au panneau Parcourir, puis sélectionnez un thème dans la liste des résultats de la recherche.
2 Cliquez sur le triangle situé à droite du thème et sélectionnez l’option Afficher la version en ligne dans Kuler.
Enregistrement de termes fréquemment recherchés
1 Sélectionnez l'option Personnalisé dans le premier menu déroulant du panneau Parcourir.
2 Dans la boîte de dialogue qui s’affiche, entrez les termes à rechercher et enregistrez-les.
Pour effectuer une recherche sur ces termes, sélectionnez-les dans le premier menu déroulant.
Pour supprimer une recherche enregistrée, sélectionnez l'option Personnalisé dans le menu contextuel. Effacez ensuite
les recherches de votre choix, puis cliquez sur Enregistrer.
Utilisation de thèmes
Le panneau Kuler permet de créer ou de modifier des thèmes et de les utiliser dans le cadre d'un projet.
Remarque : si vous souhaitez créer ou modifier des thèmes dans Illustrator, vous devez utiliser la boîte de dialogue
Modifier les couleurs/Redéfinir les couleurs de l'illustration plutôt que le panneau Créer. Pour plus de détails, reportezvous à l'aide d'Illustrator.
Ajout d'un thème au panneau Nuancier de votre application
1 Dans le panneau Parcourir, sélectionnez le thème que vous souhaitez utiliser.
2 Cliquez sur le triangle situé à droite du thème et sélectionnez l'option Ajouter au nuancier.
Vous pouvez également ajouter un thème à partir du panneau Créer à l'aide du bouton Ajouter le thème sélectionné
au nuancier.
Modification d'un thème
1 Accédez au panneau Parcourir, recherchez le thème que vous souhaitez modifier dans la liste des résultats, puis
cliquez deux fois dessus. Le thème s'ouvre dans le panneau Créer.
2 Dans le panneau Créer, modifiez le thème à l'aide des outils mis à votre disposition. Pour plus d'informations,
reportez-vous à la rubrique Outils du panneau Créer ci-dessous.
3 Effectuez l'une des opérations suivantes :
• Enregistrez votre thème à l'aide du bouton Enregistrer le thème.
• Ajoutez le thème au panneau Nuancier de votre application à l'aide du bouton Ajouter au nuancier situé au bas
du panneau.
• Téléchargez le thème vers le service Kuler à l'aide du bouton de téléchargement situé en bas du panneau.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 120
Application de couleurs, de contours et de fonds
Outils du panneau Créer
Le panneau Créer propose une gamme d'outils permettant de créer ou de modifier des thèmes.
• Choisissez une règle d'harmonie dans le menu déroulant de sélection d'une règle. La règle d’harmonie utilise la
couleur de base pour la génération des couleurs du groupe de couleurs. Par exemple, si vous choisissez une couleur
de base bleue et la règle d’harmonie complémentaire, un groupe de couleurs est créé avec la couleur de base, le bleu,
et sa couleur complémentaire, le rouge.
• Sélectionnez la règle Personnalisée pour créer un thème sur la base de réglages personnalisés.
• Utilisez la roue chromatique pour gérer les couleurs. A mesure que vous effectuez des modifications, les couleurs
du groupe de couleurs sont générées en fonction de la règle d'harmonie sélectionnée.
•
Déplacez le curseur de réglage Luminosité situé en regard de la roue pour ajuster la luminosité des couleurs.
• Faites glisser le marqueur de la couleur de base (c'est-à-dire le plus grand des marqueurs, celui à double cercle) sur
la roue pour définir la couleur de base. Vous pouvez également définir la couleur de base à l'aide des curseurs de
réglage des couleurs situés au bas de la boîte de dialogue.
• Définissez l'une des quatre autres couleurs du groupe comme couleur de base. Sélectionnez la nuance de la couleur
et cliquez sur le bouton en forme de cible situé en dessous du groupe de couleurs.
• Définissez la couleur de premier plan/d'arrière-plan ou de contour/de fond comme couleur de base. Cliquez sur
l'un des deux premiers boutons situés en dessous du groupe de couleurs.
• Pour supprimer une couleur du groupe de couleurs, sélectionnez la nuance de la couleur, puis cliquez sur le bouton
Supprimer la couleur situé en dessous du groupe de couleurs. Pour ajouter une couleur, sélectionnez une case de
couleur vide, puis cliquez sur le bouton Ajouter une couleur.
• Pour essayer différents effets de couleur, sélectionnez une nouvelle règle d'harmonie et déplacez les marqueurs de
la roue chromatique.
• Cliquez deux fois sur l'une des nuances du groupe de couleurs pour définir la couleur active (premier plan/arrièreplan ou contour/fond) dans votre application. S'il n'est pas possible d'activer ou de sélectionner une couleur dans
l'application utilisée, le panneau Kuler définit la couleur de premier plan ou la couleur de fond selon le cas.
Application de contours et de fonds
Application et modification de contours
Vous pouvez appliquer avec précision chacun de vos traits de pinceau, en contrôlant notamment l’encrage, la taille et
forme de la pointe, la texture, les effets de bord et l’aspect. Vous pouvez modifier les attributs de contour avant ou après
la création d’objets. L’icône de crayon indique le sélecteur Couleur de trait dans le panneau Outils, l’Inspecteur des
propriétés et le Mélangeur.
Les paramètres, catégories et noms de contour de l’objet sélectionné sont préservés d’un document à l’autre et d’une
session d’application à l’autre. Lorsque vous créez un objet dans un nouveau document, dans la session en cours ou
après avoir rouvert Fireworks, les derniers paramètres de contour sélectionnés sont utilisés. Les paramètres sont
conservés d’une session à l’autre.
Pour appliquer un contour à un objet bitmap, utilisez les effets dynamiques Photoshop, puis sélectionnez
l’attribut Contour (voir la section « Application de filtres dynamiques » à la page 130).
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 121
Application de couleurs, de contours et de fonds
Modification des attributs de contour des objets sélectionnés
Procédez de l’une des manières suivantes :
• Dans le menu contextuel Catégorie de contour de l’inspecteur des propriétés, sélectionnez un attribut de contour.
• Pour afficher davantage d’options, sélectionnez Options de contour dans le menu contextuel Catégorie de contour,
puis choisissez un attribut de contour.
Modification de la couleur de contour d’un outil de dessin
1 Appuyez sur les touches Ctrl+D (Windows) ou Cmde+D (Mac OS) pour désélectionner tous les objets.
2 Dans le panneau Outils, sélectionnez un outil de dessin.
3 Dans le panneau Outils ou dans l’inspecteur des propriétés, cliquez sur la case Couleur de contour.
4 Sélectionnez une couleur, puis faites glisser le pointeur pour dessiner l’objet.
Remarque : un nouveau contour utilise la couleur actuellement affichée dans la case Couleur de contour.
Suppression d’attributs de contour d’un objet sélectionné
Procédez de l’une des manières suivantes :
• Dans le menu contextuel Catégorie de contour de l’inspecteur des propriétés ou dans la fenêtre contextuelle
Options de contour, cliquez sur Aucune.
•
Activez le sélecteur Couleur de contour dans le panneau Outils ou l’inspecteur des propriétés, puis cliquez sur le
bouton Transparent .
Alignement du contour
Utilisez les options d’alignement du contour de l’inspecteur des propriétés (Aligner le contour vers le centre, Aligner
le contour vers l’intérieur et Aligner le contour vers l’extérieur). Les icônes d’alignement de l’inspecteur des propriétés
permettent un accès plus rapide à ces options.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 122
Application de couleurs, de contours et de fonds
Création et modification de contours personnalisés
Utilisez la boîte de dialogue Modifier le contour pour changer des caractéristiques de contour spécifiques.
Ouverture de la boîte de dialogue Modifier le contour
Procédez de l’une des manières suivantes :
1 Cliquez sur Modifier le contour dans l'inspecteur de propriétés.
2 Chaque onglet présente le même pinceau avec des paramètres différents. Dans l’aperçu, les paramètres actuels de
sensibilité à la pression et à la vitesse sont représentés par un contour tracé de gauche à droite qui s’effile, s’estompe
ou se transforme d’une manière ou d’une autre.
Définition des options de trait de pinceau générales
1 Dans l’onglet Options, définissez la quantité d’encre, l’espacement et le débit. Une vitesse d’écoulement élevée
produit des traits de pinceau qui s’enchaînent progressivement comme si vous utilisiez un aérographe.
2 Sélectionnez des options de trait de pinceau :
• Pour que les traits de pinceau se chevauchent et créent des contours denses, sélectionnez Repasser.
• Pour définir la texture du contour, changez l’option Texture. L’aspect de la texture est proportionnel à la valeur
définie.
• Pour définir la texture des bords, entrez une valeur dans la zone de texte Texture du bord, puis sélectionnez un
effet de bord dans le menu contextuel Effet de bord.
• Définissez le nombre de pointes du trait de pinceau. Pour plusieurs extrémités, entrez une valeur d’espacement
des pointes, puis sélectionnez la méthode de variation de couleur.
• Pour sélectionner une ligne pointillée ou discontinue, sélectionnez une option dans le menu contextuel Tiret.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 123
Application de couleurs, de contours et de fonds
• Pour définir la longueur des tirets et des espaces d’une ligne pointillée, utilisez les trois ensembles de zones
d’entrée de texte Activé(e) et Désactivé(e) pour contrôler le premier, le deuxième et le troisième tiret.
3 Cliquez sur OK.
Modification de la pointe
1 Dans l’onglet Forme, sélectionnez Carrée pour obtenir une pointe carrée, ou désélectionnez cette option si vous
préférez une pointe de pinceau ronde.
2 Définissez la taille, l’aspect et l’angle de la pointe, ainsi que le lissage des bords.
3 Cliquez sur OK.
Remarque : si vous travaillez avec une tablette graphique et un stylet Wacom sensibles à la pression, Fireworks utilise
des paramètres de contour pour définir précisément les attributs de contour contrôlés par la vitesse et la pression. Vous
pouvez sélectionner l’attribut de contour à contrôler avec le crayon.
Définition de la sensibilité du contour
1 Dans l’onglet Sensibilité, sélectionnez une propriété de contour dans le menu contextuel Propriété du contour.
2 Dans les options Facteurs de variation, sélectionnez le degré auquel la sensibilité affecte la propriété de contour
actuelle.
Enregistrement/Suppression d’un contour personnalisé
Cliquez sur Enregistrer le contour personnalisé ou Supprimer le contour personnalisé dans l’inspecteur des propriétés
pour enregistrer ou supprimer un contour personnalisé.
Déplacement d’un trait de pinceau à l’intérieur ou à l’extérieur d’un tracé
Contour centré, contour situé à l’intérieur et contour situé à l’extérieur
Pour déplacer des traits de pinceau de la position par défaut (centrage sur un tracé) vers un autre emplacement, utilisez
le menu contextuel Contour de la fenêtre Options de contour.
1 Dans le panneau Outils ou dans l’inspecteur des propriétés, cliquez sur la case Contour pour ouvrir la fenêtre
contextuelle de nuancier.
2 Dans la partie inférieure de cette fenêtre, sélectionnez A l’intérieur du tracé ou A l’extérieur du tracé dans le menu
contextuel.
3 (Facultatif) Sélectionnez l’option Fond sur contour.
Normalement, le contour recouvre le fond. La sélection de l’option Fond sur contour permet de dessiner un fond
sur le contour. Lorsque l’option Fond sur contour est utilisée avec un objet comportant un fond opaque, toute partie
du contour située à l’intérieur du tracé est obscurcie. Les fonds comportant un niveau de transparence risquent de
teinter les traits de pinceau à l’intérieur des tracés ou de se mélanger avec ces derniers.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 124
Application de couleurs, de contours et de fonds
Création de styles de contour
Vous pouvez modifier des caractéristiques de contour spécifiques, telles que la quantité d’encre, la forme et la pression
de la pointe, puis enregistrer le contour personnalisé en tant que style, de façon à l’utiliser de nouveau dans les autres
documents.
1 Procédez de l’une des manières suivantes :
• Activez la case Couleur de contour du panneau Outils, puis cliquez sur Options de contour.
• Dans le menu contextuel Options de contour de l’inspecteur des propriétés, cliquez sur Options de contour.
2 Modifiez les attributs de trait de pinceau.
3 Cliquez sur le bouton Enregistrer les contours personnalisés pour enregistrer les attributs de contour personnalisé
en tant que style en vue d’une utilisation ultérieure.
Création et modification de fonds unis
Créez et utilisez des fonds pour les objets vectoriels et le texte, et utilisez les outils Pot de peinture ou Dégradé pour
remplir les sélections de pixels en leur appliquant les paramètres de fond actuels.
L’icône de pot de peinture
du Mélangeur.
symbolise la case Couleur de fond du panneau Outils, de l’inspecteur des propriétés et
Modification de la couleur de fond unie des outils de dessin vectoriels et de l’outil Pot
de peinture
1 Sélectionnez un outil de dessin vectoriel ou l’outil Pot de peinture.
2 Procédez de l’une des manières suivantes :
• Appuyez sur les touches Ctrl+D (Windows) ou Cmde+D (Mac OS) pour désélectionner tous les objets, puis
cliquez sur la case Couleur de fond de l’inspecteur des propriétés pour ouvrir la fenêtre contextuelle
correspondante.
• Activez la case Couleur de fond du panneau Outils ou du Mélangeur pour ouvrir la fenêtre contextuelle pour la
sélection des couleurs.
3 Sélectionnez une couleur de fond dans le nuancier, ou utilisez le pointeur de la pipette pour échantillonner une
couleur sur l’écran.
Remarque : suite à la sélection de l’outil Texte, la case Couleur de fond adopte toujours la dernière couleur de texte
unie utilisée par cet outil.
Modification du fond uni d’un objet vectoriel sélectionné
1 Activez la case Couleur de fond de l’inspecteur des propriétés, du panneau Outils ou du Mélangeur pour ouvrir la
fenêtre contextuelle pour la sélection des couleurs.
2 Sélectionnez une nuance.
Création et application de fonds en dégradé ou à motifs
• Utilisez les fonds à motifs pour remplir un objet tracé avec un graphique bitmap.
• Utilisez les fonds en dégradé pour mélanger les couleurs et obtenir ainsi divers effets. Les fonds n’appartenant pas
aux catégories Aucun, Uni, Motif et Tramage Web sont des fonds en dégradé.
Remarque : les nouveaux fonds utilisent la couleur actuellement affichée dans la case Couleur de fond du
panneau Outils.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 125
Application de couleurs, de contours et de fonds
Application d’un fond à motifs à un objet sélectionné
1 Procédez de l’une des manières suivantes :
• Dans le menu contextuel Options de fond de l’inspecteur des propriétés, cliquez sur Motif.
• Activez la case Couleur de fond du panneau Outils, cliquez ensuite sur Options de fond, puis sélectionnez Motif
dans le menu contextuel Options de fond.
2 Dans le menu contextuel Nom de motif, sélectionnez un motif.
Création d’un fond à motifs personnalisé à partir d’un fichier externe
Définissez un fichier bitmap en tant que nouveau motif, en utilisant comme motifs les formats suivants : PNG, GIF,
JPEG, BMP, TIFF et PICT (Mac OS uniquement). Lorsqu’un motif est une image transparente 32 bits, la transparence
affecte le fond lorsqu’il est utilisé dans Fireworks. Les images qui ne sont pas de 32 bits deviennent opaques.
1 Affichez les propriétés de l’objet vectoriel dans l’inspecteur des propriétés, puis sélectionnez Motif dans le menu
contextuel Options de fond.
2 Activez la case Couleur de fond, puis sélectionnez Autre dans le menu contextuel Nom de motif.
3 Recherchez le fichier bitmap à utiliser comme nouveau motif, puis cliquez sur Ouvrir.
Application d’un fond en dégradé à un objet sélectionné
Objets avec divers fonds en dégradé
❖ Dans le menu contextuel Options de fond de l’inspecteur des propriétés, sélectionnez un dégradé.
Modification d’un fond en dégradé
Fenêtre contextuelle Modifier le dégradé
1 Dans le menu contextuel Options de fond de l’inspecteur des propriétés, sélectionnez un fond en dégradé ou un
objet doté d’un fond en dégradé.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 126
Application de couleurs, de contours et de fonds
2 Activez la case Couleur de fond dans l’inspecteur des propriétés ou le panneau Outils pour ouvrir la fenêtre
contextuelle.
3 Effectuez l’une des opérations suivantes :
• Pour ajouter une nouvelle nuance de couleur, cliquez sur la zone située sous la gamme des dégradés.
• Pour ajouter une nuance d’opacité, cliquez sur la zone au-dessus de la rampe de couleurs dégradée.
• Pour supprimer une couleur ou une nuance d’opacité du dégradé, faites glisser la nuance hors de la fenêtre
contextuelle Modifier le dégradé.
• Pour définir ou modifier la couleur d’une nuance, cliquez dessus, puis sélectionnez une couleur.
• Pour définir ou modifier la transparence d’une nuance d’opacité, cliquez dessus, puis faites glisser le curseur vers
le pourcentage de transparence (la valeur 0 représente une transparence totale, et la valeur 100 une opacité
totale) ou entrez une valeur numérique d’opacité comprise entre 0 et 100. Ensuite, appuyez sur la touche Entrée
ou cliquez hors de la fenêtre contextuelle Modifier le dégradé.
Remarque : le damier de transparence apparaît à travers le dégradé dans les zones transparentes.
• Pour régler la transition entre les différentes couleurs d’un fond, faites glisser les nuances de couleur vers la
gauche ou vers la droite.
Création de fonds avec l’outil Dégradé
Pour remplir un objet avec un dégradé plutôt qu’une couleur unie, utilisez l’outil Dégradé. L’outil Dégradé permet de
conserver les propriétés du dernier élément utilisé.
1 Dans le panneau Outils, cliquez sur l’outil Pot de peinture, puis sélectionnez l’outil Dégradé dans le menu
contextuel.
2 Sélectionnez des attributs dans l’inspecteur des propriétés.
3 Cliquez et faites glisser le pointeur pour définir le point de départ du dégradé, ainsi que la direction et la longueur
de la zone dégradée.
Correction de l’effet de bandes dans les dégradés
Cette option permet de corriger l’effet de bandes dans les dégradés. Vous pouvez uniquement appliquer un tramage
aux objets vectoriels contenant des dégradés linéaires ou concentriques. Le tramage disparaît lorsque vous importez le
fichier dans une version antérieure de Fireworks.
1 Dessinez un objet vectoriel et remplissez-le d’un dégradé linéaire ou concentrique.
2 Dans la boîte de dialogue Options de remplissage, réglez l’option Bord sur Anticrénelé.
3 Réglez la texture sur 0 %.
4 Sélectionnez Tramage.
Transformation et distorsion des fonds
Vous pouvez déplacer, faire pivoter, incliner et modifier la largeur du dégradé ou du motif d’un objet. Lorsque vous
utilisez l’outil Pointeur ou Dégradé pour sélectionner un objet doté d’un fond en dégradé ou d’un fond à motifs, des
poignées apparaissent autour ou à côté de l’objet. Faites glisser les poignées pour régler le fond de l’objet.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 127
Application de couleurs, de contours et de fonds
Utilisez les poignées du fond pour ajuster de façon interactive un fond en dégradé ou un fond à motifs.
• Pour déplacer le fond dans un objet, faites glisser la poignée arrondie, ou utilisez l’outil Dégradé pour cliquer à un
nouvel emplacement.
• Pour régler la largeur et l’inclinaison d’un fond, faites glisser une poignée carrée.
• Pour faire pivoter le fond, faites glisser les lignes qui relient les poignées.
Pour faire pivoter un fond par incréments de 45 degrés, maintenez la touche Maj enfoncée tout en faisant glisser
les lignes.
Modification des bords des fonds
Les bords d’un fond peuvent être nets et réguliers comme ils peuvent être adoucis par un lissage ou un contour
progressif.
Par défaut, les bords sont lissés. Le lissage permet d’obtenir un subtil fondu des bords dans l’arrière-plan, afin d’adoucir
les bords dentelés observés sur les objets arrondis (les ellipses et les cercles, par exemple).
La diffusion, quant à elle, produit une fusion perceptible de part et d’autre du bord. Il adoucit le bord, créant ainsi un
effet proche de la lueur.
1 Procédez de l’une des manières suivantes :
• Cliquez dans le menu contextuel Bord de l’inspecteur des propriétés.
• Cliquez sur la case Couleur de fond dans le panneau Outils, cliquez ensuite sur Options de fond, puis sur le menu
contextuel Bord.
2 Sélectionnez une option de bord : Bord net, Lissage ou Contour progressif.
3 Pour le contour progressif, sélectionnez le nombre de pixels (compris entre 0 et 100) applicable de part et d’autre
du bord à rendre progressif. La valeur par défaut est 10. Plus ce nombre est élevé, plus le contour progressif est
marqué.
Enregistrement d’un fond en dégradé personnalisé
❖ Pour enregistrer les paramètres de dégradé actuels sous la forme d’un dégradé personnalisé à réutiliser dans
plusieurs documents, créez un style.
Suppression d’un fond d’un objet sélectionné
Procédez de l’une des manières suivantes :
• Dans le menu contextuel Options de fond de l’inspecteur des propriétés ou dans la fenêtre contextuelle Options de
fond, sélectionnez Aucune.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 128
Application de couleurs, de contours et de fonds
• Activez la case Couleur de fond, et cliquez sur le bouton Transparent. Cette option supprime uniquement les fonds unis.
Ajout d’effets 3D aux contours et aux fonds
Ajoutez des effets 3D aux contours et aux fonds en les texturant. Les textures modifient la luminosité, mais pas la teinte,
et donnent un aspect plus organique aux contours et aux fonds. Les textures produisent plus d’effet sur les contours
larges.
Utilisez les options de contour de l’inspecteur des propriétés ou de la fenêtre contextuelle Options de contour pour ajouter une texture à un trait
de pinceau.
Ajout d’une texture à un contour ou à un fond
1 Procédez de l’une des manières suivantes :
• Cliquez sur le menu contextuel Texture du contour ou Texture du fond dans l’inspecteur des propriétés.
• Cliquez sur la case Couleur de contour ou Couleur de fond du panneau Outils, cliquez sur Options de contour
ou sur Options de fond, puis sur le menu contextuel Texture.
2 Procédez de l’une des manières suivantes :
• Dans le menu contextuel, sélectionnez une texture.
• Dans le menu contextuel, sélectionnez l’option Autre, puis ouvrez un fichier de texture.
Remarque : vous pouvez appliquer des textures à des fichiers aux formats suivants : PNG, GIF, JPEG, BMP, TIFF
et PICT (Mac OS uniquement).
3 Entrez un pourcentage compris entre 0 (intensité la plus faible) et 100 (intensité la plus élevée) afin de définir la
profondeur de la texture.
4 (Fonds uniquement) Pour donner un effet de transparence au fond, sélectionnez Transparent.
Ajout d’une texture personnalisée
❖ Utilisez comme textures des fichiers bitmap de Fireworks et d’autres applications. Vous pouvez appliquer des
textures à partir de fichiers aux formats suivants : PNG, GIF, JPEG, BMP, TIFF et PICT (Mac OS uniquement).
Création d’une nouvelle texture à partir d’un fichier externe
1 Affichez les propriétés de l’objet vectoriel dans l’inspecteur des propriétés, puis sélectionnez Autre dans l’un des
menus contextuels Nom de la texture.
2 Accédez au fichier bitmap à utiliser comme nouvelle texture, puis cliquez sur Ouvrir.
Dernière mise à jour le 29/4/2010
Chapitre 9 : Utilisation des filtres
dynamiques
Application de filtres dynamiques
Les filtres dynamiques d’Adobe® Fireworks® (précédemment appelés effets dynamiques) sont des améliorations que
vous pouvez appliquer à des objets vectoriels, des images bitmap et du texte. Les filtres dynamiques incluent le
biseautage, l’estampage, les ombres unies, les ombres portées, les lueurs, la correction colorimétrique, l’atténuation et
l’accentuation. Vous pouvez appliquer des filtres dynamiques à des objets sélectionnés directement dans l’inspecteur
des propriétés.
A propos des filtres dynamiques
Fireworks met à jour les filtres dynamiques lorsque vous modifiez des objets auxquels ils sont appliqués. Après avoir
appliqué un filtre dynamique, vous pouvez changer ses options à tout moment ou changer l’ordre des filtres pour tester
un filtre combiné. Vous pouvez activer ou désactiver des filtres dynamiques ou les supprimer dans l’inspecteur des
propriétés. Lorsque vous supprimez un filtre, l’objet ou l’image reprend son aspect précédent.
Menu contextuel Filtres dynamiques dans l’inspecteur des propriétés
• Certains filtres (Niveaux automatiques, Flou gaussien ou Accentuation par exemple), qui étaient des filtres ou
modules externes irréversibles, sont désormais disponibles en tant que filtres dynamiques Fireworks.
• Vous pouvez ajouter des modules externes tiers à utiliser comme filtres dynamiques dans Fireworks ou utiliser ces
filtres de manière traditionnelle depuis le menu Filtres.
• Lorsque l’inspecteur des propriétés est affiché à mi-hauteur, cliquez sur Editer les filtres ou sur Ajouter des filtres
pour afficher le menu contextuel Filtres dynamiques.
Remarque : les nouveaux fonds utilisent la couleur actuellement affichée dans la case Couleur de fond du
panneau Outils.
• Pour personnaliser des filtres dynamiques, essayez plusieurs paramètres jusqu’à obtenir le résultat souhaité.
129
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 130
Utilisation des filtres dynamiques
C
A
D
E
B
Fenêtre du menu contextuel Biseau intérieur
A. Largeur du biseau B. Biseau prédéfini de bouton C. Contraste D. Adoucissement E. Angle du biseau
Application de filtres dynamiques
Application d’un filtre dynamique aux objets sélectionnés
1 Cliquez sur l’icône plus (+) en regard de l’étiquette Filtres dans l’inspecteur des propriétés, puis choisissez un filtre
dans le menu contextuel Ajouter des filtres dynamiques.
Le filtre est ajouté à la liste Filtres dynamiques pour l’objet sélectionné.
Pour appliquer un filtre dynamique de façon à ce qu’il n’affecte qu’une sélection de pixels dans une image, coupez
et collez la sélection au lieu de créer une image bitmap, sélectionnez-la, puis appliquez le filtre dynamique.
2 Si un menu contextuel ou une boîte de dialogue apparaît, entrez les paramètres du filtre, puis procédez de l’une des
manières suivantes :
• Si le filtre dynamique a une boîte de dialogue, cliquez sur OK.
• Si le filtre dynamique comporte un menu contextuel, appuyez sur la touche Entrée ou cliquez n’importe où dans
l’espace de travail.
3 Répétez les étapes 1 et 2 pour appliquer d’autres filtres dynamiques.
Remarque : l’ordre d’application des filtres dynamiques affecte l’ensemble du filtre. Faites glisser les filtres dynamiques
pour en modifier l’ordre d’empilage.
Activation ou désactivation d’un filtre dynamique appliqué à un objet
❖ Cochez la case située en regard du filtre dans la liste Filtres dans l’inspecteur des propriétés.
Activation ou désactivation de tous les filtres dynamiques appliqués à un objet
❖ Cliquez sur l’icône plus (+) en regard de l’étiquette Filtres dans l’inspecteur des propriétés, puis choisissez
Options > Tous actifs ou Options > Tous inactifs dans le menu contextuel.
Enregistrement d’effets appliqués
❖ Après avoir ajouté ou modifié un filtre dynamique, cliquez en dehors du menu contextuel de paramètres ou
appuyez sur la touche Entrée.
Application de bords biseautés
Un bord biseauté donne un effet de relief à un objet.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 131
Utilisation des filtres dynamiques
Rectangle avec biseau interne et biseau externe
1 Cliquez sur l’icône plus (+) en regard de l’étiquette Filtres dans l’inspecteur des propriétés, puis choisissez une
option de biseau dans le menu contextuel.
2 Dans le menu contextuel, modifiez les paramètres du filtre.
Estampage
Le filtre dynamique Estampage donne l’impression qu’une image, un objet ou un texte est rapporté ou en relief sur la
zone de travail.
Objet avec estampe rapportée et en relief
1 Cliquez sur l’icône plus (+) en regard de l’étiquette Filtres dans l’inspecteur des propriétés, puis choisissez une
option d’estampage dans le menu contextuel.
2 Modifiez les paramètres du filtre.
Si vous voulez que l’objet d’origine s’affiche dans la zone estampée, sélectionnez Afficher l’objet.
Remarque : par soucis de rétrocompatibilité avec les documents plus anciens, l’option Afficher l’objet est désactivée
pour les objets auxquels des filtres dynamiques d’estampage sont appliqués.
Application d’ombres et de lueurs
Choisissez parmi une sélection d’ombres, puis indiquez l’angle de l’ombre pour simuler un effet de lumière sur l’objet.
Filtres Ombre portée, Ombre interne et Lueur
Paramètres des filtres pour les ombres
Les options disponibles varient selon le type d’ombre choisi.
• Faites glisser le curseur Angle pour définir la direction de l’ombre.
• Faites glisser le curseur Distance pour définir la distance entre l’ombre et l’objet.
• Sélectionnez l’option Couleur unie pour appliquer une couleur unie à l’ombre.
• Pour définir la couleur de l’ombre, ouvrez le menu contextuel de sélection des couleurs, puis choisissez la couleur
de l’ombre.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 132
Utilisation des filtres dynamiques
• Faites glisser le curseur Opacité pour définir le pourcentage de transparence de l’ombre.
• Faites glisser le curseur Adoucissement pour définir la netteté de l’ombre.
• Cliquez sur l’option Aperçu pour obtenir un aperçu de l’ombre.
• Cochez la case Masquage pour masquer l’objet et afficher uniquement son ombre.
Application d’une ombre unie
1 Dans l’inspecteur des propriétés, cliquez sur l’icône plus (+) en regard de l’étiquette Filtres, pointez le curseur sur
Ombre et lueur, puis cliquez sur Ombre unie.
2 Dans la boîte de dialogue Ombre unie, réglez les paramètres du filtre.
3 Lorsque vous avez terminé, cliquez sur OK.
Application d’une ombre portée ou d’une ombre interne
1 Cliquez sur l’icône plus (+) en regard de l’étiquette Filtres dans l’inspecteur des propriétés, puis choisissez une
option d’ombre dans le menu contextuel.
• Ombre et lueur > Ombre portée.
• Ombre et lueur > Ombre interne.
2 Dans le menu contextuel, modifiez les paramètres du filtre.
Application d’une lueur
1 Cliquez sur le bouton Ajouter des filtres dynamiques dans l’inspecteur des propriétés, puis choisissez Ombre et
lueur > Lueur.
2 Dans le menu contextuel, modifiez les paramètres du filtre :
• Cliquez sur la case de couleur pour définir la couleur de la lueur.
• Faites glisser le curseur Largeur pour définir le rayonnement de la lueur.
• Faites glisser le curseur Opacité pour définir le pourcentage de transparence de la lueur.
• Faites glisser le curseur Adoucissement pour définir la netteté de la lueur.
• Faites glisser le curseur Décalage pour définir la distance qui sépare la lueur de l’objet.
Application de filtres et de modules externes Photoshop comme des filtres
dynamiques
Remarque : le menu Xtras de certaines versions antérieures de Fireworks a été renommé le menu Filtres dans Fireworks 8
et versions ultérieures. Les extensions Xtra de Fireworks sont maintenant appelées des filtres.
L’application des modules externes et filtres intégrés du menu contextuel Ajouter des filtres comme des filtres
dynamiques permet de les modifier ou de les supprimer d’un objet.
Utilisez le menu Filtres pour appliquer des filtres et des modules externes Adobe Photoshop® uniquement si vous êtes
certain de ne pas devoir modifier ou supprimer le filtre. Vous ne pouvez supprimer un filtre que si la commande
Annuler est disponible.
Installation et application des modules externes Photoshop
1 Dans l’inspecteur des propriétés, cliquez sur le bouton Ajouter des filtres, puis choisissez Options > Rechercher les
modules externes.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 133
Utilisation des filtres dynamiques
2 Ouvrez le dossier dans lequel sont installés les modules externes Photoshop, puis cliquez sur OK.
3 Relancez Fireworks pour charger les modules externes.
Remarque : si vous déplacez les modules externes vers un autre dossier, recommencez la procédure ou choisissez la
commande Edition > Préférences, puis cliquez sur l’onglet Modules externes pour changer le chemin des modules
externes. Relancez ensuite Fireworks.
4 Pour appliquer le module externe Photoshop à un objet sélectionné, dans l’inspecteur des propriétés, cliquez sur
l’icône plus (+) en regard de l’étiquette Filtres, puis sélectionnez un filtre dans le sous-menu Options.
Application d’effets de calques Photoshop
Remarque : si vous importez un fichier PSD, vous pouvez également modifier les effets de calques qui existent déjà dans
ce fichier.
1 Dans l’inspecteur des propriétés, cliquez sur le bouton Ajouter des filtres, puis sélectionnez Effets dynamiques
Photoshop.
2 Dans le volet gauche, sélectionnez l’un des effets, puis modifiez les paramètres dans le volet droit. Vous pouvez
sélectionner plusieurs effets à la fois.
Application de filtres à des objets associés
Lorsque vous appliquez un filtre à un groupe, il est appliqué à tous les objets du groupe. Si les objets sont dissociés, ils
retrouvent leurs paramètres de filtre d’origine.
Pour appliquer isolément un filtre à un objet d’un groupe, sélectionnez uniquement cet objet à l’aide de l’outil Soussélection.
Modification et personnalisation des filtres dynamiques
Modification des paramètres de filtre
1 Dans l’inspecteur des propriétés, cliquez sur le bouton d’information situé en regard du filtre à modifier.
2 Réglez les paramètres du filtre.
Les filtres que vous ne pouvez pas modifier sont grisés.
3 Cliquez hors de la fenêtre ou appuyez sur la touche Entrée.
Réorganisation ou suppression de filtres dynamiques
Réorganisation des filtres dynamiques
Vous pouvez changer l’ordre des filtres appliqués à un objet. La réorganisation des filtres modifie la séquence
d’application de ces derniers, ce qui peut entraîner des modifications du filtre combiné. Les filtres figurant en haut de
la liste sont appliqués les premiers.
En général, les filtres qui modifient l’intérieur d’un objet, tels que le filtre Biseau interne, doivent être appliqués avant
les filtres qui en changent l’extérieur. Par exemple, appliquez le filtre Biseau interne avant le filtre Biseau externe, Lueur
ou Ombre.
❖ Pour réorganiser les filtres, dans l’inspecteur des propriétés, faites glisser un filtre vers un autre emplacement dans
la liste.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 134
Utilisation des filtres dynamiques
Suppression d’un seul filtre appliqué à un objet sélectionné
❖ Sélectionnez le filtre à supprimer de la liste Filtres dans l’inspecteur des propriétés, puis cliquez sur le bouton
Supprimer les filtres dynamiques.
Suppression de tous les filtres d’un objet sélectionné
❖ Dans l’inspecteur des propriétés, cliquez sur l’icône plus (+) en regard de l’étiquette Filtres, puis choisissez Aucun
dans le menu contextuel.
Création de filtres dynamiques personnalisés
Les filtres dynamiques personnalisés sont des styles dont les options de propriété sont toutes désactivées, à l’exception
de l’option Filtre. Pour enregistrer une combinaison particulière de paramètres de filtres dynamiques, créez un filtre
dynamique personnalisé.
Création d’un filtre dynamique personnalisé à l’aide du panneau Styles
1 Appliquez des paramètres de filtre dynamique aux objets sélectionnés. Pour plus d’informations, reportez-vous à
la section « Application de filtres dynamiques » à la page 129.
2 Dans le menu Options du panneau Styles, sélectionnez Nouveau style.
3 Désélectionnez toutes les propriétés (sauf la propriété Effet) tapez un nom, puis cliquez sur OK.
Une icône de style représentant le filtre dynamique est ajoutée au panneau Styles.
Remarque : si vous sélectionnez des propriétés supplémentaires dans la boîte de dialogue Nouveau style, le style ne
figure plus dans le menu contextuel Ajouter des filtres dynamiques de l’inspecteur des propriétés, bien qu’il reste dans
le panneau Styles sous la forme d’un style type.
Application d’un filtre dynamique personnalisé aux objets sélectionnés
❖ Cliquez sur l’icône du filtre dynamique personnalisé dans le panneau Styles.
Vous pouvez renommer ou supprimer un filtre dynamique personnalisé comme tout autre style du panneau Styles.
Vous ne pouvez pas renommer ni supprimer un filtre standard Fireworks.
Enregistrement des filtres dynamiques sous forme de commandes
Pour enregistrer et réutiliser un filtre, créez une commande à partir de ce dernier. Vous pouvez utiliser cette
commande dans un traitement par lots.
1 Appliquez les filtres à l’objet.
2 Si le panneau Historique n’est pas visible, choisissez Fenêtre > Historique.
3 Tout en maintenant la touche Maj enfoncée, cliquez sur les actions à enregistrer sous la forme d’une commande.
4 Procédez de l’une des manières suivantes :
• Dans le menu Options du panneau Historique, cliquez sur Enregistrer en tant que commande.
• Cliquez sur le bouton Enregistrer situé en bas du panneau Historique.
5 Entrez un nom de commande, puis cliquez sur OK pour l’ajouter au menu Commandes.
Dernière mise à jour le 29/4/2010
Chapitre 10 : Calques, masques et fondus
Les calques divisent les documents Adobe® Fireworks® en plusieurs plans discrets, donnant l’impression que les
composants de l’illustration sont dessinés sur différentes couches de papier superposées. Un document peut être
composé de différents calques, chacun contenant de nombreux sous-calques ou objets. Les calques Fireworks sont
l’équivalent des ensembles de calques utilisés dans Adobe Photoshop®. Les calques Photoshop sont l’équivalent des
objets individuels de Fireworks.
Les masques vous permettent de cacher une partie de l’image sous-jacente. Vous pouvez, par exemple, coller une forme
elliptique en tant que masque par-dessus une photo. 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 fusion vous offrent un autre niveau de créativité. Vous pouvez créer des effets uniques en mélangeant les
couleurs d’objets qui se chevauchent. Fireworks compte plusieurs modes de fusion qui vous permettent d’obtenir les
effets souhaités.
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 zone de travail est située sous tous les calques et n’est pas un calque
en soi.
Le panneau Calques affiche l’état actuel de tous les calques de l’état actif ou de la page d’un document. Le nom du
calque actif est mis en surbrillance. L’ordre d’empilage est l’ordre selon lequel les objets apparaissent dans le document.
Il détermine la manière dont les objets d’un calque se superposent aux objets d’un autre. Fireworks place le calque le
plus récent en haut de la pile. Vous pouvez modifier l’ordre des calques et des objets à l’intérieur des calques. Vous
pouvez également créer des sous-calques et déplacer les objets qui s’y trouvent.
Le panneau Calques affiche également les masques, les commandes d’opacité et les modes de fusion.
135
UTILISATION DE FIREWORKS CS5 136
Dernière mise à jour le 29/4/2010
A
Calques, masques et fondus
D
B
C
E
F G H I
A. Développer/Réduire le calque B. Verrouiller/Déverrouiller le calque C. Afficher/Masquer le calque D. Calque actif E. Supprimer le calque
F. Nouveau calque/Dupliquer le calque G. Nouveau sous-calque H. Ajouter un masque I. Nouvelle image bitmap
Activation d’un calque
Les objets que vous tracez, collez ou importez viennent se placer par-dessus le calque actif.
❖ Procédez de l’une des manières suivantes :
• Dans le panneau Calques, cliquez sur le nom d’un calque.
• Sélectionnez un objet sur un calque.
Ajout et suppression de calques
Dans le panneau Calques, vous pouvez ajouter de nouveaux calques et sous-calques, supprimer des calques inutiles et
dupliquer des calques et des objets existants.
Ajout d’un calque
Un calque vide est inséré au-dessus du calque sélectionné et devient alors le calque actif.
❖ Procédez de l’une des manières suivantes :
• Cliquez sur le bouton Nouveau calque/Dupliquer
.
• Choisissez Edition > Insertion > Calque.
• Dans le menu Options du panneau Calques ou dans le menu contextuel, choisissez Nouveau calque ou
Nouveau sous-calque, puis cliquez sur OK.
Suppression d’un calque
Le calque au-dessus du calque supprimé devient le calque actif. Si le calque supprimé est le dernier, un nouveau calque
vide est créé.
❖ Procédez de l’une des manières suivantes :
• Faites glisser le calque jusqu’à l’icône de la corbeille
dans le panneau Calques.
• Sélectionnez le calque, puis cliquez sur l’icône de la corbeille dans le panneau Calques.
• Sélectionnez un calque, puis choisissez Supprimer le calque dans le menu Options du panneau Calques ou dans
le menu contextuel.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 137
Calques, masques et fondus
L’extension Delete Empty Layers permet de supprimer tous les calques normaux et Web vides sur l’ensemble des états
et pages du document actif. Cette extension est disponible sur
http://www.adobe.com/go/learn_fw_deleteemptylayers_fr.
Duplication d’un calque et d’objets
Un calque dupliqué contient les mêmes objets que le calque sélectionné. Les objets dupliqués conservent l’opacité et le
mode de fusion des objets d’origine. Vous pouvez modifier les objets dupliqués sans agir sur les originaux.
❖ Procédez de l’une des manières suivantes :
• Faites glisser un calque vers le bouton Nouveau calque/Dupliquer le calque.
• Dans le menu Options du panneau Calques ou dans le menu contextuel, sélectionnez un calque, puis
choisissez Dupliquer le calque. Sélectionnez ensuite le nombre de calques dupliqués à insérer, ainsi que leur
emplacement dans l’ordre d’empilage. Le calque Web est toujours le calque supérieur. C’est pourquoi l’option
En haut signifie juste en dessous du calque Web.
• Faites glisser un calque tout en maintenant la touche Alt (Windows) ou Option (Mac OS) enfoncée.
Duplication d’un objet
❖ Faites glisser un objet tout en maintenant la touche Alt (Windows) ou Option (Mac OS) enfoncée.
Développement ou réduction des calques
Vous pouvez réduire l’affichage des calques pour éviter d’encombrer le panneau Calques. Développez le calque pour
afficher ou sélectionner ses objets.
• Pour développer ou réduire un seul calque, cliquez sur le triangle situé à gauche de son nom.
• Pour développer ou réduire tous les calques, cliquez sur le triangle situé à gauche du nom d’un calque tout en
maintenant la touche Alt (Windows) ou Option (Mac OS) enfoncée.
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 d’apparition des objets sur la zone
de travail. Les objets situés en haut d’un calque s’affichent au-dessus des autres objets de ce calque sur la zone de travail.
Les objets situés sur le calque de niveau supérieur s’affichent 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 visible.
Attribution d’un nom à un calque ou un objet
1 Cliquez deux fois sur le calque ou l’objet dans le panneau Calques.
2 Entrez le nouveau nom du calque ou de l’objet, puis appuyez sur la touche Entrée.
Remarque : bien que vous ne puissiez pas renommer le calque Web, vous pouvez renommer ses sous-calques et ses
objets Web, notamment les tranches et les zones sensibles.
Déplacement d’un seul calque ou objet
❖ Faites glisser le calque ou l’objet vers son nouvel emplacement dans le panneau Calques.
UTILISATION DE FIREWORKS CS5 138
Dernière mise à jour le 29/4/2010
Calques, masques et fondus
Déplacement de tous les objets sélectionnés sur un calque
❖ Procédez de l’une des manières suivantes :
• Faites glisser le bouton radio situé en regard du nom du calque vers un autre calque.
• Cliquez une fois dans la colonne de droite du calque de destination.
Remarque : vous ne pouvez pas faire glisser un calque parent vers son calque enfant.
Protection des calques et des objets
Le verrouillage d’un objet individuel permet de le protéger en empêchant qu’il soit sélectionné ou modifié. Le
verrouillage d’un calque protège tous les objets qui le composent. Une icône de cadenas
signale un élément
verrouillé. La fonction Modification par calque protège les objets de tous les calques contre la sélection ou les
modifications intempestives, mais pas ceux du calque actif et des sous-calques. Vous pouvez également masquer des
objets et des calques pour les protéger.
Remarque : les calques et objets masqués d’un document ne sont pas exportés avec celui-ci. Les objets du calque Web
peuvent être exportés dans tous les cas, qu’ils soient masqués ou non. Pour plus d’informations sur l’exportation, reportezvous à la section « Exportation depuis l’espace de travail » à la page 253.
Verrouillage des objets et des calques
• Pour verrouiller un objet, cliquez sur le carré dans la colonne située immédiatement à gauche du nom de l’objet.
• Pour verrouiller un calque, cliquez sur le carré dans la colonne située immédiatement à gauche du nom du calque.
• Pour verrouiller plusieurs calques, faites glisser le curseur le long de la colonne de verrouillage du panneau Calques.
• Pour verrouiller ou déverrouiller tous les calques, dans le menu Options du panneau Calques ou dans le menu
contextuel, sélectionnez Tout verrouiller ou Tout déverrouiller.
Activation ou désactivation de la fonction Modification par calque
❖ Dans le menu Options du panneau Calques ou dans le menu contextuel, cliquez sur Modification par calque.
La présence d’une coche signifie que la fonction Modification par calque est activée.
Affichage ou masquage d’objets et de calques
• Pour afficher ou masquer un calque ou les objets d’un calque, cliquez sur le carré dans la colonne située la plus à
gauche du nom d’un calque ou d’un objet. L’icône en forme d’œil
indique que le calque ou l’objet est visible.
• Pour afficher ou masquer plusieurs calques ou objets, faites glisser le curseur le long de la colonne Œil du panneau
Calques.
• Pour afficher ou masquer tous les calques et objets, dans le menu Options du panneau Calques ou dans le menu
contextuel, sélectionnez Afficher tout ou Masquer tout.
Masquage ou verrouillage des autres calques
Vous pouvez masquer ou verrouiller tous les calques à l’exception du calque actif, pour modifier de façon précise un
logo ou une icône.
1 Dans le panneau Calques, sélectionnez le calque sur lequel vous souhaitez travailler.
2 Sélectionnez Commandes > Document > Masquage des autres calques ou Commandes > Document > Verrouiller
autres calques.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 139
Calques, masques et fondus
Fusion des objets dans le panneau Calques
Pour éviter d’encombrer le panneau Calques, vous pouvez fusionner des objets. Les images bitmap et les objets à
fusionner ne doivent pas nécessairement être contigus dans le panneau Calques ou se trouver sur le même calque.
La fusion vers le bas permet d’aplatir tous les objets 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 plus être modifiés séparément, et les possibilités de modification des objets vectoriels
sont perdues.
1 Dans le panneau Calques, sélectionnez l’objet à fusionner avec un objet bitmap. Tout en maintenant la touche Maj
ou Contrôle enfoncée, cliquez sur les objets pour en sélectionner plusieurs.
Vous pouvez fusionner le contenu d’un calque sélectionné avec un objet bitmap correspondant à l’objet le plus haut
dans le calque situé immédiatement sous le calque sélectionné.
2 Procédez de l’une des manières suivantes :
• Dans le menu Options du panneau Calques, cliquez sur Fusionner vers le bas.
• Choisissez Modification > Fusionner vers le bas.
• Cliquez avec le bouton droit de la souris (Windows) ou tout en maintenant la touche Ctrl enfoncée (Mac OS)
sur les objets sélectionnés sur la zone de travail, puis sélectionnez Fusionner vers le bas.
Remarque : la commande Fusionner vers le bas n’agit pas sur les tranches, les zones sensibles et les boutons.
Distribution d’objets vers les calques
Si un calque contient plusieurs objets, vous pouvez distribuer les objets vers de nouveaux calques afin d’éviter tout
encombrement. Vous créez ainsi des calques situés au même niveau que celui du calque parent. Ces calques créés
conservent également la hiérarchie des calques. La distribution des objets encombrants vers d’autres calques permet
de mieux manipuler ces objets.
1 Sélectionnez le calque comprenant les objets à distribuer.
2 Sélectionnez Commandes > Document > Répartir dans les calques.
Partage des calques
Lorsque différentes pages ou différents états se partagent un calque, la modification apportée à un objet sur un calque
se répercute sur toutes les pages ou dans tous les états. Partagez des calques si vous voulez que des objets, tels que des
éléments d’arrière-plan, s’affichent sur toutes les pages d’un site Web ou dans tous les états d’une animation.
Pour plus d'informations, voir http://www.adobe.com/go/learn_fw_usingpagesstates_fr
Remarque : vous ne pouvez pas partager des sous-calques ; pour les partager, vous devez sélectionner le calque parent.
Partage du calque sélectionné entre plusieurs états
❖ Procédez de l’une des manières suivantes :
• Dans le menu Options du panneau Calques ou dans le menu contextuel, sélectionnez Calque partagé vers les
états.
• Sélectionnez la commande Nouveau calque dans le menu Options du panneau Calques ou dans le menu
contextuel, puis choisissez l’option Partager dans tous les états.
Une icône de film s’affiche en regard du calque partagé entre plusieurs états dans le panneau Calques.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 140
Calques, masques et fondus
Partage du calque sélectionné entre plusieurs pages
❖ Dans le menu Options du panneau Calques ou dans le menu contextuel, sélectionnez Calque partagé vers pages.
Une icône de page s’affiche en regard du calque partagé entre plusieurs pages dans le panneau Calques.
Désactivation du partage de calque
1 Sélectionnez le calque partagé et désélectionnez l’option Partager dans tous les états dans le menu Options du
panneau Calques ou dans le menu contextuel.
2 Indiquez le procédé de copie des objets dans les états :
• Conservez le contenu du calque partagé uniquement dans l’état actif.
• Copiez le contenu du calque partagé dans tous les états.
Utilisation du calque Web
Le calque Web correspond au calque supérieur (celui en haut de la pile) dans chaque document. Il contient les
objets Web, tels que les tranches et les zones sensibles, qui rendent les documents Fireworks exportés interactifs.
Il est impossible de départager, supprimer, dupliquer, déplacer ou renommer le calque Web. Vous ne pouvez pas non
plus fusionner les objets du calque Web. Il est toujours partagé sur tous les états d’une page et les objets Web sont
visibles sur chaque état d’une page.
Modification du nom d’une tranche ou d’une zone sensible sur le calque Web
1 Cliquez deux fois sur la tranche ou la zone sensible dans le panneau Calques.
2 Entrez le nouveau nom, puis cliquez hors de la fenêtre ou appuyez sur la touche Entrée.
Remarque : le nouveau nom est utilisé à l’exportation de la tranche.
A propos de l’importation de calques associés Photoshop
Lorsque des fichiers Photoshop contenant des calques sont importés, chaque calque est placé en tant qu’objet séparé
dans un même calque de Fireworks. Les calques associés sont importés un par un, comme s’ils avaient été dissociés
dans Photoshop avant d’être importés dans Fireworks. L’effet de détourage des calques associés de Photoshop est
perdu lors de l’importation.
Masquage
Vous pouvez masquer ou afficher des parties d’un objet ou d’une image. Il existe différentes techniques de masquage
permettant d’obtenir de nombreux types d’effets créatifs à partir d’objets.
Vous pouvez utiliser un masque comme un emporte-pièce pour recadrer ou détourer des objets ou images sousjacents. Certains masques produisent un effet de fenêtre embuée, révélant ou bloquant des portions d’objets sousjacents.
Vous pouvez créer un objet masque à partir d’un objet vectoriel (masque vectoriel) ou d’un objet bitmap (masque
bitmap). Vous pouvez également utiliser plusieurs objets ou des objets associés pour créer un masque, et même utiliser
du texte (pour créer un masque vectoriel). Après avoir créé un masque, vous pouvez ajuster la position de la sélection
masquée sur la zone de travail ou modifier l’aspect du masque. Vous pouvez également appliquer des transformations
au masque en totalité ou à chaque composant d’un masque.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 141
Calques, masques et fondus
A propos des masques vectoriels
Les masques vectoriels, parfois appelés masques ou masques de tracé d’écrêtage, sont utilisés dans les applications
d’illustration vectorielle. L’objet masque vectoriel recadre ou découpe les objets sous-jacents selon la forme de son
tracé pour créer un effet d’emporte-pièce.
Masque vectoriel appliqué à l’aide du contour de son tracé
Lorsque vous créez un masque vectoriel, une vignette de masque accompagnée d’une icône en forme de crayon
apparaît dans le panneau Calques.
Vignette de masque vectoriel dans le panneau Calques
Lorsqu’un masque vectoriel est sélectionné, l’inspecteur des propriétés affiche des informations sur l’application du
masque. La partie inférieure de l’inspecteur des propriétés affiche des propriétés supplémentaires qui permettent de
modifier le contour ou le fond de l’objet masque.
Par défaut, les masques vectoriels sont appliqués en utilisant le contour de leur tracé, mais vous pouvez également les
appliquer selon d’autres méthodes.
A propos des masques bitmap
Les masques bitmap de Fireworks ressemblent aux masques de fusion de Photoshop en ce sens que les pixels d’un objet
masque agissent sur la visibilité des objets sous-jacents.
Objets d’origine et masque bitmap appliqué avec l’aspect de niveaux de gris
Vous pouvez appliquer des masques bitmap de deux manières :
• En utilisant un objet existant pour masquer d’autres objets. Cette technique est semblable à l’application d’un
masque vectoriel.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 142
Calques, masques et fondus
• En créant un masque vide. Au début, les masques vides sont transparents ou 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 l’objet masque ou le modifier en révélant ou en masquant
les objets sous-jacents.
Lorsque vous créez un masque bitmap, l’inspecteur des propriétés affiche les informations sur l’application
du masque. Si vous sélectionnez un outil bitmap lorsqu’un masque bitmap est sélectionné, l’inspecteur des
propriétés affiche les propriétés du masque et les options de l’outil sélectionné.
Par défaut, la plupart des masques bitmap sont appliqués en utilisant leur aspect de niveaux de gris, mais vous
pouvez également les appliquer à l’aide de leur couche alpha.
Création d’un masque à partir d’un objet existant
Lorsque vous utilisez un objet vectoriel comme masque, vous pouvez recadrer ou détourer d’autres objets selon son
tracé. Lorsque vous utilisez un objet bitmap en tant masque, la luminosité de ses pixels ou sa transparence affecte la
visibilité des autres objets.
Masquage d’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 superposant un objet ou un groupe d’objets
sur un autre objet. Le masque créé au moyen de cette commande est vectoriel ou bitmap.
1 Sélectionnez l’objet à utiliser comme masque. Tout en maintenant la touche Maj enfoncée, cliquez sur les différents
objets pour les sélectionner.
Remarque : l’utilisation de plusieurs objets en tant que masque produit toujours un masque vectoriel, même si les
deux objets sont de type bitmap.
2 Positionnez la sélection de sorte qu’elle recouvre l’objet ou le groupe d’objets à masquer.
La sélection peut se trouver devant ou derrière les objets à masquer.
3 Choisissez Edition > Couper pour couper les objets à utiliser comme masque.
4 Sélectionnez l’objet ou le groupe à masquer.
Si vous masquez plusieurs objets, ceux-ci doivent être associés.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 143
Calques, masques et fondus
5 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é à une image avec une zone de travail noire
Masquage d’objets à l’aide de la commande Coller dedans
Le masque créé est un masque vectoriel ou bitmap, selon le type d’objet masque utilisé. La commande Coller dedans
crée un masque en remplissant un tracé fermé ou un objet bitmap avec d’autres objets : graphiques vectoriels, textes
ou images bitmap. Le tracé lui-même est parfois appelé masque, et les éléments qu’il contient s’appellent des contenus
ou des collages intérieurs. Le contenu qui s’étend au-delà du masque est masqué.
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
restent sélectionnés. Ces objets peuvent se trouver au-dessus ou en dessous de l’objet masque dans le panneau Calques.
3 Choisissez Edition > Couper pour déplacer les objets dans le Presse-papiers.
4 Sélectionnez l’objet dans lequel coller le contenu. Cet objet sera utilisé comme masque (tracé d’écrêtage).
5 Choisissez Edition > Coller dedans.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 144
Calques, masques et fondus
Les objets collés apparaissent dans l’objet masque ou sont détourés par le masque.
Utilisation de texte comme masque
Le masque de texte est un type de masque vectoriel qui s’applique de la même manière qu’un masque utilisant des
objets existants. Le texte constitue l’objet masque. La méthode la plus courante pour appliquer un masque de texte
consiste à utiliser le contour de son tracé. Il est toutefois possible d’appliquer un masque de texte en utilisant son aspect
de niveaux de gris.
Masque de texte appliqué à l’aide du contour de son tracé
Utilisation du masque vectoriel automatique
Les masques vectoriels automatiques appliquent des motifs prédéfinis en tant que masques vectoriels sur des objets
bitmap et vectoriels. Vous pouvez modifier ultérieurement l’aspect des masques vectoriels automatiques, ainsi que
leurs propriétés.
1 Sélectionnez les objets bitmap ou vectoriels.
2 Sélectionnez Commandes > Création > Masque vectoriel auto.
3 Sélectionnez le type de masque, puis cliquez sur Appliquer.
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.
1 Sélectionnez l’objet à masquer.
2 En bas du panneau Calques, cliquez sur le bouton Ajouter un masque.
Un masque vide est appliqué à l’objet sélectionné. Le panneau Calques affiche une vignette de masque représentant
le masque vide.
3 (Facultatif) Si l’objet masqué est un objet bitmap, utilisez l’un des outils de cadre de sélection ou de lasso pour créer
une sélection de pixels.
4 Dans le panneau Outils, sélectionnez un outil de dessin bitmap.
5 Définissez les options de l’outil dans l’inspecteur des propriétés.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 145
Calques, masques et fondus
6 Le masque étant sélectionné, dessinez sur le masque vide. Dans les zones où vous dessinez, l’objet masqué sous-
jacent est masqué.
Image avec masque appliqué
Masque tel qu’il apparaît dans le panneau Calques
Masquage d’objets à l’aide des commandes de révélation et de masquage
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 un 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 A utiliser exclusivement avec des sélections de pixels, cette commande applique un masque de
pixels transparent en utilisant la sélection de pixels actuelle. Les autres pixels de l’objet bitmap sont masqués. Cette
commande revient à sélectionner des pixels puis à cliquer sur le bouton Ajouter un masque.
Masquer la sélection A utiliser exclusivement avec des sélections de pixels, cette commande applique un masque de
pixels opaque en utilisant la sélection de pixels actuelle. Les autres pixels de l’objet bitmap sont visibles. Cette
commande revient à sélectionner des pixels puis à cliquer sur le bouton Ajouter un masque tout en maintenant la
touche Alt (Windows) ou Option (Mac OS) enfoncée.
Création d’un masque à l’aide des commandes Tout révéler et Tout masquer
1 Sélectionnez l’objet à masquer.
2 Pour afficher l’objet, choisissez la commande Modification > Masque > Tout révéler. Pour le masquer, choisissez
Modification > Masque > Tout masquer.
3 Dans le panneau Outils, sélectionnez un outil de dessin bitmap.
4 Définissez les options de l’outil dans l’inspecteur des propriétés.
Si vous avez exécuté la commande Tout masquer, vous devez sélectionner une couleur autre que le noir.
5 Dessinez sur le masque vide. Dans les zones dans lesquelles vous dessinez, l’objet masqué sous-jacent sera masqué
ou visible, selon le type de masque que vous avez appliqué.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 146
Calques, masques et fondus
Création d’un masque à l’aide des commandes Révéler la sélection et Masquer la sélection
1 Dans le panneau Outils, sélectionnez l’outil Baguette magique ou un outil de sélection ou de lasso.
2 Sélectionnez des pixels dans une image bitmap.
Image d’origine ; pixels sélectionnés à l’aide de la Baguette magique
3 Pour afficher la zone définie par la sélection de pixels, choisissez la commande Modification > Masque > Révéler la
sélection. Pour la masquer, choisissez Modification > Masque > Masquer la sélection.
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
révéler ou masquer les pixels restants de l’objet masqué en utilisant les outils bitmap du panneau Outils.
A propos de l’importation et de l’exportation de masques de fusion
Photoshop
Dans Photoshop, vous pouvez masquer les images à l’aide de masques de fusion ou de calques associés. Fireworks vous
permet d’importer des images employant des masques de calque tout en conservant la possibilité de les modifier. Les
masques de fusion 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 fusion
Photoshop. Si les objets masqués contiennent du texte que vous souhaitez pouvoir continuer à modifier dans
Photoshop, vous devez sélectionner Privilégier le caractère modifiable lors de l’exportation.
Remarque : si le texte fait office d’objet masque, il est converti en objet bitmap et n’est plus modifiable une fois importé
dans Photoshop.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 147
Calques, masques et fondus
Association d’objets pour former un masque
Si vous regroupez plusieurs objets pour créer un masque, l’objet supérieur devient l’objet masque. Le type de l’objet
supérieur détermine le type du masque (vectoriel ou bitmap).
1 Tout en maintenant la touche Maj enfoncée, cliquez sur au moins deux objets qui se chevauchent.
Vous pouvez sélectionner les objets sur différents calques.
2 Choisissez Modification > Masque > Associer comme masque.
Sélection et déplacement des masques
Sélection de masques et d’objets masqués à l’aide des vignettes de masques
Dans le panneau Calques, les vignettes vous permettent de sélectionner et de modifier le masque ou les objets masqués
uniquement, sans affecter les autres objets.
Lorsque vous sélectionnez la vignette du masque, l’icône de masque apparaît en regard de cette dernière dans le
panneau Calques. L’inspecteur des propriétés affiche les propriétés du masque, quand vous pouvez les modifier.
• Pour sélectionner un masque, dans le panneau Calques, cliquez sur la vignette du masque.
• Pour sélectionner un objet masqué, dans le panneau Calques, cliquez sur la vignette de l’objet masqué.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 148
Calques, masques et fondus
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 objets masqués individuels sur le document sans
sélectionner les autres composants du masque. Les propriétés de l’objet sélectionné sont visibles dans l’inspecteur des
propriétés.
❖ Cliquez avec l’outil Sous-sélection sur l’objet dans la zone de travail.
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.
Déplacement simultané d’un masque et de ses objets masqués
1 A l’aide de l’outil Pointeur, sélectionnez le masque sur la zone de travail.
2 Faites glisser le masque vers son nouvel emplacement sans tirer la poignée de déplacement, à moins que vous ne
souhaitiez déplacer l’objet masqué indépendamment du masque.
Déplacement isolé de masques et d’objets masqués par rupture de leur lien
1 Dans le panneau Calques, cliquez sur l’icône de lien sur le masque.
Cette opération permet de dissocier les masques des objets masqués pour les déplacer indépendamment.
2 Sélectionnez la vignette d’un masque ou d’un objet masqué.
3 A l’aide de l’outil Pointeur, faites glisser l’objet ou les objets sur la zone de travail.
Remarque : si plusieurs objets masqués sont sélectionnés, ils se déplacent tous simultanément.
4 Pour rétablir le lien entre les objets masqués et le masque, cliquez entre les vignettes de masque dans le
panneau Calques.
Déplacement isolé d’un masque à l’aide de sa poignée de déplacement
1 A l’aide de l’outil Pointeur, sélectionnez le masque sur la zone de travail.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 149
Calques, masques et fondus
2 Sélectionnez l’outil Sous-sélection, puis faites glisser la poignée de déplacement du masque vers le nouvel
emplacement.
Déplacement d’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 sur la zone de travail.
2 Faites glisser la poignée de déplacement vers le nouvel emplacement.
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 se déplacent simultanément.
Déplacement d’objets masqués indépendamment les uns des autres
❖ Cliquez avec le pointeur de l’outil Sous-sélection sur l’objet pour le sélectionner, puis faites-le glisser.
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 des masques
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. Lorsque vous modifiez un masque, les résultats sont immédiatement visibles sur sa vignette
dans le panneau Calques, même si l’objet masque lui-même n’est pas visible sur la zone de travail.
Les objets masqués peuvent également être 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.
Modification de 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.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 150
Calques, masques et fondus
• A l’aide de l’outil Sous-sélection, déplacez les points d’un objet masque vectoriel.
Modification de la couleur d’un masque sélectionné
• Pour les masques bitmap en niveaux de gris, utilisez les outils bitmap pour dessiner sur le masque en utilisant
diverses valeurs de niveaux de gris.
• Pour les masques vectoriels en niveaux de gris, changez la couleur de l’objet masque.
Remarque : utilisez des couleurs claires pour afficher les objets masqués, et des couleurs sombres pour les cacher.
Ajout d’objets masques supplémentaires à un masque
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 en tant que masque.
4 Choisissez Ajouter lorsqu’un message vous demande si vous voulez remplacer le masque ou ajouter des objets.
Modification d’un masque à l’aide des outils de transformation
1 A l’aide de l’outil Pointeur, sélectionnez le masque sur la zone de travail.
2 Dans le sous-menu Modification > Transformer, sélectionnez un outil de transformation ou une commande pour
appliquer une transformation au masque.
Pour appliquer une transformation à l’objet masque uniquement, déliez-le d’abord des autres objets masques dans
le panneau Calques, puis exécutez la transformation.
Ajout d’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.
Remarque : l’exécution de la commande Coller dedans sur un masque existant ne permet pas d’afficher le contour et
le fond de l’objet masque, à moins que le masque d’origine ait été appliqué avec son contour et son fond.
Remplacement d’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.
Désactivation ou activation d’un masque sélectionné
La désactivation d’un masque le masque provisoirement.
❖ Procédez de l’une des manières suivantes :
• Dans le menu Options du panneau Calques, sélectionnez Désactiver le masque ou Activer le masque.
• Choisissez Modification > Masque > Désactiver le masque ou Modification > Masque > Activer le masque.
Une croix (X) rouge s’affiche sur la vignette du masque lorsqu’il est désactivé. Cliquez sur X pour activer le masque.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 151
Calques, masques et fondus
Suppression d’un masque sélectionné
La suppression d’un masque le supprime définitivement.
1 Procédez de l’une des manières suivantes :
• Dans le menu Options du panneau Calques, sélectionnez Supprimer le masque.
• Choisissez Modification > Masque > Supprimer le masque.
• Faites glisser la vignette du masque vers l’icône de la corbeille, 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 apportez dans l’objet. Le masque ne peut alors plus être
modifié. Si l’objet à masquer est un objet vectoriel, le masque et l’objet vectoriel sont convertis en une image bitmap
unique.
Rejeter Permet d’annuler tous les changements effectués et de rétablir la forme d’origine de l’objet.
Annuler Annule la suppression et laisse le masque intact.
Changement du mode d’application des masques
Lorsqu’un masque est sélectionné, l’inspecteur des propriétés permet de changer de méthode d’application du masque.
Si la fenêtre de l’inspecteur des 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 à l’aide de leur contour de tracé. Afficher le fond et le contour du
masque revient à utiliser la fonction Coller dedans pour créer des masques.
Masque vectoriel appliqué à l’aide du contour de son tracé et avec l’option Afficher le fond et le contour activée
En appliquant un masque bitmap avec sa couche alpha, vous pouvez créer un masque qui ressemble à un masque
vectoriel appliqué avec le contour de son tracé. La transparence de l’objet masque affecte la visibilité de l’objet masqué.
Masque bitmap appliqué avec sa couche alpha
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 152
Calques, masques et fondus
Vous pouvez appliquer les masques vectoriels et bitmap avec leur aspect de niveaux de gris. La luminosité des pixels
d’un masque détermine ce qui est révélé de l’objet masqué. Les pixels clairs révèlent l’objet masqué, tandis que les pixels
foncés masquent l’image pour laisser transparaître l’arrière-plan. Cette technique crée des effets intéressants si l’objet
masque contient un fond à motifs ou un fond en dégradé.
Masque vectoriel avec un fond à motifs appliqué avec son aspect de niveaux de gris
Vous pouvez convertir des masques vectoriels en masques bitmap. Cependant, l’inverse n’est pas possible.
Application d’un masque vectoriel à l’aide du contour de son tracé
❖ Si un masque vectoriel est sélectionné, cliquez sur Contour de tracé dans l’inspecteur des propriétés.
Affichage du fond et du contour d’un masque vectoriel
❖ Dans l’inspecteur des propriétés, cliquez sur Afficher le fond et le contour si le masque vectoriel sélectionné a été
appliqué en utilisant le contour de son tracé.
Application d’un masque bitmap à l’aide de sa couche alpha
❖ Si un masque bitmap est sélectionné, cliquez sur Couche alpha dans l’inspecteur des propriétés.
Application d’un masque vectoriel ou bitmap à l’aide de son aspect de niveaux de gris
❖ Si un masque est sélectionné, cliquez sur Aspect de niveaux de gris dans l’inspecteur des propriétés.
Conversion d’un masque vectoriel en masque bitmap
1 Dans le panneau Calques, sélectionnez la vignette de l’objet masque.
2 Choisissez Modification > Aplatir la sélection.
Fusion 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 qui se chevauchent. Dans Fireworks, les modes de fusion permettent de créer des images
composites.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 153
Calques, masques et fondus
A propos des modes de fusion
Lorsque vous sélectionnez un mode de fusion, Fireworks l’applique aux objets sélectionnés dans leur intégralité. Les
objets d’un document ou d’un calque unique peuvent avoir des modes de fusion différents de ceux des autres objets
du document ou du calque.
Lorsque des objets présentant des modes de fondu différents sont associés, ces modes individuels sont remplacés par
le mode de fondu du groupe. La dissociation des objets restaure le mode de fusion individuel de chacun des objets.
Remarque : les modes de fusion des calques ne fonctionnent pas dans les documents de symbole.
Eléments d’un mode de fusion
Couleur de fusion Couleur à laquelle est appliqué le mode de fusion.
Opacité Degré de transparence auquel est appliqué le mode de fusion.
Couleur de base Couleur des pixels sous la couleur de fusion.
Couleur résultante Résultat de l’effet du mode de fusion sur la couleur de base.
Modes de fusion
Les teintes, la saturation et les modes de mélange des couleurs s’utilisent comme dans Photoshop. Pour plus
d'informations sur les modes de fusion, voir l'article de Jim Babbage portant sur les modes de fusion.
Normal N’applique aucun mode de fusion.
Dissoudre Choisit des couleurs de manière aléatoire entre le calque actif et le calque d’arrière-plan pour créer l’effet
de fusion.
Obscurcir Sélectionne la couleur la plus dense, entre la couleur de fusion et la couleur de base, pour l’utiliser comme
couleur résultante. Ce mode remplace uniquement les pixels qui sont plus clairs que la couleur de fusion.
Produit Multiplie la couleur de base par la couleur de fusion et crée des couleurs plus foncées.
Densité couleur + Assombrit la couleur de base de chaque couche pour refléter la couleur de fusion par augmentation
du contraste. Le mélange avec du blanc ne produit aucun résultat.
Densité linéaire + Vérifie chaque couche des calques actif et d’arrière-plan et assombrit la couleur d’arrière-plan pour
refléter la couleur de fusion par réduction de la luminosité. L’effet global consiste à assombrir l’image. Le blanc étant
la couleur neutre, le fusion de densité linéaire + avec le blanc ne produit aucun effet.
Eclaircir Sélectionne la couleur la plus claire, entre la couleur de fusion et la couleur de base, pour l’utiliser comme
couleur résultante. Ce mode remplace uniquement les pixels qui sont plus sombres que la couleur de fusion.
Superposition Multiplie l’inverse de la couleur de fusion par la couleur de base, ce qui crée un effet de blanchiment.
Densité couleur - Eclaircit la couleur de base pour refléter la couleur de fusion par réduction du contraste. Le mélange
avec du noir ne produit aucun résultat.
Densité linéaire - Vérifie chaque couche des calques actif et d’arrière-plan et éclaircit la couleur d’arrière-plan pour
refléter la couleur de fusion par augmentation de la luminosité. L’effet global consiste à éclaircir l’image. Le noir étant
la couleur neutre, le fusion de densité linéaire - avec le noir ne produit aucun effet.
Recouvrement Multiplie ou trame les couleurs, en fonction de la couleur de base. Les motifs ou les couleurs recouvrent
les pixels existants tout en conservant les tons clairs et les tons foncés de la couleur de base. La couleur de base n’est
pas remplacée : elle est mélangée à la couleur de fusion pour refléter la luminosité ou l’obscurité de la couleur d’origine.
Lumière douce Assombrit ou éclaircit les couleurs, en fonction de la couleur de fusion. Cela a le même effet que si l’on
dirigeait un spot de lumière diffuse sur l’image. Si la couleur de fusion (source lumineuse) est plus claire que 50 % de
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 154
Calques, masques et fondus
gris, l’image est éclaircie comme avec l’outil Densité -. Si la couleur de fusion (source lumineuse) est plus sombre que
50 % de gris, l’image est assombrie comme avec l’outil Densité +. Si vous utilisez du noir ou du blanc purs, vous
obtenez une zone nettement plus sombre ou plus claire. Cependant, il ne s’agit pas de noir ou blanc purs.
Lumière crue Multiplie ou trame les couleurs, en fonction de la couleur du de fondu. Cela a le même effet que si l’on
dirigeait un spot de lumière crue sur l’image. Si la couleur de fusion (source lumineuse) est plus claire que 50 % de gris,
l’image est éclaircie comme avec l’outil Superposition. Cette méthode est pratique pour ajouter des tons clairs à une
image. Si la couleur de fusion est plus sombre que 50 % de gris, l’image est assombrie comme avec l’outil Produit. Cette
méthode est pratique pour ajouter des tons foncés à une image. Si vous utilisez du noir ou du blanc purs, vous obtenez
du noir ou du blanc purs.
Lumière vive Augmente le contraste par combinaison des effets des modes Densité couleur + et Densité couleur -. Si
la couleur de fusion est plus sombre que le gris moyen, la lumière vive assombrit ou densifie l’image en augmentant le
contraste. Sinon, l’image est éclaircie par réduction du contraste.
Lumière linéaire Ajuste la luminosité par combinaison des modes Densité linéaire + et Densité linéaire -. Si la couleur
de calque de fusion est plus sombre que le gris moyen, le mode Lumière linéaire diminue la luminosité de l’image. Dans
le cas contraire, il l’augmente.
Lumière ponctuelle Remplace la couleur en fonction de la couleur de fusion. Si la couleur de fusion est plus claire que
50 % de gris, les pixels qui sont plus sombres que la couleur de fusion sont remplacés. Si la couleur de fusion est plus
sombre que 50 % de gris, les pixels qui sont plus clairs que la couleur de fusion sont remplacés.
Mélange net Réduit les couleurs d’une image à huit couleurs pures uniquement.
Différence Soustrait la couleur de fusion de la couleur de base, ou inversement. La couleur la moins lumineuse est
soustraite de la couleur la plus lumineuse.
Exclusion Crée un effet similaire, quoiqu’avec un moindre contraste, à celui du mode Différence. Si vous mélangez
avec du blanc, vous inversez les valeurs de la couleur de base. Le mélange avec du noir ne produit aucun résultat.
Teinte Combine la valeur de teinte de la couleur de fusion 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 fusion 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 fusion avec la luminance de la couleur de base afin de créer
la couleur résultante. Ce mode conserve les niveaux de gris qui permettent de colorer les images monochromes et de
teinter les images en couleur.
Luminosité Combine la luminance de la couleur de fusion avec la teinte et la saturation de la couleur de base.
Inverser Inverse la couleur de base.
Nuance Ajoute du gris à la couleur de base.
Effacer Supprime tous les pixels de la couleur de base, y compris ceux de l’image d’arrière-plan.
Pour des informations générales et des exemples de modes de fusion (en particulier des modes de fusion de
Photoshop), consultez le site Web suivant : www.pegtop.net/delphi/articles/blendmodes/ (en anglais).
UTILISATION DE FIREWORKS CS5 155
Dernière mise à jour le 29/4/2010
Calques, masques et fondus
Exemples de modes de fusion
Image d’origine
Normal
Produit
Superposition
Obscurcir
Eclaircir
Différence
Teinte
Saturation
Couleur
Luminosité
Inverser
Nuance
Effacer
Réglage de l’opacité et application de modes de fusion
Vous pouvez régler l’opacité des objets sélectionnés et appliquer des modes de fusion à l’aide de l’inspecteur des
propriétés ou du panneau Calques. 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 fusion et une opacité avant de dessiner un objet.
Définition d’un mode de fusion et d’un niveau d’opacité avant de dessiner un objet
❖ Après avoir sélectionné l’outil souhaité dans le panneau Outils, définissez les options de fusion et d’opacité dans
l’inspecteur des propriétés avant de dessiner l’objet.
Remarque : les options de fusion et d’opacité ne sont pas disponibles avec tous les outils.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 156
Calques, masques et fondus
Définition d’un mode de fusion et d’un niveau d’opacité pour des objets existants
1 Des deux objets qui se chevauchent, sélectionnez celui qui se trouve au-dessus.
2 Dans le menu contextuel Mode de fusion de l’inspecteur des propriétés ou du panneau Calques, sélectionnez une
option de fusion.
3 Sélectionnez un paramètre avec le curseur contextuel Opacité ou saisissez une valeur dans la zone de texte.
Définition d’un mode de fusion et d’un niveau d’opacité par défaut à appliquer aux objets à
mesure que vous les dessinez
1 Choisissez Sélection > Désélectionner pour éviter d’appliquer un mode de fusion et une opacité par inadvertance.
2 Après avoir sélectionné un outil de dessin vectoriel ou bitmap, sélectionnez un mode de fusion et un niveau
d’opacité dans l’inspecteur des propriétés.
Le mode de fusion et le niveau d’opacité que vous sélectionnez sont utilisés par défaut pour tous les nouveaux objets
que vous dessinez avec cet outil.
A propos du filtre dynamique Fond de couleur
Le filtre dynamique Couleur de remplissage Fireworks vous permet d’ajuster la couleur d’un objet en modifiant
l’opacité et le mode de fusion de ce dernier. Ce filtre dynamique produit le même effet que la superposition d’un objet
sur un autre objet utilisant un niveau d’opacité et un mode de fusion différents.
Dernière mise à jour le 29/4/2010
Chapitre 11 : Styles, symboles et
adresses URL
Adobe® Fireworks® est doté de trois panneaux permettant de stocker et de réutiliser des styles, des symboles et des
adresses URL. Les styles sont stockés dans le panneau Styles, les symboles du document actif dans le
panneau Bibliothèque de documents et les adresses URL dans le panneau URL. Par défaut, ces trois panneaux sont
placés dans le groupe de panneaux Actifs.
Pour visionner un didacticiel vidéo sur l’utilisation des styles et des symboles dans Fireworks, reportez-vous à
www.adobe.com/go/lrvid4033_fw_fr.
Styles
Vous pouvez enregistrer et réutiliser un ensemble prédéfini d’attributs de fond, de contour, de filtre et de texte en
créant un style. Lorsque vous appliquez un style à un objet, celui-ci reprend les caractéristiques de ce style.
Remarque : les objets bitmap reçoivent uniquement les attributs de filtre d’un style.
Fireworks possède de nombreux styles prédéfinis. Vous pouvez ajouter, modifier ou supprimer des styles. Le DVD de
Fireworks et le site Web d’Adobe 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.
Application d’un style
Le panneau Styles permet de créer ou d’enregistrer des styles et d’appliquer toute la gamme de styles à des objets, du
texte, des groupes et des formes automatiques.
Pour accéder rapidement au sous-ensemble des styles d’un document, utilisez le menu de styles actif de l’inspecteur
des propriétés.
1 Sélectionnez les objets des zones de travail auxquels vous souhaitez appliquer un style.
2 Sélectionnez la commande Fenêtre > Styles pour afficher le panneau Styles.
3 Sélectionnez Document actif pour accéder aux styles actuellement utilisés ou sélectionnez un style prédéfini dans
le menu contextuel pour accéder aux styles Fireworks prédéfinis.
Remarque : si aucun style n’apparaît dans un document, le panneau Styles reste vide tant que vous ne sélectionnez
pas un style prédéfini.
4 Dans le panneau, cliquez sur le nom d’un style.
157
UTILISATION DE FIREWORKS CS5 158
Dernière mise à jour le 29/4/2010
Styles, symboles et adresses URL
Voir aussi
« Exportation et importation de styles » à la page 159
« Modification ou redéfinition de styles » à la page 159
« Rupture du lien vers un style » à la page 160
Création et suppression de styles
Vous pouvez créer un style reposant sur les attributs de l’objet, groupe, texte ou forme automatique sélectionné. Les
attributs suivants peuvent être enregistrés dans un style :
• Type et couleur de fond, y compris des attributs de motifs, de textures et de dégradé de vecteur tels que l’angle, la
position et l’opacité
• Type et couleur de contour
• Filtres
• Attributs de texte tels que la police, la taille du point, le style (gras, italique ou souligné), l’alignement, le lissage, le
crénage automatique, l’échelle horizontale, l’approche et l’interlignage
Si vous supprimez un style personnalisé, vous ne pouvez pas le récupérer. Cependant, tout objet utilisant le style en
conserve les attributs.
Création d’un style
1 Créez ou sélectionnez un objet vectoriel, du texte, un groupe ou une forme automatique doté des attributs de
contour, remplissage, filtre ou texte souhaités.
2 Cliquez sur le bouton Nouveau style
de la partie inférieure du panneau Styles ou de l’inspecteur des propriétés.
3 Sélectionnez les attributs à inclure dans le style.
Remarque : pour enregistrer d’autres attributs de texte, utilisez l’option Texte autre.
4 Nommez le style, puis cliquez sur OK.
Changement de nom d’un style
1 Dans le panneau Styles, cliquez sur le nom d’un style.
2 Dans le menu Options du panneau Styles, cliquez sur Renommer le style.
3 Entrez un nouveau nom pour le style, puis cliquez sur OK.
Création d’un nouveau style d’après un style existant
1 Appliquez le style existant à l’objet sélectionné.
2 Modifiez les attributs de cet objet.
3 Enregistrez les attributs en créant un style.
Suppression d’un style
1 Dans le panneau Styles, cliquez sur le nom d’un style.
Cliquez tout en maintenant la touche Maj enfoncée pour sélectionner plusieurs styles ; cliquez tout en maintenant
la touche Ctrl (Windows) ou Cmde (Mac OS) enfoncée pour sélectionner plusieurs styles non contigus.
2 Cliquez sur le bouton Supprimer
.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 159
Styles, symboles et adresses URL
Modification ou redéfinition de styles
La modification de styles permet d’activer ou de désactiver des propriétés spécifiques, notamment celles du fond ou
du contour. La redéfinition de styles, quant à elle, permet de modifier les filtres qu’ils contiennent.
Lorsque vous modifiez ou redéfinissez un style, tous les objets qui lui ont été appliqués sont automatiquement mis à
jour. Toutefois, vous pouvez rompre le lien entre des objets sélectionnés et des styles (voir la section « Rupture du lien
vers un style » à la page 160).
Voir aussi
« Modification et personnalisation des filtres dynamiques » à la page 133
Modification d’un style
1 Choisissez Sélection > Désélectionner pour désélectionner tous les objets de la zone de travail.
2 Dans le panneau Styles, cliquez deux fois sur le nom d’un style.
3 Dans la boîte de dialogue Modifier le style, sélectionnez ou désélectionnez des attributs.
4 Cliquez sur OK pour appliquer les modifications au style.
Redéfinition d’un style
1 Dans la zone de travail, sélectionnez un objet qui utilise ce style.
2 Dans l’inspecteur des propriétés, modifiez les filtres appliqués, puis cliquez sur le bouton Redéfinir le style.
Remarque : lors de la redéfinition d’un style à partir d’un groupe, seuls les effets sont redéfinis. Tous les attributs de
chemin d’accès sont ignorés.
Pour remplacer rapidement un style par un autre dans les styles du Document actif, faites glisser un style vers un autre
style du panneau Styles tout en maintenant la touche Alt (Windows) ou Option (Mac OS) enfoncée.
Exportation et importation de styles
Pour gagner du temps et dans un souci de cohérence, vous pouvez partager des styles ; pour cela, exportez-les pour
qu’ils puissent être utilisés par d’autres utilisateurs.
Enregistrement de la bibliothèque de styles
Vous pouvez enregistrer les styles créés ou modifiés sous forme de bibliothèque de styles. Les noms des styles sont
classés par ordre alphabétique. Il est également possible d’appliquer des styles à des groupes, des formes automatiques
et des symboles.
1 Dans le menu Options du panneau Styles, sélectionnez l’option Enregistrer la bibliothèque de styles.
2 Entrez un nom et un emplacement pour la bibliothèque de styles.
3 Cliquez sur Enregistrer.
Importation de styles
1 Dans le menu Options du panneau Styles, sélectionnez l’option Importer une bibliothèque de styles.
2 Sélectionnez une bibliothèque de styles (*.stl) à importer. La bibliothèque de styles est disponible dans plusieurs
documents et plusieurs sessions de Fireworks.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 160
Styles, symboles et adresses URL
Chargement des styles dans le document actif
1 Dans le menu Options du panneau Styles, cliquez sur Charger un style.
2 Sélectionnez une bibliothèque de styles (*.stl) à charger dans le document actif. Les styles chargés sont disponibles
dans le document actif.
Modification de la taille d’une icône de style
❖ Pour modifier la taille des icônes d’aperçu des styles, sélectionnez Grandes icônes dans le menu Options du
panneau Styles, afin d’alterner entre la grande et la petite taille d’aperçu.
Copie d’attributs d’un objet dans un autre sans application de style
1 Sélectionnez l’objet dont vous voulez copier les attributs.
2 Choisissez Edition > Copier.
3 Désélectionnez l’objet original, puis sélectionnez les objets auxquels vous voulez appliquer les nouveaux attributs.
4 Choisissez Edition > Coller les attributs.
Rupture du lien vers un style
Vous pouvez rompre le lien établi entre un objet et le style qui lui est appliqué. Cet objet conserve les mêmes attributs
mais n’est plus modifié en cas de changement de styles.
1 Sélectionnez l’objet sur lequel le style est appliqué.
2 Dans la partie inférieure droite de l’inspecteur des propriétés, cliquez sur le bouton Rompre le lien avec le style.
Si la fenêtre de l’inspecteur des propriétés est réduite, choisissez l’option Rompre le lien avec le style dans le menu
du panneau Styles.
Suppression des remplacements de style des objets
1 Sélectionnez les objets modifiés suite à l’application d’un style.
2 Dans le menu Options du panneau Styles, cliquez sur Effacer les remplacements.
Sélection des styles inutilisés dans le document actif
❖ Dans le menu Options du panneau Styles, choisissez Sélectionner les styles inutilisés.
Duplication d’un style
1 Dans le panneau Styles, cliquez sur le nom d’un style.
2 Dans le menu Options du panneau Styles, cliquez sur Dupliquer un style.
Symboles
Dans Fireworks, les éléments graphiques réutilisables sont appelés symboles. Dans Fireworks, trois types de symboles
sont disponibles : graphique, animation et bouton. Lorsque vous modifiez l’objet symbole d’origine, les occurrences
copiées changent automatiquement afin de refléter le symbole modifié (sauf si vous rompez le lien entre les deux).
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 161
Styles, symboles et adresses URL
Les symboles sont également pratiques pour créer des boutons et animer des objets sur plusieurs états.
Pour plus d’informations sur les symboles, voir Flux de production avec les styles et les symboles dans le Centre des
développeurs.
Voir aussi
« Création de symboles de bouton » à la page 194
« Création de symboles d’animation » à la page 219
Création d’un symbole
Vous pouvez créer un symbole à partir d’un objet, d’un bloc de texte ou d’un groupe, puis le stocker dans l’onglet
Bibliothèque commune du panneau Actifs. Vous pouvez ensuite, à partir de cet onglet, modifier le symbole et l’insérer
dans vos documents.
Création d’un symbole à partir d’un objet sélectionné
1 Sélectionnez l’objet, puis choisissez Modification > Symbole > Convertir en symbole.
2 Dans la zone Nom, entrez le nom du symbole.
3 Sélectionnez un type de symbole.
4 Pour effectuer une mise à l’échelle du symbole sans distorsion de sa géométrie, sélectionnez l’option Activer les
repères de mise à l’échelle en 9 tranches (voir la section « Mise à l’échelle en 9 tranches » à la page 50).
5 Pour stocker le symbole afin de l’utiliser dans différents documents, sélectionnez l’option Enregistrer dans la
bibliothèque commune.
6 Cliquez sur OK pour enregistrer le symbole.
L’objet sélectionné devient une occurrence du symbole et l’inspecteur des propriétés affiche les options du symbole.
Création d’un symbole ex nihilo
1 Procédez de l’une des manières suivantes :
• Choisissez Edition > Insertion > Nouveau symbole.
• Dans le menu Options du panneau Bibliothèque de documents, cliquez sur Nouveau symbole.
2 Sélectionnez un type de symbole.
3 Pour utiliser des repères de mise à l’échelle 9 tranches pour le symbole, sélectionnez l’option Activer les repères de
mise à l’échelle en 9 tranches, puis cliquez sur OK.
4 Créez le symbole à l’aide des outils du panneau Outils.
Placement d’une occurrence de symbole
❖ Faites glisser un symbole du panneau Bibliothèque de documents vers le document actif.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 162
Styles, symboles et adresses URL
Occurrence d’un symbole dans la zone de travail
Modification d’un symbole et de toutes ses occurrences
Lorsque vous modifiez un symbole, toutes les occurrences associées sont automatiquement mises à jour pour refléter
les modifications apportées. Toutefois, certaines propriétés sont indépendantes. Pour plus d’informations, reportezvous à la section « Modification d’occurrences de symboles spécifiques » à la page 163.
Lorsque vous fractionnez le symbole, les graphiques sont groupés par défaut. Dissociez les graphiques (boutons, barre
de défilement ou autres) pour les modifier. Vous pourrez ensuite grouper à nouveau les graphiques et les convertir en
symbole. Si vous ne groupez pas les graphiques avant la conversion, les graphiques composant le symbole deviennent
modifiables.
Modification d’un symbole
1 Pour accéder au mode de modification de symboles, procédez de l’une des manières suivantes :
• Dans la zone de travail, cliquez deux fois sur une occurrence de symbole.
• Sélectionnez une occurrence, puis choisissez Modification > Symbole > Modifier le symbole.
• Dans le panneau Bibliothèque de documents, cliquez deux fois sur une icône de symbole.
• (Symboles d’animation uniquement) Cliquez sur le bouton Modifier dans la boîte de dialogue Animer.
2 Modifiez le symbole selon vos besoins.
Remarque : si l’option Mise à l’échelle en 9 tranches n’est pas activée pour le symbole sélectionné, vous pouvez
modifier le symbole dans le contexte lui-même. Vous pouvez choisir la commande Modification > Symbole > Modifier
en place.
Utilisez des repères de mise à l’échelle en 9 tranches pour empêcher toute distorsion lorsque vous redimensionnez
le symbole (voir la section « Mise à l’échelle en 9 tranches » à la page 50).
Passage du mode d’édition de symboles au mode d’édition de pages
Lorsque vous modifiez un symbole, le document passe en mode de modification de symboles. Ce mode estompe les
autres objets de la zone de travail, ce qui vous permet de modifier rapidement les symboles en visualisant la page
entière (à l’exception des symboles utilisant la mise à l’échelle en 9 tranches, qui apparaissent seuls).
Pour alterner entre le mode d’édition de symboles et le mode d’édition de pages, procédez de l’une des manières
suivantes :
• Dans la zone de travail, cliquez deux fois sur une zone vide.
• Dans le plateau situé en haut du panneau du document, cliquez sur l’icône représentant une page ou sur la flèche
arrière. (Si le symbole est imbriqué, le plateau donne également accès au symbole le contenant.)
Affectation d’un nouveau nom à un symbole
1 Dans le panneau Bibliothèque de documents, cliquez deux fois sur une icône de symbole.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 163
Styles, symboles et adresses URL
2 Dans la boîte de dialogue Convertir en symbole, modifiez le nom, puis cliquez sur OK.
Duplication d’un symbole
1 Dans le panneau Bibliothèque de documents, sélectionnez le symbole.
2 Dans le menu Options du panneau Bibliothèque de documents, cliquez sur Dupliquer.
3 Modifiez le nom et le type du doublon si nécessaire et cliquez sur OK.
Modification du type de symbole
1 Cliquez deux fois sur le nom du symbole dans la bibliothèque.
2 Sélectionnez une autre option de type de symbole.
Sélection de tous les symboles inutilisés dans le panneau Bibliothèque de documents
❖ Dans le menu Options du panneau Bibliothèque de documents, cliquez sur Sélectionner les éléments inutilisés.
Suppression d’un symbole et de toutes ses occurrences
❖ Dans le panneau Bibliothèque de documents, faites glisser le symbole jusqu’à l’icône de la corbeille.
Permutation d’un symbole
1 Dans la zone de travail, cliquez avec le bouton droit de la souris sur un symbole, puis sélectionnez Permuter le
symbole.
2 Dans la boîte de dialogue Permuter le symbole, sélectionnez un autre symbole parmi ceux disponibles dans la
bibliothèque de documents, puis cliquez sur OK.
Modification d’occurrences de symboles spécifiques
Lorsque vous cliquez deux fois sur une occurrence pour la modifier, c’est en fait le symbole lui-même que vous
modifiez. Pour modifier uniquement l’occurrence active, vous devez rompre le lien entre cette occurrence et le
symbole. Cela supprime définitivement la relation entre les deux. Aucune des modifications futures apportées au
symbole n’affectera l’occurrence précédente.
Les symboles de bouton sont associés à plusieurs fonctions permettant de conserver la relation entre symbole et
instance, tout en affectant un texte et une adresse URL uniques à chaque occurrence.
Pour adapter les comportements JavaScript aux symboles de composant, modifiez les valeurs correspondantes dans le
panneau Propriétés du symbole. Pour ajouter des propriétés personnalisables à ce panneau, vous devez modifier le
fichier JavaScript associé au symbole.
Remarque : Les attributs de hauteur et de largeur ne peuvent pas être définis pour un composant utilisant JavaScript.
Rupture de liens de symboles
1 Sélectionnez l’occurrence.
2 Choisissez Modification > Symbole > Séparer.
L’occurrence sélectionnée devient un groupe. Le symbole qui s’affiche dans le panneau Bibliothèque de documents
n’est plus associé à ce groupe. Après séparation du symbole, une occurrence antérieure d’un bouton perd les
caractéristiques du symbole de son bouton, et une occurrence antérieure de l’animation perd les caractéristiques de
son symbole d’animation.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 164
Styles, symboles et adresses URL
Modification d’une instance sans rupture du lien au symbole
1 Sélectionnez l’occurrence.
2 Modifiez les propriétés de l’occurrence dans l’inspecteur des propriétés.
Vous pouvez modifier ces propriétés sans que cela n’affecte le symbole et les autres occurrences :
• Mode de fusion
• Opacité
• Filtres
• Largeur et hauteur
•
Coordonnées x et y
Création et utilisation de symboles de composant
Les symboles de composant sont des symboles graphiques que vous pouvez mettre à l’échelle de manière intelligente
tout en leur affectant des attributs spécifiques à l’aide d’un fichier JavaScript (JSF). Si vous modifiez une occurrence
dans le panneau Propriétés, cela affecte non seulement le symbole, mais aussi toutes les autres occurrences. En
revanche, si vous modifiez des paramètres dans le panneau Propriétés du symbole (Fenêtre > Propriétés du symbole),
cela affecte uniquement l’occurrence sélectionnée.
Fireworks comprend une bibliothèque de symboles de composant prédéfinis ; vous pouvez personnaliser ces derniers
pour reproduire l’aspect d’un site Web ou d’une interface utilisateur spécifique.
Ajout d’un symbole de composant à un document
1 Dans le menu Fenêtre, sélectionnez Bibliothèque commune.
2 Pour utiliser un symbole, faites-le glisser depuis le panneau Bibliothèque commune pour le déposer dans la zone
de travail Fireworks.
Ajustement des propriétés des symboles de composant
1 Dans la zone de travail, sélectionnez le symbole souhaité.
2 Dans le panneau Propriétés du symbole (Fenêtre > Propriétés du symbole), vous pouvez régler des paramètres tels
que l’état, l’étiquette et la couleur.
Pour créer des boutons interactifs destinés à des prototypes HTML et logiciels, reportez-vous à la section
« Tranches interactives » à la page 178.
Création d’un symbole de composant
1 Créez un objet dont vous voulez personnaliser les attributs.
La couleur de puce et le numéro de puce peuvent être des options personnalisables de ce symbole.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 165
Styles, symboles et adresses URL
2 Lorsque vous créez l’objet, personnalisez les noms des fonctions modifiables ; pour cela, saisissez un nom dans le
panneau Calques. Par exemple, vous pouvez nommer un champ de texte modifiable « étiquette ». Ce nom est utilisé
dans le fichier JavaScript.
Remarque : pour éviter les erreurs JavaScript, omettez les espaces dans les noms de fonctions. Par exemple, utilisez
« étiquette_numéro » et non « étiquette de numéro ».
3 Sélectionnez l’objet, puis choisissez Modification > Symbole > Convertir en symbole.
4 Dans la zone Nom, entrez le nom du symbole.
5 Sélectionnez Graphique comme type de symbole, sélectionnez ensuite Enregistrer dans la bibliothèque commune,
puis cliquez sur OK.
6 A l’invite, enregistrez le nouveau symbole dans le dossier Symboles personnalisés par défaut, ou créez un autre
dossier au même niveau que le dossier par défaut.
Remarque : vous devez enregistrer les symboles de composant dans un dossier de la bibliothèque commune.
Une fois enregistré, le symbole est supprimé de la zone de travail et figure dans la bibliothèque commune.
7 Sélectionnez Créer le script du symbole dans le menu Commandes.
8 Cliquez sur le bouton Parcourir dans le coin supérieur droit du panneau, puis recherchez le fichier PNG de
symboles. L’emplacement par défaut est le suivant :
• Pour Microsoft® Windows® XP : <paramètres utilisateur>\Application Data\Adobe\Fireworks CS5\Common
Library\Symboles personnalisés
• Pour Windows Vista® : \Utilisateurs\<nom d’utilisateur>\AppData\Roaming\Adobe\Fireworks CS5\Common
Library\Symboles personnalisés
• Pour Mac® OS : <nom d’utilisateur>/Application Support/Adobe/Fireworks CS5/Common Library/Symboles
personnalisés
9 Cliquez sur le bouton Plus pour ajouter un nom d’élément.
10 Dans la zone Nom d’élément, saisissez le nom de l’élément à personnaliser. Par exemple, pour personnaliser la zone
de texte « étiquette », saisissez « étiquette ».
11 Dans la zone Attribut, sélectionnez le nom de l’attribut à personnaliser. Par exemple, pour personnaliser le texte de
l’étiquette, sélectionnez textChars.
Remarque : pour plus d’informations sur ces options d’attribut, reportez-vous à l’extension de Fireworks.
12 Dans le champ Nom de propriété, saisissez le nom de la propriété personnalisable, par exemple « Etiquette » ou
« Numéro ». Il s’agit du nom de propriété qui apparaît dans le panneau Propriétés du symbole.
13 Dans le champ Valeur, entrez une valeur par défaut pour la propriété utilisée lors de l’insertion initiale d’une
occurrence du symbole dans un document.
14 Ajoutez des éléments supplémentaires au fur et à mesure de vos besoins.
15 Cliquez sur Enregistrer pour enregistrer les options sélectionnées et créer un fichier JavaScript.
16 Dans le menu Options du panneau Bibliothèque commune, cliquez sur Recharger pour recharger le nouveau
symbole.
Une fois le fichier JavaScript créé, vous pouvez créer une instance en faisant glisser le symbole vers la zone de travail.
Vous pourrez modifier ultérieurement ses attributs dans le panneau Propriétés du symbole.
Remarque : si vous supprimez ou renommez un objet référencé par le script, le panneau Propriétés du symbole signale
la présence d’erreurs.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 166
Styles, symboles et adresses URL
Enregistrement d’un symbole existant en tant que symbole de composant
1 Sélectionnez un symbole dans le panneau Bibliothèque de documents.
2 Dans le menu Options du panneau Bibliothèque de documents, cliquez sur Enregistrer dans la bibliothèque
commune.
3 Créez un fichier JavaScript pour contrôler les propriétés du symbole.
Création de paramètres de symbole modifiables avec JavaScript
Lorsque vous enregistrez un symbole de composant, Fireworks enregistre un fichier PNG dans les dossiers par défaut
suivants :
• (Windows XP) <paramètres utilisateur>\Application Data\Adobe\Fireworks CS5\Common Library\Symboles
personnalisés
• (Windows Vista) \Utilisateurs\<nom d’utilisateur>\AppData\Roaming\Adobe\Fireworks CS5\Common
Library\Symboles personnalisés
• (Mac OS) <nom d’utilisateur>/Application Support/Adobe/Fireworks CS5/Common Library/Symboles
personnalisés
Pour créer un symbole de composant, vous devez créer un fichier JavaScript portant le même nom que le symbole et
l’enregistrer au même emplacement avec l’extension .JSF. Par exemple, mybutton.graphic.png est associé à un fichier
JavaScript appelé mybutton.jsf.
Le panneau Créer le script du symbole permet aux utilisateurs qui ne sont pas des programmeurs d’affecter des
attributs de symboles simples et de créer le fichier JavaScript automatiquement. Pour ouvrir ce panneau, sélectionnez
Créer le script du symbole dans le menu Commandes.
Création du fichier JavaScript
Vous devez définir les deux fonctions suivantes dans le fichier JavaScript afin de pouvoir ajouter des paramètres
modifiables au symbole :
• Fonction setDefaultValues() : elle définit les paramètres qui peuvent être modifiés ainsi que leurs valeurs par
défaut.
• Fonction applyCurrentValues() : elle applique les valeurs entrées dans le panneau Propriétés du symbole au
symbole graphique.
L’exemple suivant illustre un fichier .JSF permettant de créer un symbole personnalisé :
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 167
Styles, symboles et adresses URL
function setDefaultValues()
{
var currValues = new Array();
//to build symbol properties
currValues.push({name:"Selected", value:"true", type:"Boolean"});
Widget.elem.customData["currentValues"] = currValues;
}
function applyCurrentValues()
{
var currValues = Widget.elem.customData["currentValues"];
// Get symbol object name
var Check = Widget.GetObjectByName("Check");
Check.visible = currValues[0].value;
}
switch (Widget.opCode)
{
case 1: setDefaultValues(); break;
case 2: applyCurrentValues(); break;
default: break;
}
This sample JavaScript shows a component symbol that can change colors:
function setDefaultValues()
{
var currValues = new Array();
//Name is the Parameter name that will be displayed in the Symbol Properties Panel
//Value is the default Value that is displayed when Component symbol loads first time. In this
case, Blue will be the default color when the Component symbol is used.
//Color is the Type of Parameter that is displayed. Color will invoke the Color Popup box
in the Symbol Properties Panel.
currValues.push({name:"BG Color", value:"#003366", type:"Color"});
Widget.elem.customData["currentValues"] = currValues;
}
function applyCurrentValues()
{
var currValues = Widget.elem.customData["currentValues"];
//color_bg is the Layer name in the PNG that will change colors
var color_bg = Widget.GetObjectByName("color_bg");
color_bg.pathAttributes.fillColor = currValues[0].value;
}
switch (Widget.opCode)
{
case 1: setDefaultValues(); break;
case 2: applyCurrentValues(); break;
default: break;
}
Afin de mieux comprendre la façon dont le fichier .JSF peut être utilisé pour personnaliser les propriétés du
symbole, explorez les exemples de composants inclus au logiciel.
Importation et exportation de symboles
Le panneau Bibliothèque de documents permet de stocker les symboles que vous créez ou importez dans le document
actif. Le panneau Bibliothèque de documents est propre au document actif ; pour utiliser des symboles contenus dans
la bibliothèque d’un document différent, vous pouvez les importer, les exporter, les copier ou les faire glisser.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 168
Styles, symboles et adresses URL
Importation d’un ou plusieurs symboles préparés à partir d’une bibliothèque de symboles
Fireworks
Vous pouvez importer des symboles d’animation, des symboles graphiques et des symboles de boutons, ainsi que des
barres de navigation et des thèmes aux symboles multiples.
1 Ouvrez un document Fireworks.
2 Sélectionnez un dossier dans le panneau Bibliothèque commune.
Vous pouvez également importer des symboles provenant de fichiers PNG de bibliothèques préalablement
exportés et placés sur votre disque dur, un CD ou un réseau.
Importation de symboles d’un autre fichier dans le document actif
1 Dans le menu Options du panneau Bibliothèque de documents, cliquez sur Importer des symboles.
2 Naviguez jusqu’au dossier PNG qui contient le fichier, sélectionnez-le, puis cliquez sur Ouvrir.
3 Sélectionnez les symboles à importer, puis cliquez sur Importer.
Les symboles importés s’affichent dans le panneau Bibliothèque de documents.
Importation d’un symbole par glisser-déposer ou par copier-coller
❖ Procédez de l’une des manières 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 de documents du document de destination et conserve un
lien avec le symbole du document original.
Exportation de symboles
1 Dans le menu Options du panneau Bibliothèque de documents, cliquez sur Exporter des symboles.
2 Sélectionnez les symboles à exporter, puis cliquez sur Exporter.
3 Sélectionnez un emplacement, entrez un nom pour le fichier de symboles, puis cliquez sur Enregistrer.
Fireworks enregistre les symboles dans un seul fichier PNG.
Mise à jour de symboles et d’occurrences exportés dans plusieurs documents
Les symboles importés restent liés à leur document de symbole d’origine. Vous pouvez modifier le document de
symbole d’origine puis mettre à jour les documents cibles pour qu’ils reflètent vos modifications.
1 Dans le document d’origine, cliquez deux fois sur une occurrence, ou sélectionnez une instance et choisissez
Modification > Symbole > Modifier le symbole.
2 Modifiez le symbole.
3 Enregistrez le fichier.
4 Dans le document dans lequel le symbole a été importé, sélectionnez le symbole dans le panneau Bibliothèque de
documents.
5 Dans le menu Options du panneau Bibliothèque de documents, cliquez sur Mettre à jour.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 169
Styles, symboles et adresses URL
Remarque : pour mettre à jour tous les symboles importés, sélectionnez tous les symboles dans le
panneau Bibliothèque de documents, puis sélectionnez Mettre à jour.
Création de symboles imbriqués
On dit d’un symbole créé dans un autre qu’il est imbriqué.
1 Créez un objet sur une page à l’aide de l’outil Vecteur, un rectangle, par exemple.
2 Cliquez avec le bouton droit de la souris sur le rectangle et sélectionnez Convertir en symbole.
3 Dans la boîte de dialogue Convertir en symbole, procédez de la manière suivante :
a Attribuez un nom au symbole, Symbole A, par exemple.
b Si vous avez l’intention de lui appliquer la mise à l’échelle en 9 tranches, sélectionnez Activer les repères de mise
à l’échelle à 9 tranches.
4 Cliquez deux fois sur l’icône « + » au centre du symbole.
5 Répétez les étapes 1 à 4 pour créer un autre symbole, Symbole B. Parce que vous l’avez créé dans le Symbole A, il
est imbriqué dans celui-ci.
Remarque : Libre à vous de créer plusieurs symboles imbriqués.
Mise à l’échelle en 9 tranches de symboles imbriqués
Vous pouvez créer des symboles au sein d’un symbole. Il est possible de mettre individuellement à l’échelle ces
symboles, qui sont dits imbriqués.
Avant de procéder à la mise à l’échelle en 9 tranches d’un symbole, effectuez les opérations suivantes.
• Lorsque vous créez le symbole, sélectionnez Activer les repères de mise à l’échelle à 9 tranches.
• Veillez à activer le mode de modification du symbole à mettre à l’échelle. Pour ce faire, cliquez deux fois sur l’icône
« + » du symbole le plus imbriqué.
Lorsque vous transformez des symboles imbriqués en leur appliquant une mise à l’échelle en 9 tranches, vous
pouvez intervenir sur chacun d’eux individuellement. Imaginons par exemple trois niveaux d’imbrication : le
symbole A se trouve dans le symbole B, qui se trouve dans le symbole C. Vous pouvez mettre à l’échelle les symboles
A (le plus imbriqué) et B (intermédiaire) par rapport à leurs repères de mise à l’échelle en 9 tranches. Pour ce faire,
veillez d’abord à activer le mode de modification du symbole le plus imbriqué. En mode de modification en place,
seul le panneau Bibliothèque permet de visualiser les repères de mise à l’échelle en 9 tranches des symboles
imbriqués. Cliquer deux fois sur un symbole ne permet pas d’afficher ces repères sur la zone de travail.
Activation de la mise à l’échelle en 9 tranches d’un symbole existant
1 Activez l’affichage dans lequel vous avez créé le symbole.
2 Sélectionnez le symbole dans le panneau Bibliothèque de documents et cliquez sur Propriétés du symbole.
Remarque : Si ce panneau n’est pas visible, sélectionnez Fenêtre > Bibliothèque de documents pour l’afficher.
3 Dans la boîte de dialogue Convertir en symbole, sélectionnez Activer les repères de mise à l’échelle à 9 tranches.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 170
Styles, symboles et adresses URL
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 URL à des tranches, à des zones sensibles et à des boutons. Pour stocker, modifier et organiser des URL en vue de
leur réutilisation, créez une bibliothèque d’adresses URL dans le panneau URL.
Par exemple, si votre site Web contient plusieurs boutons de navigation permettant de revenir à la page d’accueil,
ajoutez l’URL de cette dernière au panneau URL. Affectez ensuite cette URL à chaque bouton de navigation en la
sélectionnant dans la bibliothèque d’URL. Utilisez la fonction Rechercher et remplacer pour changer une URL dans
plusieurs documents (voir la section « Recherche et remplacement » à la page 297).
Les bibliothèques d’URL sont disponibles pour l’ensemble des documents de Fireworks et sont enregistrées entre deux
sessions.
A propos des URL absolues et relatives
Vous pouvez entrer une URL absolue ou relative dans le panneau URL.
• Pour lier une page Web située hors de votre site Web, utilisez une URL absolue.
• Pour lier une page Web de votre site, vous pouvez utiliser l’une ou l’autre.
Les URL absolues sont des adresses URL complètes incluant le protocole de serveur (généralement http:// pour les
pages Web). Par exemple, http://www.adobe.com/support/fireworks est l’URL absolue de la page Web du Centre
d’assistance de 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 URL relatives sont
généralement les plus simples à utiliser pour établir un lien avec un fichier placé dans le même dossier que le
document actif. Les exemples suivants présentent la syntaxe 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 au-dessus 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 nommé htmldocs, figurant dans le dossier
contenant le document source.
Lien vers des pages dans un document Fireworks
Dans un document Fireworks, vous pouvez créer des liens entre plusieurs pages en utilisant des URL pour chaque
page. Le menu contextuel Lien, présent dans l’inspecteur des propriétés et dans le panneau URL, contient la liste des
adresses URL de chaque page d’un document. Sélectionnez l’une de ces URL pour établir le lien à la page
correspondante.
Affectation d’une autre extension que .htm aux URL de page par défaut
1 Le document étant ouvert, choisissez Fichier > Exporter.
2 Sélectionnez Documents HTML et Images.
3 Cliquez sur le bouton Options.
4 Dans l’onglet Général, sélectionnez une extension de fichier dans le menu contextuel Extension, puis cliquez
sur OK.
5 Dans la boîte de dialogue Exporter, cliquez sur Annuler.
UTILISATION DE FIREWORKS CS5 171
Dernière mise à jour le 29/4/2010
Styles, symboles et adresses URL
Affectation d’une URL à un objet Web
1 Dans le panneau URL, entrez l’URL dans la zone de texte URL active.
2 Cliquez sur le bouton Ajouter l’URL active à la bibliothèque (+) pour ajouter l’URL à la bibliothèque d’URL.
3 Sélectionnez un objet Web.
4 Sélectionnez l’URL dans le panneau d’aperçu des URL.
Création d’une bibliothèque d’URL
Les bibliothèques regroupent les URL liées, ce qui en facilite l’accès. Vous pouvez enregistrer les URL dans la
bibliothèque d’URL par défaut (URLs.htm) ou dans une bibliothèque que vous avez créée. Vous pouvez également
importer les URL d’un document HTML existant et les regrouper dans une bibliothèque.
La bibliothèque URLs.htm et les nouvelles bibliothèques que vous créez se trouvent dans le dossier
Adobe/Fireworks CS5/URL Libraries, dans votre dossier de profil utilisateur Application Data (Windows) ou
Application Support (Mac OS).
Pour plus d’informations sur l’emplacement de ces dossiers, reportez-vous à la section « Utilisation des fichiers de
configuration » à la page 316.
Création d’une bibliothèque d’URL
1 Dans le menu Options du panneau URL, cliquez sur Nouvelle bibliothèque d’URL.
2 Entrez le nom de la bibliothèque dans la zone, puis cliquez sur OK.
Ajout d’une nouvelle URL à une bibliothèque d’URL
1 Dans le menu contextuel Bibliothèque, sélectionnez une bibliothèque.
2 Entrez une URL dans la zone Lien.
3 Cliquez sur le bouton Plus (+).
Ajout simultané d’une URL à la bibliothèque et affectation de cette URL à un objet Web
1 Sélectionnez l’objet.
2 Pour entrer l’URL, exécutez l’une des actions suivantes :
• Dans le menu Options du panneau URL, cliquez sur Ajouter une URL, entrez une URL absolue ou relative, puis
cliquez sur OK.
• Entrez une URL dans la zone Lien, puis cliquez sur le bouton Plus (+).
L’URL apparaît dans le panneau d’aperçu des URL.
Ajout d’URL utilisées à une bibliothèque d’URL
1 Dans le menu contextuel Bibliothèque, sélectionnez une bibliothèque.
2 Dans le menu Options du panneau URL, sélectionnez Ajouter les URL utilisées à la bibliothèque.
Suppression d’une URL sélectionnée du panneau d’aperçu des URL
❖ Cliquez sur le bouton Supprimer l’URL de la bibliothèque
dans la partie inférieure du panneau URL.
Suppression de la bibliothèque de toutes les adresses URL inutilisées
1 Dans le menu Options du panneau URL, sélectionnez Effacer les URL inutilisées.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 172
Styles, symboles et adresses URL
2 Cliquez sur OK.
Modification des URL
Vous pouvez modifier une occurrence d’URL unique, ou encore appliquer une modification à toutes les occurrences.
1 Sélectionnez l’URL dans le panneau d’aperçu des URL.
2 Dans le menu Options du panneau URL, cliquez sur Modifier une URL.
3 Modifiez l’adresse URL.
4 Pour mettre à jour ce lien dans le document entier, sélectionnez l’option Changer toutes les occurrences dans le
document.
Importation et exportation d’adresses URL
Vous pouvez exporter des URL, puis les importer dans un autre document Fireworks. Vous pouvez également
importer toutes les URL dans un document HTML existant.
Exportation d’URL
1 Dans le menu Options du panneau URL, cliquez sur Exporter des URL.
2 Indiquez un nom de fichier, puis cliquez sur Enregistrer.
Un fichier HTML est créé ; il contient les URL exportées.
Importation d’URL
1 Dans le menu Options du panneau URL, cliquez sur Importer des URL.
2 Sélectionnez un fichier HTML, puis cliquez sur Ouvrir.
Toutes les URL de ce fichier sont importées.
Dernière mise à jour le 29/4/2010
Chapitre 12 : Tranches, survols et zones
sensibles
Création et modification de tranches
Les tranches sont les éléments de base de l’interactivité dans Adobe® Fireworks®. Les tranches sont des objets Web qui
existent sous forme de code HTML. Vous pouvez les afficher, les sélectionner et les renommer via le calque Web dans
le panneau Calques.
Le découpage consiste à diviser un document Fireworks en plusieurs segments dont chacun sera exporté dans un
fichier distinct. Pendant l’exportation, Fireworks crée un fichier HTML contenant le code des tables permettant de
réassembler le graphique dans un navigateur.
Le découpage consiste à diviser un document en plusieurs segments dont chacun sera exporté dans un fichier distinct.
Le découpage d’une image présente principalement trois avantages :
Optimisation des images Pour un téléchargement plus rapide.
Accroissement de l’interactivité Les images peuvent répondre aux événements de souris.
Simplification des mises à jour Pour les sections de pages Web modifiées fréquemment (photos et noms d’une page
consacrée à l’employé du mois, par exemple).
173
UTILISATION DE FIREWORKS CS5 174
Dernière mise à jour le 29/4/2010
Tranches, survols et zones sensibles
Création de tranches rectangulaires
Pour créer des tranches rectangulaires, dessinez un tracé à l’aide de l’outil Tranche ou insérez une tranche en prenant
comme base un objet sélectionné. Utilisez les repères de découpe (lignes qui s’étendent à partir de l’objet tranche) pour
définir les limites des fichiers d’image qui seront obtenus par fractionnement du document à l’exportation.
Tracé d’un objet tranche rectangulaire
1
Sélectionnez l’outil Tranche
.
2 Faites glisser le pointeur pour dessiner l’objet tranche.
Remarque : pour régler la position d’une tranche à mesure que vous faites glisser le pointeur pour la dessiner, faites
glisser la tranche vers un autre emplacement de la zone de travail tout en maintenant la barre d’espace enfoncée.
Relâchez la barre d’espace pour continuer à dessiner la tranche.
Création d’une tranche rectangulaire d’après un objet sélectionné
1 Sélectionnez la commande Edition > Insérer > Tranche rectangulaire. La tranche est un rectangle dont la zone
comprend les bords les plus extérieurs de l’objet sélectionné.
2 Si plusieurs objets sont sélectionnés, sélectionnez l’option Simple pour créer un seul objet tranche couvrant tous les
objets sélectionnés ou Multiple pour créer un objet tranche par objet sélectionné.
Création de tranches non rectangulaires
Pour créer des tranches non rectangulaires, utilisez l’outil Tranche polygonale. Les tranches non rectangulaires sont
pratiques pour essayer d’effectuer de façon interactive une association à une image non rectangulaire.
Dessin d’objets tranches polygonaux
1 Sélectionnez l’outil Tranche polygonale
.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 175
Tranches, survols et zones sensibles
2 Cliquez pour placer les points vectoriels du polygone. Cela est nécessaire car l’outil Tranche polygonale trace des
segments de droite.
3 Lorsque vous tracez un objet tranche polygonal autour d’objets ayant des bords lisses, veillez à inclure l’objet en
entier pour éviter de créer des bords nets indésirables sur le graphique de la tranche.
4 Pour arrêter l’utilisation de l’outil Tranche polygonale, sélectionnez un autre outil dans le panneau Outils. Il n’est
pas nécessaire de cliquer sur le premier point pour fermer le polygone.
Remarque : les tranches polygonales associent tables HTML et cartes-images ; elles nécessitent donc davantage de
code que les tranches rectangulaires. L’utilisation d’un grand nombre de tranches polygonales risque d’augmenter le
temps de traitement du graphique dans le navigateur Web.
Création d’une tranche polygonale à partir d’un objet ou tracé vectoriel
1 Sélectionnez un tracé vectoriel.
2 Sélectionnez la commande Edition > Insertion > Tranche polygonale.
Création de tranches de texte HTML
Une tranche HTML représente une zone dans laquelle un texte HTML ordinaire apparaît dans le navigateur. Le texte
HTML affiché dans la cellule de la table définie par la tranche est ensuite exporté.
Les tranches HTML permettent de mettre à jour rapidement le texte des sites Web sans créer de nouveaux graphiques.
Remarque : le corps et le type de la police de caractères pouvant être définis dans le navigateur, l’aspect des tranches de
texte HTML peut varier selon les navigateurs et les systèmes d’exploitation.
1 Tracez un objet tranche rectangulaire
2 Une fois l’objet tranche sélectionné, sélectionnez HTML dans le menu contextuel Type de l’inspecteur des
propriétés.
3 Cliquez sur Edition.
4 Saisissez le texte dans la fenêtre Modifier tranche du code HTML, puis insérez les balises HTML appropriées pour
le mettre en forme.
Remarque : vous pouvez également appliquer les balises de mise en forme de texte HTML une fois le texte HTML
exporté.
5 Cliquez sur OK pour appliquer les modifications et refermer la fenêtre Modifier tranche du code HTML.
Le texte et les balises HTML saisis figurent dans le fichier PNG Fireworks sous forme de code HTML brut, dans le
corps de la tranche.
UTILISATION DE FIREWORKS CS5 176
Dernière mise à jour le 29/4/2010
Tranches, survols et zones sensibles
Affichage des tranches et des repères de découpe
Vous pouvez agir sur la visibilité des tranches et des autres objets Web de votre document à l’aide des
panneaux Calques et Outils. Lorsque vous masquez des tranches dans l’ensemble du document, vous masquez du
même coup les repères de découpe.
Affichage et sélection de tranches
Le calque Web affiche tous les objets Web présents dans le document.
1 Choisissez Fenêtre > Calques.
2 Développez le calque Web en cliquant sur le triangle.
3 Cliquez sur le nom d’une tranche pour la sélectionner.
Affichage et masquage des tranches
Une tranche masquée est invisible dans le fichier PNG Fireworks. Les objets tranches masqués peuvent être exportés
dans le code HTML.
• Pour masquer une tranche, cliquez sur l’icône représentant un œil
panneau Calques.
en regard de l’objet Web correspondant du
• Pour afficher une tranche masquée, cliquez sur la colonne Œil pour rétablir sa visibilité.
• Pour masquer ou afficher la totalité des zones sensibles, des tranches et des repères, cliquez sur le bouton
Masquer/Afficher les tranches
dans la section Outils Web du panneau Outils. Vous pouvez également
cliquer sur l’icône représentant un œil située en regard du calque Web, dans le panneau Calques.
• Pour masquer ou afficher des repères de découpe dans un document, sélectionnez Affichage > Repères de découpe.
Modification de la couleur des objets tranches et des repères de découpe
Pour faciliter l’affichage et l’organisation des tranches et des repères de découpe, vous pouvez leur affecter des couleurs
uniques.
• Pour modifier la couleur d’un objet tranche sélectionné, sélectionnez une couleur dans la case de couleur de
l’inspecteur des propriétés.
• Pour modifier la couleur des repères de découpe, choisissez la commande Edition > Préférences (Windows) ou
Fireworks > Préférences (Mac OS). Ensuite, sélectionnez une nouvelle couleur de repère de découpe dans la
catégorie Repères et Grilles de la boîte de dialogue Préférences.
Remarque : lorsque vous prévisualisez le document, les tranches désélectionnées s’affichent comme du papier calque
blanc.
Voir aussi
« Préférences de repères et de grilles » à la page 312
Modification des tranches
L’utilisation d’une disposition de tranche est comparable à celle d’un tableau dans une application de traitement de
texte. Lorsque vous faites glisser un repère de découpe pour redimensionner une tranche, toutes les tranches
rectangulaires adjacentes sont redimensionnées en conséquence.
Vous pouvez également redimensionner et transformer des tranches dans l’inspecteur des propriétés.
UTILISATION DE FIREWORKS CS5 177
Dernière mise à jour le 29/4/2010
Tranches, survols et zones sensibles
Modification des tranches par déplacement des repères
Les repères de découpe déterminent le périmètre et la position de la tranche. Les repères qui s’étendent au-delà des
objets tranches déterminent la manière dont le reste du document sera découpé lors de l’exportation. Vous pouvez
modifier la forme d’un objet tranche rectangulaire en faisant glisser les repères de découpe qui entourent l’objet.
Ce procédé ne vous permet pas de redimensionner des objets tranches non rectangulaires.
Redimensionnement d’un objet tranche par glissement de ses repères de découpe
Remarque : lorsque vous faites glisser des repères de découpe entourant un bouton Fireworks dans la fenêtre de
document, vous redimensionnez également la tranche définissant la zone active de ce bouton. Cependant, vous ne pouvez
pas supprimer la zone active d’un bouton Fireworks en faisant glisser les repères de découpe qui l’entourent.
Si plusieurs objets tranches sont alignés sur un même repère de découpe, faites glisser ce repère pour redimensionner
simultanément tous les objets tranches.
Redimensionnement de plusieurs objets tranches par glissement d’un seul repère
De plus, lorsque vous faites glisser un repère le long d’une coordonnée, tous les autres repères figurant sur cette
coordonnée suivent le mouvement.
Redimensionnement d’une ou plusieurs tranches
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 l’emplacement souhaité.
Les tranches et toutes les tranches adjacentes sont redimensionnées.
Repositionnement d’un repère de découpe tout au bord de la zone de travail
❖ A l’aide de l’outil Pointeur ou Sous-sélection, faites glisser le repère de découpe au-delà des limites de la zone de
travail.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 178
Tranches, survols et zones sensibles
Déplacement de repères de découpe adjacents
1 Tout en maintenant la touche Maj enfoncée, faites 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’emplacement souhaité.
Tous les repères de découpe que vous faites ainsi glisser seront déplacés vers cet emplacement.
Pour annuler cette opération et restaurer les positions initiales de tous les repères de découpe, relâchez la
touche Maj avant de relâcher le bouton de la souris.
Modification des tranches à l’aide d’outils
Vous pouvez utiliser les outils Pointeur, Sous-sélection et Transformation pour remodeler ou redimensionner une
tranche.
Remarque : seules les tranches polygonales peuvent être inclinées ou déformées.
La taille des objets tranches adjacents n’étant pas automatiquement ajustée, des tranches risquent de se superposer
après le redimensionnement ou la modification de la forme des tranches. Lorsque des tranches se chevauchent et que
des effets interactifs leur sont affectés, la tranche située au sommet de la pile est prioritaire. Pour éviter le
chevauchement des tranches, utilisez les repères de découpe pour modifier les tranches.
❖ Pour modifier la forme d’une tranche sélectionnée, procédez de l’une des manières suivantes :
• Sélectionnez l’outil Pointeur ou Sous-sélection, et faites glisser les points d’angle de la tranche pour modifier sa
forme.
• Effectuez la transformation souhaitée à l’aide d’un outil de transformation. La transformation d’une tranche
rectangulaire peut changer sa forme, sa position ou ses dimensions, mais la tranche elle-même
reste rectangulaire.
• Utilisez l’inspecteur des propriétés pour modifier la position et la taille d’un objet tranche de façon numérique.
Suppression d’une tranche
1 Dans le panneau Calques, sélectionnez la tranche dans le calque Web.
2 Au bas de ce panneau, cliquez sur l’icône de la corbeille.
Lorsque vous faites glisser un symbole de bouton de la bibliothèque commune vers la page, une tranche visible sur la
zone de travail, mais non dans le calque Web, est automatiquement créée.
Si vous sélectionnez la tranche sur la zone de travail à l’aide de l’outil Pointeur et la supprimez, le symbole de bouton
tout entier est supprimé. Pour conserver le graphique sous-jacent, sélectionnez la tranche/l’objet sur la zone de travail
à l’aide de l’outil Pointeur, puis sélectionnez Modification > Symbole > Séparer. La tranche disparaît mais le graphique
de bouton de l’état 1 est conservé. Les graphiques des états 2, 3 et 4 sont toutefois perdus.
Tranches interactives
Dans Fireworks, il existe deux moyens de rendre des tranches interactives :
• Pour obtenir une interactivité simple, utilisez la méthode du survol par glisser-déposer.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 179
Tranches, survols et zones sensibles
• Pour obtenir une interactivité plus complexe, utilisez le panneau Comportements. Les comportements de
Fireworks sont compatibles avec ceux d’Adobe Dreamweaver®. Après avoir exporté un survol de Fireworks vers
Dreamweaver, vous pouvez modifier les comportements Fireworks à l’aide du panneau Comportements
de Dreamweaver.
Ajout d’une interactivité simple aux tranches
La technique de survol par glisser-déposer est la plus rapide et la 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 tranche lorsque le pointeur la
survole. Le résultat obtenu est un graphique appelé image survolée.
Lorsqu’une tranche est sélectionnée, un petit cercle avec un réticule apparaît au centre de la tranche. Il s’agit d’une
poignée de comportement.
A
B
C
A. Nom de la tranche B. Poignée de comportement C. Poignée de sélection
En faisant glisser la poignée de comportement d’une tranche de déclenchement et en la déposant sur une tranche cible,
vous pouvez aisément créer des effets de survol et de permutation d’images. La tranche de déclenchement et la tranche
cible peuvent correspondre à la même tranche.
Remarque : les zones sensibles disposent également de poignées de comportement pour l’intégration d’effets de survol.
A propos des survols
Les survols fonctionnent tous de la même manière : lorsque le pointeur de la souris survole un graphique, cette action
déclenche l’affichage d’un autre graphique. Le déclencheur est toujours un objet Web (tranche, zone sensible ou
bouton).
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 180
Tranches, survols et zones sensibles
Le survol le plus simple permute une image dans l’état 1 avec une image située directement au-dessous dans l’état 2.
Vous pouvez également concevoir des survols plus élaborés. Les survols de permutation d’images permettent de
permuter des images à partir de n’importe quel état. Les survols séparés permettent de permuter une image à partir
d’une tranche autre que la tranche de déclenchement.
Lorsque vous sélectionnez dans Fireworks un objet Web déclencheur créé à l’aide d’une poignée de comportement ou
du panneau Comportements, toutes ses relations de comportements s’affichent.
Par défaut, un trait de comportement bleu représente une interaction de survol.
Création et association d’un survol simple
Un survol simple permute l’état directement sous l’état du dessus et implique une seule tranche.
1 Assurez-vous que l’objet de déclenchement ne se trouve pas sur un calque partagé.
2 Choisissez Edition > Insertion > Tranche rectangulaire ou Tranche polygonale pour créer une tranche par-dessus
l’objet de déclenchement.
3 Cliquez sur le bouton Nouvel état / Dupliquer l’état dans le panneau Etats pour créer un état.
4 Créez, collez ou importez une image à utiliser pour la permutation dans le nouvel état.
Placez l’image sous la tranche créée à l’étape 2. Même si vous vous trouvez dans l’image 2, la tranche est visible.
5 Sélectionnez Etat 1 dans le panneau Etats pour revenir à l’état associé à l’image d’origine.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 181
Tranches, survols et zones sensibles
6 Sélectionnez la tranche, puis placez le pointeur au-dessus de la poignée de comportement.
Remarque : vous pouvez sélectionner la tranche dans n’importe quel état.
7 Cliquez sur la poignée de comportement et sur Ajouter le comportement Survol simple dans le menu.
8 Cliquez sur l’onglet Aperçu pour tester le survol simple ou appuyez sur la touche F12 pour le prévisualiser dans un
navigateur.
Création et association d’un survol séparé
Un survol séparé permute une image sous un objet Web lorsque le pointeur survole un autre objet Web. En réponse à
un événement souris (survol ou clic), une image s’affiche à un autre endroit de la page Web. L’image survolée est
considérée comme le déclencheur, alors que l’image qui change est considérée comme la cible.
Vous devez tout d’abord configurer le déclencheur, les tranches cibles et l’état dans lequel se trouve l’image de
permutation. Vous devez ensuite relier le déclencheur à la tranche cible à l’aide d’un trait de comportement. Le
déclencheur d’un survol séparé peut être une tranche, une zone sensible ou un bouton.
1 Choisissez Edition > Insertion > Tranche rectangulaire, Tranche polygonale ou Zone sensible pour affecter une
tranche ou une zone sensible à l’image de déclenchement (cette étape n’est pas indispensable si l’objet sélectionné
est un bouton ou si une tranche ou une zone sensible recouvre déjà l’image).
2 Cliquez sur le bouton Nouvel état / Dupliquer l’état dans le panneau Etats pour créer un nouvel état.
3 Placez une deuxième image (la cible) dans le nouvel état.
4 Positionnez l’état n’importe où sur la zone de travail, en évitant l’emplacement situé sous la tranche créée à l’étape 1.
5 Sélectionnez l’image, puis choisissez la commande Edition > Insertion > Tranche rectangulaire ou Tranche
polygonale pour associer une tranche à cette image.
6 Sélectionnez Etat 1 dans le panneau Etats pour revenir à l’état associé à l’image d’origine.
7 Sélectionnez la tranche, la zone sensible ou le bouton qui couvre la zone de déclenchement (l’image d’origine), puis
placez le pointeur sur la poignée de comportement.
8 Faites glisser la poignée de comportement de la tranche de déclenchement ou de la zone sensible vers la tranche
cible.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 182
Tranches, survols et zones sensibles
Le trait de comportement s’étend du centre du déclencheur vers l’angle supérieur gauche de la tranche cible, et la
boîte de dialogue Permuter les images s’affiche.
9 Dans le menu contextuel Permuter l’image à partir de, sélectionnez l’état créé à l’étape 2, puis cliquez sur le
bouton OK.
10 Affichez l’aperçu du survol séparé, puis testez-le.
Application de plusieurs survols à une tranche
Tranche déclenchant des comportements de survol et de survol séparé
1 Faites glisser une poignée de comportement de la tranche sélectionnée vers le bord de cette tranche ou d’une autre
tranche.
• Pour créer une image de permutation, faites glisser la poignée vers le bord supérieur gauche de la même tranche.
• Pour créer un survol séparé, faites-la glisser vers une autre tranche.
2 Sélectionnez l’état de la permutation d’images, puis cliquez sur OK.
Suppression d’un survol par glisser-déposer d’une tranche, d’une zone sensible ou d’un
bouton
❖ Cliquez sur le trait de comportement de couleur bleue à supprimer, puis cliquez sur OK.
Ajout d’une interactivité complexe aux tranches
Utilisez les options du panneau Comportements pour créer et modifier des interactions personnalisées. Les
interactions personnalisées reposent sur des comportements existants.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 183
Tranches, survols et zones sensibles
Options de comportement
Remarque : la méthode de survol par glisser-déposer est recommandée pour les survols simples, séparés et complexes.
Survol simple Permet d’ajouter un comportement de survol à la tranche sélectionnée en utilisant l’état 1 pour l’état
Relevé et l’état 2 pour l’état Au-dessus. Après avoir sélectionné ce comportement, vous devez créer une image dans le
deuxième état, sous la même tranche, pour créer l’état Au-dessus. L’option Survol simple est en fait un groupe de
comportements contenant les comportements Permuter les images et Restaurer la permutation d’images.
Définition de l’image de la barre de navigation Permet de définir une tranche comme faisant partie d’une barre de
navigation Fireworks. Toutes les tranches faisant partie de la barre de navigation doivent posséder ce comportement.
L’option Définir image barre de navigation est en fait un groupe de comportements contenant les comportements
Barre de navigation - Au-dessus, Barre de navigation - Enfoncée et Restaurer la barre de navigation. Ce comportement
est défini automatiquement par défaut lorsque vous créez, avec l’éditeur de boutons, un bouton qui inclut un état
Inclure l’état au-dessus enfoncé ou Afficher l’image enfoncée lors du chargement. Lorsque vous créez un bouton à
deux états, un comportement de survol simple est affecté à sa tranche. Lorsque vous créez un bouton à trois ou quatre
états, un comportement Définir image barre de navigation est affecté à sa tranche.
Remarque : vous ne pouvez pas changer l’événement associé aux comportements Survol simple et Définir image barre de
navigation.
Permutation d’images Permet de remplacer l’image qui figure sous la tranche spécifiée par le contenu d’un autre état
ou d’un fichier externe.
Restauration de permutation d’images Permet de redonner son aspect d’origine à l’objet cible de l’état 1.
Barre de navigation - Au-dessus Indique l’état Au-dessus de la tranche sélectionnée lorsqu’elle fait partie d’une barre
de navigation et permet éventuellement de spécifier les états Précharger les images et Inclure l’état au-dessus enfoncé.
Barre de navigation - Enfoncée Indique l’état Enfoncé de la tranche sélectionnée lorsqu’elle fait partie d’une barre de
navigation et permet éventuellement de spécifier l’état Précharger les images.
Restaurer la barre de navigation Permet de rétablir l’état Relevé de toutes les autres tranches de la barre de navigation.
Afficher le menu contextuel Permet d’affecter un menu contextuel à une tranche ou à une zone sensible. Vous pouvez
appliquer un comportement de menu contextuel à l’aide de l’éditeur de menus contextuels.
Définition du texte de la barre d’état Permet de définir le texte d’un message à afficher dans la barre d’état, en bas de
la plupart des fenêtres de navigateur.
Association de comportements à une tranche sélectionnée
1 Cliquez sur le bouton Ajouter un comportement dans le panneau Comportements.
A B
A. Bouton Ajouter un comportement B. Bouton Supprimer le comportement
2 Sélectionnez un ou plusieurs comportements.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 184
Tranches, survols et zones sensibles
Changement de l’événement de souris activant le comportement
1 Sélectionnez la tranche ou zone sensible de déclenchement qui contient le comportement à modifier.
Tous les comportements associés à cette tranche ou zone sensible s’affichent dans le panneau Comportements.
2 Sélectionnez le comportement à modifier.
3 Cliquez sur la flèche située à côté de l’événement, puis sélectionnez un nouvel événement dans le menu contextuel.
Cette option n’est pas disponible pour le comportement de survol simple.
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 lorsque vous cliquez sur l’objet de déclenchement.
onLoad Déclenche le comportement lorsque la page Web est chargée.
Utilisation de fichiers d’image externes pour les images de permutation
Vous pouvez utiliser une image externe au document Fireworks actif comme source pour une permutation d’images.
Les images sources peuvent être au format GIF, GIF animé, JPEG ou PNG. Si vous sélectionnez un fichier externe
comme source d’images, Fireworks permute ce fichier avec la tranche cible lorsque la permutation d’images est
déclenchée dans un navigateur Web.
Si le fichier n’a pas la même largeur et la même hauteur que la tranche dans laquelle s’effectue la permutation, le
navigateur redimensionne le fichier pour l’adapter à l’objet tranche. Le redimensionnement d’un fichier peut être
préjudiciable à sa qualité, et tout particulièrement pour les images au format GIF animé.
1 Dans la boîte de dialogue Permuter les images, Barre de navigation - Au-dessus ou Barre de navigation - Enfoncée,
sélectionnez Fichier d’image, puis cliquez sur l’icône de dossier.
2 Recherchez le fichier à utiliser, puis cliquez sur Ouvrir.
3 Si le fichier externe est au format GIF animé, désélectionnez l’option Précharger les images. Cela permet d’éviter les
problèmes d’affichage des fichiers GIF en tant qu’états de survols.
Remarque : Fireworks crée des chemins de document vers les fichiers d’image. Si vous exportez votre document pour
l’utiliser sur le Web, assurez-vous que le fichier d’image externe soit accessible à partir du code HTML Fireworks
exporté. Placez les fichiers externes sur votre site local avant de les utiliser dans Fireworks en tant qu’images de
permutation ; par ailleurs, veillez à télécharger les fichiers d’image externes lorsque vous transférez les fichiers sur
le Web.
Préparation des tranches pour l’exportation
Pour préparer les tranches en vue de leur exportation, utilisez l’inspecteur des propriétés.
Propriétés de tranche dans l’inspecteur des propriétés
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 185
Tranches, survols et zones sensibles
Pour optimiser rapidement une tranche, sélectionnez un paramètre prédéfini dans le menu contextuel Paramètres
d’exportation de l’inspecteur des propriétés ou du panneau Optimisation. Pour afficher les options détaillées,
reportez-vous à la section « Optimisation dans l’espace de travail » à la page 240.
Affectation d’adresses URL à des tranches
Lorsque vous affectez une URL à une tranche, l’utilisateur peut accéder à cette adresse en cliquant sur la zone définie
par la tranche dans son navigateur Web.
❖ Pour affecter une adresse URL, saisissez-la dans la zone de texte Lien de l’inspecteur des propriétés.
Si votre fichier contient un certain nombre de pages que vous avez l’intention d’exporter, ouvrez le menu contextuel
Lien, puis sélectionnez l’une des pages pour l’URL. Une fois les pages exportées, ce lien renvoie automatiquement
l’utilisateur vers la page spécifiée.
Si vous envisagez de réutiliser des adresses URL, créez une bibliothèque d’URL dans le panneau URL.
Saisie d’un texte de description
La saisie d’un texte de description bref et clair est important compte tenu du nombre croissant de personnes
malvoyantes qui utilisent des logiciels de lecture d’écran. Ces applications transmettent à l’utilisateur une description
sonore du texte de description lorsqu’il passe le pointeur sur les graphiques d’une page Web.
❖ Dans l’inspecteur des propriétés, entrez le texte dans le champ de texte secondaire.
Sélection de tranches ou de zones sensibles sans texte de description
Vous pouvez sélectionner les tranches et zones sensibles pour lesquelles vous n’avez pas indiqué de texte de
description. Vous pouvez alors définir un texte de description par défaut pour ces objets.
❖ Sélectionnez Commandes > Web > Sél. texte ALT vides.
Définition du texte de description par défaut
Vous pouvez sélectionner les tranches et zones sensibles pour lesquelles vous n’avez pas indiqué de texte de description
et définir un texte ALT par défaut pour celles-ci.
❖ Sélectionnez Commandes > Web > Texte ALT et entrez le texte de description par défaut.
Affectation d’une cible à une tranche ou à une zone sensible sélectionnée
Une cible est un autre état de page Web ou un autre navigateur Web dans lequel s’ouvre le document lié.
❖ Dans la zone de texte Cible, entrez le nom de l’état HTML ou sélectionnez une cible réservée dans le menu
contextuel Cible :
_blank Permet de charger les documents liés dans une nouvelle fenêtre, sans nom, du navigateur.
_parent Permet de charger les documents liés dans le jeu d’états parent ou dans la fenêtre de l’état contenant le lien.
Si l’état contenant le lien n’est pas imbriqué, le document lié est chargé dans la fenêtre principale du navigateur.
_self Permet de charger le document lié dans le même état ou la même fenêtre que le lien. Il s’agit de la cible par
défaut, de sorte qu’il est le plus souvent inutile de la spécifier.
_top Permet de charger les documents liés dans la fenêtre principale du navigateur, remplaçant ainsi tous les états.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 186
Tranches, survols et zones sensibles
Affectation de nom aux tranches
Un découpage permet de découper une image en plusieurs parties. Etant donné que chaque partie d’état est exportée
séparément, chacune doit porter un nom unique. Pour cela, vous pouvez utiliser la convention de nom par défaut, ou
affecter des noms personnalisés.
Remarque : n’ajoutez pas d’extension au nom de fichier. Fireworks ajoute automatiquement les extensions aux noms des
fichiers de tranche lors de l’exportation.
Saisie d’un nom de tranche personnalisé
❖ Procédez de l’une des manières suivantes :
• Sélectionnez la tranche dans la zone de travail, entrez un nom dans la zone Modifier le nom de l’objet de
l’inspecteur des propriétés, puis appuyez sur Entrée.
• Dans le calque Web, cliquez deux fois sur le nom de la tranche, entrez un nouveau nom, et appuyez sur la
touche Entrée.
Affectation automatique d’un nom à un fichier de tranche
❖ Lorsque vous exportez votre image découpée en tranches, entrez un nom dans la zone de texte Nom de fichier
(Windows) ou Nom (Mac OS) de la boîte de dialogue d’exportation. N’ajoutez pas d’extension de fichier.
Modification de la convention de dénomination par défaut
Vous pouvez créer une convention de nom comprenant jusqu’à huit éléments. Un élément peut comprendre l’une des
options de dénomination automatique suivantes :
Option
Description
Aucune
Aucun nom n’est appliqué à l’élément.
nom document
L’élément prend le nom du document.
« tranche »
Vous pouvez insérer le mot « tranche » dans la convention de dénomination.
Tranche n° (1, 2, 3, ...)
L’élément est étiqueté de façon numérique ou alphabétique, selon le style sélectionné.
Tranche n° (01, 02, 03, ...)
Tranche n° (A, B, C, ...)
Tranche n° (a, b, c, ...)
Ligne/colonne (l3_c2, l4_c7, ...)
Ligne (l##) et Colonne (c##) 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é
L’élément utilise l’un de ces caractères, en général comme séparateur entre d’autres éléments.
Point
Espace
Tiret
Par exemple, si le nom du document est mondoc, selon la convention nom.doc + « tranche » + n° de tranche (A,B,C...),
la tranche est appelée mondoctrancheA.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 187
Tranches, survols et zones sensibles
Si une tranche s’étend sur plusieurs états, Fireworks ajoute par défaut un numéro au nom de fichier de chaque état. Par
exemple, si vous entrez le nom de fichier de tranche personnalisé accueil pour un bouton à trois états, Fireworks
nomme le graphique de 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 dénomination pour les tranches multi-états, dans la boîte
de dialogue Configuration HTML.
1 Choisissez Fichier > Configuration HTML pour ouvrir la boîte de dialogue Configuration HTML.
2 Cliquez sur l’onglet Propre au document.
3 Dans la section Noms des fichiers de découpe, créez votre propre convention de nom en effectuant des sélections
dans les listes.
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 sélectionnez Aucun comme option pour la convention de nom des tranches.
Si vous sélectionnez cette option pour l’un des trois premiers menus, Fireworks exporte des fichiers de tranche qui
s’écraseront successivement. Vous n’obtiendrez en définitive qu’un seul graphique exporté et un tableau affichant ce
graphique dans chaque cellule.
Définition du mode d’exportation des tables HTML
Le découpage 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 au format HTML un document Fireworks découpé, le document est assemblé à l’aide d’une
table HTML. Chaque élément découpé du document Fireworks occupe une cellule de la table. Une fois exportée, une
tranche Fireworks correspond à une cellule de la table dans le code HTML. Vous pouvez spécifier la méthode de
reconstruction d’une table Fireworks dans un navigateur (en précisant si vous souhaitez utiliser des espaces ou des
tables imbriquées).
• Les séparateurs sont des images permettant d’aligner correctement les cellules d’un tableau lorsqu’elles sont
affichées dans un navigateur.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 188
Tranches, survols et zones sensibles
• Une table imbriquée est littéralement une table figurant dans une autre table. Les tables imbriquées ne comportent
pas de séparateurs. Elles peuvent mettre plus de temps à être chargées dans les navigateurs mais, dans la mesure où
elles ne comportent pas de séparateurs, il est plus simple de modifier leur code HTML.
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 Dans le menu contextuel Espace avec, sélectionnez une option d’espacement :
Tables imbriquées — Pas de séparateurs Permet de créer une table imbriquée sans séparateur.
Table unique — Pas de séparateur Permet de créer une seule table sans séparateur. Cette option risque
d’entraîner un affichage incorrect dans certains cas.
Espace transparent de 1 pixel Permet d’utiliser une image GIF transparente de 1 pixel sur 1 pixel comme
séparateur, lequel peut ensuite être redimensionné, si nécessaire, dans le code HTML. Cela génère une 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 droite
de la table.
4 Sélectionnez une couleur de cellule pour les tranches HTML :
Remarque : si vous sélectionnez une couleur dans la fenêtre contextuelle des couleurs, elle est appliquée aux
tranches HTML uniquement. Les tranches d’image conservent la couleur de la zone de travail.
5 Dans le menu contextuel Contenu, sélectionnez les éléments à insérer dans les cellules vides :
Aucune Laisse les cellules vides.
Image d’espacement 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. Cette cellule est d’aspect creux.
Remarque : des cellules vides ne sont ajoutées que si vous avez désélectionné Inclure les zones sans tranches dans
la boîte de dialogue Exporter pendant l’exportation.
6 Cliquez sur OK.
Remarque : pour appliquer les paramètres par défaut à tous les nouveaux documents, vous pouvez spécifier des
paramètres d’exportation de table pour chaque document, ou utiliser le bouton Paramètres par défaut (dans
l’onglet Propre au document de la boîte de dialogue Configuration HTML).
Zones sensibles et cartes-images
Les concepteurs Web peuvent utiliser des zones sensibles pour créer des petites parties interactives dans un graphique
plus grand en liant des zones de ce graphique Web à une URL. Dans Fireworks, vous pouvez créer une carte-image en
exportant le code HTML d’un document contenant des zones sensibles.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 189
Tranches, survols et zones sensibles
Carte-image avec zones sensibles
Les zones sensibles et les cartes-images utilisent souvent moins de ressources que les graphiques découpés. Le
découpage nécessite davantage de puissance de traitement en raison du code HTML supplémentaire utilisé pour le
téléchargement et le réassemblage des graphiques découpés.
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 le découpage, reportez-vous à la section « Création de
tranches rectangulaires » à la page 174.
Création de zones sensibles
• Les zones sensibles 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 zones sensibles et les cartes-images sont également très intéressantes si le graphique sur lequel vous avez placé
les zones sensibles était mieux exporté sous forme d’un seul fichier graphique. En d’autres termes, l’ensemble du
graphique est mieux exporté en utilisant les mêmes formats de fichier et paramètres d’optimisation.
• Les zones sensibles peuvent prendre une forme rectangulaire, circulaire ou polygonale. Les polygones sont utiles
lorsque vous utilisez des images imbriquées.
• Vous pouvez sélectionner un objet et insérer la zone sensible sur cet objet.
Création d’une zone sensible rectangulaire ou circulaire
1 Dans la section Web du panneau Outils, sélectionnez l’outil Zone sensible rectangulaire ou Zone sensible circulaire.
2 Faites glisser l’outil de zone sensible pour dessiner une zone sensible sur l’une des zones du graphique. Maintenez
la touche Alt (Windows) ou Option (Mac OS) enfoncée pour dessiner à partir du point central.
Remarque : vous pouvez ajuster la position d’une zone sensible à mesure que vous la dessinez. Tout en maintenant le
bouton de la souris et la barre d’espace enfoncés, faites glisser la zone sensible vers un autre emplacement de la zone
de travail. Relâchez la barre d’espace pour continuer à dessiner la zone sensible.
UTILISATION DE FIREWORKS CS5 190
Dernière mise à jour le 29/4/2010
Tranches, survols et zones sensibles
Création d’une zone sensible de forme irrégulière
1
Sélectionnez l’outil Zone sensible polygonale
.
2 Cliquez pour placer des points vectoriels, un peu de la même façon que pour dessiner des segments de droite avec
l’outil Plume. Le fond définit la zone sensible, que le tracé soit ouvert ou fermé.
Création d’une zone sensible en traçant un ou plusieurs objets sélectionnés
1 Sélectionnez plusieurs objets, puis choisissez la commande Edition > Insertion > Zone sensible.
2 Cliquez sur Simple pour créer une seule zone sensible rectangulaire couvrant tous les objets, ou sur Multiple pour
créer plusieurs zones sensibles (une par objet).
Le calque Web affiche la ou les nouvelles zones sensibles.
Conversion d’une zone sensible sélectionnée en rectangle, cercle ou polygone
❖ Dans l’inspecteur des propriétés, sélectionnez Rectangle, Cercle ou Polygone dans le menu contextuel Forme de la
zone sensible.
Préparation des zones sensibles pour l’exportation
Affectez des propriétés de zone sensible (adresses URL ou texte de description, par exemple) dans l’inspecteur des
propriétés, comme vous le feriez pour les propriétés de tranches.
Création de cartes-images
Après avoir inséré des zones sensibles sur un graphique, exportez le graphique en tant que carte-image pour qu’il
fonctionne 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 zones sensibles et aux liens URL correspondants. Les
exportations de Fireworks ne peuvent produire que des cartes-images côté client.
Vous pouvez également copier la carte-image dans le Presse-papiers puis la coller dans Dreamweaver ou dans un autre
éditeur HTML.
Pour plus d’informations sur l’insertion de contenus Fireworks exportés dans Dreamweaver, reportez-vous à la section
« Utilisation de Dreamweaver » à la page 266
1 Optimisez le graphique avant son exportation.
2 Choisissez Fichier > Exporter.
3 Si vous exportez l’image, accédez au dossier de destination du fichier HTML, puis nommez le fichier.
Si vous avez déjà créé la structure de fichiers locale de votre site Web, enregistrez le graphique dans le dossier
approprié de ce site.
4 Dans le menu contextuel Type, sélectionnez Documents HTML et Images.
5 Dans le menu contextuel HTML, sélectionnez une option :
Exporter le fichier HTML Crée le fichier HTML requis et les fichiers de graphiques correspondants à importer dans
Dreamweaver ou dans un autre éditeur HTML.
Copier dans le Presse-papiers Copie tous les codes HTML (ainsi qu’une table si le document est découpé en
tranches) dans le Presse-papiers ; ils seront ensuite collés dans Dreamweaver ou dans un autre éditeur HTML.
Remarque : pour les tranches, sélectionnez Aucun si le document ne contient pas de tranches.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 191
Tranches, survols et zones sensibles
6 (Exportation uniquement) Si nécessaire, sélectionnez Placer les images dans des sous-dossiers, puis ouvrez le
dossier approprié.
7 Cliquez sur Enregistrer.
8 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. Par défaut, aucun commentaire n’est
ajouté dans le code HTML. Pour en ajouter, sous l’onglet Général de la boîte de dialogue Configuration HTML,
cliquez sur Inclure les commentaires HTML.
Création de survols avec zones sensibles
Utilisez la méthode du survol par glisser-déposer pour associer un effet de survol séparé à une zone sensible. La zone
cible doit être délimitée par une tranche. Les effets de survol sont appliqués aux zones sensibles de la même manière
que pour les tranches.
Remarque : une zone sensible ne peut déclencher qu’un survol séparé. Elle ne peut pas être la cible d’un survol provenant
d’une autre zone sensible ou d’une tranche.
Une fois que vous avez affecté un survol séparé à une zone sensible, le trait de comportement de connexion n’est visible
que lorsque la zone sensible est sélectionnée.
Utilisation de zones sensibles par-dessus des tranches
Si vous ne souhaitez utiliser qu’une petite partie d’un large graphique en tant que déclencheur, placez une zone sensible
par-dessus une tranche pour déclencher une action ou un comportement.
Vous pouvez également placer une tranche par-dessus le graphique, puis une zone sensible au-dessus du texte. Le
survol du texte par le pointeur déclenche alors l’effet de survol, mais le graphique entier placé sous la tranche permute
lorsque l’effet de survol survient.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 192
Tranches, survols et zones sensibles
Remarque : évitez de créer des zones sensibles qui chevauchent plusieurs tranches.
1 Insérez une tranche par-dessus l’image originale de la permutation.
2 Dans le panneau Etats, créez un état, puis insérez l’image qui sera utilisée comme image permutée. Veillez à placer
cette image sous la tranche insérée à l’étape 1.
3 Faites glisser un trait de comportement de la zone sensible vers la tranche contenant l’image à permuter.
4 Dans la liste Permuter l’image à partir de, sélectionnez l’état qui contient l’image survolée, puis cliquez sur OK.
Dernière mise à jour le 29/4/2010
Chapitre 13 : Création de boutons et de
menus contextuels
Principes de base de la navigation
A propos des fonctions de navigation
Ajoutez des boutons, des menus et des barres de navigation pour simplifier la navigation dans vos documents. Avec
Adobe® Fireworks®, vous pouvez aisément créer et mettre en place ces aides à la navigation, même si vos connaissances
en code CSS et JavaScript sont plus que limitées.
Lors de l’exportation d’un bouton ou d’un menu contextuel, Fireworks génère automatiquement le code CSS ou
JavaScript nécessaire pour l’afficher dans un navigateur Web. Adobe Dreamweaver permet d’insérer aisément le
code CSS, HTML et JavaScript de Fireworks dans vos pages Web ou tout fichier HTML ou CSS.
Création d’une barre de navigation standard
Une barre de navigation est un ensemble de boutons qui fournissent des liens vers les différentes zones d’un site Web.
Une barre de navigation reste en principe constante dans l’ensemble du site pour assurer un mode de navigation
logique. Les liens de la barre de navigation peuvent cependant varier pour répondre aux spécificités de certaines pages.
Pour une navigation harmonieuse, vous pouvez dupliquer des symboles de bouton à l’aide d’occurrences de symbole.
Si vous modifiez l’aspect ou la fonctionnalité du symbole original, toutes les occurrences qui lui sont associées adoptent
automatiquement ces modifications (voir la section « Symboles » à la page 160).
1 Créez un symbole de bouton.
2 Faites glisser une occurrence (copie) du symbole depuis le panneau Bibliothèque de documents dans la zone de
travail.
3 Pour créer une copie de l’occurrence du bouton, procédez de l’une ou l’autre des manières suivantes :
• Sélectionnez l’occurrence de bouton, puis choisissez Edition > Cloner.
• Tout en maintenant la touche Alt (Windows) ou Option (Mac OS) enfoncée, faites glisser l’occurrence de
bouton.
4 Tout en maintenant la touche Maj enfoncée, faites glisser un bouton pour l’aligner horizontalement ou
verticalement. Utilisez les touches fléchées pour un déplacement plus précis de l’occurrence.
5 Pour créer d’autres occurrences de bouton, répétez les étapes 3 et 4.
6 Sélectionnez chaque occurrence, puis attribuez-lui un texte unique, une URL ou d’autres propriétés à l’aide de
l’inspecteur des propriétés.
193
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 194
Création de boutons et de menus contextuels
Création de symboles de bouton
Les boutons sont un type particulier de symbole, utilisés comme éléments de navigation dans une page Web.
L’inspecteur des propriétés permet de modifier facilement les boutons. Vous pouvez faire glisser dans votre document
des occurrences d’un bouton depuis la bibliothèque de symboles, ce qui vous permet de modifier l’aspect graphique
d’un seul bouton et de mettre à jour systématiquement l’aspect de toutes les occurrences du bouton dans la barre de
navigation.
• Presque tous les objets graphiques ou texte peuvent devenir un bouton. Pour créer un bouton ou convertir un objet
existant en bouton, suivez les étapes décrites à la section « Création d’un symbole » à la page 161, puis
sélectionnez Bouton comme type de symbole. Pour importer des boutons existants, reportez-vous à la section
« Importation et exportation de symboles » à la page 167.
• Vous pouvez modifier le texte, l’URL et la cible d’une occurrence de bouton sans affecter ses autres occurrences, ni
rompre le lien entre cette occurrence et son symbole.
• Une occurrence de bouton est un objet encapsulé. Fireworks déplace tous les composants et états associés aux
boutons que vous déplacez dans le document.
• Tout comme les autres symboles, chaque bouton dispose d’un point d’alignement (point central servant de repère
pour aligner du texte et les différents états du bouton quand vous éditez un bouton).
Application d’états à des boutons
Vous pouvez définir jusqu’à quatre états par bouton. Ceux-ci représentent l’aspect que peut prendre le bouton selon
l’action de la souris. Les boutons à deux états disposent d’un état Relevé et d’un état Enfoncé. Les boutons à trois et
quatre états disposent d’un état Au-dessus et d’un état Au-dessus Enfoncé. Ces états représentent l’aspect du bouton
lorsque le pointeur de la souris le survole lorsqu’il est relevé (Au-dessus) ou enfoncé (Au-dessus Enfoncé).
Vous pouvez créer une barre de navigation qui utilise des boutons à deux ou trois états. Cependant, seuls les boutons
à quatre états peuvent tirer parti des comportements intégrés de barre de navigation de Fireworks.
Création d’un bouton simple à deux états
1 Pour accéder au mode d’édition de symboles, procédez de l’une ou l’autre des manières suivantes :
• Cliquez deux fois sur un bouton existant sur la zone de travail.
• Choisissez Edition > Insertion > Nouveau bouton.
2 Pour importer ou créer le graphique de l’état Relevé, procédez de l’une des manières suivantes :
• Glissez et déposez ou importez dans l’espace de travail le graphique que vous souhaitez faire correspondre à l’état
relevé du bouton.
• Créez un graphique à l’aide des outils de dessin, ou utilisez l’outil Texte pour créer un bouton à partir d’un texte.
• Dans l’inspecteur des propriétés, cliquez sur Importer un bouton et sélectionnez un bouton éditable prêt à
l’emploi dans la bibliothèque de boutons Importer des symboles. Cette option permet d’associer
automatiquement chaque état du bouton aux textes et graphiques correspondants.
• (Facultatif) Définissez les repères de mise à l’échelle en 9 tranches de sorte que le bouton ne soit pas déformé lors
du redimensionnement (voir la section « Application de repères 9 tranches à un symbole » à la page 51).
• (Facultatif) Sélectionnez l’outil Texte, puis créez le texte associé au bouton.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 195
Création de boutons et de menus contextuels
3 Pour créer l’état Au-dessus, dans le menu contextuel, sélectionnez Au-dessus et procédez de l’une des manières
suivantes :
• Cliquez sur Copier le graphique Relevé pour coller une copie du bouton à l’état Relevé dans la fenêtre Au-dessus,
puis modifiez cette copie.
• Glissez et déposez, importez ou dessinez le graphique.
4 (Facultatif) Pour utiliser des filtres dynamiques afin de créer des aspects communs pour chaque état, sélectionnez
le graphique auquel ajouter un filtre dynamique, puis cliquez sur l’icône plus (+) en regard de l’étiquette Filtres dans
l’inspecteur des propriétés.
5 Sélectionnez la commande Biseau et estampage > Biseau intérieur, Estampe rapportée, Biseau externe ou Estampe
en relief.
6 Sélectionnez un filtre prédéfini de bouton pour chaque état.
Filtre prédéfini de bouton
Description
Le biseau semble en relief au-dessus des objets sous-jacents.
En relief
Les couleurs du bouton s’éclaircissent.
En surbrillance
Le biseau semble enfoncé au-dessous des objets sous-jacents.
Cartouche
Le biseau semble enfoncé au-dessous des objets sous-jacents et les couleurs s’illuminent.
Inversé
Création d’un bouton à trois ou quatre états
Bien que les boutons à quatre états ne soient pas obligatoires, ils vous permettent de tirer parti des comportements
intégrés de barre de navigation.
1 Avec un bouton à deux états ouvert dans la zone de travail et en mode d’édition du symbole, dans le menu
contextuel de l’inspecteur des propriétés, sélectionnez Enfoncé et procédez de l’une des manières suivantes :
• Cliquez sur Copier le graphique Au-dessus pour coller une copie du bouton à l’état Au-dessus dans la fenêtre
Enfoncé, puis modifiez cette copie pour changer son aspect.
• Glissez et déposez, importez ou dessinez le graphique.
2 Pour ajouter un état Au-dessus Enfoncé, vérifiez que le bouton de l’état Enfoncé est ouvert, puis répétez l’étape 1.
3 (Facultatif) Appliquez des filtres prédéfinis aux boutons.
Remarque : lorsque vous insérez ou créez un graphique pour les états Enfoncé ou Au-dessus Enfoncé, les options
d’intégration de l’état à la barre de navigation sont sélectionnées automatiquement.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 196
Création de boutons et de menus contextuels
Conversion de survols Fireworks en boutons
Vous pouvez convertir en boutons des survols créés dans des versions précédentes de Fireworks et les enregistrer dans
la bibliothèque. Pour plus d’informations sur les survols, reportez-vous à la section « Tranches interactives » à la
page 178.
1 Supprimez la tranche ou la zone sensible recouvrant les images survolées.
2 Dans le menu Pelures d’oignon du panneau Etats, cliquez sur Afficher tous les états.
3 Sélectionnez tous les objets que vous voulez inclure dans le bouton. Sélectionnez des objets masqués à l’aide de
l’outil Sélectionner derrière.
4 Choisissez Modification > Symbole > Convertir en symbole.
5 Entrez le nom du symbole dans la zone Nom, puis sélectionnez le type de symbole Bouton.
Pour convertir en boutons des animations à quatre états, sélectionnez les quatre objets pour placer chacun d’eux
sur leur état de bouton respectif.
Insertion et importation de symboles de bouton
Vous pouvez insérer des occurrences de symboles de bouton dans un document à partir du
panneau Bibliothèque commune. Vous pouvez également importer des symboles de bouton existants dans le
panneau Bibliothèque de documents d’un nouveau document. Pour plus d’informations, reportez-vous à la section
« Importation et exportation de symboles » à la page 167.
1 Pour insérer dans un document les occurrences d’un bouton, ouvrez le panneau Bibliothèque commune, puis faites
glisser le symbole de bouton vers le document.
2 Pour importer d’autres occurrences d’un symbole de bouton, procédez de l’une des manières suivantes :
• Sélectionnez une occurrence, puis choisissez la commande Edition > Cloner pour placer une autre occurrence
directement devant l’occurrence sélectionnée. La nouvelle occurrence devient l’objet sélectionné.
• Faites glisser une autre occurrence de bouton depuis le panneau Bibliothèque de documents vers le document.
• Tout en maintenant la touche Alt (Windows) ou Option (Mac OS) enfoncée, faites glisser une occurrence sur la
zone de travail pour créer une autre occurrence de bouton.
• Copiez l’occurrence, puis collez des occurrences supplémentaires.
3 Pour importer des symboles de bouton dans le panneau Bibliothèque de documents d’un nouveau document,
procédez de l’une des manières suivantes :
• Insérez une occurrence de bouton par un glisser-déposer (ou par un couper-coller) depuis un autre
document Fireworks.
• Importez les symboles de bouton à partir d’un fichier PNG Fireworks.
• Exportez les symboles de bouton depuis un autre document Fireworks vers un fichier bibliothèque PNG, puis
importez les symboles de bouton du fichier bibliothèque PNG dans le document.
• Dans le menu Options du panneau Bibliothèque de documents, cliquez sur Importer des symboles. Les
bibliothèques contiennent une grande variété de symboles de bouton préconçus, préparés par Adobe.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 197
Création de boutons et de menus contextuels
Modification de symboles de bouton
Vous pouvez modifier plusieurs occurrences de propriétés d’un bouton au niveau du symbole ou modifier des
occurrences individuelles de ses propriétés.
Modification des propriétés d’un bouton au niveau de son symbole
❖ Cliquez deux fois sur le bouton pour modifier ses caractéristiques. En haut de la zone de travail, cliquez sur l’icône
page, ou cliquez deux fois en dehors du bouton pour revenir à la zone de travail.
En principe, les propriétés des boutons que vous pouvez modifier au niveau des symboles sont les mêmes pour tous
les boutons d’une barre de navigation. En voici quelques exemples :
• les attributs graphiques tels que la couleur et le type de contour et de fond, la forme du tracé et les images
• les filtres dynamiques ou l’opacité appliqués à chaque objet du symbole de bouton
• les dimensions et la position de la zone active
• le comportement du bouton principal
• les paramètres d’optimisation et d’exportation
• le lien URL (utilisé également comme propriété d’une occurrence)
• la cible (utilisée également comme propriété d’une occurrence)
Modification des propriétés d’un bouton au niveau d’une occurrence
❖ Sélectionnez l’occurrence du bouton dans l’espace de travail, puis définissez ses propriétés dans l’inspecteur des
propriétés.
Les propriétés que vous pouvez modifier au niveau de chaque occurrence sont généralement différentes d’un bouton
à l’autre dans une série de boutons. Vous pouvez modifier ces propriétés pour une seule occurrence sans agir sur le
symbole associé ou toute autre occurrence de ce symbole. En voici quelques exemples :
• le nom d’objet d’une occurrence apparaissant dans le panneau Calques et utilisé lors de l’exportation pour nommer
les tranches exportées de l’occurrence du bouton
• les filtres dynamiques ou l’opacité appliqués à toute l’occurrence
• les caractères et la mise en forme du texte
• le lien URL (écrase toute URL existante au niveau du symbole)
• la description de l’image
• la cible (écrase tout cadre cible existant en tant que propriété de symbole)
• les comportements supplémentaires affectés à une occurrence à partir du panneau Comportements
• l’option Afficher l’état Enfoncé lors du chargement, dans l’inspecteur des propriétés, pour les occurrences d’une
barre de navigation
Remarque : lorsque vous sélectionnez l’option Exportation de plusieurs fichiers dans la section Propre au document
de la boîte de dialogue Configuration HTML, puis que vous exportez une barre de navigation, Fireworks exporte
chaque page HTML avec l’état Enfoncé de chaque bouton (voir la section « Définition des options d’exportation de
code HTML » à la page 262).
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 198
Création de boutons et de menus contextuels
Définition des propriétés des boutons interactifs
Vous pouvez contrôler les éléments interactifs suivants d’un bouton :
Zone active La zone active déclenche les effets interactifs lorsque le pointeur de la souris survole le bouton ou lorsque
vous cliquez sur ce dernier dans un navigateur Web. La zone active d’un bouton est une propriété de symbole et est
exclusive pour chaque symbole de bouton. Dans le menu contextuel, sélectionnez Zone active pour modifier une
tranche de bouton ou tracer des zones sensibles. Si vous tracez une nouvelle tranche, celle-ci remplace la tranche
précédente.
URL d’un symbole ou d’une occurrence de bouton L’URL peut correspondre à la propriété du symbole ou de
l’occurrence de bouton. Elle relie le bouton à une autre page Web, un autre site Web ou à une ancre sur la page Web
active. Dans l’inspecteur des propriétés ou le panneau URL, vous pouvez lier une URL à une occurrence de bouton
sélectionnée.
Cible de bouton La cible d’un bouton est la fenêtre ou le cadre dans lesquels la page Web de destination apparaît
lorsque l’utilisateur clique sur une occurrence du bouton. Si aucune cible n’est spécifiée dans l’inspecteur des
propriétés, la page Web s’affiche dans le même cadre ou la même 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.
Texte de description d’un symbole ou d’une occurrence de bouton Le texte de description apparaît dans ou à
proximité de l’espace réservé pour l’image pendant son téléchargement ou à la place d’une image impossible à
télécharger. Il remplace également le graphique lorsque l’utilisateur interdit l’affichage d’images dans le navigateur. Le
texte secondaire peut correspondre à la propriété du symbole ou de l’occurrence de bouton.
Modification des propriétés des boutons interactifs
Remarque : la modification de la cible, de l’URL ou du texte de description d’un symbole de bouton n’a aucun effet sur
les occurrences de bouton existantes de ce symbole.
1 En mode d’édition du symbole, ouvrez le symbole du bouton.
2 Procédez de l’une des manières suivantes :
• Pour modifier une tranche ou une zone sensible dans la zone active du symbole de bouton, sélectionnez Zone
active dans le menu contextuel, dans l’inspecteur des propriétés. L’outil Pointeur permet de déplacer ou de
reformer la tranche ou un repère de tranche. Vous pouvez également utiliser un outil de tranche ou de zone
sensible pour tracer une nouvelle zone active.
• Pour associer une URL à un symbole de bouton, dans le menu contextuel, sélectionnez Zone active. Dans
l’inspecteur des propriétés, entrez ensuite l’URL dans la zone Lien, puis sélectionnez une page dans la liste ou
une URL dans le panneau URL.
Remarque : lorsque vous saisissez des URL absolues au sein d’un même site, vous pouvez lier une URL à un
symbole afin que cette URL s’affiche dans la zone Lien de l’inspecteur des propriétés pour chaque occurrence.
• Pour associer une cible à un symbole de bouton, dans l’espace de travail, ouvrez le bouton. Indiquez ensuite une
cible dans la zone Cible ou sélectionnez, dans le menu Cible de l’inspecteur des propriétés, une cible prédéfinie
parmi les suivantes :
Aucune ou _self Charge la page Web dans le même cadre, ou dans la même fenêtre, que le lien.
_blank Charge la page Web dans une nouvelle fenêtre, sans nom, du navigateur.
_parent Charge la page Web dans le jeu de cadres parent ou dans la fenêtre du cadre contenant le lien.
_top Charge la page Web dans la fenêtre principale du navigateur et supprime tous les cadres.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 199
Création de boutons et de menus contextuels
• Pour associer un texte de description à un symbole de bouton ou une instance de bouton, dans l’espace de
travail, sélectionnez l’instance du bouton. Dans l’inspecteur des propriétés, saisissez le texte ou la description à
appliquer.
Menus contextuels
Les menus contextuels s’affichent dans un navigateur en réponse à un événement souris (survol ou clic) sur un
objet Web de déclenchement tel qu’une tranche ou une zone sensible.
• Chaque élément de menu contextuel s’affiche en tant que cellule d’image ou HTML. La cellule est associé aux
états Relevé et Au-dessus et contient du texte dans les deux cas.
• Vous pouvez affecter des liens URL à des éléments de menu contextuel pour la navigation et créer autant de niveaux
de sous-menus que vous le souhaitez dans un menu contextuel.
• Vous pouvez utiliser certains onglets ou tous les onglets et modifier leurs paramètres à tout moment.
• Vous devez ajouter au moins un élément de menu dans l’onglet Contenu pour créer une option de menu que vous
pouvez prévisualiser dans un navigateur.
• Appuyez sur la touche F12 pour afficher l’aperçu d’un menu contextuel. Les menus contextuels ne s’affichent pas
dans l’espace de travail de Fireworks.
Création d’un menu contextuel simple
1 Sélectionnez la zone sensible ou la tranche qui va servir de zone de déclenchement au menu contextuel.
2 Procédez de l’une des manières suivantes :
• Choisissez Modification > Menu contextuel > Ajouter menu contextuel.
• Cliquez sur la poignée de comportement au milieu de la tranche, puis sélectionnez Ajouter menu contextuel.
3 Cliquez sur l’onglet Contenu puis sur Ajouter un menu.
4 Cliquez deux fois sur chaque cellule, puis renseignez les informations Texte, Lien et Cible par saisie ou par sélection.
Pour les champs Lien et Cible, saisissez des informations spécifiques ou effectuez une sélection dans les menus
affichés. La saisie du contenu sur la dernière ligne de la fenêtre insère une ligne vide en dessous de la dernière ligne.
Appuyez sur la touche Tabulation pour vous déplacer entre les cellules, et sur les touches fléchées Haut ou Bas pour
faire défiler verticalement la liste.
5 Répétez les étapes 3 et 4 jusqu’à ce que tous les éléments de menu soient définis. Pour supprimer un élément de
menu, cliquez sur le bouton Supprimer le menu.
6 Cliquez sur Suivant ou Terminé, ou sélectionnez un autre onglet.
Dans l’espace de travail, la zone sensible ou la tranche sur laquelle vous avez créé le menu contextuel affiche un trait
de comportement de couleur bleue relié à un contour du niveau supérieur du menu contextuel.
Création de sous-menus dans un menu contextuel
Les sous-menus sont des menus contextuels qui s’affichent en réponse à un événement de souris (survol ou clic) sur
un autre élément de menu contextuel. Vous pouvez créer autant de niveaux de sous-menus que vous le voulez.
1 Ouvrez l’onglet Contenu de l’éditeur de menu contextuel, puis créez des éléments de menu. Placez les éléments de
menu à utiliser pour le sous-menu directement sous l’élément de menu pour lequel ils représenteront un sousmenu.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 200
Création de boutons et de menus contextuels
2 Mettez en surbrillance un élément de menu contextuel à transformer en élément de sous-menu, puis cliquez sur le
bouton Retrait du menu.
3 Pour ajouter l’élément suivant au sous-menu, sélectionnez cet élément, puis cliquez sur le bouton Retrait du menu.
Pour insérer un nouvel élément juste en dessous de l’élément mis en surbrillance, vous pouvez également mettre en
surbrillance un élément de menu ou de sous-menu et cliquer sur Ajouter un menu.
Tous les éléments adjacents et mis en retrait au même niveau représentent un seul sous-menu contextuel.
4 Pour créer un sous-menu au sein d’un sous-menu contextuel, mettez en surbrillance un élément de sous-menu
dans l’onglet Contenu de l’éditeur de menu contextuel, puis cliquez de nouveau sur le bouton Retrait du menu.
5 Cliquez sur Suivant pour continuer l’élaboration du menu contextuel, ou cliquez sur Terminé.
Modification de l’aspect d’un menu contextuel
Après avoir créé un menu de base et des sous-menus facultatifs, vous pouvez mettre en forme le texte, appliquer des
styles graphiques aux états Au-dessus et Relevé et sélectionner l’orientation verticale ou horizontale sous l’onglet
Aspect de l’éditeur de menu contextuel.
1 Dans l’éditeur de menu contextuel, ouvrez le menu contextuel, puis cliquez sur l’onglet Aspect.
2 Sélectionnez Vertical ou Horizontal pour l’option Choisit l’alignement du menu déroulant.
3 Sélectionnez une option Cellules :
HTML Définit l’aspect du menu en utilisant uniquement du code HTML. Cette option crée des pages
correspondant à des fichiers de petite taille.
Image Propose une sélection de styles de graphique pour l’arrière-plan des cellules. Cette option crée des pages
correspondant à des fichiers de taille importante.
4 Sélectionnez une taille prédéfinie dans le menu contextuel Taille ou entrez une valeur dans la zone de texte Taille.
Remarque : lorsque la largeur et la hauteur des cellules sont définies sur Automatique, dans l’onglet Avancé de
l’éditeur de menu contextuel, la taille du texte détermine celle des graphiques associés à l’élément de menu.
5 Dans le menu contextuel Police, sélectionnez un groupe de polices système ou entrez le nom d’une police
personnalisée.
Remarque : si la police que vous choisissez n’est pas installée sur l’ordinateur de l’utilisateur, une police de substitution
est utilisée dans son navigateur Web.
6 (Facultatif) Appliquez un style, un paramètre de justification ou une couleur au texte.
7 Sélectionnez les couleurs du texte et des cellules pour chaque état.
8 Si vous avez choisi Image comme type de cellule, sélectionnez un style graphique pour chaque état.
9 Poursuivez l’élaboration du menu contextuel ou cliquez sur Terminé.
Ajout de styles de menu personnalisés dans l’éditeur de menu contextuel
Sélectionnez un style de cellule à utiliser lorsque le style de cellule Image est sélectionné. Pour plus d’informations sur
les styles, reportez-vous à la section « Création et suppression de styles » à la page 158.
Remarque : l’emplacement exact du dossier Menu Bars varie en fonction du système d’exploitation. Pour plus
d’informations, reportez-vous à la section « Utilisation des fichiers de configuration » à la page 316.
1 Appliquez une combinaison de contour, fond, texture et filtres dynamiques à un objet, et enregistrez cette
combinaison sous forme de style dans le panneau Styles.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 201
Création de boutons et de menus contextuels
2 Dans le panneau Styles, sélectionnez le nouveau style, puis choisissez la commande Enregistrer la bibliothèque de
styles dans le menu Options du panneau Styles.
3 Localisez le dossier Barres de menu sur votre disque dur, renommez le fichier de styles si vous le souhaitez, puis
cliquez sur le bouton Enregistrer.
Définition de propriétés de cellule avancées
1 Ouvrez l’éditeur de menu contextuel et cliquez sur l’onglet Avancé.
2 Dans le menu contextuel Automatique/Pixels, sélectionnez 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 menu
contextuel et la largeur de cellule sur celle de l’élément de menu contenant le texte le plus long.
Pixels Permet d’entrer des mesures spécifiques, en pixels, dans les zones de texte Largeur de cellule et Hauteur de
cellule.
3 Entrez une valeur dans la zone de texte Marge intérieure des cellules pour définir la distance entre le texte du menu
contextuel et la bordure de la cellule.
4 Entrez une valeur dans la zone de texte Espacement entre les cellules pour définir l’espacement entre les cellules du menu.
5 Entrez une valeur dans la zone de texte Retrait du texte pour définir la valeur de retrait du texte du menu contextuel.
6 Entrez une valeur dans la zone de texte Affichage menu pour définir, en millisecondes, la durée pendant laquelle le
menu reste affiché après son survol par le pointeur.
7 Choisissez d’afficher ou de masquer les bordures du menu contextuel. Si vous optez pour l’affichage des bordures,
définissez les attributs des bordures.
8 Poursuivez l’élaboration du menu contextuel ou cliquez sur Terminé.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 202
Création de boutons et de menus contextuels
Repositionnement des menus et sous-menus contextuels
L’onglet Position de l’éditeur de menu contextuel vous permet de définir la position d’un menu contextuel. Vous
pouvez également positionner un menu contextuel de niveau supérieur en faisant glisser son contour dans l’espace de
travail lorsque le calque Web est visible.
Définition de la position exacte d’un menu ou sous-menu contextuel
1 Dans l’éditeur de menu contextuel, ouvrez le menu contextuel souhaité, puis cliquez sur l’onglet Position.
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 tranche de déclenchement.
• Entrez les coordonnées x et y. Les coordonnées 0,0 alignent le coin supérieur gauche du menu contextuel sur le
coin supérieur gauche de la tranche ou de la zone sensible qui le déclenche.
3 Définissez la position d’un sous-menu :
• Cliquez sur le bouton Position du sous-menu pour positionner le sous-menu par rapport à son élément
déclencheur du menu contextuel.
• Entrez les coordonnées x et y. Les coordonnées 0,0 alignent le coin supérieur gauche du sous-menu contextuel
sur le coin supérieur droit du menu ou de l’élément de menu déclencheur.
4 Définissez une position relative :
• Pour définir la position de chaque sous-menu par rapport à l’élément de menu parent qui le déclenche,
désélectionnez l’option Placer à la même position.
• Pour définir la position de chaque sous-menu par rapport au menu contextuel parent, sélectionnez l’option
Placer à la même position.
5 Cliquez sur Terminé pour fermer l’éditeur de menu contextuel ou sur Précédent pour modifier les propriétés des
autres onglets.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 203
Création de boutons et de menus contextuels
Définition de la position d’un menu contextuel en le faisant glisser
1 Pour afficher le calque Web, procédez de l’une des manières suivantes :
• Dans le panneau Outils, cliquez sur le bouton Afficher les tranches et les zones sensibles.
• Cliquez sur la colonne Œil dans le panneau Calques.
2 Sélectionnez l’objet Web de déclenchement du menu contextuel.
3 Dans l’espace de travail, faites glisser le contour du menu contextuel vers un autre emplacement.
Modification ou déplacement d’éléments dans des menus contextuels
L’éditeur de menu contextuel 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.
1 Pour afficher le calque Web, procédez de l’une des manières suivantes :
• Dans le panneau Outils, cliquez sur le bouton Afficher les tranches et les zones sensibles.
• Cliquez sur la colonne Œil dans le panneau Calques.
2 Sélectionnez la tranche à laquelle est relié le menu contextuel.
3 Cliquez deux fois sur le contour bleu du menu contextuel dans l’espace de travail.
4 Dans l’éditeur de menu contextuel, effectuez les modifications nécessaires sur les onglets.
Modification du texte d’un menu
1 Dans l’éditeur de menu contextuel, ouvrez le menu contextuel, puis cliquez sur l’onglet Contenu.
2 Cliquez deux fois dans la zone de texte Texte, Lien ou Cible pour modifier le texte du menu. Cliquez ensuite en
dehors de la liste des entrées pour appliquer les modifications.
Déplacement d’un élément de menu
1 Sélectionnez l’élément de menu dans l’onglet Contenu de l’éditeur de menu contextuel.
2 Procédez de l’une des manières suivantes :
• Pour déplacer un élément vers un sous-menu supérieur ou vers le menu contextuel principal, cliquez sur le
bouton Retrait négatif du menu.
• Pour déplacer un élément dans le même menu, faites glisser l’élément à l’emplacement souhaité dans la liste.
A propos de l’exportation des menus contextuels
Fireworks génère tout le code CSS ou JavaScript (selon l’option sélectionnée) nécessaire à l’affichage des menus
contextuels dans les navigateurs Web.
Si vous utilisez du code CSS pour vos menus contextuels, un document Fireworks contenant des menus contextuels
est exporté au format HTML à partir de code CSS. Vous pouvez également choisir d’écrire le code CSS dans un
fichier .css externe et d’exporter ce fichier avec un fichier mm_css_menu.js au même emplacement que le
fichier HTML.
Vous pouvez utiliser du code JavaScript au lieu du code CSS. Si vous optez pour le code JavaScript, un document
Fireworks contenant des menus contextuels est exporté en HTML, et un fichier JavaScript appelé mm_menu.js est
exporté vers le même emplacement que le fichier HTML.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 204
Création de boutons et de menus contextuels
Lorsque vous chargez les fichiers, ce fichier mm_css_menu.js (ou mm_menu.js pour du JavaScript) doit être transféré
dans le même dossier que la page Web qui contient le menu contextuel. Pour stocker ce fichier dans un autre
emplacement, mettez à jour tous les liens hypertextes faisant référence au fichier mm_css_menu.js et au fichier .css (ou
mm_menu.js) dans le code HTML de Fireworks pour refléter ce nouvel emplacement. Un seul fichier .css est exporté
pour chaque document contenant des menus contextuels CSS que vous exportez en tant que fichier HTML
accompagné d’images depuis Fireworks.
Lorsque vous incluez des sous-menus, un fichier d’image est créé (arrows.gif) dans Fireworks. Il correspond à la petite
flèche qui s’affiche en regard de chaque élément de menu qui contient un sous-menu. Quel que soit le nombre de sousmenus que contient un document, Fireworks utilise toujours ce fichier arrows.gif.
Pour plus d’informations sur l’exportation de code HTML, reportez-vous à la section « Exportation de code HTML »
à la page 257.
Dernière mise à jour le 29/4/2010
Chapitre 14 : Prototypage de sites Web et
d’interfaces d’applications
Adobe® Fireworks® fournit un environnement de prototypage idéal, convertissant de façon transparente des modèles
de conception en sites Web et applications réelles.
Flux de production de prototypage
En associant le panneau Pages à d’autres fonctions performantes de Fireworks, vous pouvez créer rapidement des
prototypes de logiciels et de sites Web interactifs. Pour convertir un prototype finalisé en site fonctionnel, il vous suffit
de l’exporter vers Adobe Flash®, Adobe Flex®, Adobe AIR™ ou Adobe Dreamweaver®.
Pour obtenir des conseils d’ordre général sur les flux de production de prototypage, voir les articles suivants dans le
pôle de développement Fireworks :
• L’article de Nick Myers sur la conception de produits interactifs à l’aide de Fireworks :
http://www.adobe.com/go/learn_fw_interactiveproducts_fr
• L’article de Dave Cronin sur les tendances du prototypage :
http://www.adobe.com/go/learn_fw_prototypingtrends_fr
• L’article de Matt Stow sur l’utilisation de modèles CSS prédéfinis dans Fireworks (en anglais) : Prebuilt CSS
templates in Fireworks CS4.
• L’article de Jim Babbage (en anglais) : Fireworks CS4 How-Tos excerpts: Importing, exporting, symbols,
prototyping, scaling.
• Les didacticiels vidéo de Dave Hogue sur l’utilisation de pour la création de l’interaction et le prototypage rapide :
• Utilisation de Fireworks pour la création de l’information et de l’interaction :
http://www.adobe.com/go/learn_fw_infointeract_fr
• Création de prototypes interactifs à l’aide de Fireworks :
http://www.adobe.com/go/learn_fw_creatinginteractivepro_fr
• Prototypage rapide à l’aide de Fireworks : http://www.adobe.com/go/learn_fw_rapidpro_fr
• Fireworks partie intégrante du processus de création :
http://www.adobe.com/go/learn_fw_completedesignpro_fr
• Article sur la création d’une application de site Web à l’aide de Fireworks :
http://www.adobe.com/go/learn_fw_designwebsiteapp_fr
• L’article de Kumar Vivek sur la création de projets pour les périphériques mobiles dans Fireworks :
http://www.adobe.com/go/learn_fw_designmobiledevices_fr
Pour visionner un didacticiel vidéo sur les principes de base de Fireworks, reportez-vous à
www.adobe.com/go/lrvid4032_fw_fr.
1. Création des pages
Dans le panneau Pages, créez le nombre de pages ou d’écrans nécessaires à la réalisation de votre projet initial. Au fur
et à mesure que votre projet évolue, vous pouvez y ajouter des pages, ou en supprimer, à votre convenance.
205
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 206
Prototypage de sites Web et d’interfaces d’applications
2. Disposition des éléments de conception communs
Dans la zone de travail, disposez les éléments conceptuels à reproduire sur plusieurs pages (barres de navigation et
images d’arrière-plan, par exemple). Servez-vous des repères commentés pour aligner les éléments. Pour travailler avec
un maximum de souplesse, structurez votre mise en page avec des feuilles de style CSS (voir les sections « Repères
commentés » à la page 33 et « Création de dispositions CSS » à la page 211)..
3. Partage d’éléments communs entre plusieurs pages
La modification d’un élément commun à plusieurs pages se répercute systématiquement sur toutes les pages
concernées. Servez-vous d’un gabarit pour partager tous les éléments du contenu, ou partagez les calques pour copier
des sous-ensembles d’éléments (voir les sections « Utilisation d’un gabarit » à la page 208 et « Partage des calques » à
la page 139).
4. Ajout d’éléments uniques à des pages individuelles
Sur chaque page, vous pouvez ajouter des éléments uniques de conception, de navigation ou de forme. Dans le
panneau Bibliothèque commune, vous trouverez de nombreux boutons, des zones de texte et des menus contextuels
qui vous permettront d’accélérer le processus de conception. Les symboles contenus dans les dossiers
Flex Components, HTML, Mac, Win, Web et Application et Barres de menu présentent des propriétés que vous
pouvez personnaliser pour certaines occurrences de symboles (voir la section « Création et utilisation de symboles de
composant » à la page 164).
5. Simulation de la navigation utilisateur à l’aide de liens
A partir d’objets Web tels que tranches, zones sensibles ou boutons de navigation, vous pouvez relier les différentes
pages de votre prototype (voir la section « Lien vers des pages dans un document Fireworks » à la page 170).
6. Exportation du prototype finalisé interactif
Pour votre prototype, Fireworks propose de nombreux formats de sortie qui conservent tous les liens hypertextes de
navigation. Voir les articles suivants :
• Pour partager avec des clients un prototype CSS flexible ou le peaufiner dans Adobe Dreamweaver, voir
« Exportation d’une disposition CSS » à la page 212.
• Pour créer un prototype plus classique reposant sur une table, voir « Exportation de code HTML Fireworks » à la
page 258.
• Pour distribuer une version du prototype au format PDF en vue de le commenter ou de l’imprimer, voir
« Exportation de fichiers Adobe PDF » à la page 263.
• Pour créer un prototype d’application Flex, reportez-vous à la section « Prototypage d’applications Flex » à la
page 213. Pour créer une application Adobe AIR, reportez-vous à la section « Création d’une application Adobe
AIR » à la page 216.
Utilisation de pages Fireworks
Un seul fichier PNG Fireworks peut contenir plusieurs pages, ce qui est idéal pour le prototypage de sites Web et
d’interfaces d’applications. Chaque page contient des paramètres uniques relatifs à la taille, la couleur, la résolution
graphique et les repères. Vous pouvez définir ces options soit page par page, soit globalement (pour toutes les pages
d’un document). Chaque page peut également contenir un ensemble unique de calques, outre le calque Web.
Toutefois, pour les éléments communs, vous pouvez utiliser un gabarit ou partager des calques sur plusieurs pages
(voir la section « Partage des calques » à la page 139).
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 207
Prototypage de sites Web et d’interfaces d’applications
Si vous ne créez pas d’autres pages, tous les éléments de votre document résident sur une seule page.
Vos pages sont visibles dans le panneau Pages, qui affiche les objets présents sur chaque page sous forme de vignettes
en regard du nom de la page. La page active est mise en surbrillance dans le panneau et indiquée dans le menu
contextuel de pages, au-dessus du document actif.
Pour plus d’informations sur l’exportation de pages, reportez-vous à la section « Exportation depuis l’espace de
travail » à la page 253.
Ajout et suppression de pages, navigation dans les pages
Dans le panneau Pages, vous pouvez ajouter de nouvelles pages, supprimer des pages inutiles et dupliquer des pages
existantes. Lorsque vous ajoutez, supprimez ou déplacez des pages, Fireworks met systématiquement à jour le nombre
de pages indiqué à gauche des titres de pages. Ces numéros générés automatiquement permettent d’accéder
rapidement à des pages spécifiques, dans des conceptions multipages.
Ajout d’une page
Une page vierge est insérée à la fin de la liste de pages ; elle devient la page active.
❖ Procédez de l’une des manières suivantes :
• Dans le panneau Pages, cliquez sur le bouton Nouvelle page/Dupliquer la page
.
• Cliquez avec le bouton droit de la souris dans le panneau, puis sélectionnez Nouvelle page dans le menu
contextuel.
• Choisissez Edition > Insertion > Page.
Accès à une page
❖ Procédez de l’une des manières suivantes :
• Dans le panneau Pages, sélectionnez une page.
• Au clavier, utilisez les boutons Page vers le haut et Page vers le bas.
• Choisissez une page dans le menu contextuel de pages dans la partie supérieure de la fenêtre du document ou
dans la partie inférieure droite du panneau Pages.
Un astérisque situé en regard du nom de la page dans le menu contextuel de pages indique le gabarit.
Duplication d’une page
La duplication permet d’ajouter une nouvelle page contenant les mêmes objets et la même hiérarchie de calques que
la page sélectionnée. Les objets dupliqués conservent l’opacité et le mode de fusion des objets d’origine. Vous pouvez
modifier les objets dupliqués sans agir sur les originaux.
❖ Procédez de l’une des manières suivantes :
• Faites glisser une page vers le bouton Nouvelle/Dupliquer page.
• Cliquez avec le bouton droit de la souris sur la page, puis sélectionnez Dupliquer la page dans le menu
contextuel.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 208
Prototypage de sites Web et d’interfaces d’applications
Déplacement d’une ou plusieurs pages
Dans le panneau Pages, déplacez des pages pour rapprocher des conceptions apparentées et accélérer la mise en page.
1 (Facultatif) Si vous déplacez plusieurs pages, procédez de l’une des manières suivantes :
• Cliquez dessus en maintenant la touche Maj enfoncée pour sélectionner un groupe contigu.
• Tout en maintenant la touche Ctrl (Windows) ou Cmde (Mac OS) enfoncée, cliquez dessus pour sélectionner
un groupe non contigu.
2 Faites glisser les pages sélectionnées vers le haut ou vers le bas du panneau. Au-dessus et au-dessous d’autres pages,
des bordures sombres apparaissent ; vous pouvez relâcher le bouton de la souris dans ces zones pour y déplacer les
pages sélectionnées.
Suppression d’une page
La page située au-dessus de la page supprimée devient la page active.
❖ Procédez de l’une des manières suivantes :
• Dans le panneau Pages, faites glisser la page jusqu’à l’icône de la corbeille
.
• Cliquez avec le bouton droit de la souris sur la page, puis sélectionnez Supprimer la page dans le menu
contextuel.
Modification de la zone de travail d’une page
Chaque page présente une zone de travail qui lui est propre, avec une taille, une couleur et une résolution graphique
indépendantes.
1 Sélectionnez une page dans le panneau Pages ou dans le menu contextuel de pages, dans la partie supérieure de la
fenêtre du document.
2 Choisissez Modification > Zone de travail > Taille de l’image, Modification > Zone de travail > Couleur de la zone
de travail ou Modification > Zone de travail > Taille de la zone de travail.
3 Apportez les modifications nécessaires. Vous pouvez également effectuer ces modifications via le panneau
Propriétés lorsque la zone de travail d’une page est sélectionnée.
4 Pour appliquer les modifications à la page sélectionnée uniquement, ne désélectionnez pas l’option Page actuelle
uniquement. Pour appliquer les modifications à toutes les pages, désélectionnez l’option.
Utilisation d’un gabarit
Pour exploiter un même ensemble d’éléments sur toutes vos pages, utilisez une page maîtresse appelée un gabarit.
Lorsque vous convertissez une page ordinaire en gabarit, cette page devient la première de la liste affichée dans le
panneau Pages. Lorsque vous créez un gabarit, un calque de gabarit est ajouté au bas de la hiérarchie des calques pour
chaque page.
Création d’un gabarit
❖ Dans le panneau Pages, cliquez avec le bouton droit sur une page existante, puis sélectionnez Définir comme gabarit
dans le menu contextuel.
Tous les calques partagés sur plusieurs pages deviennent des calques ordinaires (non partagés). En revanche, les
calques partagés entre les images restent inchangés. Pour afficher des cadres de gabarit dans une page liée, reportezvous à la section « Affichage des objets dans un état » à la page 225.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 209
Prototypage de sites Web et d’interfaces d’applications
Voir aussi
« Partage des calques » à la page 139
Liaison de pages au gabarit
Une fois le gabarit créé, toutes les pages nouvellement créées héritent systématiquement des paramètres de ce gabarit.
En revanche, vous devez lier les pages existantes au gabarit pour qu’elles adoptent ses paramètres. Si vous modifiez
ensuite le gabarit, toutes les pages liées sont automatiquement mises à jour.
Les restrictions suivantes s’appliquent à l’héritage des objets et des comportements entre les gabarits et d’autres pages :
• Les pages héritent uniquement de l’état actif de l’ensemble des objets d’un gabarit. Pour qu’elles héritent de tous les
états de tous les objets, sur chaque page, ajoutez le même nombre d’états ou plus d’états à l’objet associé au plus
grand nombre d’états. Tous les objets de cette page héritent de tous les états issus du gabarit.
• Les modifications apportées à la taille de la zone de travail ou de l’image se répercutent sur toutes les pages, y
compris celles non liées au gabarit. Pour que les modifications ne s’appliquent qu’à la page active, sélectionnez Page
active uniquement.
• Seules les pages liées héritent des modifications relatives à la couleur de la zone de travail du gabarit.
❖ Procédez de l’une des manières suivantes :
• Dans le panneau Pages, cliquez avec le bouton droit sur une page existante, puis sélectionnez Lien vers le gabarit
dans le menu contextuel.
• Cliquez dans la colonne à gauche de la vignette de page dans le panneau Pages. L’icône de lien indique que la
page est liée au gabarit.
Remarque : si vous modifiez un paramètre dans une page liée au gabarit, le nouveau paramètre est pris en compte
mais annule le lien avec le gabarit.
Affichage ou masquage du calque de gabarit
Tout changement de visibilité se répercute sur toutes les pages.
❖ Dans le panneau Calques, cliquez sur l’icône en forme d’œil situé à gauche du calque de gabarit.
Suppression des calques de gabarit
❖ Cliquez avec le bouton droit de la souris sur le panneau Calques, puis sélectionnez Supprimer le calque du gabarit
dans le menu contextuel.
Pour réintégrer le calque de gabarit à la page, cliquez avec le bouton droit dans le panneau Calques, puis sélectionnez
Ajouter le calque du gabarit dans le menu contextuel.
Transformation d’un gabarit en page ordinaire
❖ Cliquez avec le bouton droit de la souris dans le panneau Pages, puis sélectionnez Réinitialiser le gabarit dans le
menu contextuel.
Exportation des pages sélectionnées
Vous pouvez exporter plusieurs pages en une même opération. Seules les pages sélectionnées sont exportées. Lors de
cette opération, les paramètres d’optimisation de chaque page sont utilisés.
1 Dans le panneau Pages, sélectionnez les pages à exporter.
2 Cliquez avec le bouton droit de la souris et sélectionnez Exporter la/les page(s) sélectionnée(s).
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 210
Prototypage de sites Web et d’interfaces d’applications
3 Dans la boîte de dialogue Exporter, sélectionnez l’une des options suivantes dans le menu Exporter :
Calques vers fichiers Exporte les calques que contiennent les pages sélectionnées en tant que fichiers distincts.
Etats vers fichiers Exporte les états que contiennent les pages sélectionnées en tant que fichiers distincts.
Pages vers fichiers Exporte les pages sélectionnées en tant que fichiers distincts.
Personnalisation des noms de fichier lors de l'exportation des pages
1 Dans le panneau Pages, sélectionnez les pages à exporter.
2 Cliquez avec le bouton droit de la souris et sélectionnez Exporter la/les page(s) sélectionnée(s).
3 Dans la boîte de dialogue Exporter, cliquez sur Options. Le bouton Options est activé en fonction de l'option
sélectionnée dans le menu Exporter.
4 Dans la boîte de dialogue Options d’exportation, sélectionnez Ajouter un préfixe ou Ajouter un suffixe, puis
choisissez une option dans le menu. Vous pouvez attribuer un nom aux fichiers à l’aide de l’une des options
suivantes :
nom document Le nom du fichier source est ajouté en tant que préfixe ou suffixe. Si, par exemple, vous exportez la
page Index du fichier source sites.png et sélectionnez l’option Ajouter un préfixe, le fichier généré s’appelle
Sites_Index.gif .
Numérique (1, 2, 3...ou 01, 02, 03...) Les fichiers sont générés par ordre numérique, des nombres étant ajoutés
comme préfixe ou suffixe. Tous les fichiers de page exportés sont numérotés dans l’ordre dans lequel ils figurent
dans le panneau Pages. Lorsque vous exportez un grand nombre de pages, faites appel à la séquence à deux chiffres.
5 Les options du menu Type de fichier permettent d’optimiser les paramètres du fichier exporté.
Exportation des tranches des pages sélectionnées
Lors de l’exportation, les tranches que contient le fichier source ne sont pas prises en compte. Pour les exporter, faites
appel aux paramètres suivants de la boîte de dialogue Exporter.
1 Dans le menu Exporter, sélectionnez Documents HTML et images ou Images uniquement.
2 Dans le menu HTML, sélectionnez Exporter le fichier HTML.
3 Dans le menu Découpes, sélectionnez Exporter les tranches.
4 Sélectionnez l’une des options suivantes :
Découpes sélectionnées uniquement Les zones marquées en tant que tranches sont exportées.
Inclure les zones sans tranches Les zones qui ne sont pas marquées en tant que tranches sont également exportées.
Aperçu de plusieurs pages
Lors de l’importation ou de l’ouverture de fichiers, affichez un aperçu de toutes les pages, excepté le gabarit. La page
sélectionnée lors de l’aperçu reçoit le focus à l’ouverture du fichier.
Lorsque vous insérez une page contenant des objets issus du calque du gabarit, le gabarit est converti en un calque
ordinaire et importé.
Activation de l’aperçu de plusieurs pages
Lorsque vous importez ou ouvrez un fichier, affichez un aperçu de toutes les pages qu’il contient. L’option d’aperçu de
plusieurs pages est activée par défaut dans la boîte de dialogue Préférences.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 211
Prototypage de sites Web et d’interfaces d’applications
Pour activer l’aperçu de plusieurs pages pour les fichiers créés dans les versions précédentes, ouvrez ceux-ci dans la
version en cours et enregistrez-les.
1 Dans la boîte de dialogue Préférences, sélectionnez Générales.
2 Sélectionnez Enregistrer les vignettes sur chaque page pour activer l’aperçu de plusieurs pages. Lorsque cette option
est désactivée, les noms de page sont enregistrés mais les vignettes ne sont pas générées pour les fichiers
correspondants.
Aperçu de plusieurs pages avant ouverture ou importation
• Sous Windows, l’aperçu est affiché dans la boîte de dialogue Importer ou Ouvrir lorsque vous importez ou ouvrez
un fichier.
• Sur le Mac, cliquez sur Aperçu dans la boîte de dialogue Importer ou Ouvrir. Vous pouvez également cliquer deux
fois sur le fichier dans la boîte de dialogue Importer pour activer le mode Aperçu.
Lors de l'importation de fichiers, sélectionnez Insérer après la page active pour ajouter des pages importées après la
page sélectionnée dans le document.
Création de dispositions CSS
Vous pouvez créer des dispositions CSS dans un document Fireworks, puis les convertir en pages HTML via des règles
CSS répliquant vos dispositions. Les dispositions CSS fournissent une méthode normalisée et offrent un code
compatible avec différents navigateurs.
Pour visionner un didacticiel vidéo sur la création de dispositions de page HTML CSS, accéder à
www.adobe.com/go/lrvid4035_fw_fr. Voir également les ressources suivantes :
• Didacticiel d'exportation de fichiers CSS et d'images dans Fireworks sur
http://www.adobe.com/go/learn_fw_exportcssimages_fr.
• Didacticiel de création de sites Web conformes aux normes avec Fireworks sur
http://www.adobe.com/go/learn_fw_standardscompliantdesign_fr.
A propos de la mise en page CSS
Fireworks permet de concevoir des pages et d’exporter instantanément le code HTML et CSS grâce à un moteur
d’exportation qui analyse l’emplacement des objets. En outre, vous pouvez définir l’alignement des pages et spécifier
une image d’arrière-plan récurrente.
Vous pouvez utiliser les éléments HTML disponibles dans le dossier HTML de la bibliothèque commune. Le dossier
HTML contient des éléments HTML, par exemple des boutons, des listes déroulantes et des champs de texte. Vous
pouvez modifier les propriétés de ces éléments dans le panneau Propriétés du symbole. Lorsque vous faites glisser les
éléments de forme sur la page, le moteur d’exportation insère des balises <form> pendant l’exportation de la
disposition CSS.
Tout texte auquel a été ajoutée une tranche s’affiche sous la forme d’images dans le code HTML exporté. Pour que ce
texte s’affiche sous la forme d’un texte, utilisez les composants HTML dans la bibliothèque commune. Les
composants HTML comprennent les en-têtes 1 à 6 et des éléments de lien.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 212
Prototypage de sites Web et d’interfaces d’applications
Règles des dispositions CSS
Quelques règles doivent être observées pendant la création des dispositions CSS pour obtenir les résultats souhaités.
Règle 1 : utilisez les rectangles pour exporter du texte et les tranches pour exporter des images Le moteur
d’exportation exporte le texte placé dans les rectangles. Comme seules les images qui sont recouvertes par des tranches
rectangulaires sont exportées, placez des tranches sur les images à exporter. Ces tranches indiquent au moteur
d’exportation l’emplacement de ces images.
Règle 2 : évitez la superposition des objets Le moteur d’exportation traite le texte, les images et les rectangles comme
des blocs rectangulaires. Il examine la taille et la position de ces objets pour déterminer les lignes et les colonnes
logiques dans lesquelles les placer dans la disposition. Positionnez avec soin les objets en veillant à ce que les limites ne
se superposent pas.
Règle 3 : planifiez la disposition des lignes et des colonnes Le moteur d’exportation recherche les partitions logiques
où une délimitation nette peut être placée entre les objets et les groupes d’objets. Délimitez les dispositions des
colonnes dans un rectangle pour empêcher le moteur d’exportation d’insérer une ligne logique qui viendrait rompre
la disposition des colonnes.
Règle 4 : traitez le document en deux dimensions Lorsque vous créez votre page, utilisez des rectangles pour encadrer
les objets que vous souhaitez traiter comme les enfants du rectangle. Le moteur d’exportation détecte ces relations
parent-enfant. Il analyse les éléments enfants des lignes et des colonnes logiques comme dans la règle 3.
En plus de ces règles, vous devez faire attention aux points suivants :
• Le moteur d’exportation n’exporte que des rectangles primitifs. Pour exporter les angles arrondis des rectangles,
recouvrez-les avec des tranches rectangulaires.
• Pour exporter les contours des rectangles, recouvrez-les avec des tranches rectangulaires.
• Pour exporter les symboles, recouvrez-les avec une tranche rectangulaire.
• Pour exporter les filtres que vous avez appliqués au texte ou aux rectangles, recouvrez-les avec des tranches
rectangulaires.
Exportation d’une disposition CSS
Fireworks permet d’exporter des dispositions créées en tant que fichiers CSS. Vous pouvez ensuite ouvrir et modifier
ces fichiers CSS dans Dreamweaver ou dans un autre éditeur compatible avec CSS.
1 Choisissez la commande Fichier > Exporter.
2 Dans le menu contextuel Exporter, sélectionnez la commande CSS et Images.
3 Pour définir les propriétés de la page HTML, cliquez sur Options.
4 Pour définir une image d’arrière-plan et la faire apparaître en mosaïque, cliquez sur Parcourir :
• Pour afficher l’image une seule fois, sélectionnez Pas de répétition.
• Pour répéter, ou mettre en mosaïque, l’image à l’horizontale et la verticale, sélectionnez Répétition.
• Sélectionnez Répéter-x pour former une mosaïque horizontale.
• Pour former une mosaïque verticale, sélectionnez Répéter-y.
5 Dans le navigateur, sélectionnez un alignement de page à gauche, au centre ou à droite.
6 Sélectionnez le défilement des pièces jointes en mode fixe ou défilement.
7 Cliquez sur le bouton OK, puis sur Enregistrer.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 213
Prototypage de sites Web et d’interfaces d’applications
Création d’une démonstration du document
Vous pouvez créer une démonstration du document Fireworks sur lequel vous travaillez. La démonstration s’ouvre
dans un navigateur afin de présenter les caractéristiques et vous permet de naviguer dans les pages.
1 Sélectionnez Commandes > Démonstration - Document actif.
2 Sélectionnez les pages pour lesquelles vous voulez créer une démonstration, puis cliquez sur l’option de création
d’une démonstration.
3 Sélectionnez le dossier, puis cliquez sur Ouvrir.
Prototypage d’applications Flex
Le processus de prototypage pour Flex est semblable au flux de production utilisé pour les sites Web et les interfaces
logicielles (voir la section « Flux de production de prototypage » à la page 205). Avec Fireworks, vous avez la possibilité
de faire glisser des composants Flex dans la zone de travail, de spécifier leurs propriétés et d’exporter l’interface
utilisateur résultante vers MXML. Vous pouvez ensuite améliorer l’interface utilisateur dans Flex Builder.
1. Création d’une interface utilisateur Flex
A l’aide du panneau Pages, créez le nombre d’écrans d’interface nécessaires à la réalisation de votre projet initial.
2. Insertion de composants de conception Flex dans la disposition
Dans la zone de travail, insérez des composants Flex depuis le dossier Flex dans le panneau Bibliothèque commune.
Ces symboles de composant sont spécifiquement utilisés avec l’exportation MXML de façon à obtenir les résultats
souhaités. Lors de l’exportation de votre document en tant que MXML, chacun de ces symboles est respectivement
converti en la balise MXML qui lui correspond. Les objets qui ne sont pas reconnus comme composants Flex sont
exportés en tant que bitmaps, qui sont liés au MXML via une balise <mx:Image> (voir la section « Création et
utilisation de symboles de composant » à la page 164).
Lors de la modification d’un composant de conception Flex dans Fireworks, vous pouvez copier le code XML modifié
dans votre projet Flex. Vous gagnez ainsi du temps si vous souhaitez répliquer le comportement du composant modifié
dans votre projet.
Les symboles Curseur, BarreDeDéfilement, Onglet et Info-bulle sont ignorés pendant une sortie MXML étant donné
que ces composants ne sont pas directement convertis depuis Fireworks vers MXML. Par exemple, le symbole
BarreDeDéfilement s’affiche automatiquement dans les instances du conteneur Flex lorsqu’il est possible de faire
défiler leur contenu. Dans Fireworks, ces symboles font simplement office d’indicateurs sur le mode de
fonctionnement des parties d’une conception d’interface.
Remarque : les tranches d’image, les survols et les zones sensibles s’appliquent uniquement aux prototypes HTML. Evitez
ces objets Web lors de la création de prototypes Flex.
3. Partage de composants Flex communs entre plusieurs pages
Si un composant Flex est commun à plusieurs pages, toute modification met automatiquement à jour toutes les pages
(ou écrans) affecté(e)s. Servez-vous d’un gabarit pour partager tous les composants Flex qu’il contient ou partagez les
calques pour copier des sous-ensembles des composants (voir les sections « Utilisation d’un gabarit » à la page 208 et
« Partage des calques » à la page 139).
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 214
Prototypage de sites Web et d’interfaces d’applications
4. Spécification de propriétés pour les composants Flex
Dans le panneau Propriétés du symbole (Fenêtre > Propriétés du symbole), spécifiez les propriétés et les événements
de chaque composant Flex inséré dans la zone de travail.
5. Exportation de la disposition Flex au format MXML
Exportez la disposition d’interface utilisateur Flex, puis ouvrez le fichier MXML résultant dans Flex. Fireworks exporte
le MXML requis tout en conservant le style et le positionnement absolu. Les développeurs Flex peuvent utiliser cette
interface sans avoir à recréer la disposition dans Flex.
Modification des propriétés de composants Flex
Vous pouvez modifier les propriétés et les événements des composants Flex dans le panneau Propriétés du symbole.
1 Sélectionnez le composant Flex dans la zone de travail.
2 Ouvrez le panneau Propriétés du symbole (Fenêtre > Propriétés du symbole).
3 Définissez les propriétés et les événements du composant dans le panneau Propriétés du symbole.
Exportation d’un document Fireworks au format MXML
Fireworks peut vous permettre de structurer des applications Internet enrichies (RIA) en activant l’exportation d’actifs
de bibliothèque communs en tant que composants connus à utiliser dans Adobe Flex Builder. Fireworks exporte le
code Flex requis (MXML) tout en conservant le style et le positionnement absolu.
Lors de la finalisation d’un prototype d’application Flex, exportez-le au format MXML en vue d’éditions
supplémentaires dans Flex Builder. En mode de conception, le prototype ressemble à son équivalent Fireworks, sauf
en ce qui concerne les composants tels que les curseurs et les barres de défilement qui ne sont pas exportés.
1 Choisissez la commande Fichier > Exporter.
2 Dans le menu contextuel Exporter, sélectionnez MXML et images.
3 Sélectionnez l’option Placer les images dans des sous-dossiers si vous souhaitez enregistrer les images dans un
dossier distinct de celui contenant le code MXML.
4 Sélectionnez l’option Page active uniquement pour n’exporter que la page sélectionnée.
5 Cliquez sur Enregistrer pour terminer l’exportation.
Les images associées au prototype sont exportées vers le dossier d’images. De plus, les images des pages MXML
complètes sont également créées avec les autres fichiers d’images. Vous pouvez supprimer les pages MXML car elles
ne requièrent pas ces images d’aperçu.
Création et exportation d’habillages Flex
Vous pouvez habiller des composants Flex dans Fireworks, puis les exporter afin de les utiliser dans des sites Web et
des interfaces d’application Flex.
Composants Flex d’habillage
Vous pouvez créer des habillages pour de nombreux composants Flex basés sur les modèles d’habillage Flex et les
modifier dans Fireworks.
1 Sélectionnez Commandes > Habillage Flex > Nouvel habillage Flex.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 215
Prototypage de sites Web et d’interfaces d’applications
2 Procédez de l’une des manières suivantes :
• Pour créer des habillages Flex pour tous les composants disponibles, sélectionnez Composants multiples.
Fireworks crée un seul document avec tous les composants Flex disponibles.
• Pour spécifier les composants pour lesquels vous voulez créer des habillages, sélectionnez
Composants spécifiques.
Sélectionnez uniquement les composants qui ont un style spécifique ou sélectionner toutes les instances du
composant.
3 Cliquez sur OK.
Exportation d’habillages Flex
1 Sélectionnez Commandes > Habillage Flex > Exporter habillage Flex.
2 Sélectionnez le dossier d’exportation du document Fireworks et cliquez sur Ouvrir.
Restrictions de l’exportation MXML
Avant d’utiliser la fonction d’exportation Flex MXML, il est important de connaître ses fonctionnalités et ses limites :
L’exportation MXML ne procède pas à l’habillage des composants L’exportation au format MXML ne crée pas
d’habillages pour les composant dans Flex, même si vous les avez modifiés dans Fireworks. L’exportation au
format MXML génère simplement des documents MXML à utiliser dans Flex. Ces documents peuvent également
comporter des images liées pour des objets Fireworks qui ne peuvent pas être convertis en balises MXML. Ces images
sont ajoutées au document MXML via des balises <mx:Image>.
L’exportation MXML ignore les tranches L’exportation au format MXML étant conçue pour générer un document
doté de balises à utiliser avec Flex, les tranches ne sont pas prises en compte dans la création d’images ou de cellules de
tableau. Lorsque l’exportation au format MXML crée des images, elle utilise les paramètres d’optimisation du
document pour déterminer le format d’image et la méthode de compression.
Les propriétés MXML sont limitées aux propriétés de symboles enrichis L’exportation au format MXML base les
propriétés d’une balise MXML sur le composant Flex dans Fireworks. Fireworks fournit un sous-ensemble de
composants Flex avec un nombre de propriétés limité.
Les styles sont intégrés Les propriétés reconnues en tant que styles sont séparées des balises MXML créées, mais sont
conservées dans le même document MXML dans une balise <mx:Style>. Fireworks ne peut pas définir les styles dans
un fichier CSS externe.
Les cadres ne sont pas pris en charge Lors de la création de conceptions et de mises en page pour une sortie MXML,
n’utilisez pas de cadres. Si vous souhaitez obtenir des conceptions différentes dans un document, utilisez des pages.
Voir aussi
« Création et utilisation de symboles de composant » à la page 164
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 216
Prototypage de sites Web et d’interfaces d’applications
Prototypage d’applications Adobe AIR
Grâce à Adobe® AIR™ pour Fireworks, vous pouvez convertir un prototype Fireworks en une application de bureau.
Par exemple, certaines pages de prototype interagissent entre elles pour afficher des données. Vous pouvez utiliser
Adobe AIR pour regrouper cet ensemble de pages en une petite application qui peut être installée sur l’ordinateur d’un
utilisateur. Lorsqu’un utilisateur exécute l’application depuis son bureau, celle-ci se charge et affiche le prototype dans
sa propre fenêtre d’application, indépendamment d’un navigateur. L’utilisateur peut ainsi consulter le prototype en
local sur son ordinateur sans connexion Internet.
Voir l’article d’Ethan Eismann sur Adobe AIR et l’expérience utilisateur de la marque :
http://www.adobe.com/go/learn_fw_airexperiencebrand_fr.
Ajout d’événements de souris Adobe AIR
Vous pouvez ajouter des événements de souris Adobe AIR prédéfinis aux objets de votre document. Fireworks propose
quatre événements de souris prédéfinis : fermer la fenêtre, faire glisser la fenêtre, agrandir la fenêtre et réduire la
fenêtre.
1 Sélectionnez les objets sur la zone de travail auxquels vous souhaitez appliquer les événements de souris.
2 Sélectionnez la commande Commandes > Evénements de souris 3D et choisissez l’événement.
Aperçu d’une application Adobe AIR
Vous pouvez prévisualiser une application Adobe AIR sans définir de paramètres d’application Adobe AIR.
❖ Choisissez la commande Commandes > Créer un package AIR, puis cliquez sur l'option Aperçu.
Création d’une application Adobe AIR
❖ Sélectionnez Commandes > Créer un package AIR et définissez les options suivantes :
Nom de l’application Spécifiez le nom qui s’affiche sur les écrans d’installation lorsque des utilisateurs installent
l’application. L’extension spécifie le nom du site Fireworks par défaut.
ID de l’application Entrez un ID unique pour votre application. N’utilisez pas d’espaces ni de caractères spéciaux
dans l’ID. Les seuls caractères valides sont 0 à 9, a à z, A à Z, . (point) et - (tiret). Ce paramètre est obligatoire.
Version Spécifiez un numéro de version pour votre application. Ce paramètre est obligatoire.
Dossier du menu Programmes Spécifiez un dossier dans le menu Démarrer de Windows où vous souhaitez créer le
raccourci vers l’application. (Non applicable sous Mac OS)
Description Ajoutez la description à afficher lorsque l’utilisateur l’installe l’application.
Copyright Spécifiez l’avis de copyright qui s’affiche dans la section indiquant des informations sur les applications
Adobe AIR installées sous Mac OS. Ces informations ne sont pas utilisées pour les applications installées sous
Windows.
Contenu du package Sélectionnez l’option Document actif pour définir automatiquement le dossier à partir
duquel les fichiers sont inclus.
Contenu racine Cliquez sur Parcourir pour choisir la page qui s’affiche en tant que contenu racine. Si vous avez
sélectionné Document actif, le contenu racine est défini automatiquement.
Fichiers inclus Spécifiez les fichiers ou dossiers à inclure dans votre application. Vous pouvez ajouter des
fichiers HTML et CSS, des fichiers d’image et des fichiers de bibliothèque JavaScript. Cliquez sur le bouton Plus (+)
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 217
Prototypage de sites Web et d’interfaces d’applications
pour ajouter des fichiers et sur l’icône de dossier pour ajouter des dossiers. Pour supprimer un fichier ou un dossier
de la liste, sélectionnez-le et cliquez sur le bouton Moins (-). Les fichiers ou les dossiers sélectionnés à inclure dans
le package Adobe AIR doivent appartenir au dossier du contenu racine.
Chrome système et Transparent Spécifiez le style de fenêtre (ou chrome) à utiliser lorsque les utilisateurs exécutent
l’application sur leur ordinateur. Le chrome système entoure l’application avec le contrôle de fenêtre standard du
système d’exploitation. Le chrome transparent supprime le chrome système standard et vous permet de créer le
vôtre pour l’application. Vous pouvez donc créer des fenêtres d’application qui ne sont pas rectangulaires.
Largeur et Hauteur Spécifiez les dimensions de la fenêtre d’application en pixels lorsqu’elle s’ouvre.
Sélectionner les images d’icône Cliquez pour sélectionner des images personnalisées pour les icônes de
l’application. Sélectionnez le dossier pour chaque taille d’icône et choisissez l’image à utiliser. Seuls les fichiers PNG
sont pris en charge pour les images d’icônes de l’application.
Remarque : les images personnalisées sélectionnées doivent résider dans le site de l’application et leurs chemins
doivent être relatifs à la racine du site.
Signature numérique Cliquez sur Définir pour signer votre application à l’aide d’une signature numérique. Ce
paramètre est obligatoire. Pour plus d’informations, reportez-vous aux sections suivantes.
Créer un package du fichier Spécifiez le dossier dans lequel est enregistré le nouveau programme d’installation de
l’application (fichier .air). L’emplacement par défaut est la racine du site. Cliquez sur le bouton Parcourir pour
choisir un autre emplacement. Le nom de fichier par défaut est basé sur le nom du site suivi de l’extension .air. Ce
paramètre est obligatoire.
Signature d’une application Adobe AIR à l’aide d’un certificat numérique
Une signature numérique permet de garantir que le code d’une application n’a pas été modifié ou corrompu depuis sa
création par l’auteur du logiciel. Toutes les applications Adobe AIR nécessitent une signature numérique et ne peuvent
être installées sans celle-ci.
1 Dans la boîte de dialogue Créer un package AIR, cliquez sur le bouton Définir situé en regard de l’option Signature
numérique.
2 Dans la boîte de dialogue Signature numérique, effectuez l’une des opérations suivantes :
• Pour signer une application avec un certificat numérique préacheté, cliquez sur le bouton Parcourir,
sélectionnez le certificat, entrez le mot de passe correspondant et cliquez sur OK.
• Pour créer votre propre certificat numérique d’auto-signature, cliquez sur le bouton Créer et remplissez la boîte
de dialogue. L’option de type de clé du certificat fait référence au niveau de sécurité du certificat : 1024-RSA
utilise une clé 1 024 bits (moins sécurisée) et 2048-RSA une clé 2 048 bits (plus sécurisée). Lorsque vous avez
terminé, cliquez sur Créer. Ensuite, entrez le mot de passe correspondant dans la boîte de dialogue Signature
numérique et cliquez sur OK.
Remarque : Java® Runtime Environment (JRE) doit être installé sur l’ordinateur.
Dernière mise à jour le 29/4/2010
Chapitre 15 : Création d’animations
Notions de base sur les animations
Adobe® Fireworks® permet de créer des graphiques animés pour vos bannières publicitaires, logos, bandes dessinées,
etc. Pour créer une animation, vous affectez des propriétés aux objets appelés symboles d’animation. L’animation d’un
symbole est décomposée en états, qui contiennent les images et les objets de l’animation. Une animation peut
comporter plusieurs symboles, et chacun d’eux peut avoir une action différente. Les divers symboles peuvent contenir
un nombre d’états différent. La fin de l’exécution de toutes les actions de tous les symboles marque la fin de
l’animation.
Vous pouvez appliquer des paramètres au symbole afin de modifier peu à peu le contenu des états successifs. Un
symbole peut sembler se déplacer dans la zone de travail, apparaître et disparaître progressivement, grossir ou rétrécir,
ou encore pivoter. Comme un même fichier contient parfois plusieurs symboles, vous pouvez créer une animation
complexe dans laquelle différents types d’actions se produisent simultanément.
Vous pouvez modifier les paramètres d’optimisation et d’exportation du panneau Optimiser pour contrôler le mode
de 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 Flash pour les améliorer.
L’article de Zsolt Szekely dans le Centre des développeurs Adobe contient des informations utiles sur la création de
logos animés www.adobe.com/go/learn_fw_creatinganimlogos_fr.
Flux de production de l’animation
1 Créez un symbole d’animation à partir de zéro ou en convertissant un objet existant en symbole (voir « Création
de symboles d’animation » à la page 219).
2 Modifiez le symbole d’animation dans l’inspecteur des propriétés ou la boîte de dialogue Animer. Vous pouvez
définir l’angle et la direction du mouvement, la mise à l’échelle, l’opacité (pour les apparitions et disparitions
progressives), ainsi que l’angle et la direction de la rotation (voir « Modification de symboles d’animation » à la
page 220).
Remarque : l’angle et la direction du mouvement sont définis uniquement dans la boîte de dialogue Animer.
3 Vous pouvez définir la vitesse de l’animation à l’aide des contrôles Cadence des états du panneau Etats (voir la
section « Définition de la durée des états » à la page 223).
4 Optimisez le document sous forme de fichier GIF animé (voir la section « Optimisation d’une animation » à la
page 227).
5 Exportez le document au format de fichier GIF animé ou SWF, ou enregistrez-le au format de fichier
PNG Fireworks et importez-le dans Flash pour l’améliorer (voir la section « Exportation d’une animation » à la
page 255).
A propos des symboles d’animation
Les symboles d’animation sont les acteurs de l’animation. Un symbole d’animation peut être tout objet que vous créez
ou importez, et il peut y avoir un grand nombre de symboles dans un même fichier. Chaque symbole dispose de
propriétés qui lui sont propres et se comporte de manière indépendante. Vous pouvez ainsi créer des symboles qui
traversent l’écran, tandis que d’autres apparaissent, disparaissent ou rapetissent.
218
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 219
Création d’animations
Chaque aspect de votre animation n’a pas nécessairement besoin de symboles. L’utilisation de symboles ou
d’occurrences de graphiques qui apparaissent à plusieurs états permet toutefois de réduire la taille du fichier.
Vous pouvez modifier les propriétés des symboles d’animation à tout moment, à l’aide de la boîte de dialogue Animer
ou de l’inspecteur des propriétés. Vous pouvez également modifier l’apparence des symboles sans affecter le reste du
document. Vous pouvez aussi modifier le mouvement d’un symbole en déplaçant sa trajectoire.
Comme les symboles d’animation sont automatiquement placés dans la bibliothèque, vous pouvez les réutiliser pour
créer d’autres animations.
Création de symboles d’animation
Vous pouvez créer un symbole d’animation de toutes pièces ou convertir un objet existant en symbole. Vous pouvez
définir des propriétés qui déterminent le nombre d’états de l’animation et le type d’action (changement d’échelle ou
rotation, par exemple). Par défaut, un nouveau symbole d’animation comporte cinq états, dont chacun s’affiche
pendant 0,07 seconde.
Pour plus d'informations sur les états des animations, consultez l'article de David Hogue
http://www.adobe.com/go/learn_fw_pagestatelay_fr.
Création d’un symbole d’animation
1 Choisissez Edition > Insertion > Nouveau symbole.
2 Dans la boîte de dialogue Convertir en symbole, entrez le nom du nouveau symbole.
3 Sélectionnez Animation, puis cliquez sur OK.
4 Dans le panneau du document, créez un objet à l’aide des outils de dessin ou de texte. Vous pouvez tracer des objets
vectoriels ou bitmap.
5 Lorsque vous avez terminé de travailler sur le symbole, accédez à la vue d’ensemble de la page (voir la section
« Passage du mode d’édition de symboles au mode d’édition de pages » à la page 162).
Fireworks intègre le symbole à la bibliothèque de documents et en place une copie au centre de la page.
Vous pouvez ajouter de nouveaux états au symbole à l’aide du curseur Etats de l’inspecteur des propriétés.
Choisissez Fenêtre > Propriétés pour ouvrir l’inspecteur des propriétés, s’il n’est pas ouvert.
Conversion d’un objet en symbole d’animation
1 Sélectionnez l’objet.
2 Choisissez la commande Modification > Animation > Animer la sélection.
3 Définissez les propriétés d’animation pour modifier le symbole.
Les contrôles d’animation apparaissent sur le cadre de sélection de l’objet, et une copie du symbole est ajoutée à
la bibliothèque.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 220
Création d’animations
Modification de symboles d’animation
Vous pouvez modifier diverses propriétés des symboles, telles que l’opacité ou la rotation de l’animation. Un symbole
peut tourner sur lui-même, prendre de la vitesse, apparaître et disparaître progressivement, et vous pouvez combiner
ces effets.
Le nombre d’états est une propriété clé. Lorsque vous définissez cette propriété, Fireworks ajoute automatiquement au
document le nombre d’états requis pour terminer l’action. Si le symbole nécessite plus d’états qu’il n’en existe dans
l’animation, un message Fireworks vous demande si vous souhaitez ajouter des états.
Vous pouvez modifier les propriétés de l’animation à l’aide de la boîte de dialogue Animer ou de l’inspecteur
des propriétés.
Pour régler la vitesse de l’animation, reportez-vous à la section « Définition de la durée des états » à la page 223. Pour
modifier du texte, des graphiques, des contours, des fonds ou des effets, reportez-vous aux sections « Modification d’un
symbole et de toutes ses occurrences » à la page 162 et « Modification d’occurrences de symboles spécifiques » à la
page 163.
Propriétés des symboles d’animation
Etats Nombre d’états de l’animation. Faites glisser le curseur pour choisir une valeur comprise entre 0 et 250 ou
saisissez une valeur dans la zone Etats. La valeur par défaut est 5.
Déplacer (boîte de dialogue Animer uniquement) Distance de déplacement de l’objet, exprimée en pixels. La valeur
par défaut est 72, mais il n’existe aucune limite de valeur. Les mouvements sont linéaires et il n’existe aucun état clé (ce
qui n’est pas le cas dans Flash et Adobe Director).
Direction (boîte de dialogue Animer uniquement) Direction du déplacement de l’objet, exprimée en degrés, de 0
à 360. Vous pouvez également modifier les valeurs Mouvement et Direction en faisant glisser les poignées d’animation
de l’objet.
Mise à l’échelle Redimensionnement du symbole, exprimé en pourcentage, entre le début et la fin de l’animation. La
valeur par défaut est 100 %, mais il n’existe aucune limite de valeur. Pour mettre à l’échelle un objet de 0 % à 100 %,
l’objet d’origine doit être petit ; des objets vectoriels sont recommandés.
Opacité Degré de fondu (apparition ou disparition) entre le début et la fin de l’animation. Les valeurs possibles sont
comprises entre 0 et 100, 100 % étant la valeur par défaut. La création d’un fondu enchaîné nécessite deux occurrences
du même symbole : une pour le fondu à l’ouverture en fondu et l’autre pour le fondu à la fermeture.
Rotation Degré de rotation entre le début et la fin de l’animation. Les valeurs possibles sont comprises entre 0 et 360°.
Vous pouvez entrer des valeurs supérieures pour obtenir plusieurs rotations. La valeur par défaut est 0º.
Horaire et Antihoraire Sens de la rotation de l’objet : sens des aiguilles d’une montre (horaire) ou sens inverse des
aiguilles d’une montre (antihoraire).
Modification des propriétés des symboles d’animation
1 Sélectionnez un symbole d’animation.
2 Sélectionnez Modification > Animation > Paramètres pour ouvrir la boîte de dialogue Animer. Choisissez
Fenêtre > Propriétés pour ouvrir l’inspecteur des propriétés, s’il n’est pas ouvert.
3 Modifiez les propriétés.
4 Si vous utilisez la boîte de dialogue Animer, cliquez sur OK pour accepter les propriétés modifiées.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 221
Création d’animations
Suppression d’animations
Pour supprimer des animations, supprimez le symbole d’animation de la bibliothèque ou supprimez l’animation du
symbole.
Suppression de l’animation depuis le symbole d’animation sélectionné
❖ Choisissez Modification > Animation > Supprimer l’animation.
Le symbole devient un symbole graphique et n’est plus animé. Si, ultérieurement, vous convertissez de nouveau le
symbole en symbole d’animation, il conserve ses paramètres d’animation précédents.
Suppression d’un symbole de la bibliothèque de documents
1 Sélectionnez le symbole d’animation dans le panneau Bibliothèque de documents.
2 Faites glisser le symbole vers l’icône de la corbeille, dans le coin inférieur droit.
Modification du mouvement ou de la direction d’un symbole
Le symbole d’animation sélectionné dispose d’un cadre de sélection unique et d’une trajectoire qui indique la direction
de son déplacement.
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 états. Par exemple, la trajectoire d’un symbole qui s’étend sur cinq états comporte un
point vert, trois points bleus et un point rouge. Si l’objet apparaît sur le troisième point, l’état 3 est l’état actif.
Vous pouvez modifier la direction du déplacement en changeant l’angle de la trajectoire.
❖ Faites glisser l’une des poignées de début ou de fin d’animation de l’objet vers un nouvel emplacement. Pour
contraindre la direction du déplacement par incréments de 45°, faites glisser le symbole tout en maintenant la
touche Maj enfoncée.
Voir aussi
« Définition de la durée des états » à la page 223
Etats
Pour plus d’informations sur l’introduction du concept de pages dans Fireworks, voir l’article de Sarthak
www.adobe.com/go/learn_fw_simplifyingpagesstates_fr. Ce que nous appelons maintenant états correspondent à des
images dans les versions antérieures à Fireworks CS4.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 222
Création d’animations
Pour créer des animations, vous créez des états. Leur contenu s’affiche dans le panneau Etats. Dans ce panneau, vous
pouvez nommer les états, les réorganiser, définir manuellement la cadence de l’animation et déplacer des objets d’un
état à une autre.
Chaque état est également associé à des propriétés. Vous pouvez définir la cadence des états ou masquer un état pour
visualiser l’animation au fur et à mesure de son élaboration.
Vous pouvez utiliser des calques dans des animations pour organiser les objets selon qu’ils font partie de l’action
principale ou de l’arrière-plan de l’animation. Pour que des objets apparaissent tout au long d’une animation, placezles sur un calque, puis utilisez le panneau Calques pour partager le calque avec tous les états. Les objets qui se trouvent
sur un calque partagé sont visibles sur chaque état. Pour plus d’informations, reportez-vous à la section « Partage des
calques » à la page 139.
Etats et calques
Les pages contiennent des états, tandis que les états contiennent des calques. Une nouvelle page ne contient qu'un seul
état. Tous les calques que vous créez et tous les objets qui figurent sur ces calques n'ont qu'un seul état. Pour
comprendre la relation entre les états, les pages et les calques, voir l'article de David Hogue
www.adobe.com/go/learn_fw_usingpagesstates_fr.
Lorsque vous créez un état dans le panneau Etats, le nouvel état comporte le même nombre de calques que l'état
précédent. Cependant, ces calques sont vides et ne contiennent pas d'objets provenant de l'état précédent. Pour
reproduire des objets d'un état à l'autre, créez un double d'un état et non pas un nouvel état. Les instances d'objet
restent indépendantes après leur duplication quel que soit l'état associé.
Remarque : La suppression d'un calque de l'un des états supprime ce calque dans tous les autres états.
Pour partager les objets d'un calque entre plusieurs états, cliquez du bouton droit sur ce calque, puis sélectionnez
Calque partagé vers états. Les objets du calque sont partagés entre les différents états, ainsi que sur les nouveaux états
lors de leur création. Tous les objets du calque correspondant dans les autres états sont supprimés et remplacés par des
objets provenant du calque partagé. Toute modification des objets dans le calque partagé est reportée dans les
différents états.
Etats et gabarits
Les états d'un gabarit correspondent directement aux états des autres pages de votre document. Lorsque vous copiez
l'état 1 sur une page A ordinaire, tous les objets de la page A avec l'état 1 sont copiés sur la page A avec l'état 2, et le
gabarit avec l'état 2 est partagé. Dans la mesure où le gabarit ne comporte qu'un seul état, l'état 2 de toute autre page
est vide.
Si vous dupliquez l'état 1 pour créer l'état 2 sur un gabarit, le calque d'arrière-plan du gabarit est également dupliqué
sur l'état 2 du gabarit. L'état 2 du gabarit est partagé avec l'état 2 de l'ensemble des pages du document.
En résumé, l'état 1 du gabarit est partagé avec l'état 1 de toutes les pages, l'état 2 du gabarit est partagé avec l'état 2 de
toutes les pages, et ainsi de suite. Si une page ordinaire contient davantage d'états que le gabarit, aucun état du gabarit
n'est partagé avec ces états supplémentaires. Il est cependant possible d'ajouter des états au gabarit qui sont ensuite
reportés sur ces états.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 223
Création d’animations
Création d'un prototype/d'une page de démonstration avec des boutons et
des animations
Les documents Fireworks contenant à la fois des boutons et des animations ne sont généralement pas affichés comme
prévu. Fireworks traite les animations comme une page entière, tandis que pour les boutons il considère que vous
échangez simplement les images sous cette découpe. Lorsqu'une animation est en cours de lecture, tout change sur la
page, ce qui inclut les états de boutons.
Les animations et les boutons doivent être créés et exportés de façon distincte dans une page Web. Les boutons avec
une fonction de survol ont recours à JavaScript pour afficher les différents états, mais les animations de Fireworks sont
exportées au format GIF ou SWF, qui est autonome.
Définition de la durée des états
La cadence des états indique la durée (en centièmes de seconde) d’affichage de l’état. Par exemple, indiquez 50 pour
afficher l’état pendant une demi-seconde, ou 300 pour l’afficher pendant trois secondes.
1 Sélectionnez un ou plusieurs états :
• Pour sélectionner une plage d’états contigus, maintenez la touche Maj enfoncée et cliquez sur le nom du premier
et du dernier état.
• Pour sélectionner une plage d’états non contigus, cliquez sur le nom de chaque état tout en maintenant la
touche Ctrl (Windows) ou Commande (Mac OS) enfoncée.
2 Procédez de l’une des manières suivantes :
• Dans le menu Options du panneau Etats, cliquez sur Propriétés.
• Cliquez deux fois sur la colonne Cadence des états.
3 Entrez une valeur de cadence des états.
4 Appuyez sur la touche Entrée ou cliquez en dehors du panneau.
Masquage d’états en cours de lecture
Les états masqués ne s’affichent pas en cours de lecture et ne sont pas exportés.
1 Procédez de l’une des manières suivantes :
• Dans le menu Options du panneau Etats, cliquez sur Propriétés.
• Cliquez deux fois sur la colonne Cadence des états.
2 Désélectionnez Inclure lors de l’exportation.
3 Appuyez sur la touche Entrée ou cliquez en dehors du panneau.
Modification des noms d’états
Lorsque vous définissez une animation, Fireworks crée les états nécessaires et les affiche dans le panneau Etats en tant
que Etat 1, Etat 2, etc. Lorsque vous déplacez un état dans le panneau, Fireworks renomme les états concernés en
fonction du nouvel ordre d’apparition.
Donnez un nom significatif à vos états pour les retrouver facilement. Déplacer un état renommé n’a aucun effet sur le
nom de l’état.
1 Dans le panneau Etat, cliquez deux fois sur le nom de l’état.
2 Saisissez un nouveau nom et appuyez sur la touche Entrée.
UTILISATION DE FIREWORKS CS5 224
Dernière mise à jour le 29/4/2010
Création d’animations
Personnalisation des noms des états
1 Sélectionnez Fichier > Configuration HTML.
2 Dans la boîte de dialogue Configuration HTML, sélectionnez l’onglet Propre au document.
3 Sélectionnez Personnalisé dans le menu Noms des états.
4 Dans la boîte de dialogue qui s’affiche, définissez les noms personnalisés à ajouter aux états.
Le nom personnalisé est conservé pendant toute la session. Comme il s’agit d’un paramètre propre au document,
sélectionnez « Personnalisé » comme indiqué dans la première image-écran.
Utilisation des états
Dans le panneau Etats, vous pouvez ajouter, copier et supprimer des états ou en changer l’ordre.
Ajout d’un nouvel état
❖ Cliquez sur le bouton Nouvel état/Dupliquer l’état
dans la partie inférieure du panneau Etats.
Ajout d’états à une séquence
1 Dans le menu Options du panneau Etats, sélectionnez Ajouter des états.
2 Indiquez le nombre d’états à ajouter.
3 Sélectionnez l’emplacement où vous souhaitez insérer les états, puis cliquez sur OK.
Copie d’un état
❖ Faites glisser un état existant sur le bouton Nouvel état/Dupliquer l’état dans la partie inférieure du panneau Etats.
Copie d’un état sélectionné pour le placer dans une séquence
Il est utile de dupliquer un état pour faire réapparaître des objets dans une autre partie de l’animation.
1 Dans le menu Options du panneau Etats, sélectionnez Dupliquer l’état.
2 Saisissez le nombre de doublons de l’état sélectionné que vous souhaitez créer, indiquez où insérer ces doubles, puis
cliquez sur OK.
Réorganisation des états
❖ Faites glisser les états un par un vers un nouvel emplacement dans la liste.
Inversion de l’ordre des états
Vous pouvez inverser l’ordre de tous les états ou celui des états d’une plage sélectionnée.
1 Sélectionnez Commandes > Document > Inverser les états.
2 Procédez de l’une des manières suivantes :
• Sélectionnez Tous les états pour inverser la séquence des états du début vers la fin.
• Pour inverser l’ordre des états d’une plage, sélectionnez Plage d’états, puis choisissez les états Début et Fin.
UTILISATION DE FIREWORKS CS5 225
Dernière mise à jour le 29/4/2010
Création d’animations
3 Cliquez sur OK.
Suppression de l’état sélectionné
❖ Procédez de l’une des manières suivantes :
• Dans le panneau Etats, cliquez sur le bouton Supprimer l’état
.
• Faites glisser l’état vers le bouton Supprimer l’état.
• Dans le menu Options du panneau Etats, sélectionnez Supprimer l’état.
Déplacement des objets sélectionnés dans le panneau Etats
Vous pouvez utiliser le panneau Etats pour déplacer des objets dans un autre état. Les objets qui s’affichent sur un seul
état disparaissent au cours de la lecture de l’animation. Vous pouvez les faire disparaître et réapparaître à différents
points.
Dans le panneau Etats, un petit rond sur la droite de la durée de cadence des états indique l’état des objets de l’état.
1 Dans la zone de travail, sélectionnez les objets que vous souhaitez afficher sur un autre état.
2 Dans le panneau Etats, faites glisser l’indicateur de sélection (petit rond noir à droite de la durée de cadence des
états) vers le nouvel état.
Pour copier les objets sélectionnés vers d’autres états, appuyez sur les touches Alt (Windows) ou Option (Mac OS) et
faites glisser les objets.
Affichage des objets dans un état
❖ Sélectionnez l’état à l’aide du menu contextuel correspondant, situé dans la partie inférieure du panneau Calques.
Tous les objets présents dans cet état sont répertoriés dans le panneau Calques et affichés dans la zone de travail.
A propos des pelures d’oignon
Les pelures d’oignon permettent d’afficher le contenu des états précédant et suivant l’état sélectionné. Cela vous
permet d’affiner la transition entre les objets sans devoir passer incessamment d’un objet à un autre.
Lorsque vous activez les pelures d’oignon, les objets des états précédant et suivant l’état sélectionné sont grisés. Ainsi,
vous pouvez les distinguer des objets de l’état sélectionné.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 226
Création d’animations
Par défaut, l’option Modification de plusieurs états est activée. Vous pouvez ainsi sélectionner et modifier des objets
grisés dans d’autres états sans quitter l’état actif. Utilisez l’outil Sélectionner derrière pour sélectionner de manière
séquentielle des objets dans divers états.
Pour ajuster le nombre d’états visibles avant et après l’état actif, cliquez sur le bouton Pelures d’oignon, puis
sélectionnez une option d’affichage. L’option Personnalisée vous permet d’indiquer le nombre d’états et de contrôler
l’opacité. Utilisez l’option Modification de plusieurs états pour sélectionner et modifier tous les objets visibles.
Désactivez cette option pour modifier uniquement la page active.
Interpolation
Dans Fireworks, l’interpolation est une technique manuelle qui permet de fusionner plusieurs occurrences du même
symbole pour générer les occurrences intermédiaires avec des attributs interpolés. Pour créer le déplacement
sophistiqué d’un objet sur la zone de travail et pour les objets dont les filtres dynamiques changent à chaque état de
l’animation, utilisez l’interpolation. Par exemple, vous pouvez interpoler un objet pour qu’il donne l’impression de se
déplacer sur un tracé linéaire.
Remarque : dans la plupart des cas, l’utilisation de symboles d’animation est préférable à l’interpolation. Pour plus
d’informations, reportez-vous à la section « A propos des symboles d’animation » à la page 218.
Occurrences interpolées
1 Sélectionnez plusieurs occurrences du même symbole graphique dans la zone de travail. 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, entrez le nombre d’étapes interpolées à insérer entre les deux
occurrences d’origine.
4 Pour répartir les objets interpolés dans des états distincts, sélectionnez Répartir dans les états, puis cliquez sur OK.
Vous pouvez effectuer cette opération ultérieurement. Dans le panneau Etats, sélectionnez toutes les occurrences
et cliquez sur le bouton Répartir dans les états
.
Prévisualisation 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. il est
déconseillé de prévisualiser l’animation dans la fenêtre 2 en 1 ou 4 en 1.
Remarque : Les animations ajoutées aux gabarits ne sont pas affichées. Ajoutez les animations dans les pages enfant et
partagez-les entre toutes les pages.
Prévisualisation d’une animation dans l’espace de travail
❖ Utilisez les contrôles d’état qui apparaissent au bas de la fenêtre Document.
UTILISATION DE FIREWORKS CS5 227
Dernière mise à jour le 29/4/2010
Création d’animations
Contrôles d’état
• Pour définir la durée d’apparition d’un état dans la fenêtre de document, entrez la valeur de cadence des états
souhaitée dans le panneau Etats.
• Les états masqués qui n’ont pas été exportés n’apparaissent pas dans l’aperçu (voir la section « Masquage d’états en
cours de lecture » à la page 223).
• L’aperçu de l’animation dans la fenêtre Original affiche les graphiques sources à leur résolution normale, et non
l’aperçu optimisé utilisé pour le fichier exporté.
Prévisualisation d’une animation dans la fenêtre Aperçu
1 Cliquez sur le bouton Aperçu dans le coin supérieur gauche de la fenêtre Document.
2 Utilisez les contrôles d’état.
Prévisualisation d’une animation dans un navigateur Web
❖ Choisissez Fichier > Aperçu dans le navigateur, puis sélectionnez un navigateur dans le sous-menu.
Remarque : pour afficher le déplacement lorsque vous prévisualisez l’animation, dans le panneau Optimisation,
sélectionnez le format de fichier d’exportation GIF animé, même si vous souhaitez importer l’animation en Flash en tant
que fichier SWF ou PNG Fireworks.
Optimisation d’une animation
Après la configuration des symboles et des états qui composent une animation, optimisez l’animation pour faciliter
son chargement et sa lecture.
Lorsque vous avez créé et optimisé une animation, elle est prête à être exportée. Pour plus de détails, reportez-vous à
la section « Exportation d’une animation » à la page 255.
Configuration de la lecture en boucle d’une animation
L’option Boucle permet de répéter une animation et de limiter le nombre d’états requis pour celle-ci.
1 Sélectionnez la commande Fenêtre > Etats pour afficher le panneau Etats.
2
Cliquez sur le bouton Lecture en boucle de l’animation GIF
, au bas du panneau.
3 Sélectionnez le nombre de répétitions après la lecture initiale de l’animation.
Par exemple, si vous sélectionnez 4, l’animation sera lue cinq fois en tout. Avec l’option En continu, l’animation se
répète indéfiniment.
Sélection de paramètres depuis le panneau Optimisation
L’optimisation permet de comprimer un fichier au maximum et d’en réduire ainsi le temps de téléchargement à partir
du Web. Pour plus de détails sur les options d’optimisation, reportez-vous à la section « Optimisation des fichiers GIF,
PNG, TIFF, BMP et PICT » à la page 244.
1 Choisissez Fenêtre > Optimisation.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 228
Création d’animations
2 Sélectionnez le format de fichier d’exportation dans le panneau Optimisation.
3 Sélectionnez les options Palette et Tramage.
4 Dans le menu contextuel Transparence du panneau Optimisation, sélectionnez Transparence d’index ou
Transparence Alpha.
5 Utilisez les outils de transparence du panneau Optimisation pour sélectionner les couleurs utilisées pour la
transparence.
6 Dans le panneau Etats, définissez la cadence des états.
Utilisation d’animations existantes
Pour utiliser un fichier GIF animé existant, importez celui-ci dans un fichier Fireworks ou ouvrez-le en tant que
nouveau fichier.
Lorsque vous importez un fichier GIF animé, Fireworks le convertit en symbole d’animation et le place dans l’état
sélectionné. Si l’animation importée compte plus d’états que l’animation active, vous pouvez choisir d’ajouter
automatiquement le nombre d’états nécessaire.
Les fichiers GIF importés adoptent les paramètres de cadence d’états du document actif. Comme le fichier importé est
un symbole d’animation, vous pouvez lui appliquer des mouvements supplémentaires. Par exemple, importez
l’animation d’une personne marchant sur place et appliquez-lui des propriétés de direction et de mouvement pour lui
faire traverser l’écran.
Lorsque vous ouvrez un GIF animé dans Fireworks, un nouveau fichier est créé, et chaque état du fichier GIF est placé
dans un état distinct. Bien que le fichier GIF ne soit pas un symbole d’animation, il conserve les paramètres de cadence
des états d’origine.
Les animations ajoutées aux gabarits ne sont pas affichées. Ajoutez l'animation dans une page enfant et partagez-la
entre toutes les pages.
Une fois le fichier importé, vous définissez son format de fichier comme GIF animé pour exporter le mouvement
depuis Fireworks.
Importation d’un fichier GIF animé
1 Choisissez Fichier > Importer.
2 Naviguez jusqu’au fichier, puis cliquez sur Ouvrir.
3 Cliquez sur le fichier et faites-le glisser sur la zone de travail.
Ouverture d’un fichier GIF animé
❖ Choisissez Fichier > Ouvrir, puis localisez le fichier GIF.
Utilisation de fichiers multiples pour une animation
Fireworks peut créer une animation à partir d’un groupe de fichiers d’image. Vous pouvez, par exemple, créer une
bannière publicitaire à partir de plusieurs images existantes.
1 Choisissez Fichier > Ouvrir.
2 Maintenez la touche Maj enfoncée et cliquez sur différents fichiers pour les sélectionner.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 229
Création d’animations
3 Cliquez sur Ouvrir en tant qu’animation, puis sur OK.
Fireworks ouvre les fichiers dans un nouveau document unique, en plaçant chaque fichier dans un état distinct,
dans l’ordre dans lequel vous avez sélectionné les fichiers.
Création d’animations Torsion et Nuance
La commande Torsion et Nuance permet de créer plusieurs occurrences d’un objet qui apparaissent et disparaissent
progressivement le long d’une trajectoire tordue. Une fois le premier objet créé, les autres occurrences sont créées
automatiquement en fonction des options que vous définissez dans la boîte de dialogue Torsion et Nuance. Vous
pouvez également animer les objets créés à l’aide des options de la boîte de dialogue et enregistrez l’animation au
format GIF.
1 Créez ou placez un objet sur la zone de travail. Dessinez un cercle ou placez une image sur la zone de travail, par
exemple.
2 Sélectionnez Commandes > Création > Torsion et Nuance.
3 Dans la boîte de dialogue Torsion et Nuance, configurez les paramètres en fonction de vos préférences. Manipulez
les différentes options de la boîte de dialogue pour personnaliser l’effet. Positionnez la boîte de dialogue de telle
sorte que vous puissiez voir les modifications au fur et à mesure que vous les effectuez.
Etapes Nombre d’occurrences de l’objet créé.
Opacité Opacité des objets créés.
Direction Direction dans laquelle les objets sont successivement créés par rapport au premier objet.
En retard Chaque objet se place derrière l’objet suivant de l’ensemble.
Animer Sélectionnez cette option pour animer l’ensemble d’objets que vous avez créé.
Atténué Lorsque vous augmentez la valeur de ce champ, l’effet d’atténuation est appliqué en partant du dernier
objet créé jusqu’au premier objet.
Saturé Modifiez la valeur pour changer les couleurs des objets créés.
Pas Plus vous augmentez le pas et plus les objets créés sont espacés.
Rotation Degré de rotation des objets successifs.
Direction Angle d’alignement des autres objets par rapport au premier objet.
Echelle Facteur de mise à l’échelle des autres objets par rapport au premier objet.
Opacité Opacité des autres objets par rapport au premier objet.
Aléatoire Cliquez sur Aléatoire pour faire des essais avec un ensemble aléatoire de valeurs définies par le système.
Bougé Ajoute des variations à l’option que vous avez sélectionnée. La valeur que vous entrez détermine le taux de
variation.
Paramètres prédéfinis Sélectionnez le paramètre prédéfini qui vous convient le mieux. Il est judicieux de partir
d’un paramètre prédéfini, puis de configurer les différentes options en fonction du résultat souhaité. Vous pouvez
également sélectionner Par défaut ou Dernière utilisation pour appliquer l’ensemble de préférences par défaut ou
précédent, respectivement.
Aperçu Sélectionnez Aperçu pour voir l’effet des options que vous choisissez dans la boîte de dialogue sur l’objet.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 230
Création d’animations
Remarque : Si vous avez sélectionné l’option Animer, le graphique disparaît de la zone de travail lorsque vous cliquez
sur OK.
4 Dans la boîte de dialogue Propriétés, sélectionnez Gif animé Websnap 128 dans la liste des options de format.
5 Appuyez sur F12 pour afficher un aperçu de l’animation dans un navigateur.
Remarque : Vous pouvez dissocier les objets créés comme n’importe quels autres objets.
Dernière mise à jour le 29/4/2010
Chapitre 16 : Création de diaporamas
Création et organisation d’un diaporama
La fenêtre Créer un diaporama permet de créer un diaporama de type Adobe® Flash® ou HTML/SPRY, en
sélectionnant un dossier contenant des images et en ajoutant des options de diaporama. Vous pouvez modifier des
diaporamas en ajoutant ou en supprimant des images, ou en ajoutant plusieurs albums dans un diaporama unique.
Si vous êtes un concepteur ou développeur Flash, vous pouvez également créer un lecteur d’album personnalisé dans
Flash pour afficher la sortie XML du créateur d’album Adobe Fireworks®.
Création d’un diaporama
1 Choisissez Commandes > Créer un diaporama.
2 Cliquez sur le bouton Ajouter un album (le signe plus) situé à côté de l’entrée Albums.
3 Choisissez les fichiers d’image à inclure dans le diaporama et cliquez sur OK.
4 Renseignez les Propriétés du livre d’albums et les Propriétés de l’album.
5 Sélectionnez les panneaux de droite pour configurer les propriétés du diaporama.
6 Spécifiez l’emplacement du diaporama terminé dans le panneau Options d’exportation.
7 Après avoir configuré tous les paramètres du diaporama, cliquez sur Créer.
8 (Facultatif) Pour afficher le diaporama dans votre navigateur, sélectionnez l’option Lancer le diaporama dans le
navigateur, puis cliquez sur Terminer.
231
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 232
Création de diaporamas
Ouverture d’un diaporama existant
1 Choisissez Commandes > Créer un diaporama.
2 Dans la fenêtre Créer un diaporama, cliquez sur le bouton Ouvrir un album existant ou cliquez sur le bouton
Parcourir (...) en regard de l’entrée Albums.
3 Accédez au dossier contenant le fichier XML du diaporama existant et cliquez sur Ouvrir.
Suppression d’un album
1 Ouvrez un diaporama existant.
2 Sélectionnez un album dans les listes Albums, puis cliquez sur le bouton Supprimer album(s) sélectionné(s) (signe
moins) en regard de l’entrée Albums.
Organisation d’un album
1 Ouvrez un diaporama existant.
2 Sélectionnez un album dans la liste.
• Pour ajouter des images, cliquez sur le bouton Ajouter image(s) (signe plus) en regard de l’entrée Images.
Ensuite, cliquez sur le bouton Parcourir (...), puis sélectionnez une ou plusieurs images.
• Pour modifier l’ordre des images, sélectionnez une image, puis cliquez sur les boutons fléchés situés en haut de
la liste des images afin de la déplacer.
Personnalisation d’un diaporama
Pour afficher un panneau Propriétés et personnaliser les propriétés qu’il contient, cliquez dessus dans la partie droite
de la fenêtre Créer un diaporama.
Panneau Propriétés de l’album
Les propriétés de l’album s’appliquent à un livre, qui peut contenir plusieurs albums.
Titre Il peut contenir un espace (« Mon voyage », par exemple).
Description Entrez une description.
Lecteur Sélectionnez le type.
Icône Info (en regard de l’entrée Lecteur) Cliquez dessus pour afficher des informations complémentaires sur le
lecteur, y compris les propriétés des albums pris en charge par le type de lecteur sélectionné.
Démarrer automatiquement le diaporama Permet de démarrer le diaporama à l’ouverture du lecteur.
Autoriser l’activation des images Permet à l’utilisateur de cliquer sur l’image pour l’ouvrir dans une nouvelle fenêtre
de navigateur et l’enregistrer ou de l’afficher dans un nouvel onglet ou en taille réelle.
Panneau Propriétés de l’album
Les propriétés de l’album s’appliquent uniquement à l’album sélectionné.
Description Entrez une description de l’album.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 233
Création de diaporamas
Vignette Sélectionnez une image pour obtenir un aperçu de la vignette dans le diaporama.
Arrière-plan Sélectionnez une image d’arrière-plan personnalisée, puis redimensionnez-la à l’échelle du diaporama.
Panneau Légendes
Utilisez les options de légendes pour personnaliser les légendes des différentes images du diaporama.
Appliquer à tous les albums Permet d’appliquer les options de légendes à tous les albums du livre.
Aucun changement Conserve les légendes existantes.
Effacer toutes les légendes Efface toutes les légendes de l’album.
Utiliser les noms de fichiers Utilise les noms de fichiers des images comme légende.
Inclure l’extension Si vous choisissez les noms de fichiers comme légendes, indiquez les extensions de fichiers.
Insérer un texte Utilise le texte spécifié comme légende pour chacune des images.
Remplacer les légendes Applique à toutes les images le texte que vous avez inséré.
Panneau Filtres
Vous ne pouvez appliquer des filtres qu’à un nouvel album. Pour appliquer des filtres sélectionnés à tous les albums
du livre, sélectionnez l’option Appliquer à tous les albums.
Panneau Propriétés du diaporama
Les propriétés du diaporama s’appliquent au diaporama sélectionné.
Appliquer à tous les albums Permet d’appliquer les options spécifiées à tous les albums du livre.
Intervalle Nombre de secondes entre les images.
Utiliser la transition Permet de sélectionner un effet de transition entre les différentes images.
Première image Définit la première image de l’album. Il s’agit du numéro de séquence de l’image dans l’album.
Séquence d’affichage Permet de choisir d’afficher les images dans un ordre ou de façon aléatoire.
Panneau Options d’exportation
Les options de ce panneau permettent de paramétrer l’exportation des images.
Exporter des images Permet d’exporter les images en taille réelle ou sous forme de vignettes, avec les paramètres
appropriés. Désélectionnez cette option pour exporter uniquement le fichier XML.
Générer un fichier XML Permet de générer un fichier slideshow.xml pour les images et répertoires du diaporama.
Désélectionnez cette option pour exporter uniquement les images.
Format XML Sélectionnez le format XML exporté en choisissant l’option Créer un diaporama ou Adobe Media Gallery
si vous sélectionnez la commande Générer un fichier XML.
Chemin d’exportation Dossier dans lequel le diaporama et les fichiers associés sont générés et exportés.
Largeur et Hauteur Largeur et hauteur des images en taille réelle exportées. Les images mises à l’échelle conservent
leurs proportions d’origine.
Exporter des vignettes Permet d’exporter les vignettes et les images en taille réelle.
Largeur et Hauteur Largeur et hauteur des vignettes exportées.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 234
Création de diaporamas
Qualité d’image Spécifiez la qualité de sortie des images exportées (en taille réelle et vignettes). La valeur 100
correspond à la meilleure qualité possible.
Ajuster l’image Si nécessaire, agrandissez les images à la taille d’exportation spécifiée.
Création d’un lecteur Fireworks personnalisé
Vous pouvez créer un lecteur personnalisé que vous utiliserez avec la commande Créer un diaporama. Les fichiers
source des lecteurs de diaporama par défaut sont également inclus dans le logiciel pour vous permettre de modifier ou
d’habiller les lecteurs.
1 Publiez le fichier SWF et, le cas échéant, le fichier HTML (portant l’extension .htm ou .html).
2 Remplacez l’extension .swf du fichier SWF par une autre extension.
Remarque : sous Mac OS, l’opération qui consiste simplement à renommer le fichier SWF dans le Finder peut ne pas
fonctionner (sauf si vous avez défini l’option Afficher les extensions de fichier). Vous devrez peut-être le renommer à
l’aide de la boîte de dialogue de propriétés de fichier, sous Nom & Extension.
3 Dans le même dossier que le fichier SWF, créez un fichier XML semblable à l’exemple suivant :
<?xml version="1.0"encoding="utf-8"?>
<FWACPlayer>
<Player name="Player - Black (Flash)"preview="player_black.jpg"launch="index.html">
<File src="player_black.fap"dst="player_black.swf"/>
<File src="player_black.html"dst="index.html"/>
<Info src="player_black.info"/>
</Player>
<Player name="Player - White (Flash)"preview="player_white.jpg"launch="index.html">
<File src="player_white.fap"dst="player_white.swf"/>
<File src="player_white.html"dst="index.html"/>
<Info src="player_white.info"/>
</Player>
</FWACPlayer>
Remarque : si vous disposez de plusieurs versions du même lecteur de base, vous pouvez les répertorier dans le fichier
XML (comme indiqué plus haut).
4 Pour chaque nœud de lecteur (Player), indiquez le nom du fichier source et du fichier cible dans le nœud de fichier File.
5 (Facultatif) Pour fournir des informations supplémentaires sur le lecteur, ajoutez le nœud Info, dans lequel
l’attribut src contient le nom du fichier. Le fichier Info doit contenir du texte HTML. Si le fichier contient un
simple texte non HTML, les sauts de page, retours chariot et tabulations sont supprimés avant l’affichage du texte.
6 Créez ou modifiez le fichier MXI de telle sorte que le fichier SWF et le fichier HTML renommés soient placés dans
un dossier Configurations/Commandes/Lecteurs.
Remarque : pour que l’option de lancement du diaporama dans le navigateur fonctionne en fin de processus, les
fichiers SWF et HTML doivent porter le même nom.
Le fichier XML généré présente la structure suivante :
Dernière mise à jour le 29/4/2010
<AlbumBook... >
<Album ... >
<Slide ...
<Slide ...
<Slide ...
</Album>
<Album ... >
<Slide ...
<Slide ...
<Slide ...
</Album>
</AlbumBook>
UTILISATION DE FIREWORKS CS5 235
Création de diaporamas
/>
/>
/>
/>
/>
/>
Définition des nœuds
Nœud AlbumBook
ver Version de la commande Créer un diaporama qui a permis de créer le fichier XML.
title Titre principal du diaporama.
description Description de l’intégralité du diaporama.
firstAlbum Index de base zéro du premier album à afficher.
width Largeur du diaporama.
height Hauteur du diaporama.
showThumbnails Détermine l’affichage ou non des vignettes (ou l’exportation ou non des vignettes).
thumbWidth Largeur de la vignette.
thumbHeight Hauteur de la vignette.
autoStart Permet de démarrer automatiquement le diaporama.
allowClick Autorisation ou non des utilisateurs à cliquer sur les images.
clickAction Action à exécuter lorsqu’un utilisateur clique sur une image (l’ouvrir dans une nouvelle fenêtre, un nouvel
onglet ou laisser le lecteur décider).
Nœud Album
title Titre de l’album.
description Description de l’album.
path Nom du dossier contenant les images de cet album. Les vignettes sont exportées dans le dossier Thumbs
(Vignettes) contenu dans le chemin.
hasThumb Indique que l’album possède une vignette.
thumbSrc Image source utilisée pour la vignette de l’album.
hasBg Indique que l’album possède une image d’arrière-plan.
bgSrc Image d’arrière-plan de l’album.
bgScale Méthode de mise à l’échelle de l’image d’arrière-plan de l’album.
interval Intervalle du diaporama exprimé en secondes pour cet album.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 236
Création de diaporamas
useTransition Indique qu’un effet de transition doit être utilisé lors du passage d’une image à une autre.
transType Transition du diaporama pour cet album.
transTime Durée de la transition.
firstImage Index de base zéro de la première image à afficher.
dispSequence Ordre d’affichage des images (séquentiel ou aléatoire).
Noeud Slide (Diapositive)
src Nom du fichier d’image de cette diapositive.
caption Légende associée à cette diapositive.
width Largeur de la diapositive.
height Hauteur de la diapositive.
thumbWidth Largeur de la vignette de diapositive.
thumbHeight Hauteur de la vignette de diapositive.
Dernière mise à jour le 29/4/2010
Chapitre 17 : Optimisation et exportation
L’exportation de graphiques depuis Adobe® Fireworks® se déroule en deux étapes. Avant de procéder à l’exportation,
il convient d’optimiser les graphiques, c’est-à-dire de sélectionner les options proposant le meilleur compromis entre
la qualité des graphiques et la taille de leur fichier afin de les télécharger aussi rapidement que possible.
L’assistant Exportation vous guide tout au long des processus d’optimisation et d’exportation. Il vous propose certains
paramètres et affiche l’aperçu de l’image pour vous aider à l’optimiser. Vous pouvez également utiliser l’aperçu de
l’image indépendamment de l’assistant.
Pour davantage de précision, utilisez les outils de l’espace de travail, tels que le panneau Optimisation, les boutons
d’aperçu de la fenêtre de document et la boîte de dialogue Exporter.
Dans certains cas, vous pouvez enregistrer des graphiques sans les exporter. Pour plus d’informations, reportez-vous
à la section « Enregistrement de documents dans d’autres formats » à la page 12.
Utilisation de l’assistant Exportation
L’assistant Exportation vous guide, étape par étape, tout au long des processus d’optimisation et d’exportation.
1 Choisissez Fichier > Assistant Exportation.
2 Répondez à toutes les questions qui s’affichent, puis cliquez sur Continuer dans chaque panneau.
Cliquez sur Taille du fichier d’exportation cible dans le premier panneau pour optimiser selon une taille de fichier
maximum.
3 Cliquez sur Quitter dans la fenêtre Résultats de l’analyse de l’assistant.
La fenêtre Aperçu de l’image présente des options d’exportation recommandées.
Utilisation de l’aperçu de l’image
Vous pouvez ouvrir l’aperçu de l’image depuis l’assistant Exportation ou depuis le menu Fichier (Fichier > Aperçu de
l’image).
Le document ou le graphique s’affiche dans la zone d’aperçu tel qu’il est exporté, accompagné d’une estimation de la
taille du fichier et du temps de téléchargement selon les paramètres d’exportation choisis.
237
UTILISATION DE FIREWORKS CS5 238
Dernière mise à jour le 29/4/2010
A
Optimisation et exportation
B C
D
A. Jeu d’options enregistré pour l’exportation sélectionnée B. Estimation du temps de téléchargement et de la taille du fichier C. Aperçu avec
les paramètres d’exportation sélectionnés D. Enregistrement des paramètres d’exportation dans la vue active
Dans le cas de l’exportation de fichiers GIF animés ou de survols JavaScript, l’estimation de la taille du fichier
correspond à la somme des tailles de tous les états.
Remarque : pour accélérer le rafraîchissement de l’aperçu de l’image, désactivez Aperçu. Pour interrompre le
rafraîchissement de la zone d’aperçu lorsque vous modifiez les paramètres, appuyez sur la touche Echap.
Utilisation de la zone d’aperçu
Zoom sur l’image
❖ Cliquez sur le bouton Zoom
, puis cliquez dans l’aperçu pour l’agrandir. Tout en maintenant la touche Alt
(Windows) ou Option (Mac OS) enfoncée, cliquez sur le bouton dans l’aperçu pour effectuer un zoom arrière.
Panoramique de l’image
❖ Procédez de l’une des manières suivantes :
• Cliquez sur le bouton Pointeur
en bas de la boîte de dialogue, puis faites glisser le pointeur dans l’aperçu.
• Lorsque le pointeur Zoom est actif, faites-le glisser dans l’aperçu tout en maintenant la barre d’espace enfoncée.
Division de la zone d’aperçu pour comparer des paramètres
❖ Cliquez sur un bouton de vue scindée
,
,
.
Chaque fenêtre d’aperçu permet d’afficher un aperçu du graphique avec des paramètres d’exportation différents.
Remarque : le zoom et le panoramique sont appliqués simultanément à toutes les fenêtres ouvertes.
Définition des options de l’aperçu de l’image
Optimisation d’une image en fonction de la taille du fichier cible
1 Cliquez sur l’onglet Options.
2 Cliquez sur le bouton Assistant Optimiser la taille
.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 239
Optimisation et exportation
3 Entrez la taille du fichier en Ko, puis cliquez sur OK.
L’assistant Optimiser la taille tente d’obtenir la taille de fichier requise comme suit :
• En ajustant la qualité JPEG
• En modifiant le lissage JPEG
• En modifiant le nombre de couleurs dans les images 8 bits
• En changeant les paramètres de tramage dans les images 8 bits
• En activant ou désactivant les paramètres d’optimisation
Définition des dimensions des images exportées
1 Cliquez sur l’onglet Fichier.
2 Spécifiez le pourcentage de mise à l’échelle ou entrez la largeur et la hauteur en pixels. Sélectionnez Contraindre
pour mettre proportionnellement la largeur et la hauteur à l’échelle.
Définition d’une seule partie d’une image à exporter
1 Cliquez sur l’onglet Fichier.
2 Sélectionnez Zone d’exportation, puis procédez de l’une des façons suivantes :
• Faites glisser le rectangle en pointillés qui entoure l’aperçu pour délimiter la zone d’exportation. (Faites glisser
le rectangle à l’intérieur de l’aperçu pour voir les zones non affichées.)
• Entrez les coordonnées en pixels des limites de la zone d’exportation.
Sélection des paramètres d’animation
1 Cliquez sur l’onglet Animation.
• Pour afficher un seul état, dans la liste à gauche de la boîte de dialogue, sélectionnez l’état que vous voulez
afficher. Vous pouvez également utiliser les contrôles d’état qui se trouvent dans le coin inférieur droit de la boîte
de dialogue.
• Pour voir l’animation, cliquez sur le contrôle Lire/Arrêter dans la partie inférieure droite de la boîte de dialogue.
2 Pour définir la méthode de suppression des états, sélectionnez un état dans la liste, cliquez sur l’icône de la corbeille,
puis choisissez l’une des options suivantes :
Non spécifiée Détermine automatiquement une méthode de suppression pour l’état actif, en rejetant ce dernier si
l’état suivant contient une transparence de calque. Pour la plupart des animations, cette option automatique activée
par défaut permet d’obtenir les meilleurs résultats visuels ainsi que les tailles de fichier les plus réduites.
Aucune Conserve l’état actif tandis que l’état suivant vient s’ajouter dans l’affichage. L’état actif (et les états
précédents) peut être visible à travers les zones transparentes de l’état suivant. Si vous choisissez cette option,
utilisez un navigateur pour afficher un aperçu précis de l’animation.
Restaurer l’arrière-plan Rejette l’état actif et le remplace temporairement par l’arrière-plan de la page Web. Un seul
état s’affiche à la fois. Choisissez cette option si des objets animés se déplacent sur un arrière-plan transparent.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 240
Optimisation et exportation
Restaurer la version précédente Rejette l’état actif et le remplace temporairement par l’état précédent. Choisissez
cette option si des objets animés se déplacent sur un arrière-plan opaque.
3 Pour définir la cadence des états, sélectionnez un état dans la liste, puis entrez la cadence en centièmes de seconde
dans la zone Cadence des états.
4 Pour que l’animation se répète en continu, cliquez sur le bouton de lecture en boucle, puis sélectionnez le nombre
de répétitions dans le menu contextuel.
5 Pour recadrer chaque état afin que seule la zone qui diffère d’un état à l’autre s’affiche, sélectionnez Recadrer chaque
état. Cette option permet de réduire la taille du fichier.
6 Pour obtenir une sortie exclusive en pixels qui change entre les états, sélectionnez l’option Enregistrer les
différences entre les états. Cette option permet de réduire la taille du fichier.
Exportation à l’aide de l’aperçu de l’image
1 Choisissez Fichier > Aperçu de l’image.
2 Sélectionnez les options souhaitées sur chaque onglet.
3 Cliquez sur Exporter.
4 Dans la boîte de dialogue Exporter, entrez un nom de fichier, sélectionnez un répertoire de destination, définissez
d’autres options, puis cliquez sur Enregistrer.
Optimisation dans l’espace de travail
L’espace de travail de Fireworks propose des fonctions d’optimisation et d’exportation qui vous permettent de
contrôler la manière dont les fichiers sont exportés. Vous pouvez utiliser des options d’optimisation prédéfinies ou
choisir des options particulières, telles que le type de fichier ou la palette de couleurs, pour personnaliser le processus
d’optimisation.
Le panneau Optimisation contient les commandes d’optimisation clés et (pour les formats de fichier 8 bits) un tableau
affichant les couleurs dont est composée la palette de couleurs d’exportation active. Le panneau affiche des paramètres
de la sélection active (une tranche ou le document entier).
Les boutons d’aperçu de la fenêtre de document permettent d’afficher le graphique exporté tel qu’il apparaîtrait avec
les paramètres d’optimisation actifs.
Vous pouvez ainsi optimiser l’ensemble du document, ou bien sélectionner des tranches individuelles ou des zones
sélectionnées d’un graphique JPEG et affecter à chacune d’elles différents paramètres d’optimisation.
Optimisation de tranches individuelles
Lorsqu’une tranche est sélectionnée, vous pouvez choisir des paramètres d’optimisation prédéfinis (enregistrés) dans
le menu contextuel Paramètres d’exportation de la tranche de l’inspecteur des propriétés.
1 Cliquez sur une tranche pour la sélectionner. Pour sélectionner plusieurs tranches à la fois, cliquez sur chacune
d’elles tout en maintenant la touche Maj enfoncée.
2 Sélectionnez des options dans le panneau Optimisation.
UTILISATION DE FIREWORKS CS5 241
Dernière mise à jour le 29/4/2010
Optimisation et exportation
Aperçu et comparaison des paramètres d’optimisation
Les boutons d’aperçu de document vous permettent d’afficher le graphique tel qu’il apparaîtrait dans un
navigateur Web selon les paramètres d’optimisation. Vous pouvez prévisualiser les survols et les comportements de
navigation, ainsi que les animations.
Bouton Original et boutons d’aperçu du document
L’aperçu indique la taille totale, la durée prévue du téléchargement et le format de fichier du document. La durée
prévue représente la moyenne du temps nécessaire au téléchargement de l’ensemble des tranches et états 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 supplémentaires
qui varient en fonction du type de fichier sélectionné.
Lorsque vous affichez un aperçu, vous pouvez optimiser un document entier ou une simple sélection de tranches. Le
calque de superposition des tranches permet de différencier les tranches en cours d’optimisation du reste du
document.
Lorsque le calque de superposition des tranches est activé, les tranches qui ne sont pas optimisées sont grisées.
Aperçu d’un graphique selon les paramètres d’optimisation actifs
❖ Cliquez sur le bouton Aperçu dans le coin supérieur gauche de la fenêtre de document.
Remarque : dans le panneau Outils, cliquez sur Masquer les tranches
découpe pendant l’aperçu.
pour masquer les tranches et les repères de
Comparaison d’aperçus avec des paramètres d’optimisation différents
1 Cliquez sur le bouton 2 en 1 ou 4 en 1 dans le coin supérieur gauche de la fenêtre de document.
2 Cliquez sur l’un des aperçus scindés.
3 Entrez les paramètres dans le panneau Optimisation.
4 Sélectionnez les autres aperçus, puis spécifiez des paramètres d’optimisation différents pour chacun d’eux.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 242
Optimisation et exportation
Lorsque vous sélectionnez 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.
Passage d’une vue optimisée à la vue originale en mode 2 en 1 ou 4 en 1
1 Sélectionnez une vue optimisée.
2 Dans le menu contextuel Aperçu situé au bas de la fenêtre d’aperçu, sélectionnez Original (pas d’aperçu).
Passage de la vue du document original vers une vue optimisée en mode 2 en 1 ou 4 en 1
1 Sélectionnez la vue de l’image originale.
2 Dans le menu contextuel Aperçu, sélectionnez Aperçu de l’image.
Affichage ou masquage du calque de superposition des tranches
❖ Choisissez Affichage > Calque de superposition des tranches.
Optimisation à l’aide d’une option prédéfinie
Choisissez Fenêtre Optimisation pour ouvrir le panneau Optimisation. Lorsque vous choisissez une option prédéfinie,
les autres options du panneau Optimisation sont automatiquement définies.
❖ Sélectionnez une option prédéfinie dans le menu contextuel Paramètres de l’inspecteur des propriétés ou du
panneau Optimisation.
GIF Web 216 Force toutes les couleurs à être compatibles Web. Cette palette contient jusqu’à 216 couleurs.
GIF WebSnap 256 Convertit les couleurs dans la couleur sécurisée pour le Web la plus proche. Cette palette
contient jusqu’à 256 couleurs au maximum.
GIF WebSnap 128 Convertit les couleurs dans la couleur sécurisée pour le Web la plus proche. Cette palette
contient jusqu’à 128 couleurs.
GIF adaptatif 256 Contient uniquement les couleurs réelles du graphique. Cette palette contient jusqu’à
256 couleurs au maximum.
JPEG - Qualité supérieure Définit la qualité sur 80 et le lissage sur 0, ce qui produit une image de haute qualité mais
dont le fichier est de plus grande taille.
JPEG - Fichier réduit Définit la qualité à 60 et le lissage à 2, ce qui produit un fichier dont la taille vaut moins que la
moitié d’un fichier JPEG de qualité supérieure, mais avec un niveau de qualité inférieur.
GIF animé WebSnap 128 Sélectionne le format de fichier GIF animé et convertit les couleurs dans la couleur
sécurisée pour le Web la plus proche. Cette palette contient jusqu’à 128 couleurs.
Choix d’un type de fichier
Pour une optimisation personnalisée, sélectionnez un type de fichier dans le menu contextuel Exporter un format de
fichier du panneau Optimisation, puis définissez des options propres à ce format, telles que le codage des couleurs, le
tramage et la qualité. Vous pouvez enregistrer ces paramètres comme nouveau paramètre prédéfini.
GIF Le format GIF (Graphics Interchange Format) est un format de fichier graphique Web répandu et idéal pour les
bandes dessinées, les logos, les images comportant des zones transparentes et les animations. Les images dans
lesquelles se trouvent des zones de couleur unie répondent particulièrement bien à la compression lorsqu’elles sont
exportées en fichiers GIF. Les fichiers GIF contiennent 256 couleurs maximum.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 243
Optimisation et exportation
JPEG Développé par le Joint Photographic Experts Group pour les besoins spécifiques des images photographiques ou
des images couleur haute définition, le format JPEG prend en charge des millions de couleurs (24 bits). Le format JPEG
est idéal pour 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.
PNG Le format PNG (Portable Network Graphic) est un format de fichier graphique Web polyvalent pouvant prendre
en charge les couleurs 32 bits, inclure une transparence ou une couche alpha et être progressif. Cependant, les
navigateurs Web ne peuvent pas tous afficher des images PNG. Bien que le format PNG soit le format de fichier natif
de Fireworks, les fichiers PNG Fireworks contiennent des informations supplémentaires propres à l’application qui ne
sont pas comprises dans un fichier PNG exporté ou dans des fichiers créés dans d’autres applications.
WBMP Le format graphique WBMP (Wireless Bitmap) a été conçu pour les périphériques de l’informatique mobile
tels que téléphones portables et assistants numériques personnels. Il est utilisé spécifiquement pour les pages WAP
(Wireless Application Protocol). Le format WBMP étant un format 1 bit, seules deux couleurs sont visibles : le noir et
le blanc.
TIFF Le format graphique TIFF (Tagged Image File Format) est utilisé pour le stockage des images bitmap. Les
fichiers TIFF sont plus particulièrement utilisés dans l’édition. De nombreuses applications multimédia prennent
également en charge les fichiers importés au format TIFF.
BMP Format de fichier graphique de Microsoft Windows. De nombreuses applications peuvent importer des
images BMP.
PICT Format de fichier développé par Apple Computer et principalement utilisé sur les systèmes
d’exploitation Macintosh. La plupart des applications Mac peuvent importer des images PICT.
Voir aussi
« Optimisation des fichiers GIF, PNG, TIFF, BMP et PICT » à la page 244
« Optimisation des fichiers JPEG » à la page 251
Enregistrement et réutilisation de paramètres d’optimisation
Fireworks mémorise les derniers paramètres d’optimisation utilisés après l’une des actions suivantes :
• Fichier > Enregistrer
• Fichier > Enregistrer sous
• Fichier > Exporter
Fireworks applique ensuite ces paramètres aux nouveaux documents.
Remarque : les paramètres d’optimisation par défaut appliqués aux nouvelles tranches sont ceux du document
parent.
Vous pouvez également enregistrer des paramètres d’optimisation personnalisés pour les réutiliser ultérieurement
dans un processus d’optimisation ou un traitement par lots. Les informations suivantes sont enregistrées dans les
optimisations prédéfinies personnalisées :
• Paramètres et table de couleurs définis dans le panneau Optimisation
• Paramètres de cadence des états du panneau Etats (pour les animations uniquement)
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 244
Optimisation et exportation
Enregistrement des paramètres d’optimisation comme paramètres prédéfinis
Les paramètres d’optimisation enregistrés s’affichent dans la partie inférieure du menu contextuel Paramètres du
panneau Optimisation et dans l’inspecteur des propriétés. Le fichier prédéfini est enregistré dans le dossier Export
Settings de votre dossier Fireworks de profil utilisateur spécifique. Pour plus d’informations sur l’emplacement de ce
dossier, reportez-vous à la section « A propos des fichiers de profil utilisateur » à la page 316.
1 Dans le menu Options du panneau Optimisation, sélectionnez Enregistrer les paramètres.
2 Entrez le nom de l’optimisation prédéfinie, puis cliquez sur OK.
Partage de paramètres d’optimisation enregistrés avec un autre utilisateur de Fireworks
❖ Copiez le fichier d’optimisation prédéfini enregistré du dossier Export Settings vers le dossier équivalent sur l’autre
ordinateur.
Remarque : l’emplacement de ce dossier varie en fonction du système d’exploitation.
Suppression d’une optimisation prédéfinie personnalisée
Vous ne pouvez pas supprimer un paramètre d’optimisation prédéfini de Fireworks.
1 Dans le menu contextuel Paramètres enregistrés du panneau Optimisation, sélectionnez un paramètre
d’optimisation.
2 Dans le menu Options du panneau Optimisation, sélectionnez Supprimer les paramètres.
Optimisation des fichiers GIF, PNG, TIFF, BMP et PICT
Dans Fireworks, chaque format de fichier graphique possède un jeu d’options d’optimisation. Les fichiers de type
8 bits, tels que les fichiers aux formats GIF, PNG 8, TIFF 8, BMP 8 et PICT 8, permettent de contrôler parfaitement
l’optimisation.
Pour les graphiques Web à tons continus, notamment les photos, optez pour un format 24 bits, comme le format JPEG
(voir la section « Optimisation des fichiers JPEG » à la page 251).
Les paramètres d’optimisation de Fireworks sont similaires pour tous les formats de fichier graphique 8 bits. Pour les
formats de fichier Web, tels que les formats GIF et PNG, vous pouvez définir le taux de compression.
Tout en essayant divers paramètres d’optimisation, utilisez les boutons 2 en 1 et 4 en 1 pour tester et comparer l’aspect
du graphique et la taille estimée de son fichier.
Sélection d’une palette de couleurs
Toutes les images 8 bits contiennent une palette pouvant contenir jusqu’à 256 couleurs disponibles. Les images
utilisent uniquement ces couleurs, mais pas nécessairement toutes les couleurs.
❖ Dans le menu contextuel Palette indexée du panneau Optimisation, sélectionnez l’une des options suivantes :
Adaptative Palette personnalisée établie à partir des couleurs utilisées dans le document. Cette option produit en
général une image de qualité supérieure.
Adaptive pour le Web Palette adaptive dans laquelle les couleurs sont converties dans leur équivalent sécurisé pour
le Web le plus proche. Les couleurs sécurisées pour le Web proviennent de la palette Web 216.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 245
Optimisation et exportation
Web 216 Palette composée des 216 couleurs communes aux ordinateurs Windows et Mac OS. Cette palette est
souvent dite sécurisée pour le Web (ou compatible avec les navigateurs) parce qu’elle donne des résultats
relativement réguliers en 8 bits, quels que soient la plate-forme et le navigateur utilisés.
Exacte Palette contenant les couleurs réelles de l’image. La palette exacte n’est utilisable que pour les images
contenant au maximum 256 couleurs. Dans le cas contraire, la palette devient Adaptive.
Windows et Mac OS Palette regroupant respectivement les 256 couleurs définies par les normes des plates-formes
Windows ou Mac OS.
Niveaux de gris Palette composée de 256 nuances de gris ou moins. Sélectionnez cette palette pour convertir
l’image exportée en niveaux de gris.
Noir et blanc Palette à deux couleurs, comportant uniquement du noir et du blanc.
Uniforme Palette mathématique regroupant les valeurs en pixels des couleurs RVB.
Personnalisé Palette qui a été modifiée ou chargée à partir d’une palette externe (fichier ACT) ou d’un fichier GIF.
Optimisez et personnalisez les palettes de couleurs à l’aide de la table de couleurs dans le panneau Optimisation.
Importation d’une palette personnalisée
1 Procédez de l’une des manières suivantes :
• Dans le menu contextuel Options du panneau Optimisation, sélectionnez Charger la palette.
• Dans le menu contextuel Palette indexée du panneau Optimisation, cliquez sur Personnalisée.
2 Recherchez un fichier de palette ACT ou GIF, puis cliquez sur Ouvrir.
Les couleurs du fichier ACT ou GIF sont ajoutées dans la table de couleurs du panneau Optimisation.
Remarque : les utilisateurs Windows doivent sélectionner les fichiers GIF dans le menu contextuel Types de fichiers
pour pouvoir afficher tous les fichiers portant l’extension .gif dans la boîte de dialogue Ouvrir.
Sélection d’un codage de couleurs pour une image 8 bits
Le codage des couleurs (ou profondeur) désigne le nombre de couleurs utilisées dans le graphique. Réduire le codage
des couleurs permet d’obtenir un fichier de plus petite taille mais amoindrit également la qualité de l’image. Lorsque
vous réduisez le codage des couleurs, certaines couleurs de l’image sont rejetées, en commençant par les couleurs les
moins utilisées. Les pixels qui contiennent des couleurs rejetées sont convertis dans la couleur la plus proche présente
dans la palette.
❖ Procédez de l’une des manières suivantes :
• Dans le menu contextuel Couleurs du panneau Optimisation, sélectionnez une option.
• Entrez une valeur (de 2 à 256) dans la zone de texte.
Remarque : le nombre situé dans la partie inférieure de la table de couleurs indique le nombre de couleurs visibles
dans l’image. Si aucun nombre ne s’affiche, cliquez sur le bouton Reconstituer.
Suppression des couleurs non utilisées d’une image 8 bits
Cette opération permet de réduire la taille du fichier.
❖ Dans le menu Options du panneau Optimisation, sélectionnez Supprimer les couleurs non utilisées.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 246
Optimisation et exportation
Inclusion de toutes les couleurs de la palette, dont les couleurs non utilisées dans l’image
enregistrée
❖ Désélectionnez Supprimer les couleurs inutilisées.
Affichage et modification des couleurs d’une palette
La table des couleurs du panneau Optimisation affiche les couleurs utilisées dans l’aperçu actif de l’image lorsque vous
travaillez en mode 8 bits ou moins. Vous pouvez y modifier la palette de l’image. La table de couleurs est
automatiquement mise à jour en mode Aperçu. Elle s’affiche vide si vous optimisez plusieurs tranches à la fois ou si
vous ne travaillez pas en mode de couleurs 8 bits.
Divers petits symboles apparaissent sur certaines nuances pour indiquer certaines caractéristiques des couleurs
correspondantes, comme suit :
Symbole
Signification
La couleur a été modifiée, ce qui n’a d’effet que sur le document exporté. Si vous modifiez une couleur, la couleur dans le
document source n’est pas modifiée.
La couleur est verrouillée.
La couleur est transparente.
La couleur est sécurisée pour le Web.
La couleur possède plusieurs attributs. Dans le cas présent, cette couleur est sécurisée pour le Web, verrouillée et a été
modifiée.
Reconstitution de la table des couleurs pour prendre en compte les modifications apportées
au document
Lorsqu’une reconstitution est nécessaire, le bouton Reconstituer s’affiche en bas du panneau Optimisation.
❖ Cliquez sur le bouton Reconstituer.
Sélection des couleurs d’une palette
• Pour sélectionner une seule couleur, cliquez sur celle-ci dans la table des couleurs du panneau Optimisation.
• Pour sélectionner plusieurs couleurs, cliquez sur celles-ci tout en maintenant la touche Ctrl (Windows) ou
Cmde (Mac OS) enfoncée.
• Pour sélectionner une plage de couleurs, cliquez sur une couleur, maintenez la touche Maj enfoncée, puis cliquez
sur la dernière couleur de la plage.
Aperçu de tous les pixels du document contenant une couleur spécifique
1 Cliquez sur le bouton Aperçu dans le coin supérieur gauche de la fenêtre de document.
2 Dans la table des couleurs du panneau Optimisation, cliquez sur une nuance, puis maintenez le bouton de la souris
enfoncé.
Les pixels contenant la nuance sélectionnée changent temporairement de couleur tant que le bouton de la souris
reste enfoncé.
Remarque : lorsque vous prévisualisez des pixels dans le document à l’aide des fenêtres 2 en 1 ou 4 en 1, sélectionnez
une fenêtre plutôt que l’original.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 247
Optimisation et exportation
Verrouillage ou dé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 couleurs de la palette. Lorsque vous changez de palette après un verrouillage de
couleurs, les couleurs verrouillées sont ajoutées à la nouvelle palette.
• Pour verrouiller ou déverrouiller une nuance sélectionnée, cliquez sur le bouton Verrouiller
en bas du
panneau Optimisation. Vous pouvez également cliquer avec le bouton droit de la souris (Windows) ou maintenir
la touche Ctrl enfoncée (Mac OS) sur la nuance et choisir l’option Verrouiller la couleur.
• Pour déverrouiller toutes les couleurs, sélectionnez Déverrouiller toutes les couleurs dans le menu Options du
panneau Optimisation.
Modification des couleurs d’une palette
La modification d’une couleur remplace toutes les occurrences de cette couleur dans les images qui sont exportées ou
enregistrées au format bitmap. A l’exception des images bitmap, cette modification ne remplace pas la couleur dans
l’image d’origine. Si vous utilisez une image bitmap, enregistrez une copie de l’image au format de fichier PNG pour
conserver une version modifiable de l’image d’origine.
1 Pour ouvrir les couleurs système, procédez de l’une des manières suivantes :
• Sélectionnez une couleur, puis cliquez sur le bouton Modifier une couleur
au bas du panneau Optimisation.
• Cliquez deux fois sur une couleur dans la table de couleurs.
2 Modifiez la couleur.
Remarque : cliquez avec le bouton droit de la souris (Windows) ou tout en maintenant la touche Ctrl enfoncée
(Mac OS) sur une couleur de la palette pour afficher les options de modification.
Utilisation de couleurs sécurisées pour le Web
Les couleurs sécurisées pour le Web sont communes aux plates-formes Mac OS et Windows. Ces couleurs ne sont pas
tramées lorsqu’elles sont affichées dans un navigateur Web sur un écran d’ordinateur paramétré pour 256 couleurs.
Dans le cas d’un fichier au format PNG Fireworks, le changement des couleurs en couleurs sécurisées pour le Web
dans le panneau Optimisation agit uniquement sur la version exportée de l’image, et non l’image elle-même.
• Pour convertir toutes les couleurs en couleurs sécurisées pour le Web, sélectionnez Web 216 dans le menu
contextuel Palette indexée du panneau Optimisation.
• Pour créer une palette adaptative qui privilégie les couleurs sécurisées pour le Web, sélectionnez Adaptive pour
le Web dans le menu contextuel Palette indexée du panneau Optimisation.
• Pour convertir une couleur en son équivalent sécurisé pour le Web le plus proche, sélectionnez une couleur dans
la table des couleurs du panneau Optimisation, puis cliquez sur le bouton Magnétisme de la couleur sécurisée pour
le Web
.
Utilisation du tramage pour s’approcher des couleurs manquantes d’une palette
Le tramage permet de créer une approximation des couleurs ne figurant pas dans la palette de couleurs active, en
alternant des pixels de couleurs proches. A une certaine distance, les couleurs se mélangent et ressemblent à 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 dans un format de fichier graphique 8 bits, tel que le format GIF.
❖ Entrez une valeur de pourcentage dans la zone de texte Tramage du panneau Optimisation.
Remarque : le tramage peut augmenter considérablement la taille du fichier.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 248
Optimisation et exportation
Enregistrement des palettes de couleurs
Vous pouvez enregistrer les palettes personnalisées en tant que fichiers de palette externes exploitables dans d’autres
documents Fireworks ou dans d’autres applications prenant en charge ce type de fichier, telles qu’Adobe Flash® et
Adobe Photoshop®. Les fichiers de palettes enregistrés portent l’extension .act.
1 Dans le menu Options du panneau Optimisation, sélectionnez Enregistrer la palette.
2 Saisissez un nom, puis sélectionnez un dossier de destination.
3 Cliquez sur Enregistrer.
Vous pouvez charger le fichier de palette enregistré dans le panneau Nuancier ou Optimisation afin de l’utiliser
pour exporter d’autres documents.
Ajustement de la compression
Vous pouvez compresser des fichiers GIF en modifiant leur paramètre de perte. Plus cette valeur est élevée, plus les
fichiers sont de petite taille, mais plus la qualité de l’image est réduite. Un paramètre de perte défini entre 5 et 15 est
idéal dans la plupart des cas.
Fichier GIF d’origine ; perte de 30 ; perte de 100
❖ Dans le panneau Optimisation, entrez une valeur pour le paramètre Perte.
Transformation de zones en zones transparentes
Les zones transparentes présentes dans les fichiers GIF et PNG 8 bits permettent de révéler l’arrière-plan d’une
page Web. Dans Fireworks, un damier gris et blanc dans la fenêtre de document permet d’identifier 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 arrière-plan coloré
Remarque : bien que les fichiers PNG 32 bits contiennent de la transparence, le panneau Optimisation ne dispose pas
d’option de transparence adaptée.
Pour vos fichiers GIF, utilisez l’option Transparence d’index qui active ou désactive les pixels avec des valeurs
chromatiques particulières.
UTILISATION DE FIREWORKS CS5 249
Dernière mise à jour le 29/4/2010
Optimisation et exportation
Par défaut, les images GIF sont exportées sans transparence. Même si la le document située derrière l’image ou l’objet
apparaît transparent dans l’affichage original dans Fireworks, l’arrière-plan de l’image n’est pas nécessairement
transparent, à moins de sélectionner l’option Transparence d’index avant l’exportation.
Pour vos fichiers PNG, vous pouvez utiliser la transparence alpha, souvent employée dans les graphiques exportés qui
contiennent des dégradés de transparence et des pixels semi-opaques. Bien que la transparence soit peu intéressante
pour l’exportation pour le Web (rares sont les navigateurs qui prennent en charge le format PNG), il est utile
d’exporter des fichiers au format Flash ou Adobe Director, car les deux applications prennent en charge ce type de
transparence.
Remarque : l’application de la transparence à des couleurs n’affecte pas l’image proprement dite, mais seulement sa
version exportée. Pour voir l’aspect qu’aura l’image exportée, affichez un aperçu.
Voir aussi
« Exportation depuis l’espace de travail » à la page 253
Application d’un effet de transparence à l’arrière-plan d’une image
1 Cliquez sur le bouton Aperçu, 2 en 1 ou 4 en 1 dans le coin supérieur gauche de la fenêtre de document. En mode
d’affichage 2 en 1 ou 4 en 1, cliquez sur une autre fenêtre que celle de l’original.
2 Dans le panneau Optimisation (Fenêtre > Optimisation), sélectionnez le format de fichier GIF ou PNG 8.
Sélectionnez ensuite Transparence d’index dans le menu contextuel Choisir le type de transparence.
La couleur de la zone de travail apparaît transparente dans l’aperçu, et le graphique peut alors être exporté.
Sélection d’une couleur de transparence
1 Cliquez sur le bouton Aperçu, 2 en 1 ou 4 en 1 dans le coin supérieur gauche de la fenêtre de document. En mode
d’affichage 2 en 1 ou 4 en 1, cliquez sur une autre fenêtre que celle de l’original.
2 Dans le panneau Optimisation (Fenêtre > Optimisation), sélectionnez le format de fichier GIF ou PNG 8.
Sélectionnez ensuite Transparence d’index dans le menu contextuel Choisir le type de transparence.
3 Pour sélectionner une autre couleur, cliquez sur le bouton Sélectionner la couleur de transparence
.
4 Cliquez sur une nuance dans la table des couleurs du panneau Optimisation ou cliquez sur une couleur dans le
document.
Ajout ou suppression de couleurs transparentes
1 Cliquez sur le bouton Aperçu, 2 en 1 ou 4 en 1 dans le coin supérieur gauche de la fenêtre de document. En mode
d’affichage 2 en 1 ou 4 en 1, cliquez sur une autre fenêtre que celle de l’original.
Remarque : bien que vous puissiez ajouter ou supprimer des couleurs transparentes dans l’affichage original, vous
pouvez en observer le résultat uniquement en affichant un aperçu.
2 Dans le panneau Optimisation (Fenêtre > Optimisation), sélectionnez le format de fichier GIF ou PNG 8.
Sélectionnez ensuite Transparence d’index dans le menu contextuel Choisir le type de transparence.
3 Au bas du panneau, cliquez sur le bouton Ajoute la couleur à la transparence
transparence
.
ou Efface la couleur de la
4 Cliquez sur une nuance dans la table des couleurs ou sur une couleur dans le document.
UTILISATION DE FIREWORKS CS5 250
Dernière mise à jour le 29/4/2010
Optimisation et exportation
Entrelacement d’images à télécharger progressivement
Les images entrelacées, consultées dans un navigateur Web, commencent par s’afficher dans une faible résolution puis
parviennent à leur résolution complète à la fin de leur téléchargement.
Remarque : cette option est disponible uniquement pour les formats de fichier GIF et PNG. Vous pouvez obtenir des
résultats similaires avec une image JPEG en rendant son téléchargement progressif.
❖ Dans le menu Options du panneau Optimisation, sélectionnez Entrelacée.
Correspondance avec une couleur d’arrière-plan cible
Le lissage vous permet de lisser l’aspect d’un objet en fusionnant sa couleur avec l’arrière-plan. Par exemple, si l’objet
est noir et que la page sur laquelle il est placé est blanche, la fonction de lissage ajoute plusieurs nuances de gris aux
pixels qui forment le contour de l’objet pour adoucir la transition entre le noir et le blanc.
❖ Dans le panneau Optimisation, sélectionnez une couleur dans le menu contextuel Cache. Faites en sorte qu’elle soit
le plus proche possible de la couleur d’arrière-plan cible sur lequel le graphique sera placé.
Remarque : le lissage s’applique uniquement aux objets à contours adoucis placés directement sur la zone de travail.
Suppression des halos
Lorsque vous rendez transparente la couleur de zone de travail d’une image ayant été lissée, les pixels créés pour
assurer le lissage restent en place. Lorsque vous exportez (ou enregistrez) le graphique et le placez sur une page Web
ayant une couleur d’arrière-plan différente, les pixels situés à la périphérie de l’objet lissé peuvent prendre la forme
d’un halo, effet tout particulièrement visible sur un arrière-plan sombre.
Méthodes anti-halos dans les fichiers PNG Fireworks et les fichiers Photoshop importés
❖ Procédez de l’une des manières suivantes :
• Sélectionnez une couleur de zone de travail dans l’inspecteur des propriétés ou une couleur de cache dans le
panneau Optimisation qui soit identique à celle de l’arrière-plan de la page Web cible.
• Après avoir sélectionné l’objet à exporter, cliquez sur Net dans le menu contextuel Bord de l’inspecteur des
propriétés.
Suppression manuelle d’un halo d’une image GIF ou d’un fichier graphique
1 Ouvrez le fichier dans Fireworks et cliquez sur le bouton Aperçu, 2 en 1 ou 4 en 1 dans le coin supérieur gauche de
la fenêtre de document. En mode d’affichage 2 en 1 ou 4 en 1, cliquez sur une autre fenêtre que celle de l’original.
2 Dans le menu contextuel Transparence du panneau Optimisation, cliquez sur Transparence d’index.
3 Cliquez sur le bouton Ajoute la couleur à la transparence
, puis cliquez sur un pixel dans le halo.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 251
Optimisation et exportation
Tous les pixels de couleur identique sont effacés dans l’aperçu.
4 Si le halo subsiste, répétez l’étape 3 jusqu’à ce qu’il disparaisse.
Optimisation des fichiers JPEG
Le panneau Optimisation vous permet d’optimiser les fichiers JPEG en définissant des options de compression et
de lissage.
Les fichiers JPEG étant toujours enregistrés et exportés en couleurs 24 bits, vous ne pouvez pas les optimiser en
modifiant leur palette de couleurs. La table de couleurs est vide lorsque vous sélectionnez une image JPEG.
Tout en essayant divers paramètres d’optimisation, utilisez les boutons 2 en 1 et 4 en 1 pour tester et comparer l’aspect
et la taille estimée d’un fichier JPEG.
Remarque : il est possible d’enregistrer les fichiers JPEG directement depuis la boîte de dialogue « Enregistrer sous ».
Ajustement de la qualité JPEG
Le format JPEG est un format dit « avec perte », ce qui signifie qu’une partie des données de l’image est supprimée lors
de la compression, ce qui réduit la qualité du fichier final.
Image originale ; réglage de la qualité sur 50 ; réglage de la qualité sur 20
❖ Réglez la qualité à l’aide du curseur du menu contextuel Qualité du panneau Optimisation.
Utilisez un pourcentage élevé pour conserver la qualité ; la compression sera alors moins importante et les fichiers
résultants plus volumineux.
A l’inverse, un faible pourcentage permet d’obtenir un fichier de taille réduite mais d’une qualité graphique inférieure.
Compression sélective de zones dans une image JPEG
Pour réduire la taille totale de l’image tout en préservant la qualité des zones les plus importantes, compressez les zones
les plus critiques avec un niveau de qualité supérieur, et les zones moins importantes, comme les arrière-plans, avec
un niveau de qualité moindre.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 252
Optimisation et exportation
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.
1 Dans la fenêtre Original, sélectionnez la zone à compresser dans le graphique à l’aide de l’un des outils de cadre de
sélection.
2 Choisissez Modification > JPEG sélective > Enregistrer la sélection en tant que masque JPEG.
3 Sélectionnez le format JPEG dans le menu contextuel Exporter un format de fichier du panneau Optimisation.
4 Cliquez sur le bouton Modifier les options de qualité sélective dans le panneau Optimisation.
5 Sélectionnez Activer la qualité sélective, puis entrez une valeur dans la zone de texte.
Une valeur faible permet de compresser davantage la zone sélectionnée que le reste de l’image, tandis qu’une valeur
élevée permet de compresser davantage le reste de l’image que cette zone.
6 (Facultatif) Modifiez la couleur de superposition de la zone JPEG sélective. Cela n’affecte pas le résultat.
7 Pour exporter tous les textes dans une qualité supérieure, quelle que soit la valeur Qualité sélective, sélectionnez
Préserver la qualité du texte.
8 Pour exporter les symboles de bouton à un niveau de qualité supérieur, sélectionnez Préserver la qualité du bouton.
Modification de la zone de compression JPEG sélective
1 Choisissez Modification > JPEG sélective > Restaurer le masque JPEG en tant que sélection.
2 Pour modifier la taille de la zone de sélection, utilisez l’outil Cadre de sélection ou tout autre outil de sélection.
3 Choisissez Modification > JPEG sélective > Enregistrer la sélection en tant que masque JPEG.
4 (Facultatif) Modifiez les paramètres Qualité sélective dans le panneau Optimisation.
Remarque : pour annuler une sélection, cliquez sur Modification > JPEG sélective > Supprimer le masque JPEG.
Atténuation ou accentuation des détails JPEG
Le lissage consiste à appliquer un flou aux bords nets, qui n’offrent pas de bonnes possibilités de compression en JPEG.
Les valeurs élevées produisent un flou plus élevé dans les fichiers JPEG exportés ou enregistré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 d’image tout en
conservant une qualité raisonnable.
Utilisez l’option Bords des JPEG plus nets pour exporter ou enregistrer des fichiers JPEG qui contiennent du texte ou
des détails fins et conserver la netteté de ces zones. Cette option augmente la taille de fichier.
Procédez de l’une des manières suivantes :
• Pour atténuer les détails, sélectionnez Lissage dans le panneau Optimisation.
• Pour accentuer les détails, cliquez sur Bords des JPEG plus nets dans le menu Options du panneau Optimisation.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 253
Optimisation et exportation
Création d’une image JPEG progressive
Comme les images PNG et GIF entrelacées, les images JPEG progressives s’affichent initialement dans une faible
résolution, puis leur qualité s’améliore au fur et à mesure de leur téléchargement.
❖ Dans le menu Options du panneau Optimisation, sélectionnez JPEG progressive.
Remarque : certaines anciennes applications d’édition d’images bitmap ne peuvent pas ouvrir les images JPEG
progressives.
Exportation depuis l’espace de travail
Lorsqu’un graphique ou un document est optimisé, vous pouvez l’exporter (ou l’enregistrer, selon le type de fichier
d’origine).
Vous pouvez exporter (ou enregistrer) un document comme une simple image au format GIF, JPEG ou autre. Vous
pouvez également exporter tout le document en tant que fichier HTML et les fichiers image associés, uniquement des
tranches sélectionnées ou une zone spécifique. En outre, vous pouvez exporter des états Fireworks et des calques dans
des fichiers d’image distincts.
L’emplacement par défaut dans lequel Fireworks exporte des documents est déterminé par les éléments suivants, dans
l’ordre :
1 Préférence d’exportation actuelle du document, définie si vous avez déjà exporté le document puis enregistré
le PNG
2 Emplacement actuel d’exportation/d’enregistrement, défini à chaque fois que vous modifiez l’emplacement par
défaut dans la boîte de dialogue Enregistrer, Enregistrer sous ou Exporter
3 Emplacement du fichier actif
4 Emplacement d’enregistrement par défaut des nouveaux documents ou des nouvelles images sur le système
d’exploitation
L’emplacement par défaut d’enregistrement par Fireworks d’un document est quant à lui déterminé par des critères
très différents. Pour plus d’informations, reportez-vous à la section « Enregistrement de fichiers Fireworks » à la
page 11.
Exportation de pages en tant que fichiers d’image
1 Choisissez Fichier > Exporter.
2 Spécifiez l’emplacement des fichiers d’exportation.
3 Procédez de l’une des manières suivantes :
• Choisissez Images uniquement dans le menu contextuel Exporter, puis activez ou désactivez la case Page
actuelle uniquement. Les pages sont exportées au format d’image défini dans le panneau Optimisation.
• Dans le menu contextuel Exporter, sélectionnez la commande Pages vers Fichiers, puis choisissez l’option
Images dans le menu contextuel Exporter en tant que. Les pages sont exportées au format d’image défini dans
le panneau Optimisation.
• Dans le menu contextuel Exporter, cliquez sur Pages vers Fichiers, puis sélectionnez PNG Fireworks dans le
menu contextuel Exporter en tant que. Chaque page est exportée sous la forme d’un fichier PNG distinct qui
garantit une compatibilité descendante avec Fireworks 8.
Remarque : Pour exporter toutes les pages dans le format choisi, sélectionnez-les toutes, puis optimisez les paramètres.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 254
Optimisation et exportation
Exportation d’une seule image
Si vous travaillez sur une image existante ouverte dans Fireworks, vous pouvez l’enregistrer au lieu de l’exporter. Pour
plus d’informations, reportez-vous à la section « Enregistrement de documents dans d’autres formats » à la page 12.
Remarque : pour exporter uniquement certaines images d’un document, vous devez d’abord découper votre document
en tranches, puis exporter uniquement les tranches souhaitées.
1 Dans le panneau Optimisation, sélectionnez un format de fichier, puis définissez les options propres à ce format.
2 Choisissez Fichier > Exporter.
3 Définissez l’emplacement vers lequel exporter le fichier d’image.
Pour les graphiques Web, le meilleur emplacement est généralement un dossier du site Web local.
4 Saisissez un nom de fichier sans extension. Une extension est ajoutée pendant l’exportation selon le type de fichier.
5 Dans le menu contextuel Exporter, sélectionnez Images uniquement.
6 Cliquez sur Enregistrer.
Exportation d’un document découpé en tranches
Par défaut, lorsque vous exportez un document Fireworks découpé en tranches, il est exporté sous la forme d’un
fichier HTML et de plusieurs images associées. Le fichier HTML exporté peut être affiché dans un navigateur Web ou
importé dans d’autres applications pour y être retouché.
Avant d’exporter le fichier, assurez-vous que le style HTML approprié est sélectionné dans la boîte de dialogue
Configuration HTML (voir la section « Définition des options d’exportation de code HTML » à la page 262).
Exportation de toutes les tranches
1 Choisissez Fichier > Exporter.
2 Accédez au dossier de destination de l’exportation sur votre disque dur.
3 Dans le menu contextuel Exporter, sélectionnez Documents HTML et Images.
4 Entrez un nom de fichier dans le champ Nom de fichier (Windows) ou Enregistrer sous (Mac OS).
5 Dans le menu contextuel HTML, sélectionnez Exporter le fichier HTML.
6 Dans le menu contextuel Tranches, choisissez Exporter les tranches.
7 (Facultatif) Sélectionnez Placer les images dans des sous-dossiers.
8 Cliquez sur Enregistrer.
Exportation de tranches sélectionnées
1 Tout en maintenant la touche Maj enfoncée, cliquez sur plusieurs tranches pour les sélectionner.
2 Choisissez Fichier > Exporter.
3 Sélectionnez un emplacement de destination des fichiers exportés (un dossier de votre site Web local, par exemple).
4 Dans le menu contextuel Exporter, sélectionnez Documents HTML et Images.
5 Saisissez un nom de fichier sans extension. Une extension est ajoutée pendant l’exportation selon le type de fichier.
Si vous exportez plusieurs tranches, Fireworks utilise le nom entré comme étant le nom racine de tous les
graphiques exportés, à l’exception des graphiques auxquels vous avez affecté des noms personnalisés dans le
panneau Calques ou dans l’inspecteur des propriétés.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 255
Optimisation et exportation
6 Dans le menu contextuel Tranches, choisissez Exporter les tranches.
7 Pour exporter uniquement les tranches sélectionnées avant l’exportation, choisissez la commande Tranches
sélectionnées uniquement, puis vérifiez que l’option Inclure les zones sans tranches est désélectionnée.
8 Cliquez sur Enregistrer.
Mise à jour d’une tranche
Si vous avez déjà exporté un document découpé en tranches et que vous avez par la suite apporté des modifications au
document original dans Fireworks, vous pouvez uniquement mettre à jour l’image ou la tranche modifiée. Pour
trouver facilement la tranche de remplacement, personnalisez le nom des tranches.
1 Masquez la tranche pour modifier la zone qu’elle recouvre.
2 Réaffichez la tranche.
3 Cliquez avec le bouton droit de la souris (Windows) ou tout en maintenant la touche Ctrl enfoncée (Mac OS) sur
la tranche, puis sélectionnez Exporter la tranche sélectionnée.
4 Sélectionnez le même dossier que celui de la tranche d’origine en utilisant le même nom de fichier, puis cliquez sur
Enregistrer.
5 Cliquez sur OK si un message vous demande de remplacer le fichier existant.
Remarque : dans Fireworks, évitez de redimensionner la tranche au-delà de sa taille 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 tranche.
Exportation d’une animation
Lorsque vous avez créé et optimisé une animation, elle est prête à être exportée. Vous pouvez exporter une animation
sous les types de fichier suivants :
GIF animé Ce format donne les meilleurs résultats avec les graphiques de type cliparts et dessins animés.
SWF Flash ou PNG Fireworks (aucune exportation nécessaire) Exportez une animation en tant que fichier SWF à
importer dans Flash. Vous pouvez passer l’étape d’exportation en important directement dans Flash un fichier source
PNG Fireworks. Cette méthode plus directe vous permet d’importer tous les calques et tous les états de votre
animation et de les peaufiner dans Flash (voir la section « Utilisation de Flash » à la page 276).
Fichiers multiples Il est utile d’exporter des états ou calques d’animation en tant que fichiers multiples lorsque
différents calques comportent de nombreux symboles pour un même objet. Par exemple, vous pouvez exporter une
bannière publicitaire sous la forme de plusieurs fichiers si chaque lettre du nom d’une société est animée dans un
graphique (voir la section « Exportation d’états ou de calques en tant que fichiers distincts » à la page 256).
Si votre document comporte plusieurs animations, vous pouvez insérer des tranches pour exporter chaque animation
en utilisant différents paramètres d’animation, tels que la lecture en boucle et la cadence des états.
Exportation d’un fichier GIF animé
1 Choisissez la commande Sélection > Désélectionner pour désélectionner tous les objets et tranches, puis, dans le
panneau Optimisation, sélectionnez le format de fichier GIF animé.
2 Choisissez Fichier > Exporter.
3 Saisissez le nom du fichier, puis sélectionnez le dossier de destination.
4 Cliquez sur Enregistrer.
UTILISATION DE FIREWORKS CS5 256
Dernière mise à jour le 29/4/2010
Optimisation et exportation
Exportation de plusieurs fichiers GIF animés avec différents paramètres d’animation
1 Tout en maintenant la touche Maj enfoncée, cliquez sur les animations pour toutes les sélectionner.
2 Choisissez la commande Edition > Insérer > Tranche rectangulaire ou Tranche polygonale.
3 Cliquez sur Multiple dans la zone de message.
4 Sélectionnez chaque tranche individuellement, puis dans le panneau Etats, définissez les différents paramètres
d’animation de chaque tranche.
5 Sélectionnez toutes les tranches à animer, puis choisissez GIF animé comme format de fichier dans le
panneau Optimisation.
6 Cliquez avec le bouton droit de la souris (Windows) ou tout en maintenant la touche Ctrl enfoncée (Mac OS) sur
chaque tranche à exporter individuellement, puis sélectionnez Exporter la tranche sélectionnée. Dans la boîte de
dialogue Exporter, entrez un nom pour chaque fichier, sélectionnez une destination, puis cliquez sur Enregistrer.
Exportation d’états ou de calques en tant que fichiers distincts
Fireworks permet d’exporter chaque calque ou état d’un document sous la forme d’un fichier d’image distinct en
tenant compte des paramètres d’optimisation spécifiés dans le panneau Optimisation. Le nom du calque ou de l’état
détermine le nom du fichier exporté correspondant. Cette méthode d’exportation est souvent utilisée pour exporter
des animations.
1 Choisissez Fichier > Exporter.
2 Entrez un nom de fichier, puis sélectionnez un dossier de destination.
3 Dans le menu contextuel Exporter, sélectionnez une option :
Etats vers fichiers Exporte les états comme des fichiers distincts.
Calques vers fichiers Exporte les calques comme des fichiers distincts.
Remarque : cette dernière option exporte l’ensemble des calques de l’état actif.
4 Pour recadrer automatiquement chaque image exportée de manière à n’inclure que les objets sur chaque état,
sélectionnez l’option Rogner les images. Sinon, pour inclure la zone de travail entière (y compris les zones vierges
au-delà des objets), désactivez cette option.
5 Cliquez sur Enregistrer.
Exportation d’une zone de document
1 Dans le panneau Outils, cliquez sur l’outil Zone d’exportation
.
2 Faites glisser le pointeur de l’outil pour délimiter la partie du document à exporter.
Remarque : vous pouvez ajuster la position du cadre de sélection à mesure que vous le délimitez. Tout en maintenant
enfoncés le bouton de la souris et la barre d’espace, faites glisser le cadre de sélection vers l’emplacement approprié sur
la zone de travail. Relâchez la barre d’espace 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 proportionnellement le cadre de sélection de la zone d’exportation, faites glisser une
poignée tout en maintenant la touche Maj enfoncée.
• Pour redimensionner le cadre de sélection en partant de son centre, faites glisser une poignée tout en maintenant
la touche Alt (Windows) ou Option (Mac OS) enfoncée.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 257
Optimisation et exportation
• Pour redimensionner le cadre de sélection en partant de son centre en conservant ses proportions, faites glisser
une poignée tout en maintenant les touches Alt+Maj (Windows) ou Option+Maj (Mac OS) enfoncées.
4 Cliquez deux fois à l’intérieur du cadre de sélection de la zone d’exportation pour afficher l’aperçu de l’image.
5 Définissez les paramètres dans l’aperçu de l’image, puis cliquez sur Exporter.
6 Entrez un nom de fichier, puis sélectionnez un dossier de destination.
7 Dans le menu contextuel Exporter, cliquez sur Images uniquement.
8 Cliquez sur Enregistrer.
Remarque : pour annuler l’exportation, cliquez deux fois à l’extérieur du cadre de sélection de la zone d’exportation,
appuyez sur la touche Echap ou sélectionnez un autre outil.
Exportation de code HTML
Sauf indication contraire, lorsque vous exportez un document Fireworks découpé en tranches, vous exportez un
fichier HTML accompagné de ses images. Utilisez la boîte de dialogue Configuration HTML pour définir les
paramètres d’exportation de code HTML Fireworks.
Fireworks génère un véritable fichier HTML qui peut être lu dans la plupart des navigateurs Web et éditeurs HTML.
Par défaut, l’exportation spécifie le codage UTF-8.
Il existe plusieurs façons d’exporter un fichier HTML Fireworks :
• Exporter un fichier HTML que vous pouvez ouvrir plus tard pour le modifier dans un éditeur HTML
• Exporter chaque page d’un fichier Fireworks dans un fichier HTML distinct
• Copier le code HTML dans le Presse-papiers de Fireworks, puis coller directement ce code dans un document
HTML existant
• Exporter un fichier HTML, l’ouvrir dans un éditeur HTML, copier manuellement des sections de code depuis le
fichier, puis coller ce code dans un autre document HTML
• Exporter du code HTML en calques CSS (Cascading Style Sheet) et XHTML
• Utiliser la commande Mettre à jour le code HTML pour modifier un fichier HTML créé précédemment
Fireworks vous permet d’exporter du code HTML aux formats Générique, Dreamweaver, Microsoft® FrontPage® et
Adobe GoLive®.
Remarque : Adobe Dreamweaver est étroitement intégré à Fireworks. Fireworks gère les exportations de code HTML
vers Dreamweaver différemment des exportations vers d’autres éditeurs HTML. Si vous exportez du code HTML
Fireworks vers Dreamweaver, reportez-vous à la section « Utilisation de Dreamweaver » à la page 266.
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. Cette méthode fractionne le flux de production en segments, ce
qui permet à une personne d’exécuter une tâche donnée dans une application, puis à une autre de prendre la suite
ultérieurement dans une autre application.
Intégration de commentaires dans du code HTML exporté
Les commentaires de code HTML Fireworks sont compris entre les séquences de caractères <!-- et -->. Tout ce qui
se trouve entre ces deux marqueurs n’est pas interprété comme code HTML ou JavaScript.
❖ Avant l’exportation, ouvrez la boîte de dialogue Configuration HTML, puis sélectionnez l’option Inclure les
commentaires HTML sous l’onglet Général.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 258
Optimisation et exportation
Résultats de l’exportation
Lorsque vous exportez ou copiez du code HTML depuis Fireworks, les éléments suivants sont générés :
• 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 de la zone de travail pour l’arrière-plan de la page Web.
• Un ou plusieurs fichiers d’image, en fonction du nombre de tranches figurant dans votre document et du nombre
d’états de boutons.
• Un fichier de séparateurs appelé spacer.gif, si nécessaire. Le fichier spacer.gif est un fichier GIF transparent de
1 pixel sur 1 pixel, que Fireworks utilise pour corriger les problèmes d’espacement lorsque les images découpées en
tranches sont rassemblées dans une table HTML. La création de ce fichier de séparateurs est facultative.
• Si vous exportez des menus contextuels, les fichiers suivants sont exportés : un fichier mm_css_menu.js et un
fichier .css contenant le code du menu contextuel CSS. Si les menus contextuels contiennent des sous-menus,
l’application exporte également un fichier arrows.gif.
• Lorsque vous exportez ou copiez du code HTML dans Dreamweaver, des fichiers de commentaires sont créés pour
faciliter l’intégration entre Fireworks et Dreamweaver. Ces fichiers portent l’extension .mno.
Exportation de code HTML Fireworks
1 Choisissez Fichier > Exporter.
2 Accédez au dossier de destination de l’exportation sur votre disque dur.
3 Dans le menu contextuel Exporter, sélectionnez Documents HTML et Images.
4 Dans la boîte de dialogue Configuration HTML, cliquez sur le bouton Options, puis, dans le menu contextuel
Style HTML de l’onglet Général, sélectionnez un éditeur HTML. Si votre éditeur HTML n’est pas répertorié,
sélectionnez Générique.
Remarque : il est important de sélectionner votre éditeur HTML comme style HTML de sorte que les
éléments interactifs, notamment les boutons et les survols, fonctionnent correctement après leur importation dans
votre éditeur HTML.
5 Cliquez sur OK.
6 Dans le menu contextuel HTML, sélectionnez Exporter le fichier HTML.
7 Si votre document contient des tranches, dans le menu contextuel Tranches, cliquez sur Exporter les tranches.
8 Pour stocker des images dans un dossier séparé, sélectionnez la commande Importer les images dans des sous-
dossiers. Vous pouvez sélectionner un dossier spécifique ou le dossier Images par défaut de Fireworks.
9 Si vous exportez un document Fireworks de plusieurs pages, désactivez la case Page active uniquement de manière
à exporter toutes les pages dans des documents HTML distincts.
10 Cliquez sur Enregistrer.
Une fois exportés, les fichiers Fireworks s’affichent sur votre disque dur. Des images et un fichier HTML sont
générés à l’emplacement spécifié dans la boîte de dialogue Exporter.
Copie de code HTML dans le Presse-papiers
Il existe deux manières de copier du code HTML dans le Presse-papiers de Fireworks. Vous pouvez utiliser la
commande Copier le code HTML ou, dans la boîte de dialogue Exporter, sélectionner l’option Copier dans le Pressepapiers. Vous pouvez ensuite coller ce code HTML dans un document ouvert dans votre éditeur HTML préféré.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 259
Optimisation et exportation
Pour décider de la méthode à utiliser pour intégrer du code HTML Fireworks dans d’autres applications, prenez en
compte les inconvénients suivants, consécutifs à la copie de code HTML dans le Presse-papiers :
• Vous ne pouvez pas enregistrer d’images dans un sous-dossier. Elles doivent se trouver dans le même dossier que
le fichier HTML dans lequel vous collez le code HTML copié, sauf si vous copiez le code HTML dans Dreamweaver.
• Les liens ou chemins utilisés dans les menus contextuels Fireworks sont mappés au disque dur, sauf si vous copiez
le code HTML dans Dreamweaver.
• Si vous utilisez un éditeur HTML autre que Dreamweaver ou Microsoft FrontPage, le code JavaScript associé aux
boutons, comportements et images survolées 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 Copier dans
le Presse-papiers.
Remarque : avant de copier le code HTML, assurez-vous que vous avez sélectionné le style HTML approprié et
l’option Inclure les commentaires HTML dans l’onglet Général de la boîte de dialogue Configuration HTML.
Copie de code HTML Fireworks à l’aide de l’option Copier le code HTML
1 Choisissez Edition > Copier le code HTML.
2 Suivez les étapes proposées par l’assistant. Lorsque vous y êtes invité, indiquez un dossier de destination des images
exportées. Ce dossier doit être celui dans lequel se trouve votre fichier HTML.
Remarque : si vous comptez coller le code HTML dans Dreamweaver, peu importe le dossier dans lequel vous exportez
les images, pourvu qu’elles se trouvent sur le même site Dreamweaver que le fichier HTML dans lequel vous allez coller
le code.
Copie de code HTML Fireworks à l’aide de la boîte de dialogue Exporter
1 Choisissez Fichier > Exporter.
2 Dans la boîte de dialogue Exporter, spécifiez un dossier de destination pour les images exportées. Ce dossier doit
être celui dans lequel se trouve votre fichier HTML.
Remarque : si vous comptez coller le code HTML dans Dreamweaver, peu importe le dossier dans lequel vous exportez
les images, pourvu qu’elles se trouvent sur le même site Dreamweaver que le fichier HTML dans lequel vous allez coller
le code.
3 Dans le menu contextuel Exporter, sélectionnez Documents HTML et Images.
4 Dans le menu contextuel HTML, sélectionnez Copier dans le Presse-papiers.
5 Si votre document contient des tranches, dans le menu contextuel Tranches, cliquez sur Exporter les tranches.
6 Cliquez sur le bouton Options, sélectionnez votre éditeur HTML dans la boîte de dialogue Configuration HTML,
puis cliquez sur OK.
7 Cliquez sur Enregistrer.
Collage de code HTML copié depuis Fireworks dans un document HTML
1 Dans votre éditeur HTML, ouvrez un document HTML existant ou créez-en un nouveau. Enregistrez le document
dans le même dossier que celui des images exportées.
Remarque : si vous utilisez 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 résout les chemins vers les images
associées.
2 Affichez le code HTML, puis placez le point d’insertion entre les balises <BODY>.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 260
Optimisation et exportation
Remarque : le code HTML copié à partir de Fireworks ne contient pas les balises d’ouverture et de fermeture <HTML>
et <BODY>.
3 Collez le code HTML.
Si possible, lorsque vous effectuez une copie dans le Presse-papiers, exportez les images à leur emplacement sur le
site Web. Comme Fireworks utilise des adresses URL relatives aux documents, les liens URL seront rompus si le
code HTML ou des images sont déplacés.
Copie de code depuis un fichier Fireworks exporté et collage dans un autre document HTML
1 Dans l’éditeur HTML, ouvrez le fichier HTML Fireworks que vous avez exporté.
2 Sélectionnez le code souhaité, puis copiez-le dans le Presse-papiers.
3 Ouvrez un document HTML existant ou créez-en un nouveau.
4 Collez le code dans le nouveau fichier HTML. Il n’est pas nécessaire de copier les balises <HTML> et <BODY>, qui
doivent normalement 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é.
5 Si votre document Fireworks contient des éléments interactifs, copiez le code JavaScript.
Le code JavaScript est entouré des balises <SCRIPT> et situé dans la section <HEAD> du document. Copiez et collez
l’intégralité de la section <SCRIPT>, sauf si le document de destination contient déjà une section <SCRIPT>. Dans
ce cas, il vous suffit de copier le contenu de la section <SCRIPT> dans la section <SCRIPT> existante en veillant à ne
pas écraser les données de cette dernière. Vérifiez également qu’aucune fonction JavaScript n’est dupliquée dans la
section <SCRIPT> une fois que vous avez copié le code.
Mise à jour de code HTML exporté
La mise à jour vous permet de modifier un document HTML Fireworks déjà exporté, en particulier si vous souhaitez
actualiser uniquement 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 Dreamweaver et les
autres documents HTML. Pour plus d’informations, reportez-vous à la section « Utilisation de Dreamweaver » à la
page 266.
Lorsque vous effectuez une mise à jour, vous pouvez choisir de remplacer uniquement les images modifiées ou
l’intégralité du code et des images. Si vous choisissez de remplacer uniquement les images modifiées, toutes les
modifications apportées au fichier HTML en dehors de Fireworks seront conservées.
Remarque : si vous souhaitez apporter d’importantes modifications à la présentation du document, effectuez-les dans
Fireworks, puis réexportez le fichier HTML.
1 Sélectionnez la commande Fichier > Mettre à jour le code HTML.
2 Sélectionnez le fichier à mettre à jour.
3 Cliquez sur le bouton Ouvrir.
4 Procédez de l’une des manières suivantes :
• Si aucun code HTML généré par Fireworks n’est trouvé, cliquez sur OK pour insérer le nouveau code HTML à
la fin du document.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 261
Optimisation et exportation
• Par contre, si un code HTML généré par Fireworks est trouvé, sélectionnez l’une des options suivantes, puis
cliquez sur OK :
Remplacer les images et leur code HTML Remplace le code HTML Fireworks précédent.
Mettre à jour les images uniquement Ecrase uniquement les images.
5 Lorsque la boîte de dialogue Sélectionnez le dossier Images s’affiche, sélectionnez un dossier, puis cliquez
sur Ouvrir.
Exportation de calques CSS
Les calques CSS peuvent se chevaucher et être empilés les uns sur les autres. Sous Fireworks, les sorties en code HTML
normal ne se chevauchent pas.
1 Choisissez Fichier > Exporter.
2 Entrez un nom de fichier, puis sélectionnez un dossier de destination.
3 Dans le menu contextuel Exporter, sélectionnez CSS et Images.
• Pour exporter l’état actif uniquement, sélectionnez Etat actif uniquement.
• Pour exporter la page active uniquement, sélectionnez Page active uniquement.
• Pour choisir le dossier devant recevoir les images, sélectionnez Placer les images dans des sous-dossiers.
4 Pour définir les propriétés de la page HTML, cliquez sur Options.
5 Pour définir une image d’arrière-plan et la faire apparaître en mosaïque, cliquez sur Parcourir :
• Pour afficher l’image une seule fois, sélectionnez Pas de répétition.
• Pour répéter, ou mettre en mosaïque, l’image à l’horizontale et la verticale, sélectionnez Répétition.
• Sélectionnez Répéter-x pour former une mosaïque horizontale.
• Pour former une mosaïque verticale, sélectionnez Répéter-y.
6 Dans le navigateur, sélectionnez un alignement de page à gauche, au centre ou à droite.
7 Cliquez sur le bouton OK, puis sur Enregistrer.
Exportation de code XHTML
Le langage XHTML est une combinaison du langage HTML, standard actuel pour la mise en forme et l’affichage de
pages Web, et du langage XML (eXtensible Markup Language). Le code XHTML garantit une compatibilité
descendante, ce qui signifie qu’il peut être affiché dans la plupart des navigateurs Web actuels et lu par tous les
périphériques affichant du contenu XML, tels que les assistants numériques personnels, les téléphones portables et
autres périphériques mobiles.
Fireworks peut également importer des fichiers XHTML (voir la section « Création de fichiers PNG Fireworks à partir
de fichiers HTML » à la page 8).
Pour plus d’informations sur le langage XHTML, consultez les spécifications XHTML du W3C (Web World Wide
Web Consortium) sur le site www.w3.org.
1 Choisissez Fichier > Configuration HTML, sélectionnez un style XHTML dans le menu contextuel Style HTML de
l’onglet Général, puis cliquez sur OK.
2 Exportez le document en utilisant l’une des méthodes d’exportation ou de copie de code HTML disponibles (voir
la section « Exportation de code HTML » à la page 257).
Remarque : Fireworks utilise le codage UTF-8 lorsque vous exportez un document vers XHTML.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 262
Optimisation et exportation
Exportation de fichiers avec ou sans codage UTF-8
Le procédé de codage de texte UTF-8 (Universal Character Set Transformation Format-8) permet aux
navigateurs Web d’afficher différents jeux de caractères nationaux (texte chinois ou anglais, par exemple) sur une
même page HTML. Le codage UTF-8 est activé par défaut.
Fireworks peut également importer des documents utilisant le codage UTF-8 (voir la section « Création de fichiers
PNG Fireworks à partir de fichiers HTML » à la page 8).
Exportation de documents sans codage UTF-8
1 Choisissez Fichier > Configuration HTML.
2 Sous l’onglet Propre au document, désactivez la case Utiliser le codage UTF-8, puis cliquez sur OK.
3 Exportez le document en utilisant l’une des méthodes d’exportation ou de copie de document HTML disponibles.
Définition des options d’exportation de code HTML
La boîte de dialogue Configuration HTML permet de définir le mode d’exportation du code HTML à partir de
Fireworks. Les modifications effectuées dans l’onglet propre au document agissent uniquement sur le document actif.
Les paramètres Général et Table sont des préférences globales qui affectent tous les nouveaux documents.
1 Procédez de l’une des manières suivantes :
• Choisissez Fichier > Configuration HTML.
• Cliquez sur le bouton Options de la boîte de dialogue Exporter.
2 Dans l’onglet Général, sélectionnez les options souhaitées.
Style HTML Sélectionnez le style du code HTML exporté.
Le code HTML Générique est compatible avec tous les éditeurs HTML. Cependant, si le document contient des
comportements ou des contenus interactifs, sélectionnez un éditeur spécifique s’il est répertorié dans la liste.
Pour exporter un document en appliquant le standard XHTML, sélectionnez le style XHTML approprié dans le
menu contextuel.
Extension Dans le menu contextuel , sélectionnez un nom d’extension de fichier ou entrez l’extension de votre
choix.
Inclure les commentaires HTML Sélectionnez cette option pour inclure des commentaires sur les endroits où
copier et coller dans le code HTML. Elle est recommandée si le document contient des éléments interactifs tels que
des boutons, des comportements ou des images survolées.
Nom de fichier en minuscules Sélectionnez cette option pour vous assurer que les noms du fichier HTML et des
fichiers d’image associés sont composés en minuscules lors de l’exportation.
Remarque : cette option ne modifie pas la casse de l’extension du fichier HTML, si une extension en majuscules a été
choisie dans le menu contextuel Extension.
Utiliser une feuille de style CSS pour les menus contextuels Sélectionnez cette option pour utiliser une feuille de
style CSS plutôt que du code JavaScript pour le menu contextuel. Vous pouvez indexer les menus à l’aide de
Dreamweaver, ainsi que mettre à jour les liens dans le code.
Ecrire les feuilles de style CSS dans un fichier externe Sélectionnez cette option pour que le code CSS soit écrit
dans un fichier .css externe exporté dans le même emplacement que le fichier HTML. Le nom du fichier .css
correspond au nom du fichier HTML (à l’exception de l’extension du fichier). Activez cette option pour exporter
également un fichier nommé mm_css_menu.js dans le même emplacement que le fichier HTML.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 263
Optimisation et exportation
Remarque : cette option est disponible uniquement si vous avez sélectionné Utiliser une feuille de style CSS pour les
menus contextuels.
Créateur de fichiers (Mac OS) Sélectionnez une application associée dans le menu contextuel. Lorsque vous cliquez
deux fois sur le fichier HTML exporté sur votre disque dur, il s’ouvre automatiquement dans l’application spécifiée.
3 Sous l’onglet Table, sélectionnez les paramètres requis pour vos tables HTML. Pour plus d’informations, reportez-
vous à la section « Définition du mode d’exportation des tables HTML » à la page 187.
4 Sous l’onglet Propre au document, sélectionnez l’une des options suivantes :
Noms des fichiers de tranche Dans les menus contextuels correspondants, sélectionnez une formule permettant de
nommer automatiquement les tranches. Vous pouvez utiliser les options par défaut ou sélectionner vos propres
options.
Important : si vous sélectionnez Aucune pour l’un des trois premiers menus, Fireworks exporte des fichiers de tranche
qui s’écraseront mutuellement. Vous obtiendrez ainsi un seul graphique exporté et un tableau affichant ce graphique
dans chaque cellule.
Balise ALT par défaut Saisissez le texte qui doit apparaître à la place de toutes les images pendant leur
téléchargement depuis le Web et à la place de toute image ne pouvant pas être téléchargée. Dans certains
navigateurs, ce texte peut également s’afficher sous forme d’info-bulle lorsque le pointeur survole l’image. Cette
fonction constitue également une aide pour les utilisateurs du Web malvoyants.
Exporter plusieurs fichiers HTML de la barre de navigation (à utiliser sans jeu d’images) Sélectionnez cette option
pour l’exportation d’une barre de navigation qui relie plusieurs pages entre elles. Fireworks exporte des pages
supplémentaires pour chaque bouton de la barre de navigation.
Inclure les zones sans tranches Sélectionnez cette option pour inclure les parties de la zone de travail qui ne sont
pas recouvertes par des tranches.
Utiliser le codage UTF-8 Cette option activée par défaut vous permet d’afficher des caractères provenant de
plusieurs jeux de caractères dans le document exporté. Pour désactiver cette option, décochez la case.
5 Pour enregistrer ces paramètres comme paramètres par défaut globaux, cliquez sur Paramètres par défaut.
Exportation de fichiers Adobe PDF
Lorsque vous voulez imprimer une création Fireworks ou l’envoyer en révision, exportez-la au format de fichier
Adobe PDF. Les réviseurs peuvent ajouter des commentaires, répondre à d’autres commentaires dans Adobe Reader®
ou Acrobat®. Pour plus d’informations sur la mise en place d’un processus de révision au format PDF, consultez
l’aide Acrobat.
Les fichiers PDF exportés conservent toutes les pages et leurs liens hypertextes. Les réviseurs peuvent donc naviguer
comme ils le feraient sur le Web. Contrairement aux prototypes HTML, les documents Adobe PDF proposent
cependant des paramètres de sécurité pour empêcher les réviseurs de modifier ou de copier vos créations.
1 Choisissez la commande Fichier > Exporter.
2 Dans le menu contextuel Exporter, choisissez Adobe PDF.
3 Choisissez les pages à exporter et sélectionnez Afficher le PDF après exportation pour ouvrir automatiquement le
PDF dans Adobe Reader ou Acrobat.
4 Pour personnaliser le document PDF, cliquez sur Options, puis définissez les paramètres suivants :
Compatibilité Détermine les applications Adobe PDF pouvant ouvrir le fichier exporté.
Compression Détermine le type de compression des images utilisé pour réduire la taille de fichier. En général, les
compressions de type JPEG et JPEG2000 sont préférables pour les images telles que des photographies comportant
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 264
Optimisation et exportation
des transitions progressives d’une couleur à l’autre. La compression ZIP est idéale pour les illustrations qui
comprennent des portions étendues de couleurs en aplat (pleines et unies).
Qualité Pour les compressions de type JPEG et JPEG2000, propose des paramètres de qualité d’image. Si vous
sélectionnez Qualité supérieure, vous obtenez un fichier volumineux dont la qualité d’image est bonne.
Convertir en niveaux de gris Convertit toutes les images en niveaux de gris tout en réduisant la taille du fichier.
Activer la sélection de texte Permet aux réviseurs de copier le texte à partir du fichier exporté. Désélectionnez cette
option pour réduire la taille du fichier.
Valeur de fond perdu Détermine la largeur en pixels de la bordure blanche qui délimite l’image sur chaque page.
Une valeur égale à 20, par exemple, permet d’entourer chaque image d’une bordure de 20 pixels.
Utiliser un mot de passe pour ouvrir le document Requiert un mot de passe pour ouvrir le fichier exporté.
Utiliser un mot de passe pour restreindre les tâches Requiert un mot de passe pour effectuer les fonctions
suivantes : impression, modification, copie et insertion de commentaires.
5 Cliquez sur OK pour fermer la boîte de dialogue Options.
6 Indiquez un nom de fichier et un emplacement, puis cliquez sur Enregistrer.
Remarque : si les pages de votre document Fireworks présentent des zones de travail transparentes, les objets auxquels
des transparences ont été appliquées perdent ces caractéristiques lorsque vous exportez le document au format PDF.
Pour éviter cela, définissez un arrière-plan non transparent pour la zone de travail avant l’exportation au
format PDF.
Affichage des fichiers PDF (recommandé)
Lorsque vous consultez les fichiers PDF exportés dans Adobe Acrobat ou Adobe Reader, appliquez les paramètres
suivants :
1 Dans Adobe Acrobat ou Adobe Reader sélectionnez Edition > Préférences.
2 Sélectionnez Affichage de page dans le volet gauche.
3 Définissez Résolution personnalisée sur 72 pixels par pouce.
4 Réglez la valeur de Zoom sur 100 %.
Exportation de fichiers FXG
Le format de fichier FXG est pris en charge par Flash Catalyst, Fireworks, Illustrator et Photoshop. Lorsque vous
exportez un fichier contenant des images vectorielles et bitmap au format FXG, un dossier distinct portant le nom
<nom_fichier.assets> est créé. Ce dossier contient les images bitmap associées au fichier.
L’importation échoue si ces fichiers associés sont supprimés, en tout ou en partie, du dossier.
Remarque : Les éléments, filtres, modes de fusion, dégradés et masques qui ne sont pas associés à une balise de mappage
sont exportés en tant que graphiques bitmap.
1 Sélectionnez Fichier > Exporter et accédez à l’emplacement auquel enregistrer les fichiers.
2 Attribuez un nom au fichier FXG.
3 Dans la boîte de dialogue Exporter, sélectionnez FXG et images dans le menu Exporter.
4 Cliquez sur Enregistrer.
Remarque : Les objets qui s'étendent en dehors de la zone de travail de Fireworks s'affichent complètement lorsque le
fichier FXG exporté est ouvert dans Flash Catalyst.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 265
Optimisation et exportation
Envoi d’un document Fireworks comme pièce jointe
d’un message électronique
Vous pouvez envoyer un fichier au format PNG Fireworks, JPEG compressé ou autre en utilisant les paramètres
d’optimisation disponibles dans le panneau Optimisation.
1 Choisissez Fichier > Joindre au message électronique.
2 Sélectionnez l’une des options suivantes :
PNG Fireworks Joint le document PNG actif à un nouveau message électronique.
JPG compressé Joint le document actif à un nouveau message électronique en lui appliquant le paramètre
d’optimisation JPEG – Qualité supérieure.
Utiliser les paramètres d’exportation Joint le document actif à un message électronique en lui appliquant les
paramètres définis dans le panneau Optimisation.
Remarque : Mozilla, Netscape 6 et Nisus Emailer ne sont pas pris en charge par le système Macintosh.
Dernière mise à jour le 29/4/2010
Chapitre 18 : Utilisation de Fireworks avec
d’autres applications
Qu’il s’agisse de créer un contenu Web ou multimédia, Adobe® Fireworks® est un élément essentiel de la palette d’outils
du concepteur. Fireworks fonctionne parfaitement avec d’autres applications et offre une multitude de fonctions
d’intégration qui rationalisent le processus de conception.
Fireworks s’intègre facilement et efficacement à d’autres produits Adobe comme Adobe Photoshop® et
Adobe GoLive®. Par exemple, vous pouvez importer et exporter très simplement des graphiques Photoshop en tant que
fichiers modifiables ou créer et modifier du code HTML en utilisant Fireworks et GoLive.
Pour plus d’informations, voir le didacticiel de Dan Carr, http://www.adobe.com/go/learn_fw_interactivecontent_fr
dans le Centre des développeurs.
Utilisation de Dreamweaver
Adobe Dreamweaver® et Fireworks reconnaissent et partagent un grand nombre de modifications possibles dans un
même fichier, y compris la modification des liens, des images interactives (cartes-images) et des tranches de table. Par
ailleurs, ces deux applications fonctionnent avec un flux de production rationalisé pour l’édition, l’optimisation et
l’insertion de fichiers graphiques Web dans des pages HTML.
Insertion d’images Fireworks dans des fichiers Dreamweaver
Lorsque vous insérez les fichiers JPEG de Fireworks dans Dreamweaver, la qualité du fichier est calculée de façon
automatique. La valeur peut être de 79 pour certains fichiers.
Remarque : avant d’utiliser l’une de ces procédures, assurez-vous que Dreamweaver est sélectionné comme type HTML
dans la boîte de dialogue Configuration HTML.
Insertion d’images Fireworks dans Dreamweaver à l’aide du panneau Fichiers
1 Exportez votre image depuis Fireworks vers le dossier du site local défini dans Dreamweaver.
2 Ouvrez le document Dreamweaver, et assurez-vous qu’il est en mode Création.
3 Faites glisser l’image du panneau Fichiers vers le document Dreamweaver.
Insertion d’images Fireworks dans Dreamweaver à l’aide du menu Insertion
1 Placez le point d’insertion à l’endroit où vous voulez insérer l’image dans la fenêtre de document de Dreamweaver.
2 Procédez de l’une des manières suivantes :
• Choisissez Insertion > Image.
• Cliquez sur le bouton Images: Image dans la catégorie Commun de la barre d’insertion.
3 Accédez à l’image exportée depuis Fireworks, puis cliquez sur OK.
266
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 267
Utilisation de Fireworks avec d’autres applications
Création de fichiers Fireworks à partir d’espaces réservés Dreamweaver
Les espaces réservés aux images vous permettent de tester différentes mises en page Web avant de créer l’illustration
définitive destinée à votre page. Utilisez-les pour spécifier la taille et la position des images Fireworks que vous aurez
à placer dans Dreamweaver.
Lorsque vous créez une image Fireworks à partir d’un espace réservé pour l’image Dreamweaver, un document
Fireworks est créé avec une zone de travail ayant les dimensions de l’espace réservé sélectionné.
Remarque : tous les comportements appliqués dans Fireworks sont conservés lors de l’exportation vers Dreamweaver. De
même, la plupart des comportements Dreamweaver appliqués aux espaces réservés pour les images sont également
conservés lorsque vous les lancez et les modifiez dans Fireworks. Il existe cependant une exception : les survols séparés
appliqués aux espaces réservés pour les 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 l’espace réservé pour l’image initialement sélectionné.
1 Dans Dreamweaver, enregistrez le document HTML souhaité dans un emplacement du dossier de site
Dreamweaver.
2 Placez le point d’insertion à l’emplacement de votre choix dans le document, puis procédez de l’une des manières
suivantes :
• Choisissez Insertion > Objets image > Espace réservé pour l’image.
• Cliquez sur le menu contextuel Images : Image dans la catégorie Commun de la barre Insérer, puis sélectionnez
Espace réservé pour l’image.
3 Entrez le nom, les dimensions, la couleur et le texte secondaire de l’espace réservé pour l’image.
Un espace réservé pour l’image est inséré dans le document Dreamweaver.
4 Procédez de l’une des manières suivantes :
• Sélectionnez l’espace réservé pour l’image, puis cliquez sur Créer dans l’inspecteur des propriétés.
• Tout en maintenant la touche Ctrl (Windows) ou Cmde (Mac OS) enfoncée, cliquez deux fois sur l’espace
réservé pour l’image.
• Cliquez avec le bouton droit de la souris (Windows) ou tout en maintenant la touche Ctrl enfoncée (Mac OS),
puis cliquez sur Création d’image dans Fireworks.
Fireworks s’ouvre avec un document vide exactement de la même taille que l’espace réservé pour l’image. La
partie supérieure de la fenêtre Document indique que vous modifiez une image transférée depuis Dreamweaver.
5 Créez une image dans Fireworks, puis cliquez sur Terminé.
6 Spécifiez un nom et un emplacement pour le fichier PNG source.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 268
Utilisation de Fireworks avec d’autres applications
7 Spécifiez un nom pour les fichiers d’image exportés.
Il s’agit des fichiers d’image qui s’affichent dans Dreamweaver.
8 Spécifiez un emplacement pour le ou les fichiers d’image exportés dans le dossier de site Dreamweaver, puis cliquez
sur Enregistrer.
Lorsque vous revenez dans Dreamweaver, l’espace réservé pour l’image initialement sélectionné est remplacé par
la nouvelle image ou le nouveau tableau Fireworks.
Insertion de code HTML Fireworks dans Dreamweaver
L’exportation de fichiers Fireworks vers Dreamweaver s’effectue en deux étapes. Dans Fireworks, exportez
directement des fichiers vers un dossier de site Dreamweaver. Cette opération génère un fichier HTML et les fichiers
d’image associés dans l’emplacement que vous définissez. Placez ensuite le code HTML dans Dreamweaver à l’aide de
la fonction Insérer du HTML Fireworks.
1 Exportez le document Fireworks HTML au format HTML.
2 Dans Dreamweaver, enregistrez votre document dans un site défini.
3 Placez le point d’insertion dans le document, à l’endroit où vous voulez insérer le code HTML.
4 Procédez de l’une des manières suivantes :
• Choisissez Insertion > Objets image > HTML Fireworks.
• Cliquez sur le menu contextuel Images : Image dans la catégorie Commun de la barre Insérer, puis sélectionnez
HTML Fireworks.
5 Dans la boîte de dialogue qui s’affiche, cliquez sur Parcourir pour sélectionner le fichier HTML Fireworks souhaité.
6 (Facultatif) Cliquez sur Supprimer fichier après insertion pour déplacer le fichier HTML vers la Corbeille
(Windows) ou le supprimer définitivement (Mac OS) une fois l’opération terminée.
Cette option n’affecte pas le fichier source PNG associé au fichier HTML.
7 Cliquez sur OK pour insérer le code HTML, avec les images, les tranches et le code JavaScript qui lui sont associés,
dans le document Dreamweaver.
Copie de code HTML Fireworks pour une utilisation dans Dreamweaver
Lorsque vous copiez du code HTML Fireworks dans le Presse-papiers, 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 relatifs au document vers ces images.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 269
Utilisation de Fireworks avec d’autres applications
Remarque : cette méthode ne fonctionne qu’avec Dreamweaver. Elle ne fonctionne pas avec les autres éditeurs HTML.
❖ Copiez le code HTML dans le Presse-papiers depuis Fireworks, puis collez-le directement dans un document
Dreamweaver.
Vous pouvez ouvrir dans Dreamweaver un fichier HTML Fireworks exporté puis copier et coller les sections
appropriées dans un autre document Dreamweaver.
Mise à jour du code HTML Fireworks exporté dans Dreamweaver
Roundtrip HTML présente de nombreux avantages si vous utilisez du code HTML exporté dans Dreamweaver (voir
la section « A propos de Roundtrip HTML » à la page 270).
1 Modifiez le document PNG dans Fireworks.
2 Sélectionnez la commande Fichier > Mettre à jour le code HTML.
3 Recherchez le fichier Dreamweaver contenant le code HTML à mettre à jour, puis cliquez sur Ouvrir.
4 Accédez au dossier de destination des fichiers d’image mis à jour, puis cliquez sur Ouvrir.
Fireworks met à jour le code HTML et JavaScript dans le document Dreamweaver. Fireworks exporte également
les images mises à jour associées au code HTML et les place dans le dossier de destination indiqué.
Remarque : si Fireworks ne trouve pas de code HTML correspondant à mettre à jour, vous pouvez 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
Un élément de bibliothèque est une portion de fichier HTML située dans un dossier intitulé Bibliothèque au sein du
dossier racine de votre site. Les éléments de bibliothèque s’affichent sous forme de catégorie dans le panneau Actifs
de Dreamweaver. Dans Dreamweaver, les éléments de bibliothèque simplifient les processus de modification et de
mise à jour des composants de site Web fréquemment utilisés. Vous pouvez faire glisser un élément de bibliothèque
(fichier portant l’extension .lbi) depuis le panneau Actifs vers n’importe quelle page de votre site Web.
Vous ne pouvez pas modifier un élément de bibliothèque directement dans le document Dreamweaver. Vous ne
pouvez modifier que l’élément de bibliothèque maître. Ensuite, 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 apportées au document de bibliothèque maître (LBI) sont
répercutées dans toutes les instances de bibliothèque de l’ensemble du site.
Remarque : les éléments de bibliothèque Dreamweaver ne prennent pas en charge les menus contextuels.
1 Choisissez Fichier > Exporter.
2 Sélectionnez Bibliothèque Dreamweaver dans le menu contextuel Exporter.
Sélectionnez ou créez un dossier intitulé Bibliothèque dans votre site Dreamweaver comme emplacement des
fichiers. Le nom respecte la casse.
Remarque : Dreamweaver ne reconnaît pas le fichier exporté comme élément de bibliothèque s’il n’est pas enregistré
dans le dossier Library.
3 Tapez un nom de fichier.
4 (Facultatif) Lorsque votre image comporte des tranches, sélectionnez les options correspondantes.
5 Sélectionnez Placer les images dans des sous-dossiers pour choisir un dossier distinct pour recevoir les images à
enregistrer.
6 Cliquez sur Enregistrer.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 270
Utilisation de Fireworks avec d’autres applications
Modification de fichiers Fireworks dans Dreamweaver
La fonction Roundtrip HTML s’intègre étroitement à Fireworks et à Dreamweaver. Elle permet d’effectuer des
modifications dans une application et de les conserver dans une autre.
A propos de Roundtrip HTML
Fireworks reconnaît et conserve 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 tranches HTML et comportements
partagés entre Fireworks et Dreamweaver). L’inspecteur des propriétés de Dreamweaver permet d’identifier les
images, les tranches de table et les tableaux provenant de Fireworks.
Fireworks prend en charge la plupart des types de modification de Dreamweaver. Cependant, les principaux
changements apportés à la structure d’un tableau dans Dreamweaver peuvent créer des différences inconciliables entre
les deux applications. Si vous modifiez radicalement la structure d’un tableau, utilisez la fonction de lancement et de
modification de Dreamweaver pour modifier le tableau dans Fireworks.
Remarque : en s’appuyant sur la technologie Fireworks, Dreamweaver offre des fonctions d’édition d’images élémentaires
permettant de retoucher les images sans avoir recours à une application de retouche d’images externe. Les fonctions de
modification d’images de Dreamweaver s’appliquent uniquement aux formats de fichier JPEG et GIF.
Modification d’une image Fireworks placée dans Dreamweaver
Remarque : avant de modifier des graphiques Fireworks dans Dreamweaver, vous devez au préalable exécuter quelques
tâches. Pour plus d’informations, reportez-vous à la section « Définition des options de lancement et de modification » à
la page 272.
1 Dans Dreamweaver, choisissez Fenêtre > Propriétés pour ouvrir l’inspecteur des propriétés.
2 Procédez de l’une des manières suivantes :
• Sélectionnez l’image souhaitée. (L’inspecteur des propriétés identifie la sélection comme étant une image
Fireworks et affiche le nom du fichier source PNG associé à cette image.) Dans l’inspecteur des propriétés,
cliquez ensuite sur Modifier.
• Tout en maintenant la touche Ctrl (Windows) ou Cmde (Mac OS) enfoncée, cliquez deux fois sur l’image à
modifier.
• Cliquez avec le bouton droit (Windows) ou en maintenant la touche Ctrl enfoncée (Mac OS) sur l’image voulue,
puis, dans le menu contextuel, cliquez sur Modifier avec Fireworks.
3 Lorsque le programme vous y invite, indiquez si vous désirez que le fichier source Fireworks de l’image placée soit
ouvert.
4 Modifiez l’image dans Fireworks.
Les modifications appliquées sont conservées dans Dreamweaver.
5 Cliquez sur Terminé pour exporter l’image avec les paramètres d’optimisation actuels, mettre à jour le fichier GIF
ou JPEG utilisé par Dreamweaver et enregistrer le fichier source PNG si un fichier source a été sélectionné.
Remarque : lorsque vous ouvrez une image depuis le panneau Site de Dreamweaver, l’éditeur par défaut
correspondant à ce type d’image ouvre le fichier. Cet éditeur est défini dans les préférences de Dreamweaver. Lorsque
les images sont ouvertes depuis cet emplacement, Fireworks n’ouvre pas le fichier PNG d’origine. Pour utiliser les
fonctions d’intégration de Fireworks, ouvrez les images dans la fenêtre Document de Dreamweaver.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 271
Utilisation de Fireworks avec d’autres applications
Modification d’un tableau Fireworks placé dans Dreamweaver
Remarque : avant de modifier des tableaux Fireworks dans Dreamweaver, vous devez au préalable exécuter quelques
tâches de lancement et de modification. Pour plus d’informations, reportez-vous à la section « Définition des options de
lancement et de modification » à la page 272.
1 Dans Dreamweaver, choisissez Fenêtre > Propriétés pour ouvrir l’inspecteur des propriétés.
2 Procédez de l’une des manières suivantes pour ouvrir le fichier PNG source dans la fenêtre de document :
• Cliquez dans le tableau, puis sur la balise TABLE dans la barre d’état afin de sélectionner l’ensemble du tableau.
(L’inspecteur des propriétés identifie la sélection comme étant un tableau Fireworks et affiche le nom du fichier
source PNG associé à ce tableau.) Dans l’inspecteur des propriétés, cliquez ensuite sur Modifier.
• Sélectionnez une image dans le tableau, puis cliquez sur Modifier dans l’inspecteur des propriétés.
• Cliquez avec le bouton droit de la souris (Windows) ou tout en maintenant la touche Ctrl enfoncée (Mac OS)
sur l’image, puis, dans le menu contextuel, cliquez sur Modifier avec Fireworks.
3 Apportez les modifications dans Fireworks.
Dreamweaver reconnaît et conserve toutes les modifications apportées au tableau dans Fireworks.
4 Une fois le tableau modifié, cliquez sur Terminé dans la fenêtre de document.
Cette opération exporte les fichiers HTML et des tranches d’images du tableau en utilisant les paramètres
d’optimisation en cours, met à jour le tableau placé dans Dreamweaver et enregistre le fichier source PNG.
Remarque : vous pouvez obtenir un message d’erreur Dreamweaver si vous imbriquez un autre tableau dans le
tableau original généré par Fireworks, puis essayez de le modifier à l’aide de Roundtrip dans Dreamweaver. Pour plus
d’informations, consultez la note technique (TechNote) 19231 sur le site Web d’Adobe.
A propos des comportements de Dreamweaver pris en charge et non pris en charge
Si un seul graphique Fireworks non découpé est inséré dans un document Dreamweaver et qu’un comportement
Dreamweaver est appliqué, une tranche se trouve sur le graphique lorsqu’il est ouvert et modifié dans Fireworks. La
tranche n’est pas visible immédiatement, car les tranches sont désactivées automatiquement lorsque vous ouvrez et
modifiez un graphique unique non découpé auquel vous appliquez des comportements Dreamweaver. Pour afficher
la tranche, activez sa visibilité dans le calque Web du panneau Calques.
Dans Fireworks, lorsque vous affichez les propriétés d’une tranche à laquelle est associé un comportement
Dreamweaver, la zone de texte Lien de l’inspecteur des propriétés peut afficher javascript:;. Vous pouvez
supprimer ce texte sans risques. Vous pouvez l’écraser pour entrer une URL si nécessaire et le comportement reste
intact lorsque vous revenez dans Dreamweaver.
Lorsque vous utilisez Roundtrip HTML depuis Dreamweaver, Fireworks prend en charge les formats de fichiers côté
serveur, tels que CFM et PHP.
Dreamweaver prend en charge tous les comportements Fireworks, y compris ceux nécessaires aux survols et aux
boutons.
Remarque : les éléments de bibliothèque Dreamweaver ne prennent pas en charge les menus contextuels.
Fireworks prend en charge les comportements de Dreamweaver suivants lors d’une session de lancement et de
modification :
• Survol simple
• Permutation d’images
• Restauration de permutation d’images
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 272
Utilisation de Fireworks avec d’autres applications
• Définition du texte de la barre d’état
• Définition de l’image de la barre de navigation
• Menu contextuel
Remarque : Fireworks ne prend pas en charge les comportements non natifs, y compris les comportements
côté serveur.
Optimisation des images et animations Fireworks placées dans Dreamweaver
Modification des paramètres d’optimisation d’une image Fireworks placée dans
Dreamweaver
1 Dans Dreamweaver, sélectionnez l’image, puis procédez de l’une ou des deux manières suivantes :
• Sélectionnez la commande Commandes > Optimiser l’image.
• Cliquez sur le bouton Optimiser de l’inspecteur des propriétés.
• Cliquez avec le bouton droit de la souris (Windows) ou tout en maintenant la touche Ctrl enfoncée (Mac OS),
puis, dans le menu contextuel, sélectionnez Optimiser dans Fireworks.
2 Si un message vous y invite, indiquez si vous souhaitez ouvrir le fichier source Fireworks de l’image placée.
3 Apportez les modifications dans la boîte de dialogue Aperçu avant exportation :
• Pour modifier les paramètres d’optimisation, cliquez sur l’onglet Options.
• Pour modifier la taille et la zone de l’image exportée, cliquez sur l’onglet Fichier. Si vous changez les dimensions
de l’image dans Fireworks, vous devez redéfinir la taille de l’image dans l’inspecteur des propriétés lorsque vous
revenez dans Dreamweaver.
• Pour modifier les paramètres d’animation de l’image, cliquez sur l’onglet Animation.
4 Une fois l’image modifiée, cliquez sur OK pour exporter l’image, la mettre à jour dans Dreamweaver et enregistrer
le fichier PNG.
Si vous avez modifié le format de l’image, le vérificateur de liens de Dreamweaver vous invite à mettre à jour les
références à cette image.
Modification des paramètres d’animation
Dans le cadre de l’ouverture et de l’optimisation d’un fichier GIF animé, vous pouvez modifier les paramètres de
l’animation. Les options d’animation de la boîte de dialogue Aperçu avant exportation sont identiques à celles du
panneau Etats de Fireworks.
Remarque : pour modifier des éléments graphiques dans une animation Fireworks, vous devez ouvrir et modifier
l’animation Fireworks.
Définition des options de lancement et de modification
Pour utiliser efficacement la fonction Roundtrip HTML, vous devez exécuter préalablement quelques tâches,
notamment définir Fireworks comme éditeur d’images principal dans Dreamweaver, spécifier les préférences de
lancement et de modification dans Fireworks et définir un site local dans Dreamweaver.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 273
Utilisation de Fireworks avec d’autres applications
Définition de Fireworks comme l’éditeur d’images externe principal pour Dreamweaver
Dans les préférences de Dreamweaver, il est possible d’indiquer les applications spécifiques qui doivent être
automatiquement démarrées pour modifier des types de fichiers spécifiques. Pour utiliser les fonctions de lancement
et de modification de Fireworks, vérifiez que Fireworks est bien désigné dans Dreamweaver comme éditeur principal
pour les fichiers GIF, JPEG et PNG.
Remarque : vous n’avez besoin de définir cette préférence que s’il vous est difficile de démarrer Fireworks à partir
de Dreamweaver.
1 Dans Dreamweaver, choisissez Edition > Préférences, puis sélectionnez Types de fichiers/Editeurs.
2 Dans la liste Extensions, sélectionnez une extension (.gif, .jpg ou .png) pour le nom du fichier d’image Web.
3 Dans la liste Editeurs, choisissez l’option Fireworks. Si Fireworks ne se trouve pas dans la liste, cliquez sur le bouton
Plus (+), recherchez l’application Fireworks sur votre disque dur, puis cliquez sur Ouvrir.
4 Cliquez sur Rendre Principal.
5 Répétez les étapes 2 à 4 pour définir Fireworks comme éditeur principal pour les autres types de fichiers
d’image Web.
Définition des préférences de lancement et de modification pour les fichiers sources
Fireworks
Les préférences de lancement et de modification Fireworks permettent de définir la manière dont les fichiers
sources PNG sont traités lorsque vous ouvrez des fichiers Fireworks depuis une autre application.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 274
Utilisation de Fireworks avec d’autres applications
Dreamweaver reconnaît les préférences de lancement et de modification Fireworks uniquement lorsque vous ouvrez
et optimisez une image qui ne fait pas partie d’un tableau Fireworks et qui ne contient pas de chemin de Design Note
correct vers un fichier PNG source. Dans tous les autres cas, y compris dans les cas de lancement et de modification
d’images Fireworks, Dreamweaver ouvre automatiquement le fichier source PNG ; si Dreamweaver ne trouve pas
l’emplacement de ce fichier, un message vous invite à le spécifier.
1 Dans Fireworks, choisissez Edition > Préférences (Windows) ou Fireworks > Préférences (Mac OS).
2 Cliquez sur la catégorie Lancer et modifier, puis définissez les options comme vous le souhaitez.
Pour plus d’informations, reportez-vous à la section « Préférences de lancement et de modification » à la page 314.
A propos des Design Notes et des fichiers sources
Lorsque vous exportez vers un site Dreamweaver un fichier Fireworks à partir d’un fichier source PNG enregistré,
Fireworks crée une Design Note (note de conception) contenant des informations sur le fichier PNG. Lorsque vous
ouvrez et modifiez une image Fireworks depuis Dreamweaver, ce dernier utilise la Design Note correspondante pour
localiser le fichier source PNG pour cette image. Pour obtenir de meilleurs résultats, enregistrez toujours votre fichier
source PNG Fireworks ainsi que les fichiers exportés dans un site Dreamweaver. Tout autre développeur du site est
ainsi en mesure de trouver le fichier source PNG lorsqu’il lance Fireworks à partir de Dreamweaver.
Transfert de fichiers de site à l’aide du bouton Gestion des fichiers
Le bouton Gestion des fichiers
, situé dans la partie supérieure de la fenêtre de document, permet d’accéder
facilement aux commandes de transfert de fichier. Utilisez ce bouton si votre document réside dans un dossier de site
Dreamweaver et si le site a accès à un serveur distant. Pour permettre à Fireworks de reconnaître le dossier comme un
site, utilisez la boîte de dialogue Gérer les sites de Dreamweaver pour définir le dossier cible (ou un dossier conteneur)
comme dossier racine local du site.
Remarque : pour utiliser les options d’archivage et d’extraction de fichier de Fireworks, activez-les pour le site
Dreamweaver contenant le document.
Acquérir Copie la version distante du fichier sur le site local en remplaçant le fichier local par la copie distante.
Extraire Extrait le fichier en remplaçant le fichier local par la copie distante.
Placer Copie la version locale du fichier sur le site distant en remplaçant le fichier distant par la copie locale.
Archiver Archive le fichier local en remplaçant le fichier distant par la copie locale.
Annuler l’extraction Annule l’extraction du fichier local et l’archive en remplaçant le fichier local par la copie distante.
Remarque : les commandes Gestion de fichiers sont activées dans Fireworks uniquement si votre document réside dans
un dossier de site Dreamweaver pour lequel un serveur distant est défini. Vous pouvez les utiliser uniquement pour des
fichiers résidant sur des sites qui utilisent les méthodes de transport Local/Réseau et FTP. Vous ne pouvez pas transférer
les fichiers des sites utilisant des méthodes de transport SFTP ou tierces comme SourceSafe, WebDAV et RDS du site
distant vers Fireworks et inversement.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 275
Utilisation de Fireworks avec d’autres applications
Utilisation de HomeSite, GoLive et d’autres
éditeurs HTML
Fireworks et Adobe HomeSite® ont en commun une intégration puissante qui vous permet de lancer Fireworks depuis
HomeSite pour modifier des graphiques Web. Lorsque vous quittez Fireworks, les mises à jour que vous avez
apportées sont automatiquement appliquées à l’image placée dans HomeSite. Ensemble, les deux applications
fournissent un processus rationnel de modification de graphiques Web dans les pages HTML.
Insertion d’images Fireworks dans HomeSite
Une fois les images GIF ou JPEG exportées depuis Fireworks, vous pouvez les insérer dans un document HomeSite.
1 Dans HomeSite, enregistrez votre document (cette étape est nécessaire pour créer les chemins relatifs vers les
images).
2 Dans la fenêtre Resources (Ressources), sélectionnez l’image Fireworks que vous avez exportée.
3 Pour insérer l’image Fireworks dans votre document HomeSite, procédez de l’une des manières suivantes :
• Faites glisser le fichier de la fenêtre Resources (Ressources) vers l’emplacement sélectionné dans le code HTML,
sous l’onglet Edit (Modifier) de la fenêtre de document.
• Dans l’onglet Edit (Modifier) de la fenêtre de document, placez le point d’insertion à l’endroit où insérer l’image
Fireworks, cliquez ensuite avec le bouton droit de la souris sur le fichier dans la fenêtre Resources (Ressources),
puis sélectionnez l’option Insert as Link (Insérer comme 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 HomeSite.
Insertion de code HTML Fireworks dans HomeSite
Remarque : avant d’exporter, de copier ou de mettre à jour le code HTML Fireworks pour l’utiliser dans HomeSite,
sélectionnez le type de code HTML Générique dans la boîte de dialogue Configuration HTML.
Pour plus d’informations, consultez l’Aide de Fireworks.
Exportation de code HTML Fireworks vers HomeSite
L’exportation du code HTML Fireworks génère un fichier HTML et les fichiers d’image associés dans l’emplacement
que vous définissez. Vous pouvez ensuite ouvrir le fichier HTML dans HomeSite pour le modifier.
❖ Exportez votre document au format HTML depuis Fireworks, puis ouvrez le fichier exporté dans HomeSite en
sélectionnant Fichier > Ouvrir.
Copie de code HTML Fireworks dans le Presse-papiers pour l’utiliser dans HomeSite
Copiez le code HTML généré par Fireworks dans le Presse-papiers depuis Fireworks, puis collez ce code dans un
document HomeSite. Toutes les images requises sont exportées à l’emplacement que vous spécifiez.
❖ Copiez le code HTML dans le Presse-papiers depuis Fireworks, puis collez directement ce code dans un nouveau
document HomeSite.
Copie du code d’un fichier Fireworks exporté et collage du code dans HomeSite
❖ Exportez un fichier HTML Fireworks, puis copiez et collez le code souhaité dans un document HomeSite existant.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 276
Utilisation de Fireworks avec d’autres applications
Mise à jour du code HTML Fireworks exporté vers HomeSite
❖ Utilisez la commande Mettre à jour le code HTML dans Fireworks.
Modification d’images Fireworks dans HomeSite
1 Enregistrez votre document dans HomeSite.
2 Procédez de l’une des manières suivantes :
• Cliquez avec le bouton droit de la souris sur le fichier d’image dans l’un des onglets Fichiers de la fenêtre des
ressources.
• Cliquez avec le bouton droit de la souris sur l’onglet Vignettes de la fenêtre Résultat.
• Cliquez avec le bouton droit de la souris sur la balise img associée dans le code HTML affiché dans l’onglet Edit
(Modifier) de la fenêtre de document.
3 Dans le menu contextuel, cliquez sur Edit In Fireworks (Modifier dans Fireworks).
HomeSite lance Fireworks, s’il n’est pas déjà ouvert.
4 Si un message vous y invite, indiquez si vous désirez rechercher le fichier source Fireworks de l’image placée. Pour
plus d’informations sur les fichiers source PNG dans Fireworks, consultez l’Aide de Fireworks.
5 Modifiez l’image dans Fireworks.
La fenêtre de document indique que vous modifiez une image Fireworks depuis une autre application.
6 Une fois les modifications terminées, cliquez sur Terminé dans la fenêtre Document.
L’image mise à jour est réexportée vers HomeSite, et le fichier source PNG est enregistré si un fichier source a été
sélectionné.
Utilisation de HomeSite, GoLive et d’autres éditeurs HTML
Fireworks génère un véritable fichier HTML lisible par tous les éditeurs HTML et pouvant recevoir un contenu HTML
importé. Cette fonction vous permet d’ouvrir et de modifier presque tous les documents HTML dans Fireworks.
Vous pouvez exporter et copier du code HTML Fireworks dans GoLive, comme vous le faites avec la plupart des
éditeurs HTML. La seule exception réside dans le fait que vous devez sélectionner HTML GoLive comme style HTML
avant d’exporter ou de copier le code HTML depuis Fireworks.
Remarque : le style HTML GoLive ne prend pas en charge le code de menus contextuels. Si votre document Fireworks
contient des menus contextuels, sélectionnez le style HTML Générique avant l’exportation.
Utilisation de Flash
• Vous pouvez facilement importer, copier et coller ou exporter des objets vectoriels, des objets bitmap, des
animations et des graphiques de boutons multi-états Fireworks pour les utiliser dans Adobe Flash®.
• Le texte TLF de Flash est copié en tant qu'image bitmap vide dans Fireworks sous Windows. Conversion du texte
TLF en texte ASCII et importation de ce dernier dans Fireworks.
• La fonction de lancement et de modification permet de modifier aisément des graphiques Fireworks dans Flash.
Lorsque vous utilisez Flash, les préférences de lancement et de modification définies dans Fireworks sont toujours
appliquées.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 277
Utilisation de Fireworks avec d’autres applications
• Le style HTML Flash ne prend pas en charge le code de menus contextuels. Les comportements de boutons
Fireworks et d’autres éléments d’interactivité ne sont pas importés dans Flash.
Insertion de graphiques Fireworks dans Flash
Les procédures d’importation ou de copie de fichiers PNG Fireworks vous permettent de contrôler très précisément la
manière dont les graphiques et les animations sont ajoutées dans Flash. Vous pouvez également importer des
fichiers JPEG, GIF, PNG et SWF exportés depuis Fireworks.
Remarque : lorsque vous importez ou copiez et collez des graphiques Fireworks dans Flash, certains attributs sont perdus,
notamment les filtres dynamiques et les textures. Vous ne pouvez pas importer ni copier et coller un effet de dégradé de
contour de Fireworks dans un document Flash. En outre, Flash prend en charge uniquement les fonds unis, les fonds en
dégradé et les contours élémentaires.
Importation de fichiers PNG Fireworks dans Flash
Vous pouvez importer des fichiers sources PNG Fireworks directement dans Flash sans avoir à exporter dans un autre
format graphique. Tous les objets vectoriels, objets bitmap, animations et boutons multi-états Fireworks peuvent être
importés dans Flash.
Remarque : les comportements de bouton Fireworks et autres types d’interactions ne sont pas importés dans Flash car les
comportements Fireworks sont activés par du code JavaScript, externe au format de fichier. Flash utilise un code interne,
ActionScript.
1 Enregistrez le document dans Fireworks.
2 Accédez à un document ouvert dans Flash.
3 (Facultatif) Cliquez sur l’état clé et le calque vers lequel vous voulez importer le contenu Fireworks.
4 Choisissez Fichier > Importer.
5 Recherchez le fichier PNG, puis sélectionnez-le.
6 Dans la boîte de dialogue Importer un document Fireworks, procédez de l’une des manières suivantes :
• Sélectionnez l’option Importer sous la forme d’une image bitmap aplatie.
• Dans les deux menus contextuels, sélectionnez une option d’importation.
7 Sélectionnez le mode d’importation du texte.
8 Cliquez sur OK.
Remarque : les options sélectionnées dans la boîte de dialogue Importer un document Fireworks sont enregistrées et
utilisées comme paramètres par défaut.
Options d’importation de graphiques, d’objets vectoriels et de texte Fireworks
Options d’importation de graphiques
Importer sous la forme d’une image bitmap aplatie Importe une image non modifiable.
Importer toutes les pages dans de nouveaux états sous forme de clips Importe toutes les pages du fichier PNG dans
un nouveau calque Flash qui prend le nom du fichier PNG. Un état clé est créé dans le nouveau calque à l’emplacement
de l’état actif, la première page du fichier PNG étant placée dans cet état sous forme de clip, et toutes les autres pages
placées dans les états suivants sous forme de clips (séquences). La hiérarchie des calques et des états au sein du
fichier PNG est préservée.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 278
Utilisation de Fireworks avec d’autres applications
Importer la page 1 dans l’état actif sous forme de clip Le contenu de la page sélectionnée est importé sous forme de
clip placé dans l’état et le calque actifs du fichier Flash. La hiérarchie des calques et des états au sein du fichier PNG est
préservée.
Importer toutes les pages dans de nouvelles séquences sous forme de clips Importe toutes les pages du fichier PNG et
mappe chacune d’elles dans une nouvelle séquence sous forme de clip. Les calques et les états au sein des pages sont
préservés. Si des séquences existent déjà dans le fichier Flash, la procédure d’importation ajoute les nouvelles
séquences à la suite des séquences existantes.
Importer la page 1 dans un nouveau calque La page sélectionnée est importée sous forme de nouveau calque. Les états
sont importés dans le scénario en tant qu’états distincts.
Options d’importation d’objets vectoriels
Importer au format bitmap pour préserver l’apparence Permet de conserver le caractère modifiable des objets
vectoriels, sauf s’ils contiennent des fonds, des contours ou des effets non pris en charge par Flash. Pour conserver
l’aspect de tels objets, Flash les convertit en images bitmap non modifiables.
Importer sous forme de tracés modifiables Permet de conserver le caractère modifiable de tous les objets vectoriels. Si
les objets contiennent des fonds, des contours ou des effets que Flash ne prend pas en charge, les propriétés peuvent
se présenter différemment après importation.
Options d’importation de texte
Importer au format bitmap pour préserver l’apparence Permet de conserver le caractère modifiable du texte, sauf s’il
contient des fonds, des contours ou des effets non pris en charge par Flash. Pour conserver l’aspect du texte, Flash les
convertit en image bitmap non modifiable.
Remarque : Le texte TLF de Flash est copié en tant qu'image bitmap vierge dans Fireworks.
Rendre tout le texte modifiable Permet de conserver le caractère modifiable de l’ensemble du texte. Si les objets texte
contiennent des fonds, des contours ou des effets que Flash ne prend pas en charge, les objets peuvent se présenter
différemment après importation.
Copie ou glissement de graphiques Fireworks dans Flash
Pour copier des graphiques dans des versions de Flash antérieures à Flash 8, choisissez Edition > Copier les contours
du tracé.
Remarque : il peut être nécessaire de cliquer sur Modification > Dissocier pour dissocier les objets afin de les modifier
comme objets vectoriels individuels dans Flash.
1 Dans Fireworks, sélectionnez les objets à copier.
2 Dans le menu contextuel de Flash, cliquez sur Edition > Copier et choisissez Copier.
3 Dans Flash, créez un document puis choisissez Edition > Coller, ou faites glisser le fichier directement de Fireworks
dans Flash.
4 Dans la fenêtre Importer un document Fireworks, sélectionnez une option Dans :
Etats actifs sous forme de clip Le contenu collé est importé sous forme de clip, celui-ci étant placé dans l’état et le
calque actifs du fichier Flash. La hiérarchie des calques et des états au sein du fichier PNG est préservée.
Nouveau calque Le contenu collé est importé sous forme de nouveau calque. Les états sont importés dans le
scénario en tant qu’états distincts.
5 Sélectionnez le mode d’importation des objets vectoriels.
6 Sélectionnez le mode d’importation du texte.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 279
Utilisation de Fireworks avec d’autres applications
7 Cliquez sur OK.
Remarque : les options sélectionnées dans la boîte de dialogue Importer un document Fireworks sont enregistrées et
utilisées comme paramètres par défaut.
A propos de la structure de la bibliothèque Flash
Les objets Fireworks sont importés dans un dossier d’objets Fireworks dans la bibliothèque Flash. La structure de ce
dossier se présente comme suit :
Dossier du fichier 1 // Nommé en fonction du nom du fichier Fireworks
• Dossier de la page 1 // Nommé en fonction du nom de la page (s’il y en a plusieurs)
— Page 1 // Nommée en fonction du nom de la page
— — Dossier de l’état 1 // Nommé en fonction du nom de l’état (s’il y en a plusieurs)
— — Etat 1 // Nommé en fonction du nom de l’état
— — — Symbole 1 de l’état 1 // Nommé en fonction du nom du symbole
— — — Symbole 2 de l’état 1
...
— Dossier des calques partagés // Calques partagés entre les états de la page 1
— — Dossier de calque partagé // Nommé en fonction du calque partagé
— — Symbole du calque partagé
• Dossier de la page 2
— Page 2
— Symbole 1 de la page 2 (pour une page ne contenant aucun état)
...
• Dossier de gabarit
— Gabarit
— Symbole 1 du gabarit
...
— Dossier des calques partagés // Calques partagés entre les pages
— — Dossier de calque partagé // Nommé en fonction du calque partagé
— — Symbole du calque partagé
A propos de l’importation de symboles Fireworks dans Flash
Lorsque vous importez des symboles Fireworks dans Flash, vous devez tenir compte des points suivants :
• Si un symbole utilise une mise à l’échelle en 9 tranches, les quatre repères de découpe sont importés et conservés
dans Flash. La mise à l’échelle en 9 tranches n’est toutefois pas préservée pour les animations. Les symboles
importés sont enregistrés en tant que symboles dans la bibliothèque Flash.
• Les modifications logicielles appliquées aux symboles enrichis sont perdues. La copie maîtresse (originale) du
symbole est importée.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 280
Utilisation de Fireworks avec d’autres applications
• Les symboles graphiques enrichis sont stockés sous la forme d’un fichier PNG et d’un fichier JSF. Seul le fichier
PNG est importé. Si le symbole est composé de plusieurs tracés, ceux-ci sont combinés en un seul symbole.
• Pour bénéficier pleinement de la fonctionnalité complète du symbole enrichi dans Flash, vous devez le remplacer
par la version Flash du symbole.
A propos de la préservation de la visibilité et du verrouillage
Les objets et les calques masqués dans le fichier PNG sont importés et restent masqués dans Flash. En revanche, les
parties invisibles d’un symbole graphique enrichi ne sont pas importées (état Au-dessus ou Enfoncé d’un bouton, par
exemple).
Si un calque est verrouillé ou masqué, tous les objets et sous-calques qui le composent héritent de cette caractéristique
et la conservent lors de leur importation dans Flash.
Cependant, si vous importez une seule page dans un nouveau calque dans Flash, un calque est créé pour la page entière,
et tous les objets sont affichés. Dans ce cas, les attributs de visibilité et de verrouillage ne sont pas conservés.
Effets de calques Photoshop pris en charge
Effet dynamique Photoshop - Ombre portée L’effet est mappé comme suit :
• taille est mappé sur flouX, flouY
• distance est mappé sur distance
• couleur est mappé sur couleur
• angle est mappé sur 180 - (angle d’effet Photoshop)
Effet dynamique Photoshop - Ombre interne L’effet est mappé comme suit :
• taille est mappé sur flouX, flouY
• distance est mappé sur distance
• couleur est mappé sur couleur
• angle est mappé sur 180 - (angle d’effet Photoshop)
Effet dynamique Photoshop - Lueur externe L’effet est mappé comme suit :
• opacité est mappé sur intensité
• couleur est mappé sur couleur
• taille est mappé sur flouX, flouY
Effet dynamique Photoshop - Lueur interne L’effet est mappé comme suit :
• opacité est mappé sur intensité
• couleur est mappé sur couleur
• taille est mappé sur flouX, flouY
• Les objets comportant des effets de calque Photoshop autres que ceux indiqués ci-dessus sont pixellisés.
Exportation de graphiques Fireworks dans d’autres formats à utiliser dans Flash
Vous pouvez exporter des graphiques Fireworks sous forme de fichiers JPEG, GIF, PNG et Adobe Illustrator 8 (AI),
puis les importer dans Flash.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 281
Utilisation de Fireworks avec d’autres applications
Bien que PNG soit le format de fichier natif de Fireworks, les fichiers graphiques PNG exportés depuis Fireworks sont
différents des fichiers sources PNG que vous enregistrez dans Fireworks. Comme les fichiers GIF ou JPEG, les
fichiers PNG exportés contiennent uniquement des données d’images, sans informations complémentaires relatives
aux tranches, calques, éléments d’interactivité, filtres dynamiques ou autres contenus modifiables.
Exportation de graphiques et d’animations Fireworks sous forme de fichiers SWF
Les graphiques et les animations Fireworks peuvent être exportés sous forme de fichiers SWF Flash. Pour conserver
les paramètres d’épaisseur et de couleur du contour, sélectionnez Conserver l’apparence dans la boîte de dialogue
Options d’exportation Flash SWF.
Les éléments de mise en forme suivants sont perdus lors de l’exportation au format SWF : mode de fusion, calques,
masques (appliqués avant exportation), tranches, cartes-images, comportements, motifs et dégradés de contour.
1 Choisissez Fichier > Enregistrer sous.
2 Entrez un nom de fichier, puis choisissez un dossier de destination.
3 Sélectionnez Adobe Flash SWF pour le format.
4 Cliquez sur le bouton Options, puis sélectionnez une option Objets :
Conserver les tracés Permet de conserver le caractère modifiable des tracés. Les effets et la mise en forme sont
perdus.
Conserver l’aspect Permet de convertir les objets vectoriels en objets bitmap et de conserver l’aspect des contours
et des fonds appliqués. Le caractère modifiable est perdu.
5 Sélectionnez une option Texte :
Conserver le caractère modifiable Permet de continuer à modifier le texte. Les effets et la mise en forme sont
perdus.
Convertir en tracés Permet de convertir le texte en tracés tout en conservant le crénage ou l’espacement
personnalisé dans Fireworks. Le caractère modifiable du texte est perdu.
6 Définissez la qualité des images JPEG avec le curseur contextuel Qualité JPEG.
7 Sélectionnez les états à exporter et leur cadence en secondes.
8 Cliquez sur OK, puis sur Enregistrer dans la boîte de dialogue Exporter.
Exportation de fichiers PNG 8 bits avec transparence
Pour exporter les fichiers PNG 32 bits avec transparence, importez simplement les fichiers sources PNG Fireworks
dans Flash. Pour exporter les fichiers PNG 8 bits avec transparence, procédez comme suit :
1 Dans Fireworks, choisissez Fenêtre > Optimisation pour ouvrir le panneau Optimisation.
2 Sélectionnez le format de fichier d’exportation PNG 8 et l’option Transparence alpha dans le menu contextuel
Transparence.
3 Choisissez Fichier > Exporter.
4 Sélectionnez Images uniquement dans le menu contextuel Type.
5 Donnez un nom au fichier, et enregistrez-le.
Importation dans Flash de graphiques et d’animations Fireworks exportés
1 Créez un document dans Flash.
Remarque : si vous importez un graphique Fireworks dans un fichier Flash existant, créez un nouveau calque dans
Flash.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 282
Utilisation de Fireworks avec d’autres applications
2 Choisissez Fichier > Importer, puis recherchez le graphique ou l’animation.
3 Cliquez sur Ouvrir pour importer le fichier.
Utilisation de Fireworks pour modifier des graphiques dans Flash
Grâce à l’intégration de la fonction de lancement et de modification, vous pouvez utiliser Fireworks pour modifier un
graphique que vous avez précédemment importé dans Flash, 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’une image bitmap aplatie.
Si le graphique a été exporté depuis Fireworks et que vous avez enregistré le fichier PNG d’origine, vous pouvez
modifier le fichier PNG dans Fireworks depuis Flash. Lorsque vous revenez dans Flash, le fichier PNG et le graphique
dans Flash sont mis à jour.
1 Dans Flash, cliquez avec le bouton droit de la souris (Windows) ou tout en maintenant la touche Ctrl enfoncée
(Mac OS) sur le fichier graphique dans le panneau Bibliothèque de documents.
2 Dans le menu contextuel, cliquez sur Modifier avec Fireworks.
Remarque : si cette commande ne s’affiche pas dans le menu contextuel, sélectionnez Modifier avec et recherchez
l’application Fireworks.
3 Cliquez sur Oui dans la zone Recherche de la source pour rechercher le fichier PNG d’origine du graphique
Fireworks, puis cliquez sur Ouvrir.
4 Modifiez l’image, puis cliquez sur Terminé.
Fireworks exporte un nouveau fichier graphique dans Flash et enregistre le fichier PNG d’origine.
Voir aussi
« Préférences de lancement et de modification » à la page 314
Utilisation d’Illustrator
Le partage de graphiques vectoriels entre Fireworks et Adobe Illustrator® est un jeu d’enfants. L’aspect des objets peut
varier d’une application à l’autre, car Fireworks ne partage pas entièrement les mêmes fonctions avec toutes les
applications vectorielles.
Utilisation d’Illustrator
Fireworks assure une prise en charge de l’importation de fichiers natifs Illustrator (AI) CS2 et versions ultérieures, et
propose des options permettant de conserver de nombreux aspects des fichiers importés, notamment les calques et les
motifs. Les images liées, en revanche, ne sont pas importées.
Vous pouvez importer des images Illustrator dans Fireworks afin de les modifier et de les optimiser pour le Web. Vous
pouvez également exporter des fichiers Illustrator depuis Fireworks.
Les fonctions suivantes sont préservées lors de l’importation de fichiers Illustrator :
Points de Bézier Le nombre et la position des points de Bézier seront préservés.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 283
Utilisation de Fireworks avec d’autres applications
Couleurs Les couleurs sont préservées autant que possible lors de l’importation de contenu AI dans Fireworks.
Fireworks prend uniquement en charge le schéma RVB. Les autres schémas sont automatiquement convertis en RVB
8 bits avant d’être importés dans Fireworks.
Attributs de texte : Copiez du texte d’Illustrator vers Fireworks en toute transparence sans en modifier l’aspect.
Lorsque vous importez du texte, Illustrator préserve les éléments suivants :
• Police
• Corps
• Couleur
• Gras
• Italique
• Alignement (A gauche, A droite, Au centre, Justifier)
• Orientation (Horizontale, De gauche à droite verticalement, De droite à gauche verticalement)
• Interlettrage
• Position des caractères (Normal, Exposant, Indice)
• Crénage automatique
• Paires de crénage
Pour importer rapidement un texte spécifique dans un fichier Illustrator, copiez-le directement dans Fireworks. Le
texte copié conserve tous ses attributs textuels.
Fonds en dégradé Les dégradés sont importés sous forme de dégradés Fireworks natifs. Tous les points de la rampe
du dégradé sont préservés. Les valeurs d’opacité associées aux remplissages de dégradé sont également préservées à
l’importation.
Images Les fichiers AI Illustrator peuvent contenir des fichiers importés aux formats suivants : PDF, BMP, EPS, GIF,
JPEG, JPEG2000, PICT, PCX, PCD, PSD, PXR, PNG, TGA et TIFF. Les images incorporées sont importées dans
Fireworks en tant qu’images pixellisées. Fireworks ne peut cependant pas ouvrir les fichiers AI Illustrator contenant
des images liées, telles qu’EPS et AI.
Masques d’écrêtage Fireworks prend en charge l’importation des masques d’écrêtage contenant des tracés et des
tracés composés, à un niveau de base.
Contours avec fond Les contours avec fond sont importés en un seul objet de dessin.
Fonds unis Les fonds unis sont importés en un seul objet de dessin.
Tracés transparents Les tracés transparents sont importés en un seul objet de dessin.
Groupes Le groupe est préservé, et les objets associés individuels s’affichent en tant qu’objets de dessin.
Graphes Les graphes sont importés sous forme de groupes et perdent leur caractère modifiable.
Primitives Les primitives Illustrator sont en fait des tracés ; elles ne sont donc pas importées en tant que primitives
Fireworks.
Motifs Les motifs sont importés en tant que mosaïque individuelle. Cette mosaïque est importée en tant que motif
natif dans Fireworks ; ce motif est ensuite affecté à l’objet de dessin.
Contours Les contours sont importés sous forme de groupes multiples (un groupe par tracé fermé).
Symboles Les symboles sont importés sous forme d’objets de groupe normaux.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 284
Utilisation de Fireworks avec d’autres applications
Transparence Fireworks importe l’opacité de l’objet correctement, préservant ainsi les paramètres de transparence de
l’objet selon les valeurs d’origine définies par Illustrator.
Sous-calques Fireworks importe tous les sous-calques en tant que sous-calques Fireworks natifs.
Importation de fichiers Illustrator contenant plusieurs plans de travail
Pour ouvrir un fichier Illustrator contenant plusieurs plans de travail, procédez de l’une des manières suivantes :
Importation du fichier Illustrator dans Fireworks Utilisez l’option Fichier > Importer pour importer des fichiers
Adobe Illustrator contenant plusieurs plans de travail si vous souhaitez importez ceux-ci individuellement.
Lorsque vous importez un fichier Adobe Illustrator contenant plusieurs plans de travail, le menu Page de la boîte de
dialogue Options de fichier vectoriel est activé. Sélectionnez le plan de travail à importer dans le menu Page. Chaque
plan de travail d’Illustrator est mappé à une page dans Fireworks. Les plans de travail 1, 2, 3 du fichier Adobe
Illustrator, par exemple, s’affichent sous la forme 1, 2, 3 dans le menu Page.
Ouverture du fichier Illustrator dans Fireworks Pour ouvrir tous les plans de travail d’un fichier Illustrator,
sélectionnez Fichier > Ouvrir et ouvrez le fichier concerné. Tous les plans de travail étant importés sous forme de pages
distinctes, les options Conversion de fichiers de la boîte de dialogue Options de fichier vectoriel sont désactivées.
Remarque : Les options de conversion de fichiers sont désactivées lorsque vous importez des fichiers Illustrator créés dans
les version antérieures à CS3 ou contenant un seul plan de travail.
Utilisation de Photoshop
Fireworks importe les fichiers Photoshop (PSD) natifs en conservant la plupart de leurs fonctions propres à ce format.
Vous pouvez également exporter les graphiques Fireworks vers Photoshop pour les retoucher avec précision.
Insertion d’images Photoshop dans Fireworks
Pour placer des images Photoshop dans Fireworks, utilisez les commandes Fichier > Importer et Fichier > Ouvrir ou
faites glisser les fichiers sur la zone de travail. La commande Importer permet d’accéder aux options spécifiques du
calque d’arrière-plan et des dossiers de calque. La commande Ouvrir et la méthode d’insertion par glisser-déposer
permettent, quant à elles, d’accéder aux options des repères et des états.
Voir aussi
« Préférences d’importation et d’ouverture de fichiers Photoshop » à la page 313
Fonctions Photoshop converties et non prises en charge dans Fireworks
Lorsque vous ouvrez ou importez un fichier Photoshop, Fireworks convertit l’état au format PNG en respectant les
préférences d’importation que vous avez spécifiées (Voir « Préférences d’importation et d’ouverture de fichiers
Photoshop » à la page 313.)
• Les masques de calques individuels sont convertis en masques d’objets dans Fireworks. Les masques de groupe ne
sont pas pris en charge.
• Les masques d’écrêtage sont convertis en masques d’objet, mais leur apparence est quelque peu modifiée. Si vous
souhaitez privilégier l’aspect par rapport au caractère modifiable des objets, sélectionnez la
préférence Masques d’écrêtage.
• Les modes de fusion des calques sont convertis en modes de fusion pour les objets Fireworks, si une correspondance
peut être établie.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 285
Utilisation de Fireworks avec d’autres applications
• Les effets de calque sont conservés par défaut. Si vous préférez convertir ces effets en filtres dynamiques
correspondants, sélectionnez la préférence Effets de calque. Toutefois, l’aspect des effets et filtres similaires peut
légèrement varier.
• 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.
• Tous les modes et profondeurs de couleur Photoshop sont convertis au format RVB 8 bits.
Déplacement, ouverture ou importation d’images Photoshop dans Fireworks
Chaque image que vous déplacez, ouvrez ou importez devient un nouvel objet bitmap.
Remarque : sous Windows, les noms des fichiers doivent inclure une extension PSD de façon à être identifiés
correctement par Fireworks.
1 Procédez de l’une des manières suivantes :
• Faites glisser une image ou un fichier Photoshop dans un document Fireworks ouvert.
• Choisissez Fichier > Ouvrir ou Fichier > Importer, puis sélectionnez un fichier Photoshop (PSD).
2 Cliquez sur le bouton Ouvrir.
3 Dans la boîte de dialogue qui s’affiche, définissez les options d’image, puis cliquez sur OK.
4 Si vous utilisez la commande Fichier > Importer, un curseur en forme de L inversé apparaît. Dans la zone de travail,
cliquez à l’endroit où vous voulez placer le coin supérieur gauche de l’image.
Voir aussi
« Préférences d’importation et d’ouverture de fichiers Photoshop » à la page 313
Options d’importation de fichiers Photoshop
Lorsque vous importez ou ouvrez un fichier Photoshop dans Fireworks, une boîte de dialogue vous permet de choisir
le mode d’importation de l’image. Les options que vous choisissez déterminent l’aspect et le caractère modifiable des
fichiers importés.
1 Spécifiez les dimensions de l’image en pixels ou en pourcentage, et indiquez une résolution en pixels. Pour
conserver le rapport largeur/hauteur actuel, sélectionnez Conserver les proportions.
2 Si le fichier Photoshop contient des compositions de calques, spécifiez la version de l’image à importer. Sélectionnez
l’option Afficher l’aperçu pour afficher un aperçu de la composition sélectionnée. La zone de texte Commentaires
affiche les commentaires provenant du fichier Photoshop.
3 Dans le menu contextuel du bas, choisissez le type d’ouverture de l’image Photoshop dans Fireworks :
Conserver le caractère modifiable du calque plutôt que l’apparence Préserve la structure de calques et le caractère
modifiable du texte autant que possible, sans nuire à l’aspect de l’image. Si le fichier inclut des fonctions non prises
en charge par Fireworks, ce logiciel préserve l’aspect du document en fusionnant et en pixellisant les calques. Voici
quelques exemples :
• Les calques CMJN, les calques de réglage et les calques utilisant une option de masquage sont fusionnés avec les
calques sous-jacents.
• Les calques utilisant des effets de calques non pris en charge peuvent être fusionnés, selon le mode de fusion du
calque et la présence de pixels transparents.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 286
Utilisation de Fireworks avec d’autres applications
Conserver l’apparence du calque Photoshop Aplatit tous les objets de chaque calque Photoshop et convertit
chacun d’eux en objet bitmap. Vous n’aurez plus la possibilité de modifier les calques Photoshop dans Fireworks.
Les groupes de calques sont cependant conservés.
Utiliser les préférences personnalisées Importe le fichier en utilisant les paramètres de conversion de fichier
personnalisés indiqués dans la boîte de dialogue Préférences (Voir « Préférences d’importation et d’ouverture de
fichiers Photoshop » à la page 313.)
Aplatir les calques Photoshop en une seule image Importe le fichier Photoshop sous la forme d’une image aplatie
sans calques. Le fichier converti ne conserve aucun objet individuel. L’opacité est conservée mais n’est plus
modifiable.
4 Si vous avez utilisé la commande Fichier > Importer, vous pouvez sélectionner les options suivantes :
Inclure le calque d’arrière-plan Importe les objets situés sur le calque d’arrière-plan de l’image.
Importer dans un nouveau dossier Importe l’image dans un nouveau dossier de calque nommé Importation
Photoshop.
5 Si vous avez utilisé la commande Fichier > Ouvrir ou fait glisser le fichier Photoshop dans Fireworks, vous pouvez
sélectionner les options suivantes :
Inclure les repères Conserve les repères Photoshop à leur position initiale.
Convertir les calques en états Place chaque groupe de calques Photoshop dans son propre état.
A propos de l’importation de texte depuis Photoshop
Pour importer rapidement un texte spécifique dans un fichier Photoshop, copiez-le directement dans Fireworks. Le
texte copié conserve tous ses attributs textuels.
Lorsque vous importez des fichiers Photoshop contenant du texte, Fireworks vérifie si vous disposez des polices
nécessaires sur votre système. Si tel n’est pas le cas, un message Fireworks vous demande si vous souhaitez remplacer
les polices ou conserver leur aspect.
Si des effets pris en charge par Fireworks sont appliqués au texte dans le fichier Photoshop, ils 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, si l’option
Conserver l’apparence est activée, une image cache du texte s’affiche pour conserver l’aspect Photoshop. Une fois le
texte modifié, l’image cache est remplacée par le texte réel dont l’aspect peut être différent de celui de l’original. Les
données relatives à la police d’origine sont stockées dans le fichier PNG de manière à ce que, si le fichier se trouve sur
un système disposant des polices adéquates, vous puissiez les utiliser.
Remarque : Fireworks ne permet pas d’exporter du texte dans le format Photoshop 6 ou 7. Si vous modifiez un document
Photoshop 6 ou 7 contenant du texte et que vous réexportez le document dans Photoshop, le fichier est exporté au format
Photoshop 5.5. Si vous ne modifiez pas le texte, le fichier est exporté au format Photoshop 6.
Voir aussi
« Préférences d’importation et d’ouverture de fichiers Photoshop » à la page 313
Importation/Exportation de dégradés Photoshop
A la suite de l’importation ou de l’exportation, la qualité du dégradé varie en fonction de son type. Une légère variation
de la couleur et de l’opacité des dégradés peut également se produire.
UTILISATION DE FIREWORKS CS5 287
Dernière mise à jour le 29/4/2010
Utilisation de Fireworks avec d’autres applications
Dégradé
Qualité d’importation
Linéaire
Presque parfait.
Concentrique
Presque parfait.
Reflété
Presque parfait.
Losange
Correspondance approximative (mappage à rectangulaire)
Angle
Correspondance approximative (mappage à conique)
Dégradé
Qualité d’exportation
Linéaire
Presque parfait.
Concentrique
Presque parfait.
Barreaux
Presque parfait.
Rectangulaire
Correspondance approximative (mappage à losange)
Conique
Correspondance approximative (mappage à angle)
Ellipse
Correspondance approximative (mappage à concentrique)
Ondes
Correspondance approximative (mappage à concentrique)
Etoile filante
Correspondance imparfaite (mappage à forme éclatée)
Contour, satin, vagues
Correspondance imparfaite (mappage à linéaire)
Conservation de l’aspect d’un calque de réglage après une importation
Lorsque vous importez un fichier PSD contenant un calque de réglage, l’aspect des calques individuels est conservé à
la suite de l’importation.
1 Dans la boîte de dialogue Préférences, sélectionnez Importation/Ouverture PS.
2 Sélectionnez Conserver l’aspect des calques réglés.
Conservation de l’aspect des calques réglés
Lorsque vous importez un fichier PSD contenant un calque de réglage, l’aspect des calques individuels est conservé à
la suite de l’importation. Veillez à sélectionner Paramètres personnalisés issus des préférences dans la boîte de
dialogue.
Utilisation de filtres et de modules externes Photoshop
Fireworks met à votre disposition de nombreux filtres et modules externes Photoshop ou de fabricants tiers, accessibles
depuis la fenêtre Filtres dynamiques ou le menu Filtres.
Remarque : les modules externes et les filtres de Photoshop 5.5 (et versions antérieures) sont pris en charge. Pour plus
d'informations, voir http://www.fireworkszone.com/g-2-536. Les modules externes et les filtres Photoshop à partir de la
version 6 ne sont pas compatibles avec Fireworks.
Activation des modules externes Photoshop via la boîte de dialogue Préférences
1 Choisissez Edition > Préférences (Windows) ou Fireworks > Préférences (Mac OS).
2 Sélectionnez la catégorie Modules externes.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 288
Utilisation de Fireworks avec d’autres applications
3 Sélectionnez Modules externes Photoshop.
La boîte de dialogue de sélection de dossier Windows ou Mac OS s’affiche.
Remarque : si la boîte de dialogue ne s’affiche pas, cliquez sur Parcourir.
4 Accédez au dossier d’installation des filtres et modules externes Photoshop ou tiers, puis cliquez sur le bouton
Sélectionner (Windows) ou Choisir (Mac OS).
5 Cliquez sur OK pour fermer la boîte de dialogue Préférences.
6 Relancez Fireworks.
Voir aussi
« Préférences des modules externes » à la page 314
Activation des modules externes Photoshop via la fenêtre Filtres dynamiques
1 Choisissez n’importe quel objet vectoriel, objet bitmap ou bloc de texte sur la zone de travail, puis cliquez sur l’icône
plus (+) en regard de l’étiquette Filtres dans l’inspecteur des propriétés.
2 Dans le menu contextuel, cliquez sur Options > Rechercher les modules externes.
3 Accédez au dossier d’installation des filtres et modules externes Photoshop ou tiers, puis cliquez sur le bouton
Sélectionner (Windows) ou Choisir (Mac OS). Cliquez sur OK, si le message qui s’affiche vous demande si vous
voulez relancer Fireworks.
4 Relancez Fireworks pour charger les filtres et les modules externes.
Remarque : vous pouvez également installer des modules externes directement dans le dossier Plug-Ins de Fireworks.
Insertion de graphiques Fireworks dans Photoshop
Fireworks offre une prise en charge complète pour l’exportation de fichiers au format Photoshop (PSD). Une image
Fireworks exportée dans Photoshop reste modifiable lorsque vous la rouvrez dans Fireworks en tant que graphique
Photoshop. Les utilisateurs de Photoshop peuvent travailler sur leurs graphiques dans Fireworks, puis poursuivre leur
modification dans Photoshop.
L’extension PSD Save permet d’exporter rapidement les pages et états que contient le document Fireworks en tant que
fichiers PSD distincts. Pour la télécharger, accédez à
http://www.adobe.com/go/learn_fw_psdsave_fr
Exportation d’un fichier au format Photoshop
1 Choisissez Fichier > Enregistrer sous.
2 Nommez votre fichier, puis sélectionnez Photoshop PSD dans le menu Type.
3 Pour spécifier des paramètres d’exportation prédéfinis pour les objets, les effets et le texte, cliquez sur le bouton
Options, puis choisissez un paramètre prédéfini dans le menu Paramètres.
Privilégier le caractère modifiable Convertit les objets en calques, conserve le caractère modifiable des effets et
convertit le texte en calques de texte Photoshop modifiables. Sélectionnez cette option si vous désirez modifier
l’image dans Photoshop et n’avez pas besoin de conserver l’aspect exact de l’image Fireworks.
Préserver l’aspect de Fireworks Convertit chaque objet en calque Photoshop isolé, mais les effets et le texte ne
peuvent plus être modifiés. Sélectionnez cette option si vous désirez garder le contrôle des objets Fireworks dans
Photoshop tout en conservant l’aspect original de l’image Fireworks.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 289
Utilisation de Fireworks avec d’autres applications
Fichier Photoshop plus petit Aplatit chaque calque en une seule image au rendu complet. Sélectionnez cette option
si vous exportez un fichier contenant un grand nombre d’objets Fireworks.
Personnalisé Permet de sélectionner des paramètres spécifiques pour les objets, les effets et le texte.
4 Cliquez sur Enregistrer pour exporter le fichier Photoshop.
Remarque : Photoshop 5.5 et les versions antérieures 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 paramètres d’exportation Photoshop
1 Dans la boîte de dialogue Enregistrer sous, sélectionnez Photoshop PSD comme type de fichier, puis cliquez
sur Options.
2 Dans le menu contextuel Paramètres, sélectionnez Personnalisés.
3 Dans le menu contextuel 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 fusion Photoshop.
Aplatir tous les calques Fireworks Aplatit tous les objets de chacun des calques Fireworks, lesquels se transforment
en calque Photoshop. Si vous sélectionnez cette option, vous n’aurez plus la possibilité de modifier les objets de
Fireworks dans Photoshop. Vous perdez également d’autres fonctions (modes de fusion) qui sont associées aux
objets de Fireworks.
4 Dans le menu contextuel Effets, choisissez l’une des options suivantes :
Conserver le caractère modifiable Convertit les filtres dynamiques Fireworks en leur équivalent Photoshop. Les
effets qui n’existent pas dans Photoshop sont ignorés.
Rendu des effets Aplatit les effets avec les objets auxquels ils s’appliquent. Si vous sélectionnez cette option, vous
conservez l’aspect des effets mais n’avez plus la possibilité de les modifier dans Photoshop.
5 Dans le menu contextuel Texte, choisissez l’une des options suivantes :
Conserver le caractère modifiable Convertit le texte en un calque Photoshop modifiable. La mise en forme de texte
non prise en charge par Photoshop est alors perdue.
Rendu du texte Transforme le texte en un objet image. Si vous sélectionnez cette option, vous conservez l’aspect
du texte mais n’avez plus la possibilité de le modifier.
Utilisation de Director
Fireworks permet d’exporter des contenus graphiques et interactifs vers Director®. Cela permet aux utilisateurs de
Director de tirer parti des outils d’optimisation et de conception graphique de Fireworks sans compromettre la qualité.
• Le processus d’exportation conserve les comportements et les tranches du graphique.
• Vous pouvez exporter les images découpées en tranches avec des survols.
Remarque : le style HTML Director ne prend pas en charge le code de menus contextuels.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 290
Utilisation de Fireworks avec d’autres applications
Insertion de fichiers Fireworks dans Director
Director peut importer des images aplaties depuis Fireworks, telles que des images JPEG et GIF. Il peut également
importer des images PNG 32 bits avec transparence. Pour les contenus découpés, interactifs et animés, Director peut
importer du code HTML Fireworks.
Pour plus d’informations sur l’exportation d’images Fireworks aplaties JPEG et GIF, consultez l’Aide de Fireworks.
Exportation d’images PNG 32 bits avec transparence
1 Dans Fireworks, choisissez Fenêtre > Optimisation, remplacez le format de fichier d’exportation par PNG 32, et
définissez Cache sur Transparent.
2 Choisissez Fichier > Exporter.
3 Sélectionnez Images uniquement dans le menu contextuel Type.
4 Donnez un nom au fichier, et enregistrez-le.
Exportation de contenus Fireworks avec calques et tranches Fireworks vers Director
En exportant des tranches Fireworks vers Director, vous pouvez exporter des contenus 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 contenant des calques tels que des animations.
1 Dans Fireworks, choisissez Fichier > Exporter.
2 Dans la boîte de dialogue Exporter, entrez un nom de fichier, et sélectionnez un dossier de destination.
3 Dans le menu contextuel Enregistrer sous, cliquez sur Director.
4 Sélectionnez une option Source :
Calques Fireworks Exporte chacun des calques du document. Sélectionnez cette option si vous exportez un
contenu avec des calques ou une animation.
Tranches Fireworks Exporte les tranches du document. Sélectionnez cette option si vous exportez un contenu
découpé ou interactif, tel que des images de survol et des boutons.
5 Pour recadrer automatiquement les images exportées afin de pouvoir placer les objets dans chaque état,
sélectionnez Rogner les images.
6 Sélectionnez Placer les images dans des sous-dossiers pour choisir le dossier devant recevoir les images.
Importation d’une image Fireworks aplatie dans Director
1 Dans Director, choisissez Fichier > Importer.
2 Accédez au fichier approprié, et cliquez sur Importer.
3 (Facultatif) Modifiez les options de la boîte de dialogue Options d’image. Pour plus d’informations sur chaque
option, reportez-vous à la section Utilisation de Director.
4 Cliquez sur OK pour afficher le graphique importé sous une forme bitmap.
Importation de contenus Fireworks avec calques, tranches ou éléments interactifs
1 Dans Director, choisissez Insertion > Fireworks > Images depuis HTML Fireworks.
Remarque : l’emplacement et le nom de cette commande de menu peuvent être différents selon votre version de
Director.
2 Recherchez le fichier HTML Fireworks que vous avez exporté pour Director.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 291
Utilisation de Fireworks avec d’autres applications
3 (Facultatif) Modifiez les options de la boîte de dialogue Ouvrir le fichier HTML Fireworks.
Couleur Permet de définir une profondeur de couleur pour les graphiques importés. S’ils contiennent une
transparence, sélectionnez Couleur 32 bits.
Enregistrement Permet de définir le point d’enregistrement des graphiques importés.
Importation de comportements de survol en code Lingo Convertit les comportements Fireworks en code Lingo.
Importation selon scénario Place les acteurs dans le scénario après l’importation.
4 Cliquez sur le bouton Ouvrir.
Le graphique et le code du fichier HTML Fireworks sont importés.
Remarque : si vous importez une animation Fireworks, faites glisser les états clés dans Director pour décaler le délai
de chaque calque importé, si nécessaire.
Modification des acteurs Director dans Fireworks
Voir aussi
« Préférences de lancement et de modification » à la page 314
Lancement de Fireworks pour modifier un acteur de Director
1 Dans Director, cliquez avec le bouton droit de la souris (Windows) ou tout en maintenant la touche Ctrl enfoncée
(Mac OS) sur le graphique dans la fenêtre Distribution.
2 Dans le menu contextuel, sélectionnez Modifier avec éditeur externe.
Remarque : pour définir Fireworks en tant qu’éditeur externe des graphiques bitmap, dans Director, choisissez
Fichier > Préférences > Editeurs et sélectionnez Fireworks.
Le fichier s’ouvre dans Fireworks, et la partie supérieure de la fenêtre de document indique que vous modifiez un
fichier provenant de Director.
3 Apportez les modifications requises, puis cliquez sur Terminé.
Fireworks exporte le nouveau graphique vers Director.
L’intégration de lancement et de modification permet de modifier les acteurs Director en démarrant Fireworks
pour les modifier depuis Director. Vous pouvez également démarrer Fireworks depuis Director pour optimiser les
acteurs.
Optimisation des acteurs dans Director
Lancez Fireworks depuis Director pour prévisualiser les modifications d’optimisation apportées aux acteurs
sélectionnés.
1 Dans Director, sélectionnez l’acteur dans la fenêtre Distribution, et cliquez sur Optimiser dans Fireworks sous
l’onglet Bitmap de l’inspecteur des propriétés.
2 Dans Fireworks, modifiez les paramètres d’optimisation.
3 Cliquez sur Mettre à jour une fois que vous avez terminé. Si la boîte de dialogue d’édition mixte s’affiche, cliquez
sur Terminé.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 292
Utilisation de Fireworks avec d’autres applications
Partage de métadonnées d’image avec Adobe XMP
La technologie Adobe XMP (eXtensible Metadata Platform) permet à l’utilisateur d’ajouter des informations sur les
fichiers aux fichiers enregistrés aux formats PNG, GIF, JPEG, Photoshop et TIFF. La technologie XMP facilite
l’échange de métadonnées (auteur, copyright et mots-clés, par exemple) entre les applications Adobe.
1 Choisissez Fichier > Info sur le fichier.
2 Effectuez l’une des opérations suivantes :
• Pour ajouter des métadonnées, reportez-vous à la section « Ajout de métadonnées à l’aide de la boîte de
dialogue Informations » à la page 292.
• Pour créer des catégories de métadonnées, reportez-vous à la section « Utilisation de modèles de métadonnées »
à la page 293.
• Pour importer des métadonnées depuis un fichier XML existant, reportez-vous à la section « Importation de
métadonnées dans un document » à la page 294.
Ajout de métadonnées à l’aide de la boîte de dialogue Informations
La boîte de dialogue Informations affiche les données d’appareil photo, d’autres propriétés de fichier, un historique
des modifications, le copyright et des informations sur l’auteur. La boîte de dialogue Informations affiche également
les panneaux des métadonnées personnalisés. Vous pouvez ajouter des métadonnées directement dans la boîte de
dialogue Informations. Si vous sélectionnez plusieurs fichiers, la boîte de dialogue affiche l’emplacement des
différentes valeurs associées à un champ de texte. Toute information entrée dans un champ remplace les métadonnées
existantes et applique la nouvelle valeur à tous les fichiers sélectionnés.
Remarque : vous pouvez également afficher des métadonnées dans le panneau Métadonnées, dans certaines vues du
panneau Contenu et en plaçant le pointeur au-dessus de la vignette dans le panneau Contenu.
1 Sélectionnez un ou plusieurs fichiers.
2 Choisissez Fichier > Informations.
3 Sélectionnez l’une des options des onglets situés dans la partie supérieure de la boîte de dialogue :
Utilisez les flèches droite et gauche pour faire défiler les onglets, ou cliquez sur la flèche pointant vers le bas et
choisissez une catégorie dans la liste.
Description Permet d’entrer des informations sur le fichier, notamment le titre du document, l’auteur, la
description et les mots-clés qui peuvent être utilisés pour rechercher le document. Pour spécifier des informations
de copyright, sélectionnez la commande Copyright dans le menu contextuel Etat du copyright. Ensuite, entrez le
détenteur de ce copyright, le texte de ce copyright et l’URL de la personne ou de la société détentrice du copyright.
IPTC Comprend quatre zones : Contenu IPTC : décrit le contenu visuel de l’image. Contact IPTC : liste les
informations de contact du photographe. Image IPTC : liste les informations descriptives de l’image. Etat IPTC :
liste les informations du flux de production et de copyright.
Données de la caméra Comprend deux zones : Données de la caméra 1 : affiche des informations en lecture seule
sur l’appareil photo et les paramètres utilisés pour prendre la photo, notamment la marque, le modèle, la vitesse
d’obturation et le réglage d’ouverture maximum. Données de la caméra 2 : liste des informations de fichier en
lecture seule sur la photo, notamment les dimensions des pixels et la résolution.
Données vidéo Liste des informations sur le fichier vidéo, notamment la largeur et la hauteur de l’image vidéo, et
permet d’entrer des informations telles que le nom de la cassette et le nom de la scène.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 293
Utilisation de Fireworks avec d’autres applications
Données audio Permet d’entrer des informations sur le fichier audio, notamment le titre, l’artiste, le débit et les
paramètres de lecture en boucle.
SWF mobile Liste des informations sur les fichiers de supports mobiles, notamment le titre, l’auteur, la description
et le type de contenu.
Catégories Permet d’entrer des informations selon les catégories Associated Press.
Origine Permet d’entrer des informations de fichier utiles pour les organes de presse, notamment la date et
l’endroit où le fichier a été créé, les données de transmission, les instructions spéciales et les gros titres.
DICOM Liste les informations sur les patients, les études, les séries et les équipements des images DICOM.
Historique Affiche les données du journal d’historique Adobe Photoshop pour les images enregistrées avec
Photoshop. L’option Historique s’affiche uniquement si Adobe Photoshop est installé.
Illustrator Permet d’appliquer un profil de document pour une sortie vers une imprimante, le Web ou un mobile.
Avancé Affiche les champs et les structures de stockage des métadonnées en utilisant des espaces de nom et des
propriétés, notamment ceux du format de fichier et XMP, Exif et PDF.
Données brutes Affiche les informations de texte XMP sur le fichier.
4 Entrez les informations à ajouter aux champs affichés.
5 Cliquez sur le bouton OK pour appliquer les modifications.
Utilisation de modèles de métadonnées
Vous pouvez créer de nouveaux modèles de métadonnées dans Adobe Bridge en utilisant la commande Créer un
modèle de métadonnées. Vous pouvez également modifier les métadonnées dans la boîte de dialogue Informations et
les enregistrer sous forme de fichier texte doté de l’extension de fichier .xmp. Vous partagez des fichiers XMP avec
d’autres utilisateurs ou les appliquez à d’autres fichiers.
Vous pouvez enregistrer des métadonnées dans un modèle que vous utiliserez pour générer des métadonnées dans des
documents Adobe InDesign et d’autres documents créés à l’aide de logiciels compatibles XMP. Les modèles que vous
créez sont stockés dans un emplacement partagé auquel tous les logiciels compatibles XMP peuvent accéder.
Pour afficher vos modèles XMP, ouvrez la boîte de dialogue Informations, cliquez sur le bouton Importer, puis
choisissez Afficher le dossier de modèles.
Création d’un modèle de métadonnées
1 Procédez de l’une des manières suivantes :
• Choisissez Outils > Créer un modèle de métadonnées.
• Choisissez Créer un modèle de métadonnées dans le menu du panneau Métadonnées.
2 Saisissez un nom dans le champ Nom de modèle.
3 Sélectionnez les métadonnées à inclure dans le modèle à partir des champs de la boîte de dialogue Créer un modèle
de métadonnées, puis entrez les valeurs des métadonnées dans les différents champs.
Remarque : si vous sélectionnez une option de métadonnées et laissez le champ correspondant vide, Adobe Bridge
efface les métadonnées existantes lorsque vous appliquez le modèle.
4 Cliquez sur Enregistrer.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 294
Utilisation de Fireworks avec d’autres applications
Enregistrement des métadonnées en tant que fichier XMP dans la boîte de
dialogue Informations
1 Choisissez Fichier > Informations.
2 Choisissez Exporter dans le menu contextuel situé en bas de la boîte de dialogue.
3 Tapez un nom de fichier, définissez l’emplacement du fichier, puis cliquez sur Enregistrer.
Affichage ou suppression de modèles de métadonnées
1 Pour afficher les modèles de métadonnées dans l’explorateur Windows (Windows) ou le Finder (Mac OS),
procédez de l’une des manières suivantes :
• Choisissez Outils > Créer un modèle de métadonnées. Cliquez sur le menu contextuel dans le coin supérieur
droit de la boîte de dialogue Créer un modèle de métadonnées, puis choisissez Afficher le dossier de modèles.
• Choisissez Fichier > Informations. Cliquez sur le menu contextuel situé en bas de la boîte de dialogue
Informations, puis choisissez Afficher le dossier de modèles.
2 Sélectionnez le modèle que vous souhaitez supprimer et appuyez sur la touche Suppr. ou faites-le glisser vers la
corbeille.
Application de modèles de métadonnées à des fichiers dans Adobe Bridge
1 Sélectionnez un ou plusieurs fichiers.
2 Choisissez une des deux commandes suivantes dans le menu du panneau Métadonnées ou le menu Outils :
• Ajouter des métadonnées (suivies du nom du modèle) Cette commande applique les métadonnées du modèle
uniquement lorsqu’il n’existe aucune valeur ou propriété de métadonnées dans le fichier.
• Remplacer des métadonnées (suivies du nom du modèle) Cette commande remplace l’intégralité des
métadonnées existantes du fichier par celles du modèle.
Modification de modèles de métadonnées
1 Procédez de l’une des manières suivantes :
• Choisissez Outils > Modifier un modèle de métadonnées (suivi du nom du modèle).
• Choisissez Modifier un modèle de métadonnées (suivi du nom du modèle) dans le menu du panneau
Métadonnées.
2 Entrez de nouvelles valeurs pour les métadonnées de tous les champs.
3 Cliquez sur Enregistrer.
Importation de métadonnées dans un document
1 Sélectionnez un ou plusieurs fichiers.
2 Choisissez Fichier > Informations.
3 Choisissez Importation dans le menu déroulant situé au bas de la boîte de dialogue.
Remarque : pour pouvoir importer des métadonnées à partir d’un modèle, vous devez d’abord enregistrer un modèle
de métadonnées.
4 Spécifiez la manière dont vous voulez importer les données :
Remplacement des propriétés existantes par celles du modèle Remplace toutes les métadonnées du fichier par
celles du fichier XMP.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 295
Utilisation de Fireworks avec d’autres applications
Conservation des métadonnées d’origine, mais remplacement des propriétés correspondantes à partir du modèle
Remplace uniquement les métadonnées ayant des propriétés différentes dans le modèle.
Conservation des métadonnées d’origine, mais ajout de propriétés correspondantes à partir du modèle (Par
défaut) Applique des métadonnées du modèle uniquement lorsqu’il n’existe aucune valeur ou propriété de
métadonnées dans le fichier.
5 Cliquez sur OK.
6 Accédez au fichier texte XMP, puis cliquez sur Ouvrir.
Aperçu de documents Fireworks dans des émulateurs
mobiles
Il est possible d’afficher un aperçu des documents Fireworks dans divers émulateurs mobiles accessibles dans Device
Central. Device Central est automatiquement installé en conjonction avec Fireworks.
Aperçu de documents Fireworks dans Device Central
1 Créez le document dont vous souhaitez afficher l’aperçu dans Fireworks. Vous pouvez également créer un
document contenant un jeu de pages et afficher un aperçu de chacune d’elles individuellement.
2 Sélectionnez Fichier > Aperçu dans Device Central.
3 Dans Device Central, affichez un aperçu du document dans les différents périphériques répertoriés dans le panneau
Périphériques de test.
La couleur d’arrière-plan de la page est utilisée comme couleur d’arrière-plan de l’aperçu. Si l’arrière-plan est
transparent, l’arrière-plan de l’aperçu est blanc.
Lorsque vous affichez l’aperçu du document, utilisez les différentes options de Device Central.
Création d’un document Fireworks à partir du périphérique mobile
sélectionné
Procédez comme suit pour créer un document pour un périphérique mobile donné.
1 Sélectionnez Fichier > Device Central.
2 Dans le panneau Périphériques de test de la fenêtre Device Central, sélectionnez le périphérique pour lequel vous
souhaitez créer le document Fireworks.
Remarque : Sélectionnez Utiliser la taille personnalisée pour créer un document Fireworks dont la taille ne correspond
pas exactement à celle spécifiée dans le panneau du périphérique. Modifiez les valeurs en fonction des besoins.
3 Cliquez sur Créer.
4 Un document de la taille sélectionnée s’affiche dans Fireworks.
Création d’un document Fireworks à partir de plusieurs périphériques
mobiles sélectionnés
Procédez comme suit pour créer un document pour un jeu de périphériques mobiles de même taille.
1 Sélectionnez Fichier > Device Central.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 296
Utilisation de Fireworks avec d’autres applications
2 Dans le panneau Périphériques de test de la fenêtre Device Central, sélectionnez les périphériques pour lesquels
vous souhaitez créer le document Fireworks.
Remarque : Lorsque vous sélectionnez des périphériques de différentes tailles, Device Central les regroupe par taille.
Ces groupes sont affichés dans le panneau Préréglages de tailles correspondantes.
3 Dans le panneau Préréglages de tailles correspondantes, sélectionnez le groupe pour lequel vous souhaitez créer un
document Fireworks.
4 Cliquez sur Créer.
5 Un document de la taille sélectionnée s’affiche dans Fireworks.
Dernière mise à jour le 29/4/2010
Chapitre 19 : Automatisation des tâches
Adobe® Fireworks® automatise et simplifie de nombreuses tâches fastidieuses essentielles du cycle de développement
pour le Web : dessin, modification ou conversion de fichiers.
Recherche et remplacement
• La fonction Rechercher et remplacer permet de rechercher et de remplacer des éléments (texte, URL, polices et
couleurs). Cette fonction peut être appliquée au document actif ou à un groupe de fichiers.
• La commande Rechercher et remplacer ne fonctionne qu’avec des fichiers PNG Fireworks ou des fichiers contenant
des objets vectoriels, tels que les fichiers Adobe FreeHand® et Adobe Illustrator®.
A
B
Panneau Rechercher
A. Option de source de la recherche B. Option d’attribut à rechercher
Recherche et remplacement d'expressions régulières
Les exemples suivants illustrent l'utilisation de la fonction Rechercher et remplacer pour les expressions régulières.
Exemple 1
1 Tapez K2Editor dans l'objet texte.
2 Sélectionnez Edition > Rechercher et remplacer.
3 Sélectionnez Expressions régulières.
4 Dans la zone Rechercher, entrez (\w+)Editor.
5 Dans la zone Remplacer, entrez $1Soft.
6 Cliquez sur Remplacer tout.
Le nom K2Editor est remplacé par K2Soft.
Exemple 2
1 Tapez IndyCar=3500:WRCar=2000 dans l'objet texte.
2 Dans la boîte de dialogue Rechercher et remplacer, recherchez (\w{4})(\w{3})=\d+:\w+\2=\d+\d
La chaîne IndyCar=3500:WRCar=2000 est recherchée.
297
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 298
Automatisation des tâches
Sélection de la source de recherche
1 Ouvrez le document.
2 Pour ouvrir le panneau Rechercher, procédez de l’une des manières suivantes :
• Choisissez Fenêtre > Rechercher.
• Choisissez Edition > Rechercher et remplacer.
• Appuyez sur les touches Ctrl+F (Windows) ou Cmde+F (Mac OS).
Remarque : si les fichiers que vous sélectionnez sont verrouillés ou archivés depuis un site Adobe Dreamweaver®,
vous êtes invité à les déverrouiller ou à les extraire avant de continuer.
3 Dans le menu contextuel Rechercher, sélectionnez la source dans laquelle la recherche doit s’effectuer.
4 Dans le menu contextuel Rechercher, sélectionnez l’attribut à rechercher. Définissez les options de l’attribut
Recherche sélectionné.
5 Sélectionnez une option Rechercher et remplacer.
Remarque : lorsque vous remplacez automatiquement des objets dans plusieurs fichiers, ces fichiers sont enregistrés ;
cette opération est irréversible.
Définition des options de recherche/remplacement
dans plusieurs fichiers
Lorsque vous effectuez une recherche et un remplacement dans plusieurs fichiers, indiquez la manière dont Fireworks
traite les fichiers ouverts après la recherche.
1 Dans le menu Options du panneau Rechercher, cliquez sur Options de remplacement.
2 Sélectionnez Enregistrer et fermer les fichiers pour enregistrer et fermer les fichiers après la recherche et le
remplacement.
Seuls les documents déjà actifs restent ouverts.
Remarque : si l’option Enregistrer et fermer les fichiers est désactivée et que vous traitez un grand nombre de fichiers
par lots, Fireworks peut se trouver à court de mémoire et annuler le traitement par lots.
3 Sélectionnez l’une des options Sauvegarder les fichiers originaux suivantes :
Pas de copies Effectue une recherche et un remplacement sans sauvegarder la version originale des fichiers. Le
fichier modifié remplace alors le fichier original.
Ecraser les copies existantes Crée et conserve une seule copie de sauvegarde de chaque fichier modifié par une
opération de recherche/remplacement. Si vous effectuez par la suite de nouvelles opérations de
recherche/remplacement, le fichier original précédent remplace toujours la copie de sauvegarde. Les copies de
sauvegarde sont stockées dans un sous-dossier intitulé Fichiers originaux.
Sauvegardes incrémentielles Conserve toutes les copies de sauvegarde des fichiers modifiés au cours d’opérations
de recherche/remplacement. Les fichiers originaux sont alors déplacés dans le sous-dossier Fichiers originaux du
dossier actuel, et un chiffre incrémentiel est ajouté à la suite de leur nom. Si vous effectuez de nouvelles opérations
de recherche/remplacement, le fichier original est copié dans le dossier Fichiers originaux, et le chiffre supérieur
suivant est ajouté à son nom de fichier. Par exemple, la copie de sauvegarde d’un fichier portant le nom Dessin.png
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 299
Automatisation des tâches
est nommée Dessin-1.png lors de la première opération de recherche/remplacement. La deuxième fois, le fichier de
sauvegarde est renommé Dessin-2.png, etc.
4 Cliquez sur OK.
Recherche et remplacement de texte
1 Dans le panneau Rechercher, sélectionnez l’option Rechercher du texte dans le deuxième menu contextuel.
2 Saisissez le texte à rechercher.
3 Saisissez le texte de remplacement.
4 (Facultatif) Sélectionnez d’autres options pour affiner la recherche.
Recherche et remplacement de polices
1 Dans le panneau Rechercher, sélectionnez l’option Rechercher une police dans le deuxième menu contextuel.
2 Sélectionnez la police et le style à rechercher.
Vous pouvez affiner la recherche en définissant des corps de police minimum et maximum.
3 Indiquez la police de remplacement, son style et son corps.
Recherche et remplacement des couleurs
1 Dans le panneau Rechercher, sélectionnez l’option Rechercher une couleur dans le deuxième menu contextuel.
2 Dans le menu contextuel Appliquer à, sélectionnez un élément pour indiquer comment les couleurs trouvées
doivent être appliquées :
Fonds et contours Permet d’effectuer une opération de recherche/remplacement à la fois sur les couleurs de fond
et de contour.
Toutes les propriétés Permet d’effectuer une opération de recherche/remplacement sur les couleurs de fond, de
contour et d’effet.
Fonds Permet d’effectuer une opération de recherche/remplacement sur une couleur de fond, à l’exception des
fonds à motifs.
Contours Permet d’effectuer une opération de recherche/remplacement sur les couleurs de contour uniquement.
Effets Permet d’effectuer une opération de recherche/remplacement sur les couleurs d’effet uniquement.
Recherche et remplacement d’URL
1 Dans le panneau Rechercher, sélectionnez l’option Rechercher une URL dans le deuxième menu contextuel.
2 Saisissez l’URL à rechercher.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 300
Automatisation des tâches
3 Saisissez l’URL de remplacement.
4 (Facultatif) Sélectionnez d’autres options pour affiner la recherche :
Expressions régulières Permet d’effectuer une recherche conditionnelle sur une partie de mot ou de nombre.
Recherche et remplacement de couleurs non sécurisées
pour le Web
Pour plus d’informations, reportez-vous à la section « Optimisation des fichiers GIF, PNG, TIFF, BMP et PICT » à la
page 244.
Une couleur est sécurisée pour le Web si elle s’affiche de la même façon sur les plates-formes Mac OS et Windows. Une
couleur non sécurisée pour le Web ne figure pas dans la palette de couleurs Web216.
❖ Dans le menu contextuel Rechercher du panneau Rechercher, cliquez sur l’option Rechercher non Web216.
L’option Rechercher non Web216 ne permet pas de rechercher ou remplacer les pixels dans les objets images.
Traitement par lots
Le traitement par lots est très utile pour convertir automatiquement un groupe de fichiers graphiques. Utilisez l’une
des options de traitement par lots :
• 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 des noms des groupes de fichiers par une combinaison quelconque d’ajout de préfixe, d’ajout de
suffixe, de remplacement de sous-chaîne et de remplacement de blancs
• Exécution de commandes sur une sélection de fichiers
Pour plus d’informations, reportez-vous à la section « Définition de l’emplacement d’enregistrement des fichiers de
sauvegarde » à la page 305.
Flux de production de traitement par lots
1 Choisissez Fichier > Traitement par lots, puis sélectionnez les fichiers à traiter.
• Les fichiers peuvent se trouver dans différents dossiers.
• Vous pouvez inclure les documents ouverts dans le lot.
• Vous pouvez enregistrer le script de traitement par lots afin de l’utiliser ultérieurement sans ajouter de fichier.
Remarque : si les fichiers que vous sélectionnez sont verrouillés ou archivés depuis un site Dreamweaver, vous êtes
invité à les déverrouiller ou à les extraire avant de continuer.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 301
Automatisation des tâches
2 Cliquez dans la boîte de dialogue Lot (Windows) ou Traitement par lots (Mac OS) pour sélectionner les fichiers à
ajouter ou supprimer :
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 traitement par lots.
Remarque : les fichiers valides sont les fichiers 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 traitement par lots de continuer. Si
vous n’enregistrez pas le fichier, le traitement par lots est interrompu.
Tout ajouter Ajoute tous les fichiers valides du dossier sélectionné à la liste de fichiers à traiter dans le même lot.
Supprimer Supprime les fichiers sélectionnés de la liste de fichiers à traiter dans le même lot.
3 Pour ajouter tous les fichiers ouverts, sélectionnez Inclure les fichiers ouverts.
Ces fichiers sont inclus dans le traitement, bien qu’ils n’apparaissent pas dans la liste des fichiers à traiter par lots.
4 Cliquez sur Suivant, puis procédez de l’une ou des deux des manières suivantes :
• Pour ajouter une tâche au lot, sélectionnez-la dans la liste Options de traitement par lots, puis cliquez
sur Ajouter.
• Pour réorganiser la liste, sélectionnez la tâche dans la liste Inclure dans le lot, puis cliquez sur les boutons fléchés
Haut et Bas.
Remarque : les tâches Exporter et Renommer sont toujours effectuées en dernier. Les autres tâches sont effectuées
dans l’ordre dans lequel elles apparaissent.
5 Pour voir les options supplémentaires de cette tâche, sélectionnez une tâche dans la liste Inclure dans le lot.
6 Sélectionnez les paramètres de chaque option supplémentaire. Pour supprimer une tâche de la liste, cliquez sur
Supprimer.
7 Cliquez sur Suivant.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 302
Automatisation des tâches
8 Sélectionnez les options relatives à l’enregistrement des fichiers traités :
Sauvegardes Sélectionnez les options de sauvegarde des fichiers d’origine.
Enregistrer le script Enregistre les paramètres de traitement par lots pour une utilisation ultérieure.
Sortie du traitement par lots Exécute le traitement par lots.
A la fin du traitement par lots, un message vous indique si des fichiers ajoutés au lot n’ont pas été traités.
Remarque : un fichier journal nommé FireworksBatchLog.txt est créé pendant le traitement par lots. Le fichier
journal se trouve à l’emplacement suivant :
• \Documents and Settings\<nom_utilisateur>\Application Data\Adobe\Fireworks CS5\FireworksBatchLog.txt
(Windows XP)
• \Utilisateurs\<nom_utilisateur>\AppData\Roaming\Adobe\Fireworks CS5\ FireworksBatchLog.txt (Windows
Vista)
• /Utilisateurs/<nom_utilisateur>/Bibliothèque/Application Support/Adobe Fireworks
CS5/FireworksBatchLog.txt (Mac OS)
Modification des paramètres d’optimisation pendant le traitement par lots
1 Dans la liste Options de traitement par lots, sélectionnez Exporter, puis cliquez sur Ajouter.
2 Dans le menu contextuel Paramètres, sélectionnez l’une des options suivantes, puis cliquez sur OK :
• Sélectionnez Utiliser les paramètres de tous les fichiers afin de conserver les paramètres d’exportation
précédents de chaque fichier pendant le traitement par lots. Par exemple, les fichiers qui résultent du traitement
par lots d’un dossier contenant des fichiers GIF et JPEG demeurent au format GIF ou JPEG. Fireworks utilise la
palette et les paramètres de compression d’origine pour l’exportation de chaque fichier.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 303
Automatisation des tâches
• Sélectionnez la commande Personnaliser ou cliquez sur le bouton Modifier pour modifier les paramètres dans
la boîte de dialogue Aperçu de l’image.
• Sélectionnez un paramètre prédéfini d’exportation, par exemple GIF Web 216 ou JPEG - Qualité supérieure.
Tous les fichiers sont convertis avec ce paramètre.
Modification des noms de fichier pendant le traitement par lots
1 Dans la liste Options de traitement par lots, sélectionnez Renommer, puis cliquez sur Ajouter.
2 Sélectionnez l’option Renommer au bas de la boîte de dialogue Traitement par lots :
Remplacer par Vous permet de remplacer des caractères dans chaque nom de fichier par d’autres caractères que
vous spécifiez ou de supprimer des caractères de chaque nom de fichier. Par exemple, si vous disposez de fichiers
nommés Temp_123.jpg, Temp_124.jpg et Temp_125.jpg, vous pouvez remplacer « Temp_12 » par « Birthday », ce
qui renomme les fichiers respectivement en Birthday3.jpg, Birthday4.jpg et Birthday5.jpg.
Remplacer les blancs par Vous permet de remplacer des blancs dans chaque nom de fichier par un ou plusieurs
caractères que vous spécifiez ou de supprimer tous les blancs de chaque nom de fichier. Vous pouvez, par exemple,
modifier des fichiers nommés Pic nic.jpg et Slap stick.jpg en Picnic.jpg et Slapstick.jpg ou en Pic-nic.jpg et Slapstick.jpg.
Ajouter un préfixe Permet d’entrer 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’entrer un texte à ajouter à la fin du nom de chaque fichier et 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.
Remarque : à chaque nom de fichier modifié, vous pouvez appliquer une combinaison des commandes Remplacer,
Remplacer les blancs par, Ajouter un préfixe et Ajouter un suffixe. Par exemple, vous pouvez remplacer « Temp » par
« Fête », supprimer tous les blancs et ajouter un préfixe et un suffixe en une seule opération.
3 Cliquez sur Suivant pour continuer le traitement par lots.
Mise à l’échelle de graphiques pendant le traitement par lots
1 Dans la liste Options de traitement par lots, sélectionnez Mettre à l’échelle, puis cliquez sur Ajouter.
2 Dans le menu contextuel Echelle, sélectionnez une option de mise à l’échelle :
Pas de mise à l’échelle Exporte les fichiers sans modification.
Mise à l’échelle avec cette taille Permet une mise à l’échelle des images à la largeur et la hauteur spécifiées.
Mise à l’échelle de la zone Permet une mise à l’échelle des images proportionnelle à la largeur et à la hauteur
maximales spécifiées.
Sélectionnez Mise à l’échelle de la zone pour uniformiser un groupe d’images en vignettes de taille égale.
Mise à l’échelle avec ce pourcentage Modifie la taille des images en fonction du pourcentage indiqué.
3 (Facultatif) Si vous sélectionnez Mise à l’échelle de la zone, sélectionnez également l’option Mettre uniquement à
l’échelle les documents dépassant la taille cible.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 304
Automatisation des tâches
Recherche et remplacement pendant le traitement par lots
L’option Remplacement par lots affecte uniquement les formats de fichier suivants : Fireworks PNG, Illustrator et
FreeHand. Elle ne permet pas d’intervenir sur les fichiers GIF et JPEG.
1 Dans la liste Options de traitement par lots, sélectionnez Rechercher et Remplacer, puis cliquez sur Ajouter.
2 Cliquez sur Edition.
3 Sélectionnez le type d’attribut à rechercher et remplacer.
4 Dans la zone Rechercher, entrez ou sélectionnez l’élément spécifique à rechercher.
5 Dans la zone Remplacer par, entrez ou sélectionnez l’élément spécifique de remplacement.
6 Cliquez sur OK pour enregistrer les paramètres de recherche/remplacement.
7 Cliquez sur Suivant pour continuer le traitement par lots.
Utilisation de commandes pour le traitement par lots
Remarque : l’emplacement exact du dossier Commands varie d’un système à un autre. Il dépend également du fait que
le panneau est disponible uniquement pour votre profil utilisateur ou pour tous les utilisateurs. Les dossiers Command
Panels sont situés dans le dossier Configuration du dossier de l’application Fireworks et dans votre dossier Fireworks de
profil utilisateur spécifique.
Exécution des commandes JavaScript pendant le traitement par lots
Remarque : vous ne pouvez pas modifier les commandes.
1 Pour afficher les commandes disponibles, cliquez sur le bouton Plus (+) (Windows) ou sur le triangle (Mac OS) à
côté de l’option Commandes dans la liste Options de traitement par lots.
2 Pour ajouter une commande à la liste Inclure dans le lot, sélectionnez une commande, puis cliquez sur Ajouter.
Remarque : par ailleurs, certaines commandes ne peuvent fonctionner pendant un traitement par lots. Sélectionnez
des commandes pouvant être exécutées dans le document sans qu’il soit nécessaire de sélectionner un objet.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 305
Automatisation des tâches
Définition de l’emplacement d’enregistrement des fichiers de sauvegarde
Les copies de sauvegarde des fichiers sont placées dans un sous-dossier intitulé Fichiers originaux du dossier de chaque
fichier original.
1 Sélectionnez l’emplacement du dossier de sortie du traitement par lots.
2 Sélectionnez Sauvegardes pour définir vos options de sauvegarde.
3 Sélectionnez 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 nouvelle copie de sauvegarde.
Remarque : si l’option Sauvegardes n’est pas activée, le traitement par lots écrase le fichier initial si le fichier de sortie
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 initial n’est ni déplacé ni effacé.
Traitements par lots sous forme de scripts
Si vous enregistrez votre script dans le dossier Commands de votre disque dur, il est ensuite ajouté dans le
menu Commandes de Fireworks.
Création d’un script de traitement par lots
1 Cliquez sur Enregistrer le script.
2 Entrez le nom et la destination du script.
Remarque : l’emplacement exact de ce dossier varie. Les dossiers Commands sont situés dans le dossier Configuration
du dossier de l’application Fireworks et dans votre dossier Fireworks de profil utilisateur spécifique.
3 Cliquez sur Enregistrer.
Exécution d’un script de traitement par lots
1 Procédez de l’une des manières suivantes :
• Dans Fireworks, choisissez Commandes > Exécuter un script.
• En dehors de Fireworks, cliquez deux fois sur le nom de fichier du script enregistré sur le disque dur.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 306
Automatisation des tâches
2 Sélectionnez un script, puis cliquez sur Ouvrir.
Glisser-déposer des scripts fréquemment utilisés
1 Enregistrez un script.
2 Procédez de l’une des manières suivantes :
• Faites glisser l’icône du fichier de script vers l’icône de bureau Fireworks.
• Faites glisser l’icône du fichier de script dans un document Fireworks ouvert.
Remarque : si vous faites glisser plusieurs fichiers de scripts et plusieurs fichiers graphiques sur l’icône de Fireworks,
les fichiers graphiques sont traités plusieurs fois, une fois pour chaque script.
Extension de Fireworks
Une extension désigne un script de commandes, un panneau de commandes, une bibliothèque, un filtre, un motif, une
texture ou une forme automatique, qui complète les fonctionnalités de Fireworks. Fireworks est livré avec Adobe
Extension Manager, un programme qui permet d’installer, de gérer et de supprimer aisément des extensions. Le menu
Commandes propose plusieurs extensions par défaut.
Si vous maîtrisez JavaScript, vous pouvez créer vos propres extensions Fireworks. Vous pouvez également utiliser
l’architecture Fireworks Cross Product Communication pour permettre aux applications écrites en ActionScript™
et C++ de contrôler Fireworks. Pour plus d’informations, consultez l’Aide Extension de Fireworks.
Lorsque vous installez ou créez des extensions, notez les points suivants :
• Lorsque vous installez une extension ou créez une commande personnalisée, Fireworks la place dans le
menu Commandes.
• Les extensions tierces sont stockées dans des sous-dossiers du dossier Configuration, dans le dossier de l’application
Fireworks.
• Les commandes stockées dans le dossier Command Panels en tant que fichiers SWF sont disponibles sous forme
de panneaux dans le menu Fenêtre.
• Les commandes que vous créez et enregistrez à l’aide du panneau Historique sont stockées dans votre dossier
utilisateur Commands.
• Pour plus d'informations concernant les extensions de Fireworks, consultez l'aide d'Extension Manager et le site de
Fireworks Exchange www.adobe.com/go/learn_fw_exchange_fr.
Ouverture d’Extension Manager depuis Fireworks
❖ Procédez de l’une des manières suivantes :
• Choisissez Commandes > Gérer les extensions.
• Choisissez Aide > Gérer les extensions.
Création d'un fichier MXP pour les actifs
1 Créez un fichier MXI. Vous pouvez utiliser une copie du fichier MXI en tant que modèle dans le dossier Adobe
Extension Manager CS5. Pour des exemples de fichiers MXI, consultez les fichiers MXI du dossier Configuration
sou l'emplacement d'installation d'Adobe Fireworks CS5.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 307
Automatisation des tâches
2 Dans la balise <files>, effectuez ce qui suit :
a Dans l'attribut <filename>, spécifiez le nom des fichiers qui sont présents localement et doivent être inclus dans
le package MXP.
b Dans l'attribut <destination>, spécifiez l'emplacement de l'ordinateur de l'utilisateur où les fichiers doivent
être installés.
3 Choisissez Commandes > Gérer les extensions.
4 Dans Adobe Extension Manager, sélectionnez Fichier > Extension MXP du package.
5 Sélectionnez le fichier MXI.
6 Spécifiez un emplacement pour le fichier MXP.
7 Double-cliquez sur le fichier MXP créé à l'emplacement spécifié. Les fichiers mentionnés dans le fichier MXI sont
ajoutés à l'emplacement spécifié dans le fichier.
Par exemple, si vous souhaitez ajouter un ensemble de fichiers STL dans Fireworks, spécifiez l'emplacement des
fichiers STL sous la forme $Fireworks\First Run\Styles dans le fichier MXI. Lorsque vous exécutez un fichier
MXP créé au moyen d'un fichier MXI, les fichiers STL sont installés à cet emplacement. Les Styles sont accessibles au
moyen du panneau Styles dans Fireworks après avoir fermé, puis activé à nouveau l'application.
Scripts
Création de scripts avec le panneau Historique
Le panneau Historique enregistre la liste de toutes vos actions dans Fireworks. Chaque étape est stocké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.
Vous pouvez enregistrer des groupes d’étapes dans le panneau Historique sous forme de commandes réutilisables. Les
commandes enregistrées ne sont pas propres à un document en particulier. Vous pouvez ainsi les utiliser dans tout
document Fireworks.
Les commandes enregistrées sont stockées en tant que fichiers JSF dans le dossier Commands de votre dossier
Fireworks de profil utilisateur spécifique.
Vous pouvez à tout moment exécuter des commandes ou une sélection d’actions enregistrées dans le
panneau Historique.
Enregistrement d’étapes en tant que commande à réutiliser
1 Sélectionnez les étapes à enregistrer sous forme de commande :
• Cliquez sur une étape, puis maintenez la touche Maj enfoncée et cliquez sur une autre étape pour sélectionner
une série d’étapes à enregistrer comme commande.
• Cliquez tout en maintenant la touche Ctrl (Windows) ou Cmde (Mac OS) enfoncée pour sélectionner des étapes
non contiguës.
2 Cliquez sur le bouton Enregistrer les étapes sous forme de commande, en bas du panneau Historique.
3 Indiquez le nom de la commande, puis cliquez sur OK.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 308
Automatisation des tâches
Annulation ou restauration d’étapes
❖ Procédez de l’une des manières suivantes :
• Faites glisser le marqueur d’annulation vers le haut du panneau jusqu’à la dernière étape à annuler ou à répéter.
• Cliquez sur la piste du curseur dans la partie gauche du panneau Historique.
Remarque : les étapes annulées restent dans le panneau Historique, mais elles apparaissent grisées.
Modification du nombre d’étapes mémorisées par le panneau Historique
1 Cliquez sur Edition > Préférences (Windows) ou Fireworks > Préférences (Mac OS).
2 Modifiez la valeur de l’option Nombre max. d’actions annulées.
Remarque : plus ce nombre d’étapes est élevé, plus la mémoire vive de l’ordinateur est sollicitée.
Effacement de toutes les étapes
❖ Dans le menu Options du panneau Historique, cliquez sur Effacer l’historique.
Effacer des étapes permet de libérer de la mémoire et de l’espace sur le disque dur. Vous ne pouvez pas annuler des
modifications apportées à des étapes effacées.
Nouvelle exécution d’une commande enregistrée
1 Si nécessaire, sélectionnez un ou plusieurs objets.
2 Dans le menu Commandes, sélectionnez la commande.
Réexécution d’une sélection d’étapes
1 Sélectionnez un ou plusieurs objets.
2 Dans le panneau Historique, sélectionnez les étapes.
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 réexécutées. Des lignes de séparation indiquent qu’un
objet différent a été sélectionné. Les commandes créées à partir d’étapes qui traversent une ligne de séparation
peuvent produire des résultats imprévisibles.
Application d’étapes sélectionnées à des objets dans de nombreux documents
1 Sélectionnez une plage d’étapes.
2 Cliquez sur le bouton Copier les étapes dans le Presse-papiers.
3 Sélectionnez un ou plusieurs objets dans un document Fireworks.
4 Choisissez Edition > Coller.
Répétition de la dernière étape
❖ Choisissez Edition > Répéter le script de commandes.
A propos de la création de scripts à l’aide de JavaScript
Pour réduire l’aspect fastidieux de certaines tâches répétitives, créez 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. Dreamweaver utilise également JavaScript. Vous pouvez donc créer des scripts pour contrôler
Fireworks depuis Dreamweaver.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 309
Automatisation des tâches
Pour consulter la documentation sur l’API JavaScript, reportez-vous à la section Extension de Fireworks.
Création de commandes et de panneaux avec Flash
Pour créer vos propres commandes ou panneaux Fireworks, créez des séquences SWF contenant du code JavaScript à
l’aide d’Adobe Flash®. Enregistrez les séquences utilisées en tant que commandes dans le dossier Commands de votre
disque dur. Enregistrez les séquences utilisées en tant que panneaux dans le dossier Command Panels (par exemple, le
panneau Alignement).
Remarque : l’emplacement exact de ces dossiers varie. Les dossiers Commands et Command Panels sont situés dans le
dossier Configuration de l’application Fireworks et dans votre dossier Fireworks de profil utilisateur spécifique.
Gestion des commandes
Remarque : vous pouvez renommer ou supprimer des commandes que vous avez créées à l’aide de l’option Gérer les
commandes enregistrées de Fireworks. Utilisez Extension Manager pour gérer les autres commandes et extensions
installées avec Fireworks ou celles que vous avez téléchargées puis installées à partir du site Web Adobe Exchange.
Modification du nom d’une commande personnalisée
1 Sélectionnez Commandes > Gérer les commandes enregistrées, puis sélectionnez une commande.
2 Cliquez sur Renommer, entrez un nouveau nom, puis cliquez sur OK.
Suppression d’une commande personnalisée
❖ Procédez de l’une des manières suivantes :
• Dans Fireworks, choisissez la commande Commandes > Gérer les commandes enregistrées. Sélectionnez
ensuite la commande, puis cliquez sur Supprimer.
• Sur votre disque dur, supprimez le fichier JSF associé à la commande dans le dossier Commands de votre dossier
Fireworks de profil utilisateur spécifique.
Remarque : pour renommer ou supprimer une commande fournie avec Fireworks ou téléchargée à partir d’Adobe
Exchange, ouvrez Extension Manager.
Edition d’une commande à l’aide de JavaScript
Les scripts de commandes sont enregistrés en tant que code JavaScript et peuvent être modifiés à l’aide de tout éditeur
de texte.
1 A partir du bureau, localisez le dossier Commands ou Command Panels approprié sur le disque dur.
2 Ouvrez le fichier de script dans un éditeur de texte, puis modifiez le code JavaScript.
3 Enregistrez le script, puis fermez-le.
Edition d’actions sélectionnées dans le panneau Historique à l’aide de
JavaScript
1 Sélectionnez une plage d’étapes dans le panneau Historique de Fireworks.
2 Cliquez sur le bouton Copier les étapes dans le Presse-papiers, en bas du panneau Historique.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 310
Automatisation des tâches
3 Créez un document dans un éditeur de texte.
4 Collez les étapes dans le nouveau document texte, puis apportez-y les modifications nécessaires.
5 Enregistrez le script, puis fermez-le.
6 Copiez le script dans le dossier Commands du disque dur.
• Les commandes enregistrées directement dans le dossier Commands ou le panneau Historique apparaissent
instantanément dans le menu Commandes.
• Les commandes enregistrées dans le dossier Command Panels sont disponibles dans le menu Fenêtre
uniquement après le redémarrage de Fireworks.
Dernière mise à jour le 29/4/2010
Chapitre 20 : Préférences et raccourcis
clavier
Dans Fireworks, les paramètres de préférences vous permettent de contrôler la présentation générale de l’interface
utilisateur et de personnaliser certains aspects de l’édition et de l’utilisation des dossiers. Vous pouvez également
personnaliser les raccourcis clavier.
Définition des préférences
1 Choisissez Edition > Préférences (Windows) ou Fireworks > Préférences (Mac OS).
2 Sélectionnez la catégorie de préférences que vous souhaitez modifier.
3 Apportez les modifications requises, puis cliquez sur OK.
Préférences générales
Options du document Pour ouvrir l’application directement dans l’espace de travail, désélectionnez Afficher l’écran
de démarrage. Pour conserver les dimensions de contour et d’effets lorsque vous redimensionnez des objets,
désélectionnez Mise à l’échelle des contours et des effets.
Enregistrement des fichiers : Ajouter des icônes d’aperçu (Mac OS uniquement) Permet d’afficher ou de masquer les
vignettes des fichiers PNG Fireworks présents sur le disque dur. Lorsque cette option est désélectionnée, Fireworks
affiche l’icône standard des fichiers PNG Fireworks. Les modifications sont appliquées une fois la sauvegarde du
fichier effectuée.
Nombre d’annulations maximal Permet de définir un nombre d’étapes d’annulation/de rétablissement compris
entre 0 et 1 009. Ce paramètre s’applique à la fois à la commande Edition > Annuler et au panneau Historique. Un
nombre d’étapes élevé peut solliciter davantage de mémoire.
Interpolation Choisissez l’une des quatre méthodes de mise à l’échelle utilisées par Fireworks pour interpoler les pixels
lors des mises à l’échelle d’images :
• L’interpolation bicubique, méthode par défaut, produit les résultats les plus nets et de la meilleure qualité dans la
plupart des cas.
• L’interpolation bilinéaire permet d’obtenir des résultats plus nets que l’interpolation adoucie, mais moins nets que
l’interpolation bicubique.
• L’interpolation adoucie, qui était utilisée par Fireworks 1, produit un léger flou et élimine les détails nets. Elle est
utile lorsque les autres produisent des artefacts.
• L’interpolation au plus proche produit des bords dentelés avec des contrastes marqués sans flou. L’effet est
semblable à celui du zoom avant ou arrière sur une image.
Couleurs par défaut Sélectionnez les couleurs par défaut utilisées pour les contours, les fonds et les tracés en
surbrillance. Les options Contour et Fond ne modifient pas automatiquement les couleurs dans le panneau Outils. Ces
options permettent de modifier les couleurs par défaut du panneau Outils.
Espace de travail Pour réduire automatiquement des panneaux ancrés lorsque vous cliquez hors de ces derniers,
sélectionnez l’option Réduire automatiquement les panneaux d’icône.
311
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 312
Préférences et raccourcis clavier
Préférences de modification
Les préférences de modification agissent sur l’aspect du pointeur et les indicateurs visuels pour les objets bitmap.
Supprimer les objets pendant le recadrage Supprime définitivement les pixels ou les objets situés en dehors du cadre
de sélection lorsque vous recadrez un document ou que vous redimensionnez l’espace de travail. Cette option est
uniquement valide pour les objets bitmap.
Supprimer les tracés lors de la conversion en rectangle de sélection Supprime définitivement le tracé une fois qu’il a
été converti en cadre de sélection.
Curseurs de la taille du pinceau Définit la taille et le format des pointeurs des outils. 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, le curseur affiche l’icône des différents outils.
Curseurs précis Permet de remplacer les pointeurs des différents outils par un pointeur en croix.
Désactiver "Masquer les bords" Désactive l’option Masquer les bords lorsque la sélection change.
Afficher l’aperçu de l’outil Plume Fournit un aperçu du segment de tracé suivant que vous allez créer d’un clic avec
l’outil Plume.
Points pleins Affiche les points sélectionnés en grisé ; les points désélectionnés sont pleins.
Surbrillance souris Met en surbrillance les éléments sélectionnés en cliquant avec le bouton de la souris.
Aperçu du glissement Affiche l’aperçu du nouvel emplacement d’objet lors d’une opération de glissement.
Afficher les poignées du fond Permet de modifier les fonds à l’écran.
Choisir la distance Spécifie la distance (de 1 à 10 pixels) à respecter entre un objet et le pointeur pour pouvoir effectuer
la sélection.
Mise à l’échelle en 9 tranches Dissocie automatiquement les formes automatiques lorsque vous utilisez l’outil Mise à
l’échelle en 9 tranches sans afficher la boîte de dialogue de confirmation pour dissocier ces formes.
Préférences de repères et de grilles
Cases de couleur Cliquez dessus pour afficher une fenêtre contextuelle dans laquelle sélectionner une couleur affichée
ou saisir les valeurs hexadécimales correspondantes.
Afficher Affiche les repères ou les grilles sur la zone de travail.
Magnétisme Accroche des objets aux repères ou au quadrillage de la grille.
Verrouiller Verrouille les repères déjà positionnés pour éviter tout déplacement accidentel pendant la modification
d’objets.
Distance de magnétisme Détermine la distance (de 1 à 10 pixels) à partir de laquelle l’objet que vous déplacez
s’accroche à la grille ou au repère. L’option Distance de magnétisme est disponible lorsque l’option Accrocher aux
grilles ou Accrocher aux repères est sélectionnée.
Paramètres de la grille Modifie la taille (en pixels) des cellules d’une grille. Entrez des valeurs dans les zones
d’espacement horizontal et vertical.
Préférences de texte
Interlignage, décalage vertical Modifie la valeur d’incrément des raccourcis clavier associés.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 313
Préférences et raccourcis clavier
Pour créer une liste complète de raccourcis relatifs au texte, reportez-vous à la section « Création d’un feuille de
référence pour le jeu de raccourcis actuel » à la page 316.
Afficher les noms de police en anglais Remplace les caractères asiatiques dans les menus de police.
Remarque : cette modification n’est prise en compte qu’après avoir redémarré Fireworks.
Taille d’aperçu de la police Indique la taille du point des exemples de police proposés dans les menus.
Nombre de polices récentes Détermine le nombre maximal de polices utilisées récemment, répertoriées au-dessus de
la séparation dans les menus de polices.
Remarque : cette modification n’est prise en compte qu’après avoir redémarré Fireworks.
Police par défaut Désigne la police de substitution utilisée pour les polices du document qui font défaut à votre
système.
Préférences d’importation et d’ouverture de fichiers Photoshop
Ces préférences déterminent le comportement de Fireworks lorsque vous importez ou ouvrez des fichiers Photoshop.
Pour plus d’informations, reportez-vous à la section « Utilisation de Photoshop » à la page 284.
Afficher la boîte de dialogue d’importation Affiche les options disponibles lors des importations de fichiers PSD
effectuées à l’aide de la commande Fichier > Importer.
Afficher la boîte de dialogue d’ouverture Affiche les options disponibles lorsque vous faites glisser des fichiers PSD
dans Fireworks ou que vous utilisez la commande Fichier > Ouvrir.
Utiliser les calques entre les états Ajoute chaque calque importé à tous les états du fichier Fireworks. Si cette option
n’est pas sélectionnée, Fireworks ajoute chaque calque dans un état distinct. Cette option est utile lorsque vous
importez des fichiers que vous souhaitez utiliser en tant qu’animations.
Images bitmap avec effets modifiables Permet de modifier les effets des images bitmap lors de l’importation. Vous ne
pouvez pas modifier les images bitmap.
Images bitmap fusionnées Importe les images bitmap et leurs effets sous la forme d’images fusionnées que vous ne
pouvez pas modifier.
Texte modifiable Importe les calques de texte sous la forme de texte éditable. Dans Fireworks, vous ne pouvez pas
modifier la mise en forme du texte (barré, exposant, indice et trait d’union automatique par exemple). De même, vous
ne pouvez pas séparer les ligatures du texte source.
Images bitmap fusionnées Importe les calques de texte sous la forme d’images fusionnées que vous ne pouvez pas
modifier.
Tracés et effets modifiables Permet de modifier les calques de formes et leurs effets associés.
Images bitmap fusionnées Importe les calques de formes sous la forme d’images fusionnées que vous ne pouvez pas
modifier.
Images bitmap fusionnées avec effets modifiables Importe les calques de formes sous la forme d’images fusionnées
tout en permettant la modification des effets qui leur sont associés.
Effets de calques Remplace les effets dynamiques Photoshop par des filtres Fireworks similaires.
Masques de tracé d’écrêtage Pixellise et supprime les masques d’écrêtage tout en conservant l’aspect. Désélectionnez
cette option si vous souhaitez modifier ces masques dans Fireworks. Cependant, leur aspect est différent par rapport à
Photoshop.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 314
Préférences et raccourcis clavier
Préférences de lancement et de modification
Les préférences Lancer et Modifier déterminent la façon dont les applications lancent et retouchent les graphiques
dans Fireworks.
1 Choisissez l’un des menus contextuels suivants :
Lors de la modification d’un document à partir d’une application externe Détermine si le fichier PNG Fireworks
d’origine s’affiche lorsque vous utilisez Fireworks pour retoucher des images dans d’autres applications.
Lors de l’optimisation d’un document à partir d’une application externe Détermine si le fichier PNG Fireworks
d’origine s’affiche lorsque vous optimisez un graphique. Ce paramètre ne s’applique pas à Director, qui affiche et
optimise automatiquement un graphique sans demander de spécifier le fichier source PNG, même si cette
préférence est définie différemment dans Fireworks.
2 Indiquez la façon dont vous souhaitez modifier les images Fireworks placées dans des applications externes :
Toujours utiliser le format PNG source Ouvre automatiquement le fichier PNG Fireworks défini dans la Design
Note comme source de l’image importée. Des mises à jour sont effectuées dans le fichier source PNG ainsi que dans
l’image placée correspondante.
Ne jamais utiliser le fichier PNG source Ouvre automatiquement l’image Fireworks importée, qu’il existe ou non un
fichier PNG source. Les mises à jour ne s’appliquent qu’à l’image placée.
Demander lors du lancement Vous permet de spécifier à chaque fois si le fichier source PNG doit être ouvert.
Lorsque vous modifiez ou optimisez une image importée, vous devez décider du type d’image à lancer et à modifier.
Vous pouvez également définir des préférences de lancement et de modification globales depuis cette invite.
Préférences des modules externes
Ces préférences vous permettent d’accéder à d’autres modules externes, fichiers de texture et fichiers de motifs
d’Adobe Photoshop. Les dossiers cibles peuvent se trouver sur votre disque dur, un CD-ROM, un disque dur externe
ou un volume réseau.
Les modules externes Photoshop figurent dans le menu Filtres de Fireworks et dans le menu Ajouter des effets de
l’inspecteur des 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 contextuels Motif et Texture dans l’inspecteur des propriétés.
Pour plus d’informations sur les textures et les motifs, reportez-vous à la section « Ajout d’une texture à un contour
ou à un fond » à la page 128.
Restauration des préférences par défaut
1 Quittez Fireworks.
2 Localisez le fichier de préférences de Fireworks sur le disque dur, puis supprimez-le.
L’emplacement exact de ce fichier varie d’un système à un autre. Voir « Localisation du fichier de préférences
Fireworks » à la page 317.
3 Relancez Fireworks.
Lors du prochain lancement de Fireworks, un nouveau fichier de préférences sera créé ; il permettra de restaurer la
configuration d’origine de Fireworks.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 315
Préférences et raccourcis clavier
Sélection et personnalisation des raccourcis clavier
Le programme Fireworks permet d’utiliser des raccourcis clavier pour sélectionner des commandes de menu,
sélectionner des outils dans le panneau Outils et accélérer différentes tâches qui n’existent pas en tant que commandes
de menu. Si vous avez l’habitude d’utiliser les raccourcis clavier d’applications comme Adobe FreeHand, Adobe
Illustrator et Photoshop ou de produits utilisant une norme différente, vous pouvez choisir le jeu de raccourcis de votre
choix.
Sélection d’un jeu de raccourcis clavier
1 Choisissez la commande Edition > Raccourcis clavier (Windows) ou Fireworks > Raccourcis clavier (Mac OS).
2 Dans le menu contextuel Jeu actif, sélectionnez le jeu de raccourcis souhaité, puis cliquez sur OK.
Création de raccourcis personnalisés et secondaires
Vous pouvez créer des raccourcis clavier personnalisés à partir d’un jeu préinstallé et créer des raccourcis secondaires
représentatifs de différentes méthodes d’exécution d’une action.
Les raccourcis clavier, à l’exception des commandes de menu, ne peuvent pas inclure de touches de modification : Ctrl,
Maj et Alt (Windows) ou Cmde, Maj, Option et Ctrl (Mac OS). Ils doivent se limiter à une lettre ou une touche
numérique.
1 Choisissez la commande Edition > Raccourcis clavier (Windows) ou Fireworks > Raccourcis clavier (Mac OS).
2 Cliquez sur le bouton Dupliquer ensemble.
3 Saisissez le nom du jeu personnalisé, puis cliquez sur OK.
4 Dans la liste Commandes, sélectionnez la catégorie de raccourci appropriée :
Commandes de menu Commandes accessibles depuis la barre de menus
Outils Tous les outils du panneau Outils
Divers Série d’actions prédéfinies
5 Dans la liste Commandes, sélectionnez la commande dont vous souhaitez modifier le raccourci.
6 Cliquez dans la zone de texte Appuyer sur la touche, et appuyez sur les touches souhaitées pour définir le nouveau
raccourci sur le clavier.
7 Pour ajouter un raccourci secondaire à la liste des raccourcis, cliquez sur le bouton Ajouter un raccourci (+). Sinon,
cliquez sur Changer pour remplacer le raccourci sélectionné.
Suppression de raccourcis personnalisés et de jeux de raccourcis
Suppression d’un jeu de raccourcis personnalisé
1 Choisissez la commande Edition > Raccourcis clavier (Windows) ou Fireworks > Raccourcis clavier (Mac OS).
2 Cliquez sur le bouton Supprimer l’ensemble (icône de la corbeille).
3 Sélectionnez un jeu de raccourcis clavier.
4 Cliquez sur le bouton Supprimer.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 316
Préférences et raccourcis clavier
Suppression d’un raccourci personnalisé
1 Dans la liste Commandes, sélectionnez la commande.
2 Dans la liste Raccourcis, sélectionnez le raccourci personnalisé.
3 Cliquez sur le bouton Supprimer un raccourci sélectionné (-).
Création d’un feuille de référence pour le jeu de raccourcis actuel
Une feuille de référence est un enregistrement de l’ensemble de raccourcis actif qui est stocké sous forme de
table HTML. Vous pouvez afficher cette feuille de référence avec un navigateur Web ou l’imprimer.
Remarque : les feuilles de référence exportées depuis Fireworks sont codées à l’aide du codage UTF-8.
1 Choisissez la commande Edition > Raccourcis clavier (Windows) ou Fireworks > Raccourcis clavier (Mac OS).
2 Cliquez sur le bouton Exporter l’ensemble en tant que code HTML à côté de la zone de texte Jeu actif.
3 Entrez le nom de la feuille de référence, puis sélectionnez un emplacement de fichier.
4 Cliquez sur Enregistrer.
Utilisation des fichiers de configuration
Les fichiers de configuration spécifiques à l’utilisateur vous permettent de personnaliser certaines fonctions Fireworks,
telles que les styles, les raccourcis clavier et les commandes, sans modifier la configuration de Fireworks pour les autres
utilisateurs.
Fireworks installe également les fichiers de configuration maîtres.
Remarque : pour rendre visibles les fichiers de configuration, vérifiez que les options d’affichage des dossiers sont définies
de manière à afficher tous les fichiers et dossiers. Sur certains systèmes, vous devez cliquer sur l’option Afficher les fichiers
dans un dossier afin d’en afficher le contenu. Pour plus d’informations sur l’affichage de tous les fichiers et dossiers,
consultez l’Aide de Windows.
A propos des fichiers de profil utilisateur
Pour chaque utilisateur, Fireworks crée un ensemble de fichiers de configuration distinct. Ces fichiers sont stockés
dans le dossier Adobe/Fireworks CS5 de votre dossier de profil utilisateur Application Data (Windows) ou
Application Support (Mac OS). L’emplacement de ce dossier varie en fonction du système d’exploitation et selon que
vous utilisez un système multiutilisateur ou un système autonome. Pour plus d’informations sur l’emplacement de ce
dossier, consultez la documentation de votre système d’exploitation.
Remarque : sur les systèmes localisés et personnalisés, les noms de certains dossiers système peuvent être différents.
A propos des fichiers de configuration maître appliqués à tous les utilisateurs
Ces fichiers contiennent les paramètres de configuration par défaut de Fireworks et s’appliquent à tous les utilisateurs.
Ils se trouvent dans le dossier de l’application Fireworks, qui correspond au dossier d’installation de Fireworks sur
votre disque dur.
Remarque : les utilisateurs Mac OS doivent connaître le concept du nouveau logiciel d’Apple.
Dernière mise à jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 317
Préférences et raccourcis clavier
Fireworks modifie les fichiers de configuration spécifiques à l’utilisateur mais pas les fichiers de configuration maîtres
lors de l’enregistrement de la plupart des paramètres, car de nombreux utilisateurs n’ont pas accès à tous les fichiers
sur les systèmes multi-utilisateur.
Les utilisateurs disposant des autorisations d’accès de niveau administrateur peuvent personnaliser des fonctions pour
tous les autres utilisateurs en modifiant les fichiers de configuration maîtres.
Sauvegarde d’un fichier de configuration maître pour tous les utilisateurs
❖ Enregistrez ou faites glisser une copie du fichier à l’emplacement approprié dans le dossier de l’application
Fireworks.
Localisation du fichier de préférences Fireworks
Les préférences Fireworks sont stockées dans un fichier appelé Fireworks CS5 Preferences.txt (Windows) ou
Fireworks CS5 Preferences (Mac OS). L’emplacement de ce fichier varie en fonction du système d’exploitation.
• Sous Windows, les préférences sont enregistrées dans votre dossier Fireworks de profil utilisateur spécifique.
• Sous Mac OS, elles se trouvent dans le dossier Bibliothèque/Préférences de votre dossier utilisateur. Pour plus
d’informations sur l’emplacement de votre dossier utilisateur sous Mac OS, consultez l’Aide d’Apple.
Remarque : sous Mac OS, les fichiers de configuration Fireworks spécifiques à l’utilisateur se trouvent pour la plupart
dans votre dossier de profil utilisateur Application Support, à l’exception du fichier de préférences de Fireworks CS5.
A propos de la réinstallation de Fireworks
Lorsque vous désinstallez ou réinstallez Fireworks, vos fichiers de configuration spécifiques à l’utilisateur restent
intacts sur la plupart des systèmes. Si vous réinstallez Fireworks avec les paramètres par défaut, supprimez
manuellement vos fichiers de configuration spécifiques à l’utilisateur avant de réinstaller l’application.
Si vous supprimez le fichier de préférences et les fichiers de configuration spécifiques à l’utilisateur au cours de la
désinstallation, ces fichiers sont supprimés pour tous les utilisateurs du système.
Affichage du contenu du module (Mac OS uniquement)
Sous Mac OS, Fireworks est installé sous la forme d’un module d’application 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é.
1 Localisez le dossier d’installation de Fireworks sur le disque dur.
2 Cliquez sur l’icône Fireworks CS5 tout en maintenant la touche Ctrl enfoncée, puis sélectionnez Afficher le
contenu du module.
">