Demasiados botones pueden aparecer sobrecargados. Si desea compartir más opciones con sus lectores, se puede crear un segundo menú. Aprenda cómo crear un menú que expande en las instrucciones a continuación.
Para que todo funcione correctamente, cambiaremos el Layout de la Campaña de una a dos divisiones. De esta forma, el menú permanecerá a la derecha, mientras que los cuadros de texto en el medio cambiarán con la interacción.
Para que coincida con esta configuración, crearemos Composiciones individuales para cada cuadro de texto, así como una Composición en blanco como espacio inicial en la nueva segunda división de la Campaña, ya que una Línea de Tiempo no puede estar vacía.
Empecemos por lo más sencillo, la Composición en blanco. El ancho y la altura de la Composición deben coincidir con el ancho y la altura de la segunda división de la Campaña. En nuestro ejemplo, el área de texto ocupará 1200 x 800 px. Cree una nueva Composición. Ya vendrá con un lienzo transparente. Ajuste el ancho y la altura a 1200 x 800 px. Consulte el paso 4 del tutorial sobre Composiciones.
A continuación, cree su primera Composición de texto duplicando esta Composición inicial para obtener al instante el mismo ancho y alto. Cambie el color de fondo a negro y añada el primer texto.
El menú ofrece seis temas. Por lo tanto, crearemos seis Composiciones de texto en total. Duplique la primera Composición de texto cinco veces más y modifique el texto en cada una de ellas.
Al final, tendrá seis Composiciones. Para diferenciarlas, se las puede llamar 1-1 para el primer texto del primer menú, 2-1 para el segundo texto del primer menú, y así sucesivamente hasta 3-2 para el tercer texto del segundo menú. Por ahora puede dejar de lado estas Composiciones.
Modifique el Layout de la Campaña que creamos en el tutorial anterior para agregar una segunda división de la pantalla. Observe cómo el ancho y la altura de esta segunda división son iguales a las Composiciones de texto de 1200 x 800 px.
Inserte la Composición inicial en esta nueva Línea de Tiempo.
Volvamos a la Composición del tutorial anterior, con el menú a la derecha. Para expandir el menú, agregue un triángulo en la esquina inferior derecha para marcar el punto donde se expande. La pestaña de formas del menú del editor de Composiciones facilita de adicionar triángulos. Para una mejor distinción, nombre esta Composición como el "primer menú".
Duplique esta Composición del “primer menú” y cambie el nombre de la copia a “segundo menú”. Luego, gire el triángulo 180°. Sencillo y fácil con una Composición.
Vaya al menú “Eventos e interactividad” de su Campaña interactiva. La Composición inicial del primer menú, con el nuevo triángulo, se ha actualizado al instante.
Hay que ajustar los disparadores del tutorial anterior. Del tutorial anterior tienes tres disparadores, uno para cada tema del menú. En “Acción”, las Composiciones de texto no más se reproducirán en el Bucle general, sino en la Región 2. Haga esto para los tres disparadores.
Duplique uno de los tres disparadores existentes. Este cuarto disparador será para el botón de avanzar.
Configura la región de toque para que coincida con la ubicación del triangulo, la flecha para avanzar.
Como Acción, este disparador debe reproducir el “segundo menú”, que será una Campaña que aún debemos configurar. Por ahora, use cualquier marcador de posición en este disparador y haga que se reproduzca en el bucle general en lugar de la Región 2 de los disparadores anteriores. Guarde el disparador para avanzar.
Salga brevemente de esta Campaña y duplíquela para crear la Campaña con el segundo menú y sus Composiciones de texto correspondientes.
Intercambie la Línea de Tiempo 1 por la Composición con el segundo menú. La Línea de Tiempo 2 permanece igual con la Composición en blanco.
Vaya al editor de los Eventos e Interactividad de la Campaña y edite cada disparador intercambiando la Composición de texto que deben ejecutar. El disparador de retroceder debe ejecutar la Campaña del primero menú.
Regrese a la Campaña del primero menú e intercambie el marcador de posición en el disparador de avanzar con la Campaña del segundo menú. Para la Campaña del primero menú, tendrá estos cuatro disparadores:Para la Campaña del segundo menú, tendrá estos cuatro disparadores casi idénticos:
Si ya publicó su Campaña del tutorial anterior, está listo y puede probar su Campaña interactiva con el menú ampliado en su Player. Si aún no ha publicado esta Campaña, publique solo la Campaña del primero menú. La Campaña del segundo menú no se publicará. Solo se reproducirá al presionar el botón de avanzar.
Menú interactivo 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.
Nos basamos en la Campaña del menú interactivo anterior. Todos los archivos ya se incluyeron en el paquete de imágenes descargable.
Siga las instrucciones a continuación para crear un segundo menú.
Para un menú que expande, cree una imagen de menú con un icono en la parte inferior (ver imagen a continuación). Reemplace la imagen de menú en su Línea de Tiempo con esta nueva imagen.
Agrega una división de la pantalla para el botón de avanzar. En las Líneas de Tiempo, arrastre de nuevo una imagen PNG transparente a esta Línea de Tiempo, como hizo con los otros tres botones de la Campaña en el tutorial anterior.
Cree una segunda imagen del menú. Debe tener botones diferentes y un icono de retroceder en la parte inferior (ver ejemplo a continuación). Por ahora, suba esta imagen solo a su cuenta OnSign; no la coloca en la Línea de Tiempo.
"Salvar" la Campaña.
En la página recién cargada, haga clic en “Eventos e Interactividad” en el menú de la barra lateral.
Haga clic en el botón "Agregar Interacción". En adelante, asignaremos todas las interacciones restantes a nuestros botones. Nuestro primer objetivo es mostrar el segundo menú al hacer clic en el icono para avanzar. Complete la configuración como se muestra a continuación:
¿Cuál?: Región 6 (botón para avanzar).
Acción: Reemplazar.
Destino: Región 2, ya que queremos que el menú cambie.
Al reproducir: debido a que el botón para avanzar pertenece al menú 1, configure el evento para que se realice solo cuando se reproduzca el “menú 1”.
Con medios: Seleccione “menú 2” y confirme con el icono de marca de verificación.
El botón para avanzar nos llevará al segundo menú. Ahora, debemos agregar filtros a todas los eventos ya configurados para los botones del menú 1. Configure "menú 1 (con botón)" en el campo "Al reproducir". Esto evitará que se muestre el contenido del menú 2 al hacer clic en un botón del menú 1.
Luego, debemos configurar todos los eventos del segundo menú. En lugar de seleccionar el "menú 2" en "Al reproducir", debemos seleccionar el "menú 2". Seleccione los archivos que deben mostrarse con los botones de los temas en el campo "Con medios".
Por último, configure el botón para retroceder en la parte inferior para volver al primero menú.
Consejo: Al reemplazar medios en una división de la pantalla, configure duraciones largas para que el usuario pueda navegar libremente por el contenido. Si mantiene una duración muy corta, podría interrumpir la lectura del texto.
Pulse "Guardar" al terminar. Espere a que el Player sincronice las modificaciones y compruebe el resultado en pantalla.
