Crearea unei cărți interactive

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

Introducere:

Acesta este un tutorial pentru a te învăța cum să creezi o carte interactivă de bază folosind hyperPad. Urmând acest tutorial, vei înțelege conceptele necesare pentru a pune laolaltă o carte.

Structura proiectului:

Un proiect hyperPad este structurat în Scenă, Obiecte și Comportamente.

Scene:

Scenele conțin toate obiectele pentru aplicația ta și sunt o modalitate excelentă de a organiza diferitele părți care compun aplicația ta. De exemplu, poți folosi o nouă scenă pentru fiecare pagină a unei cărți.

Obiecte:

Obiectele sunt elemente individuale în cadrul scenei. Acestea includ orice text sau ilustrații. Fiecare obiect poate avea propriile sale comportamente.

Comportamente:

Comportamentele sunt cele care fac scena și obiectele interactivă și le aduc la viață.

Importarea imaginilor:

Poti importa imagini și ilustrații din Camera Roll, Photo Stream și Drop Box. hyperPad va crea automat imagini non-retina pentru tine, așa că atunci când creezi ilustrații, asigură-te că lucrezi cu o dimensiune a imaginii de 2048×1536. Dimensiunea maximă a imaginii pe care Tapapbl o poate importa este de 2048×2048 pixeli.

În plus, deoarece hyperPad nu suportă în prezent fonturi sau Text Îmbogățit, ar trebui să imporți și textul tău ca PNG-uri cu fundaluri transparente.

Odată ce ai importat toate imaginile tale, poți deschide Drawer-ul de Obiecte pentru a începe să le adaugi în scena ta.

Adăugarea comportamentelor:

Facerea obiectelor tale interactive este ușoară în hyperPad.

Mai întâi, apasă pe obiectul pe care dorești să-l faci interactiv. Apoi, din Proprietățile Obiectului, apasă butonul „Comportamente” pentru a lansa editorul de comportamente.

Pentru acest tutorial, interacțiunea pe care dorim să o creăm este când un cititor atinge obiectul, acesta se mișcă la o poziție specifică.

Din categoria „Input”, trage comportamentul „Started Touching” pe pânză.

Imediat, comportamentul „Started Touching” selectează automat obiectul curent. Dar poți schimba acest lucru apasând pe graficul obiectului în proprietățile comportamentului.

Următorul pas este să tragi un comportament „Move To Point” și să-l conectezi la „Started Touching” pe care l-ai adăugat în pasul anterior. Comportamentul „Move To Point” va muta obiectul la un punct selectat pe Canvas.

Poti introduce locația specifică completând câmpurile de input X/Y situate în „Proprietățile Comportamentului”. De asemenea, poți alege locul unde vrei să te muți vizual.

Pentru a face acest lucru vizual, apasă pe graficul obiectului în proprietățile comportamentului. Selectează obiectul pe care dorești să-l muți, apoi mută ținta albastră la locația dorită.

Odată ce ești mulțumit de poziție, apasă pe pictograma cu bifa pentru a accepta noua poziție. Observă că câmpurile X și Y din proprietățile comportamentului sunt completate automat.

Dacă apesi „Play” acum, vei vedea că funcționează exact așa cum sunt aranjate comportamentele. Obiectul se va mișca după ce l-ai apăsat.

Întoarcerea paginilor & Scene:

Acum că ai configurat prima pagină cu interacțiuni, s-ar putea să vrei să adaugi pagini suplimentare și capacitatea de a glisa între ele.

Există câteva moduri diferite prin care putem adăuga gestul de glisare. Poți adăuga comportamentul la un obiect specific din scena ta sau îl poți adăuga la Comportamentele Globale, astfel încât să afecteze toate scenele din cartea ta.

Pentru acest tutorial, să adăugăm gestul de glisare la Comportamentele Globale astfel încât să nu fie nevoie să-l adăugăm pentru fiecare nouă scenă.

Pentru a începe, deschide „Meniul de Creare” apăsând pictograma din colțul din stânga sus.

Apoi apasă butonul „Comportamente Globale” de la baza ecranului pentru a lansa editorul de comportamente. Comportamentele pe care le adaugi aici vor afecta întregul tău proiect și se vor executa atunci când încarci fiecare scenă.

Apoi trage un comportament „Swipe Left” și apasă pe el odată ce a fost adăugat pe pânză pentru a deschide proprietățile comportamentului.

Observă comutatorul „Swipe on anything”. Dacă acest comutator este setat pe „Off”, atunci trebuie să glisezi pe un obiect specific pentru ca evenimentul să se activeze. Setează comutatorul pe poziția „On”, astfel încât să poți glisa pe orice și să nu fii restricționat la glisarea pe un obiect specific.

Notă: Dacă adaugi un comportament „Swipe” la comportamentele globale, acesta nu va avea un obiect specific selectat. Obiectul la care ești restricționat este „Background”. Dacă nu setezi comutatorul pe poziția „On”, acest lucru poate părea că funcționează. Dar dacă adaugi alte obiecte care acoperă fundalul, acestea pot interfera cu glisarea, mai ales dacă au adăugate alte comportamente de atingeri.

Apoi adaugă un comportament „Load Next Scene” și leagă-l de comportamentul Swipe. Acesta va încărca automat următoarea scenă odată ce glisezi degetul spre partea stângă a ecranului.

Dacă nu ai alte scene în proiectul tău, atunci scena curentă se va reîncărca. În plus, dacă ești pe ultima scenă din proiectul tău, scena următoare va fi prima din lista de scene.

Acum poți adăuga o nouă scenă în proiectul tău. Dacă apesi play, vei vedea că gestul tău de glisare funcționează în ambele scene fără a fi nevoie să adaugi alte comportamente suplimentare.

Concluzie:

Asta este tot ce trebuie să știi pentru a crea o carte interactivă pe hyperPad. Poți experimenta cu diferite comportamente pentru a crea un nivel variat de interacțiuni pentru cărțile tale.