Interacciones de Objeto

Las Interacciones de Objeto se utilizan principalmente para crear prototipos interactivos.

Este tipo de Interacción cambia el estado de un objeto en la página y puede aplicarse a un único objeto, un grupo de objetos o un Hotspot.

Las Interacciones de Objeto pueden usarse para simular:

• Menús desplegables
• Abrir y cerrar una ventana o diálogo modal en respuesta a un clic de botón
• Revelar un menú contextual al hacer clic derecho
• Desplazarse a un área o elemento particular al hacer clic en un enlace de navegación
• Un control de radio, casilla de verificación o interruptor que puede activarse y desactivarse

En este artículo, explicaremos cada parte de una Interacción de Objeto. También aprenderás a aplicar Interacciones de Objeto y a editarlas, duplicarlas y eliminarlas.

Panel de Interacciones

El Panel de Interacciones está ubicado en la Barra Lateral Derecha y desde este Panel podrás:

• Ver todas las Interacciones que se han aplicado a un objeto

• Crear una Interacción

• Añadir un Hotspot

• Controlar cómo se muestran las interacciones en la sección de Opciones:

  • Mostrar hotspots: Muestra los hotspots en los que se puede hacer clic en el modo de edición.
  • Mostrar indicadores de interacción: Añade un distintivo luminoso a los objetos con interacciones, en la página y en el Panel de Esquema, cuando estás en el modo de edición.
  • Revelar objetivo de interacción: En el modo Vista Previa, muestra un tooltip con la acción y el objetivo cuando pasas el cursor sobre un objeto.

Desencadenante, acción y objetivo

Una Interacción de Objeto está compuesta de tres partes: un Desencadenante, una Acción y un Objetivo.

Desencadenante

Un Desencadenante es el evento que pone en marcha una interacción. Usando el menú desplegable superior, puedes elegir entre varios desencadenantes: Al hacer clic o tocar, Al hacer clic derecho, Al hacer doble clic, Entrada del ratón, Salida del ratón.

Acción

Una Acción es la instrucción que se ejecutará después de que se active un desencadenante. El segundo menú desplegable te permite elegir Acciones que se aplican a Interacciones de Página o Interacciones de Objeto.

Para las Interacciones de Objeto puedes elegir: Alternar Visibilidad, Mostrar Objeto, Ocultar Objeto o Desplazarse al Objeto.

Objetivo

Un Objetivo es el resultado final que es visible al final de una interacción. En el caso de las Interacciones de Objeto, la sección de objetivo muestra un botón de objetivo verde. Después de hacer clic en ese botón, puedes usar el cursor en forma de punto de mira para elegir un objeto de destino ya sea desde la página o desde el Panel de Esquema.

Añadir interacciones de objeto

Para añadir una Interacción de Objeto:

1. Selecciona el objeto o grupo 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 Objeto
5. Haz clic en el botón de Objetivo para activar el Modo de Selección de Objetivo
6. Para seleccionar tu objetivo, haz clic en cualquier objeto o grupo, ya sea en la Página o en el Panel de Esquema
7. Haz clic en Listo para aplicar la interacción

Establecer estado invisible

Cuando estás creando una interacción, a menudo querrás ocultar el objeto de destino para que sea invisible en el estado inicial y aparezca solo después de un evento desencadenante, por ejemplo, un menú desplegable que se revela solo cuando se hace clic en la flecha desplegable.

Hay dos formas de establecer el estado de un objeto como invisible:

Desde el Panel de Esquema

1. Selecciona el objeto que quieres hacer invisible
2. Navega a la Barra Lateral Izquierda y haz clic en la Pestaña de Esquema para abrir el panel
3. En el Árbol de Esquema, el nombre del objeto estará resaltado en azul
4. Pasa el cursor sobre el nombre del objeto y, justo a la derecha, haz clic en el botón Mostrar/Ocultar para hacer el objeto invisible

Desde el Panel de Formato

1. Selecciona el objeto que quieres hacer invisible
2. Navega a la Barra Lateral Derecha y haz clic en la Pestaña de Formato
3. La pestaña se volverá azul y abrirá el Panel de Formato
4. En la parte superior del Panel de Formato, verás el nombre del objeto en azul
5. Haz clic en el Icono de Ojo justo a la derecha del nombre de tu objeto para hacer el objeto invisible

Editar, Duplicar o Eliminar Interacciones de Objeto

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 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

Preguntas y respuestas

¿Qué interacciones funcionan en un PDF exportado?

Todas las Interacciones de Página funcionan normalmente, con la excepción de Volver, que depende del historial de tu navegador para la dirección. Las Interacciones de Objeto no funcionan en PDFs.

Si quieres proporcionar a las partes interesadas un prototipo completamente funcional, invítalas como invitadas al proyecto o comparte un enlace del proyecto. Aprende a hacer ambas cosas en Compartir. También puedes exportar un visor HTML offline interactivo.