Cómo crear rotador de imágenes

Deje que el público elija cuando cambiar de foto. Es una manera distinta de presentar imagenes a la del bucle continuo.

*Disponible para las versiones de OnSign TV App Android 4.2.0+ y Windows 9.1.1+

 

Agregue varias fotos en un rotador de imágenes con botones interactivos para avanzar y volver. Vea el resultado abajo:

gif_image_carousel
En este tutorial, vamos a crear una simple galería con cuatro fotos. Puede descargar las imágenes utilizadas de este tutorial en el siguiente enlace si prefiere repetir el tutorial paso a paso. También puede utilizar fotos de su propio ordenador.

Además de crear una campaña desde el principio, vamos a utilizar recursos interactivos. Si no sabes todavía como funcionan las herramientas de interactividad de OnSign TV, sugerimos echar un vistazo en los próximos tutoriales:

  1. En su cuenta OnSign TV, haga clic en “Crear campaña°. Rellene las configuraciones básicas, como nombre y categoría.
  2. Una galería de imágenes posee tres elementos básicos: un recuadro para las fotos en dos botones para navegar adelante e volver. Así necesitamos editar el layout de la campaña y crear una nueva zona para cada uno de elementos. También cree una zona para la imagen de fondo.

Screen layout for carousel

  1. Cargue las imagenes que necesita para crear la galería en su cuenta OnSign TV. Ponga la imagen de cada botón en su respectiva área. Arrastre también la imagen de fondo y sólo una imagen de la galería en el recuadro.

timeline

No ponga aún las otras fotos en el recuadro, sino el comando no funcionará con los botones después.

  1. Haga clic en el botón “Guardar y Publicar”. Cuando la página “Publicado a eses players” haya sido cargada, seleccione la opción “Interactividad” en el menú lateral izquierdo. Esa opción está debajo del ícono de la campaña.

Click on interactivity

  1. Ahora que vamos a poner interactividad a los botones de la galería de imágenes. Usamos la siguiente secuencia para la campaña de este tutorial: IAdea.png > j22.png > minix x5.png >minix x7.png > Iadea > j22 (…).A partir de este orden, necesitamos agregar una acción a cada uno de los botones al lado de la foto. Es primordial que la acción sea personalizada en cada foto para que se mantenga el orden elegido. Por ello necesitamos aplicar filtros.

Set interactivity to all buttons, in all situations

Vamos a intentar poner la acción al botón de avanzar cuando la foto IAdea sea exhibida en la pantalla. Rellene las casillas con las siguientes informaciones:

  • Que:Zona táctil
  • Cual: Región 4, que es el botón de avanzar
  • Acción: Reemplazar
  • Destino: Región 2, que es el recuadro de la foto

En la siguiente línea, vamos añadir los filtros para que la siguiente foto, j22.png, sea exhibida en la pantalla. Cuando IAdea foto está siendo mostrada, la siguiente sólo podrá ser j22.

  • Al reproducir: IAdea
  • Con los medios: j22
  1. Aplique los filtros justos para cada botón, de acuerdo con la foto que toca.
  2. Haga clic en “Guardar cambios” solamente cuando esté listo y compruebe el resultado en una pantalla antes de publicar para toda su red de señalización digital.