Creazione di un Libro Interattivo

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

Introduzione:

Questo è un tutorial per insegnarti come creare un libro interattivo di base utilizzando hyperPad. Seguendo questo tutorial comprenderai i concetti necessari per mettere insieme un libro.

Struttura del Progetto:

Un progetto hyperPad è suddiviso in Scene, Oggetti e Comportamenti.

Scene:

Le scene contengono tutti gli oggetti per la tua app e sono un ottimo modo per organizzare le diverse parti che compongono la tua app. Ad esempio, puoi usare una nuova scena per ogni pagina di un libro.

Oggetti:

Gli oggetti sono elementi individuali all'interno della scena. Questo include qualsiasi testo o illustrazione. Ogni oggetto può avere i propri comportamenti.

Comportamenti:

I comportamenti sono ciò che rendono la tua scena e gli oggetti interattivi e prendono vita.

Importazione di Immagini:

Puoi importare immagini e illustrazioni dal Rullino fotografico, da Photo Stream e da Drop Box. hyperPad creerà automaticamente immagini non-retina per te, quindi quando crei illustrazioni assicurati di lavorare tenendo a mente una dimensione immagine di 2048×1536. La dimensione massima dell'immagine che Tapapbl può importare è 2048×2048 pixel.

Inoltre, poiché hyperPad attualmente non supporta font o Testi Ricchi, dovresti anche importare il tuo testo come PNG con sfondi trasparenti.

Una volta che hai importato tutte le tue immagini, puoi aprire il Cassetto Oggetti per iniziare ad aggiungerle alla tua scena.

Aggiunta di Comportamenti:

Rendere i tuoi oggetti interattivi è facile in hyperPad.

Prima tocca l'oggetto che desideri rendere interattivo. Quindi, dalle Proprietà dell'Oggetto, tocca il pulsante “Comportamenti” per aprire l'editor dei comportamenti.

Per questo tutorial, l'interazione che vogliamo creare è che quando un lettore tocca l'oggetto, questo si sposta in una posizione specifica.

Dalla categoria “Input” trascina il comportamento “Inizio Toccando” sulla tela.

Per impostazione predefinita, il comportamento di inizio tocco seleziona automaticamente l'oggetto corrente. Ma puoi cambiare questo toccando la grafica dell'oggetto nelle proprietà del comportamento.

Successivamente trascina un comportamento “Muovi a Punto” e collegalo a “Inizio Toccando” che hai aggiunto nel passaggio precedente. Il comportamento “Muovi a Punto” sposterà l'oggetto in un punto selezionato sulla Tela.

Puoi inserire la posizione specifica compilando i campi di input X/Y situati nelle “Proprietà Comportamenti”. Puoi anche scegliere visivamente la posizione in cui spostarti.

Per farlo visivamente, tocca la grafica dell'oggetto nelle proprietà del comportamento. Seleziona l'oggetto che desideri spostare, quindi sposta il bersaglio blu nella posizione desiderata.

Una volta che sei soddisfatto della posizione, tocca l'icona del segno di spunta per accettare la nuova posizione. Nota che i campi X e Y nelle proprietà del comportamento vengono automaticamente compilati.

Se premi “Play” ora, vedrai che funziona proprio come i comportamenti sono stati impostati. L'oggetto si muoverà dopo che lo tocchi.

Giri di Pagina e Scene:

Ora che hai la tua prima pagina con le interazioni impostate, potresti voler aggiungere pagine aggiuntive e la possibilità di scorrere tra di esse.

Ci sono diversi modi per aggiungere il gesto di scorrimento. Puoi aggiungere il comportamento a un oggetto specifico nella tua scena, oppure aggiungerlo ai Comportamenti Globali in modo che influisca su tutte le scene del tuo libro.

Per questo tutorial aggiungiamo il gesto di scorrimento ai Comportamenti Globali in modo da non doverlo aggiungere per ogni nuova scena.

Per iniziare, apri il “Menu di Creazione” premendo l'icona nell'angolo in alto a sinistra.

Quindi tocca il pulsante “Comportamenti Globali” in basso per aprire l'editor dei comportamenti. I comportamenti che aggiungi qui influenzeranno l'intero progetto e verranno eseguiti quando carichi ogni scena.

Successivamente trascina un comportamento “Scorri a Sinistra” e toccalo una volta che è stato aggiunto alla tela per aprire le proprietà del comportamento.

Nota l'interruttore di attivazione “Scorri su qualsiasi cosa”. Se questo interruttore è impostato su “Off”, allora devi scorrere su un oggetto specifico affinché l'evento venga attivato. Imposta l'interruttore sulla posizione “On”, in modo da poter scorrere su qualsiasi cosa e non essere limitato a scorrere su un oggetto specifico.

Nota: Se aggiungi un comportamento “Scorri” ai comportamenti globali, non avrà un oggetto specifico selezionato. L'oggetto a cui sei limitato è lo “Sfondo”. Se non imposti l'interruttore sulla posizione “On”, potrebbe sembrare che funzioni. Ma se aggiungi altri oggetti che coprono lo sfondo, possono interferire con lo scorrimento, specialmente se hanno aggiunti altri comportamenti di input tocco.

Successivamente, aggiungi un comportamento Carica Prossima Scena e collegalo al comportamento di Scorrimento. Questo caricherà automaticamente la scena successiva una volta che scorri il dito verso il lato sinistro dello schermo.

Se non hai altre scene nel tuo progetto, allora la scena corrente verrà ricaricata. Inoltre, se sei nell'ultima scena del tuo progetto, allora la scena successiva sarà la prima nella lista delle scene.

Ora puoi aggiungere una nuova scena al tuo progetto. Se premi play, vedrai che il tuo gesto di scorrimento funziona in entrambe le scene senza dover aggiungere comportamenti aggiuntivi.

Conclusione:

Questo è fondamentalmente tutto ciò che devi sapere per creare un libro interattivo su hyperPad. Puoi sperimentare con i diversi comportamenti per creare un ampio livello di interazioni per i tuoi libri.