Criar protótipos usando vídeos

É possível escolher uma opção de reprodução predefinida ou personalizada para o seu vídeo e defina como outras interações funcionam com ele. Conforme você explora as opções e interações de reprodução de vídeo, verifique alguns exemplos de prototipagem realistas envolvendo vídeos.

Antes de começar

Saiba como importar vídeos e ajustar configurações.

Definir uma opção de reprodução

Opções de reprodução e interações associadas

Quando você define uma opção de reprodução para o seu vídeo no modo de Design, as interações associadas são definidas automaticamente no modo de Protótipo.

Reproduzir ao tocar

Quando a opção Reproduzir ao tocar é escolhida, o acionador Tocar é definido automaticamente com a ação padrão como Alternar reprodução/pausa.

Reproduzir automaticamente

Quando a opção Reproduzir automaticamente é escolhida, o acionador de Tempo é definido automaticamente com um atraso de 0 segundos.

Sem reprodução

Quando a opção Sem reprodução é escolhida, nenhuma interação é criada no modo de protótipo.

Personalizar a reprodução de vídeo

No modo de Protótipo, opte por qualquer uma destas personalizações:

 Você não pode definir um vídeo para ser reproduzido com um acionador Arrastar.

Usar a reprodução de vídeo com outras interações

Compreender as interações e o comportamento de reprodução de vídeo 

Seu vídeo é interrompido ou continua a ser reproduzido com base nas interações que você definiu para outros objetos:

• O vídeo para de ser reproduzido quando outras ações além de Animação automática e Lottie são acionadas.
• Se quiser que o vídeo continue a ser reproduzido quando você passar o mouse ou tocar em outros objetos, use a Animação automática como a ação para os acionadores Passar o mouse e Tocar.

Acionadores de vídeo e tempo

Em qualquer prancheta:

• É possível estabelecer vários acionadores de tempo em sequência com base em seu atraso.
• Você pode configurar a reprodução simultânea de um vídeo e várias animações Lottie após o mesmo atraso. Também é possível configurar a reprodução simultânea deles automaticamente (atraso definido como 0 segundos).
• Se você definir os acionadores de tempo com o mesmo atraso na prancheta, vídeo e Lottie, a prioridade será: prancheta > vídeo > Lottie.

Exemplos de prototipagem

Agora que você já sabe como definir uma opção de reprodução para seu vídeo e conectá-lo a outras interações, vamos usar alguns exemplos.

Exemplo 1: Criar o protótipo do botão Maximizar para o vídeo

Saiba como criar o protótipo do botão Maximizar para o vídeo.

Ex 1-artboard 1

1. No modo de design, importe o vídeo Tip 1 e coloque-o na prancheta. Defina-o como Reproduzir ao tocar.
2. Posicione o ícone Maximizar (fornecido na seção Ícones à direita das pranchetas) no canto inferior direito do vídeo. 
3. No modo de protótipo, conecte o ícone Maximizar ao Ex 1-artboard 2 e defina-o como um acionador Tocar com o Tipo de ação como Animação automática.

Ex 1-artboard 2

1. No modo de design, importe o vídeo Tip 1 e coloque-o na prancheta (vídeo em tela inteira). Defina-o como Reproduzir ao tocar.
   
2. Coloque o ícone Minimizar (fornecido na seção Ícones) no canto inferior direito do vídeo. 
3. No modo de protótipo, conecte o ícone Minimizar ao Ex 1-artboard 1 e defina-o como um acionador Tocar com o Tipo de ação como Animação automática.
   

Ao concluir a conexão das interações, visualize o protótipo e verifique as interações.

Exemplo 2: Criar o protótipo de reprodução

Saiba como reproduzir vídeos consecutivos no XD.

Ex 2-artboard 1

1. No modo de design, importe o vídeo Intro e coloque-o na seção de introdução. Defina-o como Sem reprodução.
   
2. Importe os vídeos Tip 1 e Tip 2 e coloque-os na seção Dicas. Defina-os como Sem reprodução.
3. Coloque uma cópia do botão Reproduzir (fornecido na seção Ícones) em todos os vídeos.
4. No modo de protótipo:

• Conecte o botão Reproduzir no vídeo Intro ao Ex 2-artboard 2.
  
•  Conecte o botão Reproduzir no vídeo Tip 1 ao Ex 2-artboard 3.
  
• Conecte o botão Reproduzir no vídeo Tip 2 ao Ex 2-artboard 4. 

Defina-os como um acionador Tocar com Tipo de ação como Transição.

Ex 2-artboard 2

1. No modo de design, importe o vídeo Intro e coloque-o acima da seção Dicas. Defina-a como Reproduzir automaticamente.
2. No modo de protótipo, conecte o vídeo ao Ex 2-artboard 3 e defina-o como um acionador Fim da reprodução com Tipo de ação como Transição.
   

Ex 2-artboard 3

1. No modo de design, importe o vídeo Tip 1 e coloque-o acima da seção Tip 1. Defina-a como Reproduzir automaticamente.
   
2. No modo de protótipo, conecte o vídeo ao Ex 2-artboard 4 e defina-o como um acionador Fim da reprodução com Tipo de ação como Transição.
   

Ex 2-artboard 4

1. No modo de design, importe o vídeo Tip 2 e coloque-o acima da seção Tip 2. Defina-a como Reproduzir automaticamente.
2. No modo de protótipo, conecte o vídeo ao Ex 2-artboard 1 e defina-o como um acionador Fim da reprodução com Tipo de ação como Transição.
   

Ao concluir a conexão das interações, visualize o protótipo e verifique as interações.

Mais exemplos

Explore mais exemplos envolvendo vídeos, animações de Lottie e estados do componente.

Mais exemplos

Saiba mais

Assista a este vídeo de 2 minutos para conhecer algumas dicas profissionais sobre como trabalhar com vídeos no XD.

Recursos relacionados

• Criar protótipos interativos
  
• Criar protótipos usando reprodução e comandos de voz
  
• Trabalhar com animações Lottie

Tem alguma dúvida ou sugestão?