Skapa en interaktiv bok

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

Introduktion:

Detta är en handledning för att lära dig hur man gör en grundläggande interaktiv bok med hyperPad. Genom att följa denna handledning kommer du att förstå de koncept som behövs för att sammanställa en bok.

Projektstruktur:

Ett hyperPad-projekt är uppdelat i Scener, Objekt och Beteenden.

Scener:

Scener innehåller alla objekt för din app och är ett bra sätt att organisera de olika delarna som utgör din app. Till exempel kan du använda en ny scen för varje sida av en bok.

Objekt:

Objekt är individuella föremål inom scenen. Detta inkluderar allt text eller illustrationer. Varje objekt kan ha sina egna beteenden.

Beteenden:

Beteenden är det som gör din scen och objekt interaktiva och ger dem liv.

Importera bilder:

Du kan importera bilder och illustrationer från Kamerarullen, Fotoströmmen och Drop Box. hyperPad kommer automatiskt att skapa icke-retina bilder åt dig, så när du skapar illustrationer, se till att arbeta med en bildstorlek på 2048×1536. Den maximala bildstorleken som Tapapbl kan importera är 2048×2048 pixlar.

Dessutom, eftersom hyperPad för närvarande inte stöder typsnitt eller rika texter, bör du också importera din text som PNG:er med transparenta bakgrunder.

När du har importerat alla dina bilder kan du öppna Objektlådorna för att börja lägga till dem i din scen.

Lägga till beteenden:

Att göra dina objekt interaktiva är enkelt i hyperPad.

Tryck först på det objekt som du vill göra interaktivt. Från Objektinställningarna, tryck på knappen “Beteenden” för att starta beteendeeditorn.

För denna handledning, den interaktion vi vill skapa är när en läsare berör objektet, det flyttar sig till en specifik position.

Från kategorin “Input” dra beteendet “Började beröra” till duken.

Som standard väljer beteendet Började beröra automatiskt det aktuella objektet. Men du kan ändra detta genom att trycka på objektgrafiken i beteendeinställningarna.

Dra sedan på en “Flytta till punkt”-beteende, och koppla det till den “Började beröra” som du lade till i föregående steg. Beteendet “Flytta till punkt” kommer att flytta objektet till en vald punkt på duken.

Du kan ange den specifika platsen genom att fylla i X/Y-inmatningsfälten som finns i “Beteendeinställningar”. Du kan också välja platsen att flytta visuellt.

För att göra detta visuellt, tryck på objektgrafiken i beteendeinställningarna. Välj objektet som du vill flytta, flytta sedan den blå målet till önskad plats.

När du är nöjd med positionen, tryck på ikonen med bocken för att acceptera den nya positionen. Observera att X- och Y-fälten i beteendeinställningarna automatiskt fylls i.

Om du trycker på “Spela” nu, kommer du se att det fungerar precis som beteendena är lagda. Objektet kommer att flytta sig efter att du berör det.

Sidas vändningar & Scener:

Nu när du har din första sida med interaktioner inställd, kanske du vill lägga till ytterligare sidor och förmågan att svepa mellan dem.

Det finns flera olika sätt vi kan lägga till svepgester. Du kan lägga till beteendet till ett specifikt objekt i din scen, eller lägga till det till de Globala Beteenden så att det påverkar alla scener i din bok.

För denna handledning, låt oss lägga till svepgesten till de Globala Beteenden så vi inte behöver lägga till den för varje ny scen.

För att börja, öppna “Skaparmeny” genom att trycka på ikonen i det övre vänstra hörnet.

Tryck sedan på knappen “Globala Beteenden” längst ner för att öppna beteendeeditorn. De beteenden du lägger till här kommer att påverka hela ditt projekt och köras när du laddar varje scen.

Dra sedan på en “Svep vänster”-beteende och tryck på den när den har lagts till duken för att öppna beteendeinställningarna.

Lägg märke till växla “Svep på vad som helst”. Om denna växel är inställd på “Av”, måste du svepa på ett specifikt objekt för att händelsen ska utlösas. Ställ in växeln på “På”, så att du kan svepa på vad som helst och inte vara begränsad till att svepa på ett specifikt objekt.

Notera: Om du lägger till en “Svep”-beteende till globala beteenden, kommer den inte att ha ett specifikt objekt valt. Objektet du är begränsad till är “Bakgrund”. Om du inte ställer in växeln på “På”, kan detta se ut som om det fungerar. Men om du lägger till andra objekt som täcker bakgrunden kan de störa svepningen, särskilt om de har andra beröringsinmatningsbeteenden tillagda.

Nästa lägg till ett Ladda nästa scen-beteende och koppla det till Svepbeteendet. Detta kommer automatiskt att ladda nästa scen när du sveper fingret mot vänster sida av skärmen.

Om du inte har några andra scener i ditt projekt, kommer den aktuella scenen att laddas om. Dessutom, om du är på den sista scenen i ditt projekt, kommer nästa scen att vara den första i scenlistan.

Nu kan du lägga till en ny scen i ditt projekt. Om du trycker på spela, kommer du att se att din svepgest fungerar i båda scener utan att behöva lägga till några ytterligare beteenden.

Slutsats:

Det är i princip allt du behöver veta för att skapa en interaktiv bok i hyperPad. Du kan experimentera med de olika beteendena för att skapa en bred nivå av interaktioner för dina böcker.