Lesbestand 3: interactieve overlays toevoegen

Voordat u artikelen importeert, opent u de InDesign-brondocumenten in de map TutorialAssets > CityGuide_Folio om te controleren of alle koppelingen zijn bijgewerkt en de bestanden zijn opgeslagen.

Navigeer naar de artikelweergave en kies de optie Import Article (Artikel importeren) in het menu van het deelvenster Folio Builder.

Selecteer Import Multiple Articles (Meerdere artikelen importeren).

Klik op het pictogram van de map Locatie en navigeer naar TutorialAssets > CityGuide_Folio. Klik op Openen.

Selecteer de map CityGuide_Folio en niet een submap.

Klik op OK om de artikelen in de map CityGuide_Folio te importeren en te uploaden naar de server.

Sleep het artikel WiFi Ad naar het einde van de lijst.

Klik in het deelvenster Folio Builder op het pijlpictogram om terug te keren naar de folioweergave. Selecteer het folio City Guide en kies Eigenschappen folio in het deelvenster Folio Builder.

Typ City Guide Monthly als publicatienaam.

De publicatienaam komt niet overeen met de folionaam. De publicatienaam wordt weergegeven in de viewer. De folionaam wordt gebruikt voor interne doeleinden, zoals koppelingen en het instellen van uitvoeringen.

Als u dit nog niet hebt gedaan, geeft u Cover_v.jpg bij Verticaal en Cover_h.jpg bij Horizontaal op. Klik vervolgens op OK. Deze omslagafbeeldingen worden weergegeven in de map CityGuide_Folio.

De voorvertoning van omslag wordt weergegeven in de viewerbibliotheek. Voor het publiceren van de app zijn voorvertoningen van omslagen vereist.

Navigeer in het deelvenster Folio Builder naar de lay-outweergave van het Enjoy_Article en dubbelklik op Staande lay-out om Enjoy_v.indd te openen.

Selecteer het gereedschap Rechthoek op de werkbalk en sleep vervolgens een rechthoek over het 'D.I.Y. Meet'-logo op de eerste pagina. Controleer of de rechthoek geen streek of vulling heeft.

Open het deelvenster Hyperlinks (kies Venster > Interactief > Hyperlinks) en kies vervolgens Nieuwe hyperlink in het deelvenstermenu.

Selecteer URL in het menu Koppelen naar en typ een URL in het URL-veld (wij hebben http://www.bikeworks.org/ gebruikt). Schakel het selectievakje Gedeelde hyperlinkbestemming uit. Laat onder Appearance de selectievakjes Invisible Rectangle en None ingeschakeld. Klik op OK.

Dubbelklik in het deelvenster Folio Builder op Liggende lay-out om het document Enjoy_h.indd te openen. Kopieer en plak het hyperlinkobject van het bestand Enjoy_v.indd naar het bestand Enjoy_h.indd. Plaats het object over het 'D.I.Y. Meet'-logo.

Als u snel een voorvertoning van het document wilt weergeven, slaat u het document op en kiest u Bestand > Voorvertoning van folio. Klik op de hyperlink. Sluit Adobe Content Viewer vervolgens af.

Kies in het bestand Enjoy_h.indd het volgende: Bestand > Plaatsen, blader naar de map CityGuide_Folio > Enjoy_Article > Links en dubbelklik op cycling_432x234.mpg. Plaats het filmbestand in de rechterbovenhoek.

De ontwerpers hebben een videoafbeelding met een filmpictogram gemaakt om aan te geven dat het object interactief is. Vervolgens gebruikt u die afbeelding als poster.

Selecteer in het deelvenster Media (Venster > Interactief > Media) de optie Choose Image in het pop-upmenu Poster. Dubbelklik op cyclist.jpg in de map CityGuide_Folio > Enjoy_Article > Links.

De nieuwe posterafbeelding wordt weergegeven. Laten we nu het deelvenster Overlay Creator gebruiken om te bepalen hoe de film wordt afgespeeld.

Kies Venster > Uitbreiding > Overlay Creator om het deelvenster Overlay Creator te openen.

Terwijl het filmobject nog is geselecteerd, selecteert u Controller tonen bij tikken in het deelvenster Overlay Creator.

Kopieer de afbeelding met het selectiegereedschap, schakel over naar Enjoy_v.indd en plak de afbeelding. Verplaats deze naar het lege gebied op de eerste pagina en lijn deze uit op de omringende objecten.

Als u een voorvertoning van de film wilt weergeven, slaat u het document op en kiest u Bestand > Voorvertoning van folio. Klik op de film om deze af te spelen. Sluit de Adobe Content Viewer vervolgens af.

Open Enjoy_v.indd in InDesign en ga naar pagina 2.

Selecteer de zeven afbeeldingen tussen de rode pijlen en klik vervolgens op de knop Align Horizontal Centers en Align Vertical Centers in het configuratiescherm. Centreer de afbeeldingen tussen de pijlen.

Terwijl de afbeeldingen nog zijn geselecteerd, kiest u Venster > Interactief > Objectstatussen om het deelvenster Objectstatussen weer te geven. Klik op de knop Convert Selection To Multi-State Object.

Elke afbeelding wordt weergegeven als een afzonderlijke status in het deelvenster Objectstatussen.

Wijzig de objectnaam in Zeeslakken in het deelvenster Objectstatussen.

Wanneer uw objecten met meerdere statussen in het horizontale en verticale document dezelfde objectnaam hebben, wordt de status onthouden wanneer u de iPad draait. Nu u het object met meerdere statussen hebt gemaakt, moet u gebruikers de mogelijkheid bieden om hier doorheen te bladeren.

Kies Venster > Interactief > Knoppen om het deelvenster Knoppen weer te geven en selecteer vervolgens de rode pijl aan de linkerkant.

Klik op Object omzetten naar knop en kies vervolgens Ga naar vorige status via het pluspictogram naast Actions.

Laten we nu de weergave van de knop licht wijzigen wanneer de gebruiker hierop tikt.

Klik op [Klikken] in het deelvenster Knoppen en klik vervolgens op het pictogram Slagschaduw in het configuratiescherm.

Selecteer de rode pijl aan de rechterkant, zet deze om in een knop en pas de actie Go To Next State toe. Stel de weergave voor [Klikken] in op een slagschaduw.

Met de knoppen kunnen gebruikers tikken om van afbeelding naar afbeelding te gaan. Laten we ze de mogelijkheid bieden om met veeggebaren door dia's te bladeren.

Selecteer het object met meerdere statussen. Selecteer in het deelvenster Overlay Creator de optie Veeggebaar om status te wijzigen.

Kopieer en plak de pijlen en het object met meerdere statussen van het bestand Enjoy_v.indd naar pagina 2 van het bestand Enjoy_h.indd. Plaats de pijlen onder het object met meerdere statussen zodat het beter past.

Als u een voorvertoning van de diavoorstelling wilt weergeven, slaat u het document op en kiest u Bestand > Voorvertoning van folio. Klik op de navigatieknoppen om door de dia's te bladeren. Sluit Adobe Content Viewer vervolgens af.

Open Enjoy_v.indd en ga naar pagina 3.

Selecteer het gereedschap Rechthoekkader in de gereedschapsset en sleep om een rechthoek van de gewenste grootte te maken.

Selecteer Panorama in het deelvenster Overlay Creator.

Klik op de bronmap en selecteer de map CourtyardPano in de map CityGuide_Folio > Enjoy_Article > Links. Klik op Openen.

De voorbeeldrechthoek heeft de vorm aangenomen van de panorama-afbeeldingen, maar we willen dat het klikgebied kleiner is.

Houd Ctrl+Shift (Windows) of Command+Shift (Mac OS) ingedrukt en sleep een selectiehandgreep om het formaat van het panoramaobject te wijzigen in ongeveer 400 x 400 pixels.

Laten we de standaardinstellingen voor het panorama gebruiken om het volledige scala aan bewegingsmogelijkheden te bieden.

Kopieer en plak het panoramaobject van het bestand Enjoy_v.indd naar pagina 3 van het bestand Enjoy_h.indd.

Sla de InDesign-bestanden op en sluit deze.

Als u dit nog niet hebt gedaan, installeert u de Adobe Content Viewer vanuit de App Store op uw iPad. Zoek in de App Store naar ''Content Viewer''.

Sluit uw iPad aan op uw Mac OS-computer en start de Adobe Content Viewer-app.

Navigeer in het deelvenster Folio Builder naar het folio City Guide dat u zojuist hebt gemaakt.

Kies onder in het deelvenster Voorvertoning > Voorvertonen op [naam iPad-apparaat].

Bekijk het folio City Guide Magazine.

• Draai de iPad zodat zowel de horizontale als de verticale versie van het bestand wordt weergegeven.

• Maak een veeggebaar naar links en naar rechts om verschillende artikelen weer te geven. Veeg omhoog en omlaag om een artikel te lezen.

• Blader naar het Enjoy-artikel. Controleer of de interactieve overlays werken.

• Tik op een niet-interactief gebied om de navigatiebalken weer te geven en tik op de knop Startpagina om naar het begin van het folio te gaan. Tik op de knop Inhoudsopgave in de linkerbovenhoek om de inhoudsopgave en miniaturen weer te geven. Sleep de scrubber om door voorvertoningen van het artikel te bladeren.

Kies Aanmelden in het menu van het deelvenster Folio Builder. Meld u vervolgens aan met een Adobe-id die geverifieerd is voor samenwerking met DPS.

Als u een Creative Cloud-lidmaatschap hebt, gebruikt u uw Creative Cloud-aanmeldgegevens. Als u geen Creative Cloud-lidmaatschap hebt, meldt u zich aan bij http://digitalpublishing.acrobat.com en volgt u de aanwijzingen om uw account te verifiëren.

Nadat u bent aangemeld, selecteert u het folio City Guide in het deelvenster. Kies vervolgens Uploaden naar de Folio Producer in het deelvenstermenu.

De folio-elementen worden naar de acrobat.com-server geüpload.

Als u dit nog niet hebt gedaan, installeert u de Adobe Content Viewer vanuit de App Store op uw iPad.

Start de Adobe Content Viewer op uw iPad.

Als u zich nog niet hebt aangemeld, tikt u op de knop Aanmelden. Meld u aan met de Adobe-id waarmee u zich hebt aangemeld bij het deelvenster Folio Builder.

Uw iPad moet verbinding hebben met internet als u zich wilt aanmelden.

Wanneer hierom wordt gevraagd, downloadt u het folio City Guide Magazine en geeft u dit weer.

Als u InDesign-brondocumenten bewerkt, selecteert u het artikel en kiest u Bijwerken in het deelvenstermenu om de artikelen bij te werken. In de Adobe Content Viewer op de iPad wordt u gevraagd om het bijgewerkte folio te downloaden.