Cree menús interactivos para mostrar su contenido por separado y solo cuando el lector lo solicite haciendo clic en un botón. Divida los textos largos en fragmentos más pequeños y permita que su audiencia explore el contenido como quiera, cuando quiera y en el orden que prefiera.
Para este tutorial, crearemos la siguiente campaña:
Consejo: Al crear su Campaña, haga un boceto en papel incluso antes de abrir su cuenta de OnSign. Planifique con antelación:
- Cómo se dividirá su contenido. Defina el objetivo de su campaña y divida su contenido en diferentes secciones según corresponda. Pruebe diferentes mapas de navegación y decida cuál cree que funcionará mejor.
- Cuántos botones necesitará. Cada página requiere un botón u otra acción para mostrar el siguiente contenido en pantalla. Piense en el diseño de los botones, su ubicación en la pantalla y si está claro que se puede hacer clic en ellos.
- Cómo se verá el diseño. Déle unidad estructural a su campaña, incluso si tiene varias páginas. Use colores, fuentes y diseños para que las diferentes páginas tengan una apariencia coherente. Lea más sobre diseño en este publicación del blog de OnSign.
Cuando tenga listo el boceto de su campaña, prepara el contenido. Puede crear todos los elementos de texto como archivos de imagen o escribirlos directamente en una Composición, que es lo que haremos. Esto tiene la ventaja de que puede modificar fácilmente el texto directamente en la plataforma.
- Cree todas las Composiciones. Empiece solo con el diseño del menú. Luego, duplique la Composición para añadir los textos. De esta forma, mantendrá la coherencia del diseño. El logotipo siempre estará en el mismo lugar, al igual que el menú lateral.
- Cuando tenga todos los elementos de texto listos, cree una Campaña con una única Línea de Tiempo. En esta Línea de Tiempo, coloque la Composición con solo el menú lateral. Guarde la Campaña.
- Una vez creada la Composición inicial de su Campaña, vaya al menú de Eventos e Interactividad de la Campaña. Haga clic en el botón Añadir Disparador en la esquina superior derecha.
- Así es como se ve el editor del disparador. El primer disparador se llamará botón 1.
- Será una interacción de toque en una región de la pantalla.
- Una ventana emergente le permitirá seleccionar una Región Personalizada. Dado que la Composición se refleja en este editor de regiones personalizadas, puede ajustar con precisión la ubicación de los elementos de texto.
- Para el evento, seleccione Reproducir la Composición con la primera página de texto. Reemplazará la Composición que aparece inicialmente en la Línea de Tiempo.
Defina cuánto tiempo debe reproducirse la Composición antes de volver a la Composición inicial. El valor predeterminado es de 10 segundos. Probablemente sea un poco corto. La duración ideal depende de los lectores y de la extensión del texto.
- Tenga en cuenta también el interruptor “Propagar a otros activadores” en la parte inferior. Dependiendo de su caso de uso, puede ser conveniente activarlo, pero por ahora lo mantendremos desactivado.
- Guarde el disparador haciendo clic en la marca de verificación de la derecha.
- Vamos a crear el siguiente disparador. Nos ahorramos mucho trabajo duplicando el disparador, ya que así solo tendremos que cambiar el nombre, la región del toque y el destino del evento.
Al seleccionar el disparador, un botón azul de “Acciones” reemplaza al botón naranja de “Añadir Disparador”. En el menú desplegable, encontrará la opción “Duplicar Disparador”.
- Cuando el disparador esté duplicado, haga clic en el icono del lápiz de la derecha. Cambie el nombre del disparador a botón 2.
- El mayor ahorro de tiempo se consigue en la región personalizada para el toque. Basta con cambiar la coordenada Y para obtener una región del mismo tamaño encima de un campo de texto diferente.
- Cambie el destino del evento a la Composición con la segunda página de texto. Guarde el disparador haciendo clic en la marca de verificación de la derecha.
- Repita el proceso hasta que haya creado todos los botones.
- Finalmente, publique su Campaña.
Ahora sus lectores pueden navegar por el contenido a su propio ritmo.
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.
Con este editor de interactividad heredado, se requieren muchos más pasos para lograr el mismo efecto. Considere esto como una señal para actualizar su reproductor a una versión más reciente.
Descargue una carpeta zip preparada con archivos para recrear la misma Campaña usted mismo.
- Una vez que tenga listo el boceto de su campaña, prepare el contenido. El editor de interactividad heredado no permite reproducir una composición. Por lo tanto, prepare sus textos y guárdelos en formatos de imagen como JPEG, PNG o incluso PDF.
Cree una imagen que contenga todos los botones del menú (ver imagen a continuación).
- Suba todos los archivos a su cuenta de OnSign.
- Cree una nueva Campaña. Cree el layout personalizado que haya planificado. Para este tutorial, planificamos dos zonas: un área de contenido principal (A) y un menú (B).
- Arrastre los archivos a la Línea de Tiempo.
- A continuación, edite aún más su diseño creando divisiones de pantalla donde estarán los botones en el área del menú.
- Añada una imagen completamente transparente a estas nuevas áreas de su línea de tiempo para poder guardar la campaña. OnSign no permite guardar campañas con líneas de tiempo vacías. El texto del botón se podrá leer debajo de la imagen transparente.
La imagen transparente debe estar en formato PNG (más información sobre transparencia).
- "Guarde" la Campaña cuando haya terminado.
- La página cambiará a un menú lateral con las opciones de Editar, Publicar e Eventos e Interactividad. Haga clic en "Eventos e Interactividad" en el menú lateral.
- Haga clic en “Agregar interacción” a la derecha en el encabezado para agregar un evento a cada botón.
- Este es el momento de darle vida a su campaña. Empecemos con la Región 3 (titulada "¿Qué es la señalización digital?") y convirtámosla en un área interactiva. Cada vez que el usuario haga clic en ella, el contenido de la Región 1 se reemplazará por el archivo PNG "¿Qué es la señalización digital?".
- Ajuste las regiones restantes:
- Haga clic en la marca de verificación y en "Guardar". Listo.
- Publique la campaña para un Player si aún no lo ha hecho y compruebe el resultado.