Hotspots

Un Hotspot es un objeto interactivo dedicado al que puedes añadir una Interacción de Página o de Objeto.

Aunque los Hotspots se comportan como otros objetos a efectos de moverlos, redimensionarlos, agruparlos y bloquearlos, están diseñados para ser invisibles en un Prototipo interactivo. En consecuencia, funcionan de manera diferente a otros objetos tanto en los modos Edición como Vista Previa:

• En el Modo de Edición, aparecen como una superposición verde translúcida para que puedas trabajar con ellos y ver dónde se han aplicado. Pero también puedes elegir ocultarlos para que no interfieran con tu trabajo en curso.
• En el Modo Vista Previa, los Hotspots están activos y responderán a las acciones del usuario (llamadas 'desencadenantes'). En el modo Vista Previa, los Hotspots son invisibles por defecto, aunque puedes hacerlos temporalmente visibles manteniendo presionada la tecla Shift.

La ventaja de usar un Hotspot, en lugar de aplicar una Interacción de Página o de Objeto a un objeto existente, es que puedes ajustar su tamaño y forma de forma independiente de los objetos de la página. Esto significa que puedes añadir interactividad sobre un área específica de una página o grupo de objetos.

Aquí hay un par de casos de uso para los Hotspots:

• Aplicar múltiples áreas de interactividad a una imagen más grande cargada de una sola vez, como un diseño terminado
• Definir áreas específicas de interactividad a stencils compuestos de múltiples elementos, como menús

Añadir hotspots

Puedes añadir un hotspot, ya sea en la ubicación de tu cursor o sobre un objeto específico. O puedes dibujar el hotspot tú mismo usando el conjunto de herramientas Quick Draw.

Al igual que todos los demás objetos (stencils, imágenes, iconos y plantillas), los Hotspots aparecen en el Panel de Esquema. Cuando se añaden Hotspots a la página, aparecen en la parte superior del Árbol de Esquema. Por defecto, se nombran por número, según el orden en que se añadieron a la página. Para cambiar el nombre de un Hotspot, simplemente haz doble clic en su título actual en el Árbol de Esquema.

Añadir un Hotspot a la página

Para añadir un Hotspot en la ubicación de tu cursor:

1. Sin ningún objeto seleccionado, haz clic derecho en la página y haz clic en Añadir hotspot

   o

   Haz clic en el botón Añadir hotspot en el Panel de Interacciones

Para crear un Hotspot sobre un objeto específico:

1. Haz clic derecho en la página y haz clic en Añadir hotspot

   o

   Haz clic en el botón Añadir hotspot en el Panel de Interacciones

2. Un hotspot aparecerá sobre el marco del objeto y coincidirá con sus dimensiones

Dibujar un Hotspot en la página

Para dibujar un Hotspot desde el conjunto de herramientas Quick Draw o el atajo de teclado:

1. Haz clic en el botón Hotspot del menú desplegable, o presiona la tecla H.
2. Haz clic y arrastra el cursor en forma de punto de mira para crear uno o más hotspots.
3. Añade interacciones usando el panel de Interacciones

Comportamiento adhesivo para hotspots

Los hotspots adhesivos son muy útiles si estás añadiendo un hotspot a un elemento dentro de un grupo de objetos, o a un área específica dentro de un único objeto. Por ejemplo, podrías hacer esto para crear un punto o botón en el que se pueda hacer clic dentro de esa área más grande. Luego, a medida que reorganizas el diseño, el hotspot se moverá junto con él.

Sin embargo, si el hotspot tiene exactamente el mismo tamaño que un objeto o grupo, necesitas mover el hotspot a un lado para poder tomar el objeto y moverlo. Por lo tanto, en estas circunstancias, es mejor aplicar una interacción de objeto en lugar de un hotspot.

Por defecto, el comportamiento adhesivo está activado para todos los Hotspots, pero puedes desactivarlo en el Panel de Formato.

Para activar o desactivar el comportamiento adhesivo de un hotspot:

1. Selecciona un Hotspot
2. Ve a la Barra Lateral Derecha y haz clic en la Pestaña de Formato para abrir el Panel de Formato
3. Navega a la sección de Comportamiento Adhesivo.
4. Haz clic en el botón Adhesivo o Normal para aplicar ese comportamiento
5. Arrastra el hotspot sobre el objeto o grupo al que quieres que se adhiera

Formatear hotspots

Después de crear un Hotspot, puedes ajustar su tamaño, posición o redondear sus esquinas. También puedes elegir ocultar los Hotspots haciéndolos invisibles.

Tamaño

En la página, usa los controles de redimensionamiento para cambiar el tamaño del Hotspot.

En el Panel de Formato, usa los campos de Ancho y Alto para valores precisos y ajuste fino, y usa las teclas de flecha del teclado si quieres cambiar estos valores de forma incremental.

Bloquea las proporciones de un Hotspot con el botón Bloquear Relación de Aspecto. Después de bloquear un Hotspot, tendrás que desbloquear la relación de aspecto si quieres redimensionarlo en el eje horizontal o vertical.

Posición

En la página, selecciona un Hotspot y arrástralo a la posición deseada.

En el Panel de Formato, establece la posición del Hotspot introduciendo las coordenadas exactas en los campos de entrada. La posición de tu Hotspot se mide en distancia en píxeles desde los márgenes izquierdo y superior. Puedes usar las teclas de flecha de tu teclado para cambiar estos valores de forma incremental.

Esquinas Redondeadas

Puedes redondear las esquinas de un hotspot para que coincida con tus gráficos o botones:

Para redondear las esquinas de un Hotspot:

1. Selecciona un Hotspot
2. Ve a la Barra Lateral Derecha y haz clic en la Pestaña de Formato para abrir el Panel de Formato
3. Navega a la sección de Esquinas Redondeadas.
4. Por defecto, el redondeo en píxeles se aplica a todas las esquinas, pero puedes hacer clic en el botón Desincronizar esquinas para ajustar cada una por separado.
5. La opción Escalar Radio ajusta el tamaño en píxeles para mantener las proporciones del redondeo a medida que haces un objeto más grande o más pequeño.

Visibilidad

En el Modo de Edición, todos los Hotspots de una página son visibles con una superposición verde translúcida.

Si quieres hacer todos los Hotspots invisibles mientras trabajas en el proyecto:

1. Haz clic en la Pestaña de Interacciones para abrir el Panel de Interacciones
2. Ve a la sección de Opciones y desmarca Mostrar hotspots

Añadir interacciones a hotspots

Cada interacción está compuesta de tres partes: un Desencadenante, una Acción y un Objetivo.

• Un Desencadenante es el evento que pone en marcha una interacción.
• Una Acción es una instrucción que se ejecuta después de que se activa un desencadenante.
• Un Objetivo es el resultado final que es visible al final de una interacción.

El proceso de añadir una interacción a un Hotspot es exactamente el mismo que añadir una a cualquier otro objeto. Sin embargo, en este caso, el 'objeto' es un Hotspot invisible que representa un área interactiva en la página.

Puedes añadir Interacciones de Página o Interacciones de Objeto a un Hotspot.

Consulta nuestro artículo de Interacciones de Página y el artículo de Interacciones de Objeto para obtener más información sobre estas interacciones, así como instrucciones detalladas sobre cómo aplicarlas a todos los objetos, incluidos los Hotspots.

Pero si quieres ponerte a trabajar de inmediato, aquí tienes algunas instrucciones breves:

Para añadir una Interacción a un Hotspot:

1. Selecciona el Hotspot al que quieres añadir la interacción
2. Haz clic en la Pestaña de Interacciones para abrir el panel
3. Elige un Desencadenante del menú desplegable superior
4. En el segundo menú desplegable, selecciona una Acción de la lista de Interacciones de Página o Interacciones de Objeto
5. Establece un Objetivo, usando el menú desplegable o el botón de punto de mira, para seleccionar un objeto o una página como destino final de la interacción.
6. Haz clic en Listo para aplicar la interacción

Editar, duplicar o eliminar interacciones

Cuando aplicas una interacción a un objeto, aparece inmediatamente en la Lista de Interacciones en la parte superior del Panel de Interacciones. A medida que añades más interacciones a ese mismo objeto, también verás que aparecen allí. Puedes editar o eliminar fácilmente cualquier interacción de la lista, o duplicar una interacción para reutilizarla rápidamente.

Editar Interacción

Editar una interacción es útil cuando quieres cambiar partes de una interacción ya existente. Usando la función de edición, puedes actualizar el Desencadenante, la Acción o el Objetivo individualmente, sin afectar a las otras partes de la interacción.

Para editar una interacción:

1. Selecciona el objeto o grupo de objetos cuya interacción deseas editar
2. Haz clic en la Pestaña de Interacciones para abrir el Panel de Interacciones
3. En la parte superior del panel, localiza la interacción que quieres editar
4. Haz clic en el botón Editar para activar el modo de edición
5. Cambia la interacción y haz clic en Listo para guardar los cambios
6. Tu interacción actualizada parpadeará en verde en la lista durante unos segundos

Duplicar Interacción

A menudo, puede que quieras aplicar diferentes variaciones de una interacción al mismo objeto. La función Duplicar te permite duplicar una interacción existente y luego editar su Desencadenante, Acción y Objetivo según tus necesidades.

Para duplicar una interacción:

1. Selecciona el objeto o grupo de objetos del que quieres duplicar una interacción
2. Haz clic en la Pestaña de Interacciones para abrir el panel de Interacciones
3. En la parte superior del panel, localiza la interacción que quieres duplicar
4. Haz clic en el icono Duplicar y una interacción idéntica aparecerá en la Lista de Interacciones en la parte superior del panel
5. Para editar la nueva interacción, haz clic en el botón Editar y sigue los pasos de la sección Editar Interacciones de este artículo

Eliminar Interacción

Para eliminar una interacción:

1. Selecciona el objeto o grupo de objetos del que quieres eliminar una interacción
2. Haz clic en la Pestaña de Interacciones para abrir el panel de Interacciones
3. En la parte superior del panel, localiza la interacción que quieres eliminar
4. Haz clic en el botón Eliminar