Een interactief boek maken

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

Intro:

Dit is een tutorial om je te leren hoe je een basis interactief boek kunt maken met hyperPad. Door deze tutorial te volgen, begrijp je de concepten die nodig zijn om een boek samen te stellen.

Projectstructuur:

Een hyperPad-project is onderverdeeld in Scènes, Objecten en Gedragingen.

Scènes:

Scènes bevatten alle objecten voor je app en zijn een geweldige manier om de verschillende onderdelen van je app te organiseren. Bijvoorbeeld, je kunt een nieuwe scène gebruiken voor elke pagina van een boek.

Objecten:

Objecten zijn individuele items binnen de scène. Dit omvat alle tekst of illustraties. Elk object kan zijn eigen gedragingen hebben.

Gedragingen:

Gedragingen zijn wat je scène en objecten interactief maken en tot leven brengen.

Afbeeldingen importeren:

Je kunt afbeeldingen en illustraties importeren vanuit de Camera Roll, Photo Stream en Drop Box. hyperPad maakt automatisch niet-retina afbeeldingen voor je, dus wanneer je illustraties maakt, zorg er dan voor dat je werkt met een afbeeldingsgrootte van 2048×1536 pixels in gedachten. De maximale afbeeldingsgrootte die Tapapbl kan importeren is 2048×2048 pixels.

Bovendien, omdat hyperPad momenteel geen lettertypen of Rijke Teksten ondersteunt, moet je ook je tekst importeren als PNG's met doorzichtige achtergronden.

Wanneer je al je afbeeldingen hebt geïmporteerd, kun je de Objectlade openen om ze aan je scène toe te voegen.

Gedragingen toevoegen:

Het interactief maken van je objecten is eenvoudig in hyperPad.

Tik eerst op het object dat je interactief wilt maken. Tik vervolgens op de knop "Gedragingen" in de Objecteigenschappen om de gedragingen-editor te openen.

Voor deze tutorial willen we de interactie creëren dat, wanneer een lezer het object aanraakt, het naar een specifieke positie beweegt.

Sleep vanuit de categorie "Invoer" de gedraging "Begon Aan te Raak" op het canvas.

Standaard selecteert de gedraging "Begon Aan te Raak" automatisch het huidige object. Maar je kunt dit wijzigen door op de objectafbeelding in de gedragingseigenschappen te tikken.

Sleep vervolgens de gedraging "Beweeg Naar Punt" en verbind deze met de "Begon Aan te Raak" die je in de vorige stap hebt toegevoegd. De gedraging "Beweeg Naar Punt" verplaatst het object naar een geselecteerd punt op het Canvas.

Je kunt de specifieke locatie invoeren door de invoervelden X/Y in de "Gedragingseigenschappen" in te vullen. Je kunt ook visueel de locatie kiezen waar je naartoe wilt verplaatsen.

Om dit visueel te doen, tik je op de objectafbeelding in de gedragingseigenschappen. Selecteer het object dat je wilt verplaatsen en verplaats vervolgens het blauwe doel naar de gewenste locatie.

Als je tevreden bent met de positie, tik je op het vinkje om de nieuwe positie te accepteren. Merk op dat de X- en Y-velden in de gedragingseigenschappen automatisch zijn ingevuld.

Als je nu op "Speel" drukt, zie je dat het werkt zoals de gedragingen zijn opgesteld. Het object zal bewegen nadat je het aanraakt.

Pagina's draaien & Scènes:

Nu je je eerste pagina met interacties hebt ingesteld, wil je mogelijk extra pagina's toevoegen en de mogelijkheid om er tussen te vegen.

Er zijn een paar verschillende manieren waarop we de veegbeweging kunnen toevoegen. Je kunt de gedraging aan een specifiek object in je scène toevoegen, of het aan de Globale Gedragingen toevoegen zodat het alle scènes in je boek beïnvloedt.

Voor deze tutorial voegen we de veegbeweging toe aan de Globale Gedragingen zodat we het niet voor elke nieuwe scène hoeven toe te voegen.

Om te beginnen open je het "Creatiemenu" door op het icoon in de linkerbovenhoek te drukken.

Tik vervolgens op de knop "Globale Gedragingen" onderaan om de gedragingen-editor te openen. De gedragingen die je hier toevoegt, beïnvloeden je hele project en worden uitgevoerd zodra je elke scène laadt.

Sleep vervolgens de gedraging "Veeg Naar Links" en tik erop zodra deze aan het canvas is toegevoegd om de gedragingseigenschappen te openen.

Let op de schakelaar "Veeg op alles". Als deze schakelaar is ingesteld op "Uit", moet je op een specifiek object vegen om de gebeurtenis te activeren. Zet de schakelaar in de "Aan" positie, zodat je op alles kunt vegen en niet beperkt bent tot vegen op een specifiek object.

Opmerking: Als je een "Veeg" gedraging toevoegt aan globale gedragingen, zal er geen specifiek object geselecteerd zijn. Het object waar je aan gebonden bent is de "Achtergrond". Als je de schakelaar niet op "Aan" zet, lijkt het misschien te werken. Maar als je andere objecten toevoegt die de achtergrond bedekken, kunnen ze interfereren met het vegen, vooral als ze andere aanrakingen-gedragingen hebben toegevoegd.

Voeg vervolgens een "Laad Volgende Scène" gedraging toe en verbind deze met de Veeg gedraging. Dit zal automatisch de volgende scène laden zodra je met je vinger naar de linkerkant van het scherm veegt.

Als je geen andere scènes in je project hebt, dan zal de huidige scène opnieuw worden geladen. Bovendien, als je je in de laatste scène van je project bevindt, dan zal de volgende scène de eerste in de scène-lijst zijn.

Nu kun je een nieuwe scène aan je project toevoegen. Als je op "Speel" drukt, zul je zien dat je veegbeweging in beide scènes werkt zonder dat je extra gedragingen hoeft toe te voegen.

Conclusie:

Dat is in wezen alles wat je moet weten om een interactief boek te maken op hyperPad. Je kunt experimenteren met de verschillende gedragingen om een breed scala aan interacties voor je boeken te creëren.