STUDIO 8-DCOUVERTE DE STUDIO 8 - Logiciel de développement web MACROMEDIA - Notice d'utilisation et mode d'emploi gratuit

Type de produit	Suite de création multimédia
Caractéristiques techniques principales	Comprend des outils pour le design graphique, l'animation, le développement web et la création de contenu interactif.
Compatibilités	Compatible avec Windows et Mac OS.
Fonctions principales	Création de sites web, animations Flash, développement d'applications, et design graphique.
Utilisation	Destiné aux professionnels et amateurs de création multimédia souhaitant concevoir des projets interactifs.
Entretien et nettoyage	Pas d'entretien spécifique requis, mais il est conseillé de garder le logiciel à jour.
Pièces détachées et réparabilité	Pas de pièces détachées, logiciel à réinstaller en cas de problème.
Sécurité	Assurez-vous de télécharger depuis des sources officielles pour éviter les malwares.
Informations générales	Version complète de Studio 8, inclut des tutoriels et une documentation pour aider à la prise en main.

FOIRE AUX QUESTIONS - STUDIO 8-DCOUVERTE DE STUDIO 8 MACROMEDIA

Comment installer Macromedia Studio 8 ?

Pour installer Macromedia Studio 8, insérez le CD d'installation dans votre lecteur et suivez les instructions à l'écran. Assurez-vous d'avoir les droits d'administrateur sur votre ordinateur.

Quelle est la configuration système minimale requise pour Macromedia Studio 8 ?

La configuration système minimale requise est : Windows 2000 ou XP, un processeur de 400 MHz, 256 Mo de RAM, et 1 Go d'espace disque disponible.

Comment résoudre les problèmes de performance avec Macromedia Studio 8 ?

Pour améliorer la performance, assurez-vous de fermer les applications inutiles pendant l'utilisation. Augmentez la mémoire RAM de votre ordinateur si possible et vérifiez que votre disque dur n'est pas plein.

Que faire si Macromedia Studio 8 ne se lance pas ?

Si l'application ne se lance pas, essayez de redémarrer votre ordinateur. Vérifiez également si toutes les mises à jour de Windows sont installées et si votre système répond aux exigences minimales.

Comment récupérer un projet non enregistré dans Macromedia Studio 8 ?

Malheureusement, si le projet n'a pas été enregistré et que l'application a été fermée, il n'y a pas de moyen de le récupérer. Pensez à sauvegarder régulièrement vos travaux.

Comment désinstaller Macromedia Studio 8 ?

Pour désinstaller Macromedia Studio 8, allez dans le Panneau de configuration, sélectionnez 'Ajouter ou supprimer des programmes', trouvez Macromedia Studio 8 dans la liste et cliquez sur 'Désinstaller'.

Comment obtenir une aide supplémentaire pour Macromedia Studio 8 ?

Vous pouvez consulter la documentation officielle fournie avec le logiciel ou visiter les forums en ligne dédiés à Macromedia Studio pour obtenir de l'aide de la communauté.

MODE D'EMPLOI STUDIO 8-DCOUVERTE DE STUDIO 8 MACROMEDIA

Découverte de Studio 8

Marques commerciales

1 Step, RoboPDF, ActiveEdit, ActiveTest, Authorware, Blue Sky Software, Blue Sky, Breeze, Captivate, Central, ColdFusion, Contribute, Database Explorer, Director, Dreamweaver, Fireworks, Flash, FlashCast, FlashHelp, Flash Lite, FlashPaper, Flash Video Encoder, Flex, Flex Builder, Fontographer, FreeHand, Generator, HomeSite, JRun, MacRecorder, Macromedia, MXML, RoboEngine, RoboHelp, RoboInfo, RoboPDF, Roundtrip, Roundtrip HTML, Shockwave, SoundEdit, Studio MX, UltraDev et WebHelp sont soit des marques commerciales, soit des marques déposées de Macromedia, Inc. qui peuvent être déposées aux États-Unis ou sous toute juridiction. Les autres noms de produits, logos, graphiques, mises en page, titres, mots ou phrases mentionnés dans cette publication peuvent être des marques, des marques de service ou des noms de marque apparentant à Macromedia, Inc. ou à d'autres entités et peuvent être déposées dans certains pays, états ou provinces.

Informations de tiers

Ce manuel contient des liens vers des sites Web tiers qui ne sont pas contrôlés par Macromedia et la société Macromedia ne saurait en aucun cas être tenue pour responsable du contenu de ces sites. Si you accedez a l'un de ces sites, you le faites a vos propres risques. Macromedia mentionne ces liens pour faciliter your travail et l'inclusion de ces liens n'implique pas que Macromedia approuve le contenu de ces sites tiers ou en accepte la responsabilité.

Technologie de compression et décompression audio utilisée sous licence de Nellymoser, Inc. (www.nellymoser.com).

Technologie de compression et décompression vidéo Sorenson™ Spark™ utilisée sous licence de Sorenson Media, Inc.

Navigateur Opera * Copyright © 1995-2002 Opera Software ASA et ses fournisseurs. Tous droits réservés.

Macromedia Flash 8 video is mis en œuvre par la technologie On2 TrueMotion. © 1992-2005 On2 Technologies, Inc. Tous droits réservés. http://www.on2.com.

Visual SourceSafe est une marque déposée ou une marque commerciale de Microsoft Corporation aux États-Unis et dans d'autres pays.

Copyright © 2005 Macromedia, Inc. Tous droits réservés. Ce manuel ne peut pas être copié, photocopié, reproduit, traduit ou converti sous forme électronique ou informatique, en partie ou en totalité, sans l'autorisation écrite préalable de Macromedia, Inc. Nonobstant ce qui précède, le propriétaire ou l'utilisateur autorisé d'une copie valide du logiciel qui accompagne ce manuel peut imprimer une copie du manuel à partir d'une version électronique dudit manuel dans le seul but que ce propriétaire ou cet utilisateur autorisé puisse apprendre à utiliser ce logiciel, sous réserve qu'aucune partie de ce manuel ne soit imprimée, reproduite, distribuée, revendue ou transmise à d'autres fins, notamment à des fins commerciales telles que la vente de copies de cette documentation ou la fourniture de services contre rémunération. Référence ZWP80M100F

Remerciements

Gestion de projet: Jennifer Rowe, Sheila McGinn

Réduction: Jay Armstrong, Charles Nadeau, Jennifer Rowe, David Sullivan, Jon Michael Varese

Réductrice en chef : Rosana Francescato

Correction : Evelyn Eldridge, Rosana Francescato, Mark Nigara, Anne Szabla

Gestion de production : Patrice O'Neill

Conception et production des supports : Adam Barnett, Aaron Begley, Paul Benkman, John Francis, Geeta Karmarkar, Masayo Noda, Paul Rangel, Arena Reed, Mario Reynoso

Remerciements particuliers à Maureen Keating, Jennifer Taylor, Mike Downey, Greg Clausen, Doug Wolens, Melissa Baerwald, Alan Musselman, David Acala, Jason Wylie

Première édition : septembre 2005

Macromedia, Inc.

601 Townsend St.

San Francisco, CA 94103, États-Unis

PARTIE 1: Bien demarrer

Possibilités offertes par Studio 8 10

Installation de Studio 8 15

Activation de vos produits Studio 18

Enregistrement de vos produits Studio 19

Chapitre 1 : Apprentissage de Studio 21

Avantages de la documentation Studio. 21

Utilisation du système d'aide de Studio. 38

Chapitre 2 : Notions de base de Studio 51

Notions de base de Dreamweaver 51

Notions de base de Flash 65

Notions de base de Fireworks 117

Notions de base de Contribute 129

Notions de base de FlashPaper 136

Chapitre 3 : Processus de développement Web. 141

Planification de votre site Web 142

Définition de l'environnement de développement 143

Planification de la conception et de la mise en forme de la page...145

Création d'actifs de contenu 148

Assemblage, test et déploiement 151

Gestion et mise à jour de votre site. 155

PARTIE 2 : Définir voiture environnement et planifier la conception de vos PAGES

Chapitre 4: Didacticiel: Configuration de votre site et des fichiers de projet 159

Apprenez à utiliser des sites Dreamweaver 160

Configurez vos fichiers de projet 161

Définissez un dossier local 163

Chapitre 5: Didacticiel: Création de maquettes de page.......167

Examen de votre tâche. 167

Création et sauvegarde d'un nouveau document 169

Importation et placement d’images 170

Création d'une image composite de la zone de contenu 172

Placement de texte et d'images 179

Exportation de l'image pour le Web 186

Chapitre 6: Didacticiel: Création d'une mise en forme de page basée sur un tableau. 189

Examinez la maquette détaillée de conception. 190

Création et enregistrement d'une nouvelle page 192

Insérez des tableaux 193

Définissez les propriétés des tableaux 197

Insérez un espace réservé pour l'image 203

Ajoutez des couleurs à la page 205

PARTIE 3: Création d'actifs de contenu

Chapitre 7: Didacticiel: Traitement des photographies 211

Examen de votre tâche. 211

Traitement par lots de fichiers d'image de grande taille 212

Composition des images 214

Aperçu avant l'exportation et exportation des images 219

Affichage des images optimisées - finale 221

Chapitre 8: Didacticiel: Création d'une bannière de page... 223

Examen de votre tâche. 223

Ajout d'un arrêté-plan et placement du logo 224

Organisation de vos objets à l'aide de calques 228

Création d'un arrêté-plan contrasté pour le logo. 230

Création d'un contour autour de la bannière. 234 Création d'un effet de bord oblique 237 Ajout d'une ligne de balise à la bannière 238 Exportation d'un fichier d'image optimisé 239

Chapitre 9: didacticiel: création de votre première application Flash 245

Examinez notre tâche 246 Etude de l'application finale 246 Création d'un document 248 Création de symboles 252 Édition d'un symbole de scénario 256 Ajout d'actions à des images 258 Ajout d'étiquettes à des images 260 Ajout d'une interpolation de mouvement 261 Édition du scénario principal 263 Création de la couronne 265 Ajout d'un symbole. 270 Ajout d'une zone de texte 272 Ajout du clip sur la scène 275 Ajout d'un composant Button 275 Ajout de code ActionScript 276 Publication de votre document 283 Ressources 284

Chapitre 10: didacticiel: création d'un lecteur vidéo (flash professionnel uniquement) 287

Examinez notre tâche 288 Etude de l'application finale 288 Codage d'un fichier vidéo 290 Création d'un nouveau document Flash 291 Ajout d'un composant multimédia 294 Publication de votre document 296 Étapes suivantes. 297

Chapitre 11: didacticiel: ajout de contenu aux pages.301

Localisez vos fichiers. 301 Passez en revue notre tâche. 303

Insérez des images 304 Insérez et lisez un fichier Flash 312 Insérez une vidéo Flash 315 Insérez du texte 318 Créez des liens 323 Aperçu de votre page dans un navigateur 325

Chapitre 12: didacticiel: mise en forme devoirtepageaveccss. 329

Localisez vos fichiers 330 Passez notre tâche en revue 330 Etude de CSS. 332 Créez une nouvelle feuille de style. 334 Associez une feuille de style 336 Explorez le panneau Styles CSS 339 Créez une nouvelle règle CSS 341 Appliquez un style de classe à un texte. 343 Mettez en forme le texte de la barre de navigation 344 (En option) Centrez le contenu de la page. 355

Chapitre 13: didacticiel: publication de votre site. 359

Étudiez les sites distants 359 Configurez un dossier distant 360 Téléchargez vos fichiers locaux 363 Résolution des problèmes de configuration du dossier distant (en option) 364

Chapitre 14: didacticiel: paramétrage de votre site web pour les utilisateurs de contribute. 367

Passer notre tâche en revue 368 En savoir plus sur les connexions et l'administration de site Web avec Contribute. 368 Connexion à un site Web en tant qu'administrateur 369 Définition des paramètres administratifs 370 Créez un rôle utiliser 371 Modification des paramètres d'un rôle 372 Créer une clé de connexion et l'envoyer à des utilisateurs 375

Bien démarrer

Familiarisez-vous avec la suite de produits Macromedia Studio MX 2004 pour apprendre tout ce que vous devez savoir avant de commencer à créer votre site Web.

Cette partie du manuel contient les sections suivantes :

Apprentissage de Studio 21

Notions de base de Studio 51

Processus de développement Web 141

Ce manuel présente Macromedia Studio 8, une suite de développement Web intégrée comprenant Macromedia Dreamweaver 8, Macromedia Flash Professional 8, Macromedia Fireworks 8, Macromedia Contribute 3.1 et Macromedia FlashPaper 2.

Ce manuel propose une présentation générale de ces produits, explique les concepts du développement de sites Web et indique comment un site Web simple mais fonctionnel au travers d'une série de didacticiels.

Les informations contenues dans ce manuel s'adressent aux utilisateurs débutants, et en particulier à ceux qui ne connaissent pas encore les produits de la suite Studio 8. Les utilisateurs de niveau intermédiaire et avancé peuvent améliorer leurs connaissances en étudiant les techniques recommandées.

Ce manuel ne constitue pas une référence complète décrivant toutes les fonctions des produits Studio. Pour obtenir des informations détaillées, consultez le système d'aide de chaque produit. Pour utiliser le système d'aide d'un produit, dans le menu Aide du produit, sélectionnez Utilisation de Nom de produit.

Ce chapitre contient les sections suivantes :

Possibilités offertes par Studio 8 10

Installation de Studio 8 15

Activation de vos produits Studio 18

Enregistrement de vos produits Studio 19

Possibilités offertes par studio 8

La suite Studio 8 comprend cinq produits Macromedia : Dreamweaver, Flash, Fireworks, Contribute et FlashPaper. Chacun d'eux fait l'objet d'une rapide présentation dans cette section.

Cette section aborde les sujets suivants :

Possibilités offertes par Dreamweaver, page 10 Possibilités offertes par Flash, page 11 Possibilités offertes par Fireworks, page 13 Possibilités offertes par Contribute, page 13 Possibilités offertes par FlashPaper, page 14

Possibilités offertes par dreamweaver

Les fonctions d'édition visuelles de Macromedia Dreamweaver vous permettent de créer rapidement des pages Web sans écrire une seule ligne de code. Vous pouvez afficher tous les éléments ou actifs de votre site et les glisser depuis un panneau convivial directement dans un document. Vous pouvez simplifier le processus de développement en créant et modifiant des images dans Macromedia Fireworks ou une autre application graphique, avant de les importer directement dans Dreamweaver. Dreamweaver compte également des outils qui facilitent l'ajout d'éléments Macromedia Flash dans des pages Web.

Outre la possibilité de glisser-déposer qui facilite la création de pages Web, Dreamweaver propose un environnement de codage complet, comprenant des outils d'édition de code tels que la coloration du code, la création de balises, une barre d'outils de codage et une fonction de réduction du code. Le programme est accompagné également de documents de référence pour les divers langages : feuilles de style en cascade (CSS), JavaScript, CFML (ColdFusion Markup Language) et d'autres langages. La technologie Macromedia Roundtrip HTML importe vos documents HTML codés manuellement sans reformater le code ; vous pouvez ensuite reformater le code selon votre style de mise en forme de prédilection.

Dreamweaver permet également de créer des applications Web dynamiques, reposant sur des bases de données à l'aide de technologies orientées serveur telles que CFML, ASP.NET, ASP, JSP et PHP. Si vous préférez travailler avec des données XML, Dreamweaver permet de créer facilement des pages XSLT, d'associer des fichiers XML à vos pages Web et d'y afficher des données XML.

Dreamweaver est entièrement personnalisable. Les nouveaux comportements des inspecteurs de propriétés et des rapports de site permettent de créer vos propres objets et commandes, de modifier les raccourcis clavier et même de rédiger du code JavaScript pour augmenter les possibilités de Dreamweaver.

Pour en savoir plus sur les sources d'informations disponibles pour l'apprentissage de Dreamweaver, consultez la section Tirez le meilleur parti de la documentation Dreamweaver, page 22.

La grande variété de fonctions de Macromedia Flash permet de créer de nombreux types d'applications. Voici quelques exemples d'applications Flash que vous pouvez générer :

Animations Bannières publicitaires, les cartes de valeurs en ligne et les dessins animés, etc. De nombreux autres types d'applications Flash comprennent également des éléments d'animation.

Jeux De nombreux jeux sont élaborés avec Flash. Les jeux associent généralement les possibilités d'animation offertes par Flash avec les possibilités logiques d'ActionScript.

Interfaces utilisables. De nombreux créateurs de sites Web ont recours à Flash pour créer des interfaces utilisables. Ces interfaces comprennent de simples barres de navigation, ou encore des éléments qui en font des interfaces beaucoup plus complexes. La page d'accueil de www.macromedia.com contient dans sa partie supérieure un exemple de barre de navigation créé par Flash.

Zones de messages flexibles (FMA, Flexible messaging areas) Il s'agit de zones situées dans des pages que les concepteurs utilisent pour afficher des informations susceptibles d'être modifiées au fil du temps. Par exemple, une zone de message flexible (FMA) sur le site Web d'un restaurant peut afficher des informations relatives aux spécialités du menu de chaque jour. La page d'accueil du site www.macromedia.com vous présente un exemple de FMA. Les procédures figurant dans le Didacticiel : Création de votre première application Flash, page 245 vous guident tout au long du processus de création d'une FMA.

Applications Internet dynamiques. Elles comprennent une large gamme d'applications offrant une interface utilisateur complète, permettant d'afficher et de manipuler à distance des données stockées sur Internet. Une application Internet dynamique peut être par exemple une application de calendrier, une application de recherche de prix, un catalogue d'achats, une application de formation et de test ou toute autre application représentant des données à distance avec une interface graphique dynamique.

Vous trouvez de nombreux exemples de projets réels créés par des utilisateurs de Flash sur le site Web de Macromedia à l'adresse www.macromedia.com/cfusion/showcase/.

Pour reconnaître une application Flash, vous devez généralement effectuer les opérations de base suivantes :

1. Choisir les tâches de base exécutées par l'application.
2. Créer et importer des éléments multimédia tels que des images, des vidéos, du son et du texte.
3. Disposer les éléments multimédia sur la scène et dans le scénario fin de définir quand et comment les faire apparaitre dans votre application.
4. Appliquer des effets spéciaux aux éléments multimédia.
5. Ecrire du code ActionScript permettant de contrôler la façon dont les éléments multimédia se comportent, y compris la façon dont ils réagissent aux interactions de l'utilisateur.
6. Tester l'application au long du processus de création pour déterminer si elle fonctionne comme prévu et rechercher les éventuels bogues lors de sa construction.
7. Publier votre fichier FLA sous forme de fichier SWF affichable dans une page Web et lisible avec Flash Player.

Selon votre projet et votre façon de travailler, vous pouvez décider de partager ces étapes dans un ordre différent. À mesure que vous vous familiariserez avec Flash et son flux de travail, vous déterminerez la façon de partager qui vous convient le mieux.

Avec Macromedia Fireworks, vous pouvez créer, modifier et animer des graphismes Web, ajouter une interactivité avancée et optimiser vos images dans un environnement professionnel. Dans Fireworks, vous pouvez créer et modifier des images bitmap et des graphiques vectoriels dans une seule et même application. Tout reste entièrement modifiable, à tout moment. En outre, vous pouvez automatiser le déroulement du travail pour simplifier les mises à jour et les 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 graphiques Fireworks avec les codes HTML et JavaScript qui ont été personnalisés pour l'éditeur HTML que vous utilisez.

En tant que développement ou concepteur Web, vous utilisez une application de création de site Web, telle que Dreamweaver, pour créer votre site Web. Cela comprend la planification, la conception, le développement, le test et la publication du site Web. Une fois ce travail effectué, vous pouvez utiliser Macromedia Contribute pour gérer votre site et définir des utilisateurs pour gérer le contenu du site.

En tant qu'administrateur Contribute, vous définissez des utilisateurs Contribute et vous les aidez à utiliser Contribute pour : gérer le site Web. Vous pouvez définir des dossiers et des autorisations utilisées, qui déterminent quel utilisateur peut modifier le contenu d'un site Web et ce qu'il peut modifier.

Les utilisateurs Contribute gèrent le site Web. Le flux de travail afficher-modifier-publier de Contribute permet aux utilisateurs de facilement couvrir les pages à modifier, apporter les modifications nécessaires et mettre à jour la page sur le site Web. L'utilisateur n'a besoin d'aucune expérience en matière de fichier HTML ou de conception Web. Contribute fonctionnant comme un traitement de texte, l'utilisateur modifie les pages de façon intuitive et familière. Les utilisateurs peuvent ajouter ou mettre à jour du texte, des images, des tables, des liens et des documents Microsoft Word et Excel.

Macromedia FlashPaper permet de convertir facilement tout document imprimable en un document Flash (Fichier SWF ou PDF). Les documents Flash sont généralement de taille beaucoup plus réduite que les autres types de document et vous pouvez les afficher dans n'importe quel navigateur prenant en charge Flash, ou directement dans Flash Player.

Vous pourrez afficher des documents flash sur de nombreuses plate-formes, conserver la mise en forme, les graphiques, les polices, les caractères spéciaux et les couleurs des documents sources quelles que soient l'application et la plate-forme utilisées lors de la création du document. Par exemple, si vous créez une feuille de calcul Microsoft Excel sur un ordinateur fonctionnant sous Windows XP, vous ou un utilisateur pouvez utiliser FlashPaper pour la convertir en un document Flash, puis l'envoyer à un utilisateur Macintosh.

Vous pouvez intégrer un document Flash dans une page Web; publier sur le Web des types de fichier que la plupart des utilisateurs a encore du mal à visionner, par exemple des documents Microsoft Project, Microsoft Visio, et même QuarkXPress et AutoCAD. Lorsqu'un utilisateur ouvre votre page Web, le document Flash s'ouvre instantanément, de sorte que l'utilisateur peut afficher le fichier sans quitter la page Web.

Les documents Flash s'exécutent également en tant que fichiers autonomes. Toute personne équipée de Flash Player peut afficher des fichiers SWF, et tout utilisateur d'Adobe Acrobat Reader peut afficher des fichiers PDF.

Vous ne pouvez pas modifier un document Flash dans FlashPaper. Si vous devez actualiser le document, modifiez le document d'origine, puis convertissez-le à nouveau en document Flash.

Installation de studio 8

Cette section décrit la procédure d'installation de Studio 8. Vous pouvez installer Studio 8 sur des ordinateurs fonctionnant sous Windows et Macintosh. Macromedia préconise l'installation en une seule opération de la suite complète; vous pouvez cependant installer individuellement chaque application si vous le souhaitez.

Avant d'installer Studio 8, vérifie que vous disposez de la configuration matérielle et logicielle minimale requise pour chaque produit Studio. Pour obtenir une liste des configurations systèmes requises et des recommandations pour les différents produits, consultez le site www.macromedia.com/go/sysreqs/.

Pour installer studio 8 sur les systèmes d'exploitation windows ou macintosh :

1. Insérez le CD de Studio 8 dans le lecteur de CD-ROM de votre ordinateur, pour afficher l'écran d'installation de Studio 8.

Si cet écran n'apparaît pas automatiquement, ou si vous effectuez l'installation depuis un lecteur réseau, ouvrez l'Explorateur Windows pour rechercher le programme Installer.exe Studio 8 dans le répertoire Accessibilité, puis double-cliquez sur le nom de fichier et suivez les instructions d'installation. Sur Macintosh, double-cliquez sur l'icône d'installation de Studio 8 située sur le bureau.

1. Procédez de l'une des manières suivantes:

Pour installer la suite d'outils Studio 8, cliquez sur Installation. (option recommandée). Pour installer une application seulement, sélectionnez-la à l'écran, puis cliquez sur Installation.

Vous pouvez répéter la procédure pour installer séparément les autres produits.

Vous ne pouvez pas installer seulement FlashPaper. Lorsque vous sélectionnez FlashPaper et cliquez sur Installation, le programme d'installation de Contribute démarre. Contribute installe automatiquement FlashPaper.

1. Suivez les instructions d'installation.

S'il vous est demandé un mot de passe, entrez le mot de passe de connexion de l'administrateur système et cliquez sur OK.

1. Cliquez sur Terminer lorsque le processus d'installation est terminé. Les applications Studio 8 sont maintenant disponibles.
2. Sous Windows, sélectionnez Programmes > Macromedia dans le menu Démarrer. Sous Macintosh, ouvre le dossier Applications.

Pour afficher la documentation supplémentaire qui accompagne studio 8 :

• Dans le coin inférieur droit de l'écran d'installation, sélectionnez l'option d'exploration du contenu du CD.

Pour désinstaller les applications (windows) :

• Choisissez Démarrer > Paramètres > Panneau de configuration > Ajout/Suppression de programmes, puis sélectionnez l'application que vous souhaitez désinstaller.

Pour désinstaller les applications (macintosh) :

Glissez-déposez le dossier du produit à désinstaller depuis le dossier Applications vers l'icône de la corbeille.

Activation de vos produits studio

Si vous disposez d'une licence pour utiliser unique, vous devez activer toute licence pour les produits Macromedia dans un délai de trente jours à compter de l'installation du programme. Lorsque vous activez un produit de la suite Studio 8, tous les autres le sont également.

Cette activation peut être effectuée via Internet ou par téléphone et ne prend que quelques minutes. Vous ne devez fournir aucune information personnelle, uniquement le numéro de série de votre produit.

Remarque

Pour plus d'informations sur l'activation du produit, connectez-vous au site www.macromedia.com/go/activation/.

Pour activer un produit :

1. Double-cliquez sur l'icône du fichier exécutable de Dreamweaver, Flash, Fireworks ou Contribute pour démarrer l'un des produits.

Remarque

Vous ne pouvez pas activer FlashPaper.

1. Cliquez sur Continuer pour passer à l'écran suivant.
2. Saisissez votre numéro de série dans la fenêtre Activation des produits Macromedia et cliquez sur Continuer.

Une fois activés, vos produits Studio 8 sont prêts à être utilisés.

Enregistrement de vos produits studio

Il est judicieux d'enregistrer vos produits Studio 8 par voie électronique ou par courrier. L'enregistrement vous permet de bénéficier du support technique de Macromedia. Lorsque vous enregistrerez un produit de la suite Studio 8, tous les autres le sont également.

Lorsque vous vous enregistrez, vous pouvez demander à recevoir des informations de dernière minute concernant les mises à niveau et les nouveaux produits Macromedia. Vous pouvez également demander à être averti par courriel des dernières mises à jour disponibles pour les produits et à être informé des nouvelles informations mises en ligne sur www.macromedia.com.

Pour enregistrer un produit :

• Dans l'un des produits de la suite Studio 8, ouvre le menu Aide et sélectionnez soit l'option d'enregistrement en ligne soit par courrier, avec impression d'un formulaire.

Macromedia Studio 8 propose toute une gamme de ressources qui permettent de se familiariser rapidement avec les programmes Studio. Ce chapitre passe brièvement en revue toutes les ressources de documentation qui sont à votre disposition, et vous fournit des informations détaillées concernant les systèmes d'aide des produits Studio.

Ce chapitre contient les sections suivantes :

Avantages de la documentation Studio 21

Utilisation du système d'aide de Studio 38

Avantages de la documentation studio

Cette section décrit la documentation des produits Studio. Elle vous renvoie également vers des ressources en ligne très utiles.

Cette section contient les rubriques suivantes :

Tirer le meilleur parti de la documentation Dreamweaver, page 22 Avantages de la documentation Flash, page 26 Avantages de la documentation Fireworks, page 32 Avantages de la documentation de Contribute et FlashPaper, page 34

Tirer le meilleur parti de la documentation dreamweaver

Dreamweaver comprend diverses ressources qui vous aideront à vous familiariser rapidement avec le programme et à créer facilement vos propres pages Web. Le système d'aide de Dreamweaver comprend plusieurs documents qui vous aident à vous familiariser avec Dreamweaver, Dreamweaver Extensibility et ColdFusion. Vous pouvez également consulter un certain nombre de ressources en ligne qui vous aident à créer des pages Web.

Accès à la documentation dreamweaver

Le tableau suivant répertorie la documentation qui se trouve dans le système d'aide de Dreamweaver.

Vous pouvez acheter les versions imprimées des titres sélectionnés. Pour plus d'informations, visitez www.macromedia.com/go/buy_books.

Titre	Description/ Public visé	Emplacement
Démarrer avec Dreamweaver	Introduction de base aux concepts et à l'interface de Dreamweaver, avec des didactériels détaillés pour novices. Conçu pour des utilisateurs débutants mais convient également aux utilisateurs de niveaux avancé ou intermédiaire qui désirent se familiariser avec les nouvelles fonctionnalités.	• Affichage dans Dreamweaver: Sélectionner Aide > Bien démarrer avec Dreamweaver • Affichage en ligne : http://livedocs.macromedia.com/go/livedocs_dreamweaver_fr/ • Obtention du fichier PDF : www.macromedia.com/go/dw/documentation_fr
Utilisation de Dreamweaver	Information complètesur toutes les fonctionnalités de Dreamweaver. A l'intention de tous les utilisateurs de Dreamweaver.	• Affichage dans Dreamweaver: Sélectionner Aide > Aide Dreamweaver ou Aide > Utilisation de Dreamweaver • Affichage en ligne: http://livedocs.macromedia.com/go/livedocs_dreamweaver_fr/ • Obtention du fichier PDF: www.macromedia.com/go/dw/documentation_fr
Extension de Dreamweaver	Description du cadre de Dreamweaver et l'interface de programmation d'application (API). Conçu pour les utilisateurs avancés qui veulent développer l'interface de Dreamweaver ou bien la personnaliser	• Affichage dans Dreamweaver: Sélectionner Aide > Extensions de Dreamweaver • Affichage en ligne: http://livedocs.macromedia.com/go/livedocs_dreamweaver_fr/ • Obtention du fichier PDF: www.macromedia.com/go/dw/documentation_fr
Guide des API de Dreamweaver	Description de l'utilitaire API et l'API JavaScript, tous deux vous venant en aide quand vous développpez des extensions à Dreamweaver. Conçu pour les utilisateurs avancés qui veulent développer l'interface de Dreamweaver ou bien la personnaliser	• Affichage dans Dreamweaver: Sélectionner Aide > Référence API Dreamweaver • Affichage en ligne: http://livedocs.macromedia.com/go/livedocs_dreamweaver_fr/ • Obtention du fichier PDF: www.macromedia.com/go/dw/documentation_fr
Utilisation de ColdFusion	Comprend une série des livres les plus importantes dans le lot de la documentation ColdFusion. (L'ensemble complet est disponible sur LiveDocs.) Cette documentation a été concise pour toute personne intéressée par ColdFusion, des débutants aux développements experimentés.	• Affichage dans Dreamweaver: Sélectionnez Aide > Utilisation de ColdFusion • Affichage en ligne: http://livedocs.macromedia.com/go/livedocs_coldfusion/ • Obtention du fichier PDF: www.macromedia.com/go/cf/documentation
Récédence	HTML, server model, et autres types de manuel de référence, principalement publiés chez O'Reilly. Conçu pour quiconque a besoin de plus d'informations sur la syntaxe de codage, les concepts, etc.	• Affichage dans Dreamweaver: Sélectionnez Aide > Récédence. Pour une listeplete de manuels, cliquez sur le menu dérouulant de Book dans le Panneau de références.

Accéder à des informations complémentaires sur dreamweaver en mode interactif

Le tableau suivant récapitule les ressources en ligne supplémentaires relatives à l'apprentissage de Dreamweaver.

Ressource	Description/ Public visé	Emplacement
Centre de support de Dreamweaver	Notes techniques, ainsi que des informations de support et de résolution des problèmes destinées aux utilisateurs de Dreamweaver.	www.macromedia.com/go/ dreamweaver_support_fr
Centre de développement des Dreamweaver	Articles et didactiels permettant d'améliorer vos compétences et d'en accürir de nouvelles.	www.macromedia.com/go/ dreamweaver_devcenter_fr
Centre de documentation de Dreamweaver	Manuels de produits en format PDF, lists d'erreurs, didacticiels et notes d'accompagnement.	www.macromedia.com/go/ dw/documentation_fr
Forums en ligne Macromedia	Discussions et solutions proposées par les utilisateurs de Dreamweaver, les représentants du service de support technique et l'équipe de développement de Dreamweaver.	www.macromedia.com/go/ dreamweaver_newsgroup
Formation Macromedia	Cours incluant des tâches pratiques et des scénarios réalisistes.	www.macromedia.com/go/ dreamweaver_training_fr

Avantages de la documentation flash

Le système d'aide de Macromedia Flash contient un grand nombre d'informations et de ressources décrivant la gamme complète des fonctionnalités de création de Flash et du langage ActionScript. De nombreuses ressources sont également disponibles en ligne pour vous aider à vous familiariser avec Flash. Ce document est conçu pour vous aider à naviguer entre ces ressources et à tracer les informations qui vous aident au moins dans la réalisation de vos objectifs avec Flash.

Accès à la documentation flash

Les tableaux suivants doivent faire référence aux documents figurant dans le système d'Aide de Flash.

Vous pouvez acheter les versions imprimées des titres sélectionnés. Pour plus d'informations, visitez www.macromedia.com/go/buy_books.

Informations concernant les fonctionnalités

Titre	Description/ Public visé	Emplacement
Bien démarrer avec Flash	Introduction de base aux concepts et à l'interface de Flash, avec un didacticiel détaillé pour les novices. S'adresse aux utilisateurs débutants de Flash.	• Affichage dans Flash : Choisissez Aide > Utilisation de Flash • Affichage en ligne : livedocs.macromedia.com/go/livedocsflash • Obtention du fjichier PDF : www.macromedia.com/go/fl/documentation_fr
Utilisation de Flash	Informations complètes sur toutes les fonctionnalités de Flash à l'exception d'actionScript. Destiné à tous les utilisateurs de Flash.	• Affichage dans Flash : Choisissez Aide > Utilisation de Flash • Affichage en ligne : livedocs.macromedia.com/go/livedocsflash • Obtention du fjichier PDF : www.macromedia.com/go/fl/documentation_fr
Aide du codeur FLV	Informations complètes sur l'utilisation du codeur FLV. Destiné aux concepteurs Flash créé du contenu video.	• Affichage dans Flash : Choisissez Aide > Utilisation de Flash • Affichage en ligne : livedocs.macromedia.com/go/ livedocsflash • Obtention du fichier PDF : www.macromedia.com/go/ fl/documentation.fr

Didacticiels et exemples

Titre	Description/ Public visé	Emplacement
Didacticiels Flash	Ensemble de didactiens étape par étape qui vous apprend une variété de techniques pour l'utilisation de Flash par les débutants et les utilisateurs plus avancés. Destiné à tous les utilisateurs de Flash.	• Affichage dans Flash : Choisissez Aide > Utilisation de Flash • Affichage en ligne : livedocs.macromedia.com/go/livedocsflash • Obtention du fichier PDF : www.macromedia.com/go/fl/documentation_fr
Examples Flash	Ensemble de fichiers d'exemple illustrant les différentes techniques et fonctionnalités Flash, accompagnés d'une description détaillée pour chacune. Destiné à tous les utilisateurs de Flash.	• Affichage dans Flash : Choisissez Aide > Utilisation de Flash • Affichage en ligne : livedocs.macromedia.com/go/livedocsflash • Obtention du fichier PDF : www.macromedia.com/go/fl/documentation_fr

ActionScript

Titre	Description/ Public visé	Emplacement
Formation à ActionScript 2.0 dans Flash	Une introduction détaillée au codage avec ActionScript, comptant un grand nombre d'exemples de code réutilisables.Destiné aux utilisateurs novices et intermédiaires de Flash.	• Affichage dans Flash : Choisissez Aide>Utilisation de Flash • Affichage en ligne : livedocs.macromedia.com/go/livedocsflash • Obtention du fichier PDF : www.macromedia.com/go/fl/documentation_fr
Guide de référence ActionScript 2.0	Entrées de référence de style dictionnaire pour chaque terme du langage ActionScript.Destiné à tous les utilisateurs d'ActionScript.	• Affichage dans Flash : Choisissez Aide>Utilisation de Flash • Affichage en ligne : livedocs.macromedia.com/go/livedocsflash • Obtention du fichier PDF : www.macromedia.com/go/fl/documentation_fr

Composants

Titre	Description/ Public visé	Emplacement
Utilisation des composants	Informations concernant l'utilisation et la personnalisation des composants dans vos documents Flash. Destiné à tous les utilisateurs de Flash.	• Affichage dans Flash : Choisissez Aide > Utilisation de Flash • Affichage en ligne : livedocs.macromedia.com/go/livedocsflash • Obtention du fichier PDF : www.macromedia.com/go/fl/documentation.fr
Référence du langage des composants	Entrées de référence de style dictionnaire pour chaque terme de l'API du composant ActionScript. Destiné à tous les utilisateurs de Flash.	• Affichage dans Flash : Choisissez Aide > Utilisation de Flash • Affichage en ligne : livedocs.macromedia.com/go/livedocsflash • Obtention du fichier PDF : www.macromedia.com/go/fl/documentation.fr

Extension de Flash

Titre	Description/ Public visé	Emplacement
Extension de Flash	Informations concernant l'ajout de fonctionnalité à l'outil de programmation Flash JavaScript. Destiné aux utilisateurs JavaScript et aux utilisateurs Flash avances.	• Affichage dans Flash : Choisissez Aide > Utilisation de Flash • Affichage en ligne : livedocs.macromedia.com/go/livedocsflash • Obtention du fichier PDF : www.macromedia.com/go/fl/documentation_fr

Flash Lite

Titre	Description/ Public visé	Emplacement
Bien démarrer avec Flash Lite	Introduction aux flux de travail Flash Lite et remarques concernant la programmation. S'adresse aux développements de téléphones et péripériques mobiles et aux utilisateurs de Flash de niveau intermédiaire.	• Affichage dans Flash : Choisissez Aide > Utilisation de Flash • Affichage en ligne : livedocs.macromedia.com/go/livedocsflash • Obtention du fichier PDF : www.macromedia.com/go/flash lite/documentation_fr
Développement d'applicationsFlash Lite	Informations sur la création de contenuFlash pour les téléphones et périhériques mobiles.S'adresse aux développements de téléphones et périhériques mobileset aux utilisateurs de Flash de niveau intermédiaire.	• Affichage dans Flash :Choisissez Aide > Utilisation de Flash• Affichage en ligne :livedocs.macromedia.com/go/livedocsflash• Obtention du fichier PDF :www.macromedia.com/go/flash lite/documentation_fr
Formation àActionScriptFlash Lite 1.x	Informations sur l'écriture de codeActionScript pour les téléphones et périhériques mobiles.S'adresse aux développements de téléphones et périhériques mobileset aux utilisateurs de Flash de niveau intermédiaire.	• Affichage dans Flash :Choisissez Aide > Utilisation de Flash• Affichage en ligne :livedocs.macromedia.com/go/livedocsflash• Obtention du fichier PDF :www.macromedia.com/go/flash lite/documentation.fr
Guide deréfonceActionScriptFlash Lite 1.x	Entrées de référence de style dictionnaire pour chaque terme du langage ActionScriptFlash Lite 1.x.S'adresse aux développements de téléphones et périhériques mobileset aux utilisateurs de Flash de niveau intermédiaire.	• Affichage dans Flash :Choisissez Aide > Utilisation de Flash• Affichage en ligne :livedocs.macromedia.com/go/livedocsflash• Obtention du fichier PDF :www.macromedia.com/go/flash lite/documentation_fr

Accès aux ressources flash en ligne supplémentaires

Le tableau suivant répertorie les ressources en ligne supplémentaires relatives à l'apprentissage de Flash.

Ressource	Description	Emplacement
Centre de support de Flash	Notes techniques, ainsi que des informations de support et de résolution des problèmes.	• www.macromedia.com/go/ flash_support_fr
Centre des développpeurs de Flash	Articles et didacticiels permettant de développer vos compétences et d'en accürir de nouvelles.	• www.macromedia.com/go/ flash_devcenter_fr
Centre de ressources et de documentation de Flash	Versions PDF et HTML de la documentation Flash.	• www.macromedia.com/go/ fl/documentation.fr
Forums en ligne Macromedia	Discussions et solutions proposées par les utilisateurs de Flash, les représentants du service de support technique et l'équipe de développement de Flash.	• www.macromedia.com/go/ flash_forums
Formation Macromedia	Salle de formation et instructions en ligne proposées par les partenaires de formation Macromedia.	www.macromedia.com/go/flash_training_fr
Gestionnaire de ressources Flash (Anglais uniquement)	Autre afficheur pour la visualisation du système d'aide Flash en dehors de l'application Flash.	www.macromedia.com/go/flash_resource-manager

Avantages de la documentation fireworks

Fireworks propose toute une gamme de supports qui vous aident à vous familiariser rapidement avec le programme. Le système d'aide Fireworks comprend plusieurs documents qui permettent d'apprendre à utiliser et à développer Fireworks. Vous pouvez également consulter un certain nombre de ressources en ligne qui vous aideront à maîtriser Fireworks.

Accès à la documentation fireworks

Le tableau suivant répertorie la documentation incluse dans le système d'aide Fireworks.

Titre	Description/ Public visé	Emplacement
Bien démarrer avec Fireworks	Introduction de base aux concepts et à l'interface de Fireworks, avec des didactériels pour novices détaillés. S'adresse aux utilisateurs débutants de Fireworks.	• Affichage dans Fireworks : Sélectionner Aide > Bien démarrer avec Fireworks • Affichage en ligne : www.macromedia.com/go/livedocs_fireworks_fr • Obtention du fichier PDF : www.macromedia.com/go/fireworks/documentation_fr
Utilisation de Fireworks	Informations complètes sur toutes les fonctionnalités de Fireworks. S'adresse à tous les utilisateurs de Fireworks.	• Affichage dans Fireworks : Sélectionnez Aide > Utilisation de Fireworks • Affichage en ligne : www.macromedia.com/go/livedocs_fireworks_fr • Obtention du fichier PDF : www.macromedia.com/go/fireworks/documentation_fr
Extension de Fireworks	Informations sur l'ajout de fonctionnalités à Fireworks par le biais de JavaScript. Destiné aux utilisateurs JavaScript et aux utilisateurs Fireworks avancés.	• Affichage dans Fireworks : Sélectionnez Aide > Extensions de Fireworks • Affichage en ligne : www.macromedia.com/go/livedocs_fireworks_fr • Obtention du fichier PDF : www.macromedia.com/go/fireworks/documentation_fr

Accès aux ressources fireworks en ligne supplémentaires

Le tableau suivant répertorie les ressources en ligne supplémentaires relatives à l'apprentissage de Fireworks.

Ressource	Description	Emplacement
Centre de ressources documentaires de Fireworks	Permet d'obtenir des manuels de produit, des errata, des didacticiels et des notes de publication.	• www.macromedia.com/go/fw/documentation_fr
Centre des développpeurs Fireworks	Articles et didacticiels permettant de développer vos compétences et d'en accürir de nouvelles.	• www.macromedia.com/go/fireworks_devnet_fr
Centre de support Fireworks	Notes techniques, ainsi que des informations de support et de résolution des problèmes destinées aux utilisateurs de Fireworks.	www.macromedia.com/go/ fireworks_support
Forum de discussions Fireworks	Discussions et solutions proposées par les utilisateurs de Fireworks, les représentants du service de support technique et l'équipe de développement de Fireworks.	Affichage dans un lecteur de news : news://forums.macromedia.com/macromedia.fireworks Affichage dans un navigateur : www.macromedia.com/go/ fireworks_forum
Formation Macromedia	Cours incluant des tâches pratiques et des scénarios réalisistes.	www.macromedia.com/go/ fireworks_training_fr

Avantages de la documentation de contribute et flashpaper

Contribute et FlashPaper proposent toute une gamme de supports qui permettent de se familiariser rapidement avec les programmes. Les deux produits comportent plusieurs documents qui peuvent vous aider à vous familiariser avec Contribute et FlashPaper. Vous pouvez également consulter un certain nombre de ressources en ligne qui vous aident à apprendre comment utiliser Contribute et FlashPaper.

Accès à la documentation de contribute et flashpaper

Le tableau suivant récapitule la documentation incluse dans Contribute et FlashPaper.

Titre	Description/ Public visé	Emplacement
Démarrage rapide de Contribute	Introduction de base à l'installation de Contribute, à la connexion du site Web et à la réalisation rapide de certaines tâches élémentaires. S'adresse aux utilisateurs débutants de Contribute.	• Dans Contribute : Sélectionnez Aide > Guide de démarrage rapide • Afficher le format FlashPaper : www.macromedia.com/go/contribute_docs_fr
Déploiation de Contribute	Présentation de ce que l'administrateur doit savoir lorsqu'il déploie Contribute au sein d'un établissement. Les sujets abordés concernent la définition des autorisations au niveau du serveur et du réseau, la configuration de Contribute pour l'utiliser avec votre site Web, la gestion des utilisateurs et l'explication de la structure du site. S'adresse aux administrateurs de Contribute.	• Affichage en ligne : livedocs.macromedia.com • Obtention du fichier PDF : www.macromedia.com/go/contribute_docs_fr • Dans Contribute : Sélectionnez Aide > Macromedia Contribute, puis Administration de Contribute.
Utilisation etadministrationde Contribute	Information complètesur toutes lesfonctionnalités deContribute. S'adresseà tous les utilisateurset administrateurs deContribute	Dans Contribute :Sélectionnez Aide >Macromedia ContributeAffichage en ligne :livedocs.macromedia.comObtention du fichier PDF :www.macromedia.com/go/contribute_docs_fr
PanneauComment...	Instructions rapidesétape par étape pour laréalisation dcertaines tâchescommunes deContribute. S'adresseaux utilisateurs etadministrateurs deContribute	Dans Contribute :Sélectionnez Affichage >Zone latérale
DidacticielContribute	Didacticiel étape parétape qui vous guidedans la réalisation dtâches représentativesde Contribute. Dans cedidacticiel, yousmenetze à jour les pagesd'un site Web exempleet vous familiarisezrapidement avec lesfonctionnalités deContribute. S'adresseaux utilisateursdébutants deContribute.	Dans Contribute :Sélectionnez Aide >Didacticiel Contribute
Utilisation deFlashPaper	Information complètesur toutes lesfonctionnalités deFlashPaper. Destiné àtosus les utilisateurs deFlashPaper.	Dans Contribute :Sélectionnez Aide >Utilisationde FlashPaperwww.macromedia.com/go/flashpaper/documentation_fr

Accès aux ressources supplémentaires en ligne de contribute et flashpaper

Le tableau suivant répertorie les ressources en ligne supplémentaires relatives à l'apprentissage de Contribute et FlashPaper.

Ressource	Description	Emplacement
Centre de ressources documentaires de Contribute	Permet d'obtenir des manuels de produit, des errata, des didacticiels et des notes de publication.	• www.macromedia.com/go/ contribute_docs_fr
Centre des développements Contribute	Articles et didactiens permettant de développer vos compétences et d'en accuperir de nouvelles.	• www.macromedia.com/go/ contribute_devcenter_fr
Centre de support de Contribute	Notes techniques, ainsi que des informations de support et de résolution des problèmes destinées aux utilisateurs de Contribute.	• www.macromedia.com/go/ contribute_support
Forum Contribute	Discussions et informations permettant de résoudre les problèmes fournies par les utilisateurs de Contribute, les techniciens du centre d'assistance et l'équipe de développement de Contribute.	• www.macromedia.com/go/ contribute_forums
Formation Macromedia	Cours incluant des tâches pratiques et des scénarios réalisistes.	• www.macromedia.com/go/ contribute_training
Centre de ressources documentaires de FlashPaper	Permet d'obtenir des manuels de produit, des errata, des didactériels et des notes de publication.	• www.macromedia.com/go/flashpaper/documentation_fr
Centre de support de FlashPaper	Notes techniques, ainsi que des informations de support et de résolution des problèmes destinées aux utilisateurs de FlashPaper.	• www.macromedia.com/go/flashpaper_support
Forum FlashPaper	Discussions et solutions proposées par les utilisateurs de FlashPaper, les représentants du service de support technique et l'équipe de développement de FlashPaper.	• www.macromedia.com/go/flashpaper_forums

Utilisation du système d'aide de studio

Les systèmes d'aide en ligne des produits Studio sont disponibles dans le menu Aide de chacun des produits. Chaque système d'aide propose des informations détaillées concernant toutes les tâches pouvant être réalisées avec les produits Studio.

Cette section indique comment vous pouvez utiliser les systèmes d'aide Studio pour rechercher les informations dont vous avez besoin.

Pour voir une liste de documents disponibles dans l'aide de Studio, voir Avantages de la documentation Studio, page 21.

Cette section contient les rubriques suivantes :

, page 39 Utilisation du système d'aide de Flash, page 43

Utilisation des systèmes d'aide de dreamweaver, fireworks, contribute et flashpaper

Les systèmes d'aide en ligne disponibles à partir du menu Aide de chaque produit Studio fournissent des renseignements détaillés sur toutes les tâches que vous pouvez accomplir avec le produit. Les systèmes d'aide de Dreamwe, Fireworks, Contribute et FlashPaper fonctionnent tous de la même façon.

Pour plus d'informations concernant l'utilisation du système d'aide Flash, voir Utilisation du système d'aide de Flash, page 43.

Cette section contient les rubriques suivantes :

Ouverture de l'Aide d'un produit, page 40 Chercher dans l'Aide, page 40 Utilisation de l'index de l'Aide, page 41 Utilisation de la page de démarrage, page 42 Impression de la documentation, page 42 Achat de la documentation imprimée, page 42 Discussion portant sur la documentation de Studio avec LiveDocs, page 42

Ouverture de l'aide d'un produit

Vous pouvez accéder à l'Aide du produit pendant que vous travaillez avec le produit.

Pour ouvrir l'aide de dreamweaver :

■ Sélectionnez Aide > Aide de Dreamweaver.

Pour ouvrir l'aide de fireworks :

■ Sélectionnez Aide > Aide de Fireworks.

Pour ouvrir l'aide de contribute :

Sélectionnez Aide > Macromedia Contribute.

Pour ouvrir l'aide de flashpaper :

Sélectionnez Aide > Utilisation de FlashPaper

Chercher dans l'aide

Vous pouvez effectuer une recherche en texte intégral dans les systèmes d'aide.

Pour chercher dans l'aide du produit (windows) :

1. Dans le système d'aide, cliquez sur l'onglet Recherche.
2. Tapez un mot ou une expression dans la boîte de texte, puis cliquez sur Liste des sujets.
3. Double-cliquez sur un sujet dans la liste des résultats afin de l'afficher.

Pour chercher dans l'aide du produit (macintosh) :

1. Dans le système d'aide, tapez un mot ou une expression dans la boîte de texte. Posez une question, puis appuyez sur Retour.
2. Double-cliquez sur un sujet dans la liste des résultats afin de l'afficher.

Pour chercher une expression spécifique, l'entourer de double guillemets.

Utilisation de l'index de l'aide

Vous pouvez trouver rapidement des informations dans l'index de la Aide.

Pour utiliser l'index (windows) :

1. Dans le système d'aide, cliquez sur l'onglet Index.
2. Faites défiler la liste alphabétique jusqu'à l'entrée d'index voulue, puis double-cliquez dessus pour afficher l'information pertinente.

Pour utiliser l'index (macintosh) :

1. Dans le système d'aide, cliquez sur le lien Index dans le sommaire.
2. Cliquez sur une entrée et faites défiler la liste jusqu'à l'entrée d'index recherche.
3. Cliquez sur un nombre en regard de l'entrée afin d'obtenir l'affichage de l'information indexée.

Vous pouvez commencer à taper un mot-clé dans la zone de texte pour atteindre rapidement l'entrée d'index recherche.

Changement de la taille de police

Pour modifier la taille de la police utilisée par le système d'aide.

Pour changer la taille de la police dans l'afficheur de l'aide de windows :

1. Ouvrez Internet Explorer. La taille de la police dans l'afficheur de l'aide de Windows est définie dans Internet Explorer.
2. Sélectionnez Affichage > Taille de texte, puis sélectionnez une taille.

Pour changer la taille de la police dans l'afficheur de l'aide macintosh :

• Dans l'aide, Sélectionnez Édition > Réduire la taille de la police ou Édition > Augmenter la taille de la police.

Utilisation de la page de démarrage

Lorsque vous lancez un produit Studio sans ouvrir de document, la page de démarrage s'affiche dans l'environnement de travail. Cette page permet d'accéder rapidement aux didacticiels, aux fichiers récents et à Exchange pour le produit, d'où vous pouvez améliorer certaines fonctions. Vous pouvez utiliser la Page de démarriage tout comme une page Web. Pour utiliser une des fonctionnalités que vous voyez, cliquez sur l'une d'elles.

Pour désactiver la page de démarrage :

1. Exécutez un produit Studio, sans ouvrir de document.

La Page de démarrage apparait.

1. Cliquez sur Ne plus afficher.

Impression de la documentation

Les livres suivants sont disponibles en format PDF sur le site Web de Macromedia sous www.macromedia.com/go/dw/documentation_fr:

Vous pouvez imprimer tout ou partie du PDF sur votre propre imprimante ou vous pouvez remettre le PDF à une boutique qui fait des copies.

Achat de la documentation imprimée

Voulez acheter les versions imprimées des titres Studio sélectionnés. Pour plus d'informations, visitez www.macromedia.com/go/buy_books.

Discussion portant sur la documentation de studio avec livedocs

La documentation est également disponible de manière interactive dans le format LiveDocs. La version LiveDocs de l'Aide ressemble beaucoup à l'aide du produit, mais elle permet de faire des commentaires sur le contenu des pages d'aide individuelles. Vous pouvez ajouter des renseignements utiles sur un sujet donné base sur votre propre expérience ou solliciter l'avis de collègues utilisateurs.

Utilisation du système d'aide de flash

Le système d'aide en ligne, disponible dans le menu Aide, fournit des informations détaillées sur toutes les tâches exécutables avec Flash. Le système d'aide de Flash fonctionne différemment des systèmes d'aide de Dreamwe weaver, Fireworks, Contribute et FlashPaper.

Pour plus d'informations concernant l'utilisation des systèmes d'aide des autres produits Studio, consultez la rubrique Utilisation des systèmes d'aide de Dreamweaver, Fireworks, Contribute et FlashPaper, page 39.

Cette section contient les rubriques suivantes :

Ouverture du panneau Aide, page 43 Recherche dans le système d'aide, page 44 Utilisation de l'aide contextuelle, page 46 Impression de la documentation Flash, page 47 Achat de la documentation imprimée, page 47 Discussion portant sur la documentation de Flash avec LiveDocs, page 48 Contrôle de l'apparence du panneau d'aide, page 49 Obtention des mises à jour de l'aide Flash, page 50

Ouverture du panneau aide

Le panneau d'aide de Flash contient l'ensemble des informations d'assistance aux utilisateurs qui accompagnent l'application Flash.

Pour accéder à l'aide et au sommaire :

1. Pour ouvrir le panneau Aide, CHOISSEZ Aide > Aide ou appuyez sur F.
2. Si le sommaire n'est pas visible, cliquez sur le bouton Sommaire pour l'afficher.

La liste des guides disponibles s'affiche.

1. Cliquez sur un titre de manuel pour l'ouvrir et afficher ses rubriques.
2. Cliquez sur un titre de rubrique pour l'afficher.

La hiérarchie de rubrique pour la rubrique en cours est affichée en haut de chaque page d'aide.

Recherche dans le système d'aide

Flash Basic 8 et Flash Professional 8 offrent des possibilités de recherche étendues permettant d'accéder facilement aux informations recherchées. Dans le panneau d'aide de Flash, vous pouvez rechercher des pages d'aide contenant des mots ou des expressions spécifiques.

Vous pouvez effectuer une recherche dans l'aide de Flash de l'une des manières suivantes:

Recherche sur un mot unique : renvoie une liste des pages d'aide contenant le mot spécifique. Par exemple, vous pouvez saisir scenario dans le champ de recherche. Cette recherche renvoie une liste des pages d'aide contenant le mot scenario ou Scenario.

Recherche sur plusieurs mots : renvoie une liste des pages d'aide contenant chacun des termes de la recherche que vous entrez. Dans ce cas, le mot et est implicite dans la recherche. Par exemple, vous pouvez saisir clip d'animation dans le champ de recherche. Cette action renvoie une liste des pages contenant à la fois animation et clip—c'est-à-dire, clip animation, animation clip ou animation.... clip, etc.

Les recherches Explicit AND/OR (ET/OU explicite) utilisent les mots et ou ou pour affiner les résultats de la recherche. Par exemple, vous pouvez saisir scenario et image-clé ou interpolation dans le champ de recherche. Cette action renvoie une liste des pages d'aide contenant scenario et image-clé et les pages d'aide contenant scenario et interpolation.

Recherche d'expression exacte : vous avez la possibilité d'utiliser des guillemets pour indiquer que l'aide ne doit renvoyer que les pages contenant exactement l'expression que vous avez entrée. Par exemple, vous pouvez saisir « interpolation de mouvement » dans le champ de recherche. Cela renverra une liste des pages d'aide contenant l'expression interpolation de mouvement, et non des pages contenant des occurrences séparées de mouvement et interpolation.

La recherche d'expression exacte avec la précision explicite de ET/OU permet d'associer les guillemets aux mots et ou ou pour affiner vos recherches. Par exemple, vous pouvez saisir « interpolation de mouvement » et « ActionScript » dans le champ de recherche. Cette recherche renverra une liste de pages contenant à la fois l'expression interpolation de mouvement et le mot ActionScript.

Pour rechercher un mot ou une expression dans le panneau aide :

1. Dans le menu Catégorie, sélectionnez une catégorie de guides à rechercher.

Pour rechercher tous les guides, sélectionnez Tous les sujets.

1. Entrez un mot ou une expression dans la zone de texte, puis cliquez sur Rechercher.

Une liste des rubriques d'aide contenant le mot ou l'expression s'affiche ; elle est organisée par guide.

1. Cliquez sur une rubrique d'aide pour la sélectionner dans la liste.

La rubrique apparait dans la table des matières du panneau d'Aide. Le chemin qui conduit vers la rubrique dans la table des matières apparait en haut de chaque page d'aide.

Cliquez sur Effacer pour revenir à la vue Table des matières.

Pour obtenir des informations de référence concernant un terme spécifique de ActionScript, utilisez Guide de référence du langage ActionScript 2.0 ou utilisez la fonction de recherche.

Pour rechercher un mot ou une expression dans une page d'aide spécifique :

1. Repérez l'emplacement de la page d'aide dans laquelle vous pouvez effectuer la recherche.
2. Cliquez sur la page d'aide de façon à lui donner le focus.
3. Appuyez sur Ctrl+F (Windows) ou sur Commande+F (Macintosh).
4. vez rechercher puis cliquez sur Rechercher suivant.

Si le mot ou l'expression existe dans la page d'aide en cours, il est mis en surbrillance dans le panneau d'Aide.

Utilisation de l'aide contextuelle

Le panneau Aide contient des informations de référence contextuelles auxquelles il est possible d'accéder depuis le panneau Actions. Cliquer sur un terme ActionScript dans le panneau Actions permet d'afficher les informations d'aide sur ce terme.

Pour accéder à l'aide contextuelle depuis le panneau actions :

1. Pour sélectionner un élément de référence, effectuez l'une des opérations suivantes:
2. Sélectionnez un article dans la boîte à outils du panneau Actions (dans la partie gauche du panneau Actions).
3. Sélectionnez un mot ActionScript dans la fenêtre de script du panneau Actions.
4. Placez le point d'insertion avant le terme ActionScript dans la fenêtre Script du panneau Actions.
5. Pour ouvrir la page de référence de l'objet sélectionné dans le panneau Aide, effectuez l'une des opérations suivantes:
6. Appuyez sur la touche F1.
7. Cliquez avec le bouton droit de la souris sur l'objet et sélectionnez Afficher l'aide. Cliquez sur Référence au-dessus de la fenêtre de script.

Pour accéder à l'aide contextuelle depuis le panneau flash :

Cliquez sur le menu contextuel dans le panneau et sélectionnez Aide.

Pour accéder à l'aide contextuelle depuis une boîte de dialogue:

Cliquez sur l'icône Aide de la boite de dialogue.

Le manuel Didacticiels Flash dans le panneau Aide contient de nombreux didacticiels constituant une introduction aux fonctions de Flash. Ces didacticiels permettent de vous entraîner sur des exemples isolés. Si vous avez découvert Flash ou si vous n'en avez utilisé que quelques fonctions Flash, commencez par le manuel Didacticiels Flash.

Impression de la documentation flash

Les versions imprimables de tous les guides inclus dans le système d'aide Flash sont disponibles sur le site Web de Macromedia. Vous pouvez également imprimer des pages d'aide distinctes depuis le panneau Aide de Flash.

Pour imprimer un guide ou un chapitre spécifique depuis le site web de macromedia :

1. Consultez la page de documentation Macromedia Flash à l'adresse www.macromedia.com/go/fl/documentation/.
2. Recherchez le fichier PDF correspondant au guide que vous souhaitez imprimer.
3. Téléchargez le fichier PDF.
4. Ouvrez le fichier PDF dans Adobe Reader.
5. Imprimez le fichier ou, si vous le préférez, simplement un chapitre à partir du fichier.

Le contrat de licence utilisateur final Flash permet d'imprimer les versions PDF de la documentation auprès des magasins de copie au détail le cas échéant.

Pour imprimer une page individuelle de l'aide:

1. Cliquez sur Imprimer dans la barre d'outils du panneau Aide.
2. Dans la boîte de dialogue Imprimer, sélectionnez l'imprimante et les autres options d'impression, puis cliquez sur Imprimer.

Vous pouvez également acheter les versions imprimées des guides dans le magasin en ligne de Macromedia à l'adresse suivante, www.macromedia.com/go/books_and_training.

Achat de la documentation imprimée

Pour acheter des versions imprimées de la documentation de Flash, visitez le site www.macromedia.com/go/books.

Discussion portant sur la documentation de flash avec livedocs

En plus d'accéder à la documentation de Flash dans le panneau d'aide de Flash, vous pouvez obtenir la documentation en ligne au format LiveDocs. Pour trouver la page équivalente sur le site Web LiveDocs, il vous suffit de cliquer sur Afficher le commentaire dans LiveDocs en bas de la page d'aide du panneau Aide. Les Flash LiveDocs sont disponibles sur livedocs.macromedia.com/go/livedocs_FLASH.

LiveDocs présente entre autres avantages celui d'afficher des commentaires permettant de rendre la documentation plus claire, ou de corriger des erreurs ou des problèmes survenus après la publication d'un logiciel. LiveDocs n'est pas l'endroit dans lequel vous pouvez demander de l'aide, poser des questions concernant votre code s'il ne fonctionne pas, ou la façon dont effectuer une tâche spécifique. LiveDocs est l'endroit idéal pour exprimer votre avis concernant la documentation (par exemple, si vous remarquez une phrase ou un paragraphe pouvant être amélioré par souci de clarté).

Lorsque vous cliquez sur le lien pour ajouter un commentaire sur LiveDocs, vous observez plusieurs points concernant les types de commentaires acceptables sur le système. Lisez attentivement ces instructions, si vous ne vous y conformez pas, votre commentaire sera supprimé du site Web.

Si vous avez une question concernant Flash, posez-la sur les forums Web Macromedia Flash: www.macromedia.com/go/flashforums. Les forums Web constituent l'endroit idéal pour poser des questions, car de nombreux employés de Macromedia, bénévoles de Team Macromedia, gestionnaires et membres de groupes d'utilisateurs Macromedia et même des réducteurs techniques gèrent ces forums.

Contrôle de l'apparence du panneau d'aide

Vous pouvez contrôler la façon dont le panneau d'aide apparait dans Flash.

Disposition du panneau aide dans l'espace de travail de flash

Vous pouvez arranger la position du panneau d'aide dans l'espace de travail pour en optimiser l'utilisation. Vous pouvez facilement contrôler la taille de la zone d'affichage ainsi que l'endroit et le moment où le panneau Aide doit être affiché. Pour plus d'informations sur l'utilisation des panneaux, consultez la rubrique Utilisation des panneaux et de l'inspecteur des propriétés, page 93.

Pour disposer le panneau aide en position ancrée :

1. Ancrez le panneau Aide dans la position souhaitée.
2. Développez le panneau Aide s'il n'est pas déjà développé.
3. Faites glisser la barre de fractionnement entre ce panneau ou groupe de panneaux et la fenêtre Document pour afficher la zone Scène.
4. Appuyez sur F1 pour réduire et développer le panneau Aide selon vos besoins.

Pour disposer le panneau aide en position désancrée (flottante) :

1. Désancrez le panneau Aide dans la position souhaitée.
2. Développez le panneau Aide s'il n'est pas déjà développé.
3. Redimensionnez la fenêtre du panneau.
4. Appuyez sur F1 pour fermer et ouvrir le panneau Aide selon vos besoins.

Modification de la taille du texte affiché dans le panneau aide

Si vous utilisez un ordinateur portable, il peut être utile d'agrandir le texte affiché dans le panneau Aide. Vous pouvez modifier la taille du texte dans le panneau Aide en modifiant la taille du texte dans votre navigateur Web.

Pour modifier la taille du texte affiché dans le panneau aide à l'aide de votre navigateur:

Ouvrez votre navigateur et modifiez les préférences pour agrandir le texte dans votre navigateur. Vous devez redémarrer Flash pour que vos modifications soient prises en compte.

Dans Windows, vous pouvez modifier la taille du texte du panneau d'aide en cliquant dans la fenêtre table des matières du panneau Aide, puis en appuyant sur Ctrl et en faisant défiler la molette de la souris. La taille du texte dans votre navigateur est également modifiée.

Obtention des mises à jour de l'aide flash

La fonction Mettre à jour de Flash permet d'actualiser votre système d'aide en y ajoutant de nouveaux documents ou les dernières modifications en date, y compris des procédures et des leçons. Pour savoir si de nouvelles informations sont disponibles, cliquez sur le bouton Mettre à jour.

Pourmettreàjourl'aide de flash

1. Vérifiez que vous êtes connecté à Internet.
2. Cliquez sur Mettre à jour dans la barre d'outils du panneau Aide et suivez les instructions pour télécharger la mise à jour du système d'aide. Lorsqu'une mise à jour de l'aide est disponible, Macromedia create et envoie un nouveau fichier PDF de chaque guide mis à jour sur sa page de documentation à l'adresse http://www.macromedia.com/go/fldocumentation/.

Notions de base de studio

Macromedia Studio offre un espace de travail intégré permettant de passer très simplement d'un produit de la suite à un autre. Vous remarquerez que les panneaux, les menus, les icônes de sélection et beaucoup d'autres éléments d'interface utilisateur sont similaires entre les différents produits et faciles à utiliser. Passant d'un produit à un autre, vous constaterez à quel point l'espace de travail, homogène et familier, contribue à accroître votre productivité, en vous faisant gagner du temps sur l'apprentissage d'un nouveau produit.

Ce chapitre contient les sections suivantes :

Notions de base de Dreamweaver 51

Notions de base de Flash 65

Notions de base de Fireworks. 117

Notions de base de Contribute 129

Notions de base de FlashPaper 136

Notions de base de dreamweaver

Pour tirer le meilleur parti de votre logiciel Dreamweaver, vous devez comprendre les éléments de base de l'espace de travail Dreamwe. Cette section vous présente une vue d'ensemble des fichiers Dreamweaver et vous présente les éléments de l'espace de travail les plus importants et les plus couramment utilisés.

La présente section contient les rubriques suivantes :

■ Présentation des fichiers Dreamweaver, page 52 Familiarisation avec l'espace de travail Dreamweaver, page 53

Présentation des fichiers dreamweaver

Vous pouvez travailler avec un grand besoin de types de fichiers dans Dreamweaver. Le fichier HTML est celui avec lequel vous travaillerez le plus souvent. Les fichiers HTML (pour fichiers de type Hypertext Markup Language) contiennent le langage à base de balises qui se charge d'afficher une page Web dans un navigateur. Vous pouvez enregistrer les fichiers HTML avec l'extension. html ou. htm. Dreamweaver enregistre par défaut les fichiers avec l'extension. html.

Voici quelques autres types de fichiers courants que vous pourriez utiliser quand vous travailliez avec Dreamweaver.

CSS (ou Cascading Style Sheet) pour des fichiers avec une extension. css. Ils sont utilisés pour mettre en forme le contenu HTML et fixer le positionnement de divers éléments de page. Pour plus d'informations sur l'utilisation de ces types de fichiers, voir Description des feuilles de style en cascade dans Utilisation de Dreamweaver.

GIF (ou Graphics Interchange Format) pour des fichiers qui ont une extension. gif. Ce format graphique est très utilisé dans les dessins humoristiques, les logos, les graphismes pourvus de zones transparentes et les animations. Les fichiers GIF sont constitués d'un maximum de 256 couleurs.

JPEG (ou Joint Photographic Experts Group, du nom de l'organisation qui a créé le format) pour des fichiers qui ont une extension. jpg et qui correspondent généralement à des photographies ou à des images très colorées. Ce format est le plus approprié pour les photographies numériques ou scannées, les images utilisant des textures, les images poursvues de transitions à couleurs dégradées ainsi que toutes les images exigeant plus de 256 couleurs.

XML (pour Extensible Markup Language) pour des fichiers avec une extension de type. xml. Ils contiennent des données brutes qui peuvent être mises en forme en utilisant XSL (Extensible Stylesheet Language)

XSL (ou Extensible Stylesheet Language) pour des fichiers avec une extension de type. xsl ou. xslt. Ils sont utilisés pour créer des données XML que vous pouvez afficher sur une page Web

CFML (ou ColdFusion Markup Language) pour des fichiers avec une extension de type. cfm. Ils sont utilisés pour TRAITER des pages dynamiques 40, Création rapide d'applications ColdFusion, dans Utilisation de Dreamweaver.

ASPX (ou ASP.NET) pour des fichiers qui ont une extension de type. aspx. Ils sont utilisés pour chiers, voir Chapitre 41, Création rapide d'applications ASP.NET, dans Utilisation de Dreamweaver.

PHP (ou PHP) : Les fichiers Hypertext Preprocessor ont une extension du type. php. Ils sont utilisés pour traiter chiers, voir Chapitre 43, Création rapide d'applications PHP, dans Utilisation de Dreamweaver.

Familiarisation avec l'espace de travail dreamweaver

L'espace de travail Dreamweaver vous permet d'afficher des documents et les propriétés des objets. Il comporte des barres d'outils donnant accès aux opérations les plus courantes, vous permettant ainsi de modifier rapidement vos documents.

Cette section vous présente une vue d'ensemble de l'espace de travail de Dreamweaver 8. Pour des renseignements plus complets sur l'un des éléments de l'espace de travail représenté dans cette section, voir Chapitre 1, Exploration de l'espace de travail, dans Utilisation de Dreamweaver.

La présente section contient les rubriques suivantes :

■ Présentation de l'espace de travail, page 54 La fênetre de document, page 56 Barredoutildedocument, page57 La barred'etat, page 58 La barre Insere, page 59 La barre d'outils de codage, page 61 ■ Inspecteur des propriétés, page 62 Panneau Fichiers, page 63 Panneau Styles CSS, page 64

Présentation de l'espace de travail

Sous Windows, Dreamweaver propose une présentation intégrée en une seule fenêtre. Dans l'espace de travail intégré, toutes les fenêtres et tous les panneaux sont rassemblés dans une grande fenêtre d'application.

Remarque

L'espace de travail Windows dispose également d'une option Codeur qui ancre les groupes de panneaux sur le côté gauche et affiche par défaut la fenêtre de document en mode Code. Pour plus d'informations, voir Utilisation de l'espace de travail orienté en mode Code (Windows uniquement) dans Utilisation de Dreamweaver. Pour l'utilisation de cette option, voir Choix de la présentation de l'espace de travail (sous Windows uniquement) le chapitre Utilisation de Dreamweaver.

Sur Macintosh, Dreamweaver peut afficher de nombreux documents dans une seule fenêtre avec des onglets qui identifient chacun des documents. Dreamweaver peut aussi apparaître sous la forme d'une partie de l'espace de travail flottant dans laquelle chaque document s'affiche dans sa propre fenêtre. Les groupes de panneaux sont initialement ancrés ensemble mais vous pouvez les séparer pour les faire apparaître dans leur propre fenêtre. Les fenêtres s'alignent automatiquement les unes sur les autres sur les côtés de l'écran, et sur la fenêtre du document au fur et à mesure que vous les faites glisser ou que vous les redimensionnez.

Vous pouvez basculer entre différentes mises en forme à la fois dans Windows et Macintosh. Pour plus d'informations, voir Choix de la présentation de l'espace de travail (sous Windows uniquement) et Affichage de documents à onglet (Macintosh) dans Utilisation de Dreamweaver.

La fenêtre de document

La fenêtre de document affiche le document actif. Vous pouvez choisir parmi les modes d'affichage suivants :

Le mode Création est un environnement de création pour la mise en forme visuelle des pages, l'édition visuelle et le développement rapide d'applications. Dans ce mode, Dreamweaver affiche une représentation visuelle entièrement modifiable du document, similaire à la représentation de la page sur un navigateur.

Le mode Code est un environnement de codage manuel pour rédiger et modifier du code HTML, JavaScript et du code de langage de-serveur, tel que le langage PHP ou CFML (ColdFusion Markup Language), ou tout autre type de code. Pour plus d'informations, voir Chapitre 20, Codage dans Dreamweaver, dans Utilisation de Dreamweaver.

Les modes Code et Création vous permettent d'obtenir l'affichage Code et l'affichage Création du document dans une même fenêtre.

Lorsque la fenêtre de document dispose d'une barre de titre, cette dernière affiche le titre de la page et, entre parenthèses, le chemin et le nom de fichier du document. Après le nom du fichier, Dreamweaver affiche un astérisque à la suite du nom de fichier si vous avez apporté des modifications et que vous ne les avez pas encore enregistrées.

Lorsque vous agrandissez la fenêtre de document de la présentation de l'espace de travail intégré (sous Windows uniquement), elle s'affiche sans barre de titre ; le titre de la page, ainsi que le chemin d'accès et le nom du fichier s'affichent alors dans la barre de titre de la fenêtre principale de l'espace de travail.

En outre, lorsqu'une fenêtre de document est agrandie, des onglets s'affichent en haut de la zone de la fenêtre de document indiquant les noms de fichier de tous les documents ouverts. Pour passer à un autre document, cliquez sur son onglet.

Pour plus d'informations sur l'utilisation de la fenêtre de document, voir Chapitre 1, Exploration de l'espace de travail, dans Utilisation de Dreamweaver.

Barre d'outils de document

La barre d'outils de document est composée de boutons qui permettent d'accéder rapidement aux différents modes d'affichage : Code, Création et un mode d'affichage partagé pour afficher les modes Code et Création en même temps.

La barre d'outils contient également plusieurs commandes et options courantes permettant d'afficher le document et de le transférer d'un site local vers un site distant.

Les options suivantes s'affichent dans la barre d'outils du document :

Afficher mode Code pour afficher uniquement le mode Code dans la fenêtre de document.

Modes Code et Création pour afficher les deux modes simultanément dans deux volets distincts de la fenêtre de document. Dans ce cas, l'option mode Création en haut est activée dans le menu Options d'affichage. Utilisez cette option pour préciser quel mode doit s'afficher en haut de la fenêtre de document.

Afficher le mode Création pour afficher uniquement le mode Création dans la fenêtre de document.

Débogage de serveur affiche un rapport pour vous aider à déboguer la page ColdFusion active. Le rapport indique les erreurs éventuellement générées sur votre page.

Titre du document pour attribuer un titre à votre document et l'afficher dans la barre de titre du navigateur. Si votre document possède déjà un titre, celui-ci s'affiche dans ce champ.

Aucune erreur du navigateur permet de vérifier la compatibilité avec différents navigateurs.

Valider le marqueur vous permet de valider le document actif ou la balise sélectionnée.

Gestion des fichiers pour afficher le menu déroulant correspondant.

Aperçu/Débogage dans le navigateur pour prévisualiser ou déboguer un document dans un navigateur. Sélectionnez un navigateur dans le menu déroulant.

Actualiser le mode création pour actualiser le mode Création du document après avoir apporté des modifications dans le mode Code. Les modifications apportées dans le mode Code n'apparaissent pas automatiquement dans le mode Création. Vous devez executer tout d'abord certaines opérations, comme enregistrer le fichier ou utiliser ce bouton.

Options d'affichage pour définir les options d'affichage des modes Code et Création, notamment le mode devant s'afficher au-dessus de l'autre. Les options du menu s'appliquent à l'affichage actuel : Mode Création, mode Code ou les deux.

Assistances visuelles pour utiliser différentes assistances visuelles de conception de pages.

Pour plus d'informations sur l'utilisation de la fenêtre de document, voir Chapitre 1, Exploration de l'espace de travail, dans Utilisation de Dreamweaver.

La barre d'état

La barre d'état, située au bas de la fenêtre de document, fournit des informations supplémentaires sur le document en cours de création.

Le sélecteur de balises affiche la hiérarchie des balises entourant la sélection courante. Cliquez sur une balise quelconque dans la hiérarchie pour la sélectionner avec tout son contenu. Cliquez sur pour sélectionner tout le corps du document. Pour définir les attributs classe ou id d'une balise dans le sélecteur de balises, cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Option enfoncée (Macintosh) sur la balise et CHOISSEZ une classe ou un ID dans le menu déroulant. Il est préférable de faire appel au Sélecteur de balises pour sélectionner des balises car il garantit avec certitude la bonne sélection.

L'outil Main permet de cliquer sur le document et de le faire glisser sur la fenêtre de document. Cliquez sur l'outil Sélection pour désactiver l'outil Main.

L'outil Zoom et le menu déroulant Définir le facteur de zoom permettent de définir un taux d'agrandissement pour votre document. Pour plus d'informations, voir Zoom avant et arrêté dans Utilisation de Dreamweaver.

Le menu déroulant Taille de la fenêtre (visible en mode Création uniquement) permet de redimensionner la fenêtre du document selon des dimensions prédéfinies ou personnalisées. Pour plus d'informations, voir Redimensionnement de la fenêtre de document dans Utilisation de Dreamweaver.

À droite du menu déroulant Taille de fenêtre figurent une estimation de la taille du document et du temps de téléchargement de la page, ainsi que la liste de tous les fichiers dépendants, tels que les images et autres fichiers de médias. Pour plus d'informations, voir Vérification des préférences de durée et de la taille de téléchargement dans Utilisation de Dreamweaver.

Pour plus d'informations sur l'utilisation de la barre d'état, voir Chapitre 1, Exploration de l'espace de travail, dans Utilisation de Dreamweaver.

La barre insérer

Les boutons qui composent la barre Insérer permettent de créer et d'insérer des objets, tels que des tableaux, des calques et des images. Lorsque vous placez le curseur de la souris sur un bouton, une info-bulle indiquant le nom de ce bouton apparait.

Les boutons sont organisés en plusieurs catégories, sur le côté gauche de la barre Insérer. D'autres catégories s'affichent lorsque le document sélectionné contient du code serveur, tel que des documents ASP ou CFML. Au démarrage de Dreamweaver, la dernière catégorie utilisée s'ouvre.

Commun

Certaines catégories disposent de boutons ouvrant des menus déroulants. Lorsque vous sélectionnez une option dans l'un d'eux, l'action associée est attribuée par défaut au bouton. Par exemple, si vous sélectionnez le menu déroulant du bouton Image, puis Espace réservé pour l'image, la prochaine fois que vous cliquerez sur le bouton Image, Dreamweaver insérera un espace réservé pour l'image. Lorsque vous sélectionnez une nouvelle option dans l'un de ces menus, l'action attribuée par défaut au bouton change.

La barre Insérer est organisée en différentes catégories, comme suit :

La catégorie Commun permet de créer et d'insérer les objets les plus couramment utilisés, comme les images et les tableaux.

La catégorie Mise en forme permet d'insérer des tableaux, des balises div, des calques et des cadres. Vous pouvez également choisir parmi trois types de tableaux: Standard (par défaut), Tableaux étendus et Mise en forme. Si le mode Mise en forme est sélectionné, vous pouvez utiliser les outils de mise en forme de Dreamweaver: Dessiner la cellule de mise en forme et Dessiner le tableau de mise en forme.

La catégorie Formulaires contient des boutons permettant de créer des formulaires et d'y insérer des éléments.

La catégorie Texte insère diverses balises de mise en forme de texte et de liste, telles que b, em, p, h1 et ul.

La catégorie HTML insère des balises HTML pour les règles horizontales, le contenu de l'en-tête, les tableaux, les cadres et les scripts.

Les catégories de code serveur sont disponibles uniquement pour les pages utilisant un langage serveur spécifique comme ASP, ASP.NET, CFML Basic, CFML Flow, CFML Advanced, JSP et PHP. Ces catégories proposent des objets de type code serveur que vous pouvez insérer en mode Code.

La catégorie Application insère des éléments dynamiques, tels que les formulaires d'enregistrement, les régions répétées et les formulaires d'insertion d'enregistrement et de mise à jour.

La catégorie éléments Flash insère des éléments Macromedia Flash.

La catégorie Favoris permet de regrouper et d'organiser, dans un espace commun, les boutons de la barre Insérer que vous utilisez le plus fréquemment.

Pour plus d'informations sur l'utilisation de la barre d'état, voir Chapitre 1, Exploration de l'espace de travail, dans Utilisation de Dreamweaver.

La barre d'outils de codage

La barre d'outils de codage est composée de boutons qui vous permettent d'effectuer de nombreuses opérations de codage standard (réduction et agrandissement des sélections de code, mise en évidence de code non valide, application et suppression de commentaires, mise en retrait de code, insertion de fragments de code récemment utilisés, etc.). La barre d'outils de codage est visible uniquement en mode Code et apparaît verticalement sur le côté gauche de la fenêtre de document.

Vous ne pouvez pas détacher ni déplacer la barre d'outils de codage mais vous pouvez la masquer. Pour plus d'informations, voir Affichage des barres d'outils dans Utilisation de Dreamweaver.

Pour plus d'informations sur l'utilisation de la barre d'outils Codage, voir Insertion rapide de code avec la barre d'outils de codage dans Utilisation de Dreamweaver.

Inspecteur des propriétés

L'inspecteur des propriétés permet d'examiner et de modifier les propriétés les plus fréquentes de l’élément de la page sélectionnée, tel que le texte ou un objet inséré. Le contenu de l'inspecteur des propriétés varie en fonction de l’élément sélectionné. Par exemple, si vous sélectionnez une image de la page, l'inspecteur des propriétés se modifie pour montrer les propriétés de l'image (telles que le chemin d'accès au fichier, la largeur et la hauteur de l'image, la bordure autour de l'image, s'il y a lieu, et ainsi de suite).

Par défaut, l'inspecteur des propriétés se trouve au bas de l'espace de travail, mais vous pouvez l'ancrer en haut de l'espace de travail si vous le souhaitez. Vous pouvez aussi le laisser flotter dans l'espace de travail. Pour plus d'informations sur le déplacement de l'inspecteur des propriétes, voir Ancrage et annulation d'ancrage de panneaux et de groupes de panneaux dans Utilisation de Dreamweaver.

Pour plus d'informations sur l'utilisation de l'inspecteur des propriétés, voir Utilisation de l'inspecteur Propriétés dans Utilisation de Dreamweaver.

Panneau fichiers

Vous pouvez utiliser les panneaux Fichiers pour afficher et gérer les fichiers dans votre site Dreamweaver.

Lorsque vous affichez des sites, des fichiers ou des dossiers dans le panneau Fichiers, vous pouvez modifier la taille de la zone d'affichage. Vous pouvez également agrandir ou réduire le panneau Fichiers. Dans sa forme réduite, le panneau Fichiers affiche le contenu du site local, du site distant ou du serveur d'évaluation sous la forme d'une liste de fichiers. Sous sa forme développée, le panneau affiche le site local et soit le site distant, soit le serveur d'évaluation. Le panneau Fichiers peut également afficher une carte d'arborescence du site local.

Pour les sites Dreamweaver, il est également possible de personnaliser le panneau Fichiers en modifiant la vue (site local ou distant) qui s'affiche par défaut dans le panneau réduit.

Pour plus d'informations sur l'utilisation du panneau Fichiers pour gérer votre site, voir Chapitre 4, Gestion des fichiers, dans Utilisation de Dreamweaver.

Panneau styles CSS

Le panneau Styles CSS permet de suivre les règles CSS et les propriétés qui affectent un élément de page sélectionné (mode Actuel), ou les règles et les propriétés qui affectent l'ensemble d'un document (mode Tous). Un bouton bascule place en haut du panneau CSS permet de passer d'un mode à l'autre. Le panneau Styles CSS permet de modifier les propriétés CSS dans les deux modes.

Voupez redimensionner ces volets en faisant glisser leur bordure. En mode Actuel, le panneau Styles CSS présente trois volets: le volet Résumé de la sélection qui présente les propriétés CSS de la sélection en cours dans le document; le volet Règles qui précise l'emplacement des propriétés sélectionnées (ou une cascade de règles pour la balise sélectionnée, selon votre sélection) et un volet Propriétés qui vous permet de modifier les propriétés CSS de la règle définitissant la sélection.

En mode Tous, le panneau Styles CSS présente deux volets : un volet Toutes les règles (en haut) et un volet Propriétés (en bas). Le volet Toutes les règles présente la liste des règles définies dans le document actif, ainsi que l'ensemble des règles définies dans les feuilles de styles jointes à ce document. Le volet Propriétés permet de modifier les propriétés CSS de toute règle sélectionnée dans le volet Toutes les règles.

Toute modification apportée dans le volet Propriétés s'applique immédiatement, ce qui vous permet d'avoir un aperçu direct de votre travail.

Pour plus d'informations sur le panneau Styles CSS, voir A propos du panneau Styles CSS dans Utilisation de Dreamweaver.

Notions de base de flash

Pour tirer le meilleur parti de votre logiciel Flash, vous devez comprendre les éléments de base de l'espace de travail Flash. Cette section vous donne un aperçu des fichiers Flash et vous présente les éléments de l'espace de travail les plus importants et les plus couramment utilisés, notamment la scène, l'inspecteur des propriétés et le panneau Outils.

La présente section contient les rubriques suivantes :

À propos des fichiers Flash, page 65 Familiarisation avec l'espace de travail Flash, page 67

Le type de fichiers Flash primaire, les fichiers FLA, contient 3 types d'informations de base composant un document Flash. Ces grands types d'informations sont les suivants :

Les objets multimédia représentent les différents objets comme les graphiques, le texte, le son et la vidéo composant le contenu de votre document Flash. L'importation ou la création de ces éléments dans Flash ainsi que leur disposition sur la scène et dans le scénario vous permet de déterminer le contenu visible par les lecteurs de votre document ainsi que le moment de son affichage.

Le scénario permet d'indiquer à Flash quand faire apparaitre des objets multimédia spécifiques sur la scène. Le scénario ressemble à une feuille de calcul qui progresse de gauche à droite et dont les colonnes représentent le temps. Les lignes représentent des calques, le contenu des calques supérieurs apparaissant au-dessus du contenu des calques inférieurs sur la scène.

Le code ActionScript est le code de programmation que vous pouvez ajouter à des documents Flash pour les faire répondre aux interactions des utilisateurs et pour contrôler plus précisément le comportement de vos documents Flash. Beaucoup de choses peuvent être accomplies dans Flash sans ActionScript mais l'emploi du code ActionScript offre bien plus de possibilités.

Flash peut être utilisé pour travailler sur un grand nombre de types de fichiers différents. Chaque type a un objectif distinct. La liste qui suit décrit chaque type de fichier et ses utilisations :

• Les fichiers FLA sont les principaux fichiers sur lesquels vous travaillerez dans Flash. Il s'agit de fichiers qui contiennent les informations média, le scénario et le script de base pour un document Flash.
• Les fichiers SWF sont les versions compressées des fichiers FLA. Ce sont ces fichiers que vous affichez dans une page Web.
• Les fichiers AS sont des fichiers ActionScript. Vous pouvez utiliser ces fichiers si vous préférez conserver une partie ou l'intégrité de votre code ActionScript en dehors de vos fichiers FLA. Ils peuvent être utiles pour l'organisation du code et pour les projets impliquant un grand nombre de personnes travaillant sur différentes parties du contenu Flash.
• Les fichiers SWC contiennent les composants Flash réutilisables. Chaque fichier SWC contient un clip compiling, du code ActionScript et tout autre actif nécessaire au composant.
• Les fichiers ASC sont des fichiers utilisés pour stocker du code ActionScript qui sera exécuté sur un ordinateur équipé de Flash Communication Server. Ces fichiers permettent de mettre chier SWF.
• Les fichiers JSFL sont des fichiers JavaScript que vous pouvez utiliser pour ajouter une nouvelle fonction à l'outil de programmation Flash. Voir Extension de Flash pour plus d'informations.
• Les fichiers FLP sont des fichiers Flash Project (Flash Professionnel 8 uniquement). Vous pouvez utiliser Flash Projects pour : gérer de nombreux fichiers de document dans un seul projet. Les projets Flash vous permettent de regrouper plusieurs fichiers associés pour créer des applications complexes.

Familiarisation avec l'espace de travail flash

Les sections suivantes en détailleront les outils, panneaux et autres éléments de l'espace de travail Flash.

La présente section contient les rubriques suivantes :

Utilisation de la page de démarrage, page 68 Utilisation de la scène, page 69 Utilisation du scénario, page 71 Utilisation des images et des images-clés, page 76 Utilisation des calques, page 79 À propos de la barre d'outils principale et de la barre d'édition, page 86 Utilisation du panneau Outils, page 87 Utilisation de la grille, des guides et des règles, page 89 Utilisation des panneaux et de l'inspecteur des propriétés, page 93 Définition des préférences de Flash, page 101 Personnalisation des raccourcis clavier, page 107 Utilisation des menus contextuels, page 109 Accessibilité dans l'environnement auteur Flash, page 110

Utilisation de la page de démarrage

Lorsque Flash est en cours d'exécution mais qu'aucun document n'est ouvert, la page de démarrage s'affiche. La page de démarrage permet d'accéder facilement aux actions fréquemment utilisées.

La page de démarrage contient les quatre zones suivantes :

Ouvrir un élément récent vous permet d'ouvrir vos documents les plus récents. Vous pouvez également afficher la boîte de dialogue Ouvrir fichier en cliquant sur l'icône Ouvrir.

Créer Nouveau donne la liste des types de fichier Flash, comme les documents Flash et les fichiers ActionScript. Vous pouvez créer rapidement un nouveau fichier en cliquant sur le type de fichier désiré dans la liste.

Créer à partir d'un modèle donne la liste des modèles les plus couramment utilisés pour créer de nouveaux documents Flash. Vous pouvez créer un nouveau fichier en cliquant sur le modèle désiré dans la liste.

Supplément vous relie au site web Macromedia Flash Exchange, à partir duquel vous pouvez télécharger des applications d'aide pour Flash, des extensions de Flash et d'autres informations associées.

La page de démarrage permet également d'accéder rapidement aux ressources d'Aide. Vous pouvez suivre une visite guidée de Flash, découvrir les ressources de documentation de Flash et rechercher des utilisateurs de formations Agréées Macromedia.

Pour la masquer :

Sur la page de démarrage, sélectionnez Ne plus afficher.

Pour afficher à nouveau la page de démarrage, effectuez l'une des actions suivantes :

(Windows) Choisissez Edition > Préférences et Sélectionnez Afficher la page de démarrage dans l'onglet Général. (Windows) Choisissez Flash > Préférences et Sélectionnez Afficher la page de démarrage dans l'onglet Général.

Utilisation de la scène

La scène est la zone rectangulaire dans laquelle vous placez du contenu graphique (illustrations vectorielles, zones de texte, boutons, graphiques bitmap importés, clips video, etc.), lorsque vous créez des documents Flash. La scène de l'environnement auteur de Flash représente l'espace rectangulaire de Macromedia Flash Player dans lequel votre document Flash est affiché pendant la lecture. Vous pouvez effectuer un zoom avant/arrière pour modifier l'affichage de la scène.

La grille, les repères et les règles vous permettent de positionner le contenu avec précision sur la scène. Pour plus d'informations, consultez la section Utilisation de la grille, des guides et des règles, page 89.

Pour afficher l'ensemble de la scène à l'écran ou visualiser une portion particulière de votre dessin à fort agrandissement, vous pouvez modifier le niveau de zoom. Le zoom maximal dépend de la résolution de votre moniteur et de la taille du document. La valeur minimale de zoom arrêté sur la scène est de 8%. La valeur maximale de zoom avant sur la scène est de 2000%.

Pour zoomer sur un élément particulier, sélectionnez l'outil Zoom dans le panneau Outils et cliquez sur l'élément. Pour basculer l'outil Zoom entre le zoom avant et le zoom arrière, utilisez les modificateurs Agrandir ou Réduire (situés dans la zone d'options du panneau Outils lorsque l'outil Zoom est sélectionné) ou cliquez en maintenant la touche Alt (Windows) ou Option (Macintosh) enfonnée.

Pour faire un zoom avant sur une zone spécifique de votre dessin, tracez un cadre de sélection sur la scène avec l'outil Zoom. Flash définit le facteur de zoom de sorte que le cadre de sélection spécifique remplisse la fenêtre. Pour faire un zoom avant ou arrière sur l'ensemble de la scène, sélectionnez Affichage > Zoom avant ou Affichage > Zoom arrière. Pour faire un zoom avant ou arrière d'un pourcentage spécifique, sélectionnez Affichage > Zoom et sélectionnez un pourcentage dans le sous-menu, ou sélectionnez un pourcentage dans la zone de zoom située dans le coin supérieur droit du scénario. Pour redimensionner la scène afin qu'elle occupe tout l'espace disponible dans la fenêtre de l'application, choisissez Affichage > Zoom > Ajuster à la fenêtre. Pour afficher le contenu de l'image actuelle, sélectionnez Affichage > Zoom > Afficher tout, ou choisissez Afficher tout dans la zone de zoom de la fenêtre de l'application (coin supérieur droit). Si la séquence est vide, toute la scène s'affiche. Pour afficher toute la scène, CHOISISSEZ Affichage > Zoom Afficher une image ou choisissez Afficher une image dans le contrôle Zoom dans le coin supérieur droit du scénario. Pour afficher l'espace de travail entourant la scène, choisissez Affichage > Zone de travail. L'espace de travail est affiché en gris clair. Utilisez la commande Zone de travail pour afficher les éléments d'une série qui sont partiellement ou totalement en dehors de la zone de la scène. Par exemple, pour faire en sorte que le vol d'un oiseau passe par une image, vous devrez d'abord placer l'oiseau en dehors de la scène dans l'espace de travail, puis l'animer dans la zone de la scène.

Déplacement de la vue de la scène

Il est possible que vous ne puissiez pas voir l'ensemble de la scène lorsque vous faites un zoom avant. L'outil Main vous permet de déplacer la scène de manière à changer la vue sans avoir à changer le zoom.

Pour déplacer la vue de la scène :

1. Dans le panneau Outils, sélectionnez l'outil Main. Pour basculer temporairement entre l'outil Main et un autre outil, appuyez sur la barre d'espace et cliquez sur l'outil souhaité dans le panneau Outils.
2. Faites glisser la scène.

Utilisation du scénario

Le scénario organise et contrôle le contenu d'un document au fil du temps dans les calques et les images. Tout comme les films, les documents Flash divisent les périodes de temps en images. Les calques sont semblables à des bandes de film empilées les unes sur les autres, chacune contenant une image différente qui apparait sur la scène. Les principaux composants du scénario sont les calques, les images et la tête de lecture.

Les calques d'un document sont répertoriés dans une colonne affichée sur la gauche du scénario. Les images contenues dans chaque calque sont affichées sur une ligne à droite du nom du calque. L'en-tête du scénario, situé en haut du scénario, affiche le numéro des images. La tête de lecture indique l'image actuellement affichée sur la scène. Lorsqu'un document Flash est en cours de lecture, la tête de lecture se déplace de gauche à droite tout au long du scénario.

La barre d'état du scénario, affichée en bas de ce dernier, indique le numéro de l'image sélectionnée, la cadence d'image actuelle et le temps écoulé jusqu'à l'image actuelle.

Lors de la lecture d'une animation, la cadence réelle des images est indiquée; elle peut être différente du paramétrage de la cadence du document si l'ordinateur ne peut pas calculer et afficher l'animation assez rapidement.

Vous pouvez modifier la manière dont les images sont affichées dans le scénario. Vous pouvez également afficher les vignettes du contenu des images dans le scénario. Le scénario indique les endroits auxquels un document contient des effets animés (animation image par image, animation interpolée ou trajectoires de mouvement, par exemple). Pour plus d'informations sur l'animation, consultez « Création de mouvement » dans le guide Utilisation de Flash de l'aide.

Les commandes de la section des calques du scenario vous permettent d'afficher, de masquer, de verrouiller ou de déverrouiller les calques, de même qu'en afficher le contenu sous forme de contours. Pour plus d'informations, consultez la section Modification des calques et dossiers de calques, page 83.

Vous pouvez insérer, supprimer, sélectionner et déplacer des images dans le scénario. Vous pouvez également faire glisser des images vers un nouvel emplacement du même calque ou d'un calque différent. Pour plus d'informations, consultez la section Utilisation d'images dans le scénario, page 76.

Modification de l'apparence du scénario

Par défaut, le scenario est affiché en haut de la fenêtre principale de l'application, au-dessus de la scène. Pour changer sa position, vous pouvez ancrer le scenario en bas ou sur les côtés de la fenêtre de l'application, ou encore afficher le scenario dans sa propre fenêtre. Vous pouvez également masquer le scenario.

Vous pouvez redimensionner le scenario de manière à changer le nombre de calques et d'images visibles. Lorsque le scenario contient plus de calques qu'il ne peut en afficher, vous pouvez afficher les calques supplémentaires à l'aide des barres de défilement situées sur la droite du scenario.

• Faites glisser la poignée d'ancrage située à gauche du mot Scénario dans la barre de titre du panneau.

Pour ancrer un scénario dont l'ancrage est annulé :

• Faites glisser la barre de titre du scénario vers un bord de la fenêtre de l'application. Faites-le glisser avec la touche Ctrl enfoncée pour empêcher son ancrage.

Pour agrandir ou réduire les champs de nom des calques :

• Faites glisser la barre séparant les noms des calques et les images du scénario.

Pour redimensionner le scénario, effectuez l'une des opérations suivantes:

Si le scénario est ancré à la fenêtre principale de l'application, faites glisser la barre séparant le scénario de la zone de la scène. Si le scénario n'est pas ancré à la fenêtre principale de l'application, faites glisser le coin inférieur droit (Windows) ou la case de redimensionnement située dans le coin inférieur droit (Macintosh).

Déplacement de la tête de lecture

La tête de lecture se déplace dans le scenario lors de la lecture d'un document pour indiquer l'image actuellement affichée sur la scène. L'entête du scenario affiche le numéro des images de l'animation. Pour afficher une image sur la scène, vous nevez déplacer la tête de lecture vers cette image dans le scenario.

Lorsque vous travaillez avec de nombreuses images qui ne peuvent pas être toutes affichées en même temps dans le scénario, vous pouvez déplacer la tête de lecture le long du scénario de manière à facilement localiser une image particulière.

Pour atteindre une image :

• Cliquez sur l'emplacement de l'image dans l'en-tête du scénario ou faites glisser la tête de lecture vers la position souhaitée.

Pour centrer le scénario sur l'image en cours :

• Cliquez sur le bouton Centrer l'image en bas du scénario.

Changement de l'affichage des images dans le scénario

Vous pouvez modifier la taille des images dans le scenario et ajouter de la couleur aux séquences d'images afin de les mettre en surbrillance. Vous pouvez également inclure un aperçu du contenu des images sous forme de vignettes dans le scenario. Ces vignettes sont utiles pour avoir une vue d'ensemble de l'animation mais nécessitant de l'espace écran supplémentaire.

Menu déroulant d'affichage des images

Options d'affichage des images Normales et Courtes

Pour changer l'affichage des images dans le scénario :

1. énario pour afficher le menu déroulant d'affichage des images.
2. Effectuez votre sélection parmi les options suivantes :

Pour changer la largeur des cellules des images, sélectionnez Minuscules, Petites, Normales, Moyennes ou Grandes. L'option Grandes permet de visualiser les détails des courbes audio. Pour réduire la hauteur des lignes de cellules, sélectionnez Courtes. Pour activer ou désactiver la teinte des séquences d'images, sélectionnez Images teintées. Pour afficher des vignettes du contenu de chaque image mises à l'échelle en fonction des images du scénario, sélectionnez Aperçu. La taille apparente du contenu peut varier.

Pour afficher une vignette de chaque image (y compris l'espace vide), sélectionnez Afficher un aperçu dans le contexte. Cette option permet de visualiser la manière dont les éléments se déplacent au sein de leurs images au cours de l'effet animé. Toutefois, les aperçus sont généralement plus petits qu'avec l'option Afficher un aperçu.

Utilisation des images et des images-clés

Une image-clé est une image dans laquelle vous définissez la modification des propriétés d'un objet pour une animation ou incluez du code ActionScript pour commander certains aspects de votre document. Flash peut interpolar ou remplir automatiquement les images situées entre les images-clés que vous définissez pour produire des animations fluides. Les images-clés facilitent la création des animations car elles évitent d'avoir à tracer chacune de leurs images. Vous pouvez facilement modifier la longueur d'un effet animé interpolé en faisant glisser une image-clé dans le scénario.

L'ordre d'apparition des images et des images-clés dans le scenario détermine celui de leur affichage dans une application Flash. Vous pouvez organiser les images-clés différemment dans le scenario afin de modifier la série des événements dans l'animation.

Utilisation d'images dans le scénario

Dans le scénario, vous travailliez avec des images et des images-clés en les plaçant dans l'ordre correspondant à celui dans lequel vous souhaitez que les objets apparaissent dans les images. Vous pouvez changer la longueur d'un effet animé interpolé en faisant glisser une image-clé dans le scénario.

Vous pouvez effectuer les modifications suivantes sur les images et les images-clés :

• Insérer, sélectionner, supprimer et déplacer des images ou des images-clés. Faire glisser des images et des images-clés vers un nouvel emplacement du même calque ou d'un calque différent. Copier et coller des images et des images-clés. Convertir des images-clés en images. Faire glisser un élément du panneau Bibliothèque vers la scène de manière à l'ajouter à l'image-clé actuelle.

Le scénario affiche les images interpolées d'un effet animé. Pour plus d'informations sur la modification des images, consultez « Création de mouvement » dans le guide Utilisation de Flash de l'aide.

Flash offre deux méthodes distinctes pour sélectionner les images dans le scénario. Avec la sélection basée sur images (paramètre par défaut), vous sélectionnez séparément les images dans le scénario. Avec la sélection basée sur plages, vous sélectionnez toute une série d'images (d'une image-clé à la suivante) en cliquant sur n'importe quelle image de cette série. Vous pouvez spécifier une sélection basée sur plages dans les préférences Flash.

Pour effectuer une sélection basée sur plages :

1. Sélectionnez Édition > Préférences.
2. Sélectionner l'onglet Général.
3. Dans la section Scénario, choisissez Sélection basée sur plages.
4. Cliquez sur OK.

Pour plus d'informations, consultez la section Définition des préférences de Flash, page 101.

Pour insérer des images dans le scénario, effectuez l'une des opérations suivantes:

Pour insérer une nouvelle image, sélectionnez Insertion > Image. Pour créer une image-clé, choisissez Insertion > Image-clé. Vous pouvez également cliquer avec le bouton droit de la souris (Windows) ou en appuyant sur la touche Ctrl (Macintosh) sur l'image dans laquelle placer l'image-clé, puis CHOISIR Insérer une image-clé dans le menu contextuel. Pour créer une image-clé vide, choisissez Insertion > Image-clé vide ou cliquez avec le bouton droit (Windows) ou en appuyant sur la touche Ctrl (Macintosh) sur l'image dans laquelle placer l'image-clé, puis choisissez Insérer une image-clé vide dans le menu contextuel.

Pour sélectionner une ou plusieurs images dans le scénario :

Pour sélectionner une image, cliquez sur l'image. Si vous avez activé l'option Sélection basée sur plages dans la boîte de dialogue Préférences, le fait de cliquer sur une image sélectionne toute la série d'images comprise entre deux images-clés. Pour plus d'informations, consultez la section Définition des préférences de Flash, page 101. Pour sélectionner plusieurs images contiguës, maintenez la touche Maj enfoncée et cliquez sur les autres images. Pour sélectionner plusieurs images non contiguës, maintenez la touche Ctrl (Windows) ou Commande (Macintosh) enfoncée, puis cliquez sur les autres images.

Pour sélectionner toutes les images d'un scénario :

• Choisissez Édition > Scénario > Sélectionner toutes les images.

Pour supprimer ou modifier une image ou une image-clé, effectuez l'une des opérations suivantes :

Pour supprimer une image, une image-clé ou une série d'images, Sélectionnez l'image, l'image-clé ou la série, choisissez Edition > Scénario > Supprimer les images, ou cliquez avec le bouton droit (Windows) ou en appuyant sur la touche Ctrl (Macintosh) sur l'image, l'image-clé ou la série et choisissez Supprimer les images à partir du menu contextuel. Les images environnantes demeurent inchangées. Pour déplacer une image-clé ou une série d'images et leur contenu, faites-la glisser vers l'emplacement souhaité. Pour éditer la durée d'une animation à image-clé, faites glisser l'image-clé tout en appuyant sur Alt (Windows) ou Option (Macintosh) jusqu'à l'image dont vous souhaitez qu'elle devienne la dernière image de la séquence. Pour copier une image-clé ou une série d'images en la faisant glisser, cliquez tout en appuyant sur la touche Alt (Windows) ou sur la touche Option (Macintosh) et faites glisser l'image-clé vers l'emplacement souhaité. Pour copier et coller une image ou une série d'images, Sélectionnez-la et choisissez Edition > Scénario > Copier les images. Sélectionnez une image ou série à remplacer et choisissez Edition > Scénario > Coller les images.

Pour convertir une image-clé en image, Sélectionnez-la et choisissez Edition > Scénario > Supprimer l'image-clé. Vous pouvez également cliquer avec le bouton droit de la souris (Windows) ou tout en appuyant sur la touche Ctrl (Macintosh) sur l'image ou la séquence et CHOISIR Supprimer l'image-clé dans le menu contextuel. Le contenu de la scène de l'image-clé effacée et de toutes les images comprises entre elle et l'image-clé suivante est remplacé par le contenu de la scène de l'image précédant l'image-clé effacée. Pour changer la longueur d'une série interpolée, faites glisser l'image-clé de début ou de fin vers la gauche ou la droite. Pour modifier la durée d'une série image par image, consultez « Création d'animations image par image », dans le guide Utilisation de Flash de l'aide. Pour ajouter un élément de la bibliothèque à l'image-clé en cours, faites glisser l'élément du panneau Bibliothèque vers la scène.

Utilisation des calques

Les calques sont similaires à des feuilles transparentes en acétate empilées les unes sur les autres sur la scène. Les calques permettent d'organiser les différents éléments d'un document. Vous pouvez dessiner et modifier des objets sur un calque sans affecter les objets des autres calques. Les calques vides laissent apparaître les calques situés en dessous.

Pour dessiner, peindre ou encore modifier un calque ou dossier, vous devez sélectionner le calque dans le scénario pour le rendre actif. L'icône crayon en regard du nom d'un calque ou dossier dans le scénario indique que le calque ou dossier est actif. Vous ne pouvez activer qu'un seul calque à la fois (même si vous pouvez en sélectionner plusieurs à la fois).

Lorsque vous créez un document Flash, celui-ci contient un seul calque. Vous pouvez y ajouter d'autres calques de façon à organiser le contenu, les effets animés et les autres éléments de votre document. Le nombre de calques que vous pouvez créer n'a de limite que la mémoire de votre ordinateur, les calques n'augmentant pas la taille de votre fichier SWF publié. Seuls les objets que vous placez dans des calques accroissent la taille du fichier. Vous pouvez également masquer, verrouiller ou réarranger les calques.

Vous pouvez également organiser et gérer les calques en créant des dossiers de calques et en y plaçant des calques. Vous pouvez développer ou réduire les dossiers de calques dans le scenario sans affecter ce qui est affiché sur la scène. Il est conseillé d'utiliser des calques ou dossiers distincts pour les fichiers audio, ActionScript, les étiquettes et les commentaires d'image.

Cela vous permet de retrouver plus rapidement ces éléments lorsque vous ne devez les modifier.

En outre, vous pouvez utiliser des calques de guide spéciaux pour faciliter les opérations de dessin et de modification, et masquer les calques pour créer des effets spéciaux.

Pour afficher une présentation interactive de l'utilisation des calques dans Flash, CHOISSEZ Aide > Didacticiels Flash > Tâches de base > Utiliser les calques.

Création de calques ou dossiers de calques

Lorsque vous créez un calque ou dossier, celui-ci apparait au-dessus du calque sélectionné. Le calque que vous venez d'ajouter devient le calque actif.

Pour créer un calque, effectuez l'une des opérations suivantes :

• Cliquez sur le bouton Insérer un calque, en bas du scénario. Choisissez Insertion > Scenario > Calque.
• Cliquez avec le bouton droit de la souris (Windows) ou avec la touche Ctrl enfoncée (Macintosh) sur le nom d'un calque dans le scenario, puis choisissez Insérer un calque dans le menu contextuel.

Pour créer un dossier de calques, effectuez l'une des opérations suivantes:

• Sélectionnez un calque ou un dossier dans le scénario, puis désissez Insertion > Scénario > Dossier de calques.
• Cliquez avec le bouton droit de la souris (Windows) ou avec la touche Ctrl enfoncée (Macintosh) sur le nom d'un calque dans le scenario, puis choisissez Insérer un dossier dans le menu contextuel.

Le nouveau dossier apparaît au-dessus du calque ou du dossier que vous avez sélectionné.

Affichage des calques ou dossiers de calques

Vous pouvez afficher ou masquer les calques ou dossiers au cours de votre travail. Une croix rouge (X) placée en regard du nom d'un calque ou d'un dossier dans le scénario indique que celui-ci est masqué. Lorsque vous publiez un fichier Flash SWF, tous les calques masqués dans le document FLA sont conservés et visibles dans le fichier SWF.

Pour distinguer les calques auxquels appartiennent les objets, vous pouvez afficher tous les objets des calques sous forme de contours colorés. Vous pouvez changer la couleur de contour utilisée par chaque calque.

Vous pouvez modifier la hauteur des calques dans le scénario afin d'afficher plus d'informations (des courbes audio, par exemple) dans le scénario. Vous avez aussi la possibilité de modifier le nombre de calques affichés dans le scénario.

Pour afficher ou masquer un calque ou dossier, effectuez l'une des opérations suivantes :

• Cliquez dans la colonne Œil, à droite du nom du calque ou dossier, pour masquer ce calque ou dossier. Cliquez de nouveau pour l'afficher.
• Cliquez sur l'icône représentant un œil pour masquer tous les calques et dossiers dans le scénario. Cliquez de nouveau dessus pour afficher tous les calques et dossiers.
• Faites glisser le pointeur de la souris dans la colonne Œil pour afficher ou masquer plusieurs calques ou dossiers.
• Cliquez en appuyant sur la touche Alt (Windows) ou Option (Macintosh) dans la colonne CEil, à droite du nom du calque ou dossier, pour masquer tous les autres calques et dossiers. Cliquez de nouveau en appuyant sur la touche Alt ou Option pour afficher tous les calques et dossiers.

Pour afficher le contenu d'un calque sous forme de contours, effectuez l'une des opérations suivantes :

• Cliquez dans la colonne Contours, à droite du nom du calque, pour afficher tous les objets présents sur ce calque sous forme de contours. Cliquez de nouveau pour désactiver l'affichage des contours.
• Cliquez sur l'icone Contours pour afficher les objets présents sur tous les calques sous forme de contours. Cliquez de nouveau dessus pour désactiver l'affichage des contours sur tous les calques.
• Cliquez en appuyant sur la touche Alt (Windows) ou Option (Macintosh) dans la colonne Contours, à droite du nom du calque, pour afficher les objets de tous les autres calques sous forme de contours. Cliquez de nouveau en appuyant sur la touche Alt ou Option pour désactiver l'affichage des contours pour tous les calques.

Pour changer la couleur du contour d'un calque :

1. Effectuez l'une des opérations suivantes :

Double-cliquez sur l'icône du calque (l'icône située à gauche du nom du calque) dans le scénario. - Cliquez avec le bouton droit (Windows) ou avec la touche Ctrl enfoncée (Macintosh) sur le nom du calque et choisissez Propriétés dans le menu contextuel. - Sélectionnez le calque dans le scénario et choisissez Modification > Calque.

1. Dans la boîte de dialogue Propriétés du calque, cliquez sur Couleur du contour et sélectionnez une nouvelle couleur, entrez une valeur hexadécimale pour la couleur ou cliquez sur le sélecteur de couleur et choisissez une couleur.
2. Cliquez sur OK.

Pour changer la hauteur du calque dans le scénario :

1. Effectuez l'une des opérations suivantes :

Double-cliquez sur l'icône du calque (l'icône située à gauche du nom du calque) dans le scénario. - Cliquez avec le bouton droit (Windows) ou avec la touche Ctrl enfoncée (Macintosh) sur le nom du calque et CHOISISSEZ Propriétés dans le menu contextuel. - Sélectionnez le calque dans le scénario et choisissez Modification > Scénario > Propriétés du calque.

1. Dans la boîte de dialogue Propriétés du calque, sélectionnez une option pour Hauteur du calque et cliquez sur OK.

Pour changer le nombre de calques affichés dans le scénario :

• Faites glisser la barre qui sépare le scénario de la zone de la scène.

Modification des calques et dossiers de calques

Vous pouvez renommer, copier et supprimer des calques et dossiers. Vous pouvez également verrouiller les calques ou les dossiers pour qu'ils ne puissent pas être modifiés.

Par défaut, les nouveaux calques sont nommés dans l'ordre de leur création : Calque 1, Calque 2, etc. Vous pouvez renommer les calques afin de mieux en refléter le contenu.

Pour sélectionner un calque ou dossier, effectuez l'une des opérations suivantes:

• Cliquez sur le nom du calque ou dossier dans le scénario.
• Cliquez sur n'importe quelle image du scénario du calque que vous souhaitez sélectionner. ■ Sélectionnez un objet sur la scène, dans le calque que vous souhaitez sélectionner. Pour sélectionner deux ou plusieurs calques ou dossiers, effectuez l'une des opérations suivantes:

Pour sélectionner des calques ou dossiers contigus, cliquez avec la touche Maj enfoncée sur leurs noms dans le scénario. Pour sélectionner des calques ou dossiers non contigus, cliquez avec la touche Ctrl enfoncée (Windows) ou la touche Commande (Macintosh) enfoncée sur leurs noms dans le scénario.

Pour renommer un calque ou dossier, effectuez l'une des opérations suivantes:

Double-cliquez sur le nom du calque ou dossier dans le scénario et entrez un nouveau nom. - Cliquez avec le bouton droit (Windows) ou avec la touche Ctrl enfoncée (Macintosh) sur le nom du calque ou dossier et choisissez Propriétés dans le menu contextuel. Entrez le nouveau nom dans Nom et cliquez sur OK. - Sélectionnez le calque ou le dossier dans le scénario, puis désissez Modification > Scénario > Propriétés du calque. Dans la boîte de dialogue Propriétés du calque, entrez le nouveau nom dans Nom et cliquez sur OK.

Pour verrouiller ou déverrouiller un ou plusieurs calques ou dossiers, effectuez l'une des opérations suivantes :

• Cliquez dans la colonne de verrouillage, à droite du nom du calque ou dossier, pour verrouiller le calque ou dossier correspondant. Cliquez de nouveau dans la colonne de verrouillage pour le déverrouiller.
• Cliquez sur l'icône de verrouillage pour verrouiller tous les calques et dossiers. Cliquez de nouveau dessus pour déverrouiller tous les calques et dossiers.
• Faites glisser le pointeur de la souris dans la colonne de verrouillage pour verrouiller ou déverrouiller plusieurs calques ou dossiers.
• Cliquez en appuyant sur la touche Alt (Windows) ou Option (Macintosh) dans la colonne de verrouillage, à droite du nom du calque ou de dossier, pour verrouiller tous les autres calques ou dossiers. Cliquez de nouveau en appuyant sur la touche Alt ou Option dans la colonne de verrouillage pour déverrouiller tous les calques ou dossiers.

Pour copier un calque :

1. Cliquez sur le nom du calque dans le scénario pour sélectionner le calque tout entier.
2. Choisissez Édition > Scénario > Copier les images.
3. Cliquez sur le bouton Inserer un calque pour créer un calque.
4. Cliquez sur le nouveau calque et choisissez Édition > Scénario > Coller les images.

Pour copier le contenu d'un dossier de calques :

1. Cliquez sur le triangle affiché à gauche du nom du dossier dans le scénario pour le réduire, si nécessaire.
2. Cliquez sur le nom du dossier pour sélectionner le dossier tout entier.
3. Choisissez Édition > Scénario > Copier les images.
4. Pour créer un nouveau dossier, CHOISSEZ Insertion > Scenario > Dossier de calques.
5. Cliquez sur le nouveau dossier et CHOisissez Edition > Scenario > Coller les images.

Pour supprimer un calque ou dossier :

1. Sélectionnez le calque ou dossier en cliquant sur son nom dans le scénario ou n'importe quelle image du calque.
2. Effectuez l'une des opérations suivantes :
3. Cliquez sur l'icône Supprimer le calque dans le scénario.
4. Faites glisser le calque ou dossier sur l'icône Supprimer le calque.
5. Cliquez avec le bouton droit (Windows) ou avec la touche Ctrl enfoncée (Macintosh) sur le nom du calque ou dossier et choisissez Supprimer le calque dans le menu contextuel.

Lorsque vous supprimez un dossier de calques, tous les calques et leur contenu sont également supprimés.

Organisation des calques et dossiers de calques

Voulez reorganiser les différents calques et dossiers dans le scénario pour moins organiser votre document.

Les dossiers de calques vous permettent de mieux organiser vos tâches en plaçant les calques dans une structure arborescente. Vous pouvez développer ou réduire un dossier pour afficher les calques qu'il contient sans affecter les calques visibles sur la scène. Les dossiers pouvant contenant des calques et d'autres dossiers, vous pouvez organiser les calques de la même manière que vous organisez les fichiers de votre ordinateur.

Les commandes du scénario relatives aux calques s'appliquent à tous les calques d'un même dossier. Par exemple, le verrouillage d'un dossier de calques entraîne le verrouillage de tous les calques qu'il contient.

Pour déplacer un calque (ou un dossier de calques) et le placer dans un dossier de calques :

• Faites glisser le nom du calque (ou dossier de calques) sur le nom du dossier de calques de destination.

Le calque (ou dossier de calque) apparait à l'intérieur du dossier de calques de destination dans le scénario.

Pour changer l'ordre des calques ou dossiers :

• Faites glisser un ou plusieurs calques ou dossiers dans le scénario jusqu'à la position souhaitée au-dessus ou en dessous d'autres calques dans le scénario.

Pour développement ou réduire un dossier :

Cliquez sur le triangle affiché à gauche du nom du dossier.

Pour développer ou réduire tous les dossiers :

• Cliquez avec le bouton droit (Windows) ou avec la touche Ctrl enfoncée (Macintosh), puis désissez Développer tous les dossiers ou Réduire tous les dossiers dans le menu contextuel.

Utilisation des calques de guide

Vous pouvez faciliter l'alignement des objets de vos scènes à l'aide de calques de guide. Il vous suffit ensuite d'aligner les objets des autres calques sur les objets créés sur les calques de guide. Les calques de guide ne sont pas exportés et n'apparaissent pas dans les fichiers SWF tels que publiés. Vous pouvez utiliser n'importe quel calque comme calque de guide. Les calques de guide sont signalés par une icône de guide à gauche du nom du calque.

Vous pouvez également créer un calque de guide de mouvement pour contrôler le mouvement des objets d'une animation interpolée de mouvement. Pour plus d'informations, consultez « Interpolation de mouvement le long d'une trajectoire » dans le guide Utilisation de Flash de l'aide.

Remarque

Un calque normal placé sur un calque de guide convertit le calque de guide en calque de guide de mouvement. Pour éviter la conversion accidentelle d'un calque de guide, placez tous les calques de guide en dernier dans l'ordre des calques.

Pour désigner un calque comme calque de guide :

• Sélectionnez le calque et cliquez avec le bouton droit (Windows) ou avec la touche Ctrl enfoncée (Macintosh), puis choisissez Guide dans le menu contextuel. Sélectionnez à nouveau Guide pour convertir le calque en calque normal.

À propos de la barre d'outils principale et de la barre d'édition

La barre de menus située en haut de la fenêtre de l'application Flash affiche les menus et les commandes contrôlent les diverses fonctionnalités de Flash. Ces menus sont : Fichier, Édition, Affichage, Insertion, Modification, Texte, Commandes, Contrôle, Fenêtre et Aide.

La barre d'édition, située en haut du scénario, comprend les commandes et informations concernant la modification des scènes et des symboles, ainsi que la modification du niveau de zoom de la scène.

Pour plus d'informations sur la modification du niveau de zoom de la scène, consultez Zoom, page 69. Pour des informations sur la modification de symboles, consultez « Utilisation de symboles, d'occurrences et d'actifs de bibliothèque » dans le guide Utilisation de Flash de l'aide. Pour plus d'informations sur le travail avec les scènes, voir « Utilisation des scènes » dans le guide Utilisation de Flash de l'aide.

Utilisation du panneau outils

Les éléments du panneau Outils vous permettent de dessiner, de peindre, de sélectionner, de modifier une illustration ou de modifier l'affichage de la scène. Le panneau Outils est divisé en quatre sections :

La zone Outils contient les outils de dessin, de peinture et de sélection. La zone Affichage contient les outils de zoom et de panoramique utilisés dans la fenêtre de l'application. La zone Couleurs contient les modifieurs de couleur de trait et de remplissage. La zone d'options affiche des modifieurs pour l'outil sélectionné. Les modifieurs affectent les opérations de peinture ou d'édition de l'outil.

Grâce à la boîte de dialogue Personneliser le panneau Outils, vous pouvez indiquer quels outils afficher dans l'environnement auteur de Flash. Pour plus d'informations, consultez la section Personnelisation du panneau Outils, page 88.

Pour plus d'informations sur l'utilisation des outils de dessin et de peinture, consultez « À propos des outils de dessin et de peinture Flash » dans le guide Utilisation de Flash de l'aide. Pour plus d'informations sur l'utilisation des outils de sélection, consultez « Sélection d'objets » dans le guide Utilisation de Flash de l'aide. Pour plus d'informations sur l'utilisation des outils de modification de l'affichage, consultez la section Déplacement de la vue de la scène, page 71.

Pour afficher ou masquer le panneau outils :

■ Sélectionnez Fenêtre > Outils.

Sélection des outils

Vous pouvez sélectionner les outils en cliquant dans le panneau Outils ou en utilisant un raccourci clavier.

Pour sélectionner un outil, effectuez l'une des opérations suivantes :

• Cliquez sur l'outil que vous souhaitez utiliser. Un ensemble de modificateurs peut apparaître en bas du panneau Outils en fonction de l'outil que vous sélectionnez.
• Appuyez sur le raccourci clavier de l'outil. Vous pouvez afficher les raccourcis clavier en sélectionnant Edition > Raccourcis clavier. Pour sélectionner un outil situé dans le menu déroulant comme outil visible (par exemple, l'outil Rectangle), cliquez sur l'icône de l'outil visible et choisissez un autre outil dans le menu déroulant.

Personnalisation du panneau outils

Vous pouvez personnaliser le panneau Outils afin d'indiquer quels outils afficher dans l'environnement auteur. Utilisez la boîte de dialogue Personnaliser le panneau Outils pour ajouter ou supprimer des outils du panneau Outils.

Vous pouvez afficher aux plaisirs vos outils à un seul endroit. Lorsque plusieurs outils sont affichés à un seul endroit, l'outil ayant été utilisé le plus récemment s'affiche avec une flèche dans le coin inférieur droit de son icône. Lorsque vous maintenez le bouton de la souris enfoncé sur l'icône, les autres outils du groupe apparaissent dans un menu déroulant. Vous pouvez aussi sélectionner un outil dans le menu.

Pour personnaliser le panneau outils :

1. Pour afficher la boîte de dialogue Personnaliser le panneau Outils, procédez comme suit :

Sous Windows, CHOISSEZ Edition Personnaliser le panneau Outils. Sous Macintosh, CHOISSEZ Flash > Personaliser le panneau Outils. Le menu Outils disponibles indique les outils disponibles dans Flash. Le menu SéLECTION actuelle indique l'outil (ou les outils) attribué(s) à l'emplacement sélectionné dans le panneau Otools.

Si plusieurs outils sont attribués à un même emplacement du panneau Outils, une petite flèche apparait dans le coin inférieur droit de l'outil. Cette flèche indique que des outils supplémentaires sont disponibles dans un menu contextuel. Le même raccourci clavier fonctionne pour tous les outils du menu contextuel.

1. Cliquez sur un outil dans l'image du panneau Outils ou utilisez les flèches pour passer d'un outil à l'autre et pour indiquer l'emplacement auquel vous pouvez attribuer un autre outil.
2. Pour ajouter un outil à l'emplacement sélectionné, CHOISSEZ l'outil dans la liste Outils disponibles et cliquez sur le bouton Ajouter. Vous pouvez attribuer un outil à plusieurs emplacements.
3. Pour supprimer un outil de l'emplacement sélectionné, CHOISSEZ l'outil dans la liste déroulante Sélection actuelle, puis cliquez sur le bouton Supprimer.
4. Cliquez sur OK pour appliquer vos modifications et fermez la boîte de dialogue Personnaliser le panneau Outils.

Pour restaurer la disposition par défaut du panneau outils :

• Cliquez sur Restaurer les paramètres par défaut dans la boîte de dialogue Personneliser le panneau Outils.

Utilisation de la grille, des guides et des règles

Flash peut afficher des règles et des guides destinés à vous aider à dessiner et à positionner les objets avec précision. Vous pouvez placer les guides dans un document et y accrocher les objets ou accrocher ces derniers aux grilles après les avoir activées.

Vous pouvez aussi accrocher des objets à d'autres objets ou pixels. Vous pouvez également aligner des objets en utilisant les limites de la tolérance à l'accrochage. Pour plus d'informations, consultez « Accrochage » dans le guide Utilisation de Flash de l'aide.

Utilisation des règles

Lorsque les règles sont affichées, elles apparaissent le long des bords supérieurs ou latéraux du document. Vous pouvez changer l'unité de mesure utilisée dans les règles (qui est le pixel, par défaut) et utiliser une autre unité. Lorsque vous déplacez un élément sur la scène alors que les règles sont affichées, des lignes indiquant les dimensions des éléments apparaissent sur les règles.

Pour afficher ou masquer les règles :

Choisissez Affichage > Règles.

Pour spécifier l'unité de mesure des règles pour un document :

• Sélectionnez Modifier > Document, puis désirez une unité dans le menu Unités de la règle sur le côté inférieur gauche de la boîte de dialogue.

Utilisation des guides

Vous pouvez faire glisser des guides horizontalement ou verticalement des règles sur la scène lorsque les règles sont affichées. Vous pouvez déplacer, verrouiller, masquer et supprimer les guides. Vous pouvez également accrocher les objets aux guides, puis modifier la couleur et la tolérance à l'accrochage (la distance à laquelle les objets doivent se trouver pour pouvoir être accrochés) aux guides. Flash vous permet de créer des scénarios imbriqués. Les guides déplaçables apparaissent sur la scène uniquement lorsque le scénario dans lequel ils sont créés est actif.

Vous supportez effacer tous les guides dans le mode d'édition en cours, qu'il s'agisse du mode d'édition de document ou de symbole. En mode d'édition de documents, tous les guides du document sont effacés. En mode d'édition de symboles, l'ensemble des guides de tous les symboles ont effacés.

Pour créer des guides personnalisés ou irréguliers, vous devez utiliser les calques de guide. Pour plus d'informations, consultez la section Utilisation des calques de guide, page 86.

Pour afficher ou masquer les guides de dessin :

Choisissez Affichage > Guides > Afficher les guides.

Si la grille est déjà visible et que l'option Accrocher à la grille est activée lorsque vous créez les guides, ces derniers sont accrochés à la grille.

Pour activer ou désactiver l'accrochage aux guides :

Choisissez Affichage > Accrochage > Accrocher aux guides.

L'accrochage aux guides est prioritaire par rapport à l'accrochage à la grille lorsque les guides sont derrière les lignes de grille.

Pour déplacer un guide :

1. Assurez-vous que les règles sont visibles en sélectionnant Affichage > Règles.
2. A l'aide de l'outil Sélection, clique à n'importe quel endroit sur la règle et fais glisser le guide vers l'endroit désiré sur la scène.

Pour supprimer un guide :

• Déverrouillez les guides, puis utilisez l'outil Sélection pour faire glisser le guide vers la règle horizontale ou verticale. Pour plus d'informations sur le verrouillage et le déverrouillage des guides, consultez la procédure suivante.

Pour verrouiller les guides :

Choisissez Affichage > Guides > Verrouiller les guides.

Voulez égallement utiliser l'option Verrouiller les guides dans la boîte de dialogue Modifier les guides (Affichage > Guides > Modifier les guides). Pour plus d'informations, consultez la procédure ci-dessous.

Pour définir les préférences des guides :

1. Sélectionnez Affichage > Guides > Modifier les guides et effectuez l'une des opérations suivantes :

Pour Couleur, cliquez sur le triangle de la puce de couleur et sélectionnez une couleur de guide dans la palette. La couleur par défaut des guides est le vert. - Activez ou désactivez l'option Afficher les guides pour afficher ou masquer les guides. - Activez ou désactivez l'option Accrocher aux guides pour activer ou désactiver l'accrochage aux guides. - Activez ou désactivez l'option Verrouiller les guides pour verrouiller ou déverrouiller les guides. Pour Précision d'ajustement, sélectionnez une option dans le menu déroulant. Pour supprimer tous les guides, cliquez sur Effacer tout. L'option Effacer tout supprime tous les guides de la série actuelle. - Cliquez sur Enreg. par défaut pour enregistrer les paramètres courants comme paramètres par défaut.

1. Cliquez sur OK.

Pour effacer les guides :

• Choisissez Affichage > Guides > Effacer les guides.

Si vous êtes en mode de modification de document, tous les guides du document seront supprimés. Si vous êtes en mode de modification de symboles, tous les guides utilisés dans les symboles sont supprimés.

Utilisation de la grille

Lorsque la grille est affichée dans un document, elle apparait sous la forme de lignes placées derrière les illustrations dans chacune des séquences. Vous pouvez accrocher des objets à la grille, de même que changer la taille de la grille ou la couleur de ses lignes.

Choisissez Affichage > Grille > Afficher la grille. Appuyez sur Ctrl+” (guillemet) (Windows) ou sur Commande+” (guillemet) (Macintosh).

Pour activer ou désactiver l'accrochage à la grille :

Choisissez Affichage > Accrochage > Accrocher à la grille.

Pour définir les préférences de la grille :

1. Choisissez Affichage > Grille > Modifier la grille.
2. Pour Couleur, cliquez sur le triangle de la puce de couleur et sélectionnez une couleur de grille dans la palette. La couleur par défaut des lignes de grille est le gris.
3. Activez ou désactivez l'option Afficher la grille pour afficher ou masquer la grille.
4. Activez ou désactivez l'option Accrocher à la grille pour activer ou désactiver l'accrochage à la grille.
5. Pour l'espacement de la grille, entrez les valeurs dans les champs affichés à droite des flèches horizontale et verticale.
6. Pour Précision d'ajustement, sélectionnez une option dans le menu déroulant.
7. Cliquez sur Enreg. par défaut pour enregistrer les paramètres courants comme paramètres par défaut.

Utilisation des panneaux et de l'inspecteur des propriétés

Flash you propose de nombreuses manières de personnaliser l'espace de travail en fonction de vos besoins. Les panneaux et l'inspecteur des propriétés vous permettent d'afficher, d'organiser et de modifier les actifs multimédia et autres et leurs attributs. Vous pouvez afficher, masquer et redimensionner les panneaux. Vous pouvez également grouper les panneaux et enregistrer des yeux de panneaux personnalisés pour modifier votre espace de travail en fonction de vos préférences. L'inspecteur des propriétés se modifiant en fonction de l'outil ou de l'actif avec lequel vous travailliez, il vous permet d'accéder rapidement aux fonctions fréquemment utilisées.

L'inspecteur des propriétés simplifie la création des documents en facilitant l'accès aux attributs le plus fréquemment utilisés de la sélection actuelle, que ce soit sur la scène ou dans le scénario. Vous pouvez modifier les attributs d'un objet ou document dans l'inspecteur des propriétés sans avoir à accéder aux menus ou panneaux qui commandent également ces attributs.

Selon ce qui est sélectionné, l'inspecteur des propriétés affiche les informations et les paramètres du document, texte, symbole, forme, bitmap, vidéo, groupe, image ou outil actuel. Lorsque plusieurs types d'objets sont sélectionnés, il affiche le nombre total d'objets sélectionnés.

L'inspecteur des propriétés affiche les propriétés de l'outil Texte.

Choisissez Fenêtre > Propriétés > Propriétés. - Appuyez sur Ctrl+F3 (Windows) ou sur Commande+F3 (Macintosh).

C'est dans le panneau Bibliothèque que vous stockez et organisez les symboles créés dans Flash, ainsi que les fichiers importés tels que les graphiques bitmap, les fichiers audio et les clips video. Le panneau Bibliothèque vous permet d'organiser les éléments de la bibliothèque dans des dossiers, de savoir combien de fois un objet est utilisé dans un document et de trier les éléments par type. Pour plus d'informations, consultez « Utilisation de la bibliothèque pour la gestion des ressources multimédia » dans le guide Utilisation de Flash de l'aide.

Le panneau Bibliothèque affiche un symbole de clip vidéo.

Sélectionnez Fenêtre > Bibliothèque. - Appuyez sur Ctrl+L (Windows) ou sur Commande+L (Macintosh).

Présentation du panneau actions

Le panneau Actions vous permet de créer et de modifier du code ActionScript pour un objet ou une image. La sélection d'une occurrence de bouton, de clip ou d'image rend le panneau Actions actif. Le titre du panneau Actions devient Actions - Boutons, Actions - Clips ou Actions - Images en fonction de votre sélection.

Pour plus d'informations sur l'utilisation du panneau Actions et sur l'écriture de code ActionScript, y compris sur le basculement entre les modes d'édition, voir Utilisation du panneau Actions et de la fenêtre Script dans Formation à ActionScript 2.0 dans Flash.

Le panneau Actions affiche une action stop() dans une image.

Choisissez Fenêtre > Actions. - Appuyez sur la touche F9.

Utilisation des panneaux

Les différents panneaux dans Flash vous aident à afficher, organiser et modifier les éléments dans un document. Les options des différents panneaux contrôlent les caractéristiques de symboles, d'occurrences, de couleurs, de types, d'images et d'autres éléments. Vous pouvez personnaliser l'interface Flash en affichant les panneaux dont vous avez besoin pour une tâche spécifique et masquer les autres panneaux.

Les panneaux vous permettent de travailler avec des objets, des couleurs, du texte, des occurrences, des images, des séquences et des documents tout entiers. Ainsi, vous utiliserez le panneau Mélangeur pour créer des couleurs et le panneau Aligner pour aligner des objets les uns par rapport aux autres ou à la scène. La liste complète des panneaux disponibles dans Flash apparaît dans le menu Fenêtre.

La plupart des panneaux contient un menu déroulant complétant des options supplémentaires. Ce menu contextuel est indiqué par une commande placée à l'extrémité droite de la barre de titre du panneau. (Si aucune commande de menu contextuel n'apparaît, c'est qu'il n'y a aucun menu pour ce panneau.)

Par défaut, les panneaux sont regroupés en bas à droite de l'espace de travail. Flash.

Pour ouvrir un panneau :

Sélectionnez le panneau souhaité dans le menu Fenêtre.

Pour fermer un panneau, effectuez l'une des opérations suivantes :

• Sélectionnez le panneau souhaité dans le menu Fenêtre.
• Cliquez avec le bouton droit de la souris (Windows) ou tout en maintenant la touche Ctrl enfoncée (Macintosh) sur la barre de titre du panneau, puis choisissez Fermer un groupe de panneaux dans le menu contextuel.

Pour utiliser un menu contextuel du panneau :

1. Pour afficher le menu contextuel, cliquez sur le contrôle à l'extrémité droite de la barre de titre du panneau.
2. Clique sur un élément du menu.

Clique sur un menu contextuel du panneau:

Pour redimensionner un panneau :

• Faites glisser la bordure du panneau (Windows) ou la case de redimensionnement située dans le coin inférieur droit du panneau (Macintosh).

Pour développer un panneau ou le réduire à sa barre de titre :

• Cliquez sur la flèche Réduire/Développer dans la barre de titre. Cliquez de nouveau sur cette flèche pour rétablir la taille précédente du panneau.

Cliquez sur la flèche Réduire/Développer d'un panneau

Pour fermer tous les panneaux :

Choisissez Fenêtre > Masquer les panneaux.

Disposition des panneaux

Dans Flash, vous pouvez organiser les panneaux dans des groupes. Vous pouvez réorganiser l'ordre dans lequel les panneaux sont affichés au sein de groupes de panneaux. Vous pouvez également créer de nouveaux groupes de panneaux et ancrer des panneaux à des groupes existants. Si vous souhaitez qu'un panneau apparaisse seul, séparé des autres groupes de panneaux, vous pouvez le faire flotter. Ceci est particulièrement utile pour les panneaux qui doivent être accessibles en permanence, par exemple le panneau Aide ou le panneau Actions.

Pour déplacer un panneau :

• Faites glisser le panneau par sa poignée (située sur le côté gauche de la barre de titre).

Pour ajouter un panneau à un groupe de panneaux :

• Faites glisser le panneau par sa poignée pour le placer sur un autre panneau. Une ligne noire s'affiche à côté du panneau cible pour indiquer l'endroit où le panneau sera placé.

Pour afficher plusieurs panneaux dans une seule fenêtre de panneaux :

1. Cliquez sur le menu contextuel du panneau
2. Sélectionnez le groupe Nom du panneau avec option.
3. Sélectionnez un autre panneau auquel ajouter le panneau actuel à partir du sous-menu.

Le premier panneau est ajusté au deuxième panneau sous forme d'onglet.

Un panneau transformé en onglet affichant les panneaux Bibliothèque et Explorateur d'animations

Pour faire flotter un panneau :

• Faites glisser le panneau par sa poignée pour l'éloigner des autres panneaux.

Pour créer un groupe de panneaux :

• Faites glisser le panneau par sa poignée pour l'éloigner des autres panneaux. Ajoutez d'autres panneaux au premier panneau pour constituer un nouveau groupe.

Utilisation de produits de panneaux

Vous pouvez créer des regroupements de panneaux personnalisés et les enregistrer sous forme de produits de panneaux personnalisés. Vous pouvez définir l'affichage du panneau comme disposition par défaut (affichant les panneaux Mélangeur, Actions, Inspecteur des propriétés et Bibliothèque) ou pour personnaliser une disposition que vous avez précédemment enregistrée.

Pour enregistrer un jeu personnalisé de panneaux :

1. Sélectionnez Fenêtre > Enregistrer la disposition des panneaux...
2. Entrez le nom de la nouvelle disposition et cliquez sur OK.

Pour sélectionner une disposition de panneaux :

1. Sélectionnez Fenêtre > Disposition de l'espace de travail.
2. Dans le sous-menu, choisissez Disposition par défaut pour rétablir la disposition par défaut des panneaux ou Sélectionnez une disposition personalisée précédemment enregistrée.

Pour supprimer les dispositions personnalisées :

1. Sélectionnez Fenêtre > Présentation de l'espace de travail > Gérer...
2. Dans la boîte de dialogue Gérer les présentations de l'espace de travail, sélectionnez le jeu de panneaux que vous souhaitez supprimer.
3. Cliquez sur Supprimer.
4. Cliquez sur Oui pour confirmer la suppression.
5. Cliquez sur OK.

Définition des préférences de flash

Flash vous permet de définir des préférences pour les opérations générales de l'application, les opérations de manipulation et les opérations liées au presse-papiers. Pour plus d'informations sur les préférences de dessin, consultez « Définition des paramètres de dessin », dans le guide Utilisation de Flash de l'aide.

L'onglet Général de la boîte de dialogue Préférences

Pour définir les préférences

1. Choisissez Edition > Préférences (Windows) ou Flash > Préférences (Macintosh).
2. Dans la liste d'onglets, CHOISEZ L'un des onglets suivants:

Général ActionScript Format automatique Presse-papiers Dessin Texte Avertissements

1. Sélectionnez l'une des options suivantes comme décrit dans les procédures qui suivront. Pour plus d'informations sur les préférences de l'éditeur ActionScript, consultez « Utilisation de l'éditeur ActionScript », dans le guide Formation à ActionScript 2.0 dans Flash.

Pour paramétrer des préférences générales, faites votre choix parmi les options suivantes :

Pour les options Au démarrage, choisissez une option spécifique : le document Flash à ouvrir au lancement de l'application. Choisissez Afficher la page de démarrage pour afficher la page de démarrage. Sélectionnez Nouveau document pour ouvrir un nouveau document vierge. Choisissez Derniers documents ouverts pour ouvrir les documents ouverts la première fois que vous avez quitté Flash. Choisissez Aucun document pour lancer Flash sans ouvrir de document.

Pour Nombre d'annulations, saisissez une valeur entre 2 et 300 pour paramétrer le nombre d’actions annuler/rétablir. Chaque niveau d'annulation nécessite de la mémoire et, plus ce nombre est élevé, plus la quantité de mémoire utilisée est importante. Le nombre par défaut est 100. Puis sélectionnez Annulation au niveau du document ou au niveau de l'objet. L'annulation au niveau du document conserve une liste unique de toutes vos actions pour l'intégralité du document Flash. L'annulation au niveau de l'objet conserve des listes distinctes de vos actions pour chaque objet dans votre document Flash. L'annulation au niveau de l'objet vous offre une plus grande souplesse car vous pouvez annuler une action sur l'un des objets sans avoir à annuler également des actions sur d'autres objets qui ont pu être modifiés plus récemment que l'objet cible.

• Dans Options d'impression (Windows uniquement), désactivez l'option Désactiver PostScript pour désactiver la sortie PostScript lors de l'impression sur une imprimante PostScript. Cette option est désactivée par défaut. Activez cette option en cas de problèmes d'impression avec une imprimante PostScript mais n'oubliez pas que cela ralentira l'impression.

Pour les Options de test de l'animation, CHOISSEZ Ouvrir le test de l'animation dans les onglets pour demander à Flash d'ouvrir un nouvel onglet de document dans la fenêtre de l'application lorsque vous sélectionnez Contrôle > Tester l'animation. Par défaut, le test de l'animation s'ouvre dans sa propre fenêtre.

Pour les Options de sélection, activez ou désactivez l'option Sélection à l'aide de la touche Maj. pour contrôler la façon dont Flash traite la sélection de plusieurs éléments. Lorsque l'option Sélection à l'aide de la touche Maj. est activée, le fait de cliquer sur des éléments supplémentaires les ajoute à la sélection en cours. Lorsque l'option Sélection à l'aide de la touche Maj. est désactivée, le fait de cliquer sur des éléments supplémentaires désélectionne les autres éléments, sauf si vous maintenez la touche Maj. enfoncée.

Activez l'option Afficher les info-bulles pour afficher les info-bulles lorsque le pointeur passe au-dessus d'une commande. Désactivez cette option si vous ne souhaitez pas afficher les info-bulles.

• Sélectionnez Activer au contact pour que les objets soient sélectionnés lorsqu'une de leurs parties est incluse dans le rectangle de sélection lors du clique-glisser à l'aide des outils Sélection ou Lasso. Par défaut, les objets sont uniquement sélectionnés lorsque le rectangle de sélection de l'outil entoure complètement l'objet.
• Dans Options de scenario, CHOISSEZ SELECTION basée sur plages pour utiliser la selection basée sur plages dans le scenario, plutot que la selection basee sur images par defaut. Pour plus d'informations sur la selection basee sur plages et basee sur images, consultez Utilisation d'imagendans le scenario, page 76.

Activez l'option Ancre nommée sur Séquence pour que Flash transforme la première image de chaque série d'un document en ancre nommée. Les ancre nommées vous permettent d'utiliser les boutons Suivant et Précédent des navigateurs pour passer d'une série à l'autre dans une application Flash. Pour plus d'informations, consultez la section Utilisation du scénario, page 71.

Pour la Couleur de surbrillance, CHOISSEZ une couleur dans le panneau, ou choisissez Utiliser la couleur du calque pour utiliser la couleur de contour du calque sélectionné. Pour Paramètres du projet, CHOISSEZ Fermer les fichiers ouverts lors de la fermeture du projet pour que tous les fichiers d'un projet se ferment lorsque vous fermez le projet.

Sélectionnez Enregistrer les fichiers du projet lors du test ou de la publication du projet pour que chaque fichier d'un projet soit enregistré à chaque fois qu'un projet est testé ou publié.

Pour plus d'informations, consultez « Création et gestion de projets (Flash Professionnel uniquement) », dans le guide Utilisation de Flash de l'aide.

Pour définir les préférences actionscript :

Voir « A propos des préférences ActionScript » dans Formation à ActionScript 2.0 dans Flash.

Pour définir les préférences de format automatique pour actionscript :

• Faites votre choix parmi les options proposées. Pour visualiser l'effet de chaque sélection, examinez le panneau Aperçu.

Pour définir les préférences du presse-papiers, faites votre choix parmi les options suivantes :

Pour Bitmaps (Windows uniquement), activez des options pour Codage des couleurs et la Résolution de manière à spécifier ces paramètres pour les bitmaps copiés dans le presse-papiers. Sélectionnez Lisser pour appliquer l'option d'anticrénelage. Entrez une valeur pour Limité de taille de manière à spécifier la quantité de mémoire vive utilisée lorsqu'un bitmap est placé dans le presse-papiers. Augmentez cette valeur lorsque vous travaillez avec des bitmaps volumineux ou de résolution élevée. Si votre ordinateur dispose d'une quantité limitée de mémoire, sélectionnez Aucun.

• Dans Dégradé (Windows uniquement), CHOISSEZ une option de manière à spécifier la qualité des remplissages dégradés placés dans le métafichier Windows. Le besoin d'une qualité plus élevée augmente le temps nécessaire à la copie d'une illustration. Utilisez ce paramètre pour spécifier iées est conservée, quelle que soit la valeur du paramètre Dégradés dans le presse-papiers.

Pour Paramètres PICT (Macintosh uniquement), sélectionnez le type Objets pour conserver les données copiées dans le presse-papiers en tant qu'illustrations vectorielles ou sélectionnez un des formats de bitmap pour convertir l'illustration copiée en bitmap. Entrez une valeur de résolution. Sélectionnez Inclure PostScript pour inclure les données PostScript. Pour Dégradés, CHOISSEZ une option de manière à spécifier la qualité des dégradés dans le fichier PICT. Le besoin d'une qualité plus élevée augmente le temps nécessaire à la copie d'une illustration. Utilisez ce paramètre pour spécifier ées est conservée, quelle que soit la valeur du paramètre Dégradés.

Pour Texte FreeHand, activez l'option Conserver le texte en blocs pour que le texte reste modifiable dans un fichier FreeHand collé.

Pour définir les préférences de dessin :

Pour les options d'Outil Plume, consultez « Définition des préférences de l'outil Plume » dans le guide Utilisation de Flash de l'aide. Pour Paramètres de dessin, consultez « Définition des paramètres de dessin », dans le guide Utilisation de Flash de l'aide.

Pour définir les préférences de texte, sélectionnez une des options suivantes :

Pour Mappage des polices par défaut, Sélectionnez la police qui sera utilisée pour remplacer les polices absentes des documents ouverts dans Flash. Pour plus d'informations, consultez « Remplacement de polices absentes » dans le guide Utilisation de Flash de l'aide. Pour les options Texte vertical, activez l'option Orientation du texte par défaut pour que le texte s'affiche verticalement par défaut, ce qui est pratique pour certaines polices de caractères asiatiques. Cette option est désactivée par défaut.

Activez l'option Texte de droite à gauche pour inverser la direction d'affichage par défaut du texte. Cette option est désactivée par défaut. Activez l'option Pas de crénage pour désactiver le crénage du texte vertical. Bien qu'elle soit désactivée par défaut, cette option permet d'améliorer l'espacement de certaines polices utilisant des tables de crénage.

• Dans Paramètres des langues d'entrée, sélectionnez la langue appropriée.

Pour définir les préférences d'avertissements, sélectionnez une des options suivantes :

• Activez l'option Indiquer la compatibilité au format Macromedia Flash 8 lors de l'enregistrement pour que Flash vous avertisse lorsque vous enregistrez en tant que fichier Flash MX 2004 des documents dont le contenu est spécifique au Flash Basic 8 ou à l'outil de programmation Flash Professionnel 8. Cette option est activée par défaut.
• yant pas été installées sur votre ordinateur. Cette option est activée par défaut.
• Choisissez Avertir lors des changements d'URL au démarriage et lors de la modification pour que Flash vous avertisse lorsque l'URL d'un document a changé depuis la dernière fois que vous l'avez ouvert ou modifié.
• Activez l'option Avertir lors de la lecture de contenu Generator pour que Flash affiche une croix rouge (X) sur tous les objets Generator afin de vous rappeler que ces objets ne sont pas supportés par FlashMX 8.
• Activez l'option Avertir lors de l'insertion d'images et d'importation de contenu pour que Flash vous avertisse lorsqu'il insère des images dans votre document afin de tenir compte des fichiers audio ou vidéo que vous importez. Choisissez Avertir des conflits de codage pendant l'exportation de fichiers .as pour que Flash vous prévienne lorsque la sélection de l'encodage par défaut peut entraîner une perte de données ou une corruption de caractère. (Par exemple, si vous créez un fichier avec des caractères anglais, japonais et coréens et que vous sélectionnez Codage par défaut sur un système en anglais, les caractères japonais et coréens seront corrompus.)
• Choisissez Avertir lors de la conversion des objets graphiques d'effets pour que Flash vous avertisse lorsque vous tentez de modifier un symbole auquel des effets de scenario sont appliqués.
• Choisissez Avertir lors de l'exportation vers Flash Player 6 r65 pour que Flash vous avertisse lorsque vous exportez un document vers la version précédente de Flash Player.
• Choisissez Avertir lorsque les dossiers racine des sites se chevauchent pour que Flash vous avertisse lorsque vous créez un site dans lequel le dossier racine local chevauche celui d'un autre site.
• Choisissez Avertir lors de la conversion d'un comportement en symbole pour que Flash vous avertisse lorsque vous convertissez un symbole auquel un comportement est associé à un autre type de symbole; cela se produit lorsque vous convertissez un clip en bouton, par exemple.
• Choisissez Avertir lors de la conversion en symboles pour que Flash vous avertisse lorsque vous convertissez un symbole en un symbole d'un autre type.
• lorsqu'il convertit un objet graphique dessiné en groupe grâce au mode Dessin d'objet.
• Choisissez Afficher les avertissements d'incompatibilité des commandes de fonction pour que Flash affiche des avertissements sur les contrôles de fonctions non pri ètres de publication.

Personnalisation des raccourcis clavier

Vous pouvez choisir des raccourcis clavier dans Flash pour les faire correspondre aux raccourcis que vous avez l'habitude d'utiliser dans d'autres applications ou afin de rationaliser votre flux de travail. Par défaut, Flash utilise les raccourcis clavier intégrés conçus pour l'application. Vous pouvez également sélectionner un jeu de raccourcis clavier intégrés utilisés dans l'une des applications graphiques très répandues telles que Macromedia Fireworks, Adobe Illustrator ou encore Adobe Photoshop.

Pour créer un jeu de raccourcis clavier personnalisé, vous pouvez dupliquer un jeu existant, puis y ajouter ou en supprimer des raccourcis. Vous pouvez aussi supprimer des produits de raccourcis personnalisés.

Pour afficher ou imprimer le jeu de raccourcis clavier actuellement utilisé :

1. Choisissez Édition > Raccourcis clavier.
2. Dans la boîte de dialogue Raccourcis clavier, choisissez le jeu de raccourcis que vous souhaitez afficher dans le menu déroulant Jeu actuel.
3. Cliquez sur le bouton Exporter le jeu au format HTML.

Le bouton Exporter le jeu au format HTML.

1. Dans la boîte de dialogue Enregistrer sous qui s'affiche, désissez un nom et un emplacement pour le fichier HTML exporté. Le nom de fichier par défaut est le nom du jeu de raccourcis sélectionné.
2. Cliquez sur Enregistrer.
3. Recherche le fichier exporté dans le dossier que vous avez sélectionné et ouvrez-le dans un navigateur Web.
4. Pour imprimer le fichier, utilisez la commande Imprimer du navigateur.

Pour sélectionner un jeu de raccourcis clavier :

1. Choisissez Édition > Raccourcis clavier (Windows) ou Flash > Raccourcis clavier (Macintosh).
2. Dans la boîte de dialogue Raccourcis clavier, CHOISSEZ un jeu de raccourcis dans le menu déroulant Jeu actuel.

Pour créer un jeu de raccourcis clavier :

1. Sélectionnez un jeu de raccourcis clavier, comme précisé dans la procédure précédente.
2. Cliquez sur le bouton Dupliquer le jeu.
3. Entrez le nom du nouveau jeu de raccourcis et cliquez sur OK.

Pour renommer un jeu de raccourcis clavier personnelé :

1. Dans la boîte de dialogue Raccourcis clavier, CHOISSEZ un jeu de raccourcis dans le menu déroulant Jeu actuel.
2. Cliquez sur le bouton Renommer le jeu.
3. Dans la boîte de dialogue Renommer le jeu, entrez un nouveau nom et cliquez sur OK.

Pour ajouter ou supprimer un raccourci clavier :

1. Choisissez Edition > Raccourcis clavier (Windows) ou Flash > Raccourcis clavier (Macintosh) et sélectionnez le jeu que vous pouvez modifier.
2. Dans le menu déroulant Commandes, Sélectionnez Commandes du menu Dessin, Outils Dessin, Commandes du menu Tester l'animation ou Commandes d'accessibilité de l'espace de travail pour afficher les raccourcis de la catégorie sélectionnée.
3. Dans la liste des commandes, Sélectionnez la commande pour laquelle vous souhaitez ajouter ou supprimer un raccourci.

Une explication de la commande sélectionnée apparait dans la zone Description de cette boite de dialogue.

1. Effectuez l'une des opérations suivantes :

Pour ajouter un raccourci, cliquez sur le bouton Ajouter (+) Pour supprimer un raccourci, cliquez sur le bouton Supprimer (-) et passez à l'étape 6.

1. Si vous ajoutez un raccourci, entrez la combinaison de touches du nouveau raccourci sous Appuyer sur la touche.

Il vous suffit d'appuyer sur les touches du clavier pour entrer la combinaison de touches. Vous n'avez pas besoin d'entrer le nom des touches, tel que Ctrl, Option, etc.

1. Cliquez sur Remplacer.
2. Répétez cette procédure pour ajouter ou supprimer des raccourcis supplémentaires.
3. Cliquez sur OK.

Pour supprimer un jeu de raccourcis clavier :

1. Choisissez Édition > Raccourcis clavier (Windows) ou Flash > Raccourcis clavier (Macintosh). Dans la boîte de dialogue Raccourcis clavier, cliquez sur le bouton Supprimer le jeu.
2. Dans la boîte de dialogue Supprimer le jeu, choisissez un jeu de raccourcis et cliquez sur Supprimer.

Vous ne pouvez pas supprimer les jours de raccourcis clavier intégrés à Flash.

Utilisation des menus contextuels

Les menus contextuels contiennent des commandes spécifiques à la sélection en cours. Par exemple, lorsque vous sélectionnez une image dans la fenêtre Scénario, le menu contextuel contient les commandes permettant de créer, supprimer ou modifier des images et des images-clés. Des menus contextuels existent pour de nombreux éléments et contrôles des nombreux emplacements, tels que la scène, le scénario, le panneau Bibliothèque ou le panneau Actions.

Pour ouvrir un menu contextuel :

• Cliquez avec le bouton droit de la souris (Windows) ou tout en appuyant sur la touche Ctrl enfoncée (Macintosh) sur un élément.

Accessibilité dans l'environnement auteur flash

Les fonctions d'accessibilité dans l'environnement auteur Flash offrent des raccourcis clavier destinés à la navigation et à l'utilisation des contrôles d'interface comme les panneaux, l'inspecteur des propriétés, les boîtes de dialogue, la scène et les objets de la scène. Vous pouvez ainsi vous servir de ces éléments de l'interface sans avoir à utiliser votre souris.

Certains raccourcis clavier ne sont disponibles que sous Windows. Pour plus d'informations, consultez A propos de l'accessibilité Flash sous Mac, page 110.

Personnalisez les raccourcis clavier d'accessibilité de l'environnement auteur dans la section Commandes d'accessibilité de l'espace de travail de la boîte de dialogue Raccourcis clavier. Pour plus d'informations, consultez la section Personnelisation des raccourcis clavier, page 107.

Certaines fonctions d'accessibilité de l'environnement auteur ne sont pas disponibles sous Mac. Pour plus d'informations, consultez la section suivante :

Les limites d'accessibilité de l'environnement auteur Flash sous Mac sont les suivantes :

Le raccourci clavier du focus du panneau (Commande+Option+Tab) n'est pas pris en charge pour l'inspecteur des propriétés. Le raccourci clavier du focus du contrôle du panneau (Tab) est pris en charge uniquement pour le scénario mais pas pour les autres panneaux, ni pour l'inspecteur des propriétés.

Sélection de panneaux ou de l'inspecteur des propriétés à l'aide de raccourcis clavier

Vous pouvez sélectionner un panneau ou l'inspecteur des propriétés (action également appelée application d'un focus au panneau ou à l'inspecteur des propriétés) en utilisant le raccourci clavier Ctrl+Alt+Tab (Windows) ou Commande+Option+Tab (Macintosh).

Vous pouvez appliquer un focus à un panneau ou à l'inspecteur des propriétés uniquement lorsqu'ils sont visibles dans la fenêtre de l'application Flash. Le panneau peut être développé ou réduit.

Lorsque vous utilisez le raccourci clavier pour sélectionner des panneaux, un focus est appliqué d'après les critères suivants :

Le focus est appliqué en premier aux panneaux ancrés. Si le scenario est affiché et ancré, un focus lui est appliqué la première fois que vous utilisez le raccourci Ctrl+Alt+Tab (Windows) ou Commande+Option+Tab (Macintosh). S'il n'est ni affiché ni ancré, ou si vous utilisez le raccourci à nouveau, le focus se déplace sur le panneau ancré le plus à droite et le plus haut. L'utilisation à répétition du raccourci clavier déplace le focus vers les autres panneaux ancrés dans l'espace de travail, de droite à gauche et de haut en bas. Si vous déplacez le focus vers tous les panneaux ancrés, ou si aucun panneau ancré n'est affiché, le focus se déplace vers le panneau flottant le plus à droite et le plus haut. L'utilisation à répétition du raccourci clavier déplace le focus vers les autres panneaux flottants dans l'espace de travail, de droite à gauche et de haut en bas.

Utilisation de raccourcis clavier pour sélectionner, désélectionner, développer ou réduire des panneaux ou l'inspecteur des propriétés :

Pour déplacer le focus vers les panneaux affichés dans l'espace de travail, utilisez le raccourci Ctrl+Alt+Tab (Windows) ou Commande+Option+Tab (Macintosh). Une ligne pointillée entoure le titre du panneau ayant actuellement le focus. Pour déplacer le focus vers le panneau sélectionné précédemment, utilisez le raccourci Ctrl+Maj+Alt+Tab (Windows) ou Commande+Maj+Option+Tab (Macintosh). Pour désélectionner un panneau, appuyez sur Échap, ou déplacez, ancrez ou désancrez le panneau.

Pour déplacer le focus vers le panneau supérieur ou inférieur au panneau actuel dans un groupe, utilisez la flèche vers le haut ou la flèche vers le bas.

Utilisation des raccourcis clavier pour développer ou réduire les panneaux ou l'inspecteur des propriétés :

1. Appuyez sur Ctrl+Alt+Tab (Windows) ou Commande+Option+Tab (Macintosh) jusqu'à ce que le panneau que vous souhaitez développer ou réduire ait le focus. Une ligne pointillée entoure le titre du panneau ayant actuellement le focus.
2. Appuyez sur la barre d'espace pour développer ou réduire le panneau sélectionné.

Pour masquer tous les panneaux et l'inspecteur des propriétés :

• Appuyez sur la touche F4. Appuyez sur F4 à nouveau pour afficher tous les panneaux et l'inspecteur des propriétés.

Sélection de contrôle dans un panneau ou dans l'inspecteur des propriétés à l'aide de raccourcis clavier

Lorsque le focus est sur un panneau ou sur l'inspecteur des propriétés, vous pouvez utiliser la touche Tab pour le déplacer vers les contrôles du panneau. Utilisez la barre d'espace pour activer le contrôle disposant du focus actuel (appuyer sur la barre d'espace revient à cliquer sur un contrôle dans le panneau).

Lorsque vous utilisez un raccourci clavier pour les contrôles du panneau, un focus est appliqué à un contrôle. Celui-ci est activé d'après les critères suivants :

Le panneau comptant le focus doit être développé pour que vous puissiez sélectionner un contrôle à l'aide de la touche Tab. Si le panneau est réduit, la touche Tab n'a rien d'effet. Lorsque le panneau comptant le focus actuel est développé, appuyez une première fois sur la touche Tab pour déplacer le focus vers le menu contextual du panneau. Utilisez la flèche vers la droite et la flèche vers la gauche pour déplacer le focus entre le menu contextual et la barre de titre du panneau.

Si le focus est sur le menu contextual, appuyez à nouveau sur la touche Tab pour le déplacer vers les autres contrôles du panneau. Appuyez à nouveau sur la touche Tab pour ramener le focus vers le menu contextual du panneau.

Lorsque le menu contextuel reçoit le focus, appuyez sur la touche Entrée (Windows uniquement) pour afficher les éléments du menu contextuel.

• Dans des panneaux groupés, vous pouvez utiliser les flèches vers le haut et vers le bas pour déplacer le focus entre les menus contextuels des panneaux du groupe.
• Déplacez le focus vers le contrôle du panneau uniquement si celui-ci est actif. Si un contrôle est grisé (inactif), vous ne pouvez pas lui appliquer de focus.

Pour déplacer le focus de la barre de titre d'un panneau à un menu contextuel d'un panneau, effectuez les opérations suivantes :

• Appuyez sur la touche Tab.
• Appuyez sur la flèche vers la droite. Appuyez sur la flèche vers la gauche ou sur Maj+Tab pour ramener le focus vers la barre de titre du panneau. Si le panneau est dans un groupe, appuyez sur la flèche vers le haut pour déplacer le focus vers le menu contextuel du panneau immédiatement supérieur à celui recevant le focus actuel. Appuyez sur la flèche vers le bas pour déplacer le focus vers le menu contextuel du panneau immédiatement inférieur à celui recevant le focus actuel.

Pour déplacer le focus vers les éléments d'un menu contextuel de panneau :

1. Le focus appliqué au menu contextuel du panneau, appuyez sur la barre d'espace pour afficher les éléments du menu contextuel.
2. Appuyez sur la flèche vers le bas pour faire défiler les éléments du menu contextuel.
3. Appuyez sur Entrée (Windows) ou Retour (Macintosh) pour activer l'objet du menu contextuel sélectionné.

Pour déplacer le focus vers les contrôles d'un panneau :

1. Appuyez sur la touche Tab lorsque le focus est appliqué au menu contextuel du panneau. Appuyez de façon répétitive sur la touche Tab afin de déplacer le focus vers les contrôles du panneau.
2. Appuyez sur Entrée (Windows uniquement) pour activer le contrôle sélectionné.

Parcourir les contrôles de la boite de dialogue à l'aide de raccourcis clavier (windows uniquement)

Sous Windows, vous pouvez utiliser les raccourcis clavier pour parcourir les contrôles des boîtes de dialogue. Passez d'un contrôle à l'autre, appliquez des contrôles ou annulez et sortez de la boîte de dialogue.

• Appuyez sur la touche Tab pour passer d'un contrôle à l'autre dans la boîte de dialogue. Pour parcourir les contrôles d'une section d'une boîte de dialogue, appuyez sur les flèches vers le haut et vers le bas. Par exemple, dans la boîte de dialogue Configuration de la vérification orthographique, appuyez sur les flèches vers le haut et vers le bas pour parcourir les contrôles de la section Options de document. Lorsque le focus est appliqué à un bouton de contrôle d'une boîte de dialogue (OK, Annuler ou Appliquer), appuyez sur Entrée pour activer le bouton (cette action revient à cliquer sur le bouton). Lorsque le focus n'est appliqué à aucun bouton (OK, Annuler ou Appliquer), appuyez sur Entrée pour appliquer les paramètres actuels et fermer la boîte de dialogue (cette action revient à cliquer sur OK).
• Appuyez sur Échap pour fermer la boîte de dialogue sans appliquer les changements (cette action revient à cliquer sur Annuler). Lorsque le focus est appliqué au bouton Aide, appuyez sur Entrée ou sur la barre d'espace pour afficher le contenu de l'aide pour cette boîte de dialogue (cette action revient à cliquer sur Aide).

Sélection de la scène ou d'objets de la scène à l'aide de raccourcis clavier

Vous pouvez sélectionner la scène ou un objet de la scène à l'aide des raccourcis clavier. Utiliser un raccourci clavier pour sélectionner la scène revient à cliquer sur la scène. Tout autre élément sélectionné est désélectionné lorsque la scène est sélectionnée.

Une fois que la scène est sélectionnée, vous pouvez utiliser la touche Tab pour passer simultanément d'un objet à l'autre sur tous les calques. Vous pouvez sélectionner des occurrences (symboles graphiques, boutons, clips vidéo, bitmaps, vidéos ou sons), des groupes ou des boîtes de texte. Vous ne pouvez pas sélectionner de formes (ex. : des rectangles) à moins qu'elles soient des occurrences de symboles. Vous ne pouvez pas sélectionner plus d'un objet à la fois avec un raccourci clavier. Les objets sont sélectionnés sur la scène à l'aide des critères suivants:

Si un objet est sélectionné, le raccourci Maj+Tab permet de sélectionner l'objet précédent. - Appuyez sur Tab une première fois pour sélectionner le premier objet créé sur l'image active dans le calque actif. Lorsque le dernier objet du calque principal est sélectionné, appuyez sur Tab pour passer au calque inférieur et y sélectionner le premier objet, et ainsi de suite. Lorsque le dernier objet du dernier calque est sélectionné, appuyez sur Tab pour passer à l'image suivante et sélectionner le premier objet sur le calque principal. - Les objets masqués ou verrouillés ne peuvent pas être sélectionnés avec la touche Tab.

Si vous entrez du texte dans une zone de texte, vous ne pouvez pas sélectionner d'objet à l'aide du focus clavier. Vous devez d'abord placer le focus sur la scène puis sélectionner un objet.

Pour sélectionner la scène :

• Appuyez sur Ctrl+Alt+Origine (Windows) ou Commande+Option+Origine (Macintosh).

Pour sélectionner un objet de la scène :

Sélectionnez la scène, puis appuyez sur la touche Tab.

Navigation dans les contrôles d'arborescence à l'aide des raccourcis clavier

Vous pouvez parcourir les arborescences, affichage hiérarchique des structures de fichiers dans certains panneaux Flash, à l'aide de raccourcis clavier. Vous pouvez développer et réduire les dossiers du contrôle d'arborescence et passer du dossier parent au dossier enfant et inversement.

Pour développer un dossier réduit, sélectionnez-le et appuyez sur la flèche vers la droite. Pour réduire un dossier développé, sélectionnez-le et appuyez sur la flèche vers la gauche. Pour aller au dossier parent d'un dossier développé, appuyez sur la flèche vers la gauche. Pour aller au dossier infant d'un dossier développé, appuyez sur la flèche vers la droite.

Utilisation des éléments de la bibliothèque à l'aide des raccourcis clavier

Vous pouvez couper, copier et coller des éléments de la bibliothèque à l'aide de raccourcis clavier. Vous pouvez couper ou copier un élément de la bibliothèque et le coller dans la scène ou dans une autre bibliothèque. Vous pouvez également coller un dossier dans une autre bibliothèque. Si vous collez un dossier, chaque élément du dossier est inclus.

Utilisez des raccourcis clavier pour sélectionner un élément de la bibliothèque. Pour plus d'informations, consultez la section Navigation dans les contrôle d'arborescence à l'aide des raccourcis clavier, page 116.

Les éléments sont coupés, copiés et collés d'après les critères suivants :

• Vous pouvez couper ou copier un ou plusieurs éléments.
• Vous ne pouvez pas coller de forme dans la bibliothèque à partir de la scène.
• Vous ne pouvez pas coller d'élément de la bibliothèque dans une bibliothèque commune car ces dernières ne peuvent être modifiées. Cependant, vous pouvez créer une nouvelle bibliothèque commune. Pour plus d'informations, consultez « Utilisation des bibliothèques communes » dans le guide Utilisation de Flash de l'aide.

Lorsque vous collez un élément d'une bibliothèque dans la scène, cet élément est centré. Pour coller un élément d'une bibliothèque dans un dossier de la bibliothèque de destination, cliquez sur le dossier avant de le coller. - Vous pouvez coller un élément d'une bibliothèque vers un emplacement différent de la même bibliothèque d'origine. Si vous essayez de coller un élément d'une bibliothèque dans un emplacement contenant un autre élément du même nom, vous pouvez désirer de le remplacer ou non.

Pour couper, copier et coller des éléments d'une bibliothèque à l'aide de raccourcis clavier :

Pour copier ou coller un élément sélectionné, appuyez sur les touches Ctrl+X (Windows) ou Commande+X (Macintosh) pour le couper, ou Ctrl+C (Windows) ou Commande+C (Macintosh) pour le copier. Pour coller un élément coupé ou copié, cliquez sur la scène ou dans une autre bibliothèque pour définir le point d'insertion. Appuyez ensuite sur Ctrl+V (Windows) ou Commande+V (Macintosh) pour le coller au centre de la scène. Appuyez sur Ctrl+Maj+C (Windows) ou Commande+Maj+C (Macintosh) pour le coller à son emplacement original.

Notions de base de fireworks

Pour tirer le meilleur parti de votre logiciel Fireworks, vous devez comprendre les éléments de base de l'espace de travail Fireworks. Cette section vous donne un aperçu des fichiers Fireworks et vous présente les éléments de l'espace de travail les plus importantes et les plus couramment utilisés.

Lorsque vous installez Fireworks 8, vous obtenez une version du produit multilingue. Pour obtenir la liste des langues incluses, ainsi que des instructions sur le changement de langue, consultez www.macromedia.com/go/b6a0f908.

Cette section contient les rubriques suivantes :

A propos des fichiers Fireworks, page 118 Familiarisation avec l'espace de travail Fireworks, page 118

Fireworks vous permet de travailler avec divers types de fichiers. Par exemple, vous pouvez commencer avec un fichier PNG, puis l'enregistrer au format JPEG ou GIF. Vous pouvez créer des fichiers HTML contenant du code JavaScript. Vous pouvez également exporter ou enregistrer une image sous un format de fichier spécifique à une autre application, telle que Photoshop ou Macromedia Flash, si vous voulez continuer à travailler dans cette application.

Voici les types de fichiers les plus couramment utilisés dans Fireworks :

PNG (Portable Network Graphic) est le format de fichier natif de Fireworks. Le format PNG est un format de fichier graphique Web polyvalent pouvant prendre en charge les couleurs 32 bits, inclure une transparence ou une couche alpha et rendre des images progressives.

GIF (Graphics Interchange Format) est un format graphique Web très utilisé pour les dessins animés, les logos, les graphiques comptant des zones transparentes et les animations. Il contient un maximum de 256 couleurs.

JPEG a été développé par le Joint Photographic Experts Group pour les besoins spécifiques des images photographiques ou comptant un nombre très élevé de couleurs. Le format JPEG est idéal pour des photographies numériques ou numérisées, des images comptant des textures ou des dégradés, ou toute autre image nécessitant plus de 256 couleurs.

Pour plus d'informations sur les autres types de fichiers dans Fireworks, voir « Sélection d'un type de fichier » dans le manuel Utilisation de Fireworks.

Familiarisation avec l'espace de travail fireworks

Lorsque vous ouvrez pour la première fois un document dans Fireworks, l'environnement de travail est activé, y compris le panneau Outils, l'inspecteur des propriétés, les menus et d'autres panneaux.

Le panneau Outils, à gauche de l'écran, contient des catégories étiquetées, incluant les groupes d'outils bitmap, vectoriels et Web. L'inspecteur des propriétés s'affiche au bas du document en présentant initialement les propriétés du document; les propriétés changent lorsque vous sélectionnez un nouvel outil ou un objet dans le document. Les panneaux sont initialement ancrés en groupes le long du bord droit de l'écran.

Utilisation du panneau outils

Le panneau Outils se divise en six catégories : Sélection, Bitmap, Vecteur, Web, Couleurs et Affichage.

Les ordinateurs affichent des graphiques au format vectoriel ou bitmap. Comprendre la différence entre les deux formats vous aide à comprendre Fireworks, qui contient des outils vectoriels et bitmap et qui est capable d'ouvrir ou d'importer les deux formats.

Les graphiques bitmap sont composés de points, appelés pixels, organisés dans une grille. Lorsque vous modifiez un graphique bitmap, vous modifiez des pixels et non des lignes et des courbes. Les graphiques bitmap dépendent de la résolution, ce qui signifie que les données dérivant l'image sont conditionnées par une grille de taille spécifique.

L'agrandissement d'un graphique bitmap modifie la distribution des pixels dans la grille et produit souvent une image aux bords dentelés.

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. Lorsque vous modifiez un graphique vectoriel, vous modifierez 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 graphique vectoriel et l'afficher sur des écrans de diverses résolutions, sans affecter la qualité de son aspect.

Vous pouvez vous exercer à utiliser les outils vectoriels et bitmap sur un document vierge dans Fireworks afin de voir la différence entre les deux formats.

Modification des options des outils

Lorsque vous sélectionnez un outil, l'Inspecteur des propriétés affiche les options de l'outil. Certaines options restent affichées lorsque vous travaillez avec l'outil. Pour d'autres outils, tels que les outils des formes de base, la Plume et la Ligne, l'Inspecteur des propriétés affiche les propriétés des objets sélectionnés. Pour plus d'informations sur l'Inspecteur des propriétés, voir « Utilisation de l'Inspecteur des propriétés » dans l'Aide de Fireworks.

Pour afficher, dans l'inspecteur des propriétés, les options d'un outil que vous êtes déjà en train d'utiliser :

• Cliquez sur Sélection > Désélectionner pour désélectionner tous les objets.

Pour plus d'informations sur des options d'outils spécifiques, voir les sections qui doivent les différences outils dans Utilisation 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 de formes de base, qui inclut les outils Rectangle arrondi, Ellipse et Polygone, ainsi que tous les outils de formes intelligentes figurant sous la ligne de séparation.

Pour sélectionner un autre outil dans un groupe d'outils :

1. Cliquez sur l'icône de l'outil et maintenez enfoncé le bouton de la souris.

Un menu contextuel s'affiche avec les icônes des outils, le nom des outils et les touches de raccourci. L'outil actuellement sélectionné possède une coche à gauche de son nom.

1. Faites glisser le pointeur afin de sélectionner l'outil souhaité et relâchez le bouton de la souris.

L'outil s'affiche dans le panneau Outils, et les options de l'outil dans l'Inspecteur des propriétés.

Utilisation de l'inspecteur des propriétés

L'Inspecteur des propriétés vous permet de modifier les propriétés de la sélection, de l'outil ou du document en cours. Par défaut, l'Inspecteur des propriétés est ancré au bas de l'espace de travail.

La fenêtre de l'Inspecteur des propriétés peut s'afficher à mi-hauteur, représentant deux lignes de propriétés, ou quatre en pleine hauteur. Vous pouvez également masquer totalement l'Inspecteur des propriétés tout en le laissant dans l'espace de travail.

Dans le manuel Utilisation de Fireworks, la plupart des procédures partent du principe que la fenêtre de l'Inspecteur des propriétés est affichée en pleine hauteur.

Pour annuler l'ancrage de l'inspecteur des propriétés :

• Faites glisser la poignée du coin supérieur gauche vers un autre endroit de l'espace de travail.

Pour ancrer l'inspecteur des propriétés au bas de l'espace de travail (windows uniquement):

• Faites glisser la barre latérale de l'Inspecteur des propriétés en bas de l'écran.

Pour agrandir la fenêtre mi-hauteur de l'inspecteur des propriétés en pleine hauteur afin d'afficher des options supplémentaires :

• Cliquez sur la flèche d'extension située dans le coin inférieur droit de l'Inspecteur des propriétés.
• Cliquez sur l'icône en haut à droite de l'Inspecteur des propriétés, puis dans le menu Options de l'Inspecteur des propriétés, cliquez sur Pleine hauteur.

Sous Windows, le menu Options est disponible uniquement lorsque l'inspecteur des propriétés est ancré.

Pour réduire la taille d'affichage de l'inspecteur des propriétés à mi-hauteur :

• Cliquez sur la flèche d'extension située dans le coin inférieur droit de l'Inspecteur des propriétés.
• Dans le menu Options de l'Inspecteur des propriétés, cliquez sur Demi-hauteur.

Remarque

Sous Windows, le menu Options est disponible uniquement lorsque l'Inspecteur des propriétés est ancré.

Pour réduire l'inspecteur des propriétés lorsqu'il est ancré :

• Cliquez sur la flèche d'extension ou sur le titre de l'Inspecteur des propriétés.
• Dans le menu Options de l'Inspecteur des propriétés ancre, cliquez sur Réduire le groupe de panneaux.

Pour plus d'informations sur des options spécifiques de l'Inspecteur des propriétés, voir les sections appropriées du manuel Utilisation de Fireworks.

Utilisation des panneaux

Les panneaux permettent de modifier l'aspect d'un objet sélectionné ou d'éléments du document. Ils permettent de travailler sur des images, des calques, des symboles, etc. Il est possible de faire glisser les panneaux de façon à les regrouper en fonction de vos préférences.

Certains panneaux ne s'affichent pas par défaut mais vous pouvez les afficher si vous le souhaitez. Certains panneaux ne sont pas groupés avec d'autres panneaux par défaut mais vous pouvez les grouper si vous le souhaitez. Lorsque vous regroupez des panneaux, tous les noms du groupe de panneaux s'affichent dans la barre de titre du groupe de panneaux. Vous pouvez toutefois renommer les groupes de panneaux comme bon vous semble.

Le panneau Optimiser vous permet de gérer les paramètres qui contrôlent la taille et le type de fichier, de travailler avec la palette des couleurs du fichier ou de la découpe à exporter.

Le panneau Calques vous permet d'organiser la structure d'un document et compte des options de création, de suppression et de manipulation des calques.

Le panneau Images inclut des options de création d'animations.

Le panneau Historique répertorie les commandes que vous avez utilisées récemment de façon à vous permettre de les annuler et de les rétablir rapidement. En outre, vous pouvez sélectionner 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 ou répéter plusieurs actions » dans le manuel Utilisation de Fireworks.

Le panneau Formes contient les formes automatiques qui ne s'affichent pas dans le panneau Outils.

Le panneau Styles vous permet de stocker et de réutiliser des combinaisons de caractéristiques d'objets ou de sélectionner un style stocké.

Le panneau Bibliothèque comporte des symboles de graphique, de bouton 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 uniquement le symbole.

Le panneau URL vous permet de créer des bibliothèques contenant des URL liéesment utilisées.

Le panneau Mélangeur (Fenêtre > Mélangeur) vous permet de créer de nouvelles couleurs que vous pouvez ensuite ajouter à la palette de couleurs du document actif ou appliquer à des objets sélectionnés.

Le panneau Nuanciers (Fenêtre > Nuanciers) gère la palette de couleurs du document actif.

Le panneau Info (Fenêtre > Info) fournit des informations sur les dimensions des objets sélectionnés et les coordonnées exactes du pointeur au cours de son déplacement dans le document.

Le panneau Comportements (Fenêtre > Comportements) gère les comportements qui déterminent ce qui se produit lorsque des références ou des découvertes réagissent aux déplacements de la souris.

Le panneau Rechercheur (Fenêtre > Rechercheur) 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 panneau Aligner (Fenêtre > Aligner) contient les commandes d'alignement et de distribution des objets dans le document.

Une coche à côté du nom d'un panneau dans le menu Fenêtre indique que le panneau est ouvert.

Le panneau Propriétés de forme automatique (Fenêtre > Propriétés de forme automatique) vous permet de définir les propriétés de formes automatiques.

Le panneau Modification d'image (Fenêtre > Modification d'image) regroupe en un seul endroit les outils les plus fréquemment utilisés pour la retouche de photos.

Le panneau Caractères spéciaux (Fenêtre > Caractères spéciaux) vous permet d'insérer des caractères spéciaux dans votre texte directement dans Fireworks, au lieu de devoir les copier et les coller au départ d'une autre source.

Organisation des panneaux et des groupes de panneaux

Par défaut, certains panneaux Fireworks sont ancrés dans la partie droite de l'espace de travail. Certains panneaux sont organisés en groupes de panneaux. D'autres panneaux ne sont pas affichés initialement mais vous pouvez les ouvrir depuis le menu Fenêtre. 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 ouvrir un panneau fermé :

Dans le menu Fenêtre, cliquez sur le nom du panneau.

Pour fermer un panneau, executez l'une des actions suivantes :

Dans le menu Fenêtre, cliquez sur le nom du panneau. Lorsque le panneau n'est pas ancré, cliquez sur le bouton Fermer dans la barre de titre du panneau.

Pour annuler l'ancrage ou déplacer un groupe de panneaux :

• Faites glisser la poignée du coin supérieur gauche du panneau et déplacez-la hors de la zone d'ancrage des panneaux dans la partie droite de l'écran.

Pour ancrer un groupe de panneaux :

• 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.

Cliquez sur le titre du groupe de panneaux ou du panneau.

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 annuler l'ancrage d'un panneau dans un groupe de panneaux :

• Dans le menu Options de la barre de titre du groupe de panneaux, cliquez sur Grouper avec > Nouveau groupe de panneaux (Le nom de la commande Grouper avec change en fonction du nom du panneau actif). Le panneau s'affiche dans un nouveau groupe de panneaux distinct.

Pour ancrer un panneau dans un groupe de panneaux :

• Cliquez sur le nom d'un groupe de panneaux dans le sous-menu Grouper avec du menu Options du groupe de panneaux (Le nom de la commande Grouper avec change en fonction du nom du panneau actif).

Pour renommer un groupe de panneaux :

1. Cliquez sur l'icône située en haut à droite du groupe de panneaux, puis sur Renommer le groupe de panneaux dans le menu Options.
2. Entrez le nouveau nom.

Pour rétablir les positions par défaut des panneaux correspondant à votre résolution d'écran, exécutez l'une des actions suivantes :

Cliquez sur Fenêtre > Dispositions d'espace de travail > 1024 x 768. Cliquez sur Fenêtre > Dispositions d'espace de travail > 1280 x 1024

Pour masquer tous les panneaux et l'Inspecteur des propriétés :

• Cliquez sur Fenêtre > Masquer les panneaux. Pour afficher des panneaux masqués, cliquez de nouveau sur Fenêtre > Masquer les panneaux.

Les panneaux qui sont masqués lorsque vous cliquez sur Masquer les panneaux restent masqués lorsque vous désactivez cette commande.

Bouton exportation rapide

Le bouton Exportation rapide vous permet d'exporter vos fichiers Fireworks vers diverses applications Macromedia, telles que Dreamweaver, Flash, Director et Macromedia FreeHand MX. Vous pouvez en outre exporter vos fichiers vers Photoshop, FrontPage, Adobe GoLive et Illustrator, ou en afficher un aperçu dans le navigateur de votre choix.

Navigation et affichage d'un document

Vous pouvez contrôler le zoom du document, le nombre de fenêtres et le mode d'affichage. En outre, vous pouvez facilement afficher une vue panoramique d'un document, ce qui est particulièrement utile lorsque, après avoir effectué un zoom avant, vous ne pouvez plus voir l'ensemble du document.

Lorsque l'affichage de votre document est en mode plein écran dans Windows, vous pouvez facilement passer d'un document ouvert à un autre à l'aide des onglets figurant dans le haut de la fenêtre du document. Le nom de fichier de chaque document ouvert s'inscrit sur un onglet.

Notions de base de contribution

Pour tirer le meilleur parti de votre logiciel Contribute, vous devez comprendre les éléments de base de l'espace de travail Contribute. Cette section vous présente les éléments de l'espace de travail les plus importants et les plus couramment utilisés.

Familiarisation avec l'espace de travail contribute

L'espace de travail Contribute comporte trois zones principales. La plus grande zone correspond au navigateur/éditeur Contribute. Vous pouvez passer de la navigation à l'édition et vice versa lorsque vous travaillez dans Contribute.

Repérage des différentes parties de l'espace de travail contribute

Les trois zones principales de l'espace de travail Contribute sont le navigateur/éditeur Contribute, la barre d'outils et le panneau de navigation.

Le navigateur/éditeur contribute

Vous utilisez la fenêtre principale dans Contribute pour la navigation et la modification. Si vous ne savez pas si vous êtes en train de naviguer ou de faire des modifications dans Contribute, consultez la barre d'outils. Les barres d'outils sont différentes selon que vous naviguez ou que vous éditez un brouillon (consultez Les barres d'outils Contribute, page 131).

Lorsque vous utilisez le navigateur Contribute, vous pouvez naviguer dans n'importe quelle page Web, pas seulement dans des pages de votre site Web. Le navigateur Contribute fonctionne comme un véritable navigateur Web : vous pouvez cliquer sur les liens figurant dans les pages Web pour naviguer vers la page que vous souhaitez modifier. Vous pouvez également créer des favors des pages que vous consultez fraisment.

Lorsque vous utilisez l'éditeur Contribute, vous pouvez modifier des pages dans des sites Web auxquels vous êtes connecté (consultez Connexion à un site Web, page 17). Vous pouvez modifier du texte, des images, des tableaux, des liens et même des pages comportant des images. Vous pouvez alors publier vos changements pour que la page Web actualisée s'affiche sur votre site Web.

Vous pouvez naviguer et effectuer des modifications dans Contribute, puis passer de la navigation à l'édition et inversement. Pour plus d'informations, voir Basculement entre les modes navigation et modification, page 135.

Les barres d'outils contribute

Selon le mode qui est actif, navigation ou modification, le contenu de la barre d'outils de Contribute change. En mode modification, la barre d'outils de l'éditeur permet de modifier le texte ou les images, selon le contenu sélectionné.

Selon le rôle qui vous a été affecté par l'administrateur Contribute, certains boutons peuvent ne pas être disponibles.

Les boutons de la barre d'outils du navigateur permettent de parcourir votre site Web ou de créer une nouvelle page.

Les boutons de la barre d'outils de l'éditeur permettent d'effectuer les opérations courantes à partir des menus Fichier, Insertion, Format et Tableau.

Les boutons de la barre d'outils de mise en forme de texte permettent de mettre le texte en forme.

Remarques

Si l'administrateur Contribute a limité la modification au texte seul, certaines options de mise en page ne sont pas disponibles. En outre, certaines options peuvent être désactivées lorsqu'une feuille de style en cascade a été appliquée à une sélection de texte.

Les boutons de la barre d'outils de retouche d'image permettent de modifier les images.

Panneau de navigation de contribute

Le panneau de navigation de Contribute vous permet de basculer entre la navigation et la modification, et d'accéder rapidement à vos brouillons.

Vous pouvez également l'utiliser pour accéder aux procédures nécessaires à l'exécution des tâches dans Contribute.

Le panneau de navigation est composé de deux parties :

Le panneau Pages permet d'accéder au navigateur Web et à tous les brouillons que vous êtes en train de modifier. La Console de brouillons, où est indiqué l'état des brouillons, se trouve également sous forme de lien dans le panneau Pages.

La Console de brouillons n'est pas disponible lorsque aucun administrateur n'est affecté à votre site Web.

Le panneau Comment... fournit les procédures à suivre pour effectuer certaines tâches courantes de Contribute. Lorsque vous naviguez, il affiche la liste des tâches liées à cette activité et, lorsque vous effectuez des modifications, la liste des tâches liées à la modification.

Dans le panneau Comment... du panneau de navigation, vous pouvez cliquer sur un lien pour obtenir plus d'informations sur cette tâche. Si la tâche que vous recherchez ne se trouve pas dans la liste, consultez le guide Utilisation de Contribute (Aide > Aide de Macromedia Contribute) pour obtenir des informations détaillées.

Pour plus d'informations sur l'utilisation des ressources de Contribute et obtenir de l'aide, voir la section Ressources de Contribute, page 12.

Vous pouvez agrandir, réduire ou redimensionner les différentes parties du panneau de navigation.

Pour agrandir ou réduire le panneau de navigation, précédez de l'une des manières suivantes:

Choisissez Affichage > Panneau de navigation. Sous Windows, cliquez sur la flèche de la barre de séparation située entre le panneau de navigation et le navigateur/éditeur de Contribute. - Sur un système Macintosh, double-cliquez sur l'outil main de la barre de séparation située entre le panneau de navigation et le navigateur/éditeur de Contribute.

Pour redimensionner le panneau de navigation :

• Faites glisser la barre de séparation entre le panneau de navigation et le navigateur/éditeur de Contribute.

Pour agrandir ou réduire une partie du panneau de navigation :

Double-cliquez sur la barre de titre du panneau.

Pour redimensionner verticalement les différentes parties du panneau de navigation :

Faites glisser la barre de titre du panneau Comment...

Basculement entre les modes navigation et modification

Vous pouvez utiliser Contribute pour parcourir ou modifier des pages Web. À tout moment, vous pouvez basculer entre la navigation et la modification. Lorsque vous quittez un brouillon que vous êtes en train de modifier, Contribute enregistre vos modifications. Ainsi, lorsque vous retournez dans le brouillon ultérieurement, vous pouvez continuer vos modifications là où vous les avez laissées.

Si vous basculez en mode navigation, Contribute ne publie pas votre brouillon. Pendant que vous parcourez la page, la zone de message vous informe de l'existence d'un brouillon non publié pour cette page.

Si vous ignorez dans quel mode vous êtes, navigation ou modification dans Contribute, observez la barre d'outils. En mode navigation, la barre d'outils comporte un bouton Modifier la page (ou Créer une connexion). En mode modification, la barre d'outils de l'éditeur est affichée (voir la section Les barres d'outils Contribute, page 131).

Cliquez sur le bouton Modifier la page de la barre d'outils.

Modifier la page

Ce bouton n'est activé que sur les pages des sites Web auxquels vous êtes connecté et que vous êtes autorisé à modifier.

• Dans le panneau Pages du panneau de navigation, cliquez sur le titre d'un brouillon.

Pour passer du mode modification au mode navigation, procédez de l'une des manières suivantes:

• Dans le panneau Pages du panneau de navigation, cliquez sur Navigateur.

• Cliquez sur le bouton Enregistrer pour plus tard de la barre d'outils.

Choisissez Affichage > Navigateur.

Notions de base de flashpaper

Pour tirer le meilleur parti de votre logiciel FlashPaper, vous devez comprendre les éléments de base de l'espace de travail FlashPaper. Cette section vous présente une vue d'ensemble des fichiers FlashPaper et vous présente les éléments de l'espace de travail les plus importants et les plus couramment utilisés.

La présente section contient les rubriques suivantes :

À propos des fichiers FlashPaper, page 136 Familiarisation avec l'espace de travail FlashPaper, page 137

FlashPaper vous permet de créer des documents Flash (fichiers SWF ou PDF) à partir de n'importe quel type de document imprimable tels que Microsoft Project, Microsoft Visio, et même QuarkXPress et AutoCAD. Les documents Flash sont généralement bien moins volumineux que les autres types de document.

Les fichiers SWF générés par FlashPaper ont le même format que ceux générés par Macromedia Flash.

Lorsque vous imbriquez des documents Flash dans une page Web, vous pouvez les visualiser sur des plates-formes dans tout navigateur préalablement en charge le format Flash. Vous pouvez visualiser des fichiers SWF directement dans Macromedia Flash Player, et afficher des fichiers PDF directement dans Adobe Acrobat Reader.

Familiarisation avec l'espace de travail flashpaper

Lorsque vous créez un document FlashPaper, vous utilisez l'application FlashPaper et travaillez dans l'environnement applicatif. Lorsque vous visualisez un document FlashPaper, vous utilisez Flash Player ou un navigateur Web et travaillez dans l'environnement d'affichage.

L'espace de travail FlashPaper comprend la barre d'outils FlashPaper, qui est la même dans les deux environnements, applicatif et d'affichage. La barre d'outils FlashPaper vous permet de redimensionner un document pour l'afficher, naviguer dans ses pages, sélectionner du texte, effectuer des recherches dans le document et imprimer ce dernier.

Le menu Fichier et le menu Aide ne sont visibles que dans l'environnement applicatif.

Pour imprimer un document :

Cliquez sur l'icône Imprimante.

Pour sélectionner du texte dans le document :

1. Cliquez sur le bouton Sélectionner.
2. Faites glisser pour sélectionner du texte dans la fenêtre du document. Vous pouvez cliquer en maintenant la touche Maj. enfoncée pour sélectionner plusieurs mots ou lignes de texte.
3. Cliquez sur le bouton Panorama pour revenir à l'affichage du document.

Pour effectuer une recherche dans le document :

1. Tapez les mots que vous pouvez rechercher dans le champ de recherche de texte, puis cliquez sur le bouton Rechercher. FlashPaper sélectionne la première occurrence de termes correspondants.
2. Pour rechercher l'occurrence suivante de termes correspondants, cliquez de nouveau sur le bouton Rechercher.

Pour pouvoir utiliser la fonction de recherche, Flash Player 7 doit avoir été installé sur votre ordinateur. Si vous disposez de Flash Player 6 ou d'une version antérieure, vous ne pouvez pas utiliser la fonction de recherche.

Pour redimensionner le document, effectuez l'une des opérations suivantes:

Utilisez le curseur de zoom pour redimensionner de manière dynamique le document. Vous pouvez ajuster la plage de zoom du document de 25% à 250%. La boîte de texte du zoom s'actualise lorsque vous utilisez le CURSEUR. Saisissez un chiffre dans la boîte de texte du zoom pour redimensionner le document en utilisant un grossissement particulier. - Cliquez sur le bouton Ajuster dans la visionneuse pour visualiser l'intégralité de la page dans la visionneuse. - Cliquez sur le bouton Ajuster la largeur pour redimensionner le document de façon à ce que la largeur de la page remplisse la visionneuse.

Saisissez un chiffre dans la boîte de texte Navigation de page pour consulter une page spécifique. - Cliquez sur la flèche Précédent ou sur la flèche Suivant pour passer à la page suivante ou revenir à la page antérieure d'un document. - Faites glisser la boîte de défilement des pages, située sur la droite du document, pour faire défiler les documents à pages multiples.

Pour ouvrir un document dans une fenêtre de nouveau navigateur :

Cliquez sur le bouton Ouvrir dans un nouveau navigateur.

Le bouton Ouvrir dans un nouveau navigateur n'apparaît que dans l'environnement d'affichage FlashPaper (fichiers SWF enregistrés).

Processus de développement web

Ce chapitre présente les différents composants de Macromedia Studio 8, Macromedia Dreamweaver 8, Macromedia Flash 8, Macromedia Fireworks 8, Macromedia Contribute 3 et Macromedia FlashPaper 2, et la façon dont ils forment une suite complète pour offrir un environnement optimal de conception, de développement et de maintenance interactif en ligne, dans le cadre d'un processus de développement Web standard.

Ce chapitre contient les sections suivantes :

Planification de votre site Web 142

Définition de l'environnement de développement 143

Planification de la conception et de la mise en forme de la page.145

Création d'actifs de contenu 148

Assemblage, test et déploiement 151

Gestion et mise à jour de votre site 155

Un processus de développement Web standard présente les étapes suivantes :

Planification du site, incluant la définition de la stratégie ou des objectifs du site, le choix du public visé et la définition des données requises pour le site. Définition de l'environnement de développement, incluant la sélection des serveurs Web et d'applications, la définition d'un site Dreamweaver et la définition des sources de données.

• Planification de la conception et de la mise en forme de la page, incluant l'élaboration de maquettes de vos pages et de vos interfaces d'application à l'aide d'un outil de dessin tel que Fireworks et la mise en forme des pages HTML avec Dreamweaver
• Création d'actifs de contenu, incluant la création d'images, de vidéos, etc., avec Fireworks et Flash
• Création d'actifs d'application, incluant la création de pages et d'applications Internet dynamiques avec Dreamweaver et Flash
• Assemblage, test et déploiement de votre site, incluant le formatage du texte, la compilation de vos actifs, la vérification des conditions d'accessibilité, le test de votre code et la publication de votre site sur un serveur à l'aide de Dreamweaver. La maintenance et l'actualisation de votre site, qui inclut la mise à jour de votre contenu avec Dreamweaver et Contribute.

Studio 8 offre tous les outils nécessaires à la réalisation complète de ce processus. La combinaison de Dreamweaver, Flash, Fireworks, Contribute et FlashPaper vous permet de connaître, de développer et de générer aisément des sites Web et des applications à la fois dans des environnements de code et de conception.

Ce chapitre présente un exemple de processus de développement Web mais ce n'est pas le seul possible. Le processus que vous et votre équipe déciderez d'adopter dépend de vos ressources, de vos habitudes de travail personnelles et des besoins de votre site Web.

Pour plus d'informations sur le processus de développement Web de pages dynamiques, voir Dérroulement de la conception de pages dynamiques dans le chapitre Utilisation de Dreamweaver.

Planification de votre site web

La planification et l'organisation efficace de votre site ne se limite pas à la définition de l'apparence du site et à l'emplacement de ses fichiers. Vous devez tenir compte des objectifs du site et du public visé. En outre, vous devez prendre en considération le plan de navigation de votre site. Une planification minutieuse avant de procéder au développement du site vous permettra de gagner, enormément de temps par la suite.

Définir les objectifs de votre site Interrogez-vous ou interrogez votre client sur le site et notez vos objectifs afin de ne pas vous en éloigner lors de la conception du site. Une liste d'objectifs vous aide à désigner les besoins particuliers de votre site Web. La navigation sur le site, le support utilisé et l'apparence de votre site dépendent de la complexité de vos objectifs. Par exemple, l'apparence d'un site Web dédié aux informations archéologiques et sa navigation seront très différentes de celles d'un site dédié à la vente d'appareils électroménagers.

Déterminer le public visé Cette étape peut ne pas sembler nécessaire puisque vous souhaiteriez que tout le monde visite votre site Web. Néanmoins, il s'est avéré très difficile de créer un tel site Web. Dans le monde entier, les utilisateurs ont recours à différents types de navigateurs, se connectent à différentes vitesses, possèdent ou non des plug-ins et utilisent différents types de périphériques d'affichage de contenu Internet. Tous ces facteurs ayant des répercussions sur l'utilisation de ce site, il est essentiel de déterminer le public cible lors de la phase initiale de la planification.

Conception du plan de navigation du site Le plan de navigation du site est une comparaison à une carte des liaisons de vos pages Web. Plus particulièrement, il indique comment les utilisateurs naviguent sur votre site lorsqu'ils cliquent sur les liens et interagissent avec les interfaces d'applications. Après avoir établi ce schéma de la navigation sur votre site, vous pouvez partager l'avant-projet à votre client ou aux membres de votre groupe.

Définition de l'environnement de développement

Que vous développiez votre projet seul ou en équipe, vous devez définir un environnement de développement avant d'utiliser Studio pour créer votre site Web.

À la base, votre environnement de développement consiste en un serveur Web et un site Dreamweaver, voire d'un serveur d'application.

Choix d'un serveur Web et installation sur votre ordinateur local ou sur un ordinateur en réseau. Un serveur Web est un logiciel qui transmet des fichiers en réponse à des requêtes de navigateurs Web. Lorsque le serveur Web reçoit une requête pour une page HTML statique, le serveur lit la requête, recherche la page et l'envoie au navigateur ayant formulé la requête. Les serveurs Web les plus courants sont IIS (Microsoft Internet Information Server), Netscape Enterprise Server, Sun ONE Web Server et Apache HTTP Server. ColdFusion est doté de son propre serveur Web. Nous vous recommandons d'utiliser ce serveur uniquement dans le cadre d'opérations de développement.

Une fois que votre serveur Web fonctionne correctement, créez un dossier racine pour votre application sur l'ordinateur exécutant le serveur Web. Vérifiez que le dossier est publié par le serveur Web, c'est-à-dire que le serveur Web peut transmettre tous les fichiers contenus dans ce dossier ou chacun de ses sous-dossiers en réponse à une requête HTTP d'un navigateur Web.

Par exemple, sur un ordinateur exécutant Personal Web Server (PWS) ou IIS, vous nevez vous assurer que tous les fichiers du dossier Inetpub/wwwroot et de chacun de ses sous-dossiers peuvent être transmis à un navigateur Web. Si vous utilisez le serveur Web de ColdFusion pour des opérations de développement, tous les fichiers contenus dans le dossier CFusionMX/wwwroot ou dans chacun de ses sous-dossiers peuvent être transmis à un navigateur Web.

Remarque

Pour exécuter des applications Web, vous devez également installer un serveur d'application qui fonctionnera avec votre serveur Web. Un serveur d'application est un logiciel qui aide le serveur Web à traiter les pages dynamiques avant qu'il ne les envoie aux navigateurs demandeurs. Pour plus d'informations, voir Configuration d'un serveur d'application dans le chapitre Utilisation de Dreamweaver.

Définir votre site dans Dreamweaver Dans Dreamweaver, le terme site peut se rapporter aussi bien à un site Web qu'au dossier local dans lequel sont conservés tous les documents apparentant à un site Web. Vous devez définir un tel emplacement avant de créer votre site.

Un site Dreamweaver organise tous les documents associés à votre site Web et vous permet de suivre et de générer les liens, de générer les fichiers, de partager les fichiers et de copier les fichiers de votre site sur un serveur Web. La méthode la plus fiable de création d'un site Web à l'aide de Dreamweaver consiste à créer et modifier des pages sur votre disque local, puis à charger les copies des fichiers du site vers un serveur Web distant afin de les mettre à la disposition d'autres utilisateurs.

Lorsque vous créez votre site, si vous travailliez en équipe, envisagez d'utiliser la fonction archivage et extraction de façon à archiver et à extraire des fichiers vers et depuis des serveurs locaux et distants.

Didacticiel associé

• Chapitre 4, Didacticiel : Configuration de votre site et des fichiers de projet, page 159

Planification de la conception et de la mise en forme de la page

La plupart des projets de conception Web naissent de storyboards ou d'organigrammes convertis en exemples de pages par les concepteurs ou les développeurs. Vous pouvez utiliser Studio 8 pour créer des exemples de page au fur et à mesure que vous progressez dans la conception. Une fois que vous avez un aperçu de l'apparence que vous pouvez donner à vos pages, vous pouvez commencer à planifier leur mise en forme dans Dreamweaver.

Créer des maquettes de pages pour déterminer l'apparence de votre site

La planification préalable de la conception et de la mise en forme de vos pages Web permet de gagner un temps considérable lors du processus de développement. Il est essentiel de vérifier la cohérence de la conception et de la mise en forme de vos pages. Donnez aux pages Web du site une appearance similaire, un même modèle de couleurs, une même navigation, etc. Cette approche cohérente permet d'orienter vos utilisateurs et de les faire ainsi bénéficier d'une meilleure expérience.

Vous pouvez utiliser Fireworks ou Flash pour créer une maquette des pages principales de votre site Web. Les maquettes des pages représentent en général la conception de la mise en forme, les composants techniques, les motifs et la couleur, ainsi que les images graphiques ou d'autres types d'éléments.

Par exemple, il faut tenir compte du schéma suivant :

Une maquette dans Fireworks peut ressembler à ceci :

Une fois la création d'une maquette dans Fireworks terminée, vous pouvez l'exporter sous la forme d'un fichier Flash SWF. Notre travail peut ensuite être affiché par tout ordinateur exécutant Flash Player.

Didacticiel associé

Chapitre 5, Didacticiel: Création de maquettes de page, page 167

Déception de mises en forme de pages dans dreamweaver

La mise en forme est l'un des aspects les plus importants de la conception Web. La mise en forme d'une page détermine la manière dont votre page s'affichera dans le navigateur, par exemple où seront placés les menus, les images et le contenu Flash. Dreamweaver propose différentes façons de créer et de contrôler la mise en forme de vos pages Web.

Une méthode courante pour créer une mise en forme est de positionner les éléments en utilisant des tableaux HTML. Un tableau comprend au moins une ligne ; chaque ligne comporte au moins une cellule. Les tableaux sont très utiles pour présenter des données tabulaires et mettre en forme du texte et des images dans une page Web.

La mise en forme d'une page créée dans Dreamweaver à l'aide de tableaux peut ressembler à ceci :

Pour permettre la mise en forme des pages dans Dreamweaver, vous pouvez également placer des éléments à l'aide des feuilles de style en cascade (CSS). Cette méthode est de plus en plus utilisée car elle offre un meilleur contrôle et une plus grande flexibilité que les tableaux. Si vous savez correctement vous servir des feuilles de style en cascade (CSS), vous pouvez utiliser les balises <div> pour créer des blocs de mise en forme de CSS, puis placer ces blocs sur la page à l'aide des styles.

Didacticiel associé

• Chapitre 6, Didacticiel: Création d'une mise en forme de page basée sur un tableau, page 189

Création d'actifs de contenu

Une fois que vous savez à quoi va ressembler votre site, vous pouvez créer et regrouper les actifs dont vous aurez besoin pour votre site Web. Les actifs peuvent être des éléments tels que des images (notamment des boutons, des bannières, des logos, des photos, etc.), du texte, des animations Flash ou autres médias.

Travail sur des graphiques et des photos

Vous pouvez utiliser Fireworks pour créer des graphiques et tracer des photos destinés à votre site Web. Tout élément contenu dans Fireworks est entièrement modifiable, à tout moment.

Fireworks dispose d'outils de modification de bitmap, ainsi que d'outils de modification vectorielle. Grâce à Fireworks, vous pouvez améliorer vos graphiques en appliquant des biseaux, des estampes, des ombres portées, des effets néon ou autres aux objets vectoriels, aux bitmaps et aux/textes. Fireworks généralement du code JavaScript, ce qui facilite considérablement la création de survols, de boutons et de menus contextuels. En outre, ses fonctions d'optimisation réduisent la taille des fichiers graphiques Web sans sacrifier la qualité. Fireworks vous facilite le travail des images en intégrant le traitement par mots et des outils de retouche des photos, notamment la suppression de l'œil rouge.

Par exemple, vous pourriez créer la bannière suivante dans Fireworks :

Fireworks s'intègre aux autres produits Studio pour vous permettre d'optimiser votre travail. Une fois que vous avez inclus vos images dans votre site, vous pouvez les ouvrir, les modifier et travailler dans Fireworks sans jamais quitter l'espace de travail de Dreamweaver ou de Flash.

Didacticiels associés

Chapitre 7, Didactiel: Traitement des photographies, page 211 Chapitre 8, Didacticiel: Création d'une bannière de page, page 223

Création de contenu et de vidéo flash

Votre contenu Flash peut comprendre des graphiques, du texte, des effets animés et des applications destinés aux sites Web. Les contenus Flash sont principalement composés de graphiques vectoriels mais peuvent également contenir des graphiques bitmap, de la vidéo et du son. Etant donné que le contenu Flash utilise des graphiques vectoriels compacts, il se télécharge rapidement et s'adapte à la taille de l'écran de l'utilisateur.

Flash vous permet d'animer des objets pour donner une impression de mouvement sur la scène et pour en modifier la forme, la taille, la couleur, l'opacité, la rotation et d'autres propriétés. Vous pouvez créer une animation image par image dans laquelle vous désignez une image distincte pour chaque plan. Vous pouvez aussi créer une animation par interpolation dans laquelle vous définissez la première et la dernière image et laissez Flash créer les images intermédiaires.

Vous pouvez utiliser Flash pour inclure une vidéo dans une page Web dans un format que presque tous les utilisateurs peuvent visualiser. Dans Flash, vous pouvez intégrer en toute transparence des vidéos dans votre site Web, et vous pouvez créer un habillage personnel important des commandes uniques pour votre vidéo. Vous pouvez déterminer la taille et l'aspect de votre vidéo, qui peut être modifiée de manière dynamique en fonction d'une source de données.

Par exemple, c'est ainsi qu'un lecteur vidéo créé dans Flash peut avoir l'apparence d'une page Web :

Flash traite Flash Video simplement comme un autre type de média de sorte que vous pouvez calquer, programmer et commander une réserve comme le feriez avec n'importe quel autre objet dans un fichier SWF.

Didacticiel associé

Chapitre 9, Didacticiel: Création de votre première application Flash, page 245 - Chapitre 10, Didacticiel: Création d'un lecteur vidéo (Flash Professionnel uniquement), page 287

Assemblage, test et déploiement

La dernière phase du processus de développement Web comprend l'assemblage de vos pages, le test et le déploiement de votre site vers un serveur pour le rendre disponible à tous.

Assemblage de votre page web dans dreamweaver

Grâce à Dreamweaver, vous pouvez ajouter facilement plusieurs types de contenu à vos pages Web. Vous pouvez ajouter du texte, des actifs et des éléments de conception, par exemple des images, des couleurs, des animations, du son et d'autres formes de données.

Vous pouvez simplement déplacer des actifs enregistrés vers la page, ou effectuer l'une des opérations suivantes pour créer votre page Web dans Dreamweaver :

Saisir directement du texte dans un document Dreamweaver, ou l'importer à partir d'autres documents, puis mettre en forme ce texte avec des styles de CSS. - Insérer des images, y compris des images pour les survols, des cartes-image et des découvertes pour Fireworks. - Insérer d'autres types de ressources dans une page Web, comme des animations Flash, Shockwave ou QuickTime, du son, des applets et des vidéos. Ecrire votre propre code HTML, JavaScript, CFML, PHP, Visual Basic, C# et CSS. - Créer des liens HTML standard, y compris des liens vers des ancres et des adresses électroniques, ou configurer facilement des systèmes de navigation graphiques, notamment des menus de reroutage et des barres de navigation. - Appliquer du contenu réutilisable dans l'ensemble de votre site en utilisant les modèles et les bibliothèques de Dreamweaver.

Après avoir assemblé votre page, vous pouvez la modifier directement dans l'espace de travail de Dreamweaver. Vous pouvez réaliser un certain nombre de tâches simples de modification d'images, notamment rogner, modifier le contraste, optimiser et accentuer la netteté, sans avoir recours à une application de retouche d'images. Pour des tâches plus complexes, vous pouvez lancer Fireworks pour modifier les images insérées dans un document Dreamweaver.

Vous pouvez également modifier des fichiers Flash en sélectionnant l'espace réservé au contenu Flash dans le document Dreamweaver et en cliquant sur le bouton Modifier de Flash dans l'inspecteur des propriétés. Dreamweaver ouvre le fichier Flash (FLA) et enregistre toutes les modifications que vous y avez apportées dans le fichier SWF.

Didacticiel associé

Chapitre 11, Didacticiel: Ajout de contenu aux pages, page 301 - Chapitre 9, Didacticiel: Création d'une mise en forme de page basée sur CSS, page 153

Test de votre site dans dreamweaver

Avant de charger le site sur un serveur et de le déclarer prêt à être publié, il convient de le tester localement. En fait, il est judicieux de tester et de résoudre les problèmes de votre site fréquemment au cours de son élaboration, afin de traiter les problèmes avant qu'ils ne s'aggravent et de les empêcher de se répéter.

Vous devez assurer que vos pages ont l'apparence et le fonctionnement souhaités dans les navigateurs ciblés, que tous les liens fonctionnent et que les pages ne sont pas trop longues à télécharger. Vous pouvez également tester et dépanner l'ensemble du site en exécutant un rapport de site avant de publier votre site.

Les instructions suivantes vous permettront d'élaborer un site le plus convivial possible pour vos utilisateurs :

• ment dans les autres navigateurs. Vos pages doivent être lisibles et fonctionnelles dans les navigateurs qui ne prennent pas en charge les styles, les calques, les plug-ins ou les éléments JavaScript. Vérifiez que le site ne contient pas de liens rompus (liens qui ne fonctionnent pas) et réparez-les le cas échéant. Les autres sites étant parfois modifiés et réorganisés, il peut arriver que certaines pages vers lesquelles vos liens pointent soient déplacées ou supprimées.
• ent au moins voir ce contenu pendant le téléchargement du tableau. Vérifiez l'intégralité du site pour vous assurer que tous les problèmes ont été résolus, tel que des documents sans nom, des balises vides ou des balises imbriquées redondantes, en exécutant des rapports de site dans Dreamwe. A l'aide de Dreamweaver Validator, vérifiez que votre code ne contient pas d'erreurs de balise ou de syntaxe.
• Vérifiez que votre contenu Flash ne compte pas d'erreurs lorsqu'il est exécuté par Flash Player. Vous pouvez utiliser le débogueur Flash en mode de test sur des fichiers locaux ou l'utiliser pour tester des fichiers sur un serveur Web à un emplacement distant.

Rubriques connexes

• Chapitre 4, Test de votre site, dans le chapitre Utilisation de Dreamweaver
• Chapitre 21, Optimisation et débogage de code, dans le chapitre Utilisation de Dreamweaver

Déploiement de vos fichiers de site vers un serveur avec dreamweaver

Après avoir créé un site Web fonctionnel, vous pouvez utiliser Dreamweaver pour le publier en chargeant les fichiers vers un serveur Web distant.

Avant de poursuivre, vous devez pouvoir accéder à un serveur Web distant (le serveur de votre fournisseur d'accès Internet, un serveur appartenant à un client pour lequel vous travailliez ou un serveur intranet de votre société). Si vous ne pouvez accéder à un serveur de ce type, contactez votre fournisseur d'accès Internet ou votre client.

Didacticiel associé

Chapitre 13, Didacticiel: Publication de votre site, page 359

Gestion et mise à jour de votre site

Une fois la majorité partie du site publiée, vous devez le mettre à jour régulièrement et en assurer la maintenance. La publication d'un site, c'est-à-dire son déploiement vers un serveur et son activation, constitue un processus continu.

Dreamweaver possède de nombreux outils qui vous aideront à gérer votre site, à transférer vos fichiers vers et depuis un serveur distant, à configurer un processus d'archivage/extraction pour empêcher l'écrasement des fichiers et à synchroniser les fichiers sur vos sites locaux et distants.

Vous pouvez également utiliser Contribute pour assurer la maintenance de votre site Web. L'utilisation de Contribute permet à d'autres utilisateurs d'actualiser le contenu du site Web de sorte que celui-ci reste à jour. Contribute dispose de commandes qui vous permettent de limiter les modifications que les utilisateurs peuvent apporter au site Web afin de garantir l'intégrité de ce dernier. Contribute est intégré à Dreamwe weaver de façon à prévenir les risques de conflits lors du processus d'archivage/extraction des fichiers. Vous pouvez également lancer et générer Contribute à partir de Dreamweaver.

Didacticiel associé

• Chapitre 14, Didacticiel: Paramétrage de votre site Web pour les utilisateurs de Contribute, page 367

Définir votre environnement et planifier la conception de vos pages

Dans cette partie, vous commencerez à construire l'exemple de site Internet du Cafe Townsend.

Avant de commencer, vous devez copier les fichiers d'exemple et créer tout projet. Puis, vous utilisez Macromedia Fireworks 8 et Macromedia Dreamweaver 8 pour créer une conception de page Web pour la page d'accueil du Cafe Townsend.

Cette partie du manuel contient les sections suivantes :

Didacticiel : Configuration de votre site et des fichiers de projet 159

Didacticiel : Création de maquettes de page 167

Didacticiel : Création d'une mise en forme de page basée sur un tableau 189

Didacticiel : configuration de votre site et des fichiers de projet

Ce didacticiel va vous présenter le concept d'un site Macromedia Dreamweaver 8 et vous expliquer comment configurer les fichiers de projet pour l'exemple de site Web Cafe Townsend. Dans Dreamweaver, un site se compose généralement de deux parties : un ensemble de fichiers stockés sur un ordinateur local (le site local) et un emplacement situé sur un serveur Web distant vers lequel vous pouvez télécharger ces fichiers afin de les mettre, le moment venu, à la disposition d'autres utilisateurs (le site distant). Vous pouvez utiliser les panneaux Fichiers de Dreamweaver pour afficher et exploiter les fichiers dans votre site.

En général, les personnes créant un site Web à l'aide de Dreamweaver créent et modifient des pages sur leur disque local et en téléchargeant un exemplaire sur un serveur Web afin de permettre leur visualisation sur le Web. Dans ce didacticiel, vous apprendrez uniquement à configurer le site local, de manière à entamer immédiatement la création de pages Web. Par la suite, quand vous aurez terminé le site Web, vous apprendrez à créer un site distant de manière à envoyer vos fichiers sur un serveur Web.

Dans ce didacticiel, vous allez accomplir les tâches suivantes :

Apprenez à utiliser des sites Dreamweaver 160

Configurez vos fichiers de projet 161

Définissez un dossier local 163

Apprenez à utiliser des sites dreamweaver

Dans Dreamweaver, le terme « site » peut se rapporter aussi bien à un site Web qu'à un lieu de stockage local dans lequel sont conservés tous les documents apparentant à un site Web. Vous devez définir un tel emplacement avant de créer votre site. Un site Dreamweaver organise tous les documents associés à votre site Web et vous permet de suivre et de gérer les liens, de gérer et de partager les fichiers, ainsi que de transférer vos fichiers de site vers un serveur Web.

Remarque

Les utilisateurs de Macromedia HomeSite et de ColdFusion Studio peuvent considérer un site Dreamweaver comme un projet HomeSite ou Studio.

Un site Dreamweaver se compose de trois parties, selon votre environnement de travail et le type de site Web en cours de développement :

Le dossier local correspond à votre réseau de travail. Dreamweaver désigne ce dossier comme votre site local. Le dossier local est généralement un dossier qui se trouve sur votre disque dur.

Le dossier distant est le réseau dans lequel sont stockés les fichiers, selon votre environnement, que vous réservez aux évaluations, à la production, à la collaboration et à la publication. Dreamweaver considère ce dossier comme votre site distant. Le dossier distant est un dossier qui se trouve sur l'ordinateur qui fait tourner le serveur Web. Cet ordinateur est souvent (mais pas toujours) celui qui rend votre site disponible au grand public sur le Web.

Le dossier des pages dynamiques (dossier du serveur d'évaluation) est l'emplacement dans lequel Dreamweaver traite les pages dynamiques. Ce dossier est généralement le même que le dossier distant. Ne vous souciez pas de ce dossier, sauf si vous développez une application Web. Pour plus d'informations sur le dossier du serveur d'évaluation, voir Définition du dossier de traitement des pages dynamiques dans Utilisation de Dreamweaver.

Vous pouvez définir un site Dreamweaver à l'aide de l'assistant de définition d'un site, qui vous guide tout au long de la procédure de configuration, ou à l'aide des paramètres avancés de définition du site, qui vous permettent de configurer individuellement des dossiers locaux, distants et d'évaluation, si nécessaire. Dans ce didacticiel, vous allez utiliser les paramètres avancés de la boîte de dialogue de Configuration du site afin de configurer un dossier local pour vos fichiers de projet. Plus loin dans ce manuel, vous apprendrez à configurer un dossier distant de manière à publier vos pages sur un serveur Web et à les rendre accessibles au public.

Pour plus d'informations sur l'utilisation de l'assistant de Configuration du site, voir Configuration d'un nouveau site Dreamweaver dans Utilisation de Dreamweaver.

Pour plus d'informations sur la configuration d'un site distant, voir Chapitre 13, Didacticiel: Publication de votre site.

Pour plus d'informations sur les sites Dreamweaver en général, voir « Configuration d'un site Dreamweaver » dans l'aide Utilisation de Dreamweaver.

Configurez vos fichiers de projet

Lorsque vous créez un site local, vous pouvez placer les actifs existants (images ou autres éléments de contenu) dans le dossier racine du site local (le dossier « principal » du site). Puis, lorsque vous serez disposé à ajouter du contenu à vos pages, les actifs seront à cet endroit, prêts à l'emploi.

Les exemples de fichiers inclus avec Dreamweaver contiennent des actifs pour l'exemple de site à construire avec les didacticiels du guide Bien démarrer avec Dreamweaver. La première étape dans la création d'un site est la copie des exemples de fichiers du dossier de l'application Dreamweaver vers un dossier approprié sur votre disque dur.

1. Créez un nouveau dossier nommé localSites sur votre disque dur.

Par exemple, créez un dossier nommé localsites à l'un des deux

endroits suivants :

Sous Windows :

C:\Documents and Settings\voiture_nom_d'utilisateur\Mes documents\localSites.

Sur Macintosh: DD Macintosh/Users/votre_nom_d'utilisateur/

Documents/localSites.

Sur un Macintosh, votre dossier d'utilisateur contient déjà un dossier intitulé Sites. N'utilisez pas le dossier Sites en tant que dossier local ; le dossier Sites correspond au dossier de stockage des pages que vous souhaitez diffuser lors de l'utilisation du Macintosh comme serveur Web.

1. Recherchez le dossier cafe_townsend sur le disque 2 de Studio 8 ou téléchargez-le depuis www.macromedia.com/go/st/documentation_fr.
2. Copiez le dossier cafe_townsend dans le dossier localSites.

Il s'agit du dossier que vous allez utiliser comme dossier racine (principal) de votre site Dreamweaver.

Présentation des dossiers locaux et distants « racines » Le dossier racine local de votre site

Dreamweaver est souvent le dossier principal, ou le dossier de niveau supérieur, de votre site Web.

Il correspond généralement à un dossier identique sur le site distant (serveur Web). En outre, le dossier racine définit généralement la première partie de l'URL de votre site Web, celle qui précède le nom de Domaine. Par exemple, si votre dossier racine local se nomme monsitemet web et que vous avez défini un dossier racine identique sur le site distant, l'URL de votre site Web pourrait être de type « http://www.yahoo.com/monsitemetweb »

Dans certains cas, le dossier racine local peut ne pas avoir un nom absolument identique à celui se trouvant sur le site distant. Par exemple, si vous êtes le propriétaire du nom de domaine

www.monsiteweb.com, avec un réseau racine distant public_html, votre dossier racine local pourrait quand même s'appeler monsiteweb. Les fichiers dans les répertoires racines locaux et distants seraient identiques; il n'y a que les noms de dossiers (public_html sur le site distant et monsiteweb sur l'ordinateur local) qui seraient différents.

Définissez un dossier local

Vous devez définir un dossier local Dreamweaver pour chaque site Web créé. Ce dossier local est le dossier du disque dur dans lequel seront stockées les copies de travail des fichiers du site. Ce dossier local est indispensable au bon fonctionnement de certaines fonctions de Dreamweaver.

La définition d'un dossier local vous permet également de : gérer vos fichiers et de les transférer vers ou depuis le serveur Web à l'aide de méthodes différentes de transfert de fichiers.

Vous allez à présent définir comme dossier local le dossier cafe_townsend que vous avez copié dans le dossier localSites.

1. Lancez Dreamweaver, puis sélectionnez Site > Gérer les sites. La boîte de dialogue Gérer les sites s'affiche.
2. Cliquez sur le bouton Nouveau, puis sélectionnez Site. La boîte de dialogue Définition du site s'ouvre.
3. Si l'assistant (onglet Elémentaire) s'affiche, cliquez sur l'onglet Avancé et sélectionnez Infos locales dans la liste Catégorie (sélection par défaut).
4. Dans la zone de texte Nom du site, tapez Cafe Townsend en tant que nom du site.
5. Dans la zone de texte Dossier racine local, indiquez le dossier cafe_townsend que vous avez copié dans le dossier localSites selon les instructions de la section précédente.

Vous pouvez cliquer sur l'icône du dossier pour rechercher le dossier et le sélectionner, ou entrez son chemin d'accès dans la zone de texte Dossier racine local.

1. Dans la zone de texte Dossier des images par défaut, indiquez le dossier d'images qui figure déjà dans le dossier cafe_townsend.

Vous pouvez cliquer sur l'icône du dossier pour rechercher le dossier et le sélectionner, ou entrer son chemin d'accès dans la zone de texte Dossier des images par défaut.

La boîte de dialogue Définition d'un site s'affiche comme suit :

1. Cliquez sur OK.

La boîte de dialogue Gérer les sites s'affiche et présente votre nouveau site.

1. Cliquez sur Terminate pour fermer la boîte de dialogue Gérer les sites. Le panneau Fichiers affiche maintenant le nouveau dossier racine local du site actuel. La liste de fichiers du panneau Fichiers tiendra lieu de gestionnaire de fichiers et vous permettra de copier, de coller, de supprimer, de déplacer et d'ouvrir des fichiers tout comme vous le feriez sur le Bureau de votre ordinateur.

Pour plus d'informations sur le fonctionnement du panneau Fichiers, voir Panneau Fichiers, page 38.

Un dossier racine local est désormais défini pour votre site. C'est dans le dossier racine local de votre ordinateur local que vous conservez les copies de travail de vos pages Web. Plus tard, si vous désirez publier vos pages et les rendre disponibles au grand public, il vous faudra définir un dossier distant, c'est-à-dire un emplacement sur un ordinateur distant qui fait tourner un serveur Web et qui contiendra des copies des pages publiées de vos fichiers locaux.

Vous pouvez suivre les autres didacticiels de ce guide pour créer l'exemple du site Cafe Townsend ou désir de travailler sur vos propres pages. Après avoir créé et édité vos pages, définissez un dossier distant sur un serveur et publiez vos pages. Pour plus d'informations, consultez le Chapitre 13,

Didacticiel : Publication de votre site.

Didacticiel : création de maquettes de page

Le présent didacticiel vous guide dans les tâches de base liées à la création d'une maquette de page Web à l'aide de Macromedia Fireworks 8. Les maquettes de page sont généralement utilisées pour présenter des projets de pages à des collégues ou des clients. Une fois un projet approuvé, les concepteurs Web peuvent utiliser la maquette comme ébauche pour créer leur page.

Dans le cadre de ce didacticiel, vous allez accomplir les tâches suivantes :

Examen de votre tâche 167

Création et sauvegarde d'un nouveau document 169

Importation et placement d'images 170

Création d'une image composite de la zone de contenu. 172

Placement de texte et d'images 179

Exportation de l'image pour le Web 186

Examen de votre tâche

Café Townsend, un restaurant fictif, a engagé votre équipe pour concevoir et créer son site Web. Lors des étapes initiales de planification du projet, des membres de votre équipe ont rencontré des représentants de Café Townsend afin de dégager des idées pour le site Web. Durant la réunion, votre équipe a ébauché des projets possibles sur des serviettes de table (la réunion s'est tenue dans le restaurant Café Townsend).

De retour au bureau, l'équipe vous a informé que le client avait particulièrement apprécié deux projets, esquissés sur les serviettes de table suivantes :

La tâche qui vous a été attribuée est de créer une maquette de page à partir du second projet, afin de la présenter au client. La maquette ressemble à une véritable page Web, mais n'en a pas les fonctionnalités.

Création et sauvegarde d'un nouveau document

Après avoir prévisualisé la maquette terminée, vous êtes prêt à entamer l'élaboration du projet.

Vous devez définir un dossier de travail avant de commencer, si ce n'est pas déjà fait. Pour plus d'informations, consultez la section Configuration de votre site et de vos fichiers de projet.

1. Dans Fireworks, cliquez sur Fichier > Nouveau.
2. Dans la boîte de dialogue Nouveau document, entrez 700 pour la valeur de largeur et 600 pour la valeur de hauteur. Assurez-vous que les deux mesures sont exprimées en pixels.
3. Définissez la valeur de Couleur du fond sur Personnalisée, puis sélectionnez la couleur noire dans le menu des couleurs personnalisées. La boîte de dialogue Nouveau document doit s'afficher comme suit :

1. Cliquez sur OK pour créer le document.

Une fenêtre Document, ayant comme titre Sans Titre-1.png (Windows) ou Sans Titre-1 (Macintosh), s'affiche.

Si la fenêtre Document n'est pas agrandie, c'est-à-dire si elle n'occupe pas toute la surface centrale de l'écran, agrandissez-la en cliquant sur le bouton Agrandir (Windows) ou en activant la case Zoom (Macintosh) dans le haut de la fenêtre Document. Cette opération agrandit considérablement votre espace de travail.

1. Cliquez sur Fichier > Enregistrer, puis accédez au dossier suivant de votre disque dur :

localSites/cafe_townsend/fireworks_assets/

1. Nommez le fichier homepage-mockup.

Sur Macintosh, sélectionnez l'option Ajouter l'extension du nom de fichier, si ce n'est pas déjà fait.

1. 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 Fireworks. Le fichier PNG est votre fichier source. Il s'agit de l'emplacement où vous effectuez tout votre travail dans Fireworks. À la fin de ce didacticiel, vous apprendrez à exporter votre document vers un autre format compatible avec le Web.

Importation et placement d'images

Ensuite, importez des images et positionnez-les sur le document Fireworks afin de voir comment elles sont disposées sur la page Web finale.

Importation du graphique de bannière

Le graphique de bannière est une maquette de la bannière que vous allez utiliser sur la page réalisée. Vous allez produire la version finale de la bannière dans le cadre du Didacticiel: Création d'une bannière de page, page 223.

1. Cliquez sur Fichier > Importer, puis accédez au dossier suivant de votre disque dur :

localSites/cafe_townsend/fireworks_assets/

1. Sélectionnez le fichier banner-mockup.jpg, puis cliquez sur Ouvrir.

Un pointeur d'insertion s'affiche, indiquant la position du coin supérieur gauche du graphique.

1. Alignez le pointeur sur le coin supérieur gauche du document, puis cliquez pour insérer le graphique de bannière.

Le graphique de bannière s'affiche entouré d'un cadre bleu indiquant qu'il s'agit de l'objet actuellement sélectionné.

1. Utilisez les touches fléchées du clavier pour aligner précisément le graphique de bannière sur le haut du document. La bannière est correctement alignée si les valeurs de ses coordonnées X et Y dans l'Inspecteur des propriétés sont égales à 0. L'Inspecteur des propriétés se trouve au bas de la fenêtre Document. S'il n'est pas visible, cliquez sur Fenêtre > Propriétés.
2. Cliquez n'importe où en dehors du graphique de bannière sélectionné pour le désélectionner.
3. Enregistrez votre travail.

Importez l'image d'espace réservé du diaporama

Ensuite, importez une image d'espace réservé représentant la taille et la position d'un diaporama photo de type Flash qui figurera sur la page Web finale. Les images d'espace réservé sont précieuses pour représenter l'aspect d'un élément de composition sans devoir gérer la grande taille de fichier ni devoir créer l'élément complexe sous sa forme finale.

1. Cliquez sur Fichier > Importer, puis accédez au dossier suivant de votre disque dur :

localSites/cafe_townsend/fireworks_assets/

1. Double-cliquez sur slideshow-holder.jpg.
2. Positionnez le pointeur d'insertion environ 6 pixels sous le graphique de bannière importé précédemment, puis cliquez pour insérer l'espace réservé du diaporama.
3. Tandis que l'image de l'espace réservé est sélectionnée, utilisez les touches fléchées du clavier pour ajuster sa position sur le document. L'image d'espace réservé est correctement alignée si les valeurs de ses coordonnées X et Y dans l'Inspecteur des propriétés sont égales respectivement à 0 et à 98.
4. Cliquez n'importe où en dehors de l'image sélectionnée pour la désélectionner.
5. Enregistrez votre travail.

Création d'une image composite de la zone de contenu

Vous êtes désormais prêt à créer une maquette de la zone de contenu de la page Web. Vous allez tracer des objets vectoriels Fireworks afin de représenter graphiquement les zones de la page Web.

Avant de commencer, examinez l'esquisse sur la serviette de table afin de vous rafraîchir la mémoire concernant le projet.

Création et modification d'un rectangle arrondi

Le premier objet à créer est un rectangle arrondi représentant les barres supérieure et inférieure de la zone de contenu. Vous décidez de créer un grand rectangle arrondi définissant l'étendue totale de la zone de contenu.

1. Dans la section Vecteur du panneau Outils, sélectionnez l'outil Rectangle arrondi.

L'outil Rectangle arrondi est un outil de forme. Cliquez sur l'icône d'extension sur l'icône de forme pour la sélectionner.

1. Dans la fenêtre Document, positionnez le pointeur en forme de croix sur le document, puis faites-le glisser vers le bas et vers la droite afin de créer la forme.

Vous pouvez tracer le rectangle arrondi n'importe où sur le document. À ce stade, ne vous préoccupez pas de la taille et de la position de la forme; vous pourrez la redimensionner et la positionner plus tard au cours de la procédure.

1. Lorsque vous relâchez le bouton de la souris, un rectangle arrondi est affiché, sélectionné, dans la zone que vous avez définie.

Vous supportez voir qu'un objet est sélectionné grâce aux points bleus qui s'affichent dans les coins. La plupart des objets possédent également une surbrillance bleue autour de leurs bords extérieurs, mais les rectangles sont des exceptions. Une forme de rectangle arrondi comporte également des points de contrôle qui s'affichent sous la forme de losanges jaunes. Ces points de contrôle vous permettent de modifier la taille et l'arrondi des angles du rectangle.

1. Tandis que le rectangle arrondi est sélectionné, dans l'Inspecteur des propriétés, activez la case Couleur de remplissage à côté de l'icone du pot de peinture.

La fenêtre contextuelle Couleur de remplissage s'affiche.

1. Entrez 6B1101 dans la zone de texte située dans le haut de la fenêtre, puis appuyez sur Entrée.
2. Activez la case Couleur de trait à côté de l'icone du crayon, puis cliquez sur le bouton Transparent dans le haut de la fenêtre contextuelle Couleur de trait (il n'est pas sélectionné par défaut).

Désormais, le rectangle arrondi présente un remplissage rouge foncé et aucun trait.

Veuillez suiveredimensionner et positionner le rectangle arrondi. Vous decidez de le faire precisement a l'aide de l'Inspecteur des propriétés.

1. Tandis que le rectangle arrondi est sélectionné, dans l'Inspecteur des propriétés, entrez 700 dans la case de largeur (L), 340 dans la case de hauteur (H), 0 pour la position X, 255 pour la position Y, puis appuyez sur Entrée pour appliquer la dernière valeur.

La position Y n'est qu'une approximation. Vous pouvez également utiliser les touches fléchées pour déplacer le rectangle arrondi vers le haut ou vers le bas, jusqu'à ce qu'il se trouve environ 6 pixels sous l'image de l'espace réservé du diaporama.

Une fois le rectangle arrondi redimensionné, vous constatez que les bords arrondis apparaissent distordus. Vous souhaitez les ajuster afin de créer les angles arrondis de façon appropriée.

Le rectangle arrondi est une forme automatique de Fireworks. Vous pouvez donc utiliser le panneau Propriétés de forme automatique pour ajuster l'arrondi des angles.

1. Tandis que le rectangle arrondi est sélectionné, ouvrez le panneau Propriétés de forme automatique en cliquant sur Fenêtre > Propriétés de forme automatique (pas sur Fenêtre > Formes automatiques).
2. Entrez 20 pour l'arrondi du premier angle, puis appuyez sur Entrée. Comme les valeurs sont verrouillées, la modification de la valeur d'un arrondi entraîne la modification de toutes les autres valeurs.

En même temps, Fireworks ajuste les angles de la forme sur le document.

1. Fermez le panneau Propriétés de forme automatique, puis cliquez en dehors du document pour désélectionner le rectangle arrondi.
2. Enregistrez votre travail.

Création d'une zone de barre latérale de navigation

Ensuite, vous décidez de créer un rectangle afin de définir la barre latérale de navigation pour la page Web.

1. Dans la section Vecteur du panneau Outils, sélectionnez l'outil Rectangle.
2. Positionnez le pointeur en forme de croix dans le rectangle arrondi tracé précédemment, puis faites-le glisser vers le bas et vers la droite afin de créer un rectangle vertical pour la barre latérale.

Vous pouvez tracer le rectangle n'importe où sur le document. Vous le redimensionnerez et le positionnerez ultérieurement.

Lorsque vous relâchez le bouton de la souris, un rectangle s'affiche, sélectionné, dans la zone que vous avez définie.

Veuillez ensuite attribuer au rectangle un remplissage orange.

1. Tandis que le rectangle est sélectionné, dans l'Inspecteur des propriétés, activez la case Couleur de remplissage à côté de l'icône du pot de peinture. La fenêtre contextuelle Couleur de remplissage s'affiche.
2. Entrez A3210A dans la zone de texte située dans le haut de la fenêtre, puis appuyez sur Entrée.
3. Activez la case Couleur de trait à côté de l'icône du crayon, puis cliquez sur le bouton Transparent dans le haut de la fenêtre contextuelle Couleur de trait.

Désormais, le rectangle présente un remplissage orange et aucun Trait.

Vous devez redimensionner et positionner le rectangle. Vous décidez de le faire précisément à l'aide de l'Inspecteur des propriétés.

1. Tandis que le rectangle est sélectionné, dans l'Inspecteur des propriétés, entrez 140 dans la case de largeur (L), 295 dans la case de hauteur (H), 0 pour la position X, 278 pour la position Y, puis appuyez sur Entrée pour appliquer la dernière valeur.

Remarques

La position Y n'est qu'une approximation. Vous pouvez également utiliser les touches fléchées pour déplacer le rectangle vers le haut ou vers le bas, jusqu'à ce qu'il soit centré verticalement par rapport au rectangle arrondi tracé précédemment. La différence de hauteur entre les deux objets est de 45 pixels, de sorte que le haut du rectangle orange doit se trouver 22 ou 23 pixels sous le haut du rectangle arrondi rouge foncé.

1. Enregistrez votre travail.

Création de la zone de copie

Enfin, vous devez créer un rectangle blanc cassé pour représenter la zone dans laquelle s'affichera le texte de la page Web.

1. Dans la section Vecteur du panneau Outils, Sélectionnez l'outil Rectangle.
2. Positionnez le pointeur en forme de croix dans le rectangle arrondi tracé précédemment, puis faites-le glisser vers le bas et vers la droite afin de créer un rectangle horizontal pour la zone de copie.

Vous pouvez tracer le rectangle n'importe où sur le document. Vous le redimensionnerez et le positionnerez ultérieurement.

Lorsque vous relâchez le bouton de la souris, un rectangle s'affiche, sélectionné, dans la zone que vous avez définie.

Vous devez à présent attribuer au rectangle un remplissage blanc cassé.

1. Tandis que le rectangle est sélectionné, dans l'Inspecteur des propriétés, activez la case Couleur de remplissage à côté de l'icône du pot de peinture.

La fenêtre contextuelle Couleur de remplissage s'affiche.

1. Entrez F7EEDF dans la zone de texte située dans le haut de la fenêtre, puis appuyez sur Entrée.
2. Activez la case Couleur de Traits à côté de l'icô

Désormais, le rectangle présente un remplissage blanc cassé et aucun trait.

Voulez-vous ensuite redimensionner et positionner le rectangle arrondi.

Vous décidez de le faire précisément à l'aide de l'Inspecteur des propriétés.

1. Tandis que le rectangle est sélectionné, dans l'Inspecteur des propriétés, entrez 560 dans la case de largeur (L), 295 dans la case de hauteur (H), 140 pour la position X, 278 pour la position Y, puis appuyez sur Entrée pour appliquer la dernière valeur.

La position Y doit être identique à la position Y du rectangle de la barre latérale.

Placement de texte et d'images

Après avoir créé la maquette de la zone de contenu, vous décidez de créer des zones de texte pour représenter le contenu et les liens de navigation, puis d'importer des images afin de représenter les autres fonctions de la zone de contenu.

Placement du texte d'espace réservé pour les liens

Le premier élément à créer est le texte représentant les liens de navigation.

1. Dans la section Vecteur du panneau Outils, sélectionnez l'outil Texte, puis déplacez le pointeur sur la fenêtre Document.

Le pointeur prend l'aspect d'un rayon laser et l'Inspecteur des propriétés affiche les propriétés du texte.

1. Dans l'Inspecteur des propriétés, définissez les propriétés d'outil suivantes:

Dans le menu contextuel Police, cliquez sur TrebuchetMS.

Remarque

Si vous ne disposez pas de la police TrebuchetMS, cliquez sur la police Verdana ou une police similaire à la place.

Cliquez sur le bouton Gras. Entrez 14 pour la taille de la police. - Sélectionnez Anticrénelage lissé comme niveau d'anticrénelage. - Cliquez sur l'icône Couleur à côté du menu de la taille de police, puis sélectionnez la nuance blanche. Cliquez sur le bouton Alignement gauche. - Entrez 200 comme pourcentage d'interlignage à côté de l'icône de flèche verticale à deux pointes.

1. Avec le pointeur en forme de rayon laser, cliquez une fois près du coin supérieur gauche du rectangle de barre latérale.

Cette opération crée un bloc de texte vide.

1. Entrez Cuisine dans le bloc de texte, puis appuyez sur Entrée pour entamer une nouvelle ligne.

La largeur du bloc de texte augmente à mesure que vous entrez du texte.

1. Entrez les éléments suivants, en appuyant chaque fois sur Entrée pour entamer une nouvelle ligne :

ChefIpsum Articles Special Events Location - Menu Contact us

Une fois cette étape terminée, vous disposez d'un bloc de texte représentant les liens de navigation.

1. Dans le panneau Outils, cliquez sur l'outil Pointeur afin de déselectionner la zone de texte.
2. Enregistrez votre travail.

Placement d'une image d'espace réservé pour la vente

Ensuite, vous ajoutez une image d'espace réservé dans la zone de contenu principale afin de représenter une video qui s'affichera sur la page Web finale. Voir Examen de votre tâche, page 167.

1. Cliquez sur Fichier > Importer, puis accédez au dossier suivant de votre disque dur : localSites/cafe_townsend/fireworks_assets/
2. Sélectionnez video-placeholder.jpg, puis cliquez sur Ouvrir.
3. Positionné le pointeur d'insertion environ 6 pixels en dessous et à droite du coin supérieur gauche de la zone de copie blanc cassé, puis cliquez pour insérer l'image.

1. Tandis que l'image de l'espace réservé est sélectionnée, utilisez les touches fléchées du clavier pour ajuster sa position.
2. Cliquez n'importe où en dehors de l'image sélectionnée pour la désélectionner.
3. Enregistrez votre travail.

Placement d'une image d'espace réservé pour l'objet présenté

Ensuite, vous ajoutez une image d'espace réservé dans la zone de contenu principale afin de représenter un élément de menu à afficher sur la page Web finale. Voir Examen de votre tâche, page 167.

1. Cliquez sur Fichier > Importer, puis accédez au dossier suivant de votre disque dur :

localSites/cafe_townsend/fireworks_assets/

1. Sélectionnez feature-placeholder.jpg, puis cliquez sur Ouvrir.
2. Positionnéz le pointeur d'insertion environ 6 pixels sous l'image d'espace réservé de la video, puis cliquez pour insérer l'image.
3. Tandis que l'image de l'espace réservé est sélectionnée, utilisez les touches fléchées du clavier pour ajuster sa position.

Vous souhaitez positionner l'image de façon à ce que son bord gauche soit aligné sur le bord gauche de l'image d'espace réservé de la vidéo.

1. Cliquez n'importe où en dehors de l'image sélectionnée pour la désélectionner.
2. Enregistrez votre travail.

Ajout d'un texte d'espace réservé pour la copie de page

Enfin, vous allez tracer une zone de texte vide et y importer du texte d'espace réservé afin de représenter la copie de page.

1. Dans la section Vecteur du panneau Outils, cliquez sur l'outil Texte.
2. Dans l'Inspecteur des propriétés, définissez les propriétés d'outil suivantes :

Dans le menu contextuel Police, cliquez sur Verdana. Entrez 11 pour la taille de la police. Assurez-vous que le bouton Gras n'est pas sélectionné. - Cliquez sur la zone Couleur, entrez 240E0A dans la zone de texte située dans le haut de la fenêtre Couleur, puis appuyez sur Entrée.

• Entrez 200 comme pourcentage d'interlignage à côté de l'icône de flèche verticale à deux pointes.
• Positionné le pointeur en forme de rayon laser environ à 6 pixels du coin supérieur droit de l'image d'espace réservé de la réserve, puis faites-le glisser vers le bas et vers la droite pour tracer une zone de texte.

Assurez-vous qu'il y a une marge d'environ 6 pixels tout autour.

1. Entrez ou collez environ deux paragraphes de texte d'espace réservé dans la zone de texte.

Comme le texte représenté l'emplacement où le texte doit être inséré pour la page Web, il ne doit pas nécessairement avoir de sens. Vous pouvez coller le texte du fichier loremipsum.txt situé dans le dossier suivant :

localSites/cafe_townsend/fireworks_assets/

1. Dans la section Vecteur du panneau Outils, cliquez sur l'outil Texte, puis sélectionnez les trois premiers mots du premier paragraphe.
2. Dans l'Inspecteur des propriétés, exécutez les actions suivantes : Cliquez sur le bouton Gras.
3. Activez la case Couleur, entrez 6B1101 dans la zone de texte située dans le haut de la fenêtre Couleur, puis appuyez sur Entrée.
4. Répétez cette procédure pour les trois premiers mots du second paragraphe.

Vous ajoutez à partir une ligne de texte à la fin de chaque paragraphe et faites en sorte qu'elle ressemble à un lien Web.

1. Cliquez sur le pointeur en forme de rayon laser à la fin du premier paragraphe, puis appuyez sur la barre d'espace du clavier.
2. Entrez En savoir plus, puis sélectionnez le texte que vous venez d'entrer.
3. Dans l'Inspecteur des propriétés, exécutez les actions suivantes :

Cliquez sur le bouton Souligné. - Activez la case Couleur, entrez 32596E dans la zone de texte située dans le haut de la fenêtre Couleur, puis appuyez sur Entrée.

1. Cliquez sur le pointeur en forme de rayon laser à la fin du second paragraphe, puis appuyez sur la barre d'espace du clavier.
2. Entrez Faire une réservation, puis sélectionnez le texte que vous venez d'entrer.
3. Dans l'Inspecteur des propriétés, exécutez les actions suivantes :

Cliquez sur le bouton Souligné. - Activez la case Couleur, entrez 32596E dans la zone de texte située dans le haut de la fenêtre Couleur, puis appuyez sur Entrée.

1. Dans le panneau Outils, cliquez sur l'outil Pointeur afin de désélectionner le texte.
2. Enregistrez votre travail.

Exportation de l'image pour le web

La maquette de la page d'accueil de Café Townsend que vous avez créée doit ressembler à ceci :

Ensuite, vous décidez d'exporter le fichier PNG au format JPEG afin de pouvoir l'afficher sur un site Web interne ou dans un message électronique adressé à vos collègues ou au client.

1. Cliquez sur Fichier > Aperçu de l'image.

1. Dans le menu contextuel Format, cliquez sur JPEG.
2. Dans la zone de texte Qualité, entrez 90 ou utilisez le curseur Qualité.

Comme cette image ne sera pas utilisée sur une page Web accessible au public, vous ne devez pas vous préoccuper de la taille du fichier ni du temps de téléchargement. Autrement, un paramètre de qualité 90 pourrait être trop élevé.

Dans la zone située au-dessus de l'image d'aperçu, vous pouvez voir la manière dont vos paramètres affectent la taille de fichier et le temps de téléchargement.

1. Cliquez sur Exporter.

La boîte de dialogue Exporter s'affiche.

1. Ouvrez le dossier suivant:

localSites/cafe_townsend/fireworks_assets/

1. Cliquez sur Exporter.

Fireworks crée une version JPEG de votre maquette de page dans le dossier fireworks_assets. Notre fichier PNG existe encore et vous devez l'utiliser pour modifier la maquette suite à un commentaire. APRÈS avoir apporté les modifications nécessaires, exportez-le de nouveau.

Dans le cadre de ce didacticiel, vous avez créé une maquette de page. Vous avez appris à créer et enregistrer des fichiers Fireworks, à importer et placer des images, à tracer des formes vectorielles, à placer du texte et des images et à exporter des images.

Pour plus d'informations sur certaines des fonctions mentionnées dans ce didacticiel et sur d'autres fonctions de Fireworks, voir le manuel Utilisation de Fireworks.

Didacticiel : création d'une mise en forme de page basée sur un tableau

Ce didacticiel indique comment créer dans Macromedia Dreamweaver 8 une mise en forme de page basée sur un tableau. La mise en forme déterminée la manière dont votre page s'affichera dans le navigateur, par exemple où seront placés les menus, les images et le contenu de Macromedia Flash.

Les tableaux sont très utiles pour partager des données tabulaires et mettre en forme du texte et des images dans une page HTML. Vous pouvez utiliser des tableaux pour créer une mise en forme de manière rapide et aisée. Dans ce didacticiel, vous allez créer plusieurs tableaux dans un nouveau document Dreamweaver. Les lignes et les cellules des tableaux font office de « conteneurs » pour le contenu que vous ajouterez plus tard.

Dans ce didacticiel, vous allez accomplir les tâches suivantes :

Examinez la maquette détaillée de conception 190

Création et enregistrement d'une nouvelle page. 192

Insérez des tableaux 193

Définissez les propriétés des tableaux 197

Insérez un espace réservé pour l'image 203

Ajoutez des couleurs à la page 205

Examinez la maquette détaillée de conception

En règle générale, vous n'entamerez pas la création d'un site Web en ouvrant Dreamweaver puis en mettant immédiatement des pages en forme. Les premières étapes de la création d'un site Web se déroulent sur une feuille de papier ou dans une application de graphisme telle que Macromedia Fireworks. Les concepteurs graphiques créent généralement une maquette détaillée du site Web de manière à la présenter au client et à s'assurer que celui-ci approuve les idées initiales relatives au site.

Une maquette détaillée se compose d'un certain nombre d'éléments de page que le client a demandés pour son site Web. Par exemple, le client peut demander à avoir un logo en haut de la page, une section de navigation avec des liens vers les autres pages, une section contenant un magasin en ligne et un endroit où insérer des clips vidéo. Selon ces désidérata, le concepteur entame la planification de la mise en forme du site et crée des esquisses de pages répondant aux attentes du client.

Dans ce didacticiel, vous disposerez de la maquette détaillée complète et approuvée de Café Townsend, un restaurant fictif qui désire-disposer d'un site Web. En tant que concepteur Web, vous êtes chargé de transformer cette maquette détaillée en une page Web fonctionnelle (dans la plupart des cas, en collaboration avec d'autres concepteurs graphiques et des développeurs Flash).

Café townsend

Nouveau World Cuisine

Vous remarquerez que le concepteur graphique vous a fourni une maquette détaillée de page Web qui comprend un certain nombre de zones de contenu et quelques idées concernant les graphismes. Dans les sections suivantes, vous allez employer Dreamwe weaver pour mettre ce concept en forme.

Vous pouvez également ouvrir le fichier original de la maquette détaillée que vous avez créé au Chapitre 5, Didacticiel: Création de maquettes de page si vous désirez le voir s'afficher sur l'écran de l'ordinateur. Si vous n'avez pas créé la maquette détaillée, vous pouvez soit revenir en arrêt et terminer le didacticiel, soit visualiser une version terminée du didactiel dans le dossier cafe_townsend/completed_files/fireworks.

Création et enregistrement d'une nouvelle page

Après avoir configuré un site et consulté les maquettes détaillées, vous pouvez entamer la création de pages Web. Vous allez tout d'abord créer une nouvelle page et l'enregistrer dans le dossier racine local cafe_townsend de votre site Web. Cette page va devenir la page d'accueil du Cafe Townsend, un restaurant fictif.

Si vous n'avez pas créé ce dossier, il faut absolument le faire avant de poursuivre. Pour toutes instructions, voir Chapitre 4, Didacticiel : Configuration de votre site et des fichiers de projet.

1. Dans Dreamweaver, choisissez Fichier > Nouveau.
2. Dans l'onglet Général de la boîte de dialogue Nouveau document, Sélectionnez Page de base dans la liste Catégorie, puis cliquez sur Créer.
3. Sélectionnez Fichier > Enregistrer sous.
4. Dans la boîte de dialogue Enregistrer sous, accédez au dossier cafe_townsend que vous avez défini comme dossier racine local du site. Dans le Chapitre 4, Didacticiel : Configuration de votre site et des fichiers de projet, vous avez créé ce dossier dans un dossier nommé localSites.
5. Tapez index.html dans la zone de texte Nom de fichier puis cliquez sur Enregistrer. Le nom du fichier pourrait maintenant dans la barre de titre dans la partie supérieure de la fenêtre de l'application.
6. Dans la zone texte Titre du document, dans le haut de votre nouveau document, entrez Café Townsend.

Il s'agit du titre de votre page (qui est différent du nom de fichier). Les visiteurs de ce site verront ce titre dans la barre de titre de la fenêtre du navigateur lorsqu'ils afficheront la page dans un navigateur Web.

1. Choisissez Fichier > Enregistrer pour enregistrer votre page.

Insérez des tableaux

Voulez ensuite ajouter un tableau qui contiendra du texte, des graphismes et des actifs Macromedia Flash.

1. Cliquez sur la page pour placer le point d'insertion dans l'angle supérieur gauche de la page.

1. Choisissez Insertion > Tableau.
2. Dans la boîte de dialogue Tableau, procédez de la manière suivante :

Entrez 3 dans la zone de texte Lignes. Entrez 1 dans la zone de texte Colonnes. Saisissez 700 dans la zone de texte Largeur du tableau. - Sélectionnez Pixels dans le menu déroulant Largeur du tableau. - Entrez 0 dans la zone de texte Largeur de la bordure. Saisissez 0 dans la zone de texte Marge intérieure des cellules. Saisissez 0 dans la zone de texte Espacement entre les cellules.

4. Cliquez sur OK.

Un tableau comptant trois lignes et une colonne s'affiche dans votre document. Ce tableau fait 700 pixels de large, ne possède pas de bordure et ses cellules n'ont pas de marge intérieure ni d'espacement.

Compléments sur les tableaux Les tableaux sont très utiles pour désenter des données tabulaires et mettre en forme du texte et des images dans une page HTML. Un tableau comprend au moins une ligne ; chaque ligne comporte au moins une cellule. Quand vous créez de multiples lignes avec de multiples cellules, ces dernières forment des colonnes. Techniquement parlant, une cellule est une séparation dans une ligne horizontale et une colonne est un cumul vertical de ces séparations de cellules.

Dreamweaver affiche la largeur du tableau et de chaque colonne du tableau dans le Sélecteur de tableau (matérialisé par des lignes vertes) lorsque le tableau est sélectionné ou que le point d'insertion se trouve dedans.

En regard des largeurs se trouvent les flèches du menu des en-têtes de tableau et des menus des entêtes de colonne. Vous pouvez utiliser les menus pour accéder rapidement à des commandes standard relatives aux tableaux. Vous pouvez activer ou désactiver l'affichage des largeurs et des menus en sélectionnant Affichage > Assistance visuelle > Largeurs de tableau.

Un tableau peut posséder des bordures et ses cellules peuvent composer une marge intérieure, un espacement ou les deux à la fois. La marge intérieure représenté le nombre de pixels entre le contenu de la cellule et les limites de celle-ci. L'espacement entre les cellules représenté le nombre de pixels entre les cellules contiguës d'un tableau.

Si vous n'attribuez pas de façon explicite de valeurs pour les marges intérieures et l'espacement des cellules, la plupart des navigateurs affichent le tableau comme si les marges des cellules étaient fixées à 1 et leur espacement à 2. Pour vous assurer que les navigateurs affichent le tableau sans aucune marge ou espacement, fixez à 0 la marge intérieure des cellules et l'espacement entre les cellules.

Pour plus d'informations sur les tableaux, voir Chapitre 8, Présentation de contenu à l'aide de tableaux dans Utilisation de Dreamweaver.

1. Cliquez à droite du tableau pour le désélectionner.
2. Sélectionnez Insérer > tableau pour insérer un autre tableau.
3. Dans la boîte de dialogue Tableau, procédez de la manière suivante pour le deuxième tableau :

Entrez 1 dans la zone de texte Lignes. Entrez 3 dans la zone de texte Colonnes. Saisissez 700 dans la zone de texte Largeur du tableau. - Sélectionnez Pixels dans le menu déroulant Largeur du tableau. Saisissez 0 dans la zone de texte Largeur de la bordure. - Entrez 0 dans la zone de texte Marge intérieure des cellules. Entrez 0 dans la zone de texte Espacement entre les cellules.

8. Cliquez sur OK.

Un deuxième tableau compte une ligne et trois colonnes s'affiche sous le premier tableau.

10. Insérez un troisième tableau en sélectionnant insertion > tableau et en entrant les valeurs suivantes dans la boîte de dialogue tableau :

Entrez 1 dans la zone de texte Lignes. Saisissez 1 dans la zone de texte Colonnes. - Tapez 700 dans la zone de texte Largeur du tableau. - Sélectionnez Pixels dans le menu contextuel Largeur du tableau. Saisissez 0 dans la zone de texte Largeur de la bordure. Saisissez 0 dans la zone de texte Marge intérieure des cellules. Saisissez 0 dans la zone de texte Espacement entre les cellules.

11. Cliquez sur OK.

Un troisième tableau avec une ligne et une colonne s'affiche sous le deuxième tableau.

Cliquez à droite du tableau pour le désélectionner. Notre page doit maintenant ressembler à la page suivante :

Le sélecteur de tableau (indiqué par des lignes vertes) s'affiche après l'insertion d'un tableau. Vous pouvez masquer le sélecteur de tableau en cliquant en dehors du tableau. Vous pouvez également désactiver le Sélecteur de tableau en choisisant Affichage>Assistances visuelles> Largeurs des tableaux.

Définissez les propriétés des tableaux

Vous allez à présent définir les propriétés précises des tableaux à l'aide du mode Tableaux développés. Cette fonctionnalité ajoute temporairement une marge intérieure et un espacement aux cellules et élargit les bords des tableaux afin de faciliter leur manipulation. Cela vous permet particulièrement de placer le point d'insertion de manière précise sans sélectionner accidentellement le mauvais tableau ou tout autre contenu du tableau.

Lorsque vous avez terminé de définir les propriétés des tableaux en mode Tableaux développementés, vous devez toujours revenir au mode Standard. Le mode Tableaux développementés n'est pas un environnement WYSIWYG (« what you see is what you get » ou affichage et impression non identiques) de sorte que certaines opérations, telles que le redimensionnement, ne donneront pas le résultat attendu.

1. Sélectionnez Affichage > Mode Tableau > Mode Tableaux développement.

Si vous consultez le guide de démarrage avec la boîte de dialogue Mode Tableaux développement, cliquez sur OK.

1. Cliquez à l'intérieur de la première ligne du premier tableau.

1. Dans l'inspecteur des propriétés (Fenêtre > Propriétés), tapez 90 dans la zone de texte Hauteur des cellules et appuyez sur Entrée (Windows) ou Retour (Macintosh).

Remarque

Si vous ne VOYZ pas la zone de texte Hauteur des cellules, cliquez sur la flèche d'extension dans l'angle inférieur droit de l'inspecteur des propriétés.

1. Cliquez à l'intérieur de la deuxième ligne du premier tableau.

1. Dans l'inspecteur des propriétés, tapez 166 dans la zone de texte Hauteur des cellules et appuyez sur Entrée (Windows) ou Retour (Macintosh).
2. Cliquez à l'intérieur de la troisième ligne du premier tableau.
3. Dans l'inspecteur des propriétés, tapez 24 dans la zone de texte Hauteur des cellules et appuyez sur Entrée (Windows) ou Retour (Macintosh). Le premier tableau doit à présent Compterer trois lignes de hauteurs différentes.

Vous allez à présent définir les propriétés du deuxième tableau (celui qui contient trois colonnes).

1. Cliquez à l'intérieur de la première colonne du deuxième tableau.

1. Dans l'inspecteur des propriétés, tapez 140 dans la zone de texte Largeur des cellules et appuyez sur Entrée (Windows) ou Retour (Macintosh).
2. Cliquez à l'intérieur de la deuxième colonne du deuxième tableau.
3. Dans l'inspecteur des propriétés, tapez 230 dans la zone de texte Largeur des cellules et appuyez sur Entrée (Windows) ou Retour (Macintosh).

1. Fixez la largeur de la troisième colonne à 330 pixels.

Si le Sélecteur de tableau est activé (Affichage > Assistances visuelles > Largeurs des tableaux), les valeurs en pixels que vous venez de saisir s'afficheront au-dessus des colonnes du tableau.

Vous n'allez entrer aucune valeur de hauteur pour les cellules de ce tableau, car leur hauteur variera en fonction du contenu que vous ajouterez par la suite.

1. Enfin, cliquez dans le dernier tableau (celui qui contient une ligne et une colonne).
2. Dans l'inspecteur des propriétés, tapez 24 dans la zone de texte Hauteur des cellules et appuyez sur Entrée (Windows) ou Retour (Macintosh). Voitre mise en forme doitMAINISTER à la suivante :

1. Cliquez sur le lien [quitter] dans la barre intitulée Mode Tableaux développés en haut de la fenêtre de document pour revenir au mode Standard. 7
2. Enregistrez votre page.

Insérez un espace réservé pour l'image

Un espace réservé pour image est un graphisme que vous utilisez jusqu'à ce que le dessin final soit prêt à être ajouté à une page Web. L'espace réservé pour l'image est utile lors de la mise en forme de pages Web, car il permet de placer une image sur une page avant même d'avoir créé l'image.

1. Dans la fenêtre du document, cliquez à l'intérieur de la première ligne du premier tableau.
2. Sélectionnez Insérer > Objet image > Espace réservé pour l'image.
3. Dans la boîte de dialogue Espace réservé pour l'image, procédez de la manière suivante :

Tapez graphique_bannière dans la zone de texte Nom. Entrez 700 dans la zone de texte Largeur. Entrez 90 dans la zone de texte Hauteur. - Cliquez sur la case de couleur puis choisissez une couleur dans le sélecteur. Pour ce didacticiel, nous allons avoir besoin d'un brun rougeâtre (#993300). Laissez vide la zone de texte Autre texte.

Une note sur le texte de remplacement Un texte de remplacement est la description textuelle d'une image sur une page Web. Il fait partie du code HTML et n'est pas visible sur la page. Il est important de fournir un texte de remplacement pour la plupart de vos images pour que les personnes qui utilisent des lecteurs d'écrans ou des navigateurs à texte puissent recevoir l'information fournie par l'image. Dans le cas d'un graphisme représentant une bannière, qui se borne à afficher un logo pour un site Web, il n'est pas essentiel de fournir un tel texte. Si vous ne remplissez pas la zone Autre texte dans la zone de dialogue Espace réservé pour l'image, Dreamweaver ajoute un attribut alt=" " à la balise img. Si vous pouvez par la suite ajouter un texte de remplacement à une image, il suffit de la sélectionner et d'entrer le texte désiré dans l'inspecteur de propriétés. Par exemple, si vous changez le logo plus tard pour inclure un numéro de téléphone ou une adresse, il est souhaitable de fournir cette information sous forme de texte de remplacement.

Présentation des espaces réservés pour l'image Un espace réservé pour l'image est un graphisme que vous employez jusqu'à ce que le graphisme définitif soit prêt à être ajouté à la page Web. Il ne s'agit pas d'une image qui s'affiche dans un navigateur. Avant de publier votre site, remplacez tous les espaces réservés pour une image que vous avez ajoutés par des fichiers graphiques adaptés au Web, tels que des images GIF ou JPEG.

Si vous possédez Macromedia Fireworks, vous pouvez créer un nouveau graphisme à partir d'un espace réservé pour l'image dans Dreamweaver. Lorsque vous sélectionnez l'espace réservé pour l'image et que vous cliquez sur le bouton Créer de l'inspecteur de propriétés, Fireworks démarre et présente un nouveau document. La nouvelle image reprend la même taille que celle de l'espace réservé pour l'image. Vous pouvez ensuite créer et modifier l'image comme bon vous semble, puis replacer l'espace réservé pour l'image dans Dreamweaver. Pour obtenir des informations sur la création d'une image dans Fireworks à partir d'un espace réservé pour l'image, voir Utilisation de Fireworks pour modifier les espaces réservés pour les images Dreamweaver dans Utilisation de Dreamweaver

4. Cliquez sur OK.

L'espace réservé pour l'image apparait à l'intérieur du premier tableau. Il affiche une étiquette et les attributs de taille de l'image que vous placerez à cet endroit.

Bannière Graphique (700 x 90)

Lorsqu'ils sont affichés dans un navigateur, le texte de l'étiquette et de la taille d'un espace réservé pour l'image n'apparaissent pas.

1. Enregistrez votre page.

Ajoutez des couleurs à la page

Vous allez à présent ajouter de la couleur à la page en définissant les couleurs de certaines cellules du tableau et de l'arrière-plan de la page.

1. Cliquez à l'intérieur de la première cellule du tableau à trois colonnes.
2. Cliquez sur la balise < td > (balise de cellule) dans le sélecteur de balises afin de sélectionner la cellule.

1. Dans l'inspecteur de propriétés (Fenêtre > Propriétés), cliquez dans la zone de texte Couleur d'arrière-plan.

Cette zone se trouve juste à côté de la zone de couleur Couleur d'arrière-plan.

Si vous ne VOYZ pas la zone de texte Couleur d'arrière-plan, cliquez sur la flèche d'extension dans l'angle inférieur droit de l'inspecteur des propriétés.

1. Dans la zone de texte Couleur d'arrière-plan, entrez la valeur hexadécimale #993300 puis appuyez sur la touche Entrée (Windows) ou Retour (Macintosh).

La cellule du tableau prend une couleur brun rougeâtre.

1. Cliquez à l'intérieur de la deuxième cellule du tableau à trois colonnes.
2. Cliquez sur la balise < td > (balise de cellule) dans le sélecteur de balises afin de sélectionner la cellule.
3. Dans l'inspecteur de propriétés, cliquez dans la zone de texte Couleur d'arrière-plan, entrez la valeur hexadécimale #F7EEDF puis appuyez sur la touche Entrée (Windows) ou Retour (Macintosh).

La cellule du tableau prend une couleur brun clair.

1. Répétez les étapes 5 à 7 pour appliquer également la couleur brun clair à la troisième cellule du tableau.
2. Lorsque les trois couleurs sont définies, cliquez une fois en dehors du tableau pour le désélectionner.

Vous allez ensuite modifier la couleur d'arrière-plan de la page entière en modifiant les propriétés de la page. La boîte de dialogue Propriétés de la page permet de définir diverses propriétés, comme la taille et la couleur des polices de la page, les couleurs des liens visités, les marges de la page, etc.

1. Choisissez Modifier > Propriétés de la page.
2. Dans la catégorie Apparence de la boîte de dialogue Propriétés de la page, cliquez sur la zone de couleur Couleur d’arrière-plan et désélectionnez le noir (#000000) dans le sélecteur de couleur.

En HTML, les couleurs sont exprimées par leur valeur hexadécimale (par exemple, #FF0000) ou, pour les principales, par leur nom en anglais (red). Une couleur sécurisée pour le Web est une couleur qui, en mode 256 couleurs, reste toujours la même dans Netscape Navigator et Microsoft Internet Explorer, sous Windows comme sous Macintosh. Par convention, il y a 216 couleurs communes, et toute valeur hexadécimale combinant les paires 00, 33, 66, 99, CC ou FF (correspondant respectivement aux niveaux RVB 0, 51, 102, 153, 204 et 255) représente une couleur sécurisée pour le Web.

Vous pouvez sélectionner des couleurs dans Dreamweaver en entrant des valeurs hexadécimales dans les zones de texte appropriées ou en sélectionnant une valeur au moyen du sélecteur. Le sélecteur de couleur emploie la palette sécurisée de 216 couleurs ; la sélection d'une valeur dans cette palette entraîne l'affichage de la valeur hexadécimale correspondante. Pour utiliser le sélecteur de couleur, cliquez sur la zone de couleur et utilisez la pipette pour sélectionner une couleur.

Vous peuvent également utiliser le sélectionneur de couleur pour faire correspondre des couleurs. Par exemple, si une image de votre page contient une nuance de bleu précise que vous pouvez également appliquer à l'arrière-plan d'une cellule de tableau, vous pouvez selectionner cette cellule, cliquer sur la zone de couleur pour ouvrir le sélectionneur de couleur, amener la pipette au-dessus de la couleur bleue de l'image puis cliquer. Le sélectionneur de couleur remplira la zone sélectionnée de la couleur la plus proche de celle sur laquelle vous avez cliqué à l'aide de la pipette. Toutefois, si vous sélectionnez des couleurs en procédant de cette manière, il peut arriver que le sélectionneur de couleur ne choisisse pas une couleur sécurisée pour le Web.

3. Cliquez sur OK.

L'arrière-plan de la page devient noir.

4. Enregistrez votre travail.

La mise en forme de votre page est maintenant terminée. La mise en forme contient un certain nombre de tableaux qui contiennent des actifs tels que des images, du texte et des fichiers vidéo Flash (FLV).

Création d'actifs de contenu

Dans cette partie, vous construirez des actifs pour l'exemple de site Internet du Cafe Townsend.

Vous utilisez Macromedia Fireworks 8 pour traiter des images et pour concevoir une bannière pour le site Internet du Cafe Townsend. Vous utilisez Macromedia Flash 8 pour construire une zone de message facilement modifiable et un lecteur vidéo pour le site Internet du Cafe Townsend.

Cette partie du manuel contient les sections suivantes :

Didacticiel: Traitement des photographies 211

Didacticiel : Création d'une bannière de page 223

Didacticiel : Création de votre première application Flash... 245

Didacticiel : Création d'un lecteur vidéo (Flash Professionnel uniquement) 287

Didacticiel : traitement des photographies

Le présent didacticiel vous guide dans les tâches de base liées à l'optimisation de photographies à l'aide de Macromedia Fireworks 8. Il explique comment traiter les fichiers par lots et composer et exporter un groupe d'images.

Dans le cadre de ce didacticiel, vous allez accomplir les tâches suivantes :

Examen de votre tâche 211

Traitement par lots de fichiers d'image de grande taille 212

Composition des images 214

Aperçu avant l'exportation et exportation des images. 219

Affichage des images optimisées - finale 221

Examen de votre tâche

Conformément à la maquette de page que vous avez créée précédemment, le site Web de Café Townsend inclut un diaporama photo de type Flash.

Vous recevez six photographies numériques de plats figurant au menu du restaurant. Notre tâche est de préparer les images pour le diaporama. Ces clichés doivent être de bonne qualité mais suffisamment petits pour que leur téléchargement s'effectue rapidement. De même, la taille de chaque image doit être de 700 sur 150 pixels pour être adaptée aux dimensions du diaporama.

Remarque

Pour accéder à un didacticiel sur la création du diaporama dans Flash, voir les didacticiels de Macromedia Flash 8.

Traitement des fichiers d'images de grande taille

Si la source de vos fichiers d'image est un appareil photo numérique, vous ne pouvez probablement pas utiliser les images directement comme graphiques Web. La taille et la résolution sont beaucoup trop importantes. Il se peut également que vous souhaitiez modifier la composition de façon à n'utiliser que certaines parties des photographies.

Si tous les fichiers d'image nécessitent les mêmes ajustements, vous pouvez faire l'économie du processus laborieux d'ouverture et de modification de chaque fichier en traitant les fichiers d'image par lots.

Pour le projet Café Townsend, vous décidez de Traiter par lots les six fichiers JPEG téléchargés à partir d'un appareil photo numérique. Vous souhaitez effectuer les actions suivantes sur tous les fichiers :

• Comme les images ont des dimensions différentes, vous souhaitez les redimensionner de façon à ce qu'elles aient toutes la même largeur.
• Comme les noms de fichiers sont peu parlants, vous souhaitez leur ajouter le préfixe « plat_ » afin de mieux décrire les images.

La première étape consiste à sélectionner les fichiers que vous souhaitez traiter.

Vous devez définir un dossier de travail avant de commencer, si ce n'est pas déjà fait. Pour plus d'informations, consultez la section Configuration de votre site et de vos fichiers de projet.

1. Dans Fireworks, cliquez sur Fichier > Traitement par lots.

La boîte de dialogue Lots s'affiche.

1. Ouvrez le dossier suivant de votre disque dur :

localSites/cafe_townsend/fireworks_assets/camera_files

Le dossier contient six images JPEG téléchargées à partir d'un appareil photo numérique.

1. Pour sélectionner rapidement tous les fichiers composant le lot, cliquez sur Ajouter tout, puis sur Suivant.

La boîte de dialogue Traitement par lots s'affiche. Cette boîte de dialogue vous permet de désigner les actions que vous souhaitez effectuer sur un lot de fichiers. Dans ce cas, vous devez être à l'échelle et renommer vos fichiers.

1. Sous Options de traitement parlots, Sélectionnez Mise à l'échelle, puis cliquez sur Ajouter pour inclure l'action dans le traitement parlots.
2. Dans la zone Mise à l'échelle, au bas de la boîte de dialogue, Sélectionnez Mise à l'échelle avec cette taille dans la liste, puis définissez les dimensions comme suit :

Entrez 750 dans la case de la largeur. Pour la hauteur, sélectionnez Variable dans la liste.

1. Sous Options de traitement parlots, Sélectionnez Renommer, puis cliquez sur Ajouter pour inclure l'action dans le traitement parlots.
2. Dans la zone Renommer au bas de la boîte de dialogue, Sélectionnez l'option Ajouter un préfixe, puis entrez plat_ dans la zone de texte.
3. Cliquez sur Suivant pour passer à l'écran suivant.
4. Assurez-vous que l'option Même emplacement que le fichier d'origine est sélectionnée, puis cliquez sur Lots pour lancer le traitement par êtes invité, cliquez sur OK pour terminer le traitement.

En examinant les fichiers figurant dans le dossier camera_files, vous pouvez constater que Fireworks a placé les fichiers d'image originaux dans un dossier nommé Original Files. Vous pouvez également constater que l'opération de mise à l'échelle a sensiblement réduit la taille des fichiers.

Composition des images

L'étape suivante consiste à composer les images qui doivent s'afficher dans le diaporama. La taille de chaque image doit être de 700 sur 150 pixels pour être adaptée aux dimensions du diaporama. Toutefois, comme les images que vous avez traitées parlent sont d'une taille supérieure aux dimensions du diaporama, vous nevez sélectionner ou composer une portion intéressante de 700 x 150 pixels de l'image.

Une option possible consiste à ouvrir chaque image, la recadrer, puis l'exporter. Vous décidez néanmoins d'adopter une approche plus efficace en créant un seul fichier d'image contenant les six images dans lequel vous pouvez composer et exporter les images à tout moment.

Vous commencez par créer le fichier source de l'image. Dans la section suivante, vous allez ajouter des cadres au fichier, placer une image dans chaque cadre, puis composer les images. Vous pouvez ensuite exporter les six images en une seule opération.

1. Dans Fireworks, cliquez sur Fichier > Nouveau.
2. Dans la boîte de dialogue Nouveau document, entrez 700 pour la valeur de largeur et 150 pour la valeur de hauteur.

Assurez-vous que les deux mesures sont exprimées en pixels.

1. Définissez la couleur du document sur Blanc, puis cliquez sur OK pour créer le fichier source de l'image.
2. Si la fenêtre Document n'est pas agrandie, c'est-à-dire si elle n'occupe pas toute la surface centrale de l'écran, agrandissez-la en cliquant sur le bouton Agrandir (Windows) ou en activant la case Zoom (Macintosh) dans le haut de la fenêtre Document. Cette opération agrandit considérablement votre espace de travail.
3. Cliquez sur Fichier > Enregistrer.
4. Ouvrez le dossier suivant de votre disque dur :

localSites/cafe_townsend/fireworks_assets/

1. Nommez le fichier ImageSource.png, puis cliquez sur Enregistrer.

Pendant l'exécution du didacticiel, pensez à enregistrer régulièrement votre travail en cliquant sur Fichier > Enregistrer.

Création et dénomination de cadres

Ensuite, vous créez plusieurs cadres dans le fichier ImageSource.png pour y insérer les fichiers d'image que vous avez traités antérieurement.

Les cadres sont une fonction de Fireworks généralement utilisée pour créer des animations et des survols. Dans ce cas, vous utilisez des cadres pour insérer les photos individuelles avant de les exporter simultanément dans des fichiers distincts.

1. Assurez-vous que le fichier ImageSource.png est ouvert dans Fireworks.
2. Cliquez sur Fenêtre > Cadres pour ouvrir le panneau Cadres.

Pendant l'exécution du didacticiel, il peut être utile d'annuler une partie de vos modifications. Fireworks peut annuler plusieurs de vos modifications récentes, en fonction du nombre d'annulations définis dans la boîte de dialogue Préférences. Pour annuler la modification la plus récente, cliquez sur Édition > Annuler.

1. Cliquez sur le menu contextuel dans le coin supérieur droit du panneau, puis sélectionnez Ajouter des images.

1. Dans la boîte de dialogue Ajouter des images, entrez le chiffre 5, assurez-vous que l'option Après l'image courante est sélectionnée, puis cliquez sur OK.

Fireworks ajoute les cinq nouveaux cadres au cadre existant, pour un total de six.

Par défaut, Fireworks nomme les nouveaux cadres Frame 2, Frame 3, etc. Vous souhaitez dénommer les cadres afin que leurs noms correspondent aux noms de fichiers des images que vous exporterez ultérieurement dans le cadre de ce didactiel.

1. Dans le panneau Cadres, double-cliquez sur Frame 1.
2. Entrez Image0 dans la zone de texte qui s'affiche, puis appuyez sur Entrée pour valider le nouveau nom.

Le développement Flash charge de créer le diaporama vous a demandé de commencer la numérotation à 0 pour des raisons d'encodage.

1. Continuez à renommer les cadres Image 1, Image 2, etc.

Lorsque vous exporterez les images ultérieurement dans ce didacticiel, Fireworks nommera automatiquement les fichiers exportés à l'aide des noms de cadres.

1. Enregistrez votre travail.

Placement et composition d'une image dans chaque cadre

1. Dans le panneau Cadres, sélectionnez le premier cadre.
2. Cliquez sur Fichier > Importer, puis accédez au dossier suivant de votre disque dur:

localSites/cafe_townsend/fireworks_assets/camera_files

1. Sélectionnez plat_1013.jpg, puis cliquez sur Ouvrir.
2. Alignez le pointeur d'insertion légèrement à l'extérieur du coin supérieur gauche du document, comme dans l'illustration suivante, puis cliquez pour insérer l'image.

L'image s'affiche, sélectionnée, sur le document.

L'image est plus grande que le document, comme l'indique le contour bleu. Au lieu de recadrer l'image, vous la déplacez jusqu'à ce que la portion d'image souhaitée figure dans la « fenêtre » créée par le document. Lorsque vous exporterez l'image ultérieurement dans le cadre de ce didacticiel, elle sera recadrée de façon à ce que sa hauteur et sa largeur correspondent à la taille du document (700 x 150 pixels).

1. Pour composer l'image, faites-la glisser jusqu'à afficher la portion souhaitée dans la fenêtre créée par le document.

1. Cliquez n'importe où en dehors de l'image sélectionnée pour la désélectionner.
2. Répétez les étapes 1 à 6 pour les cinq images restantes, en veillant à sélectionner un nouveau cadre vide avant d'importer chaque image.
3. Enregistrez votre travail.

Aperçu avant exportation et exportation des images

Le fichier source de l'image contient six cadres dans lesquels figurent six images. Le maintien des images dans les cadres vous permet de les exporter toutes en même temps avec les paramètres de fichier de votre choix, comme suit.

1. Clique sur Fichier ↓ Aperçu de l'image.

1. Dans la boîte de dialogue Aperçu de l'image, exécutez les actions suivantes :
2. Dans le menu contextuel Format, cliquez sur JPEG. Le format JPEG est idéal pour des photographies numériques ou numérisées, des images comptant des textures ou des dégradés, ou toute autre image nécessitant plus de 256 couleurs. Pour plus d'informations sur la sélection des formats, voir Fichiers graphiques, page 27.
3. Dans la zone de texte Qualité, entrez 75 ou utilisez le curseur Qualité.
4. Sélectionnez l'option Bords couleur plus nets. Cliquez sur Exporter.
5. Dans la boîte de dialogue Exporter qui s'affiche, ouvrez le dossier suivant de votre disque dur :

localSites/cafe_townsend/images/

1. Dans le menu contextuel Exporter, cliquez sur Images vers fichiers.
2. Assurez-vous que l'option Rogner les images n'est pas sélectionnée.
3. Cliquez sur Exporter.

Fireworks exporte chaque cadre dans un fichier d'image distinct du dossier images en lui attribuant le nom que vous avez attribué au cadre.

Affichage des images optimisées finale

Après avoir exporté les images, vous pouvez voir leur aspect en les ouvrant dans Fireworks.

Vous pouvez observer ce qui suit :

Toutes les images sont recadrées afin d'afficher la composition que vous avez créée en positionnant les images sur le document. Toutes les images ont une largeur de 700 pixels, une hauteur de 150 pixels et une résolution de 72 pixels par pouce.

Les tableaux ci-après montrent comment les images finales diffèrent des fichiers JPEG originaux créés à l'aide de l'appareil photo numérique :

Fichiers originaux de l'appareil photo numérique

Nom de fichier	Dimensions du fichier	Taille du fichier
1013.jpg	1679 x 1170 pixels	402 Ko
1088.jpg	2920 x 1876 pixels	1732 Ko
1095.jpg	2063 x 1444 pixels	753 Ko
1111.jpg	3040 x 1840 pixels	2831 Ko
1320.jpg	3284 x 1855 pixels	1364 Ko
1396.jpg	3346 x 2000 pixels	1435 Ko

Images finales

Nom de fichier	Dimensions du fichier	Taille du fichier
Image0	700 x 150 pixels	12 Ko
Image1	700 x 150 pixels	16 Ko
Image2	700 x 150 pixels	23 Ko
Image3	700 x 150 pixels	19 Ko
Image4	700 x 150 pixels	21 Ko
Image5	700 x 150 pixels	14 Ko

Les images finales ont les dimensions uniformes dont vous avez besoin et leur taille est beaucoup plus petite, ce qui est essentiel pour les sites Web publics.

Dans le cadre de ce didacticiel, vous avez appris à traiter par lots des fichiers d'image volumineux, à créer et nommer des cadres, à placer des images dans des cadres, ainsi qu'à prévisualiser et exporter des fichiers. Pour plus d'informations sur certaines des fonctions mentionnées dans ce didacticiel et sur d'autres fonctions de Fireworks, voir le manuel Utilisation de Fireworks.

Didacticiel : création d'une bannière de page

Le présent didacticiel vous guide dans la tâche de conception d'une bannière de page avec Macromedia Fireworks 8. Vous allez apprendre à importer des actifs d'image, à manipuler des calques, des formes, des masques et du texte, ainsi qu'à optimiser et exporter le graphique de bannière terminé.

Dans le cadre de ce didacticiel, vous allez accomplir les tâches suivantes :

Examen de votre tâche 223

Ajout d'un arrêté-plan et placement du logo 224

Organisation de vos objets à l'aide de calques 228

Création d'un arrêté-plan contrasté pour le logo 230

Création d'un contour autour de la bannière 234

Création d'un effet de bord oblique 237

Ajout d'une ligne de balise à la bannière 238

Exportation d'un fichier d'image optimisé 239

Examen de votre tâche

Durant les étapes de planification du site Café Townsend, plusieurs projets de graphiques de bannière possibles ont été discutés. Voici une esquisse du projet approuvé par les représentants de Café Townsend :

Vous recevez un ensemble d'actifs. Notre tâche consiste à créer la bannière finale pour le site Web en vous basant sur l'esquisse du projet.

Ajout d'un arrêté-plan et placement du logo

Après avoir créé un nouveau fichier PNG pour la bannière, vous souhaitez importer une photo devant servir d'image d'arrière-plan pour le graphique. Vous souhaitez également importer le logo de Café Townsend.

Vous commencez par créer un nouveau fichier PNG pour la bannière.

Vous devez définir un dossier de travail avant de commencer, si ce n'est pas déjà fait. Pour plus d'informations, consultez la section Configuration de votre site et de vos fichiers de projet.

1. Dans Fireworks, cliquez sur Fichier > Nouveau.
2. Dans la boîte de dialogue Nouveau document, exécutez les actions suivantes:
3. Entrez 700 pour la largeur et 92 pour la hauteur. Assurez-vous que les deux mesures sont exprimées en pixels. Définissez la valeur de Couleur du fond sur Personnelisée, puis selectionnez la couleur noire dans le menu des couleurs personnelisées.
4. Cliquez sur OK pour créer le document.

Si la fenêtre Document n'est pas agrandie, c'est-à-dire si elle n'occupe pas toute la surface centrale de l'écran, agrandissez-la en cliquant sur le bouton Agrandir (Windows) ou en activant la case Zoom (Macintosh) dans le haut de la fenêtre Document. Cette opération agrandit considérablement votre espace de travail.

1. Cliquez sur Fichier > Enregistrer, puis ouvrez le dossier suivant de votre disque dur:

localSites/cafe_townsend/images/

1. Nommez le fichier banner_graphic.png.

Sur Macintosh, sélectionnez l'option Ajouter l'extension du nom de fichier, si ce n'est pas déjà fait.

1. Cliquez sur Enregistrer.

Importation de l'image d'arrière-plan

L'arrière-plan du graphique de bannière consiste en une photographie de l'intérieur d'un restaurant Café Townsend. Vous pouvez importer la photographie dans votre document, puis l'ajuster pour qu'elle corresponde aux dimensions de la bannière.

1. Tandis que le fichier bannerGraphic.png est ouvert dans Fireworks, cliquez sur Fichier > Importer, puis ouvrez le dossier suivant de votre disque dur : localSites/cafe_townsend/fireworks_assets/
2. Sélectionnez cafePhoto.jpg, puis cliquez sur Ouvrir.
3. Alignez le pointeur d'insertion sur le coin supérieur gauche du document, comme dans l'illustration suivante, puis cliquez pour insérer l'image.

L'image s'affiche, sélectionnée, sur le document. L'image est plus grande que le document, comme l'indique le contour bleu. Pour l'insérer comme vous le souhaitez, mettez à l'échelle et positionnez la photo.

1. Tandis que l'image est sélectionnée, cliquez sur l'outil Mise à l'échelle dans le panneau Outils (ou appuyez sur Q).

1. Effectuez un zoom arrêté pour afficher la photo tout entière en utilisant le menu contextuel de définition du grossissement figurant dans le coin inférieur droit de la fenêtre Document.

1. A l'aide de l'outil Mise à l'échelle, réduisez la taille de la photo d'environ 25 pour cent en cliquant sur le point de sélection dans le coin inférieur droit de la photo, puis en faisant glisser la souris vers le coin supérieur gauche.

Le déplacement d'un point de sélection d'angle à l'aide de l'outil Mise à l'échelle permet de redimensionner la photo en réservant ses proportions.

1. Cliquez sur la photo, puis faites-la glisser de façon à ce que le document affiche la portion de la photo qui doit être visible dans la bannière.

Déplacez la photo afin de composer une image intéressante pour l'arrière-plan du graphique de bannière.

1. Lorsque l'image vous convient, enregistrez votre travail.

Importation du logo

Vous importez ensuite un graphique vectoriel du logo Café Townsend. Les graphiques vectoriels sont l'un des types de graphiques que vous créez, importez ou modifiez dans Fireworks. Pour plus d'informations, voir Graphiques vectoriels et bitmap, page 17.

Le fichier que vous importez a été créé comme graphique vectoriel dans Fireworks et enregistré au format Adobe Illustrator (fichier AI), couramment utilisé pour les travaux de conception graphique.

1. Tandis que le fichier banner Graphic. png est ouvert dans Fireworks, effectuez un zoom avant jusqu'à l'afficher dans la taille d'origine en sélectionnant la valeur 100% dans le menu contextuel de définition du grossissement si vous ne l'avez pas encore fait.
2. Cliquez sur Fichier > Importer, puis accédez au dossier suivant de votre disque dur : localSites/cafe_townsend/fireworks_assets/
3. Sélectionnez cafeLogo.ai, puis cliquez sur Ouvrir.

La boîte de dialogue Options de fichier vectoriel s'affiche. Vous pouvez y définir le mode d'importation d'un fichier vectoriel.

1. Cliquez sur OK pour accepter les options par défaut.
2. Positionnez le pointeur d'insertion à l'intérieur du coin supérieur gauche de la bannière, puis cliquez pour insérer le graphique. À ce stade, le logo n'est pas clairement visible parce qu'il s'affiche en noir et transparent sur une image d'arrière-planASF. Vous le mettrez en surbrillance ultérieurement afin qu'il se détache mieux.
3. Enregistrez votre travail.

Organisation de vos objets à l'aide de calques

A présent que vous avez importé deux graphiques dans votre document, vous souhaitez les organiser en calques de façon à pouvoir plus aisément composer la bannière et manipuler ses éléments.

Vous souhaitez en particulier organiser les éléments sur trois calques : un pour l'arrière-plan, un second pour le logo et un troisième pour d'autres graphiques. Pour mieux identifier les éléments de chaque calque, vous souhaitez attribuer aux calques un nom indiquant clairement leur contenu.

1. Assurez-vous que le fichier banner_graphic.png est ouvert dans Fireworks.
2. Si le panneau Calques n'est pas déjà ouvert, cliquez sur Fenêtre > Calques.

À ce stade, le graphique de bannière contient un seul calque nommé Calque 1.

1. Au bas du panneau, cliquez sur le bouton Nouveau calque/Dupliquer à deux reprises pour créer deux calques supplémentaires.

1. Renommez les calques en double-cliquant sur chacun d'eux, puis en entrant les noms suivants dans la zone de texte Nom du calque qui s'affiche :

Pour Calque 3, Graphiques Pour Calque 2, Logo Pour Calque 1, Arrière-plan

1. Modifiez l'ordre d'empilage des calques en cliquant sur le calque Graphiques et en le faisant glisser sous le calque Logo.

Une ligne d'indique l'endroit où l'objet sera déposé si vous relâchez le bouton de la souris à ce moment précis. Pour placer un élément sur un calque, relâchez le bouton de la souris lorsque la ligne s'affiche au bas du calque.

Il est toujours judicieux de nommer vos calques afin de les identifier facilement par la suite. Lorsqu'un document prend du volume et contient de nombreux calques et objets, il peut devenir difficile de les gérer s'ils ne portent pas de noms-Uniques.

En savoir plus sur les calques Les calques divisent un document Fireworks en plusieurs plans distincts. Un document peut être composé de nombreux calques, chacun pouvant contenir de nombreux objets. Dans Fireworks, le panneau Calques répertorie les calques d'un document et les objets que chacun d'eux contient.

Les objets et les calques figurant dans le panneau Calques indiquent l'ordre d'empilage de ces éléments dans la composition. Les calques et les objets situés dans la partie supérieure du panneau recouvrent les calques et les objets situés en dessous dans le panneau. En modifiant l'ordre d'empilage des calques ou des objets à l'intérieur d'un calque, vous pouvez créer l'effet d'objets masquant d'autres objets.

1. Faites glisser l'image du logo (nommée « Groupe : 3 objets ») du calque Arrière-plan vers le calque Logo.

Le panneau Calques doit ressembler à ceci :

1. Enregistrez votre travail.

Création d'un arrêté-plan contrasté pour le logo

Le logo Café Townsend n'est pas clairement visible parce qu'il s'affiche en noir et transparent sur un arrêté-plan. Vous décidez de placer un rectangle de couleur plus claire derrière le logo afin de le faire ressortir davantage.

1. Dans le panneau Calques, cliquez sur le calque Logo.
2. Dans le panneau Outils, cliquez sur l'outil Rectangle.

1. Dans l'Inspecteur des propriétés, définissez les propriétés suivantes pour l'outil :

a. Activez la case Catégorie de remplissage, puis cliquez sur Dégradé > Linéaire.

b. Activez le sélecteur de couleur de replissage situé à côté de l'icône du pot de peinture, puis cliquez sur le bouton juste au-dessus de l'étiquette Prédéfini dans la boîte de dialogue qui s'affiche.

Une fenêtre contextuelle s'affiche, qui vous permet de sélectionner la première couleur de dégradé.

c. Entrez F7EFE3 dans la zone de texte située dans le haut de la fenêtre, puis appuyez sur Entrée.

La couleur initiale du dégradé change en fonction de votre choix.

d. Cliquez sur le second bouton de couleur de dégradé (dans la partie droite de la boîte de dialogue), puis cliquez sur la nuance blanche avec le pointeur de la pipette.

La couleur finale du dégradé change en fonction de votre choix.

Cliquez sur le bouton Opacité correspondant à la seconde couleur de dégradé dans le coin supérieur droit de la boîte de dialogue :

La fenêtre contextuelle Opacité s'affiche.

f. Utilisez le curseur pour définir l'opacité de la seconde couleur de dégradé sur 50%.

Augmentez le grossissement du document afin de fignoler votre travail.

1. Appuyez sur Entrée pour accepter les paramètres, puis tracez un rectangle sur le logo Café Townsend dans la bannière.

Lorsque vous relâchez le bouton de la souris, un rectangle semi-transparent s'affiche sur le logo.

1. Sélectionnez l'outil Pointeur (ou appuyez sur V), puis faites glisser les points d'angle bleus du rectangle afin de positionner et de redimensionner celui-ci de façon à ce qu'il s'inscrive à l'intérieur du logo.

Le rectangle masque partiellement le logo situé en dessous. Vous souhaitez modifier l'ordre d'empilage des deux objets de façon à ce que le rectangle se trouve sous le logo.

1. Dans le calque Logo du panneau Calques, faites glisser l'objet rectangle de façon à ce qu'il se trouve sous l'objet logo (nommé « Groupe : 3 objets »).

Le logo s'affiche à présent correctement, avec le rectangle mettant en évidence au lieu de masquer partiellement le logo.

1. Enregistrez votre travail.

Création d'un contour autour de la bannière

Vous souhaitez créer un contour noir ajusté de la bannière. Pour créer cet effet, vous décidez d'utiliser un rectangle arrondi comme masque vectoriel.

Un masque vectoriel recadre ou découpe l'objet sous-jacent en fonction de la forme de son trajet, en créant un effet d'emporte-pièce.

1. Clique sur le calque Arrière-plan dans le panneau Calques.
2. Dans la section Vecteur du panneau Outils, Sélectionnez l'outil Rectangle arrondi.

1. Dans l'Inspecteur des propriétes, définissez les propriétés suivantes pour l'outil :
2. Dans le menu contextuel Catégorie de remplissage, cliquez sur Aucune.
3. Activez la sélection de couleur à côté de l'icône du crayon, puis définissez la couleur de trait sur une nuance de gris clair, telle que #666666.
4. Définissez la pointe de trait sur 1 et la catégorie de trait sur 1 pixel adouci.
5. Sur le document, tracez et positionnez le rectangle arrondi à l'intérieur de la bannière.

La zone à l'extérieur du rectangle arrondi s'affiche en noir, formant le contour de la bannière.

Utilisez les points de sélection bleus pour ajuster la taille de la forme. Utilisez les points de contrôle en forme de losange jaune pour ajuster l'arrondi des angles.

1. Tandis que le rectangle arrondi est sélectionné, cliquez sur Edition > Couper.
2. Dans le panneau Calques, cliquez sur la photo d'arrière-plan (appelée « Bitmap ») sur le calque Arrière-plan.

Vous souhaitez appliquer le masque à cet objet.

1. Cliquez sur Édition > Coller en tant que masque pour appliquer le masque à la photo.

Sur le document, la zone couverte par le rectangle arrondi est visible. La zone extérieure est masquée.

Dans le panneau Calques, une vignette de masque s'affiche à côté de la photo d'arrière-plan. La surbrillance verte autour de la vignette du masque indique qu'elle est sélectionnée.

1. Enregistrez votre travail.

Création d'un effet de bord oblique

Vous souhaitez créer un effet de bord oblique dans la bannière, comme illustré dans l'esquisse de bannière (voir Examen de votre tâche, page 223). Pour produire cet effet, vous décidez de créer une forme et de l'utiliser comme masque.

1. Dans le panneau Calques, cliquez sur le calque Graphiques.
2. Dans le panneau Outils, cliquez sur l'outil Plume.

1. Dans l'Inspecteur des propriétés, définissez les propriétés suivantes pour l'outil Plume :
2. Activez le sélecteur de couleur de Traits à côté de l'icône du crayon, puis cliquez sur le bouton Transparent.
3. Dans le menu contextuel Catégorie de remplissage, cliquez sur Unie.

• Activez le sélecteur de couleur de remplissage à côté de l'icône du pot de peinture, puis sélectionnez la nuance noire à l'aide du pointeur de la pipette.
• ire, puis cliquez sur le premier point pour fermer la forme.

Votre rectangle doit être un peu plus haut que le graphique de bannière et doit avoir environ un tiers de sa longueur.

1. Sélectionnez l'outil Pointeur (ou appuyez sur V), puis déplacez la forme de façon à ce qu'elle couvre le côté gauche de la bannière.

Remarque

Comme la forme se trouve sur le calque Graphiques, elle masque partiellement l'image d'arrière-plan mais pas le logo. Conformément à l'ordre d'empilage indiqué dans le panneau Calques, le calque Logo se trouve au-dessus du calque Graphiques tandis que le calque Arrière-plan se trouve en dessous.

1. Cliquez sur l'outil Sous-selection (ou appuyez sur A), puis sur les points d'ancrage de la forme afin de l'ajuster de façon à ce que son côté soit oblique, comme suit.

Café townsend

1. Enregistrez votre travail.

Ajout d'une ligne de balise à la bannière

Ensuite, vous ajoutez la ligne de balise de la société, Nouveau World Cuisine, à la bannière.

1. Dans le panneau Calques, cliquez sur le calque Graphiques.
2. Dans le panneau Outils, cliquez sur l'outil Texte.
3. Dans l'Inspecteur des propriétés, définissez les propriétés suivantes pour l'outil :

Dans le menu contextuel Police, cliquez sur Arial. Entrez 14 pour la taille de la police. Cliquez sur le bouton Gras. - Activez la zone Couleur, entrez F7EFE3 comme couleur de texte, puis appuyez sur Entrée. Cliquez sur le bouton Alignement gauche.

1. Cliquez sous le graphique du logo, puis entrez Nouveau World Cuisine.

1. Cliquez une fois en dehors du bloc de texte pour appliquer votre entrée de texte.

Fireworks crée un nouvel objet texte sur le calque Graphiques, dont le nom par défaut correspond au texte que vous avez entré. Cette fonction vous offre la possibilité d'identifier rapidement les objets texte que vous utilisez dans votre composition.

1. Enregistrez votre travail.

Exportation d'un fichier d'image optimisé

Après que vous avez terminé le graphique de bannière, vous êtes prêt à optimiser et exporter l'image comme fichier JPEG.

La gageure de la conception de graphiques Web consiste à créer des images sophistiquées pouvant être chargées le plus vite possible. Pour ce faire, vous devez réduire la taille du fichier de votre image, tout en préservant le plus possible la qualité. Cette recherche du meilleur compromis est appelée optimisation : elle consiste à partager les valeurs et les adaptations pour le nombre de couleurs, le niveau de compression et la qualité.

Optimisation et aperçu de l'image

Avant d'exporter un document Fireworks, vous devez toujours commencer par l'optimiser. L'optimisation permet d'exporter une image avec le meilleur compromis possible entre compression et qualité.

1. Si le panneau Optimiser n'est pas encore ouvert, cliquez sur Fenêtre > Optimiser pour l'ouvrir.
2. Dans le menu contextuel Paramètres, cliquez sur JPEG - Qualité supérieure.

Les options du panneau se modifient afin de refléter le nouveau paramètre.

Il est possible de modifier ces paramètres, mais, pour ce didacticiel, vous utiliserez les paramètres par défaut.

1. Cliquez sur le bouton Aperçu en haut à gauche de la fenêtre Document.

Fireworks affiche le document tel qu'il se présentera après exportation avec les paramètres actuels.

En bas à gauche de la fenêtre, Fireworks affiche la taille du fichier exporté et l'estimation du temps nécessaire pour afficher l'image sur le Web.

Lors de l'aperçu de l'image, vous pouvez essayer différents paramètres de qualité dans le panneau Optimiser et voir leur effet sur l'image.

Exportation de l'image

Après avoir sélectionné vos paramètres d'optimisation, exportez l'image comme fichier JPEG.

1. Cliquez sur Fichier > Exporter.

Le nom de fichier répertorié possède une extension. jpg. Fireworks a besoin de ce format de fichier car vous l'avez sélectionné dans le panneau Optimiser.

1. Ouvrez le dossier suivant de votre disque dur :

localSites/cafe_townsend/images/

1. Assurez-vous que le menu contextuel Type (Windows) ou Enregistrez sous (Macintosh) indique Images uniquement, puis cliquez sur Exporter.

Le fichier JPEG est exporté vers le dossier images.

Rappelez-vous que le fichier PNG est votre fichier source ou fichier de travail. Bien que vous ayez exporté votre document au format JPEG, vous devez enregistrer le fichier PNG de manière à ce que toute modification apportée par vos soins se reflète également dans le fichier source.

1. Cliquez sur Fichier > Enregistrer pour enregistrer les modifications dans le fichier PNG.

Affichage de l'image exportée

Votre graphique de bannière est terminé. Comparez le fichier JPEG créé durant le processus d'exportation au fichier PNG sur lequel vous avez travaillé.

• Dans Fireworks, cliquez sur Fichier > Ouvrir, ouvrez le dossier images, puis double-cliquez sur le fichier banner_graphic.jpg.

Si le fichier ne figure pas dans le dossier images, dans le menu contextuel Fichiers de type, cliquez sur JPEG.

L'image JPEG s'ouvre dans Fireworks. Comme les images JPEG sont des bitmaps, l'ensemble des objets et des calques sont fusionnés dans le panneau Calques.

L'Inspecteur des propriétés n'affiche que quelques propriétés. Toutes les propriétés disponibles dans le fichier PNG ne sont plus disponibles dans un fichier JPEG.

Vous disposez toujours de votre fichier PNG source de sorte que, si vous neccessitez travailler davantage sur le projet, vous pouvez modifier le fichier PNG et l'exporter de nouveau. Il est always possible de modifier un fichier PNG, même si vous exportez l'image sous un autre format, tel que JPEG.

Dans le cadre de ce didacticiel, vous avez accompli le travail requis pour créer un graphique de bannière dans Fireworks. Vous avez appris à créer un nouveau document et à importer des images. Vous avez également manipulé des calques, des formes, des masques et du texte. Enfin, vous avez optimisé et exporté l'image terminée.

Pour plus d'informations sur certaines des fonctions mentionnées dans ce didacticiel et sur d'autres fonctions de Fireworks, voir le manuel Utilisation de Fireworks.

Didacticiel : création de votre première application flash

Ce didacticiel va vous apprendre à créer une application simple à l'aide de quelques fonctions de programmation de Macromedia Flash Basic 8 et Flash Professionnel 8. Une application Flash peut aller du plus simple et contenir un contenu interactif, au plus complexe, telle une application élaborée qui interagit avec différentes sources de données.

Si ce n'est déjà fait, Macromedia vous recommande, avant de suivre ce didacticiel, de lire Notions de base de Flash, page 65.

Vous pouvez imprimer ce didacticiel en téléchargeant sa version PDF depuis la page de documentation Macromedia Flash, accessible à l'adresse http://www.macromedia.com/go/fl/documentation_fr.

Dans ce didacticiel, vous accomplirez les tâches suivantes :

Examinez notre tâche 246

Étude de l'application finale 246

Création d'un document 248

Création de symboles 252

Édition d'un symbole de scénario. 256

Ajout d'actions à des images 258

Ajout d'étiquettes à des images 260

Ajout d'une interpolation de mouvement 261

Édition du scénario principal 263

Création de la cordure 265

Ajout d'un symbole 270

Ajout d'une zone de texte. 272

Ajout du clip sur la scène 275

Ajout d'un composant Button 275

Ajout de code ActionScript 276

Publication de votre document 283

Examinez votre tâche

Dans ce didacticiel, vous allez créer un type d'application portant le nom de Zone de message flexible ou FMA pour le site Web d'un restaurant fictif nommé Cafe Townsend. Une FMA est un type courant d'application Flash permettant d'afficher du contenu communiquant un message de type informatif ou marketing au public. Dans le cas présent, la FMA affiche des photographies d'éléments extraits d'un menu de restaurant. Le site Web de Macromedia utilise une FMA pour afficher des informations relatives aux nouveaux produits logiciels ou d'autres messages publicitaires. Leur nom de zone de messagerie flexible vient du fait qu'elles occupent généralement une partie de la page Web qui est réservée au contenu susceptible de changer en fonction des besoins de l'entreprise ou du site Web. Par exemple, si le restaurant fictif Café Townsend a prévu un événement particulier, sa FMA pourrait être modifiée de manière à afficher les informations détaillées de cet événement à la place des éléments du menu du restaurant.

Dans ce didacticiel, vous allez d'abord vous familiariser avec une FMA, puis vous créerez votre propre document Flash avant de publier l'application pour le web. Le didacticiel dure environ 30 minutes.

La FMA terminée

Étude de l'application finale

En examinant la version terminée de l'application que vous êtes sur le point de créer, vous découvrez également l'espace de travail Flash.

Les sections suivantes de ce didacticiel doivent les étapes à suivre pour créer l'application vous-même.

Exécution de l'application finale

Pour comprendre le type d'application que vous allez créé dans le cadre de ce didacticiel, vous pouvez examiner une version finale de fichier FLA de l'application dans l'outil de programmation de Flash. Les fichiers FLA représentent le type de fichiers utilisés dans Flash. Vous pouvez également voir la version SWF du fichier dans Flash Player. La version SWF représente la version du fichier que vous publierez dans une page web.

Pour dire la version SWF du fichier dans flash player :

1. Dans Flash, choisissez Fichier > Ouvrir.
2. Localisez le fichier final en utilisant l'un des chemins suivants :

Accédez au fichier terminé dans le dossier localSites\cafe_townsend\completed files\flash que vous avez copié sur votre disque dur dans le Chapitre 4, Didacticiel: Configuration de votre site et des fichiers de projet et double-cliquez sur video).[pod_finished.swf.]

L'application finale s'exécute dans Flash Player. Cliquez sur Suivant pour voir changer les images de plats sous l'effet de l'animation.

1. Après avoir affiché l'application, fermez la fenêtre Flash Player.

Ouverture du document de programmation

Il est utile d'examiner le fichier FLA correspondant au document de programmation final pour comprendre comment l'auteur a conçu l'application.

Pour afficher la version de programmation du fichier dans flash :

1. Dans Flash, choisissez Fichier > Ouvrir.
2. Localisez le document de programmation en utilisant l'un des chemins suivants:

Accédez au fichier terminé dans le dossier localSites\cafe_townsend\completed files\flash que vous avez copié sur votre disque dur dans le Chapitre 4, Didacticiel: Configuration de votre site et des fichiers de projet et double-cliquez sur video).[pod_finished.swf.]

L'application finale du didacticiel est affichée dans l'environnement de programmation Flash.

1. Une fois le fichier ouvert, vous pouvez examiner la scène, le panneau Bibliothèque et le scénario.

La scène comporte de nombreuses formes graphiques que vous apprendrez à manipuler ultérieurement dans ce didacticiel. Le panneau Bibliothèque contient une liste de symboles ou ressources réutilisables utilisés par le document. Quant au scenario, il décrit quand et comment faire apparaitre ces symboles sur la scène. Le panneau Actions contient du code ActionScript qui contrôle la navigation dans le document Flash et imports des fichiers d'image à afficher lors de la lecture de ce document.

Vous en apprendrez davantage sur le rôle de chacun de ces éléments de Flash tout au long de ce didacticiel.

1. Lorsque vous avez examiné le document terminé, fermez-le en évitant d'enregistrer la moindre modification.

Création d'un document

Maintenant que l'application finale que vous êtes sur le point de créer vous a été représentée, vous pouvez créer votre propre document Flash.

Vous devez définir un dossier de travail avant de commencer, si ce n'est pas déjà fait. Pour plus d'informations, consultez la section Configuration de votre site et de vos fichiers de projet.

Pour savoir comment créer une application dans Flash, vous devez commencer par la toute première étape du processus : la création d'un fichier.

Ouverture d'un nouveau document

Vousêtesprêtàcreervoirtespévsonsde laFMA.

Pour créer un document :

1. Choisissez Fichier > Nouveau.
2. Dans la boîte de dialogue Nouveau document, sélectionnez Document Flash et cliquez sur OK.
3. Choisissez Fichier > Enregistrer.
4. Entrez un nom pour le fichier flash_fma.fla puis enregistrez-le dans le dossier cafe_townsend que vous avez copié dans le dossier localSites sur votre disque dur.

Pensez à enregistrer votre fichier régulièrement tout au long de ce didacticiel.

Définition des propriétés du document

La configuration des propriétés du document est la première étape du processus de création dans Flash. Vous pouvez modifier les propriétés du document à tout moment, mais il est recommandé de prendre certaines décisions au début du processus, comme par exemple le choix de la taille de la scène ou de la couleur de l'arrière-plan.

Les propriétés du document correspondent aux propriétés qui s'appliquent à l'ensemble du document Flash, telles que la taille de la scène ou la couleur d'arrière-plan. Vous pouvez utiliser l'inspecteur des propriétés pour spécifier ces paramètres.

Pour définir les propriétés du document :

1. S'il n'est pas déjà ouvert, CHOISSEZ Fenêtre > Propriétés > Propriétés. Par défaut, l'inspecteur des propriétés se trouve dans le bas de la fenêtre de l'application Flash.

L'inspecteur des propriétés

Si l'inspecteur des propriétés n'est pas complètement développé, clique sur le triangle blanc dans le coin inférieur droit.

1. Entrez 60 dans la zone de texte Cadence de l'inspecteur des propriétés. L'application lira les animations à une cadence de 60 images par seconde, soit la cadence optimale de lecture fluide d'une animation sur le web.
2. Cliquez sur Taille pour fixer la taille de la scène.

Présentation de l'inspecteur des propriétés L'inspecteur des propriétés permet d'afficher et de modifier les propriétés des objets sélectionnés. Ces propriétés dépendent du type d'objet sélectionné. Par exemple, si vous choisissez un objet/texte, l'inspecteur des propriétés affiche les paramètres d'affichage et de modification des attributs de texte. Dans le cas présent, vous venez d'ouvrir un nouveau document, ce qui explique que l'inspecteur des propriétés affiche les propriétés d'un document.

1. Dans la boîte de dialogue Propriétés du document, entrez 700 pour la largeur et 150 pour la hauteur, puis cliquez sur OK.

Flash insère automatiquement l'indication px (c.-à-d. pixel) après ces nombres.

La boîte de dialogue Propriétés du document

1. Dans le scénario, cliquez sur la valeur dans le menu Zoom et entrez 75%.

De la vue, il est plus facile de voir votre document entier dans la fenêtre de document.

Appuyez sur Entrée (Windows) ou sur Retour (Macintosh).

1. Enregistrez votre travail.

Pour plus d'informations sur la définition des propriétés d'un document, consultez la section Création et ouverture d'un document et définition de ses propriétés du guide Utilisation de Flash.

Création de symboles

Vous allez créer quelques symboles, c'est-à-dire des actifs réutilisables. Les symboles permettent d'utiliser la même ressource plusieurs fois sans avoir à enregistrer plusieurs copies du même fichier FLA. Stockez le symbole dans le panneau Bibliothèque, puis faites glisser des occurrences de ce symbole sur la scène lorsque nécessaire.

Pour créer le symbole :

1. Sélectionnez Insertion > Nouveau symbole.
2. Dans la boîte de dialogue Créer un nouveau symbole, tapez imageHolder dans le champ de texte Nom.

La valeur par défaut du Comportement est Animation. Ne la modifie pas.

1. Cliquez sur OK.

Le nouveau symbole est ajouté au panneau Bibliothèque (Fenêtre > Bibliothèque) et Flash passe en mode d'édition de symbole.

Remarque

En mode d'édition de symbole, la scène disparaît et la partie principale de la fenêtre de l'application Flash devient une zone de dessin où vous pouvez tracer et modifier le symbole.

1. En mode d'édition de symbole, Sélectionnez l'outil Rectangle du panneau Outils (Fenêtre > Outils).

Présentation des symboles et du panneau Bibliothèque Les symboles sont des ressources réutilisables qui vous permettent d'utiliser une seule ressource plusieurs fois dans votre document Flash sans avoir à la dupliquer dans le fichier. En ne stockant qu'un exemplaire du symbole dans le document Flash, vous faites en sorte que sa taille soit réduite. Un symbole peut être simple, par exemple un bouton ou un graphique, ou plus complexe, par exemple un clip. Lorsque vous avez créé un symbole, vous le stockez dans le panneau Bibliothèque. Le panneau Bibliothèque sert à stocker et organiser tous les symboles de votre document. Pour réutiliser un symbole, il suffit de le faire glisser du panneau Bibliothèque sur la scène. Ce faisant, Flash crée une nouvelle occurrence du symbole sur la scène. Une occurrence n'est rien d'autre qu'une référence au symbole d'origine, qui indique à Flash qu'il doit « dessiner une copie du symbole spécifique à cet endroit ». L'emploi de symboles et d'occurrences vous permet d'organiser vos actifs et de réduire la taille de votre fichier Flash. En outre, vous pouvez mettre à jour l'apparence ou le comportement de toutes les occurrences d'un symbole précis en modifiant le symbole. Les modifications s'appliqueront à toutes les occurrences du symbole dans votre document.

1. Sélectionnez la couleur blanc (#FFFFFF) dans le sélecteur de couleur de trait du panneau Outils.
2. Sélectionnez la couleur gris clair (#CCCCCC) dans le sélecteur de couleur de remplissage du panneau Outils.
3. Déplacez la souris dans la zone de dessin tout en maintenant le bouton enfoncé, de manière à dessiner un large rectangle aplati.
4. Cliquez sur l'outil de sélection dans le panneau Outils.
5. Double-cliquez sur le rectangle que vous avez dessiné afin de sélectionner son remplissage et son trait.

Le trait représente la ligne qui constitue la contours d'une forme.

1. Entrez 0 dans les deux zones de texte X et Y de l'inspecteur des propriétés.

Le coin supérieur gauche du symbole est ainsi placé dans le coin supérieur gauche de la scène.

1. Tapez 700 dans la zone Largeur (L) et 150 dans la zone Hauteur (H), puis appuyez sur Entrée (Windows) ou Retour (Macintosh).

L'inspecteur des propriétés affichant les valeurs correctes pour X, Y, la largeur et la hauteur

Lorsque vous entrez des valeurs dans les zones de texte d'un panneau, vous devez appuyer soit sur la touche Tab, soit sur la touche Entrée (Windows) ou la touche Retour (Macintosh) pour permettre à Flash de reconnaître la valeur.

Des occurrences distinctes de ce premier symbole que vous venez de créer deviendront les conteneurs des différentes images que votre FMA affichera. C'est pourquoi vous l'avez appelé imageHolder. Vous allez ensuite créer un autre symbole qui contiendra un groupe de 5 occurrences du symbole imageHolder. Par la suite, vous animerez de nouveau symbole à la verticale de manière à modifier l'image qui apparait sur la partie visible de la scène.

Pour créer le symbole suivant avec 5 occurrences d'imageholder :

1. Sélectionnez Insertion > Nouveau symbole.
2. Dans la boîte de dialogue Créer un nouveau symbole, tapez diapositives dans le champ de texte Nom puis cliquez sur OK. Vous restez en mode d’édition de symbole.
3. Sélectionnez 25% dans le menu Zoom du scénario.
4. Dans le panneau Bibliothèque (Fenêtre > Bibliothèque), tirez le symbole imageHolder dans la zone de dessin. Vous venez de créer une occurrence du symbole imageHolder. Cette occurrence fait partie du symbole des nouvelles diapositives en cours de création.
5. La nouvelle occurrence étant toujours sélectionnée sur la scène, tapez holder0 dans la zone Nom de l'occurrence de l'inspecteur des propriétés. L'occurrence dispose ainsi de son propre nom qui est différent de celui du symbole.
6. Entrez également 0 dans les deux zones de texte X et Y de l'inspecteur des propriétés, puis appuyez sur Entrée (Windows) ou Retour (Macintosh). Le coin supérieur gauche de l'occurrence holder0 est ainsi placé dans le coin supérieur gauche du symbole des diapositives.
7. Tirez le symbole imageHolder dans la zone de dessin à partir du panneau Bibliothèque, puis placez-le juste sous l'occurrence holder0.
8. Dans l'inspecteur des propriétés, entrez holder1 dans la zone de texte Nom de l'occurrence.
9. Entrez 0 dans la zone X et 150 dans la zone Y, puis appuyez sur Entrée ou Retour.
10. Répétez la procédure pour les troisième, quatrième et cinquième occurrences du symbole imageHolder.

Dans l'inspecteur des propriétés, attribuez les propriétés suivantes aux nouvelles occurrences :

Troisième occurrence :

• Nom d'occurrence = holder2 X=0 Y=300

Quatrième occurrence :

• Nom d'occurrence = holder3 X=0 Y=450

Cinquième occurrence :

• Nom d'occurrence = holder4 X=0 Y=600

Vous avez terminé la création du symbole nommé « slides ». Vous allez ensuite créer un troisième symbole qui contiendra une occurrence du symbole « slides ». Comme vous pouvez le constater, l'imbrication d'occurrences de symboles à l'intérieur d'autres symboles est une technique courante de programmation Flash.

Le symbole « slides » terminé

Pour créer le troisième symbole :

1. Sélectionnez Insertion > Nouveau symbole.
2. Dans la boîte de dialogue Créer un nouveau symbole, tapez slideShow dans le champ de texte Nom puis cliquez sur OK.
3. Tirez le symbole slides, que vous avez créé dans la section précédente, du panneau Bibliothèque vers la zone de dessin du nouveau symbole slideShow.

Une occurrence du symbole diapositives est ainsi créée à l'intérieur du nouveau symbole diaporama.

Le panneau Bibliothèque avec les symboles slides et slideShow

1. L'occurrence du symbole étant toujours sélectionnée, entrez 0 dans les zones X et Y de l'inspecteur des propriétés.
2. Entrez slides_mc dans la zone de texte Nom de l'inspecteur des propriétés.

Édition d'un symbole de scénario

Une fois ces 3 symboles créés, vous allez modifier le symbole slideShow en ajoutant une animation à son scénario. Cette animation provoquera, dans le document terminé, le glissement vers le haut des images de plats lorsque l'utilisateur cliquera sur un bouton que vous ajouterez ultérieurement.

Pour modifier le symbole diaporama :

1. Sans quitter le mode d'édition de symbole, cliquez sur le bouton Insérer un calque dans le scenario.

Le bouton Insérer un calque dans le scénario du symbole slideShow

Un calque est ainsi ajouté au scénario du symbole slideShow.

1. Dans le scénario, sélectionnez l'image 20 des calques 1 et 2.

Sélection de l'image 20 des calques 1 et 2

Présentation des clips et des scénarios imbriqués Chaque symbole de clip peut posséder son propre scénario, qui permet au clip de contenir une animation ou du code ActionScript spécifique. C'est la raison pour laquelle le nom du symbole que vous êtes en train de modifier s'affiche en haut du scénario lorsque vous êtes en mode d'édition de symbole.

L'emploi de symboles et de scénarios imbriqués vous offre une grande flexibilité dans la manière de créer votre document Flash et d'organiser ses fonctionnalités. Un exemple classique d'une telle situation consiste en une voiture qui traverse la scène et dont les roues tournent. L'animation de la voiture traversant la scène pourrait être placée dans le scénario principal du document Flash. Chacune des roues en mouvement devra correspondre à une occurrence d'un symbole du clip possédant son propre scénario. L'animation de rotation des roues sera mise en œuvre dans le scénario du clip. Cette approche est bien plus facile à déployer que la création d'une animation dans le scénario principal des roues, qui tournent et traversent toutes les deux la scène.

1. Choisissez Modification > SCENARIO > Convertir en images-clés.

Vous ajoutez ainsi des images au scénario et des images-clés aux images sélectionnées (image 20).

Le scénario avec les images-clés ajoutées à l'image 20

1. Répétez l'opération en sélectionnant les calques 1 et 2 à l'image 40 puis en choisissant Modification > Scenario > Convertir en images-clés.
2. Répétez l'opération aux images 60 et 80.

Utilisez au besoin la barre de définition située en bas du scénario pour afficher ces images.

Ajout d'actions à des images

Dans cette section, vous ajouterez une petite quantité de code ActionScript pour contrôler le déplacement de la tête de lecture dans le scénario du clip slideShow. En ajoutant des méthodes stop(), vous forcez la tête de lecture à s'arrêter et à attendre à certaines images. Vous ajouterez par la suite du code ActionScript pour faire de nouveau bouger la tête de lecture.

Pour ajouter le code actionscript :

1. Dans le scénario, sélectionnez l'image 1 du calque 2.
2. Choisissez Modification > SCENARIO > Convertir en images-clés.

Une image-clé est ainsi ajoutée à l'image, si bien qu'il existe des images-clés dans les images 1 et 2 du calque 2.

1. Sélectionnez l'image 1 du calque 2.
2. Ouvrez le panneau Actions (Fenêtre > Actions). Dans le panneau Actions, le mode Assistant de script est activé : vous verrez la mention « Double-cliquez sur l'élé
3. Dans le panneau Actions, tapez le code ActionScript suivant : stop(); Ce code entraîne l'arrêt de la tête de lecture lisant le clip slideShow chaque fois qu'il atteint l'image 1. La dette a minuscule apparait dans l'image 1 du calque 1 du scenario. Elle indique que cette image contient du code ActionScript.
4. Dans le scénario, sélectionnez l'image 20 du calque 2.
5. Choisissez Modification > SCENARIO > Convertir en images-clés.
6. Sélectionnez l'image 20 du calque 2.
7. Dans le panneau Actions, tapez le code ActionScript stop();
8. Dans le scénario, sélectionnez l'image 40 du calque 2.
9. Choisissez Modification > SCENARIO > Convertir en images-clés.
10. Sélectionnez l'image 40 du calque 2.
11. Dans le panneau Actions, tapez le code ActionScript stop();
12. Dans le scénario, sélectionnez l'image 60 du calque 2.
13. Choisissez Modification > SCENARIO > Convertir en images-clés.
14. Sélectionnez l'image 60 du calque 2.
15. Dans le panneau Actions, tapez le code ActionScript stop();
16. Dans le scénario, sélectionnez l'image 80 du calque 2.
17. Dans le panneau Actions, tapez le code ActionScript stop();

Ajout d'étiquettes à des images

Vous allez maintenant ajouter des étiquettes à des images spécifiques. Ajouter une étiquette à une image vous permet de faire référence à cette image dans ActionScript. Vous pouvez ainsi rédiger du code ActionScript effectuant des actions sur ces images. Vous ajouterez ultérieurement du code ActionScript permettant à la tête de lecture de passer à ces images étiquétées.

Pour ajouter des étiquettes d'images :

1. Dans le scenario, sélectionnez l'image 2 du calque 2.
2. Entrez slide0 dans la zone de texte Étiquette de l'image de l'inspecteur des propriétés. Dans le scénario, une icône représentant un drapeau et le libellé de l'image s'affichent dans l'image 2 du calque 2.
3. Dans le scenario, sélectionnez l'image 21 du calque 2.
4. Entrez slide1 dans la zone de texte Étiquette de l'image de l'inspecteur des propriétés.
5. Dans le scénario, sélectionnez l'image 41 du calque 2.
6. Entrez slide2 dans la zone de texte Étiquette de l'image de l'inspecteur des propriétés.
7. Dans le scénario, sélectionnez l'image 61 du calque 2.
8. Entrez slide3 dans la zone de texte Étiquette de l'image de l'inspecteur des propriétés.

Le scénario avec les libellés des images

Ajout d'une interpolation de mouvement

Une interpolation de mouvement représente un type d'animation dans laquelle un objet se déplace d'une position à une autre. Dans ce projet, vous allez faire déplacer les images de plats vers le haut lorsque l'utilisateur cliquera sur un bouton que vous ajouterez ultérieurement.

Pour ajouter les interpolations de mouvement :

1. Dans le scénario, sélectionnez l'image 1 du calque 1.
2. Dans l'inspecteur des propriétés, sélectionnez Mouvement dans le menu Interpolation.

Les images 1 à 19 du calque 1 deviennent une interpolation de mouvement. Une flèche s'affiche dans ces images dans le scénario.

1. Dans l'inspecteur des propriétés, tirez la glissière à côté de la zone Accélération jusqu'à ce que cette zone contienne 100.

Cette valeur force l'interpolation à décelérer à la fin du mouvement. Ainsi, le mouvement débute brusquement et se termine plus lentement.

1. Dans le scénario, sélectionnez l'image 20 du calque 1.

Présentation des interpolations de mouvement Le terme d'interpolation de mouvement vient du fait que l'animation inclut du mouvement ainsi que de la manière dont ce mouvement est créé. Le terme interpolation (tween) est une abréviation d'« intermédiaire (in between) ». Vous définissez des animations à interpolation de mouvement en définissant les positions de début et de fin de l'objet animé, puis en laissant Flash calculer toutes les positions intermédiaires de l'objet. De cette façon, vous pouvez créer des animations de mouvements en définissant simplement les positions de début et de fin de l'objet que vous animez.

Présentation de l'accélération des animations Le comportement par défaut de l'interpolation de mouvement est défini pour que l'animation défile à la même vitesse durant toute la durée de la lecture. Un tel comportement est toutefois rarement agréable pour le regard. Une voiture ne passe pas de 0 à 50 instantanément; vos animations ne devraient pas non plus le faire. Accélérer une animation revient au même qu'augmenter doucement la vitesse d'une voiture. Le terme accélération peut être comparé au concept de démarrage progressif et de décélération d'une voiture en vue de l'arrêt. En ajoutant une valeur d'accélération, vous pouvez forcer vos interpolations de mouvement à débuter ou se terminer de manière plus graduelle.

1. Dans l'inspecteur des propriétés, sélectionnez Mouvement dans le menu Interpolation.
2. Tirez la glissière d'accélération vers le haut jusqu'à ce que la zone Accélération contienne 100.
3. Cliquez sur l'occurrence du clip slides_mc située sur la scène pour la sélectionner.
4. Entrez -150 dans la zone de texte Y de l'inspecteur des propriétés. L'occurrence du clip slideShow est ainsi déplacée de 150 pixels dans l'image-clé de l'image 20. L'interpolation de mouvement de l'image 1 à l'image 20 permettra un glissement fluide du clip vers le haut plutôt que de le faire simplement passer d'une position à une autre.
5. Dans le scénario, sélectionnez l'image 40 du calque 1.
6. Dans l'inspecteur des propriétés, sélectionnez Mouvement dans le menu Interpolation.
7. Tirez la glissière d'accélération vers le haut jusqu'à ce que la zone Accélération contienne 100.
8. Cliquez sur l'occurrence du clip slides_mc située sur la scène pour la sélectionner.
9. Entrez -300 dans la zone de texte Y de l'inspecteur des propriétés.
10. Dans le scénario, sélectionnez l'image 60 du calque 1.
11. Dans l'inspecteur des propriétés, sélectionnez Mouvement dans le menu Interpolation.
12. Tirez la glissière d'accélération vers le haut jusqu'à ce que la zone Accélération contienne 100.
13. Cliquez sur l'occurrence du clip slides_mc située sur la scène pour la sélectionner.
14. Entrez -450 dans la zone de texte Y de l'inspecteur des propriétés.
15. Dans le scénario, sélectionnez l'image 80 du calque 1. 20. Cliquez sur l'occurrence du clip slides_mc située sur la scène pour la sélectionner.
16. Entrez -600 dans la zone de texte Y de l'inspecteur des propriétés.
17. Dans le scenario, cliquez sur le nombre 1 dans la barre Numéro d'image. 23. Appuyez sur Entrée (Windows) ou sur Retour (Macintosh).

Un aperçu de l'animation s'affiche sur la scène. Le code ActionScript stop(); que vous avez entré précédemment est ignoré en mode aperçu.

Vous avez terminé la création du symbole slideShow qui contient son propre scénario interne complexe. Vous allez ensuite modifier le scénario principal de votre fichier FLA.

Le scénario avec les interpolations de mouvement terminées

Édition du scénario principal

Vous allez à présent revenir au scénario principal de votre document Flash afin d'ajouter des détails qui influent sur le document entier.

Pour ajouter des calques au scénario principal :

1. Cliquez sur l'icône Séquence 1 en haut du scénario.

Voulez etez le mode d'édition de symbole et vous revenez au scénario principal de votre fichier FLA.

1. Cliquez sur le bouton Insérer un calque, en bas du scénario. Dans le scénario, un nouveau calque s'affiche au-dessus du calque existant.
2. Cliquez encore trois fois sur Insérer un calque afin d'insérer trois autres calques. Le scénario principal contient à présent cinq calques.
3. Double-cliquez sur le libellé Calque 5 afin de le rendre modifiable.
4. Entrez actions comme nouveau nom de calque et appuyez sur la touche Entrée (Windows) ou Retour (Macintosh).
5. Double-cliquez sur le libellé Calque 4 et renommez ce calque nextButton.
6. Double-cliquez sur le libellé Calque 3 et renommez ce calque border.
7. Double-cliquez sur le libellé Calque 2 et renommez ce calque blueArea.
8. Double-cliquez sur le libellé Calque 1 et renommez ce calque slideShow.

Les cinq calques, nommés correctement, dans le scénario

Après avoir ajouté des calques au scénario principal, vous êtes prêt à ajouter le clip slideShow sur la scène.

Pour ajouter le clip slideshow sur la scène :

1. Cliquez sur le nom du calque slideShow de manière à prendre ce calque actif.
2. Faites glisser le symbole slideShow du panneau Bibliothèque vers la scène, puis alignez son coin supérieur gauche sur le coin supérieur gauche de la scène.
3. La nouvelle occurrence du clip étant toujours sélectionnée sur la scene, accédez à l'inspecteur des propriétés et fixez les valeurs X et Y à 0 de manière à aligner précisément le coin supérieur gauche du clip sur le coin de la scene.
4. Dans l'inspecteur des propriétés, tapez slideShow_mc comme nom d'occurrence du clip.
5. Enregistrez votre travail.

Création de la cordure

Vous allez ensuite créer une cordure autour de la scène, ce qui rendra la FMA plus attrayante lorsqu'elle sera visualisée dans une page Web.

Pour créer la courbure :

1. Dans le scénario, sélectionnez 100% dans le menu Zoom.
2. Dans le scénario, cliquez sur le nom du calque border pour le sélectionner.
3. Choisissez l'outil Rectangle dans le panneau Outils.
4. Dans le panneau Outils, sélectionnez « aucune couleur » dans le sélecteur de couleur de trait.

Sélection d'une absence de couleur dans le sélecteur de couleur de trait

1. Choisissez le noir (#000000) dans le sélecteur de couleur de replissage.

Sélection du noir dans le sélecteur de couleur de replissage.

1. Tracez sur la scène un rectangle d'une forme à peu près similaire à celle de la scène.

Dessin d'un rectangle noir de forme similaire à celle de la scène

1. Dans le panneau Outils, sélectionnez l'outil Sélection.
2. Sur la scène, cliquez sur le rectangle que vous venez de dessiner afin de le sélectionner.
3. Choisissez Fenêtre > Aligner pour ouvrir le panneau Aligner.
4. Dans le panneau Aligner, cliquez sur l'option Vers la scène pour la sélectionner.

Cette option permet au panneau Aligner d'aligner le rectangle sélectionné sur la scène.

Le panneau Aligner avec l'option Vers la scène sélectionnée

1. Dans le panneau Aligner, cliquez sur le bouton Mêmes largeur et hauteur de la section Ajuster la taille.

Lorsque l'option Vers la scène est désactivée, le panneau Aligner aligne plusieurs objets sélectionnés les uns sur les autres.

La taille de votre rectangle s'adapte à celle de la scène.

Clic sur le bouton Mêmes largeur et hauteur

1. En maintenant le rectangle sélectionné, cliquez sur le bouton Aligner les centres verticalement dans le panneau Aligner.

Utilisez les infobulles pour rechercher le bouton approprié dans le panneau Aligner.

Clic sur le bouton Aligner les centres verticalement

1. Toujours dans ce panneau, cliquez maintenant sur Aligner les centres horizontalement.

Clic sur le bouton Aligner les centres horizontalement

Le rectangle est désormais parfaitement centré sur la scène.

Le rectangle noir centré sur la scène.

1. Cliquez en dehors de la scène pour désélectionner le rectangle noir.
2. Dans le panneau Outils, sélectionnez l'outil Rectangle.
3. Toujours dans ce panneau, sélectionnez la couleur bleu ayant pour valeur hexadécimale #0000FF dans le sélecteur de couleur de remplissage.

1. Dans le panneau Outils, double-cliquez sur l'outil Rectangle.
2. Dans la boîte de dialogue Paramètres du rectangle, tapez 16 dans la zone Rayon d'angle, puis cliquez sur OK.

1. Choisissez Affichage > Accrochage > Accrocher aux pixels pour activer l'accrochage aux pixels.

Ce faisant, les bords des formes que vous dessinerez s'accrocheront au pixel le plus proche.

20. L'outil Rectangle étant toujours sélectionné dans le panneau Outils, tracez un rectangle sur la scène, d'une taille aussi proche que possible de celle de la scène.

Le rectangle bleu aux coins arrondis sur la scène

1. Dans le panneau Outils, cliquez sur l'outil de sélection. 22. Cliquez sur le rectangle bleu pour le sélectionner.
2. En maintenant le rectangle bleu sélectionné, ouvrez le panneau de l'inspecteur des propriétés et entrez les valeurs suivantes dans les zones de texte :

L:700 H:150 X:0 Y:0

Le rectangle bleu, de dimensions correctes, sur la scène

1. Double-cliquez à nouveau sur le rectangle bleu pour le sélectionner.

25. Appuyez sur Suppr pour supprimer le rectangle bleu.

Un rectangle blanc s'affiche au milieu du rectangle noir que vous avez dessiné précédemment. Le rectangle bleu a fait office de masque lors de cette étape. Désormais, une bordure noire se trouve en haut et en bas de la scène.

La scène ne comptant plus que des coins noirs

Ajout d'un symbole

Dans cette section, vous allez ajouter une zone de couleur bleue sur le côté droit de la scène. C'est à cet endroit que figurera le texte décrivant chaque plat ainsi que le bouton permettant de changer de plat.

Pour ajouter un nouveau symbole de forme bleue :

1. Cliquez sur le calque nommé blueArea dans le scénario.
2. Sélectionnez Insertion > Nouveau symbole.
3. Dans la boîte de dialogue Créer un nouveau symbole, tapez menu dans le champ de texte Nom puis cliquez sur OK.

Vous accédez au mode d'édition de symbole. Le panneau Scénario affiche le scénario du nouveau clip blueArea.

1. Dans le panneau Outils, sélectionnez l'outil Rectangle.
2. Sélectionnez « aucune couleur » dans le sélecteur de couleur de trait.
3. Cliquez sur la couleur de remplissage pour en afficher le sélecteur.
4. Dans le sélecteur de couleur de remplissage, entrez 80 dans la zone Alpha.
5. Dans ce sélecteur, entrez ensuite 343469 dans la zone Couleur, puis appuyez sur Entrée (Windows) ou Retour (Macintosh).

Une couleur gris bleu est ainsi créée.

1. Dans le panneau Outils, double-cliquez sur l'outil Rectangle.
2. Dans la boite de dialogue Paramètres du rectangle, tapez 0 dans la zone Rayon d'angle, puis cliquez sur OK.
3. A l'aide de l'outil Rectangle, dessinez un rectangle large et plat sur la scène.
4. Dans le panneau Outils, cliquez sur l'outil de sélection.
5. Sur la scène, cliquez sur le rectangle que vous venez de dessiner afin de le sélectionner.
6. Dans le panneau de l'inspecteur des propriétés, entrez les valeurs suivantes pour la forme rectangulaire :

L:415 H:150 X:0 Y:0

1. Appuyez sur Entrée ou Retour.
2. Dans le panneau Outils, cliquez sur l'outil Sous-selection.

1. Amenez le pointeur de la souris au-dessus du coin inférieur gauche du rectangle, jusqu'à ce qu'une petite case blanche s'affiche à côté du pointeur.

Pointeur indiquant que le coin du rectangle peut être tiré

1. Tirez le coin du rectangle vers la droite, de manière à ce que le côté gauche du rectangle devienne une ligne oblique faisant un angle d'environ 30 degrés.

1. Dans le panneau Outils, cliquez sur l'outil de sélection.

Les points de contrôle du rectangle sont ainsi désélectionnés.

Ajout d'une zone de texte

Maintenant que vous avez ajouté l'arrière-plan bleu au clip menu, vous êtes prêt à ajouter le texte de description de chaque élément de menu. Vous allez ajouter deux zones de texte. Le code ActionScript que vous ajouterez plus tard insérera le texte dans ces zones de texte.

Pour ajouter la zone de texte pour le titre des plats :

1. Dans le panneau Outils, cliquez sur l'outil Texte.

1. Dans l'inspecteur des propriétés, CHOISSEZ Texte dynamique dans le menu Type de texte.
2. Toujours dans l'inspecteur des propriétés, entrez 14 dans la zone Taille de police.
3. A l'aide de l'outil Texte, dessinez un rectangle de texte large et plat dans la partie supérieure de la forme gris bleu que vous venez de créer.

Le rectangle doit faire pratiquement la même largeur que la forme bleue. Nous vous inquiétez pas de l'emplacement précis du rectangle. Vous pourrez le modifier plus tard.

1. Dans le panneau Outils, cliquez sur l'outil de sélection.
2. Cliquez sur la zone de texte que vous venez de dessiner afin de la sélectionner.
3. Dans le panneau de l'inspecteur des propriétés, entrez les valeurs suivantes :

Type de texte : Texte dynamique - Nom de l'occurrence : title(Text X:60 Y:10 Police: Verdana Taille de police : 14 Couleur (de remplissage) du texte : Blanc Style : Gras Type de ligne : Une seule ligne

L'inspecteur des propriétés contenant les valeurs appropriées

1. Enregistrez votre document.

Ajout de la deuxième zone de texte

Vous allez maintenant ajouter la deuxième zone de texte qui contiendra le texte de description de chaque élément du menu.

Pour ajouter une zone de texte pour les descriptions :

1. Cliquez en dehors de la scene afin de désélectionner la zone de texte créée dans la section précédente.
2. Dans le panneau Outils, cliquez sur l'outil Texte.
3. Entrez 12 dans la zone Taille de texte de l'inspecteur des propriétés.
4. Toujours dans l'inspecteur des propriétés, désactivez l'icône Gras.
5. Sélectionnez Multiligne dans le menu Type de ligne.
6. À l'aide de l'outil Texte, tracez un autre rectangle de texte sur la scène, afin de remplir la partie inférieure de la forme bleue que vous avez créée précédemment, sous le rectangle tracé à la section Pour ajouter la zone de texte pour le titre des plats, page 272.
7. Dans le panneau Outils, cliquez sur l'outil de sélection.
8. En maintenant le deuxième rectangle de texte sélectionné, ouvrez le panneau de l'inspecteur des propriétés et entrez les valeurs suivantes :

Type de texte : Texte dynamique

Nom de l'occurrence : description(Text)

X:85

Y:45

Police : Verdana

Taille de police : 12

Couleur: Blanc

L'inspecteur des propriétés contenant les valeurs appropriées

1. Dans le panneau Outils, cliquez sur l'outil de sélection.
2. Cliquez sur la scène en dehors des formes que vous avez dessinées pour les désélectionner.
3. Dans le scénario, cliquez sur le lien Séquence 1 pour quitter le mode d'édition de symbole et revenir dans le scénario principal du document Flash. Vous quittez le mode d'édition de symbole et la scène avec les cordures noires réapparaît.
4. Enregistrez votre document.

Ajout du clip sur la scène

Maintenant que vous avez terminé le clip menu, vous êtes prêt à l'ajouter à la scène dans le scénario principal.

Pour ajouter le clip menu sur la scène :

1. Dans le panneau Outils, cliquez sur l'outil Sélection afin de vous assurer que l'outil est activé.
2. Dans le panneau Bibliothèque (Fenêtre > Bibliothèque), tirez le clip menu et placez-le sur le côté droit de la scène.
3. En maintenant le clip menu sélectionné sur la scène, ouvrez l'inspecteur des propriétés et entrez les valeurs suivantes:

Nom de l'occurrence : menu_mc

L:415

H:150

X:285

Y:0

1. En maintenant toujours le clip menu sélectionné, ouvrez l'inspecteur des propriétés et sélectionnez Alpha dans le menu Couleur.
2. Tirez la glissière Quantité alpha jusqu'à ce que la valeur atteigne 90%.

Ajout d'un composant button

Vous êtes maintenant prêt à ajouter le bouton permettant à l'utilisateur de passer d'une diapositive à une autre dans le diaporama.

Pour ajouter le bouton suivant :

1. Dans le scénario, cliquez sur le nom du calque nextButton pour le rendre actif. C'est ce calque qui contient le composant de bouton que vous estes sur le point d'ajouter.
2. Ouvrez le panneau Composants s'il n'est pas déjà visible en sélectionnant Fenêtre > Composants.
3. Dans le panneau Composants, développez la catégorie User Interface en cliquant sur le signe plus (+) en regard de son nom.
4. Faites glisser le composant Button du panneau Composants vers la partie inférieure du rectangle bleu sur la scene.

Le bouton reste sélectionné sur la scène, sauf si vous cliquez ailleurs.

1. En maintenant le bouton sélectionné, ouvre le panneau de l'inspecteur des propriétés et entrez les valeurs suivantes :

Nom de l'occurrence : next_btn

X:590

Y:120

1. Dans le panneau de l'inspecteur des propriétés, cliquez sur l'onglet Paramètres.
2. Dans la zone de libellé, remplacez le mot Button par Suivant puis appuyez sur Entrée (Windows) ou Retour (Macintosh). Le libellé du bouton devient Suivant.
3. Enregistrez votre document.

Ajout de code actionscript

Vous venez d'ajouter tous les éléments graphiques et de texte requis par votre FMA. La dernière étape consiste à ajouter le code ActionScript qui affichera le texte et l'image appropriés de chaque diapositive dans le clip slideShow.

Si vous n'avez pas suivi les instructions du Chapitre 7, Didacticiel : Traitement des photographies, vous devez vous procurer les images requises pour ce didacticiel. Pour ce faire, ouvrez le dossier cafe_townsend/completed_files/flash/images que vous avez copié sur votre disque dur dans le Chapitre 4, Didacticiel : Configuration de votre site et des fichiers de projet, puis copiez les fichiers image0.jpg, image1.jpg, image2.jpg et image3.jpg dans le dossier cafe_townsend/images.

Test d'un exemple de code actionscript

Vous allez tout d'abord ajouter du code ActionScript simple pour en étudier le fonctionnement.

Pour ajouter le code de test actionscript :

1. Dans le scénario, cliquez sur le nom du calque actions afin de l'activer.
2. Choisissez Fenêtre > Actions pour ouvrir le panneau Actions.
3. Dans le panneau Actions, tapez le code ActionScript suivant. Vous pouvez copier et coller ce code depuis le panneau aide de Flash :

function testFunc(eventObj:Object) { menu_mc.title txt.text = "Testing the title"; menu_mc.description txt.text = "Testing the description"; } // add the event listener for the button nextbtn.addEventListener("click", testFunc); 

Ce code ActionScript ajoute du texte dans les zones de texte du titre et de la description que vous avez précédemment ajoutées au clip menu.

1. Choisissez Contrôle > Tester l'animation. Le document Flash s'ouvre et lit l'animation dans une nouvelle fenêtre.
2. Dans la fenêtre de test d'animation, cliquez sur Suivant. La description et le titre de test que vous avez entered dans le code ActionScript apparaissent dans le rectangle bleu sur le côté droit du document.
3. Enregistrez votre document.

Saisie de code actionscript pour le diaporama

Vous allez à présent entrer le code ActionScript qui permettra la mise en place des nouvelles diapositives du diaporama lorsque l'utilisateur cliquera sur le bouton Suivant. Quand vous aurez ajouté le code, votre document Flash sera terminé.

Pour ajouter le code actionscript au document flash :

1. Dans le scénario, vérifie que l'image 1 du calque actions est toujours sélectionné.
2. Dans le panneau Actions, effacez tout le code que vous avez entré dans la section Test d'un exemple de code ActionScript, page 277.

Le panneau Actions ne doit plus contenir de code.

1. Copiez le code suivant et collez-le dans le panneau Actions.

/ The following four sections contain the data / for each menu item. */ 0 */ var imageOtitle: String = "Summer salad"; var imageOdesc: String = "Butter lettuce with apples, blood orange segments, gorgonzola, and raspberry vinaigrette."; var imageOuri: String = "images/image0. jpg"; */ 1 */ var imageltitle: String = "Turkey and Sun-dried Tomato Sandwich"; var imageldesc: String = "Fresh roasted turkey with sun- dried tomatoes, garlic aioli, and havarti."; var imageluri: String = "images/image1. jpg"; */ 2 */ var image2title: String = "Seared Salmon"; var image2desc: String = "Filet of wild salmon with caramelized onions, new potatoes, and caper and tomato salsa."; var image2uri: String = "images/image2. jpg"; */ 3 */ var image3title: String = "New York Cheesecake"; var image3desc: String = "Creamy traditional cheesecake served with chocolate sauce and strawberries."; var image3uri: String = "images/image3. jpg"; var currImage: Number = 0. var totalImages: Number = 4. menu_mc. title_txt. text = this["image"+currImage+"title"]; menu_mc. description_txt. text = this["image"+currImage+"desc"]; for (var i: Number = 0; i<totalImages; i++) { slideShow_mc. slides_mc["holder"+i]. loadMovie(this["image"+i+"uri"], slideShow_mc. slides_mc. getNextHighestDepth()); }

slideShow_mc. slides_mc["holder4"]. loadMovie(this["imageOu ri"], slideShow_mc. slides_mc. getNextHighestDepth()); //fonction du bouton Suivant function nextMenuItem(eventObj: Object) { slideShow_mc. gotoAndPlay("slide"+(currImage)); if((currImage+1) <= totalImages){ currImage = 0; }else{ currImage++; } menu_mc. title txt. text = this._parent["image"+currImage+"title"]; menu_mc. description txt. text = this._parent["image"+currImage+"desc"]; } //add the event listener for the button next_btn. addEventListener("click", nextMenuItem);

La section Examen du code ActionScript, page 279, explique ce code de manière détaillée.

1. Enregistrez votre document.
2. Choisissez Contrôle > Tester l'animation.
3. Dans la fenêtre Tester l'animation, cliquez sur Suivant pour afficher l'animation des images de plats et observer les titres et descriptions mis à jour pour chaque diapositive.
4. Fermez la fenêtre de test d'animation.

Examens du codeactionscript

Cette section explique à quoi sert le code ActionScript que vous venez d'ajouter dans le panneau Actions. Si vous le souhaitez, vous pouvez passer cette section et passer à la publication de votre document en vue de l'afficher dans un navigateur Web.

Pour obtenir des informations complètes sur l'utilisation d'ActionScript, consultez le manuel Formation à ActionScript 2.0 dans Flash.

La première section du code contient des variables qui stockent des informations au sujet des images qui apparaîtront dans chaque section du clip slideShow.

/* 0 */
var image0title:String = "Summer salad"; 

var imageOdesc: String = "Butter lettuce with apples, blood orange segments, gorgonzola, and raspberry vinaigrette."; var imageOuri: String = "images/image0.jpg";

Ce code déclare quatre ensembles responsables chacun de trois variables.

Chaque ensemble de trois variables représente l'une des quatre images que votre document Flash affiche. La seule différence entre le nom des variables pour les quatre images différentes est le chiffre que ces noms contiennent. La numération commence par 0 au lieu de 1, les listes dans ActionScript étant basées sur zéro. Ceci signifie que le premier élément d'une liste est toujours désigné par 0 au lieu de 1.

Les trois variables déclarées pour chaque image sont les suivantes.

N'oubliez pas que le chiffre au milieu de chaque nom change pour chaque image :

imageOtitle contient une chaine correspondant au nom du plat qui s'affichera dans la zone title txt du clip menu.

imageOdesc contient une chaîne correspondant à la description du plat qui s'affichera dans la zone description (txt du clip menu.

imageOuricontient une chaîne qui est l'identificateur de ressource universel (Universal Resource Identifier, URI) du fichier d'image qui est chargé et affiché dans chaque section du clip slides.

Les deux lignes de code suivantes déclarent deux autres variables.

var currImage: Number = 0 var totalImages: Number = 4

La première variable, currImage, stocke le numéro de l'image actuellement affichée dans le clip slides. La seconde variable, totalImages, stocke le nombre total d'images disponibles pour l'affichage. Stocker ce dernier nombre dans une variable facilite la modification, notamment si vous pouvez ajouter de nouvelles images au diaporama ultérieurement. Dans ce cas, vous devrez également modifier le clip slideShow.

La ligne de code suivante attribue à la zone de texte du titre le texte se trouvant dans la variable dont le nom correspond au nombre de l'image courante.

menu_mc.title txt.text = this["image"+currImage+"title"]; 

Ce code utilise une syntaxe à point pour attribuer à la propriété texte de la zone de texte title_txt de l'occurrence du clip menu_mc la valeur d'une variable. Dans ce cas, le nom de la variable est construit à partir du mot image plus la valeur de la variable currImage, plus le mot title. Le nom de variable devient image0title ou l'un des autres noms de variable similaires, en fonction du nombre contenu dans la variable currImage. Le mot this indique à Flash que la variable a été déclarée dans ce même script.

La ligne de code suivante est similaire à la précédente :

menu_mc.description_txt.text = this["image"+currImage+"desc"];

Cette ligne de code attribue à la zone de texte de description de l'occurrence du clip menu_mc le texte de la variable desc correspondant au numéro de l'image courante.

Les lignes de code suivantes définissent une boucle for permettant de charger des fichiers image. JPG externes dans les occurrences de clips holder, qui se trouvent dans le clip slides du clip slideShow. Les chemins d'accès à chaque fichier. JPG externe sont stockés dans les variables image*uri déclarées au début de ce bloc de code ActionScript, comme suit :

for(var i: Number = 0; i<totalImages { slideShow_mc.slides_mc["holder"+i]. loadMovie(this["image"+i]+"uri"]), slideShow_mc.slides_mc.getNextHighestDepth(); }

Une boucle for est un bloc de code entouré par une paire d'accolades {} et qui est répété pour chaque incrément de la variable i. Dans ce cas, la variable i incrémente de 0 à 4, la valeur de totalImages étant 4. La méthode loadMovie() peut être utilisée pour charger un fichier Flash ou un fichier d'image dans le clip. Dans ce cas, elle charge les fichiers. JPG externes.

La ligne de code suivante charge la première image, stockée dans la variable image0uri, dans l'occurrence du clip holder4, comme suit :

slideShow_mc.slides_mc["holder4"].loadMovie(this["imageOuril"], slideShow_mc.slides_mc.getNextHighestDepth()); 

Les lignes de code suivantes mettent en œuvre la fonctionnalité du bouton Suivant :

function nextMenuItem(eventObj:Object) {
    slideShow_mc.gotoAndPlay("slide"+(currImage));
    if ((currImage+1)>=totalImages) {
        currImage = 0;
    } else {
        currImage++;
    }
    menu_mc.title txt.text = this._parent["image"+currImage+"title)];
    menu_mc.description txt.text = this._parent["image"+currImage+"desc)];
} 

Le code du bouton Suivant est contenu dans la fonction nextMenuItem. Une fonction est un bloc de code configuré pour s'exécuter lorsqu'un événement particulier se produit. Dans ce cas, la fonction s'exécutera chaque fois que l'utilisateur relâche le bouton de la souris au-dessus du bouton Suivant sur la scène.

La fonction comprend la méthode gotoAndPlay(), qui indique à la tête de lecture de passer à un libellé d'image précis dans le scénario. Le libellé d'image spécifique dans ce cas se compose du mot slide et de la valeur actuelle de la variable currImage.

La ligne suivante contient une instruction if qui vérifie si la valeur de la variable currImage plus 1 est égale à la valeur de la variable totalImages. Si c'est le cas, le code fixe la valeur de currImage à 0. Dans le cas contraire, le code augmente la valeur de currImage de 1.

Les deux dernières lignes de la fonction attribuent, comme texte pour les zones de texte de titre et de description, les chaînes stockées dans les variables image title et image desc correspondant à la valeur de la variable currImage.

La ligne de code qui suit immédiatement la définition de fonction ordonne à Flash d'exécuter la fonction nextMenuItem lorsque l'occurrence next_btn reçoit un clic de souris.

nextbtn.addEventListener("click", nextMenuItem);

Comme la fonction nextMenuItem est désormais configurée pour détecter les clics de souris, elle est baptisée écouteur d'événements. C'est pour cette raison que la méthode addEventListener() est utilisée pour ordonner à Flash d'exécuter la fonction lorsque l'événement de clic de souris se produit.

Si le code décrit dans cette section est relativement simple, il s'appuie néanmoins sur un certain nombre de concepts d'ActionScript dont la description dépasse le cadre de ce didacticiel. Vous trouvez une présentation complète de ces concepts et des didacticiels ActionScript supplémentaires dans les guides Formation à ActionScript 2.0 dans Flash et Didacticiels Flash.

Publication de votre document

Maintenant que votre document Flash est terminé, vous êtes prêt à le publier dans une page web. La première étape de ce processus consiste à enregistrer la version FLA de votre document sous forme de fichier SWF compressé. Cette version SWF est de taille nettement plus réduite, ce qui facilite son chargement dans un navigateur Web.

Pour publier votre document sous forme de fichier SWF :

1. Choisissez Fichier > Paramètres de publication.
2. Dans l'onglet Formats de la boîte de dialogue Paramètres de publication, vérifie que seules les cases à cocher Flash et HTML sont sélectionnées.

Flash ne publiera ainsi que le fichier SWF et un fichier HTML à afficher dans un navigateur web.

1. Toujours dans la boîte de dialogue Paramètres de publication, sélectionnez l'onglet Flash, puis vérifiez que Flash Player 8 est sélectionné dans le menu Version.

Flash exportera alors le fichier SWF au format Flash 8.

1. Sélectionnez l'onglet HTML puis vérifiez que l'option Flash uniquement est sélectionnée dans le menu Modèle.

Ce faisant, Flash ne génère qu'un fichier HTML simple pour afficher le document Flash dans un navigateur.

1. Cliquez sur Publier.

Flash enregistre une copie de votre document sous la forme d'un fichier SWF ainsi qu'un fichier HTML dans le dossier qui contient votre fichier FLA de travail. Il doit s'agir du dossier cafe_townsend.

1. Fermez la boîte de dialogue Paramètres de publication en cliquant sur le bouton OK.

Vous avez terminé le fichier FMA Flash qui sera utilisé dans le site Web cafe_townsend. Vous pouvez passer au Chapitre 10, Didacticiel: Création d'un lecteur vidéo (Flash Professionnel uniquement), page 287.

Ressources

Macromedia met à votre disposition des ressources précieuses qui vous permettront d'approfondir vos connaissances de Flash, de recevoir une assistance et d'envoyer vos avis à l'équipe.

Inscription

Vous pouvez vous inscrire pour être informé des mises à jour les plus récentes et des nouveaux produits, recevoir une assistance technique et bien plus encore. Pour vous inscrire en ligne, accédez à l'adresse http://www.macromedia.com/fr/software/register/ puis sélectionnez Aide > Enregistrement en ligne. Vous pouvez aussi imprimer le formulaire d'inscription à partir du menu Aide.

Notes d'accompagnement

Vous trouvez les informations les plus récentes, ainsi qu'une description des problèmes actuellement identifiés dans Flash, dans les notes d'accompagnement disponibles dans le centre de support de Flash, à l'adresse http://www.macromedia.com/support/documentation/fr/flash/releasenotes.html.

Assistance de flash

Les ingénieurs qui assurent le support de Flash mettent leur expérience et un service hors pair à votre disposition pour vous apporter les réponses dont vous avez besoin, 24 heures sur 24. Pour en apprendre davantage, consultez le centre de support de Flash à l'adresse www.macromedia.com/support/flash/.

Formation et certification flash

Effectuez un maximum d'exercices pour accroître vos connaissances sur Flash grâce à des opérations pratiques et des scénarios réels. Vous pouvez opter pour une formation en salle ou en ligne, voir conjuguer les deux. A vous de désirer la voie qui vous convient le mieux. Pour en savoir plus, accédez à la section Formation Macromedia à l'adresse http://www.macromedia.com/go/flash_training_fr.

Tenez-vous au courant des tendances et des techniques de programmation Macromedia Flash les plus récentes. Des didactériels, des articles et des exemples d'applications vous donnent toutes les informations dont vous avez besoin pour rester compétitif, innovateur et performant. Pour en apprendre davantage, consultez le centre de développement Flash à l'adresse http://www.macromedia.com/go/developer_fl_fr.

Séminaires on demand

Il n'est pas toujours facile d'évaluer un nouveau produit, d'autant que chaque version propose de nouvelles fonctions à découvrir. Les séminaires On Demand de Macromedia vous permettent de vous améliorer rapidement. Les séminaires Macromedia comprend des présentations multimédias et des démos destinées à vous permettre de maximiser votre expérience d'évaluation de produits Macromedia. Pour en savoir plus, accédez au site Macromedia On Demand à l'adresse www.macromedia.com/macromedia/events/online/ondemand/index.html.

Flash inclut des fichiers d'exemple que vous pouvez examiner afin de découvrir différents concepts de développement et de conception. Pour consulter des versions FLA et SWF des fichiers d'exemple, ainsi qu'une description, consultez les exemples Flash dans l'aide de Flash (dans l'application Flash, CHOISSEZ Aide > Aide de Flash). Certains exemples sont des applications complètes ; d'autres, plus simples, ont pour but de vous faire découvrir un concept de base. Pour afficher la version de programmation (fichier FLA) d'un exemple, ouvre le fichier en question dans Flash. Les fichiers d'exemples résident dans le dossier Samples, qui se trouve dans le répertoire de l'application Flash. Vous trouverez d'autres exemples dans le centre de développement Flash, à l'adresse http://www.macromedia.com/go/developer_fl_fr.

Ressources supplémentaires

Les pages web suivantes de Macromedia incluent des informations de référence et des liens vers des éditeurs de Flash :

Vous trouverez des sites Web consacrés à Macromedia Flash et aux développeurs Flash à l'adresse http://www.macromedia.com/go/tn_12046. Macromedia Press (la division d'édition de Macromedia) est accessible à l'adresse http://www.macromedia.com/support/mmpress/.

Didacticiel : création d'un lecteur vidéo (Flash Professionnel uniquement)

Ce didacticiel va vous apprendre à créer un lecteur vidéo simple à l'aide de quelques fonctions de programmation de Macromedia Flash Basic 8 et Flash Professionnel 8. Après sa création, vous pourrez mettre le lecteur vidéo en œuvre dans une page Web.

Si ce n'est déjà fait, Macromedia vous recommande, avant de suivre ce didacticiel, de lire Notions de base de Flash, page 65.

Dans ce didacticiel, vous accomplirez les tâches suivantes :

Examinez notre tâche 288

Etude de l'application finale 288

Codage d'un fichier vidéo. 290

Création d'un nouveau document Flash 291

Ajout d'un composant multimédia 294

Publication de votre document 296

Examinez votre tâche

Ce didacticiel vous permettra de créer un type d'application appelée Zone de message flexible ou FMA. Une FMA est un type courant d'application Flash permettant d'afficher du contenu communiquant un message de type informatif ou marketing au public. Dans le cas présent, la FMA affiche des photographies d'éléments extraits d'un menu de restaurant. Le site Web de Macromedia utilise une FMA pour afficher des informations relatives aux nouveaux produits logiciels ou d'autres messages publicitaires. Leur nom de zone de messagerie flexible vient du fait qu'elles occupent généralement une partie de la page Web qui est réservée au contenu susceptible de changer en fonction des besoins de l'entreprise ou du site Web. Par exemple, si le restaurant Café Townsend a prévu un événement particulier, sa FMA pourrait être modifiée de manière à afficher les informations détaillées de cet événement à la place des éléments du menu du restaurant. Dans ce didacticiel, vous allez d'abord vous familiariser avec un document Flash, puis vous créerez votre propre document Flash avant de publier l'application pour le web. Le didacticiel dure environ 20 à 30 minutes.

Étude de l'application finale

En examinant la version terminée de l'application que vous êtes sur le point de créer, vous découvrez également l'espace de travail Flash.

Les sections suivantes doivent les étapes à suivre pour créer l'application vous-même.

Exécution de l'application finale

Pour comprendre le type d'application que vous allez créé dans le cadre de ce didacticiel, vous pouvez examiner une version finale de fichier FLA de l'application dans l'outil de programmation de Flash. Les fichiers FLA correspondant aux fichiers utilisés dans Flash. Vous pouvez également voir la version SWF du fichier dans Flash Player. La version SWF représente la version du fichier que vous publierez dans une page web.

Pour dire la version SWF du fichier dans flash player :

1. Dans Flash, choisissez Fichier > Ouvrir.
2. Accédez au fichier terminé dans le dossier localSites\cafe_townsend\completed files\flash que vous avez copié sur votre disque dur dans le Chapitre 4, Didacticiel : Configuration de votre site et des fichiers de projet et double-cliquez sur video).[pod_finished.swf. L'application finale s'exécute dans Flash Player. Cliquez sur les contrôles de lecture en bas de la fenêtre pour visionner la vente.
3. Après avoir affiché l'application, fermez la fenêtre Flash Player.

Ouverture du document de programmation

Il est utile d'examiner le fichier FLA correspondant au document de programmation final pour comprendre comment l'auteur a conçu l'application.

Pour afficher la version de programmation du fichier dans flash :

1. Dans Flash, choisissez Fichier > Ouvrir.
2. Accédez au fichier terminé dans le dossier localSites\cafe_townsend\completed files\flash que vous avez copié sur votre disque dur dans le Chapitre 4, Didacticiel: Configuration de votre site et des fichiers de projet et double-cliquez sur video).[pod_finished.swf. L'application finale du didacticiel est affichée dans l'environnement de programmation Flash.
3. Une fois le fichier ouvert, vous pouvez examiner la scène, le panneau Bibliothèque et le scénario.

La scène comporte un composant FLVPlayback que vous étudierez ultérieurement dans ce didacticiel. Le panneau Bibliothèque contient une liste de symboles ou ressources réutilisables utilisés par le document. Quant au scenario, il décrit quand et comment faire apparaitre ces symboles sur la scène.

Vous en apprendrez davantage sur le rôle de chacun de ces éléments de Flash tout au long de ce didacticiel. Pour plus d'informations sur chacun de ces éléments, consultez la section Bases de Flash, page 51.

Codage d'un fichier vidéo

En premier lieu, vous devez convertir un fichier video QuickTime (MOV) en fichier video Flash (FLV).

Pour convertir le fichier vidéo :

1. Démarrez l'application Flash Video Encoder.
2. Tirez le fichier cafe_townsend_chef.mov depuis le dossier cafe_townsend_folder dans la fenêtre de l'application Flash Video Encoder.

La fenêtre de Flash Video Encoder

1. Cliquez sur Paramètres.
2. Dans la fenêtre Paramétres de codage des videos Flash, Sélectionnez Flash 8 - Medium Quality (400kbps). Il s'agit du paramètre par défaut. De cette manière, le taux de compression appliqué au fichier sera faible.

1. Fermez la boîte de dialogue Paramètres en cliquant sur le bouton OK.
2. Cliquez sur Activer la file d'attente.

Le codeur video de Flash convertit le fjichier et l'enregistre dans le même dossier que celui du fjichier original cafe_townsend_chef. mov. Vous ETES maintainant pret à utiliser le fjichier FLV dans un document Flash.

1. Fermez l'application Flash Video Encoder.

Création d'un nouveau document flash

Maintenant que l'application finale que vous êtes sur le point de créer vous a été représentée, vous pouvez créer tout propre document Flash.

Vous devez définir un dossier de travail avant de commencer, si ce n'est pas déjà fait. Pour plus d'informations, consultez la section Configuration de votre site et de vos fichiers de projet.

Pour savoir comment créer une application dans Flash, vous devez commencer par la toute première étape du processus : la création d'un fichier.

Ouverture d'un nouveau document

Vous êtes prêt à créer vos propres versions de la FMA.

Pour créer un document :

1. Démarrer Flash.
2. Choisissez Fichier > Nouveau.
3. Dans la boîte de dialogue Nouveau document, sélectionnez Document Flash et cliquez sur OK.
4. Choisissez Fichier > Enregistrer.
5. Entrez un nom pour le fichier video_pod.fla puis enregistrez-le dans le dossier cafe_townsend que vous avez copié sur votre disque dur.

Pensez à enregistrer votre fichier régulièrement tout au long de ce didacticiel.

Définition des propriétés du document

La configuration des propriétés du document est la première étape du processus de création. Vous pouvez modifier les propriétés du document à tout moment, mais il est recommandé de prendre certaines décisions au début du processus, comme par exemple le choix de la taille de la scène ou de la couleur de l'arrête-plan.

Les propriétés du document correspondent aux propriétés qui s'appliquent à l'ensemble du document Flash. Vous pouvez utiliser l'inspecteur des propriétés pour spécifier ces paramètres.

Pour définir les propriétés du document :

1. S'il n'est pas déjà ouvert, CHOISISEZ Fenêtre > Propriétés > Propriétés.

Si l'inspecteur des propriétés n'est pas complètement développé, cliquez sur le triangle blanc dans le coin inférieur droit.

1. Dans l'inspecteur des propriétés, cliquez sur Taille.
2. Dans la boîte de dialogue Propriétés du document, entrez les valeurs suivantes:

Largeur: 360 Hauteur: 240

1. Cliquez sur OK.

1. Enregistrez votre travail.

Pour plus d'informations sur la définition des propriétés d'un document, consultez la section Création et ouverture d'un document et définition de ses propriétés du guide Utilisation de Flash.

Ajout d'un composant multimédia

Voulez ajouter un composant de lecture multimédia sur la scène. Ce composant contiendra l'écran vidéo ainsi que les contrôles de lecture.

Pour ajouter un composant multimédia :

1. Choisissez Fenêtre > Composants pour ouvrir le panneau Composants.
2. Dans ce panneau, cliquez sur le signe plus (+) à côté de la catégorie FLV Playback - Player 8.

1. Faites glisser un composant FLVPlayback sur la scène.

Présentation des composants Les composants de Flash sont des objets prédéfinis que vous pouvez employer dans vos documents Flash. La plupart des composants sont des éléments d'interface utilisateur, comme des boutons, des menus, etc. Certains ne sont pas destinés à être visibles sur la scène ; ils seront à accomplir des fonctions de traitement de données. L'emploi d'un composant vous évite d'avoir à créer des éléments complexes d'interface utilisateur. Les composants sont mis en œuvre, dans Flash, sous la forme de clips possédant leur propre code ActionScript interne. Le panneau Composants sert à définir les propriétés du composant. Ces propriétés indiquent à Flash le comportement que vous aimeriez appliquer au composant. Pour le composant FLVPlayback, vous indiquerez à Flash l'emplacement du fichier FLV que vous pouvez lire et la manière dont les contrôles de lecture doivent se présenter.

Par défaut, le nouveau composant reste sélectionné sur la scène.

1. En maintenant le nouveau composant sélectionné sur la scène, entrez les valeurs suivantes dans l'inspecteur des propriétés :

L:360 H:240 X:0 Y:0

Le composant possède ainsi la même taille que la scène, sur laquelle il est centré.

L'inspecteur des propriétés contenant les valeurs appropriées

1. En maintenant le nouveau composant sélectionné sur la scène, sélectionnez Fenêtre > Inspecteur de composants pour ouvrir l'inspecteur de composants.
2. Dans l'onglet Paramètres de l'inspecteur des propriétés, cliquez sur le paramètre contentPath.
3. Cliquez sur l'icône en forme de loupe affichée en regard du paramètre.

1. Dans la boîte de dialogue Chemin du contenu, entrez cafe_townsend_chef.flv et cliquez sur OK.
2. Toujours dans l'inspecteur des propriétés, donnez au paramètre autoRewind la valeur false.
3. Enregistrez votre travail.
4. Pour tester votre document, sélectionnez Contrôle > Tester l'animation. Le document est lu dans la fenêtre Tester l'animation. Vous pouvez contrôler la lecture du fichier vidéo à l'aide des contrôles situés en bas de la scène.

Publication de votre document

La prochaine étape consiste à publier votre fichier FLA sous forme de fichier SWF affichable dans un navigateur web.

Pour publier votre document flash :

1. Sélectionnez Fichier > Publier.

Flash enregistre une version SWF de votre fichier ainsi qu'un simple fichier HTML dans le dossier cafe_townsend où vous avez enregistré le fichier vidéo).[pod. fla]. Flash enregistre également un fichier SWF nommé ClearOverPlaySeekMute. swf, qui contient les graphismes du contrôleur vidéo qui est superposé à la vidéo. Ce fichier SWF doit se trouver dans le même dossier que le fichier vidéo).[pod. swf] pour que les contrôles vidéo soient visibles lors de la lecture du fichier SWF.

Vous pouvez personnaliser l'apparence de ces contrôles vidéo. Pour plus d'informations, consultez la section A propos de l'application d'enveloppés aux composants de Utilisation des composants.

1. Dans votre navigateur web, CHOISSEZ Fichier → Ouvrir.
2. Accédez au dossier cafe_townsend et ouvrez le fichier video_pod.html. Le fichier HTML s'ouvre dans le navigateur web et affiche votre document Flash.

Étapes suivantes

Vous avez terminé le lecteur vidéo Flash. Normalement, vous allez à présent insérer le fichier SWF dans une véritable page Web.

Cette illustration montre l'apparence potentielle d'une page Web contenant le fichier video_pod.swf.

Le fichier video_pod. swf inséré dans une page Web

Assemblage et déploiement de votre site internet

Dans cette partie, vous assemblerez l'exemple de site Internet du Cafe Townsend et ajouterez les touches finales avant de publier ce site Web. Puis, vous apprendrez comment assurer facilement la maintenance d'un site.

Vous utiliserez Macromedia Dreamweaver 8 pour associer tous les morceaux que vous avez créés pour donner naissance au site Web du Cafe Townsend et vous formaterez le site à l'aide de CSS. Puis, vous apprendrez comment utiliser Dreamweaver pour publier le site Web du Cafe Townsend vers un serveur distant. Enfin, une fois le site du Cafe Townsend terminé, vous verrez comment utiliser Macromedia Contribute pour en assurer la maintenance.

Cette partie du manuel contient les sections suivantes :

Didacticiel : Ajout de contenu aux pages 301

Didacticiel : Mise en forme de votre page avec CSS. 329

Didacticiel : Publication de votre site 359

Didacticiel : Paramétrage de votre site Web pour les utilisateurs de Contribute 367

Didacticiel : ajout de contenu aux pages

Ce didacticiel vous explique comment ajouter des pages Web à l'aide de Macromedia Dreamweaver 8. Vous pouvez ajouter des éléments de tous ordres à ces pages comme des graphismes, des fichiers Macromedia Flash, des fichiers Macromedia Flash Video, et du texte, pour ne citer que ceux-là. Lorsque vous avez ajouté du contenu à vos pages, vous pouvez consulter un aperçu de votre travail dans un navigateur de manière à voir à quoi il ressemblera sur le Web.

Dans ce didacticiel, vous allez accomplir les tâches suivantes :

Localisez vos fichiers 301

Passez notre tâche en revue 303

Insérez des images 304

Insérez et lisez un fichier Flash 312

Insérez une réserve Flash 315

Insérez du texte 318

Créez des liens 323

Aperçu de votre page dans un navigateur 325

Localisez vos fichiers

Dans ce didacticiel, vous commencerez par la mise en forme basée sur un tableau (index.html) que vous avez créé au Chapitre 6, Didacticiel :

Création d'une mise en forme de page basée sur un tableau. Si vous n'êtes pas allé jusqu'au bout de ce didacticiel, vous pouvez le faire avant d'aller plus loin ou vous pouvez également ouvrir la version terminée du didacticiel et commencer par là.

La version terminée du didacticiel, table.layout.html, se trouve dans le dossier tutorials_completed du dossier cafe_townsend que vous avez copié sur votre disque dur au Chapitre 4, Didacticiel : Configuration de votre site et des fichiers de projet.

Il est également nécessaire d'utiliser les actifs que vous avez créés au Chapitre 8, Didacticiel: Création d'une bannière de page et au Chapitre 9, Didacticiel: Création de votre première application Flash. Si vous n'avez pas terminé ces didactériels, vous pouvez trouver les actifs terminés dans les dossiers completed_files/flash et completed_files/fireworks situés dans le dossier cafe_townsend. Les chemins de fichier dans les instructions qui suivent différent légèrement si vous utilisez des actifs en provenance du dossier completed_files. Par exemple, si vous avez terminé le didacticiel relatif à la création d'une bannière dans Fireworks, l'actif terminé, banner_graphic.jpg, se trouvera dans le dossier cafe_townsend/images. Dans le cas contraire, vous devrez rechercher l'actif terminé dans le dossier cafe_townsend/completed_files/fireworks/.

Si vous entamez ce didacticiel avec le fichier table.layout.html terminé, au lieu du fichier index.html du Chapitre 6, Didacticiel: Création d'une mise en forme de page basée sur un tableau, certaines étapes et illustrations du didacticiel ne correspondront pas à ce que vous verrez à l'écran.

Passez votre tâche en revue

Dans ce didacticiel, vous ajouterez des actifs à la page d'accueil du Cafe Townsend, un restaurant fictif. Vous apprendrez à ajouter des images, un fichier Macromedia Flash, un fichier Macromedia Flash Video et du texte. Quand vous aurez terminé, la page aura l'aspect suivant :

Vous remarquerez que le texte dans la page n'est pas encore mis en forme. C'est le cas parce que vous apprendrez à le mettre en forme à l'aide de Cascading Style Sheets (CSS) dans le prochain didacticiel.

Si vous avez terminé les didacticiels précédents de ce manuel, les actifs nécessaires à ce didacticiel sont enregistrés dans votre dossier racine cafe_townsend. Si vous n'avez pas suivi les didacticiels dans l'ordre, consultez Localisez vos fichiers, page 301 pour en savoir plus sur la recherche des fichiers requis.

Insérez des images

Après avoir créé la mise en forme de votre page, vous êtes prêt à ajouter des actifs à la page. Vous allez commencer par ajouter des images. Vous pouvez faire appel à plusieurs méthodes pour ajouter des images à une page Web dans Dreamweaver. Dans cette section, vous allez ajouter quatre images différentes à la page d'index de Cafe Townsend, au moyen de différentes méthodes.

Remplacez l'espace réservé pour l'image

1. Dans Dreamweaver, ouvrez le fichier index.html que vous avez créé au Chapitre 6, Didacticiel: Création d'une mise en forme de page basée sur un tableau

Si vous n'avez pas terminé le Chapitre 6, Didacticiel : Création d'une mise en forme de page basée sur un tableau, voir Localisez vos fichiers, page 301 pour savoir comment poursuivre.

1. Double-cliquez sur l'espace réservé pour l'image, banner Graphic, dans le haut de la page.

1. Dans la boîte de dialogue Sélectionnez la source de l'image, accédez au dossier images du dossier cafe_townsend que vous avez défini comme dossier racine de votre site.
2. Sélectionnez le fichier banner_graphic.jpg, puis cliquez sur OK.

Si vous n'avez pas terminé le didacticiel permettant de créer une bannière de page, ouvrez le fichier banner_graphic. jpg du dossier completed_files/fireworks dans le dossier racine cafe_townsend.

Dreamweaver remplace l'espace réservé pour l'image par la bannière de Cafe Townsend.

1. Cliquez une fois à l'extérieur du tableau pour le désélectionner.
2. Enregistrez la page (Fichier > Enregistrer).

Insérez une image à l'aide du menu insérer.

1. Cliquez à l'intérieur de la troisième ligne du premier tableau (deux lignes sous la bannière que vous venez d'insérer, juste au-dessus des cellules en couleur).

1. Choisissez Insertion > Image.
2. Dans la boîte de dialogue Sélectionnez la source de l'image, accédez au dossier images du dossier cafe_townsend, Sélectionnez le fichier body_main_header.gif puis cliquez sur OK.

Si la boîte de dialogue Attributes d'accessibilité avec des balises apparait, cliquez sur OK.

Un long graphisme de couleur s'affiche dans la ligne du tableau. Même s'il ressemble davantage à une couleur d'arrière-plan du tableau qu'à un graphisme, examinez-le de plus près : vous constaterez qu'il possède des coins arrondis. Ainsi, l'effet de coin arrondi donnera à la partie inférieure de votre page un aspect intéressant lorsque vous aurez ajouté tous les autres actifs.

Insérez une image par glissement

1. Cliquez dans la derniere ligne du dernier tableau de la page (juste en dessous des cellules en couleur).
2. Dans le panneau Fichiers (Fenêtre > Fichiers), recherchez le fichier body_main footer.

REMARQUE

Si la boîte de dialogue Attributes d'accessibilité à des balises apparait, cliquez sur OK.

1. Cliquez en dehors du tableau puis enregistrez la page (Fichier > Enregistrer).

Insérez une image à partir du panneau actifs

1. Cliquez dans la colonne centrale du tableau à trois colonnes (la première cellule de couleur brun clair).
2. Dans l'inspecteur de propriétés (Fenêtre > Propriétés), sélectionnez Centre dans le menu contextuel Alignment horizontal et sélectionnez Haut dans le menu contextuel Alignment vertical. Cette action aligne le contenu de chaque cellule du tableau au centre de la partie supérieure de la cellule.

Si vous ne VOYZ pas les menus déroulants Alignmentement vertical et Alignmentement horizontal, cliquez sur la flèche d'extension dans l'angle inférieur droit de l'inspecteur des propriétés.

1. Appuyez sur Entrée (Windows) ou Retour (Macintosh) pour créer davantage de place.

Le panneau Actifs Vous pouvez utiliser le panneau Actifs pour afficher et gérer les actifs de votre site actif. Ce dernier présente les actifs du site associés au document actif dans la fenêtre du document. Vous devez définir un site local avant d'afficher les actifs dans le panneau Actifs. Pour plus d'informations, voir Chapitre 4, Didacticiel : Configuration de votre site et des fichiers de projet ou Utilisation de Dreamweaver.

Deux vues sont disponibles pour le panneau Actifs :

La liste Site présente tous les actifs de votre site, y compris les couleurs et adresses URL utilisées dans les documents de votre site.

La liste Favoris affiche uniquement les actifs explicitement sélectionnés. Pour ajouter un actif à la liste Favoris, sélectionnez-le dans la liste Site puis cliquez sur Ajouter aux favors dans le menu Options, situé dans le coin supérieur droit du panneau Fichiers.

Lorsque vous cliquez sur un actif dans le panneau Actifs, il s'affiche dans la zone d'aperçu. Pour modifier la taille de la zone d'aperçu, faites glisser la ligne qui la sépare des en-têtes des colonnes d'actifs.

Pour plus d'informations, voir Utilisation des actifs dans Utilisation de Dreamweaver.

1. Cliquez sur l'onglet Actifs du panneau Fichiers ou sélectionnez Fenêtre > Actifs.

Les actifs du site s'affichent.

1. Si l'affichage des images n'est pas sélectionné, cliquez sur le bouton Images pour afficher vos actifs d'image.
2. Dans le panneau Actifs, Sélectionnez le fichier street_sign.jpg.
3. Effectuez l'une des tâches suivantes :
4. Faites glisser le fichier sign. jpg jusqu'au point d'insertion de la cellule centrale du tableau.
5. Cliquez sur le bouton Insérer dans la partie inférieure du panneau Actifs.

Si la boîte de dialogue Attributes d'accessibilité à des balises apparait, cliquez sur OK.

Le graphisme street_sign.jpg s'affiche sur la page.

1. Cliquez une fois à l'extérieur du tableau pour désélectionner l'image.
2. Enregistrez la page.

Insérez et lisez un fichier flash

Vous allez ensuite insérer un fichier Flash qui affiche un diaporama de photos des plats mis en vedette du Cafe Townsend. Le fichier Flash que vous allez insérer est un fichier de zone de messagerie variable — ou FMA. Un FMA est une application Flash très commune qui affiche un message d'information au public. Le message peut varier en fonction des besoins de l'entreprise. Par exemple, si le Cafe Townsend organise une manifestation, le FMA pourrait être aisément modifié (sans affecter le reste de la page Web) pour afficher des informations à son sujet, en lieu et place des plats mis en vedette.

Pour insérer le fichier Flash, vous devez insérer le code HTML correspondant dans la page Dreamweaver. La méthode la plus rapide pour ce faire consiste à insérer le fichier SWF (fichier d'animation Flash exporté) sur la page. Lorsque vous insérez un fichier SWF dans Dreamweaver, ce dernier écrit le code HTML Flash nécessaire à votre place.

1. Lorsque la page index.html est ouverte dans la fenêtre de document Dreamweaver, cliquez une fois dans la deuxième ligne du premier tableau.

Il s'agit de la ligne juste en dessous de la bannière que vous avez insérée dans la section précédente.

1. Dans l'inspecteur de propriétés (Fenêtre > Propriétés), sélectionnez Centre dans le menu contextuel Alignment horizontal et sélectionnez Haut dans le menu contextuel Alignment vertical.

Le contenu de la cellule du tableau est ainsi placé au milieu de celle-ci.

Si vous ne VOYZ pas les menus déroulants Alignement vertical et Alignement horizontal, cliquez sur la flèche d'extension dans l'angle inférieur droit de l'inspecteur des propriétés.

Présentation des fichiers Lorsque vous créez des actifs dans Macromedia Flash, vous travailliez dans des fichiers FLA, c'est-à-dire le type de fichier par défaut pour l'application Flash. Les fichiers FLA possèdent l'extension. fla. Par exemple, si vous travailliez sur un logo animé pour un site Web, le fichier Flash pourrait se nommer animéné_logo. fla.

Lorsque vous avez terminé votre travail sur un fichier FLA dans Flash, vous devez l'exporter vers un format qui pourrait être lu dans FlashPlayer sur le Web. Quand vous exportez vos fichiers FLA dans Flash, ils sont convertis en des fichiers SWF et identifiés par une extension. swf. Ce sont les fichiers SWF (pas les fichiers FLA) qui lisent le contenu Flash dans un navigateur Web. C'est le type de fichier que vous nevez insérer dans une page Web que vous etes en train de construire avec Dreamweaver.

1. Sélectionnez Insérer > Supports > Flash.

Dans la boîte de dialogue Sélectionner un fichier, accédez au fichier flash_fma.swf (il se trouve dans le dossier racine de cafe_townsend de votre site), sélectionnez ce fichier, puis cliquez sur OK.

Si la boîte de dialogue Attributes d'accessibilité à des balises objet apparait, cliquez sur OK.

Si vous n'avez pas terminé le Didacticiel : Création de votre première application Flash, page 245, recherchez le fichier flash_fma_finished.swf dans le dossier completed_files/flash du dossier racine cafe_townsend.

Un espace réservé pour du contenu Flash, qu'une série de FMA lui-même, s'affiche dans la fenêtre de document. Cela se produit parce que le code HTML pointe vers le fichier SWF flash_fma.swf. Lorsqu'un utilisateur charge la page index.html, le navigateur lit le fichier SWF.

1. L'espace réservé pour le contenu Flash doit toujours être sélectionné après l'insertion du fichier SWF, pour autant que vous ne cliquiez nulle part ailleurs sur la page.

Si l'espace réservé pour le contenu Flash n'est pas sélectionné, cliquez dessus.

1. Dans l'inspecteur de propriétés (Fenêtre > Propriétés), cliquez sur le bouton Lire.

Si vous ne VOYZ pas le bouton Lire, cliquez sur la flèche d'extension dans l'angle inférieur droit de l'inspecteur des propriétés.

Dreamweaver lit le fichier Flash dans la fenêtre de document et vous montre ce que les visiteurs du site verront lorsqu'ils afficheront la page dans un navigateur.

1. Dans l'inspecteur de propriétés, cliquez sur Arrêt pour interrompre la lecture du fichier Flash.
2. Enregistrez la page.

Insérez une vidéo flash

Ensuite, vous allez insérer un fichier video Flash en utilisant un actif qui vous sera fourni.

1. Lorsque la page index.html est ouverte dans la fenêtre Document de Dreamweaver, cliquez au-dessus du graphisme que vous avez placé dans la colonne centrale du tableau à trois colonnes.

Dans la section précédente, vous avez créé de l'espace avant d'insérer le graphisme; c'est à cet endroit que vous devez cliquer.

1. Sélectionnez Insérer > Supports > Vidéo Flash.
2. Dans la boîte de dialogue Insérer un fichier Flash video, désélectionnez Video à téléchargement progressif dans le menu Type de video.

Présentation de Video Flash La commande Insérer un fichier Flash Video de Dreamweaver permet d'insérer des vidéos Flash dans vos pages Web sans employer Flash l'outil de création. La commande insère dans ces pages un Flash composant vidéo Flash (qui prend en charge l'affichage du contenu vidéo Flash que vous sélectionnez) ainsi qu'un ensemble de contrôle de lecture qui apparaissent dans le navigateur.

La commande insérer un fichier Flash Video dispose des options suivantes pour la fourniture de contenu vidéo aux visiteurs de ce site :

Vidéo en téléchargement progressif télécharge le fichier vidéo Flash (FLV) sur le disque dur des visiteurs du site, puis entame sa lecture. Contrairement aux méthodes traditionnelles de diffusion vidéo par téléchargement et lecture, le téléchargement progressif permet de lancer la lecture du fichier vidéo avant la fin de son téléchargement.

Vidéo à diffusion en direct diffuse le contenu video Flash et le lit immédiatement sur la page Web. Pour permettre la diffusion en direct de video sur vos pages Web, vous devez toutes disposer d'un accès à Macromedia Serveur de communication Flash, le seul serveur de diffusion en direct capable de diffuser du contenu video Flash.

Pour plus d'informations sur l'utilisation de la fenêtre de document, voir Insertion de contenu Flash Video dans Utilisation de Dreamweaver.

1. Dans la zone de texte URL, entrez un chemin d'accès relatif au fichier cafe_townsend_home.flv en cliquant sur le bouton Parcourir, en accédant au fichier cafe_townsend_home.flv (qui se trouve dans le dossier racine cafe_townsend de votre site) puis en le sélectionnant.

1. Sélectionnez Halo Skin 2 dans le menu déroulant Apparence.

Un aperçu de l'habillage sélectionné apparait sous le menu déroulant Skin. L'option Skin indique l'aspect et le comportement du composant video Flash qui contendra le contenu video Flash.

Pour plus d'informations sur la sélection d'habillages pour les composants video Flash, consultez le site www.macromedia.com/go/flv_tutorial_fr.

1. Dans les zones de texte Largeur et Hauteur, exécutez les opérations suivantes:

Dans la zone de texte Largeur, saisissez 180. - Dans la zone de texte Hauteur, saisissez 135 et appuyez sur Entrée (Windows) ou Retour (Macintosh).

Les valeurs affichées dans Largeur et Hauteur indiquent la largeur et la hauteur du fichier FLV exprimées en pixels. Vous pouvez modifier ces valeurs à votre guise pour changer la taille du Video Flash sur votre page Web. Quand vous augmentez les dimensions d'une animation, la qualité de l'image décroît généralement.

'Total avec habillage' indique la largeur et la hauteur du fichier FLV plus la largeur et la hauteur de l'habillage sélectionné.

1. Conservez les valeurs par défaut des autres options :

Contraindre permet de préserver le rapport d'aspect entre la largeur et la hauteur du composant vidéo Flash. Cette option est sélectionnée par défaut.

Lecture auto déterminée si la vidéo doit être lue automatiquement à l'ouverture de la page Web. Cette option est désélectionnée par défaut.

Vous sous-poussez-cliquez sur Detector la taille pour déterminer avec exactitude la largeur et la hauteur du fichier FLV. Cependant, il peut arriver que Dreamweaver ne puisse pas établir les dimensions du fichier FLV. Dans ces cas-là, il vous faut saisir vous-mêmes les valeurs de la largeur et de la hauteur.

Rembobinage automatique détermine si le contrôle de lecture doit revenir en position de départ au terme de la lecture de la vidéo. Cette option est désélectionnée par défaut.

1. Cliquez sur OK pour fermer la boîte de dialogue et ajouter le contenu vidéo Flash à votre page Web.

La commande Insérer une vidéo Flash génère un fichier SWF de lecteur vidéo et un fichier SWF d'habillage qui serviront à afficher votre contenu vidéo Flash sur une page Web. Il peut être nécessaire de cliquer sur le bouton Actualiser du panneau Fichiers pour voir les nouveaux fichiers. Ces fichiers sont stockés dans le même répertoire que le fichier HTML auquel vous ajoutez du contenu vidéo Flash (dans le cas présent, le dossier racine cafe_townsend). Quand vous téléchargez vers le serveur la page HTML qui enchasse le contenu vidéo Flash, les fichiers ainsi téléchargés sont dépendants les uns des autres (à condition que vous ayez cliqué Oui dans la Boîte de dialogue Placer les fichiers dépendants).

1. Enregistrez la page.

Insérez du texte

Vous allez à présent ajouter du texte à la page. Vous pouvez taper directement le texte dans la fenêtre Document de Dreamweaver ou le copier et le coller à partir d'autres sources (comme un fichier Microsoft Word ou un fichier texte). Par la suite, vous mettrez le texte en forme à l'aide de feuilles de style en cascade (CSS).

Insertion du corps de texte

1. Dans le panneau Fichiers, localisez le fichier sample_text.txt (dans le dossier racine cafe_townsend root) puis double-cliquez sur l'icône du fichier pour l'ouvrir dans Dreamweaver.

Cette fenêtre s'affiche en mode Code; il est impossible de passer en mode Création (le mode dans lequel vous avez travaillé jusqu'à), parce que ce fichier n'est pas un fichier HTML.

1. Dans la fenêtre de document sample_text. txt, appuyez sur Ctrl+A (Windows) ou Commande+A (Macintosh) pour sélectionner la totalité du texte, puis sélectionnez Édition > copier pour copier le texte.
2. Fermez le fichier sample_text.txt en cliquant sur le X dans le coin supérieur droit du document.
3. Dans la fenêtre de document index.html, cliquez dans la troisième cellule du tableau à trois colonnes (elle se trouve à droite de la colonne contenant le graphisme et la video Flash).
4. Sélectionnez Édition > Coller.

Le texte du fichier texte apparait dans la cellule sélectionnée du tableau.

Suivant la résolution de votre écran, le tableau à trois colonnes s'élargit pour tenir compte du texte. Ne vous souciez pas de son apparence pour l'instant. Dans le didacticiel suivant, vous apprendrez à mettre le texte en forme à l'aide de CSS de manière à ce que tout tienne sans difficulté dans le tableau.

1. Assurez-vous que le point d'insertion reste dans la cellule du tableau où vous venez de coller le texte. Si ce n'est pas le cas, cliquez à l'intérieur de cette cellule.
2. Dans l'inspecteur des propriétés (Fenêtre > Propriétés), CHOISSEZ Haut dans le menu Alignment vertical. Le texte que vous venez de taper est ainsi aligné sur le haut de la cellule du tableau. Si vous ne voyez pas le menu Alignment vertical, cliquez sur la flèche d'extension dans l'angle inférieur droit de l'inspecteur des propriétés.

1. Enregistrez la page.

Insérez du texte pour une barre de navigation

Vous allez à présent insérer le texte d'une barre de navigation. Toutefois, le texte ne se présentera pas comme une barre de navigation tant que vous n'aurez pas défini sa mise en forme, dans le didacticiel suivant.

1. Cliquez dans la première colonne du tableau à trois colonnes (la colonne de couleur brun rougeâtre).
2. Tapez le terme Cuisine.

1. Appuyez sur la barre d'espace puis tapez Chef Ipsum.
2. Repétez l'étape précédente jusqu'à ce que vous ayez entré les mots suivants, séparés l'un de l'autre par un espace : Articles, Special Events, Location, Menu, Contact Us.

N'appuyez pas sur Entrée (Windows) ou Retour (Macintosh) en cours de frappe. N'employez que la barre d'espace pour séparer les mots et laissez ceux-ci aller à la ligne naturellement. La largeur fixe de la cellule du tableau détermine le nombre de mots qui tiendront sur une ligne.

1. Tout en maintainant le point d'insertion dans la première cellule du tableau à trois colonnes, cliquez sur la balise du sélecteur de balises. Dans l'inspecteur des propriétés (Fenêtre > Propriétés), CHOISSEZ Haut dans le menu Alignment vertical. Le texte que vous venez de taper est ainsi aligné sur le haut de la cellule du tableau. Si vous ne VOYZ pas le menu Alignement vertical, cliquez sur la flèche d'extension dans l'angle inférieur droit de l'inspecteur des propriétés. Enregistrez votre page. Créez des liens Un lien est une reférence, insérée dans une page Web, qui pointe sur un autre document. Vous pouvez transformer pratiquement un actif quelconque en un lien bien que le lien le plus courant soit un lien de texte. Vous pouvez créé des liens à tout moment du processus de création d'un site. Dans cette section, vous allez créé des liens pour la barre de navigation, même si le texte n'est pas encore mis en forme pour ressembler à une barre de navigation. Le dossier racine du site cafe_townsend contient une page HTML terminée que vous pouvezlier à (une page de menu pour Cafe Townsend). Vous emploierez cette page pour tous les liens de la barre de navigation. Si vousétiez en train de creator un vrai site, chacun de ces liens accederait a une page différente. Dans la page index. html ouverte de la fenêtre de document, sélectionné le terme Cuisine que vous avez saisi dans la première cellule du tableau à trois colonnes. Prenez garde de ne saisir que le terme Cuisine sans l'espace qui le suit. Dans l'inspecteur de propriétés (Fenêtre > Propriétés), cliquez sur l'icone de dossier située en regard de la zone de texte Lien. Dans la boite de dialogue Sélectionner un fjichier, accédez au fjichier menu. html (qui se trouve dans le même dossier que le fjichier index. html) puis cliquez sur OK (Windows) ou Choisir (Macintosh). Cliquez sur la page pour déslectionner le mot Cuisine. Le texte « Cuisine » est souligné et s'affiche en bleu, ce qui indique qu'il s'agit désormais d'un lien. Répétez les étapes précédentes pour lier chaque mot ou ensemble de mots que vous avez saisis pour la navigation. Vous pouze créé plus de six liens : un pour Chef Ipsum, Articles, Special Events, Location, Menu, et Contact Us. Liez chaque mot ou groupe de mots à la page menu. html et prenez garde de ne laisser aucun espace avant et après les mots ou groupes de mots quand vous créez des liens. Il ne s'agit ici que de liens factices; en réalité, il faudraitlier chaque mot de la navigation à une page qui lui soit propre. Les liens ne fonctionnent pas lorsque vous cliquez dessus dans la fenêtre de document dans Dreamweaver. Ils ne fonctionnent que dans un navigateur. Pour vous assurer que votre lien fonctionne correctement, vous devez afficher votre page dans un navigateur. Pour obtenir des instructions sur la manière de procéder, poursuivez avec Aperçu de votre page dans un navigateur, page 325: Enregistrez votre page. Aperçu de votre page dans un navigateur Le mode Création vous donne une vague idée de l'apparance de votre page sur le Web, mais il vous faut obtenir un aperçu de la page dans le navigateur pour vous rendre compte du résultat effectif. Bien que les navigateurs fournissent les mêmes résultats en règle générale, chaque version de navigateur peut afficher des pages HTML plus ou moins différentes. Dreamweaver fait de son mieux pour partager des HTML qui serontsemblablesquelque soit le navigateurutilisé. Maisil est difficile d'éviter des différences. Dés lors, la consultation d'un aperçu de votre travail dans un navigateur est la seule manière dont vous disposez pour voir ce que verront les visiteurs de votre site après la publication de vos pages. Assurez-vous que le fichier index. html soit ouvert dans la fenêtre du document. Appuyez sur la touche F12 (Windows) ou Commande+F12 (Macintosh). Votre navigateur principal est lancé s'il n'est pas deja actif et il affiche la page index. Dreamweaver doit automatiquement détecter votre navigateur principal e