Crear prototipos mediante vídeos

Puede elegir una opción de reproducción predeterminada o personalizada para su vídeo y definir cómo funcionan otras interacciones con él. A medida que explora las opciones e interacciones de reproducción de vídeos, consulte algunos ejemplos realistas de creación de prototipos que tengan vídeos.

Antes de comenzar

Aprenda a importar vídeos y ajustar la configuración.

Establecer una opción de reproducción

Opciones de reproducción e interacciones asociadas

Cuando configura una opción de reproducción para el vídeo en el modo Diseño, las interacciones asociadas se configuran automáticamente en el modo Prototipo.

Reproducir al tocar

Al seleccionar Reproducir al tocar, el desencadenador Tocar se configura automáticamente con la acción predeterminada Alternar reproducción/pausa.

Reproducir automáticamente

Al seleccionar Reproducir automáticamente, el desencadenador Tiempo se configura automáticamente con una demora de 0 segundos.

Sin reproducción

Al seleccionar Sin reproducción, no se crea ninguna interacción en el modo de prototipo.

Personalizar reproducción de vídeo

En el modo Prototipo, opte por cualquiera de estas personalizaciones:

 No puede configurar un vídeo para que se reproduzca con un desencadenador Arrastrar.

Usar la reproducción de vídeos con otras interacciones

Comprenda las interacciones y el comportamiento de reproducción de vídeos 

Su vídeo se detiene o continúa reproduciéndose según las interacciones que estableció para otros objetos:

• El vídeo deja de reproducirse cuando se desencadenan acciones que no sean Animación automática y Lottie.
• Si desea que el vídeo continúe reproduciéndose cuando se desplaza o toca otros objetos, use Animación automática cuando se desencadene la acción Desplazar y tocar.

Desencadenadores de vídeo y tiempo

En cualquier mesa de trabajo:

• Puedes tener varios activadores de tiempo. Las interacciones se ejecutarán en secuencia según su tiempo de espera.
• Puede establecer un vídeo y varias animaciones Lottie para que se reproduzcan juntas automáticamente.
• Si configuras activadores de tiempo con el mismo retraso de tiempo en una mesa de trabajo, vídeo y Lottie, la prioridad es: mesa de trabajo > vídeo > Lottie.

Ejemplos de creación de prototipos

Ahora que ya sabe cómo configurar una opción de reproducción para su vídeo y conectarlo con otras interacciones, probemos algunos ejemplos.

Ejemplo 1: Prototipo de botón de maximizar para vídeos

Aprenda a crear un prototipo de botón de maximizar para vídeos.

Ej. 1-mesa de trabajo 1

1. En el modo de diseño, importe el vídeo de la Sugerencia 1 y colóquelo en la mesa de trabajo. Establézcalo en Reproducir con un toque.
2. Coloque el icono Maximizar (que se muestra en la sección Iconos situada a la derecha de las mesas de trabajo) en la esquina inferior derecha del vídeo. 
3. En el modo Prototipo, conecte el icono Maximizar con Ej. 1-mesa de trabajo 2 y establézcalo en un desencadenador Tocar con el Tipo de acción como Animación automática.

Ej. 1-mesa de trabajo 2

1. En el modo de diseño, importe el vídeo de la Sugerencia 1 y colóquelo en la mesa de trabajo (vídeo en pantalla completa). Establézcalo en Reproducir con un toque.
   
2. Coloque el icono Minimizar (que se muestra en la sección Iconos) en la esquina inferior derecha del vídeo. 
3. En el modo Prototipo, conecte el icono Minimizar con Ej. 1-mesa de trabajo 1 y establézcalo en un desencadenador Tocar con el Tipo de acción como Animación automática.
   

Cuando acabe con la conexión de las interacciones, obtenga una vista previa del prototipo y compruebe las interacciones.

Ejemplo 2: Reproducción de prototipos

Aprenda a reproducir vídeos consecutivos en XD.

Ej. 2-mesa de trabajo 1

1. En el modo de diseño, importe el vídeo de introducción y colóquelo en la sección Introducción. Establézcalo en Sin reproducción.
   
2. Importe los vídeos de Sugerencia 1 y Sugerencia 2 y colóquelos en la sección Sugerencias. Establézcalos en Sin reproducción.
3. Coloque una copia del botón Reproducir (que se encuentra en la sección Iconos) en todos los vídeos.
4. En el modo Prototipo:

• Conecte el botón Reproducir del vídeo de Introducción al Ej. 2-mesa de trabajo 2.
  
• Conecte el botón Reproducir del vídeo de Sugerencia 1 al Ej. 2-mesa de trabajo 3.
  
• Conecte el botón Reproducir del vídeo de Sugerencia 2 al Ej. 2-mesa de trabajo 4. 

Establézcalos todos en un desencadenador Tocar con Tipo de acción como Transición.

Ej. 2-mesa de trabajo 2

1. En el modo de diseño, importe el vídeo de introducción y colóquelo encima de la sección Sugerencias. Establézcalo en Reproducir automáticamente.
2. En el modo Prototipo, conecte el vídeo con Ej. 2-mesa de trabajo 3 y establézcalo en un desencadenador Fin de la reproducción con el Tipo de acción como Transición.
   

Ej. 2-mesa de trabajo 3

1. En el modo de diseño, importe el vídeo de Sugerencia 1 y colóquelo encima de la sección Sugerencia 1. Establézcalo en Reproducir automáticamente.
   
2. En el modo Prototipo, conecte el vídeo con Ej. 2-mesa de trabajo 4 y establézcalo en un desencadenador Fin de la reproducción con el Tipo de acción como Transición.
   

Ej. 2-mesa de trabajo 4

1. En el modo de diseño, importe el vídeo de Sugerencia 2 y colóquelo encima de la sección Sugerencia 2. Establézcalo en Reproducir automáticamente.
2. En el modo Prototipo, conecte el vídeo con Ej. 2-mesa de trabajo 1 y establézcalo en un desencadenador Fin de la reproducción con el Tipo de acción como Transición.
   

Cuando acabe con la conexión de las interacciones, obtenga una vista previa del prototipo y compruebe las interacciones.

Más ejemplos

Explore más ejemplos que incluyan vídeos, animaciones de Lottie y estados de componentes.

Más ejemplos

Más información

Mire este vídeo de 2 minutos para ver algunas sugerencias profesionales sobre cómo trabajar con vídeos en XD.

Activos relacionados

• Crear prototipos interactivos
  
• Crear prototipos utilizando comandos de voz y reproducción
  
• Usar animaciones de Lottie

¿Tiene alguna pregunta o idea?