Didacticiel 3 : ajout d’incrustations interactives

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.

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

Sélectionnez Importer plusieurs articles.

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).

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

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

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.

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.

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.

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.

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.

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

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.

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 ».

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.

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.

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.

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

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.

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.

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.

Ouvrez Enjoy_v.indd dans InDesign et passez à la page 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.

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.

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

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.

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

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.

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

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

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.

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

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.

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.

Ouvrez Enjoy_v.indd et passez à la page 3.

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.

Dans le panneau Overlay Creator, sélectionnez Panorama.

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.

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.

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

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

Enregistrez et fermez les fichiers InDesign.

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 ».

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

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

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

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.

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.

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.

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

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

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.

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.