Diese Übung basiert auf dem Ordner „CityGuide_Folio“ im Verzeichnis „TutorialAssets“. Sie erstellen direkt in InDesign interaktive Objekte. Am Ende dieser Lektion sollte die erste Seite des Hauptartikels auf dem iPad wie folgt aussehen.

Anzeige des fertigen Folios auf dem iPad

A. Ansicht im Querformat (horizontal) B. Ansicht im Hochformat (vertikal) C. Hyperlinks D. Video-Überlagerungen 

Sofern noch nicht geschehen, laden Sie die Arbeitselemente für diese Übung herunter. Siehe Übungseinrichtung.

Importieren von Artikeln

In der vorherigen Lektion haben Sie einen Artikel erstellt, indem Sie das Quelldokument geöffnet und „Artikel hinzufügen“ gewählt haben. Eine andere Methode besteht darin, Artikel zu importieren. Wenn Sie die richtige Ordnerstruktur verwenden und die richtigen Dateibenennungsregeln beachten, können Sie einen einzelnen oder mehrere Artikel importieren.

Wenn Sie einen Artikel importieren, verweisen Sie auf einen Artikelordner. Wenn Sie mehrere Artikel importieren, verweisen Sie auf den Folioordner.

  1. Öffnen Sie vor dem Importieren von Artikeln die InDesign-Quelldokumente im Ordner „TutorialAssets“ > „CityGuide_Folio“, um sicherzustellen, dass alle Links aktualisiert und die Dateien gespeichert sind.

  2. Navigieren Sie zur Artikelansicht und wählen Sie im Menü des Folio Builder-Bedienfelds die Option „Artikel importieren“.

  3. Wählen Sie „Mehrere Artikel importieren“.

  4. Klicken Sie auf das Ordnersymbol „Position“ und navigieren Sie zu „TutorialAssets“ > „CityGuide_Folio“. Klicken Sie auf „Öffnen“.

    Wählen Sie den Ordner „CityGuide_Folio“ (kein Unterorder) aus.

  5. Klicken Sie auf „OK“, um die Artikel in den Ordner „CityGuide_Folio“ zu importieren und auf den Server hochzuladen.

  6. Ziehen Sie den Artikel „WiFi Ad“ per Drag & Drop an das Ende der Liste.

    Folio Builder-Bedienfeld nach dem Import von Artikeln

Ändern von Folioeigenschaften

  1. Klicken Sie im Folio Builder-Bedienfeld auf das Pfeilsymbol, um zur Folioansicht zurückzukehren. Wählen Sie das Folio „City Guide“ und dann im Folio Builder-Bedienfeld die Option „Folioeigenschaften“ aus.

  2. Geben Sie als Veröffentlichungsnamen City Guide Monthly ein.

    Der Veröffentlichungsname unterscheidet sich vom Folionamen. Der Name der Veröffentlichung wird im Viewer angezeigt. Der Folioname wird für interne Zwecke wie Verknüpfen und Einrichten von Darstellungen verwendet.

  3. Wenn Sie dies noch nicht getan haben, geben Sie „Cover_v.jpg“ für „Vertikal“ und „Cover_h.jpg“ für „Horizontal“ an und klicken Sie auf „OK“. Die Deckblattbilder werden im Ordner „CityGuide_Folio“ angezeigt.

    Die Deckblattvorschau wird in der Viewer-Bibliothek angezeigt. Die Vorschauansichten des Deckblatts sind zur Veröffentlichung der App erforderlich.

    Dialogfeld „Folioeigenschaften“

Hinzufügen eines interaktiven Hyperlinks

Jetzt bearbeiten Sie die Enjoy-Dokumente, sodass sie interaktive Objekte enthalten.

InDesign verfügt über zahlreiche Interaktivitätsfunktionen. Leider sind nur einige dieser Funktionen in Verbindung mit Werkzeugen zur digitalen Veröffentlichung verfügbar. Neben den unterstützten systemeigenen Funktionen enthält das Overlay Creator-Bedienfeld interaktive Überlagerungen, die nur mit Werkzeugen zur digitalen Veröffentlichung verwendet werden können.

Erstellen Sie zunächst ein Hyperlink-Objekt für das „D. I. Y. Meet“-Logo.

  1. Navigieren Sie im Folio Builder-Bedienfeld zur Layoutansicht von „Enjoy_Article“ und doppelklicken Sie auf „Hochformatlayout“, um „Enjoy_v.indd“ zu öffnen.

  2. Wählen Sie das Rechteck-Werkzeug in der Symbolleiste aus und ziehen Sie anschließend ein Rechteck über das „D. I. Y. Meet“-Logo auf der ersten Seite auf. Stellen Sie sicher, dass das Rechteck keine Kontur oder Füllung aufweist.

  3. Öffnen Sie das Hyperlinksbedienfeld (wählen Sie „Fenster“ > „Interaktiv“ > „Hyperlinks“) und wählen Sie im Bedienfeldmenü die Option „Neuer Hyperlink“ aus.

  4. Wählen Sie im Menü „Verknüpfen mit“ die Option „URL“ aus und geben Sie im Feld „URL“ eine URL-Adresse ein (wir haben http://www.bikeworks.org/ verwendet). Deaktivieren Sie „Freigegebenes Hyperlink-Ziel“. Lassen Sie unter „Darstellung“ die Optionen „Unsichtbares Rechteck“ und „Ohne“ ausgewählt. Klicken Sie auf „OK“.

    Anwenden eines Hyperlinks auf einen Rechteckrahmen
  5. Doppelklicken Sie im Folio Builder-Bedienfeld auf „Querformatlayout“, um das Dokument „Enjoy_h.indd“ zu öffnen. Kopieren Sie das Hyperlink-Objekt aus der Datei „Enjoy_v.indd“ und fügen Sie dieses Objekt in die Datei „Enjoy_h.indd“ ein. Verschieben Sie das Objekt über das „D. I. Y. Meet“-Logo.

  6. Um schnell eine Vorschau dieses Dokuments anzeigen zu können, speichern Sie das Dokument und wählen Sie „Datei“ > „Foliovorschau“. Klicken Sie auf den Hyperlink. Schließen Sie dann den Adobe Content Viewer.

Standardmäßig werden Hyperlinks in einem App-eigenen Viewer geöffnet und nicht im mobilen Browser. Einstellungen können im Overlay Creator-Bedienfeld festgelegt werden, damit eine Website im Mobile Safari geöffnet wird. Weitere Informationen zum Overlay Creator-Bedienfeld finden Sie im nächsten Abschnitt.

Erstellen einer Filmüberlagerung

Filme, die Sie zu einem InDesign-Dokument hinzufügen, werden interaktiv, wenn Sie die Dateien bündeln. Sie fügen das Video hinzu und ändern die Einstellungen dann im Overlay Creator-Bedienfeld. Wir fügen einen Radsportfilm hinzu.

  1. Wählen Sie bei geöffneter Datei „Enjoy_h.indd“ „Datei“ > „Platzieren“, navigieren Sie zum Ordner „CityGuide_Folio“ > „Enjoy_Article“ > „Links“ und doppelklicken Sie auf „cycling_432x234.mpg“. Platzieren Sie die Filmdatei in der oberen rechten Ecke.

    Die Designer erstellen ein Videobild mit einem Filmsymbol, das anzeigt, dass das Objekt interaktiv ist. Als Nächstes verwenden Sie dieses Bild als Standbild.

  2. Wählen Sie im Medienbedienfeld („Fenster“ > „Interaktiv“ > „Medien“) im Popup-Menü „Standbild“ die Option „Bild auswählen“. Doppelklicken Sie im Ordner „CityGuide_Folio“ > „Enjoy_Article“ > „Links“ auf „cyclist.jpg“.

    Das neue Standbild wird angezeigt. Nun bestimmen wir mithilfe des Overlay Creator-Bedienfelds, wie der Film wiedergegeben werden soll.

  3. Wählen Sie „Fenster“ > „Erweiterung“ > „Overlay Creator“, um das Overlay Creator-Bedienfeld zu öffnen.

  4. Wählen Sie bei ausgewähltem Filmobjekt im Overlay Creator-Bedienfeld die Option „Zum Anzeigen des Steuerelements tippen“.

    Bearbeiten der Filmeinstellungen mit dem Overlay Creator
  5. Wählen Sie das Bild aus, wechseln Sie zu „Enjoy_v.indd“ und fügen Sie das Bild dort ein. Verschieben Sie es in den leeren Bereich auf der ersten Seite und richten Sie es an den umliegenden Objekten aus.

  6. Um eine Vorschau des Films anzeigen zu können, speichern Sie das Dokument und wählen Sie „Datei“ > „Folio-Vorschau“. Klicken Sie auf den Film, um ihn abzuspielen. Schließen Sie dann den Adobe Content Viewer.

Erstellen einer Diashow-Überlagerung

Jetzt erstellen wir eine interaktive Diashow im Objektstatus-Bedienfeld. Wir haben bereits die Bilder zur zweiten Seite der vertikalen Datei „Enjoy“ hinzugefügt. Sie ordnen sie in einem Stapel an, konvertieren sie in ein Objekt mit mehreren Status und erstellen Schaltflächen, mit denen Sie durch die Dias navigieren können.

  1. Öffnen Sie „Enjoy_v.indd“ in InDesign und gehen Sie zu Seite 2.

  2. Wählen Sie die sieben Bilder zwischen den roten Pfeilen aus und klicken Sie anschließend in der Systemsteuerung auf die Schaltflächen „An horizontaler Mittelachse ausrichten“ und „An vertikaler Mittelachse ausrichten“. Zentrieren Sie die Bilder zwischen den Pfeilen.

  3. Wählen Sie, während die Bilder immer noch ausgewählt sind, die Optionen „Fenster“ > „Interaktiv“ > „Objektstatus“ aus, um das Objektstatus-Bedienfeld anzuzeigen. Klicken Sie dann auf die Schaltfläche „Auswahl in Objekt mit mehreren Status umwandeln“.

    Zu Objekt mit mehreren Status zusammengefasste Bilder

    Jedes Bild wird im Objektstatus-Bedienfeld als separater Status angezeigt.

  4. Ändern Sie im Objektstatus-Bedienfeld den Objektnamen in Sea Slugs.

    Wenn Ihre Objekte mit mehreren Status in den horizontalen und vertikalen Dokumenten denselben Objektnamen haben, wird der Status beim Drehen des iPad gespeichert. Nachdem Sie das Objekt mit mehreren Status erstellt haben, müssen Sie den Benutzern das Durchführen eines Bildlaufs ermöglichen.

  5. Wählen Sie „Fenster“ > „Interaktiv“ > „Schaltflächen“, um das Schaltflächenbedienfeld anzuzeigen und wählen Sie den roten Pfeil auf der linken Seite aus.

  6. Klicken Sie auf „Objekt in Schaltfläche konvertieren“ und wählen Sie über das Pluszeichen neben „Aktionen“ die Option „Gehe zu vorherigem Status“ aus.

    Erstellen von Navigationsschaltflächen

    Jetzt legen wir fest, dass sich die Darstellung der Schaltfläche leicht ändert, wenn der Benutzer darauf tippt.

  7. Klicken Sie im Schaltflächen-Bedienfeld auf „[Klicken]“ und anschließend auf das Schlagschattensymbol im Steuerungsbedienfeld.

  8. Wählen Sie den roten Pfeil rechts, konvertieren Sie ihn in eine Schaltfläche und wenden Sie die Aktion „Gehe zu nächstem Status“ an. Machen Sie aus der Darstellung „[Klicken]“ einen Schlagschatten.

    Mit den Schaltflächen kann der Benutzer durch Tippen von Bild zu Bild wechseln. Wir werden auch zulassen, dass der Benutzer mit der Blättergeste von Bild zu Bild wechseln kann.

  9. Wählen Sie das Objekt mit mehreren Status aus. Wählen Sie im Overlay Creator-Bedienfeld „Zum Ändern des Status blättern“.

    Aktivieren des Blätterns für die Diashow
  10. Kopieren Sie die Pfeile und das Objekt mit mehreren Status aus der Datei „Enjoy_v.indd“ und fügen Sie sie auf Seite 2 der Datei „Enjoy_h.indd“ ein. Verschieben Sie die Pfeile unter das Objekt mit mehreren Status, damit sie besser auf die Seite passen.

  11. Um eine Vorschau der Diashow anzeigen zu können, speichern Sie das Dokument und wählen Sie „Datei“ > „Foliovorschau“. Blättern Sie mithilfe der Navigationsschaltflächen durch die Bilder. Schließen Sie dann den Adobe Content Viewer.

Erstellen einer Panorama-Überlagerung

Zum Erzeugen eines Panoramaeffekts sind sechs Bilder erforderlich, die den sechs Seiten eines Würfels entsprechen.

  1. Öffnen Sie die Datei „Enjoy_v.indd“ und wechseln Sie zu Seite 3.

  2. Wählen Sie im Werkzeugbedienfeld das Rechteckrahmen-Werkzeug aus und ziehen Sie es, um ein Rechteck beliebiger Größe zu erstellen.

  3. Wählen Sie im Overlay Creator-Bedienfeld die Option „Panorama“.

  4. Klicken Sie auf den Ordner „Quelle“ und wählen Sie im Ordner „CityGuide_Folio“ > „Enjoy_Article“ > „Links“ den Ordner „CourtyardPano“ aus. Klicken Sie auf „Öffnen“.

    Das Platzhalterrechteck hat die Form der Panoramabilder angenommen, wir möchten jedoch den Klickbereich verkleinern.

  5. Ziehen Sie das Panoramaobjekt, während Sie Strg+Umschalt (Windows) bzw. Befehl+Umschalt (Mac OS) gedrückt halten, mithilfe eines Auswahlgriffs auf eine Größe von ungefähr 400 x 400 Pixel.

    Erstellen einer Panorama-Überlagerung

    Wir verwenden für das Panorama die Standardeinstellungen, um den vollständigen Bewegungsfreiraum sicherzustellen.

  6. Kopieren Sie das Panoramaobjekt aus der Datei „Enjoy_v.indd“ und fügen Sie es auf Seite 3 der Datei „Enjoy_h.indd“ ein.

  7. Speichern Sie die InDesign-Dateien und schließen Sie sie.

Anzeigen der Vorschau des Folios auf dem iPad (nur Mac OS)

Als Nächstes verwenden Sie die Funktion „Vorschau auf Gerät“, um Ihr Folio in der Vorschau anzuzeigen. Wenn Sie mit einem Windows-Computer arbeiten, fahren Sie mit dem nächsten Abschnitt fort, um zu erfahren, wie Sie eine Vorschau durch Hoch- und Herunterladen von Dateien anzeigen.

  1. Installieren Sie – falls noch nicht geschehen – den Adobe Content Viewer aus dem App Store auf Ihrem iPad. Suchen Sie im App Store nach „Content Viewer“.

  2. Schließen Sie das iPad an Ihren Mac an und starten Sie die Adobe Content Viewer-App.

  3. Navigieren Sie im Folio Builder-Bedienfeld zu dem eben erstellten Folio „City Guide“.

  4. Wählen Sie unten im Bedienfeld die Option „Vorschau“ > „Vorschau auf [Gerätename des iPads]“ aus.

  5. Zeigen Sie das Folio „City Guide Magazine“ an.

    • Drehen Sie das iPad so, dass Sie die horizontale und die vertikale Version der Datei sehen.

    • Blättern Sie nach links und rechts, um verschiedene Artikel anzuzeigen. Blättern Sie nach oben und nach unten, um einen Artikel zu lesen.

    • Gehen Sie zum Artikel „Enjoy“. Vergewissern Sie sich, dass die interaktiven Überlagerungen funktionieren.

    • Tippen Sie auf einen nicht interaktiven Bereich, um die Navigationsleisten anzuzeigen und tippen Sie auf die Startschaltfläche, um an den Anfang des Folios zu springen. Tippen Sie auf die Schaltfläche „Inhaltsverzeichnis“ oben links, um das Inhaltsverzeichnis und die Miniaturbilder anzuzeigen. Ziehen Sie die Navigationsleiste, um durch Artikelvorschauen zu blättern.

    Tippen Sie, um Navigationsleisten im Adobe Content Viewer anzuzeigen

Hochladen der Dateien und Anzeigen einer Vorschau

Sie können eine Vorschau von Folios auf Ihrem iPad auch anzeigen, indem Sie sich beim Folio Builder-Bedienfeld anmelden, das Folio hochladen und dann das Folio herunterladen.

  1. Wählen Sie im Menü des Folio Builder-Bedienfelds die Option „Anmelden“ aus. Melden Sie sich dann mithilfe einer Adobe-ID an, die bekanntermaßen mit DPS verwendet werden kann.

    Wenn Sie eine Creative Cloud-Mitgliedschaft haben, verwenden Sie Ihre Creative Cloud-Anmeldeinformationen. Wenn Sie keine Creative Cloud-Mitgliedschaft haben, melden Sie sich bei http://digitalpublishing.acrobat.com an und befolgen Sie die Anweisungen, um Ihr Konto zu verifizieren.

  2. Wählen Sie nach dem Anmelden das Folio „City Guide“ im Bedienfeld aus und klicken Sie dann im Bedienfeldmenü auf „In Folio Producer laden“.

    Die Folioelemente werden auf den acrobat.com-Server hochgeladen.

  3. Installieren Sie – falls noch nicht geschehen – den Adobe Content Viewer aus dem App Store auf Ihrem iPad.

    Hinweis:

    Wenn Sie ein anderes Mobilgerät verwenden, z. B. ein Android Tablet oder ein Kindle Fire, können Sie den Adobe Content Viewer von Google Play oder dem Amazon Appstore herunterladen.

  4. Starten Sie den Adobe Content Viewer auf Ihrem iPad.

  5. Falls Sie sich noch nicht angemeldet haben, klicken Sie auf die Schaltfläche „Anmelden“. Melden Sie sich mit derselben Adobe-ID an, die Sie für die Anmeldung beim Folio Builder-Bedienfeld verwendet haben.

    Ihr iPad muss zur Anmeldung mit dem Internet verbunden sein.

  6. Laden Sie nach Aufforderung das City Guide Magazine-Folio herunter und zeigen Sie es an.

    Wenn Sie eines der InDesign-Quelldokumente bearbeiten, wählen Sie den Artikel aus und wählen Sie im Bedienfeldmenü den Befehl „Aktualisieren“, um die Artikel zu aktualisieren. Im Adobe Content Viewer auf dem iPad werden Sie aufgefordert, das aktualisierte Folio herunterzuladen.

Weitere Vorgehensweise

Sie haben die Grundlagen des Erstellens von Artikeln und Folios und das Hinzufügen von interaktiven Überlagerungen erlernt. Um mehr über Überlagerungen und andere DPS-Funktionen zu erfahren, führen Sie einen der folgenden Schritte aus:

  • Öffnen Sie die Quelldokumente im Overlay_Examples_Folio und experimentieren Sie mit den verschiedenen Überlagerungselementen. Sie können die vorhandenen Überlagerungen in den Dokumenten bearbeiten oder eigene Überlagerungen erstellen.

  • Laden Sie die kostenlose App „DPS Tips“ herunter. Suchen Sie im App Store Ihres iPads oder iPhones nach „DPS Tips“ oder führen Sie eine Suche im Google Play Store (für Android-Geräte) bzw. im Amazon Appstore (für Kindle Fire) durch.

  • Möchten Sie eine App im Apple App Store veröffentlichen? Wenn Sie Abonnent der Adobe Creative Cloud sind, können Sie eine unbegrenzte Anzahl an Apps für einzelne Folios für das iPad erstellen und übertragen. Alternativ können Sie eine Single Edition-Lizenz erwerben, um eine App für einzelne Folios zu erstellen. Wenn Sie bereit sind, Ihre App zu erstellen, wählen Sie das Folio im Folio Builder-Bedienfeld aus und wählen Sie dann im Bedienfeldmenü die Option „App erstellen“. Sie werden aufgefordert, die detaillierte Anleitung zur Veröffentlichung herunterzuladen. Befolgen Sie die Anweisungen in dieser Anleitung, um Ihre erste App zu erstellen.

  • Wenn Sie Apps für mehrere Folios erstellen möchten, können Sie ein Professional- oder Enterprise-Abonnement für die Digital Publishing Suite erwerben.

Dieses Werk unterliegt den Bedingungen der Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen der Creative Commons-Lizenz.

Rechtliche Hinweise   |   Online-Datenschutzrichtlinie