Añadir elementos extra en InDesign

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

  1. Como añadir un Elemento Extra
  2. WebZip
  3. Galería de Imágenes
  4. Panorama
  5. Secuencia de imágenes
  6. Imagen animada
  7. Puzle
  8. 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.

  1. Una vez añadido el contenido, despliegalo desde el árbol de la izquierda. Aparecerá una pestaña llamada “Elementos Extra”.
  2. Haz clic derecho sobre la pestaña y selecciona “Añadir Elemento Extra”.
  3. Selecciona el Elemento Extra que quieras añadir y se abrirá la configuración de este.
  4. 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:

    • 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.

    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:

    • 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.

    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.

Ir al Foro