Guia do Usuário Cancelar

Criar protótipos usando vídeos

Saiba como criar protótipos de experiências interativas com vídeos no Adobe XD.

É 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

Definir uma opção de reprodução

Definir uma opção de reprodução para o seu vídeo
Definir uma opção de reprodução para o vídeo

Depois de importar seu vídeo para o XD, controle quando seu vídeo será reproduzido. Siga estas etapas para definir uma opção de reprodução:

  1. No modo de Design, selecione o vídeo na tela.
  2. Na seção Vídeo do Inspetor de propriedades, escolha uma predefiniçã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 ao tocar - Modo de design

Reproduzir ao tocar - Modo de protótipo

Reproduzir automaticamente

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

Reproduzir automaticamente - Modo de design

Reproduzir automaticamente - Modo de protótipo

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

Escolher Editar reprodução para personalizar a reprodução
Escolher Editar reprodução para personalizar a reprodução

Para personalizar a reprodução de vídeo, na seção Vídeo do Inspetor de propriedades, selecione Editar reprodução.

Ao selecionar Editar reprodução, você muda automaticamente para o modo de Protótipo.

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

Escolha um destes acionadores: Tempo (defina Atraso em mais de 0 segundos), Teclas e controle ou Voz.

Escolher o acionador Tempo com Atraso definido em mais de 0 segundos
Escolher o acionador Tempo com Atraso definido em mais de 0 segundos

Altere a ação de reprodução de vídeo do acionador Tocar de Alternar reprodução/pausa para Reproduzir ou Pausar.

Personalizar a reprodução escolhendo o acionador Tocar com Reproduzir ou Pausar como a ação
Escolher o acionador Tocar com Reproduzir ou Pausar como a ação

 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

Vídeo com um acionador Fim da reprodução que faz a transição para uma prancheta
Vídeo com um acionador Fim da reprodução que faz a transição para uma prancheta

Depois de definir uma opção de reprodução para seu vídeo, explore a conexão com outras interações:

  • Defina uma interação Fim da reprodução do vídeo para acionar uma ação após a reprodução.
  • Reproduza um vídeo e vários arquivos Lottie ao mesmo tempo.

Para saber mais sobre prototipagem no XD, consulte Criar protótipos interativos.

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.

Baixar arquivos de amostra

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.

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

Tem alguma dúvida ou sugestão?

pergunte à comunidade

Você tem alguma dúvida ou sugestão? Participe da comunidade do Adobe XD. Gostaríamos muito de ver suas criações e ouvir o que você tem a dizer!

Receba ajuda com mais rapidez e facilidade

Novo usuário?