Configurar eventos del prototipo

Qué es un evento de prototipo

Una interacción combina un disparador, una acción, un destino y una animación:

• Disparador: cuándo se activa el evento.
• Acción: qué ocurre al activarlo.
• Destino: sobre qué elemento actúa.
• Animación: cómo se representa la transición.

Disparador

Determina cuándo se ejecuta la acción.

1. Clic y doble clic: se activan al hacer clic una o dos veces en la capa. Se utilizan, por ejemplo, para abrir enlaces o pulsar botones.
2. Mientras el cursor está encima: mantiene la acción mientras el cursor permanece sobre la zona. Sirve para mostrar información de un botón o indicar que un elemento es interactivo.
3. Arrastrar: se activa al pulsar una zona y arrastrarla en una dirección. Es útil para carruseles o paneles laterales.
4. Mientras se mantiene pulsado: se activa mientras se presiona la zona. Permite representar interacciones de pulsación mantenida en dispositivos móviles.
5. Entrada del cursor: se activa cuando el cursor entra en la zona. Puede indicar que es interactiva o mostrar información sin hacer clic, por ejemplo, los detalles de una fecha al recorrer un calendario.
6. Salida del cursor: se activa cuando el cursor abandona la zona. Suele combinarse con el evento de entrada.
7. Al pulsar: se activa en el momento de presionar la zona. Puede representar, por ejemplo, la selección de un icono de aplicación.
8. Al soltar: se activa cuando se suelta el botón del ratón. Suele combinarse con Al pulsar, por ejemplo, al terminar de arrastrar una barra de desplazamiento.
9. Después de un tiempo: ejecuta automáticamente la acción cuando transcurre el intervalo definido.

Acción

Determina qué hace el evento al activarse.

1. Navegar a: abre el marco de destino.
2. Abrir superposición: muestra un marco sobre la pantalla actual.
3. Cambiar superposición: sustituye una superposición por otra. Suele utilizarse después de abrirla.
4. Cerrar superposición: cierra la ventana superpuesta actual.
5. Volver: regresa al marco anterior.
6. Abrir enlace: abre la URL indicada en una ventana nueva.

Destino

Define el objeto o marco final de la acción.

Solo puedes elegir marcos de la página actual; no se admiten destinos entre páginas del archivo.

Animación

Determina cómo se representa visualmente la transición.

La opción predeterminada es Instantánea. Puedes elegir otros efectos y combinarlos según la interacción que necesites.

Consejo: cada efecto dispone de una vista previa animada para comprobar su resultado.

Restablecer el estado del marco de destino

En las acciones y tipos de capa admitidos, puedes restablecer el estado cuando la interacción llega a su destino:

• Posición de desplazamiento: devuelve el marco a su posición inicial.
• Estado de componentes: devuelve los componentes del marco a sus estados iniciales.
• Estado del vídeo: devuelve el vídeo a su estado y posición de reproducción iniciales.

Elige los restablecimientos adecuados para el recorrido. Volver al principio de una página requiere un comportamiento distinto de regresar al punto donde estaba el usuario. Las opciones disponibles dependen de la acción y el destino elegidos.

Añadir varias acciones a un desencadenante

1. Crea una interacción y configura su primer desencadenante, acción y destino.
2. Abre sus ajustes.
3. Selecciona el + situado encima de la acción para añadir otra.
4. Configúrala como cualquier otra acción del prototipo.
5. Reproduce el prototipo y activa el desencadenante para comprobar el resultado conjunto.

Varias acciones permiten producir más de una respuesta con un solo desencadenante. Revisa juntos todos los destinos y restablecimientos para que el comportamiento combinado corresponda al flujo.

Los destinos del prototipo son marcos de la página actual. Mantén en ella los destinos conectados al configurar estas interacciones.