Übung 3: Hinzufügen interaktiver Überlagerungen

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

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

Wählen Sie „Mehrere Artikel importieren“.

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.

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

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

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.

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.

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.

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

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.

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

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

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.

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.

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.

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.

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

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

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.

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.

Öffnen Sie „Enjoy_v.indd“ in InDesign und gehen Sie zu Seite 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.

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

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

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

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

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

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

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

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.

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

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.

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.

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

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

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

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.

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.

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

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

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

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

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

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

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

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.

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.

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.

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

Starten Sie den Adobe Content Viewer auf Ihrem iPad.

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.

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.