Los elementos extra son plugins que puedes incluir en InDesign para llevar la interactividad de tu App al siguiente nivel.
Estos elementos te permiten añadir características que no serían posibles únicamente con InDesign.
Índice
- Como añadir un Elemento Extra
- WebZip
- Galería de Imágenes
- Panorama
- Secuencia de imágenes
- Imagen animada
- Puzle
- Pizarra
Como añadir un Elemento Extra
Antes de nada, asegúrate de crear un contenedor en el documento InDesign con el tamaño que necesites. Una vez creado, ponle un nombre desde la pestaña de Capas.
Para añadir un elemento extra, primero tienes que tener el contenido InDesign añadido a la App.
- Una vez añadido el contenido, despliegalo desde el árbol de la izquierda. Aparecerá una pestaña llamada “Elementos Extra”.
- Haz clic derecho sobre la pestaña y selecciona “Añadir Elemento Extra”.
- Selecciona el Elemento Extra que quieras añadir y se abrirá la configuración de este.
- El zip debe contener un archivo index.html.
- El zip debe tener los archivos en la raíz, por lo tanto la jerarquía deberá ser asi: archivo.zip/index.html.
- El WebZip puede contener CSS, Javascript, Jquery, HTML5 y cualquier lenguaje que no dependa de un servidor.
- Todas las imágenes deben tener las mismas dimensiones o dimensiones proporcionales entre ellas.
- El tamaño de las imágenes debe ser igual o proporcional al tamaño del contenedor de InDesign.
- Las imágenes deben estar en formato JPG o PNG.
WebZip
El elemento extra webzip permite añadir código HTML a tu contenido InDesign.
Una vez lo tengas añadido verás varias opciones:
Contenedor
Aquí tienes que seleccionar el contenedor que has creado antes en InDesign.
WebZip
En esta opción seleccionas el archivo .zip que contiene el código HTML.
Cosas a tener en cuenta:
Precarga (iOS)
Esto permite al webzip cargar cuando el usuario se encuentra una página antes o después de la página que contiene el elemento extra.
No es recomendable activar esta opción si el webzip contiene animaciones ya que empezarán a reproducirse antes de tiempo.
Habilitar transparencia
Activa la transparencia en el contenedor del elemento extra. Si el código html contiene algún elemento transparente, también se verá transparente en la App.
Galería de Imágenes
Con el elemento extra galería de imágenes, se mostrará una imagen y deslizando el dedo sobre ella cambiarás a la imagen siguiente.
Una vez lo tengas añadido en tu App, verás varias opciones:
Contenedor
Aquí tienes que seleccionar el contenedor que has creado antes en InDesign.
Imágenes
En esta parte tienes que seleccionar todas las imágenes que quieras añadir al elemento extra.
Las imágenes deben cumplir varios puntos:
Panorama 3D
Con este elemento extra puedes crear un Panorama 3D que el usuario podrá explorar deslizando el dedo.
Si quieres añadir un panorama a tu App, necesitarás 6 imágenes formando un cubo. Estas se pueden obtener de cámaras 3D.
Para que entiendas mejor lo que es un panorama 3D, te invito a ver este pequeño vídeo:
Una vez tengas el elemento extra añadido, verás varias opciones:
Contenedor
Aquí tienes que seleccionar el contenedor que has creado antes en InDesign.
Imagenes
Aquí tienes que seleccionar las 6 imágenes. Cada una será un lado del cubo incluidas la superior e inferior.
Secuencia de imágenes
Con este elemento extra puedes añadir una imagen que vaya cambiando al deslizar el dedo sobre ella. De esta forma puedes hacer animaciones “manuales”.
Necesitarás una imagen de cada fotograma de la animación, todas las imágenes deben estar en el mismo tamaño y formato.
Una vez tengas el elemento extra añadido, verás varias opciones:
Contenedor
Aquí tienes que seleccionar el contenedor que has creado antes en InDesign.
Bucle
Activa esta opción si quieres que la animación se reproduzca de forma infinita.
Dirección
Elige en que dirección podrá deslizar el dedo el usuario.
Imagenes
Aquí tendrás que añadir los fotogramas de la animación. Tendrán que estar en orden para que se vean correctamente en la App.
Imagen Animada
El elemento extra “Imagen Animada” es una animación que se compone de varias imágenes. Es un elemento Extra parecido a la secuencia de imágenes pero se ejecuta automáticamente.
Necesitarás una imagen de cada fotograma de la animación, todas las imágenes deben estar en el mismo tamaño y formato.
Una vez tengas el elemento extra añadido, verás varias opciones:
Contenedor
Aquí tienes que seleccionar el contenedor que has creado antes en InDesign.
Paso (Segundos)
Especifica el tiempo que durará la animación completa. Cuanto menos tiempo pongas, más rápido irá.
Bucle
Activa esta opción si quieres que la animación se reproduzca de forma infinita.
Imagenes
Aquí tendrás que añadir los fotogramas de la animación. Tendrán que estar en orden para que se vean correctamente en la App.
Puzzle
El elemento extra Puzzle te permite crear con mucha facilidad un juego de puzzle deslizante.
Podrás personalizar el puzzle con la imagen que quieras y elegir el número de piezas.
Una vez tengas el elemento extra añadido, verás varias opciones:
Contenedor
Aquí tienes que seleccionar el contenedor que has creado antes en InDesign.
Imagen
Aquí tienes que añadir la imagen que se dividirá en las distintas piezas del puzzle.
Numero de piezas
Elije el numero de piezas en las que se dividirá la imagen.
Pizarra
El elemento extra “Pizarra” es un espacio en la página de InDesign en el que podemos dibujar como en un lienzo. Además, tendremos la posibilidad de cambiar el grosor y el color del trazo.
Una vez tengas el elemento extra añadido, verás varias opciones:
Contenedor
Aquí tienes que seleccionar el contenedor que has creado antes en InDesign.
Mostrar barra de opciones
Muestra una barra en la parte superior donde el usuario podrá cambiar el color y el tamaño del trazo.
Tamaño por defecto del trazado
Es el tamaño en el que dibujará el usuario a no ser que lo cambie desde la barra superior.
Color por defecto del trazado
El color en el que dibujará el usuario a no ser que lo cambie.