Création de contenu interactif simple à l’aide de Fireworks, Flash et Dreamweaver

Configuration supplémentaire

ou Creative Suite 4 Web Premium (inclut Fireworks, Flash et Dreamweaver)

• Essayer
• Acheter

Dans ce didacticiel, vous apprendrez à créer une page Web promotionnelle simple pour le site Web fictif du film Double identité. Cette page sera composée d’un en-tête interactif au format SWF situé en haut de la page (voir Figure 1) et d’un texte de remplissage. Ce didacticiel vous permettra également de découvrir le flux de travail de logiciels de la suite Adobe CS4 et d’apprendre les principes de base de la création de prototypes et de contenu interactif.

Le prototype illustré à la Figure 1 est un point clé du didacticiel. Tout d’abord, vous rassemblerez les actifs multimédias fournis dans Adobe Photoshop, Adobe Illustrator et Adobe Soundbooth. Ensuite, vous créerez un prototype pour l’en-tête dans Adobe Fireworks que vous transformerez en clip interactif dans Adobe Flash Professional. Pour finir, vous créerez les fichiers finaux du site dans Adobe Dreamweaver, ainsi que quelques notes sur l’édition des fichiers.

Lorsque vous arriverez au terme de ce didacticiel, vous aurez les connaissances nécessaires pour naviguer dans le flux de travail CS4 afin de créer vos propres projets. La durée de ce didacticiel est d’environ une heure et demie.

Un bon moyen pour démarrer un nouveau projet consiste à s’asseoir à son bureau et à coucher une idée sur papier. Ajoutez des notes, griffonnez des éléments, rayez ce qui ne va pas, bref définissez les grandes lignes. Créez ensuite une liste d’actifs nécessaires pour donner vie à votre présentation. Mettez tout en œuvre pour définir un plan de départ.

Dans ce didacticiel, les actifs visuels et le contenu sont fournis sous forme de fichiers source soigneusement organisés. Cette section a pour but de vous aider à établir la structure du projet et à comprendre les types d’actifs dont vous avez besoin pour élaborer votre prototype.

Définition de la structure du projet

Avant de démarrer vos projets, prenez le temps de réfléchir à l’organisation de vos fichiers. Vous travaillerez avec deux types de fichier : les fichiers source et les fichiers publiés. Les fichiers source sont des fichiers modifiables qui vous serviront à créer et modifier le site. Les fichiers publiés sont des versions exportées des fichiers source, utilisés par le contenu de la page Web. Seuls les fichiers publiés sont téléchargés sur un serveur Internet.

Configuration des fichiers d’exemple pour le didacticiel :

1. Téléchargez le fichier cs4_project.zip et décompressez son contenu sur le Bureau ou dans un dossier de votre ordinateur.
2. Ouvrez le dossier CS4_Project. Vous remarquerez que le dossier du projet contient un sous-dossier nommé _Source. Le dossier _Source contient les fichiers d’exemple du didacticiel triés par produit (voir Figure 2). Vous référencerez ces actifs lors de la création de votre prototype et des fichiers source au cours des étapes suivantes.

Le dossier CS4_Project fait office de dossier racine pour le projet et contient tous les fichiers publiés ainsi que le dossier _Source. Lorsque vous travaillerez dans le cadre de ce didacticiel, vous enregistrerez les fichiers source dans le dossier _Source et les fichiers publiés dans le dossier CS4_Project. Une fois le site terminé, vous téléchargerez tous les fichiers du dossier racine (hormis ceux contenus dans le dossier _Source) sur un serveur.

Familiarisation avec les fichiers d’exemple

Trois types de fichier multimédia sont fournis avec ce didacticiel : image, audio et texte.

Les images informatiques se présentent sous deux formats génériques : les images vectorielles et les images bitmap. Les images vectorielles sont le résultat d’équations mathématiques qui définissent des formes au moyen de lignes et de points. Elles ne dépendent pas de la résolution et sont généralement moins volumineuses que les images bitmap. Les images bitmap, quant à elles, sont composées d’une grille de pixels de couleur qui, ensemble, représentent une image. Plus la grille contient de pixels et plus la résolution est élevée. Les images bitmap sont généralement plus volumineuses, mais plus adaptées à la description de contenu photographique complexe. En termes de flux de travail CS4, Photoshop se prête mieux à la manipulation d’images bitmap et Illustrator à la création et à l’édition de contenu vectoriel.

L’audio est généralement enregistré au format WAV (Windows) ou AIFF (Mac OS) pour l’audio non compressé, et au format MP3 pour l’audio compressé. Dans le flux de travail CS4, vous créerez des fichiers audio source modifiables dans le nouveau format sonore ASND de Soundbooth. Vous pourrez ainsi modifier vos fichiers audio à volonté en démarrant Soundbooth à l’aide de l’option Modifier avec Soundbooth CS4. Une fois le fichier enregistré dans Soundbooth, vous pourrez retourner dans Flash pour entendre les modifications sans avoir à importer et remplacer le fichier.

Lisez la section suivante pour mieux comprendre les fichiers d’exemple et les outils avec lesquels ils ont été créés.

Présentation rapide de Photoshop CS4

Photoshop est un puissant outil de retouche photo doté d’une multitude d’applications. Dans le secteur de l’imprimerie, Photoshop est couramment utilisé pour la production et la retouche de photos haute résolution. Dans le secteur de la conception Web, ce logiciel est largement utilisé pour les tâches complexes de photocomposition, la manipulation de photos et la retouche d’images. Dans ce flux de travail de projet CS4, Photoshop permet de créer les divers actifs d’images bitmap. Les actifs restent modifiables dans les fichiers source Photoshop (PSD), mais peuvent également être exportés dans des formats d’image aplatie (tels que JPG ou PNG) pour permettre des retouches post-production dans vos fichiers source.

Pour explorer l’image d’arrière-plan dans Photoshop, procédez comme suit :

1. Ouvrez le fichier city_background.psd à partir du dossier CS4_Project/_Source/Photoshop dans les fichiers d’exemple que vous avez téléchargés.
2. Notez dans la Figure 3 les principaux éléments de l’espace de travail et notamment le panneau Outils sur la gauche, la barre d’options au-dessus des panneaux Zone de travail, Couleur et Réglages, et le panneau Calques à droite.
3. Regardez attentivement le panneau Calques. La composition d’images avec effets de calque et modes de fusion est l’un des principaux attraits de Photoshop en matière de création de graphiques de page Web.
4. Cliquez sur une icône dans le panneau Réglages pour voir l’effet produit sur l’image.

Pour plus d’informations sur l’utilisation de Photoshop, reportez-vous à la rubrique Utilisation d’Adobe Photoshop CS4.

Présentation rapide d’Illustrator CS4

Illustrator est un outil d’édition de graphiques vectoriels ultra sophistiqués couramment utilisé pour la création de logos, de mises en page de texte et de contenu illustratif complexe. L’utilisation de contenu vectoriel vous permet d’utiliser des graphiques dans un environnement haute résolution ou basse résolution et de conserver leur caractère modifiable. Dans le flux de travail du projet, Illustrator sert à créer le logo, le texte de l’en-tête et le texte du nom destinés à l’en-tête interactif. Bien que les graphiques vectoriels restent modifiables quelle que soit leur utilisation, les fichiers source Illustrator (AI) sont préférables pour les travaux d’édition.

Pour explorer l’image du logo dans Illustrator, procédez comme suit :

1. Ouvrez le fichier logo.ai du dossier CS4_Project/_Source/Illustrator dans les fichiers d’exemple que vous avez téléchargés.
2. Vous remarquerez dans la Figure 4 les principaux éléments de l’espace de travail et notamment le panneau Outils à gauche, la barre d’options située au-dessus du Plan de travail, les panneaux Couleur et Transformation, ainsi que le panneau Calques à droite.
3. L’outil Plume, qui permet de tracer des vecteurs, est presque indispensable dans Illustrator, plus que dans n’importe quel autre programme de dessin. Prenez le temps de vous familiariser avec l’outil Plume en dessinant des points et des lignes.

   Conseil : lorsque vous ajoutez un point (en cliquant), faites glisser l’outil Plume pour arrondir la ligne et former une courbe de Bézier.

Pour plus d’informations sur l’utilisation d’Illustrator, reportez-vous à la documentation Utilisation d’Adobe Illustrator CS4.

Présentation rapide de Soundbooth CS4

Soundbooth est un outil de création et d’édition audio conçu pour vous aider à enregistrer et à modifier facilement des fichiers audio destinés à être utilisés dans Flash. Soundbooth enregistre l’audio dans un format non compressé et l’exporte dans une multitude de types de fichier compressés. L’une des nouveautés de Soundbooth CS4 est la possibilité de sauvegarder des instantanés de votre travail au fil des modifications enregistrées au format ASND (Soundbooth Sound). Une autre fonctionnalité à été ajoutée à Soundbooth CS4 pour vous permettre de créer des fichiers ASND multipistes (voir Figure 5). Dans ce flux de travail de projet CS4, Soundbooth permet de créer et de modifier des fichiers audio au format ASND.

Pour explorer le fichier audio dans Soundbooth, procédez comme suit :

1. Ouvrez le fichier soundtrack.asnd du dossier CS4_Project/_Source/Soundbooth dans les fichiers d’exemple que vous avez téléchargés.
2. Vous remarquerez que l’écran est partagé en deux, avec à gauche les panneaux Fichiers, Tâches et Historique, et à droite l’environnement d’édition des formes d’onde (voir Figure 5).
3. Prenez le temps de vous familiariser avec les commandes d’édition. Vous remarquerez également la disposition multipiste dans l’espace de travail. Découvrez ces éléments en plaçant le plus petit effet sonore à un autre endroit. La modification des éléments du fichier est un jeu d’enfant.
4. Cliquez sur l’onglet Centre de ressources pour voir les ressources en ligne que vous pouvez utiliser pour composer des morceaux musicaux ou des effets sonores pour vos projets.

Pour plus d’informations sur l’utilisation de Soundbooth, reportez-vous à la rubrique Utilisation d’Adobe Soundbooth CS4.

À noter également que vous avez la possibilité de gérer tous vos fichiers source et fichiers publiés dans Adobe Bridge, installé avec Creative Suite 4. Adobe Bridge est un navigateur de fichiers et un gestionnaire de supports qui vous permet de rechercher et de gérer des fichiers issus de divers projets. Parmi les fonctions les plus intéressantes figurent la possibilité de baliser du contenu à l’aide de métadonnées pour simplifier les recherches et la possibilité de synchroniser les fichiers avec Adobe Version Cue et Adobe Device Central. Pour plus d’informations sur l’utilisation de Bridge, reportez-vous à la rubrique Utilisation d’Adobe Bridge et d’Adobe Version Cue CS4.

La présentation rapide est terminée. Dans les sections suivantes, vous partirez à la découverte de Fireworks, Flash et Dreamweaver.

Un prototype est une représentation graphique d’une page Web ou d’un élément de page Web utilisée pour valider une illustration prête pour la production avant de l’envoyer à l’étape suivante du flux de travail. Fireworks est l’outil idéal pour la création de prototypes, car il s’intègre parfaitement avec Photoshop, Illustrator, Dreamweaver et Flash. En utilisant Fireworks pour mettre en page les fichiers d’exemple, vous pourrez facilement importer le prototype dans Flash pour d’autres opérations de production ou directement dans Dreamweaver pour la mise en œuvre.

Cette section vous apprend à combiner des actifs dans Fireworks pour créer un prototype pour le graphique d’en-tête de votre page Web. Vous apprendrez également à préparer la page en vue de sa production dans Flash.

Présentation rapide de Fireworks CS4

Fireworks est un outil d’édition de graphiques et de production Web conçu pour vous aider à créer des graphiques de page Web et des prototypes de site Web à partir de contenu vectoriel et bitmap. Fireworks propose également diverses fonctions que vous pouvez utiliser pour produire des pages Web JavaScript ou du contenu SWF interactif pour Adobe Flash Player. Dans ce flux de travail de projet CS4, Fireworks sert de zone de préparation pour la création du prototype de page Web.

Vous assemblerez les fichiers d’exemple dans une composition statique et organiserez la structure des fichiers dans le format de fichier source de Fireworks (PNG). Le format PNG de Fireworks peut être importé dans Flash pour vous permettre de créer une composition à laquelle ajouter de l’animation et une interactivité.

Pour explorer l’espace de travail de Fireworks, procédez comme suit :

1. Ouvrez Fireworks et créez un fichier (Fichier > Nouveau).
2. Dans la boîte de dialogue Nouveau document, définissez la largeur sur 725 et la hauteur sur 320. Définissez la couleur de la zone de travail sur noir en sélectionnant l’option Personnalisée. Cliquez sur le bouton OK.
3. Vous remarquerez les principaux éléments de l’espace de travail et notamment le panneau Outils, la zone de travail, les panneaux Optimisation et Calques et l’inspecteur des propriétés.
4. Cliquez sur l’onglet Calques (groupé avec le panneau Pages) pour explorer le panneau Calques.

Pour plus d’informations sur l’utilisation de Fireworks, reportez-vous à la documentation Utilisation d’Adobe Fireworks CS4.

Importation de graphiques et configuration de calques

Commencez le projet en créant un fichier source PNG bien structuré. La désignation des calques et la distribution du contenu seront copiées dans le fichier source Flash dans la section suivante. Essayez d’anticiper et de créer le prototype en éliminant les complexités pour le transposer facilement dans l’environnement de développement interactif.

Dans cet exercice, le but est d’organiser le contenu en quatre calques : Arrièreplan, Voitures, Détails et Texte. Vous animerez par la suite les bitmaps du calque Voitures. Le fait de les séparer des calques Arrièreplan et Détails simplifiera votre travail dans Flash. Il est également judicieux de placer les éléments texte dans un calque à part, car vous pouvez être amené à les modifier fréquemment.

Pour créer des calques et importer des graphiques, procédez comme suit :

1. Enregistrez dans le dossier _Source le fichier que vous venez de créer en le nommant entête_promo.png.
2. Dans le panneau Calques, double-cliquez sur le Calque 1 et renommez-le Arrièreplan.
3. Importez le fichier city_background.psd contenu dans le dossier CS4_Project/_Source/Photoshop en choisissant la commande Fichier > Importer. Dans la boîte de dialogue Options d’importation des fichiers Photoshop, choisissez la commande Aplatir les calques Photoshop en une seule image dans le menu contextuel situé sous le champ Commentaires. Cliquez sur le bouton OK.
4. Placez le curseur dans le coin supérieur gauche de l’arrière-plan et cliquez pour importer l’image dans la zone de travail. Sélectionnez l’image et vérifiez que les coordonnées x et y sont définies sur 0, 0 (en haut à gauche de la zone de travail) dans l’inspecteur des propriétés. Cliquez deux fois sur l’option Bitmap dans le panneau Calques et renommez l’image ville. (L’attribution de noms spécifiques aux images permet de reconnaître les fichiers plus facilement lorsqu’ils sont exportés.)
5. Créez un calque en cliquant sur l’icône de nouveau calque en bas du panneau Calques (voir Figure 6). Nommez le calque Voitures. Dans Fireworks, un calque est représenté par un dossier dans le panneau Calques contenant un nombre indéfini d’objets bitmap et vectoriels. Les calques créés ici seront transformés en dossiers de calques une fois importés dans un environnement Flash Professional.
6. Choisissez la commande Fichier > Importer pour importer le fichier car_1.psd contenu dans le dossier CS4_Project/_Source/Photoshop en utilisant les mêmes paramètres. Placez la voiture en bas au centre de l’écran. Dans la section Sélection du panneau Outils, sélectionnez l’outil Mise à l’échelle (Q), puis cliquez sur la voiture pour la sélectionner. Faites glisser les poignées de sélection pour réduire la taille de la voiture à environ 250 pixels, comme indiqué dans l’inspecteur des propriétés. Renommez le bitmap voiture-gauche. Vous remarquerez que Fireworks importe les objets dans le dossier calque du calque sélectionné (en l’occurrence, le calque Voitures).
7. Dupliquez l’image de la voiture en la copiant et en la collant sur la zone de travail. Faites glisser l’image dupliquée à droite de la zone de travail, puis retournez-la horizontalement en choisissant la commande Modification > Transformation > Symétrie axe horizontal. Placez l’image dupliquée à environ 2,5 cm à droite de l’image originale. Renommez le calque voiture-droite.
8. Importez le fichier car_2.psd contenu dans le dossier CS4_Project/_Source/Photoshop et redimensionnez-le proportionnellement à la première voiture. Placez la nouvelle image entre les deux images de la zone de travail. Renommez le calque Bitmap voiture-centre.
9. Créez un nouveau calque par-dessus le calque Voitures et appelez-le Texte. Vous ajouterez l’illustration des trois fichiers Illustrator ici.
10. Importez le fichier logo.ai contenu dans le dossier CS4_Project/_Source/Illustrator en choisissant la commande Fichier > Importer. Utilisez les options par défaut de la boîte de dialogue Options de fichier vectoriel. Cliquez sur le bouton OK.
11. Placez le curseur dans le coin supérieur gauche de l’arrière-plan et cliquez pour placer l’image sur la zone de travail. À l’aide de l’outil Mise à l’échelle, sélectionnez l’image du logo et mettez-la à l’échelle à environ 250 pixels de large. Renommez le calque logo.
12. Importez le fichier tagline.ai contenu dans le dossier CS4_Project/_Source/Illustrator et placez-le au-dessus des voitures au centre de l’écran. Sans désélectionner le texte de l’en-tête, cliquez sur le nuancier de couleur de remplissage dans le panneau Outils pour choisir une couleur plus claire. Sélectionnez la couleur blanche dans la palette ou survolez une image de la zone de travail pour prélever un échantillon de couleur de la photo. Renommez le calque entête.
13. Importez le fichier names.ai contenu dans le dossier CS4_Project/_Source/Illustrator et placez le texte des noms à droite du texte d’en-tête. Remplissez le texte avec une couleur plus claire et renommez les calques mark et wendy.
14. Créez un nouveau calque nommé Détails et faites-le glisser entre les calques Texte et Voitures.
15. Importez les fichiers mark_sousa.psd wendy_carter.psd contenus dans le dossier CS4_Project/_Source/Photoshop et renommez les calques image-wendy et image-mark. La Figure 7 montre le prototype fini.
16. Enregistrez le fichier.

Ajout d’une illustration pour terminer le prototype

Le prototype est pratiquement terminé, mais la création de quelques éléments supplémentaires à l’aide des outils de dessin de Fireworks ajoutera une touche finale. À l’aide de l’outil Rectangle, vous dessinerez des contours autour des images de profil et ajouterez un dégradé transparent à l’arrière-plan pour donner du relief au texte et aux images.

Pour disposer les graphiques, procédez comme suit :

1. Tout en continuant de travailler dans le calque Détails, sélectionnez l’outil Rectangle et définissez la couleur de remplissage sur aucune couleur (l’icône de nuance barrée d’un trait rouge) et la couleur de contour sur blanc ou gris clair. Formez un rectangle autour de chaque image de profil pour ajouter une bordure. Vous remarquerez que le rectangle se colle aux bords de l’image bitmap. Vous pouvez également redimensionner manuellement le rectangle à l’aide de l’outil Mise à l’échelle ou des champs hauteur et largeur de l’inspecteur des propriétés.
2. Sélectionnez l’outil Pointeur, puis cliquez sur la partie grise de la zone de travail pour désélectionner tous les objets. Dans le panneau Outils, sélectionnez l’outil Rectangle et redéfinissez la couleur de remplissage sur noir et la couleur de contour sur aucune couleur. Dessinez un rectangle d’environ 60 pixels de haut en étendant la largeur de la zone de travail située sous le texte coloré. Cliquez sur le curseur Opacité de l’inspecteur des propriétés (situé au-dessus de l’option Filtres) pour abaisser la transparence de la forme à 50 %. Placez le rectangle de sorte à faciliter la lisibilité du texte (voir Figure 8).
3. Enregistrez le fichier.

Préparation du fichier PNG pour Flash

Grâce à Fireworks, vous avez la possibilité d’exporter du contenu prêt à être utilisé dans Flash ou Dreamweaver ou déployé directement. Dans le cadre de notre exercice, le fichier PNG vous servira à transférer la structure du prototype dans un fichier source Flash. Avant de passer à cette étape, vous simplifierez le fichier en pixellisant le logo vectoriel en un objet bitmap unique. Les graphiques vectoriels complexes sont peu volumineux, mais ralentissent les performances de rendu dans Flash Player. S’il est inutile de conserver le caractère modifiable d’un vecteur complexe, il est préférable de convertir les formes en bitmap.

Pour préparer le fichier PNG afin de poursuivre la production dans Flash, procédez comme suit :

1. À l’aide de l’outil Pointeur, cliquez sur le logo dans la zone de travail pour le sélectionner.
2. Choisissez la commande Modification > Aplatir la sélection pour convertir l’image vectorielle en image bitmap.
3. Enregistrez le fichier. Voilà, vous venez de réaliser votre premier prototype dans Fireworks !
4. Vous pouvez fermer Fireworks si vous le souhaitez et le rouvrir plus tard si vous voulez apporter d’autres modifications au fichier PNG.

Si vous souhaitez poursuivre sur le thème des prototypes, reportez-vous à l’article intitulé Mocking up text with the Lorem Ipsum placeholder text generator Création d’un prototype de texte à l’aide de l’espace réservé Lorem Ipsum .

Les sons et les animations confèrent un intérêt supplémentaire à une page Web et se situent généralement dans les graphiques d’en-tête et les éléments de page secondaires. Grâce aux fonctions d’importation des fichiers PNG Fireworks et aux améliorations apportées au flux de travail des animations Flash CS4, la création d’éléments animés n’a jamais été aussi simple. Par ailleurs, les améliorations apportées au flux de travail de Soundbooth CS4 rendent la composition audio dans Flash plus souple et plus intuitive.

Cette section vous apprend à ajouter du son, une animation et de l’interactivité au prototype du graphique d’en-tête de Fireworks.

Présentation rapide de Flash CS4 Professional

Flash est un outil qui permet de créer du contenu pour Flash Player dans un environnement de développement visuel. Flash est utilisé par les concepteurs et les développeurs pour créer des bannières Web, des éléments de page Web, des pages Web et même des applications Web. Dans ce flux de travail de projet CS4, vous utiliserez Flash pour transformer le prototype Fireworks en un graphique d’en-tête interactif contenant des boutons, du son et une animation. Vous créerez un fichier source modifiable (FLA) et publierez le fichier SWF pour l’utiliser dans Dreamweaver dans la section suivante.

Pour explorer l’espace de travail de Flash, procédez comme suit :

1. Ouvrez le logiciel Flash.
2. Créez un fichier en choisissant la commande Fichier > Nouveau. Dans la boîte de dialogue Nouveau document, sélectionnez l’option Fichier Flash (AS 3.0). Cliquez sur le bouton OK.
3. Vous remarquerez les principaux éléments de l’espace de travail et notamment la scène, les panneaux Scénario, Propriétés, Bibliothèque et Outils (voir Figure 9).
4. Cliquez sur l’onglet Bibliothèque pour explorer le panneau Bibliothèque. La bibliothèque permet de conserver des actifs réutilisables sous forme de symboles et d’objets médias.

Pour plus d’informations sur l’utilisation de Flash, reportez-vous à la documentation Utilisation d’Adobe Flash CS4 Professional.

Création d’un fichier FLA et configuration de ses paramètres de publication

Lorsque vous créez un fichier FLA, vous réglez les propriétés Paramètres de publication associées au fichier. Les propriétés Paramètres de publication permettent de définir les types de fichier importés et les options du fichier SWF. Dans le cadre de notre exercice, vous désactiverez le comportement par défaut lié à la publication d’un fichier HTML et modifierez l’emplacement d’exportation du fichier SWF publié.

Pour créer un nouveau fichier, procédez comme suit :

1. Enregistrez le fichier FLA que vous venez de créer dans le dossier CS4_Project/_Source et nommez-le entête_promo.fla.
2. Mettez à jour la taille et la couleur de la scène en choisissant la commande Modification > Document. Dans la boîte de dialogue Propriétés du document, définissez la largeur sur 725 et la hauteur sur 320 afin que le prototype Fireworks s’aligne correctement sur la scène une fois importé. Définissez la couleur d’arrière-plan sur noir en cliquant sur le nuancier d’arrière-plan. Cliquez sur le bouton OK.
3. Mettez à jour les propriétés des paramètres de publication en choisissant la commande Fichier > Paramètres de publication pour ouvrir la boîte de dialogue du même nom (voir Figure 10). Dans l’onglet Formats, désactivez la case HTML. Puisque vous allez créer votre page HTML dans Dreamweaver, il est inutile d’exporter le modèle HTML par défaut. Modifiez l’emplacement de publication du fichier SWF en cliquant sur l’icône de dossier située en regard du champ Fichier Flash. Dans la boîte de dialogue "Sélectionner dossier de destination", naviguez jusqu’au dossier CS4_Project (remontez d’un niveau dans l’arborescence). Cliquez sur le bouton Enregistrer.
4. Prenez le temps d’explorer les autres paramètres de l’onglet Flash, puis cliquez sur le bouton OK.
5. Enregistrez le fichier.

Conseil : Flash Player 9 et version ultérieure prennent en charge le nouveau format ActionScript 3.0 amélioré. Choisissez le format ActionScript 3.0, sauf si vous ciblez un public qui utilise des versions antérieures à Flash Player 9.

Importation du prototype Fireworks dans un symbole de clip

Quel que soit le programme utilisé, le maniement de calques est toujours sensiblement identique, y compris dans un fichier FLA, toutefois dans ce cas, les calques apparaissent dans le panneau Scénario et non dans le panneau Calques. Les calques d’un fichier FLA vous permettent de contrôler la mise en page du contenu lorsque vous travaillez dans les images d’un scénario.

Flash utilise les scénarios comme conteneurs pour organiser le contenu. La plupart du temps, vous travaillerez dans le scénario principal qui apparaît à l’ouverture d’un fichier FLA, ou dans celui d’un symbole de la bibliothèque. Les symboles sont des objets réutilisables qui possèdent chacun leurs propres scénario, zone d’édition et jeu de calques. La création de symboles permet entre autres de grouper du contenu, de concevoir des animations et de créer des boutons.

La structure requise pour le fichier FLA est déjà en place dans le fichier PNG Fireworks. Lorsque vous importez le fichier PNG dans Flash, vous pouvez soit importer le contenu Fireworks dans le scénario principal, soit placer le contenu dans un scénario de symbole de clip. Bien qu’il soit tout à fait possible de travailler dans le scénario principal, il est souvent préférable, pour des questions pratiques, de travailler dans un scénario de clip. En important le prototype Fireworks dans un clip, la structure de calques sera conservée et vous pourrez reprendre immédiatement votre travail là où vous l’avez interrompu.

Pour importer le prototype Fireworks et organiser le fichier FLA, procédez comme suit :

1. Dans le scénario principal, renommez le Calque 1 Actifs en cliquant deux fois sur le nom du calque dans le panneau Scénario.
2. Importez le fichier entête_promo.png contenu dans le dossier CS4_Project/_Source en choisissant la commande Fichier > Importer > Importer dans la scène. Dans la boîte de dialogue "Importer un document Fireworks", choisissez la commande "Image actuelle en tant que clip" dans le menu contextuel "Dans". Définissez la sélection "Objets" sur "Importer en tant que bitmaps pour conserver l’apparence". Définissez l’option "Texte" sur "Conserver tout le texte modifiable". Cliquez sur le bouton OK.
3. Vous remarquerez la présence d’un point noir (appelé image-clé) sur l’image 1 du scénario qui indique que les graphiques apparaissent sur cette image du calque. Étant donné que vous avez importé l’image PNG en tant que clip, la structure de calques préalablement créée est située à l’intérieur du scénario du clip. Vous regardez à l’extérieur de l’occurrence du clip sur l’image 1. Cliquez deux fois sur les graphiques de la scène pour entrer dans le scénario du clip. Vous remarquerez que la vue Scénario a changé et que la barre d’édition située au-dessus du Scénario indique que vous êtes toujours en mode d’édition pour la scène 1 (le scénario principal) et que le symbole de la page 1 est en cours de modification. Vous pouvez revenir dans le scénario principal en cliquant sur le lien Scène 1 dans la barre d’édition. Vous parcourrez les scénarios en cliquant où bon vous semble sur les occurrences de la scène ou en cliquant deux fois sur le symbole dans le panneau Bibliothèque.
4. Prenez le temps de regarder les actifs contenus dans le panneau Bibliothèque. Ouvrez le dossier Fireworks Objects et ses sous-dossiers jusqu’à ce qu’apparaissent les actifs importés (voir Figure 11).
5. Enregistrez le fichier.

Remarque : votre structure de calques peut varier si vous avez configuré les calques différemment dans Fireworks. Vous pouvez faire glisser les calques et dossiers de calques dans le scénario Flash pour placer le contenu à votre gré.

Construction d’animations dans le scénario du clip

Flash CS4 Professional utilise un flux de travail d’animation amélioré qui permet de déplacer et de transformer plus facilement des objets quand vous le souhaitez. La forme d’animation la plus usitée est appelée interpolation de mouvement. Elle implique la définition des caractéristiques d’un objet au début et à la fin de l’animation. Flash Player se charge du reste et construit l’animation entre ces deux points.

Dans le cadre de notre exercice, vous animerez les voitures en les faisant s’approcher. Pour ce faire, vous devrez d’abord convertir les graphiques de voiture en symbole de clip.

Pour créer des symboles et construire une interpolation de mouvement pour chaque graphique de voiture, procédez comme suit :

1. Si ce n’est pas encore le cas, entrez dans le scénario du symbole de la page 1 en cliquant deux fois sur l’occurrence dans le scénario principal ou sur le symbole Page 1 dans la bibliothèque.
2. Étendez tous les calques jusqu’à l’image 35 en cliquant dans l’image 35 du calque supérieur et en faisant glisser la souris vers le bas pour sélectionner l’image sur tous les calques. Cliquez avec le bouton droit de la souris (ou en maintenant la touche Ctrl enfoncée sous Mac OS) sur la sélection et choisissez la commande Insérer une image (F5). En étendant le scénario avant d’ajouter des animations, vous vous assurez que tous les calques comptent le même nombre d’images et ainsi que les graphiques seront visibles sur toutes les images de l’animation.
3. Masquez tous les calques simultanément en cliquant sur l’icône d’œil située au-dessus de la pile de calques. Vous remarquerez que des X apparaissent et que les graphiques disparaissent de la scène.
4. Désélectionnez la croix (X) des calques ville et voiture-centre pour afficher les graphiques de ces calques. Verrouillez le calque ville en cliquant sur l’icône de verrou.

   Conseil : il est facile de sélectionner plus de graphiques que vous ne le souhaitez. Pour remédier au problème, utilisez les fonctions de verrouillage et de masquage des calques.

5. Dans le panneau Outils, cliquez sur l’outil Sélection (la flèche noire), puis sur le graphique de la voiture centrée pour le sélectionner. Choisissez la commande Modification > Convertir en symbole (F8) pour convertir l’objet en symbole. Dans la boîte de dialogue Convertir en symbole, nommez le symbole voiture-centre et définissez le type sur Clip et le point d’alignement sur en haut à gauche ou centre. Le point d’alignement affecte l’orientation d’un objet, car celui-ci est interpolé le long d’un tracé. Les options en haut à gauche et centre sont les plus usitées. Cliquez sur le bouton OK. Vous remarquerez que le symbole apparaît dans le panneau Bibliothèque.
6. Vous êtes maintenant prêt à créer l’interpolation. Cliquez avec le bouton droit de la souris (ou en maintenant la touche Ctrl enfoncée sous Mac OS) sur l’image-clé (point noir) dans l’image 1 du calque voiture-centre et choisissez la commande Créer une interpolation de mouvement.
7. Placez la tête de lecture dans l’image 35 en cliquant sur l’image 35 du scénario ou en faisant glisser le repère d’image courante à la fin du scénario.
8. Cliquez sur l’outil de transformation libre (Q) (le troisième en partant du haut dans le panneau Outils), puis sur le graphique de la voiture pour le sélectionner. Choisissez une échelle d’image d’environ 50 %.
9. Maintenez la sélection et placez le graphique légèrement plus en haut à droite pour donner l’impression que la voiture s’avance et pas simplement qu’elle grossit.
10. Faites défiler le scénario pour prévisualiser l’interpolation en faisant glisser le repère d’image courante d’un bout à l’autre. Vous pouvez revenir à l’image 1 ou à l’image 35 pour modifier l’emplacement et les propriétés de chaque image-clé de l’animation.
11. Inversez l’interpolation en cliquant avec le bouton droit de la souris (ou en maintenant la touche Ctrl enfoncée sous Mac OS) sur la première image-clé de l’interpolation et en choisissant la commande "Inverser les images-clés". À ce stade, l’interpolation doit être plutôt réaliste avec les voitures qui s’animent au premier-plan.
12. Répétez les étapes 4 à 10 pour animer la voiture de gauche. Commencez par afficher le calque voiture-gauche. Sélectionnez l’image et convertissez-la en symbole. Lorsque vous en avez fini avec la deuxième animation, répétez le processus pour la voiture située à droite. Essayez de déplacer les images-clés de début des voitures de droite et de gauche pour qu’elles apparaissent après l’image 1. Pour ce faire, placez le curseur de la souris au-dessus de l’image-clé jusqu’à ce qu’il prenne la forme d’une double flèche. Cliquez ensuite sur l’image-clé et faites-la glisser ailleurs sur le scénario. Reportez-vous à la Figure 12 pour voir le scénario avec des animations d’interpolation de mouvement pour chacune des trois voitures.
13. Pour exporter le fichier SWF et prévisualiser le clip, choisissez la commande Contrôle > Tester l’animation.

    Vous remarquerez que le fichier SWF apparaît au-dessus du fichier FLA, ce qui vous permet de prévisualiser le film. Vous remarquerez également que l’animation tourne en boucle. Ceci est dû au fait que les scénarios forment une boucle sauf si vous définissez un simple script d’arrêt dans ActionScript.

    Conseil : par défaut, les calques masqués ne sont pas exportés avec le fichier SWF. Affichez tous vos calques dans le fichier FLA afin que vous puissiez voir tous les graphiques lors de l’exportation du fichier SWF.

14. Pour ajouter un script d’arrêt au scénario, commencez par créer un nouveau calque au-dessus de la pile de calques en sélectionnant le dossier Text, puis en choisissant la commande Insérer > Scénario > Nouveau calque. Renommez le calque Scripts.
15. Tous les éléments ajoutés à un scénario doivent être ajoutés à une image-clé d’un calque. Le script d’arrêt devant logiquement s’exécuter à la dernière image, vous devrez cliquer sur l’image 35 du calque Scripts et ajouter une image-clé en appuyant sur la touche F6. Vous pouvez placer l’image-clé contenant le script sur n’importe quel calque, mais il est plus judicieux d’utiliser un calque dédié à ActionScript que vous placerez sur le dessus de la pile de calques.
16. Sélectionnez la nouvelle image-clé, ouvrez le panneau Actions (F9) et saisissez la commande ActionScript suivante dans l’éditeur de texte :

17. Exécutez de nouveau la commande Tester l’animation pour revoir l’animation en mouvement.
18. Enregistrez le fichier.

Conseil : vous pouvez apporter d’autres modifications à vos animations pour les améliorer dans le panneau Editeur de mouvement en veillant bien à sélectionner un objet interpolé.

Pour consulter d’autres didacticiels sur la création d’interpolations de mouvement, reportez-vous à la présentation : Creating motion tweens: Part 1 (Création d’interpolations de mouvement : 1re partie).

Création de boutons pour l’interactivité des utilisateurs

L’un des moyens les plus faciles de créer de l’interactivité avec les utilisateurs est d’ajouter des boutons à une page. Vous pouvez utiliser les boutons prédéfinis de la Bibliothèque commune de boutons ou créer vos propres boutons à partir d’un symbole de bouton. Pour configurer un bouton qui agit sur des éléments, commencez par nommer l’occurrence du bouton, puis ajoutez un script ActionScript simple qui permet d’intercepter l’événement qui consiste à cliquer sur le bouton. Vous allez maintenant ajouter trois boutons au clip d’en-tête.

Pour utiliser la Bibliothèque commune de boutons afin d’ajouter un bouton qui relance l’animation, procédez comme suit :

1. Pour ajouter des boutons de lecture à un clip, il est préférable d’utiliser la Bibliothèque commune de boutons. Ouvrez la Bibliothèque commune de boutons en choisissant la commande Fenêtre > Bibliothèques communes > Boutons.
2. Revenez dans le scénario du symbole Page 1 en cliquant deux fois sur l’occurrence du scénario principal ou sur le symbole correspondant de la bibliothèque.
3. Créez un nouveau calque nommé Boutons et placez-le juste en dessous du calque Scripts.
4. Sélectionnez le calque Boutons dans le scénario, puis choisissez le bouton Lire dans le dossier classic buttons > Circle Buttons (boutons classiques > Boutons ronds) de la Bibliothèque commune de boutons et faites-le glisser sur la scène. Vous remarquerez que le symbole du bouton est copié dans la bibliothèque de votre fichier FLA.
5. Sélectionnez l’occurrence du bouton sur la scène et placez-la dans l’angle inférieur gauche. Sans désélectionner l’occurrence, tapez le nom btn_liredans le champ <Nom de l’occurrence> de l’inspecteur des propriétés. Ce nom sera utilisé dans le script ActionScript pour faire référence au bouton.
6. Ajoutez le code associé au bouton dans l’image 1 du calque Scripts. Sélectionnez l’image-clé vide de l’image 1 dans le calque Scripts et ouvrez le panneau Actions. Saisissez le code suivant :

7. Choisissez de nouveau la commande Contrôle > Tester l’animation pour revoir l’animation en mouvement. Cliquez sur le bouton de lecture pour revoir l’animation.
8. Enregistrez le fichier.

Pour créer des boutons personnalisés avec le texte du nom de l’acteur, procédez comme suit :

1. La création de boutons personnalisés suit le même processus, à la différence que vous commencez par convertir un graphique en symbole de bouton. Sélectionnez le texte Mark Sousa sur la scène et convertissez-le en symbole en appuyant sur la touche F8. Dans la boîte de dialogue Convertir en symbole, saisissez MarkBtn dans le champ Nom et sélectionnez la commande Bouton du menu Type. Cliquez sur le bouton OK.
2. Vous disposez maintenant d’un bouton avec lequel vous pouvez travailler. Sans désélectionner le bouton, nommez l’occurrence mark_btn dans l’inspecteur des propriétés.
3. Cliquez deux fois sur l’occurrence du bouton pour accéder au mode d’édition. Vous remarquerez que dans un symbole Bouton le scénario est différent et les quatre premières images représentent les états du bouton : Haut, Dessus, Abaissé et Cliqué (voir Figure 13).

4. Cliquez sur l’image Dessus dans le calque par défaut et ajoutez une image-clé en appuyant sur la touche F6. Flash duplique le graphique dans l’image Haut. Sélectionnez le texte dans l’image Dessus et dégroupez-le en appuyant plusieurs fois sur les touches Ctrl+B (ou Cmd+B pour Mac OS) jusqu’à ce qu’apparaissent les graphiques vectoriels dégroupés. Sans désélectionner le texte, appliquez la couleur de votre choix. Le fait de modifier la couleur de l’image Dessus crée l’état de survol du bouton.
5. Ajoutez une image-clé à l’image Cliqué, sélectionnez-la, puis à l’aide de l’outil Rectangle dessinez un rectangle autour du texte. Le contenu de l’image Cliqué est invisible en dehors de la zone d’édition des symboles, mais peut être utilisé pour définir la zone active du bouton. En encadrant le texte d’un rectangle, le bouton s’active de façon homogène lorsqu’un utilisateur le survole à l’aide de sa souris.
6. Retournez au scénario Page 1 en sélectionnant le lien Page 1 dans la barre d’édition située au-dessus de la scène ou en cliquant deux fois sur le symbole Page 1 dans la bibliothèque.
7. Ajoutez le code associé au bouton dans l’image 1 du calque Scripts. Sélectionnez l’image-clé vide de l’image 1 dans le calque Scripts et ouvrez le panneau Actions. Saisissez le code suivant :

8. Choisissez la commande Contrôle > Tester l’animation. Cliquez sur le bouton Mark Sousa ; le lien ouvre un site Web dans une nouvelle fenêtre du navigateur. Le code ActionScript créé à l’étape précédente charge la fonction du gestionnaire d’événements markClickHandler d’écouter l’événement de clic de l’occurrence du bouton mark_btn. De ce fait, chaque fois que la fonction du gestionnaire d’événements est déclenchée par l’événement, la commande navigateToURL ordonne au navigateur de charger une nouvelle page Web.
9. Enregistrez le fichier.

Pour plus d’informations sur l’utilisation des symboles de boutons, reportez-vous à la section Utilisation des symboles de boutons contenue dans la documentation Utilisation de Flash CS4 Professional.

Ajout d’une bande son

Flash Player peut lire des sons, qu’ils soient intégrés ou non au fichier SWF. Si vous utilisez un fichier audio externe, travaillez au format MP3. Si vous utilisez un fichier audio intégré, d’autres formats compatibles vous sont proposés, le plus important étant le format ASND.

L’utilisation du format ASND vous permet de modifier plusieurs fois des fichiers audio intégrés au fichier FLA à l’aide de Soundbooth CS4. Ainsi, vous pouvez facilement effectuer des tests sur le fichier audio source et consulter l’historique des révisions grâce à la fonction d’instantanés enregistrés de Soundbooth CS4.

Pour ajouter un son au scénario et le modifier pour qu’il soit parfaitement synchronisé avec l’animation, procédez comme suit :

1. Créez un nouveau calque au-dessus du calque Boutons et nommez-le Bande son.
2. Importez le fichier soundtrack.asnd contenu dans le dossier CS4_Project__Source/Soundbooth dans les fichiers d’exemple en choisissant la commande Fichier > Importer > Importer dans la bibliothèque. Vous remarquerez que le fichier audio apparaît dans la bibliothèque, mais pas dans le scénario.
3. Sélectionnez l’image-clé de l’image 1 du calque Bande son et, dans la section Son de l’inspecteur des propriétés, sélectionnez un son dans le menu Nom. Définissez l’option Sync sur En continu. L’audio en flux continu est lu pendant le téléchargement du fichier et est synchronisé avec les images correspondantes dans le scénario.
4. Étendez le scénario sur tous les calques jusqu’à l’image 400, en sélectionnant l’image 400 de tous les calques et en appuyant sur la touche F5.
5. Déplacez le script d’arrêt de l’image 35 à l’image 400, afin que le fichier audio du scénario soit lu jusqu’à la fin. Vous pouvez déplacer l’image-clé contenant le script plus loin dans le scénario en cliquant dessus pour la sélectionner, puis en la faisant glisser.
6. Le fichier audio est un peu long pour le scénario de l’image 400. Pour réduire le fichier, cliquez avec le bouton droit de la souris sur le fichier audio dans la bibliothèque et choisissez la commande Modifier avec Soundbooth CS4. Le fichier s’ouvre dans Soundbooth.
7. Dans Soundbooth, vous remarquerez que les pistes audio apparaissent à droite dans l’espace de travail. Les bords droite et gauche du fichier audio contiennent tous deux des poignées qui vous permettent d’affiner facilement les extrémités des sons. Placez la souris au-dessus du bord droit du fichier audio le plus long jusqu’à ce que le curseur prenne la forme de chevrons. Cliquez sur l’icône des chevrons et faites-la glisser vers le centre pour rogner l’extrémité du fichier. Utilisez les repères de temps situés en haut de la zone d’édition pour déterminer une plage d’environ 17 secondes.
8. Enregistrez le fichier ASND, puis revenez dans Flash.
9. Les modifications appliquées au fichier ASND sont automatiquement disponibles lorsque vous revenez au fichier FLA. Exécutez la commande Tester l’animation pour tester l’audio modifié. Vous remarquerez que le son de dérapage survient légèrement en décalé dans la composition et semble un peu long. Retournez dans le fichier FLA et redémarrez le mode d’édition pour le fichier audio (ou retournez directement dans Soundbooth, si le logiciel est toujours ouvert).
10. Dans Soundbooth, placez le curseur au-dessus du son le plus court et rognez le début pour isoler le bruit de dérapage. Faites glisser le fichier complètement à gauche. Ainsi, le bruit du dérapage se produira immédiatement et semblera synchronisé avec l’animation.
11. Enregistrez le fichier ASND, puis revenez dans Flash pour tester la modification. Répétez l’opération jusqu’à que la synchronisation sonore vous convienne parfaitement (voir Figure 14).
12. Lorsque vous êtes satisfait de vos modifications, retournez dans Soundbooth et enregistrez un instantané du fichier en cliquant sur l’icône Instantanés en bas à droite du panneau Historique, puis en choisissant la commande Nouvel instantané. Donnez un nom à l’instantané dans la boîte de dialogue qui apparaît, puis enregistrez le fichier ASND. Vous pouvez maintenant fermer Soundbooth si vous avez fini de modifier le fichier.

Publication du fichier SWF

Avant de passer à Dreamweaver, il vous reste à publier les dernières modifications apportées au fichier SWF. Pour suivre le processus de publication classique, choisissez la commande Fichier > Publier. La commande Publier exporte le fichier SWF de la même manière que la commande Tester l’animation, à la différence que, par défaut, la fonction Publier exporte également un fichier HTML ainsi qu’une série d’autres fichiers facultatifs. Au cours d’une étape précédente, vous avez désactivé l’option HTML, vous pouvez donc vous arrêter là.

Pour une description complète des paramètres de publication, reportez-vous à la section Paramètres de publication dans la documentation Utilisation de Flash CS4 Professional.

Tous les chemins mènent à Dreamweaver dans le flux de travail d’un projet. Dreamweaver vous permet de modifier des fichiers individuels et de visualiser des ensembles de fichiers qui constituent l’intégralité d’un site Web. Il vous permet de créer des pages Web en associant du contenu et des techniques de mise en forme et en le modifiant en mode WYSIWYG.

Cette section vous explique comment configurer un site dans Dreamweaver et créer une page Web simple. Vous apprendrez également à prévisualiser votre travail et à télécharger un site sur un serveur.

Présentation rapide de Dreamweaver CS4

Dreamweaver est un environnement de développement dédié à la création de sites Web qui utilise HTML et d’autres technologies d’écriture de script Web. Dans les faits, Dreamweaver est un éditeur de texte, mais la multitude de fonctions de gestion de sites et de technologies de marquage et d’écriture de scripts prises en charge en font un puissant outil, au centre du processus de production de sites Web. Dans un flux de travail de projet CS4, Dreamweaver est la dernière étape de cette ligne de production avant le téléchargement du site fini sur le serveur. Vous allez travailler avec un modèle Dreamweaver prédéfini (DWT) et des feuilles de style en cascade (CSS) pour créer et prévisualiser une mise en page Web simple.

Pour explorer l’espace de travail Dreamweaver, procédez comme suit :

1. Ouvrez Dreamweaver et créez un fichier HTML (choisissez la commande Fichier > Nouveau, puis sélectionnez l’option Page vierge et HTML dans la boîte de dialogue Nouveau document).
2. Vous remarquerez les principaux éléments de l’espace de travail et notamment la fenêtre Document (qui affiche le contenu en mode Code, Fractionné ou Création), l’inspecteur des propriétés et les panneaux Insérer, Styles CSS et Fichiers (voir Figure 15).

Pour plus d’informations sur l’utilisation de Dreamweaver, reportez-vous à la documentation Utilisation d’Adobe Dreamweaver CS4.

Création d’un nouveau site dans Dreamweaver

L’une des clés du travail avec Dreamweaver est la définition d’un site avant même de créer des fichiers et des structures de fichiers. Dreamweaver vous aide à créer le site, mais pour cela, il doit savoir où se trouve le dossier racine du site. Lorsque vous définissez un site, vous pouvez définir des options FTP et autres éléments qui vous aideront à produire le site et à assurer sa maintenance plus facilement lors des mises à jour de routine.

Pour créer un site pour votre projet, procédez comme suit :

1. Déplacez le dossier Templates du dossier CS4_Project/_Source/Dreamweaver vers le dossier CS4_Project. Le dossier CS4_Project, rappelez-vous, est le dossier racine du site où sont enregistrés tous vos fichiers publiés. Le fait de déplacer le dossier Templates dans le dossier racine du projet permet à Dreamweaver d’accéder immédiatement au modèle prédéfini inclus avec les actifs fournis.
2. Choisissez la commande Site > Nouveau site dans Dreamweaver pour ouvrir la boîte de dialogue Définition du site. Cliquez sur l’onglet Avancé s’il n’est pas déjà sélectionné (voir Figure 16).
3. Saisissez Projet CS4 dans le champ Nom du site et accédez au dossier CS4_Project. Cliquez sur le bouton OK.

4. Vous remarquerez que le contenu et les répertoires du site sont répertoriés dans le panneau Fichiers.

Création d’une nouvelle page à l’aide d’un modèle Dreamweaver

Vous pouvez créer des pages Web entièrement nouvelles ou à partir de modèles Dreamweaver prédéfinis. Les modèles Dreamweaver contiennent des mises forme prédéfinies avec zones modifiables. Ils servent essentiellement à accélérer le processus de production et à définir une structure qui permet de maintenir une cohérence entre les pages. Parmi les actifs qui accompagnent ce didacticiel figurent un modèle personnalisé qui contient une colonne avec des cellules centrée dans la page.

Pour créer la page Web et y insérer du contenu, procédez comme suit :

1. Fermez le fichier HTML créé à l’étape précédente si vous ne l’avez pas déjà fait.
2. Choisissez la commande Fichier > Nouveau. Dans la boîte de dialogue Nouveau document, sélectionnez l’option Page issue d’un modèle à gauche. Le modèle promo_page est sélectionné par défaut si aucun autre modèle n’est installé. Vérifiez que le bon modèle est sélectionné et cliquez sur le bouton Créer.
3. Enregistrez le fichier dans le dossier CS4_Project en le nommant page_promo.html.
4. Sélectionnez le texte de l’espace réservé dans la cellule headerContent située en haut de la page et supprimez-le.
5. Laissez le curseur dans la cellule headerContent et choisissez la commande Insertion > Médias > SWF. Dans la boîte de dialogue Sélectionner un fichier, sélectionnez le fichier promo_header.swf contenu dans le dossier CS4_Project/_Source pour insérer le clip d’en-tête. Cliquez sur le bouton OK ou Choisir dans Mac OS .
6. Dans la boîte de dialogue Attributs d’accessibilité des balises objet qui apparaît après sélection du fichier, saisissez Film Double identité dans le champ Titre. Cette étape permet au navigateur de recevoir des informations générales d’accessibilité sur le contenu. Dans des mises en forme plus complexes avec formulaires HTML et boutons, l’utilisation des champs Clé d’accès et Ordre des tabulations permet d’améliorer l’expérience globale de l’utilisateur et d’aider les visiteurs ayant des besoins spécifiques à ouvrir la page. Dans le cadre de ce didacticiel, vous pouvez laisser ces champs vides. Cliquez sur le bouton OK.
7. Sélectionnez le texte d’espace réservé dans la cellule titleContent et supprimez-le.
8. Ouvrez le fichier body.txt contenu dans le dossier CS4_Project/_Source/Dreamweaver. Copiez le titre et collez-le dans la cellule titleContent.
9. Sélectionnez le texte d’espace réservé dans la cellule bodyContent et supprimez-le.
10. Copiez le reste du texte du fichier body.txt et collez-le dans la cellule bodyContent.
11. Sélectionnez le texte d’espace réservé dans la cellule footerContent et supprimez-le.
12. Ouvrez le fichier copyright.txt contenu dans le dossier CS4_Project/_Source/Dreamweaver, copiez le texte et collez-le dans la cellule footerContent. Vous remarquerez que le texte est automatiquement formaté en fonction des paramètres CSS appliqués aux cellules du modèle Dreamweaver.
13. Saisissez le texte Double identité dans le champ Titre du document situé en haut de la fenêtre Dreamweaver.
14. Enregistrez le fichier. Cliquez sur le bouton OK lorsque la boîte de dialogue Copier les fichiers dépendants vous y invite.

Remarque : l’étape 12 crée un dossier nommé Scripts dans le dossier racine du projet et ajoute des copies des fichiers SWFObject requis pour intégrer le fichier SWF dans la page Web. Tout cela se passe en tâche de fond. Sachez que ces fichiers font partie du jeu de fichiers publiés de votre site et qu’ils doivent être téléchargés sur votre site Web.

Modification du formatage CSS

Il est d’usage, en matière de création de pages Web, d’utiliser des définitions CSS pour contrôler la mise en forme des cellules de contenu, ainsi que le formatage du texte et du contenu. Le modèle fourni dans les étapes précédentes utilise ces définitions CSS pour créer la structure des cellules. Vous pouvez modifier ces définitions CSS dans le modèle Dreamweaver pour mettre à jour toutes les pages qui utilisent le modèle.

Pour modifier le formatage CSS associé au texte du titre, du corps et des droits d’auteur, procédez comme suit :

1. Utilisez le panneau Fichiers pour ouvrir le fichier promo_page.dwt à partir du dossier Templates.
2. Pour modifier les définitions de style pour le titre, commencez par développer le panneau Styles CSS s’il ne l’est pas déjà. Placez le curseur dans la zone modifiable du titre et sélectionnez le bouton Actuel situé en haut du panneau Styles CSS.
3. Modifiez les propriétés prédéfinies pour tester d’autres formatages de la page ou ajouter de nouvelles propriétés et juger du résultat. Vous pouvez, par exemple, changer la valeur de la couleur. Ce faisant, vous remarquerez que la couleur des trois premières cellules change, mais pas celle des cellules du bas, car le style que vous modifiez redéfinit la balise div dans le fichier HTML. Chaque cellule du modèle existe dans une balise div et partage de ce fait les modifications apportées à la définition de style. La cellule footerContent est légèrement différente, car elle applique une classe CSS personnalisée directement à la dernière balise div. Cela a pour effet de remplacer la définition plus générale de cette balise. Passez en mode Code dans l’espace de travail Dreamweaver pour afficher la définition CSS et la structure de balise div.
4. Enregistrez le fichier de modèle et cliquez sur l’option Mettre à jour de la boîte de dialogue Mettre à jour les fichiers de modèles.

Conseil : les modèles Dreamweaver offrent un moyen pratique de gérer le formatage des pages de votre site. Toutefois, si vous pensez avoir besoin de débarrasser la page de la définition du modèle, vous pouvez choisir la commande Modifier > Modèles > Supprimer le marqueur de modèle.

Pour plus d’informations sur l’utilisation des définitions CSS, reportez-vous à la section Best practices with CSS in Dreamweaver CS4 Meilleures pratiques concernant les définitions CSS dans Dreamweaver CS4 .

Prévisualisation de la page

Dreamweaver vous offre la possibilité de prévisualiser un site de plusieurs façons. Dans l’espace de travail de Dreamweaver, vous pouvez basculer entre les modes Code et Création ou choisir le mode Fractionné pour afficher les deux. Pour changer de mode, cliquez sur le bouton correspondant Code, Fractionné ou Création situé en haut de la fenêtre Document. Dreamweaver CS4 permet désormais d’afficher du code, tel que JavaScript, directement dans l’espace de travail. Vous pouvez bien évidemment ouvrir facilement la page active dans un navigateur en appuyant sur la touche F12.

Conseil : le fait de passer en mode Code lorsque vous créez des pages Web est un bon moyen d’apprendre le marquage HTML et JavaScript.

Téléchargement des fichiers sur votre serveur

À ce stade, vous êtes prêt à télécharger le site sur un serveur Internet. Pour transférer vos fichiers publiés sur votre serveur, vous pouvez utiliser n’importe quel outil FTP, mais sachez que le panneau Fichiers de Dreamweaver contient une fonctionnalité FTP intégrée. L’utilisation de la fonction FTP de Dreamweaver peut présenter certains avantages lorsque vous synchronisez des fichiers avec le serveur lors de modifications dans le flux de travail. Vous pouvez même utiliser Dreamweaver avec des fichiers enregistrés hors du serveur pour effectuer un contrôle de version dans un groupe de travail.

Pour terminer le flux de travail en téléchargeant le site fini, procédez comme suit :

1. Assurez-vous qu’un site distant a été entré dans la définition de votre site de projet CS4. Si vous souhaitez modifier cette définition, choisissez la commande Site > Gérer les sites. Dans la boîte de dialogue Gérer les sites, sélectionnez Projet CS4 et cliquez sur l’option Modifier.
2. Dans la boîte de dialogue Définition du site, cliquez sur l’option Infos distantes dans la liste Catégorie, puis choisissez la commande FTP dans le menu Accès. Remplissez les champs Hôte FTP, Nom d’utilisateur et Mot de passe avec les informations de connexion de votre serveur distant. Si vous ne connaissez pas ces informations, vous pouvez les obtenir auprès de votre fournisseur d’accès à Internet ou de l’administrateur de votre réseau. Après avoir saisi les informations de connexion, cliquez sur le bouton Tester pour tester la connexion. Cliquez sur le bouton OK.

   Remarque : si vous n’avez pas accès à un serveur distant, vous pouvez tout simplement appliquer les instructions suivantes et passer à la prochaine section.

3. Ouvrez le panneau Fichiers et cliquez sur le bouton Connecter à un hôte distant situé en haut à gauche du panneau.
4. Une fois la connexion établie, sélectionnez dans l’affichage local les fichiers à télécharger tout sauf le dossier _Source . Appuyez sur le bouton qui représente une flèche vers le haut pour télécharger les fichiers sur le serveur. Pour passer en affichage distant, basculez de l’affichage local à l’affichage distant en haut à droite dans le panneau Fichiers. Le panneau Fichiers vous permet de gérer vos fichiers locaux dans Dreamweaver même si vous avez choisi de gérer vos téléchargements de fichiers autrement.

Vous site est maintenant terminé, mais il fort probable que votre page Web nécessitera quelques modifications et mises à jour par la suite. Cette section présente le flux de travail d’édition pour un site fini.

Modification du contenu de l’image

Les interfaces des produits CS4 ne permettent pas les modifications successives directement dans les graphiques, mais la mise à jour d’images n’est guère compliquée. À ce stade, vous devez traiter les graphiques individuellement. Pour modifier un graphique dans le prototype Fireworks, il suffit de supprimer l’ancien graphique et d’importer le nouveau à la place. Il est conseillé de noter la taille et l’emplacement du graphique d’origine avant de le supprimer. Si vous modifiez le fichier FLA, vous pouvez mettre à jour les images bitmap dans leurs propriétés de bibliothèque. Cette fonction est très pratique, car la structure de votre fichier FLA est souvent plus complexe que votre prototype.

Pour modifier l’image d’arrière-plan dans le fichier SWF d’en-tête, procédez comme suit :

1. Ouvrez le fichier city_background.psd dans Photoshop et modifiez l’image d’arrière-plan à votre gré.
2. Exportez l’image modifiée à partir de Photoshop au format JPG en choisissant la commande Fichier > Enregistrer pour le Web. Enregistrez le fichier dans le dossier CS4_Project/_Source/Photoshop en le nommant city_background.jpg.
3. Ouvrez le fichier promo_header.fla dans Flash.
4. Cliquez deux fois sur l’image Bitmap 1 dans la bibliothèque pour ouvrir la boîte de dialogue Propriétés du bitmap (voir Figure 17). Cliquez sur le bouton Mettre à jour et naviguez jusqu’au fichier JPEG enregistré. L’image Bitmap 1 est mise à jour avec le contenu du fichier JPEG modifié.

5. Enregistrez le fichier et publiez le fichier SWF pour qu’il puisse être téléchargé sur le site.
6. Par précaution, mettez également à jour le prototype Fireworks avec l’image JPEG modifiée.

Vous pouvez indiquer si les modifications de l’image doivent être apportées dans le fichier Fireworks ou directement dans le fichier FLA. En général, il est préférable de mettre à jour de façon homogène le prototype, mais celui-ci peut être retiré du flux de travail une fois le fichier source FLA terminé.

Modification du contenu sonore

Le format ASND permet d’effectuer facilement des modifications successives dans un fichier audio intégré à un fichier Flash. Ce format enregistre aussi l’historique des modifications en plus du fichier source original. En enregistrant un fichier source au format ASND, vous pouvez toujours revenir dans le fichier d’origine pour ajouter ou supprimer des modifications à loisir.

Pour modifier le contenu audio du fichier SWF d’en-tête, procédez comme suit :

1. Cliquez avec le bouton droit de la souris (ou en maintenant la touche Ctrl enfoncée sous Mac OS) sur le fichier audio dans la bibliothèque et choisissez la commande Modifier avec Soundbooth CS4. Soundbooth démarre et ouvre le fichier ASND.
2. Supprimez les modifications précédentes à l’aide du panneau Historique (voir Figure 18) ou ajoutez-en de nouvelles.
3. Enregistrez le fichier ASND.
4. Retournez dans le fichier FLA et publiez le fichier SWF pour mettre à jour le fichier publié avec les modifications.
5. Enregistrez le fichier FLA.

Modification du texte et du formatage d’une page Web

Avec Dreamweaver, l’édition de texte et le formatage CSS deviennent un jeu d’enfant. Au cours du développement initial, il est fréquent d’expérimenter diverses combinaisons de texte et de formatage. L’édition du site une fois terminé suit le même processus que celui décrit à la sectionModification du formatage CSS.

Téléchargement des fichiers mis à jour sur votre serveur

Il est important de se rappeler que vous devrez télécharger les fichiers mis à jour chaque fois que vous apportez des modifications locales à un site déjà été lancé sur Internet. Vous continuerez d’utiliser un outil FTP ou le panneau Site de Dreamweaver pour télécharger et synchroniser les fichiers locaux et distants. Il peut être judicieux de placer les fichiers mis à jour dans un répertoire Web non public afin de les tester. Vous pouvez ainsi détecter les problèmes éventuels qui pourraient se produire une fois le site placé sur un serveur Web.

Que faire maintenant ?

Vous venez d’apprendre à utiliser une série de produits Adobe CS4 pour créer un flux de travail pour la production d’un site Web. En résumé, vous avez préparé le projet, défini les éléments principaux dans un prototype, créé un clip interactif et terminé la page Web en vue de son déploiement. Pour les étapes suivantes, vous pouvez réfléchir à des moyens de créer des modèles de mise en page dans les produits CS4 ou définir d’autres approches cohérentes pour enrichir le flux de travail.

Vous pouvez également consulter les ressources suivantes :

Photoshop

• Pôle de développement Photoshop
• Aide et support de Photoshop
• Learn Photoshop CS4 Apprendre Photoshop CS4 Adobe TV

Illustrator

• Pôle de développement Illustrator
• Aide et support d’Illustrator
• Learn Illustrator CS4 Apprendre Illustrator Adobe TV

Soundbooth

• Pôle de développement Soundbooth
• Aide et support de Soundbooth
• Learn Soundbooth CS4 Apprendre Soundbooth CS4 Adobe TV

Fireworks

• Pôle de développement Fireworks
• Aide et support de Fireworks
• Learn Fireworks CS4 Apprendre Fireworks CS4 Adobe TV

Flash

• Pôle de développement Flash
• Aide et support de Flash
• Learn Flash Professional CS4 Apprendre Flash Professional CS4 Adobe TV

Dreamweaver

• Pôle de développement Dreamweaver
• Aide et support de Dreamweaver
• Learn Dreamweaver CS4 Apprendre Dreamweaver CS4 Adobe TV