3. oktatóanyag: Interaktív rátétek hozzáadása

Keresés

Utoljára frissítve: 2021. máj. 20.

Jelen feladat végrehajtása közben a TutorialAssets mappa alatti CityGuide_Folio mappával dolgozunk. Az interaktív elemeket közvetlenül InDesign alatt készítjük. Alább látható, hogyan fog kinézni jelen feladat végén a fő cikkely elkészült első oldala az iPad eszközön.

final_enjoy — Az elkészült fólió az iPad eszközön megjelenítve

A. Fekvő (horizontális) nézet B. Álló (vertikális) nézet C. Hiperhivatkozások D. Videó rátétek

Ha ezt korábban még nem tette meg, töltse le az oktatóanyag forráselemeit. Lásd: Az oktatóanyag beállítása.

Cikkelyek importálása

Az előző lecke során a forrásdokumentum megnyitását követően a Cikkely hozzáadása elemre kattintva hozott létre cikkelyt. A cikkelyek importálhatók is. Ha a megfelelő struktúrát és fájlelnevezési szabályokat betartotta, akkor importálhat egy önálló cikkelyt vagy egy cikkelysorozatot.

Egy cikkely importálásakor mutasson a cikkelymappára. Több cikkely importálásakor mutasson a fóliómappára.

Cikkelyimportálás előtt nyissa meg a TutorialAssets > CityGuide_Folio mappa InDesign-forrásdokumentumait, hogy minden hivatkozás frissüljön, és a fájlokat a rendszer elmentse.
Navigáljon cikkely nézethez, és válassza a Folio Builder panelmenü Cikkely importálása elemét.
Válassza a Több cikkely importálása lehetőséget.
Kattintson a Hely mappaikonra, és navigáljon a TutorialAssets > CityGuide_Folio mappához. Kattintson a Megnyitás gombra.

A CityGuide_Folio mappát és ne egy almappát jelöljön ki.
Az OK gombbal importálhatja a CityGuide_Folio mappa cikkelyeit, és feltöltheti a kiszolgálóra.
Húzza át a WiFi Ad cikkelyt a lista végére.

A Folio Builder panel a cikkelyek importálása után

Fólió tulajdonságainak módosítása

A fólió nézethez a Folio Builder panel nyíl ikonjára kattintva lehet visszatérni. Jelölje ki a „City Guide” fóliót, majd válassza a Folio Builder panel Fólió tulajdonságai elemét.
A Kiadványnév mezőbe gépelje be, hogy City Guide Monthly.

A kiadványnév különbözik a fólió nevétől. A kiadványnév az, ami a megjelenítőben látható lesz. A Fóliónév belső célokra szolgál, pl. változatok létrehozására és összekapcsolására.
Ha eddig még nem tette meg, álló tájolású nézethez adja meg a Cover_v.jpg képet, fekvő tájolású nézethez pedig a Cover_h.jpg képet, majd kattintson az OK gombra. Ezek a borítóképek megjelennek a CityGuide_Folio mappában.

A borító előképe a megjelenítő könyvtárában lesz látható. A borítóelőkép szükséges az alkalmazás közzétételéhez.

Fólió tulajdonságai párbeszédpanel

Interaktív hiperhivatkozás hozzáadása

Most az „Enjoy” dokumentumokban interaktív objektumokat helyezünk el.

Az InDesign számos interaktív szolgáltatást tesz lehetővé. Ezek a szolgáltatások viszont nem mind működnek a digitális kiadványszerkesztő eszközökben. A támogatott natív szolgáltatások mellett az Overlay Creator panel olyan interaktív rátéteket is tartalmaz, amelyek csak a digitális kiadványszerkesztő eszközökben működnek.

Elsőként hozzunk létre egy hiperhivatkozási objektumot a „D. I. Y. Meet” logó számára.

A Folio Builder panelben navigáljon az Enjoy_Article elrendezési nézetéhez, majd az álló elrendezésre duplán kattintva nyissa meg az Enjoy_v.indd fájlt.
Válassza ki az eszközsor Téglalap eszközét, majd elhúzással rajzoljon egy téglalapot az első oldal „D.I.Y. Meet” logójára. Ügyeljen arra, hogy a téglalapnak ne legyen se körvonala, se kitöltése.
Nyissa meg a Hiperhivatkozások panelt (Ablak > Interaktív > Hiperhivatkozások), majd válassza a panelmenü Új hiperhivatkozás elemét.
Válasszon URL-címet a Hivatkozási cél menüből, és gépelje be az URL-címet az URL-mezőbe (mi a http://www.bikeworks.org/ címet használtuk). Kapcsolja ki a „Megosztott hiperhivatkozási célhely” beállítást. A Megjelenés alatt hagyja kijelölve a Láthatatlan téglalap és Nincs elemeket. Kattintson az OK gombra.

Hiperhivatkozás alkalmazása téglalap keretre
Az Enjoy_h.indd dokumentum megnyitásához a Folio Builder panelben kattintson duplán a fekvő elrendezésre. Másolás–beillesztéssel másolja át az Enjoy_v.indd fájl hiperhivatkozási objektumát az Enjoy_h.indd fájlba. Helyezze az objektumot a „D.I.Y. Meet” logóra.
A dokumentum gyors előnézetéhez mentse el a dokumentumot, majd válassza a Fájl > Fólió előnézete elemet. Kattintson a hiperhivatkozásra. Ezután lépjen ki az Adobe Content Viewer alkalmazásból.

A hiperhivatkozások az alapértelmezés szerint nem a mobil böngészőben, hanem az alkalmazáson belüli megjelenítőalkalmazásban jelennek meg. Az Overlay Creator panellel módosíthatók úgy a beállítások, hogy a weblapok a mobil Safari alatt nyíljanak meg. Hamarosan többet is elárulunk az Overlay Creator panelről.

Mozgókép rátét létrehozása

Az InDesign-dokumentumhoz hozzáadott mozgóképek a fájlok kötegelésekor válnak interaktívvá. Hozzáadjuk a videót, majd az Overlay Creator panellel módosítjuk annak beállításait. Egy kerékpározásról szóló mozgóképet adunk hozzá.

Az Enjoy_h.indd fájlban válassza a Fájl > Elhelyezés parancsot, tallózzon ide: CityGuide_Folio > Enjoy_Article > Links mappa, majd kattintson duplán a cycling_432x234.mpg fájlra. Helyezze a mozgóképfájlt a jobb felső sarokba.

Tervezőink létrehoztak a mozgóképhez egy mozgókép ikont az objektum interaktivitásának jelzésére. Most ezt a képet fogjuk poszterképként használni.
A Média panelen (Ablak > Interaktív > Média) válassza a Poszterkép felugró menü Képválasztás funkcióját. Kattintson duplán a cyclist.jpg fájlra a CityGuide_Folio > Enjoy_Article > Links mappában.

A rendszer megjeleníti az új poszterképet. Most pedig adjuk meg az Overlay Creator panelen a mozgókép lejátszási módját.
Válassza az Ablak > Kiterjesztések > Overlay Creator elemet az Overlay Creator panel megnyitásához.
Maradjon a mozgóképobjektum kijelölve, és válassza az Overlay Creator panel Vezérlő megjelenítése érintésre elemét.

A mozgókép-beállítások módosítása az Overlay Creator panellel
A kiválasztás eszközzel másolja a képet a vágólapra, váltson át az Enjoy_v.indd dokumentumra, és ott végezzen beillesztést. Helyezze az első oldal üres részére, és állítsa be a helyét a környező objektumokhoz.
A mozgókép előnézetéhez mentse el a dokumentumot, majd válassza a Fájl > Fólió előnézete elemet. A mozgóképet rákattintással játssza le. Ezután lépjen ki az Adobe Content Viewer alkalmazásból.

Diavetítés rátét készítése

Most pedig hozzunk létre interaktív diavetítést az Objektumállapotok panel használatával. Az álló formátumú „Enjoy” fájl második oldalán már elhelyeztük a képeket. Ezeket fogjuk halomba rendezni, átalakítani többállapotú objektummá, és elkészíteni hozzá a diákon átnavigáló gombokat.

Nyissa meg az Enjoy_v.indd dokumentumot InDesign alkalmazásban, és lapozzon a 2. oldalra.
Jelölje ki a piros nyilak közötti hét képet, majd kattintson a Vezérlőpult „Vízszintes középvonalak igazítása” és „Függőleges középvonalak igazítása” gombjaira. A képeket a két nyíl között helyezze középre.
A képek kijelölését megtartva nyissa meg az Objektumállapotok panelt az Ablak > Interaktív > Objektumállapotok menüelem kiválasztásával. Kattintson a „Kijelölés átalakítása többállapotú objektummá” gombra.

Többállapotú objektummá alakított képek

Az egyes képek külön állapotok formájában jelennek meg az Objektumállapotok panelen.
Az Objektumállapotok panelen adja az objektumnak a Sea Slugs nevet.

Ha az álló és fekvő helyzetű dokumentumban használatos többállapotú objektum neve megegyezik, akkor a pozíciót megőrzi a rendszer az iPad elfordításakor is. Most, hogy a többállapotú objektum elkészült, lehetővé kell tenni, hogy a felhasználó átlapozhassa azt.
Az Ablak > Interaktív > Gombok menüelemmel nyissa meg a Gombok panelt, majd jelölje ki a bal oldali piros nyilat.
Kattintson az „Objektum átalakítása gombbá” elemre, majd a Műveletek melletti plusz jel alatt válassza az „Ugrás az előző állapotra” lehetőséget.

Navigációs gombok létrehozása

Most állítsuk be úgy a gombokat, hogy azok a felhasználó érintésére megváltoztassák megjelenésüket.
Kattintson a Gombok panel Kattintás elemére, majd válassza a vezérlőpult Vetett árnyék ikonját.
Jelölje ki a jobb oldali piros nyilat, alakítsa át gombbá úgy, hogy az „Ugrás a következő állapotra” műveletet állítja be. Állítsa a „Kattintás” megjelenést „Vetett árnyék” beállításra.

A gombok érintésével a felhasználó képről képre léphet. Állítsuk be, hogy átlapozás gesztussal is lapozhatók legyenek a diák.
Jelölje ki a többállapotú objektumot. Az Overlay Creator panelen válassza az Állapotváltoztatás lapozással beállítást.

Átlapozás gesztus bekapcsolása a diavetítésben
Másolás és beillesztéssel másolja át az Enjoy_v.indd fájl nyíl és többállapotú objektumát az Enjoy_h.indd fájl 2. oldalára. Helyezze át a nyilakat a többállapotú objektum alá, hogy jobban elférjenek.
A diavetítés előnézetéhez mentse el a dokumentumot, majd válassza a Fájl > Fólió előnézete elemet. A navigációs gombokkal haladjon át a diákon. Ezután lépjen ki az Adobe Content Viewer alkalmazásból.

Panoráma rátét készítése

A panorámákhoz hat kép szükséges, amelyek egy kocka hat oldalát képviselik.

Nyissa meg az Enjoy_v.indd dokumentumot, és lapozzon a 3. oldalra.
Válassza az eszköztárból a Téglalapkeret eszközt, és elhúzással rajzoljon egy tetszőleges méretű téglalapot.
Az Overlay Creator panelen válassza a Panoráma beállítást.
Kattintson a Forrásmappa elemre, és ott válassza a CourtyardPano nevű mappát: CityGuide_Folio > Enjoy_Article > Links mappa. Kattintson a Megnyitás gombra.

A helyőrző téglalap a panorámaképek alakját követi, de mi a kattintásra érzékeny területet ennél kisebbre kívánjuk beállítani.
A Ctrl+Shift (Windows), illetve Command+Shift (Mac OS) billentyű nyomva tartása mellett, az egyik kijelölésfogantyú elhúzásával méretezzük át a panoráma objektumot kb. 400×400 képpont méretűre.

Panoráma rátét létrehozása

Használjuk a panorámakép teljes mozgathatóságot lehetővé tévő, alapértelmezett beállításait.
Másolás és beillesztéssel másolja át az Enjoy_v.indd fájl panoráma objektumát az Enjoy_h.indd fájl 3. oldalára.
Mentse és zárja be az InDesign-fájlokat.

A fólió előnézetének megtekintése iPad eszközön (csak Mac OS operációs rendszerben van rá mód)

Az alábbi lépések során az Előnézet az eszközön funkcióval fogja megtekinteni a fólió előnézetét. Ha Windows rendszerű számítógépen dolgozik, térjen át a következő részre, mert abban ismertetjük, hogy hogyan lehet fájlok fel- majd letöltése útján betekinteni a fóliókba.

Ha eddig még nem tette meg, telepítse az Adobe Content Viewer alkalmazást az iPad eszközön az App Store beszerzőhelyről. Az App Store beszerzőhelyen keressen rá a „Content Viewer” névre.
Csatlakoztassa iPad készülékét a Mac OS számítógéphez, majd indítsa el az Adobe Content Viewer alkalmazást.
A Folio Builder panelen navigáljon az imént létrehozott „City Guide” fólióhoz.
A panel alján kattintson az Előnézet [iPad eszköz neve] eszközön gombra.
Tekintse meg a City Guide Magazine című fóliót.
- Az iPad elforgatásával megtekintheti a fájl álló és fekvő formátumú változatát is.
- Végezzen lapozó gesztust balra és jobbra az egyes cikkelyek megjelenítéséhez. Felfelé és lefelé irányuló lapozással olvasható végig egy cikkely.
- Keresse ki az Enjoy című cikkelyt. Ellenőrizze, hogy működnek-e az interaktív rátétek.
- A navigációs sáv megjelenítéséhez kattintson egy nem interaktív területre, majd érintse meg a Home (Kezdőlap) gombot, amellyel a fólió elejére léphet. A bal felső sarokban található Tartalomjegyzék gombot megérintve megjeleníthető a tartalomjegyzék és a bélyegképek. Az elhúzóval tallózhat a cikkelyek előnézeti képei között.
Érintéssel jelenítse meg a navigációs sávot az Adobe Content Viewer alkalmazásban

Fájlok feltöltése és előnézeti képének megtekintése

Úgy is megtekintheti a fóliókat az iPad eszközön, hogy előtte bejelentkezik a Folio Builder panelre, feltölti, majd az eszközön letölti a fóliót.

A Folio Builder panelen válassza a panelmenü Bejelentkezés elemét. Majd jelentkezzen be a DPS-sel történő munkavégzésre érvényesített Adobe azonosítóval.

A Creative Cloud-tagok Creative Cloud fiókjuk hitelesítő adatainak megadásával is bejelentkezhetnek. Ha nem Creative Cloud-tag, jelentkezzen be a http://digitalpublishing.acrobat.com oldalra, és az utasításoknak megfelelően érvényesítse fiókját.
Bejelentkezést követően jelölje ki a „City Guide” fóliót a panelen, majd válassza a Feltöltés a Folio Producer számára elemet a panelmenüben.

A rendszer feltölti a fólió forráselemeit az acrobat.com kiszolgálóra.
Ha eddig még nem tette meg, telepítse az Adobe Content Viewer alkalmazást az iPad eszközön az App Store beszerzőhelyről.

Megjegyzés:

Ha más mobil eszközt használ, például Android tablet vagy Kindle Fire eszközt, akkor a Google Play, illetve az Amazon Appstore beszerzőhelyről töltheti le az Adobe Content Viewer alkalmazást.
Indítsa el az Adobe Content Viewer alkalmazást az iPad eszközön.
Ha még nem jelentkezett be, érintse meg a Sign In (Bejelentkezés) gombot. Jelentkezzen be a Folio Builder panelre való bejelentkezéshez használt Adobe ID azonosítóval.

A bejelentkezéshez az iPad eszköznek csatlakoznia kell az internethez.
Amikor a rendszer rákérdez, töltse le és jelenítse meg a City Guide Magazine című fóliót.

Ha közben szerkeszti valamelyik InDesign-forrásdokumentumot, jelölje ki a cikkelyt, és a panelmenü·Frissítés elemét kiválasztva frissítse a cikkelyeket. Az iPad eszközön futó Adobe Content Viewer felajánlja a frissített fólió letöltését.

Hogyan tovább?

Most már tisztában van a cikkelyek és fóliók készítésének és interaktív rátétek hozzáadásának alapjaival. Ha a rátétekről és a DSP egyéb szolgáltatásairól szeretne többet tudni, hajtsa végre a megfelelő műveletet:

Nyissa meg az Overlay_Examples_Folio forrásdokumentumait, és kísérletezgessen a különféle rátét-forráselemekkel. Szerkesztheti a dokumentum rátéteit, és saját rátéteket is összeállíthat.
Töltse le az ingyenes DPS Tips alkalmazást. Az iPad vagy iPhone eszközön keressen rá a „DPS Tips” nevére az App Store beszerzőhelyen, vagy keressen Android eszközökre fejlesztett alkalmazásokat a Google Play Store beszerzőhelyen, illetve Kindle Fire eszközökre fejlesztett alkalmazásokat az Amazon Appstore beszerzőhelyen.
Szeretne közzétenni alkalmazást az Apple App Store beszerzőhelyen? Az Adobe Creative Cloud előfizetői korlátlan számú egyfóliós alkalmazást készíthetnek iPad eszközök számára, melyeket feltölthetnek a beszerzőhelyre. Single Edition licenccel egyfóliós alkalmazások készíthetők. Ha készen áll az alkalmazás elkészítésére, jelölje ki a fóliót a Folio Builder panelen, majd válassza panelmenü Alkalmazás létrehozása elemét. A rendszer kérni fogja, hogy töltse le a Lépésről lépésre kiadási útmutatót. Az alkalmazás összeállításához hajtsa végre az útmutatóban szereplő utasításokat.
Többfóliós alkalmazások készítéséhez a Digital Publishing Suite csomaghoz való Professional és Enterprise előfizetésre is szert tehet.