Oprettelse af en interaktiv bog

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

Introduktion:

Dette er en tutorial, der lærer dig, hvordan du laver en grundlæggende interaktiv bog ved hjælp af hyperPad. Ved at følge denne tutorial vil du forstå de koncepter, der er nødvendige for at samle en bog.

Projektstruktur:

Et hyperPad-projekt er opdelt i Scener, Objekter og Adfærd.

Scener:

Scener indeholder alle objekterne til din app og er en god måde at organisere de forskellige dele, der udgør din app. For eksempel kan du bruge en ny scene til hver side af en bog.

Objekter:

Objekter er individuelle genstande inden for scenen. Dette inkluderer enhver tekst eller illustration. Hvert objekt kan have sine egne adfærd.

Adfærd:

Adfærd er det, der gør din scene og objekterne interaktive og bringer dem til live.

Importere billeder:

Du kan importere billeder og illustrationer fra Kamerarulle, Foto Stream og Drop Box. hyperPad vil automatisk oprette ikke-retina-billeder til dig, så når du laver illustrationer, skal du sørge for at arbejde med en billedstørrelse på 2048×1536. Den maksimale billedstørrelse, som Tapapbl kan importere, er 2048×2048 pixels.

Desuden, fordi hyperPad i øjeblikket ikke understøtter skrifttyper eller Rich Texts, bør du også importere din tekst som PNG'er med transparente baggrunde.

Når du har importeret alle dine billeder, kan du åbne Object Drawer for at begynde at tilføje dem til din scene.

Tilføje adfærd:

At gøre dine objekter interaktive er nemt i hyperPad.

Tryk først på det objekt, du vil gøre interaktivt. Derefter, fra Objekt Egenskaber, tryk på “Adfærd” knappen for at åbne adfærd-editoren.

Til denne tutorial ønsker vi at skabe den interaktion, at når en læser rører ved objektet, så bevæger det sig til en bestemt position.

Fra “Input”-kategorien skal du trække adfærden “Startede Berøring” ind på lærredet.

Som standard vælger den Startede berøring automatisk det aktuelle objekt. Men du kan ændre dette ved at trykke på objektgrafikken i adfærds-egenskaberne.

Næste træk på en “Bevæg til Punkt”-adfærd, og forbind den til “Startede Berøring”, du tilføjede i det forrige trin. “Bevæg til Punkt”-adfærden vil flytte objektet til et valgt punkt på lærredet.

Du kan indtaste den specifikke placering ved at udfylde X/Y-inputfelterne, der er placeret i “Adfærd Egenskaber”. Du kan også vælge placeringen visuelt.

For at gøre dette visuelt, skal du trykke på objektgrafikken i adfærds-egenskaberne. Vælg det objekt, du vil flytte, og flyt derefter den blå mål til den ønskede placering.

Når du er tilfreds med positionen, skal du trykke på fluebenet for at acceptere den nye position. Bemærk, at X- og Y-felterne i adfærdsegenskaberne automatisk udfyldes.

Hvis du trykker på “Afspil” nu, vil du se, at det fungerer præcis som adfærdserne er opstillet. Objektet vil bevæge sig, efter du har rørt ved det.

Sidevendinger & Scener:

Nu hvor du har din første side med interaktioner, kan du måske tilføje flere sider, og muligheden for at swipe mellem dem.

Der er et par forskellige måder, vi kan tilføje swipe-gesten. Du kan tilføje adfærden til et specifikt objekt i din scene eller tilføje det til de Globale Adfærd, så den påvirker alle scener i din bog.

Til denne tutorial lader vi os tilføje swipe-gesten til Globale Adfærd, så vi ikke behøver at tilføje det for hver ny scene.

For at starte skal du åbne “Creation Menu” ved at trykke på ikonet i det øverste venstre hjørne.

Tryk derefter på knappen “Globale Adfærd” nederst for at åbne adfærd-editoren. De adfærd, du tilføjer her, vil påvirke dit hele projekt og udføres, når du indlæser hver scene.

Næste træk på en “Swipe Venstre”-adfærd og tryk på det, når det er tilføjet til lærredet for at åbne adfærdsegenskaberne.

Bemærk “Swipe på noget”-tænd/sluk-kontakten. Hvis denne kontakt er indstillet til “Fra”, skal du swipe på et bestemt objekt for at udløse begivenheden. Indstil kontakten til “Tændt”-positionen, så du kan swipe på alt og ikke være begrænset til at swipe på et bestemt objekt.

Bemærk: Hvis du tilføjer en “Swipe”-adfærd til globale adfærd, vil den ikke have et specifikt objekt valgt. Det objekt, du er begrænset til, er “Baggrunden”. Hvis du ikke indstiller kontakten til “Tændt”-positionen, kan det se ud til, at det fungerer. Men hvis du tilføjer andre objekter, der dækker baggrunden, kan de interferere med swipingen, især hvis de har andre berøringsinput-adfærd tilføjet.

Tilføj derefter en Load Next Scene-adfærd og forbind den til Swipe-adfærden. Dette vil automatisk indlæse den næste scene, så snart du swiper din finger mod venstre side af skærmen.

Hvis du ikke har andre scener i dit projekt, så vil den nuværende scene genindlæses. Derudover, hvis du er på den sidste scene i dit projekt, vil den næste scene være den første i scenerne.

Nu kan du tilføje en ny scene til dit projekt. Hvis du trykker på play, vil du se, at din swipe-gestus fungerer i begge scener uden at skulle tilføje flere adfærd.

Konklusion:

Det er i bund og grund alt, hvad du behøver at vide for at skabe en interaktiv bog på hyperPad. Du kan eksperimentere med de forskellige adfærd for at skabe et bredt niveau af interaktioner for dine bøger.