Samouczek 3: Dodawanie nakładek interaktywnych

Szukaj

Ostatnia aktualizacja 21 maj 2021

Ten samouczek dotyczy folderu CityGuide_Folio, który znajduje się w folderze TutorialAssets. Nauczysz się tworzyć obiekty interaktywne bezpośrednio w programie InDesign. Na końcu tej lekcji pierwsza strona głównego artykułu będzie wyglądać na urządzeniu iPad tak, jak przedstawiono to poniżej.

final_enjoy — Gotowe folio, wyświetlone na urządzeniu iPad

A. Widok poziomy B. Widok pionowy C. Hiperłącza D. Nakładki wideo

Jeśli wcześniej nie wykonano tej czynności, pobierz zasoby samouczka. Zobacz Konfiguracja samouczka.

Importowanie artykułów

W poprzedniej lekcji utworzyliśmy artykuł poprzez otwarcie dokumentu źródłowego i wybranie polecenia Dodaj artykuł. Inną metodą jest importowanie artykułów. W przypadku wykorzystania odpowiedniej struktury folderu oraz konwencji nazywania plików można zaimportować wiele artykułów lub tylko jeden.

Podczas importu pojedynczego artykułu należy wskazać lokalizację jego folderu. Podczas importu wielu artykułów należy wskazać lokalizację folderu folio.

Przed zaimportowaniem artykułów należy otworzyć dokumenty źródłowe programu InDesign w folderze TutorialAssets > CityGuide_Folio, aby upewnić się, że wszystkie łącza zostały uaktualnione, a pliki zapisane.
Przejdź do widoku artykułu, a następnie w menu panelu Folio Builder wybierz polecenie Importuj artykuł.
Wybierz polecenie Importuj wiele artykułów.
Kliknij ikonę Folder lokalizacji i przejdź do folderu TutorialAssets > CityGuide_Folio. Kliknij przycisk Otwórz.

Zaznacz folder CityGuide_Folio, a nie podfolder.
Kliknij przycisk OK, aby zaimportować artykuły z folderu CityGuide_Folio i przesłać je do serwera.
Przeciągnij artykuł Reklama WiFi i upuść go na końcu listy.

Panel Folio Builder po zaimportowaniu artykułów

Zmiana właściwości folio

W panelu Folio Builder kliknij ikonę strzałki, aby wrócić do widoku folio. Zaznacz folio Przewodnik miejski, a następnie w panelu Folio Builder wybierz opcję Właściwości folio.
Jako nazwę publikacji wpisz City Guide Monthly.

Nazwa publikacji jest inna niż nazwa folio. Nazwa publikacji jest wyświetlana w przeglądarce. Pole Nazwa folio jest wykorzystywana wewnątrz struktury, np. do tworzenia łączy i konfigurowania wersji.
Jeśli jeszcze tego nie zrobiono, wskaż plik Cover_v.jpg dla Pionowo oraz Cover_h.jpg dla Poziomo, a następnie kliknij OK. Obrazy okładki są wyświetlane w folderze CityGuide_Folio.

Podgląd okładki pojawia się w bibliotece przeglądarki. Podglądy okładki są wymagane w przypadku chęci publikacji aplikacji.

Okno dialogowe Właściwości folio

Dodawanie interaktywnego hiperłącza

Teraz zmodyfikujemy dokumenty Enjoy, aby wprowadzić obiekty interaktywne.

Program InDesign oferuje wiele funkcji interaktywnych. Jednak tylko niektóre z nich działają z narzędziami wydawnictw elektronicznych. Poza obsługiwanymi funkcjami natywnymi, panel Kreator nakładek zawiera nakładki interaktywne, które działają tylko z narzędziami wydawnictw elektronicznych.

W pierwszej kolejności utwórz obiekt interaktywny dla logo „D. I. Y. Meet”.

W panelu Folio Builder przejdź do widoku układu Enjoy_Article i kliknij dwukrotnie opcję Układ pionowy, aby otworzyć plik Enjoy_v.indd.
Na pasku narzędzi wybierz narzędzie Prostokąt, a następnie przeciągnij prostokąt na logo „D. I. Y. Meet” na pierwszej stronie. Upewnij się, że prostokąt nie ma obrysu ani wypełnienia.
Otwórz panel Hiperłącza (wybierz folder Okno > Interaktywne > Hiperłącza), a następnie wybierz polecenie Nowe hiperłącze z menu panelu.
Wybierz URL z menu Połącz z i wpisz adres URL w polu URL (w naszym przykładzie http://www.bikeworks.org/). Usuń zaznaczenie opcji Udostępnione miejsce docelowe hiperłącza. W obszarze Wygląd zostaw zaznaczenia Niewidoczny prostokąt i Brak. Kliknij OK.

Stosowanie hiperłącza w ramce prostokąta
W panelu Folio Builder kliknij dwukrotnie Układ poziomy, aby otworzyć dokument Enjoy_h.indd. Skopiuj obiekt hiperłącza z pliku Enjoy_v.indd i wklej go do pliku Enjoy_h.indd. Przenieś obiekt na logo „D. I. Y. Meet”.
Aby szybko uzyskać szybki podgląd dokumentu, zapisz go i wybierz folder Plik > Podgląd folio. Kliknij hiperłącze. Następnie zamknij aplikację Adobe Content Viewer.

Domyślnie hiperłącza otwierane są w aplikacji Viewer, a nie w przeglądarce urządzenia przenośnego. Aby zmienić ustawienia, tak aby otwierana była strona internetowa w mobilnej wersji przeglądarki Safari, można użyć panelu Kreatora nakładek. W dalszej części dowiesz się więcej o panelu Kreatora nakładek.

Tworzenie nakładki filmowej

Filmy dodane do dokumentu w programie InDesign stają się interaktywne po utworzeniu zestawu plików. Nauczysz się, jak dodawać filmy, a następnie zmieniać ustawienia przy pomocy panelu Kreatora nakładek. Dodamy film o tematyce rowerowej.

Dla pliku Enjoy_h.indd wybierz opcję Plik > Umieść, a następnie przejdź do folderu CityGuide_Folio > Enjoy_Article > Links i kliknij dwukrotnie plik cycling_432x234.mpg. Umieść plik filmu w prawym górnym rogu.

Aby zaznaczyć, że obiekt jest interaktywny, programiści stworzyli obrazek wideo z ikoną filmu. W dalszej części nauczysz się wykorzystywać ten obrazek jako plakat.
W panelu Multimedia (Okno > Interaktywne > Multimedia), w wyskakującym menu Plakat wybierz polecenie Wybierz obraz. Kliknij dwukrotnie plik cyclist.jpg w folderze CityGuide_Folio > Enjoy_Article > Links.

Zostanie wyświetlony nowy obraz plakatu. Teraz pokażemy, jak przy pomocy panelu Kreatora nakładek określić sposób odtwarzania filmu.
Wybierz polecenie Okno > Rozszerzenie > Kreator nakładek, aby otworzyć panel Kreator nakładek.
Przy zaznaczonym obiekcie filmowym wybierz polecenie Dotknij, aby wyświetlić kontrolkę, dostępne w panelu Kreator nakładek.

Używanie Kreatora nakładek w celu edycji ustawień filmu
Przy użyciu narzędzia Zaznaczanie skopiuj obraz i wklej go do pliku Enjoy_v.indd. Przesuń obraz na wolne miejsce na pierwszej stronie i wyrównaj go względem otaczających obiektów.
Aby uzyskać podgląd filmu, zapisz dokument i wybierz polecenie Plik > Podgląd Folio. Kliknij film, aby go odtworzyć. Następnie zamknij aplikację Adobe Content Viewer.

Tworzenie nakładki pokazu slajdów

Teraz zajmiemy się tworzeniem interaktywnego pokazu slajdów przy pomocy panelu Stany obiektów. Dodaliśmy już obrazy do drugiej strony w pliku „Enjoy” o orientacji pionowej. Teraz nauczysz się układać je w stos, konwertować je na obiekty wielostanowe, a także tworzyć przyciski ułatwiające nawigowanie pomiędzy slajdami.

Otwórz plik Enjoy_v.indd w programie InDesign i przejdź na stronę 2.
Zaznacz siedem obrazów znajdujących się pomiędzy czerwonymi strzałkami, a następnie kliknij w panelu sterowania przyciski Wyrównaj środki w poziomie i Wyrównaj środki w pionie. Wyśrodkuj obrazy pomiędzy strzałkami.
Przy zaznaczonych obrazach wybierz Okno > Interaktywne > Stany obiektów, aby wyświetlić panel Stany obiektów. Kliknij przycisk Konwertuj zaznaczenie na obiekt wielostanowy.

Obrazy połączone w jeden obiekt wielostanowy

Każdy obraz jest wyświetlany jako osobny stan w panelu Stany obiektów.
W panelu Stany obiektów zmień nazwę obiektu naSea Slugs.

Kiedy obiekty wielostanowe w dokumentach o orientacji poziomej i pionowej mają tę samą nazwę obiektu, stan jest zapamiętywany podczas obracania iPada. Skoro wiesz już, jak tworzyć obiekty wielostanowe, pokażemy Ci, jak je przewijać.
Wybierz polecenie Okno > Interaktywne > Przyciski, aby wyświetlić panel Przyciski, a następnie wybierz czerwoną strzałkę po lewej.
Kliknij ikonę Konwertuj obiekt na przycisk, a następnie rozwiń ikonę plusa obok pozycji Działania i wybierz pozycję Przejdź do poprzedniego stanu.

Tworzenie przycisków nawigacji

Teraz nauczysz się, jak sprawić, aby wygląd przycisku ulegał zmianie po jego puknięciu przez użytkownika.
Kliknij opcję [Kliknięcie] w panelu Przyciski, a następnie kliknij w panelu sterowania ikonę Cień.
Zaznacz czerwoną strzałkę po prawej, przekonwertuj ją na przycisk, a następnie zastosuj działanie Przejdź do następnego stanu. Spraw, aby działanie [Kliknięcie] rzuciło cień.

Przyciski te umożliwiają użytkownikom przechodzenie pomiędzy obrazami poprzez pukanie. Możemy także pozwolić im robić to samo poprzez przesunięcie palcem po ekranie.
Zaznacz obiekt wielostanowy. W panelu Kreator nakładek wybierz opcję Przesuń palcem, aby zmienić stan.

Włączanie obsługi przesuwania palcem w pokazie slajdów
Skopiuj strzałki i obiekt wielostanowy z pliku Enjoy_v.indd i wklej je na stronie 2 w pliku Enjoy_h.indd. W celu zachowania przejrzystości i wygody obsługi przesuń strzałki poniżej obiektu wielostanowego.
Aby uzyskać podgląd pokazu slajdów, zapisz dokument i wybierz polecenie Plik > Podgląd folio. Klikaj przyciski nawigacji, aby przewijać pokaz slajdów. Następnie zamknij aplikację Adobe Content Viewer.

Tworzenie nakładki panoramy

Panorama wymaga sześciu obrazów z których każdy stanowić będzie jedną ze ścian sześcianu.

Otwórz plik Enjoy_v.indd i przejdź na stronę 3.
Wybierz narzędzie Ramka prostokątna z przybornika i przeciągnij, aby utworzyć prostokąt o dowolnej wielkości.
W panelu Kreatora nakładek wybierz przycisk Panorama.
Kliknij folder Źródło i zaznacz folder CourtyardPano w folderze CityGuide_Folio > Enjoy_Article > Links. Kliknij przycisk Otwórz.

Prostokąt elementu zastępczego przybrał kształt obrazów panoramy, jednak my chcemy, aby obszar do klikania był mniejszy.
Przytrzymując wciśnięte klawisze Ctrl+Shift (Windows) lub Command+Shift (Mac OS) przeciągnij uchwyt zaznaczenia, tak aby zmienić rozmiar obiektu panoramy do wartości ok. 400 x 400 pikseli.

Tworzenie nakładki panoramy

Użyjmy ustawień domyślnych panoramy, aby zapewnić pełny zakres ruchu.
Skopiuj obiekt panoramy z pliku Enjoy_v.indd i wklej go na stronie 3 w pliku Enjoy_h.indd.
Zapisz i zamknij pliki programu InDesign.

Podgląd folio na iPadzie (tylko Mac OS)

Następnie uzyskamy podgląd folio przy użyciu polecenia Podgląd w urządzeniu. Jeśli posiadasz komputer z systemem Windows, możesz pominąć tę sekcję i przejść do następnej, gdzie znajdują się informacje dotyczące uzyskiwania podglądu metodą wysyłania i pobierania plików.

Jeśli jeszcze tego nie zrobiono, zainstaluj aplikację Adobe Content Viewer na iPadzie (dostępna w sklepie App Store). W serwisie App Store należy wyszukać pozycję „Content Viewer”.
Podłącz iPada do komputera z systemem Mac OS, a następnie uruchom aplikację Adobe Content Viewer.
W panelu Folio Builder przejdź do nowo utworzonego folio Przewodnik miejski (City Guide).
U dołu panelu wybierz opcję Podgląd > Podgląd w [nazwa urządzenia iPad].
Otwórz folio Przewodnik miejski.
- Obracając iPada, zobaczysz plik zarówno w orientacji poziomej, jak i pionowej.
- Przesuń palcem w lewo lub w prawo, aby wyświetlić poszczególne artykuły. Przesuń palcem w górę lub w dół, aby przeczytać artykuł.
- Przejdź do artykułu Enjoy. Upewnij się, że interaktywne nakładki działają.
- Puknij obszar nieinteraktywny, aby wyświetlić paski nawigacyjne, a następnie puknij przycisk strony głównej, aby przeskoczyć do początku folio. Puknij przycisk spisu treści w lewym górnym rogu ekranu, aby zobaczyć spis treści i miniaturki. Za pomocą scrubbera możesz przeglądać dostępne artykuły.
Dotknij ekranu, aby wyświetlić paski nawigacji w aplikacji Adobe Content Viewer

Przesyłanie i podgląd plików

Folia można przeglądać na iPadzie także po zalogowaniu się do panelu Folio Builder, a następnie przesłaniu i pobraniu folio.

W menu panelu Folio Builder wybierz polecenie Zaloguj się. Następnie zaloguj się za pomocą identyfikatora Adobe ID, który został autoryzowany do użytku w pakiecie DPS.

Jeśli masz konto Creative Cloud, użyj poświadczeń z tej usługi. Jeśli nie masz konta Creative Cloud, zaloguj się na stronie http://digitalpublishing.acrobat.com i wykonaj instrukcje na ekranie, aby zweryfikować konto.
Po zalogowaniu się zaznacz folio Przewodnik miejski, a następnie w menu panelu wybierz polecenie Prześlij do Folio Producer.

Zasoby folio zostaną następnie przesłane do serwera acrobat.com.
Jeśli jeszcze tego nie zrobiono, zainstaluj aplikację Adobe Content Viewer na iPadzie (dostępna w sklepie App Store).

Uwaga:

Jeśli masz inne urządzenie przenośne, jak np. tablet Android lub Kindle Fire, możesz pobrać aplikację Adobe Content Viewer z serwisu Google Play lub Amazon Appstore.
Uruchom aplikację Adobe Content Viewer na iPadzie.
Aby się zalogować, dotknij przycisk Zaloguj się. Zaloguj się za pomocą tego samego identyfikatora Adobe ID, którego używasz do logowania się do panelu Folio Builder.

iPad musi być połączony z Internetem, aby możliwe było zalogowanie się.
Kiedy pojawi się monit, pobierz i otwórz folio Magazyn Przewodnik miejski.

W przypadku edycji dowolnego z dokumentów źródłowych programu InDesign zaznacz artykuł i z menu panelu wybierz polecenie Aktualizuj. W aplikacji Adobe Content Viewer na iPadzie zostanie wyświetlony monit o pobranie zaktualizowanego folio.

Dalsze kroki

Omówiliśmy podstawy tworzenia artykułów i folio oraz dodawania nakładek interaktywnych. Aby uzyskać więcej informacji na temat nakładek oraz pozostałych funkcji pakietu DPS, wykonaj jedną z poniższych czynności:

Otwórz dokumenty źródłowe w folderze Overlay_Examples_Folio, a następnie wypróbuj różne zasoby układów. Istniejące nakładki można edytować z poziomu dokumentów lub utworzyć własne.
Pobierz bezpłatną aplikację DPS Tips. W serwisie App Store na iPadzie lub iPhonie wyszukaj pozycję „DPS Tips” lub przeszukaj serwisy Google Play Store, jeśli posiadasz urządzenie z systemem Android, bądź też Amazon Appstore, jeśli posiadasz Kindle Fire.
Czy chcesz opublikować aplikację w sklepie Apple App Store? Jeśli jesteś subskrybentem Adobe Creative Cloud, możesz utworzyć i przesłać nieograniczoną liczbę aplikacji dla iPada do obsługi pojedynczych folio. Możesz także kupić licencję Single Edition, która zezwala na tworzenie aplikacji do obsługi pojedynczych folio. Aby utworzyć aplikację, zaznacz folio w panelu Folio Builder, a następnie w menu panelu wybierz polecenie Utwórz aplikację. Zostanie wyświetlony monit o pobranie samouczka Step-by-Step Publishing Guide (j. ang.). Aby stworzyć swoją pierwszą aplikację, postępuj zgodnie z instrukcjami zawartymi w samouczku.
Jeśli chcesz utworzyć aplikację do obsługi wielu folio, kup subskrypcję pakietu Digital Publishing Suite w wersji Professional lub Enterprise.