Crear un control deslizante de carrusel para fotos

Deje que la audiencia decida cuándo es el momento de cambiar la imagen, en lugar de un loop ininterrumpido.

Compatible con la aplicación OnSign TV Player para Android 4.2.0 o superior y Windows 9.1.1 o superior.

Reúne fotos en un carrusel de imágenes con la función de interactividad. Mira el resultado a continuación:

En este tutorial, crearemos un carrusel sencillo de cuatro fotos. Descarga las imágenes utilizadas para la campaña mostrada arriba desde este archivo zip o usa las tuyas propias.

Además de crear una campaña desde cero, usaremos la función de interactividad. Si no sabes cómo usarla, te recomendamos que consultes primero los siguientes tutoriales para comprender mejor el tema:

  1. En tu cuenta de OnSign TV, crea una campaña. Completa la información básica, como el nombre y la categoría.
  2. Un carrusel de diapositivas consta de tres elementos básicos: un marco de fotos central y dos botones para navegar entre las imágenes. Haz clic en "Añadir diseño personalizado" en tu campaña y crea una zona para cada uno. También hemos creado una zona de pantalla para la imagen de fondo.
  3. Sube las imágenes que usarás en esta campaña a tu cuenta de OnSign TV. En tu cronología, coloca los botones en su zona de pantalla correspondiente y añade la imagen de fondo y una foto del carrusel.

No coloques más de una foto en el marco del carrusel, de lo contrario no obedecerá los comandos de los botones que configuraremos más adelante y en su lugar reproducirá un loop sin parar.

4. Publica la campaña para un Player . Al llegar a la página "Publicado para estos Players ", selecciona "Interactividad" en el menú de la izquierda, debajo de la miniatura de la campaña.

5. ¡Ahora vamos a añadir interactividad a nuestro carrusel! Antes de configurar cualquier acción, decida la secuencia de fotos del carrusel. Hemos usado la siguiente secuencia para las imágenes disponibles en el archivo zip: IAdea.png > J22.png > minix x5.png > minix x7.png > IAdea > J22 (...) etc.

Con esta secuencia configurada, necesitamos asignar una acción a ambos botones alrededor de cada foto. Es importante que cada acción solo se aplique a una foto específica, por lo que debemos aplicar filtros a cada acción.

Primero, configuremos la acción del siguiente botón cuando la foto de IAdea se muestre en la Campaña. Complete los campos de la siguiente manera:

  • Nombre : un nombre que indica lo que va a suceder, aquí "cambio de imagen".
  • Qué : Región táctil.
  • ¿Cuál ?: Región 4, cuál es el siguiente botón.
  • Acción : Reemplazar.
  • Destino : Región 2, que es el marco de la foto.

En la fila de abajo, configuramos un filtro para que solo cambie a la siguiente foto de la secuencia (J22.png) cuando la foto específica esté en pantalla. Así, solo cuando se muestre "IAdea.png", el botón "Siguiente" lo cambiará a "J22.png".

  • Al jugar : IAdea
  • Con medios : J22

6. Aplica acciones a todos los botones siguientes con los filtros adecuados. Esto requiere un poco de esfuerzo, pero vale la pena. ¡No olvides el botón de retroceso!

7. Haz clic en “Guardar cambios” cuando hayas terminado y prueba la campaña en tu Player .