MACROMEDIA STUDIO 8-DCOUVERTE DE STUDIO 8 Manuel utilisateur

Découverte de Studio 8
Marques commerciales
1 Step RoboPDF, ActiveEdit, ActiveTest, Authorware, Blue Sky Software, Blue Sky, Breeze, Breezo, 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 Etats-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 appartenant à Macromedia, Inc. ou à d’autres entités et peuvent être déposés 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 vous accédez à l’un de ces sites, vous le faites à vos
propres risques. Macromedia mentionne ces liens pour faciliter votre travail et l’inclusion de ces liens n’implique pas que
Macromedia approuve le contenu de ces sites tiers ou en accepte la responsabilité.
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 est mis en oeuvre 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 Etats-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édaction : Jay Armstrong, Charles Nadeau, Jennifer Rowe, David Sullivan, Jon Michael Varese
Rédactrice 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, Etats-Unis
Table des matières
PARTIE 1 : BIEN DÉMARRER
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
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
A propos du 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
3
PARTIE 2 : DÉFINIR VOTRE 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 exportation et exportation des images . . . . . . . . . . . . . 219
Affichage des images optimisées finales . . . . . . . . . . . . . . . . . . . . . . . . 221
Chapitre 8 : Didacticiel : Création d’une bannière de page . . . 223
Examen de votre tâche. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .223
Ajout d’un arrière-plan et placement du logo . . . . . . . . . . . . . . . . . . . .224
Organisation de vos objets à l’aide de calques . . . . . . . . . . . . . . . . . . .228
Création d’un arrière-plan contrasté pour le logo . . . . . . . . . . . . . . . . 230
4
Table des matières
Création d’un contour autour de la bannière. . . . . . . . . . . . . . . . . . . . .
Création d’un effet de bord oblique . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Ajout d’une ligne de balise à la bannière . . . . . . . . . . . . . . . . . . . . . . . .
Exportation d’un fichier d’image optimisé . . . . . . . . . . . . . . . . . . . . . . .
234
237
238
239
Chapitre 9 : Didacticiel : Création de votre première
application Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245
Examinez votre tâche . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246
Etude de l’application finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246
Création d’un document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 248
Création de symboles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252
Edition 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
Edition du scénario principal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 263
Création de la bordure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 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 votre 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
Etapes suivantes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 297
PARTIE 4 : ASSEMBLAGE ET DÉPLOIEMENT DE VOTRE
SITE INTERNET
Chapitre 11 : Didacticiel : Ajout de contenu aux pages . . . . . . . .301
Localisez vos fichiers. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .301
Passez votre tâche en revue . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 303
Table des matières
5
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
de votre page avec CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 329
Localisez vos fichiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 330
Passez votre tâche en revue . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 330
Étude 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
Etudiez 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 votre 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 utilisateur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 371
Modification des paramètres d’un rôle . . . . . . . . . . . . . . . . . . . . . . . . . . 372
Créer une clé de connexion et l’envoyer à des utilisateurs . . . . . . . . . 375
Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .377
6
Table des matières
1
PARTIE 1
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 :
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
Apprentissage de Studio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
Notions de base de Studio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
Processus de développement Web . . . . . . . . . . . . . . . . . . . . . . . . . 141
7
Introduction
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 créer 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.
R EM A R QU E
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
9
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
comporte é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.
10
Introduction
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 Tirer le meilleur parti
de la documentation Dreamweaver, page 22.
Possibilités offertes par Flash
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 :
Bannières publicitaires, les cartes de vœux en ligne et les
dessins animés, etc. De nombreux autres types d’applications Flash
comprennent également des éléments d’animation.
Animations
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.
Jeux
Interfaces utilisateur De nombreux créateurs de sites Web ont recours à
Flash pour créer des interfaces utilisateur. 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éée par Flash.
Possibilités offertes par Studio 8
11
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.
Zones de messages flexibles (FMA, Flexible messaging areas)
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
présentant des données distantes avec une interface graphique dynamique.
Applications Internet dynamiques
Vous trouverez 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 concevoir une application Flash, vous devez généralement effectuer
les opérations de base suivantes :
12
Introduction
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 afin de
définir quand et comment les faire apparaître 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 votre 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
procéder à ces étapes dans un ordre différent. A mesure que vous vous
familiariserez avec Flash et son flux de travail, vous déterminerez la façon
de procéder qui vous convient le mieux.
Possibilités offertes par Fireworks
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.
Possibilités offertes par Contribute
En tant que développeur 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 plannification, 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 utilisateur, qui
déterminent quel utilisateur peut modifier le contenu d’un site Web et ce
qu’il peut modifier.
Possibilités offertes par Studio 8
13
Les utilisateurs Contribute gèrent le site Web. Le flux de travail affichermodifier-publier de Contribute permet aux utilisateurs de facilement
trouver 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.
Possibilités offertes par FlashPaper
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 pouvez 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 source, 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 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.
14
Introduction
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.
R E MA R Q UE
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 Sudio 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érifiez 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/.
Installation de Studio 8
15
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.
2.
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.
R E MA R Q UE
16
Introduction
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.
3.
Suivez les instructions d’installation.
R EM A R QU E
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.
4.
Cliquez sur Terminé lorsque le processus d’installation est terminé.
Les applications Studio 8 sont maintenant disponibles.
5.
Sous Windows, sélectionnez Programmes > Macromedia dans le menu
Démarrer. Sous Macintosh, ouvrez 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.
Installation de Studio 8
17
Activation de vos produits Studio
Si vous disposez d’une licence pour utilisateur unique, vous devez activer
votre 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.
R EMA R Q U E
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.
R EM A R QU E
Vous ne pouvez pas activer FlashPaper.
2.
Cliquez sur Continuer pour passer à l’écran suivant.
3.
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.
18
Introduction
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 enregistrez 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, ouvrez le menu Aide et
sélectionnez soit l’option d’enregistrement en ligne soit par courrier,
avec impression d’un formulaire.
Enregistrement de vos produits Studio
19
20
Introduction
CHAPITRE 1
Apprentissage de Studio
1
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
21
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 aideront à
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.
22
Apprentissage de Studio
Titre
Description/
Public visé
Emplacement
Démarrer avec
Dreamweaver
• Affichage dans Dreamweaver :
Introduction de base
Sélectionner Aide > Bien
aux concepts et à
démarrer avec Dreamweaver
l’interface de
• Affichage en ligne : http://
Dreamweaver, avec
livedocs.macromedia.com/go/
des didacticiels
livedocs_dreamweaver_fr/
détaillés pour novices.
• Obtention du fichier PDF :
Conçu pour des
www.macromedia.com/go/
utilisateurs débutants
dw_documentation_fr
mais convient
également aux
utilisateurs de niveaux
avancé ou
intermédiaire qui
désirent se familiariser
avec les nouvelles
fonctionnalités.
Titre
Description/
Public visé
Emplacement
Utilisation de
Dreamweaver
Information complète
sur 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
• Affichage dans Dreamweaver :
Description du cadre
Sélectionner Aide > Extensions
de Dreamweaver et
de Dreamweaver
l’interface de
• Affichage en ligne : http://
programmation
livedocs.macromedia.com/go/
d’application (API).
livedocs_dreamweaver_fr/
Conçu pour les
• Obtention du fichier PDF :
utilisateurs avancés
www.macromedia.com/go/
qui veulent développer
dw_documentation_fr
l’interface de
Dreamweaver ou bien
la personnaliser
Guide des API
de
Dreamweaver
Description de
l’utilitaire API et l’API
JavaScript, tous deux
vous venant en aide
quand vous
développez 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
Avantages de la documentation Studio
23
24
Apprentissage de Studio
Titre
Description/
Public visé
Emplacement
Utilisation de
ColdFusion
• Affichage dans Dreamweaver :
Comprend une
Sélectionnez Aide > Utilisation
sélection des livres les
de ColdFusion
plus importants dans le
• Affichage en ligne : http://
lot de la
livedocs.macromedia.com/go/
documentation
livedocs_coldfusion/
ColdFusion.
(L’ensemble complet • Obtention du fichier PDF :
www.macromedia.com/go/
est disponible sur
cf_documentation
LiveDocs.) Cette
documentation a été
conçue pour toute
personne intéressée
par ColdFusion, des
débutants aux
développeurs
expérimentés.
Référence
HTML, server model, • Affichage dans Dreamweaver :
Sélectionnez Aide >
et autres types de
Référence. Pour une liste
manuel de référence,
complète de manuels, cliquez
principalement publiés
sur le menu déroulant de Book
chez O’Reilly. Conçu
dans le Panneau de
pour quiconque a
références.
besoin de plus
d’informations sur la
syntaxe de codage, les
concepts, etc.
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éveloppeurs
Dreamweaver
Articles et didacticiels www.macromedia.com/go/
permettant d’améliorer dreamweaver_devcenter_fr
vos compétences et
d’en acquérir de
nouvelles.
Centre de
documentation
de
Dreamweaver
Manuels de produits
en format PDF, listes
d’erreurs, didacticiels
et notes
d’accompagnement.
www.macromedia.com/go/
dw_documentation_fr
Forums en ligne Discussions et
Macromedia
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
www.macromedia.com/go/
Cours incluant des
tâches pratiques et des dreamweaver_training_fr
scénarios réalistes.
Avantages de la documentation Studio
25
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 à trouver les informations qui vous aideront
au mieux dans la réalisation de vos objectifs avec Flash.
Accès à la documentation Flash
Les tableaux suivants présentent les 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
26
Apprentissage de Studio
Titre
Description/
Public visé
Emplacement
Bien démarrer
avec Flash
• Affichage dans Flash :
Introduction de base
Choisissez Aide > Utilisation de
aux concepts et à
Flash
l’interface de Flash,
•
Affichage en ligne :
avec un didacticiel
livedocs.macromedia.com/go/
détaillé pour les
livedocs_flash
novices. S’adresse aux
• Obtention du fichier PDF :
utilisateurs débutants
www.macromedia.com/go/
de Flash.
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/
livedocs_flash
• Obtention du fichier PDF :
www.macromedia.com/go/
fl_documentation_fr
Titre
Description/
Public visé
Aide du codeur Informations
FLV
complètes sur
l’utilisation du codeur
FLV.
Destiné aux
concepteurs Flash
créant du contenu
vidéo.
Emplacement
• Affichage dans Flash :
Choisissez Aide > Utilisation de
Flash
• Affichage en ligne :
livedocs.macromedia.com/go/
livedocs_flash
• Obtention du fichier PDF :
www.macromedia.com/go/
fl_documentation_fr
Didacticiels et exemples
]
Titre
Description/
Public visé
Emplacement
Didacticiels
Flash
• Affichage dans Flash :
Ensemble de
Choisissez Aide > Utilisation de
didacticiels étape par
Flash
étape qui vous
apprend une variété de • Affichage en ligne :
livedocs.macromedia.com/go/
techniques pour
livedocs_flash
l’utilisation de Flash
• Obtention du fichier PDF :
par les débutants et les
www.macromedia.com/go/
utilisateurs plus
fl_documentation_fr
avancés. Destiné à
tous les utilisateurs de
Flash.
• Affichage dans Flash :
Exemples Flash Ensemble de fichiers
Choisissez Aide > Utilisation de
d’exemple illustrant les
Flash
différentes techniques
• Affichage en ligne :
et fonctionnalités
livedocs.macromedia.com/go/
Flash, accompagnés
livedocs_flash
d’une description
• Obtention du fichier PDF :
détaillée pour
www.macromedia.com/go/
chacune. Destiné à
fl_documentation_fr
tous les utilisateurs de
Flash.
Avantages de la documentation Studio
27
ActionScript
Titre
Description/
Public visé
Emplacement
Formation à
ActionScript
2.0 dans Flash
• Affichage dans Flash :
Une introduction
Choisissez Aide > Utilisation de
détaillée au codage
Flash
avec ActionScript,
comprenant un grand • Affichage en ligne :
livedocs.macromedia.com/go/
nombre d’exemples de
livedocs_flash
code réutilisables.
• Obtention du fichier PDF :
Destiné aux
www.macromedia.com/go/
utilisateurs novices et
fl_documentation_fr
intermédiaires de
Flash.
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/
livedocs_flash
• Obtention du fichier PDF :
www.macromedia.com/go/
fl_documentation_fr
Titre
Description/
Public visé
Emplacement
Utilisation des
composants
• Affichage dans Flash :
Informations
Choisissez Aide > Utilisation de
concernant l’utilisation
Flash
et la personnalisation
des composants dans • Affichage en ligne :
livedocs.macromedia.com/go/
vos documents Flash.
livedocs_flash
Destiné à tous les
•
Obtention du fichier PDF :
utilisateurs de Flash.
www.macromedia.com/go/
fl_documentation_fr
Composants
28
Apprentissage de Studio
Titre
Description/
Public visé
Emplacement
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/
livedocs_flash
• Obtention du fichier PDF :
www.macromedia.com/go/
fl_documentation_fr
Extension de Flash
Titre
Description/
Public visé
Emplacement
Extension de
Flash
• Affichage dans Flash :
Informations
Choisissez Aide > Utilisation de
concernant l’ajout de
Flash
fonctionnalité à l’outil
• Affichage en ligne :
de programmation
livedocs.macromedia.com/go/
Flash JavaScript.
livedocs_flash
Destiné aux
• Obtention du fichier PDF :
utilisateurs JavaScript
www.macromedia.com/go/
et aux utilisateurs
fl_documentation_fr
Flash avancés.
Flash Lite
Titre
Description/
Public visé
Emplacement
Bien démarrer
avec Flash Lite
• Affichage dans Flash :
Introduction aux flux
Choisissez Aide > Utilisation de
de travail Flash Lite et
Flash
remarques concernant
• Affichage en ligne :
la programmation.
livedocs.macromedia.com/go/
S’adresse aux
livedocs_flash
développeurs de
• Obtention du fichier PDF :
téléphones et
www.macromedia.com/go/
périphériques mobiles
flash_lite_documentation_fr
et aux utilisateurs de
Flash de niveau
intermédiaire.
Avantages de la documentation Studio
29
Titre
Description/
Public visé
Emplacement
• Affichage dans Flash :
Développement Informations sur la
Choisissez Aide > Utilisation de
création de contenu
d’applications
Flash
Flash pour les
Flash Lite
• Affichage en ligne :
téléphones et
livedocs.macromedia.com/go/
périphériques mobiles.
livedocs_flash
S’adresse aux
• Obtention du fichier PDF :
développeurs de
www.macromedia.com/go/
téléphones et
flash_lite_documentation_fr
périphériques mobiles
et aux utilisateurs de
Flash de niveau
intermédiaire.
30
Apprentissage de Studio
Formation à
ActionScript
Flash Lite 1.x
• Affichage dans Flash :
Informations sur
Choisissez Aide > Utilisation de
l’écriture de code
Flash
ActionScript pour les
• Affichage en ligne :
téléphones et
livedocs.macromedia.com/go/
périphériques mobiles.
livedocs_flash
S’adresse aux
• Obtention du fichier PDF :
développeurs de
www.macromedia.com/go/
téléphones et
flash_lite_documentation_fr
périphériques mobiles
et aux utilisateurs de
Flash de niveau
intermédiaire.
Guide de
référence
ActionScript
Flash Lite 1.x
Entrées de référence • Affichage dans Flash :
Choisissez Aide > Utilisation de
de style dictionnaire
Flash
pour chaque terme du
•
Affichage en ligne :
langage ActionScript
livedocs.macromedia.com/go/
Flash Lite 1.x.
livedocs_flash
S’adresse aux
• Obtention du fichier PDF :
développeurs de
www.macromedia.com/go/
téléphones et
flash_lite_documentation_fr
périphériques mobiles
et aux utilisateurs de
Flash de niveau
intermédiaire.
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éveloppeurs
de Flash
Articles et didacticiels
permettant de
développer vos
compétences et d’en
acquérir de nouvelles.
• www.macromedia.com/go/
flash_devcenter_fr
Versions PDF et
Centre de
HTML de la
ressources et
documentation Flash.
de
documentation
de Flash
• www.macromedia.com/go/
fl_documentation_fr
Forums en ligne Discussions et
Macromedia
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
Avantages de la documentation Studio
31
Ressource
Description
Emplacement
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 • www.macromedia.com/go/
flash_resource_manager
visualisation du
système d’aide Flash
en dehors de
l’application Flash.
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.
32
Apprentissage de Studio
Titre
Description/
Public visé
Emplacement
Bien démarrer
avec Fireworks
Introduction de base
aux concepts et à
l’interface de
Fireworks, avec des
didacticiels 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
Titre
Description/
Public visé
Emplacement
Utilisation de
Fireworks
• Affichage dans Fireworks :
Informations
Sélectionnez Aide > Utilisation
complètes sur toutes
de Fireworks
les fonctionnalités de
Fireworks. S’adresse à • Affichage en ligne :
www.macromedia.com/go/
tous les utilisateurs de
livedocs_fireworks_fr
Fireworks.
• Obtention du fichier PDF :
www.macromedia.com/go/
fireworks_documentation_fr
Extension de
Fireworks
Informations sur l’ajout • Affichage dans Fireworks :
Sélectionnez Aide >
de fonctionnalités à
Extensions de Fireworks
Fireworks par le biais
•
Affichage en ligne :
de JavaScript. Destiné
www.macromedia.com/go/
aux utilisateurs
livedocs_fireworks_fr
JavaScript et aux
• Obtention du fichier PDF :
utilisateurs Fireworks
www.macromedia.com/go/
avancés.
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éveloppeurs
Fireworks
Articles et didacticiels
permettant de
développer vos
compétences et d’en
acquérir de nouvelles.
• www.macromedia.com/go/
fireworks_devnet_fr
Avantages de la documentation Studio
33
Ressource
Description
Emplacement
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éalistes.
• 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 aideront à
apprendre comment utiliser Contribute et FlashPaper.
34
Apprentissage de Studio
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 à • Dans Contribute :
Sélectionnez Aide > Guide de
l’installation de
démarrage rapide
Contribute, à la
• Afficher le format FlashPaper :
connexion du site Web
www.macromedia.com/go/
et à la réalisation
contribute_docs_fr
rapide de certaines
tâches élémentaires.
S’adresse aux
utilisateurs débutants
de Contribute.
• Affichage en ligne :
Déploiement de Présentation de ce
livedocs.macromedia.com
Contribute
que l’administrateur
•
Obtention du fichier PDF :
doit savoir lorsqu’il
www.macromedia.com/go/
déploie Contribute au
contribute_docs_fr
sein d’un
• Dans Contribute :
établissement. Les
Sélectionnez Aide >
sujets abordés
Macromedia Contribute, puis
concernent la
Administration de Contribute.
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.
Avantages de la documentation Studio
35
36
Apprentissage de Studio
Titre
Description/
Public visé
Emplacement
Utilisation et
administration
de Contribute
Information complète
sur toutes les
fonctionnalités de
Contribute. S’adresse
à tous les utilisateurs
et administrateurs de
Contribute
• Dans Contribute :
Sélectionnez Aide >
Macromedia Contribute
• Affichage en ligne :
livedocs.macromedia.com
• Obtention du fichier PDF :
www.macromedia.com/go/
contribute_docs_fr
Panneau
Comment...
• Dans Contribute :
Instructions rapides
Sélectionnez Affichage > Zone
étape par étape pour la
latérale
réalisation de
certaines tâches
communes de
Contribute. S’adresse
aux utilisateurs et
administrateurs de
Contribute
Didacticiel
Contribute
• Dans Contribute :
Didacticiel étape par
Sélectionnez Aide >
étape qui vous guide
Didacticiel Contribute
dans la réalisation de
tâches représentatives
de Contribute. Dans ce
didacticiel, vous
mettez à jour les pages
d’un site Web exemple
et vous vous
familiarisez
rapidement avec les
fonctionnalités de
Contribute. S’adresse
aux utilisateurs
débutants de
Contribute.
Utilisation de
FlashPaper
Information complète • Dans Contribute :
Sélectionnez Aide > Utilisation
sur toutes les
de FlashPaper
fonctionnalités de
FlashPaper. Destiné à • www.macromedia.com/go/
flashpaper_documentation_fr
tous les utilisateurs de
FlashPaper.
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éveloppeurs
Contribute
Articles et didacticiels
permettant de
développer vos
compétences et d’en
acquérir 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éalistes.
• www.macromedia.com/go/
contribute_training
Avantages de la documentation Studio
37
Ressource
Description
Emplacement
Centre de
ressources
documentaires
de FlashPaper
Permet d’obtenir des
manuels de produit,
des errata, des
didacticiels 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.
R EM A R QU E
38
Apprentissage de Studio
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 :
■
Utilisation des systèmes d’aide de Dreamweaver, Fireworks, Contribute et
FlashPaper, 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
Dreamweaver, Fireworks, Contribute et FlashPaper fonctionnent tous de la
même façon.
R EM A R QU E
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
Utilisation du système d’aide de Studio
39
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.
CON S EI L
Pour chercher dans l’Aide du produit (Macintosh) :
Pour chercher une
expression
spécifique, l’entourer
de double
guillemets.
40
Apprentissage de Studio
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.
Utilisation de l’index de l’Aide
Vous pouvez trouver rapidement des informations dans l’index de l’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.
1.
Dans le système d’aide, cliquez sur le lien Index dans le sommaire.
2.
Cliquez sur une lettre et faites défiler la liste jusqu’à l’entrée d’index
recherchée.
3.
Cliquez sur un nombre en regard de l’entrée afin d’obtenir l’affichage de
l’information indexée.
C O N S EI L
Pour utiliser l’index (Macintosh) :
Vous pouvez
commencer à taper
un mot-clé dans la
zone de texte pour
atteindre rapidement
l’entrée d’index
recherchée.
Changement de la taille de police
Vous pouvez 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 Edition > Réduire la taille de la police ou
Edition > Augmenter la taille de la police.
Utilisation du système d’aide de Studio
41
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émarrage 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 apparaît.
2.
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
Vous pouvez 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é basé sur votre propre expérience ou solliciter l’avis
de collègues utilisateurs.
42
Apprentissage de Studio
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
Dreamweaver, Fireworks, Contribute et FlashPaper.
R EM A R QU E
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, choisissez 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.
3.
Cliquez sur un titre de manuel pour l’ouvrir et afficher ses rubriques.
Utilisation du système d’aide de Studio
43
4.
Cliquez sur un titre de rubrique pour l’afficher.
R EM A R QU E
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:
: renvoie une liste des pages d’aide
contenant le mot spécifié. Par exemple, vous pouvez saisir scénario dans le
champ de recherche. Cette recherche renvoie une liste des pages d’aide
contenant le mot scénario ou Scénario.
Recherche sur un mot unique
: 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.
Recherche sur plusieurs mots
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
scénario et image-clé ou interpolation dans le champ de recherche. Cette
action renvoie une liste des pages d’aide contenant scénario et image-clé et
les pages d’aide contenant scénario 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.
44
Apprentissage de Studio
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.
2.
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.
3.
Cliquez sur une rubrique d’aide pour la sélectionner dans la liste.
La rubrique apparaît dans la table des matières du panneau d’Aide. Le
chemin qui conduit vers la rubrique dans la table des matières apparaît
en haut de chaque page d’aide.
R E MA R QU E
Cliquez sur Effacer pour revenir à la vue Table des matières.
Pour trouver 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 voulez
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).
Utilisation du système d’aide de Studio
45
4.
Dans la boîte de dialogue Rechercher, entrez le mot ou l’expression que
vous voulez 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).
Sélectionnez un mot ActionScript dans la fenêtre de script du
panneau Actions.
Placez le point d’insertion avant le terme ActionScript dans la
fenêtre Script du panneau Actions.
Pour ouvrir la page de référence de l’élément sélectionné dans le
panneau Aide, effectuez l’une des opérations suivantes :
■
■
■
Appuyez sur la touche F1.
Cliquez avec le bouton droit de la souris sur l’élément 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 :
■
R EM A R QU E
46
Apprentissage de Studio
Cliquez sur l’icône Aide de la boîte 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
découvrez 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.
Utilisation du système d’aide de Studio
47
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/flash_forums. 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édacteurs
techniques gèrent ces forums.
48
Apprentissage de Studio
Contrôle de l’apparence du panneau d’aide
Vous pouvez contrôler la façon dont le panneau d’aide apparaît 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.
Utilisation du système d’aide de Studio
49
Obtention des mises à jour de l’aide Flash
CON S E I L
50
Dans Windows, vous
pouvez modifier la
taille du texte du
panneau d’aide en
cliquant dans la
fenêtre table des
matière 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.
Apprentissage de Studio
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.
Pour mettre à jour l’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 crée et envoie
un nouveau fichier PDF de chaque guide mis à jour sur sa page de
documentation à l’adresse http://www.macromedia.com/go/
fl_documentation/.
CHAPITRE 2
Notions de base de
Studio
2
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 Dreamweaver. 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
51
Présentation des fichiers Dreamweaver
Vous pouvez travailler avec un grand choix 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 travaillez avec Dreamweaver.
(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.
CSS
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.
(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
pourvues de transitions à couleurs dégradées ainsi que toutes les images
exigeant plus de 256 couleurs.
JPEG
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). Pour
plus d’informations sur l’utilisation de ces types de fichiers, voir
Chapitre 36, Affichage de données XML dans des pages Web, dans Utilisation
de Dreamweaver.
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 voulez afficher sur une page Web. Pour plus d’informations sur
l’utilisation de ces types de fichiers, voir Chapitre 36, Affichage de données
XML dans des pages Web, dans Utilisation de Dreamweaver.
52
Notions de base de Studio
(ou ColdFusion Markup Language) pour des fichiers avec une
extension de type .cfm. Ils sont utilisés pour traiter des pages dynamiques.
Pour plus d’informations sur l’utilisation de ces types de fichiers, voir
Chapitre 40, Création rapide d'applications ColdFusion, dans Utilisation de
Dreamweaver.
CFML
ASPX (ou ASP.NET) pour des fichiers qui ont une extension de type
.aspx. Ils sont utilisés pour traiter des pages dynamiques. Pour plus
d’informations sur l’utilisation de ces types de fichiers, voir Chapitre 41,
Création rapide d'applications ASP.NET, dans Utilisation de Dreamweaver.
(ou PHP) : Les fichiers Hypertext Preprocessor ont une extension du
type .php. Ils sont utilisés pour traiter des pages dynamiques. Pour plus
d’informations sur l’utilisation de ces types de fichiers, voir Chapitre 43,
Création rapide d'applications PHP, dans Utilisation de Dreamweaver.
PHP
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 pré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 fenêtre de document, page 56
■
Barre d’outils de document, page 57
■
La barre d’état, page 58
■
La barre Insérer, 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
Notions de base de Dreamweaver
53
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.
Barre Insérer
Barre d’outils du document
Sélecteur de balises
R EM A R QU E
54
Notions de base de Studio
Fenêtre de document
Inspecteur des propriétés
Groupes de panneaux
Panneau Fichiers
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.
Barre Insérer
Sélecteur de
balises
Barre d’outils du document
Fenêtre de document
Inspecteur des propriétés
Groupes de panneaux
Panneau Fichiers
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.
Notions de base de Dreamweaver
55
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.
56
Notions de base de Studio
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.
Afficher le mode Code
Afficher les modes Code et Création
Afficher le mode Création
Aucune erreur du navigateur
Valider le marqueur
Gestion de fichiers
Assistances visuelles
Débogage du serveur
Titre de document
Options d’affichage
Actualiser le mode Création
Aperçu/Débogage dans le navigateur
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.
pour afficher uniquement le mode Création
dans la fenêtre de document.
Afficher le mode Création
affiche un rapport pour vous aider à déboguer la
page ColdFusion active. Le rapport indique les erreurs éventuellement
présentes sur votre page.
Débogage de serveur
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.
Titre du document
Aucune erreur du navigateur permet
de vérifier la compatibilité avec
différents navigateurs.
Notions de base de Dreamweaver
57
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.
pour prévisualiser ou déboguer un
document dans un navigateur. Sélectionnez un navigateur dans le menu
déroulant.
Aperçu/Débogage dans le navigateur
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 exécuter tout
d’abord certaines opérations, comme enregistrer le fichier ou utiliser ce
bouton.
Actualiser le mode création
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.
Options d’affichage
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.
Taille du document et estimation du
temps de téléchargement
Sélecteur de balises
58
Notions de base de Studio
Menu déroulant Taille de fenêtre
Définir le facteur de zoom
Outil Zoom
Outil Main
Outil
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 <corps> 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 choisissez 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 arrière 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.
A 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 apparaît.
Notions de base de Dreamweaver
59
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.
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.
contient des boutons permettant de créer des
formulaires et d’y insérer des éléments.
La catégorie Formulaires
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.
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.
Les catégories de code serveur
60
Notions de base de Studio
La catégorie Application insère des éléments dynamiques, tels que les jeux
d’enregistrements, les régions répétées et les formulaires d’insertion
d’enregistrements et de mise à jour.
La catégorie éléments Flash
insère des éléments Macromedia Flash.
permet de regrouper et d’organiser, dans un espace
commun, les boutons de la barre Insérer que vous utilisez le plus
fréquemment.
La catégorie Favoris
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.
Notions de base de Dreamweaver
61
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étés, 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.
62
Notions de base de Studio
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.
Notions de base de Dreamweaver
63
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 placé 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.
Vous pouvez 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éfinissant la sélection.
64
Notions de base de Studio
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 :
■
A propos des fichiers Flash, page 65
■
Familiarisation avec l’espace de travail Flash, page 67
A propos des fichiers Flash
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.
Notions de base de Flash
65
permet d’indiquer à Flash quand faire apparaître 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 scénario
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 :
66
Notions de base de Studio
■
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égralité 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 compilé, 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 en œuvre la
logique côté serveur qui travaille en association avec le code
ActionScript dans un fichier 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 présentent en détail 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
■
A 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
Notions de base de Flash
67
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.
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 Nouveau
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.
Créer à partir d’un modèle
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 utilitaires de
Formations Agréées Macromedia.
CONS E I L
68
Pour la masquer :
Vous pouvez
commander ou non
l’affichage par Flash
de la page de
démarrage.
Notions de base de Studio
■
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 vidéo, 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.
Zoom
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 arrière
sur la scène est de 8 %. La valeur maximale de zoom avant sur la scène est
de 2 000 %.
Notions de base de Flash
69
Pour agrandir ou réduire la vue de la scène, procédez d’une
des façons suivantes :
70
Notions de base de Studio
■
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) enfoncé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écifié 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équence
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 apparaît 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.
R EMA R Q U E
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.
Notions de base de Flash
71
Image-clé vide
Tête de lecture
En-tête du scénario
Menu déroulant
d’affichage des
images
Animation image
par image
Animation
interpolée
Icône de calque guide
Centrer l’image, bouton
Boutons papier pelure
Indicateur de temps écoulé
Indicateur de cadence
Indicateur d’image courante
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 scénario 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 scénario 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 scénario en bas ou sur les côtés de la fenêtre de l’application, ou
encore afficher le scénario dans sa propre fenêtre. Vous pouvez également
masquer le scénario.
72
Notions de base de Studio
Vous pouvez redimensionner le scénario de manière à changer le nombre
de calques et d’images visibles. Lorsque le scénario 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 scénario.
Pour déplacer le scénario lorsqu’il est ancré à la fenêtre de
l’application :
■
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).
Notions de base de Flash
73
Déplacement de la tête de lecture
La tête de lecture se déplace dans le scénario lors de la lecture d’un
document pour indiquer l’image actuellement affichée sur la scène. L’entête du scénario affiche le numéro des images de l’animation. Pour afficher
une image sur la scène, vous devez déplacer la tête de lecture vers cette
image dans le scénario.
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 :
■
74
Notions de base de Studio
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 scénario 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 scénario. Ces vignettes sont utiles pour avoir une vue
d’ensemble de l’animation mais nécessitent de l’espace écran
supplémentaire.
Bouton d’affichage des images
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.
Cliquez sur le bouton d’affichage des images situé dans le coin supérieur
droit du scé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.
Notions de base de Flash
75
■
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 interpoler 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 scénario
détermine celui de leur affichage dans une application Flash. Vous pouvez
organiser les images-clés différemment dans le scénario afin de modifier la
séquence des événements dans l’animation.
Utilisation d’images dans le scénario
Dans le scénario, vous travaillez 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 :
76
Notions de base de Studio
■
Insérer, sélectionner, supprimer et déplacer des images ou des imagesclé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équence d’images (d’une image-clé
à la suivante) en cliquant sur n’importe quelle image de cette séquence.
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 Edition > 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.
Notions de base de Flash
77
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équence 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 Edition > Scénario > Sélectionner toutes les images.
Pour supprimer ou modifier une image ou une image-clé,
effectuez l’une des opérations suivantes :
78
Notions de base de Studio
■
Pour supprimer une image, une image-clé ou une séquence d’images,
sélectionnez l’image, l’image-clé ou la séquence, 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équence et choisissez Supprimer les images à partir du
menu contextuel. Les images environnantes demeurent inchangées.
■
Pour déplacer une image-clé ou une séquence d’images et leur contenu,
faites-la glisser vers l’emplacement souhaité.
■
Pour étendre 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équence 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équence d’images,
sélectionnez-la et choisissez Edition > Scénario > Copier les images.
Sélectionnez une image ou séquence à 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équence 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équence 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.
Notions de base de Flash
79
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 scénario 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
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
mieux créer des effets spéciaux.
Pour afficher une présentation interactive de l’utilisation des calques dans
Flash, choisissez 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 apparaît 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 > Scénario > 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 scénario,
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 choisissez
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 scénario,
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é.
80
Notions de base de Studio
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 mieux 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 Œil, à 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’icône 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.
Notions de base de Flash
81
■
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.
2.
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.
3.
Cliquez sur OK.
Pour changer la hauteur du calque dans le scénario :
1.
Effectuez l’une des opérations suivantes :
■
■
■
2.
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.
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 :
■
82
Notions de base de Studio
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 choisissez
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.
Notions de base de Flash
83
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 Edition > Scénario > Copier les images.
3.
Cliquez sur le bouton Insérer un calque pour créer un calque.
4.
Cliquez sur le nouveau calque et choisissez Edition > 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 Edition > Scénario > Copier les images.
4.
Pour créer un nouveau dossier, choisissez Insertion > Scénario > Dossier
de calques.
5.
Cliquez sur le nouveau dossier et choisissez Edition > Scénario > Coller
les images.
Pour supprimer un calque ou dossier :
1.
84
Notions de base de Studio
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 :
■
Cliquez sur l’icône Supprimer le calque dans le scénario.
■
Faites glisser le calque ou dossier sur l’icône Supprimer le calque.
■
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.
R EM A R QU E
Lorsque vous supprimez un dossier de calques, tous les calques et leur
contenu sont également supprimés.
Organisation des calques et dossiers de calques
Vous pouvez réorganiser les différents calques et dossiers dans le scénario
pour mieux 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 contenir
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) apparaît à 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.
Notions de base de Flash
85
Pour développer 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 choisissez 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.
R E MA R QU E
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.
A 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ôlant les diverses fonctionnalités de
Flash. Ces menus sont : Fichier, Edition, Affichage, Insertion,
Modification, Texte, Commandes, Contrôle, Fenêtre et Aide.
86
Notions de base de Studio
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 modificateurs de couleur de trait et de
remplissage.
■
La zone d’options affiche des modificateurs pour l’outil sélectionné. Les
modificateurs affectent les opérations de peinture ou d’édition de
l’outil.
Grâce à la boîte de dialogue Personnaliser le panneau Outils, vous pouvez
indiquer quels outils afficher dans l’environnement auteur de Flash. Pour
plus d’informations, consultez la section Personnalisation du panneau
Outils, page 88.
Pour plus d’informations sur l’utilisation des outils de dessin et de peinture,
consultez « A 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.
Notions de base de Flash
87
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 plusieurs 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 alors 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, choisissez Edition > Personnaliser le panneau
Outils.
Sous Macintosh, choisissez Flash > Personnaliser 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 Outils.
88
Notions de base de Studio
R E MA R Q UE
Si plusieurs outils sont attribués à un même emplacement du panneau
Outils, une petite flèche apparaît 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.
2.
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 voulez attribuer un autre outil.
3.
Pour ajouter un outil à l’emplacement sélectionné, choisissez l’outil dans
la liste Outils disponibles et cliquez sur le bouton Ajouter. Vous pouvez
attribuer un outil à plusieurs emplacements.
4.
Pour supprimer un outil de l’emplacement sélectionné, choisissez l’outil
dans la liste déroulante Sélection actuelle, puis cliquez sur le bouton
Supprimer.
5.
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 Personnaliser 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.
R EMA R Q U E
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.
Notions de base de Flash
89
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 choisir 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 horizontaux ou verticaux 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 pouvez 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 sont
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.
90
Notions de base de Studio
Pour afficher ou masquer les guides de dessin :
■
Choisissez Affichage > Guides > Afficher les guides.
R EM A R QU E
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.
R EM A R QU E
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, cliquez à n’importe quel endroit sur la règle
et faites 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.
R E MA R QU E
Vous pouvez également 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.
Notions de base de Flash
91
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 :
■
■
■
■
■
■
■
■
2.
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équence
actuelle.
Cliquez sur Enreg. par défaut pour enregistrer les paramètres
courants comme paramètres par défaut.
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, seuls les guides utilisés dans les symboles sont supprimés.
Utilisation de la grille
Lorsque la grille est affichée dans un document, elle apparaît 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.
Pour afficher ou masquer la grille de dessin, effectuez l’une
des opérations suivantes :
92
Notions de base de Studio
■
Choisissez Affichage > Grille > Afficher la grille.
■
Appuyer 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 vous 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 jeux 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
travaillez, il vous permet d’accéder rapidement aux fonctions fréquemment
utilisées.
Notions de base de Flash
93
A propos de l’inspecteur des propriétés
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.
Pour afficher l’inspecteur des propriétés, effectuez l’une des
opérations suivantes :
94
Notions de base de Studio
■
Choisissez Fenêtre > Propriétés > Propriétés.
■
Appuyez sur Ctrl+F3 (Windows) ou sur Commande+F3 (Macintosh).
A propos du panneau Bibliothèque
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 vidéo. 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.
Pour afficher le panneau Bibliothèque, effectuez l’une des
opérations suivantes :
■
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.
Notions de base de Flash
95
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.
Pour afficher le panneau Actions, effectuez l’une des
opérations suivantes :
■
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.
96
Notions de base de Studio
La plupart des panneaux contient un menu déroulant comprenant 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.
Cliquez sur un élément du menu.
Cliquer 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).
Notions de base de Flash
97
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.
Cliquer 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 de plusieurs panneaux dans une seule fenêtre de
panneaux :
98
Notions de base de Studio
1.
Cliquez sur un 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 ajouté 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 jeux de panneaux
Vous pouvez créer des regroupements de panneaux personnalisés et les
enregistrer sous forme de jeux 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.
Notions de base de Flash
99
Pour sélectionner une disposition de panneaux :
1.
Sélectionnez Fenêtre > Disposition de l’epace 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
personnalisée précédemment enregistrée.
Pour supprimer les dispositions personnalisées :
100 Notions de base de Studio
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, choisissez l’un des onglets suivants :
■
Général
■
ActionScript
■
Format automatique
■
Presse-papiers
■
Dessin
■
Texte
■
Avertissements
Notions de base de Flash
101
3.
Sélectionnez l’une des options suivantes comme décrit dans les
procédures qui suivent. 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 :
102 Notions de base de Studio
■
Pour les options Au démarrage, choisissez une option spécifiant 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 derniè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), choisissez
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, choisissez 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 cliquer-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 scénario, choisissez Sélection basée sur plages pour
utiliser la sélection basée sur plages dans le scénario, plutôt que la
sélection basée sur images par défaut. Pour plus d’informations sur la
sélection basée sur plages et basée sur images, consultez Utilisation
d’images dans le scénario, page 76.
Activez l’option Ancre nommée sur Séquence pour que Flash
transforme la première image de chaque séquence d’un document en
ancre nommée. Les ancres nommées vous permettent d’utiliser les
boutons Suivant et Précédent des navigateurs pour passer d’une
séquence à l’autre dans une application Flash. Pour plus
d’informations, consultez la section Utilisation du scénario, page 71.
■
Pour la Couleur de surbrillance, choisissez 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, choisissez 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.
Notions de base de Flash 103
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 :
104 Notions de base de Studio
■
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
Limite 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), choisissez une option de
manière à spécifier la qualité des remplissages dégradés placés dans le
métafichier Windows. Le choix d’une qualité plus élevée augmente le
temps nécessaire à la copie d’une illustration. Utilisez ce paramètre
pour spécifier la qualité des dégradés lorsque des éléments sont collés à
l’extérieur de Flash. Lorsque vous collez des éléments dans Flash, la
qualité des dégradés des données copié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, choisissez une option de manière à spécifier
la qualité des dégradés dans le fichier PICT. Le choix d’une qualité plus
élevée augmente le temps nécessaire à la copie d’une illustration.
Utilisez ce paramètre pour spécifier la qualité des dégradés lorsque des
éléments sont collés à l’extérieur de Flash. Lorsque vous collez des
éléments dans Flash, la qualité des dégradés des données copié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.
■
Activez l’option Indiquer l’absence de polices pour que Flash vous
avertisse lorsque vous ouvrez un document utilisant des polices n’ayant
pas été installées sur votre ordinateur. Cette option est activée par
défaut.
Notions de base de Flash 105
106 Notions de base de Studio
■
Choisissez Avertir lors des changements d’URL au démarrage 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 scénario 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.
■
Sélectionnez Avertir lors de la conversion automatique d’un objet de
dessin en groupe pour que Flash vous prévienne 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 prises en charge par la version de Flash Player visée
par le fichier FLA ouvert dans ses Paramè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 jeux de raccourcis personnalisés.
Pour afficher ou imprimer le jeu de raccourcis clavier
actuellement utilisé :
1.
Choisissez Edition > 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.
4.
Dans la boîte de dialogue Enregistrer sous qui s’affiche, choisissez 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é.
5.
Cliquez sur Enregistrer.
Notions de base de Flash 107
6.
Recherchez le fichier exporté dans le dossier que vous avez sélectionné et
ouvrez-le dans un navigateur Web.
7.
Pour imprimer le fichier, utilisez la commande Imprimer du navigateur.
Pour sélectionner un jeu de raccourcis clavier :
1.
Choisissez Edition > Raccourcis clavier (Windows) ou Flash >
Raccourcis claviers (Macintosh).
2.
Dans la boîte de dialogue Raccourcis clavier, choisissez 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 décrit 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 personnalisé :
1.
Dans la boîte de dialogue Raccourcis clavier, choisissez 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 voulez
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 apparaît dans la zone
Description de cette boîte de dialogue.
108 Notions de base de Studio
4.
Effectuez l’une des opérations suivantes :
■
■
5.
Pour ajouter un raccourci, cliquez sur le bouton Ajouter (+).
Pour supprimer un raccourci, cliquez sur le bouton Supprimer (-) et
passez à l’étape 6.
Si vous ajoutez un raccourci, entrez la combinaison de touches du
nouveau raccourci sous Appuyer sur la touche.
R EM A R QU E
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.
6.
Cliquez sur Remplacer.
7.
Répétez cette procédure pour ajouter ou supprimer des raccourcis
supplémentaires.
8.
Cliquez sur OK.
Pour supprimer un jeu de raccourcis clavier :
1.
Choisissez Edition > 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.
R E MA R Q UE
Vous ne pouvez pas supprimer les jeux 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 de nombreux
emplacements, tels que la scène, le scénario, le panneau Bibliothèque ou le
panneau Actions.
Notions de base de Flash 109
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.
R E MA R Q UE
Certains raccourcis clavier ne sont disponibles que sous Windows. Pour
plus d’informations, consultez A propos de l’accessibilité Flash sous Mac,
page 110.
Vous pouvez personnaliser 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 Personnalisation 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 :
A propos de l’accessibilité Flash sous Mac
Les limites d’accessibilité de l’environnement auteur Flash sous Mac sont
les suivantes :
110
Notions de base de Studio
■
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 scénario 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 Echap, ou déplacez,
ancrez ou désancrez le panneau.
Notions de base de Flash
111
■
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ôles 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 :
112
Notions de base de Studio
■
Le panneau comportant 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 aucun effet.
■
Lorsque le panneau comportant le focus actuel est développé, appuyez
une première fois sur la touche Tab pour déplacer le focus vers le menu
contextuel du panneau.
■
Utilisez la flèche vers la droite et la flèche vers la gauche pour déplacer
le focus entre le menu contextuel et la barre de titre du panneau.
■
Si le focus est sur le menu contextuel, 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
contextuel 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 de 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’élément du menu contextuel sélectionné.
Notions de base de Flash
113
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 boîte 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.
Pour parcourir les contrôles d’une boîte de dialogue à l’aide
des raccourcis clavier, effectuez les opérations suivantes :
114
Notions de base de Studio
■
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 Echap 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.
R EM A R QU E
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.
Notions de base de Flash
115
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 parcourir les contrôles d’arborescence à l’aide de
raccourcis clavier, effectuez les opérations suivantes :
■
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 enfant 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ôles 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 :
116
Notions de base de Studio
■
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
choisir 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 importants et les plus couramment
utilisés.
R EM A R QU E
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
Notions de base de Fireworks
117
A propos des fichiers Fireworks
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 :
(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.
PNG
(Graphics Interchange Format) est un format graphique Web très
utilisé pour les dessins animés, les logos, les graphiques comportant
des zones transparentes et les animations. Il contient un maximum de
256 couleurs.
GIF
a été développé par le Joint Photographic Experts Group pour les
besoins spécifiques des images photographiques ou comportant un nombre
très élevé de couleurs. Le format JPEG est idéal pour des photographies
numériques ou numérisées, des images comportant des textures ou des
dégradés, ou toute autre image nécessitant plus de 256 couleurs.
JPEG
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.
118
Notions de base de Studio
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.
Notions de base de Fireworks
119
Utilisation du panneau Outils
Le panneau Outils se divise en six catégories : Sélection, Bitmap, Vecteur,
Web, Couleurs et Affichage.
A propos des graphiques vectoriels et bitmap
Les ordinateurs affichent des graphiques au format vectoriel ou bitmap.
Comprendre la différence entre les deux formats vous aidera à comprendre
Fireworks, qui contient des outils vectoriels et bitmap et qui est capable
d’ouvrir ou d’importer les deux formats.
120 Notions de base de Studio
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écrivant
l’image sont conditionnées par une grille de taille spécifique.
L’agrandissement d’un graphique bitmap modifie la distribution des pixels
dans la grille 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
modifiez les propriétés des lignes et des courbes qui en décrivent la forme.
Les graphiques vectoriels ne dépendent pas de la résolution, ce qui signifie
que vous pouvez déplacer, redimensionner, reformer ou changer la couleur
d’un 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 présentent les différents outils dans Utilisation de Fireworks.
Notions de base de Fireworks
121
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.
2.
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.
122 Notions de base de Studio
La fenêtre de l’Inspecteur des propriétés peut s’afficher à mi-hauteur,
pré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.
R E MA R Q UE
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.
R EM A R QU E
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.
Notions de base de Fireworks 123
■
Dans le menu Options de l’Inspecteur des propriétés, cliquez sur
Demi-hauteur.
R EM A R QU E
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 ancré, 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 comporte des options de création, de suppression et de manipulation des
calques.
Le panneau Images
124 Notions de base de Studio
inclut des options de création d’animations.
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 Historique
Le panneau Formes contient les formes automatiques qui ne s’affichent
pas dans le panneau Outils.
vous permet de stocker et de réutiliser des
combinaisons de caractéristiques d’objets ou de sélectionner un
style stocké.
Le panneau Styles
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 Bibliothèque
Le panneau URL vous permet de créer des bibliothèques contenant des
URL fréquemment 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.
(Fenêtre > Comportements) gère les
comportements qui déterminent ce qui se produit lorsque des références ou
des découpes réagissent aux déplacements de la souris.
Le panneau Comportements
Le panneau Rechercher (Fenêtre > Rechercher) 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.
(Fenêtre > Aligner) contient les commandes
d’alignement et de distribution des objets dans le document.
Le panneau Aligner
Notions de base de Fireworks 125
(Fenêtre > Propriétés de
forme automatique) vous permet de définir les propriétés de formes
automatiques.
Le panneau Propriétés de forme automatique
(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 Modification d’image
(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.
Le panneau Caractères spéciaux
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é :
■
CON S E I L
Une coche à côté du
nom d’un panneau
dans le menu
Fenêtre indique que
le panneau est
ouvert.
Dans le menu Fenêtre, cliquez sur le nom du panneau.
Pour fermer un panneau, exécutez l’une des actions
suivantes :
■
Dans le menu Fenêtre, cliquez sur le nom de 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 :
■
126 Notions de base de Studio
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.
Pour réduire ou développer un groupe de panneaux ou un
panneau, exécutez l’une des actions suivantes :
■
Cliquez sur le titre du groupe de panneaux ou du panneau.
R EM A R QU E
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.
Notions de base de Fireworks 127
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.
R EM A R QU E
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.
128 Notions de base de Studio
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 Contribute
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.
Notions de base de Contribute 129
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.
Barre
d’outils
Page de
démarrage
dans le
navigateur/
éditeur
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 être 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).
130 Notions de base de Studio
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 favoris des pages que vous consultez fréquemment.
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.
Boutons d’action
Insérer du contenu
Ajouter une ligne/colonne
Propriétés de la page
Notions de base de Contribute
131
Les boutons de la barre d’outils de mise en forme de texte permettent de
mettre le texte en forme.
Aligner à gauche
Centrer
Menu Style
Menu Police
Couleur du texte
Aligner à droite
Menu Taille de
police
Couleur de surbrillance
Justifier
Retrait
Italique
Retrait négatif
Gras
Liste à puces
Liste numérotée
R EM A R QU E
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.
Aligner à gauche
Centrer
Aligner à droite
Redimensionner
Redimensionner
Luminosité/Contraste
Accentuer
Recadrer
Pivoter
132 Notions de base de Studio
Justifier
Propriétés de
l’image
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.
R EMA R Q U E
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.
Notions de base de Contribute 133
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.
R E MA R Q UE
Pour plus d’informations sur l’utilisation des ressources de Contribute et
obtenir de l’aide, voir la section Ressources de Contribute, page 12.
Panneau
Pages
Panneau
Comment...
Barre de séparation
Vous pouvez agrandir, réduire ou redimensionner les différentes parties du
panneau de navigation.
Pour agrandir ou réduire le panneau de navigation, procédez
de l’une des manières suivantes :
134 Notions de base de Studio
■
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. A 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).
Pour passer du mode navigation au mode modification,
procédez de l’une des manières suivantes :
■
Cliquez sur le bouton Modifier la page de la barre d’outils.
R EM A R QU E
Ce bouton n’est activé que sur les pages des sites Web auxquels vous
êtes connecté et que vous êtes autorisé à modifier.
Notions de base de Contribute 135
■
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 :
■
A propos des fichiers FlashPaper, page 136
■
Familiarisation avec l’espace de travail FlashPaper, page 137
A propos des fichiers FlashPaper
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.
R E MA R Q U E
136 Notions de base de Studio
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 prenant 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.
R EM A R QU E
Le menu Fichier et le menu Aide ne sont visibles que dans
l’environnement applicatif.
Panorama
Sélectionner
Zoom
Navigation
de page
Rechercher
Ouvrir dans un
nouveau navigateur
Imprimer
Ajuster la largeur
Barre de défilement
Ajuster dans la visionneuse
Pour imprimer un document :
■
Cliquez sur l’icône Imprimante.
Notions de base de FlashPaper 137
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 voulez 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 recherche l’occurrence suivante de termes correspondants, cliquez
de nouveau sur le bouton Rechercher.
R EMA R Q U E
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.
138 Notions de base de Studio
■
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.
Pour naviguer ou faire défiler les pages dans le document,
effectuez l’une des opérations suivantes :
■
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.
R EM A R QU E
Le bouton Ouvrir dans un nouveau navigateur n’apparaît que dans
l’environnement d’affichage FlashPaper (fichiers SWF enregistrés).
Notions de base de FlashPaper 139
140 Notions de base de Studio
CHAPITRE 3
Processus de
développement Web
3
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 :
A propos du 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
A propos du processus de
développement Web
Un processus de développement Web standard présente les étapes
suivantes :
■
Planification de 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
141
■
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 concevoir, de développer et de gé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.
R EM A R QU E
Pour plus d’informations sur le processus de développement Web de
pages dynamiques, voir Déroulement 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 énormément de temps par la suite.
142 Processus de développement Web
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 à distinguer 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’avère 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 votre site, il est essentiel
de déterminer le public ciblé lors de la phase initiale de la planification.
Le plan de navigation du site
est une comparable à 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 présenter l’avant-projet à votre client ou aux membres de votre
groupe.
Conception du plan de navigation du site
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.
A la base, votre environnement de développement consiste en un serveur
Web et un site Dreamweaver, voire d’un serveur d’application.
Définition de l’environnement de développement 143
Choix d’un serveur Web et installation sur votre ordinateur local ou sur
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.
un ordinateur en réseau
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 devez 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.
R E MA R Q UE
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.
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 appartenant à un site Web. Vous devez
définir un tel emplacement avant de créer votre site.
Définir votre site dans Dreamweaver
144 Processus de développement Web
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 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 travaillez en équipe, envisagez
d’utilisez 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 voulez 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
apparence 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.
Planification de la conception et de la mise en forme de la page 145
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 :
146 Processus de développement Web
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. Votre 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
Création 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.
Planification de la conception et de la mise en forme de la page 147
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 tableau
peut ressembler à ceci :
Pour mettre 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.
148 Processus de développement Web
Travail sur des graphiques et des photos
Vous pouvez utiliser Fireworks pour créer des graphiques et traiter 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ère également 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 lots 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, Didacticiel : Traitement des photographies, page 211
■
Chapitre 8, Didacticiel : Création d’une bannière de page, page 223
Création d’actifs de contenu 149
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 personnalisé comportant 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.
150 Processus de développement Web
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 vidéo
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, test et déploiement
151
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écoupes 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.
152 Processus de développement Web
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 vous 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 :
■
Affichez vos pages dans le plus grand nombre de navigateurs et sur le
plus grand nombre de plates-formes possible.
■
Assurez-vous que les pages fonctionnent comme prévu dans les
navigateurs ciblés. Vérifiez également qu’elles fonctionnent ou qu’elles
échouent élégamment 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.
Assemblage, test et déploiement 153
■
Contrôlez la taille de vos pages et leur durée de téléchargement. Pour
les pages qui contiennent un tableau de grande taille, n’oubliez pas que
les visiteurs ne voient rien tant que le tableau n’est pas entièrement
téléchargé. Envisagez de fragmenter les grands tableaux ; si c’est
impossible, envisagez de placer quelques données, par exemple un
message de bienvenue ou une bannière publicitaire, en dehors du
tableau, en haut de la page, de manière à ce que les utilisateurs puissent
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 Dreamweaver.
■
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 comporte 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 travaillez 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.
154 Processus de développement Web
Didacticiel associé
■
Chapitre 13, Didacticiel : Publication de votre site, page 359
Gestion et mise à jour de votre
site
Une fois la majeure 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é à Dreamweaver de
façon à prévenir les risque de conflits lors du processus d’archivage/
extraction des fichiers. Vous pouvez également lancer et gérer Contribute à
partir de Dreamweaver.
Didacticiel associé
■
Chapitre 14, Didacticiel : Paramétrage de votre site Web pour les
utilisateurs de Contribute, page 367
Gestion et mise à jour de votre site 155
156 Processus de développement Web
2
PARTIE 2
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 votre
projet. Puis, vous utiliserez 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
157
CHAPITRE 4
Didacticiel : Configuration de
votre site et des fichiers de projet
4
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échargent 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
159
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 appartenant à 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.
R EM A R QU E
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épertoire 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épertoire 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.
160 Didacticiel : Configuration de votre site et des fichiers de projet
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.
Configurez vos fichiers de projet
161
1.
Créez un nouveau dossier nommé local_sites sur votre disque dur.
Par exemple, créez un dossier nommé local_sites à l’un des deux
endroits suivants :
■
■
Sous Windows :
C:\Documents and Settings\votre_nom_d’utilisateur\Mes documen
ts\local_sites.
Sur Macintosh : DD Macintosh/Users/votre_nom_d’utilisateur/
Documents/local_sites.
R EM A R QU E
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.
2.
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.
3.
Copiez le dossier cafe_townsend dans le dossier local_sites.
Il s’agit du dossier que vous allez utiliser comme dossier racine
(principal) de votre site Dreamweaver.
A S A VOI R . . .
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 monsiteweb 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/monsiteweb ».
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épertoire 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.
162 Didacticiel : Configuration de votre site et des fichiers de projet
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 local_sites.
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 local_sites 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 entrer son chemin d’accès dans la zone de texte
Dossier racine local.
Définissez un dossier local 163
6.
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 :
7.
Cliquez sur OK.
La boîte de dialogue Gérer les sites s’affiche et présente votre nouveau
site.
8.
Cliquez sur Terminé 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.
164 Didacticiel : Configuration de votre site et des fichiers de projet
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 choisir 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.
Définissez un dossier local 165
166 Didacticiel : Configuration de votre site et des fichiers de projet
CHAPITRE 5
Didacticiel : Création de
maquettes de page
5
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).
167
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 :
168 Didacticiel : Création de maquettes de page
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 :
Création et sauvegarde d’un nouveau document 169
4.
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.
5.
Cliquez sur Fichier > Enregistrer, puis accédez au dossier suivant de
votre disque dur :
local_sites/cafe_townsend/fireworks_assets/
6.
Nommez le fichier homepage-mockup.
R E MA R Q UE
Sur Macintosh, sélectionnez l’option Ajouter l’extension du nom de fichier,
si ce n’est pas déjà fait.
7.
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. A 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.
170 Didacticiel : Création de maquettes de page
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éelle. 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 :
local_sites/cafe_townsend/fireworks_assets/
2.
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.
3.
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é.
4.
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.
5.
Cliquez n’importe où en dehors du graphique de bannière sélectionné
pour le désélectionner.
6.
Enregistrez votre travail.
Importation et placement d’images
171
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 :
local_sites/cafe_townsend/fireworks_assets/
2.
Double-cliquez sur slideshow-placeholder.jpg.
3.
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.
4.
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.
5.
Cliquez n’importe où en dehors de l’image sélectionnée pour la
désélectionner.
6.
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.
172 Didacticiel : Création de maquettes de page
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.
Création d’une image composite de la zone de contenu 173
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.
2.
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.
A 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.
174 Didacticiel : Création de maquettes de page
3.
Lorsque vous relâchez le bouton de la souris, un rectangle arrondi
s’affiche, sélectionné, dans la zone que vous avez définie.
Vous pouvez voir qu’un objet est sélectionné grâce à des 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.
4.
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’icône du pot
de peinture.
La fenêtre contextuelle Couleur de remplissage s’affiche.
5.
Entrez 6B1101 dans la zone de texte située dans le haut de la fenêtre,
puis appuyez sur Entrée.
6.
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 (il n’est pas sélectionné par défaut).
Désormais, le rectangle arrondi présente un remplissage rouge foncé et
aucun trait.
Vous devez 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.
Création d’une image composite de la zone de contenu 175
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.
R E MA R Q UE
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.
176 Didacticiel : Création de maquettes de page
En même temps, Fireworks ajuste les angles de la forme sur le
document.
3.
Fermez le panneau Propriétés de forme automatique, puis cliquez en
dehors du document pour désélectionner le rectangle arrondi.
4.
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.
Vous devez 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.
Création d’une image composite de la zone de contenu 177
Vous devez ensuite 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.
R EM A R QU E
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é.
2.
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.
2.
Entrez F7EEDF dans la zone de texte située dans le haut de la fenêtre,
puis appuyez sur Entrée.
178 Didacticiel : Création de maquettes de page
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 blanc cassé et aucun trait.
Vous devez 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.
R EMA R Q U E
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.
Placement de texte et d’images 179
Le pointeur prend l’aspect d’un rayon laser et l’Inspecteur des
propriétés affiche les propriétés du texte.
Police
Taille
Echelle
horizontale
2.
Interlignage
Couleur de
remplissage
Boutons de style
Boutons d’alignement
Dans l’Inspecteur des propriétés, définissez les propriétés d’outil
suivantes :
■
Dans le menu contextuel Police, cliquez sur TrebuchetMS.
R E MA R Q UE
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.
■
■
■
3.
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.
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.
4.
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.
180 Didacticiel : Création de maquettes de page
5.
Entrez les éléments suivants, en appuyant chaque fois sur Entrée pour
entamer une nouvelle ligne :
■
Chef Ipsum
■
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.
6.
Dans le panneau Outils, cliquez sur l’outil Pointeur afin de
désélectionner la zone de texte.
7.
Enregistrez votre travail.
Placement d’une image d’espace réservé
pour la vidéo
Ensuite, vous ajoutez une image d’espace réservé dans la zone de contenu
principale afin de représenter une vidéo 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 :
local_sites/cafe_townsend/fireworks_assets/
2.
Sélectionnez video-placeholder.jpg, puis cliquez sur Ouvrir.
Placement de texte et d’images
181
3.
Positionnez 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.
4.
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.
5.
Cliquez n’importe où en dehors de l’image sélectionnée pour la
désélectionner.
6.
Enregistrez votre travail.
Placement d’une image d’espace réservé
pour l’élément 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 présenté à 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 :
local_sites/cafe_townsend/fireworks_assets/
2.
Sélectionnez feature-placeholder.jpg, puis cliquez sur Ouvrir.
3.
Positionnez le pointeur d’insertion environ 6 pixels sous l’image
d’espace réservé de la vidéo, puis cliquez pour insérer l’image.
182 Didacticiel : Création de maquettes de page
4.
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.
5.
Cliquez n’importe où en dehors de l’image sélectionnée pour la
désélectionner.
6.
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.
Placement de texte et d’images 183
■
3.
Entrez 200 comme pourcentage d’interlignage à côté de l’icône de
flèche verticale à deux pointes.
Positionnez le pointeur en forme de rayon laser environ à 6 pixels du
coin supérieur droit de l’image d’espace réservé de la vidéo, puis faitesle 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.
4.
Entrez ou collez environ deux paragraphes de texte d’espace réservé dans
la zone de texte.
Comme le texte représente 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 :
local_sites/cafe_townsend/fireworks_assets/
A présent que vous avez créé les blocs de texte de base, vous décidez de
modifier une partie du texte de façon à ce que les paragraphes commencent
par du texte en surbrillance et qu’il y ait du texte simulant des liens à la fin
de chacun d’eux.
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.
184 Didacticiel : Création de maquettes de page
■
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.
Répétez cette procédure pour les trois premiers mots du second
paragraphe.
Vous ajoutez à présent 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.
4.
Cliquez sur le pointeur en forme de rayon laser à la fin du second
paragraphe, puis appuyez sur la barre d’espace du clavier.
5.
Entrez Faire une réservation, puis sélectionnez le texte que vous venez
d’entrer.
6.
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.
7.
Dans le panneau Outils, cliquez sur l’outil Pointeur afin de
désélectionner le texte.
8.
Enregistrez votre travail.
Placement de texte et d’images 185
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.
186 Didacticiel : Création de maquettes de page
1.
Cliquez sur Fichier > Aperçu de l’image.
2.
Dans le menu contextuel Format, cliquez sur JPEG.
3.
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.
4.
Cliquez sur Exporter.
La boîte de dialogue Exporter s’affiche.
5.
Ouvrez le dossier suivant :
local_sites/cafe_townsend/fireworks_assets/
6.
Cliquez sur Exporter.
Fireworks crée une version JPEG de votre maquette de page dans le
dossier fireworks_assets. Votre 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.
Exportation de l’image pour le Web 187
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.
188 Didacticiel : Création de maquettes de page
CHAPITRE 6
Didacticiel : Création d’une mise en
forme de page basée sur un tableau
6
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é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 de
Macromedia Flash.
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 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
189
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
desiderata, 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.
190 Didacticiel : Création d’une mise en forme de page basée sur un tableau
Dans ce didacticiel, vous disposerez de la maquette détaillée complète et
approuvée de Cafe 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).
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 Dreamweaver pour mettre ce concept en
forme.
Examinez la maquette détaillée de conception
191
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 arrière et terminer le
didacticiel, soit visualiser une version terminée du didacticiel 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é local_sites.
5.
Tapez index.html dans la zone de texte Nom de fichier puis cliquez sur
Enregistrer.
Le nom du fichier paraît maintenant dans la barre de titre dans la partie
supérieure de la fenêtre de l’application.
192 Didacticiel : Création d’une mise en forme de page basée sur un tableau
6.
Dans la zone texte Titre du document, dans le haut de votre nouveau
document, entrez Cafe Townsend.
Il s’agit du titre de votre page (qui est différent du nom de fichier). Les
visiteurs de votre site verront ce titre dans la barre de titre de la fenêtre
du navigateur lorsqu’ils afficheront la page dans un navigateur Web.
7.
Choisissez Fichier > Enregistrer pour enregistrer votre page.
Insérez des tableaux
Vous allez 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.
2.
Choisissez Insertion > Tableau.
3.
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.
Insérez des tableaux 193
4.
Cliquez sur OK.
Un tableau comportant 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.
194 Didacticiel : Création d’une mise en forme de page basée sur un tableau
A S A VOI R . . .
Compléments sur les tableaux 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 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 comporter une marge intérieure, un
espacement ou les deux à la fois. La marge intérieure représente le nombre de pixels entre le contenu de
la cellule et les limites de celle-ci. L’espacement entre les cellules représente 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.
5.
Cliquez à droite du tableau pour le désélectionner.
6.
Sélectionnez Insérer > tableau pour insérer un autre tableau.
7.
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.
Insérez des tableaux 195
8.
Cliquez sur OK.
Un deuxième tableau comportant une ligne et trois colonnes s’affiche
sous le premier tableau.
9.
Cliquez à droite du tableau pour le désélectionner.
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 :
11.
■
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.
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. Votre page doit
maintenant ressembler à la page suivante :
R EM A R QU E
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 choisissant Affichage > Assistances visuelles >
Largeurs des tableaux.
196 Didacticiel : Création d’une mise en forme de page basée sur un tableau
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 bordures 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.
R EMA R Q U E
Lorsque vous avez terminé de définir les propriétés des tableaux en mode
Tableaux développés, vous devez toujours revenir au mode Standard. Le
mode Tableaux développé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éveloppés.
R EM A R QU E
Si vous consultez le guide de démarrage avec la boîte de dialogue Mode
Tableaux développés, cliquez sur OK.
Définissez les propriétés des tableaux 197
2.
Cliquez à l’intérieur de la première ligne du premier tableau.
3.
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).
R E MA R Q UE
Si vous ne voyez 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.
4.
Cliquez à l’intérieur de la deuxième ligne du premier tableau.
198 Didacticiel : Création d’une mise en forme de page basée sur un tableau
5.
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).
6.
Cliquez à l’intérieur de la troisième ligne du premier tableau.
7.
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 comporter 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).
Définissez les propriétés des tableaux 199
8.
Cliquez à l’intérieur de la première colonne du deuxième tableau.
9.
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).
10. Cliquez
à l’intérieur de la deuxième colonne du deuxième tableau.
200 Didacticiel : Création d’une mise en forme de page basée sur un tableau
11.
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).
12. 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.
13.
Enfin, cliquez dans le dernier tableau (celui qui contient une ligne et une
colonne).
Définissez les propriétés des tableaux 201
14. 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).
Votre mise en forme doit maintenant ressembler à la suivante :
15. 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
16.
Enregistrez votre page.
202 Didacticiel : Création d’une mise en forme de page basée sur un tableau
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 de document, cliquez à l’intérieur de la première ligne
du premier tableau.
2.
Sélectionnez Insérer > Objets 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 choisir un brun rougeâtre
(#993300).
Laissez vide la zone de texte Autre texte.
A S A VOI R . . .
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
voulez 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.
Insérez un espace réservé pour l’image 203
A S A VOI R . . .
Présentation des espaces réservés pour l’image Un espace réservé pour l’image est un graphisme
que vous emploierez 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 remplacer 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 apparaît à l’intérieur du premier tableau.
Il affiche une étiquette et les attributs de taille de l’image que vous
placerez à cet endroit.
R E MA R Q U E
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.
5.
Enregistrez votre page.
204 Didacticiel : Création d’une mise en forme de page basée sur un tableau
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.
3.
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’ar-pl.
R EM A R QU E
Si vous ne voyez 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.
Ajoutez des couleurs à la page 205
4.
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.
5.
Cliquez à l’intérieur de la deuxième cellule du tableau à trois colonnes.
6.
Cliquez sur la balise <td> (balise de cellule) dans le sélecteur de balises
afin de sélectionner la cellule.
7.
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.
8.
Répétez les étapes 5 à 7 pour appliquer également la couleur brun clair
à la troisième cellule du tableau.
9.
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.
206 Didacticiel : Création d’une mise en forme de page basée sur un tableau
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 choisissez
le noir (#000000) dans le sélecteur de couleur.
A S A VOI R . . .
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 couleur au moyen du sélecteur. Le sélecteur de
couleur emploie la palette sécurisée de 216 couleurs ; la sélection d’une couleur 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 pouvez également utiliser le sélecteur de couleur pour faire correspondre des couleurs. Par
exemple, si une image de votre page contient une nuance de bleu précise que vous voulez également
appliquer à l’arrière-plan d’une cellule de tableau, vous pouvez sélectionner cette cellule, cliquer sur la
zone de couleur pour ouvrir le sélecteur de couleur, amener la pipette au-dessus de la couleur bleue de
l’image puis cliquer. Le sélecteur 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électeur de couleur ne choisisse pas une couleur
sécurisée pour le Web.
Ajoutez des couleurs à la page 207
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).
208 Didacticiel : Création d’une mise en forme de page basée sur un tableau
3
PARTIE 3
Création d’actifs de contenu
Dans cette partie, vous construirez des actifs pour l’exemple de site Internet
du Cafe Townsend.
Vous utiliserez Macromedia Fireworks 8 pour traiter des images et pour
concevoir une bannière pour le site Internet du Cafe Townsend. Vous
utiliserez 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
209
CHAPITRE 7
Didacticiel : Traitement
des photographies
7
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 exportation et exportation des images. . . . . . . . . . 219
Affichage des images optimisées finales . . . . . . . . . . . . . . . . . . . . 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.
211
Vous recevez six photographies numériques de plats figurant au menu du
restaurant. Votre 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.
R E MA R Q UE
Pour accéder à un didacticiel sur la création du diaporama dans Flash, voir
les didacticiels de Macromedia Flash 8.
Traitement par lots de fichiers
d’image 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.
212 Didacticiel : Traitement des photographies
1.
Dans Fireworks, cliquez sur Fichier > Traitement par lots.
La boîte de dialogue Lots s’affiche.
2.
Ouvrez le dossier suivant de votre disque dur :
local_sites/cafe_townsend/fireworks_assets/camera_files
Le dossier contient six images JPEG téléchargées à partir d’un appareil
photo numérique.
3.
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 spécifier les actions que vous souhaitez
effectuer sur un lot de fichiers. Dans ce cas, vous devez mettre à
l’échelle et renommer vos fichiers.
4.
Sous Options de traitement par lots, sélectionnez Mise à l’échelle, puis
cliquez sur Ajouter pour inclure l’action dans le traitement par lots.
5.
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.
6.
Sous Options de traitement par lots, sélectionnez Renommer, puis
cliquez sur Ajouter pour inclure l’action dans le traitement par lots.
7.
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.
8.
Cliquez sur Suivant pour passer à l’écran suivant.
Traitement par lots de fichiers d’image de grande taille 213
9.
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 lots.
Fireworks met à l’échelle toutes les images et ajoute le préfixe plat_ à
chaque nom de fichier. Lorsque vous y ê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 par lots sont d’une taille supérieure aux
dimensions du diaporama, vous devez 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.
214 Didacticiel : Traitement des photographies
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.
3.
Définissez la couleur du document sur Blanc, puis cliquez sur OK pour
créer le fichier source de l’image.
4.
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.
5.
Cliquez sur Fichier > Enregistrer.
6.
Ouvrez le dossier suivant de votre disque dur :
local_sites/cafe_townsend/fireworks_assets/
7.
Nommez le fichier ImageSource.png, puis cliquez sur 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.
CO NS E I L
Pendant l’exécution du didacticiel, pensez à enregistrer fréquemment votre
travail en cliquant sur Fichier > Enregistrer.
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éfini
dans la boîte de
dialogue
Préférences. Pour
annuler la
modification la plus
récente, cliquez sur
Edition > Annuler.
Composition des images 215
3.
Cliquez sur le menu contextuel dans le coin supérieur droit du panneau,
puis sélectionnez Ajouter des images.
4.
Dans la boîte de dialogue Ajouter des images, entrez le chiffre 5, assurezvous que l’option Après l’image courante est sélectionnée, puis cliquez
sur OK.
216 Didacticiel : Traitement des photographies
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 renommer les cadres afin que leurs noms
correspondent aux noms de fichiers des images que vous exporterez
ultérieurement dans le cadre de ce didacticiel.
5.
Dans le panneau Cadres, double-cliquez sur Frame 1.
6.
Entrez Image0 dans la zone de texte qui s’affiche, puis appuyez sur
Entrée pour valider le nouveau nom.
R EM A R QU E
Le développeur Flash chargé de créer le diaporama vous a demandé de
commencer la numérotation à 0 pour des raisons d’encodage.
7.
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.
8.
Enregistrez votre travail.
Composition des images 217
Placement et composition d’une image
dans chaque cadre
A présent que vous avez créé six cadres, vous souhaitez importer les fichiers
que vous avez créés précédemment dans chaque cadre. Une fois les images
importées, vous pouvez aisément les composer en les faisant glisser sur le
document. L’utilisation de cadres pour stocker et manipuler les images vous
permet également d’exporter toutes celles-ci simultanément à l’aide des
paramètres de fichier de votre choix.
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 :
local_sites/cafe_townsend/fireworks_assets/camera_files
3.
Sélectionnez plat_1013.jpg, puis cliquez sur Ouvrir.
4.
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).
218 Didacticiel : Traitement des photographies
5.
Pour composer l’image, faites-la glisser jusqu’à afficher la portion
souhaitée dans la fenêtre créée par le document.
6.
Cliquez n’importe où en dehors de l’image sélectionnée pour la
désélectionner.
7.
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.
8.
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.
Aperçu avant exportation et exportation des images 219
1.
Cliquez sur Fichier > Aperçu de l’image.
2.
Dans la boîte de dialogue Aperçu de l’image, exécutez les actions
suivantes :
■
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 comportant 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é.
■
Sélectionnez l’option Bords couleur plus nets.
■
Cliquez sur Exporter.
Dans la boîte de dialogue Exporter qui s’affiche, ouvrez le dossier
suivant de votre disque dur :
local_sites/cafe_townsend/images/
4.
Dans le menu contextuel Exporter, cliquez sur Images vers fichiers.
5.
Assurez-vous que l’option Rogner les images n’est pas sélectionnée.
6.
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.
220 Didacticiel : Traitement des photographies
Affichage des images optimisées
finales
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
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
Images finales
Affichage des images optimisées finales 221
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.
222 Didacticiel : Traitement des photographies
CHAPITRE 8
Didacticiel : Création
d’une bannière de page
8
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 arrière-plan et placement du logo . . . . . . . . . . . . . . . . 224
Organisation de vos objets à l’aide de calques . . . . . . . . . . . . . . 228
Création d’un arrière-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. Votre tâche consiste à créer la bannière
finale pour le site Web en vous basant sur l’esquisse du projet.
223
Ajout d’un arrière-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 Personnalisée, puis
sélectionnez la couleur noire dans le menu des couleurs
personnalisées.
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.
4.
Cliquez sur Fichier > Enregistrer, puis ouvrez le dossier suivant de votre
disque dur :
local_sites/cafe_townsend/images/
5.
Nommez le fichier banner_graphic.png.
R E MA R Q UE
Sur Macintosh, sélectionnez l’option Ajouter l’extension du nom de fichier,
si ce n’est pas déjà fait.
6.
Cliquez sur Enregistrer.
224 Didacticiel : Création d’une bannière de page
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 banner_graphic.png est ouvert dans Fireworks,
cliquez sur Fichier > Importer, puis ouvrez le dossier suivant de votre
disque dur :
local_sites/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.
4.
Tandis que l’image est sélectionnée, cliquez sur l’outil Mise à l’échelle
dans le panneau Outils (ou appuyez sur Q).
Ajout d’un arrière-plan et placement du logo 225
5.
Effectuez un zoom arrière 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.
6.
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 préservant ses
proportions.
.
226 Didacticiel : Création d’une bannière de page
7.
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.
8.
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 :
local_sites/cafe_townsend/fireworks_assets/
Ajout d’un arrière-plan et placement du logo 227
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.
4.
Cliquez sur OK pour accepter les options par défaut.
5.
Positionnez le pointeur d’insertion à l’intérieur du coin supérieur
gauche de la bannière, puis cliquez pour insérer le graphique.
A ce stade, le logo n’est pas clairement visible parce qu’il s’affiche en
noir et transparent sur une image d’arrière-plan sombre. Vous le
mettrez en surbrillance ultérieurement afin qu’il se détache mieux.
6.
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.
228 Didacticiel : Création d’une bannière de page
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.
A ce stade, le graphique de bannière contient un seul calque nommé
Calque 1.
3.
Au bas du panneau, cliquez sur le bouton Nouveau calque/Dupliquer à
deux reprises pour créer deux calques supplémentaires.
4.
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
C ONS E I L
5.
■
Modifiez l’ordre d’empilage des calques en cliquant sur le calque
Graphiques et en le faisant glisser sous le calque Logo.
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.
Une ligne sombre 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
sombre s’affiche au bas du calque.
Organisation de vos objets à l’aide de calques 229
y
A S A VOI R . . .
En savoir plus sur les calques Les calques divisent un document Fireworks en plusieurs plans
distincts. Un document peut être composé de nombreux calques pouvant chacun 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.
6.
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 :
7.
Enregistrez votre travail.
Création d’un arrière-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 arrière-plan sombre. 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.
230 Didacticiel : Création d’une bannière de page
2.
Dans le panneau Outils, cliquez sur l’outil Rectangle.
3.
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.
.
Création d’un arrière-plan contrasté pour le logo 231
b.
Activez le sélecteur de couleur de remplissage 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é.
232 Didacticiel : Création d’une bannière de page
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.
e.
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 %.
Création d’un arrière-plan contrasté pour le logo 233
4.
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 semitransparent s’affiche sur le logo.
CON S EI L
5.
Augmentez le
grossissement du
document afin de
fignoler votre travail.
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.
6.
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.
7.
Enregistrez votre travail.
Création d’un contour autour de
la bannière
Vous souhaitez créer un contour noir autour 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.
Cliquez sur le calque Arrière-plan dans le panneau Calques.
234 Didacticiel : Création d’une bannière de page
2.
Dans la section Vecteur du panneau Outils, sélectionnez l’outil
Rectangle arrondi.
3.
Dans l’Inspecteur des propriétés, définissez les propriétés suivantes pour
l’outil :
■
■
■
Dans le menu contextuel Catégorie de remplissage, cliquez sur
Aucune.
Activez le sélecteur 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.
Définissez la pointe de trait sur 1 et la catégorie de trait sur 1 pixel
adouci.
Création d’un contour autour de la bannière 235
4.
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.
5.
Tandis que le rectangle arrondi est sélectionné, cliquez sur Edition >
Couper.
6.
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.
7.
Cliquez sur Edition > 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.
8.
Enregistrez votre travail.
236 Didacticiel : Création d’une bannière de page
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.
3.
Dans l’Inspecteur des propriétés, définissez les propriétés suivantes pour
l’outil Plume :
■
■
■
4.
Activez le sélecteur de couleur de trait à côté de l’icône du crayon,
puis cliquez sur le bouton Transparent.
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.
Dans la fenêtre Document à l’extérieur du document, cliquez quatre fois
pour tracer une forme rectangulaire, 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.
Création d’un effet de bord oblique 237
5.
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.
R EM A R QU E
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 audessus du calque Graphiques tandis que le calque Arrière-plan se trouve en
dessous.
6.
Cliquez sur l’outil Sous-sélection (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é droit
soit oblique, comme suit.
7.
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.
238 Didacticiel : Création d’une bannière de page
4.
Cliquez sous le graphique du logo, puis entrez Nouveau World Cuisine.
5.
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.
6.
Enregistrez votre travail.
Exportation d’un fichier d’image
optimisé
A présent que vous avez terminé le graphique de bannière, vous êtes prêt à
optimiser et exporter l’image comme fichier JPEG.
y
A S A VOI R . . .
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 de fichier de votre image, tout en
préservant le plus possible la qualité. Cette recherche du meilleur compromis est appelée optimisation :
elle consiste à trouver les valeurs les mieux adaptées pour le nombre de couleurs, le niveau de
compression et la qualité.
Exportation d’un fichier d’image optimisé 239
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.
240 Didacticiel : Création d’une bannière de page
3.
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.
R E MA R Q UE
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
choisi ce format de fichier car vous l’avez sélectionné dans le panneau
Optimiser.
2.
Ouvrez le dossier suivant de votre disque dur :
local_sites/cafe_townsend/images/
Exportation d’un fichier d’image optimisé 241
3.
Assurez-vous que le menu contextuel Type (Windows) ou Enregistrer
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 également enregistrer le fichier PNG de manière à ce que
toute modification apportée par vos soins se reflète également dans le
fichier source.
4.
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.
R EM A R QU E
Si le fichier ne figure pas dans le dossier images, dans le menu contextuel
Fichiers de type, cliquez sur JPEG.
242 Didacticiel : Création d’une bannière de page
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
devez travailler davantage sur le projet, vous pouvez modifier le fichier
PNG et l’exporter de nouveau. Il est toujours 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.
Exportation d’un fichier d’image optimisé 243
244 Didacticiel : Création d’une bannière de page
CHAPITRE 9
Didacticiel : Création de votre
première application Flash
9
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 votre tâche . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246
Etude de l’application finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246
Création d’un document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 248
Création de symboles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252
Edition 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
Edition du scénario principal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 263
Création de la bordure. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 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
245
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 pourra ê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
Etude de l’application finale
En examinant la version terminée de l’application que vous êtes sur le point
de créer, vous découvrirez également l’espace de travail Flash.
Les sections suivantes de ce didacticiel présentent les étapes à suivre pour
créer l’application vous-même.
246 Didacticiel : Création de votre première application Flash
Exécution de l’application finale
Pour mieux comprendre le type d’application que vous allez créer 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 lire 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 lire 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 lo
cal_sites\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.
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.
Localisez le document de programmation en utilisant un des chemins
suivants :
■
Accédez au fichier terminé dans le dossier lo
cal_sites\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.
Etude de l’application finale 247
3.
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 à créer 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 scénario, il décrit quand et comment faire apparaître ces
symboles sur la scène.
Le panneau Actions contient du code ActionScript qui contrôle la
navigation dans le document Flash et importe 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.
4.
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é pré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 êtes prêt à créer votre propre version de la FMA.
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.
248 Didacticiel : Création de votre première application Flash
4.
Entrez un nom pour le ficher flash_fma.fla puis enregistrez-le dans le
dossier cafe_townsend que vous avez copié dans le dossier local_sites sur
votre disque dur.
R E MA R Q UE
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.
Création d’un document 249
Pour définir les propriétés du document :
1.
S’il n’est pas déjà ouvert, choisissez 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
R EM A R QU E
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.
2.
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.
3.
Cliquez sur Taille pour fixer la taille de la scène.
A S A VO I R . ..
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.
250 Didacticiel : Création de votre première application Flash
4.
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
5.
Dans le scénarion, cliquez sur la valeur dans le menu Zoom et entrez
75%.
De la sorte, il est plus facile de voir votre document entier dans la
fenêtre de document.
Appuyez sur Entrée (Windows) ou sur Retour (Macintosh).
6.
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 d’un document 251
Création de symboles
Vous allez à présent créer quelques symboles, c’est-à-dire des actifs
réutilisables. Les symboles permettent d’utiliser la même ressource
plusieurs fois sans avoir à en enregistrer plusieurs copies dans votre 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 modifiez
pas.
3.
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.
R E MA R Q UE
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.
4.
En mode d’édition de symbole, sélectionnez l’outil Rectangle du
panneau Outils (Fenêtre > Outils).
A S A VOI R . . .
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 soit « dessiner une copie du symbole spécifié à 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.
252 Didacticiel : Création de votre première application Flash
5.
Sélectionnez la couleur blanc (#FFFFFF) dans le sélecteur de couleur de
trait du panneau Outils.
6.
Sélectionnez la couleur gris clair (#CCCCCC) dans le sélecteur de
couleur de remplissage du panneau Outils.
7.
Déplacez la souris dans la zone de dessin tout en maintenant le bouton
enfoncé, de manière à dessiner un large rectangle aplati.
8.
Cliquez sur l’outil de sélection dans le panneau Outils.
9.
Double-cliquez sur le rectangle que vous avez dessiné afin de
sélectionner son remplissage et son trait.
R E MA R Q UE
Le trait représente la ligne qui constitue la bordure d’une forme.
0 dans les deux zones de texte X et Y de l’inspecteur des
propriétés.
10. Entrez
Le coin supérieur gauche du symbole est ainsi placé dans le coin
supérieur gauche de la scène.
11.
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
R EM A R QU E
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.
Création de symboles 253
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 apparaît 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.
254 Didacticiel : Création de votre première application Flash
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é
Création de symboles 255
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
4.
L’occurrence du symbole étant toujours sélectionnée, entrez 0 dans les
zones X et Y de l’inspecteur des propriétés.
5.
Entrez slides_mc dans la zone de texte Nom de l’inspecteur des
propriétés.
Edition 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.
256 Didacticiel : Création de votre première application Flash
Pour modifier le symbole diaporama :
1.
Sans quitter le mode d’édition de symbole, cliquez sur le bouton Insérer
un calque dans le scénario.
Le bouton Insérer un calque dans le scénario du symbole slideShow
Un calque est ainsi ajouté au scénario du symbole slideShow.
2.
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
A S A V OI R . ..
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 pourra ê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 oeuvre 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.
Edition d’un symbole de scénario 257
3.
Choisissez Modification > Scénario > 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
4.
Répétez l’opération en sélectionnant les calques 1 et 2 à l’image 40 puis
en choisissant Modification > Scénario > Convertir en images-clés.
5.
Répétez l’opération aux images 60 et 80.
Utilisez au besoin la barre de défilement 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 à 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 > Scénario > 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.
3.
Sélectionnez l’image 1 du calque 2.
258 Didacticiel : Création de votre première application Flash
4.
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ément que vous souhaitez
ajouter ou faites-le glisser sur la fenêtre des scripts », et il vous sera
impossible de taper dans la fenêtre des scripts. Cliquez sur le bouton
Assistant de script du panneau Actions pour quitter le mode Assistant
de script.
5.
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 atteindra l’image 1. La lettre a minuscule apparaît
dans l’image 1 du calque 1 du scénario. Elle indique que cette image
contient du code ActionScript.
6.
Dans le scénario, sélectionnez l’image 20 du calque 2.
7.
Choisissez Modification > Scénario > Convertir en images-clés.
8.
Sélectionnez l’image 20 du calque 2.
9.
Dans le panneau Actions, tapez le code ActionScript stop();.
10. Dans
11.
le scénario, sélectionnez l’image 40 du calque 2.
Choisissez Modification > Scénario > Convertir en images-clés.
12. Sélectionnez
13.
l’image 40 du calque 2.
Dans le panneau Actions, tapez le code ActionScript stop();.
14. Dans
le scénario, sélectionnez l’image 60 du calque 2.
15. Choisissez
Modification > Scénario > Convertir en images-clés.
16.
Sélectionnez l’image 60 du calque 2.
17.
Dans le panneau Actions, tapez le code ActionScript stop();.
18.
Dans le scénario, sélectionnez l’image 80 du calque 2.
19. Dans
le panneau Actions, tapez le code ActionScript stop();.
Ajout d’actions à des images 259
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
étiquetées.
Pour ajouter des étiquettes d’images :
1.
Dans le scénario, sélectionnez l’image 2 du calque 2.
2.
Entrez slide0 dans la zone de texte Etiquette 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 scénario, sélectionnez l’image 21 du calque 2.
4.
Entrez slide1 dans la zone de texte Etiquette 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 Etiquette 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 Etiquette de l’image de l’inspecteur
des propriétés.
Le scénario avec les libellés des images
260 Didacticiel : Création de votre première application Flash
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 se 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.
3.
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écélérer à la fin du mouvement
Ainsi, le mouvement débute brusquement et se termine plus
lentement.
4.
Dans le scénario, sélectionnez l’image 20 du calque 1.
A S A VOI R . . .
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 la sorte, 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.
A S A VOI R . . .
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 plaisant 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êter. 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.
Ajout d’une interpolation de mouvement 261
5.
Dans l’inspecteur des propriétés, sélectionnez Mouvement dans le menu
Interpolation.
6.
Tirez la glissière d’accélération vers le haut jusqu’à ce que la zone
Accélération contienne 100.
7.
Cliquez sur l’occurrence du clip slides_mc située sur la scène pour la
sélectionner.
8.
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.
9.
Dans le scénario, sélectionnez l’image 40 du calque 1.
10. Dans l’inspecteur des propriétés, sélectionnez Mouvement dans le menu
Interpolation.
11.
Tirez la glissière d’accélération vers le haut jusqu’à ce que la zone
Accélération contienne 100.
12. Cliquez
sur l’occurrence du clip slides_mc située sur la scène pour la
sélectionner.
13.
Entrez -300 dans la zone de texte Y de l’inspecteur des propriétés.
14. Dans
le scénario, sélectionnez l’image 60 du calque 1.
15. Dans l’inspecteur des propriétés, sélectionnez Mouvement dans le menu
Interpolation.
16.
Tirez la glissière d’accélération vers le haut jusqu’à ce que la zone
Accélération contienne 100.
17.
Cliquez sur l’occurrence du clip slides_mc située sur la scène pour la
sélectionner.
18.
Entrez -450 dans la zone de texte Y de l’inspecteur des propriétés.
19. 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.
21. Entrez
-600 dans la zone de texte Y de l’inspecteur des propriétés.
262 Didacticiel : Création de votre première application Flash
22.Dans le scénario, 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
Edition 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.
Vous quittez le mode d’édition de symbole et vous revenez au scénario
principal de votre fichier FLA.
2.
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.
3.
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.
4.
Double-cliquez sur le libellé Calque 5 afin de le rendre modifiable.
5.
Entrez actions comme nouveau nom de calque et appuyez sur la touche
Entrée (Windows) ou Retour (Macintosh).
6.
Double-cliquez sur le libellé Calque 4 et renommez ce calque
nextButton.
Edition du scénario principal 263
7.
Double-cliquez sur le libellé Calque 3 et renommez ce calque border.
8.
Double-cliquez sur le libellé Calque 2 et renommez ce calque blueArea.
9.
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 à rendre 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 scène,
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 scène.
4.
Dans l’inspecteur des propriétés, tapez slideShow_mc comme nom
d’occurrence du clip.
5.
Enregistrez votre travail.
264 Didacticiel : Création de votre première application Flash
Création de la bordure
Vous allez ensuite créer une bordure 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 bordure :
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
5.
Choisissez le noir (#000000) dans le sélecteur de couleur de remplissage.
Sélection du noir dans le sélecteur de couleur de remplissage.
Création de la bordure 265
6.
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
7.
Dans le panneau Outils, sélectionnez l’outil Sélection.
8.
Sur la scène, cliquez sur le rectangle que vous venez de dessiner afin de
le sélectionner.
9.
Choisissez Fenêtre > Aligner pour ouvrir le panneau Aligner.
10. 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
C ONS E I L
11.
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.
Dans le panneau Aligner, cliquez sur le bouton Mêmes largeur et
hauteur de la section Ajuster la taille.
266 Didacticiel : Création de votre première application Flash
La taille de votre rectangle s’adapte à celle de la scène.
Clic sur le bouton Mêmes largeur et hauteur
12. 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
13.
Toujours dans ce panneau, cliquez maintenant sur Aligner les centres
horizontalement.
Clic sur le bouton Aligner les centres horizontalement
Création de la bordure 267
Le rectangle est désormais parfaitement centré sur la scène.
Le rectangle noir centré sur la scène.
14. Cliquez
15. Dans
en dehors de la scène pour désélectionner le rectangle noir.
le panneau Outils, sélectionnez l’outil Rectangle.
16.
Toujours dans ce panneau, sélectionnez la couleur bleu ayant pour
valeur hexadécimale #0000FF dans le sélecteur de couleur de
remplissage.
17.
Dans le panneau Outils, double-cliquez sur l’outil Rectangle.
268 Didacticiel : Création de votre première application Flash
18.
Dans la boîte de dialogue Paramètres du rectangle, tapez 16 dans la zone
Rayon d’angle, puis cliquez sur OK.
19. 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
21. Dans
le panneau Outils, cliquez sur l’outil de sélection.
22.Cliquez
sur le rectangle bleu pour le sélectionner.
23.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
Création de la bordure 269
24.Double-cliquez
25.Appuyez
à nouveau sur le rectangle bleu pour le sélectionner.
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 comportant 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.
4.
Dans le panneau Outils, sélectionnez l’outil Rectangle.
5.
Sélectionnez « aucune couleur » dans le sélecteur de couleur de trait.
6.
Cliquez sur la couleur de remplissage pour en afficher le sélecteur.
7.
Dans le sélecteur de couleur de remplissage, entrez 80 dans la zone
Alpha.
8.
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.
9.
Dans le panneau Outils, double-cliquez sur l’outil Rectangle.
270 Didacticiel : Création de votre première application Flash
10. Dans la boîte de dialogue Paramètres du rectangle, tapez 0
dans la zone
Rayon d’angle, puis cliquez sur OK.
11.
A l’aide de l’outil Rectangle, dessinez un rectangle large et plat sur la
scène.
12. Dans
13.
le panneau Outils, cliquez sur l’outil de sélection.
Sur la scène, cliquez sur le rectangle que vous venez de dessiner afin de
le sélectionner.
14. 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
15. Appuyez
sur Entrée ou Retour.
16.
Dans le panneau Outils, cliquez sur l’outil Sous-sélection.
17.
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é
Ajout d’un symbole 271
18.
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.
19. 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.
2.
Dans l’inspecteur des propriétés, choisissez Texte dynamique dans le
menu Type de texte.
3.
Toujours dans l’inspecteur des propriétés, entrez 14 dans la zone Taille
de police.
4.
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.
272 Didacticiel : Création de votre première application Flash
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.
5.
Dans le panneau Outils, cliquez sur l’outil de sélection.
6.
Cliquez sur la zone de texte que vous venez de dessiner afin de la
sélectionner.
7.
Dans le panneau de l’inspecteur des propriétés, entrez les valeurs
suivantes :
■
Type de texte : Texte dynamique
■
Nom de l'occurrence : title_txt
■
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
8.
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 scène 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.
Ajout d’une zone de texte 273
5.
Sélectionnez Multiligne dans le menu Type de ligne.
6.
A 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_txt
X : 85
Y : 45
Police : Verdana
Taille de police : 12
Couleur : Blanc
L’inspecteur des propriétés contenant les valeurs appropriées
9.
Dans le panneau Outils, cliquez sur l’outil de sélection.
10. Cliquez
sur la scène en dehors des formes que vous avez dessinées pour
les désélectionner.
11.
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 bordures
noires réapparaît.
12. Enregistrez
votre document.
274 Didacticiel : Création de votre première application Flash
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
4.
En maintenant toujours le clip menu sélectionné, ouvrez l’inspecteur des
propriétés et sélectionnez Alpha dans le menu Couleur.
5.
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 êtes 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.
Ajout d’un composant Button 275
4.
Faites glisser le composant Button du panneau Composants vers la
partie inférieure du rectangle bleu sur la scène.
Le bouton reste sélectionné sur la scène, sauf si vous cliquez ailleurs.
5.
En maintenant le bouton sélectionné, ouvrez le panneau de l’inspecteur
des propriétés et entrez les valeurs suivantes :
Nom de l’occurrence : next_btn
X : 590
Y : 120
6.
Dans le panneau de l’inspecteur des propriétés, cliquez sur l’onglet
Paramètres.
7.
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.
8.
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.
R EMA R Q U E
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.
276 Didacticiel : Création de votre première application Flash
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 :
// add the event listener for the button
next_btn.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.
4.
Choisissez Contrôle > Tester l’animation.
Le document Flash s’ouvre et lit l’animation dans une nouvelle fenêtre.
5.
Dans la fenêtre de test d’animation, cliquez sur Suivant.
La description et le titre de test que vous avez entrés dans le code
ActionScript apparaissent dans le rectangle bleu sur le côté droit du
document.
6.
Enregistrez votre document.
Saisie de code ActionScript pour le
diaporama
CON S E I L
function testFunc(eventObj:Object) {
menu_mc.title_txt.text = "Testing the title";
menu_mc.description_txt.text = "Testing the
description";
}
Pour ajouter le texte
(entre guillemets),
ActionScript fait
référence aux zones
de texte en indiquant
le nom de
l’occurrence du clip
menu qui se trouve
sur la scène
(menu_mc) puis le
nom de la zone de
texte elle-même
dans l’occurrence du
clip, comme dans :
menu_mc.description
Cette syntaxe est
baptisée syntaxe à
point. Elle est utilisée
dans ActionScript
pour faire référence
à des objets
imbriqués dans
d’autres objets.
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érifiez que l’image 1 du calque actions est toujours
sélectionnée.
Ajout de code ActionScript 277
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.
3.
Copiez le code suivant et collez-le dans le panneau Actions.
/*The following four sections contain the data
/*for each menu item.
/* 0 */
var image0title:String = "Summer salad";
var image0desc:String = "Butter lettuce with apples,
blood orange segments, gorgonzola, and raspberry
vinaigrette.";
var image0uri:String = "images/image0.jpg";
/* 1 */
var image1title:String = "Turkey and Sun-dried Tomato
Sandwich";
var image1desc:String = "Fresh roasted turkey with sundried tomatoes, garlic aioli, and havarti.";
var image1uri: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
());
}
278 Didacticiel : Création de votre première application Flash
slideShow_mc.slides_mc["holder4"].loadMovie(this["image0u
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.
4.
Enregistrez votre document.
5.
Choisissez Contrôle > Tester l’animation.
6.
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.
7.
Fermez la fenêtre de test d’animation.
Examen du code ActionScript
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";
Ajout de code ActionScript 279
var image0desc:String = "Butter lettuce with apples, blood
orange segments, gorgonzola, and raspberry vinaigrette.";
var image0uri:String = "images/image0.jpg";
/* 1 */
var image1title:String = "Turkey and Sun-dried Tomato
Sandwich";
var image1desc:String = "Fresh roasted turkey with sun-dried
tomatoes, garlic aioli, and havarti.";
var image1uri: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";
Ce code déclare quatre ensembles comportant chacun 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érotation 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 :
image0title contient une chaîne correspondant au nom du plat qui
s’affichera dans la zone title_txt du clip menu.
image0desc contient
une chaîne correspondant à la description du plat
qui s’affichera dans la zone description_txt du clip menu.
image0uri contient 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.
280 Didacticiel : Création de votre première application Flash
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 en facilite la modification, notamment si vous
voulez 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; i++) {
slideShow_mc.slides_mc["holder"+i].loadMovie(this["image"+(i
)+"uri"],slideShow_mc.slides_mc.getNextHighestDepth());
}
Ajout de code ActionScript 281
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["image0uri"
],slideShow_mc.slides_mc.getNextHighestDepth());
Les lignes de code suivantes mettent en oeuvre 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écifié 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.
282 Didacticiel : Création de votre première application Flash
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.
next_btn.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 trouverez 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érifiez 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.
Publication de votre document 283
3.
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.
4.
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érera qu’un fichier HTML simple pour afficher
le document Flash dans un navigateur.
5.
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.
6.
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 les 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 choisissez
Aide > Enregistrement en ligne. Vous pouvez aussi imprimer le
formulaire d’inscription à partir du menu Aide.
284 Didacticiel : Création de votre première application Flash
Notes d’accompagnement
Vous trouverez 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, voire conjuguer
les deux. A vous de choisir 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.
Macromedia Flash Development Center
Tenez-vous au courant des tendances et des techniques de programmation
Macromedia Flash les plus récentes. Des didacticiels, 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.
Ressources 285
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 comprennent 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.
Exemples d’applications
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, choisissez 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, ouvrez 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/.
286 Didacticiel : Création de votre première application Flash
CHAPITRE 10
Didacticiel : Création d’un lecteur vidéo
(Flash Professionnel uniquement)
10
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 oeuvre 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 votre 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
287
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 pourra ê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 de 20 à 30 minutes.
Etude de l’application finale
En examinant la version terminée de l’application que vous êtes sur le point
de créer, vous découvrirez également l’espace de travail Flash.
Les sections suivantes présentent les étapes à suivre pour créer l’application
vous-même.
Exécution de l’application finale
Pour mieux comprendre le type d’application que vous allez créer 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 correspondent aux fichiers utilisés dans Flash. Vous pouvez également
lire la version SWF du fichier dans Flash Player. La version SWF représente
la version du fichier que vous publierez dans une page web.
288 Didacticiel : Création d’un lecteur vidéo (Flash Professionnel uniquement)
Pour lire la version SWF du fichier dans Flash Player :
1.
Dans Flash, choisissez Fichier > Ouvrir.
2.
Accédez au fichier terminé dans le dossier lo
cal_sites\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 vidéo.
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 lo
cal_sites\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 scénario, il décrit quand et comment faire apparaître 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.
Etude de l’application finale 289
Codage d’un fichier vidéo
En premier lieu, vous devez convertir un fichier vidéo QuickTime (MOV)
en fichier vidéo 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
3.
Cliquez sur Paramètres.
290 Didacticiel : Création d’un lecteur vidéo (Flash Professionnel uniquement)
4.
Dans la fenêtre Paramètres de codage des vidéos 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.
5.
Fermez la boîte de dialogue Paramètres en cliquant sur le bouton OK.
6.
Cliquez sur Activer la file d’attente.
Le codeur vidéo de Flash convertit le fichier et l’enregistre dans le
même dossier que celui du fichier original cafe_townsend_chef.mov.
Vous êtes maintenant prêt à utiliser le fichier FLV dans un document
Flash.
7.
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é pré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.
Création d’un nouveau document Flash 291
Ouverture d’un nouveau document
Vous êtes prêt à créer votre propre version de la FMA.
Pour créer un document :
1.
Démarrez 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 ficher video_pod.fla puis enregistrez-le dans le
dossier cafe_townsend que vous avez copié sur votre disque dur.
R E MA R Q UE
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’arrière-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, choisissez Fenêtre > Propriétés > Propriétés.
R EMA R Q U E
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.
2.
Dans l’inspecteur des propriétés, cliquez sur Taille.
292 Didacticiel : Création d’un lecteur vidéo (Flash Professionnel uniquement)
3.
Dans la boîte de dialogue Propriétés du document, entrez les valeurs
suivantes :
■
Largeur : 360
■
Hauteur : 240
4.
Cliquez sur OK.
5.
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 d’un nouveau document Flash 293
Ajout d’un composant
multimédia
Vous allez 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.
3.
Faites glisser un composant FLVPlayback sur la scène.
A S A VOI R . . .
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 servent à 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 oeuvre,
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 voulez lire et la manière dont les contrôles de
lecture doivent se présenter.
294 Didacticiel : Création d’un lecteur vidéo (Flash Professionnel uniquement)
Par défaut, le nouveau composant reste sélectionné sur la scène.
4.
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
5.
En maintenant le nouveau composant sélectionné sur la scène,
sélectionnez Fenêtre > Inspecteur de composants pour ouvrir
l’inspecteur de composants.
6.
Dans l’onglet Paramètres de l’inspecteur des propriétés, cliquez sur le
paramètre contentPath.
Ajout d’un composant multimédia 295
7.
Cliquez sur l’icône en forme de loupe affichée en regard du paramètre.
8.
Dans la boîte de dialogue Chemin du contenu, entrez
cafe_townsend_chef.flv et cliquez sur OK.
9.
Toujours dans l’inspecteur des propriétés, donnez au paramètre
autoRewind la valeur false.
10. Enregistrez
11.
votre travail.
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 video_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 video_pod.swf pour que les
contrôles vidéo soient visibles lors de la lecture du fichier SWF.
296 Didacticiel : Création d’un lecteur vidéo (Flash Professionnel uniquement)
Vous pouvez personnaliser l’apparence de ces contrôles vidéo. Pour plus
d’informations, consultez la section A propos de l'application
d'enveloppes aux composants de Utilisation des composants.
2.
Dans votre navigateur web, choisissez Fichier > Ouvrir.
3.
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.
Etapes 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
Etapes suivantes 297
298 Didacticiel : Création d’un lecteur vidéo (Flash Professionnel uniquement)
PARTIE 4
Assemblage et déploiement
de votre site Internet
4
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
299
CHAPITRE 11
Didacticiel : Ajout de
contenu aux pages
11
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 votre tâche en revue . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 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
Localisez vos fichiers
Dans ce didacticiel, vous commencerez par la mise en forme basée sur un
tableau (index.html) que vous avez créée 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à.
301
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 didacticiels, 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/.
R EM A R QU E
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.
302 Didacticiel : Ajout de contenu aux pages
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.
Passez votre tâche en revue 303
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
R EMA R Q U E
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.
304 Didacticiel : Ajout de contenu aux pages
2.
Double-cliquez sur l’espace réservé pour l’image, banner_graphic, dans
le haut de la page.
3.
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.
4.
Sélectionnez le fichier banner_graphic.jpg, puis cliquez sur OK.
R E MA R QU E
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.
Insérez des images 305
Dreamweaver remplace l’espace réservé pour l’image par la bannière de
Cafe Townsend.
5.
Cliquez une fois à l’extérieur du tableau pour le désélectionner.
6.
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).
2.
Choisissez Insertion > Image.
3.
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.
R EM A R QU E
Si la boîte de dialogue Attributs d’accessibilité à des balises apparaît,
cliquez sur OK.
306 Didacticiel : Ajout de contenu aux pages
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 dernière ligne du dernier tableau de la page (juste en
dessous des cellules en couleur).
Insérez des images 307
2.
Dans le panneau Fichiers (Fenêtre > Fichiers), recherchez le fichier
body_main_footer.gif (qui se trouve dans le dossier images) et faites-le
glisser jusqu’au point d’insertion dans le dernier tableau.
R E MA R Q UE
Si la boîte de dialogue Attributs d’accessibilté à des balises apparaît,
cliquez sur OK.
3.
Cliquez en dehors du tableau puis enregistrez la page (Fichier >
Enregistrer).
308 Didacticiel : Ajout de contenu aux pages
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 Alignement horizontal et sélectionnez
Haut dans le menu contextuel Alignement vertical. Cette action aligne
le contenu de chaque cellule du tableau au centre de la partie supérieure
de la cellule.
R EM A R QU E
Si vous ne voyez 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.
3.
Appuyez sur Entrée (Windows) ou Retour (Macintosh) pour créer
davantage de place.
Insérez des images 309
A S A VOI R . . .
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 favoris 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.
4.
Cliquez sur l’onglet Actifs du panneau Fichiers ou sélectionnez
Fenêtre > Actifs.
Les actifs du site s’affichent.
Bouton Images
5.
Si l’affichage des images n’est pas sélectionné, cliquez sur le bouton
Images pour afficher vos actifs d’image.
6.
Dans le panneau Actifs, sélectionnez le fichier street_sign.jpg.
310 Didacticiel : Ajout de contenu aux pages
7.
Effectuez l’une des tâches suivantes :
■
■
Faites glisser le fichier sign.jpg jusqu’au point d’insertion de la
cellule centrale du tableau.
Cliquez sur le bouton Insérer dans la partie inférieure du panneau
Actifs.
R E MA R Q UE
Si la boîte de dialogue Attributs d’accessibilté à des balises apparaît,
cliquez sur OK.
Le graphisme street_sign.jpg s’affiche sur la page.
8.
Cliquez une fois à l’extérieur du tableau pour désélectionner l’image.
9.
Enregistrez la page.
Insérez des images
311
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.
2.
Dans l’inspecteur de propriétés (Fenêtre > Propriétés), sélectionnez
Centre dans le menu contextuel Alignement horizontal et sélectionnez
Haut dans le menu contextuel Alignement vertical.
Le contenu de la cellule du tableau est ainsi placé au milieu de celle-ci.
R E MA R Q UE
Si vous ne voyez 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.
312 Didacticiel : Ajout de contenu aux pages
A S A VOI R . . .
Présentation des fichiers Lorsque vous créez des actifs dans Macromedia Flash, vous travaillez 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 travaillez sur un logo animé pour un site Web, le fichier
Flash pourrait se nommer animated_logo.fla.
Lorsque vous avez terminé votre travail sur un fichier FLA dans Flash, vous devez l’exporter vers un
format qui pourra ê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
devez insérer dans une page Web que vous êtes en train de construire avec Dreamweaver.
3.
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 Attributs d’accessibilté à des balises objet
apparaît, cliquez sur OK.
R E MA R Q U E
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.
Insérez et lisez un fichier Flash 313
Un espace réservé pour du contenu Flash, plutôt qu’une séquence du
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.
4.
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.
5.
Dans l’inspecteur de propriétés (Fenêtre > Propriétés), cliquez sur le
bouton Lire.
R E MA R Q UE
Si vous ne voyez pas le bouton Lire, cliquez sur la flèche d’extension dans
l’angle inférieur droit de l’inspecteur des propriétés.
314 Didacticiel : Ajout de contenu aux pages
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.
6.
Dans l’inspecteur de propriété, cliquez sur Arrêt pour interrompre la
lecture du fichier Flash.
7.
Enregistrez la page.
Insérez une vidéo Flash
Ensuite, vous allez insérer un fichier vidéo 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.
2.
Sélectionnez Insérer > Supports > Vidéo Flash.
Insérez une vidéo Flash 315
3.
Dans la boîte de dialogue Insérer un fichier Flash vidéo, choisissez Vidéo
à téléchargement progressif dans le menu Type de vidéo.
A S A VOI R . . .
Présentation de Vidéo 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 commandeInsérer un fichier Flash Video dispose des options suivantes pour la fourniture de contenu
vidéo aux visiteurs de votre 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 vidéo Flash et le lit immédiatement sur la page Web. Pour
permettre la diffusion en direct de vidéo sur vos pages Web, vous devez toutefois disposer d’un accès à
Macromedia Serveur de communication Flash, le seul serveur de diffusion en direct capable de diffuser
du contenu vidéo Flash.
Pour plus d’informations sur l’utilisation de la fenêtre de document, voir Insertion de contenu Flash Vidéo
dans Utilisation de Dreamweaver.
4.
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.
5.
Sélectionnez Halo Skin 2 dans le menu déroulant Apparence.
Un aperçu de l’habillage sélectionné apparaît sous le menu déroulant
Skin. L’option Skin indique l’aspect et le comportement du composant
vidéo Flash qui contiendra le contenu vidéo Flash.
316 Didacticiel : Ajout de contenu aux pages
Pour plus d’informations sur la sélection d’habillages pour
les composants vidéo Flash, consultez le site
www.macromedia.com/go/flv_tutorial_fr.
6.
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 (Macinstosh).
R EM A R QU E
‘Total avec habillage’ indique la largeur et la hauteur du fichier FLV plus la
largeur et la hauteur de l’habillage sélectionné.
7.
Conservez les valeurs par défaut des autres options :
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.
Contraindre
Lecture auto détermine si la vidéo doit être lue automatiquement à
l’ouverture de la page Web. Cette option est désélectionnée par défaut.
C O N S EI L
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 Vidéo Flash sur votre
page Web. Quand vous augmentez les dimensions d’une animation, la
qualité de l’image décroît généralement.
Vous pouvez cliquer
sur Détecter 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 vousmême les valeurs de
la largeur et de la
hauteur.
Insérez une vidéo Flash 317
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.
8.
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 enchâsse 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).
9.
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).
318 Didacticiel : Ajout de contenu aux pages
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’ici), parce
que ce fichier n’est pas un fichier HTML.
2.
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 Edition > copier pour copier le texte.
3.
Fermez le fichier sample_text.txt en cliquant sur le X dans le coin
supérieur droit du document.
4.
Dans la fenêtre de document index.html, cliquez dans la troisième
cellule du tableau à trois colonnes (celle qui se trouve à droite de la
colonne contenant le graphisme et la vidéo Flash).
5.
Sélectionnez Edition > Coller.
Le texte du fichier texte apparaît dans la cellule sélectionnée du tableau.
Insérez du texte 319
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.
6.
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.
7.
Dans l’inspecteur des propriétés (Fenêtre > Propriétés), choisissez Haut
dans le menu Alignement 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 Alignement vertical, cliquez sur la flèche d’extension dans l’angle
inférieur droit de l’inspecteur des propriétés.
320 Didacticiel : Ajout de contenu aux pages
8.
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.
3.
Appuyez sur la barre d’espace puis tapez Chef Ipsum.
Insérez du texte 321
4.
Répé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.
5.
Tout en maintenant le point d’insertion dans la première cellule du
tableau à trois colonnes, cliquez sur la balise <td> du sélecteur de balises.
322 Didacticiel : Ajout de contenu aux pages
6.
Dans l’inspecteur des propriétés (Fenêtre > Propriétés), choisissez Haut
dans le menu Alignement vertical.
Le texte que vous venez de taper est ainsi aligné sur le haut de la cellule
du tableau.
R E MA R QU E
Si vous ne voyez 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.
7.
Enregistrez votre page.
Créez des liens
Un lien est une réfé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éer des liens à tout moment du processus de création d’un
site. Dans cette section, vous allez créer 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 pouvez lier à (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 créer un vrai site, chacun de ces liens accéderait à une
page différente.
Créez des liens 323
1.
Dans la page index.html ouverte de la fenêtre de document, sélectionnez
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.
2.
Dans l’inspecteur de propriétés (Fenêtre > Propriétés), cliquez sur
l’icône de dossier située en regard de la zone de texte Lien.
3.
Dans la boîte de dialogue Sélectionner un fichier, accédez au fichier
menu.html (qui se trouve dans le même dossier que le fichier
index.html) puis cliquez sur OK (Windows) ou Choisir (Macintosh).
4.
Cliquez sur la page pour désélectionner 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.
324 Didacticiel : Ajout de contenu aux pages
5.
Répétez les étapes précédentes pour lier chaque mot ou ensemble de
mots que vous avez saisis pour la navigation. Vous voulez créer 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 faudrait lier chaque mot de la navigation à une page qui lui
soit propre.
R EMA R Q U E
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.
6.
Enregistrez votre page.
Aperçu de votre page dans un
navigateur
Le mode Création vous donne une vague idée de l’apparence 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 présenter des HTML qui
seront semblables quel que soit le navigateur utilisé. Mais il 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.
Aperçu de votre page dans un navigateur 325
1.
Assurez-vous que le fichier index.html soit ouvert dans la fenêtre du
document.
2.
Appuyez sur la touche F12 (Windows) ou Commande+F12
(Macintosh).
Votre navigateur principal est lancé s’il n’est pas déjà actif et il affiche la
page index.
R EM A R QU E
Dreamweaver doit automatiquement détecter votre navigateur principal et
l’utiliser pour afficher un aperçu de votre page. Si aucun aperçu de la page
ne s’affiche dans le navigateur de votre choix, repassez à Dreamweaver (si
cela est nécessaire) et sélectionnez Fichier > Aperçu dans le navigateur >
Editer la liste des navigateurs. La boîte de dialogue Préférences apparaît
et vous pouvez ajouter le navigateur de votre choix dans la liste. Pour plus
d’informations, cliquez sur le bouton Aide de la boîte de dialogue
Préférences.
326 Didacticiel : Ajout de contenu aux pages
3.
(En option) Revenez à Dreamweaver pour faire les modifications
nécessaires.
Enregistrez ensuite votre travail et appuyez de nouveau sur la touche
F12 pour vous assurer que vos modifications aient été prises en compte.
Vous avez maintenant une page Web avec un contenu au complet. L’étape
suivante consiste à mettre en forme une partie du contenu pour le rendre
plus attrayant. Dans le didacticiel suivant, vous apprendrez à utiliser CSS
pour mettre en forme le texte que vous avez ajouté.
Aperçu de votre page dans un navigateur 327
328 Didacticiel : Ajout de contenu aux pages
CHAPITRE 12
Didacticiel : Mise en forme de
votre page avec CSS
12
Ce didacticiel vous montre comment mettre du texte en forme dans votre
page en utilisant CSS (Cascading Style Sheets ou Feuilles de style en
cascade) dans Dreamweaver. CSS vous donne une plus grande maîtrise sur
l’aspect de votre page en vous permettant de mettre en forme et de
positionner le texte avec des moyens dont HTML ne dispose pas.
Dans ce didacticiel, vous allez accomplir les tâches suivantes :
Localisez vos fichiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 330
Passez votre tâche en revue . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 330
Étude de CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 332
Créez une nouvelle feuille de style . . . . . . . . . . . . . . . . . . . . . . . . . 334
Explorez le panneau Styles CSS . . . . . . . . . . . . . . . . . . . . . . . . . . 339
Associez une feuille de style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 336
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
329
Localisez vos fichiers
Dans ce didacticiel, vous commencerez par la page index de Cafe
Townsend à laquelle vous avez ajouté un contenu au Chapitre 11,
Didacticiel : Ajout de contenu aux pages. Si vous n’êtes pas allé jusqu’au bout
de ce didacticiel, vous pouvez le faire avant d’aller plus loin ou bien vous
pouvez ouvrir la version terminée du didacticiel et commencer par là. La
version terminée du didacticiel, add_content.html, se trouve dans le dossier
completed_files/dreamweaver, dans le dossier cafe_townsend que vous avez
copié sur votre disque dur au Chapitre 4, Didacticiel : Configuration de
votre site et des fichiers de projet
R E MA R Q UE
Si vous entamez ce didacticiel avec le fichier add_content.html terminé, au
lieu du fichier index.html du Chapitre 11, Didacticiel : Ajout de contenu
aux pages, 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 utiliserez des Feuilles de style en cascade (CSS)
pour mettre en forme le texte sur la page d’accueil de Cafe Townsend, un
restaurant fictif. Vous allez créer différentes sortes de règles CSS pour
mettre en forme le texte du corps. Vous allez également mettre en forme le
texte de lien sur le côté gauche de la page afin de créer une barre de
navigation. Quand vous aurez terminé, la page ressemblera à l’exemple
suivant :
330 Didacticiel : Mise en forme de votre page avec CSS
Pour plus d’informations sur CSS, passez à la section suivante. Pour
commencer à créer CSS tout de suite, passez à Créez une nouvelle feuille de
style, page 334
Passez votre tâche en revue 331
Étude de CSS
Les feuilles de style en cascade (.CSS) regroupent des règles de mise en
forme qui déterminent l’aspect du contenu d’une page Web. Quand vous
utilisez CSS pour mettre une page en forme, vous séparez le contenu de la
présentation. Le contenu de votre page, c’est-à-dire, le code HTML, se
trouve dans le fichier HTML lui-même tandis que les règles CSS qui
définissent la présentation du code est dans un autre fichier (une feuille de
style externe) ou dans une autre partie du document HTML (généralement
la <head> section). CSS vous permet de gérer en souplesse l’aspect d’une
page, tant en termes de précision de l’emplacement des éléments qu’en
termes de choix de polices et de styles spécifiques.
Par ailleurs, CSS permet de contrôler de nombreuses propriétés que
HTML seul est incapable de gérer. Par exemple, pour un texte donné, vous
pouvez spécifier différentes tailles et unités (pixels, points, et ainsi de suite)
de police. En utilisant CSS et en définissant les tailles de police en pixels,
vous garantissez un traitement plus homogène de la présentation et de
l’aspect de votre page dans différents navigateurs.
Une règle de style CSS se compose de deux entités: le sélecteur et la
déclaration. Le sélecteur est un terme (tel que P, H1, un nom de classe ou
un identifiant) qui identifie l’élément mis en forme tandis que la
déclaration définit quels sont les éléments de style. Dans l’exemple suivant,
H1 correspond au sélecteur tandis que tout ce qui est placé entre les
crochets ({}) correspond à la déclaration :
H1 {
taille de police : 16 pixels;
famille de polices : Helvetica;
graisse de police : gras;
}
La déclaration est composée de deux entités : la propriété (par exemple,
famille de polices) et la valeur (par exemple, Helvetica). L’exemple
précédent crée un style pour des balises H1 : Le texte de toutes les balises H1
liées à ce style sera associé à une police Helvetica, d’une taille de 16 pixels et
en gras.
332 Didacticiel : Mise en forme de votre page avec CSS
Le terme « en cascade » signifie qu’il est possible d’appliquer plusieurs
feuilles de style à un même élément ou à une même page Web. Vous
pouvez, par exemple, créer une règle CSS pour définir la couleur et une
autre pour les marges, puis les appliquer toutes les deux au texte d’une
même page. Les styles définis sont appliqués en cascade aux éléments de
votre page Web, créant en fin de compte la conception désirée.
CSS présente l’avantage majeur d’être facilement mis à jour. Lorsque vous
modifiez une règle CSS en un emplacement, la mise en forme de tous les
documents utilisant ce style reflète automatiquement le nouveau style.
Vous pouvez définir les types de styles suivants dans Dreamweaver :
■
Les règles CSS personnalisées, également appelées styles de classe,
définissent les attributs de styles d’une plage ou d’un bloc de texte.
Tous les styles de classe sont précédés d’un point (.). Par exemple, vous
pourriez créer un style de classe appelé .rouge, attribuer le rouge à la
propriété de la couleur de la règle et l’appliquer à du texte dans une
partie de paragraphe déjà pourvu d’un style.
■
Les styles appliqués aux balises HTML redéfinissent la mise en forme
de ces balises, par exemple p ou h1. Lorsque vous créez ou modifiez une
règle CSS pour la balise h1, tout le texte mis en forme à l’aide de cette
balise h1 est immédiatement modifié en conséquence.
■
Les règles du sélecteur CSS (styles avancés) redéfinissent la mise en
forme pour une combinaison particulière d’éléments ou pour d’autres
formes du sélecteur admises par CSS (par exemple, le sélecteur td h2
s’applique chaque fois qu’un en-tête h2 apparaît dans une cellule de
tableau. Les styles avancés peuvent également redéfinir la mise en forme
pour des balises qui contiennent un attribut id (identifiant) (par
exemple, les styles définis par #myStyle s’appliquent à toutes les balises
qui contiennent la paire valeur-attribut id="myStyle").
Pour plus d’informations, voir A propos du formatage de texte dans
Dreamweaver dans Utilisation de Dreamweaver.
Étude de CSS 333
Créez une nouvelle feuille de
style
D’abord, vous allez créer une feuille de style externe qui contient une règle
CSS définissant un style pour du texte de paragraphe. Quand vous créez
des styles dans une feuille de style externe, vous pouvez contrôler l’aspect
de pages Web multiples à partir d’un même emplacement au lieu d’avoir à
définir des styles pour chacune des pages.
1.
Choisissez Fichier> Nouveau.
2.
Dans la boîte de dialogue Nouveau document, Sélectionnez Page de
base dans la colonne Catégorie, sélectionnez CSS dans la colonne Page
de base et cliquez sur Créer.
Une feuille de style vierge apparaît dans la fenêtre de document. Les
boutons pour les modes Création et Code sont désactivés. Les feuilles
de style CSS sont des fichiers de texte uniquement, c’est-à-dire que leur
contenu n’est pas prévu pour être affiché dans un navigateur.
334 Didacticiel : Mise en forme de votre page avec CSS
A S A VOI R . . .
Compléments sur les règles CSS
Les règles CSS peuvent se trouver aux emplacements suivants :
Les feuilles de style CSS externes regroupent des règles CSS enregistrées dans un fichier .css externe
distinct (pas dans un fichier HTML). Ce fichier est lié à une ou plusieurs pages d’un site Web à l’aide d’un
lien situé dans la head section d’un document.
Les feuilles de style CSS internes (ou incorporées) regroupent les règles CSS incluses dans une balise
style dans la headsection d’un document HTML. Ainsi, l’exemple suivant définit la taille de police pour
l’ensemble du texte dans le document mis en forme à l’aide de la balise paragraphe :
<premier>
<style>
p{
taille de police : 80px
}
</style>
</premier>
Les styles en ligne sont définis avec des instances spécifiques de balises dans un document HTML. Par
exemple, <p style=“taille de police : 9px”> définit la taille de la police uniquement pour le
paragraphe mis en forme avec la balise qui contient le style incorporé.
Dreamweaver restitue la plupart des attributs de style appliqués directement dans la fenêtre de
document. Vous pouvez également afficher un aperçu des styles appliqués au document dans une
fenêtre de navigateur. Certains attributs de style CSS sont représentés différemment dans Microsoft
Internet Explorer, Netscape Navigator, Opera et Apple Safari.
3.
Enregistrez la page (Fichier > Enregistrer) sous le nom
cafe_townsend.css.
Quand vous enregistrez la feuille de style, assurez-vous que vous le
faites dans le dossier cafe_townsend (le dossier racine de votre site
Web).
4.
Saisissez le code suivant dans la feuille de style :
p{
famille de polices : Verdana, sans-serif;
taille de police : 11px;
couleur : #000000;
Hauteur de ligne : 18px;
bourrage : 3px;
}
Au fur et à mesure que vous tapez, Dreamweaver vous propose des
options de code pour vous aider à terminer votre saisie. Appuyez sur
Entrée (Windows) ou Retour (Macintosh) quand vous apercevez le
code que Dreamweaver vous propose pour terminer la saisie à votre
place.
Créez une nouvelle feuille de style 335
N’oubliez pas d’inclure un point-virgule à la fin de chaque ligne, après
les valeurs de propriété.
Quand vous aurez terminé, le code devrait avoir l’aspect suivant :
CON S EI L
5.
Pour plus
d’informations sur
une quelconque
propriété CSS,
reportez-vous au
guide de référence
O’Reilly qui est livré
avec Dreamweaver.
Pour afficher le
guide, choisissez
Aide > Référence et
sélectionnez O’Reilly
- Référence CSS
dans le menu
déroulant du
panneau Référence.
Enregistrez la feuille de style.
Ensuite, vous allez associer la feuille de style à la page index.html.
Associez une feuille de style
Quand vous associez une feuille de style à une page web, les règles définies
dans la feuille sont appliquées aux éléments correspondants de la page. Par
exemple, quand vous associez la feuille de style de cafe_townsend.css à la
page index.html, tout texte de paragraphe (texte mis en forme avec la balise
<p> dans le code HTML) est mis en forme suivant la règle CSS que vous
avez définie.
336 Didacticiel : Mise en forme de votre page avec CSS
1.
Dans la fenêtre de document, ouvrez le fichier index.html de Cafe
Townsend. (Vous pouvez cliquer sur sa balise si elle est déjà ouverte.)
2.
Sélectionnez le texte du premier paragraphe que vous avez collé dans la
page au Chapitre 11, Didacticiel : Ajout de contenu aux pages.
3.
Regardez dans l’inspecteur de propriété et assurez-vous que le
paragraphe est mis en forme avec la balise paragraphe.
Si le menu déroulant Mise en forme dans l’inspecteur de propriété
indique « Paragraphe », alors le paragraphe est mis en forme avec la
balise paragraphe. Si le menu déroulant Mise en forme dans
l’inspecteur de propriété indique « Aucun », sélectionnez Paragraphe
pour mettre le paragraphe en forme.
4.
Répétez l’étape 3 pour le deuxième paragraphe.
Associez une feuille de style 337
5.
Dans l’angle inférieur droit du panneau Styles CSS (Fenêtre > Styles
CSS), cliquez sur le bouton Attachez une feuille de style.
6.
Dans la boîte de dialogue Associer feuille de style externe, cliquez sur
Naviguer et naviguez jusqu’au fichier cafe_townsend.css que vous avez
créé à la section précédente.
7.
Cliquez sur OK.
Le texte dans fenêtre de document est mis en forme suivant la règle
CSS de la feuille de style externe.
338 Didacticiel : Mise en forme de votre page avec CSS
Explorez le panneau Styles CSS
Il vous permet de suivre les règles CSS et les propriétés qui affectent un
élément de page sélectionné (mode Current (ou Sélection)), ou les règles et
les propriétés qui affectent l’ensemble d’un document (mode All (ou
Tout)). Il vous permet également de modifier les propriétés CSS sans ouvrir
une feuille de style externe.
1.
Assurez-vous que la page index.html est ouverte dans la fenêtre de
document.
2.
Dans le panneau Styles CSS (Fenêtre > Styles CSS), cliquez sur Tout
dans la partie supérieure du panneau et vérifiez vos règles CSS.
En mode Tout, le panneau CSS vous affiche toutes les règles CSS qui
s’appliquent au document actif, qu’elles soient dans une feuille de style
externe ou dans le document lui-même. Vous devriez apercevoir deux
catégories principales dans le volet Toutes les règles : une catégorie de
balise <style> et une catégorie cafe_townsend.css.
3.
Cliquez sur plus (+) pour développer la catégorie de balise <style> si elle
est réduite.
4.
Cliquez sur la règle de corps.
La propriété couleur d’arrière-plan avec une valeur de #000000
apparaît en bas dans le volet Propriétés.
Explorez le panneau Styles CSS 339
R E MA R Q UE
Il vous faudra peut-être réduire un autre panneau, tel que le panneau
Fichiers, pour voir le panneau Styles CSS in extenso. Vous pouvez aussi
modifier la longueur du panneau des Styles CSS en faisant glisser les
bordures entre les volets.
Vous définissez la couleur d’arrière-plan pour la page dans Chapitre 6,
Didacticiel : Création d’une mise en forme de page basée sur un tableau en
utilisant la boîte de dialogue Modifier propriétés de page. Quand vous
définissez ainsi des propriétés de page, Dreamweaver rédige un style
CSS qui est interne au document.
5.
Cliquez sur plus (+) pour développer la catégorie cafe_townsend.css.
6.
Cliquez sur la règle p.
Toutes les propriétés et valeurs que vous avez définies dans la feuille de
style externe pour la règle p apparaissent au bas du volet Propriétés.
7.
Dans le document de fenêtre, cliquez une fois en un endroit quelconque
dans l’un ou l’autre des paragraphes que vous venez de mettre en forme.
8.
Dans le panneau Styles CSS, cliquez sur Sélection dans la partie
supérieure du panneau et vérifiez vos styles CSS. En mode Sélection, le
panneau CSS affiche un récapitulatif des propriétés pour la sélection
active. Les propriétés affichées correspondent aux propriétés pour la
règle p dans la feuille de style externe.
340 Didacticiel : Mise en forme de votre page avec CSS
Dans la prochaine section, vous utiliserez le panneau Styles CSS pour créer
une nouvelle règle. Utiliser le panneau Styles CSS pour créer une nouvelle
règle est beaucoup plus facile que saisir la règle à la main, comme vous
l’avez fait quand vous avez créé une feuille de style externe au départ.
Créez une nouvelle règle CSS
Dans cette section, vous allez utiliser le panneau Styles CSS pour créer une
règle CSS personnalisée ou un style de classe. Les styles de classe vous
permettent de définir des attributs de style pour une plage ou un bloc de
texte quelconques. Ils peuvent être appliqués à n’importe quelle balise
HTML. Pour plus d’informations sur différents types de règles CSS, voir
Étude de CSS, page 332.
1.
Dans le panneau Styles CSS, cliquez sur Nouvelle règle de CSS dans
l’angle inférieur droit du panneau.
2.
Dans la boîte de dialogue Nouvelle règle CSS, Sélectionnez Classe à
partir des options du Sélecteur de types. Il doit être sélectionné par
défaut.
3.
Tapez .gras dans la zone de texte Nom.
Assurez-vous de saisir le point (.) devant le mot « gras ». Tous les styles
de classe sont précédés d’un point (.).
Créez une nouvelle règle CSS 341
4.
Sélectionnez cafe_townsend.css du menu déroulant Définir dans. Il doit
être sélectionné par défaut.
5.
Cliquez sur OK.
La boîte de dialogue Définir une règle CSS apparaît, vous indiquant
ainsi que vous êtes en train de créer un style de classe appelé .gras dans
le fichier cafe_townsend.css.
6.
Dans la boîte de dialogue Définition de règle CSS, procédez de la
manière suivante :
■
Dans la zone de texte Police, tapez Verdana, sans-serif.
■
Dans la zone de texte Taille, tapez 11 et sélectionnez pixels du menu
déroulant tout de suite à droite.
■
Dans la zone de texte Hauteur de ligne, tapez 18 et sélectionnez pixels
du menu déroulant tout de suite à droite.
■
Sélectionnez gras dans le menu déroulant Graisse.
■
Saisissez #990000 dans la zone de texte Couleur.
.
342 Didacticiel : Mise en forme de votre page avec CSS
Cliquez sur OK.
8.
Cliquez sur All (Tout), situé en haut du panneau Styles CSS.
9.
Cliquez sur le bouton plus (+) en regard de la catégorie
cafe_townsend.css si celle-ci n’est pas développée.
C ONS E I L
7.
Vous vous apercevrez que Dreamweaver a ajouté le style de classe .gras à
la liste des règles définies dans la feuille de style externe. Si vous cliquez
sur la règle .gras dans le volet Toutes les règles, les propriétés de la règle
apparaissent dans le volet Propriétés. La nouvelle règle apparaît aussi
dans le menu déroulant Style dans l’inspecteur de propriétés.
Appliquez un style de classe à un
texte
Pour plus
d’informations sur
une quelconque
propriété CSS,
reportez-vous au
guide de référence
O’Reilly qui est livré
avec Dreamweaver.
Pour afficher le
guide, choisissez
Aide > Référence et
sélectionnez O’Reilly
- Référence CSS
dans le menu
déroulant du
panneau Référence.
Maintenant que vous avez créé une règle de classe, vous allez l’appliquer à
un texte de paragraphe.
1.
Dans la fenêtre de document, sélectionnez les six premiers mots dans le
texte du premier paragraphe : Café Townsend's visionary chef.
2.
Dans l’inspecteur de propriétés (Fenêtre > Propriétés), choisissez gras
dans le menu déroulant Style.
Le style de classe gras est appliqué à votre texte.
Appliquez un style de classe à un texte 343
3.
Répétez l’étape 2 pour appliquer le style de classe gras aux six premiers
mots du deuxième paragraphe.
4.
Enregistrez votre page.
Mettez en forme le texte de la
barre de navigation
Ensuite, vous utiliserez CSS pour appliquer des styles au texte de lien pour
la barre de navigation. Beaucoup de pages Web utilisent les images de
rectangles colorés avec du texte à l’intérieur pour créer une barre de
navigation, mais avec CSS vous n’avez besoin que de texte de lien et un peu
de mise en forme. Utilisation de l’affichage : propriété de bloc et
en définissant une largeur pour le bloc, vous pouvez effectivement créer des
rectangles sans faire appel à des images séparées.
Créez une nouvelle règle pour la navigation
1.
Ouvrez le fichier cafe_townsend.css s’il ne l’est pas déjà ou cliquez sur
son onglet pour le voir.
2.
Définissez une nouvelle règle en saisissant le code suivant dans le fichier,
après le style de classe .gras :
.navigation {
}
Il s’agit d’une règle vide.
344 Didacticiel : Mise en forme de votre page avec CSS
Le code dans le fichier devrait ressembler à l’exemple suivant :
3.
Enregistrez le fichier cafe_townsend.css.
Ensuite, vous utiliserez le panneau de styles CSS pour ajouter des
propriétés à la règle.
4.
Ouvrez le fichier index.html s’il ne l’est pas déjà.
Mettez en forme le texte de la barre de navigation 345
5.
Dans le panneau CSS, assurez-vous que le mode Tous est sélectionné,
sélectionnez la nouvelle règle .navigation et cliquez sur Modifier le style
dans l'angle inférieur droit du panneau.
6.
Dans la boîte de dialogue Définition de règle CSS, procédez de la
manière suivante :
■
■
Dans la zone de texte Police, tapez Verdana, sans-serif.
Sélectionnez 16 dans le menu déroulant Taille et pixels dans le
menu déroulant juste à droite du menu Taille.
■
Sélectionnez Normal dans le menu déroulant Style.
■
Sélectionnez Aucune dans la liste Décoration.
■
Sélectionnez Gras dans le menu déroulant Graisse.
■
Entrez #FFFFFF dans la zone de texte Couleur.
346 Didacticiel : Mise en forme de votre page avec CSS
Cliquez sur OK.
Ensuite, vous utiliserez le panneau de styles CSS pour ajouter quelques
autres propriétés à la règle .navigation.
CON SE IL
7.
Pour plus
d’informations sur
une quelconque
propriété CSS,
reportez-vous au
guide de référence
O’Reilly qui est livré
avec Dreamweaver.
Pour afficher le
guide, choisissez
Aide > Référence et
sélectionnez O’Reilly
- Référence CSS
dans le menu
déroulant du
panneau Référence.
Mettez en forme le texte de la barre de navigation 347
8.
Dans le panneau Styles CSS, assurez-vous que la règle .navigation est
sélectionnée et cliquez sur mode Afficher liste.
Le mode Liste réorganise le volet Propriétés pour afficher une liste
alphabétique de toutes les propriétés disponibles, à la différence du
mode Définir propriétés, le mode précédent, qui n’affiche que celles
que vous avez déjà définies.
9.
Cliquez sur la colonne à la droite de la propriété couleur d’arrièreplan.
Pour voir le libellé entier d’une propriété, placez la souris au-dessus de
la propriété.
348 Didacticiel : Mise en forme de votre page avec CSS
#993300 comme valeur hexadécimale et appuyez sur Entrée
(Windows) ou sur Retour (Macintosh).
10. Tapez
Localisez la propriété affichage (il faudra peut-être faire défiler votre
curseur vers le bas), cliquez une fois sur la colonne de droite et
sélectionnez bloc dans le menu déroulant.
12. Localisez
la propriété bourrage, cliquez sur la colonne de droite, tapez
8px comme valeur et appuyez sur Entrée (Windows) ou sur Retour
(Macintosh).
13.
CON S E I L
11.
Pour voir l’effet de
votre travail sur la
feuille de style
externe, laissez le
fichier
cafe_townsend.css
ouvert dans la
fenêtre de document
pendant que vous
travaillez. Quand
vous faites une
sélection dans le
panneau Styles
CSS, vous vous
apercevrez que
Dreamweaver écrit
du code CSS dans la
feuille de style en
même temps.
Localisez la propriété largeur, cliquez sur la colonne de droite, tapez
140 dans la première zone de texte, sélectionnez pixels dans le menu
déroulant et appuyez sur Entrée (Windows) ou sur Retour (Macintosh).
Mettez en forme le texte de la barre de navigation 349
14. Cliquez sur Afficher propriétés définies pour que les propriétés que vous
avez définies apparaissent dans le volet Propriétés.
15. Cliquez sur le fichier cafe_townsend.css pour l’afficher. Vous verrez que
Dreamweaver a ajouté au fichier toutes les propriétés que vous avez
définies.
16.
Enregistrez le fichier afe_townsend.css et fermez-le.
Vous avez maintenant créé une règle pour mettre le texte de la barre de
navigation en forme. Ensuite, vous appliquerez la règle aux liens
sélectionnés.
350 Didacticiel : Mise en forme de votre page avec CSS
Appliquez la règle
1.
La page index.html étant ouverte dans la fenêtre de document, cliquez
sur le mot cuisine de telle sorte que le point d’insertion soit quelque part
dans le mot.
2.
Dans le sélecteur de balises, cliquez sur la balise <a> la plus à droite.
Cette opération sélectionne la totalité du texte pour la balise <a>
spécifiée, ou le lien.
3.
Dans l’inspecteur de propriétés (Fenêtre > Propriétés), choisissez
navigation dans le menu déroulant Style.
Dans la fenêtre de document, l’aspect du texte cuisine change
complètement. Le texte a la forme d’un bouton de barre de navigation
à présent, conformément aux propriétés de la règle .navigation que
vous avez définie dans la section précédente.
Mettez en forme le texte de la barre de navigation 351
4.
Répétez les étapes 1 à 3 pour chacun des liens individuels dans la barre
de navigation.
Vous devez affecter un style de classe de navigation à chacune des
balises <a> ou du lien, de sorte qu’il est important d’utiliser le sélecteur
de balises pour sélectionner chaque lien individuellement et puis
affecter les styles de classe un à un.
Si vous avez des difficultés dans la mise en forme de texte de lien,
assurez-vous qu’un espace (pas un « retour de chariot ») existe entre
chaque mot du lien. Assurez-vous également que l’espace entre deux
liens n’est pas lui-même lié. Si c’est le cas, sélectionnez soigneusement
l’espace lié, videz la zone de texte Lien dans l’inspecteur de propriétés et
appuyez sur Entrée (Windows) ou sur Retour (Macintosh).
5.
Quand vous aurez fini de mettre en forme tous les mots de la barre de
navigation, enregistrez la page et obtenez un aperçu de votre travail dans
un navigateur (Fichier > Aperçu dans navigateur).
Vous pouvez cliquer sur les liens pour vous assurer qu’ils fonctionnent.
352 Didacticiel : Mise en forme de votre page avec CSS
Ajoutez un effet de survol
À présent, vous ajouterez un effet de survol pour que la couleur d’arrièreplan des blocs de la barre de navigation change toutes les fois que le
pointeur de la souris passe par-dessus l’un des liens. Pour ajouter un effet de
survol, créez une nouvelle règle qui contient la pseudo-classe :survol
1.
Ouvrez le fichier cafe_townsend.css.
2.
Sélectionnez la règle .navigation entière.
3.
Copiez le texte (Editer > copier).
A S A VOI R . . .
Présentation de la pseudo-classe :survol Une pseudo-classe est un moyen d’avoir un effet sur
certains éléments dans un document HTML, basé non pas sur le code HTML du document lui-même,
mais sur des conditions extérieures appliquées par le navigateur Web. Les pseudo-classes peuvent être
dynamiques dans le sens où un élément de la page peut acquérir ou perdre la pseudo-classe tandis qu’un
utilisateur « dialogue » avec le document.
La pseudo-classe :survol crée un changement dans l’élément de page mis en forme quand l’utilisateur
passe la souris par-dessus l’élément. Par exemple, quand la pseudo-classe :survol est ajoutée au style de
classe .navigation (.navigation:survol) pour créer une nouvelle règle, tous les éléments de texte que la
règle .navigation met en forme changent conformément aux propriétés de la règle .navigation:survol.
Mettez en forme le texte de la barre de navigation 353
4.
Cliquez une fois à la fin de la règle et appuyez sur Entrée (Windows) ou
sur Retour (Macintosh) plusieurs fois pour créer des espaces.
5.
Coller (Editer > coller) le texte copié dans l’espace que vous venez de
créer.
6.
Ajouter la pseudo-classe :survol au sélecteur .navigation collé, comme
suit :
354 Didacticiel : Mise en forme de votre page avec CSS
7.
Dans la nouvelle règle .navigation:survol, remplacez la couleur d’arrièreplan active (#993300) par #D03D03.
8.
Enregistrez le fichier et fermez-le.
9.
Ouvrez le fichier index.html dans la fenêtre de document et obtenez un
aperçu de la page dans un navigateur (Fichier > Aperçu dans navigateur).
Quand vous placez la souris par-dessus un lien quelconque, vous
pouvez voir le nouvel effet de survol.
(En option) Centrez le contenu
de la page
Enfin, vous utiliserez le sélecteur de balises pour sélectionner tout le
HTML du document et centrer son contenu.
R E MA R Q UE
Quelques navigateurs, comme l’Explorateur Internet 6, centre le texte de
la page dans le contexte des cellules du tableau quand vous utilisez la
méthode utilisée dans cette section. Si le contenu dans l’aperçu de la page
dans le navigateur ne vous plaît pas, vous pouvez sauter cette section et
laisser le contenu de la page aligné à gauche.
(En option) Centrez le contenu de la page 355
1.
Avec la page index.html ouverte dans la fenêtre de document, cliquez
sur la balise <corps> dans le sélecteur de balises.
En cliquant sur cette balise, on sélectionne tout entre l’ouverture et la
fermeture des balises <corps> de la fenêtre de document. Pour voir la
sélection, cliquez sur mode Code dans la partie supérieure de la fenêtre
de document.
356 Didacticiel : Mise en forme de votre page avec CSS
2.
Dans l’inspecteur des propriétés (Fenêtre > Propriétés), cliquez sur le
bouton Aligner au centre.
Dreamweaver insère des balises CSS <div> qui centrent l’ensemble du
contenu de la page. En mode Création, des pointillés entourent la zone
qui fait l’objet du centrage des balises <div>.
3.
Enregistrez la page.
Votre page est maintenant terminée. La dernière tâche dans la construction
de votre site Web consiste à publier la page. Pour ce faire, vous devez
définir un dossier sur un site distant et télécharger vos fichiers dans ce
dossier vers ce serveur. Pour obtenir des instructions, passez au didacticiel
suivant.
(En option) Centrez le contenu de la page 357
358 Didacticiel : Mise en forme de votre page avec CSS
CHAPITRE 13
Didacticiel : Publication
de votre site
13
Ce didacticiel vous montre comment configurer un site distant avec
Macromedia Dreamweaver 8 et publier vos pages web. Un site distant est
souvent un emplacement dans un ordinateur distant qui fait tourner un
serveur Web et qui conserve des copies de vos fichiers locaux. Les
utilisateurs accèdent au site distant qui tourne sur le serveur Web quand ils
visualisent vos pages dans un explorateur.
Dans ce didacticiel, vous allez accomplir les tâches suivantes :
Etudiez 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
Etudiez les sites distants
L’étape suivante de création d’un site consiste à le publier en téléchargeant
les fichiers vers un dossier distant. Un dossier distant est l’emplacement
dans lequel vous conservez vos 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.
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 travaillez, un serveur intranet de votre société ou
un serveur IIS sur un ordinateur Windows). Si vous ne pouvez accéder à un
serveur de ce type, contactez votre fournisseur d’accès Internet, votre client
ou votre administrateur système.
359
Vous pouvez également choisir d’exécuter un serveur Web sur votre
ordinateur local, par exemple, IIS (Windows) ou Apache (Macintosh).
Pour plus d’informations sur la configuration d’un serveur Web sur votre
ordinateur local, voir Installation d'un serveur Web dans l’Aide ou le PDF
étendu Bien démarrer avec Dreamweaver . Le PDF est disponible sur le site
Web Macromedia www.macromedia.com/go/dw_documentation_fr.
Vous pouvez également choisir d’exécuter un serveur Web sur votre
ordinateur local, par exemple, IIS (Windows) ou Apache (Macintosh).
Pour plus d’informations sur la configuration d’un serveur Web sur votre
ordinateur local, voir Appendix B, Installation d'un serveur Web, page 233.
Les marches à suivre décrites dans ce didacticiel aboutissent à de meilleurs
résultats si votre dossier racine distant est vide. S’il contient déjà des
fichiers, créez un dossier vide dans votre site distant (sur le serveur) et
utilisez ce dernier comme dossier racine distant.
Vous aurez également besoin d’un site local configuré avant de poursuivre.
Pour plus d’informations, consultez le Didacticiel : Configuration de votre
site et des fichiers de projet, page 159.
Pour plus d’informations sur les sites Dreamweaver, voir Chapitre 2,
Configuration d'un site Dreamweaver dans Utilisation de Dreamweaver.
Configurez un dossier distant
Vous allez maintenant configurer un dossier distant pour pouvoir publier
vos pages Web. Il porte le même nom que le dossier local car votre site
distant sera une copie conforme de votre site local. Cela signifie que les
fichiers et les sous-dossiers que vous transférerez dans votre dossier distant
seront des copies des fichiers et des sous-dossiers créés localement.
1.
Dans votre site distant (sur le serveur), créez un dossier vide dans le
dossier racine Web pour le serveur.
Appelez-le cafe_townsend (du même nom que votre dossier racine
local).
360 Didacticiel : Publication de votre site
A S A VO I R . ..
Création d’un dossier distant avec Dreamweaver Si Dreamweaver constitue votre seul moyen
d’accès au serveur distant, vous ne serez pas en mesure de créer un fichier vide dessus tant que vous
n’aurez pas terminé les réglages dans Dreamweaver et établi une connexion. Si c’est le cas, vous pouvez
soit définir votre répertoire hôte comme étant votre dossier distant, soit créer un dossier distant après
avoir établi une connexion avec le serveur. Dans un cas comme dans l’autre, continuez à suivre les
instructions de ce didacticiel jusqu’à ce que vous soyez connecté au serveur distant. Une fois la
connexion obtenue, vous pouvez utiliser le panneau Fichiers Dreamweaver pour créer un nouveau
dossier distant.
Quand vous avez cette connexion avec un serveur distant, le panneau Fichiers affiche tous les fichiers sur
ce serveur en Mode distant (tout comme le Mode local avec les fichiers locaux de votre ordinateur). Pour
afficher le Mode distant, sélectionnez-le dans le menu déroulant dans la partie supérieure du panneau
Fichiers ou cliquez sur Développer/Réduire dans la barre d’outils du panneau Fichiers. En cliquant sur
Développer/Réduire, le panneau Fichiers affiche à la fois le Mode local et le Mode distant.
Pour ajouter un fichier vide dans le Mode distant, affichez d’abord le Mode distant en utilisant l’une des
méthodes décrites auparavant. (Si vous ne voyez pas votre connexion, cliquez sur Actualiser dans la
barre d’outils du panneau Fichiers.) Quand vous avez constaté que vous êtes connecté au serveur Web,
cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Option enfoncée
(Macintosh) dans le Mode distant et sélectionnez Nouveau dossier.
Bouton Actualiser
Développer/Réduire
Pour plus d’informations, voir Chapitre 4, Gestion des fichiers dans Utilisation de Dreamweaver.
2.
Dans Dreamweaver, sélectionnez Site > Gérer les sites.
3.
Dans la boîte de dialogue Gérer les sites, sélectionnez le site Cafe
Townsend.
Si vous n’avez pas défini le site Cafe Townsend, créez un dossier local
pour le site avant de poursuivre. Pour plus d’informations, consultez le
Didacticiel : Configuration de votre site et des fichiers de projet, page 159.
4.
Cliquez sur Edition.
5.
Dans la boîte de dialogue Définition de site, cliquez sur l’onglet Avancé
si les réglages correspondants ne paraissent pas.
6.
Sélectionnez la catégorie Info distante dans la liste de gauche.
Configurez un dossier distant 361
7.
Sélectionnez une option d’accès.
Les méthodes les plus courantes de connexion à un serveur sur Internet
sont le FTP et le SFTP. La méthode la plus courante de connexion à un
serveur sur votre intranet ou à votre ordinateur local (si celui-ci est
utilisé comme serveur Web) est Local/Réseau. Dans l’incertitude,
demandez à l’administrateur système du serveur.
Pour plus d’informations, cliquez sur le bouton Aide de la boîte de
dialogue.
8.
Si vous sélectionnez FTP, utilisez les options suivantes :
■
■
Saisissez le nom d’hôte du serveur (par exemple,
ftp.macromedia.com).
Dans la zone de texte du répertoire hôte, saisissez le chemin d’accès
sur le serveur du dossier racine FTP à celui du site distant
(cafe_townsend). En cas de doute, consultez votre administrateur
système.
Dans bien des cas, cette zone de texte doit rester vierge.
■
■
Indiquez votre nom d’utilisateur et votre mot de passe dans les
zones appropriées.
Si votre serveur prend en charge le SFTP, sélectionnez l’option
Utiliser Secure FTP (SFTP).
■
Cliquez sur Tester pour tester vos paramètres de connexion.
■
En cas d’échec, consultez votre administrateur système.
Pour plus d’informations, cliquez sur le bouton Aide de la boîte de
dialogue.
9.
Si vous sélectionnez Local/Réseau, cliquez sur l’icône de dossier se
trouvant près de la zone de texte pour rechercher le dossier racine du site
distant.
Pour plus d’informations, cliquez sur le bouton Aide de la boîte de
dialogue.
10. Cliquez
sur OK.
Dreamweaver crée une connexion avec le dossier distant.
11.
362 Didacticiel : Publication de votre site
Cliquez sur Terminé pour fermer la boîte de dialogue Gérer les sites.
Téléchargez vos fichiers locaux
Après avoir défini vos dossiers locaux et distants, vous pouvez transférer vos
fichiers du dossier local vers le serveur Web. Il est impératif de télécharger
vos pages pour les rendre accessibles, même si le serveur Web est exécuté
sur votre ordinateur local.
1.
Dans le panneau Fichiers (Fenêtre > Fichiers), sélectionnez le dossier
racine local du site (cafe_townsend).
2.
Cliquez sur l’icône représentant une flèche bleue (Placer les fichiers)
dans la barre d’outils du panneau Fichiers.
.
3.
Quand Dreamweaver vous demande si vous voulez placer le site entier,
cliquez sur OK.
Dreamweaver copie tous les fichiers dans le dossier distant défini dans
Configurez un dossier distant, page 360. Cette opération peut prendre
quelque temps puisque Dreamweaver doit télécharger tous les fichiers
du site vers le serveur distant.
4.
Ouvrez votre site distant dans un navigateur pour vous assurer que le
transfert s’est bien déroulé.
Téléchargez vos fichiers locaux 363
Résolution des problèmes de
configuration du dossier distant
(en option)
Un serveur Web peut être configuré de différentes façons. La liste suivante
vise à vous expliquer certains problèmes courants que vous pouvez avoir en
configurant un dossier distant et à vous aider à les résoudre :
■
La mise en œuvre FTP de Dreamweaver peut ne pas fonctionner
correctement avec certains serveurs proxy, pare-feu multiniveaux et
autres formes d’accès indirect à un serveur.
Si vous avez des problèmes d’accès en FTP, demandez l’aide de votre
administrateur système.
■
Pour la mise en œuvre FTP de Dreamweaver, il est indispensable de se
connecter au dossier racine du système distant (Dans de nombreuses
applications, vous pouvez vous connecter à n’importe quel répertoire
distant, puis naviguer dans le système de fichiers distants pour
rechercher un répertoire).
Veillez à indiquer le dossier racine du système distant comme répertoire
hôte.
Si vous avez des problèmes de connexion et avez spécifié le répertoire
hôte avec une seule barre oblique (/), c’est peut-être qu’il vous faut
spécifier un chemin relatif entre le répertoire auquel vous vous
connectez et le dossier racine distant.
Si, par exemple, le dossier racine distant est un répertoire de niveau
supérieur, vous devez parfois spécifier ../../ pour le répertoire hôte.
■
Par ailleurs, les noms de dossiers et de fichiers qui contiennent des
espaces ou des caractères spéciaux peuvent souvent occasionner des
problèmes à l’occasion d’un transfert sur un site distant.
Utilisez des traits de soulignement à la place des espaces, et évitez, dans
la mesure du possible, d’utiliser des caractères spéciaux pour les noms
de fichiers et de dossiers. En particulier, les deux points (:), barres
obliques, virgules et apostrophes sont à éviter dans les noms de fichiers
et de dossiers. Il arrive que la présence de caractères spéciaux dans les
noms de fichiers ou de dossiers empêche Dreamweaver de créer un plan
du site.
364 Didacticiel : Publication de votre site
■
En cas de problème avec un nom de fichier long, raccourcissez ce nom.
Sur Macintosh, les noms de fichiers ne peuvent pas compter plus de
31 caractères.
■
Notez que certains serveurs utilisent ce qui est appelé, suivant le
système d’exploitation, des liens symboliques (Unix), des raccourcis
(Windows) ou des alias (Macintosh), pour connecter un dossier situé
en un point du disque du serveur à un autre dossier situé ailleurs.
Par exemple, le sous-répertoire public_html de votre répertoire
principal sur le serveur peut n’être qu’un simple lien pointant sur une
toute autre partie du serveur. Dans la plupart des cas, ces alias n’ont pas
d’effet négatif sur votre capacité à vous connecter au dossier ou
répertoire approprié, mais si vous ne pouvez vous connecter qu’à une
partie du serveur, il s’agit peut-être d’un problème d’alias.
■
Si vous découvrez un message d’erreur du type « impossible de placer le
fichier », votre dossier distant peut être saturé. Pour plus
d’informations, consultez le journal FTP.
R E MA R Q UE
En règle générale, si vous avez un problème avec un transfert FTP,
consultez le journal FTP en sélectionnant Site > Avancé> Journal FTP.
Résolution des problèmes de configuration du dossier distant (en option) 365
366 Didacticiel : Publication de votre site
CHAPITRE 14
Didacticiel : Paramétrage de votre site
Web pour les utilisateurs de Contribute
14
Macromedia Contribute vous permet, ainsi qu’à vos utilisateurs, de gérer,
répartir et contrôler un contenu placé sur le Web. Vous pouvez facilement
vous connecter au site Web avec Contribute, et envoyer des clés de
connexion pour attribuer à vos utilisateurs des paramètres qui leur
permettent de modifier le site Web. En déterminant des rôles utilisateur,
vous pouvez accorder à vos utilisateurs plus ou moins de pouvoir de
modification.
Dans ce didacticiel, vous allez accomplir les tâches suivantes :
Passer votre 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
Créez un rôle utilisateur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 371
Modification des paramètres d’un rôle . . . . . . . . . . . . . . . . . . . . . .372
Définition des paramètres administratifs . . . . . . . . . . . . . . . . . . . .370
Créer une clé de connexion et l’envoyer à des utilisateurs . . . . .375
367
Passer votre tâche en revue
CON S EI L
Si vous ne pouvez
pas accéder à un
serveur Web, vous
pouvez toujours
apprendre à utiliser
Contribute.
Consultez une
démonstration de
modification d’un
site Web,
d’attribution
d’autorisations et de
création de clé de
communication sur
le site
www.macromedia.c
om/go/
captivate_demo.
CO NS E I L
Avant de vous
connecter à votre
site Web, il est
judicieux de vérifier
les autorisations
associées à votre
réseau et votre
serveur ainsi que la
structure de
répertoires de votre
site Web. Pour plus
d’informations, voir
Déploiement de
Contribute en
entreprises et dans
les services dans
Utilisation et
administration de
Contribute.
Dans ce didacticiel vous allez utiliser Contribute pour vous connecter à
votre site Web et envoyer des clés de connexion pour permettre aux autres
de modifier le site Web. Vous allez également définir des rôles utilisateur et
modifier les paramètres associés aux rôles afin de contrôler le niveau de
modification du site Web pour lequel vous autorisez ces utilisateurs.
Si vous n’avez pas encore défini un site distant dans Dreamweaver et chargé
vos fichiers locaux, vous devez le faire avant de démarrer. Le site distant que
vous définissez doit être sur un serveur Web. Pour toutes instructions,
reportez-vous aux sections Configurez un dossier distant, page 360 et
Téléchargez vos fichiers locaux, page 363.
En savoir plus sur les connexions
et l’administration de site Web
avec Contribute
Une connexion de site Web Contribute est définie lorsque vous entrez
l’adresse Web et le chemin pointant Contribute vers le dossier contenant
votre site Web. Un site Web Contribute est constitué du dossier auquel
vous vous connectez et de tous les dossiers et fichiers qu’il contient. Vous
pouvez établir de multiples connexions à différents sites Web ou au sein du
même site Web physique. Chaque connexion que vous créez est traitée
comme un site Web séparé dans Contribute.
Lorsque vous établissez manuellement une connexion à un site Web, vous
pouvez devenir l’administrateur de ce site Web. En tant
qu’administrateurContribute, 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 utilisateur, qui déterminent qui
peut modifier le contenu d’un site Web et ce qu’il peut modifier.
Les utilisateurs de Contribute gèrent le site Web à l’aide en appliquant un
flux de travail de type afficher-modifier-publier. Vous pouvez intégrer les
paramètres de connexion à votre site Web dans un fichier de clés de
connexion à envoyer aux utilisateurs pour leur permettre de se connecter
facilement au site Web sans avoir besoin de connaître les informations
techniques concernant l’emplacement physique du site Web.
368 Didacticiel : Paramétrage de votre site Web pour les utilisateurs de Contribute
Connexion à un site Web en tant
qu’administrateur
Une fois que vous avez créé le site web Cafe Townsend, vous pouvez utiliser
Contribute pour vous connecter le site web.
R EM A R QU E
Pour plus d’informations sur les site Web Contribute, consultez la section
En savoir plus sur les connexions et l’administration de site Web avec
Contribute, page 368.
1.
Dans Contribute, sélectionnez Edition > Mes connexions ou
Contribute > Mes connexions (Macintosh).
La boîte de dialogue Mes connexions vous permet de créer et de gérer
vos connexions Contribute.
R EMA R Q U E
Si vous n’avez pas encore défini un site distant dans Dreamweaver et
chargé vos fichiers locaux, vous devez le faire avant de démarrer. Pour
toutes instructions, reportez-vous aux sections Configurez un dossier
distant, page 360 et Téléchargez vos fichiers locaux, page 363.
2.
Dans la boîte de dialogue Mes connexions, cliquez sur le bouton Créer .
3.
Dans l’assistant de connexion, cliquez sur Suivant.
4.
Entrez l’adresse du site Web Cafe Townsend, puis cliquez sur Suivant.
Il s’agit de l’URL que vous entrez dans un navigateur pour afficher le
site Web - par exemple, www.monsite.com
5.
Choisissez une méthode d’accès pour vous connecter au site Web.
6.
Entrez le chemin au serveur sur lequel vous avez créé le site distant pour
le site Web Cafe Townsend, puis cliquez sur Suivant.
7.
Entrez votre nom et votre adresse électronique, puis cliquez sur Suivant.
8.
Dans l’écran Résumé, vérifiez que les paramètres de connexion sont
corrects, puis cliquez sur Terminer pour achever la création de la
connexion.
CO NS E I L
Cet assistant vous guide au long des étapes de configuration d’une
nouvelle connexion à un site Web.
Si nécessaire, vous
pouvez à tout
moment cliquer sur
Retour ou Précédent
pour revenir à l’écran
précédent. Si vous
avez besoin de plus
d’informations
concernant la
réalisation d’un
écran, cliquez sur le
bouton Aide.
Contribute crée une connexion au site Web Cafe Townsend.
Connexion à un site Web en tant qu’administrateur 369
Une fois que Contribute a réussi à créer une connexion au site Web,
l’assistant de connexion se ferme et la page principale du site Web
s’affiche dans le navigateur Contribute.
Définition des paramètres
administratifs
Maintenant que vous êtes connecté au site Web Cafe Townsend et que
vous vous êtes défini en tant qu’administrateur, vous pouvez définir
certains paramètres administratifs. Les paramètres administratifs de
Contribute rassemblent les paramètres qui s’appliquent à l’ensemble des
utilisateurs de votre site Web, et pas uniquement à des rôles spécifiques.
1.
Sélectionnez Edition > Administrer les sites Web (Windows) ou
Contribute > Administrer les sites (Macintosh), puis sélectionnez le site
Web Cafe Townsend dans le sous-menu.
2.
Cliquez sur Oui dans la boîte de dialogue vous invitant à devenir
l’administrateur du site Web, entrez un mot de passe administrateur
pour le site Web, confirmez-le, puis cliquez sur OK.
3.
Dans la boîte de dialogue Administrer le site Web, sélectionnez la
catégorie Restaurations à gauche.
4.
Sélectionnez Activer les restaurations pour activer les restaurations.
Les pages de restauration sont des versions de restauration de chaque
page Web que vous publiez avec Contribute.
370 Didacticiel : Paramétrage de votre site Web pour les utilisateurs de Contribute
5.
Augmentez le nombre de versions que vous voulez conserver de chaque
page entre 3 et 5.
Dans ce didacticiel, vous ne modifiez que les paramètres de restauration,
mais il existe plusieurs autres catégories associés à davantage de paramètres
administratifs.
Pour le moment, laissez ouverte la boîte de dialogue Administrer le site
Web. Ensuite, vous allez créer un rôle utilisateur.
Créez un rôle utilisateur
Lorsque les utilisateurs Contribute se connectent à un site Web, ils sont
invités à indiquer à quel rôle ils appartiennent. Vous allez créer un rôle
pour les personnes qui ont besoin de mettre à jour le menu du site web
exemple Cafe Townsend.
1.
Sélectionnez Edition > Administrer les sites Web (Windows) ou
Contribute > Administrer les sites (Macintosh), puis sélectionnez le site
Web Cafe Townsend dans le sous-menu.
2.
Cliquez sur Oui dans la boîte de dialogue vous invitant à devenir
l’administrateur du site Web, entrez un mot de passe administrateur
pour le site Web, confirmez-le, puis cliquez sur OK.
Dans la boîte de dialogue Administrer le site Web, vous voyez que trois
rôles par défaut sont définis pour Contribute : Administrateur, Editeur
et Auteur.
Vous allez créer un nouveau rôle pour les chefs du Cafe Townsend.
3.
Cliquez sur le bouton Créer un nouveau rôle.
Créez un rôle utilisateur 371
4.
Dans la boîte de dialogue Créer un nouveau rôle, sélectionnez le rôle
Editeur dans la liste Créer un nouveau rôle à partir de la copie de.
La sélection d’un rôle existant comme base d’un nouveau rôle vous
permet de réutiliser les paramètres du rôle sélectionné. Vous pouvez
modifier les paramètres du nouveau rôle selon vos besoins.
5.
Dans le champ textuel, entrez Chef comme nom de votre nouveau rôle,
puis cliquez sur OK.
Le rôle Chef apparaît désormais dans la liste des noms de rôles de la
boîte de dialogue Administrer le site Web.
Laissez cette boîte de dialogue ouverte. Ensuite, vous allez modifier les
paramètres du rôle Chef.
Modification des paramètres
d’un rôle
Vous êtes maintenant sur le point de déterminer à quels dossiers les
utilisateurs possédant le rôle Chef peuvent accéder et quel genre de
modifications les utilisateurs peuvent apporter au site Web Cafe Townsend.
1.
Dans la boîte de dialogue Administrer le site Web, sélectionnez le rôle
Chef dans la liste des noms de rôle.
2.
Cliquez sur le bouton Modifier les paramètres de rôle.
372 Didacticiel : Paramétrage de votre site Web pour les utilisateurs de Contribute
3.
Dans la boîte de dialogue de modification des paramètres du rôle Chef,
dans la catégorie Général, effectuez les opérations suivantes :
a.
Sélectionnez Autoriser des utilisateurs à publier des fichiers pour
permettre au chef de publier le menu après y avoir apporté des
modifications.
b.
Dans la boîte de texte de description du rôle, entrez Les utilisateurs
de ce rôle peuvent modifier et publier ce menu.
4.
Sélectionnez la catégorie Accès au dossier/fichier dans la liste située sur
la gauche.
5.
Sélectionnez Autoriser la modification uniquement dans ces dossiers.
Dans la boîte de dialogue d’avertissement, cliquez sur OK pour
poursuivre.
6.
Cliquez sur le bouton Ajouter un dossier.
7.
Dans la boîte de dialogue Choisir un dossier, double-cliquez sur le
dossier Cafe Townsend dans la fenêtre, double-cliquez sur le dossier des
images, puis double-cliquez sur le dossier menu_images.
8.
Cliquez sur le bouton Choisir « menu_images » en bas.
Modification des paramètres d’un rôle 373
9.
C ONS E I L
Vous allez autoriser
les Chefs à ajouter
des images au site,
mais si vous vouliez
limiter les utilisateurs
à la modification de
texte uniquement,
vous pouviez
sélectionner l’option
Autoriser
uniquement la
modification et la
mise en forme du
texte dans la section
Restrictions de
modification
générales.
Dans la boîte de dialogue de modification des paramètres du rôle
« Chef », sélectionnez la catégorie Modification dans la liste située à
gauche.
10. Dans
la section Autres options de modification, sélectionnez Nécessite
le texte ALT pour les images.
11.
Sélectionnez la catégorie Actifs partagés dans la liste situé sur la gauche.
Les actifs partagés sont des images, du contenu Macromedia Flash ou
des articles de la bibliothèque Macromedia Dreamweaver
communément utilisés. Si ces éléments sont des actifs partagés, les
utilisateurs bénéficiant du rôle Chef pourront les trouver et les insérer à
leurs menus plus facilement.
12. Cliquez
sur le bouton Ajouter et choisissez Image dans le menu
contextuel.
13.
Dans la boîte de dialogue Choisir une image, double-cliquez sur le
dossier Cafe Townsend dans la fenêtre, double-cliquez sur le dossier des
images, puis double-cliquez sur le dossier menu_images.
14. Cliquez
sur le bouton Sélectionner tous les fichiers du dossier.
15. Cliquez
sur OK.
16.
Dans la boîte de dialogue Propriétés de l’actif partagé, exécutez les
actions suivantes :
a.
Cliquez sur la colonne de texte ALT à côté de l’image special_pasta.
b.
Entrez Entrez Image of Friday pasta special.
c.
Ensuite, cliquez colonne de texte ALT sous l’image special_salmonl.
d.
Entrez Image du saumon spécial du samedi.
374 Didacticiel : Paramétrage de votre site Web pour les utilisateurs de Contribute
17.
e.
Ensuite, cliquez colonne de texte ALT sous l’image
special_vegetarian.
f.
Entrez Image du plat spécial végétarien du samedi.
g.
Cliquez sur OK.
Dans la boîte de dialogue de modification des paramètres du rôle Chef,
cliquez sur OK pour sauvegarder vos modifications pour le rôle Chef.
La boîte de dialogue se ferme et vous renvoie à la boîte de dialogue
Administrer le site Web.
Laissez cette boîte de dialogue ouverte. Ensuite, vous allez créer une clé de
connection permettant aux utilisateurs dont le rôle est Chef de se connecter
au site Web et de lui apporter des modifications.
Créer une clé de connexion et
l’envoyer à des utilisateurs
Contribute vous permet d’intégrer des informations de connexion au site
Web dans une clé de connexion que vous pouvez envoyer à d’autres
utilisateurs. Les utilisateurs doivent simplement double-cliquer sur le
fichier de clé de connexion pour vous connecter au site Web et commencer
à modifier.
1.
Dans la boîte de dialogue Administrer le site Web, cliquez sur le bouton
Envoyer la clé de connexion.
2.
Dans l’assistant Connexion, sélectionnez Oui pour créer un clé de
connexion avec les mêmes informations de connexion que votre
connexion en cours.
3.
Cliquez sur Suivant.
4.
Sélectionnez le rôle Chef, puis cliquez sur Suivant.
5.
Sélectionnez Enregistrer sur l’ordinateur local.
Pour les besoins de ce didacticiel, vous allez enregistrer la clé de
connexion sans l’envoyer réellement aux utilisateurs. Si vous
sélectionnez l’option messagerie électronique, Contribute ouvre
l’application de messagerie électronique pour vous permettre d’envoyer
la clé aux utilisateurs.
Créer une clé de connexion et l’envoyer à des utilisateurs 375
6.
Entrez un mot de passe dont vous vous souviendrez, puis entrez le mot
de passe à nouveau.
Si vous vouliez réellement rendre cette clé disponible aux utilisateurs,
vous devriez leur faire connaître ce mot de passe.
7.
Cliquez sur Suivant.
8.
Vérifier l’écran récapitulatif, puis cliquez sur Terminer.
9.
Dans la boîte de dialogue Exporter la connexion de clé, accédez à votre
bureau.
10. Cliquez
11.
sur Enregistrer.
Dans la boîte de dialogue Administrer le site Web, cliquez sur Fermer
pour quitter la boîte de dialogue et enregistrer vos modifications.
Vous avez ainsi configuré Contribute pour la modification du site Web
Cafe Townsend et créé un rôle utilisateur. Et vous avez constaté à quel
point il est facile de créer des clés de connexion pour l’envoyer aux
utilisateurs pour qu’ils vous aident à gérer votre site Web.
376 Didacticiel : Paramétrage de votre site Web pour les utilisateurs de Contribute
Index
A
accès à la documentation
Contribute 35
Contribute et FlashPaper 34
Dreamweaver 22
Fireworks 32
Flash 26
accessibilité de l’environnement auteur Flash 110
accrochage
à la grille 93
aux guides 91
Accrocher à la grille, commande (dans Flash) 93
Accrocher aux guides, commande (dans Flash) 91
achat de manuels d’aide imprimés 47
actifs FreeHand, création 149
actifs, ajout à un site 161
activation des produits Studio 18
Affichage des images, bouton (dans Flash) 75
Affichage des images, menu (dans Flash) 75
Afficher la grille, commande (dans Flash) 92
Afficher les guides, commande (dans Flash) 91
Afficher les info-bulles, préférences (dans Flash) 103
Afficher tout, commande (dans Flash) 70
Afficher une image, commande (dans Flash) 70
aide
accès 40
achat de versions imprimées 47
changement de la taille de police 41
contextuelle 46
discussion dans LiveDocs 48
impression 47
impression d’une page 47
index, dans 41
recherche 40
aide contextuelle 46
Aide, panneau
disposition 49
mise à jour 50
ouverture 43
recherche 44, 45
table des matières 43
taille du texte 49
Ancre nommée sur Séquence, préférences 103
animation, image par image et interpolée 150
Aperçu dans un navigateur
à propos 325
modification des préférences 326
aperçu des images, vignettes 75
applications, exemple 286
avertissements, préférences 105
B
barre d’édition (dans Flash) 86
barre d’état
à propos 58
Menu déroulant Taille de fenêtre 59
Barre d’outils Codage (dans Dreamweaver) 61
Barre d’outils de document (dans Dreamweaver) 57
barre d’outils principale (dans Flash) 86
barres d’outils
à propos 131
Codage 61
Document 57
éditeur 131
mise en forme du texte 132
navigateur 131
personnalisation 88
retouche d’image 132
basculement
modification vers navigation 135
navigation vers modification 135
377
bibliothèque, raccourcis clavier pour éléments 116
Bitmaps dans l’onglet Presse-papiers, préférences
(Windows uniquement) 104
C
Calque, commande (dans Flash) 80
calques
affichage 81
affichage sous forme de contours 81
calques de guide 86
changement de l’ordre 85
changement de la couleur de contour 82
changement de la hauteur 82
changement du nom 83
changement du nombre de calques affichés 82
copie 84
création 80
Insérer un calque, bouton 80
modification 83
organisation 85
présentation 79
sélection 83
suppression 84
verrouillage 84
calques de guide 86
calques, dossiers
ajout 80
changement de l’ordre 85
changement du nom 83
copie du contenu 84
création 80
modification 83
organisation 85
suppression 84
verrouillage 84
Catégories de la barre Insérer 60
Centrer l’image, bouton 74
certification et formation 285
changement du nom des calques et dossiers de calques
83
chercher dans l’Aide 40
chercher de l’aide 44, 45
Coller les images, commande (dans Flash) 78
conception de pages 145
création de mises en forme 147–??
maquettes 145
378
Index
contours
affichage du contenu des calques sous forme de 81
changement de la couleur pour les calques 82
Contribute
barre d’outils de l’éditeur 131
barre d’outils de mise en forme du texte 132
barre d’outils de retouche d’image 132
barre d’outils du navigateur 131
barres d’outils 131
didacticiel 367
espace de travail 130
Panneau Comment... 133
panneau de navigation 133
Panneau Pages 133
contrôles d’arborescence, raccourcis clavier 116
copie
calques 84
contenu d’un dossier de calques 84
Copier les images, commande (dans Flash) 78
Couleur de surbrillance, préférences 103
couleurs d’arrière-plan, définition 205
création d’une application, didacticiel 287
CSS (feuilles de style en cascade)
association 336
création 334
Mise en forme avec 329–357
présentation 332
Styles CSS, panneau 64
CSS VoirFeuilles de style en cascade
D
Dégradés dans le presse-papiers, préférences
(dans Flash) 104
didacticiels
ajout de contenu dans les pages 301
création d’une mise en forme de page basée sur un
tableau 189
Didacticiel sur les bases de la conception graphique
223
Didacticiel sur les bases de la conception Web 211
mise en forme de votre page avec CSS 329
paramétrage des sites Web pour les utilisateurs de
Contribute 367
publication de votre site 359
didacticiels, création d’une application 287
discussion sur l’aide dans LiveDocs 48
disposition du panneau Aide 49
Disposition par défaut, commande,
pour les panneaux 100
document, création 248, 291
Documentation Flash, accès 26
documents
enregistrement 192
dossiers distants 360
Création avec Dreamweaver 361
dépannage de configuration 364
dossiers locaux
définition 163–165
dossiers racines 144
Dreamweaver
actifs, assemblage 152
déploiement de fichiers 154
espace de travail 53
Feuilles de style en cascade (CSS) 148
fichiers 52
mises en forme 147–148
modification d’images Fireworks 152
panneau Actifs 152
test de sites 153
E
éditeurs, autres 286
effectuer une recherche dans des fichiers SWF
FlashPaper 138
enregistrement du produit 19
environnement de travail 119
espace de travail 119
à propos 53
Contribute 130
Dreamweaver 53
Fireworks 118
Flash 67
FlashPaper 137
présentation flottante 54
espace réservé pour image
création d’images 305
espaces réservés pour l’image
insertion 203
présentation 204
exportation 241
F
Fenêtre de document
barre d’état 58
barre de titre 56
Menu déroulant Taille de fenêtre 59
notions de base 56
sélecteur de balises 59
taille de la page et temps de téléchargement 59
fichiers
Dreamweaver 52
FlashPaper 136
Téléchargement du dossier local vers le serveur
distant 363
Fichiers SWF FlashPaper
impression 137
navigation 139
ouverture dans un nouveau navigateur 139
rechercher 138
redimensionnement 138
sélection de texte 138
Voir aussi fichiers SWF
fichiers texte en mode Code 319
Fireworks
actifs, création 149
Document, onglets 129
espace de travail 118
Exportation rapide, bouton 128
Inspecteur des propriétés 122–124
modification d’images (depuis Dreamweaver) 152
navigation dans un document 129
outils, modification des options 121
panneau Outils 120
panneaux (organisation) 126
panneaux, vue d’ensemble 124–126
Flash
animation 150
espace de travail 67
fichiers SWF, insertion 312
inspecteur des propriétés 93
lecture de contenu dans Dreamweaver 314
médias enrichis, création 150
Scénario 71–79
FlashPaper
espace de travail 137
fichiers, présentation 136
fonctions 137
FMA (Zones de messages flexibles) 12
formation et certification 285
Index
379
G
gestion et mise à jour de site Web 155
grilles
accrochage 93
affichage 92
modification 93
guides
accrochage 91
affichage 91
définition des préférences 92
déplacement 91
effacement 92
retrait 91
verrouillage 91
impression de fichiers SWF FlashPaper 137
impression de l’aide 47
inscription 284
Insérer un Calque, commande (dans Flash) 80
Insérer une image-clé vide, commande (dans Flash) 77
Insérer une image-clé, commande (dans Flash) 77
Inspecteur des propriétés
raccourcis clavier 111
inspecteur des propriétés
présentation 94
utilisation des panneaux et 93
installation de Macromedia Studio 16
J
Jeux de panneaux, commande (dans Flash) 100
I
Image, commande (dans Flash) 77
Image-clé vide, commande (dans Flash) 77
Image-clé, commande (dans Flash) 77
images 304–311
affichage 74
affichage de vignettes 75
affichage du contenu 70
affichées dans le scénario 71
centrage de la tête de lecture dans 74
changement de l’affichage 75
conversion d’images-clés en 79
copie et collage 78
copie par déplacement 78
création avec Fireworks 149
création avec FreeHand 149
déplacement dans le scénario 78
espaces réservés 203
insertion 77, 306, 307, 309
insertion dans Dreamweaver 152
manipulation dans le scénario 76
retrait 78
images bitmap, anticrénelage 104
images interpolées, déplacement d’images-clés dans 79
images-clés
conversion en images 79
déplacement dans des séquences interpolées 79
insertion 77
retrait 78
vides 77
importation
images 225
380
Index
L
liens, création 323
LiveDocs 48
M
Macromedia Flash Development Center 285
Macromedia Studio, installation 16
Main, outil 71
Mappage des polices par défaut, préférences 105
masques 234
Menu déroulant Taille de fenêtre 59
menu des en-têtes de colonne 195
menu des en-têtes de tableau 195
menus contextuels 109
Mise à jour du panneau Aide 50
mise en forme
basée sur un tableau 189–208
mise en page
de pages Web. 147–??
Mode Code
Mode Création et basculement entre 57
mode Code
affichage de fichiers texte 319
Mode Création 57
mode d’édition de document 90
mode d’édition de symbole 90
modification
basculement vers le mode navigation depuis 135
calques et dossiers de calques 83
N
navigation
basculement vers le mode modification depuis 135
pages 135
navigation dans les fichiers SWF FlashPaper 139
Notes d’accompagnement 285
O
optimisation 240
Options d’impression, préférence (Windows
uniquement) 102
Outil Main 59
Outil Zoom (dans Flash) 70
outils
affichage dans Flash 87
Main 71
personnalisation du panneau Outils dans Flash 88
sélection dans Flash 88
Zoom 70
Outils, panneau
Flash 87
ouverture de fichier SWF FlashPaper dans un nouveau
navigateur 139
ouvrir Aide 43
P
page de démarrage 68
panneau Actifs 310
panneau Actions (dans Flash) 95
panneau Bibliothèque (dans Flash) 95
Panneau Comment... (dans Contribute) 133
Panneau de navigation de Contribute
agrandissement et réduction 133
Panneau Comment... 134
Panneau Pages 133
panneaux 133
redimensionnement 133
panneau Outils
Fireworks 118, 120
Panneau Pages (dans Contribute) 133
panneaux
Actifs 310
Actions 95
ancrage 98, 99
Bibliothèque 95
création d’un groupe 99
déplacement 98
développement 98
disposition 98
disposition par défaut 100
enregistrement d’un jeu personnalisé 99
fermeture 97, 98
groupement 98, 99
jeux 99
liste des 96
menu d’options dans 97
ouverture 96
présentation 96
raccourcis clavier 111
raccourcis clavier pour les contrôles
d’arborescence 116
redimensionnement 97
réduction 98
réinitialisation de la disposition 100
sélection d’une disposition 100
séparation 99
suppression d’une disposition personnalisée 100
Personnalisation des raccourcis, boîte de dialogue 108
Personnaliser la barre d’outils, commande (dans Flash)
88
PICT dans le presse-papiers, préférences
(Macintosh uniquement) 104
planification des sites Web 142
polices, changement de la taille dans l’aide 41
Préférence du nombre d’annulations dans Flash 102
préférences
Afficher les info-bulles 103
Ancre nommée sur Séquence 103
avertissements 105
avertissements (dans Flash) 105
Bitmaps dans l’onglet Presse-papiers
(Windows uniquement) 104
Couleur de surbrillance 103
définition (dans Flash) 101
Dégradés dans le Presse-papiers
(Windows uniquement) 104
dessin 105
général (dans Flash) 102
Mappage des polices par défaut 105
Nombre d’annulations 102
Options Au démarrage 102
Options d’impression (Windows uniquement) 102
PICT dans le Presse-papiers (Macintosh
uniquement) 104
Presse-papiers 104
Sélection à l’aide de la touche Maj. 103
Sélection basée sur plages 103
Index
381
Texte FreeHand dans le Presse-papiers 105
Préférences Au démarrage dans Flash 102
Préférences, commande (dans Flash) 101
Presse-papiers, préférences (dans Flash) 104
publication 359–365
R
raccourcis clavier
ajout et suppression 108
de l’inspecteur des propriétés 111
des panneaux 111
personnalisation 107
pour la scène 115
pour les contrôles d’arborescence 116
pour les contrôles de l’inspecteur des propriétés 112
pour les contrôles de la boîte de dialogue 114
pour les contrôles de panneau 112
pour les éléments de la bibliothèque 116
suppression 109
redimensionnement de fichiers SWF FlashPaper 138
règles
affichage et masquage 90
unité de mesure 90
ressources 284, 286
Ressources en ligne, accès 31
Ressources Flash en ligne, accès 31
S
Scénario
affichage de vignettes 75
affichage des calques sous forme de contours 81
affichage des images, changement 75
ancrage à la fenêtre d’application 73
Aperçu en contexte, option 75
apparence de, modification 72
centrage de la tête de lecture dans 74
Centrer l’image, bouton 74
conversion d’images-clés en images 79
copie et collage d’images 78
déplacement 73
déplacement d’images 78
hauteur de calque, changement 82
images 76
images-clés 76
insertion d’images 77
manipulation d’images 76
masquage des calques dans 81
382
Index
nombre de calques affichés, changement 82
noms des calques dans 73
option Aperçu 75
ordre des calques, changement 85
ordre des dossiers de calques, changement 85
redimensionnement 73
suppression d’images ou images-clés 78
tête de lecture 74
utilisation 71
verrouillage des calques 84
verrouillage des dossiers de calques 84
scénario
utilisation d’images 71
Scène
affichage complet 70
raccourcis clavier pour sélectionner 115
zoom 69
sélecteur de balises 322
sélecteur de couleur 207
Sélection à l’aide de la touche Maj. préférences
(dans Flash) 103
Sélection basée sur plages, préférences 103
sélection de calques 83
sélection de texte dans des fichiers SWF
FlashPaper 138
séminaires 286
serveurs
options d’accès 362
téléchargement de fichiers vers le serveur
distant 363
sites
à propos 160
actifs, ajout 161
définition 163–165
distant 160, 360
local 160
Voir également sites Web
sites Web 151
assemblage d’actifs 152
contenu 148
déploiement 151
environnement de développement pour 143
gestion et mise à jour 155
maquettes 145
planification 142
test d’évaluation 153
Styles CSS, panneau 64, 339
support Macromedia Flash 285
suppression
calques et dossiers de calques 84
images ou images-clés 78
Supprimer l’image-clé, commande (dans Flash) 79
Supprimer les images, commande (dans Flash) 78
SWF, fichier 14
T
table des matières 43
tableaux
création d’une mise en forme 189–208
définition des propriétés 197–202
insertion 193–197
présentation 195
Tableaux développés 197
Tableaux développés 197
téléchargement, fixer le temps à lui attribuer 59
Tester la connexion, bouton 362
tête de lecture, déplacement 74
texte
insertion 319
sélection 319
texte de remplacement 203
Texte FreeHand dans le presse-papiers, préférences 105
V
verrouillage des calques et dossiers de calques 84
Vidéo Flash, insertion 315
Z
zone de travail, affichage et masquage 70
zoom 69, 70
Index
383
384
Index
">