Utilisation de Fireworks MX ™ macromedia ® Marques de commerce Afterburner, AppletAce, Attain, Attain Enterprise Learning System, Attain Essentials, Attain Objects for Dreamweaver, Authorware, Authorware Attain, Authorware Interactive Studio, Authorware Star, Authorware Synergy, Backstage, Backstage Designer, Backstage Desktop Studio, Backstage Enterprise Studio, Backstage Internet Studio, Design in Motion, Director, Director Multimedia Studio, Doc Around the Clock, Dreamweaver, Dreamweaver Attain, Drumbeat, Drumbeat 2000, Extreme 3D, Fireworks, Flash, Fontographer, FreeHand, FreeHand Graphics Studio, Generator, Generator Developer’s Studio, Generator Dynamic Graphics Server, Knowledge Objects, Knowledge Stream, Knowledge Track, Lingo, Live Effects, Macromedia, Macromedia M Logo Design, Macromedia Flash, Macromedia Xres, Macromind, Macromind Action, MAGIC, Mediamaker, Object Authoring, Power Applets, Priority Access, Roundtrip HTML, Scriptlets, SoundEdit, ShockRave, Shockmachine, Shockwave, Shockwave Remote, Shockwave Internet Studio, Showcase, Tools to Power Your Ideas, Universal Media, Virtuoso, Web Design 101, Whirlwind et Xtra sont des marques de commerce de Macromedia, Inc. et peuvent avoir été déposées aux Etats-Unis ou dans d’autres pays. D’autres noms de produits, logos, conceptions, titres, mots ou expressions mentionnées dans cette publication peuvent être des marques de commerce, des marques de service ou des dénominations commerciales de Macromedia, Inc. ou d’autres entités et peuvent être déposées dans certains pays. Le présent manuel comporte des liens vers des sites Web d’autres tiers, Macromedia ne peut en aucun cas être tenu pour responsable du contenu de ces sites. Vous accédez à ces sites sous votre propre responsabilité. Macromedia mentionne ces liens pour faciliter votre travail et l’inclusion de ces liens n’implique pas que Macromedia approuve le contenu de ces sites tiers ou en accepte la responsabilité. Déni de responsabilités Apple APPLE COMPUTER, INC. NE FOURNIT AUCUNE GARANTIE, EXPRESSE OU IMPLICITE, CONCERNANT LE LOGICIEL INCLUS, QUANT A SA QUALITE LOYALE ET MARCHANDE, OU SON ADAPTATION A UN OBJECTIF PARTICULIER. L’EXCLUSION DES GARANTIES IMPLICITES N’EST PAS AUTORISEE DANS CERTAINS ETATS. L’EXCLUSION CIDESSUS PEUT NE PAS S’APPLIQUER à VOTRE CAS. CETTE GARANTIE VOUS CONFERE DES DROITS JURIDIQUES SPECIFIQUES. CES DROITS PEUVENT VARIER D’UN ETAT à L’AUTRE. Copyright © 2002 Macromedia, Inc. Tous droits réservés. U.S. Brevets 5,353,396, 5,361,333, 5,434,959, 5,467,443, 5,500,927, 5,594,855 et 5,623,593. Certaines parties du logiciel sont licenciées aux Etats-Unis Brevet n°4,558,302 et duplicatas étrangers. Autres brevets en cours d’homologation. Copyright de certaines parties 1988, 2000 Aladdin Enterprises. Tous droits réservés. Ce logiciel est basé en partie sur le travail du groupe indépendant JPEG. Copyright de certaines parties 1998 Soft Horizons. Tous droits réservés. Ce manuel ne peut pas être copié, photocopié, reproduit, traduit ou converti sous n’importe quelle forme électronique ou lisible par une machine, dans son intégralité ou en partie, sans un accord écrit préalable de Macromedia, Inc. Numéro de référence ZFW60M200F Remerciements Rédaction : Dale Crawford, Tonya Estes, David Jacowitz, Kenneth Price Edition : Rosana Francescato Gestion de projet : Stuart Manning Production : Caroline Branch, John Francis, Patrice O'Neill Responsable production de la localisation : Masayo Noda Responsable de la localisation : Sami Kaied Chef de projet localisation : Gloria Figueroa Photographie : Chris Basmajian Multimedia : Aaron Begley Première édition : Juin 2002 Macromedia, Inc. 600 Townsend St. San Francisco, CA 94103 2 TABLE DES MATIÈRES INTRODUCTION Bien démarrer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 Configuration requise . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 Installation de Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8 Nouveautés de Fireworks. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 CHAPITRE 1 Didacticiel des bases de la conception graphique . . . . . . . . . . . . . . . . . . . . . 15 Objectifs du didacticiel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Prérequis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Copier le dossier Tutorials . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Afficher le fichier final . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Créer et sauvegarder un nouveau document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Explorer l’environnement de travail de Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Créer et modifier des objets vectoriels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Importer un bitmap et sélectionner des pixels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Ajouter et modifier des effets en direct . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Travailler avec des calques et des objets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Créer et modifier un masque . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Créer et éditer du texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Exporter le document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Récapitulatif . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15 15 16 16 16 18 19 22 24 26 29 32 39 43 CHAPITRE 2 Didacticiel des bases de la conception Web . . . . . . . . . . . . . . . . . . . . . . . . . . 45 Objectifs du didacticiel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45 Prérequis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45 Copier le dossier Tutorials . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46 Affichage de la page Web finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46 Ouvrir le fichier source . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47 Importer un graphisme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47 Découper le document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48 Créer un survol par glisser-déposer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50 Créer et modifier des boutons pour constituer une barre de navigation . . . . . . . . . . . . . 54 Créer et modifier un menu contextuel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60 Optimiser le document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66 Exporter du HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69 Tester le fichier terminé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72 Récapitulatif . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73 3 CHAPITRE 3 Concepts de base de Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75 Graphiques vectoriels et de bitmap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75 Travailler avec Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76 Création d’un nouveau document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77 Ouverture et importation de fichiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78 Enregistrement de fichiers Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84 L’environnement de travail de Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86 Modification du document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97 CHAPITRE 4 Sélection et transformation d’objets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107 Sélection d’objets. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107 Sélection de pixels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110 Edition d’objets sélectionnés . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122 Transformation et distorsion d’objets sélectionnés et sélections . . . . . . . . . . . . . . . . . . 123 Organisation des objets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127 CHAPITRE 5 Traitement des bitmaps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131 Traitement des bitmaps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131 Création d’objets bitmap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131 Traçage et modification d’objets bitmap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133 Retouche de bitmaps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136 Réglage de la couleur et du ton d’un bitmap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139 Application d’un flou et accentuation des bitmaps. . . . . . . . . . . . . . . . . . . . . . . . . . . . 148 CHAPITRE 6 Utilisation d’objets vectoriels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153 Traçage d’objets vectoriels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153 Modification des trajets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166 CHAPITRE 7 Utilisation d’un texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175 Saisie de texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175 Modification d’un texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177 Applications de traits, de trames et d’effets à un texte . . . . . . . . . . . . . . . . . . . . . . . . . 186 Rattachement de texte à un trajet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187 Transformation du texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189 Conversion de texte en trajets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189 Importation de texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 190 Correction orthographique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191 Utilisation de l’Editeur de texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193 CHAPITRE 8 Application de couleurs, de traits et de trames . . . . . . . . . . . . . . . . . . . . . . . 195 Utilisation de la section Couleurs du panneau Outils . . . . . . . . . . . . . . . . . . . . . . . . . 195 Organisation des groupes d’échantillons et des modèles de couleurs . . . . . . . . . . . . . . 196 Utilisation des puits de couleurs et des fenêtres contextuelles. . . . . . . . . . . . . . . . . . . . 203 Utilisation des traits. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204 Utilisation des trames . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210 Application de trames et dégradés . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211 Ajout d’une texture aux traits et aux trames . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216 4 Table des matières CHAPITRE 9 Utilisation des effets en direct . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219 Application directe des effets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219 Modification des effets en direct . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224 CHAPITRE 10 Calques, masquage et fondu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227 Utilisation des calques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227 Masquage d’images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233 Fondu et transparence . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 251 CHAPITRE 11 Utilisation des styles, des symboles et des adresses URL . . . . . . . . . . . . 255 Utilisation des styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255 Utilisation de symboles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 259 Utilisation des URL. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264 CHAPITRE 12 Découpes, survols et références . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 269 Création et modification d’une découpe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 269 Affectation de comportements interactifs aux découpes . . . . . . . . . . . . . . . . . . . . . . . . 277 Préparation des découpes pour l’exportation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 285 Utilisation des références et des cartes images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 290 CHAPITRE 13 Création de boutons et de menus déroulants . . . . . . . . . . . . . . . . . . . . . . . . 295 Création d’un symbole de bouton . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 295 Création d’une barre de navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 305 Création de menus contextuels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 306 CHAPITRE 14 Création d’animations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 317 Création d’une animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 317 Utilisation des symboles d’animation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 318 Utilisation des images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 322 Interpolation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 328 Aperçu d’une animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 328 Exportation d’une animation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 329 Utilisation d’animations existantes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 331 Utilisation de fichiers multiples pour une animation . . . . . . . . . . . . . . . . . . . . . . . . . . 331 CHAPITRE 15 Optimisation et exportation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 333 Optimisation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Utilisation de l’Assistant Exportation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Optimisation dans l’espace de travail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Exportation depuis Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Utilisation du bouton Exportation rapide . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Table des matières 333 334 337 356 371 5 CHAPITRE 16 Utilisation de Fireworks avec d’autres applications . . . . . . . . . . . . . . . . . . . 373 Utilisation de Macromedia Dreamweaver MX. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 373 Utilisation de Macromedia Flash MX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 388 Utilisation de Macromedia FreeHand . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 393 Utilisation de Macromedia Director . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 397 Utilisation de Macromedia HomeSite . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 400 Utilisation de Microsoft FrontPage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 403 Utilisation avec Adobe Photoshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 406 Utilisation avec Adobe GoLive . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 411 Utilisation avec les éditeurs HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 411 CHAPITRE 17 Automatisation des tâches répétitives. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 413 Recherche et remplacement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 413 Traitement par lots . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 419 Utilisation du journal du projet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 427 Extension de Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 428 CHAPITRE 18 Préférences et raccourcis clavier . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 433 Définition des préférences . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 433 Modification des raccourcis clavier . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 436 Utilisation des fichiers de configuration. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 439 INDEX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 445 6 Table des matières INTRODUCTION Bien démarrer Macromedia Fireworks MX est la solution de conception et de production de graphiques Web professionnels. Il s’agit du premier environnement de production permettant de faire face et de résoudre les défis posés aux concepteurs et aux développeurs de graphiques Web. Créez, modifiez et animez des graphismes Web avec Fireworks, ajoutez des fonctions d’interactivité avancées et optimisez les images dans un environnement professionnel. Dans Fireworks, vous pouvez créer et modifier des graphique bitmap et vectoriels dans une seule application. Tout reste entièrement modifiable, à tout moment. En outre, vous pouvez automatiser vos procédures de travail pour faire face aux exigences de longues mises à jour et modifications. Fireworks s’intègre aux autres produits Macromedia, tels que Dreamweaver, Flash, FreeHand et Director, ainsi qu’à vos applications graphiques préférées et aux éditeurs HTML pour offrir une solution Web réellement intégrée. Exportez facilement vos graphismes Fireworks avec les codes HTML et JavaScript qui ont été personnalisés pour l’éditeur HTML que vous utilisez. Configuration requise Avant d’installer Fireworks, assurez-vous que vous disposez des matériels et des logiciels suivants : Microsoft Windows™ • • • • • • Processeur Intel® Pentium® II de 300MHz Windows 98 SE, ME, NT® 4 (Service Pack 6), 2000 ou XP 64 Mo de RAM disponibles (128 Mo recommandés) plus 80 Mo d’espace disque disponibles Résolution 800 x 600 pixels, affichage 256 couleurs ou supérieur Adobe Type Manager® Version 4 ou supérieure pour utiliser les polices Type 1 Lecteur de CD-ROM Macintosh® • Processeur Power Macintosh G3, fonctionnant sur OS 9.1 ou supérieur, ou OS X version 10.1 • • • • ou supérieure 64 Mo de RAM disponibles (128 Mo recommandés) plus 80 Mo d’espace disque disponibles Résolution 800 x 600 pixels, affichage 256 couleurs ou supérieur Adobe Type Manager Version 4 ou supérieure pour utiliser les polices Type 1 (SE 9.x uniquement) Lecteur de CD-ROM 7 Installation de Fireworks Lisez le document LisezMoi figurant sur le CD-ROM Fireworks pour prendre connaissance des toutes dernières informations ou instructions. Pour installer Fireworks : 1 Insérez le CD-ROM de Fireworks dans le lecteur de CD-ROM. 2 Utilisez l’une des méthodes suivantes : • Sous Windows, le programme d’installation de Fireworks démarre automatiquement. Si ce n’est pas le cas, choisissez Démarrer > Exécuter. Cliquez sur Parcourir et choisissez le fichier Setup.exe situé sur le CD de Fireworks. Cliquez sur OK dans la boîte de dialogue Exécuter. • Sur le Macintosh, double-cliquez sur l’icône d’installation de Fireworks. 3 Suivez les instructions affichées à l’écran. Le programme d’installation vous demande d’entrer les informations requises. 4 Si nécessaire, redémarrez votre ordinateur. Exécution de Fireworks sur des systèmes connectés à un réseau Macromedia utilise une détection de licence réseau afin d’éviter que des copies de Fireworks ayant le même numéro de série ne soient utilisées sur plusieurs systèmes connectés par un réseau local. Si vous tentez de démarrer Fireworks et que, sur le même réseau, un nombre supérieur au nombre de personnes autorisées défini par la licence est également en train d’utiliser Fireworks, un message d’alerte vous notifiera les restrictions imposée par la licence. Si vous pensez avoir obtenu ce message par erreur, ou bien si vous souhaitez obtenir des licences supplémentaires du produit, contactez le support technique de Macromedia à l’adresse http://www.macromedia.com/support/email/cs/. Affichage des fichiers installés avec Fireworks A un certain stade de l’installation, il pourrait être souhaitable d’afficher ou d’accéder aux fichiers installés avec Fireworks. Pendant l’installation, Fireworks place des fichiers à différents endroits de votre système. Il est important de savoir où résident ces fichiers et pourquoi. Pour plus d’informations, voir « Utilisation des fichiers de configuration » à la page 439. Les utilisateurs Macintosh doivent porter une attention toute particulière au nouveau format utilisé par Fireworks pour stocker l’application et ses fichiers de configuration par défaut. Pour plus d’informations, voir « Affichage du contenu du module (Macintosh uniquement) » à la page 443. Apprentissage de Fireworks Plusieurs ressources sont à votre disposition pour l’apprentissage de Fireworks. Elles incluent un manuel démarrage rapide (Bien démarrer avec Fireworks MX), le système d’aide accessible directement à partir de l’application, une version PDF de la documentation complète de Fireworks et différentes sources d’informations accessibles sur le Web. L’ aide de Fireworks est disponible lorsque l’application est active et contient la documentation complète de Fireworks. Choisissez Aide > Utilisation de Fireworks pour ouvrir l’aide de Fireworks. Pour les utilisateurs Mac OS X, choisissez Aide > Aide de Fireworks). 8 Introduction Le didacticiel de Fireworks présente une description interactive des principales fonctions de Fireworks, chacune pouvant être lues en moins d’une heure. Elles incluent des tâches Fireworks courantes telles que l’utilisation des outils de dessin et de modification, l’optimisation d’images et la création d’éléments interactifs tels que les survols et les barres de navigation. Le panneau Réponses est une zone centrale où vous pouvez trouver des didacticiels, des notes techniques et les informations les plus à jour sur Fireworks. Le panneau Réponses est dynamique. Un simple clic sur un bouton permet d’obtenir les dernières mises à jour et informations sur Fireworks provenant directement de Macromedia. L’application Fireworks comporte de nombreuses boîtes de dialogue et info-bulles pour rendre l’utilisation du programme encore plus facile. Les info-bulles apparaissent au bout de quelques secondes lorsque vous placez le pointeur au-dessus de l’un des éléments de l’interface utilisateur. La prise en main de Fireworks MX comprend des informations sommaires concernant les fonctions de base de Fireworks. Le fichier PDF Utilisation de Fireworks MX est un document que vous pouvez consulter et imprimer. Il contient la documentation complète de Fireworks. Ce document est disponible sur le CD d’installation ainsi que sur le site Web de Macromedia à l’adresse http://www.macromedia.com/fr/. Le site Web de Macromedia est mis à jour régulièrement et comporte les informations les plus récentes relatives à Fireworks, ainsi que des conseils pour les utilisateurs, des rubriques avancées, des exemples, des astuces et des mises à jour. Consultez le site Web de Macromedia http://www.macromedia.com/fr/support/ pour prendre connaissance des nouvelles relatives à Fireworks et savoir comment tirer pleinement parti des fonctionnalités du programme. Le groupe de discussion de Fireworks permet de communiquer en direct avec les autres utilisateurs de Fireworks, les techniciens d’assistance et l’équipe de développement de Fireworks. Utilisez un lecteur de groupes de discussion pour accéder à news://forums.macromedia.com/macromedia.fireworks. Le manuel Extension de Fireworks MX indique comment automatiser les tâches de Fireworks à l’aide du code JavaScript. Toutes les commandes ou options de Fireworks peuvent être contrôlées avec des commandes JavaScript spéciales. La version PDF de Extending Fireworks MX est disponible sur le CD et sur le site Web de Macromedia à l’adresse http://www.macromedia.com/ support/fireworks/extend.html. Enregistrement de Fireworks Pour obtenir une assistance Macromedia supplémentaire, il est judicieux d’enregistrer en ligne ou par courrier votre copie de Macromedia Fireworks. Lorsque vous vous enregistrez, vous êtes placé sur une liste prioritaire vous permettant de recevoir des notifications presque en temps réel concernant les mises à jour et les nouveaux produits Macromedia. Vous recevrez des notifications par courrier électronique concernant les mises à jour du produit et les nouveaux contenus paraissant sur les sites Web www.macromedia.com et www-euro.macromedia.com. Pour enregistrer votre copie de Fireworks, exécutez l’une des actions suivantes : • Choisissez Aide > Enregistrement en ligne et remplissez le formulaire électronique. • Choisissez Aide > Enregistrement par courrier, imprimez le formulaire et envoyez-le par courrier postal à l’adresse affichée dans le formulaire. Bien démarrer 9 Nouveautés de Fireworks Grâce à ses nouvelles fonctions, Fireworks MX devient une application de plus en plus accessible avec une capacité accrue de création de graphismes et d’interactivité pour les sites Web. Fireworks MX maximise la productivité des concepteurs Web expérimentés, des développeurs HTML qui travaillent également à la création de graphiques, et des développeurs Web débutants ayant besoin de développer des pages Web interactives, riches graphiques et ayant peu ou aucune connaissance de la programmation ou du langage JavaScript. Fireworks MX a été profondément repensé, avec une interface utilisateur efficace, davantage de boutons et de menus contextuels puissants, ainsi que des outils bitmap et vectoriels intuitifs. L’intégration des autres applications Macromedia, aussi bien que des applications tierces, facilite l’importation de différents formats de fichier dans Fireworks et le transfert vers d’autres applications lorsque vous travaillez. Une autre nouveauté de Fireworks est la possibilité de créer des commandes JavaScript avec Macromedia Flash qui apparaissent dans Fireworks MX sous la forme de panneaux ou de boîtes de dialogue. Fonctions simples d’utilisation Un environnement de travail agréable et intuitif, y compris un Vérificateur de propriétés et des outils répondant aux besoins des professionnels font de Fireworks MX une application simple d’utilisation et facile à mettre en oeuvre. Fireworks MX possède une nouvelle interface, mieux organisée et plus compatible avec les autres applications Macromedia MX Studio. L’amélioration de la gestion des panneaux permet notammant de regrouper des panneaux, puis de réduire les groupes de manière à n’afficher que la barre de titre du groupe de panneaux, tant que vous navez pas besoin d’utiliser les panneaux. Vous pouvez ancrer les groupes de panneaux dans une zone d’ancrage de panneaux afin d’organiser votre espace de travail, ou bien faire glisser des groupes ou des panneaux individuels vers n’importe quel endroit de l’espace de travail. Pour plus d’informations, voir « Organisation des groupes de panneaux et des panneaux » à la page 90. Le Vérificateur de propriétés est un panneau dynamique contenant de nombreuses options qui changent votre façon de travailler. Ouvrez un document et le Vérificateur de propriétés affiche les propriétés du document telles que la couleur et la taille du document. Choisissez un outil à partir du panneau Outils, et le Vérificateur de propriétés affiche les options de l’outil. Sélectionnez un objet vectoriel, et il affiche des informations concernant le trait et la trame. Vous pouvez changer ces options ainsi que d’autres options, y compris les effets appliqués en direct, les modes de fondu et l’opacité, directement à partir du Vérificateur de propriétés, au lieu de devoir cliquer pour ouvrir ou activer un panneau après l’autre. Le Vérificateur de propriétés, familier aux utilisateurs de Macromedia Dreamweaver et Flash, réduit le nombre de panneaux dans l’espace de travail. Pour plus d’informations, voir « Utilisation du Vérificateur de propriétés » à la page 88. L’édition bitmap et vectorielle non modale permet d’éviter de maintenir constamment les modes vectoriel et bitmap. La sélection d’un outil ou d’un type d’objet détermine automatiquement si vous allez créer et modifier des bitmaps, des vecteurs ou du texte. Les améliorations de l’édition bitmap vous donne la possibilité de créer intuitivement des bitmaps par couper, copier et coller, de déplacer des zones de sélection parmi les bitmaps et d’ajuster précisément les images avec un nouveau groupe d’outils de retouche d’image. Les commandes de sélection habituelles sont organisées dans un nouveau menu Sélection. 10 Introduction Les sections du panneau Outils séparent les outils utilisés pour la création et la modification de bitmaps, de vecteurs et d’objets Web. Elles offrent des repères permettant de choisir intuitivement l’outil approprié et d’atteindre des résultats de création prévisibles. Les autres outils et fonctions d’outils sont répartis dans les catégories Sélection, Couleurs et Affichage. Pour plus d’informations, voir « Utilisation du panneau Outils » à la page 87. Le bouton Exportation rapide affiche des options facilitant l’exportation vers de nombreux formats de fichier ou styles HTML, ou facilitant le démarrage d’autres applications Macromedia à partir de la fenêtre du document, éliminant le temps de configuration et rationalisant les procédures. Pour plus d’informations, voir « Utilisation du bouton Exportation rapide » à la page 371. Le texte à l’écran vous permet d’intégrer visuellement du texte et des graphiques sans devoir utiliser l’éditeur de texte. Choisissez simplement l’outil Texte, cliquez sur le document et commencez votre saisie. Dans le Vérificateur de propriétés, vous pouvez soit déterminer des attributs de texte pour l’outil Texte avant de commencer la saisie ou bien sélectionner un texte existant et le formater. Fireworks MX possède une panoplie de nouveaux outils de contrôler de texte et de paragraphe permettant de formater du texte. Pour plus d’informations, voir « Utilisation d’un texte » à la page 175. Le zoom variable vous laisse glisser l’outil de zoom afin de déterminer avec précision le facteur de zoom. Après avoir zoomé votre document, le facteur de zoom est affiché dans la zone de texte Zoom en bas du document. Les versions comptabiles Windows XP et Macintosh OS X tirent parti des dernières innovations de ces systèmes d’exploitation. Fireworks MX est intégralement carbonisé afin de supporter toutes les améliorations de l’interface utilisateur OS X. L’exportation XHTML vous permet d’exporter, de mettre à jour et d’utiliser la modification Roundtrip avec l’ensemble des styles qu’offre Fireworks pour le code HTML. Vous pouvez utiliser les documents existants qui ont été convertis en documents XHTML dans Dreamweaver MX. Le panneau Réponses, une nouvelle fonction de Fireworks MX, Dreamweaver MX et Flash MX, est un lien vers des contenus Web pouvant être mis à jour et se trouve judicieusement placé dans l’espace de travail Fireworks. Vous pouvez cliquer sur le bouton Mise à jour lorsque vous êtes en ligne et charger des informations de référence récentes de Macromedia, ou consultez en ligne des bases de données de documentation comme TechNotes. Le vérificateur orthographique recherche dans chaque bloc de texte de votre document les mots mal orthographiés. Lorsqu’il trouve un mot qu’il ne reconnaît pas, il propose des suggestions de correction ou vous permet de l’ajouter dans votre dictionnaire. Le cache multi plates-formes des polices permet de simplifier le partage des fichiers des groupes de travail et clients, sans soucier des problèmes de polices relatifs aux différents systèmes utilisés. Fireworks conserve l’apparence de tous les textes d’un document sur les systèmes qui n’ont pas les polices utilisées par le document. De nouvelles fonctionnalités puissantes Fireworks MX possède une panoplie de nouvelles fonctions de créativité et d’automatisation puissantes que les concepteurs Web débutants trouveront simples d’utilisation et que les développeurs expérimentés apprécieront. Cette fonctionnalié fait de Fireworks un outil indispensable à la conception et de développement de sites Web, depuis la conception jusqu’à l’intégration. Bien démarrer 11 L’Assistant Graphique vous permet d’affecter des variables à du texte, des images, des références et des découpes. Il génère ensuite de plusieurs documents basés sur l’original, chaque document contenant des informations spécifiques provenant d’un fichier base de données séparé par une virgule ou fichier XML. Le générateur de barres de navigation du menu Commandes automatise la procédure de création rapide des barres de navigation grâce à l’utilisation judicieuse de symboles de bouton Fireworks MX. Vous pouvez sélectionner l’occurrence d’un bouton symbole, puis choisir le nombre de copies à effectuer, choisir l’orientation et l’espacement vertical ou horizontal, et assigner des étiquettes de bouton et des URL dans une boîte de dialogue intégrée. Les améliorations de l’éditeur des menus contextuels ont ajouté un contrôle créatif à la fonctionnalité la plus populaire de Fireworks 4. Vous pouvez maintenant créer un menu contextuel horizontal ou vertical, et déterminer les caractéristiques de la bordure, l’espacement et la taille des cellules indépendamment de la taille du texte. Vous pouvez également fixer le positionnement des menus par rapport à l’objet de déclenchement aussi bien que le placement des sous-menus par rapport au déclencheur de l’élément de menu ou du menu contextuel principal. Fireworks génère automatiquement pour vous le code JavaScript. Les menus exportés sont entièrement compatibles avec Dreamweaver MX. Pour plus d’informations, voir « Création de menus contextuels » à la page 306. La fonction de modification du symbole de bouton d’occurrence vous permet de créer un symbole de bouton, puis d’identifier aisément chaque bouton en leur affectant un texte, des URL et cibles spécifiques dans le Vérificateur de propriétés. Vous pouvez également modifier d’autres caractéristiques graphiques du symbole et répercuter ces modifications sur toutes les occurrences de bouton sans affecter les propriétés de l’occurrence. Pour plus d’informations, voir « Création d’un symbole de bouton » à la page 295. Procédures de travail ouvertes Vous n’avez pas tenu de respecter les procédures de travail d’un autre utilisateur. En utilisant Fireworks MX, vous pouvez intégrer la production graphique dans votre processus de développement avec une procédure de travail ouverte, efficace qui reconnaît et prend en charge les formats de fichier, applications et standards que vous utilisez. Les commandes JavaScript avec l’interface SWF place la création de commandes JavaScript à niveau supérieur. Les développeurs peuvent créer et exécuter des commandes complexes afin d’étendre et d’automatiser Fireworks MX en combinant l’extensibilité de l’API JavaScript de Fireworks avec des interfaces développées sous Flash MX en utilisant des composants ainsi que ActionScript. Pour plus d’informations, voir Extending Fireworks MX, disponible sous la forme d’un fichier PDF sur le CD d’installation et à l’adresse http://www.macromedia.com/support/ fireworks/extend.html. Le support Macromedia Exchange signifie que les utilisateurs, même ceux qui ne sont pas intéressés par la création de commandes JavaScript, peuvent charger des commandes créées par des utilisateurs depuis Exchange. Les commandes apparaissent dans l’espace de travail de Fireworks MX sous la forme de panneaux ou de boîtes de dialogue simples d’utilisation. Fireworks MX est livré avec plusieurs commandes utilisateur dans le menu Commandes, ainsi qu’avec un panneau utilisateur Aligner dans le menu Fenêtre. 12 Introduction Les contrôles de la table de mise en page des découpes vous permettent de définir et d’optimiser les mises en page de la table des découpes par simple déplacement des repères de découpe. Fireworks redimensionne automatiquement les découpes attachées, ajoutant et supprimant des découpes, si nécessaire. Pour plus d’informations, voir « Déplacement des repères d’une découpe pour modifier la découpe » à la page 275. La fonction de reconstitution des tables permet de reconstruire instantanément un nouveau fichier source PNG lorsque vous pointez vers un fichier HTML contenant des tables avec des découpes d’image. Macromedia Fireworks et les comportements Dreamweaver, comme les survols d’image et les menus contextuels, sont importés et attachés aux découpes appropriées. Cela est utile lorsque vous travaillez sur des projets de site Web existants, et que les seuls fichiers disponibles sont les pages HTML publiées. Vous pouvez importer les fichiers HTML dans Fireworks et créer des fichiers source PNG à partir de ces derniers. Pour plus d’informations, voir « Création de fichiers PNG dans Fireworks à partir de fichiers HTML » à la page 80. Roundtrip Photoshop 6 text vous permet d’ouvrir un fichier Photoshop 6 ou 7 en laissant intact le texte modifiable. Le graphisme peut ainsi être modifié, puis réexporté au format Photoshop tout en maintenant l’apparence correcte du texte et la possibilité de le modifier. Pour plus d’informations, voir « Importation de texte depuis Photoshop » à la page 407. Roundtrip avec Microsoft FrontPage est disponible en cliquant sur le bouton Exportation rapide. Les tables de lancement et de modification agissent sur le fichier original : les tables sont mises à jour dans FrontPage sans que les modifications de code faites dans FrontPage soient perdues. Pour plus d’informations, voir « Exportation de code HTML Fireworks vers FrontPage » à la page 404. L’intégration de Macromedia Sitespring vous permet de disposer sur votre espace de travail Fireworks MX des meilleurs outils de production et gestion des clients. Choisissez simplement Fenêtre > Sitespring pour ouvrir la fenêtre Sitespring. Pour plus d’informations, consultez la documentation de Sitespring. Bien démarrer 13 14 Introduction CHAPITRE 1 Didacticiel des bases de la conception graphique Le présent didacticiel vous guidera à travers les opérations de base de la conception de graphismes avec Macromedia Fireworks MX. L’utilisation de l’application leader de l’industrie informatique dans le domaine du graphisme Web vous permettra d’acquérir une expérience pratique et d’apprendre les concepts de base de la conception graphique. Si vous êtes déjà familier avec la conception graphique de Fireworks, vous pouvez continuer avec « Didacticiel des bases de la conception Web » à la page 45, où vous apprendrez comment concevoir des pages Web avec Fireworks. Objectifs du didacticiel Ce didacticiel vous permet d’effectuer les tâches nécessaires permettant de créer avec FireWorks une petite annonce pour un loueur de voitures classique qui peut être effectuée en moins d’une heure. Vous apprendrez à : • • • • • • • • • • • Copier le dossier Tutorials Afficher le fichier final Créer et sauvegarder un nouveau document Explorer l’environnement de travail de Fireworks Créer et modifier des objets vectoriels Importer un bitmap et sélectionner des pixels Ajouter et modifier des effets en direct Travailler avec des calques et des objets Créer et modifier un masque Créer et éditer du texte Exporter le document Prérequis Bien que ce didacticiel ait été conçu pour des personnes n’ayant jamais utilisé Fireworks, il couvre beaucoup de nouvelles fonctionnalités de Fireworks, et peut donc également être utile aux utilisateurs expérimentés. Vous n’avez pas besoin d’être un concepteur graphique pour utiliser ce didacticiel, mais vous devez avoir des connaissances informatiques de base et être capable d’utiliser les applications bureautiques standard. Cela implique savoir comment trouver des fichiers et des dossiers sur votre disque dur. 15 Copier le dossier Tutorials Avant de commencer, vous devrez créer une copie du dossier Tutorials. Vous pourrez ainsi enregistrer votre travail tout en vous permettant, vous ou un autre utilisateur, de terminer le didacticiel plus tard en utilisant les fichiers originaux. 1 Ouvrez le dossier de l’application Fireworks de votre disque dur. Remarque : Si vous ne pouvez pas voir le dossier de votre application Fireworks, vous avez certainement un accès limité aux fichiers de votre système. Vous pouvez charger les fichiers nécessaires à ce didacticiel depuis le Centre d’assistance sur le Web à l’adresse http://www.macromedia.com/fr/support/. 2 Faites une copie du dossier Tutorials sur votre bureau. Afficher le fichier final Affichez le fichier final du didacticiel pour voir à quoi ressemblera le projet achevé. 1 Démarrez votre navigateur Web. 2 Ouvrez le dossier Tutorials que vous avez copié sur votre bureau et recherchez Tutorial1/Complete. Remarque : Certaines versions de Microsoft Windows cachent par défaut les extensions de fichier reconnues. Si vous n’avez pas modifié cette option, les fichiers du dossier Complete s’afficheront sans les extensions. Lorsque l’on traite des graphismes pour le Web, il est préférable de pouvoir voir les extensions de fichier. Reportez-vous à l’aide de Windows pour obtenir plus d’informations concernant l’affichage des extensions de fichier. 3 Sélectionnez le fichier final.jpg et faites-le glisser vers la fenêtre du navigateur actif. Pour ce didacticiel, vous utiliserez Fireworks pour concevoir et exporter une copie de cette petite annonce pour loueur de voitures classique. Remarque : Le dossier Complete contient également le document Fireworks avec lequel le fichier JPEG a été généré. Pour afficher le document, double-cliquez sur final.png. Créer et sauvegarder un nouveau document Maintenant que vous avez vu le fichier final.jpg, vous êtes prêt à commencer votre projet. 1 Dans Fireworks, choisissez Fichier > Nouveau. La boîte de dialogue Nouveau document s’affiche alors. 16 Chapitre 1 2 Saisissez 480 pour la largeur et 214 pour la hauteur. Vous devez vous assurer que ces deux valeurs sont en pixels et que la couleur du fond est blanche, puis cliquez sur OK. Une fenêtre document ayant comme titre Sans Titre-1.png (Windows) ou Sans Titre-1 (Macintosh) est maintenant ouverte. 3 Si la fenêtre du document n’est pas maximisée, c’est-à-dire qu’elle n’occupe pas toute la surface de l’écran, maximisez-la en utilisant le bouton d’agrandissement (Windows) ou la case zoom (Macintosh) en haut de la fenêtre du document. Cela vous procurera beaucoup d’espace de travail. 4 Choisissez Fichier > Enregistrer sous. La boîte de dialogue Enregistrer sous (Windows) ou Enregistrer (Macintosh) s’ouvre. 5 Ouvrez le dossier Tutorials/Tutorial1 de votre bureau. 6 Nommez le fichier vintage. 7 Choisissez l’option Ajouter l’extension du nom du fichier si elle n’est pas encore sélectionnée (Macintosh uniquement). 8 Cliquez sur Enregistrer. La barre de titre affiche le nouveau nom de fichier avec une extension PNG. PNG est le format de fichier natif de Macromedia Fireworks. Le fichier PNG est votre fichier source : c’est là que vous effectuerez l’ensemble de votre travail dans Fireworks. A la fin de ce didacticiel, vous apprendrez à exporter votre document vers un autre format afin de l’utiliser sur le Web. Pendant l’exécution du didacticiel, pensez à enregistrer fréquemment les modifications en choisissant Fichier > Enregistrer. Remarque : Pendant l’exécution du didacticiel, il peut être utile d’annuler une partie des modifications. Fireworks peut annuler plusieurs de vos modifications récentes, le nombre exact dépend du nombre spécifié dans la boîte de dialogue Préférences. Pour annuler la modification la plus récente, choisissez Edition > Annuler. Didacticiel des bases de la conception graphique 17 Explorer l’environnement de travail de Fireworks Avant de poursuivre, examinez les éléments qui constituent l’environnement de travail de Fireworks : • Au centre de l’écran se trouve la fenêtre du document. Au centre de la fenêtre se trouve le document. C’est là que s’affichent le document Fireworks et tout graphisme que vous créez. • En haut de l’écran se trouve une barre de menus. La plupart des commandes de Fireworks sont accessibles à partir de la barre de menus. • A gauche de l’écran se trouve le panneau Outils. Si le panneau Outils n’est pas visible, choisissez Fenêtre > Outils. Le panneau Outils est l’endroit où vous trouverez des outils pour sélectionner, créer et modifier toute une variété d’éléments graphiques d’objets Web. • En bas de l’écran se trouve le Vérificateur de propriétés. Si le Vérificateur de propriétés n’est pas visible, choisissez Fenêtre > Propriétés. Le Vérificateur de propriétés affiche des propriétés pour un objet ou un outil sélectionné. Vous pouvez changer ces propriétés. Si aucun objet ni aucun outil n’est sélectionné, le Vérificateur de propriétés affiche les propriétés du document. Le Vérificateur de propriétés affiche deux ou quatre lignes de propriétés. Si le Vérificateur de propriétés est à mi-hauteur, autrement dit s’il n’affiche que deux lignes, vous pouvez cliquer sur la flèche d’extension située dans le coin inférieur droit afin de voir toutes les propriétés. Flèche d’extension à mi-hauteur 18 Chapitre 1 • Sur la droite de l’écran se trouve toute une variété de panneaux tels que le panneau Calques et le panneau Optimiser. Vous pouvez les ouvrir, ainsi que d’autres panneaux, à partir du menu Fenêtre. • Placez votre pointeur au-dessus des différents éléments de l’interface. Si vous gardez le pointeur suffisamment longtemps au-dessus d’un élément de l’interface, une info-bulle apparaît. Les info-bulles identifient des outils, des menus, des boutons ainsi que d’autres options de l’interface de Fireworks. Les info-bulles disparaissent lorsque vous éloignez le pointeur des éléments d’interface qu’elles identifient. Plus vous progresserez dans le didacticiel, plus vous en apprendrez sur chacun de ces éléments. Créer et modifier des objets vectoriels Avec Fireworks, vous pouvez créer et modifier deux types de graphismes : les objets vectoriels et les images bitmap. Un objet vectoriel est la description mathématique d’une forme géométrique. Le trajet des vecteurs est défini par des points. Le trajet des vecteurs ne présente pas de dégradation de la qualité lorsque vous effectuez un zoom ou bien si vous agrandissez ou réduisez l’échelle. La feuille de l’illustration ci-dessous est un ensemble d’objets vectoriels. Notez les bords lissés de la feuille, et ce même si vous effectuez un zoom avant. A l’opposé, une image bitmap est constituée d’une grille de pixels colorés. Les images comportant des variations de couleur complexes, comme les photographies, sont plus souvent des images bitmap. Didacticiel des bases de la conception graphique 19 Tandis que de nombreuses applications proposent des outils permettant de modifier soit des formes vectorielles, soit des images bitmap, Fireworks vous laisse travailler avec les deux types de graphismes. Dans cette partie, vous allez travailler avec des graphismes vectoriels. Créer des objets vectoriels Vous allez maintenant créer deux des éléments graphiques de votre document. Pour commencer, vous allez créer un rectangle bleu qui sera positionné en bas du document. Puis, vous créerez un rectangle qui fera office de bord pour le contenu du document. 1 Choisissez l’outil Rectangle dans la partie Vecteur du panneau Outils. 2 Cliquez sur Couleur de remplissage dans le Vérificateur de propriétés. La fenêtre contextuelle Couleur de remplissage s’ouvre. 3 Tapez 333366 dans le champ de saisie situé en haut de la fenêtre et appuyez sur Entrée. La case Couleur de remplissage devient bleu foncé afin de refléter la couleur de votre choix. 4 20 Dans la fenêtre du document, positionnez le pointeur en forme de croix sur le document, et faites-le glisser vers le bas et vers la droite afin de créer un rectangle. Vous pouvez tracer le rectangle n’importe où sur le document. Plus tard dans cette procédure, vous modifierez la taille et vous le positionnerez. Chapitre 1 5 Lorsque vous relâchez le bouton de la souris, un rectangle bleu foncé apparaît, sélectionné, dans la zone que vous avez définie. Vous pouvez dire à quel moment un objet est sélectionné, car des points bleus apparaissent dans les coins. La plupart des objets possède également une surbrillance bleue autour de leurs bords extérieurs, mais les rectangles sont des exceptions. 6 Dans le coin inférieur gauche du Vérificateur de propriétés, tapez 480 dans la case de la largeur et 15 dans la case de la hauteur, puis appuyez sur Entrée. La taille du rectangle s’adapte aux dimensions spécifiées. 7 Choisissez l’outil Pointeur dans la section Sélection du panneau Outils. 8 Faites glisser le rectangle de manière à ce qu’il soit positionné en bas du document, comme présenté ci-dessous. Utilisez les touches fléchées pour effectuer un placement précis. 9 Choisissez à nouveau l’outil Rectangle et tracez un second rectangle. Tracez-le n’importe où sur le document et donnez-lui la taille de votre choix. Vous modifierez ses propriétés et sa position dans la section suivante. Modifier les propriétés d’objets Ici, vous modifierez le deuxième rectangle que vous avez créé en changeant sa taille, sa position et sa couleur dans le Vérificateur de propriétés. 1 Le rectangle toujours sélectionné, cliquez sur la case Couleur du trait du Vérificateur de propriétés et entrez la valeur de couleur CCCCCC. Appuyez sur Entrée pour appliquer les modifications. 2 Reglez la taille de pointe sur 1 en faisant glisser le curseur ou en tapant la valeur la zone de saisie. Didacticiel des bases de la conception graphique 21 3 Cliquez sur la case Couleur de remplissage du Vérificateur de propriétés et cliquez sur le bouton Transparent. 4 Dans le Vérificateur de propriétés, saisissez les valeurs suivantes dans les cases correspondant à la largeur, à la hauteur et aux coordonnées. Cliquez ensuite en-dehors du Vérificateur de propriétés pour appliquer vos modifications. • • • • Largeur : 480 Hauteur : 215 X:0 Y: 0 Le rectangle se transforme en un cadre gris situé tout autour du bord du document. Si votre système utilise le gris comme couleur de fond de la fenêtre, il vous sera difficile à ce niveau-là de voir le rectangle. Mais ne vous inquiétez pas, il est toujours là. 5 Choisissez l’outil Pointeur et cliquez n’importe où à l’exception du rectangle afin de désélectionner ce dernier. Les propriétés changent dans le Vérificateur de propriétés. Comme aucun objet n’est sélectionné, vous voyez maintenant les propriétés du document au lieu des propriétés de l’objet. Importer un bitmap et sélectionner des pixels Vous allez ensuite importer une image bitmap et créer une sélection flottante de ses pixels. Importer une image Vous allez modifier l’image d’une voiture classique. Vous devez commencer par importer l’image. 22 1 Choisissez Fichier > Importer et ouvrez le dossier Tutorials de votre bureau. Ouvrez le dossier Tutorial1/Assets. 2 Sélectionnez car.jpg et cliquez sur Ouvrir. Chapitre 1 3 Alignez le pointeur d’insertion au coin supérieur gauche du document et cliquez, comme présenté dans l’illustration suivante. L’image apparaît, sélectionnée, sur le document. 4 Cliquez n’importe où à l’exception de l’image sélectionnée afin de la désélectionner. Créez une sélecion de pixels Ensuite, vous allez sélectionner les pixels qui constituent la voiture dans l’image que vous avez importée, puis copier et coller les pixels en qualité de nouvel objet. 1 Choisissez l’outil Zoom dans la partie Affichage du panneau Outils. L’outil Zoom 2 Cliquez une fois sur l’image. L’affichage est agrandi de 150 %. Le zoom avant vous permet de mieux voir ce que vous êtes en train de sélectionner et de contrôler plus finement votre sélection. 3 Cliquez sur l’outil Lasso dans la section Bitmap du panneau Outils et maintenez enfoncé le bouton de la souris. Choisissez l’outil Lasso polygonal à partir du menu contextuel qui apparaît. L’outil Lasso polygonal vous permet de tracer une sélection autour des pixels en utilisant une série de lignes droites. Vous utiliserez l’outil Lasso polygonal pour sélectionner les pixels qui constituent l’image de la voiture. 4 Dans le Vérificateur de propriétés, fixez l’option Bord sur Anticrénelé. Didacticiel des bases de la conception graphique 23 5 Avec le pointeur de l’outil Lasso polygonal, cliquez sur le bord supérieur de la voiture, puis cliquez de manière répétée tout autour du bord de la voiture afin de poursuivre la sélection. 6 Terminez la sélection en déplaçant le pointeur à l’endroit où vous avez commencé la sélection. Un petit carré gris apparaît à côté du pointeur du lasso polygonal pour vous indiquer que vous êtes sur le point de terminer la sélection. Cliquez pour achever la sélection. Une bordure de sélection apparaît autour des pixels que vous avez sélectionnés. 7 Choisissez Edition > Copier. La sélection est copiée dans le Presse-papiers. 8 Choisissez Edition > Coller. L’image de la voiture est collée dans le document sous la forme d’un nouvel objet bitmap. 9 Choisissez l’outil Pointeur et double-cliquez n’importe où à l’exception du bitmap afin de le désélectionner. 10 Cliquez sur le menu contextuel Définir le Zoom situé en bas de la fenêtre du document et rétablissez un affichage de 100 %. Ajouter et modifier des effets en direct Vous appliquerez ensuite les effets en direct à l’image bitmap d’origine. Vous changerez la teinte et la saturation de l’image et vous appliquerez un flou. 24 Chapitre 1 1 Cliquez n’importe où sur l’image du désert. (Faites toutefois attention à ne pas cliquer sur la voiture.) 2 Dans le Vérificateur de propriétés, cliquez sur le bouton Ajouter des effets (le bouton avec le signe plus (+)). Le bouton Supprimer l’effet Le bouton Ajouter des effets 3 Choisissez Régler la couleur > Teinte/Saturation à partir du menu contextuel des effets. La boîte de dialogue Teinte/Saturation s’ouvre. 4 Choisissez l’option Coloriser et cliquez sur OK. L’image devient colorée sur le document, et l’effet est ajouté à la liste des effets en direct dans le Vérificateur de propriétés. Les effets en direct sont modifiables : vous pourrez toujours ajouter des éléments à cette liste, supprimer l’effet ou le modifier. 5 Double-cliquez sur l’effet Teinte/Saturation afin de le modifier. Didacticiel des bases de la conception graphique 25 Conseil : Une alternative consiste à cliquer sur le bouton Info à côté de l’effet. La boîte de dialogue Teinte/Saturation s’ouvre à nouveau. 6 Choisissez une teinte de 25 et une saturation de 20, puis cliquez sur OK. Le niveau de teinte et de saturation de l’image change et un aspect sépia apparaît, comme sur les anciennes photographies. 7 Cliquez à nouveau sur le bouton Ajouter des effets pour ajouter un nouvel effet en direct. 8 Choisissez Flou > Accentuer le flou à partir du menu contextuel Effets. Les pixels du bitmap sélectionné deviennent flous, et le nouvel effet est ajouté à la liste des effets en direct dans le Vérificateur de propriétés. Travailler avec des calques et des objets Les calques permettent de diviser un document Fireworks en plusieurs plans verticaux discrets. Un document peut être composé de plusieurs calques, et chaque calque peut contenir de nombreux objets. Dans Fireworks, le panneau Calques affiche la liste des calques et des objets contenus par chaque calque. Le panneau Calques vous permet de nommer, masquer, afficher et changer l’ordre d’empilement des calques et des objets, ainsi que de fusionner des bitmaps et d’appliquer des masques bitmap. Vous pouvez également ajouter et supprimer des calques en utilisant le panneau Calques. Dans cette partie du didacticiel, vous utiliserez le panneau Calques pour fusionner les deux images bitmap. Puis, vous nommerez les objets de votre document. Vous utiliserez également le panneau Calques pour changer l’ordre d’empilement des objets. Plus loin dans le didacticiel, vous utiliserez le panneau Calques pour appliquer un masque à l’image fusionnée. Fusionner des bitmaps Maintenant que vous avez appliqué les effets en direct à l’image d’arrière-plan, vous allez la fusionner avec l’image en niveaux de gris de la voiture afin de créer un bitmap simple. 26 Chapitre 1 1 Si le panneau Calques est réduit ou invisible, cliquez sur sa flèche d’extension ou choisissez Fenêtre > Calques. La flèche d’extension 2 Cliquez sur la vignette de l’image en niveaux de gris de la voiture dans le panneau Calques. 3 L’image de la voiture sélectionnée, cliquez sur l’icône du menu contextuel Options située en haut à droite du panneau Calques. L’icône du menu contextuel Options 4 Choisissez Fusionner vers le bas. Dans le panneau Calques, les deux objets bitmap se fusionnent en un bitmap. Dans le Vérificateur de propriétés, la liste des effets en direct ne comporte plus aucun effet. Cela est dû au fait que la fusion vers le bas combine les pixels de chaque bitmap et les rend non modifiables en tant qu’images séparées. Les effets en direct que vous appliquez à un objet ou à un bitmap ne sont plus modifiables après l’exécution d’une fusion vers le bas avec un autre bitmap. Didacticiel des bases de la conception graphique 27 Nommer des objets Il est toujours judicieux de nommer vos objets, cela vous permettra par la suite de les identifier facilement. Lorsqu’un document prend du volume et qu’il contient plusieurs objets, il peut devenir difficile à gérer si vos objets ne possèdent pas de noms uniques. Vous nommerez les objets de votre document en utilisant le panneau Calques et le Vérificateur de propriétés. 1 Dans le panneau Calques, double-cliquez sur le mot Bitmap situé à côté de la vignette de l’image. Un champ d’édition apparaît. 2 Tapez Classic Car dans le champ d’édition et appuyez sur Entrée. Le nouveau nom est appliqué à l’objet bitmap. 3 Dans la fenêtre du document, sélectionnez le rectangle gris qui borde le document. S’il n’est pas bien visible sur le document, sélectionnez-le dans le panneau Calques. Cette fois-ci, vous allez nommer un objet en utilisant le Vérificateur de propriétés. 4 Dans le Vérificateur de propriétés, tapez Border dans la zone du nom de l’objet et appuyez sur Entrée. Le nom que vous saisissez est également affiché dans le panneau Calques, à côté de la vignette de l’objet. 5 28 Entrez un nom pour l’objet rectangle restant en utilisant le panneau Calques ou le Vérificateur de propriétés. Utilisez le nom de votre choix, mais assurez-vous de choisir un nom significatif qui vous permettra par la suite d’identifier et de modifier facilement des objets dans le document. Chapitre 1 Changer l’ordre d’empilement des objets L’image bitmap fusionnée recouvre l’objet bordure et le rectangle bleu. La bordure et le rectangle bleu doivent rester au-dessus, c’est pourquoi vous allez utiliser le panneau Calques afin de changer l’ordre d’empilement des objets du document. 1 Dans le panneau Calques, cliquez sur la vignette du rectangle bleu afin de le sélectionner. 2 Faites-le glisser au sommet du calque 1, au-dessus de la vignette de la voiture classique. Remarque : Le calque situé au-dessus de la pile dans le panneau Calques est toujours le calque Web. Vous trouverez plus de détails concernant le calque Web dans « Didacticiel des bases de la conception Web » à la page 45. Lorsque vous faites glisser un objet, le pointeur se transforme afin de refléter le glissement effectué (Windows uniquement). Une ligne sombre dans le panneau Calques indique l’endroit où il serait placé si vous relâchiez le bouton de la souris à ce moment précis. 3 Relâchez le bouton de la souris. Le rectangle bleu est placé juste au-dessus de l’objet bitmap dans le panneau Calques. L’ordre d’empilement des objets change également sur le document. Le rectangle bleu recouvre à présent l’objet bitmap et l’objet de la bordure. 4 Si vous voulez que l’objet de la bordure soit l’objet placé au sommet, sélectionnez sa vignette et faites-la glisser en haut du panneau Calques, au-dessus du rectangle bleu. Créer et modifier un masque Maintenant que vous avez effectué différentes modifications au niveau de l’image Voiture classique, vous allez devoir effectuer une dernière procédure pour lui conférer une apparence de transparence graduelle. Didacticiel des bases de la conception graphique 29 Dans Fireworks, vous pouvez appliquer deux types de masques : les masques vectoriels et les masques bitmap. Pour ce didacticiel, vous appliquerez un masque bitmap simple à l’image de la voiture. Puis, vous le modifierez en lui assignant une trame de dégradé. Les pixels du masque afficheront ou masqueront l’image de la voiture, selon la valeur de leur échelle de gris. Appliquer un masque Pour commencer, vous allez appliquer à l’image de la voiture un masque bitmap vide et blanc. Un masque blanc présente un objet ou une image sélectionnée, attendu que les pixels noirs d’un masque masquent un objet ou une image sélectionnée. Vous dessinerez également sur le masque afin de donner l’impression que l’image de la voiture s’évanouit à l’arrière-plan. 1 Avec l’outil Pointeur, sélectionnez l’image bitmap. 2 Cliquez sur le bouton Ajouter masque, dans la partie inférieure du panneau Calques. Un masque vide transparent est ajouté à l’image sélectionnée. Vous pouvez voir que le masque a été ajouté en jetant un oeil à la vignette du masque, dans le panneau Calques. La surbrillance jaune autour de la vignette du masque indique qu’elle est sélectionnée. La vignette du masque L’objet masque Modifier le masque Vous allez maintenant assigner à l’image bitmap une apparence transparente en ajoutant au masque une trame de dégradé. 1 La vignette du masque sélectionnée dans le panneau Calques, cliquez et maintenez enfoncé le bouton de la souris au niveau de l’outil Pot de peinture dans la section Bitmap du panneau Outils. Choisissez l’outil Dégradé à partir du menu contextuel qui apparaît. 2 Cliquez sur la case Couleur de remplissage dans le Vérificateur de propriétés. La fenêtre contextuelle Modifier le dégradé s’ouvre. 30 Chapitre 1 3 Choisissez Blanc, Noir en bas du menu contextuel Réglage prédéfini. La rampe de couleurs et les nuanciers se modifient afin de refléter le nouveau paramètre. Les nuanciers de couleurs localisés juste au-dessous de la rampe de couleurs vous permettent de modifier les couleurs de dégradé. Rampe de couleurs Nuanciers de couleurs 4 Faites glisser le nuancier de couleurs de gauche (blanc) d’environ 1/4 de la distance vers la droite afin d’ajuster le dégradé. 5 Cliquez en dehors de la fenêtre contextuelle Modifier le dégradé afin de la fermer. 6 Sur le document, faites glisser le pointeur de dégradé au-dessus de l’image bitmap, comme présenté dans l’illustration suivante. Lorsque vous effectuez le glissement, vous voyez directement l’application de l’effet à l’écran. Cela vous permet de définir l’angle et la distance qui seront appliqués au dégradé. 7 Relâchez le bouton de la souris. Le masque est modifié avec la trame de dégradé que vous avez créée. Le masque affecte l’image de la voiture en lui donnant une apparence transparente graduellement. La vignette du masque du panneau Calques affiche la trame de dégradé que vous avez appliquée. Didacticiel des bases de la conception graphique 31 8 Choisissez l’outil Pointeur et cliquez sur la vignette du masque dans le panneau Calques. Le Vérificateur de propriétés montre que le masque a été appliqué en utilisant son aspect échelle de gris. Les pixels sombres du masque désactivent l’image de la voiture, tandis que les pixels plus clairs du masque affichent la voiture. Créer et éditer du texte Vous allez ensuite ajouter du texte dans le document et appliquer des propriétés de texte en utilisant le Vérificateur de propriétés. Vous allez créer quatre blocs de texte, deux pour le titre de l’annonce et deux pour le corps du texte. Créer le texte du titre Vous allez commencer par créer le texte du titre pour l’annonce de location de voitures. 1 Choisissez l’outil Texte dans la partie Vecteur du panneau Outils, puis déplacez le pointeur sur la fenêtre du document. Le pointeur prend l’aspect d’une poutre en I, et le Vérificateur de propriétés affiche les propriétés du texte. Taille Couleur de remplissage Police Boutons de style Interlignage Echelle horizontale 2 Boutons d’alignement Dans le Vérificateur de propriétés, exécutez les actions suivantes : • Choisissez Times New Roman à partir du menu contextuel Police. • Tapez 85 pour la taille de la police. • Cliquez sur la case Couleur de remplissage. Le pointeur prend l’aspect d’une pipette. Avec la pipette, cliquez sur le rectangle bleu du document. La fenêtre contextuelle des couleurs se ferme, et la case Couleur de remplissage se transforme afin de refléter la couleur choisie. 32 Chapitre 1 • Assurez-vous qu’aucun des boutons de style (Gras, Italique, Souligné) ne soit sélectionné. • Cliquez sur le bouton Alignement à gauche. 3 Avec le pointeur en forme de trait vertical, cliquez une fois au centre du document. Un bloc de texte vide est créé. Le cercle vide situé dans le coin supérieur droit du bloc de texte indique que le bloc de texte se redimensionne automatiquement. Dans Fireworks, un bloc de texte à redimensionnement automatique ajuste sa largeur en se basant sur la ligne de texte la plus longue du bloc. Indicateur de redimensionnement automatique 4 Tapez Vintage dans le bloc de texte. La largeur du bloc de texte augmente lorsque vous tapez. 5 Cliquez une fois en dehors du bloc de texte afin d’appliquer votre saisie de texte. Le bloc de texte reste sélectionné et l’outil Texte demeure l’outil sélectionné. Le cercle vide du bloc de texte n’est plus visible. Cet indicateur est visible uniquement lorsque vous saisissez ou lorsque vous modifiez du texte. 6 Choisissez l’outil Pointeur et faites glisser le texte afin de le positionner conformément à l’illustration suivante. 7 Cliquez en dehors du bloc de texte pour le désélectionner, et choisissez à nouveau l’outil Texte. 8 Dans le Vérificateur de propriétés, choisissez la police Arial et la taille de police 12. 9 Cliquez à nouveau sur le document, en-dessous du bloc de texte que vous venez juste de créer, et tapez CLASSIC RENTALS en majuscules. Didacticiel des bases de la conception graphique 33 10 Choisissez l’outil Pointeur pour appliquer la saisie de texte. En sélectionnant un autre outil du panneau Outils, les saisies et les modifications de texte sont appliquées comme si vous cliquiez en dehors d’un bloc de texte. En appuyant sur la touche Echap, vous atteindriez le même résultat. 11 Faites glisser le nouveau bloc de texte afin de le positionner juste en-dessous du bloc de texte Vintage, comme présenté dans l’illustration suivante. 12 Cliquez en dehors du bloc de texte pour le désélectionner. Créer le corps du texte Vous allez maintenant créer deux blocs de texte qui constitueront le corps du texte de cette annonce. 1 Choisissez l’outil Texte. 2 Cette fois, au lieu de cliquer simplement sur le document, effectuez un glissement afin de tracer une sélection avec le pointeur en forme de trait vertical, comme cela est présenté dans l’illustration suivante. Un bloc de texte apparaît. Le carré vide situé dans le coin supérieur droit indique que le bloc de texte a une largeur fixe, définie par la zone de sélection que vous avez tracée. Les blocs de texte aux largeurs fixes conservent la largeur que vous spécifiez, quelle que soit la quantité de texte que vous saisissez. Le poignée d’angle vide du coin indique une commande à bascule. En double-cliquant dessus, un bloc de texte permutera entre redimensionnement automatique et largeur fixe. 34 Chapitre 1 3 Tapez le texte suivant sans saut de ligne : Indulge yourself by traveling in a Vintage classic automobile, with a chauffeur to whisk you to any destination. Conseil : Si vous visionnez ce didacticiel en ligne, il vous suffit de copier et coller le texte ci-dessus dans le bloc de texte de Fireworks. Le texte se place dans le bloc de texte que vous avez créé. Le bloc de texte s’étend verticalement et non pas horizontalement. 4 Choisissez l’outil Pointeur et cliquez en dehors du bloc de texte pour le désélectionner. Ensuite, choisissez à nouveau l’outil Texte. 5 Dans le Vérificateur de propriétés, cliquez sur la case Couleur de remplissage et choisissez le blanc comme couleur de texte. 6 Cliquez dans le coin inférieur gauche du document. Un nouveau bloc de texte apparaît en haut du rectangle bleu. 7 Tapez les mots suivants en majuscules, sans entrer aucun retour à la ligne : SPORTS - LUXURY - CONVERTIBLE - LIMOUSINE - ANTIQUE - NEO-CLASSIC EXOTIC - ROADSTER Conseil : Si vous visionnez ce didacticiel en ligne, il vous suffit de copier et coller le texte ci-dessus dans le bloc de texte de Fireworks. 8 Choisissez l’outil Pointeur et repositionnez le bloc de texte comme indiqué ci-dessous. Didacticiel des bases de la conception graphique 35 Tout texte que vous créez dans Fireworks peut être modifié, comme dans un traitement de texte. Pour modifier un texte, double-cliquez simplement sur un bloc de texte avec l’outil Pointeur, sélectionnez le texte que vous voulez changer et écrasez le texte. Ou alors, cliquez n’importe où dans le bloc de texte avec le pointeur en forme de trait vertical afin d’ajouter un nouveau texte. Modifier les propriétés des textes Maintenant que les blocs de texte ont été créés, vous allez utiliser le Vérificateur de propriétés pour changer diverses propriétés des textes. 1 Sélectionnez le bloc de texte Vintage. Les propriétés du bloc de texte apparaissent dans le Vérificateur de propriétés. Ces propriétés sont similaires à celles affichées lorsque l’outil Texte est sélectionné. 2 Dans le Vérificateur de propriétés, exécutez les actions suivantes : • S’il n’est pas déjà sélectionné, choisissez Anticrénelage lissé dans le menu contextuel Niveau d’anticrénelage. L’anticrénelage lisse les bords du texte afin que les caractères du texte apparaissent plus propres et plus lisibles. En général, les polices serif Times New Roman avec une taille supérieure à 45 points sont plus lisibles lorsque l’anticrénelage lissé est activé. De même, les polices sans serif Arial avec une taille supérieure à 32 points sont plus lisibles lorsque l’anticrénelage lissé est activé. Conseil : Le terme serif se réfère aux toutes petites lignes (souvent comparées à des « pieds ») attachées aux caractères des polices telles que Times New Roman. Arial est considérée comme une police sans serif car ses caractères ne contiennent pas de serif. • Dans le Vérificateur de propriétés, fixez l’option Echelle horizontale à 89 % et appuyez sur Entrée. Les caractères du bloc de texte Vintage deviennent plus minces. L’échelle horizontale étire ou diminue horizontalement les caractères du texte sélectionné. Le paramètre par défaut est 100 %. Toute valeur supérieure étirera horizontalement le texte et toute valeur inférieure diminuera sa largeur. 36 3 Faites glisser le bloc de texte Vintage de manière à le positionner conformément à l’illustration suivante. 4 Sélectionnez le bloc de texte Locations classiques. Chapitre 1 5 Dans le Vérificateur de propriétés, exécutez les actions suivantes : • Cliquez sur la case Couleur de remplissage, entrez la valeur de couleur FF6600 et appuyez sur Entrée. • Cliquez sur le bouton Gras. • Choisissez Anticrénelage net à partir du menu contextuel Niveau d’anticrénelage. En général, les polices sans serif telles que Arial avec une taille située entre 12 et 18 points, sont plus lisibles lorsque l’anticrénelage net est activé. De même, les polices serif avec une taille située entre 24 et 32 points, sont plus lisibles lorsque l’anticrénelage net est activé. 6 Faites glisser le bloc de texte afin de le repositionner tel que cela est présenté ci-dessous. 7 Sélectionnez le bloc de texte Indulge yourself. 8 Dans le Vérificateur de propriétés, exécutez les actions suivantes : • • • • • • Définissez une taille de police de 13. Choisissez le noir comme couleur de texte. Cliquez sur le bouton Alignement à droite. Choisissez Anticrénelage net à partir du menu contextuel Niveau d’anticrénelage. Fixez l’option Echelle horizontale à 88 %. Fixez l’option Interlignage à 150 % et appuyez sur Entrée. L’interlignage détermine l’espace entre les lignes d’un texte. L’interlignage normal d’un texte est de 100 %. Toute valeur supérieure à 100 % augmente l’espace entre les lignes, et toute valeur inférieure rapproche les lignes les unes des autres. Didacticiel des bases de la conception graphique 37 9 Faites glisser un des points d’ancrage du bloc de texte afin de changer ses dimensions, de manière à ce qu’il s’apparente à l’illustration ci-dessous. Si nécessaire, faites glisser tout le bloc de texte afin de le repositionner, lui aussi. 10 Sélectionnez le bloc de texte en bas du document. 11 Dans le Vérificateur de propriétés, exécutez les actions suivantes : • Définissez une taille de police de 13. • Choisissez Anticrénelage net à partir du menu contextuel Niveau d’anticrénelage. • Fixez l’option Echelle horizontale à 75 % et appuyez sur Entrée. 12 Si nécessaire, repositionnez le bloc de texte. Ajouter une ombre portée Vous pouvez appliquer des effets en direct au texte. Vous allez ajouter une ombre portée au texte Vintage en utilisant les outils d’effets en direct dans le Vérificateur de propriétés. 1 Sélectionnez le bloc de texte Vintage. 2 Dans le Vérificateur de propriétés, cliquez sur le bouton Ajouter l’effet. A partir du menu contextuel des effets du panneau Effet, choisissez Ombre et néon > Ombre portée. Les options du nouvel effet apparaissent dans une fenêtre contextuelle. 3 Entrez 5 pour la distance et 60 % pour l’opacité. Cliquez en dehors de la fenêtre contextuelle pour la fermer. Un effet d’ombre portée est ajouté au bloc de texte Vintage. 4 38 Cliquez sur une zone vide de la fenêtre du document pour désélectionner le bloc de texte. Chapitre 1 Exporter le document Vous avez créé un objet vectoriel et modifié ses propriétés, importé une image bitmap et effectué des modifications à ses pixels, et vous avez également créé et formaté un texte. Vous êtes prêt à optimiser et à exporter le document. Optimiser le graphisme Avant d’exporter un document Fireworks, vous devez toujours commencer par l’optimiser. L’optimisation assure l’exportation d’un graphisme avec la meilleure compression et qualité possibles. 1 Exécutez l’une des actions suivantes pour ouvrir le panneau Optimiser, s’il n’est pas déjà ouvert : • Choisissez Fenêtre > Optimiser. • Si le panneau est minimisé à droite de l’écran, cliquez sur la flèche d’extension afin de voir l’intégralité du panneau. 2 Choisissez JPEG, Qualité supérieure à partir du menu contextuel Paramètres. Les options du panneau se modifient afin de refléter le nouveau paramètre. Ces paramètres peuvent être modifiés, mais pour ce didacticiel, vous utiliserez les paramètres par défaut. Didacticiel des bases de la conception graphique 39 3 Cliquez sur l’onglet Aperçu en haut de la fenêtre du document. L’onglet Aperçu affiche votre document tel qu’il apparaîtrait s’il était exporté avec les paramètres courants. Taille du fichier Temps de chargement En haut à droite de la fenêtre, Fireworks affiche la taille que prendrait le fichier une fois exporté, et l’estimation du temps nécessaire pour afficher le graphisme s’il était visionné sur le Web. 40 Chapitre 1 Exporter le graphisme Vous avez optimisé votre graphisme, vous êtes donc prêt à l’exporter sous la forme d’un fichier JPEG. 1 Choisissez Fichier > Exporter. La boîte de dialogue Exporter s’ouvre. Le nom de fichier listé possède une extension .jpg. Fireworks choisit ce format de fichier, car vous l’avez sélectionné dans le panneau Optimiser. 2 Naviguez dans le dossier Tutorials de votre bureau et ouvrez le dossier Tutorial1/Exporter. 3 Assurez-vous que le menu contextuel Type (Windows) ou Enregistrer sous (Macintosh) lit Images uniquement, et cliquez sur Enregistrer. Le fichier JPEG est exporté vers l’emplacement que vous avez spécifié. Rappelez-vous que le fichier PNG est votre fichier source ou fichier de travail. Bien que vous ayez exporté votre document dans le format JPEG, vous devez également enregistrer le PNG de manière à ce que toute modification effectuée par vos soins se reflète également dans le fichier source. 4 Choisissez Fichier > Enregistrer pour enregistrer les modifications dans le fichier PNG. 5 Choisissez Fichier > Fermer. Didacticiel des bases de la conception graphique 41 Visionner le document exporté Le nouveau fichier créé au cours du processus d’exportation est localisé dans le dossier que vous avez spécifié. 1 Dans Fireworks, choisissez Fichier > Ouvrir et placez-vous dans le dossier Export. Fireworks a créé à cet emplacement un fichier nommé vintage.jpg. 2 Sélectionnez vintage.jpg et cliquez sur Ouvrir. Le graphisme s’ouvre dans une nouvelle fenêtre du document de Fireworks. Tous vos objets du panneau Calques ont été fusionnés. Lorsque des objets sont fusionnés, ils sont regroupés dans un seul objet et ne sont pas modifiables en tant qu’objets séparés. Le Vérificateur de propriétés affiche les propriétés d’un bitmap. Tous les effets en direct et les autres attributs que vous avez appliqués en utilisant le Vérificateur de propriétés ne sont plus disponibles pour le bitmap sélectionné. Le document présente de cette façon, car Fireworks doit fusionner l’image et toutes ses propriétés lorsque vous choisissez de l’exporter vers le format JPEG. Toutefois, vous disposez toujours de votre fichier PNG source, donc, si vous devez travailler davantage sur le projet, vous pouvez toujours ouvrir le fichier PNG et tous les objets demeureront modifiables. 3 Choisissez Fichier > Ouvrir et sélectionnez vintage.png dans le dossier Tutorial1. Cliquez sur Ouvrir. Dans le panneau Calques, l’ensemble de vos objets sont à nouveau disponibles en tant qu’objets séparés. Chaque objet est modifiable, accompagné de ses propriétés. 4 Cliquez sur chaque objet. Le Vérificateur de propriétés affiche les différentes options pour chacun des objets que vous sélectionnez. 42 Chapitre 1 5 Sélectionnez le texte Vintage du document. L’effet en direct Ombre portée de cet objet texte apparaît dans le Vérificateur de propriétés. Vous pouvez maintenant apprécier les avantages apportés par l’utilisation d’un fichier PNG Fireworks en qualité de fichier source. Vous pouvez effectuer des modifications à un document et il reste toujours modifiable, même si vous choisissez d’exporter le document vers un autre format tel que le JPEG. Récapitulatif Vous avez accompli les tâches requises pour créer des graphismes dans Fireworks. Vous avez appris à créer et enregistrer un nouveau document, et à ajouter des objets vectoriels ainsi que des graphismes bitmap dans votre document. Vous avez également appliqué des effets en direct, travaillé avec des calques, créé un masque et ajouté du texte. Pour terminer, vous avez appris à exporter le graphisme terminé. Pour obtenir des informations détaillées sur certaines des fonctions mentionnées dans ce didacticiel, et pour obtenir des informations sur d’autres fonctions de Fireworks, référez-vous à l’index Utilisation de Fireworks ou consultez l’Aide de Fireworks. Pour obtenir d’autres didacticiels pour Fireworks, visitez le site Web de Macromedia à l’adresse http://www.macromedia.com/fr/. Assurez-vous également de visiter le centre d’assistance de Macromedia (qui a été gratifié d’un prix) à l’adresse http://www.macromedia.com/fr/support/. Pour apprendre comment utiliser Fireworks afin de créer des pages Web interactives, voir « Didacticiel des bases de la conception Web » à la page 45. Vous utiliserez l’image JPEG que vous avez exportée dans ce document et vous l’importerez vers une page Web. Vous apprendrez également comment créer de l’interactivité sur le Web via les boutons, les survols et les menus contextuels. Didacticiel des bases de la conception graphique 43 44 Chapitre 1 CHAPITRE 2 Didacticiel des bases de la conception Web Ce didacticiel vous guidera à travers les tâches de base de la conception des graphismes et des intéractions Web de Macromedia Fireworks MX. Vous acquerrez une expérience pratique en utilisant l’application de graphismes Web leader dans le monde de l’industrie, et vous apprendrez tout le long des concepts de création pour le Web. Objectifs du didacticiel Ce didacticiel se présente sous la forme d’un processus type de conception de pages Web Fireworks. Vous apprendrez à : • • • • • • • • • • • Copier le dossier Tutorials Affichage de la page Web finale Ouvrir le fichier source Importer un graphisme Découper le document Créer un survol par glisser-déposer Créer et modifier des boutons pour constituer une barre de navigation Créer et modifier un menu contextuel Optimiser le document Exporter du HTML Tester le fichier terminé Prérequis Pour pouvoir utiliser ce didacticiel, vous devez être familier avec la conception graphique sous Fireworks ou toute autre application graphique bitmap ou vectorielle. Vous devez disposer d’un certain nombre de connaissances de base sous Fireworks « Didacticiel des bases de la conception graphique » à la page 15. Plus précisément, vous devez être capable d’effectuer les tâches suivantes avec Fireworks : • • • • • • Sauvegarde d’un document Sélection d’objets Modification de propriétés d’objets Affichage et utilisation de panneaux Travailler avec des calques et des objets Création et modification de texte 45 • Exportation d’un graphisme Copier le dossier Tutorials Avant de commencer, vous devrez créer une copie du dossier Tutorials. Vous pourrez ainsi enregistrer votre travail tout en vous permettant, vous ou un autre utilisateur, de terminer le didacticiel plus tard en utilisant les fichiers originaux. Si vous avez terminé le didacticiel des bases de la conception graphique, vous avez déjà copié le dossier Tutorials et vous pouvez alors ignorer cette étape. 1 Ouvrez le dossier de l’application Fireworks de votre disque dur. Remarque : Si vous ne pouvez pas voir le dossier de votre application Fireworks, vous avez certainement un accès limité aux fichiers de votre système. Vous pouvez charger les fichiers nécessaires à ce didacticiel depuis le Centre d’assistance sur le Web à l’adresse http://www.macromedia.com/fr/support/. 2 Faites une copie du dossier Tutorials sur votre bureau. Affichage de la page Web finale Vous pouvez alors observer le fichier du didacticiel tel qu’il sera lorsque vous aurez terminé le didacticiel, lorsque vous l’aurez exporté en tant que fichier HTML. 1 Démarrez votre navigateur Web. 2 Ouvrez le dossier Tutorials que vous avez copié sur votre bureau et recherchez Tutorial2/ Complete. Remarque : Certaines versions de Microsoft Windows cachent par défaut les extensions de fichier reconnues. Si vous n’avez pas modifié cette option, les fichiers du dossier Complete s’afficheront sans les extensions. Lorsque l’on traite des graphismes pour le Web, il est préférable de pouvoir voir les extensions de fichier. Reportez-vous à l’aide de Windows pour obtenir plus d’informations concernant l’affichage des extensions de fichier. 3 Sélectionnez le fichier final.htm et faites-le glisser vers la fenêtre du navigateur actif. Dans le cadre de ce didacticiel, vous devez compléter la pré-version d’une page Web pour Global, une société de location de voiture. 4 Déplacez le pointeur sur la grande image Vintage. Lorsque le pointeur passe au-dessus de l’image Vintage, une autre image de la page est modifiée. C’est ce que l’on appelle un survol non superposé. 5 Déplacez le pointeur sur la barre de navigation située en haut de la page Web. Les boutons changent en fonction du bouton situé sous le pointeur. Cliquez sur le bouton Taux pour tester le lien. Le lien vous envoie vers la page de Fireworks à l’adresse http://www.macromedia.com/fr/. Au fur et à mesure du didacticiel, vous saisirez votre propre URL pour ce lien et d’autres éléments. 6 Utilisez le bouton Retour de votre navigateur pour retourner à la page final.htm. 7 Déplacez le pointeur sur l’image Aéroports mondiaux. Un menu contextuel apparaît. Survolez avec le pointeur chacun des éléments du menu ainsi que le premier élément qui contient un sous-menu. 8 Cliquez sur Etats-Unis pour tester le lien et retournez à la page final.htm. 9 Après avoir consulté la page Web, vous pouvez la conserver ouverte comme référence ou bien la refermer. Remarque : Le dossier Complete inclut également le document Fireworks à partir duquel le fichier HTML a été généré. Pour afficher ce document, double-cliquez sur final.png. 46 Chapitre 2 Ouvrir le fichier source Maintenant que vous avez consulté le fichier final.htm à partir d’un navigateur, vous êtes prêt à commencer votre projet. 1 A partir de Fireworks, choisissez Fichier > Ouvrir. 2 Ouvrez le dossier Didacticiel se trouvant sur votre bureau. A partir du dossier Tutorial2/Start, ouvrez le fichier global.png. Remarque : Au fur et à mesure du didacticiel, veillez à enregistrer fréquemment les modifications en choisissant Fichier > Enregistrer. Importer un graphisme Maintenant que vous avez ouvert la conception incomplète de la page Web Global, vous allez importer un graphisme. Si vous avez terminé le didacticiel des bases de la conception graphique avec Fireworks, vous utiliserez le fichier JPEG que vous avez créé. Si ce n’est pas le cas, une image achevée vous est fournie. 1 Choisissez Fichier > Importer et suivez les étapes suivantes : • Si vous avez terminé le didacticiel des bases de la conception graphique, recherchez le dossier Tutorial1/Export. • Si vous n’avez pas terminé le didacticiel des bases de la conception graphique, recherchez le dossier Tutorial2/Assets. 2 Sélectionnez vintage.jpg et cliquez sur Ouvrir. 3 Cliquez n’importe où dans l’espace vide, donc blanc, du document. L’image apparaît, sélectionnée. 4 Faites glisser l’image, de façon à la positionner conformément à l’illustration suivante. Didacticiel des bases de la conception Web 47 Découper le document Les concepteurs Web utilisent un processus nommé découpage pour couper des documents Web en morceaux plus petits, et ce pour diverses raisons. Les petites images se téléchargent plus rapidement sur le Web, de telle sorte que les utilisateurs peuvent observer un chargement progressif de la page au lieu d’attendre le chargement d’une grande image. En outre, le découpage permet d’optimiser différemment diverses parties d’un document. Le découpage est également nécessaire pour ajouter de l’interactivité. Vous allez créer ici des découpes pour certains éléments graphiques d’une page Web. Plus tard, vous ajouterez de l’interactivité à ces découpes et vous leur définirez des paramètres d’optimisation et de compression. 1 L’image Vintage toujours sélectionnée, choisissez Edition > Insertion > Découpe. Une découpe est insérée en haut de l’image. Les découpes possèdent une superposition verte par défaut. 2 Cliquez en dehors de la découpe pour la désélectionner. Les repères de découpe rouges définissent la découpe, entourant la largeur et la hauteur du document. Lorsque vous avez créé la découpe, Fireworks a découpé automatiquement pour vous le reste du document. Remarque : Si vous ne voyez pas les repères de découpe rouges, choisissez Affichage > Repères de découpe. 3 48 A l’aide du bouton Maj, cliquez sur les graphismes Aéroports mondiaux et Super tarifs de week-end à gauche du document afin de les sélectionner simultanément. Chapitre 2 4 Choisissez Edition > Insertion > Découpe. Dans la boîte de dialogue qui apparaît, choisissez Multiple. Cela vous permet d’insérer simultanément plusieurs découpes. Les découpes sont insérées en haut de chaque graphisme sélectionné. L’ajout de découpes supplémentaires change la mise en page des découpes automatiques dans le reste du document. 5 Cliquez en dehors des découpes pour les désélectionner. Il y a maintenant un espace entre la découpe Vintage et la découpe Great Weekend Rates. Il s’agit d’une mince découpe automatique. 6 Placez le pointeur sur le repère de découpe gauche de l’image Vintage. Le pointeur se transforme en un pointeur de déplacement du repère, indiquant que vous pouvez saisir le repère de la découpe et le faire glisser. En faisant glisser le repère d’une découpe, vous pouvez changer la forme d’une découpe. 7 Faites glisser le repère de la découpe vers la gauche, jusqu’à ce qu’il atteigne le repère de la découpe droite du graphisme Super tarifs de week-end, comme cela est montré dans l’illustration ci-dessous. Didacticiel des bases de la conception Web 49 8 Relâchez le bouton de la souris. La découpe Vintage s’étend à présent tout le long de la découpe Super tarifs de week-end, et la minuscule découpe automatique est supprimée. Représentez-vous les découpes comme étant les cellules d’un tableau dans un tableur ou un traitement de texte. Le fait de glisser les repères d’une découpe pour redimensionner une découpe dans Fireworks provoque le redimensionnement d’autres découpes, tout comme le glissement des bords d’une cellule d’un tableau redimensionne d’autres cellules du tableau. Si vous faites glisser un repère de découpe sur et au-delà de découpes automatiques, les repères de découpe fusionnent et les découpes automatiques inutiles sont supprimées. 9 Si le panneau Calques est réduit ou invisible, cliquez sur sa flèche d’extension ou choisissez Fenêtre > Calques. Le calque Web se trouve en haut du panneau. Il contient tous les objets Web d’un document. Les trois découpes que vous avez créées sont listées ici. Dans tout document, le calque Web est toujours le calque le plus haut. Il ne peut être ni déplacé, ni renommé ou supprimé. Créer un survol par glisser-déposer Maintenant que vous avez découpé votre document, vous êtes prêt à ajouter de l’interactivité. Pour créer un survol par glisser-déposer, vous utiliserez deux des découpes insérées lors de la précédente étape. Il existe deux sortes de survols : les survols simples et les survols non superposés. Dans un navigateur Web, un survol simple affiche une image différente lorsque le pointeur passe pardessus. Un survol non superposé engendre le changement d’une autre image dans une autre partie de l’écran lorsque le pointeur passe par-dessus. Vous créerez ici un survol non superposé. 50 Chapitre 2 1 Sélectionnez la découpe recouvrant l’image Vintage. L’icône ronde au centre de la découpe est appelée poignée de comportement. Elle vous permet d’ajouter des comportements ou de l’interactivité à une découpe. Si vous êtes familier avec les comportements dans Macromedia Dreamweaver, vous reconnaîtrez de nombreux comportements identiques dans Fireworks. La poignée de comportement Les comportements peuvent également être appliqués par l’intermédiaire du panneau Comportements. Mais pour une interactivité simple telle que les survols, la poignée de comportement d’une découpe est une méthode plus simple et rapide pour appliquer un comportement. 2 Faites glisser la poignée de comportement sur la découpe Great Weekend Rates et relâchez le bouton de la souris. Une ligne de comportement bleue s’étend de la poignée de comportement au coin de la découpe, et la boîte de dialogue Permuter les images apparaît. Didacticiel des bases de la conception Web 51 3 Dans le menu contextuel Permuter l’image à partir de, assurez-vous que Image 2 soit sélectionné, puis cliquez sur OK. Dans un navigateur, si le pointeur se déplace sur la découpe Vintage, une image dans Image 2 remplacera le graphisme Great Weekend Rates. L’image Vintage est considérée comme étant l’élément déclencheur de l’effet de survol, et l’image qui remplace le graphisme Super tarifs de week-end comme l’image de permutation. 4 Si le panneau Images est réduit ou s’il n’est pas visible, cliquez sur la flèche d’extension du groupe de panneaux Images et Historique, puis cliquez sur l’onglet Images, ou choisissez Fenêtre > Images. Le panneau Images liste les images disponibles dans le document actif. Il n’y a actuellement qu’une seule image dans le document. Le panneau Images est généralement utilisé pour l’animation. Dans le cas de survols, il est utilisé pour conserver les images de permutation. 5 Cliquez sur le bouton Nouvelle image / Dupliquer dans la partie inférieure du panneau. Une nouvelle image nommée Image 2 est créée dans le panneau Images. L’espace de travail est maintenant vide, à l’exception des découpes que vous avez insérées. Aucun objet n’est listé dans le panneau calques, excepté le contenu du calque Web. Cela est dû au fait que, par défaut dans Fireworks, les calques ne sont pas partagés par toutes les images, à l’exception du calque Web qui est toujours partagé. Les objets du calque Web apparaissent dans chaque image du document, ainsi, toute modification que vous imposez aux objets Web, telle que les découpes, affecte toutes les images. 52 Chapitre 2 6 Choisissez Fichier > Importer et recherchez le dossier Tutorial2/Assets. Sélectionnez le fichier nommé rates.gif et cliquez sur Ouvrir. 7 Placez le pointeur d’insertion sur la découpe, là où le graphisme Super tarifs de week-end était localisé dans Image 1. Alignez le mieux possible le pointeur avec le coin supérieur gauche de la découpe. 8 Cliquez pour insérer le graphisme. Le graphisme Vintage Classic Rates apparaît. 9 Cliquez sur l’onglet Aperçu en haut de la fenêtre du document, puis masquez les découpes du document en cliquant sur le bouton Masque les découpes et les références dans la partie Web du panneau Outils. Déplacez le pointeur sur l’image Vintage. L’image Super tarifs de week-end change lorsque le pointeur survole l’image Vintage. Conseil : Si l’image semble un peu sauter ou si la transition entre les images ne semble pas fluide, ajustez la position de l’image de permutation dans Image 2, affichage d’origine. Pour un positionnement précis, activez Séquence de calques dans le panneau Images, ou vérifiez que les coordonnées X et Y de l’image Vintage Classic Rates sont les mêmes que celles de l’image Great Weekend Rates dans le Vérificateur de propriétés. Lorsque vous avez terminé, retournez dans Image 1 et, si nécessaire, désactivez Séquence de calques. Pour en apprendre davantage sur ces options, référez-vous à l’index de Utilisation de Fireworks ou bien consultez l’aide de Fireworks. 10 Lorsque vous avez terminé, cliquez sur l’onglet Original en haut de la fenêtre du document pour revenir à l’affichage normal, et réactivez les découpes en cliquant sur le bouton Affiche les découpes et les références du panneau Outils. Vous venez de créer un survol non superposé. Les survols simples sont créés de manière similaire : lorsque vous faites glisser la poignée de comportement d’une découpe, ce que vous avez fait à l’étape 2, il vous suffit de la faire glisser sur la même découpe. Didacticiel des bases de la conception Web 53 En général, les concepteurs Web ajoutent un effet de survol à une image pour fournir aux utilisateurs un signe visuel leur indiquant que l’on peut cliquer sur l’image. Si le site Web Global était un site réél sur Internet, vous voudriez certainement que les images Vintage et Tarifs renvoient vers d’autres pages fournissant davantage d’informations. Pour ce didacticiel, vous laisserez le survol non superposé tel qu’il est. Dans la partie suivante, vous allez pouvoir expérimenter l’insertion de liens vers d’autres objets Web. Créer et modifier des boutons pour constituer une barre de navigation Les boutons sont des objets Web qui renvoient vers d’autres pages Web. Leur apparence change généralement selon le mouvement de la souris de l’utilisateur ou d’autres actions, telles que le clic de souris, un signe visuel témoignant d’une interactivité. Par exemple, si le pointeur passe audessus du bouton ou si l’on a cliqué dessus, l’effet de survol de ce bouton sera différent. Une barre de navigation est une série de boutons qui apparaissent sur une ou plusieurs pages d’un site Web. En général, tous les boutons d’une barre de navigation ont la même apparence, mis à part leur texte. Vous allez créer ici une barre de navigation pour le site Web Global. Créer le symbole d’un bouton L’image et le texte initial d’un bouton ont déjà été créés à votre place. Vous convertirez cette image en un symbole de bouton. 1 Dans Fireworks, sélectionnez l’image du bouton (nommée BUTTON TEXT) dans le coin supérieur gauche du document. 2 Choisissez Modification > Symbole > Convertir en symbole. La boîte de dialogue Propriétés du symbole s’ouvre. 3 Tapez My Button dans la zone de texte Nom, choisissez le type de symbole Bouton et cliquez sur OK. Une découpe apparaît en haut du graphisme du bouton, et une icône raccourci apparaît à gauche de la découpe. Cela signifie que la sélection dans l’espace de travail est une occurrence du symbole que vous venez tout juste de créer. Les symboles sont comme des copies maître de vos images. Lorsque vous changez un symbole, toutes les occurrences de ce symbole présentes dans votre document changent automatiquement. Les symboles se trouvent dans la bibliothèque. 54 Chapitre 2 4 Si le panneau Bibliothèque est minimisé ou s’il n’est pas visible, cliquez sur la flèche d’extension du groupe de panneaux Actifs et cliquez sur l’onglet Bibliothèque, ou bien choisissez Fenêtre > Bibliothèque. Votre symbole est listé dans le panneau Bibliothèque. Créer des états de bouton Vous allez ensuite créer différents états pour le symbole du bouton. Les états des boutons correspondent aux différentes apparences des boutons lorsqu’il apparaissent dans un navigateur Web, lorsque le pointeur le survole ou lorsque l’on clique dessus. 1 Double-cliquez sur l’instance du bouton que vous avez créée. Conseil : Une alternative consiste à double-cliquer sur l’aperçu du bouton dans le panneau Bibliothèque ou sur l’icône du symbole située à côté de ce dernier, dans la liste des symboles du panneau Bibliothèque. L’éditeur de boutons s’ouvre avec l’image du bouton affichée dans la zone de travail. Didacticiel des bases de la conception Web 55 2 Cliquez sur les onglets placés en haut de l’éditeur de boutons. Les quatre premiers onglets représentent les états des boutons. Le dernier onglet, Zone active, représente la zone active du bouton, autrement dit la partie qu’un utilisateur doit cliquer ou survoler pour activer les états du bouton. La zone active est également la zone d’inversion du bouton, autrement dit la zone qui change avec chacun des états du bouton. Il n’y a actuellement aucun état pour le symbole du bouton mis à part l’état Relevé, l’état du bouton avant qu’il ne soit survolé ou cliqué. 3 Cliquez sur l’onglet Au-dessus, en haut de l’éditeur de boutons, puis cliquez sur le bouton Copier le graphisme Relev. Le graphisme du bouton est copié à partir de l’onglet Relevé. L’état Au-dessus d’un bouton est son apparence lorsque le pointeur le survole. Pour donner à l’utilisateur un effet visuel de réaction, vous changerez la couleur du rectangle derrière le texte. 4 Sélectionnez le rectangle. Assurez-vous de sélectionner le rectangle et non pas le texte. Si vous n’êtes pas sûr de votre sélection, vérifiez dans le panneau Calques lequel des deux est sélectionné. 5 Cliquez sur la case Couleur de la trame dans le Vérificateur de propriétés, et choisissez la couleur noire. Le rectangle est maintenant noir. 6 Cliquez sur l’onglet Enfoncé en haut de l’éditeur de boutons, et cliquez sur le bouton Copier le graphisme Au-dessus. L’image du bouton est copiée à partir de l’onglet Au-dessus. L’état Enfoncé d’un bouton est son apparence après qu’un utilisateur ait cliqué dessus. Cette fois-ci, vous ne changerez pas la couleur du rectangle, vous le laisserez tel qu’il est. 7 Cliquez sur Terminé dans l’éditeur de boutons pour appliquer vos modifications au symbole du bouton. 8 Cliquez sur l’onglet Aperçu dans la fenêtre du document et testez les états du bouton. Si nécessaire, désactivez les découpes. Lorsque vous avez terminé, cliquez sur l’onglet Original et réactivez les découpes. Créer des occurrences de boutons multiples Vous allez maintenant créer plusieurs occurrences du symbole du bouton. 1 Sélectionnez le bouton dans l’espace de travail, si cela n’a pas encore été fait. 2 Choisissez Edition > Cloner. Une nouvelle occurrence du bouton apparaît en haut du bouton d’origine. 56 Chapitre 2 3 Maintenez appuyée la touche Maj tout en appuyant sur la touche fléchée droite de manière répétée pour déplacer la nouvelle occurrence vers la droite. Le déplacement de l’occurrence s’effectue avec des incréments de 10 pixels. Si nécessaire, utilisez uniquement les touches fléchées afin de déplacer la sélection d’un pixel à la fois. Positionnez l’occurrence directement à droite de l’occurrence d’origine, mais sans le superposer, comme indiqué dans l’illustration ci-dessous. 4 Clonez deux autres instances du bouton, et positionnez-les à droite de la précédente occurrence. Conseil : Un raccourci : appuyez sur Alt (Windows) ou Option (Macintosh) tout en faisant glisser l’occurrence sélectionnée avec le pointeur afin d’en faire une copie. Une fois que la nouvelle occurrence est positionnée immédiatement à droite de la précédente occurrence, choisissez Edition > Répéter Dupliquer pour créer et placer automatiquement une autre copie de l’occurrence. Changer le texte de l’occurrence du bouton Maintenant que vous avez créé tous les boutons de votre barre de navigation, vous devez assigner un texte unique à chacun des boutons. Vous pouvez facilement changer le texte de l’occurrence d’un bouton en utilisant le Vérificateur de propriétés. 1 Sélectionnez l’occurrence du bouton à l’extrême gauche. Les propriétés de l’occurrence du bouton apparaissent dans le Vérificateur de propriétés. A l’exception du menu contextuel Paramètres d’exportation, ces propriétés s’appliquent uniquement à l’occurrence sélectionnée. Effectuer des modifications ici n’affectera pas le symbole du bouton d’origine dans la Bibliothèque. 2 Dans le Vérificateur de propriétés, remplacez le texte de la zone de texte par le mot HOME écrit en majuscules. Puis appuyez sur Entrée. Le texte du bouton change pour refléter votre saisie. 3 Pour les trois boutons restant, changez respectivement le texte des boutons par VEHICLES, RATES et CONTACT US. Didacticiel des bases de la conception Web 57 Association d’URL aux boutons Vous allez ensuite associer une URL unique ou un lien à chaque occurrence de bouton. Une URL, ou Uniform Resource Locator (localisateur uniforme de ressources), est l’adresse ou l’emplacement d’une page sur le Web. Il est très simple d’associer des URL à des boutons en utilisant le Vérificateur de propriétés. 1 Sélectionnez l’occurrence de bouton nommée Accueil. 2 Saisissez index.htm dans le champ d’édition Lien de le Vérificateur de propriétés. Si le bouton Accueil est cliqué dans un navigateur Web, ce dernier ira à une page nommée index.htm. Plus loin dans le didacticiel, vous découvrirez pourquoi vous avez associé le bouton Accueil à cette page. 3 Sélectionnez l’occurrence du bouton Véhicules et entrez votre URL préférée dans le champ d’édition Lien de le Vérificateur de propriétés. Pour ce didacticiel, toute URL active fera l’affaire. Dans un site Web réel, vous entreriez l’URL vers laquelle vous voudriez que le bouton Véhicules redirige l’utilisateur. Remarque : Assurez-vous de bien saisir l’URL d’un site Web existant, de manière à ce que puissiez tester plus tard les liens de votre bouton. 4 Associez une URL à chacune des occurrences de bouton restantes. Une fois encore, n’importe quelle URL active fait l’affaire. 5 Choisissez Fichier > Aperçu dans le navigateur > Aperçu dans [votre navigateur préféré]. Pour tester les liens des boutons, vous devez prévisualiser le document dans un navigateur. Remarque : Si votre navigateur n’est pas listé, vous devez d’abord sélectionner un navigateur en choisissant Fichier > Aperçu dans le navigateur > Sélectionner le navigateur principal. Lorsque le document s’ouvre dans votre navigateur, testez les boutons que vous avez créés. Mis à part le bouton Accueil, qui renvoie vers un fichier que vous n’avez pas encore créé, chaque bouton doit renvoyer vers le lien que vous avez spécifié dans Fireworks. Modifier le symbole du bouton Ensuite vous modifierez le symbole du bouton d’origine. Les changements seront automatiquement appliqués à toutes les occurrences de bouton de votre barre de navigation. Vous vous demandez peut-être à quoi peut bien ressembler le symbole d’origine du bouton maintenant que vous avez changé le texte de plusieurs de ses occurrences. 58 Chapitre 2 1 Dans l’espace de travail, double-cliquez sur l’une des occurrences du bouton. L’éditeur de boutons s’ouvre avec le symbole d’origine du bouton et le texte affichés dans l’espace de travail. Le symbole d’origine du bouton est intact et il affiche le texte d’origine. Si vous aviez changé le texte de chaque bouton de l’espace de travail, vous auriez uniquement modifié chaque occurrence de bouton. Si vous effectuez ici des modifications au niveau de l’apparence du rectangle ou du texte, vous changeriez le symbole d’origine, et ces modifications se reflèteraient dans toutes les occurrences de l’espace de travail. 2 Cliquez sur l’onglet Au-dessus. 3 Sélectionnez le rectangle noir. 4 Cliquez sur Couleur de la trame dans le Vérificateur de propriétés et entrez la valeur de couleur FF6633. Appuyez sur Entrée pour appliquer le changement de couleur. Le rectangle est maintenant orange. 5 Cliquez sur Terminé dans l’éditeur de boutons pour appliquer les modifications au symbole de bouton. 6 Cliquez sur l’onglet Aperçu de la fenêtre du document et testez les boutons. Chaque bouton appartenant à l’état Au-dessus est maintenant orange. Vous avez changé uniquement le symbole du bouton, mais les modifications ont été appliquées à toutes les occurrences de bouton de votre barre de navigation. 7 Cliquez sur l’onglet Original et double-cliquez sur une occurrence de bouton de l’espace de travail. Cette fois, vous allez changer le texte du symbole du bouton. 8 Sélectionnez le texte du bouton dans l’éditeur de boutons, puis, dans le Vérificateur de propriétés, choisissez la police Arial. Faites ceci pour chacun des états du bouton. 9 Double-cliquez sur le bloc de texte dans l’éditeur de boutons, et supprimez le mot BOUTON. 10 Dans la boîte de dialogue qui vous demande si vous voulez changer le texte des autres états du bouton, cliquez sur Oui. Examinez les différents états de bouton dans l’éditeur de boutons. Les changements de texte d’un état se reflètent dans tous les états du bouton. Rappelez-vous lorsque vous avez changé la police : vous aviez également dû la changer dans chacun des états. Cela est dû au fait que vous pouvez appliquer différents attributs graphiques et de texte à chaque état d’un bouton. C’est utile si vous voulez que la couleur du texte change lorsqu’un utilisateur survole un bouton, par exemple. Didacticiel des bases de la conception Web 59 11 Cliquez sur Terminé pour quitter l’éditeur de boutons. La police de chaque occurrence de bouton change afin de refléter la nouvelle sélection de police, mais le texte reste le même. Les occurrences de boutons reflètent uniquement les modifications apportées à l’apparence graphique d’un symbole de bouton, y compris ses attributs de texte, mais pas les modifications apportées au texte lui-même. Les symboles de bouton vous permettent de changer rapidement l’apparence graphique de toutes les occurrences de bouton d’une barre de navigation, tout en conservant le texte unique de chaque occurrence. Créer et modifier un menu contextuel Un menu contextuel est un menu qui apparaît lorsque, dans un navigateur, vous déplacez le pointeur sur une image de déclenchement. Il contient une liste d’éléments qui créent des liens vers d’autres pages Web. Vous allez créer et modifier un menu contextuel qui liste la localisation des aéroports de Global. Créer les éléments de liste d’un menu contextuel Vous allez commencer par créer les éléments de liste du menu contextuel en utilisant l’éditeur de menu contextuel. 1 Sélectionnez la découpe recouvrant le graphisme Aéroports mondiaux. 2 Choisissez Modifier > Menu contextuel > Ajouter menu contextuel. L’éditeur de menu contextuel s’ouvre. 3 60 Double-cliquez sur le champ d’édition situé dans le coin supérieur gauche (Windows uniquement). Chapitre 2 4 Saisissez North America dans le champ d’édition et appuyez sur Entrée. La boîte d’édition suivante est sélectionnée, prête à accueillir une autre saisie. 5 Tapez Europe et appuyez sur Entrée. 6 Créez trois entrées supplémentaires pour Africa, Middle East et Asia/Pacific. 7 Double-cliquez sur le champ d’édition Lien pour l’entrée North America. 8 Saisissez une URL active de votre choix et appuyez sur Entrée. Pour ce didacticiel, toute URL fera l’affaire. Assurez-vous qu’il s’agisse bien d’une URL existante, de manière à ce que puissiez tester plus tard vos liens. 9 Entrez des URL pour les entrées restantes. Remarque : Il y a toujours une ligne supplémentaire en bas de la liste des entrées de l’éditeur de menu contextuel. Elle vous permet d’ajouter facilement de nouvelles entrées sans avoir à cliquer sur le bouton Ajouter un menu. 10 Cliquez sur Terminé pour fermer l’éditeur de menu contextuel. Dans l’espace de travail, le contour de votre menu contextuel apparaît attaché à la découpe. Didacticiel des bases de la conception Web 61 11 Pour tester votre menu contextuel, choisissez Fichier > Aperçu dans le navigateur > Aperçu dans [votre navigateur préféré] pour prévisualiser le document dans un navigateur. Remarque : Les menus contextuels doivent être prévisualisés dans un navigateur. Ils ne sont pas visibles en utilisant l’onglet Aperçu dans Fireworks. Lorsque le document s’ouvre dans votre navigateur, déplacez le pointeur sur le graphisme Aéroports mondiaux. Le menu contextuel que vous avez créé apparaît. Cliquez sur chaque entrée pour tester les liens. Personnaliser le menu contextuel Vous allez ensuite retourner dans l’éditeur de menu contextuel pour modifier l’apparence du menu contextuel. 1 Dans Fireworks, double-cliquez sur le contour du menu contextuel. L’éditeur de menu contextuel s’ouvre en affichant vos entrées. 2 Cliquez sur le bouton Suivant. L’onglet Aspect apparaît. C’est là que vous pouvez changer les couleurs et les polices utilisées dans les menus contextuels. 62 3 Choisissez le type de cellule HTML et Menu vertical pour l’alignement. 4 Choisissez la police Arial, Helvetica, sans-serif et une taille de police de 12. 5 Dans la partie Etat relevé, définissez une couleur de texte noire, si le noir n’a pas encore été sélectionné. Cliquez ensuite sur la case Couleur de la cellule. Si CCCCCC ne s’affiche pas encore dans le champ d’édition en haut de la fenêtre contextuelle des couleurs, entrez CCCCCC et appuyez sur Entrée. Chapitre 2 Ces valeurs de couleur sont les couleurs par défaut sélectionnées dans l’éditeur de menu contextuel si vous n’avez jamais créé un menu contextuel auparavant. Une fois que vous avez modifié ces couleurs, elles seront utilisées à chaque fois que vous créerez un menu contextuel, jusqu’à ce que vous choisissiez d’autres couleurs. 6 Dans la partie Etat au-dessus, déterminez une couleur de texte blanche, si elle n’a pas encore été sélectionnée et cliquez sur la case Couleur de la cellule. Avec le pointeur en forme de pipette, cliquez sur le rectangle bleu du document qui entoure le graphisme Worldwide Airports, comme présenté ci-dessous. 7 Cliquez sur le bouton Suivant. La barre Avancé apparaît. L’onglet Avancé vous permet de changer différentes propriétés de cellules et de bordures. Vous allez augmenter ici la largeur de cellule, élargissant ainsi le menu contextuel. 8 Choisissez Pixels dans le menu contextuel Largeur de cellule. Cela active la case Largeur de cellule. 9 Entrez 137 pour la largeur de cellule. Didacticiel des bases de la conception Web 63 10 Choisissez Automatique dans le menu contextuel Hauteur de cellule, et cliquez sur le bouton Suivant. L’onglet Position apparaît. C’est là que vous pouvez spécifier la position à laquelle le menu contextuel apparaîtra à l’écran. Les coordonnées 0,0 signifient que le coin supérieur gauche du menu contextuel s’alignera avec le coin supérieur gauche de la découpe de déclenchement. Vous pouvez également choisir entre plusieurs positions prédéfinies. 11 Entrez 3 dans les cases X et Y de positionnement du menu, puis cliquez sur Terminé. Remarque : Vous pouvez également repositionner un menu contextuel en faisant glisser son contour dans l’espace de travail. 12 Prévisualisez dans un navigateur les modifications de votre menu contextuel. Déplacez le pointeur sur le graphisme Aéroports mondiaux. Le menu contextuel est positionné différemment et apparaît plus large. Survolez chaque entrée du menu pour observer vos changements de couleur. Modifier le menu contextuel Vous allez à nouveau utiliser l’éditeur de menu contextuel pour ajouter une autre entrée au menu contextuel. Vous modifierez également l’ordre des entrées et vous ajouterez un sous-menu. 1 Dans Fireworks, double-cliquez sur le contour du menu contextuel. 2 Cliquez sur l’entrée Europe pour la sélectionner. 3 Cliquez sur le bouton Ajouter un menu au-dessus de la liste des entrées. Une ligne blanche est insérée. 64 Chapitre 2 4 Double-cliquez sur le champ Texte de la nouvelle entrée et saisissez Latin/Amérique du Sud. Cliquez en dehors du champ Texte pour appliquer l’entrée. Les Amériques ne sont pas ensemble dans la liste. 5 Faites glisser l’entrée Latin/South America d’une ligne vers le haut et relâchez le bouton de la souris. Lorsque vous faites glisser le pointeur, une ligne blanche indique l’endroit où serait placée l’entrée si vous relâchiez ici le bouton de la souris. L’entrée est placée à l’endroit que vous avez spécifié. 6 Sélectionnez l’entrée North America et cliquez sur le bouton Ajouter un menu. 7 Double-cliquez sur le champ Texte de la nouvelle entrée et saisissez United States. Puis, cliquez en dehors des champs de l’entrée. Faites toutefois attention à ne pas sélectionner une autre entrée. 8 Sélectionnez l’entrée United States, si cela n’a pas déjà été fait, et cliquez sur le bouton Menu Renfoncement. L’entrée est renfoncée sous l’entrée North America. Didacticiel des bases de la conception Web 65 9 Cliquez à nouveau sur le bouton Ajouter un menu, et créez une nouvelle entrée pour le Canada. Vous venez juste de créer un sous-menu qui apparaîtra lorsque, dans un navigateur, vous survolerez l’entrée North America. 10 Associez des URL à toutes les nouvelles entrées. Vous pouvez optionnellement supprimer le lien de l’Amérique du Nord, car les utilisateurs choisiront des éléments à partir de son sousmenu. 11 Cliquez sur Terminé pour fermer l’éditeur de menu contextuel, puis prévisualisez les modifications du menu contextuel dans un navigateur. Optimiser le document Votre document est presque prêt pour le Web. La seule chose que vous avez besoin de faire avant de l’exporter est de l’optimiser. Avant d’exporter un document Fireworks, vous devez toujours commencer par l’optimiser. L’optimisation assure que vos graphismes seront exportés avec le meilleur équilibre de compression et la meilleure qualité possible. Lorsque différentes sortes de graphismes se trouvent dans le même document, il est judicieux de choisir pour chacun un format de fichier et des paramètres de compression appropriés. La page Web Global est composée d’une variété d’éléments : des bitmaps, des objets vectoriels et du texte. 1 66 Si le panneau Optimiser est minimisé ou s’il n’est pas visible, cliquez sur sa flèche d’extension ou bien choisissez Fenêtre > Optimiser. Chapitre 2 Fireworks choisit le GIF comme format de fichier d’exportation par défaut et Websnap Adaptive comme palette de couleurs par défaut. La plupart des graphismes de la page Web Location de voitures globale seront splendides avec ces paramètres. Toutefois, l’image bitmap Vintage contient une photographie et un dégradé. Compte tenu de ses variations de couleur complexes, il serait préférable de l’exporter dans un autre format. 2 Cliquez sur l’onglet d’aperçu 2 en 1 de la fenêtre du document. L’onglet 2 en 1 vous permet de visualiser le résultat de vos paramètres d’optimisation et de les comparer avec l’original. Vous avez probablement déjà noté la couche de découpe blanche à chaque fois que vous visionnez un des onglets d’aperçu. La couche vous permet de cibler uniquement la zone que vous voulez optimiser. 3 Dans l’aperçu à droite, cliquez sur la découpe pour l’image Vintage. La couche de la découpe disparaît, de telle sorte que vous pouvez visionner l’image située audessous de la découpe. Au bas de l’aperçu, le format de fichier d’exportation de la découpe sélectionné est affiché, l’estimation de la taille du fichier d’exportation, ainsi que le temps de téléchargement du graphisme à partir du Web. Conseil : Utilisez l’outil Main de la partie Affichage du panneau Outils pour visualiser une plus grande partie de l’image dans le cas où elle n’est pas entièrement visible. 4 Masquez provisoirement les découpes en cliquant sur le bouton Masque les découpes et les références dans la partie Web du panneau Outils. Cela vous permet de comparer l’aperçu à l’original, et de voir la différence entre les deux graphismes. L’aperçu à droite possède des bandes dans le dégradé. 5 Réactivez les découpes et cliquez sur l’image Vintage avec l’outil pointeur. Didacticiel des bases de la conception Web 67 6 Dans le panneau Optimiser, choisissez JPEG - Fichier réduit à partir du menu contextuel Paramètres. Les bandes de dégradé ont maintenant disparu, et la taille du fichier a diminué de manière significative. Cela est dû au fait que les photographies et les images comportant des variations de couleur complexes sont mieux optimisées et compressées en JPEG qu’en GIF. Maintenant que la taille du fichier a été diminuée, l’image est devenue floue. 7 Pour améliorer l’aspect du bitmap, faites glisser le curseur Qualité du panneau Optimiser à la valeur 77 et placez l’option Lissage sur 0. Le bitmap est plus clair, mais la taille du fichier a également augmentée. On obtient toutefois une amélioration au niveau de la taille du fichier lorsque l’image a été optimisée en tant que GIF. 8 68 Cliquez sur l’onglet Original pour revenir à l’affichage normal. Chapitre 2 Exporter du HTML HTML, ou HyperText Markup Language (langage de marquage pour hypertexte) est la première méthode utilisée sur Internet pour créer et afficher des pages Web. Vous n’êtes pas obligé de comprendre le HTML pour utiliser Fireworks, mais cela vous aide à garder à l’esprit que si des découpes de Fireworks sont exportées, elles deviennent des cellules dans une table HTML. Vous allez maintenant exporter et visionner votre document terminé dans un navigateur Web. Vous examinerez également le code HTML que Fireworks exporte. Définir les préférences HTML Avant d’exporter le document, vous avez besoin de définir les préférences d’exportation HTML. 1 Choisissez Fichier > Configuration HTML. La boîte de dialogue Configuration HTML s’ouvre. Les options que vous définissez dans cette boîte de dialogue affecteront tous les futurs documents Fireworks que vous créerez, exceptées les options de l’onglet Propre au document. 2 Dans l’onglet Générales, choisissez un style HTML. Si vous utilisez un éditeur HTML tel que Macromedia Dreamweaver ou Microsoft FrontPage, choisissez-le à partir de ce menu contextuel. Agir de la sorte vous permet d’ouvrir et de modifier facilement le fichier exporté dans cet éditeur HTML. Si vous n’utilisez pas un éditeur HTML ou si vous en utilisez un qui ne se trouve pas dans cette liste, choisissez Generic HTML. 3 Choisissez l’extension de fichier .htm. Didacticiel des bases de la conception Web 69 4 Cliquez sur l’onglet Table. L’onglet Table vous permet de changer les propriétés de la table HTML. 5 Dans le menu contextuel Espace avec, choisissez Espace transparent de 1 pixel. Lorsque cette option est sélectionnée, Fireworks exporte un fichier graphique nommé spacer.gif, qui représente une image transparente de 1 pixel. Les espaces sont utilisés par les concepteurs Web afin de faciliter la création de la mise en page. Ils gardent ouverts les cellules vides d’une table HTML. Sans eux, les cellules vides des tables HTML disparaîtraient, modifiant la mise en page initialement prévue. Vous verrez le fichier spacer.gif un peu plus tard, lorsque vous visionnerez vos fichiers exportés. Vous n’avez pas besoin de comprendre ce que sont les espaces, mais il est utile de connaître cette option si vous souhaitez la réutiliser dans le futur. 6 70 Cliquez sur l’onglet Propre au document. Chapitre 2 L’onglet Propre au document vous permet de choisir une variété de préférences spécifiques au document, y compris une convention de nomination personnalisée pour vos fichiers exportés. Rappelez-vous que les options que vous définissez ici s’appliquent uniquement au document Fireworks actif. Conseil : Vous pouvez appliquer les paramètres de l’onglet Propre au document à tous les nouveaux documents en cliquant sur le bouton Paramètres par défaut. 7 Cliquez sur OK pour accepter les paramètres de l’onglet Propre au document, et fermez la boîte de dialogue Configuration HTML. Exporter le document au format HTML Votre document est maintenant prêt pour l’exportation. 1 Choisissez Fichier > Exporter. La boîte de dialogue Exporter s’ouvre. 2 Dans la boîte de dialogue, recherchez le dossier Tutorial2/Export. 3 Assurez-vous que Documents HTML et Images soit sélectionnés pour le type de fichier, puis entrez index.htm pour le nom de fichier. Nommer la page d’accueil index.htm est une convention communément utilisée sur le Web. De nombreux navigateurs affichent même automatiquement la page index.htm lorsqu’une URL pointe simplement sur un nom de site et non pas un nom de page. En outre, plus tôt dans le didacticiel, vous avez associé l’URL de index.htm au bouton Accueil. Il n’y a actuellement qu’une seule page sur le site Web Global, ainsi, associer cette page à ellemême n’aurait pas beaucoup de sens à ce niveau-là. Mais si dans le futur vous créerez d’autres pages pour ce site, vous pourrez utiliser la barre de navigation sur toutes ses pages, proposant aux utilisateurs une méthode de navigation logique. Didacticiel des bases de la conception Web 71 4 Assurez-vous que Exporter le fichier HTML soit choisi dans le menu contextuel HTML, et que Exporter les découpes soit choisi dans le menu contextuel Découpes. 5 Choisissez les options suivantes et laissez désactivées toutes les autres : • Inclure les zones sans découpes • Placer les images dans des sous-dossiers Si vous choisissez cette option, Fireworks vous permettra de choisir un dossier dans lequel stocker vos fichiers graphiques exportés. S’il n’existe pas, Fireworks crée pour vous le dossier. Si vous ne choisissez pas de dossier, Fireworks choisit par défaut un dossier nommé images. Pour ce didacticiel, acceptez les paramètres par défaut. 6 Cliquez sur Enregistrer. Les fichiers sont exportés à l’emplacement que vous avez spécifié. 7 Choisissez Fichier > Enregistrer pour enregistrer votre fichier PNG. Tester le fichier terminé Vos fichiers ont été exportés, il est maintenant temps de vérifier ce que vous avez créé. Visionner la liste des fichiers exportés Commencez par examiner la liste des fichiers exportés par Fireworks. Les nouveaux fichiers créés pendant le processus d’exportation sont affichés dans le dossier d’exportation. 1 Sur votre bureau, recherchez le dossier Export et ouvrez-le. Fireworks a créé un fichier HTML nommé index.htm. Il s’agit de la page d’accueil du site Web Global. Il a également créé un fichier nommé mm_menu.js, qui contient le code nécessaire pour afficher les menus contextuels. 2 Ouvrir le sous-dossier des images. Fireworks a également exporté toutes vos oeuvres dans des fichiers graphiques. Les découpes de Fireworks ont toutes été converties en fichiers distincts. Il y a plusieurs fichiers GIF et un fichier JPEG. Le JPEG est l’image bitmap que vous avez optimisée un peu plus tôt. Le fichier nommé spacer.gif est le résultat de l’option d’espacement que vous avez sélectionnée dans la boîte de dialogue Configuration HTML, et il sera utilisé pour la création de la mise en page. 72 Chapitre 2 Visionner le fichier HTML de Fireworks dans un navigateur Maintenant que vous avez examiné les fichiers exportés, vous êtes prêt à tester la page Web dans un navigateur. 1 A partir du dossier Export, faites glisser le fichier index.htm et ouvrez le navigateur Web. 2 Dans le navigateur, cliquez sur les boutons que vous avez ajoutés pour tester les liens, puis retournez dans le fichier index.htm. 3 Testez les fonctions que vous avez ajoutées. 4 La plupart des navigateurs Web permettent d’afficher le code source avec une commande telle que Affichage > Source. Recherchez et exécutez la commande permettant d’afficher le code. 5 Parcourez le document code source. Si vous connaissez le HTML et le JavaScript, vous reconnaîtrez le code que Fireworks a créé pour vous. Si vous ne connaissez pas le HTML et le JavaScript, vous apprécierez sans doute que Fireworks rende inutile l’apprentissage de ces langages. Récapitulatif Vous avez accompli les tâches essentielles d’un processus de création de pages Web avec Fireworks. Vous avez appris à ouvrir un document, y importer des graphismes et découper le document. Vous avez également créé un survol glisser-déposer, créé des boutons et créé un menu contextuel. Et pour finir, vous avez appris à optimiser et à exporter votre document terminé. Didacticiel des bases de la conception Web 73 Pour obtenir des informations détaillées sur certaines des fonctions mentionnées dans le didacticiel, et pour obtenir des informations sur d’autres fonctions de Fireworks, référez-vous à l’index de Utilisation de Fireworks ou consultez l’aide Fireworks. Pour plus de didacticiels, visitez http://www.macromedia.com/fr/. Assurez-vous également de visiter le centre d’assistance de Macromedia (qui a été gratifié d’un prix) à l’adresse http://www.macromedia.com/fr/support/. 74 Chapitre 2 CHAPITRE 3 Concepts de base de Fireworks L’application Macromedia Fireworks MX met à votre disposition des outils de conception de graphiques Web. Ses solutions novatrices permettent de résoudre les principaux problèmes posés aux concepteurs et aux webmasters. Grâce à la large palette d’outils proposée par Fireworks, vous pouvez créer et éditer des graphiques vectoriels et bitmap dans un simple fichier. L’avènement de Fireworks a libéré les concepteurs de sites Web des tâches fastidieuses impliquant l’ouverture de douzaines d’applications spécifiques. L’application directe et non destructive des effets évite de devoir recréer des graphiques Web après une modification simple. La génération de code JavaScript facilite considérablement la création de survols. Des fonctions d’optimisation efficaces réduisent la taille de fichiers graphiques Web sans sacrifier la qualité. Si vous débutez avec Fireworks, il vous serait utile de comprendre les concepts généraux de Fireworks tels que l’ouverture, l’importation et l’enregistrement de fichiers, vous familiariser à l’environnement de Fireworks et travailler dans un fichier. Une fois que vous avez créé un nouveau fichier ou que vous avez ouvert un fichier existant, l’environnement de travail Fireworks est accessible. Fireworks MX introduit plusieurs améliorations dans l’espace de travail, y compris le Vérificateur de propriétés, un panneau Outils segmenté et des groupes de panneaux. Graphiques vectoriels et de bitmap Les ordinateurs affichent des graphiques au format vectoriel ou bitmap. Comprendre la différence entre les deux formats vous aidera à comprendre Fireworks, qui contient des outils vectoriels et bitmap, et qui est capable d’ouvrir ou d’importer les deux formats. Graphiques vectoriels Les graphiques vectoriels reproduisent des images en utilisant des lignes et des courbes, appelées vecteurs, qui incluent des informations de couleur et de position. Par exemple, l’image d’une feuille peut être décrite par une série de points, dont le résultat est le contour de la feuille. La couleur de la feuille est déterminée par la couleur du contour, autrement dit du trait, et la couleur de la zone délimitée par ce contour, autrement dit la trame. Lorsque vous modifiez un graphisme vectoriel, vous modifiez les propriétés des lignes et des courbes qui en décrivent la forme. Les graphiques vectoriels ne dépendent pas de la résolution, ce qui signifie que vous pouvez déplacer, redimensionner, reformer ou changer la couleur d’un graphisme vectoriel et l’afficher sur des écrans de diverses résolutions, sans affecter la qualité de son aspect. 75 Graphiques bitmap Les graphiques bitmap sont composés de points, appelés pixels, organisés dans une grille. L’écran de votre ordinateur est une grande grille de pixels. Dans une version bitmap, l’image serait déterminée par l’emplacement et la valeur de couleur de l’ensemble des pixels de la grille. Chaque point est associé à une couleur. Lorsque ces points sont affichés à la bonne résolution, ils forment une image comparable à une mosaïque. Lorsque vous modifiez un graphisme, vous modifiez des pixels et non pas des lignes et des courbes. Ces graphiques bitmap dépendent de la résolution, autrement dit les données décrivant l’image sont conditionnées par une grille de taille spécifique. L’agrandissement d’un graphique risque de produire une image aux bords dentelés du fait du changement de distribution des points dans la grille. L’affichage d’un graphique bitmap sur un écran dont la résolution est inférieure à celle de l’image risque également de dégrader la qualité. Travailler avec Fireworks Fireworks est une application souple de création, d’édition et d’optimisation de graphiques pour le Web. Vous pouvez créer et modifier des images bitmap et vectorielles, créer des effets pour le Web tels que les survols et les menus contextuels, recadrer et optimiser des graphiques afin de réduire la taille de leur fichier et gagner du temps en automatisant les tâches répétitives. Le document une fois terminé, vous pouvez l’exporter dans un format de fichier JPEG, GIF ou autre — avec des fichiers HTML contenant des tables HTML et du code JavaScript — afin de l’utiliser sur le Web. Vous pouvez également exporter un type de fichier spécifique vers une autre application telle que Photoshop ou Macromedia Flash, si vous voulez continuer à travailler dans l’autre application. Objets vectoriels et bitmap Dans le panneau Outils de Fireworks, vous trouverez des sections distinctes contenant des outils de création et de modification de vecteurs et de bitmaps. Dans Fireworks MX, l’outil que vous choisissez détermine si l’objet que vous créez est un objet vectoriel ou bitmap. Par exemple, choisissez l’outil Plume dans la partie Vecteur du panneau Outils, et vous pouvez commencer à tracer des trajets vectoriels en plaçant des points. Choisissez l’outil Pinceau, et vous pouvez faire glisser le pointeur afin de dessiner un objet bitmap. Choisissez l’outil Texte, et vous pouvez démarrer votre saisie. Après avoir dessiné des objets vectoriels, des objets bitmap ou du texte, vous pouvez utiliser toute une panoplie d’outils, d’effets, de commandes et de techniques pour mettre en valeur et achever vos graphiques. Vous pouvez utiliser les outils de Fireworks situés dans l’éditeur de boutons pour créer des boutons de navigation interactifs. Vous pouvez également utiliser les outils de Fireworks pour modifier des graphiques importés. Vous pouvez importer et modifier les formats de fichier JPEG, GIF, PNG, PSD et bien d’autres encore. Une fois que vous avez importé une image graphique, vous pouvez ajuster sa couleur et son ton, et vous pouvez également la recadrer, la retoucher et la masquer. 76 Chapitre 3 Graphiques interactifs Les découpes et les références sont des objets Web qui spécifient des zones interactives dans un graphisme pour le Web. Les découpes permettent de sélectionner des portions d’image et d’appliquer des comportements de survol, des animations et des liens URL (Uniform Ressource Locator) à des sections de l’image. En outre, les découpes vous permettent d’exporter les sections avec des paramètres différents. Sur une page Web, chaque découpe apparaît dans une cellule de tableau. Les références permettent d’affecter un lien URL et des comportements à l’ensemble ou à une partie du graphisme. Pour plus d’informations, voir Chapitre 12, « Découpes, survols et références », à la page 269. Les découpes et les références possèdent des poignées de survol glisser-déposer vous permettant d’assigner rapidement aux graphiques des images d’interversion et des comportements de survol directement dans l’espace de travail. L’éditeur de boutons et l’éditeur de menus contextuels sont des fonctions pratiques de Fireworks qui vous aident à créer des graphiques interactifs spéciaux pour naviguer sur les sites Web. Optimisation et exportation de graphiques Fireworks possède des fonctions d’optimisation puissantes qui vous aident à trouver l’équilibre entre la taille des fichiers et une qualité acceptable lorsque vous vous apprêtez à exporter des graphiques. Optimisez les graphiques Web avec Fireworks pour réduire la taille du fichier et accélérer ainsi le chargement des sites Web. Comparez la qualité des graphiques dans l’affichage de l’aperçu 2 en 1 ou 4 en 1 de l’espace de travail. Vous pouvez découper une image en plusieurs unités, puis optimiser ces unités pour obtenir un format qui correspond mieux au contenu. Pour ajouter de la souplesse au niveau de l’optimisation, vous pouvez utiliser une compression JPEG sélective afin de centraliser la partie la plus importante d’un JPEG tandis que la qualité de l’arrière-plan est réduite. Après avoir optimisé vos graphiques, l’étape suivante consiste à les exporter afin de les utiliser sur le Web. A partir de votre document PNG source de Fireworks, vous pouvez exporter vers un certain nombre de types de fichier, y compris le JPEG, le GIF, le GIF animé et les tables HTML contenant des images découpées en différents types de fichiers. Pour plus d’informations, voir Chapitre 15, « Optimisation et exportation », à la page 333. Création d’un nouveau document Lorsque vous choisissez Fichier > Nouveau pour créer un nouveau document avec Fireworks, un fichier de type PNG (Portable Network Graphic - Graphisme réseau portable) est créé. PNG est le format de fichier natif de Macromedia Fireworks. Lorsque vous créez des graphiques avec Fireworks, vous pouvez les exporter sous d’autres formats Web courants, tels que JPEG, GIF et GIF animé. Vous pouvez également exporter des graphiques vers de nombreux formats populaires utilisés en dehors du Web, tels que le TIFF et le BMP. Quels que soient les paramètres d’optimisation et d’exportation choisis, le fichier PNG Fireworks d’origine est conservé afin de permettre une modification ultérieure aisée. Avant de créer un graphisme avec Fireworks, vous devez créer ou ouvrir un document existant. Vous pourrez par la suite ajuster les options de paramétrage dans le Vérificateur de propriétés. Concepts de base de Fireworks 77 Pour créer un nouveau document : 1 Choisissez Fichier > Nouveau. La boîte de dialogue Nouveau document est alors affichée. 2 Entrez la largeur et la hauteur du document en pixels, pouces ou centimètres. 3 Entrez une résolution en pixels par pouce ou pixels par centimètre. 4 Sélectionnez une couleur de fond blanche, transparente ou personnalisée. Remarque : Utilisez le puits de couleurs près de l’option Personnalisée de la boîte de dialogue pour sélectionner la couleur de votre choix. 5 Cliquez sur OK pour créer le nouveau document. Pour créer un nouveau document de la même taille qu’un objet du Presse-papiers : 1 Copiez un objet dans le Presse-Papiers à partir de : • un autre document Fireworks ; • un navigateur Web ; • l’une des applications énumérées dans « Collage dans Fireworks » à la page 82 ; 2 Choisissez Fichier > Nouveau. La boîte de dialogue Nouveau document est ouverte et affiche la hauteur et la largeur de l’objet copié dans le Presse-papiers. 3 Choisissez une résolution et une couleur de fond, puis cliquez sur OK. 4 Choisissez Edition > Coller pour coller dans le nouveau document l’objet en provenance du Presse-papiers. Ouverture et importation de fichiers Dans Fireworks, vous pouvez facilement ouvrir, importer et modifier des images vectorielles et bitmap créées dans d’autres programmes graphiques. En outre, vous pouvez importer des images en provenance d’un appareil photo numérique ou d’un scanner. 78 Chapitre 3 Pour plus d’informations sur l’importation de graphiques à partir de Photoshop, Macromedia FreeHand, CorelDraw ou Illustrator, voir « Utilisation de Fireworks avec d’autres applications » à la page 373. Pour ouvrir un document Fireworks : 1 Choisissez Fichier > Ouvrir. La boîte de dialogue Ouvrir est alors ouverte. 2 Sélectionnez le fichier, puis cliquez sur Ouvrir. Conseil : Pour ouvrir un fichier sans effacer la précédente version, choisissez Ouvrir en tant que Sans titre, puis enregistrez le fichier en utilisant un autre nom. Ouverture des derniers documents fermés Le menu Fichier liste les 10 derniers documents fermés dans le sous-menu Ouvrir fichier récent. Pour ouvrir un fichier récemment fermé : 1 Choisissez Fichier > Ouvrir fichier récent. 2 Choisissez un fichier à partir du sous-menu. Ouverture de graphiques créés dans d’autres applications Fireworks permet d’ouvrir des fichiers créés dans d’autres applications ou à des formats différents, ce qui inclut les fichiers Photoshop, Macromedia FreeHand, Illustrator, CorelDRAW non compressés, WBMP, EPS, JPEG, GIF et GIF animés. Lorsque vous ouvrez un format de fichier autre que PNG en utilisant la commande Fichier > Ouvrir, vous créez un nouveau document Fireworks PNG basé sur le fichier que vous ouvrez. Lorsque le nouveau document est un fichier PNG, l’original reste inchangé. Pour plus d’informations sur la manière de travailler avec Freehand, Photoshop, Illustrator et CorelDraw, voir « Utilisation de Fireworks avec d’autres applications » à la page 373. GIF animés Vous pouvez ouvrir les fichiers GIF dans Fireworks de deux façons. • Vous pouvez importer un GIF animé en tant que symbole d’animation, ce qui vous permet de modifier et de déplacer tous les éléments de l’animation en tant qu’unité simple et d’utiliser le panneau Bibliothèque pour créer de nouvelles occurrences du symbole. Remarque : Lorsque vous importez un GIF animé, la cadence de diffusion des images est de 0,20 seconde par défaut. Si nécessaire, utilisez le panneau Images pour rétablir la cadence de diffusion d’origine. • Ouvrez le fichier GIF animé comme un fichier GIF ordinaire. Les éléments du fichier GIF sont placés en tant qu’image distincte dans une image de Fireworks. Dans Fireworks, vous pouvez convertir le graphisme en un symbole d’animation. EPS, fichiers Fireworks ouvre la plupart des fichiers EPS, tels que les fichiers PhotoShop EPS, en tant qu’images bitmap fusionnées, dans lesquelles tous les objets sont rassemblés dans un calque unique. Toutefois, certains fichiers EPS exportés à partir d’Illustrator conservent leurs informations vectorielles. Concepts de base de Fireworks 79 Pour la plupart des fichiers EPS que vous ouvrez ou que vous importez, la boîte de dialogue Options de fichier EPS s’ouvre. Taille de l’image détermine les dimensions de l’image et les unités dans lesquelles les proportions de l’image sont affichées. Choisissez pixels, pourcentage, pouces ou centimètres. Résolution indique les pixels par unité pour la résolution. Respecter les proportions ouvre Anticrénelé lisse le fichier en respectant les proportions du fichier d’origine. les bords irréguliers dans le fichier EPS ouvert. Si vous ouvrez ou importez des fichiers EPS Illustrator qui contiennent des informations vectorielles, vous verrez la boîte de dialogue Options de fichier vectoriel. C’est la même boîte de dialogue qui apparaît lorsque vous ouvrez ou importez des fichiers FreeHand. Pour plus de détails sur les options de cette boîte de dialogue, voir « Importation de graphiques FreeHand dans Fireworks » à la page 394. WBMP, fichiers Fireworks peut ouvrir des fichiers WBMP. Il s’agit de fichiers 1 bit (monochromes) qui ont été optimisés pour les périphériques d’informatique mobile. Ce format est conçu pour les pages WAP (Wireless Application Protocol). Vous pouvez ouvrir un fichier WBMP directement en utilisant Fichier > Ouvrir ou importer un fichier WBMP en utilisant Fichier > Importer. Création de fichiers PNG dans Fireworks à partir de fichiers HTML Fireworks peut ouvrir et importer des contenus HTML créés dans d’autres applications. Lorsque vous ouvrez ou importez un fichier HTML, Fireworks reconstruit la mise en page et les comportements définis par le code HTML, vous permettant de recréer des pages Web contenant des graphiques découpés, des boutons JavaScript ainsi que d’autres types d’interactivité. Cela vous permet de récupérer des sites Web dont vous avez hérité, même si vous ne possédez pas les fichiers PNG source. Grâce à cette fonction, vous pouvez ouvrir ou importer rapidement une page Web afin de mettre à jour des graphiques, changer la mise en page du document ou modifier des liens de navigation, des boutons et d’autres éléments interactifs, le tout sans avoir à reconstruire la page depuis le début ou à modifier les scripts. 80 Chapitre 3 Etant donné que Fireworks exporte les contenus HTML sous la forme d’une table HTML, cela détermine également la mise en page du document pour des HTML importés se basant sur des tables HTML. Un fichier HTML doit contenir au moins une table pour que Fireworks soit en mesure de le reconstruire. Pour plus de détails à propos de l’HTML, voir « Exportation du fichier au format HTML » à la page 362. Vous avez plusieurs façons d’intégrer des contenus HTML dans Fireworks : • Vous pouvez ouvrir toutes les tables HTML dans un fichier HTML. • Vous pouvez ouvrir la première table HTML rencontrée par Fireworks dans un fichier HTML. • Vous pouvez importer la première table HTML rencontrée par Fireworks dans un document Fireworks existant. Remarque : Fireworks peut également importer des documents qui utilisent un encodage UTF-8 ainsi que ceux écrits en XHTML. Les fichiers XHTML utilisent habituellement l’extension .xhtm ou .xhtml. Pour plus d’informations concernant ces types de fichier, « Exportation de fichiers avec le codage UTF-8 » à la page 369 et « Exportation d’un fichier XHTML » à la page 368. Pour ouvrir toutes les tables d’un fichier HTML : 1 Choisissez Fichier > Reconstituer la table. 2 Sélectionnez le fichier HTML contenant les tables que vous voulez ouvrir et cliquez sur Ouvrir. Chaque table s’ouvre dans sa propre fenêtre de document. Pour ouvrir uniquement la première table d’un fichier HTML : 1 Choisissez Fichier > Ouvrir. 2 Sélectionnez le fichier HTML contenant la table que vous voulez ouvrir et cliquez sur Ouvrir. La première table du fichier HTML s’ouvre dans une nouvelle fenêtre de document. Pour importer la première table d’un fichier HTML vers un document Fireworks ouvert : 1 Choisissez Fichier > Importer. 2 Sélectionnez le fichier HTML à partir duquel vous voulez effectuer l’importation et cliquez sur Ouvrir. 3 Lorsque vous vous trouvez à l’endroit où vous désirez qu’apparaisse la table importée, cliquez sur le pointeur d’insertion. Insertion d’objets dans un document Fireworks Importez des images, utilisez la méthode glisser-déposer ou copiez-collez des objets vectoriels, des images bitmap ou du texte créé dans d’autres applications dans un document Fireworks. Vous pouvez également importer des images en provenance d’un appareil photo numérique ou d’un scanner. Glisser-déposer Utilisez la méthode glisser-déposer pour importer des objets vectoriels, des images bitmap ou du texte dans Fireworks à partir d’applications prenant en charge ce type de méthode : • FreeHand 7 ou plus récent ; • Flash 3 ou plus récent ; Concepts de base de Fireworks 81 • • • • • • Photoshop 4 ou plus récent ; Illustrator 7 ou plus récent ; Microsoft Office 97 ou plus récent ; Microsoft Internet Explorer 3 ou plus récent ; Netscape Navigator 3 ou plus récent ; CorelDRAW 7 ou plus récent. Pour utiliser la méthode glisser-déposer dans Fireworks : A partir de l’autre application, faites glisser l’objet ou le texte dans Fireworks. Collage dans Fireworks Lorsque vous collez dans Fireworks un objet copié à partir d’une autre application, cet objet est placé au centre du document actif. Vous pouvez copier et coller un objet ou du texte dans n’importe lesquels des formats suivants depuis le Presse-papiers : • • • • • • • • • • • FreeHand 7 ou plus récent ; Illustrator ; fichiers PNG ; PICT (Macintosh) ; DIB (Windows) ; BMP (Windows) ; texte ASCII ; EPS ; WBMP ; TXT ; RTF. Pour coller dans Fireworks : 1 Dans l’autre application, copiez l’objet ou le texte que vous souhaitez coller. 2 Dans Fireworks, collez l’objet ou le texte dans votre document. Localisation des objets collés Lorsque vous collez un objet dans Fireworks, le placement de l’objet collé dépend de ce qui est sélectionné : • Si au moins un objet d’un calque simple est sélectionné, l’objet collé est placé devant — ou empilé directement au-dessus — l’objet sélectionné dans ce même calque. • Si le calque est sélectionné ainsi que, soit aucun, soit tous les objets, l’objet collé est placé devant — ou empilé directement au-dessus — l’objet placé tout en haut de ce même calque. • Si deux ou davantage objets de plusieurs calques sont sélectionnés, l’objet collé est placé devant — ou empilé directement au-dessus — l’objet placé tout en haut du calque le plus haut. 82 Chapitre 3 • Si le calque Web ou bien un objet du calque Web est sélectionné, l’objet collé est placé devant — ou empilé au-dessus de — tous les autres objets du calque le plus bas. Remarque : Le calque Web est un calque spécial qui contient tous les objets Web et qui demeure toujours en haut du panneau Calques. Pour plus d’informations concernant les calques, voir Chapitre 10, « Calques, masquage et fondu », à la page 227. Rééchantillonnage des objets collés Lorsque vous collez un bitmap avec une résolution différente de celle du document Fireworks de destination, Fireworks vous demande si vous souhaitez rééchantillonner le bitmap. Le rééchantillonnage ajoute ou supprime des pixels d’un bitmap redimmensionnée afin de correspondre le plus possible à l’apparence du bitmap d’origine. Le rééchantillonnage d’un bitmap dans une résolution trop haute provoque généralement une petite perte de qualité. Toutefois, le rééchantillonnage dans une résolution trop basse cause toujours une perte de données et généralement une baisse de qualité. Pour rééchantillonner un objet bitmap en le collant : 1 Copiez le bitmap dans le Presse-papiers de Fireworks ou d’un autre programme. 2 Choisissez Edition > Coller dans Fireworks. Si l’image bitmap du Presse-papiers possède une résolution différente du document actif, une boîte de dialogue apparaît, vous demandant si vous voulez oui ou non effectuer un rééchantillonnage. 3 Choisissez l’une des options suivantes : • Oui conserve la largeur et la hauteur d’origine du bitmap collé, ajoutant ou supprimant des pixels si nécessaire. • Non conserve tous les pixels d’origine, ce qui peut rendre la taille relative de l’image collée plus grande ou plus petite que prévu. Importation de fichiers PNG Vous pouvez importer des fichiers PNG de Fireworks dans le calque courant du document Fireworks actif. Tous les objets référence et les objets découpe sont placés sur le calque Web du document. Pour plus d’informations concernant les découpes et les objets Web, voir « Visualisation et affichage des découpes et des repères de découpe » à la page 273. Pour plus d’informations concernant les calques, voir « Utilisation des calques » à la page 227. Pour importer un fichier PNG dans le calque d’un document Fireworks : 1 Dans le panneau Calques, sélectionnez le calque dans lequel vous voulez importer le fichier. 2 Choisissez Fichier > Importer pour ouvrir la boîte de dialogue Importer. 3 Recherchez le fichier à importer, puis cliquez sur Ouvrir. 4 Sur le document, positionnez le pointeur d’importation à l’endroit où vous voulez placer le coin supérieur gauche de l’image. 5 Importez le fichier : • Cliquez pour importer l’image. Concepts de base de Fireworks 83 • Faites glisser le pointeur d’importation pour redimensionner l’image importée. Les proportions de l’image sont respectées. Importation d’une image par l’intermédiaire d’un scanner ou d’un appareil photo numérique Pour être en mesure d’importer des images, le scanner ou l’appareil photo numérique doivent être comptatibles TWAIN (Windows) ou bien supporter les plug-ins Photoshop Acquire (Macintosh). Ces images sont ouvertes dans un nouveau document. Remarque : Fireworks ne peut pas importer d’images issues d’un scanner ou d’un appareil photo numérique, à moins que les pilotes, modules et plug-ins appropriés du logiciel soient installés. Pour avoir des instructions plus spécifiques sur l’installation, les paramètres et les options, consultez la documentation livrée avec le module TWAIN ou le plug-in Photoshop Acquire utilisé. Sur le Macintosh, Fireworks recherche automatiquement les plug-ins Photoshop Acquire dans le dossier Plug-ins du dossier de l’application Fireworks. Si vous ne souhaitez pas placer les plug-ins à cet endroit, vous devez indiquer un autre emplacement à Fireworks. Remarque : L’emplacement exact du dossier Plug-ins dépend de votre système d’exploitation. Pour plus d’informations, voir « Utilisation des fichiers de configuration » à la page 439. Pour diriger Fireworks vers les plug-ins Photoshop Acquire : 1 Dans Fireworks, choisissez Edition > Préférences. Remarque : Sur Mac OS X, choisissez Fireworks > Préférences. 2 Cliquez sur l’onglet Dossiers. 3 Activez Plug-ins Photoshop. 4 Cliquez sur Parcourir si la boîte de dialogue Sélectionner le dossier contenant les plug-ins de Photoshop (Windows) ou Choisissez un dossier (Macintosh) ne s’ouvre pas automatiquement. 5 Recherchez le dossier comportant les plug-ins Photoshop. Pour importer une image par l’intermédiaire d’un scanner ou d’un appareil photo numérique : 1 Connectez le scanner ou l’appareil photo à votre ordinateur. 2 Installez le logiciel qui accompagne le scanner ou la camera, si cela n’a pas déjà été fait. 3 Dans Fireworks, choisissez Fichier > Scanner et choisissez un module TWAIN ou un plug-in Photoshop Acquire qui corresponde à l’appareil à partir duquel vous importez une image. Remarque : Pour la plupart des modules TWAIN ou des plug-ins Photoshop Acquire, des boîtes de dialogue supplémentaires permettent de spécifier d’autres options. 4 Suivez les instructions pour appliquer les paramètres désirés. L’image importée est ouverte dans un nouveau document Fireworks. Enregistrement de fichiers Fireworks Lorsque vous créez ou ouvrez un document dans Fireworks, le nom de fichier du document possède l’extension .png. Cela survient même si vous ouvrez un fichier avec une autre extension, telle que .jpg, .gif ou .psd. Le fichier affiché dans le document Fireworks devient votre fichier source, ou fichier de travail. Toute modification que vous effectuez est appliquée au fichier PNG. L’utilisation d’un PNG de Fireworks comme fichier source amène les avantages suivants : 84 Chapitre 3 • Le fichier PNG source est toujours modifiable. Vous pouvez faire marche arrière et effectuer des modifications supplémentaires, même après l’exportation du fichier dans le but de l’utiliser sur le Web. • Si vous ouvrez un fichier existant d’un format différent, tel que le JPEG, et que vous le modifiez, votre fichier d’origine est protégé. Les modifications sont en fait réalisées sur un fichier PNG de Fireworks, laissant intact le fichier d’origine. • Les graphiques complexes peuvent être découpés en morceaux dans le fichier PNG, puis exportés sous forme de fichiers multiples avec différents formats de fichier et divers paramètres d’optimisation. Les documents Fireworks sont toujours enregistrés dans le format PNG. Pour enregistrer les modifications effectuées sur un fichier JPEG, GIF ou un autre fichier graphique dans son format d’origine, vous devez exporter le fichier. Remarque : Sous Windows, lorsque vous ouvrez un fichier non-PNG dans Fireworks, le fichier est encore identifié via son extension d’origine, dans la fenêtre du document de Fireworks. Toutefois, toute modification que vous effectuez est effectivement faite dans le fichier PNG de Fireworks. Pour enregistrer un nouveau document Fireworks : 1 Choisissez Fichier > Enregistrer sous. La boîte de dialogue Enregistrer sous apparaît. 2 Recherchez l’emplacement désiré et tapez le nom du fichier. Vous n’avez pas besoin de saisir une extension, Fireworks s’en chargera. 3 Cliquez sur Enregistrer. Pour enregistrer un document Fireworks existant : Choisissez Fichier > Enregistrer. Pour enregistrer (exporter) un document dans un autre format : 1 Choisissez un format de fichier dans le panneau Optimiser. 2 Choisissez Fichier > Exporter pour exporter le document. Pour plus d’informations, voir « Optimisation et exportation » à la page 333. Concepts de base de Fireworks 85 L’environnement de travail de Fireworks Lorsque vous ouvrez pour la première fois un document dans Fireworks MX, l’environnement de travail est activé, y compris le panneau Outils, le Vérificateur de propriétés, les menus et d’autres panneaux. Le panneau Outils, à gauche de l’écran, contient des catégories libellées, incluant les groupes d’outils bitmap, vectoriels et Web. Le Vérificateur de propriétés apparaît par défaut en bas du document, et affiche initialement les propriétés du document. Il change ensuite pour afficher les propriétés d’un outil nouvellement sélectionné ou d’un objet actuellement sélectionné lorsque vous travaillez dans le document. Les panneaux sont initialement rassemblés en groupes le long du bord droit de l’écran. La fenêtre du document apparaît au centre de l’application. 86 Chapitre 3 Utilisation du panneau Outils Le panneau Outils est organisé en six catégories : Sélection, Bitmap, Vecteur, Web, Couleurs et Affichage. Dans les précédentes versions de Fireworks, vous deviez commuter entre les modes vecteur et bitmap. Maintenant, il vous suffit de choisir un outil et de l’utiliser. L’application applique l’outil de manière appropriée. Modification des options des outils Lorsque vous choisissez un outil, le Vérificateur de propriétés affiche les options des outils. Certaines options d’outils restent affichées lorsque vous travaillez avec l’outil. Pour les autres outils, tels que les outils des formes de base, la Plume et la Ligne, le Vérificateur de propriétés affiche les propriétés des objets sélectionnés. Pour plus d’informations sur le Vérificateur de propriétés, voir « Utilisation du Vérificateur de propriétés » à la page 88. Pour que s’affiche dans le Vérificateur de propriétés les options d’un outil que vous êtes déjà en train d’utiliser : Choisissez Sélection > Désélectionner pour désélectionner tous les objets. Concepts de base de Fireworks 87 Pour plus d’informations sur des options d’outils spécifiques, voir les sections qui introduisent les différents outils dans Utilisation de Fireworks ou consultez l’aide de Fireworks. Sélection d’un outil à partir d’un groupe d’outils Un petit triangle dans le coin inférieur droit d’un outil dans le panneau Outils indique qu’il fait partie d’un groupe d’outils. Par exemple, l’outil Rectangle fait partie du groupe des outils destiné aux formes de base, qui inclut également les outils Rectangle arrondi, Ellipse et Polygone. Pour choisir un outil à partir d’un groupe d’outils : 1 Cliquez sur l’icône de l’outil et maintenez enfoncé le bouton de la souris. Un menu contextuel apparaît avec les icônes des outils, le nom des outils et les touches de raccourci. L’outil actuellement sélectionné possède une encoche à gauche de son nom. 2 Faites glisser le pointeur afin de sélectionner l’outil désiré et relâchez le bouton de la souris. L’outil apparaît dans le panneau Outils, et les options de l’outil apparaissent dans le Vérificateur de propriétés. Utilisation du Vérificateur de propriétés Le Vérificateur de propriétés est un panneau sensible au contexte qui affiche les propriétés de la sélection courante, les options de l’outil courant ou bien les propriétés du document. Par défaut, le Vérificateur de propriétés est ancré en bas de l’espace de travail. Le Vérificateur de propriétés peut être ouvert à mi-hauteur, présentant deux lignes de propriétés, ou quatre en pleine hauteur. Vous pouvez également masquer totalement le Vérificateur de propriétés en le laissant dans l’espace de travail. Remarque : Dans Utilisation de Fireworks, la plupart des procédures supposent que le Vérificateur de propriétés est complètement déployé. Pour annuler l’ancrage du Vérificateur de propriétés : Faites glisser la poignée du coin supérieur gauche vers un autre endroit de l’espace de travail. 88 Chapitre 3 Pour ancrer le Vérificateur de propriétés en bas de l’espace de travail (uniquement Windows) : Faites glisser la barre latérale du Vérificateur de propriétés en bas de l’écran. Pour déployer le Vérificateur de propriétés de la mi-hauteur à la pleine hauteur, permettant ainsi de découvrir des options supplémentaires : • Cliquez sur la flèche d’extension située dans le coin inférieur droit du Vérificateur de propriétés. • Cliquez sur l’icône en haut à droite du Vérificateur de propriétés et choisissez Pleine hauteur à partir du menu Options du Vérificateur de propriétés. Remarque : Sous Windows, le menu Options est disponible uniquement lorsque le Vérificateur de propriétés est ancré. Pour réduire à mi-hauteur le Vérificateur de propriétés : • Cliquez sur la flèche d’extension située dans le coin inférieur droit du Vérificateur de propriétés. • Choisissez Demi-hauteur à partir du menu Options du Vérificateur de propriétés. Remarque : Sous Windows, le menu Options est disponible uniquement lorsque le Vérificateur de propriétés est ancré. Pour réduire le Vérificateur de propriétés lorsqu’il est ancré : • Cliquez sur la flèche d’extension ou sur le titre du Vérificateur de propriétés. • Choisissez Réduire le groupe Panneau à partir du menu Options du Vérificateur de propriétés ancré. Pour plus d’informations sur des options spécifiques du Vérificateur de propriétés, voir les parties appropriées dans Utilisation de Fireworks ou l’aide de Fireworks. Utilisation des panneaux Les panneaux sont des groupes de commandes flottants qui permettent de modifier l’aspect d’un objet sélectionné ou d’éléments du document. Il permettent, entre autres, de travailler sur des images, des calques, des symboles et des couleurs du nuancier. Il est possible de faire glisser les panneaux de façon à les regrouper en fonction de vos préférences. Les panneaux Mélangeur et Nuancier permettent de gérer la palette de couleurs du document actif. Les panneaux Calques et Images permettent d’organiser la structure d’un document et comportent des options de création, suppression et manipulation des calques et des images. Le panneau Images inclut des options de création d’animations. Le panneau Informations fournit des informations sur les dimensions des objets sélectionnés et les coordonnées exactes du pointeur au cours de son déplacement. Concepts de base de Fireworks 89 Le panneau Comportements gère les comportements qui déterminent ce qui se produit lorsque des références ou des découpes réagissent aux déplacements de la souris. Le panneau Historique répertorie les commandes que vous avez utilisées récemment de façon à pouvoir les annuler et les rétablir rapidement. En outre, vous pouvez sélectionner des actions multiples, puis les enregistrer et les réutiliser en tant que commandes. Pour plus d’informations, voir « Utilisation du panneau Historique pour annuler et répéter des actions multiples » à la page 105. Le panneau Bibliothèque comporte des symboles graphiques, de boutons et d’animation. Vous pouvez facilement faire glisser les occurrences de ces symboles, du panneau Bibliothèque vers votre document. Vous pouvez modifier l’ensemble des occurrences en modifiant simplement le symbole. Pour plus d’informations, voir Chapitre 11, « Utilisation des styles, des symboles et des adresses URL », à la page 255. Le panneau Optimiser vous permet de gérer les paramètres qui contrôlent la taille et le type de fichier d’un objet, de travailler avec la palette des couleurs du fichier ou de la découpe à exporter. Le panneau Styles vous permet de stocker et de réutiliser des combinaisons de caractéristiques d’objets ou de choisir un style stocké. Le panneau URL vous permet de créer des bibliothèques contenant les URL les plus fréquemment utilisées. Le panneau Rechercher et remplacer vous permet de rechercher et de remplacer des éléments tels que du texte, des URL, des polices et des couleurs dans un ou plusieurs documents. Le Journal de projets aide à trouver et à contrôler les modifications effectuées dans des fichiers multiples lors de l’utilisation de l’outil rechercher/remplacer ou du traitement par lots. Le panneau Réponses est une nouvelle ressource qui télécharge de manière dynamique une grande quantité d’informations utiles à partir du site Web de Macromedia. Le panneau dispose de fonctions de recherche par mot-clé permettant de trouver des informations Web à partir d’une variété de sources. Organisation des groupes de panneaux et des panneaux Par défaut, les panneaux Fireworks MX sont rassemblés par groupes dans la zone d’ancrage, dans la partie droite de l’espace de travail. Vous pouvez annuler l’ancrage des groupes de panneaux, ajouter des panneaux à un groupe, annuler l’ancrage de panneaux individuels, réorganiser l’ordre des groupes de panneaux ancrés, et réduire et fermer des groupes de panneaux. Vous pouvez également ouvrir et fermer des panneaux individuels. Pour annuler l’ancrage ou déplacer un groupe de panneaux ou un panneau : Faites glisser la poignée du panneau dans le coin supérieur gauche et déplacez-le de la zone d’ancrage des panneaux vers la droite de l’écran. Pour ancrer un groupe de panneaux ou un panneau : Faites glisser la poignée du panneau vers la zone d’ancrage des panneaux. Lorsque vous faites glisser un panneau ou un groupe de panneaux au-dessus de la zone d’ancrage des panneaux, une ligne ou un rectangle d’aperçu du placement montre où s’effectuera le placement au sein des groupes. 90 Chapitre 3 Pour réduire ou déployer un groupe de panneaux ou un panneau, exécutez l’une des actions suivantes : • Cliquez sur le titre du groupe de panneaux ou du panneau. Remarque : La barre de titre est encore visible si le groupe de panneaux ou le panneau est réduit. • Cliquez sur la flèche d’extension située dans le coin supérieur gauche du groupe de panneaux ou du panneau. Pour séparer un panneau d’un groupe de panneaux : Faites glisser l’onglet du panneau et éloignez-le du groupe de panneaux. Pour ajouter un panneau dans un groupe de panneaux ouvert : Faites glisser la poignée dans la zone située sous le nom du groupe de panneaux. Pour renommer un groupe de panneaux : 1 Cliquez sur l’icône située en haut à droite du groupe de panneaux et choisissez Renommer le groupe Panneau à partir du menu Options. 2 Tapez le nouveau nom. Pour que la résolution de votre écran récupère les positions par défaut des panneaux, exécutez l’une des actions suivantes : • Choisissez Commandes > Jeux de disposition panneau > 800 x 600. • Choisissez Commandes > Jeux de disposition panneau > 1024 x 768. • Choisissez Commandes > Jeux de disposition panneau > 1280 x 1024. Pour ouvrir un panneau : Choisissez le nom du panneau dans le menu Fenêtre. Conseil : Une encoche à côté du nom d’un panneau dans le menu Fenêtre indique que le panneau est ouvert. Pour fermer un panneau, utilisez l’une des méthodes suivantes : • Choisissez le nom du panneau dans le menu Fenêtre. • Si le panneau est flottant, cliquez sur le bouton Fermer de la barre de titre du panneau. Pour masquer tous les panneaux et le Vérificateur de propriétés : Choisissez Affichage > Masquer les panneaux. Pour afficher les panneaux masqués, choisissez à nouveau Affichage > Masquer les panneaux. Remarque : Les panneaux qui sont masqués lorsque vous choisissez Masquer les panneaux restent masqués lorsque vous désélectionnez cette commande. Paramétrage des options de panneaux En général, vous pouvez modifier les options sur un panneau en utilisant les menus contextuels, les palettes de couleurs, les curseurs ou les cadrans. Certaines options possèdent des champs d’édition dans lesquels vous pouvez entrer du texte ou des valeurs. Concepts de base de Fireworks 91 Pour changer une option en utilisant un menu contextuel : 1 Cliquez sur l’option. 2 Changez la valeur : • Choisissez une option ou un échantillon de couleur. • Faites glisser le curseur de la glissière ou le sélecteur. • Tapez la première lettre de l’option que vous voulez choisir, et appuyez sur la lettre de manière répétée pour faire le tour de toutes les options commençant par cette lettre (Windows uniquement). Pour taper des informations dans la zone de texte d’un panneau : 1 Cliquez à l’intérieur du champ d’édition. 2 Tapez une valeur. 3 Appuyez sur Entrée. Utilisation du menu Option des groupes de panneaux ou des panneaux Chaque panneau et groupe de panneaux possède un menu Options qui liste toute une sélection spécifique au panneau ou groupe de panneaux actif. Un menu Options apparaît également dans le Vérificateur de propriétés (excepté sous Windows lorsque le Vérificateur de propriétés est flottant). Pour choisir une option à partir du menu Option d’un panneau ou d’un groupe de panneaux : 1 Cliquez sur l’icône du menu Options dans le coin supérieur droit du panneau ou du groupe de panneaux pour ouvrir le menu. 2 Cliquez pour choisir un élément du menu. Enregistrement des dispositions des panneaux Vous pouvez enregistrer la disposition des panneaux en utilisant le menu Commandes. Ainsi, la prochaine fois que vous ouvrirez Fireworks, les panneaux seront placés à la même position. 92 Chapitre 3 Pour enregistrer la disposition d’un panneau : 1 Choisissez Commandes > Enregistrer la disposition des panneaux. 2 Nommez la disposition du panneau et cliquez sur OK. Pour ouvrir une disposition de panneau enregistrée : Choisissez Commandes > Jeux de disposition panneau et choisissez une disposition à partir du sous-menu. Bouton Exportation rapide Le bouton Exportation rapide vous permet d’exporter vos fichiers Fireworks vers un certain nombre d’applications Macromedia, y compris Dreamweaver, Flash, Director et FreeHand. En outre, vous pouvez exporter vos fichiers vers Photoshop, FrontPage, Adobe® GoLive® et Illustrator, ou vous pouvez prévisualiser vos fichiers dans le navigateur de votre choix. Pour plus d’informations, voir « Utilisation du bouton Exportation rapide » à la page 371. Ouverture et déplacement des barres d’outils (Windows uniquement) Fireworks MX pour Windows dispose de deux barres d’outils incluant des commandes classiques de Fireworks. Pour afficher ou masquer une barre d’outils : Choisissez Fenêtre > Barres d’outils et choisissez une barre d’outils. Pour rendre une barre d’outils flottante : Faites glisser la barre d’outils en l’éloignant de son lieu d’ancrage. Remarque : Si une barre d’outils est flottante, vous pouvez cliquer sur le bouton Fermer situé en haut à droite de la barre titre pour la fermer. Pour ancrer une barre d’outils : Faites glisser la barre d’outils vers une zone d’ancrage, en haut, en bas, à gauche ou à droite de la fenêtre de l’application jusqu’à ce qu’apparaisse le rectangle de visualisation du placement. Navigation et visualisation d’un document Vous pouvez contrôler le grossissement du document, le nombre de fenêtres et le mode d’affichage. En outre, vous pouvez obtenir facilement une vue d’ensemble d’un document. Cette option est particulièrement utile lorsque vous grossissez une partie de votre document et perdez la vue l’ensemble. Concepts de base de Fireworks 93 Zoom avant et vue d’ensemble Fireworks vous permet d’effectuer un zoom avant ou arrière en fonction d’un pourcentage de grossissement préétabli ou défini par l’utilisateur. L’outil Zoom Le menu contextuel Zoom L’outil Main Pour réaliser un zoom avant en utilisant des agrandissements prédéfinis, exécutez l’une des actions suivantes : • Choisissez l’outil Zoom et cliquez pour spécifier le nouveau point central à l’intérieur de la fenêtre du document. A chaque clic, l’image s’agrandit, passant ainsi au prochain stade d’agrandissement prédéfini. • Choisissez un paramètre de zoom à partir du menu contextuel Définir le zoom situé en bas de la fenêtre du document. • Choisissez Zoom avant ou alors un agrandissement prédéfini à partir du menu Affichage. Pour effectuer un zoom arrière en utilisant des réductions prédéfinies, exécutez l’une des actions suivantes : • Cliquez à l’intérieur de la fenêtre du document avec l’outil Zoom tout en appuyant sur la touche Alt (Windows) ou Option (Macintosh). Chaque clic réduit l’affichage au prochain pourcentage prédéfini. 94 Chapitre 3 • Choisissez un paramètre de zoom à partir du menu contextuel Définir le zoom situé en bas de la fenêtre du document. • Choisissez Zoom arrière ou alors une réduction prédéfinie à partir du menu Affichage. Pour zoomer une zone spécifique sans être contraint par des agrandissements de zoom prédéfinis : 1 Choisissez l’outil Zoom. 2 Effectuez un glissement au-dessus de la partie de l’image que vous voulez agrandir. La taille du cadre de la sélection du zoom détermine le pourcentage exact d’agrandissement qui est affiché dans le champ Définir le zoom. Remarque : Vous ne pouvez pas saisir de pourcentage d’agrandissement dans le champ Définir le zoom. Pour effectuer un zoom arrière basé sur une zone spécifique : En maintenant la touche Alt (Windows) ou Option (Macintosh) appuyée, faites glisser une zone de sélection avec l’outil Zoom. Pour revenir à un agrandissement de 100 % : Double-cliquez sur l’outil Zoom dans le panneau Outils. Pour obtenir une vue d’ensemble du document : 1 Choisissez l’outil Main. 2 Faites glisser le pointeur Main. Si la vue d’ensemble passe au-delà des limites du document, l’affichage demeure une vue d’ensemble de telle sorte que vous pouvez continuer à travailler avec des pixels le long du bord du document. Pour afficher l’ensemble du document dans la fenêtre active : Double-cliquez sur l’outil Main. Utilisation des modes d’affichage pour gérer l’espace de travail Les boutons du mode d’affichage dans la zone Affichage du panneau Outils vous permettent de choisir parmi les trois modes d’affichage afin de contrôler la disposition de votre espace de travail : Le Mode normal est l’affichage par défaut de la fenêtre du document. Le Mode plein écran avec affichage des menus est un affichage maximisé de la fenêtre du document placé sur un arrière-plan gris avec des menus, des barres d’outils, des barres de défilement et des panneaux visibles. Le Mode plein écran est un affichage maximisé de la fenêtre du document placé sur un arrièreplan noir avec aucun menu, aucune barre d’outils ou barre de titre visible. Pour changer les modes d’affichage, exécutez l’une des actions suivantes : • Pour passer au Mode plein écran avec affichage des menus, cliquez sur le bouton Mode plein écran avec affichage des menus du panneau Outils. • Pour passer au Mode plein écran, cliquez sur le bouton Mode plein écran dans le panneau Outils. Concepts de base de Fireworks 95 • Pour revenir au Mode normal, cliquez sur le bouton droit de la souris (Windows) ou sur le bouton Contrôle et cliquez (Macintosh) dans la fenêtre du document, puis sélectionnez Quitter le mode plein écran, ou bien cliquez sur le bouton Mode normal à partir du panneau Outils. Affichage de vues multiples du document Vous pouvez afficher simultanément différents niveaux de grossissement d’un même document. Les modifications que vous effectuez dans un affichage sont automatiquement appliquées dans tous les autres affichages du même document. Pour ouvrir une vue de document supplémentaire à un niveau de grossissement différent : 1 Choisissez Fenêtre > Nouvelle fenêtre. 2 Choisissez un paramètre de zoom pour la nouvelle fenêtre. Pour disposer les vues de document en mosaïque : Choisissez Fenêtre > Mosaïque horizontale ou Fenêtre > Mosaïque verticale. Pour fermer une fenêtre de document : Cliquez sur la case de fermeture de la fenêtre. Contrôle de l’actualisation de document Les modes d’affichage affectent la représentation à l’écran d’un document, mais pas les données de l’objet ni la qualité de la sortie. Pour contrôler le réaffichage du document : Choisissez Affichage > Affichage normal. Si Affichage normal est sélectionné, Fireworks affiche le document avec toutes les couleurs disponibles et tous les détails. Si Affichage normal est désactivé, Fireworks affiche des trajets d’une largeur d’un pixel, sans trame, et représente les emplacements d’images par des cases comportant une croix. Les modes Affichage et brouillon Pour afficher un document tel qu’il apparaîtrait sur une autre plate-forme : • Sous Windows, choisissez Affichage > Gamma Macintosh. 96 Chapitre 3 • Sur un Macintosh, choisissez Affichage > Gamma Windows. Fireworks prévisualise le document tel qu’il apparaîtrait sur la plate-forme de l’autre ordinateur. Par exemple, si vous travaillez sur la plate-forme Windows, vous pouvez utiliser cette commande pour prévisualiser un document qui s’afficherait sur la plate-forme Macintosh. Utilisation de la barre de lancement La barre de lancement comporte des icônes pour l’ouverture et la fermeture des panneaux les plus utilisés, ce qui inclut le mélangeur ainsi que les panneaux Informations, Optimiser, Calques, Bibliothèque, Styles et Comportements. Si vous l’avez activé, la Barre de lancement se trouve en bas de la fenêtre du document. Par défaut, la barre de lancement n’est pas visible. Pour afficher la Barre de lancement : 1 Choisissez Edition > Préférences. 2 Dans l’onglet Général, choisissez Afficher les icônes des onglets à partir de l’espace de travail, puis cliquez sur OK. Pour ouvrir ou fermer un panneau à partir de la barre de lancement : Cliquez sur l’icône correspondant du panneau. Remarque : L’arrière-plan de l’icône du panneau est sélectionné tandis que le panneau est ouvert. Utilisation de la barre d’état (Windows uniquement) Lorsqu’elle est activée, la barre d’état est affichée en bas de la fenêtre de l’application de Fireworks. Elle fournit des conseils et des informations utiles concernant les objets et les outils sélectionnés. La barre d’état est désactivée par défaut. Pour activer ou désactiver la barre d’état : Choisissez Affichage > Barre d’état. Pour utiliser la barre d’état : Sélectionnez un objet ou un outil, ou bien déplacez le pointeur sur un outil du panneau Outils. Des informations concernant l’objet sélectionné ou l’opération sont affichées dans la barre d’état. Modification du document La première fois que vous créez un nouveau document Fireworks, vous devez spécifier les caractéristiques du document. Vous pouvez modifier la taille et la couleur du document et changer la résolution de l’image à n’importe quel moment en utilisant le menu Modifier ou le Vérificateur de propriétés. Vous pouvez également faire pivoter le document et en supprimer les parties inutiles. Modification de la taille, de la couleur et de la résolution du document Fireworks facilite la modification de la taille et de la couleur du document ainsi que de la résolution de l’image. Concepts de base de Fireworks 97 Pour changer la taille du document : 1 Utilisez l’une des méthodes suivantes : • Choisissez Modification > Document > Taille du document. • Choisissez Sélection > Aucune sélection, cliquez sur l’outil Pointeur pour afficher les propriétés du document dans le Vérificateur de propriétés, puis cliquez sur le bouton Taille du document. 2 Entrez les nouvelles dimensions dans les champs Largeur et Hauteur. 3 Cliquez sur l’un des boutons d’ancrage pour spécifier les côtés du document où Fireworks pourra ajouter ou supprimer des éléments, puis cliquez sur OK. Remarque : L’ancre centrale est sélectionnée par défaut, ce qui indique que les changements de taille du document se font sur tous les côtés. Pour changer la couleur du document à partir du menu Modification : 1 Choisissez Modification > Document > Couleur du fond. 2 Choisissez une couleur de fond blanche, transparente ou personnalisée. Si vous choisissez Personnalisée, cliquez sur une couleur de la fenêtre contextuelle du nuancier. Pour sélectionner la couleur du document à partir du Vérificateur de propriétés : 1 Choisissez Sélection > Aucune sélection, cliquez sur l’outil Pointeur pour afficher les propriétés du document dans le Vérificateur de propriétés, puis cliquez sur la case Couleur de fond. 2 Sélectionnez une couleur à partir de la fenêtre contextuelle du nuancier ou cliquez sur une couleur quelconque de l’écran avec la pipette. Pour choisir un document transparent, cliquez sur le bouton Aucune de la fenêtre contextuelle du nuancier. Pour redimensionner un document et son contenu : 1 Utilisez l’une des méthodes suivantes : • Choisissez Sélection > Aucune sélection, cliquez sur l’outil Pointeur pour afficher les propriétés du document dans le Vérificateur de propriétés, puis cliquez sur le bouton Taille de l’image dans le Vérificateur de propriétés. • Choisissez Modification > Document > Taille de l’image. La boîte de dialogue Taille de l’image s’affiche. 98 Chapitre 3 2 A partir des zones de texte Dimensions en pixels, tapez les dimensions horizontales et verticales voulues. Vous pouvez changer les unités de mesure. Si l’option Rééchantillonner l’image est désactivée, vous pouvez changer la Résolution ou la Taille, mais pas les dimensions en pixels. 3 Dans les champs du groupe Taille, saisissez les dimensions horizontales et verticales pour l’image imprimée. 4 A partir de la zone de texte Résolution, tapez une nouvelle résolution. Vous pouvez choisir entre pixels/pouce et pixels/cm pour l’unité de mesure ou choisir Rééchantillonner l’image. Lorsque vous changez la valeur de Résolution, vous changez également la dimension en pixels. 5 Utilisez l’une des méthodes suivantes : • Pour conserver les proportions du document, sélectionnez l’option Respecter les proportions. • Désactivez cette option pour redimensionner la largeur et la hauteur indépendamment. 6 Activez la case Rééchantillonner l’image pour ajouter ou supprimer des pixels pendant le redimensionnement de l’image de façon à obtenir un aperçu du document sous sa nouvelle taille. 7 Cliquez sur OK. Rééchantillonnage La méthode de rééchantillonnage utilisée par Fireworks, diffère de celle des autres applications d’édition d’image. Le programme Fireworks traite aussi bien des objets image bitmap composés de pixels que des trajets composés d’objets vectoriels. • Lorsqu’un objet bitmap est rééchantillonné, des pixels sont ajoutés ou supprimés pour l’agrandir ou le réduire. • Lorsqu’un objet vectoriel est rééchantillonné, la perte de qualité est faible, car le trajet est redessiné mathématiquement pour obtenir la taille voulue. Dans la mesure où les attributs des objets vectoriels de Fireworks sont en fait des pixels, certains traits ou certaines trames peuvent sembler légèrement différents à la suite du rééchantillonnage, car les pixels qui composent le trait ou la trame doivent être redessinés. Remarque : Les repères, les objets référence et les objets découpe sont redimensionnés lorsque la taille de l’image du document est modifiée. Le redimensionnement des objets bitmap pose toujours le même problème : faut-il ajouter ou supprimer despixels pour redimensionner l’image, ou faut-il changer le nombre de pixels par pouce ou par centimètre ? Modifiez la taille d’une image bitmap en réglant sa résolution ou en rééchantillonnant l’image. Lorsque vous réglez la résolution, vous changez la taille des pixels de l’image de façon à ajouter ou retirer des pixels d’un espace donné. Le réglage de la résolution sans rééchantillonnage ne provoque pas de pertes de données. Un rééchantillonnage positif ou l’ajout de pixels pour agrandir l’image, peut parfois entraîner une perte de qualité, car les pixels ajoutés ne correspondent pas toujours à l’image d’origine. Un rééchantillonnage négatif ou le retrait de pixels pour réduire l’image, entraîne systématiquement une perte de qualité, car des pixels sont physiquement supprimés. La perte de données de l’image est un autre effet pervers du rééchantillonnage négatif. Concepts de base de Fireworks 99 Rotation du document La fonction de rotation du document est particulièrement utile lorsqu’une image importée est à l’envers ou de travers. Vous pouvez faire pivoter le document de 180°, de 90° vers la droite ou de 90°vers la gauche. Lorsque vous appliquez une rotation au document, tous les objets qu’il contient subissent le même mouvement. Pour appliquer une rotation au document, utilisez l’une des méthodes suivantes : • Choisissez Modification > Document > Rotation 180°. • Choisissez Modification > Document > Rotation 90° sens horarie. • Choisissez Modification > Document > Rotation 90° sens anti-horarie. Réduction du document Si votre document comporte des espaces autour du contenu du document, vous pouvez réduire la taille du document de façon simple. Vous pouvez également enlever les espaces non utilisés en recadrant le document. Pour plus d’informations sur le recadrage, voir « Recadrage d’un document » à la page 101. original; document réduit Pour réduire le document : Choisissez Modification > Document > Réduire le document. Les parties du document s’étendant au-delà des pixels les plus à l’extérieur sont supprimées automatiquement. Les bords du document sont recadrés de façon à épouser les bords de l’objet ou des objets du document. Lorsque le document comporte plusieurs images, la commande Réduire le document recadre tous les objets de toutes les images et pas seulement l’image active. Réglage du document Vous pouvez modifier le document en l’agrandissant afin d’accommoder des objets qui dépassent des limites. Pour ajuster le document : Choisissez Modification > Document > Ajuster le document. 100 Chapitre 3 Recadrage d’un document En effectuant un recadrage, vous pouvez supprimer des parties inutiles d’un document. Le document se redimensionne afin de s’adapter à une zone que vous définissez. Par défaut, le recadrage supprime les objets qui dépassent les limites du document. Vous pouvez maintenir des objets à l’extérieur du document en changeant une préférence avant le recadrage. Pour recadrer un document : 1 Choisissez l’outil Recadrage à partir du panneau Outils ou choisissez Edition > Recadrer le document. 2 Faites glisser un cadre sur le document. Utilisez les poignées pour cadrer la zone du document que vous souhaitez conserver. 3 Double-cliquez à l’intérieur du cadre et appuyez sur Entrée pour recadrer le document. Le document se redimensionne en fonction de la zone que vous avez définie, et les objets situés au-delà des bords du document sont supprimés. Conseil : Vous pouvez conserver des objets à l’extérieur du document en désélectionnant Supprimer les objets pendant le recadrage dans l’onglet Edition de la boîte de dialogue Préférences avant le recadrage. Pour plus d’informations concernant les préférences, voir « Définition des préférences » à la page 433. Utilisation des menus contextuels Les menus contextuels permettent d’accéder rapidement à des commandes qui s’appliquent à la sélection. Pour afficher un menu contextuel : Cliquez avec le bouton droit de la souris (Windows) ou appuyez sur la touche Contrôle et cliquez (Macintosh) sur un élément sélectionné dans la fenêtre du document. Concepts de base de Fireworks 101 Utilisation des règles, des repères et de la grille Vous pouvez utiliser des règles et des repères pour disposer les objets de façon aussi précise que possible et faciliter les tâches de dessin. Vous pouvez placer des repères dans le document afin d’y accrocher des objets, ou bien activer la grille de Fireworks et accrocher des objets à cette dernière. Utilisation des règles Les règles permettent de mesurer, d’organiser et de planifier la mise en page de votre travail. Comme les images Fireworks sont destinées au Web, où les graphiques sont mesurés en pixels, les règles dans Fireworks mesurent toujours en pixels, sans se soucier de l’unité de mesure que vous avez utilisée lorsque vous avez créé le document. Pour afficher et masquer les règles : Choisissez Affichage > Règles. 102 Chapitre 3 La règle horizontale et la règle verticale sont affichées le long des marges de la fenêtre de document. Utilisation des repères Les repères sont des lignes que vous faites glisser sur le document à partir des règles. Ils facilitent les opérations de dessin en vous aidant à placer et aligner les objets. Vous pouvez utiliser des repères pour marquer les parties importantes de votre document, telles que les marges, le centre du document et les zones où vous devez effectuer une tâche précise. Afin de faciliter l’alignement des objets, Fireworks permet d’accrocher des objets aux repères. Verrouillez les repères pour prévenir les déplacements accidentels. Remarque : Les repères ne font pas partie d’un calque et ne sont pas exportés avec le document. Ils servent uniquement d’outils de dessin. Fireworks possède également des repères de découpe qui vous permettent de découper un document à utiliser sur le Web. Cependant, les repères normaux des images et les repères de découpe sont deux éléments distincts. Pour plus d’informations concernant les repères de découpe, voir « Déplacement des repères d’une découpe pour modifier la découpe » à la page 275. Pour créer un repère horizontal ou vertical : 1 Cliquez et faites glisser à partir de la règle verticale ou horizontale. 2 Positionnez le repère à l’endroit voulu sur le document et relâchez le bouton de la souris. Remarque : Changez la position du repère en le faisant glisser de nouveau. Concepts de base de Fireworks 103 Pour déplacer un repère de façon précise : 1 Double-cliquez sur le repère. 2 Tapez la nouvelle position dans la boîte de dialogue Déplacer le repère et cliquez sur OK. Pour afficher ou masquer les repères : Choisissez Affichage > Repères > Afficher les repères. Pour accrocher des objets aux repères : Choisissez Affichage > Repères > Accrocher aux repères. Pour changer la couleur des repères : 1 Choisissez Affichage > Repères > Modifier les repères. 2 Sélectionnez la nouvelle couleur du repère à partir du puits de couleurs et cliquez sur OK. Pour verrouiller ou déverrouiller tous les repères : Choisissez Affichage > Repères > Verrouiller les repères. Pour supprimer un repère : Faites glisser le repère en dehors du document. Utilisation de la grille La grille de Fireworks affiche un ensemble de lignes horizontales et verticales sur le document. La grille permet de placer les objets de façon précise. En outre, vous pouvez afficher, modifier, redimensionner et changer la couleur de la grille. Remarque : La grille ne fait pas partie d’un calque et n’est pas exportée avec le document. Elle sert uniquement d’outilde dessin. Pour afficher et masquer la grille : Choisissez Affichage > Grille > Afficher la grille. Pour accrocher des objets à la grille : Choisissez Affichage > Grille > Accrocher à la grille. Pour changer la couleur de la grille : 1 Choisissez Affichage > Grille > Modifier la grille. 2 Sélectionnez la nouvelle couleur de la grille à partir du puits de couleurs et cliquez sur OK. Pour changer la taille des cellules de la grille : 1 Choisissez Affichage > Grille > Modifier la grille. 2 Tapez les valeurs voulues dans les champs d’espacement horizontal et vertical, puis cliquez sur OK. 104 Chapitre 3 Utilisation du panneau Historique pour annuler et répéter des actions multiples Le panneau Historique permet d’afficher, de modifier et de refaire des actions. Le panneau Historique énumère les dernières actions exécutées dans Fireworks. Le nombre maximum d’entrées est spécifié dans le champ Nombre max. d’actions annulées de la boîte de dialogue Préférences de Fireworks. Le panneau Historique permet d’effectuer les actions suivantes : • • • • Annuler et rétablir rapidement les actions récentes. Choisir des actions exécutées récemment à partir du panneau Historique, et les répéter. Copier dans le Presse-papiers des commandes sélectionnées sous forme de texte JavaScript. Enregistrer un groupe d’actions exécutées récemment en tant que commande personnalisée, puis la choisir à partir du menu Commandes afin de la réutiliser comme une commande unique. Pour plus d’informations concernant la création de commandes en utilisant le panneau Historique, voir « Automatisation des tâches avec le panneau Historique » à la page 429. Pour annuler et refaire des actions : 1 Choisissez Fenêtre > Historique pour ouvrir le panneau Historique. 2 Faites glisser le marqueur d’annulation vers le haut ou vers le bas. Pour refaire des actions : 1 Effectuer les actions. 2 Faites ce qui suit afin de sélectionner les commandes à répéter dans le panneau Historique : • Cliquez sur une action pour la sélectionner. • Cliquez sur Maj pour sélectionner une série ininterrompue d’actions. • Maintenez enfoncée la touche Maj tout en cliquant pour sélectionner une série continue de commandes. 3 Cliquez sur le bouton Relire situé en bas du panneau Historique. Pour enregistrer des actions à réutiliser par la suite : 1 Sélectionnez les actions à enregistrer à partir du panneau Historique. Concepts de base de Fireworks 105 2 Cliquez sur le bouton Enregistrer situé en bas du panneau. 3 Entrez un nom de commande, puis cliquez sur OK. Pour utiliser une commande personnalisée enregistrée : Choisissez le nom de la commande dans le menu Commandes. 106 Chapitre 3 CHAPITRE 4 Sélection et transformation d’objets Lorsque vous travaillez dans Macromedia Fireworks MX, vous manipulez des objets vectoriels et bitmap, des blocs de texte, des découpes et des références, ainsi que des zones de pixels. L’utilisation des outils de sélection et de transformation vous permettent de déplacer, copier, supprimer, faire pivoter, mettre à l’échelle ou incliner des objets. Dans les documents qui comportent plusieurs objets, vous pouvez organiser ces derniers en les empilant, en les groupant et en les alignant. Sélection d’objets Avant de pouvoir effectuer quoi que ce soit avec un objet du document, vous devez le sélectionner. Cela s’applique à un objet vectoriel, un trajet ou des points ; un bloc de texte, un mot ou une lettre ; une découpe ou une référence ; une occurrence ou un objet bitmap. Utilisez un des outils suivants pour sélectionner des objets : Le panneau Calques affiche chaque objet. Vous pouvez cliquer sur un objet du panneau Calques pour le sélectionner lorsque le panneau est ouvert et les calques déployés. Pour plus d’informations, voir Chapitre 10, « Calques, masquage et fondu », à la page 227. L’outil Pointeur sélectionne des objets lorsque vous cliquez sur les objets ou lorsque vous faites glisser une zone de sélection autour d’eux. L’outil Sous-sélection sélectionne un objet individuel dans un groupe ou les points d’un objet vectoriel. L’outil Sélectionner derrière sélectionne un objet se trouvant derrière un autre objet. L’outil Exporter zone sélectionne une zone à exporter sous la forme d’un fichier séparé. Pour plus d’informations sur la sélection de zones spécifiques de pixels dans une image bitmap, voir « Sélection de pixels » à la page 110. Utilisation de l’outil Pointeur L’outil Pointeur permet de sélectionner des objets lorsque vous cliquez dessus ou lorsque vous faites glisser une zone de sélection autour d’un objet ou d’une partie de ce dernier. Pour sélectionner un objet en cliquant, exécutez l’une des actions suivantes : • Déplacez l’outil Pointeur vers le trajet ou le cadre de l’objet, puis cliquez. • Cliquez sur le bord ou la trame de l’objet. 107 • Sélectionnez l’objet dans le panneau Calques. Conseil : Pour prévisualiser ce que vous sélectionnerez si vous cliquiez sur un objet au-dessous du pointeur du document, choisissez l’option Surbrillance souris dans l’onglet Edition de la boîte de dialogue Préférences. Pour plus d’informations sur les préférences, voir « Définition des préférences » à la page 433. Pour sélectionner des objets en faisant glisser le pointeur : Faites glisser l’outil Pointeur pour inclure un ou plusieurs objets dans la zone de sélection. Utilisation de l’outil Sous-sélection Utilisez l’outil Sous-sélection pour sélectionner, déplacer ou modifier les points d’un trajet vectoriel ou d’un objet faisant partie d’un groupe. Pour déplacer ou modifier des objets avec l’outil Sous-sélection : 1 Choisissez l’outil Sous-sélection. 2 Effectuez une sélection. Les poignées de sélection apparaissent. 3 Utilisez l’une des méthodes suivantes : • Pour modifier un objet, faites glisser un de ses points ou l’une de ses poignées de sélection. • Pour déplacer l’intégralité d’un objet, faites glisser le pointeur n’importe où dans l’objet, excepté sur un point ou une poignée de sélection. Utilisation de l’outil Sélectionner derrière Lorsque vous travaillez sur des graphismes qui comportent plusieurs objets, utilisez l’outil Sélectionner derrière pour sélectionner un objet qui est masqué ou partiellement masqué par d’autres objets. Pour sélectionner un objet se trouvant derrière d’autres objets : Cliquez plusieurs fois avec l’outil Sélectionner sur la pile d’objets, pour les sélectionner de haut en bas dans l’ordre d’empilement, jusqu’à ce que vous atteignez l’objet voulu. Remarque : Vous pouvez également sélectionner un objet difficile à atteindre en cliquant dessus à partir du panneau Calques lorsque les calques sont déployés. 108 Chapitre 4 Informations sur la sélection dans le Vérificateur de propriétés Lorsque vous sélectionnez un objet, le Vérificateur de propriétés identifie la sélection. La zone supérieure gauche du Vérificateur de propriétés contient les informations suivantes concernant la sélection : • Une description de l’élément inspecté • Un champ d’édition permettant de saisir un nom pour cet élément Remarque : Le nom apparaîtra dans la barre de titre du document à chaque fois que vous sélectionnerez cet élément. En cas d’exportation des découpes et des boutons, le nom est le nom de fichier. • Le nombre d’objets lorsque plusieurs objets sont sélectionnés Remarque : Si la barre d’état est activée (Windows uniquement), les objets sélectionnés sont également identifiés dans la barre d’état, en bas de la fenêtre du document. Le Vérificateur de propriétés affiche également des informations et des paramètres concernant le type d’objet sélectionné. Par exemple, lorsque vous sélectionnez un trajet vectoriel, le Vérificateur de propriétés affiche les propriétés du trajet vectoriel telles que la largeur et la couleur du trait. Modification d’une sélection Lorsqu’un objet unique est sélectionné, vous pouvez ajouter des objets à la sélection et désélectionner les objets sélectionnés. En utilisant une commande unique, vous pouvez sélectionner ou désélectionner tout ce qui se trouve sur tous les calques du document. Vous pouvez également masquer le trajet de sélection de façon à pouvoir modifier un objet de sélection tout en l’affichant tel qu’il doit apparaître sur le Web ou sur une copie imprimée. Pour ajouter une sélection : Maintenez la touche Maj enfoncée et cliquez sur des objets supplémentaires avec l’outil Pointeur, Sous-sélection ou Sélectionner derrière. Pour désélectionner un objet unique : Maintenez enfoncée la touche Maj tout en cliquant sur l’objet sélectionné. Pour sélectionner tout ce figure sur tous les calques du document : Choisissez Sélection > Sélectionner tout. Remarque : La commande Sélectionner tout ne sélectionne pas les objets masqués. Pour désélectionner tous les objets sélectionnés : Choisissez Sélection > Désélectionner. Remarque : Vous devez désélectionner la préférence Modification par calque pour sélectionner tous les objets visibles sur tous les calques d’un document. En effet, lorsque cette préférence est choisie, seuls les objets du calque actif sont sélectionnés. Pour plus d’informations, voir « Organisation des calques » à la page 230. Sélection et transformation d’objets 109 Pour masquer l’affichage de la sélection du trajet d’un objet sélectionné : Choisissez Affichage > Masquer les bords. Remarque : Vous pouvez utiliser le panneau Calques ou le Vérificateur de propriétés pour identifier l’objet sélectionné lorsque son contour et ses points sont masqués. Pour masquer des objets sélectionnés : Choisissez Affichage > Masquer la sélection. Remarque : Les objets masqués ne sont pas exportés. (Cela ne s’applique pas aux objets Web découpe et référence du calque Web.) Pour afficher tous les objets : Choisissez Affichage > Tout afficher. Conseil : Pour masquer des objets sélectionnés ou non sélectionnés, cliquez ou faites glisser le long de la colonne Oeil du panneau Calques. Sélection de pixels Vous pouvez modifier les pixels de l’intégralité d’un document ou bien choisir un des outils de sélection pour imposer votre modification à une zone particulière d’une image : L’outil Cadre de sélection sélectionne une zone rectangulaire de pixels sur une image. L’outil Cadre de sélection oval sélectionne une zone elliptique de pixels sur une image. L’outil Lasso sélectionne une zone en forme libre de pixels sur une image. L’outil Lasso polygonal sélectionne une zone de pixels en forme libre mais aux bords droits sur une image. L’outil Baguette magique sélectionne une zone de pixels de couleur similaire sur une image. Les outils de sélection de pixels tracent un cadre de sélection qui définit la zone de pixels sélectionnés. Après avoir tracé le cadre de sélection, vous pouvez le manipuler en le déplaçant, en effectuant des ajouts ou bien en le basant sur une autre sélection. Vous pouvez modifier les pixels à l’intérieur de la sélection, appliquer des filtres aux pixels ou effacer des pixels sans affecter les pixels se trouvant au-delà de la sélection. Vous pouvez également créer une sélection flottante de pixels que vous pouvez modifier, déplacer, couper ou copier. Les options de l’outil de sélection Bitmap Lorsque vous choisissez l’outil Cadre de sélection, Cadre de sélection oval, Lasso, Lasso polygonal ou Baguette magique, le Vérificateur de propriétés affiche trois options de bordure pour l’outil : Net crée un cadre de sélection avec un bord clairement délimité. Anticrénelé permet Diffusion permet 110 Chapitre 4 d’éviter l’apparition de bords dentelés dans le cadre de sélection. d’adoucir les bords des pixels sélectionnés. Avant de créer une sélection diffuse en utilisant un outil de sélection, vous devez définir l’option Diffusion. Vous pouvez rendre diffuses des sélections existantes en utilisant la commande Diffusion du menu Sélection. Pour plus d’informations, voir « Application d’une diffusion sur une sélection de pixels » à la page 118. Lorsque vous choisissez l’outil Cadre de sélection, Cadre de sélection oval ou Baguette magique, le Vérificateur de propriétés affiche également trois options de style : Normal permet de créer un cadre de sélection où la hauteur et la largeur sont indépendantes l’une de l’autre. Rapport fixe permet Taille fixe définit de conserver les proportions entre la hauteur et la largeur. la hauteur et la largeur à une dimension donnée. Remarque : L’outil Baguette magique possède également un paramètre Tolérance. Pour plus d’informations, voir « Sélection de zones de couleur similaire » à la page 113. Création d’un cadre de sélection de pixels Les outils Cadre de sélection, Cadre de sélection oval et Lasso de la partie Bitmap du panneau Outils vous permettent de sélectionner des zones de pixels spécifiques dans une image bitmap en traçant un cadre de sélection autour d’elles. Pour sélectionner une zone rectangulaire ou elliptique de pixels : 1 Choisissez l’outil Cadre de sélection ou Cadre de sélection oval. 2 Définissez les options Style et Bord dans le Vérificateur de propriétés. Pour plus d’informations, voir « Les options de l’outil de sélection Bitmap » à la page 110. 3 Faites glisser le pointeur pour tracer un cadre de sélection qui définit la sélection de pixels. Lorsque vous faites glisser l’outil Cadre de sélection ou Cadre de sélection oval, maintenez appuyée la touche Maj afin de tracer des cadres de sélection de forme carrée ou circulaire. Pour tracer un cadre de sélection à partir d’un point central, désélectionnez tous les autres cadres de sélection actifs, puis maintenez appuyée la touche Alt (Windows) ou Option (Macintosh) tout en effectuant votre tracé. Sélection et transformation d’objets 111 Pour sélectionner une zone en forme libre de pixels : 1 Choisissez l’outil Lasso. 2 Choisissez une option Bord dans le Vérificateur de propriétés. Pour plus d’informations, voir « Les options de l’outil de sélection Bitmap » à la page 110. 3 Faites glisser le pointeur autour des pixels à sélectionner. Placement de points afin de créer un cadre de sélection. L’outil Lasso polygonal vous permet de sélectionner des pixels spécifiques dans une image bitmap en cliquant de manière répétée autour du périmètre de la zone de pixels que vous voulez sélectionner. Pour sélectionner une zone polygonale de pixels : 1 Choisissez l’outil Lasso polygonal. 2 Choisissez une option Bord dans le Vérificateur de propriétés. Pour plus d’informations, voir « Les options de l’outil de sélection Bitmap » à la page 110. 3 Cliquez pour placer des points autour du périmètre de l’objet ou de la zone afin d’entourer la sélection. Maintenez enfoncée la touche Maj pour contraindre les lignes polygonales tracées avec l’outil Lasso par incréments de 45°. 4 Utilisez l’une des méthodes suivantes pour fermer le polygone : • Cliquez sur le point d’origine. 112 Chapitre 4 • Double-cliquez dans l’espace de travail. Sélection de zones de couleur similaire L’outil Baguette magique vous permet de sélectionner des zones de pixels possédant une couleur similaire. En ajustant les options Bord et Tolérance de la Baguette magique dans le Vérificateur de propriétés, vous pouvez contrôler la manière dont la Baguette magique sélectionne les pixels. Pour sélectionner une zone de pixels avec une plage de couleurs similaires : 1 Choisissez l’outil Baguette magique. 2 Choisissez une option Bord dans le Vérificateur de propriétés. Pour plus d’informations, voir « Les options de l’outil de sélection Bitmap » à la page 110. 3 Définissez le niveau de tolérance en faisant glisser le curseur de l’option correspondante dans le Vérificateur de propriétés. La tolérance représente la plage de couleurs sélectionnée lorsque vous cliquez sur un pixel avec l’outil Baguette magique. Lorsque vous entrez 0 et que vous cliquez sur un pixel, seuls les pixels adjacents et exactement de la même couleur sont sélectionnés. Si vous entrez 65, une plage de couleurs plus grande est sélectionnée. Sélection et transformation d’objets 113 4 Cliquez sur la zone de couleurs à sélectionner. Un cadre de sélection apparaît autour de la plage de pixels sélectionnée. Pixels sélectionnés avec une tolérance basse (en-haut), puis avec une tolérance haute (en-bas) Pour sélectionner des couleurs similaires dans tout le document : 1 2 Sélectionnez une zone de couleur avec un outil de type Cadre de sélection ou Lasso, ou bien l’outil Baguette magique. Choisissez Sélection > Sélectionner couleurs similaires. Un ou plusieurs cadres de sélection sélectionnent toutes les zones contenant la série de pixels sélectionnée, en fonction du paramètre Tolérance actuellement défini dans le Vérificateur de propriétés pour l’outil Baguette magique. Remarque : Pour ajuster la tolérance pour la commande Sélectionner couleurs similaires, choisissez l’outil Baguette magique puis changez le paramètre Tolérance dans le Vérificateur de propriétés avant d’utiliser la commande. Suppression d’un cadre de sélection Vous pouvez supprimer un cadre de sélection sans affecter le document. Pour supprimer un cadre de sélection, utilisez l’une des méthodes suivantes : • • • • 114 Tracez un autre cadre de sélection. Cliquez en dehors de la sélection active avec un outil Cadre de sélection ou Lasso. Appuyez sur Echap. Choisissez Sélection > Désélectionner. Chapitre 4 Réglage des cadres de sélection Après avoir sélectionné des pixels par le biais d’un outil Cadre de sélection ou Lasso, vous pouvez modifier ou déplacer le bord du cadre de sélection sans affecter les pixels se trouvant au-dessous. Ajoutez manuellement des pixels à un cadre de sélection ou supprimez-en en utilisant les touches Maj et Alt (ou Option). En outre, vous pouvez étendre ou réduire la bordure du cadre de sélection selon des proportions spécifiques, sélectionner une autre zone de pixels autour du cadre d’origine ou lisser ses bords. Déplacement d’un cadre de sélection Vous pouvez déplacer un cadre de sélection pour le placer sur une autre zone de pixels. Pour déplacer le cadre de sélection, utilisez l’une des méthodes suivantes : • Faites glisser le cadre de sélection avec un outil cadre de sélection ou lasso, ou alors avec l’outil Baguette magique. • Déplacez le cadre de sélection pixel par pixel avec les touches fléchées. • Appuyez sur Maj et déplacez le cadre de sélection par incréments de 10 pixels à l’aide des touches fléchées. Réglage d’un cadre de sélection avec la barre d’espace Vous pouvez facilement repositionner un cadre de sélection que vous créez en appuyant sur la barre d’espace lorsque vous êtes en train de le tracer. Pour repositionner une sélection avec la barre d’espace : 1 Commencez à faire glisser le pointeur afin de tracer la sélection. 2 Sans relâcher le bouton de la souris, maintenez appuyée la barre d’espace. 3 Faites glisser le cadre de sélection à un autre endroit du document. 4 Relâchez la barre d’espace tout en gardant appuyé le bouton de la souris. 5 Continuez à faire glisser le curseur pour tracer la sélection. Sélection et transformation d’objets 115 Ajout de pixels dans une sélection Après avoir tracé un cadre de sélection avec un outil de sélection bitmap, vous pouvez effectuer des ajouts à la sélection avec le même outil ou un autre outil de sélection bitmap. Pour effectuer un ajout dans une sélection de pixels existante : 1 Choisissez un outil de sélection bitmap quelconque. 2 Maintenez enfoncée la touche Maj et tracez d’autres cadres de sélection. 3 Pour continuer à ajouter des éléments à la sélection, répétez les étapes 1 et 2 avec un outil de sélection bitmap quelconque. Rejoindre les cadres de sélection par recouvrement afin de réaliser un cadre de sélection contigu. Soustraction de pixels dans une sélection Vous pouvez soustraire des parties d’une sélection, ou « perforer » des parties d’une sélection, en définissant des zones de pixels à l’intérieur du cadre de sélection d’origine qui ne feront plus partie de la sélection. Pour soustraire des pixels d’une sélection : Maintenez enfoncée la touche Alt (Windows) ou Option (Macintosh) et utilisez un outil de sélection bitmap pour sélectionner la zone de pixels à supprimer. Création d’un cadre de sélection à partir de cadres de sélection s’entrecroisant Vous pouvez sélectionner des pixels dans un cadre de sélection existant en traçant un cadre de sélection qui superpose l’original. Pour sélectionner une zone de pixels définie par la zone d’intersection de deux cadres de sélection : 1 116 En maintenant appuyées les touches Alt+Maj (Windows) ou Option+Maj (Macintosh), vous créez un nouveau cadre de sélection qui superpose le cadre de sélection d’origine. Chapitre 4 2 Relâchez le bouton de la souris. Seuls les pixels se situant dans la zone d’intersection des deux cadres de sélection seront sélectionnés. Cadre de sélection rectangulaire : un cadre de sélection rectangulaire après intersection avec un cadre de sélection circulaire Utilisation de vignettes et de touches de modification pour modifier des sélections de pixels Avec un bitmap sélectionné, vous pouvez créer une sélection de pixels sur ce bitmap en utilisant l’opacité de n’importe quel objet ou masque du panneau Calques. Pour plus d’informations sur le panneau Calques, voir « Utilisation des calques » à la page 227. Pour créer ou remplacer une sélection de pixels sur un bitmap sélectionné en utilisant l’opacité d’un objet : 1 Dans le panneau Calques, positionnez le pointeur sur la vignette de l’objet que vous voulez utiliser pour créer la sélection de pixels. 2 Maintenez appuyée la touche Ctrl (Windows) ou Commande (Macintosh). Le pointeur change, afin de vous indiquer que vous êtes sur le point de sélectionner la couche alpha, ou la zone opaque, de l’objet. 3 Cliquez sur la vignette. Une nouvelle sélection de pixels est créée sur le bitmap sélectionné. Pour effectuer un ajout dans la sélection de pixels active : Dans le panneau Calques, cliquez sur la vignette d’un objet avec les touches Ctrl-Maj (Windows) ou Commande-Maj (Macintosh) pour ajouter la forme de cette zone opaque à la sélection de pixels active. Conseil : Une fois positionné sur la vignette, les touches de modification spécifiées maintenues appuyées, le pointeur indique que vous êtes sur le point d’effectuer un ajout dans la sélection de pixels. Sélection et transformation d’objets 117 Pour soustraire un élément de la sélection de pixels active : Dans le panneau Calques, cliquez sur la vignette d’un objet avec les touches Ctrl-Alt (Windows) ou Commande-Option (Macintosh) pour soustraire la forme de cette zone opaque de la sélection de pixels active. Conseil : Une fois positionné sur la vignette, les touches de modification spécifiées maintenues appuyées, le pointeur indique que vous êtes sur le point de soustraire un élément de la sélection de pixels. Pour créer une sélection de pixels d’un bitmap sélectionné à partir de l’intersection d’objets superposés : 1 Cliquez sur la vignette d’un objet tout en appuyant sur la touche Ctrl (Windows) ou Commande (Macintosh) pour sélectionner sa couche alpha, ou zone opaque. 2 Cliquez sur un autre objet avec Ctrl-Maj-Alt (Windows) ou Commande-Maj-Option (Macintosh). Une sélection de pixels est créée sur le bitmap sélectionné à partir de l’intersection des zones opaques des deux objets superposés. Conseil : Une fois positionné sur la vignette, les touches de modification spécifiées maintenues appuyées, le pointeur indique que vous êtes sur le point de créer une sélection de pixels à partir de l’intersection des zones opaques de deux objets superposés. Création d’une sélection de pixels inversée En partant d’une sélection de pixels active, vous pouvez créer une autre sélection de pixels qui sélectionne tous les pixels qui ne sont pas actuellement sélectionnés. Vous pouvez par exemple utiliser cette méthode pour sélectionner puis effacer tous les pixels entourant la sélection d’origine. Pour créer une sélection de pixels inversée : 1 Effectuez une sélection de pixels en utilisant un outil de sélection bitmap. 2 Choisissez Sélection > Inverser la sélection. Tous les pixels qui ne se trouvaient pas à l’intérieur de la sélection d’origine sont maintenant sélectionnés. Application d’une diffusion sur une sélection de pixels La diffusion crée un effet de transparence pour les pixels sélectionnés. Si vous utilisez la commande Diffusion, vous pouvez essayer différents taux de diffusion et afficher le résultat avant de désélectionner les pixels. Vous pouvez également appliquer une diffusion à une sélection en définissant un certain taux de diffusion dans le Vérificateur de propriétés avant d’utiliser un outil de sélection bitmap. Pour plus d’informations, voir « Les options de l’outil de sélection Bitmap » à la page 110. Pour appliquer une diffusion à une sélection de pixels : 1 Choisissez Sélection > Diffusion. 2 Entrez un taux de diffusion dans la boîte de dialogue Diffusion. La taille du cadre de sélection se modifie afin de refléter le taux de diffusion. 3 118 Si nécessaire, changez le nombre dans la boîte de dialogue Diffusion afin d’ajuster le taux de diffusion. Chapitre 4 4 Cliquez sur OK. Conseil : Pour visionner l’apparence de la sélection à laquelle la diffusion est appliquée sans les pixels placés autour, choisissez Sélection > Sélection inverse et appuyez sur Supprimer. Vous pouvez ensuite utiliser le panneau Historique ou Edition > Annuler pour réessayer. Extension ou réduction d’un cadre de sélection Vous pouvez étendre ou réduire la bordure d’un cadre de sélection existant. Pour étendre la bordure d’un cadre de sélection : 1 Après avoir tracé le cadre de sélection, choisissez Sélection > Etendre le cadre de sélection. 2 Entrez le nombre de pixels à utiliser pour étendre la bordure du cadre de sélection, puis cliquez sur OK. Pour réduire la bordure d’un cadre de sélection : 1 Après avoir tracé le cadre de sélection, choisissez Sélection > Réduire le cadre de sélection. 2 Entrez le nombre de pixels à retrancher de la bordure du cadre de sélection, puis cliquez sur OK. Sélection d’une zone autour d’un cadre de sélection actif Vous pouvez créer un cadre de sélection supplémentaire d’une largeur spécifique pour entourer le cadre existant. Cette option permet de créer des effets graphiques spéciaux, tels que la diffusion des bords d’une sélection de pixels. Cadre de sélection d’origine : encadrement avec un cadre de sélection supplémentaire Pour sélectionner une zone autour d’un cadre de sélection actif : 1 Après avoir tracé un cadre de sélection, choisissez Sélection > Délimiter le cadre de sélection. 2 Entrez la largeur du cadre de sélection à placer autour du cadre actif, puis cliquez sur OK. Sélection et transformation d’objets 119 Lissage de la bordure d’un cadre de sélection Vous pouvez éliminer les pixels superflus situés sur les bords d’une sélection de pixels. Cette option est utile si les pixels supplémentaires figurent le long de la bordure d’une sélection ou d’un cadre de sélection, lorsque vous utilisez la Baguette magique. Sélection de pixels avant et après le lissage Pour lisser la bordure d’un cadre de sélection : 1 Choisissez Sélection > Lisser le cadre de sélection. 2 Entrez une valeur pour spécifier le niveau de lissage, puis cliquez sur OK. Transfert d’un cadre de sélection Vous pouvez transférer le cadre de sélection d’un objet bitmap vers un autre objet bitmap d’un même calque ou d’un calque diifférent. Vous pouvez également transférer le cadre de sélection vers un masque. Pour transférer un cadre de sélection vers un autre objet bitmap : 1 Effectuez une sélection en traçant le cadre de sélection. 2 Dans le panneau Calques, sélectionnez un autre objet bitmap sur le même calque ou bien un objet d’un calque différent. Le cadre de sélection est transféré vers cet objet. Remarque : Fireworks traite les masques et les objets masqués en tant qu’objets séparés. Pour plus d’informations sur les masques, voir « Masquage d’images » à la page 233. Enregistrement et restauration de cadres de sélection Vous pouvez enregistrer la taille, la forme et l’emplacement d’une sélection afin de les réappliquer plus tard. Pour enregistrer un cadre de sélection : Choisissez Sélection > Enregistrer la sélection de bitmap. Pour restaurer un cadre de sélection : Choisissez Sélection > Restaurer la sélection de bitmap. Remarque : Vous ne pouvez enregistrer qu’une seule sélection à la fois. 120 Chapitre 4 Création et déplacement d’une sélection flottante de pixels Lorsque vous faites glisser un cadre de sélection vers un nouvel emplacement, c’est le cadre de sélection même qui est déplacé. Si vous voulez déplacer, modifier, couper ou copier une sélection de pixels, vous devez d’abord transformer les pixels en une sélection flottante. Pour créer une sélection flottante de pixels : 1 Effectuez une sélection de pixels avec un outil de sélection bitmap. 2 Utilisez l’une des méthodes suivantes : • Maintenez appuyée la touche Ctrl (Windows) ou Commande (Macintosh) et faites glisser la sélection en utilisant un outil de la partie Bitmap du panneau Outils. • Choisissez l’outil Pointeur et faites glisser la sélection. Pour déplacer une sélection flottante, exécutez l’une des actions suivantes : • Faites glisser la sélection flottante avec l’outil Pointeur ou n’importe quel outil de sélection bitmap. • Si un outil bitmap non destiné à la sélection est actif, maintenez appuyée la touche Ctrl (Windows) ou Commande (Macintosh) et faites glisser la sélection flottante. • Utilisez les touches fléchées ou Maj+touches fléchées. Si vous désélectionnez la sélection flottante de pixels ou si vous choisissez un outil vectoriel ou Web, la sélection flottante devient une partie de l’objet bitmap actif. Insertion d’un nouveau bitmap en coupant ou en copiant Vous pouvez insérer un nouveau bitmap basé sur une sélection de pixels dans le calque actif d’un document en coupant ou en copiant les pixels sélectionnés. Pour insérer un nouveau bitmap en coupant et en collant une sélection de pixels : 1 Sélectionnez une zone de pixels en utilisant un outil de sélection de pixels. 2 Choisissez Edition > Insérer > Bitmap par Couper. Un nouvel objet bitmap basé sur la sélection de pixels est créé dans le calque actif, et les pixels sélectionnés sont supprimés de l’objet bitmap d’origine. Dans le panneau Calques, une vignette du nouveau bitmap apparaît dans le calque actif, au-dessus de l’objet à partir duquel il a été coupé. Pour insérer un nouveau bitmap en copiant et en collant une sélection de pixels : 1 Sélectionnez une zone de pixels en utilisant un outil de sélection de pixels. 2 Choisissez Edition > Insérer > Bitmap par Copier. Un nouvel objet bitmap basé sur la sélection de pixels est créé dans le calque actif, et les pixels sélectionnés restent dans l’objet bitmap d’origine. Dans le panneau Calques, une vignette du nouveau bitmap apparaît dans le calque actif, au-dessus de l’objet à partir duquel il a copié. Sélection et transformation d’objets 121 Edition d’objets sélectionnés Fireworks vous fournit un certain nombre de façons permettant de modifier des objets sélectionnés : vous pouvez déplacer des objets sur le document ou d’une application vers une autre, vous pouvez reproduire des objets avec les commandes Cloner et Dupliquer, ou alors vous pouvez supprimer l’ensemble des objets de l’espace de travail. Pour déplacer une sélection, utilisez l’une des méthodes suivantes : • Faites-la glisser avec l’outil Pointeur, Sous-sélection ou Sélectionner derrière. • Appuyez sur l’une des touches fléchées pour déplacer cette sélection pixel par pixel. • Maintenez appuyée la touche Maj tout en appuyant sur une touche fléchée pour déplacer la sélection par incréments de 10 pixels. • Dans le Vérificateur de propriétés, entrez les coordonnées X et Y de l’emplacement du coin supérieur gauche de la sélection. • Entrez les coordonnées X et Y de l’objet dans le panneau Informations. Si les cases X et Y ne sont pas visibles, faites glisser le bord inférieur du panneau. Pour déplacer ou copier des objets sélectionnés en les collant : 1 Sélectionnez un ou plusieurs objets. 2 Choisissez Edition > Couper ou Edition > Copier. 3 Choisissez Edition > Coller. Pour dupliquer un ou plusieurs objets sélectionnés : Choisissez Edition > Dupliquer. En répétant la commande, des doubles de l’objet sélectionné apparaissent en cascade en partant de l’original, 10 pixels plus bas et 10 pixels à droite de l’exemplaire précédent. L’objet dupliqué le plus récent devient l’objet sélectionné. Remarque : Vous ne pouvez pas utiliser les commandes Dupliquer ou Cloner avec des sélections bitmap. Utilisez l’outil Sous-sélection ou Tampon encreur pour dupliquer des parties d’une image bitmap. Pour plus d’informations concernant l’outil de Sous-sélection, voir les procédures suivantes. Pour dupliquer l’objet sélectionné en le faisant glisser : Tout en appuyant sur Alt (Windows) ou Option (Macintosh), faites glisser l’objet en utilisant l’outil Pointeur. Pour dupliquer une sélection de pixels, utilisez l’une des méthodes suivantes : • Faites glisser la sélection de pixels en utilisant l’outil Sous-sélection. • Tout en appuyant sur Alt (Windows) ou Option (Macintosh), faites glisser l’objet en utilisant l’outil Pointeur. Pour cloner une sélection : Choisissez Edition > Cloner. Le clone de la sélection est placé juste devant l’original et devient l’objet sélectionné. 122 Chapitre 4 Conseil : Pour déplacer un clone sélectionné pixel par pixel, utilisez les touches fléchées ou les touches Maj+touches fléchées. Cette méthode est pratique pour conserver une distance spécifique entre des clones ou bien pour conserver l’alignement vertical ou horizontal des clones. Pour supprimer des objets sélectionnés, exécutez l’une des actions suivantes : • • • • Appuyez sur la touche Suppr ou Retour arrière. Choisissez Edition > Effacer. Choisissez Edition > Couper. Cliquez sur l’objet avec le bouton droit de la souris (Windows) ou maintenez la touche Contrôle enfoncée et cliquez (Macintosh) et choisissez Edition > Couper à partir du menu contextuel. Pour annuler ou désélectionner une sélection, exécutez l’une des actions suivantes : • Choisissez Sélection > Désélectionner. • Cliquez sur l’image, mais en-dehors de la zone sélectionnée si vous utilisez l’outil Cadre de sélection, Cadre de sélection oval ou Lasso. • Appuyez sur Echap. Transformation et distorsion d’objets sélectionnés et sélections Vous pouvez transformer un objet ou un groupe sélectionné, ou bien une sélection de pixels, en utilisant les outils Echelle, Incliner et Distorsion ainsi que des commandes de menu : Echelle agrandit ou réduit un objet. Incliner incline un objet le long d’un axe spécifié. Distorsion déplace les côtés ou les coins d’un objet conformément à la direction dans laquelle vous faites glisser une poignée de sélection tandis que l’outil est actif. C’est utile pour créer des effets 3-D. Lorsque vous choisissez un outil de transformation ou bien la commande de menu Transformation, les poignées de transformation apparaissent autour de l’objet sélectionné. Poignées de transformation Point central Objet initial Objet pivoté, mis à l’échelle, incliné, tordu et retourné verticalement et horizontalement Sélection et transformation d’objets 123 Pour transformer des objets sélectionnés avec les poignées de transformation : 1 Choisissez un outil de transformation. Lorsque vous déplacez le pointeur sur ou près des poignées de sélection, le pointeur change afin d’indiquer la transformation active. 2 Pour transformer les objets, exécutez l’une des actions suivantes : • Placez le pointeur à proximité d’un coin et faites-le glisser pour effectuer une rotation. • Faites glisser une poignée de transformation pour effectuer une transformation conformément à l’outil de transformation actif. 3 Double-cliquez à l’intérieur de la fenêtre ou appuyez sur Entrée pour appliquer vos changements. Mise à l’échelle des objets La mise à l’échelle d’un objet permet de l’agrandir ou de le réduire à l’horizontale, à la verticale ou dans les deux sens. Pour mettre à l’échelle un objet sélectionné : 1 Affichez les poignées de transformation : • Choisissez l’outil Echelle. • Choisissez Modification > Transformation > Echelle. 2 Faites glisser les poignées de transformation : • Pour mettre l’objet à l’échelle horizontalement et verticalement, faites glisser une poignée d’angle. Si vous appuyez sur la touche Maj, les proportions changent en fonction du déplacement. • Pour mettre l’objet à l’échelle horizontalement ou verticalement, faites glisser une poignée latérale. Remarque : Vous pouvez également redimensionner des objets sélectionnés en entrant les dimensions dans le Vérificateur de propriétés. Pour plus d’informations, voir « Transformation numérique d’objets » à la page 126. Rotation d’objets Les objets pivotent autour de leur point central. Vous faites pivoter un objet en faisant glisser ses poignées de transformation ou en sélectionnant un angle prédéterminé. Remarque : Vous pouvez également faire pivoter le document. Pour plus d’informations, voir « Rotation du document » à la page 100. Pour faire pivoter un objet sélectionné de 90 ou 180 degrés : Choisissez Modification > Transformation et choisissez une commande de rotation à partir du sous-menu. Pour faire pivoter l’objet sélectionné en le faisant glisser : 1 Choisissez un outil de transformation. 124 Chapitre 4 2 Ecartez le pointeur de l’objet jusqu’à ce que le pointeur de rotation disparaisse. 3 Faire glisser pour appliquer une rotation à l’objet. Conseil : Pour imposer à la rotation des incréments de 15° par rapport à l’horizon, appuyez sur la touche Maj tout en faisant glisser le pointeur. 4 Double-cliquez à l’intérieur de la fenêtre ou appuyez sur Entrée pour appliquer vos changements. Pour déplacer l’axe de rotation : Faites glisser le point central vers la position voulue. Faites ce qui suit afin de replacer l’axe de rotation au centre de la sélection • Double-cliquez sur le point central • Appuyez sur Echap pour désactiver l’objet, puis le sélectionner à nouveau. Retournement d’objets Vous pouvez retourner un objet sur son axe vertical ou horizontal sans changer sa position au sein du document. Pour retourner un objet sélectionné : Choisissez Modification > Transformation > Retournement horizontal. Inclinaison d’objets Les objets sont transformés en inclinant leur axe horizontal ou vertical, ou les deux. Pour incliner un objet sélectionné : 1 Utilisez l’une des méthodes suivantes pour afficher les poignées de transformation : • Choisissez l’outil Incliner. • Choisissez Modification > Transformation > Incliner. 2 Faites glisser une poignée pour incliner l’objet. 3 Double-cliquez à l’intérieur de la fenêtre ou appuyez sur Entrée pour supprimer les poignées de transformation. Pour obtenir une illusion de perspective : Faites glisser l’un des points des angles. Sélection et transformation d’objets 125 Distorsion d’objets Vous pouvez changer la taille et les proportions d’un objet en faisant glisser une poignée de sélection avec l’outil Distorsion. Pour appliquer une distorsion à un objet sélectionné : 1 Utilisez l’une des méthodes suivantes pour afficher les poignées de transformation : • Choisissez l’outil Distorsion. • Choisissez Modification > Transformation > Distorsion. 2 Faites glisser une poignée pour appliquer la distorsion à l’objet. 3 Double-cliquez à l’intérieur de la fenêtre ou appuyez sur Entrée pour appliquer vos changements. Transformation numérique d’objets Au lieu de faire glisser un objet pour le mettre à l’échelle, le redimensionner ou le faire pivoter, vous pouvez entrer des valeurs spécifiques. Pour redimensionner des objets sélectionnés en utilisant le Vérificateur de propriétés ou le panneau Informations : Entrez de nouvelles mesures pour la largeur (L) ou la hauteur (H). Remarque : Si les cases L et H ne sont pas visibles dans le Vérificateur de propriétés, cliquez sur la flèche d’extension pour afficher toutes les propriétés. Pour mettre à l’échelle ou faire pivoter des objets sélectionnés en utilisant Transformation numérique : 1 Choisissez Modification > Transformation > Transformation numérique. La boîte de dialogue Transformation numérique s’affiche. 2 A partir du menu contextuel, choisissez le type de transformation à exécuter sur la sélection active : Echelle, Redimensionner ou Rotation. 3 Choisissez Respecter les proportions pour préserver le rapport entre la hauteur et la largeur pendant la mise à l’échelle ou le redimensionnement de la sélection. 4 Activez la case Attributs d’échelle pour transformer la trame, le trait et les effets en même temps que l’objet. 5 Désactivez Attributs d’échelle pour transformer uniquement le trajet. 6 Tapez des valeurs numériques pour transformer la sélection, puis cliquez sur OK. Affichage des informations de transformation dans le panneau Informations Le panneau Informations regroupe les valeurs des transformations numériques de l’objet sélectionné. Ces informations sont mises à jour pendant la modification de l’objet. 126 Chapitre 4 • Pour les transformations de type mise à l’échelle et transformation libre, le panneau Informations affiche la largeur (L) et la hauteur (H) de l’objet d’origine avant sa transformation et le pourcentage de modification de la largeur et de la hauteur lors de la transformation. • Pour l’inclinaison et la distorsion, le panneau Informations affiche l’angle d’inclinaison par incréments de un degré, ainsi que les coordonnées X et Y du pointeur au cours de la transformation. Pour afficher des informations pendant la transformation d’une sélection : Choisissez Fenêtre > Informations. Organisation des objets Lorsque vous travaillez sur plusieurs objets au sein d’un même document, vous disposez de plusieurs techniques pour organiser le document : • Vous pouvez associer des objets pour les traiter en tant que groupe ou protéger les relations mutuelles des objets au sein du groupe. • Vous pouvez placer des objets derrière ou devant d’autres objets. La façon dont les objets sont disposés est appelée ordre d’empilage. • Vous pouvez aligner les objets sélectionnés sur l’une des parties du document, ou selon un axe vertical ou horizontal. Association d’objets Vous pouvez associer des objets sélectionnés et les manipuler comme s’il s’agissait d’un objet unique. Par exemple, dessinez séparément les pétales d’une fleur, puis sélectionnez-les pour les associer et déplacer l’ensemble de la fleur en tant qu’objet unique. Vous pouvez modifier les groupes sans les dissocier. Vous pouvez sélectionner un objet au sein d’un groupe et le modifier sans dissocier les autres objets. Les objets peuvent être dissociés à tout moment. Regroupement d’objets sélectionnés en un seul objet Pour associer des objets sélectionnés au préalable : Choisissez Modification > Associer. Pour dissocier des objets sélectionnés : Choisissez Modification > Dissocier. Sélection et transformation d’objets 127 Sélection d’objets dans un groupe Si vous souhaitez travailler séparément sur les objets d’un groupe, dissociez-les ou utilisez l’outil Sous-sélection pour ne sélectionner que des objets individuels et laisser le groupe intact. L’outil Sous-sélection La modification des attributs d’un objet sous-sélectionné n’affecte que cet objet et non tout le groupe. Le déplacement d’un objet sous-sélectionné vers un autre calque supprime cet objet du groupe d’origine. Sous-sélection d’un objet au sein d’un groupe Pour sélectionner un objet qui fait partie d’un groupe : Choisissez l’outil Sous-sélection et cliquez sur l’objet. Vous pouvez également faire glisser une zone de sélection autour de l’objet. Pour ajouter des objets à la sélection ou pour les supprimer, maintenez enfoncée la touche Maj lorsque vous cliquez ou faites glisser le pointeur. Pour sélectionner le groupe qui comporte un objet sous-sélectionné, exécutez l’une des actions suivantes : • Cliquez sur le bouton droit de la souris (Windows) ou maintenez la touche Contrôle enfoncée et cliquez (Macintosh) sur le groupe, puis choisissez Sélectionner > Sous-sélection à partir du menu contextuel. • Choisissez Sélection > Supersélectionner. Pour sélectionner tous les objets au sein d’un groupe sélectionné, exécutez l’une des actions suivantes : • Cliquez sur le bouton droit de la souris (Windows) ou maintenez la touche Contrôle enfoncée et cliquez (Macintosh) sur le groupe, puis choisissez Sélectionner > Sous-sélection à partir du menu contextuel. • Choisissez Sélection > Sous-sélection. Empilage des objets Au sein d’un calque, Fireworks superpose les objets dans leur ordre de création, en plaçant les objets les plus récents en haut de la pile. L’ordre d’empilage des objets détermine leur aspect lorsqu’ils se chevauchent. 128 Chapitre 4 Les calques affectent également l’ordre d’empilage. Par exemple, lorsqu’un document comporte deux calques appelés Calque 1 et Calque 2, si Calque 1 est affiché en dessous de Calque 2 dans le panneau Calques, tout ce qui se trouve sur le Calque 2 est placé devant Calque1. Vous pouvez changer l’ordre des calques en faisant glisser le calque du panneau Calques vers un nouvel emplacement. Pour plus d’informations, voir « Organisation des calques » à la page 230. Pour changer l’ordre d’empilage d’un objet sélectionné ou d’un groupe dans un calque : • Choisissez Modification > Disposition > Premier plan ou Arrière-plan pour déplacer un objet ou un groupe vers le haut ou le bas de la pile. • Choisissez Modification > Disposition > Vers l’avant ou Vers l’arrière pour déplacer un objet ou un groupe vers le haut ou le bas d’une pile. Lorsque plusieurs objets ou groupes sont sélectionnés, les objets sont placés devant ou derrière les objets non sélectionnés, tout en préservant leur ordre les uns par rapport aux autres. Alignement des objets Les commandes Aligner du menu Modification vous proposent un large éventail d’options d’organisation, qui vous permettent de : Aligner des objets en fonction d’un axe horizontal ou vertical. Aligner des objets sélectionnés à la verticale sur le bord droit, le centre, le bord gauche ou à l’horizontale sur le bord supérieur, le centre ou le bord inférieur. Remarque : Les bords sont déterminés par le cadre entourant les objets sélectionnés. Distribuer des objets sélectionnés de façon à ce que leur partie centrale ou leurs bords soient espacés de façon homogène. Vous pouvez appliquer une ou plusieurs commandes d’alignement aux objets sélectionnés. Pour aligner des objets sélectionnés, exécutez l’une des actions suivantes : • Choisissez Modification > Aligner > A gauche pour aligner les objets sur l’objet sélectionné situé le plus à gauche. • Choisissez Modification > Aligner > Centré vertical pour aligner les points centraux des objets sur l’axe vertical. • Choisissez Modification > Aligner > A droite pour aligner les objets sur l’objet sélectionné situé le plus à droite. • Choisissez Modification > Aligner > En haut pour aligner les objets sur l’objet sélectionné situé le plus haut. • Choisissez Modification > Aligner > Centré horizontal pour aligner les points centraux des objets sur l’axe horizontal. • Choisissez Modification > Aligner > En bas pour aligner les objets sur l’objet sélectionné situé le plus bas. Pour répartir de façon égale les largeurs et les hauteurs de trois objets sélectionnés ou plus : Choisissez Modification > Aligner > Répartir en largeur ou Modification > Aligner > Répartir en hauteur. Sélection et transformation d’objets 129 Disposition des objets sur les calques Le panneau Calques met à votre disposition un autre niveau de contrôle de l’organisation. Vous pouvez déplacer les objets sélectionnés d’un calque vers un autre en faisant glisser la vignette de ces objets ou l’indicateur de sélection bleu du panneau Calques vers un autre calque. Pour plus d’informations, voir « Organisation des calques » à la page 230. 130 Chapitre 4 CHAPITRE 5 Traitement des bitmaps Les bitmaps sont des graphiques composés de petits carrés colorés nommés pixels, organisés comme les carreaux d’une mosaïque pour former une image. Des exemples de graphiques bitmap : photographies, images scannées et graphismes créés à partir de programmes de dessin. Elles sont parfois vues commes des images raster (quadrillage). Macromedia Fireworks MX combine les fonctionnalités des applications de retouche des photos, de traçage de vecteurs et de dessin. Vous pouvez créer des images bitmap en dessinant avec des outils bitmap, en convertissant des objets vecteurs en images bitmap ou bien en ouvrant ou en important des images. Fireworks possède un ensemble puissant d’effets en direct pour le réglage du ton et de la couleur, ainsi qu’un certain nombre de façons permettant de retoucher vos images bitmap, y compris le recadrage, l’application d’une diffusion et la duplication ou le clonage d’images. En outre, Fireworks dispose maintenant de nouveaux outils de retouche des images : Flou, Accentuer, Révélateur, Brûlure et Tache. Les méthodes de sélection et de transformation des zones d’image et de pixel sont décrites dans Chapitre 4, « Sélection et transformation d’objets », à la page 107. Traitement des bitmaps La partie Bitmap du panneau Outils contient des outils de sélection et de modification des bitmaps. Pour modifier les pixels d’un bitmap dans votre document, vous pouvez choisir un outil à partir de la partie Bitmap. Contrairement aux précédentes versions de Fireworks, vous n’avez pas besoin de commuter délibérément entre le mode bitmap et le mode vectoriel, mais vous pouvez toujours travailler avec des bitmaps, des objets vectoriels et du texte. Commuter vers le mode approprié est aussi simple que choisir un outil vectoriel ou bitmap à partir du panneau Outils. Remarque : Les précédentes versions de Fireworks affichent un bord rayé autour du document pour indiquer que Fireworks se trouve en mode bitmap. Si vous préférez voir la bordure rayée habituelle lorsque vous travaillez avec des bitmaps, vous pouvez choisir Options de bitmap > Afficher la bordure rayée à partir de la catégorie Edition de la boîte de dialogue Préférences. Création d’objets bitmap Vous pouvez créer des images bitmap en utilisant les outils de dessin bitmap de Fireworks, en coupant ou en copiant et en collant des sélections de pixels, ou bien en convertissant une image vectorielle en un objet bitmap. Une autre manière de créer un objet bitmap consiste à insérer une image bitmap vide dans votre document puis d’effectuer des dessins, de le colorer ou de le remplir. 131 Lorsque vous créez un nouvel objet bitmap, il est ajouté au calque actif. Dans le panneau Calques avec les calques déployés, vous pouvez voir une vignette et le nom de chaque objet bitmap sous le calque sur lequel il se trouve. Tandis que certaines applications bitmap considèrent chaque objet bitmap comme un calque, Fireworks organise les objets bitmap, les objets vectoriels et le texte en tant qu’objets séparés placés sur des calques. Pour plus d’informations, voir « Utilisation des calques » à la page 227. Pour créer un nouvel objet bitmap : 1 Choisissez l’outil Pinceau ou Crayon à partir de la partie Bitmap du panneau Outils. 2 Utilisez l’outil Pinceau ou Crayon pour créer des objets bitmap sur le document. Un nouvel objet bitmap est ajouté au calque actif dans le panneau Calques. Pour plus d’informations sur l’utilisation des outils Crayon ou Pinceau, voir « Traçage et modification d’objets bitmap » à la page 133. Vous pouvez créer un nouveau bitmap vide, puis dessiner des pixels dans le bitmap vide. Pour créer un objet bitmap vide, exécutez l’une des actions suivantes : • Cliquez sur le bouton Nouvelle image bitmap du panneau Calques. • Choisissez Edition > Insertion > Bitmap vide. • Dessinez un cadre de sélection, en partant d’une zone vierge du document et en le remplissant. Pour plus d’informations, voir « Création d’un cadre de sélection de pixels » à la page 111. Un bitmap vide est ajouté au calque actif dans le panneau Calques. Si le bitmap actif est désélectionné avant qu’un pixel ait été dessiné, importé ou placé dessus d’une autre façon, l’objet bitmap vide disparaît automatiquement du panneau Calques et du document. Pour couper ou copier des pixels et coller en tant que nouvel objet bitmap : 1 Effectuez une sélection de pixels via l’outil Cadre de sélection, Lasso ou Baguette magique. Pour plus d’informations, voir « Sélection de pixels » à la page 110. 2 Utilisez l’une des méthodes suivantes : • Choisissez Edition > Couper, puis Edition > Coller. • Choisissez Edition > Copier, puis Edition > Coller. • Choisissez Edition > Insérer > Bitmap par Copier pour copier la sélection active dans un nouveau bitmap. • Choisissez Edition > Insérer > Bitmap par Couper pour couper la sélection active afin de la placer dans un nouveau bitmap. La sélection apparaît dans le panneau Calques comme un objet dans le calque actif. Remarque : Cliquez avec le bouton droit de la souris (Windows) ou maintenez la touche Contrôle enfoncée et cliquez (Macintosh) sur une sélection de pixels, puis choisissez une option couper ou copier à partir du menu contextuel. Pour plus d’informations sur les options Bitmap par Couper et Bitmap par Copier, voir « Insertion d’un nouveau bitmap en coupant ou en copiant » à la page 121. Pour convertir des objets vectoriels sélectionnés en une image bitmap, exécutez l’une des actions suivantes : • Choisissez Modification > Fusionner la sélection. 132 Chapitre 5 • Choisissez Fusionner la sélection à partir du menu Options du panneau Calques. Une conversion vecteur-vers-bitmap est irréversible, excepté lorsque Edition > Annuler ou l’annulation d’actions dans le panneau Historique est encore possible. Les images bitmap ne peuvent pas être converties en objets vectoriels. Traçage et modification d’objets bitmap La section Bitmap du panneau Outils contient des outils permettant de sélectionner, dessiner et modifier des pixels dans une image bitmap. Traçage d’objets bitmap Vous pouvez utiliser l’outil Crayon pour dessiner des lignes d’un pixel à main levée, des lignes imposées ou droites, de la même manière que vous utiliseriez un vrai crayon pour dessiner une ligne au contour net. Vous pouvez également zoomer un bitmap et cliquer sur l’outil Crayon pour modifier des pixels individuels. Pour dessiner un objet avec l’outil Crayon : 1 Choisissez l’outil Crayon. 2 Définissez les options de l’outil dans le Vérificateur de propriétés : Anticrénelé lisse le bord des lignes que vous dessinez. Effacement automatique utilise la couleur de remplissage lorsque l’on clique sur la couleur du trait avec l’outil Crayon. Conserver la transparence limite l’utilisation de l’outil Crayon aux pixels existants. Aucun trait n’apparaît dans les zones transparentes. 3 Faites glisser le pointeur pour dessiner. Faites glisser le pointeur tout en appuyant sur Maj afin d’imposer au trajet une ligne horizontale, verticale ou diagonale. Traçage d’objets bitmap Vous pouvez utiliser l’outil Pinceau pour tracer un trait de pinceau en utilisant la couleur de l’option Couleur du trait, ou alors vous pouvez utiliser l’outil Pot de peinture pour changer la couleur des pixels sélectionnés par la couleur de l’option Couleur de la trame. L’outil Dégradé vous permet de remplir des objets bitmap ou vectoriels avec une combinaison de couleurs aux motifs ajustables. Pour dessiner un objet avec l’outil Pinceau : 1 Choisissez l’outil Pinceau. 2 Définissez les attributs du trait dans le Vérificateur de propriétés. 3 Faites glisser le pointeur pour dessiner. Pour plus d’informations sur la définition des options de l’outil Pinceau, voir « Utilisation des traits » à la page 204. Pour changer la couleur des pixels par la couleur de l’option Couleur de la trame : 1 Choisissez l’outil Pot de peinture. 2 Choisissez une couleur de trame dans le puits de couleurs correspondant. Traitement des bitmaps 133 3 Définissez la valeur de la tolérance dans le Vérificateur de propriétés. Remarque : La tolérance détermine le degré de similarité de la couleur des pixels qui seront remplis. Une valeur de tolérance basse remplit les pixels avec des valeurs de couleur similaires au pixel sur lequel vous cliquez. Une tolérance élevée remplit les pixels avec une plage de valeurs de couleur plus large. 4 Cliquez sur l’image. Tous les pixels appartenant à la plage de tolérance adoptent la couleur de la trame. Pour appliquer une trame de dégradé à une sélection de pixels : 1 Effectuez la sélection. 2 Choisissez l’outil Dégradé. 3 Définissez les attributs de la trame dans le Vérificateur de propriétés. 4 Cliquez sur la sélection de pixels pour appliquer la trame. Les outils Pot de peinture et Dégradé peuvent également être appliqués à des objets vectoriels sélectionnés. Pour plus d’informations sur la création, l’application et la modification de trames de dégradé, voir « Utilisation des trames » à la page 210. Prélèvement d’une couleur à utiliser en tant que couleur de trait ou de trame L’outil Pipette vous permet de prélever une couleur à partir d’une image afin de désigner une nouvelle couleur de trait ou de trame. Vous pouvez prélever la couleur d’un pixel unique, la moyenne des valeurs de couleur dans une zone de 3 pixels sur 3 ou encore la moyenne des valeurs de couleur dans une zone de 5 pixels sur 5. Pour prélever la couleur d’un trait ou d’une trame : 1 Si le bon attribut n’est pas encore activé, exécutez l’une des actions suivantes : • Cliquez sur l’icône Trait à côté de l’option Couleur du trait du panneau Outils pour en faire l’attribut actif. • Cliquez sur l’icône Trame à côté de l’option Couleur de la trame du panneau Outils pour en faire l’attribut actif. Remarque : Ne cliquez pas sur le puits de couleurs. Si vous cliquez dessus, le pointeur Pipette qui apparaît n’est pas l’outil Pipette. Pour plus d’informations sur le pointeur Pipette du puits de couleurs, voir « Echantillonnage de couleurs dans une fenêtre contextuelle des couleurs » à la page 204. 2 Ouvrez un document Fireworks ou n’importe quel document que Fireworks peut ouvrir. Pour plus d’informations, voir « Ouverture de graphiques créés dans d’autres applications » à la page 79. 3 Choisissez l’outil Pipette dans la section Bitmap du panneau Outils. Définissez le paramètre Echantillon dans le Vérificateur de propriétés : 1 Pixel crée une couleur de trait ou de trame à partir d’un pixel unique. Moyenne 3x3 crée une couleur de trait ou de trame à partir de la moyenne des valeurs de couleur d’une zone de 3 pixels sur 3. Moyenne 5x5 crée une couleur de trait ou de trame à partir de la moyenne des valeurs de couleur d’une zone de 5 pixels sur 5. 134 Chapitre 5 4 Cliquez sur le document avec l’outil Pipette. La couleur échantillonnée apparaît dans toutes les options Couleur du trait ou Couleur de la trame de Fireworks. Effacement d’objets bitmap Utilisez l’outil Gomme pour supprimer des pixels. Par défaut, le pointeur de l’outil Gomme représente la taille de la Gomme active, mais vous pouvez changer la taille et l’apparence du pointeur dans la boîte de dialogue Préférences. Pour plus d’informations, voir « Préférences d’édition » à la page 434. L’outil Gomme Pour effacer des pixels dans un objet bitmap sélectionné ou une sélection de pixels : 1 Choisissez l’outil Gomme. 2 Dans le Vérificateur de propriétés, choisissez la forme de gomme ronde ou carrée. 3 Faites glisser le curseur Bord pour définir l’adoucissement du bord de la gomme. 4 Faites glisser le curseur Taille pour définir la taille de la gomme. 5 Faites glisser le curseur Opacité de la gomme pour définir le degré d’opacité. 6 Faites glisser l’outil Gomme sur les pixels que vous voulez effacer. Diffusion des sélections de pixels La diffusion rend flous les bords d’une sélection de pixels et aide à mélanger la zone sélectionnée avec les pixels environnants. La diffusion est utile lorsque vous copiez une sélection et que vous la collez sur un autre arrière-plan. Pour diffuser les bords d’une sélection de pixels lorsque vous effectuez une sélection de pixels : 1 Choisissez un outil de sélection bitmap à partir du panneau Outils. 2 Choisissez Diffusion à partir du menu contextuel Bord du Vérificateur de propriétés. Traitement des bitmaps 135 3 Faites glisser le curseur afin de définir le nombre de pixels que vous voulez diffuser le long du bord de la sélection. 4 Effectuez une sélection. Pour diffuser les bords d’une sélection de pixels à partir de la barre de menu : 1 Choisissez Sélection > Diffusion. 2 Tapez une valeur dans la boîte de dialogue Appliquer une diffusion à la sélection afin de définir le rayon de diffusion, puis cliquez sur OK. La valeur du rayon détermine le nombre de pixels auxquels est appliquée une diffusion le long de la bordure de sélection. Retouche de bitmaps Fireworks fournit une large panoplie d’outils permettant de retoucher vos images. Vous pouvez modifier la taille d’une image, réduire ou accentuer sa focalisation, ou copier et « imprimer » une partie de l’image dans une autre zone. L’outil Tampon encreur vous permet de copier ou cloner une zone d’une image vers une autre. L’outil Flou réduit la focalisation des zones sélectionnées d’une image. L’outil Tache prélève une couleur et l’envoie dans la direction dans laquelle vous faites glisser une image. L’outil Accentuer accentue les zones d’une image. L’outil Révélateur éclaircit des parties d’une image. L’outil Brûlure assombrit des parties d’une image. Clonage de pixels L’outil Tampon encreur clone une zone d’une image bitmap de manière à ce que vous puissiez l’imprimer ailleurs sur l’image. Le clonage de pixels est utile lorsque vous voulez réparer une photographie endommagée ou supprimer la poussière d’une image. Vous pouvez copier une zone de pixels d’une photo et remplacer la partie endommagée ou poussiéreuse par la zone clonée. Pour cloner une partie d’une image bitmap : 1 Choisissez l’outil Tampon encreur. 2 Cliquez sur une zone afin de la désigner comme étant la source, ou bien la zone que vous voulez cloner. Le pointeur d’échantillonnage se transforme en un pointeur en forme de croix. Remarque : Pour désigner une autre zone de pixels à cloner, vous pouvez appuyer sur Alt (Windows) ou sur Option (Macintosh) tout en cliquant sur une autre zone de pixels afin de la désigner comme étant la source. 136 Chapitre 5 3 Déplacez-vous sur une autre partie de l’image et faites glisser le pointeur. Vous allez voir deux pointeurs. Le premier, la source du clonage, a la forme d’une croix. « Préférences d’édition » à la page 434 pour plus d’informations. Selon le type de pinceau que vous avez sélectionné, le deuxième pointeur est un tampon encreur, une croix ou un cercle bleu. Lorsque vous faites glisser le deuxième pointeur, les pixels situés sous le premier pointeur sont copiés et appliqués à la zone sous le second pointeur. Pour définir les options de l’outil Tampon encreur : 1 Choisissez l’outil Tampon encreur. 2 Effectuez un choix parmi les options suivantes du Vérificateur de propriétés : Taille détermine la taille du tampon. Bord détermine l’adoucissement du trait (100 % = dur, 0 % = doux). Source alignée affecte l’opération d’échantillonnage. Lorsque Source alignée est sélectionné, le pointeur d’échantillonnage se déplace verticalement et horizontalement, en alignement avec le second. Lorsque Source alignée est désélectionné, la zone d’échantillonnage est établie, peu importe l’endroit où vous déplacez le second pointeur et l’endroit où vous cliquez. Utiliser l’ensemble du document échantillonne à partir de tous les objets de tous les calques. Lorsque cette option est désélectionnée, l’outil Tampon encreur échantillonne uniquement à partir de l’objet actif. Opacité détermine ce qui peut être vu de l’arrière-plan à travers le trait. Mode de fondu détermine la façon dont l’image clonée affecte l’arrière-plan. Pour dupliquer une sélection de pixels, utilisez l’une des méthodes suivantes : • Faites glisser la sélection de pixels avec l’outil Sous-sélection. • Maintenez enfoncée la touche Alt (Windows) ou Option (Macintosh) en faisant glisser la sélection de pixels via l’outil Pointeur. Application d’un flou, accentuation et maculage des pixels Les outils Flou et Accentuer affectent la focalisation des pixels. L’outil Flou vous permet d’accentuer ou de désaccentuer des parties d’image en appliquant un flou à la focalisation d’éléments de manière sélective, un peu comme un photographe contrôle la profondeur du champ. L’outil Accentuer peut être utile pour réparer des problèmes de scannage ou de photographies hors foyer. L’outil Tache vous permet de mélanger délicatement des couleurs, comme la création du reflet d’une image. Pour appliquer un flou ou accentuer une image : 1 Choisissez l’outil Flou ou Accentuer. 2 Définissez les options du pinceau dans le Vérificateur de propriétés : Taille détermine Bord spécifie la taille de la pointe du pinceau. l’adoucissement de la pointe du pinceau. Forme définit une pointe de pinceau ronde ou carrée. Intensité définit la quantité de flou ou d’accentuation. Traitement des bitmaps 137 3 Faites glisser l’outil sur les pixels à accentuer ou auxquels appliquer un flou. Conseil : En maintenant enfoncée la touche Alt (Windows) ou Option (Macintosh), vous alternerez le comportement de l’outil. Pour maculer les couleurs d’une image : 1 Choisissez l’outil Tache. 2 Définissez les options de l’outil dans le Vérificateur de propriétés : Taille spécifie la taille de la pointe du pinceau. Forme définit une pointe de pinceau ronde ou carrée. Bord spécifie l’adoucissement de la pointe du pinceau. Pression définit l’intensité du trait. Couleur de la tache vous permet de maculer en utilisant une couleur spécifique au début de chaque trait. Si cette option est désélectionnée, l’outil utilise la couleur située sous le pointeur de l’outil. Utiliser l’ensemble du document macule en utilisant des données de couleur provenant de tous les objets de tous les calques. Si cette option est désélectionnée, l’outil Tache utilise les couleurs provenant uniquement de l’objet actif. 3 Faites glisser l’outil sur les pixels à maculer. Eclaircissement et assombrissement de pixels Utilisez l’outil Révélateur ou Brûlure pour respectivement éclaircir ou assombrir des parties d’image. Ces outils ramènent à la technique de la chambre noire consistant à ajouter ou soustraire la lumière d’une photographie. Pour éclaircir ou assombrir des parties d’une image : 1 Choisissez l’outil Révélateur pour éclaircir des parties d’image, ou bien l’outil Brûlure pour assombrir des parties d’image. 2 Définissez les options du pinceau dans le Vérificateur de propriétés : Taille détermine Forme définit Bord définit 3 la taille de la pointe du pinceau. une pointe de pinceau ronde ou carrée. l’adoucissement de la pointe du pinceau. Définissez l’exposition dans le Vérificateur de propriétés. L’exposition s’échelonne de 0 % à 100 %. Pour un effet amoindri, spécifiez une valeur de pourcentage plus basse. Pour un effet plus accentué, spécifiez une valeur plus haute. 4 Définissez l’intervalle dans le Vérificateur de propriétés : Ombré change principalement les parties sombres de l’image. Surbrillances change Demi-tons change 138 Chapitre 5 principalement les parties claires de l’image. principalement l’intervalle moyen par couche de l’image. 5 Faites glisser le pointeur sur la partie de l’image que vous voulez éclaircir ou assombrir. Maintenez enfoncée la touche Alt (Windows) ou Options (Macintosh) tout en faisant glisser l’outil afin de passer temporairement de l’outil Révélateur à l’outil Brûlure, ou bien de l’outil Brûlure à l’outil Révélateur. Recadrage d’un bitmap sélectionné Vous pouvez isoler un objet bitmap unique dans un document Fireworks et recadrer uniquement cet objet bitmap, laissant intacts les autres objets du document. Pour recadrer une image bitmap sans affecter les autres objets du document : 1 Sélectionnez un objet bitmap en cliquant sur l’objet du document ou bien en cliquant sur sa vignette à partir du panneau Calques, ou alors tracez un cadre de sélection en utilisant un outil de sélection bitmap. 2 Choisissez Edition > Recadrer le bitmap sélectionné. Les poignées de recadrage apparaissent tout autour du bitmap sélectionné ou du cadre de sélection, si vous en avez tracé un au cours de l’étape 1. 3 Utilisez ces poignées pour cadrer l’image que vous souhaitez conserver : Remarque : Pour annuler une sélection de recadrage, appuyez sur Echap. Un cadre de délimitation 4 Double-cliquez à l’intérieur du cadre de délimitation ou appuyez sur Entrée pour recadrer la sélection. Chaque pixel du bitmap sélectionné se trouvant à l’extérieur du cadre de délimitation est supprimé, mais les autres objets du document demeurent intacts. Réglage de la couleur et du ton d’un bitmap Fireworks possède des filtres de réglage de la couleur et du ton vous permettant d’améliorer et de rehausser les couleurs de vos images bitmap. Vous pouvez régler le contraste et la luminosité, la gradation utile ainsi que la saturation de la teinte et de la couleur de vos images. Traitement des bitmaps 139 Vous pouvez facilement ajouter dans Fireworks vos plug-ins favoris issus de Photoshop et les appliquer à des bitmaps en utilisant le menu Filtres ou la zone des effets en direct du Vérificateur de propriétés. L’application de filtres en tant qu’effets en direct à partir du Vérificateur de propriétés n’est pas destructeur. Les effets en direct ne modifient pas les pixels de manière permanente. Vous pouvez les déplacer ou les modifier à n’importe quel moment. Si vous appliquez un filtre à un objet vectoriel sélectionné en utilisant le menu Filtres, la sélection est convertie en un bitmap. Si vous préférez appliquer des filtres de façon irréversible et permanente, vous pouvez les choisir à partir du menu Filtres. Toutefois, nous vous recommandons d’utiliser les filtres en tant qu’effets en direct à chaque fois que cela est possible. Pour plus d’informations sur l’ajout de plug-ins de Photoshop, voir « Application de filtres et de plug-ins Photoshop comme effets en direct » à la page 223. Les filtres du menu Filtres peuvent être appliqués à des sélections de pixels, mais les effets en direct ne le peuvent pas. Toutefois, vous pouvez définir une zone d’un bitmap et créer un bitmap séparé à partir de ce dernier, puis lui appliquer un effet en direct. Pour appliquer un effet en direct à une zone définie par un cadre de sélection bitmap : 1 Choisissez un outil de sélection bitmap et créez un cadre de sélection. 2 Choisissez Edition > Couper. 3 Choisissez Edition > Coller. La sélection est collée à l’emplacement exact où étaient localisés les pixels d’origine, mais la sélection est maintenant un objet bitmap séparé. 4 Cliquez sur la vignette du nouvel objet bitmap à partir du panneau Calques afin de sélectionner l’objet bitmap. 5 Appliquez un effet en direct à partir du Vérificateur de propriétés. L’effet en direct est appliqué uniquement au nouvel objet bitmap, simulant l’application d’un filtre à une sélection de pixels. Remarque : Bien que les effets en direct soient plus flexibles, un grand nombre d’effets en direct dans un document peut ralentir la performance de Fireworks. Pour plus d’informations, voir « Contrôle de l’actualisation de document » à la page 96. Réglage de la gradation utile Vous pouvez utiliser les fonctions Niveaux et Courbes pour régler la gradation utile d’un bitmap. Avec Niveaux, vous pouvez corriger les bitmaps comportant une forte concentration de pixels dans les zones les plus claires, les demi-tons ou les ombres. Vous pouvez également utiliser Niveaux automatiques et laisser Fireworks régler à votre place la gradation utile. Si vous désirez un contrôle plus précis sur la gradation utile d’un bitmap, vous pouvez utiliser Courbes, qui vous permet de régler toute couleur de la gradation utile sans affecter les autres couleurs. Utilisation de la fonction Niveaux Un bitmap avec une gradation utile complète doit avoir un nombre pair de pixels dans toutes les zones. La fonction Niveaux corrige les bitmaps comportant une forte concentration de pixels dans les zones les plus claires, les demi-tons ou les ombres. Surbrillances est 140 Chapitre 5 appliquée lorsqu’une forte concentration de pixels paraît délavée. Demi-tons est appliquée lorsqu’un trop grand nombre de pixels demi-ton paraissent fades. Ombré est appliquée lorsqu’une zone de pixels excessivement sombres masque une grande partie des détails. Niveaux définit les pixels les plus sombres et les plus clairs en tant que noir et blanc, puis redistribue les demi-tons proportionnellement. Cette opération permet d’obtenir une image dont les pixels sont aussi nets que possible. Original avec des pixels concentrés dans les zones claires ; image après le réglage avec Niveaux Vous pouvez utiliser l’histogramme de la boîte de dialogue Niveaux pour visualiser la distribution des pixels d’un bitmap. L’histogramme est une illustration graphique de la distribution des pixels dans les zones les plus claires, les demi-tons et les ombres d’un bitmap. L’histogramme vous aide à déterminer la meilleure méthode de correction de la gradation utile d’une image. Une forte concentration de pixels au niveau des ombres et des zones les plus claires indique que l’image peut être améliorée avec les fonctions Niveaux ou Courbes. L’axe horizontal correspond aux valeurs de couleurs et va des plus foncées (0) aux plus claires (255). Lisez l’axe horizontal de gauche à droite : la partie gauche représente les pixels les plus sombres, le centre les pixels des demi-tons et la partie droite les plus clairs. L’axe vertical indique le nombre de pixels en fonction du niveau de luminosité. En général, vous devez régler les pixels les plus clairs et les ombres en premier. Le réglage des demi-tons permet d’améliorer leur valeur de luminosité sans affecter les pixels les plus clairs et les plus sombres. Pour régler les zones les plus claires, les demi-tons et les ombres : 1 Sélectionnez l’image bitmap. 2 Exécutez l’une des actions suivantes pour ouvrir la boîte de dialogue Niveaux : • Dans le Vérificateur de propriétés, cliquez sur le bouton Ajouter des effets, puis choisissez Régler la couleur > Niveaux à partir du menu contextuel Ajouter des effets. • Choisissez Filtres > Régler la couleur > Niveaux. Traitement des bitmaps 141 Remarque : Appliquer un filtre à partir du menu Filtres est destructeur. Autrement dit, cette action ne peut pas être annulée, excepté lorsque Edition > Annuler est possible. Pour conserver la possibilité de régler, désactiver ou supprimer ce filtre, appliquez-le en tant qu’effet en direct, comme décrit dans la première option de cette étape. Pour plus d’informations, voir « Utilisation des effets en direct » à la page 219. La boîte de dialogue Niveaux Conseil : Pour afficher vos modifications dans l’espace de travail, choisissez Aperçu dans la boîte de dialogue. Lorsque vous entrez les modifications, l’image est mise à jour automatiquement. 3 Dans le menu contextuel Canal, choisissez si vous voulez appliquer ces modifications à des canaux de couleurs spécifiques (Rouge, Bleu ou Vert) ou bien à tous les canaux de couleurs (RVB). 4 Faites glisser le curseur Niveaux d’entrée, situé sous l’histogramme, pour régler les zones les plus claires, les demi-tons et les ombres. • Le curseur de droite règle les zones les plus claires en utilisant des valeurs comprises entre 255 et 0. • Le curseur du centre règle les demi-tons en utilisant des valeurs allant de 10 à 0. • Le curseur de gauche règle les ombres en utilisant des valeurs comprises entre 0 et 255. Lorsque vous déplacez les curseurs, les valeurs sont entrées automatiquement dans les zones Niveaux d’entrée. Remarque : La valeur des ombres ne peut pas être supérieure à la valeur des zones les plus claires, la valeur des zones les plus claires ne peut pas être inférieure à la valeur des ombres. Quant aux demi-tons, ils doivent se situer entre les paramètres des ombres et des zones les plus claires. 5 Faites glisser les curseurs de l’option Niveaux de sortie pour régler le contraste de l’image. • Le curseur de droite règle les zones les plus claires en utilisant des valeurs comprises entre 255 et 0. • Le curseur de gauche règle les ombres en utilisant des valeurs comprises entre 0 et 255. Lorsque vous déplacez les curseurs, les valeurs sont entrées automatiquement dans les zones Niveaux de sortie. 142 Chapitre 5 Utilisation des Niveaux automatiques Vous pouvez utiliser les Niveaux automatiques pour que Fireworks effectue à votre place les réglages de la gradation utile. Pour régler automatiquement les zones les plus claires, les demi-tons et les ombres : 1 Sélectionnez l’image. 2 Choisissez l’une des options suivantes pour sélectionner Niveaux automatiques : • Dans le Vérificateur de propriétés, cliquez sur le bouton Ajouter des effets, puis choisissez Régler la couleur > Niveaux automatiques à partir du menu contextuel Ajouter des effets. • Choisissez Filtres > Régler la couleur > Niveaux automatiques. Remarque : Appliquer un filtre à partir du menu Filtres est destructeur. Autrement dit, cette action ne peut pas être annulée, excepté lorsque Edition > Annuler est possible. Pour conserver la possibilité de régler, désactiver ou supprimer ce filtre, appliquez-le en tant qu’effet en direct, comme décrit dans la première option de cette étape. Pour plus d’informations, voir « Utilisation des effets en direct » à la page 219. Conseil : Vous pouvez également régler automatiquement les zones les plus claires, les demi-tons et les ombres en cliquant sur le bouton Auto dans la boîte de dialogue Niveaux ou Courbes. Utilisation de Courbes La fonction Courbes est similaire à la fonction Niveaux, mais elle permet de contrôler de façon plus précise la gradation utile. Alors que la fonction Niveaux utilise les zones les plus claires, les ombres et les demi-tons pour corriger la gradation utile, la fonction Courbes permet de régler les couleurs de l’ensemble de la gradation utile au lieu de se limiter à trois variables et n’affecte pas les autres couleurs. Par exemple, utilisez Courbes pour corriger un défaut d’exposition. La grille de la boîte de dialogue Courbes illustre deux valeurs de luminosité : L’axe horizontal indique la luminosité d’origine des pixels (telle qu’indiquée dans la zone Entrée). L’axe vertical représente les nouvelles valeurs de luminosité (telles qu’indiquées dans la zone Sortie). Lorsque vous ouvrez la boîte de dialogue Courbes pour la première fois, la ligne diagonale indique qu’aucune modification n’a été effectuée et que, par conséquent, les valeurs de sortie sont identiques pour tous les pixels. Pour régler un point spécifique de la gradation utile : 1 Sélectionnez l’image. 2 Exécutez l’une des actions suivantes pour ouvrir la boîte de dialogue Courbes : • Dans le Vérificateur de propriétés, cliquez sur le bouton Ajouter des effets, puis choisissez Régler la couleur > Courbes à partir du menu contextuel Ajouter des effets. • Choisissez Filtres > Régler la couleur > Courbes. Traitement des bitmaps 143 Remarque : Appliquer un filtre à partir du menu Filtres est destructeur. Autrement dit, cette action ne peut pas être annulée, excepté lorsque Edition > Annuler est possible. Pour conserver la possibilité de régler, désactiver ou supprimer ce filtre, appliquez-le en tant qu’effet en direct, comme décrit dans la première option de cette étape. Pour plus d’informations, voir « Utilisation des effets en direct » à la page 219. La boîte de dialogue Courbes 3 Dans le menu contextuel Canal, choisissez si vous voulez appliquer les modifications à des canaux de couleur spécifiques ou à l’ensemble des couleurs. 4 Pour régler la courbe, cliquez sur l’un des points de la diagonale, puis faites-le glisser à une autre position. • Tous les points de la courbe disposent de leurs propres valeurs Entrée et Sortie. Lorsque vous faites glisser un point, les valeurs Entrée et Sortie sont mises à jour automatiquement. • La courbe affiche des valeurs de luminosité comprises entre 0 et 255, 0 représentant les ombres. Courbe après avoir fait glisser un point pour le régler Conseil : Vous pouvez également régler automatiquement les zones les plus claires, les demi-tons et les ombres en cliquant sur le bouton Auto dans la boîte de dialogue Courbes. 144 Chapitre 5 Pour supprimer un point le long de la courbe : Faites glisser le point en dehors de la courbe. Remarque : Vous ne pouvez pas supprimer les points de terminaison de la courbe. Utilisation de pipettes de gradation Vous pouvez régler les zones les plus claires, les ombres et les demi-tons avec la pipette correspondante à partir de la boîte de dialogue Niveaux ou Courbes. Pour régler manuellement la balance de gradation en utilisant les pipettes de gradation : 1 Ouvrez la boîte de dialogue Niveaux ou Courbes, puis choisissez un canal de couleur dans le menu contextuel Canal. 2 Choisissez la pipette appropriée pour redéfinir les valeurs de gradation de l’image : • A l’aide de la pipette zone claire, cliquez sur le pixel le plus clair de l’image afin de redéfinir la valeur la plus claire. • A l’aide de la pipette Demi-tons, cliquez sur un pixel de l’image de couleur neutre afin de redéfinir la valeur de demi-ton. • A l’aide de la pipette Ombre, cliquez sur le pixel le plus sombre de l’image pour redéfinir la valeur de l’ombre. 3 Cliquez sur OK. Réglage de la luminosité et du contraste La fonction Luminosité/Contraste modifie le contraste ou la luminosité des pixels d’une image. Cela affecte les zones les plus claires, les ombres et les demi-tons d’une image. La fonction Luminosité/ Contraste est généralement utilisée pour corriger des images trop sombres ou trop claires. Original ; après le réglage de la luminosité Pour régler la luminosité ou le contraste : 1 Sélectionnez l’image. 2 Exécutez l’une des actions suivantes pour ouvrir la boîte de dialogue Luminosité/Contraste : Traitement des bitmaps 145 • Dans le Vérificateur de propriétés, cliquez sur le bouton Ajouter des effets, puis choisissez Régler la couleur > Luminosité/Contraste à partir du menu contextuel Ajouter des effets. • Choisissez Filtres > Régler la couleur > Luminosité/Contraste. Remarque : Appliquer un filtre à partir du menu Filtres est destructeur. Autrement dit, cette action ne peut pas être annulée, excepté lorsque Edition > Annuler est possible. Pour conserver la possibilité de régler, désactiver ou supprimer ce filtre, appliquez-le en tant qu’effet en direct, comme décrit dans la première option de cette étape. Pour plus d’informations, voir « Utilisation des effets en direct » à la page 219. 3 Faites glisser les curseurs Luminosité et Contraste pour sélectionner le niveau voulu. Les valeurs vont de -100 à 100. 4 Cliquez sur OK. Application en direct de l’effet Trame de couleur Vous pouvez utiliser l’effet Trame de couleur en direct pour changer rapidement la couleur d’objets, soit en remplaçant tous les pixels soit en mélangeant une couleur à celle d’un objet existant. Lorsque vous mélangez des couleurs, la couleur est ajoutée au dessus de l’objet. Mélanger une couleur à celle d’un objet existant revient à utiliser la fonction Teinte/Saturation. Cela permet toutefois d’appliquer rapidement une couleur spécifique à partir d’un nuancier. Pour ajouter un effet de type Trame de couleur à un objet sélectionné : 1 Dans le Vérificateur de propriétés, cliquez sur le bouton Ajouter des effets, puis choisissez Régler la couleur > Trame de couleur à partir du menu contextuel Ajouter des effets. 2 Choisissez un mode de fondu. Le mode par défaut est Normal. Pour plus d’informations sur les modes de fondu, voir « Les modes de fondu » à la page 251. 3 Choisissez une couleur de trame dans le puits de couleurs. 4 Choisissez un pourcentage d’opacité pour la couleur de trame et appuyez sur Entrée. Réglage de la teinte et de la saturation Utilisez la fonction Teinte/Saturation pour régler l’ombre d’une couleur, sa teinte ; l’intensité d’une couleur, sa saturation ; ou bien la luminosité de la couleur d’une image. Original ; après le réglage de la luminosité 146 Chapitre 5 Pour régler la teinte ou la saturation : 1 Sélectionnez l’image. 2 Exécutez l’une des actions suivantes pour ouvrir la boîte de dialogue Teinte/Saturation : • Dans le Vérificateur de propriétés, cliquez sur le bouton Ajouter des effets, puis choisissez Régler la couleur > Teinte/Saturation à partir du menu contextuel Ajouter des effets. • Choisissez Filtres > Régler la couleur > Teinte/Saturation. Remarque : Appliquer un filtre à partir du menu Filtres est destructeur. Autrement dit, cette action ne peut pas être annulée, excepté lorsque Edition > Annuler est possible. Pour conserver la possibilité de régler, désactiver ou supprimer ce filtre, appliquez-le en tant qu’effet en direct, comme décrit dans la première option de cette étape. Pour plus d’informations, voir « Utilisation des effets en direct » à la page 219. 3 Faites glisser le curseur de Teinte pour régler la couleur de l’image. Les valeurs vont de -100 à 100. 4 Faites glisser le curseur de Saturation pour régler le niveau de pureté des couleurs. Les valeurs vont de -100 à 100. 5 Faites glisser le curseur Luminosité pour régler la luminosité des couleurs. Les valeurs vont de -100 à 100. 6 Cliquez sur OK. Pour changer une image RVB en une image à deux tons ou pour ajouter des couleurs à une image en échelles de gris : Choisissez Coloriser dans la boîte de dialogue Teinte/Saturation. Remarque : Si vous choisissez Coloriser, la plage de valeurs des curseurs Teinte et Saturation change. Les valeurs de teinte vont alors de 0 à 360. Les valeurs de saturation vont de 0 à 100. Inversion des valeurs de couleur d’une image Vous pouvez utiliser Inverser pour appliquer la valeur inverse des couleurs de l’image à partir de la roue chromatique. Par exemple, l’application du filtre à un objet rouge (R=255, V=0, B=0) change la couleur en bleu clair (R=0, V=255, B=255). Une image noir et blanc ; l’image inversée Traitement des bitmaps 147 Une image en couleur ; l’image inversée Pour inverser les couleurs : 1 Sélectionnez l’image. 2 Utilisez l’une des méthodes suivantes : • Dans le Vérificateur de propriétés, cliquez sur le bouton Ajouter des effets, puis choisissez Régler la couleur > Inverser à partir du menu contextuel Ajouter des effets. • Choisissez Filtres > Régler la couleur > Inverser. Remarque : Appliquer un filtre à partir du menu Filtres est destructeur. Autrement dit, cette action ne peut pas être annulée, excepté lorsque Edition > Annuler est possible. Pour conserver la possibilité de régler, désactiver ou supprimer ce filtre, appliquez-le en tant qu’effet en direct, comme décrit dans la première option de cette étape. Pour plus d’informations, voir « Utilisation des effets en direct » à la page 219. Application d’un flou et accentuation des bitmaps Fireworks possède un ensemble d’options de floutage et d’accentuation que vous pouvez appliquer en tant qu’effets en direct ou en tant que filtres irréversibles et permanents. Application d’un flou à une image L’application d’un flou adoucit l’apparence d’une image bitmap. Fireworks possède trois options de flou : La commande Flou adoucit la focalisation des pixels sélectionnés. La commande Accentuer le flou applique commande Flou. 148 Chapitre 5 un effet de flou trois fois plus puissant que celui de la La commande Flou gaussien applique à chaque pixel une valeur médiane pondérée de flou pour produire un effet de voilage. Avant et après l’application du Flou gaussien Pour rendre une image floue : 1 Sélectionnez l’image. 2 Utilisez l’une des méthodes suivantes : • Dans le Vérificateur de propriétés, cliquez sur le bouton Ajouter des effets, puis choisissez Flou > Flou ou Accentuer le flou à partir du menu contextuel Ajouter des effets. • Choisissez Filtres > Flou > Flou ou Accentuer le flou. Remarque : Appliquer un filtre à partir du menu Filtres est destructeur. Autrement dit, cette action ne peut pas être annulée, excepté lorsque Edition > Annuler est possible. Pour conserver la possibilité de régler, désactiver ou supprimer ce filtre, appliquez-le en tant qu’effet en direct, comme décrit dans la première option de cette étape. Pour plus d’informations, voir « Utilisation des effets en direct » à la page 219. Pour rendre une image floue avec la commande Flou gaussien : 1 Sélectionnez l’image. 2 Exécutez l’une des actions suivantes pour ouvrir la boîte de dialogue Flou gaussien : • Dans le Vérificateur de propriétés, cliquez sur le bouton Ajouter des effets, puis choisissez Flou > Flou gaussien à partir du menu contextuel Ajouter des effets. • Choisissez Filtres > Flou > Flou gaussien. Remarque : Appliquer un filtre à partir du menu Filtres est destructeur. Autrement dit, cette action ne peut pas être annulée, excepté lorsque Edition > Annuler est possible. Pour conserver la possibilité de régler, désactiver ou supprimer ce filtre, appliquez-le en tant qu’effet en direct, comme décrit dans la première option de cette étape. Pour plus d’informations, voir « Utilisation des effets en direct » à la page 219. 3 Faites glisser le curseur du Rayon du flou pour spécifier la force de l’effet. Les valeurs disponibles vont de 0,1 à 250. Plus le rayon est élevé, plus l’effet est appuyé. 4 Cliquez sur OK. Traitement des bitmaps 149 Utilisation de l’effet Rechercher les bords pour donner l’apparence d’un croquis L’effet Rechercher les bords change vos bitmaps, de façon à ce qu’elles ressemblent à des tracés de lignes en identifiant les transitions de couleurs dans les images et en les changeant en lignes. Original ; après l’application de la commande Rechercher les bords Pour appliquer l’effet Rechercher les bords à une zone sélectionnée, utilisez l’une des méthodes suivantes : • Dans le Vérificateur de propriétés, cliquez sur le bouton Ajouter des effets, puis choisissez Autre > Rechercher les bords à partir du menu contextuel Ajouter des effets. • Choisissez Filtres > Autre > Rechercher les bords. Remarque : Appliquer un filtre à partir du menu Filtres est destructeur. Autrement dit, cette action ne peut pas être annulée, excepté lorsque Edition > Annuler est possible. Pour conserver la possibilité de régler, désactiver ou supprimer ce filtre, appliquez-le en tant qu’effet en direct, comme décrit dans la première option de cette étape. Pour plus d’informations, voir « Utilisation des effets en direct » à la page 219. Conversion d’une image en transparent Utilisez l’effet Convertir en Alpha pour convertir un objet ou du texte en un transparent qui repose sur la transparence de l’image. Pour appliquer l’effet Convertir en Alpha à une zone sélectionnée, exécutez l’une des actions suivantes : • Dans le Vérificateur de propriétés, cliquez sur le bouton Ajouter des effets, puis choisissez Autre > Convertir en Alpha à partir du menu contextuel Ajouter des effets. • Choisissez Filtres > Autres > Convertir en Alpha. Remarque : Appliquer un filtre à partir du menu Filtres est destructeur. Autrement dit, cette action ne peut pas être annulée, excepté lorsque Edition > Annuler est possible. Pour conserver la possibilité de régler, désactiver ou supprimer ce filtre, appliquez-le en tant qu’effet en direct, comme décrit dans la première option de cette étape. Pour plus d’informations, voir « Utilisation des effets en direct » à la page 219. 150 Chapitre 5 Utilisation de la fonction Accentuer pour accentuer une image Utilisez la fonction Accentuer pour corriger les images légèrement floues. Fireworks possède trois options Accentuer : La commande Accentuer règle la mise au point d’une image floue en augmentant le contraste des pixels adjacents. La commande Accentuer davantage augmente le contraste des pixels adjacents trois fois plus que la commande Accentuer. La commande Masque d’accentuation accentue une image en réglant le contraste des bords des pixels. Cette option offre le meilleur contrôle, et doit être utilisée en priorité pour accentuer une image. Original ; après l’accentuation Pour accentuer une image en utilisant une option d’accentuation : 1 Sélectionnez l’image. 2 Exécutez l’une des actions suivantes pour choisir une option d’accentuation : • Dans le Vérificateur de propriétés, cliquez sur le bouton Ajouter des effets, puis choisissez Accentuer > Accentuer ou Accentuer davantage à partir du menu contextuel Ajouter des effets. • Choisissez Filtres > Accentuer > Accentuer ou Accentuer davantage. Remarque : Appliquer un filtre à partir du menu Filtres est destructeur. Autrement dit, cette action ne peut pas être annulée, excepté lorsque Edition > Annuler est possible. Pour conserver la possibilité de régler, désactiver ou supprimer ce filtre, appliquez-le en tant qu’effet en direct, comme décrit dans la première option de cette étape. Pour plus d’informations, voir « Utilisation des effets en direct » à la page 219. Pour accentuer une image avec l’option Masque d’accentuation : 1 Sélectionnez l’image. 2 Exécutez l’une des actions suivantes pour ouvrir la boîte de dialogue Masque d’accentuation : • Dans le Vérificateur de propriétés, cliquez sur le bouton Ajouter des effets, puis choisissez Accentuer > Masque d’accentuation à partir du menu contextuel Ajouter des effets. • Choisissez Filtres > Accentuer > Masque d’accentuation. Remarque : Appliquer un filtre à partir du menu Filtres est destructeur. Autrement dit, cette action ne peut pas être annulée, excepté lorsque Edition > Annuler est possible. Pour conserver la possibilité de régler, désactiver ou supprimer ce filtre, appliquez-le en tant qu’effet en direct, comme décrit dans la première option de cette étape. Pour plus d’informations, voir « Utilisation des effets en direct » à la page 219. Traitement des bitmaps 151 3 Faites glisser le curseur Intensité de l’accentuation pour sélectionner un facteur d’accentuation compris entre 1 et 500. 4 Faites glisser le curseur Rayon en pixels pour sélectionner un rayon compris entre 0,1 et 250. Plus le rayon est élevé plus la zone à fort contraste entourant les pixels est étendue. 5 Avec le curseur Seuil, sélectionnez une valeur comprise entre 0 et 255. Les valeurs comprises entre 2 et 25 sont les plus communes. Lorsque vous augmentez ce seuil, vous n’accentuez que les pixels dont le contraste est élevé. Par contre, lorsque vous le diminuez, vous incluez les pixels de plus faible contraste. Un seuil de 0 accentue l’ensemble des pixels de l’image. 6 Cliquez sur OK. 152 Chapitre 5 CHAPITRE 6 Utilisation d’objets vectoriels Un objet vectoriel est un graphisme numérique dont la forme est définie par un trajet. La forme d’un trajet vectoriel est définie par une série de points. La couleur du trait d’un objet vectoriel suit un trajet. Sa trame occupe la partie située à l’intérieur du trajet. De manière générale, le trait et la trame déterminent l’aspect du graphisme lorsque ce dernier est publié sous une forme imprimée ou sur le Web. Macromedia Fireworks MX contient un grand nombre d’objects vectoriels de dessin et d’édition utilisant diverses techniques. Les outils de formes élémentaires permettent de dessiner rapidement des lignes, des cercles et des ellipses, des carrés et des rectangles, des étoiles et des polygones équilatéraux comportant entre 3 et 360 côtés. Vous pouvez dessiner des trajets vectoriels de forme libre avec les outils Plume et Trajet vectoriel. L’outil Plume permet de dessiner des formes complexes avec des courbes lisses, ainsi que des lignes droites en plaçant des points un par un. Vous disposez de plusieurs méthodes pour modifier les objets vectoriels sous Fireworks. Vous pouvez changer la forme d’un objet en déplaçant, ajoutant ou supprimant des points. Vous pouvez utiliser des poignées de points pour changer la forme des segments de trajet adjacents. Les outils de forme libre permettent de modifier la forme des objets en modifiant leurs trajets directement. Les commandes du menu Modifier offrent des options supplémentaires de modification des objets, ce qui inclut l’association d’objets, la création d’un objet à partir de l’intersection de plusieurs objets et l’extension du trait d’un objet. Vous pouvez également importer des graphiques et les manipuler avec ces commandes. Traçage d’objets vectoriels Le programme Fireworks dispose de nombreux outils permettant de dessiner des objets vectoriels. Vous pouvez dessiner des formes de base, des trajets vectoriels de forme libre et des formes complexes en joignant les points. Dessin de formes élémentaires Les carrés, les rectangles, les cercles, les ovales, les étoiles et autres polygones sont faciles à dessiner grâce aux outils de dessin des formes élémentaires. Vous pouvez dessiner des rectangles avec des bords arrondis et changer la valeur de l’angle après avoir dessiné le rectangle. Vous pouvez également dessiner différentes étoiles, allant des étoiles à bord fin et pointu aux étoiles larges. 153 Les outils de dessin des formes élémentaires figurent dans la section Vecteur des outils de dessin du panneau Outils. Lorsque vous utilisez l’un des outils de dessin ou de peinture pour créer un objet, l’outil applique les attributs de trait et de trame actifs à l’objet. Pour changer les attributs de trait et de trame actifs applicables aux nouveaux objets et aux objets existants, voir Chapitre 8, « Application de couleurs, de traits et de trames », à la page 195. Outils de formes élémentaires Dessin de lignes, de rectangles et d’ellipses Vous pouvez utiliser l’outil Ligne, Rectangle ou Ellipse pour dessiner rapidement des formes élémentaires. L’outil Rectangle dessine des rectangles en tant qu’objets associés. Pour déplacer séparément l’un des angles du rectangle, dissociez le rectangle ou utilisez l’outil Sous-sélection. Pour dessiner un rectangle avec des angles arrondis, voir « Dessin de rectangles à angles arrondis » à la page 155. Pour dessiner une ligne, un rectangle ou une ellipse : 1 Choisissez l’outil Ligne, Rectangle ou Ellipse. 2 Si nécessaire, sélectionnez les attributs de trait et de trame dans le Vérificateur de propriétés. Voir Chapitre 8, « Application de couleurs, de traits et de trames », à la page 195. 3 Faites glisser le curseur sur le document pour dessiner la forme. Avec l’outil Ligne, appuyez sur la touche Maj tout en faisant glisser la souris pour obtenir des lignes inclinées à 45° par rapport à l’horizontale. Avec les outils Rectangle et Ellipse, appuyez sur la touche Maj tout en faisant glisser la souris pour obtenir des carrés ou des cercles. Pour dessiner une ligne, un rectangle ou une ellipse à partir d’un point central spécifique : Placez le pointeur au niveau du point central voulu, puis appuyez sur la touche Alt (Windows) ou Option (Macintosh) et faites glisser l’outil de dessin. Pour obtenir une forme spécifique et dessiner à partir d’un point central : Placez le pointeur au niveau du point central voulu, puis appuyez sur la touche Maj+Alt (Windows) ou Maj+Option (Macintosh) et faites glisser l’outil de dessin. Pour ajuster la position d’une forme élémentaire lorsque vous la dessinez : Cliquez en maintenant le bouton de la souris enfoncé, maintenez la barre d’espacement enfoncée, et faites glisser l’objet vers l’emplacment approprié sur le document. Relâchez la barre d’espacement pour continuer à dessiner l’objet. Remarque : L’outil ligne constitue une exception. Lorsque vous maintenez la barre d’espace enfoncée avec l’outil Ligne, la position de la ligne ne change pas. 154 Chapitre 6 Pour redimensionner une ligne, un rectangle ou une ellipse sélectionné, procédez de l’une des manières suivantes : • Tapez les nouvelles valeurs de largeur (L) ou de hauteur (H) dans le Vérificateur de propriétés ou le panneau Informations. • Choisissez l’outil Echelle de la section de sélection du panneau Outils et faites glisser une poignée de transformation d’angle. L’objet est redimenssionné proportionnellement. Remarque : Vous pouvez également redimensionner proportionnellement un objet en choisissant Modification > Transformation > Echelle et en faisant glisser une poignée de transformation d’angle ou en choisissant Modification > Transformation > Transformation numérique et en entrant de nouvelles dimensions. Pour plus d’informations sur le redimensionnement et la mise à l’échelle des objets, voir « Transformation et distorsion d’objets sélectionnés et sélections » à la page 123. • Faire glisser l’angle d’un rectangle Remarque : La mise à l’échelle d’un objet vectoriel ne change pas l’épaisseur de trait. Dessin de rectangles à angles arrondis Vous pouvez dessiner un rectangle à angles arrondis en utilisant l’outil Rectangle arrondi ou l’option Arrondi du Vérificateur de propriétés pour ajuster l’arrondi des angles des rectangles sélectionnés. L’outil Rectangle arrondi dessine des rectangles en tant qu’objets associés. Pour déplacer séparément l’un des angles du rectangle arrondi, dissociez le rectangle ou utilisez l’outil Sous-sélection. Pour dessiner un rectangle avec des angles arrondis : 1 Choisissez l’outil Rectangle arrondi du menu déroulant de l’outil Rectangle. 2 Faites glisser le curseur sur le document pour dessiner le rectangle. Conseil : Vous pouvez régler l’arrondi des angles pendant le dessin du rectangle en appuyant plusieurs fois sur les touches fléchées Haut et Bas ou les touches 1 ou 2. Pour arrondir les angles d’un rectangle sélectionné : Dans la zone Arrondi du Vérificateur de propriétes, entrez une valeur comprise entre 0 et 100 et appuyez sur Entrée ou faites glisser la glissière. Remarque : Si la moitié de la fenêtre du Vérificateur de propriétés est affichée, cliquez sur la flèche d’extension située dans l’angle inférieur droit pour afficher la totalité de la fenêtre. Dessin de polygones L’outil Polygone permet de dessiner un polygone équilatéral, qu’il s’agisse d’un triangle ou d’un polygone à 360 côtés. Utilisation d’objets vectoriels 155 Pour dessiner un polygone : 1 Choisissez l’outil Polygone qui fait partie des outils de dessin de formes élémentaires dans la section Vecteur du panneau Outils. 2 Dans le Vérificateur de propriétés, procédez de l’une des manières suivantes pour définir le nombre de côtés du polygone : • Utilisez la glissière pour sélectionner entre 3 et 25 côtés. • Tapez un nombre compris entre 3 et 360 dans la zone de texte Côtés. 3 Faites glisser la souris pour dessiner le polygone. Pour contraindre l’orientation d’un polygone par incréments de 45°, maintenez enfoncée la touche Maj pendant que vous dessinez. Les trajets dessinés à l’aide de l’outil Polygone débutent toujours à partir d’un point central. Dessin d’étoiles Avec l’option Etoile de l’outil Polygone, vous pouvez dessiner des étoiles comportant entre 3 et 360 pointes et sélectionner l’angle de votre choix. Pour dessiner une étoile : 1 Choisissez l’outil Polygone. 2 Dans le Vérificateur de propriétés, choisissez Etoile dans le menu déroulant Forme. 3 Entrez le nombre de pointes de l’étoile dans la zone de texte Côtés. 4 Choisissez Automatique ou entrez une valeur dans la zone de texte Angle. Les valeurs proches de 0 produisent des pointes longues et fines, alors que les valeurs proches de 100 ont pour résultat des pointes courtes et écrasées. 5 Faites glisser le curseur sur le document pour dessiner l’étoile. Pour contraindre l’orientation d’une étoile par incréments de 45°, maintenez enfoncée la touche Maj pendant que vous faites glisser la souris. Les trajets dessinés à l’aide de l’outil Polygone débutent toujours à partir d’un point central. 156 Chapitre 6 Dessin de trajets de forme libre Vous pouvez dessiner des trajets vectoriels de forme libre avec l’outil Trajet vectoriel pratiquement de la même manière qu’avec un feutre ou un crayon. Outil Trajet vectoriel du menu déroulant de l’outil Plume Vous pouvez changer les attributs de trait et de trame des trajets dessinés avec l’outil Trajet vectoriel. Voir Chapitre 8, « Application de couleurs, de traits et de trames », à la page 195. Utilisation de l’outil Trajet vectoriel L’outil Trajet vectoriel dispose de nombreux types de traits, ce qui inclut l’aérographe, le vaporisateur, la calligraphie, la craie grasse et artificiel. Ces catégories disposent elles-mêmes de divers traits, ce qui inclut les feutres sombres et clairs, les éclaboussures d’essence, bambou, ruban, 3D, dentifrice et peinture alien visqueuse. Bien que les traits ressemblent à de la peinture ou à de l’encre, ils sont constitués de points et de trajets comme tous les objets vectoriels. Par conséquent, vous pouvez changer la forme des traits en déplaçant ces points de différentes manières. Lorsque vous reformez un trajet, le trait est redessiné. Graphisme modifié en déplaçant des points de vecteurs Vous pouvez également modifier les traits de pinceau existants et ajouter des trames aux objets sélectionnés qui ont été dessinés avec l’outil Trajet vectoriel. Les nouveaux paramètres de trait et de trame sont enregistrés et pourront être utilisés ultérieurement avec l’outil Trajet vectoriel dans le document actif. Utilisation d’objets vectoriels 157 Pour dessier un trajet vectoriel de forme libre : 1 Choisissez l’outil Trajet vectoriel du menu déroulant Plume. 2 Si nécessaire, sélectionnez les attributs de trait et de trame dans le Vérificateur de propriétés. Voir Chapitre 8, « Application de couleurs, de traits et de trames », à la page 195. 3 Faites glisser la souris pour dessiner. Pour contraindre le trajet à une ligne horizontale ou verticale, maintenez enfoncée la touche Maj et faites glisser la souris. 4 Relâchez le bouton de la souris à la fin du trajet. Pour fermer le trajet, relâchez le bouton de la souris après avoir placé le pointeur sur le premier point du trajet. Dessin de trajets à l’aide de points L’une des façons de dessiner et de modifier des objets vectoriels sous Fireworks est de tracer des points et de les relier comme dans un dessin pour enfant. Lorsque vous cliquez sur l’un des points avec l’outil Plume, le trajet de l’objet vectoriel se dessine automatiquement à partir du dernier point que vous avez cliqué. L’outil Plume permet non seulement de relier des points avec une ligne droite, mais également de dessiner des segments de courbe lisses dérivés d’une fonction mathématique appelée courbes de Bézier. Le type de point, point d’angle ou point de courbe, détermine si la forme adjacente doit être une ligne droite ou une courbe. L’outil Plume Vous pouvez modifier des segments de droite et de courbe en faisant glisser leurs points. Vous pouvez modifier encore les segments de courbe en faisant glisser les glissières de leurs points. Vous pouvez convertir un segment de droite en segment de courbe et vice-versa en convertissant ses points. Dessin de trajet en tant que segments de droite Le dessin de segments de droite avec l’outil Plume nécessite simplement de cliquer pour placer les points. Lorsque vous cliquez avec l’outil Plume, vous formez un angle. 158 Chapitre 6 Pour dessiner un trajet avec des segments de droite : 1 Choisissez l’outil Plume. 2 Si nécessaire, choisissez Edition > Préférences et activer les options suivantes appropriées de l’onglet Edition de la boîte de dialogue Préférences, puis cliquez sur OK : • Afficher l’aperçu de la plume permet d’obtenir un aperçu du segment de ligne tel qu’il doit apparaître lors du clic suivant. • Afficher les points unis permet de dessiner des points unis. Remarque : Dans Mac OS X, choisissez Fireworks > Préférences pour ouvrir la boîte de dialogue des préférences. 3 Cliquez sur le document pour placer le premier point d’angle. 4 Déplacez le pointeur et cliquez pour placer le point suivant. Un segment de droite réunit les deux points. 5 Continuez à tracer des points. Les segments de droites relient les points. 6 Procédez de l’une des manières suivantes pour créer un trajet ouvert ou fermé : • Double-cliquez sur le dernier point pour terminer le trajet dans le cas d’un trajet ouvert. • Choisissez un autre outil pour terminer ce trajet ouvert. Remarque : Lorsque vous choisissez un outil de sélection ou vectoriel autre que l’outil Texte et réutilisez l’outil Plume, vous pouvez reprendre le dessin de l’objet lors du clic suivant. • Pour fermer le trajet, cliquez sur le premier point que vous avez tracé. Les points de départ et de fin d’un trajet fermé ne font qu’un. Remarque : Les boucles formées par un trajet qui se chevauche ne constituent pas des trajets fermés. Seuls les trajets qui commencent et se terminent par le même point sont des trajets fermés. Dessin de trajet en tant que segments de courbe Pour dessiner des segments de courbe, il suffit de cliquer et de faire glisser la souris lors du dessin des points. Les points que vous dessinez comportent des poignées de contrôle. Lorsque vous dessinez avec l’outil Plume ou un autre outil de de dessin Fireworks, tous les points des objets vectoriels reçoivent des poignées de transformation. Ces poignées sont visibles uniquement sur les points des courbes. Utilisation d’objets vectoriels 159 Pour dessiner un objet avec des segments de courbe : 1 Choisissez l’outil Plume. 2 Cliquez pour placer le premier point d’angle. 3 Placez le curseur à l’emplacement du point suivant, puis cliquez et faites glisser la souris pour obtenir un point de courbe. Lorsque vous cliquez et faites glisser la souris, Fireworks étend le segment de droite jusqu’au nouveau point. 4 Continuez à tracer des points. Lorsque vous cliquez et faites glisser un nouveau point, vous créez un point de courbe. Conseil : Vous pouvez utiliser temporairement l’outil Sous-sélection pour changer l’emplacement des points et la forme des courbes que vous tracez. Maintenez enfoncée la touche Ctrl (Windows) ou Commande (Macintosh) lors du dessin d’un point ou d’une poignée de contrôle avec l’outil Plume. 5 Procédez de l’une des manières suivantes pour créer un trajet ouvert ou fermé : • Double-cliquez sur le dernier point pour terminer le trajet dans le cas d’un trajet ouvert. • Choisissez un autre outil pour terminer ce trajet ouvert. Lorsque vous choisissez un autre outil, puis utilisez de nouveau l’outil Plume, ce dernier permet de reprendre le dessin de l’objet. • Pour fermer un trajet, cliquez sur le premier point que vous avez tracé. Les points de départ et de fin d’un trajet fermé ne font qu’un. Réglage de la forme d’un trajet de segment de droite Vous pouvez allonger, raccourcir ou changer la position d’un segment de droite en déplaçant ses points. Pour changer un segment de droite : 1 Sélectionnez le trajet à l’aide de l’outil Pointeur ou Sous-sélection. 2 Cliquez sur l’un des points avec l’outil Sous-sélection pour le sélectionner. Les points d’angle sélectionnés sont affichés sous la forme de carrés bleus. 3 Faites glisser le point ou utilisez l’une des touches fléchées pour déplacer le point vers un autre emplacement. Réglage de la forme d’un trajet de segment de courbe Vous pouvez modifier la forme d’un objet vectoriel en faisant glisser ses poignées de contrôle avec l’outil Sous-sélection. Les poignées de contrôle déterminent l’angle de la courbe entre deux points fixes. Ces courbes s’appellent des courbes de Bézier. 160 Chapitre 6 Pour moifier la courbe de Bézier d’un segment de trajet : 1 Sélectionnez le trajet à l’aide de l’outil Pointeur ou Sous-sélection. 2 Cliquez sur l’un des points de la courbe avec l’outil Sous-sélection pour le sélectionner. Les points de courbe sélectionnés sont affichés sous forme de carrés unis bleus. Les poignées de point s’étendent depuis le point. 3 Faites glisser les poignées vers un nouvel emplacement. Pour contraindre la direction du déplacement par incréments de 45 degrés, maintenez la touche MAJ enfoncée pendant que vous tirez la poignée. L’aperçu du trajet en bleu indique par où passera le nouveau trajet si vous relâchez le bouton de la souris. bouton. Poignées de points Pointeur de sous-sélection Aperçu du trajet Trajet Point sélectionné Par exemple, si vous faites glisser la poignée de contrôle vers le bas, la poignée de contrôle droite monte. Appuyez sur la touche Alt et faites glisser la souris pour déplacer la poignée séparément. Utilisation d’objets vectoriels 161 Conversion de segments de trajet en droites ou en courbes Les trajets des segments de droite comportent des points d’angle. Les segments de courbe comportent des points de courbe. Vous pouvez convertir un segment de droite en segment de courbe et vice-versa en convertissant ses points. Pour convertir un point d’angle d’un trajet sélectionné en point de courbe : 1 Choisissez l’outil Plume. 2 Cliquez sur un point d’angle et faites-le glisser à l’écart de sa position initiale. Les poignées s’étendent et les segments adjacents se courbent. Remarque : Pour modifier les poignées du point, choisissez l’outil Sous-sélection ou appuyez sur la touche Crtl (Windows) ou Commande (Mac) lorsque l’outil Plume est actif. Pour convertir un point de courbe d’un trajet sélectionné en point d’angle : 1 Choisissez l’outil Plume. 162 Chapitre 6 2 Cliquez sur un point de courbe. Les poignées se rétractent et les segments adjacents se redressent. Sélection de points L’outil Sous-sélection permet de sélectionner plusieurs points. Avant de sélectionner un point avec l’outil Sous-sélection, sélectionnez le trajet avec l’outil Pointeur ou Sous-sélection ou en cliquant sur sa vignette dans le panneau Calques. Pour sélectionner des points sur un trajet sélectionné : 1 Choisissez l’outil Sous-sélection. 2 Utilisez l’une des méthodes suivantes : • Cliquez sur un point ou maintenez la touche Maj enfoncée et cliquez successivement sur les points. • Tracez une zone autour des points à sélectionner. Pour afficher les poignées d’un point de courbe : Cliquez sur le point avec l’outil Sous-sélection. Si l’un des points situés près du point sur lequel vous avez cliqué est un point de courbe, sa poignée est également affichée. Utilisation d’objets vectoriels 163 Déplacement des points et de leurs poignées de contrôle Vous pouvez modifier la forme d’un objet en faisant glisser ses points et ses poignées de contrôle avec l’outil Sous-sélection. Pour déplacer un point : Faites-le glisser avec l’outil Sous-sélection. Le trajet est dessiné de nouveau en tenant compte de la nouvelle position du point. Pour modifier la forme d’un segment de trajet : Faites glisser une poignée avec l’outil Sous-sélection. Pour déplacer une seule poignée à la fois, maintenez enfoncée la touche Alt (Windows) ou Option (Macintosh) et déplacez la poignée. Pour ajuster la poignée d’un angle : 1 Choisissez l’outil Sous-sélection. 2 Sélectionnez un angle. 3 Appuyez sur la touche Alt (Windows) ou Option (Macintosh) et faites glissez la souris pour afficher sa poignée et courber le segment adjacent. Pour modifier un segment de trajet adjacent, faites glisser la poignée d’un point à l’aide de l’outil Sous-sélection. 164 Chapitre 6 Insertion et suppression de points sur un trajet Vous pouvez ajouter ou supprimer des points à un trajet. Ajoutez des points à un trajet pour contrôler l’un des segments du trajet. Supprimez-en pour reformer le trajet ou simplifier sa modification. Pour insérer un point sur un trajet sélectionné : Avec l’outil Plume, cliquez sur l’une des parties du trajet qui ne comporte pas encore de point. Pour supprimer un point d’un segment de trajet sélectionné, procédez comme suit : • Cliquez avec l’outil Plume sur l’un des points d’angle d’un objet sélectionné. • Double-cliquez avec l’outil Plume sur l’un des points de courbe d’un objet sélectionné. • Sélectionnez un point avec l’outil Sous-sélection et appuyez sur la touche Suppr ou Retour arrière. Prolongement d’un trajet existant Vous pouvez utiliser l’outil Plume pour continuer à dessiner un trajet ouvert. Pour reprendre le dessin d’un trajet ouvert : 1 Choisissez l’outil Plume. 2 Cliquez sur le point de terminaison, puis reprenez le tracé. Le curseur de l’outil Plume change de forme pour indiquer que vous ajoutez un trajet. Fusion de deux trajets ouverts Vous pouvez relier deux trajets ouverts (ou plus) afin de constituer un trajet continu. Lorsque vous reliez deux trajets, les attributs de trait, detrame et d’effet les plus élevés deviennent les attributs du trajet fusionné. Pour fusionner deux trajets ouverts : 1 Choisissez l’outil Plume. 2 Cliquez sur le point de terminaison de l’un des trajets. 3 Placez le pointeur sur le point de terminaison de l’autre trajet et cliquez. Utilisation d’objets vectoriels 165 Liaison automatique de trajets ouverts similaires Vous pouvez facilement relier deux trajets ouverts qui partagent des attributs de trait et de trame similaires. Pour relier automatiquement deux trajets ouverts : 1 Sélectionnez un trajet ouvert. 2 Choisissez l’outil Sous-sélection et faites glisser l’un des points de terminaison du trajet à quelques pixels de la fin d’un trajet similaire. Le point de terminaison s’accroche alors à l’autre trajet et les deux ne forment plus qu’un. Modification des trajets Vous disposez de plusieurs méthodes pour modifier les objets vectoriels sous Fireworks. Vous pouvez changer la forme d’un objet en déplaçant, ajoutant ou supprimant les points ou vous pouvez déplacer les poignées des points pour changer la forme de segments de trajets adjacents. Les outils de forme libre permettent de modifier la forme des objets en modifiant leurs trajets directement. Vous pouvez également utiiser les fonctions de trajet pour créer des formes en combinant ou en modifiant les trajets existants. Modification avec les outils vectoriels Certains outils de Fireworks permettent non seulement de déplacer des points et des poignées de point, mais aussi de modifier directement des objets vectoriels. Incurvation et remodelage des objets vectoriels Utilisez l’outil Forme libre pour incurver et remodeler directement les objets vectoriels au lieu de manipuler les points. Vous pouvez pousser ou tirer l’une des parties d’un trajet, quel que soit l’emplacement des points. L’ajout, le déplacement et la suppression de points du trajet s’effectuent automatiquement au fur et à mesure que vous changez la forme de l’objet vectoriel. Longueur spécifiée Outil de forme libre tirant un segment de trajet segment 166 Chapitre 6 Outil de forme libre poussant un segment de trajet et trajet redessiné pour tenir compte de la modification Lorsque vous déplacez le pointeur au-dessus d’un trajet sélectionné, il se transforme en pointeur de poussée ou de traction, en fonction de sa position par rapport au trajet sélectionné. Pointeur Indique L’outil Forme libre est utilisé. L’outil Forme libre est en cours d’utilisation et le pointeur de traction est en position pour tirer sur le trajet sélectionné. L’outil Forme libre est en cours d’utilisation et le pointeur de traction tire sur le trajet sélectionné. L’outil Forme libre est utilisé et le pointeur de poussée est activé. L’outil Reformer la zone est utilisé et le pointeur correspondant est activé. La zone comprise entre le cercle intérieur et le cercle extérieur reforme le trajet selon une intensité inférieure à l’intensité maximale. Lorsque le pointeur se trouve juste au-dessus du trajet, vous pouvez tirer sur celui-ci. Lorsque le pointeur ne se trouve pas positionné juste au-dessus du trajet, vous pouvez pousser sur celui-ci. Vous pouvez également changer la taille du pointeur de poussée ou de traction. Remarque : L’outil Forme libre reporte également la pression exercée sur une tablette Wacom ou compatible. Pour tirer un chemin sélectionné : 1 Choisissez l’outil Forme libre. 2 Positionnez le pointeur directement sur le trajet sélectionné. Le pointeur se transforme en pointeur de traction 3 Dessinez le trajet. Utilisation d’objets vectoriels 167 Pour pousser un chemin sélectionné : 1 Choisissez l’outil Forme libre. Le pointeur se transforme en pointeur de poussée ou de traction. 2 Pointez légèrement à l’écart du trajet. 3 Faites glisser vers le trajet pour exercer une poussée. Poussez sur le trajet sélectionné pour lui donner une nouvelle forme. Pour changer la forme du pointeur de poussée, exécutez l’une des actions suivantes : • Cliquez et maintenez enfoncé le bouton de la souris, puis appuyez sur la touche Flèche droite ou sur 2 pour élargir le pointeur. • Cliquez et maintenez enfoncé la bouton de la souris, puis appuyez sur la touche Flèche gauche ou sur 1 pour réduire le pointeur. • Pour définir la taille du pointeur et la longueur du segment de trajet affecté par ce dernier, désélectionnez tous les objets du document et entrez une valeur comprise entre 1 et 500 dans la zone de texte Taille de le Vérificateur de propriétés. Cette valeur indique la taille du pointeur en pixels. Distorsion de trajets L’outil Reformer la zone permet de tirer sur la zone de tous les trajets sélectionnés à l’intérieur du cercle extérieur du pointeur Reformer la zone. Le cercle intérieur du pointeur correspond à la délimitation de l’outil lorsque l’intensité est maximale. La zone comprise entre le cercle intérieur et le cercle extérieur reforme le trajet selon une intensité inférieure à l’intensité maximale. Le cercle extérieur du pointeur détermine la force d’attraction. Vous pouvez définir son intensité. Remarque : L’outil Reformer la zone reporte également la pression exercée sur une tablette Wacom ou compatible. Pour appliquer une distorsion aux trajets sélectionnés : 1 Choisissez l’outil Reformer la zone du menu déroulant de l’outil Forme iibre. 168 Chapitre 6 2 Faites glisser le pointeur sur les trajets pour les dessiner de nouveau. Pour changer la taille du pointeur Reformer la zone, procédez de l’une des manières suivantes : • Cliquez et maintenez enfoncé le bouton de la souris, puis appuyez sur la touche Flèche droite ou sur 2 pour élargir le pointeur. • Cliquez et maintenez enfoncé la bouton de la souris, puis appuyez sur la touche Flèche gauche ou sur 1 pour réduire le pointeur. • Pour définir la taille du pointeur et la longueur du segment de trajet affecté par ce dernier, désélectionnez tous les objets du document et entrez une valeur comprise entre 1 et 500 dans la zone de texte Taille de le Vérificateur de propriétés. Cette valeur indique la taille du pointeur en pixels. Pour définir l’intensité du cercle intérieur du pointeur Reformer la zone : Entrez une valeur comprise entre 1 et 100 dans la zone de texte Intensité de le Vérificateur de propriétés. Cette valeur indique le pourcentage de l’intensité potentielle du pointeur. L’intensité est directement proportionnelle au pourcentage exprimé. Dessiner de nouveau des trajets Utilisez l’outil Redessiner le trajet pour dessiner de nouveau ou étendre un segment de trajet sélectionné sans modifier les caractéristiques du trait, de la trame et de l’effet du trajet. Pour redessiner ou étendre un segment de trajet sélectionné : 1 Dans le menu déroulant de l’outil Plume, choisissez Redessiner le trajet. 2 Positionnez le pointeur directement sur le trajet. Le pointeur se transforme en pointeur Redessiner le trajet. 3 Faites glisser le pointeur pour redessiner ou étendre le segment de trajet. La portion de trajet à redessiner apparaît en surbrillance rouge. 4 Relâchez le bouton de la souris. Changement de l’aspect en modifiant la pression et la vitesse Vous pouvez changer l’apparence d’un trajet à l’aide des outils Modulateur de trajet. En utilisant une pression ou une vitesse différente, vous pouvez changer les propriétés de trait d’un trajet. Ces propriétés comprennent la taille de trait, l’angle, la quantité l’encre, la dispsersion, la teinte, la luminosité et la saturation. Vous pouvez définir les propriétés affectées par la modulation de trajet en utilisant l’onglet Sensitibilité de la boîte de dialogue Modifier le trait. Vous pouvez également spécifier comment la pression et la vitesse s’appliquent à ces propriétés. Pour plus d’informations sur la définition des options de la boîte de dialogue Modifier le trait, see « Utilisation des traits » à la page 204. Outils Modulateur de trajet Utilisation d’objets vectoriels 169 Division de trajets en objets multiples Utilisez l’outil Cutter pour découper un trajet en deux ou plusieurs Pour couper un trajet sélectionné : 1 Choisissez l’outil Cutter. Remarque : L’utilisation de la gomme des plumes Wacom sélectionne automatiquement l’outil Cutter. 2 Utilisez l’une des méthodes suivantes : • Faites glisser le pointeur sur le trajet. • Cliquez sur le trajet. 3 Désélectionnez le trajet. Modification avec les options de trajet Les options de trajet du menu Modification permettent de créer de nouvelles formes en combinant ou en modifiant des trajets existants. Pour certaines options de trajet, l’ordre d’empilage des objets trajet sélectionnés définit le déroulement de l’opération. Pour plus d’informations sur l’ordre d’empilage des objets sélectionnés, voir la section « Empilage des objets » à la page 128. Remarque : L’utilisation des options de trajet supprime toutes les informations de pression et de vitesse des trajets concernés. Combinaison des objets de trajet Vous pouvez combiner des objets de trajet en un seul objet trajet. Vous pouvez relier les extrémités de deux trajets ouverts pour créer un seul trajet fermé ou joindre plusieurs trajets pour créer un trajet composite. Pour créer un trajet continu à partir de deux trajets ouverts : 1 Choisissez l’outil Sous-sélection. 2 Sélectionnez deux extrémités sur deux trajets ouverts. 3 Choisissez Modifier > Combiner les trajets > Joindre. Pour créer un trajet composite : 1 Choisissez deux ou plusieurs trajets ouverts ou fermés. 2 Choisissez Modifier > Combiner les trajets > Joindre. Pour diviser un trajet composite : 1 Sélectionnez le trajet composite. 2 Choisissez Modifier > Combiner les trajets > Séparer. 170 Chapitre 6 Pour combiner des trajets fermés sélectionnés pour former un trajet englobant toute la zone occupée par les trajets d’origine : Choisissez Modifier > Combiner les trajets > Union. Le trajet résultant a les attributs de trait et de trame de l’objet en arrière-plan. Création d’un objet à partir de l’intersection d’autres objets Vous pouvez créer un objet à partir de l’intersection de deux ou de plusieurs objets à l’aide de la commande Intesection. Pour créer un trajet fermé qui entoure la zone commune à tous les trajets fermés sélectionnés : Choisissez Modifier > Combiner les trajets > intersection. Le trajet résultant a les attributs de trait et de trame de l’objet en arrière-plan. Suppression de portions d’un objet trajet Vous pouvez supprimer des portions d’un objet trajet sélectionné telles qu’elles sont définies par les portions d’un autre objet trajet placé devant et qui le chevauchent. Pour supprimer des portions d’un objet trajet : 1 Sélectionnez l’objet trajet qui définit la zone à supprimer. 2 Choisissez Modifier > Disposer > Premier plan. 3 Maintenez la touche Maj enfoncée et ajoutez à la sélection l’objet trajet dont les portions doivent être supprimées. 4 Choisissez Modifier > Combiner les trajets > Poinçon. Les attributs de trait et de trame restent identiques. Utilisation d’objets vectoriels 171 Recadrage d’un trajet Vous pouvez recadrer un trajet à l’aide de la forme d’un autre trajet. Le trajet au premier plan définit la forme de la zone à recadrer. Pour recadrer un trajet sélectionné : 1 Sélectionnez l’objet trajet qui définit la zone à recadrer. 2 Choisissez Modifier > Disposer > Premier plan. 3 Maintenez la touche Maj enfoncée et ajoutez à la sélection l’objet trajet à recadrer. 4 Choisissez Modifier > Combiner les trajets > Recadrer. L’objet trajet résultant a les attributs de trait et de trame de l’objet trajet en arrière-plan. Simplification d’un trajet Vous pouvez supprimer des points d’un trajet sans altérer la forme de ce dernier. La commande Simplifier permet de supprimer les points redondants du trajet correspondant au nombre que vous définissez. Vous pouvez utilisez cette commande, par exemple, sur une ligne droite contenant plus de deux points (seuls deux points sont nécessaires pour produire une ligne droite) ou sur un trajet contenant des points superposés. La commande Simplifier supprime les points qu ne sont pas nécessaires à la reproduction du trajet que vous avez dessiné. Pour simplifier un trajet sélectionné : 1 Choisissez Modifier > Modifier le trajet > Simplifier. La boîte de dialogue Simplifier s’affiche. 2 Entrez une valeur de simplification, puis cliquez sur OK. Lorsque vous augmentez la valeur de simplification, vous augmentez le degré de modification du trajet par Fireworks pour réduire le nombre de points du trajet. 172 Chapitre 6 Extension d’un trait Vous pouvez convertir le trait d’un trajet sélectionné en trajet fermé. Le trajet qui en résulte crée l’illusion d’un trajet sans trame dont le trait est similaire à la trame de l’objet d’origine. Remarque : L’extension du trait d’un trajet qui s’entrecoupe peut produire des résultats intéressants. Si le trajet d’origine contient une trame, les sections du trajet qui s’entrecoupent ne contiennent pas de tame une fois le trait étendu. Pour étendre un trait d’objet sélectionné : 1 Choisissez Modifier > Modifier le trajet > Etendre le trait pour ouvrir la boîte de dialogue Etendre le trait. 2 Définez la largeur du trajet fermé résultant. 3 Spécifiez un type d’angle : en pointe, rond ou biseauté. 4 Si vous avez choisi la forme en pointe, définissez la limite de pointe, le point auquel un angle en pointe devient automatiquement biseauté. La limite de pointe est le rapport de la longueur du coin sur la largeur du trait. 5 Choisissez une option d’extrémité : bout, carré ou rond, puis cliquez sur OK. Un trajet fermé reprenant la forme de l’original, ainsi que ses attributs de trait et de trame, remplace cet original. Réduction ou extension d’un trajet Vous pouvez réduire ou étendre le trajet d’un objet sélectionné en fonction d’un nombre de pixels. Pour étendre ou réduire un trajet sélectionné : 1 Choisissez Modifier > Modifier le trajet > Rappporter le trajet pour ouvrir la boîte de dialogue Rapporter le trajet. Utilisation d’objets vectoriels 173 2 Choisissez la direction à suivre pour réduire ou étendre le trajet : A l’intérieur réduit le trajet. A l’extérieur étend le trajet. 3 Définissez la largeur séparant le trajet d’origine et le trajet réduit ou étendu. 4 Spécifiez un type d’angle : en pointe, rond ou biseauté. 5 Si vous avez choisi la forme en pointe, définissez la limite de pointe, le point auquel un angle en pointe devient automatiquement biseauté. La limite de pointe est le rapport de la longueur du coin sur la largeur du trait. 6 Cliquez sur OK. Un objet trajet plus petit ou plus grand, avec les mêmes attributs de trait et de trame, remplace l’objet trajet original. 174 Chapitre 6 CHAPITRE 7 Utilisation d’un texte Le programme Fireworks dispose de nombreuses fonctions de traitement de texte normalement réservées aux applications de PAO complexes. Vous pouvez ainsi tirer parti de la diversité des polices et des tailles, régler le crénage, l’espacement, la couleur, l’interlignage, le décalage de la ligne de base, et de bien d’autres options. Associez les fonctions de modification du texte de Fireworks à la gamme étendue de traits, de trames, d’effets et de styles pour donner encore plus de vie à vos graphismes. D’autre part, vous pouvez utiliser le correcteur othographique pour corriger les erreurs orthographiques. Le fait de pouvoir modifier le texte à volonté, y compris après avoir appliqué des effets en direct comme des ombres et des biseaux, implique que vous pouver corriger facilement le texte. Vous pouvez également copier des objets qui incluent du texte et modifier ce texte au niveau des différentes copies. Les fonctions de texte vertical, transformé, attaché aux trajets, converti en trajets et en images permettent d’étendre les possibilités de conception. Vous pouvez conserver les attributs du texte importé au format RTF (Rich Text Format). En outre, lorsque vous importez un document Photoshop contenant du texte, ce dernier reste modifiable. Lors de l’importation, Fireworks gère les polices manquantes en vous demandant de choisir des polices de substitution ou en vous permettant d’importer le texte sous la forme d’une image statique. Saisie de texte Tapez, formatez et modifiez le texte de vos graphismes avec l’outil Texte et les options du Vérificateur de propriétés. L’outil Texte Remarque : Si vous avez réduit la fenêtre du Vérificateur de propriétés, agrandissez-la en cliquant sur la flèche d’extension figurant dans l’angle inférieur droit pour afficher toutes les propriétés de texte. Vérificateur de propriétés lorsque l’outil texte est sélectionné 175 Création de blocs de texte Le texte des documents Fireworks est affiché dans un rectangle entouré de poignées, appelé bloc de texte. Pour saisir du texte : 1 Choisissez l’outil Texte. Le Vérificateur de propriétés affiche les options de l’outil Texte. 2 Choisissez la couleur, la police, la taille, l’espacement des caractères ou tout autre paramètre en fonction de vos besoins. 3 Utilisez l’une des méthodes suivantes : • Cliquez dans le document, à l’endroit où vous souhaitez commencer le bloc de texte. Cette opération crée un bloc de texte à redimensionnement automatique. • Faites glisser la souris pour tracer un bloc de texte. Cette opération crée un bloc de texte de largeur fixe. Pour plus d’informations sur les différents types de blocs de texte, voir « Utilisation de blocs de texte à dimensionnement automatique et de largeur fixe » à la page 177. 4 Tapez le texte. Pour entrer un saut de paragraphe, appuyez sur Entrée. 5 Si nécessaire, sélectionnez le texte dans le bloc après l’avoir tapé et reformatez-le. 6 Une fois le texte entré, procédez de l’une des manières suivantes : • Cliquez en dehors du bloc de texte. • Choisissez un autre outil dans le panneau Outils. • Appuyez sur Echap. Déplacement des blocs de texte Vous pouvez sélectionner un bloc de texte et le transférer vers n’importe quel emplacement dans le document, à l’instar de n’importe quel autre objet. Vous pouvez également déplacer des blocs de texte lorsque vous faites glisser la souris pour les créer. Pour déplacer un bloc de texte : Faites-le glisser jusqu’à son nouvel emplacement. 176 Chapitre 7 Pour déplacer un bloc de texte lorsque vous faites glisser la souris pour le créer : 1 Maintenez le bouton de la souris enfoncé ainsi que la barre d’espacement et faites glisser le bloc de texte vers un autre emplacement du doucment. 2 Relâchez la barre d’espacement pour continuer à tracer le bloc de texte. Utilisation de blocs de texte à dimensionnement automatique et de largeur fixe Le programme Fireworks utilise des blocs de texte à dimensionnement automatique et des blocs de texte de largeur fixe. Un bloc de texte à dimensionnement automatique s’agrandit lorsque vous tapez du texte. Si vous effacez une partie du texte, le bloc se réduit pour être ajusté au texte. Des blocs de texte à dimensionnement automatique sont créés par défaut lorsque vous cliquez sur le document avec l’outil Texte et saisissez du texte. Les blocs de largeur fixe permettent de contrôler la largeur des lignes de texte. Des blocs de largeur fixe sont créés par défaut lorsque vous tracez un bloc de texte à l’aide de l’outil Texte. Lorqque le pointeur Texte est actif dans un bloc de texte, un cercle ou un carré vide apparaît dans l’angle supérieur droit du bloc de texte. Le cercle indique qu’il s’agit d’un bloc de texte à dimensionnement automatique et le carré, qu’il s’agit d’un texte de largeur fixe. Lorsque vous cliquez dans l’angle, vous passer de l’un à l’autre. Indicateur de largeur fixe Indicateur de dimensionnement automatique Bloc de texte texe de largeur fixe et bloc de texte à dimensionnement automatique Pour convertir un bloc de texte en bloc de texte de largeur fixe ou en bloc de texte à dimensionnement automatique : 1 Double-cliquez sur le bloc de texte. 2 Double-cliquez sur le cercle ou le carré dans l’angle supérieur droit du bloc de texte. Le bloc de texte est converti en conséquence. Pour convertir un bloc de texte sélectionné en bloc de texte de largeur fixe en le redimensionnant : Faites glisser une poignée de redimensionnement. Cette opération convertit le bloc de texte à dimensionnement automatique en bloc de texte de largeur fixe. Modification d’un texte Vous pouvez modifier tous les aspects du texte, ce qui inclut la taille, la police, l’espacement, l’interlignage et le décalage de la ligne de base au niveau du bloc de texte. Lorsque vous modifiez un texte, ses attributs de trait, de trame et d’effet sont dessinés de nouveau en conséquence. Utilisation d’un texte 177 Pour changer les attributs d’un bloc de texte, utilisez le Vérificateur de propriétés. Si vous avez réduit la fenêtre du Vérificateur de propriétés, cliquez sur la fèche d’extension dans l’angle inférieur droit pour afficher toutes les propriétés de texte. Vérificateur de propriétés lorsqu’un texte est sélectionné Vous pouvez également utiliser l’ Editeur de texte et les commandes du menu Texte pour changer un texte, mais le Vérificateur de propriétés permet de changer plus rapidement les attributs du texte et de modifier le texte avec lus de précision que les deux autres options. Pour plus d’informations sur l’Editeur de texte, voir « Utilisation de l’Editeur de texte » à la page 193. Remarque : Les modifications que vous effectuez au cours d’une session de modification de texte correspondent globalement à une seule modification et sont donc toutes annulées lorsque vous utilisez la commande Annuler. Si vous choisissez Edition > Annuler lorsque vous modifiez un texte, vous annulez toutes les modifications apportées depuis le moment ou vous avez double-cliqué sur le bloc de texte pour le modifier. Pour modifier un texte : 1 Sélectionnez le texte : • Cliquez sur le bloc de texte avec l’outil Pointeur ou Sous-sélection pour le sélectionner en totalité. Pour sélectionner plusieurs blocs de texte simultanément, maintenez la touche Maj enfoncée et sélectinnez les blocs appropriés. • Double-cliquez sur un boc de texte avec l’outil Pointeur ou Sous-sélection et sélectionnez du texte. • Cliquez dans un bloc de texte avec l’outil Texte et sélectionnez du texte. 2 Effectuez les modifications appropriées. Pour plus d’informations sur la modification des attributs de texte, voir « Choix d’une police, d’une taille et d’un style » à la page 178, « Application de couleurs au texte » à la page 179, « Définition du crénage » à la page 181, « Définition de l’interlignage » à la page 182, « Définition de l’orientation » à la page 182, « Définition de l’alignement du texte » à la page 183 et « Mise en retrait d’un texte » à la page 184. 3 Procédez de l’une des manières suivantes pour appliquer les modifications : • Cliquez en dehors du bloc de texte. • Choisissez un autre outil dans le panneau Outils. • Appuyez sur Echap. Choix d’une police, d’une taille et d’un style Pour changer les attributs de police, de taille et de style du texte d’un bloc de texte, utilisez le Vérificateur de propriétés. Remarque : Pour pouvoir utiliser les polices Type 1 sur un ordinateur Macintosh, il est nécessaire d’installer Adobe Type Manager version 4 ou supérieure. Ce programme n’est pas nécessaire pour OS X. 178 Chapitre 7 Pour changer la police, la taille et le style du texte sélectionné utilisez le Vérificateur de propriétés : 1 Pour changer la police, choisissez-en une dans le menu déroulant Police. 2 Pour changer la taille de police, déplacez la glissière du menu déroulant de tailles de police ou entrez une valeur dans la zone de texte. La taille de police est exprimée en points. 3 Pour appliquer le style gras, italiques ou souligné, cliquez sur le bouton de style correspondant. Remarque : Lorsque vous transformez un bloc de texte en bloc de texte à dimensionnement automatique, la police reste inchangée dans le Vérificateur de propriétés lorsque le texte est sélectionné. Si vous changez la taille de police d’un texte transformé, vous changez la taille du texte, mais uniquement par rapport à la transformation. Application de couleurs au texte La couleur du texte est contrôlée par la case Couleur de la trame. Par défaut le texte est noir et ne comporte pas d’attributs de trait. Vous pouvez changer la couleur de l’ensemble du texte d’un bloc de texte sélectionné ou d’une partie du texte. L’outil Texte conserve la couleur de texte en cours d’un bloc de texte à l’autre. L’outil Texte conserve la couleur de texte en cours indépendamment de la couleur de remplissage des autres outils. Lorsque vous utilisez un autre outil après avoir utilisé l’outil Texte, les derniers paramètres de trait et de remplissage appliqués avant l’utilisation de l’outil texte sont utilisés. De même, lorsque vous réutilisez l’outil texte, la dernière couleur de remplissage de l’outil Texte est utilisée et aucun trait n’est appliqué. La couleur de l’outil Texte reste active d’un document à l’autre ou lorsque vous fermez et rouvrez Fireworks. Vous pouvez ajouter un trait et des effets en direct à l’ensemble d’un bloc de texte sélectionné, mais pas au texte sélectionné dans le bloc. Les caractéristiques de trait et les effets en direct appliqués à un bloc de texte sont mises à jour lorsque vous modifiez le texte du bloc de texte, mais l’outil Texte ne conserve pas les caractéristiques de trait ou les effets en direct si vous créez un bloc de texte. Pour plus d’informations, voir « Applications de traits, de trames et d’effets à un texte » à la page 186. Application d’une couleur à l’ensemble du texte des blocs de texte sélectionnés Vous pouvez appliquer une couleur à l’ensemble du texte des blocs de texte sélectionnés à l’aide du Vérificateur de propriétés, d’une zone Couleur de la trame ou de l’outil Pipette. Vous pouvez également l’une des méthodes suivantes pour définir la couleur de texte dans l’outil Texte. Utilisation d’un texte 179 Pour définir la couleur de l’ensemble du texte d’un bloc de texte sélectionné, procédez de l’une des manières suivantes : • Cliquez sur la zone Couleur de la trame du Vérificateur de propriétés et choisissez une couleur dans la source de couleurs couleurs ou échantillonez une couleur n’importe où dans l’écran à l’aide du pointeur de la pipette lorsque le puits de couleur est ouverts. Zone Couleur de la trame Fenêtre contextuelle Zone Couleur de trait Couleur de la trame Zone Couleur de la trame dans le Vérificateur de propriétés • Cliquez sur la zone Couleur de la trame du panneau Outils et choisissez une couleur dans la source de couleurs ou échantillonnez une couleur n’importe où dans l’écran à l’aide du pointeur de pipette pendant que la source de couleurs Couleur de la trame est ouvert. • Cliquez sur l’icône située à côté de la zone Couleur de la trame du panneau Outils, chosissez l’outil pipette, puis cliquez pour échantillonner une couleur n’importe où dans un ocument ouvert. La couleur de la zone Couleur de la trame du panneau Outils change pour refléter la couleur que vous avez échantillonnée à l’aide du pointeur Pipette ou de l’outil Pipette ; la couleur du texte sélectionné change également. Application d’une couleur à un texte sélectionné dans un bloc de texte Vous pouvez changer la couleur du texte sélectionné dans un bloc de texte à l’aide du Vérificateur de propriétés ou de la zone Couleur de la trame. Vous ne pouvez pas utiliser l’outil Pipette pour modifier la couleur du texte sélectionné. Remarque : Si vous essayez d’appliquer un trait ou des effets en direct au texte sélectionné d’un bloc de texte, l’ensemble du bloc de texte est sélectionné automatiquement. Pour appliquer une couleur de texte uniquement au texte sélectionné dans un bloc de texte, procédez de l’une des manières suivantes : • Cliquez sur la zone de couleur de texte du Vérificateur de propriétés et choisissez une couleur dans la source de couleurs ou échantillonnez une couleur n’importe où dans l’écran à l’aide du pointeur Pipette pendant que la source de couleurs de texte est ouvert. 180 Chapitre 7 • Cliquez sur la zone Couleur de la trame du panneau Outils et choisissez une couleur dans la source de couleurs ou échantillonnez une couleur n’importe où dans l’écran à l’aide du pointeur Pipette pendant que le puits de couleur de trame est ouvert. Définition du crénage Le crénage permet d’augmenter ou de réduire la distance entre deux lettres pour des raisons d’esthétisme. La plupart des polices incluent des informations permettant de réduire automatiquement l’espace entre certaines paires de lettres telles que TA ou Va. La fonction de crénage automatique Fireworks utilise les informations de crénage d’une police pour afficher le texte, mais vous pouvez la désactiver sur des tailles de points plus petites ou lorsque le texte n’utilise pas l’anticrénelage. Le crénelage est mesuré sous la forme d’un pourcentage. Utilisez le Vérificateur de propriétés ou le clavier pour définir le crénelage. Pour désactiver le crénage automatique : Dans le Vérificateur de propriétés, désélectionnez la fonction de crénelage automatique. Si vous avez réduit la fenêtre du Vérificateur de propriétés, cliquez sur la flèche d’extension dans l’angle inférieur droit pour afficher toutes les propriétés. Pour définir le crénage : 1 Pour sélectionner le texte à créneler, procédez de l’une des manières suivantes : • Cliquez entre deux caractères avec l’outil Texte. • Utilisez l’outil Texte pour sélectionner les caractères à modifier. • Utiisez l’outil Pointeur pour sélectionner l’ensemble d’un texte. Appuyez sur la touche MAJ et cliquez pour sélectionner plusieurs blocs de texte. 2 Utilisez l’une des méthodes suivantes : • Dans le Vérificateur de propriétés, déplacez la glissière du menu déroulant Crénage ou entrez un pourcentage dans la zone de texte. Pourcentage de crénage Glissière du menu déroulant Crénage Une valeur nulle correspond à un crénage normal. Les valeurs positives écartent les lettres et les valeurs négatives les rapprochent. • Maintenez la touche Ctrl (Windows) ou la touche Commande (Macintosh) enfoncée et appuyez sur la touche Flèche gauche ou Flèche droite du clavier. La touche Flèche gauche augmente l’espace entre les lettres de 1 % et la touche Flèche droite rapproche les lettre de 1 %. Conseil : Maintenez les touches Maj et Ctrl (Windows) ou la touche Commande (Macintosh) enfoncées et appuyez sur la touche Flèche gauche ou Flèche droite du clavier pour ajouter le crénage par pas de 10 %. Utilisation d’un texte 181 Définition de l’interlignage L’interlignage conditionne l’espace séparant les lignes d’un paragraphe. L’interlignage peut être mesuré en pixels ou sous la forme d’un pourcentage de la taille en points utilisée pour séparer les lignes de base. Vous pouvez utiliser le Vérificateur de propriétés ou le clavier pour définir l’interlignage. Options d’interlignage du Vérificateur de propriétés Pour définir l’interlignage d’un texte sélectionné dans le Vérificateur de propriétés : 1 Dans le Vérificateur de propriétés, déplacez le curseur du menu déroulant Interlignage ou entrez une valeur dans la zone de texte. (valeur par défaut : 100 %). 2 Pour changer le type d’unité, choisissez % ou px (pixels) dans le menu déroulant Unités d’interlignage. Pour définir l’interlignage du texte sélectionné à l’aide du clavier : Maintenez enfoncée la touche Ctrl (Windows) ou Commande (Macintosh) tout appuyant sur la touche Flèche Haut ou Flèche Bas. La touche Flèche haut augmente l’espace entre les lignes et la touche Flèche Bas, le diminue. Conseil : Maintenez enfoncées les touches Maj et Ctrl (Windows) ou la touche Commande (Macintosh) tout en appuyant sur la touche Flèche haut ou Flèche Bas pour ajuster l’interligne pas par de 10. Définition de l’orientation Vous pouvez orienter un texte horizontalement ou verticalement. Par défaut, le texte est orienté à l’horizontale. Orientations horizontale et verticale Le texte peut également s’enchaîner de droite à gauche ou de gauche à à droite. Texte enchaîné de gauche à droite et de droite à gauche 182 Chapitre 7 Dans Fireworks, vous définissez les orientations horizontale et verticale ainsi que la direction de l’enchaînement du texte dans le Vérificateur de propriétés. Ces paramètres s’appliquent à l’ensemble du bloc de texte. Pour définir l’orientation d’un bloc de texte sélectionné : 1 Cliquez sur le bouton Orientation du texte dans le Vérificateur de propriétés. 2 Sélectionnez une option d’orientation dans le menu déroulant : De gauche à droite horizontal est l’orientation par défaut du texte de la majorité des langues dans Fireworks. Cette valeur oriente le texte horizontalement et affiche les caractères de gauche à droite. De droite à gauche horizontal oriente le texte horizontalement et affiche les caractères de droite à gauche. Cette option est utile pour afficher un texte dans des langues pour lesquelles le texte s’enchaîne de droite à gauche, telles que l’hébreu ou l’arabe. Gauche à droite vertical oriente le texte verticalement. Si vous appliquez cette option à des lignes de texte séparées par un retour à la ligne matériel ou logiciel, chaque ligne du texte s’affiche sous la forme d’une colonne. Les colonnes s’enchaînent de la gauche vers la droite. Droite à gauche vertical oriente le texte verticalement. Des lignes de texte séparées par des retours chariots s’affichent sous forme de colonnes qui s’enchaînent de la droite vers la gauche. Cette option est utile pour afficher du texte dans des langues dans lequelles le texte s’enchaîne de droite à gauche dans des colonnes, telles que le japonais. Remarque : Le texte vertical s’enchaîne toujours du haut vers le bas. Si vous choisissez l’une des options d’orientation verticale, seul l’ordre des colonnes de texte est affecté ; celui des caractères ne change pas. Définition de l’alignement du texte L’alignement détermine la position des lignes de texte d’un paragraphe par rapport aux bords gauche et droit d’un bloc de texte. L’alignement horizontal aligne le texte par rapport aux bords gauche et droit du bloc de texte. L’alignement vertical aligne le texte par rapport aux bords supérieur et inférieur du bloc de texte. Pour plus d’informations sur l’orientation horizontale ou verticale, voir « Définition de l’orientation » à la page 182. Vous pouvez aligner le texte sur le bord gauche ou droit du bloc de texte, le centrer au sein du bloc ou le justifier pour l’aligner sur les bords gauche et droit. Par défaut, le texte horizontal est aligné sur la gauche. Un texte vertical peut être aligné sur le bord supérieur ou le bord inférieur du bloc de texte, centré dans le bloc de texte ou justifié coplètement entre les bords supérieur et inférieur. Pour étirer le texte ou pour le placer dans un espace spécifique, choisissez le type d’alignement permettant de remplir le bloc de texte à l’horizontale ou à la verticale en fonction de l’orientation du texte. Texte étiré à l’horizontale pour remplir un bloc de texte Utilisation d’un texte 183 Les commandes d’alignement apparaissent dans le Vérificateur de propriétés lorsque le texte ou le bloc de texte est sélectionné. Options d’alignement de texte dans le Vérificateur de propriétés Pour définir l’alignement d’un texte : 1 Sélectionnez le texte. 2 Cliquez sur un bouton d’alignement dans le Vérificateur de propriétés. Mise en retrait d’un texte Vous pouvez mettre en retrait la première ligne d’un paragraphe à l’aide du Vérificateur de propriétés. La mise en retrait est exprimée en pixels. Option de mise en retrait de paragraphe dans le Vérificateur de propriétés Si vous avez réduit la fenêtre du Vérificateur de propriétés, cliquez sur la flèche d’extension dans l’angle inférieur droit pour afficher toutes les propriétés. Pour mettre en retrait la première ligne des paragraphes sélectionnés : Dans le Vérificateur de propriétés, faites glisser le curseur du menu déroulant Renforcement du paragraphe ou entrez une valeur dans la zone de texte. Définition de l’espacement des paragraphes Vous pouvez définir l’espacement avant et après les paragraphes à l’aide du Vérificateur de propriétés. L’espacement des paragraphes est exprimé en pixels. Options d’espacement de paragraphes dans le Vérificateur de propriétés Si vous avez réduit la fenêtre du Vérificateur de propriétés, cliquez sur la flèche d’extension dans l’angle inférieur droit pour afficher toutes les propriétés. Pour définir l’espacement qui précède des paragraphes sélectionnés : Dans le Vérificateur de propriétés, déplacez le curseur du menu déroulante Espace avant un paragraphe ou entrez une valeur dans la zone de texte. Pour définir un espace après des paragraphes sélectionnés : Dans le Vérificateur de propriétés, déplacez le curseur du menu déroulante Espace après un paragraphe ou entrez une valeur dans la zone de texte. 184 Chapitre 7 Lissage du bord des caractères Pour lisser le bord des caractères, vous leur appliquez un anticrénelage. Cela permet de fusionner les bords du texte avec l’arrière-plan, ce qui le rend plus nette et lisible lorsque vous utilisez de grandes polices. Utilisez le Vérificateur de propriétés pour définir l’anticrénelage. Si vous avez réduit la fenêtre du Vérificateur de propriétés, cliquez sur la flèche d’extension dans l’angle inférieur droit pour afficher toutes les propriétés. Options d’anticrénelage dans le Vérificateur de propriétés L’anticrénelage s’applique à l’ensemble des caractères d’un bloc. Pour lisser le texte sélectionné : Dans le Vérificateur de propriétés, choisissez une option dans le menu déroulant Anticrénelé : Net, Fort, Lissé ou Sans anticrénelage. Remarque : Lorsque vous ouvrez des fichiers vectoriels, tels que des fichiers FreeHand, sous Fireworks, le texte est lissé. Vous pouvez changer cet attribut en utilisant l’ Vérificateur de propriétés. Pour plus de détails sur l’ouverture de fichiers vectoriels, voir « Utilisation d’autres applications graphiques vectorielles » à la page 396. Augmentation et réduction de la largeur des caractères Vous pouvez augmenter ou réduire la largeur d’un texte horizontal à l’aide de l’option Echelle horizontale du Vérificateur de propriétés. L’échelle horizontale est exprimée sous la forme d’un pourcentage. 100 % est la valeur par défaut. Option Echelle horizontale dans le Vérificateur de propriétés Si vous avez réduit la fenêtre du Vérificateur de propriétés, cliquez sur la flèche d’extension dans l’angle inférieur droit pour afficher toutes les propriétés. Pour augmenter ou réduire la largeur des caractères sélectionnés : Dans l’Insecteur des propriétés, déplacez le curseur du menu déroulant Echelle horizontale ou entrez une valeur dans la zone de texte. Si vous déplacez le curseur au-delà de la valeur 100 %, vous augmentez la largeur et la hauteur des caractères et les réduisez si vous déplacez le curseur endeçà de la valeur 100 %. Utilisation d’un texte 185 Définition du décalage de la ligne de base Le décalage de la ligne permet de placer le texte en dessous ou au-dessus de sa ligne de base normale. S’il n’existe pas de décalage de ligne de base, le texte repose sur la ligne de base. Vous pouvez utiliser le décalage de la ligne de base pour créer des indices et des exposants. Les commandes de décalage de la ligne de base se trouvent dans le Vérificateur de propriétés. Le décalage de la ligne de base est exprimé en pixels. Options de décalage de la ligne de base dans le Vérificateur de propriétés Pour définir le décalage de la ligne de base d’un texte sélectionné : Dans le Vérificateur de propriétés, déplacez le curseur du menu déroulant Décalage de la ligne de base ou entrez une valeur d’indice ou d’exposant dans la zone de texte. Si vous entrez des valeurs positives, vous créez des exposants. Si vous entrez des valeurs négatives, vous créez des indices. Applications de traits, de trames et d’effets à un texte Vous pouvez appliquer des traits, des trames et des effets au texte de la même façon que pour les autres objets. Vous pouvez appliquer n’importe quel style du panneau des styles à un texte, même s’il ne s’agit pas d’un style de texte. Vous pouvez également créer un style en enregistrant des attributs de texte. Une fois le texte créé, vous pouvez le modifier dans Fireworks. Les traits, les trames, les effets et les styles sont mis automatiquement à jour pendant l’édition. Texte avec des options de trait, de trame, d’effet et de style Vous pouvez appliquer une couleur de texte unie à un texte sélectionné d’un bloc de texte. Toutefois, les attributs de trait, d’effets en direct et de trame non unie, tels que le dégradés, sont appliqués à l’ensemble du texte du bloc et pas seulement au texte sélectionné. Pour plus d’informations sur les traits et les trames, voir Chapitre 8, « Application de couleurs, de traits et de trames », à la page 195. Pour pus d’informations sur l’utilisation des styles, voir « Utilisation des styles » à la page 255. Pour plus d’informations sur les effets en direct, voir « Application directe des effets » à la page 219. L’outil Texte ne conserve pas les paramètres de trait ou d’effets en direct lorsque vous créez un bloc de texte. Toutefois, vous pouvez enregistrer les attributs de trait, de trame et d’effet direct que vous appliquez au texte pour les réutiliser sous la forme d’un style dans le panneau des styles. L’enregistrement d’attributs comme styles enregistre les attributs mais pas le texte. 186 Chapitre 7 Pour enregistrer les attributs de texte en tant que style : 1 Créez un objet texte et appliquez les attributs appropriés. 2 Sélectionnez l’objet texte. 3 Choisissez Nouveau style dans le menu Options du panneau des styles. 4 Choisissez les propriétés du nouveau style et nommez-le. 5 Cliquez sur OK. Rattachement de texte à un trajet Pour libérer le texte des restrictions des blocs de texte rectangulaires, vous pouvez dessiner un trajet et y attacher du texte. Le texte suit la forme du trajet et reste modifiable. Pour plus d’informations sur le traçage de différents types de trajets, voir « Dessin de formes élémentaires » à la page 153. Lorsque vous attachez temporairement du texte à un trajet, ce dernier perd ses attributs de trait, de trame et d’effet. Les attributs de trait, de trame et d’effet appliqués par la suite, le sont au texte et non pas au trajet. Lorsque vous détachez du texte d’un trajet, le trajet retrouve ses attributs de trait, de trame et d’effet. Remarque : Le rattachement d’un texte contenant des retours charits matériels ou logiciels à un trajet peut produire des résultats inattendus. Si le texte rattaché à un trajet ouvert est plus long que ce dernier, les caractères excédentaires apparaissent sur la ligne suivante et prennent la même forme que le trajet. Le texte de trajet qui s’affiche sur la ligne suivante et qui prend la forme du trajet Pour placer du texte sur un trajet : 1 Maintenez enfoncée la touche Maj, sélectionnez un bloc de texte et un trajet. 2 Choisissez Texte > Attacher au trajet. Pour détacher le texte d’un trajet sélectionné : Choisissez Texte > Détacher du trajet. Modification des trajets et des textes attachés aux trajets Vous pouvez modifier le texte que vous avez attaché à un trajet. En outre, vous pouvez modifier la forme du trajet. Utilisation d’un texte 187 Pour modifier un texte attaché à un projet, procédez de l’une des manières suivantes : • Double-cliquez sur l’objet texte sur trajet avec l’outil Pointeur ou Sous-sélection. • Choisissez l’outil Texte et sélectionnez le texte à modifier. Pour modifier la forme du trajet : 1 Choisissez Texte > Détacher du trajet. 2 Modifiez le trajet. 3 Replacez le texte sur le trajet. Modification de l’orientation et la direction d’un texte dans un trajet L’ordre de dessin du trajet détermine la direction du texte qui lui est attaché. Par exemple, lorsque vous dessinez un trajet allant de droite à gauche, le texte attaché est à l’envers et retourné. Texte attaché à un trajet dessiné de droite à gauche Vous pouvez inverser la direction ou changer l’orientation du texte attaché à un trajet. Vous pouvez également changer le point de départ du texte sur un trajet. Pour changer l’orientation du texte d’un trajet sélectionné : Choisissez Texte > Orientation et sélectionnez une orientation. Pour inverser la direction du texte sur un trajet sélectionné : Choisissez Texte > Inverser la direction. Texte enroulé autour d’un trajet Texte vertical sur un trajet Texte incliné verticalement autour d’un trajet 188 Chapitre 7 Texte incliné horizontalement autour d’un trajet Pour déplacer le point de départ d’un texte rattaché à un trajet : 1 Sélectionnez l’objet texte sur un trajet. 2 Dans le Vérificateur de propriétés, entrez une valeur dans la zone de texte Décalage du texte. Appuyez sur Entrée. Remarque : Si vous avez réduit la fenêtre du Vérificateur de propriétés, cliquez sur la flèche d’extension dans l’angle inférieur droit pour afficher toutes les propriétés. Transformation du texte Les blocs de texte sont transformés de la même façon que les autres objets. Vous pouvez mettre le texte à l’échelle, le faire pivoter, l’incliner et le retourner pour créer des effets inédits. Vous pouvez également modifier le texte transformé, mais si vous le transformez considérablement, vous risquez de le rendre illisible. La transformation du texte n’affecte pas sa taille en points. Lorsque vous transformez un bloc de texte et que le texte est redimensionné ou mis à l’échelle, la taille de police existante ne change pas dans le Vérificateur de propriétés lorsque vous sélectionnez le texte. Si vous changez la taille de police d’un texte transformé, vous changez la taille du texte, mais uniquement par rapport à la transformation. Pour plus d’informations, voir « Transformation et distorsion d’objets sélectionnés et sélections » à la page 123. Conversion de texte en trajets Vous pouvez convertir un texte en trajets, puis modifier la forme des lettres comme vous le feriez pour n’importe quel autre objet vectoriel. Tous les outils de modification des vecteurs sont disponibles lorsque vous avez converti le texte en trajets. Cependant, vous perdez la possibilité de modifier le texte avec l’ Editeur de texte. Pour convertir le texte sélectionné en trajets : Sélectionnez Texte > Convertir en trajets. Le texte converti en trajets conserve tous ses attributs visuels, mais ne peut être modifié que sous forme de trajets. Vous pouvez modifier le texte converti sous la forme d’un groupe ou modifier chaque caractère converti. Pour convertir des trajets de caractères convertis individuellement, procédez de l’une des manières suivantes : • Sélectionnez le texte converti, à l’aide de l’outil Sous-sélection. Utilisation d’un texte 189 • Sélectionnez le texte converti et choisissez Modifier > Dissocier. Vous pouvez modifier les trajets de caractères convertis individuellement à l’aide des outils de modification vectorielle. Pour plus d’informations sur la modification des trajets, voir « Modification des trajets » à la page 166. Vous pouvez créer un trajet composite à partir d’un objet texte créé par la conversion d’un texte en trajets. Pour créer un trajet composite à partir d’un groupe de trajets créé par la conversion de texte en trajets : 1 Définissez le groupe de trajets. 2 Choisissez Modifier > Dissocier. 3 Choisissez Modifier > Combiner les trajets > Joindre. Importation de texte Utilisez le texte en provenance d’autres documents en utilisant la méthode glisser-déposer ou copier-coller. Vous pouvez également ouvrir ou importer un fichier texte dans Fireworks. Fireworks permet d’importer des fichiers texte RTF (rich text format) et ASCII (texte ordinaire). Pour ouvrir ou importer un fichier texte : 1 Choisissez Fichier > Importer ou Fichier > Ouvrir. 2 Ouvrez le dossier contenant le fichier. 3 Choisissez le fichier et cliquez sur OK. Texte Photoshop Vous pouvez ouvrir ou importer un fichier Photoshop conteneant du texte ou vous pouvez copiercoller ou glisser-déposer du texte d’un fichier Photoshop vers le document Fireworks actif. Pour plus d’informations, voir « Insertion de graphiques Photoshop dans Fireworks » à la page 406. Fichiers RTF Lorsque vous importez du texte au format RTF, Fireworks préserve les attributs suivants : • • • • • • • Police, taille et style (gras, italique, souligné) ; Alignement (à gauche, à droite, centré, justifié) ; Interlignage ; Décalage de la ligne de base ; Crénage ; Echelle horizontale ; Couleur du premier caractères. Les autres informations RTF sont ignorées. Il est impossible d’importer du texte RTF dans Fireworks par copier-coller ou glisser-déposer. 190 Chapitre 7 Texte ASCII Toutes les méthodes d’importations sont à votre disposition pour les fichiers ASCII. Le texte ASCII importé reçoit les attributs de police par défaut, 12 pixels de hauteur, et utilise la couleur de trame active. Traitement des polices manquantes Si vous ouvrez un document dans Fireworks comportant des polices qui ne sont pas installées sur votre ordinateur, Fireworks vous demande si vous voulez remplacer les polices ou conserver l’apparence. Cela est particulièrement utile si vous partagez des fichers avec des utilisateurs sur d’autres ordinateurs qui n’utilisent pas les mêmes polices. L’option Conserver l’apparence remplace le texte par une image bitmap qui présente le texte avec sa police d’origine. Vous pouvez toujours modifier le texte, mais dans ce cas Fireworks remplace l’image bitmap par une police installée sur votre système. Dans ce cas, l’apparence du texte peut changer. Choisissez les polices devant remplacer les polices non installées. Une fois les polices remplacées, le document s’ouvre pour vous permettre de modifier le texte et de l’enregistrer. Lorsque le fichier est ouvert de nouveau sur un ordinateur disposant des polices d’origine, Fireworks utilise ces polices. Pour sélectionner une police de remplacement : 1 Ouvrez un document avec des polices manquantes. La boîte de dialogue Polices manquantes s’ouvre. 2 Choisissez une police dans la liste Remplacer les polices manquantes. 3 Utilisez l’une des méthodes suivantes : • Choisissez une police de remplacement dans la liste. • Indiquez que vous voulez afficher le texte dans la police par défaut du système. • Pour laisser la police manquant telle quelle, cliquez sur Pas de modification. 4 Cliquez sur OK. Ainsi, lorsque vous ouvrez un document comportant la même police, la boîte de dialogue Polices manquantes affiche les polices que vous avez choisies. Correction orthographique Utilisez la commande Vérifier l’orthographe du menu Texte pour vérifier l’orghographe des blocs de texte ou tout le texte d’un document. Pour vérifier l’orthographe d’un texte : 1 Sélectionnez au moins un bloc de texte. Si vous ne sélectionnez pas de bloc de texte, l’ensemble du document est vérifié. 2 Choisissez Texte > Vérifier l’orthographe. Utilisation d’un texte 191 3 Si vous n’avez pas encore vérifié l’orthographe dans Fireworks, une boîte de dialogue s’ouvre pour vous demander de choisir un dictionnaire. Cliquez sur OK pour fermer la boîte de dialogue. Choisissez une langue dans la liste Dictionnaire, puis cliquez sur OK. Si vous ne choisissez pas une lange, un message vous demande de choisir un dictionnaire de langue chaque fois que vous vérifiez l’orthographe d’un document. Remarque : L’option Macromedia.tlx est toujours sélectionnée dans la partie supérieure de la iiste des dictionnaires. Pour plus d’informations sur cette option, voir « Personnalisation de la vérification orthographique » à la page 192. 4 La boîte de dialogue Vérifier l’orthographe s’affiche. Pour chaque mot trouvé, choisissez l’option appropriée : Ajouter à personnel ajoute Ignorer ignore le mot inconnu à votre dictionnaire personnel. l’occurrence en cours du mot inconnu. Ignore tout ignore toutes les occurrences du mot inconnu lors de la vérification orthographique. Lors de la vérification suivante, le mot inconnu sera de nouveau identifié. Modifier remplace l’occurrence en cours du mot inconnu par le texte que vous tapez dans la zone Remplacer par ou la sélection dans la liste des suggestions. Remplacer tout remplace Supprimer supprime toutes les occurrences du mot inconnu de la même manière. une occurrence lorsqu’un doublon de mot est détecté. Lorsque Fireworks a terminé de vérifier l’orthographe d’un document, la boîte de dialogue Vérifier l’orthographe se ferme et un message apparaît pour indiquer que la vérification orthographique est terminée. Personnalisation de la vérification orthographique Vous pouvez personnaliser la manière dont Fireworks vérifie l’orthographe en utilisant la boîte de dialogue installation du correcteur orthographique. Cette boîte de dialogue vous permet de définir les dictionnaires de langue que Fireworks doit utiliser pour vérifier l’orthographe et modifier les mots de votre dictionnaire personnel. Vous pouvez également modifier les éléments que Fireworks doit vérifier, notamment les adresses Internet et de fichier. Pour personnaliser la vérification orthographique dans Fireworks : 1 Utilisez l’une des méthodes suivantes : • Choisissez Texte > Installation du correcteur orthographique. • Cliquez sur le bouton Configurer de la boîte de dialogue Vérifier l’orthographe. 2 Choisissez les options nécessaires dans la boîte de dialogue Installation du correcteur orthographique : • Choisissez les dictionnaires de langue. Remarque : L’option Macromedia.tlx est toujours sélectionnée dans la partie supérieure de la iiste des dictionnaires. Il s’agit du fichier contenant votre dictionnaire orthographique personnalisé. • Recherchez un dictionnaire personnalisé en cliquant sur l’icône de dossier située à côté du champ Chemin d’accès du dictionnaire. 192 Chapitre 7 • Modifiez le dictionnaire personnalisé en cliquant sur le bouton Modifier le dictionnaire personnel et en ajoutant, supprimant ou modifiant les mots de la liste. • Choisissez les types de mots à inclure dans la vérification orthographique. 3 Cliquez sur OK. Utilisation de l’Editeur de texte Dans Fireworks 4 et les versions précédentes, le texte était créé et modifié à l’aide de l’Editeur de texte. Toutes les options de modification de texte et de formatage de l’Editeur de texte se trouvent désormais dans le Vérificateur de propriétés. Toutefois, vous pouvez toujours accéder à l’Editeur de texte via le menu Texte. L’Editeur de texte est utile pour travailler sur des textes difficiles à éditer à l’écran, tels que les grands blocs de texte, les textes attachés aux trajets ou un texte dont les polices et la taille sont difficilement lisibles. Vous pouvez afficher ces textes dans la police système et la taille par défaut pour faciliter l’édition. Remarque : Certaines nouvelles fonctions de Fireworks MX sont disponibles dans l’Editeur de texte. Pour afficher l’Editeur de texte : 1 Sélectionnez un bloc de texte et choisissez Texte > Editeur. 2 Modifiez et formatez le texte à l’aide des options disponibles. 3 Cliquez sur OK pour appliquer les modifications et fermer l’Editeur de texte. Pour afficher le texte avec la police système : Désactivez l’option Afficher la police à partir de l’ Editeur de texte. Pour afficher le texte dans la taille par défaut : Désactivez l’option Afficher la taille et la couleur dans l’ Editeur de texte. Utilisation d’un texte 193 194 Chapitre 7 CHAPITRE 8 Application de couleurs, de traits et de trames Le programme Macromedia Fireworks MX dispose de nombreux panneaux, outils et options permettant d’organiser, de choisir et d’appliquer des couleurs aux images bitmaps et aux objets vectoriels. Dans le panneau Nuanciers, vous pouvez choisir un groupe d’échantillons de couleurs prédéfinis, telle que Cubes de couleurs, Tons continus ou Echelle de gris, ou créer des couleurs favorites ou des couleurs acceptées par votre client. Dans le Mélangeur, vous pouvez choisir un modèle de couleur, tel que Hexadecimal, RVB ou Echelle de gris, ainsi que les couleurs de trait et de trame directement dans la barre des couleurs ou en entrant des valeurs de couleur. L’espace de travail Fireworks contient des zones de couleurs contenant les sélections de couleurs en cours des options et des caractéristiques d’objets. Lorsque vous cliquez sur une zone de couleur, une source de couleurs s’affiche pour vous permettre de choisir une couleur pour la zone de couleur. Eloignez le pointeur d’une source de couleurs ouverte et cliquez sur une couleur pour l’appliquer à la zone de couleur. La section Couleurs du panneau Outils contient des commandes de trait et de trame et d’autres options de couleur. La section Bitmap contient les outils Pot de peinture, Trame de dégradé et Pipette que vous pouvez utiliser pour appliquer une couleur à des bitmaps, des zones ayant une couleur similaire et des objets vectoriels. Pour plus d’informations sur ces outils de bitmap, voir Chapitre 5, « Traitement des bitmaps », à la page 131. Remarque : Pour plus d’informations sur la correction des couleurs à l’aide des effets en direct et de filtres, voir « Réglage de la couleur et du ton d’un bitmap » à la page 139. Utilisation de la section Couleurs du panneau Outils La section Couleurs du panneau Outils contient des commandes permettant d’activer les zones Couleur de trait et Couleur de trame qui déterminent si les traits ou les trames des objets sélectionnés sont affectés par les choix de couleurs. Cette section contient également des commandes qui permettent de restaurer les couleurs par défaut, de ne définir aucun paramètre de couleur de trait et de trame et de permuter les couleurs de trait et de trame. Pour activer la zone Couleur de trait u Couleur de trame : Cliquez sur l’icône située à côté de la zone Couleur de trait ou Couleur de trame dans le panneau Outils. La zone de couleur active apparaît sous la forme d’un bouton enfoncé dans le panneau Outils. 195 Remarque : L’outil Pot de peinture remplit les sélections de pixels et les objets vectoriels avec la couleur figurant dans la zone Couleur de trame du panneau Outils. Zones de couleur dans le panneau Outils et source de couleurs Pour rétablir les couleurs par défaut : Cliquez sur le bouton Couleurs par défaut du panneau Outils ou du Mélangeur. Pour retirer le trait ou la trame des objets sélectionnés à l’aide du bouton Aucun trait ou Trame : 1 Cliquez sur le bouton Aucun trait ou Trame de la section Couleurs du panneau Outils. La caractéristique de trait ou de trame active devient Aucune. 2 Pour affecter également la valeur Aucune à la caractéristique inactive, cliquez de nouveau sur le bouton Aucun trait ou Trame. Remarque : Vous pouvez également affecter la valeur Aucune au paramètre de trait ou de trame des objets sélectionnés en cliquant sur le bouton Transparent dans un menu déroulant Couleur de trame ou Couleur de trait ou en choisissant Aucune dans le menu déroulant Options de remplissage ou Options de trait du Vérificateur de propriétés. Pour permuter les couleurs du trait et de la trame : Cliquez sur le bouton Permuter les couleurs du panneau Outils ou dans le Mélangeur. Organisation des groupes d’échantillons et des modèles de couleurs Le panneau Nuancier et le Mélangeur se combinent pour former le groupe du panneau Couleurs. Dans le panneau Nuancier vous pouvez afficher, modifier, créer et modifier les groupes d’échantillons et choisir des couleurs de traits et de trames. Vous pouvez utiliser le Mélangeur pour choisir un modèle de couleur, des couleurs de traits et de trames mixtes en déplaçant les curseurs de valeurs de couleurs ou en entrant des valeurs de couleur, et choisir des couleurs de traits et de trames directement dans la barre des couleurs. Application de couleurs à l’aide du panneau Nuancier Le panneau Nuancier contient toutes les couleurs du groupe d’échantillons de couleurs en cours. Utilisez ce panneau pour appliquer des couleurs de traits et de trames aux objets vectoriels ou au texte sélectionnés. Pour appliquer une couleur au trait ou à la trame d’un objet sélectionné depuis le panneau Nuancier : 1 Clïquez sur l’icône située à côté de la zone Couleur de trait ou Couleur de trame du panneau Outils ou du Vérificateur de propriétés pour l’activer. 196 Chapitre 8 2 Si le panneau Nuancier n’est pas ouvert, choisissez Fenêtre > Nuanciers. Nuancier 3 Cliquez sur l’échantillon pour appliquer la couleur au trait ou à la trame de l’objet sélectionné. La couleur apparaît dans la zone active Couleur de trait ou Couleur de trame. Modification de groupes d’échantillons Vous pouvez utiliser ou créer un autre groupe d’échantillons. Le menu Options du panneau Nuancier contient les groupes d’échantillons suivants : Cubes de couleurs, Tons continus, Système Macintosh, Système Windows et Echelle de gris. Vous ne pouvez pas importer d’échantillons personnalisés depuis des fichiers de pallette de couleurs enregistrés sous forme de fichier ACT ou GIF. Menu Options du panneau Nuancier Pour choisir un groupe d’échantillons : Dans le menu déroulant des options du panneau Nuancier, sélectionnez un groupe d’échantillons. Remarque : La sélection de cubes de couleurs affiche le groupe d’échantillon par défaut. Pour choisir un groupe d’échantillons : 1 Choisissez Remplacer le nuancier dans le menu Options du Nuancier. 2 Accédez au dossier et choisissez un fichier d’échantillons. Application de couleurs, de traits et de trames 197 3 Cliquez sur Ouvrir. Les échantillons de couleurs du fichier remplace les échantillons précédents. Remarque : Pour plus d’informations sur la création d’un groupe d’échantillons, voir « Personnalisation du panneau Nuancier » à la page 198 et « Enregistrement de palettes » à la page 348. Pour ajouter des échantillons d’une palette de couleurs externe au nuancier actif : 1 Dans le menu déroulant des options du panneau Nuancier, sélectionnez Ajouter des échantillons. 2 Naviguez vers le dossier approprié et choisissez un fichier de palette de couleurs. Remarque : Fireworks permet d’ajouter des échantillons de palettes exportées sous forme de fichiers ACT ou GIF. 3 Cliquez sur OK. Les nouveaux échantillons sont ajoutés à la fin des échantillons actifs. Personnalisation du panneau Nuancier Vous pouvez ajouter, supprimer, remplacer et trier des groupes d’échantillons de couleurs dans le panneau Nuancier. Remarque : La sélection Edition > Annuler n’annule pas les ajouts ou les suppressions d’échantillons. Nuancier Pour ajouter une couleur au panneau Nuancier : 1 A partir du panneau Outils choisissez l’outil Pipette. 2 Choisissez le nombre de pixels de l’échantillon dans le menu déroulant Echantillon du Vérificateur de propriétés : 1 pixel, Moyenne 3x3 ou Moyenne 5x5. 3 Cliquez n’importe où dans une fenêtre de document Fireworks ouverte pour échantillonner une couleur. 4 Placez le bout de la pipette dans l’espace ouvert après le dernier échantillon dans le panneau Nuancier. La pipette se transforme en pot de peinture. 5 Cliquez à cet endroit pour ajouter l’échantillon. Conseil : Lorsque vous sélectionnez l’option Accrocher à Websafe dans le menu Options de la source de couleurs, toutes les couleurs sélectionnées avec la pipette prennent la valeur de la couleur WebSafe la plus proche. 198 Chapitre 8 Pour remplacer un échantillon par une autre couleur : 1 A partir du panneau Outils, choisissez l’outil Pipette. 2 Choisissez le nombre de pixels de l’échantillon dans le menu déroulant Echantillon du Vérificateur de propriétés : 1 pixel, Moyenn 3x3 ou Moyenne 5x5. 3 Cliquez n’importe où dans une fenêtre de documents Fireworks ouvert pour échantillonner une couleur. 4 Maintenez la touche Maj enfoncée et placez le pointeur sur un échantillon du panneau Nuancier. Le pointeur prend alors la forme de l’outil Pot de peinture. 5 Cliquez sur l’échantillon pour le remplacer par la nouvelle couleur. Pour supprimer un échantillon du panneau Nuancier : 1 Maintenez la touche Ctrl (Windows) ou Commande (Macintosh) enfoncée et pointez sur un échantillon. Le pointeur prend la forme de ciseaux. 2 Cliquez sur l’échantillon pour le supprimer du panneau Nuancier. Pour enregistrer une sélection de couleurs échantillonnées : 1 Ajoutez les couleurs échantillonnées dans le panneau Nuancier. 2 Dans le menu déroulant des options du panneau Nuancier sélectionnez Enregistrer le nuancier. La boîte de dialogue Exporter le nuancier est alors ouverte. 3 Choisissez un nom de fichier et de répertoire, puis cliquez sur Enregistrer. Effacement et tri des échantillons Vous pouvez effacer et trier des échantillons de couleurs à l’aide du menu Options du panneau Nuancier. Pour effacer ou trier des échantillons : Dans le menu déroulant des options du panneau Nuancier, choisissez l’une des options suivantes : Effacer le nuancier efface Trier par couleurs trie la totalité du panneau Nuancier. les échantillons par valeur de couleur. Création de couleurs avec le Mélangeur Dans le Mélangeur, vous pouvez créer des couleurs en déplaçant les curseurs ou en entrant des valeurs pour chaque composant d’un modèle de couleur, tel que RGB, Hexadécimal ou CMJ. La couleur que vous créez est appliquée à la zone active Couleur de trait ou Couleur de trame. Le Mélangeur contient également une barre de couleurs qui affiche les couleurs du modèle de couleur actif. Cliquez n’importe où dans la barre de couleurs pour appliquer une couleur. Vous pouvez également cliquer sur le bouton de sélection de couleurs système pour choisir une couleur du système Windows ou Macintosh. Application de couleurs, de traits et de trames 199 Conseil : Bien que CMJ soit une option de modèle de couleur, les graphiques exportés directement depuis Fireworks ne donnent pas de très bons résultats à l’impression. Pour repréparer des graphiques Fireworks exportés, vous pouvez les importer dans FreeHand MX qui convertit en mode CMJ les images RVB lors d’une sortie en séparations de couleurs numériques. Pour plus d’informations, voir la documentation FreeHand MX. Mélange de couleurs dans le Mélangeur Utilisez le Mélangeur pour afficher les valeurs de la couleur active et modifier des valeurs de couleur pour créer de nouvelles couleurs. Par défaut, le Mélangeur identifie les couleurs à l’aide du mode RVB hexadécimal, affichant des valeurs de couleur définies à partir du rouge (R), du vert (V) et du bleu (B). Les valeurs RVB hexadécimales sont comprises entre 00 et FF. Choisissez Pour exprimer la composition des couleurs RVB Valeurs Rouge, Vert et Bleu, chacun de ces composants étant affecté d’une valeur comprise entre 0 et 255, 0-0-0 correspondant au noir et 255-255-255 au blanc. Hexadécimal RVB Rouge, Vert et Bleu, chacun de ces composants étant affecté d’une valeur hexadécimale comprise entre 00 et FF. 00-00-00 correspond au noir et FF-FF-FF au blanc. TSL Teinte, saturation et luminosité, la teinte étant affectée d’une valeur comprise entre 0 et 360 degrés et la saturation et la luminosité, d’une valeur comprise entre 0 et 100 %. CMJ Cyan, Magenta et Jaune, chacun de ces composants étant affecté d’une valeur comprise entre 0 et 255, 0-0-0 correspondant au blanc et 255-255-255 au noir. Echelle de gris Un pourcentage de noir. Ce composant unique, Noir (N), est affecté d’une valeur comprise entre 0 et 100 %, 0 correspondant au blanc et 100 au noir. Les valeurs intermédiaires correspondent à des dégradés du gris. Vous pouvez choisir d’autres modèles de couleurs à partir du menu Options du Mélangeur. Les valeurs de composition de la couleur utilisée varient avec chaque nouveau modèle. Pour afficher le Mélangeur : Choisissez Fenêtre > Mélangeur. Pour appliquer une couleur de la barre des couleurs à un objet sélectionné : 1 Cliquez sur l’icône située à côté de la zone des couleurs de trait ou de trame du Mélangeur. 2 Positionnez le pointeur sur la barre de couleurs. Le pointeur se transforme en pipette. 200 Chapitre 8 3 Cliquez sur une couleur pour la sélectionner. La couleur est appliquée à l’objet sélectionné et devient la couleur de trait ou de trame active. Pour sélectionner une couleur dans le Mélangeur : 1 Afin d’éviter que des objets ne soient malencontreusement modifiés lors du mélange des couleurs, désélectionnez tous les objets avant de commencer à mélanger une couleur. 2 Cliquez sur la zone des couleurs de trait ou de trame pour définir la destination de la nouvelle couleur. 3 Choisissez un modèle de couleur dans le menu Options du mélangeur. 4 Procédez de l’une des manières suivantes pour définir les valeurs des composants de couleur : • Entrez des valeurs dans les champs de composition de la couleur. • Utilisez les curseurs du menu déroulant. • Sélectionnez une couleur dans la barre de couleurs. Vous pouvez ajouter la couleur au panneau Nuancier afin de pouvoir la réutiliser. Pour plus d’informations, voir « Personnalisation du panneau Nuancier » à la page 198. Pour parcourir les modèles de couleur à l’aide de la barre de couleurs : La barre de couleurs s’affiche au bas du Mélangeur. Remarque : Les options du Mélangeur ne sont pas modifiées. Création de couleurs à l’aide du sélecteur de couleurs du système Vous pouvez créer des couleurs à l’aide de la boîte de dialogue Couleurs (Windows) ou du sélecteur de couleurs Apple (Macintosh) au lieu d’utiliser le panneau Mélangeur ou Nuancier. Pour obtenir une couleur à partir du sélecteur de couleurs du système : 1 Cliquez sur une case de couleur. 2 Choisissez le système Windows ou Mac dans un menu Options de la fenêtre de la source de couleurs. Le nuancier du système s’affiche dans la fenêtre de la source de couleurs. 3 Choisissez une couleur dans le sélecteur de couleurs du système. La couleur est appliquée à l’objet sélectionné et devient la couleur de trait ou de trame active. Pour plus de détails sur l’ajout d’une couleur à partir du sélecteur de couleurs vers le panneau Nuancier, reportez-vous à la section « Personnalisation du panneau Nuancier » à la page 198. Affichage des valeurs de couleur Pour identifier des valeurs de couleurs, vous pouvez également utiliser le panneau Informations en plus du Nuancier. Pour afficher la valeur de la couleur d’une partie de votre document avec le panneau Informations : 1 Choisissez Fenêtre > Informations pour afficher le panneau Informations. Application de couleurs, de traits et de trames 201 2 Placez le pointeur au-dessus de l’objet contenant la couleur que vous voulez afficher (Windows uniquement). Pour afficher la valeur de la couleur active de trait ou de trame, procédez de l’une des manières suivantes : • Choisissez Fenêtre > mélangeur pour les valeurs RVB ou d’autres valeurs de couleurs système. • Cliquez sur la source de couleurs pour ouvrir la fenêtre de la source de couleurs et afficher la valeur hexadécimale dans la partie supérieure de la fenêtre. • Placez le pointeur sur une source de couleur et lisez l’info-bulle (Windows uniquement). Remarque : Par défaut, les valeurs RVB apparaissent dans le panneau Informations et le Mélangeur et les valeurs hexadécimales apparaissent dans la fenêtre de la source de couleurs et l’nfo-bulle de la source de couleurs de Windows. Toutefois, vous pouvez changer à tout moment le modèle de couleur affiché dans le Mélangeur ou le panneau Informations. Pour afficher des informations pour un autre modèle de couleur : Choisissez un autre modèle de couleur dans le menu Options du panneau Informations ou du Mélangeur. Tramage à l’aide de couleurs Websafe Il est parfois nécessaire d’utiliser une couleur non Websafe. Par exemple, le logo de votre entreprise peut utiliser une couleur qui n’est pas Websafe. Pour s’approcher d’une couleur Websafe qui ne génère ni décalage ni tramage lorsqu’elle est exportée à l’aide d’une palette Websafe, utilisez un tramage Web. Remarque : Notez que le tramage Web peut augmenter la taille du fichier. Deux couleurs Websafe créent un tramage Web Pour utiliser le tramage Web : 1 Sélectionnez un objet contenant une couleur non Websafe. 2 Dans le menu des options trame de le Vérificateur de propriétés, choisissez Tramage Web. 3 Dans le Vérificateur de propriétés, cliquez sur la source de couleurs de trame. La fenêtre de la source de couleurs s’ouvre avec les options de trames Web. La couleur nonWebsafe de l’objet apparaît dans la source de couleurs Source de la fenêtre des options de trames. Les deux couleurs de tramage Websafe figurent dans les zones de couleurs de droite. Le tramage Web est ensuite appliqué à l’objet et devient la couleur de trame active. Remarque : Définition du bord d’un tramage Web afin d’obtenir des résultats non crénelés ou diffusés dans les couleurs non Websafe. 4 Cliquez en dehors de la fenêtre contextuelle pour la fermer. 202 Chapitre 8 Pour créer l’illusion d’une trame réellement transparente dans un navigateur Web : 1 Sélectionnez l’objet auquel vous voulez appliquer une trame transparente. 2 Dans le menu des options trame de le Vérificateur de propriétés, choisissez Tramage Web. 3 Dans le Vérificateur de propriétés, cliquez sur la source de couleurs de trame. La fenêtre de la source de couleurs s’ouvre avec les options de trames Web. 4 Cliquez sur l’option Transparente. Les puits de couleurs sur la droite de la fenêtre contextuelle changent pour refléter votre sélection et l’objet sur le document devient semi-opaque ou translucide. 5 Cliquez en dehors de la fenêtre contextuelle pour la fermer. 6 Exportez l’objet au format GIF ou PNG en sélectionnant l’option Transparence d’index ou Transparence alpha. Pour plus d’informations sur l’exportation de fichiers avec des transparences, voir « Création de zones de transparence » à la page 349. Lorsque le graphisme est affiché dans un navigateur, l’arrière-plan de la page est visible au travers des pixels du tramage Web transparent. Remarque : Les navigateurs ne prennent pas tous en charge les fichiers PNG. Utilisation des puits de couleurs et des fenêtres contextuelles Fireworks MX contient des puits de couleurs, notamment dans la section Couleurs du panneau Outils ainsi que dans le Vérificateur de propriétés et le Mélangeur. Chacun de ces emplacements affichent la couleur de la propriété associée de l’objet. Choix d’une couleur dans une source de couleurs Lorsque vous cliquez sur une source de couleurs, une fenêtre contextuelle de couleur similaire au Nuancier s’ouvre. Vous pouvez afficher les mêmes échantillons dans une fenêtre contextuelle de couleurs que ceux figurant dans le panneau Nuancier ou des échantillons différents. Pour choisir la couleur d’une case de couleur : 1 Cliiquez sur la case de couleur. Le fenêtre contextuelle des couleurs s’affiche. 2 Utilisez l’une des méthodes suivantes : • Cliquez sur un échantillon pour l’appliquer à la case de couleur. • Cliquez avec la pipette sur une couleur dans n’importe quel emplacement de l’écran pour l’appliquer à la case de couleur. • Cliquez su le bouton Transparente pour rendre la trame ou le trait transparent. Pour afficher le groupe d’échantillons en cours du panneau Nuancier dans la fenêtre contextuelle de couleurs : Choisissez le panneau Nuancier dans le menu options de la fenêtre contextuelle des couleurs. Pour afficher un groupe d’échanillons différents dans la fenêtre contextuelle des couleurs : Choisissez un groupe d’échantillons dans le menu Option de la fenêtre contextuelle des couleurs. Ce choix n’affecte pas le panneau Nuancier. Application de couleurs, de traits et de trames 203 Echantillonnage de couleurs dans une fenêtre contextuelle des couleurs Lorsqu’une fenêtre contextuelle de couleurs est ouverte, le pointeur se transforme en pipette spéciale permettant d’échantillonner des couleurs depuis pratiquement n’importe quel emplacement de l’écran. Cette opération s’appelle l’échantillonnage. Pour échantillonner une couleur depuis n’importe quel emplacement de l’écran pour la zone de couleur en cours : 1 Cliquez sur une case de couleur. La fenêtre contextuelle des couleurs s’ouvre et le pointeur se transforme en pipette. 2 Cliquez n’importe où dans l’espace de travail Fireworks pour choisir la couleur de la case de couleur. La couleur est appliquée à la caractéristique ou l’élément associé à la case de couleur et la fenêtre contextuelle des couleurs se ferme. Conseil : Maintenez la touche Maj enfoncée et cliquez pour choisir une couleur Websafe. Utilisation des traits Avec le Vérificateur de propriétés, le menu déroulant Options de trait et la boîte de dialogue de modification de trait, vous contrôlez chaque nuance de pinceau, notamment la quantité d’encre, l’épaisseur et la forme, la texture, l’effet de bord et l’aspect. Application de traits Vous pouvez changer les attributs de trait des outils Plume, Crayon et Pinceau de façon à ce que les nouveaux objets vectoriels adoptent ces attributs ou vous pouvez appliquer ces attributs après le dessin des objets. La couleur de trait en cours apparaît dans la zone correspondante du panneau Outils, le Vérificateur de propriétés et le Mélangeur. Vous pouvez changer la couleur de trait d’un outil de dessin ou des objets sélectionnés dans ces trois panneaux. L’icône de crayon indique la zone Couleur de trait dans le panneau Outils, le Vérificateur de propriétés et le Mélangeur. Pour changer les attributs de trait des objets sélectionnés, procédez de l’une des manières suivantes : • Choisissez un attribut de trait dans le Vérificateur de propriétés. Conseil : Choisissez des options de trait dans le menu déroulant Options de trait pour définir des attributs supplémentaires. 204 Chapitre 8 • Cliquez sur la zone Couleur de trait du panneau Outils, puis sur Options de trait. Choisissez des attributs de trait dans la fenêtre contextuelle des options de trait. Utilisez le Vérificateur de propriétés ou la fenêtre contextuelle Options de trait pour changer le trait d’un objet. Pour changer la couleur de trait d’un outil de dessin : 1 Appuyez sur Ctrl+D (Windows) ou Command+D (Macintosh) pour désélectionner tous les objets. 2 Choisissez un outil de dessin dans le panneau Outils. 3 Cliquez sur la zone Couleur de trait du panneau Outils ou dans le Vérificateur de propriétés pour ouvrir la fenêtre contextuelle des couleurs. 4 Choisissez une couleur de trait parmi les échantillons proposés. 5 Faites glisser la souris pour dessiner l’objet. Remarque : Un nouveau trait utilise la couleur actuellement affichée dans la source de couleurs du trait. Pour supprimer tous les attributs de trait d’un objet sélectionné, procédez de l’une des manières suivantes : • Choisissez Aucun dans la menu déroulant Options de trait du Vérificateur de propriétés ou dans la fenêtre contextuelle Options de trait. • Cliquez sur la zone Couleur de trait du panneau Outils ou du Vérificateur de propriétés, puis sur le bouton Transparente. Application de couleurs, de traits et de trames 205 Création de traits personnalisés Utilisez la boîte de dialogue de modification de trait pour changer les caractéristiques de trait. Cette boîte de dialogue contient les onglet Options, Forme et Sensitibilité. L’aperçu de trait au bas de chaque onglet indique le pinceau et les paramètres en cours. Dans l’aperçu, un trait qui d’effile ou s’estompe ou change de gauche à droite indique les paramètres de pression et de vitesse-sensibilité. Pour ouvrir la boîte de dialogue de modification de trait : 1 Procédez de l’une des manière suivantes pour ouvrir la fenêtre contextuelle Options de trait : • Choisissez Options de trait dans le menu déroulant Options de trait du Vérificateur de propriétés. • Cliquez sur Options de trait dans le menu déroulant Couleur de trait du panneau Outils. 2 Cliquez sur Advancé. La boîte de dialogue de modification de trait s’ouvre. 206 Chapitre 8 Pour définir les options de trait de pineau générale : 1 Dans l’onglet Options de la boîte de dialogue de modification de trait, définissez la quantité d’encre, l’espacement et le débit. Des débit élevés créent des trait de pinceau qui s’enchaînent de la même manière qu’avec un aérographe. 2 Pour que les traits de pinceau se chevauchent pour créer des traits denses, choisissez Repasser. 3 Pour définir la texture du trait, changez l’option Texture. La transparence de la texture est proportionnelle à la valeur définie. 4 Pour définir la texture des bords, entrez une valeur dans le champ Texture du bord et choisissez un effet de bord dans le menu déroulant Effet de bord. 5 Définissez le nombre de pointes du trait de pinceau. Pour plusieurs extrémités, entrez une valeur de Espacement des pointes et choisissez la méthode de variation de couleur. Vous pouvez choisir Aléatoire, Uniforme, Complémentaire, Teinte ou Ombré. 6 Cliquez sur Appliquer pour appliquer les paramètres aux traits sélectionnés, puis cliquez sur OK. Application de couleurs, de traits et de trames 207 Pour modifier la pointe du pinceau : 1 Dans l’onglet Forme de la boîte de dialiogue de modification de trait, sélectionnez Carrée pour une pointe carrée ou désélectionnez cette option pour utiliser une pointe ronde. 2 Définissez la taille de la pointe du pinceau, l’épaisseur, l’aspect de la pointe et son angle. 3 Cliquez sur Appliquer, puis sur OK. Fireworks dispose de paramètres de trait pour définir précisément les attributs de trait contrôlés par la vitesse et la pression lors de l’utilisation d’une tablette et d’un crayon Wacom sensible à la pression. Vous pouvez choisir l’attribut de trait à contrôler avec une plume. 208 Chapitre 8 Pour définir la sensibilité de trait : 1 Dans l’onglet Sensibilité de la boîte de dialogue de modification de trait, choisissez une propriété de trait, telle que la taille, la quantité d’encre ou la saturation dans le menu déroulant Propriété du trait. 2 Dans les options Facteurs de variation, choisissez le degré auquel la sensibilité affecte la propriété de trait en cours, puis cliquez sur OK. 3 Cliquez sur OK. Insertion de traits dans les trajets Par défaut, le trait de pinceau d’un objet est centré sur un trajet. Vous pouvez modifier des options pour placer le trait de pinceau complètement à l’intérieur ou à l’extérieur du trajet. Cela vous permet de contrôler la taille générale des objets au trait et de créer des effets créatifs, tels que l’utilisation de traits sur les bords des boutons biseautés. Trait centré, trait situé à l’intérieur et trait situé à l’extérieur Application de couleurs, de traits et de trames 209 Vous pouvez utiliser le menu déroulant Trait de la fenêtre Options de trait pour réorienter les traits de pinceau. Pour déplacer un trait à l’intérieur ou à l’extérieur du trajet sélectionné : 1 Cliquez sur la zone Couleur de trait du panneau Outils ou du Vérificateur de propriétés pour ouvrir la fenêtre contextuelle de la source de couleur. 2 Choisissez une option dans le menu déroulant Emplacement du trait par rapport au trajet : A l’intérieur, Centré ou A l’extérieur. 3 Vous pouvez également choisir l’option Recouvrir le tracé avec la trame. Normalement, le trait chevauche la trame. L’option Recouvrir le tracé avec la trame permet de dessiner une trame sur le trait. Si vous sélectionnez cette option pour un objet comportant une trame opaque, toutes les parties du trait qui figurent dans le trajet sont obscurcies. Les trames comportant un niveau de transparence risquent de teinter les traits de pinceau à l’intérieur des trajets ou de se mélanger avec ces derniers. Création de styles de traits Vous pouvez modifier des caractéristiques de trait spécifiques telles que la quantité d’encre, la forme et la pression de la pointe, et enregistrer le trait personnalisé en tant que style, de façon à l’utiliser de nouveau dans les autres documents. Pour créer des traits personnalisés : 1 Utilisez l’une des méthodes suivantes : • Cliquez sur la zone Couleur de trait du panneau Outils, puis sur Options de trait. • Choisissez Options de trait dans le menu déroulant Options de trait du Vérificateur de propriétés. La boîte de dialogue Options de trait s’affiche. 2 Modifiez les attributs de trait de pinceau. 3 Enregistrez les attributs de trait personnalisés sous la forme d’un style. Pour plus d’informations, voir « Création et suppression de styles » à la page 256. Utilisation des trames Le Vérificateur de propriétés, le menu déroulant Options de trame, la fenêtre contextuelle Options de trame et la fenête contextuelle Dégradé ainsi qu’un ensemble de textures et de motifs bitmap permettent de créer diverses trames pour les objets vectoriels et textuels. L’outil Pot de peinture ou Dégradé permet également de remplir des pixels en fonction des paramètres de trame en cours. 210 Chapitre 8 Définition des attributs de trame des outils de dessin Vous pouvez définir les attributs de trame des outils de dessin Rectangle, Rectangle arrondi, Ellipse et Polygone pour les appliquer aux nouveaux objets. La trame active figure dans la zone Couleur de trame du Vérificateur de propriétés, le panneau Outils et le Mélangeur. Vous pouvez utiliser ces panneaux pour changer la trame d’un outil de dessin. L’icône du pot de peintuire indique la zone Couleur de trame du paneau Outils, du Vérificateur de propriétés et du Mélangeur. Pour changer la couleur de trame unie des outils de dessin vectoriels applicable et de l’outil Pot de peinture : 1 Choisissez un outil de dessin ou l’outil Pot de peinture. 2 Utilisez l’une des méthodes suivantes : • Appuyez sur Ctrl+D (Windows) ou Commande +D (Macintosh) pour désélectionner tous les objets, puis cliquez sur la zone Couleur de trame du Vérificateur de propriétés pour ouvrir la fenêtre contextuelle Couleur de trame. 3 Cliquez sur la zone Couleur de trame du panneau Outils ou du mélangeur pour ouvrir le puits des couleurs. 4 Choisissez la couleur de la trame dans les échantillons ou échantillonnez une couleur n’importe où dans l’écran à l’aide de la pipette. 5 Utilisez l’outil de manière appropriée. Remarque : L’outil Texte affecte toujours à la zone Couleur de trame la dernière couleur de texte unie utilisée. Modification des trames unies Une trame unie est simplement une couleur unie remplissant l’intérieur d’un objet. Vous pouvez modifier la couleur de trame d’un objet à partir du panneau Outils, du Vérificateur de propriétés ou du Mélangeur. Pour modifier la trame unie des objets vectoriels sélectionnés dans le Vérificateur de propriétés : 1 Cliquez sur la zone Couleur de trame du Vérificateur de propriétés, du panneau Outils ou du Mélangeur pour ouvrir la fenêtre contextuelle des couleurs. 2 Choisissez un échantillon de couleur à partir de la source de couleurs du panneau. La trame apparaît dans l’objet sélectionné et devient la couleur de trame active. Application de trames et dégradés Vous pouvez modifier des trames pour afficher une série de caractéristiques de dégradé uni, tramé ou à motif, allant des couleurs unies aux dégradés imitant le satin, des ondes ou des plis. En outre, vous pouvez modifier divers attributs d’une trame, tels que la couleur, le bord, la texture et la transparence. Vous disposez de différents types de trames et de dégradés ou vous pouvez en créer. Application de couleurs, de traits et de trames 211 Remarque : Une nouvelle trame utilise la couleur actuellement affichée dans la source de couleurs de trame du panneau Outils. Utilisez les options de trame du Vérificateur de propriétés ou de la fenêtre contextuelle Options de trame pour modifier les attributs de trame. Application d’une trame avec motif Vous pouvez remplir un objet trajet avec un graphique bitmap appelé texture. Fireworks comprend plus d douze trames texturée dont Berbère, Feuilles et Bois. Pour appliquer une trame texturée à un objet sélectionné : 1 Utilisez l’une des méthodes suivantes : • Choisissez Motif dans le menu déroulant Options de trame du Vérificateur de propriétés. • Cliquez sur la zone Couleur de trame du panneau Outils, puis sur Options de tame et choisissez Motif dans le menu déroulant Options de trame. 2 Choisissez le motif dans le menu déroulant correspondant. Le motif apparaît dans l’objet sélectionné et devient la couleur de trame active. Ajout d’un motif personnalisé Vous pouvez également définir un fichier bitmap pour l’utiliser comme texture. Vous pouvez utiliser les formats de fichier suivants comme motifs : PNG, GIF, JPEG, BMP, TIFF et PICT (Macintosh uniquement). Lorsqu’un fichier de motif est une image transparente de 32 bits, la transparence affecte la trame lorsqu’elle est utilisée dans Fireworks. Si une image n’est pas 32 bits, elle apparaît opaque. Lorsque vous ajoutez un motif, son nom apparaît dans le menu déroulant Nom de motif de la fenêtre contextuelle Options de trame. Pour créer un motif depuis un fichier externe : 1 Affichez les propriétés de l’objet vectoriel dans le Vérificateur de propriétés et choisissez Trame dans le menu déroulant Options de trame. 2 Cliquez sur la zone Couleur de trame et choisissez Autre dans le menu déroulant des noms de motifs. 212 Chapitre 8 3 Recherchez le fichier bitmap à utiliser comme nouveau motif, puis cliquez sur Ouvrir. Le nouveau motif est ajouté au bas de la liste des motifs. Application d’une trame en dégradé Les catégories de trame, à l’exception de Aucune, Unie, Motif et Tramage Web sont des trames en dégradé. Ces trames en dégradé mélangent les couleurs pour créer différents effets. Objets avec trames en dégradé Pour appliquer une trame en dégradé à un objet sélectionné : Choisissez un dégradé dans le menu déroulant Options de trame du Vérificateur de propriétés. La trame apparaît dans l’objet sélectionné et devient la trame active. Modification de trame dégradée Vous pouvez modifier la trame dégradée active en cliquant sur n’importe quelle zone Couleur de trame et en utilisant la fenêtre contextuelle Modifier le dégradé. Rampe de couleurs Aperçu Fenêtre contextuelle Modifier le dégradé Pour ouvrir la fenêtre Modifier le dégradé : 1 Sélectionnez un objet ayant une trame dégradée ou choisissez une trame dégradée dans le menu déroulant Options de trame du Vérificateur de propriétés. Application de couleurs, de traits et de trames 213 2 Cliquez sur la zone Couleur de trame du Vérificateur de propriétés ou du panneau Outils pour ouvrir la fenêtre contextuelle. La fenêtre contextuelle Modifier le dégradé s’ouvre avec le dégradé en cours dans la rampe de couleurs et l’aperçu. Pour ajouter une nouvelle couleur ou un nouvel échantillon d’opacité au dégradé, procédez de l’une des manière suivantes : • Pour ajouter un nouvel échantillon de couleur, cliquez sur la zone sous la rampe de couleur dégradée. • Pour ajouter un échantillon d’opacité, cliquez sur la zone au-dessus de la rampe de couleur dégradée. Pour supprimer un échantillon de couleur ou d’opacité du dégradé : Faites glisser l’échantillon à l’écart de la fenêtre contextuelle Modifier le dégradé. Pour définir ou changer la couleur d’un échantillon de couleur : 1 Cliquez sur un échantillon. 2 Choisissez une couleur. Pour définir ou changer la transparence d’un échantillon d’opacité : 1 Cliquez sur l’échantillon d’opacité. 2 Utilisez l’une des méthodes suivantes : • Faites glisser le curseur de transparence, où 0 correspond à une transparence totale et 100 à une opacité totale. • Entrez une valeur de 0 à 100 pour définir l’opactié. Remarque : L’échiquier apparaît à travers le dégradé dans les zones transparentes. 3 Après avoir modifié le dégradé, appuyez sur Entrée ou cliquez en dehors de la fenêtre contextuelle Modifier le dégradé. La trame en dégradé apparaît dans les objets sélectionnés et devient la trame active. Pour régler la transition entre les couleurs de la trame : Faites glisser les échantillons de couleur de gauche à droite. Création de trames ave l’outil Dégradé L’outil Dégradé appartient au même groupe d’outils que l’outil Pot de peinture. Ce nouvel outil fonctionne similairement à l’outil Pot de peinture, mais il remplit un objet avec un dégradé au lieu d’une couleur unie. A l’instar de l’outil Pot de peinture, il conserve les propriétés du dernier dégradé utilsé. Pour utiliser l’outil dégradé : 1 Cliquez sur l’outil Pot de peinture dans le panneau Outils et choisissez l’outil Dégradé dans le menu déroulant. 214 Chapitre 8 2 Choisissez les attributs suivants appropriés dans le Vérificateur de propriétés : Options de trame : menu déroulant permettant de choisir un type de dégradé. Zone Couleur de trame : lorsque vous cliquez dessus, la fenêtre contextuelle Modifier le dégradé s’affiche pour vous permettre de définir des options de couleur et de transparence. Bord : détermine si le dégradé à un bord net, anticrénelé ou diffusé. Si vous choisissez un bord diffusé, vous pouvez déterminer la valeur de la diffusion. Texture permet d’accéder à diverse options, telles que Grain, Métal, Hatch, Mesh ou Sandpaper. 3 Cliquez et faites glisser le pointeur pour définir le point de départ du dégradé ainsi que la direction et la longeur de la zone dégradée. Transformation et distorsion de trames Vous pouvez déplacer, faire pivoter, incliner et modifier la largeur de la trame texturée ou en dégradé d’un objet. Lorsque vous utilisez l’outil Pointeur ou Dégradé pour sélectionner un objet avec une trame ou un motif dégradé, des poignées apparaissent autour ou à côté de l’objet. Tirez sur ces poignées pour ajuster la trame de l’objet. Utilisez les poignées de la trame pour régler de façon interactive une trame en dégradé ou texturée Pour déplacer la trame dans l’objet : Faites glisser la poignée ronde ou cliquez sur un nouvel emplacement dans la trame avec l’outil Dégradé. Pour appliquer une rotation à la trame : Faites glisser les lignes reliant les poignées. Pour régler la largeur et l’inclinaison de la trame : Tirez sur une poignée carrée. Spécification de bords de trame nets, anticrénelés ou avec diffusion Fireworks permet de définir le bord d’une trame comme une ligne continue régulière nette ou d’atténuer le bord en le diffusant ou en évitant le crénelage. Par défaut, les bords sont anticrénelés. L’aspect anticrénelé atténue les bords dentelés pouvant apparaître sur des objets arrondis, tels que les ellipses et les cercles, en fondant subtilement le bord dans l’arrière-plan. La diffusion produit cependant un effet fondu perceptible de part et d’autre du bord. Cela confère au bord un effet estompé ; presque un effet de néon. Application de couleurs, de traits et de trames 215 Pour changer le bord de trame d’un objet sélectionné : 1 Dans le menu déroulant Bord, procédez de l’une des manières suivantes : • Cliquez dans le menu déroulant Bord du Vérificateur de propriétés. • Cliquez successivement dans la zone Couleur de trame du panneau Outils, sur Options de trame et sur le menu déroulant Bord. 2 Choisissez une option de bord : Bord net, Anticrénelé ou Diffusion. 3 Pour un bord diffusé, choisissez également le nombre de pixels, de part et d’autre du bord, qui doivent être diffusés. La valeur par défaut est de 10. Vous pouvez choisir une valeur comprise entre 0 et 100. La diffusion est proportionnelle à la valeur définie. Enregistrement d’une trame dégradée personnalisée Pour enregistrer les paramètres de dégradé en cours sous la forme d’un dégradé personnalisé pour l’utiliser dans plusieurs documents, créez un style. Pour plus d’informations, voir « Création et suppression de styles » à la page 256. Suppression d’une trame Vous pouvez aisément supprimer les attributs de trame des objets sélectionnés. Pour retirer une trame d’un objet sélectionné, procédez de l’une des manières suivantes : • Choisissez Aucune dans le menu déroulant Options de trame de le Vérificateur de propriétés ou de la fenêtre contextuelle Options de trame. • Cliquez sur la zone Couleur de trame et sur le bouton Transparente. Cette option supprime les trames unies. Ajout d’une texture aux traits et aux trames Vous pouvez ajouter des effets 3D aux traits et aux trames en ajoutant une texture. Fireworks dispose de textures, mais vous pouvez également utiliser des textures externes. 216 Chapitre 8 Ajout d’une texture à un trait Les textures modifient la luminosité du trait, mais non sa teinte ; elles lui confèrent un aspect moins mécanique, plus organique, comme de la peinture sur surface texturée. Les textures produisent plus d’effet sur les traits larges. Vous pouvez ajouter une texture à n’importe quel trait. Fireworks comprend plusieurs textures parmi lesquelles vous pouvez opérer votre choix, telles que Chiffon, Marée noire et Emeri. Utilisez les options de trait du Vérificateur de propriétés ou de la fenêtre contextuelle Options de trait pour ajouter une texture à un trait depinceau. Le menu déroulant Texture affiche un aperçu de la texture en surbrillance Pour ajouter une texture au trait d’un objet sélectionné : 1 Pour ouvrir le menu déroulant Texture du trait, procédez comme suit : • Cliquez sur le menu déroulant Texture du trait du Vérificateur de propriétés. • Cliquez successivement sur la zone Couleur de trait du Panneau Outils, Options de trait et sur le menu déroulant Texture. 2 Utilisez l’une des méthodes suivantes : • Choisissez une texture dans le menu déroulant. • Choisissez Autre dans le menu déroulant et accédez à un fichier de texture à utiliser comme texture externe. Remarque : Vous pouvez utiliser les formats de fichier suivants comme textures : PNG, GIF, JPEG, BMP, TIFF et PICT (Macintosh uniquement). 3 Entrez un pourcentage compris entre 0 et 100 afin de contrôler la profondeur de la texture. L’augmentation du pourcentage augmente l’intensité de la texture. Ajout d’une texture à une trame Les textures modifient la luminosité de la trame, mais non sa teinte ; elles lui confèrent un aspect moins mécanique, plus organique. Vous pouvez ajouter une texture à n’importe quelle trame. Fireworks comprend plusieurs textures parmi lesquelles vous pouvez opérer votre choix, telles que Chiffon Marée noire et Emeri. Vous pouvez également utiliser des fichiers bitmap comme textures. Cela permet de créer pratiquement n’importe quel type de texture personnalisée. Application de couleurs, de traits et de trames 217 Pour ajouter une texture à la trame d’un objet sélectionné : 1 Pour ouvrir le menu déroulant Texture de la trame, procédez de l’une des manières suivantes : • Cliquez sur le menu déroulant Texture de la trame dans le Vérificateur de propriétés. • Cliquez sur la zone Couleur de trame du panneau Outils, puis sur le menu déroulant Texture. 2 Utilisez l’une des méthodes suivantes : • Choisissez une texture dans le menu déroulant. • Choisissez Autre dans le menu déroulant et accédez à un fichier de texture à utiliser comme texture externe. 3 Entrez un pourcentage compris entre 0 et 100 afin de contrôler la profondeur de la texture. L’augmentation du pourcentage augmente l’intensité de la texture. 4 Pour donner un effet de transparence à la trame, choisissez Transparente. Le pourcentage de texture contrôle également le degré de transparence. Ajout d’une texture personnalisée Vous pouvez également utiliser des fichiers bitmap de Fireworks et de d’autres applications. Vous pouvez utiliser les formats de fichier suivants comme textures : PNG, GIF, JPEG, BMP, TIFF et PICT (Macintosh uniquement). Lorsque vous ajoutez une nouvelle texture, son nom apparaît dans le menu déroulant du nom de trame. Pour créer une texture depuis un fichier externe : 1 Affichez les propriétés de l’objet dans le Vérificateur de propriétés et choisissez Autre dans l’un des menus déroulants Nom de la trame. 2 Accédez au fichier bitmap à utiliser comme nouvelle texture et cliquez sur Ouvrir. La nouvelle texture est ajoutée au bas de la liste Nom de la trame. 218 Chapitre 8 CHAPITRE 9 Utilisation des effets en direct Les effets en direct Macromedia Fireworks MX Live sont des enrichissements que vous pouvez appliquer aux objets vectoriels, aux images bitmap et aux textes. Les effets en direct incluent les biseaux, les estampes, les ombres portées et les néons, la correction de couleur, le flou et le renforcement. Vous pouvez appliquer des effets en direct aux objets sélectionnés directement depuis le Vérificateur de propriétés. Les effets en direct sont mis à jour automatiquement lorsque vous modifiez les objets auxquels ils sont appliqués. Après avoir appliqué un effet en direct, vous pouvez changer ses options à tout moment ou changer l’ordre des effets en direct pour tester un effet combiné. Vous pouvez activer ou désactiver les effets en direct ou les supprimer dans le Vérificateur de propriétés. Lorsque vous supprimez un effet, l’objet ou l’image reprend son apparence précédente. Vous disposez, entre autres, des effets en direct suivants Niveaux automatiques, Flou gaussien et Masque d’accentuation, qui étaient auparavant disponibles uniquement comme plug-ins irreversibles ou filtres. En outre, vous pouvez ajouter des plug-ins tiers pour les utiliser comme effets en direct dans Fireworks. Si vous préférez, vous pouvez utiliser ces filtres de manière taditionnelle à l’aide du menu Filtres. Pour plus d’informations, voir « Réglage de la couleur et du ton d’un bitmap » à la page 139. Application directe des effets Vous pouvez appliquer un ou plusieurs effets en direct aux objets sélectionnés à l’aide du Vérificateur de propriétés. Chaque fois que vous ajoutez un effet en direct à un objet, il est ajouté à la liste des effets du menu déroulant du Vérificateur de propriétés. Vous pouvez activer ou désactiver chaque effet en direct. Menu déroulant des effets du Vérificateur de propriétés 219 Lorsque vous sélectionnez des objets pour leur appliquer des effets en direct, l’emplacement des options des effets en direct diffère légèrement selon que la fenêtre du Vérificateur de propriétés est affichée en totalité ou à moitié : • Lorsque la totalité de la fenêtre est affichée, utilisez le bouton Ajouter des effets, le bouton Supprimer l’effet et la liste des effets en direct appliqués figurant dans le Vérificateur de propriétés. • Lorsque la moitié de la fenêtre est affichée, cliquez sur Modifier l’effet pour afficher le bouton Ajouter des effets, le bouton Supprimer l’effet et la liste de effets en direct appliqués. Remarque : Dans Fireworks, les opérations impliquant des effets en direct supposent que la fenêtre du Vérificateur de propriétés est affichée en totalité. Vous pouvez personnaliser chaque effet en direct en fonction de vos préférences. Lorsque vous choisissez un effet Biseau, Estampe, Ombre ou Néon, une fenêtre contextuelle s’affichée pour vous permettre de sélectionner les paramètres voulus. Lorsque vous choisissez les effets de correction de couleurs, des boîtes de dialogue s’ouvrent contenant des commandes pour ajuster les caractéristiques des couleurs, telles que les niveaux automatiques, la luminosité et le contraste, la teinte et la saturation, l’inversion des couleurs, les courbes et les trames de couleur. Lorsque vous choisissez un effet flou ou accentué, l’effet est appliqué directement à l’objet. Essayez les différents paramètres à votre disposition pour obtenir l’aspect voulu. Pour changer l’effet ultérieurement, voir « Modification des effets en direct » à la page 224. Largeur du biseau Contraste Adoucissement Angle du biseau Bouton de biseau prédéfini Fenêtre Biseau intérieur Pour appliquer directement un effet aux objets sélectionnés : 1 Cliquez sur le bouton Ajouter des effets dans le Vérificateur de propriétés, puis choisissez une effet dans le menu déroulant des effets. L’effet est ajouté à la liste des effets de l’objet sélectionné. 2 Si une fenêtre contextuelle ou une boîte de dialogue s’affiche, entrez les paramètres de l’effet et procédez de l’une des manières suivantes : • Si l’effet en direct a une boîte de dialogue, cliquez sur OK. • Si l’effet en direct a une fenêtre contextuelle, appuyez sur Entée ou cliquez n’importe où dans l’espace de travail. 3 Répétez les étapes 1 et 2 pour appliquer d’autres effets en direct. 220 Chapitre 9 Remarque : L’ordre d’application des effets en direct affecte l’ensemble de l’effet. Vous pouvez faire glisser les effets en direct pour changer leur ordre d’empilage. Pour plus d’informations, voir « Réorganisation des effets en direct » à la page 224. Conseil : Pour appliquer un effet en direct pour qu’il n’affecte qu’un ensemble de pixels d’une image, coupez et collez la sélection de pixels au lieu de créer une image bitmap, sélectionnez-la et appliquez l’effet en direct. Pour activer ou désactiver un effet appliqué à un objet : Cochez la case à côté de l’effet dans la liste des effets du Vérificateur de propriétés. Pour activer ou désactiver tous les effets appliqués à un objet : Cliquez sur le bouton Ajouter des effets dans le Vérificateur de propriétés, puis choisissez Options > Tous actifs ou Options > Tous inactifs dans le menu déroulant. Pour plus d’informations sur la suppression permanente des effets, voir « Suppression des effets en direct » à la page 225. Application de bords biseautés L’application d’un bord biseauté à un objet permet de créer une impression de relief. Vous pouvez créer un biseau intérieur ou extérieur. Rectangle avec biseau intérieur et biseau extérieur Pour appliquer un bord biseauté à un objet sélectionné : 1 Cliquez sur le bouton Ajouter des effets du Vérificateur de propriétés, puis choisissez une option de biseau dans le menu déroulant : • Biseau et estampe > Biseau intérieur • Biseau et estampe > Biseau extérieur. 2 Modifiez les paramètres d’effet dans la fenêtre contextuelle. 3 Cliquez en dehors de la fenêtre ou appuyez sur Entrée pour fermer cette fenêtre. Application d’estampes Utilisez l’effet Estampe pour donner l’impression d’une image surélevée ou renfoncée par rapport à l’arrière-plan. Objet avec estampe enfoncée et surélevée Utilisation des effets en direct 221 Pour appliquer un effet de type Estampe : 1 Cliquez sur le bouton Ajouter des effets dans le Vérificateur de propriétés, puis choisissez une option d’estampe dans le menu déroulant : • Biseau et estampe > Estampe rapportée. • Biseau et estampe > Estampe en relief. 2 Modifiez les paramètres d’effet dans la fenêtre contextuelle. Si vous voulez que l’objet d’origine apparaîsse dans la zone estampée, choisissez Afficher l’objet. 3 Lorsque vous avez terminé, cliquez en dehors de la fenêtre ou appuyez sur Entrée pour fermer cette fenêtre. Remarque : Pour assurer la compatibilité à rebours, lorsque l’effet estampe provient d’un document plus ancien, l’option Afficher l’objet est désactivée. Application d’ombres et d’effets néon Le programme Fireworks facilite l’application d’ombres portées, d’ombres intérieures et d’effets néon aux objets. Spécifiez l’angle de l’ombre pour indiquer la direction de la lumière éclairant l’objet. Effets Ombre portée, Ombre intérieure et Effet néon Pour appliquer une ombre ou une ombre intérieure : 1 Cliquez sur le bouton Ajouter des effets du Vérificateur de propriétés, puis choisissez une option d’ombre dans le menu déroulant : • Ombre et néon > Ombre portée. • Ombre et néon > Ombre intérieure. 2 Modifiez les paramètres d’effet dans la fenêtre contextuelle : • Faites glisser le curseur Distance pour définir la distance séparant l’ombre de l’objet. • Cliquez sur le puits de couleurs pour ouvrir la fenêtre contextuelle des couleurs et définir une couleur d’ombre. • • • • Faites glisser le curseur Opacité pour régler le niveau de transparence de l’ombre. 3 Lorsque vous avez terminé, cliquez en dehors de la fenêtre ou appuyez sur Entrée pour fermer cette fenêtre. Faites glisser le curseur d’adoucissement pour définir le facteur d’adoucissement de l’ombre. Utilisez la molette Angle pour définir la direction de l’ombre. Sélectionnez Emporte-pièce pour masquer l’objet et afficher l’ombre uniquement. 222 Chapitre 9 Pour appliquer un effet néon : 1 Cliquez sur le bouton Ajouter des effets du Vérificateur de propriétés, puis choisissez Ombre et Néon > Néon. 2 Modifiez les paramètres d’effet dans la fenêtre contextuelle : • Cliquez sur le puits de couleurs pour ouvrir la fenêtre contextuelle des couleurs et définir une couleur de néon. • • • • Faites glisser le curseur Largeur pour définir la largeur du néon. 3 Lorsque vous avez terminé, cliquez en dehors de la fenêtre ou appuyez sur Entrée pour fermer cette fenêtre. Faites glisser le curseur Opacité pour régler le pourcentage de transparence du néon. Faites glisser le curseur Adoucissement pour définir le facteur d’adoucissement du néon. Faites glisser le curseur Décalage pour spécifier la distance entre le rayonnement néon et l’objet. Application de filtres et de plug-ins Photoshop comme effets en direct Vous pouvez appliquer tous les filtres et plug-ins intégrés du menu Filtres comme effets en direct en utilisant le Vérificateur de propriétés. Cela vous permet de les modifier ou de les supprimer d’un objet à tout moment. Les plug-ins Photoshop 6 et 7 ne sont pas compatibles avec Fireworks MX. Sous Macintosh, les fichiers tiers fonctionnant sous Mac OS 9 sont pris en charge par Fireworks MX pour Mac OS 9 et les filtres tiers fonctionnant sous Mac OS X sont pris en charge par Fireworks MX pour Mac OS X. Remarque : Le menu Xtras des versions précédentes de Fireworks s’appelle désormais Filtres dans Fireworks MX. Les filtres Fireworks Xtras s’appellent des filtres. Plug-ins dans le menu Filtres Lorsque vous installez un plug-in Photoshop dans Fireworks, le plug-in est ajouté au menu Filtres et au Vérificateur de propriétés. Utilisez le menu Filtres pour n’appliquer les filtres et les plug-ins Photoshop que si vous êtes certain de ne pas devoir modifier ou supprimer l’effet obtenu. Vous ne pouvez supprimer un filtre que si la commande Annuler est disponible. Installation des plug-ins Photoshop Vous pouvez utiliser le Vérificateur de propriétés pour appliquer des plug-ins Photoshop comme effets en direct. Certains plug-ins Photoshop ne peuvent pas être utilisés en tant qu’effets en direct. Vous pouvez également importer des plug-ins Photoshop en pointant sur les plug-ins dans la boîte de dialogue des préférences. Pour plus d’informations, voir « Préférences de l’onglet Dossiers » à la page 435. Lorsque vous partagez un fichier Fireworks où un plug-in Photoshop est appliqué en direct, le destinataire doit disposer du plug-in sur son ordinateur pour afficher cet effet. Les effets intégrés de Fireworks, quant eux, sont enregistrés dans le fichier. Pour installer les plug-ins Photoshop : 1 Cliquez sur le bouton Ajouter des effetss dans le Vérificateur propriétés, puis choisissez Options > Rechercher les plug-ins. Utilisation des effets en direct 223 2 Ouvrez le dossier où sont installés les plug-ins Photoshop, puis cliquez sur OK. 3 Redémarrez Fireworks pour charger les plug-ins. Remarque : Si vous placez les plug-ins dans un autre dossier, recommencez la procédure ci-dessus, ou choisissez Fichier > Préférences, puis cliquez sur l’onglet Dossiers pour spécifier le chemin des plug-ins. Redémarrez ensuite Fireworks. Pour appliquer un plug-in Photoshop à un objet sélectionné en tant qu’effet en direct applicable : Cliquez sur le bouton Ajouter des effets dans le Vérificateur de propriétés, puis choisissez un effet dans le sous-menu des options. Application d’effets à un groupe d’objets Lorsque vous appliquez un effet à un groupe, cet effet est appliqué à tous les objets du groupe. Si les objets sont dissociés, ces derniers retrouvent leurs paramètres d’effet d’origine. Vous pouvez appliquer un effet à un objet d’un groupe d’objets en sélectionnant l’objet avec l’outil Sous-sélection. Pour plus de détails sur la sélection d’un groupe ou d’objets dans un groupe, voir « Sélection d’objets dans un groupe » à la page 128. Modification des effets en direct Lorsque vous cliquez sur le bouton Informations d’un effet en direct dans le Vérificateur de propriétés, une fenêtre contextuelle s’ouvre avec les paramètres en cours de l’effet pour vous permettre de les modifier. Pour modifier un effet appliqué en direct : 1 Dans le Vérificateur de propriétés, cliquez sur le bouton Informations à côté de l’effet à modifier. La fenêtre contextuelle ou la boîte de dialogue appropriée s’ouvre. Remarque : Si la moitié de la fenêtre du Vérificateur de propriétés est ouverte, cliquez sur Ajouter des effets pour ouvrir la liste des effets en direct. 2 Sélectionnez les paramètres voulus. Remarque : Si un effet n’est pas modifiable, le bouton Informations n’est pas disponible. Par exemple, vous ne pouvez pas modifier l’effet Niveaux automatiques. 3 Cliquez en dehors de la fenêtre ou appuyez sur Entrée. Réorganisation des effets en direct Vous pouvez changer l’ordre des effets appliqués à un objet. La réorganisation des effets change la séquence d’application de ces derniers, ce qui peut changer l’effet combiné. En général, les effets qui changent l’intérieur d’un objet, tels que l’effet Biseau intérieur, doivent être appliqués avant les effets affectant l’extérieur. Par exemple, appliquez l’effet Biseau intérieur avant l’effet Biseau extérieur, Néon ou Ombre. 224 Chapitre 9 Pour réorganiser les effets appliqués à un objet sélectionné : Faites glisser l’effet vers l’emplacement approprié dans le Vérificateur de propriétés. Remarque : Les effets figurant en haut de la liste sont appliqués en premier. Suppression des effets en direct Vous pouvez supprimer aisément chaque effet ou tous les effets d’un objet. Pour supprimer un effet unique appliqué à un objet sélectionné : Sélectionnez l’effet à supprimer dans la liste des effets du Vérificateur de propriétés, puis cliquez sur le bouton Supprimer les effets. Pour supprimer tous les effets d’un objet sélectionné : Cliquez sur le bouton Ajouter des effets dans le Vérificateur de propriétés et choisissez Aucun dans le menu déroulant. Création d’effets en direct personnalisés Vous pouvez enregistrer une combinaison de paramètres d’effets en direct en créant un effet en direct personnalisé. Tous les effets en direct apparaissent dans le menu déroulant Ajouer des effets du Vérificateur de propriétés et du panneau des styles. Les effets en direct sont des styles dont toutes les options de propriétés sont désélectionnée, à l’exception de l’option Effet. • Pour créer un effet en direct personnalisé, utilisez le Vérificateur de propriétés ou le panneau Styles. • Vous pouvez appiquer un effet en direct aux objets sélectionnés dans le menu déroulant Ajouter des effets ou le panneau Styles. • Vous pouvez renommer ou supprimer un effet personnalisé dans le panneau Styles. Pour créer un effet personnalisé dans le Vérificateur de propriétés : 1 Appliquez des paramètres d’effet en direct aux objets sélectionnés. Pour plus d’informations, voir « Application directe des effets » à la page 219. 2 Cliquez sur le bouton Ajouter des effets du Vérificateur de propriétés, puis choisissez Options > Enregistrer comme style. La boîte de dialogue d’ajout de style s’affiche. 3 Tapez le nom du style et cliquez sur OK. Le nom de l’effet en direct personalisé est ajouté au menu déroulant Ajouter des effets et une icône de style représentant l’effet en direct est ajoutée dans le panneau Styles. Pour créer un effet en direct personnalisé à l’aide du panneau des styles : 1 Appliquez des paramètres d’effet en direct aux objets sélectionnés. Pour plus d’informations, voir « Application directe des effets » à la page 219. 2 Sélectionnez l’option d’ajout de style dans le menu déroulant des options du panneau Styles. La boîte de dialogue d’ajout de style s’affiche. Utilisation des effets en direct 225 3 Désélectionnez toutes les propriétés (sauf la propriété Effet) entrez un nom, puis cliquez sur OK. Le nom de l’effet en direct personalisé est ajouté au menu déroulant Ajouter des effets et une icône de style représentant l’effet en direct est ajoutée dans le panneau Styles. Remarque : Si vous choisissez des propriétés supplémentaires dans la boîte de dialogue Nouveau style, le style ne figure plus dans le menu déroulant Ajouter des effets du Vérificateur de propriétés, bien qu’il reste dans le panneau Styles sous la forme d’un style type. Pour appliquer un effet en direct personnalisés à des objets sélectionnés, procédez de l’une des manières suivantes : • Cliquez sur le bouton Ajouter des effets dans le Vérificateur de propriétés, puis choisissez l’effet en direct personnalisé. • Cliquez sur l’icône de l’effet en direct personnalisé dans le panneau des styles. Vous pouvez renommer ou supprimer un effet en direct personnalisé comme n’importe quel autre style du panneau des styles. Pour plus d’informations, voir « Création et suppression de styles » à la page 256 et « Modification de styles » à la page 257. Remarque : Vous ne pouvez pas renommer ou supprimer un effet standard de Fireworks. Enregistrement d’effets en direct sous forme de commandes Vous pouvez enregistrer et réutiliser un effet en créant une commande à partir de l’effet. Avec le panneau d’historique, vous pouvez automatiser tous les effets en direct appliqués à un objet en créant une commande disponible dans le menu Commandes. Vous pouvez utiliser ces commandes dans un traitement par lot. Pour plus d’informations, voir « Exécution de commandes à l’aide d’un traitement par lots » à la page 424. Pour enregistrer des paramètres d’effets sous la forme d’une commande : 1 Appliquez les effets à l’objet. 2 Si l’historique n’est pas visible, choisissez Fenêtre > Historique. 3 Appuyez sur la touche Maj et cliquez sur les actions à enregistrer sous la forme d’une commande. 4 Utilisez l’une des méthodes suivantes : • Choisissez la commande Enregistrer sous dans le panneau Historique du menu Options. • Cliquez sur le bouton Enregistrer situé en bas du panneau Historique. Bouton Enregistrer 5 Entrez un nom de commande, puis cliquez sur OK pour l’ajouter au menu Commandes. 226 Chapitre 9 CHAPITRE 10 Calques, masquage et fondu Les calques permettent de diviser un document Macromedia Fireworks en plusieurs plans discrets, comme si les divers composants de l’illustration étaient tracés sur des couches superposées de papier calque. Un document peut être composé de plusieurs calques, et chaque calque peut contenir de nombreux objets. Dans Fireworks, le panneau des calques affiche la liste des calques et les objets contenus dans chaque calque. Les calques de Fireworks sont équivalents à des calques créés dans Photoshop 6. Les calques de Photoshop sont équivalents à des objets individuels de Fireworks. Le masquage vous permet de contrôler de manière créative les calques et les objets. Vous pouvez appliquer des masques et des modes de fondu depuis le panneau Calques. Vous pouvez également créer des masques à l’aide des options des menus Sélectionner et Modifier. Vous pouvez utiliser un objet vectoriel ou bitmap pour masquer une partie d’une image sous-jacente. Par exemple, si vous souhaitez masquer une partie d’une photographie pour entourer cette dernière d’une ellipse, vous pouvez coller une forme elliptique en tant que masque sur la photographique. Toutes les zones situées à l’extérieur de l’ellipse sont alors masquées et seule reste visible la partie de l’image située à l’intérieur de l’ellipse. Les modes de fondu offrent un autre niveau de créativité. Vous pouvez créer des effets uniques en mélangeant les couleurs d’objets qui sont superposés. Fireworks possède plusieurs modes de fondu qui permettent d’obtenir les effets désirés. Utilisation des calques Chaque objet d’un document est placé sur un calque. Vous pouvez créer des calques avant de commencer à dessiner ou en ajouter au fur et à mesure de vos besoins. La couche de base, appelée fond du document, est située au-dessous des calques, et n’est pas un calque en soi. Pour plus d’informations sur l’utilisation du fond, voir « Modification du document » à la page 97. Vous pouvez afficher l’ordre d’empilement des calques et des objets dans le panneau Calques. Ils apparaissent de bas en haut, selon leur ordre d’apparition dans le document. Fireworks superpose les calques dans leur ordre de création, en plaçant les calques les plus récents en haut de la pile. L’ordre d’empilement des calques détermine la façon dont les objets d’un calque se superposent aux objets d’un autre calque. Vous pouvez modifier l’ordre d’empliment des calques et des objets des calques. 227 Le panneau Calques affiche l’état en cours de tous les calques de l’image actuelle d’un document. Pour afficher d’autres images, vous pouvez utiliser le panneau Images ou choisir une option dans le menu déroulant Images, dans la partie inférieure du panneau Calques. Pour plus d’informations, voir « Utilisation des images » à la page 322. Le nom du calque actif apparaît en surbrillance dans le panneau Calques. Vous pouvez développer un calque pour afficher la liste de tous les objets qu’il contient. Ces objets sont présentés sous forme de vignettes. Les masques apparaissent également dans le panneau Calques. Pour modifier un masque, sélectionnez la vignette de ce masque. Vous pouvez également créer des masques bitmap à l’aide du panneau Claques. Pour plus d’informations sur les masques, voir « Masquage d’images » à la page 233. Les boutons de contrôle des modes d’opacité et de fondu figurent en haut du panneau Calques. Pour plus d’informations, voir « Réglage de l’opacité et application des fondus » à la page 254. Développer/réduire le calque Afficher/Masquer le calque Verrouillage et déverrouillage d’un calque Calque actif Supprimer le calque Nouvelle image bitmap Ajouter le masque Nouveau calque/Dupliquer Activation des calques Lorsque vous cliquez sur un calque ou un objet du calque, le calque devient le calque actif. Les objets suivants que vous dessinez, collez ou importez se trouvent initialement dans le calque actif. Pour activer un calque, procédez de l’une des manières suivantes : • Cliquez sur le nom du calque dans le panneau Calques. • Sélectionnez un objet de ce calque. Ajout et suppression de calques A partir du panneau Calques, vous pouvez ajouter de nouveaux calques, supprimer des calques inutiles et dupliquer des calques et des objets existants. Lorsque vous créez un calque, un calque vide est inséré au-dessus du calque sélectionné. Ce nouveau calque devient le calque actif et apparaît en surbrillance dans le panneau Calques. Lorsque vous supprimez un calque, le calque qui le précède devient le calque actif. 228 Chapitre 10 La duplication d’un calque créé un nouveau calque contenant les mêmes objets que le calque sélectionné. Les objets dupliqués conservent l’opacité et le mode de fondu des objets originaux. Vous pouvez ensuite modifier les objets dupliqués sans modifier l’original. Pour ajouter un calque, procédez de l’une des manières suivantes : • Cliquez sur le bouton Nouveau calque/Dupliquer, si aucun calque n’est sélectionné. • Choisissez Modifier > Insérer > Calque. • Choisissez Nouveau calque dans le menu Options du panneau Calques et cliquez sur OK. Pour supprimer un calque, procédez de l’une des manières suivantes : • Tirez le calque sur l’icône de la poubelle, dans le panneau Calques. • Sélectionnez le calque et cliquez sur l’icône de la poubelle, dans le panneau Calques. Pour dupliquer un calque, procédez de l’une des manières suivantes : • Tirez un calque sur le bouton Nouveau calque/Dupliquer. • Sélectionnez un calque et choisissez Dupliquer le calque dans le menu Options du panneau Calques. Indiquez ensuite le nombre d’exemplaires à insérer, ainsi que leur emplacement dans l’ordre de superposition. En haut : place les nouveaux calques en haut, dans le panneau Claques. Comme le calque Web est toujours le calque situé au sommet de la pile, le choix de l’option En haut place le calque dupliqué immédiatement sous le calque Web. Avant le calque actif : place les nouveaux calques au-dessus du calque sélectionné. Après le calque actif : place les nouveaux calques en dessous du calque sélectionné. En bas : place les nouveaux calques au bas, dans le panneau Calques. Pour dupliquer un objet : Maintenez enfoncée la touche Alt (Windows) ou Option (Macintosh) et faites glisser l’objet vers l’emplacement approprié. Affichage des calques Le panneau Calques affiche les objets et les calques dans une structure hiérarchique. Lorsqu’un document contient de nombreux objets et calques, le panneau Claques peut être encombré et il devient difficile d’y naviguer. La réduction de l’arborescence des calques permet d’éliminer cet encombrement. Lorsque vous devez afficher ou sélectionner des objets d’un calque, vous pouvez développer le calque. Vous pouvez également réduire ou développer simultanément tous les calques. Pour développer ou réduire l’arborescence des objets d’un calque : Cliquez sur le signe plus (+) ou moins (-) (Windows) ou sur le triangle (Macintosh) à gauche du nom du calque dans le panneau Calques. Pour développer ou réduire l’arborescence de tous les calques : Maintenez enfoncée la touche Alt et cliquez sur le signe plus (+) ou moins (-) (Windows), ou maintenez enfoncée la touche Option et cliquez sur le triangle (Macintosh) à gauche du nom du claque dans le panneau Calques. Calques, masquage et fondu 229 Organisation des calques Vous pouvez organiser les calques et les objets d’un document en les renommant et en changeant leur disposition dans le panneau Calques. Les objets peuvent être déplacés au sein d’un même calque, ou d’un calque à l’autre. Le déplacement des calques et des objets dans le panneau Calques modifie l’ordre des objets dans le document. Les objets situés en haut d’un calque apparaissent au-dessus des autres objets de ce calque dans le document. Les objets situés sur le calque de niveau supérieur apparaissent devant les objets des calques de niveau inférieur. Remarque : Le panneau Calques défile automatiquement lorsque vous faites glisser un calque ou un objet au-delà de la limite supérieure ou inférieure de la zone affichable. Pour affecter un nom à un calque ou un objet : 1 Double-cliquez sur le calque ou l’objet dans le panneau Calques. 2 Tapez le nouveau nom du calque ou de l’objet et appuyez sur Entrée. Remarque : Il est impossible de renommer le calque Web. Toutefois, vous pouvez attribuer des noms aux objets Web du calque Web, tels que les découpes et les références. Pour plus d’informations, voir « Utilisation du calque Web » à la page 232. Pour déplacer un calque ou un objet : Faites glisser le calque ou l’objet vers l’emplacement approprié dans le panneau Calques. Pour déplacer vers un autre emplacement tous les objets sélectionnés sur un calque : Faites glisser le petit indicateur bleu du calque vers un autre calque. Tous les objets sélectionnés sur le calque sont transférés simultanément vers l’autre calque. Pour copier vers un autre emplacement tous les objets sélectionnés sur un calque : Maintenez enfoncée la touche Alt (Windows) ou Option (Macintosh) et faites glisser le petit indicateur bleu du calque vers un autre calque. Tous les objets sélectionnés sur le calque sont alors copiés vers l’autre calque. 230 Chapitre 10 Protection des calques et des objets Le panneau Calques contient des options permettant de contrôler l’accessibilité des objets. Vous pouvez protéger les objets du document pour éviter de les sélectionner ou de les modifier par inadvertance. Le verrouillage d’un calque empêche la sélection et la modification des objets du calque. La fonction Modification par calque protège les objets de tous calques contre la sélection ou les modifications intempestives, mais pas ceux du claque actif. Vous pouvez également contrôler la visibilité des objets et des calques du document à l’aide du panneau Calques. Lorsqu’un objet ou un calque est masqué dans le panneau Calques, il n’apparaît pas dans le document et ne peut donc pas être sélectionné ou modifié par inadvertance. Remarque : Les calques et objets masqués ne sont pas inclus lorsque vous exportez le document. Toutefois, les objets du calque Web peuvent toujours être exportés, qu’ils soient masqués ou pas. Pour plus d’informations sur l’exportation, voir « Exportation depuis Fireworks » à la page 356. Pour verrouiller un calque : Cliquez sur le carré dans la colonne située immédiatement à gauche du nom du calque. Une icône de cadenas indique que le calque est verrouillé. Remarque : Les calques peuvent être verrouillés, mais pas les objets. Pour verrouiller plusieurs calques : Dans le panneau Claques, faites glisser le pointeur le long de la colonne Verrouillage. Pour verrouiller ou déverrouiller tous les calques : Choisissez Tout verrouiller ou Tout déverrouiller dans le menu Options du panneau Calques. Pour activer ou désactiver la fonction Modification par calque : Choisissez Modification par calque dans le menu Options du panneau Calques. La présence d’une coche signifie que la fonction Modification par calque est activée. Pour afficher ou masquer un calque ou les objets d’un calque : Cliquez dans la case de la deuxième colonne qui apparaît à gauche du nom du calque ou du nom de l’objet. L’icône représentant un oeil signifie que le calque est visible. Pour afficher ou masquer plusieurs calques ou plusieurs objets : Faites glisser le pointeur le long de la colonne Oeil, dans le panneau Claques. Pour afficher ou masquer tous les calques ou tous les objets : Choisissez Tout afficher ou Tout masquer dans le menu déroulant Options du panneau Calques. Fusion d’objets dans le panneau Calques Si vous travaillez avec des objets bitmap, vous remarquerez que le panneau Calques est vite encombré. Vous pouvez fusionner les objets dans ce panneau si l’objet sélectionné tout au bas de la pile se trouve immédiatement au-dessus d’un objet bitmap. Les objets et les bitmaps à fusionner ne doivent pas être contigus dans le panneau Calques ou se trouver sur le même calque. Calques, masquage et fondu 231 La fusion vers le bas permet de fusionner tous les objects vectoriels et bitmap sélectionnés avec l’objet bitmap qui se trouve juste au-dessous de l’objet sélectionné tout au bas de la pile. Vous obtenez un seul objet bitmap. Les objets vectoriels et bitmap fusionnés ne peuvent pas être modifiés et les possibilités de modification des objets vectoriels sont perdues. Pour fusionner des objets : 1 Dans le panneau Calques, sélectionnez l’objet ou les objets à fusionner avec un objet bitmap. Appuyez sur la touche Maj et cliquez pour sélectionner plusieurs objets. Conseil : Vous pouvez fusionner les contenu d’un claque sélectionné avec un objet bitmap correspondant à l’objet le plus haut dans le calque immédiatement situé sous le calque sélectionné. 2 Utilisez l’une des méthodes suivantes : • Choisissez Fusionner vers le bas dans le menu Options du panneau Calques. • Choisissez Modifier > Fusionner vers le bas. • Choisissez Fusionner vers le bas dans le menu contextuel qui s’affiche lorsque vous cliquez sur le bouton droit (Windows) ou maintenez enfoncée la touche Contrôle (Macintosh) et cliquez sur les objets sélectionnés du document. Le ou les objets sélectionnés sont fusionnés avec l’objet bitmap. Vous obtenez un seul objet bitmap. Remarque : La commande Fusionner vers le bas n’affecte pas les découpes, les références, ni les boutons. Partage des calques Vous pouvez partager un calque entre toutes les images dans un document. Cela permet de mettre à jour un objet sur un calque et de procéder à la mise à jour automatique de cet objet dans toutes les images. Cette fonction est particuilière utile si vous désirez que des objets tels que les éléments d’arrière-plan apparaissent dans toutes les images d’une animation. Pour partager un calque sélectionné dans toutes les images, procédez de l’une des manières suivantes : • Choisissez Partager ce calque dans le menu Options du panneau Calques. • Double-cliquez sur le nom du calque dans le panneau Calques et choisissez Utiliser par toutes les images. Utilisation du calque Web Le calque Web est un calque spécial qui apparaît au niveau supérieur de chaque document. Il est destiné à contenir les objets Web, tels que les découpes et les références, qui prennent en charge l’interactivité des documents Fireworks exportés. Pour plus d’informations sur les objets Web, voir Chapitre 12, « Découpes, survols et références », à la page 269. Il est impossible de renommer, départager, dupliquer ou supprimer le calque Web. Vous ne pouvez pas non plus fusionner les objets du calque Web. Il est toujours partagé entre toutes les images, et les objets Web sont visibles sur chaque image. Pour renommer une découpe ou une référence dans le calque Web : 1 Double-cliquez sur la découpe ou la référence dans le panneau des calques. 2 Tapez le nouveau nom et cliquez en dehors de la fenêtre ou appuyez sur Entrée. Remarque : Lorsque vous renommez une découpe, ce nom est utilisé lors de l’exportation de cette découpe. 232 Chapitre 10 Importation de groupes de calques Photoshop Lorsque des fichiers Photoshop contenant des calques sont importés dans Fireworks, chaque calque est placé en tant qu’objet séparé dans un même calque de Fireworks. Les calques groupés sont importés individuellement, comme s’ils avaient été dissociés dans Photoshop avant d’être importés dans Fireworks. L’effet de détourage des calques groupés de Photoshop est perdu lors de l’importation. Masquage d’images Comme le nom l’indique, les masques permettent de cacher ou d’afficher des parties d’un objet ou d’une image. Vous pouvez appliquer un grand nombre d’effets créatifs aux objets en utilisant toutes les techniques de masquage disponibles. Vous pouvez créer un masque faisant office de découpoir dans d’autres objets en recadrant ou détourant des objets ou des images sous-jacents avec son trajet. Vous pouvez également créer un masque faisant office de fenêtre ombrée qui permet d’afficher ou de masquer des parties des objets qui se trouvent en dessous du maque en dessinant sur le masque. Ce type de masque utilise les nuances de son aspect d’échelle de gris pour déterminer la visibilité des objets sélectionnés. Vous pouvez également créer un masque qui utilise sa propre transparence pour affecter la visibilité. Vous pouvez créer un masque à l’aide du panneau Calques ou du menu Edition, Sélection ou Modification Après avoir créé un masque, vous pouvez ajuster la position de la sélection masquée sur le document ou modifier l’apparence d’un masque en modifiant l’objet masque. Vous pouvez également appliquer des transformations au masque en totalité ou à chaque composant d’un masque. Les masques Le masque peut être un objet vectoriel ou bitmap. L’utilisation d’un objet vectoriel sous la forme d’un masque produit un masque vectoriel et l’utilisation d’un objet bitmap produit un masque bitmap. Vous pouvez également utiliser plusieurs objets ou des groupes d’objets pour créer un masque. Masques vectoriels Si vous avez utilisé d’autres applications d’illustration vectorielle, telles que Macromedia FreeHand, vous maîtrisez peut-être les masques vectoriels qu’on désigne parfois par chemins de recadrage ou collages intérieurs. Le trajet d’un masque vectoriel recadre ou rogne les objets sousjacents dans la forme de son trajet pour créer un effet cookie-cutter. Masque vectoriel appliqué à l’aide de son contour de trajectoire Calques, masquage et fondu 233 Lorsque vous créez un masque vectoriel, une vignette de masque avec une icône de plume apparaît dans le panneau des calques pour indiquer que vous avez créé un masque vectoriel. Vignette de masque vectoriel dans le panneau des calques Lorsqu’un masque vectoriel est sélectionné, le Vérificateur de propriétés affiche des informations sur l’application du masque. La moitié inférieure de la fenêtre du Vérificateur de propriétés contient d’autres propriétés permettant de modifier le trait et la trame de l’objet masque. Propriétés de masque vectoriel dans le Vérificateur de propriétés Par défaut, les masques vectoriels sont appliqués en utilisant le contour de trajectoire, mais vous pouvez également les appliquer en appliquant d’autres méthodes. Pour plus d’informations, voir « Changement de l’application des masques » à la page 248. Remarque : Les masques vectoriels créés dans Fireworks 4 et appliqués à l’aide de l’aspect d’échelle de gris sont importés dans Fireworks MX sous forme de masques bitmap non modifiables. Masques bitmap Si vous avez l’habitude de travailler avec Photoshop, vous devez maîtriser les masques de calques. Les masques bitmap Fireworks sont similaires aux masques de calques par le fait que les pixels d’un masque affectent la visibilité des objets sous-jacents. Toutefois, les masques bitmap Fireworks sont beaucoup plus souples à utiiser ; vous pouvez changer aisément leur application en utilsant l’aspect de l’échelle de gris ou leur propre transparence. En outre, le Vérificateur des propriétés Fireworks facilite l’accès aux propriétés des masques et aux options des outils bitmap et simplifie considérablement la modification des masques. Lorsqu’un masque est sélectionné, le Vérificateur de propriétés affiche des propriétés non seulement pour le masque sélectionné, mais également pour les outils de masque que vous pouvez utiliser pour modifier le masque. 234 Chapitre 10 Objets et masque bitmap d’origine appliqués avec l’aspect d’échelle de gris Vous pouvez appliquer des masques bitmap de deux manières : • Utilisation d’un objet existant pour masquer d’autres objets. Cette technique est similaire à l’application des masques vectoriels. • Création d’un masque vide. Au début, les masques vides sont totalement transparents ou totalement opaques. Un masque transparent (ou blanc) montre l’ensemble de l’objet masqué et un masque opaque (ou noir) cache l’ensemble de l’objet masqué. Vous pouvez utiliser les outils bitmap pour dessiner sur un objet ou modifier un objet masque en révélant ou en cachant les objets masqués sous-jacents. Lorsque vous créez un masque bitmap, le Vérificateur de propriétés affiche les informations sur l’application du masque. Si vous choisissez un outil bitmap lorsqu’un masque bitmap est sélectionné, le Vérificateur de propriétés affiche les propriétés du masque et des options de l’outil sélectionné pour simplifier la modification du masque. Propriétés de masque bitmap dans le Vérificateur de propriétés lorsqu’un outil bitmap est sélectionné. Par défaut, la plupart des masques bitmap sont appliqués en utilisant leur aspect d’échelle de gris, mais vous pouvez également les appliquer à l’aide de leur couche alpha. Pour plus d’informations, voir « Changement de l’application des masques » à la page 248. Remarque : Les masques d’échelle de gris Fireworks MX se comportent désormais pratiquement comme les masques des autres applications graphiques. Les masques d’échelle de gris créés dans Fireworks MX diffèrent de ceux créés dans les versions précédentes de Fireworks dans la mesure où le blanc révèle toujours les objets masqués, alors que le noir les masque. Cela diffère de la version Fireworks 4 dans laquelle un masque noir révèle les objets sous-jacents et un masque blanc les masque. Calques, masquage et fondu 235 Création d’un masque à partir d’un objet existant Un masque peut être créé à partir d’un objet existant. Lorsqu’il est utilisé comme masque, le contour de trajectoire d’un objet vectoriel peut être utilisé pour couper ou recadrer d’autres objets. Lorsque vous utilisez un objet bitmap en tant masque, la luminosité de ses pixels ou de sa transparence affecte la visibilité des autres objets. Masquage des objets à l’aide de la commande Coller en tant que masque La commande Coller en tant que masque permet de créer des masques en masquant un objet ou un groupe d’objets à l’aide d’un autre objet. La commande crée un masque vectoriel ou bitmap selon le type d’objet masque que vous utilisez. Lorsque vous utilisez un objet vectoriel en tant que masque, la commande Coller en tant que masque crée un masque vectoriel qui recadre ou coupe les objets masqués à l’aide du contour de trajectoire de l’objet vectoriel. Lorsqu’une image bitmap est utilisée en tant que masque, la commande Coller en tant que masque crée un masque bitmap qui affecte la visibilité des objets masqués en utilisant les valeurs d’échelle de gris de l’objet bitmap. Pour créer un masque à l’aide de la commande Coller en tant que masque : 1 Sélectionnez l’objet à utiliser comme masque. Maintenez enfoncée la touche Maj et sélectionnez les différents objets. Remarque : L’utilisation de plusieurs objets en tant que masque crée toujours un masque vectoriel, même si les deux objets sont des bitmaps. 2 Positionnez la sélection pour qu’elle recouvre l’objet ou le groupe d’objets à masquer. L’objet ou les objets à utiliser comme masque peuvent se trouver devant ou derrière l’objet ou les groupes d’objets à masquer. 3 Choisissez Edition > Couper pour couper l’objet ou les objets à utiliser comme masque. 236 Chapitre 10 4 Sélectionnez l’objet ou le groupe à masquer. Si vous masquez plusieurs objets, les objets doivent être groupés. Pour plus d’informations sur le regroupement des objets, voir « Association d’objets » à la page 127. 5 Pour coller des masques, procédez de l’une des manières suivantes : • Choisissez Edition > Coller en tant que masque. • Choisissez Modification > Masque > Coller en tant que masque. Masque appliqué Masque dans le panneau des calques Calques, masquage et fondu 237 Masquage des objets à l’aide de la commande Coller dedans Si vous utilisez Macromedia FreeHand, vous devez connaître la commande de création de masques Coller dedans. Cette commande crée un masque vectoriel ou bitmap en fonction du type d’objet masque que vous utilisez. La commande Coller dedans crée un masque en remplissant un trajet fermé ou un objet bitmap avec d’autres objets : graphique vectoriel, texte ou images bitmap. Le trajet lui-même est parfois appelé trajet de détourage et les éléments qu’ils contiennent s’appellent contenu ou collages intérieurs. Le contenu qui s’étend au-delà du trajet de détourage est masqué. La commande Coller dedans de Fireworks produit un effet similaire à celui de la commande Coller en tant que masque, mais présente deux différences : • Avec la commande Coller dedans, l’objet que vous coupez et collez est l’objet à masquer. Comparez cette commande avec la commande Coller en tant que masque dans laquelle l’objet que vous coupez et collez est l’objet masque. • Avec les masques vectoriels, La commande Coller dedans affiche le trait et la trame de l’objet masque lui-même. Par défaut, le trait et la trame d’un masque vectoriel ne sont pas visibles lorsque vous utilisez la commande Coller en tant que masque. Toutefois, vous pouvez activer ou désactiver l’affichage du trait ou de la trame d’un masque vectoriel à l’aide du Vérificaeur de propriétés. Pour plus d’informations, voir « Changement de l’application des masques » à la page 248. Pour créer un masque à l’aide de la commande Coller dedans : 1 Sélectionnez l’objet ou les objets à utiliser comme contenu à coller dedans. 2 Positionnez l’objet ou les objets pour qu’ils recouvrent l’objet de destination du collage. Remarque : L’ordre d’empilage n’est pas important dès lors que les objets à utiliser comme contenu à coller dedans reste sélectionnés. Ces objets peuvent se trouver au-dessus ou en dessous de l’objet masque dans le panneau des calques. 3 Choisissez Edition > Couper pour placer les objets dans le Presse-papiers. 238 Chapitre 10 4 Sélectionnez l’objet dans lequel vous voulez coller le contenu. Cet objet sera utilisé comme masque ou trajet de détourage. 5 Choisissez Edition > Coller dedans. Les objets collés apparaissent dans l’objet masque ou sont détourés par le masque. Utilisation de texte comme masque Les masques de texte sont un type de masque vectoriel et sont appliqués de la même manière que les masques utilisant des objets existants. Vous utilisez simplement le texte comme un objet masque. La méthode la plus courante pour appliquer un masque de texte consiste à utiliser son contour de trajectoire. Cependant, vous pouvez appliquer un masque de texte en utilisant son aspect d’échelle de gris. Masque de texte appliqué en utilisant son contour de trajectoire Calques, masquage et fondu 239 Pour plus d’informations, voir « Création d’un masque à partir d’un objet existant » à la page 236. Pour plus d’informations sur les différentes méthodes d’application de masques, voir « Changement de l’application des masques » à la page 248. Masquage d’objets à l’aide du panneau Calques La méthode la plus rapide pour ajouter un masque bitmap transparent vide consiste à utiliser le panneau Calques. Le panneau Calques ajoute un masque blanc à un objet que vous pouvez personnaliser en dessinant dessus avec les outils bitmap. Remarque : Pour plus d’informations sur la création de masques opaques (noirs) vides, voir « Masquage d’objet à l’aide des commandes Révéler la sélection et Masquer la sélection » à la page 241. Pour créer un masque bitmap à l’aide du panneau Calques : 1 2 3 4 5 6 Sélectionnez l’objet à masquer. Cliquez sur le bouton Ajouter masque, dans la partie inférieure du panneau Calques. Un masque vide est appliqué à l’objet sélectionné. Le panneau Calques affiche une vignette de masque représentant le masque vide. Si l’objet masqué est un objet bitmap, utilisez également l’un des outils Cadre de sélection ou lasso pour créer une sélection de pixels. Choisissez un outil de dessin bitmap dans le panneau Outils, tel que Pinceau, Crayon, Pot de peinture ou Dégradé. Définissez les options appropriées de l’outil dans le Vérificateur de propriétés. Le masque étant sélectionné, dessinez sur le masque vide. Dans les zones où vous dessinez, l’objet masqué sous-jacent est masqué. Image d’origine; masque appliqué Masque tel qu’il apparaît dans le panneau Calques 240 Chapitre 10 Remarque : Pour plus d’informations sur la modification de l’apparence d’un masque bitmap en dessinant dessus, voir « Modification de l’aspect d’un masque » à la page 247. Masquage d’objet à l’aide des commandes Révéler la sélection et Masquer la sélection Le sous-menu Modification > Masque contient plusieurs options permettant d’appliquer des masques bitmap vides aux objets : Tout révéler applique un masque transparent vide à un objet qui révèle la totalité de l’objet. Cette commande revient à cliquer sur le bouton Ajouter masque dans le panneau Calques. Tout masquer applique un masque opaque vide à un objet qui cache la totalité de l’objet. Révéler la sélection peut être utilisé uniquement avec des sélection de pixels. La commande applique un masque de pixels transparent en utilisant la sélection de pixels en cours. Les autres pixels de l’objet bitmap sont cachés. Masquer la sélection peut être utilisé uniquement avec des sélections de pixels. La commande applique un masque de pixels opaque en utilisant la sélection de pixels en cours. Les autres pixels de l’objet bitmap sont visibles. Pour créer un masque à l’aide des commandes Tout révéler et Masquer tout : 1 Sélectionnez l’objet à masquer. 2 Exécutez ensuite l’une des opérations suivantes pour créer le masque : • Choisissez Modification > Masque > Tout révéler pour afficher l’objet. • Choisissez Modification > Masque > Masquer tout pour cacher l’objet. 3 Choisissez un outil de dessin bitmap dans le panneau Outils, tel que Pinceau, Crayon ou Pot de peinture. 4 Définissez les options appropriées de l’outil dans le Vérificateur de propriétés. Si vous avez exécuté la commande Masquer tout, vous devez choisir une couleur autre que le noir. 5 Dessinez sur le masque vide. Dans les zones dans lesquelles vous dessinez, l’objet masqué sousjacent sera masqué ou visible, selon le type de masque que vous avez appliqué. Remarque : Pour plus d’informations sur la modification de l’apparence d’un masque bitmap en dessinant dessus, voir « Modification de l’aspect d’un masque » à la page 247. Pour créer un masque à l’aide des commandes Révéler la sélection et Masquer la sélection : 1 Choisissez la baguette magique ou un outil Cadre de sélection ou Lasso dans le panneau Outils. Calques, masquage et fondu 241 2 Sélectionnez des pixels dans un bitmap. Image d’origine ; pixels sélectionnés à l’aide de la baguette magique 3 Exécutez ensuite l’une des opérations suivantes pour créer le masque : • Choisissez Modification > Masque > Révéler la sélection pour afficher la zone définie par les pixels sélectionnés. • Choisissez Modification > Masque > Masquer la sélection pour masquer la zone définie par les pixels sélectionnés. Résultats des commandes Révéler la sélection et Masquer la sélection Un masque bitmap est appliqué à l’aide de la sélection de pixels. Vous pouvez modifier davantage le masque pour afficher ou masquer les pixels restants de l’objet masqué en utilisant les outils bitmap du panneau Outils. Pour plus d’informations sur la modification de l’apparence d’un masque bitmap en dessinant dessus, voir « Modification de l’aspect d’un masque » à la page 247. 242 Chapitre 10 Importation et exportation de masques de calques Photoshop Dans Photoshop, vous pouvez masquer les images à l’aide de masques de calques ou de calques groupés. Fireworks vous permet d’importer des images employant des masques de calques sans perdre la possibilité de les modifier, et sans altérer leur apparence. Les masques de calques sont importés sous forme de masques bitmap. Les masques Fireworks peuvent être également exportés vers Photoshop. Ils sont alors convertis en masques de calques Photoshop. Si l’objet masqué contient du texte que vous voulez rendre modifiable dans Photoshop, vous devez choisir Conserver le caractère modifiable et sacrifier l’aspect lors de l’exportation. Remarque : Si le texte est utilisé comme objet masque, il est converti en bitmap et ne peut plus être modifié comme texte une fois importé dans Photoshop. Regroupement d’objets pour former un masque Vous pouvez grouper au moins deux objets pour créer un masque. Le premier objet devient l’objet masque. Vous pouvez grouper des objets comme masques bitmap ou vectoriels. L’ordre d’empilage détermine le type de masque appliqué. Si le premier objet est un objet vectoriel, le résultat est un masque vectoriel. S’il correspond à un objet bitmap, le résultat est un masque bitmap. Remarque : Pour plus d’informations sur les masques vectoriels et bitmap, voir « Les masques » à la page 233. Pour grouper des objets pour créer un masque : 1 Maintenez enfoncée la touche Maj et cliquez sur deux objets superposés au moins. Vous pouvez sélectionner les objets sur différents calques. Calques, masquage et fondu 243 2 Choisissez Modification > Masque > Grouper en tant que masque. Modification de masques Vous pouvez modifier les masques de différentes manières. En modifiant la position, la forme et la couleur d’un masque, vous pouvez changer la visibilité des objets masqués. Vous pouvez également changer le type d’un masque et son application. En outre, les masques peuvent être remplacés, désactivés ou supprimés. Les modifications apportées à un masque sont immédiatement visibles, même si l’objet masque n’est pas visible sur le document. La vignette de masque du panneau Calques indiquent les modifications apportées au masque. Les objets masqués peuvent être également modifiés. Vous pouvez réorganiser les objets masqués sans déplacer le masque. Vous pouvez également ajouter des objets masqués à un groupe de masques existant. Sélection de masques et d’objets masqués à l’aide de vignettes de masques Les masques et les objets masqués peuvent être aisément identifiés et sélectionnés à l’aide des vignettes, dans le panneau Calques. Les vignettes vous permettent aisément de sélectionner et de modifier uniquement le masque ou les objets masqués sans affecter les autres objets. Lorsque vous sélectionnez la vignette d’un masque, son icône apparaît à côté du masque dans le panneau des calques et les propriétés du masque figurent dans le Vérificateur des propriétés dans lequel vous pouvez les modifier. 244 Chapitre 10 Pour sélectionner un masque : Cliquez sur la vignette du masque dans le panneau des calques. Lorsque vous sélectionnez une vignette de masque dans le panneau des calques, la vignette apparaît en jaune. Pour sélectionner des objets masqués : Cliquez sur la vignette de l’objet masqué dans le panneau des calques. Lorsque vous sélectionnez une vignette d’objet masqué dans le panneau des calques, la vignette apparaît en bleu clair. Sélection de masques et d’objets masqués à l’aide de l’outil Sous-sélection Utilisez l’outil Sous-sélection pour sélectionner des masques et des objets masqués individuels sur le document sans sélectionner les autres composants du masque. Lorsque vous sélectionnez un masque ou un objet masqué avec l’outil Sous-sélection, le Vérificateur de propriétés affiche les propriétés de l’objet sélectionné. Pour sélectionner un masque ou un objet masqué de manière indépendante : Cliquez avec l’outil Sous-sélection sur l’objet dans le document. Lorsqu’ils sont sélectionnés, les masques apparaissent en jaune et les objets masqués en bleu clair. Déplacement de masques et d’objets masqués Vous pouvez repositionner les masques et les objets masqués. Vous pouvez les déplacer ensemble ou individuellement. Pour déplacer un masque et ses objets masqués simultanément : 1 A l’aide de l’outil Pointeur, sélectionnez le masque dans le document. 2 Faites glisser le masque vers son nouvel emplacement, sans tirer la poignée de déplacement pour ne pas déplacer l’objet masqué du masque séparément. Calques, masquage et fondu 245 Pour déplacer les masques et les objets masqués indépendamment en les déliant : 1 Cliquez sur l’icône de lien du masque dans le panneau des calques. Cette opération permet de dissocier les masques des objets masqués pour les déplacer indépendamment. icône Lien 2 Sélectionnez la vignette de l’objet (masque ou objets masqués) à déplacer. 3 A l’aide de l’outil Pointeur, faites glisser l’objet ou les objets masqués sur le document. Remarque : Si vous déplacez des objets masqués, tous les objets masqués sont déplacés simultanément. 4 Cliquez entre les vignettes des masques dans le panneau des calques. Cette opération permet de relier les objets masqués au masque. Pour déplacer un masque indépendamment à l’aide de sa poignée de déplacement : 1 A l’aide de l’outil Pointeur, sélectionnez le masque dans le document. 2 Choisissez l’outil Sous-sélection et faites glisser la poignée de déplacement du masque vers le nouvel emplacement. Pour déplacer les objets masqués indépendamment du masque à l’aide de la poignée de déplacement : 1 A l’aide de l’outil Pointeur, sélectionnez le masque dans le document. 2 Faites glisser la poignée de déplacement vers le nouvel emplacement. 246 Chapitre 10 Les objets sont déplacés sans modifier la position du masque. Remarque : S’il existe plusieurs objets masqués, tous les objets masqués sont déplacés simultanément. Pour déplacer les objets masqués indépendamment les uns des autres : Cliquez avec l’outil Sous-sélection sur l’objet pour le sélectionner, puis faites glisser l’objet. C’est la seule méthode permettant de sélectionner et de déplacer un objet masqué sans affecter les autres objets masqués. Modification de l’aspect d’un masque En modifiant la forme et la couleur d’un masque, vous pouvez changer la visibilité des objets masqués. Vous pouvez modifier la forme d’un masque bitmap en dessinant dessus avec les outils bitmap. Il est possible de modifier la forme d’un masque vectoriel en déplaçant les points de l’objet masqué. Lorsqu’un masque est appliqué avec son aspect d’échelle de gris, vous pouvez modifier ses couleurs pour changer l’opacité des objets masqués sous-jacents. L’utilisation de couleurs de demiton sur un masque d’échelle de gris rend les objets masqués translucides. Les couleurs claires affichent les objets masqués et les couleurs sombres les masquent et affichent l’arrière-plan. Vous pouvez également modifier un masque en lui ajoutant des objets masques. En outre, les outils de transformation peuvent être également utiliser pour modifier les masques. Pour modifier la forme d’un masque sélectionné, procédez de l’une des manières suivantes : • Dessinez sur le masque bitmap avec n’importe quel outil de dessin bitmap. • A l’aide de l’outil Sous-sélection, déplacez les points d’un objet masque vectoriel. Pour modifier la couleur d’un masque sélectionné, procédez de l’une des manières suivantes : • Pour les masques bitmap en échelle de gris, utilisez les outils bitmap pour dessiner sur le masque en utilisant diverses valeurs d’échelle de gris. • Pour les masques vectoriels en échelle de gris, changez la couleur de l’objet masque. Remarque : Utilisez des couleurs claires pour afficher les objets masqués et des couleurs sombres pour les cacher. Pour modifier un masque en ajoutant des objets masque : 1 Choisissez Edition > Couper pour couper l’objet ou les objets sélectionnés à ajouter. Calques, masquage et fondu 247 2 Sélectionnez la vignette de l’objet masqué dans le panneau des calques. 3 Choisissez Edition > Coller en tant que masque. 4 Choisissez Ajouter lorsqu’un message vous demande si vous voulez remplacer le masque ou y ajouter des objets. L’objet ou les objets sont ajoutés au masque. Pour modifier un masque à l’aide des outils de transformation : 1 A l’aide de l’outil Pointeur, sélectionnez le masque dans le document. 2 Dans le sous-menu Modification > Transformer, choisissez un outil ou une commande de transformation pour appliquer une transformation au masque. Pour plus d’informations sur l’utilisation des outils de transformation, voir « Transformation et distorsion d’objets sélectionnés et sélections » à la page 123. La transformation est appliquée au masque et à ses objets masqués. Remarque : Pour appliquer une transformation à l’objet masqué uniquement, déliez-le d’abord des autres objets masque du panneau des calques, puis exécutez la transformation. Changement de l’application des masques Vous pouvez utiliser le Vérificateur de propriétés pour vous assurer que vous modifiez un masque et pour identifier le type de masque que vous utilisez. Lorsqu’un masque est sélectionné, le Vérificateur de propriétés permet de changer de méthode d’application du masque. Si la fenêtre du Vérificateur de propriétés est réduite, cliquez sur la flèche d’extension pour afficher toutes les propriétés. Par défaut, les masques vectoriels sont appliqués avec leur contour de trajectoire. Le contour de trajectoire ou le texte est utilisé comme masque. Vous pouvez également afficher le trait et la trame du masque. Cela revient à utiliser la commande Coller dedans pour créer des masques. Pour plus d’informations, voir « Création d’un masque à partir d’un objet existant » à la page 236. Masque vectoriel appliqué avec son contour de trajectoire et avec l’option Afficher la trame et le trait activée 248 Chapitre 10 En appliquant un masque bitmap avec son canal alpha, vous pouvez créer un masque qui ressemble à un masque vectoriel appliqué avec son contour de trajectoire. Lorsque vous appliquez un masque avec son canal alpha, la transparence de l’objet masque affecte la visibilité de l’objet à masquer. Masque appliqué avec son canal alpha Les masques vectoriels et bitmap peuvent être appliqués avec leur aspect d’échelle de gris. Par défaut, les masques bitmap sont appliqués avec leur aspect d’échelle de gris. Lorsque vous appliquez un masque avec son aspect d’échelle de gris, la luminosité des pixels détermine le pourcentage d’affichage de l’objet masqué. Les pixels clairs laissent apparaître l’objet masqué. Les pixels sombres du masque dissimulent l’image et laissent apparaître l’arrière-plan. L’application de masques avec leur aspect d’échelle de gris crée des effets intéressants si l’objet masque contient un motif ou une trame de dégradé. Masque vectoriel avec une trame de motif appliqué avec son aspect d’échelle de gris Vous pouvez également convertir les masques vectoriels en masques bitmap, mais vous ne pouvez pas convertir des masques bitmap en masques vectoriels. Pour plus d’informations sur les masques vectoriels et bitmap, voir « Les masques » à la page 233. Pour appliquer un masque vectoriel avec son contour de trajectoire : Si un masque vectoriel est sélectionné, choisissez Contour de trajectoire dans le Vérificateur de propriétés. Calques, masquage et fondu 249 Pour afficher le trait et la trame d’un masque vectoriel : Dans le Vérificateur de propriétés, choisissez Afficher la trame et le trait, si le masque vectoriel sélectionné a été appliqué avec son contour de trajectoire. Pour appliquer un masque avec son canal alpha : Si un masque bitmap est sélectionné, choisissez Canal alpha dans le Vérificateur de propriétés. Pour appliquer un masque vectoriel ou bitmap avec son aspect d’échelle de gris : Si un masque est sélectionné, choisissez Aspect échelle de gris dans le Vérificateur de propriétés. Pour convertir un masque vectoriel en masque bitmap : 1 Dans le panneau Calques, sélectionnez la vignette de l’objet masque. 2 Choisissez Modification > Fusionner la sélection. Ajout d’objets à une sélection masquée Vous pouvez ajouter plusieurs objets à une sélection masquée existante. Pour ajouter des objets masqués à une sélection masquée : 1 Choisissez Edition > Couper pour couper l’objet ou les objets sélectionnés à ajouter. 2 Dans le panneau Calques, sélectionnez la vignette de l’objet masqué. 3 Choisissez Edition > Coller dedans. L’objet ou les objets sont ajoutés aux objets masqués. Remarque : L’exécution de la commande Coller dedans sur un masque existant ne permet pas d’afficher le trait et la trame de l’objet masque, à moins que le masque d’origine ait été appliqué avec son trait et sa trame. Remplacement, désactivation et suppression de masques Vous pouvez remplacer un masque par un nouvel objet masque. Vous pouvez également désactiver ou supprimer un masque. La désactivation d’un masque cache le masque temporairement. La suppression le supprime définitivement. Pour remplacer un masque : 1 Choisissez Edition > Couper pour couper l’objet ou les objets sélectionnés à utiliser comme masque. 2 Dans le panneau Calques, sélectionnez la vignette de l’objet masqué, puis choisissez Edition > Coller en tant que masque. 3 Cliquez sur Remplacer lorsqu’un message vous demande si vous voulez remplacer ou ajouter le masque existant. Le masque objet est remplacé par le nouveau. Pour désactiver ou activer un masque sélectionné, procédez de l’une des manières suivantes : • Choisissez Désactiver le masque ou Activer le masque dans le menu Options du panneau Calques. 250 Chapitre 10 • Choisissez Modification > Masque > Désactiver le masque. Un X rouge apparaît sur la vignette du masque lorsqu’il est désactivé. Cliquez sur X pour activer le masque. Pour suppprimer un masque sélectionné : 1 Pour supprimer le masque, procédez de l’une des manières suivantes : • Choisissez Supprimer le masque dans le menu Options du panneau Calques. • Choisissez Modification > Masque > Supprimer le masque. • Tirez la vignette du masque sur l’icône de la poubelle, dans le panneau Calques. 2 Avant de supprimer le masque, indiquez si vous voulez appliquer ou annuler l’effet du masque sur les objets masqués : Appliquer permet de conserver les modifications que vous effectuez dans l’objet, mais le masque ne peut plus être modifié. Si l’objet à masquer est un objet vectoriel, le masque et l’objet vectoriel sont convertis en image bitmap. Rejeter permet d’annuler tous les changements effectués et restaure l’état d’origine de l’objet. Annuler annule la suppression et laisse le masque intact. Fondu et transparence La création d’une image composite est une technique consistant à faire varier la transparence ou l’interaction des couleurs de plusieurs objets superposés. Dans Fireworks, les modes de fondu permettent de créer des images composites. Les modes de fondu permettent également de contrôler l’opacité des objets et des images. Les modes de fondu Le choix d’un mode de fondu permet de l’appliquer à tout l’aspect des objets sélectionnés. Les objets d’un document ou d’un calque peuvent avoir des modes de fondu différents de ceux des autres objets du document ou du calque. Lorsque des objets ayant des modes de fondu différents sont associés, ces modes sont remplacés par le mode de fondu du groupe. La dissociation des objets restaure le mode de fondu individuel de chacun de ces objets. Un mode de fondu contient les éléments suivants : La couleur de fondu est L’opacité est la couleur à laquelle est appliquée le mode de fondu. le degré de transparence à appliquer au mode de fondu. La couleur de base est la couleur des pixels sous la couleur de fondu. La couleur résultante est le résultat de l’effet du mode de fondu sur la couleur de base. Voici les divers modes de fondu de Fireworks : Normal aucun mode de fondu n’est appliqué. Multiplicateur multiplie la couleur de base par la couleur de fondu, ce qui produit des couleurs plus sombres. Multiplicateur multiplie la couleur inverse de la couleur de fondu par la couleur de base, ce qui produit un effet blanchissant. Calques, masquage et fondu 251 Foncer sélectionne la couleur la plus dense, entre la couleur de fondu et la couleur de base, pour l’utiliser comme couleur résultante. Seuls sont remplacés les pixels qui sont plus clairs que la couleur de fondu. Eclaircir sélectionne la couleur la plus claire, entre la couleur de fondu et la couleur de base, pour l’utiliser comme couleur résultante. Seuls sont remplacés les pixels qui sont plus sombres que la couleur de fondu. Différence soustrait la couleur de fondu de la couleur de base, ou la couleur de base de la couleur de fondu. La couleur la moins lumineuse est soustraite de la couleur la plus lumineuse. Teinte combine la valeur de teinte de la couleur de fondu avec la luminance et la saturation de la couleur de base afin de créer la couleur résultante. Saturation combine la saturation de la couleur de fondu avec la luminance et la teinte de la couleur de base afin de créer la couleur résultante. Couleur combine la teinte et la saturation de la couleur de fondu avec la luminance de la couleur de base afin de créer la couleur résultante, tout en préservant les niveaux de gris pour les monochromes et en modifiant la teinte des images en couleur. Luminosité combine la luminance de la couleur de fondu avec la teinte et la saturation de la couleur de base. Inverser inverse Nuance ajoute la couleur de base. du gris à la couleur de base. Effacer supprime 252 Chapitre 10 tous les pixels de la couleur de base, y compris ceux de l’image d’arrière-plan. Exemples de mode de fondu Image d’origine Normal Multiplicateur Ecran Foncer Eclaircir Différence Teinte Saturation Couleur Luminosité Inverser Nuance Effacer Calques, masquage et fondu 253 Réglage de l’opacité et application des fondus Vous pouvez utiliser le Vérificateur de propriétés ou le panneau Calques pour régler l’opacité des objets sélectionnés et appliquer des modes de fondu. Une opacité de 100 rend un objet totalement opaque. La valeur 0 (zéro) donne un objet complètement transparent. Vous pouvez également définir un mode de fondu et une opacité avant de dessiner un objet. Pour définir un mode de fondu et une opacité avant de dessiner un objet : Après avoir sélectionné l’outil approprié dans le panneau Outils, définissez les options de fondu et d’opacité dans le Vérificateur de propriétés avant de dessiner l’objet. Remarque : Les options de fondu et d’opacité ne sont pas disponibles avec tous les outils. Pour définir un mode de fondu et un niveau d’opacité sur des objets existants : 1 Entre deux objets superposés, sélectionnez celui qui se trouve au-dessus de l’autre. 2 Choisissez une option de fondu dans le menu déroulant Mode de fondu du Vérificateur de propriétés ou du panneau Calques. 3 Choisissez une valeur avec le curseur, dans la zone Opacité, ou tapez une valeur dans le champ. Pour définir un mode de fondu et un niveau d’opacité par défaut à appliquer aux objets que vous dessinez : 1 Choisissez Sélection > Aucune sélection pour éviter d’appliquer un mode de fondu et une opacité par inadvertance. 2 Après avoir sélectionné un outil de dessin vectoriel ou bitmap, choisissez un mode de fondu et un niveau d’opacité dans le Vérificateur de propriétés. Le mode de fondu et le niveau d’opacité que vous choisissez seront utilisés par défaut pour tous les nouveaux objets que vous dessinez avec cet outil. Effet en direct de la couleur de trame Fireworks dispose également d’une fonction d’effets en direct qui permet de régler la couleur d’un objet en modifiant son opacité ou son fondu. Cette fonction, appelé Couleur de trame, produit le même effet que la superposition d’un objet sur un autre objet utilisant un niveau d’opactité et un fondu différents. Pour plus d’informations sur l’effet en direct de la couleur de trame, voir Chapitre 9, « Utilisation des effets en direct », à la page 219. 254 Chapitre 10 CHAPITRE 11 Utilisation des styles, des symboles et des adresses URL Macromedia Fireworks MX fournit trois panneaux qui permettent de conserver et de réutiliser des styles, des symboles et des adresses URL. Les styles sont stockés dans le panneau Styles, les symboles dans le panneau Bibliothèque et les adresses URL dans le panneau URL. Par défaut, ces trois panneaux sont placés dans le groupe de panneaux Actifs. Le panneau Styles contient un jeu de styles Fireworks prédéfinis. En outre, si vous avez créé une combinaison de traits, de trames et d’autres attributs que vous voulez réutiliser, vous pouvez enregistrer ces attributs sous forme de style. Plutôt que de recréer ces attributs à chaque fois, il suffit de les enregistrer dans le panneau Styles et d’appliquer ensuite cette combinaison d’attributs à d’autres objets. Fireworks dispose de trois types de symboles : symbole graphique, d’animation et de bouton. Chaque type possède des caractéristiques exclusives pour une utilisation spécifique. Vous pouvez créer de nouveaux symboles, dupliquer, importer et modifier des symboles à l’aide du panneau Bibliothèque. Pour toute information sur les fonctions spécifiques intégrées aux symboles d’animation et de bouton, voir Chapitre 14, « Création d’animations », à la page 317 et Chapitre 13, « Création de boutons et de menus déroulants », à la page 295. Une adresse URL, ou Uniform Resource Locator (localisateur uniforme de ressources), est l’adresse d’une page ou d’un fichier spécifique sur l’Internet. Si vous utilisez la même URL à plusieurs reprises, vous pouvez l’ajouter au panneau URL. Vous pouvez organiser vos URL et les grouper en bibliothèques d’URL. Utilisation des styles Vous pouvez enregistrer et réutiliser un ensemble prédéfini d’attributs de trame, de trait, d’effet et de texte, en créant un style. Lorsque vous appliquez un style à un objet, celui-ci reprend les caractéristiques de ce style. 255 Fireworks possède de nombreux styles prédéfinis. Vous pouvez ajouter, modifier ou supprimer des styles. Le CD-ROM de Fireworks et le site Web de Macromedia proposent de nombreux autres styles prédéfinis que vous pouvez importer dans Fireworks. Vous pouvez également exporter des styles et les partager avec d’autres utilisateurs de Fireworks, ou importer des styles depuis d’autres documents Fireworks. Remarque : Les styles ne peuvent pas être appliqués aux objets bitmap. Application d’un style Le panneau Styles permet de créer, de stocker et d’appliquer des styles à des objets ou à du texte. Panneau Styles Lorsque vous appliquez un style à un objet, vous pouvez modifier ce style par la suite sans affecter l’objet original. Fireworks ne garde pas la trace du style que vous avez appliqué à un objet. Si vous supprimez un style personnalisé, vous ne pouvez plus le récupérer. En revanche, si vous supprimez l’un des styles fournis avec Fireworks, vous pouvez le récupérer à l’aide de la commande Réinitialiser les styles dans le menu Options du panneau Styles. Toutefois, une réinitialisation des styles supprimera les styles personnalisés que vous avez créés. Pour appliquer un style à un objet ou à un bloc de texte : 1 Choisissez Fenêtre > Styles pour afficher le panneau Styles. 2 Dans le panneau Styles, cliquez sur le nom d’un style. Création et suppression de styles Vous pouvez créer un style basé sur les attributs d’un objet sélectionné. Le style sera affiché dans le panneau Styles. Vous pouvez également supprimer des styles du panneau Styles. Les attributs suivants peuvent être enregistrés dans un style : • Type de remplissage et couleur, y compris des attributs de motifs, de textures et de dégradé de vecteur tels que l’angle, la position et l’opacité 256 Chapitre 11 • Type de trait et couleur • Effets • Attributs de texte tels que la police, la taille du point, le style (gras, italique ou souligné), l’alignement, l’anticrénelage, le crénage automatique, l’échelle horizontale, le crénage et l’interlignage Pour créer un nouveau style : 1 Créez ou sélectionnez un objet vectoriel ou du texte avec les attributs de trait, de trame, d’effet ou de texte désirés. 2 Cliquez sur le bouton Nouveau style dans la partie inférieure du panneau Styles. 3 Dans la boîte de dialogue Nouveau Style, choisissez les attributs devant être enregistrés comme faisant partie du style. Remarque : Pour enregistrer d’autres attributs de texte non listés, tels que l’alignement, l’anticrénelage, le crénage automatique, l’échelle horizontale, le crénage et l’interlignage, choisissez l’option Texte autre. 4 Nommez le style, si vous le désirez, et cliquez sur OK. Une icône représentant le style apparaît dans le panneau Styles. Pour créer un nouveau style basé sur un style existant : 1 Appliquez le style existant à l’objet sélectionné. 2 Modifiez les attributs de cet objet. 3 Enregistrez ces attributs en créant un nouveau style, comme décrit dans la procédure précédente. Pour supprimer un style : 1 Dans le panneau Styles, cliquez sur le nom d’un style. Appuyez sur la touche Maj et cliquez pour sélectionner des styles multiples ; appuyez sur la touche Contrôle (Windows) ou sur Commande (Macintosh) et cliquez pour sélectionner des styles multiples non contigus. 2 Cliquez sur le bouton Supprimer les styles dans le panneau Styles. Modification de styles Vous pouvez changer les attributs contenus dans un style en modifiant le style à partir du panneau Styles. Pour modifier un style : 1 Choisissez Sélection > Aucune sélection pour désélectionner tous les objets du document. 2 Dans le panneau Styles, double-cliquez sur le nom d’un style. 3 Dans la boîte de dialogue Modifier le style, choisissez ou désactivez les composants des attributs à appliquer. La boîte de dialogue Modifier le style possède les mêmes options que la boîte de dialogue Nouveau style. Pour plus de détails sur la sélection d’attributs à inclure dans un style, voir « Création et suppression de styles » à la page 256. 4 Cliquez sur OK pour appliquer les modifications au style. Utilisation des styles, des symboles et des adresses URL 257 Exportation et importation de styles Il pourrait être souhaitable de partager des styles avec d’autres utilisateurs de Fireworks afin de gagner du temps et de conserver une cohérence. Vous pouvez partager des styles en les exportant afin de les utiliser sur d’autres ordinateurs. Pour exporter des styles : 1 Dans le panneau Styles, cliquez sur le nom d’un style. Appuyez sur la touche Maj et cliquez pour sélectionner des styles multiples ; appuyez sur la touche Contrôle (Windows) ou Commande (Macintosh) et cliquez pour sélectionner des styles multiples non contigus. 2 Choisissez Exporter des styles dans le menu Options du panneau Styles. 3 Indiquez un nom et un emplacement pour le document qui contiendra les styles enregistrés. 4 Cliquez sur Enregistrer. Pour importer des styles : 1 Choisissez Importer des styles dans le menu Options du panneau Style. 2 Choisissez le document de styles à importer. Tous les styles de ce document de styles sont importés et placés directement après le style sélectionné dans le panneau Styles. Utilisation des styles par défaut Si vous voulez supprimer tous les styles personnalisés du panneau Styles et restaurer tous les styles par défaut qui ont été supprimés, vous pouvez réinitialiser le panneau Styles à son état par défaut. Vous pouvez également changer la taille des icônes affichées dans le panneau Styles. Pour réinitialiser le panneau Styles avec les styles par défaut : Choisissez Réinitialiser les styles dans le menu Options du panneau Styles. Remarque : Une réinitialisation des styles supprimera les styles personnalisés que vous aurez enregistrés. Pour modifier la taille des icônes d’aperçu des styles : Choisissez Grandes icônes dans le menu Options du panneau Styles, pour passer des icônes de grande taille aux icônes de petite taille, et réciproquement. Application d’attributs sans création d’un style Vous pouvez copier des attributs d’un objet et les appliquer à d’autres objets, sans créer un nouveau style dans le panneau Styles. Vous pouvez utiliser cette méthode pour appliquer rapidement des attributs à un objet si vous ne comptez pas réutiliser ces attributs sur d’autres objets. Les attributs peuvent être copiés et appliqués, y compris les attributs de remplissage, de trait, d’effet et de texte. Pour copier les attributs d’un objet et les appliquer à d’autres objets : 1 Sélectionnez l’objet dont vous voulez copier les attributs. 2 Choisissez Edition > Copier. 258 Chapitre 11 3 Déselectionnez l’objet original, puis sélectionnez le ou les objets auxquels vous voulez appliquer les nouveaux attributs. 4 Choisissez Edition > Coller les attributs. Les objets sélectionnés héritent des mêmes attributs que l’objet original. Utilisation de symboles Fireworks dispose de trois types de symboles : symbole graphique, d’animation et de bouton. Chaque type possède des caractéristiques exclusives pour une utilisation spécifique. Les occurrences sont des représentations d’un symbole Fireworks. Lorsque l’objet utilisé pour le symbole (l’objet original) est modifié, les occurrences (copies) changent automatiquement pour refléter les modifications apportées au symbole. Les symboles sont utiles pour réutiliser un élément graphique. Vous pouvez placer des occurrences dans plusieurs documents Fireworks et conserver l’association avec le symbole. Les symboles sont utiles pour créer des boutons et animer des objets sur plusieurs images. Pour plus d’informations sur les fonctions supplémentaires intégrées aux fonctions d’animation et de bouton, voir « Création de symboles d’animations » à la page 318 et « Création d’un symbole de bouton » à la page 295. Création d’un symbole Pour créer des symboles graphique, d’animation et de bouton, choisissez Edition > Insérer. Vous pouvez créer un symbole à partir d’un objet, d’un bloc de texte ou d’un groupe, puis les organiser dans le panneau Bibliothèque. Pour placer des occurrences dans un document, il suffit de les faire glisser du panneau Bibliothèque vers le document. Pour créer un nouveau symbole à partir d’un objet sélectionné : 1 Sélectionnez l’objet et choisissez Modification > Symbole > Convertir en symbole. 2 Dans le champ Nom de la boîte de dialogue Propriétés du symbole, tapez le nom du symbole. 3 Choisissez un type de symbole (Graphisme, Animation ou Bouton), puis cliquez ensuite sur OK. Le symbole apparaît dans la bibliothèque, l’objet sélectionné devient une occurrence du symbole et le Vérificateur de propriétés affiche les options du symbole. Pour créer ex nihilo un symbole : 1 Utilisez l’une des méthodes suivantes : • Choisissez Edition > Insertion > Nouveau symbole. • Choisissez Nouveau symbole dans le menu Options du panneau Bibliothèque. 2 Choisissez un type de symbole (Graphisme, Animation ou Bouton), puis cliquez ensuite sur OK. Selon le type de symbole que vous choisissez, l’éditeur de symboles ou l’éditeur de bouton apparaît. 3 Créez le symbole à l’aide des outils du panneau Outils, puis fermez l’éditeur. Pour plus d’informations, voir « Création d’un symbole de bouton » à la page 295 et « Création de symboles d’animations » à la page 318. Utilisation des styles, des symboles et des adresses URL 259 Mise en place d’occurrences Vous pouvez placer les occurrences d’un symbole dans le document actuel. Pour placer une occurrence : Faites glisser un symbole du panneau Bibliothèque vers le document actif. Occurrence d’un symbole dans le document Modification de symboles Vous pouvez modifier un symbole dans l’éditeur de symboles, qui modifie automatiquement toutes les occurrences associées. Remarque : Pour la plupart des types de modification, la modification d’une occurrence affecte son symbole et toutes les autres occurrences. Il existe toutefois des exceptions. Pour plus d’informations, voir « Modification d’occurrences » à la page 261. Pour modifier un symbole et toutes ses occurrences : 1 Utilisez l’une des méthodes suivantes pour ouvrir l’éditeur de symboles : • Double-cliquez sur une occurrence. • Sélectionnez une occurrence et choisissez Modification > Symbole > Modifier le symbole. 2 Modifiez le symbole et fermez la fenêtre. Le symbole et toutes les occurrences associées reprennent ces modifications. Pour renommer un symbole : 1 Double-cliquez sur le nom du symbole dans le panneau Bibliothèque. 2 Modifiez le nom dans la boîte de dialogue Propriétés du symbole, et cliquez sur OK. Pour dupliquer un symbole : 1 Sélectionnez le symbole dans le panneau Bibliothèque. 2 Dans le menu des options du panneau Bibliothèque, choisissez Dupliquer. Pour changer un type de symbole : 1 Double-cliquez sur le nom du symbole dans la Bibliothèque. 2 Choisissez une autre option de type de symbole. Pour sélectionner tous les symboles inutilisés dans le panneau Bibliothèque : Choisissez Sélectionner les éléments non utilisés dans le menu Options du panneau Bibliothèque. 260 Chapitre 11 Pour supprimer un symbole : 1 Sélectionnez le symbole dans le panneau Bibliothèque. 2 Dans le menu Options du panneau Bibliothèque, choisissez Supprimer. 3 Cliquez sur Supprimer. Le symbole et toutes ses occurrences sont supprimés. Modification d’occurrences Lorsque vous double-cliquez sur une occurrence afin de la modifier, vous modifiez en fait le symbole dans l’éditeur de symboles ou dans l’éditeur de boutons. Pour modifier uniquement l’occurrence active, vous devez rompre le lien entre l’occurrence et le symbole. Cela rompt de manière définitive la relation entre les deux éléments et les modifications futures qui seront apportées au symbole n’affecteront pas l’occurrence précédente. Les symboles de bouton possèdent plusieurs fonctions pratiques permettant de conserver la relation symbole-occurrence pour un groupe de boutons, tandis qu’un texte de bouton et une adresse URL unique sont assignés à chaque occurrence. Pour plus d’informations, voir « Modification des symboles de bouton » à la page 301. Rupture du lien d’un symbole Vous pouvez modifier une occurrence sans toucher au symbole ni aux autres occurrences, en rompant auparavant le lien entre cette occurrence et son symbole. Pour séparer une occurrence d’un symbole : 1 Sélectionnez l’occurrence. 2 Choisissez Modification > Symbole > Séparer. L’occurrence sélectionnée devient un groupe. Le symbole qui apparaît dans le panneau Bibliothèque n’est plus associé à ce groupe. Après séparation du symbole, l’occurrence d’un bouton antérieur perd les caractéristiques du symbole de son bouton, et une occurrence de l’animation antérieure perd les caractéristiques de son symbole d’animation. Modification des propriétés d’une occurrence Les propriétés d’une occurrence peuvent être modifiées dans le Vérificateur de propriétés sans affecter le symbole ou d’autres occurrences : • • • • • Mode de fondu Opacité Effets Largeur et hauteur Coordonnées X et Y Remarque : Les occurrences de bouton possèdent des propriétés supplémentaires pouvant être modifiées sans affecter le symbole. Pour plus d’informations sur la modification des occurrences de bouton, voir « Modification des symboles de bouton » à la page 301. Pour modifier les propriétés d’une occurrence sans affecter le symbole ou rompre le lien du symbole : 1 Sélectionnez l’occurrence. 2 Modifiez les propriétés de l’occurrence dans le Vérificateur de propriétés. Utilisation des styles, des symboles et des adresses URL 261 Importation et exportation de symboles Le panneau Bibliothèque conserve les symboles d’animation, de graphisme et de bouton que vous créez dans le document actuel. Il conserve également les symboles que vous importez dans le document actuel. Le panneau Bibliothèque est spécifique aux documents, mais vous pouvez utiliser les symboles d’une bibliothèque dans plusieurs documents Fireworks en important et en exportant, en coupant et en collant, ou en effectuant un glisser-déposer. Vous pouvez importer des symboles d’autres bibliothèques, y compris des bibliothèques contenant des symboles préparés dans Macromedia Fireworks et des bibliothèques contenant des symboles que vous, ou une autre personne, a préalablement exportés. Inversement, si vous avez créé des symboles que vous désirez réutiliser ou partager, vous pouvez exporter vos propres bibliothèques de symboles. Lorsque vous exportez une bibliothèque de symboles, elle est exportée sous la forme d’un fichier PNG. Importation de symboles Fireworks MX possède des bibliothèques de symboles dans le sous-menu Edition > Bibliothèques, à partir duquel vous pouvez importer des symboles d’animation préparés, des symboles de graphisme et des symboles de bouton, ainsi que des barres de navigation et des thèmes de symboles multiples. En utilisant ces symboles, vous pouvez créer rapidement une page Web sophistiquée contenant des éléments de navigation avancés sans avoir besoin de créer des symboles originaux. Pour importer un ou plusieurs symboles préparés à partir d’une bibliothèque de symboles Fireworks : 1 Ouvrez un document Fireworks. 2 Choisissez Edition > Bibliothèques, puis choisissez une bibliothèque : Animations ouvre Puces ouvre un ensemble de symboles animés. un ensemble de symboles graphiques ressemblant à différents types de puces. Boutons ouvre un ensemble de symboles de boutons Fireworks à 2, 3 et 4 états. Thèmes ouvre une liste de symboles d’animations, de graphiques et de boutons. Chaque thème se compose de trois symboles ayant une conception et un nom identiques et dont les couleurs coordonnées permettent de les utiliser ensemble. Autre affiche une boîte de dialogue Ouvrir, à partir de laquelle vous pouvez ouvrir des fichiers PNG de bibliothèques de symboles préalablement exportés. Pour plus d’informations, voir la procédure suivante. En outre, vous pouvez importer des symboles de fichiers PNG de bibliothèques préalablement exportés et localisés sur votre disque dur, un CD ou un réseau. Pour plus d’informations sur l’exportation de symboles, voir « Exportation de symboles » à la page 263. Pour importer des symboles d’un autre fichier dans le document actif : 1 Utilisez l’une des méthodes suivantes : • Choisissez Importer des symboles dans le menu Options du panneau Bibliothèque. • Choisissez Edition > Bibliothèques > Autre. 2 Naviguez jusqu’au dossier qui contient le fichier, sélectionnez-le et cliquez sur Ouvrir. 262 Chapitre 11 3 Sélectionnez les symboles à importer, et cliquez sur Importer. Les symboles importés apparaissent dans le panneau Bibliothèque. Vous pouvez également importer et exporter individuellement des symboles vers et à partir des panneaux Bibliothèque de plusieurs documents en effectuant un glisser-déposer ou bien un copier-coller avec les occurrences. Pour importer un symbole en effectuant un glisser-déposer ou un copier-coller, utilisez l’une des méthodes suivantes : • A partir du document contenant le symbole, faites glisser l’occurrence d’un symbole vers le document de destination. • Copiez l’occurrence d’un symbole dans le document contenant le symbole, puis collez-le dans le document de destination. Le symbole est importé dans le panneau Bibliothèque du document de destination et conserve un lien avec le symbole du document original. Pour plus d’informations, voir « Mise à jour de symboles et d’occurrences exportés dans plusieurs documents » à la page 264. Exportation de symboles Si, dans un document Fireworks, vous avez créé ou importé des symboles que vous voulez enregistrer afin de les réutiliser dans d’autres documents ou de les partager avec d’autres personnes, vous pouvez utiliser le menu Options du panneau Bibliothèque afin de les exporter dans un fichier PNG. Vous pouvez ensuite importer les symboles en naviguant jusqu’au fichier PNG qui contient les symboles en utilisant le sous-menu Edition > Bibliothèques. Pour plus d’informations, voir « Importation de symboles » à la page 262. Pour exporter des symboles : 1 Dans le menu Options du panneau Bibliothèque, choisissez Exporter des symboles. 2 Sélectionnez les symboles à exporter, et cliquez sur Exporter. 3 Choisissez un emplacement, indiquez un nom pour le fichier de symboles, et cliquez sur Enregistrer. Fireworks enregistre les symboles dans un seul fichier PNG. Utilisation des styles, des symboles et des adresses URL 263 Mise à jour de symboles et d’occurrences exportés dans plusieurs documents Le symbole original conserve son lien vers tous les symboles exportés dans d’autres documents, de telle sorte que vous pouvez changer les propriétés de symbole et d’occurrence dans tous les documents si vous modifiez le symbole dans le document original. Pour mettre à jour tous les symboles et toutes les occurrences exportés : 1 Dans le document original, double-cliquez sur une occurrence pour ouvrir l’éditeur de symboles approprié, modifiez le symbole et fermez l’éditeur. 2 Enregistrez le fichier. 3 Dans le document vers lequel le symbole a été exporté, sélectionnez le symbole dans le panneau Bibliothèque. 4 Choisissez Mettre à jour dans le menu Options du panneau Bibliothèque. Remarque : Pour mettre à jour tous les symboles exportés, sélectionnez tous les symboles dans le panneau Bibliothèque et choisissez Mettre à jour. Vous pouvez dissocier automatiquement le symbole exporté et le document original, en modifiant le symbole dans le document actuel. La rupture du lien permet de modifier le symbole exporté indépendamment du symbole original. Pour rompre le lien entre un symbole exporté et le symbole original : Dans le document vers lequel le symbole a été exporté, double-cliquez sur une occurrence du symbole afin d’ouvrir l’éditeur de symboles approprié, modifiez le symbole et fermez l’éditeur. Le lien entre le symbole du document actif et le symbole original est rompu. Remarque : Fireworks ne vous avertit pas de l’imminence d’une rupture du lien du symbole original. Avant de modifier un symbole qui apparaît dans plusieurs documents, assurez-vous que vous connaissez le symbole qui se trouve dans le document original. Utilisation des URL L’affectation d’une adresse URL à un objet Web crée un lien vers un fichier tel qu’une page Web. Vous pouvez affecter des adresses URL à des objets références, boutons et découpes. Lorsque vous devez utiliser une URL à plusieurs reprises, vous pouvez créer une bibliothèque d’URL à partir du panneau URL, puis enregistrer les URL dans cette bibliothèque. Le panneau URL permet d’ajouter, modifier et organiser vos URL. Par exemple, si votre site Web contient plusieurs boutons de navigation permettant de revenir à la page d’accueil, ajoutez l’adresse URL de cette dernière au panneau URL. Sélectionnez l’URL dans la bibliothèque d’URL, puis affectez cette URL à chaque bouton de navigation. Utilisez la fonction Rechercher et remplacer pour modifier une URL dans plusieurs documents (voir « Recherche et remplacement » à la page 413). 264 Chapitre 11 Les bibliothèques d’URL sont disponibles pour l’ensemble des documents de Fireworks et sont enregistrées entre deux sessions. Panneau URL Création d’une bibliothèque d’URL Vous pouvez regrouper les URL dans des bibliothèques. En étant regroupées, les URL relevant du même domaine sont ainsi plus faciles à retrouver. Vous pouvez enregistrer les URL dans la bibliothèque d’URL par défaut, URLs.htm, ou dans les nouvelles bibliothèques d’URL que vous créez. URLs.htm et toute nouvelle bibliothèque que vous créez sont conservées sur votre disque dur, dans le dossier des bibliothèques d’URL. L’emplacement exact de ce dossier varie en fonction du système d’exploitation. Pour plus d’informations, voir « Utilisation des fichiers de configuration » à la page 439. Pour créer une nouvelle bibliothèque d’URL : 1 Choisissez Nouvelle bibliothèque d’URL dans le menu Options du panneau URL. 2 Indiquez le nom de la bibliothèque dans la zone de texte, puis cliquez sur OK. Le nom de la nouvelle bibliothèque apparaît dans le menu contextuel Bibliothèque du panneau URL. Pour ajouter une nouvelle URL à une bibliothèque d’URL : 1 Choisissez une bibliothèque dans le menu contextuel Bibliothèque. 2 Tapez une adresse d’URL dans le champ Lien. 3 Cliquez sur le bouton Plus (+). Ajout d’une URL Le bouton Plus (+) ajoute l’URL courante à la bibliothèque. Utilisation des styles, des symboles et des adresses URL 265 Vous pouvez améliorer l’organisation de vos URL en n’ajoutant que celles qui sont utilisées dans votre document. Pour ajouter simultanément une URL à la bibliothèque lorsque vous affectez cette URL à un objet Web : 1 Sélectionnez l’objet. 2 Pour spécifier l’adresse de l’URL, procédez de l’une des manières suivantes : • Choisissez Ajouter une URL dans le menu Options du panneau URL, tapez une adresse URL absolue ou relative et cliquez sur OK. • Tapez une adresse d’URL dans le champ Lien. Cliquez sur le bouton Plus (+). L’URL apparaît dans le panneau URL. Voir « Affectation d’adresses URL » à la page 285 et « Définition de l’URL d’un symbole ou d’une occurrence de bouton » à la page 303. Pour ajouter les URL utilisées à une bibliothèque d’URL : 1 Choisissez une bibliothèque dans le menu contextuel Bibliothèque. 2 Choisissez Ajouter les URL utilisées à la bibliothèque dans le menu Options du panneau URL. Pour supprimer une URL dans le panneau URL : Cliquez sur le bouton Supprimer l’URL dans la partie inférieure du panneau URL. Pour supprimer de la bibliothèque toutes les URL non utilisées : 1 Choisissez Supprimer les URL inutilisées dans le menu Options du panneau URL. 2 Cliquez sur OK. Modification d’une URL Vous pouvez modifier facilement des URL à partir du panneau URL. Vous pouvez modifier une seule occurrence d’une URL, ou alors, vous pouvez faire en sorte que vos modifications affectent l’ensemble du document. Pour modifier une URL : 1 Sélectionnez l’adresse URL à modifier dans le panneau des URL. 2 Choisissez Modifier une URL dans le menu Options du panneau URL. 3 Modifiez l’adresse URL. Si vous désirez mettre ce lien à jour dans tout le document, activez l’option Changer toutes les occurrences dans le document. URL absolues et relatives Lorsque vous saisissez une URL dans le panneau URL, vous pouvez indiquer une URL absolue ou relative. • Si vous établissez un lien vers une page Web n’appartenant par à votre site, vous devez spécifier une URL absolue. • Par contre, si vous établissez un lien vers une page Web figurant dans votre site, vous pouvez spécifier une URL absolue ou relative. 266 Chapitre 11 Les URL absolues sont des adresses URL complètes, incluant le protocole de serveur (qui est généralement http:// pour les pages Web). Par exemple, http://www.macromedia.com/fr/support/ est l’URL absolue de la page Web du centre d’assistance de Macromedia Fireworks. Les URL absolues restent précises, quel que soit l’emplacement du document source, mais le lien est rompu si le document cible est déplacé. Les URL relatives sont indiquées par rapport au dossier contenant le document source. Les exemples ci-dessous sont des syntaxes de navigation d’URL relatives : • fichier.htm établit un lien avec un fichier situé dans le même dossier que le document source. • ../../fichier.htm établit un lien avec un fichier situé dans un dossier placé deux niveaux audessus du dossier contenant le document source. Chaque signe ../ représente un niveau. • htmldocs/fichier.htm établit un lien vers un fichier situé dans un dossier appelé htmldocs, figurant dans le dossier contenant le document source. Les URL relatives sont généralement les plus simples pour établir un lien avec un fichier qui restera toujours placé dans le même dossier que le document actif. Importation et exportation d’URL Si le panneau URL contient des URL que vous voulez réutiliser dans d’autres documents Fireworks, vous pouvez les exporter pour des utilisations ultérieures. Ensuite, vous pouvez facilement les importer vers n’importe quel autre document Fireworks, ce qui facilitera leur accès. Vous pouvez également importer toutes les URL référencées dans un document HTML existant. Pour exporter des URL : 1 Choisissez Exporter des URL dans le menu Options du panneau URL. 2 Indiquez un nom de fichier, puis cliquez sur Enregistrer. Un fichier HTML est créé. Il contient les URL que vous avez exportées. Pour importer des URL : 1 Choisissez Importer des URL dans le menu Options du panneau URL. 2 Sélectionnez un fichier HTML, puis cliquez sur Ouvrir. Toutes les URL contenues dans ce fichier sont importées. Utilisation des styles, des symboles et des adresses URL 267 268 Chapitre 11 CHAPITRE 12 Découpes, survols et références Les découpes sont des éléments de base qui permettent de créer des effets interactifs dans Macromedia Fireworks. Ce sont des objets Web — il n’existent pas réellement en tant qu’images, mais, en dernière instance, comme code HTML. Vous pouvez les afficher, les sélectionner et les renommer à partir du calque Web, dans le panneau Calques. Ce chapitre décrit les concepts que vous devez comprendre pour créer des découpes et explique comment utiliser ces découpes pour affecter un comportement interactif à vos pages Web. En appliquant la technique de survol Glisser-déposer pour affecter un comportement interactif aux découpes, vous pouvez rapidement créer des effets de survol et de permutation d’images dans l’espace de travail. Vous pouvez afficher les comportements affectés à partir du panneau Comportements et créer des interactions plus complexes dans ce panneau. Vous pouvez également utiliser des références pour affecter des comportements interactifs à vos pages Web. Les références sont généralement utilisées pour créer des images interactives qui contient des zones sensibles représentant des liens vers d’autres pages Web. Les références peuvent également recevoir des événements de souris, ce qui permet à des comportements JavaScript d’agir dans des découpes. Création et modification d’une découpe La découpe d’images en zones consiste à diviser un document Fireworks en plusieurs segments dont chacun sera exporté séparément dans un fichier distinct. Pendant l’exportation, Fireworks crée également un fichier HTML contenant le code des tables pour reconstituer l’image dans un navigateur. La découpe d’images en zones consiste à diviser un document en plusieurs segments dont chacun sera exporté dans un fichier distinct. La découpe d’images présente au moins trois avantages majeurs : 269 Optimisation L’une des principales difficultés de la conception graphique pour le Web réside dans la nécessité de produire des images pouvant être téléchargées rapidement sans sacrifier la qualité graphique. La découpe d’images permet d’optimiser chaque découpe individuelle en utilisant le format de fichier et les options de compression les plus appropriés. Pour plus d’informations, voir « Optimisation et exportation » à la page 333. Interactivité Vous pouvez utiliser des découpes pour créer des zones qui répondront aux déplacements ou aux boutons de la souris de l’utilisateur. Pour plus d’informations sur l’affectation de comportements interactifs aux découpes, voir « Affectation de comportements interactifs aux découpes » à la page 277. Mise à jour partielle d’une page Web La découpe d’images permet d’effectuer aisément une mise à jour partielle dans une page Web qui change fréquemment. Par exemple, prenez le cas d’une entreprise qui aurait une page Web dans laquelle les informations de la section Collaborateur du mois doivent être modifiées tous les mois. Grâce à la découpe, il est possible de remplacer rapidement le nom et la photo du collaborateur sans devoir modifier la page entière. Création d’un objet découpe Vous pouvez créer un objet découpe en le dessinant à l’aide de l’outil Découpe ou en insérant une découpe basée sur un objet sélectionné. Les traits qui partent de l’objet découpe sont les repères de découpe, qui définissent les limites des divers fichiers image entre lesquels le document sera divisé lors de l’exportation. Par défaut, ces repères sont de couleur rouge. Pour insérer une découpe rectangulaire basée sur un objet sélectionné : 1 Choisissez Edition > Insertion > Découpe. La découpe est un rectangle dont la zone couverte comprend les bords les plus extérieurs de l’objet sélectionné. 2 Lorsque plusieurs objets sont sélectionnés, choisissez la manière dont les repères de découpe seront appliqués : Simple crée une découpe unique, qui recouvre tous les objets sélectionnés. Multiple crée 270 Chapitre 12 un objet découpe pour chaque objet sélectionné. Pour tracer un objet découpe rectangulaire : 1 Choisissez l’outil Découpe. 2 Tracez l’objet découpe. L’objet découpe et ses repères de découpe apparaissent sur le calque Web. Remarque : Vous pouvez ajuster la position d’une découpe à mesure que vous la dessinez. Tout en maintenant enfoncé le bouton de la souris, appuyez simplement et maintenez enfoncée la barre d’espacement du clavier, puis faites glisser la découpe vers un autre emplacement du document. Relâchez la barre d’espacement pour continuer à dessiner la découpe. Création d’une découpe HTML Une découpe HTML représente une zone d’une image découpée dans laquelle du texte HTML apparaît dans le navigateur. Une découpe HTML n’exporte pas de données graphiques, mais du texte HTML qui apparaît dans la cellule de tableau définie par la découpe. Les découpes HTML sont utiles pour actualiser rapidement le texte qui apparaît sur votre site Web, sans devoir créer de nouveaux graphismes. Pour créer une découpe HTML : 1 Dessinez un objet découpe et laissez-le sélectionné. 2 A partir du Vérificateur des propriétés, choisissez HTML dans le menu déroulant Type. 3 Cliquez sur Edition. 4 Tapez le texte dans la fenêtre Modifier découpe du code HTML et, au besoin, insérez des balises de mise en forme HTML pour mettre en forme le texte. Remarque : Vous pouvez également insérer les balises de mise en forme HTML dans le code HTML après l’avoir exporté à l’aide d’un éditeur de texte ou un éditeur de code HTML. Découpes, survols et références 271 5 Cliquez sur OK pour appliquer les modifications et refermer la fenêtre Modifier découpe du code HTML. Le texte et les balises HTML que vous avez insérés apparaissent dans le fichier PNG Fireworks. Remarque : L’aspect des découpes de texte HTML peut varier selon les navigateurs et les systèmes d’exploitation, car la taille et le type des polices peuvent être définis dans le navigateur. Création d’une découpe non rectangulaire Les découpes rectangulaires peuvent ne pas suffire à affecter une interaction à une image non rectangulaire. Si vous envisagez, par exemple, d’affecter un effet de survol à une découpe et que les objets découpe se chevauchent ou sont de forme irrégulière, une découpe rectangulaire peut faire apparaître des informations non désirées en même temps que l’image de remplacement. Pour résoudre ce problème, Fireworks permet d’utiliser l’outil Découpe Polygonale pour tracer des découpes ayant n’importeforme polygonale. Vous pouvez aussi convertir des trajets vectoriels en découpes, afin de créer des découpes de forme irrégulière. Pour tracer un objet découpe polygonal : 1 Choisissez l’outil Découpe polygonale. 2 Cliquez pour placer les points vectoriels du polygone. L’outil Découpe polygonale ne permet de tracer que des segments de ligne droite. 3 Lorsque vous tracez un objet découpe polygonal autour d’objets ayant des bords adoucis, veillez à inclure la totalité de l’objet pour éviter de créer des bords nets indésirables sur le graphisme. 4 Pour sortir de l’outil Découpe Polygonale, choisissez un autre outil dans la palette d’outils. Il n’est pas nécessaire de cliquer une seconde fois sur le premier point pour fermer le polygone. Remarque : Veillez à ne pas faire un usage abusif des découpes polygonales, car elles réclament plus de code JavaScript que les découpes rectangulaires équivalentes. Un nombre élevé de découpes polygonales peut nécessiter beaucoup de temps de traitement sur l’ordinateur de l’utilisateur. Pour créer une découpe polygonale à partir d’un objet ou d’un trajet vectoriel : 1 Sélectionnez un trajet vectoriel. 2 Choisissez Edition > Insertion > Référence. 3 Choisissez Edition > Insertion > Découpe. Une découpe est générée avec la forme de l’objet vectoriel. 272 Chapitre 12 Visualisation et affichage des découpes et des repères de découpe Vous pouvez contrôler la visibilité des découpes et autres objets Web de votre document l’aide des panneaux Calques et Outils. Lorsque vous masquez des découpes dans l’ensemble du document, vous masquez du même coup les repères de découpe. A l’aide du Vérificateur de propriétés, vous pouvez organiser les découpes en affectant une couleur unique à chaque objet découpe. Vous pouvez également modifier la couleur des repères de découpe dans le menu Affichage. Affichage des découpes dans le panneau Calques Le calque Web affiche tous les objets Web du document ; vous pouvez alors sélectionner et afficher chacun de ces objets. Pour afficher et sélectionner une découpe dans le panneau Calques : 1 Choisissez Fenêtre > Calques pour ouvrir le panneau Calques. 2 Développez le calque Web en cliquant sur le signe Plus (+) (Windows) ou sur le triangle (Macintosh). La liste complète des objets de votre document est affichée dans le calque Web. 3 Cliquez sur le nom d’une découpe pour la sélectionner. La découpe est alors sélectionnée dans le calque Web et dans la fenêtre du document. Affichage et masquage des découpes Une découpe masquée est invisible dans le fichier PGN Fireworks. Vous pouvez désactiver tout ou partie des objets Web. Les découpes étant des objets Web, elles apparaissent sous le calque Web du panneau Calques ; vous pouvez choisir d’afficher ou de masquer la découpe sélectionnée. Vous pouvez également utiliser le panneau Outils pour contrôler la visibilité des découpes. Le masquage d’un objet découpe n’empêche pas l’exportation de la découpe dans le texte HTML. Pour masquer et afficher des découpes et références spécifiques : 1 Cliquez sur l’icône représentant un oeil à côté de l’objet Web dans le panneau des calques. 2 Cliquez dans la colonne de l’oeil pour rendre l’objet à nouveau visible. L’icône représentant un oeil réapparaît lorsque les objets Web sont à nouveau visibles. Découpes, survols et références 273 Pour afficher ou masquer l’ensemble des références, découpes et repères, procédez de l’une des manières suivantes : • Cliquez sur le bouton Masquer/afficher les découpes approprié dans le panneau Outils. • Cliquez sur l’icône représentant un oeil à côté de calque Web dans le panneau des calques. Pour afficher ou masquer les repères de découpe dans tous les modes d’affichage du document : Choisissez Affichage > Repères de découpe. Modification de la couleur des découpes et des repères de découpe Si les couleurs utilisées dans un document sont les mêmes que celles des découpes, il peut être difficile de faire la distinction entre les découpes et les objets. Pour identifier les découpes plus facilement, vous pouvez affecter une nouvelle couleur aux découpes sélectionnées. Vous pouvez également organiser les découpes en affectant une couleur spécifique à chacune d’elles. Vous pouvez modifier la couleur des repères de découpe. Remarque : Lorsque vous prévisualisez le document, les découpes désélectionnées y aparaissent comme du papier calque blanc. Pour modifier la couleur de l’objet découpe sélectionné : Dans le Vérificateur de propriétés, choisissez une nouvelle couIeur dans la boîte de couleurs. Pour modifier la couleur des repères de découpe : 1 Choisissez Affichage > Repères > Modifier les repères. 274 Chapitre 12 2 Sélectionnez une nouvelle couleur dans la section Couleur de la découpe de la boîte de dialogue Repères, puis cliquez sur OK. Modification d’une découpe Sous Fireworks, vous pouvez travailler sur la disposition d’une découpe comme s’il s’agissait d’un tableau dans un programme de traitement de texte. Lorsque vous déplacez le repère d’une découpe pour redimensionner la découpe, toutes les découpes rectangulaires adjacentes sont automatiquement redimensionnées. En outre, vous pouvez également utiliser le panneau Outils pour redimensionner et transformer des découpes, comme s’il s’agissait d’objets vectoriels et bitmap. Déplacement des repères d’une découpe pour modifier la découpe Les repères d’une découpe déterminent le périmètre et la position de la découpe. Les repères qui s’étendent au-delà des objets découpe déterminent la manière dont le reste du document sera divisé lors de l’exportation. Vous pouvez modifier la forme d’un objet découpe rectangulaire en déplaçant les repères de découpe qui entourent l’objet. Il n’est pas possible de redimensionner des objets découpe rectangulaires en déplaçant les repères de découpe. Redimensionnement d’un objet découpe par déplacement de ses repères de découpe Remarque : Lorsque vous déplacez des repères de découpe entourant un bouton Fireworks dans la fenêtre du document, vous redimensionnez du même coup la découpe définissant la zone active (ou découpe) de ce bouton. Vous ne pouvez supprimer la zone active d’un bouton Fireworks qu’en déplaçant les repères de découpe entourant la zone. Découpes, survols et références 275 Si plusieurs objets découpe sont alignés sur un même repère de découpe, faites glisser ce repère pour redimensionner simultanément tous les objets découpe. Redimensionnement de plusieurs objets découpe par déplacement d’un seul repère Lorsque vous faites glisser un repère le long d’une coordonnée, tous les autres repères figurant sur cette coordonnée se déplacent en même temps. Pour redimensionner une ou plusieurs découpes : 1 Placez l’outil Pointeur ou Sous-sélection sur un repère de découpe. Le pointeur se transforme en pointeur de déplacement de repère. 2 Faites glisser le repère de découpe vers la position voulue. Les découpes sont alors redimensionnées et toutes les découpes adjacentes sont également redimensionnées automatiquement. Pour supprimer un repère de découpe : A l’aide de l’outil Pointeur ou Sous-sélection, faites glisser le repère de découpe au-delà des limites du document. Pour déplacer des repères de découpe adjacents : 1 Appuyez sur la touche Maj tout en faisant glisser un repère de découpe sur les repères de découpe adjacents. 2 Déposez le repère de découpe à l’endroit voulu. Tous les repères que vous déplacerez ainsi seront positionnés à cet endroit. Conseil : Vous pouvez annuler cette opération en relâchant la touche Maj avant de relâcher le bouton de la souris. Tous les repères sélectionnés et déplacés reviennent à leur position d’origine. Utilisation des outils pour modifier des objets découpe Vous pouvez utiliser l’outil Pointeur, Sous-sélection et les outils Transformation pour modifier la forme ou redimensionner une découpe. Vous pouvez recadrer, mettre à l’échelle, incliner et appliquer une distortion aux découpes. 276 Chapitre 12 Remarque : En redimensionnant ou en modifiant la forme des découpes à l’aide de ces outils, vous pouvez créer des découpes se chevauchant car la taille des objets découpe adjacents sera modifiée automatiquement. Lorsque des découpes se chevauchent et que des effets interactifs leur sont affectés, la découpe située au sommet de la pile sera la première à avoir un comportement interactif. Pour éviter le chevauchement des découpes, utilisez les repères de découpe pour modifier les découpes. Pour plus d’informations, voir « Déplacement des repères d’une découpe pour modifier la découpe » à la page 275. Pour modifier la forme d’une découpe sélectionnée, procédez de l’une des manières suivantes : • Choisissez l’outil Pointeur ou Sous-sélection et faites glisser les angles de la découpe pour modifier sa forme. • Utilisez un outil de transformation pour effectuer la tansformation désirée et appuyez sur Entrée. Pour plus d’informations sur l’utilisation des outils de transformation, voir « Transformation et distorsion d’objets sélectionnés et sélections » à la page 123. Remarque : La transformation d’une découpe rectangulaire peut changer sa forme, sa position ou ses dimensions, mais la découpe elle-même reste rectangulaire. Utilisation du Vérificateur de propriétés ou du panneau Info pour la modification des objets découpe Vous pouvez également modifier la position et les dimensions d’un objet découpe dans le Vérificateur de propritétés. Pour plus d’informations sur la modification des dimensions d’un objet, voir « Transformation numérique d’objets » à la page 126. Pour plus d’informations sur la modification de la position d’un objet, voir « Edition d’objets sélectionnés » à la page 122. Affectation de comportements interactifs aux découpes Les éléments de base permettant de créer une interactivité dans Fireworks sont les objets découpe. Le programme Fireworks offre deux possibilités pour rendre des découpes interactives : • Pour rendre une découpe interactive, la méthode la plus simple consiste à utiliser la technique de survol Glisser-déposer. En faisant glisser simplement la poignée du comportement de la découpe et en la déposant sur une découpe cible, vous pouvez créer rapidement une interactivité. • Le panneau Comportements permet de créer des interactivités plus complexes. Il contient une variété de comportements interactifs que vous pouvez affecter aux découpes. En affectant plusieurs effets à une seule découpe, vous pouvez créer des effets très intéresssants. Vous pouvez également créer des interactions personnalisées en modifiant les comportements existants. Les comportements de Fireworks MX sont compatibles avec ceux de Macromedia Dreamweaver MX. Après avoir exporté un comportement de Fireworks vers Dreamweaver 4, vous pouvez le modifier à l’aide du panneau Comportements de Dreamweaver 4. Ajout d’une interactivié simple aux découpes La technique de survol Glisser-déposer est la plus rapide et la plus plus efficace pour créer des effets de survol et de permutation d’images. Elle permet, en particulier, de déterminer le comportement d’une découpe lorsque le pointeur la survole. On utilise généralement le terme effet de survol pour désigner ce comportement. Les effets de survol sont des graphismes qui changent d’apparence dans un navigateur Web lorsqu’ils sont survolés par le pointeur de la souris. Découpes, survols et références 277 Lorsqu’une découpe est sélectionnée, un petit cercle avec un croix intérieure apparaît au centre de la découpe. Cette croix est appelée poignée de comportement. Nom d’une découpe Poignée de comportement Poignée de sélection En faisant glisser la poignée de comportement d’une découpe de déclenchement et en la déposant sur une découpe cible, vous pouvez créer rapidement des effets de survol et de permutation d’images. La découpe de déclenchement et la découpe cible peuvent correspondre à la même découpe. Les références disposent également de poignées de comportement pour l’intégration d’effets de survol. Pour plus d’informations, voir « Création de références » à la page 290. Les survols Les effets de survol fonctionnent de la même manière. Un graphisme déclenche l’affichage d’un autre graphisme lorsqu’il est survolé par le pointeur de la souris. L’objet déclencheur est toujours un objet Web — une découpe, une référence ou un bouton. La forme la plus simple d’un effet de survol consiste à remplacer le graphisme de l’image 1 par celui qui se trouve directement après, dans l’image 2. Il est cependant possible de créer des effets de survol beaucoup plus sophistiqués : les effets de substitution permettent de remplacer le graphisme d’une image par celui d’une autre image, alors que les survols séparés font apparaître une image loin du pointeur. 278 Chapitre 12 Lorsque vous sélectionnez dans Fireworks un objet Web déclencheur créé à l’aide d’une poignée de comportement ou du panneau Comportements, Fireworks affiche toutes les relations de ses comportements. Par défaut, une interaction de survol est représentée par un trait bleu. Création d’un survol simple La forme la plus simple d’un survol consiste à remplacer le graphisme d’une image par celui d’une autre image, dans le même objet Web. Un survol simple implique une seule découpe ou référence. Vous pouvez choisir le graphisme de substitution dans n’importe quelle image. Pour affecter un effet de survol simple à l’image ou l’objet sélectionné : 1 Assurez-vous que l’image ou l’objet ne se trouve pas sur un calque partagé. Pour plus d’informations, voir « Partage des calques » à la page 232. 2 Choisissez Edition > Insertion > Découpe pour créer une découpe au-dessus de l’image ou de l’objet. 3 Cliquez sur le bouton Nouvelle image/Dupliquer dans le panneau Images pour créer une nouvelle image. 4 Créez, collez ou importez l’image qui sera utilisée comme substitution d’image. Placez l’image sous la découpe créée à l’étape 1, et qui est encore visible, bien que vous trouvez dans l’image 2. Les découpes sont visibles dans toutes les images. 5 Sélectionnez Image 1 dans le panneau Images pour revenir à l’image associée au graphisme d’origine. 6 Sélectionnez la découpe et placez le pointeur au-dessus de la poignée de comportement. Le pointeur prend l’aspect d’une main. Remarque : Vous pouvez sélectionner la découpe dans n’importe quelle image. Découpes, survols et références 279 7 Tirez la poignée de comportement vers le bord supérieur gauche de la découpe. Un trait bleu de comportement part du centre au coin supérieur gauche de la découpe, et la boîte de dialogue Permutation d’images apparaît. 8 Dans le menu Permuter l’image à partir de, indiquez l’image dans laquelle se trouve le graphisme à permuter, puis cliquez sur OK. 9 Cliquez sur l’onglet Aperçu pour visualiser et tester l’effet de survol, ou appuyez sur la touche F12 pour le prévisualiser dans un navigateur. Création d’un survol non superposé Un survol non superposé permet de permuter une image sous un objet Web lorsque le pointeur de la souris survole un autre objet Web. Dans un survol non superposé, en réponse à un événement souris (survol ou clic), une image apparaît à un autre endroit de la page Web. Le graphisme survolé est considéré comme le graphisme déclencheur, alors que le graphisme qui change est considéré comme le graphisme cible. A l’instar des survols simples qui utilisent une seule décooupe, vous devez d’abord définir la découpe de déclenchement, la découpe cible et l’image dans laquelle se trouve le graphisme de la permutation d’images. Vous devez ensuite relier le déclencheur à la découpe cible à l’aide d’un trait de comportement. Remarque : Le déclencheur d’un survol non superposé n’est pas nécessairement une découpe. Les références et les boutons disposent également de poignées de comportement qui peuvent être utilisées pour créer des effets de survol non superposé. Pour plus d’informations sur les références, voir « Création de références » à la page 290. Pour plus d’informations sur les boutons, voir « Création d’un symbole de bouton » à la page 295. Pour affecter un effet de survol non superposé à une image : 1 Choisissez Edition > Insertion > Découpe pour relier la découpe au graphisme de déclenchement. Remarque : Cette étape n’est pas indispensable si l’objet sélectionné est un bouton ou si une découpe ou une référence recouvre le graphisme. 2 Cliquez sur le bouton Nouvelle image/Dupliquer dans le panneau Images pour créer une nouvelle image. 3 Placez le deuxième graphisme qui servira de cible dans la nouvelle image à l’endroit voulu, dans le document. Vous pouvez placer le graphisme à un autre endroit que sous la découpe créée à l’étape 1. 4 Sélectionnez le graphisme, puis choisissez Edition > Insertion > Découpe pour associer une découpe à ce graphisme. 280 Chapitre 12 5 Sélectionnez Image 1 dans le panneau Images pour revenir à l’image associée au graphisme d’origine. 6 Sélectionnez la découpe, la référence ou le bouton qui couvre la zone de déclenchement (le gaphisme d’origine) et placez le pointeur sur la poignée de comportement. Le pointeur prend l’aspect d’une main. 7 Tirez la poignée de comportement de la découpe de déclenchement vers la découpe cible créée à l’étape 4. Le trait de comportement part du centre du déclencheur au coin supérieur gauche de la découpe cible, et la boîte de dialogue de Permutation d’images apparaît. 8 Dans le menu Permuter l’image à partir de, sélectionnez le graphisme créé à l’étape 2, puis cliquez sur OK. 9 Cliquez sur l’onglet Aperçu et testez l’effet de survol non superposé. Application de plusieurs survols à une découpe Vous pouvez tirer plusieurs poignées de comportement à partir d’une seule découpe pour créer plusieurs interactions de survol. Par exemple, vous pouvez déclencher un effet de survol et de survol non superposé à partir de la même découpe. Une découpe déclenchant un comportement de survol et un comportement de survol non superposé Remarque : Vous pouvez également ajouter plusieurs comportements à l’aide du panneau Comportements. Pour plus d’informations, voir « Utilisation du panneau Comportements pour l’ajout d’effets interactifs aux découpes » à la page 282. Découpes, survols et références 281 Pour appliquer plusieurs survols à une découpe sélectionnée : 1 Tirez une poignée de comportement de la découpe sélectionnée vers le bord de cette découpe ou d’une autre découpe. Tirez la poignée vers le bord supérieur gauche de cette même découpe pour créer un survol simple ou tirez-la vers une autre découpe pour créer un survol non superposé. 2 Sélectionnez l’image de la permutation d’images, puis cliquez sur OK. 3 Pour créer d’autres survols, répétez les étapes 1 et 2 autant de fois que vous le désirez. Suppression d’un survol glisser-déposer Vous pouvez supprimer aisément le survol glisser-déposer d’une découpe, d’une référence ou d’un bouton. Pour supprimer le survol glisser-déposer d’un objet Web ou d’un bouton sélectionné : 1 Cliquez sur le trait bleu de comportement à supprimer. 2 Cliquez sur OK pour supprimer l’interaction de survol. Utilisation du panneau Comportements pour l’ajout d’effets interactifs aux découpes Outre les survols, vous pouvez affecter d’autres types d’interactivité aux découpes à l’aide du panneau Comportements. Vous pouvez créer des interactions personnalisées en modifiant des comportements existants. Remarque : Bien qu’il est possible de créer des survols simples, non superposés et sophistiqués à l’aide du panneau Comportements, la technique de survol glisser-déposer est recommandée. Pour plus d’informations, voir « Ajout d’une interactivié simple aux découpes » à la page 277. Les comportements ci-dessous sont disponibles dans Fireworks : Survol simple ajoute un effet de survol à la découpe sélectionnée ou à l’objet Web en utilisant l’image 1 pour l’état Relevé et l’image 2 pour l’état Au-dessus. Après avoir sélectionné ce comportement, vous devez créer un graphisme dans la deuxième image, en utilisant la même découpe pour créer l’état Au-dessus. L’option Survol simple est en fait un groupe de comportements contenant les comportements Permutation d’images et Restaurer la permutation d’images. Permutation d’images remplace le graphisme qui figure sous la découpe spécifiée par le contenu d’une autre image de la même image multiple, ou par le contenu d’un fichier externe. Restaurer la permutation d’images restaure l’apparence par défaut du survol dans l’image 1. Image de la barre de navigation définit une découpe comme faisant partie d’une barre de navigation de Fireworks. Toutes les découpes faisant partie de la barre de navigation doivent posséder ce comportement. L’option Image de la barre de navigation est en fait un groupe de comportements contenant les comportements Barre de navigation - Au-dessus, Barre de navigation - Enfoncé, et Restaurer la barre de navigation. Ce comportement est automatiquement sélectionné pour vous, par défaut, lorsque vous utilisez l’Editeur de bouton pour créer un bouton incluant un état Enfoncé et Au-dessus Enfoncé. Pour plus d’informations sur les boutons, voir « Création d’un symbole de bouton » à la page 295. Barre de navigation Au-dessus indique l’état Au-dessus de la découpe sélectionnée lorsqu’elle fait partie d’une barre de navigation, et permet éventuellement de spécifier l’état Au-dessus enfoncé. 282 Chapitre 12 Barre de navigation Enfoncé indique l’état Enfoncé de la découpe sélectionnée lorsqu’elle fait partie d’une barre de navigation. Restaurer la barre de navigation ramène toutes les autres découpes de la barre de navigation à leur état Relevé. Afficher le menu contextuel associe un menu contextuel à une découpe ou une référence. Ce comportement est automatiquement défini si vous utilisez l’éditeur de menu contextuel. Pour plus d’informations, voir « Création de menus contextuels » à la page 306. Texte de la barre d’état permet de définir le texte d’un message à afficher dans la barre d’état, dans la partie inférieure de la fenêtre du navigateur. Affectation de comportements Vous pouvez affecter un comportement à une découpe à partir du panneau Comportements. Vous pouvez également affecter plusieurs comportements à la fois. Pour affecter un comportement à la découpe sélectionnée à l’aide du panneau Comportements : 1 Cliquez sur le bouton Ajouter un comportement (+) dans le panneau Comportements. Bouton Ajouter un comportement Bouton Supprimer le comportement 2 Sélectionnez un comportement dans le menu Ajouter un comportement. Pour une description de chaque comportement, voir « Utilisation du panneau Comportements pour l’ajout d’effets interactifs aux découpes » à la page 282. Modification des comportements Le panneau Comportements vous permet également de modifier des comportements existants. Vous pouvez spécifier le type d’événement (un clic, par exemple) qui déclenche le comportement. Remarque : Vous ne pouvez pas changer l’événement associé aux comportements Survol simple et Définir image barre de navigation. Pour changer l’événement souris activant le comportement : 1 Sélectionnez la découpe de déclenchement contenant le comportement à modifier. Tous les comportements associées à cette découpe apparaissent dans le panneau Comportements. 2 Sélectionnez le comportement à modifier. Découpes, survols et références 283 3 Cliquez sur la flèche située à côté de l’événement et choisissez un nouvel événement dans le menu déroulant : onMouseOver déclenche le comportement lorsque le pointeur survole la zone de déclenchement. onMouseOut déclenche le comportement lorsque le pointeur quitte la zone de déclenchement. onClick déclenche le comportement lorsqu’on clique sur l’objet de déclenchement. onLoad déclenche le comportement lorsque la page Web est chargée. Utilisation de fichiers externes pour la définition des états du survol Vous pouvez utiliser une image externe au document Fireworks actif comme image source d’un état du survol. Vous pouvez utiliser un fichier GIF, GIF animé, JPEG ou PNG. Si vous utilisez un fichier externe comme source d’une image, le fichier est subsitué à la découpe cible lorsque le survol est déclenché dans un navigateur Web. Ce fichier doit avoir les mêmes dimensions que la découpe à laquelle il doit se substituer. Si ce n’est pas le cas, le navigateur redimensionne l’image de ce fichier pour l’adapter aux dimensions de l’objet découpe. Le redimensionnement d’un fichier peut en dégrader la qualité, en particulier dans le cas d’une image GIF animée. Pour choisir un fichier externe comme source d’un état du survol : 1 A partir de la boîte de dialogue Permuter les images, Barre de navigation-Au-dessus ou Barre de navigation-Enfoncé, choisissez Fichier et cliquez sur l’icône de dossier. Remarque : Si cette option n’apparaît pas dans la boîte de dialogue Permuter les images, choisissez Options supplémentaires, puis exéctuez l’étape 1. 2 Recherchez le fichier que vous désirez utiliser, puis cliquez sur Ouvrir. 3 Si nécessaire, désactivez la case Précharger les images (si le fichier externe est de type GIF animé). Notez que la mise en mémoire cache peut interrompre l’affichage des images GIF animées utilisées comme états du survol. Pour éviter ce problème, désactivez l’option Précharger les images lorsque vous définissez le survol. Remarque : Si vous comptez exporter votre document pour l’utiliser sur le Web, assurez-vous que le fichier externe est accessible à partir du code HTML Fireworks exporté. Fireworks crée des trajets de document vers les fichiers image. Il est conseillé de placer les fichiers externes dans votre site local avant de les utiliser comme états du survol dans Fireworks. Ensuite, lorsque vous chargez vos fichiers sur le Web, assurez-vous que le fichier externe est également chargé. Pour plus d’informations sur le code HTML, voir « Exportation du fichier au format HTML » à la page 362. 284 Chapitre 12 Préparation des découpes pour l’exportation A l’aide du Vérificateur de propriétés, vous pouvez rendre des découpes interactives en leur affectant des URL et des images cibles. Vous pouvez également spécifier le texte à afficher dans un navigateur pendant le chargement d’une image. Par ailleurs, vous pouvez choisir un format de fichier d’exportation pour optimiser la découpe sélectionnée. Si la fenêtre du Vérificateur de propriétés est réduite, cliquez sur la flèche d’agrandissement située dans l’angle inférieur gauche pour visualiser toutes les propriétés de découpe. Propriétés de découpe dans le Vérificateur de propriétés A partir du Vérificateur de propriétés ou du panneau Calques, vous pouvez affecter des noms exclusifs aux découpes. Fireworks utilise le nom que vous spécifiez pour nommer les fichiers générés par la découpe lors de l’exportation. Si aucun nom de découpe n’est spécifié dans le Vérificateur de propriétés ou dans le panneau Calques, Fireworks affecte automatiquement un nom aux découpes lors de l’exportation. Vous pouvez modifier la convention d’affectation automatique de nom que Fireworks utilise, à partir de la boîte de dialogue Configuration HTML. Lorsque vous exportez un document Fireworks découpé, il est exporté sous forme de fichier HTML et de plusieurs fichiers graphiques. Vous pouvez définir les propriétés d’un fichier HTML exporté, à partir de la boîte de dialogue Configuration HTML. Affectation d’adresses URL Une adresse URL, ou Uniform Resource Locator (localisateur uniforme de ressources), est l’adresse d’une page ou d’un fichier spécifique sur l’Internet. Lorsque vous affectez une URL à une découpe, l’utilisateur peut accéder à cette adresse en cliquant sur la zone définie par la découpe dans son navigateur Web. Pour affecteur une URL à une découpe : Indiquez une URL dans le champ Lien du Vérificateur de propriétés. Conseil : Si vous devez réutiliser une URL, vous pouvez créer une bibliothèque d’URL dans le panneau URL, puis enregistrer les URL dans cette bibliothèque. Pour plus d’informations, voir « Utilisation des URL » à la page 264. Saisie du texte de description Le texte de description est affiché dans le cadre de l’image pendant le téléchargement de cette dernière à partir du Web ou à la place d’un graphisme ne pouvant pas être chargé. Dans les versions récentes d’Internet Explorer, ce texte apparaît à côté du pointeur de souris, dans une infobulle. La saisie de texte de description bref et explicite devient de plus en plus important dans la conception de page Web. En effet, un nombre croissant de malvoyants utilisent des applications de lecture à l’écran qui convertissent le texte de description en signal verbal élaboré par ordinateur lorsque le pointeur de la souris survole des graphiques sur une page Web. Découpes, survols et références 285 Pour spécifier le texte de description d’une découpe : Dans le Vérificateur de propriétés, tapez le texte dans le champ Alt. Affectation d’une cible La cible est l’un des cadres de la page Web, ou la fenêtre du navigateur Web, dans lequel ou laquelle s’ouvrira le document lié. Vous pouvez spécifier, dans le Vérificateur de propriétés, la cible de la découpe sélectionnée. Si la fenêtre du Vérificateur de propriétés est réduite, cliquez sur la flèche d’agrandissement pour visualiser toutes les propriétés. Pour spécifier, dans le Vérificateur de propriétés, la cible de la découpe sélectionnée : Dans le menu déroulant Cible, tapez le nom du cadre HTML dans le champ Cible ou choisissez un nom de cible réservé : _blank charge les documents liés dans une nouvelle fenêtre, sans nom, du navigateur. _parent charge les documents liés dans le jeu de cadres parent, ou dans la fenêtre parente du cadre contenant le lien. Si le cadre contenant le lien n’est pas imbriqué, le document lié sera chargé dans la fenêtre de base du navigateur. _self charge le document lié dans le même cadre ou la même fenêtre que le lien. Cette cible est implicite et ne nécessite normalement pas d’être spécifiée. _top charge les documents liés dans la fenêtre de base du navigateur, remplaçant ainsi tous les cadres. Paramètres d’exportation Vous pouvez optimiser une découpe en sélectionnant une option dans le menu contextuel Paramètres d’exportation du Vérificateur de propriétés. Vous pouvez choisir des paramètres d’optimisation courants, afin de définir rapidement un format de fichier et d’appliquer des paramètres spécifiques à un format précis. Pour plus d’informations sur ces paramètres et sur leur personnalisation, voir « Utilisation des paramètres d’optimisation prédéfinis » à la page 337. Affectation de nom aux découpes Une découpe permet de découper une image en plusieurs parties. Chacune de ces parties est exportée sous forme d’un fichier séparé ; ces fichiers doivent donc avoir un nom. Fireworks donne automatiquement un nom à chaque fichier de découpe lors de l’exportation. Vous pouvez accepter la convention de nom par défaut, modifier ou indiquer des noms personnalisés pour chaque découpe. Noms de fichiers de découpe personnalisés Vous pouvez affecter des noms spécifiques aux découpes, afin d’identifier aisément les fichiers de découpe dans la structure de fichiers de votre site Web. Par exemple, si vous avez dans une barre de navigation un bouton qui renvoie à la page d’accueil, vous pouvez baptiser cette découpe Accueil. Pour indiquer un nom de découpe personnalisé, procédez de l’une des manières suivantes : • Sélectionnez la découpe dans le dossier, tapez un nom dans la zone Nom de l’objet du Vérificateur de propriétés, puis appuyez sur Entrée. 286 Chapitre 12 • Dans le calque Web, cliquez deux fois sur le nom de la découpe, indiquez un nouveau nom et appuyez sur Entrée. N’ajoutez pas d’extension au nom de fichier. Fireworks ajoute automatiquement les extensions aux noms des fichiers lors de l’exportation. Affectation automatique de nom aux fichiers de découpe Si aucun nom de découpe n’est spécifié dans le Vérificateur de propriétés ou dans le panneau Calques, Fireworks affecte automatiquementun nom exclusif à chaque fichier de découpe en utilisant la convention de nom par défaut. Pour nommer automatiquement un fichier de découpe : Lorsque vous exportez vos images en découpes, indiquez un nom dans la zone Nom de fichier (Windows) ou Nom (Macintosh) de la boîte de dialogue d’exportation. N’ajoutez pas d’extension de fichier. Fireworks ajoute automatiquement les extensions aux noms des fichiers lors de l’exportation. Modification de la convention de nom par défaut Vous pouvez modifier la convention de nom des découpes dans l’onglet Propre au document de la boîte de dialogue Configuration HTML. Fireworks vous permet de créer votre propre convention de nom, à l’aide de nombreuses options. Vous pouvez créer une convention de nom comprenant jusqu’à six éléments. Un élément peut être l’une des options de nom automatique suivantes : Option Description Aucun Aucun nom n’est appliqué à l’élément. doc.nom L’élément prend le nom du document. « découpe » Vous pouvez insérer le mot « découpe » dans la convention de nom. Découpe # (1,2,3...) Découpe # (01,02,03...) Découpe # (A,B,C...) Découpe # (a,b,c...) L’élément est numéroté de façon numérique ou alphabétique, selon le style choisi. ligne/colonne (l3_c2, l4_c7...) Ligne (r##) et Colonne (c##) désignent les lignes et colonnes du tableau que les navigateurs Web utilisent pour reconstruire une image découpée. Vous pouvez utiliser ces informations dans la convention de nom. Souligné Point Espace Tiret L’élément utilise l’un de ces caractères, en général comme séparateur entre d’autres éléments. Par exemple, si le nom du document est mondoc, la convention de nom doc.name + « découpe » + N° de découpe (A,B,C...) donnera le nom découpe mondocdécoupeA. Vous n’aurez pratiquement jamais à utiliser une convention de nom utilisant les six éléments. Si une découpe s’étend sur plusieurs images, Fireworks ajoutera par défaut un numéro au nom de fichier de chaque image. Par exemple, vous indiquez le nom de fichier accueil pour un bouton à trois états, Fireworks nommera le graphisme de l’état Relevé accueil.gif, celui de l’état Au-dessus accueil_f2.gif, et celui de l’état Enfoncé accueil_f3.gif. Vous pouvez créer votre propre convention de nom pour les découpes en plusieurs images, dans la boîte de dialogue Configuration HTML. Découpes, survols et références 287 Pour modifier la convention de nom par défaut : 1 Choisissez Fichier > Configuration HTML pour ouvrir la boîte de dialogue correspondante. 2 Cliquez sur l’onglet Propre au document. 3 Dans la section Noms de fichier, créez votre propre convention de nom en choisissant dans les listes. Par exemple, la convention de nom doc.name + « découpe » + N° de découpe (A,B,C...) donnera le nom suivant : 4 (Facultatif ) Pour définir ces données comme paramètres par défaut pour tous les nouveaux documents Fireworks, cliquez sur Paramètres par défaut. Remarque : Soyez prudent lorsque vous choisissez Aucun comme option pour la convention de nom des découpes. Si vous choisissez cette option pour l’un des trois premiers menus, Fireworks exportera des fichiers de découpe qui s’écraseront successivement. Vous obtiendrez en définitive qu’un seul graphisme exporté et un tableau affichant ce graphisme dans chaque cellule. Définition du mode d’exportation des tables HTML La découpe définit la présentation de la structure de la table HTML lorsqu’un document Fireworks est exporté pour être utilisé sur le Web. Lorsque vous exportez en format HTML un document Fireworks découpé, le document est assemblé dans une table HTML. Chaque partie du document Fireworks occupe une cellule de la table. Une fois le document exporté, une découpe Fireworks correspond à une cellule de la table dans le code HTML. Vous pouvez préciser la manière dont la table Fireworks doit être reconstruite dans un navigateur. Entre autres options, vous pouvez, lorsque vous exportez un document en fichier HTML, choisir d’utiliser des séparateurs ou des tables imbriquées : • Les séparateurs sont des images permettant de régler les espaces entre les cellules de la table de façon à ce que ces dernières soient alignées correctement lorsqu’elles sont affichées dans un navigateur. 288 Chapitre 12 • Une table imbriquée est littéralement une table figurant au sein d’une autre table. Les tables imbriquées ne comportent pas de séparateurs. Elles peuvent mettre plus de temps à se charger dans les navigateurs et, dans la mesure où elles ne comportent pas de séparateurs, il est plus simple de modifier leur code HTML. Pour plus d’informations sur le code HTML, voir « Exportation du fichier au format HTML » à la page 362. Pour spécifier le mode d’exportation des tables HTML à partir de Fireworks : 1 Choisissez Fichier > Configuration HTML, ou cliquez sur le bouton Options de la boîte de dialogue Exporter. 2 Cliquez sur l’onglet Table. 3 Choisissez une option d’espacement dans le menu déroulant Espace avec : Tables imbriquées — Pas de séparateurs crée une table imbriquée sans séparateur. Table unique — pas de séparateur crée une table unique sans séparateur. Cette option risque d’entraîner un affichage incorrect dans certains cas. Espace transparent de 1 pixel utilise une image GIF de 1 pixel carré comme séparateur. Ce séparateur peut ensuite être agrandi en fonction des besoins dans le code HTML. Cela génère un ligne de 1 pixel de hauteur dans la partie supérieure de la table et une colonne de 1 pixel de largeur dans la partie inférieure droite de la table. 4 Sélectionnez une couleur de cellule pour les découpes HTML : • Pour affecter aux cellules la même couleur d’arrière-plan que celle du document, choisissez Utiliser la couleur du fond. • Désactivez Utiliser la couleur du fond pour choisir une autre couleur à partir de la source de couleurs. 5 Cliquez sur le menu déroulant Contenu pour choisir ce qui doit être placé dans les cellules vides : Aucun laisse les cellules vides. Image du séparateur place une petite image transparente appelée spacer.gif dans les cellules vides. Espace insécable place une balise d’espacement HTML dans les cellules vides. Ce type cellule est d’aspect creux. Remarque : Des cellules vides ne sont ajoutées que si vous avez désélectionné Inclure les zones sans découpe à partir de la boîte de dialogue Exporter pendant l’exportation. 6 Cliquez sur OK. Pour plus d’informations sur le choix des options d’explortation HTML, voir « Définition des options d’exportation du code HTML » à la page 369. Remarque : Vous pouvez spécifier des paramètres d’exportation de table propres aux objets découpe des documents. Si nécessaire, utilisez le bouton Paramètres par défaut de dans l’onglet Propre au document la boîte de dialogue Configuration HTML pour appliquer les valeurs par défaut à l’ensemble des documents. Découpes, survols et références 289 Utilisation des références et des cartes images Les concepteurs Web font souvent un grand usage des références pour créer des petites parties d’une image interactive plus grande. Une référence est une zone inscrite à l’intérieur d’une image Web ; cette zone pointe vers une adresse URL. Une carte image n’est rien de plus qu’une image sur laquelle une ou plusieurs zones de référence ont été placées. Carte image avec références Les références et les cartes images utilisent souvent moins de ressources que les images découpées. La découpe peut exiger plus de ressources au navigateur, en raison du code HTML supplémentaire qu’il doit télécharger et de la puissance de traitement requise pour rassembler les images découpées. Remarque : Il est possible de créer une carte image découpée. L’exportation d’une carte image découpée génère en général de nombreux fichiers graphiques. Pour plus d’informations sur les découpes, voir « Création d’un objet découpe » à la page 270. Les références sont une solution idéale lorsque vous liez des zones d’une image à des pages Web et que vous ne souhaitez pas que ces zones soient sélectionnées ou produisent des effets de survol en réponse à un événement souris (déplacement ou clic). Les références et les cartes images sont également très intéressantes si le graphisme sur lequel vous avez placé les références serait mieux exporté sous forme d’un seul fichier graphique. En d’autres termes, l’ensemble du gaphisme serait mieux exporté en utilisant les mêmes format de fichier et paramètres d’optimisation. Création de références Après avoir identifié les zones du graphisme source représentant de bons repères de navigation, créez les références, puis associez-leur des liens URL. Il existe deux méthodes pour créer des références : • Vous pouvez tracer la zone de référence au-dessus de la zone cible du graphisme, à l’aide des Outils Référence rectangulaire, circulaire ou polygonale (forme irrégulière). • Vous pouvez sélectionner un objet et insérer la référence par-dessus cet objet. Une référence ne doit pas nécessairement être un rectangle ou un cercle. Vous pouvez également créer des références polygonales, composées de nombreux points. Cette approche est particulièrement intéressante avec les images complexes. 290 Chapitre 12 Pour créer une référence rectangulaire ou circulaire : 1 Choisissez l’outil Référence rectangulaire ou référence circulaire dans la section Web du panneau Outils. 2 Faites glisser l’outil Référence pour dessiner une zone de référence sur l’une des zones du graphisme. Maintenez enfoncée la touche Alt (Windows) ou Option (Macintosh) pour dessiner à partir du point central. Remarque : Vous pouvez ajuster la position d’une référence à mesure que vous la dessinez. Tout en maintenant enfoncé le bouton de la souris, appuyez simplement et maintenez enfoncée la barre d’espacement du clavier, puis faites glisser la découpe vers un autre emplacement du document. Relâchez la barre d’espacement pour continuer à dessiner la référence. Pour créer une référence de forme irrégulière : 1 Choisissez l’outil Référence polygonale. 2 Cliquez aux endroits désirés pour placer des points vectoriels, un peu de la même façon que pour dessiner des segments de droites avec l’outil Plume. La trame définit la zone de référence, que le trajet soit ouvert ou fermé. Pour créer une référence en décalquant un ou plusieurs objets sélectionnés : 1 Choisissez Edition > Insertion > Référence. Si vous avez sélectionné plusieurs objets, un message vous demande si vous souhaitez créer une référence rectangulaire unique couvrant tous les objets ou plusieurs références, une pour chaque objet. 2 Cliquez sur Simple ou Multiple. Le calque Web affiche la ou les nouvelles références. Modification d’une référence Les références sont des objets Web et, à l’instar de nombreux objets, elles peuvent être modifiées à l’aide des outils Pointeur, Sous-sélection et Transformation. Pour plus d’informations sur ces outils de modification d’objet Web, voir « Utilisation des outils pour modifier des objets découpe » à la page 276. Découpes, survols et références 291 Vous pouvez changer la position et les dimensions d’une référence dans le Vérificateur de propriétés ou le panneau Info. Pour plus d’informations sur la modification des dimensions d’un objet, voir « Transformation numérique d’objets » à la page 126. Pour plus d’informations sur la modification de la position d’un objet, voir « Edition d’objets sélectionnés » à la page 122. Vous pouvez également modifier la forme d’une référence dans le Vérificateur de propriétés. Pour convertir une référence sélectionnée en rectangle, cercle ou polygone : Dans le Vérificateur de propriétés, choisissez Rectangle, Cercle ou Polygone dans le menu déroulant Forme de la référence. Préparation des découpes pour l’exportation Vous pouvez utiliser le Vérificateur de propriétés pour affecter aux références des URL, du texte de description, des cibles et des noms personnalisés. Si la fenêtre du Vérificateur de propriétés est réduite, cliquez sur la flèche d’agrandissement située dans l’angle inférieur gauche pour visualiser toutes les propriétés. Vous affectez des propriétés à des références de la même façon que pour des découpes. Pour plus d’informations sur l’utilisation du Vérificateur de propriétés pour affecter des URL, du texte de description, des images cibles et des noms personnalisés, voir « Préparation des découpes pour l’exportation » à la page 285. Création d’une carte image Après avoir inséré plusieurs références au-dessus d’un graphisme, vous devez exporter ce dernier sous forme de carte image pour qu’il puisse fonctionner dans un navigateur Web. L’exportation d’une carte image génère le fichier graphique et le fichier HTML qui contient les informations de la carte relatives aux références et aux liens URL correspondants. Remarque : Les exportations de Fireworks ne peuvent produire que des cartes images côté client. Comme autre solution d’exportation, copiez une carte image dans le Presse-papiers et collez-la dans Dreamweaver ou dans un autre éditeur HTML. Pour exporter une carte image ou pour la copier dans le Presse-papiers : 1 Optimisez le graphisme avant son exportation. Pour plus d’informations, voir « Optimisation » à la page 333. 2 Choisissez Fichier > Exporter. 3 Si vous choisissez d’exporter l’image (plutôt que de la copier dans le Presse-papiers), placezvous dans le dossier où vous souhaitez placer le fichier HTML et nommez ce dernier. Si vous avez déjà créé l’arborescence locale de votre site Web, enregistrez le graphisme dans le dossier approprié de ce site. 4 Dans le menu déroulant Type, choisissez HTML et images. 292 Chapitre 12 5 Choisissez une option dans menu déroulant HTML : Exporter le fichier HTML crée le fichier HTML approprié et les fichiers graphiques correspondants, que vous pouvez importer ensuite dans Dreamweaver ou dans un autre éditeur HTML. Copier dans le Presse-papiers copie simplement la carte image dans le Presse-papiers et vous permet de la coller ensuite dans Dreamweaver ou dans un autre éditeur HTML. 6 Dans la zone Découpes, choisissez Aucune. 7 Si nécessaire, activez la case à cocher Placer les images dans des sous-dossiers, et ouvrez le dossier approprié. (Cette opération n’est pas nécessaire si vous copiez l’image dans le Pressepapiers.) 8 Cliquez sur Enregsitrer pour fermer la boîte de dialogue Exporter. Conseil : Lorsque vous exportez des fichiers, Fireworks permet d’utiliser les commentaires en HTML pour identifier clairement le début et la fin du code des cartes images et autres éléments Web créées dans Fireworks. Par défaut, aucun commentaire n’est ajouté dans le code HTML. Pour les inclure, ouvrez la boîte de dialogue Configuration HTML et activez l’option Inclure les commentaires HTML. Pour toutes informations sur la mise en place du contenu Fireworks exporté dans Dreamweaver ou dans un autre éditeur HTML, voir « Utilisation de Fireworks avec d’autres applications » à la page 373. Création de survols avec références Avec la technique de survol de Glisser-déposer, utilisée pour la création d’effets interactifs, vous pouvez aisément affecter un effet de survol non superposé à une référence, si la zone cible est une découpe. Les effets de survol sont appliqués aux références de la même manière que pour les découpes. Pour plus d’informations, voir « Ajout d’une interactivié simple aux découpes » à la page 277. Remarque : Une référence ne peut déclencher qu’un survol non superposé. Ce dernier ne peut pas être la cible d’un survol provenant d’une autre référence ou d’une découpe. Une fois que vous avez affecté un comportement de survol non superposé à une référence, la ligne bleue de connexion n’est visible que lorsque la référence est sélectionnée. Utilisation des références par-dessus des découpes Vous pouvez placer une référence par-dessus une découpe pour déclencher une action ou un comportement. Choisissez cette methode si vous avez un graphisme de taille importante et n’utilisez qu’une petite section du graphisme comme déclencheur d’action. Découpes, survols et références 293 Par exemple, appliquez cette méthode si ce graphisme comporte du texte et que vous voulez que le texte uniquement déclenche une action ou un comportement tel qu’un effet de survol. Vous pouvez placer une découpe par-dessus le graphisme et une référence par-dessus le texte. Le simple déplacement du pointeur au-dessus du texte déclenchera l’effet de survol, mais l’ensemble du graphisme placé sous la découpe sera substitué lorsque l’éffet de survol se produira. Ne créez pas de références qui chevauchent plusieurs découpes car leur comportement peut être imprévisible. Pour créer le déclencheur d’un effet de survol à l’aide d’une référence placée par-dessus une découpe : 1 Insérez une découpe par-dessus l’image originale de l’effet de substitution. 2 Dans le panneau Images, créez une nouvelle image et insérez le graphisme qui sera utilisé comme image permutée. Veuillez à placer cette image sous la découpe insérée à l’étape 1. 3 Tirez un trait de comportement de la référence à la découpe contenant l’image à permuter. La boîte de dialogue Permuter l’image s’affiche alors. 4 Dans la liste Permuter l’image à partir de, choisissez l’image qui contient le graphisme du survol, puis cliquez sur OK. 294 Chapitre 12 CHAPITRE 13 Création de boutons et de menus déroulants Avec Macromedia Fireworks MX, vous pouvez créer tout un ensemble de boutons et de menus déroulants JavaScript, même si vous n’avez jamais utilisé JavaScript. L’éditeur de boutons de Fireworks vous permet de créer des boutons étape par étape et d’automatiser de nombreuses tâches. Vous obtenez ainsi un symbole de bouton qui, une fois créé, permet de produire aisément des instances du symbole pour créer des barres de navigation. Fireworks dispose également d’un Editeur de menus déroulants qui permet de créer rapidement et aisément des menus déroulants verticaux et horizontaux. Dans l’éditeur de menus déroulants, l’onglet Avancé vous permet de définir l’espacement des cellules et leur marge intérieure, le retrait du texte, les bordures des cellules et bien d’autres propriétés. Lors de l’exportation d’un bouton ou d’un menu déroulant, Fireworks génère automatiquement le code JavaScript nécessaire pour l’afficher dans un navigateur Web. Macromedia Dreamweaver permet d’insérer aisément le code HTML et JavaScript de Fireworks dans vos pages Web ou de couper/coller le code dans un fichier HTML. Pour plus d’informations, voir « Utilisation de Macromedia Dreamweaver MX » à la page 373. Création d’un symbole de bouton Les boutons sont des éléments de navigation dans une page Web. Les boutons créés dans l’éditeur de boutons présentent les caractéristiques suivantes : • Vous pouvez insérer n’importe quel type d’objet graphique ou textuel dans un bouton. • Vous pouvez créer entièrement un nouveau bouton, convertir un objet existant en bouton ou importer des boutons déjà créés. • Un bouton est un type particulier de symbole. Vous pouvez en faire glisser ses occurrences de la Bibliothèque vers le document. Cette opération va permettre de changer l’aspect d’un bouton et de mettre automatiquement à jour l’aspect de toutes les occurrences de ce bouton dans la barre de navigation. Pour plus d’informations sur les symboles, voir « Utilisation de symboles » à la page 259. • Vous pouvez modifier le texte, l’URL et la cible d’une occurrence d’un bouton sans toucher à ses autres occurrences, ni rompre le lien entre cette occurrence et son symbole. • Une occurrence d’un bouton est un objet encapsulé. Le déplacement d’une occurrence de bouton au sein d’un document déplace également tous les composants et les états qui lui sont associés. Vous n’avez donc plus besoin d’effectuer des modifications pour réograniser les images. • Un bouton est facile à modifier. Double-cliquez sur l’occurrence au sein du document, et effectuez les modifications dans l’éditeur de boutons ou dans le Vérificateur de propriétés. 295 • Comme les autres symboles, les boutons ont un point d’alignement. Le point d’alignement est un point de centrage qui vous aide à aligner le texte et les différents états du bouton lorsque vous utilisez l’éditeur de boutons. Etats de bouton Vous pouvez affecter quatre états différents à un bouton. Chaque état correspond à l’aspect que doit prendre le bouton en réponse à un événement souris : L’état Relevé (état par défaut) représente l’apparence normale du bouton. L’état Au-desus conditionne l’aspect du bouton lorsque le pointeur le survole. Cet état signale à l’utilisateur que le fait de cliquer produira une action. L’état Enfoncé correspond souvent à l’aspect du bouton lorsque l’utilisateur clique dessus ; il est alors généralement représenté tel qu’il apparaît sur la page Web active d’une barre de navigation comportant plusieurs boutons. L’état Au-dessus Enfoncé est affiché lorsque l’utilisateur déplace le pointeur de la souris sur le bouton en état Enfoncé ; il est alors généralement représenté tel qu’il apparaît sur la page Web active d’une barre de navigation comportant plusieurs boutons. L’éditeur de boutons permet de créer les différents états, ainsi que la zone active qui déclenche les action du bouton. Utilisation de l’Editeur de boutons Dans Fireworks, l’Editeur de boutons est le programme dans lequel vous créez et modifiez un symbole de boutons JavaScript. Les onglets figurant au-dessus de l’Editeur de boutons représentent les quatre états de bouton et à la zone active. Les conseils affichés dans les différentes options de l’Editeur de boutons facilitent les décisions de conception des quatre états. L’éditeur de boutons 296 Chapitre 13 Création d’un bouton simple à deux états L’éditeur de boutons permet de créer des boutons en dessinant des formes, en important des images ou en déplaçant des objets de la fenêtre du document. Différentes étapes vous alors proposées pour définir le comportement du bouton. Pour créer un bouton à l’état Relevé : 1 Choisissez Edition > Insertion > Nouveau bouton pour ouvrir l’éditeur de boutons. L’éditeur de boutons affiche l’onglet de l’état Relevé. 2 Importer ou créer le graphisme Relevé : • Utilisez la méthode Glisser-déposer ou importer le graphisme qui représentera l’état Rélevé du bouton dans la zone active de l’éditeur de boutons. • A l’aide des outils de dessins, créez un graphisme ou utiliser l’outil Texte pour créer un bouton à partir d’un texte. • Cliquez sur Importer un bouton ou sélectionnez un bouton modifiable dans la bibliothèque d’importation de boutons. Si vous choisissez cette option, vous n’aurez pas à vous soucier de la création des autres états du bouton. Tous les autres états du boutons seront créés automatiquement avec les graphismes et texte correspondants. 3 Si nécessaire, choisissez l’outil Texte et créer le texte associé au bouton. Pour créer un bouton à l’état Au-dessus : 1 Ouvez l’éditeur de boutons, puis cliquez sur l’onglet Au-dessus. 2 Exécutez ensuite l’une des opérations suivantes : • Cliquez sur l’option Copier le graphisme Relevé pour coller une copie de l’état Relevé dans la fenêtre Au-dessus, puis modifiez cette copie pour changer son aspect. • Faites glisser-déposer, importez ou dessinez le graphisme. Création d’un bouton à trois ou quatre états Lorsque vous créez un bouton, en plus des états Relevé et Au-dessus, vous pouvez lui affecter les états Enfoncé et Au-dessus Enfoncé. Ces états ajoutent des effets visuels pour les utilisateurs de page Web. Vous pouvez créer une barre de navigation comportant des boutons à un voire deux états, mais dans Fireworks, seuls les boutons à quatre états sont considérés comme de véritables boutons de barre de navigation. Dans Fireworks, plusieurs comportements de barre de navigation peuvent être appliquées pour faire fonctionner les boutons comme s’ils étaient interdépendants. Par exemple, vous pouvez créer des boutons de barre de navigation qui se comportent comme des boutons-poussoirs d’un vieux poste radio de voiture ; lorsque vous cliquez sur un bouton, il reste enfoncé tant que vous ne cliquez pas sur un autre bouton. Les boutons à quatre états ne sont pas indispensables pour la création d’une barre de navigation. Toutefois, leur utilisation permet de tirer parti des comportements de barre de navigation prédéfinis dans Fireworks. Pour plus d’informations sur la création des états de bouton Relevé et Au-dessus, voir « Création d’un bouton simple à deux états » à la page 297. Création de boutons et de menus déroulants 297 Pour créer un bouton à l’état Enfoncé : 1 Dans l’éditeur de boutons, ouvrez un bouton à deux états, puis cliquez sur l’onglet Enfoncé. 2 Exécutez ensuite l’une des opérations suivantes : • Cliquez sur l’option Copier le graphisme Au-dessus pour coller une copie du graphisme de l’état Au-dessus dans la fenêtre Au-dessus, puis modifiez cette copie pour changer son aspect. • Faites glisser-déposer, importez ou dessinez le graphisme. Remarque : Lorsque vous insérez ou créez le graphisme associé à l’état Enfoncé, l’option Inclure l’état Enfoncé de la barre de navigation est automatiquement sélectionnée. Cet état est associé aux boutons faisant partie de la barre de navigation. Pour créer un état Au-dessus Enfoncé : 1 Dans l’éditeur de boutons, ouvrez un bouton à trois états, puis cliquez sur l’onglet Au-dessus Enfoncé. 2 Exécutez ensuite l’une des opérations suivantes : • Cliquez sur l’option Copier le graphisme Enfoncé pour coller une copie du graphisme de l’état Enfoncé dans la fenêtre Au-dessus Enfoncé, puis modifiez cette copie pour changer son aspect. • Faites glisser-déposer, importez ou dessinez le graphisme. Remarque : Lorsque vous insérez ou créez le graphisme associé à l’état Au-dessus Enfoncé, l’option Inclure l’état Au-dessus Enfoncé de la barre de navigation est automatiquement sélectionnée. Cet état est associé aux boutons faisant partie de la barre de navigation. Utilisation d’effets de biseau pour tracer les états des boutons Pendant la création du graphisme associé à chaque état de bouton, vous pouvez appliquer des effets en direct prédéfinis pour affecter des aspects communs à chaque état. Par exemple, si vous créez un bouton à quatre états, vous pouvez appliquer l’effet En relief au graphisme de l’état Relevé, En surbrillance au graphisme de l’état Enfoncé, etc. Pour appliquer à un symbole de bouton des effets en direct prédéfinis : 1 Dans l’éditeur de bouton, ouvrez le symbole de bouton désiré, sélectionnez le graphisme dans lequel vous allez ajouter un effet en direct. 2 Dans le Vérificateur de propriétés, cliquez sur le bouton Ajouter l’effet. 3 A partir du menu déroulant qui s’affiche, choisissez l’une des options suivantes : • Choisissez Biseau et estampe > Biseau intérieur. • Choisissez Biseau et estampe > Biseau extérieur. 4 Dans la fenêtre contextuelle qui s’affiche, choisissez un réglage prédéfini de bouton. Les réglages prédéfinis de bouton sont décrits ci-dessous. 298 Chapitre 13 Effet de réglage prédéfini Description En relief Le biseau semble en volume au-dessus des objets environnants. En surbrillance Les couleurs du bouton s’illuminent. Cartouche Le biseau semble enfoncé au-dessous des objets environnants. Inversé Le biseau semble enfoncé au-dessous des objets environnants, et les couleurs s’illuminent. 5 Répétez les étapes 1 à 4 pour les autres boutons en affectant un effet prédéfini différent à chaque état de bouton. Conversion des survols de Fireworks en boutons Vous pouvez créer des boutons à partir des survols créés dans les précédentes versions de Fireworks. Les composants sont convertis en bouton et le nouveau bouton est placé dans la bibliothèque. Pour plus d’informations sur les survols, voir « Affectation de comportements interactifs aux découpes » à la page 277. Pour convertir un survol Fireworks en bouton : 1 Supprimez la découpe ou la référence recouvrant les images de survol. 2 Dans le panneau Images, choisissez Afficher toutes les images dans le menu déroulant Séquence de calques. 3 Sélectionnez tous les objets à inclure dans le bouton. Conseil : A l’aide de l’outil Sélectionner derrière, sélectionnez les objets masqués par d’autres objets. Pour plus d’informations, voir « Utilisation de l’outil Sélectionner derrière » à la page 108. 4 Choisissez Modification > Symbole > Convertir en symbole. La boîte de dialogue Propriétés du symbole s’affiche. 5 Dans le champ Nom, tapez le nom du symbole. Création de boutons et de menus déroulants 299 6 Choisissez le type de symbole du bouton. 7 Cliquez sur OK. Le nouveau bouton est ajouté à la bibliothèque. Conseil : Vous pouvez également convertir en bouton des animations à quatre images. Sélectionnez tous les quatre objets, et chacun d’eux est placé dans son état respectif. Insertion de boutons dans un document Vous pouvez insérer des occurrences de symboles de bouton à partir du panneau Bibliothèque. Pour placer des occurrences d’un symbole de bouton dans un document : 1 Ouvrez le panneau Bibliothèque. 2 Tirez le symbole de bouton dans le document. Pour placer des occurrences supplémentaires d’un symbole de bouton dans un document, exécutez l’une des opérations suivantes : • Sélectionnez une occurrence, puis choisissez Edition > Cloner pour placer une autre occurrence directement devant l’occurrence sélectionnée. La nouvelle occurrence devient l’objet sélectionné. Conseil : Le clonage des occurrences de bouton est pratique lorsque vous créez une barre de navigation alignée, car il permet de déplacer les clones dans un sens à l’aide des touches de direction, tout en conservant l’alignement avec l’autre coordonnée. • Tirez une autre occurrence de bouton depuis le panneau Bibliothèque dans le document. • Maintenez enfoncée la touche Alt (Windows) ou Option (Macintosh) en faisant glisser une occurrence sur le document pour créer une autre occurence du bouton. • Copiez l’occurrence, puis collez des occurrences supplémentaires. Importation des symboles de bouton Les symboles de bouton figurant dans le panneau Bibliothèque sont spécifiques à chaque document. Si vous ouvrez un document dont les symboles figurent dans le panneau Bibliothèque, puis créez un nouveau document, le panneau Bibliothèque de ce dernier sera vide. Il existe cependant plusieurs méthodes pour importer des symboles de bouton dans le panneau Bibliothèque d’un document, que ce soit à partir d’une bibliothèque ou d’un autre document Fireworks. Pour importer des symboles d’un bouton dans le panneau Bibliothèque d’un document, exécutez l’une des actions suivantes : • Tirez une occurrence du bouton d’un autre document Fireworks et déposez-la dans le document actif. • Coupez une occurrence d’un autre document Fireworks et collez-la dans le document actif. • Exportez les symboles de bouton depuis un autre document Fireworks vers un fichier bibliothèque PNG, puis importez les symboles du fichier bibliothèque PNG dans le document. 300 Chapitre 13 • Choisissez Edition > Bibliothèques, puis à partir des bibliothèques de boutons du sous-menu, importez les symboles dans le panneau Bibliothèque du document. Ces bibliothèques contiennent une grande variété de symboles de bouton prédéfinis créés par Macromedia. Les méthodes d’importation et d’exportation des symboles de bouton sont les mêmes que celles utilisées pour l’animation et les symboles graphiques. Pour plus d’informations, voir « Importation de symboles » à la page 262 et « Exportation de symboles » à la page 263. Modification des symboles de bouton Dans Fireworks MX, les symboles de bouton sont des symboles particuliersayant deux types de propriété : lorsque vous modifiez une occurrence ou son symbole certaines propriétés changent dans toutes les autres occurrences, alors que dans d’autres cas, les changements se limitent uniquement aux propriétés de l’occurrence active. Dans Fireworks, les symboles de bouton permettent d’utiliser des symboles tout en autorisant la modification de certaines propriétés d’une occcurrence de bouton telles que du texte, sans toucher aux autres occurrences. Modification des propriétés d’un symbole Utilisez l’éditeur de boutons pour modifier les symboles de bouton. Les propriétés qui changent dans une occurrence lorsque vous modifiez le symbole de son bouton sont celles qui sont généralement communes à une série de bouton utilisés dans la barre de navigation ou dans un site Web : • La modification d’attributs graphiques tels que la couleur et le type des traits, la couleur et le type de trame, la forme du trajet et les images • Les effets en direct, l’opacité ou le mode de fondu appliqués à chaque objet du symbole de bouton • • • • • Les dimensions et la position de la zone active Comportement du bouton principal Optimisation et paramètre d’exportation Lien URL (utilisé également comme propriété d’une occurrence) Image cible (utilisée également comme propriété d’une occurrence) Pour modifier les propriétés d’un bouton au niveau de son symbole : 1 Dans l’éditeur de boutons, procédez de l’une des manières suivantes pour ouvrir le bouton : • Double-cliquez sur l’occurrence du bouton dans l’espace de travail. • Dans le panneau Bibliothèque, double-cliquez sur l’aperçu du bouton ou sur l’icône du symbole, à côté du symbole du bouton. 2 Modifiez les attributs graphiques du bouton et cliquez sur Terminé. Les modifications sont appliquées à toutes les occurrences du symbole du bouton. Création de boutons et de menus déroulants 301 Modification des propriétés des occurrences Dans le Vérificateur de propriétés, les propriétés des occurrences sont modifiées lorsque vous sélectionnez une seule occurrence. Les propriétés que vous pouvez modifier dans une occurrence, sans toucher à son symbole ou aux autres occurrences de ce symbole, sont celles qui varient généralement d’un bouton à l’autre dans une série de boutons : • Le nom d’objet d’une occurrence apparaissant dans le panneau Calques et utilisé lors de l’exportation pour nommer les découpes exportées de l’occurrence du bouton • Les effets en direct, l’opacité ou le mode de fondu appliqué à l’ensemble de l’occurrence • Les caractères et la mise en page du texte, notamment la police, la taille des caractères, l’orientation et la couleur du texte • • • • Le lien URL (utilisé également comme propriété d’un symbole) La description de l’image L’image cible (utilisée également comme propriété d’un symbole) Les comportements supplémentaires affectés à une occurrence à partir du panneau Comportements • L’option Afficher l’état Enfoncé lors du chargement dans le Vérificateur de propriétés, au sein d’une barre de navigation Remarque : Dans Fireworks MX, vous n’êtes pas tenu de choisir l’option Afficher l’état Enfoncé lors du chargement, pour chaque occurrence de bouton dans une barre de navigation. La section Propre au document de la boîte de dialogue Configuration HTML contient une option appelée Exportation de plusieurs fichiers. Lorsque vous choisissez cette option, puis exportez une barre de navigation, Fireworks MX exporte chaque page HTML avec l’état Enfoncé du bouton correspondant. Pour plus d’informations, voir « Définition des options d’exportation du code HTML » à la page 369. Pour modifier les propriétés de l’occurrence d’un seul symbole de bouton : 1 Sélectionnez l’occurence de bouton dans la zone de travail. 2 Définissez les propriétés dans le Vérificateur de propriétés. Définition des propriétés d’un bouton interactif Dans Fireworks, vous pouvez contrôler les éléments interactifs d’un bouton, notamment la zone active, l’URL, la cible et la description de l’image. Modification de la zone active d’un symbole de bouton La zone active du symbole d’un bouton déclenche les effets interactifs lorsque le pointeur survole le bouton ou que vous cliquez sur ce dernier dans un navigateur Web. La zone active d’un bouton est une propriété de symbole et est exclusive à chaque symbole de bouton. 302 Chapitre 13 Lorsque vous créez un symbole de bouton, Fireworks crée automatiquement une découpe spéciale, suffisamment grande pour englober tous les états d’un bouton. La découpe d’un bouton ne peut être modifiée que dans l’onglet Zone active de l’éditeur de boutons. Chaque bouton ne peut avoir qu’une seule découpe. Si vous dessinez dans la zone active une découpe à l’aide d’un outil de découpe, la découpe précédente est remplacée par la nouvelle découpe dessinée. Vous pouvez dessiner des objets références dans l’onglet Zone active, mais ces objets ne sont modifiables que dans l’éditeur de boutons. Remarque : Les objets Web définissant la zone active d’un symbole de bouton apparaissent dans le document lorsque les découpes et références sont masquées, mais les objets Web d’un bouton ne s’affichent pas dans le panneau Calques et ne peuvent pas être modifiés dans la zone de travail. Pour modifier une découpe ou une référence dans la zone active d’un symbole de bouton : 1 Dans l’éditeur de boutons, ouvrez le symbole de bouton en procédant de l’une des manières suivantes : • Double-cliquez sur l’occurrence du bouton dans l’espace de travail. • Dans le panneau Bibliothèque, double-cliquez sur l’aperçu du bouton ou sur l’icône du symbole, à côté du symbole du bouton. 2 Cliquez sur l’onglet Zone active. 3 Utilisez l’une des méthodes suivantes : • Utilisez l’outil Pointeur pour déplacer ou reformer la découpe ou déplacez le repère de découpe. • Utilisez un outil de découpe ou de référence quelconque pour desiner une nouvelle zone active. Définition de l’URL d’un symbole ou d’une occurrence de bouton Une adresse URL, ou Uniform Resource Locator, est un lien vers une autre page Web, un site Web ou un point d’ancrage sur une même page Web. L’URL peut correspondre à la propriété du symbole ou de l’occurrence d’un bouton. Dans le Vérificateur de propriétés ou le panneau URL, vous pouvez lier une URL à l’occurrence d’un bouton. Vous pouvez lier une URL à un symbole pour que cette URL apparaisse dans le champ Lien du Vérificateur de propriétés de chaque occurrence. Cela est très utile lorsque vous définissez des adresses URL absolues dans un site ; dans le vérificateur de propriétés, il suffit d’indiquer la dernière partie l’URL dans le champ Lien de chaque occurrence pour lier les occurrences du bouton. Remarque : Pour plus d’informations sur les adresses URL absolues et relatives, voir « URL absolues et relatives » à la page 266. Pour définir l’adresse URL d’un symbole de bouton dans l’éditeur de boutons : 1 Dans l’éditeur de boutons, procédez de l’une des manières suivantes pour ouvrir le bouton : • Double-cliquez sur l’occurrence du bouton dans l’espace de travail. • Dans le panneau Bibliothèque, double-cliquez sur l’aperçu du bouton ou sur l’icône du symbole, à côté du symbole du bouton. 2 Cliquez sur l’onglet Zone active de l’éditeur de boutons. 3 Sélectionnez la découpe ou la référence de la zone active. 4 Utilisez l’une des méthodes suivantes : Création de boutons et de menus déroulants 303 • Indiquez l’URL dans le champ Lien du Vérificateur de propriétés. • Choisissez une URL dans le panneau URL. Remarque : La modification l’URL du symbole d’un bouton ne modifie pas l’URL des autres occurrences de ce symbole qui possèdent déjà des URL exclusives. Ce principe s’applique également aux modifications de la cible et du texte de description du symbole d’un bouton. Pour définir l’URL de l’occurrence d’un bouton dans l’espace de travail, procédez de l’une des manières suivantes : • Indiquez l’URL dans le champ Lien du Vérificateur de propriétés. • Choisissez une URL dans le panneau URL. Définition de la cible d’un bouton La cible est la fenêtre ou le cadre dans lequel la page Web de destination s’ouvrira lorsque l’utilisateur cliquera sur l’occurrence d’un bouton. Si aucune cible n’est spécifiée dans le Vérificateur de propriétés, la page Web apparaîtra dans le même cadre ou fenêtre que le lien ayant servi à l’appeler. La cible peut correspondre à la propriété du symbole ou de l’occurrence d’un bouton. Vous pouvez définir la cible d’un symbole de manière à ce que toutes les occurrences du symbole aient la même cible. Pour définir la cible d’un symbole de bouton dans l’éditeur de boutons : 1 Dans l’éditeur de boutons, procédez de l’une des manières suivantes pour ouvrir le bouton : • Double-cliquez sur l’occurrence du bouton dans l’espace de travail. • Dans le panneau Bibliothèque, double-cliquez sur l’aperçu du bouton ou sur l’icône du symbole, à côté du symbole du bouton. 2 Dans le Vérificateur de propriétés, procédez de l’une des manières suivantes : • Dans le menu déroulant Cible, choisissez une cible prédéfinie : Aucun ou _self charge _blank charge la page Web dans le même cadre ou la même fenêtre que le lien. la page Web dans une nouvelle fenêtre, sans nom, du navigateur. _parent charge la page Web dans le jeu de cadres ou dans la fenêtre parente du cadre contenant le lien. _top charge la page Web dans la fenêtre de base du navigateur, remplaçant tous les cadres. • Indiquez la cible dans le champ Cible. Remarque : La modification la cible du symbole d’un bouton ne modifie pas la cible URL des autres occurrences de ce symbole qui possèdent déjà des cibles exclusives. Ce principe s’applique également aux modifications de l’URL et du texte de description du symbole d’un bouton. Pour définir la cible de l’occurrence d’un bouton dans l’espace de travail : 1 Sélectionnez l’occurrence dans l’espace de travail. 2 Dans le Vérificateur de propriétés, procédez de l’une des manières suivantes : 304 Chapitre 13 • Dans le menu déroulant Cible, choisissez une cible prédéfinie : Aucun ou _self charge _blank charge la page Web dans le même cadre ou la même fenêtre que le lien. la page Web dans une nouvelle fenêtre, sans nom, du navigateur. _parent charge la page Web dans le jeu de cadres ou dans la fenêtre parente du cadre contenant le lien. _top charge la page Web dans la fenêtre de base du navigateur, remplaçant tous les cadres. • Indiquez la cible dans le champ Cible. Définition du texte de description d’un symbole ou d’une occurrence de bouton Le texte de description est affiché dans le cadre d’une image pendant le téléchargement de cette dernière à partir du Web ou à la place d’une image ne pouvant pas être chargée. Il remplace également le graphisme lorsque l’utilisateur interdit l’affichage d’images dans le navigateur. Le texte de description peut correspondre à la propriété du symbole ou de l’occurrence d’un bouton. Vous pouvez définir le texte de description du symbole ou de l’occurrence d’un bouton dans le Vérificateur de propriétés. Remarque : Des applications d’aide aux malvoyants lisent le texte de description des graphismes des pages Web dans un navigateur. Dans la mesure du possible, le texte de description doit être concis et explicite. Pour définir le texte de description du symbole d’un bouton dans l’éditeur de boutons : 1 Dans l’éditeur de boutons, procédez de l’une des manières suivantes pour ouvrir le bouton : • Double-cliquez sur l’occurrence du bouton dans l’espace de travail. • Dans le panneau Bibliothèque, double-cliquez sur l’aperçu du bouton ou sur l’icône du symbole, à côté du symbole du bouton. 2 Dans le Vérificateur de propriétés, tapez le texte devant apparaître comme texte de description dans un navigateur. Remarque : La modification du texte de description du symbole d’un bouton ne modifie pas le texte de description des autres occurrences de ce bouton qui possèdent déjà un texte de description. Ce principe s’applique également aux modifications de la cible et de l’URL du symbole d’un bouton. Pour définir le texte de description de l’occurrence d’un bouton dans l’espace de travail : 1 Sélectionnez l’occurrence dans l’espace de travail. 2 Tapez le texte de description dans le champ Texte de description du Vérificateur de propriétés. Création d’une barre de navigation Une barre de navigation est un groupe de boutons qui fournissent des liens entre les différentes zones d’un site Web. En général, elle reste est la même dans l’ensemble des pages du site Web, assurant ainsi une méthode de navigation constante quelque soit l’endroit où l’utilisateur se trouve dans le site. La barre de navigation est donc identique d’une page Web à l’autre mais, dans certains cas, les liens sont spécifiques à chaque page. Pour créer une barre de navigation dans Fireworks, créez un symbole de bouton dans l’éditeur de boutons, puis placez les occurrences de ce symbole dans l’espace de travail. Création de boutons et de menus déroulants 305 Pour créer une barre de navigation de base : 1 Créez un symbole de bouton. Pour plus d’informations, voir « Création d’un symbole de bouton » à la page 295. 2 Tirez une occurrence (copie) du symbole depuis le panneau Bibliothèque dans la zone de travail. 3 Pour créer une copie de l’occcurrence, procédez de l’une des manières suivantes : • Sélectionnez l’occurrence, puis choisissez Edition > Cloner. • Maintenez enfoncée la touche Alt (Windows) ou Option (Macintosh) tout en faisant glisser l’occurrence du bouton. Une copie de l’occurrence est alors créée. 4 Pour positionner le bouton cloné, maintenez enfoncée la touche Maj en appuyant plusieurs fois sur une touche de direction. Pour un contrôle plus précis, utilisez les touches de direction sans maintenir enfoncée la touche Maj. 5 Pour créer d’autres occurrences, répétez les étapes 3 et 4. 6 Sélectionnez chaque occurrence et affectez-leur un texte de description, une URL et des propriétés exclusives dans le Vérificateur de propriétés. Création de menus contextuels Les menus contextuels sont des menus qui apparaissent dans un navigateur en réponse à un événement souris (survol ou clic) sur un objet Web de déclenchement tel qu’une découpe ou une référence. Les éléments d’un menu contextuel peuvent être associés à des liens URL pour la navigation. Par exemple, vous pouvez utiliser des menus contextuels pour organiser plusieurs options de navigation reliées à un bouton d’une barre de navigation. Vous pouvez créer des sousmenus dans les menus contextuels et disposer ainsi d’autant de niveaux que vous le souhaitez. Chaque élément d’un menu contextuel apparaît sous la forme d’un code HTML ou d’une cellule d’image ayant un état Relevé, Au-dessus et un texte de description dans les deux états. Pour prévisualiser un menu contextuel, appuyez sur la touche F12 pour l’afficher dans un navigateur. Il n’est pas possible de prévisualiser un menu contextuel dans l’espace de travail de Fireworks MX. Editeur de menus contextuels L’éditeur de menus contextuels est une boîte de dialogue dotée d’onglets qui vous guide tout au long du processus de création du menu contextuel. Ses nombreuses options de contrôle des caractéristiques de menu contextuel sont réparties sur quatre onglets : L’onglet Contenu contient les options permettant de définir la structure du menu de base, ainsi que le texte, le lien URL et la cible de chaque élément du menu. L’onglet Aspect contient les options permettant de définir l’aspect de l’état Relevé et Au-dessus de chaque cellule du menu, ainsi que l’orientation verticale ou horizontale du menu. L’onglet Avancé contient les options permettant de définir les dimensions, la marge inférieure et l’espacement des cellules, la largeur et la couleur de bordure des cellules, l’intervalle des menus et le retrait du texte. L’onglet Position contient les options permettant de définir la position des sous-menus : 306 Chapitre 13 • L’option Menu place le menu contextuel par rapport à la découpe. Avec les positions prédéfinies, vous pouvez placer le menu contextuel en bas, dans la partie inférieure, la partie supérieure et la partie supérieure droite d’une découpe. • L’option Sous-menu permet de placer le sous-menu contextuel à droite ou dans la partie inférieure droite du menu parent ou en-dessous de ce dernier. En fonction du menu contextuel que vous créez, vous n’aurez peut être pas besoin d’utiliser tous les onglets ou options de l’éditeur de menus contextuels. Vous pouvez à tout moment modifier des options d’un onglet, mais vous devez ajouter au moins une option de menu dans l’onglet Contenu pour créer un menu que vous prévisualiserez dans un navigateur. Création d’un menu contextuel de base C’est dans l’onglet Contenu de l’éditeur de menus contextuels que vous définissez la structure de base et le contenu du menu contextuel. Les options actives ou par défaut des autres onglets de l’éditeur de menus contextuels sont appliquées lors de la création du menu. Pour créer un menu contextuel simple : 1 Sélectionnez la référence ou la découpe qui servira de zone de déclenchement du menu contextuel. 2 Pour ouvrir l’éditeur de menus contextuels, procédez de l’une des manières suivantes : • Choisissez Modifier > Menu contextuel > Ajouter menu contextuel. • Cliquez sur la poignée de comportement, au milieu de la découpe, puis choisissez Ajouter menu contextuel. 3 Cliquez sur l’onglet Contenu. Création de boutons et de menus déroulants 307 4 Cliquez sur le bouton Ajouter un menu pour ajouter une option de menu vide. Vous pouvez à tout moment ajouter ou effacer des cellules. 5 Double-cliquez sur chaque cellule et tapez ou choisissez l’information qui convient : Texte indique le texte de l’option du menu. Lien définit l’URL de l’option du menu. Vous pouvez spécifier un lien personnalisé ou en choisir un dans le menu contextuel Lien, s’il en existe de disponible. Si vous avez affecté des URL aux autres objets Web du document, elles appararaîtront dans le menu contextuel Lien. Cible désigne la cible de l’URL. Vous pouvez spécifier une cible personnalisée ou en choisir une prédéfinie dans le menu contextuel Cible. La saisie du contenu sur la dernière ligne de la fenêtre insère automatiquement une ligne vide en-dessous la dernière ligne. Conseil : Pour passer de la cellule active à une autre cellule et continuer la saisie des informations, appuyez sur la touche Tab. Utilisez les touches de direction Vers le bas ou Vers le haut pour faire défiler la liste verticalement. 6 Répétez les étapes 4 et 5 jusqu’à ce que tous les élements de menu soient définis. 7 Vous pouvez également supprimer un élément de menu. Pour ce faire, sélectionnez l’élément concerné, puis cliquez sur le bouton Menu supprimer. 8 Utilisez l’une des méthodes suivantes : • Cliquez sur Suivant pour accéder à l’onglet Aspect ou choisissez une autre onglet pour continuer la création du menu contextuel. • Créez les entrées du sous-menu du menu contextuel. Pour plus d’informations, voir « Création de sous-menus dans un menu contextuel » à la page 308. • Cliquez sur Terminé pour achever la création du menu contextuel et fermer l’éditeur de menus contextuels. Dans l’espace de travail, la référence ou la découpe sur laquelle vous avez créé le menu contextuel affiche un trait de comportement de couleur bleue relié à un contour du niveau supérieur du menu contextuel. Remarque : Pour prévisualiser un menu contextuel, appuyez sur la touche F12 pour l’afficher dans un navigateur. Il n’est pas possible de prévisualiser un menu contextuel dans l’espace de travail de Fireworks MX. Création de sous-menus dans un menu contextuel A l’aide des boutons Menu Renforcement et Menu Renforcement négatif de l’éditeur de menus contextuels, vous pouvez créer des sous-menus. Ces menus contextuels apparaissent lorsque que le pointeur survole un autre élément de menu contextuel ou que vous cliquez sur cet élément. Vous pouvez créer autant de niveaux de sous-menus que vous le désirez. Pour créer un sous-menu contextuel : 1 Ouvrez l’onglet contenu de l’éditeur de menus contextuels et créez des éléments de menu. Créez les éléments de menu que vous comptez également utiliser pour le sous-menu et placezles directement sous l’élément pour lequel ils représenteront un sous-menu. Pour plus d’informations, voir « Création d’un menu contextuel de base » à la page 307. 2 Cliquez et sélectionnez l’élément de menu contextuel qui sera un élément de sous-menu. 308 Chapitre 13 3 Cliquez sur le bouton Menu Renforcement pour faire de cet élement un élément de sous-menu apparaissant sous l’élément placé directement au-dessus lui dans la liste des éléments de menu. 4 Pour insérer l’élément suivant dans le sous-menu, mettez cet élément en surbrillance et cliquez sur le bouton Menu renforcement. Tous les éléments adjacents et mis en retrait au même niveau representent un seul sous-menu contextuel. 5 Pour insérer un nouvel élément juste en dessous de l’élément mis en surbrillance, vous pouvez également sélectionner un menu ou sous-menu et cliquez sur le bouton Ajouter un menu. 6 Utilisez l’une des méthodes suivantes : • Cliquez sur Suivant pour accéder à l’onglet suivant ou choisissez une autre onglet pour continuer la création du menu contextuel. • Cliquez sur Terminé pour refermer l’éditeur de menus contextuels. Pour créer un sous-menu contextuel au sein d’un sous-menu contextuel : 1 Sélectionnez un élément de sous-menu contextuel dans l’onglet Contenu de l’éditeur de menus contextuels. Pour plus d’informations, se reporter à la procédure précédente. 2 Cliquez sur le bouton Menu Renforcement pour remettre en retrait le sous-menu, afin qu’il soit positionné en retrait par rapport au sous-menu situé directement au-dessus. Continuez la mise en retrait pour créer d’autres sous-menus au sien des sous-menus, avec autant de niveaux que vous le désirez. Pour placer un élément de menu dans un sous-menu de niveau supérieur ou dans le menu contextuel principal : 1 Sélectionnez l’élément dans l’onglet Contenu de l’éditeur de menus contextuels. 2 Cliquez sur le bouton Menu Renforcement. Pour plus d’informations sur le positionnement des sous-menus, voir « Positionnement des menus contextuels et des sous-menus » à la page 314. 3 Pour terminer la création des menus contextuels ou pour continuer à en créer d’autres, procédez de l’une des manières suivantes : • Cliquez sur Suivant pour accéder à l’onglet Aspect ou choisissez une autre onglet pour continuer la création du menu contextuel. • Cliquez sur Terminé pour fermer l’éditeur de menus contextuels. Dans l’espace de travail, la référence ou la découpe sur laquelle vous avez créé le menu contextuel affiche un trait de comportement de couleur bleue relié à un contour du niveau supérieur du menu contextuel. Remarque : Pour prévisualiser un menu contextuel, appuyez sur la touche F12 pour l’afficher dans un navigateur. Il n’est pas possible de prévisualiser un menu contextuel dans l’espace de travail de Fireworks MX. Création de boutons et de menus déroulants 309 Réglage de l’apparence d’un menu contextuel Après avoir créé un menu de base et des sous-menus optionnels, vous pouvez mettre en forme le texte, appliquer des attributs graphiques aux états Au-dessus et Relevé ou choisir l’option d’orientation verticale ou horizontale à partir de l’onglet Aspect de l’éditeur de menus contextuels. Pour définir l’orientation d’un sous-menu contextuel : 1 Dans l’éditeur de menus contextuels, ouvrez le menu contextuel désiré et cliquez sur l’onglet Aspect. Pour plus d’informations sur l’ouverture d’un menu contextuel existant dans l’éditeur de menus contextuels, voir « Modification d’un menu contextuel » à la page 315. 2 Dans le menu Orientation, choisissez l’option Verticale ou Horizontale. Pour indiquer si un menu contextuel est un menu à base de code HTML ou de graphismes : 1 Dans l’éditeur de menus contextuels, ouvrez le menu contextuel désiré et cliquez sur l’onglet Aspect. Pour plus d’informations sur l’ouverture d’un menu contextuel existant dans l’éditeur de menus contextuels, voir « Modification d’un menu contextuel » à la page 315. 2 Choisissez une option Cellules : HTML définit l’apparence du menu en utilisant un code HTML uniquement. Cette option crée de pages correspondant à des fichiers de petite taille. Image propose une sélection de styles de graphisme pour l’arrière-plan des cellules. Cette option crée des pages correspondant à des fichiers de taille importante. Remarque : Vous pouvez enrichir cette sélection de styles en créant des styles de menu contextuel personnalisés. Pour plus d’informations, voir « Ajout des styles de menu contextuel » à la page 311. 310 Chapitre 13 Pour mettre en forme le texte dans le menu contextuel actif : 1 Dans l’éditeur de menus contextuels, ouvrez le menu contextuel désiré et cliquez sur l’onglet Aspect. Pour plus d’informations sur l’ouverture d’un menu contextuel existant dans l’éditeur de menus contextuels, voir « Modification d’un menu contextuel » à la page 315. 2 Dans le menu contextuel Taille, choisissez une taille prédéfinie ou indiquez une valeur dans le champ Taille. Remarque : Lorsque la largeur et la hauteur des cellules est réglée sur Automatique, dans l’onglet Avancé de l’éditeur de menus contextuels, la taille du texte détermine celle des graphismes associés à l’élément de menu. 3 Dans le menu contextuel Police, choisissez un groupe de polices système ou indiquez le nom d’une police personnalisée. Remarque : Soyez prudent lorsque vous choisissez une police. Si les utilisateurs qui visualiseront votre page Web n’ont pas installé sur leur ordinateur la police que vous avez choisie, une police de substitution sera utilisée dans leur navigateur Web. 4 Pour appliquer le style gras ou italique, vous pouvez également cliquer sur un bouton de style de texte. 5 Cliquez sur un bouton de justification pour aligner le texte à gauche ou à droite ou pour le centrer. 6 Choisissez une couleur dans la source de couleurs. Pour définir l’apparence des cellules de menu : 1 Dans l’éditeur de menus contextuels, ouvrez le menu contextuel désiré et cliquez sur l’onglet Aspect. Pour plus d’informations sur l’ouverture d’un menu contextuel existant dans l’éditeur de menus contextuels, voir « Modification d’un menu contextuel » à la page 315. 2 Choisissez les couleurs du texte et des cellules pour chaque état. 3 Si vous avez choisi Image comme type de cellule, choisissez un style graphique pour chaque état. 4 Utilisez l’une des méthodes suivantes : • Cliquez sur Suivant pour accéder à l’onglet Avancé ou choisissez un autre onglet pour continuer la création du menu contextuel. • Cliquez sur Terminé pour fermer l’éditeur de menus contextuels. Dans l’espace de travail, la référence ou la découpe sur laquelle vous avez créé le menu contextuel affiche un trait de comportement de couleur bleue relié à un contour du niveau supérieur du menu contextuel. Remarque : Pour prévisualiser un menu contextuel, appuyez sur la touche F12 pour l’afficher dans un navigateur. Il n’est pas possible de prévisualiser un menu contextuel dans l’espace de travail de Fireworks MX. Ajout des styles de menu contextuel Vous pouvez ajouter des styles de cellule personnalisés dans l’éditeur de menus contextuels. Des styles de cellule personnalisés et prédéfinis sont proposés dans l’onglet Aspect lorsque vous choisissez l’option Image comme type de cellule pour utiliser un arrière-plan graphique dans les cellules des menus contextuels. Création de boutons et de menus déroulants 311 Pour ajouter un style de cellule personnalisé à la sélection de styles de cellule de l’onglet Aspect de l’éditeur de menus contextuels : 1 Appliquez une combinaison de trait, trame, texture et effets en direct à un objet, et enregistrez cette combinaison sous forme de style dans le panneau Styles. Pour plus d’informations, voir « Création et suppression de styles » à la page 256. 2 Dans le panneau Styles, sélectionnez le nouveau style, puis choisissez Exporter des styles dans le menu Options du panneau Styles. 3 Localisez le dossier Nav Menu sur votre disque dur, renommez le fichier de styles, si vous le désirez, puis cliquez sur Enregistrer. Remarque : L’emplacement exact du dossier Nav Menu varie en fonction du système d’exploitation. Pour plus d’informations, voir « Utilisation des fichiers de configuration » à la page 439. Lorsque vous revenez à l’onglet Aspect de l’éditeur de menus contextuels et choisissez l’option Image d’arrière-plan des cellules, le nouveau style s’affiche avec les styles prédéfinis associés aux états Relevé et Au-dessus des cellules du menu contextuel. Définition des propriétés avancées de menu contextuel Dans l’éditeur de menus contextuels, l’onglet Avancé propose des options supplémentaires permettant de définir la taille, les marges intérieures et l’espacement des cellules ; le retrait du texte, le delai de disparition du menu ; la largeur, la couleur, l’ombre et la surbrillance des bordures. Pour définir des propriétés de cellule avancées pour le menu contextuel actif : 1 Dans l’éditeur de menus contextuels, ouvrez le menu contextuel désiré et cliquez sur l’onglet Avancé. Pour plus d’informations sur l’ouverture d’un menu contextuel existant dans l’éditeur de menus contextuels, voir « Modification d’un menu contextuel » à la page 315. 312 Chapitre 13 2 Dans le menu déroulant Automatique/Fixe, choisissez une largeur ou une hauteur maximale : Automatique règle la hauteur de cellule sur la taille du texte définie dans l’onglet Aspect de l’éditeur de menus contextuels et la largeur de cellule sur celle de l’élément de menu contenant le texte le plus long. Pixels permet d’indiquer des valeurs spécifiques, en pixels, dans les champs Largeur de cellule et Hauteur de cellule. 3 Indiquez une valeur dans le champ Marge intérieure des cellules pour définir la distance entre le texte du menu contextuel et la bordure de la cellule. 4 Indiquez une valeur dans le champ Espacement des cellules pour définir l’espacement entre les cellules du menu. 5 Indiquez une valeur dans le champ Retrait du texte pour définir la valeur du retrait du texte du menu contextuel. 6 Indiquez une valeur dans le champ Menu intervalle pour définir, en secondes, la durée pendant laquelle le menu reste affiché après son survol par le pointeur. 7 Propriétés prédéfinies pour bordures de menu contextuel : Afficher les bordures permet d’afficher ou de masquer les bordures du menu contextuel. Si cette option n’est pas sélectionnée, les options ci-dessous sont désactivées. Largeur de bordure définit la largeur de la bordure du menu contextuel. Couleur de bordure, Ombre et Surbrillance permettent de modifier la couleur des bordures du menu contextuel. Remarque : Plusieurs de ces options sont désactivées lorsque l’option Image est le type de cellule sélectionnée dans l’onglet Aspect. 8 Pour achever la création des menus contextuels ou pour continuer à en créer d’autres, procédez de l’une des manières suivantes : • Cliquez sur Suivant pour accéder à l’onglet Position ou choisissez une autre onglet pour continuer la création du menu contextuel. • Cliquez sur Terminé pour fermer l’éditeur de menus contextuels. Dans l’espace de travail, la référence ou la découpe sur laquelle vous avez créé le menu contextuel affiche un trait de comportement de couleur bleue relié à un contour du niveau supérieur du menu contextuel. Remarque : Pour prévisualiser un menu contextuel, appuyez sur la touche F12 pour l’afficher dans un navigateur. Il n’est pas possible de prévisualiser un menu contextuel dans l’espace de travail de Fireworks MX. Création de boutons et de menus déroulants 313 Positionnement des menus contextuels et des sous-menus L’onglet Position de l’éditeur de menus contextuels permet de définir la position d’un menu contextuel. Vous pouvez également positionner un menu contextuel de niveau supérieur en déplaçant son contour dans l’espace de travail lorsque le Calque Web est visible. Pour définir la position d’un menu contextuel dans l’éditeur de menus contextuels : 1 Dans l’éditeur de menus contextuels, ouvrez le menu contextuel désiré et cliquez sur l’onglet Position. Pour plus d’informations sur l’ouverture d’un menu contextuel existant dans l’éditeur de menus contextuels, voir « Modification d’un menu contextuel » à la page 315. 2 Pour définir la position du menu, procédez de l’une des manières suivantes : • Cliquez sur le bouton Position pour positionner le menu contextuel par rapport à sa découpe de déclenchement. • Indiquez les coordonnées X et Y. Les valeurs 0,0 alignent l’angle supérieur gauche du menu contextuel sur l’angle supérieur gauche de la découpe de déclenchement. 3 Utilisez l’une des méthodes suivantes : • Si vous avez des sous-menus, positionnez-les comme indiqué dans la procédure qui suit. • Cliquez sur En arrière pour modifier les propriétés dans les autres onglets. • Cliquez sur Terminé pour fermer l’éditeur de menus contextuels. 314 Chapitre 13 Pour définir la position d’un sous-menu contextuel dans l’éditeur de menus contextuel : 1 Dans l’éditeur de menus contextuels, ouvrez le menu contextuel désiré et cliquez sur l’onglet Position. Pour plus d’informations sur l’ouverture d’un menu contextuel existant dans l’éditeur de menus contextuels, voir « Modification d’un menu contextuel » à la page 315. 2 Pour définir la position du sous-menu, procédez de l’une des manières suivantes : • Cliquez sur le bouton Position pour positionner le sous-menu contextuel par rapport à son élément déclencheur. • Indiquez les coordonnées X et Y. Les valeurs 0,0 alignent l’angle supérieur gauche du sousmenu contextuel sur l’angle supérieur droit du menu ou de l’élément de menu déclencheur. 3 Utilisez l’une des méthodes suivantes : • Pour définir la position de chaque sous-menu par rapport à l’élément de menu parent qui le déclenche, choisissez l’option Placer à la même position. • Pour définir la position de chaque sous-menu par rapport à l’ensemble du sous-menu contextuel, désactivez l’option Placer à la même position. 4 Cliquez sur Terminé pour quitter l’éditeur de menus contextuel ou sur En arrière pour modifier les propriétés des autres onglets. Pour définir la position d’un menu contextuel en le déplaçant : 1 Procédez de l’une des manières suivantes pour afficher le Calque Web : • Dans le panneau Outils, cliquez sur le bouton Affiche les découpes et les références. • Cliquez sur la colonne Oeil, dans le panneau Calques. 2 Sélectionnez l’objet Web de déclenchement du menu contextuel. 3 Dans l’espace de travail, tirez le contour du menu contextuel vers un autre emplacement. Modification d’un menu contextuel L’éditeur de menus contextuels permet de modifier ou de mettre à jour le contenu d’un menu contextuel, de réorganiser les éléments de menu ou de modifier des propriétés dans n’importe lequel des quatre onglets. Pour modifier le contenu d’un menu dans l’éditeur de menus contextuels : 1 Procédez de l’une des manières suivantes pour afficher le Calque Web : • Dans le panneau Outils, cliquez sur le bouton Affiche les découpes et les références. • Cliquez sur la colonne Oeil, dans le panneau Calques. 2 Sélectionnez la découpe à laquelle le menu est affecté. 3 Double-cliquez sur le contour bleu du menu contextuel, dans l’espace de travail. L’éditeur de menus contextuel s’ouvre, affichant les entrées du menu contextuel. 4 Effectuez les modifications voulues dans n’importe lequel des quatre onglets et cliquez sur Terminé. Création de boutons et de menus déroulants 315 Pour modifier une entrée de menu contextuel : 1 Dans l’éditeur de menus contextuels, ouvrez le menu contextuel désiré et cliquez sur l’onglet Contenu. 2 Double-cliquez dans les champs Texte, Lien ou Cible pour modifier le texte du menu. 3 Cliquez à l’extérieur de la liste des entrées pour appliquer les modifications. 4 Cliquez sur Terminé. Pour déplacer une entrée dans le menu contextuel : 1 Dans l’éditeur de menus contextuels, ouvrez le menu contextuel désiré et cliquez sur l’onglet Contenu. 2 Déplacez l’élément de menu vers l’emplacement désiré dans la liste. 3 Cliquez sur Terminé. Exportation des menus contextuels Fireworks génère tout le code JavaScript nécessaire à l’affichage de menus contextuels dans un navigateur Web. Lorsqu’un document Fireworks contenant des menus contextuels est exporté en fichier HTML, un fichier JavaScript appelé mm_menu.js est exporté vers le même emplacement que le fichier HTML. Lorsque vous transférez vos fichiers sur le serveur, ce fichier menu.js doit être transféré dans le même dossier que la page Web qui contient le menu contextuel. Si vous désirez stocker ce fichier dans un autre emplacement, tous les liens hypertextes faisant référence à mm_menu.js dans le code HTML de Fireworks doivent être mis à jour pour refléter ce nouvel emplacement. Si votre document contient plusieurs menus contextuels ou si plusieurs documents contiennent des menus contextuels, Fireworks ne crée pas pour autant de fichiers mm_menu.js supplémentaires : un seul fichier est utilisé pour tous les menus des documents. Lorsque vous insérez des sous-menus, Fireworks génère un fichier image appelé arrow.gif. Il s’agit de l’image de la petite flèche qui apparaît à côté d’un élément de menu et qui indique à l’utilisateur qu’il existe un sous-menu. Quel que soit le nombre de sous-menus que contient votre document, Fireworks utilise toujours le même fichier arrow.gif. Pour plus d’informations sur l’exportation de fichier HTML et JavaScript, voir « Exportation du fichier au format HTML » à la page 362. 316 Chapitre 13 CHAPITRE 14 Création d’animations L’animation de graphismes ajoute une dimension attrayante et sophistiquée aux sites Web. Fireworks MX permet de créer des graphismes animés pour faire se déplacer vos bannières, logos, bandes dessinées, etc. Par exemple, la mascotte qui symbolise votre société peut danser sur une page pendant que le logo apparaît et disparaît. Dans Fireworks, les animations sont réalisées en créant des symboles et en modifiant leurs propriétés sur une échelle temporelle, afin de créer l’illusion du mouvement. Vous pouvez considérer les symboles comme des acteurs dont vous mettez les mouvements en scène. L’action de chaque symbole est enregistrée dans une image. Lorsque toutes ces images sont reproduites à la suite, en séquence, vous obtenez l’illusion du mouvement. Vous pouvez appliquer divers paramètres aux symboles afin de faire changer peu à peu le contenu des images successives. Un symbole peut sembler se déplacer dans l’image, apparaître ou disparaître progressivement, grossir ou rétrécir, ou encore pivoter. Comme un même fichier contient plusieurs symboles, vous pouvez créer une animation complexe dans laquelle différents types d’actions se produisent simultanément. Le panneau Optimiser permet de définir les paramètres d’optimisation et d’exportation lors de la création du fichier. Fireworks peut exporter des animations dans les formats GIF animé ou Flash SWF. Vous pouvez également importer des animations Fireworks directement dans Macromedia Flash pour l’améliorer. Création d’une animation Dans Fireworks, les animations sont créées en affectant des propriétés à des objets appelés symboles d’animation. L’animation d’un symbole est répartie dans une suite d’images, qui contient les images et objets constituant chaque phase de l’animation. Une animation peut comporter plusieurs symboles, et chacun d’eux peut avoir une action différente. Les divers symboles peuvent être animés sur un nombre d’images différent. L’animation se termine lorsque toutes les actions de tous les symboles sont terminées. Pour créer une animation à partir des symboles d’animation de Fireworks : 1 Créez un symbole d’animation, soit en créant un nouveau symbole, soit en convertissant un objet existant en symbole. Pour plus d’informations, voir « Création de symboles d’animations » à la page 318. 317 2 Dans le Vérificateur de propriétés ou dans la boîte de dialogue Animer, indiquez les paramètres d’animation du symbole. Vous pouvez définir l’angle et la direction du mouvement, l’échelle, l’opacité (pour les apparitions et disparitions progressives), ainsi que l’angle et la direction de la rotation. Pour plus d’informations, voir « Modification d’un symbole d’animation » à la page 319. Remarque : L’angle et la direction du mouvement sont définis uniquement dans la boîte de dialogue Animer. 3 Les contrôles Cadence des images du panneau Images permettent de définir la vitesse des mouvements. Pour plus d’informations, voir « Réglage de la cadence d’images » à la page 322. 4 Optimisez le document au format GIF animé. Pour plus d’informations, voir « Optimisation d’une animation » à la page 330. 5 Exportez le document sous forme de fichier GIF animé ou SWF, ou enregistrez-le sous forme de fichier PNG Fireworks et importez-le dans Macromedia Flash pour l’améliorer. Pour plus d’informations, voir « Formats d’exportation des animations » à la page 330. Utilisation des symboles d’animation Les symboles d’animation exécutent des actions dans votre fichier Fireworks, comme des acteurs de film. Par exemple, dans une animation représentant trois oies sauvages traversant le ciel, chaque oie est un personnage. Un symbole d’animation peut être composé de n’importe quel objet que vous créez ou importez, et il peut y avoir un grand nombre de symboles dans un même fichier. Chaque symbole possède ses propres propriétés et est animé indépendamment. Vous pouvez donc créer des symboles qui traversent l’écran, pendant que d’autres apparaissent progressivement ou changent de taille. Il n’est pas nécessaire d’utiliser des symboles pour chaque aspect de votre animation. Cependant, outre les avantages présentés dans ce chapitre, l’utilisation des symboles et occurrences des graphismes qui apparaissent dans plusieurs images permet de réduire la taille de vos fichiers d’animation. Vous pouvez modifier les propriétés des symboles d’animation à tout moment, à l’aide de la boîte de dialogue Animer ou du Vérificateur de propriétés. Vous pouvez aussi modifier les graphismes que contiennent les symboles dans l’éditeur de symboles. Celui-ci permet de modifier un symbole sans affecter le reste du document. Vous pouvez également modifier le déplacement d’un symbole en changeant son trajet. Comme les symboles d’animation sont automatiquement placés dans la bibliothèque, vous pouvez les réutiliser pour créer de nouvelles animations. Création de symboles d’animations Après avoir créé un symbole d’animation, vous pouvez définir les propriétés qui déterminent le nombre d’images de l’animation et le type d’action (changement d’échelle ou rotation, par exemple). Par défaut, le nouveau symbole d’animation comporte cinq images, dont chacune est affichée pendant 0,07 centièmes de seconde. Pour créer un symbole d’animation : 1 Choisissez Edition > Insertion > Nouveau symbole. 2 Dans la boîte de dialogue Propriétés du symbole, indiquez le nom du nouveau symbole. 3 Choisissez l’option Animation, puis cliquez sur OK. 318 Chapitre 14 4 Dans l’éditeur, créez un nouvel objet à l’aide des outils dessin ou texte. Vous pouvez tracer des objets vectoriels ou bitmap. 5 Fermez la fenêtre de l’éditeur de symboles. Fireworks classe le symbole dans la bibliothèque, et en place une copie au centre du document. Vous pouvez ajouter de nouvelles images au symbole à l’aide du curseur Images du Vérificateur de propriétés. Choisissez Fenêtre > Propriétés pour ouvrir le Vérificateur de propriétés, si nécessaire. Pour convertir un objet en symbole d’animation : 1 Sélectionnez l’objet. 2 Choose Modification > Animation > Animer la sélection. 3 Indiquez les paramètres désirés dans la boîte de dialogue. Pour plus d’informations sur les paramètres, voir « Modification d’un symbole d’animation » à la page 319. Les contrôles d’animation apparaissent sur le cadre qui délimite l’objet, et une copie de ce dernier est ajoutée à la bibliothèque. Modification d’un symbole d’animation Vous pouvez manipuler les propriétés des symboles d’animation pour rendre votre site Web attractif. Vous pouvez modifier un grand nombre de caractéristiques, de la vitesse d’animation à l’opacité en passant par la rotation. En manipulant ces caractéristiques, un symbole peut tourner sur lui-même, accélérer, apparaître et disparaître progressivement, et ces effets peuvent être combinés. La principale propriété pour tout symbole d’animation est son nombre d’images. Cette propriété définit le nombre d’étapes qu’il faut au symbole pour effectuer son animation. Lorsque vous définissez le nombre d’images d’un symbole, Fireworks ajoute automatiquement au document le nombre d’images nécessaire pour accomplir cette action. Si le symbole nécessite plus d’images qu’il n’en existe dans l’animation, Fireworks vous demande si vous souhaitez ajouter des images. Modifications des propriétés des symboles d’animation Vous pouvez modifier les propriétés des symboles d’animation, à l’aide de la boîte de dialogue Animer ou du Vérificateur de propriétés. Propriétés des symboles d’animation dans le Vérificateur de propriétés Vous pouvez modifier les propriétés suivantes d’un symbole d’animation : Images est le nombre d’images à inclure dans l’animation. Bien que le curseur n’autorise qu’un maximum de 250 images, vous pouvez spécifier n’importe quelle valeur dans le champ Images. La valeur par défaut est 5. Création d’animations 319 Mouvement est la distance, en pixels, que doit parcourir chaque objet. Cette option est accessible uniquement dans la boîte de dialogue Animer. La plage de valeurs va de 0 à 250 pixels, 72 étant la valeur par défaut. Les mouvements sont linéaires et il n’existe pas d’images principales (ce qui n’est pas le cas dans Macromedia Flash et Director). Direction est la direction, en degrés, de déplacement de l’objet. Les valeurs possibles vont de 0 à 360 degrés. Cette option est accessible uniquement dans la boîte de dialogue Animer. Vous pouvez également modifier les valeurs de Mouvement et Direction en tirant les poignées d’animation de l’objet (voir « Modification des trajets de déplacement des symboles » à la page 321). Echelle est la modification de taille, en pourcentage, entre le début et la fin de l’animation. La plage de valeurs va de 0 à 250 pixels, 100% étant la valeur par défaut. Pour mettre à l’échelle un objet de 0 à 100%, l’objet d’origine doit être très petit ; des objets vectoriels sont recommandés. Opacité est le degré de fondu (apparition ou disparition) entre le début et la fin de l’animation. La plage de valeurs va de 0 à 100 pixels, 100% étant la valeur par défaut. La création d’effets d’ouverture en fondu et de fondu enchaîné nécessite deux occurrences du même symbole — un pour la lecture des effets d’ouverture en fondu et l’autre pour la lecture des effets de fondu enchaîné. Rotation est la valeur de rotation, en degrés, du symbole entre le début et la fin. Les valeurs possibles vont de 0 à 360 degrés. Vous pouvez taper des valeurs supérieures pour obtenir plusieurs rotations. La valeur par défaut est 0 degré. Horaire et Anti-horaire indiquent la direction de rotation de l’objet. Horaire signifie une rotation dans le sens des aiguilles d’une montre, et Anti-horaire dans le sens inverse. Pour modifier les propriétés d’un symbole d’animation : 1 Sélectionnez un symbole d’animation. 2 Choisissez Modification > Animation > Paramètres pour afficher la boîte de dialogue Animer ou Fenêtre > Propriétés pour afficher le Vérificateur de propriétés, s’il n’est pas encore ouvert. 3 Modifiez les propriétés désirées. 320 Chapitre 14 Suppression des animations Pour supprimer des animations, supprimez le symbole d’animation de la bibliothèque ou supprimez l’animation du symbole. Pour supprimer un symbole de la bibliothèque : 1 Dans le panneau Bibliothèque, sélectionnez le symbole d’animation à supprimer. 2 Tirez le symbole sur l’icône de poubelle, dans le coin inférieur droit. Pour supprimer l’animation du symbole d’animation sélectionné : Choisissez Modification > Animer > Supprimer l’animation. Le symbole devient un symbole graphique et n’est plus animé. Si, par la suite, vous convertissez à nouveau le symbole en symbole d’animation, les paramètres d’animation précédents seront restaurés. Modification des graphismes des symboles Vous pouvez modifier le graphisme de votre symbole et ses propriétés. Pour modifier le graphisme de votre symbole, utilisez l’éditeur de symboles. Il vous permet de modifier vos graphismes à l’aide des outils texte, de dessin et de couleur. Lorsque vous travaillez dans l’éditeur de symboles, seul le symbole sélectionné est affecté. Comme ce symbole est un des éléments de la bibliothèque, si vous modifiez l’aspect de l’une de ses occurrences vous modifiez toutes les autres. Pour modifier les attributs du graphisme du symbole sélectionné : 1 Utilisez l’une des méthodes suivantes pour ouvrir l’éditeur de symboles : • Double-cliquez sur l’objet symbole. • Choisissez Modification > Symbole > Modifier le symbole. • Cliquez sur le bouton Modification dans la boîte de dialogue Animer. 2 Modifiez le symbole d’animation et changez le texte, les traits, les trames ou les effets selon vos besoins. 3 Fermez l’éditeur de symboles. Modification des trajets de déplacement des symboles Lorsque vous sélectionnez un symbole d’animation, il est entouré d’une bordure spécifique et accompagné d’une trajectoire de déplacement qui indique la direction de son mouvement. Sur cette trajectoire, le point vert est le point de départ et le point rouge indique le point d’arrivée. Les points bleus intermédiaires représentent les images. Par exemple, la trajectoire d’un symbole qui s’étend sur cinq images comporte un point vert, trois points bleus et un point rouge. La position de l’objet sur la trajectoire indique l’image courante. Ainsi, si l’objet apparaît sur le troisième point, l’image 3 est l’image courante. Création d’animations 321 Vous pouvez modifier la direction du déplacement en changeant l’angle de la trajectoire. Pour modifier le mouvement ou la direction : Tirez l’une des poignées de début ou de fin d’animation du symbole vers un nouvel emplacement. Le point vert indique le point de départ, le point rouge indique le point d’arrivée. Pour contraindre la direction du déplacement par incréments de 45 degrés, maintenez la touche MAJ enfoncée pendant que vous tirez le symbole. Utilisation des images Pour créer une animation, il faut disposer d’un certain nombre d’images. Le contenu de chaque image apparaît dans le panneau Images. C’est dans le panneau Images que vous créez et organisez les images. Vous pouvez nommer les images, les réorganiser, définir manuellement la cadence de l’animation, et déplacer des objets d’une image dans une autre. Colonne de la séquence Nom de l’image Colonne de cadence des images Options de la séquence d’images Supprimer l’image Nouvelle image / Dupliquer Répartir dans les images Un certain nombre de propriétés sont également associées à chaque image. En définissant la cadence des images ou en cachant une image, vous pouvez obtenir l’animation désirée durant la création et la modification. Réglage de la cadence d’images La cadence des images détermine la durée d’affichage de chaque image. Elle est indiquée en centièmes de seconde. Par exemple, la valeur 50 affiche l’image pendant une 50/100 (une demi seconde), et la valeur 300 affiche l’image pendant 3 secondes. Pour définir la cadence d’images : 1 Sélectionnez une ou plusieurs images : 322 Chapitre 14 • Pour sélectionner une plage d’images contiguës, maintenez la touche MAJ enfoncée tout en cliquant sur les noms de la première et la dernière image. • Pour sélectionner une plage d’images non contiguës, maintenez la touche Control (Windows) ou Commande (Macintosh) enfoncée tout en cliquant sur le nom de chaque image désirée. 2 Utilisez l’une des méthodes suivantes : • Choisissez Propriétés dans le menu des options du panneau Images. • Double-cliquez sur la colonne de cadence d’image. La fenêtre contextuelle des propriétés des images s’affiche. 3 Indiquez la valeur de cadence d’image désirée. 4 Appuyez sur Entrée ou cliquez en dehors du panneau pour fermer cette fenêtre. Affichage et masquage d’images pour la lecture Vous pouvez afficher ou masquer certaines images pour la lecture. Si une image est masquée, elle ne sera pas affichée pendant la lecture et ne sera pas exportée. Pour afficher ou masquer une image : 1 Utilisez l’une des méthodes suivantes : • Choisissez Propriétés dans le menu des options du panneau Images. • Double-cliquez sur la colonne de cadence d’image. La fenêtre contextuelle des propriétés des images s’affiche. 2 Désactivez la case à cocher Inclure lors de l’exportation. Un X rouge s’affiche à la place de la durée de cadence de cette image. 3 Appuyez sur Entrée ou cliquez en dehors de la fenêtre des propriétés des images pour fermer cette fenêtre. Noms des images d’une animation Lorsque vous préparez une animation, Fireworks crée le nombre d’images nécessaire et les affiche dans le panneau Images. Par défaut, ces images sont nommées Image 1, Image 2, etc. Lorsque vous déplacez une image dans la séquence, Fireworks renomme les images concernées en fonction du nouvel ordre d’apparition. Création d’animations 323 Il peut être utile de nommer vos images pour les reconnaître aisément. De la sorte, vous saurez toujours quelle image contient une partie précise de l’animation. Si vous déplacez une image après l’avoir renommée, son nom ne sera pas modifié. Pour renommer une image : 1 Dans le panneau Images, double-cliquez sur le nom de l’image. 2 Dans la zone de texte qui apparaît, tapez le nouveau nom et appuyez sur la touche Entrée. Ajout, déplacement, copie et suppression d’images Le panneau Images permet d’ajouter, copier et supprimer des images, ainsi que d’en modifier l’ordre. Pour ajouter une nouvelle image : Cliquez sur le bouton Nouvelle image / Dupliquer dans la partie inférieure du panneau Images. Pour ajouter des images à un emplacement spécifique de la séquence : 1 Choisissez Ajouter des images dans le menu déroulant des options du panneau Images. 2 Indiquez le nombre de nouvelles images à ajouter. 3 Choisissez si elles doivent être insérées : avant l’image courante, après cette image, au début ou à la fin de la séquence, puis cliquez sur OK. Pour réaliser une copie d’une image : Tirez une image existante sur le bouton Nouvelle image / Dupliquer dans la partie inférieure du panneau Images. Pour copier l’image sélectionnée et la placer dans une séquence : 1 Choisissez Dupliquer l’image dans le menu déroulant des options du panneau Images. 2 Indiquez le nombre de copies à créer à partir de l’image sélectionnée, choisissez leur point d’insertion, puis cliquez sur OK. Il est utile de dupliquer une image si vous désirez que des objets apparaissent dans une autre partie de l’animation. Pour réorganiser les images : Déplacez-les une par une à l’emplacement désiré dans la liste. 324 Chapitre 14 Pour supprimer l’image sélectionnée, exécutez l’une des actions suivantes : • Cliquez sur le bouton Supprimer l’image dans le panneau Images. • Tirez le nom de l’image sur le bouton Supprimer l’image. • Choisissez Supprimer l’image dans le menu déroulant des options du panneau Images. Déplacement des objets sélectionnés dans le panneau Images Vous pouvez utiliser le panneau Images pour déplacer des objets dans une autre image. Les objets qui n’apparaissent que dans une seule image semblent disparaître en cours d’animation. Vous pouvez déplacer des objets pour les faire apparaître ou disparaître en différents points de l’animation. Pour déplacer l’objet sélectionné dans une autre image : Dans le panneau Images, tirez l’indicateur de sélection (le carré bleu) qui apparaît à droite de la durée de cadence de l’image vers son image de destination. Partage de calques entre plusieurs images Les calques permettent de diviser un document Fireworks en plusieurs plans verticaux discrets, comme des couches superposées de papier calque. Dans le cadre d’une animation, vous pouvez utiliser les calques pour organiser les objets selon qu’ils font partie de l’action principale ou de l’arrière-plan de l’animation. Vous pouvez alors intervenir aisément sur des objets d’un calque sans qu’ils interfèrent avec le reste de l’animation. Pour plus d’informations, voir « Utilisation des calques » à la page 227. Si vous désirez que des objets apparaissent tout au long de l’animation, vous pouvez les placer sur un calque, puis partager celui-ci entre différentes images à l’aide du panneau Calques. Lorsqu’un calque est partagé entre plusieurs images, tous les objets de calque sont visibles dans chaque image. Vous pouvez modifier les objets des calques partagés dans n’importe quelle image ; ces modifications se reflètent dans toutes les autres images. Création d’animations 325 Dans cet exemple, le calque carré de couleur rouge est partagé entre plusieurs images. Pour partager un calque entre plusieurs images : 1 Double-cliquez sur le calque. 2 Activez la case à cocher Utiliser pour toutes les images. Remarque : Tout le contenu d’un calque partagé apparaît sur chacune des images de ce partage. Pour désactiver le partage d’un calque entre plusieurs images : 1 Double-cliquez sur le calque partagé. 2 Désactivez la case à cocher Utiliser pour toutes les images. 3 Choisissez l’une des options de ci-dessous pour copier des objets dans les images : • Conservez le contenu du calque partagé uniquement dans l’image courante. • Copiez le contenu du calque partagé dans toutes les images. Visualisation des objets dans une image spécifique Vous pouvez aisément visualiser des objets dans un image spécifique à l’aide du menu déroulant Image du panneau Claques. Pour visualiser des objets dans une image spécifique : Choisissez une image dans le menu déroulant Images, dans la partie inférieure du panneau Calques. Tous les objets présents dans cette image apparaissent dans le panneau Claques et sont affichés dans le document. 326 Chapitre 14 Utilisation de la séquences de calques L’affichage de la séquence de calques permet de voir le contenu des images qui précèdent et suivent l’image actuellement sélectionnée. Cela vous permet d’affiner la transition entre les objets sans devoir passer incessamment d’un objet à une autre. Le terme anglais équivalent, onion skinning (pelure d’oignon), vient d’une technique d’animation traditionnelle qui consiste à utiliser des couches de papier calque fin pour visualiser les séquences animées. Lorsque l’affichage de la séquence de calques est activée, le niveau lumineux des objets situés dans les images qui précèdent et suivent l’image actuellement sélectionnée est atténué, ce qui vous permet de les distinguer des objets de l’image courante. Par défaut, la modification de plusieurs images est activée, ce qui implique que vous pouvez sélectionner et modifier des objets estompés dans d’autres images sans quitter l’image active. Utilisez l’outil Sélectionner derrière pour sélectionner de manière séquentielle des objets dans des images. Pour ajuster le nombre d’images visibles avant et après l’image courante : 1 Dans le panneau Images, cliquez sur le bouton Séquence de calques. 2 Choisissez une option d’affichage : • Pas de séquence de calques désactive l’affichage de la séquence de calques et n’affiche que le contenu de l’image courante. • • • • Afficher image suivante affiche le contenu de l’image courante et celui de l’image suivante. Avant et après affiche le contenu de l’image courante et celui des images adjacentes. Afficher toutes les images affiche le contenu de toutes les images. Personnalisé permet de définir le nombre d’images à afficher avant et après l’image courante, et de définir leur opacité. • Modification de plusieurs images vous permet de sélectionner et modifier tous les objets visibles. Désactiver cette option vous permet de ne sélectionner et n’éditer que les objets de l’image courante. Création d’animations 327 Interpolation L’interpolation est un terme employé en technique d’animation traditionnelle pour décrire le processus selon lequel un animateur principal dessine uniquement les images clés (images contenant d’importantes modifications) pendant que des assistants dessinent les images intermédiaires. Dans Fireworks, l’interpolation permet de mélanger deux occurrences ou plus du même symbole pour générer les occurrences intermédiaires avec des attributs interpolés. L’interpolation est un technique manuel pratique applicable au mouvement plus sophistiqué d’un objet dans le document et aux objets dont les effets en direct changent dans chaque image de l’animation. Par exemple, vous pouvez interpoler un objet pour qu’il donne l’impression de se déplacer sur un trajet linéaire. Pour interpoler des occurrences : 1 Sélectionnez plusieurs occurrences du même symbole graphique dans le document. Ne sélectionnez pas des occurrences de symboles différents. 2 Choisissez Modification > Symbole > Occurrences interpolées. 3 Dans la boîte de dialogue Occurrences interpolées, indiquez le nombre d’étapes interpolées à insérer entre les deux occurrences d’origine. 4 Pour répartir les objets interpolés dans des images distinctes choisissez Répartir dans les images et cliquez sur OK. Si vous choisissez de ne pas répartir les objets dans des images distinctes, vous pouvez le faire plus tard en sélectionnant toutes les occurrences et en cliquant sur le bouton Répartir dans les images dans le panneau Images. Remarque : Dans la plupart des cas, l’utilisation de symboles d’animation est préférable à l’interpolation. Pour plus d’informations, voir « Utilisation des symboles d’animation » à la page 318. Aperçu d’une animation Vous pouvez prévisualiser une animation en cours de travail pour en vérifier l’avancement. Vous pouvez également prévisualiser une animation après optimisation, pour vérifier l’aspect qu’elle aura dans un navigateur Web. Pour prévisualiser une animation dans l’espace de travail : Utilisez les contrôles d’animation qui apparaissent à la base de la fenêtre du document. Contrôles d’animation Lorsque vous prévisualisez des animations, prenez en compte les points suivants : • Pour définir la durée d’apparition d’une image dans la fenêtre du document, indiquez la valeur de cadence d’image désirée dans le panneau Images. • Les images qui n’ont pas été exportées n’apparaissent pas lors de la visualisation. 328 Chapitre 14 • L’animation telle qu’elle apparaît dans la fenêtre Original affiche les sources des graphismes à leur résolution normale, pas les versions optimisées qui ont été exportées dans le fichier. Pour prévisualiser une animation dans la fenêtre d’aperçu : 1 Cliquez sur le bouton Aperçu en haut de la fenêtre du document. 2 Utilisez les contrôles d’animation. Remarque : Il n’est pas recommandé de visualiser l’animation dans les fenêtres 2 en 1 ou 4 en 1. Pour afficher une animation dans un navigateur Web : Choisissez Fichier > Aperçu dans le navigateur, et sélectionnez un navigateur dans le sous-menu. Remarque : Vous devez sélectionner le format de fichier GIF animé comme format de fichier d’exportation dans le panneau Optimiser, autrement vous ne percevrez aucun mouvement lorsque vous prévisualiserez le document dans le navigateur. Cela est obligatoire, même si vous comptez importer votre animation dans Flash sous forme de fichier SWF ou de fichier PNG Fireworks. Exportation d’une animation Après avoir créé et paramétré les symboles et les images qui composent votre animation, vous êtes prêt à les exporter dans un fichier d’animation. Avant d’exporter le fichier, vous devez définir quelques paramètres qui permettront à votre animation d’être chargée plus rapidement et de s’exécuter de façon plus fluide. Vous pouvez définir les paramètres de lecture (boucle et transparence), et utiliser l’optimisation pour que le fichier exporté soit plus compact et plus rapide à charger. Remarque : Si vous comptez importer votre animation dans Macromedia Flash pour l’améliorer, il n’est pas nécessaire de l’exporter. Flash MX permet d’importer directement les fichiers sources PNG Fireworks. Voir « Utilisation de Macromedia Flash MX » à la page 388. Réglage du nombre de répétitions de l’animation Le paramètre Boucle de la boîte de dialogue Images détermine le nombre de répétitions de l’animation. Comme le défilement d’images se répète autant de fois que vous l’avez indiqué, vous pouvez réduire le nombre d’images nécessaires pour créer l’animation. Pour définir le nombre de répétitions de l’image animée sélectionnée : 1 Choisissez Fenêtre > Images pour afficher le panneau Images. 2 Cliquez sur le bouton Lecture en boucle de l’animation GIF, en bas de la fenêtre du document. 3 Choisissez le nombre de répétitions après la lecture initiale. Par exemple, si vous choisissez 4, l’animation sera exécutée cinq fois en tout. Avec En continu, l’animation se répète indéfiniment. Paramétrage de la transparence Au cours du processus d’optimisation, vous pouvez définir une ou plusieurs couleurs d’une image GIF animé qui seront transparentes dans un navigateur Web. Cette possibilité est particulièrement utile pour que la couleur ou l’image d’arrière-plan d’une page Web apparaisse à travers l’animation. Création d’animations 329 Pour qu’une couleur soit affichée comme transparente dans un navigateur Web : 1 Si le panneau n’est pas visible, choisissez Fenêtre > Optimiser. 2 Dans le menu contextuel Transparence du panneau Optimiser, choisissez Transparence d’Index ou Transparence Alpha. Pour une description de ces options, voir « Création de zones de transparence » à la page 349. 3 Utilisez l’outil Transparence du panneau Optimiser pour sélectionner les couleurs utilisées pour la transparence. Optimisation d’une animation L’optimisation consiste à compresser les fichiers dans la mesure du possible pour en accélérer le chargement et l’exportation, ce qui les fait apparaître beaucoup plus rapidement sur la page Web. Pour optimiser une animation : 1 Si vous comptez exporter votre animation en format GIF animé, choisissez GIF animé, dans le panneau Optimiser, comme format de fichier d’exportation. Si le panneau n’est pas visible, choisissez Fenêtre > Optimiser. 2 Paramétrez les options Couleurs, Tramer et Transparence. Pour plus d’informations sur les options d’optimisation, voir « Optimisation des images GIF, PNG, TIFF, BMP et PICT » à la page 342. 3 Dans le panneau Images, indiquez la valeur de cadence d’image désirée. Pour plus d’informations, voir « Réglage de la cadence d’images » à la page 322. Formats d’exportation des animations Lorsque vous avez créé et optimisé une animation, elle est prête à être exportée. Le format GIF animé est celui qui donne les meilleurs résultats pour les graphismes de type aplats et dessins animés. Pour plus d’informations sur l’exportation de fichiers GIF animés, voir « Exportation d’une animation » à la page 359. Vous pouvez exporter l’animation sous forme de fichier Flash SWF, et l’importer ensuite dans Macromedia Flash MX. Ou, vous pouvez sauter l’étape d’exportation et importer votre fichier source PNG Fireworks directement dans Flash MX. Cette option permet de mieux contrôler l’importation de votre animation. Vous pouvez importer tous les calques et images de votre animation pour l’améliorer dans Flash. Pour plus d’informations, voir « Utilisation de Macromedia Flash MX » à la page 388. Vous pouvez également exporter des images ou calques de vos animations dans des fichiers distincts. Cela peut être utile si de nombreux symboles figurent dans différents calques du même objet. Par exemple, vous pouvez exporter une bannière publicitaire sous forme de fichiers multiples si chaque lettre du nom d’une société est animée dans un graphisme. Chaque lettre est séparée des autres. Pour plus d’informations sur l’exportation de calques ou d’images dans des fichies distincts, voir « Exportation des images ou calques » à la page 360. 330 Chapitre 14 Utilisation d’animations existantes Vous pouvez utiliser un fichier GIF animé existant dans le cadre d’une animation Fireworks. Il existe deux façons d’utiliser ce type de fichiers : en important le fichier GIF dans un fichier Fireworks existant, ou en ouvrant le fichier GIF comme nouveau fichier. Lorsque vous importez un fichier GIF animé, Fireworks le convertit en symbole d’animation et le place dans l’image active. Si l’animation importée compte plus d’images que l’animation en cours, vous pouvez choisir de faire ajouter automatiquement le nombre d’images nécessaire. Les images GIF importées perdent leurs paramètres de cadence d’images d’origine, au profit de ceux du document courant. Comme le fichier importé est transformé en symbole d’animation, vous pouvez lui appliquer des mouvements supplémentaires. Par exemple, vous pouvez importer l’animation d’un homme marchant sur place et lui appliquer des propriétés de direction et de mouvement qui lui feront traverser l’écran. Lorsque vous ouvrez une image GIF animé dans Fireworks, un nouveau fichier est créé, et chaque image du fichier GIF est placée dans une image séparée. Bien que l’image GIF d’origine ne soit pas un symbole d’animation, elle ne conserve pas ses paramètres de cadence d’images d’origine. Une fois le fichier importé, vous devez définir son format de fichier comme GIF animé pour exporter l’animation depuis Fireworks. Pour importer une image GIF animé : 1 Choisissez Fichier > Importer. 2 Naviguez jusqu’au fichier et cliquez sur Ouvrir. 3 Ouvrez le fichier, et cliquez sur Oui pour ajouter des images supplémentaires à votre animation. Si vous cliquez sur Annuler, seule la première image du fichier GIF animé sera affichée. Bien que tout le document d’origine soit importé, vous devez ajouter des images pour voir le reste du fichier. Pour ouvrir une image GIF animé : Choisissez Fichier > Ouvrir, puis sélectionnez le fichier GIF. Utilisation de fichiers multiples pour une animation Fireworks peut créer une animation à partir d’un groupe de fichiers image. Par exemple, vous pouvez créer une bannière publicitaire sur la base de plusieurs graphismes existants, en ouvrant chaque graphisme et en le plaçant dans une image individuelle d’un même document. Pour ouvrir plusieurs fichiers comme base d’une animation : 1 Choisissez Fichier > Ouvrir. 2 Maintenez enfoncée la touche Maj et sélectionnez les différents fichiers. 3 Choisissez Ouvrir comme animation, puis cliquez sur OK. Fireworks ouvre les fichiers dans un nouveau document unique, en plaçant chaque fichier image dans une image séparée, dans l’ordre dans lequel vous avez sélectionné les fichiers. Création d’animations 331 332 Chapitre 14 CHAPITRE 15 Optimisation et exportation La gageure de la conception graphique pour le Web consiste à créer des images sophistiquées pouvant être chargées le plus vite possible. Pour ce faire, vous devez choisir un format offrant le taux de compression le mieux adapté à votre image, tout en préservant le plus possible la qualité. Cette recherche du meilleur équilibre est appelée Opimisation. Elle consiste à trouver les valeurs les mieux adaptées pour le nombre de couleurs, le niveau de compression et la qualité. L’exportation de graphisme depuis Macromedia Fireworks s’exécute en deux étapes : • Vous préparez d’abord un document ou des graphismes découpés individuels pour l’exportation en choisissant des options d’optimisation et en comparant les aperçus pour déterminer le juste équilibre entre la qualité et la taille des fichiers. • Vous exportez ensuite le document ou les graphismes à partir d’options d’exportation adaptées à leur destination sur le Web ou ailleurs. Si vous ne maîtrisez pas les procédures d’optimisation et d’exportation des graphismes Web, utilisez l’ Assistant Exportation. Vous pourrez ainsi aborder le processus d’exportation étape par étape et bénéficier de suggestions. Il affiche également la fenêtre Aperçu avant exportation, dans laquelle vous pouvez optimiser un document dans le cadre de la procédure d’exportation. Si vous maîtrisez bien les procédures d’optimisation et d’exportation de graphismes, utilisez les outils d’optimisation et d’exportation disponibles dans Fireworks. Pour l’optimisation, utilisez le panneau Optimiser et les onglets de prévisualisation figurant dans la fenêtre du document. Ils vous permettent de mieux contrôler le processus d’optimisation. Pour l’exportation, utilisez la boîte de dialogue Exporter ou le bouton Exportation rapide. Le bouton Exportation rapide l’exportation des graphismes vers d’autres applications rend plus aisée, en ce sens qu’il définit automatiquement les options dans la boîte de dialogue Exporter. Si vous utilisez Fireworks avec d’autres applications, ce bouton peut simplifier le processus de conception. Optimisation Dans Fireworks, l’optimisation des graphismes implique les actions suivantes : • Le choix du meilleur format. Chaque format de fichier repose sur sa propre technique de compression des informations colorimétriques. Le choix du format le plus approprié à un type de graphisme précis permet de diminuer de beaucoup la taille de son fichier. • Le choix des options spécifiques au format. Chaque format de fichier possède un jeu d’options particulier. Vous pouvez utiliser des options telles que la profondeur de couleur pour réduire la taille des fichiers. Certains formats graphiques tels que les format GIF et JPEG possèdent également des options permettant de contrôler la compression des images. 333 • Le réglage des couleurs dans le graphisme (pour format de fichier 8 bits uniquement). Vous pouvez limiter le nombre de couleurs en confinant l’image à un jeu de couleurs spécifique, appelée palette de couleurs. Supprimez ensuite les couleurs inutilisées de la palette de couleurs. La réduction du nombre de couleurs de la palette diminue le nombre de couleurs utilisées dans l’image, ce qui permet d’obtenir des fichiers de plus petite taille pour les types de fichier d’images couleur. Vous devez essayer tous les contrôles d’optimisation pour trouver le meilleur équilibre entre la qualité et la taille de fichier. Utilisation de l’Assistant Exportation Si vous ne maîtrisez pas les procédures d’optimisation et d’exportation des graphismes Web, utilisez l’ Assistant Exportation. L’Assistant Exportation vous permet d’exporter aisément des graphismes sans connaître les détails des procédures d’optimisation et d’exportation. L’Assistant Exportation vous guide, étape par étape, tout au long du processus d’optimisation et d’exportation. Après avoir répondu aux questions sur la destination et l’usage prévu des fichiers, choisissez l’une des suggestions de type de fichier et d’optimisation. Lorsque vous devez optimiser le fichier en fonction de la taille voulue du fichier cible, l’Assistant Exportation permet d’optimiser le fichier exporté en fonction de la taille spécifiée. Assistant Exportation Une fois que vous maîtrisez bien les procédures d’optimisation et d’exportation, utilisez les onglets Optimiser et Aperçu, dans la fenêtre du document, pour optimiser les graphismes. Elles sont plus pratiques à utiliser que l’Assistant Exportation et offrent un meilleur contrôle aux utilisateurs qui maîtrisent bien les procédures d’optimisation. Après avoir optimisé les graphismes à l’aide de cette procédure, vous devez exécuter une étape supplémentaire pour exporter les graphismes. Pour plus d’informations, voir « Optimisation dans l’espace de travail » à la page 337 et « Exportation depuis Fireworks » à la page 356. Pour exporter un document avec l’ Assistant Exportation : 1 Choisissez Fichier > Assistant Exportation 2 Répondez à toutes les questions qui s’affichent et cliquez sur Continuer dans chaque panneau. 334 Chapitre 15 Conseil : Choisissez Taille du fichier d’exportation cible dans le premier panneau pour spécifier la taille maximum du fichier cible. Fireworks fournit quelques recommandations sur les formats de fichier. 3 Cliquez sur Quitter. Dans la fenêtre Aperçu avant exportation, la fenêtre présente des options d’exportation recommandées. Pour plus d’informations, voir la section suivante. Utilisation de la fenêtre Aperçu avant exportation La fenêtre Aperçu avant exportation affiche les options d’optimisation et d’exportation recommandées pour le document actif. Remarque : La fenêtre Aperçu avant exportation était utilisée dans les précédentes versions de Fireworks pour optimiser et exporter simultanément des graphismes. Vous pouvez toujours ouvrir la fenêtre Aperçu avant exportation dans l’Assistant Exportation ou en choisissant Fichier > Aperçu avant exportation. Le graphisme apparaît dans la zone de prévisualisation de la fenêtre Aperçu avant exportation sous la forme exacte qu’il aura lors de l’exportation. Cette zone fournit également une estimation de la taille du fichier et du temps de téléchargement avec les paramètres d’exportation choisis. Estimation du temps de téléchargement et de la taille du fichier cible Enregistrement des paramètres de la vue active Prévisualisation des paramètres d’exportation choisis Jeu d’options enregistré pour l’exportation sélectionnée Vous pouvez afficher plusieurs vues, correspondant à des paramètres différents, de façon à obtenir le meilleur compromis possible entre la taille du fichier et le niveau de qualité requis. Vous pouvez également limiter la taille du fichier avec l’Assistant Optimiser la taille. Dans le cas de GIF animés ou de survols JavaScript, l’estimation de la taille du fichier correspond à la somme des tailles de toutes les images. Remarque : Pour accélérer le rafraîchissement de l’aperçu, désactivez la case Aperçu. Pour interrompre le rafraîchissement de la zone d’aperçu lorsque vous changez les paramètres, appuyez sur Echap. Pour exporter un graphisme à partir de l’Aperçu avant exportation : 1 Choisissez Fichier > Aperçu avant exportation pour ouvrir la fenêtre Aperçu avant exportation, si elle n’est pas déjà ouverte. Optimisation et exportation 335 2 Cliquez sur le bouton Zoom en bas de la boîte de dialogue pour appliquer un zoom avant ou arrière dans la fenêtre d’affichage. Cliquez sur ce bouton pour agrandir la fenêtre d’affichage. Cliquez en maintenant la touche Alt (Windows) ou Options (Macintosh) enfoncée pour réduire l’aperçu. 3 Pour appliquer un panoramique sur la fenêtre d’affichage exécutez l’une des actions suivantes : • Cliquez sur le bouton Pointeur en bas de la boîte de dialogue et faites glisser la fenêtre d’affichage. • Lorsque le pointeur Zoom est actif, maintenez enfoncée la barre d’espacement et tirez la fenêtre aperçu. 4 Pour comparer les paramètres d’exportation avec l’ Aperçu avant exportation, cliquez sur un bouton de fractionnement et divisez la zone d’aperçu en deux ou quatre fenêtres. Ces fenêtres permettent d’afficher un aperçu du graphisme avec des paramètres d’exportation différents. Remarque : Si vous appliquez un zoom ou un panoramique lorsque plusieurs fenêtres sont ouvertes, toutes les fenêtres sont agrandies et panoramiquées simultanément. 5 Pour optimiser un graphisme en fonction de la taille du fichier cible, cliquez sur le bouton de l’ Assistant Optimiser la taille. Indiquez la taille du fichier en Ko et cliquez sur OK. L’ Assistant Optimiser la taille tente d’obtenir la taille de fichier requise par les méthodes suivantes : • • • • • En ajustant la qualité JPEG ; 6 Cliquez sur Exporter après avoir modifié les paramètres d’exportation. 7 A partir de la boîte de dialogue Exporter, tapez un nom de fichier, choisissez une destination, définissez d’autres options, si vous le désirez, puis cliquez sur Enregistrer. En modifiant le lissage JPEG ; En modifiant le nombre de couleurs dans les images 8 bits ; En changeant les paramètres de tramage dans les images 8 bits ; En activant ou désactivant les paramètres d’optimisation. Pour plus d’informations sur les options de la boîte de dialogue Exporter, voir « Exportation depuis Fireworks » à la page 356. 336 Chapitre 15 Optimisation dans l’espace de travail L’exportation de graphismes sur le Web s’effectue en deux étapes : l’optimisation, puis l’exportation. L’optimisation des graphismes permet de s’assurer qu’ils possèdent le nombre de couleurs, le niveau de compression et la qualité appropriés. Après avoir défini les paramètres d’optimisation d’un gaphisme, ce dernier est prêt à être exporté. Vous pouvez vous passer de l’Assistant Exportation et de la fenêtre Aperçu avant exportation si vous maîtrisez bien le procédure d’optimisation et d’exportation de graphismes. L’espace de travail de Fireworks possède des fonctions d’optimisation et d’exportation qui vous permettent de mieux contrôler la manière dont les fichiers sont exportés : • Le panneau Optimiser contient les principaux contrôles d’optimisation. Pour les formats de fichier de 8 bits, il contient également une table de couleurs qui affiche les couleurs utilisées dans la palette de couleurs exportées. • Lorsqu’une découpe est sélectionnée, vous pouvez choisir des paramètres d’optimisation prédéfinis ou sauvegardés à partir du menu contextuel Paramètres d’exportation du Vérificateur de propriétés. • L’onglet Aperçu affiche le graphisme exporté tel qu’il apparaîtra en tenant compte des paramètres d’optimisation actifs. Vous pouvez ainsi optimiser l’ensemble du document ou sélectionner des découpes individuelles d’un graphisme JPEG et affecter à chacune d’elles différents paramètres d’optimisation. Utilisation des paramètres d’optimisation prédéfinis Vous pouvez choisir des paramètres d’optimisation courants dans le Vérificateur de propriétés ou dans le panneau Optimiser, afin de définir rapidement un format de fichier et d’appliquer des paramètres spécifiques à un format précis. Lorsque vous choisissez une option dans le menu déroulant Paramètres, les autres options du panneau Optimiser sont automatiquement définies. Si vous le désirez, vous pouvez améliorer chaque option individuellement. Pour obtenir un contrôle plus précis de l’optimisation que celui des options prédéfinies, vous pouvez créer vos propres paramètres d’optimisation dans le panneau Optimiser. Vous pouvez également modifier la palette de couleurs d’un graphisme à l’aide de la table de couleurs du panneau Optimiser. Optimisation et exportation 337 Pour choisir un paramètre d’optimisation prédéfini : Choisissez un réglage prédéfini dans le menu déroulant Paramètres du Vérificateur de propriétés ou du panneau Optimiser : GIF Web 216 forces toutes les couleurs à respecter la palette de couleurs Websafe. Cette palette contient jusqu’à 216 couleurs (voir « Optimisation des images GIF, PNG, TIFF, BMP et PICT » à la page 342). GIF WebSnap 256 convertit les couleurs qui ne font pas partie de la palette Websafe dans la couleur Websafe la plus proche. Cette palette contient jusqu’à 256 couleurs au maximum. GIF WebSnap 128 convertit les couleurs qui ne font pas partie de la palette Websafe dans la couleur Websafe la plus proche. Cette palette contient jusqu’à 128 couleurs. GIF Adaptive 256 ne contient que les couleurs exactes utilisées dans le graphisme. Cette palette contient jusqu’à 256 couleurs au maximum. JPEG - Qualité supérieure définit le taux de qualité JPEG à 80 % et le lissage à 0, ce qui donne des graphisme de haute qualité visuelle mais des fichiers de taille importante. JPEG - Fichier réduit définit le taux de qualité JPEG à 60 % et le lissage à 2, ce qui produit des graphismes dont la taille de fichier est réduite de plus de la moitié par rapport au type JPEG Qualité supérieure, mais au prix d’une réduction de la qualité d’images. GIF animé WebSnap 128 sélectionne le format de fichier GIF animé et convertit les couleurs qui ne font pas partie de la palette Websafe dans la couleur Websafe la plus proche. Cette palette contient jusqu’à 128 couleurs. Pour plus d’informations sur les types de fichiers, voir « Choix d’un type de fichier » à la page 341. Pour spécifier des paramètres d’optimisation personnalisés : 1 Dans le panneau Optimiser, choisissez une option dans le menu contextuel Exporte un format de fichier. 2 Définissez les options spécifiques à ce format (code des couleurs, tramage et qualité). 3 Si nécessaire, choisissez un autre paramétrage d’optimisation dans le menu contextuel du panneau Optimiser. Pour plus de détails sur le contrôles d’optimisation disponibles, consultez les sections appropriées dans « Optimisation dans l’espace de travail » à la page 337. 4 Vous pouvez nommer et sauvegarder vos paramètres d’optimisation personnels. Lorsque des propriétés de découpe, de bouton ou de document sont affichées, les noms des paramètres sauvegardés sont ajoutés à la liste des paramètres d’optimisation prédéterminés figurant dans le menu contextuel Paramètres et dans le Vérificateur de propriétés. Pour plus d’informations, voir « Enregistrement et réutilisation des paramètres d’optimisation » à la page 355. Pour modifier la palette de couleurs : Choisissez Fenêtre > Optimiser pour afficher et modifier la palette de couleurs d’un document. Pour plus d’informations, voir « Optimisation des images GIF, PNG, TIFF, BMP et PICT » à la page 342. 338 Chapitre 15 Pour optimiser des découpes individuelles : 1 Cliquez sur une découpe pour la sélectionner. Pour sélectioner plusieurs découpes à la fois, appuyez sur la touche Maj et cliquez sur chacune d’elles. 2 Dans le panneau Optimiser, optimisez les découpes sélectionnées. Prévisualisation et comparaison des paramètres d’optimisation Les onglets Aperçu affichent le graphisme tel qu’il apparaîtra dans un navigateur et tient compte des paramètres d’optimisation. Vérifiez les survols et les comportements de navigation, ainsi que les animations, dans la fenêtre Aperçu. L’onglet Original et les onglets d’aperçu figurent dans la partie supérieure gauche de la fenêtre du document. Les onglet d’aperçu affichent la taille totale du document, une estimation du temps de téléchargment et le format du fichier. L’estimation représente la moyenne du temps nécessaire au téléchargement de l’ensemble des découpes et images du document en supposant qu’un modem de 56 K est utilisé. Les fenêtres 2 en 1 et 4 en 1 affichent des informations complémentaires qui varient en fonction du type de fichier sélectionné. Une fenêtre d’aperçu affichant un fichier de type GIF Vous pouvez utiliser le panneau Optimiser pour optimiser un document dans une fenêtre d’aperçu comme si vous vous trouviez dans la fenêtre Original. Optimisez l’ensemble du document ou uniquement les découpes sélectionnées. La couche de découpe permet de différencier la zone du document qui est en cours d’optimisation du reste du document. La couche de découpe affiche avec une teinte laiteuse, atténuée, les zones qui ne sont pas en cours d’optimisation. Vous pouvez activer ou désactiver la couche de découpe. Optimisation et exportation 339 Lorsque vous préparez l’optimisation de la découpe sélectionnée, les densités des parties qui ne sont pas en cours d’optimisation sont atténuées. Pour afficher un aperçu d’un graphisme prenant en compte les paramètres d’optimisation actifs : Cliquez sur l’onglet Aperçu dans le coin supérieur gauche de la fenêtre de document. Remarque : A partir du panneau Outils, cliquez sur l’icône Masquer les découpes pour masquer les découpes et les repères de découpe pendant la prévisualisation. Pour comparer des aperçus ayant des paramètres d’optimisation différents : 1 Cliquez sur l’onglet 2 en 1 ou 4 en 1 dans le coin supérieur gauche de la fenêtre du document. 2 Cliquez sur l’un des aperçus pour le sélectionner. 3 Indiquez les paramètres d’optimisation dans le panneau Optimiser. 4 Sélectionnez les autres aperçus et spécifiez d’autres paramètres d’optimisation pour chaque aperçu afin de les comparer. Lorsque vous choisissez un aperçu 2 en 1 ou 4 en 1, la première fenêtre affiche le document PNG d’origine de Fireworks, ce qui vous permet de le comparer avec les versions optimisées. Vous pouvez afficher la version optimisée de votre choix. Pour remplacer l’affichage optimisé par l’affichage de l’original en mode 2 en 1 ou 4 en 1 : 1 Sélectionnez une fenêtre d’aperçu. 340 Chapitre 15 2 Choisissez Original (pas d’aperçu) dans le menu déroulant d’affichage qui se trouve à la base de la fenêtre du document. Pour remplacer l’affichage de l’original par un aperçu optimisé en mode 2 en 1 ou 4 en 1 : 1 Sélectionnez l’affichage de l’image originale. 2 Choisissez Aperçu avant exportation dans le menu déroulant Aperçu. Pour afficher ou masquer la couche de découpe : Choisissez Affichage > Couche de découpe. Choix d’un type de fichier Le choix du format de fichier doit dépendre du type de graphisme et de son utilisation. L’intégrité visuelle d’un graphisme peut varier d’un format à un autre, surtout si vous utilisez différentes méthodes de compression. En outre, seuls certains formats de fichiers graphiques sont acceptés par la plupart des navigateurs Web. Cependant, d’autres formats de fichier sont parfaits pour l’édition et l’utilisation dans des applications multimédia. Voici les formats de fichier disponibles : Le format d’échange de données graphiques GIF (Graphics Interchange Format) est l’un des formats d’image les plus utilisés sur le Web. Il contient un maximum de 256 couleurs. Par ailleurs, les fichiers GIF peuvent contenir une zone transparente et être composés de plusieurs images, pour les effets d’animation. Les images dans lesquelles se trouvent des plages de couleurs identiques sont parfaites pour la compression lorsqu’elles sont exportées en en format GIF. Ce format est généralement idéal pour les graphismes de type dessin animé, les logos, les images comportant des zones transparentes ou les animations. Optimisation et exportation 341 Le format JPEG a été développé par le Joint Photographic Experts Group pour les besoins spécifiques des images photographiques ou comportant un nombre très élevé de couleurs. Le format JPEG permet de coder 16 millions de couleurs (24 bits). Le format JPEG est idéal pour exporter des photographies numérisées, des images comportant des textures ou des dégradés, ou toute autre image nécessitant plus de 256 couleurs. Le format PNG (Portable Network Graphic) est le plus complet des formats graphiques utilisables sur le Web. Cependant, tous les navigateurs Web ne peuvent pas prendre en charge les images PGN. Le format PNG permet de coder les graphismes sur un maximum de 32 bits, peut inclure une transparence ou une couche alpha, et prend en charge l’affichage progressif des images. PNG est le format de fichier natif de Macromedia Fireworks. Cependant, les fichiers PNG de Fireworks comportent des informations spécifiques à l’application qui ne sont pas enregistrées dans le fichier PNG exporté ou dans les fichiers créés dans d’autres applications. Le format WBMP (Wireless Bitmap) est utilisé pour les périphériques de l’informatique mobile (téléphones portables assistants numériques personnels). Il a été conçu spécifiquement pour les pages WAP (Wireless Application Protocol). Dans la mesure où il s’agit d’un format 1bit, seules deux couleurs sont disponibles : noir et blanc. Le format TIFF (Tagged Image File Format) est utilisé pour le stockage des images bitmap. Il s’agit du format le plus utilisé dans l’édition. De nombreuses applications multimédia prennent également en charge les images importées en format TIFF. Le format de fichier graphique de Microsoft Windows, BMP, est un format de fichier couramment utilisé pour l’affichage d’images bitmap. Les fichiers BMP sont essentiellement utilisés sur des ordinateurs fonctionnant sous le système d’exploitation de Windows. De nombreuses applications peuvent importer des images BMP. Mis au point par Apple Computer, le format PICT est un format de fichier graphique couramment utilisé sur les ordinateurs fonctionnant sous les systèmes d’exploitation Macintosh. La plupart des applications Mac peut importer des images PICT. Optimisation des images GIF, PNG, TIFF, BMP et PICT Dans Fireworks, chaque format de fichier possède un jeu d’options d’optimisation. Dans la plupart des cas, seuls les fichiers sur 8 bits de type GIF, PNG 8, TIFF 8, BMP 8 et PICT 8 offrent des contrôles d’optimisation intéressants. Remarque : Les fichiers JPEG constituent l’exception. Pour plus de détails sur les contrôles d’optimisation de fichiers JPEG, voir « Optimisation des fichiers JPEG » à la page 351. Les paramètres d’optimisation de Fireworks s’appliquent de façon identique à tous les fichiers sur 8 bits. Pour les fichiers Web tels que les fichiers GIF et PNG, il est possible d’indiquer le niveau de compression à appliquer aux graphismes. 342 Chapitre 15 Vous pouvez optimiser des fichiers sur 8 bits en modifiant leur palette de couleurs. La réduction du nombre de couleurs de la palette diminue le nombre de couleurs utilisées dans l’image, ce qui permet d’obtenir des fichiers de plus petite taille. Mais la réduction du nombre de couleurs peut également diminuer la qualité de l’image. Comme vous l’avez expérimenté avec des paramètres d’optimisation différents, utilisez les aperçus 2 en 1 et 4 en 1 pour tester et comparer l’apparence du gaphisme et la taille estimée du fichiers résultant. Pour plus d’informations sur l’utilisation des onglets Aperçu, voir « Prévisualisation et comparaison des paramètres d’optimisation » à la page 339. Choix d’une palette de couleurs Les formats GIF et et autres formats d’images sur 8 bits incluent une palette de couleurs. Une palette de couleurs est une liste pouvant comporter jusqu’à 256 couleurs utilisables dans un fichier. Seules les couleurs définies dans la palette de couleurs apparaissent dans un graphisme. Cependant, certaines palettes de couleurs contiennent des couleurs qui ne sont pas utilisées par le graphisme. Voici les palettes de couleurs disponibles dans Fireworks : Adaptative est une palette personnalisée établie à partir des couleurs utilisées dans le document. Les palettes adaptatives offrent en général la meilleure qualité d’image. WebSnap Adaptive est une palette adaptive qui convertit les couleurs proches du format Websafe dans la couleur Websafe la plus proche. Les couleurs Websafe correspondent à celles provenant de la palette Web 216. Web 216 est une palette des 216 couleurs qui sont communes aux ordinateurs Windows et Macintosh. Cette palette est souvent dite Websafe ou « compatible avec les navigateurs » parce qu’elle donne des résultats relativement réguliers en 256 couleurs (8 bits), quels que soient la plate-forme et le navigateur utilisés. Exact contient exactement les couleurs utilisées dans le graphisme. La palette exacte n’est utilisable que pour les images comportant au maximum 256 couleurs. Au-delà, la palette adaptative est automatiquement activée. Les palettes Système (Windows) et Système (Macintosh) comportent respectivement les 256 couleurs définies par les plates-formes standard Windows ou Macintosh. Echelle de gris est une palette de 256 nuances de gris ou moins. Choisissez cette palette pour convertir l’image exportée en échelles de gris. Noir et blanc est Uniforme est une palette à deux, ne comportant que du noir et du blanc. une palette mathématique regroupant les valeurs en pixels des couleurs RVB. Personnalisée est une palette qui a été modifiée ou chargée à partir d’une palette externe (fichier ACT) ou d’un fichier GIF. Le réglage de la palette de couleurs pendant l’optimisation affecte les couleurs de l’image exportée. Optimisez et personnalisez les palettes de couleurs en utilisant la table de couleurs ou le panneau Optimiser. Pour choisir une palette de couleurs : Choisissez une option dans le menu déroulant Palette indexée du panneau Optimiser. Optimisation et exportation 343 Pour importer une palette personnalisée : 1 Utilisez l’une des méthodes suivantes : • Choisissez Charger la palette dans le menu déroulant des options du panneau Optimiser. • Choisissez Personnalisée dans le menu déroulant Palette du panneau Optimiser. 2 Recherchez un fichier de palette ACT ou GIF, puis cliquez sur Ouvrir. Remarque : Les utilisateurs Windows doivent sélectionner les fichiers GIF dans le menu déroulant Fichiers ou Type pour pouvoir afficher dans la boîte de dialogue Ouvrir tous les fichiers ayant l’extension .gif. Les couleurs du fichier de palette ACT ou GIF sont ajoutées dans la table de couleurs du panneau Optimiser. Choix de la profondeur de couleurs La profondeur de couleur désigne le nombre de couleurs utilisées dans le graphisme exporté. Vous pouvez créer des fichiers de plus petite taille en réduisant le nombre de couleurs. En réduisant la profondeur de couleur, certains couleurs de l’image (en priorité celles les moins utilisées) sont rejetées. Les pixels qui contiennent des couleurs rejetées sont convertis dans la couleur la plus proche restant dans la palette. Cela peut affecter la qualité de l’image. Remarque : L’option de profondeur de couleur est disponible pour le format de fichier GIF et les autres formats de fichier 8 bits uniquement. Pour choisir une profondeur de couleur : A partir du menu déroulant Couleurs du panneau Optimiser, choisissez une option ou tapez une valeur dans le champ. Vous pouvez sélectionner une valeur entre 2 et 256. Conseil : Le nombre de couleurs utilisées dans l’image peut être inférieur au nombre maximum de couleurs que vous avez choisi. Le nombre situé dans le coin inférieur de la table de couleurs indique le nombre de couleurs visibles dans l’image. Si aucun nombre n’est indiqué, le bouton Reconstituer est affiché, ce qui indique que vous devez reconstituer la palette de couleurs. Pour plus d’informations, voir « Affichage des couleurs d’une palette » à la page 346. Pour choisir une profondeur de couleur supérieure à 256 couleurs : Dans le panneau Optimiser, choisissez un format de fichier 24 ou 32 bits dans le menu contextuel Exporte un format de fichier. 344 Chapitre 15 Remarque : L’augmentation de la profondeur de couleurs s’accompagne de celle de la taille des fichiers à exporter. C’est pourquoi les profondeurs importantes ne sont généralement pas idéales pour les graphismes sur le Web. Il est donc préférable de réserver l’utilisation des fichiers JPEG, ou PNG sur 24 ou 3 2 bits, à l’exportation d’images photographiques à variation continue ou comportant des dégradés complexes. Pour les gaphismes destinés au Web et ayant une profondeur de couleur très importante, utilisez le format JPEG. Pour plus d’informations, voir « Optimisation des fichiers JPEG » à la page 351. Suppression des couleurs non utilisées Pour réduire plus encore la taille des fichiers, vous pouvez supprimer de la palette les couleurs qui ne sont pas utilisées dans l’image avant l’exportation de celle-ci. Remarque : L’option de profondeur de couleur est disponible pour le format de fichier GIF et les autres formats de fichier graphique 8 bits uniquement. Pour supprimer les couleurs non utilisées : Activez l’option Supprimer les couleurs non utilisés dans le menu déroulant des options du panneau Optimiser. Désactivez l’option Supprimer les couleurs non utilisées pour conserver toutes les couleurs de la palette, y compris les couleurs ne figurant pas dans l’image exportée. Utilisation du tramage pour simuler les couleurs perdues Le tramage permet de créer une approximation des couleurs ne figurant pas dans la palette de couleurs active, en alternant des pixels de couleur proche. Vu de loin, le fondu des couleurs donne l’apparence de la couleur manquante. Le tramage est particulièrement utile pour exporter des images avec des fondus complexes ou des dégradés, ou pour exporter des photographies à un format de fichier graphique 8 bits, tel que GIF par exemple. Le tramage peut augmenter considérablement la taille du fichier. Remarque : L’option de tramage est disponible pour le format de fichier GIF, les formats de fichier gaphique 8 bits et WBMP uniquement. Pour appliquer un tramage à un graphisme : Indiquez une valeur en pourcentage dans le champ Tramer du panneau Optimiser. Optimisation et exportation 345 Affichage des couleurs d’une palette La table de couleurs du panneau Optimiser indique les couleurs utilisées dans l’aperçu actif de l’image lorsque vous travaillez en mode 8 bits ou moins, et permet de modifier la palette de l’image. La Table des couleurs est automatiquement mise à jour en mode Aperçu. Elle paraît vide si vous optimisez plusieurs découpes à la fois, ou si vous n’optimisez pas dans un format sur 8 bits tel que GIF. Divers petits symboles apparaissent sur certains échantillons de couleur pour en indiquer les caractéristiques. suit : Symbole Indique La couleur a été modifiée, ce qui n’a d’effet que sur le document exporté. Cela ne modifie pas la couleur dans le document source. La couleur est verrouillée. La couleur est transparente. Cette couleur est Websafe. La couleur possède plusieurs attributs. Dans le cas présent, cette couleur est compatible avec le Web, verrouillée et elle a été modifiée. Si vous modifiez le document, le panneau Table de couleurs risque de ne plus afficher l’ensemble des couleurs du document. Dans ce cas, vous devez reconstituer la table de couleurs. Le bouton Reconstituer apparaîtra au bas du panneau Optimiser si vous devez reconstituer la table de couleurs. Pour reconstituer la table de couleurs afin de refléter les modifications apportées au document : Cliquez sur le bouton Reconstituer, en bas du panneau Optimiser. Une fois la table reconstruite, le bouton Reconstituer disparaît et le nombre de couleurs utilisées dans l’image apparaît à sa place. 346 Chapitre 15 Pour sélectionner une couleur : Cliquez sur la couleur désirée dans la table de couleurs du panneau Optimiser. Pour sélectionner plusieurs couleurs : Appuyez sur la touche Contrôle (Windows) ou sur la touche Commande (Macintosh) et cliquez sur les couleurs. Pour sélectionner une plage de couleurs : 1 Cliquez sur une couleur. 2 Maintenez enfoncée la touche Maj et cliquez sur la dernière couleur de la page de couleurs à sélectionner. Pour afficher un aperçu de tous les pixels du document contenant une couleur spécifique : 1 Cliquez sur l’onglet Aperçu dans la fenêtre du document. 2 Cliquez sur une couleur dans la table de couleurs du panneau Optimiser et maintenez le bouton de la souris enfoncé. Les pixels contenant le nuancier sélectionné changent temporairement de couleur tant que le bouton de la souris reste enfoncé. Remarque : Lorsque vous affichez un aperçu des pixels du document par l’intermédiaire des fenêtres d’aperçu 2 en 1 ou 4 en 1, ne sélectionnez pas la fenêtre de l’original. Verrouillage des couleurs d’une palette Vous pouvez verrouiller certaines couleurs de façon à empêcher leur suppression ou modification lors d’un changement de palette ou du retrait de l’une des couleurs de la palette. Lorsque vous changez de palette, les couleurs verrouillées sont ajoutées à la nouvelle palette. Pour verrouiller une couleur sélectionnée : • Cliquez sur le bouton Verrouiller, en bas du panneau Optimiser. Pour déverrouiller une couleur : 1 Sélectionnez une couleur verrouillée dans la table de couleur du panneau Optimiser. 2 Cliquez sur le bouton Verrouiller dans le panneau Optimiser Pour déverrouiller toutes les couleurs : Choisissez l’option Déverrouiller toutes les couleurs dans le menu déroulant des options du panneau Optimiser. Modification des couleurs d’une palette Vous pouvez changer l’une des couleurs de la palette en la modifiant à partir de table de couleurs du panneau Optimiser. La modification d’une couleur remplace toutes ses occurrences dans l’image à exporter. La couleur de l’image d’origine n’est pas affectée. Pour modifier une couleur : 1 Pour ouvrir le sélecteur de couleurs du système, utilisez l’une des méthodes suivantes : Optimisation et exportation 347 • Sélectionnez une couleur, puis cliquez sur le bouton Modifier une couleur, en bas du panneau Optimiser. • Double-cliquez sur une couleur dans la table de couleurs. 2 Modifiez la couleur à l’aide du sélecteur de couleurs du système. La nouvelle couleur remplace toutes les occurrences de la couleur remplacée dans la zone d’aperçu. Remarque : Cliquez avec le bouton droit de la souris (Windows) ou appuyez sur la touche Commande (Macintosh) et cliquez sur une couleur de la palette pour afficher un menu contextuel d’options de modification de la couleur sélectionnée. Utilisation des couleurs Websafe Les couleurs Websafe sont communes aux plates-formes Macintosh et Windows. Elles ne sont pas tramées lorsqu’elles sont affichées dans un navigateur Web sur un écran d’ordinateur paramétré pour 256 couleurs. Fireworks dispose de plusieurs méthodes permettant d’appliquer et d’utiliser les couleurs Websafe. Pour forcer l’utilisation de couleurs Websafe : Choisissez Web 216 dans le menu déroulant Palette indexée du panneau Optimiser. Pour créer une palette adaptative favorisant les couleurs Websafe : Choisissez la palette WebSnap adaptative. Les couleurs non Websafe qui sont proches de couleurs Websafe sont converties en ces couleurs. Pour forcer l’application des couleurs Websafe équivalentes : 1 Sélectionnez une couleur dans la table de couleurs du panneau Optimiser. 2 Cliquez sur le bouton Accrocher à Websafe. L’application de couleurs Websafe dans le panneau Optimiser n’affecte pas l’image en tant que telle, mais seulement sa version exportée. Enregistrement de palettes Vous pouvez enregistrer des palettes personnalisées en tant que fichiers de palette externe. Utilisez les palettes enregistrées avec d’autres documents Fireworks ou dans des applications prenant en charge les fichiers de palettes externes, tels que Macromedia Freehand, Macromedia Flash et Adobe Photoshop. Les fichiers des palettes enregistrées ont l’extension .act. Pour enregistrer une palette de couleurs personnalisée : 1 Choisissez Enregistrer la palette dans le menu déroulant des options du panneau Optimiser. 2 Tapez le nom de la palette et choisissez le dossier de destination. 3 Cliquez sur Enregistrer. Chargez le ficher de palette enregistré dans le panneau Echantillons ou Optimiser et utilisez-le pour exporter d’autres documents. 348 Chapitre 15 Réglage de la compression Vous pouvez obtenir un taux de compression encore supérieur pour les fichiers GIF en modifiant la valeur de leur paramètre Perte. Plus cette valeur est élevée, plus les fichiers sont de petite taille, mais plus la qualité de l’image est réduite. Une valeur de perte comprise entre 5 et 15 permet généralement d’obtenir les meilleurs résultats. Fichier gif d’origine ; Perte de 30 ; perte de 100 Pour changer le taux de compression d’un fichier GIF : Indiquez la valeur du paramètre Perte dans le panneau Optimiser. Création de zones de transparence Vous pouvez définir des zones de transparence dans les fichiers GIF et PNG 8 bits, de façon à ce que l’arrière-plan de la page Web soit visible au travers de ces zones dans le navigateur. Dans Fireworks, un échiquier gris et blanc dans les onglets Aperçu indique les zones transparentes. Aperçu d’une image optimisée dans Fireworks ; image exportée avec transparence et placée sur une page Web ayant un fond coloré Remarque : Des zones de transparence sont automatiquement définies dans les fichiers PNG 32 bits, même si aucune option de transparence pour fichier PGN 32 bits n’est visible dans le panneau Optimiser. Utilisez l’option Transparence d’index lorsque vous exportez des images GIF contenant des zones de transparence. La transparence d’index vous permet de spécifier les couleurs qui seront transparentes lors de l’exportation des fichiers. Cette option active ou désactive des pixels ayant des valeurs de couleur spécifiques. Etant donné que les images GIF prennent en charge la transparence d’index, elles représentent la forme de transparence la plus utilisée sur le Web. Remarque : Par défaut, les images GIF sont exportées sans transparence dans Fireworks. Bien que le document apparaissant derrière une image ou un objet soit transparent dans la fenêtre Original de Fireworks, cela n’implique pas que l’arrière-plan de l’image sera transparent lorsqu’elle sera exportée en format GIF pour être utilisée sur le Web. Vous devez sélectionner l’option Transparence d’index avant d’exporter l’image. Optimisation et exportation 349 Vous pouvez également choisir l’option Transparence Alpha, bien qu’elle ne soit pas souvent utilisée pour les graphismes du Web étant donné qu’elle n’est prise en charge que par les fichiers de format PNG et que la plupart des navigateurs Web n’utilisent pas ce format. Cette option est souvent utilisée dans les graphismes exportés qui contiennent une transparence de dégradés et des pixels semi-opaques. La transparence alpha s’avère également utile lorsque vous exportez des fichiers vers Macromedia Flash ou Director, puisque ces deux applications prennent en charge ce type de transparence. Remarque : L’application de la transparence à des couleurs n’affecte pas l’image en tant que telle, mais seulement sa version exportée. Vous pouvez voir l’aspect qu’aura l’image exportée dans une fenêtre Aperçu. Pour plus d’informations sur les onglets Aperçu, voir « Prévisualisation et comparaison des paramètres d’optimisation » à la page 339. Pour sélectionner une couleur de transparence : 1 Cliquez sur l’un des onglets Aperçu, 2 en 1 ou 4 en 1. Dans l’onglet 2 en 1 ou 4 en 1, cliquez sur une autre fenêtre que celle de l’ original. 2 Dans le panneau Optimiser, choisissez Transparence d’index dans le menu contextuel Transparence à la base du panneau. La couleur du fond apparaît transparente dans l’aperçu. 3 Pour choisir une autre couleur, cliquez sur le bouton Définir la couleur de transparence d’index. Le pointeur prend l’aspect d’une pipette. 4 Pour choisir la couleur de la transparence, procédez de l’une des manières suivantes : • Cliquez sur une couleur dans la table des couleurs du panneau Optimiser. • Cliquez sur une couleur dans le document. Pour ajouter ou supprimer des couleurs de la transparence : 1 Cliquez sur l’un des onglets Aperçu, 2 en 1 ou 4 en 1. Dans l’onglet 2 en 1 ou 4 en 1, cliquez dans une autre fenêtre que celle de l’original. Remarque : Vous pouvez ajouter ou supprimer des couleurs de la transparence dans la fenêtre Original, mais vous ne pourrez visualiser les résultats que dans une fenêtre d’aperçu. 2 Dans le panneau Optimiser, cliquez sur le bouton Ajouter la couleur à la transparence ou Effacer la couleur de la transparence. 3 Pour choisir une autre couleur de la transparence ou pour surpprimer la couleur de la transparence, procédez de l’une des manières suivantes : • Cliquez sur une couleur dans la table des couleurs du panneau Optimiser. • Cliquez sur une couleur dans la fenêtre d’aperçu. Pour appliquer un effet de transparence à l’arrière-plan d’une image : 1 Cliquez sur l’un des onglets Aperçu, 2 en 1 ou 4 en 1. Dans l’onglet 2 en 1 ou 4 en 1, cliquez sur une autre fenêtre que celle de l’ original. 350 Chapitre 15 2 Choisissez le format GIF dans le panneau Optimiser, puis Transparence d’index dans le menu contextuel Transparence. La couleur de fond apparaît transparente dans l’aperçu et l’image peut être alors exportée. Interlacement : Téléchargement graduel Lorsqu’elles sont affichées dans un navigateur Web, les images entrelacées apparaissent progressivement au fur et à mesure du téléchargement. Elles s’affichent à faible résolution, puis atteignent leur résolution finale à la fin du téléchargement. Remarque : Cette option est disponible pour les formats de fichier GIF et PNG. Vous pouvez obtenir des résultas identiques avec une image JPEG en rendant son téléchargement progressif. Pour plus d’informations, voir « Optimisation des fichiers JPEG » à la page 351. Pour exporter une image GIF ou PNG entrelacée : Activez l’option Entrelacée dans le menu déroulant des options du panneau Optimiser. Optimisation des fichiers JPEG A partir du panneau Optimiser, vous pouvez optimiser les fichiers JPEG en définissant des options de compression et de lissage. Les fichiers JPEG étant toujours enregistrés en couleur 24 bits, vous pouvez les optimiser en modifiant leur palette de couleurs. La table de couleurs est vide lorsque vous sélectionnez une image JPEG. Comme vous l’avez expérimenté avec des paramètres d’optimisation différents, utilisez les aperçus 2 en 1 et 4 en 1 pour tester et comparer l’apparence d’une image JPEG et la taille estimée du fichiers résultant. Pour plus d’informations sur l’utilisation des onglets Aperçu, voir « Prévisualisation et comparaison des paramètres d’optimisation » à la page 339. Optimisation et exportation 351 En ajustant la qualité JPEG Le format JPEG est un format « avec perte », ce qui signifie qu’une partie des données de l’image est rejetée lors de la compression, ce qui réduit la qualité du fichier final. Toutefois, dans la plupart des cas, certaines données de l’image peuvent être perdues sans qu’il soit possible de déceler à l’oeil nu une importante différence de qualité. Image originale : réglage de la qualité sur 50 ; réglage de la qualité sur 20 Pour déterminer l’importance de la perte de qualité lors de la compression d’un fichier JPEG à exporter : Réglez la perte de qualité à l’aide du curseur du menu déroulant Qualité du panneau Optimiser. • Utilisez une valeur élevée pour préserver au maximum la qualité ; la compression sera alors moins importante et les fichiers résultants plus volumineux. • A l’inverse, une valeur faible permet d’obtenir un fichier de taille réduite mais d’une qualité graphique inférieure. Compression sélective des zones dans une image JPEG La compression JPEG sélective permet de compresser différentes zones d’une image JPEG à différents niveaux. Les zones importantes d’une image peuvent ainsi être compressées en conservant un niveau de qualité élevé. Les zones moins importantes, par exemple les arrière-plans, peuvent être compressées à un niveau de qualité moins élevé, ce qui réduit la taille générale du fichier image tout en préservant la qualité des zones principales. La zone sélectionnée dans cette image est compressée à un niveau de qualité de 90, tandis que la zone non sélectionnée est compressée à un niveau de qualité de 50. 352 Chapitre 15 Pour compresser des zones sélectionnées dans un fichier JPEG : 1 Dans la fenêtre Original, sélectionnez la zone à compresser dans le graphisme à l’aide de l’outil Cadre. 2 Choisissez Modification > JPEG sélective > Enregistrer en tant que masque JPEG. 3 Si ce n’est déjà fait, choisissez JPEG dans le menu contextuel Export un format de fichier. 4 Cliquez sur le bouton Modifier les options de qualité sélective dans le panneau Optimiser. La boîte de dialogue Paramètres JPEG sélectifs s’affiche. 5 Activez la case à cocher Activer la qualité sélective et indiquez un taux de compression dans la zone de texte. Plus la valeur indiquée sera faible, plus la zone de qualité JPEG sélective sera compressée à un taux important par rapport au reste de l’image. Plus la valeur indiquée sera élevée, moins la zone de qualité JPEG sélective sera compressée à un taux important par rapport au reste de l’image. 6 Au besoin, changez la couleur de la zone de qualité JPEG sélective. Cela n’affecte pas le résultat. 7 Activez la case à cocher Préserver la qualité du texte. Tous les éléments texte seront automatiquement exportés avec un niveau de qualité élevé, quelle que soit la valeur de qualité sélective de la zone dans laquelle ils sont inclus. 8 Activez la case à cocher Préserver la qualité du bouton. Tous les symboles de boutons seront automatiquement exportés avec un niveau de qualité élevé. 9 Cliquez sur OK. Pour modifier la zone de compression JPEG sélective : 1 Choisissez Modification > JPEG sélective > Restaurer le masque JPEG en tant que sélection. La sélection apparaît en surbrillance. 2 Pour modifier la taille de la zone de sélection, utilisez l’outil Cadre de sélection ou tout autre outil dede sélection. 3 Choisissez Modification > JPEG sélective > Enregistrer en tant que masque JPEG. 4 Au besoin, modifiez les paramètres de qualité sélective dans le panneau Optimiser. Remarque : Pour annuler une sélection, choisissez Modification > JPEG sélective > Supprimer le masque JPEG. Adoucissement ou accentuation des détails Dans le panneau Optimiser, l’option Lissage permet de réduire la taille des fichiers JPEG. Le lissage consiste à adoucir les contours francs, qui n’offrent pas de bonnes possibilités de compression en JPEG. Les valeurs élevées produisent un niveau de lissage élevé dans les fichiers JPEG exportés, ce qui crée en général des fichiers de plus petite taille. Une valeur de lissage de 3 environ suffit à réduire la taille du fichier image, tout en préservant une qualité raisonnable. Pour préserver la netteté des séparations entre deux couleurs : Choisissez l’option Bords des JPEG plus nets dans le menu déroulant des options du panneau Optimiser. Optimisation et exportation 353 Utilisez cette option pour exporter des fichiers JPEG qui contiennent du texte ou des détails fins et préserver la netteté de ces zones. L’option Bords des JPEG plus nets a pour conséquence d’augmenter la taille du fichier. Utilisation d’images JPEG progressive Comme les images GIF et PNG entrelacées, les images JPEG progressives commencent par apparaître à faible résolution, et leur qualité s’améliore au cours de la suite du chargement. Pour exporter une image JPEG progressive : Choisissez JPEG progressive dans le menu déroulant des options du panneau Optimiser. Remarque : Certaines applications anciennes d’édition d’images bitmap ne peuvent pas ouvrir les JPEG à image progressive. Réglage de l’anticrénelage en fonction de la couleur d’arrière-plan cible L’anticrénelage permet d’adoucir les contours d’un objet en mélangeant progressivement sa couleur avec celle de l’arrière-plan dans lequel il est placé. Par exemple, si l’objet est noir et que la plage sur laquelle il est placé est blanche, la fonction d’anticrénelage ajoutera plusieurs niveaux de gris intermédiaires aux pixels qui forment le contour de l’objet, pour adoucir la transition entre le noir et le blanc. En sélectionnant l’option Matage dans le panneau Optimiser, vous pouvez appliquer la couleur mate aux objets placés directement sur le fond. Cette option est utile lorsque vous exportez des graphismes à placer dans des pages Web ayant des arrière-plans de couleur. Pour régler l’anticrénelage en fonction de la couleur d’arrière-plan cible : Dans le panneau Optimiser, choisissez une couleur dans le menu contextuel Matage. Prenez une couleur le plus proche possible de la couleur de l’arrière-plan cible sur lequel le graphisme exporté sera placé. Remarque : L’anticrénelage s’applique uniquement aux objets à contours adoucis placés directement sur le fond. 354 Chapitre 15 Suppression des halos Lorsque vous rendez transparente la couleur de fond d’une image ayant été anticrénelée, les pixels créés pour assurer l’anticrénelage restent en place. Lorsque vous exportez le graphisme et le placez sur une page Web ayant une couleur d’arrière-plan différente, les pixels qui sont à la périphérie de l’objet sur lequel a été effectué l’anticrénelage peuvent apparaître sur le fond de la page Web. Ce sont ces pixels qui forment un halo, qui se remarque particulièrement sur un arrière-plan sombre. Vous pouvez éviter l’apparition de halos dans les fichiers natifs PNG Fireworks et les fichiers importés depuis Photoshop. Toutefois, pour les fichiers exportés tels que les fichiers GIF, le halo peut être supprimé manuellement. Pour éviter l’apparition de halos dans les fichiers natifs PNG Fireworks et les fichiers importés depuis Photoshop, procédez de l’une des manières suivantes : • Choisissez une couleur de fond dans le Vérificateur de propriétés ou une couleur de matage dans le panneau Optimiser qui soit identique à celle de l’arrière-plan de la page Web cible. • Après avoir sélectionné l’objet à exporter, choisissez Net dans le menu contextuel Bord du Vérificateur de propriétés. Pour supprimer manuellement un halo d’une image GIF ou d’un fichier graphique exporté : 1 Ouvrez le fichier dans Fireworks, puis cliquez sur l’onglet Aperçu 2 en 1 ou 4 en 1. Dans l’onglet 2 en 1 ou 4 en 1, cliquez sur une autre fenêtre que celle de l’original. 2 Dans le panneau Optimiser, choisissez Transparence d’index dans le menu contextuel Transparence. 3 Cliquez sur le bouton Ajouter la couleur à la transparence, puis cliquez sur le un pixel dans le halo. Tous les pixels de couleur identique sont effacés dans la fenêtre Aperçu. 4 Si le halo subsiste, répétez l’étape 3 jusqu’à ce qu’il disparaisse. Enregistrement et réutilisation des paramètres d’optimisation Vous pouvez enregistrer vos paramètres d’optimisation personnels pour les réutiliser ultérieurement dans un processus d’optimisation ou de traitement par lots. Voici les paramètres personnels qui sont enregistrés : • Les paramètres et la table de couleur définis dans le panneau Optimiser • Paramètres de cadence des images du panneau Images (pour les animations uniquement) Optimisation et exportation 355 Pour enregistrer les paramètres d’optimisation comme paramètres prédéfinis : 1 Dans le panneau Optimiser, cliquez sur le bouton Enregistrer les paramètres actifs. 2 Indiquez le nom de l’optimisation prédéfinie, et cliquez sur OK. Le paramétrage d’optimisation enregistré apparaît dans la partie inférieure du menu contextuel Paramètres du panneau Optimiser et dans le Vérificateur de propriétés. Il sera disponible pour tous les documents ultérieurs. Le fichier de ces paramètres prédéfinis est enregistré dans le dossier Export Settings de votre disque dur. Remarque : L’emplacement exact de ce dossier varie en fonction du système d’exploitation. Pour plus d’informations, voir « Utilisation des fichiers de configuration » à la page 439. Pour le transmettre à un autre utilisateur de Fireworks : Copiez le fichier de paramétrage d’optimisation depuis le dossier Export Settings dans le dossier équivalent sur l’autre ordinateur. Pour supprimer une optimisation prédéfinie : 1 Dans le menu contextuel Paramètres du panneau Optimiser, choisissez le paramétrage d’optimisation à supprimer. 2 Dans le panneau Optimiser, cliquez sur le bouton Supprimer les paramètres enregistrés. Vous ne pouvez pas supprimer l’un des paramétrages prédéfinis de Fireworks. Exportation depuis Fireworks L’exportation Fireworks s’exécute en deux étapes : Vous préparez d’abord un graphisme ou un document pour l’exportation en choisissant des options d’optimisation. Une fois le graphisme ou le document optimisé, vous pouvez l’exporter. Pour plus d’informations sur l’optimisation, voir « Optimisation » à la page 333. Sous Fireworks, vous pouvez exporter des graphismes de différentes manières. Vous pouvez exporter un document sous forme de fichier simple au format GIF, JPEG ou dans un autre format de fichier. Vous pouvez également exporter l’ensemble du document sous la forme d’un fichier HTML et de plusieurs fichiers graphiques associés. Par ailleurs, vous pouvez choisir d’exporter uniquement les découpes sélectionnées. Vous pouvez également exporter uniquement une zone spécifique du document. En outre, vous pouvez exporter des images et des calques dans des fichiers d’image distincts. 356 Chapitre 15 Exportation d’une seule image Utilisez Fichier > Exporter pour exporter un graphisme après l’avoir optimisé à partir de l’espace de travail. Boite de dialogue Exporter Remarque : Pour exporter uniquement certaines images d’un document, vous devez d’abord découper votre document, puis exporter uniquement les découpes désirées. Pour plus d’informations, voir « Exportation des découpes sélectionnées » à la page 358. Pour exporter un document Fireworks sous la forme d’une image unique : 1 Choisissez Fichier > Exporter. 2 Indiquez l’emplacement vers lequel le fichier image sera exporté. Pour les graphismes du Web, le meilleur emplacement est généralement un dossier du site Web local. 3 Indiquez un nom de fichier. Vous pouvez ne pas indiquer une extension pour le nom de fichier ; Fireworks la fournit automatiquement à partir du type de fichier que vous avez spécifié dans les paramètres d’optimisation. Pour plus d’informations sur l’optimisation, voir « Optimisation » à la page 333. 4 Dans le menu contextuel Type, choisissez Images uniquement. 5 Cliquez sur Enregistrer. Optimisation et exportation 357 Exportation d’un document découpé Par défaut, lorsque vous exportez un document Fireworks découpé, il est exporté sous forme de fichier HTML et de plusieurs fichiers graphiques. Le fichiers HTML exporté peut être visualisé dans une navigateur Web ou importé dans d’autres applications pour être amélioré. Remarque : Vous pouvez utiliser plusieurs méthodes pour importer des fichiers Fireworks HTML dans d’autres applications. Pour plus de détails sur les fichiers HTML et les méthodes d’exportation de fichiers Fireworks HTML, voir « Exportation du fichier au format HTML » à la page 362. Avant d’exporter le fichier, assurez-vous que vous utilisez le style HTML approprié sélectionné dans la boîte de dialogue Configuration HTML. Pour plus d’informations, voir « Définition des options d’exportation du code HTML » à la page 369. Pour exporter un document Fireworks découpé : 1 Choisissez Fichier > Exporter. 2 Localisez le dossier désiré sur votre disque dur. 3 Dans le menu déroulant Type, choisissez HTML et images. 4 Indiquez un nom de fichier dans le champ Nom du fichier (Windows) ou Enregistrer sous (Macintosh). 5 Sélectionnez Exporter le fichier HTML dans le menu déroulant HTML. 6 Choisissez Exporter les découpes dans le menu contextuel Découpes. 7 (Facultatif ) Choisissez Placer les images dans des sous-dossiers. 8 Cliquez sur Enregistrer. Les fichiers Fireworks exportés apparaissent sur le disque dur. Des images et un fichier HTML sont créés dans l’emplacement spécifié dans la boîte de dialogue Exporter. Pour plus d’informations sur les options disponibles dans la boîte de dialogue Exporter lorsque HTML ou Images est sélectionné comme type de fichier, voir « Exportation de code généré par Fireworks » à la page 363. Exportation des découpes sélectionnées Vous pouvez exporter des découpes sélectionnées dans un document Fireworks. Cliquez en maintenant la touche Maj enfoncée pour sélectionner plusieurs découpes. Remarque : Pour plus de détails sur la découpe, voir « Création et modification d’une découpe » à la page 269. Pour exporter les découpes sélectionnées : 1 Utilisez l’une des méthodes suivantes : • Choisissez Fichier > Exporter. • Pour exporter une découpe sélectionnée, cliquez avec le bouton droit (Windows) ou maintenez la touche Contrôle enfoncée et cliquez (Macintosh), puis choisissez Exporter la découpe sélectionnée. 2 Choisissez ensuite un dossier de destination pour les fichiers exportés. En général, il est préférable de choisir un dossier figurant dans votre site Web local. 358 Chapitre 15 3 Indiquez un nom de fichier. Vous pouvez ne pas indiquer une extension pour le nom de fichier ; Fireworks la fournit automatiquement. Si vous exportez plusieurs découpes, Fireworks utilise le nom spécifié comme étant le nom racine de tous les graphismes exportés, à l’exception des graphismes auxquels vous avez affecté des noms personnalisés dans le panneau Calques ou dans le Vérificateur de propriétés. 4 Choisissez Exporter les découpes dans le menu contextuel Découpes. 5 Pour exporter uniquement les découpes sélectionnées avant l’exportation, choisissez Découpes sélectionnées uniquement, puis vérifiez que l’option Inclure les zones sans découpes est désactivée. 6 Cliquez sur Enregistrer. Les découpes sont exportées en utilisant des paramètres d’optimisation qui leur sont propres et tels que définis à partir du panneau Optimiser. Pour plus d’informations sur l’optimisation, voir « Optimisation » à la page 333. Mise à jour d’une découpe Si vous avez déjà exporté un document découpé et avez modifié le document original Fireworks apès l’avoir exporté, vous pouvez mettre à jour l’image ou la découpe modifiée uniquement, sans devoir exporter et mettre à jour l’ensemble de l’image. Il est recommandé d’utiliser des noms de découpe personnalisés afin de pouvoir aisément trouver la découpe de remplacement. Pour plus d’informations, voir « Affectation de nom aux découpes » à la page 286. Pour mettre à jour une seule découpe : 1 Masquez la découpe pour modifier la zone qu’elle recouvre. 2 Affichez ensuite la découpe, et sélectionnez-la. 3 Choisissez Fichier > Exporter. 4 Choisissez Découpes sélectionnées uniquement. 5 Cliquez sur Enregistrer pour exporter la découpe dans le même dossier que la découpe originale, en utilisant le même nom de base. 6 Cliquez sur OK lorsque le programme vous demande si vous voulez remplacer le fichier existant. Si vous reprenez le nom de fichier original pour la nouvelle version et téléchargez cette nouvelle découpe au même emplacement de votre site Web que pour l’original, la nouvelle découpe remplace l’ancienne dans le document HTML. Remarque : Sous Fireworks, évitez de redimensionner la découpe au-delà de sa taille d’exportation d’origine car vous risquez d’obtenir des résultats imprévisibles dans le document HTML après la mise à jour de la découpe. Exportation d’une animation Lorsque vous avez créé et optimisé une animation, elle est prête à être exportée. Vous pouvez exporter une animation dans les formats GIF animé ou Flash SWF ou sous forme de plusieurs fichiers distincts. Si votre document comporte plusieurs animations, vous pouvez insérer des découpes par dessus chaque animation en utilisant différents paramètres d’animation tels que la lecture ne boucle et la cadence d’images. Optimisation et exportation 359 Pour plus d’informations sur l’exportation d’animations sous forme de fichiers Flash SWF, voir « Utilisation de Macromedia Flash MX » à la page 388. Pour plus d’informations sur l’exportation d’animations vers plusieurs fichiers, voir « Exportation des images ou calques » à la page 360. Pour exporter une animation en fichier GIF animé : 1 Choisissez Edition > Aucune sélection pour désélectionner tous les objets et découpes, puis, dans le panneau Optimiser, choisissez le format de fichier GIF animé. Pour plus d’informations sur l’optimisation, voir « Optimisation des images GIF, PNG, TIFF, BMP et PICT » à la page 342. 2 Choisissez Fichier > Exporter. 3 Dans la boîte de dialogue d’exportation, tapez un nom pour le fichier, puis choisissez le dossier de destination. 4 Cliquez sur Enregistrer. Pour exporter sous forme de fichiers GIF animé plusieurs animations ayant des paramètres d’animation distincts : 1 Maintenez enfoncée la touche Maj et cliquez pour sélectionner toutes les animations. 2 Choisissez Edition > Insérer > Découpe. Un message vous demande si vous souhaitez insérer une ou plusieurs découpes. 3 Cliquez sur Multiple. 4 Sélectionnez chaque découpe individuellement, puis dans le panneau Images, définissez les paramètres d’animation de chaque découpe. Pour plus d’informations sur les paramètres d’animations, voir Chapitre 14, « Création d’animations », à la page 317. 5 Choisissez Edition > Aucune sélection pour désélectionner tous les objets et découpes, puis, dans le panneau Optimiser, choisissez le format de fichier GIF animé. Pour plus d’informations sur l’optimisation, voir « Optimisation des images GIF, PNG, TIFF, BMP et PICT » à la page 342. 6 Cliquez sur le bouton droit (Windows) ou maintenez enfoncée la touche Contrôle (Macintosh) et cliquez sur chaque découpe ; dans le menu contextuel, choisissez ensuite Exporter la découpe sélectionnée pour exporter individuellement chaque découpe. A partir de la boîte de dialogue Exporter, tapez un nom pour chaque fichier, sélectionnez une destination, puis cliquez sur Enregistrer. Exportation des images ou calques Fireworks permet d’exporter les calques et les images dans des fichiers distincts en tenant compte des paramètres d’optimisation spécifiés dans le panneau Optimiser. Le nom du calque ou de l’image détermine le nom du fichier exporté correspondant. Cette méthode d’exportation est souvent utilisée pour exporter des animations. Pour exporter les images ou les calques dans des fichiers distincts : 1 Choisissez Fichier > Exporter. 2 Tapez un nom de fichier et choisisssez un dossier de destination. 3 Dans le menu déroulant Type, choisissez l’une des options suivantes : 360 Chapitre 15 • Pour exporter les images dans des fichiers distincts, choisissez Images vers fichiers. • Pour exporter les calques dans des fichiers distincts, choisissez Calques vers fichiers. Remarque : Cette option exporte l’ensemble des calques de l’image active. 4 Choisissez Rogner les images pour recadrer automatiquement les images exportées en fonction des objets qu’elles contiennent. Lorsque vous devez exporter des images ou des calques dont la taille est identique à celle du document, désactivez Rogner les images. 5 Cliquez sur Enregistrer. Exportation d’une zone L’outil Exporter zone sert à exporter une partie d’un document Fireworks. Pour exporter une partie d’un document : 1 A partir du panneau Outils, choisissez l’outil Exporter zone. 2 Cliquez et faites glisser pour tracer un cadre de sélection autour de la partie à exporter. Remarque : Vous pouvez ajuster la position d’un cadre de sélection à mesure que vous le dessinez. Tout en maintenant enfoncé le bouton de la souris, appuyez simplement et maintenez enfoncée la barre d’espacement du clavier, puis faites glisser le cadre de sélection vers un autre emplacement du document. Relâchez la barre d’espacement pour continuer à dessiner le cadre de sélection. Lorsque vous relâchez le bouton de la souris, la zone d’exportation reste sélectionnée. 3 Au besoin, redimensionnez la zone d’exportation : • Pour redimensionner le cadre de sélection de la zone d’exportation tout en conservant les proportions, appuyez et maintenez enfoncée la touche Maj tout en faisant glisser la poignée de redimensionnement. • Pour redimensionner le cadre de sélection à partir du centre, maintenez la touche Alt (Windows) ou Options (Macintosh) enfoncée pendant l’opération. • Maintenez enfoncées les touches Alt+Maj (Windows) ou Option+Maj (Macintosh) et faites glisser une poignée pour maintenir les proportions et dessiner à partir du centre du cadre de sélection. 4 Double-cliquez à l’intérieur du cadre de sélection de la zone à exporter pour activer l’ Aperçu avant exportation. 5 Définissez les paramètres d’exportation à partir de la boîte de dialogue Aperçu avant exportation, puis cliquez sur Exporter. 6 A partir de la boîte de dialogue Exporter, tapez un nom de fichier et choisissez un dossier de destination. 7 A partir du menu déroulant Enregistrer sous, choisissez Images uniquement. 8 Cliquez sur Enregistrer. Remarque : Pour annuler l’exportation, double-cliquez à l’extérieur du cadre de sélection, appuyez sur la touche Echap ou choisissez un autre outil. Optimisation et exportation 361 Exportation du fichier au format HTML Sauf indication contraire, lorsque vous exportez un document Fireworks découpé, il est exporté sous forme de fichier HTML et de plusieurs fichiers graphiques. Fireworks génère un véritable fichier HTML qui peut être lu dans la plupart des navigateurs Web et éditeurs de code HTML. Il existe plus façons d’exporter un document Fireworks en fichier HTML : • Exportez un fichier HTML que vous pouvez ouvrir plus tard pour le modifier dans un éditeur de code HTML. • Copier le code HTML dans le Presse-papiers de Fireworks, puis coller directement ce code dans un document HTML existant. • Exporter un fichier HTML, l’ouvrir dans un éditeur de code HTML, sélectionner manuellement des parties du code dans le fichier, puis coller ces parties dans un autre document HTML. • Utiliser la commande Mettre à jour le code HTML pour modifier un fichier HTML créé précédemment. Remarque : Les applications Macromedia Dreamweaver et Microsoft FrontPage sont étroitement intégrées à Fireworks. Fireworks gère les exportations de code HTML vers ces applications de manière différente des autres éditeurs de code HTML. Si vous exportez un code HTML généré par Fireworks vers l’une de ces applications, voir Chapitre 16, « Utilisation de Fireworks avec d’autres applications », à la page 373. Vous pouvez aussi exporter des fichiers HTML sous forme de calques CSS (Cascading Style Sheet). Fireworks prend en charge les codes UTF-8 et XHTML, ce qui permet également d’exporter des documents dans ces codes standard. Utilisez la boîte de dialogue Configuration HTML pour définir les paramètres d’exportation de code HTML. Ces paramètres peuvent se limiter au document ou servir de paramètres par défaut pour toutes les exportations de code HTML. Code HTML Fireworks génère automatiquement le code HTML lorsque vous exportez, copiez ou mettez à jour fichier HTML. Vous n’avez pas besoin de le comprendre pour l’utiliser. Une fois ce code généré, il n’est pas nécessaire de le modifier pour l’utiliser, tant que vous ne renommez pas ou ne déplacez pas les fichiers. HTML est l’abréviation de HyperText Markup Language et représente actuellement le langage standard pour la création et l’affichage de pages Web sur Internet. Un fichier HTML est un fichier texte contenant les éléments suivants : • Le texte qui doit apparaître sur la page Web. • Les balises HTML qui définissent la mise en page et la structure de ce texte et de la totalité du document, ainsi que les liens vers des images et d’autres documents HTML (pages Web). Les balises HTML sont incluses entre des signes « inférieur à » et « supérieur à », ce qui leur donne l’aspect suivant : <TAG> texte concerné </TAG> La balise d’ouverture peut, par exemple, indiquer au navigateur que le texte doit être mis en forme d’une certaine manière, ou qu’une image doit être insérée. La balise de fermeture (</TAG>), lorsqu’elle existe, indique la fin de cette instruction. 362 Chapitre 15 Insertion de commentaires dans un code HTML Le code HTML généré par Fireworks est abondamment commenté, et vous indique la fonction de chaque portion de code. En HTML, tout commentaire de code commence par le marqueur <!-- et se termine par le marqueur -->. Le texte qui figure entre ces deux marqueurs n’est pas interprété comme du code HTML ou JavaScript. Si vous désirez insérer des commentaires dans un code HTML, vous devez indiquer à Fireworks d’activer cette option. Pour inclure des commentaires dans un code HTML exporté : Avant l’exportation, ouvrez la boîte de dialogue Configuration HTML et activez l’option Inclure les commentaires HTML dans la fenêtre de l’onglet Générales. Résultats de l’exportation Lorsque vous exportez ou copiez un code HTML depuis Fireworks, le code ci-dessous est généré afin que votre image Fireworks puisse être reconstituée sur une page Web : • Le code HTML nécessaire pour rassembler les images découpées et un code JavaScript, si le document contient des éléments interactifs. Le code HTML généré par Fireworks contient des liens vers les images exportées et utilise la couleur du document pour le fond de la page Web. • Il génère un ou plusieurs fichiers d’image, en fonction du nombre de découpes figurant dans votre document et du nombre d’états de boutons. • Si nécessaire, il génère un fichier de séparateurs appelé Spacer.gif, qui est un fichier GIF transparent, d’1- pixel carré que Fireworks utilise pour corriger les problèmes d’espacement lorsque les images découpées sont assemblées de nouveau dans une table HTML. La création de ce fichier d’espacement est facultative. Pour plus d’informations, voir « Définition des options d’exportation du code HTML » à la page 369. • Si votre document contient plusieurs menus contextuels, Fireworks crée un fichier mm_menu.js contenant le code utilisé pour l’affichage des menus contextuels. • Lorsque vous exportez ou copiez un code HTML dans Macromedia Dreamweaver, des fichiers de commentaires sont créés pour permettre une étroite intégration entre Fireworks et Dreamweaver. Exportation de code généré par Fireworks Fireworks permet d’exporter le code HTML dans les formats suivants : Générique, Dreamweaver, FrontPage, et Adobe® GoLive®. Le format Générique est utilisé dans la plupart des éditeurs de code HTML. L’exportation de code HTML généré par Fireworks crée un fichier HTML et des fichiers d’image à l’emplacement que vous avez spécifié. Remarque : Fireworks exporte également le code HTML lorsque vous exportez un document dans Macromedia Director et dans des calques CSS. Pour plus d’informations, voir « Utilisation de Macromedia Director » à la page 397 et « Exportation de calques CSS » à la page 368. La méthode d’exportation permettant de récupérer dans d’autres applications un code HTML généré par Fireworks est une méthode idéale pour le travail en équipe. L’exportation d’un fichier HTML fractionne la charge de travail, ce qui permet à une personne d’exécuter une tâche donnée dans une application, puis à une autre de prendre la suite plus tard et de travailler dans une autre application. Optimisation et exportation 363 Vous pouvez définir des préférences globales pour l’exportation de code HTML dans la boîte de dialogue HTML. Pour plus d’informations, voir « Définition des options d’exportation du code HTML » à la page 369. Remarque : Les applications Macromedia Dreamweaver et Microsoft FrontPage sont étroitement intégrées à Fireworks. Fireworks gère les exportations de code HTML vers ces applications de manière différente des autres éditeurs de code HTML. Si vous exportez un code HTML généré par Fireworks vers l’une de ces applications, suivez les instructions ci-dessous, mais lisez également Chapitre 16, « Utilisation de Fireworks avec d’autres applications », à la page 373. Pour exporter un code HTML généré par Fireworks : 1 A partir de la boîte de dialogue Exporter, procédez de l’une des manières suivantes : • Choisissez Fichier > Exporter. • Cliquez sur le bouton Exportation rapide, dans l’angle inférieur droit de la fenêtre du document, puis choisissez une option d’exportation dans le menu déroulant de l’application de destination. Fireworks renseigne automatiquement les champs de la boîte de dialogue Exporter en y faisant figurer les paramètres appropriés à l’application sélectionnée. Remarque : Les applications autres que Macromedia sont accessibles à partir du sous-menu Exportation rapide > Autres. 2 Localisez le dossier désiré sur votre disque dur. 3 Dans le menu déroulant Type, choisissez HTML et images. 4 Dans la boîte de dialogue Configuration HTML, cliquez sur le bouton Options, puis choisissez un éditeur de code HTML dans le menu contextuel Style HTML de l’onglet Générales. Si votre éditeur de code HTML n’est pas répertorié, choisissez Générique. Remarque : Il est important de choisir l’option Style de code HTML comme éditeur de code HTML, car si vous choisissez une autre option, les éléments interactifs tels que les boutons et les survols ne fonctionneront pas correctement lorsque vous les importerez dans votre éditeur HTML. 5 Cliquez sur OK pour revenir à la boîte de dialogue Exporter. 6 Indiquez un nom de fichier dans le champ Nom du fichier (Windows) ou Enregistrer sous (Macintosh). 7 Sélectionnez Exporter le fichier HTML dans le menu déroulant HTML. L’option Exporter le fichier HTML génère un fichier HTML et les fichiers d’image associées dans l’emplacement que vous avez spécifié. 8 Si votre document contient des découpes, choisissez Exporter les découpes dans le menu contextuel Découpes. 9 Sélectionnez Placer les images dans le sous-dossier si vous souhaitez stocker les images dans des dossiers distincts. Vous pouvez choisir un dossier spécifique ou utiliser le dossier Fireworks par défaut, Images. 10 Cliquez sur Enregistrer. Une fois exportés, les fichiers Fireworks apparaissent sur votre disque dur. Des images et un fichier HTML sont créés dans l’emplacement spécifié dans la boîte de dialogue Exporter. Copie d’un code HTML dans le Presse-papiers Il est possible d’exporter très rapidement un code HTML généré par Fireworks en le copiant dans le Presse-papiers. 364 Chapitre 15 La copie du code HTML dans Fireworks peut être réalisée de deux manières. Vous pouvez utiliser la commande Copier le code HTML ou, dans la boîte de dialogue Exporter, sélectionner l’option Copier dans le Presse-papiers. Cette option copie le code HTML dans le Presse-papiers et génère des fichiers d’image à l’emplacement que vous avez spécifié. Vous pouvez ensuite coller ce code dans un document ouvert dans votre éditeur de code HTML. Bien que la copie dans le Presse-papiers soit la méthode la plus rapide pour copier un code HTLM dans une autre application, elle n’est pas idéale dans toutes les situations. La copie de code HTML dans le Presse-papiers présente les inconvénients suivants : • Vous ne pouvez pas enregistrer des images dans un sous-dossier. Les images doivent se trouver dans le même dossier que le fichier HTML dans lequel vous avez collé le code HTML copié, sauf si vous copiez un code HTML dans Macromedia Dreamweaver. • Les liens ou trajets utilisés dans les menus contextuels Fireworks sont mappés au lecteur de disque dur, sauf si vous copiez un code HTML dans Dreamweaver. • Si vous utilisez un éditeur de code HTML autre que Dreamweaver ou Microsoft FrontPage, le code JavaScript associé aux graphismes des boutons, comportements et survols est copié, mais ne fonctionne pas correctement. Si vous rencontrez ce problème, sélectionnez l’option Exporter le fichier HTML à la place de l’option de copie du code HTML dans le Presse-papiers. Remarque : Avant de copier le code HTML, assurez-vous que vous avez choisi le style HTML approprié et activé l’option Inclure les commentaires HTML dans l’onglet Générales de la boîte de dialogue Configuration HTML. Pour plus d’informations, voir « Définition des options d’exportation du code HTML » à la page 369. Pour copier un code HTML à partir de l’option Copier le code HTML : 1 Utilisez l’une des méthodes suivantes : • Choisissez Edition > Copier le code HTML. • Cliquez sur le bouton Exportation rapide, puis choisissez Copier le code HTML dans le menu contextuel. 2 Un Assistant vous guide dans le paramétrage de l’exportation du code HTML et des images. Lorsque cela vous est demandé, indiquez un dossier comme chemin de destination des images exportées. Ce dossier doit être celui dans lequel se trouve le fichier HTML. Remarque : Si vous collez le code HTML dans Macromedia Dreamweaver, peu importe le dosssier dans lequel vous exportez les images, pourvu qu’il se trouve sur le même site Dreamweaver que le fichier HTML dans lequel vous allez coller le code. L’Assistant exporte les images dans le dossier indiqué, et copie le code HTML dans le Pressepapiers. Pour copier le code HTML à partir de la boîte de dialogue Exporter : 1 Choisissez Fichier > Exporter. Remarque : Si vous exportez le code dans Dreamweaver, vous pouvez aussi cliquer sur le bouton Exportation rapide, puis choisir l’option Copier le code HTML dans le Presse-papiers à partir du sous-menu Dreamweaver. 2 Dans la boîte de dialogue d’exportation, indiquez un dossier comme destination des images exportées. Ce dossier doit être celui dans lequel se trouve le fichier HTML. Remarque : Si vous collez le code HTML dans Macromedia Dreamweaver, peu importe le dosssier dans lequel vous exportez les images, pourvu qu’il se trouve sur le même site Dreamweaver que le fichier HTML dans lequel vous allez coller le code. Optimisation et exportation 365 3 Dans le menu déroulant Type, choisissez HTML et images. 4 Choisissez Copier dans le Presse-papiers dans le menu déroulant HTML. 5 Si votre document contient des découpes, choisissez Exporter les découpes dans le menu contextuel Découpes. 6 Dans la boîte de dialogue Configuration HTML, cliquez sur le bouton Options, choisissez un éditeur de code HTML, puis cliquez sur OK. 7 A partir de la boîte de dialogue Exporter, cliquez sur Enregistrer. Pour coller dans un document HTML un code HTML copié depuis Fireworks : 1 Dans l’éditeur HTML, ouvrez un document HTML existant ou créez-en un nouveau. Enregistrez le document dans le même dossier que celui des images exportées. Remarque : Si vous utilisez Macromedia Dreamweaver, vous n’êtes pas tenu d’enregistrer le fichier HTML dans le même dossier que celui des images exportées. Dès lors que vous exportez des images de Fireworks vers un site Dreamweaver et enregistrez le fichier HTML dans un dossier se trouvant sur ce site, Dreamweaver indique automatiquement les chemins vers les images associées. 2 Affichez le code HTML et placez le point d’insertion à l’emplacement désiré, entre les balises <BODY>. Remarque : Le code HTML copié depuis Fireworks ne contient pas les balises d’ouverture et de fermeture <HTML> et <BODY>. 3 Collez le code HTML. Reportez-vous aux informations d’aide de votre éditeur HTML pour savoir comment coller le contenu du Presse-papiers. Lorsque vous collez un code dans un éditeur HTML, il est important de conserver à l’emplacement exact les fichiers des images et les fichiers du code HTML pour ne pas rompre les liens. Si possible, lorsque vous effectuez une copie dans le Presse-papiers, assurez-vous que les images sont exportées à leur emplacement final sur le site Web. Comme Fireworks utilise des adresses URL relatives aux documents, les liens seront rompus si les fichiers HTML ou des images sont déplacés. Copie et collage d’un code HTML à partir d’un fichier Fireworks Vous pouvez ouvrir dans un éditeur de code HTML un code HTML généré par Fireworks et copier/coller des parties du code dans un autre fichier HTML. Pour copier un code depuis un fichier Fireworks exporté et le coller dans un autre document HTML : 1 Dans l’éditeur de code HTML, ouvrez le fichier HTML Fireworks que vous avez exporté. 2 Sélectionnez le code désiré et copiez-le dans le Presse-papiers. 3 Ouvrez un document HTML existant ou créez-en un nouveau. 4 Collez le code contenu dans le Presse-papiers à l’emplacement désiré dans le nouveau fichier HTML. Il n’est pas nécessaire de copier les balises <HTML> et <BODY> qui doivent déjà figurer dans le document HTML de destination. Si vous avez activé l’option Inclure les commentaires HTML dans la boîte de dialogue Configuration HTML de Fireworks, suivez les instructions fournies dans les commentaires pour copier/coller le code à l’emplacement approprié. 366 Chapitre 15 5 Si le document Fireworks contient des éléments interactifs, vous devez également copier le code JavaScript. Le code JavaScript est entouré de balises <SCRIPT> et se trouve dans la section <HEAD> du document. Copiez et collez l’intégralité de la section <SCRIPT>, à moins que cette section figure déjà dans votre document de destinationSi c’est le cas, vous ne devez copier et coller que le contenu de la section <SCRIPT> dans la section <SCRIPT> existante en veillant à ne pas écraser le contenu de cette dernière. Après avoir collé le code, vérifiez également qu’il n’existe pas de fonctions JavaScript en double dans la section <SCRIPT>. Mise à jour d’un code HTML exporté La commande Mettre à jour le code HTML permet de modifier un document HTML déjà exporté. Cette fonctionn est utile lorsque vous ne souhaitez mettre à jour qu’une partie d’un document. Remarque : La mise à jour du code HTML ne s’effectue pas de la même manière dans les documents Macromedia Dreamweaver et les autres documents HTML. Pour plus d’informations, voir « Utilisation de Macromedia Dreamweaver MX » à la page 373. Pour mettre à jour un code HTML généré par Fireworks, vous pouvez choisir de remplacer uniquement les images modifiées ou l’intégralité du code et des images. Si vous choisissez de ne remplacer que les images modifiées, toutes les modifications appportées au fichier HTML en dehors de Fireworks seront préservées. Remarque : Si vous souhaitez apporter d’importantes modifications à la présentation du document, effecutez les modifications dans Fireworks, puis réexportez le fichier HTML. Pour mettre à jour le code HTML à partir de la commande Mettre à jour le code HTML : 1 Utilisez l’une des méthodes suivantes : • Choisissez Fichier > Mettre à jour le code HTML. • Cliquez sur le bouton Exportation rapide, puis choisissez Mettre à jour le code HTML dans le menu contextuel. 2 Sélectionnez le fichier à mettre jour à partir de la boîte de dialogue Rechercher fichier HTML. 3 Cliquez sur Ouvrir. 4 Si aucun code HTML généré par Fireworks n’est détecté, cliquez sur OK pour insérer le nouveau code HTML à la fin du document. 5 Par contre, si du code HTML généré par Fireworks est détecté, choisissez l’une des options cidessous et cliquez sur OK. Remplacer les images et leur code HTML remplace Mettre à jour les images uniquement écrase 6 le code HTML Fireworks précédent. uniquement les images. Lorsque la boîte de dialogue Sélectionnez le dossier Images s’affiche, choisissez un dossier et cliquez sur Ouvrir. Optimisation et exportation 367 Exportation de calques CSS Les calques de type CSS (Cascading Style Sheets) permettent mieux contrôler l’affichage des pages Web. Vous pouvez ainsi créer des feuilles de style ou modèles qui définissent la façon dont différents éléments, tels que les en-têtes et les liens apparaissent. Avec les calques CSS, vous pouvez définir en une seule opération le style et la présentation de plusieurs pages Web. Les calques CSS peuvent se chevaucher et être empilés les uns au-dessus des autres. Sous Fireworks, les sorties en code HTML normal ne se chevauchent pas. Pour exporter un graphisme dans un calque CSS : 1 Choisissez Fichier > Exporter. 2 A partir de la boîte de dialogue Exporter, tapez un nom de fichier et choisissez un dossier de destination. 3 Choisissez Calques CSS à partir du menu déroulant Enregistrer sous. 4 A partir du menu déroulant Source, choisissez l’une des options suivantes : • Calques Fireworks exporte tous les calques en tant que calques CSS. • Images Fireworks exporte tous les images en tant que calques CSS. • Découpes Fireworks exporte les découpes du document en tant que calques CSS. 5 Sélectionnez Rogner les images pour recadrer automatiquement les images exportée et les calques pour accommoder les objets. 6 Sélectionnez Placer les images dans le sous-dossier pour choisir le dossier devant recevoir les images. 7 Cliquez sur Enregistrer. Exportation d’un fichier XHTML Dans un proche avenir, le langage XHTML est appelé à remplacer le langage HTML comme langage standard pour l’affichage de contenu Web. Non seulement le code XHTML garantit une compatibilité descendante — ce qui signifie qu’il peut être affiché dans la plupart des navigateurs Web, mais il peut être également lu par tous les périphériques affichant un contenu XML tels que les assistants numériques personnels, les téléphones mobiles et autres périphériques portables. Le langage XHTML est une combinaison du langage HTML, le standard actuel pour la création et l’affichage de pages Web, et du langage XML (eXtensible Markup Language). XHTML contient les éléments du langage HTML tout en adpotant les règles de syntaxe plus strictes du langage XML. Pour prendre en charge ce nouveau standard, Fireworks permet d’exporter des fichiers XHTML. Remarque : Fireworks peut également importer des fichiers XHTML. Pour plus d’informations, voir « Création de fichiers PNG dans Fireworks à partir de fichiers HTML » à la page 80. Pour plus d’informations sur le langage XHTML, consultez les spécifications XHTML du W3C (Web World Wide Web Consortium ) sur le site http://www.w3.org. Pour exporter un fichier XHTML depuis Fireworks : 1 Choisissez Fichier > Configuration HTML, sélectionnez un Style XHTML dans le menu contextuel Style HTML de l’onglet Générales, puis cliquez sur OK. 368 Chapitre 15 2 Exportez le document en utilisant l’une des méthodes d’exportation ou de copie de document HTML disponibles. Pour plus d’informations sur les différentes manières d’exporter et de copier un document HTML depuis Fireworks, voir « Exportation du fichier au format HTML » à la page 362. Remarque : Fireworks utilise le codage UTF-8 lorsque vous exportez un document XHTML. Pour plus d’informations sur le codage UTF-8, voir « Exportation de fichiers avec le codage UTF-8 » à la page 369. Exportation de fichiers avec le codage UTF-8 Auparavant, les navigateurs Web ne pouvaient pas afficher des jeux de caractères distincts dans un même document HTML. Par exemple, il n’était pas possible d’afficher sur une même page Web des textes chinois et anglais, car les navigateurs Web ne pouvaient pas afficher des jeux de caractères différents dans un même document. Le UTF-8, acronyme de Universal Character Set Transformation Format-8, est une technique de codage de texte qui permet aux navigateurs Web d’afficher différents jeux de caractères nationaux sur une même page HTML. Fireworks permet d’exporter un document HTML avec le codage UTF-8. Remarque : Fireworks peut également importer des documents utilisant le codage UTF-8. Pour plus d’informations, voir « Création de fichiers PNG dans Fireworks à partir de fichiers HTML » à la page 80. Pour exporter des documents utilisant le codage UTF-8 : 1 Choisissez Fichier > Configuration HTML, sélectionnez Utiliser le codage UTF-8 dans l’onglet Propre au document, puis cliquez sur OK. Remarque : Pour plus d’informations sur les options de configuration HTML, voir « Définition des options d’exportation du code HTML » à la page 369. 2 Exportez le document en utilisant l’une des méthodes d’exportation ou de copie de document HTML disponibles. Pour plus d’informations sur les différentes manières d’exporter et de copier un document HTML depuis Fireworks, voir « Exportation du fichier au format HTML » à la page 362. Définition des options d’exportation du code HTML La boîte de dialogue Configuration HTML permet de définir le mode d’exportation du code HTML à partir de Fireworks. Ces paramètres peuvent se limiter au document ou servir de paramètres par défaut pour toutes les exportations de code HTML. Les modifications effectuées dans l’onglet Propre au document affectent uniquement le document actif. Cependant, vous pouvez utiliser ces paramètres comme paramètres par défaut pour tous les nouveaux documents, si vous cliquez sur le bouton Paramètres par défaut avant de refermer la boîte de dialogue Configuration HTML. Les paramètres Générales et Table sont des préférences globales et affectent tous les nouveaux documents. Pour spécifier le mode d’exportation du code HTML à partir de Fireworks : 1 Choisissez Fichier > Configuration HTML, ou cliquez sur le bouton Options dans la boîte de dialogue Exporter. 2 A partir de l’onglet Générales, choisissez l’une des options suivantes : Optimisation et exportation 369 • Choisissez l’une des options de Style HTML. Ces options s’appliquent au code HTML exporté. Le format Générique est utilisé dans tous les éditeurs de code HTML. Cependant, si le document contient des comportements ou des contenus interactifs, choisissez un éditeur spécifique s’il est répertorié dans la liste. Fireworks exporte différemment les éléments interactifs en fonction de l’option de style HTML sélectionnée. Pour exporter un document en appliquant le code standard XHTML, choisissez le style XHTML approprié à partir du menu contextuel. Pour plus d’informations sur le code XHTML, voir « Exportation d’un fichier XHTML » à la page 368. • Choisissez un nom d’extension de fichier à partir du menu déroulant Extension ou tapez l’extension de votre choix. • Sélectionnez Inclure les commentaires HTML pour inclure des commentaires sur les endroits où vous souhaitez couper et coller dans le code HTML. Il est recommandé d’utiliser cette option si le document contient des éléments interactifs tels que des graphismes de bouton, de comportement ou de survol. Les commentaires HTML permettent d’identifier les parties du code à copier et à coller. • Sélectionnez Nom de fichier en minuscules pour vous assurer que le nom du fichier HTML et des fichiers d’image sont écrits en minuscules lors de l’exportation. Remarque : Notez que l’extension du nom du fichier HTML ne s’affichera pas en minuscule si elle a été sélectionnée en majuscule dans le menu contextuel Extension. • Choisissez une application associée à partir du menu déroulant correspondant (Macintosh). Lorsque vous double-cliquez sur le fichier HTML exporté sur le disque dur, ce dernier est ouvert avec l’application spécifiée. 3 A partir de l’onglet Table, choisissez les paramètres requis pour vos tables HTML. Pour plus d’informations sur la définition des propriétés des tables HTML Firewroks exportées, voir « Définition du mode d’exportation des tables HTML » à la page 288. 4 A partir de l’onglet Propre au document, choisissez l’une des options suivantes : • Choisissez l’une des formules permettant de nommer automatiquement les découpes à partir des menus déroulants correspondants. Vous pouvez utiliser les options par défaut ou choisir vos propres options. Remarque : Soyez prudent lorsque vous choisissez Aucun comme option pour la convention de nom des découpes. Si vous choisissez cette option pour l’un des trois premiers menus, Fireworks exportera des fichiers de découpe qui s’écraseront successivement. Vous obtiendrez en définitive qu’un seul graphisme exporté et un tableau affichant ce graphisme dans chaque cellule. • Tapez un texte dans la zone Description de l’image. Ce texte descriptif apparaît à la place de toutes les images pendant le téléchargement à partir du Web et à la place d’un graphisme ne pouvant pas être téléchargé. Dans certains navigateurs, ce texte peut être également affiché sous forme d’info-bulle lorsque le curseur de la souris passe au-dessus de l’image. Cette fonction est également utilisée pour les utilisateurs malvoyants. • Sélectionnez Pages HTML avec barres de navigation multiples lorsque vous exportez une barre de navigation qui lie plusieurs pages ensemble. Lorsque vous choisissez cette option, Fireworks exporte des pages supplémentaires pour chaque bouton de la barre de navigation. • Choisissez l’option de codage UTF-8, si le document affiche des caractères provenant de plusieurs jeux de caractères nationaux. Pour plus d’informations sur le codage UTF-8, voir « Exportation de fichiers avec le codage UTF-8 » à la page 369. 370 Chapitre 15 5 Cliquez sur Paramètres par défaut pour enregistrer ces paramètres en tant que paramètres par défaut globaux. 6 Cliquez sur OK. Utilisation du bouton Exportation rapide Le bouton Exportation rapide, situé dans l’angle inférieur droit de la fenêtre du document, permet d’accéder aisément aux options le plus couramment utilisées pour exporter des fichiers depuis Fireworks vers d’autres applications. Il permet d’exporter des fichiers sous différents formats, notamment vers les applications Macromedia et d’autres applications telles que Microsoft FrontPage et Adobe ® GoLive®. Toutes les options d’exportation disponibles à partir du bouton Exportation rapide sont également accessibles dans Fireworks, notamment à partir de la boîte de dialogue Exporter et du menu Edition. Ce bouton offre un raccourci aux options d’exportation les plus courantes. Pour plus d’informations sur l’exportation de fichiers sous les différents formats, voir « Utilisation de Fireworks avec d’autres applications » à la page 373. Pour la plupart des formats, il existe plusieurs méthodes d’exportation. Vous pouvez exporter un fichier HTML Dreamweaver, par exemple, ou mettre à jour un fichier HTML Dreamweaver existant. Vous pouvez également copier le fichier HTML Dreamweaver dans le Presse-papiers. Vous pouvez exporter un fichier Flash SWF ou copier les objets sélectionnés sous forme d’objets vectoriels. Vous pouvez même utiliser le bouton Exportation rapide pour démarrer d’autres applications ou prévisualiser un document Fireworks dans un navigateur spécifique. En simplifiant le procédure d’exportation, le bouton Exportation rapide permet de gagner du temps et d’améliorer le processus de conception. Remarque : Le bouton Exporation rapide permet d’exporter des graphisme et des découpes à partir des paramètres spécifiés dans le panneau Optimiser. Vous devez donc vous assurer que vos graphismes ont été optimisés avant de les exporter à l’aide du bouton Exportation rapide. Pour plus d’informations sur l’optimisation, voir « Optimisation » à la page 333. Pour exporter un document Fireworks ou un graphisme à partir du bouton Exportation rapide : 1 Cliquez sur le bouton Exportation rapide, puis choisissez une option d’exportation dans le menu déroulant qui est affiché. Les options appropriées sont automatiquement définies dans la boîte de dialogue Exporter. Au besoin, modifiez ces options. Optimisation et exportation 371 2 Choisissez un emplacement pour stocker les fichiers exportés, tapez un nom de fichier, puis cliquez sur Enregistrer. Pour démarrer une autre application Macromedia à l’aide du bouton Exportation rapide : Cliquez sur le bouton d’exportation rapide, puis choisissez l’option Launcer dans le sous-menu de l’application. Personnalisation du menu contextuel Exportation rapide Vous pouvez ajouter des options au menu contextuel Exportation rapide si vous maîtrisez bien le langage JavaScript et XML. Pour ajouter des options au menu contextuel Exportation rapide : 1 Créez des fichiers JSF et déposez-les dans le dossier Quick Export Menu sur votre disque dur. Remarque : L’emplacement exact de ce dossier varie en fonction du système d’exploitation. Pour plus d’informations, voir « Utilisation des fichiers de configuration » à la page 439. 2 Modifiez le fichier Quick Export Menu.xml en incluant des références dans les nouveaux fichiers JSF. Au prochain démarrage de Fireworks, les nouvelles options créées sont ajoutées au menu contextuel Exportation rapide. Pour plus d’informations, voir Extending Fireworks MX, disponible sous forme de fichier PDF sur le CD d’installation de Macromedia Fireworks MX. 372 Chapitre 15 CHAPITRE 16 Utilisation de Fireworks avec d’autres applications Qu’il s’agisse de créer un contenu Web ou multimédia, Macromedia Fireworks est un élément essentiel de la boîte à outils du concepteur. Fireworks fonctionne parfaitement avec d’autres applications et offre une multitude de fonctions d’intégration qui rationalisent la procédure de conception. Vous pouvez exporter les graphiques Fireworks vers de nombreuses applications, notamment les produits Macromedia. Utilisé avec d’autres applications Macromedia, Fireworks offre des fonctions d’intégration puissantes : • Vous pouvez lancer Fireworks pour modifier des graphiques sélectionnés dans de nombreuses applications Macromedia, telles que Dreamweaver, Flash, HomeSite, FreeHand et Director. • Les fonctions Fireworks sont conservées lors de l’exporation vers de nombreuses applications, ce qui vous permet d’exporter des éléments interactifs, tels que des boutons et des survols. • Dreamweaver et Fireworks partagent une intégration complète appelée Roundtrip HTML. Roundtrip HTML permet d’effectuer des modifications dans une application qui apparaissent telles quelles dans une autre application. • Flash et Fireworks sont également étroitement intégrés. Vous pouvez importer des fichiers sources Fireworks PNG directement dans Flash sans avoir à exporter dans autre format graphique. Flash offre diverses options permettant de contrôler l’importation des objets et des calques Fireworks. Fireworks simplifie également l’utilisation des applications non Macromedia. Vous pouvez lancer aisément Fireworks pour modifier des graphiques et des tableaux Microsoft FrontPage, par exemple, ou importez et exportez des graphiques Photoshop sous forme de fichiers totalement modifiables. Utilisation de Macromedia Dreamweaver MX Des fonctionnalités d’intégration uniques permettent de travailler de façon interchangeable sur un même fichier dans Macromedia Dreamweaver et Macromedia Fireworks. Dreamweaver et Fireworks reconnaissent et partagent un grand nombre de modifications possibles dans un même fichier, dont la modification des liens, les cartes graphiques (cartes images), les découpes en tableau, etc. Utilisées conjointement, ces deux applications permettent de rationaliser le processus de modification et d’insertion de fichiers graphiques Web dans des pages HTML. 373 Pour modifier des images et des tables provenant de Fireworks et placées dans un document Dreamweaver, vous pouvez utiliser Fireworks, puis revenir au document modifié dans Dreamweaver. Si vous voulez effectuer rapidement des modifications d’optimisation sur des images et des animations placées dans Fireworks, vous pouvez lancer la boîte de dialogue Fireworks Aperçu avant exportation et modifier les paramètres appropriés. Dans les deux cas, les modifications sont effectuées à la fois sur les fichiers dans Dreamweaver et sur les fichiers source dans Fireworks, si ces derniers étaient déjà ouverts. Pour rationaliser davantage le processus de conception Web, vous pouvez créer des marques de réservation d’images dans Dreamweaver pour y placer des images Fireworks. Vous pouvez ensuite sélectionner ces marques de réservation et lancer Fireworks pour créer des graphiques correspondant aux dimensions définies par les marques de réservation Dreamweaver. Dans Fireworks, vous pouvez alors modifier les dimensions des images, si nécessaire. Insertion d’images Fireworks dans des fichiers Dreamweaver Vous pouvez placer des graphiques Fireworks dans un document Dreamweaver de deux manières. Vous pouvez insérer un graphique Fireworks terminé à l’aide du menu d’insertion dans Dreamweaver ou créer un document Fireworks à partir d’une marque de réservation d’image Dreamweaver. Insertion d’images Fireworks dans Dreamweaver Vous pouvez insérer des images GIF ou JPEG Fireworks directement dans un document Dreamweaver. Vous devez d’abord exporter prélablement les images depuis Fireworks. Pour plus d’informations sur l’exportation d’images GIF et JPE, voir « Exportation d’une seule image » à la page 357. Pour insérer une image Fireworks dans un document Dreamweaver : 1 Placez le curseur à l’endroit où vous désirez insérer l’image dans le document Dreamweaver. 2 Utilisez l’une des méthodes suivantes : • Choisissez Insérer > Image. • Cliquez sur le bouton Insérer une image dans le panneau Commun de la palette Objets. 3 Accédez à l’image à exporter depuis Fireworks et cliquez sur Ouvrir. Si l’image ne se trouve pas dans le site Dreamweaver en cours, un message apparaît pour vous demander si vous voulez copier le fichier vers le dossier du site. Création de fichiers Fireworks à partir de marques de réservation Dreamweaver Les marques de réservation d’images combine la puissance de Fireworks et Dreamweaver en vous permettant de tester diverses présentations de pages Web avant de créer le document final de votre page. Les marques de réservationd’images permettent de définir la taille et la position des images Fireworks à placer dans Dreamweaver. Lorsque vous créez une image Fireworks à partir d’une marque de réservation d’image Dreamweaver, un document Fireworks est créé avec un fond ayant les dimensions de la marque de réservation sélectionnée. Dans Fireworks, vous pouvez utiliser n’importe quels outils pour créer votre graphique. Vous pouvez même découper votre document et ajouter des fonctions interactives telles que des boutons, des survols et d’autres comportements. 374 Chapitre 16 Remarque : Toutes les fonctions appliquées dans Fireworks sont conservées lors de l’exportation vers Dreamweaver. De même, la plupart des fonctions Dreamweaver appliquées à des marques de réservation d’images sont également conservées lorsque vous les ouvrez et les modifiez dans Fireworks. Toutefois, il existe une exception. En effet, les survols disjoints appliqués aux marques de réservation d’images dans Dreamweaver ne sont pas conservés lorsque vous les ouvrez et les modifiez dans Fireworks. Lorsque vous fermez la session Fireworks et revenez dans Dreamweaver, le nouveau graphique Fireworks que vous avez créé remplace la réservation d’image sélectionnée. Pour créer une image Fireworks à partir d’une marque de réservation dans Dreamweaver : 1 Dans Dreamweaver, enregistrez le document HTML dans un emplacement du dossier de site Dreamweaver. 2 Placez le curseur à l’endroit approprié du document et choisissez Insertion > Image de réservation. Une marque de réservation d’image est insérée dans le document Dreamweaver. 3 Utilisez l’une des méthodes suivantes : • Sélectionnez la réservation d’image et cliquez sur Créer dans le Vérificateur de propriétés. • Appuyez sur la touche Ctrl (Windows) ou Commande (Macintosh) et cliquez deux fois sur l’image de réservation. • Cliquez avec le bouton droit de la souris (Windows) ou maintenez enfoncée la touche Contrôle et choisissez l’option de création d’image dans Fireworks. Dreamweaver lance Fireworks si ce dernier n’est pas encore ouvert. Le document indique que vous modifiez une image transférée depuis Dreamweaver. 4 Créez une image dans Fireworks et cliquez sur Terminé une fois que vous avez terminé. 5 Définissez le nom et l’emplacement du fichier source PNG dans la boîte de dialogue Enregistrer sous et cliquez sur Enregistrer. Remarque : Si vous avez entré un nom pour l’image de réservation dans le Vérificateur de propriétés dans Dreamweaver, le nom est utilisé par défaut dans Fireworks. Pour plus d’informations sur l’enregistrement des fichiers PNG Fireworks, voir « Enregistrement de fichiers Fireworks » à la page 84. 6 Spécifiez le nom de ou des images exportées dans la boîte de dialogue Exporter. Il s’agit des fichiers JPEG ou GIF qui seront affichés dans Dreamweaver. Utilisation de Fireworks avec d’autres applications 375 7 Spécifiez l’emplacement de l’image ou des images exportées. L’emplacement que vous choisissez doit se trouver dans le dossier de site Dreamweaver. Pour plus d’informations sur l’exportation, voir « Exportation depuis Fireworks » à la page 356. 8 Cliquez sur Enregistrer. Lorsque vous revenez dans Dreamweaver, l’image de réservation que vous avez sélectionnée est remplacée par la nouvelle image ou le nouveau tableau Fireworks que vous avez créé. Insertion de code HTML Fireworks dans Dreamweaver Vous pouvez placer du code HTML Fireworks dans Dreamweaver de différentes manières. Vous pouvez exporter le code HTML Fireworks ou le copier dans le Presse-papiers. Vous pouvez également ouvrir un fichier HTML Fireworks exporté dans Dreamweaver et copier et coller les sections de code sélectionnées. Vous pouvez aisément mettre à jour le code que vous avez exporté vers Dreamweaver en utilisant la commande Mettre à jour le code HTML de Fireworks. Vous pouvez même exporter du code HTML sous la forme d’un élément de bibliothèque Dreamweaver. Vous pouvez également exporter du code HTML Fireworks sous forme de calques CSS (Cascading Style Sheet). Pour plus d’informations, voir « Exportation du fichier au format HTML » à la page 362. Remarque : Avant d’exporter, copier ou mettre à jour du code HTML Fireworks pour l’utiliser Dreamweaver, choisissez Dreamweaver comme type HTML dans la boîte de dialogue Configuration HTML. Pour plus d’informations, voir « Définition des options d’exportation du code HTML » à la page 369. Exportation de code HTML Fireworks vers Dreamweaver L’exportation de fichiers Fireworks vers Dreamweaver s’effectue en deux étapes. Dans Fireworks, vous pouvez exporter directement vers un dossier de site Dreamweaver. Cette opération génère un fichier HTML et les fichiers images associés dans l’emplacement que vous définissez. Vous pouvez ensuite placer le code HTML dans Dreamweaver à l’aide de la fonction d’insertion. Remarque : Avant d’exporter, choisissez Dreamweaver comme type HTML dans la boîte de dialogue Configuration HTML. Pour plus d’informations, voir « Définition des options d’exportation du code HTML » à la page 369. Pour exporter du code Fireworks : Exportez le document dans le format HTML. Pour plus d’informations, voir « Exportation de code généré par Fireworks » à la page 363. Pour insérer du code HTML Fireworks dans un document Dreamweaver : 1 Dans Dreamweaver, enregistrez votre document dans un site défini. 2 Dans la fenêtre du document, placez le curseur à l’endroit où vous voulez insérer le fichier HTML. 376 Chapitre 16 3 Utilisez l’une des méthodes suivantes : • Choisissez Insertion > Images interactives > HTML Fireworks. • Cliquez sur le bouton d’insertion de fichier HTML Fireworks, dans le panneau Commun de la palette Objets. 4 Dans la boîte de dialogue qui s’affiche, cliquez sur Parcourir pour sélectionner le fichier HTML Fireworks. 5 Choisissez Effacer fichier après insertion pour transférer le fichier HTML vers la corbeille (Windows) ou la poubelle (Macintosh) une fois l’opération terminée. Utilisez cette option si vous n’avez plus besoin d’utiliser le fichier HTML de Fireworks après l’avoir inséré. Cette option n’affecte pas le fichier source PNG associé au fichier HTML. Remarque : Si le fichier HTML se trouve sur un autre lecteur en réseau, il ne sera pas envoyé vers la corbeille (Windows) ou la poubelle (Macintosh), mais il sera supprimé définitivement. 6 Cliquez sur OK pour insérer le fichier HTML généré par Fireworks, avec les images, les découpes et le JavaScript qui lui sont éventuellement associés, dans le document Dreamweaver. Copie d’un fichier HTML Fireworks vers le Presse-papiers pour l’utiliser dans Dreamweaver L’une des méthodes permettant de placer rapidement un code HTML Fireworks dans Dreamweaver consiste à le copier dans le Presse-papiers de Fireworks, puis à le coller directement dans un document Dreamweaver. L’ensemble du code HTML et JavaScript associé au document Fireworks est copié dans le document Dreamweaver, les images sont exportées vers un emplacement spécifié et Dreamweaver met à jour le code HTML avec des liens de site vers ces images. Remarque : Avant d’effectuer la copie vers le Presse-papiers, choisissez Dreamweaver comme type HTML dans la boîte Configuration HTML. Pour plus d’informations, voir « Définition des options d’exportation du code HTML » à la page 369. Pour copier de fichier HTML Fireworks vers le Presse-papiers pour l’utiliser dans Dreamweaver : Copiez le fichier HTML vers le Presse-papiers de Fireworks, puis collez-le dans un document Dreamweaver. Pour plus d’informations, voir « Copie d’un code HTML dans le Presse-papiers » à la page 364. Copie de code d’un fichier Fireworks exporté et collage du fichier dans Dreamweaver Vous pouvez ouvrir un fichier HTML Fireworks exporté dans Dreamweaver et copier et coller manuellement uniquement les parties appropriées dans un autre document Dreamweaver. Remarque : Avant d’effectuer l’exportation depuis Fireworks, choisissez Dreamweaver comme type HTML dans la boîte Configuration HTML. Pour plus d’informations, voir « Définition des options d’exportation du code HTML » à la page 369. Pour copier le code d’un fichier Fireworks exporté et le coller dans Dreamweaver : Exportez un fichier HTML Fireworks, puis copiez et collez le code dans un document Dreamweaver existant. Pour plus d’informations, voir « Copie et collage d’un code HTML à partir d’un fichier Fireworks » à la page 366. Utilisation de Fireworks avec d’autres applications 377 Mise à jour de code HTML Fireworks exporté dans Dreamweaver La commande Mettre à jour le code HTML de Fireworks permet de modifier un document HTML que vous avez exporté vers Dreamweaver. Remarque : Bien que la commande Mettre à jour HTML soit utile pour mettre à jour du code HTML que vous avez exporté vers Dreamweaver, Roundtrip HTML fournit des avantages supplémentaires. Pour plus d’informations, voir « Modification des fichiers Fireworks dans Dreamweaver » à la page 379. La commande Mettre à jour le code HTML permet de modifier une image source PNG dans Fireworks, puis de mettre à jour automatiquement le code HTML exporté et les fichiers image placés dans un document Dreamweaver. Cette commande permet de mettre à jour des fichiers Dreamweaver même lorsque Dreamweaver n’est pas en cours d’exécution. Remarque : Avant de mettre à jour du code HTML, veillez à choisir Dreamweaver comme type HTML dans la boîte de dialogue Configuration. Pour plus d’informations, voir « Définition des options d’exportation du code HTML » à la page 369. Pour mettre à jour du code HTML placé dans Dreamweaver : 1 Modifiez le document PNG approprié PNG dans Fireworks. 2 Choisissez Fichier > Mettre à jour le code HTML ou cliquez sur le bouton d’exportation rapide et choisissez Mettre à jour le code HTML dans le menu déroulant Dreamweaver. 3 Localisez le fichier Dreamweaver contenant le code HTML que vous désirez mettre à jour et cliquez sur Ouvrir. 4 Accédez au dossier de destination des fichiers image mis à jour et cliquez sur Ouvrir. Fireworks met à jour le code HTML et JavaScript dans le document Dreamweaver. Fireworks exporte également les images mises à jour associées au code HTML et les place dans le dossier de destination indiqué. Si Fireworks ne détecte pas de code HTML à mettre à jour, il vous propose d’insérer du nouveau code HTML dans le document Dreamweaver. La section JavaScript du nouveau code est placée au début du document, et le tableau HTML ou le lien vers l’image est inséré à la fin. Exportation de fichiers Fireworks vers des bibliothèques Dreamweaver Les éléments de bibliothèque Dreamweaver simplifient la modification et la mise à jour des composants de site Web, tels que les logos et d’autres graphiques qui apparaissent sur chaque page d’un site. Un élément de bibliothèque est une partie d’un fichier HTML situé dans un dossier appelé Bibliothèque dans le dossier racine de votre site. Les éléments de bibliothèque sont affichés dans la palette Bibliothèque de Dreamweaver. Vous pouvez faire glisser une copie de la palette Bibliothèque vers n’importe quelle page de votre site Web. Vous ne pouvez pas modifier un élément de bibliothèque directement à partir de votre document Dreamweaver. Vous ne pouvez modifier cet élément que dans la bibliothèque sourceEnsuite, vous pouvez utiliser Dreamweaver pour mettre à jour toutes les copies de cet élément dans l’ensemble de votre site Web. Les éléments de bibliothèque Dreamweaver ressemblent à des symboles Fireworks ; les modifications de la bibliothèque source sont répercutées dans les instances de bibliothèques de l’ensemble du site. Pour exporter un fichier Fireworks sous la forme d’un élément de bibliothèque Dreamweaver : 1 Choisissez Fichier > Exporter. 378 Chapitre 16 2 Choisissez Bibliothèque Dreamweaver dans le menu déroulant Enregistrer comme type. Choisissez le dossier de bibliothèque cible dans votre site Dreamweaver comme destination des fichiers. Si ce dossier n’existe pas, utilisez la boîte de dialogue Sélectionner dossier pour créer ou rechercher le dossier. Le dossier doit s’appeler Bibliothèque et la casse est importante, car Dreamweaver en tient compte. Remarque : Dreamweaver ne reconnaîtra pas le fichier exporté comme élément de bibliothèque s’il n’est pas enregistré dans le dossier Bibliothèque. 3 Tapez un nom de fichier dans la boîte de dialogue d’exportation. 4 Si l’image contient des découpes, choisissez les options de découpe. Pour plus d’informations, voir « Exportation d’un document découpé » à la page 358. 5 Sélectionnez Placer les images dans le sous-dossier pour choisir le dossier devant recevoir les images à enregistrer. 6 Cliquez sur Enregistrer. Modification des fichiers Fireworks dans Dreamweaver Roundtrip HTML est une fonction puissante qui s’intègre étroitement à Fireworks et Dreamweaver. Elle permet d’effectuer des modifications dans une application et de les conserver dans une autre. Avec Roundtrip HTML, l’intégration des fonctionnalités de lancement et de modification permet de modifier des images et des tableaux générés par Fireworks et insérés dans un document Dreamweaver. Dreamweaver exécute automatiquement le fichier source PNG Fireworks de l’image ou du tableau pour vous permettre de les modifier dans ce dernier. Les modifications effectuées dans Fireworks sont automatiquement appliquées à l’image ou au tableau lorsque vous revenez dans Dreamweaver. Remarque : Avant d’utiliser Roundtrip HTML, vous devez au préalable effectuer quelques tâches. Pour plus d’informations, voir « Définition des options de lancement et de modification » à la page 385. Utilisation de Fireworks avec d’autres applications 379 Roundtrip HTML Fireworks reconnaît et préserve la plupart des types de modifications apportées à un document dans Dreamweaver (liens modifiés, cartes images modifiées, texte et code HTML modifiés dans des découpes HTML et comportements partagés entre Fireworks et Dreamweaver). Le Vérificateur de propriétés de Dreamweaver permet d’identifier les images, découpes et tableaux provenant de Fireworks. Bien que Fireworks accepte la plupart des modifications Dreamweaver, d’importantes modifications affectuées sur la structure d’une table dans Dreamweaver peuvent créer des différences irréconciliables entre les deux applications. Si vous modifiez radicalement la structure d’un tableau dans Dreamweaver et modifiez le tableau dans Fireworks, un messsage s’affiche pour indiquer que les modifications effectuées dans Fireworks replaceront celles effectuées précédemment dans Dreamweaver. Si vous devez modifier radicalement la structure d’un tableau, utilisez la commande Lancer et modifier de Dreamweaver pour modifier le tableau dans Fireworks. Modification d’images Fireworks Vous pouvez exécuter Fireworks pour modifier les images individuelles placées dans un document Dreamweaver. Remarque : Avant de modifier des graphiques Fireworks dans Dreamweaver, vous devez au préalable exécuter quelques tâches. Pour plus d’informations, voir « Définition des options de lancement et de modification » à la page 385. Pour ouvrir et modifier une image Fireworks placée dans Dreamweaver : 1 Dans Dreamweaver, choisissez Fenêtre > Propriétés pour ouvrir le Vérificateur de propriétés, si nécessaire. 2 Utilisez l’une des méthodes suivantes : • Sélectionnez l’image désirée. Le Vérificateur de propriétés identifie la sélection comme étant une image Fireworks et affiche le nom du fichier source PNG associé à cette image. Dans le Vérificateur de propriétés, cliquez sur Modifier. • Appuyez et maintenez enfoncée la touche Contrôle (Windows) ou Commande (Macintosh) et double-cliquez sur l’image à modifier. • Cliquez sur le bouton droit (Windows) ou maintenez enfoncée la touche Contrôle (Macintosh) et cliquez sur l’image voulue, puis choisissez Modifier avec Fireworks dans le menu contextuel. Dreamweaver lance Fireworks si ce dernier n’est pas encore ouvert. 3 Lorsque le programme vous le demande, indiquez si vous désirez que le fichier source Fireworks de l’image insérée soit ouvert. Pour plus d’informations sur les fichiers source PNG, voir « Enregistrement de fichiers Fireworks » à la page 84. 4 Modifiez l’image dans Fireworks. Le document indique que vous modifiez une image transférée depuis Dreamweaver. Dreamweaver reconnaît et préserve les modifications suivantes effectuées dans Fireworks. 5 Lorsque vos modifications sont terminées, cliquez sur Terminé dans la fenêtre du document. L’image est exportée à l’aide des paramètres d’optimisation en cours, le fichier GIF ou JPEG utilisé par Dreamweaver est mis à jour et le fichier source PNG est enregistré si un fichier source a été sélectionné. 380 Chapitre 16 Remarque : Lorsque vous ouvrez directement une image à partir de la fenêtre Site de Dreamweaver, les fonctionnalités d’intégration de Fireworks décrites ci-dessus sont inopérantes ; Fireworks n’ouvre pas le fichier PNG d’origine. Pour utiliser ces fonctionnalités d’intégration de Fireworks, ouvrez les images à partir de la fenêtre du document Dreamweaver. Modification de tableaux Fireworks Lorsque vous ouvrez et modifiez une découpe d’image faisant partie d’un tableau Fireworks inséré dans Dreamweaver, ce dernier ouvre automatiquement le fichier source PNG du tableau entier. Remarque : Avant de modifier des tableaux Fireworks dans Dreamweaver, vous devez au préalable exécuter quelques tâches. Pour plus d’informations, voir « Définition des options de lancement et de modification » à la page 385. Pour ouvrir et modifier un tableau Fireworks placé dans Dreamweaver : 1 Dans Dreamweaver, choisissez Fenêtre > Propriétés pour ouvrir le Vérificateur de propriétés, si nécessaire. 2 Procédez de l’une des manières suivantes : • Cliquez dans le tableau, puis sur la balise TABLE dans la barre d’état, afin de sélectionner l’ensemble du tableau. Le Vérificateur de propriétés identifie la sélection comme étant un tableau Fireworks et affiche le nom du fichier source PNG associé à ce tableau.) Dans le Vérificateur de propriétés, cliquez sur Modifier. • Cliquez dans l’angle supérieur gauche du tableau pour le sélectionner, puis sur Modifier dans le Vérificateur de propriétés. • Sélectionnez une image dans le tableau, puis cliquez sur Modifier dans le Vérificateur de propriétés. • Appuyez et maintenez enfoncée la touche Contrôle (Windows) ou Commande (Macintosh) et double-cliquez sur l’image à modifier. • Cliquez sur le bouton droit (Windows) ou maintenez enfoncée la touche Contrôle (Macintosh) et cliquez sur l’image voulue, puis choisissez Modifier avec Fireworks dans le menu contextuel. Dreamweaver lance Fireworks si ce dernier n’est pas encore ouvert. Le fichier source PNG du tableau apparaît dans la fenêtre du document. Remarque : Pour plus d’informations sur les fichiers source PNG, voir « Enregistrement de fichiers Fireworks » à la page 84. 3 Effectuez les modifications appropriées dans Fireworks. Dreamweaver reconnaît et préserve les modifications suivantes effectuées dans Fireworks. 4 Lorsque vos modifications sont terminées, cliquez sur Terminé dans la fenêtre du document. Cette opération exporte les fichiers HTML et des découpes d’images du tableau en utilisant les paramètres d’optimisation en cours, met à jour le tableau dans Dreamweaver, et enregistre le fichier source PNG. Utilisation de Fireworks avec d’autres applications 381 A propos des comportements Dreamweaver Si un seul graphique Fireworks non découpé est inséré dans un document Dreamweaver et qu’un comportement Dreamweaver est appliqué, une découpe se trouve sur le graphique lorsqu’il est lancé et modifié dans Fireworks. La découpe n’est pas visible immédiatement, car les découpes sont désactivées automatiquement lorsque vous lancez et modifiez un graphique non découpé auquel vous appliquez des fonctions Dreamweaver. Pour afficher la découpe, activez sa visibilité dans le calque Web du panneau des calques. Lorsque vous affichez les propriétés d’une découpe dans Fireworks et qu’elle contient un comportement Dreamweaver, le champ Lien du Vérificateur de propriétés affiche javascript:;. La suppression de ce texte n’a pas d’effet négatif. Vous pouvez l’écraser pour entrer une URL si nécessaire et le comportement reste intact lorsque vous revenez dans Dreamweaver. Dreamweaver prend en charge tous les comportements Fireworks, y compris ceux nécessaires aux survols et aux boutonsFireworks accepte les comportements Dreamweaver suivants au cours d’une session de lancement et de modification : • • • • • • Survol simple Substitution d’image Restauration de permutation d’image Texte de la barre d’état Image de la barre de navigation Menu contextuel Optimisation des images Fireworks et des animations placées dans Dreamweaver Vous pouvez appeler Fireworks à partir de Dreamweaver pour procéder à des modifications d’exportation rapides (ré-échantillonnage ou changement de type de fichier) dans les images et animations Fireworks insérées. Fireworks permet de modifier les paramètres d’optimisation et d’animation, ainsi que la taille et la zone exportée de l’image. Pour modifier les paramètres d’optimisation d’une image Fireworks placée dans Dreamweaver : 1 Dans Dreamweaver, sélectionnez l’image appropriée et choisissez Commandes > Optimiser l’Image dans Fireworks. 382 Chapitre 16 2 Si le programme vous le demande, indiquez si vous désirez que le fichier source Fireworks de l’image insérée soit ouvert. Une boîte de dialogue s’ouvre. Bien que la barre de titre ne contienne pas de nom, il s’agit de la boîte de dialogue d’aperçu d’exportation Fireworks. 3 Effectuez les modifications appropriées dans cette boîte de dialogue : • Pour modifier les paramètres d’optimisation, cliquez sur l’onglet Options. Pour plus d’informations, voir « Utilisation de la fenêtre Aperçu avant exportation » à la page 335. • Pour modifier la taille et la zone de l’image exportée, cliquez sur l’onglet Fichier et changez les paramètres appropriés. Si vous changez les dimensions de l’image dans Fireworks, vous devez également redéfinir la taille de l’image dans le Vérificateur de propriétés lorsque vous retournerez sous Dreamweaver. • Pour modifier les paramètres d’animation de l’image, cliquez sur l’onglet Animation et changez les paramètres appropriés. 4 Lorsque vous avez fini de modifier l’image, cliquez sur Mettre à jour. L’image est exportée en utilisant les nouveaux paramètres d’optimisation, le fichier GIF ou JPEG est mis à jour dans Dreamweaver et le fichier source PNG est enregistré si un fichier source a été sélectionné. Si vous avez modifié le format de fichier de l’image, le vérificateur de liens de Dreamweaver vous proposera de mettre à jour les références à cette image sur votre site. Par exemple, si vous avez changé le format d’une image appelée mon_image de GIF en JPEG, cliquez sur OK pour que toutes les références à mon_image.gif soient remplacées par des références à mon_image.jpg, sur tout votre site. Utilisation de Fireworks avec d’autres applications 383 Redimensionnement d’images Fireworks insérées Lorsque vous ouvrez et optimisez une image Fireworks à partir de Dreamweaver, vous pouvez redimensionner cette image et sélectionner une zone d’image à exporter. Remarque : Si vous changez les dimensions de l’image dans Fireworks, vous devez également redéfinir la taille de l’image dans le Vérificateur de propriétés lorsque vous retournerez sous Dreamweaver. Pour spécifier les dimensions de l’image à exporter : 1 Dans la boîte de dialogue d’aperçu d’exportation de Fireworks, cliquez sur l’onglet Fichier. 2 Pour modifier l’échelle de l’image à exporter, indiquez un pourcentage ou tapez directement les valeurs désirées, en pixels, pour la largeur et la hauteur. Choisissez Respecter les proportions pour modifier les proportions (hauteur et largeur) de l’image d’une valeur identique. 3 Pour exporter une zone sélectionnée de l’image, sélectionnez l’option Exporter zone et procédez de l’une des manières suivantes pour définir la zone à exporter : • Déplacez le rectangle pointillé qui apparaît autour de l’aperçu pour délimiter la zone d’exportation désirée. Tirer le rectangle à l’intérieure de la zone d’aperçu pour voir les zones non affichées. • Indiquez les coordonnées en pixels des limites de la zone à exporter. Modification des paramètres d’animation Dans le cadre de l’ouverture et l’optimisation d’une animation Fireworks, vous pouvez modifier les paramètres de l’animation. Les options d’animation de la boîte de dialogue d’aperçu d’exportation sont identiques à celles du panneau Images de Fireworks. Remarque : Vous ne pouvez pas modifier individuellement les éléments graphiques d’une animation Fireworks au cours d’une session d’optimisation dans Dreamweaver. Pour modifier les éléments graphiques dans une animation, vous devez lancer et modifier l’animation Fireworks. Pour plus d’informations, voir « Modification des fichiers Fireworks dans Dreamweaver » à la page 379. Pour modifier une image animée : 1 Dans la boîte de dialogue d’aperçu d’animation de Fireworks, cliquez sur l’onglet Animation. 2 Vous pouvez à tout moment utiliser l’une des techniques suivantes pour voir les images animées : 384 Chapitre 16 • Pour afficher une seule image, sélectionnez l’image désirée dans la liste à gauche de la boîte de dialogue, ou utilisez les contrôles d’animation dans le coin inférieur droit de la boîte de dialogue. • Pour voir fonctionner l’animation, cliquez sur le contrôle Lire/Arrêter dans la partie inférieure droite de la boîte de dialogue. 3 Modifiez l’animation : • Pour choisir la méthode d’élimination d’une image, sélectionnez l’image désirée dans la liste et choisissez l’une des options du menu déroulant (indiqué par l’icône d’une poubelle). • Pour définir la cadence d’une animation, sélectionnez l’image désirée dans la liste et indiquez la cadence d’animation en centièmes de seconde. • Pour que l’animation se répète en continu, cliquez sur le bouton Boucle et choisissez le nombre de répétitions désiré dans le menu déroulant. • Choisissez l’option Recadrage automatique pour définir une zone rectangulaire dans chaque image, pour que seule la zone qui diffère entre les images soit exportée. Le choix de cette option réduit la taille des fichiers. • Choisissez l’option Différence automatique pour que seuls les pixels qui changent entre deux images consécutives soient exportés. Le choix de cette option réduit la taille des fichiers. Définition des options de lancement et de modification Pour utiliser Roundtrip HTML de manière efficace, vous devez exécuter préalabement quelques tâches, telles que définir Fireworks comme éditeur d’image principal dans Dreamweaver et spécifier les préférences de lancement et de modification dans Fireworks. Remarque : Vous devez également définir un site local dans Dreamweaver avant d’utiliser Roundtrip HTML. Pour plus d’informations, voir Utilisation de Dreamweaver MX. Désignation de Fireworks comme l’éditeur d’image externe principal pour Dreamweaver Dans les Préférences de Dreamweaver, il est possible d’indiquer des applications spécifiques qui doivent être automatiquement exécutées pour modifier des types de fichiers spécifiques. Pour utiliser la fonctionnalité « Lancer et Modifier » de Fireworks, vérifiez que Fireworks est bien désigné dans Dreamweaver comme éditeur externe principal pour les fichiers GIF, JPEG et PNG. Utilisation de Fireworks avec d’autres applications 385 Bien qu’il soit possible d’utiliser des versions antérieures de Fireworks comme éditeur d’image externe, les possibilités de ces versions sont limitées en matière de lancement et modification. Lorsque vous utilisez Roundtrip HTML, Fireworks 4 ne prend pas en charge totalement les modifications des propriétés de cellule des tableaux Dreameweaver, ni les comportements appliqués dans Dreamweaver. Fireworks 3 ne prend pas entièrement en charge le lancement et la modification des tableaux et des découpes dans des tableaux, et Fireworks 2 ne prend pas en charge le lancement et la modification des fichiers source PNG des images insérées. Pour définir Fireworks comme l’éditeur d’image externe principal pour Dreamweaver : 1 Dans Dreamweaver, choisissez Edition > Préférences, puis sélectionnez Types de fichiers/ Editeurs. 2 Dans la liste des extensions, sélectionnez une extension de fichier Web (.gif, .jpg, ou .png). 3 Dans la liste Editeurs, sélectionnez Fireworks s’il y figure. Si Fireworks ne se trouve pas dans la liste, cliquez sur le bouton Plus (+), recherchez l’application Fireworks, puis cliquez sur Ouvrir. 4 Cliquez sur Principal. 5 Répétez les étapes 2 et 3 pour définir Fireworks comme éditeur principal pour les autres extensions de fichiers Web. 386 Chapitre 16 Design Notes et fichiers source Lorsque vous exportez vers un site Dreamweaver un fichier Fireworks à partir d’un fichier source PNG, Fireworks crée une Design Note (note de conception) contenant des informations sur le fichier. Par exemple, lorsque vous exportez un tableau Fireworks, Fireworks écrit une note de conception pour chaque image exportée. Ces notes contiennent des références au fichier source PNG qui contient l’ensemble des fichiers exportés. Lorsque vous exécutez Fireworks à partir de Dreamweaver pour modifier une image, Dreamweaver utilise la note de conception correspondante pour localiser le fichier source PNG de cette image. Pour obtenir les meilleurs résultats, enregistrez toujours vos fichiers source PNG dans Fireworks, et les fichiers exportés dans un site Dreamweaver. Tout autre développeur du site sera ainsi en mesure d’ouvrir le fichier source PNG lorsqu’il exécutera Fireworks à partir de Dreamweaver. Définition des préférences de lancement-modification pour les fichiers source Fireworks Les préférences de lancement et de modification Fireworks permettent de définir la manière dont les fichiers source PNG seront traités lorsque vous lancez des fichiers Fireworks dans une autre application. Dreamweaver ne reconnaît ces préférences de Fireworks que dans certains cas, lorsque vous lancez une image Fireworks et optimisez l’image. Plus précisément, vous devez ouvrir et optimiser une image qui ne fait pas partie d’un tableau Fireworks et qui ne contient pas un chemin de note de conception correct vers un fichier source PNG. Dans tous les autres cas, et notamment compris dans les cas de lancement-modification d’images Fireworks, Dreamweaver ouvre automatiquement le fichier source PNG, et vous demande d’indiquer le chemin de ce fichier source s’il ne le trouve pas. Pour définir les préférences de lancement- modification pour Fireworks : 1 Dans Fireworks, choisissez Edition > Préférences. Remarque : Sous Mac OS X, choisissez Fireworks > Préférences. 2 Cliquez sur l’onglet Lancer et modifier (Windows) ou choisissez Lancer et modifier dans le menu déroulant (Macintosh). 3 Indiquez les options à utiliser pour modifier ou optimiser des images Fireworks insérées dans une application externe : Toujours utiliser le fichier PNG source ouvre automatiquement le fichier PNG créé dans Fireworks qui est défini dans la note de conception comme source de l’image insérée. Les modifications effectuées dans l’image source PNG sont reflétées dans l’image insérée correspondante. Ne jamais utiliser le fichier PNG source ouvre automatiquement l’image Fireworks insérée, qu’il existe ou non un fichier source PNG. Les modifications n’affectent que l’image mise en place. Demander lors du lancement vous permet de spécifier à chaque fois si le fichier source PNG doit être ouvert et modifié. Lorsque vous modifiez ou optimisez une image déjà insérée, Fireworks affiche un message vous demandant de choisir le type d’image à modifier. Vous pouvez également définir des préférences de lancement et de modification globales dans cette invite. Utilisation de Fireworks avec d’autres applications 387 Utilisation de Macromedia Flash MX Fireworks s’intègre parfaitement à Macromedia Flash. Vous pouvez aisément exporter des vecteurs, bitmaps, animations et des graphiques de boutons multi-états Fireworks pour les utiliser dans Flash. La fonction de lancement et de modification permet également de modifier aisément des graphiques Fireworks dans Flash. Remarque : Les comportements de boutons Fireworks et d’autres éléments d’interactivité ne sont pas importés dans Flash. Insertion de fichiers Fireworks dans Flash Vous pouvez insérer des graphiques Fireworks dans Flash de différentes manières. La meilleure méthode consiste à importer un fichier PNG Fireworks. Cette méthode vous permet de contrôler totalement l’importation des graphiques et des animations dans Flash. Vous pouvez importer des fichiers JPEG, GIF, PNG et SWF Fireworks, mais cette méthode est moins précise. Vous pouvez également copier manuellement des gaphiques dans Fireworks et les coller directement dans Flash. Importation de fichiers PNG Fireworks dans Flash Vous pouvez importer des fichiers source PNG Fireworks directement dans Flash sans avoir à les exporter dans d’autres formats graphiques. Tous les vecteurs, bitmaps, animations et boutons multi-états peuvent être importés dans Flash. Remarque : Les comportements de boutons Fireworks et d’autres éléments d’interactivité ne sont pas importés dans Flash. Lorsque vous importez un fichier PNG Fireworks dans Flash, vous pouvez choisir diverses options d’importation. Vous pouvez importer tous les calques et objets sous la forme d’un symbole de bibliothèque ou tout le contenu dans un nouveau calque. Avec les objets vectoriels et texte, vous pouvez conserver leur caractère modifiable ou conserver uniquement leur apparence si ces objets ont des effets ou d’autres propriétés non disponibles dans Flash. Ou bien, vous pouvez annuler le caractère modifiable de ces objets et importer le fichier PNG Fireworks sous la forme d’un image bitmap. Pour importer un fichier PNG Fireworks dans Flash : 1 Enregistrez le document dans Fireworks. Pour plus d’informations sur l’enregistrement des fichiers, voir « Enregistrement de fichiers Fireworks » à la page 84. 2 Accédez à un document ouvert dans Flash. 3 (Facultatif ) Cliquez sur le cadre et le calque vers lequel vous voulez importez le contenu Fireworks. Cette opération n’est nécessaire que si vous voulez importer le fichier PNG sous la forme d’un symbole de bibliothèque (film). 4 Choisissez Fichier > Importer. 388 Chapitre 16 5 Accédez au fichier PNG et sélectionnez-le dans la boîte de dialogue d’importation, puis cliquez sur OK. La boîte de dialogue des paramètres d’importation Fireworks PNG s’affiche. 6 Choisissez une option de structure de fichier : L’option Importation sous forme de film et de rétention de calque importe le fichier Fireworks sous la forme d’un film contenant tous les calques et images du fichier Fireworks d’origine. Le film est inséré dans le calque et le cadre en cours. Si vous n’avez pas sélectionné un cadre avant l’importation, le film est placé dans le cadre précédent. L’option Importation dans un nouveau calque dans la scène en cours importe le fichier Fireworks vers un nouveau calque sans changer les images. 7 Choisissez la méthode d’importation des objets vectoriels et texte : L’option Rastérisation pour maintenir l’aspect permet de conserver le caractère modifiable des objets vectoriels, sauf s’ils contiennent des trames, des traits ou des effets spéciaux que Flash ne prend pas en charge. Pour conserver l’apparence de ces objets, Flash les convertit en image bitmap non modifiables. L’option Conservation du caractère modifiable de tous les trajets permet de conserver le caractère non modifiable de tous les objets vectoriels. Si les objets contiennent des trames, traits et des effets que Flash ne prend pas en charge, les propriérés sont perdues. 8 Choisissez la méthode d’importation des textes : L’option Rastérisation pour maintenir l’aspect permet de conserver le caractère modifiable du texte, sauf si le texte contient des trames, des traits ou des effets spéciaux que Flash ne prend pas en charge. Pour conserver l’apparence des textes, Flash les convertit en image bitmap non modifiables. L’option Conservation du caractère modifiable de l’ensemble du texte permet de conserver le caractère modifiable de tout le texte. Si les objets texte contiennent des trames, traits et des effets que Flash ne prend pas en charge, les propriérés sont perdues. 9 Choisissez l’option d’importation sous la forme d’une image fusionnée pour importer le fichier sous la forme d’une image bitmap et éliminer toutes les fonctions de modification. Remarque : Si vous sélectionnez cette option, aucune autre option de la boîte de dialogue n’est disponible. Utilisation de Fireworks avec d’autres applications 389 10 Cliquez sur OK. Le fichier PNG Fireworks est importé dans Flash en utilisant les options d’importation que vous avez choisies. Copie et collage de fichiers graphiques Fireworks dans Flash Vous pouvez placer rapidement des graphiques Fireworks dans Flash en les copiant et en les collant. Remarque : Pour copier des gaphiques dans les versions précédentes de Flash, vous devez choisir Edition > Copier les contours de trajet. Lorsque vous copiez et collez des graphiques Fireworks dans Flash, certains attributs sont perdus, tels que les effets en direct et les textures. En outre, Flash supporte uniquement les trames unies, les trames dégradées et les traits élémentaires. Pour copier et coller des graphiques dans Flash : 1 Sélectionnez les objets à copier. 2 Choisissez Edition > Copier ou cliquez sur le bouton Exporation rapide et choisissez Copier dans le menu déroulant Macromedia Flash. 3 Dans Flash, créez un nouveau document et choisissez Edition > Coller. Remarque : Il peut être nécessaire de choisir Modification > Dissocier pour dissocier les objets afin de les modifier comme objets vectoriels individuels dans Flash. Exportation de graphiques Fireworks dans d’autres formats et leur utilisation dans Flash Vous pouvez exporter des graphiques Fireworks sous forme de fichiers JPEG, GIF etd PNG et les importer dans Flash. Pour plus d’informations sur l’exportation de fichiers JPEGs et GIF, voir « Exportation d’une seule image » à la page 357. Pour plus d’informations sur l’exportation dans le format PNG, voir « Exportation de fichiers PNG avec transparence » à la page 392. Pour plus d’informations sur l’importation de ces formats dans Flash, voir « Importation de graphiques et d’animations exportés Fireworks vers Flash » à la page 392. Remarque : Bien que PNG soit le format de fichier natif de Fireworks, les fichiers graphiques PNG exportés depuis Fireworks sont différents des fichiers source PNG que vous enregistrez dans Fireworks. Les fichiers PNG exportés ne sont pas différents des fichiers GIF ou JPEG ; ils contiennent uniquement des données d’images et ne contiennent pas d’autres informations, telles que des découpes, des calques, des éléments d’interactivité, des effets en direct ou un contenu modifiable. Pour plus d’informations sur les fichiers source PNG, voir « Enregistrement de fichiers Fireworks » à la page 84. Exportation de graphiques et d’animation Fireworks sous forme de fichiers SWF Le graphiques et les animations Fireworks peuvent être exportés sous forme de fichiers SWF Flash. Vous pouvez définir diverses options d’exportation d’objets. Une partie du formatage est perdue si vous ne sélectionnez pas l’option Conserver l’apparence à partir de la boîte de dialogue Options d’exportation Flash SWF. La couleur et la taille des traits sont préservées. Les informations de formatage perdues lors de l’exportation dans le format SWF sont les suivantes : 390 Chapitre 16 • Les effets applicables en direct ; • les catégories de trames et de traits, textures et bords diffusés ; • l’anticrénelage des objets (le lecteur Flash applique l’anticrénelage au niveau du document et l’anticrénelage est donc appliqué au document lorsque vous l’exportez) ; • l’opacité et les modes de fondu (les objets opaques sont convertis en symboles avec un canal alpha) ; • • • • Calques ; Masques ; Découpes, cartes-images et comportements ; Certaines options de formatage de texte, telles que le crénage et les traits bitmap. Pour exporter un graphique ou une animation Fireworks sous la forme d’un fichier SWF : 1 Choisissez Fichier > Exporter ou cliquez sur le bouton Exportation rapide et choisissez Exporter SWF dans le menu déroulant Macromedia Flash. 2 A partir de la boîte de dialogue Exporter, tapez un nom de fichier et choisissez un dossier de destination. 3 Choisissez Macromedia Flash SWF dans le menu déroulant Enregistrer sous. 4 Cliquez sur le bouton Options. La boîte de dialogue des options d’exportation Flash SWF s’affiche. 5 Dans la section Objets, choisissez l’une des options suivantes : Conserver les trajets pour conserver le caractère modifiable des trajets. Les effets et le formatage sont perdus. Conserver l’apparence pour convertir les objets vectoriels en objets bitmap et conserver l’apparence des traits et des trames appliqués. Le caractère modifiable est perdu. Utilisation de Fireworks avec d’autres applications 391 6 Dans la section Texte, choisissez l’une des options suivantes : Conserver le caractère modifiable pour pouvoir modifier le texte. Les effets et le formatage sont perdus. Convertir en trajet pour préserver les paramètres de crénelage ou d’espacement spécifiés dans Fireworks. Le caractère modifiable du texte est perdu. 7 Définissez la qualité des images JPEG avec la glissière de réglage correspondante. 8 Sélectionnez les images à exporter et leur cadence de diffusion en secondes. 9 Cliquez sur OK. 10 A partir de la boîte de dialogue Exporter, cliquez sur Enregistrer. Pour plus d’informations sur l’importation d’un fichier SWF exporté dans Flash, voir « Importation de graphiques et d’animations exportés Fireworks vers Flash » à la page 392. Exportation de fichiers PNG avec transparence Le format PNG permet la transparence avec les images couleurs 32 bits. Le fichier PNG Fireworks, le fichier source Fireworks, supporte également la transparence avec les images couleur 32 bits. Vous pouvez importer des fichiers source PNG Fireworks directement dans Flash. Vous pouvez également créer une transparence avec un fichier PNG 8 bits. Vous pouvez exporter des graphiques PNG Fireworks 8 bits avec transparence pour l’insertion dans Flash. Pour exporter un fichier PNF 8 bits avec transparence : 1 Dans Fireworks, choisissez Fenêtre > Optimiser pour ouvrir le panneau Optimiser s’il n’est pas ouvert. 2 Choisissez PNG 8 comme format de fichier d’exportation et Transparence alpha dans le menu déroulant Transparence. 3 Choisissez Fichier > Exporter. 4 Sélectionnez Images uniquement dans le menu déroulant Enregistrer comme type. Nommez le fichier, puis cliquez sur Enregistrer. Pour plus d’informations sur l’importation de fichiers PGN exportés vers Flash, voir « Importation de graphiques et d’animations exportés Fireworks vers Flash » à la page 392. Importation de graphiques et d’animations exportés Fireworks vers Flash Utilisez la commande Importer de Flash pour importer des graphiques et des animations exportés depuis Fireworks. Pour importer des graphiques et des animations Fireworks dans Flash : 1 Créez un document Flash. 2 Choisissez Fichier > Importer et recherchez le graphique ou l’animation. 3 Cliquez sur Ouvrir pour importer le fichier. 392 Chapitre 16 Utilisation de Fireworks pour modifier des graphiques importés dans Flash Grâce à l’intégration de la fonction Lancer et modifier vous pouvez utiliser Fireworks pour modifier un graphique que vous avez importé dans Flash. Vous pouvez modifier n’importe quel graphique de cette manière, même si le graphique n’a pas été exporté depuis Fireworks. Remarque : Les fichiers PNG natifs Fireworks importés dans Flash constituent une exception, à moins que vous les ayez importés sous forme d’images fusionnées. Si le graphique a été exporté depuis Fireworks et que vous avez enregistré le fichier PNG d’origine avec le fichier graphique exporté, vous pouvez lancer le fichier PNG d’origine dans Fireworks depuis Flash pour effectuer les modifications. Lorsque vous revenez dans Flash, le fichier PNG et le graphique dans Flash sont mis à jour. 1 Dans Flash, cliquez avec le bouton droit de la souris (Windows) ou appuyez sur la touche Contrôle et cliquez (Macintosh) sur le fichier graphique dans le panneau Bibliothèque. 2 Choisissez Edition dans le menu déroulant Fireworks. Remarque : Si cette commande est absente, choisissez l’option de modification de largeur et recherchez l’application Fireworks. 3 Cliquez sur Oui dans la zone de recherche de la source pour rechercher le fichier PNG d’origine du graphique Fireworks, puis cliquez sur Ouvrir. Remarque : Si vous avez changé les préférences de lancement et de modification Fireworks, cette boîte de dialogue ne s’affiche pas. Le fichier s’affiche dans Fireworks et la fenêtre du document indique que vous modifiez un fichier de Flash. 4 Modifiez l’image et cliquez sur Terminé. Fireworks exporte un nouveau fichier graphique vers Flash et si vous avez modifié le fichier PNG d’origine, ce fichier est également enregistré. Extension de Fireworks avec des commandes personnalisés créées dans Flash A l’aide de Flash, vous pouvez créer des films SWF contenant du code JavaScript. Ces films peuvent être utilisés sous forme de commandes Fireworks accessibles depuis le menu Commandes de Fireworks ou de panneaux accessibles dans le menu Fenêtre. Pour plus d’informations, voir Extending Fireworks MX, disponible dans le format PDF sur le CD d’installation Macromedia Fireworks. Utilisation de Macromedia FreeHand Du fait que les deux applications supportent les vecteurs, vous pouvez aisément partager des graphiques vectoriels entre Fireworks et Macromedia FreeHand. L’apparence des objets peut être différente d’une application à l’autre par le fait que Fireworks et FreeHand ne partagent pas les mêmes fonctions. Pour plus d’informations, voir « Utilisation d’autres applications graphiques vectorielles » à la page 396. Les procédures de cette section s’appliquent à l’utilisation de Fireworks avec FreeHand et à l’utilisation de Fireworks avec d’autres applications graphiques vectorielles, telles que Adobe Illustrator et CorelDraw. Pour plus d’informations, voir « Utilisation d’autres applications graphiques vectorielles » à la page 396. Utilisation de Fireworks avec d’autres applications 393 Insertion de graphiques FreeHand dans Fireworks Vous pouvez placer des graphiques FreeHand dans Fireworks de différentes manières. Vous pouvez les importer, les copier et les coller ou les faire glisser et les déposer. Fireworks MX supporte les graphiques de FreeHand 7 et des versions supérieures. Importation de graphiques FreeHand dans Fireworks Fireworks peut importer des graphiques vectoriels créés dans FreeHand. Vous pouvez définir les options suivantes lors de l’importation d’un graphique FreeHand : Mise à l’échelle indique le pourcentage de mise à l’échelle appliqué au fichier importé. Largeur et hauteur définit la largeur et la hauteur du fichier importé exprimées en pixels, pouces ou centimètres. Résolution indique la résolution à appliquer au fichier importé. Anticrénelé lisse les objets importés pour éviter l’affichage de bords dentelés. Vous pouvez choisir cette option séparément pour les trajets ou du texte. Remarque : Pour donner aux bords des objets importés un aspect lissé (anticrénelé) ou un aspect net, utilisez la commande Modification > Modifier le trajet > Trame nette, Trame anticrénelée ou Trame avec diffusion après l’importation. Conversion de fichier permet de spécifier le mode de traitement des documents de plusieurs pages pendant l’importation : • L’option Ouvrir une page importe uniquement la page spécifiée. • L’option Ouvrir les pages en tant qu’images importe toutes les pages du document et les place dans des images différentes. • L’option Ignorer les calques importe tous les objets d’un calque. • L’option Mémoriser les calques permet de préserver la structure du fichier importé. • L’option Convertir les calques en images place les calques du document importé dans des images différentes. Inclure les calques invisibles importe les objets figurant sur des calques désactivés. Si vous ne choisissez pas cette option, les calques invisibles ne sont pas pris en compte. Inclure les calques d’arrière-plan importe les objets en provenance du calque d’arrière-plan du document. Sinon, le calque d’arrière-plan ne sera pas pris en compte. Rendu sous forme d’image transforme en bitmap les groupes complexes, les fondus ou les trames assemblées et les place dans des objets bitmap distincts dan un document Fireworks. Saisissez un nombre dans la zone de texte pour déterminer le nombre d’objets qu’un groupe, un objet ou une trame en mosaïque peut contenir avant d’être converti en bitmap lors de l’importation. 394 Chapitre 16 Pour importer des graphiques vectoriels depuis un fichier FreeHand : 1 Dans Fireworks, choisissez Fichier > Ouvrir pour accéder au fichier FreeHand et cliquez sur Ouvrir. La boîte de dialogue Options de fichier vectoriel s’affiche. 2 Choisissez les options nécessaires. 3 Cliquez sur OK. Copier et coller ou Glisser et déposer des graphiques FreeHand dans Fireworks Pour placer rapidement des graphiques FreeHand dans Fireworks, copiez et collez-les ou faites les glisser et déposez-les. Pour copier et coller un graphique sélectionné FreeHand dans Fireworks : 1 Dans FreeHand, choisissez Edition > Copier. 2 Créez un document dans Fireworks ou ouvrez un document existant. 3 Choisissez Edition > Coller. Pour faire glisser et déposer un fichier graphique FreeHand dans Fireworks : Faites glisser le graphique de FreeHand vers le document Fireworks. Insertion de graphiques Fireworks dans FreeHand Vous pouvez exporter des trajets vectoriels deFireworks vers FreeHand. Vous pouvez également copier et coller des graphiques vectoriels Fireworks dans FreeHand. Utilisation de Fireworks avec d’autres applications 395 Pour exporter un graphisme vers FreeHand : 1 Dans Fireworks, choisissez Fichier > Exporter ou cliquez sur le bouton d’exportation rapide et choisissez l’option d’exportation vers FreeHand dans le menu déroulant FreeHand. 2 A partir de la boîte de dialogue Exporter, tapez un nom de fichier et choisissez un dossier de destination. 3 A partir du menu déroulant Enregistrer sous, choisissez Illustrator 7. Remarque : Illustrator 7 est un format de fichier graphique que vous utilisez lorsque vous exportez depuis Fireworks vers une autre application graphique vectorielle, notamment Macromedia FreeHand. La plupart des applications vectorielles lisent les fichiers Illustrator 7. 4 Cliquez sur le bouton Options. 5 A partir de la boîte de dialogue Options d’exportation vers Illustrator, choisissez l’une des options suivantes : • Exporter l’image active uniquement préserve les noms des calques et exporte uniquement l’image en cours. • Convertir les images en calques exporte les images Fireworks en tant que calques. 6 Sélectionnez Compatible FreeHand pour exporter le fichier et l’utiliser dans FreeHand. Cette option ignore et convertit les trames dégradées en trames unies. 7 Cliquez sur OK. 8 A partir de la boîte de dialogue Exporter, cliquez sur Enregistrer. Remarque : Lors de l’exportation, Fireworks définit des bords nets. 9 Accédez à un document ouvert dans FreeHand. 10 Choisissez Fichier > Ouvrir ou Fichier > Importer pour naviguer vers le fichier que vous avez exporté depuis Fireworks, puis cliquez sur Ouvrir. Copie et collage de vecteurs dans FreeHand Vous pouvez utiliser la commande de copie de contours de trajets pour copier des trajets Fireworks vers FreeHand. Cette commande copie uniquement les trajets Fireworks. Remarque : La copie et le collage de vecteurs Fireworks dans d’autres applications fonctionne avec FreeHand et avec Illustrator, CorelDraw et Adobe Photoshop. Pour copier les trajets Fireworks sélectionnés : 1 Choisissez Edition > Copier les contours de trajet ou cliquez sur le bouton Exportation rapide et choisissez la commande de copie de contours de trajets dans le menu déroulant FreeHand. 2 Accédez à un document ouvert dans FreeHand. 3 Choisissez Edition > Coller pour coller les trajets. Utilisation d’autres applications graphiques vectorielles Fireworks peut partager des graphiques vectoriels avec d’autres applications graphiques, dont Adobe Illustrator et Corel Draw. Dans Fireworks, vous exportez et importez des graphiques vectoriels depuis ces applications comme vous le faites dans Macromedia FreeHand. Pour plus d’informations, voir « Utilisation de Macromedia FreeHand » à la page 393. 396 Chapitre 16 Fonctions non prises en charge Etant donné que Fireworks et d’autres éditeurs graphiques vectoriels ne partagent pas toujours les mêmes fonctions, l’apparence des objets d’une application à l’autre peut varier. La plupart des éditeurs graphiques vectoriels, dont Macromedia FreeHand, ne prennent pas en charge les fonctions suivantes : • • • • • • • • Les effets applicables en direct ; Modes de fondu ; Texture, motif, tramage Web et trames dégradées ; Objets découpe et cartes-images ; Nombreuses options de formatage du texte ; Repères, grilles et couleur du document ; Images bitmap ; Certains traits. Remarque : Du fait que ces fonctions ne sont pas prises en charge par la plupart des autres applications graphiques vectorielles, Fireworks ne les utilise pas lors de l’exportation vers ces applications. De même, Fireworks ne prend pas en charge toutes les fonctions des autres éditeurs graphiques vectoriels. Par exemple, lorsque Fireworks importe des fichiers CorelDraw (CDR), il effectue les ajustements suivants pour tenir compte des fonctions non prises en charge : • Le contenu de la page de référence est répété dans toutes les images de Fireworks. • Seuls les deux derniers objets d’un dégradé CorelDRAW sont importés. Les objets sont regroupés après importation. • Les dimensions sont converties en objets vectoriels. • Le texte sans mise en forme est importé. La plupart des attributs de caractères et de paragraphes ne sont pas pris en charge. • Les couleurs sont converties en RVB. Remarque : Fireworks ne peut pas ouvrir les fichiers compressés CorelDraw. Utilisation de Macromedia Director Vous pouvez combiner la puissance de Fireworks et Director. Fireworks permet d’exporter des contenus graphiques et interactifs dans Director. Le processus d’exportation préserve les comportements et les découpes du graphisme. Vous pouvez exporter en toute sécurité les images découpées avec des survols, voire des images comportant des calques. Cela permet aux utilisateurs de Director de tirer parti des outils d’optimisation et de conception de graphismes de Fireworks sans compromettre la qualité. Remarque : Si vous utilisez Director 8.0 ou une version supérieure, vous devez télécharger la version gratuite Fireworks Import Xtra pour Director depuis le site http://www.macromedia.com/fr/, et l’installer. Insertion de fichiers Fireworks dans Director Director peut importer des images fusionnées dans Fireworks, tels que des fichiers JPEG et GIF. Il peut également importer des images PNG 32 bits avec transparence. Pour les contenus découpés, interactifs et animés, Director peut importer du code HTLM Fireworks. Utilisation de Fireworks avec d’autres applications 397 Pour plus d’informations sur l’exportation d’images Fireworks fusionnées, telles que des images aux formats JPEG et GIF, voir « Exportation d’une seule image » à la page 357. Exportation de graphiques avec tranparence Dans Director, la transparence peut être réalisée en important des images PNG 32 bits. Vous pouvez exporter des graphiques PGN 32 bits avec transparence depuis Fireworks. Pour exporter un fichier PNG 32 bits avec transparence : 1 Dans Fireworks, choisissez Fenêtre > Optimiser, remplacez le format d’exportation par PNG 32 et affectez la valeur Transparente à Matage. 2 Choisissez Fichier > Exporter. 3 Sélectionnez Images uniquement dans le menu déroulant Enregistrer comme type. Nommez le fichier, puis cliquez sur Enregistrer. Exportation de contenu calqué et découpé vers Director En exportant des découpes Fireworks vers Director, vous pouvez exporter des contenus découpés et interactifs, tels que des boutons et des images de survol. En exportant des calques vers Director, vous pouvez exporter des contenus Fireworks calqués tels que des animations. Pour exporter des fichiers Fireworks vers Director : 1 Dans Fireworks, choisissez Fichier > Exporter. Remarque : Vous pouvez également cliquer sur le bouton d’exportation rapide et choisir l’option de source comme calques ou de source comme découpes dans le menu déroulant Director. Choisissez l’option de source comme calques, si vous exportez une animation et l’option de source comme découpes si vous exportez un contenu interactif, tels que des boutons. 2 A partir de la boîte de dialogue Exporter, tapez un nom de fichier et choisissez un dossier de destination. 3 A partir du menu déroulant Enregistrer sous, choisissez Director. 4 Choisissez une option dans le menu déroulant Source. Calques Fireworks exporte les calques du document. Choisissez cette option, si vous exportez un contenu ou une animation avec calque. Découpes Fireworks exporte les découpes du document. Choisissez cette option si vous exportez un contenu découpé ou interactif, tel que des images de survol et des boutons. 5 Activez Rogner les images pour recadrer automatiquement les images exportées en fonction des objets qu’elles contiennent. 6 Sélectionnez Placer les images dans le sous-dossier pour choisir le dossier devant recevoir les images. 7 Cliquez sur Enregistrer. Importation de fichiers Fireworks vers Director Dans Director, vous pouvez importer des images fusionnées que vous avez exportées depuis Fireworks, telles que JPEG, GIF et PNG 32 bits. Ou, vous pouvez importer des calques, des découpes et des éléments interactifs en insérant du code HTML Fireworks. 398 Chapitre 16 Pour importer une image Fireworks fusionnée : 1 Dans Director, choisissez Fichier > Importer. 2 Accédez au fichier approprié et cliquez sur Importer. 3 Si nécessaire, changez les options de la boîte de dialogue des options d’image. Pour plus d’informations sur ces options, voir Utilisation de Director. 4 Cliquez sur OK. Le graphique importé apparaît sous la forme d’un fichier bitmap. Pour importer des calques, des découpes et des éléments interactifs Fireworks : 1 Dans Director, choisissez Insertion > Fireworks > Images dans Fireworks HTML. Remarque : L’emplacement et le nom de cette commande peuvent être différents dans votre version Director. 2 Recherchez le fichier HTML Fireworks que vous avez exporté dans Director. La boîte de dialogue d’ouverture Fireworks HTML s’affiche. 3 Changez les options appropriées : Couleur permet de définir la profondeur de couleur des graphiques importés. S’ils contiennent une transparence, choisisssez Couleur 32 bits. Enregistrement permet de définir le point de repère du graphique importé. Importation de comportements de survol en code Lingo convertit les comportements Fireworks en code Lingo. Importer selon scénario place 4 les acteurs dans le Scénario après l’importation. Cliquez sur Ouvrir. Le graphique et le code du fichier HTML Fireworks sont importés. Remarque : Si vous importez une animation Fireworks, faites glisser les cadres dans Director pour compenser le délai de chaque calque importé, si nécessaire. Utilisation de Fireworks avec d’autres applications 399 Modification des acteurs Director dans Fireworks L’intégration avec lancement et modification permet de modifier les acteurs Director en lançant Fireworks pour les modifier dans Director. Vous pouvez également lancer Fireworks dans Director pour optimiser les acteurs. Pour lancer Fireworks pour modifier les acteurs Director : 1 Dans Fireworks, cliquez avec le bouton droit de la souris (Windows) ou appuyez sur la touche Contrôle et cliquez (Macintosh) dans la fenêtre Distribution. 2 Choisissez Lancer éditeur externe dans le menu déroulant. Remarque : Si Fireworks ne démarre pas comme éditeur d’image externe, dans Director, choisissez Fichier > Préférences > Editeurs et définissez Fireworks comme éditeur externe de fichiers graphiques bitmap. Le fichier s’ouvre dans Fireworks et la fenêtre de document indique que vous modifiez un fichier de Director. 3 Modifiez l’image et cliquez sur Terminé. Fireworks exporte le nouveau graphique vers Director. Optimisation des acteurs dans Director Vous pouvez lancer Fireworks dans Director pour effectuer rapidement des modifications d’optimisation sur acteurs sélectionnés. Pour lancer Fireworks pour changer les paramètres d’optimisation d’un acteur Director : 1 Dans Director, sélectionnez l’acteur dans la fenêtre Distribution et cliquez sur Optimiser dans l’onglet Bitmap du Vérificateur de propriétés de Fireworks. 2 Dans Fireworks, modifiez les paramètres d’optimisation de manière appropriée. 3 Cliquez sur Mettre à jour une fois que vous avez terminé. Cliquez sur Terminé si la boîte de dialogue Edition MIX apparaît. L’image est exportée vers Director avec les nouveaux paramètres. Utilisation de Macromedia HomeSite Vous pouvez utiliser Fireworks et HomeSite pour créer et modifier des pages Web. L’exportation et l’ouverture de code Fireworks HTML dans HomeSite est simple et l’insertion de graphiques Fireworks dans des documents HomeSite est tout aussi simple. Mais élément important, Fireworks et HomeSite partagent une intégration puissance qui permet de lancer Fireworks depuis HomeSite pour modifier des graphiques Web. 400 Chapitre 16 Insertion d’images Fireworks dans HomeSite Vous pouvez placer des images GIF ou JPEG Fireworks dans un document HomeSite. Vous devez exporter préalablement les images depuis Fireworks. Pour pus d’informations sur l’exportation d’images aux formats GIF et JPEG, voir « Exportation d’une seule image » à la page 357. Pour importer une image Fireworks dans un document HomeSite : 1 Enregistrez le document dans HomeSite. Remarque : HomeSite crée des chemins relatifs vers les images, mais il ne peut le faire que si vous avez enregistré le document. 2 Dans la fenêtre des ressources, accédez à l’image Fireworks que vous avez exportée. 3 Créez un lien vers l’image Fireworks dans le document : • Faites glisser le fichier de la fenêtre des ressources vers l’emplacement sélectionné dans le code HTML sous l’onglet d’édition de la fenêtre Document. • Dans l’onglet d’édition de la fenêtre Document, placez le curseur à l’endroit où vous désirez insérer l’image Fireworks, puis cliquez le bouton droit de la souris dans la fenêtre des Ressources et choisissez l’option d’insertion sous la forme d’un lien. Un lien vers l’image Fireworks est créé dans le code HTML. Cliquez sur l’onglet Parcourir pour afficher l’aperçu de l’image dans le document. Insertion de code HTML Fireworks dans HomeSite Vous pouvez placer du code HTML de différentes manières dans HomeSite. Vous pouvez exporter le code Fireworks ou le copier dans le Presse-papiers. Vous pouvez également ouvrir un fichier HTML Fireworks exporté dans HomeSite et copier et coller des parties du code. En outre, vous pouvez aisément mettre à jour le code que vous avez exporté vers HomeSite en utilisant la commande Mettre à jour le code HTML de Fireworks. Remarque : Avant d’exporter, de copier ou de mettre à jour du code HTML Fireworks pour l’utiliser dans HomeSite, veillez à définir le type de code HTL générique dans la boîte de dialogue Configurer HTML. Pour plus d’informations, voir « Définition des options d’exportation du code HTML » à la page 369. Exportation de code HTML Fireworks vers HomeSite L’exportation de code HTML Fireworks génère un fichier HTML et les fichiers images associées dans l’emplacement que vous définssez. Vous pouvez ensuite ouvrir le fichier HTML dans HomeSite pour le modifier. Remarque : Avant d’exporter, définissez le type HTML générique dans la boite de dialogue Configurer HTML. Pour plus d’informations, voir « Définition des options d’exportation du code HTML » à la page 369. Pour exporter du code HTML Fireworks vers HomeSite : Exportez le document dans le format HTML dans Fireworks et ouvrez le fichier exporté dans HomeSite en choisissant Fichier > Ouvrir. Pour plus d’informations, voir « Exportation de code généré par Fireworks » à la page 363. Utilisation de Fireworks avec d’autres applications 401 Copie de code HTML Fireworks dans le Presse-papiers pour l’utiliser dans HomeSite Une méthode rapide d’insertion de code HTML Fireworks-dans HomeSite consiste à copier le code dans le Presse-papiers de Fireworks et à le coller directement dans le document HomeSite. Lorsque vous copiez du code HTLM Fireworks dans le Presse-papiers, les images nécessaires sont exportées vers l’emplacement que vous définissez. Remarque : Avant de copier le code dans le Presse-papiers, définissez le code HTML générique dans la boîte de dialogue Configurer HTML. Pour plus d’informations, voir « Définition des options d’exportation du code HTML » à la page 369. Pour copier du code HTML Fireworks pour l’utiliser dans HomeSite : Copiez le code HTML dans le Presse-papiers de Fireworks et collez-le dans un nouveau document HomeSite. Pour plus d’informations, voir « Copie d’un code HTML dans le Presse-papiers » à la page 364. Copie de code d’un fichier exporté Fireworks et collage du code dans HomeSite Vous pouvez ouvrir un fichier HTML Fireworks exporté dans HomeSite et copier et coller uniquement les sections appropriées dans un autre document HomeSite. Remarque : Avant d’exporter, définissez le type HTML générique dans la boîte de dialogue Configurer HTML. Pour plus d’informations, voir « Définition des options d’exportation du code HTML » à la page 369. Pour copier du code d’un fichier Fireworks exporté et le coller dans HomeSite : Exportez un fichier HTML Fireworks et copiez et collez le code approprié dans un document HomeSite existant. Pour plus d’informations, voir « Copie et collage d’un code HTML à partir d’un fichier Fireworks » à la page 366. Mise à jour de code HTML Fireworks exporté dans HomeSite La commande Mettre à jour le code HTML pemet de modifier un document HTML Fireworks que vous avez exporté vers HomeSite. Remarque : Avant de mettre à jour le code HTML, définissez le type HTML générique dans la boîte de dialogue Configurer HTML. Pour plus d’informations, voir « Définition des options d’exportation du code HTML » à la page 369. Pour mettre à jour du code HTML Fireworks exporté dans HomeSite : Utilisez la commande Mettre à jour le code HTML dans Fireworks. Pour plus d’informations, voir « Mise à jour d’un code HTML exporté » à la page 367. Modification d’images Fireworks dans HomeSite Vous pouvez utiliser l’intégration des fonctionnalités de lancement et de modification pour modifier des images dans un document HomeSite. HomeSite lance automatiquement Fireworks pour vous permettre de modifier l’image. Lorsque vous quittez Fireworks, les mises à jour que vous avez effectuées sont automatiquement appliquées à l’image insérée dans HomeSite. Ensemble, les deux applications fournissent un processus rationnel de modification de graphiques Web dans les pages HTML. 402 Chapitre 16 Pour lancer et modifier des images Fireworks dans HomeSite : 1 Enregistrez le document dans HomeSite. 2 Utilisez l’une des méthodes suivantes : • Cliquez avec le bouton droit sur le fichier image dans l’un des onglets de fichiers de la fenêtre des ressources. • Cliquez avec le bouton droit sur l’onglet Vignettes de la fenêtre du résultat. • Cliquez avec le bouton droit sur la balise <img> associée dans le code HTML sous l’onglet d’édition de la fenêtre Document. 3 Choisissez l’option d’édition dans Macromedia Fireworks dans le menu déroulant. HomeSite lance Fireworks, s’il n’est pas ouvert. 4 Si un message vous le demande, indiquez si vous désirez rechercher le fichier source Fireworks de l’image insérée. Pour plus d’informations sur les fichiers source PNG, voir « Enregistrement de fichiers Fireworks » à la page 84. 5 Modifiez l’image dans Fireworks. La fenêtre du document indique que vous modifiez une image Fireworks d’une autre application. 6 Une fois les modifications terminées, cliquez sur Terminé dans la fenêtre du document. L’image mise à jour est exportée vers HomeSite et le fichier source PNG est enregistré si un fichier source a été sélectionné. Utilisation de Microsoft FrontPage Fireworks dispose de fonctions d’intégration puissantes lorsqu’il est combiné avec de nombreuses applications, y compris les produits autres que ceux de Macromedia. Fireworks facilite la création et la modification des pages Web avec Microsoft FrontPage. Avec Roundtrip HTML, vous pouvez aisément lancer Fireworks depuis FrontPage pour créer ou modifier des graphiques et des tables HTML. Roundtrip HTML, une fonction d’intégration puissante que Fireworks partage avec FrontPage et Macromedia Dreamweaver, permet d’effectuer des modifications dans une application et de répercuter ces modifications dans une autre. Insertion d’images Fireworks dans FrontPage Vous pouvez insérer des graphiques Fireworks dans un document FrontPage de deux manières. Vous pouvez insérer un graphique Fireworks terminé à l’aide du menu Insert de FrontPage ou créer un graphique Fireworks en cliquant sur le bouton d’édition Fireworks de la barre d’outils principale de FrontPage. Insertion d’images Fireworks dans FrontPage Vous pouvez insérer des images Fireworks GIF ou JPEG directement dans un document FrontPage. Vous devez exporter préalablement les images depuis Fireworks. Pour pus d’informations sur l’exportation d’images aux formats GIF et JPEG, voir « Exportation d’une seule image » à la page 357. Pour insérer une image Fireworks dans un document FrontPage : 1 Dans la vue Edit ou Code, placez le curseur à l’endroit où vous désirez insérer l’image. 2 Choisissez Insertion > Image > Depuis fichier. Utilisation de Fireworks avec d’autres applications 403 3 Accédez aux fichiers Fireworks approprié, puis cliquez sur OK. Création d’images Fireworks dans FrontPage Vous pouvez lancer Fireworks dans FrontPage pour créer une image non découpée. Remarque : Pour créer une image découpée, vous devez préalablement créer et exporter une image non découpée. Lancez et modifiez ensuite le graphique dans Fireworks pour ajouter des découpes et des éléments d’interactivité. Pour plus d’informations sur le lancement et la modification de graphiques existants depuis FrontPage, voir « Modification de fichiers Fireworks dans FrontPage » à la page 406. Pour créer une image non découpée Fireworks dans FrontPage : 1 Lorsque vous lancez et modifiez des images Fireworks placées dans Dreamweaver, le Vérificateur de propriétés de Dreamweaver indique s’il s’agit d’une image ou d’une table. 2 Cliquez sur Oui, si le message qui s’affiche vous demande si vous voulez créer une image. Fireworks démarre s’il n’est pas ouvert. 3 Ouvrez un nouveau document dans Fireworks et créez une image. 4 Choisissez Fichier > Enregistrer une fois que vous avez terminé. Spécifiez le nom et l’emplacement du fichier source PNG dans la boîte de dialogue Enregistrer sous et cliquez sur Enregistrer. Pour plus d’informations sur l’enregistrement des fichiers PNG, Fireworks, voir « Enregistrement de fichiers Fireworks » à la page 84. 5 Choisissez Fichier > Exporter. Spécifiez le nom et l’emplacement de l’image exportés dans la boîte de dialogue Exporter. 6 Cliquez sur Enregistrer dans la boîte de dialogue Exporter pour exporter le fichier. 7 Revenez dans FrontPage. 8 Dans la vue Edit ou Code, placez le curseur à l’endroit où vous désirez insérer l’image. 9 Choisissez Insertion > Image > Depuis fichier. 10 Accédez au fichier image que vous venez d’exporter, puis cliquez sur Insérer. Insertion de code HTLML Fireworks dans FrontPage Vous pouvez placer du code HTLM Fireworks dans FrontPage de différentes manières. Vous pouvez exporter le code HTML Fireworks ou le copier dans le Presse-papiers. Vous pouvez également ouvrir un fichier HTML Fireworks exporté vers FrontPage et copier et coller des parties du code. En outre, vous pouvez mettre à jour aisément le code que vous avez exporté vers FrontPage en utilisant la commande Mettre à jour le code HTML dans Fireworks. Remarque : Avant d’exporter, de copier ou de mettre à jour un fichier HTL Fireworks pour l’utiliser dans FrontPage, définissez le type HTML FrontPage dans la boîte de dialogue Configurer HTML. Pour plus d’informations, voir « Définition des options d’exportation du code HTML » à la page 369. Exportation de code HTML Fireworks vers FrontPage L’exportation de code HTML Fireworks génère un fichier HTML et les fichiers images associés dans l’emplacement que vous définissez. Vous pouvez ensuite ouvrir le fichier HTML dans FrontPage pour le modifier. 404 Chapitre 16 Remarque : Avant de copier le code HTML Fireworks pour l’utiliser dans FrontPage, définissez le type HTML FrontPage dans la boîte de dialogue Configurer HTML. Pour plus d’informations, voir « Définition des options d’exportation du code HTML » à la page 369. Pour exporter du code HTML Fireworks vers FrontPage : Exportez le document Fireworks dans le format HTML et choisissez Fichier > Ouvrir pour ouvrir dans FrontPage le fichier HTML exporté. Pour plus d’informations, voir « Exportation de code généré par Fireworks » à la page 363. Copie de code HTML Fireworks dans le Presse-papiers pour l’utiliser dans FrontPage L’une des méthodes permettant d’insérer rapidement un code HTML Fireworks dans FrontPage consiste à le copier dans le Presse-papiers de Fireworks, puis à le coller directement dans un document FrontPage. L’ensemble du code HTML et JavaScript associé au document Fireworks est copié dans le document FrontPage et toutes les images sont exportées vers l’emplacement spécifié. Remarque : Avant de copier le code HTML Fireworks pour l’utiliser dans FrontPage, définissez le type HTML FrontPage dans la boîte de dialogue Configurer HTML. Pour plus d’informations, voir « Définition des options d’exportation du code HTML » à la page 369. Pour copier du code HTML Fireworks dans le Presse-papiers pour l’utiliser dans FrontPage : Copiez le code HTML vers le Presse-papiers dans Fireworks et collez-le dans un nouveau document FrontPage. Pour plus d’informations, voir « Copie d’un code HTML dans le Pressepapiers » à la page 364. Remarque : Cette méthode n’est pas recommandée si le document Fireworks contient des boutons ou d’autres éléments interactifs nécessitant du code JavaScript, car le code HTML et JavaScript devra être modifié après l’avoir collé dans FrontPage. Pour plus d’informations, voir « Exportation du fichier au format HTML » à la page 362. Copie de code depuis un fichier Fireworks exporté et collage dans FrontPage Vous pouvez ouvrir un fichier HTML Fireworks exporté et copier et coller manuellement uniquement les sections appropriées dans un autre document FrontPage. Remarque : Définissez le type HTML FrontPage dans la boîte de dialogue Configurer HTML avant d’exporter le code depuis Fireworks. Pour plus d’informations, voir « Définition des options d’exportation du code HTML » à la page 369. Pour copier du code d’un fichier Fireworks exporté et le coller dans FrontPage : Exportez un fichier HTML Fireworks et copiez et collez le code approprié dans un document FrontPage existant. Pour plus d’informations, voir « Copie et collage d’un code HTML à partir d’un fichier Fireworks » à la page 366. Mise à jour de code HTML Fireworks exporté dans FrontPage La commande Mettre à jour le code HTML permet de modifier dans frontPage un document HTML Fireworks que vous avez exporté. Remarque : Avant de le modifier, définissez le type HMTL FrontPage dans la boîte de dialogue Configurer HTML. Pour plus d’informations, voir « Définition des options d’exportation du code HTML » à la page 369. Utilisation de Fireworks avec d’autres applications 405 Pour mettre à jour du code HTML Fireworks exporté dans FrontPage : Utilisez la commande Mettre à jour le code HTML dans Fireworks. Pour plus d’informations, voir « Mise à jour d’un code HTML exporté » à la page 367. Modification de fichiers Fireworks dans FrontPage L’utilisation combinée de Fireworks et FrontPage facilite l’utilisation de Roundtrip HTML, une fonction qui permet d’effectuer des modifications dans une application et de les répercuter dans une autre. Avec Roundtrip HTML, l’intégration des fonctionnalités de lancement et de modification permet de modifier des images et des tableaux Fireworks insérés dans un document FrontPage. FrontPage lance automatiquement Fireworks pour vous permettre de modifier l’image Fireworks. Les modifications effectuées dans Fireworks sont automatiquement appliquées à l’image dans FrontPage. Utilisées conjointement, ces deux applications permettent de rationaliser le processus de modification et d’insertion de fichiers graphiques Web dans des pages HTML. Pour lancer et modifier des images et des tableaux Fireworks dans FrontPage : 1 Enregistrez le document dans FrontPage 2 Sélectionnez la découpe d’image ou de tableau à modifier et cliquez sur le bouton Lancer et modifier le graphique sélectionné dans Fireworks. FrontPage lance Fireworks s’il n’est pas ouvert. 3 Si le programme vous le demande, indiquez si vous désirez lancer le fichier source Fireworks de l’image ou du tableau inséré. Pour plus d’informations sur les fichiers source PNG, voir « Enregistrement de fichiers Fireworks » à la page 84. Remarque : Lorsque vous lancez et modifiez une image ou une découpe d’un tableau Fireworks, Fireworks lance le fichier source PNG de l’ensemble du tableau. 4 Modifiez l’image dans Fireworks. La fenêtre du document indique que vous modifiez une image Fireworks dans FrontPage. 5 Une fois les modifications terminées, cliquez sur Terminé dans la fenêtre du document. L’image ou le code HTML est exporté en utilisant les paramètres d’optimisation en cours, les graphiques utilisés par FrontPage sont mis à jour et le fichier source PGN est sauvegardé si un fichier source a été sélectionné. Utilisation avec Adobe Photoshop Fireworks assure une excellente prise en charge de l’importation de fichiers natifs Photoshop (PSD), avec des options qui permettent de conserver de nombreux aspects des fichiers importés (calques, masques et texte modifiable). Vous pouvez donc importer des images Photoshop dans Fireworks afin de les modifier et de les optimiser pour le Web, sans perdre la possibilité de réexporter ces images vers Photoshop. Insertion de graphiques Photoshop dans Fireworks Vous pouvez faire glisser et déposer des graphiques individuels Photoshop dans Fireworks ou importer la totalité d’un fichier Photoshop. 406 Chapitre 16 Insertion de graphiques Photoshop dans Fireworks par Glisser-déposer Vous pouvez insérer des graphiques Photoshop dans Fireworks en effectuant une action de glisserdéposer. Pour faire glisser et déposer un graphique Photoshop dans Fireworks : Faites glisser le graphique de Photoshop vers un document ouvert dans Fireworks. Chaque graphique que vous faites glisser devient un nouvel objet bitmap. Les texte est également importé sous la forme d’un objet bitmap et devient un texte non modifiable. Pour plus d’informations, voir « Importation de texte depuis Photoshop » à la page 407. Importation de fichiers Photoshop dans Fireworks Lorsque vous importez ou ouvrez un fichier Photoshop dans Fireworks, le fichier est converti en fichier PNG selon les préférences d’importation que vous avez indiquées. Outre la conservation des calques et du texte selon les options d’importation que vous avez définies, Fireworks préserve et convertit les éléments de Photoshop suivants : • Les masques de calques sont convertis en masques d’objets dans Fireworks. • Les effets de calques sont convertis en effets en direct Fireworks si l’effet en direct correspondant existe. Par exemple, l’effet de calque Ombre portée est converti dans Fireworks en effet Ombre portée. Remarque : Les effets de calque et les effets en direct peuvent modifier légèrement l’apparence. • Les modes de fusion des calques sont convertis en modes de fusion Fireworks pour les objets correspondants, si ces modes sont pris en charge par Fireworks. • La première couche alpha de la palette Couches est convertie en zones transparentes dans l’image Fireworks. Fireworks ne prend pas en charge les autres couches alpha de Photoshop. Les calques de réglage, les groupes de détourage et les trajectoires de Photoshop ne sont pas pris en charge par Fireworks. Fireworks ignore donc ces fonctionnalités lors de l’importation de fichiers Photoshop. Remarque : Sous Windows, les noms de fichiers Photoshop doivent inclure une extension PSD de façon à être identifiés correctement par Fireworks. Pour importer un fichier Photoshop dans Fireworks : 1 Choisissez Fichier > Importer ou Fichier > Ouvrir et accédez à un fichier Photoshop (PSD). 2 Cliquez sur Ouvrir. Le fichier Photoshop est importé comme fichier PNG. Si vous effectuez des modifications et voulez enregistrer le fichier dans le format PSD, vous devez l’exporter dans ce format. Pour plus d’informations, voir « Insertion de graphiques Fireworks dans Photoshop » à la page 409. Importation de texte depuis Photoshop Vous pouvez ouvrir ou importer un fichier Photoshop contenant du texte. Lorsque vous ouvrez le fichier, Fireworks vérifie si vous disposez des polices nécessaires sur votre système. Si tel n’est pas le cas, Fireworks vous demande si vous voulez remplacer les polices ou conserver l’apparence. Pour plus d’informations, voir « Traitement des polices manquantes » à la page 191. Utilisation de Fireworks avec d’autres applications 407 Si le texte du fichier Photoshop contient des effets pris en charge par Fireworks, ces effets sont conservés dans Fireworks. Toutefois, étant donné que Fireworks et Photoshop n’appliquent pas les effets de la même manière, ces effets peuvent être différents dans chaque application. Lorsque vous ouvrez ou importez dans Fireworks des fichiers Photoshop 6 ou 7 contenant du texte, une image cache du texte s’affiche pour conserver son apparence Photoshop. Lorsque vous modifiez le texte, l’image cache est remplacée par le texte réel dont l’apparence peut être différente de celle de l’original. Remarque : Fireworks ne permet pas d’exporter du texte dans le format Photoshop 6 ou 7. Si vous modifiez un document contenant du texte Photoshop 6 ou 7 et exportez le document dans Photoshop, le fichier est exporté dans le format Photoshop 5.5. Si vous ne modifiez pas le texte, le fichier est exporté dans le format Photoshop 6. Pour plus d’informations sur les fichiers Photoshop, voir « Insertion de graphiques Fireworks dans Photoshop » à la page 409. Options d’importation des fichiers Photoshop Les options d’importation de Fireworks permettent de définir la manière dont les calques et le texte seront traités dans les fichiers Photoshop importés. Selon les options que vous choisissez, vous pouvez contrôler le degré d’apparence et de possibilité de modification des fichiers importés. Pour spécifier des options d’importation de fichiers Photoshop : 1 Choisissez Edition > Préférences. Remarque : Sous Mac OS X, choisissez Fireworks > Préférences. 2 Cliquez sur l’onglet d’importation (Windows) ou choisissez l’option d’importation dans le menu déroulant (Macintosh). 3 Choisissez les options d’importation : Calques : Convertir en objets Fireworks importe chaque calque du fichier Photoshop sous la forme d’un objet dans un calque de Fireworks. Calques : Partager le calque entre les images rend les calques importés visibles dans toutes les images du fichier Fireworks. Calques : Convertir en images importe chaque calque du fichier Photoshop comme objet dans un calque séparé de Fireworks. Cette option est utile pour importer des fichiers destinés à une animation. Texte : Modifiable convertit le texte du fichier Photoshop en texte modifiable dans Fireworks. Cette option permet de modifier le texte importé à l’aide du Vérificateur de propriétés et des outils Texte Fireworks. Le texte converti peut changer légèrement d’aspect par rapport à l’original. Texte : Conserver l’apparence convertit le texte du fichier Photoshop en objet bitmap dans Fireworks. Cette option préserve l’aspect original du texte, mais ne vous permet pas de modifier celui-ci à l’aide des outils Texte de Fireworks. Utiliser image composite 2 D importe sans les calques d’origine. 4 Cliquez sur OK. 408 Chapitre 16 le fichier Photoshop sous la forme d’image fusionnée Importation de filtres et de plug-ins Photoshop Fireworks permet d’importer des filtres et des plug-ins Photoshop et d’autres filtres et plug-ins tiers. Vous pouvez importer des filtres dans la fenêtre des effets en direct ou le menu des filtres. L’importation de filtres dans ces deux emplacements permet d’y accéder depuis les deux emplacements. Remarque : Les filtres et les plug-ins Photoshop 6 et 7 ne sont pas compatibles avec Fireworks MX. Sous Macintosh, les filtres tiers fonctionnant sous Mac OS 9 sont pris en charge par Fireworks MX pour Mac OS 9 et ceux fonctionnant sous Mac OS X sont pris en charge par Fireworks MX pour Mac OS X. Pour plus d’informations sur la fenêtre des effets en direct et le menu des filtres, voir« Utilisation des effets en direct » à la page 219. Pour importer des filtres et des plug-ins Photoshop ou des filtres et plug-ins tiers à l’aide de la boîte de dialogue Préférences : 1 Choisissez Edition > Préférences. Remarque : Sous Mac OS X, choisissez Fireworks > Préférences. 2 Cliquez sur l’onglet Dossiers (Windows) ou choisissez Dossiers dans le menu déroulant (Macintosh). 3 Choisissez l’option Plug-ins Photoshop. La boîte de dialogue de sélection de dossier Windows ou Macintosh s’affiche. Remarque : Si la boîte de dialogue ne s’ouvre pas, cliquez sur Parcourir. 4 Accédez au dossier d’installation des filtres et des plug-ins Photoshop ou tiers et cliquez sur Sélectionner (Windows) ou Choisir (Macintosh). 5 Cliquez sur OK pur fermer la boîte de dialogue Préférences. 6 Redémarrez Fireworks pour charger les filtres et les plug-ins. Pour importer des filtres et des plug-ins Photoshop et tiers avec la fenêtre des effets en direct : 1 Sélectionnez n’importe quel objet vectoriel, objet bitmap ou bloc de texte sur le fond et cliquez sur le bouton Ajouter des effets dans le Vérificateur de propriétés. Remarque : Ce bouton est disponible uniquement lorsqu’un objet est sélectionné dans le document. 2 Choisissez Options > Rechercher les plug-ins dans le menu déroulant qui apparaît. 3 Accédez au dossier d’installation des filtres et des plug-ins Photoshop ou tiers et cliquez sur Sélectionner (Windows) ou Choisir (Macintosh). Cliquez sur OK, si le message qui s’affiche vous demande si vous voulez redémarrer Fireworks. 4 Redémarrez Fireworks pour charger les filtres et les plug-ins. Insertion de graphiques Fireworks dans Photoshop Fireworks offre de nombreuses options d’exportation de fichiers au format Photoshop (PSD). Les paramètres d’exportation permettent de contrôler les éléments du fichier qui resteront modifiables lorsque vous rouvrirez le fichier dans Photoshop. Utilisation de Fireworks avec d’autres applications 409 Une image Fireworks exportée dans Photoshop reste modifiable lorsque vous la rouvrez dans Fireworks en tant que graphisme Photoshop. Les options d’exporation pour la modification, l’apparence et la taille de fichier permettent de déterminer la meilleure procédure d’exportation d’un graphique. Les utilisateurs de Photoshop peuvent travailler sur leurs graphismes dans Fireworks, puis poursuivre leur modification dans Photoshop. Pour exporter un graphisme au format Photoshop : 1 Choisissez Fichier > Exporter ou cliquez sur le bouton Exportation rapide et choisissez Autre > Exporter vers Photoshop. 2 A partir de la boîte de dialogue Exporter, donnez un nom au fichier et choisissez le format Photoshop PSD dans le menu Type. 3 Pour choisir les paramètres d’exportation groupés, sélectionnez une option dans le menu Paramètres qui apparaît. Ces groupes de paramètres représentent des combinaisons prédéfinies d’options d’exportation pour les objets, les effets et le texte du fichier Fireworks. Les options d’exportation sont décrites en détail dans « Personnalisation des fichiers à exporter vers Photoshop » à la page 410. • Conserver le caractère modifiable et sacrifier l’aspect convertit les objets en calques, préserve le caractère modifiable des effets et convertit le texte en calques de texte Photoshop modifiables. Choisissez cette option si vous désirez retoucher l’image dans Photoshop et n’avez pas besoin de préserver l’aspect exact de l’image Fireworks. • Conserver l’aspect de Fireworks convertit chaque objet en calque Photoshop, mais les effets et le texte ne peuvent plus être modifiés. Choisissez cette option si vous désirez garder le contrôle des objets Fireworks dans Photoshop tout en préservant l’aspect original de l’image Fireworks. • Fichier Photoshop réduit fusionne les calques pour créer une image. Choisissez cette option si vous exportez un fichier contenant un grand nombre d’objets Fireworks. • Personnalisé permet de choisir des paramètres spécifiques pour les objets, les effets et le texte. 4 Cliquez sur Enregistrer pour exporter votre fichier Photoshop. Remarque : Photoshop 5.5 et les versions précédentes ne permettent pas d’ouvrir les fichiers comportant plus de 100 calques. Vous devez supprimer ou fusionner les objets lorsque le document Fireworks à exporter comporte plus de 100 objets. Personnalisation des fichiers à exporter vers Photoshop Lorsque vous exportez un fichier vers Photoshop, vous pouvez choisir des paramètres personnalisés pour l’exportation des objets, des effets et du texte. Pour personnaliser les paramètres d’exportation vers Photoshop : 1 Dans la boîte de dialogue Exporter, lorsque Phtoshop PSD est sélectionné comme fichier d’exportation, choisissez Personnalisé dans le menu déroulant Paramètres. 2 A partir du menu déroulant Objets, choisissez l’une des options suivantes : Convertir en calques Photoshop convertit chaque objet Fireworks en calque Photoshop et chaque masque Fireworks en masque de calque Photoshop. Fusionner tous les calques Fireworks fusionne l’ensemble des calques Fireworks dans un calque Photoshop. Si vous choisissez cette option, vous n’aurez plus la possibilité de modifier les objets de Fireworks dans Photoshop. Vous perdez également d’autres caractéristiques (modes de fusion) qui sont associées aux objets de Fireworks. 410 Chapitre 16 3 A partir du menu déroulant des effets, choisissez l’une des options suivantes : Conserver le caractère modifiable convertit les effets en direct de Fireworks en équivalents Photoshop. Les effets qui n’existent pas dans Photoshop sont ignorés. Rendu des effets fusionne les effets avec les objets auxquels ils s’appliquent. Si vous choisissez cette option, vous préservez l’aspect des effets, mais n’avez plus la possibilité de les modifier dans Photoshop. 4 A partir du menu déroulant Texte, choisissez l’une des options suivantes : Conserver le caractère modifiable convertit le texte en calque Photoshop modifiable. Le formatage de texte qui n’est pas pris en charge par Photoshop est alors perdu. Rendu du texte transforme le texte en objet image. Si vous choisissez cette option, vous préservez l’aspect du texte, mais n’avez plus la possibilité de le modifier. Utilisation avec Adobe GoLive Vous pouvez utiliser Fireworks et Adobe GoLive® GoLive® ensemble pour créer et modifier des pages Web. Vous pouvez exporter et copier du code HTML Fireworks dans Adobe GoLive, comme vous le faites avec la plupart des éditeurs HTML. La seule exception réside dans le fait que vous devez choisir GoLive HTML comme type HTML avant d’exporter ou de copier le code HTML de Fireworks. Pour plus d’informations sur le choix d’un type HTML, voir « Définition des options d’exportation du code HTML » à la page 369. Pour plus d’informations sur l’exportation et la copie de code HTML Fireworks, voir « Exportation du fichier au format HTML » à la page 362. Remarque : Le type HTML Adobe GoLive ne prend pas en charge les menus déroulants. Si document Fireworks contient des menus déroulants, vous devez choisir le type HTML générique avant l’exportation. Utilisation avec les éditeurs HTML Fireworks génère du code HTML pur qui peut être lu par tous les éditeurs HTML. Pour des informations générales sur l’insertion de code HTML Fireworks dans les éditeurs HTML, voir « Exportation du fichier au format HTML » à la page 362. Fireworks contient des fonctions d’intégration speciales pour Macromedia Dreamweaver, Macromedia HomeSite et Microsoft FrontPage. Pour plus d’informations sur l’utilisation des ces applications, voir Chapitre 16, « Utilisation de Fireworks avec d’autres applications », à la page 373. Fireworks permet d’importer également des contenus HTML. Il s’agit d’une fonction puissante qui permet d’ouvrir et de modifier la plupart des documents HTML dans Fireworks. Pour plus d’informations, voir « Création de fichiers PNG dans Fireworks à partir de fichiers HTML » à la page 80. Utilisation de Fireworks avec d’autres applications 411 412 Chapitre 16 CHAPITRE 17 Automatisation des tâches répétitives Les concepteurs Web perdent souvent du temps à effectuer les mêmes tâches répétitives telles que l’optimisation ou la conversion d’images pour respecter certaines contraintes. Une partie de la puissance de Fireworks MX réside dans sa capacité à automatiser et simplifier de nombreuses tâches fastidieuses dans divers domaines, qu’il s’agisse de dessin, de modification ou de conversion de fichiers. Pour accélérer le processus de modification globale, la fonction Rechercher et remplacer peut être appliquée à des éléments dans un ou plusieurs fichiers. Vous pouvez rechercher et remplacer de nombreux types d’éléments (URL, polices, couleurs, texte et commandes) créés dans le panneau Historique. Vous pouvez utiliser la fonction de traitement par lots pour convertir des groupes entiers de fichiers image dans d’autres formats, ou pour modifier leur palette de couleurs. Le traitement par lots permet d’appliquer des paramètres d’optimisation personnalisés à des groupes de fichiers. Vous pouvez également redéfinir la taille d’un groupe de fichiers, le traitement par lots étant alors un outil idéal pour la création de vignettes. Le panneau Historique permet de créer des commandes représentant des raccourcis vers des fonctions couramment utilisées, ou un script destiné à accomplir une série d’actions complexes. Comme Fireworks reconnaît et exécute le code JavaScript, les utilisateurs chevronnés peuvent automatiser des tâches très complexes en programmant des séquences de code JavaScript qui pourront ensuite être exécutées par Fireworks. Vous pouvez contrôler pratiquement toutes les commandes et fonctions de Fireworks en JavaScript, à l’aide de commandes JavaScript spéciales que Fireworks peut interpréter. Le programme Extension Manager permet d’importer, d’installer et de supprimer des extensions dans les applications Macromedia pour étendre les capacités de Fireworks. Recherche et remplacement La commande Rechercher et remplacer permet de rechercher des éléments (texte, URL, police ou couleur) dans un document et de les remplacer par un élément du même type. Cette recherche / remplacement peut être effectuée dans le document actif ou dans un groupe de fichiers. 413 Lorsque vous utilisez la commande Rechercher et remplacer, Fireworks peut enregistrer la liste des modifications effectuées dans le journal du projet. La commande Rechercher et remplacer ne fonctionne qu’avec des fichiers PNG de Fireworks ou des fichiers contenant des objets vectoriels, tels que les fichiers FreeHand, CorelDRAW non compressés et Illustrator. Rechercher, option Rechercher, option Panneau Rechercher et remplacer Pour sélectionner la source de recherche : 1 Ouvrez le document. 2 Pour ouvrir le panneau Rechercher et Remplacer, procédez de l’une des manières suivantes : • Choisissez Fenêtre > Rechercher et remplacer. • Choisissez Edition > Rechercher et remplacer. • Appuyez sur CTRL+F (Windows) ou sur Commande+F (Macintosh). 3 Dans le premier menu déroulant Rechercher, choisissez la source dans laquelle la recherche doit s’effectuer. Rechercher dans la sélection n’effectue de recherche / remplacement que parmi les éléments actuellement sélectionnés (objets et texte). Rechercher dans l’image n’effectue de recherche / remplacement que dans l’image active. Rechercher dans le document n’effectue de recherche / remplacement que dans le document actif. Rechercher dans le journal du projet effectue une recherche / remplacement dans tous les fichiers qui figurent dans la liste du journal du projet. Pour plus d’informations, voir « Gestion des recherches à l’aide du journal du projet » à la page 427. Rechercher dans les fichiers effectue une recherche / remplacement parmi plusieurs fichiers. Si cette option n’est pas déjà activée dans le menu déroulant Rechercher, sa sélection ouvre une boîte de dialogue dans laquelle vous pouvez indiquer les fichiers à rechercher. Si l’option Rechercher dans les fichiers est déjà sélectionnée dans le menu déroulant Rechercher, indiquez les fichiers à rechercher après avoir lancé la recherche en cliquant sur Rechercher, Remplacer ou Remplacer tout. 4 Dans le second menu déroulant Rechercher, choisissez l’attribut à rechercher. Les options du panneau changent en fonction de votre sélection. 5 Définissez les options de l’attribut de recherche sélectionné. 414 Chapitre 17 6 Choisissez le type de recherche et remplacement désiré : La fonction Recherche détecte la première occurrence de l’élément. Les éléments trouvés sont affichés comme sélectionnés dans le document. La fonction Remplacement remplace les éléments trouvés par le contenu indiqué dans le champ Remplacer par. Le bouton Remplacer tout permet de remplacer en une seule fois tous les éléments trouvés par leur élément de remplacement. Remarque : Lorsque des objets sont remplacés dans plusieurs fichiers, ces fichiers sont automatiquement enregistrés ; ce type de remplacement n’est donc pas réversible à l’aide de la commande Edition > Annuler. Pour plus d’informations, voir « Recherche et remplacement durant un traitement par lots » à la page 423. Définition des options d’une recherche / remplacement dans plusieurs fichiers Lorsque vous effectuez une recherche / remplacement dans plusieurs fichiers, vous pouvez indiquer comment les fichiers ouverts doivent être traités après la recherche. Pour enregistrer, fermer et sauvegarder chaque fichier après la recherche : 1 Choisissez Options de remplacement dans le menu contextuel Options du panneau Rechercher et remplacer. 2 Choisissez Enregistrer et fermer les fichiers pour enregistrer et fermer les fichiers après la recherche / remplacement. Seuls les documents originaux déjà actifs restent ouverts. Remarque : Si l’option Enregistrer et fermer les fichiers est désactivée, et si vous traitez en une seule fois un grand nombre de fichiers, Fireworks peut se trouver à court de mémoire et interrompre le processus de traitement par lots. 3 Choisissez l’une des options suivantes dans le menu contextuel Sauvegarder les fichiers originaux : Pas de copies effectue une recherche / remplacement sans sauvegarder la version originale des fichiers. Le fichier modifié remplace alors le fichier original. Ecraser les copies existantes crée et ne conserve qu’une seule copie de sauvegarde de la version originale de chaque fichier modifié par la recherche / remplacement. Si vous effectuez par la suite de nouvelles opérations de recherche / remplacement sur les mêmes fichiers, le fichier original précédent remplacera toujours la copie de sauvegarde de sa version antérieure. Les copies de sauvegarde sont conservées dans un sous-dossier appelé Original Files. Automatisation des tâches répétitives 415 Sauvegardes incrémentielles conserve toutes les copies de sauvegarde des fichiers modifiés au cours d’opérations de recherche / remplacements. Les fichiers originaux sont alors déplacés dans le sousdossier Original Files au sein de leur dossier actuel, et un chiffre incrémentiel est ajouté à la suite de leur nom. Si vous effectuez par la suite de nouvelles opérations de recherche / remplacement sur les mêmes fichiers, le fichier original précédent sera copié dans le dossier Original Files, et le chiffre suivant sera ajouté à son nom de fichier. Par exemple, la copie de sécurité d’un fichier nommé Dessin.png sera nommée Dessin-1.png lors de la première opération de recherche / remplacement. La seconde fois, le fichier de sauvegarde sera renommé Dessin-2.png, etc. 4 Cliquez sur OK. Recherche et remplacement de texte Fireworks permet de rechercher et remplacer facilement des mots dans un document. Vous disposez de plusieurs options permettant d’affiner votre recherche en respectant la casse ou en faisant porter la recherche sur tout ou partie d’un mot. Pour chercher et remplacer des mots, des phrases ou toute autre chaîne texte : 1 Choisissez l’option Rechercher du texte dans le second menu déroulant du panneau Rechercher et remplacer. 2 Dans la zone Rechercher, indiquez le texte à rechercher. 3 Indiquez ensuite le texte de remplacement dans la zone Remplacer par. 4 Vous pouvez activer des options permettant d’affiner la recherche : Mot entier permet de rechercher le texte uniquement sous la forme du mot tel qu’il apparaît dans le champ de recherche, et non pas comme partie de mot. Respecter la casse permet de faire la distinction entre les lettres en majuscules et en minuscules pendant la recherche du texte. Caractères génériques permet d’effectuer une recherche conditionnelle sur une partie de mot ou de nombre. Recherche et remplacement de polices de caractères Vous pouvez également chercher et remplacer rapidement des polices de caractères dans des documents Fireworks. 416 Chapitre 17 Pour chercher et remplacer des polices de caractères dans des documents Fireworks : 1 Choisissez l’option Rechercher une police dans le second menu déroulant du panneau Rechercher et remplacer. 2 Choisissez la police de caractères et le style à rechercher. Conseil : Vous pouvez affiner la recherche en définissant des tailles de police minimum et maximum. 3 Indiquez la police, le style et la taille de remplacement dans la zone Remplacer par. Recherche et remplacement de couleurs Vous pouvez rechercher toutes les occurrences d’une couleur dans vos documents Fireworks et les remplacer par une autre couleur. Pour chercher et remplacer une couleur dans des documents Fireworks : 1 Choisissez l’option Rechercher une couleur dans le second menu déroulant du panneau Rechercher et remplacer. 2 Dans le menu contextuel Appliquer à, choisissez un élément pour indiquer comment les couleurs trouvées doivent être appliquées : L’option Trames et traits permet d’effectuer une recherche / remplacement sur les couleurs des trames et des traits à la fois. L’option Toutes les propriétés permet d’effectuer une recherche / remplacement sur les couleurs des trames, des traits et des effets à la fois. Automatisation des tâches répétitives 417 L’option Trames permet d’effectuer une recherche / remplacement sur une couleur de trame, à l’exception des trames à motifs. L’option Traits permet d’effectuer une recherche / remplacement sur les couleurs des traits. L’option Effets permet d’effectuer une recherche / remplacement sur les couleurs des effets. Recherche et remplacement d’URL Outre les mots, polices et couleurs vous pouvez également chercher et remplacer des URL affectées à des éléments interactifs dans vos documents Fireworks. Pour chercher et remplacer des adresses URL affectées à des objets Web : 1 Choisissez l’option Rechercher une URL dans le second menu déroulant du panneau Rechercher et remplacer. 2 Dans la zone Rechercher, indiquez l’URL à rechercher. 3 Indiquez ensuite l’URL de remplacement dans la zone Remplacer par. 4 Vous pouvez activer des options permettant d’affiner la recherche : Mot entier permet de rechercher le texte uniquement sous la forme du mot tel qu’il apparaît dans le champ de recherche, et non pas comme partie de mot. Respecter la casse permet de faire la distinction entre les lettres en majuscules et en minuscules pendant la recherche du texte. Caractères génériques permet d’effectuer une recherche conditionnelle sur une partie de mot ou de nombre. Recherche et remplacement de couleurs non Websafe Une couleur non Websafe est une couleur qui ne fait pas partie de la palette Web216, en d’autres termes, qui n’est pas utilisée à la fois sur les plates-formes Macintosh et Windows. Pour plus d’informations sur les couleurs non Websafe, voir « Optimisation des images GIF, PNG, TIFF, BMP et PICT » à la page 342. 418 Chapitre 17 Pour chercher toutes les couleurs non Websafe et les remplacer par des couleurs Websafe : Choisissez l’option Rechercher non Web216 dans le second menu déroulant du panneau Rechercher et remplacer. Remarque : L’option Rechercher non Web216 ne permet pas d’effectuer une recherche / remplacement sur les pixels des objets image bitmap. Traitement par lots Le traitement par lots est très utile pour convertir automatiquement un groupe de fichiers graphiques. Les options de traitement par lots proposées sont les suivantes : • Conversion d’une sélection de fichiers dans un autre format. • Conversion d’une sélection de fichiers dans le même format avec d’autres paramètres d’optimisation. • • • • Mise à l’échelle des fichiers exportés. Recherche et remplacement de texte, de couleurs, d’URL, de polices et de couleurs non Web216. Changement de nom de groupes de fichiers par l’ajout d’un préfixe ou suffixe commun. Exécution de commandes sur une sélection de fichiers. Pour effectuer un traitement par lots sur des fichiers : 1 Choisissez Fichier > Traitement par lots. Automatisation des tâches répétitives 419 2 Choisissez les fichiers à traiter. Sélectionnez des fichiers dans différents dossiers ou par groupe portant la même extension de fichier. Ajouter ajoute les fichiers et dossiers sélectionnés à la liste de fichiers à traiter dans le même lot. Si vous sélectionnez un dossier, tous les fichiers valides et lisibles de ce dossier sont ajoutés au processus de traitement par lots. Remarque : Les fichiers valides sont les fichiers qui existent vraiment, c’est-à-dire qui ont été créés, nommés et enregistrés. Si la dernière version d’un fichier n’a pas été enregistrée, il vous est demandé de le faire pour permettre au processus de traitement par lots de continuer. Si vous n’enregistrez pas le fichier, le traitement par lots est interrompu. Ajouter tout ajoute tous les fichiers valides du dossier sélectionné à la liste de fichiers à traiter dans le même lot. Supprimer supprime 3 les fichiers sélectionnés de la liste de fichiers à traiter dans le même lot. Activez l’option Inclure les fichiers de projet pour ajouter tous les fichiers figurant dans le journal du projet. Tous ces fichiers seront inclus dans le traitement, bien qu’ils n’apparaissent pas individuellement dans la liste des fichiers à traiter. 4 Activez l’option Inclure les fichiers courants pour ajouter les fichiers ouverts dans le programme. Tous ces fichiers seront inclus dans le traitement, bien qu’ils n’apparaissent pas individuellement dans la liste des fichiers à traiter. 5 Cliquez sur Suivant, puis effectuez une ou les deux opérations suivantes : • Pour ajouter une tâche au traitement par lots, sélectionnez-la dans la liste Options de traitement par lots et cliquez sur Ajouter. Chaque tâche ne peut être ajoutée qu’une fois. Pour plus d’informations sur l’ajout des commandes, voir « Exécution de commandes à l’aide d’un traitement par lots » à la page 424. • Pour modifier l’ordonnancement de la liste, sélectionnez la tâche dans la liste Inclure dans le lot, et cliquez sur les boutons fléchés. 420 Chapitre 17 Remarque : L’ordre dans lequel les tâches apparaissent dans la liste Inclure dans le lot est l’ordre dans lequel elles seront exécutées durant le traitement par lots, à l’exception de l’exportation qui est toujours effectuée en dernier. 6 Pour voir les options supplémentaires de cette tâche, sélectionnez une tâche dans la liste Inclure dans le lot. 7 Choisissez les paramètres adaptés à chaque option. Pour supprimer une tâche du traitement par lots, sélectionnez-la dans la liste Inclure dans le lot et cliquez sur Supprimer. 8 Cliquez sur Suivant. 9 Choisissez les options relatives à l’enregistrement des fichiers traités : Même emplacement que le fichier d’origine enregistre chaque fichier dans le même chemin que le fichier source, en écrasant ce dernier si le nom et le format sont identiques. Emplacement personnalisé vous permet de choisir le chemin d’enregistrement des fichiers traités. 10 Activez la case à cocher Sauvegardes pour utiliser les options de sauvegarde des fichiers originaux. Il est toujours conseillé d’effectuer une copie de sauvegarde des fichiers. Pour plus d’informations, voir « Définition de l’emplacement du dossier de sortie du traitement par lots » à la page 425. 11 Cliquez sur Enregistrer le script, si vous souhaitez enregistrer les paramètres du traitement par lots pour les réutiliser plus tard. Pour plus d’informations, voir « Enregistrement des traitements par lots sous forme de scripts » à la page 425. 12 Cliquez sur Lot pour exécuter le traitement par lots. Modification des paramètres d’optimisation à l’aide d’un traitement par lots Dans la boîte de dialogue Traitement par lots, ajoutez Exporter pour modifier les paramètres d’optimisation des fichiers. Automatisation des tâches répétitives 421 Pour définir les paramètres d’exportation à appliquer à un traitement par lots : 1 Choisissez Exporter dans la liste Options de traitement par lots et cliquez sur Ajouter. 2 Dans le menu déroulant Paramètres, choisissez l’une des options ci-dessous et cliquez sur OK : • Choisissez Utiliser les paramètres de tous les fichiers pour conserver les paramètres d’exportation de chaque fichier durant le traitement par lots. Par exemple, lors du traitement par lots d’un dossier contenant des fichiers GIF et JPEG, les fichiers résultants seront toujours au format GIF ou JPEG, et la palette originale de chaque fichier et son paramétrage de compression seront utilisés pour l’exportation. • Choisissez Personnaliser ou cliquez sur le bouton Edition pour modifier les paramètres dans la boîte de dialogue Aperçu avant exportation. • Choisissez un paramétrage d’exportation prédéfini, par exemple GIF Web 216 ou JPEG Qualité supérieure. Tous les fichiers seront convertis avec ce paramétrage. 3 Cliquez sur Suivant pour continuer le traitement par lots. Pour plus d’information sur l’exécution du traitement par lots, voir « Traitement par lots » à la page 419. Mise à l’échelle de graphismes à l’aide d’un traitement par lots Dans la boîte de dialogue Traitement par lots, ajoutez l’option Mise à l’échelle pour modifier la hauteur et la largeur des images à exporter. Pour définir les options de mise à l’échelle lors d’un traitement par lots : 1 Choisissez Mise à l’échelle dans la liste Options de traitement par lots et cliquez sur Ajouter. 2 Dans le menu déroulant Mise à l’échelle choisissez une option. Pas de mise à l’échelle exporte les fichiers sans modification d’échelle. Mise à l’échelle avec cette taille permet une mise à l’échelle des images avec la largeur et la hauteur spécifiées. Mise à l’échelle de la zone permet une mise à l’échelle des images qui est proportionnelle à la largeur et la hauteur maximales spécifiées. Conseil : Choisissez Mise à l’échelle de la zone pour convertir un groupe d’images en vignettes de taille égale. Mise à l’échelle avec ce pourcentage modifie 3 la taille des images du pourcentage indiqué. Cliquez sur Suivant pour continuer le traitement par lots. Pour plus d’information sur l’exécution du traitement par lots, voir « Traitement par lots » à la page 419. 422 Chapitre 17 Recherche et remplacement durant un traitement par lots Dans la boîte de dialogue Traitement par lots, vous pouvez ajouter l’option Rechercher et remplacer pour chercher et remplacer du texte, des polices, des couleurs ou des URL au sein de boutons, références ou découpes. Le remplacement par lots n’est disponible qu’avec les formats de fichiers suivants : PNG Fireworks, Illustrator, FreeHand et CorelDRAW. Il ne permet pas d’intervenir sur les fichiers GIF et JPEG. Pour sélectionner les attributs faisant l’objet de la recherche / remplacement durant un traitement par lots : 1 Choisissez Rechercher et remplacer dans la liste Options de traitement par lots et cliquez sur Ajouter. 2 Cliquez sur Edition. 3 Choisissez les types d’attributs à chercher et remplacer dans le menu contextuel Rechercher : texte, police, URL ou non Web 216. 4 Dans la zone Rechercher, indiquez l’élement à rechercher. 5 Dans la zone Remplacer par indiquez ou choisissez l’élément de remplacement. Conseil : Pour ajouter les fichiers modifiés au journal du projet afin de les localiser ensuite plus aisément, activez la case à cocher Mettre à jour le journal du projet. 6 Cliquez sur OK pour enregistrer les paramètres de recherche et remplacement. 7 Cliquez sur Suivant pour continuer le traitement par lots. Pour plus d’informations sur l’exécution du traitement par lots, voir « Traitement par lots » à la page 419. Pour plus d’informations sur les options de recherche et remplacement, voir « Recherche et remplacement » à la page 413. Modification de noms de fichiers à l’aide d’un traitement par lots Pour modifier les noms des fichiers à traiter, ajoutez l’option Renommer dans la boîte de dialogue du traitement par lots. Automatisation des tâches répétitives 423 Pour définir les options de noms lors d’un traitement par lots : 1 Choisissez Renommer dans la liste Options de traitement par lots et cliquez sur Ajouter. 2 Choisissez une option dans le menu déroulant Renommer. Nom d’origine conserve le nom original des fichiers. Ajouter un préfixe permet d’indiquer un texte à ajouter au début du nom de chaque fichier. Par exemple, si vous indiquez « nuit_ », le fichier Soleil_levant.gif est renommé nuit_Soleil_levant.gif lors de son traitement par lots. Ajouter un suffixe permet d’indiquer un texte à ajouter à la fin du nom de chaque fichier, avant son extension. Par exemple, si vous indiquez « _jour », le fichier Soleil_levant.gif est renommé Soleil_levant_jour.gif lors de son traitement par lots. 3 Cliquez sur Suivant pour continuer le traitement par lots. Pour plus d’informations sur l’exécution du traitement par lots, voir « Traitement par lots » à la page 419. Exécution de commandes à l’aide d’un traitement par lots Pour exécuter des commandes JavaScript sur des fichiers, ajoutez l’option Commandes dans la boîte de dialogue Traitement par lots. Pour définir les options de commandes lors d’un traitement par lots : 1 Pour voir les commandes disponibles, cliquez sur le bouton Plus (Windows) ou sur le triangle (Macintosh) qui apparaissent à côté de l’option Commandes. 2 Pour ajouter une commande au traitement par lots, sélectionnez-la dans la liste et cliquez sur Ajouter. Remarque : Ces commandes ne peuvent pas être modifiées. 3 Cliquez sur Suivant pour continuer le traitement par lots. Pour des informations sur l’exécution du traitement par lots, voir « Traitement par lots » à la page 419. Pour plus de détails sur la création de commandes, voir « Automatisation des tâches avec le panneau Historique » à la page 429. Remarque : Par ailleurs, certaines commandes ne peuvent fonctionner durant un traitement par lots. Choisissez des commandes pouvant être exécutées dans les documents sans qu’il soit nécessaire qu’un objet ait été sélectionné. 424 Chapitre 17 Définition de l’emplacement du dossier de sortie du traitement par lots Après avoir défini toutes les options de traitement dans la boîte de dialogue Traitement par lots, vous devez choisir les options de sauvegarde de vos fichiers. Vous pouvez effectuer des copies de sauvegarde des fichiers originaux lors d’un traitement par lots. Les copies de sauvegarde sont placées dans le dossier de chaque fichier original, dans un sous-dossier appelé Original Files. Pour effectuer des copies de sauvegarde des fichiers lors d’un traitement par lots : 1 Choissez l’emplacement du dossier de sortie du traitement par lots. 2 Activez la case à cocher Sauvegardes pour définir vos options de sauvegarde. 3 Choisissez le type de sauvegarde des fichiers : Ecraser les copies existantes remplace les éventuels fichiers de sauvegarde précédents. Sauvegardes incrémentielles conserve une copie de tous les fichiers de sauvegarde. Lors d’un nouveau traitement par lots, un chiffre incrémentiel est ajouté à la suite du nom de chaque copie de sauvegarde. Remarque : Si l’option Sauvegardes n’est pas activée, le traitement par lots écrasera le fichier original si le fichier exporté porte le même nom et est enregistré dans le même format. Toutefois, si le traitement par lots comporte un changement de format de fichier, le fichier original ne sera ni déplacé ni effacé. 4 Cliquez sur Lot pour exécuter le traitement par lots, ou sur Précédent pour revenir à la boîte de dialogue précédente du traitement par lots. Enregistrement des traitements par lots sous forme de scripts Vous pouvez enregistrer les paramètres de traitement par lots sous la forme de script ou de commande pour recréer ensuite facilement le processus de traitement par lots. Après avoir défini toutes les options de traitement dans la boîte de dialogue Traitement par lots, vous devez choisir les options de sauvegarde de vos fichiers. Pour créer un script de traitement par lots : 1 Cliquez sur Enregistrer le script. 2 Indiquez le nom et la destination du script. Automatisation des tâches répétitives 425 3 Cliquez sur Enregistrer. Remarque : Si vous enregistrez votre script dans le dossier Commands de votre disque dur, il sera ajouté ensuite dans le menu Commandes de Fireworks. L’emplacement exact du dossier Commands varie en fonction du système d’exploitation. Pour plus d’informations, voir « Utilisation des fichiers de configuration » à la page 439. Pour exécuter un script de traitement par lots : 1 Utilisez l’une des méthodes suivantes : • Dans Fireworks, choisissez Commandes > Exécuter un script. • En dehors de Fireworks, double-cliquez sur le nom de fichier du script enregistré sur le disque dur. 2 Sélectionnez le script, puis cliquez sur Ouvrir. 3 Choisissez les fichiers à traiter à l’aide du script : Fichiers actuellement ouverts traite tous les documents ouverts. Journal du projet (tous les fichiers) traite tous les fichiers qui figurent dans le panneau Journal du projet. Journal du projet (fichiers sélectionnés) traite tous les fichiers qui sont actuellement sélectionnés dans le panneau Journal du projet. Personnalisé permet de choisir les fichiers à traiter. Remarque : Cliquez sur le bouton des ellipses (...), à côté du menu déroulant Fichiers à traiter, puis sélectionnez les fichiers à traiter. 4 Cliquez sur OK. Pour plus d’informations sur le choix des fichiers, voir « Traitement par lots » à la page 419. Exécution de scripts par glisser-déposer Si vous êtes amené à répéter fréquemment un traitement par lots, enregistrez-le sous forme de script, puis tirez l’icône de ce script depuis le répertoire de votre disque dur sur l’icône de Fireworks pour exécuter le traitement par lots. L’application Fireworks démarre et exécute ce script. Pour exécuter un script par glisser-déposer : 1 Enregistrer un script. 2 Utilisez l’une des méthodes suivantes : • Tirez l’icône du fichier du script sur l’icône du bureau Fireworks. • Faites glisser l’icône du fichier du script dans un document Fireworks ouvert. Remarque : Si vous tirez plusieurs fichiers de scripts et plusieurs fichiers graphiques sur l’icône de Fireworks, les fichiers graphiques seront traités plusieurs fois, une fois pour chaque script. 426 Chapitre 17 Utilisation du journal du projet Le journal du projet permet de suivre et de contrôler les modifications apportées à plusieurs fichiers à l’aide de la commande Rechercher et remplacer ou d’un traitement par lots. Les noms de tous les documents modifiés par l’intermédiaire de la commande Rechercher et remplacer sont enregistrés dans le journal du projet. Gestion des recherches à l’aide du journal du projet Le journal du projet permet de naviguer parmi les fichiers sélectionnés, de les exporter sur la base de leurs derniers paramètres d’exportation, ou de sélectionner des fichiers devant faire l’objet d’un traitement par lots. Le journal du projet enregistre les noms de tous les documents modifiés et affiche, pour chaque document, l’image qui a été modifiée, ainsi que la date et l’heure de la modification. Vous pouvez ajouter manuellement des fichiers au journal du projet pour garder trace de ceux que vous désirez modifier fréquemment. Pour ajouter manuellement des fichiers au journal du projet : 1 Choisissez Fenêtre > Journal du projet. 2 Dans le menu contextuel Options du panneau Journal du projet choisissez Ajouter les fichiers au journal 3 Naviguez jusqu’au fichier à ajouter. 4 Sélectionnez le fichier. 5 Cliquez sur Ouvrir. Pour ouvrir les fichiers qui figurent dans les journal du projet : • Double-cliquez sur le fichier. • Sélectionnez le fichier, puis cliquez sur Ouvrir. Pour supprimer une entrée du journal du projet : Sélectionnez une ou plusieurs entrées, et choisissez Effacer la sélection dans le menu contextuel Options du panneau Journal du projet. Automatisation des tâches répétitives 427 Pour exporter un fichier figurant dans le journal du projet avec ses derniers paramètres d’exportation : Sélectionnez le fichier et choisissez Réexporter. Affichage et impression du journal du projet La version la plus récente du journal du projet est enregistrée, au format HTML, sur le disque dur. L’emplacement du journal du projet varie en fonction du système d’exploitation. Pour plus d’informations, voir « Utilisation des fichiers de configuration » à la page 439. Pour visualiser ou imprimer le journal du projet : Ouvrez le fichier Project_Log.htm dans un navigateur. Extension de Fireworks L’extension de Fireworks n’a jamais été aussi facile. Avec Fireworks, vous pouvez créer tout un ensemble de commandes personnalisées pour accroître les capacités de votre application. Le programme Extension Manager permet d’installer et de gérer des extensions pour étendre les capacités de Fireworks. Vous pouvez également créer un code JavaScript personnalisé et l’utiliser en tant que commande personnalisée dans Fireworks. Les films Flash SWF peuvent être également utilisés dans Fireworks sous forme de commandes personnalisées. Par ailleurs, le panneau Historique offre une interface conviviale permettant de créer de commandes personnalisées à partir d’une série de tâches enregistrées. Lorsque vous installez une extension ou créez une commande personnalisée, elle apparaît dans le menu Commande de Fireworks. Remarque : Lorsqu’elles sont enregistrées sous forme de fichiers SWF dans le dossier Command Panels du disque dur, les commandes apparaissent sous forme de panneaux dans le menu Fenêtre. Pour plus d’informations, voir « Création de scripts à l’aide de fichiers Flash SWF » à la page 430. Utilisation du programme Macromedia Extension Manager Une extension est un script de commande, une bibliothèque un filtre, un motif ou une texture pouvant être ajouté à une application Macromedia pour accroître les capacités de cette dernière. L’application Fireworks est livrée avec Macromedia Extension Manager, un programme qui permet d’installer, de gérer et de supprimer aisément des extensions. Lors de l’installation, Fireworks ajoute un ensemble d’extensions par défaut dans le menu Commandes. Vous pouvez également utiliser Extensions Manager pour créer vos propres extensions et envoyer ces dernières vers Macromedia Exchange pour Fireworks. A travers Exchange, vous pouvez partager vos extensions avec d’autres utilisateurs Fireworks. Pour en savoir plus sur Macromedia Exchange, consultez le site Web http://www.macromedia.com/fr/exchange/. Les extensions Fireworks se trouvent dans le sous-dossier Configuration/Commands du dossier de l’application Fireworks, sur le disque dur. Pour plus d’informations sur l’emplacement du dossier Commands, voir « Utilisation des fichiers de configuration » à la page 439. Remarque : Les commandes utilisateurs telles que celles enregistrées à partir du panneau Historique et certaines extensions tierces sont gérées différemment. Elle sont stockées dans le sous-dossier du dossier de configuration de chaque utilisateur. Pour plus d’informations, voir « Utilisation des fichiers de configuration » à la page 439. Pour plus d’informations sur l’utilisation de Extension Manager, voir Utilisation de Macromedia Extension Manager, accessible à partir du menu d’aide Extension Manager. 428 Chapitre 17 Automatisation des tâches avec le panneau Historique Le panneau Historique enregistre la liste de toutes vos actions dans Fireworks. Chaque étape est affichée sur une ligne distincte du panneau Historique dans l’ordre chronologique inverse (en commençant par la plus récente). Par défaut, le panneau conserve la trace des vingt dernières étapes. Vous pouvez cependant modifier cette valeur à tout moment. Création de commandes Vous pouvez enregistrer des groupes d’étapes du panneau Historique sous forme de commandes réutilisables. Ces commandes peuvent être exécutées sur n’importe quel document Fireworks. Elles ne sont pas spécifiques à un type de document. Les commandes mémorisées sont conservées dans des fichiers JSF enregistrés dans le dossier de vos commandes utilisateur spécifiques. L’emplacement exact de ce dossier varie en fonction du système d’exploitation. Pour plus d’informations, voir « Utilisation des fichiers de configuration » à la page 439. Pour enregistrer des étapes sous forme de commandes : 1 Choisissez les étapes à enregistrer sous forme de commandes : • Cliquez sur une étape, puis maintenez la touche MAJ enfoncée avant de cliquer sur une autre étape pour sélectionner toute une sélection d’étapes à enregistrer comme commande. • Appuyez sur la touche CTRL (Windows) ou Commande (Macintosh), puis cliquez pour sélectionner des étapes non adjacentes. 2 Cliquez sur le bouton Enregistrer les étapes sous forme de commande, en bas du panneau Historique. 3 Indiquez le nom de la commande, et cliquez sur OK. La commande apparaît dans le menu Commandes. Pour annuler ou répéter des étapes à l’aide du panneau Historique : • Déplacez le curseur d’annulation vers le haut du panneau jusqu’à la dernière étape à annuler ou répéter. • Cliquez sur le trajet du curseur dans la partie gauche du panneau Historique. Remarque : Les étapes annulées restent dans le panneau Historique, mais elles apparaissent en grisé. Pour modifier le nombre d’étapes mémorisées par le panneau Historique : 1 Choisissez Edition > Préférences. Remarque : Sous Mac OS X, choisissez Fireworks > Préférences. 2 Indiquez le nombre d’étapes que vous désirez que le panneau Historique mémorise. Remarque : Plus ce nombre d’étapes sera élevé, plus la mémoire vive de l’ordinateur sera sollicitée. Pour effacer toutes les étapes qui apparaissent dans le panneau Historique : Choisissez Effacer l’historique dans le menu contextuel des options du panneau Historique pour libérer de la mémoire vive et de l’espace disque. Remarque : Si vous effacez des étapes du panneau Historique, vous ne pourrez plus les annuler. Automatisation des tâches répétitives 429 Exécution des commandes Vous pouvez à tout moment exécuter des commandes ou une sélection d’actions enregistrées à partir du panneau Historique. Pour reproduire une commande enregistrée : 1 Si nécessaire, choisissez un ou plusieurs objets. 2 Choisissez la commande voulue dans le menu Commandes. Pour reproduire une sélection d’étapes : 1 Sélectionnez un ou plusieurs objets. 2 Sélectionnez les étapes désirées dans le panneau Historique. 3 Cliquez sur le bouton Réexécuter, en bas du panneau Historique. Les étapes marquées d’un X ne peuvent pas être répétées ni reproduites. Des lignes de séparation indiquent qu’un objet différent a été sélectionné. Les commandes créées à partir d’étapes situées de part et d’autre d’une ligne de séparation peuvent donner des résultats imprévisibles. Pour appliquer les étapes sélectionnées à des objets situés dans de nombreux documents : 1 Sélectionnez une plage d’étapes. 2 Cliquez sur le bouton Copier les étapes dans le Presse-papiers, en bas du panneau Historisque. 3 Sélectionnez un ou plusieurs objets dans un document Fireworks. 4 Choisissez Edition > Coller. Pour répéter la dernière action : Choisissez Edition > Répéter le script de commandes. Exécution de scripts à l’aide de JavaScript Vous pouvez réduire l’aspect fastidieux de certaines tâches répétitives en créant dans un éditeur de texte votre propre code JavaScript à faire exécuter dans Fireworks. Vous pouvez contrôler pratiquement toutes les commandes et fonctions de Fireworks en JavaScript. Macromedia Dreamweaver utilise également le JavaScript. Vous pouvez donc écrire des scripts permettant de contrôler Fireworks à partir de Dreamweaver. Pour consulter la documentation sur l’API JavaScript API, voir Extending Fireworks MX, disponible sous forme de fichier PDF sur le CD d’installation de Macromedia Fireworks MX. Création de scripts à l’aide de fichiers Flash SWF A l’aide de Flash, vous pouvez créer des films SWF contenant du code JavaScript. Ces films peuvent être utilisés comme des commandes Fireworks accessibles à partir du menu Commandes de Fireworks. Vous pouvez même créer un film SWF et l’utiliser en tant que panneau Fireworks, accessible à partir du menu Fenêtre. Dans Fireworks, le panneau Aligner est un exemple de film Flash importé sous la forme de panneau. 430 Chapitre 17 Les films SWF utilisés comme commandes sont mémorisés dans le dossier Commandes de votre disque dur, alors que ceux utilisés comme panneaux sont mémorisés dans le dossier Command Panels. L’emplacement exact de ces dossiers varie en fonction du système d’exploitation et selon que vos commandes personnalisées sont utilisées par vous uniquement ou accessibles à tous les utilisateurs connectés au système. Pour plus d’informations sur l’emplacement du dossier, voir « Utilisation des fichiers de configuration » à la page 439. Pour des instructions détaillées sur la création de commandes à partir de films Flash SWF, voir Extending Fireworks MX, disponible sous forme de fichier PDF sur le CD d’installation de Macromedia Fireworks MX. Gestion des commandes Vous pouvez renommer ou supprimer des commandes apparaissant dans le menu Commandes. Dans Fireworks, utilisez l’option Gérer les commandes enregistrées pour renommer et supprimer les commandes que vous créez. Pour gérer les autres commandes et extensions installées à l’aide de Fireworks ou celles que vous avez téléchargées, puis installées à partir du site Web Macromedia Exchange, utilisez Extension Manager. Pour renommer une commande personnalisée : 1 Choisissez Commandes > Gérer les commandes enregistrées... 2 Sélectionnez la commande désirée. 3 Cliquez sur Renommer, tapez un nouveau nom, puis cliquez sur OK. Pour supprimer une commande personnalisée, exécutez l’une des actions suivantes : • Dans Fireworks, choisissez Commandes > Gérer les commandes enregistrées. Sélectionnez ensuite la commande, puis cliquez sur Supprimer. • Dans le dossier Commands du disque dur, supprimez le fichier JSF associé à la commande. L’emplacement exact de ce dossier varie en fonction du système d’exploitation. Pour plus d’informations, voir « Utilisation des fichiers de configuration » à la page 439. Pour renommer ou supprimer une commande fournie avec Fireworks ou téléchargée à partir de Macromedia Exchange : Choisissez Commande > Gérer les extensions. La fenêtre Extension Manager s’affiche. Pour plus d’informations sur la gestion des extensions, voir l’aide du programme Extension Manager. Modification ou personnalisation d’un script de commandes Les scripts de commandes sont enregistrés en JavaScript. Si vous maîtrisez bien le langage JavaScript, vous pouvez les ouvrir et les modifier dans un éditeur de texte tel que le Bloc-notes de Windows ou dans SimpleText sur le Macintosh. Pour modifier une commande à l’aide de JavaScript : 1 A partir du bureau, localisez le dossier Commands ou Command Panels approprié sur le disque dur. Automatisation des tâches répétitives 431 Remarque : L’emplacement exact de ces dossiers varie d’un système à l’autre et selon que la commande est accessible à votre profil utilisateur uniquement ou à tous les utilisateurs. Pour plus d’informations, voir « Utilisation des fichiers de configuration » à la page 439. 2 Ouvrez le fichier script désiré dans un éditeur de texte et modifiez le code JavaScript. 3 Enregistrez et fermez le fichier script. Pour modifier les actions sélectionnées dans le panneau Historique à l’aide de JavaScript : 1 Dans Fireworks, sélectionnez une plage d’étapes dans le panneau Historique. 2 Cliquez sur le bouton Copier les étapes dans le Presse-papiers, en bas du panneau Historisque. 3 Créez un nouveau document dans l’éditeur de texte. 4 Collez les étapes dans le nouveau document. 5 Modifiez les étapes. 6 Enregistrez et fermez le fichier script. 7 Copiez le fichier script dans le dossier Commands du disque dur. Remarque : L’emplacement exact de ce dossier varie d’un système à l’autre et selon que la commande est accessible à votre profil utilisateur uniquement ou à tous les utilisateurs. Pour plus d’informations, voir « Utilisation des fichiers de configuration » à la page 439. Au prochain démarrage de Fireworks, la nouvelle commande apparaît dans le menu Commandes. 432 Chapitre 17 CHAPITRE 18 Préférences et raccourcis clavier Les préférences Macromedia Fireworks permettent de contrôler la présentation générale de l’interface utilisateur, ainsi que la modification et l’apparence des dossiers. En outre, Fireworks vous permet de personnaliser les raccourcis clavier. Cela signifie que vous pouvez personnaliser vos raccourcis clavier et les utiliser dans tous vos programmes favoris. Définition des préférences Les préférences de Fireworks permettent de contrôler la présentation génétale de l’interface utilisateur, ainsi que les options associées à certaines fonctions spécifiques telles que les couleurs par défaut, les options des outils, l’emplacement des dossiers, et la conversion des fichiers. Pour définir vos préférences : 1 Choisissez Edition > Préférences. Remarque : Sous Mac OS X, choisissez Fireworks > Préférences. 2 Sélectionnez le groupe de préférences que vous souhaitez modifier : Générales, Lancer et Modifier, Dossiers ou Importer. 3 Effectuez les modifications requises, puis cliquez sur OK. Préférences générales Les options ci-dessous apparaissent dans l’onglet des préférences générales : Nombre max. d’actions annulées permet de sélectionner entre 0 et 100 niveaux d’annulation. Ce paramètre s’applique à la fois à la commande Edition > Annuler et au panneau Historique. Plus ce nombre est élevé plus la quantité de mémoire utilisée par Fireworks augmente. Vous devez redémarrer Fireworks pour que la modification de ce paramètre prenne effet. Couleurs par défaut définit les couleurs par défaut utilisées pour les traits de pinceau, les trames et la surbrillance des trajets. Les options Trait et trame ne modifient pas automatiquement les couleurs affichées dans les cases couleurs du panneau Outils. Elles permettent de modifier les couleurs par défaut définies par le bouton Définir trait et trame par défaut dans le panneau Outils. Interpolation permet de choisir l’une des quatre méthodes de mise à l’échelle pouvant être utilisées par Fireworks pour interpoler les pixels lors des mises à l’échelle d’images. • L’interpolation bicubique permet d’obtenir les résultats les plus nets et de la meilleure qualité dans la plupart des cas, et est par conséquent sélectionné par défaut. 433 • L’interpolation bilinéaire permet d’obtenir des résultats plus nets que le mode Adouci, mais moins nets que le mode Bicubique. • L’interpolation adoucie, qui était utilisée par Fireworks 1, produit un léger flou et élimine les détails nets. Cette méthode est utile lorsque les autres produisent des résultats indésirables. • L’interpolation au plus proche produit des bords dentelés avec des contrastes élevés et pas de flou. L’effet obtenu ressemble à une image grossie ou réduite avec l’outil Zoom. Espace de travail : Afficher les icônes des onglets est désélectionnée par défaut. Cette option permet d’afficher ou de masquer les icônes sur les onglets de panneau qui étaient visibles dans les précédentes versions de Fireworks. Elle affecte également l’affichage du Mini-Launcher situé en bas de la fenêtre du document. Enregistrement des fichiers : Ajouter des icônes d’aperçu (Macintosh uniquement) permet d’afficher ou de masquer les vignettes des fichiers PNG Fireworks présents sur le disque dur. Lorsque cette option est désactivée, Fireworks affiche l’icône standard des fichiers PNG. Cette option prend effet après l’enregistrement du fichier. Préférences d’édition Les options d’édition permettent de spécifier des préférences pour la forme du pointeur et d’afficher des indicateurs visuels des objets bitmap. Curseurs précis permet de remplacer les pointeurs des différents outils par un pointeur en croix. Supprimer les objets pendant le recadrage supprime de façon définitive les pixels ou les objets situés en dehors de la zone de sélection lorsque vous choisissez Edition > Recadrer le document ou Modification > Taille du document. Curseurs de peinture et de taille de trait s’applique aux pointeurs des outils Pinceau, Gomme, Flou, Accentuer, Révélateur, Brûlure et Tache et permet d’obtenir un curseur dont la taille et la forme correspondent à ce que vous allez dessiner ou effacer. Pour certains pinceaux larges à plusieurs pointes, le curseur prend par défaut la forme d’une croix. Lorsque cette option et la préférence Curseurs précis sont désactivées, les pointeurs des différents outils sont affichés. Afficher la bordure rayée place la bordure rayée standard autour du document lorsque vous travaillez sur des objets bitmap (mode bitmap). Afficher l’aperçu de la plume fournit un aperçu du prochain segment de trajet qui sera créé lors du clic sur l’outil Plume. Afficher les points unis affiche kes points sélectionnées en creux ; les points désélectionnés sont unis. Désactiver les « bords » désactive automatiquement l’option Masquer les bords lorsque la sélection change. Choisir la distance permet de spécifier la distance à partir de laquelle un objet est sélectionné par le pointeur. Cette distance doit être comprise entre 1 et 10 pixels. Distance d’accrochage permet de spécifier à partir de quelle distance l’objet que vous approchez doit s’accrocher à la grille ou au repère. L’option Distance d’accrochage fonctionne lorsque l’option Accrocher à la grille ou Accrocher aux repères est activée. Cette distance doit être comprise entre 1 et 10 pixels. 434 Chapitre 18 Préférences Lancer et Modifier En définissant les préférences Lancer et Modifier, vous pouvez contrôler la manière dont des applications externes telles que Macromedia Flash, Macromedia Director et Microsoft FrontPage, lancent et modifient des graphismes dans Fireworks. Dans la plupart des cas, Fireworks tente automatiquement de localiser le fichier source PNG associé au graphisme. S’il ne parvient pas à le localiser, Fireworks utilise les préférences Lancer et Modifier que vous avez définies pour déterminer la manière dont il localisera le fichier source PNG. Remarque : L’application Macromedia Flash constitue une exception. Lorsque vous lancez et modifiez des graphismes dans Flash, Fireworks utilise toujours les préférences que vous avez définies dans la section Lancer et Modifier de la boîte de dialogue Préférences. Modification à partir d’une autre application détermine si le fichier PNG d’origine s’ouvre lorsque vous utilisez Fireworks pour modifier des images à partir d’autres applications. Lors de l’optimisation d’un document à partir d’une application externe détermine si le fichier PNG d’origine s’ouvre lorsque vous utilisez Fireworks pour optimiser une image. Remarque : Cette préférence ne s’applique pas à Director, qui ouvre et optimise automatiquement une image sans demander de spécifier le fichier source PNG, même si cette préférence est définie différemment dans Fireworks. Pour plus d’informations sur la manipulation des images Fireworks dans Flash, voir « Utilisation de Macromedia Flash MX » à la page 388. Pour plus d’informations sur la manipulation d’images Fireworks dans Director, voir « Utilisation de Macromedia Director » à la page 397. Pour plus d’informations sur la manipulation d’images Fireworks dans FrontPage, voir « Utilisation de Microsoft FrontPage » à la page 403. Remarque : Macromedia Dreamweaver gère différemment les péférences Lancer et Modifier. Dreamweaver ouvre systématiquement le fichier source PNG, même si les préférences Lancer et Modifier ont été définies différemment dans Fireworks. Si aucune Design Note (note de conception) n’est présente ou si le chemin d’accès au fichier source PNG est rompu, Dreamweaver vous demande systématiquement de localiser le fichier source PNG. Pour plus d’informations sur la manipulation d’images et d’éléments interactifs Fireworks dans Dreamweaver, voir « Utilisation de Macromedia Dreamweaver MX » à la page 373. Préférences de l’onglet Dossiers Les préférences de l’onglet Dossiers permettent d’accéder aux plug-ins Photoshop supplémentaires, aux fichiers de texture et aux fichiers de motifs en provenance de sources externes. De même, sous Mac OS 9.x, vous pouvez spécifier l’emplacement des fichiers temporaires de Fireworks. Autres (Plug-ins Photoshop, Textures et motifs) permet de spécifier les dossiers cibles contenant les plug-ins, les textures et les motifs. Les dossiers peuvent se trouver dans un autre dossier de votre disque dur, sur un CD-ROM ou un lecteur externe ou encore sur un réseau. Les plug-ins Photoshop figurent dans le menu Filtres de Fireworks et dans le menu Ajouter du Vérificateur de propriétés. Les textures ou motifs enregistrés en tant que fichiers PNG, JPEG et GIF apparaissent en tant qu’options dans les menus déroulants Motif et Texture du Vérificateur de propriétés. Pour plus de détails sur les textures et les motifs, voir « Ajout d’une texture à une trame » à la page 217. Disques de travail (Primaire et Secondaire) permet de spécifier l’emplacement des fichiers cache temporaires de Fireworks qui peuvent parfois être très volumineux. Si votre ordinateur comporte plusieurs disques durs, utilisez le disque comportant le plus d’espace libre comme disque de travail principal. Spécifiez un disque dur secondaire au cas où le disque primaire deviendrait saturé. Préférences et raccourcis clavier 435 La fonction Disques de travail est disponible uniquement sous le système d’exploitation Macintosh OS 9. Etant donné que Windows et OS X offre une meilleure gestion de la mémoire, la fonction Disques de travail n’est pas nécessaire sur ces systèmes. Préférences d’importation de fichiers Photoshop Les préférences figurant dans l’onglet Importer permettent de définir des options de conversion des fichiers Photoshop : • Vous pouvez convertir des calques en objets ou en nouvelles images. • Vous pouvez choisir de modifier le texte importé ou de le conserver tel quel. • Vous pouvez importer un fichier Photoshop sous forme d’objet bitmap lissé. Pour plus d’informations sur les préférences d’importation, voir « Insertion de graphiques Photoshop dans Fireworks » à la page 406. Restauration des préférences Vous pouvez restaurer les valeurs d’origine des préférences en supprimant le fichier des préférences. La première fois que vous lancez Fireworks après la suppression du fichier des préférences, un nouveau fichier de préférences est créé, restaurant ainsi la configuration d’origine de Fireworks. Pour restaurer les préférences par défaut : 1 Quittez Fireworks. 2 Localisez le fichier des préférences de Fireworks MX sur le disque dur et supprimez-le. L’emplacement exact de ce dossier varie d’un système à un autre. Pour plus d’informations, voir « Localisation du fichier des préférences Fireworks » à la page 442. 3 Redémarrez Fireworks. Modification des raccourcis clavier Le programme Fireworks permet d’utiliser des raccourcis clavier pour sélectionner des commandes de menu, choisir des outils à partir du panneau Outils et accélérer différentes tâches qui n’existent pas en tant que commandes de menu. L’utilisation des raccourcis accroît votre productivité en vous permettant d’effectuer rapidement des actions simples. Si vous avez l’habitude d’utiliser les raccourcis clavier d’applications telles que FreeHand, Illustrator, Photoshop ou de produits utilisant la norme Macromedia, vous pouvez choisir le jeu de raccourcis de votre choix. Pour changer le jeu de raccourcis actif : 1 Choisissez Edition > Raccourcis clavier pour ouvrir la boîte de dialogue Raccourcis clavier. Remarque : Sous Macintosh OS X, choisissez Fireworks > Raccourcis clavier. 436 Chapitre 18 2 Dans le menu déroulant Jeu actif, sélectionner le jeu désiré, puis cliquez sur OK. Boîte de dialogue Raccourcis clavier Création de raccourcis personnalisés et secondaires Vous pouvez créer des raccourcis clavier personnalisés et des raccourcis secondaires si vous souhaitez exécuter une action de différentes manières. Un jeu de raccourcis personnalisés est toujours basé sur un jeu prédéfini. Remarque : Sous Fireworks, les raccourcis d’outils ne doivent pas inclure de touches de modification (Ctrl, Maj, Alt sous Windows, et Commande, Maj, Option et Contrôle, sous Macintosh). Les raccourcis d’outils consistent en une lettre ou un chiffre unique. Pour créer un raccourci personnalisé ou secondaire pour une commande de menu, un outil ou une action quelconque : 1 Choisissez Edition > Raccourcis clavier pour ouvrir la boîte de dialogue Raccourcis clavier. 2 Cliquez sur le bouton Dupliquer l’ensemble. 3 Entrez le nom de l’ensemble dupliqué dans la boîte de dialogue Ensemble dupliqué, puis cliquez sur OK. Le nom du nouveau menu personnalisé est alors affiché dans le champ Ensemble actif. 4 Sélectionnez la catégorie de raccourci voulue à partir de la liste Commandes. • Choisissez Commandes de menu pour créer un raccourci personnalisé pour toutes les commandes activées par l’intermédiaire de la barre de menus. Préférences et raccourcis clavier 437 • Choisissez Outils pour créer un raccourci personnalisé pour l’un des outils du panneau Outils. • Choisissez Divers pour créer un raccourci personnalisé pour une série d’actions prédéfinies. Une fois la catégorie sélectionnée, tous les raccourcis possibles pour cette dernière sont affichés dans la liste Commandes. 5 Sélectionnez la commande dont vous souhaitez modifier le raccourci à partir de la liste Commandes. Si le raccourci existe, il s’affiche dans la liste Raccourcis. 6 Cliquez dans le champ Appuyer sur la touche et appuyez sur les touches désirées pour définir le nouveau raccourci sur le clavier. Si la combinaision de touches choisies est déjà utilisée par un autre raccourci, un message d’avertissement apparaît sous le champ Appuyer sur la touche. 7 Utilisez l’une des méthodes suivantes : • Cliquez sur le bouton Ajouter un nouveau raccourci (+) pour ajouter un raccourci secondaire dans la liste des raccourcis. • Cliquez sur le bouton Modifier pour remplacer le raccourci sélectionné. Suppression de raccourcis personnalisés et d’ensembles de raccourcis personnalisés Vous pouvez supprimer n’importe quel raccourci ou ensemble de raccourcis personnalisé. Pour supprimer un ensemble de raccourcis personnalisés : 1 Choisissez Edition > Raccourcis clavier pour ouvrir la boîte de dialogue Raccourcis clavier. 2 Cliquez sur le bouton Supprimer l’ensemble. Bouton Supprimer l’ensemble 3 Sélectionnez le raccourci à supprimer à partir de la boîte de dialogue Supprimer l’ensemble. 4 Cliquez sur le bouton Supprimer. Pour supprimer un raccourci personnalisé : 1 Sélectionnez la commande dans la liste Commandes. 2 Sélectionnez le raccourci personnalisé à supprimer à partir de la liste Raccourcis. 3 Cliquez sur le bouton Supprimer un raccourci sélectionné (-). 438 Chapitre 18 Création d’une feuille de référence pour l’ensemble de raccourcis actif Une feuille de référence est un enregistrement de l’ensemble de raccourcis actif qui est enregistré sous forme de table HTML. Vous pouvez afficher cette feuille de référence avec un navigateur Web ou l’imprimer. Pour créer une feuille de référence : 1 Choisissez Edition > Raccourcis clavier pour ouvrir la boîte de dialogue Raccourcis clavier. 2 Cliquez sur le bouton Exporter l’ensemble en tant que code HTML près du champ Ensemble actif. La boîte de dialogue Enregistrer sous est alors affichée. 3 Entrez le nom de la feuille de référence, puis sélectionnez un emplacement pour son fichier. 4 Cliquez sur Enregistrer. Utilisation des fichiers de configuration Pour gérer des systèmes multi-utilisateurs, Fireworks utilise des fichiers de profil utilisateur. Ainsi, certains utilisateurs peuvent personnaliser des fonctionnalités de Fireworks telles que les styles, les raccourcis clavier, les commandes et bien d’autres encore, sans affecter la configuration Fireworks pour les autres utilisateurs. Pour chaque utilisateur, Fireworks crée un ensemble de fichiers de configuration distinct. Fireworks installe également les fichiers de configuration maîtres dans le dossier de l’application Fireworks. Ces fichiers contiennent les paramètres de configuration par défaut de Fireworks et s’appliquent à tous les utilisateurs. Certains fichiers de configuration, tels que les plug-ins de Fireworks, se trouvent uniquement dans le dossier de l’application Fireworks. Sur certains systèmes, seul l’administrateur système peut accéder aux fichiers de configuration maîtres dans le dossier de l’application Fireworks. Fichiers des profils utilisateur Les fichiers des profils utilisateur de Fireworks sont conservés dans votre dossier des profils utilisateur. L’emplacement exact de ce dossier varie en fonction du système d’exploitation. Pour plus d’informations, voir « Localisation des fichiers de configuration » à la page 441. Dans le dossier des profils utilisateur de Fireworks MX, les fichiers des profils utilisateur sont organisés comme suit : Les commandes, panneaux de configuration, les styles, les paramètres d’exportation et les bibliothèques d’URL sont placés dans des sous-dossiers du dossier Macromedia/Fireworks MX. Le journal du projet est conservé dans un fichier appelé Project_Log.htm, qui se trouve dans le dossier Macromedia/Fireworks MX. Les préférences sont conservées dans un fichier appelé Fireworks MX Preferences.txt (sous Windows) ou Fireworks MX Preferences (sous Macintosh). L’emplacement exact de ce dossier varie d’un système à un autre. Il ne se trouve pas toujours dans le dossier des profils utilisateur. Pour plus d’informations, voir « Localisation du fichier des préférences Fireworks » à la page 442. Les raccoucis clavier se trouvent dans le dossier Macromedia/Fireworks MX/English/Keyboard Shortcuts. Préférences et raccourcis clavier 439 Votre dictionnaire personnel se trouve dans un fichier appelé Personal Dictionary.tlx figurant dans le dossier Macromedia/Common. Ce dictionnaire est utilisé par d’autres applications Macromedia. Les fichiers STL (Custom style) peuvent être enregistrés dans Nav Menu, un sous-dossier du dossier Macromedia/Fireworks MX. Vous pouvez y enregistrer les fichiers STL et les utiliser comme couleur d’arrière-plan des cellules de l’éditeur de menu contextuel. Le dossier Macromedia/Fireworks MX contient également plusieurs autres fichiers de profils utilisateur. Fichiers de configuration maîtres appliqués à tous les utilisateurs Les fichiers de configuration maîtres appliqués à tous les utilisateurs se trouvent dans le dossier de l’application Fireworks, c’est-à-dire le dossier du disque dur dans lequel vous avez installé Fireworks. Pour plus d’information sur l’emplacement de ce dossier, voir « Localisation des fichiers de configuration » à la page 441. Remarque : D’autres fichiers de configuration sont placés dans des sous-dossiers du dossier de l’application Fireworks. Leur emplacement exact varie en fonction du système d’exploitation. Par ailleurs, les utilisateurs Macintosh doivent connaître le concept du nouveau logiciel d’Apple. Pour plus d’informations, voir « Affichage du contenu du module (Macintosh uniquement) » à la page 443. Les fichiers de configuration maîtres du dossier de l’application Fireworks incluent les éléments suivants : Le dossier Keyboard Shortcuts contenant les jeux de raccourcis par défaut. Les raccourcis clavier que vous modifiez dans Fireworks ne seront pas enregsitrés dans ce dossier, mais dans votre dossier de profil utilisateur. Sur les systèmes Windows, le dossier Keyboard Shortcuts se trouve dans le sous-dossier English. Sur les systèmes Macintosh, ce dossier se trouve dans le dossier Contents/Resources/English.lproj de l’application Fireworks. Pour plus d’informations, voir « Localisation des fichiers de configuration » à la page 441. Le dossier Plug-ins est le dossier dans lequel vous pouvez installer des plug-ins et des filtres supplémentaires. Le filtres ou plug-ins de société tierce ne sont copiés dans ce dossier que si vous choisissez ce dernier lors de leur installation. Etant donné qu’il n’existe pas d’équivalent de dossier de profil utilisateur pour ce dossier, les plug-ins que vous installerez dans ce dossier seront accessibles à tous les utilisateurs. L’emplacement exact du sous-dossier Plug-ins dans le dossier de l’application Fireworks varie en fonction du système d’exploitation. Le dossier Quick Export Menu est le dossier dans lequel est stocké le contenu du menu déroulant Exportation rapide. Vous pouvez personnaliser ce menu si vous maîtrisez bien JavaScript et XML. Pour plus d’informations, voir « Personnalisation du menu contextuel Exportation rapide » à la page 372. Sur les systèmes Windows, le dossier Quick Export Menu se trouve dans le sous-dossier English. Sur les systèmes Macintosh, ce dossier se trouve dans le dossier Contents/Resources/English.lproj de l’application Fireworks. Pour plus d’informations, voir « Localisation des fichiers de configuration » à la page 441. Le dossier Configuration contient les sous-dossiers Batch Code, Commands, Command Panels, Libraries, Patterns, Spelling et Textures. Toute modification effectuée dans ce dossier s’appliquera à tous les utilisateurs. Le dossier de l’application Fireworks contient 440 Chapitre 18 également d’autres fichiers de configuration. Localisation des fichiers de configuration L’emplacement exact des fichiers de configuration varie en fonction du système d’exploitation et selon que vous utilisez un système multi-utilisateur ou un système autonome. Remarque : Par défaut, les systèmes Windows masquent souvent certains fichier et dossiers. Vérifiez que les options d’affichage des dossiers sont définies de manière à ce que que tous les fichiers et dossiers soient visibles. Sur certains systèmes, vous pouvez également activer l’option d’affichage des fichiers pour visualiser le contenu d’un dossier. Pour plus de détails sur l’affichage des fichiers et dossiers, consultez l’aide en ligne Windows. Pour localiser votre dossier de profil utilisateur : Sur votre disque dur, localisez dossier ci-dessous correspondant à votre système d’exploitation, où User ID est le nom d’utilisateur que vous utilisez pour vous connecter au système : Mac OS X : HD/Users/User ID/Library/Application Support/Macromedia/Fireworks MX Mac OS 9.1 ou supérieure, système autonome : HD/System Folder/Application Support/Macromedia/Fireworks MX Mac OS Mac 9.1 ou supérieure, système multi-utilisateur, utilisateur standard : HD/Users/User ID/Preferences/Macromedia/Fireworks MX Mac OS Mac 9.1 ou supérieure, système multi-utilisateur, administrateur (Propriétaire): HD/System Folder/Application Support/Macromedia/Fireworks MX Windows 98 et Windows ME, système autonome : C:\Windows\Application Data\Macromedia\Fireworks MX Windows 98 et Windows ME, système multi-utilisateur : C:\Windows\Profiles\User ID\Application \Application Data\Macromedia\Fireworks MX Windows NT 4 : C:\WINNT\Profiles\User ID\Application Data\Macromedia\Fireworks MX Windows 2000 et Windows XP : C:\Documents and Settings\User ID\Application \Application Data\Macromedia\Fireworks MX Si vous ne parvenez pas à localiser votre dossier de profil utilisateur à partir des chemins cidessous, c’est que votre système doit avoir une configuration personnalisée. Pour plus d’informations sur la localisation manuelle de votre dossier de profil utilisateur, voir « Localisation de votre dossier de profil utilisateur sur un système personnalisé » à la page 441. Remarque : Sur les systèmes personnalisés, les noms de certains dossiers système peuvent être différents. Pour localiser les fichiers de configuration maîtres applicables à tous les utilisateurs : Localisez le dossier d’installation de Fireworks sur le disque dur. Sous les systèmes Windows, l’emplacement par défaut est Program Files/Macromedia/Fireworks MX. Sous les systèmes Macintosh, l’emplacement par défaut est Applications/Macromedia Fireworks MX. Remarque : Sur les systèmes personnalisés, les noms de certains dossiers système peuvent être différents. Localisation de votre dossier de profil utilisateur sur un système personnalisé Si vous n’êtes pas parvenu à localiser votre dossier de profil utilisateur à l’aide de la procédure décrite dans « Localisation des fichiers de configuration » à la page 441, c’est que votre système a été installé avec une configuration personnalisée. Vous devrez alors localiser ce dossier manuellement en effectuant une recherche sur le disque dur. Préférences et raccourcis clavier 441 Si vous ne parvenez toujours pas à localiser ce dossier, contactez l’administrateur système pour obtenir de l’aide. Remarque : Sur les systèmes personnalisés, les noms de certains dossiers système peuvent être différents. Pour localiser votre dossier de profil utilisateur sous Mac OS X, Windows XP, Windows NT, Windows 2000 et des systèmes multi-utilisateurs Windows 98 et Windows ME : 1 Recherchez sur votre disque dur le nom d’utilisateur que vous utilisez pour vous connecter au système. Plusieurs fichiers ou dossiers peuvent apparaître dans le fenêtre des résultats de la recherche. 2 Ouvrez le dossier portant votre nom d’utilisateur. 3 Ouvrez le dossier Application Data/Macromedia/Fireworks MX (Windows) ou le dossier Application Support/Macromedia/Fireworks MX (Macintosh). Pour localiser votre dossier de profil utilisateur sur des systèmes autonomes Mac OS 9.x, Windows 98 et Windows ME : 1 Recherchez le dossier Application Data (Windows) ou Application Support (Macintosh) sur votre disque dur. 2 Ouvrez le dossier Macromedia/Fireworks MX. Pour localiser votre dossier de profil utilisateur sur un système multi-utilisateur Mac OS 9.x : 1 Recherchez sur votre disque dur le nom d’utilisateur que vous utilisez pour vous connecter au système. Plusieurs fichiers ou dossiers peuvent apparaître dans le fenêtre des résultats de la recherche. 2 Ouvrez le dossier portant votre nom d’utilisateur. 3 Ouvrez le dossier Preferences/Macromedia/Fireworks MX. Localisation du fichier des préférences Fireworks Les préférences Fireworks sont conservées dans un fichier appelé Fireworks MX Preferences.txt (sous Windows) ou Fireworks MX Preferences (sous Macintosh). L’emplacement de ce fichier varie en fonction du système d’exploitation. • Sous Windows, les préférences sont enregistrées dans le dossier Application Data/Macromedia/ Fireworks MX. • Sous Mac OS X, elles se trouvent dans le dossier Library/Preferences de votre dossier utilisateur. • Sur un système Mac OS 9.x autonome, les préférences sont conservées dans le dossier System/ Preferences. • Sur un système Mac OS 9.x multi-utilisateur, elles sont conservées dans le dossier Preferences de votre dossier utilisateur. Si vous possédez les autorisations d’accès de l’administrateur (niveau propriétaire), l’emplacement du fichier des préférences est le même que sur un système autonome. Pour plus d’informations sur l’emplacement de votre dossier utilisateur ou du dossier Application Data, voir « Localisation des fichiers de configuration » à la page 441. 442 Chapitre 18 Personnalisation des fichiers de configuration de tous les utilisateurs Que vous travailliez sur un système multi-utilisateur ou sur un système autonome, Fireworks modifie les fichier de profil utilisateur (mais pas les fichiers de configuration maîtres) dans le dossier de l’application Fireworks lorsque vous enregistrez des paramètres. Cela s’explique par le fait que, sur un système multi-utilisateur, bon nombre d’utilisateurs n’ont pas accès à tous les fichiers. Les utilisateurs ayant les autorisations d’accès de l’administrateur peuvent personnaliser des fonctions pour tous les autres utilisateurs en modifiant les fichiers de configuration maîtres dans le dossier de l’application Fireworks. Pour sauvegarder un fichier de configuration maître pour tous les utilisateurs : Enregistrez ou placez une copie du fichier à l’emplacement approprié dans le dossier de l’application Fireworks. Pour plus d’informations sur la localisation du dossier de l’application Fireworks, voir « Localisation des fichiers de configuration » à la page 441. Réinstallation de Fireworks Lorsque vous désinstallez Fireworks, vos fichiers de profil utilisateur restent intacts sur la plupart des systèmes. Si vous réinstallez Fireworks à partir des paramètres de configuration par défaut, supprimez manuellement vos fichiers de profil utilisateur avant de réinstaller l’application. Pour plus d’informations sur la localisation de ces fichiers, voir « Localisation des fichiers de configuration » à la page 441. Toutefois, pendant la procédure de désinstallation sur des systèmes Windows XP, Windows 2000 et Windows NT 4, le programme vous demandera si vous souhaitez supprimer les fichiers de préférences et de configuration. En supprimant ces fichiers, vous supprimez du même coup tous les utilisateurs du système. Affichage du contenu du module (Macintosh uniquement) Sur un ordinateur Macintosh, Fireworks est installé sous la forme d’un module. Cette nouvelle fonctionnalité d’Apple permet d’installer des applications dans un module autonome. Le fichier de l’application Fireworks, ainsi que ses fichiers de configuration par défaut sont placés dans le module de l’application. Par défaut, le contenu du module est masqué. Lorsque vous ouvrez le module, vous remarquez qu’ils contient plusieurs fichiers et dossiers. Deux de ces fichiers sont spécifiques à votre système d’exploitation. Les fichiers du dossier MacOS s’appliquent uniquement aux utilisateurs Mac OS X et ceux du dossiers MacOSClassic, aux utilisateurs Classic Mac. Pour plus d’informations, voir « Exécution de Fireworks MX Classic (Macintosh uniquement) » à la page 444. Pour afficher ou masquer le contenu du module Fireworks : 1 Localisez le dossier d’installation de Fireworks sur le disque dur. 2 Maintenez enfoncée la touche Contrôle et cliquez sur l’icône Fireworks MX, puis choisissez Afficher le contenu du module dans le menu contextuel. La nouvelle fenêtre qui apparaît affiche le contenu du module. Pour une description du contenu du module, voir « Fichiers de configuration maîtres appliqués à tous les utilisateurs » à la page 440. Préférences et raccourcis clavier 443 Exécution de Fireworks MX Classic (Macintosh uniquement) Pour la version Mac OS X, Fireworks dispose d’une nouvelle interface Aqua. Sur un système Macintosh, Fireworks installe à la fois la version Aqua de l’application et la version Classic habituelle. Fireworks démarre la version de l’application qui est appropriée à votre système d’exploitation. Cependant, les utilisateurs Mac OS X peuvent exécuter l’application Classic s’ils le désirent. Conseil : Les utilisateurs Mac OS X peuvent exécuter la version Classic de Fireworks si, par exemple, ils disposent d’anciennes versions de plug-ins qui ne sont pas prises en charge par Mac OS X. En exécutant la version Classic de Fireworks, ils pourront utiliser ces plug-ins. Pour plus d’informations sur le module Fireworks, voir « Affichage du contenu du module (Macintosh uniquement) » à la page 443. Pour exécuter la version Classic de Fireworks sur un système Mac OS X : 1 A partir du disque dur, sélectionnez le module Fireworks. Ce module se trouve dans le dossier d’installation de l’application Fireworks. 2 Choisissez Fichier > Lire les informations. 3 Activez l’option Ouvrir dans l’environnement Classic. 4 Fermez la fenêtre Lire les informations. 5 Démarrez Fireworks MX comme vous le faites habituellement. Après avoir modifié ce paramètre, Fireworks démarrera en chargeant l’environnement Classic chaque fois que ouvrirez l’application. Pour revenir à la version Aqua de Fireworks, désélectionnez l’option Ouvrir dans l’environnement Classic, dans la fenêtre Lire les informations avant de démarrer Fireworks. 444 Chapitre 18 INDEX A accentuation 151 images 137 zones bitmap 136 Accentuer davantage, filtre 151 Accentuer le flou, filtre 148 Accentuer, filtre 151 Accentuer, outil 136 actions, refaire 105 Adobe GoLive 371 Adobe Type Manager 7 affichage barres d’outils 93 bords 110 fichiers Fireworks dans un navigateur 73 panneaux 91 règles 102 Afficher/masquer les références et les découpes 274 ajout images 324 styles 257 alignement des objets 129 alpha, conversion des images en 150 alpha, couche d’un objet, sélection 117 ancrage de panneaux 90 animation 317 activation et désactivation d’images 323 affectation de noms aux images 323 affichage de l’image suivante 327 affichage de plusieurs images 327 affichage de toutes les images 327 affichage des images courantes et adjacentes 327 affichage personnalisé des images 327 ajout d’images 324 aperçu 328 création à partir de fichiers multiples 331 Déplacement d’objets dans une autre image 325 désactivation du partage d’un calque 326 exécution 328 exportation 330 images 319 images, utilisation 322 insertion d’images 324 lecture en boucle 329 mise à l’échelle 320 modification d’animations 384 modification de plusieurs images 327 mouvement 320 opacité 320 optimisation 330 ouverture 331 partage de calques entre plusieurs images 325 propriétés 319 réglage de la cadence d’images 322 réorganisation 324 rotation 320 séquence de calques 327 suppression 321 suppression des images 325 transparence 329 annulation 105 d’une étape, utilisation du panneau Historique 429 définir le nombre d’étapes annulées 433 anticrénelage bords 216 couleur de l’arrière-plan de destination 354 lissage du bord des caractères 185 suppression des halos 355 aperçu avec Aperçu avant exportation 335 pixels contenant une couleur spécifique 347 traits 206 Aperçu avant exportation 335 affichage panoramique 336 aperçu 335 aperçu de l’optimisation 335 445 comparaison des paramètres d’optimisation 336 optimisation 335 zoom 336 application d’un flou 148 images 137 zones bitmap 136 application d’une diffusion 135 apprentissage de Fireworks groupe de discussion 9 ressources 8 Arrière-plan, commande 129 assistants Exportation 334 Optimiser la taille 336 association Voir fusion association d’objets 127 assombrissement de zones d’image 136 images 138 automatisation des tâches 413 B barre de couleurs 196, 199 affichage des modèles de couleurs 201 choix d’une couleur avec 200 barre de lancement 97 barres d’outils affichage et masquage 93 ancrage 93 flottante 93 verrouillage 93 barres de nav (navigation) comportement Restaurer 283 création 305 état Au-dessus 282 état Enfoncé 283 bibliothèque d’URL 264 ajout d’URL 265 ajout d’URL utilisées 266 création 265 saisie d’URL absolues ou relatives 266 bibliothèque de symboles 259 Bibliothèque, panneau 90 bitmap, graphiques 76 Voir bitmaps bitmap, mode 76 appliquer avec les outils 87 basculer vers 131 bitmaps effacement 135 446 Index flou et accentuation 148 réglage de la couleur et du ton 139 réglage de la luminosité et du contraste 145 réglage de la teinte et de la saturation 146 retouche 136 blocs de texte déplacement 176 largeur fixe 177 redimensionnement 177 redimensionnement automatique 177 boîte de dialogue Exporter 357 Modifier le dégradé 213 Propriétés du symbole 259 Traitement par lots 419 boîte de dialogue de modification de trait 206 bords affichage et masquage 110 biseautés 221 Bordure, commande 119 bouton, symboles création 54 modification 58 boutons association d’URL vers 58 barres de navigation 305 création 54, 295 définition 296 définition d’une cible 304 éditeur de boutons 295 effets en direct 298 états 55 exportation 295 Exportation rapide 93 généralités 295 occurrences 56 Qualité sélective 353 texte de l’occurrence 57 zone active 302 Brûlure, outil 136 C cadence d’images par défaut 79 cadence des images, animations 322 cadres de sélection 23, 110 déplacement 115 désélection 114 extension 119 lissage 120 réduction 119 sauvegarde et restauration 120 sélection d’une zone autour 119 sélection de pixels par intersection 116 suppression 114 transfert vers un autre objet 120 Calque Web 232 calques 26 activation 228 affectation d’un nom 230 affichage 229 ajout et suppression 228 déplacement 230 désactivation du partage entre plusieurs images 326 duplication 229 exportation 360 partage 232 partage entre plusieurs images pour l’animation 325 verrouillage 231 calques CSS, exportation 368 Calques, panneau 89 caractères Voir polices carrés, dessin 154 cartes images création 290 exportation 292 cercles, dessin 154 clonage images 136 objets 122 zones bitmap 136 codage UTF-8 369 code HTML 362 configuration 369 copier-coller de Fireworks dans Dreamweaver 365 exportation 364 code source HTML copier-coller de Fireworks dans Dreamweaver 365 collage d’un code HTML 366 colorier les images 146 combinaison Voir fusion commandes Coller dedans 238 création 429 enregistrement 105 Etendre le trait 173 Fusionner la sélection 132 Masquer la sélection 241 Mettre à jour le code HTML 367, 378 modification 431 Occurrences interpolées 328 Optimiser l’image dans Fireworks 382 renommer des commandes personnalisées 431 renommer ou supprimer des commandes Fireworks 431 Révéler la sélection 241 supprimer des commandes personnalisées 431 Tout révéler 241 traitements par lots 424 Vérifier l’orthographe 191 comportements Afficher le menu contextuel 283 Barre de navigation Au-dessus 282 Barre de navigation Enfoncé 283 Image de la barre de navigation 282 Macromedia Dreamweaver 4 277 panneau 90 panneau Comportements 282 Permutation d’images 282 Restaurer la barre de navigation 283 Survol Simple 282 Survol simple 282 Texte de la barre d’état 283 comportements glisser-déposer création d’effets de survol non superposé avec 280 définition 278 pour découpe unique 279 suppression 281, 282 trait bleu 279 compression choix d’un type de fichier 341 et optimisation 337 flou de contours 353 réglage 349 sélective 353 Compression JPEG sélective activer la qualité sélective 353 couleur de superposition 353 préserver la qualité du bouton 353 préserver la qualité du texte 353 compression JPEG sélective 352 configuration de Fireworks 433 configuration système pour Fireworks 7 contenu du module, visualisation 443 contextuels, menus, personnalisation 62 contours 204 Voir aussi traits Contraction, commande 119 contraste 145 copie attributs d’objet 258 bitmaps 121 code HTML 364 Index 447 images 324 objets 122 pixels 110 tous les objets sélectionnés sur un calque 230 copier et coller code HTML de Fireworks 365 objets provenant d’autres applications 82 occurrences de symbole 263 copies de sauvegarde, durant une recherche / remplacement 415 correction des couleurs avec la pipette 145 Courbes 143 luminosité et contraste 145 Niveaux 141 correction orthographique 191 couleur 24 bits 344 32 bits 344 affichage des valeurs des couleurs 201 application à partir du panneau Nuancier 196 changement de trait 205 choix avec l’outil Pipette 204 choix d’un groupe d’échantillons 197 choix de la profondeur de couleur 344 création avec le sélecteur de couleurs du système 201 création dans le Mélangeur 201 définition des préférences 433 échantillonnage 204 enregistrement d’échantillons personnalisés 199 fenêtre contextuelle 203 inversion des valeurs 147 modèles de couleurs 200 modifier 133 prélèvement 134 recherche et remplacement 417 recherche et remplacement de couleur non Websafe 418 réglage 139 remplacement d’un échantillon 199 rétablissement des couleurs par défaut 196 sélection à partir de la barre de couleurs 200 suppression dans le panneau Nuancier 199 suppression des couleurs non utilisées 345 tramage à l’aide de Websafe 202 trame en dégradé 213 Couleur de remplissage 133 Couleurs du système Windows, comme groupe d’échantillons 197 Couleurs Websafe 348 coupe de trajets 170 448 Index Crayon, outil 133 création d’une zone Voir document création de scripts, fichiers Flash SWF 430 crénelage 181 Cutter, outil 170 D décalage de la ligne de base 186 découpage 48 d’un document 48 découpes 77 affichage ou masquage de la couche de découpe 341 chevauchement 277 création 270 définition 269 exportation 358 interactivité 270 mise à jour 359 modification de découpes de tableaux de Macromedia Dreamweaver 381 modification de la couleur 274 nom automatique 286, 287 nom automatique, changement de la convention de nom par défaut 288 polygone 272 redimensionnement 276 se chevauchant 277 texte 271 utilisation de séparateurs 288 utilisation de tables imbriquées 288 défilement du document Voir vue d’ensemble dégradés modification 213 trames en 134 demi-tons 141 désélection de tous les objets 109 Désélectionner, commande 114 désinstallation de Fireworks 443 dessin changement des segments adjacents 164 conversion de trajets droits en trajets courbes 162 courbe de segments adjacents 164 objets de distorsion 126 sélection d’un point. 163 séparation de trajets 170 dessiner de nouveau des trajets 169 didacticiels 9 Didacticiel des bases de la conception graphique 15, 45 diffusion création de bords diffusés 216 sélections de pixels 118 Diffusion, commande 135 disques de travail 435 dissociation d’objets 127 distorsion d’objets 126 Distorsion, outil 126 documents affichages multiples 96 création d’un nouveau document 78 mode par défaut 153 modification de la résolution 98 modification des caractéristiques 98 mosaïque 96 ouverture 79 récents 79 réduction 100 rotation 100 sauvegarde 84 DPI Voir résolution duplication en faisant glisser le pointeur 122 objets sélectionnés 122 E échantillons ACT 197 éclaircissement de zones bitmap 136 images 138 Editeur de boutons 296 création de symboles 259 modification de symboles 261 édition objets bitmap 133 objets sélectionnés 122 effacement de bitmaps 135 effets application aux objets 220 Effets en direct 219 modification 224 néon 223 plug-ins 224 recherche et remplacement 417 suppression 225 valeurs par défaut 226 effets en direct 24 activation ou désactivation 221 application 226 couleur de trame 254 création 225 dans les boutons 298 modification 224 plug-ins Photoshop 223 renommer 226 suppression 225 Ellipse, outil 154 ellipses, dessin 154 empilage des objets 128 enterlacement d’images 351 environnement de travail 86 EPS, fichiers, ouverture dans Fireworks 79 espacement des caractères Voir crénelage espacement des lettres Voir crénelage espacement des lignes Voir interlignage espacement des paragraphes 184 estampe 221 état, barre de (Windows) 97 états de bouton Au-dessus 296, 297 Au-dessus Enfoncé 296, 298 Enfoncé 296, 298 Relevé 296, 297 étoiles contrainte 156 dessin avec l’outil Polygone 156 événements souris 283 exécution animations 328 commandes enregistrées 430 macros 430 exportation 41 animations 329, 360 Assistant 334 boutons 295 calques CSS 368 calques dans des fichiers distincts 360 codage UTF-8 369 découpes 285, 358 fichier HTML 362 fichier XHTML 368 fichiers Fireworks vers Dreamweaver 401, 405 GIF animés 330 graphiques 77 HTML 69 images 357 images dans des fichiers distincts 360 paramètres du traitement par lots 422 Index 449 Photoshop 409 références 292 résultats 363 styles 258 symboles 263 vers des fichiers WBMP 342 vers Illustrator 395 vers Macromedia Director 398 vers Macromedia Dreamweaver 378 vers Macromedia Flash 388, 390 vers Macromedia FreeHand 395 vers Photoshop 410 zone 361 Exportation rapide 371 menu contextuel 372 Exporter zone, outil 361 extension de Fireworks 9 extension de traits 173 Extension Manager 428 Extension, commande 119 F fichier HTML exportation 362 insertion depuis Fireworks dans Dreamweaver 376 fichier PNG, transparence 392 fichier XHTML 368 fichiers de configuration 439 localisation 441 maîtres 440 personnalisation 443 systèmes multi-utilisateurs 441 fichiers de profils utilisateur 439 fichiers externes, conversion en survols 284 fichiers JPEG choix d’un format JPEG 342 commande Bords des JPEG plus nets 353 compression JPEG sélective 352 modification des zones sélectionnées 353 paramètres d’optimisation 351 progressive 354 fichiers temporaires 435 fichiers valides, définition 420 fichiers WBMP, exportation vers 342 filtres 24 accentuer 151 Accentuer davantage 151 Accentuer le flou 148 Flou 148 Flou gaussien 149 Inverser 147 450 Index Luminosité/Contraste 145 Masque d’accentuation 151 plug-ins Photoshop 223 Rechercher les bords 150 Teinte/Saturation 146 Fireworks MX Classic 444 Fireworks, aide 8 flottante, sélection de pixels création 121 déplacement 121 Flou gaussien, filtre 149 Flou, filtre 148 Flou, outil 136 fondu application 254 couleurs des objets superposés 251 définition du mode de fondu 254 format de fichier BMP 342 GIF 341 GIF, choix 341 GIF, choix d’une palette de couleurs 343 GIF, échantillons 197 JPEG 342 PICT 342 PNG 342 PNG, choix 342 PNG,choix d’une palette de couleurs 343 TIFF 342 TIFF, choix 342 formes Voir graphiques vectoriels FrontPage 371 création d’images Fireworks dans 403 insertion d’images Fireworks dans 403 insertion de code HTML Fireworks dans 404 modification de fichiers Fireworks dans 406 fusion bitmaps 26 trajets 165, 170 G généralités 95 Glisser-déposer 81 GoLive 371, 411 Gomme, outil 135 gradation utile 140 réglage avec Courbes 143 réglage avec Niveaux 141 grille accrocher des objets à 104 affichage ou masquage de 104 changement de la couleur par défaut 104 modification de la taille des cellules 104 groupe d’échantillons, choix d’un groupe personnalisé 197 groupe de discussion, Fireworks 9 H halos, suppression 355 histogramme 141 Historique, panneau 90, 105 HomeSite insertion d’images Fireworks dans 401 insertion de code HTML Fireworks HTML dans 401 HTML exportation 69 mise à jour de code HTML Fireworks placé dans Macromedia Dreamweaver 378 ouvertures de tables 81 préférences d’exportation 69 remplacement d’une ancienne version 367 Roundtrip 380 utilisation avec les éditeurs 411 I illusion de transparence 203 Illustrator, exportation vers 395 images activation et désactivation 323 affichage de la suivante 327 affichage des images courantes et adjacentes 327 affichage personnalisé 327 afficher toutes 327 ajout 324 cadence 322 collées 83 comme trames, voir Commande Coller dedans composites 251 Déplacement d’objets dans une autre image 325 désactivation de la séquence de calques 327 désactivation du partage d’un calque 326 exportation 357, 360 gestion 322 icônes, voir vignettes insertion 324 matricielles 131 modification de plusieurs images 327 noms dans l’animation 324 partage de calques pour l’animation 325 peinture 133 réorganisation 324 sélection 110 sélection de pixels 110 séquence de calques 327 suppression 325 Images, panneau 89 Import Xtra pour Director 397 importation appareil photo numérique 84 fichiers Photoshop 407 fichiers PNG 83 graphismes 47 images 22 préférences d’importation de fichiers Photoshop 436 styles 258 symboles 263 importation de texte 190 fichiers Photoshop 190, 407 fichiers RTF 190 texte ASCII 191 imposer à la rotation 125 inclinaison d’objets 125 Inclinaison, outil 125 info-bulles 9 Informations, panneau 89 insertion fichier HTML Fireworks dans Dreamweaver 376 images Fireworks dans Dreamweaver 374 installation de Fireworks 8 installation de plug-ins Photoshop 223 intégration de Dreamweaver et Fireworks commande Optimiser l’image dans Fireworks 382 Design Notes 387 lancement et modification d’images Fireworks 380 lancement et modification de tableaux Fireworks 381 lancement et optimisation d’images Fireworks 383 mise à jour de code HTL Fireworks 378 modification d’animations Fireworks 384 préférence d’éditeur externe 386 préférences, Lancer et modifier 387 redimensionnement d’images Fireworks 384 Intégration Design Notes pour Macromedia Dreamweaver et Fireworks 387 interactivité 77 interface carbonisée 444 interlignage 182 interpolation caractéristiques 328 définition 328 mise à l’échelle 433 objets 328 Intersection, commande 171 Inverser, filtre 147 Index 451 J JavaScript 7 jeux de raccourcis Voir raccourcis clavier jeux de raccourcis personnalisés, voir raccourcis clavier Journal de projets 90 Journal du projet 427 affichage 428 ajout de fichiers 427 enregistrement des modifications à l’aide de Rechercher et remplacer 413 exportation d’un fichier 428 impression 428 ouverture 427 recherche 427 suppression d’une entrée 427 JPEG progressive 354 L lancement de Fireworks dans Dreamweaver 381 lancement de Fireworks depuis Dreamweaver. Voir Intégration Macromedia Dreamweaver et Fireworks Le site Web du Centre d’assistance de Fireworks 9 Ligne, outil 154 lignes dessin 154 Voir traits limites 204 Lissage, commande 120 luminosité 145 Luminosité/Contraste, filtre 145 M Macintosh 7 configuration requise 7 OS 9.1 441 OS X 441 Macromedia Director 7 acteurs 400 exportation vers 398 insertion de fichiers Fireworks dans 397 Macromedia Dreamweaver 7 bibliothèques 378 comportements 382 comportements Dreamweaver 4 277 définition de Fireworks comme éditeur d’images par défaut 385 exportation vers 378 fichiers 374 marques de réservation 374 452 Index modification d’images Fireworks dans 379 Macromedia Flash 7 exportation vers 388, 390 importation Fireworks PNG vers 388 Macromedia FreeHand 7 exportation vers 395 insertion de graphiques Macromedia Fireworks dans 394 Macromedia, aide 8 macros 430 maculage images 138 zones bitmap 136 masquage barres d’outils 93 bords 110 calques 231 objets des calques 231 panneaux 91 Masque d’accentuation, filtre 151 masque vectoriel conversion en masque bitmap 250 création 236 utilisation d’un objet existant 238, 240 Masquer les panneaux, commande 91 Masquer tout 241 masques 29, 233 activation 250 application 30 bitmap 234 création de masques vides 241 déplacement avec les objets masqués 245 désactivation 250 modification 30, 247 regroupement d’objets pour former un masque 243 suppression 251 texte comme masque 239 utilisation d’un objet existant 238 utilisation d’un objet existant comme 240 vectoriels 233 masques bitmap 233, 234 création 240 utilisation d’un objet existant 238, 240 mélange d’objets 328 Mélangeur 89, 199, 200 affichage 200 création de couleurs avec 201 mélange de couleurs dans 200 Mémoire vive Voir Configuration requise menu Commandes 430 gestion des commandes enregistrées 431 menu déroulant Effets 219 menus contextuels 101 création 60 définition des positions 314 description 306 exportation 316 modification 64, 315 propriétés avancées 312 réglage de l’apparence 310 saisie du texte du menu 307, 308 méthode de mise à l’échelle par interpolation adoucie 434 par interpolation au plus proche 434 par interpolation bicubique 433 par interpolation bilinéraire 434 miroir Voir retournement d’objets mise à jour des découpes 359 mise à l’échelle de graphismes 422 objets 124 options d’interpolation 433 Mise à l’échelle, outil 124 Mise en retrait d’un texte 184 Mode normal 95 Mode plein écran avec affichage des menus 95 modèles de couleurs CMJ 200 Echelle de gris 200 Hexadécimal 200 RVB 200 TSL 200 modes bitmap, préférence Afficher la bordure rayée 434 d’affichage 95 d’affichage, basculer 97 entrée d’un bitmap 76 entrée d’un vecteur 76 vectoriel 153 vectoriel, dessin dans 153 modes de fondu 251 couleur 252 différence 252 éclaircir 252 Ecran 251 effacer 252 foncer 252 inverser 252 luminosité 252 multiplicateur 251 nuance 252 saturation 252 teinte 252 modification comportements 283 effets en direct 224 étapes dans le panneau Historique 432 menus contextuels 315 par calque 231 pixels 110 styles 257 symboles d’animation 319 symboles de bouton 58 trajets 166 trames dégradées 213 trames unies 211 module de l’application 443 multiples, occurrence de boutons 56 N nav (navigation), barres, création 54 navigateur, affichage des fichiers dans Fireworks 73 navigation dans un document 93 négatif 99 néon, effets 223 Niveaux automatiques, fonction de réglage de la gradation utile 140 Niveaux, fonction de réglage de la gradation utile 140 nommer des objets 28 noms de fichiers, modification à l’aide d’un traitement par lots 423 nouveau document, correspondant à la taille du Pressepapiers 78 nouvelles fonctions 10 Nuancier 196 panneau 89 nuancier, choix d’un nuancier personnalisé 197 O objets 26 association 127 conversion en symbole d’animation 319 création de bitmaps 132 déplacement d’objets sélectionnés 122 dissociation 127 distorsion 126 empilage 128 fusion 231 inclinaison 125 localisation des objets collés 82 Index 453 nommer 28 ordre d’empilement 29 pivoter 125 propriétés 21 sélection 107 sélection d’une couche alpha 117 suppression d’un effet 225 objets vectoriels 19 modification de la forme 166 occurrences définition 259 interpolation 328 mise en place dans le document 260 ombres 38, 141, 222 ombres portées 38, 222 Onglet Aperçu 339 opacité réglage 254 Voir transparence optimisation 39, 66 animations 330 graphiques 77 images Fireworks depuis Dreamweaver 382 notions de base 333 utilisation de l’Assistant Exportation 335 optimisation, paramètres comparaison de deux ou quatre paramétrages 340 enregistrement 338, 355 modification dans un traitement par lots 421 partage avec un autre utilisateur 356 réutilisation 338, 355 suppression des paramètres prédéfinis 356 Optimiser, panneau 90 Option Respecter les proportions 80 Options, menu, dans des panneaux 92 organisation des images 324 orientés objet, graphiques Voir graphiques vectoriels OS X, Macintosh 441 outils Accentuer 136 Baguette magique 110 Brûlure 136 Cadre de sélection 110 Cadre de sélection oval 110 Crayon 133 Distorsion 126 Flou 136 Gomme 135 Inclinaison 125 454 Index Lasso 110 Lasso polygonal 110 mise à l’échelle 124 modification de couleur de trait 205 modifier les options 87 Modulateur de trajet 169 outil de groupe des menus contextuels 88 Pinceau 133, 157 Pipette 134, 198 Plume, ajout de points avec 165 Plume, suppression de points avec 165 Pointeur 107, 110 Polygone 155 dessin d’étoiles avec 156 Révélateur 136 section Couleurs du panneau Outils 195 Sous-sélection 166, 245 Sous-sélection, jonction automatique de trajets avec 166 Sous-sélection, sélection de masques 245 Tache 136 Tampon encreur 136 Texte 175 Transformation 123 Zoom 94 Outils, panneau 87 ouverture affichages de document multiples 96 documents 79 fichiers multiples pour une animation 331 GIF animés 79, 331 ouvrir fichiers récents 79 graphiques créés depuis d’autres applications 79 ovales, dessin 154 P palettes de couleurs adaptative 343 affichage 346 ajout au nuancier actif 198 définition du nombre de couleurs 344 Echelle de gris 343 enregistrement 348 Exact 343 importation 344 modification 347 Noir et Blanc 343 optimisation 347 Personnalisée 343 Système (Macintosh) 343 Système (Windows) 343 Uniforme 343 verrouillage des couleurs 347 Web 216 343 WebSnap Adaptive 343 panneaux 89 ancrage 90 annulation de l’ancrage 90 Bibliothèque 90, 259 Bibliothèque, insertion des symboles de bouton 300 Calques 89 Calques, affichage des découpes 273 Calques, nom des découpes 287 Comportements 90, 282 déplacement 90 enregistrement de dispositions personnalisées 93 Historique 90, 105 Historique, effacement de toutes les étapes 429 Historique, modification des étapes 432 Historique, modification du nombre d’étapes dans 429 Historique, réexécution de étapes 430 Images 89, 322 Informations 89 journal de projets 90 masquage 91 menu Options dans 92 Nuancier 89, 196 Nuancier, ajout d’échantillons 198 Nuancier, couleurs du système Windows 197 Nuancier, enregistrement personnalisé 199 Nuancier, remplacement d’une couleur 199 Nuancier, suppression d’une couleur 199 Optimiser 90 organisation 90 Outils 87 ouverture de dispositions personnalisées 93 Rechercher et remplacer 90, 414 Réponses 9, 90 restauration des positions par défaut 91 Styles 90, 256 supprimer d’un groupe 91 URL 90, 264 Zone Rechercher 416 paramètres d’optimisation JPEG 351 prédéfinis 286, 338 partage des calques 232 permutation d’images par survol 279 avec découpe unique 279 création de survols non superposés 280 perspective, illusion 125 Photoshop application de plug-ins 224 exportation 409 groupes de calques 233 importation de fichiers dans Fireworks 407 installation de plug-ins 223 installation des plug-ins Acquire 84 masques de calques 243 motifs 435 plug-ins 409, 435 préférences dimportation 436 textures 435 Photoshop et Fireworks exportation de fichiers PSD depuis Fireworks 410 Importation de fichiers PSD dans Fireworks 407 Pinceau, outil 133 pinceaux configuration 208 enregistrement des paramètres 210 options de trait 207 Pipette, outil 134 pivoterdes objets 125 pixels application d’une diffusion 135 clonage 136 copier 110 couper 110 déplacement 110 extension du cadre de sélection 119 gradation utile 141 lissage de la bordure du cadre de sélection 120 peinture 133 réduction de la bordure de sélection 119 réglage de la gradation utile avec les boutons pipette 145 sélection 23, 110 sélection d’un ensemble polygonal 112 sélection d’une forme libre 112 sélection d’une zone autour d’un cadre de sélection 119 sélection de couleurs similaires 113 plug-ins 24, 409 emplacement des fichiers 440 Plume, outil 158 prolongement d’un trajet 165 segments de courbe 159 segments de droite 159 poignées de point 161 affichage 163 poignées, transformer 123 Poinçon, commande 171 point central Index 455 dessiner depuis 154 et l’axe de rotation 125 pointeur de pipette 200, 203, 204, 211 Pointeur, outil 107, 110 points ajout 165 conversion 162 conversion de droites en courbes 162 courbe de segments adjacents 164 d’angle 159 de courbe 159 déplacement 164 modification des segments adjacents 164 sélection 163 suppression 165 Voir pixels polices recherche et remplacement 416 styles 178 tailles de type 178 traitement des polices manquantes 191 polygones contrainte 156 dessin 155 préférences 433 Afficher l’aperçu de la plume 434 Afficher la bordure rayée 434 Afficher les icônes des onglets 434 Afficher les points unis 434 Ajouter des icônes d’aperçu 434 annuler des actions 433 Choisir la distance 434 couleurs par défaut 433 Curseurs de peinture et de taille de trait 434 Curseurs précis 434 d’éditeur externe 386 définition 433 Désactiver les bords 434 Distance d’accrochage 434 emplacement des fichiers 439, 442 exportation HTML 69 Importation 408 Lancer et modifier 387 options d’édition 434 options d’importation 436 options d’interpolation 433 options de dossiers 435 par défaut 436 restauration de valeurs par défaut 436 Supprimer les objets pendant le recadrage 434 456 Index Premier plan, commande 129 prévisualisation documents dans un navigateur 371 documents sur différentes plates-formes 96 paramètres d’optimisation 339, 340 Procédure de travail dans Fireworks 76 propriétés affichage dans le Vérificateur de propriétés 88 d’un bouton interactif 302 d’un symbole 301 des bordures de cellule 313 des occurrences 302 objet 21 texte 36 Vérificateur 88, 109 R raccourcis clavier changement du jeu actif 436 feuille de référence pour l’ensemble de raccourcis actif 439 jeux de raccourcis clavier 437 raccourcis secondaires 437 suppression des jeux de raccourcis personnalisés 438 Rapporter le trajet, commande 173 recadrer document 100 documents 101 Recadrer, commande 172 recherche Voir aussi recherche et remplacement recherche et remplacement 414 choix de la source de recherche 414 couleurs 417 couleurs non Websafe 418 dans plusieurs fichiers 415 de texte 416 fichiers de traitements par lots 423 polices de caractères 416 URL 418 utilisation 413 rechercher 413 Rechercher et remplacer, panneau 90, 416 Rechercher les bords, filtre 150 Rectangle arrondi, outil 155 Rectangle, outil 154 rectangles angle arrondi 155 dessin 154 Redessiner le trajet, outil 169 redimensionnement d’images Fireworks depuis Dreamweaver 384 réduction de traits 173 réduction des points 172 réduction du document 100 rééchantillonnage description 99 négatif 99 objet vectoriel 99 objets bitmap 99 positif 99 réexécution des animations 328 références 77 affectation de l’URL 285 applications de survols de glisser-déposer 293 création 290 irrégulières 291 modification de la forme 291 par-dessus des découpes 293 réglage gradation utile avec les boutons pipette 145 teinte ou saturation 146 règles 102 réinstallation de Fireworks 443 remodelage d’objetsvectoriels 168 remplacementdes éléments 413 renommer des symboles 260 repères accrocher des objets à 104 verrouillage 104 repères de découpe affichage 274 modification de la couleur 274 suppression 276 répétition d’une étape à l’aide du panneau Historique 429 Réponses, panneau 90 résolution 7 ressources d’apprentissage de Fireworks 8 retournement d’objets 125 Révélateur, outil 136 rotation déplacement de l’axe 125 objets 124 rotation, imposer à la 125 S saturation, réglage 139 sauvegarde des documents 84 scripts 430 modification des scripts 431 scripts de commandes, modification 431 scripts de traitement par lots 425 exécution 426 glisser-déposer 426 segments de courbe, édition 161 segments de droite, édition 160 segments, conversion 162 sélecteur de couleur, système 201 Sélecteur de couleurs du système 201 sélecteur de couleurs du système 201 sélection ajout dans une sélection de pixels 116, 117 annulation d’une sélection 123 application d’une diffusion à une sélection de pixels 118 contraction de la bordure du cadre 119 couche alpha 117 couleurs similaires 113 désélectionner un cadre de sélection 114 désélectionner un objet 109 diffusion des bords 135 ensemble de pixels forme libre 112 ensemble polygonal de pixels 112 extension d’un cadre de sélection 119 images 110 inversion d’une sélection de pixels 118 lissage de la bordure du cadre de sélection 120 objet supplémentaire 109 objets associés 128 pixels 23, 110 points 163 rendre flottante une sélection de pixels 121 soustraction d’une sélection de pixels 118 superposition de zones de bitmaps 118 zone entourant un cadre de sélection 119 zones de pixels 111 sélection, rectangles Voir cadres de sélection séparateurs 289 Séparer, commande 170 séquence de calques affichage de l’image suivante 327 affichage de toutes les images 327 affichage des images courantes et adjacentes 327 affichage personnalisé 327 définition 327 désactivation 327 éditeur de boutons 295 modification de plusieurs images 327 simplification de trajets 172 Simplifier, commande 172 styles Index 457 ajout 257 application 256 basés sur des styles existants 257 changement de taille des icônes 258 définition 255 exportation 258 importation 258 modification 257 nouveau 257 réinitialisation avec les valeurs par défaut 258 suppression 257 styles de texte effets 186 gras 179 italique 179 souligné 179 traits 186 trames 186 Styles, panneau 90 suppression calques 229 effets 225 effets en direct 225 images 325 masques 251 objets sélectionnés 123 points 165 points des courbes 145 portions d’un trajet 171 styles 257 survols 77 barres de navigation 305 comportement Survol Simple 282 conversions en boutons 299 création 50, 295 définition 277 fichiers externes 284 forme irrégulière 272 permutation d’images 279 simples 282 simples, création 282 zone active 302 survols non superposés 280 affectation à des références 293 application à une découpe 281 création 280 symboles création 259 création d’occurrences 260 définition 259 458 Index duplication 260 exportation 263 importation 263 interpolation 328 mise en place d’occurrences dans le document 260 modification 260 modification des graphismes 321 rupture de lien 261 suppression 261 symboles de bouton insertion dans un document 300 modification 301 T table de couleurs 346 nuancier avec plusieurs attributs 346 nuancier modifié 346 nuancier transparent 346 nuancier verrouillé 346 nuancier Websafe 346 sélection de couleurs 347 Table de couleurs, panneau mise à jour 346 tables imbriquées 289 Tache, outil 136 taille de fichier niveau de perte acceptable pour la réduction de la taille du fichier 349 réduction de la qualité 352 Tampon encreur, outil 136 teinte, réglage 139, 146 Teinte/Saturation, filtre 146 téléphone cellulaire, graphiques Voir WBMP, fichiers téléphone mobile, graphiques Voir WBMP, fichiers test de fichiers 72 texte alignement 183 attributs, enregistrement 186 augmentation et réduction de la largeur des caractères 185 couleur 179 création 32, 34 découpes 271 direction de 182 Editeur de texte 193 espacement des paragraphes 184 gras 178 italique 178 mise en retrait 184 modification 177 occurrences du bouton 57 orientation 182 propriétés 36 recherche et remplacement 416 saisie 175 souligné 178 vérifier l’orthographe 191 texte de description 285 affectation aux boutons ou aux occurrences 305 texture ajout à des traits 216 ajout à des trames 217 ton, réglage 139 traçage de points 158 traitements par lots 419 commandes 424 copies de sauvegarde, fichiers 425 enregistrement des fichiers 421 enregistrement sous forme de scripts 425 mise à l’échelle de graphismes 422 noms de fichiers 423 optimisation, paramètres 421 paramètres d’exportation 422 Rechercher et remplacer 423 traits 204 ajout d’une texture 216, 217 bords de 205 choix 205 couleur des outils de dessin 205 création personnalisée 206 définition de la sensibilité 209 enregistrement des paramètres 210 fenêtre 205 modification 204 modification du centrage 209 permutation des couleurs de trait et de trame 196 recherche et remplacement 417 recouvrement du tracé 210 réorientation 209 rétablissement de couleur par défaut 196 trajets 170 ajout d’une texture de trait 216 changement de forme 164 changement de segments adjacents 164 composites 170 conversion de droites en courbes 162 copie et collage 396 courbe de segments adjacents 164 création de traits personnalisés 206 de forme libre 157 édition de traits 204 permutation des couleurs de trait et de trame 196 pousser 168 recadrage 172 rétablissement des couleurs par défaut 196 sélection d’un point. 163 séparation 170 traction 167 trajets de texte attacher le texte au trajet 187 conversion de texte en trajets 189 déplacement du point de départ du texte 189 détacher des trajets 188 modification de la forme 188 modification du texte attaché à un trajet 188 placement de texte sur un trajet 188 tramage 345 couleurs Websafe 202 trame de couleur 146 trames ajout d’une texture à 217 application d’une trame de couleur 146 application d’une trame unie 211 application de dégradé 134, 213 application de motif 212 changement des bords 216 couleur des formes de base 211 déplacement 215 diffusion ou anticrénelage 216 enregistrement d’un dégradé personnalisé 216 enregistrement de dégradé 216 illusion de transparence 203 modification de trames unies 211 modificationde dégradé 213 permutation des couleurs de trait et de trame 196 recherche et remplacement 417 recouvrement de traits 210 réglage 215 rétablissement de couleurs par défaut 196 rotation 215 tramage Web 202 transformation de dégradé 215 transformation de motif 215 trames dégradées ajout d’une nouvelle couleur 214 Index 459 ajustement de la transition entre les couleurs 214 application 213 boîte de dialogue Modifier le dégradé 213 conversion des images en transparents 150 déplacement 215 enregistrement personnalisé 216 modification 213 modification de couleurs 214 réglage 215 rotation 215 suppression de couleurs dans 214 transformation 215 trames texturées application 212 déplacement 215 réglage 215 rotation 215 trames unies ajout d’une texture à 217 application 211 transformation numérique 126 objets 123 par glissement 123 texte 189 textures 215 trames dégradées 215 Transformation numérique, commande 126 transformation, outils Distorsion 126 Inclinaison 125 Mise à l’échelle 124 transparence ajout ou suppression de couleurs 350 animation 329 conversion des images en transparents en dégradé 150 dans les fichiers PNG 392 sélection d’une couleur 350 Voir aussi opacité travail, environnement de 18 travail, espace de 18 triangles, dessin 155 U Union, commande 171 URL absolues, saisie 266 affectation à d’un objet Web 266 affectation aux boutons ou occurrences 303 association à des boutons 58 cible, choix de l’option 286 460 Index panneau 90 recherche et remplacement 418 relatives, saisie 266 V vectoriel graphique 75 mode 76 mode, basculer vers 131 objet 19 objet, création 20 Vérificateur de propriétés 109 ancrage 89 annulation de l’ancrage 88 déploiement 89 masquage avec 248 réduction 89 sélection, informations sur 109 utilisation de texte dans 175 verrouillage des claques 231 Vers l’arrière, commande 129 Vers l’avant, commande 129 vignettes dans le panneau Calques 228 sélection de masques 244 W WAP, graphiques WBMP, fichiers Windows configuration requise 7 Windows 2000 441 Windows 98 441 Windows ME 441 Windows NT4 441 Windows XP 441 X Xtras Voir filtres Z zone Couleur de trait 205 zones de transparence 349 zones les plus claires 141 zoom 93 avant, utilisation zoom prédéfinis 94 zone spécifique 95 Zoom, outil 94 ">
Публичная ссылка обновлена
Публичная ссылка на ваш чат обновлена.