Secuencia de imágenes táctil

Índice

¿Qué es?

Con este elemento extra puedes añadir una imagen que vaya cambiando al deslizar el dedo sobre ella.

En cierto modo este efecto es como una animación que podemos controlar a voluntad. Si deslizamos el dedo hacia la derecha la animación avanzará y si lo deslizamos a la izquierda retrocederá.

¿Qué necesitas?

Para crear una secuencia de imágenes necesitas tener una imagen de cada fotograma de la secuencia. Al deslizar el dedo se irá pasando de una imagen a otra.

Para crear una secuencia de imágenes necesitas tener una imagen de cada fotograma de la secuencia.

  • Las imágenes deben estar en formato JPG o PNG (con o sin transparencia).
  • Todas las imágenes deben tener el mismo tamaño.
  • Guarda tus imágenes en la carpeta «Resources» o en la carpeta «Libraries» de tu proyecto. Para una mejor organización de tus ficheros, es aconsejable crear una subcarpeta y meter en ella las imágenes de tu secuencia.

¿Cómo se hace?

Crea el contenedor desde InDesign

  1. Crea un marco rectangular con el tamaño de las imágenes que vas a usar. Este marco será el que va a contener la animación.
  2. Ponle un nombre al marco desde el panel Panel Capas. No uses dos veces el mismo nombre en un mismo documento a no ser que quieras mostrar la misma secuencia de imágenes varias veces.
    Renombrar marco

Esto es todo lo que hay que hacer desde InDesign. Guarda el documento y usa 480i Script para convertirlo en una issue. A continuación, crea tu App desde el 480i Manager de la forma habitual. Si nunca has realizado estos pasos es aconsejable que hagas primero este sencillo tutorial para aprender los conceptos más básicos para crear una App.

Añade el elemento extra a tu publicación

  1. En 480i Manager, despliega la carpeta Publicaciones haciendo doble clic sobre ella. En su interior podrás ver una carpeta por cada una de tus publicaciones.
  2. Despliega el contenido de la publicación en la que quieres crear la secuencia.
  3. Haz clic con el botón derecho sobre Elementos extra y elige «Añadir elemento extra». En el siguiente cuadro de diálogo selecciona «Imagen táctil».
    Añadir Imagen Táctil

Configura el elemento extra

Dentro de la carpeta Elementos extra se habrá creado una nueva entrada. Selecciónala para visualizar las opciones de configuración y sigue estas indicaciones:

  1. Elige el contenedor.
    • El nombre del contenedor es el que le pusiste al marco desde inDesign cuando preparaste el contenedor.
      Selecionar contenedor
  2. Añade las imágenes que van a formar parte de la secuencia usando el botón botón «Añadir».
    • Las imágenes deben añadirse en el orden que quieres que se vayan mostrando.
    • Puedes añadir las imágenes una a una pulsando el botón «Añadir» cada vez o puedes seleccionar varios ficheros y añadirlos de golpe. Si añades varios ficheros a la vez se añadirán por orden alfabético.
  3. Si quieres que la secuencia de imágenes sea circular y se repita nuevamente cuando llegue a la última imagen de la secuencia, activa la opción «Bucle».
    Búcle
  4. También puedes elegir el modo en el que se va a producir la sucesión de la secuencia de imágenes «De izquierda a derecha» o «De derecha a izquierda».
    Seleccionar dirección

Caso Práctico

Preparativos para crear una secuencia de imágenes táctil

En este tutorial vas a aprender a crear un contenedor para una secuencia de imágenes táctil desde InDesign. Ese contenedor te servirá para añadir la imagen animada en el paso 4 del desarrollo de tu proyecto.

Hazlo tu mism@

Si quieres realizar este caso práctico o ver como se ha hecho, descarga los ficheros del proyecto.

Caso práctico terminado Descargar
Preparado para practicar Descargar

Después de descargar un fichero, descomprímelo y verás que en su interior ya está todo preparado. Si abres la carpeta del proyecto podrás comrpobar que incluye la carpeta «Libraries» y en su interior encontrarás todo lo necesario para diseñar la publicación.

Pruébalo en tu dispositivo

También puedes ver el resultado en «480i Viewer iPad/Android» instalando el caso práctico a través de su id. Si nunca has añadido una aplicación por id y quieres saber cómo se hace, échale un vistazo a este minitutorial.

ID de instalación secuencia
Ir al Foro