Dans ce didacticiel, vous utiliserez le dossier CityGuide_Folio du dossier TutorialAssets. Vous allez créer des objets interactifs directement dans InDesign. A la fin de cette leçon, voici ce à quoi la première page de votre article principal devrait ressembler sur l’iPad.

final_enjoy
Folio terminé affiché sur l’iPad

A. Vue en format paysage (horizontale) B. Vue en format portrait (verticale) C. Hyperliens D. Incrustations vidéo 

Si cela n’est pas déjà fait, téléchargez les fichiers du didacticiel. Voir Configuration des didacticiels.

Importation d’articles

Au cours de la leçon précédente, vous avez créé un article en ouvrant le document source et en cliquant sur Ajouter un article. Une autre méthode consiste à importer les articles. Si vous utilisez la structure de dossiers et les conventions d’appellation des fichiers adéquates, vous avez la possibilité d’importer un seul ou plusieurs articles.

Lorsque vous importez un article, désignez un dossier d’articles. Lorsque vous importez plusieurs articles, désignez le dossier du folio.

  1. Avant d’importer des articles, ouvrez les documents source InDesign dans le dossier TutorialAssets > CityGuide_Folio pour vérifier que tous les liens sont à jour et que les fichiers sont enregistrés.

  2. Accédez à la vue de l’article et sélectionnez Importer un article dans le menu du panneau Folio Builder.

  3. Sélectionnez Importer plusieurs articles.

  4. Cliquez sur l’icône du dossier Emplacement, puis naviguez jusqu’au dossier situé sous TutorialAssets > CityGuide_Folio. Cliquez sur Ouvrir.

    Sélectionnez le dossier CityGuide_Folio (pas un sous-dossier).

  5. Cliquez sur OK pour importer les articles dans le dossier CityGuide_Folio et les charger sur le serveur.

  6. Faites glisser l’article de la publicité WiFi à la fin de la liste.

    tut2_imported_1399930299372
    Panneau Folio Builder après l’importation d’articles

Modification des propriétés d’un folio

  1. Dans le panneau Folio Builder, cliquez sur l’icône en forme de flèche pour revenir à la vue du folio. Sélectionnez le folio « City Guide », puis Propriétés du folio dans le panneau Folio Builder.

  2. Dans le champ Nom de la publication, saisissez City Guide Magazine.

    Le nom de la publication est différent du nom du folio. Le nom de la publication s’affiche dans le lecteur de contenu. Le nom du folio est utilisé à des fins internes, comme la liaison et la configuration de rendus.

  3. Si vous ne l’avez pas déjà fait, spécifiez Cover_v.jpg dans le champ Verticale et Cover_h.jpg dans le champ Horizontale, puis cliquez sur OK. Ces images de couverture apparaissent dans le dossier CityGuide_Folio.

    L’aperçu de la couverture s’affiche dans la bibliothèque du lecteur de contenu. L’aperçu de la couverture est obligatoire afin de publier l’application.

    tut2_folioprops_1399930299541
    Boîte de dialogue Propriétés du folio

Ajout d’un hyperlien interactif

Vous allez à présent modifier les documents Enjoy pour y inclure des objets interactifs.

InDesign comporte de nombreuses fonctions d’interactivité. Cependant, seulement quelques-unes de ces fonctions peuvent être utilisées avec les outils de publication numérique. Outre les fonctions natives prises en charge, le panneau Overlay Creator inclut des incrustations interactives qui fonctionnent uniquement avec les outils de publication numérique.

Dans un premier temps, créez un objet hyperlien pour le logo « D. I. Y. Meet ».

  1. Dans le panneau Folio Builder, naviguez vers la vue de mise en page de l’article Enjoy_Article, puis double-cliquez sur Mise en forme portrait pour ouvrir le document Enjoy_v.indd.

  2. Sélectionnez l’outil Rectangle dans la barre d’outils, puis faites glisser un rectangle au-dessus du logo « D. I. Y. Meet » sur la première page. Assurez-vous que le rectangle ne possède pas de contour ni de fond.

  3. Ouvrez le panneau Hyperliens (Fenêtre > Objet interactif > Hyperliens), puis choisissez la commande Nouvel hyperlien dans le menu du panneau.

  4. Sélectionnez l’URL dans le menu Lien vers, puis saisissez une adresse URL dans le champ URL (nous avons utilisé http://www.bikeworks.org/). Décochez la case Cible d’hyperlien partagée. Dans la zone Aspect, laissez Rectangle invisible et Aucun sélectionnés. Cliquez sur le bouton OK.

    hyperlink_native_1399930299459
    Application d’un hyperlien à un bloc rectangulaire
  5. Dans le panneau Folio Builder, double-cliquez sur Mise en forme paysage pour ouvrir le document Enjoy_h.indd. Copiez et collez l’objet hyperlien du fichier Enjoy_v.indd dans le fichier Enjoy_h.indd. Déplacez l’objet sur le logo « D. I. Y. Meet ».

  6. Pour prévisualiser rapidement le document, enregistrez-le puis choisissez la commande Fichier > Aperçu du folio. Cliquez sur l’hyperlien. Quittez ensuite Adobe Content Viewer.

Par défaut, les hyperliens s’ouvrent dans un lecteur de contenu « in-app », pas dans le navigateur mobile. Vous pouvez utiliser le panneau Overlay Creator afin de modifier les paramètres pour que cela ouvre une page Web dans Safari mobile. Vous trouverez plus d’informations sur le panneau Overlay Creator dans les pages qui suivent.

Création d’une incrustation de séquence vidéo

Les séquences que vous ajoutez à un document InDesign deviennent interactives lorsque vous regroupez les fichiers. Vous allez ajouter la vidéo puis utiliser le panneau Overlay Creator pour modifier les paramètres. Nous allons ajouter une séquence sur le vélo.

  1. Dans le fichier Enjoy_h.indd, choisissez la commande Fichier > Importer, naviguez jusqu’au dossier sous CityGuide_Folio > Enjoy_Article > Links, puis double-cliquez sur le fichier cycling_432x234.mpg. Importez le fichier de la séquence dans l’angle supérieur droit.

    Les concepteurs ont créé une image vidéo avec une icône de séquence pour indiquer que l’objet est interactif. Vous utiliserez ensuite cette image en tant qu’affiche.

  2. Dans le panneau Multimédia (Fenêtre > Objet interactif > Multimédia), choisissez l’option Sélectionner une image dans le menu contextuel Affiche. Double-cliquez sur le fichier cyclist.jpg dans le dossier CityGuide_Folio > Enjoy_Article > Links.

    La nouvelle image d’affiche apparaît. Utilisons maintenant le panneau Overlay Creator pour déterminer la lecture de la séquence.

  3. Sélectionnez Fenêtre > Extensions > Overlay Creator pour ouvrir le panneau Overlay Creator.

  4. Alors que l’objet de la séquence est toujours sélectionné, choisissez l’option Tapoter pour afficher la barre de contrôle, dans le panneau Overlay Creator.

    tut2_movie_overlay_1399930299754
    Utilisation du panneau Overlay Creator pour modifier les paramètres d’une séquence
  5. A l’aide de l’outil Sélection, copiez l’image, passez dans le document Enjoy_v.indd, puis collez-la. Déplacez-la vers la zone vide de la première page, puis alignez-la avec les objets qui l’entourent.

  6. Pour prévisualiser la séquence, enregistrez le document puis choisissez la commande Fichier > Aperçu du folio. Cliquez sur la séquence pour la lire. Quittez ensuite Adobe Content Viewer.

Création d’une incrustation de diaporama

Nous allons maintenant créer un diaporama interactif à l’aide du panneau Etats d’objet. Nous avons déjà ajouté les images sur la seconde page du fichier « Enjoy ». Vous allez les disposer sous forme de pile, les convertir en objet à états multiples et créer des boutons pour naviguer entre les diapositives.

  1. Ouvrez Enjoy_v.indd dans InDesign et passez à la page 2.

  2. Sélectionnez les sept images entre les flèches rouges, puis cliquez sur les boutons Aligner les centres dans le sens horizontal et Aligner les centres dans le sens vertical dans le panneau Contrôle. Centrez les images entre les flèches.

  3. Avec les images encore sélectionnées, choisissez Fenêtre > Objet interactif > Etats d’objet pour afficher le panneau Etats d’objet. Cliquez ensuite sur le bouton Convertir la sélection en objet à états multiples.

    mso_1399930299661
    Images combinées en objet à états multiples

    Chaque image s’affiche comme un état distinct dans le panneau Etats d’objet.

  4. Dans le panneau Etats d’objet, modifiez le nom de l’objet en Limaces de mer.

    Quand vos objets à états multiples issus des documents à l’horizontale et à la verticale ont un nom d’objet identique, l’état est mémorisé lorsque vous faites pivoter l’iPad. Maintenant que vous avez créé l’objet à états multiples, vous devez permettre aux utilisateurs de passer d’un état à l’autre.

  5. Choisissez la commande Fenêtre > Objet interactif > Boutons pour afficher le panneau correspondant, puis sélectionnez la flèche rouge sur la gauche.

  6. Cliquez sur le bouton Convertir l’objet en bouton, puis choisissez Atteindre l’état précédent à partir de l’icône Plus en regard de l’option Actions.

    navbutton_1399930300045
    Création de boutons de navigation

    Nous allons maintenant faire changer légèrement d’apparence le bouton lorsque l’utilisateur le touche.

  7. Cliquez sur [Clic] dans le panneau Boutons, puis cliquez sur l’icône Ombre portée du panneau de contrôle.

  8. Sélectionnez la flèche rouge sur la droite, convertissez-la en bouton, puis appliquez l’action Atteindre l’état suivant. Appliquez une ombre portée à l’aspect [Clic].

    Les boutons permettent aux utilisateurs de se déplacer d’une image à l’autre. Nous allons également leur permettre d’effectuer un glissement pour faire avancer les diapositives.

  9. Sélectionnez l’objet à états multiples. Dans le panneau Overlay Creator, sélectionnez Faire glisser pour modifier l’état.

    tut2_slideshow_swipe_1399930299947
    Glissement activé pour le diaporama
  10. Copiez et collez les flèches et l’objet à états multiples du fichier Enjoy_v.indd sur la page 2 du fichier Enjoy_h.indd. Déplacez les flèches sous l’objet à états multiples pour optimiser l’ajustement.

  11. Pour prévisualiser le diaporama, enregistrez le document puis choisissez la commande Fichier > Aperçu du folio. Cliquez sur les boutons de navigation pour vous déplacer dans les diapositives. Quittez ensuite Adobe Content Viewer.

Création d’une incrustation de panorama

Les panoramas nécessitent six images représentant les côtés d’un cube.

  1. Ouvrez Enjoy_v.indd et passez à la page 3.

  2. Sélectionnez l’outil Bloc rectangulaire dans la boîte à outils, puis faites-le glisser pour créer un rectangle de n’importe quelle taille.

  3. Dans le panneau Overlay Creator, sélectionnez Panorama.

  4. Cliquez sur le dossier Source, puis sélectionnez le dossier CourtyardPano sous CityGuide_Folio > Enjoy_Article > Links. Cliquez sur Ouvrir.

    Le rectangle de substitution suppose la forme des images du panorama, mais nous cherchons à réduire la taille de la zone de clic.

  5. En maintenant les touches Ctrl + Maj (Windows) ou Commande + Maj (Mac OS) enfoncées, faites glisser la poignée de sélection afin de redimensionner l’objet panorama pour que sa taille soit d’environ 400 x 400 pixels.

    tut2_pano_1399930300190
    Création d’une incrustation de panorama

    Utilisons les paramètres par défaut du panorama pour disposer d’une vaste marge de manœuvre.

  6. Copiez et collez l’objet panorama du fichier Enjoy_v.indd sur la page 3 du fichier Enjoy_h.indd.

  7. Enregistrez et fermez les fichiers InDesign.

Aperçu du folio sur votre iPad (Mac OS uniquement)

Ensuite, vous allez utiliser la fonction Aperçu sur le périphérique pour obtenir un aperçu de votre folio. Si vous utilisez un ordinateur Windows, passez à la section suivante pour savoir comment obtenir un aperçu en téléchargeant des fichiers.

  1. Si vous ne l’avez pas déjà fait, installez Adobe Content Viewer depuis l’App Store sur votre iPad. Dans App Store, consultez la rubrique « Content Viewer ».

  2. Connectez l’iPad à l’ordinateur Mac OS et lancez l’application Adobe Content Viewer.

  3. Dans le panneau Folio Builder, naviguez jusqu’au folio City Guide que vous venez de créer.

  4. Dans la partie inférieure du panneau, choisissez la commande Aperçu > Aperçu sur [nom du périphérique iPad].

  5. Affichez le folio City Guide Magazine.

    • Tournez l’iPad de manière à observer les versions horizontale et verticale du fichier.

    • Glissez vers la gauche et vers la droite pour afficher différents articles. Faites glisser vers le haut et vers le bas pour lire un article.

    • Recherchez l’article Enjoy. Vérifiez que les incrustations interactives fonctionnent.

    • Touchez une zone non interactive afin d’afficher les barres de navigation et touchez le bouton Origine pour revenir au début du folio. Touchez le bouton Table des matières situé dans l’angle supérieur gauche, afin de visualiser le contenu de la table des matières et les vignettes. Faites glisser la barre de défilement pour parcourir les aperçus d’article.

    viewer_widgets_1399930298981
    Touchez l’écran pour afficher les barres de navigation dans Adobe Content Viewer.

Téléchargement et prévisualisation des fichiers

Vous pouvez également afficher un aperçu des folios sur votre iPad en vous connectant au panneau Folio Builder et en téléchargeant le folio.

  1. Sélectionnez Se connecter dans le menu du panneau Folio Builder. Connectez-vous ensuite en utilisant un ID Adobe qui a été vérifié pour fonctionner avec DPS.

    Si vous avez un abonnement à Creative Cloud, utilisez vos informations d’identification Creative Cloud. Si vous n’avez pas d’abonnement Creative Cloud, connectez-vous à http://digitalpublishing.acrobat.com et suivez les invites pour vérifier votre compte.

  2. Une fois la connexion établie, sélectionnez le folio City Guide dans le panneau, puis choisissez Télécharger vers Folio Producer dans le menu du panneau.

    Les ressources du folio sont téléchargées vers le serveur acrobat.com.

  3. Si vous ne l’avez pas déjà fait, installez Adobe Content Viewer depuis l’App Store sur votre iPad.

    Remarque :

    si vous possédez un périphérique mobile différent, tel qu’une tablette Android ou un Kindle Fire, vous pouvez télécharger Adobe Content Viewer à partir de Google Play ou d’Amazon Appstore.

  4. Sur l’iPad, démarrez Adobe Content Viewer.

  5. Si vous n’êtes pas encore connecté, touchez le bouton Se connecter. Connectez-vous avec le même ID Adobe que pour accéder au panneau Folio Builder.

    Votre iPad doit être connecté à Internet pour que vous puissiez vous connecter.

  6. Lorsque vous y êtes invité, téléchargez et affichez le folio « City Guide Magazine ».

    Si vous modifiez l’un des documents source InDesign, sélectionnez l’article, puis choisissez dans le menu du panneau l’option Mettre à jour pour mettre à jour les articles. Dans Adobe Content Viewer sur l’iPad, vous êtes invité à télécharger le folio mis à jour.

Que faire ensuite ?

Vous avez appris les principes de base de la création des folios et des articles, ainsi que de l’ajout d’incrustations interactives. Pour en savoir plus sur les incrustations et les autres fonctionnalités DPS, effectuez l’une des opérations suivantes :

  • Ouvrez les documents source dans Overlay_Examples_Folio et testez les différentes ressources d’incrustation. Vous pouvez modifier les incrustations existantes dans les documents ou construire vos propres incrustations.

  • Téléchargez l’application gratuite DPS Tips. Faites une recherche sur « DPS Tips » dans l’App Store de votre iPad ou iPhone, ou effectuez une recherche dans Google Play Store pour les périphériques Android ou dans Amazon Appstore pour le Kindle Fire.

  • Souhaitez-vous publier une application sur l’App Store d’Apple ? Si vous êtes abonné à Adobe Creative Cloud, vous pouvez créer et envoyer un nombre illimité d’applications à folio unique pour iPad. Sinon, vous pouvez acheter une licence Single Edition pour créer une application à folio unique. Lorsque vous êtes prêt à créer votre application, sélectionnez le folio dans le panneau Folio Builder, puis choisissez Créer l’application dans le menu du panneau. Vous êtes invité à télécharger le guide de publication pas à pas. Suivez les instructions de ce guide pour créer votre première application.

  • Si vous souhaitez créer des applications à folios multiples, vous pouvez obtenir un abonnement Professional ou Enterprise à Digital Publishing Suite.

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne