Creando un Libro Interactivo
//www.youtube.com/embed/2Ej9nN2Pj0E
Introducción:
Este es un tutorial para enseñarte cómo hacer un libro interactivo básico usando hyperPad. Siguiendo este tutorial entenderás los conceptos necesarios para armar un libro.
Estructura del Proyecto:
Un proyecto de hyperPad se divide en Escenas, Objetos y Comportamientos.
Escenas:
Las escenas contienen todos los objetos para tu aplicación y son una gran manera de organizar las diferentes partes que componen tu aplicación. Por ejemplo, puedes usar una nueva escena para cada página de un libro.
Objetos:
Los objetos son elementos individuales dentro de la escena. Esto incluye cualquier texto o ilustraciones. Cada objeto puede tener sus propios comportamientos.
Comportamientos:
Los comportamientos son lo que hace que tu escena y objetos sean interactivos y cobren vida.
Importando Imágenes:
Puedes importar imágenes e ilustraciones desde el Rollo de Cámara, el Photo Stream y Drop Box. hyperPad creará automáticamente imágenes no retina para ti, así que cuando estés creando ilustraciones, asegúrate de trabajar con una imagen de 2048×1536 píxeles en mente. El tamaño máximo de imagen que Tapapbl puede importar es de 2048×2048 píxeles.
Adicionalmente, dado que hyperPad no soporta actualmente fuentes o Textos Enriquecidos, también debes importar tu texto como PNGs con fondos transparentes.
Una vez que hayas importado todas tus imágenes, puedes abrir el Cajón de Objetos para comenzar a agregarlas a tu escena.
Agregando Comportamientos:
Hacer que tus objetos sean interactivos es fácil en hyperPad.
Primero toca el objeto que deseas hacer interactivo. Luego, desde las Propiedades del Objeto, toca el botón "Comportamientos" para abrir el editor de comportamientos.
Para este tutorial, la interacción que queremos crear es que cuando un lector toque el objeto, se mueva a una posición específica.
Desde la categoría “Entrada”, arrastra el comportamiento “Comenzó a Tocar” al lienzo.
Por defecto, el comportamiento Comenzó a Tocar selecciona automáticamente el objeto actual. Pero puedes cambiar esto tocando el gráfico del objeto en las propiedades del comportamiento.
A continuación, arrastra un comportamiento “Mover a Punto” y conéctalo al “Comenzó a Tocar” que añadiste en el paso anterior. El comportamiento “Mover a Punto” moverá el objeto a un punto seleccionado en el Lienzo.
Puedes ingresar la ubicación específica llenando los campos de entrada X/Y que se encuentran en las “Propiedades del Comportamiento”. También puedes elegir la ubicación a la que moverte visualmente.
Para hacer esto visualmente, toca el gráfico del objeto en las propiedades del comportamiento. Selecciona el objeto que deseas mover, y luego mueve el objetivo azul a la ubicación deseada.
Una vez que estés satisfecho con la posición, toca el ícono de verificación para aceptar la nueva posición. Nota que los campos X e Y en las propiedades del comportamiento se llenan automáticamente.
Si presionas “Reproducir” ahora, verás que funciona tal como están dispuestos los comportamientos. El objeto se moverá después de tocarlo.
Pasos de Página y Escenas:
Ahora que tienes tu primera página con interacciones configuradas, es posible que desees añadir páginas adicionales y la capacidad de deslizar entre ellas.
Hay diferentes maneras de agregar el gesto de deslizar. Puedes agregar el comportamiento a un objeto específico en tu escena, o agregarlo a los Comportamientos Globales para que afecte a todas las escenas de tu libro.
Para este tutorial, añadamos el gesto de deslizar a los Comportamientos Globales para no tener que añadirlo en cada nueva escena.
Para empezar, abre el “Menú de Creación” presionando el ícono en la esquina superior izquierda.
Luego toca el botón “Comportamientos Globales” en la parte inferior para abrir el editor de comportamientos. Los comportamientos que agregues aquí afectarán a todo tu proyecto y se ejecutarán cuando cargues cada escena.
A continuación, arrastra un comportamiento “Deslizar a la Izquierda” y tócalo una vez que esté agregado al lienzo para abrir las propiedades del comportamiento.
Nota el interruptor de palanca “Deslizar en cualquier parte”. Si este interruptor está configurado en “Apagar”, debes deslizar sobre un objeto específico para que el evento se active. Configura el interruptor en la posición “Encender”, para que puedas deslizar sobre cualquier cosa y no estar restringido a deslizar sobre un objeto específico.
Nota: si agregas un comportamiento “Deslizar” a los comportamientos globales, no tendrá un objeto específico seleccionado. El objeto al que estás restringido es el “Fondo”. Si no configuras el interruptor en la posición “Encender”, esto podría parecer que funciona. Pero si agregas otros objetos cubriendo el fondo, pueden interferir con el deslizamiento, especialmente si tienen otros comportamientos de entrada táctil añadidos.
A continuación, añade un comportamiento Cargar Siguiente Escena y conéctalo al comportamiento Deslizar. Esto cargará automáticamente la siguiente escena una vez que deslices tu dedo hacia el lado izquierdo de la pantalla.
Si no tienes otras escenas en tu proyecto, entonces la escena actual se recargará. Además, si estás en la última escena de tu proyecto, la siguiente escena será la primera en la lista de escenas.
Ahora puedes añadir una nueva escena a tu proyecto. Si presionas reproducir, verás que tu gesto de deslizar funciona en ambas escenas sin tener que agregar comportamientos adicionales.
Conclusión:
Eso es básicamente todo lo que necesitas saber para crear un libro interactivo en hyperPad. Puedes experimentar con los diferentes comportamientos para crear un amplio nivel de interacciones para tus libros.