Con la pantalla Imagen Interactiva podemos subir imágenes prediseñadas y definir las áreas y rutas sobre ellas, con diferentes estilos visuales customizable y acciones, tales como abrir otras pantallas, hacer una llamada, o ir a una dirección URL.

 

                                                           

 

Para cada área o ruta definida podemos adjuntar una etiqueta pop up que aparece al pulsar.

 

La Imagen Interactiva es, por ejemplo, ideal para crear una Pantalla Principal con algunos iconos que usar como menú de navegación.

 

                        

Vamos a ver cómo usarla:

 

1. Al crear una pantalla tipo Imagen Interactiva, primero tenemos que seleccionar una imagen que subir y utilizar como imagen interactiva. Solo funcionan las imágenes en local (no las de cloud) en este tipo de pantallas. 

 

 

 

 

Para ver cómo utilizar imágenes adaptables a múltiples dispositivos, vease el artículo relacionado: Como crear imágenes adaptables a múltiples dispositivos.

 

2. Ahora seleccionamos el Modo de Edición para elegir en qué tipo de área estamos interesados en la definición de nuestra imagen. Contamos con los siguientes elementos disponibles para la creación:

• Área
• Ruta

 

                                  

 

 

 

3. También podemos cambiar el ANCHO de la imagen. Por ejemplo, si elejimos el 200% de tamaño, la imagen ocupará el doble de la pantalla, como en la siguiente imagen.

 

                

 

 

 

 

MODO AREA

Vamos a ver cómo trabajar con el modo AREA

 

 

 

Para definir nuevas Areas o Rutas recuerda de cambiar el modo de edición a la opción correcta, al lado derecho de la imagen, como se muestra en las imágenes anteriores.

 

• Con el ratón vamos a diseñar un área alrededor del elemento al que queremos asignar una propiedad o acción.

  En las PROPIEDADES DEL ÁREA podemos definir los siguientes al hacer click en el área.

 

- Seleccionar y subir una una imagen en miniatura en el área creada. No se recomienda para crear menús avanzados. Ideal para añadir miniaturas y mapas.

 

 

 

 

-Añadir una etiqueta en forma de texto al área seleccionada.

 

- Centrar la pantalla en torno al área ya sea por defecto o por llamada desde una pantalla concreta, pudiéndose especificar ésta en tal caso.

 

 

 

- Elegir el estilo del area: hay 6 estilos: invisible, visible al activar, caja, centro geométrico, aclarado o oscurecido.

 

 

 

 

- Elegir el comportamiento del area (acción asignada al área al pincharla)

 

 

 

 

Abrir pantalla: Abre una pantalla determinada.

Llamar: Realiza una llamada.

Atrás: Vuelve a la pantalla anterior.

Salir: La App se cierra.

Ir a URL: Se carga una Web concreta.

Ninguna acción: EL elemento es presionable pero nada ocurre.

Instersticial: Abre la publicidad intersticial cuando sea realizada la acción

Compartir:  Permite compartir un elemento.

Player: Permite asociar a cualquier elemento una URL que será abierta por el reproductor de audio del sistema

Ruta: Da las indicaciones al usuario sobre como llegar a una localización

Play: Permite reproducir archivos de audio

Stop: Sirve para parar un audio determinado sonando

 

 

MODO RUTA

Vamos a ver cómo trabajar con el modo RUTA.

Recuerda de cambiar el modo de edición a RUTA en la parte lateral de la imagen.

 

• Al utilizar el ratón, podemos trazar una ruta alrededor del elemento, para asignarle una propiedad que, por defecto, se mostrará como una línea roja.

 

• A continuación, con el ratón pinchamos esa área para poder cambiar las Propriedades de la Ruta.

 

 

PROPRIEDADES DEL PUNTO  dónde configurar los siguientes:

 

Añadir nodo despues

Añadir nodo antes

Eliminar nodo

 

• Centrado:Permite centrar la pantalla en torno al punto ya sea por defecto o por llamada desde una pantalla concreta, pudiéndose especificar ésta en tal caso.
• Estilo punto: Permite escoger el estilo visual del punto de la ruta.
• Color: Permite usar el color por defecto o diferenciar el punto en color.
• Punto de parada en el recorrido 

 

 

 

PROPRIEDADES  DE LA RUTA dónde configurar los siguientes:

• Estilo: Permite realizar las lineas visible u oculta.

 

• Color: Permite establecer el color de las lineas trazadas entre los puntos de una ruta.

 

 

 

 

 

CÓMO CREAR UN MENÚ CON UNA IMAGEN INTERACTIVA

 

El siguiente es un ejemplo sobre como crear un menú con una imagen interactiva.

 

• Una vez que hemos subido la imagen que nos permite crear un menú y enlazar las otras pantallas de la aplicación, podemos comenzar a definir las áreas en torno a los elementos de la imagen.

 

• En el siguiente ejemplo vamos a utilizar el modo ÁREA y dibujaremos un área alrededor de cada icono de la imagen como en el ejemplo:

 

                    

 

 

• Al hacer clic en el área, vamos en el modo EDITAR. Después de definir las propiedades del estilo del área, podemos elegir 1 acción por cada icono, para abrir una pantalla de la aplicación ya creada o que queremos crear.

 

• Vamos a asignar al primer icono la ACCIÓN: Abrir pantalla, y como destino, en nuestro ejemplo, le diremos de abrir la pantalla que se llama: "Business".

 

 

 

 

Haremos los mismos pasos con los otros iconos y al final del proceso tendremos un árbol de pantalla como en la imagen, donde todas las pantallas están enlazadas a la pantalla del menú de la IMAGEN INTERACTIVA.