Mode d'emploi | Adobe Fireworks CS5 Manuel utilisateur

Ajouter à Mes manuels
323 Des pages
Utilisation
d’ADOBE&reg; FIREWORKS&reg; CS5
Derni&egrave;re mise &agrave; jour le 29/4/2010
&copy;2010 Adobe Systems Incorporated and its licensors. All rights reserved.
Copyright
Utilisation d’Adobe&reg; Fireworks&reg; CS5 sous Windows&reg; 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 &copy; Copyright 1990. The Proximity/Franklin Electronic Publishers Database &copy; Copyright 1994. &copy; Copyright
1990, 1994, 1997 All Rights Reserved. Proximity Technology Inc.
This Program was written with MacApp&reg;: &copy;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&reg; colors displayed here may not match PANTONE-identified standards. Consult current PANTONE Color Publications for accurate color.
PANTONE&reg; and other Pantone, Inc. trademarks are the property of Pantone, Inc. &copy; 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. &copy; 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. &sect;2.101, consisting of
“Commercial Computer Software” and “Commercial Computer Software Documentation,” as such terms are used in 48 C.F.R. &sect;12.212 or 48 C.F.R. &sect;227.7202,
as applicable. Consistent with 48 C.F.R. &sect;12.212 or 48 C.F.R. &sect;&sect;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&egrave;re mise &agrave; jour le 29/4/2010
Sommaire
Chapitre 1 : Nouveaut&eacute;s
Meilleures performances et stabilit&eacute; accrue
Pr&eacute;cision des pixels
............................................................................ 1
.................................................................................................... 1
Int&eacute;gration d'Adobe Device Central
.................................................................................... 1
Flux de travail pris en charge avec Flash Catalyst et Flash Builder
Am&eacute;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&eacute;ation d’un document Fireworks
Mod&egrave;les
..................................................................................... 5
.............................................................................................................. 6
Ouverture et importation de fichiers
................................................................................... 6
Cr&eacute;ation de fichiers PNG Fireworks &agrave; 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&ccedil;u dans navigateur
............................................................ 8
........................................................................ 8
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
Annulation et r&eacute;p&eacute;tition de plusieurs actions
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
Chapitre 4 : S&eacute;lection et transformation d’objets
S&eacute;lection des objets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
Modification d’une s&eacute;lection
S&eacute;lection de pixels
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
Edition d’objets s&eacute;lectionn&eacute;s
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
Mise &agrave; l’&eacute;chelle en 9 tranches
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
Organisation de plusieurs objets
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
Chapitre 5 : Utilisation d’images bitmap
Cr&eacute;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&eacute;nuation et accentuation des images bitmap
Ajout de bruit &agrave; une image
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
Chapitre 6 : Utilisation des objets vectoriels
Formes simples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
formes automatiques
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78
UTILISATION DE FIREWORKS CS5 iv
Derni&egrave;re mise &agrave; jour le 29/4/2010
Formes libres
Sommaire
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
Formes compos&eacute;es
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88
Techniques sp&eacute;cifiques de retouche vectorielle
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89
Chapitre 7 : Utilisation du texte
Entr&eacute;e de texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
S&eacute;lection de texte
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98
Mise en forme et &eacute;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&eacute;ation et modification de tranches . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173
Tranches interactives
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178
Pr&eacute;paration des tranches pour l’exportation
Zones sensibles et cartes-images
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188
Chapitre 13 : Cr&eacute;ation de boutons et de menus contextuels
Principes de base de la navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193
Cr&eacute;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&eacute;ation de dispositions CSS
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211
Prototypage d’applications Flex
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213
Prototypage d’applications Adobe AIR
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216
UTILISATION DE FIREWORKS CS5 v
Derni&egrave;re mise &agrave; jour le 29/4/2010
Sommaire
Chapitre 15 : Cr&eacute;ation d’animations
Notions de base sur les animations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218
Cr&eacute;ation de symboles d’animation
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219
Modification de symboles d’animation
Etats
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221
Utilisation des &eacute;tats
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224
A propos des pelures d’oignon
Interpolation
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226
Pr&eacute;visualisation d’une animation
Optimisation d’une animation
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227
Utilisation d’animations existantes
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 228
Cr&eacute;ation d’animations Torsion et Nuance
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 229
Chapitre 16 : Cr&eacute;ation de diaporamas
Cr&eacute;ation et organisation d’un diaporama
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231
Personnalisation d’un diaporama
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 232
Cr&eacute;ation d’un lecteur Fireworks personnalis&eacute;
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 234
Chapitre 17 : Optimisation et exportation
Utilisation de l’assistant Exportation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 237
Utilisation de l’aper&ccedil;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&egrave;ce jointe d’un message &eacute;lectronique
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265
Chapitre 18 : Utilisation de Fireworks avec d’autres applications
Utilisation de Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 266
Utilisation de HomeSite, GoLive et d’autres &eacute;diteurs HTML
Utilisation de Flash
Utilisation d’Illustrator
Utilisation de Photoshop
Utilisation de Director
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 275
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 276
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 282
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 284
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 289
Partage de m&eacute;tadonn&eacute;es d’image avec Adobe XMP
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 292
Aper&ccedil;u de documents Fireworks dans des &eacute;mulateurs mobiles
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 295
Chapitre 19 : Automatisation des t&acirc;ches
Recherche et remplacement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 297
S&eacute;lection de la source de recherche
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 298
D&eacute;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&eacute;curis&eacute;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&egrave;re mise &agrave; jour le 29/4/2010
Extension de Fireworks
Scripts
Sommaire
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 306
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 307
Gestion des commandes
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 309
Chapitre 20 : Pr&eacute;f&eacute;rences et raccourcis clavier
D&eacute;finition des pr&eacute;f&eacute;rences . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 311
S&eacute;lection et personnalisation des raccourcis clavier
Utilisation des fichiers de configuration
A propos de la r&eacute;installation de Fireworks
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 315
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 316
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 317
Affichage du contenu du module (Mac OS uniquement)
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 317
Derni&egrave;re mise &agrave; jour le 29/4/2010
Chapitre 1 : Nouveaut&eacute;s
Meilleures performances et stabilit&eacute; accrue
• Nombreuses am&eacute;liorations apport&eacute;es aux outils les plus utilis&eacute;s dans Fireworks pour vous aider &agrave; renforcer votre
efficacit&eacute;
• Meilleures performances globales
• Meilleur contr&ocirc;le du placement des pixels des &eacute;l&eacute;ments de conception
• Outil de trac&eacute; transparent mis &agrave; jour
Pr&eacute;cision des pixels
Une meilleure pr&eacute;cision du placement des pixels garantit des conceptions claires et nettes sur tous les p&eacute;riph&eacute;riques.
Correction rapide et facile des &eacute;l&eacute;ments de conception qui ne figurent pas sur un pixel entier.
Int&eacute;gration d'Adobe Device Central
L'utilisation d'Adobe Device Central permet de s&eacute;lectionner des profils pour les p&eacute;riph&eacute;riques mobiles ou autres, pus
cr&eacute;e un flux de travail automatis&eacute; pour cr&eacute;er un projet Fireworks. Le projet reprend la taille d'&eacute;cran et la r&eacute;solution du
p&eacute;riph&eacute;rique cible. Une fois la conception termin&eacute;e, vous pouvez en afficher un aper&ccedil;u sous diff&eacute;rentes conditions au
moyen des fonctionnalit&eacute;s d'&eacute;mulation de Device Central. Vous pouvez &eacute;galement cr&eacute;er des profils de p&eacute;riph&eacute;riques
personnalis&eacute;s.
Flux de conception pour p&eacute;riph&eacute;riques mobiles am&eacute;lior&eacute; ce qui inclut l'&eacute;mulation des conceptions interactives avec
l'int&eacute;gration d'Adobe Device Central.
Flux de travail pris en charge avec Flash Catalyst et Flash
Builder
Cr&eacute;ez des interfaces utilisateur avanc&eacute;es et du contenu interactif utilisant de nouveaux flux de travail entre Fireworks
et Flash Catalyst. Proc&eacute;dez &agrave; la conception dans Fireworks et s&eacute;lectionnez des objets, des pages ou des documents
entiers &agrave; 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&ccedil;on efficace vers Flash Professional, Flash Catalyst et Flash Builder au moyen
d'un script extensible personnalisable.
Am&eacute;lioration des extensions
B&eacute;n&eacute;ficiez d'un meilleur contr&ocirc;le lorsque vous travaillez avec d'autres applications : API am&eacute;lior&eacute;e prenant en charge les
scripts d'exportation extensibles par l'utilisateur, le traitement par lots et le contr&ocirc;le avanc&eacute; du format de fichiers FXG.
1
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 2
Nouveaut&eacute;s
Partage du nuancier entre toutes les applications de la
suite
Meilleur contr&ocirc;le de la pr&eacute;cision des couleurs en exploitant la capacit&eacute; de Fireworks &agrave; partager les nuanciers entres les
applications da Creative Suite. La possibilit&eacute; de partager le format de fichiers ASE encourage l'&eacute;change de couleurs
unifi&eacute;es entre les concepteurs, y compris ceux qui utilisent Adobe Kuler.
Derni&egrave;re mise &agrave; jour le 29/4/2010
Chapitre 2 : Principes de base de Fireworks
A propos de l’utilisation de Fireworks
Adobe&reg; Fireworks&reg; est un programme polyvalent de cr&eacute;ation, d’&eacute;dition et d’optimisation de graphiques Web. Vous
pouvez cr&eacute;er et modifier des images bitmap et vectorielles, cr&eacute;er des effets pour le Web, tels que des survols et des
menus contextuels, recadrer et optimiser des graphiques afin de r&eacute;duire la taille de leur fichier et gagner du temps en
automatisant les t&acirc;ches r&eacute;p&eacute;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&eacute;o sur les principes de base de Fireworks, reportez-vous &agrave;
www.adobe.com/go/lrvid4032_fw_fr.
Dessin et modification d’objets vectoriels et bitmap
Le panneau Outils de Fireworks, organis&eacute; en sections, regroupe des outils de dessin et d’&eacute;dition sp&eacute;cifiques aux objets
vectoriels et bitmap. L’outil que vous s&eacute;lectionnez d&eacute;termine si l’objet que vous cr&eacute;ez est un objet vectoriel ou bitmap.
Apr&egrave;s avoir dessin&eacute; un objet ou trac&eacute; du texte, toute une gamme d’outils, d’effets, de commandes et de techniques sont
&agrave; votre disposition pour enrichir vos graphiques ou cr&eacute;er des boutons de navigation interactifs.
Vous pouvez &eacute;galement importer et modifier des images, notamment aux formats JPEG, GIF, PNG et PSD.
Ajout d’interactivit&eacute; aux graphiques
Les tranches et les zones sensibles sont des objets Web qui sp&eacute;cifient des zones interactives dans un graphique Web.
Les tranches d&eacute;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 &agrave; des graphiques &agrave; l’aide
des poign&eacute;es de survol par glisser-d&eacute;poser sur des tranches et des zones sensibles. Vous pouvez cr&eacute;er des graphiques
interactifs insolites destin&eacute;s &agrave; la navigation sur des sites Web &agrave; l’aide de l’&eacute;diteur de boutons et de l’&eacute;diteur de menu
contextuel de Fireworks.
Optimisation et exportation des graphiques
Les fonctions d’optimisation sophistiqu&eacute;es de Fireworks vous permettent d’obtenir l’&eacute;quilibre parfait entre taille de
fichier et qualit&eacute; d’affichage des graphiques export&eacute;s. Le type d’optimisation d&eacute;pend des besoins des utilisateurs et du
contenu.
Apr&egrave;s l’optimisation de vos graphiques, l’&eacute;tape suivante consiste &agrave; 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&eacute; et des tables HTML contenant des images d&eacute;coup&eacute;es, vers diff&eacute;rents types de fichiers.
3
Derni&egrave;re mise &agrave; 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&eacute;rence entre les deux
formats vous aidera &agrave; 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&eacute;es vecteurs) qui incluent
des informations de couleur et de position. Par exemple, l’image d’une feuille peut &ecirc;tre d&eacute;finie par une s&eacute;rie de points
d&eacute;crivant son contour La couleur de la feuille est d&eacute;termin&eacute;e par la couleur de son trac&eacute; (le contour) et la couleur de la
zone d&eacute;limit&eacute;e par ce trac&eacute; (le fond).
Les graphiques vectoriels ne d&eacute;pendent pas de la r&eacute;solution. Cela signifie que la qualit&eacute; de l’aspect d’un graphique
vectoriel est conserv&eacute;e lorsque vous modifiez sa couleur, sa taille, sa forme ou sa position, ou que la r&eacute;solution du
p&eacute;riph&eacute;rique de sortie change.
A propos des graphiques bitmap
Les graphiques bitmap sont compos&eacute;s de points (pixels) organis&eacute;s selon une grille. L’&eacute;cran de votre ordinateur est une
grande grille de pixels. Dans une version bitmap de la feuille, l’image est d&eacute;termin&eacute;e par l’emplacement et la valeur
chromatique de l’ensemble des pixels de la grille. Chaque pixel est associ&eacute; &agrave; une couleur. Lorsque ces points sont
affich&eacute;s &agrave; la bonne r&eacute;solution, ils s’embo&icirc;tent comme les carreaux d’une mosa&iuml;que.
Lorsque vous modifiez un graphique bitmap, vous modifiez des pixels et non des lignes et des courbes. Ces graphiques
bitmap d&eacute;pendent de la r&eacute;solution, ce qui signifie que les donn&eacute;es d&eacute;crivant l’image sont conditionn&eacute;es par une grille
de taille sp&eacute;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&eacute;g&egrave;rement dentel&eacute;s. L’affichage d’un graphique bitmap sur un p&eacute;riph&eacute;rique de sortie
dont la r&eacute;solution est inf&eacute;rieure &agrave; celle de l’image risque &eacute;galement d’en alt&eacute;rer la qualit&eacute;.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 5
Principes de base de Fireworks
Cr&eacute;ation d’un document Fireworks
Les documents cr&eacute;&eacute;s dans Fireworks sont enregistr&eacute;s au format PNG (Portable Network Graphic). PNG est le format
de fichier natif de Fireworks.
Les graphiques cr&eacute;&eacute;s dans Fireworks peuvent &ecirc;tre export&eacute;s ou enregistr&eacute;s sous divers formats graphiques et Web.
Quels que soient les param&egrave;tres d’optimisation et d’exportation s&eacute;lectionn&eacute;s, le fichier PNG Fireworks d’origine est
conserv&eacute; afin de pouvoir le modifier plus tard tr&egrave;s facilement.
Cr&eacute;ation d’un nouveau document
1 Choisissez Fichier &gt; Nouveau.
La bo&icirc;te de dialogue Nouveau document s’affiche.
2 Entrez les param&egrave;tres du document, puis cliquez sur OK.
Remarque : utilisez la fen&ecirc;tre contextuelle de la case de couleur Personnalis&eacute;e pour s&eacute;lectionner une couleur de zone
de travail personnalis&eacute;e.
D&eacute;finition des dimensions par d&eacute;faut pour le nouveau document
Lorsque vous ouvrez Fireworks pour la premi&egrave;re fois, les dimensions suivantes s'affichent dans la bo&icirc;te de dialogue
Nouveau document par d&eacute;faut :
• 660 x 440 (Windows)
• 500 x 500 (Mac)
Les param&egrave;tres de la bo&icirc;te de dialogue Nouveau document restent inchang&eacute;s lorsque vous modifiez la taille de la zone
de travail dans Fireworks.
Les param&egrave;tres par d&eacute;faut changent lorsque vous copiez un objet. Les dimensions de l'objet copi&eacute; (dans le PressePapiers) sont reprises automatiquement par la bo&icirc;te de dialogue Nouveau document.
Pour supprimer les dimensions d'un objet du Presse-papiers, proc&eacute;dez de la fa&ccedil;on suivante (Windows) :
1 Cr&eacute;ez un document avec les dimensions voulues.
2 Enregistrez ce document et fermez Fireworks.
3 Ouvrez &agrave; nouveau Fireworks et cr&eacute;ez un document.
Les dimensions du document enregistr&eacute; pr&eacute;c&eacute;demment s'affichent dans la bo&icirc;te de dialogue Nouveau document.
Derni&egrave;re mise &agrave; 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&eacute; pr&eacute;c&eacute;demment lors de la cr&eacute;ation d'un document. Ceci
est d&ucirc; au fat que le contenu du Presse-Papiers est conserv&eacute; jusqu'&agrave; ce que vous coupiez ou copiez d'autres &eacute;l&eacute;ments,
tels que du texte. Si vous copiez des &eacute;l&eacute;ments sans rapport avec les dimensions, puis s&eacute;lectionnez &laquo; Nouveau &raquo;, la taille
enregistr&eacute;e auparavant s'affiche par d&eacute;faut.
Cr&eacute;ation d’un document de la m&ecirc;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&eacute;quate.
2 Choisissez Fichier &gt; Nouveau.
La bo&icirc;te de dialogue Nouveau document s’affiche, pr&eacute;sentant la hauteur et la largeur de l’objet dans le Pressepapiers.
3 S&eacute;lectionnez une r&eacute;solution et une couleur de zone de travail, puis cliquez sur OK.
4 Choisissez Edition &gt; Coller pour coller dans le nouveau document l’objet en provenance du Presse-papiers.
Mod&egrave;les
Enregistrez un fichier Fireworks en tant que mod&egrave;le et cr&eacute;ez des fichiers &agrave; partir de ce mod&egrave;le. Le mod&egrave;le est enregistr&eacute;
au format PNG Fireworks. Fireworks propose une liste de mod&egrave;les personnalis&eacute;s pr&eacute;d&eacute;finis pour les p&eacute;riph&eacute;riques
mobiles, prototypes, sites Web et cadres Web que vous personnalisez.
Cr&eacute;ation d’un mod&egrave;le
1 Cr&eacute;ez un fichier. Vous pouvez ajouter des espaces r&eacute;serv&eacute;s de cr&eacute;ation ou de contenu afin d’uniformiser l’aspect
des documents cr&eacute;&eacute;s &agrave; partir de ce mod&egrave;le.
2 S&eacute;lectionnez Fichier &gt; Enregistrer comme mod&egrave;le pour enregistrer le fichier en tant que fichier de mod&egrave;le PNG
Fireworks.
Cr&eacute;ation d’un fichier &agrave; partir d’un mod&egrave;le
1 S&eacute;lectionnez Fichier &gt; Nouveau &agrave; partir d’un mod&egrave;le.
2 S&eacute;lectionnez le mod&egrave;le souhait&eacute; pour cr&eacute;er le fichier et cliquez sur Ouvrir.
Remarque : Le mod&egrave;le contient des donn&eacute;es propres &agrave; Fireworks, telles que des pages, calques et informations vectorielles.
Ouverture et importation de fichiers
Remarque : lorsque vous importez un fichier depuis Adobe Dreamweaver&reg;, Fireworks conserve la plupart des
comportements JavaScript, mais pas tous. Si Fireworks prend en charge un comportement particulier, ce dernier est
reconnu et conserv&eacute; lorsque vous r&eacute;importez le fichier dans Dreamweaver.
Ouverture d'un document Fireworks
❖ Choisissez Fichier &gt; Ouvrir, puis s&eacute;lectionnez le fichier.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 7
Principes de base de Fireworks
Pour ouvrir un fichier sans &eacute;craser la version pr&eacute;c&eacute;dente, cliquez sur Ouvrir en tant que Sans titre, puis enregistrez le
fichier en utilisant un autre nom.
Ouverture d’un fichier r&eacute;cemment ferm&eacute;
1 Choisissez Fichier &gt; Ouvrir les fichiers r&eacute;cents.
2 S&eacute;lectionnez un fichier dans le sous-menu.
Ouverture d’un fichier r&eacute;cemment ferm&eacute; lorsque aucun fichier n’est ouvert
❖ Cliquez sur le nom du fichier dans la page de d&eacute;marrage.
Ouverture de graphiques cr&eacute;&eacute;s dans d’autres applications
Vous pouvez ouvrir des fichiers cr&eacute;&eacute;s dans d’autres applications ou formats de fichier, notamment Photoshop&reg;, Adobe
Illustrator&reg;, WBMP, EPS, JPEG, GIF et les fichiers GIF anim&eacute;s.
Lorsque vous ouvrez un format de fichier autre que PNG en choisissant la commande Fichier &gt; Ouvrir, vous cr&eacute;ez un
nouveau document PNG Fireworks bas&eacute; sur le fichier que vous ouvrez. Vous pouvez utiliser toutes les fonctions de
Fireworks pour modifier l’image. Vous pouvez ensuite s&eacute;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 &eacute;ch&eacute;ant, tous les calques de
l’image fusionnent, ce qui emp&ecirc;che d’agir sur les fonctions Fireworks ajout&eacute;es &agrave; l’image.
Vous pouvez enregistrer les formats de fichier suivants directement depuis Fireworks : PNG Fireworks, GIF, GIF
anim&eacute;, JPEG, BMP, WBMP, TIFF, SWF, AI, PSD et PICT (Mac uniquement).
Remarque : Fireworks enregistre les images TIFF 16 bits &agrave; une profondeur de couleur de 24 bits.
GIF anim&eacute;
• Importez un fichier GIF anim&eacute; en tant que symbole d’animation, puis modifiez et d&eacute;placez tous les &eacute;l&eacute;ments de
l’animation en tant qu’une seule unit&eacute;. Pour cr&eacute;er de nouvelles instances du symbole, servez-vous du
panneau Biblioth&egrave;que de documents.
Remarque : lorsque vous importez un GIF anim&eacute;, la cadence des &eacute;tats est de 0,07 seconde par d&eacute;faut. Si n&eacute;cessaire,
utilisez le panneau Etats pour r&eacute;tablir la cadence d’origine.
• Ouvrez un fichier GIF anim&eacute; de la m&ecirc;me mani&egrave;re qu’un fichier GIF ordinaire. Les &eacute;l&eacute;ments du fichier GIF sont
plac&eacute;s en tant qu’image distincte dans un &eacute;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&eacute;s sur
un seul et m&ecirc;me calque. Certains fichiers EPS export&eacute;s &agrave; partir d’Adobe Illustrator conservent leurs informations
vectorielles.
Fichiers PSD
Fireworks peut ouvrir des fichiers PSD cr&eacute;&eacute;s dans Photoshop tout en conservant la plupart des fonctions PSD,
notamment les calques hi&eacute;rarchiques, les effets de calques et les modes de fusion couramment utilis&eacute;s. Pour
personnaliser l’importation PSD, faites appel aux diff&eacute;rentes options du panneau Importation/Ouverture PS de la
bo&icirc;te de dialogue Pr&eacute;f&eacute;rences.
Derni&egrave;re mise &agrave; 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 &eacute;t&eacute; optimis&eacute;s pour les
p&eacute;riph&eacute;riques d’informatique mobile. Ce format est con&ccedil;u pour les pages WAP (Wireless Application Protocol).
L’extension Import Multiple Files permet d’importer plusieurs fichiers s&eacute;lectionn&eacute;s dans de nouvelles pages d’un
fichier PNG Fireworks. Cet utilitaire permet de regrouper les fichiers de projet cr&eacute;&eacute;s dans des versions ant&eacute;rieures de
Fireworks. Vous pouvez &eacute;galement importer des fichiers PNG aplatis, PSD, AI, BMP, Freehand, GIF, GIF anim&eacute;s, JPEG,
PICT et TIFF. Vous pouvez t&eacute;l&eacute;charger cette extension sur la page http://www.adobe.com/go/learn_fw_multiplepages_fr.
Cr&eacute;ation de fichiers PNG Fireworks &agrave; partir de
fichiers HTML
Dans Fireworks, vous pouvez ouvrir et importer des contenus HTML cr&eacute;&eacute;s dans d’autres applications et contenant des
&eacute;l&eacute;ments de table HTML.
Ouverture de toutes les tables d’un fichier HTML
1 Choisissez Fichier &gt; Reconstituer la table.
2 S&eacute;lectionnez le fichier HTML contenant les tables &agrave; ouvrir, puis cliquez sur Ouvrir.
Chaque table s’affiche dans sa propre fen&ecirc;tre de document.
Ouverture de la premi&egrave;re table d’un fichier HTML
1 Choisissez Fichier &gt; Ouvrir.
2 S&eacute;lectionnez le fichier HTML contenant la table &agrave; ouvrir, puis cliquez sur Ouvrir.
La premi&egrave;re table du fichier HTML s’affiche dans une nouvelle fen&ecirc;tre de document.
Importation de la premi&egrave;re table d’un fichier HTML vers un document
Fireworks ouvert
1 Choisissez Fichier &gt; Importer.
2 S&eacute;lectionnez le fichier HTML &agrave; partir duquel vous voulez effectuer l’importation, puis cliquez sur Ouvrir.
3 Cliquez pour placer le point d’insertion &agrave; l’endroit o&ugrave; vous souhaitez que la table import&eacute;e apparaisse.
Remarque : Fireworks peut importer des documents qui utilisent un codage UTF-8 ainsi que ceux &eacute;crits en XHTML.
Insertion d’objets dans un document Fireworks
Glissement d’une image ou d’un texte dans Fireworks
Utilisez la m&eacute;thode du glisser-d&eacute;poser pour importer des objets vectoriels, des images bitmap ou du texte &agrave; partir
d’applications prenant en charge ce proc&eacute;d&eacute;.
❖ A partir de l’autre application, faites glisser l’objet ou le texte dans Fireworks.
Derni&egrave;re mise &agrave; 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&eacute; &agrave; partir d’une autre application, cet objet est plac&eacute; 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&eacute;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 &agrave; coller.
2 Dans Fireworks, collez l’objet ou le texte dans votre document.
Localisation des objets coll&eacute;s
L’emplacement des fichiers coll&eacute;s d&eacute;pend de la s&eacute;lection :
• Si au moins un objet d’un seul calque est s&eacute;lectionn&eacute;, l’objet coll&eacute; est plac&eacute; devant (empil&eacute; directement au-dessus
de) l’objet s&eacute;lectionn&eacute; sur ce m&ecirc;me calque.
• Si le calque lui-m&ecirc;me est s&eacute;lectionn&eacute;, ainsi que tous ses objets ou aucun d’entre eux, l’objet coll&eacute; est plac&eacute; devant
(empil&eacute; directement au-dessus de) l’objet sup&eacute;rieur (plac&eacute; sur le dessus) de ce m&ecirc;me calque.
• Si au moins deux objets de plusieurs calques sont s&eacute;lectionn&eacute;s, l’objet coll&eacute; est plac&eacute; devant (empil&eacute; directement audessus de) l’objet sup&eacute;rieur (plac&eacute; sur le dessus) du calque sup&eacute;rieur (du dessus).
• Si le calque Web ou un objet du calque Web est s&eacute;lectionn&eacute;, l’objet coll&eacute; est plac&eacute; devant (empil&eacute; au-dessus de) tous
les autres objets du calque inf&eacute;rieur (du dessous).
Remarque : le calque Web est un calque sp&eacute;cial qui contient tous les objets Web. Il est toujours plac&eacute; en haut du
panneau Calques.
R&eacute;&eacute;chantillonnage des objets coll&eacute;s
Le r&eacute;&eacute;chantillonnage ajoute ou supprime des pixels dans une image bitmap redimensionn&eacute;e pour qu’elle se rapproche
le plus possible de l’aspect de l’image bitmap d’origine. Le r&eacute;&eacute;chantillonnage d’une image bitmap dans une r&eacute;solution
sup&eacute;rieure provoque g&eacute;n&eacute;ralement une l&eacute;g&egrave;re perte de qualit&eacute;. Le r&eacute;&eacute;chantillonnage &agrave; une r&eacute;solution inf&eacute;rieure
provoque toujours une perte de donn&eacute;es et donc une perte de qualit&eacute;.
R&eacute;&eacute;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 &gt; Coller dans Fireworks.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 10
Principes de base de Fireworks
3 Si la r&eacute;solution de l’image bitmap qui se trouve dans le Presse-papiers est diff&eacute;rente de celle du document actif,
choisissez une option de r&eacute;&eacute;chantillonnage.
Oui Conserve la largeur et la hauteur initiales de l’image bitmap coll&eacute;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&eacute;e plus grande ou plus
petite que pr&eacute;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&eacute;es sur le calque Web du document. Fireworks conserve les proportions de l’image
import&eacute;e.
1 Dans le panneau Calques, s&eacute;lectionnez le calque dans lequel vous voulez importer le fichier.
2 Choisissez Fichier &gt; Importer pour ouvrir la bo&icirc;te de dialogue Importer.
3 Acc&eacute;dez au fichier &agrave; importer, puis cliquez sur Ouvrir.
4 Sur la zone de travail, positionnez le pointeur d’importation &agrave; l’endroit o&ugrave; vous voulez placer le coin sup&eacute;rieur
gauche de l’image.
5 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Cliquez pour importer l’image en taille r&eacute;elle.
• Faites glisser le pointeur d’importation pour redimensionner l’image import&eacute;e.
Importation &agrave; partir d’un scanner ou d’un appareil photo num&eacute;rique
Vous pouvez importer des images &agrave; partir d’un scanner ou d’un appareil photo num&eacute;rique uniquement s’il est
compatible TWAIN (Windows) ou s’il utilise la fonctionnalit&eacute; de capture d’image int&eacute;gr&eacute;e (Mac OS). Les images
import&eacute;es dans Fireworks &agrave; partir d’un appareil photo num&eacute;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&eacute;cessaires pour
l’appareil photo num&eacute;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 &gt; Pr&eacute;f&eacute;rences (Windows) ou Fireworks &gt; Pr&eacute;f&eacute;rences (Mac OS).
2 Cliquez sur la cat&eacute;gorie Modules externes.
3 S&eacute;lectionnez Modules externes Photoshop, puis acc&eacute;dez au dossier des modules externes.
Si la bo&icirc;te de dialogue de s&eacute;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 &agrave; partir d’un appareil photo num&eacute;rique (Windows)
1 Connectez l’appareil photo &agrave; votre ordinateur.
2 Dans Fireworks, choisissez Fichier &gt; Num&eacute;risation, puis s&eacute;lectionnez Acquisition Twain ou Source Twain.
3 S&eacute;lectionnez la source des images et les images &agrave; importer.
Derni&egrave;re mise &agrave; 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&egrave;tres.
Importation d’une image &agrave; partir d’un appareil photo num&eacute;rique (Mac OS)
1 Connectez l’appareil photo &agrave; votre ordinateur.
2 Dans Fireworks, choisissez Fichier &gt; Acquisition, puis s&eacute;lectionnez Acquisition appareil photo ou Source appareil
photo.
3 S&eacute;lectionnez l’appareil photo et les images &agrave; importer.
4 Suivez les instructions pour appliquer les param&egrave;tres.
Importation d’une image &agrave; partir d’un scanner
1 Connectez le scanner &agrave; votre ordinateur.
2 Installez le logiciel qui accompagne le scanner, si cela n’a pas d&eacute;j&agrave; &eacute;t&eacute; fait.
3 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
• (Windows) Dans Fireworks, choisissez Fichier &gt; Scanner, puis s&eacute;lectionnez Acquisition Twain ou
Source Twain.
• (Mac OS) Dans Fireworks, choisissez Fichier &gt; Acquisition, puis s&eacute;lectionnez Acquisition Twain ou
Source Twain.
Remarque : pour la plupart des modules TWAIN ou des modules externes Photoshop Acquire, vous pouvez
sp&eacute;cifier des options compl&eacute;mentaires dans d’autres bo&icirc;tes de dialogue.
4 Suivez les instructions pour appliquer les param&egrave;tres.
Enregistrement de fichiers Fireworks
Lorsque vous cr&eacute;ez un document ou ouvrez des fichiers au format PSD ou HTML, choisissez la commande Fichier &gt;
Enregistrer pour cr&eacute;er un fichier PNG Fireworks. Les fichiers PNG Fireworks pr&eacute;sentent les avantages suivants :
• Le fichier PNG source est toujours modifiable. Vous pouvez faire marche arri&egrave;re et effectuer des modifications
suppl&eacute;mentaires, m&ecirc;me apr&egrave;s l’exportation du fichier dans le but de l’utiliser sur le Web.
• Vous pouvez d&eacute;couper en plusieurs tranches des graphiques complexes dans le fichier PNG et les exporter dans
diff&eacute;rents formats et avec divers param&egrave;tres d’optimisation.
Si Fireworks met du temps &agrave; enregistrer un document complexe, vous pouvez modifier d’autres documents ouverts en
attendant que l’op&eacute;ration de sauvegarde se termine.
Enregistrement d’un fichier Fireworks au format PNG pour l’utiliser dans une
version ant&eacute;rieure
1 Choisissez Fichier &gt; Exporter.
2 Recherchez l’emplacement o&ugrave; vous voulez enregistrer le fichier.
3 Si le fichier Fireworks contient plusieurs pages, s&eacute;lectionnez la commande Pages vers Fichiers dans le menu
contextuel Exporter.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 12
Principes de base de Fireworks
4 S&eacute;lectionnez Images ou PNG Fireworks dans la liste d&eacute;roulante Exporter en tant que. Si vous s&eacute;lectionnez Images,
chaque page est enregistr&eacute;e au format de fichier par d&eacute;faut. Vous pouvez d&eacute;finir ce format de fichier via le
panneau Optimisation. Pour plus de d&eacute;tails, reportez-vous &agrave; la section &laquo; Optimisation et exportation &raquo; &agrave; la
page 237.
Tous les objets des calques sup&eacute;rieurs sont enregistr&eacute;s lors de l’exportation. Les &eacute;l&eacute;ments des calques inf&eacute;rieurs ne
sont pas export&eacute;s.
Enregistrement de tous les documents ouverts
Vous pouvez enregistrer tous les documents ouverts tout en continuant de travailler dessus. Vous pouvez &eacute;galement
sp&eacute;cifier des noms de fichiers pour les documents ne portant pas de nom. Les documents qui ont &eacute;t&eacute; modifi&eacute;s depuis
le dernier enregistrement apparaissent avec un ast&eacute;risque (*) &agrave; c&ocirc;t&eacute; du nom du fichier dans l’onglet du document.
❖ Choisissez Commandes &gt; Enregistrer tout.
Remarque : L’utilitaire Auto Backup de Fireworks permet de sauvegarder automatiquement tous les documents
Fireworks ouverts. Pour le t&eacute;l&eacute;charger &agrave; partir d’Adobe AIR Marketplace, acc&eacute;dez &agrave;
http://www.adobe.com/go/learn_fw_autobackuputility_fr.
Enregistrement de documents dans d’autres formats
Si vous choisissez la commande Fichier &gt; Ouvrir pour ouvrir un fichier dans un format autre que PNG, vous pouvez
ensuite s&eacute;lectionner la commande Fichier &gt; 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 &gt; Enregistrer pour sauvegarder le
document dans son format d’origine : PNG Fireworks, GIF, GIF anim&eacute;, JPEG, BMP, WBMP, TIFF, SWF, AI, PSD et
PICT (Mac OS uniquement). Fireworks enregistre les images TIFF 16 bits &agrave; 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&eacute;s dans le fichier PNG ne sont plus disponibles dans le fichier bitmap. Si vous retouchez l’image, &eacute;ditez
le fichier PNG source, puis exportez-le de nouveau.
Ajout d’une image
1 S&eacute;lectionnez Commandes &gt; Cr&eacute;ation &gt; Ajouter image.
2 S&eacute;lectionnez un motif et d&eacute;finissez une taille de cadre.
3 Cliquez sur OK.
R&eacute;initialisation des messages d’avertissement
Si vous avez d&eacute;sactiv&eacute; l’affichage des messages d’avertissement, vous pouvez de nouveau les activer.
❖ S&eacute;lectionnez Commandes &gt; R&eacute;init. Mess. Avertissement.
Capture d’&eacute;cran (Windows uniquement)
1 S&eacute;lectionnez Commandes &gt; Capturer.
2 Acc&eacute;dez &agrave; la fen&ecirc;tre dans laquelle vous souhaitez effectuer une capture d’&eacute;cran.
3 Cliquez sur OK et faites glisser le pointeur pour s&eacute;lectionner la zone de la fen&ecirc;tre.
4 Collez le contenu du Presse-papiers sur la zone de travail ou dans l’application de retouche d’image.
Derni&egrave;re mise &agrave; jour le 29/4/2010
Chapitre 3 : Espace de travail
Principes de base de l’espace de travail
Pr&eacute;sentation de l’espace de travail Fireworks
Lorsque vous ouvrez pour la premi&egrave;re fois un document dans Adobe&reg; Fireworks&reg;, l’espace de travail se compose du
panneau Outils, de l’inspecteur des propri&eacute;t&eacute;s, des menus et d’autres panneaux. Le panneau Outils, &agrave; gauche de l’&eacute;cran,
contient des cat&eacute;gories &eacute;tiquet&eacute;es comprenant les groupes d’outils bitmap, vectoriels et Web. L’inspecteur des
propri&eacute;t&eacute;s appara&icirc;t par d&eacute;faut en bas du document et affiche initialement les propri&eacute;t&eacute;s du document. Il change ensuite
pour afficher les propri&eacute;t&eacute;s d’un outil nouvellement s&eacute;lectionn&eacute; ou d’un objet actuellement s&eacute;lectionn&eacute; lorsque vous
travaillez dans le document. Les panneaux sont initialement ancr&eacute;s en groupes le long du bord droit de l’&eacute;cran. La
fen&ecirc;tre du document appara&icirc;t au centre du programme.
Page de d&eacute;marrage
Lorsque vous lancez Fireworks sans ouvrir de document, la page de d&eacute;marrage de Fireworks s’affiche dans
l’environnement de travail. Cette page vous permet d’acc&eacute;der rapidement aux didacticiels Fireworks, aux fichiers
r&eacute;cents et &agrave; Fireworks Exchange, d’o&ugrave; vous pouvez am&eacute;liorer les fonctions de Fireworks. Pour d&eacute;sactiver la page de
d&eacute;marrage, cliquez sur Ne plus afficher cette fen&ecirc;tre lorsque la page de d&eacute;marrage s’ouvre.
13
Derni&egrave;re mise &agrave; 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&eacute;lectionn&eacute; ou des
&eacute;l&eacute;ments du document. Ils permettent, entre autres, de travailler sur des &eacute;tats, des calques, des symboles et des
nuanciers. Il est possible de faire glisser les panneaux de fa&ccedil;on &agrave; les disposer en fonction de vos pr&eacute;f&eacute;rences.
Panneau Optimisation Il permet de g&eacute;rer les param&egrave;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&eacute;ation de suppression et de manipulation de
calques.
Panneau Biblioth&egrave;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&egrave;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 &eacute;tats du fichier actif et comporte des options de cr&eacute;ation d’animations.
Historique, panneau Il r&eacute;pertorie les commandes que vous avez utilis&eacute;es r&eacute;cemment de fa&ccedil;on &agrave; vous permettre de les
annuler et de les r&eacute;tablir rapidement. En outre, vous pouvez s&eacute;lectionner plusieurs actions puis les enregistrer et les
r&eacute;utiliser comme des commandes.
Panneau Formes automatiques Il contient les formes automatiques qui ne sont pas affich&eacute;es dans le panneau Outils.
Panneau Styles Il vous permet de stocker et de r&eacute;utiliser des combinaisons de caract&eacute;ristiques d’objets ou de
s&eacute;lectionner un style stock&eacute;.
Panneau Biblioth&egrave;que de documents Il contient des symboles graphiques, de bouton et d’animation qui figurent d&eacute;j&agrave;
dans le document Fireworks actif. Vous pouvez facilement faire glisser les occurrences de ces symboles du
panneau Biblioth&egrave;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&eacute;er des biblioth&egrave;ques contenant des URL fr&eacute;quemment utilis&eacute;es.
Panneau M&eacute;langeur Il permet de cr&eacute;er de nouvelles couleurs et de les ajouter &agrave; la palette de couleurs du document
actif, ou de les appliquer aux objets s&eacute;lectionn&eacute;s.
Panneau Nuancier Il g&egrave;re la palette de couleurs du document actif.
Panneau Info Il fournit des informations sur les dimensions des objets s&eacute;lectionn&eacute;s et les coordonn&eacute;es exactes du
pointeur au cours de son d&eacute;placement dans la zone de travail.
Panneau Comportements Il permet de g&eacute;rer les comportements qui d&eacute;terminent ce qui se produit lorsque des zones
sensibles ou des tranches r&eacute;agissent aux d&eacute;placements de la souris.
Panneau Rechercher Il vous permet de rechercher et de remplacer des &eacute;l&eacute;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&eacute;partition des objets dans la zone de travail.
Panneau Propri&eacute;t&eacute;s de forme automatique Il vous permet de modifier les propri&eacute;t&eacute;s d’une forme automatique apr&egrave;s
l’avoir ins&eacute;r&eacute;e dans votre document.
Panneau Palette de couleurs (Fen&ecirc;tre &gt; Autres) Il vous permet de cr&eacute;er et d’&eacute;changer des palettes de couleurs,
d’exporter des nuanciers ACT personnalis&eacute;s, d’explorer les diff&eacute;rentes gammes de couleur et d’acc&eacute;der aux contr&ocirc;les
couramment utilis&eacute;s pour choisir des couleurs.
Panneau Edition d’images (Fen&ecirc;tre &gt; Autres) Il vous permet d’organiser les outils et les options utilis&eacute;s pour modifier
les objets bitmap dans un panneau.
UTILISATION DE FIREWORKS CS5 15
Derni&egrave;re mise &agrave; jour le 29/4/2010
Espace de travail
Panneau Trac&eacute; (Fen&ecirc;tre &gt; Autres) Il vous permet d’acc&eacute;der rapidement &agrave; de nombreuses commandes associ&eacute;es aux
trac&eacute;s.
Panneau Caract&egrave;res sp&eacute;ciaux (Fen&ecirc;tre &gt; Autres) Il vous permet d’afficher les caract&egrave;res sp&eacute;ciaux utilisables dans les
blocs de texte.
Panneau Propri&eacute;t&eacute;s du symbole Il g&egrave;re les propri&eacute;t&eacute;s personnalisables des symboles graphiques.
Pr&eacute;sentation de l’espace de travail
Vous pouvez cr&eacute;er et manipuler vos documents et fichiers &agrave; l’aide de divers &eacute;l&eacute;ments tels que des panneaux, barres et
fen&ecirc;tres. Un espace de travail d&eacute;signe l’organisation de ces &eacute;l&eacute;ments. Les espaces de travail des diff&eacute;rentes applications
de la suite Adobe&reg; Creative Suite&reg; 5 ont une apparence similaire, facilitant ainsi le passage d’une application &agrave; une
autre. Vous pouvez &eacute;galement adapter chaque application aux exigences de votre travail, en cr&eacute;ant votre propre espace
de travail ou en effectuant une s&eacute;lection parmi ceux pr&eacute;d&eacute;finis.
Bien que la disposition de l’espace de travail par d&eacute;faut varie selon les applications, la manipulation des &eacute;l&eacute;ments est
pratiquement identique dans chacune d’elles.
A
B
C
D
E
G
F
H
Espace de travail Illustrator par d&eacute;faut
A. Documents sous forme d’onglets B. Barre d’application C. S&eacute;lecteur d'espace de travail D. Barre de titre de panneau E. Panneau Contr&ocirc;le
F. Panneau Outils G. Bouton de r&eacute;duction &agrave; la taille d’une ic&ocirc;ne H. Quatre groupes de panneaux en ancrage vertical
• La barre d’application occupe la partie sup&eacute;rieure et contient un s&eacute;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 &agrave; l’aide du menu Fen&ecirc;tre.
UTILISATION DE FIREWORKS CS5 16
Derni&egrave;re mise &agrave; jour le 29/4/2010
Espace de travail
• Le panneau Outils contient des outils permettant de cr&eacute;er et de modifier des images, des illustrations, des &eacute;l&eacute;ments
de page, etc. Les outils connexes sont regroup&eacute;s.
• Le panneau Contr&ocirc;le affiche des options relatives &agrave; l’outil s&eacute;lectionn&eacute;. Dans Illustrator, le panneau Contr&ocirc;le affiche
des options relatives &agrave; l’objet s&eacute;lectionn&eacute;. (Il est appel&eacute; Barre d’options dans Adobe Photoshop&reg;. Dans Adobe
Flash&reg;, Adobe Dreamweaver&reg; et Adobe Fireworks&reg;, il est appel&eacute; Inspecteur de propri&eacute;t&eacute;s et inclut les propri&eacute;t&eacute;s
relatives &agrave; l’&eacute;l&eacute;ment actuellement s&eacute;lectionn&eacute;.)
• La fen&ecirc;tre de document affiche le fichier sur lequel vous travaillez. Les fen&ecirc;tres de document peuvent pr&eacute;senter un
onglet et, dans certains cas, &ecirc;tre regroup&eacute;es et ancr&eacute;es.
• Les panneaux vous permettent de contr&ocirc;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&reg; et le
panneau Styles CSS dans Adobe Dreamweaver. Ils peuvent &ecirc;tre regroup&eacute;s, empil&eacute;s ou ancr&eacute;s.
• Le Cadre de l’application regroupe tous les &eacute;l&eacute;ments des espaces de travail dans une seule et m&ecirc;me fen&ecirc;tre uniforme,
ce qui permet de manipuler toutes les applications comme s’il s’agissait d’une seule entit&eacute;. Lorsque vous d&eacute;placez
ou que vous redimensionnez le Cadre de l’application ou l’un de ses &eacute;l&eacute;ments, tous les &eacute;l&eacute;ments qu’il contient sont
r&eacute;agenc&eacute;s pour &eacute;viter tout chevauchement. Les panneaux ne disparaissent pas lorsque vous changez d’application
ou lorsque vous cliquez par erreur &agrave; c&ocirc;t&eacute; de l’application. Si vous utilisez plusieurs applications, vous pouvez les
placer c&ocirc;te &agrave; c&ocirc;te &agrave; l’&eacute;cran ou sur plusieurs moniteurs.
Si vous pr&eacute;f&eacute;rez l’interface utilisateur Mac classique que vous pouvez personnaliser &agrave; votre convenance, il vous
suffit de d&eacute;sactiver le Cadre de l’application. Dans Adobe Illustrator&reg; par exemple, s&eacute;lectionnez la commande
Fen&ecirc;tre &gt; Cadre de l’application pour l’activer ou le d&eacute;sactiver. (Dans Flash, le Cadre de l'application est activ&eacute; en
permanence pour Mac et Dreamweaver pour Mac n'en utilise pas.)
Affichage et masquage de tous les panneaux
• (Illustrator, Adobe InCopy&reg;, Adobe InDesign&reg;, Photoshop, Fireworks) Pour afficher ou masquer tous les panneaux,
y compris les panneaux Outils et Contr&ocirc;le, appuyez sur la touche de tabulation.
• (Illustrator, InCopy, InDesign, Photoshop) Pour afficher ou masquer tous les panneaux, &agrave; l’exception des panneaux
Outils et Contr&ocirc;le, appuyez sur les touches Maj+tabulation.
Vous pouvez afficher temporairement les panneaux masqu&eacute;s si l’option Afficher automatiquement les panneaux
masqu&eacute;s est s&eacute;lectionn&eacute;e dans les pr&eacute;f&eacute;rences Interface. Cette option est toujours activ&eacute;e dans Illustrator. D&eacute;placez
le pointeur vers le bord de la fen&ecirc;tre de l’application (Windows&reg;) ou vers le bord de l’&eacute;cran (Mac OS&reg;) 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&ocirc;ne de menu de panneau
dans le coin sup&eacute;rieur droit du panneau.
L’ouverture d’un menu est possible m&ecirc;me lorsque le panneau est r&eacute;duit.
Dans Photoshop, vous pouvez modifier le corps de la police du texte du panneau Contr&ocirc;le, des panneaux et des
info-bulles. Choisissez une option dans le menu Corps de la police de l’interface utilisateur des pr&eacute;f&eacute;rences de
l’interface.
R&eacute;glage de la luminosit&eacute; du panneau (Illustrator)
❖ Faites glisser le curseur Luminosit&eacute; dans les pr&eacute;f&eacute;rences de l’interface utilisateur. Cette commande affecte tous les
panneaux, y compris le panneau Contr&ocirc;le.
Derni&egrave;re mise &agrave; 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&ocirc;te &agrave; c&ocirc;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&eacute;f&eacute;rences d’interface vous permet &eacute;galement de basculer d’un affichage en
une colonne vers un affichage en deux colonnes.
❖ Cliquez sur la double fl&egrave;che dans la partie sup&eacute;rieure du panneau Outils.
Gestion des fen&ecirc;tres et des panneaux
Pour cr&eacute;er un espace de travail personnalis&eacute;, vous d&eacute;placez et manipulez les fen&ecirc;tres de document et les panneaux.
Vous pouvez &eacute;galement enregistrer des espaces de travail, puis passer de l’un &agrave; l’autre. Dans Fireworks, renommer les
espaces de travail personnalis&eacute;s peut provoquer un comportement inattendu.
Remarque : les exemples suivants sont bas&eacute;s sur Photoshop. L’espace de travail est le m&ecirc;me dans tous les produits.
R&eacute;organisation, ancrage ou d&eacute;placement des fen&ecirc;tres de document
Les fen&ecirc;tres de document comportent des onglets lorsque plusieurs fichiers sont ouverts.
• Pour modifier l’ordre des onglets de la fen&ecirc;tre de document, faites glisser un onglet de la fen&ecirc;tre &agrave; l’emplacement
voulu dans le groupe.
• Pour annuler l’ancrage d’une fen&ecirc;tre de document &agrave; un groupe de fen&ecirc;tres, faites glisser l’onglet de cette fen&ecirc;tre
hors du groupe.
Remarque : dans Photoshop, vous pouvez &eacute;galement s&eacute;lectionner Fen&ecirc;tre &gt; R&eacute;organiser &gt; Afficher dans une fen&ecirc;tre
flottante pour afficher une seule fen&ecirc;tre flottante de document ou Fen&ecirc;tre &gt; R&eacute;organiser &gt; Tout afficher dans des
fen&ecirc;tres flottantes pour afficher simultan&eacute;ment toutes les fen&ecirc;tres flottantes de document. Pour plus d’informations,
voir la note technique kb405298.
Remarque : Dreamweaver ne prend pas en charge l’ancrage des fen&ecirc;tres de document ni son annulation. Utilisez le
bouton R&eacute;duire de la fen&ecirc;tre de document pour cr&eacute;er des fen&ecirc;tres flottantes (sous Windows), ou Fen&ecirc;tre &gt; Mosa&iuml;que
verticale pour cr&eacute;er des fen&ecirc;tres de document c&ocirc;te &agrave; c&ocirc;te. Pour plus d’informations sur cette rubrique, recherchez
&laquo; Mosa&iuml;que verticale &raquo; dans l’aide de Dreamweaver.
• Pour ancrer une fen&ecirc;tre de document &agrave; un groupe de fen&ecirc;tres de document distinct, faites glisser cette fen&ecirc;tre dans
le groupe.
• Pour cr&eacute;er des groupes de documents empil&eacute;s ou juxtapos&eacute;s, faites glisser la fen&ecirc;tre vers l’une des zones de largage
situ&eacute;es en haut, en bas ou sur les c&ocirc;t&eacute;s d’une autre fen&ecirc;tre. Vous pouvez &eacute;galement s&eacute;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&eacute;. Cependant, votre produit peut pr&eacute;senter
des commandes Cascade et Mosa&iuml;que (ou Juxtaposer), sous le menu Fen&ecirc;tre, pour vous permettre d’organiser vos
documents.
• Dans un groupe &agrave; onglets, pour passer &agrave; un autre document lors du glissement d’une s&eacute;lection, faites glisser cette
s&eacute;lection sur l’onglet du document souhait&eacute; pendant un moment.
Remarque : certains produits ne prennent pas en charge cette fonctionnalit&eacute;.
Derni&egrave;re mise &agrave; 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&eacute;s ensemble, g&eacute;n&eacute;ralement en position
verticale. Pour ancrer et annuler l’ancrage des panneaux, ins&eacute;rez-les dans le dock et d&eacute;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&eacute;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’&eacute;l&eacute;ment vers un autre dock ou le rendre flottant.
D&eacute;placement du panneau Navigation vers un nouveau dock ; cette op&eacute;ration est indiqu&eacute;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&eacute; de l’espace disponible dans un dock. Faites
glisser le bord inf&eacute;rieur du dock vers le haut de sorte qu’il ne co&iuml;ncide plus avec le bord de l’espace de travail.
D&eacute;placement de panneaux
Lorsque vous d&eacute;placez des panneaux, des zones de largage en surbrillance bleue apparaissent : il s’agit des zones dans
lesquelles vous pouvez d&eacute;placer le panneau. Vous pouvez, par exemple, d&eacute;placer un panneau vers le haut ou vers le bas
en le faisant glisser sur la fine zone de largage bleue situ&eacute;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 &agrave; l'emplacement o&ugrave; devrait se situer la zone de largage.
• Pour d&eacute;placer un panneau, faites-le glisser en cliquant sur son onglet.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 19
Espace de travail
• Pour d&eacute;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 &ecirc;tre ancr&eacute; seul au-dessus du groupe de panneaux Calques.
A. Barre de titre B. Onglet C. Zone de largage
Pour emp&ecirc;cher l’ancrage d’un panneau, appuyez sur la touche Ctrl (Windows) ou Commande (Mac OS) lors de son
d&eacute;placement. Pour annuler l’op&eacute;ration, appuyez sur la touche Echap lors du d&eacute;placement du panneau.
Ajout et suppression de panneaux
Lorsque vous supprimez tous les panneaux d’un dock, ce dernier dispara&icirc;t. Vous pouvez cr&eacute;er un dock en d&eacute;pla&ccedil;ant
les panneaux vers le bord droit de l’espace de travail jusqu’&agrave; 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&ocirc;le (Mac), puis s&eacute;lectionnez l’option Fermer ; vous pouvez &eacute;galement le d&eacute;s&eacute;lectionner dans le
menu Fen&ecirc;tre.
• Pour ajouter un panneau, s&eacute;lectionnez-le dans le menu Fen&ecirc;tre et ancrez-le &agrave; l’emplacement de votre choix.
Manipulation de groupes de panneaux
• Pour d&eacute;placer un panneau dans un groupe, faites glisser son onglet vers la zone de largage en surbrillance situ&eacute;e
dans le groupe.
Ajout d’un panneau &agrave; un groupe
• Pour r&eacute;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&eacute;placer un groupe, faites glisser la barre de titre (zone situ&eacute;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 &ecirc;tre plac&eacute; &agrave; 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&eacute; lorsque vous faites glisser la barre de titre sup&eacute;rieure.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 20
Espace de travail
Panneaux empil&eacute;s flottants
• Pour empiler des panneaux flottants, cliquez sur un onglet pour faire glisser le panneau correspondant vers la zone
de largage situ&eacute;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 &laquo; d&eacute;poser &raquo; l’onglet sur l’&eacute;troite zone de largage situ&eacute;e entre les panneaux, plut&ocirc;t que sur
la large zone de largage situ&eacute;e dans une barre de titre.
• Pour rendre un panneau ou groupe de panneaux de la pile flottant, d&eacute;placez-le hors de la pile au moyen de son
onglet ou de sa barre de titre.
Redimensionnement des panneaux
• Pour r&eacute;duire ou agrandir un panneau, un groupe de panneaux ou une pile de panneaux, cliquez deux fois sur un
onglet. Vous pouvez &eacute;galement double-cliquer sur la zone d’onglets (l’espace vide situ&eacute; &agrave; c&ocirc;t&eacute; des onglets).
• Pour redimensionner un panneau, faites glisser l’un de ses c&ocirc;t&eacute;s. Cette m&eacute;thode de redimensionnement ne
fonctionne pas toujours, notamment avec le panneau Couleur de Photoshop.
R&eacute;duction et d&eacute;veloppement des ic&ocirc;nes de panneaux
Vous pouvez r&eacute;duire des panneaux &agrave; la taille d’ic&ocirc;nes afin de limiter l’encombrement de l’espace de travail. Dans
certains cas, les panneaux sont r&eacute;duits de la sorte dans l’espace de travail par d&eacute;faut.
Panneaux r&eacute;duits &agrave; la taille d’ic&ocirc;nes
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 21
Espace de travail
Panneaux agrandis
• Pour r&eacute;duire ou d&eacute;velopper toutes les ic&ocirc;nes de panneau d’une colonne, cliquez sur la double fl&egrave;che situ&eacute;e dans la
partie sup&eacute;rieure du dock.
• Pour d&eacute;velopper une seule ic&ocirc;ne de panneau, cliquez sur cette derni&egrave;re.
• Pour redimensionner les ic&ocirc;nes de panneau afin de voir les ic&ocirc;nes uniquement (et non les libell&eacute;s), r&eacute;glez la largeur
du dock jusqu’&agrave; ce que le texte ne soit plus visible. Pour afficher &agrave; nouveau le texte, augmentez la largeur du dock.
• Pour r&eacute;duire &agrave; la taille d’une ic&ocirc;ne un panneau qui a &eacute;t&eacute; d&eacute;velopp&eacute;, cliquez sur son onglet, sur son ic&ocirc;ne ou sur la
double fl&egrave;che affich&eacute;e dans sa barre de titre.
Dans certaines applications, si vous s&eacute;lectionnez l’option R&eacute;duction automatique des panneaux d’ic&ocirc;nes dans les
pr&eacute;f&eacute;rences d’interface ou les options d’interface utilisateur, une ic&ocirc;ne de panneau d&eacute;velopp&eacute;e est r&eacute;duite
automatiquement lorsque vous cliquez en dehors de cette derni&egrave;re.
• Pour ajouter un panneau flottant ou un groupe de panneaux &agrave; un dock d’ic&ocirc;nes, faites-le glisser au moyen de son
onglet ou de sa barre de titre (les panneaux sont r&eacute;duits automatiquement &agrave; la taille d’ic&ocirc;nes lorsque vous les ajoutez
&agrave; un dock d’ic&ocirc;nes).
• Pour d&eacute;placer une ic&ocirc;ne de panneau (ou un groupe d’ic&ocirc;nes de panneau), faites-la glisser. Vous pouvez d&eacute;placer
des ic&ocirc;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&ocirc;nes flottantes).
Utilisation de ConnectNow
Adobe&reg; ConnectNow met &agrave; votre disposition une salle de r&eacute;union en ligne s&eacute;curis&eacute;e et personnelle, o&ugrave; vous pouvez
rencontrer d’autres personnes et collaborer avec elles sur le Web en temps r&eacute;el. Gr&acirc;ce &agrave; ConnectNow, vous pouvez
partager et annoter votre &eacute;cran d’ordinateur, envoyer des messages instantan&eacute;s et communiquer &agrave; l’aide de la fonction
audio int&eacute;gr&eacute;e. Vous pouvez &eacute;galement diffuser des vid&eacute;os en temps r&eacute;el, partager des fichiers, capturer des comptes
rendus et contr&ocirc;ler l’ordinateur d’un participant.
Vous pouvez acc&eacute;der &agrave; ConnectNow directement &agrave; partir de l’interface de l’application.
1 Choisissez la commande Fichier &gt; Partager mon &eacute;cran.
2 Dans la bo&icirc;te de dialogue Se connecter &agrave; Adobe CS Live, entrez votre adresse de messagerie &eacute;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&eacute;er un ID Adobe.
3 Pour partager votre &eacute;cran, cliquez sur le bouton Partager l’&eacute;cran de mon ordinateur, au centre de la fen&ecirc;tre de
l’application ConnectNow.
Pour obtenir des instructions compl&egrave;tes sur l’utilisation de ConnectNow, rendez-vous sur
http://help.adobe.com/fr_FR/Acrobat.com/ConnectNow/index.html.
Pour acc&eacute;der au didacticiel vid&eacute;o sur l'utilisation de ConnectNow, consultez la page Web Using ConnectNow to share
your screen (7:12) (cette pr&eacute;sentation est effectu&eacute;e dans Dreamweaver).
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 22
Espace de travail
Enregistrement et basculement d’un espace de travail &agrave; l’autre
En enregistrant la taille et la position actuelles des panneaux comme espace de travail nomm&eacute;, vous gardez la
possibilit&eacute; de restaurer cet espace par la suite, et ce, m&ecirc;me si vous avez d&eacute;plac&eacute; ou ferm&eacute; un panneau. Les noms des
espaces de travail enregistr&eacute;s sont visibles dans le s&eacute;lecteur d’espace de travail de la barre d’application.
Enregistrement d’un espace de travail personnalis&eacute;
1 Lorsque l’espace de travail se trouve dans la configuration que vous souhaitez enregistrer, utilisez l’une des
m&eacute;thodes suivantes :
• (Illustrator) Choisissez la commande Fen&ecirc;tre &gt; Espace de travail &gt; Enregistrer l’espace de travail.
• (Photoshop, Illustrator, InCopy) Choisissez la commande Fen&ecirc;tre &gt; Espace de travail &gt; Nouvel espace de
travail.
• (Dreamweaver) Choisissez la commande Fen&ecirc;tre &gt; Pr&eacute;sentation de l’espace de travail &gt; Nouvel espace de
travail.
• (Flash) Choisissez la commande Nouvel espace de travail dans le s&eacute;lecteur d’espace de travail de la barre
d’application.
• (Fireworks) Choisissez la commande Enregistrer la pr&eacute;sentation active dans le s&eacute;lecteur d’espace de travail de la
barre d’application.
2 Attribuez un nom &agrave; l’espace de travail.
3 (Photoshop, InDesign) S&eacute;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 &agrave; l’autre
❖ S&eacute;lectionnez un espace de travail dans le s&eacute;lecteur d’espace de travail de la barre d’application.
Dans Photoshop, vous pouvez attribuer un raccourci clavier &agrave; chacun des espaces de travail pour pouvoir passer de
l’un &agrave; l’autre plus rapidement.
Suppression d’un espace de travail personnalis&eacute;
• Choisissez l’option G&eacute;rer les espaces de travail dans le s&eacute;lecteur d’espace de travail de la barre d’application,
s&eacute;lectionnez l’espace de travail, puis cliquez sur la commande Supprimer. (Cette option n’est pas disponible dans
Fireworks.)
• (Photoshop, InDesign, InCopy) S&eacute;lectionnez la commande Supprimer l’espace de travail dans le s&eacute;lecteur d’espace
de travail.
• (Illustrator) Choisissez la commande Fen&ecirc;tre &gt; Espace de travail &gt; G&eacute;rer les espaces de travail, s&eacute;lectionnez l’espace
de travail, puis cliquez sur l’ic&ocirc;ne Supprimer.
• (Photoshop, InDesign) Choisissez la commande Fen&ecirc;tre &gt; Espace de travail &gt; Supprimer l’espace de travail,
s&eacute;lectionnez l’espace de travail, puis cliquez sur le bouton Supprimer.
Restauration de l’espace de travail par d&eacute;faut
1 S&eacute;lectionnez l'espace de travail de base ou par d&eacute;faut &agrave; l'aide du s&eacute;lecteur situ&eacute; dans la barre d'application.
Remarque : dans Dreamweaver, Designer correspond &agrave; l’espace de travail par d&eacute;faut.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 23
Espace de travail
2 (PhotoShop, InDesign, InCopy) Choisissez la commande Fen&ecirc;tre &gt; Espace de travail &gt; R&eacute;initialiser [Nom de
l’espace de travail].
(Photoshop) Restauration d'une disposition d’espace de travail enregistr&eacute;e
Dans Photoshop, les espaces de travail s’affichent automatiquement en fonction de leur derni&egrave;re disposition, mais
vous pouvez restaurer la disposition d’origine des panneaux.
• Pour restaurer un espace de travail individuel, s&eacute;lectionnez Fen&ecirc;tre &gt; Espace de travail &gt; R&eacute;initialiser Nom de
l’espace de travail.
• Pour restaurer tous les espaces de travail install&eacute;s avec Photoshop, cliquez sur Restaurer les espaces de travail par
d&eacute;faut dans les pr&eacute;f&eacute;rences d’interface.
Pour r&eacute;organiser l'ordre des espaces de travail de la barre d’application, faites-les glisser.
Panneau Outils
Le panneau Outils est organis&eacute; en six cat&eacute;gories : S&eacute;lection, Bitmap, Vecteur, Web, Couleurs et Affichage. Lorsque
vous s&eacute;lectionnez un outil, l’inspecteur des propri&eacute;t&eacute;s affiche les options de l’outil.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 24
Espace de travail
Affichage des options de l’outil dans l’inspecteur des propri&eacute;t&eacute;s
❖ Une fois que vous avez s&eacute;lectionn&eacute; un outil, choisissez S&eacute;lection &gt; D&eacute;s&eacute;lectionner pour d&eacute;s&eacute;lectionner tous les
objets de la zone de travail.
S&eacute;lection d’un outil parmi un groupe d’outils
Un petit triangle dans le coin inf&eacute;rieur droit d’un outil dans le panneau Outils indique qu’il fait partie d’un groupe
d’outils.
1 Cliquez sur l’ic&ocirc;ne de l’outil, puis maintenez enfonc&eacute; le bouton de la souris.
2 Faites glisser le pointeur afin de s&eacute;lectionner l’outil souhait&eacute;, puis rel&acirc;chez le bouton de la souris.
Pour s&eacute;lectionner rapidement un outil masqu&eacute;, appuyez plusieurs fois sur le raccourci clavier du groupe, jusqu’&agrave; ce
que l’outil recherch&eacute; apparaisse. (Les raccourcis figurent entre parenth&egrave;ses en regard des noms d’outils.)
Inspecteur des propri&eacute;t&eacute;s
L’inspecteur des propri&eacute;t&eacute;s est un panneau contextuel qui affiche les propri&eacute;t&eacute;s de la s&eacute;lection active, les options de
l’outil actif ou les propri&eacute;t&eacute;s du document. Par d&eacute;faut, l’inspecteur des propri&eacute;t&eacute;s est ancr&eacute; au bas de l’espace de travail.
L’inspecteur des propri&eacute;t&eacute;s pr&eacute;sente deux lignes de propri&eacute;t&eacute;s s’il est affich&eacute; &agrave; mi-hauteur, ou quatre en pleine hauteur.
Vous pouvez &eacute;galement masquer totalement l’inspecteur des propri&eacute;t&eacute;s en le laissant dans l’espace de travail.
Remarque : sous Windows, le menu Options est disponible uniquement lorsque l’inspecteur des propri&eacute;t&eacute;s est ancr&eacute;.
D&eacute;tachement de l’inspecteur des propri&eacute;t&eacute;s
❖ Faites glisser l’onglet du panneau vers une autre zone de l’espace de travail.
Ancrage de l’inspecteur des propri&eacute;t&eacute;s dans la partie inf&eacute;rieure de l’espace de travail
❖ Faites glisser l’onglet du panneau vers la partie inf&eacute;rieure de l’&eacute;cran.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 25
Espace de travail
D&eacute;veloppement ou r&eacute;duction de l’inspecteur Propri&eacute;t&eacute;s
❖ Proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Cliquez deux fois sur l’onglet du panneau.
• Cliquez sur la fl&egrave;che situ&eacute;e dans l’angle sup&eacute;rieur gauche du panneau.
Affichage et d&eacute;placement des barres d’outils (Windows uniquement)
Affichage ou masquage d’une barre d’outils
❖ Choisissez Fen&ecirc;tre &gt; Barres d’outils, puis s&eacute;lectionnez l’une des options suivantes :
Principale Affiche une barre d’outils au-dessus de la fen&ecirc;tre du document, avec des boutons de commande
couramment utilis&eacute;s tels que Ouvrir, Enregistrer, Imprimer et Copier.
Modifier Affiche une barre d’outils au-dessous de la fen&ecirc;tre du document, avec des boutons utilis&eacute;s pour le
regroupement, la disposition, l’alignement et la rotation.
D&eacute;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&ecirc;tre de l’application jusqu’&agrave; l’apparition du
rectangle d’aper&ccedil;u d’emplacement.
Verrouillage d’un fichier pour emp&ecirc;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&eacute;ponde plus. Lorsque
vous r&eacute;glez AsynchronousSave sur true dans le fichier preferences.txt, Fireworks verrouille le fichier pour
emp&ecirc;cher sa modification jusqu’&agrave; ce que l’enregistrement soit termin&eacute;. Libre &agrave; vous cependant d’intervenir sur
d’autres documents Fireworks ouverts.
Les objets mis &agrave; jour pendant l'op&eacute;ration d'enregistrement ne sont pas mis &agrave; jour en mode AsynchronousSave.
D&eacute;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 &agrave; jour lorsque
AsynchronousSave=True.
Par d&eacute;faut, l’option d’enregistrement asynchrone est r&eacute;gl&eacute;e sur true sous Windows et sur false sous MacOS.
1 Recherchez le fichier preferences.txt. Sous Windows, ce fichier est dans \\&lt;nom utilisateur&gt;\Application
Data\Adobe\Fireworks CS5\French\Fireworks CS5 Preferences. Sous Mac OS, le fichier figure dans /&lt;nom
utilisateur&gt;/Library/Preferences/Adobe Fireworks CS5/fr/Fireworks CS5 Preferences.
2 D&eacute;finissez AsynchronousSave = true dans le fichier.
UTILISATION DE FIREWORKS CS5 26
Derni&egrave;re mise &agrave; 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&eacute;lectionner des documents
Lorsque votre document est agrandi, utilisez les onglets figurant en haut de la fen&ecirc;tre pour alterner entre diff&eacute;rents
documents ouverts. Le nom de fichier de chaque document ouvert appara&icirc;t dans un onglet situ&eacute; sous les boutons
d’affichage. Lorsque vous d&eacute;placez la souris sur l'onglet, l'emplacement du fichier s'affiche sous forme d'info-bulle.
Zoom et panoramique avant et arri&egrave;re
A
B
C
A. Outil Main B. Outil Zoom C. Menu contextuel D&eacute;finir le zoom
Zoom avant par incr&eacute;ments pr&eacute;d&eacute;finis
❖ Proc&eacute;dez de l’une des mani&egrave;res suivantes :
• S&eacute;lectionnez l’outil Zoom, puis cliquez pour sp&eacute;cifier le nouveau point central &agrave; l’int&eacute;rieur de la fen&ecirc;tre du
document. A chaque clic, l’image s’agrandit, passant ainsi au prochain facteur de zoom pr&eacute;d&eacute;fini.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 27
Espace de travail
• S&eacute;lectionnez un param&egrave;tre de zoom dans le menu contextuel D&eacute;finir le zoom, situ&eacute; en bas de la fen&ecirc;tre du
document.
• Dans le menu Affichage, s&eacute;lectionnez Zoom avant ou choisissez un facteur de zoom pr&eacute;d&eacute;fini.
Zoom arri&egrave;re par incr&eacute;ments pr&eacute;d&eacute;finis
❖ Proc&eacute;dez de l’une des mani&egrave;res suivantes :
• S&eacute;lectionnez l’outil Zoom, maintenez la touche Alt (Windows) ou Option (Mac OS) enfonc&eacute;e, puis cliquez &agrave;
l’int&eacute;rieur de la fen&ecirc;tre du document. Chaque clic r&eacute;duit l’affichage au prochain pourcentage pr&eacute;d&eacute;fini.
• S&eacute;lectionnez un param&egrave;tre de zoom dans le menu contextuel D&eacute;finir le zoom, situ&eacute; en bas de la fen&ecirc;tre du
document.
• Dans le menu Affichage, s&eacute;lectionnez Zoom arri&egrave;re ou choisissez un facteur de zoom pr&eacute;d&eacute;fini.
Zoom avant dans une zone sp&eacute;cifique
1 S&eacute;lectionnez l’outil Zoom.
2 Cliquez puis faites glisser le pointeur de l’outil sur la partie de l’image &agrave; agrandir.
La taille du cadre de s&eacute;lection du zoom d&eacute;termine le pourcentage exact de zoom, qui est visible dans la zone D&eacute;finir
le zoom.
Remarque : vous ne pouvez pas entrer de pourcentage de zoom dans la zone D&eacute;finir le zoom.
Zoom arri&egrave;re &agrave; partir d’une zone sp&eacute;cifique
❖ Tout en maintenant la touche Alt (Windows) ou Option (Mac OS) enfonc&eacute;e, faites glisser le pointeur de l’outil
Zoom pour d&eacute;limiter une zone de s&eacute;lection.
Retour &agrave; 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&eacute;lectionnez l’outil Main.
2 Faites glisser le pointeur Main.
Si votre translation s’&eacute;tend au-del&agrave; 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 &agrave; la fen&ecirc;tre active
❖ Dans le panneau Outils, cliquez deux fois sur l’outil Main.
Utilisation des modes d’affichage pour g&eacute;rer l’espace de travail
Dans le panneau Outils, s&eacute;lectionnez l’un des trois modes d’affichage permettant de contr&ocirc;ler la disposition de votre
espace de travail.
Mode Normal Affichage par d&eacute;faut de la fen&ecirc;tre du document.
Mode Plein &eacute;cran avec affichage des menus Affichage agrandi de la fen&ecirc;tre de document sur un arri&egrave;re-plan gris.
Les menus, les barres d’outils, les barres de d&eacute;filement et les panneaux sont visibles.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 28
Espace de travail
Mode Plein &eacute;cran Affichage agrandi de la fen&ecirc;tre de document sur un arri&egrave;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&eacute;ment un document &agrave; diff&eacute;rents niveaux de zoom dans plusieurs vues. Les
modifications que vous apportez dans un affichage sont automatiquement appliqu&eacute;es &agrave; tous les autres affichages du
m&ecirc;me document.
1 Choisissez Fen&ecirc;tre &gt; Dupliquer la fen&ecirc;tre.
2 S&eacute;lectionnez un param&egrave;tre de zoom pour la nouvelle fen&ecirc;tre.
Contr&ocirc;le de la mani&egrave;re dont un document se redessine &agrave; l’&eacute;cran
❖ Choisissez Affichage &gt; Affichage normal.
Si la commande Affichage normal est s&eacute;lectionn&eacute;e, Fireworks affiche le document avec toutes les couleurs disponibles
et tous les d&eacute;tails.
Si Affichage normal n’est pas s&eacute;lectionn&eacute;, Fireworks affiche les trac&eacute;s au format de 1 pixel de largeur sans fond. Un X
appara&icirc;t sur les images.
Modes d’affichage normal et de brouillon
Affichage des documents tels qu’ils apparaissent sur diff&eacute;rentes plateformes
Windows et Mac OSX Snow Leopard version 10.6 appliquent une valeur gamma de 2,2, par d&eacute;faut, aux &eacute;crans.
Macintosh (version pr&eacute;c&eacute;dant Snow Leopard) applique une valeur gamma de 1,8.
❖ Proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Sous Windows, s&eacute;lectionnez Affichage &gt; Gamma 1,8 pour obtenir un aper&ccedil;u du document tel qu'il sera affich&eacute;
sur le Macintosh (version pr&eacute;c&eacute;dant Snow Leopard).
• Sur le Macintosh&reg;, s&eacute;lectionnez Affichage &gt; Gamma 1,8 pour obtenir un aper&ccedil;u du document tel qu'il sera
affich&eacute; sur un Mac dont la version est ant&eacute;rieure &agrave; Snow Leopard.
Modification d’une zone de travail
Vous pouvez modifier la zone de travail &agrave; tout moment.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 29
Espace de travail
Modification de la taille de la zone de travail
1 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Choisissez Modification &gt; Zone de travail &gt; Taille de la zone de travail.
• Choisissez S&eacute;lection &gt; D&eacute;s&eacute;lectionner, cliquez sur l’outil Pointeur pour afficher les propri&eacute;t&eacute;s du document dans
l’inspecteur des propri&eacute;t&eacute;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&eacute;cifier les c&ocirc;t&eacute;s du document o&ugrave; Fireworks pourra ajouter ou supprimer
de l’espace, puis cliquez sur OK.
Remarque : l’ancre centrale est s&eacute;lectionn&eacute;e par d&eacute;faut, ce qui indique que les variations de taille de la zone de travail
se r&eacute;partissent sur tous les c&ocirc;t&eacute;s.
Modification de la couleur de la zone de travail
❖ Proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Choisissez la commande Modification &gt; Zone de travail &gt; Couleur de la zone de travail, puis s&eacute;lectionnez une
option de couleur. Pour utiliser une couleur personnalis&eacute;e, cliquez sur une couleur dans la fen&ecirc;tre contextuelle
Nuancier.
• Dans l’inspecteur des propri&eacute;t&eacute;s, choisissez S&eacute;lection &gt; D&eacute;s&eacute;lectionner, cliquez sur l’outil Pointeur pour afficher
les propri&eacute;t&eacute;s du document, puis activez la case Couleur de la zone de travail. Dans la fen&ecirc;tre contextuelle
Nuancier, s&eacute;lectionnez une couleur ou cliquez sur une couleur quelconque avec la pipette. Pour s&eacute;lectionner une
zone de travail transparente, cliquez sur le bouton Transparente dans la fen&ecirc;tre contextuelle Nuancier.
Pour modifier la couleur de la zone de travail par d&eacute;faut, cliquez sur le nuancier personnalis&eacute; dans la bo&icirc;te de
dialogue Nouveau document (voir la section &laquo; Cr&eacute;ation d’un document Fireworks &raquo; &agrave; la page 5).
Redimensionnement d’un document et de son contenu
1 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Choisissez S&eacute;lection &gt; D&eacute;s&eacute;lectionner, cliquez sur l’outil Pointeur pour afficher les propri&eacute;t&eacute;s du document dans
l’inspecteur des propri&eacute;t&eacute;s, puis cliquez sur le bouton Taille de l’image dans l’inspecteur des propri&eacute;t&eacute;s.
• Choisissez Modification &gt; Zone de travail &gt; Taille de l’image.
La bo&icirc;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&eacute;s de mesure. Si l’option R&eacute;&eacute;chantillonner l’image est d&eacute;s&eacute;lectionn&eacute;e, vous pouvez
changer la r&eacute;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&eacute;e.
4 Dans la zone R&eacute;solution, entrez une nouvelle r&eacute;solution de l’image.
Lorsque vous changez la valeur de la r&eacute;solution, vous changez &eacute;galement la dimension en pixels.
5 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Pour conserver les proportions (rapport entre les dimensions horizontale et verticale) du document,
s&eacute;lectionnez Conserver les proportions.
• Pour redimensionner la largeur ind&eacute;pendamment de la hauteur, et inversement, d&eacute;s&eacute;lectionnez Conserver les
proportions.
Derni&egrave;re mise &agrave; 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&ecirc;me aspect &agrave; une
taille diff&eacute;rente, s&eacute;lectionnez R&eacute;&eacute;chantillonner l’image.
7 S&eacute;lectionnez Page active uniquement pour n’appliquer la modification de la taille de la zone de travail qu’&agrave; la page
actuellement affich&eacute;e.
A propos du r&eacute;&eacute;chantillonnage
Fireworks r&eacute;&eacute;chantillonne (redimensionne) les images selon une m&eacute;thode qui diff&egrave;re de celle de la plupart des
applications de retouche d’images.
• Lorsqu’un objet bitmap est r&eacute;&eacute;chantillonn&eacute;, des pixels sont ajout&eacute;s ou supprim&eacute;s dans l’image pour l’agrandir ou
la r&eacute;duire.
• Lorsqu’un objet vectoriel est r&eacute;&eacute;chantillonn&eacute;, la perte de qualit&eacute; est faible dans la mesure o&ugrave; le trac&eacute; est redessin&eacute;
math&eacute;matiquement pour obtenir la taille voulue.
Dans Fireworks, les attributs des objets vectoriels sont visibles sous forme de pixels ; par cons&eacute;quent, certains
contours ou certains fonds peuvent &ecirc;tre l&eacute;g&egrave;rement diff&eacute;rents une fois le r&eacute;&eacute;chantillonnage effectu&eacute;. Cela est d&ucirc; au
fait que les pixels qui composent ces contours ou fonds doivent &ecirc;tre redessin&eacute;s.
Remarque : les rep&egrave;res, les objets zones sensibles et les objets tranches sont redimensionn&eacute;s lorsque la taille de l’image
du document est modifi&eacute;e.
Vous pouvez modifier la taille d’une image bitmap en r&eacute;glant sa r&eacute;solution ou en r&eacute;&eacute;chantillonnant l’image.
• Lorsque vous r&eacute;glez la r&eacute;solution, vous changez la taille des pixels de l’image de mani&egrave;re &agrave; faire tenir plus ou moins
de pixels dans un espace donn&eacute;. Le r&eacute;glage de la r&eacute;solution sans r&eacute;&eacute;chantillonnage ne provoque pas de perte de
donn&eacute;es.
• Lors du r&eacute;&eacute;chantillonnage, vous pouvez ajouter ou supprimer des pixels :
R&eacute;&eacute;chantillonnage positif Ajoute des pixels pour agrandir l’image. Cette m&eacute;thode risque d’entra&icirc;ner une perte de
qualit&eacute;, car les pixels ajout&eacute;s ne correspondent pas toujours &agrave; l’image d’origine.
R&eacute;&eacute;chantillonnage n&eacute;gatif Supprime des pixels pour r&eacute;duire la taille de l’image mais entra&icirc;ne une perte de donn&eacute;es
dans l’image. Cette m&eacute;thode entra&icirc;ne toujours une baisse de qualit&eacute; suite &agrave; la suppression de pixels pour
redimensionner l’image.
Rotation de la zone de travail
Appliquez une rotation &agrave; la zone de travail lorsqu’une image import&eacute;e est &agrave; l’envers ou de travers. Vous pouvez faire
pivoter le document de 180&deg;, de 90&deg; vers la droite ou de 90&deg; vers la gauche. Lorsque vous appliquez une rotation au
document, tous les objets qu’il contient subissent le m&ecirc;me mouvement.
❖ Choisissez Modification &gt; Zone de travail, puis choisissez une option de rotation.
Rognage ou ajustement de la zone de travail
D&eacute;veloppez ou r&eacute;duisez la taille de la zone de travail en fonction des objets qui la composent.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 31
Espace de travail
Zone de travail d’origine (gauche), zone de travail rogn&eacute;e (droite)
1 Choisissez S&eacute;lection &gt; D&eacute;s&eacute;lectionner pour afficher les propri&eacute;t&eacute;s du document dans l’inspecteur des propri&eacute;t&eacute;s.
2 Cliquez sur Ajuster la zone de travail dans l’inspecteur des propri&eacute;t&eacute;s.
Recadrage d’un document
Le recadrage permet de supprimer des parties inutiles d’un document. La zone de travail est redimensionn&eacute;e &agrave; la taille
d’une zone que vous d&eacute;finissez.
Par d&eacute;faut, le recadrage supprime les objets qui d&eacute;passent les limites de la zone de travail. Vous pouvez maintenir des
objets &agrave; l’ext&eacute;rieur de la zone de travail en changeant une pr&eacute;f&eacute;rence avant le recadrage.
1 S&eacute;lectionnez l’outil Recadrage
document.
dans le panneau Outils ou choisissez la commande Edition &gt; Recadrer le
2 Faites glisser un cadre de s&eacute;lection sur la zone de travail. Ajustez les poign&eacute;es de recadrage jusqu’&agrave; ce que le cadre
de s&eacute;lection d&eacute;limite la zone &agrave; conserver.
3 Cliquez deux fois &agrave; l’int&eacute;rieur du cadre de s&eacute;lection, ou appuyez sur la touche Entr&eacute;e, pour recadrer le document.
Fireworks redimensionne la zone de travail &agrave; la taille de la zone que vous avez d&eacute;finie et supprime les objets situ&eacute;s
&agrave; l’ext&eacute;rieur de la zone de travail.
Pour conserver ces objets, avant de recadrer, d&eacute;s&eacute;lectionnez Supprimer les objets pendant le recadrage dans l’onglet
Edition de la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences.
Utilisation des r&egrave;gles, des rep&egrave;res et de la grille
Les r&egrave;gles, les rep&egrave;res et la grille vous permettent de placer et d’aligner des objets. Les rep&egrave;res sont des lignes que vous
faites glisser sur la zone de travail du document &agrave; partir des r&egrave;gles. Vous pouvez utiliser des rep&egrave;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&egrave;res et les grilles ne se
trouvent pas sur un calque et ne sont pas export&eacute;s avec le document.
Les extensions Fireworks suivantes facilitent l’utilisation des rep&egrave;res :
Extension Guides Panel Lorsque vous installez cette extension, un panneau Guides appara&icirc;t sur la zone de travail. Il
permet de manipuler les rep&egrave;res dans le document ou d’exporter et d’importer des rep&egrave;res depuis un jeu de rep&egrave;res
enregistr&eacute;s au pr&eacute;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&egrave;res sur une page et de les copier sur une autre
au sein d’un m&ecirc;me document. Utilisez-la si le document Fireworks contient plusieurs pages requ&eacute;rant des rep&egrave;res
similaires. Cette extension est disponible sur http://www.adobe.com/go/learn_fw_copypasteguides_fr.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 32
Espace de travail
Extension Inherit Guides Cette extension permet de copier des rep&egrave;res depuis le gabarit ou la page active et de les
appliquer &agrave; 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&egrave;res, reportez-vous &agrave; la section &laquo; Pr&eacute;f&eacute;rences de
rep&egrave;res et de grilles &raquo; &agrave; la page 312.
Affichage et masquage de r&egrave;gles
❖ Choisissez Affichage &gt; R&egrave;gles.
Les r&egrave;gles horizontale et verticale s’affichent le long des marges de la fen&ecirc;tre de document. Les r&egrave;gles utilisent l’unit&eacute;
de mesure pixel.
Cr&eacute;ation d’un rep&egrave;re horizontal ou vertical
1 Cliquez puis faites glisser &agrave; partir de la r&egrave;gle correspondante.
2 Positionnez le rep&egrave;re &agrave; l’endroit voulu de la zone de travail, puis rel&acirc;chez le bouton de la souris.
Remarque : repositionnez le rep&egrave;re en le faisant glisser de nouveau.
D&eacute;placement d’un rep&egrave;re jusqu’&agrave; une position pr&eacute;cise
1 Cliquez deux fois sur le rep&egrave;re.
2 Entrez la nouvelle position dans la bo&icirc;te de dialogue D&eacute;placer un rep&egrave;re, puis cliquez sur OK.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 33
Espace de travail
Affichage ou masquage des rep&egrave;res ou de la grille
❖ Choisissez la commande Affichage &gt; Rep&egrave;res &gt; Afficher les rep&egrave;res ou Affichage &gt; Grille &gt; Afficher la grille.
La s&eacute;lection est appliqu&eacute;e &agrave; tous les documents ouverts dans Fireworks.
Accrochage d’objets &agrave; des rep&egrave;res ou &agrave; la grille
❖ Choisissez la commande Affichage &gt; Rep&egrave;res &gt; Accrocher aux rep&egrave;res ou Affichage &gt; Grille &gt; Accrocher &agrave; la grille.
La s&eacute;lection est appliqu&eacute;e &agrave; tous les documents ouverts dans Fireworks.
Verrouillage ou d&eacute;verrouillage de tous les rep&egrave;res
❖ Choisissez Affichage &gt; Rep&egrave;res &gt; Verrouiller les rep&egrave;res.
La s&eacute;lection est appliqu&eacute;e &agrave; tous les documents ouverts dans Fireworks.
Suppression d’un rep&egrave;re
❖ Faites glisser le rep&egrave;re en dehors de la zone de travail.
Affichage de la distance entre les rep&egrave;res
❖ Appuyez sur la touche Maj quand le pointeur est situ&eacute; entre les rep&egrave;res.
Pour afficher la distance entre les rep&egrave;res, appuyez sur la touche Maj tout en faisant glisser les rep&egrave;res dans la zone de
travail.
Rep&egrave;res comment&eacute;s
Les rep&egrave;res comment&eacute;s sont temporairement accroch&eacute;s aux rep&egrave;res pour vous aider &agrave; cr&eacute;er, aligner, modifier et
transformer des objets par rapport &agrave; d’autres objets. Pour activer des rep&egrave;res comment&eacute;s et les accrocher, choisissez
Affichage &gt; Rep&egrave;res comment&eacute;s, puis s&eacute;lectionnez Afficher les rep&egrave;res comment&eacute;s et Accrocher aux rep&egrave;res
comment&eacute;s.
Vous pouvez utiliser les rep&egrave;res comment&eacute;s comme suit :
• Lorsque vous cr&eacute;ez un objet, utilisez les rep&egrave;res comment&eacute;s pour le positionner par rapport aux objets existants.
Les outils Ligne, Rectangle, Ellipse, Polygone et Formes automatiques affichent des rep&egrave;res comment&eacute;s, ainsi que
les outils de tranche rectangulaire et circulaire.
• Lorsque vous d&eacute;placez un objet, utilisez des rep&egrave;res comment&eacute;s pour l’aligner par rapport aux autres objets.
• Lorsque vous transformez un objet, des rep&egrave;res comment&eacute;s apparaissent automatiquement pour faciliter la
transformation.
Pour modifier l’affichage des rep&egrave;res comment&eacute;s, d&eacute;finissez leurs pr&eacute;f&eacute;rences (voir &laquo; Pr&eacute;f&eacute;rences de rep&egrave;res et de
grilles &raquo; &agrave; la page 312).
Aper&ccedil;u dans navigateur
S&eacute;lectionnez Fichier &gt; Aper&ccedil;u dans le navigateur, puis s&eacute;lectionnez l'une des options.
Aper&ccedil;u de toutes les pages dans &lt;navigateur principal&gt; Ctrl+F12/Cmd+Maj+F12 Vous pouvez obtenir un aper&ccedil;u de
l'interaction entre les pages si ces derni&egrave;res sont li&eacute;es entre elles.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 34
Espace de travail
Aper&ccedil;u dans &lt;navigateur principal&gt; F12 Offre un aper&ccedil;u du document Fireworks dans votre navigateur principal. Si
un seul navigateur est install&eacute; sur votre ordinateur, Fireworks l'utilise en tant que navigateur principal. Par contre,
lorsque plusieurs navigateurs sont disponibles, vous pouvez s&eacute;lectionner un navigateur principal pour afficher les
documents Fireworks en cliquant sur Fichier &gt; Aper&ccedil;u dans le navigateur &gt; S&eacute;lectionner le navigateur principal.
Aper&ccedil;u dans Maj/Cmd+F12 Offre un aper&ccedil;u du document Fireworks dans votre navigateur secondaire. Avant
d'utiliser cette option, d&eacute;finissez votre navigateur secondaire en cliquant sur Fichier &gt; Aper&ccedil;u dans le navigateur &gt;
S&eacute;lectionner le navigateur secondaire. Recherchez et s&eacute;lectionnez le fichier EXE de votre navigateur secondaire.
Annulation et r&eacute;p&eacute;tition de plusieurs actions
Le panneau Historique r&eacute;pertorie les derni&egrave;res op&eacute;rations effectu&eacute;es dans Fireworks. Vous pouvez sp&eacute;cifier le nombre
d’&eacute;tapes dans le champ Nombre maximum d’actions annul&eacute;es de la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences de Fireworks.
Annulation et r&eacute;tablissement d’actions
1 Choisissez Fen&ecirc;tre &gt; Historique pour ouvrir le panneau Historique.
2 Faites glisser le marqueur d’annulation vers le haut ou vers le bas.
R&eacute;p&eacute;tition d’actions
1 Effectuez les actions.
2 Pour s&eacute;lectionner les actions &agrave; r&eacute;p&eacute;ter dans le panneau Historique, utilisez l’une des m&eacute;thodes suivantes :
• Cliquez sur une action pour la s&eacute;lectionner (mettre en surbrillance).
• Tout en maintenant la touche Ctrl (Windows) ou Cmde (Mac OS) enfonc&eacute;e, cliquez pour s&eacute;lectionner des
actions individuelles.
• Tout en maintenant la touche Maj enfonc&eacute;e, cliquez sur des actions pour s&eacute;lectionner une s&eacute;rie continue
d’actions.
3 Cliquez sur le bouton R&eacute;ex&eacute;cuter, en bas du panneau Historique.
Enregistrement d’actions en vue de leur r&eacute;utilisation
1 S&eacute;lectionnez les actions &agrave; enregistrer dans le panneau Historique.
2 Cliquez sur le bouton Enregistrer situ&eacute; en bas du panneau.
3 Entrez un nom de commande.
Utilisation de la commande personnalis&eacute;e enregistr&eacute;e
❖ Dans le menu Commandes, s&eacute;lectionnez le nom de la commande.
Restauration des fichiers non enregistr&eacute;s (Mac seulement)
Lorsqu’une session Fireworks prend fin &agrave; la suite d’une anomalie, les fichiers non enregistr&eacute;s sont plac&eacute;s sur le bureau.
Lorsque vous relancez Fireworks, un message vous informe de la pr&eacute;sence du dossier contenant les fichiers non
enregistr&eacute;s sur le bureau. Les fichiers sont enregistr&eacute;s par d&eacute;faut &agrave; l’emplacement suivant : Bureau\Fireworks
restaur&eacute;\&lt;horodatage&gt;.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 35
Espace de travail
Les fichiers non enregistr&eacute;s auxquels aucun nom n’a &eacute;t&eacute; attribu&eacute; sont enregistr&eacute;s sous le nom Sans titre, Sans titre (1),
Sans titre (2), etc. Les noms de fichier correspondent aux noms par d&eacute;faut g&eacute;n&eacute;r&eacute;s par Fireworks lors de la cr&eacute;ation des
fichiers. Les fichiers non enregistr&eacute;s auxquels un nom a &eacute;t&eacute; attribu&eacute; sont enregistr&eacute;s sous ce m&ecirc;me nom.
Les fichiers ne sont pas restaur&eacute;s dans les cas suivants :
• L’op&eacute;ration d’enregistrement est &agrave; l’origine du probl&egrave;me.
• La m&eacute;moire disponible est insuffisante pour restaurer les fichiers non enregistr&eacute;s.
•
DisableSaveOnCrash dans le fichier Preferences d'Adobe Fireworks CS5 est d&eacute;fini sur True.
• Le fichier ouvert n’&eacute;tait pas en cours de modification lorsque le probl&egrave;me s’est produit.
D&eacute;sactivation de la restauration des fichiers
1 Ouvrez le fichier Fireworks CS5 Preferences.txt, qui r&eacute;side dans
\Users\&lt;nom_utilisateur&gt;\Library\Preferences\Adobe Fireworks CS5\&lt;langue&gt;\.
2 R&eacute;glez DisableSaveOnCrash sur True.
Modification de l’emplacement par d&eacute;faut des fichiers restaur&eacute;s
1 Ouvrez le fichier Fireworks CS5 Preferences.txt, qui r&eacute;side dans
\Users\&lt;nom_utilisateur&gt;\Library\Preferences\Adobe Fireworks CS5\&lt;langue&gt;\.
2 Sp&eacute;cifiez l’emplacement par le biais du param&egrave;tre SaveOnCrashRecoveredFolderPath. Vous pouvez entrer un
chemin relatif ou absolu.
Derni&egrave;re mise &agrave; jour le 29/4/2010
Chapitre 4 : S&eacute;lection et transformation
d’objets
S&eacute;lection des objets
Avant de pouvoir manipuler un objet du document, s&eacute;lectionnez-le. Cela s’applique &agrave; un objet vectoriel, un trac&eacute; 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&eacute;lectionner un objet, utilisez le panneau Calques ou un outil de s&eacute;lection.
Panneau Calques Affiche chaque objet. Vous pouvez cliquer sur un objet dans le panneau Calques pour le s&eacute;lectionner
lorsque le panneau est ouvert et les calques d&eacute;velopp&eacute;s.
Outils de s&eacute;lection Chacun d’entre eux joue un r&ocirc;le sp&eacute;cifique :
L’outil Pointeur s&eacute;lectionne des objets lorsque vous cliquez sur les objets ou faites glisser une zone de
s&eacute;lection autour d’eux.
L’outil Sous-s&eacute;lection s&eacute;lectionne un objet individuel dans un groupe ou les points d’un objet vectoriel.
L’outil S&eacute;lectionner derri&egrave;re s&eacute;lectionne un objet se trouvant derri&egrave;re un autre objet.
L’outil Zone d’exportation s&eacute;lectionne une zone &agrave; exporter sous la forme d’un fichier distinct.
S&eacute;lection d’objets par clics
❖ Proc&eacute;dez de l’une des mani&egrave;res suivantes :
• D&eacute;placez l’outil Pointeur sur le trac&eacute; ou le cadre de s&eacute;lection de l’objet, puis cliquez.
• Cliquez sur le contour ou le fond de l’objet.
• S&eacute;lectionnez l’objet dans le panneau Calques.
Pour pr&eacute;visualiser ce que vous s&eacute;lectionnez lorsque vous cliquez sur un objet au-dessous du pointeur sur la zone
de travail, s&eacute;lectionnez l’option Surbrillance souris dans la cat&eacute;gorie Edition de la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences.
S&eacute;lection d’objets par glissement
❖ Faites glisser l’outil Pointeur pour inclure un ou plusieurs objets dans la zone de s&eacute;lection.
36
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 37
S&eacute;lection et transformation d’objets
D&eacute;placement ou modification d’objets &agrave; l’aide de l’outil Sous-s&eacute;lection
Utilisez l’outil Sous-s&eacute;lection pour s&eacute;lectionner, d&eacute;placer ou modifier des points sur un trac&eacute; vectoriel ou un objet
faisant partie d’un groupe.
1 S&eacute;lectionnez l’outil Sous-s&eacute;lection.
2 Effectuez une s&eacute;lection.
3 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Pour modifier un objet, faites glisser un de ses points ou l’une de ses poign&eacute;es de s&eacute;lection.
• Pour d&eacute;placer l’int&eacute;gralit&eacute; d’un objet, faites glisser le pointeur n’importe o&ugrave; dans l’objet, except&eacute; sur un point ou
une poign&eacute;e de s&eacute;lection.
S&eacute;lection d’un objet se trouvant derri&egrave;re d’autres objets
❖ Cliquez sur l’outil S&eacute;lectionner derri&egrave;re en continu au-dessus des objets empil&eacute;s, en commen&ccedil;ant par le haut
jusqu’&agrave; ce que vous s&eacute;lectionniez l’objet souhait&eacute;.
Remarque : vous pouvez &eacute;galement s&eacute;lectionner un objet difficile &agrave; atteindre en cliquant dessus dans le panneau Calques
lorsque les calques sont d&eacute;velopp&eacute;s.
Informations sur la s&eacute;lection dans l’inspecteur des propri&eacute;t&eacute;s
Lorsque vous s&eacute;lectionnez un objet, l’inspecteur des propri&eacute;t&eacute;s identifie la s&eacute;lection. La partie sup&eacute;rieure gauche de
l’inspecteur des propri&eacute;t&eacute;s contient une description de l’&eacute;l&eacute;ment en cours d’inspection et le nombre d’objets
s&eacute;lectionn&eacute;s si plusieurs objets sont s&eacute;lectionn&eacute;s. L’inspecteur des propri&eacute;t&eacute;s fournit &eacute;galement une zone pour saisir le
nom des &eacute;l&eacute;ments s&eacute;lectionn&eacute;s.
Remarque : le nom s’affiche dans la barre de titre du document &agrave; chaque fois que vous s&eacute;lectionnez cet &eacute;l&eacute;ment. En cas
d’exportation des tranches et des boutons, le nom est le nom de fichier.
(Windows uniquement) Si la barre d’&eacute;tat est activ&eacute;e, les objets s&eacute;lectionn&eacute;s sont identifi&eacute;s dans la barre d’&eacute;tat, en bas
de la fen&ecirc;tre du document.
Inspecteur des propri&eacute;t&eacute;s
Modification d’une s&eacute;lection
Lorsqu’un objet unique est s&eacute;lectionn&eacute;, vous pouvez ajouter des objets &agrave; la s&eacute;lection et d&eacute;s&eacute;lectionner les objets
s&eacute;lectionn&eacute;s. En utilisant une commande unique, vous pouvez s&eacute;lectionner ou d&eacute;s&eacute;lectionner tout ce qui se trouve sur
tous les calques du document. Vous pouvez &eacute;galement masquer le trac&eacute; de s&eacute;lection de fa&ccedil;on &agrave; pouvoir modifier un
objet s&eacute;lectionn&eacute; tout en l’affichant tel qu’il doit appara&icirc;tre sur le Web ou sur une copie imprim&eacute;e.
Ajout &agrave; la s&eacute;lection
❖ Tout en maintenant la touche Maj enfonc&eacute;e, cliquez sur des objets suppl&eacute;mentaires avec l’outil Pointeur, Sous-
s&eacute;lection ou S&eacute;lectionner derri&egrave;re.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 38
S&eacute;lection et transformation d’objets
D&eacute;s&eacute;lection d’un objet en laissant les autres objets s&eacute;lectionn&eacute;s
❖ Tout en maintenant la touche Maj enfonc&eacute;e, cliquez sur l’objet s&eacute;lectionn&eacute;.
S&eacute;lection de tout le contenu de tous les calques du document
❖ Choisissez S&eacute;lection &gt; Tout s&eacute;lectionner.
Remarque : la commande Tout s&eacute;lectionner ne s&eacute;lectionne pas les objets masqu&eacute;s.
D&eacute;s&eacute;lection de tous les objets s&eacute;lectionn&eacute;s
❖ Choisissez S&eacute;lection &gt; D&eacute;s&eacute;lectionner.
Remarque : d&eacute;s&eacute;lectionnez la pr&eacute;f&eacute;rence Modification par calque pour s&eacute;lectionner tous les objets visibles sur tous les
calques d’un document. En effet, lorsque vous s&eacute;lectionnez la pr&eacute;f&eacute;rence Modification par calque, seuls les objets du calque
actif sont s&eacute;lectionn&eacute;s. Pour plus de d&eacute;tails, reportez-vous &agrave; la section &laquo; Organisation des calques &raquo; &agrave; la page 137.
Masquage de la s&eacute;lection du trac&eacute; d’un objet s&eacute;lectionn&eacute;
❖ S&eacute;lectionnez la commande Affichage &gt; Bords.
Remarque : vous pouvez utiliser le panneau Calques ou l’inspecteur des propri&eacute;t&eacute;s pour identifier l’objet s&eacute;lectionn&eacute;
lorsque son contour et ses points sont masqu&eacute;s.
Masquage d’objets s&eacute;lectionn&eacute;s
❖ Choisissez Affichage &gt; Masquer la s&eacute;lection.
Remarque : les objets masqu&eacute;s ne sont pas export&eacute;s. (Cela ne s’applique pas aux objets Web tranches et zones sensibles
du calque Web.)
Affichage de tous les objets
❖ Choisissez Affichage &gt; Tout afficher.
Remarque : pour masquer des objets, que ceux-ci soient s&eacute;lectionn&eacute;s ou non, cliquez dans la colonne Œil du
panneau Calques (ou faites glisser le pointeur dessus).
S&eacute;lection de pixels
Vous pouvez modifier les pixels de toute la zone de travail ou s&eacute;lectionner l’un des outils de s&eacute;lection pour imposer
votre modification &agrave; une zone particuli&egrave;re d’une image :
L’outil Cadre de s&eacute;lection s&eacute;lectionne une zone de pixels rectangulaire dans une image. Pour plus d'informations, voir l'article de
Thierry Lorey.
L’outil Cadre de s&eacute;lection ovale s&eacute;lectionne une zone de pixels elliptique dans une image.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 39
S&eacute;lection et transformation d’objets
L’outil Lasso s&eacute;lectionne une zone de pixels de forme libre dans une image.
L’outil Lasso polygonal s&eacute;lectionne une zone de pixels de forme libre mais aux bords droits dans une image.
L’outil Baguette magique s&eacute;lectionne une zone de pixels de couleur similaire dans une image.
Les outils de s&eacute;lection de pixels tracent des cadres de s&eacute;lection qui d&eacute;finissent la zone de pixels s&eacute;lectionn&eacute;s. Apr&egrave;s avoir
trac&eacute; le cadre de s&eacute;lection, vous pouvez le manipuler en le d&eacute;pla&ccedil;ant, en lui ajoutant des &eacute;l&eacute;ments ou en l’utilisant pour
effectuer une autre s&eacute;lection. Vous pouvez modifier les pixels &agrave; l’int&eacute;rieur de la s&eacute;lection, appliquer des filtres aux pixels
ou effacer des pixels sans affecter les pixels se trouvant au-del&agrave; de la s&eacute;lection. Vous pouvez &eacute;galement cr&eacute;er une
s&eacute;lection flottante de pixels que vous pouvez modifier, d&eacute;placer, couper ou copier.
Options des outils de s&eacute;lection bitmap
Plusieurs options sont disponibles avec les outils utilis&eacute;s pour la s&eacute;lection d’objets bitmap.
Options de bord
Net Cr&eacute;e un cadre de s&eacute;lection avec un bord clairement d&eacute;limit&eacute;.
Lissage Permet d’&eacute;viter l’apparition de bords dentel&eacute;s sur cadre de s&eacute;lection.
Contour progressif Permet d’adoucir les bords des pixels s&eacute;lectionn&eacute;s.
Options de style de l’outil Cadre de s&eacute;lection ou Cadre de s&eacute;lection ovale
Normal Permet de cr&eacute;er un cadre de s&eacute;lection dont la hauteur et la largeur sont ind&eacute;pendantes.
Rapport fixe Contraint les proportions entre la hauteur et la largeur.
Taille fixe D&eacute;finit la hauteur et la largeur sur une dimension donn&eacute;e.
Remarque : l’outil Baguette magique poss&egrave;de &eacute;galement un param&egrave;tre Tol&eacute;rance. Pour plus d’informations, reportezvous &agrave; la section &laquo; S&eacute;lection des zones de pixels de couleur similaire &raquo; &agrave; la page 40.
Cr&eacute;ation de cadres de s&eacute;lection de pixels
Utilisez les outils de la section Bitmap du panneau Outils pour dessiner un cadre de s&eacute;lection autour des zones
sp&eacute;cifiques de pixels d’une image bitmap.
Remarque : pour modifier les param&egrave;tres de votre s&eacute;lection lorsque vous utilisez l’un de ces outils, cochez la case S&eacute;lection
interactive avant d’effectuer la s&eacute;lection.
S&eacute;lection d’une zone de pixels rectangulaire ou elliptique
1 S&eacute;lectionnez l’outil Cadre de s&eacute;lection ou Cadre de s&eacute;lection ovale.
2 D&eacute;finissez les options Style et Bord dans l’inspecteur des propri&eacute;t&eacute;s.
3 Faites glisser le pointeur pour tracer un cadre de s&eacute;lection qui d&eacute;finit la s&eacute;lection de pixels.
• Maintenez la touche Maj enfonc&eacute;e tout en faisant glisser le pointeur de l’outil Cadre de s&eacute;lection ou Cadre de
s&eacute;lection ovale afin de tracer des cadres de s&eacute;lection de forme carr&eacute;e ou circulaire. Si la case &agrave; cocher S&eacute;lection
interactive est activ&eacute;e lorsque vous faites une s&eacute;rie de s&eacute;lections, la fonction correspondante n’agit que sur la
derni&egrave;re s&eacute;lection de la s&eacute;rie.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 40
S&eacute;lection et transformation d’objets
• Pour tracer un cadre de s&eacute;lection &agrave; partir d’un point central, d&eacute;s&eacute;lectionnez tous les autres cadres de s&eacute;lection
actifs, puis dessinez votre trac&eacute; tout en maintenant la touche Alt (Windows) ou Option (Mac OS) enfonc&eacute;e.
S&eacute;lection d’une zone de pixels en forme libre
1 S&eacute;lectionnez l’outil Lasso.
2 S&eacute;lectionnez une option Bord dans l’inspecteur des propri&eacute;t&eacute;s.
3 Faites glisser le pointeur autour des pixels &agrave; s&eacute;lectionner.
Placement de points afin de cr&eacute;er un cadre de s&eacute;lection
Utilisez l’outil Lasso polygonal pour s&eacute;lectionner une zone polygonale de pixels sp&eacute;cifiques dans une image bitmap.
1 S&eacute;lectionnez l’outil Lasso polygonal.
2 S&eacute;lectionnez une option Bord dans l’inspecteur des propri&eacute;t&eacute;s.
3 D&eacute;limitez la s&eacute;lection en cliquant sur des points situ&eacute;s autour du p&eacute;rim&egrave;tre de l’objet ou de la zone en question.
Maintenez la touche Maj enfonc&eacute;e pour imposer des incr&eacute;ments de 45 degr&eacute;s aux segments du cadre de s&eacute;lection
trac&eacute; avec l’outil Lasso polygonal.
4 Pour fermer le polygone, proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Cliquez sur le point d’origine.
• Cliquez deux fois dans l’espace de travail.
S&eacute;lection des zones de pixels de couleur similaire
1 S&eacute;lectionnez l’outil Baguette magique.
2 S&eacute;lectionnez une option de bord.
3 D&eacute;finissez le niveau de tol&eacute;rance en faisant glisser le curseur de l’option correspondante dans l’inspecteur des
propri&eacute;t&eacute;s.
La tol&eacute;rance repr&eacute;sente la plage tonale s&eacute;lectionn&eacute;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&ecirc;me ton sont s&eacute;lectionn&eacute;s.
Si vous entrez la valeur 65, une gamme de tons plus &eacute;tendue est s&eacute;lectionn&eacute;e.
4 Cliquez sur la zone de couleur &agrave; s&eacute;lectionner.
Un cadre de s&eacute;lection appara&icirc;t autour de la plage de pixels s&eacute;lectionn&eacute;e.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 41
S&eacute;lection et transformation d’objets
Pixels s&eacute;lectionn&eacute;s avec une tol&eacute;rance basse (en haut), puis avec une tol&eacute;rance haute (en bas)
S&eacute;lection des couleurs similaires dans un document entier
1 S&eacute;lectionnez une zone de couleur avec un outil de cadre de s&eacute;lection ou de lasso, ou avec l’outil Baguette magique.
2 Choisissez S&eacute;lection &gt; S&eacute;lectionner les couleurs similaires.
Un ou plusieurs cadres de s&eacute;lection affichent toutes les zones contenant la plage de pixels s&eacute;lectionn&eacute;e. Cela d&eacute;pend
du param&egrave;tre Tol&eacute;rance actif de l’inspecteur des propri&eacute;t&eacute;s de l’outil Baguette magique.
Remarque : pour ajuster la tol&eacute;rance pour la commande S&eacute;lectionner les couleurs similaires, s&eacute;lectionnez l’outil
Baguette magique, puis changez le param&egrave;tre Tol&eacute;rance dans l’inspecteur des propri&eacute;t&eacute;s avant d’utiliser la commande.
Vous pouvez &eacute;galement cocher la case S&eacute;lection interactive pour modifier le param&egrave;tre de tol&eacute;rance lorsque vous
utilisez l’outil Baguette magique.
Cr&eacute;ation d’une s&eacute;lection d’apr&egrave;s les zones opaques des objets
A partir d’un objet bitmap s&eacute;lectionn&eacute;, vous pouvez cr&eacute;er une s&eacute;lection de pixels bas&eacute;e sur l’opacit&eacute; de tout objet ou
masque du panneau Calques.
1 S&eacute;lectionnez un objet bitmap dans la zone de travail.
2 Dans le panneau Calques, positionnez le pointeur sur la vignette de l’objet &agrave; utiliser pour cr&eacute;er la s&eacute;lection de pixels.
3 Maintenez la touche Alt (Windows) ou Option (Mac OS) enfonc&eacute;e.
Le pointeur change afin de vous indiquer que vous &ecirc;tes sur le point de s&eacute;lectionner la couche alpha, ou zone opaque,
de l’objet.
4 Cliquez sur la vignette.
Une nouvelle s&eacute;lection de pixels est cr&eacute;&eacute;e sur l’objet bitmap s&eacute;lectionn&eacute;.
5 (Facultatif) Pour &eacute;tendre la s&eacute;lection, cliquez sur un autre objet du panneau Calques tout en maintenant les touches
Alt+Maj (Windows) ou Option+Maj (Mac OS) enfonc&eacute;es.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 42
S&eacute;lection et transformation d’objets
Pour r&eacute;duire la s&eacute;lection, cliquez sur des objets tout en maintenant les touches Ctrl+Maj enfonc&eacute;es.
Suppression d’un cadre de s&eacute;lection
Vous pouvez supprimer un cadre de s&eacute;lection sans affecter le document.
❖ Proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Tracez un autre cadre de s&eacute;lection.
• Cliquez en dehors de la s&eacute;lection active avec un outil de cadre de s&eacute;lection ou de lasso.
• Appuyez sur la touche Echap.
Ajustement des cadres de s&eacute;lection
Repositionnement d’une s&eacute;lection pendant sa cr&eacute;ation
1 Commencez par faire glisser le pointeur afin de tracer la s&eacute;lection.
2 Maintenez la barre d’espace enfonc&eacute;e sans rel&acirc;cher le bouton de la souris.
3 Faites glisser le cadre de s&eacute;lection &agrave; un autre emplacement de la zone de travail.
4 Rel&acirc;chez la barre d’espace tout en maintenant le bouton de la souris enfonc&eacute;.
5 Continuez &agrave; faire glisser le pointeur pour tracer la s&eacute;lection.
D&eacute;placement d’un cadre de s&eacute;lection existant
❖ Proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Faites glisser le cadre de s&eacute;lection &agrave; l’aide de l’outil Cadre de s&eacute;lection, Lasso ou Baguette magique.
• D&eacute;placez le cadre de s&eacute;lection par incr&eacute;ments d’un pixel avec les touches fl&eacute;ch&eacute;es.
• Appuyez sur la touche Maj, et d&eacute;placez le cadre de s&eacute;lection par incr&eacute;ments de 10 pixels avec les touches fl&eacute;ch&eacute;es.
Ajout de pixels &agrave; une s&eacute;lection existante
1 S&eacute;lectionnez un outil de s&eacute;lection bitmap quelconque.
2 Tout en maintenant la touche Maj enfonc&eacute;e, tracez d’autres cadres de s&eacute;lection.
3 Pour continuer &agrave; ajouter des &eacute;l&eacute;ments &agrave; la s&eacute;lection, r&eacute;p&eacute;tez les &eacute;tapes 1 et 2 avec un outil de s&eacute;lection bitmap.
Les cadres de s&eacute;lection superpos&eacute;s s’unissent pour former un cadre de s&eacute;lection contigu.
Soustraction de pixels d’une s&eacute;lection
❖ Tout en maintenant la touche Alt (Windows) ou Option (Mac OS) enfonc&eacute;e, utilisez un outil de s&eacute;lection bitmap
pour s&eacute;lectionner la zone de pixels &agrave; retirer.
S&eacute;lection d’une partie d’un cadre de s&eacute;lection existant
S&eacute;lectionnez une partie d’un cadre de s&eacute;lection existant en dessinant un nouveau cadre de s&eacute;lection recouvrant le cadre
d’origine.
1 Maintenez les touches Alt+Maj (Windows) ou Option+Maj (Mac OS) enfonc&eacute;es pendant que vous dessinez un
cadre de s&eacute;lection superpos&eacute; au cadre de s&eacute;lection d’origine.
2 Rel&acirc;chez le bouton de la souris.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 43
S&eacute;lection et transformation d’objets
Seuls les pixels situ&eacute;s &agrave; l’intersection des deux cadres de s&eacute;lection sont s&eacute;lectionn&eacute;s.
Inversion d’une s&eacute;lection de pixels
En partant de la s&eacute;lection de pixels active, vous pouvez cr&eacute;er une autre s&eacute;lection de pixels utilis&eacute;e pour s&eacute;lectionner
tous les pixels d&eacute;s&eacute;lectionn&eacute;s.
1 S&eacute;lectionnez des pixels en utilisant un outil de s&eacute;lection bitmap.
2 Choisissez S&eacute;lection &gt; S&eacute;lection inverse pour s&eacute;lectionner tous les pixels qui n’&eacute;taient pas s&eacute;lectionn&eacute;s initialement.
Application d’un contour progressif &agrave; une s&eacute;lection de pixels
Le contour progressif cr&eacute;e un effet de transparence pour les pixels s&eacute;lectionn&eacute;s.
1 Choisissez S&eacute;lection &gt; Contour progressif.
2 Entrez une intensit&eacute; dans la bo&icirc;te de dialogue Contour progressif.
3 Si n&eacute;cessaire, changez le nombre dans la bo&icirc;te de dialogue Contour progressif afin d’ajuster l’intensit&eacute;.
Pour afficher l’aspect de la s&eacute;lection au contour progressif sans les pixels plac&eacute;s autour, choisissez S&eacute;lection &gt;
Inverser la s&eacute;lection, et appuyez sur la touche Suppr.
Extension ou r&eacute;duction d’un cadre de s&eacute;lection
Une fois le cadre de s&eacute;lection trac&eacute; pour s&eacute;lectionner les pixels, vous pouvez &eacute;tendre ou r&eacute;duire sa bordure.
1 Apr&egrave;s avoir trac&eacute; le cadre de s&eacute;lection, choisissez S&eacute;lection &gt; Etendre le cadre de s&eacute;lection.
2 Entrez le nombre de pixels &agrave; utiliser pour d&eacute;velopper ou contracter la bordure du cadre de s&eacute;lection, puis cliquez
sur OK.
S&eacute;lection d’une zone autour d’un cadre de s&eacute;lection existant
Pour ajouter des effets graphiques sp&eacute;ciaux &agrave; un cadre de s&eacute;lection, cr&eacute;ez un cadre suppl&eacute;mentaire englobant le cadre
existant.
1 Apr&egrave;s avoir trac&eacute; un cadre de s&eacute;lection, choisissez S&eacute;lection &gt; D&eacute;limiter le cadre de s&eacute;lection.
2 Entrez la largeur du cadre de s&eacute;lection &agrave; placer autour du cadre existant, puis cliquez sur OK.
Lissage de la bordure d’un cadre de s&eacute;lection
Supprimez les pixels superflus visibles sur la bordure d’une s&eacute;lection de pixels ou d’un cadre de s&eacute;lection apr&egrave;s
l’utilisation de l’outil Baguette magique.
1 Choisissez S&eacute;lection &gt; Lisser le cadre de s&eacute;lection.
2 Saisissez un rayon pour sp&eacute;cifier le niveau de lissage souhait&eacute;, puis cliquez sur OK.
S&eacute;lection de pixels avant et apr&egrave;s le lissage
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 44
S&eacute;lection et transformation d’objets
Conversion, transfert ou enregistrement de cadres de s&eacute;lection
Conversion d’un cadre de s&eacute;lection en trac&eacute;
Vous pouvez convertir une s&eacute;lection bitmap en objet vectoriel en tra&ccedil;ant un cadre de s&eacute;lection autour de la partie de
l’objet bitmap &agrave; convertir. Cette manipulation est pratique pour commencer &agrave; cr&eacute;er une animation en tra&ccedil;ant une
s&eacute;lection d’apr&egrave;s un objet bitmap.
❖ Apr&egrave;s avoir trac&eacute; un cadre de s&eacute;lection, choisissez S&eacute;lection &gt; Convertir le cadre de s&eacute;lection en trac&eacute;.
Transfert d’un cadre de s&eacute;lection vers un autre objet bitmap
Vous pouvez transf&eacute;rer un cadre de s&eacute;lection d’un objet bitmap vers un autre, ou vers un masque.
1 Effectuez une s&eacute;lection en tra&ccedil;ant le cadre de s&eacute;lection.
2 Dans le panneau Calques, s&eacute;lectionnez un autre objet bitmap pr&eacute;sent sur le calque de votre choix.
Pour plus d’informations, reportez-vous &agrave; la section &laquo; Masquage &raquo; &agrave; la page 140.
Enregistrement ou restauration d’un cadre de s&eacute;lection
1 Choisissez S&eacute;lection &gt; Enregistrer la s&eacute;lection bitmap ou S&eacute;lection &gt; Restaurer la s&eacute;lection bitmap.
2 Dans le menu Document, s&eacute;lectionnez le document ouvert contenant la s&eacute;lection enregistr&eacute;e.
3 Dans le menu S&eacute;lection, s&eacute;lectionnez Nouveau ou une s&eacute;lection pr&eacute;c&eacute;demment enregistr&eacute;e que vous souhaitez
modifier.
4 Si vous s&eacute;lectionnez Nouveau, entrez le nom de votre nouvelle s&eacute;lection.
5 (Pour la restauration uniquement) Pour inverser la s&eacute;lection restaur&eacute;e, cochez la case Inverser.
6 S&eacute;lectionnez l’une des options de la section Op&eacute;ration :
Remarque : si vous enregistrez une nouvelle s&eacute;lection, toutes les options de modification ci-dessous sont d&eacute;sactiv&eacute;es.
Nouvelle s&eacute;lection Permet de remplacer la s&eacute;lection active dans le document actif par celle sp&eacute;cifi&eacute;e dans la
zone S&eacute;lection.
Ajouter &agrave; la s&eacute;lection Permet d’ajouter la s&eacute;lection active &agrave; celle sp&eacute;cifi&eacute;e dans les zones Document et S&eacute;lection.
Soustraire de la s&eacute;lection Permet de soustraire la s&eacute;lection active de celle sp&eacute;cifi&eacute;e dans les zones Document
et S&eacute;lection.
Intersection avec la s&eacute;lection Permet de combiner la s&eacute;lection active avec celle sp&eacute;cifi&eacute;e dans les zones Document
et S&eacute;lection.
7 Cliquez sur OK, puis r&eacute;p&eacute;tez ce processus pour chaque cadre de s&eacute;lection &agrave; enregistrer ou &agrave; restaurer.
Suppression d’un cadre de s&eacute;lection enregistr&eacute;
Remarque : cette fonction est activ&eacute;e uniquement si un document ouvert contient au moins une s&eacute;lection enregistr&eacute;e.
1 Choisissez S&eacute;lection &gt; Supprimer la s&eacute;lection bitmap.
2 Dans le menu Document, s&eacute;lectionnez le document ouvert contenant la s&eacute;lection enregistr&eacute;e.
3 Dans le menu S&eacute;lection, choisissez la s&eacute;lection.
UTILISATION DE FIREWORKS CS5 45
Derni&egrave;re mise &agrave; jour le 29/4/2010
S&eacute;lection et transformation d’objets
Copie ou d&eacute;placement du contenu d’un cadre de s&eacute;lection
Lorsque vous utilisez un outil de s&eacute;lection pour faire glisser un cadre de s&eacute;lection vers un nouvel emplacement, le cadre
est d&eacute;plac&eacute;, mais pas son contenu. Pour copier ou d&eacute;placer les pixels s&eacute;lectionn&eacute;s, utilisez l’outil Pointeur ou un
outil bitmap tout en maintenant une touche de modification enfonc&eacute;e.
En maintenant les touches de modification enfonc&eacute;es comme indiqu&eacute; ci-dessous, vous pouvez d&eacute;placer et copier des
s&eacute;lections &agrave; l’aide des touches fl&eacute;ch&eacute;es. Pour effectuer des d&eacute;placements par incr&eacute;ments de 10 pixels, maintenez
&eacute;galement la touche Maj enfonc&eacute;e.
D&eacute;placement du contenu d’un cadre de s&eacute;lection
1 Effectuez une s&eacute;lection de pixels avec un outil de s&eacute;lection bitmap.
2 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
• S&eacute;lectionnez l’un des outils de la section Bitmap du panneau Outils, puis faites glisser la s&eacute;lection tout en
maintenant la touche Ctrl (Windows) ou Cmde (Mac OS) enfonc&eacute;e.
• Faites glisser la s&eacute;lection &agrave; l’aide de l’outil Pointeur.
Copie du contenu d’un cadre de s&eacute;lection
❖ Effectuez l’une des op&eacute;rations suivantes :
• Faites glisser la s&eacute;lection &agrave; l’aide de l’outil Sous-s&eacute;lection
.
• Faites glisser la s&eacute;lection &agrave; l’aide de l’outil Pointeur tout en maintenant la touche Alt (Windows) ou Option
(Mac OS) enfonc&eacute;e.
• Faites glisser la s&eacute;lection &agrave; l’aide de l’un des outils bitmap tout en maintenant les touches Ctrl+Alt (Windows)
ou Cmde+Option (Mac OS) enfonc&eacute;es.
Remarque : lorsque vous utilisez l’une des proc&eacute;dures ci-dessus, la s&eacute;lection d&eacute;plac&eacute;e ou copi&eacute;e fait toujours partie de
l’objet bitmap actif. Pour cr&eacute;er un objet bitmap &agrave; partir d’une s&eacute;lection de pixels, suivez la proc&eacute;dure ci-dessous.
Insertion d’un nouvel objet bitmap par copie d’une s&eacute;lection
1 S&eacute;lectionnez une zone de pixels en utilisant un outil de s&eacute;lection de pixels.
2 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Choisissez Edition &gt; Insertion &gt; Bitmap par Couper.
Un nouvel objet bitmap bas&eacute; sur la s&eacute;lection de pixels est cr&eacute;&eacute; dans le calque actuel, et les pixels s&eacute;lectionn&eacute;s sont
supprim&eacute;s de l’objet bitmap d’origine.
• Choisissez Edition &gt; Insertion &gt; Bitmap par Copier.
Un nouvel objet bitmap bas&eacute; sur la s&eacute;lection de pixels est cr&eacute;&eacute; dans le calque actuel. Dans le panneau Calques,
une vignette du nouvel objet bitmap appara&icirc;t dans le calque actif, au-dessus de l’objet &agrave; partir duquel il a coup&eacute;
ou copi&eacute;.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 46
S&eacute;lection et transformation d’objets
Edition d’objets s&eacute;lectionn&eacute;s
D&eacute;placement, duplication ou suppression d’objets
D&eacute;placement d’une s&eacute;lection
❖ Proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Faites-la glisser avec l’outil Pointeur, Sous-s&eacute;lection ou S&eacute;lectionner derri&egrave;re.
• Appuyez sur l’une des touches fl&eacute;ch&eacute;es pour d&eacute;placer la s&eacute;lection par incr&eacute;ments d’un pixel.
• Tout en maintenant la touche Maj enfonc&eacute;e, appuyez sur une touche fl&eacute;ch&eacute;e pour d&eacute;placer la s&eacute;lection par
incr&eacute;ments de 10 pixels.
• Dans l’inspecteur des propri&eacute;t&eacute;s, entrez les coordonn&eacute;es x et y de l’emplacement du coin sup&eacute;rieur gauche de la
s&eacute;lection.
• Entrez les coordonn&eacute;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&eacute;rieur du panneau.
D&eacute;placement ou copie d’objets s&eacute;lectionn&eacute;s par collage
1 S&eacute;lectionnez un ou plusieurs objets.
2 Choisissez Edition &gt; Couper ou Edition &gt; Copier.
3 Choisissez Edition &gt; Coller.
Duplication d’un ou plusieurs objets s&eacute;lectionn&eacute;s
❖ Choisissez Edition &gt; Dupliquer.
En r&eacute;p&eacute;tant la commande, les doublons de l’objet s&eacute;lectionn&eacute; s’affichent dans une disposition en cascade par rapport
&agrave; l’original. Les doublons s’affichent 10 pixels plus bas et 10 pixels &agrave; droite du doublon pr&eacute;c&eacute;dent. L’objet dupliqu&eacute; le
plus r&eacute;cent devient l’objet s&eacute;lectionn&eacute;.
Clonage d’une s&eacute;lection
❖ Choisissez Edition &gt; Cloner.
Le clone de la s&eacute;lection est plac&eacute; juste devant l’original et devient l’objet s&eacute;lectionn&eacute;.
Remarque : pour &eacute;loigner, pixel par pixel, un clone s&eacute;lectionn&eacute; de l’original, utilisez les touches fl&eacute;ch&eacute;es en maintenant
ou non la touche Maj enfonc&eacute;e. Ce proc&eacute;d&eacute; est pratique pour conserver une certaine distance entre des clones ou
l’alignement vertical ou horizontal des clones.
Suppression d’objets s&eacute;lectionn&eacute;s
❖ Proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Appuyez sur la touche Suppr ou Retour arri&egrave;re.
• Choisissez Edition &gt; Effacer ou Edition &gt; Couper.
• Cliquez sur l’objet avec le bouton droit de la souris (Windows) ou tout en maintenant la touche Ctrl enfonc&eacute;e
(Mac OS), puis choisissez Edition &gt; Couper dans le menu contextuel.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 47
S&eacute;lection et transformation d’objets
Annulation ou d&eacute;s&eacute;lection d’une s&eacute;lection
❖ Proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Choisissez S&eacute;lection &gt; D&eacute;s&eacute;lectionner.
• Si vous utilisez l’outil Cadre de s&eacute;lection, Cadre de s&eacute;lection ovale ou Lasso, cliquez sur l’image, mais hors de la
zone s&eacute;lectionn&eacute;e.
• Appuyez sur la touche Echap.
Transformation et d&eacute;formation des objets et des s&eacute;lections
Vous pouvez transformer un objet ou un groupe s&eacute;lectionn&eacute;, ou encore une s&eacute;lection de pixels, en utilisant les outils
et les commandes de menu de mise &agrave; l’&eacute;chelle, d’inclinaison et de distorsion :
L’outil Mise &agrave; l’&eacute;chelle permet d’agrandir ou de r&eacute;duire un objet.
L’outil Inclinaison permet d’incliner un objet le long d’un axe sp&eacute;cifi&eacute;.
L’outil Distorsion d&eacute;place les c&ocirc;t&eacute;s ou les coins d’un objet conform&eacute;ment &agrave; la direction dans laquelle vous faites glisser une
poign&eacute;e de s&eacute;lection tandis que l’outil est actif. C’est utile pour cr&eacute;er des effets 3D.
Lorsque vous s&eacute;lectionnez un outil de transformation quelconque ou la commande de menu Transformer,
Adobe&reg; Fireworks&reg; affiche des poign&eacute;es de transformation autour des objets s&eacute;lectionn&eacute;s.
A
B
A. Point central B. Poign&eacute;es de transformation
Objet pivot&eacute;, mis &agrave; l’&eacute;chelle, inclin&eacute;, tordu et retourn&eacute; verticalement et horizontalement
Transformation d’objets s&eacute;lectionn&eacute;s &agrave; l’aide des poign&eacute;es de transformation
1 S&eacute;lectionnez un outil de transformation.
Lorsque vous d&eacute;placez le pointeur sur les poign&eacute;es de s&eacute;lection ou &agrave; proximit&eacute; de ces poign&eacute;es, il change pour
refl&eacute;ter la transformation actuelle.
2 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Placez le pointeur &agrave; proximit&eacute; d’un coin, puis faites-le glisser en cliquant dessus pour effectuer une rotation.
• Faites glisser une poign&eacute;e de transformation pour effectuer une transformation conform&eacute;ment &agrave; l’outil de
transformation actif.
UTILISATION DE FIREWORKS CS5 48
Derni&egrave;re mise &agrave; jour le 29/4/2010
S&eacute;lection et transformation d’objets
3 Cliquez deux fois &agrave; l’int&eacute;rieur de la fen&ecirc;tre ou appuyez sur la touche Entr&eacute;e pour appliquer vos changements.
Redimensionnement d’un objet s&eacute;lectionn&eacute;
La mise &agrave; l’&eacute;chelle (synonyme de redimensionnement) d’un objet permet de l’agrandir ou de le r&eacute;duire &agrave; l’horizontale,
&agrave; la verticale ou sur les deux axes. Pour des informations sur les attributs de mise &agrave; l'&eacute;chelle, voir l'article de Thierry
Lorey.
1 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
•
S&eacute;lectionnez l’outil Mise &agrave; l’&eacute;chelle
.
• Choisissez Modification &gt; Transformation &gt; Mise &agrave; l’&eacute;chelle.
2 Faites glisser les poign&eacute;es de transformation :
• Pour mettre l’objet &agrave; l’&eacute;chelle horizontalement et verticalement, faites glisser une poign&eacute;e d’angle. Si vous
appuyez sur la touche Maj, les proportions sont respect&eacute;es lors de la mise &agrave; l’&eacute;chelle.
• Pour mettre l’objet &agrave; l’&eacute;chelle horizontalement ou verticalement, faites glisser une poign&eacute;e lat&eacute;rale.
• Pour mettre l’objet &agrave; l’&eacute;chelle &agrave; partir du centre, appuyez sur la touche Alt (Windows) ou Option (Mac) tout en
faisant glisser l’une des poign&eacute;es.
Redimensionnement/mise &agrave; l'&eacute;chelle contours et des effets lorsque l'objet associ&eacute; est
redimensionn&eacute;
Vous pouvez choisir les effets de mise &agrave; l'&eacute;chelle et les contours &agrave; appliquer aux objets de fa&ccedil;on proportionnelle lors de
leur redimensionnement.
Remarque : Pour la mise &agrave; l'&eacute;chelle normale et la mise &agrave; l’&eacute;chelle en 9 tranches, les contours sont mis &agrave; l'&eacute;chelle en
appliquant les param&egrave;tres de la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences ou du panneau Info.
❖ Proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Cliquez sur Edition &gt; Pr&eacute;f&eacute;rences (Windows) ou Fireworks &gt; Pr&eacute;f&eacute;rences (Mac OS). Dans la cat&eacute;gorie G&eacute;n&eacute;ral,
s&eacute;lectionnez Mise &agrave; l'&eacute;chelle des contours et des effets.
• S&eacute;lectionnez Fen&ecirc;tre &gt; Info. Dans le menu Options du panneau Info, s&eacute;lectionnez Attributs d'&eacute;chelle.
Redimensionnement de l’ensemble des objets s&eacute;lectionn&eacute;s
Vous pouvez s&eacute;lectionner des objets dans la zone de travail et les redimensionner &agrave; l’horizontale, &agrave; la verticale ou sur
les deux axes.
1 S&eacute;lectionnez les objets de la zone de travail &agrave; l’aide de l’outil Pointeur.
2 S&eacute;lectionnez Commandes &gt; Redimen. Obj. s&eacute;lectionn&eacute;s.
3 Redimensionnez les objets &agrave; l’horizontale ou &agrave; la verticale &agrave; l’aide des contr&ocirc;les de redimensionnement de la bo&icirc;te
de dialogue, puis cliquez sur le bouton Appliquer.
Remarque : s&eacute;lectionnez les contr&ocirc;les d’agrandissement ou de r&eacute;duction pour ajuster les incr&eacute;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&eacute;es de transformation, proc&eacute;dez de l’une des mani&egrave;res suivantes :
•
S&eacute;lectionnez l’outil Inclinaison
.
UTILISATION DE FIREWORKS CS5 49
Derni&egrave;re mise &agrave; jour le 29/4/2010
S&eacute;lection et transformation d’objets
• Choisissez Modification &gt; Transformation &gt; Inclinaison.
2 Faites glisser une poign&eacute;e pour incliner l’objet.
Pour cr&eacute;er l’illusion de perspective, faites glisser un point d’angle.
3 Cliquez deux fois sur le document ou appuyez sur la touche Entr&eacute;e.
Distorsion des objets
Vous pouvez changer la taille et les proportions d’un objet en faisant glisser une poign&eacute;e de s&eacute;lection avec
l’outil Distorsion.
1 Pour afficher les poign&eacute;es de transformation, proc&eacute;dez de l’une des mani&egrave;res suivantes :
•
S&eacute;lectionnez l’outil Distorsion
.
• Choisissez Modification &gt; Transformation &gt; Distorsion.
2 Faites glisser une poign&eacute;e pour appliquer la distorsion &agrave; l’objet.
3 Cliquez deux fois dans la fen&ecirc;tre ou appuyez sur la touche Entr&eacute;e.
Rotation ou renversement des objets
La rotation et le renversement font pivoter un objet sur son centre.
Pour cr&eacute;er l’illusion de perspective, sugg&eacute;rant qu’un objet pivote en trois dimensions, reportez-vous &agrave; la section
&laquo; Inclinaison des objets &raquo; &agrave; la page 48.
Rotation d’un objet s&eacute;lectionn&eacute; &agrave; 90 ou 180 degr&eacute;s
❖ Choisissez Modification &gt; Transformation, puis s&eacute;lectionnez une commande de rotation dans le sous-menu.
Rotation d’un objet s&eacute;lectionn&eacute; par glissement
1
S&eacute;lectionnez un outil de transformation.
2 Eloignez le pointeur de l’objet jusqu’&agrave; ce que le pointeur de rotation s’affiche.
3 Faites glisser l’objet pour le faire pivoter.
Pour imposer &agrave; la rotation des incr&eacute;ments de 15 degr&eacute;s par rapport &agrave; l’horizon, faites glisser le pointeur tout en
maintenant la touche Maj enfonc&eacute;e.
4 Cliquez deux fois &agrave; l’int&eacute;rieur de la fen&ecirc;tre ou appuyez sur la touche Entr&eacute;e pour appliquer vos changements.
D&eacute;placement de l’axe de rotation
❖ Faites glisser le point central hors du centre.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 50
S&eacute;lection et transformation d’objets
Red&eacute;finition de l’axe de rotation au centre de la s&eacute;lection
❖ Proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Cliquez deux fois sur le point central.
• Appuyez sur la touche Echap pour d&eacute;s&eacute;lectionner l’objet, puis res&eacute;lectionnez-le.
Renversement d’un objet avec maintien de sa position relative
❖ Choisissez Modification &gt; Transformation &gt; Sym&eacute;trie axe horizontal ou Sym&eacute;trie axe vertical.
Transformation num&eacute;rique des objets
Au lieu de faire glisser un objet pour le mettre &agrave; l’&eacute;chelle, le redimensionner ou le faire pivoter, vous pouvez le
transformer en entrant des valeurs sp&eacute;cifiques. Pour cela, utilisez l’inspecteur des propri&eacute;t&eacute;s, le panneau Info ou la
commande Transformation num&eacute;rique.
❖ Dans l’inspecteur des propri&eacute;t&eacute;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&eacute;t&eacute;s, cliquez sur la fl&egrave;che d’extension pour
afficher toutes les propri&eacute;t&eacute;s.
Mise &agrave; l’&eacute;chelle ou rotation des objets s&eacute;lectionn&eacute;s &agrave; l’aide de la commande
Transformation num&eacute;rique
1 Choisissez Modification &gt; Transformation &gt; Transformation num&eacute;rique.
2 S&eacute;lectionnez le type de transformation &agrave; effectuer dans le menu contextuel.
3 S&eacute;lectionnez Conserver les proportions pour pr&eacute;server les proportions horizontales et verticales pendant la mise &agrave;
l’&eacute;chelle ou le redimensionnement d’une s&eacute;lection.
4 S&eacute;lectionnez Attributs d’&eacute;chelle pour transformer le fond, le contour et les effets en m&ecirc;me temps que l’objet lui-
m&ecirc;me.
5 D&eacute;s&eacute;lectionnez Attributs d’&eacute;chelle pour transformer uniquement le trac&eacute;.
6 Saisissez des valeurs num&eacute;riques pour transformer la s&eacute;lection, puis cliquez sur OK.
Affichage des valeurs de transformation num&eacute;rique
Utilisez le panneau Info pour afficher les valeurs des transformations num&eacute;riques de l’objet actuellement s&eacute;lectionn&eacute;.
Ces informations sont mises &agrave; jour pendant la modification de l’objet.
❖ Choisissez Fen&ecirc;tre &gt; Info.
Mise &agrave; l’&eacute;chelle en 9 tranches
La mise &agrave; l’&eacute;chelle en 9 tranches permet de mettre &agrave; l’&eacute;chelle des objets vectoriels et des objets bitmap sans distorsion
g&eacute;om&eacute;trique ; ils conservent ainsi les aspects d’&eacute;l&eacute;ments cl&eacute;s tels que le texte ou des angles arrondis.
Il est impossible d’appliquer la mise &agrave; l’&eacute;chelle en 9 tranches aux &eacute;l&eacute;ments suivants :
• Texte
• Symbole contenant du texte
UTILISATION DE FIREWORKS CS5 51
Derni&egrave;re mise &agrave; jour le 29/4/2010
S&eacute;lection et transformation d’objets
• Groupe contenant du texte pivot&eacute;/d&eacute;form&eacute;/inclin&eacute;
Remarque : Si vous appliquez la mise &agrave; l’&eacute;chelle en 9 tranches &agrave; un groupe ou symbole contenant du texte, celui-ci est mis
&agrave; l’&eacute;chelle mais pas avec la m&eacute;thode en 9 tranches.
Dans Fireworks, vous pouvez utiliser deux m&eacute;thodes de mise &agrave; l’&eacute;chelle en 9 tranches : la mise &agrave; l’&eacute;chelle par symboles,
avec utilisation de rep&egrave;res de d&eacute;coupe permanents r&eacute;ajustables, et la mise &agrave; l’&eacute;chelle standard avec rep&egrave;res temporaires
applicables une seule fois. La mise &agrave; l’&eacute;chelle par symboles est parfaitement adapt&eacute;e aux objets que vous envisagez de
r&eacute;utiliser plusieurs fois. La mise &agrave; l’&eacute;chelle standard, quant &agrave; elle, convient pour les r&eacute;glages appliqu&eacute;s rapidement et
une seule fois aux objets bitmap ou aux formes simples int&eacute;gr&eacute;s &agrave; vos maquettes.
Pour visionner un didacticiel vid&eacute;o sur la cr&eacute;ation d’objets extensibles &agrave; l’aide d’une mise &agrave; l’&eacute;chelle en 9 tranches,
acc&eacute;der &agrave; www.adobe.com/go/lrvid4036_fw_fr. L’article de Sarthak Singhal, accessible &agrave; l’adresse
http://www.adobe.com/go/learn_fw_9slicescaling_fr contient une d&eacute;monstration de l’utilisation de la mise &agrave; l’&eacute;chelle
en 9 tranches.
Pour b&eacute;n&eacute;ficier d’une souplesse optimale lors des mises &agrave; l’&eacute;chelle, la tranche centrale doit &ecirc;tre la plus &eacute;tendue possible.
(Si un objet est tr&egrave;s r&eacute;duit, Fireworks limite les tranches qui l’entourent &agrave; leur taille d’origine.)
Voir aussi
&laquo; Symboles &raquo; &agrave; la page 160
&laquo; Ouverture de graphiques cr&eacute;&eacute;s dans d’autres applications &raquo; &agrave; la page 7
&laquo; Pr&eacute;f&eacute;rences de rep&egrave;res et de grilles &raquo; &agrave; la page 312
Symboles de mise &agrave; l’&eacute;chelle en 9 tranches
Application de rep&egrave;res 9 tranches &agrave; 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&eacute;t&eacute;s, s&eacute;lectionnez Activer les rep&egrave;res de mise &agrave; l’&eacute;chelle en 9 tranches.
3 D&eacute;placez les rep&egrave;res, et placez-les de fa&ccedil;on appropri&eacute;e sur le bouton ou symbole. V&eacute;rifiez que les diff&eacute;rentes parties
du symbole que vous ne souhaitez pas d&eacute;former lors de la mise &agrave; l’&eacute;chelle (les angles, par exemple) se trouvent en
dehors des rep&egrave;res.
Les rep&egrave;res de mise &agrave; l’&eacute;chelle en 9 tranches sont positionn&eacute;s de mani&egrave;re &agrave; &eacute;viter toute d&eacute;formation des angles pendant le redimensionnement
du bouton.
4 (Facultatif) Verrouillez les rep&egrave;res : dans le panneau Propri&eacute;t&eacute;s, s&eacute;lectionnez Verrouiller les rep&egrave;res de mise &agrave;
l’&eacute;chelle en 9 tranches.
5 Pour revenir &agrave; la page contenant les rep&egrave;res, cliquez sur l’ic&ocirc;ne de page situ&eacute;e en haut du document
6 Si n&eacute;cessaire, redimensionnez le symbole &agrave; l’aide de l’outil Mise &agrave; l’&eacute;chelle
.
.
UTILISATION DE FIREWORKS CS5 52
Derni&egrave;re mise &agrave; jour le 29/4/2010
S&eacute;lection et transformation d’objets
Le bouton est redimensionn&eacute; sans d&eacute;formation des angles.
Apr&egrave;s l’application de rep&egrave;res 9 tranches &agrave; un symbole, vous pouvez imbriquer ce dernier dans les zones prot&eacute;g&eacute;es
d’autres symboles de mise &agrave; l’&eacute;chelle en 9 tranches, en cr&eacute;ant des objets complexes mis &agrave; la bonne &eacute;chelle.
Voir aussi
&laquo; Symboles &raquo; &agrave; la page 160
Mise &agrave; l’&eacute;chelle en une dimension avec trois tranches
Si vous envisagez d’appliquer &agrave; un objet une mise &agrave; l’&eacute;chelle en une seule dimension, vous pouvez utiliser trois tranches
au lieu de neuf.
❖ Ex&eacute;cutez la proc&eacute;dure de mise &agrave; l’&eacute;chelle en 9 tranches standard, mais, &agrave; l’&eacute;tape 3, proc&eacute;dez de l’une des mani&egrave;res
suivantes :
• Pour une mise &agrave; l’&eacute;chelle verticale, faites glisser les rep&egrave;res de d&eacute;coupe horizontaux vers le bord de l’objet.
• Pour une mise &agrave; l’&eacute;chelle horizontale, faites glisser les rep&egrave;res verticaux vers le bord.
Identification des symboles qui utilisent la mise &agrave; l’&eacute;chelle en 9 tranches
❖ Dans le panneau Biblioth&egrave;que de documents, cliquez deux fois sur une ic&ocirc;ne de symbole pour passer en mode de
modification de symboles, puis recherchez les rep&egrave;res de d&eacute;coupe.
Voir aussi
&laquo; Passage du mode d’&eacute;dition de symboles au mode d’&eacute;dition de pages &raquo; &agrave; la page 162
Objets standard 9 tranches
L’outil Mise &agrave; l’&eacute;chelle en 9 tranches cr&eacute;e temporairement des rep&egrave;res de d&eacute;coupe qui permettent de mettre des objets
&agrave; l’&eacute;chelle plus facilement sans d&eacute;former leur g&eacute;om&eacute;trie. Cet outil est utile pour les mises &agrave; l’&eacute;chelle rapides d’objets
bitmap ou de formes simples destin&eacute;s aux prototypes et aux pr&eacute;maquettes.
Les rep&egrave;res que vous cr&eacute;ez &agrave; l’aide de l’outil Mise &agrave; l’&eacute;chelle en 9 tranches disparaissent apr&egrave;s une premi&egrave;re utilisation.
Pour plus de d&eacute;tails sur les rep&egrave;res de d&eacute;coupe permanents r&eacute;utilisables plusieurs fois, reportez-vous &agrave; la section
&laquo; Symboles de mise &agrave; l’&eacute;chelle en 9 tranches &raquo; &agrave; la page 51.
1 Dans la zone de travail, s&eacute;lectionnez un objet bitmap ou une forme vectorielle.
2 Dans le panneau Outils, s&eacute;lectionnez l’outil Mise &agrave; l’&eacute;chelle en 9 tranches
.
Remarque : si vous avez s&eacute;lectionn&eacute; une forme automatique &agrave; l’&eacute;tape 1, Fireworks vous demande de la dissocier. Vous
ne pouvez le faire qu’une fois que vous avez termin&eacute; de r&eacute;gler les points de contr&ocirc;le de la forme automatique.
3 Dans le document, disposez les rep&egrave;res de d&eacute;coupe de fa&ccedil;on &agrave; conserver autant que possible la g&eacute;om&eacute;trie de l’objet.
(Pour plus de d&eacute;tails, reportez-vous &agrave; la section &laquo; Mise &agrave; l’&eacute;chelle en 9 tranches &raquo; &agrave; la page 50.)
4 Transformez l’objet en faisant glisser un angle ou une poign&eacute;e lat&eacute;rale.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 53
S&eacute;lection et transformation d’objets
Voir aussi
&laquo; Formes simples &raquo; &agrave; la page 74
&laquo; formes automatiques &raquo; &agrave; la page 78
&laquo; Pr&eacute;f&eacute;rences de modification &raquo; &agrave; la page 312
Organisation de plusieurs objets
Options d’organisation des objets
Groupement d’objets Permet de consid&eacute;rer les objets comme un seul objet ou de prot&eacute;ger les relations de chaque objet
avec les autres objets du groupe.
Empilement des objets Permet de disposer les objets derri&egrave;re ou devant d’autres objets
Alignement d’objets s&eacute;lectionn&eacute;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&eacute;lectionn&eacute;s et les manipuler comme s’ils formaient un seul objet. Par
exemple, apr&egrave;s avoir dessin&eacute; les p&eacute;tales d’une fleur comme objets individuels, associez-les pour s&eacute;lectionner et d&eacute;placer
la fleur tout enti&egrave;re en tant qu’objet unique.
Vous pouvez modifier les groupes sans les dissocier. Vous pouvez s&eacute;lectionner un objet individuel au sein d’un groupe
et le modifier sans dissocier les autres objets. Les objets peuvent &ecirc;tre dissoci&eacute;s &agrave; tout moment.
❖ Choisissez la commande Modification &gt; Associer ou Modification &gt; Dissocier.
S&eacute;lection d’objets dans des groupes
Si vous souhaitez travailler s&eacute;par&eacute;ment sur les objets d’un groupe, dissociez-les ou utilisez l’outil Sous-s&eacute;lection
pour ne s&eacute;lectionner que des objets individuels et laisser le groupe intact.
La modification des attributs d’un objet sous-s&eacute;lectionn&eacute; ne s’applique qu’&agrave; l’objet sous-s&eacute;lectionn&eacute; lui-m&ecirc;me. Le
d&eacute;placement d’un objet sous-s&eacute;lectionn&eacute; vers un autre calque supprime cet objet du groupe.
Sous-s&eacute;lection d’un objet au sein d’un groupe
S&eacute;lection d’un objet appartenant &agrave; un groupe
❖ S&eacute;lectionnez l’outil Sous-s&eacute;lection, puis cliquez sur l’objet ou faites glisser une zone de s&eacute;lection autour de l’objet.
Pour ajouter des objets &agrave; la s&eacute;lection ou pour en supprimer, maintenez enfonc&eacute;e la touche Maj lorsque vous cliquez
dessus ou faites glisser le pointeur.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 54
S&eacute;lection et transformation d’objets
S&eacute;lection du groupe contenant un objet sous-s&eacute;lectionn&eacute;
❖ Proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Cliquez n’importe o&ugrave; dans le groupe avec le bouton droit de la souris (Windows) ou tout en maintenant la
touche Ctrl enfonc&eacute;e (Mac OS), puis choisissez S&eacute;lection &gt; Supers&eacute;lection dans le menu contextuel.
• Choisissez S&eacute;lection &gt; Supers&eacute;lection.
S&eacute;lection de tous les objets d’un groupe s&eacute;lectionn&eacute;
❖ Proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Cliquez n’importe o&ugrave; dans le groupe avec le bouton droit de la souris (Windows) ou tout en maintenant la
touche Ctrl enfonc&eacute;e (Mac OS), puis choisissez S&eacute;lection &gt; Sous-s&eacute;lection dans le menu contextuel.
• Choisissez S&eacute;lection &gt; Sous-s&eacute;lection.
Empilement des objets
Au sein d’un calque, Fireworks empile les objets dans leur ordre de cr&eacute;ation, en pla&ccedil;ant les objets les plus r&eacute;cents en
premier. L’ordre d’empilage des objets d&eacute;termine leur aspect lorsqu’ils se chevauchent.
Les calques affectent &eacute;galement l’ordre d’empilage. Par exemple, supposons qu’un document poss&egrave;de deux calques : le
calque 1 et le calque 2. Si le calque 1 appara&icirc;t sous le calque 2 dans le panneau Calques, tous les &eacute;l&eacute;ments du calque 2
apparaissent devant les &eacute;l&eacute;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&eacute;tails, reportez-vous &agrave; la section &laquo; Organisation des calques &raquo; &agrave; la page 137.
Modification de l’ordre d’empilage d’un objet s&eacute;lectionn&eacute; ou d’un groupe dans un calque
• Pour d&eacute;placer l’objet ou le groupe tout en haut ou tout en bas de la pile, s&eacute;lectionnez Modification &gt; Disposition &gt;
Premier plan ou Arri&egrave;re-plan.
• Pour d&eacute;placer l’objet ou le groupe d’une place vers le haut ou vers le bas de la pile, s&eacute;lectionnez Modification &gt;
Disposition &gt; Vers l’avant ou Vers l’arri&egrave;re.
Lorsque plusieurs objets ou groupes sont s&eacute;lectionn&eacute;s, les objets sont plac&eacute;s devant ou derri&egrave;re les objets non
s&eacute;lectionn&eacute;s, tout en pr&eacute;servant leur ordre les uns par rapport aux autres.
Disposition des objets entre les diff&eacute;rents calques
Le panneau Calques met &agrave; votre disposition un autre niveau de contr&ocirc;le de l’organisation. Pour d&eacute;placer des objets
s&eacute;lectionn&eacute;s d’un calque vers un autre, faites glisser la vignette de l’objet ou l’indicateur de s&eacute;lection bleu vers un autre
calque.
Alignement des objets
Vous pouvez appliquer une ou plusieurs commandes d’alignement aux objets s&eacute;lectionn&eacute;s.
Pour acc&eacute;der rapidement &agrave; ces commandes, utilisez le panneau Alignement (Fen&ecirc;tre &gt; Alignement).
Alignement d’objets s&eacute;lectionn&eacute;s
1 Choisissez Modification &gt; Alignement.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 55
S&eacute;lection et transformation d’objets
2 Choisissez l’une des options suivantes :
A gauche Permet d’aligner les objets sur l’objet s&eacute;lectionn&eacute; situ&eacute; le plus &agrave; 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&eacute;lectionn&eacute; situ&eacute; le plus &agrave; droite.
En haut Permet d’aligner les objets sur l’objet s&eacute;lectionn&eacute; situ&eacute; 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&eacute;lectionn&eacute; situ&eacute; le plus bas.
Pour plus d'informations sur l'alignement des objets, voir le didacticiel sur l'alignement et la r&eacute;partition des objets .
Alignement des formes automatiques
Pour d&eacute;finir les options d’alignement des formes automatiques, utilisez l’API correspondante. Par exemple :
smartShape.elem.elements[0].pathAttributes.brushPlacement=&quot;center&quot;;
smartShape.elem.elements[0].pathAttributes.brushPlacement=&quot;inside&quot;;
smartShape.elem.elements[0].pathAttributes.brushPlacement=&quot;outside&quot;;
smartShape.elem.elements[0].pathAttributes.fillOnTop=false;
Les param&egrave;tres sp&eacute;cifi&eacute;s s’utilisent pour la forme automatique correspondante uniquement. Les contours et trac&eacute;s
dessin&eacute;s apr&egrave;s l’application de ces param&egrave;tres &agrave; une forme automatique sont utilis&eacute;s pour les formes automatiques
futures, mais pas pour les objets.
R&eacute;partition &eacute;gale des largeurs et des hauteurs de trois objets s&eacute;lectionn&eacute;s ou plus
❖ Choisissez Modification &gt; Alignement &gt; R&eacute;partir en largeur ou Modification &gt; Alignement &gt; R&eacute;partir en hauteur.
56
Derni&egrave;re mise &agrave; jour le 29/4/2010
Chapitre 5 : Utilisation d’images bitmap
Cr&eacute;ation d’images bitmap
Les images bitmap sont des graphiques compos&eacute;s de petits carr&eacute;s color&eacute;s nomm&eacute;s pixels, organis&eacute;s comme les carreaux
d’une mosa&iuml;que pour former une image. Les photographies, les images num&eacute;ris&eacute;es et les graphiques cr&eacute;&eacute;s &agrave; partir de
programmes de dessin sont des exemples d’images bitmap. Elles sont parfois appel&eacute;es images pixellis&eacute;es.
Adobe&reg; Fireworks&reg; combine les fonctionnalit&eacute;s des applications de retouche de photos, de tra&ccedil;age de vecteurs et de
dessin. Vous pouvez cr&eacute;er des images bitmap en dessinant &agrave; 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 &ecirc;tre
converties en objets vectoriels.
Voir aussi
&laquo; A propos des graphiques bitmap &raquo; &agrave; la page 4
Cr&eacute;ation d’objets bitmap par trac&eacute;
Lorsque vous cr&eacute;ez un objet bitmap, il s’affiche sur le calque actif. Dans le panneau Calques avec les calques d&eacute;velopp&eacute;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&egrave;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&eacute;lectionnez l’outil Pinceau ou Crayon.
2 Utilisez l’outil Pinceau ou Crayon pour cr&eacute;er des objets bitmap dans la zone de travail.
Un nouvel objet bitmap est ajout&eacute; au calque actif dans le panneau Calques. Pour plus d’informations sur
l’utilisation des outils Crayon ou Pinceau, reportez-vous &agrave; la section &laquo; Modification d’objets bitmap &raquo; &agrave; la page 57.
Cr&eacute;ation d’objets bitmap vides
Vous pouvez cr&eacute;er un objet bitmap vide et y tracer ou peindre des pixels ult&eacute;rieurement.
❖ Proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Cliquez sur le bouton Nouvelle image bitmap
du panneau Calques.
• Choisissez Edition &gt; Insertion &gt; Image bitmap vide.
• Dessinez un cadre de s&eacute;lection, en partant d’une zone vierge de la zone de travail, puis remplissez-le. Pour plus
de d&eacute;tails, reportez-vous &agrave; la section &laquo; Cr&eacute;ation de cadres de s&eacute;lection de pixels &raquo; &agrave; la page 39.
Une image bitmap vide est ajout&eacute;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&eacute;lection de pixels &agrave; l’aide des outils Cadre de s&eacute;lection, Lasso ou Baguette magique.
2 Coupez-collez (ou copiez-collez) la s&eacute;lection dans le nouvel objet bitmap.
La s&eacute;lection appara&icirc;t dans le panneau Calques comme un objet sur le calque actif.
UTILISATION DE FIREWORKS CS5 57
Derni&egrave;re mise &agrave; jour le 29/4/2010
Utilisation d’images bitmap
Remarque : vous pouvez &eacute;galement cliquer avec le bouton droit de la souris (Windows) ou maintenir la touche Ctrl
enfonc&eacute;e et cliquer (Macintosh) sur un cadre de s&eacute;lection de pixels pour s&eacute;lectionner une option de coupage ou de copie.
Conversion des objets vectoriels s&eacute;lectionn&eacute;s en image bitmap
Remarque : la conversion d’un objet vectoriel en objet bitmap est irr&eacute;versible, sauf si la commande Edition &gt; Annuler ou
l’annulation d’actions dans le panneau Historique est encore possible.
❖ Proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Choisissez Modification &gt; Aplatir la s&eacute;lection.
• Cliquez sur Aplatir la s&eacute;lection dans le menu Options du panneau Calques.
Modification d’objets bitmap
Les outils les plus couramment utilis&eacute;s pour la retouche photo sont regroup&eacute;s dans le panneau Modification d’images
(Fen&ecirc;tre &gt; Autres &gt; 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&eacute;veloppeurs Adobe.
Dessin d’objets bitmap
1 S&eacute;lectionnez l’outil Crayon
.
2 D&eacute;finissez les options de l’outil dans l’inspecteur des propri&eacute;t&eacute;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&icirc;t dans les
zones transparentes du graphique.
3 Faites glisser le pointeur pour dessiner. Tout en maintenant la touche Maj enfonc&eacute;e, faites glisser le pointeur afin
d’imposer au trac&eacute; une ligne horizontale, verticale ou diagonale.
Dessin d’un objet avec l’outil Pinceau
Pour plus d’informations, reportez-vous &agrave; la section &laquo; Application et modification de contours &raquo; &agrave; la page 120.
1 S&eacute;lectionnez l’outil Pinceau
.
2 D&eacute;finissez les attributs du contour dans l’inspecteur des propri&eacute;t&eacute;s.
3 Faites glisser le pointeur pour dessiner.
Application de la couleur de fond aux pixels
1 S&eacute;lectionnez l’outil Pot de peinture
.
2 S&eacute;lectionnez une couleur dans la case Couleur de fond.
3 D&eacute;finissez la valeur de la tol&eacute;rance dans l’inspecteur des propri&eacute;t&eacute;s.
UTILISATION DE FIREWORKS CS5 58
Derni&egrave;re mise &agrave; jour le 29/4/2010
Utilisation d’images bitmap
Remarque : la tol&eacute;rance d&eacute;termine le degr&eacute; de similarit&eacute; de la couleur des pixels qui seront remplis. Une valeur de
tol&eacute;rance faible remplit les pixels dont les valeurs chromatiques sont similaires &agrave; celles du pixel sur lequel vous cliquez.
Une valeur de tol&eacute;rance &eacute;lev&eacute;e remplit les pixels dont la plage des valeurs chromatiques est plus large.
4 Cliquez sur l’image.
Tous les pixels appartenant &agrave; la plage de tol&eacute;rance adoptent la couleur de fond.
Application d’un fond en d&eacute;grad&eacute; &agrave; une s&eacute;lection de pixels
1 Effectuez la s&eacute;lection.
2 Dans le panneau Outils, cliquez sur l’outil Pot de peinture, puis s&eacute;lectionnez l’outil D&eacute;grad&eacute;
contextuel.
dans le menu
3 D&eacute;finissez les attributs de fond dans l’inspecteur des propri&eacute;t&eacute;s.
4 Cliquez sur la s&eacute;lection de pixels pour appliquer le fond.
Echantillonnage d’une couleur &agrave; utiliser comme couleur de contour ou de
fond
Remarque : le pointeur de la pipette du s&eacute;lecteur de couleurs est diff&eacute;rent de l’outil Pipette (voir la section
&laquo; Echantillonnage de couleurs &agrave; partir d’une fen&ecirc;tre contextuelle pour la s&eacute;lection des couleurs &raquo; &agrave; la page 116).
Pr&eacute;levez une couleur dans une image &agrave; l’aide de l’outil Pipette
.
1 Si le bon attribut n’est pas encore activ&eacute;, proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Cliquez sur l’ic&ocirc;ne de contour en regard de la case Couleur de contour du panneau Outils pour en faire l’attribut
actif.
• Cliquez sur l’ic&ocirc;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 &agrave; 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&eacute;lectionnez l’outil Pipette. D&eacute;finissez ensuite le param&egrave;tre
d’&eacute;chantillon Egalisation des couleurs dans l’inspecteur des propri&eacute;t&eacute;s :
1 pixel Cr&eacute;e une couleur de contour ou de fond &agrave; partir d’un pixel unique.
Moyenne 3 x 3 Cr&eacute;e une couleur de contour ou de fond &agrave; partir de la moyenne des valeurs chromatiques d’une zone
de 3 pixels sur 3.
Moyenne 5 x 5 Cr&eacute;e une couleur de contour ou de fond &agrave; 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 &eacute;chantillonn&eacute;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&eacute;lection
1 S&eacute;lectionnez l’outil Gomme
.
2 Dans l’inspecteur des propri&eacute;t&eacute;s, s&eacute;lectionnez une forme de gomme ronde ou carr&eacute;e.
3 Faites glisser les curseurs pour ajuster les niveaux Bord, Taille et Opacit&eacute;.
Derni&egrave;re mise &agrave; 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 &agrave; effacer.
Recadrage d’un objet bitmap s&eacute;lectionn&eacute;
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&eacute;lectionnez un objet bitmap ou tracez un cadre de s&eacute;lection &agrave; l’aide d’un outil de s&eacute;lection bitmap.
2 Choisissez Edition &gt; Recadrer l’objet bitmap s&eacute;lectionn&eacute;.
3 Ajustez les poign&eacute;es de recadrage jusqu’&agrave; ce que le cadre de s&eacute;lection entoure la zone de l’image bitmap &agrave; conserver.
Remarque : pour annuler une s&eacute;lection de recadrage, appuyez sur la touche Echap.
Cadre de s&eacute;lection
4 Cliquez deux fois &agrave; l’int&eacute;rieur du cadre de s&eacute;lection ou appuyez sur la touche Entr&eacute;e pour recadrer la s&eacute;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&eacute;duit la focalisation des zones s&eacute;lectionn&eacute;es dans une image.
L’outil Doigt pr&eacute;l&egrave;ve une couleur et l’&eacute;tale dans la direction dans laquelle vous faites glisser le pointeur dans une image.
L’outil Nettet&eacute; accentue les zones d’une image.
L’outil Densit&eacute; - &eacute;claircit des parties d’une image.
L’outil Densit&eacute; + assombrit des parties d’une image.
L’outil Retouche des yeux rouges r&eacute;duit l’effet yeux rouges sur vos photos.
L’outil Remplacement de couleur permet de recouvrir une couleur existante par une autre couleur.
Derni&egrave;re mise &agrave; 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&eacute;parer une photographie endommag&eacute;e ou &eacute;liminer la poussi&egrave;re
d’une image. Vous pouvez copier une zone de pixels d’une photo et remplacer la partie endommag&eacute;e ou poussi&eacute;reuse
par la zone clon&eacute;e.
1 S&eacute;lectionnez l’outil Tampon encreur.
2 Cliquez sur une zone afin de la d&eacute;signer comme &eacute;tant la source (la zone &agrave; cloner).
Le pointeur d’&eacute;chantillonnage se transforme en un pointeur en forme de croix.
Remarque : pour d&eacute;signer une autre zone de pixels &agrave; cloner, cliquez sur cette zone tout en maintenant la touche Alt
(Windows) ou Option (Macintosh) enfonc&eacute;e.
3 D&eacute;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&eacute;sente la source.
• Selon les pr&eacute;f&eacute;rences de pinceau que vous avez s&eacute;lectionn&eacute;es, le deuxi&egrave;me pointeur est un tampon encreur, une
croix ou un cercle bleu. Lorsque vous faites glisser le deuxi&egrave;me pointeur, les pixels situ&eacute;s sous le premier
pointeur sont copi&eacute;s et appliqu&eacute;s &agrave; la zone situ&eacute;e sous le second pointeur.
D&eacute;finition des options de l’outil Tampon encreur
1 S&eacute;lectionnez l’outil Tampon encreur.
2 Dans l’inspecteur des propri&eacute;t&eacute;s, d&eacute;finissez les options de l’outil Tampon encreur :
Corps D&eacute;termine la taille du tampon.
Bord D&eacute;termine l’adoucissement du contour (100 % = dur, 0 % = doux).
Source align&eacute;e D&eacute;termine l’op&eacute;ration d’&eacute;chantillonnage. Lorsque l’option Source align&eacute;e est s&eacute;lectionn&eacute;e, le
pointeur d’&eacute;chantillonnage se d&eacute;place verticalement et horizontalement, en alignement avec le second. Lorsque
l’option Source align&eacute;e est d&eacute;s&eacute;lectionn&eacute;e, la zone d’&eacute;chantillonnage est fixe, ind&eacute;pendamment de l’endroit o&ugrave; vous
d&eacute;placez le second pointeur et l’endroit o&ugrave; vous cliquez.
Utiliser l’ensemble du document Permet d’effectuer un &eacute;chantillonnage de tous les objets sur tous les calques.
Lorsque cette option est d&eacute;s&eacute;lectionn&eacute;e, l’outil Tampon encreur pr&eacute;l&egrave;ve des &eacute;chantillons uniquement &agrave; partir de
l’objet actif.
Opacit&eacute; D&eacute;termine ce qui peut &ecirc;tre vu de l’arri&egrave;re-plan &agrave; travers le contour.
Mode de fusion D&eacute;termine la mani&egrave;re dont l’image clon&eacute;e affecte l’arri&egrave;re-plan.
Reproduction d’une s&eacute;lection de pixels
• Faites glisser la s&eacute;lection de pixels &agrave; l’aide de l’outil Sous-s&eacute;lection.
• Tout en maintenant la touche Alt (Windows) ou Option (Mac OS) enfonc&eacute;e, faites glisser la s&eacute;lection de pixels &agrave;
l’aide de l’outil Pointeur.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 61
Utilisation d’images bitmap
Att&eacute;nuation, accentuation et maculage des images
Les outils Goutte d’eau et Nettet&eacute; 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&eacute;nuation s&eacute;lective sur la focalisation des &eacute;l&eacute;ments. L’outil
Nettet&eacute; est utile pour corriger des probl&egrave;mes de num&eacute;risation ou des photographies floues. L’outil Doigt vous permet
de m&eacute;langer l&eacute;g&egrave;rement les couleurs.
1 S&eacute;lectionnez l’outil Goutte d’eau, Nettet&eacute; ou Doigt.
2 D&eacute;finissez les options du pinceau dans l’inspecteur des propri&eacute;t&eacute;s :
Corps D&eacute;finit la taille de la pointe.
Bord D&eacute;finit la douceur de la pointe.
Forme D&eacute;finit une pointe ronde ou carr&eacute;e.
Intensit&eacute; D&eacute;finit la quantit&eacute; d’att&eacute;nuation ou d’accentuation.
Options de maculage
Pression D&eacute;finit l’intensit&eacute; du trait.
Couleur de la tache Permet de choisir la couleur &agrave; utiliser au d&eacute;but de chaque trait pour l’&eacute;taler. Si cette option est
d&eacute;s&eacute;lectionn&eacute;e, l’outil utilise la couleur situ&eacute;e sous le pointeur de l’outil.
Utiliser l’ensemble du document Etale la couleur en utilisant les donn&eacute;es chromatiques de tous les objets sur tous
les calques. Si cette option est d&eacute;s&eacute;lectionn&eacute;e, l’outil Doigt utilise les couleurs provenant uniquement de l’objet actif.
3 Faites glisser l’outil sur les pixels &agrave; accentuer, &agrave; att&eacute;nuer ou &agrave; &eacute;taler.
Maintenez la touche Alt (Windows) ou Option (Mac OS) enfonc&eacute;e pour passer d’un outil &agrave; un autre.
Eclaircissement et assombrissement de portions d’image
Vous pouvez &eacute;claircir ou assombrir des pixels d’une image &agrave; l’aide des outils R&eacute;v&eacute;lateur ou Br&ucirc;lure, respectivement.
Utiliser ces outils revient &agrave; augmenter ou diminuer l’exposition lumineuse pendant le d&eacute;veloppement d’une photo.
1 S&eacute;lectionnez l’outil Densit&eacute; - pour &eacute;claircir des parties d’image, ou l’outil Densit&eacute; + pour les assombrir.
2 D&eacute;finissez les options du pinceau et l’exposition dans l’inspecteur des propri&eacute;t&eacute;s.
L’exposition est comprise entre 0 et 100 %. Des valeurs &eacute;lev&eacute;es accentuent les effets.
3 D&eacute;finissez la gamme dans l’inspecteur des propri&eacute;t&eacute;s :
Tons fonc&eacute;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 &agrave; &eacute;claircir ou &agrave; assombrir.
Remarque : pour basculer temporairement entre l’outil Densit&eacute; - et l’outil Densit&eacute; +, maintenez la touche Alt
(Windows) enfonc&eacute;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&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 62
Utilisation d’images bitmap
Photographie originale et apr&egrave;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&eacute;,
maintenez le curseur enfonc&eacute; sur l’outil Tampon encreur jusqu’&agrave; l’apparition d’un menu contextuel.)
2 Dans l’inspecteur des propri&eacute;t&eacute;s, d&eacute;finissez les options suivantes :
Tol&eacute;rance D&eacute;termine la plage des teintes &agrave; remplacer (0 remplace uniquement le rouge ; 100 remplace toutes les
teintes contenant du rouge).
Intensit&eacute; D&eacute;finit la puissance des gris utilis&eacute;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 &gt; Annuler, puis r&eacute;p&eacute;tez les &eacute;tapes 2 et 3 avec d’autres valeurs de
tol&eacute;rance et d’intensit&eacute;.
Remplacement des couleurs dans les objets bitmap
Photographie originale et apr&egrave;s utilisation de l’outil Remplacement de couleur
Remplacement d’une couleur &agrave; l’aide du nuancier
1 Dans la section Bitmap du panneau Outils, s&eacute;lectionnez l’outil Remplacer la couleur
. (Si l’outil est masqu&eacute;,
maintenez le curseur enfonc&eacute; sur l’outil Tampon encreur jusqu’&agrave; l’apparition d’un menu contextuel.)
2 Dans la zone De dans l’inspecteur des propri&eacute;t&eacute;s, cliquez sur Nuance.
3 Cliquez sur la case de couleur De pour s&eacute;lectionner la pipette, puis s&eacute;lectionnez une couleur dans le menu
contextuel pour sp&eacute;cifier la couleur &agrave; remplacer.
4 Cliquez sur la case de couleur A dans l’inspecteur des propri&eacute;t&eacute;s, puis s&eacute;lectionnez une couleur dans le menu
contextuel pour s&eacute;lectionner la couleur de remplacement.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 63
Utilisation d’images bitmap
5 D&eacute;finissez les autres attributs du contour dans l’inspecteur des propri&eacute;t&eacute;s :
Tol&eacute;rance D&eacute;termine la plage des couleurs &agrave; remplacer (0 remplace uniquement la couleur De ; 100 remplace
toutes les couleurs semblables &agrave; cette couleur).
Intensit&eacute; D&eacute;termine la quantit&eacute; de couleur De qui est remplac&eacute;e.
Coloriser Remplace la couleur De par la couleur A. D&eacute;s&eacute;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 &agrave; remplacer.
Remplacement d’une couleur par une couleur s&eacute;lectionn&eacute;e dans une image
1 Dans la section Bitmap du panneau Outils, s&eacute;lectionnez l’outil Remplacer la couleur
. (Si l’outil est masqu&eacute;,
maintenez le curseur enfonc&eacute; sur l’outil Tampon encreur jusqu’&agrave; l’apparition d’un menu contextuel.)
2 Dans la zone De dans l’inspecteur des propri&eacute;t&eacute;s, cliquez sur Image.
3 Cliquez sur la case de couleur A dans l’inspecteur des propri&eacute;t&eacute;s pour s&eacute;lectionner la pipette, puis s&eacute;lectionnez une
couleur dans le menu contextuel.
4 D&eacute;finissez les autres attributs de contour dans l’inspecteur des propri&eacute;t&eacute;s.
5 A l’aide de l’outil, cliquez sur une section de l’image bitmap contenant la couleur &agrave; remplacer. Sans soulever l’outil,
continuez &agrave; peindre l’image.
Att&eacute;nuation des bords par contour progressif
La diffusion att&eacute;nue les bords d’une s&eacute;lection de pixels et aide &agrave; fusionner la zone s&eacute;lectionn&eacute;e avec les pixels
environnants. Le contour progressif est pratique lorsque vous copiez une s&eacute;lection et que vous la collez sur un
autre arri&egrave;re-plan.
1 Importez l’image &agrave; laquelle vous souhaitez appliquer un contour progressif sur la zone de travail &agrave; l’aide de Fichier &gt;
Importer.
2 S&eacute;lectionnez la partie concern&eacute;e de l’image &agrave; l’aide de l’un des outils de s&eacute;lection.
3 S&eacute;lectionnez S&eacute;lection &gt; Inverser la s&eacute;lection.
4 S&eacute;lectionnez S&eacute;lection &gt; Contour progressif. Vous pouvez &eacute;galement s&eacute;lectionner cette option dans le menu Bord
du panneau Propri&eacute;t&eacute;s.
5 Dans la bo&icirc;te de dialogue Appliquer un contour progressif &agrave; la s&eacute;lection, entrez le rayon du contour progressif. La
valeur par d&eacute;faut, 10, convient dans la plupart des cas. Vous pouvez aussi s&eacute;lectionner le rayon souhait&eacute; dans le
menu Bord.
6 Appuyez sur Supprimer.
Derni&egrave;re mise &agrave; 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 &agrave; la section &laquo; Contr&ocirc;le de la mani&egrave;re dont un document se redessine &agrave;
l’&eacute;cran &raquo; &agrave; la page 28.
Les filtres d’ajustement de la couleur et du ton permettent d’am&eacute;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&eacute;rer
d&eacute;finitivement les pixels. Il est recommand&eacute; d’utiliser les filtres dynamiques dans la mesure du possible.
Remarque : bien que les filtres dynamiques soient plus souples &agrave; manipuler, leur utilisation en grand nombre dans un
document peut ralentir Fireworks.
• Pour appliquer des filtres de mani&egrave;re irr&eacute;versible et d&eacute;finitive, s&eacute;lectionnez-les &agrave; partir du menu Filtres.
• Vous ne pouvez pas appliquer de filtres dynamiques aux s&eacute;lections de pixels depuis le menu Filtres. Vous pouvez
d&eacute;finir une zone d’une image bitmap et l’utiliser pour cr&eacute;er une image bitmap distincte puis lui appliquer un filtre
dynamique.
• Si vous appliquez un filtre &agrave; un objet vectoriel s&eacute;lectionn&eacute; en utilisant le menu Filtres, Fireworks convertit la
s&eacute;lection en un objet bitmap.
Application d’un filtre dynamique &agrave; une zone d&eacute;limit&eacute;e par un cadre de
s&eacute;lection bitmap
1 S&eacute;lectionnez un outil de s&eacute;lection bitmap, puis tracez un cadre de s&eacute;lection.
2 Choisissez Edition &gt; Couper.
3 Choisissez Edition &gt; Coller.
Fireworks colle la s&eacute;lection &agrave; l’emplacement exact o&ugrave; &eacute;taient localis&eacute;s les pixels d’origine, mais la s&eacute;lection est
maintenant un objet bitmap distinct.
4 Cliquez sur la vignette du nouvel objet bitmap dans le panneau Calques afin de s&eacute;lectionner l’objet bitmap.
5 Appliquez un filtre dynamique &agrave; partir de l’inspecteur des propri&eacute;t&eacute;s.
Fireworks applique le filtre dynamique uniquement au nouvel objet bitmap, simulant l’application d’un filtre &agrave; une
s&eacute;lection de pixels.
R&eacute;glage de la plage tonale des images bitmap
Une image bitmap avec une plage tonale compl&egrave;te doit contenir un nombre pair de pixels dans toutes les zones. Trois
options sont propos&eacute;es pour ajuster la plage tonale : la fonction Niveaux, la fonction Courbes pour un contr&ocirc;le pr&eacute;cis
ou la fonction Niveaux automatiques pour des r&eacute;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&eacute;s.
Tons clairs Corrige un exc&egrave;s de pixels clairs, qui donne &agrave; l’image un aspect d&eacute;lav&eacute;.
Tons moyens Corrige un exc&egrave;s de pixels dans les tons moyens, qui rend l’image fade.
Tons fonc&eacute;s Corrige un exc&egrave;s de pixels sombres, qui masque une grande partie des d&eacute;tails.
La fonction Niveaux d&eacute;finit les pixels les plus sombres sur le noir et les plus clairs sur le blanc, puis redistribue les tons
moyens proportionnellement. Cette op&eacute;ration permet d’obtenir une image dont les pixels sont aussi nets que possible.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 65
Utilisation d’images bitmap
Original avec des pixels concentr&eacute;s dans les tons clairs et apr&egrave;s ex&eacute;cution de la fonction Niveaux
L’histogramme de la bo&icirc;te de dialogue Niveaux permet d’afficher la r&eacute;partition des pixels d’un bitmap. L’histogramme
est une illustration graphique de la r&eacute;partition des pixels dans les tons clairs, les tons moyens et les tons fonc&eacute;s.
L’histogramme vous aide &agrave; d&eacute;terminer la meilleure m&eacute;thode de correction de la plage tonale d’une image. Une forte
concentration de pixels dans les tons fonc&eacute;s et les tons clairs indique que l’image peut &ecirc;tre am&eacute;lior&eacute;e avec la fonction
Niveaux ou Courbes.
L’axe horizontal repr&eacute;sente les valeurs chromatiques des plus fonc&eacute;es (0) aux plus claires (255). L’axe horizontal se lit
de gauche &agrave; droite : les pixels les plus sombres se situent &agrave; gauche, les pixels moyens au centre et les pixels les plus clairs
&agrave; droite.
L’axe vertical repr&eacute;sente le nombre de pixels en fonction du niveau de luminosit&eacute;. En g&eacute;n&eacute;ral, vous r&eacute;glez les tons clairs
et les tons fonc&eacute;s en premier. Le r&eacute;glage des tons moyens en second permet d’am&eacute;liorer leur valeur de luminosit&eacute; sans
affecter les tons clairs et les tons fonc&eacute;s.
R&eacute;glage des tons clairs, des tons moyens et des tons fonc&eacute;s &agrave; l’aide de la
fonction Niveaux
1 S&eacute;lectionnez l’image bitmap.
2 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Dans l’inspecteur des propri&eacute;t&eacute;s, cliquez sur l’ic&ocirc;ne plus (+) en regard de l’&eacute;tiquette Filtres, puis choisissez
R&eacute;gler la couleur &gt; Niveaux dans le menu contextuel Filtres.
• Choisissez Filtres &gt; R&eacute;gler la couleur &gt; Niveaux.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 66
Utilisation d’images bitmap
Bo&icirc;te de dialogue Niveaux
Pour afficher vos modifications dans l’espace de travail, cliquez sur Aper&ccedil;u dans la bo&icirc;te de dialogue. L’image
est actualis&eacute;e &agrave; mesure que vous apportez des modifications.
3 Dans le menu contextuel Couche, choisissez d’appliquer ces modifications &agrave; des couches de couleur sp&eacute;cifiques
(Rouge, Bleu ou Vert) ou &agrave; toutes les couches de couleur (RVB).
4 Faites glisser les curseurs Niveaux d’entr&eacute;es sous l’histogramme :
• Le curseur de droite permet de r&eacute;gler les tons clairs avec des valeurs comprises entre 255 et 0.
• Le curseur du centre permet de r&eacute;gler les tons moyens avec des valeurs comprises entre 10 et 0.
• Le curseur de gauche permet de r&eacute;gler les tons fonc&eacute;s avec des valeurs comprises entre 0 et 255.
Remarque : la valeur des tons fonc&eacute;s ne peut pas &ecirc;tre sup&eacute;rieure &agrave; la valeur des tons clairs, la valeur des tons clairs
ne peut pas &ecirc;tre inf&eacute;rieure &agrave; la valeur des tons fonc&eacute;s, et les tons moyens doivent se situer entre les param&egrave;tres des
tons fonc&eacute;s et des tons clairs.
5 Faites glisser les curseurs Niveaux de sortie pour r&eacute;gler le contraste.
• Le curseur de droite permet de r&eacute;gler les tons clairs avec des valeurs comprises entre 255 et 0.
• Le curseur de gauche permet de r&eacute;gler les tons fonc&eacute;s avec des valeurs comprises entre 0 et 255.
R&eacute;glage automatique des tons clairs, des tons moyens et des tons fonc&eacute;s
1 S&eacute;lectionnez l’image.
2 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Dans l’inspecteur des propri&eacute;t&eacute;s, cliquez sur l’ic&ocirc;ne plus (+) en regard de l’&eacute;tiquette Filtres, puis choisissez
R&eacute;gler la couleur &gt; Niveaux automatiques dans le menu contextuel Filtres.
• Choisissez Filtres &gt; R&eacute;gler la couleur &gt; Niveaux automatiques.
Vous pouvez &eacute;galement r&eacute;gler automatiquement les tons clairs, les tons moyens et les tons fonc&eacute;s en cliquant
sur le bouton Auto dans la bo&icirc;te de dialogue Niveaux ou Courbes.
Ajustement d’une couleur sp&eacute;cifique dans la plage tonale &agrave; l’aide de la
fonction Courbes
La fonction Courbes permet un contr&ocirc;le de la plage tonale plus pr&eacute;cis qu’avec la fonction Niveaux. Gr&acirc;ce &agrave; la fonction
Courbes, vous pouvez ajuster n’importe quelle couleur dans la plage tonale, sans toucher aux autres couleurs.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 67
Utilisation d’images bitmap
La grille de la bo&icirc;te de dialogue Courbes illustre deux valeurs de luminosit&eacute; :
L’axe horizontal Repr&eacute;sente la luminosit&eacute; d’origine des pixels (telle qu’illustr&eacute;e dans la zone Entr&eacute;e).
L’axe vertical Repr&eacute;sente les nouvelles valeurs de luminosit&eacute; (telles qu’illustr&eacute;es dans la zone Sortie).
Lorsque vous ouvrez la bo&icirc;te de dialogue Courbes pour la premi&egrave;re fois, la diagonale indique qu’aucune modification
n’a &eacute;t&eacute; apport&eacute;e et que, par cons&eacute;quent, les valeurs d’entr&eacute;e et de sortie sont identiques pour tous les pixels.
1 S&eacute;lectionnez l’image.
2 Pour ouvrir la bo&icirc;te de dialogue Courbes, proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Dans l’inspecteur des propri&eacute;t&eacute;s, cliquez sur le bouton Plus (+) en regard de l’&eacute;tiquette Filtres, puis choisissez
R&eacute;gler la couleur &gt; Courbes dans le menu contextuel Filtres.
Remarque : si l’inspecteur des propri&eacute;t&eacute;s est partiellement r&eacute;duit, cliquez sur le bouton Ajouter des filtres &agrave; la place
du bouton Plus.
• Choisissez Filtres &gt; R&eacute;gler la couleur &gt; Courbes.
Bo&icirc;te de dialogue Courbes
3 Dans le menu contextuel Couche, choisissez si vous voulez appliquer les modifications &agrave; des couches de couleur
sp&eacute;cifiques ou &agrave; l’ensemble des couleurs.
4 Pour r&eacute;gler la courbe, cliquez sur l’un des points de la diagonale de la grille, puis faites-le glisser &agrave; une autre position.
• Tous les points de la courbe disposent de leurs propres valeurs Entr&eacute;e et Sortie. Lorsque vous faites glisser un
point, les valeurs Entr&eacute;e et Sortie sont actualis&eacute;es en cons&eacute;quence.
• La courbe affiche des valeurs de luminosit&eacute; comprises entre 0 et 255, 0 repr&eacute;sentant les tons fonc&eacute;s.
Courbe apr&egrave;s d&eacute;placement d’un point par glissement pour le r&eacute;gler
UTILISATION DE FIREWORKS CS5 68
Derni&egrave;re mise &agrave; jour le 29/4/2010
Utilisation d’images bitmap
Pour ajuster automatiquement les tons clairs, les tons moyens et les tons fonc&eacute;s, cliquez sur le bouton Auto dans
la bo&icirc;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&eacute;mit&eacute;s de la courbe.
R&eacute;glage manuel de la balance des tons
1 Ouvrez la bo&icirc;te de dialogue Niveaux ou Courbes, puis s&eacute;lectionnez une couche de couleur dans le menu
contextuel Couche.
2 S&eacute;lectionnez la pipette appropri&eacute;e pour r&eacute;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&eacute;finir la
valeur des tons moyens.
•
A l’aide de la pipette des tons fonc&eacute;s, cliquez sur le pixel le plus sombre de l’image pour red&eacute;finir la valeur des
tons fonc&eacute;s.
, cliquez sur le pixel le plus clair de l’image afin de red&eacute;finir la valeur des tons
3 Cliquez sur OK.
R&eacute;glage de la luminosit&eacute; et du contraste
La fonction Luminosit&eacute;/Contraste modifie le contraste ou la luminosit&eacute; des pixels d’une image. Elle agit sur les tons
clairs, les tons fonc&eacute;s et les tons moyens d’une image.
Original et apr&egrave;s r&eacute;glage de la luminosit&eacute;
1 S&eacute;lectionnez l’image.
2 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Dans l’inspecteur des propri&eacute;t&eacute;s, cliquez sur l’ic&ocirc;ne plus (+) en regard de l’&eacute;tiquette Filtres, puis choisissez
R&eacute;gler la couleur &gt; Luminosit&eacute;/Contraste dans le menu contextuel Filtres.
• Choisissez Filtres &gt; R&eacute;gler la couleur &gt; Luminosit&eacute;/Contraste.
3 Faites glisser les curseurs Luminosit&eacute; et Contraste pour r&eacute;gler les param&egrave;tres dans la plage comprise entre –100
et 100.
Derni&egrave;re mise &agrave; 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&eacute;tails, reportez-vous &agrave; la section &laquo; A propos des modes de fusion &raquo; &agrave; la page 153.
Lorsque vous m&eacute;langez des couleurs, la couleur est ajout&eacute;e par-dessus l’objet. La fusion d’une couleur &agrave; celle d’un objet
existant produit un r&eacute;sultat semblable &agrave; celui de la fonction Teinte/Saturation. La fusion permet cependant d’appliquer
rapidement une couleur sp&eacute;cifique d’un nuancier.
1 Dans l’inspecteur des propri&eacute;t&eacute;s, cliquez sur l’ic&ocirc;ne plus (+) en regard de l’&eacute;tiquette Filtres, puis choisissez R&eacute;gler
la couleur &gt; Fond dans le menu contextuel Filtres.
2 S&eacute;lectionnez un mode de fusion. Le mode par d&eacute;faut est Normal.
3 S&eacute;lectionnez une couleur de fond dans le menu contextuel de la case de couleur.
4 S&eacute;lectionnez un pourcentage d’opacit&eacute; pour la couleur de fond, puis appuyez sur la touche Entr&eacute;e.
R&eacute;glage de la teinte et de la saturation
Vous pouvez r&eacute;gler la nuance (teinte), l’intensit&eacute; (saturation) ou la clart&eacute; (luminosit&eacute;) d’une couleur dans une image.
Original et apr&egrave;s r&eacute;glage de la saturation
1 S&eacute;lectionnez l’image.
2 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Dans l’inspecteur des propri&eacute;t&eacute;s, cliquez sur l’ic&ocirc;ne plus (+) en regard de l’&eacute;tiquette Filtres, puis choisissez
R&eacute;gler la couleur &gt; Teinte/Saturation dans le menu contextuel Filtres.
• Choisissez Filtres &gt; R&eacute;gler la couleur &gt; Teinte/Saturation.
3 Faites glisser les curseurs pour ajuster les couleurs de l’image.
• La valeur de teinte peut &ecirc;tre comprise entre -180 et 180.
• Les valeurs de saturation et de luminosit&eacute; peuvent &ecirc;tre comprises entre –100 et 100.
Modification d’une image RVB en une image &agrave; deux tons ou colorisation d’une image en
niveaux de gris
❖ Dans la bo&icirc;te de dialogue Teinte/Saturation, s&eacute;lectionnez Coloriser.
Remarque : si vous s&eacute;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&egrave;re mise &agrave; 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 &agrave; partir de la roue chromatique. Par exemple,
l’application du filtre &agrave; 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&egrave;s inversion
Image couleur et apr&egrave;s inversion
1 S&eacute;lectionnez l’image.
2 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Dans l’inspecteur des propri&eacute;t&eacute;s, cliquez sur l’ic&ocirc;ne plus (+) en regard de l’&eacute;tiquette Filtres, puis choisissez
R&eacute;gler la couleur &gt; Inverser dans le menu contextuel Filtres.
• Choisissez Filtres &gt; R&eacute;gler la couleur &gt; Inverser.
Conversion d’un objet en niveaux de gris
1 S&eacute;lectionnez l’objet.
2 S&eacute;lectionnez Commandes &gt; Cr&eacute;ation &gt; Convertir en niveaux de gris.
Conversion d’un objet en s&eacute;pia
1 S&eacute;lectionnez l’objet.
2 S&eacute;lectionnez Commandes &gt; Cr&eacute;ation &gt; Convertir en s&eacute;pia.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 71
Utilisation d’images bitmap
Att&eacute;nuation et accentuation des images bitmap
Options d’att&eacute;nuation
Att&eacute;nu&eacute; Adoucit la focalisation des pixels s&eacute;lectionn&eacute;s.
Plus flou Applique un flou trois fois plus puissant que celui de la commande Flou.
Flou gaussien Applique &agrave; chaque pixel une valeur m&eacute;diane pond&eacute;r&eacute;e d’att&eacute;nuation pour produire un effet de voilage.
Les valeurs de rayon de flou peuvent &ecirc;tre comprises entre 0,1 et 250. Plus le rayon est grand, plus l’effet de flou est
marqu&eacute;.
Flou directionnel Donne l’impression que l’image est en mouvement. Les valeurs de distance peuvent &ecirc;tre comprises
entre 1 et 100. Plus la distance est grande, plus l’effet de flou est marqu&eacute;.
Flou radial Conf&egrave;re un effet de rotation &agrave; l’image. Les valeurs de qualit&eacute; peuvent &ecirc;tre comprises entre 1 et 100. Une
qualit&eacute; &eacute;lev&eacute;e se traduit par moins de r&eacute;p&eacute;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’&eacute;loigne de la personne qui regarde la photo.
Les valeurs Intensit&eacute; et Qualit&eacute; sont requises. Une qualit&eacute; &eacute;lev&eacute;e se traduit par moins de r&eacute;p&eacute;titions de l’image originale
dans l’effet de flou. Plus l’intensit&eacute; est &eacute;lev&eacute;e, plus l’effet de flou est marqu&eacute;.
1 S&eacute;lectionnez l’image.
2 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Dans l’inspecteur des propri&eacute;t&eacute;s, cliquez sur l’ic&ocirc;ne plus (+) en regard de l’&eacute;tiquette Filtres, puis choisissez, puis
choisissez une option d’att&eacute;nuation dans le menu contextuel Filtres.
• Choisissez Filtres &gt; Att&eacute;nuation &gt; [option d’att&eacute;nuation].
3 D&eacute;finissez d’autres valeurs pour l’option d’att&eacute;nuation choisie.
Transformation d’une image bitmap en dessin au trait
Donnez &agrave; 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&eacute;dez de l’une des mani&egrave;res suivantes :
• Dans l’inspecteur des propri&eacute;t&eacute;s, cliquez sur l’ic&ocirc;ne plus (+) en regard de l’&eacute;tiquette Filtres, puis choisissez Autre &gt;
Trac&eacute; des contours dans le menu contextuel Filtres.
• Choisissez Filtres &gt; Autre &gt; Trac&eacute; des contours.
Original et apr&egrave;s application de la commande Trac&eacute; des contours
Derni&egrave;re mise &agrave; 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&eacute; de transparence de l’image. Proc&eacute;dez de l’une des
mani&egrave;res suivantes :
• Dans l’inspecteur des propri&eacute;t&eacute;s, cliquez sur l’ic&ocirc;ne plus (+) en regard de l’&eacute;tiquette Filtres, puis choisissez Autre &gt;
Convertir en Alpha dans le menu contextuel Filtres.
• Choisissez Filtres &gt; Autre &gt; Convertir en Alpha.
Accentuation d’une image
S&eacute;lectionnez une option d’accentuation de la nettet&eacute; pour corriger des images floues :
Plus net R&egrave;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&egrave;gle le contraste des bords des pixels pour rendre l’image plus nette. Cette option offre le meilleur
contr&ocirc;le et doit &ecirc;tre utilis&eacute;e en priorit&eacute; pour accentuer une image.
Original et apr&egrave;s accentuation
1 S&eacute;lectionnez l’image.
2 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Dans l’inspecteur des propri&eacute;t&eacute;s, cliquez sur l’ic&ocirc;ne plus (+) en regard de l’&eacute;tiquette Filtres, s&eacute;lectionnez
Renforcement, puis s&eacute;lectionnez une option d’accentuation dans le menu contextuel Filtres.
• Choisissez Filtres &gt; Renforcement &gt; [option d’accentuation].
Les options Plus net ou Encore plus net prennent effet.
3 (Option Accentuation) Faites glisser le curseur Intensit&eacute; de l’accentuation pour s&eacute;lectionner un facteur de nettet&eacute;
compris entre 1 et 500 %.
4 R&eacute;glez le curseur Rayon en pixels pour s&eacute;lectionner un rayon compris entre 0,1 et 250.
Plus le rayon est &eacute;lev&eacute;, plus la zone &agrave; fort contraste entourant les pixels est &eacute;tendue.
5 R&eacute;glez le curseur Seuil pour s&eacute;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 &eacute;lev&eacute;. 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&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 73
Utilisation d’images bitmap
Ajout de bruit &agrave; une image
Lorsqu’elles sont affich&eacute;es &agrave; un niveau de zoom &eacute;lev&eacute;, la plupart des images obtenues &agrave; partir d’appareils photo
num&eacute;riques ou de scanners pr&eacute;sentent des couleurs qui ne sont pas parfaitement uniformes. Les couleurs sont
constitu&eacute;es de pixels comprenant de nombreuses couleurs diff&eacute;rentes. Dans le domaine du traitement de l’image, la
notion de bruit fait r&eacute;f&eacute;rence &agrave; ces variations chromatiques al&eacute;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’&eacute;cart de variation
chromatique al&eacute;atoire entre deux images peut &ecirc;tre visible. Ceci emp&ecirc;che les images de se fondre l’une dans l’autre.
Dans ce cas, ajoutez du bruit &agrave; l’une des images, ou aux deux, afin de cr&eacute;er l’illusion que ces deux images proviennent
de la m&ecirc;me source. Vous pouvez &eacute;galement ajouter du bruit &agrave; une image pour des raisons artistiques (pour imiter une
vieille photographie ou des parasites sur un &eacute;cran de t&eacute;l&eacute;vision, par exemple).
Photographie originale et apr&egrave;s ajout de bruit
Ajout de bruit
1 S&eacute;lectionnez l’image.
2 Pour ouvrir la bo&icirc;te de dialogue Ajout de bruit, proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Dans l’inspecteur des propri&eacute;t&eacute;s, cliquez sur l’ic&ocirc;ne plus (+) en regard de l’&eacute;tiquette Filtres, puis choisissez
Bruit &gt; Ajout de bruit dans le menu contextuel Filtres.
• Choisissez Filtres &gt; Bruit &gt; Ajout de bruit.
Remarque : l’application d’un filtre &agrave; partir du menu Filtres est une action irr&eacute;versible ; elle ne peut pas &ecirc;tre
annul&eacute;e, sauf si la commande Edition &gt; Annuler est disponible. Pour conserver la possibilit&eacute; d’effectuer des
ajustements, d&eacute;sactivez ou supprimez ce filtre, puis appliquez-le en tant que filtre dynamique, comme d&eacute;crit dans
la premi&egrave;re option de cette &eacute;tape. Pour plus d’informations, reportez-vous &agrave; la section &laquo; Utilisation des filtres
dynamiques &raquo; &agrave; la page 129.
3 R&eacute;glez le curseur Quantit&eacute; pour d&eacute;finir la quantit&eacute; du bruit.
Les valeurs vont de 1 &agrave; 400. Plus la quantit&eacute; est &eacute;lev&eacute;e, plus le positionnement des pixels est al&eacute;atoire dans l’image.
4 S&eacute;lectionnez l’option Couleur afin d’appliquer le bruit color&eacute;. D&eacute;sactivez-la pour appliquer uniquement un bruit
monochrome.
5 Cliquez sur OK.
Derni&egrave;re mise &agrave; jour le 29/4/2010
Chapitre 6 : Utilisation des objets
vectoriels
Un objet vectoriel est un graphique num&eacute;rique dont la forme est d&eacute;finie par un trac&eacute;. La forme d’un trac&eacute; vectoriel est
d&eacute;finie par une s&eacute;rie de points. La couleur de contour d’un objet vectoriel &eacute;pouse le trac&eacute; et son fond occupe l’espace
situ&eacute; &agrave; l’int&eacute;rieur du trac&eacute;. Le contour et le fond d&eacute;terminent l’aspect du graphique lorsque ce dernier est publi&eacute; sous
une forme imprim&eacute;e ou sur le Web.
Les objets vectoriels peuvent prendre des formes &eacute;l&eacute;mentaires, des formes automatiques (groupes d’objets vectoriels
dont les attributs sont modifiables au moyen de contr&ocirc;les sp&eacute;cifiques) ou des formes libres (dessin&eacute;es &agrave; main lev&eacute;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 &eacute;toiles sont des formes simples.
Remarque : Pour &eacute;viter les pixels parasites et am&eacute;liorer la nettet&eacute; des objets vectoriels, cliquez sur Commandes &gt; S&eacute;lection
&gt; 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&eacute;s. Pour
d&eacute;placer s&eacute;par&eacute;ment un point d’angle de rectangle, dissociez le rectangle ou utilisez l’outil Sous-s&eacute;lection .
Pour plus d’informations sur le redimensionnement et la mise &agrave; l’&eacute;chelle des objets, reportez-vous &agrave; la section
&laquo; Transformation et d&eacute;formation des objets et des s&eacute;lections &raquo; &agrave; la page 47.
Dessin d’une ligne, d’un rectangle ou d’une ellipse
1 Dans le panneau Outils, s&eacute;lectionnez l’outil Ligne, Rectangle ou Ellipse.
2 (Facultatif) S&eacute;lectionnez les attributs de contour et de fond dans l’inspecteur des propri&eacute;t&eacute;s.
3 Faites glisser le pointeur sur la zone de travail pour dessiner la forme.
• Maintenez la touche Maj enfonc&eacute;e lorsque vous faites glisser le pointeur de l’outil Ligne pour tracer des lignes
par incr&eacute;ments de 45 degr&eacute;s.
• Maintenez la touche Maj enfonc&eacute;e lorsque vous faites glisser le pointeur de l’outil Rectangle ou Ellipse pour
tracer des carr&eacute;s ou des cercles.
Dessin d’une forme &agrave; 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&eacute;e, faites glisser l’outil de dessin. Pour conserver les proportions, maintenez &eacute;galement la
touche Maj enfonc&eacute;e.
Ajout de pointes de fl&egrave;ches sur une ligne
1 Tracez ou s&eacute;lectionnez une ligne.
74
UTILISATION DE FIREWORKS CS5 75
Derni&egrave;re mise &agrave; jour le 29/4/2010
Utilisation des objets vectoriels
2 Choisissez la commande Commandes &gt; Cr&eacute;ation &gt; Ajouter indicateur sous-menu.
3 D&eacute;finissez les &eacute;l&eacute;ments suivants :
• S&eacute;lectionnez Ajouter au d&eacute;but ou Ajouter &agrave; la fin si n&eacute;cessaire, puis d&eacute;finissez le style de la pointe de fl&egrave;che.
• S&eacute;lectionnez Appliquer un contour et Fond uni, si n&eacute;cessaire.
Repositionnement d’une forme &eacute;l&eacute;mentaire &agrave; mesure que vous la dessinez
❖ Tout en maintenant le bouton de la souris et la barre d’espace enfonc&eacute;s (rectangles et ellipses uniquement), faites
glisser l’objet vers un autre emplacement de l’espace de travail. Rel&acirc;chez la barre d’espace pour continuer &agrave; dessiner
l’objet.
Redimensionnement d’une ligne, d’un rectangle ou d’une ellipse apr&egrave;s leur s&eacute;lection
La mise &agrave; l’&eacute;chelle d’un objet vectoriel ne change pas l’&eacute;paisseur du trait. Le redimensionnement des objets respecte
leurs proportions.
❖ Proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Entrez les nouvelles valeurs de largeur (L) ou de hauteur (H) dans l’inspecteur des propri&eacute;t&eacute;s ou le panneau Info.
• Dans la section S&eacute;lection du panneau Outils, s&eacute;lectionnez l’outil Mise &agrave; l’&eacute;chelle, puis faites glisser une poign&eacute;e
de transformation d’angle.
• Choisissez Modification &gt; Transformer &gt; Mise &agrave; l’&eacute;chelle et faites glisser une poign&eacute;e de transformation d’angle,
ou choisissez Modification &gt; Transformer &gt; Transformation num&eacute;rique et entrez les nouvelles dimensions.
• Faites glisser le point d’angle sur un rectangle.
Optimisation de la nettet&eacute; des lignes
Il arrive que les lignes trac&eacute;es dans Fireworks ne soient pas aussi nettes que souhait&eacute;. Ce flou vient du fait que les nœuds
du trac&eacute; sont espac&eacute;s d’un demi-pixel lors de l’utilisation de la souris. Pour optimiser la nettet&eacute; des objets, faites appel
&agrave; la commande Accrocher au pixel.
Cette commande intervient sur les lignes droites lorsque la diff&eacute;rence entre les coordonn&eacute;es x ou y des deux nœuds est
inf&eacute;rieure ou &eacute;gale &agrave; 0,5 px. Si les nœuds Fireworks sont distants d’un demi-pixel, les coordonn&eacute;es x ou y des deux
nœuds doivent se trouver dans les limites d’un m&ecirc;me pixel.
Un d&eacute;placement de 0,5 px entra&icirc;ne parfois un &eacute;cart d’un pixel dans les coordonn&eacute;es x et y dans l’inspecteur des
propri&eacute;t&eacute;s, car celui-ci remplace les valeurs fractionnaires par l’entier le plus proche.
Remarque : Pour &eacute;viter les pixels parasites et am&eacute;liorer la nettet&eacute; des objets vectoriels, cliquez sur Commandes &gt; S&eacute;lection
&gt; Utiliser le rendu vectoriel existant.
Num&eacute;ro
Sc&eacute;nario
Probl&egrave;me
Solution
1
Un rectangle primitif est mis &agrave; l’&eacute;chelle,
l’option &laquo; Mise &agrave; l’&eacute;chelle des contours et
des effets &raquo; &eacute;tant d&eacute;s&eacute;lectionn&eacute;e dans la
bo&icirc;te de dialogue Pr&eacute;f&eacute;rences.
Le rectangle n’est pas accroch&eacute; au
pixel le plus proche et ses bords sont
flous.
S&eacute;lectionnez l’objet, cliquez dessus avec
le bouton droit de la souris et choisissez
Accrocher au pixel.*
2
Une ligne d’une &eacute;paisseur uniforme est
trac&eacute;e &agrave; l’aide de l’outil Ligne.
Elle est floue.
S&eacute;lectionnez l’objet, cliquez dessus avec
le bouton droit de la souris et choisissez
Accrocher au pixel.*
3
Un trac&eacute; vectoriel droit est cr&eacute;&eacute; &agrave; l’aide de Le trac&eacute; est flou.
l’outil Plume.
S&eacute;lectionnez l’objet, cliquez dessus avec
le bouton droit de la souris et choisissez
Accrocher au pixel.*
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 76
Utilisation des objets vectoriels
*La fonctionnalit&eacute; Accrocher au pixel est &eacute;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&eacute;nario 1
Sc&eacute;nario 2
Sc&eacute;nario 3
JSAPI : fw.getDocumentDOM().snapToPixel() : la fonction Accrocher au pixel est appliqu&eacute;e &agrave; l’objet s&eacute;lectionn&eacute;
sur la zone de travail.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 77
Utilisation des objets vectoriels
Dessin de rectangles arrondis &eacute;l&eacute;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 &agrave; la moiti&eacute; de la longueur du c&ocirc;t&eacute; de rectangle le plus petit ; les valeurs sup&eacute;rieures
n’auront aucun effet.
Pour plus d’informations sur la pr&eacute;servation de l’arrondi des angles d’un rectangle lors de sa mise &agrave; l’&eacute;chelle, voir
l’article de Sarthak.
1 Dans la section Vecteur du panneau Outils, s&eacute;lectionnez l’outil Rectangle.
2 Faites glisser le pointeur sur la zone de travail pour dessiner le rectangle.
3 Dans l’inspecteur des propri&eacute;t&eacute;s, choisissez pourcentage ou pixels dans le menu contextuel situ&eacute; &agrave; droite de la
case Arrondi. A l’aide du curseur, d&eacute;finissez un pourcentage, ou entrez une valeur comprise entre 0 et 100 dans la
zone. Si vous avez choisi pixels, vous pouvez saisir jusqu’&agrave; la moiti&eacute; de la longueur du c&ocirc;t&eacute; le plus court du rectangle.
Appuyez sur les touches fl&eacute;ch&eacute;es Haut et Droite tout en faisant glisser les angles du rectangle pour les arrondir.
Utilisez les touches fl&eacute;ch&eacute;es Bas et Gauche pour r&eacute;duire l’arrondi des angles.
Dessin d’un polygone &eacute;l&eacute;mentaire
L’outil Polygone permet de dessiner des polygones &eacute;quilat&eacute;raux (y compris des triangles) &agrave; partir d’un point central.
1 S&eacute;lectionnez Fen&ecirc;tre &gt; Propri&eacute;t&eacute;s de forme automatique.
2 Cliquez sur l'outil Polygone.
3 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Faites glisser les points de contr&ocirc;le jaunes pour obtenir le nombre de c&ocirc;t&eacute;s voulus.
• Dans la bo&icirc;te de dialogue Propri&eacute;t&eacute;s de forme automatique, sp&eacute;cifiez les points et les c&ocirc;t&eacute;s requis.
Dessin d’une &eacute;toile
1 Cliquez sur le panneau Outils et appuyez sur U.
2 Cliquez sur la fl&egrave;che vers le bas et s&eacute;lectionnez l'ic&ocirc;ne Etoile dans le menu.
3 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
• S&eacute;lectionnez Fen&ecirc;tre &gt; Propri&eacute;t&eacute;s de forme automatique. Personnalisez l'&eacute;toile au moyen des diff&eacute;rentes options
de la bo&icirc;te de dialogue Propri&eacute;t&eacute;s de forme automatique.
• Faites glisser les points jaunes de l'&eacute;toile. D&eacute;placez la souris sur le point jaune. Une info-bulle d&eacute;crit la fonction.
Pour contraindre l’orientation d’une &eacute;toile par incr&eacute;ments de 45 degr&eacute;s, maintenez la touche Maj enfonc&eacute;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&eacute;t&eacute;s qu’une fois le rectangle dissoci&eacute;.
Il est impossible de modifier l’arrondi d’un rectangle dans l’inspecteur des propri&eacute;t&eacute;s une fois qu’il est dissoci&eacute;. Vous
pouvez cependant effectuer cette op&eacute;ration &agrave; l’aide de l’outil Vecteur.
Options de contour dans l’inspecteur des propri&eacute;t&eacute;s avant la dissociation du rectangle
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 78
Utilisation des objets vectoriels
Options de contour dans l’inspecteur des propri&eacute;t&eacute;s apr&egrave;s la dissociation du rectangle
formes automatiques
Les formes automatiques, contrairement aux autres groupes d’objets, comportent des points de contr&ocirc;le en forme de
losange en plus des poign&eacute;es de groupes d’objets. Lorsque vous faites glisser un point de contr&ocirc;le, vous modifiez
uniquement la propri&eacute;t&eacute; visuelle associ&eacute;e. Les points de contr&ocirc;le s’accompagnent, pour la plupart, d’info-bulles qui
d&eacute;crivent leur impact sur la forme automatique.
Les outils Formes automatiques cr&eacute;ent des formes avec des orientations pr&eacute;d&eacute;finies. Par exemple, l’outil Fl&egrave;che dessine
des fl&egrave;ches horizontales. De m&ecirc;me, avec la forme automatique Etoile, cliquez sur le point de contr&ocirc;le gauche et faitesle glisser vers le haut ou le bas pour modifier le nombre de points. Les autres points de contr&ocirc;le permettent de modifier
la &laquo; nettet&eacute; &raquo; et la &laquo; profondeur &raquo; des rayons.
Pour plus de d&eacute;tails sur la modification de l’orientation, reportez-vous &agrave; la section &laquo; Transformation et d&eacute;formation
des objets et des s&eacute;lections &raquo; &agrave; la page 47.
Outils de formes automatiques
Fl&egrave;che Fl&egrave;ches simples de toutes proportions, avec des lignes droites ou courbes.
Corps de fl&egrave;che Minces lignes droites permettant d’acc&eacute;der rapidement aux pointes de fl&egrave;che les plus courantes (il
suffit de cliquer sur une extr&eacute;mit&eacute; de la ligne).
Rectangle biseaut&eacute; Rectangles avec angles biseaut&eacute;s.
Rectangle chanfrein&eacute; Rectangles avec chanfreins (angles arrondis &agrave; l’int&eacute;rieur du rectangle).
Connecteur Lignes connectrices &agrave; trois segments, telles que celles utilis&eacute;es pour relier les &eacute;l&eacute;ments d’un
organigramme.
Anneau Anneaux remplis.
Forme en L Formes &agrave; angles droits.
Outil Mesure Simples lignes de fl&egrave;che indiquant les dimensions des &eacute;l&eacute;ments de conception principaux en pixels ou
en pouces.
Graphique &agrave; secteurs Diagrammes circulaires.
Rectangle arrondi Rectangles aux angles arrondis.
Polygone intelligent Polygones &eacute;quilat&eacute;raux comportant de 3 &agrave; 25 c&ocirc;t&eacute;s.
Spirale Spirales ouvertes.
Derni&egrave;re mise &agrave; 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&eacute;lectionnez un outil Forme automatique dans le menu contextuel.
2 Proc&eacute;dez de l’une des mani&egrave;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 &agrave; sa taille par d&eacute;faut.
Ajout d’une ombre &agrave; une forme automatique
L’option Ajouter une ombre ajoute une ombre sous l’objet s&eacute;lectionn&eacute; en fonction des dimensions de cet objet.
L’ombre est en r&eacute;alit&eacute; une forme automatique dot&eacute;e de points de contr&ocirc;le que vous pouvez manipuler pour modifier
son aspect. Par exemple, vous pouvez maintenir la touche Maj enfonc&eacute;e en faisant glisser le point de contr&ocirc;le
directionnel afin de forcer son mouvement &agrave; un angle de 45 degr&eacute;s. Un clic sur le point de contr&ocirc;le directionnel
restitue &agrave; 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 &agrave; l’objet s&eacute;lectionn&eacute;, sauf si vous appliquez cette commande &agrave; un
seul objet situ&eacute; dans la partie sup&eacute;rieure du calque actif.
1 S&eacute;lectionnez un objet dans la zone de travail.
2 Choisissez Commandes &gt; Cr&eacute;ation &gt; Ajouter une ombre.
3 (Facultatif) Pour modifier l’ombre, proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Faites glisser le point de contr&ocirc;le directionnel de fa&ccedil;on &agrave; effectuer un mouvement correspondant &agrave; un angle de
45 degr&eacute;s.
• Cliquez sur le point de contr&ocirc;le directionnel pour red&eacute;finir l’ombre (sa taille est identique &agrave; la forme d’origine).
• Tout en maintenant les touches Ctrl + Cmde enfonc&eacute;es, cliquez sur le point de contr&ocirc;le directionnel pour
red&eacute;finir uniquement l’axe des x.
• Cliquez deux fois sur le point de contr&ocirc;le de perspective pour red&eacute;finir uniquement la largeur de l’ombre.
Modification pr&eacute;cise des propri&eacute;t&eacute;s des formes automatiques
Pour exercer un contr&ocirc;le num&eacute;rique pr&eacute;cis sur une forme automatique s&eacute;lectionn&eacute;e ou pour ins&eacute;rer une autre forme
automatique dans votre document, utilisez le panneau Propri&eacute;t&eacute;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&ecirc;tre &gt; Formes automatiques).
Selon le type de forme automatique utilis&eacute;, les propri&eacute;t&eacute;s modifiables peuvent varier.
1 Ins&eacute;rez une forme automatique dans votre document.
2 Choisissez Fen&ecirc;tre &gt; Propri&eacute;t&eacute;s de forme automatique.
3 D&eacute;finissez les propri&eacute;t&eacute;s.
Vous pouvez verrouiller les angles des formes rectangulaires de fa&ccedil;on &agrave; ce que les modifications apport&eacute;es &agrave; un
angle se r&eacute;percutent sur les quatre. Vous pouvez &eacute;galement modifier les propri&eacute;t&eacute;s pour chaque angle
individuellement.
4 Pour appliquer les changements, appuyez sur la touche de tabulation ou Entr&eacute;e.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 80
Utilisation des objets vectoriels
Pour effectuer d’autres r&eacute;glages de formes automatiques dans la zone de travail, utilisez les points de contr&ocirc;le. Les
valeurs correspondantes sont mises &agrave; jour de fa&ccedil;on dynamique dans le panneau Propri&eacute;t&eacute;s de forme automatique.
Modification des propri&eacute;t&eacute;s de forme automatique &agrave; l’aide des points de
contr&ocirc;le
S&eacute;lectionnez une forme automatique, puis utilisez les points de contr&ocirc;le jaunes pour d&eacute;finir les propri&eacute;t&eacute;s de forme
automatique.
Le nom d’un point de contr&ocirc;le &eacute;voque sa fonction. Pour afficher un nom, faites glisser la souris sur un point de contr&ocirc;le
jusqu’&agrave; ce qu’une info-bulle apparaisse.
R&eacute;glage des formes automatiques en forme de fl&egrave;ches
• Pour r&eacute;gler la nettet&eacute; de la pointe de la fl&egrave;che, faites glisser les points de contr&ocirc;le de pointe de la fl&egrave;che et de taille
de la fl&egrave;che.
• Pour r&eacute;gler la largeur, la hauteur, l’&eacute;paisseur et l’arrondi de la queue de la fl&egrave;che, faites glisser le point de contr&ocirc;le
portant le nom correspondant.
Pour cr&eacute;er une fl&egrave;che incurv&eacute;e, faites glisser le point de contr&ocirc;le de largeur ou de hauteur vers la droite ou vers la
gauche.
R&eacute;glage des formes automatiques en forme de lignes fl&eacute;ch&eacute;es
• Pour passer en revue les options de pointes de fl&egrave;che, cliquez sur un point de contr&ocirc;le &agrave; l’une des extr&eacute;mit&eacute;s de la
ligne.
• Pour allonger ou raccourcir la ligne, faites glisser un point de contr&ocirc;le.
R&eacute;glage des formes automatiques repr&eacute;sentant des rectangles biseaut&eacute;s, chanfrein&eacute;s et
arrondis
• Pour r&eacute;gler simultan&eacute;ment tous les angles d’un rectangle, faites glisser un point de contr&ocirc;le d’angle.
• Pour r&eacute;gler un seul angle du rectangle, glisser un point de contr&ocirc;le d’angle tout en maintenant la touche Alt
(Windows) ou Option (Mac OS) enfonc&eacute;e.
• Pour redimensionner un rectangle en conservant les angles intacts, faites glisser le point de contr&ocirc;le de glissementredimensionnement.
• Pour convertir tous les angles d’un rectangle dans un type diff&eacute;rent, cliquez sur un point de contr&ocirc;le d’angle.
• Pour convertir un seul angle de rectangle dans un autre type, cliquez sur un point de contr&ocirc;le d’angle tout en
maintenant la touche Alt (Windows) ou Option (Mac OS) enfonc&eacute;e.
R&eacute;glage des formes automatiques repr&eacute;sentant des connecteurs
• Pour d&eacute;placer le point de d&eacute;but ou le point de fin, faites glisser le point de contr&ocirc;le au d&eacute;but ou &agrave; la fin de la ligne
connecteur.
• Pour repositionner la barre transversale, faites glisser le point de contr&ocirc;le de position horizontale.
• Pour r&eacute;gler tous les angles, faites glisser un point de contr&ocirc;le d’angle.
• Pour r&eacute;gler un seul angle, faites glisser un point de contr&ocirc;le d’angle tout en maintenant la touche Alt (Windows)
ou Option (Mac OS) enfonc&eacute;e.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 81
Utilisation des objets vectoriels
R&eacute;glage des formes automatiques en forme d’anneaux
Les formes automatiques repr&eacute;sentant des anneaux disposent initialement de trois points de contr&ocirc;le. Pour chaque
nouvelle section, Fireworks ajoute un point de contr&ocirc;le permettant de la redimensionner ou de la diviser.
• Pour ajouter une section, faites glisser un point de contr&ocirc;le d’ajout/de division de secteur sur le p&eacute;rim&egrave;tre ext&eacute;rieur
de la forme tout en maintenant la touche Alt (Windows) ou Option (Mac OS) enfonc&eacute;e.
• Pour supprimer une section, faites glisser le point de contr&ocirc;le d’ajout/division de secteur sur le p&eacute;rim&egrave;tre ext&eacute;rieur
de la forme pour d&eacute;finir la portion de la forme qui doit rester dans la zone de travail.
• Pour redimensionner le rayon int&eacute;rieur, faites glisser son point de contr&ocirc;le.
• Pour affecter la valeur z&eacute;ro au rayon int&eacute;rieur, cliquez sur son point de contr&ocirc;le de r&eacute;initialisation.
R&eacute;glage des formes automatiques repr&eacute;sentant des formes en L
• Pour modifier la hauteur ou la largeur d’une section, faites glisser le point de contr&ocirc;le de hauteur ou de largeur.
• Pour r&eacute;gler l’arrondi des angles, faites glisser le point de contr&ocirc;le de rayon d’angle.
R&eacute;glage des formes automatiques de l’outil Mesure
• Pour modifier la longueur ou l’angle de la section mesur&eacute;e, faites glisser le point de contr&ocirc;le &agrave; l’une des extr&eacute;mit&eacute;s
de la ligne.
• Pour modifier les unit&eacute;s et passer des pixels aux pouces, maintenez la touche Ctrl (Windows) ou Cmde (Mac OS)
enfonc&eacute;e tout en faisant glisser un point de contr&ocirc;le &agrave; l’une des extr&eacute;mit&eacute;s.
• Pour allonger ou raccourcir les lignes de d&eacute;limitation de la section mesur&eacute;e, faites glisser un point de contr&ocirc;le sur
l’un des c&ocirc;t&eacute;s de la valeur mesur&eacute;e.
L’outil Mesure est utile lorsque vous d&eacute;finissez des sp&eacute;cifications d’interface. Pour masquer les mesures, cliquez sur
l’ic&ocirc;ne repr&eacute;sentant un œil situ&eacute;e dans le panneau Calques.
R&eacute;glage des formes automatiques en forme de graphiques &agrave; secteurs
Les formes automatiques repr&eacute;sentant des graphiques &agrave; secteurs disposent initialement de trois points de contr&ocirc;le.
Pour chaque nouvelle section, Fireworks ajoute un point de contr&ocirc;le permettant de la redimensionner ou de la diviser.
• Pour ajouter un secteur, faites glisser un point de contr&ocirc;le de glissement vers un segment sur le p&eacute;rim&egrave;tre ext&eacute;rieur
de la forme tout en maintenant la touche Alt (Windows) ou Option (Mac OS) enfonc&eacute;e.
• Pour redimensionner une tranche (secteur) de graphique &agrave; secteurs, faites glisser un point de contr&ocirc;le de glissement
vers un segment sur le p&eacute;rim&egrave;tre ext&eacute;rieur de la forme.
• Pour r&eacute;initialiser un graphique &agrave; secteurs &agrave; une tranche, cliquez sur son point de contr&ocirc;le de r&eacute;initialisation.
R&eacute;glage des formes automatiques repr&eacute;sentant des polygones intelligents
• Pour redimensionner ou faire pivoter le polygone, faites glisser le point de contr&ocirc;le de mise &agrave; l’&eacute;chelle/rotation.
Pour effectuer une rotation uniquement, faites glisser le point de contr&ocirc;le de mise &agrave; l’&eacute;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&ocirc;le de sections.
• Pour modifier le nombre de c&ocirc;t&eacute;s, faites glisser le point de contr&ocirc;le de c&ocirc;t&eacute;s.
• Pour segmenter le polygone, faites glisser le point de contr&ocirc;le des c&ocirc;t&eacute;s tout en maintenant la touche Alt (Windows)
ou Option (Mac OS).
• Pour redimensionner un polygone int&eacute;rieur, faites glisser son point de contr&ocirc;le.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 82
Utilisation des objets vectoriels
• Pour r&eacute;initialiser un polygone int&eacute;rieur, faites glisser son point de contr&ocirc;le de r&eacute;initialisation.
R&eacute;glage des formes automatiques en forme de spirales
• Pour modifier le nombre de spires, faites glisser le point de contr&ocirc;le de spirales.
• Pour ouvrir ou fermer la spirale, cliquez sur le point de contr&ocirc;le d’ouverture/fermeture de spirale.
R&eacute;glage des formes automatiques &eacute;toil&eacute;es
• Pour modifier le nombre de c&ocirc;t&eacute;s, faites glisser le point de contr&ocirc;le de pointes.
• Pour r&eacute;gler la base des branches, faites glisser le point de contr&ocirc;le correspondant.
• Pour r&eacute;gler les pointes, faites glisser le point de contr&ocirc;le de sommet.
• Pour r&eacute;gler l’arrondi des sommets et des bases, faites glisser le point de contr&ocirc;le d’arrondi.
Utilisation de formes automatiques suppl&eacute;mentaires
Le panneau Formes automatiques contient d’autres formes automatiques plus complexes que celles du
panneau Outils. Pour ins&eacute;rer ces formes automatiques dans votre dessin, faites-les glisser du panneau Formes
automatiques vers la zone de travail.
1 Choisissez Fen&ecirc;tre &gt; Formes automatiques pour afficher le panneau Formes automatiques.
2 Faites glisser un aper&ccedil;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&ocirc;le.
Ajout de nouvelles formes automatiques dans Fireworks
Vous pouvez ajouter de nouvelles formes automatiques provenant du site Web d’Adobe&reg; Fireworks&reg; Exchange. Les
nouvelles formes automatiques apparaissent soit dans le panneau Formes automatiques, soit dans le menu Outils.
Vous pouvez &eacute;galement programmer de nouvelles formes automatiques dans Fireworks en code JavaScript. Pour plus
d’informations, reportez-vous &agrave; la section Extension de Fireworks.
1 Choisissez Fen&ecirc;tre &gt; Formes automatiques pour afficher le panneau Formes automatiques.
2 Dans le menu Options, s&eacute;lectionnez Acqu&eacute;rir plus de formes automatiques.
3 Sur le site Web Fireworks Exchange, suivez les instructions d’ajout de formes qui s’affichent &agrave; l’&eacute;cran.
Formes libres
Vous pouvez dessiner et retoucher des trac&eacute;s vectoriels pour cr&eacute;er pratiquement toutes les formes d’objets vectoriels
souhait&eacute;es.
Dessin de trac&eacute;s de forme libre &agrave; l’aide de l’outil Trac&eacute; vectoriel
Vous pouvez utiliser l’outil Trac&eacute; vectoriel, qui figure dans le menu contextuel Plume, pratiquement de la m&ecirc;me
mani&egrave;re qu’un marqueur ou un crayon.
Cet outil s’accompagne d’une grande vari&eacute;t&eacute; de cat&eacute;gories de traits, notamment l’a&eacute;rographe, la calligraphie, le fusain,
la craie grasse et les artifices. Ces cat&eacute;gories disposent elles-m&ecirc;mes de plusieurs types de contours, tels que le marqueur
clair, le marqueur fonc&eacute;, les &eacute;claboussures, le bambou, le ruban, les confettis, le 3D, le dentifrice et l’alien visqueux.
UTILISATION DE FIREWORKS CS5 83
Derni&egrave;re mise &agrave; jour le 29/4/2010
Utilisation des objets vectoriels
M&ecirc;me si les contours ressemblent &agrave; de la peinture ou &agrave; de l’encre, ils sont constitu&eacute;s de points et de trac&eacute;s comme tous
les objets vectoriels. Par cons&eacute;quent, vous pouvez changer la forme des contours selon diff&eacute;rentes techniques de
retouche vectorielle. Lorsque vous remodelez un trac&eacute;, le contour est redessin&eacute;. Vous pouvez &eacute;galement modifier les
traits de pinceau existants et appliquer des fonds aux objets s&eacute;lectionn&eacute;s qui ont &eacute;t&eacute; dessin&eacute;s avec l’outil
Trac&eacute; vectoriel.
Voir &laquo; Application de couleurs, de contours et de fonds &raquo; &agrave; la page 111.
1 Dans le menu contextuel de l’outil Plume, s&eacute;lectionnez l’outil Trac&eacute; vectoriel
.
2 (Facultatif) S&eacute;lectionnez les attributs de contour et les options de l’outil Trac&eacute; vectoriel dans l’inspecteur des
propri&eacute;t&eacute;s. (Facultatif) Pour obtenir un lissage plus pr&eacute;cis du trac&eacute;, s&eacute;lectionnez un nombre dans le menu
contextuel Pr&eacute;cision de l’inspecteur des propri&eacute;t&eacute;s, que vous appliquerez &agrave; l’outil Trac&eacute; vectoriel. Plus le nombre
s&eacute;lectionn&eacute; est &eacute;lev&eacute;, plus le nombre de points visibles sur le trac&eacute; que vous dessinez est &eacute;lev&eacute;.
3 Faites glisser le pointeur pour dessiner. Pour contraindre le trac&eacute; &agrave; une ligne horizontale ou verticale, faites glisser
le pointeur tout en maintenant la touche Maj enfonc&eacute;e.
4 Rel&acirc;chez le bouton de la souris &agrave; la fin du trac&eacute;. Pour fermer le trac&eacute;, rel&acirc;chez le bouton de la souris apr&egrave;s avoir
plac&eacute; le pointeur sur le premier point du trac&eacute;.
Dessin de trac&eacute;s de forme libre au moyen de points plac&eacute;s avec l’outil Plume
Le tra&ccedil;age de points est une technique semblable &agrave; celle utilis&eacute;e pour dessiner une image de points reli&eacute;s. Lorsque vous
cliquez sur chaque point avec l’outil Plume, Fireworks dessine automatiquement le trac&eacute; de l’objet vectoriel &agrave; partir du
dernier point sur lequel vous avez cliqu&eacute;.
L’outil Plume permet non seulement de relier des points par des segments de droite, mais &eacute;galement de dessiner des
segments incurv&eacute;s lisses d&eacute;riv&eacute;s d’une fonction math&eacute;matique appel&eacute;s des courbes de B&eacute;zier. Le type de point, point
d’angle ou point de courbe, d&eacute;termine si la forme adjacente est une droite ou une courbe.
Vous pouvez modifier les segments droits et incurv&eacute;s en faisant glisser leurs points. Vous pouvez les retoucher
davantage en faisant glisser leurs poign&eacute;es de point. Vous pouvez &eacute;galement convertir un segment droit en segment
incurv&eacute;, et inversement, en convertissant ses points.
Dessin d’un trac&eacute; avec des segments de droite
1 Dans le panneau Outils, cliquez sur l’outil Plume.
2 (Facultatif) Choisissez la commande Edition &gt; Pr&eacute;f&eacute;rences (Windows) ou Fireworks &gt; Pr&eacute;f&eacute;rences (Mac OS X) et
s&eacute;lectionnez l’une des options dans l’onglet Edition, puis cliquez sur le bouton OK :
Afficher l’aper&ccedil;u de l’outil Plume Permet d’obtenir un aper&ccedil;u du segment de droite tel qu’il doit appara&icirc;tre lors du
clic suivant.
Points pleins Permet d’afficher des points unis &agrave; mesure que vous dessinez.
3 Cliquez sur la zone de travail pour placer le premier point d’angle.
4 D&eacute;placez le pointeur et cliquez pour placer le point suivant.
5 Continuez &agrave; tracer des points. Les segments de droite relient les points.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 84
Utilisation des objets vectoriels
6 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Cliquez deux fois sur le dernier point pour terminer le trac&eacute; dans le cas d’un trac&eacute; ouvert.
• S&eacute;lectionnez un autre outil pour laisser ce trac&eacute; ouvert.
Remarque : si vous s&eacute;lectionnez un outil diff&eacute;rent (autre que l’outil Texte) puis revenez &agrave; l’outil Plume, Fireworks
reprend le dessin de l’objet &agrave; votre prochain clic.
• Pour fermer le trac&eacute;, cliquez sur le premier point que vous avez trac&eacute;. Les points de d&eacute;part et de fin d’un trac&eacute;
ferm&eacute; sont les m&ecirc;mes.
Remarque : les boucles form&eacute;es par un trac&eacute; qui se chevauche ne constituent pas des trac&eacute;s ferm&eacute;s. Seuls les trac&eacute;s
qui commencent et se terminent par le m&ecirc;me point sont des trac&eacute;s ferm&eacute;s.
Dessin d’un trac&eacute; avec des segments incurv&eacute;s
1 Dans le panneau Outils, s&eacute;lectionnez l’outil Plume.
2 Cliquez pour placer le premier point d’angle.
3 D&eacute;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 &eacute;tend le segment de droite jusqu’au nouveau point.
4 Continuez &agrave; tracer des points. Lorsque vous faites glisser un nouveau point, vous cr&eacute;ez un point de courbe. Si vous
cliquez simplement, vous cr&eacute;ez un point d’angle.
Vous pouvez utiliser temporairement l’outil Sous-s&eacute;lection pour changer l’emplacement des points et la forme des
courbes que vous tracez. Faites glisser un point ou une poign&eacute;e de point avec l’outil Plume tout en maintenant la
touche Ctrl (Windows) ou Commande (Mac OS) enfonc&eacute;e.
5 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Pour terminer le trac&eacute; en tant que trac&eacute; ouvert, cliquez deux fois sur le dernier point ou s&eacute;lectionnez un autre
outil. Si vous s&eacute;lectionnez certains outils puis revenez &agrave; l’outil Plume, Fireworks reprend le dessin de l’objet &agrave;
votre prochain clic.
• Pour fermer le trac&eacute;, cliquez sur le premier point que vous avez trac&eacute;. Les points de d&eacute;part et de fin d’un trac&eacute;
ferm&eacute; sont les m&ecirc;mes.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 85
Utilisation des objets vectoriels
Conversion de segments de trac&eacute; en points droits ou incurv&eacute;s
Des points d’angle figurent &agrave; l’intersection des segments droits. Les segments incurv&eacute;s comportent des points
de courbe.
Vous pouvez convertir un segment droits en segment incurv&eacute;, 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&eacute; s&eacute;lectionn&eacute;, puis faites-le glisser &agrave; l’&eacute;cart de sa position initiale.
Les poign&eacute;es s’&eacute;tendent, courbant ainsi les segments adjacents.
Remarque : pour modifier les poign&eacute;es du point, choisissez l’outil Sous-s&eacute;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&eacute; s&eacute;lectionn&eacute;.
Les poign&eacute;es se r&eacute;tractent, et les segments adjacents se redressent.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 86
Utilisation des objets vectoriels
Retouche de trac&eacute;s de forme libre &agrave; l’aide des points et des poign&eacute;es de points
L’outil Sous-s&eacute;lection du panneau Outils permet de s&eacute;lectionner plusieurs points. Avant de s&eacute;lectionner un point
avec l’outil Sous-s&eacute;lection, s&eacute;lectionnez le trac&eacute; en utilisant l’outil Pointeur ou Sous-s&eacute;lection, ou bien en cliquant sur
sa vignette dans le panneau Calques.
S&eacute;lection de points sp&eacute;cifiques sur un trac&eacute; s&eacute;lectionn&eacute;
❖ A l’aide de l’outil Sous-s&eacute;lection, proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Cliquez sur un point ou cliquez successivement sur plusieurs points tout en maintenant la touche Maj enfonc&eacute;e.
• Tracez une zone autour des points &agrave; s&eacute;lectionner.
Insertion d’un point sur un trac&eacute; s&eacute;lectionn&eacute;
Ajoutez des points &agrave; un trac&eacute; pour contr&ocirc;ler l’un des segments du trac&eacute;.
❖ Avec l’outil Plume, cliquez sur l’une des parties du trac&eacute; qui ne comporte pas encore de point.
Suppression d’un point sur un trac&eacute; s&eacute;lectionn&eacute;
Supprimez des points pour remodeler le trac&eacute; ou simplifier sa modification.
❖ Proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Cliquez avec le pointeur de l’outil Plume sur l’un des points d’angle d’un objet s&eacute;lectionn&eacute;.
• Cliquez deux fois avec le pointeur de l’outil Plume sur l’un des points de courbe d’un objet s&eacute;lectionn&eacute;.
• S&eacute;lectionnez un point avec l’outil Sous-s&eacute;lection, et appuyez sur la touche Suppr ou Retour arri&egrave;re.
D&eacute;placement d’un point
❖ Faites-le glisser avec l’outil Sous-s&eacute;lection.
Modification d’un segment de droite
1 S&eacute;lectionnez le trac&eacute; &agrave; l’aide de l’outil Pointeur ou Sous-s&eacute;lection.
2 Cliquez sur un point avec l’outil Sous-s&eacute;lection.
Les points d’angle s&eacute;lectionn&eacute;s prennent la forme de carr&eacute;s pleins bleus.
3 Faites glisser le point ou utilisez l’une des touches fl&eacute;ch&eacute;es pour d&eacute;placer le point vers un autre emplacement.
Modification de la forme d’un segment de trac&eacute; de courbe
1 S&eacute;lectionnez le trac&eacute; &agrave; l’aide de l’outil Pointeur ou Sous-s&eacute;lection.
2 Cliquez sur un point de courbe avec l’outil Sous-s&eacute;lection.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 87
Utilisation des objets vectoriels
Les points de courbe s&eacute;lectionn&eacute;s prennent la forme de carr&eacute;s pleins bleus. Les poign&eacute;es du point s’&eacute;tendent depuis
le point.
3 Faites glisser les poign&eacute;es vers un nouvel emplacement. Maintenez la touche Maj enfonc&eacute;e pendant que vous faites
glisser une poign&eacute;e pour imposer &agrave; son d&eacute;placement un angle de 45 degr&eacute;s.
L’aper&ccedil;u du trac&eacute; en bleu indique l’emplacement du nouveau trac&eacute; si vous rel&acirc;chez le bouton de la souris.
A
B
C
D
E
A. Poign&eacute;e de point B. Point s&eacute;lectionn&eacute; C. Pointeur de sous-s&eacute;lection D. Aper&ccedil;u du trac&eacute; E. Trac&eacute;
Par exemple, si vous faites glisser la poign&eacute;e de point gauche vers le bas, la poign&eacute;e de point droite monte. Tout en
maintenant la touche Alt enfonc&eacute;e, faites glisser la poign&eacute;e pour la d&eacute;placer s&eacute;par&eacute;ment.
R&eacute;glage de la poign&eacute;e d’un point d’angle
1 A l’aide de l’outil Sous-s&eacute;lection, s&eacute;lectionnez un point d’angle.
2 Tout en maintenant la touche Alt (Windows) ou Option (Mac OS) enfonc&eacute;e, faites glisser le point pour afficher sa
poign&eacute;e et incurver le segment adjacent.
Pour modifier un segment de trac&eacute; adjacent, faites glisser la poign&eacute;e d’un point d’angle &agrave; l’aide de l’outil Sous-s&eacute;lection.
Extension et fusion de trac&eacute;s de forme libre
Pour poursuivre le dessin d’un trac&eacute; ouvert existant et fusionner les trac&eacute;s, utilisez l’outil Plume.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 88
Utilisation des objets vectoriels
Reprise du dessin d’un trac&eacute; ouvert existant
1 Dans le panneau Outils, cliquez sur l’outil Plume.
2 Cliquez sur le point de fin (extr&eacute;mit&eacute;), puis reprenez le trac&eacute;.
Fusion de deux trac&eacute;s ouverts
Lorsque vous reliez deux trac&eacute;s, les attributs de contour, de fond et de filtre du trac&eacute; sup&eacute;rieur deviennent les attributs
du trac&eacute; nouvellement fusionn&eacute;.
1 Dans le panneau Outils, s&eacute;lectionnez l’outil Plume.
2 Cliquez sur le point de fin (extr&eacute;mit&eacute;) de l’un des trac&eacute;s.
3 Placez le pointeur sur le point de fin (extr&eacute;mit&eacute;) de l’autre trac&eacute;, puis cliquez.
Jonction automatique de trac&eacute;s ouverts similaires
Vous pouvez relier deux trac&eacute;s ouverts qui partagent des attributs de contour et de fond similaires.
1 S&eacute;lectionnez un trac&eacute; ouvert.
2 Choisissez l’outil Sous-s&eacute;lection, puis faites glisser l’un des points de fin du trac&eacute; &agrave; quelques pixels du point de fin
d’un trac&eacute; similaire.
Formes compos&eacute;es
Cr&eacute;ation de formes compos&eacute;es
Cr&eacute;ez une forme compos&eacute;e &agrave; l’aide de trac&eacute;s vectoriels simples, tels que des rectangles, ellipses ou autres. L’outil Souss&eacute;lection permet de d&eacute;placer et de modifier les objets individuels d’une forme compos&eacute;e, m&ecirc;me apr&egrave;s qu’ils ont &eacute;t&eacute;
associ&eacute;s. Avec le mode Forme compos&eacute;e, tous les nouveaux objets de vecteur sont ajout&eacute;s au m&ecirc;me objet dans le
panneau des calques. Pour ajouter des objets &agrave; un autre objet, quittez ce mode au moyen du bouton Normal.
Pour cr&eacute;er des formes compos&eacute;es, proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Cr&eacute;ez un vecteur, s&eacute;lectionnez l’op&eacute;ration de forme compos&eacute;e requise (Ajouter ou Soustraire, par exemple) et
dessinez d’autres vecteurs.
• Cr&eacute;ez plusieurs vecteurs et utilisez l’op&eacute;ration de forme compos&eacute;e.
Application d’une forme compos&eacute;e apr&egrave;s cr&eacute;ation de plusieurs objets vectoriels
1 S&eacute;lectionnez tous les objets &agrave; inclure dans la forme compos&eacute;e. Tous les trac&eacute;s ouverts s&eacute;lectionn&eacute;s sont
automatiquement ferm&eacute;s.
2 S&eacute;lectionnez un outil Vecteur (rectangle, ellipse, plume ou trac&eacute; vectoriel) dans la palette d’outils.
3 S&eacute;lectionnez l’une des options suivantes dans l’inspecteur des propri&eacute;t&eacute;s.
• Ajouter / Union
• Soustraire / Poin&ccedil;on
• Intersection
• Recadrer
Pour l’op&eacute;ration Poin&ccedil;on, le dernier objet ajout&eacute; est poin&ccedil;onn&eacute; lors de l’union des autres objets. C’est le cas &eacute;galement
pour l’op&eacute;ration Poin&ccedil;on ex&eacute;cut&eacute;e par le biais de Modification &gt; Combiner les trac&eacute;s.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 89
Utilisation des objets vectoriels
Application d’une forme compos&eacute;e avant cr&eacute;ation de plusieurs objets vectoriels
1 Cr&eacute;ez un objet vectoriel.
2 S&eacute;lectionnez l’une des options suivantes dans l’inspecteur des propri&eacute;t&eacute;s.
• Ajouter / Union
• Soustraire / Poin&ccedil;on
• Intersection
• Recadrer
3 Dessinez d’autres objets par-dessus le premier pour obtenir l’effet souhait&eacute;.
Conversion d’une forme compos&eacute;e en trac&eacute; composite
Une fois une forme compos&eacute;e convertie en trac&eacute; composite, il est impossible de d&eacute;placer ou de modifier les objets
individuels la composant.
❖ Pour convertir une forme compos&eacute;e en trac&eacute; composite, cliquez sur le bouton Associer.
Techniques sp&eacute;cifiques de retouche vectorielle
Certains outils de Fireworks permettent non seulement de d&eacute;placer des points et des poign&eacute;es de point, mais aussi de
modifier directement des objets vectoriels. Vous pouvez &eacute;galement utiliser les fonctions de trac&eacute; pour cr&eacute;er des formes
en combinant ou en modifiant les trac&eacute;s existants. Par ailleurs, le panneau Trac&eacute; vous permet d’acc&eacute;der rapidement
aux commandes propres aux trac&eacute;s.
Retouche de trac&eacute;s avec les outils vectoriels
Les outils vectoriels figurent dans le panneau Outils.
Courbure et remodelage d’objets vectoriels &agrave; 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&eacute;, quel que soit l’emplacement des points. Fireworks ajoute,
d&eacute;place ou supprime des points le long du trac&eacute; &agrave; mesure que vous changez la forme de l’objet vectoriel.
A
Segment de trac&eacute; tir&eacute; avec l’outil Forme libre (A mesurant la longueur sp&eacute;cifi&eacute;e)
Segment de trac&eacute; pouss&eacute; avec l’outil Forme libre
UTILISATION DE FIREWORKS CS5 90
Derni&egrave;re mise &agrave; jour le 29/4/2010
Utilisation des objets vectoriels
Lorsque vous d&eacute;placez le pointeur sur un trac&eacute; s&eacute;lectionn&eacute;, il se transforme en pointeur de pouss&eacute;e ou de traction, en
fonction de sa position par rapport au trac&eacute; s&eacute;lectionn&eacute;. Vous pouvez &eacute;galement changer la taille du pointeur de
pouss&eacute;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&eacute; s&eacute;lectionn&eacute;.
L’outil Forme libre est en cours d’utilisation, et le pointeur de traction tire sur le trac&eacute; s&eacute;lectionn&eacute;.
L’outil Forme libre est en cours d’utilisation, et le pointeur de pouss&eacute;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&eacute;rieur et le cercle ext&eacute;rieur reforme le trac&eacute; selon une intensit&eacute; inf&eacute;rieure &agrave; l’intensit&eacute; maximale.
Remarque : l’outil Forme libre reporte &eacute;galement la pression exerc&eacute;e sur une tablette Wacom ou compatible.
Tirage d’un trac&eacute; s&eacute;lectionn&eacute;
Lorsque le pointeur se trouve juste au-dessus du trac&eacute;, 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&eacute; s&eacute;lectionn&eacute;.
3 Dessinez le trac&eacute;.
Pouss&eacute;e d’un trac&eacute; s&eacute;lectionn&eacute;
Lorsque le pointeur ne se trouve pas juste au-dessus du trac&eacute;, vous pouvez pousser celui-ci.
1 Dans le panneau Outils, s&eacute;lectionnez l’outil Forme libre.
2 Positionnez le pointeur l&eacute;g&egrave;rement &agrave; l’&eacute;cart du trac&eacute;.
3 Faites glisser le pointeur vers le trac&eacute; pour exercer une pouss&eacute;e. D&eacute;placez l&eacute;g&egrave;rement le trac&eacute; s&eacute;lectionn&eacute; pour lui
donner une nouvelle forme.
Modification de la taille du pointeur de pouss&eacute;e
❖ Proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Tout en maintenant le bouton de la souris enfonc&eacute;, appuyez sur la touche fl&eacute;ch&eacute;e Droite ou sur la touche
num&eacute;rique 2 pour &eacute;largir le pointeur.
• Tout en maintenant le bouton de la souris enfonc&eacute;, appuyez sur la touche fl&eacute;ch&eacute;e Gauche ou sur la touche
num&eacute;rique 1 pour rendre le pointeur plus &eacute;troit.
• Pour d&eacute;finir la taille du pointeur (en pixels) et la longueur du segment de trac&eacute; affect&eacute; par ce dernier,
d&eacute;s&eacute;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&eacute;t&eacute;s.
UTILISATION DE FIREWORKS CS5 91
Derni&egrave;re mise &agrave; jour le 29/4/2010
Utilisation des objets vectoriels
Distorsion de trac&eacute;s &agrave; l’aide de l’outil Reformer la zone
L’outil Reformer la zone permet de tirer la zone form&eacute;e par tous les trac&eacute;s s&eacute;lectionn&eacute;s dans le cercle ext&eacute;rieur du
pointeur Reformer la zone.
Le cercle int&eacute;rieur du pointeur correspond &agrave; la d&eacute;limitation de l’outil lorsque l’intensit&eacute; est maximale. La zone
comprise entre les cercles int&eacute;rieur et ext&eacute;rieur reforme le trac&eacute; selon une intensit&eacute; inf&eacute;rieure &agrave; l’intensit&eacute; maximale.
Le cercle ext&eacute;rieur du pointeur d&eacute;termine la force d’attraction. Vous pouvez d&eacute;finir son intensit&eacute;.
Remarque : l’outil Reformer la zone reporte &eacute;galement la pression exerc&eacute;e sur une tablette Wacom ou compatible.
1 Dans le menu contextuel de l’outil Forme libre, s&eacute;lectionnez l’outil Reformer la zone.
2 Faites glisser le pointeur sur les trac&eacute;s pour les redessiner.
Modification de la taille du pointeur Reformer la zone
❖ Proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Tout en maintenant le bouton de la souris enfonc&eacute;, appuyez sur la touche fl&eacute;ch&eacute;e Droite ou sur la touche
num&eacute;rique 2 pour &eacute;largir le pointeur.
• Tout en maintenant le bouton de la souris enfonc&eacute;, appuyez sur la touche fl&eacute;ch&eacute;e Gauche ou sur la touche
num&eacute;rique 1 pour rendre le pointeur plus &eacute;troit.
• Pour d&eacute;finir la taille du pointeur (en pixels) et la longueur du segment de trac&eacute; affect&eacute; par ce dernier,
d&eacute;s&eacute;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&eacute;t&eacute;s.
D&eacute;finition de l’intensit&eacute; du cercle int&eacute;rieur du pointeur Reformer la zone
❖ Dans la zone Intensit&eacute; de l’inspecteur des propri&eacute;t&eacute;s, entrez une valeur comprise entre 1 et 100 pour sp&eacute;cifier le
pourcentage d’intensit&eacute; potentielle du pointeur. L’intensit&eacute; est directement proportionnelle au pourcentage
exprim&eacute;.
Nouveau dessin ou extension d’un segment de trac&eacute; s&eacute;lectionn&eacute; &agrave; l’aide de l’outil
Redessiner le trac&eacute;
Lorsque vous utilisez l’outil Redessiner le trac&eacute;, les attributs de contour, de fond et d’effet sont conserv&eacute;s.
1 Dans le menu contextuel de l’outil Plume, s&eacute;lectionnez l’outil Redessiner le trac&eacute;
.
2 (Facultatif) Modifiez le niveau de pr&eacute;cision de l’outil Redessiner le trac&eacute; en s&eacute;lectionnant un nombre dans le menu
contextuel de la zone Pr&eacute;cision, dans l’inspecteur des propri&eacute;t&eacute;s. Plus le nombre s&eacute;lectionn&eacute; est &eacute;lev&eacute;, plus le
nombre de points affich&eacute;s sur le trac&eacute; est &eacute;lev&eacute;.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 92
Utilisation des objets vectoriels
3 Positionnez le pointeur directement sur le trac&eacute;.
4 Faites glisser le pointeur pour redessiner ou &eacute;tendre le segment de trac&eacute;.
5 Rel&acirc;chez le bouton de la souris.
Modification de l’aspect d’un trac&eacute; par variation de la pression et de la vitesse &agrave; l’aide des
outils Modulateur de trac&eacute;
En utilisant une pression ou une vitesse diff&eacute;rente, vous pouvez modifier les propri&eacute;t&eacute;s de contour d’un trac&eacute;. Pour
d&eacute;finir les propri&eacute;t&eacute;s affect&eacute;es par les outils Modulateur de trac&eacute;, utilisez l’onglet Sensibilit&eacute; de la bo&icirc;te de dialogue
Modifier le contour. Vous pouvez &eacute;galement sp&eacute;cifier dans quelle mesure la pression et la vitesse s’appliquent &agrave; ces
propri&eacute;t&eacute;s.
Pour plus de d&eacute;tails sur la d&eacute;finition des options de la bo&icirc;te de dialogue Modifier le contour, reportez-vous &agrave; la
section &laquo; Application et modification de contours &raquo; &agrave; la page 120.
D&eacute;coupage d’un trac&eacute; en plusieurs objets &agrave; l’aide de l’outil Cutter
1 Dans le panneau Outils, s&eacute;lectionnez l’outil Cutter .
Remarque : l’utilisation de la gomme sur des stylets Wacom s&eacute;lectionne automatiquement l’outil Cutter.
2 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Faites glisser le pointeur sur le trac&eacute;.
• Cliquez sur le trac&eacute;.
3 D&eacute;s&eacute;lectionnez le trac&eacute;.
Retouche de trac&eacute;s avec les options de trac&eacute;
Les fonctions de trac&eacute; du menu Modification permettent de cr&eacute;er des formes en combinant ou en modifiant des trac&eacute;s
existants. Pour certaines fonctions de trac&eacute;, l’ordre d’empilage des objets trac&eacute;s s&eacute;lectionn&eacute;s d&eacute;finit le d&eacute;roulement de
l’op&eacute;ration.
Pour plus de d&eacute;tails sur l’ordre d’empilement des objets s&eacute;lectionn&eacute;s, reportez-vous &agrave; la section &laquo; Empilement des
objets &raquo; &agrave; la page 54.
Remarque : l’utilisation des fonctions de trac&eacute; supprime toutes les informations de pression et de vitesse des trac&eacute;s
concern&eacute;s.
Cr&eacute;ation d’un trac&eacute; continu &agrave; partir de deux trac&eacute;s ouverts
1 Dans le panneau Outils, s&eacute;lectionnez l’outil Sous-s&eacute;lection.
2 S&eacute;lectionnez deux points de fin (extr&eacute;mit&eacute;s) sur deux trac&eacute;s ouverts.
3 S&eacute;lectionnez la commande Modification &gt; Combiner les trac&eacute;s &gt; Joindre.
Cr&eacute;ation d’un trac&eacute; composite
1 S&eacute;lectionnez au moins deux trac&eacute;s ouverts ou ferm&eacute;s.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 93
Utilisation des objets vectoriels
2 S&eacute;lectionnez la commande Modification &gt; Combiner les trac&eacute;s &gt; Joindre.
S&eacute;paration d’un trac&eacute; composite
1 S&eacute;lectionnez le trac&eacute; composite.
2 Choisissez Modification &gt; Combiner les trac&eacute;s &gt; S&eacute;parer.
Combinaison de trac&eacute;s ferm&eacute;s s&eacute;lectionn&eacute;s en un trac&eacute; englobant toute la zone occup&eacute;e par
les trac&eacute;s d’origine
❖ S&eacute;lectionnez la commande Modification &gt; Combiner les trac&eacute;s &gt; Union. Le trac&eacute; qui en r&eacute;sulte a les attributs de
contour et de fond de l’objet situ&eacute; &agrave; l’arri&egrave;re-plan.
Conversion d’un trac&eacute; en cadre de s&eacute;lection
Vous pouvez convertir une forme vectorielle en une s&eacute;lection bitmap, puis utiliser les outils bitmap pour &eacute;diter la
nouvelle s&eacute;lection bitmap.
1 S&eacute;lectionnez un trac&eacute;.
2 Choisissez Modification &gt; Convertir le trac&eacute; en cadre de s&eacute;lection.
3 Dans la bo&icirc;te de dialogue Convertir le trac&eacute; en cadre de s&eacute;lection, s&eacute;lectionnez un param&egrave;tre Bord &agrave; appliquer au
cadre de s&eacute;lection.
4 Si vous avez s&eacute;lectionn&eacute; Contour progressif comme bord, sp&eacute;cifiez la valeur de diffusion &agrave; utiliser.
5 Cliquez sur OK.
Remarque : la conversion d’un trac&eacute; en cadre de s&eacute;lection supprime le trac&eacute; s&eacute;lectionn&eacute;. Pour modifier cette valeur
par d&eacute;faut, choisissez la commande Edition &gt; Pr&eacute;f&eacute;rences &gt; Edition, puis d&eacute;s&eacute;lectionnez l’option Supprimer les trac&eacute;s
lors de la conversion en s&eacute;lection.
Cr&eacute;ation d’un objet &agrave; partir de l’intersection d’autres objets
❖ S&eacute;lectionnez la commande Modification &gt; Combiner les trac&eacute;s &gt; Intersection. Le trac&eacute; qui en r&eacute;sulte a les attributs
de contour et de fond de l’objet situ&eacute; &agrave; l’arri&egrave;re-plan.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 94
Utilisation des objets vectoriels
Suppression de portions d’un objet trac&eacute;
Vous pouvez supprimer des portions d’un objet trac&eacute; s&eacute;lectionn&eacute; telles qu’elles sont d&eacute;finies par les portions
superpos&eacute;es d’un autre objet trac&eacute; s&eacute;lectionn&eacute; dispos&eacute; devant lui.
1 S&eacute;lectionnez l’objet trac&eacute; qui d&eacute;finit la zone &agrave; supprimer.
2 Choisissez la commande Modification &gt; Disposer &gt; Premier plan.
3 Tout en maintenant la touche Maj enfonc&eacute;e, ajoutez &agrave; la s&eacute;lection l’objet trac&eacute; dont les portions doivent
&ecirc;tre supprim&eacute;es.
4 Choisissez Modification &gt; Combiner les trac&eacute;s &gt; Poin&ccedil;on.
Recadrage d’un trac&eacute;
Vous pouvez recadrer un trac&eacute; &agrave; l’aide de la forme d’un autre trac&eacute;. Le trac&eacute; au premier plan (sup&eacute;rieur) d&eacute;finit la
forme de la zone recadr&eacute;e.
1 S&eacute;lectionnez l’objet trac&eacute; qui d&eacute;finit la zone &agrave; recadrer.
2 Choisissez la commande Modification &gt; Disposer &gt; Premier plan.
3 Tout en maintenant la touche Maj enfonc&eacute;e, ajoutez &agrave; la s&eacute;lection l’objet trac&eacute; &agrave; recadrer.
4 Choisissez Modification &gt; Combiner les trac&eacute;s &gt; Recadrage.
L’objet trac&eacute; qui en r&eacute;sulte adopte les attributs de contour et de fond de l’objet trac&eacute; situ&eacute; compl&egrave;tement &agrave; l’arri&egrave;re-plan.
Simplification d’un trac&eacute;
La commande Simplifier permet de supprimer du trac&eacute; le nombre de points redondants que vous sp&eacute;cifiez. Sont
consid&eacute;r&eacute;s comme redondants un nombre de points sup&eacute;rieur &agrave; deux sur une droite ou des points enti&egrave;rement
superpos&eacute;s.
1 Choisissez Modification &gt; Modifier le trac&eacute; &gt; Simplifier.
2 Entrez une valeur de simplification, puis cliquez sur OK.
La simplification d’un trac&eacute; augmente la possibilit&eacute; pour Fireworks de modifier le trac&eacute; afin de r&eacute;duire le nombre
de points sur ce trac&eacute;.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 95
Utilisation des objets vectoriels
Extension du contour d’un objet s&eacute;lectionn&eacute;
Vous pouvez convertir le contour d’un trac&eacute; s&eacute;lectionn&eacute; en trac&eacute; ferm&eacute;. Le trac&eacute; ainsi obtenu cr&eacute;e l’illusion d’un trac&eacute;
sans fond mais dot&eacute; d’un contour reprenant les m&ecirc;mes attributs que ceux du fond de l’objet d’origine.
Remarque : l’extension du contour d’un trac&eacute; qui s’entrecoupe peut produire des r&eacute;sultats int&eacute;ressants. Si le trac&eacute;
d’origine contient un fond, les portions du trac&eacute; qui s’entrecoupent ne contiennent pas de fond une fois le contour &eacute;tendu.
1 Choisissez Modification &gt; Modifier le trac&eacute; &gt; Etendre le contour.
2 D&eacute;finissez la largeur du trac&eacute; ferm&eacute; obtenu.
3 S&eacute;lectionnez un type d’angle.
4 Si vous avez s&eacute;lectionn&eacute; la forme en pointe, d&eacute;finissez la pointe (le point auquel un angle en pointe devient
automatiquement biseaut&eacute;). La limite est le rapport de la longueur du coin sur la largeur du trait.
5 S&eacute;lectionnez une option d’extr&eacute;mit&eacute;, puis cliquez sur OK.
Contraction et dilatation d’un trac&eacute;
1 Choisissez Modification &gt; Modifier le trac&eacute; &gt; Rapporter le trac&eacute;.
2 S&eacute;lectionnez une direction &agrave; suivre pour contracter ou dilater le trac&eacute; :
A l’int&eacute;rieur Permet de contracter le trac&eacute;.
A l’ext&eacute;rieur Permet de dilater le trac&eacute;.
3 D&eacute;finissez la largeur s&eacute;parant le trac&eacute; d’origine du trac&eacute; contract&eacute; ou dilat&eacute;.
4 S&eacute;lectionnez un type d’angle.
5 Si vous avez s&eacute;lectionn&eacute; la forme en pointe, d&eacute;finissez la pointe correspondante.
6 Cliquez sur OK.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 96
Utilisation des objets vectoriels
Retouche de trac&eacute;s &agrave; l’aide du panneau Trac&eacute;
Pour acc&eacute;l&eacute;rer l’ex&eacute;cution des t&acirc;ches de modification de trac&eacute;s, utilisez les outils suivants du panneau Trac&eacute; (Fen&ecirc;tre &gt;
Autres &gt; Trac&eacute;).
Pour plus d'informations, voir http://www.adobe.com/go/learn_fw_designguide_fr
Derni&egrave;re mise &agrave; jour le 29/4/2010
Chapitre 7 : Utilisation du texte
Adobe&reg; Fireworks&reg; permet d’utiliser un grand nombre de fonctions g&eacute;n&eacute;ralement r&eacute;serv&eacute;es aux applications de PAO
sophistiqu&eacute;es (multitude de polices et de corps de caract&egrave;res, r&eacute;glage du cr&eacute;nage, de l’espacement, des couleurs, de
l’interlignage et du d&eacute;calage vertical, etc.). Vous pouvez &agrave; tout moment modifier du texte, m&ecirc;me apr&egrave;s avoir appliqu&eacute;
des filtres dynamiques. Vous pouvez m&ecirc;me importer un texte modifiable &agrave; partir d’un document Adobe Photoshop&reg;.
Entr&eacute;e de texte
Utilisez l’outil Texte
vos graphiques.
et les options de l’inspecteur des propri&eacute;t&eacute;s pour saisir, mettre en forme et &eacute;diter du texte dans
Remarque : Si l'inspecteur des propri&eacute;t&eacute;s est r&eacute;duit, double-cliquez sur sa barre pour consulter toutes les propri&eacute;t&eacute;s de
texte.
Les objets texte sont automatiquement enregistr&eacute;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&eacute;t&eacute;s ou dans la vignette de panneau d’objet
affich&eacute;e dans le panneau Calques.
Dans le panneau Calques, les objets texte peuvent &ecirc;tre identifi&eacute;s par l’ic&ocirc;ne T.
Voir aussi
&laquo; Pr&eacute;f&eacute;rences de texte &raquo; &agrave; la page 312
Cr&eacute;ation et d&eacute;placement de blocs de texte
Dans les documents Fireworks, le texte figure dans un bloc de texte (rectangle dot&eacute; de poign&eacute;es). Il existe des blocs de
texte &agrave; redimensionnement automatique ou de largeur fixe.
• Un bloc de texte &agrave; redimensionnement automatique s’&eacute;tend horizontalement &agrave; mesure que vous saisissez le texte
et se r&eacute;duit lorsque vous supprimez du texte. Des blocs de texte &agrave; redimensionnement automatique sont cr&eacute;&eacute;s par
d&eacute;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&ocirc;ler la largeur des lignes de texte. Ces blocs sont cr&eacute;&eacute;s par
d&eacute;faut lorsque vous tracez un bloc de texte &agrave; l’aide de l’outil Texte.
• Lorsque le pointeur de texte est actif dans un bloc de texte, un cercle ou un carr&eacute; &eacute;vid&eacute; s’affiche dans le coin
sup&eacute;rieur droit du bloc de texte. Le cercle indique qu’il s’agit d’un bloc de texte &agrave; redimensionnement automatique,
tandis que le carr&eacute; identifie un bloc de texte de largeur fixe. Cliquez deux fois sur l’angle pour basculer d’un bloc de
texte &agrave; l’autre.
1 S&eacute;lectionnez l’outil Texte.
2 S&eacute;lectionnez les caract&eacute;ristiques du texte.
3 Cr&eacute;ez un bloc de texte :
• Pour cr&eacute;er un bloc de texte &agrave; redimensionnement automatique, cliquez dans votre document &agrave; l’endroit o&ugrave;
commencer le bloc.
97
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 98
Utilisation du texte
• Pour cr&eacute;er un bloc de texte &agrave; largeur fixe, dessinez un bloc en faisant glisser le pointeur de l’outil. Pour d&eacute;placer le
bloc de texte &agrave; mesure que vous le cr&eacute;ez en faisant glisser le pointeur de l’outil, tout en maintenant enfonc&eacute;s le
bouton de la souris et la barre d’espace, faites glisser le bloc de texte vers l’emplacement souhait&eacute;.
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&eacute;placer le bloc de texte, faites-le glisser vers un nouvel emplacement.
4 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Cliquez hors du bloc de texte.
• Dans le panneau Outils, s&eacute;lectionnez un autre outil.
• Appuyez sur la touche Echap.
Changement des blocs de texte &agrave; redimensionnement automatique et &agrave;
largeur fixe
A
B
Bloc de texte de largeur fixe et bloc de texte &agrave; redimensionnement automatique
A. Indicateur de largeur fixe B. Indicateur de redimensionnement automatique
• Pour changer un bloc de texte en bloc de largeur fixe ou &agrave; redimensionnement automatique, cliquez deux fois &agrave;
l’int&eacute;rieur du bloc de texte, puis cliquez deux fois sur le cercle ou le carr&eacute; figurant dans l’angle sup&eacute;rieur droit du
bloc de texte.
• Pour changer un bloc de texte s&eacute;lectionn&eacute; en bloc de largeur fixe par redimensionnement, faites glisser une poign&eacute;e
de redimensionnement.
• Pour affecter une largeur fixe &agrave; plusieurs blocs de texte, s&eacute;lectionnez ces blocs, puis choisissez Commandes &gt;
Texte &gt; D&eacute;finir la largeur.
• Pour d&eacute;finir des blocs de texte &agrave; largeur fixe en tant que blocs &agrave; redimensionnement automatique, s&eacute;lectionnez ces
blocs, puis choisissez Commandes &gt; Texte &gt; Basculer largeur fixe.
Indicateur de d&eacute;passement du texte
Lorsque le texte d&eacute;passe l'espace allou&eacute; par un bloc de texte ou un chemin, l'indicateur de d&eacute;passement de texte
s'affiche. Pour plus d'informations, voir http://www.fireworkszone.com/g-2-565.
S&eacute;lection de texte
S&eacute;lection d’un mot ou d’un paragraphe
❖ Cliquez deux fois dans un mot pour le s&eacute;lectionner et trois fois pour s&eacute;lectionner le paragraphe entier.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 99
Utilisation du texte
S&eacute;lection de morceaux de texte dans un paragraphe
❖ Pour s&eacute;lectionner des morceaux de texte dans un paragraphe, appuyez sur Maj et s&eacute;lectionnez tous les morceaux
souhait&eacute;s.
S&eacute;lection de texte dot&eacute; d’attributs similaires
❖ Pour s&eacute;lectionner du texte dot&eacute; d’attributs similaires, appuyez sur Alt (Windows)/Option (Mac) et cliquez deux fois
sur un mot comportant les attributs sp&eacute;cifi&eacute;s. Tous les mots dot&eacute;s des attributs correspondants sont
automatiquement s&eacute;lectionn&eacute;s dans le bloc de texte.
Pour s&eacute;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&eacute;lectionn&eacute;s.
Ajout de texte dot&eacute; d’attributs diff&eacute;rents &agrave; la s&eacute;lection pr&eacute;c&eacute;dente
❖ Vous pouvez ajouter au texte s&eacute;lectionn&eacute; pr&eacute;c&eacute;demment du texte dot&eacute; d’un autre ensemble d’attributs. Apr&egrave;s avoir
s&eacute;lectionn&eacute; 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&eacute;lectionn&eacute;s.
Ajout de texte &agrave; une s&eacute;lection existante
❖ Pour ajouter des mots un par un &agrave; une s&eacute;lection existante, appuyez sur Alt+Maj (Windows)/Option+Maj (Mac) et
cliquez sur chaque mot.
D&eacute;s&eacute;lection de texte au sein d’une s&eacute;lection
❖ Pour d&eacute;s&eacute;lectionner un morceau de texte lorsque plusieurs morceaux sont s&eacute;lectionn&eacute;s, appuyez sur Alt
(Windows)/Option (Mac) et cliquez sur le morceau concern&eacute;.
Mise en forme et &eacute;dition de texte
Le moyen le plus rapide d’&eacute;diter du texte avec pr&eacute;cision consiste &agrave; utiliser l’inspecteur des propri&eacute;t&eacute;s. Vous pouvez
&eacute;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 &agrave; une seule modification et sont donc toutes annul&eacute;es ensemble lorsque vous utilisez la commande Annuler.
Si vous choisissez Edition &gt; Annuler lorsque vous modifiez un texte, vous annulez toutes les modifications apport&eacute;es
depuis le moment o&ugrave; vous avez cliqu&eacute; deux fois sur le bloc de texte pour modifier son contenu.
1 Pour s&eacute;lectionner le texte &agrave; modifier, proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Cliquez sur le bloc de texte avec l’outil Pointeur ou Sous-s&eacute;lection pour le s&eacute;lectionner en totalit&eacute;. Pour
s&eacute;lectionner plusieurs blocs de texte simultan&eacute;ment, s&eacute;lectionnez-les un par un tout en maintenant la
touche Maj enfonc&eacute;e.
• Cliquez deux fois sur un bloc de texte avec l’outil Pointeur ou Sous-s&eacute;lection, puis s&eacute;lectionnez une zone
de texte.
• Cliquez dans un bloc de texte avec l’outil Texte, puis s&eacute;lectionnez du texte.
2 Modifiez le texte ou la police. Les polices se mesurent en points.
3 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Cliquez hors du bloc de texte.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 100
Utilisation du texte
• Dans le panneau Outils, s&eacute;lectionnez un autre outil.
• Appuyez sur la touche Echap.
A propos des polices
Une police est un ensemble complet de caract&egrave;res alphab&eacute;tiques, chiffres et symboles qui partagent une graisse, une
chasse et un style (par exemple, Adobe Garamond, 10 points, gras).
Les types de caract&egrave;res (souvent appel&eacute;s familles de caract&egrave;res ou familles de polices) sont des ensembles de polices de
caract&egrave;res apparent&eacute;s par le graphisme et con&ccedil;us pour &ecirc;tre utilis&eacute;s ensemble (par exemple, Adobe Garamond).
Un style de caract&egrave;res est une variante d’une police au sein d’une m&ecirc;me famille de caract&egrave;res. En g&eacute;n&eacute;ral, l’&eacute;l&eacute;ment
d’une famille de polices appel&eacute; Romain ou Normal (le nom diff&egrave;re d’une famille &agrave; l’autre) constitue la police de base
comprenant les styles de caract&egrave;res tels que normal, gras, demi-gras, italique et gras italique.
Outre les polices install&eacute;es sur votre syst&egrave;me, vous pouvez cr&eacute;er les dossiers suivants et utiliser les polices qui y sont
install&eacute;es :
Windows Program Files/Fichiers communs/Adobe/Fonts
Mac OS Biblioth&egrave;que/Application Support/Adobe/Fonts
Si vous installez une police Type 1, TrueType, OpenType ou CID dans le dossier Fonts local, cette police appara&icirc;t
uniquement dans les applications Adobe.
Aper&ccedil;u des polices
Vous pouvez afficher un aper&ccedil;u d’une police dans le menu Famille de polices de l’inspecteur des propri&eacute;t&eacute;s. Vous
pouvez d&eacute;sactiver la fonction d’aper&ccedil;u ou changer le corps de caract&egrave;re des noms de police ou des &eacute;chantillons de
polices dans les pr&eacute;f&eacute;rences de texte.
Indication du corps d’un caract&egrave;re
Par d&eacute;faut, le corps d’un caract&egrave;re est mesur&eacute; en points (un point &eacute;quivaut &agrave; 1/72 de pouce). Vous pouvez sp&eacute;cifier un
corps de caract&egrave;re compris entre 0,1 et 1296 par incr&eacute;ments de 0,001 point.
Remarque : Dans Adobe Fireworks, le corps d’un caract&egrave;re est mesur&eacute; par d&eacute;faut en pixels.
1 S&eacute;lectionnez les caract&egrave;res ou les objets texte &agrave; modifier. Si vous ne s&eacute;lectionnez pas de texte, le corps de caract&egrave;re
s’applique au nouveau texte.
2 Effectuez l’une des op&eacute;rations suivantes :
• D&eacute;finissez l’option Corps de police dans le panneau Caract&egrave;re ou dans la barre de commandes.
• Choisissez un corps dans le menu Texte &gt; Corps. Lorsque vous choisissez Autre, vous pouvez entrer un nouveau
corps dans le panneau Caract&egrave;re.
Vous pouvez modifier l’unit&eacute; de mesure des caract&egrave;res dans la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences. Cette option n’est pas
disponible dans Fireworks.
Pour rendre les polices manquantes disponibles
❖ Effectuez l’une des op&eacute;rations suivantes :
• Installez les polices manquantes sur votre syst&egrave;me.
• Activez les polices manquantes &agrave; l’aide d’une application de gestion des polices.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 101
Utilisation du texte
• Placez les polices manquantes dans le dossier Polices, situ&eacute; dans le dossier d’application. Les polices de ce dossier
sont uniquement disponibles dans l’application. Sous Mac OS, les polices peuvent &ecirc;tre install&eacute;es dans le dossier
Macintosh HD &gt; Biblioth&egrave;que &gt; Application Support &gt; Adobe &gt; Fonts. Les polices install&eacute;es &agrave; cet emplacement ne
peuvent &ecirc;tre utilis&eacute;es que dans les produits Adobe.
Si vous n’avez pas acc&egrave;s aux polices manquantes, recherchez-les et remplacez-les.
S&eacute;lection d’une famille et d’un style de caract&egrave;res
L’inspecteur des propri&eacute;t&eacute;s ou le menu Texte permettent de s&eacute;lectionner une famille et un style de polices.
Voir aussi
&laquo; Pr&eacute;f&eacute;rences de texte &raquo; &agrave; la page 312
S&eacute;lection d’une famille et d’un style de caract&egrave;res dans l’inspecteur des propri&eacute;t&eacute;s
1 S&eacute;lectionnez une famille de caract&egrave;res dans le menu Police. Si plusieurs versions d’une police sont install&eacute;es sur
votre ordinateur, le nom de la police est suivi d’une abr&eacute;viation : (T1) pour les polices PostScript, (TT) pour les
polices TrueType ou (OT) pour les polices OpenType.
Sous Windows, pour s&eacute;lectionner une famille et un style de police, vous pouvez saisir le nom correspondant dans
la zone. Au fur et &agrave; mesure de la saisie, le nom de la premi&egrave;re police ou du premier style commen&ccedil;ant par cette
lettre appara&icirc;t. Poursuivez la saisie jusqu’&agrave; ce que le nom de la police ou du style recherch&eacute;(e) apparaisse.
2 Pour s&eacute;lectionner un style de caract&egrave;res, proc&eacute;dez de l’une des mani&egrave;res suivantes :
• S&eacute;lectionnez un style install&eacute; dans le menu Style de l’inspecteur des propri&eacute;t&eacute;s.
• Si la famille de caract&egrave;res ne comprend pas de styles, cliquez sur le bouton Faux gras, Faux italique ou Soulign&eacute;
pour appliquer une simulation de style.
S&eacute;lection d’une famille et d’un style de caract&egrave;res dans le menu Texte
❖ Choisissez la commande Texte &gt; Police &gt; [famille] &gt; [style]. Si la famille de caract&egrave;res recherch&eacute;e ne comprend pas
de styles, s&eacute;lectionnez Standard, Faux gras, Faux italique ou Soulign&eacute; dans le menu Texte &gt; 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&eacute;lectionn&eacute; en majuscules.
❖ S&eacute;lectionnez Commandes &gt; Texte &gt; Majuscules.
Conversion du texte en minuscules
Il est possible de convertir le texte s&eacute;lectionn&eacute; en minuscules.
❖ S&eacute;lectionnez Commandes &gt; Texte &gt; Minuscules.
Application d’une majuscule en d&eacute;but de phrase
Il est possible de modifier le texte s&eacute;lectionn&eacute; pour qu’il commence avec une majuscule.
❖ S&eacute;lectionnez Commandes &gt; Texte &gt; Majuscule initiale.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 102
Utilisation du texte
Insertion d’un saut de ligne
Pour ins&eacute;rer un saut de ligne, appuyez sur Maj+Entr&eacute;e.
Annulation des modifications apport&eacute;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&eacute;es et cette fonction n’a plus
aucun effet.
Insertion de caract&egrave;res sp&eacute;ciaux
1 Apr&egrave;s avoir cr&eacute;&eacute; un bloc de texte, cliquez dans le bloc de texte &agrave; l’emplacement auquel ins&eacute;rer un caract&egrave;re sp&eacute;cial.
2 Choisissez la commande Fen&ecirc;tre &gt; Autres &gt; Caract&egrave;res sp&eacute;ciaux, puis s&eacute;lectionnez le caract&egrave;re &agrave; ins&eacute;rer.
Insertion d’un texte d’espace r&eacute;serv&eacute;
Il est possible d’ins&eacute;rer un bloc de texte d’espace r&eacute;serv&eacute; n’ayant pas de signification sp&eacute;cifique. Cette option permet
de placer un bloc de texte (lorem ipsum) dans la zone de travail.
❖ S&eacute;lectionnez Commandes &gt; Texte &gt; Lorem ipsum.
Remarque : Vous pouvez &eacute;galement faire appel au g&eacute;n&eacute;rateur de texte al&eacute;atoire LoremIpsum, qui permet d’ins&eacute;rer
rapidement un bloc de texte d’espace r&eacute;serv&eacute; aux maquettes. Cette extension est disponible sur
http://www.adobe.com/go/learn_fw_randomtextgenerator_fr.
Application de couleur &agrave; un texte
• Par d&eacute;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&eacute;lectionn&eacute;. Vous pouvez &eacute;galement ajouter des contours et appliquer des filtres dynamiques
&agrave; tout le texte d’un bloc de texte s&eacute;lectionn&eacute; (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 &agrave; l’autre.
• Les caract&eacute;ristiques de contour et les filtres dynamiques appliqu&eacute;s &agrave; un bloc de texte sont actualis&eacute;s au fur et &agrave;
mesure des modifications apport&eacute;es au bloc de texte ; toutefois, ces mises &agrave; jour ne s’appliquent pas aux nouveaux
blocs de texte.
• L’outil Texte conserve la couleur de texte actuelle ind&eacute;pendamment de la couleur de remplissage des autres outils.
De m&ecirc;me, lorsque vous r&eacute;utilisez l’outil Texte apr&egrave;s avoir appliqu&eacute; une couleur de fond, le param&egrave;tre de couleur le
plus r&eacute;cent de l’outil Texte lui est restitu&eacute;, et le contour est r&eacute;initialis&eacute; sur Aucun.
Voir la section &laquo; Enregistrement des attributs de texte de contour, de fond et de filtre sous forme de style &raquo; &agrave; la
page 106.
D&eacute;finition de la couleur du texte dans un bloc de texte s&eacute;lectionn&eacute;
❖ Proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Cliquez sur la case Couleur de fond dans l’inspecteur des propri&eacute;t&eacute;s, puis s&eacute;lectionnez une couleur dans le menu
contextuel. Dans une fen&ecirc;tre contextuelle de couleurs, vous pouvez &eacute;galement utiliser le pointeur de pipette
pour &eacute;chantillonner une couleur &agrave; un emplacement quelconque de l’&eacute;cran.
Derni&egrave;re mise &agrave; 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&ocirc;ne situ&eacute;e en regard de la case Couleur de fond, puis s&eacute;lectionnez une
couleur dans la fen&ecirc;tre contextuelle de couleurs. Dans la fen&ecirc;tre contextuelle de la case Couleur de fond, vous
pouvez &eacute;galement utiliser la pipette pour &eacute;chantillonner une couleur &agrave; un emplacement quelconque de l’&eacute;cran.
Remarque : lorsque vous appliquez un contour au texte en surbrillance &agrave; l’int&eacute;rieur d’un bloc de texte, tout le bloc
de texte est s&eacute;lectionn&eacute; automatiquement.
D&eacute;finition de l’interligne et de l’interlettrage
Le cr&eacute;nage consiste &agrave; augmenter ou &agrave; r&eacute;duire l’espace (exprim&eacute; en pourcentage) entre certaines paires de lettres pour
des raisons d’esth&eacute;tisme. Le cr&eacute;nage automatique utilise les informations de cr&eacute;nage d’une police lors de l’affichage de
texte. L’approche augmente ou r&eacute;duit l’espacement entre les caract&egrave;res s&eacute;lectionn&eacute;s.
Dans Fireworks CS5, le cr&eacute;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&eacute; &agrave; partir de versions existantes (CS3 et versions ant&eacute;rieures) ne change pas. Les valeurs de
cr&eacute;nage et d’approche sont cependant modifi&eacute;es en cons&eacute;quence des changements apport&eacute;s &agrave; Adobe Text Engine
depuis Fireworks CS3.
Pour d&eacute;sactiver le cr&eacute;nage automatique, d&eacute;s&eacute;lectionnez l’option Cr&eacute;nage automatique dans l’inspecteur des
propri&eacute;t&eacute;s.
L’interlignage d&eacute;termine l’espace s&eacute;parant les lignes adjacentes d’un paragraphe. L’interligne peut &ecirc;tre mesur&eacute; en
pixels ou sous la forme d’un pourcentage de la distance en points s&eacute;parant les lignes de base. Pour en savoir plus sur la
fa&ccedil;on dont Fireworks utilise Adobe Text Engine (ATE) pour assurer le rendu des &eacute;l&eacute;ments de texte, voir l’article
d’Arun Kaza, &agrave; l’adresse http://www.adobe.com/go/learn_fw_textengine_fr.
Voir aussi
&laquo; Pr&eacute;f&eacute;rences de texte &raquo; &agrave; la page 312
D&eacute;finition du cr&eacute;nage ou de l’approche
1 Pour s&eacute;lectionner le texte &agrave; cr&eacute;ner, proc&eacute;dez de l’une des mani&egrave;res suivantes :
• A l’aide de l’outil Texte, cliquez entre deux caract&egrave;res ou mettez en surbrillance les caract&egrave;res &agrave; modifier.
• Utilisez l’outil Pointeur pour s&eacute;lectionner un bloc de texte entier. Cliquez sur plusieurs blocs de texte tout en
maintenant la touche Maj enfonc&eacute;e pour les s&eacute;lectionner.
UTILISATION DE FIREWORKS CS5 104
Derni&egrave;re mise &agrave; jour le 29/4/2010
Utilisation du texte
2 S&eacute;lectionnez les caract&egrave;res dont vous souhaitez d&eacute;finir l’espacement et proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Dans l’inspecteur des propri&eacute;t&eacute;s, faites glisser le curseur contextuel Approche ou entrez un pourcentage dans la
zone correspondante.
Une valeur nulle correspond &agrave; une approche normale. Les valeurs positives &eacute;cartent les lettres, et les valeurs
n&eacute;gatives les rapprochent.
• Tout en maintenant la touche Ctrl (Windows) ou Cmde (Mac OS) enfonc&eacute;e, appuyez sur la touche fl&eacute;ch&eacute;e
Gauche ou la touche fl&eacute;ch&eacute;e Droite du clavier.
La touche fl&eacute;ch&eacute;e Gauche permet de rapprocher les lettres de 1 %, et la touche fl&eacute;ch&eacute;e Droite de les &eacute;loigner
de 1 %.
Tout en maintenant les touches Maj et Ctrl (Windows) ou Maj et Cmde (Mac OS) enfonc&eacute;es, appuyez sur la
touche fl&eacute;ch&eacute;e Gauche ou la touche fl&eacute;ch&eacute;e Droite pour r&eacute;gler l’approche par incr&eacute;ments de 10 %.
D&eacute;finition de l’interlignage du texte s&eacute;lectionn&eacute;
Options d’interlignage de l’inspecteur des propri&eacute;t&eacute;s
1 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Dans l’inspecteur des propri&eacute;t&eacute;s, faites glisser le curseur contextuel Interlignage ou entrez une valeur dans la
zone correspondante. La valeur par d&eacute;faut est 100 %.
• A l’aide du clavier, tout en maintenant la touche Ctrl (Windows) ou Cmde (Mac OS) enfonc&eacute;e, appuyez sur la
touche fl&eacute;ch&eacute;e Haut (pour augmenter l’espacement) ou la touche fl&eacute;ch&eacute;e Bas (pour diminuer l’espacement).
Tout en maintenant les touches Maj et Ctrl (Windows) ou Maj et Cmde (Mac OS) enfonc&eacute;es, appuyez sur la
touche fl&eacute;ch&eacute;e Haut ou la touche fl&eacute;ch&eacute;e Bas pour r&eacute;gler l’interligne par incr&eacute;ments de 10.
2 Pour changer le type d’unit&eacute; d’interlignage, s&eacute;lectionnez % ou px (pixels) dans le menu contextuel Unit&eacute;s
d’interlignage.
D&eacute;finition de l’orientation et de l’alignement du texte
D&eacute;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 &agrave; gauche, comme pour les langues asiatiques.
1 Cliquez sur le bouton Orientation du texte
dans l’inspecteur des propri&eacute;t&eacute;s.
2 S&eacute;lectionnez une option d’orientation :
De gauche &agrave; droite horizontalement Il s’agit de la valeur par d&eacute;faut.
De droite &agrave; gauche verticalement Oriente le texte verticalement, l’affichant de haut en bas. Des lignes de texte
s&eacute;par&eacute;es par des retours &agrave; la ligne s’affichent sous forme de colonnes qui s’encha&icirc;nent de la droite vers la gauche.
Pour donner au texte un effet sp&eacute;cial en l’inversant, utilisez l’outil Distorsion et faites glisser une poign&eacute;e lat&eacute;rale.
UTILISATION DE FIREWORKS CS5 105
Derni&egrave;re mise &agrave; jour le 29/4/2010
Utilisation du texte
D&eacute;finition de l’alignement du texte
L’alignement d&eacute;termine la position d’un paragraphe de texte par rapport aux bords d’un bloc de texte. Par d&eacute;faut, le
texte horizontal est align&eacute; &agrave; gauche.
Un texte vertical peut &ecirc;tre align&eacute; sur le bord sup&eacute;rieur ou inf&eacute;rieur du bloc de texte, centr&eacute; &agrave; l’int&eacute;rieur du bloc de texte
ou justifi&eacute; entre les bords sup&eacute;rieur et inf&eacute;rieur.
1 S&eacute;lectionnez le texte.
2 Cliquez sur un bouton d’alignement dans l’inspecteur des propri&eacute;t&eacute;s.
Les commandes d’alignement
un bloc de texte est s&eacute;lectionn&eacute;.
sont visibles dans l’inspecteur des propri&eacute;t&eacute;s lorsqu’un texte ou
D&eacute;finition du retrait et de l’espacement des paragraphes
❖ Pour mettre un texte en retrait, dans l’inspecteur des propri&eacute;t&eacute;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&eacute;t&eacute;s
❖ Pour d&eacute;finir l’espacement &agrave; respecter avant et apr&egrave;s les paragraphes dans l’inspecteur des propri&eacute;t&eacute;s, faites glisser
le curseur contextuel Espace avant le paragraphe ou Espace apr&egrave;s le paragraphe ou entrez une valeur dans la zone
de texte.
Options d’espacement des paragraphes dans l’inspecteur des propri&eacute;t&eacute;s
Application d’effets au texte
Lissage des bords du texte
Le lissage des bords d’un texte s&eacute;lectionn&eacute; est appel&eacute; lissage. Le lissage permet de fusionner les bords du texte avec
l’arri&egrave;re-plan, ce qui le rend plus net et lisible lorsque vous le composez dans un grand corps de caract&egrave;re. Le lissage
s’applique &agrave; tous les caract&egrave;res d’un bloc de texte donn&eacute;.
Texte d’origine ; apr&egrave;s lissage
❖ Dans l’inspecteur des propri&eacute;t&eacute;s, s&eacute;lectionnez l’une des options du menu contextuel Lissage :
Sans lissage D&eacute;sactive le lissage du texte.
Lissage net Cr&eacute;e une transition nette entre les bords du texte et l’arri&egrave;re-plan.
Lissage fort Cr&eacute;e une transition tr&egrave;s abrupte entre les bords du texte et l’arri&egrave;re-plan, pr&eacute;servant la forme des
caract&egrave;res du texte et am&eacute;liorant la nettet&eacute; des zones d&eacute;taill&eacute;es des caract&egrave;res.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 106
Utilisation du texte
Lissage l&eacute;ger Cr&eacute;e une transition l&eacute;g&egrave;re entre les bords du texte et l’arri&egrave;re-plan.
Lissage personnalis&eacute; Fournit les commandes de lissage avanc&eacute;es suivantes :
• Sur&eacute;chantillonnage D&eacute;termine la quantit&eacute; de d&eacute;tails utilis&eacute;e pour cr&eacute;er la transition entre les bords du texte et
l’arri&egrave;re-plan.
• Nettet&eacute; D&eacute;termine le lissage de la transition entre les bords du texte et l’arri&egrave;re-plan.
• Intensit&eacute; D&eacute;termine le degr&eacute; de m&eacute;lange entre les bords du texte et l’arri&egrave;re-plan.
Remarque : Le texte figurant dans un fichier vectoriel est anticr&eacute;nel&eacute; &agrave; l’ouverture du fichier dans Fireworks.
R&eacute;glage de la chasse des caract&egrave;res s&eacute;lectionn&eacute;s
❖ Dans l’inspecteur des propri&eacute;t&eacute;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&egrave;res, faites glisser le curseur au-del&agrave; de 100 % ;
pour les r&eacute;duire, faites glisser le curseur en de&ccedil;&agrave; de 100 %. 100 % est la valeur par d&eacute;faut.
Option Echelle horizontale dans l’inspecteur des propri&eacute;t&eacute;s
Modification de la proximit&eacute; du texte par rapport &agrave; la ligne de base
Le d&eacute;calage vertical d&eacute;finit la proximit&eacute; du texte par rapport &agrave; sa ligne de base naturelle (indice et exposant, par
exemple). En l’absence de d&eacute;calage vertical, le texte repose sur la ligne de base. Les d&eacute;calages verticaux se mesurent en
pixels.
Option de d&eacute;calage vertical dans l’inspecteur des propri&eacute;t&eacute;s
❖ Dans l’inspecteur des propri&eacute;t&eacute;s, faites glisser le curseur contextuel D&eacute;calage vertical, ou entrez une valeur dans la
zone de texte correspondante, pour d&eacute;finir la position du texte en indice ou en exposant. Entrez des valeurs
positives pour mettre des caract&egrave;res en exposant, et des valeurs n&eacute;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&eacute;lectionn&eacute;, puis enregistrer ces
attributs de texte sous forme de style. Une fois le texte cr&eacute;&eacute;, vous pouvez le modifier dans Fireworks. Les contours, les
fonds, les filtres et les styles sont automatiquement mis &agrave; jour en cours d’&eacute;dition.
Texte avec des options de contour, de fond, de filtre et de style
1 Cr&eacute;ez un objet texte, puis appliquez-lui les attributs appropri&eacute;s. Appliquez l’un des styles du panneau Styles, m&ecirc;me
s’il ne s’agit pas d’un style de texte.
2 S&eacute;lectionnez l’objet texte.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 107
Utilisation du texte
3 Dans le menu Options du panneau Styles, s&eacute;lectionnez Nouveau style.
4 S&eacute;lectionnez les propri&eacute;t&eacute;s du style, puis nommez-le.
Voir aussi
&laquo; Pr&eacute;f&eacute;rences de texte &raquo; &agrave; la page 312
Attachement de texte &agrave; un trac&eacute;
A d&eacute;faut d’utiliser des blocs de texte rectangulaires, vous pouvez dessiner un trac&eacute; et attacher un texte &agrave; ce dernier. Le
texte &eacute;pouse alors la forme du trac&eacute;. Tant le texte que le trac&eacute; sont modifiables.
Lorsque vous attachez temporairement du texte &agrave; un trac&eacute;, ce dernier perd ses attributs de contour, de fond et de filtre.
Les attributs de contour, de fond et de filtre appliqu&eacute;s par la suite affectent le texte mais pas le trac&eacute;. Lorsque vous
d&eacute;tachez le texte d’un trac&eacute;, le trac&eacute; retrouve ses attributs de contour, de fond et de filtre.
Remarque : l’attachement &agrave; un trac&eacute; d’un texte contenant des retours &agrave; la ligne automatiques ou forc&eacute;s peut produire des
r&eacute;sultats inattendus.
Lorsque la totalit&eacute; du texte ne tient pas dans l’espace int&eacute;rieur ou ext&eacute;rieur &agrave; un trac&eacute;, une ic&ocirc;ne indiquant qu’il existe
du texte exc&eacute;dentaire s’affiche. Supprimez ce texte ou redimensionnez le trac&eacute; en cons&eacute;quence. L’ic&ocirc;ne dispara&icirc;t
lorsque tout le texte peut &ecirc;tre affich&eacute;.
Attachement de texte &agrave; un trac&eacute; et modification du texte
• Pour associer du texte au p&eacute;rim&egrave;tre d’un trac&eacute;, s&eacute;lectionnez un objet de texte et un trac&eacute; en maintenant la touche
Maj enfonc&eacute;e, puis choisissez la commande Texte &gt; Attacher au trac&eacute;.
• Pour placer un bloc de texte &agrave; l’int&eacute;rieur d’un trac&eacute;, s&eacute;lectionnez un objet de texte et un trac&eacute; en maintenant la
touche Maj enfonc&eacute;e, puis choisissez la commande Texte &gt; Attacher dans le trac&eacute;.
• Pour d&eacute;tacher un texte d’un trac&eacute; s&eacute;lectionn&eacute;, choisissez Texte &gt; D&eacute;tacher du trac&eacute;.
• Pour modifier un texte attach&eacute; &agrave; un trac&eacute;, cliquez deux fois sur l’objet de texte curviligne &agrave; l’aide de l’outil Pointeur
ou Sous-s&eacute;lection ; &agrave; d&eacute;faut, cliquez dessus pour s&eacute;lectionner le texte &agrave; modifier &agrave; l’aide de l’outil Texte.
• Pour modifier la forme du trac&eacute;, utilisez l’outil Sous-s&eacute;lection pour s&eacute;lectionner l’objet de texte curviligne, puis
faites glisser les points sous-s&eacute;lectionn&eacute;s pour remodeler le trac&eacute;.
Remarque : vous pouvez &eacute;galement utiliser l’outil Plume (courbe de B&eacute;zier) pour &eacute;diter le trac&eacute;. Le texte suit
automatiquement le trac&eacute; &agrave; mesure que vous modifiez des points.
Modification de l’orientation et du sens d’un texte sur un trac&eacute;
L’ordre de dessin du trac&eacute; d&eacute;termine la direction du texte qui lui est attach&eacute;. Par exemple, lorsque vous dessinez un
trac&eacute; allant de droite &agrave; gauche, le texte attach&eacute; appara&icirc;t &agrave; l’envers et retourn&eacute;.
Texte attach&eacute; &agrave; un trac&eacute; dessin&eacute; de droite &agrave; gauche
❖ Choisissez Texte &gt; Orientation, puis s&eacute;lectionnez une orientation.
Texte enroul&eacute; autour d’un trac&eacute;
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 108
Utilisation du texte
Texte orient&eacute; verticalement sur un trac&eacute;
Texte inclin&eacute; verticalement autour d’un trac&eacute;
Texte inclin&eacute; horizontalement autour d’un trac&eacute;
• Pour inverser le sens du texte sur un trac&eacute; s&eacute;lectionn&eacute;, choisissez Texte &gt; Inverser la direction.
• Pour d&eacute;placer le point d’origine du texte attach&eacute; &agrave; un trac&eacute;, s&eacute;lectionnez l’objet de texte curviligne, puis, dans
l’inspecteur des propri&eacute;t&eacute;s, entrez une valeur dans la zone de texte D&eacute;calage du texte.
Attachement de texte dans un trac&eacute;
Vous pouvez attacher un texte dans un objet vectoriel. Le texte figure dans une zone d&eacute;termin&eacute;e par les limites
vectorielles. Le texte et l’objet vectoriel restent modifiables. Lorsque vous attachez un texte dans un trac&eacute;, la quantit&eacute;
de texte visible d&eacute;pend de la taille de la zone dans le trac&eacute;.
1 S&eacute;lectionnez le texte et l’objet vectoriel dans la zone de travail.
2 Cliquez sur Texte &gt; Attacher dans le trac&eacute;.
Conversion de texte en trac&eacute;s
Vous pouvez convertir un texte en trac&eacute;s, puis reformer les lettres comme vous le feriez avec un objet vectoriel. Tous
les outils d’&eacute;dition vectorielle sont utilisables avec un texte converti en trac&eacute;.
Remarque : un texte converti ne peut pas &ecirc;tre modifi&eacute; comme du texte.
• Pour convertir du texte, choisissez Texte &gt; Convertir en trac&eacute;s.
• Pour modifier individuellement des trac&eacute;s de texte converti, s&eacute;lectionnez le texte converti &agrave; l’aide de l’outil Souss&eacute;lection (ou s&eacute;lectionnez-le, puis choisissez Modification &gt; Dissocier).
• Pour cr&eacute;er un trac&eacute; composite &agrave; partir d’un groupe de trac&eacute;s r&eacute;sultant de la conversion de texte en trac&eacute;s,
s&eacute;lectionnez le groupe de trac&eacute;s, choisissez ensuite Modification &gt; Dissocier, puis choisissez Modification &gt;
Combiner les trac&eacute;s &gt; Joindre.
Transformation des blocs de texte
Les blocs de texte sont transform&eacute;s de la m&ecirc;me fa&ccedil;on que les autres objets. Vous pouvez mettre le texte &agrave; l’&eacute;chelle, le
faire pivoter, l’incliner et le retourner pour cr&eacute;er des effets in&eacute;dits.
Lorsque d’importantes transformations sont effectu&eacute;es, le texte peut devenir difficile &agrave; lire. Lorsque la transformation
d’un bloc de texte provoque le redimensionnement ou la mise &agrave; l’&eacute;chelle du texte, le corps de police obtenu appara&icirc;t
dans l’inspecteur des propri&eacute;t&eacute;s lorsque le texte est s&eacute;lectionn&eacute;.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 109
Utilisation du texte
Voir aussi
&laquo; Pr&eacute;f&eacute;rences de texte &raquo; &agrave; 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&egrave;s sa
conversion en objets vectoriels. Puisque les caract&egrave;res sont regroup&eacute;s en tant qu’objet composite, vous devez
segmenter les trac&eacute;s combin&eacute;s avant de pouvoir modifier s&eacute;par&eacute;ment les diff&eacute;rents caract&egrave;res.
• Pour solidifier le texte, s&eacute;lectionnez Commandes &gt; Texte &gt; Solidifier.
• Pour segmenter le trac&eacute; combin&eacute; en caract&egrave;res modifiables ind&eacute;pendamment, utilisez l’outil de sous-s&eacute;lection ou
choisissez Modifier &gt; Combiner les trac&eacute;s &gt; S&eacute;parer.
Importation de texte
Fireworks prend uniquement en charge le texte ASCII et le texte s'affiche sous forme de caract&egrave;res parasites lorsque le
fichier texte Unicode est ouvert ou import&eacute; 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&reg;, importez un fichier Photoshop ou
Illustrator, ou copiez le texte dans Fireworks.
Vous pouvez copier jusqu’&agrave; 8 000 caract&egrave;res &agrave; partir de Fireworks ou d’une autre application.
Par d&eacute;faut, le texte import&eacute; depuis Photoshop ou Illustrator conserve tous ses attributs dans Fireworks. Cependant,
vous pouvez &eacute;galement importer du texte Photoshop sous forme d’images bitmap (Voir &laquo; Pr&eacute;f&eacute;rences
d’importation et d’ouverture de fichiers Photoshop &raquo; &agrave; 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&eacute;lectionner Fichier &gt; Ouvrir ou Fichier &gt; Importer pour atteindre un fichier. (Le texte ASCII
import&eacute; appara&icirc;t avec la couleur de fond active, la police par d&eacute;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&eacute;es sur votre ordinateur,
vous pouvez soit remplacer les polices, soit conserver leur aspect.
La police Myriad Pro est appliqu&eacute;e par d&eacute;faut au texte contenant des polices non disponibles sur votre ordinateur.
Vous pouvez modifier ce param&egrave;tre dans la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences.
Conserver l’aspect Permet de remplacer le texte par une image bitmap repr&eacute;sentant le texte dans sa police d’origine.
Vous pouvez toujours modifier le texte, mais, le cas &eacute;ch&eacute;ant, Fireworks remplace l’image bitmap par une police
install&eacute;e sur votre syst&egrave;me. La modification risque d’alt&eacute;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
&laquo; Pr&eacute;f&eacute;rences de texte &raquo; &agrave; la page 312
S&eacute;lection d’une police de substitution
1 Ouvrez un document contenant des polices manquantes, puis s&eacute;lectionnez l’une d’entre elles dans la liste
Remplacer les polices manquantes.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 110
Utilisation du texte
2 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Dans la liste A, s&eacute;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&ecirc;me police manquante, la bo&icirc;te de dialogue Polices
manquantes affiche la police que vous avez s&eacute;lectionn&eacute;e.
Correction orthographique d’un texte
V&eacute;rification orthographique d’un texte
1 S&eacute;lectionnez au moins un bloc de texte. Si vous ne s&eacute;lectionnez pas de bloc de texte, Fireworks v&eacute;rifie l’orthographe
de l’ensemble du document.
2 Choisissez Texte &gt; Orthographe.
Personnalisation de la correction orthographique
1 Choisissez Texte &gt; Installation du correcteur orthographique ou cliquez sur le bouton Configurer de la bo&icirc;te de
dialogue Orthographe.
2 Dans la bo&icirc;te de dialogue Installation du correcteur orthographique, s&eacute;lectionnez les options n&eacute;cessaires :
• Choisissez les dictionnaires de langue.
• S&eacute;lectionnez un dictionnaire personnalis&eacute; en cliquant sur l’ic&ocirc;ne de dossier situ&eacute;e &agrave; c&ocirc;t&eacute; de la zone de texte
Chemin d’acc&egrave;s du dictionnaire personnel.
• Modifiez le dictionnaire personnalis&eacute; en cliquant sur le bouton Modifier le dictionnaire personnel puis en
ajoutant, supprimant ou modifiant des mots dans la liste.
• S&eacute;lectionnez les types de mots &agrave; inclure dans la v&eacute;rification orthographique.
Derni&egrave;re mise &agrave; jour le 29/4/2010
Chapitre 8 : Application de couleurs, de
contours et de fonds
Adobe&reg; Fireworks&reg; pr&eacute;sente un grand nombre d’options d’organisation, de s&eacute;lection et d’application des couleurs.
Application de couleurs
Activation, suppression ou permutation du contour et du fond
Pour d&eacute;terminer l’attribut affect&eacute; par vos r&eacute;glages chromatiques, activez la couleur de contour ou la couleur de fond.
Pour appliquer les valeurs par d&eacute;faut sp&eacute;cifi&eacute;es dans la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences, r&eacute;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&ocirc;ne situ&eacute;e &agrave; gauche de la case Couleur de contour ou
Couleur de fond.
Remarque : l’outil Pot de peinture remplit les s&eacute;lections de pixels et les objets vectoriels avec la couleur affich&eacute;e dans la
case Couleur de fond.
Cases de couleurs de contour et de fond dans le panneau Outils et fen&ecirc;tre contextuelle pour la s&eacute;lection des couleurs
R&eacute;tablissement des couleurs de contour et de fond par d&eacute;faut
❖ Cliquez sur le bouton D&eacute;finit les couleurs de contour/fond par d&eacute;faut du panneau Outils ou du M&eacute;langeur.
Suppression des couleurs de contour et de fond des objets s&eacute;lectionn&eacute;s
❖ Cliquez sur le bouton Aucun contour ou fond dans la section Couleurs du panneau Outils. Pour d&eacute;finir la
caract&eacute;ristique inactive sur Aucune, cliquez de nouveau sur le bouton Aucun contour ou fond.
Remarque : vous pouvez &eacute;galement supprimer la couleur de contour ou de fond en cliquant sur le bouton Transparent
dans la fen&ecirc;tre contextuelle Couleur de fond ou Couleur de contour, ou en s&eacute;lectionnant Aucune dans le menu contextuel
Options de fond ou Options de contour de l’inspecteur des propri&eacute;t&eacute;s.
111
Derni&egrave;re mise &agrave; 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&eacute;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&eacute;er et &eacute;diter les groupes de nuances, ainsi que
s&eacute;lectionner des couleurs de contour et de fond.
Application d’une couleur de nuancier au contour ou au fond d’un objet s&eacute;lectionn&eacute;
1 Cliquez sur l’ic&ocirc;ne situ&eacute;e &agrave; c&ocirc;t&eacute; de la case Couleur de contour ou Couleur de fond dans le panneau Outils ou dans
l’inspecteur des propri&eacute;t&eacute;s pour l’activer.
2 Choisissez Fen&ecirc;tre &gt; Nuancier.
3 Cliquez sur l’&eacute;chantillon pour appliquer la couleur au contour ou au fond de l’objet s&eacute;lectionn&eacute;.
S&eacute;lection, modification ou ajout de groupes de nuances
Vous pouvez ais&eacute;ment utiliser ou cr&eacute;er un autre groupe de nuances. Vous pouvez &eacute;galement importer des nuances
personnalis&eacute;es &agrave; partir de fichiers de palette de couleurs enregistr&eacute;s au format ACT ou GIF.
❖ Pour s&eacute;lectionner un groupe de nuances, choisissez-le dans le menu Options du panneau Nuancier.
Remarque : la s&eacute;lection de Cubes de couleurs affiche le groupe de nuances par d&eacute;faut.
• Pour s&eacute;lectionner un groupe de nuances personnalis&eacute;, s&eacute;lectionnez Remplacer le nuancier dans le menu Options
du panneau Nuancier, acc&eacute;dez ensuite au dossier, puis s&eacute;lectionnez le fichier.
• Pour ajouter un nuancier &agrave; partir d’une palette de couleurs externe, choisissez Ajouter des &eacute;chantillons dans le
menu Options du panneau Nuancier, acc&eacute;dez ensuite au dossier, puis s&eacute;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 &gt; Annuler ne permet pas d’annuler l’ajout ou la suppression d’un nuancier.
1 Dans le panneau Outils, s&eacute;lectionnez l’outil Pipette.
2 Dans le menu contextuel Echantillon de l’inspecteur des propri&eacute;t&eacute;s, s&eacute;lectionnez le nombre de pixels &agrave;
&eacute;chantillonner : 1 pixel, Moyenne 3x3 ou Moyenne 5x5.
3 Cliquez n’importe o&ugrave; dans une fen&ecirc;tre de document Fireworks ouverte pour pr&eacute;lever une couleur.
• Pour ajouter une couleur, placez le bout du pointeur de la pipette dans l’espace libre apr&egrave;s le dernier &eacute;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&eacute;e.
4 Cliquez pour ajouter ou remplacer la nuance.
Lorsque vous s&eacute;lectionnez Accrocher &agrave; la couleur s&eacute;curis&eacute;e pour le Web dans le menu Options de la fen&ecirc;tre
contextuelle pour la s&eacute;lection des couleurs, toutes les couleurs non s&eacute;curis&eacute;es pour le Web pr&eacute;lev&eacute;es avec le pointeur
de la pipette prennent la valeur de la couleur s&eacute;curis&eacute;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&eacute;e, placez le pointeur
sur une nuance, puis cliquez dessus.
Derni&egrave;re mise &agrave; 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&eacute; du panneau des nuances, s&eacute;lectionnez l’option Effacer le nuancier dans le menu Options du
panneau Nuancier.
• Pour trier le nuancier par valeur colorim&eacute;trique, s&eacute;lectionnez l’option Trier par couleur dans le menu Options du
panneau Nuancier.
Cr&eacute;ation et modification de couleurs dans le M&eacute;langeur
Pour afficher et modifier les couleurs de contour et de fond actives, utilisez le M&eacute;langeur (Fen&ecirc;tre &gt; M&eacute;langeur).
Par d&eacute;faut, le M&eacute;langeur identifie les couleurs RVB comme &eacute;tant hexad&eacute;cimales ; il affiche donc des valeurs
chromatiques hexad&eacute;cimales pour les composantes de couleur rouge (R), vert (V) et bleu (B). Les valeurs RVB
hexad&eacute;cimales sont comprises entre 00 et FF.
Mod&egrave;le de couleurs
Mode d’expression de couleur
RVB
Valeurs de rouge, de vert et de bleu, o&ugrave; chacun des composants correspond &agrave; une valeur comprise
entre 0 et 255. 0-0-0 correspond au noir, et 255-255-255 au blanc.
Hexad&eacute;cimal
Valeurs RVB de rouge, de vert et de bleu, o&ugrave; chacun de ces composants a une valeur hexad&eacute;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&eacute;. Les valeurs de teinte peuvent aller de 0 &agrave;
360 degr&eacute;s ; les valeurs de saturation et de luminosit&eacute; peuvent aller de 0 % &agrave; 100 %.
CMJ
Valeurs de cyan, de magenta et de jaune, o&ugrave; 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 &agrave; une valeur comprise entre 0
et 100 %, 0 correspondant au blanc, et 100 au noir. Les valeurs interm&eacute;diaires correspondent &agrave; des
nuances de gris.
Dans le menu Options du M&eacute;langeur, vous pouvez s&eacute;lectionner d’autres mod&egrave;les de couleurs. Les valeurs des
composantes de la couleur actuelle changent avec chaque nouveau mod&egrave;le.
Bien que CMJ soit une option de mod&egrave;le de couleurs, les graphiques export&eacute;s directement depuis Fireworks ne donnent
pas de tr&egrave;s bons r&eacute;sultats &agrave; l’impression. Pour red&eacute;finir les graphiques Fireworks export&eacute;s en vue de leur impression,
importez-les dans Adobe Illustrator, Adobe Photoshop ou Adobe FreeHand. Pour plus d’informations, reportez-vous &agrave; la
documentation fournie avec ces applications.
Application d’une couleur &agrave; un objet vectoriel s&eacute;lectionn&eacute;
1 Dans le M&eacute;langeur, cliquez sur l’ic&ocirc;ne situ&eacute;e &agrave; c&ocirc;t&eacute; de la case Couleur de contour ou Couleur de fond.
2 Positionnez le pointeur sur la barre de couleurs, puis cliquez dessus.
Pr&eacute;l&egrave;vement d’une couleur
1 Afin d’&eacute;viter que des objets ne soient malencontreusement modifi&eacute;s lors du m&eacute;lange des couleurs, d&eacute;s&eacute;lectionnez
tous les objets.
2 Cliquez sur la case Couleur de contour ou Couleur de fond.
3 Dans le menu d’options du M&eacute;langeur, s&eacute;lectionnez un mod&egrave;le de couleurs.
4 Pour d&eacute;finir des valeurs chromatiques, entrez-les dans les diff&eacute;rentes zones de texte des composantes de couleurs,
utilisez les curseurs contextuels ou pr&eacute;levez une couleur dans la barre de couleurs.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 114
Application de couleurs, de contours et de fonds
Navigation dans les mod&egrave;les de couleurs
❖ Tout en maintenant la touche Maj enfonc&eacute;e, cliquez sur la barre de couleurs au bas du M&eacute;langeur.
Remarque : les options du M&eacute;langeur ne sont pas chang&eacute;es.
Cr&eacute;ation de couleurs &agrave; l’aide des s&eacute;lecteurs de couleurs syst&egrave;me
1 Cliquez sur une case de couleur.
2 Dans un menu Options de la fen&ecirc;tre contextuelle pour la s&eacute;lection des couleurs, s&eacute;lectionnez le syst&egrave;me Windows
ou Mac.
3 S&eacute;lectionnez une couleur parmi les couleurs syst&egrave;me.
Gestion des couleurs avec le panneau Palette de couleurs
❖ Pour ouvrir le panneau Palette de couleurs, choisissez Fen&ecirc;tre &gt; Autres &gt; Palette de couleurs.
Recherche de la couleur Web s&eacute;curis&eacute;e la plus proche de chaque valeur chromatique
1 Cliquez sur la case de couleur de fond dans l’onglet S&eacute;lecteur du panneau Palette de couleurs.
2 Pour &eacute;chantillonner une couleur, utilisez le pointeur de la pipette pour cliquer dans un document Fireworks, &agrave;
l’emplacement de votre choix.
La couleur Web s&eacute;curis&eacute;e la plus proche s’affiche sous la couleur de fond active.
Remarque : vous pouvez &eacute;galement utiliser l’onglet S&eacute;lecteur pour convertir des couleurs dans diff&eacute;rents mod&egrave;les de
couleurs (RVB et CMJN, par exemple) ou pour s&eacute;lectionner le mode d’affichage des couleurs.
Cr&eacute;ation et permutation de palettes de couleurs
1 S&eacute;lectionnez l’onglet M&eacute;langeurs dans le panneau Palette de couleurs.
2 A l’aide des quatre cases de couleur de fond situ&eacute;es en bas du panneau, d&eacute;finissez les quatre couleurs de base &agrave;
utiliser pour le document.
3 Au besoin, utilisez la roue chromatique TSL, en bas &agrave; droite du panneau, pour modifier la palette.
4 Pour essayer diff&eacute;rentes palettes dans le document, cliquez sur Palette 2, sur le c&ocirc;t&eacute; gauche du panneau, puis
s&eacute;lectionnez les couleurs de base de cette seconde palette.
5 Pour alterner entre les deux palettes, cliquez sur les deux ic&ocirc;nes Remplacer la couleur.
Derni&egrave;re mise &agrave; 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&eacute;grad&eacute;s dans
des &eacute;l&eacute;ments vectoriels, mais pas dans des &eacute;l&eacute;ments bitmap ni des symboles graphiques.
Exportation d’une palette
1 S&eacute;lectionnez la palette &agrave; exporter (Palette 1 ou Palette 2).
2 Cliquez sur l’ic&ocirc;ne Exporter comme fichier bitmap pour exporter la palette sous forme de fichier bitmap, ou cliquez
sur l’ic&ocirc;ne Exporter comme table de couleurs pour l’exporter sous forme de fichier ACT.
Cr&eacute;ation d’une s&eacute;rie de d&eacute;grad&eacute;s de couleurs
1 S&eacute;lectionnez l’onglet M&eacute;langeur dans le panneau Palette de couleurs.
2 &Agrave; l’aide des quatre cases de couleur de fond situ&eacute;es en bas du panneau, d&eacute;finissez la couleur de d&eacute;but et la couleur
de fin.
3 Pour s&eacute;lectionnez le nombre d’&eacute;tapes composant la s&eacute;rie, utilisez le curseur contextuel Etapes.
Remarque : pour afficher la valeur hexad&eacute;cimale de la couleur, placez le pointeur sur une nuance de couleur.
Cr&eacute;ation d’une palette partag&eacute;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&eacute;er une palette de couleurs partag&eacute;e, toutes les images doivent
figurer dans le m&ecirc;me dossier.
1 S&eacute;lectionnez Commandes &gt; Web &gt; Cr&eacute;er palette partag&eacute;e.
2 Indiquez le nombre maximal de couleurs &agrave; inclure dans la palette de couleurs partag&eacute;e.
3 Cliquez sur Parcourir pour indiquer le dossier contenant les images, puis cliquez sur OK.
S&eacute;lection de couleurs dans une fen&ecirc;tre contextuelle pour la s&eacute;lection des
couleurs
Lorsque vous cliquez sur une case de couleur, une fen&ecirc;tre contextuelle pour la s&eacute;lection des couleurs semblable au
panneau Nuancier s’affiche.
S&eacute;lection d’une couleur pour une case de couleur
1 Cliquez sur une case de couleur.
2 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Pour appliquer une nuance &agrave; la case de couleur, cliquez sur une nuance.
• Pour appliquer la couleur &agrave; la case de couleur, cliquez avec le pointeur de la pipette sur l’une des couleurs
affich&eacute;es &agrave; l’&eacute;cran.
• Pour rendre un contour ou un fond transparent, cliquez sur le bouton Transparent dans la fen&ecirc;tre contextuelle.
Affichage du groupe de nuances actif dans le panneau Nuancier
❖ Dans le menu Options de la fen&ecirc;tre contextuelle pour la s&eacute;lection des couleurs, s&eacute;lectionnez le panneau Nuancier.
Affichage d’un groupe de nuances diff&eacute;rent dans la fen&ecirc;tre contextuelle pour la s&eacute;lection
des couleurs
❖ Dans le menu Option de la fen&ecirc;tre contextuelle pour la s&eacute;lection des couleurs, s&eacute;lectionnez un groupe de nuances.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 116
Application de couleurs, de contours et de fonds
Remarque : la s&eacute;lection d’un groupe de nuances n’affecte pas le panneau Nuancier.
Echantillonnage de couleurs &agrave; partir d’une fen&ecirc;tre contextuelle pour la
s&eacute;lection des couleurs
Lorsqu’une fen&ecirc;tre contextuelle pour la s&eacute;lection des couleurs est ouverte, le pointeur se transforme en pipette sp&eacute;ciale
permettant d’&eacute;chantillonner des couleurs depuis quasiment tous les endroits de l’&eacute;cran. Cette op&eacute;ration s’appelle
l’&eacute;chantillonnage.
1 Cliquez sur une case de couleur.
2 Cliquez n’importe o&ugrave; dans l’espace de travail Fireworks pour s&eacute;lectionner et appliquer la couleur pour la case de
couleur.
Tout en maintenant la touche Maj enfonc&eacute;e, cliquez sur une couleur s&eacute;curis&eacute;e pour le Web pour la s&eacute;lectionner.
Identification des valeurs chromatiques
Pour identifier des valeurs chromatiques, vous pouvez &eacute;galement utiliser le panneau Info en plus du M&eacute;langeur et de
la fen&ecirc;tre contextuelle pour la s&eacute;lection des couleurs.
Affichage de la valeur chromatique d’une partie de document
❖ Proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Utilisez le M&eacute;langeur ou la fen&ecirc;tre contextuelle pour la s&eacute;lection des couleurs.
• Utilisez le panneau Info. Cliquez sur l’outil Pipette, choisissez ensuite Fen&ecirc;tre &gt; Info, puis d&eacute;placez le pointeur
sur l’objet contenant la couleur &agrave; afficher (Windows uniquement).
Affichage de la valeur chromatique de la couleur de contour ou de fond active
❖ Proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Choisissez Fen&ecirc;tre &gt; M&eacute;langeur pour les valeurs RVB ou les autres valeurs de couleur syst&egrave;me.
• Cliquez sur une case de couleur pour ouvrir la fen&ecirc;tre contextuelle pour la s&eacute;lection des couleurs et afficher la
valeur hexad&eacute;cimale dans la partie sup&eacute;rieure de la fen&ecirc;tre.
• Placez le pointeur sur une case de couleur, puis lisez l’info-bulle (Windows uniquement).
Remarque : par d&eacute;faut, les valeurs RVB sont visibles dans le panneau Info et dans le M&eacute;langeur. La valeur
hexad&eacute;cimale correspondante appara&icirc;t dans la fen&ecirc;tre contextuelle pour la s&eacute;lection des couleurs.
Affichage des informations chromatiques relatives &agrave; un autre mod&egrave;le de couleurs
❖ Dans le menu Options du panneau Info ou du M&eacute;langeur, s&eacute;lectionnez un autre mod&egrave;le de couleurs.
Simulation des couleurs s&eacute;curis&eacute;es pour le Web et de la transparence
par tramage
Si vous utilisez une couleur non s&eacute;curis&eacute;e pour le Web, veillez &agrave; appliquer un tramage Web. Vous pourrez ainsi
simuler une couleur s&eacute;curis&eacute;e pour le Web qui ne varie pas ni ne se juxtapose &agrave; une autre lors de son exportation avec
une palette de couleurs s&eacute;curis&eacute;es pour le Web.
Pour cr&eacute;er un aspect transparent, appliquez l’option de tramage Transparent. Dans les objets transparents, l’arri&egrave;replan de la page Web laisse transpara&icirc;tre tous les autres pixels du fond tram&eacute; Web transparent.
Derni&egrave;re mise &agrave; 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&eacute;curis&eacute;es pour le Web cr&eacute;ent un fond tram&eacute; Web.
Application d’un fond tram&eacute; Web
1 S&eacute;lectionnez un objet contenant une couleur non s&eacute;curis&eacute;e pour le Web.
2 Dans le menu contextuel Options de fond de l’inspecteur des propri&eacute;t&eacute;s, cliquez sur Tramage Web.
3 Dans l’inspecteur des propri&eacute;t&eacute;s, cliquez sur la case Couleur de fond pour afficher la fen&ecirc;tre contextuelle Options
de fond.
La couleur non s&eacute;curis&eacute;e pour le Web de l’objet appara&icirc;t dans le s&eacute;lecteur Couleur source. Les deux couleurs de
tramage s&eacute;curis&eacute;es pour le Web s’affichent dans les cases de couleur de droite. Le tramage Web est appliqu&eacute; &agrave; l’objet
et devient la couleur de fond active.
Remarque : la d&eacute;finition du bord d’un fond tram&eacute; Web sur Lissage ou Contour progressif g&eacute;n&egrave;re des couleurs non
s&eacute;curis&eacute;es pour le Web.
4 Cliquez hors de la fen&ecirc;tre contextuelle pour la fermer.
Application d’un fond tram&eacute; transparent
1 S&eacute;lectionnez l’objet auquel vous voulez appliquer un fond transparent.
2 Dans le menu contextuel Options de fond de l’inspecteur des propri&eacute;t&eacute;s, cliquez sur Tramage Web.
3 Dans l’inspecteur des propri&eacute;t&eacute;s, cliquez sur la case Couleur de fond pour afficher la fen&ecirc;tre contextuelle Options
de fond.
4 S&eacute;lectionnez l’option Transparent.
L’objet devient semi-opaque ou transparent sur la zone de travail.
5 Cliquez hors de la fen&ecirc;tre contextuelle pour la fermer.
6 Exportez l’objet au format GIF ou PNG apr&egrave;s avoir s&eacute;lectionn&eacute; l’option Transparence d’index ou Transparence
alpha. Pour plus d’informations, reportez-vous &agrave; la section &laquo; Transformation de zones en zones transparentes &raquo; &agrave;
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&eacute;lection de couleurs &eacute;chantillonn&eacute;es, ajoutez les couleurs, choisissez l’option Enregistrer le
nuancier dans le menu Options du panneau Nuancier, puis s&eacute;lectionnez un nom de fichier et un r&eacute;pertoire.
Derni&egrave;re mise &agrave; 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’&eacute;changer entre des applications comme Photoshop,
Illustrator et InDesign. Gr&acirc;ce &agrave; eux, vous pouvez partager les couleurs que vous avez cr&eacute;&eacute;es dans une application avec
les autres applications.
Fireworks prend en charge les espaces colorim&eacute;triques RVB et CMJN. Les nuanciers appartenant aux autres espaces
colorim&eacute;triques ne sont pas pris en compte. Les nuanciers CMJN sont convertis en valeurs RVB, puis import&eacute;s dans
Fireworks. Aucune information concernant cette conversion n’est toutefois affich&eacute;e explicitement.
Enregistrement de nuanciers au format ASE
1 Ouvrez l’ensemble de nuances &agrave; enregistrer dans le panneau Nuanciers.
2 Dans les options de ce panneau, s&eacute;lectionnez Enregistrer le nuancier.
3 Entrez le nom du fichier de nuancier et enregistrez celui-ci.
Importation de nuanciers &agrave; partir d’autres applications CS
1 Ouvrez l’ensemble de nuances dans le panneau Nuanciers.
2 Dans les options de ce panneau, s&eacute;lectionnez Ajouter des &eacute;chantillons.
Panneau Kuler
A propos du panneau Kuler
Le panneau Kuler™ permet d'acc&eacute;der &agrave; des groupes de couleurs et &agrave; des th&egrave;mes cr&eacute;&eacute;s par la communaut&eacute; de
concepteurs en ligne. Vous pouvez l'utiliser pour parcourir des milliers de th&egrave;mes sur Kuler™ et pour t&eacute;l&eacute;charger ceux
de votre choix afin de les modifier ou de les inclure dans vos projets. Vous pouvez &eacute;galement utiliser le panneau Kuler
pour cr&eacute;er et enregistrer des th&egrave;mes. Il vous suffit ensuite de les t&eacute;l&eacute;charger pour les partager avec la
communaut&eacute; Kuler.
Le panneau Kuler est disponible dans Adobe Photoshop&reg; CS5, Adobe Flash&reg; Professional CS5, Adobe InDesign&reg; CS5,
Adobe Illustrator&reg; CS5 et Adobe Fireworks&reg; CS5. Le panneau n’est pas disponible dans les versions fran&ccedil;aises de ces
produits.
Une vid&eacute;o consacr&eacute;e au panneau Kuler est disponible &agrave; 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 &agrave; l'adresse
http://veerle.duoh.com/blog/comments/adobe_kuler_update_and_color_tips/ (en anglais).
Consultation des th&egrave;mes
Il convient de disposer d’une connexion Internet pour parcourir les th&egrave;mes en ligne.
Recherche de th&egrave;mes
1 Choisissez la commande Fen&ecirc;tre &gt; Extensions &gt; Kuler, puis s&eacute;lectionnez le panneau Parcourir.
2 Effectuez l'une des op&eacute;rations suivantes :
• Dans la zone de recherche, entrez le nom d'un th&egrave;me, d'une balise ou d'un concepteur.
Remarque : utilisez uniquement des caract&egrave;res alphanum&eacute;riques (Aa-Zz, 0-9) lors d’une recherche.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 119
Application de couleurs, de contours et de fonds
• Vous pouvez filtrer les r&eacute;sultats obtenus : il vous suffit pour cela de s&eacute;lectionner une option dans les menus
d&eacute;roulants situ&eacute;s au-dessus de la liste de r&eacute;sultats.
Affichage d’un th&egrave;me en ligne sur Kuler
1 Acc&eacute;dez au panneau Parcourir, puis s&eacute;lectionnez un th&egrave;me dans la liste des r&eacute;sultats de la recherche.
2 Cliquez sur le triangle situ&eacute; &agrave; droite du th&egrave;me et s&eacute;lectionnez l’option Afficher la version en ligne dans Kuler.
Enregistrement de termes fr&eacute;quemment recherch&eacute;s
1 S&eacute;lectionnez l'option Personnalis&eacute; dans le premier menu d&eacute;roulant du panneau Parcourir.
2 Dans la bo&icirc;te de dialogue qui s’affiche, entrez les termes &agrave; rechercher et enregistrez-les.
Pour effectuer une recherche sur ces termes, s&eacute;lectionnez-les dans le premier menu d&eacute;roulant.
Pour supprimer une recherche enregistr&eacute;e, s&eacute;lectionnez l'option Personnalis&eacute; dans le menu contextuel. Effacez ensuite
les recherches de votre choix, puis cliquez sur Enregistrer.
Utilisation de th&egrave;mes
Le panneau Kuler permet de cr&eacute;er ou de modifier des th&egrave;mes et de les utiliser dans le cadre d'un projet.
Remarque : si vous souhaitez cr&eacute;er ou modifier des th&egrave;mes dans Illustrator, vous devez utiliser la bo&icirc;te de dialogue
Modifier les couleurs/Red&eacute;finir les couleurs de l'illustration plut&ocirc;t que le panneau Cr&eacute;er. Pour plus de d&eacute;tails, reportezvous &agrave; l'aide d'Illustrator.
Ajout d'un th&egrave;me au panneau Nuancier de votre application
1 Dans le panneau Parcourir, s&eacute;lectionnez le th&egrave;me que vous souhaitez utiliser.
2 Cliquez sur le triangle situ&eacute; &agrave; droite du th&egrave;me et s&eacute;lectionnez l'option Ajouter au nuancier.
Vous pouvez &eacute;galement ajouter un th&egrave;me &agrave; partir du panneau Cr&eacute;er &agrave; l'aide du bouton Ajouter le th&egrave;me s&eacute;lectionn&eacute;
au nuancier.
Modification d'un th&egrave;me
1 Acc&eacute;dez au panneau Parcourir, recherchez le th&egrave;me que vous souhaitez modifier dans la liste des r&eacute;sultats, puis
cliquez deux fois dessus. Le th&egrave;me s'ouvre dans le panneau Cr&eacute;er.
2 Dans le panneau Cr&eacute;er, modifiez le th&egrave;me &agrave; l'aide des outils mis &agrave; votre disposition. Pour plus d'informations,
reportez-vous &agrave; la rubrique Outils du panneau Cr&eacute;er ci-dessous.
3 Effectuez l'une des op&eacute;rations suivantes :
• Enregistrez votre th&egrave;me &agrave; l'aide du bouton Enregistrer le th&egrave;me.
• Ajoutez le th&egrave;me au panneau Nuancier de votre application &agrave; l'aide du bouton Ajouter au nuancier situ&eacute; au bas
du panneau.
• T&eacute;l&eacute;chargez le th&egrave;me vers le service Kuler &agrave; l'aide du bouton de t&eacute;l&eacute;chargement situ&eacute; en bas du panneau.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 120
Application de couleurs, de contours et de fonds
Outils du panneau Cr&eacute;er
Le panneau Cr&eacute;er propose une gamme d'outils permettant de cr&eacute;er ou de modifier des th&egrave;mes.
• Choisissez une r&egrave;gle d'harmonie dans le menu d&eacute;roulant de s&eacute;lection d'une r&egrave;gle. La r&egrave;gle d’harmonie utilise la
couleur de base pour la g&eacute;n&eacute;ration des couleurs du groupe de couleurs. Par exemple, si vous choisissez une couleur
de base bleue et la r&egrave;gle d’harmonie compl&eacute;mentaire, un groupe de couleurs est cr&eacute;&eacute; avec la couleur de base, le bleu,
et sa couleur compl&eacute;mentaire, le rouge.
• S&eacute;lectionnez la r&egrave;gle Personnalis&eacute;e pour cr&eacute;er un th&egrave;me sur la base de r&eacute;glages personnalis&eacute;s.
• Utilisez la roue chromatique pour g&eacute;rer les couleurs. A mesure que vous effectuez des modifications, les couleurs
du groupe de couleurs sont g&eacute;n&eacute;r&eacute;es en fonction de la r&egrave;gle d'harmonie s&eacute;lectionn&eacute;e.
•
D&eacute;placez le curseur de r&eacute;glage Luminosit&eacute; situ&eacute; en regard de la roue pour ajuster la luminosit&eacute; des couleurs.
• Faites glisser le marqueur de la couleur de base (c'est-&agrave;-dire le plus grand des marqueurs, celui &agrave; double cercle) sur
la roue pour d&eacute;finir la couleur de base. Vous pouvez &eacute;galement d&eacute;finir la couleur de base &agrave; l'aide des curseurs de
r&eacute;glage des couleurs situ&eacute;s au bas de la bo&icirc;te de dialogue.
• D&eacute;finissez l'une des quatre autres couleurs du groupe comme couleur de base. S&eacute;lectionnez la nuance de la couleur
et cliquez sur le bouton en forme de cible situ&eacute; en dessous du groupe de couleurs.
• D&eacute;finissez la couleur de premier plan/d'arri&egrave;re-plan ou de contour/de fond comme couleur de base. Cliquez sur
l'un des deux premiers boutons situ&eacute;s en dessous du groupe de couleurs.
• Pour supprimer une couleur du groupe de couleurs, s&eacute;lectionnez la nuance de la couleur, puis cliquez sur le bouton
Supprimer la couleur situ&eacute; en dessous du groupe de couleurs. Pour ajouter une couleur, s&eacute;lectionnez une case de
couleur vide, puis cliquez sur le bouton Ajouter une couleur.
• Pour essayer diff&eacute;rents effets de couleur, s&eacute;lectionnez une nouvelle r&egrave;gle d'harmonie et d&eacute;placez les marqueurs de
la roue chromatique.
• Cliquez deux fois sur l'une des nuances du groupe de couleurs pour d&eacute;finir la couleur active (premier plan/arri&egrave;replan ou contour/fond) dans votre application. S'il n'est pas possible d'activer ou de s&eacute;lectionner une couleur dans
l'application utilis&eacute;e, le panneau Kuler d&eacute;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&eacute;cision chacun de vos traits de pinceau, en contr&ocirc;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&egrave;s
la cr&eacute;ation d’objets. L’ic&ocirc;ne de crayon indique le s&eacute;lecteur Couleur de trait dans le panneau Outils, l’Inspecteur des
propri&eacute;t&eacute;s et le M&eacute;langeur.
Les param&egrave;tres, cat&eacute;gories et noms de contour de l’objet s&eacute;lectionn&eacute; sont pr&eacute;serv&eacute;s d’un document &agrave; l’autre et d’une
session d’application &agrave; l’autre. Lorsque vous cr&eacute;ez un objet dans un nouveau document, dans la session en cours ou
apr&egrave;s avoir rouvert Fireworks, les derniers param&egrave;tres de contour s&eacute;lectionn&eacute;s sont utilis&eacute;s. Les param&egrave;tres sont
conserv&eacute;s d’une session &agrave; l’autre.
Pour appliquer un contour &agrave; un objet bitmap, utilisez les effets dynamiques Photoshop, puis s&eacute;lectionnez
l’attribut Contour (voir la section &laquo; Application de filtres dynamiques &raquo; &agrave; la page 130).
Derni&egrave;re mise &agrave; 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&eacute;lectionn&eacute;s
Proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Dans le menu contextuel Cat&eacute;gorie de contour de l’inspecteur des propri&eacute;t&eacute;s, s&eacute;lectionnez un attribut de contour.
• Pour afficher davantage d’options, s&eacute;lectionnez Options de contour dans le menu contextuel Cat&eacute;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&eacute;s&eacute;lectionner tous les objets.
2 Dans le panneau Outils, s&eacute;lectionnez un outil de dessin.
3 Dans le panneau Outils ou dans l’inspecteur des propri&eacute;t&eacute;s, cliquez sur la case Couleur de contour.
4 S&eacute;lectionnez une couleur, puis faites glisser le pointeur pour dessiner l’objet.
Remarque : un nouveau contour utilise la couleur actuellement affich&eacute;e dans la case Couleur de contour.
Suppression d’attributs de contour d’un objet s&eacute;lectionn&eacute;
Proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Dans le menu contextuel Cat&eacute;gorie de contour de l’inspecteur des propri&eacute;t&eacute;s ou dans la fen&ecirc;tre contextuelle
Options de contour, cliquez sur Aucune.
•
Activez le s&eacute;lecteur Couleur de contour dans le panneau Outils ou l’inspecteur des propri&eacute;t&eacute;s, puis cliquez sur le
bouton Transparent .
Alignement du contour
Utilisez les options d’alignement du contour de l’inspecteur des propri&eacute;t&eacute;s (Aligner le contour vers le centre, Aligner
le contour vers l’int&eacute;rieur et Aligner le contour vers l’ext&eacute;rieur). Les ic&ocirc;nes d’alignement de l’inspecteur des propri&eacute;t&eacute;s
permettent un acc&egrave;s plus rapide &agrave; ces options.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 122
Application de couleurs, de contours et de fonds
Cr&eacute;ation et modification de contours personnalis&eacute;s
Utilisez la bo&icirc;te de dialogue Modifier le contour pour changer des caract&eacute;ristiques de contour sp&eacute;cifiques.
Ouverture de la bo&icirc;te de dialogue Modifier le contour
Proc&eacute;dez de l’une des mani&egrave;res suivantes :
1 Cliquez sur Modifier le contour dans l'inspecteur de propri&eacute;t&eacute;s.
2 Chaque onglet pr&eacute;sente le m&ecirc;me pinceau avec des param&egrave;tres diff&eacute;rents. Dans l’aper&ccedil;u, les param&egrave;tres actuels de
sensibilit&eacute; &agrave; la pression et &agrave; la vitesse sont repr&eacute;sent&eacute;s par un contour trac&eacute; de gauche &agrave; droite qui s’effile, s’estompe
ou se transforme d’une mani&egrave;re ou d’une autre.
D&eacute;finition des options de trait de pinceau g&eacute;n&eacute;rales
1 Dans l’onglet Options, d&eacute;finissez la quantit&eacute; d’encre, l’espacement et le d&eacute;bit. Une vitesse d’&eacute;coulement &eacute;lev&eacute;e
produit des traits de pinceau qui s’encha&icirc;nent progressivement comme si vous utilisiez un a&eacute;rographe.
2 S&eacute;lectionnez des options de trait de pinceau :
• Pour que les traits de pinceau se chevauchent et cr&eacute;ent des contours denses, s&eacute;lectionnez Repasser.
• Pour d&eacute;finir la texture du contour, changez l’option Texture. L’aspect de la texture est proportionnel &agrave; la valeur
d&eacute;finie.
• Pour d&eacute;finir la texture des bords, entrez une valeur dans la zone de texte Texture du bord, puis s&eacute;lectionnez un
effet de bord dans le menu contextuel Effet de bord.
• D&eacute;finissez le nombre de pointes du trait de pinceau. Pour plusieurs extr&eacute;mit&eacute;s, entrez une valeur d’espacement
des pointes, puis s&eacute;lectionnez la m&eacute;thode de variation de couleur.
• Pour s&eacute;lectionner une ligne pointill&eacute;e ou discontinue, s&eacute;lectionnez une option dans le menu contextuel Tiret.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 123
Application de couleurs, de contours et de fonds
• Pour d&eacute;finir la longueur des tirets et des espaces d’une ligne pointill&eacute;e, utilisez les trois ensembles de zones
d’entr&eacute;e de texte Activ&eacute;(e) et D&eacute;sactiv&eacute;(e) pour contr&ocirc;ler le premier, le deuxi&egrave;me et le troisi&egrave;me tiret.
3 Cliquez sur OK.
Modification de la pointe
1 Dans l’onglet Forme, s&eacute;lectionnez Carr&eacute;e pour obtenir une pointe carr&eacute;e, ou d&eacute;s&eacute;lectionnez cette option si vous
pr&eacute;f&eacute;rez une pointe de pinceau ronde.
2 D&eacute;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 &agrave; la pression, Fireworks utilise
des param&egrave;tres de contour pour d&eacute;finir pr&eacute;cis&eacute;ment les attributs de contour contr&ocirc;l&eacute;s par la vitesse et la pression. Vous
pouvez s&eacute;lectionner l’attribut de contour &agrave; contr&ocirc;ler avec le crayon.
D&eacute;finition de la sensibilit&eacute; du contour
1 Dans l’onglet Sensibilit&eacute;, s&eacute;lectionnez une propri&eacute;t&eacute; de contour dans le menu contextuel Propri&eacute;t&eacute; du contour.
2 Dans les options Facteurs de variation, s&eacute;lectionnez le degr&eacute; auquel la sensibilit&eacute; affecte la propri&eacute;t&eacute; de contour
actuelle.
Enregistrement/Suppression d’un contour personnalis&eacute;
Cliquez sur Enregistrer le contour personnalis&eacute; ou Supprimer le contour personnalis&eacute; dans l’inspecteur des propri&eacute;t&eacute;s
pour enregistrer ou supprimer un contour personnalis&eacute;.
D&eacute;placement d’un trait de pinceau &agrave; l’int&eacute;rieur ou &agrave; l’ext&eacute;rieur d’un trac&eacute;
Contour centr&eacute;, contour situ&eacute; &agrave; l’int&eacute;rieur et contour situ&eacute; &agrave; l’ext&eacute;rieur
Pour d&eacute;placer des traits de pinceau de la position par d&eacute;faut (centrage sur un trac&eacute;) vers un autre emplacement, utilisez
le menu contextuel Contour de la fen&ecirc;tre Options de contour.
1 Dans le panneau Outils ou dans l’inspecteur des propri&eacute;t&eacute;s, cliquez sur la case Contour pour ouvrir la fen&ecirc;tre
contextuelle de nuancier.
2 Dans la partie inf&eacute;rieure de cette fen&ecirc;tre, s&eacute;lectionnez A l’int&eacute;rieur du trac&eacute; ou A l’ext&eacute;rieur du trac&eacute; dans le menu
contextuel.
3 (Facultatif) S&eacute;lectionnez l’option Fond sur contour.
Normalement, le contour recouvre le fond. La s&eacute;lection de l’option Fond sur contour permet de dessiner un fond
sur le contour. Lorsque l’option Fond sur contour est utilis&eacute;e avec un objet comportant un fond opaque, toute partie
du contour situ&eacute;e &agrave; l’int&eacute;rieur du trac&eacute; est obscurcie. Les fonds comportant un niveau de transparence risquent de
teinter les traits de pinceau &agrave; l’int&eacute;rieur des trac&eacute;s ou de se m&eacute;langer avec ces derniers.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 124
Application de couleurs, de contours et de fonds
Cr&eacute;ation de styles de contour
Vous pouvez modifier des caract&eacute;ristiques de contour sp&eacute;cifiques, telles que la quantit&eacute; d’encre, la forme et la pression
de la pointe, puis enregistrer le contour personnalis&eacute; en tant que style, de fa&ccedil;on &agrave; l’utiliser de nouveau dans les autres
documents.
1 Proc&eacute;dez de l’une des mani&egrave;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&eacute;t&eacute;s, cliquez sur Options de contour.
2 Modifiez les attributs de trait de pinceau.
3 Cliquez sur le bouton Enregistrer les contours personnalis&eacute;s pour enregistrer les attributs de contour personnalis&eacute;
en tant que style en vue d’une utilisation ult&eacute;rieure.
Cr&eacute;ation et modification de fonds unis
Cr&eacute;ez et utilisez des fonds pour les objets vectoriels et le texte, et utilisez les outils Pot de peinture ou D&eacute;grad&eacute; pour
remplir les s&eacute;lections de pixels en leur appliquant les param&egrave;tres de fond actuels.
L’ic&ocirc;ne de pot de peinture
du M&eacute;langeur.
symbolise la case Couleur de fond du panneau Outils, de l’inspecteur des propri&eacute;t&eacute;s et
Modification de la couleur de fond unie des outils de dessin vectoriels et de l’outil Pot
de peinture
1 S&eacute;lectionnez un outil de dessin vectoriel ou l’outil Pot de peinture.
2 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Appuyez sur les touches Ctrl+D (Windows) ou Cmde+D (Mac OS) pour d&eacute;s&eacute;lectionner tous les objets, puis
cliquez sur la case Couleur de fond de l’inspecteur des propri&eacute;t&eacute;s pour ouvrir la fen&ecirc;tre contextuelle
correspondante.
• Activez la case Couleur de fond du panneau Outils ou du M&eacute;langeur pour ouvrir la fen&ecirc;tre contextuelle pour la
s&eacute;lection des couleurs.
3 S&eacute;lectionnez une couleur de fond dans le nuancier, ou utilisez le pointeur de la pipette pour &eacute;chantillonner une
couleur sur l’&eacute;cran.
Remarque : suite &agrave; la s&eacute;lection de l’outil Texte, la case Couleur de fond adopte toujours la derni&egrave;re couleur de texte
unie utilis&eacute;e par cet outil.
Modification du fond uni d’un objet vectoriel s&eacute;lectionn&eacute;
1 Activez la case Couleur de fond de l’inspecteur des propri&eacute;t&eacute;s, du panneau Outils ou du M&eacute;langeur pour ouvrir la
fen&ecirc;tre contextuelle pour la s&eacute;lection des couleurs.
2 S&eacute;lectionnez une nuance.
Cr&eacute;ation et application de fonds en d&eacute;grad&eacute; ou &agrave; motifs
• Utilisez les fonds &agrave; motifs pour remplir un objet trac&eacute; avec un graphique bitmap.
• Utilisez les fonds en d&eacute;grad&eacute; pour m&eacute;langer les couleurs et obtenir ainsi divers effets. Les fonds n’appartenant pas
aux cat&eacute;gories Aucun, Uni, Motif et Tramage Web sont des fonds en d&eacute;grad&eacute;.
Remarque : les nouveaux fonds utilisent la couleur actuellement affich&eacute;e dans la case Couleur de fond du
panneau Outils.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 125
Application de couleurs, de contours et de fonds
Application d’un fond &agrave; motifs &agrave; un objet s&eacute;lectionn&eacute;
1 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Dans le menu contextuel Options de fond de l’inspecteur des propri&eacute;t&eacute;s, cliquez sur Motif.
• Activez la case Couleur de fond du panneau Outils, cliquez ensuite sur Options de fond, puis s&eacute;lectionnez Motif
dans le menu contextuel Options de fond.
2 Dans le menu contextuel Nom de motif, s&eacute;lectionnez un motif.
Cr&eacute;ation d’un fond &agrave; motifs personnalis&eacute; &agrave; partir d’un fichier externe
D&eacute;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&eacute; dans Fireworks. Les images qui ne sont pas de 32 bits deviennent opaques.
1 Affichez les propri&eacute;t&eacute;s de l’objet vectoriel dans l’inspecteur des propri&eacute;t&eacute;s, puis s&eacute;lectionnez Motif dans le menu
contextuel Options de fond.
2 Activez la case Couleur de fond, puis s&eacute;lectionnez Autre dans le menu contextuel Nom de motif.
3 Recherchez le fichier bitmap &agrave; utiliser comme nouveau motif, puis cliquez sur Ouvrir.
Application d’un fond en d&eacute;grad&eacute; &agrave; un objet s&eacute;lectionn&eacute;
Objets avec divers fonds en d&eacute;grad&eacute;
❖ Dans le menu contextuel Options de fond de l’inspecteur des propri&eacute;t&eacute;s, s&eacute;lectionnez un d&eacute;grad&eacute;.
Modification d’un fond en d&eacute;grad&eacute;
Fen&ecirc;tre contextuelle Modifier le d&eacute;grad&eacute;
1 Dans le menu contextuel Options de fond de l’inspecteur des propri&eacute;t&eacute;s, s&eacute;lectionnez un fond en d&eacute;grad&eacute; ou un
objet dot&eacute; d’un fond en d&eacute;grad&eacute;.
Derni&egrave;re mise &agrave; 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&eacute;t&eacute;s ou le panneau Outils pour ouvrir la fen&ecirc;tre
contextuelle.
3 Effectuez l’une des op&eacute;rations suivantes :
• Pour ajouter une nouvelle nuance de couleur, cliquez sur la zone situ&eacute;e sous la gamme des d&eacute;grad&eacute;s.
• Pour ajouter une nuance d’opacit&eacute;, cliquez sur la zone au-dessus de la rampe de couleurs d&eacute;grad&eacute;e.
• Pour supprimer une couleur ou une nuance d’opacit&eacute; du d&eacute;grad&eacute;, faites glisser la nuance hors de la fen&ecirc;tre
contextuelle Modifier le d&eacute;grad&eacute;.
• Pour d&eacute;finir ou modifier la couleur d’une nuance, cliquez dessus, puis s&eacute;lectionnez une couleur.
• Pour d&eacute;finir ou modifier la transparence d’une nuance d’opacit&eacute;, cliquez dessus, puis faites glisser le curseur vers
le pourcentage de transparence (la valeur 0 repr&eacute;sente une transparence totale, et la valeur 100 une opacit&eacute;
totale) ou entrez une valeur num&eacute;rique d’opacit&eacute; comprise entre 0 et 100. Ensuite, appuyez sur la touche Entr&eacute;e
ou cliquez hors de la fen&ecirc;tre contextuelle Modifier le d&eacute;grad&eacute;.
Remarque : le damier de transparence appara&icirc;t &agrave; travers le d&eacute;grad&eacute; dans les zones transparentes.
• Pour r&eacute;gler la transition entre les diff&eacute;rentes couleurs d’un fond, faites glisser les nuances de couleur vers la
gauche ou vers la droite.
Cr&eacute;ation de fonds avec l’outil D&eacute;grad&eacute;
Pour remplir un objet avec un d&eacute;grad&eacute; plut&ocirc;t qu’une couleur unie, utilisez l’outil D&eacute;grad&eacute;. L’outil D&eacute;grad&eacute; permet de
conserver les propri&eacute;t&eacute;s du dernier &eacute;l&eacute;ment utilis&eacute;.
1 Dans le panneau Outils, cliquez sur l’outil Pot de peinture, puis s&eacute;lectionnez l’outil D&eacute;grad&eacute; dans le menu
contextuel.
2 S&eacute;lectionnez des attributs dans l’inspecteur des propri&eacute;t&eacute;s.
3 Cliquez et faites glisser le pointeur pour d&eacute;finir le point de d&eacute;part du d&eacute;grad&eacute;, ainsi que la direction et la longueur
de la zone d&eacute;grad&eacute;e.
Correction de l’effet de bandes dans les d&eacute;grad&eacute;s
Cette option permet de corriger l’effet de bandes dans les d&eacute;grad&eacute;s. Vous pouvez uniquement appliquer un tramage
aux objets vectoriels contenant des d&eacute;grad&eacute;s lin&eacute;aires ou concentriques. Le tramage dispara&icirc;t lorsque vous importez le
fichier dans une version ant&eacute;rieure de Fireworks.
1 Dessinez un objet vectoriel et remplissez-le d’un d&eacute;grad&eacute; lin&eacute;aire ou concentrique.
2 Dans la bo&icirc;te de dialogue Options de remplissage, r&eacute;glez l’option Bord sur Anticr&eacute;nel&eacute;.
3 R&eacute;glez la texture sur 0 %.
4 S&eacute;lectionnez Tramage.
Transformation et distorsion des fonds
Vous pouvez d&eacute;placer, faire pivoter, incliner et modifier la largeur du d&eacute;grad&eacute; ou du motif d’un objet. Lorsque vous
utilisez l’outil Pointeur ou D&eacute;grad&eacute; pour s&eacute;lectionner un objet dot&eacute; d’un fond en d&eacute;grad&eacute; ou d’un fond &agrave; motifs, des
poign&eacute;es apparaissent autour ou &agrave; c&ocirc;t&eacute; de l’objet. Faites glisser les poign&eacute;es pour r&eacute;gler le fond de l’objet.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 127
Application de couleurs, de contours et de fonds
Utilisez les poign&eacute;es du fond pour ajuster de fa&ccedil;on interactive un fond en d&eacute;grad&eacute; ou un fond &agrave; motifs.
• Pour d&eacute;placer le fond dans un objet, faites glisser la poign&eacute;e arrondie, ou utilisez l’outil D&eacute;grad&eacute; pour cliquer &agrave; un
nouvel emplacement.
• Pour r&eacute;gler la largeur et l’inclinaison d’un fond, faites glisser une poign&eacute;e carr&eacute;e.
• Pour faire pivoter le fond, faites glisser les lignes qui relient les poign&eacute;es.
Pour faire pivoter un fond par incr&eacute;ments de 45 degr&eacute;s, maintenez la touche Maj enfonc&eacute;e tout en faisant glisser
les lignes.
Modification des bords des fonds
Les bords d’un fond peuvent &ecirc;tre nets et r&eacute;guliers comme ils peuvent &ecirc;tre adoucis par un lissage ou un contour
progressif.
Par d&eacute;faut, les bords sont liss&eacute;s. Le lissage permet d’obtenir un subtil fondu des bords dans l’arri&egrave;re-plan, afin d’adoucir
les bords dentel&eacute;s observ&eacute;s sur les objets arrondis (les ellipses et les cercles, par exemple).
La diffusion, quant &agrave; elle, produit une fusion perceptible de part et d’autre du bord. Il adoucit le bord, cr&eacute;ant ainsi un
effet proche de la lueur.
1 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Cliquez dans le menu contextuel Bord de l’inspecteur des propri&eacute;t&eacute;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&eacute;lectionnez une option de bord : Bord net, Lissage ou Contour progressif.
3 Pour le contour progressif, s&eacute;lectionnez le nombre de pixels (compris entre 0 et 100) applicable de part et d’autre
du bord &agrave; rendre progressif. La valeur par d&eacute;faut est 10. Plus ce nombre est &eacute;lev&eacute;, plus le contour progressif est
marqu&eacute;.
Enregistrement d’un fond en d&eacute;grad&eacute; personnalis&eacute;
❖ Pour enregistrer les param&egrave;tres de d&eacute;grad&eacute; actuels sous la forme d’un d&eacute;grad&eacute; personnalis&eacute; &agrave; r&eacute;utiliser dans
plusieurs documents, cr&eacute;ez un style.
Suppression d’un fond d’un objet s&eacute;lectionn&eacute;
Proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Dans le menu contextuel Options de fond de l’inspecteur des propri&eacute;t&eacute;s ou dans la fen&ecirc;tre contextuelle Options de
fond, s&eacute;lectionnez Aucune.
Derni&egrave;re mise &agrave; 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&eacute;, 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&eacute;t&eacute;s ou de la fen&ecirc;tre contextuelle Options de contour pour ajouter une texture &agrave; un trait
de pinceau.
Ajout d’une texture &agrave; un contour ou &agrave; un fond
1 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Cliquez sur le menu contextuel Texture du contour ou Texture du fond dans l’inspecteur des propri&eacute;t&eacute;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&eacute;dez de l’une des mani&egrave;res suivantes :
• Dans le menu contextuel, s&eacute;lectionnez une texture.
• Dans le menu contextuel, s&eacute;lectionnez l’option Autre, puis ouvrez un fichier de texture.
Remarque : vous pouvez appliquer des textures &agrave; des fichiers aux formats suivants : PNG, GIF, JPEG, BMP, TIFF
et PICT (Mac OS uniquement).
3 Entrez un pourcentage compris entre 0 (intensit&eacute; la plus faible) et 100 (intensit&eacute; la plus &eacute;lev&eacute;e) afin de d&eacute;finir la
profondeur de la texture.
4 (Fonds uniquement) Pour donner un effet de transparence au fond, s&eacute;lectionnez Transparent.
Ajout d’une texture personnalis&eacute;e
❖ Utilisez comme textures des fichiers bitmap de Fireworks et d’autres applications. Vous pouvez appliquer des
textures &agrave; partir de fichiers aux formats suivants : PNG, GIF, JPEG, BMP, TIFF et PICT (Mac OS uniquement).
Cr&eacute;ation d’une nouvelle texture &agrave; partir d’un fichier externe
1 Affichez les propri&eacute;t&eacute;s de l’objet vectoriel dans l’inspecteur des propri&eacute;t&eacute;s, puis s&eacute;lectionnez Autre dans l’un des
menus contextuels Nom de la texture.
2 Acc&eacute;dez au fichier bitmap &agrave; utiliser comme nouvelle texture, puis cliquez sur Ouvrir.
Derni&egrave;re mise &agrave; jour le 29/4/2010
Chapitre 9 : Utilisation des filtres
dynamiques
Application de filtres dynamiques
Les filtres dynamiques d’Adobe&reg; Fireworks&reg; (pr&eacute;c&eacute;demment appel&eacute;s effets dynamiques) sont des am&eacute;liorations que
vous pouvez appliquer &agrave; des objets vectoriels, des images bitmap et du texte. Les filtres dynamiques incluent le
biseautage, l’estampage, les ombres unies, les ombres port&eacute;es, les lueurs, la correction colorim&eacute;trique, l’att&eacute;nuation et
l’accentuation. Vous pouvez appliquer des filtres dynamiques &agrave; des objets s&eacute;lectionn&eacute;s directement dans l’inspecteur
des propri&eacute;t&eacute;s.
A propos des filtres dynamiques
Fireworks met &agrave; jour les filtres dynamiques lorsque vous modifiez des objets auxquels ils sont appliqu&eacute;s. Apr&egrave;s avoir
appliqu&eacute; un filtre dynamique, vous pouvez changer ses options &agrave; tout moment ou changer l’ordre des filtres pour tester
un filtre combin&eacute;. Vous pouvez activer ou d&eacute;sactiver des filtres dynamiques ou les supprimer dans l’inspecteur des
propri&eacute;t&eacute;s. Lorsque vous supprimez un filtre, l’objet ou l’image reprend son aspect pr&eacute;c&eacute;dent.
Menu contextuel Filtres dynamiques dans l’inspecteur des propri&eacute;t&eacute;s
• Certains filtres (Niveaux automatiques, Flou gaussien ou Accentuation par exemple), qui &eacute;taient des filtres ou
modules externes irr&eacute;versibles, sont d&eacute;sormais disponibles en tant que filtres dynamiques Fireworks.
• Vous pouvez ajouter des modules externes tiers &agrave; utiliser comme filtres dynamiques dans Fireworks ou utiliser ces
filtres de mani&egrave;re traditionnelle depuis le menu Filtres.
• Lorsque l’inspecteur des propri&eacute;t&eacute;s est affich&eacute; &agrave; 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&eacute;e dans la case Couleur de fond du
panneau Outils.
• Pour personnaliser des filtres dynamiques, essayez plusieurs param&egrave;tres jusqu’&agrave; obtenir le r&eacute;sultat souhait&eacute;.
129
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 130
Utilisation des filtres dynamiques
C
A
D
E
B
Fen&ecirc;tre du menu contextuel Biseau int&eacute;rieur
A. Largeur du biseau B. Biseau pr&eacute;d&eacute;fini de bouton C. Contraste D. Adoucissement E. Angle du biseau
Application de filtres dynamiques
Application d’un filtre dynamique aux objets s&eacute;lectionn&eacute;s
1 Cliquez sur l’ic&ocirc;ne plus (+) en regard de l’&eacute;tiquette Filtres dans l’inspecteur des propri&eacute;t&eacute;s, puis choisissez un filtre
dans le menu contextuel Ajouter des filtres dynamiques.
Le filtre est ajout&eacute; &agrave; la liste Filtres dynamiques pour l’objet s&eacute;lectionn&eacute;.
Pour appliquer un filtre dynamique de fa&ccedil;on &agrave; ce qu’il n’affecte qu’une s&eacute;lection de pixels dans une image, coupez
et collez la s&eacute;lection au lieu de cr&eacute;er une image bitmap, s&eacute;lectionnez-la, puis appliquez le filtre dynamique.
2 Si un menu contextuel ou une bo&icirc;te de dialogue appara&icirc;t, entrez les param&egrave;tres du filtre, puis proc&eacute;dez de l’une des
mani&egrave;res suivantes :
• Si le filtre dynamique a une bo&icirc;te de dialogue, cliquez sur OK.
• Si le filtre dynamique comporte un menu contextuel, appuyez sur la touche Entr&eacute;e ou cliquez n’importe o&ugrave; dans
l’espace de travail.
3 R&eacute;p&eacute;tez les &eacute;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&eacute;sactivation d’un filtre dynamique appliqu&eacute; &agrave; un objet
❖ Cochez la case situ&eacute;e en regard du filtre dans la liste Filtres dans l’inspecteur des propri&eacute;t&eacute;s.
Activation ou d&eacute;sactivation de tous les filtres dynamiques appliqu&eacute;s &agrave; un objet
❖ Cliquez sur l’ic&ocirc;ne plus (+) en regard de l’&eacute;tiquette Filtres dans l’inspecteur des propri&eacute;t&eacute;s, puis choisissez
Options &gt; Tous actifs ou Options &gt; Tous inactifs dans le menu contextuel.
Enregistrement d’effets appliqu&eacute;s
❖ Apr&egrave;s avoir ajout&eacute; ou modifi&eacute; un filtre dynamique, cliquez en dehors du menu contextuel de param&egrave;tres ou
appuyez sur la touche Entr&eacute;e.
Application de bords biseaut&eacute;s
Un bord biseaut&eacute; donne un effet de relief &agrave; un objet.
Derni&egrave;re mise &agrave; 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&ocirc;ne plus (+) en regard de l’&eacute;tiquette Filtres dans l’inspecteur des propri&eacute;t&eacute;s, puis choisissez une
option de biseau dans le menu contextuel.
2 Dans le menu contextuel, modifiez les param&egrave;tres du filtre.
Estampage
Le filtre dynamique Estampage donne l’impression qu’une image, un objet ou un texte est rapport&eacute; ou en relief sur la
zone de travail.
Objet avec estampe rapport&eacute;e et en relief
1 Cliquez sur l’ic&ocirc;ne plus (+) en regard de l’&eacute;tiquette Filtres dans l’inspecteur des propri&eacute;t&eacute;s, puis choisissez une
option d’estampage dans le menu contextuel.
2 Modifiez les param&egrave;tres du filtre.
Si vous voulez que l’objet d’origine s’affiche dans la zone estamp&eacute;e, s&eacute;lectionnez Afficher l’objet.
Remarque : par soucis de r&eacute;trocompatibilit&eacute; avec les documents plus anciens, l’option Afficher l’objet est d&eacute;sactiv&eacute;e
pour les objets auxquels des filtres dynamiques d’estampage sont appliqu&eacute;s.
Application d’ombres et de lueurs
Choisissez parmi une s&eacute;lection d’ombres, puis indiquez l’angle de l’ombre pour simuler un effet de lumi&egrave;re sur l’objet.
Filtres Ombre port&eacute;e, Ombre interne et Lueur
Param&egrave;tres des filtres pour les ombres
Les options disponibles varient selon le type d’ombre choisi.
• Faites glisser le curseur Angle pour d&eacute;finir la direction de l’ombre.
• Faites glisser le curseur Distance pour d&eacute;finir la distance entre l’ombre et l’objet.
• S&eacute;lectionnez l’option Couleur unie pour appliquer une couleur unie &agrave; l’ombre.
• Pour d&eacute;finir la couleur de l’ombre, ouvrez le menu contextuel de s&eacute;lection des couleurs, puis choisissez la couleur
de l’ombre.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 132
Utilisation des filtres dynamiques
• Faites glisser le curseur Opacit&eacute; pour d&eacute;finir le pourcentage de transparence de l’ombre.
• Faites glisser le curseur Adoucissement pour d&eacute;finir la nettet&eacute; de l’ombre.
• Cliquez sur l’option Aper&ccedil;u pour obtenir un aper&ccedil;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&eacute;t&eacute;s, cliquez sur l’ic&ocirc;ne plus (+) en regard de l’&eacute;tiquette Filtres, pointez le curseur sur
Ombre et lueur, puis cliquez sur Ombre unie.
2 Dans la bo&icirc;te de dialogue Ombre unie, r&eacute;glez les param&egrave;tres du filtre.
3 Lorsque vous avez termin&eacute;, cliquez sur OK.
Application d’une ombre port&eacute;e ou d’une ombre interne
1 Cliquez sur l’ic&ocirc;ne plus (+) en regard de l’&eacute;tiquette Filtres dans l’inspecteur des propri&eacute;t&eacute;s, puis choisissez une
option d’ombre dans le menu contextuel.
• Ombre et lueur &gt; Ombre port&eacute;e.
• Ombre et lueur &gt; Ombre interne.
2 Dans le menu contextuel, modifiez les param&egrave;tres du filtre.
Application d’une lueur
1 Cliquez sur le bouton Ajouter des filtres dynamiques dans l’inspecteur des propri&eacute;t&eacute;s, puis choisissez Ombre et
lueur &gt; Lueur.
2 Dans le menu contextuel, modifiez les param&egrave;tres du filtre :
• Cliquez sur la case de couleur pour d&eacute;finir la couleur de la lueur.
• Faites glisser le curseur Largeur pour d&eacute;finir le rayonnement de la lueur.
• Faites glisser le curseur Opacit&eacute; pour d&eacute;finir le pourcentage de transparence de la lueur.
• Faites glisser le curseur Adoucissement pour d&eacute;finir la nettet&eacute; de la lueur.
• Faites glisser le curseur D&eacute;calage pour d&eacute;finir la distance qui s&eacute;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&eacute;rieures de Fireworks a &eacute;t&eacute; renomm&eacute; le menu Filtres dans Fireworks 8
et versions ult&eacute;rieures. Les extensions Xtra de Fireworks sont maintenant appel&eacute;es des filtres.
L’application des modules externes et filtres int&eacute;gr&eacute;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&reg; uniquement si vous &ecirc;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&eacute;t&eacute;s, cliquez sur le bouton Ajouter des filtres, puis choisissez Options &gt; Rechercher les
modules externes.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 133
Utilisation des filtres dynamiques
2 Ouvrez le dossier dans lequel sont install&eacute;s les modules externes Photoshop, puis cliquez sur OK.
3 Relancez Fireworks pour charger les modules externes.
Remarque : si vous d&eacute;placez les modules externes vers un autre dossier, recommencez la proc&eacute;dure ou choisissez la
commande Edition &gt; Pr&eacute;f&eacute;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 &agrave; un objet s&eacute;lectionn&eacute;, dans l’inspecteur des propri&eacute;t&eacute;s, cliquez sur
l’ic&ocirc;ne plus (+) en regard de l’&eacute;tiquette Filtres, puis s&eacute;lectionnez un filtre dans le sous-menu Options.
Application d’effets de calques Photoshop
Remarque : si vous importez un fichier PSD, vous pouvez &eacute;galement modifier les effets de calques qui existent d&eacute;j&agrave; dans
ce fichier.
1 Dans l’inspecteur des propri&eacute;t&eacute;s, cliquez sur le bouton Ajouter des filtres, puis s&eacute;lectionnez Effets dynamiques
Photoshop.
2 Dans le volet gauche, s&eacute;lectionnez l’un des effets, puis modifiez les param&egrave;tres dans le volet droit. Vous pouvez
s&eacute;lectionner plusieurs effets &agrave; la fois.
Application de filtres &agrave; des objets associ&eacute;s
Lorsque vous appliquez un filtre &agrave; un groupe, il est appliqu&eacute; &agrave; tous les objets du groupe. Si les objets sont dissoci&eacute;s, ils
retrouvent leurs param&egrave;tres de filtre d’origine.
Pour appliquer isol&eacute;ment un filtre &agrave; un objet d’un groupe, s&eacute;lectionnez uniquement cet objet &agrave; l’aide de l’outil Souss&eacute;lection.
Modification et personnalisation des filtres dynamiques
Modification des param&egrave;tres de filtre
1 Dans l’inspecteur des propri&eacute;t&eacute;s, cliquez sur le bouton d’information situ&eacute; en regard du filtre &agrave; modifier.
2 R&eacute;glez les param&egrave;tres du filtre.
Les filtres que vous ne pouvez pas modifier sont gris&eacute;s.
3 Cliquez hors de la fen&ecirc;tre ou appuyez sur la touche Entr&eacute;e.
R&eacute;organisation ou suppression de filtres dynamiques
R&eacute;organisation des filtres dynamiques
Vous pouvez changer l’ordre des filtres appliqu&eacute;s &agrave; un objet. La r&eacute;organisation des filtres modifie la s&eacute;quence
d’application de ces derniers, ce qui peut entra&icirc;ner des modifications du filtre combin&eacute;. Les filtres figurant en haut de
la liste sont appliqu&eacute;s les premiers.
En g&eacute;n&eacute;ral, les filtres qui modifient l’int&eacute;rieur d’un objet, tels que le filtre Biseau interne, doivent &ecirc;tre appliqu&eacute;s avant
les filtres qui en changent l’ext&eacute;rieur. Par exemple, appliquez le filtre Biseau interne avant le filtre Biseau externe, Lueur
ou Ombre.
❖ Pour r&eacute;organiser les filtres, dans l’inspecteur des propri&eacute;t&eacute;s, faites glisser un filtre vers un autre emplacement dans
la liste.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 134
Utilisation des filtres dynamiques
Suppression d’un seul filtre appliqu&eacute; &agrave; un objet s&eacute;lectionn&eacute;
❖ S&eacute;lectionnez le filtre &agrave; supprimer de la liste Filtres dans l’inspecteur des propri&eacute;t&eacute;s, puis cliquez sur le bouton
Supprimer les filtres dynamiques.
Suppression de tous les filtres d’un objet s&eacute;lectionn&eacute;
❖ Dans l’inspecteur des propri&eacute;t&eacute;s, cliquez sur l’ic&ocirc;ne plus (+) en regard de l’&eacute;tiquette Filtres, puis choisissez Aucun
dans le menu contextuel.
Cr&eacute;ation de filtres dynamiques personnalis&eacute;s
Les filtres dynamiques personnalis&eacute;s sont des styles dont les options de propri&eacute;t&eacute; sont toutes d&eacute;sactiv&eacute;es, &agrave; l’exception
de l’option Filtre. Pour enregistrer une combinaison particuli&egrave;re de param&egrave;tres de filtres dynamiques, cr&eacute;ez un filtre
dynamique personnalis&eacute;.
Cr&eacute;ation d’un filtre dynamique personnalis&eacute; &agrave; l’aide du panneau Styles
1 Appliquez des param&egrave;tres de filtre dynamique aux objets s&eacute;lectionn&eacute;s. Pour plus d’informations, reportez-vous &agrave;
la section &laquo; Application de filtres dynamiques &raquo; &agrave; la page 129.
2 Dans le menu Options du panneau Styles, s&eacute;lectionnez Nouveau style.
3 D&eacute;s&eacute;lectionnez toutes les propri&eacute;t&eacute;s (sauf la propri&eacute;t&eacute; Effet) tapez un nom, puis cliquez sur OK.
Une ic&ocirc;ne de style repr&eacute;sentant le filtre dynamique est ajout&eacute;e au panneau Styles.
Remarque : si vous s&eacute;lectionnez des propri&eacute;t&eacute;s suppl&eacute;mentaires dans la bo&icirc;te de dialogue Nouveau style, le style ne
figure plus dans le menu contextuel Ajouter des filtres dynamiques de l’inspecteur des propri&eacute;t&eacute;s, bien qu’il reste dans
le panneau Styles sous la forme d’un style type.
Application d’un filtre dynamique personnalis&eacute; aux objets s&eacute;lectionn&eacute;s
❖ Cliquez sur l’ic&ocirc;ne du filtre dynamique personnalis&eacute; dans le panneau Styles.
Vous pouvez renommer ou supprimer un filtre dynamique personnalis&eacute; 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&eacute;utiliser un filtre, cr&eacute;ez une commande &agrave; partir de ce dernier. Vous pouvez utiliser cette
commande dans un traitement par lots.
1 Appliquez les filtres &agrave; l’objet.
2 Si le panneau Historique n’est pas visible, choisissez Fen&ecirc;tre &gt; Historique.
3 Tout en maintenant la touche Maj enfonc&eacute;e, cliquez sur les actions &agrave; enregistrer sous la forme d’une commande.
4 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Dans le menu Options du panneau Historique, cliquez sur Enregistrer en tant que commande.
• Cliquez sur le bouton Enregistrer situ&eacute; en bas du panneau Historique.
5 Entrez un nom de commande, puis cliquez sur OK pour l’ajouter au menu Commandes.
Derni&egrave;re mise &agrave; jour le 29/4/2010
Chapitre 10 : Calques, masques et fondus
Les calques divisent les documents Adobe&reg; Fireworks&reg; en plusieurs plans discrets, donnant l’impression que les
composants de l’illustration sont dessin&eacute;s sur diff&eacute;rentes couches de papier superpos&eacute;es. Un document peut &ecirc;tre
compos&eacute; de diff&eacute;rents calques, chacun contenant de nombreux sous-calques ou objets. Les calques Fireworks sont
l’&eacute;quivalent des ensembles de calques utilis&eacute;s dans Adobe Photoshop&reg;. Les calques Photoshop sont l’&eacute;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&eacute;es &agrave; l’ext&eacute;rieur de l’ellipse sont alors
masqu&eacute;es, et seule reste visible la partie de l’image situ&eacute;e &agrave; l’int&eacute;rieur de l’ellipse.
Les modes de fusion vous offrent un autre niveau de cr&eacute;ativit&eacute;. Vous pouvez cr&eacute;er des effets uniques en m&eacute;langeant les
couleurs d’objets qui se chevauchent. Fireworks compte plusieurs modes de fusion qui vous permettent d’obtenir les
effets souhait&eacute;s.
Calques
Chaque objet d’un document est plac&eacute; sur un calque. Vous pouvez cr&eacute;er des calques avant de commencer &agrave; dessiner
ou en ajouter au fur et &agrave; mesure de vos besoins. La zone de travail est situ&eacute;e sous tous les calques et n’est pas un calque
en soi.
Le panneau Calques affiche l’&eacute;tat actuel de tous les calques de l’&eacute;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&eacute;termine la mani&egrave;re dont les objets d’un calque se superposent aux objets d’un autre. Fireworks place le calque le
plus r&eacute;cent en haut de la pile. Vous pouvez modifier l’ordre des calques et des objets &agrave; l’int&eacute;rieur des calques. Vous
pouvez &eacute;galement cr&eacute;er des sous-calques et d&eacute;placer les objets qui s’y trouvent.
Le panneau Calques affiche &eacute;galement les masques, les commandes d’opacit&eacute; et les modes de fusion.
135
UTILISATION DE FIREWORKS CS5 136
Derni&egrave;re mise &agrave; jour le 29/4/2010
A
Calques, masques et fondus
D
B
C
E
F G H I
A. D&eacute;velopper/R&eacute;duire le calque B. Verrouiller/D&eacute;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&eacute;dez de l’une des mani&egrave;res suivantes :
• Dans le panneau Calques, cliquez sur le nom d’un calque.
• S&eacute;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&eacute;r&eacute; au-dessus du calque s&eacute;lectionn&eacute; et devient alors le calque actif.
❖ Proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Cliquez sur le bouton Nouveau calque/Dupliquer
.
• Choisissez Edition &gt; Insertion &gt; 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&eacute; devient le calque actif. Si le calque supprim&eacute; est le dernier, un nouveau calque
vide est cr&eacute;&eacute;.
❖ Proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Faites glisser le calque jusqu’&agrave; l’ic&ocirc;ne de la corbeille
dans le panneau Calques.
• S&eacute;lectionnez le calque, puis cliquez sur l’ic&ocirc;ne de la corbeille dans le panneau Calques.
• S&eacute;lectionnez un calque, puis choisissez Supprimer le calque dans le menu Options du panneau Calques ou dans
le menu contextuel.
Derni&egrave;re mise &agrave; 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 &eacute;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&eacute; contient les m&ecirc;mes objets que le calque s&eacute;lectionn&eacute;. Les objets dupliqu&eacute;s conservent l’opacit&eacute; et le
mode de fusion des objets d’origine. Vous pouvez modifier les objets dupliqu&eacute;s sans agir sur les originaux.
❖ Proc&eacute;dez de l’une des mani&egrave;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&eacute;lectionnez un calque, puis
choisissez Dupliquer le calque. S&eacute;lectionnez ensuite le nombre de calques dupliqu&eacute;s &agrave; ins&eacute;rer, ainsi que leur
emplacement dans l’ordre d’empilage. Le calque Web est toujours le calque sup&eacute;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&eacute;e.
Duplication d’un objet
❖ Faites glisser un objet tout en maintenant la touche Alt (Windows) ou Option (Mac OS) enfonc&eacute;e.
D&eacute;veloppement ou r&eacute;duction des calques
Vous pouvez r&eacute;duire l’affichage des calques pour &eacute;viter d’encombrer le panneau Calques. D&eacute;veloppez le calque pour
afficher ou s&eacute;lectionner ses objets.
• Pour d&eacute;velopper ou r&eacute;duire un seul calque, cliquez sur le triangle situ&eacute; &agrave; gauche de son nom.
• Pour d&eacute;velopper ou r&eacute;duire tous les calques, cliquez sur le triangle situ&eacute; &agrave; gauche du nom d’un calque tout en
maintenant la touche Alt (Windows) ou Option (Mac OS) enfonc&eacute;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 &ecirc;tre d&eacute;plac&eacute;s au sein d’un m&ecirc;me calque ou d’un calque &agrave; l’autre.
Le d&eacute;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&eacute;s en haut d’un calque s’affichent au-dessus des autres objets de ce calque sur la zone de travail.
Les objets situ&eacute;s sur le calque de niveau sup&eacute;rieur s’affichent devant les objets des calques de niveau inf&eacute;rieur.
Remarque : le panneau Calques d&eacute;file automatiquement lorsque vous faites glisser un calque ou un objet au-del&agrave; de la
limite sup&eacute;rieure ou inf&eacute;rieure de la zone visible.
Attribution d’un nom &agrave; 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&eacute;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&eacute;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&egrave;re mise &agrave; jour le 29/4/2010
Calques, masques et fondus
D&eacute;placement de tous les objets s&eacute;lectionn&eacute;s sur un calque
❖ Proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Faites glisser le bouton radio situ&eacute; 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&eacute;ger en emp&ecirc;chant qu’il soit s&eacute;lectionn&eacute; ou modifi&eacute;. Le
verrouillage d’un calque prot&egrave;ge tous les objets qui le composent. Une ic&ocirc;ne de cadenas
signale un &eacute;l&eacute;ment
verrouill&eacute;. La fonction Modification par calque prot&egrave;ge les objets de tous les calques contre la s&eacute;lection ou les
modifications intempestives, mais pas ceux du calque actif et des sous-calques. Vous pouvez &eacute;galement masquer des
objets et des calques pour les prot&eacute;ger.
Remarque : les calques et objets masqu&eacute;s d’un document ne sont pas export&eacute;s avec celui-ci. Les objets du calque Web
peuvent &ecirc;tre export&eacute;s dans tous les cas, qu’ils soient masqu&eacute;s ou non. Pour plus d’informations sur l’exportation, reportezvous &agrave; la section &laquo; Exportation depuis l’espace de travail &raquo; &agrave; la page 253.
Verrouillage des objets et des calques
• Pour verrouiller un objet, cliquez sur le carr&eacute; dans la colonne situ&eacute;e imm&eacute;diatement &agrave; gauche du nom de l’objet.
• Pour verrouiller un calque, cliquez sur le carr&eacute; dans la colonne situ&eacute;e imm&eacute;diatement &agrave; 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&eacute;verrouiller tous les calques, dans le menu Options du panneau Calques ou dans le menu
contextuel, s&eacute;lectionnez Tout verrouiller ou Tout d&eacute;verrouiller.
Activation ou d&eacute;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&eacute;sence d’une coche signifie que la fonction Modification par calque est activ&eacute;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&eacute; dans la colonne situ&eacute;e la plus &agrave;
gauche du nom d’un calque ou d’un objet. L’ic&ocirc;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&eacute;lectionnez Afficher tout ou Masquer tout.
Masquage ou verrouillage des autres calques
Vous pouvez masquer ou verrouiller tous les calques &agrave; l’exception du calque actif, pour modifier de fa&ccedil;on pr&eacute;cise un
logo ou une ic&ocirc;ne.
1 Dans le panneau Calques, s&eacute;lectionnez le calque sur lequel vous souhaitez travailler.
2 S&eacute;lectionnez Commandes &gt; Document &gt; Masquage des autres calques ou Commandes &gt; Document &gt; Verrouiller
autres calques.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 139
Calques, masques et fondus
Fusion des objets dans le panneau Calques
Pour &eacute;viter d’encombrer le panneau Calques, vous pouvez fusionner des objets. Les images bitmap et les objets &agrave;
fusionner ne doivent pas n&eacute;cessairement &ecirc;tre contigus dans le panneau Calques ou se trouver sur le m&ecirc;me calque.
La fusion vers le bas permet d’aplatir tous les objets vectoriels et bitmap s&eacute;lectionn&eacute;s avec l’objet bitmap qui se trouve
juste au-dessous de l’objet s&eacute;lectionn&eacute; tout au bas de la pile. Vous obtenez un seul objet bitmap. Les objets vectoriels
et bitmap fusionn&eacute;s ne peuvent plus &ecirc;tre modifi&eacute;s s&eacute;par&eacute;ment, et les possibilit&eacute;s de modification des objets vectoriels
sont perdues.
1 Dans le panneau Calques, s&eacute;lectionnez l’objet &agrave; fusionner avec un objet bitmap. Tout en maintenant la touche Maj
ou Contr&ocirc;le enfonc&eacute;e, cliquez sur les objets pour en s&eacute;lectionner plusieurs.
Vous pouvez fusionner le contenu d’un calque s&eacute;lectionn&eacute; avec un objet bitmap correspondant &agrave; l’objet le plus haut
dans le calque situ&eacute; imm&eacute;diatement sous le calque s&eacute;lectionn&eacute;.
2 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Dans le menu Options du panneau Calques, cliquez sur Fusionner vers le bas.
• Choisissez Modification &gt; Fusionner vers le bas.
• Cliquez avec le bouton droit de la souris (Windows) ou tout en maintenant la touche Ctrl enfonc&eacute;e (Mac OS)
sur les objets s&eacute;lectionn&eacute;s sur la zone de travail, puis s&eacute;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’&eacute;viter tout
encombrement. Vous cr&eacute;ez ainsi des calques situ&eacute;s au m&ecirc;me niveau que celui du calque parent. Ces calques cr&eacute;&eacute;s
conservent &eacute;galement la hi&eacute;rarchie des calques. La distribution des objets encombrants vers d’autres calques permet
de mieux manipuler ces objets.
1 S&eacute;lectionnez le calque comprenant les objets &agrave; distribuer.
2 S&eacute;lectionnez Commandes &gt; Document &gt; R&eacute;partir dans les calques.
Partage des calques
Lorsque diff&eacute;rentes pages ou diff&eacute;rents &eacute;tats se partagent un calque, la modification apport&eacute;e &agrave; un objet sur un calque
se r&eacute;percute sur toutes les pages ou dans tous les &eacute;tats. Partagez des calques si vous voulez que des objets, tels que des
&eacute;l&eacute;ments d’arri&egrave;re-plan, s’affichent sur toutes les pages d’un site Web ou dans tous les &eacute;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&eacute;lectionner le calque parent.
Partage du calque s&eacute;lectionn&eacute; entre plusieurs &eacute;tats
❖ Proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Dans le menu Options du panneau Calques ou dans le menu contextuel, s&eacute;lectionnez Calque partag&eacute; vers les
&eacute;tats.
• S&eacute;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 &eacute;tats.
Une ic&ocirc;ne de film s’affiche en regard du calque partag&eacute; entre plusieurs &eacute;tats dans le panneau Calques.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 140
Calques, masques et fondus
Partage du calque s&eacute;lectionn&eacute; entre plusieurs pages
❖ Dans le menu Options du panneau Calques ou dans le menu contextuel, s&eacute;lectionnez Calque partag&eacute; vers pages.
Une ic&ocirc;ne de page s’affiche en regard du calque partag&eacute; entre plusieurs pages dans le panneau Calques.
D&eacute;sactivation du partage de calque
1 S&eacute;lectionnez le calque partag&eacute; et d&eacute;s&eacute;lectionnez l’option Partager dans tous les &eacute;tats dans le menu Options du
panneau Calques ou dans le menu contextuel.
2 Indiquez le proc&eacute;d&eacute; de copie des objets dans les &eacute;tats :
• Conservez le contenu du calque partag&eacute; uniquement dans l’&eacute;tat actif.
• Copiez le contenu du calque partag&eacute; dans tous les &eacute;tats.
Utilisation du calque Web
Le calque Web correspond au calque sup&eacute;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&eacute;s interactifs.
Il est impossible de d&eacute;partager, supprimer, dupliquer, d&eacute;placer ou renommer le calque Web. Vous ne pouvez pas non
plus fusionner les objets du calque Web. Il est toujours partag&eacute; sur tous les &eacute;tats d’une page et les objets Web sont
visibles sur chaque &eacute;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&ecirc;tre ou appuyez sur la touche Entr&eacute;e.
Remarque : le nouveau nom est utilis&eacute; &agrave; l’exportation de la tranche.
A propos de l’importation de calques associ&eacute;s Photoshop
Lorsque des fichiers Photoshop contenant des calques sont import&eacute;s, chaque calque est plac&eacute; en tant qu’objet s&eacute;par&eacute;
dans un m&ecirc;me calque de Fireworks. Les calques associ&eacute;s sont import&eacute;s un par un, comme s’ils avaient &eacute;t&eacute; dissoci&eacute;s
dans Photoshop avant d’&ecirc;tre import&eacute;s dans Fireworks. L’effet de d&eacute;tourage des calques associ&eacute;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&eacute;rentes techniques de masquage
permettant d’obtenir de nombreux types d’effets cr&eacute;atifs &agrave; partir d’objets.
Vous pouvez utiliser un masque comme un emporte-pi&egrave;ce pour recadrer ou d&eacute;tourer des objets ou images sousjacents. Certains masques produisent un effet de fen&ecirc;tre embu&eacute;e, r&eacute;v&eacute;lant ou bloquant des portions d’objets sousjacents.
Vous pouvez cr&eacute;er un objet masque &agrave; partir d’un objet vectoriel (masque vectoriel) ou d’un objet bitmap (masque
bitmap). Vous pouvez &eacute;galement utiliser plusieurs objets ou des objets associ&eacute;s pour cr&eacute;er un masque, et m&ecirc;me utiliser
du texte (pour cr&eacute;er un masque vectoriel). Apr&egrave;s avoir cr&eacute;&eacute; un masque, vous pouvez ajuster la position de la s&eacute;lection
masqu&eacute;e sur la zone de travail ou modifier l’aspect du masque. Vous pouvez &eacute;galement appliquer des transformations
au masque en totalit&eacute; ou &agrave; chaque composant d’un masque.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 141
Calques, masques et fondus
A propos des masques vectoriels
Les masques vectoriels, parfois appel&eacute;s masques ou masques de trac&eacute; d’&eacute;cr&ecirc;tage, sont utilis&eacute;s dans les applications
d’illustration vectorielle. L’objet masque vectoriel recadre ou d&eacute;coupe les objets sous-jacents selon la forme de son
trac&eacute; pour cr&eacute;er un effet d’emporte-pi&egrave;ce.
Masque vectoriel appliqu&eacute; &agrave; l’aide du contour de son trac&eacute;
Lorsque vous cr&eacute;ez un masque vectoriel, une vignette de masque accompagn&eacute;e d’une ic&ocirc;ne en forme de crayon
appara&icirc;t dans le panneau Calques.
Vignette de masque vectoriel dans le panneau Calques
Lorsqu’un masque vectoriel est s&eacute;lectionn&eacute;, l’inspecteur des propri&eacute;t&eacute;s affiche des informations sur l’application du
masque. La partie inf&eacute;rieure de l’inspecteur des propri&eacute;t&eacute;s affiche des propri&eacute;t&eacute;s suppl&eacute;mentaires qui permettent de
modifier le contour ou le fond de l’objet masque.
Par d&eacute;faut, les masques vectoriels sont appliqu&eacute;s en utilisant le contour de leur trac&eacute;, mais vous pouvez &eacute;galement les
appliquer selon d’autres m&eacute;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&eacute; des objets sous-jacents.
Objets d’origine et masque bitmap appliqu&eacute; avec l’aspect de niveaux de gris
Vous pouvez appliquer des masques bitmap de deux mani&egrave;res :
• En utilisant un objet existant pour masquer d’autres objets. Cette technique est semblable &agrave; l’application d’un
masque vectoriel.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 142
Calques, masques et fondus
• En cr&eacute;ant un masque vide. Au d&eacute;but, les masques vides sont transparents ou opaques. Un masque transparent (ou
blanc) montre l’ensemble de l’objet masqu&eacute;, et un masque opaque (ou noir) cache l’ensemble de l’objet masqu&eacute;.
Vous pouvez utiliser les outils bitmap pour dessiner sur l’objet masque ou le modifier en r&eacute;v&eacute;lant ou en masquant
les objets sous-jacents.
Lorsque vous cr&eacute;ez un masque bitmap, l’inspecteur des propri&eacute;t&eacute;s affiche les informations sur l’application
du masque. Si vous s&eacute;lectionnez un outil bitmap lorsqu’un masque bitmap est s&eacute;lectionn&eacute;, l’inspecteur des
propri&eacute;t&eacute;s affiche les propri&eacute;t&eacute;s du masque et les options de l’outil s&eacute;lectionn&eacute;.
Par d&eacute;faut, la plupart des masques bitmap sont appliqu&eacute;s en utilisant leur aspect de niveaux de gris, mais vous
pouvez &eacute;galement les appliquer &agrave; l’aide de leur couche alpha.
Cr&eacute;ation d’un masque &agrave; partir d’un objet existant
Lorsque vous utilisez un objet vectoriel comme masque, vous pouvez recadrer ou d&eacute;tourer d’autres objets selon son
trac&eacute;. Lorsque vous utilisez un objet bitmap en tant masque, la luminosit&eacute; de ses pixels ou sa transparence affecte la
visibilit&eacute; des autres objets.
Masquage d’objets &agrave; l’aide de la commande Coller en tant que masque
La commande Coller en tant que masque permet de cr&eacute;er des masques en superposant un objet ou un groupe d’objets
sur un autre objet. Le masque cr&eacute;&eacute; au moyen de cette commande est vectoriel ou bitmap.
1 S&eacute;lectionnez l’objet &agrave; utiliser comme masque. Tout en maintenant la touche Maj enfonc&eacute;e, cliquez sur les diff&eacute;rents
objets pour les s&eacute;lectionner.
Remarque : l’utilisation de plusieurs objets en tant que masque produit toujours un masque vectoriel, m&ecirc;me si les
deux objets sont de type bitmap.
2 Positionnez la s&eacute;lection de sorte qu’elle recouvre l’objet ou le groupe d’objets &agrave; masquer.
La s&eacute;lection peut se trouver devant ou derri&egrave;re les objets &agrave; masquer.
3 Choisissez Edition &gt; Couper pour couper les objets &agrave; utiliser comme masque.
4 S&eacute;lectionnez l’objet ou le groupe &agrave; masquer.
Si vous masquez plusieurs objets, ceux-ci doivent &ecirc;tre associ&eacute;s.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 143
Calques, masques et fondus
5 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Choisissez Edition &gt; Coller en tant que masque.
• Choisissez Modification &gt; Masque &gt; Coller en tant que masque.
Masque appliqu&eacute; &agrave; une image avec une zone de travail noire
Masquage d’objets &agrave; l’aide de la commande Coller dedans
Le masque cr&eacute;&eacute; est un masque vectoriel ou bitmap, selon le type d’objet masque utilis&eacute;. La commande Coller dedans
cr&eacute;e un masque en remplissant un trac&eacute; ferm&eacute; ou un objet bitmap avec d’autres objets : graphiques vectoriels, textes
ou images bitmap. Le trac&eacute; lui-m&ecirc;me est parfois appel&eacute; masque, et les &eacute;l&eacute;ments qu’il contient s’appellent des contenus
ou des collages int&eacute;rieurs. Le contenu qui s’&eacute;tend au-del&agrave; du masque est masqu&eacute;.
1 S&eacute;lectionnez l’objet ou les objets &agrave; utiliser comme contenu &agrave; 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&egrave;s lors que les objets &agrave; utiliser comme contenu &agrave; coller dedans
restent s&eacute;lectionn&eacute;s. Ces objets peuvent se trouver au-dessus ou en dessous de l’objet masque dans le panneau Calques.
3 Choisissez Edition &gt; Couper pour d&eacute;placer les objets dans le Presse-papiers.
4 S&eacute;lectionnez l’objet dans lequel coller le contenu. Cet objet sera utilis&eacute; comme masque (trac&eacute; d’&eacute;cr&ecirc;tage).
5 Choisissez Edition &gt; Coller dedans.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 144
Calques, masques et fondus
Les objets coll&eacute;s apparaissent dans l’objet masque ou sont d&eacute;tour&eacute;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&ecirc;me mani&egrave;re qu’un masque utilisant des
objets existants. Le texte constitue l’objet masque. La m&eacute;thode la plus courante pour appliquer un masque de texte
consiste &agrave; utiliser le contour de son trac&eacute;. Il est toutefois possible d’appliquer un masque de texte en utilisant son aspect
de niveaux de gris.
Masque de texte appliqu&eacute; &agrave; l’aide du contour de son trac&eacute;
Utilisation du masque vectoriel automatique
Les masques vectoriels automatiques appliquent des motifs pr&eacute;d&eacute;finis en tant que masques vectoriels sur des objets
bitmap et vectoriels. Vous pouvez modifier ult&eacute;rieurement l’aspect des masques vectoriels automatiques, ainsi que
leurs propri&eacute;t&eacute;s.
1 S&eacute;lectionnez les objets bitmap ou vectoriels.
2 S&eacute;lectionnez Commandes &gt; Cr&eacute;ation &gt; Masque vectoriel auto.
3 S&eacute;lectionnez le type de masque, puis cliquez sur Appliquer.
Masquage d’objets &agrave; l’aide du panneau Calques
La m&eacute;thode la plus rapide pour ajouter un masque bitmap transparent vide consiste &agrave; utiliser le panneau Calques. Le
panneau Calques ajoute un masque blanc &agrave; un objet que vous pouvez personnaliser en dessinant dessus avec les outils
bitmap.
1 S&eacute;lectionnez l’objet &agrave; masquer.
2 En bas du panneau Calques, cliquez sur le bouton Ajouter un masque.
Un masque vide est appliqu&eacute; &agrave; l’objet s&eacute;lectionn&eacute;. Le panneau Calques affiche une vignette de masque repr&eacute;sentant
le masque vide.
3 (Facultatif) Si l’objet masqu&eacute; est un objet bitmap, utilisez l’un des outils de cadre de s&eacute;lection ou de lasso pour cr&eacute;er
une s&eacute;lection de pixels.
4 Dans le panneau Outils, s&eacute;lectionnez un outil de dessin bitmap.
5 D&eacute;finissez les options de l’outil dans l’inspecteur des propri&eacute;t&eacute;s.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 145
Calques, masques et fondus
6 Le masque &eacute;tant s&eacute;lectionn&eacute;, dessinez sur le masque vide. Dans les zones o&ugrave; vous dessinez, l’objet masqu&eacute; sous-
jacent est masqu&eacute;.
Image avec masque appliqu&eacute;
Masque tel qu’il appara&icirc;t dans le panneau Calques
Masquage d’objets &agrave; l’aide des commandes de r&eacute;v&eacute;lation et de masquage
Le sous-menu Modification &gt; Masque contient plusieurs options permettant d’appliquer des masques bitmap vides
aux objets :
Tout r&eacute;v&eacute;ler Applique un masque transparent vide &agrave; un objet qui r&eacute;v&egrave;le la totalit&eacute; de l’objet. Cette commande revient
&agrave; cliquer sur le bouton Ajouter un masque dans le panneau Calques.
Tout masquer Applique un masque opaque vide &agrave; un objet qui cache la totalit&eacute; de l’objet.
R&eacute;v&eacute;ler la s&eacute;lection A utiliser exclusivement avec des s&eacute;lections de pixels, cette commande applique un masque de
pixels transparent en utilisant la s&eacute;lection de pixels actuelle. Les autres pixels de l’objet bitmap sont masqu&eacute;s. Cette
commande revient &agrave; s&eacute;lectionner des pixels puis &agrave; cliquer sur le bouton Ajouter un masque.
Masquer la s&eacute;lection A utiliser exclusivement avec des s&eacute;lections de pixels, cette commande applique un masque de
pixels opaque en utilisant la s&eacute;lection de pixels actuelle. Les autres pixels de l’objet bitmap sont visibles. Cette
commande revient &agrave; s&eacute;lectionner des pixels puis &agrave; cliquer sur le bouton Ajouter un masque tout en maintenant la
touche Alt (Windows) ou Option (Mac OS) enfonc&eacute;e.
Cr&eacute;ation d’un masque &agrave; l’aide des commandes Tout r&eacute;v&eacute;ler et Tout masquer
1 S&eacute;lectionnez l’objet &agrave; masquer.
2 Pour afficher l’objet, choisissez la commande Modification &gt; Masque &gt; Tout r&eacute;v&eacute;ler. Pour le masquer, choisissez
Modification &gt; Masque &gt; Tout masquer.
3 Dans le panneau Outils, s&eacute;lectionnez un outil de dessin bitmap.
4 D&eacute;finissez les options de l’outil dans l’inspecteur des propri&eacute;t&eacute;s.
Si vous avez ex&eacute;cut&eacute; la commande Tout masquer, vous devez s&eacute;lectionner une couleur autre que le noir.
5 Dessinez sur le masque vide. Dans les zones dans lesquelles vous dessinez, l’objet masqu&eacute; sous-jacent sera masqu&eacute;
ou visible, selon le type de masque que vous avez appliqu&eacute;.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 146
Calques, masques et fondus
Cr&eacute;ation d’un masque &agrave; l’aide des commandes R&eacute;v&eacute;ler la s&eacute;lection et Masquer la s&eacute;lection
1 Dans le panneau Outils, s&eacute;lectionnez l’outil Baguette magique ou un outil de s&eacute;lection ou de lasso.
2 S&eacute;lectionnez des pixels dans une image bitmap.
Image d’origine ; pixels s&eacute;lectionn&eacute;s &agrave; l’aide de la Baguette magique
3 Pour afficher la zone d&eacute;finie par la s&eacute;lection de pixels, choisissez la commande Modification &gt; Masque &gt; R&eacute;v&eacute;ler la
s&eacute;lection. Pour la masquer, choisissez Modification &gt; Masque &gt; Masquer la s&eacute;lection.
R&eacute;sultats des commandes R&eacute;v&eacute;ler la s&eacute;lection et Masquer la s&eacute;lection
Un masque bitmap est appliqu&eacute; &agrave; l’aide de la s&eacute;lection de pixels. Vous pouvez modifier davantage le masque pour
r&eacute;v&eacute;ler ou masquer les pixels restants de l’objet masqu&eacute; 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 &agrave; l’aide de masques de fusion ou de calques associ&eacute;s. Fireworks vous
permet d’importer des images employant des masques de calque tout en conservant la possibilit&eacute; de les modifier. Les
masques de fusion sont import&eacute;s sous forme de masques bitmap.
Les masques Fireworks peuvent &ecirc;tre &eacute;galement export&eacute;s vers Photoshop. Ils sont alors convertis en masques de fusion
Photoshop. Si les objets masqu&eacute;s contiennent du texte que vous souhaitez pouvoir continuer &agrave; modifier dans
Photoshop, vous devez s&eacute;lectionner Privil&eacute;gier le caract&egrave;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&eacute;
dans Photoshop.
Derni&egrave;re mise &agrave; 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&eacute;er un masque, l’objet sup&eacute;rieur devient l’objet masque. Le type de l’objet
sup&eacute;rieur d&eacute;termine le type du masque (vectoriel ou bitmap).
1 Tout en maintenant la touche Maj enfonc&eacute;e, cliquez sur au moins deux objets qui se chevauchent.
Vous pouvez s&eacute;lectionner les objets sur diff&eacute;rents calques.
2 Choisissez Modification &gt; Masque &gt; Associer comme masque.
S&eacute;lection et d&eacute;placement des masques
S&eacute;lection de masques et d’objets masqu&eacute;s &agrave; l’aide des vignettes de masques
Dans le panneau Calques, les vignettes vous permettent de s&eacute;lectionner et de modifier le masque ou les objets masqu&eacute;s
uniquement, sans affecter les autres objets.
Lorsque vous s&eacute;lectionnez la vignette du masque, l’ic&ocirc;ne de masque appara&icirc;t en regard de cette derni&egrave;re dans le
panneau Calques. L’inspecteur des propri&eacute;t&eacute;s affiche les propri&eacute;t&eacute;s du masque, quand vous pouvez les modifier.
• Pour s&eacute;lectionner un masque, dans le panneau Calques, cliquez sur la vignette du masque.
• Pour s&eacute;lectionner un objet masqu&eacute;, dans le panneau Calques, cliquez sur la vignette de l’objet masqu&eacute;.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 148
Calques, masques et fondus
S&eacute;lection de masques et d’objets masqu&eacute;s &agrave; l’aide de l’outil Sous-s&eacute;lection
Utilisez l’outil Sous-s&eacute;lection pour s&eacute;lectionner des masques et objets masqu&eacute;s individuels sur le document sans
s&eacute;lectionner les autres composants du masque. Les propri&eacute;t&eacute;s de l’objet s&eacute;lectionn&eacute; sont visibles dans l’inspecteur des
propri&eacute;t&eacute;s.
❖ Cliquez avec l’outil Sous-s&eacute;lection sur l’objet dans la zone de travail.
D&eacute;placement de masques et d’objets masqu&eacute;s
Vous pouvez repositionner les masques et les objets masqu&eacute;s. Vous pouvez les d&eacute;placer ensemble ou individuellement.
D&eacute;placement simultan&eacute; d’un masque et de ses objets masqu&eacute;s
1 A l’aide de l’outil Pointeur, s&eacute;lectionnez le masque sur la zone de travail.
2 Faites glisser le masque vers son nouvel emplacement sans tirer la poign&eacute;e de d&eacute;placement, &agrave; moins que vous ne
souhaitiez d&eacute;placer l’objet masqu&eacute; ind&eacute;pendamment du masque.
D&eacute;placement isol&eacute; de masques et d’objets masqu&eacute;s par rupture de leur lien
1 Dans le panneau Calques, cliquez sur l’ic&ocirc;ne de lien sur le masque.
Cette op&eacute;ration permet de dissocier les masques des objets masqu&eacute;s pour les d&eacute;placer ind&eacute;pendamment.
2 S&eacute;lectionnez la vignette d’un masque ou d’un objet masqu&eacute;.
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&eacute;s sont s&eacute;lectionn&eacute;s, ils se d&eacute;placent tous simultan&eacute;ment.
4 Pour r&eacute;tablir le lien entre les objets masqu&eacute;s et le masque, cliquez entre les vignettes de masque dans le
panneau Calques.
D&eacute;placement isol&eacute; d’un masque &agrave; l’aide de sa poign&eacute;e de d&eacute;placement
1 A l’aide de l’outil Pointeur, s&eacute;lectionnez le masque sur la zone de travail.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 149
Calques, masques et fondus
2 S&eacute;lectionnez l’outil Sous-s&eacute;lection, puis faites glisser la poign&eacute;e de d&eacute;placement du masque vers le nouvel
emplacement.
D&eacute;placement d’objets masqu&eacute;s ind&eacute;pendamment du masque &agrave; l’aide de la poign&eacute;e de d&eacute;placement
1 A l’aide de l’outil Pointeur, s&eacute;lectionnez le masque sur la zone de travail.
2 Faites glisser la poign&eacute;e de d&eacute;placement vers le nouvel emplacement.
Les objets sont d&eacute;plac&eacute;s sans modifier la position du masque.
Remarque : s’il existe plusieurs objets masqu&eacute;s, tous les objets masqu&eacute;s se d&eacute;placent simultan&eacute;ment.
D&eacute;placement d’objets masqu&eacute;s ind&eacute;pendamment les uns des autres
❖ Cliquez avec le pointeur de l’outil Sous-s&eacute;lection sur l’objet pour le s&eacute;lectionner, puis faites-le glisser.
C’est la seule m&eacute;thode permettant de s&eacute;lectionner et de d&eacute;placer un objet masqu&eacute; sans affecter les autres objets
masqu&eacute;s.
Modification des masques
En modifiant la position, la forme et la couleur d’un masque, vous pouvez changer la visibilit&eacute; des objets masqu&eacute;s.
Vous pouvez &eacute;galement changer le type d’un masque et son application. En outre, les masques peuvent &ecirc;tre remplac&eacute;s,
d&eacute;sactiv&eacute;s ou supprim&eacute;s. Lorsque vous modifiez un masque, les r&eacute;sultats sont imm&eacute;diatement visibles sur sa vignette
dans le panneau Calques, m&ecirc;me si l’objet masque lui-m&ecirc;me n’est pas visible sur la zone de travail.
Les objets masqu&eacute;s peuvent &eacute;galement &ecirc;tre modifi&eacute;s. Vous pouvez r&eacute;organiser les objets masqu&eacute;s sans d&eacute;placer le
masque. Vous pouvez &eacute;galement ajouter des objets masqu&eacute;s &agrave; un groupe de masques existant.
Modification de la forme d’un masque s&eacute;lectionn&eacute;
❖ Proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Dessinez sur le masque bitmap avec n’importe quel outil de dessin bitmap.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 150
Calques, masques et fondus
• A l’aide de l’outil Sous-s&eacute;lection, d&eacute;placez les points d’un objet masque vectoriel.
Modification de la couleur d’un masque s&eacute;lectionn&eacute;
• 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&eacute;s, et des couleurs sombres pour les cacher.
Ajout d’objets masques suppl&eacute;mentaires &agrave; un masque
1 Choisissez Edition &gt; Couper pour couper l’objet ou les objets s&eacute;lectionn&eacute;s &agrave; ajouter.
2 Dans le panneau Calques, s&eacute;lectionnez la vignette de l’objet masqu&eacute;.
3 Choisissez Edition &gt; 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 &agrave; l’aide des outils de transformation
1 A l’aide de l’outil Pointeur, s&eacute;lectionnez le masque sur la zone de travail.
2 Dans le sous-menu Modification &gt; Transformer, s&eacute;lectionnez un outil de transformation ou une commande pour
appliquer une transformation au masque.
Pour appliquer une transformation &agrave; l’objet masque uniquement, d&eacute;liez-le d’abord des autres objets masques dans
le panneau Calques, puis ex&eacute;cutez la transformation.
Ajout d’objets masqu&eacute;s &agrave; une s&eacute;lection masqu&eacute;e
1 Choisissez Edition &gt; Couper pour couper l’objet ou les objets s&eacute;lectionn&eacute;s &agrave; ajouter.
2 Dans le panneau Calques, s&eacute;lectionnez la vignette de l’objet masqu&eacute;.
3 Choisissez Edition &gt; Coller dedans.
Remarque : l’ex&eacute;cution de la commande Coller dedans sur un masque existant ne permet pas d’afficher le contour et
le fond de l’objet masque, &agrave; moins que le masque d’origine ait &eacute;t&eacute; appliqu&eacute; avec son contour et son fond.
Remplacement d’un masque
1 Choisissez Edition &gt; Couper pour couper l’objet ou les objets s&eacute;lectionn&eacute;s &agrave; utiliser comme masque.
2 Dans le panneau Calques, s&eacute;lectionnez la vignette de l’objet masqu&eacute;, puis choisissez Edition &gt; Coller en tant que
masque.
3 Cliquez sur Remplacer lorsqu’un message vous demande si vous voulez remplacer ou ajouter le masque existant.
D&eacute;sactivation ou activation d’un masque s&eacute;lectionn&eacute;
La d&eacute;sactivation d’un masque le masque provisoirement.
❖ Proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Dans le menu Options du panneau Calques, s&eacute;lectionnez D&eacute;sactiver le masque ou Activer le masque.
• Choisissez Modification &gt; Masque &gt; D&eacute;sactiver le masque ou Modification &gt; Masque &gt; Activer le masque.
Une croix (X) rouge s’affiche sur la vignette du masque lorsqu’il est d&eacute;sactiv&eacute;. Cliquez sur X pour activer le masque.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 151
Calques, masques et fondus
Suppression d’un masque s&eacute;lectionn&eacute;
La suppression d’un masque le supprime d&eacute;finitivement.
1 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Dans le menu Options du panneau Calques, s&eacute;lectionnez Supprimer le masque.
• Choisissez Modification &gt; Masque &gt; Supprimer le masque.
• Faites glisser la vignette du masque vers l’ic&ocirc;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&eacute;s :
Appliquer Permet de conserver les modifications que vous apportez dans l’objet. Le masque ne peut alors plus &ecirc;tre
modifi&eacute;. Si l’objet &agrave; 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&eacute;s et de r&eacute;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&eacute;lectionn&eacute;, l’inspecteur des propri&eacute;t&eacute;s permet de changer de m&eacute;thode d’application du masque.
Si la fen&ecirc;tre de l’inspecteur des propri&eacute;t&eacute;s est r&eacute;duite, cliquez sur la fl&egrave;che d’extension pour afficher toutes les
propri&eacute;t&eacute;s.
Par d&eacute;faut, les masques vectoriels sont appliqu&eacute;s &agrave; l’aide de leur contour de trac&eacute;. Afficher le fond et le contour du
masque revient &agrave; utiliser la fonction Coller dedans pour cr&eacute;er des masques.
Masque vectoriel appliqu&eacute; &agrave; l’aide du contour de son trac&eacute; et avec l’option Afficher le fond et le contour activ&eacute;e
En appliquant un masque bitmap avec sa couche alpha, vous pouvez cr&eacute;er un masque qui ressemble &agrave; un masque
vectoriel appliqu&eacute; avec le contour de son trac&eacute;. La transparence de l’objet masque affecte la visibilit&eacute; de l’objet masqu&eacute;.
Masque bitmap appliqu&eacute; avec sa couche alpha
Derni&egrave;re mise &agrave; 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&eacute; des pixels
d’un masque d&eacute;termine ce qui est r&eacute;v&eacute;l&eacute; de l’objet masqu&eacute;. Les pixels clairs r&eacute;v&egrave;lent l’objet masqu&eacute;, tandis que les pixels
fonc&eacute;s masquent l’image pour laisser transpara&icirc;tre l’arri&egrave;re-plan. Cette technique cr&eacute;e des effets int&eacute;ressants si l’objet
masque contient un fond &agrave; motifs ou un fond en d&eacute;grad&eacute;.
Masque vectoriel avec un fond &agrave; motifs appliqu&eacute; 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 &agrave; l’aide du contour de son trac&eacute;
❖ Si un masque vectoriel est s&eacute;lectionn&eacute;, cliquez sur Contour de trac&eacute; dans l’inspecteur des propri&eacute;t&eacute;s.
Affichage du fond et du contour d’un masque vectoriel
❖ Dans l’inspecteur des propri&eacute;t&eacute;s, cliquez sur Afficher le fond et le contour si le masque vectoriel s&eacute;lectionn&eacute; a &eacute;t&eacute;
appliqu&eacute; en utilisant le contour de son trac&eacute;.
Application d’un masque bitmap &agrave; l’aide de sa couche alpha
❖ Si un masque bitmap est s&eacute;lectionn&eacute;, cliquez sur Couche alpha dans l’inspecteur des propri&eacute;t&eacute;s.
Application d’un masque vectoriel ou bitmap &agrave; l’aide de son aspect de niveaux de gris
❖ Si un masque est s&eacute;lectionn&eacute;, cliquez sur Aspect de niveaux de gris dans l’inspecteur des propri&eacute;t&eacute;s.
Conversion d’un masque vectoriel en masque bitmap
1 Dans le panneau Calques, s&eacute;lectionnez la vignette de l’objet masque.
2 Choisissez Modification &gt; Aplatir la s&eacute;lection.
Fusion et transparence
La cr&eacute;ation d’une image composite est une technique consistant &agrave; faire varier la transparence ou l’interaction des
couleurs de plusieurs objets qui se chevauchent. Dans Fireworks, les modes de fusion permettent de cr&eacute;er des images
composites.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 153
Calques, masques et fondus
A propos des modes de fusion
Lorsque vous s&eacute;lectionnez un mode de fusion, Fireworks l’applique aux objets s&eacute;lectionn&eacute;s dans leur int&eacute;gralit&eacute;. Les
objets d’un document ou d’un calque unique peuvent avoir des modes de fusion diff&eacute;rents de ceux des autres objets
du document ou du calque.
Lorsque des objets pr&eacute;sentant des modes de fondu diff&eacute;rents sont associ&eacute;s, ces modes individuels sont remplac&eacute;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&eacute;ments d’un mode de fusion
Couleur de fusion Couleur &agrave; laquelle est appliqu&eacute; le mode de fusion.
Opacit&eacute; Degr&eacute; de transparence auquel est appliqu&eacute; le mode de fusion.
Couleur de base Couleur des pixels sous la couleur de fusion.
Couleur r&eacute;sultante R&eacute;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&eacute;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&egrave;re al&eacute;atoire entre le calque actif et le calque d’arri&egrave;re-plan pour cr&eacute;er l’effet
de fusion.
Obscurcir S&eacute;lectionne la couleur la plus dense, entre la couleur de fusion et la couleur de base, pour l’utiliser comme
couleur r&eacute;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&eacute;e des couleurs plus fonc&eacute;es.
Densit&eacute; couleur + Assombrit la couleur de base de chaque couche pour refl&eacute;ter la couleur de fusion par augmentation
du contraste. Le m&eacute;lange avec du blanc ne produit aucun r&eacute;sultat.
Densit&eacute; lin&eacute;aire + V&eacute;rifie chaque couche des calques actif et d’arri&egrave;re-plan et assombrit la couleur d’arri&egrave;re-plan pour
refl&eacute;ter la couleur de fusion par r&eacute;duction de la luminosit&eacute;. L’effet global consiste &agrave; assombrir l’image. Le blanc &eacute;tant
la couleur neutre, le fusion de densit&eacute; lin&eacute;aire + avec le blanc ne produit aucun effet.
Eclaircir S&eacute;lectionne la couleur la plus claire, entre la couleur de fusion et la couleur de base, pour l’utiliser comme
couleur r&eacute;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&eacute;e un effet de blanchiment.
Densit&eacute; couleur - Eclaircit la couleur de base pour refl&eacute;ter la couleur de fusion par r&eacute;duction du contraste. Le m&eacute;lange
avec du noir ne produit aucun r&eacute;sultat.
Densit&eacute; lin&eacute;aire - V&eacute;rifie chaque couche des calques actif et d’arri&egrave;re-plan et &eacute;claircit la couleur d’arri&egrave;re-plan pour
refl&eacute;ter la couleur de fusion par augmentation de la luminosit&eacute;. L’effet global consiste &agrave; &eacute;claircir l’image. Le noir &eacute;tant
la couleur neutre, le fusion de densit&eacute; lin&eacute;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&eacute;s de la couleur de base. La couleur de base n’est
pas remplac&eacute;e : elle est m&eacute;lang&eacute;e &agrave; la couleur de fusion pour refl&eacute;ter la luminosit&eacute; ou l’obscurit&eacute; de la couleur d’origine.
Lumi&egrave;re douce Assombrit ou &eacute;claircit les couleurs, en fonction de la couleur de fusion. Cela a le m&ecirc;me effet que si l’on
dirigeait un spot de lumi&egrave;re diffuse sur l’image. Si la couleur de fusion (source lumineuse) est plus claire que 50 % de
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 154
Calques, masques et fondus
gris, l’image est &eacute;claircie comme avec l’outil Densit&eacute; -. Si la couleur de fusion (source lumineuse) est plus sombre que
50 % de gris, l’image est assombrie comme avec l’outil Densit&eacute; +. 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&egrave;re crue Multiplie ou trame les couleurs, en fonction de la couleur du de fondu. Cela a le m&ecirc;me effet que si l’on
dirigeait un spot de lumi&egrave;re crue sur l’image. Si la couleur de fusion (source lumineuse) est plus claire que 50 % de gris,
l’image est &eacute;claircie comme avec l’outil Superposition. Cette m&eacute;thode est pratique pour ajouter des tons clairs &agrave; 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&eacute;thode est pratique pour ajouter des tons fonc&eacute;s &agrave; une image. Si vous utilisez du noir ou du blanc purs, vous obtenez
du noir ou du blanc purs.
Lumi&egrave;re vive Augmente le contraste par combinaison des effets des modes Densit&eacute; couleur + et Densit&eacute; couleur -. Si
la couleur de fusion est plus sombre que le gris moyen, la lumi&egrave;re vive assombrit ou densifie l’image en augmentant le
contraste. Sinon, l’image est &eacute;claircie par r&eacute;duction du contraste.
Lumi&egrave;re lin&eacute;aire Ajuste la luminosit&eacute; par combinaison des modes Densit&eacute; lin&eacute;aire + et Densit&eacute; lin&eacute;aire -. Si la couleur
de calque de fusion est plus sombre que le gris moyen, le mode Lumi&egrave;re lin&eacute;aire diminue la luminosit&eacute; de l’image. Dans
le cas contraire, il l’augmente.
Lumi&egrave;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&eacute;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&eacute;s.
M&eacute;lange net R&eacute;duit les couleurs d’une image &agrave; huit couleurs pures uniquement.
Diff&eacute;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&eacute;e un effet similaire, quoiqu’avec un moindre contraste, &agrave; celui du mode Diff&eacute;rence. Si vous m&eacute;langez
avec du blanc, vous inversez les valeurs de la couleur de base. Le m&eacute;lange avec du noir ne produit aucun r&eacute;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&eacute;er la couleur r&eacute;sultante.
Saturation Combine la saturation de la couleur de fusion avec la luminance et la teinte de la couleur de base afin de
cr&eacute;er la couleur r&eacute;sultante.
Couleur Combine la teinte et la saturation de la couleur de fusion avec la luminance de la couleur de base afin de cr&eacute;er
la couleur r&eacute;sultante. Ce mode conserve les niveaux de gris qui permettent de colorer les images monochromes et de
teinter les images en couleur.
Luminosit&eacute; 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 &agrave; la couleur de base.
Effacer Supprime tous les pixels de la couleur de base, y compris ceux de l’image d’arri&egrave;re-plan.
Pour des informations g&eacute;n&eacute;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&egrave;re mise &agrave; jour le 29/4/2010
Calques, masques et fondus
Exemples de modes de fusion
Image d’origine
Normal
Produit
Superposition
Obscurcir
Eclaircir
Diff&eacute;rence
Teinte
Saturation
Couleur
Luminosit&eacute;
Inverser
Nuance
Effacer
R&eacute;glage de l’opacit&eacute; et application de modes de fusion
Vous pouvez r&eacute;gler l’opacit&eacute; des objets s&eacute;lectionn&eacute;s et appliquer des modes de fusion &agrave; l’aide de l’inspecteur des
propri&eacute;t&eacute;s ou du panneau Calques. Une opacit&eacute; de 100 rend un objet totalement opaque. La valeur 0 (z&eacute;ro) donne un
objet compl&egrave;tement transparent.
Vous pouvez &eacute;galement d&eacute;finir un mode de fusion et une opacit&eacute; avant de dessiner un objet.
D&eacute;finition d’un mode de fusion et d’un niveau d’opacit&eacute; avant de dessiner un objet
❖ Apr&egrave;s avoir s&eacute;lectionn&eacute; l’outil souhait&eacute; dans le panneau Outils, d&eacute;finissez les options de fusion et d’opacit&eacute; dans
l’inspecteur des propri&eacute;t&eacute;s avant de dessiner l’objet.
Remarque : les options de fusion et d’opacit&eacute; ne sont pas disponibles avec tous les outils.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 156
Calques, masques et fondus
D&eacute;finition d’un mode de fusion et d’un niveau d’opacit&eacute; pour des objets existants
1 Des deux objets qui se chevauchent, s&eacute;lectionnez celui qui se trouve au-dessus.
2 Dans le menu contextuel Mode de fusion de l’inspecteur des propri&eacute;t&eacute;s ou du panneau Calques, s&eacute;lectionnez une
option de fusion.
3 S&eacute;lectionnez un param&egrave;tre avec le curseur contextuel Opacit&eacute; ou saisissez une valeur dans la zone de texte.
D&eacute;finition d’un mode de fusion et d’un niveau d’opacit&eacute; par d&eacute;faut &agrave; appliquer aux objets &agrave;
mesure que vous les dessinez
1 Choisissez S&eacute;lection &gt; D&eacute;s&eacute;lectionner pour &eacute;viter d’appliquer un mode de fusion et une opacit&eacute; par inadvertance.
2 Apr&egrave;s avoir s&eacute;lectionn&eacute; un outil de dessin vectoriel ou bitmap, s&eacute;lectionnez un mode de fusion et un niveau
d’opacit&eacute; dans l’inspecteur des propri&eacute;t&eacute;s.
Le mode de fusion et le niveau d’opacit&eacute; que vous s&eacute;lectionnez sont utilis&eacute;s par d&eacute;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&eacute; et le mode de fusion de ce dernier. Ce filtre dynamique produit le m&ecirc;me effet que la superposition d’un objet
sur un autre objet utilisant un niveau d’opacit&eacute; et un mode de fusion diff&eacute;rents.
Derni&egrave;re mise &agrave; jour le 29/4/2010
Chapitre 11 : Styles, symboles et
adresses URL
Adobe&reg; Fireworks&reg; est dot&eacute; de trois panneaux permettant de stocker et de r&eacute;utiliser des styles, des symboles et des
adresses URL. Les styles sont stock&eacute;s dans le panneau Styles, les symboles du document actif dans le
panneau Biblioth&egrave;que de documents et les adresses URL dans le panneau URL. Par d&eacute;faut, ces trois panneaux sont
plac&eacute;s dans le groupe de panneaux Actifs.
Pour visionner un didacticiel vid&eacute;o sur l’utilisation des styles et des symboles dans Fireworks, reportez-vous &agrave;
www.adobe.com/go/lrvid4033_fw_fr.
Styles
Vous pouvez enregistrer et r&eacute;utiliser un ensemble pr&eacute;d&eacute;fini d’attributs de fond, de contour, de filtre et de texte en
cr&eacute;ant un style. Lorsque vous appliquez un style &agrave; un objet, celui-ci reprend les caract&eacute;ristiques de ce style.
Remarque : les objets bitmap re&ccedil;oivent uniquement les attributs de filtre d’un style.
Fireworks poss&egrave;de de nombreux styles pr&eacute;d&eacute;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&eacute;d&eacute;finis que vous pouvez importer dans
Fireworks. Vous pouvez &eacute;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&eacute;er ou d’enregistrer des styles et d’appliquer toute la gamme de styles &agrave; des objets, du
texte, des groupes et des formes automatiques.
Pour acc&eacute;der rapidement au sous-ensemble des styles d’un document, utilisez le menu de styles actif de l’inspecteur
des propri&eacute;t&eacute;s.
1 S&eacute;lectionnez les objets des zones de travail auxquels vous souhaitez appliquer un style.
2 S&eacute;lectionnez la commande Fen&ecirc;tre &gt; Styles pour afficher le panneau Styles.
3 S&eacute;lectionnez Document actif pour acc&eacute;der aux styles actuellement utilis&eacute;s ou s&eacute;lectionnez un style pr&eacute;d&eacute;fini dans
le menu contextuel pour acc&eacute;der aux styles Fireworks pr&eacute;d&eacute;finis.
Remarque : si aucun style n’appara&icirc;t dans un document, le panneau Styles reste vide tant que vous ne s&eacute;lectionnez
pas un style pr&eacute;d&eacute;fini.
4 Dans le panneau, cliquez sur le nom d’un style.
157
UTILISATION DE FIREWORKS CS5 158
Derni&egrave;re mise &agrave; jour le 29/4/2010
Styles, symboles et adresses URL
Voir aussi
&laquo; Exportation et importation de styles &raquo; &agrave; la page 159
&laquo; Modification ou red&eacute;finition de styles &raquo; &agrave; la page 159
&laquo; Rupture du lien vers un style &raquo; &agrave; la page 160
Cr&eacute;ation et suppression de styles
Vous pouvez cr&eacute;er un style reposant sur les attributs de l’objet, groupe, texte ou forme automatique s&eacute;lectionn&eacute;. Les
attributs suivants peuvent &ecirc;tre enregistr&eacute;s dans un style :
• Type et couleur de fond, y compris des attributs de motifs, de textures et de d&eacute;grad&eacute; de vecteur tels que l’angle, la
position et l’opacit&eacute;
• Type et couleur de contour
• Filtres
• Attributs de texte tels que la police, la taille du point, le style (gras, italique ou soulign&eacute;), l’alignement, le lissage, le
cr&eacute;nage automatique, l’&eacute;chelle horizontale, l’approche et l’interlignage
Si vous supprimez un style personnalis&eacute;, vous ne pouvez pas le r&eacute;cup&eacute;rer. Cependant, tout objet utilisant le style en
conserve les attributs.
Cr&eacute;ation d’un style
1 Cr&eacute;ez ou s&eacute;lectionnez un objet vectoriel, du texte, un groupe ou une forme automatique dot&eacute; des attributs de
contour, remplissage, filtre ou texte souhait&eacute;s.
2 Cliquez sur le bouton Nouveau style
de la partie inf&eacute;rieure du panneau Styles ou de l’inspecteur des propri&eacute;t&eacute;s.
3 S&eacute;lectionnez les attributs &agrave; 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&eacute;ation d’un nouveau style d’apr&egrave;s un style existant
1 Appliquez le style existant &agrave; l’objet s&eacute;lectionn&eacute;.
2 Modifiez les attributs de cet objet.
3 Enregistrez les attributs en cr&eacute;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&eacute;e pour s&eacute;lectionner plusieurs styles ; cliquez tout en maintenant
la touche Ctrl (Windows) ou Cmde (Mac OS) enfonc&eacute;e pour s&eacute;lectionner plusieurs styles non contigus.
2 Cliquez sur le bouton Supprimer
.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 159
Styles, symboles et adresses URL
Modification ou red&eacute;finition de styles
La modification de styles permet d’activer ou de d&eacute;sactiver des propri&eacute;t&eacute;s sp&eacute;cifiques, notamment celles du fond ou
du contour. La red&eacute;finition de styles, quant &agrave; elle, permet de modifier les filtres qu’ils contiennent.
Lorsque vous modifiez ou red&eacute;finissez un style, tous les objets qui lui ont &eacute;t&eacute; appliqu&eacute;s sont automatiquement mis &agrave;
jour. Toutefois, vous pouvez rompre le lien entre des objets s&eacute;lectionn&eacute;s et des styles (voir la section &laquo; Rupture du lien
vers un style &raquo; &agrave; la page 160).
Voir aussi
&laquo; Modification et personnalisation des filtres dynamiques &raquo; &agrave; la page 133
Modification d’un style
1 Choisissez S&eacute;lection &gt; D&eacute;s&eacute;lectionner pour d&eacute;s&eacute;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&icirc;te de dialogue Modifier le style, s&eacute;lectionnez ou d&eacute;s&eacute;lectionnez des attributs.
4 Cliquez sur OK pour appliquer les modifications au style.
Red&eacute;finition d’un style
1 Dans la zone de travail, s&eacute;lectionnez un objet qui utilise ce style.
2 Dans l’inspecteur des propri&eacute;t&eacute;s, modifiez les filtres appliqu&eacute;s, puis cliquez sur le bouton Red&eacute;finir le style.
Remarque : lors de la red&eacute;finition d’un style &agrave; partir d’un groupe, seuls les effets sont red&eacute;finis. Tous les attributs de
chemin d’acc&egrave;s sont ignor&eacute;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&eacute;e.
Exportation et importation de styles
Pour gagner du temps et dans un souci de coh&eacute;rence, vous pouvez partager des styles ; pour cela, exportez-les pour
qu’ils puissent &ecirc;tre utilis&eacute;s par d’autres utilisateurs.
Enregistrement de la biblioth&egrave;que de styles
Vous pouvez enregistrer les styles cr&eacute;&eacute;s ou modifi&eacute;s sous forme de biblioth&egrave;que de styles. Les noms des styles sont
class&eacute;s par ordre alphab&eacute;tique. Il est &eacute;galement possible d’appliquer des styles &agrave; des groupes, des formes automatiques
et des symboles.
1 Dans le menu Options du panneau Styles, s&eacute;lectionnez l’option Enregistrer la biblioth&egrave;que de styles.
2 Entrez un nom et un emplacement pour la biblioth&egrave;que de styles.
3 Cliquez sur Enregistrer.
Importation de styles
1 Dans le menu Options du panneau Styles, s&eacute;lectionnez l’option Importer une biblioth&egrave;que de styles.
2 S&eacute;lectionnez une biblioth&egrave;que de styles (*.stl) &agrave; importer. La biblioth&egrave;que de styles est disponible dans plusieurs
documents et plusieurs sessions de Fireworks.
Derni&egrave;re mise &agrave; 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&eacute;lectionnez une biblioth&egrave;que de styles (*.stl) &agrave; charger dans le document actif. Les styles charg&eacute;s sont disponibles
dans le document actif.
Modification de la taille d’une ic&ocirc;ne de style
❖ Pour modifier la taille des ic&ocirc;nes d’aper&ccedil;u des styles, s&eacute;lectionnez Grandes ic&ocirc;nes dans le menu Options du
panneau Styles, afin d’alterner entre la grande et la petite taille d’aper&ccedil;u.
Copie d’attributs d’un objet dans un autre sans application de style
1 S&eacute;lectionnez l’objet dont vous voulez copier les attributs.
2 Choisissez Edition &gt; Copier.
3 D&eacute;s&eacute;lectionnez l’objet original, puis s&eacute;lectionnez les objets auxquels vous voulez appliquer les nouveaux attributs.
4 Choisissez Edition &gt; Coller les attributs.
Rupture du lien vers un style
Vous pouvez rompre le lien &eacute;tabli entre un objet et le style qui lui est appliqu&eacute;. Cet objet conserve les m&ecirc;mes attributs
mais n’est plus modifi&eacute; en cas de changement de styles.
1 S&eacute;lectionnez l’objet sur lequel le style est appliqu&eacute;.
2 Dans la partie inf&eacute;rieure droite de l’inspecteur des propri&eacute;t&eacute;s, cliquez sur le bouton Rompre le lien avec le style.
Si la fen&ecirc;tre de l’inspecteur des propri&eacute;t&eacute;s est r&eacute;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&eacute;lectionnez les objets modifi&eacute;s suite &agrave; l’application d’un style.
2 Dans le menu Options du panneau Styles, cliquez sur Effacer les remplacements.
S&eacute;lection des styles inutilis&eacute;s dans le document actif
❖ Dans le menu Options du panneau Styles, choisissez S&eacute;lectionner les styles inutilis&eacute;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 &eacute;l&eacute;ments graphiques r&eacute;utilisables sont appel&eacute;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&eacute;es changent automatiquement afin de refl&eacute;ter le symbole modifi&eacute; (sauf si vous rompez le lien entre les deux).
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 161
Styles, symboles et adresses URL
Les symboles sont &eacute;galement pratiques pour cr&eacute;er des boutons et animer des objets sur plusieurs &eacute;tats.
Pour plus d’informations sur les symboles, voir Flux de production avec les styles et les symboles dans le Centre des
d&eacute;veloppeurs.
Voir aussi
&laquo; Cr&eacute;ation de symboles de bouton &raquo; &agrave; la page 194
&laquo; Cr&eacute;ation de symboles d’animation &raquo; &agrave; la page 219
Cr&eacute;ation d’un symbole
Vous pouvez cr&eacute;er un symbole &agrave; partir d’un objet, d’un bloc de texte ou d’un groupe, puis le stocker dans l’onglet
Biblioth&egrave;que commune du panneau Actifs. Vous pouvez ensuite, &agrave; partir de cet onglet, modifier le symbole et l’ins&eacute;rer
dans vos documents.
Cr&eacute;ation d’un symbole &agrave; partir d’un objet s&eacute;lectionn&eacute;
1 S&eacute;lectionnez l’objet, puis choisissez Modification &gt; Symbole &gt; Convertir en symbole.
2 Dans la zone Nom, entrez le nom du symbole.
3 S&eacute;lectionnez un type de symbole.
4 Pour effectuer une mise &agrave; l’&eacute;chelle du symbole sans distorsion de sa g&eacute;om&eacute;trie, s&eacute;lectionnez l’option Activer les
rep&egrave;res de mise &agrave; l’&eacute;chelle en 9 tranches (voir la section &laquo; Mise &agrave; l’&eacute;chelle en 9 tranches &raquo; &agrave; la page 50).
5 Pour stocker le symbole afin de l’utiliser dans diff&eacute;rents documents, s&eacute;lectionnez l’option Enregistrer dans la
biblioth&egrave;que commune.
6 Cliquez sur OK pour enregistrer le symbole.
L’objet s&eacute;lectionn&eacute; devient une occurrence du symbole et l’inspecteur des propri&eacute;t&eacute;s affiche les options du symbole.
Cr&eacute;ation d’un symbole ex nihilo
1 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Choisissez Edition &gt; Insertion &gt; Nouveau symbole.
• Dans le menu Options du panneau Biblioth&egrave;que de documents, cliquez sur Nouveau symbole.
2 S&eacute;lectionnez un type de symbole.
3 Pour utiliser des rep&egrave;res de mise &agrave; l’&eacute;chelle 9 tranches pour le symbole, s&eacute;lectionnez l’option Activer les rep&egrave;res de
mise &agrave; l’&eacute;chelle en 9 tranches, puis cliquez sur OK.
4 Cr&eacute;ez le symbole &agrave; l’aide des outils du panneau Outils.
Placement d’une occurrence de symbole
❖ Faites glisser un symbole du panneau Biblioth&egrave;que de documents vers le document actif.
Derni&egrave;re mise &agrave; 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&eacute;es sont automatiquement mises &agrave; jour pour refl&eacute;ter
les modifications apport&eacute;es. Toutefois, certaines propri&eacute;t&eacute;s sont ind&eacute;pendantes. Pour plus d’informations, reportezvous &agrave; la section &laquo; Modification d’occurrences de symboles sp&eacute;cifiques &raquo; &agrave; la page 163.
Lorsque vous fractionnez le symbole, les graphiques sont group&eacute;s par d&eacute;faut. Dissociez les graphiques (boutons, barre
de d&eacute;filement ou autres) pour les modifier. Vous pourrez ensuite grouper &agrave; 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&eacute;der au mode de modification de symboles, proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Dans la zone de travail, cliquez deux fois sur une occurrence de symbole.
• S&eacute;lectionnez une occurrence, puis choisissez Modification &gt; Symbole &gt; Modifier le symbole.
• Dans le panneau Biblioth&egrave;que de documents, cliquez deux fois sur une ic&ocirc;ne de symbole.
• (Symboles d’animation uniquement) Cliquez sur le bouton Modifier dans la bo&icirc;te de dialogue Animer.
2 Modifiez le symbole selon vos besoins.
Remarque : si l’option Mise &agrave; l’&eacute;chelle en 9 tranches n’est pas activ&eacute;e pour le symbole s&eacute;lectionn&eacute;, vous pouvez
modifier le symbole dans le contexte lui-m&ecirc;me. Vous pouvez choisir la commande Modification &gt; Symbole &gt; Modifier
en place.
Utilisez des rep&egrave;res de mise &agrave; l’&eacute;chelle en 9 tranches pour emp&ecirc;cher toute distorsion lorsque vous redimensionnez
le symbole (voir la section &laquo; Mise &agrave; l’&eacute;chelle en 9 tranches &raquo; &agrave; la page 50).
Passage du mode d’&eacute;dition de symboles au mode d’&eacute;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&egrave;re (&agrave; l’exception des symboles utilisant la mise &agrave; l’&eacute;chelle en 9 tranches, qui apparaissent seuls).
Pour alterner entre le mode d’&eacute;dition de symboles et le mode d’&eacute;dition de pages, proc&eacute;dez de l’une des mani&egrave;res
suivantes :
• Dans la zone de travail, cliquez deux fois sur une zone vide.
• Dans le plateau situ&eacute; en haut du panneau du document, cliquez sur l’ic&ocirc;ne repr&eacute;sentant une page ou sur la fl&egrave;che
arri&egrave;re. (Si le symbole est imbriqu&eacute;, le plateau donne &eacute;galement acc&egrave;s au symbole le contenant.)
Affectation d’un nouveau nom &agrave; un symbole
1 Dans le panneau Biblioth&egrave;que de documents, cliquez deux fois sur une ic&ocirc;ne de symbole.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 163
Styles, symboles et adresses URL
2 Dans la bo&icirc;te de dialogue Convertir en symbole, modifiez le nom, puis cliquez sur OK.
Duplication d’un symbole
1 Dans le panneau Biblioth&egrave;que de documents, s&eacute;lectionnez le symbole.
2 Dans le menu Options du panneau Biblioth&egrave;que de documents, cliquez sur Dupliquer.
3 Modifiez le nom et le type du doublon si n&eacute;cessaire et cliquez sur OK.
Modification du type de symbole
1 Cliquez deux fois sur le nom du symbole dans la biblioth&egrave;que.
2 S&eacute;lectionnez une autre option de type de symbole.
S&eacute;lection de tous les symboles inutilis&eacute;s dans le panneau Biblioth&egrave;que de documents
❖ Dans le menu Options du panneau Biblioth&egrave;que de documents, cliquez sur S&eacute;lectionner les &eacute;l&eacute;ments inutilis&eacute;s.
Suppression d’un symbole et de toutes ses occurrences
❖ Dans le panneau Biblioth&egrave;que de documents, faites glisser le symbole jusqu’&agrave; l’ic&ocirc;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&eacute;lectionnez Permuter le
symbole.
2 Dans la bo&icirc;te de dialogue Permuter le symbole, s&eacute;lectionnez un autre symbole parmi ceux disponibles dans la
biblioth&egrave;que de documents, puis cliquez sur OK.
Modification d’occurrences de symboles sp&eacute;cifiques
Lorsque vous cliquez deux fois sur une occurrence pour la modifier, c’est en fait le symbole lui-m&ecirc;me que vous
modifiez. Pour modifier uniquement l’occurrence active, vous devez rompre le lien entre cette occurrence et le
symbole. Cela supprime d&eacute;finitivement la relation entre les deux. Aucune des modifications futures apport&eacute;es au
symbole n’affectera l’occurrence pr&eacute;c&eacute;dente.
Les symboles de bouton sont associ&eacute;s &agrave; plusieurs fonctions permettant de conserver la relation entre symbole et
instance, tout en affectant un texte et une adresse URL uniques &agrave; chaque occurrence.
Pour adapter les comportements JavaScript aux symboles de composant, modifiez les valeurs correspondantes dans le
panneau Propri&eacute;t&eacute;s du symbole. Pour ajouter des propri&eacute;t&eacute;s personnalisables &agrave; ce panneau, vous devez modifier le
fichier JavaScript associ&eacute; au symbole.
Remarque : Les attributs de hauteur et de largeur ne peuvent pas &ecirc;tre d&eacute;finis pour un composant utilisant JavaScript.
Rupture de liens de symboles
1 S&eacute;lectionnez l’occurrence.
2 Choisissez Modification &gt; Symbole &gt; S&eacute;parer.
L’occurrence s&eacute;lectionn&eacute;e devient un groupe. Le symbole qui s’affiche dans le panneau Biblioth&egrave;que de documents
n’est plus associ&eacute; &agrave; ce groupe. Apr&egrave;s s&eacute;paration du symbole, une occurrence ant&eacute;rieure d’un bouton perd les
caract&eacute;ristiques du symbole de son bouton, et une occurrence ant&eacute;rieure de l’animation perd les caract&eacute;ristiques de
son symbole d’animation.
Derni&egrave;re mise &agrave; 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&eacute;lectionnez l’occurrence.
2 Modifiez les propri&eacute;t&eacute;s de l’occurrence dans l’inspecteur des propri&eacute;t&eacute;s.
Vous pouvez modifier ces propri&eacute;t&eacute;s sans que cela n’affecte le symbole et les autres occurrences :
• Mode de fusion
• Opacit&eacute;
• Filtres
• Largeur et hauteur
•
Coordonn&eacute;es x et y
Cr&eacute;ation et utilisation de symboles de composant
Les symboles de composant sont des symboles graphiques que vous pouvez mettre &agrave; l’&eacute;chelle de mani&egrave;re intelligente
tout en leur affectant des attributs sp&eacute;cifiques &agrave; l’aide d’un fichier JavaScript (JSF). Si vous modifiez une occurrence
dans le panneau Propri&eacute;t&eacute;s, cela affecte non seulement le symbole, mais aussi toutes les autres occurrences. En
revanche, si vous modifiez des param&egrave;tres dans le panneau Propri&eacute;t&eacute;s du symbole (Fen&ecirc;tre &gt; Propri&eacute;t&eacute;s du symbole),
cela affecte uniquement l’occurrence s&eacute;lectionn&eacute;e.
Fireworks comprend une biblioth&egrave;que de symboles de composant pr&eacute;d&eacute;finis ; vous pouvez personnaliser ces derniers
pour reproduire l’aspect d’un site Web ou d’une interface utilisateur sp&eacute;cifique.
Ajout d’un symbole de composant &agrave; un document
1 Dans le menu Fen&ecirc;tre, s&eacute;lectionnez Biblioth&egrave;que commune.
2 Pour utiliser un symbole, faites-le glisser depuis le panneau Biblioth&egrave;que commune pour le d&eacute;poser dans la zone
de travail Fireworks.
Ajustement des propri&eacute;t&eacute;s des symboles de composant
1 Dans la zone de travail, s&eacute;lectionnez le symbole souhait&eacute;.
2 Dans le panneau Propri&eacute;t&eacute;s du symbole (Fen&ecirc;tre &gt; Propri&eacute;t&eacute;s du symbole), vous pouvez r&eacute;gler des param&egrave;tres tels
que l’&eacute;tat, l’&eacute;tiquette et la couleur.
Pour cr&eacute;er des boutons interactifs destin&eacute;s &agrave; des prototypes HTML et logiciels, reportez-vous &agrave; la section
&laquo; Tranches interactives &raquo; &agrave; la page 178.
Cr&eacute;ation d’un symbole de composant
1 Cr&eacute;ez un objet dont vous voulez personnaliser les attributs.
La couleur de puce et le num&eacute;ro de puce peuvent &ecirc;tre des options personnalisables de ce symbole.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 165
Styles, symboles et adresses URL
2 Lorsque vous cr&eacute;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 &laquo; &eacute;tiquette &raquo;. Ce nom est utilis&eacute;
dans le fichier JavaScript.
Remarque : pour &eacute;viter les erreurs JavaScript, omettez les espaces dans les noms de fonctions. Par exemple, utilisez
&laquo; &eacute;tiquette_num&eacute;ro &raquo; et non &laquo; &eacute;tiquette de num&eacute;ro &raquo;.
3 S&eacute;lectionnez l’objet, puis choisissez Modification &gt; Symbole &gt; Convertir en symbole.
4 Dans la zone Nom, entrez le nom du symbole.
5 S&eacute;lectionnez Graphique comme type de symbole, s&eacute;lectionnez ensuite Enregistrer dans la biblioth&egrave;que commune,
puis cliquez sur OK.
6 A l’invite, enregistrez le nouveau symbole dans le dossier Symboles personnalis&eacute;s par d&eacute;faut, ou cr&eacute;ez un autre
dossier au m&ecirc;me niveau que le dossier par d&eacute;faut.
Remarque : vous devez enregistrer les symboles de composant dans un dossier de la biblioth&egrave;que commune.
Une fois enregistr&eacute;, le symbole est supprim&eacute; de la zone de travail et figure dans la biblioth&egrave;que commune.
7 S&eacute;lectionnez Cr&eacute;er le script du symbole dans le menu Commandes.
8 Cliquez sur le bouton Parcourir dans le coin sup&eacute;rieur droit du panneau, puis recherchez le fichier PNG de
symboles. L’emplacement par d&eacute;faut est le suivant :
• Pour Microsoft&reg; Windows&reg; XP : &lt;param&egrave;tres utilisateur&gt;\Application Data\Adobe\Fireworks CS5\Common
Library\Symboles personnalis&eacute;s
• Pour Windows Vista&reg; : \Utilisateurs\&lt;nom d’utilisateur&gt;\AppData\Roaming\Adobe\Fireworks CS5\Common
Library\Symboles personnalis&eacute;s
• Pour Mac&reg; OS : &lt;nom d’utilisateur&gt;/Application Support/Adobe/Fireworks CS5/Common Library/Symboles
personnalis&eacute;s
9 Cliquez sur le bouton Plus pour ajouter un nom d’&eacute;l&eacute;ment.
10 Dans la zone Nom d’&eacute;l&eacute;ment, saisissez le nom de l’&eacute;l&eacute;ment &agrave; personnaliser. Par exemple, pour personnaliser la zone
de texte &laquo; &eacute;tiquette &raquo;, saisissez &laquo; &eacute;tiquette &raquo;.
11 Dans la zone Attribut, s&eacute;lectionnez le nom de l’attribut &agrave; personnaliser. Par exemple, pour personnaliser le texte de
l’&eacute;tiquette, s&eacute;lectionnez textChars.
Remarque : pour plus d’informations sur ces options d’attribut, reportez-vous &agrave; l’extension de Fireworks.
12 Dans le champ Nom de propri&eacute;t&eacute;, saisissez le nom de la propri&eacute;t&eacute; personnalisable, par exemple &laquo; Etiquette &raquo; ou
&laquo; Num&eacute;ro &raquo;. Il s’agit du nom de propri&eacute;t&eacute; qui appara&icirc;t dans le panneau Propri&eacute;t&eacute;s du symbole.
13 Dans le champ Valeur, entrez une valeur par d&eacute;faut pour la propri&eacute;t&eacute; utilis&eacute;e lors de l’insertion initiale d’une
occurrence du symbole dans un document.
14 Ajoutez des &eacute;l&eacute;ments suppl&eacute;mentaires au fur et &agrave; mesure de vos besoins.
15 Cliquez sur Enregistrer pour enregistrer les options s&eacute;lectionn&eacute;es et cr&eacute;er un fichier JavaScript.
16 Dans le menu Options du panneau Biblioth&egrave;que commune, cliquez sur Recharger pour recharger le nouveau
symbole.
Une fois le fichier JavaScript cr&eacute;&eacute;, vous pouvez cr&eacute;er une instance en faisant glisser le symbole vers la zone de travail.
Vous pourrez modifier ult&eacute;rieurement ses attributs dans le panneau Propri&eacute;t&eacute;s du symbole.
Remarque : si vous supprimez ou renommez un objet r&eacute;f&eacute;renc&eacute; par le script, le panneau Propri&eacute;t&eacute;s du symbole signale
la pr&eacute;sence d’erreurs.
Derni&egrave;re mise &agrave; 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&eacute;lectionnez un symbole dans le panneau Biblioth&egrave;que de documents.
2 Dans le menu Options du panneau Biblioth&egrave;que de documents, cliquez sur Enregistrer dans la biblioth&egrave;que
commune.
3 Cr&eacute;ez un fichier JavaScript pour contr&ocirc;ler les propri&eacute;t&eacute;s du symbole.
Cr&eacute;ation de param&egrave;tres de symbole modifiables avec JavaScript
Lorsque vous enregistrez un symbole de composant, Fireworks enregistre un fichier PNG dans les dossiers par d&eacute;faut
suivants :
• (Windows XP) &lt;param&egrave;tres utilisateur&gt;\Application Data\Adobe\Fireworks CS5\Common Library\Symboles
personnalis&eacute;s
• (Windows Vista) \Utilisateurs\&lt;nom d’utilisateur&gt;\AppData\Roaming\Adobe\Fireworks CS5\Common
Library\Symboles personnalis&eacute;s
• (Mac OS) &lt;nom d’utilisateur&gt;/Application Support/Adobe/Fireworks CS5/Common Library/Symboles
personnalis&eacute;s
Pour cr&eacute;er un symbole de composant, vous devez cr&eacute;er un fichier JavaScript portant le m&ecirc;me nom que le symbole et
l’enregistrer au m&ecirc;me emplacement avec l’extension .JSF. Par exemple, mybutton.graphic.png est associ&eacute; &agrave; un fichier
JavaScript appel&eacute; mybutton.jsf.
Le panneau Cr&eacute;er le script du symbole permet aux utilisateurs qui ne sont pas des programmeurs d’affecter des
attributs de symboles simples et de cr&eacute;er le fichier JavaScript automatiquement. Pour ouvrir ce panneau, s&eacute;lectionnez
Cr&eacute;er le script du symbole dans le menu Commandes.
Cr&eacute;ation du fichier JavaScript
Vous devez d&eacute;finir les deux fonctions suivantes dans le fichier JavaScript afin de pouvoir ajouter des param&egrave;tres
modifiables au symbole :
• Fonction setDefaultValues() : elle d&eacute;finit les param&egrave;tres qui peuvent &ecirc;tre modifi&eacute;s ainsi que leurs valeurs par
d&eacute;faut.
• Fonction applyCurrentValues() : elle applique les valeurs entr&eacute;es dans le panneau Propri&eacute;t&eacute;s du symbole au
symbole graphique.
L’exemple suivant illustre un fichier .JSF permettant de cr&eacute;er un symbole personnalis&eacute; :
Derni&egrave;re mise &agrave; 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:&quot;Selected&quot;, value:&quot;true&quot;, type:&quot;Boolean&quot;});
Widget.elem.customData[&quot;currentValues&quot;] = currValues;
}
function applyCurrentValues()
{
var currValues = Widget.elem.customData[&quot;currentValues&quot;];
// Get symbol object name
var Check = Widget.GetObjectByName(&quot;Check&quot;);
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:&quot;BG Color&quot;, value:&quot;#003366&quot;, type:&quot;Color&quot;});
Widget.elem.customData[&quot;currentValues&quot;] = currValues;
}
function applyCurrentValues()
{
var currValues = Widget.elem.customData[&quot;currentValues&quot;];
//color_bg is the Layer name in the PNG that will change colors
var color_bg = Widget.GetObjectByName(&quot;color_bg&quot;);
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&ccedil;on dont le fichier .JSF peut &ecirc;tre utilis&eacute; pour personnaliser les propri&eacute;t&eacute;s du
symbole, explorez les exemples de composants inclus au logiciel.
Importation et exportation de symboles
Le panneau Biblioth&egrave;que de documents permet de stocker les symboles que vous cr&eacute;ez ou importez dans le document
actif. Le panneau Biblioth&egrave;que de documents est propre au document actif ; pour utiliser des symboles contenus dans
la biblioth&egrave;que d’un document diff&eacute;rent, vous pouvez les importer, les exporter, les copier ou les faire glisser.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 168
Styles, symboles et adresses URL
Importation d’un ou plusieurs symboles pr&eacute;par&eacute;s &agrave; partir d’une biblioth&egrave;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&egrave;mes aux symboles multiples.
1 Ouvrez un document Fireworks.
2 S&eacute;lectionnez un dossier dans le panneau Biblioth&egrave;que commune.
Vous pouvez &eacute;galement importer des symboles provenant de fichiers PNG de biblioth&egrave;ques pr&eacute;alablement
export&eacute;s et plac&eacute;s sur votre disque dur, un CD ou un r&eacute;seau.
Importation de symboles d’un autre fichier dans le document actif
1 Dans le menu Options du panneau Biblioth&egrave;que de documents, cliquez sur Importer des symboles.
2 Naviguez jusqu’au dossier PNG qui contient le fichier, s&eacute;lectionnez-le, puis cliquez sur Ouvrir.
3 S&eacute;lectionnez les symboles &agrave; importer, puis cliquez sur Importer.
Les symboles import&eacute;s s’affichent dans le panneau Biblioth&egrave;que de documents.
Importation d’un symbole par glisser-d&eacute;poser ou par copier-coller
❖ Proc&eacute;dez de l’une des mani&egrave;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&eacute; dans le panneau Biblioth&egrave;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&egrave;que de documents, cliquez sur Exporter des symboles.
2 S&eacute;lectionnez les symboles &agrave; exporter, puis cliquez sur Exporter.
3 S&eacute;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 &agrave; jour de symboles et d’occurrences export&eacute;s dans plusieurs documents
Les symboles import&eacute;s restent li&eacute;s &agrave; leur document de symbole d’origine. Vous pouvez modifier le document de
symbole d’origine puis mettre &agrave; jour les documents cibles pour qu’ils refl&egrave;tent vos modifications.
1 Dans le document d’origine, cliquez deux fois sur une occurrence, ou s&eacute;lectionnez une instance et choisissez
Modification &gt; Symbole &gt; Modifier le symbole.
2 Modifiez le symbole.
3 Enregistrez le fichier.
4 Dans le document dans lequel le symbole a &eacute;t&eacute; import&eacute;, s&eacute;lectionnez le symbole dans le panneau Biblioth&egrave;que de
documents.
5 Dans le menu Options du panneau Biblioth&egrave;que de documents, cliquez sur Mettre &agrave; jour.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 169
Styles, symboles et adresses URL
Remarque : pour mettre &agrave; jour tous les symboles import&eacute;s, s&eacute;lectionnez tous les symboles dans le
panneau Biblioth&egrave;que de documents, puis s&eacute;lectionnez Mettre &agrave; jour.
Cr&eacute;ation de symboles imbriqu&eacute;s
On dit d’un symbole cr&eacute;&eacute; dans un autre qu’il est imbriqu&eacute;.
1 Cr&eacute;ez un objet sur une page &agrave; l’aide de l’outil Vecteur, un rectangle, par exemple.
2 Cliquez avec le bouton droit de la souris sur le rectangle et s&eacute;lectionnez Convertir en symbole.
3 Dans la bo&icirc;te de dialogue Convertir en symbole, proc&eacute;dez de la mani&egrave;re suivante :
a Attribuez un nom au symbole, Symbole A, par exemple.
b Si vous avez l’intention de lui appliquer la mise &agrave; l’&eacute;chelle en 9 tranches, s&eacute;lectionnez Activer les rep&egrave;res de mise
&agrave; l’&eacute;chelle &agrave; 9 tranches.
4 Cliquez deux fois sur l’ic&ocirc;ne &laquo; + &raquo; au centre du symbole.
5 R&eacute;p&eacute;tez les &eacute;tapes 1 &agrave; 4 pour cr&eacute;er un autre symbole, Symbole B. Parce que vous l’avez cr&eacute;&eacute; dans le Symbole A, il
est imbriqu&eacute; dans celui-ci.
Remarque : Libre &agrave; vous de cr&eacute;er plusieurs symboles imbriqu&eacute;s.
Mise &agrave; l’&eacute;chelle en 9 tranches de symboles imbriqu&eacute;s
Vous pouvez cr&eacute;er des symboles au sein d’un symbole. Il est possible de mettre individuellement &agrave; l’&eacute;chelle ces
symboles, qui sont dits imbriqu&eacute;s.
Avant de proc&eacute;der &agrave; la mise &agrave; l’&eacute;chelle en 9 tranches d’un symbole, effectuez les op&eacute;rations suivantes.
• Lorsque vous cr&eacute;ez le symbole, s&eacute;lectionnez Activer les rep&egrave;res de mise &agrave; l’&eacute;chelle &agrave; 9 tranches.
• Veillez &agrave; activer le mode de modification du symbole &agrave; mettre &agrave; l’&eacute;chelle. Pour ce faire, cliquez deux fois sur l’ic&ocirc;ne
&laquo; + &raquo; du symbole le plus imbriqu&eacute;.
Lorsque vous transformez des symboles imbriqu&eacute;s en leur appliquant une mise &agrave; l’&eacute;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 &agrave; l’&eacute;chelle les symboles
A (le plus imbriqu&eacute;) et B (interm&eacute;diaire) par rapport &agrave; leurs rep&egrave;res de mise &agrave; l’&eacute;chelle en 9 tranches. Pour ce faire,
veillez d’abord &agrave; activer le mode de modification du symbole le plus imbriqu&eacute;. En mode de modification en place,
seul le panneau Biblioth&egrave;que permet de visualiser les rep&egrave;res de mise &agrave; l’&eacute;chelle en 9 tranches des symboles
imbriqu&eacute;s. Cliquer deux fois sur un symbole ne permet pas d’afficher ces rep&egrave;res sur la zone de travail.
Activation de la mise &agrave; l’&eacute;chelle en 9 tranches d’un symbole existant
1 Activez l’affichage dans lequel vous avez cr&eacute;&eacute; le symbole.
2 S&eacute;lectionnez le symbole dans le panneau Biblioth&egrave;que de documents et cliquez sur Propri&eacute;t&eacute;s du symbole.
Remarque : Si ce panneau n’est pas visible, s&eacute;lectionnez Fen&ecirc;tre &gt; Biblioth&egrave;que de documents pour l’afficher.
3 Dans la bo&icirc;te de dialogue Convertir en symbole, s&eacute;lectionnez Activer les rep&egrave;res de mise &agrave; l’&eacute;chelle &agrave; 9 tranches.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 170
Styles, symboles et adresses URL
URL
L’affectation d’une adresse URL &agrave; un objet Web cr&eacute;e un lien vers un fichier tel qu’une page Web. Vous pouvez affecter
des URL &agrave; des tranches, &agrave; des zones sensibles et &agrave; des boutons. Pour stocker, modifier et organiser des URL en vue de
leur r&eacute;utilisation, cr&eacute;ez une biblioth&egrave;que d’adresses URL dans le panneau URL.
Par exemple, si votre site Web contient plusieurs boutons de navigation permettant de revenir &agrave; la page d’accueil,
ajoutez l’URL de cette derni&egrave;re au panneau URL. Affectez ensuite cette URL &agrave; chaque bouton de navigation en la
s&eacute;lectionnant dans la biblioth&egrave;que d’URL. Utilisez la fonction Rechercher et remplacer pour changer une URL dans
plusieurs documents (voir la section &laquo; Recherche et remplacement &raquo; &agrave; la page 297).
Les biblioth&egrave;ques d’URL sont disponibles pour l’ensemble des documents de Fireworks et sont enregistr&eacute;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&eacute;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&egrave;tes incluant le protocole de serveur (g&eacute;n&eacute;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&eacute;cises, quel que soit l’emplacement du document source,
mais le lien est rompu si le document cible est d&eacute;plac&eacute;.
Les URL relatives sont indiqu&eacute;es par rapport au dossier contenant le document source. Les URL relatives sont
g&eacute;n&eacute;ralement les plus simples &agrave; utiliser pour &eacute;tablir un lien avec un fichier plac&eacute; dans le m&ecirc;me dossier que le
document actif. Les exemples suivants pr&eacute;sentent la syntaxe de navigation d’URL relatives :
• fichier.htm &eacute;tablit un lien avec un fichier situ&eacute; dans le m&ecirc;me dossier que le document source.
• ../../fichier.htm &eacute;tablit un lien avec un fichier situ&eacute; dans un dossier plac&eacute; deux niveaux au-dessus du dossier
contenant le document source. Chaque signe &laquo; ../ &raquo; repr&eacute;sente un niveau.
• htmldocs/fichier.htm &eacute;tablit un lien vers un fichier situ&eacute; dans un dossier nomm&eacute; htmldocs, figurant dans le dossier
contenant le document source.
Lien vers des pages dans un document Fireworks
Dans un document Fireworks, vous pouvez cr&eacute;er des liens entre plusieurs pages en utilisant des URL pour chaque
page. Le menu contextuel Lien, pr&eacute;sent dans l’inspecteur des propri&eacute;t&eacute;s et dans le panneau URL, contient la liste des
adresses URL de chaque page d’un document. S&eacute;lectionnez l’une de ces URL pour &eacute;tablir le lien &agrave; la page
correspondante.
Affectation d’une autre extension que .htm aux URL de page par d&eacute;faut
1 Le document &eacute;tant ouvert, choisissez Fichier &gt; Exporter.
2 S&eacute;lectionnez Documents HTML et Images.
3 Cliquez sur le bouton Options.
4 Dans l’onglet G&eacute;n&eacute;ral, s&eacute;lectionnez une extension de fichier dans le menu contextuel Extension, puis cliquez
sur OK.
5 Dans la bo&icirc;te de dialogue Exporter, cliquez sur Annuler.
UTILISATION DE FIREWORKS CS5 171
Derni&egrave;re mise &agrave; jour le 29/4/2010
Styles, symboles et adresses URL
Affectation d’une URL &agrave; 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 &agrave; la biblioth&egrave;que (+) pour ajouter l’URL &agrave; la biblioth&egrave;que d’URL.
3 S&eacute;lectionnez un objet Web.
4 S&eacute;lectionnez l’URL dans le panneau d’aper&ccedil;u des URL.
Cr&eacute;ation d’une biblioth&egrave;que d’URL
Les biblioth&egrave;ques regroupent les URL li&eacute;es, ce qui en facilite l’acc&egrave;s. Vous pouvez enregistrer les URL dans la
biblioth&egrave;que d’URL par d&eacute;faut (URLs.htm) ou dans une biblioth&egrave;que que vous avez cr&eacute;&eacute;e. Vous pouvez &eacute;galement
importer les URL d’un document HTML existant et les regrouper dans une biblioth&egrave;que.
La biblioth&egrave;que URLs.htm et les nouvelles biblioth&egrave;ques que vous cr&eacute;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 &agrave; la section &laquo; Utilisation des fichiers de
configuration &raquo; &agrave; la page 316.
Cr&eacute;ation d’une biblioth&egrave;que d’URL
1 Dans le menu Options du panneau URL, cliquez sur Nouvelle biblioth&egrave;que d’URL.
2 Entrez le nom de la biblioth&egrave;que dans la zone, puis cliquez sur OK.
Ajout d’une nouvelle URL &agrave; une biblioth&egrave;que d’URL
1 Dans le menu contextuel Biblioth&egrave;que, s&eacute;lectionnez une biblioth&egrave;que.
2 Entrez une URL dans la zone Lien.
3 Cliquez sur le bouton Plus (+).
Ajout simultan&eacute; d’une URL &agrave; la biblioth&egrave;que et affectation de cette URL &agrave; un objet Web
1 S&eacute;lectionnez l’objet.
2 Pour entrer l’URL, ex&eacute;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&icirc;t dans le panneau d’aper&ccedil;u des URL.
Ajout d’URL utilis&eacute;es &agrave; une biblioth&egrave;que d’URL
1 Dans le menu contextuel Biblioth&egrave;que, s&eacute;lectionnez une biblioth&egrave;que.
2 Dans le menu Options du panneau URL, s&eacute;lectionnez Ajouter les URL utilis&eacute;es &agrave; la biblioth&egrave;que.
Suppression d’une URL s&eacute;lectionn&eacute;e du panneau d’aper&ccedil;u des URL
❖ Cliquez sur le bouton Supprimer l’URL de la biblioth&egrave;que
dans la partie inf&eacute;rieure du panneau URL.
Suppression de la biblioth&egrave;que de toutes les adresses URL inutilis&eacute;es
1 Dans le menu Options du panneau URL, s&eacute;lectionnez Effacer les URL inutilis&eacute;es.
Derni&egrave;re mise &agrave; 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 &agrave; toutes les occurrences.
1 S&eacute;lectionnez l’URL dans le panneau d’aper&ccedil;u des URL.
2 Dans le menu Options du panneau URL, cliquez sur Modifier une URL.
3 Modifiez l’adresse URL.
4 Pour mettre &agrave; jour ce lien dans le document entier, s&eacute;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 &eacute;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&eacute;&eacute; ; il contient les URL export&eacute;es.
Importation d’URL
1 Dans le menu Options du panneau URL, cliquez sur Importer des URL.
2 S&eacute;lectionnez un fichier HTML, puis cliquez sur Ouvrir.
Toutes les URL de ce fichier sont import&eacute;es.
Derni&egrave;re mise &agrave; jour le 29/4/2010
Chapitre 12 : Tranches, survols et zones
sensibles
Cr&eacute;ation et modification de tranches
Les tranches sont les &eacute;l&eacute;ments de base de l’interactivit&eacute; dans Adobe&reg; Fireworks&reg;. Les tranches sont des objets Web qui
existent sous forme de code HTML. Vous pouvez les afficher, les s&eacute;lectionner et les renommer via le calque Web dans
le panneau Calques.
Le d&eacute;coupage consiste &agrave; diviser un document Fireworks en plusieurs segments dont chacun sera export&eacute; dans un
fichier distinct. Pendant l’exportation, Fireworks cr&eacute;e un fichier HTML contenant le code des tables permettant de
r&eacute;assembler le graphique dans un navigateur.
Le d&eacute;coupage consiste &agrave; diviser un document en plusieurs segments dont chacun sera export&eacute; dans un fichier distinct.
Le d&eacute;coupage d’une image pr&eacute;sente principalement trois avantages :
Optimisation des images Pour un t&eacute;l&eacute;chargement plus rapide.
Accroissement de l’interactivit&eacute; Les images peuvent r&eacute;pondre aux &eacute;v&eacute;nements de souris.
Simplification des mises &agrave; jour Pour les sections de pages Web modifi&eacute;es fr&eacute;quemment (photos et noms d’une page
consacr&eacute;e &agrave; l’employ&eacute; du mois, par exemple).
173
UTILISATION DE FIREWORKS CS5 174
Derni&egrave;re mise &agrave; jour le 29/4/2010
Tranches, survols et zones sensibles
Cr&eacute;ation de tranches rectangulaires
Pour cr&eacute;er des tranches rectangulaires, dessinez un trac&eacute; &agrave; l’aide de l’outil Tranche ou ins&eacute;rez une tranche en prenant
comme base un objet s&eacute;lectionn&eacute;. Utilisez les rep&egrave;res de d&eacute;coupe (lignes qui s’&eacute;tendent &agrave; partir de l’objet tranche) pour
d&eacute;finir les limites des fichiers d’image qui seront obtenus par fractionnement du document &agrave; l’exportation.
Trac&eacute; d’un objet tranche rectangulaire
1
S&eacute;lectionnez l’outil Tranche
.
2 Faites glisser le pointeur pour dessiner l’objet tranche.
Remarque : pour r&eacute;gler la position d’une tranche &agrave; 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&eacute;e.
Rel&acirc;chez la barre d’espace pour continuer &agrave; dessiner la tranche.
Cr&eacute;ation d’une tranche rectangulaire d’apr&egrave;s un objet s&eacute;lectionn&eacute;
1 S&eacute;lectionnez la commande Edition &gt; Ins&eacute;rer &gt; Tranche rectangulaire. La tranche est un rectangle dont la zone
comprend les bords les plus ext&eacute;rieurs de l’objet s&eacute;lectionn&eacute;.
2 Si plusieurs objets sont s&eacute;lectionn&eacute;s, s&eacute;lectionnez l’option Simple pour cr&eacute;er un seul objet tranche couvrant tous les
objets s&eacute;lectionn&eacute;s ou Multiple pour cr&eacute;er un objet tranche par objet s&eacute;lectionn&eacute;.
Cr&eacute;ation de tranches non rectangulaires
Pour cr&eacute;er des tranches non rectangulaires, utilisez l’outil Tranche polygonale. Les tranches non rectangulaires sont
pratiques pour essayer d’effectuer de fa&ccedil;on interactive une association &agrave; une image non rectangulaire.
Dessin d’objets tranches polygonaux
1 S&eacute;lectionnez l’outil Tranche polygonale
.
Derni&egrave;re mise &agrave; 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&eacute;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 &agrave; inclure l’objet en
entier pour &eacute;viter de cr&eacute;er des bords nets ind&eacute;sirables sur le graphique de la tranche.
4 Pour arr&ecirc;ter l’utilisation de l’outil Tranche polygonale, s&eacute;lectionnez un autre outil dans le panneau Outils. Il n’est
pas n&eacute;cessaire de cliquer sur le premier point pour fermer le polygone.
Remarque : les tranches polygonales associent tables HTML et cartes-images ; elles n&eacute;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&eacute;ation d’une tranche polygonale &agrave; partir d’un objet ou trac&eacute; vectoriel
1 S&eacute;lectionnez un trac&eacute; vectoriel.
2 S&eacute;lectionnez la commande Edition &gt; Insertion &gt; Tranche polygonale.
Cr&eacute;ation de tranches de texte HTML
Une tranche HTML repr&eacute;sente une zone dans laquelle un texte HTML ordinaire appara&icirc;t dans le navigateur. Le texte
HTML affich&eacute; dans la cellule de la table d&eacute;finie par la tranche est ensuite export&eacute;.
Les tranches HTML permettent de mettre &agrave; jour rapidement le texte des sites Web sans cr&eacute;er de nouveaux graphiques.
Remarque : le corps et le type de la police de caract&egrave;res pouvant &ecirc;tre d&eacute;finis dans le navigateur, l’aspect des tranches de
texte HTML peut varier selon les navigateurs et les syst&egrave;mes d’exploitation.
1 Tracez un objet tranche rectangulaire
2 Une fois l’objet tranche s&eacute;lectionn&eacute;, s&eacute;lectionnez HTML dans le menu contextuel Type de l’inspecteur des
propri&eacute;t&eacute;s.
3 Cliquez sur Edition.
4 Saisissez le texte dans la fen&ecirc;tre Modifier tranche du code HTML, puis ins&eacute;rez les balises HTML appropri&eacute;es pour
le mettre en forme.
Remarque : vous pouvez &eacute;galement appliquer les balises de mise en forme de texte HTML une fois le texte HTML
export&eacute;.
5 Cliquez sur OK pour appliquer les modifications et refermer la fen&ecirc;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&egrave;re mise &agrave; jour le 29/4/2010
Tranches, survols et zones sensibles
Affichage des tranches et des rep&egrave;res de d&eacute;coupe
Vous pouvez agir sur la visibilit&eacute; des tranches et des autres objets Web de votre document &agrave; l’aide des
panneaux Calques et Outils. Lorsque vous masquez des tranches dans l’ensemble du document, vous masquez du
m&ecirc;me coup les rep&egrave;res de d&eacute;coupe.
Affichage et s&eacute;lection de tranches
Le calque Web affiche tous les objets Web pr&eacute;sents dans le document.
1 Choisissez Fen&ecirc;tre &gt; Calques.
2 D&eacute;veloppez le calque Web en cliquant sur le triangle.
3 Cliquez sur le nom d’une tranche pour la s&eacute;lectionner.
Affichage et masquage des tranches
Une tranche masqu&eacute;e est invisible dans le fichier PNG Fireworks. Les objets tranches masqu&eacute;s peuvent &ecirc;tre export&eacute;s
dans le code HTML.
• Pour masquer une tranche, cliquez sur l’ic&ocirc;ne repr&eacute;sentant un œil
panneau Calques.
en regard de l’objet Web correspondant du
• Pour afficher une tranche masqu&eacute;e, cliquez sur la colonne Œil pour r&eacute;tablir sa visibilit&eacute;.
• Pour masquer ou afficher la totalit&eacute; des zones sensibles, des tranches et des rep&egrave;res, cliquez sur le bouton
Masquer/Afficher les tranches
dans la section Outils Web du panneau Outils. Vous pouvez &eacute;galement
cliquer sur l’ic&ocirc;ne repr&eacute;sentant un œil situ&eacute;e en regard du calque Web, dans le panneau Calques.
• Pour masquer ou afficher des rep&egrave;res de d&eacute;coupe dans un document, s&eacute;lectionnez Affichage &gt; Rep&egrave;res de d&eacute;coupe.
Modification de la couleur des objets tranches et des rep&egrave;res de d&eacute;coupe
Pour faciliter l’affichage et l’organisation des tranches et des rep&egrave;res de d&eacute;coupe, vous pouvez leur affecter des couleurs
uniques.
• Pour modifier la couleur d’un objet tranche s&eacute;lectionn&eacute;, s&eacute;lectionnez une couleur dans la case de couleur de
l’inspecteur des propri&eacute;t&eacute;s.
• Pour modifier la couleur des rep&egrave;res de d&eacute;coupe, choisissez la commande Edition &gt; Pr&eacute;f&eacute;rences (Windows) ou
Fireworks &gt; Pr&eacute;f&eacute;rences (Mac OS). Ensuite, s&eacute;lectionnez une nouvelle couleur de rep&egrave;re de d&eacute;coupe dans la
cat&eacute;gorie Rep&egrave;res et Grilles de la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences.
Remarque : lorsque vous pr&eacute;visualisez le document, les tranches d&eacute;s&eacute;lectionn&eacute;es s’affichent comme du papier calque
blanc.
Voir aussi
&laquo; Pr&eacute;f&eacute;rences de rep&egrave;res et de grilles &raquo; &agrave; la page 312
Modification des tranches
L’utilisation d’une disposition de tranche est comparable &agrave; celle d’un tableau dans une application de traitement de
texte. Lorsque vous faites glisser un rep&egrave;re de d&eacute;coupe pour redimensionner une tranche, toutes les tranches
rectangulaires adjacentes sont redimensionn&eacute;es en cons&eacute;quence.
Vous pouvez &eacute;galement redimensionner et transformer des tranches dans l’inspecteur des propri&eacute;t&eacute;s.
UTILISATION DE FIREWORKS CS5 177
Derni&egrave;re mise &agrave; jour le 29/4/2010
Tranches, survols et zones sensibles
Modification des tranches par d&eacute;placement des rep&egrave;res
Les rep&egrave;res de d&eacute;coupe d&eacute;terminent le p&eacute;rim&egrave;tre et la position de la tranche. Les rep&egrave;res qui s’&eacute;tendent au-del&agrave; des
objets tranches d&eacute;terminent la mani&egrave;re dont le reste du document sera d&eacute;coup&eacute; lors de l’exportation. Vous pouvez
modifier la forme d’un objet tranche rectangulaire en faisant glisser les rep&egrave;res de d&eacute;coupe qui entourent l’objet.
Ce proc&eacute;d&eacute; ne vous permet pas de redimensionner des objets tranches non rectangulaires.
Redimensionnement d’un objet tranche par glissement de ses rep&egrave;res de d&eacute;coupe
Remarque : lorsque vous faites glisser des rep&egrave;res de d&eacute;coupe entourant un bouton Fireworks dans la fen&ecirc;tre de
document, vous redimensionnez &eacute;galement la tranche d&eacute;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&egrave;res de d&eacute;coupe qui l’entourent.
Si plusieurs objets tranches sont align&eacute;s sur un m&ecirc;me rep&egrave;re de d&eacute;coupe, faites glisser ce rep&egrave;re pour redimensionner
simultan&eacute;ment tous les objets tranches.
Redimensionnement de plusieurs objets tranches par glissement d’un seul rep&egrave;re
De plus, lorsque vous faites glisser un rep&egrave;re le long d’une coordonn&eacute;e, tous les autres rep&egrave;res figurant sur cette
coordonn&eacute;e suivent le mouvement.
Redimensionnement d’une ou plusieurs tranches
1 Placez l’outil Pointeur ou Sous-s&eacute;lection sur un rep&egrave;re de d&eacute;coupe.
Le pointeur se transforme en pointeur de d&eacute;placement de rep&egrave;re
.
2 Faites glisser le rep&egrave;re de d&eacute;coupe vers l’emplacement souhait&eacute;.
Les tranches et toutes les tranches adjacentes sont redimensionn&eacute;es.
Repositionnement d’un rep&egrave;re de d&eacute;coupe tout au bord de la zone de travail
❖ A l’aide de l’outil Pointeur ou Sous-s&eacute;lection, faites glisser le rep&egrave;re de d&eacute;coupe au-del&agrave; des limites de la zone de
travail.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 178
Tranches, survols et zones sensibles
D&eacute;placement de rep&egrave;res de d&eacute;coupe adjacents
1 Tout en maintenant la touche Maj enfonc&eacute;e, faites glisser un rep&egrave;re de d&eacute;coupe sur les rep&egrave;res de d&eacute;coupe
adjacents.
2 D&eacute;posez le rep&egrave;re de d&eacute;coupe &agrave; l’emplacement souhait&eacute;.
Tous les rep&egrave;res de d&eacute;coupe que vous faites ainsi glisser seront d&eacute;plac&eacute;s vers cet emplacement.
Pour annuler cette op&eacute;ration et restaurer les positions initiales de tous les rep&egrave;res de d&eacute;coupe, rel&acirc;chez la
touche Maj avant de rel&acirc;cher le bouton de la souris.
Modification des tranches &agrave; l’aide d’outils
Vous pouvez utiliser les outils Pointeur, Sous-s&eacute;lection et Transformation pour remodeler ou redimensionner une
tranche.
Remarque : seules les tranches polygonales peuvent &ecirc;tre inclin&eacute;es ou d&eacute;form&eacute;es.
La taille des objets tranches adjacents n’&eacute;tant pas automatiquement ajust&eacute;e, des tranches risquent de se superposer
apr&egrave;s le redimensionnement ou la modification de la forme des tranches. Lorsque des tranches se chevauchent et que
des effets interactifs leur sont affect&eacute;s, la tranche situ&eacute;e au sommet de la pile est prioritaire. Pour &eacute;viter le
chevauchement des tranches, utilisez les rep&egrave;res de d&eacute;coupe pour modifier les tranches.
❖ Pour modifier la forme d’une tranche s&eacute;lectionn&eacute;e, proc&eacute;dez de l’une des mani&egrave;res suivantes :
• S&eacute;lectionnez l’outil Pointeur ou Sous-s&eacute;lection, et faites glisser les points d’angle de la tranche pour modifier sa
forme.
• Effectuez la transformation souhait&eacute;e &agrave; 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&ecirc;me
reste rectangulaire.
• Utilisez l’inspecteur des propri&eacute;t&eacute;s pour modifier la position et la taille d’un objet tranche de fa&ccedil;on num&eacute;rique.
Suppression d’une tranche
1 Dans le panneau Calques, s&eacute;lectionnez la tranche dans le calque Web.
2 Au bas de ce panneau, cliquez sur l’ic&ocirc;ne de la corbeille.
Lorsque vous faites glisser un symbole de bouton de la biblioth&egrave;que commune vers la page, une tranche visible sur la
zone de travail, mais non dans le calque Web, est automatiquement cr&eacute;&eacute;e.
Si vous s&eacute;lectionnez la tranche sur la zone de travail &agrave; l’aide de l’outil Pointeur et la supprimez, le symbole de bouton
tout entier est supprim&eacute;. Pour conserver le graphique sous-jacent, s&eacute;lectionnez la tranche/l’objet sur la zone de travail
&agrave; l’aide de l’outil Pointeur, puis s&eacute;lectionnez Modification &gt; Symbole &gt; S&eacute;parer. La tranche dispara&icirc;t mais le graphique
de bouton de l’&eacute;tat 1 est conserv&eacute;. Les graphiques des &eacute;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&eacute; simple, utilisez la m&eacute;thode du survol par glisser-d&eacute;poser.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 179
Tranches, survols et zones sensibles
• Pour obtenir une interactivit&eacute; plus complexe, utilisez le panneau Comportements. Les comportements de
Fireworks sont compatibles avec ceux d’Adobe Dreamweaver&reg;. Apr&egrave;s avoir export&eacute; un survol de Fireworks vers
Dreamweaver, vous pouvez modifier les comportements Fireworks &agrave; l’aide du panneau Comportements
de Dreamweaver.
Ajout d’une interactivit&eacute; simple aux tranches
La technique de survol par glisser-d&eacute;poser est la plus rapide et la plus efficace pour cr&eacute;er des effets de survol et de
permutation d’images. Elle permet en particulier de d&eacute;terminer le comportement d’une tranche lorsque le pointeur la
survole. Le r&eacute;sultat obtenu est un graphique appel&eacute; image survol&eacute;e.
Lorsqu’une tranche est s&eacute;lectionn&eacute;e, un petit cercle avec un r&eacute;ticule appara&icirc;t au centre de la tranche. Il s’agit d’une
poign&eacute;e de comportement.
A
B
C
A. Nom de la tranche B. Poign&eacute;e de comportement C. Poign&eacute;e de s&eacute;lection
En faisant glisser la poign&eacute;e de comportement d’une tranche de d&eacute;clenchement et en la d&eacute;posant sur une tranche cible,
vous pouvez ais&eacute;ment cr&eacute;er des effets de survol et de permutation d’images. La tranche de d&eacute;clenchement et la tranche
cible peuvent correspondre &agrave; la m&ecirc;me tranche.
Remarque : les zones sensibles disposent &eacute;galement de poign&eacute;es de comportement pour l’int&eacute;gration d’effets de survol.
A propos des survols
Les survols fonctionnent tous de la m&ecirc;me mani&egrave;re : lorsque le pointeur de la souris survole un graphique, cette action
d&eacute;clenche l’affichage d’un autre graphique. Le d&eacute;clencheur est toujours un objet Web (tranche, zone sensible ou
bouton).
Derni&egrave;re mise &agrave; 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’&eacute;tat 1 avec une image situ&eacute;e directement au-dessous dans l’&eacute;tat 2.
Vous pouvez &eacute;galement concevoir des survols plus &eacute;labor&eacute;s. Les survols de permutation d’images permettent de
permuter des images &agrave; partir de n’importe quel &eacute;tat. Les survols s&eacute;par&eacute;s permettent de permuter une image &agrave; partir
d’une tranche autre que la tranche de d&eacute;clenchement.
Lorsque vous s&eacute;lectionnez dans Fireworks un objet Web d&eacute;clencheur cr&eacute;&eacute; &agrave; l’aide d’une poign&eacute;e de comportement ou
du panneau Comportements, toutes ses relations de comportements s’affichent.
Par d&eacute;faut, un trait de comportement bleu repr&eacute;sente une interaction de survol.
Cr&eacute;ation et association d’un survol simple
Un survol simple permute l’&eacute;tat directement sous l’&eacute;tat du dessus et implique une seule tranche.
1 Assurez-vous que l’objet de d&eacute;clenchement ne se trouve pas sur un calque partag&eacute;.
2 Choisissez Edition &gt; Insertion &gt; Tranche rectangulaire ou Tranche polygonale pour cr&eacute;er une tranche par-dessus
l’objet de d&eacute;clenchement.
3 Cliquez sur le bouton Nouvel &eacute;tat / Dupliquer l’&eacute;tat dans le panneau Etats pour cr&eacute;er un &eacute;tat.
4 Cr&eacute;ez, collez ou importez une image &agrave; utiliser pour la permutation dans le nouvel &eacute;tat.
Placez l’image sous la tranche cr&eacute;&eacute;e &agrave; l’&eacute;tape 2. M&ecirc;me si vous vous trouvez dans l’image 2, la tranche est visible.
5 S&eacute;lectionnez Etat 1 dans le panneau Etats pour revenir &agrave; l’&eacute;tat associ&eacute; &agrave; l’image d’origine.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 181
Tranches, survols et zones sensibles
6 S&eacute;lectionnez la tranche, puis placez le pointeur au-dessus de la poign&eacute;e de comportement.
Remarque : vous pouvez s&eacute;lectionner la tranche dans n’importe quel &eacute;tat.
7 Cliquez sur la poign&eacute;e de comportement et sur Ajouter le comportement Survol simple dans le menu.
8 Cliquez sur l’onglet Aper&ccedil;u pour tester le survol simple ou appuyez sur la touche F12 pour le pr&eacute;visualiser dans un
navigateur.
Cr&eacute;ation et association d’un survol s&eacute;par&eacute;
Un survol s&eacute;par&eacute; permute une image sous un objet Web lorsque le pointeur survole un autre objet Web. En r&eacute;ponse &agrave;
un &eacute;v&eacute;nement souris (survol ou clic), une image s’affiche &agrave; un autre endroit de la page Web. L’image survol&eacute;e est
consid&eacute;r&eacute;e comme le d&eacute;clencheur, alors que l’image qui change est consid&eacute;r&eacute;e comme la cible.
Vous devez tout d’abord configurer le d&eacute;clencheur, les tranches cibles et l’&eacute;tat dans lequel se trouve l’image de
permutation. Vous devez ensuite relier le d&eacute;clencheur &agrave; la tranche cible &agrave; l’aide d’un trait de comportement. Le
d&eacute;clencheur d’un survol s&eacute;par&eacute; peut &ecirc;tre une tranche, une zone sensible ou un bouton.
1 Choisissez Edition &gt; Insertion &gt; Tranche rectangulaire, Tranche polygonale ou Zone sensible pour affecter une
tranche ou une zone sensible &agrave; l’image de d&eacute;clenchement (cette &eacute;tape n’est pas indispensable si l’objet s&eacute;lectionn&eacute;
est un bouton ou si une tranche ou une zone sensible recouvre d&eacute;j&agrave; l’image).
2 Cliquez sur le bouton Nouvel &eacute;tat / Dupliquer l’&eacute;tat dans le panneau Etats pour cr&eacute;er un nouvel &eacute;tat.
3 Placez une deuxi&egrave;me image (la cible) dans le nouvel &eacute;tat.
4 Positionnez l’&eacute;tat n’importe o&ugrave; sur la zone de travail, en &eacute;vitant l’emplacement situ&eacute; sous la tranche cr&eacute;&eacute;e &agrave; l’&eacute;tape 1.
5 S&eacute;lectionnez l’image, puis choisissez la commande Edition &gt; Insertion &gt; Tranche rectangulaire ou Tranche
polygonale pour associer une tranche &agrave; cette image.
6 S&eacute;lectionnez Etat 1 dans le panneau Etats pour revenir &agrave; l’&eacute;tat associ&eacute; &agrave; l’image d’origine.
7 S&eacute;lectionnez la tranche, la zone sensible ou le bouton qui couvre la zone de d&eacute;clenchement (l’image d’origine), puis
placez le pointeur sur la poign&eacute;e de comportement.
8 Faites glisser la poign&eacute;e de comportement de la tranche de d&eacute;clenchement ou de la zone sensible vers la tranche
cible.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 182
Tranches, survols et zones sensibles
Le trait de comportement s’&eacute;tend du centre du d&eacute;clencheur vers l’angle sup&eacute;rieur gauche de la tranche cible, et la
bo&icirc;te de dialogue Permuter les images s’affiche.
9 Dans le menu contextuel Permuter l’image &agrave; partir de, s&eacute;lectionnez l’&eacute;tat cr&eacute;&eacute; &agrave; l’&eacute;tape 2, puis cliquez sur le
bouton OK.
10 Affichez l’aper&ccedil;u du survol s&eacute;par&eacute;, puis testez-le.
Application de plusieurs survols &agrave; une tranche
Tranche d&eacute;clenchant des comportements de survol et de survol s&eacute;par&eacute;
1 Faites glisser une poign&eacute;e de comportement de la tranche s&eacute;lectionn&eacute;e vers le bord de cette tranche ou d’une autre
tranche.
• Pour cr&eacute;er une image de permutation, faites glisser la poign&eacute;e vers le bord sup&eacute;rieur gauche de la m&ecirc;me tranche.
• Pour cr&eacute;er un survol s&eacute;par&eacute;, faites-la glisser vers une autre tranche.
2 S&eacute;lectionnez l’&eacute;tat de la permutation d’images, puis cliquez sur OK.
Suppression d’un survol par glisser-d&eacute;poser d’une tranche, d’une zone sensible ou d’un
bouton
❖ Cliquez sur le trait de comportement de couleur bleue &agrave; supprimer, puis cliquez sur OK.
Ajout d’une interactivit&eacute; complexe aux tranches
Utilisez les options du panneau Comportements pour cr&eacute;er et modifier des interactions personnalis&eacute;es. Les
interactions personnalis&eacute;es reposent sur des comportements existants.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 183
Tranches, survols et zones sensibles
Options de comportement
Remarque : la m&eacute;thode de survol par glisser-d&eacute;poser est recommand&eacute;e pour les survols simples, s&eacute;par&eacute;s et complexes.
Survol simple Permet d’ajouter un comportement de survol &agrave; la tranche s&eacute;lectionn&eacute;e en utilisant l’&eacute;tat 1 pour l’&eacute;tat
Relev&eacute; et l’&eacute;tat 2 pour l’&eacute;tat Au-dessus. Apr&egrave;s avoir s&eacute;lectionn&eacute; ce comportement, vous devez cr&eacute;er une image dans le
deuxi&egrave;me &eacute;tat, sous la m&ecirc;me tranche, pour cr&eacute;er l’&eacute;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&eacute;finition de l’image de la barre de navigation Permet de d&eacute;finir une tranche comme faisant partie d’une barre de
navigation Fireworks. Toutes les tranches faisant partie de la barre de navigation doivent poss&eacute;der ce comportement.
L’option D&eacute;finir image barre de navigation est en fait un groupe de comportements contenant les comportements
Barre de navigation - Au-dessus, Barre de navigation - Enfonc&eacute;e et Restaurer la barre de navigation. Ce comportement
est d&eacute;fini automatiquement par d&eacute;faut lorsque vous cr&eacute;ez, avec l’&eacute;diteur de boutons, un bouton qui inclut un &eacute;tat
Inclure l’&eacute;tat au-dessus enfonc&eacute; ou Afficher l’image enfonc&eacute;e lors du chargement. Lorsque vous cr&eacute;ez un bouton &agrave;
deux &eacute;tats, un comportement de survol simple est affect&eacute; &agrave; sa tranche. Lorsque vous cr&eacute;ez un bouton &agrave; trois ou quatre
&eacute;tats, un comportement D&eacute;finir image barre de navigation est affect&eacute; &agrave; sa tranche.
Remarque : vous ne pouvez pas changer l’&eacute;v&eacute;nement associ&eacute; aux comportements Survol simple et D&eacute;finir image barre de
navigation.
Permutation d’images Permet de remplacer l’image qui figure sous la tranche sp&eacute;cifi&eacute;e par le contenu d’un autre &eacute;tat
ou d’un fichier externe.
Restauration de permutation d’images Permet de redonner son aspect d’origine &agrave; l’objet cible de l’&eacute;tat 1.
Barre de navigation - Au-dessus Indique l’&eacute;tat Au-dessus de la tranche s&eacute;lectionn&eacute;e lorsqu’elle fait partie d’une barre
de navigation et permet &eacute;ventuellement de sp&eacute;cifier les &eacute;tats Pr&eacute;charger les images et Inclure l’&eacute;tat au-dessus enfonc&eacute;.
Barre de navigation - Enfonc&eacute;e Indique l’&eacute;tat Enfonc&eacute; de la tranche s&eacute;lectionn&eacute;e lorsqu’elle fait partie d’une barre de
navigation et permet &eacute;ventuellement de sp&eacute;cifier l’&eacute;tat Pr&eacute;charger les images.
Restaurer la barre de navigation Permet de r&eacute;tablir l’&eacute;tat Relev&eacute; de toutes les autres tranches de la barre de navigation.
Afficher le menu contextuel Permet d’affecter un menu contextuel &agrave; une tranche ou &agrave; une zone sensible. Vous pouvez
appliquer un comportement de menu contextuel &agrave; l’aide de l’&eacute;diteur de menus contextuels.
D&eacute;finition du texte de la barre d’&eacute;tat Permet de d&eacute;finir le texte d’un message &agrave; afficher dans la barre d’&eacute;tat, en bas de
la plupart des fen&ecirc;tres de navigateur.
Association de comportements &agrave; une tranche s&eacute;lectionn&eacute;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&eacute;lectionnez un ou plusieurs comportements.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 184
Tranches, survols et zones sensibles
Changement de l’&eacute;v&eacute;nement de souris activant le comportement
1 S&eacute;lectionnez la tranche ou zone sensible de d&eacute;clenchement qui contient le comportement &agrave; modifier.
Tous les comportements associ&eacute;s &agrave; cette tranche ou zone sensible s’affichent dans le panneau Comportements.
2 S&eacute;lectionnez le comportement &agrave; modifier.
3 Cliquez sur la fl&egrave;che situ&eacute;e &agrave; c&ocirc;t&eacute; de l’&eacute;v&eacute;nement, puis s&eacute;lectionnez un nouvel &eacute;v&eacute;nement dans le menu contextuel.
Cette option n’est pas disponible pour le comportement de survol simple.
onMouseOver D&eacute;clenche le comportement lorsque le pointeur survole la zone de d&eacute;clenchement.
onMouseOut D&eacute;clenche le comportement lorsque le pointeur quitte la zone de d&eacute;clenchement.
onClick D&eacute;clenche le comportement lorsque vous cliquez sur l’objet de d&eacute;clenchement.
onLoad D&eacute;clenche le comportement lorsque la page Web est charg&eacute;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 &ecirc;tre au format GIF, GIF anim&eacute;, JPEG ou PNG. Si vous s&eacute;lectionnez un fichier externe
comme source d’images, Fireworks permute ce fichier avec la tranche cible lorsque la permutation d’images est
d&eacute;clench&eacute;e dans un navigateur Web.
Si le fichier n’a pas la m&ecirc;me largeur et la m&ecirc;me hauteur que la tranche dans laquelle s’effectue la permutation, le
navigateur redimensionne le fichier pour l’adapter &agrave; l’objet tranche. Le redimensionnement d’un fichier peut &ecirc;tre
pr&eacute;judiciable &agrave; sa qualit&eacute;, et tout particuli&egrave;rement pour les images au format GIF anim&eacute;.
1 Dans la bo&icirc;te de dialogue Permuter les images, Barre de navigation - Au-dessus ou Barre de navigation - Enfonc&eacute;e,
s&eacute;lectionnez Fichier d’image, puis cliquez sur l’ic&ocirc;ne de dossier.
2 Recherchez le fichier &agrave; utiliser, puis cliquez sur Ouvrir.
3 Si le fichier externe est au format GIF anim&eacute;, d&eacute;s&eacute;lectionnez l’option Pr&eacute;charger les images. Cela permet d’&eacute;viter les
probl&egrave;mes d’affichage des fichiers GIF en tant qu’&eacute;tats de survols.
Remarque : Fireworks cr&eacute;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 &agrave; partir du code HTML Fireworks
export&eacute;. Placez les fichiers externes sur votre site local avant de les utiliser dans Fireworks en tant qu’images de
permutation ; par ailleurs, veillez &agrave; t&eacute;l&eacute;charger les fichiers d’image externes lorsque vous transf&eacute;rez les fichiers sur
le Web.
Pr&eacute;paration des tranches pour l’exportation
Pour pr&eacute;parer les tranches en vue de leur exportation, utilisez l’inspecteur des propri&eacute;t&eacute;s.
Propri&eacute;t&eacute;s de tranche dans l’inspecteur des propri&eacute;t&eacute;s
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 185
Tranches, survols et zones sensibles
Pour optimiser rapidement une tranche, s&eacute;lectionnez un param&egrave;tre pr&eacute;d&eacute;fini dans le menu contextuel Param&egrave;tres
d’exportation de l’inspecteur des propri&eacute;t&eacute;s ou du panneau Optimisation. Pour afficher les options d&eacute;taill&eacute;es,
reportez-vous &agrave; la section &laquo; Optimisation dans l’espace de travail &raquo; &agrave; la page 240.
Affectation d’adresses URL &agrave; des tranches
Lorsque vous affectez une URL &agrave; une tranche, l’utilisateur peut acc&eacute;der &agrave; cette adresse en cliquant sur la zone d&eacute;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&eacute;t&eacute;s.
Si votre fichier contient un certain nombre de pages que vous avez l’intention d’exporter, ouvrez le menu contextuel
Lien, puis s&eacute;lectionnez l’une des pages pour l’URL. Une fois les pages export&eacute;es, ce lien renvoie automatiquement
l’utilisateur vers la page sp&eacute;cifi&eacute;e.
Si vous envisagez de r&eacute;utiliser des adresses URL, cr&eacute;ez une biblioth&egrave;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’&eacute;cran. Ces applications transmettent &agrave; 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&eacute;t&eacute;s, entrez le texte dans le champ de texte secondaire.
S&eacute;lection de tranches ou de zones sensibles sans texte de description
Vous pouvez s&eacute;lectionner les tranches et zones sensibles pour lesquelles vous n’avez pas indiqu&eacute; de texte de
description. Vous pouvez alors d&eacute;finir un texte de description par d&eacute;faut pour ces objets.
❖ S&eacute;lectionnez Commandes &gt; Web &gt; S&eacute;l. texte ALT vides.
D&eacute;finition du texte de description par d&eacute;faut
Vous pouvez s&eacute;lectionner les tranches et zones sensibles pour lesquelles vous n’avez pas indiqu&eacute; de texte de description
et d&eacute;finir un texte ALT par d&eacute;faut pour celles-ci.
❖ S&eacute;lectionnez Commandes &gt; Web &gt; Texte ALT et entrez le texte de description par d&eacute;faut.
Affectation d’une cible &agrave; une tranche ou &agrave; une zone sensible s&eacute;lectionn&eacute;e
Une cible est un autre &eacute;tat de page Web ou un autre navigateur Web dans lequel s’ouvre le document li&eacute;.
❖ Dans la zone de texte Cible, entrez le nom de l’&eacute;tat HTML ou s&eacute;lectionnez une cible r&eacute;serv&eacute;e dans le menu
contextuel Cible :
_blank Permet de charger les documents li&eacute;s dans une nouvelle fen&ecirc;tre, sans nom, du navigateur.
_parent Permet de charger les documents li&eacute;s dans le jeu d’&eacute;tats parent ou dans la fen&ecirc;tre de l’&eacute;tat contenant le lien.
Si l’&eacute;tat contenant le lien n’est pas imbriqu&eacute;, le document li&eacute; est charg&eacute; dans la fen&ecirc;tre principale du navigateur.
_self Permet de charger le document li&eacute; dans le m&ecirc;me &eacute;tat ou la m&ecirc;me fen&ecirc;tre que le lien. Il s’agit de la cible par
d&eacute;faut, de sorte qu’il est le plus souvent inutile de la sp&eacute;cifier.
_top Permet de charger les documents li&eacute;s dans la fen&ecirc;tre principale du navigateur, rempla&ccedil;ant ainsi tous les &eacute;tats.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 186
Tranches, survols et zones sensibles
Affectation de nom aux tranches
Un d&eacute;coupage permet de d&eacute;couper une image en plusieurs parties. Etant donn&eacute; que chaque partie d’&eacute;tat est export&eacute;e
s&eacute;par&eacute;ment, chacune doit porter un nom unique. Pour cela, vous pouvez utiliser la convention de nom par d&eacute;faut, ou
affecter des noms personnalis&eacute;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&eacute;
❖ Proc&eacute;dez de l’une des mani&egrave;res suivantes :
• S&eacute;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&eacute;t&eacute;s, puis appuyez sur Entr&eacute;e.
• Dans le calque Web, cliquez deux fois sur le nom de la tranche, entrez un nouveau nom, et appuyez sur la
touche Entr&eacute;e.
Affectation automatique d’un nom &agrave; un fichier de tranche
❖ Lorsque vous exportez votre image d&eacute;coup&eacute;e en tranches, entrez un nom dans la zone de texte Nom de fichier
(Windows) ou Nom (Mac OS) de la bo&icirc;te de dialogue d’exportation. N’ajoutez pas d’extension de fichier.
Modification de la convention de d&eacute;nomination par d&eacute;faut
Vous pouvez cr&eacute;er une convention de nom comprenant jusqu’&agrave; huit &eacute;l&eacute;ments. Un &eacute;l&eacute;ment peut comprendre l’une des
options de d&eacute;nomination automatique suivantes :
Option
Description
Aucune
Aucun nom n’est appliqu&eacute; &agrave; l’&eacute;l&eacute;ment.
nom document
L’&eacute;l&eacute;ment prend le nom du document.
&laquo; tranche &raquo;
Vous pouvez ins&eacute;rer le mot &laquo; tranche &raquo; dans la convention de d&eacute;nomination.
Tranche n&deg; (1, 2, 3, ...)
L’&eacute;l&eacute;ment est &eacute;tiquet&eacute; de fa&ccedil;on num&eacute;rique ou alphab&eacute;tique, selon le style s&eacute;lectionn&eacute;.
Tranche n&deg; (01, 02, 03, ...)
Tranche n&deg; (A, B, C, ...)
Tranche n&deg; (a, b, c, ...)
Ligne/colonne (l3_c2, l4_c7, ...)
Ligne (l##) et Colonne (c##) d&eacute;signent les lignes et colonnes du tableau que les navigateurs Web
utilisent pour reconstruire une image d&eacute;coup&eacute;e. Vous pouvez utiliser ces informations dans
la convention de nom.
Soulign&eacute;
L’&eacute;l&eacute;ment utilise l’un de ces caract&egrave;res, en g&eacute;n&eacute;ral comme s&eacute;parateur entre d’autres &eacute;l&eacute;ments.
Point
Espace
Tiret
Par exemple, si le nom du document est mondoc, selon la convention nom.doc + &laquo; tranche &raquo; + n&deg; de tranche (A,B,C...),
la tranche est appel&eacute;e mondoctrancheA.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 187
Tranches, survols et zones sensibles
Si une tranche s’&eacute;tend sur plusieurs &eacute;tats, Fireworks ajoute par d&eacute;faut un num&eacute;ro au nom de fichier de chaque &eacute;tat. Par
exemple, si vous entrez le nom de fichier de tranche personnalis&eacute; accueil pour un bouton &agrave; trois &eacute;tats, Fireworks
nomme le graphique de l’&eacute;tat Relev&eacute; accueil.gif, celui de l’&eacute;tat Au-dessus accueil_f2.gif et celui de l’&eacute;tat Enfonc&eacute;,
accueil_f3.gif. Vous pouvez cr&eacute;er votre propre convention de d&eacute;nomination pour les tranches multi-&eacute;tats, dans la bo&icirc;te
de dialogue Configuration HTML.
1 Choisissez Fichier &gt; Configuration HTML pour ouvrir la bo&icirc;te de dialogue Configuration HTML.
2 Cliquez sur l’onglet Propre au document.
3 Dans la section Noms des fichiers de d&eacute;coupe, cr&eacute;ez votre propre convention de nom en effectuant des s&eacute;lections
dans les listes.
4 (Facultatif) Pour d&eacute;finir ces donn&eacute;es comme param&egrave;tres par d&eacute;faut pour tous les nouveaux documents Fireworks,
cliquez sur Param&egrave;tres par d&eacute;faut.
Remarque : soyez prudent lorsque vous s&eacute;lectionnez Aucun comme option pour la convention de nom des tranches.
Si vous s&eacute;lectionnez cette option pour l’un des trois premiers menus, Fireworks exporte des fichiers de tranche qui
s’&eacute;craseront successivement. Vous n’obtiendrez en d&eacute;finitive qu’un seul graphique export&eacute; et un tableau affichant ce
graphique dans chaque cellule.
D&eacute;finition du mode d’exportation des tables HTML
Le d&eacute;coupage d&eacute;finit la pr&eacute;sentation de la structure de la table HTML lorsqu’un document Fireworks est export&eacute; pour
&ecirc;tre utilis&eacute; sur le Web.
Lorsque vous exportez au format HTML un document Fireworks d&eacute;coup&eacute;, le document est assembl&eacute; &agrave; l’aide d’une
table HTML. Chaque &eacute;l&eacute;ment d&eacute;coup&eacute; du document Fireworks occupe une cellule de la table. Une fois export&eacute;e, une
tranche Fireworks correspond &agrave; une cellule de la table dans le code HTML. Vous pouvez sp&eacute;cifier la m&eacute;thode de
reconstruction d’une table Fireworks dans un navigateur (en pr&eacute;cisant si vous souhaitez utiliser des espaces ou des
tables imbriqu&eacute;es).
• Les s&eacute;parateurs sont des images permettant d’aligner correctement les cellules d’un tableau lorsqu’elles sont
affich&eacute;es dans un navigateur.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 188
Tranches, survols et zones sensibles
• Une table imbriqu&eacute;e est litt&eacute;ralement une table figurant dans une autre table. Les tables imbriqu&eacute;es ne comportent
pas de s&eacute;parateurs. Elles peuvent mettre plus de temps &agrave; &ecirc;tre charg&eacute;es dans les navigateurs mais, dans la mesure o&ugrave;
elles ne comportent pas de s&eacute;parateurs, il est plus simple de modifier leur code HTML.
1 Choisissez Fichier &gt; Configuration HTML ou cliquez sur le bouton Options de la bo&icirc;te de dialogue Exporter.
2 Cliquez sur l’onglet Table.
3 Dans le menu contextuel Espace avec, s&eacute;lectionnez une option d’espacement :
Tables imbriqu&eacute;es — Pas de s&eacute;parateurs Permet de cr&eacute;er une table imbriqu&eacute;e sans s&eacute;parateur.
Table unique — Pas de s&eacute;parateur Permet de cr&eacute;er une seule table sans s&eacute;parateur. Cette option risque
d’entra&icirc;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&eacute;parateur, lequel peut ensuite &ecirc;tre redimensionn&eacute;, si n&eacute;cessaire, dans le code HTML. Cela g&eacute;n&egrave;re une ligne de
1 pixel de hauteur dans la partie sup&eacute;rieure de la table et une colonne de 1 pixel de largeur dans la partie droite
de la table.
4 S&eacute;lectionnez une couleur de cellule pour les tranches HTML :
Remarque : si vous s&eacute;lectionnez une couleur dans la fen&ecirc;tre contextuelle des couleurs, elle est appliqu&eacute;e aux
tranches HTML uniquement. Les tranches d’image conservent la couleur de la zone de travail.
5 Dans le menu contextuel Contenu, s&eacute;lectionnez les &eacute;l&eacute;ments &agrave; ins&eacute;rer dans les cellules vides :
Aucune Laisse les cellules vides.
Image d’espacement Place une petite image transparente appel&eacute;e spacer.gif dans les cellules vides.
Espace ins&eacute;cable Place une balise d’espacement HTML dans les cellules vides. Cette cellule est d’aspect creux.
Remarque : des cellules vides ne sont ajout&eacute;es que si vous avez d&eacute;s&eacute;lectionn&eacute; Inclure les zones sans tranches dans
la bo&icirc;te de dialogue Exporter pendant l’exportation.
6 Cliquez sur OK.
Remarque : pour appliquer les param&egrave;tres par d&eacute;faut &agrave; tous les nouveaux documents, vous pouvez sp&eacute;cifier des
param&egrave;tres d’exportation de table pour chaque document, ou utiliser le bouton Param&egrave;tres par d&eacute;faut (dans
l’onglet Propre au document de la bo&icirc;te de dialogue Configuration HTML).
Zones sensibles et cartes-images
Les concepteurs Web peuvent utiliser des zones sensibles pour cr&eacute;er des petites parties interactives dans un graphique
plus grand en liant des zones de ce graphique Web &agrave; une URL. Dans Fireworks, vous pouvez cr&eacute;er une carte-image en
exportant le code HTML d’un document contenant des zones sensibles.
Derni&egrave;re mise &agrave; 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&eacute;coup&eacute;s. Le
d&eacute;coupage n&eacute;cessite davantage de puissance de traitement en raison du code HTML suppl&eacute;mentaire utilis&eacute; pour le
t&eacute;l&eacute;chargement et le r&eacute;assemblage des graphiques d&eacute;coup&eacute;s.
Remarque : il est possible de cr&eacute;er une carte-image d&eacute;coup&eacute;e. L’exportation d’une carte-image d&eacute;coup&eacute;e g&eacute;n&egrave;re en g&eacute;n&eacute;ral
de nombreux fichiers graphiques. Pour plus d’informations sur le d&eacute;coupage, reportez-vous &agrave; la section &laquo; Cr&eacute;ation de
tranches rectangulaires &raquo; &agrave; la page 174.
Cr&eacute;ation de zones sensibles
• Les zones sensibles sont une solution id&eacute;ale lorsque vous liez des zones d’une image &agrave; des pages Web et que vous
ne souhaitez pas que ces zones soient s&eacute;lectionn&eacute;es ou produisent des effets de survol en r&eacute;ponse &agrave; un &eacute;v&eacute;nement
souris (d&eacute;placement ou clic).
• Les zones sensibles et les cartes-images sont &eacute;galement tr&egrave;s int&eacute;ressantes si le graphique sur lequel vous avez plac&eacute;
les zones sensibles &eacute;tait mieux export&eacute; sous forme d’un seul fichier graphique. En d’autres termes, l’ensemble du
graphique est mieux export&eacute; en utilisant les m&ecirc;mes formats de fichier et param&egrave;tres d’optimisation.
• Les zones sensibles peuvent prendre une forme rectangulaire, circulaire ou polygonale. Les polygones sont utiles
lorsque vous utilisez des images imbriqu&eacute;es.
• Vous pouvez s&eacute;lectionner un objet et ins&eacute;rer la zone sensible sur cet objet.
Cr&eacute;ation d’une zone sensible rectangulaire ou circulaire
1 Dans la section Web du panneau Outils, s&eacute;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&eacute;e pour dessiner &agrave; partir du point central.
Remarque : vous pouvez ajuster la position d’une zone sensible &agrave; mesure que vous la dessinez. Tout en maintenant le
bouton de la souris et la barre d’espace enfonc&eacute;s, faites glisser la zone sensible vers un autre emplacement de la zone
de travail. Rel&acirc;chez la barre d’espace pour continuer &agrave; dessiner la zone sensible.
UTILISATION DE FIREWORKS CS5 190
Derni&egrave;re mise &agrave; jour le 29/4/2010
Tranches, survols et zones sensibles
Cr&eacute;ation d’une zone sensible de forme irr&eacute;guli&egrave;re
1
S&eacute;lectionnez l’outil Zone sensible polygonale
.
2 Cliquez pour placer des points vectoriels, un peu de la m&ecirc;me fa&ccedil;on que pour dessiner des segments de droite avec
l’outil Plume. Le fond d&eacute;finit la zone sensible, que le trac&eacute; soit ouvert ou ferm&eacute;.
Cr&eacute;ation d’une zone sensible en tra&ccedil;ant un ou plusieurs objets s&eacute;lectionn&eacute;s
1 S&eacute;lectionnez plusieurs objets, puis choisissez la commande Edition &gt; Insertion &gt; Zone sensible.
2 Cliquez sur Simple pour cr&eacute;er une seule zone sensible rectangulaire couvrant tous les objets, ou sur Multiple pour
cr&eacute;er plusieurs zones sensibles (une par objet).
Le calque Web affiche la ou les nouvelles zones sensibles.
Conversion d’une zone sensible s&eacute;lectionn&eacute;e en rectangle, cercle ou polygone
❖ Dans l’inspecteur des propri&eacute;t&eacute;s, s&eacute;lectionnez Rectangle, Cercle ou Polygone dans le menu contextuel Forme de la
zone sensible.
Pr&eacute;paration des zones sensibles pour l’exportation
Affectez des propri&eacute;t&eacute;s de zone sensible (adresses URL ou texte de description, par exemple) dans l’inspecteur des
propri&eacute;t&eacute;s, comme vous le feriez pour les propri&eacute;t&eacute;s de tranches.
Cr&eacute;ation de cartes-images
Apr&egrave;s avoir ins&eacute;r&eacute; 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&eacute;n&egrave;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&ocirc;t&eacute; client.
Vous pouvez &eacute;galement copier la carte-image dans le Presse-papiers puis la coller dans Dreamweaver ou dans un autre
&eacute;diteur HTML.
Pour plus d’informations sur l’insertion de contenus Fireworks export&eacute;s dans Dreamweaver, reportez-vous &agrave; la section
&laquo; Utilisation de Dreamweaver &raquo; &agrave; la page 266
1 Optimisez le graphique avant son exportation.
2 Choisissez Fichier &gt; Exporter.
3 Si vous exportez l’image, acc&eacute;dez au dossier de destination du fichier HTML, puis nommez le fichier.
Si vous avez d&eacute;j&agrave; cr&eacute;&eacute; la structure de fichiers locale de votre site Web, enregistrez le graphique dans le dossier
appropri&eacute; de ce site.
4 Dans le menu contextuel Type, s&eacute;lectionnez Documents HTML et Images.
5 Dans le menu contextuel HTML, s&eacute;lectionnez une option :
Exporter le fichier HTML Cr&eacute;e le fichier HTML requis et les fichiers de graphiques correspondants &agrave; importer dans
Dreamweaver ou dans un autre &eacute;diteur HTML.
Copier dans le Presse-papiers Copie tous les codes HTML (ainsi qu’une table si le document est d&eacute;coup&eacute; en
tranches) dans le Presse-papiers ; ils seront ensuite coll&eacute;s dans Dreamweaver ou dans un autre &eacute;diteur HTML.
Remarque : pour les tranches, s&eacute;lectionnez Aucun si le document ne contient pas de tranches.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 191
Tranches, survols et zones sensibles
6 (Exportation uniquement) Si n&eacute;cessaire, s&eacute;lectionnez Placer les images dans des sous-dossiers, puis ouvrez le
dossier appropri&eacute;.
7 Cliquez sur Enregistrer.
8 Lorsque vous exportez des fichiers, Fireworks permet d’utiliser les commentaires en HTML pour identifier
clairement le d&eacute;but et la fin du code des cartes-images et autres &eacute;l&eacute;ments Web. Par d&eacute;faut, aucun commentaire n’est
ajout&eacute; dans le code HTML. Pour en ajouter, sous l’onglet G&eacute;n&eacute;ral de la bo&icirc;te de dialogue Configuration HTML,
cliquez sur Inclure les commentaires HTML.
Cr&eacute;ation de survols avec zones sensibles
Utilisez la m&eacute;thode du survol par glisser-d&eacute;poser pour associer un effet de survol s&eacute;par&eacute; &agrave; une zone sensible. La zone
cible doit &ecirc;tre d&eacute;limit&eacute;e par une tranche. Les effets de survol sont appliqu&eacute;s aux zones sensibles de la m&ecirc;me mani&egrave;re
que pour les tranches.
Remarque : une zone sensible ne peut d&eacute;clencher qu’un survol s&eacute;par&eacute;. Elle ne peut pas &ecirc;tre la cible d’un survol provenant
d’une autre zone sensible ou d’une tranche.
Une fois que vous avez affect&eacute; un survol s&eacute;par&eacute; &agrave; une zone sensible, le trait de comportement de connexion n’est visible
que lorsque la zone sensible est s&eacute;lectionn&eacute;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&eacute;clencheur, placez une zone sensible
par-dessus une tranche pour d&eacute;clencher une action ou un comportement.
Vous pouvez &eacute;galement placer une tranche par-dessus le graphique, puis une zone sensible au-dessus du texte. Le
survol du texte par le pointeur d&eacute;clenche alors l’effet de survol, mais le graphique entier plac&eacute; sous la tranche permute
lorsque l’effet de survol survient.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 192
Tranches, survols et zones sensibles
Remarque : &eacute;vitez de cr&eacute;er des zones sensibles qui chevauchent plusieurs tranches.
1 Ins&eacute;rez une tranche par-dessus l’image originale de la permutation.
2 Dans le panneau Etats, cr&eacute;ez un &eacute;tat, puis ins&eacute;rez l’image qui sera utilis&eacute;e comme image permut&eacute;e. Veillez &agrave; placer
cette image sous la tranche ins&eacute;r&eacute;e &agrave; l’&eacute;tape 1.
3 Faites glisser un trait de comportement de la zone sensible vers la tranche contenant l’image &agrave; permuter.
4 Dans la liste Permuter l’image &agrave; partir de, s&eacute;lectionnez l’&eacute;tat qui contient l’image survol&eacute;e, puis cliquez sur OK.
Derni&egrave;re mise &agrave; jour le 29/4/2010
Chapitre 13 : Cr&eacute;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&reg; Fireworks&reg;, vous pouvez ais&eacute;ment cr&eacute;er et mettre en place ces aides &agrave; la navigation, m&ecirc;me si vos connaissances
en code CSS et JavaScript sont plus que limit&eacute;es.
Lors de l’exportation d’un bouton ou d’un menu contextuel, Fireworks g&eacute;n&egrave;re automatiquement le code CSS ou
JavaScript n&eacute;cessaire pour l’afficher dans un navigateur Web. Adobe Dreamweaver permet d’ins&eacute;rer ais&eacute;ment le
code CSS, HTML et JavaScript de Fireworks dans vos pages Web ou tout fichier HTML ou CSS.
Cr&eacute;ation d’une barre de navigation standard
Une barre de navigation est un ensemble de boutons qui fournissent des liens vers les diff&eacute;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&eacute;pondre aux sp&eacute;cificit&eacute;s de certaines pages.
Pour une navigation harmonieuse, vous pouvez dupliquer des symboles de bouton &agrave; l’aide d’occurrences de symbole.
Si vous modifiez l’aspect ou la fonctionnalit&eacute; du symbole original, toutes les occurrences qui lui sont associ&eacute;es adoptent
automatiquement ces modifications (voir la section &laquo; Symboles &raquo; &agrave; la page 160).
1 Cr&eacute;ez un symbole de bouton.
2 Faites glisser une occurrence (copie) du symbole depuis le panneau Biblioth&egrave;que de documents dans la zone de
travail.
3 Pour cr&eacute;er une copie de l’occurrence du bouton, proc&eacute;dez de l’une ou l’autre des mani&egrave;res suivantes :
• S&eacute;lectionnez l’occurrence de bouton, puis choisissez Edition &gt; Cloner.
• Tout en maintenant la touche Alt (Windows) ou Option (Mac OS) enfonc&eacute;e, faites glisser l’occurrence de
bouton.
4 Tout en maintenant la touche Maj enfonc&eacute;e, faites glisser un bouton pour l’aligner horizontalement ou
verticalement. Utilisez les touches fl&eacute;ch&eacute;es pour un d&eacute;placement plus pr&eacute;cis de l’occurrence.
5 Pour cr&eacute;er d’autres occurrences de bouton, r&eacute;p&eacute;tez les &eacute;tapes 3 et 4.
6 S&eacute;lectionnez chaque occurrence, puis attribuez-lui un texte unique, une URL ou d’autres propri&eacute;t&eacute;s &agrave; l’aide de
l’inspecteur des propri&eacute;t&eacute;s.
193
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 194
Cr&eacute;ation de boutons et de menus contextuels
Cr&eacute;ation de symboles de bouton
Les boutons sont un type particulier de symbole, utilis&eacute;s comme &eacute;l&eacute;ments de navigation dans une page Web.
L’inspecteur des propri&eacute;t&eacute;s permet de modifier facilement les boutons. Vous pouvez faire glisser dans votre document
des occurrences d’un bouton depuis la biblioth&egrave;que de symboles, ce qui vous permet de modifier l’aspect graphique
d’un seul bouton et de mettre &agrave; jour syst&eacute;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&eacute;er un bouton ou convertir un objet
existant en bouton, suivez les &eacute;tapes d&eacute;crites &agrave; la section &laquo; Cr&eacute;ation d’un symbole &raquo; &agrave; la page 161, puis
s&eacute;lectionnez Bouton comme type de symbole. Pour importer des boutons existants, reportez-vous &agrave; la section
&laquo; Importation et exportation de symboles &raquo; &agrave; 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&eacute;. Fireworks d&eacute;place tous les composants et &eacute;tats associ&eacute;s aux
boutons que vous d&eacute;placez dans le document.
• Tout comme les autres symboles, chaque bouton dispose d’un point d’alignement (point central servant de rep&egrave;re
pour aligner du texte et les diff&eacute;rents &eacute;tats du bouton quand vous &eacute;ditez un bouton).
Application d’&eacute;tats &agrave; des boutons
Vous pouvez d&eacute;finir jusqu’&agrave; quatre &eacute;tats par bouton. Ceux-ci repr&eacute;sentent l’aspect que peut prendre le bouton selon
l’action de la souris. Les boutons &agrave; deux &eacute;tats disposent d’un &eacute;tat Relev&eacute; et d’un &eacute;tat Enfonc&eacute;. Les boutons &agrave; trois et
quatre &eacute;tats disposent d’un &eacute;tat Au-dessus et d’un &eacute;tat Au-dessus Enfonc&eacute;. Ces &eacute;tats repr&eacute;sentent l’aspect du bouton
lorsque le pointeur de la souris le survole lorsqu’il est relev&eacute; (Au-dessus) ou enfonc&eacute; (Au-dessus Enfonc&eacute;).
Vous pouvez cr&eacute;er une barre de navigation qui utilise des boutons &agrave; deux ou trois &eacute;tats. Cependant, seuls les boutons
&agrave; quatre &eacute;tats peuvent tirer parti des comportements int&eacute;gr&eacute;s de barre de navigation de Fireworks.
Cr&eacute;ation d’un bouton simple &agrave; deux &eacute;tats
1 Pour acc&eacute;der au mode d’&eacute;dition de symboles, proc&eacute;dez de l’une ou l’autre des mani&egrave;res suivantes :
• Cliquez deux fois sur un bouton existant sur la zone de travail.
• Choisissez Edition &gt; Insertion &gt; Nouveau bouton.
2 Pour importer ou cr&eacute;er le graphique de l’&eacute;tat Relev&eacute;, proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Glissez et d&eacute;posez ou importez dans l’espace de travail le graphique que vous souhaitez faire correspondre &agrave; l’&eacute;tat
relev&eacute; du bouton.
• Cr&eacute;ez un graphique &agrave; l’aide des outils de dessin, ou utilisez l’outil Texte pour cr&eacute;er un bouton &agrave; partir d’un texte.
• Dans l’inspecteur des propri&eacute;t&eacute;s, cliquez sur Importer un bouton et s&eacute;lectionnez un bouton &eacute;ditable pr&ecirc;t &agrave;
l’emploi dans la biblioth&egrave;que de boutons Importer des symboles. Cette option permet d’associer
automatiquement chaque &eacute;tat du bouton aux textes et graphiques correspondants.
• (Facultatif) D&eacute;finissez les rep&egrave;res de mise &agrave; l’&eacute;chelle en 9 tranches de sorte que le bouton ne soit pas d&eacute;form&eacute; lors
du redimensionnement (voir la section &laquo; Application de rep&egrave;res 9 tranches &agrave; un symbole &raquo; &agrave; la page 51).
• (Facultatif) S&eacute;lectionnez l’outil Texte, puis cr&eacute;ez le texte associ&eacute; au bouton.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 195
Cr&eacute;ation de boutons et de menus contextuels
3 Pour cr&eacute;er l’&eacute;tat Au-dessus, dans le menu contextuel, s&eacute;lectionnez Au-dessus et proc&eacute;dez de l’une des mani&egrave;res
suivantes :
• Cliquez sur Copier le graphique Relev&eacute; pour coller une copie du bouton &agrave; l’&eacute;tat Relev&eacute; dans la fen&ecirc;tre Au-dessus,
puis modifiez cette copie.
• Glissez et d&eacute;posez, importez ou dessinez le graphique.
4 (Facultatif) Pour utiliser des filtres dynamiques afin de cr&eacute;er des aspects communs pour chaque &eacute;tat, s&eacute;lectionnez
le graphique auquel ajouter un filtre dynamique, puis cliquez sur l’ic&ocirc;ne plus (+) en regard de l’&eacute;tiquette Filtres dans
l’inspecteur des propri&eacute;t&eacute;s.
5 S&eacute;lectionnez la commande Biseau et estampage &gt; Biseau int&eacute;rieur, Estampe rapport&eacute;e, Biseau externe ou Estampe
en relief.
6 S&eacute;lectionnez un filtre pr&eacute;d&eacute;fini de bouton pour chaque &eacute;tat.
Filtre pr&eacute;d&eacute;fini de bouton
Description
Le biseau semble en relief au-dessus des objets sous-jacents.
En relief
Les couleurs du bouton s’&eacute;claircissent.
En surbrillance
Le biseau semble enfonc&eacute; au-dessous des objets sous-jacents.
Cartouche
Le biseau semble enfonc&eacute; au-dessous des objets sous-jacents et les couleurs s’illuminent.
Invers&eacute;
Cr&eacute;ation d’un bouton &agrave; trois ou quatre &eacute;tats
Bien que les boutons &agrave; quatre &eacute;tats ne soient pas obligatoires, ils vous permettent de tirer parti des comportements
int&eacute;gr&eacute;s de barre de navigation.
1 Avec un bouton &agrave; deux &eacute;tats ouvert dans la zone de travail et en mode d’&eacute;dition du symbole, dans le menu
contextuel de l’inspecteur des propri&eacute;t&eacute;s, s&eacute;lectionnez Enfonc&eacute; et proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Cliquez sur Copier le graphique Au-dessus pour coller une copie du bouton &agrave; l’&eacute;tat Au-dessus dans la fen&ecirc;tre
Enfonc&eacute;, puis modifiez cette copie pour changer son aspect.
• Glissez et d&eacute;posez, importez ou dessinez le graphique.
2 Pour ajouter un &eacute;tat Au-dessus Enfonc&eacute;, v&eacute;rifiez que le bouton de l’&eacute;tat Enfonc&eacute; est ouvert, puis r&eacute;p&eacute;tez l’&eacute;tape 1.
3 (Facultatif) Appliquez des filtres pr&eacute;d&eacute;finis aux boutons.
Remarque : lorsque vous ins&eacute;rez ou cr&eacute;ez un graphique pour les &eacute;tats Enfonc&eacute; ou Au-dessus Enfonc&eacute;, les options
d’int&eacute;gration de l’&eacute;tat &agrave; la barre de navigation sont s&eacute;lectionn&eacute;es automatiquement.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 196
Cr&eacute;ation de boutons et de menus contextuels
Conversion de survols Fireworks en boutons
Vous pouvez convertir en boutons des survols cr&eacute;&eacute;s dans des versions pr&eacute;c&eacute;dentes de Fireworks et les enregistrer dans
la biblioth&egrave;que. Pour plus d’informations sur les survols, reportez-vous &agrave; la section &laquo; Tranches interactives &raquo; &agrave; la
page 178.
1 Supprimez la tranche ou la zone sensible recouvrant les images survol&eacute;es.
2 Dans le menu Pelures d’oignon du panneau Etats, cliquez sur Afficher tous les &eacute;tats.
3 S&eacute;lectionnez tous les objets que vous voulez inclure dans le bouton. S&eacute;lectionnez des objets masqu&eacute;s &agrave; l’aide de
l’outil S&eacute;lectionner derri&egrave;re.
4 Choisissez Modification &gt; Symbole &gt; Convertir en symbole.
5 Entrez le nom du symbole dans la zone Nom, puis s&eacute;lectionnez le type de symbole Bouton.
Pour convertir en boutons des animations &agrave; quatre &eacute;tats, s&eacute;lectionnez les quatre objets pour placer chacun d’eux
sur leur &eacute;tat de bouton respectif.
Insertion et importation de symboles de bouton
Vous pouvez ins&eacute;rer des occurrences de symboles de bouton dans un document &agrave; partir du
panneau Biblioth&egrave;que commune. Vous pouvez &eacute;galement importer des symboles de bouton existants dans le
panneau Biblioth&egrave;que de documents d’un nouveau document. Pour plus d’informations, reportez-vous &agrave; la section
&laquo; Importation et exportation de symboles &raquo; &agrave; la page 167.
1 Pour ins&eacute;rer dans un document les occurrences d’un bouton, ouvrez le panneau Biblioth&egrave;que commune, puis faites
glisser le symbole de bouton vers le document.
2 Pour importer d’autres occurrences d’un symbole de bouton, proc&eacute;dez de l’une des mani&egrave;res suivantes :
• S&eacute;lectionnez une occurrence, puis choisissez la commande Edition &gt; Cloner pour placer une autre occurrence
directement devant l’occurrence s&eacute;lectionn&eacute;e. La nouvelle occurrence devient l’objet s&eacute;lectionn&eacute;.
• Faites glisser une autre occurrence de bouton depuis le panneau Biblioth&egrave;que de documents vers le document.
• Tout en maintenant la touche Alt (Windows) ou Option (Mac OS) enfonc&eacute;e, faites glisser une occurrence sur la
zone de travail pour cr&eacute;er une autre occurrence de bouton.
• Copiez l’occurrence, puis collez des occurrences suppl&eacute;mentaires.
3 Pour importer des symboles de bouton dans le panneau Biblioth&egrave;que de documents d’un nouveau document,
proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Ins&eacute;rez une occurrence de bouton par un glisser-d&eacute;poser (ou par un couper-coller) depuis un autre
document Fireworks.
• Importez les symboles de bouton &agrave; partir d’un fichier PNG Fireworks.
• Exportez les symboles de bouton depuis un autre document Fireworks vers un fichier biblioth&egrave;que PNG, puis
importez les symboles de bouton du fichier biblioth&egrave;que PNG dans le document.
• Dans le menu Options du panneau Biblioth&egrave;que de documents, cliquez sur Importer des symboles. Les
biblioth&egrave;ques contiennent une grande vari&eacute;t&eacute; de symboles de bouton pr&eacute;con&ccedil;us, pr&eacute;par&eacute;s par Adobe.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 197
Cr&eacute;ation de boutons et de menus contextuels
Modification de symboles de bouton
Vous pouvez modifier plusieurs occurrences de propri&eacute;t&eacute;s d’un bouton au niveau du symbole ou modifier des
occurrences individuelles de ses propri&eacute;t&eacute;s.
Modification des propri&eacute;t&eacute;s d’un bouton au niveau de son symbole
❖ Cliquez deux fois sur le bouton pour modifier ses caract&eacute;ristiques. En haut de la zone de travail, cliquez sur l’ic&ocirc;ne
page, ou cliquez deux fois en dehors du bouton pour revenir &agrave; la zone de travail.
En principe, les propri&eacute;t&eacute;s des boutons que vous pouvez modifier au niveau des symboles sont les m&ecirc;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&eacute; et les images
• les filtres dynamiques ou l’opacit&eacute; appliqu&eacute;s &agrave; chaque objet du symbole de bouton
• les dimensions et la position de la zone active
• le comportement du bouton principal
• les param&egrave;tres d’optimisation et d’exportation
• le lien URL (utilis&eacute; &eacute;galement comme propri&eacute;t&eacute; d’une occurrence)
• la cible (utilis&eacute;e &eacute;galement comme propri&eacute;t&eacute; d’une occurrence)
Modification des propri&eacute;t&eacute;s d’un bouton au niveau d’une occurrence
❖ S&eacute;lectionnez l’occurrence du bouton dans l’espace de travail, puis d&eacute;finissez ses propri&eacute;t&eacute;s dans l’inspecteur des
propri&eacute;t&eacute;s.
Les propri&eacute;t&eacute;s que vous pouvez modifier au niveau de chaque occurrence sont g&eacute;n&eacute;ralement diff&eacute;rentes d’un bouton
&agrave; l’autre dans une s&eacute;rie de boutons. Vous pouvez modifier ces propri&eacute;t&eacute;s pour une seule occurrence sans agir sur le
symbole associ&eacute; 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&eacute; lors de l’exportation pour nommer
les tranches export&eacute;es de l’occurrence du bouton
• les filtres dynamiques ou l’opacit&eacute; appliqu&eacute;s &agrave; toute l’occurrence
• les caract&egrave;res et la mise en forme du texte
• le lien URL (&eacute;crase toute URL existante au niveau du symbole)
• la description de l’image
• la cible (&eacute;crase tout cadre cible existant en tant que propri&eacute;t&eacute; de symbole)
• les comportements suppl&eacute;mentaires affect&eacute;s &agrave; une occurrence &agrave; partir du panneau Comportements
• l’option Afficher l’&eacute;tat Enfonc&eacute; lors du chargement, dans l’inspecteur des propri&eacute;t&eacute;s, pour les occurrences d’une
barre de navigation
Remarque : lorsque vous s&eacute;lectionnez l’option Exportation de plusieurs fichiers dans la section Propre au document
de la bo&icirc;te de dialogue Configuration HTML, puis que vous exportez une barre de navigation, Fireworks exporte
chaque page HTML avec l’&eacute;tat Enfonc&eacute; de chaque bouton (voir la section &laquo; D&eacute;finition des options d’exportation de
code HTML &raquo; &agrave; la page 262).
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 198
Cr&eacute;ation de boutons et de menus contextuels
D&eacute;finition des propri&eacute;t&eacute;s des boutons interactifs
Vous pouvez contr&ocirc;ler les &eacute;l&eacute;ments interactifs suivants d’un bouton :
Zone active La zone active d&eacute;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&eacute;t&eacute; de symbole et est
exclusive pour chaque symbole de bouton. Dans le menu contextuel, s&eacute;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&eacute;c&eacute;dente.
URL d’un symbole ou d’une occurrence de bouton L’URL peut correspondre &agrave; la propri&eacute;t&eacute; du symbole ou de
l’occurrence de bouton. Elle relie le bouton &agrave; une autre page Web, un autre site Web ou &agrave; une ancre sur la page Web
active. Dans l’inspecteur des propri&eacute;t&eacute;s ou le panneau URL, vous pouvez lier une URL &agrave; une occurrence de bouton
s&eacute;lectionn&eacute;e.
Cible de bouton La cible d’un bouton est la fen&ecirc;tre ou le cadre dans lesquels la page Web de destination appara&icirc;t
lorsque l’utilisateur clique sur une occurrence du bouton. Si aucune cible n’est sp&eacute;cifi&eacute;e dans l’inspecteur des
propri&eacute;t&eacute;s, la page Web s’affiche dans le m&ecirc;me cadre ou la m&ecirc;me fen&ecirc;tre que le lien ayant servi &agrave; l’appeler. La cible peut
correspondre &agrave; la propri&eacute;t&eacute; du symbole ou de l’occurrence d’un bouton. Vous pouvez d&eacute;finir la cible d’un symbole de
mani&egrave;re &agrave; ce que toutes les occurrences du symbole aient la m&ecirc;me cible.
Texte de description d’un symbole ou d’une occurrence de bouton Le texte de description appara&icirc;t dans ou &agrave;
proximit&eacute; de l’espace r&eacute;serv&eacute; pour l’image pendant son t&eacute;l&eacute;chargement ou &agrave; la place d’une image impossible &agrave;
t&eacute;l&eacute;charger. Il remplace &eacute;galement le graphique lorsque l’utilisateur interdit l’affichage d’images dans le navigateur. Le
texte secondaire peut correspondre &agrave; la propri&eacute;t&eacute; du symbole ou de l’occurrence de bouton.
Modification des propri&eacute;t&eacute;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’&eacute;dition du symbole, ouvrez le symbole du bouton.
2 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Pour modifier une tranche ou une zone sensible dans la zone active du symbole de bouton, s&eacute;lectionnez Zone
active dans le menu contextuel, dans l’inspecteur des propri&eacute;t&eacute;s. L’outil Pointeur permet de d&eacute;placer ou de
reformer la tranche ou un rep&egrave;re de tranche. Vous pouvez &eacute;galement utiliser un outil de tranche ou de zone
sensible pour tracer une nouvelle zone active.
• Pour associer une URL &agrave; un symbole de bouton, dans le menu contextuel, s&eacute;lectionnez Zone active. Dans
l’inspecteur des propri&eacute;t&eacute;s, entrez ensuite l’URL dans la zone Lien, puis s&eacute;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&ecirc;me site, vous pouvez lier une URL &agrave; un
symbole afin que cette URL s’affiche dans la zone Lien de l’inspecteur des propri&eacute;t&eacute;s pour chaque occurrence.
• Pour associer une cible &agrave; un symbole de bouton, dans l’espace de travail, ouvrez le bouton. Indiquez ensuite une
cible dans la zone Cible ou s&eacute;lectionnez, dans le menu Cible de l’inspecteur des propri&eacute;t&eacute;s, une cible pr&eacute;d&eacute;finie
parmi les suivantes :
Aucune ou _self Charge la page Web dans le m&ecirc;me cadre, ou dans la m&ecirc;me fen&ecirc;tre, que le lien.
_blank Charge la page Web dans une nouvelle fen&ecirc;tre, sans nom, du navigateur.
_parent Charge la page Web dans le jeu de cadres parent ou dans la fen&ecirc;tre du cadre contenant le lien.
_top Charge la page Web dans la fen&ecirc;tre principale du navigateur et supprime tous les cadres.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 199
Cr&eacute;ation de boutons et de menus contextuels
• Pour associer un texte de description &agrave; un symbole de bouton ou une instance de bouton, dans l’espace de
travail, s&eacute;lectionnez l’instance du bouton. Dans l’inspecteur des propri&eacute;t&eacute;s, saisissez le texte ou la description &agrave;
appliquer.
Menus contextuels
Les menus contextuels s’affichent dans un navigateur en r&eacute;ponse &agrave; un &eacute;v&eacute;nement souris (survol ou clic) sur un
objet Web de d&eacute;clenchement tel qu’une tranche ou une zone sensible.
• Chaque &eacute;l&eacute;ment de menu contextuel s’affiche en tant que cellule d’image ou HTML. La cellule est associ&eacute; aux
&eacute;tats Relev&eacute; et Au-dessus et contient du texte dans les deux cas.
• Vous pouvez affecter des liens URL &agrave; des &eacute;l&eacute;ments de menu contextuel pour la navigation et cr&eacute;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&egrave;tres &agrave; tout moment.
• Vous devez ajouter au moins un &eacute;l&eacute;ment de menu dans l’onglet Contenu pour cr&eacute;er une option de menu que vous
pouvez pr&eacute;visualiser dans un navigateur.
• Appuyez sur la touche F12 pour afficher l’aper&ccedil;u d’un menu contextuel. Les menus contextuels ne s’affichent pas
dans l’espace de travail de Fireworks.
Cr&eacute;ation d’un menu contextuel simple
1 S&eacute;lectionnez la zone sensible ou la tranche qui va servir de zone de d&eacute;clenchement au menu contextuel.
2 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Choisissez Modification &gt; Menu contextuel &gt; Ajouter menu contextuel.
• Cliquez sur la poign&eacute;e de comportement au milieu de la tranche, puis s&eacute;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&eacute;lection.
Pour les champs Lien et Cible, saisissez des informations sp&eacute;cifiques ou effectuez une s&eacute;lection dans les menus
affich&eacute;s. La saisie du contenu sur la derni&egrave;re ligne de la fen&ecirc;tre ins&egrave;re une ligne vide en dessous de la derni&egrave;re ligne.
Appuyez sur la touche Tabulation pour vous d&eacute;placer entre les cellules, et sur les touches fl&eacute;ch&eacute;es Haut ou Bas pour
faire d&eacute;filer verticalement la liste.
5 R&eacute;p&eacute;tez les &eacute;tapes 3 et 4 jusqu’&agrave; ce que tous les &eacute;l&eacute;ments de menu soient d&eacute;finis. Pour supprimer un &eacute;l&eacute;ment de
menu, cliquez sur le bouton Supprimer le menu.
6 Cliquez sur Suivant ou Termin&eacute;, ou s&eacute;lectionnez un autre onglet.
Dans l’espace de travail, la zone sensible ou la tranche sur laquelle vous avez cr&eacute;&eacute; le menu contextuel affiche un trait
de comportement de couleur bleue reli&eacute; &agrave; un contour du niveau sup&eacute;rieur du menu contextuel.
Cr&eacute;ation de sous-menus dans un menu contextuel
Les sous-menus sont des menus contextuels qui s’affichent en r&eacute;ponse &agrave; un &eacute;v&eacute;nement de souris (survol ou clic) sur
un autre &eacute;l&eacute;ment de menu contextuel. Vous pouvez cr&eacute;er autant de niveaux de sous-menus que vous le voulez.
1 Ouvrez l’onglet Contenu de l’&eacute;diteur de menu contextuel, puis cr&eacute;ez des &eacute;l&eacute;ments de menu. Placez les &eacute;l&eacute;ments de
menu &agrave; utiliser pour le sous-menu directement sous l’&eacute;l&eacute;ment de menu pour lequel ils repr&eacute;senteront un sousmenu.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 200
Cr&eacute;ation de boutons et de menus contextuels
2 Mettez en surbrillance un &eacute;l&eacute;ment de menu contextuel &agrave; transformer en &eacute;l&eacute;ment de sous-menu, puis cliquez sur le
bouton Retrait du menu.
3 Pour ajouter l’&eacute;l&eacute;ment suivant au sous-menu, s&eacute;lectionnez cet &eacute;l&eacute;ment, puis cliquez sur le bouton Retrait du menu.
Pour ins&eacute;rer un nouvel &eacute;l&eacute;ment juste en dessous de l’&eacute;l&eacute;ment mis en surbrillance, vous pouvez &eacute;galement mettre en
surbrillance un &eacute;l&eacute;ment de menu ou de sous-menu et cliquer sur Ajouter un menu.
Tous les &eacute;l&eacute;ments adjacents et mis en retrait au m&ecirc;me niveau repr&eacute;sentent un seul sous-menu contextuel.
4 Pour cr&eacute;er un sous-menu au sein d’un sous-menu contextuel, mettez en surbrillance un &eacute;l&eacute;ment de sous-menu
dans l’onglet Contenu de l’&eacute;diteur de menu contextuel, puis cliquez de nouveau sur le bouton Retrait du menu.
5 Cliquez sur Suivant pour continuer l’&eacute;laboration du menu contextuel, ou cliquez sur Termin&eacute;.
Modification de l’aspect d’un menu contextuel
Apr&egrave;s avoir cr&eacute;&eacute; un menu de base et des sous-menus facultatifs, vous pouvez mettre en forme le texte, appliquer des
styles graphiques aux &eacute;tats Au-dessus et Relev&eacute; et s&eacute;lectionner l’orientation verticale ou horizontale sous l’onglet
Aspect de l’&eacute;diteur de menu contextuel.
1 Dans l’&eacute;diteur de menu contextuel, ouvrez le menu contextuel, puis cliquez sur l’onglet Aspect.
2 S&eacute;lectionnez Vertical ou Horizontal pour l’option Choisit l’alignement du menu d&eacute;roulant.
3 S&eacute;lectionnez une option Cellules :
HTML D&eacute;finit l’aspect du menu en utilisant uniquement du code HTML. Cette option cr&eacute;e des pages
correspondant &agrave; des fichiers de petite taille.
Image Propose une s&eacute;lection de styles de graphique pour l’arri&egrave;re-plan des cellules. Cette option cr&eacute;e des pages
correspondant &agrave; des fichiers de taille importante.
4 S&eacute;lectionnez une taille pr&eacute;d&eacute;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&eacute;finies sur Automatique, dans l’onglet Avanc&eacute; de
l’&eacute;diteur de menu contextuel, la taille du texte d&eacute;termine celle des graphiques associ&eacute;s &agrave; l’&eacute;l&eacute;ment de menu.
5 Dans le menu contextuel Police, s&eacute;lectionnez un groupe de polices syst&egrave;me ou entrez le nom d’une police
personnalis&eacute;e.
Remarque : si la police que vous choisissez n’est pas install&eacute;e sur l’ordinateur de l’utilisateur, une police de substitution
est utilis&eacute;e dans son navigateur Web.
6 (Facultatif) Appliquez un style, un param&egrave;tre de justification ou une couleur au texte.
7 S&eacute;lectionnez les couleurs du texte et des cellules pour chaque &eacute;tat.
8 Si vous avez choisi Image comme type de cellule, s&eacute;lectionnez un style graphique pour chaque &eacute;tat.
9 Poursuivez l’&eacute;laboration du menu contextuel ou cliquez sur Termin&eacute;.
Ajout de styles de menu personnalis&eacute;s dans l’&eacute;diteur de menu contextuel
S&eacute;lectionnez un style de cellule &agrave; utiliser lorsque le style de cellule Image est s&eacute;lectionn&eacute;. Pour plus d’informations sur
les styles, reportez-vous &agrave; la section &laquo; Cr&eacute;ation et suppression de styles &raquo; &agrave; la page 158.
Remarque : l’emplacement exact du dossier Menu Bars varie en fonction du syst&egrave;me d’exploitation. Pour plus
d’informations, reportez-vous &agrave; la section &laquo; Utilisation des fichiers de configuration &raquo; &agrave; la page 316.
1 Appliquez une combinaison de contour, fond, texture et filtres dynamiques &agrave; un objet, et enregistrez cette
combinaison sous forme de style dans le panneau Styles.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 201
Cr&eacute;ation de boutons et de menus contextuels
2 Dans le panneau Styles, s&eacute;lectionnez le nouveau style, puis choisissez la commande Enregistrer la biblioth&egrave;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&eacute;finition de propri&eacute;t&eacute;s de cellule avanc&eacute;es
1 Ouvrez l’&eacute;diteur de menu contextuel et cliquez sur l’onglet Avanc&eacute;.
2 Dans le menu contextuel Automatique/Pixels, s&eacute;lectionnez une largeur ou une hauteur maximale :
Automatique R&egrave;gle la hauteur de cellule sur la taille du texte d&eacute;finie dans l’onglet Aspect de l’&eacute;diteur de menu
contextuel et la largeur de cellule sur celle de l’&eacute;l&eacute;ment de menu contenant le texte le plus long.
Pixels Permet d’entrer des mesures sp&eacute;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&eacute;rieure des cellules pour d&eacute;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&eacute;finir l’espacement entre les cellules du menu.
5 Entrez une valeur dans la zone de texte Retrait du texte pour d&eacute;finir la valeur de retrait du texte du menu contextuel.
6 Entrez une valeur dans la zone de texte Affichage menu pour d&eacute;finir, en millisecondes, la dur&eacute;e pendant laquelle le
menu reste affich&eacute; apr&egrave;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&eacute;finissez les attributs des bordures.
8 Poursuivez l’&eacute;laboration du menu contextuel ou cliquez sur Termin&eacute;.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 202
Cr&eacute;ation de boutons et de menus contextuels
Repositionnement des menus et sous-menus contextuels
L’onglet Position de l’&eacute;diteur de menu contextuel vous permet de d&eacute;finir la position d’un menu contextuel. Vous
pouvez &eacute;galement positionner un menu contextuel de niveau sup&eacute;rieur en faisant glisser son contour dans l’espace de
travail lorsque le calque Web est visible.
D&eacute;finition de la position exacte d’un menu ou sous-menu contextuel
1 Dans l’&eacute;diteur de menu contextuel, ouvrez le menu contextuel souhait&eacute;, puis cliquez sur l’onglet Position.
2 Pour d&eacute;finir la position du menu, proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Cliquez sur le bouton Position pour positionner le menu contextuel par rapport &agrave; sa tranche de d&eacute;clenchement.
• Entrez les coordonn&eacute;es x et y. Les coordonn&eacute;es 0,0 alignent le coin sup&eacute;rieur gauche du menu contextuel sur le
coin sup&eacute;rieur gauche de la tranche ou de la zone sensible qui le d&eacute;clenche.
3 D&eacute;finissez la position d’un sous-menu :
• Cliquez sur le bouton Position du sous-menu pour positionner le sous-menu par rapport &agrave; son &eacute;l&eacute;ment
d&eacute;clencheur du menu contextuel.
• Entrez les coordonn&eacute;es x et y. Les coordonn&eacute;es 0,0 alignent le coin sup&eacute;rieur gauche du sous-menu contextuel
sur le coin sup&eacute;rieur droit du menu ou de l’&eacute;l&eacute;ment de menu d&eacute;clencheur.
4 D&eacute;finissez une position relative :
• Pour d&eacute;finir la position de chaque sous-menu par rapport &agrave; l’&eacute;l&eacute;ment de menu parent qui le d&eacute;clenche,
d&eacute;s&eacute;lectionnez l’option Placer &agrave; la m&ecirc;me position.
• Pour d&eacute;finir la position de chaque sous-menu par rapport au menu contextuel parent, s&eacute;lectionnez l’option
Placer &agrave; la m&ecirc;me position.
5 Cliquez sur Termin&eacute; pour fermer l’&eacute;diteur de menu contextuel ou sur Pr&eacute;c&eacute;dent pour modifier les propri&eacute;t&eacute;s des
autres onglets.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 203
Cr&eacute;ation de boutons et de menus contextuels
D&eacute;finition de la position d’un menu contextuel en le faisant glisser
1 Pour afficher le calque Web, proc&eacute;dez de l’une des mani&egrave;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&eacute;lectionnez l’objet Web de d&eacute;clenchement du menu contextuel.
3 Dans l’espace de travail, faites glisser le contour du menu contextuel vers un autre emplacement.
Modification ou d&eacute;placement d’&eacute;l&eacute;ments dans des menus contextuels
L’&eacute;diteur de menu contextuel permet de modifier ou de mettre &agrave; jour le contenu d’un menu contextuel, de r&eacute;organiser
les &eacute;l&eacute;ments de menu ou de modifier des propri&eacute;t&eacute;s dans n’importe lequel des quatre onglets.
1 Pour afficher le calque Web, proc&eacute;dez de l’une des mani&egrave;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&eacute;lectionnez la tranche &agrave; laquelle est reli&eacute; le menu contextuel.
3 Cliquez deux fois sur le contour bleu du menu contextuel dans l’espace de travail.
4 Dans l’&eacute;diteur de menu contextuel, effectuez les modifications n&eacute;cessaires sur les onglets.
Modification du texte d’un menu
1 Dans l’&eacute;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&eacute;es pour appliquer les modifications.
D&eacute;placement d’un &eacute;l&eacute;ment de menu
1 S&eacute;lectionnez l’&eacute;l&eacute;ment de menu dans l’onglet Contenu de l’&eacute;diteur de menu contextuel.
2 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Pour d&eacute;placer un &eacute;l&eacute;ment vers un sous-menu sup&eacute;rieur ou vers le menu contextuel principal, cliquez sur le
bouton Retrait n&eacute;gatif du menu.
• Pour d&eacute;placer un &eacute;l&eacute;ment dans le m&ecirc;me menu, faites glisser l’&eacute;l&eacute;ment &agrave; l’emplacement souhait&eacute; dans la liste.
A propos de l’exportation des menus contextuels
Fireworks g&eacute;n&egrave;re tout le code CSS ou JavaScript (selon l’option s&eacute;lectionn&eacute;e) n&eacute;cessaire &agrave; 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&eacute; au format HTML &agrave; partir de code CSS. Vous pouvez &eacute;galement choisir d’&eacute;crire le code CSS dans un
fichier .css externe et d’exporter ce fichier avec un fichier mm_css_menu.js au m&ecirc;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&eacute; en HTML, et un fichier JavaScript appel&eacute; mm_menu.js est
export&eacute; vers le m&ecirc;me emplacement que le fichier HTML.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 204
Cr&eacute;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 &ecirc;tre transf&eacute;r&eacute;
dans le m&ecirc;me dossier que la page Web qui contient le menu contextuel. Pour stocker ce fichier dans un autre
emplacement, mettez &agrave; jour tous les liens hypertextes faisant r&eacute;f&eacute;rence au fichier mm_css_menu.js et au fichier .css (ou
mm_menu.js) dans le code HTML de Fireworks pour refl&eacute;ter ce nouvel emplacement. Un seul fichier .css est export&eacute;
pour chaque document contenant des menus contextuels CSS que vous exportez en tant que fichier HTML
accompagn&eacute; d’images depuis Fireworks.
Lorsque vous incluez des sous-menus, un fichier d’image est cr&eacute;&eacute; (arrows.gif) dans Fireworks. Il correspond &agrave; la petite
fl&egrave;che qui s’affiche en regard de chaque &eacute;l&eacute;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 &agrave; la section &laquo; Exportation de code HTML &raquo;
&agrave; la page 257.
Derni&egrave;re mise &agrave; jour le 29/4/2010
Chapitre 14 : Prototypage de sites Web et
d’interfaces d’applications
Adobe&reg; Fireworks&reg; fournit un environnement de prototypage id&eacute;al, convertissant de fa&ccedil;on transparente des mod&egrave;les
de conception en sites Web et applications r&eacute;elles.
Flux de production de prototypage
En associant le panneau Pages &agrave; d’autres fonctions performantes de Fireworks, vous pouvez cr&eacute;er rapidement des
prototypes de logiciels et de sites Web interactifs. Pour convertir un prototype finalis&eacute; en site fonctionnel, il vous suffit
de l’exporter vers Adobe Flash&reg;, Adobe Flex&reg;, Adobe AIR™ ou Adobe Dreamweaver&reg;.
Pour obtenir des conseils d’ordre g&eacute;n&eacute;ral sur les flux de production de prototypage, voir les articles suivants dans le
p&ocirc;le de d&eacute;veloppement Fireworks :
• L’article de Nick Myers sur la conception de produits interactifs &agrave; 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&egrave;les CSS pr&eacute;d&eacute;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&eacute;o de Dave Hogue sur l’utilisation de pour la cr&eacute;ation de l’interaction et le prototypage rapide :
• Utilisation de Fireworks pour la cr&eacute;ation de l’information et de l’interaction :
http://www.adobe.com/go/learn_fw_infointeract_fr
• Cr&eacute;ation de prototypes interactifs &agrave; l’aide de Fireworks :
http://www.adobe.com/go/learn_fw_creatinginteractivepro_fr
• Prototypage rapide &agrave; l’aide de Fireworks : http://www.adobe.com/go/learn_fw_rapidpro_fr
• Fireworks partie int&eacute;grante du processus de cr&eacute;ation :
http://www.adobe.com/go/learn_fw_completedesignpro_fr
• Article sur la cr&eacute;ation d’une application de site Web &agrave; l’aide de Fireworks :
http://www.adobe.com/go/learn_fw_designwebsiteapp_fr
• L’article de Kumar Vivek sur la cr&eacute;ation de projets pour les p&eacute;riph&eacute;riques mobiles dans Fireworks :
http://www.adobe.com/go/learn_fw_designmobiledevices_fr
Pour visionner un didacticiel vid&eacute;o sur les principes de base de Fireworks, reportez-vous &agrave;
www.adobe.com/go/lrvid4032_fw_fr.
1. Cr&eacute;ation des pages
Dans le panneau Pages, cr&eacute;ez le nombre de pages ou d’&eacute;crans n&eacute;cessaires &agrave; la r&eacute;alisation de votre projet initial. Au fur
et &agrave; mesure que votre projet &eacute;volue, vous pouvez y ajouter des pages, ou en supprimer, &agrave; votre convenance.
205
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 206
Prototypage de sites Web et d’interfaces d’applications
2. Disposition des &eacute;l&eacute;ments de conception communs
Dans la zone de travail, disposez les &eacute;l&eacute;ments conceptuels &agrave; reproduire sur plusieurs pages (barres de navigation et
images d’arri&egrave;re-plan, par exemple). Servez-vous des rep&egrave;res comment&eacute;s pour aligner les &eacute;l&eacute;ments. Pour travailler avec
un maximum de souplesse, structurez votre mise en page avec des feuilles de style CSS (voir les sections &laquo; Rep&egrave;res
comment&eacute;s &raquo; &agrave; la page 33 et &laquo; Cr&eacute;ation de dispositions CSS &raquo; &agrave; la page 211)..
3. Partage d’&eacute;l&eacute;ments communs entre plusieurs pages
La modification d’un &eacute;l&eacute;ment commun &agrave; plusieurs pages se r&eacute;percute syst&eacute;matiquement sur toutes les pages
concern&eacute;es. Servez-vous d’un gabarit pour partager tous les &eacute;l&eacute;ments du contenu, ou partagez les calques pour copier
des sous-ensembles d’&eacute;l&eacute;ments (voir les sections &laquo; Utilisation d’un gabarit &raquo; &agrave; la page 208 et &laquo; Partage des calques &raquo; &agrave;
la page 139).
4. Ajout d’&eacute;l&eacute;ments uniques &agrave; des pages individuelles
Sur chaque page, vous pouvez ajouter des &eacute;l&eacute;ments uniques de conception, de navigation ou de forme. Dans le
panneau Biblioth&egrave;que commune, vous trouverez de nombreux boutons, des zones de texte et des menus contextuels
qui vous permettront d’acc&eacute;l&eacute;rer le processus de conception. Les symboles contenus dans les dossiers
Flex Components, HTML, Mac, Win, Web et Application et Barres de menu pr&eacute;sentent des propri&eacute;t&eacute;s que vous
pouvez personnaliser pour certaines occurrences de symboles (voir la section &laquo; Cr&eacute;ation et utilisation de symboles de
composant &raquo; &agrave; la page 164).
5. Simulation de la navigation utilisateur &agrave; l’aide de liens
A partir d’objets Web tels que tranches, zones sensibles ou boutons de navigation, vous pouvez relier les diff&eacute;rentes
pages de votre prototype (voir la section &laquo; Lien vers des pages dans un document Fireworks &raquo; &agrave; la page 170).
6. Exportation du prototype finalis&eacute; 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
&laquo; Exportation d’une disposition CSS &raquo; &agrave; la page 212.
• Pour cr&eacute;er un prototype plus classique reposant sur une table, voir &laquo; Exportation de code HTML Fireworks &raquo; &agrave; la
page 258.
• Pour distribuer une version du prototype au format PDF en vue de le commenter ou de l’imprimer, voir
&laquo; Exportation de fichiers Adobe PDF &raquo; &agrave; la page 263.
• Pour cr&eacute;er un prototype d’application Flex, reportez-vous &agrave; la section &laquo; Prototypage d’applications Flex &raquo; &agrave; la
page 213. Pour cr&eacute;er une application Adobe AIR, reportez-vous &agrave; la section &laquo; Cr&eacute;ation d’une application Adobe
AIR &raquo; &agrave; la page 216.
Utilisation de pages Fireworks
Un seul fichier PNG Fireworks peut contenir plusieurs pages, ce qui est id&eacute;al pour le prototypage de sites Web et
d’interfaces d’applications. Chaque page contient des param&egrave;tres uniques relatifs &agrave; la taille, la couleur, la r&eacute;solution
graphique et les rep&egrave;res. Vous pouvez d&eacute;finir ces options soit page par page, soit globalement (pour toutes les pages
d’un document). Chaque page peut &eacute;galement contenir un ensemble unique de calques, outre le calque Web.
Toutefois, pour les &eacute;l&eacute;ments communs, vous pouvez utiliser un gabarit ou partager des calques sur plusieurs pages
(voir la section &laquo; Partage des calques &raquo; &agrave; la page 139).
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 207
Prototypage de sites Web et d’interfaces d’applications
Si vous ne cr&eacute;ez pas d’autres pages, tous les &eacute;l&eacute;ments de votre document r&eacute;sident sur une seule page.
Vos pages sont visibles dans le panneau Pages, qui affiche les objets pr&eacute;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&eacute;e dans le menu
contextuel de pages, au-dessus du document actif.
Pour plus d’informations sur l’exportation de pages, reportez-vous &agrave; la section &laquo; Exportation depuis l’espace de
travail &raquo; &agrave; 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&eacute;placez des pages, Fireworks met syst&eacute;matiquement &agrave; jour le nombre
de pages indiqu&eacute; &agrave; gauche des titres de pages. Ces num&eacute;ros g&eacute;n&eacute;r&eacute;s automatiquement permettent d’acc&eacute;der
rapidement &agrave; des pages sp&eacute;cifiques, dans des conceptions multipages.
Ajout d’une page
Une page vierge est ins&eacute;r&eacute;e &agrave; la fin de la liste de pages ; elle devient la page active.
❖ Proc&eacute;dez de l’une des mani&egrave;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&eacute;lectionnez Nouvelle page dans le menu
contextuel.
• Choisissez Edition &gt; Insertion &gt; Page.
Acc&egrave;s &agrave; une page
❖ Proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Dans le panneau Pages, s&eacute;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&eacute;rieure de la fen&ecirc;tre du document ou
dans la partie inf&eacute;rieure droite du panneau Pages.
Un ast&eacute;risque situ&eacute; 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&ecirc;mes objets et la m&ecirc;me hi&eacute;rarchie de calques que
la page s&eacute;lectionn&eacute;e. Les objets dupliqu&eacute;s conservent l’opacit&eacute; et le mode de fusion des objets d’origine. Vous pouvez
modifier les objets dupliqu&eacute;s sans agir sur les originaux.
❖ Proc&eacute;dez de l’une des mani&egrave;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&eacute;lectionnez Dupliquer la page dans le menu
contextuel.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 208
Prototypage de sites Web et d’interfaces d’applications
D&eacute;placement d’une ou plusieurs pages
Dans le panneau Pages, d&eacute;placez des pages pour rapprocher des conceptions apparent&eacute;es et acc&eacute;l&eacute;rer la mise en page.
1 (Facultatif) Si vous d&eacute;placez plusieurs pages, proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Cliquez dessus en maintenant la touche Maj enfonc&eacute;e pour s&eacute;lectionner un groupe contigu.
• Tout en maintenant la touche Ctrl (Windows) ou Cmde (Mac OS) enfonc&eacute;e, cliquez dessus pour s&eacute;lectionner
un groupe non contigu.
2 Faites glisser les pages s&eacute;lectionn&eacute;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&acirc;cher le bouton de la souris dans ces zones pour y d&eacute;placer les
pages s&eacute;lectionn&eacute;es.
Suppression d’une page
La page situ&eacute;e au-dessus de la page supprim&eacute;e devient la page active.
❖ Proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Dans le panneau Pages, faites glisser la page jusqu’&agrave; l’ic&ocirc;ne de la corbeille
.
• Cliquez avec le bouton droit de la souris sur la page, puis s&eacute;lectionnez Supprimer la page dans le menu
contextuel.
Modification de la zone de travail d’une page
Chaque page pr&eacute;sente une zone de travail qui lui est propre, avec une taille, une couleur et une r&eacute;solution graphique
ind&eacute;pendantes.
1 S&eacute;lectionnez une page dans le panneau Pages ou dans le menu contextuel de pages, dans la partie sup&eacute;rieure de la
fen&ecirc;tre du document.
2 Choisissez Modification &gt; Zone de travail &gt; Taille de l’image, Modification &gt; Zone de travail &gt; Couleur de la zone
de travail ou Modification &gt; Zone de travail &gt; Taille de la zone de travail.
3 Apportez les modifications n&eacute;cessaires. Vous pouvez &eacute;galement effectuer ces modifications via le panneau
Propri&eacute;t&eacute;s lorsque la zone de travail d’une page est s&eacute;lectionn&eacute;e.
4 Pour appliquer les modifications &agrave; la page s&eacute;lectionn&eacute;e uniquement, ne d&eacute;s&eacute;lectionnez pas l’option Page actuelle
uniquement. Pour appliquer les modifications &agrave; toutes les pages, d&eacute;s&eacute;lectionnez l’option.
Utilisation d’un gabarit
Pour exploiter un m&ecirc;me ensemble d’&eacute;l&eacute;ments sur toutes vos pages, utilisez une page ma&icirc;tresse appel&eacute;e un gabarit.
Lorsque vous convertissez une page ordinaire en gabarit, cette page devient la premi&egrave;re de la liste affich&eacute;e dans le
panneau Pages. Lorsque vous cr&eacute;ez un gabarit, un calque de gabarit est ajout&eacute; au bas de la hi&eacute;rarchie des calques pour
chaque page.
Cr&eacute;ation d’un gabarit
❖ Dans le panneau Pages, cliquez avec le bouton droit sur une page existante, puis s&eacute;lectionnez D&eacute;finir comme gabarit
dans le menu contextuel.
Tous les calques partag&eacute;s sur plusieurs pages deviennent des calques ordinaires (non partag&eacute;s). En revanche, les
calques partag&eacute;s entre les images restent inchang&eacute;s. Pour afficher des cadres de gabarit dans une page li&eacute;e, reportezvous &agrave; la section &laquo; Affichage des objets dans un &eacute;tat &raquo; &agrave; la page 225.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 209
Prototypage de sites Web et d’interfaces d’applications
Voir aussi
&laquo; Partage des calques &raquo; &agrave; la page 139
Liaison de pages au gabarit
Une fois le gabarit cr&eacute;&eacute;, toutes les pages nouvellement cr&eacute;&eacute;es h&eacute;ritent syst&eacute;matiquement des param&egrave;tres de ce gabarit.
En revanche, vous devez lier les pages existantes au gabarit pour qu’elles adoptent ses param&egrave;tres. Si vous modifiez
ensuite le gabarit, toutes les pages li&eacute;es sont automatiquement mises &agrave; jour.
Les restrictions suivantes s’appliquent &agrave; l’h&eacute;ritage des objets et des comportements entre les gabarits et d’autres pages :
• Les pages h&eacute;ritent uniquement de l’&eacute;tat actif de l’ensemble des objets d’un gabarit. Pour qu’elles h&eacute;ritent de tous les
&eacute;tats de tous les objets, sur chaque page, ajoutez le m&ecirc;me nombre d’&eacute;tats ou plus d’&eacute;tats &agrave; l’objet associ&eacute; au plus
grand nombre d’&eacute;tats. Tous les objets de cette page h&eacute;ritent de tous les &eacute;tats issus du gabarit.
• Les modifications apport&eacute;es &agrave; la taille de la zone de travail ou de l’image se r&eacute;percutent sur toutes les pages, y
compris celles non li&eacute;es au gabarit. Pour que les modifications ne s’appliquent qu’&agrave; la page active, s&eacute;lectionnez Page
active uniquement.
• Seules les pages li&eacute;es h&eacute;ritent des modifications relatives &agrave; la couleur de la zone de travail du gabarit.
❖ Proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Dans le panneau Pages, cliquez avec le bouton droit sur une page existante, puis s&eacute;lectionnez Lien vers le gabarit
dans le menu contextuel.
• Cliquez dans la colonne &agrave; gauche de la vignette de page dans le panneau Pages. L’ic&ocirc;ne de lien indique que la
page est li&eacute;e au gabarit.
Remarque : si vous modifiez un param&egrave;tre dans une page li&eacute;e au gabarit, le nouveau param&egrave;tre est pris en compte
mais annule le lien avec le gabarit.
Affichage ou masquage du calque de gabarit
Tout changement de visibilit&eacute; se r&eacute;percute sur toutes les pages.
❖ Dans le panneau Calques, cliquez sur l’ic&ocirc;ne en forme d’œil situ&eacute; &agrave; gauche du calque de gabarit.
Suppression des calques de gabarit
❖ Cliquez avec le bouton droit de la souris sur le panneau Calques, puis s&eacute;lectionnez Supprimer le calque du gabarit
dans le menu contextuel.
Pour r&eacute;int&eacute;grer le calque de gabarit &agrave; la page, cliquez avec le bouton droit dans le panneau Calques, puis s&eacute;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&eacute;lectionnez R&eacute;initialiser le gabarit dans le
menu contextuel.
Exportation des pages s&eacute;lectionn&eacute;es
Vous pouvez exporter plusieurs pages en une m&ecirc;me op&eacute;ration. Seules les pages s&eacute;lectionn&eacute;es sont export&eacute;es. Lors de
cette op&eacute;ration, les param&egrave;tres d’optimisation de chaque page sont utilis&eacute;s.
1 Dans le panneau Pages, s&eacute;lectionnez les pages &agrave; exporter.
2 Cliquez avec le bouton droit de la souris et s&eacute;lectionnez Exporter la/les page(s) s&eacute;lectionn&eacute;e(s).
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 210
Prototypage de sites Web et d’interfaces d’applications
3 Dans la bo&icirc;te de dialogue Exporter, s&eacute;lectionnez l’une des options suivantes dans le menu Exporter :
Calques vers fichiers Exporte les calques que contiennent les pages s&eacute;lectionn&eacute;es en tant que fichiers distincts.
Etats vers fichiers Exporte les &eacute;tats que contiennent les pages s&eacute;lectionn&eacute;es en tant que fichiers distincts.
Pages vers fichiers Exporte les pages s&eacute;lectionn&eacute;es en tant que fichiers distincts.
Personnalisation des noms de fichier lors de l'exportation des pages
1 Dans le panneau Pages, s&eacute;lectionnez les pages &agrave; exporter.
2 Cliquez avec le bouton droit de la souris et s&eacute;lectionnez Exporter la/les page(s) s&eacute;lectionn&eacute;e(s).
3 Dans la bo&icirc;te de dialogue Exporter, cliquez sur Options. Le bouton Options est activ&eacute; en fonction de l'option
s&eacute;lectionn&eacute;e dans le menu Exporter.
4 Dans la bo&icirc;te de dialogue Options d’exportation, s&eacute;lectionnez Ajouter un pr&eacute;fixe ou Ajouter un suffixe, puis
choisissez une option dans le menu. Vous pouvez attribuer un nom aux fichiers &agrave; l’aide de l’une des options
suivantes :
nom document Le nom du fichier source est ajout&eacute; en tant que pr&eacute;fixe ou suffixe. Si, par exemple, vous exportez la
page Index du fichier source sites.png et s&eacute;lectionnez l’option Ajouter un pr&eacute;fixe, le fichier g&eacute;n&eacute;r&eacute; s’appelle
Sites_Index.gif .
Num&eacute;rique (1, 2, 3...ou 01, 02, 03...) Les fichiers sont g&eacute;n&eacute;r&eacute;s par ordre num&eacute;rique, des nombres &eacute;tant ajout&eacute;s
comme pr&eacute;fixe ou suffixe. Tous les fichiers de page export&eacute;s sont num&eacute;rot&eacute;s dans l’ordre dans lequel ils figurent
dans le panneau Pages. Lorsque vous exportez un grand nombre de pages, faites appel &agrave; la s&eacute;quence &agrave; deux chiffres.
5 Les options du menu Type de fichier permettent d’optimiser les param&egrave;tres du fichier export&eacute;.
Exportation des tranches des pages s&eacute;lectionn&eacute;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&egrave;tres suivants de la bo&icirc;te de dialogue Exporter.
1 Dans le menu Exporter, s&eacute;lectionnez Documents HTML et images ou Images uniquement.
2 Dans le menu HTML, s&eacute;lectionnez Exporter le fichier HTML.
3 Dans le menu D&eacute;coupes, s&eacute;lectionnez Exporter les tranches.
4 S&eacute;lectionnez l’une des options suivantes :
D&eacute;coupes s&eacute;lectionn&eacute;es uniquement Les zones marqu&eacute;es en tant que tranches sont export&eacute;es.
Inclure les zones sans tranches Les zones qui ne sont pas marqu&eacute;es en tant que tranches sont &eacute;galement export&eacute;es.
Aper&ccedil;u de plusieurs pages
Lors de l’importation ou de l’ouverture de fichiers, affichez un aper&ccedil;u de toutes les pages, except&eacute; le gabarit. La page
s&eacute;lectionn&eacute;e lors de l’aper&ccedil;u re&ccedil;oit le focus &agrave; l’ouverture du fichier.
Lorsque vous ins&eacute;rez une page contenant des objets issus du calque du gabarit, le gabarit est converti en un calque
ordinaire et import&eacute;.
Activation de l’aper&ccedil;u de plusieurs pages
Lorsque vous importez ou ouvrez un fichier, affichez un aper&ccedil;u de toutes les pages qu’il contient. L’option d’aper&ccedil;u de
plusieurs pages est activ&eacute;e par d&eacute;faut dans la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 211
Prototypage de sites Web et d’interfaces d’applications
Pour activer l’aper&ccedil;u de plusieurs pages pour les fichiers cr&eacute;&eacute;s dans les versions pr&eacute;c&eacute;dentes, ouvrez ceux-ci dans la
version en cours et enregistrez-les.
1 Dans la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences, s&eacute;lectionnez G&eacute;n&eacute;rales.
2 S&eacute;lectionnez Enregistrer les vignettes sur chaque page pour activer l’aper&ccedil;u de plusieurs pages. Lorsque cette option
est d&eacute;sactiv&eacute;e, les noms de page sont enregistr&eacute;s mais les vignettes ne sont pas g&eacute;n&eacute;r&eacute;es pour les fichiers
correspondants.
Aper&ccedil;u de plusieurs pages avant ouverture ou importation
• Sous Windows, l’aper&ccedil;u est affich&eacute; dans la bo&icirc;te de dialogue Importer ou Ouvrir lorsque vous importez ou ouvrez
un fichier.
• Sur le Mac, cliquez sur Aper&ccedil;u dans la bo&icirc;te de dialogue Importer ou Ouvrir. Vous pouvez &eacute;galement cliquer deux
fois sur le fichier dans la bo&icirc;te de dialogue Importer pour activer le mode Aper&ccedil;u.
Lors de l'importation de fichiers, s&eacute;lectionnez Ins&eacute;rer apr&egrave;s la page active pour ajouter des pages import&eacute;es apr&egrave;s la
page s&eacute;lectionn&eacute;e dans le document.
Cr&eacute;ation de dispositions CSS
Vous pouvez cr&eacute;er des dispositions CSS dans un document Fireworks, puis les convertir en pages HTML via des r&egrave;gles
CSS r&eacute;pliquant vos dispositions. Les dispositions CSS fournissent une m&eacute;thode normalis&eacute;e et offrent un code
compatible avec diff&eacute;rents navigateurs.
Pour visionner un didacticiel vid&eacute;o sur la cr&eacute;ation de dispositions de page HTML CSS, acc&eacute;der &agrave;
www.adobe.com/go/lrvid4035_fw_fr. Voir &eacute;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&eacute;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&eacute;ment le code HTML et CSS gr&acirc;ce &agrave; un moteur
d’exportation qui analyse l’emplacement des objets. En outre, vous pouvez d&eacute;finir l’alignement des pages et sp&eacute;cifier
une image d’arri&egrave;re-plan r&eacute;currente.
Vous pouvez utiliser les &eacute;l&eacute;ments HTML disponibles dans le dossier HTML de la biblioth&egrave;que commune. Le dossier
HTML contient des &eacute;l&eacute;ments HTML, par exemple des boutons, des listes d&eacute;roulantes et des champs de texte. Vous
pouvez modifier les propri&eacute;t&eacute;s de ces &eacute;l&eacute;ments dans le panneau Propri&eacute;t&eacute;s du symbole. Lorsque vous faites glisser les
&eacute;l&eacute;ments de forme sur la page, le moteur d’exportation ins&egrave;re des balises &lt;form&gt; pendant l’exportation de la
disposition CSS.
Tout texte auquel a &eacute;t&eacute; ajout&eacute;e une tranche s’affiche sous la forme d’images dans le code HTML export&eacute;. Pour que ce
texte s’affiche sous la forme d’un texte, utilisez les composants HTML dans la biblioth&egrave;que commune. Les
composants HTML comprennent les en-t&ecirc;tes 1 &agrave; 6 et des &eacute;l&eacute;ments de lien.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 212
Prototypage de sites Web et d’interfaces d’applications
R&egrave;gles des dispositions CSS
Quelques r&egrave;gles doivent &ecirc;tre observ&eacute;es pendant la cr&eacute;ation des dispositions CSS pour obtenir les r&eacute;sultats souhait&eacute;s.
R&egrave;gle 1 : utilisez les rectangles pour exporter du texte et les tranches pour exporter des images Le moteur
d’exportation exporte le texte plac&eacute; dans les rectangles. Comme seules les images qui sont recouvertes par des tranches
rectangulaires sont export&eacute;es, placez des tranches sur les images &agrave; exporter. Ces tranches indiquent au moteur
d’exportation l’emplacement de ces images.
R&egrave;gle 2 : &eacute;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&eacute;terminer les lignes et les colonnes
logiques dans lesquelles les placer dans la disposition. Positionnez avec soin les objets en veillant &agrave; ce que les limites ne
se superposent pas.
R&egrave;gle 3 : planifiez la disposition des lignes et des colonnes Le moteur d’exportation recherche les partitions logiques
o&ugrave; une d&eacute;limitation nette peut &ecirc;tre plac&eacute;e entre les objets et les groupes d’objets. D&eacute;limitez les dispositions des
colonnes dans un rectangle pour emp&ecirc;cher le moteur d’exportation d’ins&eacute;rer une ligne logique qui viendrait rompre
la disposition des colonnes.
R&egrave;gle 4 : traitez le document en deux dimensions Lorsque vous cr&eacute;ez votre page, utilisez des rectangles pour encadrer
les objets que vous souhaitez traiter comme les enfants du rectangle. Le moteur d’exportation d&eacute;tecte ces relations
parent-enfant. Il analyse les &eacute;l&eacute;ments enfants des lignes et des colonnes logiques comme dans la r&egrave;gle 3.
En plus de ces r&egrave;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&eacute;s au texte ou aux rectangles, recouvrez-les avec des tranches
rectangulaires.
Exportation d’une disposition CSS
Fireworks permet d’exporter des dispositions cr&eacute;&eacute;es en tant que fichiers CSS. Vous pouvez ensuite ouvrir et modifier
ces fichiers CSS dans Dreamweaver ou dans un autre &eacute;diteur compatible avec CSS.
1 Choisissez la commande Fichier &gt; Exporter.
2 Dans le menu contextuel Exporter, s&eacute;lectionnez la commande CSS et Images.
3 Pour d&eacute;finir les propri&eacute;t&eacute;s de la page HTML, cliquez sur Options.
4 Pour d&eacute;finir une image d’arri&egrave;re-plan et la faire appara&icirc;tre en mosa&iuml;que, cliquez sur Parcourir :
• Pour afficher l’image une seule fois, s&eacute;lectionnez Pas de r&eacute;p&eacute;tition.
• Pour r&eacute;p&eacute;ter, ou mettre en mosa&iuml;que, l’image &agrave; l’horizontale et la verticale, s&eacute;lectionnez R&eacute;p&eacute;tition.
• S&eacute;lectionnez R&eacute;p&eacute;ter-x pour former une mosa&iuml;que horizontale.
• Pour former une mosa&iuml;que verticale, s&eacute;lectionnez R&eacute;p&eacute;ter-y.
5 Dans le navigateur, s&eacute;lectionnez un alignement de page &agrave; gauche, au centre ou &agrave; droite.
6 S&eacute;lectionnez le d&eacute;filement des pi&egrave;ces jointes en mode fixe ou d&eacute;filement.
7 Cliquez sur le bouton OK, puis sur Enregistrer.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 213
Prototypage de sites Web et d’interfaces d’applications
Cr&eacute;ation d’une d&eacute;monstration du document
Vous pouvez cr&eacute;er une d&eacute;monstration du document Fireworks sur lequel vous travaillez. La d&eacute;monstration s’ouvre
dans un navigateur afin de pr&eacute;senter les caract&eacute;ristiques et vous permet de naviguer dans les pages.
1 S&eacute;lectionnez Commandes &gt; D&eacute;monstration - Document actif.
2 S&eacute;lectionnez les pages pour lesquelles vous voulez cr&eacute;er une d&eacute;monstration, puis cliquez sur l’option de cr&eacute;ation
d’une d&eacute;monstration.
3 S&eacute;lectionnez le dossier, puis cliquez sur Ouvrir.
Prototypage d’applications Flex
Le processus de prototypage pour Flex est semblable au flux de production utilis&eacute; pour les sites Web et les interfaces
logicielles (voir la section &laquo; Flux de production de prototypage &raquo; &agrave; la page 205). Avec Fireworks, vous avez la possibilit&eacute;
de faire glisser des composants Flex dans la zone de travail, de sp&eacute;cifier leurs propri&eacute;t&eacute;s et d’exporter l’interface
utilisateur r&eacute;sultante vers MXML. Vous pouvez ensuite am&eacute;liorer l’interface utilisateur dans Flex Builder.
1. Cr&eacute;ation d’une interface utilisateur Flex
A l’aide du panneau Pages, cr&eacute;ez le nombre d’&eacute;crans d’interface n&eacute;cessaires &agrave; la r&eacute;alisation de votre projet initial.
2. Insertion de composants de conception Flex dans la disposition
Dans la zone de travail, ins&eacute;rez des composants Flex depuis le dossier Flex dans le panneau Biblioth&egrave;que commune.
Ces symboles de composant sont sp&eacute;cifiquement utilis&eacute;s avec l’exportation MXML de fa&ccedil;on &agrave; obtenir les r&eacute;sultats
souhait&eacute;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&eacute;s en tant que bitmaps, qui sont li&eacute;s au MXML via une balise &lt;mx:Image&gt; (voir la section &laquo; Cr&eacute;ation et
utilisation de symboles de composant &raquo; &agrave; la page 164).
Lors de la modification d’un composant de conception Flex dans Fireworks, vous pouvez copier le code XML modifi&eacute;
dans votre projet Flex. Vous gagnez ainsi du temps si vous souhaitez r&eacute;pliquer le comportement du composant modifi&eacute;
dans votre projet.
Les symboles Curseur, BarreDeD&eacute;filement, Onglet et Info-bulle sont ignor&eacute;s pendant une sortie MXML &eacute;tant donn&eacute;
que ces composants ne sont pas directement convertis depuis Fireworks vers MXML. Par exemple, le symbole
BarreDeD&eacute;filement s’affiche automatiquement dans les instances du conteneur Flex lorsqu’il est possible de faire
d&eacute;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&eacute;ation de prototypes Flex.
3. Partage de composants Flex communs entre plusieurs pages
Si un composant Flex est commun &agrave; plusieurs pages, toute modification met automatiquement &agrave; jour toutes les pages
(ou &eacute;crans) affect&eacute;(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 &laquo; Utilisation d’un gabarit &raquo; &agrave; la page 208 et
&laquo; Partage des calques &raquo; &agrave; la page 139).
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 214
Prototypage de sites Web et d’interfaces d’applications
4. Sp&eacute;cification de propri&eacute;t&eacute;s pour les composants Flex
Dans le panneau Propri&eacute;t&eacute;s du symbole (Fen&ecirc;tre &gt; Propri&eacute;t&eacute;s du symbole), sp&eacute;cifiez les propri&eacute;t&eacute;s et les &eacute;v&eacute;nements
de chaque composant Flex ins&eacute;r&eacute; 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&eacute;sultant dans Flex. Fireworks exporte
le MXML requis tout en conservant le style et le positionnement absolu. Les d&eacute;veloppeurs Flex peuvent utiliser cette
interface sans avoir &agrave; recr&eacute;er la disposition dans Flex.
Modification des propri&eacute;t&eacute;s de composants Flex
Vous pouvez modifier les propri&eacute;t&eacute;s et les &eacute;v&eacute;nements des composants Flex dans le panneau Propri&eacute;t&eacute;s du symbole.
1 S&eacute;lectionnez le composant Flex dans la zone de travail.
2 Ouvrez le panneau Propri&eacute;t&eacute;s du symbole (Fen&ecirc;tre &gt; Propri&eacute;t&eacute;s du symbole).
3 D&eacute;finissez les propri&eacute;t&eacute;s et les &eacute;v&eacute;nements du composant dans le panneau Propri&eacute;t&eacute;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&egrave;que communs en tant que composants connus &agrave; 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’&eacute;ditions
suppl&eacute;mentaires dans Flex Builder. En mode de conception, le prototype ressemble &agrave; son &eacute;quivalent Fireworks, sauf
en ce qui concerne les composants tels que les curseurs et les barres de d&eacute;filement qui ne sont pas export&eacute;s.
1 Choisissez la commande Fichier &gt; Exporter.
2 Dans le menu contextuel Exporter, s&eacute;lectionnez MXML et images.
3 S&eacute;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&eacute;lectionnez l’option Page active uniquement pour n’exporter que la page s&eacute;lectionn&eacute;e.
5 Cliquez sur Enregistrer pour terminer l’exportation.
Les images associ&eacute;es au prototype sont export&eacute;es vers le dossier d’images. De plus, les images des pages MXML
compl&egrave;tes sont &eacute;galement cr&eacute;&eacute;es avec les autres fichiers d’images. Vous pouvez supprimer les pages MXML car elles
ne requi&egrave;rent pas ces images d’aper&ccedil;u.
Cr&eacute;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&eacute;er des habillages pour de nombreux composants Flex bas&eacute;s sur les mod&egrave;les d’habillage Flex et les
modifier dans Fireworks.
1 S&eacute;lectionnez Commandes &gt; Habillage Flex &gt; Nouvel habillage Flex.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 215
Prototypage de sites Web et d’interfaces d’applications
2 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Pour cr&eacute;er des habillages Flex pour tous les composants disponibles, s&eacute;lectionnez Composants multiples.
Fireworks cr&eacute;e un seul document avec tous les composants Flex disponibles.
• Pour sp&eacute;cifier les composants pour lesquels vous voulez cr&eacute;er des habillages, s&eacute;lectionnez
Composants sp&eacute;cifiques.
S&eacute;lectionnez uniquement les composants qui ont un style sp&eacute;cifique ou s&eacute;lectionner toutes les instances du
composant.
3 Cliquez sur OK.
Exportation d’habillages Flex
1 S&eacute;lectionnez Commandes &gt; Habillage Flex &gt; Exporter habillage Flex.
2 S&eacute;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&icirc;tre ses fonctionnalit&eacute;s et ses limites :
L’exportation MXML ne proc&egrave;de pas &agrave; l’habillage des composants L’exportation au format MXML ne cr&eacute;e pas
d’habillages pour les composant dans Flex, m&ecirc;me si vous les avez modifi&eacute;s dans Fireworks. L’exportation au
format MXML g&eacute;n&egrave;re simplement des documents MXML &agrave; utiliser dans Flex. Ces documents peuvent &eacute;galement
comporter des images li&eacute;es pour des objets Fireworks qui ne peuvent pas &ecirc;tre convertis en balises MXML. Ces images
sont ajout&eacute;es au document MXML via des balises &lt;mx:Image&gt;.
L’exportation MXML ignore les tranches L’exportation au format MXML &eacute;tant con&ccedil;ue pour g&eacute;n&eacute;rer un document
dot&eacute; de balises &agrave; utiliser avec Flex, les tranches ne sont pas prises en compte dans la cr&eacute;ation d’images ou de cellules de
tableau. Lorsque l’exportation au format MXML cr&eacute;e des images, elle utilise les param&egrave;tres d’optimisation du
document pour d&eacute;terminer le format d’image et la m&eacute;thode de compression.
Les propri&eacute;t&eacute;s MXML sont limit&eacute;es aux propri&eacute;t&eacute;s de symboles enrichis L’exportation au format MXML base les
propri&eacute;t&eacute;s d’une balise MXML sur le composant Flex dans Fireworks. Fireworks fournit un sous-ensemble de
composants Flex avec un nombre de propri&eacute;t&eacute;s limit&eacute;.
Les styles sont int&eacute;gr&eacute;s Les propri&eacute;t&eacute;s reconnues en tant que styles sont s&eacute;par&eacute;es des balises MXML cr&eacute;&eacute;es, mais sont
conserv&eacute;es dans le m&ecirc;me document MXML dans une balise &lt;mx:Style&gt;. Fireworks ne peut pas d&eacute;finir les styles dans
un fichier CSS externe.
Les cadres ne sont pas pris en charge Lors de la cr&eacute;ation de conceptions et de mises en page pour une sortie MXML,
n’utilisez pas de cadres. Si vous souhaitez obtenir des conceptions diff&eacute;rentes dans un document, utilisez des pages.
Voir aussi
&laquo; Cr&eacute;ation et utilisation de symboles de composant &raquo; &agrave; la page 164
Derni&egrave;re mise &agrave; 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&acirc;ce &agrave; Adobe&reg; 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&eacute;es. Vous pouvez utiliser
Adobe AIR pour regrouper cet ensemble de pages en une petite application qui peut &ecirc;tre install&eacute;e sur l’ordinateur d’un
utilisateur. Lorsqu’un utilisateur ex&eacute;cute l’application depuis son bureau, celle-ci se charge et affiche le prototype dans
sa propre fen&ecirc;tre d’application, ind&eacute;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&eacute;rience utilisateur de la marque :
http://www.adobe.com/go/learn_fw_airexperiencebrand_fr.
Ajout d’&eacute;v&eacute;nements de souris Adobe AIR
Vous pouvez ajouter des &eacute;v&eacute;nements de souris Adobe AIR pr&eacute;d&eacute;finis aux objets de votre document. Fireworks propose
quatre &eacute;v&eacute;nements de souris pr&eacute;d&eacute;finis : fermer la fen&ecirc;tre, faire glisser la fen&ecirc;tre, agrandir la fen&ecirc;tre et r&eacute;duire la
fen&ecirc;tre.
1 S&eacute;lectionnez les objets sur la zone de travail auxquels vous souhaitez appliquer les &eacute;v&eacute;nements de souris.
2 S&eacute;lectionnez la commande Commandes &gt; Ev&eacute;nements de souris 3D et choisissez l’&eacute;v&eacute;nement.
Aper&ccedil;u d’une application Adobe AIR
Vous pouvez pr&eacute;visualiser une application Adobe AIR sans d&eacute;finir de param&egrave;tres d’application Adobe AIR.
❖ Choisissez la commande Commandes &gt; Cr&eacute;er un package AIR, puis cliquez sur l'option Aper&ccedil;u.
Cr&eacute;ation d’une application Adobe AIR
❖ S&eacute;lectionnez Commandes &gt; Cr&eacute;er un package AIR et d&eacute;finissez les options suivantes :
Nom de l’application Sp&eacute;cifiez le nom qui s’affiche sur les &eacute;crans d’installation lorsque des utilisateurs installent
l’application. L’extension sp&eacute;cifie le nom du site Fireworks par d&eacute;faut.
ID de l’application Entrez un ID unique pour votre application. N’utilisez pas d’espaces ni de caract&egrave;res sp&eacute;ciaux
dans l’ID. Les seuls caract&egrave;res valides sont 0 &agrave; 9, a &agrave; z, A &agrave; Z, . (point) et - (tiret). Ce param&egrave;tre est obligatoire.
Version Sp&eacute;cifiez un num&eacute;ro de version pour votre application. Ce param&egrave;tre est obligatoire.
Dossier du menu Programmes Sp&eacute;cifiez un dossier dans le menu D&eacute;marrer de Windows o&ugrave; vous souhaitez cr&eacute;er le
raccourci vers l’application. (Non applicable sous Mac OS)
Description Ajoutez la description &agrave; afficher lorsque l’utilisateur l’installe l’application.
Copyright Sp&eacute;cifiez l’avis de copyright qui s’affiche dans la section indiquant des informations sur les applications
Adobe AIR install&eacute;es sous Mac OS. Ces informations ne sont pas utilis&eacute;es pour les applications install&eacute;es sous
Windows.
Contenu du package S&eacute;lectionnez l’option Document actif pour d&eacute;finir automatiquement le dossier &agrave; 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&eacute;lectionn&eacute; Document actif, le contenu racine est d&eacute;fini automatiquement.
Fichiers inclus Sp&eacute;cifiez les fichiers ou dossiers &agrave; inclure dans votre application. Vous pouvez ajouter des
fichiers HTML et CSS, des fichiers d’image et des fichiers de biblioth&egrave;que JavaScript. Cliquez sur le bouton Plus (+)
Derni&egrave;re mise &agrave; 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&ocirc;ne de dossier pour ajouter des dossiers. Pour supprimer un fichier ou un dossier
de la liste, s&eacute;lectionnez-le et cliquez sur le bouton Moins (-). Les fichiers ou les dossiers s&eacute;lectionn&eacute;s &agrave; inclure dans
le package Adobe AIR doivent appartenir au dossier du contenu racine.
Chrome syst&egrave;me et Transparent Sp&eacute;cifiez le style de fen&ecirc;tre (ou chrome) &agrave; utiliser lorsque les utilisateurs ex&eacute;cutent
l’application sur leur ordinateur. Le chrome syst&egrave;me entoure l’application avec le contr&ocirc;le de fen&ecirc;tre standard du
syst&egrave;me d’exploitation. Le chrome transparent supprime le chrome syst&egrave;me standard et vous permet de cr&eacute;er le
v&ocirc;tre pour l’application. Vous pouvez donc cr&eacute;er des fen&ecirc;tres d’application qui ne sont pas rectangulaires.
Largeur et Hauteur Sp&eacute;cifiez les dimensions de la fen&ecirc;tre d’application en pixels lorsqu’elle s’ouvre.
S&eacute;lectionner les images d’ic&ocirc;ne Cliquez pour s&eacute;lectionner des images personnalis&eacute;es pour les ic&ocirc;nes de
l’application. S&eacute;lectionnez le dossier pour chaque taille d’ic&ocirc;ne et choisissez l’image &agrave; utiliser. Seuls les fichiers PNG
sont pris en charge pour les images d’ic&ocirc;nes de l’application.
Remarque : les images personnalis&eacute;es s&eacute;lectionn&eacute;es doivent r&eacute;sider dans le site de l’application et leurs chemins
doivent &ecirc;tre relatifs &agrave; la racine du site.
Signature num&eacute;rique Cliquez sur D&eacute;finir pour signer votre application &agrave; l’aide d’une signature num&eacute;rique. Ce
param&egrave;tre est obligatoire. Pour plus d’informations, reportez-vous aux sections suivantes.
Cr&eacute;er un package du fichier Sp&eacute;cifiez le dossier dans lequel est enregistr&eacute; le nouveau programme d’installation de
l’application (fichier .air). L’emplacement par d&eacute;faut est la racine du site. Cliquez sur le bouton Parcourir pour
choisir un autre emplacement. Le nom de fichier par d&eacute;faut est bas&eacute; sur le nom du site suivi de l’extension .air. Ce
param&egrave;tre est obligatoire.
Signature d’une application Adobe AIR &agrave; l’aide d’un certificat num&eacute;rique
Une signature num&eacute;rique permet de garantir que le code d’une application n’a pas &eacute;t&eacute; modifi&eacute; ou corrompu depuis sa
cr&eacute;ation par l’auteur du logiciel. Toutes les applications Adobe AIR n&eacute;cessitent une signature num&eacute;rique et ne peuvent
&ecirc;tre install&eacute;es sans celle-ci.
1 Dans la bo&icirc;te de dialogue Cr&eacute;er un package AIR, cliquez sur le bouton D&eacute;finir situ&eacute; en regard de l’option Signature
num&eacute;rique.
2 Dans la bo&icirc;te de dialogue Signature num&eacute;rique, effectuez l’une des op&eacute;rations suivantes :
• Pour signer une application avec un certificat num&eacute;rique pr&eacute;achet&eacute;, cliquez sur le bouton Parcourir,
s&eacute;lectionnez le certificat, entrez le mot de passe correspondant et cliquez sur OK.
• Pour cr&eacute;er votre propre certificat num&eacute;rique d’auto-signature, cliquez sur le bouton Cr&eacute;er et remplissez la bo&icirc;te
de dialogue. L’option de type de cl&eacute; du certificat fait r&eacute;f&eacute;rence au niveau de s&eacute;curit&eacute; du certificat : 1024-RSA
utilise une cl&eacute; 1 024 bits (moins s&eacute;curis&eacute;e) et 2048-RSA une cl&eacute; 2 048 bits (plus s&eacute;curis&eacute;e). Lorsque vous avez
termin&eacute;, cliquez sur Cr&eacute;er. Ensuite, entrez le mot de passe correspondant dans la bo&icirc;te de dialogue Signature
num&eacute;rique et cliquez sur OK.
Remarque : Java&reg; Runtime Environment (JRE) doit &ecirc;tre install&eacute; sur l’ordinateur.
Derni&egrave;re mise &agrave; jour le 29/4/2010
Chapitre 15 : Cr&eacute;ation d’animations
Notions de base sur les animations
Adobe&reg; Fireworks&reg; permet de cr&eacute;er des graphiques anim&eacute;s pour vos banni&egrave;res publicitaires, logos, bandes dessin&eacute;es,
etc. Pour cr&eacute;er une animation, vous affectez des propri&eacute;t&eacute;s aux objets appel&eacute;s symboles d’animation. L’animation d’un
symbole est d&eacute;compos&eacute;e en &eacute;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&eacute;rente. Les divers symboles peuvent contenir
un nombre d’&eacute;tats diff&eacute;rent. La fin de l’ex&eacute;cution de toutes les actions de tous les symboles marque la fin de
l’animation.
Vous pouvez appliquer des param&egrave;tres au symbole afin de modifier peu &agrave; peu le contenu des &eacute;tats successifs. Un
symbole peut sembler se d&eacute;placer dans la zone de travail, appara&icirc;tre et dispara&icirc;tre progressivement, grossir ou r&eacute;tr&eacute;cir,
ou encore pivoter. Comme un m&ecirc;me fichier contient parfois plusieurs symboles, vous pouvez cr&eacute;er une animation
complexe dans laquelle diff&eacute;rents types d’actions se produisent simultan&eacute;ment.
Vous pouvez modifier les param&egrave;tres d’optimisation et d’exportation du panneau Optimiser pour contr&ocirc;ler le mode
de cr&eacute;ation du fichier. Fireworks peut exporter des animations dans les formats GIF anim&eacute; ou Flash&reg; SWF. Vous
pouvez &eacute;galement importer des animations Fireworks directement dans Flash pour les am&eacute;liorer.
L’article de Zsolt Szekely dans le Centre des d&eacute;veloppeurs Adobe contient des informations utiles sur la cr&eacute;ation de
logos anim&eacute;s www.adobe.com/go/learn_fw_creatinganimlogos_fr.
Flux de production de l’animation
1 Cr&eacute;ez un symbole d’animation &agrave; partir de z&eacute;ro ou en convertissant un objet existant en symbole (voir &laquo; Cr&eacute;ation
de symboles d’animation &raquo; &agrave; la page 219).
2 Modifiez le symbole d’animation dans l’inspecteur des propri&eacute;t&eacute;s ou la bo&icirc;te de dialogue Animer. Vous pouvez
d&eacute;finir l’angle et la direction du mouvement, la mise &agrave; l’&eacute;chelle, l’opacit&eacute; (pour les apparitions et disparitions
progressives), ainsi que l’angle et la direction de la rotation (voir &laquo; Modification de symboles d’animation &raquo; &agrave; la
page 220).
Remarque : l’angle et la direction du mouvement sont d&eacute;finis uniquement dans la bo&icirc;te de dialogue Animer.
3 Vous pouvez d&eacute;finir la vitesse de l’animation &agrave; l’aide des contr&ocirc;les Cadence des &eacute;tats du panneau Etats (voir la
section &laquo; D&eacute;finition de la dur&eacute;e des &eacute;tats &raquo; &agrave; la page 223).
4 Optimisez le document sous forme de fichier GIF anim&eacute; (voir la section &laquo; Optimisation d’une animation &raquo; &agrave; la
page 227).
5 Exportez le document au format de fichier GIF anim&eacute; ou SWF, ou enregistrez-le au format de fichier
PNG Fireworks et importez-le dans Flash pour l’am&eacute;liorer (voir la section &laquo; Exportation d’une animation &raquo; &agrave; la
page 255).
A propos des symboles d’animation
Les symboles d’animation sont les acteurs de l’animation. Un symbole d’animation peut &ecirc;tre tout objet que vous cr&eacute;ez
ou importez, et il peut y avoir un grand nombre de symboles dans un m&ecirc;me fichier. Chaque symbole dispose de
propri&eacute;t&eacute;s qui lui sont propres et se comporte de mani&egrave;re ind&eacute;pendante. Vous pouvez ainsi cr&eacute;er des symboles qui
traversent l’&eacute;cran, tandis que d’autres apparaissent, disparaissent ou rapetissent.
218
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 219
Cr&eacute;ation d’animations
Chaque aspect de votre animation n’a pas n&eacute;cessairement besoin de symboles. L’utilisation de symboles ou
d’occurrences de graphiques qui apparaissent &agrave; plusieurs &eacute;tats permet toutefois de r&eacute;duire la taille du fichier.
Vous pouvez modifier les propri&eacute;t&eacute;s des symboles d’animation &agrave; tout moment, &agrave; l’aide de la bo&icirc;te de dialogue Animer
ou de l’inspecteur des propri&eacute;t&eacute;s. Vous pouvez &eacute;galement modifier l’apparence des symboles sans affecter le reste du
document. Vous pouvez aussi modifier le mouvement d’un symbole en d&eacute;pla&ccedil;ant sa trajectoire.
Comme les symboles d’animation sont automatiquement plac&eacute;s dans la biblioth&egrave;que, vous pouvez les r&eacute;utiliser pour
cr&eacute;er d’autres animations.
Cr&eacute;ation de symboles d’animation
Vous pouvez cr&eacute;er un symbole d’animation de toutes pi&egrave;ces ou convertir un objet existant en symbole. Vous pouvez
d&eacute;finir des propri&eacute;t&eacute;s qui d&eacute;terminent le nombre d’&eacute;tats de l’animation et le type d’action (changement d’&eacute;chelle ou
rotation, par exemple). Par d&eacute;faut, un nouveau symbole d’animation comporte cinq &eacute;tats, dont chacun s’affiche
pendant 0,07 seconde.
Pour plus d'informations sur les &eacute;tats des animations, consultez l'article de David Hogue
http://www.adobe.com/go/learn_fw_pagestatelay_fr.
Cr&eacute;ation d’un symbole d’animation
1 Choisissez Edition &gt; Insertion &gt; Nouveau symbole.
2 Dans la bo&icirc;te de dialogue Convertir en symbole, entrez le nom du nouveau symbole.
3 S&eacute;lectionnez Animation, puis cliquez sur OK.
4 Dans le panneau du document, cr&eacute;ez un objet &agrave; l’aide des outils de dessin ou de texte. Vous pouvez tracer des objets
vectoriels ou bitmap.
5 Lorsque vous avez termin&eacute; de travailler sur le symbole, acc&eacute;dez &agrave; la vue d’ensemble de la page (voir la section
&laquo; Passage du mode d’&eacute;dition de symboles au mode d’&eacute;dition de pages &raquo; &agrave; la page 162).
Fireworks int&egrave;gre le symbole &agrave; la biblioth&egrave;que de documents et en place une copie au centre de la page.
Vous pouvez ajouter de nouveaux &eacute;tats au symbole &agrave; l’aide du curseur Etats de l’inspecteur des propri&eacute;t&eacute;s.
Choisissez Fen&ecirc;tre &gt; Propri&eacute;t&eacute;s pour ouvrir l’inspecteur des propri&eacute;t&eacute;s, s’il n’est pas ouvert.
Conversion d’un objet en symbole d’animation
1 S&eacute;lectionnez l’objet.
2 Choisissez la commande Modification &gt; Animation &gt; Animer la s&eacute;lection.
3 D&eacute;finissez les propri&eacute;t&eacute;s d’animation pour modifier le symbole.
Les contr&ocirc;les d’animation apparaissent sur le cadre de s&eacute;lection de l’objet, et une copie du symbole est ajout&eacute;e &agrave;
la biblioth&egrave;que.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 220
Cr&eacute;ation d’animations
Modification de symboles d’animation
Vous pouvez modifier diverses propri&eacute;t&eacute;s des symboles, telles que l’opacit&eacute; ou la rotation de l’animation. Un symbole
peut tourner sur lui-m&ecirc;me, prendre de la vitesse, appara&icirc;tre et dispara&icirc;tre progressivement, et vous pouvez combiner
ces effets.
Le nombre d’&eacute;tats est une propri&eacute;t&eacute; cl&eacute;. Lorsque vous d&eacute;finissez cette propri&eacute;t&eacute;, Fireworks ajoute automatiquement au
document le nombre d’&eacute;tats requis pour terminer l’action. Si le symbole n&eacute;cessite plus d’&eacute;tats qu’il n’en existe dans
l’animation, un message Fireworks vous demande si vous souhaitez ajouter des &eacute;tats.
Vous pouvez modifier les propri&eacute;t&eacute;s de l’animation &agrave; l’aide de la bo&icirc;te de dialogue Animer ou de l’inspecteur
des propri&eacute;t&eacute;s.
Pour r&eacute;gler la vitesse de l’animation, reportez-vous &agrave; la section &laquo; D&eacute;finition de la dur&eacute;e des &eacute;tats &raquo; &agrave; la page 223. Pour
modifier du texte, des graphiques, des contours, des fonds ou des effets, reportez-vous aux sections &laquo; Modification d’un
symbole et de toutes ses occurrences &raquo; &agrave; la page 162 et &laquo; Modification d’occurrences de symboles sp&eacute;cifiques &raquo; &agrave; la
page 163.
Propri&eacute;t&eacute;s des symboles d’animation
Etats Nombre d’&eacute;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&eacute;faut est 5.
D&eacute;placer (bo&icirc;te de dialogue Animer uniquement) Distance de d&eacute;placement de l’objet, exprim&eacute;e en pixels. La valeur
par d&eacute;faut est 72, mais il n’existe aucune limite de valeur. Les mouvements sont lin&eacute;aires et il n’existe aucun &eacute;tat cl&eacute; (ce
qui n’est pas le cas dans Flash et Adobe Director).
Direction (bo&icirc;te de dialogue Animer uniquement) Direction du d&eacute;placement de l’objet, exprim&eacute;e en degr&eacute;s, de 0
&agrave; 360. Vous pouvez &eacute;galement modifier les valeurs Mouvement et Direction en faisant glisser les poign&eacute;es d’animation
de l’objet.
Mise &agrave; l’&eacute;chelle Redimensionnement du symbole, exprim&eacute; en pourcentage, entre le d&eacute;but et la fin de l’animation. La
valeur par d&eacute;faut est 100 %, mais il n’existe aucune limite de valeur. Pour mettre &agrave; l’&eacute;chelle un objet de 0 % &agrave; 100 %,
l’objet d’origine doit &ecirc;tre petit ; des objets vectoriels sont recommand&eacute;s.
Opacit&eacute; Degr&eacute; de fondu (apparition ou disparition) entre le d&eacute;but et la fin de l’animation. Les valeurs possibles sont
comprises entre 0 et 100, 100 % &eacute;tant la valeur par d&eacute;faut. La cr&eacute;ation d’un fondu encha&icirc;n&eacute; n&eacute;cessite deux occurrences
du m&ecirc;me symbole : une pour le fondu &agrave; l’ouverture en fondu et l’autre pour le fondu &agrave; la fermeture.
Rotation Degr&eacute; de rotation entre le d&eacute;but et la fin de l’animation. Les valeurs possibles sont comprises entre 0 et 360&deg;.
Vous pouvez entrer des valeurs sup&eacute;rieures pour obtenir plusieurs rotations. La valeur par d&eacute;faut est 0&ordm;.
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&eacute;t&eacute;s des symboles d’animation
1 S&eacute;lectionnez un symbole d’animation.
2 S&eacute;lectionnez Modification &gt; Animation &gt; Param&egrave;tres pour ouvrir la bo&icirc;te de dialogue Animer. Choisissez
Fen&ecirc;tre &gt; Propri&eacute;t&eacute;s pour ouvrir l’inspecteur des propri&eacute;t&eacute;s, s’il n’est pas ouvert.
3 Modifiez les propri&eacute;t&eacute;s.
4 Si vous utilisez la bo&icirc;te de dialogue Animer, cliquez sur OK pour accepter les propri&eacute;t&eacute;s modifi&eacute;es.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 221
Cr&eacute;ation d’animations
Suppression d’animations
Pour supprimer des animations, supprimez le symbole d’animation de la biblioth&egrave;que ou supprimez l’animation du
symbole.
Suppression de l’animation depuis le symbole d’animation s&eacute;lectionn&eacute;
❖ Choisissez Modification &gt; Animation &gt; Supprimer l’animation.
Le symbole devient un symbole graphique et n’est plus anim&eacute;. Si, ult&eacute;rieurement, vous convertissez de nouveau le
symbole en symbole d’animation, il conserve ses param&egrave;tres d’animation pr&eacute;c&eacute;dents.
Suppression d’un symbole de la biblioth&egrave;que de documents
1 S&eacute;lectionnez le symbole d’animation dans le panneau Biblioth&egrave;que de documents.
2 Faites glisser le symbole vers l’ic&ocirc;ne de la corbeille, dans le coin inf&eacute;rieur droit.
Modification du mouvement ou de la direction d’un symbole
Le symbole d’animation s&eacute;lectionn&eacute; dispose d’un cadre de s&eacute;lection unique et d’une trajectoire qui indique la direction
de son d&eacute;placement.
Sur cette trajectoire, le point vert est le point de d&eacute;part, et le point rouge indique le point d’arriv&eacute;e. Les points bleus
interm&eacute;diaires repr&eacute;sentent les &eacute;tats. Par exemple, la trajectoire d’un symbole qui s’&eacute;tend sur cinq &eacute;tats comporte un
point vert, trois points bleus et un point rouge. Si l’objet appara&icirc;t sur le troisi&egrave;me point, l’&eacute;tat 3 est l’&eacute;tat actif.
Vous pouvez modifier la direction du d&eacute;placement en changeant l’angle de la trajectoire.
❖ Faites glisser l’une des poign&eacute;es de d&eacute;but ou de fin d’animation de l’objet vers un nouvel emplacement. Pour
contraindre la direction du d&eacute;placement par incr&eacute;ments de 45&deg;, faites glisser le symbole tout en maintenant la
touche Maj enfonc&eacute;e.
Voir aussi
&laquo; D&eacute;finition de la dur&eacute;e des &eacute;tats &raquo; &agrave; 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 &eacute;tats correspondent &agrave; des
images dans les versions ant&eacute;rieures &agrave; Fireworks CS4.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 222
Cr&eacute;ation d’animations
Pour cr&eacute;er des animations, vous cr&eacute;ez des &eacute;tats. Leur contenu s’affiche dans le panneau Etats. Dans ce panneau, vous
pouvez nommer les &eacute;tats, les r&eacute;organiser, d&eacute;finir manuellement la cadence de l’animation et d&eacute;placer des objets d’un
&eacute;tat &agrave; une autre.
Chaque &eacute;tat est &eacute;galement associ&eacute; &agrave; des propri&eacute;t&eacute;s. Vous pouvez d&eacute;finir la cadence des &eacute;tats ou masquer un &eacute;tat pour
visualiser l’animation au fur et &agrave; mesure de son &eacute;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&egrave;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 &eacute;tats. Les objets qui se trouvent
sur un calque partag&eacute; sont visibles sur chaque &eacute;tat. Pour plus d’informations, reportez-vous &agrave; la section &laquo; Partage des
calques &raquo; &agrave; la page 139.
Etats et calques
Les pages contiennent des &eacute;tats, tandis que les &eacute;tats contiennent des calques. Une nouvelle page ne contient qu'un seul
&eacute;tat. Tous les calques que vous cr&eacute;ez et tous les objets qui figurent sur ces calques n'ont qu'un seul &eacute;tat. Pour
comprendre la relation entre les &eacute;tats, les pages et les calques, voir l'article de David Hogue
www.adobe.com/go/learn_fw_usingpagesstates_fr.
Lorsque vous cr&eacute;ez un &eacute;tat dans le panneau Etats, le nouvel &eacute;tat comporte le m&ecirc;me nombre de calques que l'&eacute;tat
pr&eacute;c&eacute;dent. Cependant, ces calques sont vides et ne contiennent pas d'objets provenant de l'&eacute;tat pr&eacute;c&eacute;dent. Pour
reproduire des objets d'un &eacute;tat &agrave; l'autre, cr&eacute;ez un double d'un &eacute;tat et non pas un nouvel &eacute;tat. Les instances d'objet
restent ind&eacute;pendantes apr&egrave;s leur duplication quel que soit l'&eacute;tat associ&eacute;.
Remarque : La suppression d'un calque de l'un des &eacute;tats supprime ce calque dans tous les autres &eacute;tats.
Pour partager les objets d'un calque entre plusieurs &eacute;tats, cliquez du bouton droit sur ce calque, puis s&eacute;lectionnez
Calque partag&eacute; vers &eacute;tats. Les objets du calque sont partag&eacute;s entre les diff&eacute;rents &eacute;tats, ainsi que sur les nouveaux &eacute;tats
lors de leur cr&eacute;ation. Tous les objets du calque correspondant dans les autres &eacute;tats sont supprim&eacute;s et remplac&eacute;s par des
objets provenant du calque partag&eacute;. Toute modification des objets dans le calque partag&eacute; est report&eacute;e dans les
diff&eacute;rents &eacute;tats.
Etats et gabarits
Les &eacute;tats d'un gabarit correspondent directement aux &eacute;tats des autres pages de votre document. Lorsque vous copiez
l'&eacute;tat 1 sur une page A ordinaire, tous les objets de la page A avec l'&eacute;tat 1 sont copi&eacute;s sur la page A avec l'&eacute;tat 2, et le
gabarit avec l'&eacute;tat 2 est partag&eacute;. Dans la mesure o&ugrave; le gabarit ne comporte qu'un seul &eacute;tat, l'&eacute;tat 2 de toute autre page
est vide.
Si vous dupliquez l'&eacute;tat 1 pour cr&eacute;er l'&eacute;tat 2 sur un gabarit, le calque d'arri&egrave;re-plan du gabarit est &eacute;galement dupliqu&eacute;
sur l'&eacute;tat 2 du gabarit. L'&eacute;tat 2 du gabarit est partag&eacute; avec l'&eacute;tat 2 de l'ensemble des pages du document.
En r&eacute;sum&eacute;, l'&eacute;tat 1 du gabarit est partag&eacute; avec l'&eacute;tat 1 de toutes les pages, l'&eacute;tat 2 du gabarit est partag&eacute; avec l'&eacute;tat 2 de
toutes les pages, et ainsi de suite. Si une page ordinaire contient davantage d'&eacute;tats que le gabarit, aucun &eacute;tat du gabarit
n'est partag&eacute; avec ces &eacute;tats suppl&eacute;mentaires. Il est cependant possible d'ajouter des &eacute;tats au gabarit qui sont ensuite
report&eacute;s sur ces &eacute;tats.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 223
Cr&eacute;ation d’animations
Cr&eacute;ation d'un prototype/d'une page de d&eacute;monstration avec des boutons et
des animations
Les documents Fireworks contenant &agrave; la fois des boutons et des animations ne sont g&eacute;n&eacute;ralement pas affich&eacute;s comme
pr&eacute;vu. Fireworks traite les animations comme une page enti&egrave;re, tandis que pour les boutons il consid&egrave;re que vous
&eacute;changez simplement les images sous cette d&eacute;coupe. Lorsqu'une animation est en cours de lecture, tout change sur la
page, ce qui inclut les &eacute;tats de boutons.
Les animations et les boutons doivent &ecirc;tre cr&eacute;&eacute;s et export&eacute;s de fa&ccedil;on distincte dans une page Web. Les boutons avec
une fonction de survol ont recours &agrave; JavaScript pour afficher les diff&eacute;rents &eacute;tats, mais les animations de Fireworks sont
export&eacute;es au format GIF ou SWF, qui est autonome.
D&eacute;finition de la dur&eacute;e des &eacute;tats
La cadence des &eacute;tats indique la dur&eacute;e (en centi&egrave;mes de seconde) d’affichage de l’&eacute;tat. Par exemple, indiquez 50 pour
afficher l’&eacute;tat pendant une demi-seconde, ou 300 pour l’afficher pendant trois secondes.
1 S&eacute;lectionnez un ou plusieurs &eacute;tats :
• Pour s&eacute;lectionner une plage d’&eacute;tats contigus, maintenez la touche Maj enfonc&eacute;e et cliquez sur le nom du premier
et du dernier &eacute;tat.
• Pour s&eacute;lectionner une plage d’&eacute;tats non contigus, cliquez sur le nom de chaque &eacute;tat tout en maintenant la
touche Ctrl (Windows) ou Commande (Mac OS) enfonc&eacute;e.
2 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Dans le menu Options du panneau Etats, cliquez sur Propri&eacute;t&eacute;s.
• Cliquez deux fois sur la colonne Cadence des &eacute;tats.
3 Entrez une valeur de cadence des &eacute;tats.
4 Appuyez sur la touche Entr&eacute;e ou cliquez en dehors du panneau.
Masquage d’&eacute;tats en cours de lecture
Les &eacute;tats masqu&eacute;s ne s’affichent pas en cours de lecture et ne sont pas export&eacute;s.
1 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Dans le menu Options du panneau Etats, cliquez sur Propri&eacute;t&eacute;s.
• Cliquez deux fois sur la colonne Cadence des &eacute;tats.
2 D&eacute;s&eacute;lectionnez Inclure lors de l’exportation.
3 Appuyez sur la touche Entr&eacute;e ou cliquez en dehors du panneau.
Modification des noms d’&eacute;tats
Lorsque vous d&eacute;finissez une animation, Fireworks cr&eacute;e les &eacute;tats n&eacute;cessaires et les affiche dans le panneau Etats en tant
que Etat 1, Etat 2, etc. Lorsque vous d&eacute;placez un &eacute;tat dans le panneau, Fireworks renomme les &eacute;tats concern&eacute;s en
fonction du nouvel ordre d’apparition.
Donnez un nom significatif &agrave; vos &eacute;tats pour les retrouver facilement. D&eacute;placer un &eacute;tat renomm&eacute; n’a aucun effet sur le
nom de l’&eacute;tat.
1 Dans le panneau Etat, cliquez deux fois sur le nom de l’&eacute;tat.
2 Saisissez un nouveau nom et appuyez sur la touche Entr&eacute;e.
UTILISATION DE FIREWORKS CS5 224
Derni&egrave;re mise &agrave; jour le 29/4/2010
Cr&eacute;ation d’animations
Personnalisation des noms des &eacute;tats
1 S&eacute;lectionnez Fichier &gt; Configuration HTML.
2 Dans la bo&icirc;te de dialogue Configuration HTML, s&eacute;lectionnez l’onglet Propre au document.
3 S&eacute;lectionnez Personnalis&eacute; dans le menu Noms des &eacute;tats.
4 Dans la bo&icirc;te de dialogue qui s’affiche, d&eacute;finissez les noms personnalis&eacute;s &agrave; ajouter aux &eacute;tats.
Le nom personnalis&eacute; est conserv&eacute; pendant toute la session. Comme il s’agit d’un param&egrave;tre propre au document,
s&eacute;lectionnez &laquo; Personnalis&eacute; &raquo; comme indiqu&eacute; dans la premi&egrave;re image-&eacute;cran.
Utilisation des &eacute;tats
Dans le panneau Etats, vous pouvez ajouter, copier et supprimer des &eacute;tats ou en changer l’ordre.
Ajout d’un nouvel &eacute;tat
❖ Cliquez sur le bouton Nouvel &eacute;tat/Dupliquer l’&eacute;tat
dans la partie inf&eacute;rieure du panneau Etats.
Ajout d’&eacute;tats &agrave; une s&eacute;quence
1 Dans le menu Options du panneau Etats, s&eacute;lectionnez Ajouter des &eacute;tats.
2 Indiquez le nombre d’&eacute;tats &agrave; ajouter.
3 S&eacute;lectionnez l’emplacement o&ugrave; vous souhaitez ins&eacute;rer les &eacute;tats, puis cliquez sur OK.
Copie d’un &eacute;tat
❖ Faites glisser un &eacute;tat existant sur le bouton Nouvel &eacute;tat/Dupliquer l’&eacute;tat dans la partie inf&eacute;rieure du panneau Etats.
Copie d’un &eacute;tat s&eacute;lectionn&eacute; pour le placer dans une s&eacute;quence
Il est utile de dupliquer un &eacute;tat pour faire r&eacute;appara&icirc;tre des objets dans une autre partie de l’animation.
1 Dans le menu Options du panneau Etats, s&eacute;lectionnez Dupliquer l’&eacute;tat.
2 Saisissez le nombre de doublons de l’&eacute;tat s&eacute;lectionn&eacute; que vous souhaitez cr&eacute;er, indiquez o&ugrave; ins&eacute;rer ces doubles, puis
cliquez sur OK.
R&eacute;organisation des &eacute;tats
❖ Faites glisser les &eacute;tats un par un vers un nouvel emplacement dans la liste.
Inversion de l’ordre des &eacute;tats
Vous pouvez inverser l’ordre de tous les &eacute;tats ou celui des &eacute;tats d’une plage s&eacute;lectionn&eacute;e.
1 S&eacute;lectionnez Commandes &gt; Document &gt; Inverser les &eacute;tats.
2 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
• S&eacute;lectionnez Tous les &eacute;tats pour inverser la s&eacute;quence des &eacute;tats du d&eacute;but vers la fin.
• Pour inverser l’ordre des &eacute;tats d’une plage, s&eacute;lectionnez Plage d’&eacute;tats, puis choisissez les &eacute;tats D&eacute;but et Fin.
UTILISATION DE FIREWORKS CS5 225
Derni&egrave;re mise &agrave; jour le 29/4/2010
Cr&eacute;ation d’animations
3 Cliquez sur OK.
Suppression de l’&eacute;tat s&eacute;lectionn&eacute;
❖ Proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Dans le panneau Etats, cliquez sur le bouton Supprimer l’&eacute;tat
.
• Faites glisser l’&eacute;tat vers le bouton Supprimer l’&eacute;tat.
• Dans le menu Options du panneau Etats, s&eacute;lectionnez Supprimer l’&eacute;tat.
D&eacute;placement des objets s&eacute;lectionn&eacute;s dans le panneau Etats
Vous pouvez utiliser le panneau Etats pour d&eacute;placer des objets dans un autre &eacute;tat. Les objets qui s’affichent sur un seul
&eacute;tat disparaissent au cours de la lecture de l’animation. Vous pouvez les faire dispara&icirc;tre et r&eacute;appara&icirc;tre &agrave; diff&eacute;rents
points.
Dans le panneau Etats, un petit rond sur la droite de la dur&eacute;e de cadence des &eacute;tats indique l’&eacute;tat des objets de l’&eacute;tat.
1 Dans la zone de travail, s&eacute;lectionnez les objets que vous souhaitez afficher sur un autre &eacute;tat.
2 Dans le panneau Etats, faites glisser l’indicateur de s&eacute;lection (petit rond noir &agrave; droite de la dur&eacute;e de cadence des
&eacute;tats) vers le nouvel &eacute;tat.
Pour copier les objets s&eacute;lectionn&eacute;s vers d’autres &eacute;tats, appuyez sur les touches Alt (Windows) ou Option (Mac OS) et
faites glisser les objets.
Affichage des objets dans un &eacute;tat
❖ S&eacute;lectionnez l’&eacute;tat &agrave; l’aide du menu contextuel correspondant, situ&eacute; dans la partie inf&eacute;rieure du panneau Calques.
Tous les objets pr&eacute;sents dans cet &eacute;tat sont r&eacute;pertori&eacute;s dans le panneau Calques et affich&eacute;s dans la zone de travail.
A propos des pelures d’oignon
Les pelures d’oignon permettent d’afficher le contenu des &eacute;tats pr&eacute;c&eacute;dant et suivant l’&eacute;tat s&eacute;lectionn&eacute;. Cela vous
permet d’affiner la transition entre les objets sans devoir passer incessamment d’un objet &agrave; un autre.
Lorsque vous activez les pelures d’oignon, les objets des &eacute;tats pr&eacute;c&eacute;dant et suivant l’&eacute;tat s&eacute;lectionn&eacute; sont gris&eacute;s. Ainsi,
vous pouvez les distinguer des objets de l’&eacute;tat s&eacute;lectionn&eacute;.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 226
Cr&eacute;ation d’animations
Par d&eacute;faut, l’option Modification de plusieurs &eacute;tats est activ&eacute;e. Vous pouvez ainsi s&eacute;lectionner et modifier des objets
gris&eacute;s dans d’autres &eacute;tats sans quitter l’&eacute;tat actif. Utilisez l’outil S&eacute;lectionner derri&egrave;re pour s&eacute;lectionner de mani&egrave;re
s&eacute;quentielle des objets dans divers &eacute;tats.
Pour ajuster le nombre d’&eacute;tats visibles avant et apr&egrave;s l’&eacute;tat actif, cliquez sur le bouton Pelures d’oignon, puis
s&eacute;lectionnez une option d’affichage. L’option Personnalis&eacute;e vous permet d’indiquer le nombre d’&eacute;tats et de contr&ocirc;ler
l’opacit&eacute;. Utilisez l’option Modification de plusieurs &eacute;tats pour s&eacute;lectionner et modifier tous les objets visibles.
D&eacute;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&ecirc;me
symbole pour g&eacute;n&eacute;rer les occurrences interm&eacute;diaires avec des attributs interpol&eacute;s. Pour cr&eacute;er le d&eacute;placement
sophistiqu&eacute; d’un objet sur la zone de travail et pour les objets dont les filtres dynamiques changent &agrave; chaque &eacute;tat de
l’animation, utilisez l’interpolation. Par exemple, vous pouvez interpoler un objet pour qu’il donne l’impression de se
d&eacute;placer sur un trac&eacute; lin&eacute;aire.
Remarque : dans la plupart des cas, l’utilisation de symboles d’animation est pr&eacute;f&eacute;rable &agrave; l’interpolation. Pour plus
d’informations, reportez-vous &agrave; la section &laquo; A propos des symboles d’animation &raquo; &agrave; la page 218.
Occurrences interpol&eacute;es
1 S&eacute;lectionnez plusieurs occurrences du m&ecirc;me symbole graphique dans la zone de travail. Ne s&eacute;lectionnez pas des
occurrences de symboles diff&eacute;rents.
2 Choisissez Modification &gt; Symbole &gt; Occurrences interpol&eacute;es.
3 Dans la bo&icirc;te de dialogue Occurrences interpol&eacute;es, entrez le nombre d’&eacute;tapes interpol&eacute;es &agrave; ins&eacute;rer entre les deux
occurrences d’origine.
4 Pour r&eacute;partir les objets interpol&eacute;s dans des &eacute;tats distincts, s&eacute;lectionnez R&eacute;partir dans les &eacute;tats, puis cliquez sur OK.
Vous pouvez effectuer cette op&eacute;ration ult&eacute;rieurement. Dans le panneau Etats, s&eacute;lectionnez toutes les occurrences
et cliquez sur le bouton R&eacute;partir dans les &eacute;tats
.
Pr&eacute;visualisation d’une animation
Vous pouvez pr&eacute;visualiser une animation en cours de travail pour en v&eacute;rifier l’avancement. Vous pouvez &eacute;galement
pr&eacute;visualiser une animation apr&egrave;s optimisation pour v&eacute;rifier l’aspect qu’elle aura dans un navigateur Web. il est
d&eacute;conseill&eacute; de pr&eacute;visualiser l’animation dans la fen&ecirc;tre 2 en 1 ou 4 en 1.
Remarque : Les animations ajout&eacute;es aux gabarits ne sont pas affich&eacute;es. Ajoutez les animations dans les pages enfant et
partagez-les entre toutes les pages.
Pr&eacute;visualisation d’une animation dans l’espace de travail
❖ Utilisez les contr&ocirc;les d’&eacute;tat qui apparaissent au bas de la fen&ecirc;tre Document.
UTILISATION DE FIREWORKS CS5 227
Derni&egrave;re mise &agrave; jour le 29/4/2010
Cr&eacute;ation d’animations
Contr&ocirc;les d’&eacute;tat
• Pour d&eacute;finir la dur&eacute;e d’apparition d’un &eacute;tat dans la fen&ecirc;tre de document, entrez la valeur de cadence des &eacute;tats
souhait&eacute;e dans le panneau Etats.
• Les &eacute;tats masqu&eacute;s qui n’ont pas &eacute;t&eacute; export&eacute;s n’apparaissent pas dans l’aper&ccedil;u (voir la section &laquo; Masquage d’&eacute;tats en
cours de lecture &raquo; &agrave; la page 223).
• L’aper&ccedil;u de l’animation dans la fen&ecirc;tre Original affiche les graphiques sources &agrave; leur r&eacute;solution normale, et non
l’aper&ccedil;u optimis&eacute; utilis&eacute; pour le fichier export&eacute;.
Pr&eacute;visualisation d’une animation dans la fen&ecirc;tre Aper&ccedil;u
1 Cliquez sur le bouton Aper&ccedil;u dans le coin sup&eacute;rieur gauche de la fen&ecirc;tre Document.
2 Utilisez les contr&ocirc;les d’&eacute;tat.
Pr&eacute;visualisation d’une animation dans un navigateur Web
❖ Choisissez Fichier &gt; Aper&ccedil;u dans le navigateur, puis s&eacute;lectionnez un navigateur dans le sous-menu.
Remarque : pour afficher le d&eacute;placement lorsque vous pr&eacute;visualisez l’animation, dans le panneau Optimisation,
s&eacute;lectionnez le format de fichier d’exportation GIF anim&eacute;, m&ecirc;me si vous souhaitez importer l’animation en Flash en tant
que fichier SWF ou PNG Fireworks.
Optimisation d’une animation
Apr&egrave;s la configuration des symboles et des &eacute;tats qui composent une animation, optimisez l’animation pour faciliter
son chargement et sa lecture.
Lorsque vous avez cr&eacute;&eacute; et optimis&eacute; une animation, elle est pr&ecirc;te &agrave; &ecirc;tre export&eacute;e. Pour plus de d&eacute;tails, reportez-vous &agrave;
la section &laquo; Exportation d’une animation &raquo; &agrave; la page 255.
Configuration de la lecture en boucle d’une animation
L’option Boucle permet de r&eacute;p&eacute;ter une animation et de limiter le nombre d’&eacute;tats requis pour celle-ci.
1 S&eacute;lectionnez la commande Fen&ecirc;tre &gt; Etats pour afficher le panneau Etats.
2
Cliquez sur le bouton Lecture en boucle de l’animation GIF
, au bas du panneau.
3 S&eacute;lectionnez le nombre de r&eacute;p&eacute;titions apr&egrave;s la lecture initiale de l’animation.
Par exemple, si vous s&eacute;lectionnez 4, l’animation sera lue cinq fois en tout. Avec l’option En continu, l’animation se
r&eacute;p&egrave;te ind&eacute;finiment.
S&eacute;lection de param&egrave;tres depuis le panneau Optimisation
L’optimisation permet de comprimer un fichier au maximum et d’en r&eacute;duire ainsi le temps de t&eacute;l&eacute;chargement &agrave; partir
du Web. Pour plus de d&eacute;tails sur les options d’optimisation, reportez-vous &agrave; la section &laquo; Optimisation des fichiers GIF,
PNG, TIFF, BMP et PICT &raquo; &agrave; la page 244.
1 Choisissez Fen&ecirc;tre &gt; Optimisation.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 228
Cr&eacute;ation d’animations
2 S&eacute;lectionnez le format de fichier d’exportation dans le panneau Optimisation.
3 S&eacute;lectionnez les options Palette et Tramage.
4 Dans le menu contextuel Transparence du panneau Optimisation, s&eacute;lectionnez Transparence d’index ou
Transparence Alpha.
5 Utilisez les outils de transparence du panneau Optimisation pour s&eacute;lectionner les couleurs utilis&eacute;es pour la
transparence.
6 Dans le panneau Etats, d&eacute;finissez la cadence des &eacute;tats.
Utilisation d’animations existantes
Pour utiliser un fichier GIF anim&eacute; existant, importez celui-ci dans un fichier Fireworks ou ouvrez-le en tant que
nouveau fichier.
Lorsque vous importez un fichier GIF anim&eacute;, Fireworks le convertit en symbole d’animation et le place dans l’&eacute;tat
s&eacute;lectionn&eacute;. Si l’animation import&eacute;e compte plus d’&eacute;tats que l’animation active, vous pouvez choisir d’ajouter
automatiquement le nombre d’&eacute;tats n&eacute;cessaire.
Les fichiers GIF import&eacute;s adoptent les param&egrave;tres de cadence d’&eacute;tats du document actif. Comme le fichier import&eacute; est
un symbole d’animation, vous pouvez lui appliquer des mouvements suppl&eacute;mentaires. Par exemple, importez
l’animation d’une personne marchant sur place et appliquez-lui des propri&eacute;t&eacute;s de direction et de mouvement pour lui
faire traverser l’&eacute;cran.
Lorsque vous ouvrez un GIF anim&eacute; dans Fireworks, un nouveau fichier est cr&eacute;&eacute;, et chaque &eacute;tat du fichier GIF est plac&eacute;
dans un &eacute;tat distinct. Bien que le fichier GIF ne soit pas un symbole d’animation, il conserve les param&egrave;tres de cadence
des &eacute;tats d’origine.
Les animations ajout&eacute;es aux gabarits ne sont pas affich&eacute;es. Ajoutez l'animation dans une page enfant et partagez-la
entre toutes les pages.
Une fois le fichier import&eacute;, vous d&eacute;finissez son format de fichier comme GIF anim&eacute; pour exporter le mouvement
depuis Fireworks.
Importation d’un fichier GIF anim&eacute;
1 Choisissez Fichier &gt; 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&eacute;
❖ Choisissez Fichier &gt; Ouvrir, puis localisez le fichier GIF.
Utilisation de fichiers multiples pour une animation
Fireworks peut cr&eacute;er une animation &agrave; partir d’un groupe de fichiers d’image. Vous pouvez, par exemple, cr&eacute;er une
banni&egrave;re publicitaire &agrave; partir de plusieurs images existantes.
1 Choisissez Fichier &gt; Ouvrir.
2 Maintenez la touche Maj enfonc&eacute;e et cliquez sur diff&eacute;rents fichiers pour les s&eacute;lectionner.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 229
Cr&eacute;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&ccedil;ant chaque fichier dans un &eacute;tat distinct,
dans l’ordre dans lequel vous avez s&eacute;lectionn&eacute; les fichiers.
Cr&eacute;ation d’animations Torsion et Nuance
La commande Torsion et Nuance permet de cr&eacute;er plusieurs occurrences d’un objet qui apparaissent et disparaissent
progressivement le long d’une trajectoire tordue. Une fois le premier objet cr&eacute;&eacute;, les autres occurrences sont cr&eacute;&eacute;es
automatiquement en fonction des options que vous d&eacute;finissez dans la bo&icirc;te de dialogue Torsion et Nuance. Vous
pouvez &eacute;galement animer les objets cr&eacute;&eacute;s &agrave; l’aide des options de la bo&icirc;te de dialogue et enregistrez l’animation au
format GIF.
1 Cr&eacute;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&eacute;lectionnez Commandes &gt; Cr&eacute;ation &gt; Torsion et Nuance.
3 Dans la bo&icirc;te de dialogue Torsion et Nuance, configurez les param&egrave;tres en fonction de vos pr&eacute;f&eacute;rences. Manipulez
les diff&eacute;rentes options de la bo&icirc;te de dialogue pour personnaliser l’effet. Positionnez la bo&icirc;te de dialogue de telle
sorte que vous puissiez voir les modifications au fur et &agrave; mesure que vous les effectuez.
Etapes Nombre d’occurrences de l’objet cr&eacute;&eacute;.
Opacit&eacute; Opacit&eacute; des objets cr&eacute;&eacute;s.
Direction Direction dans laquelle les objets sont successivement cr&eacute;&eacute;s par rapport au premier objet.
En retard Chaque objet se place derri&egrave;re l’objet suivant de l’ensemble.
Animer S&eacute;lectionnez cette option pour animer l’ensemble d’objets que vous avez cr&eacute;&eacute;.
Att&eacute;nu&eacute; Lorsque vous augmentez la valeur de ce champ, l’effet d’att&eacute;nuation est appliqu&eacute; en partant du dernier
objet cr&eacute;&eacute; jusqu’au premier objet.
Satur&eacute; Modifiez la valeur pour changer les couleurs des objets cr&eacute;&eacute;s.
Pas Plus vous augmentez le pas et plus les objets cr&eacute;&eacute;s sont espac&eacute;s.
Rotation Degr&eacute; de rotation des objets successifs.
Direction Angle d’alignement des autres objets par rapport au premier objet.
Echelle Facteur de mise &agrave; l’&eacute;chelle des autres objets par rapport au premier objet.
Opacit&eacute; Opacit&eacute; des autres objets par rapport au premier objet.
Al&eacute;atoire Cliquez sur Al&eacute;atoire pour faire des essais avec un ensemble al&eacute;atoire de valeurs d&eacute;finies par le syst&egrave;me.
Boug&eacute; Ajoute des variations &agrave; l’option que vous avez s&eacute;lectionn&eacute;e. La valeur que vous entrez d&eacute;termine le taux de
variation.
Param&egrave;tres pr&eacute;d&eacute;finis S&eacute;lectionnez le param&egrave;tre pr&eacute;d&eacute;fini qui vous convient le mieux. Il est judicieux de partir
d’un param&egrave;tre pr&eacute;d&eacute;fini, puis de configurer les diff&eacute;rentes options en fonction du r&eacute;sultat souhait&eacute;. Vous pouvez
&eacute;galement s&eacute;lectionner Par d&eacute;faut ou Derni&egrave;re utilisation pour appliquer l’ensemble de pr&eacute;f&eacute;rences par d&eacute;faut ou
pr&eacute;c&eacute;dent, respectivement.
Aper&ccedil;u S&eacute;lectionnez Aper&ccedil;u pour voir l’effet des options que vous choisissez dans la bo&icirc;te de dialogue sur l’objet.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 230
Cr&eacute;ation d’animations
Remarque : Si vous avez s&eacute;lectionn&eacute; l’option Animer, le graphique dispara&icirc;t de la zone de travail lorsque vous cliquez
sur OK.
4 Dans la bo&icirc;te de dialogue Propri&eacute;t&eacute;s, s&eacute;lectionnez Gif anim&eacute; Websnap 128 dans la liste des options de format.
5 Appuyez sur F12 pour afficher un aper&ccedil;u de l’animation dans un navigateur.
Remarque : Vous pouvez dissocier les objets cr&eacute;&eacute;s comme n’importe quels autres objets.
Derni&egrave;re mise &agrave; jour le 29/4/2010
Chapitre 16 : Cr&eacute;ation de diaporamas
Cr&eacute;ation et organisation d’un diaporama
La fen&ecirc;tre Cr&eacute;er un diaporama permet de cr&eacute;er un diaporama de type Adobe&reg; Flash&reg; ou HTML/SPRY, en
s&eacute;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 &ecirc;tes un concepteur ou d&eacute;veloppeur Flash, vous pouvez &eacute;galement cr&eacute;er un lecteur d’album personnalis&eacute; dans
Flash pour afficher la sortie XML du cr&eacute;ateur d’album Adobe Fireworks&reg;.
Cr&eacute;ation d’un diaporama
1 Choisissez Commandes &gt; Cr&eacute;er un diaporama.
2 Cliquez sur le bouton Ajouter un album (le signe plus) situ&eacute; &agrave; c&ocirc;t&eacute; de l’entr&eacute;e Albums.
3 Choisissez les fichiers d’image &agrave; inclure dans le diaporama et cliquez sur OK.
4 Renseignez les Propri&eacute;t&eacute;s du livre d’albums et les Propri&eacute;t&eacute;s de l’album.
5 S&eacute;lectionnez les panneaux de droite pour configurer les propri&eacute;t&eacute;s du diaporama.
6 Sp&eacute;cifiez l’emplacement du diaporama termin&eacute; dans le panneau Options d’exportation.
7 Apr&egrave;s avoir configur&eacute; tous les param&egrave;tres du diaporama, cliquez sur Cr&eacute;er.
8 (Facultatif) Pour afficher le diaporama dans votre navigateur, s&eacute;lectionnez l’option Lancer le diaporama dans le
navigateur, puis cliquez sur Terminer.
231
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 232
Cr&eacute;ation de diaporamas
Ouverture d’un diaporama existant
1 Choisissez Commandes &gt; Cr&eacute;er un diaporama.
2 Dans la fen&ecirc;tre Cr&eacute;er un diaporama, cliquez sur le bouton Ouvrir un album existant ou cliquez sur le bouton
Parcourir (...) en regard de l’entr&eacute;e Albums.
3 Acc&eacute;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&eacute;lectionnez un album dans les listes Albums, puis cliquez sur le bouton Supprimer album(s) s&eacute;lectionn&eacute;(s) (signe
moins) en regard de l’entr&eacute;e Albums.
Organisation d’un album
1 Ouvrez un diaporama existant.
2 S&eacute;lectionnez un album dans la liste.
• Pour ajouter des images, cliquez sur le bouton Ajouter image(s) (signe plus) en regard de l’entr&eacute;e Images.
Ensuite, cliquez sur le bouton Parcourir (...), puis s&eacute;lectionnez une ou plusieurs images.
• Pour modifier l’ordre des images, s&eacute;lectionnez une image, puis cliquez sur les boutons fl&eacute;ch&eacute;s situ&eacute;s en haut de
la liste des images afin de la d&eacute;placer.
Personnalisation d’un diaporama
Pour afficher un panneau Propri&eacute;t&eacute;s et personnaliser les propri&eacute;t&eacute;s qu’il contient, cliquez dessus dans la partie droite
de la fen&ecirc;tre Cr&eacute;er un diaporama.
Panneau Propri&eacute;t&eacute;s de l’album
Les propri&eacute;t&eacute;s de l’album s’appliquent &agrave; un livre, qui peut contenir plusieurs albums.
Titre Il peut contenir un espace (&laquo; Mon voyage &raquo;, par exemple).
Description Entrez une description.
Lecteur S&eacute;lectionnez le type.
Ic&ocirc;ne Info (en regard de l’entr&eacute;e Lecteur) Cliquez dessus pour afficher des informations compl&eacute;mentaires sur le
lecteur, y compris les propri&eacute;t&eacute;s des albums pris en charge par le type de lecteur s&eacute;lectionn&eacute;.
D&eacute;marrer automatiquement le diaporama Permet de d&eacute;marrer le diaporama &agrave; l’ouverture du lecteur.
Autoriser l’activation des images Permet &agrave; l’utilisateur de cliquer sur l’image pour l’ouvrir dans une nouvelle fen&ecirc;tre
de navigateur et l’enregistrer ou de l’afficher dans un nouvel onglet ou en taille r&eacute;elle.
Panneau Propri&eacute;t&eacute;s de l’album
Les propri&eacute;t&eacute;s de l’album s’appliquent uniquement &agrave; l’album s&eacute;lectionn&eacute;.
Description Entrez une description de l’album.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 233
Cr&eacute;ation de diaporamas
Vignette S&eacute;lectionnez une image pour obtenir un aper&ccedil;u de la vignette dans le diaporama.
Arri&egrave;re-plan S&eacute;lectionnez une image d’arri&egrave;re-plan personnalis&eacute;e, puis redimensionnez-la &agrave; l’&eacute;chelle du diaporama.
Panneau L&eacute;gendes
Utilisez les options de l&eacute;gendes pour personnaliser les l&eacute;gendes des diff&eacute;rentes images du diaporama.
Appliquer &agrave; tous les albums Permet d’appliquer les options de l&eacute;gendes &agrave; tous les albums du livre.
Aucun changement Conserve les l&eacute;gendes existantes.
Effacer toutes les l&eacute;gendes Efface toutes les l&eacute;gendes de l’album.
Utiliser les noms de fichiers Utilise les noms de fichiers des images comme l&eacute;gende.
Inclure l’extension Si vous choisissez les noms de fichiers comme l&eacute;gendes, indiquez les extensions de fichiers.
Ins&eacute;rer un texte Utilise le texte sp&eacute;cifi&eacute; comme l&eacute;gende pour chacune des images.
Remplacer les l&eacute;gendes Applique &agrave; toutes les images le texte que vous avez ins&eacute;r&eacute;.
Panneau Filtres
Vous ne pouvez appliquer des filtres qu’&agrave; un nouvel album. Pour appliquer des filtres s&eacute;lectionn&eacute;s &agrave; tous les albums
du livre, s&eacute;lectionnez l’option Appliquer &agrave; tous les albums.
Panneau Propri&eacute;t&eacute;s du diaporama
Les propri&eacute;t&eacute;s du diaporama s’appliquent au diaporama s&eacute;lectionn&eacute;.
Appliquer &agrave; tous les albums Permet d’appliquer les options sp&eacute;cifi&eacute;es &agrave; tous les albums du livre.
Intervalle Nombre de secondes entre les images.
Utiliser la transition Permet de s&eacute;lectionner un effet de transition entre les diff&eacute;rentes images.
Premi&egrave;re image D&eacute;finit la premi&egrave;re image de l’album. Il s’agit du num&eacute;ro de s&eacute;quence de l’image dans l’album.
S&eacute;quence d’affichage Permet de choisir d’afficher les images dans un ordre ou de fa&ccedil;on al&eacute;atoire.
Panneau Options d’exportation
Les options de ce panneau permettent de param&eacute;trer l’exportation des images.
Exporter des images Permet d’exporter les images en taille r&eacute;elle ou sous forme de vignettes, avec les param&egrave;tres
appropri&eacute;s. D&eacute;s&eacute;lectionnez cette option pour exporter uniquement le fichier XML.
G&eacute;n&eacute;rer un fichier XML Permet de g&eacute;n&eacute;rer un fichier slideshow.xml pour les images et r&eacute;pertoires du diaporama.
D&eacute;s&eacute;lectionnez cette option pour exporter uniquement les images.
Format XML S&eacute;lectionnez le format XML export&eacute; en choisissant l’option Cr&eacute;er un diaporama ou Adobe Media Gallery
si vous s&eacute;lectionnez la commande G&eacute;n&eacute;rer un fichier XML.
Chemin d’exportation Dossier dans lequel le diaporama et les fichiers associ&eacute;s sont g&eacute;n&eacute;r&eacute;s et export&eacute;s.
Largeur et Hauteur Largeur et hauteur des images en taille r&eacute;elle export&eacute;es. Les images mises &agrave; l’&eacute;chelle conservent
leurs proportions d’origine.
Exporter des vignettes Permet d’exporter les vignettes et les images en taille r&eacute;elle.
Largeur et Hauteur Largeur et hauteur des vignettes export&eacute;es.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 234
Cr&eacute;ation de diaporamas
Qualit&eacute; d’image Sp&eacute;cifiez la qualit&eacute; de sortie des images export&eacute;es (en taille r&eacute;elle et vignettes). La valeur 100
correspond &agrave; la meilleure qualit&eacute; possible.
Ajuster l’image Si n&eacute;cessaire, agrandissez les images &agrave; la taille d’exportation sp&eacute;cifi&eacute;e.
Cr&eacute;ation d’un lecteur Fireworks personnalis&eacute;
Vous pouvez cr&eacute;er un lecteur personnalis&eacute; que vous utiliserez avec la commande Cr&eacute;er un diaporama. Les fichiers
source des lecteurs de diaporama par d&eacute;faut sont &eacute;galement inclus dans le logiciel pour vous permettre de modifier ou
d’habiller les lecteurs.
1 Publiez le fichier SWF et, le cas &eacute;ch&eacute;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&eacute;ration qui consiste simplement &agrave; renommer le fichier SWF dans le Finder peut ne pas
fonctionner (sauf si vous avez d&eacute;fini l’option Afficher les extensions de fichier). Vous devrez peut-&ecirc;tre le renommer &agrave;
l’aide de la bo&icirc;te de dialogue de propri&eacute;t&eacute;s de fichier, sous Nom &amp; Extension.
3 Dans le m&ecirc;me dossier que le fichier SWF, cr&eacute;ez un fichier XML semblable &agrave; l’exemple suivant :
&lt;?xml version=&quot;1.0&quot;encoding=&quot;utf-8&quot;?&gt;
&lt;FWACPlayer&gt;
&lt;Player name=&quot;Player - Black (Flash)&quot;preview=&quot;player_black.jpg&quot;launch=&quot;index.html&quot;&gt;
&lt;File src=&quot;player_black.fap&quot;dst=&quot;player_black.swf&quot;/&gt;
&lt;File src=&quot;player_black.html&quot;dst=&quot;index.html&quot;/&gt;
&lt;Info src=&quot;player_black.info&quot;/&gt;
&lt;/Player&gt;
&lt;Player name=&quot;Player - White (Flash)&quot;preview=&quot;player_white.jpg&quot;launch=&quot;index.html&quot;&gt;
&lt;File src=&quot;player_white.fap&quot;dst=&quot;player_white.swf&quot;/&gt;
&lt;File src=&quot;player_white.html&quot;dst=&quot;index.html&quot;/&gt;
&lt;Info src=&quot;player_white.info&quot;/&gt;
&lt;/Player&gt;
&lt;/FWACPlayer&gt;
Remarque : si vous disposez de plusieurs versions du m&ecirc;me lecteur de base, vous pouvez les r&eacute;pertorier dans le fichier
XML (comme indiqu&eacute; 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&eacute;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&eacute;s avant l’affichage du texte.
6 Cr&eacute;ez ou modifiez le fichier MXI de telle sorte que le fichier SWF et le fichier HTML renomm&eacute;s soient plac&eacute;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&ecirc;me nom.
Le fichier XML g&eacute;n&eacute;r&eacute; pr&eacute;sente la structure suivante :
Derni&egrave;re mise &agrave; jour le 29/4/2010
&lt;AlbumBook... &gt;
&lt;Album ... &gt;
&lt;Slide ...
&lt;Slide ...
&lt;Slide ...
&lt;/Album&gt;
&lt;Album ... &gt;
&lt;Slide ...
&lt;Slide ...
&lt;Slide ...
&lt;/Album&gt;
&lt;/AlbumBook&gt;
UTILISATION DE FIREWORKS CS5 235
Cr&eacute;ation de diaporamas
/&gt;
/&gt;
/&gt;
/&gt;
/&gt;
/&gt;
D&eacute;finition des nœuds
Nœud AlbumBook
ver Version de la commande Cr&eacute;er un diaporama qui a permis de cr&eacute;er le fichier XML.
title Titre principal du diaporama.
description Description de l’int&eacute;gralit&eacute; du diaporama.
firstAlbum Index de base z&eacute;ro du premier album &agrave; afficher.
width Largeur du diaporama.
height Hauteur du diaporama.
showThumbnails D&eacute;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&eacute;marrer automatiquement le diaporama.
allowClick Autorisation ou non des utilisateurs &agrave; cliquer sur les images.
clickAction Action &agrave; ex&eacute;cuter lorsqu’un utilisateur clique sur une image (l’ouvrir dans une nouvelle fen&ecirc;tre, un nouvel
onglet ou laisser le lecteur d&eacute;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&eacute;es dans le dossier Thumbs
(Vignettes) contenu dans le chemin.
hasThumb Indique que l’album poss&egrave;de une vignette.
thumbSrc Image source utilis&eacute;e pour la vignette de l’album.
hasBg Indique que l’album poss&egrave;de une image d’arri&egrave;re-plan.
bgSrc Image d’arri&egrave;re-plan de l’album.
bgScale M&eacute;thode de mise &agrave; l’&eacute;chelle de l’image d’arri&egrave;re-plan de l’album.
interval Intervalle du diaporama exprim&eacute; en secondes pour cet album.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 236
Cr&eacute;ation de diaporamas
useTransition Indique qu’un effet de transition doit &ecirc;tre utilis&eacute; lors du passage d’une image &agrave; une autre.
transType Transition du diaporama pour cet album.
transTime Dur&eacute;e de la transition.
firstImage Index de base z&eacute;ro de la premi&egrave;re image &agrave; afficher.
dispSequence Ordre d’affichage des images (s&eacute;quentiel ou al&eacute;atoire).
Noeud Slide (Diapositive)
src Nom du fichier d’image de cette diapositive.
caption L&eacute;gende associ&eacute;e &agrave; 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&egrave;re mise &agrave; jour le 29/4/2010
Chapitre 17 : Optimisation et exportation
L’exportation de graphiques depuis Adobe&reg; Fireworks&reg; se d&eacute;roule en deux &eacute;tapes. Avant de proc&eacute;der &agrave; l’exportation,
il convient d’optimiser les graphiques, c’est-&agrave;-dire de s&eacute;lectionner les options proposant le meilleur compromis entre
la qualit&eacute; des graphiques et la taille de leur fichier afin de les t&eacute;l&eacute;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&egrave;tres et affiche l’aper&ccedil;u de l’image pour vous aider &agrave; l’optimiser. Vous pouvez &eacute;galement utiliser l’aper&ccedil;u de
l’image ind&eacute;pendamment de l’assistant.
Pour davantage de pr&eacute;cision, utilisez les outils de l’espace de travail, tels que le panneau Optimisation, les boutons
d’aper&ccedil;u de la fen&ecirc;tre de document et la bo&icirc;te de dialogue Exporter.
Dans certains cas, vous pouvez enregistrer des graphiques sans les exporter. Pour plus d’informations, reportez-vous
&agrave; la section &laquo; Enregistrement de documents dans d’autres formats &raquo; &agrave; la page 12.
Utilisation de l’assistant Exportation
L’assistant Exportation vous guide, &eacute;tape par &eacute;tape, tout au long des processus d’optimisation et d’exportation.
1 Choisissez Fichier &gt; Assistant Exportation.
2 R&eacute;pondez &agrave; 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&ecirc;tre R&eacute;sultats de l’analyse de l’assistant.
La fen&ecirc;tre Aper&ccedil;u de l’image pr&eacute;sente des options d’exportation recommand&eacute;es.
Utilisation de l’aper&ccedil;u de l’image
Vous pouvez ouvrir l’aper&ccedil;u de l’image depuis l’assistant Exportation ou depuis le menu Fichier (Fichier &gt; Aper&ccedil;u de
l’image).
Le document ou le graphique s’affiche dans la zone d’aper&ccedil;u tel qu’il est export&eacute;, accompagn&eacute; d’une estimation de la
taille du fichier et du temps de t&eacute;l&eacute;chargement selon les param&egrave;tres d’exportation choisis.
237
UTILISATION DE FIREWORKS CS5 238
Derni&egrave;re mise &agrave; jour le 29/4/2010
A
Optimisation et exportation
B C
D
A. Jeu d’options enregistr&eacute; pour l’exportation s&eacute;lectionn&eacute;e B. Estimation du temps de t&eacute;l&eacute;chargement et de la taille du fichier C. Aper&ccedil;u avec
les param&egrave;tres d’exportation s&eacute;lectionn&eacute;s D. Enregistrement des param&egrave;tres d’exportation dans la vue active
Dans le cas de l’exportation de fichiers GIF anim&eacute;s ou de survols JavaScript, l’estimation de la taille du fichier
correspond &agrave; la somme des tailles de tous les &eacute;tats.
Remarque : pour acc&eacute;l&eacute;rer le rafra&icirc;chissement de l’aper&ccedil;u de l’image, d&eacute;sactivez Aper&ccedil;u. Pour interrompre le
rafra&icirc;chissement de la zone d’aper&ccedil;u lorsque vous modifiez les param&egrave;tres, appuyez sur la touche Echap.
Utilisation de la zone d’aper&ccedil;u
Zoom sur l’image
❖ Cliquez sur le bouton Zoom
, puis cliquez dans l’aper&ccedil;u pour l’agrandir. Tout en maintenant la touche Alt
(Windows) ou Option (Mac OS) enfonc&eacute;e, cliquez sur le bouton dans l’aper&ccedil;u pour effectuer un zoom arri&egrave;re.
Panoramique de l’image
❖ Proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Cliquez sur le bouton Pointeur
en bas de la bo&icirc;te de dialogue, puis faites glisser le pointeur dans l’aper&ccedil;u.
• Lorsque le pointeur Zoom est actif, faites-le glisser dans l’aper&ccedil;u tout en maintenant la barre d’espace enfonc&eacute;e.
Division de la zone d’aper&ccedil;u pour comparer des param&egrave;tres
❖ Cliquez sur un bouton de vue scind&eacute;e
,
,
.
Chaque fen&ecirc;tre d’aper&ccedil;u permet d’afficher un aper&ccedil;u du graphique avec des param&egrave;tres d’exportation diff&eacute;rents.
Remarque : le zoom et le panoramique sont appliqu&eacute;s simultan&eacute;ment &agrave; toutes les fen&ecirc;tres ouvertes.
D&eacute;finition des options de l’aper&ccedil;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&egrave;re mise &agrave; 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&eacute; JPEG
• En modifiant le lissage JPEG
• En modifiant le nombre de couleurs dans les images 8 bits
• En changeant les param&egrave;tres de tramage dans les images 8 bits
• En activant ou d&eacute;sactivant les param&egrave;tres d’optimisation
D&eacute;finition des dimensions des images export&eacute;es
1 Cliquez sur l’onglet Fichier.
2 Sp&eacute;cifiez le pourcentage de mise &agrave; l’&eacute;chelle ou entrez la largeur et la hauteur en pixels. S&eacute;lectionnez Contraindre
pour mettre proportionnellement la largeur et la hauteur &agrave; l’&eacute;chelle.
D&eacute;finition d’une seule partie d’une image &agrave; exporter
1 Cliquez sur l’onglet Fichier.
2 S&eacute;lectionnez Zone d’exportation, puis proc&eacute;dez de l’une des fa&ccedil;ons suivantes :
• Faites glisser le rectangle en pointill&eacute;s qui entoure l’aper&ccedil;u pour d&eacute;limiter la zone d’exportation. (Faites glisser
le rectangle &agrave; l’int&eacute;rieur de l’aper&ccedil;u pour voir les zones non affich&eacute;es.)
• Entrez les coordonn&eacute;es en pixels des limites de la zone d’exportation.
S&eacute;lection des param&egrave;tres d’animation
1 Cliquez sur l’onglet Animation.
• Pour afficher un seul &eacute;tat, dans la liste &agrave; gauche de la bo&icirc;te de dialogue, s&eacute;lectionnez l’&eacute;tat que vous voulez
afficher. Vous pouvez &eacute;galement utiliser les contr&ocirc;les d’&eacute;tat qui se trouvent dans le coin inf&eacute;rieur droit de la bo&icirc;te
de dialogue.
• Pour voir l’animation, cliquez sur le contr&ocirc;le Lire/Arr&ecirc;ter dans la partie inf&eacute;rieure droite de la bo&icirc;te de dialogue.
2 Pour d&eacute;finir la m&eacute;thode de suppression des &eacute;tats, s&eacute;lectionnez un &eacute;tat dans la liste, cliquez sur l’ic&ocirc;ne de la corbeille,
puis choisissez l’une des options suivantes :
Non sp&eacute;cifi&eacute;e D&eacute;termine automatiquement une m&eacute;thode de suppression pour l’&eacute;tat actif, en rejetant ce dernier si
l’&eacute;tat suivant contient une transparence de calque. Pour la plupart des animations, cette option automatique activ&eacute;e
par d&eacute;faut permet d’obtenir les meilleurs r&eacute;sultats visuels ainsi que les tailles de fichier les plus r&eacute;duites.
Aucune Conserve l’&eacute;tat actif tandis que l’&eacute;tat suivant vient s’ajouter dans l’affichage. L’&eacute;tat actif (et les &eacute;tats
pr&eacute;c&eacute;dents) peut &ecirc;tre visible &agrave; travers les zones transparentes de l’&eacute;tat suivant. Si vous choisissez cette option,
utilisez un navigateur pour afficher un aper&ccedil;u pr&eacute;cis de l’animation.
Restaurer l’arri&egrave;re-plan Rejette l’&eacute;tat actif et le remplace temporairement par l’arri&egrave;re-plan de la page Web. Un seul
&eacute;tat s’affiche &agrave; la fois. Choisissez cette option si des objets anim&eacute;s se d&eacute;placent sur un arri&egrave;re-plan transparent.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 240
Optimisation et exportation
Restaurer la version pr&eacute;c&eacute;dente Rejette l’&eacute;tat actif et le remplace temporairement par l’&eacute;tat pr&eacute;c&eacute;dent. Choisissez
cette option si des objets anim&eacute;s se d&eacute;placent sur un arri&egrave;re-plan opaque.
3 Pour d&eacute;finir la cadence des &eacute;tats, s&eacute;lectionnez un &eacute;tat dans la liste, puis entrez la cadence en centi&egrave;mes de seconde
dans la zone Cadence des &eacute;tats.
4 Pour que l’animation se r&eacute;p&egrave;te en continu, cliquez sur le bouton de lecture en boucle, puis s&eacute;lectionnez le nombre
de r&eacute;p&eacute;titions dans le menu contextuel.
5 Pour recadrer chaque &eacute;tat afin que seule la zone qui diff&egrave;re d’un &eacute;tat &agrave; l’autre s’affiche, s&eacute;lectionnez Recadrer chaque
&eacute;tat. Cette option permet de r&eacute;duire la taille du fichier.
6 Pour obtenir une sortie exclusive en pixels qui change entre les &eacute;tats, s&eacute;lectionnez l’option Enregistrer les
diff&eacute;rences entre les &eacute;tats. Cette option permet de r&eacute;duire la taille du fichier.
Exportation &agrave; l’aide de l’aper&ccedil;u de l’image
1 Choisissez Fichier &gt; Aper&ccedil;u de l’image.
2 S&eacute;lectionnez les options souhait&eacute;es sur chaque onglet.
3 Cliquez sur Exporter.
4 Dans la bo&icirc;te de dialogue Exporter, entrez un nom de fichier, s&eacute;lectionnez un r&eacute;pertoire de destination, d&eacute;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&ocirc;ler la mani&egrave;re dont les fichiers sont export&eacute;s. Vous pouvez utiliser des options d’optimisation pr&eacute;d&eacute;finies ou
choisir des options particuli&egrave;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&eacute;s et (pour les formats de fichier 8 bits) un tableau
affichant les couleurs dont est compos&eacute;e la palette de couleurs d’exportation active. Le panneau affiche des param&egrave;tres
de la s&eacute;lection active (une tranche ou le document entier).
Les boutons d’aper&ccedil;u de la fen&ecirc;tre de document permettent d’afficher le graphique export&eacute; tel qu’il appara&icirc;trait avec
les param&egrave;tres d’optimisation actifs.
Vous pouvez ainsi optimiser l’ensemble du document, ou bien s&eacute;lectionner des tranches individuelles ou des zones
s&eacute;lectionn&eacute;es d’un graphique JPEG et affecter &agrave; chacune d’elles diff&eacute;rents param&egrave;tres d’optimisation.
Optimisation de tranches individuelles
Lorsqu’une tranche est s&eacute;lectionn&eacute;e, vous pouvez choisir des param&egrave;tres d’optimisation pr&eacute;d&eacute;finis (enregistr&eacute;s) dans
le menu contextuel Param&egrave;tres d’exportation de la tranche de l’inspecteur des propri&eacute;t&eacute;s.
1 Cliquez sur une tranche pour la s&eacute;lectionner. Pour s&eacute;lectionner plusieurs tranches &agrave; la fois, cliquez sur chacune
d’elles tout en maintenant la touche Maj enfonc&eacute;e.
2 S&eacute;lectionnez des options dans le panneau Optimisation.
UTILISATION DE FIREWORKS CS5 241
Derni&egrave;re mise &agrave; jour le 29/4/2010
Optimisation et exportation
Aper&ccedil;u et comparaison des param&egrave;tres d’optimisation
Les boutons d’aper&ccedil;u de document vous permettent d’afficher le graphique tel qu’il appara&icirc;trait dans un
navigateur Web selon les param&egrave;tres d’optimisation. Vous pouvez pr&eacute;visualiser les survols et les comportements de
navigation, ainsi que les animations.
Bouton Original et boutons d’aper&ccedil;u du document
L’aper&ccedil;u indique la taille totale, la dur&eacute;e pr&eacute;vue du t&eacute;l&eacute;chargement et le format de fichier du document. La dur&eacute;e
pr&eacute;vue repr&eacute;sente la moyenne du temps n&eacute;cessaire au t&eacute;l&eacute;chargement de l’ensemble des tranches et &eacute;tats du document
en supposant qu’un modem de 56 K est utilis&eacute;. Les fen&ecirc;tres 2 en 1 et 4 en 1 affichent des informations suppl&eacute;mentaires
qui varient en fonction du type de fichier s&eacute;lectionn&eacute;.
Lorsque vous affichez un aper&ccedil;u, vous pouvez optimiser un document entier ou une simple s&eacute;lection de tranches. Le
calque de superposition des tranches permet de diff&eacute;rencier les tranches en cours d’optimisation du reste du
document.
Lorsque le calque de superposition des tranches est activ&eacute;, les tranches qui ne sont pas optimis&eacute;es sont gris&eacute;es.
Aper&ccedil;u d’un graphique selon les param&egrave;tres d’optimisation actifs
❖ Cliquez sur le bouton Aper&ccedil;u dans le coin sup&eacute;rieur gauche de la fen&ecirc;tre de document.
Remarque : dans le panneau Outils, cliquez sur Masquer les tranches
d&eacute;coupe pendant l’aper&ccedil;u.
pour masquer les tranches et les rep&egrave;res de
Comparaison d’aper&ccedil;us avec des param&egrave;tres d’optimisation diff&eacute;rents
1 Cliquez sur le bouton 2 en 1 ou 4 en 1 dans le coin sup&eacute;rieur gauche de la fen&ecirc;tre de document.
2 Cliquez sur l’un des aper&ccedil;us scind&eacute;s.
3 Entrez les param&egrave;tres dans le panneau Optimisation.
4 S&eacute;lectionnez les autres aper&ccedil;us, puis sp&eacute;cifiez des param&egrave;tres d’optimisation diff&eacute;rents pour chacun d’eux.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 242
Optimisation et exportation
Lorsque vous s&eacute;lectionnez un aper&ccedil;u 2 en 1 ou 4 en 1, la premi&egrave;re fen&ecirc;tre affiche le document PNG d’origine de
Fireworks, ce qui vous permet de le comparer avec les versions optimis&eacute;es. Vous pouvez afficher la version
optimis&eacute;e de votre choix.
Passage d’une vue optimis&eacute;e &agrave; la vue originale en mode 2 en 1 ou 4 en 1
1 S&eacute;lectionnez une vue optimis&eacute;e.
2 Dans le menu contextuel Aper&ccedil;u situ&eacute; au bas de la fen&ecirc;tre d’aper&ccedil;u, s&eacute;lectionnez Original (pas d’aper&ccedil;u).
Passage de la vue du document original vers une vue optimis&eacute;e en mode 2 en 1 ou 4 en 1
1 S&eacute;lectionnez la vue de l’image originale.
2 Dans le menu contextuel Aper&ccedil;u, s&eacute;lectionnez Aper&ccedil;u de l’image.
Affichage ou masquage du calque de superposition des tranches
❖ Choisissez Affichage &gt; Calque de superposition des tranches.
Optimisation &agrave; l’aide d’une option pr&eacute;d&eacute;finie
Choisissez Fen&ecirc;tre Optimisation pour ouvrir le panneau Optimisation. Lorsque vous choisissez une option pr&eacute;d&eacute;finie,
les autres options du panneau Optimisation sont automatiquement d&eacute;finies.
❖ S&eacute;lectionnez une option pr&eacute;d&eacute;finie dans le menu contextuel Param&egrave;tres de l’inspecteur des propri&eacute;t&eacute;s ou du
panneau Optimisation.
GIF Web 216 Force toutes les couleurs &agrave; &ecirc;tre compatibles Web. Cette palette contient jusqu’&agrave; 216 couleurs.
GIF WebSnap 256 Convertit les couleurs dans la couleur s&eacute;curis&eacute;e pour le Web la plus proche. Cette palette
contient jusqu’&agrave; 256 couleurs au maximum.
GIF WebSnap 128 Convertit les couleurs dans la couleur s&eacute;curis&eacute;e pour le Web la plus proche. Cette palette
contient jusqu’&agrave; 128 couleurs.
GIF adaptatif 256 Contient uniquement les couleurs r&eacute;elles du graphique. Cette palette contient jusqu’&agrave;
256 couleurs au maximum.
JPEG - Qualit&eacute; sup&eacute;rieure D&eacute;finit la qualit&eacute; sur 80 et le lissage sur 0, ce qui produit une image de haute qualit&eacute; mais
dont le fichier est de plus grande taille.
JPEG - Fichier r&eacute;duit D&eacute;finit la qualit&eacute; &agrave; 60 et le lissage &agrave; 2, ce qui produit un fichier dont la taille vaut moins que la
moiti&eacute; d’un fichier JPEG de qualit&eacute; sup&eacute;rieure, mais avec un niveau de qualit&eacute; inf&eacute;rieur.
GIF anim&eacute; WebSnap 128 S&eacute;lectionne le format de fichier GIF anim&eacute; et convertit les couleurs dans la couleur
s&eacute;curis&eacute;e pour le Web la plus proche. Cette palette contient jusqu’&agrave; 128 couleurs.
Choix d’un type de fichier
Pour une optimisation personnalis&eacute;e, s&eacute;lectionnez un type de fichier dans le menu contextuel Exporter un format de
fichier du panneau Optimisation, puis d&eacute;finissez des options propres &agrave; ce format, telles que le codage des couleurs, le
tramage et la qualit&eacute;. Vous pouvez enregistrer ces param&egrave;tres comme nouveau param&egrave;tre pr&eacute;d&eacute;fini.
GIF Le format GIF (Graphics Interchange Format) est un format de fichier graphique Web r&eacute;pandu et id&eacute;al pour les
bandes dessin&eacute;es, les logos, les images comportant des zones transparentes et les animations. Les images dans
lesquelles se trouvent des zones de couleur unie r&eacute;pondent particuli&egrave;rement bien &agrave; la compression lorsqu’elles sont
export&eacute;es en fichiers GIF. Les fichiers GIF contiennent 256 couleurs maximum.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 243
Optimisation et exportation
JPEG D&eacute;velopp&eacute; par le Joint Photographic Experts Group pour les besoins sp&eacute;cifiques des images photographiques ou
des images couleur haute d&eacute;finition, le format JPEG prend en charge des millions de couleurs (24 bits). Le format JPEG
est id&eacute;al pour des photographies num&eacute;ris&eacute;es, des images comportant des textures ou des d&eacute;grad&eacute;s, ou toute autre
image n&eacute;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 &ecirc;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&eacute;mentaires propres &agrave; l’application qui ne
sont pas comprises dans un fichier PNG export&eacute; ou dans des fichiers cr&eacute;&eacute;s dans d’autres applications.
WBMP Le format graphique WBMP (Wireless Bitmap) a &eacute;t&eacute; con&ccedil;u pour les p&eacute;riph&eacute;riques de l’informatique mobile
tels que t&eacute;l&eacute;phones portables et assistants num&eacute;riques personnels. Il est utilis&eacute; sp&eacute;cifiquement pour les pages WAP
(Wireless Application Protocol). Le format WBMP &eacute;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&eacute; pour le stockage des images bitmap. Les
fichiers TIFF sont plus particuli&egrave;rement utilis&eacute;s dans l’&eacute;dition. De nombreuses applications multim&eacute;dia prennent
&eacute;galement en charge les fichiers import&eacute;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&eacute;velopp&eacute; par Apple Computer et principalement utilis&eacute; sur les syst&egrave;mes
d’exploitation Macintosh. La plupart des applications Mac peuvent importer des images PICT.
Voir aussi
&laquo; Optimisation des fichiers GIF, PNG, TIFF, BMP et PICT &raquo; &agrave; la page 244
&laquo; Optimisation des fichiers JPEG &raquo; &agrave; la page 251
Enregistrement et r&eacute;utilisation de param&egrave;tres d’optimisation
Fireworks m&eacute;morise les derniers param&egrave;tres d’optimisation utilis&eacute;s apr&egrave;s l’une des actions suivantes :
• Fichier &gt; Enregistrer
• Fichier &gt; Enregistrer sous
• Fichier &gt; Exporter
Fireworks applique ensuite ces param&egrave;tres aux nouveaux documents.
Remarque : les param&egrave;tres d’optimisation par d&eacute;faut appliqu&eacute;s aux nouvelles tranches sont ceux du document
parent.
Vous pouvez &eacute;galement enregistrer des param&egrave;tres d’optimisation personnalis&eacute;s pour les r&eacute;utiliser ult&eacute;rieurement
dans un processus d’optimisation ou un traitement par lots. Les informations suivantes sont enregistr&eacute;es dans les
optimisations pr&eacute;d&eacute;finies personnalis&eacute;es :
• Param&egrave;tres et table de couleurs d&eacute;finis dans le panneau Optimisation
• Param&egrave;tres de cadence des &eacute;tats du panneau Etats (pour les animations uniquement)
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 244
Optimisation et exportation
Enregistrement des param&egrave;tres d’optimisation comme param&egrave;tres pr&eacute;d&eacute;finis
Les param&egrave;tres d’optimisation enregistr&eacute;s s’affichent dans la partie inf&eacute;rieure du menu contextuel Param&egrave;tres du
panneau Optimisation et dans l’inspecteur des propri&eacute;t&eacute;s. Le fichier pr&eacute;d&eacute;fini est enregistr&eacute; dans le dossier Export
Settings de votre dossier Fireworks de profil utilisateur sp&eacute;cifique. Pour plus d’informations sur l’emplacement de ce
dossier, reportez-vous &agrave; la section &laquo; A propos des fichiers de profil utilisateur &raquo; &agrave; la page 316.
1 Dans le menu Options du panneau Optimisation, s&eacute;lectionnez Enregistrer les param&egrave;tres.
2 Entrez le nom de l’optimisation pr&eacute;d&eacute;finie, puis cliquez sur OK.
Partage de param&egrave;tres d’optimisation enregistr&eacute;s avec un autre utilisateur de Fireworks
❖ Copiez le fichier d’optimisation pr&eacute;d&eacute;fini enregistr&eacute; du dossier Export Settings vers le dossier &eacute;quivalent sur l’autre
ordinateur.
Remarque : l’emplacement de ce dossier varie en fonction du syst&egrave;me d’exploitation.
Suppression d’une optimisation pr&eacute;d&eacute;finie personnalis&eacute;e
Vous ne pouvez pas supprimer un param&egrave;tre d’optimisation pr&eacute;d&eacute;fini de Fireworks.
1 Dans le menu contextuel Param&egrave;tres enregistr&eacute;s du panneau Optimisation, s&eacute;lectionnez un param&egrave;tre
d’optimisation.
2 Dans le menu Options du panneau Optimisation, s&eacute;lectionnez Supprimer les param&egrave;tres.
Optimisation des fichiers GIF, PNG, TIFF, BMP et PICT
Dans Fireworks, chaque format de fichier graphique poss&egrave;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&ocirc;ler parfaitement
l’optimisation.
Pour les graphiques Web &agrave; tons continus, notamment les photos, optez pour un format 24 bits, comme le format JPEG
(voir la section &laquo; Optimisation des fichiers JPEG &raquo; &agrave; la page 251).
Les param&egrave;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&eacute;finir le taux de compression.
Tout en essayant divers param&egrave;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&eacute;e de son fichier.
S&eacute;lection d’une palette de couleurs
Toutes les images 8 bits contiennent une palette pouvant contenir jusqu’&agrave; 256 couleurs disponibles. Les images
utilisent uniquement ces couleurs, mais pas n&eacute;cessairement toutes les couleurs.
❖ Dans le menu contextuel Palette index&eacute;e du panneau Optimisation, s&eacute;lectionnez l’une des options suivantes :
Adaptative Palette personnalis&eacute;e &eacute;tablie &agrave; partir des couleurs utilis&eacute;es dans le document. Cette option produit en
g&eacute;n&eacute;ral une image de qualit&eacute; sup&eacute;rieure.
Adaptive pour le Web Palette adaptive dans laquelle les couleurs sont converties dans leur &eacute;quivalent s&eacute;curis&eacute; pour
le Web le plus proche. Les couleurs s&eacute;curis&eacute;es pour le Web proviennent de la palette Web 216.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 245
Optimisation et exportation
Web 216 Palette compos&eacute;e des 216 couleurs communes aux ordinateurs Windows et Mac OS. Cette palette est
souvent dite s&eacute;curis&eacute;e pour le Web (ou compatible avec les navigateurs) parce qu’elle donne des r&eacute;sultats
relativement r&eacute;guliers en 8 bits, quels que soient la plate-forme et le navigateur utilis&eacute;s.
Exacte Palette contenant les couleurs r&eacute;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&eacute;finies par les normes des plates-formes
Windows ou Mac OS.
Niveaux de gris Palette compos&eacute;e de 256 nuances de gris ou moins. S&eacute;lectionnez cette palette pour convertir
l’image export&eacute;e en niveaux de gris.
Noir et blanc Palette &agrave; deux couleurs, comportant uniquement du noir et du blanc.
Uniforme Palette math&eacute;matique regroupant les valeurs en pixels des couleurs RVB.
Personnalis&eacute; Palette qui a &eacute;t&eacute; modifi&eacute;e ou charg&eacute;e &agrave; partir d’une palette externe (fichier ACT) ou d’un fichier GIF.
Optimisez et personnalisez les palettes de couleurs &agrave; l’aide de la table de couleurs dans le panneau Optimisation.
Importation d’une palette personnalis&eacute;e
1 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Dans le menu contextuel Options du panneau Optimisation, s&eacute;lectionnez Charger la palette.
• Dans le menu contextuel Palette index&eacute;e du panneau Optimisation, cliquez sur Personnalis&eacute;e.
2 Recherchez un fichier de palette ACT ou GIF, puis cliquez sur Ouvrir.
Les couleurs du fichier ACT ou GIF sont ajout&eacute;es dans la table de couleurs du panneau Optimisation.
Remarque : les utilisateurs Windows doivent s&eacute;lectionner les fichiers GIF dans le menu contextuel Types de fichiers
pour pouvoir afficher tous les fichiers portant l’extension .gif dans la bo&icirc;te de dialogue Ouvrir.
S&eacute;lection d’un codage de couleurs pour une image 8 bits
Le codage des couleurs (ou profondeur) d&eacute;signe le nombre de couleurs utilis&eacute;es dans le graphique. R&eacute;duire le codage
des couleurs permet d’obtenir un fichier de plus petite taille mais amoindrit &eacute;galement la qualit&eacute; de l’image. Lorsque
vous r&eacute;duisez le codage des couleurs, certaines couleurs de l’image sont rejet&eacute;es, en commen&ccedil;ant par les couleurs les
moins utilis&eacute;es. Les pixels qui contiennent des couleurs rejet&eacute;es sont convertis dans la couleur la plus proche pr&eacute;sente
dans la palette.
❖ Proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Dans le menu contextuel Couleurs du panneau Optimisation, s&eacute;lectionnez une option.
• Entrez une valeur (de 2 &agrave; 256) dans la zone de texte.
Remarque : le nombre situ&eacute; dans la partie inf&eacute;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&eacute;es d’une image 8 bits
Cette op&eacute;ration permet de r&eacute;duire la taille du fichier.
❖ Dans le menu Options du panneau Optimisation, s&eacute;lectionnez Supprimer les couleurs non utilis&eacute;es.
Derni&egrave;re mise &agrave; 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&eacute;es dans l’image
enregistr&eacute;e
❖ D&eacute;s&eacute;lectionnez Supprimer les couleurs inutilis&eacute;es.
Affichage et modification des couleurs d’une palette
La table des couleurs du panneau Optimisation affiche les couleurs utilis&eacute;es dans l’aper&ccedil;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 &agrave; jour en mode Aper&ccedil;u. Elle s’affiche vide si vous optimisez plusieurs tranches &agrave; 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&eacute;ristiques des couleurs
correspondantes, comme suit :
Symbole
Signification
La couleur a &eacute;t&eacute; modifi&eacute;e, ce qui n’a d’effet que sur le document export&eacute;. Si vous modifiez une couleur, la couleur dans le
document source n’est pas modifi&eacute;e.
La couleur est verrouill&eacute;e.
La couleur est transparente.
La couleur est s&eacute;curis&eacute;e pour le Web.
La couleur poss&egrave;de plusieurs attributs. Dans le cas pr&eacute;sent, cette couleur est s&eacute;curis&eacute;e pour le Web, verrouill&eacute;e et a &eacute;t&eacute;
modifi&eacute;e.
Reconstitution de la table des couleurs pour prendre en compte les modifications apport&eacute;es
au document
Lorsqu’une reconstitution est n&eacute;cessaire, le bouton Reconstituer s’affiche en bas du panneau Optimisation.
❖ Cliquez sur le bouton Reconstituer.
S&eacute;lection des couleurs d’une palette
• Pour s&eacute;lectionner une seule couleur, cliquez sur celle-ci dans la table des couleurs du panneau Optimisation.
• Pour s&eacute;lectionner plusieurs couleurs, cliquez sur celles-ci tout en maintenant la touche Ctrl (Windows) ou
Cmde (Mac OS) enfonc&eacute;e.
• Pour s&eacute;lectionner une plage de couleurs, cliquez sur une couleur, maintenez la touche Maj enfonc&eacute;e, puis cliquez
sur la derni&egrave;re couleur de la plage.
Aper&ccedil;u de tous les pixels du document contenant une couleur sp&eacute;cifique
1 Cliquez sur le bouton Aper&ccedil;u dans le coin sup&eacute;rieur gauche de la fen&ecirc;tre de document.
2 Dans la table des couleurs du panneau Optimisation, cliquez sur une nuance, puis maintenez le bouton de la souris
enfonc&eacute;.
Les pixels contenant la nuance s&eacute;lectionn&eacute;e changent temporairement de couleur tant que le bouton de la souris
reste enfonc&eacute;.
Remarque : lorsque vous pr&eacute;visualisez des pixels dans le document &agrave; l’aide des fen&ecirc;tres 2 en 1 ou 4 en 1, s&eacute;lectionnez
une fen&ecirc;tre plut&ocirc;t que l’original.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 247
Optimisation et exportation
Verrouillage ou d&eacute;verrouillage des couleurs d’une palette
Vous pouvez verrouiller certaines couleurs de fa&ccedil;on &agrave; emp&ecirc;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&egrave;s un verrouillage de
couleurs, les couleurs verrouill&eacute;es sont ajout&eacute;es &agrave; la nouvelle palette.
• Pour verrouiller ou d&eacute;verrouiller une nuance s&eacute;lectionn&eacute;e, cliquez sur le bouton Verrouiller
en bas du
panneau Optimisation. Vous pouvez &eacute;galement cliquer avec le bouton droit de la souris (Windows) ou maintenir
la touche Ctrl enfonc&eacute;e (Mac OS) sur la nuance et choisir l’option Verrouiller la couleur.
• Pour d&eacute;verrouiller toutes les couleurs, s&eacute;lectionnez D&eacute;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&eacute;es ou
enregistr&eacute;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&egrave;me, proc&eacute;dez de l’une des mani&egrave;res suivantes :
• S&eacute;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&eacute;e
(Mac OS) sur une couleur de la palette pour afficher les options de modification.
Utilisation de couleurs s&eacute;curis&eacute;es pour le Web
Les couleurs s&eacute;curis&eacute;es pour le Web sont communes aux plates-formes Mac OS et Windows. Ces couleurs ne sont pas
tram&eacute;es lorsqu’elles sont affich&eacute;es dans un navigateur Web sur un &eacute;cran d’ordinateur param&eacute;tr&eacute; pour 256 couleurs.
Dans le cas d’un fichier au format PNG Fireworks, le changement des couleurs en couleurs s&eacute;curis&eacute;es pour le Web
dans le panneau Optimisation agit uniquement sur la version export&eacute;e de l’image, et non l’image elle-m&ecirc;me.
• Pour convertir toutes les couleurs en couleurs s&eacute;curis&eacute;es pour le Web, s&eacute;lectionnez Web 216 dans le menu
contextuel Palette index&eacute;e du panneau Optimisation.
• Pour cr&eacute;er une palette adaptative qui privil&eacute;gie les couleurs s&eacute;curis&eacute;es pour le Web, s&eacute;lectionnez Adaptive pour
le Web dans le menu contextuel Palette index&eacute;e du panneau Optimisation.
• Pour convertir une couleur en son &eacute;quivalent s&eacute;curis&eacute; pour le Web le plus proche, s&eacute;lectionnez une couleur dans
la table des couleurs du panneau Optimisation, puis cliquez sur le bouton Magn&eacute;tisme de la couleur s&eacute;curis&eacute;e pour
le Web
.
Utilisation du tramage pour s’approcher des couleurs manquantes d’une palette
Le tramage permet de cr&eacute;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&eacute;langent et ressemblent &agrave; la couleur
manquante. Le tramage est particuli&egrave;rement utile pour exporter des images avec des fondus complexes ou des
d&eacute;grad&eacute;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&eacute;rablement la taille du fichier.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 248
Optimisation et exportation
Enregistrement des palettes de couleurs
Vous pouvez enregistrer les palettes personnalis&eacute;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&reg; et
Adobe Photoshop&reg;. Les fichiers de palettes enregistr&eacute;s portent l’extension .act.
1 Dans le menu Options du panneau Optimisation, s&eacute;lectionnez Enregistrer la palette.
2 Saisissez un nom, puis s&eacute;lectionnez un dossier de destination.
3 Cliquez sur Enregistrer.
Vous pouvez charger le fichier de palette enregistr&eacute; 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&egrave;tre de perte. Plus cette valeur est &eacute;lev&eacute;e, plus les
fichiers sont de petite taille, mais plus la qualit&eacute; de l’image est r&eacute;duite. Un param&egrave;tre de perte d&eacute;fini entre 5 et 15 est
id&eacute;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&egrave;tre Perte.
Transformation de zones en zones transparentes
Les zones transparentes pr&eacute;sentes dans les fichiers GIF et PNG 8 bits permettent de r&eacute;v&eacute;ler l’arri&egrave;re-plan d’une
page Web. Dans Fireworks, un damier gris et blanc dans la fen&ecirc;tre de document permet d’identifier les zones
transparentes.
Aper&ccedil;u d’une image optimis&eacute;e dans Fireworks ; image export&eacute;e avec transparence et plac&eacute;e sur une page Web ayant un arri&egrave;re-plan color&eacute;
Remarque : bien que les fichiers PNG 32 bits contiennent de la transparence, le panneau Optimisation ne dispose pas
d’option de transparence adapt&eacute;e.
Pour vos fichiers GIF, utilisez l’option Transparence d’index qui active ou d&eacute;sactive les pixels avec des valeurs
chromatiques particuli&egrave;res.
UTILISATION DE FIREWORKS CS5 249
Derni&egrave;re mise &agrave; jour le 29/4/2010
Optimisation et exportation
Par d&eacute;faut, les images GIF sont export&eacute;es sans transparence. M&ecirc;me si la le document situ&eacute;e derri&egrave;re l’image ou l’objet
appara&icirc;t transparent dans l’affichage original dans Fireworks, l’arri&egrave;re-plan de l’image n’est pas n&eacute;cessairement
transparent, &agrave; moins de s&eacute;lectionner l’option Transparence d’index avant l’exportation.
Pour vos fichiers PNG, vous pouvez utiliser la transparence alpha, souvent employ&eacute;e dans les graphiques export&eacute;s qui
contiennent des d&eacute;grad&eacute;s de transparence et des pixels semi-opaques. Bien que la transparence soit peu int&eacute;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 &agrave; des couleurs n’affecte pas l’image proprement dite, mais seulement sa
version export&eacute;e. Pour voir l’aspect qu’aura l’image export&eacute;e, affichez un aper&ccedil;u.
Voir aussi
&laquo; Exportation depuis l’espace de travail &raquo; &agrave; la page 253
Application d’un effet de transparence &agrave; l’arri&egrave;re-plan d’une image
1 Cliquez sur le bouton Aper&ccedil;u, 2 en 1 ou 4 en 1 dans le coin sup&eacute;rieur gauche de la fen&ecirc;tre de document. En mode
d’affichage 2 en 1 ou 4 en 1, cliquez sur une autre fen&ecirc;tre que celle de l’original.
2 Dans le panneau Optimisation (Fen&ecirc;tre &gt; Optimisation), s&eacute;lectionnez le format de fichier GIF ou PNG 8.
S&eacute;lectionnez ensuite Transparence d’index dans le menu contextuel Choisir le type de transparence.
La couleur de la zone de travail appara&icirc;t transparente dans l’aper&ccedil;u, et le graphique peut alors &ecirc;tre export&eacute;.
S&eacute;lection d’une couleur de transparence
1 Cliquez sur le bouton Aper&ccedil;u, 2 en 1 ou 4 en 1 dans le coin sup&eacute;rieur gauche de la fen&ecirc;tre de document. En mode
d’affichage 2 en 1 ou 4 en 1, cliquez sur une autre fen&ecirc;tre que celle de l’original.
2 Dans le panneau Optimisation (Fen&ecirc;tre &gt; Optimisation), s&eacute;lectionnez le format de fichier GIF ou PNG 8.
S&eacute;lectionnez ensuite Transparence d’index dans le menu contextuel Choisir le type de transparence.
3 Pour s&eacute;lectionner une autre couleur, cliquez sur le bouton S&eacute;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&ccedil;u, 2 en 1 ou 4 en 1 dans le coin sup&eacute;rieur gauche de la fen&ecirc;tre de document. En mode
d’affichage 2 en 1 ou 4 en 1, cliquez sur une autre fen&ecirc;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&eacute;sultat uniquement en affichant un aper&ccedil;u.
2 Dans le panneau Optimisation (Fen&ecirc;tre &gt; Optimisation), s&eacute;lectionnez le format de fichier GIF ou PNG 8.
S&eacute;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 &agrave; 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&egrave;re mise &agrave; jour le 29/4/2010
Optimisation et exportation
Entrelacement d’images &agrave; t&eacute;l&eacute;charger progressivement
Les images entrelac&eacute;es, consult&eacute;es dans un navigateur Web, commencent par s’afficher dans une faible r&eacute;solution puis
parviennent &agrave; leur r&eacute;solution compl&egrave;te &agrave; la fin de leur t&eacute;l&eacute;chargement.
Remarque : cette option est disponible uniquement pour les formats de fichier GIF et PNG. Vous pouvez obtenir des
r&eacute;sultats similaires avec une image JPEG en rendant son t&eacute;l&eacute;chargement progressif.
❖ Dans le menu Options du panneau Optimisation, s&eacute;lectionnez Entrelac&eacute;e.
Correspondance avec une couleur d’arri&egrave;re-plan cible
Le lissage vous permet de lisser l’aspect d’un objet en fusionnant sa couleur avec l’arri&egrave;re-plan. Par exemple, si l’objet
est noir et que la page sur laquelle il est plac&eacute; 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&eacute;lectionnez une couleur dans le menu contextuel Cache. Faites en sorte qu’elle soit
le plus proche possible de la couleur d’arri&egrave;re-plan cible sur lequel le graphique sera plac&eacute;.
Remarque : le lissage s’applique uniquement aux objets &agrave; contours adoucis plac&eacute;s directement sur la zone de travail.
Suppression des halos
Lorsque vous rendez transparente la couleur de zone de travail d’une image ayant &eacute;t&eacute; liss&eacute;e, les pixels cr&eacute;&eacute;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&egrave;re-plan diff&eacute;rente, les pixels situ&eacute;s &agrave; la p&eacute;riph&eacute;rie de l’objet liss&eacute; peuvent prendre la forme
d’un halo, effet tout particuli&egrave;rement visible sur un arri&egrave;re-plan sombre.
M&eacute;thodes anti-halos dans les fichiers PNG Fireworks et les fichiers Photoshop import&eacute;s
❖ Proc&eacute;dez de l’une des mani&egrave;res suivantes :
• S&eacute;lectionnez une couleur de zone de travail dans l’inspecteur des propri&eacute;t&eacute;s ou une couleur de cache dans le
panneau Optimisation qui soit identique &agrave; celle de l’arri&egrave;re-plan de la page Web cible.
• Apr&egrave;s avoir s&eacute;lectionn&eacute; l’objet &agrave; exporter, cliquez sur Net dans le menu contextuel Bord de l’inspecteur des
propri&eacute;t&eacute;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&ccedil;u, 2 en 1 ou 4 en 1 dans le coin sup&eacute;rieur gauche de
la fen&ecirc;tre de document. En mode d’affichage 2 en 1 ou 4 en 1, cliquez sur une autre fen&ecirc;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 &agrave; la transparence
, puis cliquez sur un pixel dans le halo.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 251
Optimisation et exportation
Tous les pixels de couleur identique sont effac&eacute;s dans l’aper&ccedil;u.
4 Si le halo subsiste, r&eacute;p&eacute;tez l’&eacute;tape 3 jusqu’&agrave; ce qu’il disparaisse.
Optimisation des fichiers JPEG
Le panneau Optimisation vous permet d’optimiser les fichiers JPEG en d&eacute;finissant des options de compression et
de lissage.
Les fichiers JPEG &eacute;tant toujours enregistr&eacute;s et export&eacute;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&eacute;lectionnez une image JPEG.
Tout en essayant divers param&egrave;tres d’optimisation, utilisez les boutons 2 en 1 et 4 en 1 pour tester et comparer l’aspect
et la taille estim&eacute;e d’un fichier JPEG.
Remarque : il est possible d’enregistrer les fichiers JPEG directement depuis la bo&icirc;te de dialogue &laquo; Enregistrer sous &raquo;.
Ajustement de la qualit&eacute; JPEG
Le format JPEG est un format dit &laquo; avec perte &raquo;, ce qui signifie qu’une partie des donn&eacute;es de l’image est supprim&eacute;e lors
de la compression, ce qui r&eacute;duit la qualit&eacute; du fichier final.
Image originale ; r&eacute;glage de la qualit&eacute; sur 50 ; r&eacute;glage de la qualit&eacute; sur 20
❖ R&eacute;glez la qualit&eacute; &agrave; l’aide du curseur du menu contextuel Qualit&eacute; du panneau Optimisation.
Utilisez un pourcentage &eacute;lev&eacute; pour conserver la qualit&eacute; ; la compression sera alors moins importante et les fichiers
r&eacute;sultants plus volumineux.
A l’inverse, un faible pourcentage permet d’obtenir un fichier de taille r&eacute;duite mais d’une qualit&eacute; graphique inf&eacute;rieure.
Compression s&eacute;lective de zones dans une image JPEG
Pour r&eacute;duire la taille totale de l’image tout en pr&eacute;servant la qualit&eacute; des zones les plus importantes, compressez les zones
les plus critiques avec un niveau de qualit&eacute; sup&eacute;rieur, et les zones moins importantes, comme les arri&egrave;re-plans, avec
un niveau de qualit&eacute; moindre.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 252
Optimisation et exportation
La zone s&eacute;lectionn&eacute;e dans cette image est compress&eacute;e &agrave; un niveau de qualit&eacute; de 90, tandis que la zone non s&eacute;lectionn&eacute;e est compress&eacute;e &agrave; un
niveau de qualit&eacute; de 50.
1 Dans la fen&ecirc;tre Original, s&eacute;lectionnez la zone &agrave; compresser dans le graphique &agrave; l’aide de l’un des outils de cadre de
s&eacute;lection.
2 Choisissez Modification &gt; JPEG s&eacute;lective &gt; Enregistrer la s&eacute;lection en tant que masque JPEG.
3 S&eacute;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&eacute; s&eacute;lective dans le panneau Optimisation.
5 S&eacute;lectionnez Activer la qualit&eacute; s&eacute;lective, puis entrez une valeur dans la zone de texte.
Une valeur faible permet de compresser davantage la zone s&eacute;lectionn&eacute;e que le reste de l’image, tandis qu’une valeur
&eacute;lev&eacute;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&eacute;lective. Cela n’affecte pas le r&eacute;sultat.
7 Pour exporter tous les textes dans une qualit&eacute; sup&eacute;rieure, quelle que soit la valeur Qualit&eacute; s&eacute;lective, s&eacute;lectionnez
Pr&eacute;server la qualit&eacute; du texte.
8 Pour exporter les symboles de bouton &agrave; un niveau de qualit&eacute; sup&eacute;rieur, s&eacute;lectionnez Pr&eacute;server la qualit&eacute; du bouton.
Modification de la zone de compression JPEG s&eacute;lective
1 Choisissez Modification &gt; JPEG s&eacute;lective &gt; Restaurer le masque JPEG en tant que s&eacute;lection.
2 Pour modifier la taille de la zone de s&eacute;lection, utilisez l’outil Cadre de s&eacute;lection ou tout autre outil de s&eacute;lection.
3 Choisissez Modification &gt; JPEG s&eacute;lective &gt; Enregistrer la s&eacute;lection en tant que masque JPEG.
4 (Facultatif) Modifiez les param&egrave;tres Qualit&eacute; s&eacute;lective dans le panneau Optimisation.
Remarque : pour annuler une s&eacute;lection, cliquez sur Modification &gt; JPEG s&eacute;lective &gt; Supprimer le masque JPEG.
Att&eacute;nuation ou accentuation des d&eacute;tails JPEG
Le lissage consiste &agrave; appliquer un flou aux bords nets, qui n’offrent pas de bonnes possibilit&eacute;s de compression en JPEG.
Les valeurs &eacute;lev&eacute;es produisent un flou plus &eacute;lev&eacute; dans les fichiers JPEG export&eacute;s ou enregistr&eacute;s, ce qui cr&eacute;e en g&eacute;n&eacute;ral
des fichiers de plus petite taille. Une valeur de lissage de 3 environ suffit &agrave; r&eacute;duire la taille du fichier d’image tout en
conservant une qualit&eacute; raisonnable.
Utilisez l’option Bords des JPEG plus nets pour exporter ou enregistrer des fichiers JPEG qui contiennent du texte ou
des d&eacute;tails fins et conserver la nettet&eacute; de ces zones. Cette option augmente la taille de fichier.
Proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Pour att&eacute;nuer les d&eacute;tails, s&eacute;lectionnez Lissage dans le panneau Optimisation.
• Pour accentuer les d&eacute;tails, cliquez sur Bords des JPEG plus nets dans le menu Options du panneau Optimisation.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 253
Optimisation et exportation
Cr&eacute;ation d’une image JPEG progressive
Comme les images PNG et GIF entrelac&eacute;es, les images JPEG progressives s’affichent initialement dans une faible
r&eacute;solution, puis leur qualit&eacute; s’am&eacute;liore au fur et &agrave; mesure de leur t&eacute;l&eacute;chargement.
❖ Dans le menu Options du panneau Optimisation, s&eacute;lectionnez JPEG progressive.
Remarque : certaines anciennes applications d’&eacute;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&eacute;, 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 &eacute;galement exporter tout le document en tant que fichier HTML et les fichiers image associ&eacute;s, uniquement des
tranches s&eacute;lectionn&eacute;es ou une zone sp&eacute;cifique. En outre, vous pouvez exporter des &eacute;tats Fireworks et des calques dans
des fichiers d’image distincts.
L’emplacement par d&eacute;faut dans lequel Fireworks exporte des documents est d&eacute;termin&eacute; par les &eacute;l&eacute;ments suivants, dans
l’ordre :
1 Pr&eacute;f&eacute;rence d’exportation actuelle du document, d&eacute;finie si vous avez d&eacute;j&agrave; export&eacute; le document puis enregistr&eacute;
le PNG
2 Emplacement actuel d’exportation/d’enregistrement, d&eacute;fini &agrave; chaque fois que vous modifiez l’emplacement par
d&eacute;faut dans la bo&icirc;te de dialogue Enregistrer, Enregistrer sous ou Exporter
3 Emplacement du fichier actif
4 Emplacement d’enregistrement par d&eacute;faut des nouveaux documents ou des nouvelles images sur le syst&egrave;me
d’exploitation
L’emplacement par d&eacute;faut d’enregistrement par Fireworks d’un document est quant &agrave; lui d&eacute;termin&eacute; par des crit&egrave;res
tr&egrave;s diff&eacute;rents. Pour plus d’informations, reportez-vous &agrave; la section &laquo; Enregistrement de fichiers Fireworks &raquo; &agrave; la
page 11.
Exportation de pages en tant que fichiers d’image
1 Choisissez Fichier &gt; Exporter.
2 Sp&eacute;cifiez l’emplacement des fichiers d’exportation.
3 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Choisissez Images uniquement dans le menu contextuel Exporter, puis activez ou d&eacute;sactivez la case Page
actuelle uniquement. Les pages sont export&eacute;es au format d’image d&eacute;fini dans le panneau Optimisation.
• Dans le menu contextuel Exporter, s&eacute;lectionnez la commande Pages vers Fichiers, puis choisissez l’option
Images dans le menu contextuel Exporter en tant que. Les pages sont export&eacute;es au format d’image d&eacute;fini dans
le panneau Optimisation.
• Dans le menu contextuel Exporter, cliquez sur Pages vers Fichiers, puis s&eacute;lectionnez PNG Fireworks dans le
menu contextuel Exporter en tant que. Chaque page est export&eacute;e sous la forme d’un fichier PNG distinct qui
garantit une compatibilit&eacute; descendante avec Fireworks 8.
Remarque : Pour exporter toutes les pages dans le format choisi, s&eacute;lectionnez-les toutes, puis optimisez les param&egrave;tres.
Derni&egrave;re mise &agrave; 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 &agrave; la section &laquo; Enregistrement de documents dans d’autres formats &raquo; &agrave; la page 12.
Remarque : pour exporter uniquement certaines images d’un document, vous devez d’abord d&eacute;couper votre document
en tranches, puis exporter uniquement les tranches souhait&eacute;es.
1 Dans le panneau Optimisation, s&eacute;lectionnez un format de fichier, puis d&eacute;finissez les options propres &agrave; ce format.
2 Choisissez Fichier &gt; Exporter.
3 D&eacute;finissez l’emplacement vers lequel exporter le fichier d’image.
Pour les graphiques Web, le meilleur emplacement est g&eacute;n&eacute;ralement un dossier du site Web local.
4 Saisissez un nom de fichier sans extension. Une extension est ajout&eacute;e pendant l’exportation selon le type de fichier.
5 Dans le menu contextuel Exporter, s&eacute;lectionnez Images uniquement.
6 Cliquez sur Enregistrer.
Exportation d’un document d&eacute;coup&eacute; en tranches
Par d&eacute;faut, lorsque vous exportez un document Fireworks d&eacute;coup&eacute; en tranches, il est export&eacute; sous la forme d’un
fichier HTML et de plusieurs images associ&eacute;es. Le fichier HTML export&eacute; peut &ecirc;tre affich&eacute; dans un navigateur Web ou
import&eacute; dans d’autres applications pour y &ecirc;tre retouch&eacute;.
Avant d’exporter le fichier, assurez-vous que le style HTML appropri&eacute; est s&eacute;lectionn&eacute; dans la bo&icirc;te de dialogue
Configuration HTML (voir la section &laquo; D&eacute;finition des options d’exportation de code HTML &raquo; &agrave; la page 262).
Exportation de toutes les tranches
1 Choisissez Fichier &gt; Exporter.
2 Acc&eacute;dez au dossier de destination de l’exportation sur votre disque dur.
3 Dans le menu contextuel Exporter, s&eacute;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&eacute;lectionnez Exporter le fichier HTML.
6 Dans le menu contextuel Tranches, choisissez Exporter les tranches.
7 (Facultatif) S&eacute;lectionnez Placer les images dans des sous-dossiers.
8 Cliquez sur Enregistrer.
Exportation de tranches s&eacute;lectionn&eacute;es
1 Tout en maintenant la touche Maj enfonc&eacute;e, cliquez sur plusieurs tranches pour les s&eacute;lectionner.
2 Choisissez Fichier &gt; Exporter.
3 S&eacute;lectionnez un emplacement de destination des fichiers export&eacute;s (un dossier de votre site Web local, par exemple).
4 Dans le menu contextuel Exporter, s&eacute;lectionnez Documents HTML et Images.
5 Saisissez un nom de fichier sans extension. Une extension est ajout&eacute;e pendant l’exportation selon le type de fichier.
Si vous exportez plusieurs tranches, Fireworks utilise le nom entr&eacute; comme &eacute;tant le nom racine de tous les
graphiques export&eacute;s, &agrave; l’exception des graphiques auxquels vous avez affect&eacute; des noms personnalis&eacute;s dans le
panneau Calques ou dans l’inspecteur des propri&eacute;t&eacute;s.
Derni&egrave;re mise &agrave; 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&eacute;lectionn&eacute;es avant l’exportation, choisissez la commande Tranches
s&eacute;lectionn&eacute;es uniquement, puis v&eacute;rifiez que l’option Inclure les zones sans tranches est d&eacute;s&eacute;lectionn&eacute;e.
8 Cliquez sur Enregistrer.
Mise &agrave; jour d’une tranche
Si vous avez d&eacute;j&agrave; export&eacute; un document d&eacute;coup&eacute; en tranches et que vous avez par la suite apport&eacute; des modifications au
document original dans Fireworks, vous pouvez uniquement mettre &agrave; jour l’image ou la tranche modifi&eacute;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&eacute;affichez la tranche.
3 Cliquez avec le bouton droit de la souris (Windows) ou tout en maintenant la touche Ctrl enfonc&eacute;e (Mac OS) sur
la tranche, puis s&eacute;lectionnez Exporter la tranche s&eacute;lectionn&eacute;e.
4 S&eacute;lectionnez le m&ecirc;me dossier que celui de la tranche d’origine en utilisant le m&ecirc;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, &eacute;vitez de redimensionner la tranche au-del&agrave; de sa taille d’exportation d’origine car vous
risquez d’obtenir des r&eacute;sultats impr&eacute;visibles dans le document HTML apr&egrave;s la mise &agrave; jour de la tranche.
Exportation d’une animation
Lorsque vous avez cr&eacute;&eacute; et optimis&eacute; une animation, elle est pr&ecirc;te &agrave; &ecirc;tre export&eacute;e. Vous pouvez exporter une animation
sous les types de fichier suivants :
GIF anim&eacute; Ce format donne les meilleurs r&eacute;sultats avec les graphiques de type cliparts et dessins anim&eacute;s.
SWF Flash ou PNG Fireworks (aucune exportation n&eacute;cessaire) Exportez une animation en tant que fichier SWF &agrave;
importer dans Flash. Vous pouvez passer l’&eacute;tape d’exportation en important directement dans Flash un fichier source
PNG Fireworks. Cette m&eacute;thode plus directe vous permet d’importer tous les calques et tous les &eacute;tats de votre
animation et de les peaufiner dans Flash (voir la section &laquo; Utilisation de Flash &raquo; &agrave; la page 276).
Fichiers multiples Il est utile d’exporter des &eacute;tats ou calques d’animation en tant que fichiers multiples lorsque
diff&eacute;rents calques comportent de nombreux symboles pour un m&ecirc;me objet. Par exemple, vous pouvez exporter une
banni&egrave;re publicitaire sous la forme de plusieurs fichiers si chaque lettre du nom d’une soci&eacute;t&eacute; est anim&eacute;e dans un
graphique (voir la section &laquo; Exportation d’&eacute;tats ou de calques en tant que fichiers distincts &raquo; &agrave; la page 256).
Si votre document comporte plusieurs animations, vous pouvez ins&eacute;rer des tranches pour exporter chaque animation
en utilisant diff&eacute;rents param&egrave;tres d’animation, tels que la lecture en boucle et la cadence des &eacute;tats.
Exportation d’un fichier GIF anim&eacute;
1 Choisissez la commande S&eacute;lection &gt; D&eacute;s&eacute;lectionner pour d&eacute;s&eacute;lectionner tous les objets et tranches, puis, dans le
panneau Optimisation, s&eacute;lectionnez le format de fichier GIF anim&eacute;.
2 Choisissez Fichier &gt; Exporter.
3 Saisissez le nom du fichier, puis s&eacute;lectionnez le dossier de destination.
4 Cliquez sur Enregistrer.
UTILISATION DE FIREWORKS CS5 256
Derni&egrave;re mise &agrave; jour le 29/4/2010
Optimisation et exportation
Exportation de plusieurs fichiers GIF anim&eacute;s avec diff&eacute;rents param&egrave;tres d’animation
1 Tout en maintenant la touche Maj enfonc&eacute;e, cliquez sur les animations pour toutes les s&eacute;lectionner.
2 Choisissez la commande Edition &gt; Ins&eacute;rer &gt; Tranche rectangulaire ou Tranche polygonale.
3 Cliquez sur Multiple dans la zone de message.
4 S&eacute;lectionnez chaque tranche individuellement, puis dans le panneau Etats, d&eacute;finissez les diff&eacute;rents param&egrave;tres
d’animation de chaque tranche.
5 S&eacute;lectionnez toutes les tranches &agrave; animer, puis choisissez GIF anim&eacute; 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&eacute;e (Mac OS) sur
chaque tranche &agrave; exporter individuellement, puis s&eacute;lectionnez Exporter la tranche s&eacute;lectionn&eacute;e. Dans la bo&icirc;te de
dialogue Exporter, entrez un nom pour chaque fichier, s&eacute;lectionnez une destination, puis cliquez sur Enregistrer.
Exportation d’&eacute;tats ou de calques en tant que fichiers distincts
Fireworks permet d’exporter chaque calque ou &eacute;tat d’un document sous la forme d’un fichier d’image distinct en
tenant compte des param&egrave;tres d’optimisation sp&eacute;cifi&eacute;s dans le panneau Optimisation. Le nom du calque ou de l’&eacute;tat
d&eacute;termine le nom du fichier export&eacute; correspondant. Cette m&eacute;thode d’exportation est souvent utilis&eacute;e pour exporter
des animations.
1 Choisissez Fichier &gt; Exporter.
2 Entrez un nom de fichier, puis s&eacute;lectionnez un dossier de destination.
3 Dans le menu contextuel Exporter, s&eacute;lectionnez une option :
Etats vers fichiers Exporte les &eacute;tats comme des fichiers distincts.
Calques vers fichiers Exporte les calques comme des fichiers distincts.
Remarque : cette derni&egrave;re option exporte l’ensemble des calques de l’&eacute;tat actif.
4 Pour recadrer automatiquement chaque image export&eacute;e de mani&egrave;re &agrave; n’inclure que les objets sur chaque &eacute;tat,
s&eacute;lectionnez l’option Rogner les images. Sinon, pour inclure la zone de travail enti&egrave;re (y compris les zones vierges
au-del&agrave; des objets), d&eacute;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&eacute;limiter la partie du document &agrave; exporter.
Remarque : vous pouvez ajuster la position du cadre de s&eacute;lection &agrave; mesure que vous le d&eacute;limitez. Tout en maintenant
enfonc&eacute;s le bouton de la souris et la barre d’espace, faites glisser le cadre de s&eacute;lection vers l’emplacement appropri&eacute; sur
la zone de travail. Rel&acirc;chez la barre d’espace pour continuer &agrave; dessiner le cadre de s&eacute;lection.
Lorsque vous rel&acirc;chez le bouton de la souris, la zone d’exportation reste s&eacute;lectionn&eacute;e.
3 Au besoin, redimensionnez la zone d’exportation :
• Pour redimensionner proportionnellement le cadre de s&eacute;lection de la zone d’exportation, faites glisser une
poign&eacute;e tout en maintenant la touche Maj enfonc&eacute;e.
• Pour redimensionner le cadre de s&eacute;lection en partant de son centre, faites glisser une poign&eacute;e tout en maintenant
la touche Alt (Windows) ou Option (Mac OS) enfonc&eacute;e.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 257
Optimisation et exportation
• Pour redimensionner le cadre de s&eacute;lection en partant de son centre en conservant ses proportions, faites glisser
une poign&eacute;e tout en maintenant les touches Alt+Maj (Windows) ou Option+Maj (Mac OS) enfonc&eacute;es.
4 Cliquez deux fois &agrave; l’int&eacute;rieur du cadre de s&eacute;lection de la zone d’exportation pour afficher l’aper&ccedil;u de l’image.
5 D&eacute;finissez les param&egrave;tres dans l’aper&ccedil;u de l’image, puis cliquez sur Exporter.
6 Entrez un nom de fichier, puis s&eacute;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 &agrave; l’ext&eacute;rieur du cadre de s&eacute;lection de la zone d’exportation,
appuyez sur la touche Echap ou s&eacute;lectionnez un autre outil.
Exportation de code HTML
Sauf indication contraire, lorsque vous exportez un document Fireworks d&eacute;coup&eacute; en tranches, vous exportez un
fichier HTML accompagn&eacute; de ses images. Utilisez la bo&icirc;te de dialogue Configuration HTML pour d&eacute;finir les
param&egrave;tres d’exportation de code HTML Fireworks.
Fireworks g&eacute;n&egrave;re un v&eacute;ritable fichier HTML qui peut &ecirc;tre lu dans la plupart des navigateurs Web et &eacute;diteurs HTML.
Par d&eacute;faut, l’exportation sp&eacute;cifie le codage UTF-8.
Il existe plusieurs fa&ccedil;ons d’exporter un fichier HTML Fireworks :
• Exporter un fichier HTML que vous pouvez ouvrir plus tard pour le modifier dans un &eacute;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 &eacute;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 &agrave; jour le code HTML pour modifier un fichier HTML cr&eacute;&eacute; pr&eacute;c&eacute;demment
Fireworks vous permet d’exporter du code HTML aux formats G&eacute;n&eacute;rique, Dreamweaver, Microsoft&reg; FrontPage&reg; et
Adobe GoLive&reg;.
Remarque : Adobe Dreamweaver est &eacute;troitement int&eacute;gr&eacute; &agrave; Fireworks. Fireworks g&egrave;re les exportations de code HTML
vers Dreamweaver diff&eacute;remment des exportations vers d’autres &eacute;diteurs HTML. Si vous exportez du code HTML
Fireworks vers Dreamweaver, reportez-vous &agrave; la section &laquo; Utilisation de Dreamweaver &raquo; &agrave; la page 266.
La m&eacute;thode d’exportation permettant de r&eacute;cup&eacute;rer dans d’autres applications un code HTML g&eacute;n&eacute;r&eacute; par Fireworks
est une m&eacute;thode id&eacute;ale pour le travail en &eacute;quipe. Cette m&eacute;thode fractionne le flux de production en segments, ce
qui permet &agrave; une personne d’ex&eacute;cuter une t&acirc;che donn&eacute;e dans une application, puis &agrave; une autre de prendre la suite
ult&eacute;rieurement dans une autre application.
Int&eacute;gration de commentaires dans du code HTML export&eacute;
Les commentaires de code HTML Fireworks sont compris entre les s&eacute;quences de caract&egrave;res &lt;!-- et --&gt;. Tout ce qui
se trouve entre ces deux marqueurs n’est pas interpr&eacute;t&eacute; comme code HTML ou JavaScript.
❖ Avant l’exportation, ouvrez la bo&icirc;te de dialogue Configuration HTML, puis s&eacute;lectionnez l’option Inclure les
commentaires HTML sous l’onglet G&eacute;n&eacute;ral.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 258
Optimisation et exportation
R&eacute;sultats de l’exportation
Lorsque vous exportez ou copiez du code HTML depuis Fireworks, les &eacute;l&eacute;ments suivants sont g&eacute;n&eacute;r&eacute;s :
• Le code HTML n&eacute;cessaire pour rassembler les images d&eacute;coup&eacute;es et un code JavaScript, si le document contient des
&eacute;l&eacute;ments interactifs. Le code HTML g&eacute;n&eacute;r&eacute; par Fireworks contient des liens vers les images export&eacute;es et utilise la
couleur de la zone de travail pour l’arri&egrave;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’&eacute;tats de boutons.
• Un fichier de s&eacute;parateurs appel&eacute; spacer.gif, si n&eacute;cessaire. Le fichier spacer.gif est un fichier GIF transparent de
1 pixel sur 1 pixel, que Fireworks utilise pour corriger les probl&egrave;mes d’espacement lorsque les images d&eacute;coup&eacute;es en
tranches sont rassembl&eacute;es dans une table HTML. La cr&eacute;ation de ce fichier de s&eacute;parateurs est facultative.
• Si vous exportez des menus contextuels, les fichiers suivants sont export&eacute;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 &eacute;galement un fichier arrows.gif.
• Lorsque vous exportez ou copiez du code HTML dans Dreamweaver, des fichiers de commentaires sont cr&eacute;&eacute;s pour
faciliter l’int&eacute;gration entre Fireworks et Dreamweaver. Ces fichiers portent l’extension .mno.
Exportation de code HTML Fireworks
1 Choisissez Fichier &gt; Exporter.
2 Acc&eacute;dez au dossier de destination de l’exportation sur votre disque dur.
3 Dans le menu contextuel Exporter, s&eacute;lectionnez Documents HTML et Images.
4 Dans la bo&icirc;te de dialogue Configuration HTML, cliquez sur le bouton Options, puis, dans le menu contextuel
Style HTML de l’onglet G&eacute;n&eacute;ral, s&eacute;lectionnez un &eacute;diteur HTML. Si votre &eacute;diteur HTML n’est pas r&eacute;pertori&eacute;,
s&eacute;lectionnez G&eacute;n&eacute;rique.
Remarque : il est important de s&eacute;lectionner votre &eacute;diteur HTML comme style HTML de sorte que les
&eacute;l&eacute;ments interactifs, notamment les boutons et les survols, fonctionnent correctement apr&egrave;s leur importation dans
votre &eacute;diteur HTML.
5 Cliquez sur OK.
6 Dans le menu contextuel HTML, s&eacute;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&eacute;par&eacute;, s&eacute;lectionnez la commande Importer les images dans des sous-
dossiers. Vous pouvez s&eacute;lectionner un dossier sp&eacute;cifique ou le dossier Images par d&eacute;faut de Fireworks.
9 Si vous exportez un document Fireworks de plusieurs pages, d&eacute;sactivez la case Page active uniquement de mani&egrave;re
&agrave; exporter toutes les pages dans des documents HTML distincts.
10 Cliquez sur Enregistrer.
Une fois export&eacute;s, les fichiers Fireworks s’affichent sur votre disque dur. Des images et un fichier HTML sont
g&eacute;n&eacute;r&eacute;s &agrave; l’emplacement sp&eacute;cifi&eacute; dans la bo&icirc;te de dialogue Exporter.
Copie de code HTML dans le Presse-papiers
Il existe deux mani&egrave;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&icirc;te de dialogue Exporter, s&eacute;lectionner l’option Copier dans le Pressepapiers. Vous pouvez ensuite coller ce code HTML dans un document ouvert dans votre &eacute;diteur HTML pr&eacute;f&eacute;r&eacute;.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 259
Optimisation et exportation
Pour d&eacute;cider de la m&eacute;thode &agrave; utiliser pour int&eacute;grer du code HTML Fireworks dans d’autres applications, prenez en
compte les inconv&eacute;nients suivants, cons&eacute;cutifs &agrave; 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&ecirc;me dossier que
le fichier HTML dans lequel vous collez le code HTML copi&eacute;, sauf si vous copiez le code HTML dans Dreamweaver.
• Les liens ou chemins utilis&eacute;s dans les menus contextuels Fireworks sont mapp&eacute;s au disque dur, sauf si vous copiez
le code HTML dans Dreamweaver.
• Si vous utilisez un &eacute;diteur HTML autre que Dreamweaver ou Microsoft FrontPage, le code JavaScript associ&eacute; aux
boutons, comportements et images survol&eacute;es est copi&eacute; mais ne fonctionne pas correctement.
Si vous rencontrez ce probl&egrave;me, s&eacute;lectionnez l’option Exporter le fichier HTML &agrave; la place de l’option Copier dans
le Presse-papiers.
Remarque : avant de copier le code HTML, assurez-vous que vous avez s&eacute;lectionn&eacute; le style HTML appropri&eacute; et
l’option Inclure les commentaires HTML dans l’onglet G&eacute;n&eacute;ral de la bo&icirc;te de dialogue Configuration HTML.
Copie de code HTML Fireworks &agrave; l’aide de l’option Copier le code HTML
1 Choisissez Edition &gt; Copier le code HTML.
2 Suivez les &eacute;tapes propos&eacute;es par l’assistant. Lorsque vous y &ecirc;tes invit&eacute;, indiquez un dossier de destination des images
export&eacute;es. Ce dossier doit &ecirc;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&ecirc;me site Dreamweaver que le fichier HTML dans lequel vous allez coller
le code.
Copie de code HTML Fireworks &agrave; l’aide de la bo&icirc;te de dialogue Exporter
1 Choisissez Fichier &gt; Exporter.
2 Dans la bo&icirc;te de dialogue Exporter, sp&eacute;cifiez un dossier de destination pour les images export&eacute;es. Ce dossier doit
&ecirc;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&ecirc;me site Dreamweaver que le fichier HTML dans lequel vous allez coller
le code.
3 Dans le menu contextuel Exporter, s&eacute;lectionnez Documents HTML et Images.
4 Dans le menu contextuel HTML, s&eacute;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&eacute;lectionnez votre &eacute;diteur HTML dans la bo&icirc;te de dialogue Configuration HTML,
puis cliquez sur OK.
7 Cliquez sur Enregistrer.
Collage de code HTML copi&eacute; depuis Fireworks dans un document HTML
1 Dans votre &eacute;diteur HTML, ouvrez un document HTML existant ou cr&eacute;ez-en un nouveau. Enregistrez le document
dans le m&ecirc;me dossier que celui des images export&eacute;es.
Remarque : si vous utilisez Dreamweaver, vous n’&ecirc;tes pas tenu d’enregistrer le fichier HTML dans le m&ecirc;me dossier
que celui des images export&eacute;es. D&egrave;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&eacute;sout les chemins vers les images
associ&eacute;es.
2 Affichez le code HTML, puis placez le point d’insertion entre les balises &lt;BODY&gt;.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 260
Optimisation et exportation
Remarque : le code HTML copi&eacute; &agrave; partir de Fireworks ne contient pas les balises d’ouverture et de fermeture &lt;HTML&gt;
et &lt;BODY&gt;.
3 Collez le code HTML.
Si possible, lorsque vous effectuez une copie dans le Presse-papiers, exportez les images &agrave; 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&eacute;plac&eacute;s.
Copie de code depuis un fichier Fireworks export&eacute; et collage dans un autre document HTML
1 Dans l’&eacute;diteur HTML, ouvrez le fichier HTML Fireworks que vous avez export&eacute;.
2 S&eacute;lectionnez le code souhait&eacute;, puis copiez-le dans le Presse-papiers.
3 Ouvrez un document HTML existant ou cr&eacute;ez-en un nouveau.
4 Collez le code dans le nouveau fichier HTML. Il n’est pas n&eacute;cessaire de copier les balises &lt;HTML&gt; et &lt;BODY&gt;, qui
doivent normalement d&eacute;j&agrave; figurer dans le document HTML de destination.
Si vous avez activ&eacute; l’option Inclure les commentaires HTML dans la bo&icirc;te de dialogue Configuration HTML de
Fireworks, suivez les instructions fournies dans les commentaires pour copier/coller le code &agrave; l’emplacement
appropri&eacute;.
5 Si votre document Fireworks contient des &eacute;l&eacute;ments interactifs, copiez le code JavaScript.
Le code JavaScript est entour&eacute; des balises &lt;SCRIPT&gt; et situ&eacute; dans la section &lt;HEAD&gt; du document. Copiez et collez
l’int&eacute;gralit&eacute; de la section &lt;SCRIPT&gt;, sauf si le document de destination contient d&eacute;j&agrave; une section &lt;SCRIPT&gt;. Dans
ce cas, il vous suffit de copier le contenu de la section &lt;SCRIPT&gt; dans la section &lt;SCRIPT&gt; existante en veillant &agrave; ne
pas &eacute;craser les donn&eacute;es de cette derni&egrave;re. V&eacute;rifiez &eacute;galement qu’aucune fonction JavaScript n’est dupliqu&eacute;e dans la
section &lt;SCRIPT&gt; une fois que vous avez copi&eacute; le code.
Mise &agrave; jour de code HTML export&eacute;
La mise &agrave; jour vous permet de modifier un document HTML Fireworks d&eacute;j&agrave; export&eacute;, en particulier si vous souhaitez
actualiser uniquement une partie d’un document.
Remarque : la mise &agrave; jour du code HTML ne s’effectue pas de la m&ecirc;me mani&egrave;re dans les documents Dreamweaver et les
autres documents HTML. Pour plus d’informations, reportez-vous &agrave; la section &laquo; Utilisation de Dreamweaver &raquo; &agrave; la
page 266.
Lorsque vous effectuez une mise &agrave; jour, vous pouvez choisir de remplacer uniquement les images modifi&eacute;es ou
l’int&eacute;gralit&eacute; du code et des images. Si vous choisissez de remplacer uniquement les images modifi&eacute;es, toutes les
modifications apport&eacute;es au fichier HTML en dehors de Fireworks seront conserv&eacute;es.
Remarque : si vous souhaitez apporter d’importantes modifications &agrave; la pr&eacute;sentation du document, effectuez-les dans
Fireworks, puis r&eacute;exportez le fichier HTML.
1 S&eacute;lectionnez la commande Fichier &gt; Mettre &agrave; jour le code HTML.
2 S&eacute;lectionnez le fichier &agrave; mettre &agrave; jour.
3 Cliquez sur le bouton Ouvrir.
4 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Si aucun code HTML g&eacute;n&eacute;r&eacute; par Fireworks n’est trouv&eacute;, cliquez sur OK pour ins&eacute;rer le nouveau code HTML &agrave;
la fin du document.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 261
Optimisation et exportation
• Par contre, si un code HTML g&eacute;n&eacute;r&eacute; par Fireworks est trouv&eacute;, s&eacute;lectionnez l’une des options suivantes, puis
cliquez sur OK :
Remplacer les images et leur code HTML Remplace le code HTML Fireworks pr&eacute;c&eacute;dent.
Mettre &agrave; jour les images uniquement Ecrase uniquement les images.
5 Lorsque la bo&icirc;te de dialogue S&eacute;lectionnez le dossier Images s’affiche, s&eacute;lectionnez un dossier, puis cliquez
sur Ouvrir.
Exportation de calques CSS
Les calques CSS peuvent se chevaucher et &ecirc;tre empil&eacute;s les uns sur les autres. Sous Fireworks, les sorties en code HTML
normal ne se chevauchent pas.
1 Choisissez Fichier &gt; Exporter.
2 Entrez un nom de fichier, puis s&eacute;lectionnez un dossier de destination.
3 Dans le menu contextuel Exporter, s&eacute;lectionnez CSS et Images.
• Pour exporter l’&eacute;tat actif uniquement, s&eacute;lectionnez Etat actif uniquement.
• Pour exporter la page active uniquement, s&eacute;lectionnez Page active uniquement.
• Pour choisir le dossier devant recevoir les images, s&eacute;lectionnez Placer les images dans des sous-dossiers.
4 Pour d&eacute;finir les propri&eacute;t&eacute;s de la page HTML, cliquez sur Options.
5 Pour d&eacute;finir une image d’arri&egrave;re-plan et la faire appara&icirc;tre en mosa&iuml;que, cliquez sur Parcourir :
• Pour afficher l’image une seule fois, s&eacute;lectionnez Pas de r&eacute;p&eacute;tition.
• Pour r&eacute;p&eacute;ter, ou mettre en mosa&iuml;que, l’image &agrave; l’horizontale et la verticale, s&eacute;lectionnez R&eacute;p&eacute;tition.
• S&eacute;lectionnez R&eacute;p&eacute;ter-x pour former une mosa&iuml;que horizontale.
• Pour former une mosa&iuml;que verticale, s&eacute;lectionnez R&eacute;p&eacute;ter-y.
6 Dans le navigateur, s&eacute;lectionnez un alignement de page &agrave; gauche, au centre ou &agrave; 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&eacute;
descendante, ce qui signifie qu’il peut &ecirc;tre affich&eacute; dans la plupart des navigateurs Web actuels et lu par tous les
p&eacute;riph&eacute;riques affichant du contenu XML, tels que les assistants num&eacute;riques personnels, les t&eacute;l&eacute;phones portables et
autres p&eacute;riph&eacute;riques mobiles.
Fireworks peut &eacute;galement importer des fichiers XHTML (voir la section &laquo; Cr&eacute;ation de fichiers PNG Fireworks &agrave; partir
de fichiers HTML &raquo; &agrave; la page 8).
Pour plus d’informations sur le langage XHTML, consultez les sp&eacute;cifications XHTML du W3C (Web World Wide
Web Consortium) sur le site www.w3.org.
1 Choisissez Fichier &gt; Configuration HTML, s&eacute;lectionnez un style XHTML dans le menu contextuel Style HTML de
l’onglet G&eacute;n&eacute;ral, puis cliquez sur OK.
2 Exportez le document en utilisant l’une des m&eacute;thodes d’exportation ou de copie de code HTML disponibles (voir
la section &laquo; Exportation de code HTML &raquo; &agrave; la page 257).
Remarque : Fireworks utilise le codage UTF-8 lorsque vous exportez un document vers XHTML.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 262
Optimisation et exportation
Exportation de fichiers avec ou sans codage UTF-8
Le proc&eacute;d&eacute; de codage de texte UTF-8 (Universal Character Set Transformation Format-8) permet aux
navigateurs Web d’afficher diff&eacute;rents jeux de caract&egrave;res nationaux (texte chinois ou anglais, par exemple) sur une
m&ecirc;me page HTML. Le codage UTF-8 est activ&eacute; par d&eacute;faut.
Fireworks peut &eacute;galement importer des documents utilisant le codage UTF-8 (voir la section &laquo; Cr&eacute;ation de fichiers
PNG Fireworks &agrave; partir de fichiers HTML &raquo; &agrave; la page 8).
Exportation de documents sans codage UTF-8
1 Choisissez Fichier &gt; Configuration HTML.
2 Sous l’onglet Propre au document, d&eacute;sactivez la case Utiliser le codage UTF-8, puis cliquez sur OK.
3 Exportez le document en utilisant l’une des m&eacute;thodes d’exportation ou de copie de document HTML disponibles.
D&eacute;finition des options d’exportation de code HTML
La bo&icirc;te de dialogue Configuration HTML permet de d&eacute;finir le mode d’exportation du code HTML &agrave; partir de
Fireworks. Les modifications effectu&eacute;es dans l’onglet propre au document agissent uniquement sur le document actif.
Les param&egrave;tres G&eacute;n&eacute;ral et Table sont des pr&eacute;f&eacute;rences globales qui affectent tous les nouveaux documents.
1 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Choisissez Fichier &gt; Configuration HTML.
• Cliquez sur le bouton Options de la bo&icirc;te de dialogue Exporter.
2 Dans l’onglet G&eacute;n&eacute;ral, s&eacute;lectionnez les options souhait&eacute;es.
Style HTML S&eacute;lectionnez le style du code HTML export&eacute;.
Le code HTML G&eacute;n&eacute;rique est compatible avec tous les &eacute;diteurs HTML. Cependant, si le document contient des
comportements ou des contenus interactifs, s&eacute;lectionnez un &eacute;diteur sp&eacute;cifique s’il est r&eacute;pertori&eacute; dans la liste.
Pour exporter un document en appliquant le standard XHTML, s&eacute;lectionnez le style XHTML appropri&eacute; dans le
menu contextuel.
Extension Dans le menu contextuel , s&eacute;lectionnez un nom d’extension de fichier ou entrez l’extension de votre
choix.
Inclure les commentaires HTML S&eacute;lectionnez cette option pour inclure des commentaires sur les endroits o&ugrave;
copier et coller dans le code HTML. Elle est recommand&eacute;e si le document contient des &eacute;l&eacute;ments interactifs tels que
des boutons, des comportements ou des images survol&eacute;es.
Nom de fichier en minuscules S&eacute;lectionnez cette option pour vous assurer que les noms du fichier HTML et des
fichiers d’image associ&eacute;s sont compos&eacute;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 &eacute;t&eacute;
choisie dans le menu contextuel Extension.
Utiliser une feuille de style CSS pour les menus contextuels S&eacute;lectionnez cette option pour utiliser une feuille de
style CSS plut&ocirc;t que du code JavaScript pour le menu contextuel. Vous pouvez indexer les menus &agrave; l’aide de
Dreamweaver, ainsi que mettre &agrave; jour les liens dans le code.
Ecrire les feuilles de style CSS dans un fichier externe S&eacute;lectionnez cette option pour que le code CSS soit &eacute;crit
dans un fichier .css externe export&eacute; dans le m&ecirc;me emplacement que le fichier HTML. Le nom du fichier .css
correspond au nom du fichier HTML (&agrave; l’exception de l’extension du fichier). Activez cette option pour exporter
&eacute;galement un fichier nomm&eacute; mm_css_menu.js dans le m&ecirc;me emplacement que le fichier HTML.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 263
Optimisation et exportation
Remarque : cette option est disponible uniquement si vous avez s&eacute;lectionn&eacute; Utiliser une feuille de style CSS pour les
menus contextuels.
Cr&eacute;ateur de fichiers (Mac OS) S&eacute;lectionnez une application associ&eacute;e dans le menu contextuel. Lorsque vous cliquez
deux fois sur le fichier HTML export&eacute; sur votre disque dur, il s’ouvre automatiquement dans l’application sp&eacute;cifi&eacute;e.
3 Sous l’onglet Table, s&eacute;lectionnez les param&egrave;tres requis pour vos tables HTML. Pour plus d’informations, reportez-
vous &agrave; la section &laquo; D&eacute;finition du mode d’exportation des tables HTML &raquo; &agrave; la page 187.
4 Sous l’onglet Propre au document, s&eacute;lectionnez l’une des options suivantes :
Noms des fichiers de tranche Dans les menus contextuels correspondants, s&eacute;lectionnez une formule permettant de
nommer automatiquement les tranches. Vous pouvez utiliser les options par d&eacute;faut ou s&eacute;lectionner vos propres
options.
Important : si vous s&eacute;lectionnez Aucune pour l’un des trois premiers menus, Fireworks exporte des fichiers de tranche
qui s’&eacute;craseront mutuellement. Vous obtiendrez ainsi un seul graphique export&eacute; et un tableau affichant ce graphique
dans chaque cellule.
Balise ALT par d&eacute;faut Saisissez le texte qui doit appara&icirc;tre &agrave; la place de toutes les images pendant leur
t&eacute;l&eacute;chargement depuis le Web et &agrave; la place de toute image ne pouvant pas &ecirc;tre t&eacute;l&eacute;charg&eacute;e. Dans certains
navigateurs, ce texte peut &eacute;galement s’afficher sous forme d’info-bulle lorsque le pointeur survole l’image. Cette
fonction constitue &eacute;galement une aide pour les utilisateurs du Web malvoyants.
Exporter plusieurs fichiers HTML de la barre de navigation (&agrave; utiliser sans jeu d’images) S&eacute;lectionnez cette option
pour l’exportation d’une barre de navigation qui relie plusieurs pages entre elles. Fireworks exporte des pages
suppl&eacute;mentaires pour chaque bouton de la barre de navigation.
Inclure les zones sans tranches S&eacute;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&eacute;e par d&eacute;faut vous permet d’afficher des caract&egrave;res provenant de
plusieurs jeux de caract&egrave;res dans le document export&eacute;. Pour d&eacute;sactiver cette option, d&eacute;cochez la case.
5 Pour enregistrer ces param&egrave;tres comme param&egrave;tres par d&eacute;faut globaux, cliquez sur Param&egrave;tres par d&eacute;faut.
Exportation de fichiers Adobe PDF
Lorsque vous voulez imprimer une cr&eacute;ation Fireworks ou l’envoyer en r&eacute;vision, exportez-la au format de fichier
Adobe PDF. Les r&eacute;viseurs peuvent ajouter des commentaires, r&eacute;pondre &agrave; d’autres commentaires dans Adobe Reader&reg;
ou Acrobat&reg;. Pour plus d’informations sur la mise en place d’un processus de r&eacute;vision au format PDF, consultez
l’aide Acrobat.
Les fichiers PDF export&eacute;s conservent toutes les pages et leurs liens hypertextes. Les r&eacute;viseurs peuvent donc naviguer
comme ils le feraient sur le Web. Contrairement aux prototypes HTML, les documents Adobe PDF proposent
cependant des param&egrave;tres de s&eacute;curit&eacute; pour emp&ecirc;cher les r&eacute;viseurs de modifier ou de copier vos cr&eacute;ations.
1 Choisissez la commande Fichier &gt; Exporter.
2 Dans le menu contextuel Exporter, choisissez Adobe PDF.
3 Choisissez les pages &agrave; exporter et s&eacute;lectionnez Afficher le PDF apr&egrave;s exportation pour ouvrir automatiquement le
PDF dans Adobe Reader ou Acrobat.
4 Pour personnaliser le document PDF, cliquez sur Options, puis d&eacute;finissez les param&egrave;tres suivants :
Compatibilit&eacute; D&eacute;termine les applications Adobe PDF pouvant ouvrir le fichier export&eacute;.
Compression D&eacute;termine le type de compression des images utilis&eacute; pour r&eacute;duire la taille de fichier. En g&eacute;n&eacute;ral, les
compressions de type JPEG et JPEG2000 sont pr&eacute;f&eacute;rables pour les images telles que des photographies comportant
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 264
Optimisation et exportation
des transitions progressives d’une couleur &agrave; l’autre. La compression ZIP est id&eacute;ale pour les illustrations qui
comprennent des portions &eacute;tendues de couleurs en aplat (pleines et unies).
Qualit&eacute; Pour les compressions de type JPEG et JPEG2000, propose des param&egrave;tres de qualit&eacute; d’image. Si vous
s&eacute;lectionnez Qualit&eacute; sup&eacute;rieure, vous obtenez un fichier volumineux dont la qualit&eacute; d’image est bonne.
Convertir en niveaux de gris Convertit toutes les images en niveaux de gris tout en r&eacute;duisant la taille du fichier.
Activer la s&eacute;lection de texte Permet aux r&eacute;viseurs de copier le texte &agrave; partir du fichier export&eacute;. D&eacute;s&eacute;lectionnez cette
option pour r&eacute;duire la taille du fichier.
Valeur de fond perdu D&eacute;termine la largeur en pixels de la bordure blanche qui d&eacute;limite l’image sur chaque page.
Une valeur &eacute;gale &agrave; 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&eacute;.
Utiliser un mot de passe pour restreindre les t&acirc;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&icirc;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&eacute;sentent des zones de travail transparentes, les objets auxquels
des transparences ont &eacute;t&eacute; appliqu&eacute;es perdent ces caract&eacute;ristiques lorsque vous exportez le document au format PDF.
Pour &eacute;viter cela, d&eacute;finissez un arri&egrave;re-plan non transparent pour la zone de travail avant l’exportation au
format PDF.
Affichage des fichiers PDF (recommand&eacute;)
Lorsque vous consultez les fichiers PDF export&eacute;s dans Adobe Acrobat ou Adobe Reader, appliquez les param&egrave;tres
suivants :
1 Dans Adobe Acrobat ou Adobe Reader s&eacute;lectionnez Edition &gt; Pr&eacute;f&eacute;rences.
2 S&eacute;lectionnez Affichage de page dans le volet gauche.
3 D&eacute;finissez R&eacute;solution personnalis&eacute;e sur 72 pixels par pouce.
4 R&eacute;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
&lt;nom_fichier.assets&gt; est cr&eacute;&eacute;. Ce dossier contient les images bitmap associ&eacute;es au fichier.
L’importation &eacute;choue si ces fichiers associ&eacute;s sont supprim&eacute;s, en tout ou en partie, du dossier.
Remarque : Les &eacute;l&eacute;ments, filtres, modes de fusion, d&eacute;grad&eacute;s et masques qui ne sont pas associ&eacute;s &agrave; une balise de mappage
sont export&eacute;s en tant que graphiques bitmap.
1 S&eacute;lectionnez Fichier &gt; Exporter et acc&eacute;dez &agrave; l’emplacement auquel enregistrer les fichiers.
2 Attribuez un nom au fichier FXG.
3 Dans la bo&icirc;te de dialogue Exporter, s&eacute;lectionnez FXG et images dans le menu Exporter.
4 Cliquez sur Enregistrer.
Remarque : Les objets qui s'&eacute;tendent en dehors de la zone de travail de Fireworks s'affichent compl&egrave;tement lorsque le
fichier FXG export&eacute; est ouvert dans Flash Catalyst.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 265
Optimisation et exportation
Envoi d’un document Fireworks comme pi&egrave;ce jointe
d’un message &eacute;lectronique
Vous pouvez envoyer un fichier au format PNG Fireworks, JPEG compress&eacute; ou autre en utilisant les param&egrave;tres
d’optimisation disponibles dans le panneau Optimisation.
1 Choisissez Fichier &gt; Joindre au message &eacute;lectronique.
2 S&eacute;lectionnez l’une des options suivantes :
PNG Fireworks Joint le document PNG actif &agrave; un nouveau message &eacute;lectronique.
JPG compress&eacute; Joint le document actif &agrave; un nouveau message &eacute;lectronique en lui appliquant le param&egrave;tre
d’optimisation JPEG – Qualit&eacute; sup&eacute;rieure.
Utiliser les param&egrave;tres d’exportation Joint le document actif &agrave; un message &eacute;lectronique en lui appliquant les
param&egrave;tres d&eacute;finis dans le panneau Optimisation.
Remarque : Mozilla, Netscape 6 et Nisus Emailer ne sont pas pris en charge par le syst&egrave;me Macintosh.
Derni&egrave;re mise &agrave; jour le 29/4/2010
Chapitre 18 : Utilisation de Fireworks avec
d’autres applications
Qu’il s’agisse de cr&eacute;er un contenu Web ou multim&eacute;dia, Adobe&reg; Fireworks&reg; est un &eacute;l&eacute;ment essentiel de la palette d’outils
du concepteur. Fireworks fonctionne parfaitement avec d’autres applications et offre une multitude de fonctions
d’int&eacute;gration qui rationalisent le processus de conception.
Fireworks s’int&egrave;gre facilement et efficacement &agrave; d’autres produits Adobe comme Adobe Photoshop&reg; et
Adobe GoLive&reg;. Par exemple, vous pouvez importer et exporter tr&egrave;s simplement des graphiques Photoshop en tant que
fichiers modifiables ou cr&eacute;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&eacute;veloppeurs.
Utilisation de Dreamweaver
Adobe Dreamweaver&reg; et Fireworks reconnaissent et partagent un grand nombre de modifications possibles dans un
m&ecirc;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&eacute; pour l’&eacute;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&eacute;rez les fichiers JPEG de Fireworks dans Dreamweaver, la qualit&eacute; du fichier est calcul&eacute;e de fa&ccedil;on
automatique. La valeur peut &ecirc;tre de 79 pour certains fichiers.
Remarque : avant d’utiliser l’une de ces proc&eacute;dures, assurez-vous que Dreamweaver est s&eacute;lectionn&eacute; comme type HTML
dans la bo&icirc;te de dialogue Configuration HTML.
Insertion d’images Fireworks dans Dreamweaver &agrave; l’aide du panneau Fichiers
1 Exportez votre image depuis Fireworks vers le dossier du site local d&eacute;fini dans Dreamweaver.
2 Ouvrez le document Dreamweaver, et assurez-vous qu’il est en mode Cr&eacute;ation.
3 Faites glisser l’image du panneau Fichiers vers le document Dreamweaver.
Insertion d’images Fireworks dans Dreamweaver &agrave; l’aide du menu Insertion
1 Placez le point d’insertion &agrave; l’endroit o&ugrave; vous voulez ins&eacute;rer l’image dans la fen&ecirc;tre de document de Dreamweaver.
2 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Choisissez Insertion &gt; Image.
• Cliquez sur le bouton Images: Image dans la cat&eacute;gorie Commun de la barre d’insertion.
3 Acc&eacute;dez &agrave; l’image export&eacute;e depuis Fireworks, puis cliquez sur OK.
266
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 267
Utilisation de Fireworks avec d’autres applications
Cr&eacute;ation de fichiers Fireworks &agrave; partir d’espaces r&eacute;serv&eacute;s Dreamweaver
Les espaces r&eacute;serv&eacute;s aux images vous permettent de tester diff&eacute;rentes mises en page Web avant de cr&eacute;er l’illustration
d&eacute;finitive destin&eacute;e &agrave; votre page. Utilisez-les pour sp&eacute;cifier la taille et la position des images Fireworks que vous aurez
&agrave; placer dans Dreamweaver.
Lorsque vous cr&eacute;ez une image Fireworks &agrave; partir d’un espace r&eacute;serv&eacute; pour l’image Dreamweaver, un document
Fireworks est cr&eacute;&eacute; avec une zone de travail ayant les dimensions de l’espace r&eacute;serv&eacute; s&eacute;lectionn&eacute;.
Remarque : tous les comportements appliqu&eacute;s dans Fireworks sont conserv&eacute;s lors de l’exportation vers Dreamweaver. De
m&ecirc;me, la plupart des comportements Dreamweaver appliqu&eacute;s aux espaces r&eacute;serv&eacute;s pour les images sont &eacute;galement
conserv&eacute;s lorsque vous les lancez et les modifiez dans Fireworks. Il existe cependant une exception : les survols s&eacute;par&eacute;s
appliqu&eacute;s aux espaces r&eacute;serv&eacute;s pour les images dans Dreamweaver ne sont pas conserv&eacute;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&eacute;&eacute; remplace l’espace r&eacute;serv&eacute; pour l’image initialement s&eacute;lectionn&eacute;.
1 Dans Dreamweaver, enregistrez le document HTML souhait&eacute; dans un emplacement du dossier de site
Dreamweaver.
2 Placez le point d’insertion &agrave; l’emplacement de votre choix dans le document, puis proc&eacute;dez de l’une des mani&egrave;res
suivantes :
• Choisissez Insertion &gt; Objets image &gt; Espace r&eacute;serv&eacute; pour l’image.
• Cliquez sur le menu contextuel Images : Image dans la cat&eacute;gorie Commun de la barre Ins&eacute;rer, puis s&eacute;lectionnez
Espace r&eacute;serv&eacute; pour l’image.
3 Entrez le nom, les dimensions, la couleur et le texte secondaire de l’espace r&eacute;serv&eacute; pour l’image.
Un espace r&eacute;serv&eacute; pour l’image est ins&eacute;r&eacute; dans le document Dreamweaver.
4 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
• S&eacute;lectionnez l’espace r&eacute;serv&eacute; pour l’image, puis cliquez sur Cr&eacute;er dans l’inspecteur des propri&eacute;t&eacute;s.
• Tout en maintenant la touche Ctrl (Windows) ou Cmde (Mac OS) enfonc&eacute;e, cliquez deux fois sur l’espace
r&eacute;serv&eacute; pour l’image.
• Cliquez avec le bouton droit de la souris (Windows) ou tout en maintenant la touche Ctrl enfonc&eacute;e (Mac OS),
puis cliquez sur Cr&eacute;ation d’image dans Fireworks.
Fireworks s’ouvre avec un document vide exactement de la m&ecirc;me taille que l’espace r&eacute;serv&eacute; pour l’image. La
partie sup&eacute;rieure de la fen&ecirc;tre Document indique que vous modifiez une image transf&eacute;r&eacute;e depuis Dreamweaver.
5 Cr&eacute;ez une image dans Fireworks, puis cliquez sur Termin&eacute;.
6 Sp&eacute;cifiez un nom et un emplacement pour le fichier PNG source.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 268
Utilisation de Fireworks avec d’autres applications
7 Sp&eacute;cifiez un nom pour les fichiers d’image export&eacute;s.
Il s’agit des fichiers d’image qui s’affichent dans Dreamweaver.
8 Sp&eacute;cifiez un emplacement pour le ou les fichiers d’image export&eacute;s dans le dossier de site Dreamweaver, puis cliquez
sur Enregistrer.
Lorsque vous revenez dans Dreamweaver, l’espace r&eacute;serv&eacute; pour l’image initialement s&eacute;lectionn&eacute; est remplac&eacute; 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 &eacute;tapes. Dans Fireworks, exportez
directement des fichiers vers un dossier de site Dreamweaver. Cette op&eacute;ration g&eacute;n&egrave;re un fichier HTML et les fichiers
d’image associ&eacute;s dans l’emplacement que vous d&eacute;finissez. Placez ensuite le code HTML dans Dreamweaver &agrave; l’aide de
la fonction Ins&eacute;rer du HTML Fireworks.
1 Exportez le document Fireworks HTML au format HTML.
2 Dans Dreamweaver, enregistrez votre document dans un site d&eacute;fini.
3 Placez le point d’insertion dans le document, &agrave; l’endroit o&ugrave; vous voulez ins&eacute;rer le code HTML.
4 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Choisissez Insertion &gt; Objets image &gt; HTML Fireworks.
• Cliquez sur le menu contextuel Images : Image dans la cat&eacute;gorie Commun de la barre Ins&eacute;rer, puis s&eacute;lectionnez
HTML Fireworks.
5 Dans la bo&icirc;te de dialogue qui s’affiche, cliquez sur Parcourir pour s&eacute;lectionner le fichier HTML Fireworks souhait&eacute;.
6 (Facultatif) Cliquez sur Supprimer fichier apr&egrave;s insertion pour d&eacute;placer le fichier HTML vers la Corbeille
(Windows) ou le supprimer d&eacute;finitivement (Mac OS) une fois l’op&eacute;ration termin&eacute;e.
Cette option n’affecte pas le fichier source PNG associ&eacute; au fichier HTML.
7 Cliquez sur OK pour ins&eacute;rer le code HTML, avec les images, les tranches et le code JavaScript qui lui sont associ&eacute;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&eacute;
au document Fireworks est copi&eacute; dans le document Dreamweaver, les images sont export&eacute;es vers un emplacement
sp&eacute;cifi&eacute;, et Dreamweaver met &agrave; jour le code HTML avec des liens relatifs au document vers ces images.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 269
Utilisation de Fireworks avec d’autres applications
Remarque : cette m&eacute;thode ne fonctionne qu’avec Dreamweaver. Elle ne fonctionne pas avec les autres &eacute;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&eacute; puis copier et coller les sections
appropri&eacute;es dans un autre document Dreamweaver.
Mise &agrave; jour du code HTML Fireworks export&eacute; dans Dreamweaver
Roundtrip HTML pr&eacute;sente de nombreux avantages si vous utilisez du code HTML export&eacute; dans Dreamweaver (voir
la section &laquo; A propos de Roundtrip HTML &raquo; &agrave; la page 270).
1 Modifiez le document PNG dans Fireworks.
2 S&eacute;lectionnez la commande Fichier &gt; Mettre &agrave; jour le code HTML.
3 Recherchez le fichier Dreamweaver contenant le code HTML &agrave; mettre &agrave; jour, puis cliquez sur Ouvrir.
4 Acc&eacute;dez au dossier de destination des fichiers d’image mis &agrave; jour, puis cliquez sur Ouvrir.
Fireworks met &agrave; jour le code HTML et JavaScript dans le document Dreamweaver. Fireworks exporte &eacute;galement
les images mises &agrave; jour associ&eacute;es au code HTML et les place dans le dossier de destination indiqu&eacute;.
Remarque : si Fireworks ne trouve pas de code HTML correspondant &agrave; mettre &agrave; jour, vous pouvez ins&eacute;rer du nouveau
code HTML dans le document Dreamweaver. La section JavaScript du nouveau code est plac&eacute;e au d&eacute;but du
document, et le tableau HTML ou le lien vers l’image est ins&eacute;r&eacute; &agrave; la fin.
Exportation de fichiers Fireworks vers des biblioth&egrave;ques Dreamweaver
Un &eacute;l&eacute;ment de biblioth&egrave;que est une portion de fichier HTML situ&eacute;e dans un dossier intitul&eacute; Biblioth&egrave;que au sein du
dossier racine de votre site. Les &eacute;l&eacute;ments de biblioth&egrave;que s’affichent sous forme de cat&eacute;gorie dans le panneau Actifs
de Dreamweaver. Dans Dreamweaver, les &eacute;l&eacute;ments de biblioth&egrave;que simplifient les processus de modification et de
mise &agrave; jour des composants de site Web fr&eacute;quemment utilis&eacute;s. Vous pouvez faire glisser un &eacute;l&eacute;ment de biblioth&egrave;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 &eacute;l&eacute;ment de biblioth&egrave;que directement dans le document Dreamweaver. Vous ne
pouvez modifier que l’&eacute;l&eacute;ment de biblioth&egrave;que ma&icirc;tre. Ensuite, vous pouvez utiliser Dreamweaver pour mettre &agrave; jour
toutes les copies de cet &eacute;l&eacute;ment dans l’ensemble de votre site Web. Les &eacute;l&eacute;ments de biblioth&egrave;que Dreamweaver
ressemblent &agrave; des symboles Fireworks ; les modifications apport&eacute;es au document de biblioth&egrave;que ma&icirc;tre (LBI) sont
r&eacute;percut&eacute;es dans toutes les instances de biblioth&egrave;que de l’ensemble du site.
Remarque : les &eacute;l&eacute;ments de biblioth&egrave;que Dreamweaver ne prennent pas en charge les menus contextuels.
1 Choisissez Fichier &gt; Exporter.
2 S&eacute;lectionnez Biblioth&egrave;que Dreamweaver dans le menu contextuel Exporter.
S&eacute;lectionnez ou cr&eacute;ez un dossier intitul&eacute; Biblioth&egrave;que dans votre site Dreamweaver comme emplacement des
fichiers. Le nom respecte la casse.
Remarque : Dreamweaver ne reconna&icirc;t pas le fichier export&eacute; comme &eacute;l&eacute;ment de biblioth&egrave;que s’il n’est pas enregistr&eacute;
dans le dossier Library.
3 Tapez un nom de fichier.
4 (Facultatif) Lorsque votre image comporte des tranches, s&eacute;lectionnez les options correspondantes.
5 S&eacute;lectionnez Placer les images dans des sous-dossiers pour choisir un dossier distinct pour recevoir les images &agrave;
enregistrer.
6 Cliquez sur Enregistrer.
Derni&egrave;re mise &agrave; 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&egrave;gre &eacute;troitement &agrave; Fireworks et &agrave; Dreamweaver. Elle permet d’effectuer des
modifications dans une application et de les conserver dans une autre.
A propos de Roundtrip HTML
Fireworks reconna&icirc;t et conserve la plupart des types de modifications apport&eacute;es &agrave; un document dans Dreamweaver
(liens modifi&eacute;s, cartes-images modifi&eacute;es, texte et code HTML modifi&eacute;s dans des tranches HTML et comportements
partag&eacute;s entre Fireworks et Dreamweaver). L’inspecteur des propri&eacute;t&eacute;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&eacute;s &agrave; la structure d’un tableau dans Dreamweaver peuvent cr&eacute;er des diff&eacute;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’&eacute;dition d’images &eacute;l&eacute;mentaires
permettant de retoucher les images sans avoir recours &agrave; 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&eacute;e dans Dreamweaver
Remarque : avant de modifier des graphiques Fireworks dans Dreamweaver, vous devez au pr&eacute;alable ex&eacute;cuter quelques
t&acirc;ches. Pour plus d’informations, reportez-vous &agrave; la section &laquo; D&eacute;finition des options de lancement et de modification &raquo; &agrave;
la page 272.
1 Dans Dreamweaver, choisissez Fen&ecirc;tre &gt; Propri&eacute;t&eacute;s pour ouvrir l’inspecteur des propri&eacute;t&eacute;s.
2 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
• S&eacute;lectionnez l’image souhait&eacute;e. (L’inspecteur des propri&eacute;t&eacute;s identifie la s&eacute;lection comme &eacute;tant une image
Fireworks et affiche le nom du fichier source PNG associ&eacute; &agrave; cette image.) Dans l’inspecteur des propri&eacute;t&eacute;s,
cliquez ensuite sur Modifier.
• Tout en maintenant la touche Ctrl (Windows) ou Cmde (Mac OS) enfonc&eacute;e, cliquez deux fois sur l’image &agrave;
modifier.
• Cliquez avec le bouton droit (Windows) ou en maintenant la touche Ctrl enfonc&eacute;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&eacute;sirez que le fichier source Fireworks de l’image plac&eacute;e soit
ouvert.
4 Modifiez l’image dans Fireworks.
Les modifications appliqu&eacute;es sont conserv&eacute;es dans Dreamweaver.
5 Cliquez sur Termin&eacute; pour exporter l’image avec les param&egrave;tres d’optimisation actuels, mettre &agrave; jour le fichier GIF
ou JPEG utilis&eacute; par Dreamweaver et enregistrer le fichier source PNG si un fichier source a &eacute;t&eacute; s&eacute;lectionn&eacute;.
Remarque : lorsque vous ouvrez une image depuis le panneau Site de Dreamweaver, l’&eacute;diteur par d&eacute;faut
correspondant &agrave; ce type d’image ouvre le fichier. Cet &eacute;diteur est d&eacute;fini dans les pr&eacute;f&eacute;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&eacute;gration de Fireworks, ouvrez les images dans la fen&ecirc;tre Document de Dreamweaver.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 271
Utilisation de Fireworks avec d’autres applications
Modification d’un tableau Fireworks plac&eacute; dans Dreamweaver
Remarque : avant de modifier des tableaux Fireworks dans Dreamweaver, vous devez au pr&eacute;alable ex&eacute;cuter quelques
t&acirc;ches de lancement et de modification. Pour plus d’informations, reportez-vous &agrave; la section &laquo; D&eacute;finition des options de
lancement et de modification &raquo; &agrave; la page 272.
1 Dans Dreamweaver, choisissez Fen&ecirc;tre &gt; Propri&eacute;t&eacute;s pour ouvrir l’inspecteur des propri&eacute;t&eacute;s.
2 Proc&eacute;dez de l’une des mani&egrave;res suivantes pour ouvrir le fichier PNG source dans la fen&ecirc;tre de document :
• Cliquez dans le tableau, puis sur la balise TABLE dans la barre d’&eacute;tat afin de s&eacute;lectionner l’ensemble du tableau.
(L’inspecteur des propri&eacute;t&eacute;s identifie la s&eacute;lection comme &eacute;tant un tableau Fireworks et affiche le nom du fichier
source PNG associ&eacute; &agrave; ce tableau.) Dans l’inspecteur des propri&eacute;t&eacute;s, cliquez ensuite sur Modifier.
• S&eacute;lectionnez une image dans le tableau, puis cliquez sur Modifier dans l’inspecteur des propri&eacute;t&eacute;s.
• Cliquez avec le bouton droit de la souris (Windows) ou tout en maintenant la touche Ctrl enfonc&eacute;e (Mac OS)
sur l’image, puis, dans le menu contextuel, cliquez sur Modifier avec Fireworks.
3 Apportez les modifications dans Fireworks.
Dreamweaver reconna&icirc;t et conserve toutes les modifications apport&eacute;es au tableau dans Fireworks.
4 Une fois le tableau modifi&eacute;, cliquez sur Termin&eacute; dans la fen&ecirc;tre de document.
Cette op&eacute;ration exporte les fichiers HTML et des tranches d’images du tableau en utilisant les param&egrave;tres
d’optimisation en cours, met &agrave; jour le tableau plac&eacute; 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&eacute;n&eacute;r&eacute; par Fireworks, puis essayez de le modifier &agrave; 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&eacute;coup&eacute; est ins&eacute;r&eacute; dans un document Dreamweaver et qu’un comportement
Dreamweaver est appliqu&eacute;, une tranche se trouve sur le graphique lorsqu’il est ouvert et modifi&eacute; dans Fireworks. La
tranche n’est pas visible imm&eacute;diatement, car les tranches sont d&eacute;sactiv&eacute;es automatiquement lorsque vous ouvrez et
modifiez un graphique unique non d&eacute;coup&eacute; auquel vous appliquez des comportements Dreamweaver. Pour afficher
la tranche, activez sa visibilit&eacute; dans le calque Web du panneau Calques.
Dans Fireworks, lorsque vous affichez les propri&eacute;t&eacute;s d’une tranche &agrave; laquelle est associ&eacute; un comportement
Dreamweaver, la zone de texte Lien de l’inspecteur des propri&eacute;t&eacute;s peut afficher javascript:;. Vous pouvez
supprimer ce texte sans risques. Vous pouvez l’&eacute;craser pour entrer une URL si n&eacute;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&ocirc;t&eacute;
serveur, tels que CFM et PHP.
Dreamweaver prend en charge tous les comportements Fireworks, y compris ceux n&eacute;cessaires aux survols et aux
boutons.
Remarque : les &eacute;l&eacute;ments de biblioth&egrave;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&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 272
Utilisation de Fireworks avec d’autres applications
• D&eacute;finition du texte de la barre d’&eacute;tat
• D&eacute;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&ocirc;t&eacute; serveur.
Optimisation des images et animations Fireworks plac&eacute;es dans Dreamweaver
Modification des param&egrave;tres d’optimisation d’une image Fireworks plac&eacute;e dans
Dreamweaver
1 Dans Dreamweaver, s&eacute;lectionnez l’image, puis proc&eacute;dez de l’une ou des deux mani&egrave;res suivantes :
• S&eacute;lectionnez la commande Commandes &gt; Optimiser l’image.
• Cliquez sur le bouton Optimiser de l’inspecteur des propri&eacute;t&eacute;s.
• Cliquez avec le bouton droit de la souris (Windows) ou tout en maintenant la touche Ctrl enfonc&eacute;e (Mac OS),
puis, dans le menu contextuel, s&eacute;lectionnez Optimiser dans Fireworks.
2 Si un message vous y invite, indiquez si vous souhaitez ouvrir le fichier source Fireworks de l’image plac&eacute;e.
3 Apportez les modifications dans la bo&icirc;te de dialogue Aper&ccedil;u avant exportation :
• Pour modifier les param&egrave;tres d’optimisation, cliquez sur l’onglet Options.
• Pour modifier la taille et la zone de l’image export&eacute;e, cliquez sur l’onglet Fichier. Si vous changez les dimensions
de l’image dans Fireworks, vous devez red&eacute;finir la taille de l’image dans l’inspecteur des propri&eacute;t&eacute;s lorsque vous
revenez dans Dreamweaver.
• Pour modifier les param&egrave;tres d’animation de l’image, cliquez sur l’onglet Animation.
4 Une fois l’image modifi&eacute;e, cliquez sur OK pour exporter l’image, la mettre &agrave; jour dans Dreamweaver et enregistrer
le fichier PNG.
Si vous avez modifi&eacute; le format de l’image, le v&eacute;rificateur de liens de Dreamweaver vous invite &agrave; mettre &agrave; jour les
r&eacute;f&eacute;rences &agrave; cette image.
Modification des param&egrave;tres d’animation
Dans le cadre de l’ouverture et de l’optimisation d’un fichier GIF anim&eacute;, vous pouvez modifier les param&egrave;tres de
l’animation. Les options d’animation de la bo&icirc;te de dialogue Aper&ccedil;u avant exportation sont identiques &agrave; celles du
panneau Etats de Fireworks.
Remarque : pour modifier des &eacute;l&eacute;ments graphiques dans une animation Fireworks, vous devez ouvrir et modifier
l’animation Fireworks.
D&eacute;finition des options de lancement et de modification
Pour utiliser efficacement la fonction Roundtrip HTML, vous devez ex&eacute;cuter pr&eacute;alablement quelques t&acirc;ches,
notamment d&eacute;finir Fireworks comme &eacute;diteur d’images principal dans Dreamweaver, sp&eacute;cifier les pr&eacute;f&eacute;rences de
lancement et de modification dans Fireworks et d&eacute;finir un site local dans Dreamweaver.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 273
Utilisation de Fireworks avec d’autres applications
D&eacute;finition de Fireworks comme l’&eacute;diteur d’images externe principal pour Dreamweaver
Dans les pr&eacute;f&eacute;rences de Dreamweaver, il est possible d’indiquer les applications sp&eacute;cifiques qui doivent &ecirc;tre
automatiquement d&eacute;marr&eacute;es pour modifier des types de fichiers sp&eacute;cifiques. Pour utiliser les fonctions de lancement
et de modification de Fireworks, v&eacute;rifiez que Fireworks est bien d&eacute;sign&eacute; dans Dreamweaver comme &eacute;diteur principal
pour les fichiers GIF, JPEG et PNG.
Remarque : vous n’avez besoin de d&eacute;finir cette pr&eacute;f&eacute;rence que s’il vous est difficile de d&eacute;marrer Fireworks &agrave; partir
de Dreamweaver.
1 Dans Dreamweaver, choisissez Edition &gt; Pr&eacute;f&eacute;rences, puis s&eacute;lectionnez Types de fichiers/Editeurs.
2 Dans la liste Extensions, s&eacute;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&eacute;p&eacute;tez les &eacute;tapes 2 &agrave; 4 pour d&eacute;finir Fireworks comme &eacute;diteur principal pour les autres types de fichiers
d’image Web.
D&eacute;finition des pr&eacute;f&eacute;rences de lancement et de modification pour les fichiers sources
Fireworks
Les pr&eacute;f&eacute;rences de lancement et de modification Fireworks permettent de d&eacute;finir la mani&egrave;re dont les fichiers
sources PNG sont trait&eacute;s lorsque vous ouvrez des fichiers Fireworks depuis une autre application.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 274
Utilisation de Fireworks avec d’autres applications
Dreamweaver reconna&icirc;t les pr&eacute;f&eacute;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 &agrave; le sp&eacute;cifier.
1 Dans Fireworks, choisissez Edition &gt; Pr&eacute;f&eacute;rences (Windows) ou Fireworks &gt; Pr&eacute;f&eacute;rences (Mac OS).
2 Cliquez sur la cat&eacute;gorie Lancer et modifier, puis d&eacute;finissez les options comme vous le souhaitez.
Pour plus d’informations, reportez-vous &agrave; la section &laquo; Pr&eacute;f&eacute;rences de lancement et de modification &raquo; &agrave; la page 314.
A propos des Design Notes et des fichiers sources
Lorsque vous exportez vers un site Dreamweaver un fichier Fireworks &agrave; partir d’un fichier source PNG enregistr&eacute;,
Fireworks cr&eacute;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&eacute;sultats, enregistrez toujours votre fichier
source PNG Fireworks ainsi que les fichiers export&eacute;s dans un site Dreamweaver. Tout autre d&eacute;veloppeur du site est
ainsi en mesure de trouver le fichier source PNG lorsqu’il lance Fireworks &agrave; partir de Dreamweaver.
Transfert de fichiers de site &agrave; l’aide du bouton Gestion des fichiers
Le bouton Gestion des fichiers
, situ&eacute; dans la partie sup&eacute;rieure de la fen&ecirc;tre de document, permet d’acc&eacute;der
facilement aux commandes de transfert de fichier. Utilisez ce bouton si votre document r&eacute;side dans un dossier de site
Dreamweaver et si le site a acc&egrave;s &agrave; un serveur distant. Pour permettre &agrave; Fireworks de reconna&icirc;tre le dossier comme un
site, utilisez la bo&icirc;te de dialogue G&eacute;rer les sites de Dreamweaver pour d&eacute;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&eacute;rir Copie la version distante du fichier sur le site local en rempla&ccedil;ant le fichier local par la copie distante.
Extraire Extrait le fichier en rempla&ccedil;ant le fichier local par la copie distante.
Placer Copie la version locale du fichier sur le site distant en rempla&ccedil;ant le fichier distant par la copie locale.
Archiver Archive le fichier local en rempla&ccedil;ant le fichier distant par la copie locale.
Annuler l’extraction Annule l’extraction du fichier local et l’archive en rempla&ccedil;ant le fichier local par la copie distante.
Remarque : les commandes Gestion de fichiers sont activ&eacute;es dans Fireworks uniquement si votre document r&eacute;side dans
un dossier de site Dreamweaver pour lequel un serveur distant est d&eacute;fini. Vous pouvez les utiliser uniquement pour des
fichiers r&eacute;sidant sur des sites qui utilisent les m&eacute;thodes de transport Local/R&eacute;seau et FTP. Vous ne pouvez pas transf&eacute;rer
les fichiers des sites utilisant des m&eacute;thodes de transport SFTP ou tierces comme SourceSafe, WebDAV et RDS du site
distant vers Fireworks et inversement.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 275
Utilisation de Fireworks avec d’autres applications
Utilisation de HomeSite, GoLive et d’autres
&eacute;diteurs HTML
Fireworks et Adobe HomeSite&reg; ont en commun une int&eacute;gration puissante qui vous permet de lancer Fireworks depuis
HomeSite pour modifier des graphiques Web. Lorsque vous quittez Fireworks, les mises &agrave; jour que vous avez
apport&eacute;es sont automatiquement appliqu&eacute;es &agrave; l’image plac&eacute;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&eacute;es depuis Fireworks, vous pouvez les ins&eacute;rer dans un document HomeSite.
1 Dans HomeSite, enregistrez votre document (cette &eacute;tape est n&eacute;cessaire pour cr&eacute;er les chemins relatifs vers les
images).
2 Dans la fen&ecirc;tre Resources (Ressources), s&eacute;lectionnez l’image Fireworks que vous avez export&eacute;e.
3 Pour ins&eacute;rer l’image Fireworks dans votre document HomeSite, proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Faites glisser le fichier de la fen&ecirc;tre Resources (Ressources) vers l’emplacement s&eacute;lectionn&eacute; dans le code HTML,
sous l’onglet Edit (Modifier) de la fen&ecirc;tre de document.
• Dans l’onglet Edit (Modifier) de la fen&ecirc;tre de document, placez le point d’insertion &agrave; l’endroit o&ugrave; ins&eacute;rer l’image
Fireworks, cliquez ensuite avec le bouton droit de la souris sur le fichier dans la fen&ecirc;tre Resources (Ressources),
puis s&eacute;lectionnez l’option Insert as Link (Ins&eacute;rer comme lien).
Un lien vers l’image Fireworks est cr&eacute;&eacute; dans le code HTML. Cliquez sur l’onglet Parcourir pour afficher l’aper&ccedil;u
de l’image dans le document HomeSite.
Insertion de code HTML Fireworks dans HomeSite
Remarque : avant d’exporter, de copier ou de mettre &agrave; jour le code HTML Fireworks pour l’utiliser dans HomeSite,
s&eacute;lectionnez le type de code HTML G&eacute;n&eacute;rique dans la bo&icirc;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&eacute;n&egrave;re un fichier HTML et les fichiers d’image associ&eacute;s dans l’emplacement
que vous d&eacute;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&eacute; dans HomeSite en
s&eacute;lectionnant Fichier &gt; Ouvrir.
Copie de code HTML Fireworks dans le Presse-papiers pour l’utiliser dans HomeSite
Copiez le code HTML g&eacute;n&eacute;r&eacute; par Fireworks dans le Presse-papiers depuis Fireworks, puis collez ce code dans un
document HomeSite. Toutes les images requises sont export&eacute;es &agrave; l’emplacement que vous sp&eacute;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&eacute; et collage du code dans HomeSite
❖ Exportez un fichier HTML Fireworks, puis copiez et collez le code souhait&eacute; dans un document HomeSite existant.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 276
Utilisation de Fireworks avec d’autres applications
Mise &agrave; jour du code HTML Fireworks export&eacute; vers HomeSite
❖ Utilisez la commande Mettre &agrave; jour le code HTML dans Fireworks.
Modification d’images Fireworks dans HomeSite
1 Enregistrez votre document dans HomeSite.
2 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Cliquez avec le bouton droit de la souris sur le fichier d’image dans l’un des onglets Fichiers de la fen&ecirc;tre des
ressources.
• Cliquez avec le bouton droit de la souris sur l’onglet Vignettes de la fen&ecirc;tre R&eacute;sultat.
• Cliquez avec le bouton droit de la souris sur la balise img associ&eacute;e dans le code HTML affich&eacute; dans l’onglet Edit
(Modifier) de la fen&ecirc;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&eacute;j&agrave; ouvert.
4 Si un message vous y invite, indiquez si vous d&eacute;sirez rechercher le fichier source Fireworks de l’image plac&eacute;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&ecirc;tre de document indique que vous modifiez une image Fireworks depuis une autre application.
6 Une fois les modifications termin&eacute;es, cliquez sur Termin&eacute; dans la fen&ecirc;tre Document.
L’image mise &agrave; jour est r&eacute;export&eacute;e vers HomeSite, et le fichier source PNG est enregistr&eacute; si un fichier source a &eacute;t&eacute;
s&eacute;lectionn&eacute;.
Utilisation de HomeSite, GoLive et d’autres &eacute;diteurs HTML
Fireworks g&eacute;n&egrave;re un v&eacute;ritable fichier HTML lisible par tous les &eacute;diteurs HTML et pouvant recevoir un contenu HTML
import&eacute;. 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
&eacute;diteurs HTML. La seule exception r&eacute;side dans le fait que vous devez s&eacute;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&eacute;lectionnez le style HTML G&eacute;n&eacute;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-&eacute;tats Fireworks pour les utiliser dans Adobe Flash&reg;.
• Le texte TLF de Flash est copi&eacute; 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&eacute;ment des graphiques Fireworks dans Flash.
Lorsque vous utilisez Flash, les pr&eacute;f&eacute;rences de lancement et de modification d&eacute;finies dans Fireworks sont toujours
appliqu&eacute;es.
Derni&egrave;re mise &agrave; 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 &eacute;l&eacute;ments d’interactivit&eacute; ne sont pas import&eacute;s dans Flash.
Insertion de graphiques Fireworks dans Flash
Les proc&eacute;dures d’importation ou de copie de fichiers PNG Fireworks vous permettent de contr&ocirc;ler tr&egrave;s pr&eacute;cis&eacute;ment la
mani&egrave;re dont les graphiques et les animations sont ajout&eacute;es dans Flash. Vous pouvez &eacute;galement importer des
fichiers JPEG, GIF, PNG et SWF export&eacute;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&eacute;grad&eacute; de
contour de Fireworks dans un document Flash. En outre, Flash prend en charge uniquement les fonds unis, les fonds en
d&eacute;grad&eacute; et les contours &eacute;l&eacute;mentaires.
Importation de fichiers PNG Fireworks dans Flash
Vous pouvez importer des fichiers sources PNG Fireworks directement dans Flash sans avoir &agrave; exporter dans un autre
format graphique. Tous les objets vectoriels, objets bitmap, animations et boutons multi-&eacute;tats Fireworks peuvent &ecirc;tre
import&eacute;s dans Flash.
Remarque : les comportements de bouton Fireworks et autres types d’interactions ne sont pas import&eacute;s dans Flash car les
comportements Fireworks sont activ&eacute;s par du code JavaScript, externe au format de fichier. Flash utilise un code interne,
ActionScript.
1 Enregistrez le document dans Fireworks.
2 Acc&eacute;dez &agrave; un document ouvert dans Flash.
3 (Facultatif) Cliquez sur l’&eacute;tat cl&eacute; et le calque vers lequel vous voulez importer le contenu Fireworks.
4 Choisissez Fichier &gt; Importer.
5 Recherchez le fichier PNG, puis s&eacute;lectionnez-le.
6 Dans la bo&icirc;te de dialogue Importer un document Fireworks, proc&eacute;dez de l’une des mani&egrave;res suivantes :
• S&eacute;lectionnez l’option Importer sous la forme d’une image bitmap aplatie.
• Dans les deux menus contextuels, s&eacute;lectionnez une option d’importation.
7 S&eacute;lectionnez le mode d’importation du texte.
8 Cliquez sur OK.
Remarque : les options s&eacute;lectionn&eacute;es dans la bo&icirc;te de dialogue Importer un document Fireworks sont enregistr&eacute;es et
utilis&eacute;es comme param&egrave;tres par d&eacute;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 &eacute;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 &eacute;tat cl&eacute; est cr&eacute;&eacute; dans le nouveau calque &agrave; l’emplacement
de l’&eacute;tat actif, la premi&egrave;re page du fichier PNG &eacute;tant plac&eacute;e dans cet &eacute;tat sous forme de clip, et toutes les autres pages
plac&eacute;es dans les &eacute;tats suivants sous forme de clips (s&eacute;quences). La hi&eacute;rarchie des calques et des &eacute;tats au sein du
fichier PNG est pr&eacute;serv&eacute;e.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 278
Utilisation de Fireworks avec d’autres applications
Importer la page 1 dans l’&eacute;tat actif sous forme de clip Le contenu de la page s&eacute;lectionn&eacute;e est import&eacute; sous forme de
clip plac&eacute; dans l’&eacute;tat et le calque actifs du fichier Flash. La hi&eacute;rarchie des calques et des &eacute;tats au sein du fichier PNG est
pr&eacute;serv&eacute;e.
Importer toutes les pages dans de nouvelles s&eacute;quences sous forme de clips Importe toutes les pages du fichier PNG et
mappe chacune d’elles dans une nouvelle s&eacute;quence sous forme de clip. Les calques et les &eacute;tats au sein des pages sont
pr&eacute;serv&eacute;s. Si des s&eacute;quences existent d&eacute;j&agrave; dans le fichier Flash, la proc&eacute;dure d’importation ajoute les nouvelles
s&eacute;quences &agrave; la suite des s&eacute;quences existantes.
Importer la page 1 dans un nouveau calque La page s&eacute;lectionn&eacute;e est import&eacute;e sous forme de nouveau calque. Les &eacute;tats
sont import&eacute;s dans le sc&eacute;nario en tant qu’&eacute;tats distincts.
Options d’importation d’objets vectoriels
Importer au format bitmap pour pr&eacute;server l’apparence Permet de conserver le caract&egrave;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&eacute;s modifiables Permet de conserver le caract&egrave;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&eacute;t&eacute;s peuvent
se pr&eacute;senter diff&eacute;remment apr&egrave;s importation.
Options d’importation de texte
Importer au format bitmap pour pr&eacute;server l’apparence Permet de conserver le caract&egrave;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&eacute; en tant qu'image bitmap vierge dans Fireworks.
Rendre tout le texte modifiable Permet de conserver le caract&egrave;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&eacute;senter
diff&eacute;remment apr&egrave;s importation.
Copie ou glissement de graphiques Fireworks dans Flash
Pour copier des graphiques dans des versions de Flash ant&eacute;rieures &agrave; Flash 8, choisissez Edition &gt; Copier les contours
du trac&eacute;.
Remarque : il peut &ecirc;tre n&eacute;cessaire de cliquer sur Modification &gt; Dissocier pour dissocier les objets afin de les modifier
comme objets vectoriels individuels dans Flash.
1 Dans Fireworks, s&eacute;lectionnez les objets &agrave; copier.
2 Dans le menu contextuel de Flash, cliquez sur Edition &gt; Copier et choisissez Copier.
3 Dans Flash, cr&eacute;ez un document puis choisissez Edition &gt; Coller, ou faites glisser le fichier directement de Fireworks
dans Flash.
4 Dans la fen&ecirc;tre Importer un document Fireworks, s&eacute;lectionnez une option Dans :
Etats actifs sous forme de clip Le contenu coll&eacute; est import&eacute; sous forme de clip, celui-ci &eacute;tant plac&eacute; dans l’&eacute;tat et le
calque actifs du fichier Flash. La hi&eacute;rarchie des calques et des &eacute;tats au sein du fichier PNG est pr&eacute;serv&eacute;e.
Nouveau calque Le contenu coll&eacute; est import&eacute; sous forme de nouveau calque. Les &eacute;tats sont import&eacute;s dans le
sc&eacute;nario en tant qu’&eacute;tats distincts.
5 S&eacute;lectionnez le mode d’importation des objets vectoriels.
6 S&eacute;lectionnez le mode d’importation du texte.
Derni&egrave;re mise &agrave; 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&eacute;lectionn&eacute;es dans la bo&icirc;te de dialogue Importer un document Fireworks sont enregistr&eacute;es et
utilis&eacute;es comme param&egrave;tres par d&eacute;faut.
A propos de la structure de la biblioth&egrave;que Flash
Les objets Fireworks sont import&eacute;s dans un dossier d’objets Fireworks dans la biblioth&egrave;que Flash. La structure de ce
dossier se pr&eacute;sente comme suit :
Dossier du fichier 1 // Nomm&eacute; en fonction du nom du fichier Fireworks
• Dossier de la page 1 // Nomm&eacute; en fonction du nom de la page (s’il y en a plusieurs)
— Page 1 // Nomm&eacute;e en fonction du nom de la page
— — Dossier de l’&eacute;tat 1 // Nomm&eacute; en fonction du nom de l’&eacute;tat (s’il y en a plusieurs)
— — Etat 1 // Nomm&eacute; en fonction du nom de l’&eacute;tat
— — — Symbole 1 de l’&eacute;tat 1 // Nomm&eacute; en fonction du nom du symbole
— — — Symbole 2 de l’&eacute;tat 1
...
— Dossier des calques partag&eacute;s // Calques partag&eacute;s entre les &eacute;tats de la page 1
— — Dossier de calque partag&eacute; // Nomm&eacute; en fonction du calque partag&eacute;
— — Symbole du calque partag&eacute;
• Dossier de la page 2
— Page 2
— Symbole 1 de la page 2 (pour une page ne contenant aucun &eacute;tat)
...
• Dossier de gabarit
— Gabarit
— Symbole 1 du gabarit
...
— Dossier des calques partag&eacute;s // Calques partag&eacute;s entre les pages
— — Dossier de calque partag&eacute; // Nomm&eacute; en fonction du calque partag&eacute;
— — Symbole du calque partag&eacute;
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 &agrave; l’&eacute;chelle en 9 tranches, les quatre rep&egrave;res de d&eacute;coupe sont import&eacute;s et conserv&eacute;s
dans Flash. La mise &agrave; l’&eacute;chelle en 9 tranches n’est toutefois pas pr&eacute;serv&eacute;e pour les animations. Les symboles
import&eacute;s sont enregistr&eacute;s en tant que symboles dans la biblioth&egrave;que Flash.
• Les modifications logicielles appliqu&eacute;es aux symboles enrichis sont perdues. La copie ma&icirc;tresse (originale) du
symbole est import&eacute;e.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 280
Utilisation de Fireworks avec d’autres applications
• Les symboles graphiques enrichis sont stock&eacute;s sous la forme d’un fichier PNG et d’un fichier JSF. Seul le fichier
PNG est import&eacute;. Si le symbole est compos&eacute; de plusieurs trac&eacute;s, ceux-ci sont combin&eacute;s en un seul symbole.
• Pour b&eacute;n&eacute;ficier pleinement de la fonctionnalit&eacute; compl&egrave;te du symbole enrichi dans Flash, vous devez le remplacer
par la version Flash du symbole.
A propos de la pr&eacute;servation de la visibilit&eacute; et du verrouillage
Les objets et les calques masqu&eacute;s dans le fichier PNG sont import&eacute;s et restent masqu&eacute;s dans Flash. En revanche, les
parties invisibles d’un symbole graphique enrichi ne sont pas import&eacute;es (&eacute;tat Au-dessus ou Enfonc&eacute; d’un bouton, par
exemple).
Si un calque est verrouill&eacute; ou masqu&eacute;, tous les objets et sous-calques qui le composent h&eacute;ritent de cette caract&eacute;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&eacute;&eacute; pour la page enti&egrave;re,
et tous les objets sont affich&eacute;s. Dans ce cas, les attributs de visibilit&eacute; et de verrouillage ne sont pas conserv&eacute;s.
Effets de calques Photoshop pris en charge
Effet dynamique Photoshop - Ombre port&eacute;e L’effet est mapp&eacute; comme suit :
• taille est mapp&eacute; sur flouX, flouY
• distance est mapp&eacute; sur distance
• couleur est mapp&eacute; sur couleur
• angle est mapp&eacute; sur 180 - (angle d’effet Photoshop)
Effet dynamique Photoshop - Ombre interne L’effet est mapp&eacute; comme suit :
• taille est mapp&eacute; sur flouX, flouY
• distance est mapp&eacute; sur distance
• couleur est mapp&eacute; sur couleur
• angle est mapp&eacute; sur 180 - (angle d’effet Photoshop)
Effet dynamique Photoshop - Lueur externe L’effet est mapp&eacute; comme suit :
• opacit&eacute; est mapp&eacute; sur intensit&eacute;
• couleur est mapp&eacute; sur couleur
• taille est mapp&eacute; sur flouX, flouY
Effet dynamique Photoshop - Lueur interne L’effet est mapp&eacute; comme suit :
• opacit&eacute; est mapp&eacute; sur intensit&eacute;
• couleur est mapp&eacute; sur couleur
• taille est mapp&eacute; sur flouX, flouY
• Les objets comportant des effets de calque Photoshop autres que ceux indiqu&eacute;s ci-dessus sont pixellis&eacute;s.
Exportation de graphiques Fireworks dans d’autres formats &agrave; 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&egrave;re mise &agrave; 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&eacute;s depuis Fireworks sont
diff&eacute;rents des fichiers sources PNG que vous enregistrez dans Fireworks. Comme les fichiers GIF ou JPEG, les
fichiers PNG export&eacute;s contiennent uniquement des donn&eacute;es d’images, sans informations compl&eacute;mentaires relatives
aux tranches, calques, &eacute;l&eacute;ments d’interactivit&eacute;, 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 &ecirc;tre export&eacute;s sous forme de fichiers SWF Flash. Pour conserver
les param&egrave;tres d’&eacute;paisseur et de couleur du contour, s&eacute;lectionnez Conserver l’apparence dans la bo&icirc;te de dialogue
Options d’exportation Flash SWF.
Les &eacute;l&eacute;ments de mise en forme suivants sont perdus lors de l’exportation au format SWF : mode de fusion, calques,
masques (appliqu&eacute;s avant exportation), tranches, cartes-images, comportements, motifs et d&eacute;grad&eacute;s de contour.
1 Choisissez Fichier &gt; Enregistrer sous.
2 Entrez un nom de fichier, puis choisissez un dossier de destination.
3 S&eacute;lectionnez Adobe Flash SWF pour le format.
4 Cliquez sur le bouton Options, puis s&eacute;lectionnez une option Objets :
Conserver les trac&eacute;s Permet de conserver le caract&egrave;re modifiable des trac&eacute;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&eacute;s. Le caract&egrave;re modifiable est perdu.
5 S&eacute;lectionnez une option Texte :
Conserver le caract&egrave;re modifiable Permet de continuer &agrave; modifier le texte. Les effets et la mise en forme sont
perdus.
Convertir en trac&eacute;s Permet de convertir le texte en trac&eacute;s tout en conservant le cr&eacute;nage ou l’espacement
personnalis&eacute; dans Fireworks. Le caract&egrave;re modifiable du texte est perdu.
6 D&eacute;finissez la qualit&eacute; des images JPEG avec le curseur contextuel Qualit&eacute; JPEG.
7 S&eacute;lectionnez les &eacute;tats &agrave; exporter et leur cadence en secondes.
8 Cliquez sur OK, puis sur Enregistrer dans la bo&icirc;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&eacute;dez comme suit :
1 Dans Fireworks, choisissez Fen&ecirc;tre &gt; Optimisation pour ouvrir le panneau Optimisation.
2 S&eacute;lectionnez le format de fichier d’exportation PNG 8 et l’option Transparence alpha dans le menu contextuel
Transparence.
3 Choisissez Fichier &gt; Exporter.
4 S&eacute;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&eacute;s
1 Cr&eacute;ez un document dans Flash.
Remarque : si vous importez un graphique Fireworks dans un fichier Flash existant, cr&eacute;ez un nouveau calque dans
Flash.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 282
Utilisation de Fireworks avec d’autres applications
2 Choisissez Fichier &gt; 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&acirc;ce &agrave; l’int&eacute;gration de la fonction de lancement et de modification, vous pouvez utiliser Fireworks pour modifier un
graphique que vous avez pr&eacute;c&eacute;demment import&eacute; dans Flash, m&ecirc;me si le graphique n’a pas &eacute;t&eacute; export&eacute; depuis
Fireworks.
Remarque : les fichiers PNG natifs Fireworks import&eacute;s dans Flash constituent une exception, &agrave; moins que vous les ayez
import&eacute;s sous forme d’une image bitmap aplatie.
Si le graphique a &eacute;t&eacute; export&eacute; depuis Fireworks et que vous avez enregistr&eacute; 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 &agrave; jour.
1 Dans Flash, cliquez avec le bouton droit de la souris (Windows) ou tout en maintenant la touche Ctrl enfonc&eacute;e
(Mac OS) sur le fichier graphique dans le panneau Biblioth&egrave;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&eacute;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&eacute;.
Fireworks exporte un nouveau fichier graphique dans Flash et enregistre le fichier PNG d’origine.
Voir aussi
&laquo; Pr&eacute;f&eacute;rences de lancement et de modification &raquo; &agrave; la page 314
Utilisation d’Illustrator
Le partage de graphiques vectoriels entre Fireworks et Adobe Illustrator&reg; est un jeu d’enfants. L’aspect des objets peut
varier d’une application &agrave; l’autre, car Fireworks ne partage pas enti&egrave;rement les m&ecirc;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&eacute;rieures, et
propose des options permettant de conserver de nombreux aspects des fichiers import&eacute;s, notamment les calques et les
motifs. Les images li&eacute;es, en revanche, ne sont pas import&eacute;es.
Vous pouvez importer des images Illustrator dans Fireworks afin de les modifier et de les optimiser pour le Web. Vous
pouvez &eacute;galement exporter des fichiers Illustrator depuis Fireworks.
Les fonctions suivantes sont pr&eacute;serv&eacute;es lors de l’importation de fichiers Illustrator :
Points de B&eacute;zier Le nombre et la position des points de B&eacute;zier seront pr&eacute;serv&eacute;s.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 283
Utilisation de Fireworks avec d’autres applications
Couleurs Les couleurs sont pr&eacute;serv&eacute;es autant que possible lors de l’importation de contenu AI dans Fireworks.
Fireworks prend uniquement en charge le sch&eacute;ma RVB. Les autres sch&eacute;mas sont automatiquement convertis en RVB
8 bits avant d’&ecirc;tre import&eacute;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&eacute;serve les &eacute;l&eacute;ments suivants :
• Police
• Corps
• Couleur
• Gras
• Italique
• Alignement (A gauche, A droite, Au centre, Justifier)
• Orientation (Horizontale, De gauche &agrave; droite verticalement, De droite &agrave; gauche verticalement)
• Interlettrage
• Position des caract&egrave;res (Normal, Exposant, Indice)
• Cr&eacute;nage automatique
• Paires de cr&eacute;nage
Pour importer rapidement un texte sp&eacute;cifique dans un fichier Illustrator, copiez-le directement dans Fireworks. Le
texte copi&eacute; conserve tous ses attributs textuels.
Fonds en d&eacute;grad&eacute; Les d&eacute;grad&eacute;s sont import&eacute;s sous forme de d&eacute;grad&eacute;s Fireworks natifs. Tous les points de la rampe
du d&eacute;grad&eacute; sont pr&eacute;serv&eacute;s. Les valeurs d’opacit&eacute; associ&eacute;es aux remplissages de d&eacute;grad&eacute; sont &eacute;galement pr&eacute;serv&eacute;es &agrave;
l’importation.
Images Les fichiers AI Illustrator peuvent contenir des fichiers import&eacute;s aux formats suivants : PDF, BMP, EPS, GIF,
JPEG, JPEG2000, PICT, PCX, PCD, PSD, PXR, PNG, TGA et TIFF. Les images incorpor&eacute;es sont import&eacute;es dans
Fireworks en tant qu’images pixellis&eacute;es. Fireworks ne peut cependant pas ouvrir les fichiers AI Illustrator contenant
des images li&eacute;es, telles qu’EPS et AI.
Masques d’&eacute;cr&ecirc;tage Fireworks prend en charge l’importation des masques d’&eacute;cr&ecirc;tage contenant des trac&eacute;s et des
trac&eacute;s compos&eacute;s, &agrave; un niveau de base.
Contours avec fond Les contours avec fond sont import&eacute;s en un seul objet de dessin.
Fonds unis Les fonds unis sont import&eacute;s en un seul objet de dessin.
Trac&eacute;s transparents Les trac&eacute;s transparents sont import&eacute;s en un seul objet de dessin.
Groupes Le groupe est pr&eacute;serv&eacute;, et les objets associ&eacute;s individuels s’affichent en tant qu’objets de dessin.
Graphes Les graphes sont import&eacute;s sous forme de groupes et perdent leur caract&egrave;re modifiable.
Primitives Les primitives Illustrator sont en fait des trac&eacute;s ; elles ne sont donc pas import&eacute;es en tant que primitives
Fireworks.
Motifs Les motifs sont import&eacute;s en tant que mosa&iuml;que individuelle. Cette mosa&iuml;que est import&eacute;e en tant que motif
natif dans Fireworks ; ce motif est ensuite affect&eacute; &agrave; l’objet de dessin.
Contours Les contours sont import&eacute;s sous forme de groupes multiples (un groupe par trac&eacute; ferm&eacute;).
Symboles Les symboles sont import&eacute;s sous forme d’objets de groupe normaux.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 284
Utilisation de Fireworks avec d’autres applications
Transparence Fireworks importe l’opacit&eacute; de l’objet correctement, pr&eacute;servant ainsi les param&egrave;tres de transparence de
l’objet selon les valeurs d’origine d&eacute;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&eacute;dez de l’une des mani&egrave;res suivantes :
Importation du fichier Illustrator dans Fireworks Utilisez l’option Fichier &gt; 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&icirc;te de
dialogue Options de fichier vectoriel est activ&eacute;. S&eacute;lectionnez le plan de travail &agrave; importer dans le menu Page. Chaque
plan de travail d’Illustrator est mapp&eacute; &agrave; 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&eacute;lectionnez Fichier &gt; Ouvrir et ouvrez le fichier concern&eacute;. Tous les plans de travail &eacute;tant import&eacute;s sous forme de pages
distinctes, les options Conversion de fichiers de la bo&icirc;te de dialogue Options de fichier vectoriel sont d&eacute;sactiv&eacute;es.
Remarque : Les options de conversion de fichiers sont d&eacute;sactiv&eacute;es lorsque vous importez des fichiers Illustrator cr&eacute;&eacute;s dans
les version ant&eacute;rieures &agrave; 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 &agrave; ce format.
Vous pouvez &eacute;galement exporter les graphiques Fireworks vers Photoshop pour les retoucher avec pr&eacute;cision.
Insertion d’images Photoshop dans Fireworks
Pour placer des images Photoshop dans Fireworks, utilisez les commandes Fichier &gt; Importer et Fichier &gt; Ouvrir ou
faites glisser les fichiers sur la zone de travail. La commande Importer permet d’acc&eacute;der aux options sp&eacute;cifiques du
calque d’arri&egrave;re-plan et des dossiers de calque. La commande Ouvrir et la m&eacute;thode d’insertion par glisser-d&eacute;poser
permettent, quant &agrave; elles, d’acc&eacute;der aux options des rep&egrave;res et des &eacute;tats.
Voir aussi
&laquo; Pr&eacute;f&eacute;rences d’importation et d’ouverture de fichiers Photoshop &raquo; &agrave; la page 313
Fonctions Photoshop converties et non prises en charge dans Fireworks
Lorsque vous ouvrez ou importez un fichier Photoshop, Fireworks convertit l’&eacute;tat au format PNG en respectant les
pr&eacute;f&eacute;rences d’importation que vous avez sp&eacute;cifi&eacute;es (Voir &laquo; Pr&eacute;f&eacute;rences d’importation et d’ouverture de fichiers
Photoshop &raquo; &agrave; 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’&eacute;cr&ecirc;tage sont convertis en masques d’objet, mais leur apparence est quelque peu modifi&eacute;e. Si vous
souhaitez privil&eacute;gier l’aspect par rapport au caract&egrave;re modifiable des objets, s&eacute;lectionnez la
pr&eacute;f&eacute;rence Masques d’&eacute;cr&ecirc;tage.
• Les modes de fusion des calques sont convertis en modes de fusion pour les objets Fireworks, si une correspondance
peut &ecirc;tre &eacute;tablie.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 285
Utilisation de Fireworks avec d’autres applications
• Les effets de calque sont conserv&eacute;s par d&eacute;faut. Si vous pr&eacute;f&eacute;rez convertir ces effets en filtres dynamiques
correspondants, s&eacute;lectionnez la pr&eacute;f&eacute;rence Effets de calque. Toutefois, l’aspect des effets et filtres similaires peut
l&eacute;g&egrave;rement varier.
• La premi&egrave;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&eacute;placement, ouverture ou importation d’images Photoshop dans Fireworks
Chaque image que vous d&eacute;placez, ouvrez ou importez devient un nouvel objet bitmap.
Remarque : sous Windows, les noms des fichiers doivent inclure une extension PSD de fa&ccedil;on &agrave; &ecirc;tre identifi&eacute;s
correctement par Fireworks.
1 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Faites glisser une image ou un fichier Photoshop dans un document Fireworks ouvert.
• Choisissez Fichier &gt; Ouvrir ou Fichier &gt; Importer, puis s&eacute;lectionnez un fichier Photoshop (PSD).
2 Cliquez sur le bouton Ouvrir.
3 Dans la bo&icirc;te de dialogue qui s’affiche, d&eacute;finissez les options d’image, puis cliquez sur OK.
4 Si vous utilisez la commande Fichier &gt; Importer, un curseur en forme de L invers&eacute; appara&icirc;t. Dans la zone de travail,
cliquez &agrave; l’endroit o&ugrave; vous voulez placer le coin sup&eacute;rieur gauche de l’image.
Voir aussi
&laquo; Pr&eacute;f&eacute;rences d’importation et d’ouverture de fichiers Photoshop &raquo; &agrave; la page 313
Options d’importation de fichiers Photoshop
Lorsque vous importez ou ouvrez un fichier Photoshop dans Fireworks, une bo&icirc;te de dialogue vous permet de choisir
le mode d’importation de l’image. Les options que vous choisissez d&eacute;terminent l’aspect et le caract&egrave;re modifiable des
fichiers import&eacute;s.
1 Sp&eacute;cifiez les dimensions de l’image en pixels ou en pourcentage, et indiquez une r&eacute;solution en pixels. Pour
conserver le rapport largeur/hauteur actuel, s&eacute;lectionnez Conserver les proportions.
2 Si le fichier Photoshop contient des compositions de calques, sp&eacute;cifiez la version de l’image &agrave; importer. S&eacute;lectionnez
l’option Afficher l’aper&ccedil;u pour afficher un aper&ccedil;u de la composition s&eacute;lectionn&eacute;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&egrave;re modifiable du calque plut&ocirc;t que l’apparence Pr&eacute;serve la structure de calques et le caract&egrave;re
modifiable du texte autant que possible, sans nuire &agrave; l’aspect de l’image. Si le fichier inclut des fonctions non prises
en charge par Fireworks, ce logiciel pr&eacute;serve l’aspect du document en fusionnant et en pixellisant les calques. Voici
quelques exemples :
• Les calques CMJN, les calques de r&eacute;glage et les calques utilisant une option de masquage sont fusionn&eacute;s avec les
calques sous-jacents.
• Les calques utilisant des effets de calques non pris en charge peuvent &ecirc;tre fusionn&eacute;s, selon le mode de fusion du
calque et la pr&eacute;sence de pixels transparents.
Derni&egrave;re mise &agrave; 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&eacute; de modifier les calques Photoshop dans Fireworks.
Les groupes de calques sont cependant conserv&eacute;s.
Utiliser les pr&eacute;f&eacute;rences personnalis&eacute;es Importe le fichier en utilisant les param&egrave;tres de conversion de fichier
personnalis&eacute;s indiqu&eacute;s dans la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences (Voir &laquo; Pr&eacute;f&eacute;rences d’importation et d’ouverture de
fichiers Photoshop &raquo; &agrave; 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&eacute; est conserv&eacute;e mais n’est plus
modifiable.
4 Si vous avez utilis&eacute; la commande Fichier &gt; Importer, vous pouvez s&eacute;lectionner les options suivantes :
Inclure le calque d’arri&egrave;re-plan Importe les objets situ&eacute;s sur le calque d’arri&egrave;re-plan de l’image.
Importer dans un nouveau dossier Importe l’image dans un nouveau dossier de calque nomm&eacute; Importation
Photoshop.
5 Si vous avez utilis&eacute; la commande Fichier &gt; Ouvrir ou fait glisser le fichier Photoshop dans Fireworks, vous pouvez
s&eacute;lectionner les options suivantes :
Inclure les rep&egrave;res Conserve les rep&egrave;res Photoshop &agrave; leur position initiale.
Convertir les calques en &eacute;tats Place chaque groupe de calques Photoshop dans son propre &eacute;tat.
A propos de l’importation de texte depuis Photoshop
Pour importer rapidement un texte sp&eacute;cifique dans un fichier Photoshop, copiez-le directement dans Fireworks. Le
texte copi&eacute; conserve tous ses attributs textuels.
Lorsque vous importez des fichiers Photoshop contenant du texte, Fireworks v&eacute;rifie si vous disposez des polices
n&eacute;cessaires sur votre syst&egrave;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&eacute;s au texte dans le fichier Photoshop, ils sont conserv&eacute;s
dans Fireworks. Toutefois, &eacute;tant donn&eacute; que Fireworks et Photoshop n’appliquent pas les effets de la m&ecirc;me mani&egrave;re,
ces effets peuvent &ecirc;tre diff&eacute;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&eacute;e, une image cache du texte s’affiche pour conserver l’aspect Photoshop. Une fois le
texte modifi&eacute;, l’image cache est remplac&eacute;e par le texte r&eacute;el dont l’aspect peut &ecirc;tre diff&eacute;rent de celui de l’original. Les
donn&eacute;es relatives &agrave; la police d’origine sont stock&eacute;es dans le fichier PNG de mani&egrave;re &agrave; ce que, si le fichier se trouve sur
un syst&egrave;me disposant des polices ad&eacute;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&eacute;exportez le document dans Photoshop, le fichier est export&eacute; au format
Photoshop 5.5. Si vous ne modifiez pas le texte, le fichier est export&eacute; au format Photoshop 6.
Voir aussi
&laquo; Pr&eacute;f&eacute;rences d’importation et d’ouverture de fichiers Photoshop &raquo; &agrave; la page 313
Importation/Exportation de d&eacute;grad&eacute;s Photoshop
A la suite de l’importation ou de l’exportation, la qualit&eacute; du d&eacute;grad&eacute; varie en fonction de son type. Une l&eacute;g&egrave;re variation
de la couleur et de l’opacit&eacute; des d&eacute;grad&eacute;s peut &eacute;galement se produire.
UTILISATION DE FIREWORKS CS5 287
Derni&egrave;re mise &agrave; jour le 29/4/2010
Utilisation de Fireworks avec d’autres applications
D&eacute;grad&eacute;
Qualit&eacute; d’importation
Lin&eacute;aire
Presque parfait.
Concentrique
Presque parfait.
Refl&eacute;t&eacute;
Presque parfait.
Losange
Correspondance approximative (mappage &agrave; rectangulaire)
Angle
Correspondance approximative (mappage &agrave; conique)
D&eacute;grad&eacute;
Qualit&eacute; d’exportation
Lin&eacute;aire
Presque parfait.
Concentrique
Presque parfait.
Barreaux
Presque parfait.
Rectangulaire
Correspondance approximative (mappage &agrave; losange)
Conique
Correspondance approximative (mappage &agrave; angle)
Ellipse
Correspondance approximative (mappage &agrave; concentrique)
Ondes
Correspondance approximative (mappage &agrave; concentrique)
Etoile filante
Correspondance imparfaite (mappage &agrave; forme &eacute;clat&eacute;e)
Contour, satin, vagues
Correspondance imparfaite (mappage &agrave; lin&eacute;aire)
Conservation de l’aspect d’un calque de r&eacute;glage apr&egrave;s une importation
Lorsque vous importez un fichier PSD contenant un calque de r&eacute;glage, l’aspect des calques individuels est conserv&eacute; &agrave;
la suite de l’importation.
1 Dans la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences, s&eacute;lectionnez Importation/Ouverture PS.
2 S&eacute;lectionnez Conserver l’aspect des calques r&eacute;gl&eacute;s.
Conservation de l’aspect des calques r&eacute;gl&eacute;s
Lorsque vous importez un fichier PSD contenant un calque de r&eacute;glage, l’aspect des calques individuels est conserv&eacute; &agrave;
la suite de l’importation. Veillez &agrave; s&eacute;lectionner Param&egrave;tres personnalis&eacute;s issus des pr&eacute;f&eacute;rences dans la bo&icirc;te de
dialogue.
Utilisation de filtres et de modules externes Photoshop
Fireworks met &agrave; votre disposition de nombreux filtres et modules externes Photoshop ou de fabricants tiers, accessibles
depuis la fen&ecirc;tre Filtres dynamiques ou le menu Filtres.
Remarque : les modules externes et les filtres de Photoshop 5.5 (et versions ant&eacute;rieures) sont pris en charge. Pour plus
d'informations, voir http://www.fireworkszone.com/g-2-536. Les modules externes et les filtres Photoshop &agrave; partir de la
version 6 ne sont pas compatibles avec Fireworks.
Activation des modules externes Photoshop via la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences
1 Choisissez Edition &gt; Pr&eacute;f&eacute;rences (Windows) ou Fireworks &gt; Pr&eacute;f&eacute;rences (Mac OS).
2 S&eacute;lectionnez la cat&eacute;gorie Modules externes.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 288
Utilisation de Fireworks avec d’autres applications
3 S&eacute;lectionnez Modules externes Photoshop.
La bo&icirc;te de dialogue de s&eacute;lection de dossier Windows ou Mac OS s’affiche.
Remarque : si la bo&icirc;te de dialogue ne s’affiche pas, cliquez sur Parcourir.
4 Acc&eacute;dez au dossier d’installation des filtres et modules externes Photoshop ou tiers, puis cliquez sur le bouton
S&eacute;lectionner (Windows) ou Choisir (Mac OS).
5 Cliquez sur OK pour fermer la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences.
6 Relancez Fireworks.
Voir aussi
&laquo; Pr&eacute;f&eacute;rences des modules externes &raquo; &agrave; la page 314
Activation des modules externes Photoshop via la fen&ecirc;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&ocirc;ne
plus (+) en regard de l’&eacute;tiquette Filtres dans l’inspecteur des propri&eacute;t&eacute;s.
2 Dans le menu contextuel, cliquez sur Options &gt; Rechercher les modules externes.
3 Acc&eacute;dez au dossier d’installation des filtres et modules externes Photoshop ou tiers, puis cliquez sur le bouton
S&eacute;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 &eacute;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&egrave;te pour l’exportation de fichiers au format Photoshop (PSD). Une image
Fireworks export&eacute;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 &eacute;tats que contient le document Fireworks en tant que
fichiers PSD distincts. Pour la t&eacute;l&eacute;charger, acc&eacute;dez &agrave;
http://www.adobe.com/go/learn_fw_psdsave_fr
Exportation d’un fichier au format Photoshop
1 Choisissez Fichier &gt; Enregistrer sous.
2 Nommez votre fichier, puis s&eacute;lectionnez Photoshop PSD dans le menu Type.
3 Pour sp&eacute;cifier des param&egrave;tres d’exportation pr&eacute;d&eacute;finis pour les objets, les effets et le texte, cliquez sur le bouton
Options, puis choisissez un param&egrave;tre pr&eacute;d&eacute;fini dans le menu Param&egrave;tres.
Privil&eacute;gier le caract&egrave;re modifiable Convertit les objets en calques, conserve le caract&egrave;re modifiable des effets et
convertit le texte en calques de texte Photoshop modifiables. S&eacute;lectionnez cette option si vous d&eacute;sirez modifier
l’image dans Photoshop et n’avez pas besoin de conserver l’aspect exact de l’image Fireworks.
Pr&eacute;server l’aspect de Fireworks Convertit chaque objet en calque Photoshop isol&eacute;, mais les effets et le texte ne
peuvent plus &ecirc;tre modifi&eacute;s. S&eacute;lectionnez cette option si vous d&eacute;sirez garder le contr&ocirc;le des objets Fireworks dans
Photoshop tout en conservant l’aspect original de l’image Fireworks.
Derni&egrave;re mise &agrave; 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&eacute;lectionnez cette option
si vous exportez un fichier contenant un grand nombre d’objets Fireworks.
Personnalis&eacute; Permet de s&eacute;lectionner des param&egrave;tres sp&eacute;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&eacute;rieures ne permettent pas d’ouvrir les fichiers comportant plus de
100 calques. Vous devez supprimer ou fusionner les objets lorsque le document Fireworks &agrave; exporter comporte plus de
100 objets.
Personnalisation des param&egrave;tres d’exportation Photoshop
1 Dans la bo&icirc;te de dialogue Enregistrer sous, s&eacute;lectionnez Photoshop PSD comme type de fichier, puis cliquez
sur Options.
2 Dans le menu contextuel Param&egrave;tres, s&eacute;lectionnez Personnalis&eacute;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&eacute;lectionnez cette option, vous n’aurez plus la possibilit&eacute; de modifier les objets de
Fireworks dans Photoshop. Vous perdez &eacute;galement d’autres fonctions (modes de fusion) qui sont associ&eacute;es aux
objets de Fireworks.
4 Dans le menu contextuel Effets, choisissez l’une des options suivantes :
Conserver le caract&egrave;re modifiable Convertit les filtres dynamiques Fireworks en leur &eacute;quivalent Photoshop. Les
effets qui n’existent pas dans Photoshop sont ignor&eacute;s.
Rendu des effets Aplatit les effets avec les objets auxquels ils s’appliquent. Si vous s&eacute;lectionnez cette option, vous
conservez l’aspect des effets mais n’avez plus la possibilit&eacute; de les modifier dans Photoshop.
5 Dans le menu contextuel Texte, choisissez l’une des options suivantes :
Conserver le caract&egrave;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&eacute;lectionnez cette option, vous conservez l’aspect
du texte mais n’avez plus la possibilit&eacute; de le modifier.
Utilisation de Director
Fireworks permet d’exporter des contenus graphiques et interactifs vers Director&reg;. Cela permet aux utilisateurs de
Director de tirer parti des outils d’optimisation et de conception graphique de Fireworks sans compromettre la qualit&eacute;.
• Le processus d’exportation conserve les comportements et les tranches du graphique.
• Vous pouvez exporter les images d&eacute;coup&eacute;es en tranches avec des survols.
Remarque : le style HTML Director ne prend pas en charge le code de menus contextuels.
Derni&egrave;re mise &agrave; 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 &eacute;galement
importer des images PNG 32 bits avec transparence. Pour les contenus d&eacute;coup&eacute;s, interactifs et anim&eacute;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&ecirc;tre &gt; Optimisation, remplacez le format de fichier d’exportation par PNG 32, et
d&eacute;finissez Cache sur Transparent.
2 Choisissez Fichier &gt; Exporter.
3 S&eacute;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&eacute;coup&eacute;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 &gt; Exporter.
2 Dans la bo&icirc;te de dialogue Exporter, entrez un nom de fichier, et s&eacute;lectionnez un dossier de destination.
3 Dans le menu contextuel Enregistrer sous, cliquez sur Director.
4 S&eacute;lectionnez une option Source :
Calques Fireworks Exporte chacun des calques du document. S&eacute;lectionnez cette option si vous exportez un
contenu avec des calques ou une animation.
Tranches Fireworks Exporte les tranches du document. S&eacute;lectionnez cette option si vous exportez un contenu
d&eacute;coup&eacute; ou interactif, tel que des images de survol et des boutons.
5 Pour recadrer automatiquement les images export&eacute;es afin de pouvoir placer les objets dans chaque &eacute;tat,
s&eacute;lectionnez Rogner les images.
6 S&eacute;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 &gt; Importer.
2 Acc&eacute;dez au fichier appropri&eacute;, et cliquez sur Importer.
3 (Facultatif) Modifiez les options de la bo&icirc;te de dialogue Options d’image. Pour plus d’informations sur chaque
option, reportez-vous &agrave; la section Utilisation de Director.
4 Cliquez sur OK pour afficher le graphique import&eacute; sous une forme bitmap.
Importation de contenus Fireworks avec calques, tranches ou &eacute;l&eacute;ments interactifs
1 Dans Director, choisissez Insertion &gt; Fireworks &gt; Images depuis HTML Fireworks.
Remarque : l’emplacement et le nom de cette commande de menu peuvent &ecirc;tre diff&eacute;rents selon votre version de
Director.
2 Recherchez le fichier HTML Fireworks que vous avez export&eacute; pour Director.
Derni&egrave;re mise &agrave; 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&icirc;te de dialogue Ouvrir le fichier HTML Fireworks.
Couleur Permet de d&eacute;finir une profondeur de couleur pour les graphiques import&eacute;s. S’ils contiennent une
transparence, s&eacute;lectionnez Couleur 32 bits.
Enregistrement Permet de d&eacute;finir le point d’enregistrement des graphiques import&eacute;s.
Importation de comportements de survol en code Lingo Convertit les comportements Fireworks en code Lingo.
Importation selon sc&eacute;nario Place les acteurs dans le sc&eacute;nario apr&egrave;s l’importation.
4 Cliquez sur le bouton Ouvrir.
Le graphique et le code du fichier HTML Fireworks sont import&eacute;s.
Remarque : si vous importez une animation Fireworks, faites glisser les &eacute;tats cl&eacute;s dans Director pour d&eacute;caler le d&eacute;lai
de chaque calque import&eacute;, si n&eacute;cessaire.
Modification des acteurs Director dans Fireworks
Voir aussi
&laquo; Pr&eacute;f&eacute;rences de lancement et de modification &raquo; &agrave; 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&eacute;e
(Mac OS) sur le graphique dans la fen&ecirc;tre Distribution.
2 Dans le menu contextuel, s&eacute;lectionnez Modifier avec &eacute;diteur externe.
Remarque : pour d&eacute;finir Fireworks en tant qu’&eacute;diteur externe des graphiques bitmap, dans Director, choisissez
Fichier &gt; Pr&eacute;f&eacute;rences &gt; Editeurs et s&eacute;lectionnez Fireworks.
Le fichier s’ouvre dans Fireworks, et la partie sup&eacute;rieure de la fen&ecirc;tre de document indique que vous modifiez un
fichier provenant de Director.
3 Apportez les modifications requises, puis cliquez sur Termin&eacute;.
Fireworks exporte le nouveau graphique vers Director.
L’int&eacute;gration de lancement et de modification permet de modifier les acteurs Director en d&eacute;marrant Fireworks
pour les modifier depuis Director. Vous pouvez &eacute;galement d&eacute;marrer Fireworks depuis Director pour optimiser les
acteurs.
Optimisation des acteurs dans Director
Lancez Fireworks depuis Director pour pr&eacute;visualiser les modifications d’optimisation apport&eacute;es aux acteurs
s&eacute;lectionn&eacute;s.
1 Dans Director, s&eacute;lectionnez l’acteur dans la fen&ecirc;tre Distribution, et cliquez sur Optimiser dans Fireworks sous
l’onglet Bitmap de l’inspecteur des propri&eacute;t&eacute;s.
2 Dans Fireworks, modifiez les param&egrave;tres d’optimisation.
3 Cliquez sur Mettre &agrave; jour une fois que vous avez termin&eacute;. Si la bo&icirc;te de dialogue d’&eacute;dition mixte s’affiche, cliquez
sur Termin&eacute;.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 292
Utilisation de Fireworks avec d’autres applications
Partage de m&eacute;tadonn&eacute;es d’image avec Adobe XMP
La technologie Adobe XMP (eXtensible Metadata Platform) permet &agrave; l’utilisateur d’ajouter des informations sur les
fichiers aux fichiers enregistr&eacute;s aux formats PNG, GIF, JPEG, Photoshop et TIFF. La technologie XMP facilite
l’&eacute;change de m&eacute;tadonn&eacute;es (auteur, copyright et mots-cl&eacute;s, par exemple) entre les applications Adobe.
1 Choisissez Fichier &gt; Info sur le fichier.
2 Effectuez l’une des op&eacute;rations suivantes :
• Pour ajouter des m&eacute;tadonn&eacute;es, reportez-vous &agrave; la section &laquo; Ajout de m&eacute;tadonn&eacute;es &agrave; l’aide de la bo&icirc;te de
dialogue Informations &raquo; &agrave; la page 292.
• Pour cr&eacute;er des cat&eacute;gories de m&eacute;tadonn&eacute;es, reportez-vous &agrave; la section &laquo; Utilisation de mod&egrave;les de m&eacute;tadonn&eacute;es &raquo;
&agrave; la page 293.
• Pour importer des m&eacute;tadonn&eacute;es depuis un fichier XML existant, reportez-vous &agrave; la section &laquo; Importation de
m&eacute;tadonn&eacute;es dans un document &raquo; &agrave; la page 294.
Ajout de m&eacute;tadonn&eacute;es &agrave; l’aide de la bo&icirc;te de dialogue Informations
La bo&icirc;te de dialogue Informations affiche les donn&eacute;es d’appareil photo, d’autres propri&eacute;t&eacute;s de fichier, un historique
des modifications, le copyright et des informations sur l’auteur. La bo&icirc;te de dialogue Informations affiche &eacute;galement
les panneaux des m&eacute;tadonn&eacute;es personnalis&eacute;s. Vous pouvez ajouter des m&eacute;tadonn&eacute;es directement dans la bo&icirc;te de
dialogue Informations. Si vous s&eacute;lectionnez plusieurs fichiers, la bo&icirc;te de dialogue affiche l’emplacement des
diff&eacute;rentes valeurs associ&eacute;es &agrave; un champ de texte. Toute information entr&eacute;e dans un champ remplace les m&eacute;tadonn&eacute;es
existantes et applique la nouvelle valeur &agrave; tous les fichiers s&eacute;lectionn&eacute;s.
Remarque : vous pouvez &eacute;galement afficher des m&eacute;tadonn&eacute;es dans le panneau M&eacute;tadonn&eacute;es, dans certaines vues du
panneau Contenu et en pla&ccedil;ant le pointeur au-dessus de la vignette dans le panneau Contenu.
1 S&eacute;lectionnez un ou plusieurs fichiers.
2 Choisissez Fichier &gt; Informations.
3 S&eacute;lectionnez l’une des options des onglets situ&eacute;s dans la partie sup&eacute;rieure de la bo&icirc;te de dialogue :
Utilisez les fl&egrave;ches droite et gauche pour faire d&eacute;filer les onglets, ou cliquez sur la fl&egrave;che pointant vers le bas et
choisissez une cat&eacute;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&eacute;s qui peuvent &ecirc;tre utilis&eacute;s pour rechercher le document. Pour sp&eacute;cifier des informations
de copyright, s&eacute;lectionnez la commande Copyright dans le menu contextuel Etat du copyright. Ensuite, entrez le
d&eacute;tenteur de ce copyright, le texte de ce copyright et l’URL de la personne ou de la soci&eacute;t&eacute; d&eacute;tentrice du copyright.
IPTC Comprend quatre zones : Contenu IPTC : d&eacute;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&eacute;es de la cam&eacute;ra Comprend deux zones : Donn&eacute;es de la cam&eacute;ra 1 : affiche des informations en lecture seule
sur l’appareil photo et les param&egrave;tres utilis&eacute;s pour prendre la photo, notamment la marque, le mod&egrave;le, la vitesse
d’obturation et le r&eacute;glage d’ouverture maximum. Donn&eacute;es de la cam&eacute;ra 2 : liste des informations de fichier en
lecture seule sur la photo, notamment les dimensions des pixels et la r&eacute;solution.
Donn&eacute;es vid&eacute;o Liste des informations sur le fichier vid&eacute;o, notamment la largeur et la hauteur de l’image vid&eacute;o, et
permet d’entrer des informations telles que le nom de la cassette et le nom de la sc&egrave;ne.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 293
Utilisation de Fireworks avec d’autres applications
Donn&eacute;es audio Permet d’entrer des informations sur le fichier audio, notamment le titre, l’artiste, le d&eacute;bit et les
param&egrave;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&eacute;gories Permet d’entrer des informations selon les cat&eacute;gories Associated Press.
Origine Permet d’entrer des informations de fichier utiles pour les organes de presse, notamment la date et
l’endroit o&ugrave; le fichier a &eacute;t&eacute; cr&eacute;&eacute;, les donn&eacute;es de transmission, les instructions sp&eacute;ciales et les gros titres.
DICOM Liste les informations sur les patients, les &eacute;tudes, les s&eacute;ries et les &eacute;quipements des images DICOM.
Historique Affiche les donn&eacute;es du journal d’historique Adobe Photoshop pour les images enregistr&eacute;es avec
Photoshop. L’option Historique s’affiche uniquement si Adobe Photoshop est install&eacute;.
Illustrator Permet d’appliquer un profil de document pour une sortie vers une imprimante, le Web ou un mobile.
Avanc&eacute; Affiche les champs et les structures de stockage des m&eacute;tadonn&eacute;es en utilisant des espaces de nom et des
propri&eacute;t&eacute;s, notamment ceux du format de fichier et XMP, Exif et PDF.
Donn&eacute;es brutes Affiche les informations de texte XMP sur le fichier.
4 Entrez les informations &agrave; ajouter aux champs affich&eacute;s.
5 Cliquez sur le bouton OK pour appliquer les modifications.
Utilisation de mod&egrave;les de m&eacute;tadonn&eacute;es
Vous pouvez cr&eacute;er de nouveaux mod&egrave;les de m&eacute;tadonn&eacute;es dans Adobe Bridge en utilisant la commande Cr&eacute;er un
mod&egrave;le de m&eacute;tadonn&eacute;es. Vous pouvez &eacute;galement modifier les m&eacute;tadonn&eacute;es dans la bo&icirc;te de dialogue Informations et
les enregistrer sous forme de fichier texte dot&eacute; de l’extension de fichier .xmp. Vous partagez des fichiers XMP avec
d’autres utilisateurs ou les appliquez &agrave; d’autres fichiers.
Vous pouvez enregistrer des m&eacute;tadonn&eacute;es dans un mod&egrave;le que vous utiliserez pour g&eacute;n&eacute;rer des m&eacute;tadonn&eacute;es dans des
documents Adobe InDesign et d’autres documents cr&eacute;&eacute;s &agrave; l’aide de logiciels compatibles XMP. Les mod&egrave;les que vous
cr&eacute;ez sont stock&eacute;s dans un emplacement partag&eacute; auquel tous les logiciels compatibles XMP peuvent acc&eacute;der.
Pour afficher vos mod&egrave;les XMP, ouvrez la bo&icirc;te de dialogue Informations, cliquez sur le bouton Importer, puis
choisissez Afficher le dossier de mod&egrave;les.
Cr&eacute;ation d’un mod&egrave;le de m&eacute;tadonn&eacute;es
1 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Choisissez Outils &gt; Cr&eacute;er un mod&egrave;le de m&eacute;tadonn&eacute;es.
• Choisissez Cr&eacute;er un mod&egrave;le de m&eacute;tadonn&eacute;es dans le menu du panneau M&eacute;tadonn&eacute;es.
2 Saisissez un nom dans le champ Nom de mod&egrave;le.
3 S&eacute;lectionnez les m&eacute;tadonn&eacute;es &agrave; inclure dans le mod&egrave;le &agrave; partir des champs de la bo&icirc;te de dialogue Cr&eacute;er un mod&egrave;le
de m&eacute;tadonn&eacute;es, puis entrez les valeurs des m&eacute;tadonn&eacute;es dans les diff&eacute;rents champs.
Remarque : si vous s&eacute;lectionnez une option de m&eacute;tadonn&eacute;es et laissez le champ correspondant vide, Adobe Bridge
efface les m&eacute;tadonn&eacute;es existantes lorsque vous appliquez le mod&egrave;le.
4 Cliquez sur Enregistrer.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 294
Utilisation de Fireworks avec d’autres applications
Enregistrement des m&eacute;tadonn&eacute;es en tant que fichier XMP dans la bo&icirc;te de
dialogue Informations
1 Choisissez Fichier &gt; Informations.
2 Choisissez Exporter dans le menu contextuel situ&eacute; en bas de la bo&icirc;te de dialogue.
3 Tapez un nom de fichier, d&eacute;finissez l’emplacement du fichier, puis cliquez sur Enregistrer.
Affichage ou suppression de mod&egrave;les de m&eacute;tadonn&eacute;es
1 Pour afficher les mod&egrave;les de m&eacute;tadonn&eacute;es dans l’explorateur Windows (Windows) ou le Finder (Mac OS),
proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Choisissez Outils &gt; Cr&eacute;er un mod&egrave;le de m&eacute;tadonn&eacute;es. Cliquez sur le menu contextuel dans le coin sup&eacute;rieur
droit de la bo&icirc;te de dialogue Cr&eacute;er un mod&egrave;le de m&eacute;tadonn&eacute;es, puis choisissez Afficher le dossier de mod&egrave;les.
• Choisissez Fichier &gt; Informations. Cliquez sur le menu contextuel situ&eacute; en bas de la bo&icirc;te de dialogue
Informations, puis choisissez Afficher le dossier de mod&egrave;les.
2 S&eacute;lectionnez le mod&egrave;le que vous souhaitez supprimer et appuyez sur la touche Suppr. ou faites-le glisser vers la
corbeille.
Application de mod&egrave;les de m&eacute;tadonn&eacute;es &agrave; des fichiers dans Adobe Bridge
1 S&eacute;lectionnez un ou plusieurs fichiers.
2 Choisissez une des deux commandes suivantes dans le menu du panneau M&eacute;tadonn&eacute;es ou le menu Outils :
• Ajouter des m&eacute;tadonn&eacute;es (suivies du nom du mod&egrave;le) Cette commande applique les m&eacute;tadonn&eacute;es du mod&egrave;le
uniquement lorsqu’il n’existe aucune valeur ou propri&eacute;t&eacute; de m&eacute;tadonn&eacute;es dans le fichier.
• Remplacer des m&eacute;tadonn&eacute;es (suivies du nom du mod&egrave;le) Cette commande remplace l’int&eacute;gralit&eacute; des
m&eacute;tadonn&eacute;es existantes du fichier par celles du mod&egrave;le.
Modification de mod&egrave;les de m&eacute;tadonn&eacute;es
1 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Choisissez Outils &gt; Modifier un mod&egrave;le de m&eacute;tadonn&eacute;es (suivi du nom du mod&egrave;le).
• Choisissez Modifier un mod&egrave;le de m&eacute;tadonn&eacute;es (suivi du nom du mod&egrave;le) dans le menu du panneau
M&eacute;tadonn&eacute;es.
2 Entrez de nouvelles valeurs pour les m&eacute;tadonn&eacute;es de tous les champs.
3 Cliquez sur Enregistrer.
Importation de m&eacute;tadonn&eacute;es dans un document
1 S&eacute;lectionnez un ou plusieurs fichiers.
2 Choisissez Fichier &gt; Informations.
3 Choisissez Importation dans le menu d&eacute;roulant situ&eacute; au bas de la bo&icirc;te de dialogue.
Remarque : pour pouvoir importer des m&eacute;tadonn&eacute;es &agrave; partir d’un mod&egrave;le, vous devez d’abord enregistrer un mod&egrave;le
de m&eacute;tadonn&eacute;es.
4 Sp&eacute;cifiez la mani&egrave;re dont vous voulez importer les donn&eacute;es :
Remplacement des propri&eacute;t&eacute;s existantes par celles du mod&egrave;le Remplace toutes les m&eacute;tadonn&eacute;es du fichier par
celles du fichier XMP.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 295
Utilisation de Fireworks avec d’autres applications
Conservation des m&eacute;tadonn&eacute;es d’origine, mais remplacement des propri&eacute;t&eacute;s correspondantes &agrave; partir du mod&egrave;le
Remplace uniquement les m&eacute;tadonn&eacute;es ayant des propri&eacute;t&eacute;s diff&eacute;rentes dans le mod&egrave;le.
Conservation des m&eacute;tadonn&eacute;es d’origine, mais ajout de propri&eacute;t&eacute;s correspondantes &agrave; partir du mod&egrave;le (Par
d&eacute;faut) Applique des m&eacute;tadonn&eacute;es du mod&egrave;le uniquement lorsqu’il n’existe aucune valeur ou propri&eacute;t&eacute; de
m&eacute;tadonn&eacute;es dans le fichier.
5 Cliquez sur OK.
6 Acc&eacute;dez au fichier texte XMP, puis cliquez sur Ouvrir.
Aper&ccedil;u de documents Fireworks dans des &eacute;mulateurs
mobiles
Il est possible d’afficher un aper&ccedil;u des documents Fireworks dans divers &eacute;mulateurs mobiles accessibles dans Device
Central. Device Central est automatiquement install&eacute; en conjonction avec Fireworks.
Aper&ccedil;u de documents Fireworks dans Device Central
1 Cr&eacute;ez le document dont vous souhaitez afficher l’aper&ccedil;u dans Fireworks. Vous pouvez &eacute;galement cr&eacute;er un
document contenant un jeu de pages et afficher un aper&ccedil;u de chacune d’elles individuellement.
2 S&eacute;lectionnez Fichier &gt; Aper&ccedil;u dans Device Central.
3 Dans Device Central, affichez un aper&ccedil;u du document dans les diff&eacute;rents p&eacute;riph&eacute;riques r&eacute;pertori&eacute;s dans le panneau
P&eacute;riph&eacute;riques de test.
La couleur d’arri&egrave;re-plan de la page est utilis&eacute;e comme couleur d’arri&egrave;re-plan de l’aper&ccedil;u. Si l’arri&egrave;re-plan est
transparent, l’arri&egrave;re-plan de l’aper&ccedil;u est blanc.
Lorsque vous affichez l’aper&ccedil;u du document, utilisez les diff&eacute;rentes options de Device Central.
Cr&eacute;ation d’un document Fireworks &agrave; partir du p&eacute;riph&eacute;rique mobile
s&eacute;lectionn&eacute;
Proc&eacute;dez comme suit pour cr&eacute;er un document pour un p&eacute;riph&eacute;rique mobile donn&eacute;.
1 S&eacute;lectionnez Fichier &gt; Device Central.
2 Dans le panneau P&eacute;riph&eacute;riques de test de la fen&ecirc;tre Device Central, s&eacute;lectionnez le p&eacute;riph&eacute;rique pour lequel vous
souhaitez cr&eacute;er le document Fireworks.
Remarque : S&eacute;lectionnez Utiliser la taille personnalis&eacute;e pour cr&eacute;er un document Fireworks dont la taille ne correspond
pas exactement &agrave; celle sp&eacute;cifi&eacute;e dans le panneau du p&eacute;riph&eacute;rique. Modifiez les valeurs en fonction des besoins.
3 Cliquez sur Cr&eacute;er.
4 Un document de la taille s&eacute;lectionn&eacute;e s’affiche dans Fireworks.
Cr&eacute;ation d’un document Fireworks &agrave; partir de plusieurs p&eacute;riph&eacute;riques
mobiles s&eacute;lectionn&eacute;s
Proc&eacute;dez comme suit pour cr&eacute;er un document pour un jeu de p&eacute;riph&eacute;riques mobiles de m&ecirc;me taille.
1 S&eacute;lectionnez Fichier &gt; Device Central.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 296
Utilisation de Fireworks avec d’autres applications
2 Dans le panneau P&eacute;riph&eacute;riques de test de la fen&ecirc;tre Device Central, s&eacute;lectionnez les p&eacute;riph&eacute;riques pour lesquels
vous souhaitez cr&eacute;er le document Fireworks.
Remarque : Lorsque vous s&eacute;lectionnez des p&eacute;riph&eacute;riques de diff&eacute;rentes tailles, Device Central les regroupe par taille.
Ces groupes sont affich&eacute;s dans le panneau Pr&eacute;r&eacute;glages de tailles correspondantes.
3 Dans le panneau Pr&eacute;r&eacute;glages de tailles correspondantes, s&eacute;lectionnez le groupe pour lequel vous souhaitez cr&eacute;er un
document Fireworks.
4 Cliquez sur Cr&eacute;er.
5 Un document de la taille s&eacute;lectionn&eacute;e s’affiche dans Fireworks.
Derni&egrave;re mise &agrave; jour le 29/4/2010
Chapitre 19 : Automatisation des t&acirc;ches
Adobe&reg; Fireworks&reg; automatise et simplifie de nombreuses t&acirc;ches fastidieuses essentielles du cycle de d&eacute;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 &eacute;l&eacute;ments (texte, URL, polices et
couleurs). Cette fonction peut &ecirc;tre appliqu&eacute;e au document actif ou &agrave; 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&reg; et Adobe Illustrator&reg;.
A
B
Panneau Rechercher
A. Option de source de la recherche B. Option d’attribut &agrave; rechercher
Recherche et remplacement d'expressions r&eacute;guli&egrave;res
Les exemples suivants illustrent l'utilisation de la fonction Rechercher et remplacer pour les expressions r&eacute;guli&egrave;res.
Exemple 1
1 Tapez K2Editor dans l'objet texte.
2 S&eacute;lectionnez Edition &gt; Rechercher et remplacer.
3 S&eacute;lectionnez Expressions r&eacute;guli&egrave;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&eacute; par K2Soft.
Exemple 2
1 Tapez IndyCar=3500:WRCar=2000 dans l'objet texte.
2 Dans la bo&icirc;te de dialogue Rechercher et remplacer, recherchez (\w{4})(\w{3})=\d+:\w+\2=\d+\d
La cha&icirc;ne IndyCar=3500:WRCar=2000 est recherch&eacute;e.
297
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 298
Automatisation des t&acirc;ches
S&eacute;lection de la source de recherche
1 Ouvrez le document.
2 Pour ouvrir le panneau Rechercher, proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Choisissez Fen&ecirc;tre &gt; Rechercher.
• Choisissez Edition &gt; Rechercher et remplacer.
• Appuyez sur les touches Ctrl+F (Windows) ou Cmde+F (Mac OS).
Remarque : si les fichiers que vous s&eacute;lectionnez sont verrouill&eacute;s ou archiv&eacute;s depuis un site Adobe Dreamweaver&reg;,
vous &ecirc;tes invit&eacute; &agrave; les d&eacute;verrouiller ou &agrave; les extraire avant de continuer.
3 Dans le menu contextuel Rechercher, s&eacute;lectionnez la source dans laquelle la recherche doit s’effectuer.
4 Dans le menu contextuel Rechercher, s&eacute;lectionnez l’attribut &agrave; rechercher. D&eacute;finissez les options de l’attribut
Recherche s&eacute;lectionn&eacute;.
5 S&eacute;lectionnez une option Rechercher et remplacer.
Remarque : lorsque vous remplacez automatiquement des objets dans plusieurs fichiers, ces fichiers sont enregistr&eacute;s ;
cette op&eacute;ration est irr&eacute;versible.
D&eacute;finition des options de recherche/remplacement
dans plusieurs fichiers
Lorsque vous effectuez une recherche et un remplacement dans plusieurs fichiers, indiquez la mani&egrave;re dont Fireworks
traite les fichiers ouverts apr&egrave;s la recherche.
1 Dans le menu Options du panneau Rechercher, cliquez sur Options de remplacement.
2 S&eacute;lectionnez Enregistrer et fermer les fichiers pour enregistrer et fermer les fichiers apr&egrave;s la recherche et le
remplacement.
Seuls les documents d&eacute;j&agrave; actifs restent ouverts.
Remarque : si l’option Enregistrer et fermer les fichiers est d&eacute;sactiv&eacute;e et que vous traitez un grand nombre de fichiers
par lots, Fireworks peut se trouver &agrave; court de m&eacute;moire et annuler le traitement par lots.
3 S&eacute;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&eacute; remplace alors le fichier original.
Ecraser les copies existantes Cr&eacute;e et conserve une seule copie de sauvegarde de chaque fichier modifi&eacute; par une
op&eacute;ration de recherche/remplacement. Si vous effectuez par la suite de nouvelles op&eacute;rations de
recherche/remplacement, le fichier original pr&eacute;c&eacute;dent remplace toujours la copie de sauvegarde. Les copies de
sauvegarde sont stock&eacute;es dans un sous-dossier intitul&eacute; Fichiers originaux.
Sauvegardes incr&eacute;mentielles Conserve toutes les copies de sauvegarde des fichiers modifi&eacute;s au cours d’op&eacute;rations
de recherche/remplacement. Les fichiers originaux sont alors d&eacute;plac&eacute;s dans le sous-dossier Fichiers originaux du
dossier actuel, et un chiffre incr&eacute;mentiel est ajout&eacute; &agrave; la suite de leur nom. Si vous effectuez de nouvelles op&eacute;rations
de recherche/remplacement, le fichier original est copi&eacute; dans le dossier Fichiers originaux, et le chiffre sup&eacute;rieur
suivant est ajout&eacute; &agrave; son nom de fichier. Par exemple, la copie de sauvegarde d’un fichier portant le nom Dessin.png
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 299
Automatisation des t&acirc;ches
est nomm&eacute;e Dessin-1.png lors de la premi&egrave;re op&eacute;ration de recherche/remplacement. La deuxi&egrave;me fois, le fichier de
sauvegarde est renomm&eacute; Dessin-2.png, etc.
4 Cliquez sur OK.
Recherche et remplacement de texte
1 Dans le panneau Rechercher, s&eacute;lectionnez l’option Rechercher du texte dans le deuxi&egrave;me menu contextuel.
2 Saisissez le texte &agrave; rechercher.
3 Saisissez le texte de remplacement.
4 (Facultatif) S&eacute;lectionnez d’autres options pour affiner la recherche.
Recherche et remplacement de polices
1 Dans le panneau Rechercher, s&eacute;lectionnez l’option Rechercher une police dans le deuxi&egrave;me menu contextuel.
2 S&eacute;lectionnez la police et le style &agrave; rechercher.
Vous pouvez affiner la recherche en d&eacute;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&eacute;lectionnez l’option Rechercher une couleur dans le deuxi&egrave;me menu contextuel.
2 Dans le menu contextuel Appliquer &agrave;, s&eacute;lectionnez un &eacute;l&eacute;ment pour indiquer comment les couleurs trouv&eacute;es
doivent &ecirc;tre appliqu&eacute;es :
Fonds et contours Permet d’effectuer une op&eacute;ration de recherche/remplacement &agrave; la fois sur les couleurs de fond
et de contour.
Toutes les propri&eacute;t&eacute;s Permet d’effectuer une op&eacute;ration de recherche/remplacement sur les couleurs de fond, de
contour et d’effet.
Fonds Permet d’effectuer une op&eacute;ration de recherche/remplacement sur une couleur de fond, &agrave; l’exception des
fonds &agrave; motifs.
Contours Permet d’effectuer une op&eacute;ration de recherche/remplacement sur les couleurs de contour uniquement.
Effets Permet d’effectuer une op&eacute;ration de recherche/remplacement sur les couleurs d’effet uniquement.
Recherche et remplacement d’URL
1 Dans le panneau Rechercher, s&eacute;lectionnez l’option Rechercher une URL dans le deuxi&egrave;me menu contextuel.
2 Saisissez l’URL &agrave; rechercher.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 300
Automatisation des t&acirc;ches
3 Saisissez l’URL de remplacement.
4 (Facultatif) S&eacute;lectionnez d’autres options pour affiner la recherche :
Expressions r&eacute;guli&egrave;res Permet d’effectuer une recherche conditionnelle sur une partie de mot ou de nombre.
Recherche et remplacement de couleurs non s&eacute;curis&eacute;es
pour le Web
Pour plus d’informations, reportez-vous &agrave; la section &laquo; Optimisation des fichiers GIF, PNG, TIFF, BMP et PICT &raquo; &agrave; la
page 244.
Une couleur est s&eacute;curis&eacute;e pour le Web si elle s’affiche de la m&ecirc;me fa&ccedil;on sur les plates-formes Mac OS et Windows. Une
couleur non s&eacute;curis&eacute;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&egrave;s utile pour convertir automatiquement un groupe de fichiers graphiques. Utilisez l’une
des options de traitement par lots :
• Conversion d’une s&eacute;lection de fichiers dans un autre format
• Conversion d’une s&eacute;lection de fichiers dans le m&ecirc;me format avec d’autres param&egrave;tres d’optimisation
• Mise &agrave; l’&eacute;chelle des fichiers export&eacute;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&eacute;fixe, d’ajout de
suffixe, de remplacement de sous-cha&icirc;ne et de remplacement de blancs
• Ex&eacute;cution de commandes sur une s&eacute;lection de fichiers
Pour plus d’informations, reportez-vous &agrave; la section &laquo; D&eacute;finition de l’emplacement d’enregistrement des fichiers de
sauvegarde &raquo; &agrave; la page 305.
Flux de production de traitement par lots
1 Choisissez Fichier &gt; Traitement par lots, puis s&eacute;lectionnez les fichiers &agrave; traiter.
• Les fichiers peuvent se trouver dans diff&eacute;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&eacute;rieurement sans ajouter de fichier.
Remarque : si les fichiers que vous s&eacute;lectionnez sont verrouill&eacute;s ou archiv&eacute;s depuis un site Dreamweaver, vous &ecirc;tes
invit&eacute; &agrave; les d&eacute;verrouiller ou &agrave; les extraire avant de continuer.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 301
Automatisation des t&acirc;ches
2 Cliquez dans la bo&icirc;te de dialogue Lot (Windows) ou Traitement par lots (Mac OS) pour s&eacute;lectionner les fichiers &agrave;
ajouter ou supprimer :
Ajouter Ajoute les fichiers et dossiers s&eacute;lectionn&eacute;s &agrave; la liste de fichiers &agrave; traiter dans le m&ecirc;me lot. Si vous
s&eacute;lectionnez un dossier, tous les fichiers valides et lisibles de ce dossier sont ajout&eacute;s au traitement par lots.
Remarque : les fichiers valides sont les fichiers qui ont &eacute;t&eacute; cr&eacute;&eacute;s, nomm&eacute;s et enregistr&eacute;s. Si la derni&egrave;re version d’un
fichier n’a pas &eacute;t&eacute; enregistr&eacute;e, il vous est demand&eacute; 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&eacute;lectionn&eacute; &agrave; la liste de fichiers &agrave; traiter dans le m&ecirc;me lot.
Supprimer Supprime les fichiers s&eacute;lectionn&eacute;s de la liste de fichiers &agrave; traiter dans le m&ecirc;me lot.
3 Pour ajouter tous les fichiers ouverts, s&eacute;lectionnez Inclure les fichiers ouverts.
Ces fichiers sont inclus dans le traitement, bien qu’ils n’apparaissent pas dans la liste des fichiers &agrave; traiter par lots.
4 Cliquez sur Suivant, puis proc&eacute;dez de l’une ou des deux des mani&egrave;res suivantes :
• Pour ajouter une t&acirc;che au lot, s&eacute;lectionnez-la dans la liste Options de traitement par lots, puis cliquez
sur Ajouter.
• Pour r&eacute;organiser la liste, s&eacute;lectionnez la t&acirc;che dans la liste Inclure dans le lot, puis cliquez sur les boutons fl&eacute;ch&eacute;s
Haut et Bas.
Remarque : les t&acirc;ches Exporter et Renommer sont toujours effectu&eacute;es en dernier. Les autres t&acirc;ches sont effectu&eacute;es
dans l’ordre dans lequel elles apparaissent.
5 Pour voir les options suppl&eacute;mentaires de cette t&acirc;che, s&eacute;lectionnez une t&acirc;che dans la liste Inclure dans le lot.
6 S&eacute;lectionnez les param&egrave;tres de chaque option suppl&eacute;mentaire. Pour supprimer une t&acirc;che de la liste, cliquez sur
Supprimer.
7 Cliquez sur Suivant.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 302
Automatisation des t&acirc;ches
8 S&eacute;lectionnez les options relatives &agrave; l’enregistrement des fichiers trait&eacute;s :
Sauvegardes S&eacute;lectionnez les options de sauvegarde des fichiers d’origine.
Enregistrer le script Enregistre les param&egrave;tres de traitement par lots pour une utilisation ult&eacute;rieure.
Sortie du traitement par lots Ex&eacute;cute le traitement par lots.
A la fin du traitement par lots, un message vous indique si des fichiers ajout&eacute;s au lot n’ont pas &eacute;t&eacute; trait&eacute;s.
Remarque : un fichier journal nomm&eacute; FireworksBatchLog.txt est cr&eacute;&eacute; pendant le traitement par lots. Le fichier
journal se trouve &agrave; l’emplacement suivant :
• \Documents and Settings\&lt;nom_utilisateur&gt;\Application Data\Adobe\Fireworks CS5\FireworksBatchLog.txt
(Windows XP)
• \Utilisateurs\&lt;nom_utilisateur&gt;\AppData\Roaming\Adobe\Fireworks CS5\ FireworksBatchLog.txt (Windows
Vista)
• /Utilisateurs/&lt;nom_utilisateur&gt;/Biblioth&egrave;que/Application Support/Adobe Fireworks
CS5/FireworksBatchLog.txt (Mac OS)
Modification des param&egrave;tres d’optimisation pendant le traitement par lots
1 Dans la liste Options de traitement par lots, s&eacute;lectionnez Exporter, puis cliquez sur Ajouter.
2 Dans le menu contextuel Param&egrave;tres, s&eacute;lectionnez l’une des options suivantes, puis cliquez sur OK :
• S&eacute;lectionnez Utiliser les param&egrave;tres de tous les fichiers afin de conserver les param&egrave;tres d’exportation
pr&eacute;c&eacute;dents de chaque fichier pendant le traitement par lots. Par exemple, les fichiers qui r&eacute;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&egrave;tres de compression d’origine pour l’exportation de chaque fichier.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 303
Automatisation des t&acirc;ches
• S&eacute;lectionnez la commande Personnaliser ou cliquez sur le bouton Modifier pour modifier les param&egrave;tres dans
la bo&icirc;te de dialogue Aper&ccedil;u de l’image.
• S&eacute;lectionnez un param&egrave;tre pr&eacute;d&eacute;fini d’exportation, par exemple GIF Web 216 ou JPEG - Qualit&eacute; sup&eacute;rieure.
Tous les fichiers sont convertis avec ce param&egrave;tre.
Modification des noms de fichier pendant le traitement par lots
1 Dans la liste Options de traitement par lots, s&eacute;lectionnez Renommer, puis cliquez sur Ajouter.
2 S&eacute;lectionnez l’option Renommer au bas de la bo&icirc;te de dialogue Traitement par lots :
Remplacer par Vous permet de remplacer des caract&egrave;res dans chaque nom de fichier par d’autres caract&egrave;res que
vous sp&eacute;cifiez ou de supprimer des caract&egrave;res de chaque nom de fichier. Par exemple, si vous disposez de fichiers
nomm&eacute;s Temp_123.jpg, Temp_124.jpg et Temp_125.jpg, vous pouvez remplacer &laquo; Temp_12 &raquo; par &laquo; Birthday &raquo;, 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&egrave;res que vous sp&eacute;cifiez ou de supprimer tous les blancs de chaque nom de fichier. Vous pouvez, par exemple,
modifier des fichiers nomm&eacute;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&eacute;fixe Permet d’entrer un texte &agrave; ajouter au d&eacute;but du nom de chaque fichier. Par exemple, si
vous indiquez &laquo; nuit_ &raquo;, le fichier Soleil_levant.gif est renomm&eacute; nuit_Soleil_levant.gif lors de son traitement
par lots.
Ajouter un suffixe Permet d’entrer un texte &agrave; ajouter &agrave; la fin du nom de chaque fichier et avant son extension. Par
exemple, si vous indiquez &laquo; _jour &raquo;, le fichier Soleil_levant.gif est renomm&eacute; Soleil_levant_jour.gif lors de son
traitement par lots.
Remarque : &agrave; chaque nom de fichier modifi&eacute;, vous pouvez appliquer une combinaison des commandes Remplacer,
Remplacer les blancs par, Ajouter un pr&eacute;fixe et Ajouter un suffixe. Par exemple, vous pouvez remplacer &laquo; Temp &raquo; par
&laquo; F&ecirc;te &raquo;, supprimer tous les blancs et ajouter un pr&eacute;fixe et un suffixe en une seule op&eacute;ration.
3 Cliquez sur Suivant pour continuer le traitement par lots.
Mise &agrave; l’&eacute;chelle de graphiques pendant le traitement par lots
1 Dans la liste Options de traitement par lots, s&eacute;lectionnez Mettre &agrave; l’&eacute;chelle, puis cliquez sur Ajouter.
2 Dans le menu contextuel Echelle, s&eacute;lectionnez une option de mise &agrave; l’&eacute;chelle :
Pas de mise &agrave; l’&eacute;chelle Exporte les fichiers sans modification.
Mise &agrave; l’&eacute;chelle avec cette taille Permet une mise &agrave; l’&eacute;chelle des images &agrave; la largeur et la hauteur sp&eacute;cifi&eacute;es.
Mise &agrave; l’&eacute;chelle de la zone Permet une mise &agrave; l’&eacute;chelle des images proportionnelle &agrave; la largeur et &agrave; la hauteur
maximales sp&eacute;cifi&eacute;es.
S&eacute;lectionnez Mise &agrave; l’&eacute;chelle de la zone pour uniformiser un groupe d’images en vignettes de taille &eacute;gale.
Mise &agrave; l’&eacute;chelle avec ce pourcentage Modifie la taille des images en fonction du pourcentage indiqu&eacute;.
3 (Facultatif) Si vous s&eacute;lectionnez Mise &agrave; l’&eacute;chelle de la zone, s&eacute;lectionnez &eacute;galement l’option Mettre uniquement &agrave;
l’&eacute;chelle les documents d&eacute;passant la taille cible.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 304
Automatisation des t&acirc;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&eacute;lectionnez Rechercher et Remplacer, puis cliquez sur Ajouter.
2 Cliquez sur Edition.
3 S&eacute;lectionnez le type d’attribut &agrave; rechercher et remplacer.
4 Dans la zone Rechercher, entrez ou s&eacute;lectionnez l’&eacute;l&eacute;ment sp&eacute;cifique &agrave; rechercher.
5 Dans la zone Remplacer par, entrez ou s&eacute;lectionnez l’&eacute;l&eacute;ment sp&eacute;cifique de remplacement.
6 Cliquez sur OK pour enregistrer les param&egrave;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&egrave;me &agrave; un autre. Il d&eacute;pend &eacute;galement du fait que
le panneau est disponible uniquement pour votre profil utilisateur ou pour tous les utilisateurs. Les dossiers Command
Panels sont situ&eacute;s dans le dossier Configuration du dossier de l’application Fireworks et dans votre dossier Fireworks de
profil utilisateur sp&eacute;cifique.
Ex&eacute;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) &agrave;
c&ocirc;t&eacute; de l’option Commandes dans la liste Options de traitement par lots.
2 Pour ajouter une commande &agrave; la liste Inclure dans le lot, s&eacute;lectionnez une commande, puis cliquez sur Ajouter.
Remarque : par ailleurs, certaines commandes ne peuvent fonctionner pendant un traitement par lots. S&eacute;lectionnez
des commandes pouvant &ecirc;tre ex&eacute;cut&eacute;es dans le document sans qu’il soit n&eacute;cessaire de s&eacute;lectionner un objet.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 305
Automatisation des t&acirc;ches
D&eacute;finition de l’emplacement d’enregistrement des fichiers de sauvegarde
Les copies de sauvegarde des fichiers sont plac&eacute;es dans un sous-dossier intitul&eacute; Fichiers originaux du dossier de chaque
fichier original.
1 S&eacute;lectionnez l’emplacement du dossier de sortie du traitement par lots.
2 S&eacute;lectionnez Sauvegardes pour d&eacute;finir vos options de sauvegarde.
3 S&eacute;lectionnez le type de sauvegarde des fichiers :
Ecraser les copies existantes Remplace les &eacute;ventuels fichiers de sauvegarde pr&eacute;c&eacute;dents.
Sauvegardes incr&eacute;mentielles Conserve une copie de tous les fichiers de sauvegarde. Lors d’un nouveau traitement
par lots, un chiffre incr&eacute;mentiel est ajout&eacute; &agrave; la suite du nom de chaque nouvelle copie de sauvegarde.
Remarque : si l’option Sauvegardes n’est pas activ&eacute;e, le traitement par lots &eacute;crase le fichier initial si le fichier de sortie
porte le m&ecirc;me nom et est enregistr&eacute; dans le m&ecirc;me format. Toutefois, si le traitement par lots comporte un changement
de format de fichier, le fichier initial n’est ni d&eacute;plac&eacute; ni effac&eacute;.
Traitements par lots sous forme de scripts
Si vous enregistrez votre script dans le dossier Commands de votre disque dur, il est ensuite ajout&eacute; dans le
menu Commandes de Fireworks.
Cr&eacute;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&eacute;s dans le dossier Configuration
du dossier de l’application Fireworks et dans votre dossier Fireworks de profil utilisateur sp&eacute;cifique.
3 Cliquez sur Enregistrer.
Ex&eacute;cution d’un script de traitement par lots
1 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Dans Fireworks, choisissez Commandes &gt; Ex&eacute;cuter un script.
• En dehors de Fireworks, cliquez deux fois sur le nom de fichier du script enregistr&eacute; sur le disque dur.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 306
Automatisation des t&acirc;ches
2 S&eacute;lectionnez un script, puis cliquez sur Ouvrir.
Glisser-d&eacute;poser des scripts fr&eacute;quemment utilis&eacute;s
1 Enregistrez un script.
2 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Faites glisser l’ic&ocirc;ne du fichier de script vers l’ic&ocirc;ne de bureau Fireworks.
• Faites glisser l’ic&ocirc;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&ocirc;ne de Fireworks,
les fichiers graphiques sont trait&eacute;s plusieurs fois, une fois pour chaque script.
Extension de Fireworks
Une extension d&eacute;signe un script de commandes, un panneau de commandes, une biblioth&egrave;que, un filtre, un motif, une
texture ou une forme automatique, qui compl&egrave;te les fonctionnalit&eacute;s de Fireworks. Fireworks est livr&eacute; avec Adobe
Extension Manager, un programme qui permet d’installer, de g&eacute;rer et de supprimer ais&eacute;ment des extensions. Le menu
Commandes propose plusieurs extensions par d&eacute;faut.
Si vous ma&icirc;trisez JavaScript, vous pouvez cr&eacute;er vos propres extensions Fireworks. Vous pouvez &eacute;galement utiliser
l’architecture Fireworks Cross Product Communication pour permettre aux applications &eacute;crites en ActionScript™
et C++ de contr&ocirc;ler Fireworks. Pour plus d’informations, consultez l’Aide Extension de Fireworks.
Lorsque vous installez ou cr&eacute;ez des extensions, notez les points suivants :
• Lorsque vous installez une extension ou cr&eacute;ez une commande personnalis&eacute;e, Fireworks la place dans le
menu Commandes.
• Les extensions tierces sont stock&eacute;es dans des sous-dossiers du dossier Configuration, dans le dossier de l’application
Fireworks.
• Les commandes stock&eacute;es dans le dossier Command Panels en tant que fichiers SWF sont disponibles sous forme
de panneaux dans le menu Fen&ecirc;tre.
• Les commandes que vous cr&eacute;ez et enregistrez &agrave; l’aide du panneau Historique sont stock&eacute;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&eacute;dez de l’une des mani&egrave;res suivantes :
• Choisissez Commandes &gt; G&eacute;rer les extensions.
• Choisissez Aide &gt; G&eacute;rer les extensions.
Cr&eacute;ation d'un fichier MXP pour les actifs
1 Cr&eacute;ez un fichier MXI. Vous pouvez utiliser une copie du fichier MXI en tant que mod&egrave;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&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 307
Automatisation des t&acirc;ches
2 Dans la balise &lt;files&gt;, effectuez ce qui suit :
a Dans l'attribut &lt;filename&gt;, sp&eacute;cifiez le nom des fichiers qui sont pr&eacute;sents localement et doivent &ecirc;tre inclus dans
le package MXP.
b Dans l'attribut &lt;destination&gt;, sp&eacute;cifiez l'emplacement de l'ordinateur de l'utilisateur o&ugrave; les fichiers doivent
&ecirc;tre install&eacute;s.
3 Choisissez Commandes &gt; G&eacute;rer les extensions.
4 Dans Adobe Extension Manager, s&eacute;lectionnez Fichier &gt; Extension MXP du package.
5 S&eacute;lectionnez le fichier MXI.
6 Sp&eacute;cifiez un emplacement pour le fichier MXP.
7 Double-cliquez sur le fichier MXP cr&eacute;&eacute; &agrave; l'emplacement sp&eacute;cifi&eacute;. Les fichiers mentionn&eacute;s dans le fichier MXI sont
ajout&eacute;s &agrave; l'emplacement sp&eacute;cifi&eacute; dans le fichier.
Par exemple, si vous souhaitez ajouter un ensemble de fichiers STL dans Fireworks, sp&eacute;cifiez l'emplacement des
fichiers STL sous la forme $Fireworks\First Run\Styles dans le fichier MXI. Lorsque vous ex&eacute;cutez un fichier
MXP cr&eacute;&eacute; au moyen d'un fichier MXI, les fichiers STL sont install&eacute;s &agrave; cet emplacement. Les Styles sont accessibles au
moyen du panneau Styles dans Fireworks apr&egrave;s avoir ferm&eacute;, puis activ&eacute; &agrave; nouveau l'application.
Scripts
Cr&eacute;ation de scripts avec le panneau Historique
Le panneau Historique enregistre la liste de toutes vos actions dans Fireworks. Chaque &eacute;tape est stock&eacute;e sur une ligne
distincte du panneau Historique, dans l’ordre chronologique inverse (en commen&ccedil;ant par la plus r&eacute;cente). Par d&eacute;faut,
le panneau conserve la trace des vingt derni&egrave;res &eacute;tapes. Vous pouvez cependant modifier cette valeur &agrave; tout moment.
Vous pouvez enregistrer des groupes d’&eacute;tapes dans le panneau Historique sous forme de commandes r&eacute;utilisables. Les
commandes enregistr&eacute;es ne sont pas propres &agrave; un document en particulier. Vous pouvez ainsi les utiliser dans tout
document Fireworks.
Les commandes enregistr&eacute;es sont stock&eacute;es en tant que fichiers JSF dans le dossier Commands de votre dossier
Fireworks de profil utilisateur sp&eacute;cifique.
Vous pouvez &agrave; tout moment ex&eacute;cuter des commandes ou une s&eacute;lection d’actions enregistr&eacute;es dans le
panneau Historique.
Enregistrement d’&eacute;tapes en tant que commande &agrave; r&eacute;utiliser
1 S&eacute;lectionnez les &eacute;tapes &agrave; enregistrer sous forme de commande :
• Cliquez sur une &eacute;tape, puis maintenez la touche Maj enfonc&eacute;e et cliquez sur une autre &eacute;tape pour s&eacute;lectionner
une s&eacute;rie d’&eacute;tapes &agrave; enregistrer comme commande.
• Cliquez tout en maintenant la touche Ctrl (Windows) ou Cmde (Mac OS) enfonc&eacute;e pour s&eacute;lectionner des &eacute;tapes
non contigu&euml;s.
2 Cliquez sur le bouton Enregistrer les &eacute;tapes sous forme de commande, en bas du panneau Historique.
3 Indiquez le nom de la commande, puis cliquez sur OK.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 308
Automatisation des t&acirc;ches
Annulation ou restauration d’&eacute;tapes
❖ Proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Faites glisser le marqueur d’annulation vers le haut du panneau jusqu’&agrave; la derni&egrave;re &eacute;tape &agrave; annuler ou &agrave; r&eacute;p&eacute;ter.
• Cliquez sur la piste du curseur dans la partie gauche du panneau Historique.
Remarque : les &eacute;tapes annul&eacute;es restent dans le panneau Historique, mais elles apparaissent gris&eacute;es.
Modification du nombre d’&eacute;tapes m&eacute;moris&eacute;es par le panneau Historique
1 Cliquez sur Edition &gt; Pr&eacute;f&eacute;rences (Windows) ou Fireworks &gt; Pr&eacute;f&eacute;rences (Mac OS).
2 Modifiez la valeur de l’option Nombre max. d’actions annul&eacute;es.
Remarque : plus ce nombre d’&eacute;tapes est &eacute;lev&eacute;, plus la m&eacute;moire vive de l’ordinateur est sollicit&eacute;e.
Effacement de toutes les &eacute;tapes
❖ Dans le menu Options du panneau Historique, cliquez sur Effacer l’historique.
Effacer des &eacute;tapes permet de lib&eacute;rer de la m&eacute;moire et de l’espace sur le disque dur. Vous ne pouvez pas annuler des
modifications apport&eacute;es &agrave; des &eacute;tapes effac&eacute;es.
Nouvelle ex&eacute;cution d’une commande enregistr&eacute;e
1 Si n&eacute;cessaire, s&eacute;lectionnez un ou plusieurs objets.
2 Dans le menu Commandes, s&eacute;lectionnez la commande.
R&eacute;ex&eacute;cution d’une s&eacute;lection d’&eacute;tapes
1 S&eacute;lectionnez un ou plusieurs objets.
2 Dans le panneau Historique, s&eacute;lectionnez les &eacute;tapes.
3 Cliquez sur le bouton R&eacute;ex&eacute;cuter, en bas du panneau Historique.
Les &eacute;tapes marqu&eacute;es d’un X ne peuvent pas &ecirc;tre r&eacute;p&eacute;t&eacute;es ni r&eacute;ex&eacute;cut&eacute;es. Des lignes de s&eacute;paration indiquent qu’un
objet diff&eacute;rent a &eacute;t&eacute; s&eacute;lectionn&eacute;. Les commandes cr&eacute;&eacute;es &agrave; partir d’&eacute;tapes qui traversent une ligne de s&eacute;paration
peuvent produire des r&eacute;sultats impr&eacute;visibles.
Application d’&eacute;tapes s&eacute;lectionn&eacute;es &agrave; des objets dans de nombreux documents
1 S&eacute;lectionnez une plage d’&eacute;tapes.
2 Cliquez sur le bouton Copier les &eacute;tapes dans le Presse-papiers.
3 S&eacute;lectionnez un ou plusieurs objets dans un document Fireworks.
4 Choisissez Edition &gt; Coller.
R&eacute;p&eacute;tition de la derni&egrave;re &eacute;tape
❖ Choisissez Edition &gt; R&eacute;p&eacute;ter le script de commandes.
A propos de la cr&eacute;ation de scripts &agrave; l’aide de JavaScript
Pour r&eacute;duire l’aspect fastidieux de certaines t&acirc;ches r&eacute;p&eacute;titives, cr&eacute;ez dans un &eacute;diteur de texte votre propre code
JavaScript &agrave; faire ex&eacute;cuter dans Fireworks. Vous pouvez contr&ocirc;ler pratiquement toutes les commandes et fonctions de
Fireworks en JavaScript. Dreamweaver utilise &eacute;galement JavaScript. Vous pouvez donc cr&eacute;er des scripts pour contr&ocirc;ler
Fireworks depuis Dreamweaver.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 309
Automatisation des t&acirc;ches
Pour consulter la documentation sur l’API JavaScript, reportez-vous &agrave; la section Extension de Fireworks.
Cr&eacute;ation de commandes et de panneaux avec Flash
Pour cr&eacute;er vos propres commandes ou panneaux Fireworks, cr&eacute;ez des s&eacute;quences SWF contenant du code JavaScript &agrave;
l’aide d’Adobe Flash&reg;. Enregistrez les s&eacute;quences utilis&eacute;es en tant que commandes dans le dossier Commands de votre
disque dur. Enregistrez les s&eacute;quences utilis&eacute;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&eacute;s dans le
dossier Configuration de l’application Fireworks et dans votre dossier Fireworks de profil utilisateur sp&eacute;cifique.
Gestion des commandes
Remarque : vous pouvez renommer ou supprimer des commandes que vous avez cr&eacute;&eacute;es &agrave; l’aide de l’option G&eacute;rer les
commandes enregistr&eacute;es de Fireworks. Utilisez Extension Manager pour g&eacute;rer les autres commandes et extensions
install&eacute;es avec Fireworks ou celles que vous avez t&eacute;l&eacute;charg&eacute;es puis install&eacute;es &agrave; partir du site Web Adobe Exchange.
Modification du nom d’une commande personnalis&eacute;e
1 S&eacute;lectionnez Commandes &gt; G&eacute;rer les commandes enregistr&eacute;es, puis s&eacute;lectionnez une commande.
2 Cliquez sur Renommer, entrez un nouveau nom, puis cliquez sur OK.
Suppression d’une commande personnalis&eacute;e
❖ Proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Dans Fireworks, choisissez la commande Commandes &gt; G&eacute;rer les commandes enregistr&eacute;es. S&eacute;lectionnez
ensuite la commande, puis cliquez sur Supprimer.
• Sur votre disque dur, supprimez le fichier JSF associ&eacute; &agrave; la commande dans le dossier Commands de votre dossier
Fireworks de profil utilisateur sp&eacute;cifique.
Remarque : pour renommer ou supprimer une commande fournie avec Fireworks ou t&eacute;l&eacute;charg&eacute;e &agrave; partir d’Adobe
Exchange, ouvrez Extension Manager.
Edition d’une commande &agrave; l’aide de JavaScript
Les scripts de commandes sont enregistr&eacute;s en tant que code JavaScript et peuvent &ecirc;tre modifi&eacute;s &agrave; l’aide de tout &eacute;diteur
de texte.
1 A partir du bureau, localisez le dossier Commands ou Command Panels appropri&eacute; sur le disque dur.
2 Ouvrez le fichier de script dans un &eacute;diteur de texte, puis modifiez le code JavaScript.
3 Enregistrez le script, puis fermez-le.
Edition d’actions s&eacute;lectionn&eacute;es dans le panneau Historique &agrave; l’aide de
JavaScript
1 S&eacute;lectionnez une plage d’&eacute;tapes dans le panneau Historique de Fireworks.
2 Cliquez sur le bouton Copier les &eacute;tapes dans le Presse-papiers, en bas du panneau Historique.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 310
Automatisation des t&acirc;ches
3 Cr&eacute;ez un document dans un &eacute;diteur de texte.
4 Collez les &eacute;tapes dans le nouveau document texte, puis apportez-y les modifications n&eacute;cessaires.
5 Enregistrez le script, puis fermez-le.
6 Copiez le script dans le dossier Commands du disque dur.
• Les commandes enregistr&eacute;es directement dans le dossier Commands ou le panneau Historique apparaissent
instantan&eacute;ment dans le menu Commandes.
• Les commandes enregistr&eacute;es dans le dossier Command Panels sont disponibles dans le menu Fen&ecirc;tre
uniquement apr&egrave;s le red&eacute;marrage de Fireworks.
Derni&egrave;re mise &agrave; jour le 29/4/2010
Chapitre 20 : Pr&eacute;f&eacute;rences et raccourcis
clavier
Dans Fireworks, les param&egrave;tres de pr&eacute;f&eacute;rences vous permettent de contr&ocirc;ler la pr&eacute;sentation g&eacute;n&eacute;rale de l’interface
utilisateur et de personnaliser certains aspects de l’&eacute;dition et de l’utilisation des dossiers. Vous pouvez &eacute;galement
personnaliser les raccourcis clavier.
D&eacute;finition des pr&eacute;f&eacute;rences
1 Choisissez Edition &gt; Pr&eacute;f&eacute;rences (Windows) ou Fireworks &gt; Pr&eacute;f&eacute;rences (Mac OS).
2 S&eacute;lectionnez la cat&eacute;gorie de pr&eacute;f&eacute;rences que vous souhaitez modifier.
3 Apportez les modifications requises, puis cliquez sur OK.
Pr&eacute;f&eacute;rences g&eacute;n&eacute;rales
Options du document Pour ouvrir l’application directement dans l’espace de travail, d&eacute;s&eacute;lectionnez Afficher l’&eacute;cran
de d&eacute;marrage. Pour conserver les dimensions de contour et d’effets lorsque vous redimensionnez des objets,
d&eacute;s&eacute;lectionnez Mise &agrave; l’&eacute;chelle des contours et des effets.
Enregistrement des fichiers : Ajouter des ic&ocirc;nes d’aper&ccedil;u (Mac OS uniquement) Permet d’afficher ou de masquer les
vignettes des fichiers PNG Fireworks pr&eacute;sents sur le disque dur. Lorsque cette option est d&eacute;s&eacute;lectionn&eacute;e, Fireworks
affiche l’ic&ocirc;ne standard des fichiers PNG Fireworks. Les modifications sont appliqu&eacute;es une fois la sauvegarde du
fichier effectu&eacute;e.
Nombre d’annulations maximal Permet de d&eacute;finir un nombre d’&eacute;tapes d’annulation/de r&eacute;tablissement compris
entre 0 et 1 009. Ce param&egrave;tre s’applique &agrave; la fois &agrave; la commande Edition &gt; Annuler et au panneau Historique. Un
nombre d’&eacute;tapes &eacute;lev&eacute; peut solliciter davantage de m&eacute;moire.
Interpolation Choisissez l’une des quatre m&eacute;thodes de mise &agrave; l’&eacute;chelle utilis&eacute;es par Fireworks pour interpoler les pixels
lors des mises &agrave; l’&eacute;chelle d’images :
• L’interpolation bicubique, m&eacute;thode par d&eacute;faut, produit les r&eacute;sultats les plus nets et de la meilleure qualit&eacute; dans la
plupart des cas.
• L’interpolation bilin&eacute;aire permet d’obtenir des r&eacute;sultats plus nets que l’interpolation adoucie, mais moins nets que
l’interpolation bicubique.
• L’interpolation adoucie, qui &eacute;tait utilis&eacute;e par Fireworks 1, produit un l&eacute;ger flou et &eacute;limine les d&eacute;tails nets. Elle est
utile lorsque les autres produisent des artefacts.
• L’interpolation au plus proche produit des bords dentel&eacute;s avec des contrastes marqu&eacute;s sans flou. L’effet est
semblable &agrave; celui du zoom avant ou arri&egrave;re sur une image.
Couleurs par d&eacute;faut S&eacute;lectionnez les couleurs par d&eacute;faut utilis&eacute;es pour les contours, les fonds et les trac&eacute;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&eacute;faut du panneau Outils.
Espace de travail Pour r&eacute;duire automatiquement des panneaux ancr&eacute;s lorsque vous cliquez hors de ces derniers,
s&eacute;lectionnez l’option R&eacute;duire automatiquement les panneaux d’ic&ocirc;ne.
311
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 312
Pr&eacute;f&eacute;rences et raccourcis clavier
Pr&eacute;f&eacute;rences de modification
Les pr&eacute;f&eacute;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&eacute;finitivement les pixels ou les objets situ&eacute;s en dehors du cadre
de s&eacute;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&eacute;s lors de la conversion en rectangle de s&eacute;lection Supprime d&eacute;finitivement le trac&eacute; une fois qu’il a
&eacute;t&eacute; converti en cadre de s&eacute;lection.
Curseurs de la taille du pinceau D&eacute;finit la taille et le format des pointeurs des outils. Pour certains pinceaux larges &agrave;
plusieurs pointes, le curseur prend par d&eacute;faut la forme d’une croix. Lorsque cette option et la pr&eacute;f&eacute;rence Curseurs
pr&eacute;cis sont d&eacute;sactiv&eacute;es, le curseur affiche l’ic&ocirc;ne des diff&eacute;rents outils.
Curseurs pr&eacute;cis Permet de remplacer les pointeurs des diff&eacute;rents outils par un pointeur en croix.
D&eacute;sactiver &quot;Masquer les bords&quot; D&eacute;sactive l’option Masquer les bords lorsque la s&eacute;lection change.
Afficher l’aper&ccedil;u de l’outil Plume Fournit un aper&ccedil;u du segment de trac&eacute; suivant que vous allez cr&eacute;er d’un clic avec
l’outil Plume.
Points pleins Affiche les points s&eacute;lectionn&eacute;s en gris&eacute; ; les points d&eacute;s&eacute;lectionn&eacute;s sont pleins.
Surbrillance souris Met en surbrillance les &eacute;l&eacute;ments s&eacute;lectionn&eacute;s en cliquant avec le bouton de la souris.
Aper&ccedil;u du glissement Affiche l’aper&ccedil;u du nouvel emplacement d’objet lors d’une op&eacute;ration de glissement.
Afficher les poign&eacute;es du fond Permet de modifier les fonds &agrave; l’&eacute;cran.
Choisir la distance Sp&eacute;cifie la distance (de 1 &agrave; 10 pixels) &agrave; respecter entre un objet et le pointeur pour pouvoir effectuer
la s&eacute;lection.
Mise &agrave; l’&eacute;chelle en 9 tranches Dissocie automatiquement les formes automatiques lorsque vous utilisez l’outil Mise &agrave;
l’&eacute;chelle en 9 tranches sans afficher la bo&icirc;te de dialogue de confirmation pour dissocier ces formes.
Pr&eacute;f&eacute;rences de rep&egrave;res et de grilles
Cases de couleur Cliquez dessus pour afficher une fen&ecirc;tre contextuelle dans laquelle s&eacute;lectionner une couleur affich&eacute;e
ou saisir les valeurs hexad&eacute;cimales correspondantes.
Afficher Affiche les rep&egrave;res ou les grilles sur la zone de travail.
Magn&eacute;tisme Accroche des objets aux rep&egrave;res ou au quadrillage de la grille.
Verrouiller Verrouille les rep&egrave;res d&eacute;j&agrave; positionn&eacute;s pour &eacute;viter tout d&eacute;placement accidentel pendant la modification
d’objets.
Distance de magn&eacute;tisme D&eacute;termine la distance (de 1 &agrave; 10 pixels) &agrave; partir de laquelle l’objet que vous d&eacute;placez
s’accroche &agrave; la grille ou au rep&egrave;re. L’option Distance de magn&eacute;tisme est disponible lorsque l’option Accrocher aux
grilles ou Accrocher aux rep&egrave;res est s&eacute;lectionn&eacute;e.
Param&egrave;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&eacute;f&eacute;rences de texte
Interlignage, d&eacute;calage vertical Modifie la valeur d’incr&eacute;ment des raccourcis clavier associ&eacute;s.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 313
Pr&eacute;f&eacute;rences et raccourcis clavier
Pour cr&eacute;er une liste compl&egrave;te de raccourcis relatifs au texte, reportez-vous &agrave; la section &laquo; Cr&eacute;ation d’un feuille de
r&eacute;f&eacute;rence pour le jeu de raccourcis actuel &raquo; &agrave; la page 316.
Afficher les noms de police en anglais Remplace les caract&egrave;res asiatiques dans les menus de police.
Remarque : cette modification n’est prise en compte qu’apr&egrave;s avoir red&eacute;marr&eacute; Fireworks.
Taille d’aper&ccedil;u de la police Indique la taille du point des exemples de police propos&eacute;s dans les menus.
Nombre de polices r&eacute;centes D&eacute;termine le nombre maximal de polices utilis&eacute;es r&eacute;cemment, r&eacute;pertori&eacute;es au-dessus de
la s&eacute;paration dans les menus de polices.
Remarque : cette modification n’est prise en compte qu’apr&egrave;s avoir red&eacute;marr&eacute; Fireworks.
Police par d&eacute;faut D&eacute;signe la police de substitution utilis&eacute;e pour les polices du document qui font d&eacute;faut &agrave; votre
syst&egrave;me.
Pr&eacute;f&eacute;rences d’importation et d’ouverture de fichiers Photoshop
Ces pr&eacute;f&eacute;rences d&eacute;terminent le comportement de Fireworks lorsque vous importez ou ouvrez des fichiers Photoshop.
Pour plus d’informations, reportez-vous &agrave; la section &laquo; Utilisation de Photoshop &raquo; &agrave; la page 284.
Afficher la bo&icirc;te de dialogue d’importation Affiche les options disponibles lors des importations de fichiers PSD
effectu&eacute;es &agrave; l’aide de la commande Fichier &gt; Importer.
Afficher la bo&icirc;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 &gt; Ouvrir.
Utiliser les calques entre les &eacute;tats Ajoute chaque calque import&eacute; &agrave; tous les &eacute;tats du fichier Fireworks. Si cette option
n’est pas s&eacute;lectionn&eacute;e, Fireworks ajoute chaque calque dans un &eacute;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&eacute;es Importe les images bitmap et leurs effets sous la forme d’images fusionn&eacute;es que vous ne
pouvez pas modifier.
Texte modifiable Importe les calques de texte sous la forme de texte &eacute;ditable. Dans Fireworks, vous ne pouvez pas
modifier la mise en forme du texte (barr&eacute;, exposant, indice et trait d’union automatique par exemple). De m&ecirc;me, vous
ne pouvez pas s&eacute;parer les ligatures du texte source.
Images bitmap fusionn&eacute;es Importe les calques de texte sous la forme d’images fusionn&eacute;es que vous ne pouvez pas
modifier.
Trac&eacute;s et effets modifiables Permet de modifier les calques de formes et leurs effets associ&eacute;s.
Images bitmap fusionn&eacute;es Importe les calques de formes sous la forme d’images fusionn&eacute;es que vous ne pouvez pas
modifier.
Images bitmap fusionn&eacute;es avec effets modifiables Importe les calques de formes sous la forme d’images fusionn&eacute;es
tout en permettant la modification des effets qui leur sont associ&eacute;s.
Effets de calques Remplace les effets dynamiques Photoshop par des filtres Fireworks similaires.
Masques de trac&eacute; d’&eacute;cr&ecirc;tage Pixellise et supprime les masques d’&eacute;cr&ecirc;tage tout en conservant l’aspect. D&eacute;s&eacute;lectionnez
cette option si vous souhaitez modifier ces masques dans Fireworks. Cependant, leur aspect est diff&eacute;rent par rapport &agrave;
Photoshop.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 314
Pr&eacute;f&eacute;rences et raccourcis clavier
Pr&eacute;f&eacute;rences de lancement et de modification
Les pr&eacute;f&eacute;rences Lancer et Modifier d&eacute;terminent la fa&ccedil;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 &agrave; partir d’une application externe D&eacute;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 &agrave; partir d’une application externe D&eacute;termine si le fichier PNG Fireworks
d’origine s’affiche lorsque vous optimisez un graphique. Ce param&egrave;tre ne s’applique pas &agrave; Director, qui affiche et
optimise automatiquement un graphique sans demander de sp&eacute;cifier le fichier source PNG, m&ecirc;me si cette
pr&eacute;f&eacute;rence est d&eacute;finie diff&eacute;remment dans Fireworks.
2 Indiquez la fa&ccedil;on dont vous souhaitez modifier les images Fireworks plac&eacute;es dans des applications externes :
Toujours utiliser le format PNG source Ouvre automatiquement le fichier PNG Fireworks d&eacute;fini dans la Design
Note comme source de l’image import&eacute;e. Des mises &agrave; jour sont effectu&eacute;es dans le fichier source PNG ainsi que dans
l’image plac&eacute;e correspondante.
Ne jamais utiliser le fichier PNG source Ouvre automatiquement l’image Fireworks import&eacute;e, qu’il existe ou non un
fichier PNG source. Les mises &agrave; jour ne s’appliquent qu’&agrave; l’image plac&eacute;e.
Demander lors du lancement Vous permet de sp&eacute;cifier &agrave; chaque fois si le fichier source PNG doit &ecirc;tre ouvert.
Lorsque vous modifiez ou optimisez une image import&eacute;e, vous devez d&eacute;cider du type d’image &agrave; lancer et &agrave; modifier.
Vous pouvez &eacute;galement d&eacute;finir des pr&eacute;f&eacute;rences de lancement et de modification globales depuis cette invite.
Pr&eacute;f&eacute;rences des modules externes
Ces pr&eacute;f&eacute;rences vous permettent d’acc&eacute;der &agrave; 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&eacute;seau.
Les modules externes Photoshop figurent dans le menu Filtres de Fireworks et dans le menu Ajouter des effets de
l’inspecteur des propri&eacute;t&eacute;s. Les textures ou motifs enregistr&eacute;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&eacute;t&eacute;s.
Pour plus d’informations sur les textures et les motifs, reportez-vous &agrave; la section &laquo; Ajout d’une texture &agrave; un contour
ou &agrave; un fond &raquo; &agrave; la page 128.
Restauration des pr&eacute;f&eacute;rences par d&eacute;faut
1 Quittez Fireworks.
2 Localisez le fichier de pr&eacute;f&eacute;rences de Fireworks sur le disque dur, puis supprimez-le.
L’emplacement exact de ce fichier varie d’un syst&egrave;me &agrave; un autre. Voir &laquo; Localisation du fichier de pr&eacute;f&eacute;rences
Fireworks &raquo; &agrave; la page 317.
3 Relancez Fireworks.
Lors du prochain lancement de Fireworks, un nouveau fichier de pr&eacute;f&eacute;rences sera cr&eacute;&eacute; ; il permettra de restaurer la
configuration d’origine de Fireworks.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 315
Pr&eacute;f&eacute;rences et raccourcis clavier
S&eacute;lection et personnalisation des raccourcis clavier
Le programme Fireworks permet d’utiliser des raccourcis clavier pour s&eacute;lectionner des commandes de menu,
s&eacute;lectionner des outils dans le panneau Outils et acc&eacute;l&eacute;rer diff&eacute;rentes t&acirc;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&eacute;rente, vous pouvez choisir le jeu de raccourcis de votre
choix.
S&eacute;lection d’un jeu de raccourcis clavier
1 Choisissez la commande Edition &gt; Raccourcis clavier (Windows) ou Fireworks &gt; Raccourcis clavier (Mac OS).
2 Dans le menu contextuel Jeu actif, s&eacute;lectionnez le jeu de raccourcis souhait&eacute;, puis cliquez sur OK.
Cr&eacute;ation de raccourcis personnalis&eacute;s et secondaires
Vous pouvez cr&eacute;er des raccourcis clavier personnalis&eacute;s &agrave; partir d’un jeu pr&eacute;install&eacute; et cr&eacute;er des raccourcis secondaires
repr&eacute;sentatifs de diff&eacute;rentes m&eacute;thodes d’ex&eacute;cution d’une action.
Les raccourcis clavier, &agrave; 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 &agrave; une lettre ou une touche
num&eacute;rique.
1 Choisissez la commande Edition &gt; Raccourcis clavier (Windows) ou Fireworks &gt; Raccourcis clavier (Mac OS).
2 Cliquez sur le bouton Dupliquer ensemble.
3 Saisissez le nom du jeu personnalis&eacute;, puis cliquez sur OK.
4 Dans la liste Commandes, s&eacute;lectionnez la cat&eacute;gorie de raccourci appropri&eacute;e :
Commandes de menu Commandes accessibles depuis la barre de menus
Outils Tous les outils du panneau Outils
Divers S&eacute;rie d’actions pr&eacute;d&eacute;finies
5 Dans la liste Commandes, s&eacute;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&eacute;es pour d&eacute;finir le nouveau
raccourci sur le clavier.
7 Pour ajouter un raccourci secondaire &agrave; la liste des raccourcis, cliquez sur le bouton Ajouter un raccourci (+). Sinon,
cliquez sur Changer pour remplacer le raccourci s&eacute;lectionn&eacute;.
Suppression de raccourcis personnalis&eacute;s et de jeux de raccourcis
Suppression d’un jeu de raccourcis personnalis&eacute;
1 Choisissez la commande Edition &gt; Raccourcis clavier (Windows) ou Fireworks &gt; Raccourcis clavier (Mac OS).
2 Cliquez sur le bouton Supprimer l’ensemble (ic&ocirc;ne de la corbeille).
3 S&eacute;lectionnez un jeu de raccourcis clavier.
4 Cliquez sur le bouton Supprimer.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 316
Pr&eacute;f&eacute;rences et raccourcis clavier
Suppression d’un raccourci personnalis&eacute;
1 Dans la liste Commandes, s&eacute;lectionnez la commande.
2 Dans la liste Raccourcis, s&eacute;lectionnez le raccourci personnalis&eacute;.
3 Cliquez sur le bouton Supprimer un raccourci s&eacute;lectionn&eacute; (-).
Cr&eacute;ation d’un feuille de r&eacute;f&eacute;rence pour le jeu de raccourcis actuel
Une feuille de r&eacute;f&eacute;rence est un enregistrement de l’ensemble de raccourcis actif qui est stock&eacute; sous forme de
table HTML. Vous pouvez afficher cette feuille de r&eacute;f&eacute;rence avec un navigateur Web ou l’imprimer.
Remarque : les feuilles de r&eacute;f&eacute;rence export&eacute;es depuis Fireworks sont cod&eacute;es &agrave; l’aide du codage UTF-8.
1 Choisissez la commande Edition &gt; Raccourcis clavier (Windows) ou Fireworks &gt; Raccourcis clavier (Mac OS).
2 Cliquez sur le bouton Exporter l’ensemble en tant que code HTML &agrave; c&ocirc;t&eacute; de la zone de texte Jeu actif.
3 Entrez le nom de la feuille de r&eacute;f&eacute;rence, puis s&eacute;lectionnez un emplacement de fichier.
4 Cliquez sur Enregistrer.
Utilisation des fichiers de configuration
Les fichiers de configuration sp&eacute;cifiques &agrave; 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 &eacute;galement les fichiers de configuration ma&icirc;tres.
Remarque : pour rendre visibles les fichiers de configuration, v&eacute;rifiez que les options d’affichage des dossiers sont d&eacute;finies
de mani&egrave;re &agrave; afficher tous les fichiers et dossiers. Sur certains syst&egrave;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&eacute;e un ensemble de fichiers de configuration distinct. Ces fichiers sont stock&eacute;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&egrave;me d’exploitation et selon que
vous utilisez un syst&egrave;me multiutilisateur ou un syst&egrave;me autonome. Pour plus d’informations sur l’emplacement de ce
dossier, consultez la documentation de votre syst&egrave;me d’exploitation.
Remarque : sur les syst&egrave;mes localis&eacute;s et personnalis&eacute;s, les noms de certains dossiers syst&egrave;me peuvent &ecirc;tre diff&eacute;rents.
A propos des fichiers de configuration ma&icirc;tre appliqu&eacute;s &agrave; tous les utilisateurs
Ces fichiers contiennent les param&egrave;tres de configuration par d&eacute;faut de Fireworks et s’appliquent &agrave; 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&icirc;tre le concept du nouveau logiciel d’Apple.
Derni&egrave;re mise &agrave; jour le 29/4/2010
UTILISATION DE FIREWORKS CS5 317
Pr&eacute;f&eacute;rences et raccourcis clavier
Fireworks modifie les fichiers de configuration sp&eacute;cifiques &agrave; l’utilisateur mais pas les fichiers de configuration ma&icirc;tres
lors de l’enregistrement de la plupart des param&egrave;tres, car de nombreux utilisateurs n’ont pas acc&egrave;s &agrave; tous les fichiers
sur les syst&egrave;mes multi-utilisateur.
Les utilisateurs disposant des autorisations d’acc&egrave;s de niveau administrateur peuvent personnaliser des fonctions pour
tous les autres utilisateurs en modifiant les fichiers de configuration ma&icirc;tres.
Sauvegarde d’un fichier de configuration ma&icirc;tre pour tous les utilisateurs
❖ Enregistrez ou faites glisser une copie du fichier &agrave; l’emplacement appropri&eacute; dans le dossier de l’application
Fireworks.
Localisation du fichier de pr&eacute;f&eacute;rences Fireworks
Les pr&eacute;f&eacute;rences Fireworks sont stock&eacute;es dans un fichier appel&eacute; Fireworks CS5 Preferences.txt (Windows) ou
Fireworks CS5 Preferences (Mac OS). L’emplacement de ce fichier varie en fonction du syst&egrave;me d’exploitation.
• Sous Windows, les pr&eacute;f&eacute;rences sont enregistr&eacute;es dans votre dossier Fireworks de profil utilisateur sp&eacute;cifique.
• Sous Mac OS, elles se trouvent dans le dossier Biblioth&egrave;que/Pr&eacute;f&eacute;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&eacute;cifiques &agrave; l’utilisateur se trouvent pour la plupart
dans votre dossier de profil utilisateur Application Support, &agrave; l’exception du fichier de pr&eacute;f&eacute;rences de Fireworks CS5.
A propos de la r&eacute;installation de Fireworks
Lorsque vous d&eacute;sinstallez ou r&eacute;installez Fireworks, vos fichiers de configuration sp&eacute;cifiques &agrave; l’utilisateur restent
intacts sur la plupart des syst&egrave;mes. Si vous r&eacute;installez Fireworks avec les param&egrave;tres par d&eacute;faut, supprimez
manuellement vos fichiers de configuration sp&eacute;cifiques &agrave; l’utilisateur avant de r&eacute;installer l’application.
Si vous supprimez le fichier de pr&eacute;f&eacute;rences et les fichiers de configuration sp&eacute;cifiques &agrave; l’utilisateur au cours de la
d&eacute;sinstallation, ces fichiers sont supprim&eacute;s pour tous les utilisateurs du syst&egrave;me.
Affichage du contenu du module (Mac OS uniquement)
Sous Mac OS, Fireworks est install&eacute; sous la forme d’un module d’application autonome. Le fichier de l’application
Fireworks ainsi que ses fichiers de configuration par d&eacute;faut sont plac&eacute;s dans le module de l’application. Par d&eacute;faut, le
contenu du module est masqu&eacute;.
1 Localisez le dossier d’installation de Fireworks sur le disque dur.
2 Cliquez sur l’ic&ocirc;ne Fireworks CS5 tout en maintenant la touche Ctrl enfonc&eacute;e, puis s&eacute;lectionnez Afficher le
contenu du module.
Mode d'emploi | Adobe Fireworks CS5 Manuel utilisateur

Manuels associés

Adobe

Fireworks CS5

Adobe

Fireworks CS4

Adobe

Fireworks CS4

AVIMECA

AVIMECA

Adobe

Photoshop CS4

Adobe

Photoshop CS4

MACROMEDIA

FIREWORKS 8-BIEN DMARRER AVEC FIREWORKS

MACROMEDIA

FIREWORKS 8-UTILISATION DE FIREWORKS

MACROMEDIA

FIREWORKS 2004-UTILISATION DE FIREWORKS

Adobe

Illustrator CS5

MACROMEDIA

FIREWORKS MX 2004-BIEN DMARRER AVEC FIREWORKS

Adobe

Fireworks CS3
