Si bien la Aplicación de Fotos es una forma práctica de alternar entre varias imágenes, existen casos cuando, en lugar de reproducir un bucle continuo, su audiencia va querer decidir cuándo es el momento de cambiar a la imagen siguiente o a la anterior.
En este tutorial, crearemos un sencillo carrusel de cuatro fotos utilizando la función de Interactividad. Si no sabe cómo utilizar la Interactividad, eche un vistazo a los siguientes tutoriales para comprender mejor el tema:
Comience con una composición con dos triángulos que sirvan como flechas de avanzar y retroceder para el fondo.
Cree una Campaña con dos divisiones de pantalla: una para la Composición de fondo y otra para las imágenes.
Coloque la Composición de fondo en la Línea de Tiempo 1 y la primera imagen en la Línea de Tiempo 2. Utilizaremos la muestra “Aquarium.jpg”. Las demás imágenes no se colocan en la Línea de tiempo, sino que se insertan en sus respectivos Disparadores.
Tras guardar la Campaña, abra el menú de Eventos e Interactividad.
Cree el primer Disparador para avanzar a la siguiente imagen al hacer clic en la flecha de la derecha. Utilizaremos la siguiente configuración:
Nombre: avanzar 1
Cuando: Toque en Región > Región personalizada > configure una región que cubra holgadamente la flecha derecha
Acción: Reproducir “Bales of Hay.jpg” en Región 2 por 30 segundos
Icono de engranaje: Relación de Aspecto > Mantener la relación de aspecto sin cambiar el tamaño
Restricciones: Disparador sólo cuando el Player está reproduciendo “Aquarium.jpg” en Región 2
Guarde el Disparador con la marca de verificación de la derecha.
Duplique este Disparador tres veces, para un total de cuatro Disparadores. La Acción de cada Disparador reproduce la siguiente imagen del carrusel. La Restricción de cada Disparador hace que se active sólo cuando toca la imagen actual. Este es el esquema:
Disparador
Acción
Restricciones
avanzar 1
Bales of Hay.jpg
Aquarium.jpg
avanzar 2
City lights.jpg
Bales of Hay.jpg
avanzar 3
Misty mountain.jpg
City lights.jpg
avanzar 4
Aquarium.jpg
Misty mountain.jpg
Duplique el primer Disparador una vez; ahora, para retroceder. La Región del Toque que permaneció inalterada en los Disparadores anteriores ahora muda hacia una región que cubra holgadamente la flecha izquierda. La Acción de este Disparador reproduce la imagen anterior del carrusel; en este caso, “Misty mountain.jpg”. La Restricción de este Disparador hace que se activa sólo cuando toca la imagen actual: “Aquarium.jpg”.
Para utilizar la Región del Toque correspondiente a la flecha izquierda, duplique nuevamente el último Disparador tres veces, para un total de cuatro Disparadores para retroceder. La Acción de cada Disparador reproduce la imagen anterior del carrusel. La Restricción de cada Disparador hace que se active sólo cuando toca la imagen actual. Este es el esquema:
Disparador
Acción
Restricciones
retroceder 1
Misty mountain.jpg
Aquarium.jpg
retroceder 2
City lights.jpg
Misty mountain.jpg
retroceder 3
Bales of Hay.jpg
City lights.jpg
retroceder 4
Aquarium.jpg
Bales of Hay.jpg
Con ocho Disparadores para cuatro imágenes, nuestro carrusel está listo para ser publicado.
Interactividad para versiones anteriores a 10.0.0
Para versiones de la app OnSign Player anteriores a la 10.0.0, deberá usar el editor de interactividad heredado.
Descargue las imágenes utilizadas para la campaña mostrada arriba desde este archivo zip o use las suyas propias.
Cree una Campaña.
Un carrusel consta de tres elementos básicos: un marco central para la foto y dos botones para avanzar y retroceder entre las imágenes. Haga clic en "Agregar Layout Personalizado" en la Campaña y cree una división para cada uno de esos tres elementos, así como una división para la imagen de fondo.
Suba las imágenes que quiere utilizar en esta Campaña. En la Línea de Tiempo, coloque las imágenes de los botones, la imagen de fondo y la primera foto del carrusel en sus respectivas divisiones de la pantalla.
No coloque más de una foto en el marco del carrusel, de lo contrario no responderá a los comandos de los botones que configuraremos y, en su lugar, se reproducirá en un bucle ininterrumpido.
Guarde la campaña. Abra el menú de Eventos e Interactividad, debajo de la miniatura de la Campaña.
Ahora agregamos interactividad al carrusel. Antes de configurar cualquier evento, decida la secuencia de las fotos del carrusel. En el ejemplo usamos la secuencia de las imágenes disponibles en el archivo zip: IAdea.png > J22.png > minix x5.png > minix x7.png > IAdea > J22 (...) etc.
Para esta secuencia, configuramos un evento en ambos botones junto a cada foto tocando. Es importante que cada evento se aplique únicamente a una foto específica; por eso, se aplica filtros a cada uno de los eventos. Primero, configuremos el evento para el botón de avanzar cuando toca la foto de IAdea. Complete los campos de la siguiente manera:
Nombre: un nombre que indica el evento
Qué: Región táctil
Cuál: Región 4, el botón de avanzar
Acción: Reemplazar
Destino: Región 2, el marco de las fotos
En la fila inferior, configuramos un filtro para que solo cambie a la siguiente foto de la secuencia (J22.png) cuando una foto específica se muestre en pantalla. En este caso, únicamente cuando se muestre “IAdea.png”, el botón de avanzar cambiará a la imagen “J22.png”.
Al reproducir: IAdea.png
Con medios: J22.png
Aplique los eventos a todos los fotos y botones utilizando los filtros adecuados. Requiere un poco de esfuerzo, pero vale la pena. ¡No olvide el botón de retroceder!
Haga clic en “Guardar” y publique la Campaña en su Player y pruébela.
