Tworzenie interaktywnej książki

//www.youtube.com/embed/2Ej9nN2Pj0E

Wprowadzenie:

To jest tutorial, który nauczy cię, jak stworzyć podstawową interaktywną książkę przy użyciu hyperPad. Postępując zgodnie z tym tutorialem, zrozumiesz koncepcje potrzebne do złożenia książki.

Struktura projektu:

Projekt hyperPad dzieli się na Sceny, Obiekty i Zachowania.

Sceny:

Sceny zawierają wszystkie obiekty dla twojej aplikacji i są doskonałym sposobem na zorganizowanie różnych części, które składają się na twoją aplikację. Na przykład możesz użyć nowej sceny dla każdej strony książki.

Obiekty:

Obiekty są pojedynczymi elementami w scenie. Obejmuje to wszelkie teksty czy ilustracje. Każdy obiekt może mieć swoje własne zachowania.

Zachowania:

Zachowania to to, co sprawia, że twoja scena i obiekty są interaktywne i nabierają życia.

Importowanie obrazów:

Możesz importować obrazy i ilustracje z Rolki aparatu, Strumienia zdjęć i Dropboxa. hyperPad automatycznie utworzy obrazy o niewielkiej rozdzielczości, więc podczas tworzenia ilustracji pamiętaj, aby pracować z obrazem o rozmiarze 2048×1536. Maksymalny rozmiar obrazu, który Tapapbl może zaimportować, wynosi 2048×2048 pikseli.

Dodatkowo, ponieważ hyperPad obecnie nie obsługuje czcionek ani tekstów sformatowanych, powinieneś również importować swój tekst w formacie PNG z przezroczystym tłem.

Gdy już zaimportujesz wszystkie swoje obrazy, możesz otworzyć Szufladę Obiektów, aby zacząć dodawać je do swojej sceny.

Dodawanie zachowań:

Uczynienie twoich obiektów interaktywnymi jest łatwe w hyperPad.

Najpierw dotknij obiektu, który chcesz uczynić interaktywnym. Następnie w Właściwościach Obiektu, dotknij przycisku „Zachowania”, aby uruchomić edytor zachowań.

W tym tutorialu, interakcją, którą chcemy stworzyć, jest to, że gdy czytelnik dotknie obiektu, przesuwa się on do określonej pozycji.

Z kategorii „Wejście” przeciągnij zachowanie „Rozpoczęto dotykanie” na płótno.

Domyślnie zachowanie Rozpoczęto dotykanie automatycznie wybiera bieżący obiekt. Możesz to zmienić, dotykając grafiki obiektu w właściwościach zachowań.

Następnie przeciągnij zachowanie „Przesuń do punktu” i połącz je ze „Rozpoczęto dotykanie”, które dodałeś w poprzednim kroku. Zachowanie „Przesuń do punktu” przesunie obiekt do wybranego punktu na płótnie.

Możesz wpisać określoną lokalizację, wypełniając pola wejściowe X/Y znajdujące się w „Właściwościach Zachowań”. Możesz również wybrać lokalizację do przesunięcia wizualnie.

Aby to zrobić wizualnie, dotknij grafiki obiektu w właściwościach zachowań. Wybierz obiekt, który chcesz przesunąć, a następnie przesuń niebieski cel do pożądanej lokalizacji.

Gdy już będziesz zadowolony z pozycji, dotknij ikony znaku kontrolnego, aby zaakceptować nową pozycję. Zauważ, że pola X i Y w właściwościach zachowań są automatycznie wypełniane.

Jeśli naciśniesz „Graj” teraz, zobaczysz, że działa to tak, jak zostały ułożone zachowania. Obiekt przesunie się po dotknięciu.

Przewracanie stron i scen:

Teraz, gdy masz swoją pierwszą stronę z ustawionymi interakcjami, możesz dodać dodatkowe strony oraz możliwość przesuwania między nimi.

Istnieje kilka różnych sposobów, w jaki możemy dodać gest przesunięcia. Możesz dodać zachowanie do konkretnego obiektu w swojej scenie, lub dodać je do Zachowań Globalnych, aby wpływało to na wszystkie sceny w twojej książce.

W tym tutorialu dodajmy gest przesunięcia do Zachowań Globalnych, aby nie musieć dodawać go dla każdej nowej sceny.

Aby rozpocząć, otwórz „Menu Tworzenia”, naciskając ikonę w lewym górnym rogu.

Następnie dotknij przycisku „Zachowania Globalne” na dole, aby uruchomić edytor zachowań. Zachowania, które dodasz tutaj, będą miały wpływ na cały twój projekt i będą wykonywane, gdy załadujesz każdą scenę.

Następnie przeciągnij zachowanie „Przesuń w lewo” i dotknij go, gdy zostanie dodane do płótna, aby otworzyć właściwości zachowań.

Zauważ przełącznik „Przesuń na cokolwiek”. Jeśli ten przełącznik jest ustawiony na „Wyłączony”, musisz przesunąć na konkretnym obiekcie, aby wywołać zdarzenie. Ustaw przełącznik w pozycję „Włączony”, abyś mógł przesuwać na cokolwiek i nie być ograniczonym do przesuwania na konkretnym obiekcie.

Uwaga: Jeśli dodasz zachowanie „Przesuń” do zachowań globalnych, nie będzie ono miało wybranego konkretnego obiektu. Obiektem, do którego jesteś ograniczony, jest „Tło”. Jeśli nie ustawisz przełącznika na pozycję „Włączona”, może to wyglądać na działające. Jednak jeśli dodasz inne obiekty przykrywające tło, mogą one zakłócać przesuwanie, szczególnie jeśli mają dodane inne zachowania dotykowe.

Następnie dodaj zachowanie „Załaduj następną scenę” i połącz je z zachowaniem Przesuń. To automatycznie załaduje następną scenę, gdy przeciągniesz palcem w lewo na ekranie.

Jeśli nie masz innych scen w swoim projekcie, aktualna scena zostanie ponownie załadowana. Dodatkowo, jeśli jesteś w ostatniej scenie swojego projektu, następna scena będzie pierwszą w liście scen.

Teraz możesz dodać nową scenę do swojego projektu. Jeśli naciśniesz graj, zobaczysz, że twój gest przesunięcia działa w obu scenach bez konieczności dodawania dodatkowych zachowań.

Podsumowanie:

To wszystko, co musisz wiedzieć, aby stworzyć interaktywną książkę w hyperPad. Możesz eksperymentować z różnymi zachowaniami, aby stworzyć szeroką gamę interakcji dla swoich książek.