Créer des documents interactifs

Transcription

1 Créer des documents interactifs 14 Au cours de cette leçon, vous apprendrez à : créer un document en ligne de base ; ajouter des boutons, des transitions de page et des hyperliens ; exporter au format Flash Player (SWF) ; exporter au format Adobe PDF ; convertir un document imprimé en vue d une mise en ligne ; créer un document en ligne complexe ; ajouter de l interactivité, de l animation et de la vidéo. Cette leçon dure environ 90 minutes. 353

2 Mise en route Note : Si vous ne l avez pas déjà fait, copiez les fichiers de cette leçon qui se trouvent sur le CD-ROM Adobe InDesign CS5 Classroom in a Book sur votre disque dur. Reportezvous à la section Copie des fichiers d exercices de Classroom in a Book de l introduction. Dans cette leçon, vous allez travailler sur deux mises en page d un magazine fictif qui contient différents éléments créatifs : logos, palette de couleurs et polices. Toutefois, plutôt que de créer une mise en page destinée à être imprimée, comme c était le cas aux leçons précédentes, vous allez réaliser de toutes pièces une mise en page destinée à une distribution sous forme électronique et à être vue en ligne. Vous ajouterez les touches finales boutons, hyperliens et transitions de page à une version pratiquement terminée du document et vous l exporterez sous la forme d un fichier SWF et en tant que fichier PDF qui conserve l ensemble de l interactivité et offre une autre option pour la distribution électronique. Enfin, vous ouvrirez une version imprimée de la publication qui a été convertie pour être utilisée en ligne et vous l exporterez sous la forme d un fichier SWF qui peut être ouvert et affiché avec un navigateur web. Pour terminer la leçon, vous ajouterez les touches finales (objets, animations et vidéos) à un autre document en ligne en utilisant de nouvelles fonctionnalités d InDesign CS5. 1. Pour vous assurer que les préférences et les paramètres par défaut d Adobe InDesign CS5 correspondront à ceux de cette leçon, déplacez le fichier InDesign Defaults en suivant la procédure détaillée à la section Enregistrement et restauration du fichier InDesign Defaults de l introduction. 2. Lancez InDesign CS5. Afin que les panneaux et les commandes de menus soient les mêmes que ceux de cette leçon, choisissez Fenêtre > Espace de travail > [Avancé], puis Fenêtre > Espace de travail > Réinitialiser Avancé. 3. Pour voir à quoi ressemble le document terminé, ouvrez le Chapitre 14_End.indd dans le dossier InDesignCIB > Lessons > Lesson_14. CHECK MAGAZINE ELEMENTS checkmagazine.com 354 LEÇON 14 Créer des documents interactifs

3 Configuration d un document en ligne Une publication en ligne diffère en plusieurs points d une publication imprimée. Les paramètres que vous configurez alors sont différents de ceux choisis pour une configuration traditionnelle destinée à l impression. Par exemple, la taille de la page d une publication en ligne est liée à celle des moniteurs alors que pour les publications imprimées, on se réfère aux tailles de papier standard. De même, l espace de couleurs change puisque de nombreux documents imprimés utilisent un espace colorimétrique CMJN alors que les documents en ligne utilisent un espace colorimétrique RVB. Créer un document pour une publication en ligne Une nouvelle fonctionnalité d InDesign CS5 permet de choisir entre Impression et Web chaque fois que vous créez un document. 1. Choisissez Fichier > Nouveau > Document. 2. Dans la boîte de dialogue Nouveau document, choisissez Web dans le menu Mode. Notez que les unités de mesure passent de millimètres à pixels. 3. Configurez les options suivantes : Dans la zone Nombre de pages, saisissez 5. Choisissez dans le menu Format de page. Dans la section Colonnes, saisissez 3 dans la zone Nombre. Note : Lorsque vous créez un document web, l espace de fusion des transparences (Édition > Espace de fusion des transparences) est automatiquement configuré avec la valeur Espace RVB du document, qui est approprié pour une utilisation en ligne du document. Par défaut, les documents imprimés utilisent l espace CMJN. 4. Cliquez sur OK. 5. Choisissez Fichier > Enregistrer sous. Sélectionnez le dossier Lesson_14 et nommez le fichier 14_DesignElements_1.indd. Cliquez sur Enregistrer. Vous allez continuer la leçon en travaillant sur une version pratiquement terminée. ADOBE INDESIGN CS5 CLASSROOM IN A BOOK 355

4 Basculer dans l espace Objet interactif De nombreuses tâches de cette leçon sont en rapport avec la création et la modification d objets interactifs, d objets animés et l utilisation de la vidéo. Il est donc plus approprié de laisser de côté l espace de travail Avancé, qui permet d afficher un jeu de panneaux souvent utilisés lorsqu on travaille sur des publications imprimées et de choisir l espace Objet interactif qui affiche des panneaux appropriés aux documents en ligne. Vous pouvez toujours afficher ou masquer des panneaux en utilisant les commandes du menu Fenêtre. 1. Pour changer d espace de travail, choisissez Fenêtre > Espace de travail > [Objet interactif]. 2. Choisissez Fenêtre > Espace de travail > Réinitialiser objet interactif. Ajout de boutons, de transitions et d hyperliens Une fois que vous avez commencé votre publication en ligne, de nombreuses tâches sont identiques à celles que nécessitant une publication à imprimer : mise en forme du texte ; création, modification et organisation des éléments de texte et des images ; ajout et suppression de pages, etc. Vous avez appris à réaliser toutes ces opérations lors des leçons précédentes. Par conséquent, ici, vous n ajouterez que des éléments qu on ne trouve pas dans les publications imprimées : des boutons, des hyperliens et des transitions entre les pages. Vous vous servirez pour cet exercice d une mise en page déjà bien avancée. Ajouter des boutons de navigation Dans un document en ligne, les contrôles de navigation permettent aux lecteurs du document d accéder à l information. Chaque page de la publication nécessite des contrôles afin d afficher les autres pages. En plaçant ces éléments sur une page de gabarit, vous êtes certain qu ils apparaîtront et fonctionneront de la même manière sur toutes les pages du document. Vous allez transformer des objets en boutons Page suivante/précédente qui permettront aux lecteurs des fichiers SWF et PDF de se déplacer de page en page. 1. Choisissez Fichier > Ouvrir. Ouvrez le fichier 14_DesignElements2.indd situé dans le dossier InDesignCIB > Lessons > Lesson_ Choisissez Fichier > Enregistrer sous, choisissez le dossier Lesson_14 et nommez le fichier 14_DesignElementsFinal.indd. Cliquez sur Enregistrer. En enregistrant le document avec un nouveau nom, vous conservez le fichier d origine pour une utilisation future. 356 LEÇON 14 Créer des documents interactifs

5 3. Affichez le panneau Pages (Fenêtre > Pages), puis double-cliquez sur chacune des icônes des pages du document afin d en visualiser le contenu. Notez les triangles rouges au bas de chacune des pages. Ils sont destinés à devenir les boutons Page précédente/page suivante. Comme ils appartiennent au gabarit, vous devez afficher la page de gabarit pour les modifier. 4. Double-cliquez sur l icône de la page A-Gabarit pour afficher le gabarit dans la fenêtre. 5. Avec l outil Sélection ( ), cliquez sur le triangle pointé vers la gauche, placé en bas de la page, pour le sélectionner. Si nécessaire, appuyez sur la touche Z pour activer l outil Zoom ( ) et zoomez sur les deux flèches pour travailler plus facilement (les triangles ont été créés avec l outil Polygone). 6. Choisissez Objet > Objet interactif > Convertir en bouton pour changer l objet en bouton et afficher le panneau Boutons. 7. Dans le panneau Boutons, saisissez Previous Page (page précédente) dans la zone Nom pour identifier le bouton. Dans le menu Événement, assurez-vous que Relâché est sélectionné. Cet événement active le bouton Previous Page lorsqu un utilisateur du fichier SWF ou Adobe PDF clique dessus et relâche. Maintenant que vous avez nommé un bouton et configuré l événement qui le déclenche, vous devez indiquer quelle action doit se produire. 8. Cliquez sur Ajouter un script d action pour l événement sélectionné ( ), puis choisissez Atteindre la page précédente. Vous avez configuré le bouton afin qu un clic sur celui-ci affiche la page précédente. Vous allez répéter l opération pour créer un bouton permettant d avancer dans les pages. ADOBE INDESIGN CS5 CLASSROOM IN A BOOK 357

6 9. Activez l outil Sélection ( ) et sélectionnez le triangle pointant vers la droite, puis choisissez Objet > Objet interactif > Convertir en bouton. 10. Dans le panneau Boutons, saisissez Next Page (page suivante) dans la zone Nom. Cliquez sur Ajouter un script d action pour l événement sélectionné ( ), puis choisissez Atteindre la page suivante. 11. Fermez le panneau Boutons, puis choisissez Fichier > Enregistrer. Vous pourrez voir le comportement des boutons en progressant dans la leçon, une fois que vous aurez exporté le fichier au format SWF ou Adobe PDF et que vous l aurez ouvert. Ajouter des transitions de page Vous avez la possibilité d ajouter des transitions animées qui s affichent lorsque les utilisateurs changent de page dans les fichiers SWF ou PDF. Vous obtiendrez un aperçu des animations dans InDesign et ainsi vous testerez plusieurs vitesses et directions pour le mouvement. Parmi les nombreuses options de transitions de page, on trouve : Page tournée (seulement pour SWF), Fondu ou Balayage. Lorsqu un lecteur du fichier clique sur les boutons que vous avez créés précédemment pour naviguer d une page à l autre, la transition que vous allez configurer dans les étapes suivantes détermine ce qui se produit visuellement au moment où une page en remplace une autre. 1. Dans le panneau Pages, double-cliquez sur la page 1 pour l afficher dans la fenêtre de document. Si nécessaire, choisissez Affichage > Ajuster la page à la fenêtre pour l afficher en totalité. 2. Affichez le panneau Transitions de page (Fenêtre > Objet interactif > Transitions de page). 3. Dans le panneau Transitions de page, choisissez Fondu dans le menu Transition. Laissez Moyenne dans le menu Vitesse. Si vous déplacez le pointeur dans le rectangle d aperçu en haut du panneau, vous pouvez observer le fonctionnement de la transition sélectionnée. 358 LEÇON 14 Créer des documents interactifs

7 4. Cliquez sur Appliquer à toutes les planches, afin d appliquer la transition Fondu aux cinq pages du document. 5. Fermez le panneau Transitions de page, puis choisissez Fichier > Enregistrer. Comme avec les boutons de navigation, vous ne pouvez pas voir les transitions que vous avez appliquées tant que vous n avez pas exporté au format SWF ou PDF. Ajouter un lien hypertexte Vous pouvez ajouter un lien hypertexte à un document avant de l exporter au format SWF ou PDF. Il permettra à l utilisateur qui cliquera dessus de se déplacer dans le même document, dans un autre document ou sur un site web. Pour créer un lien hypertexte, vous devez d abord créer une destination que vous attribuerez à un bloc de texte ou à un bloc d image. Ici, la destination sera un bloc de texte. 1. Dans le panneau Pages, double-cliquez sur l icône A-Gabarit pour afficher le gabarit dans le document. 2. Affichez le panneau Hyperliens (Fenêtre > Objet interactif > Hyperliens). 3. Dans le menu du panneau, choisissez Nouvelle cible d hyperlien. Dans la boîte de dialogue qui apparaît, configurez les options suivantes : Dans le menu Type, sélectionnez URL. Dans la zone Nom, saisissez Checkmagazine online. Dans la zone URL, saisissez 4. Cliquez sur OK pour fermer la boîte de dialogue. Activez l outil Texte ( ) pour sélectionner le texte du pied de page checkmagazine.com dans le coin inférieur droit de la page. Pour sélectionner le texte en entier, triple-cliquez dessus ou faites glisser le pointeur. Si nécessaire, aidez-vous de l outil Zoom ( ) pour travailler sur le bloc de texte. 5. Choisissez Nouvel hyperlien dans le menu du panneau Hyperliens. ADOBE INDESIGN CS5 CLASSROOM IN A BOOK 359