Vytváření interaktivní knihy

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

Úvod:

Toto je tutoriál, který vás naučí, jak vytvořit základní interaktivní knihu pomocí hyperPadu. Následováním tohoto tutoriálu porozumíte konceptům potřebným pro sestavení knihy.

Struktura projektu:

Projekt hyperPad je rozdělen do scén, objektů a chování.

Scény:

Scény obsahují všechny objekty vaší aplikace a jsou skvělým způsobem, jak organizovat různé části, které tvoří vaši aplikaci. Například můžete použít novou scénu pro každou stránku knihy.

Objekty:

Objekty jsou jednotlivé položky uvnitř scény. To zahrnuje jakýkoli text nebo ilustrace. Každý objekt může mít své vlastní chování.

Chování:

Chování jsou to, co činí vaši scénu a objekty interaktivními a živými.

Importování obrázků:

Můžete importovat obrázky a ilustrace z Fotoaparátu, Fotostreamu a Drop Boxu. hyperPad automaticky vytvoří non-retina obrázky pro vás, takže při vytváření ilustrací mějte na paměti velikost obrázku 2048×1536. Maximální velikost obrázku, kterou může Tapapbl importovat, je 2048×2048 pixelů.

Navíc, protože hyperPad momentálně nepodporuje písma nebo bohaté texty, měli byste také importovat svůj text jako PNG s průhledným pozadím.

Až budete mít importovány všechny své obrázky, můžete otevřít zásuvku objektů, abyste je začali přidávat do své scény.

Přidávání chování:

Vytváření interaktivních objektů je v hyperPadu snadné.

Nejdříve poklepejte na objekt, který chcete učinit interaktivním. Poté z vlastností objektu klepněte na tlačítko "Chování", abyste spustili editor chování.

Pro tento tutoriál chceme vytvořit interakci, kdy čtenář dotkne objektu, ten se přesune na specifické místo.

Z kategorie "Vstup" přetáhněte chování "Začal se dotýkat" na plátno.

Ve výchozím nastavení chování "Začal se dotýkat" automaticky vybere aktuální objekt. Ale můžete to změnit klepnutím na grafiku objektu v vlastnostech chování.

Poté přetáhněte chování "Přesunout na bod" a spojte ho s chováním "Začal se dotýkat", které jste přidali v předchozím kroku. Chování "Přesunout na bod" přesune objekt na vybraný bod na plátně.

Konkrétní umístění můžete zadat vyplněním polí X/Y umístěných v "Vlastnostech chování". Můžete také vizuálně vybrat umístění pro přesun.

Abychom to provedli vizuálně, poklepejte na grafiku objektu v vlastnostech chování. Vyberte objekt, který chcete přesunout, a poté posuňte modrou cílovou značku na požadované místo.

Až budete spokojeni s pozicí, klepněte na ikonu zaškrtnutí, abyste přijali novou pozici. Všimněte si, že pole X a Y ve vlastnostech chování jsou automaticky vyplněna.

Pokud nyní stisknete "Přehrát", uvidíte, že to funguje přesně tak, jak jsou chování nastavena. Objekt se přesune poté, co na něj kliknete.

Otáčení stránek & Scény:

Nyní, když máte svou první stránku s nastavenými interakcemi, možná budete chtít přidat další stránky a schopnost mezi nimi přejíždět.

Existuje několik různých způsobů, jak můžeme přidat gesto přejetí. Můžete přidat chování k určitému objektu ve své scéně nebo ho přidat do globálních chování, aby ovlivnil všechny scény ve vaší knize.

Pro tento tutoriál přidáme gesto přejetí do globálních chování, abychom ho nemuseli přidávat pro každou novou scénu.

Nejprve otevřete "Creation Menu" stisknutím ikony v levém horním rohu.

Poté klepněte na tlačítko "Globální chování" dole, abyste spustili editor chování. Chování, které přidáte zde, ovlivní váš celý projekt a vykoná se při načtení každé scény.

Následně přetáhněte chování "Přejetí vlevo" a jednou na něm klepněte, jakmile je přidáno na plátno, abyste otevřeli vlastnosti chování.

Všimněte si přepínače "Přejetí na cokoliv". Pokud je tento přepínač nastaven na "Vypnuto", pak musíte přejet na konkrétní objekt, aby se událost spustila. Nastavte přepínač do polohy "Zapnuto", abyste mohli přejet na cokoliv a nebyli omezováni na přejetí na konkrétní objekt.

Poznámka: Pokud přidáte chování "Přejetí" do globálních chování, nebude mít vybraný konkrétní objekt. Objekt, na který jste omezeni, je "Pozadí". Pokud nepřepnete přepínač na polohu "Zapnuto", může se to zdát, že to funguje. Ale pokud přidáte další objekty zakrývající pozadí, mohou narušit přejetí, zejména pokud mají přidána další chování pro dotykové vstupy.

Nyní přidejte chování "Načíst další scénu" a spojte ho s chováním Přejetí. Toto automaticky načte další scénu poté, co přejezdete prstem směrem k levé straně obrazovky.

Pokud ve svém projektu nemáte žádné další scény, pak se aktuální scéna znovu načte. Navíc, pokud jste na poslední scéně ve svém projektu, pak bude další scénou první ve seznamu scén.

Nyní můžete do svého projektu přidat novou scénu. Pokud stisknete přehrát, uvidíte, že vaše gesto přejetí funguje v obou scénách, aniž byste museli přidávat jakákoliv další chování.

Závěr:

To je v podstatě vše, co potřebujete vědět pro vytvoření interaktivní knihy na hyperPadu. Můžete experimentovat s různými chováními, abyste vytvořili širokou škálu interakcí pro své knihy.