Como animar alertas multi-stream em SleepyChat

Duas maneiras de animar

Animação rápida

Use a guia Animar quando desejar um movimento rápido e limpo, sem gastar muito tempo. Esta é a maneira mais fácil de adicionar um simples fade, revelação, zoom, salto ou outro efeito de entrada/saída.

Animação da linha do tempo

Use a linha do tempo quando quiser ter mais controle sobre exatamente quando as coisas se movem, quanto tempo permanecem na tela ou como as múltiplas alterações devem acontecer ao longo do tempo.

Se você é novo no editor, comece primeiro com uma animação rápida. Vá para a linha do tempo quando desejar um controle mais preciso.

Passo 1: Selecione o elemento que deseja animar

A animação é aplicada ao elemento selecionado, não ao Widget inteiro por padrão. Clique no texto, imagem, forma ou outro item que deseja mover. Se for difícil clicar na tela, selecione-a no painel Camadas.

Etapa 2: abra a guia Animar e escolha um movimento

A guia Animar oferece opções de movimento prontas. Escolha o estilo desejado, visualize-o e decida se isso deve acontecer quando o elemento entra, sai ou ambos.

Um bom ponto de partida é um simples fade, revelação ou zoom. Eles são fáceis de ler durante a transmissão e geralmente funcionam melhor do que algo muito ocupado.

O que significam In, Out e Combo?

• In: o movimento que é reproduzido quando o elemento aparece pela primeira vez.
• Out: o movimento que é reproduzido quando o elemento sai.
• Combo: um par correspondente que fornece um estilo de entrada e de saída juntos.

Se você não tiver certeza do que escolher, comece apenas com uma animação In. É a maneira mais fácil de fazer com que um alerta pareça sofisticado, sem complicar demais o tempo.

Etapa 3: abra a linha do tempo quando quiser ter mais controle

A linha do tempo é onde você controla quando as coisas acontecem. Se o seu alerta precisar de mais do que uma entrada ou saída rápida, abra a linha do tempo e use-a para decidir quando o movimento começa, quanto tempo dura e como ele se alinha com o restante do Widget.

Posicionando sons na linha do tempo

Os sons ficam na linha do tempo assim como os clipes visuais. Mova um clipe de som mais cedo se quiser que ele atinja logo quando o alerta começar, ou arraste-o mais tarde se ele pousar depois que o texto ou a imagem já tiver aparecido.

Isso é útil para coisas como um barulho na entrada, um som de batida quando um distintivo cai ou um ferrão que toca depois que o visual principal é resolvido. Se o tempo parecer errado, geralmente você não precisará reconstruir nada. Basta deslizar o clipe para frente ou para trás até que ele fique alinhado.

Clipes de som regulares também podem ser cortados na linha do tempo. Isso torna mais fácil usar apenas a parte desejada em vez do arquivo inteiro.

Como funciona o Text-To-Speech na linha do tempo

Text-To-Speech também aparece como seu próprio clipe na linha do tempo, então você pode colocá-lo mais cedo ou mais tarde, dependendo de quando deseja que a voz comece. Isso facilita alinhar palavras faladas com texto, imagens ou outros sons no mesmo alerta.

A principal diferença é que um clipe de conversão de texto em fala não é algo que você corta ou divide manualmente. SleepyChat mede o áudio de visualização sintetizado e o usa para definir a duração do clipe para você.

Na prática, isso significa que a duração é atualizada quando o resultado falado muda, como quando você edita a mensagem, altera a voz ou ajusta a velocidade da fala. Você escolhe principalmente quando o clipe começa, e SleepyChat lida com quanto tempo precisa ser.

O que é um quadro-chave?

Um quadro-chave é apenas um ponto salvo no tempo. Ele informa ao SleepyChat como uma propriedade deve ser em um determinado momento e, em seguida, o editor preenche o movimento entre esses pontos salvos.

Por exemplo, você pode salvar um ponto onde o texto é pequeno e outro ponto onde é maior. SleepyChat então cria o crescimento entre esses dois pontos.

Como adicionar um quadro-chave

Mova o cursor de reprodução na linha do tempo para o momento que deseja salvar. Em seguida, vá para a seção de propriedades que deseja animar e insira um quadro-chave para essa seção. Depois que o quadro-chave existir, altere o valor desejado naquele momento.

Por exemplo, você pode mover o indicador de reprodução para o início do alerta e salvar um quadro-chave onde o elemento é inferior e transparente. Em seguida, você move o cursor de reprodução mais tarde e altera o mesmo elemento para que fique mais alto e totalmente visível. SleepyChat irá interpolar esses dois pontos salvos.

A parte importante é esta: mova o indicador de reprodução primeiro e, em seguida, salve ou edite o quadro-chave da seção de seu interesse.

Quais propriedades os quadros-chave podem controlar?

Qualquer seção com suporte a quadros-chave pode salvar seus valores ao longo do tempo. Na prática, isso significa que você pode animar as propriedades que fazem a maior diferença visual:

• Posição: move elementos para a esquerda, direita, para cima ou para baixo.
• Rotação: transforma texto, imagens ou formas conforme o alerta é reproduzido.
• Escala e tamanho: faz algo crescer, encolher ou esticar.
• Opacidade: fade in ou out de algo.
• Filtros e distorção: altera o desfoque, o brilho, a inclinação e efeitos semelhantes ao longo do tempo.
• Propriedades de áudio: quando compatível, altera itens como volume ao longo do tempo para que o som ou a conversão de texto em fala possam entrar ou sair com mais facilidade.

Os controles exatos dependem do tipo de elemento selecionado, mas o fluxo de trabalho é o mesmo: escolha um horário, salve o quadro-chave dessa seção e altere os valores desejados.

Usando quadros-chave nos painéis Inspetor e Efeitos

Pense em cada seção habilitada para quadro-chave como sua própria pequena faixa de animação. Se você estiver trabalhando no Transform, estará animando coisas como posição, tamanho e rotação. Se você estiver trabalhando em Filtros ou Distorção, estará animando a aparência do elemento.

Um padrão comum é combiná-los. Por exemplo:

• Use quadros-chave de transformação para deslizar o texto para cima.
• Use quadros-chave de opacidade para aumentar gradualmente ao mesmo tempo.
• Use Filtrar quadros-chave para torná-los mais nítidos ou desfocados à medida que chegam.

É assim que você cria movimentos mais ricos sem precisar de uma ferramenta de animação separada. Cada seção controla suas próprias propriedades e todas elas podem trabalhar juntas na mesma linha do tempo.

Etapa 4: mover, copiar e reutilizar quadros-chave

Depois que os quadros-chave existirem, você poderá movê-los na linha do tempo para alterá-los quando algo acontecer. Arrastar um quadro-chave mais cedo faz com que a alteração aconteça mais cedo. Arrastar mais tarde atrasa essa mudança.

Você também pode copiar quadros-chave quando quiser reutilizar o mesmo tempo ou alteração de valor em outro lugar do clipe. Isto é útil quando você deseja um ritmo de entrada e saída correspondente, ou quando vários elementos devem se mover de maneira semelhante, sem reconstruir o movimento do zero a cada vez.

Trabalhe em pequenas passagens. Insira um ou dois quadros-chave, mova-os para o lugar, visualize o resultado e refine a partir daí. Isso é muito mais fácil do que tentar construir a animação perfeita de uma só vez.

Use a linha do tempo para alinhar tudo

O verdadeiro poder vem da combinação dessas peças. Você pode inserir o texto primeiro, ouvir um som um momento depois e, em seguida, um clipe de conversão de texto em fala começar assim que o visualizador tiver um segundo para ver o alerta na tela.

Pense na linha do tempo como o lugar onde você encena todo o momento. Clipes visuais, sons e áudio falado não precisam ser iniciados ao mesmo tempo. Escaloná-los geralmente faz com que os alertas pareçam mais limpos e fáceis de seguir.

O que interpolação significa na prática

Interpolação é o movimento que acontece entre os quadros-chave. Você salva os valores inicial e final e SleepyChat cria o movimento intermediário para você.

Isso significa que você não precisa criar um quadro-chave para cada pequeno passo. Se a posição, rotação, opacidade ou outra propriedade mudar entre dois pontos salvos, o editor animará a transição automaticamente.

Etapa 5: visualize a animação

Use os controles de reprodução do editor para observar o movimento antes de salvar. Isso ajuda a detectar momentos estranhos, overlays ou momentos em que algo se move rápido demais para ser lido com clareza.

Se o movimento parecer bom no editor, teste o Widget completo no Overlay para poder vê-lo em um layout mais realista.

Etapa 6: envie um evento de teste

Um evento de teste é a coisa mais próxima de uma execução real antes de ir ao ar. Ele permite que você veja a animação no Overlay e verifique se todo o Widget parece correto no contexto, não apenas no editor.

Isso é especialmente importante quando você tem texto, som e várias peças em movimento acontecendo juntas.

Hábitos úteis de animação

• Comece simples. O movimento limpo geralmente é melhor lido no fluxo do que algo muito ocupado.
• Visualize com frequência. Pequenas verificações de visualização economizam tempo e evitam que erros de cronometragem se acumulem.
• Proteja a legibilidade. Se for difícil ler o texto durante o movimento, diminua a velocidade ou simplifique o efeito.
• Anime apenas o que importa. Posição, rotação, tamanho e opacidade geralmente contribuem mais para maior clareza do que ativar todos os efeitos de uma só vez.

Voltar à configuração

Se você ainda precisar de uma visão geral de como Widgets e Overlays se encaixam, volte para o guia de configuração. Esse guia cobre todo o fluxo de trabalho, desde a criação de um Widget até colocá-lo em um Overlay e adicioná-lo a OBS.