vendredi 16 novembre 2012

Réaliser un livre interactif SWF/iOS/Android


Voici comment réaliser un livre interactif connecté à des données XML, animé, et déclinable pour le Web, iOS et Android !

Indesign, le logiciel standard de la mise en page, dispose d'un export permettant de réaliser un livre interactif avec l'effet "page qui tourne" au format Flash SWF. Flash permet d'exporter en SWF mais aussi pour iOS et Android. Beaucoup me demandent comment créer un tel livre, et le rendre totalement dynamique, sans avoir à rééditer le fichier natif InDesign pour le mettre à jour. On me demande aussi dans quelle mesure ce type de parution peut être compatible avec les plateformes mobiles. Voici la réponse :

> Télécharger le fichier zip.

1) Dans Flash, réalisez chaque page selon le même gabarit. Et prévoyez que chaque page mesure la moitié de la largeur du livre ouvert. Par exemple, si votre livre doit mesurer 800x600px une fois ouvert, créez autant de fichiers de format 400x600px que de pages dans votre livre. Dans Flash, Chaque page doit utiliser un masque afin d'éviter que les contenus éventuellement placés hors champ n'apparaissent sur les autres pages du même livre, une fois la composition effectuée dans InDesign.


2) Exportez les pages Flash au format SWF dans un dossier de travail, où vous enregistrerez également plus tard le fichier InDesign.

3) Créez un document InDesign pour le Web (unités en pixels) composé de plusieurs pages en vis-à-vis. Le format de page doit être identique au format du fichier Flash si vous souhaitez que le Flash couvre intégralement votre mise en forme (dans notre exemple : 400x300px). Enregistrez le fichier InDesign natif (.indd) dans votre répertoire de travail, près des pages en Flash préalablement créées.

4) Dans chaque page, vous importez ensuite les fichiers SWF un à un ou en lot (Fichier>Importer ou Cmd+D pour Mac, Ctrl+D pour Windows) comme si vous importiez une simple image.

5) Une fois importés, par défaut, les blocs affichent un simple icône Flash sans aperçu de votre mise en forme ; et lors de l'export, le Flash ne sera joué que si l'utilisateur clique sur la page. Pour activer un aperçu de la page et activer la lecture automatique de l'animation de votre page en Flash, faites Fenêtres > Objet interactif > Multimédia. Puis, pour chaque page importée, cochez "Lire au démarrage de la page" et dans le menu "Affiche", sélectionnez "de l'image en cours" pour capturer la première image du SWF en guise d'aperçu, ou bien, importez votre propre image d'aperçu en sélectionnant la dernière option. Dans votre composition, vous pouvez alterner des pages en Flash et des pages classiques InDesign et mixer, dans une même page, des objets interactifs en Flash et des objets graphiques traditionnels (textes et images). Notez toutefois que seuls les éléments en Flash externalisés pourront être mis à jour dynamiquement.


4) Exportez le livre au format Flash SWF (Fichier > Exporter ou Cms+E pour Mac et Ctrl+E pour Windows) dans le répertoire de travail. Et assurez-vous que l'option "Coin de pages interactifs" soit cochée lors de la confirmation de l'export. Dans votre dossier de travail, apparaît désormais le fichier SWF de Indesign (ici : livre.swf) ainsi qu'un répertoire "Ressources" dans lequel InDesign a copié les SWF importés.


5) Il vous reste à lancer la page HTML générée par InDesign, dans votre navigateur, ou bien, à importer le livre.swf dans un autre document Flash si vous souhaitez l'associer à un site réalisé au format Flash SWF. Attention à ne pas modifier l'organisation des fichiers car les éléments sont tous liés entre eux.

6) Pour mettre à jour dynamiquement votre parution, inutile de réouvrir InDesign. Il suffit de rééditer chaque page au format Flash FLA et de l'exporter au format SWF en lieu et place des pages à présent localisées dans le répertoire Ressources. Seul l'aperçu généré en dur dans InDesign et les éventuels éléments mis en forme au sein de InDesign en complément de vos fichiers Flash persisteront. Mais les fichiers SWF externes, demeurant extérieurs au livre, seront instantanément mis à jour.

7) Pour rendre le livre encore plus dynamique (au sens du traitement dynamique des données), vous pouvez associer chaque page en Flash à des médias externes aux fichiers SWF eux-mêmes (images, vidéos, xml), par exemple, et permettre ainsi le développement d'un livre interactif connecté à une base de données. Le format Flash utilisé à l'export de InDesign est compatible avec les animations et les composants tels que FLVPlayBack. Les pages peuvent donc être confortablement enrichies.

Attention, cet export est au format Flash SWF et ne sera pas disponible sur bon nombre de périphériques mobiles ni encapsulable dans une application Air. Il sera compatible uniquement pour des parutions au sein de sites en Flash. Néanmoins, les mises en forme réalisées au sein des pages Flash pourront être réutilisées dans un export Air et proposer une version mobile de la parution, sous la forme d'une application pour iOS ou Android spécifique.

8) Pour un export mobile, vous devrez créer une application spécifique pour iOS et Android, via Flash Pro, Builder ou Flex, à partir des données insérées dans chacune de vos pages Flash. Vous ne disposerez pas de l'effet "page qui tourne" mais vous pourrez, mieux, déployer une interactivité adaptée aux mobiles (gesture multipoint, localisation, accélération, etc). En utilisant des données externes (images externes, vidéos externes, xml), vous pourrez alors centraliser la gestion des mises à jour de votre parution InDesign SWF et des versions mobiles de votre projet.

Si vous souhaitez obtenir une formation détaillée sur ce mécanisme, n'hésitez pas à me contacter. Je vous mettrai en relation avec les centres de formation agréés pour lesquels j'interviens.

Qu'apporte un magazine réalisé via Flash et InDesign par rapport à un magazine réalisé à l'aide des exports Adobe DPS ou Aquafadas ? Le livre via Flash ne requiert pas de licence de parution, et chaque page peut être dessinée sur mesure et intégrer des développements sophistiqués, des jeux, des quizz, des données connectées, des vidéos, etc. Mais aucun système d'arborescence et de navigation de page à page est disponible par défaut dans Flash, contrairement aux dispositifs DPS et Aquafadas. L'avantage des parutions digitales DPS et Aquafadas réside donc dans la gestion simplifiée et désormais conventionnelle des articles et du système ergonomique de lecture des pages. Cette ergonomie, dans le cadre d'un projet Flash, devra être développée manuellement. L'option Flash convient donc pour des périodiques connectés et ludiques, mais peu volumineux et où chaque page reste isolée par rapport aux autres.

4 commentaires:

  1. En même temps on peut aussi le faire en 100% flash, sans jongler entre x logiciels... il y a des petites classes toutes faites a quelques euros qui font ca tres bien.. on exporte en swf, air mobile, etc... et hop. je fais regulierement ce genr ede petits books pour Chanel et je n'utilise QUE flash pro (avec un peu de programmation quand meme pour regler des trucs...).

    RépondreSupprimer
  2. Merci Henri pour ton commentaire. Oui, on peut bien sûr tout faire en unifiant les outils, mais c'est surtout ici pour répondre à des maquettistes InDesign qui veulent exploiter leur logiciel, en codant le moins ou en isolant la partie code de leur propre mise en forme.

    Tes exemples seraient intéressants à montrer. Peux-tu nous donner le lien de tes parutions faites pour tablettes ? De même que les noms des classes dont tu parles ?

    A quand un livre sur ces solutions ; )

    Bien à toi,

    RépondreSupprimer
  3. Après de nombreux tests et sans hésitations, les solutions natives se révèlent bien plus fluides que le format Air dont les performances ne dépassent pas celle d'une fenêtre de navigateur. Je recommande InDesign et un export Application via les licences de publication numérique, telles que Aquafadas (effet page qui tournent si c'est ce que vous recherchez) ou DPS.

    RépondreSupprimer
  4. Avis aux lecteurs, Adobe abandonne le format Air. Ne tenez plus compte de cet article et priorisez définitivement vos développements vers d'autres solutions telles que nous les abordons dans ce blog. Au vu du succès d'audience de cette page qui semble répondre à une véritable attente, je me devais de vous informer de l'évolution des produits.

    RépondreSupprimer