Creant un Llibre Interactiu
//www.youtube.com/embed/2Ej9nN2Pj0E
Introducció:
Aquest és un tutorial per ensenyar-te com crear un llibre interactiu bàsic utilitzant hyperPad. Seguint aquest tutorial, entendràs els conceptes necessaris per muntar un llibre.
Estructura del projecte:
Un projecte hyperPad es divideix en Escenes, Objectes i Comportaments.
Escenes:
Les escenes contenen tots els objectes de la teva aplicació i són una gran manera d'organitzar les diferents parts que conformen la teva aplicació. Per exemple, pots utilitzar una nova escena per a cada pàgina d'un llibre.
Objectes:
Els objectes són elements individuals dins de l'escena. Això inclou qualsevol text o il·lustracions. Cada objecte pot tenir els seus propis comportaments.
Comportaments:
Els comportaments són el que fan que la teva escena i els objectes siguin interactius i cobrin vida.
Importació d'imatges:
Pots importar imatges i il·lustracions des de la Carpeta de la Càmera, el Flux de Fotos i el Dropbox. hyperPad crearà automàticament imatges no-retina per a tu, així que quan creïs il·lustracions, assegura't de treballar amb una mida d'imatge de 2048×1536. La mida màxima d'imatge que pot importar Tapapbl és de 2048×2048 píxels.
A més, com que hyperPad actualment no admet fonts ni textos enriquits, també hauries d'importar el teu text com a PNGs amb fons transparents.
Un cop hagis importat totes les teves imatges, pots obrir el Connector d'Objectes per començar a afegir-les a la teva escena.
Afegint comportaments:
Fer que els teus objectes siguin interactius és fàcil amb hyperPad.
Primer toca l'objecte que vols fer interactiu. Després, des de la Propietat de l'Objecte, toca el botó "Comportaments" per obrir l'editor de comportaments.
Per a aquest tutorial, la interacció que volem crear és que, quan un lector toqui l'objecte, es mogui a una posició específica.
Des de la categoria "Entrada", arrossega el comportament "Tocant" a la tela.
Per defecte, el comportament de tocament selecciona automàticament l'objecte actual. Però pots canviar-ho tocant la gràfica de l'objecte a les propietats del comportament.
A continuació, arrossega un comportament "Moure's a un Punt" i connecta'l al comportament "Tocant" que has afegit en el pas anterior. El comportament "Moure's a un Punt" mourà l'objecte a un punt seleccionat a la Tela.
Pots introduir la ubicació específica omplint els camps d'entrada X/Y que es troben a les "Propietats de Comportament". També pots triar la ubicació a la qual moure't visualment.
Per fer-ho visualment, toca la gràfica de l'objecte a les propietats del comportament. Selecciona l'objecte que vols moure, després mou la diana blava a la ubicació desitjada.
Un cop estiguis satisfet amb la posició, toca la icona de la marca de verificació per acceptar la nova posició. Adona't que els camps X i Y a les propietats del comportament s’omplen automàticament.
Si prems “Reproducir” ara, veuràs que funciona tal com estan dissenyats els comportaments. L'objecte es mourà després de tocar-lo.
Girs de pàgina i escenes:
Ara que tens la teva primera pàgina amb interaccions configurades, és possible que vulguis afegir pàgines addicionals i la capacitat de lliscar entre elles.
Hi ha diverses maneres diferents amb les quals podem afegir el gest de lliscament. Pots afegir el comportament a un objecte específic de la teva escena, o afegir-lo als Comportaments Globals perquè afecti totes les escenes del teu llibre.
Per a aquest tutorial, afegirem el gest de lliscament als Comportaments Globals per no haver d'afegir-lo per a cada nova escena.
Per començar, obre el "Menú de Creació" prement la icona a la part superior esquerra.
A continuació, toca el botó "Comportaments Globals" a la part inferior per obrir l'editor de comportaments. Els comportaments que afegeixis aquí afectaran a tot el teu projecte i s'executaran quan carreguis cada escena.
A continuació, arrossega un comportament "Lliscament a l'Esquerra", i toca'l una vegada que s'hagi afegit a la tela per obrir les propietats del comportament.
Adona't de l'interruptor de palanca "Lliscament en qualsevol lloc". Si aquest interruptor està configurat a "Off", llavors hauràs de lliscar sobre un objecte específic per activar l'esdeveniment. Estableix l'interruptor a la posició "On", així podràs lliscar en qualsevol lloc i no estar limitat a lliscar sobre un objecte específic.
Nota: Si afegeixes un comportament de "Lliscament" als comportaments globals, no tindrà un objecte específic seleccionat. L'objecte al qual estàs restringit és el "Fons". Si no configures l'interruptor a la posició "On", pot semblar que funciona. Però si afegeixes altres objectes que cobreixen el fons, poden interferir amb el lliscament, especialment si tenen altres comportaments d'entrada tocant afegits.
A continuació, afegeix un comportament "Carregar la següent escena" i connecta'l al comportament de lliscament. Això carregarà automàticament la següent escena una vegada llisquis el dit cap al costat esquerre de la pantalla.
Si no tens altres escenes al teu projecte, llavors l'escena actual es tornarà a carregar. A més, si estàs a l'última escena del teu projecte, la següent escena serà la primera de la llista d'escenes.
Ara pots afegir una nova escena al teu projecte. Si premes play, veuràs que el teu gest de lliscament funciona en ambdues escenes sense haver d'afegir cap comportament addicional.
Conclusió:
Això és bàsicament tot el que necessites saber per a crear un llibre interactiu a hyperPad. Pots experimentar amb els diferents comportaments per crear un ampli nivell d'interaccions per als teus llibres.