Cómo crear menús interactivos expandidos

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


 

En el editor del layout, puede crearse hasta diez zonas distintas. Por eso, el número de botones que se pueden crear en la cuenta no es mayor que diez. Necesitas un segundo menú alternando la imagen de fondo de la campaña. Abajo está un ejemplo de cómo funciona:

expanded_menu_campaign
Aprenda como crear dos menús siguiendo los pasos abajo. Utilizamos la misma campaña de OnSign TV que fue enseñada en otros tutoriales de interactividad. Caso tengas tiempo, recomendamos hacerlos antes de empezar este tutorial. Si ya lo has hecho, descargue las imágenes utilizadas para esa campaña y empiece a seguir las instrucciones enseguida.

    1. Cree una imagen con un botón de avanzar en la parte inferior, como en la imagen abajo. Reemplácela en el área del menú.

menu 1 with button

    1. Añada una nueva zona de layout sobre el botón avanzar. Arrastre a la línea del tiempo una imagen en formato .png para cubrirla.

new zone for next button

    1. Cree la imagen del segundo menú que contenga, además de distintas opciones de botones, un botón para regresar al menú anterior. Vea el ejemplo abajo. Súbala a OnSign TV, pero todavía nola ponga en la línea del tiempo.

menu 2

  1. Guarde la campaña.
  2. En la página cargada, haga clic en “Interactividad” en el menú lateral.
  3. Seleccione el botón “Añadir interactividad”. Ahora vamos a empezar a configurar las interacciones para cada botón del menú.Nuestra primera meta es cambiar los menús así que alguien toque el botón de avanzar o regresar. Rellene los huecos conforme los datos abajo:configure next button
    • Cual: Región 6 (botón avanzar)
    • Acción: Reemplazar
    • Destino: Región 2, ya que queremos que el menú cambie
    • Al tocar: Configure el botón avanzar para funcionar solamente cuando el menú 1 esté en la pantalla.
    • Con media: Seleccione “Menú 2”

     

    Así, cuando hagamos clic en el botón de avanzar, el menú 2 será exhibido. El próximo paso es añadir filtros para todos los botones del menú 1. Después de apuntar la región, acción y destino, siempre ponga “Menú 1” para el huevo “Al tocar”. Así, las acciones del menú 1 sólo ocurrirán cuando esté exhibido el menú 1 y no pasará de un contenido del menú 2 ser exhibido equivocadamente.

    filter to button menu 1
    El proceso es el mismo para configurar los botones del menú 2, con la excepción que el campo “Al tocar” debe contener el “menú 2”. Cambie también el archivo que será exhibido en “Con media”.

    filters to buttons menu 2

    Por fin, no olvide configurar el botón para regresar al menú 1.

    configure back button

     

    • Consejo: Si está reemplazando archivos en una zona de la pantalla, configure la duración de cada ítem para ser más larga. De este modo, el público podrá navegar cómo desee por la campaña. Eso evita que el tiempo no les alcance y la lectura sea interrumpida a medias.

     

  4. Haga clic en “Guardar cambios” cuando esté listo. Aguarde que el dispositivo sincronice las modificaciones y compruebe el resultado en la pantalla.