Imagen Animada

Índice

¿Qué es?

Con este elemento extra puedes añadir una imagen animada a tu publicación. Gracias a esta funcionalidad, puedes darle más vida a tu publicación y hacerla mucho más vistosa.

¿Qué necesitas?

Para crear una imagen animada necesitas tener una imagen de cada fotograma de la animación. Al mostrarse una imagen detrás de otra se creará el efecto de movimiento.

BarcoBarcoBarco

Las imágenes deben tener todas el mismo tamaño y el formato puede ser JPG o PNG.

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 animación.

¿Cómo se hace?

Crea el contenedor desde InDesign

Abre el documento al que quieres añadir la imagen animada con InDesign y sigue estos pasos.

  1. Crea un marco rectangular con el tamaño de las imágenes que vas a usar o un tamaño proporcional. 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 imagen animada 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 imagen animada.
  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 Animada».
    Añadir Imagen Animada

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 animación usando el botón «Añadir».
    • Debes añadir las imágenes en el orden que quieres que se muestren.
    • 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.
    Secuencia imagen animada
  3. Especifica el tiempo total que quieres que dure la animación en el campo «Paso».
    • Cuanto menos tiempo pongas más rápida irá.
    • Ten en cuenta que para poner decimales debes usar un punto y no una coma.
    Paso segundos

Eso es todo, ya puedes probar tu App para ver el resultado. Si no sabes como previsualizar tu App revista estos st_kb.

Casos Prácticos

Añadir una imagen animada

En este caso práctico vas a aprender a añadir una imagen animada a tu publicación interactiva.

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 imagenanimada
Ir al Foro