Indesign - comment créer un document multimedia dynamique

Rfrence

Le document multimdia dynamique depuis InDesign

Le document multimdia dynamique depuis InDesign - 2

Table des matiresRsum 3Pourquoi InDesign ? 3Quel format dexportation ? 3Les pratiques 4

1 gestion des mdias : importation de vidos 42 Les cartes (Google Maps) 123 Les fichiers audio 154 Structure du texte : les hyperliens 175 Structure du texte : table des matires 186 Structure du texte : navigation 20

Exportation : les rglages corrects 231 PDF 232 ePub (mise en page fixe) 253 Le format Flash 274 Publish Online 29


RsumDcouvrez comment les capacits du document multimdia dynamique peuvent vous permettre dattirer un public intress par un contenu riche et enrichi, non seulement par des images ou des infographies mais galement par les apports multimdias tels que dela vido, des cartes et des hyperliens vers des sites de rfrence.

Pourquoi InDesign ?Parce que ce logiciel permet de grer les documents comme des conteneurs multimdias ; bien plus que des logiciels bureautiques la Word ou PowerPoint, InDesign est la croise de tout ce qui est la pointe du multimdia (images, sons, vidos, formulaires) et de la gestion active et globale du texte (structure, signets, table des matires, rfrences croises, hyperliens etc ) Nombreux sont mme les prsentateurs qui dlaissent PowerPoint pour crer leurs prsentations en InDesign, au vu des capacits et de la robustesse de celui-ci

Quel format dexportation ?Actuellement le pdf reste le format phare, par son ouverture aux formats, sa compatibilit et sa robustesse Surtout, il permet de conserver la mise


en pages, le design donc, travers tous les types de lecteurs (navigateur, tablette, mobile, papier) Dernier avantage, non des moindres, il na pas besoin dune connexion internet pour tre consult, ni dune tablette!Par contre, lePub fixed layout va permettre de respecter toutes les animations et toute linteractivit, mais il vous faut travailler avec la version la plus rcente possible dInDesign, CC2014 ou mieux CC2015 ; pour visualiser votre travail export, si vous navez pas de tablette, le plus facile est dinstaller le plugin du navigateur Google Chrome, Readium Lexportation au format Publish Online respecte les animations mais est lie la dernire version dInDesign (CC2015) Il y a une dernire possibilit, utilisable seulement sur Internet: exporter au format flash Toutes les animations sont maintenues, mais cest la notion de page en soi qui nest plus de mise dans ce cas, ni le format de page ni le fait davoir plusieurs pages dans un document

Les pratiques

1. gestion des mdias : importation de vidos

Importer une vido au sein dInDesign doit se faire, soit de faon directe, en important donc le fichier vido, par exemple au format

https://chrome.google.com/webstore/search/readium?hl=fr


H 264 (mp4) ventuellement flash (flv, f4v, mais flash nest pas support sur les tablettes iPad), dans la page dInDesign, directement dans un bloc, comme une image donc Cela se ralise depuis le menu Fichier> Importer, en dcochant remplacer llment slectionn le cas chant Il faut seulement raliser une mise lchelle de la vido, en utilisant un format standard, que vous pourrez attribuer ce bloc image, par exemple 560 x 315 px (standard sur YouTube)

Lalternative est de le faire via un lien : vous pouvez en effet, en ayant slectionn un bloc, prendre le panneau Multimedia dInDesign, et cliquer sur le bouton prsentant une image de plante (entour en rouge dans la capture dcran ci-dessous) ; cela permet de coller un lien direct dune vido au format flash (flv) ; noubliez pas de laisser len-tte http devant le lien1 Pour convertir au format Flash votre vido et donc passer de mp4 en flv, un moyen simple est dutiliser le sitewww online-convert com/frqui ralise cette conversion en ligne assez rapidement

1 Il nest apparemment pas possible actuellement dimporter une vido en tant que lien au format mp4 vrifier dans les versions ultrieures !

https://fr.wikipedia.org/wiki/H.264http://www.online-convert.com/fr


Ce sera donc bien entendu une vido que vous aurez mise sur un serveur Web :

Au contraire de ce quon pourrait croire, lintgration du code html, gnr cet effet depuis YouTube par exemple, ne fonctionne pas ; en effet, une fois convertie au format pdf, la vido insre


en tant que lien ne sera malheureusement pas active2 dans un pdf titre dinformation voici sur Youtube la fentre qui permet le partage ou lintgration dun bloc html dans une page :

En tout tat de cause, une vido importe doit tre paramtre mme de faon minimale, et cest ralisable depuis le panneau Multimedia :

2 Alors quelle peut ltre si lon exporte le document avec la nouvelle fonction Publish Online (li la version dAdobe Creative Cloud 2015)


Il faut donc cocher lire au chargement de la page , et il est conseill dajouter une barre de contrle qui permettra au lecteur de faire une pause ou de stopper la vido en question dconseiller, les barres de contrle qui reprennent le mot Full ce qui veut dire que vous vous retrouverez avec un contrle qui prend tout lespace de la vido Vous pouvez cocher Afficher la barre de ctrl (contrle) au survol , ce qui sera plus esthtique que de la laisser affiche en permanence


Un point de navigation est possible, cela permet que la vido commence un moment donn et de crer un bouton pour la lancer ce moment avec un bouton :


Vido importe au format mp4

Dpart


Vido au format mp4 place par copier-coller dun lien vers un fichier flv en ligne (ne fonctionne pas en ePub).

Format 560 x 315 px


2. Les cartes (Google Maps)

Depuis le menu du site Google Maps, il est possible de capturer une carte :


Cliquer sur Partager ou intgrer la carte et choisir intgrer ; choisir la grandeur de la carte dans le menu droulant dans lequel moyenne est actif comme rglage par dfaut


Vous obtenez ds lors une portion de code html que vous pouvez copier, et ensuite coller sur une page en utilisant la commande du menu Objet > Insrer du code html (attention, il ne faut pas avoir loutil texte actif pour ce faire) Rsultat, une carte incorpore (non interactive actuellement en pdf, mais qui vous vite en ralit de devoir faire une capture dcran) :

En faisant un contrle clic ou clic droit sur le bloc on obtient le menu optionnel via lequel il est possible de modifier le code html


3. Les fichiers audio

Depuis le mme menu Fichier > Importer, voici le placement dun fichier mp3 :

Pour jouer le morceau cliquez sur le triangle :

Jai dcoch dans la fentre Multimedia loption lire au chargement de la page:


et jai affich licne standard du fichier audio Pour dclencher le son je prfre donc activer un bouton (le triangle donc), qui lance lvnement son comme ceci:


4. Structure du texte : les hyperliens

Rien de plus simple en ralit de raliser un hyperlien actif en InDesign Le panneau Fentre > Objet interactif > Hyperliens vous permet cela Au plus simple, copiez collez dans le bloc texte un url complet (avec son en-tte http), slectionnez-le et dans le panneau Hyperliens, crez un nouvel hyperlien partir de lurl depuis le menu local de la palette Hyperliens :

Un style de caractre dhyperlien est automatiquement cr, il vous permettra de modifier globalement le design de vos hyperliens


Vous pouvez mme, si votre document comporte beaucoup dURL, les convertir automatiquement depuis le mme panneau hyperliens :

5. Structure du texte : table des matires

Si votre document comporte de nombreuses pages, il sera adquat de le pourvoir dune table des matires dynamique (dont les entres sont autant dhyperliens fonctionnels)


Le plus vident pour ce faire est de travailler avec les styles de paragraphe pour composer une table des matires automatique Ralisons cela avec ce document Il faut aller dans le menu Page > Table des matires :


Jai ici conserv comme style repris dans les entres de table des matires, les styles titre et sous-titre En cliquant sur Plus doptions on permet lentre des numros de page

Crer des Signet pdf permet un balisage du fichier pdf, et vous devez crer des ancres dans les paragraphes source, ce qui permet lhyperlien depuis la TDM Quelques modifications des styles permettront une table des matires simple mais correcte (voir Table des matires, page 2)Le grand intrt de raliser cette table des matires est que non seulement les lignes et les numros de page sont des hyperliens actifs, mais galement que dans votre fichier Acrobat, ils seront repris dans longlet des signets et seront cliquables (voir ci-contre)

6. Structure du texte : navigation

Il est trs important de mettre des icnes permettant la navigation sur toutes les pages, minima pour pouvoir passer de page en page et pour pouvoir retourner la table des matires Pour ce faire, il faut aller dans le gabarit (menu Fentre > Pages), lditer en double-cliquant sur le gabarit dans cette palette :


Puis crer des objets, des triangles par exemple, qui seront des hyperliens vers la page prcdente, suivante ainsi que vers la table des matires Cela se ralise au moyen du panneau Boutons et formulaires :

Ajouter un script daction dans ce panneau suffit transformer un objet slectionn en bouton, auquel on applique donc laction datteindre une page


Attention, ces boutons interactifs ne seront pas toujours actifs sur tablette iOS Alors quun lien de type cible cr depuis la palette dhyperliens, comme celui en bas de page de prsent document ( Table des matires ), sera fonctionnel :


Exportation : les rglages corrects

1. PDF

Menu Fichier > Exporter, ensuite choisir le format Adobe pdf interactif, puis les rglages suivants :


Surtout cocher tout inclure au niveau des Formulaires et contenu multimdia Cocher pdf balis car le balisage du pdf permet denrichir les liens structurels au sein du fichier Acrobat Une des limites actuelles du format pdf pour les vidos, assez curieuse par ailleurs, est que les vidos, une fois lances, ne sarrtent plus en quelque sorte, mme lorsque lon passe une page suivante Le bug est connu1 mais pas rsolu Importer la vido en Acrobat plutt quen InDesign rsout le problme dune certaine faon !Une autre limite, qui est bien plus ennuyeuse, est que, comme le format flash nest pas support sur iOS (lOS des tablettes iPad et des iPhones dApple) et quInDesign convertit les vidos au format flash vos vidos ne seront pas vues sur tablettes iPad2 Seul moyen, puisquil est possible de joindre un fichier quelconque un fichier Acrobat, depuis la commande Modifier le fichier Acrobat > Autres > Joindre un fichier Il faudra encore prvenir le lecteur de la prsence du fichier vido

1 https://forums adobe com/thread/14590472 http://indesignsecrets com/for-interactive-pdf-not-all-readers-are-equal php


Une autre possibilit, mais payante, est dinstaller un lecteur alternatif de pdf sur liPad, PDF Expert3 ou Goodreader4

2. ePub (mise en page fixe)

Menu Fichier > Exporter, ensuite choisir le format ePub (mise en page fixe), puis les rglages suivants :

3 https://pdfexpert com/download4 http://www goodreader com

https://pdfexpert.com/downloadhttp://www.goodreader.com/


Idalement la couverture sera un fichier jpeg de 600 x 800 pixels, format portrait La table des matires suivra les signets crs lors de sa cration (voir chapitre 5)

Longlet des paramtres de conversion peut tre laiss par dfaut ainsi que les deux suivants


Lautre rglage important est celui des mtadonnes, qui pourront permettre lindexation du document ainsi que son rfrencement

3. Le format Flash

Menu Fichier > Exporter, ensuite choisir le format Flash Player, puis les rglages suivants :


Cette exportation donne donc comme rsultat un fichier swf (flash) ainsi que le fichier html qui contient lanimation


4. Publish Online

Cette exportation reprend tout votre contenu pagin pour le placer en ligne sur les serveurs dAdobe (indd adobe com) Ceci est compatible avec toutes les animations mais requiert la dernire version dInDesign (CC2015)


Serge Paulus 2016sp@serge-paulus bewww serge-paulus be

mailto:sp%40serge-paulus.be?subject=http://www.serge-paulus.be

RsumPourquoi InDesign?Quel format dexportation?Les pratiques1. gestion des mdias: importation de vidos2. Les cartes (Google Maps)3. Les fichiers audio4. Structure du texte: les hyperliens5. Structure du texte: table des matires6. Structure du texte: navigation

Exportation: les rglages corrects1. pdf 2. ePub (mise en page fixe)3. Le format Flash4. Publish Online

page suivante: Page prc: TDM: Bouton 9: Bouton 10:

Software

Indesign - comment créer un document multimedia dynamique