Animação feita fácil: As cores

No que diz respeito ao conceito de cores, tínhamos pensado em tornar tudo muito simples e reduzido, com um fundo azul e texto amarelo. Azul e amarelo são cores complementares, facilitando a leitura e contrastando bem uma com a outra.

Teoricamente, poderíamos criar uma nova área de cor, com o azul como base e o texto então em amarelo. Poderíamos fazer isso, mas teríamos o problema de como aplicar um esfregão sobre toda a imagem no meio da animação, invertendo as cores.

Poderíamos tentar criar uma camada de ajuste usando Camada>Nova>Camada de ajuste ou Ctrl+Alt+Y e aplicar um efeito de Inverter canais. Mas veríamos que nossas cores não são completamente complementares. Com o azul, o complementar seria laranja, o que não se encaixa aqui, as cores não ficariam boas.




Mas eu realmente quero fazer isso e há uma maneira de conseguir.

Passo 1

Vamos fazer o seguinte: pegaremos a área de cor azul-escuro e pressionamos Ctrl+Shift+Y ou acessamos Camada>Configurações da camada de cor e ajustamos a cor para preto.

Isso será alterado de forma bonita e o After Effects até renomeará a camada de cor.

Agora escreveremos o texto "Animação facilitada" simplesmente em branco.

Temos preto e branco sem transparência e podemos inverter isso facilmente.





Mas eu quero azul e amarelo.

Passo 2

Portanto, criaremos outra camada de ajuste com Ctrl+Alt+Y ("Camada de ajuste 2") e aplicaremos o efeito de Efeitos>Correção de cor>Colorir.

O efeito é muito simples e apenas mapeia as cores previamente. Ele pega o preto e branco e atribui um valor de cor diferente.

Em seguida, usamos o preto aqui e ajustamos para o azul. Eu já havia anotado um código de cor "008FF", que é esse bonito azul.

E ajustamos o branco para o amarelo, o valor de cor é "FFF000", um amarelo realmente vibrante.

Passo 3

Agora, aplicamos isso após a camada de inversão. Também renomearei isso como "Mudança de cores" e "Colorizar".

Vamos bloquear também a camada superior, pois nunca mais precisaremos mexer nela.

Se eu ligar e desligar "Mudança de cores", obtemos uma maravilhosa inversão de cores, sem passar para laranja ou roxo.





Mas como vamos fazer a transição? Podemos mover a camada "Mudança de cores" da esquerda para a direita ou de cima para baixo na tela para criar uma transição. Mas isso não é tão interessante.

Gostaria de fazer algo mais, dividindo em faixas, e essas faixas devem varrer a tela para quebrar um pouco mais as bordas. Como podemos fazer isso da melhor forma?

Passo 4

Há efeitos para isso, como por exemplo em Efeitos>Efeitos de transição; lá temos o Varredura de Linha, que vai nessa direção, mas primeiro é feita uma linha e depois a próxima começa.

Isso não é irregular o suficiente para mim.

Passo 5

Portanto, faremos melhor com Máscaras. Clicarei duas vezes no ícone de máscara e assim criarei uma máscara que se ajusta precisamente às minhas dimensões. Esta é uma função muito útil que usaremos novamente mais tarde.

Passo 6

Gostaria de dividir essa máscara em 20 partes, para que tenhamos 20 colunas individuais. Isso não é possível com as ferramentas padrão do After Effects.

No entanto, nessas situações, eu simplesmente escrevo um script para isso. Para os recursos que estamos usando aqui, incluí os scripts no tutorial respectivo.

Lá você encontrará Layer Chainer, Mask Slicer e Sequence Strokes. Mask Slicer é o que precisamos aqui, conforme você pode imaginar.

Esse símbolo antes do nome do arquivo pertence ao Extendscript Toolkit, que posso abrir aqui. Quando eu o abro, o Extendscript Toolkit também é aberto.

Este Toolkit deve ser instalado separadamente, pois não vem instalado por padrão. Vocês precisam fazer isso, o que é muito simples de ser feito através da CreativeCloud.

Nesse script, no topo, temos algumas Configurações. Não incluí interfaces de usuário para esses scripts, pois são para meu uso pessoal. Isso significa que todas as configurações devem ser alteradas diretamente no arquivo de texto.

Neste caso, podemos alterar dois valores: o "noOfSplices", ou seja, quantos cortes individuais queremos ter no final.

E o "separateLayers", que pode ter o valor true ou false. Se for true, uma nova camada será adicionada para cada corte.

Vamos fazer um teste com 4 cortes...

… vá para o After Effects e selecione a máscara que queremos fatiar. Isso é muito importante.

Em seguida, escolhemos After Effects CC como destino de aplicação. Vocês podem ver que há também outros programas aqui, este toolkit serve para escrever e testar scripts.

Neste caso, escolhemos então After Effects, depois clico no botão Play …

… e volto para o After Effects. Agora temos as novas camadas, cada uma consistindo de uma única camada.

E se eu gerar um degradê de 4 cores aqui, …

… vocês verão que tudo isso resulta em uma imagem. Na verdade, é uma camada com uma coordenada, apenas as máscaras estão cortadas. Isso significa que temos fatias individuais desta camada, o que pode ser muito útil, pois podemos movê-las e girá-las individualmente.





Mas isso não é necessário aqui. Eu quero fazer algo diferente.

Passo 7

Eu quero ter todas as máscaras em uma única camada, não 4, mas 20.

E definimos separateLayers como false. Salvo, clico em Play novamente, …

… e agora temos as 20 máscaras em uma única camada.

Eu as marco de 1 a 20 e pressiono Ctrl+C ou cmd+C. Então eu apago a máscara original e colo todas as outras no lugar.

Agora todas estão lá e no próximo passo pretendo animá-las.

Passo 8

Infelizmente, as máscaras não têm propriedades de transformação como rotação e escala, somente o caminho da máscara. Mas isso não é um problema.

Selecionamos todas as máscaras e as expandimos. Então clicamos em caminho da máscara, definimos um keyframe e vamos um pouco adiante na composição, onde então movemos todas as máscaras para baixo e fora do quadro.

Passo 9

Vamos ver como fica. A música está tocando ao fundo, tudo certo. E agora temos dois keyframes lineares, o que não é muito emocionante.

Gostaria de tornar isso mais interessante e não quero trabalhar com keyframes lineares, pois já ouvimos as Regras da Disney: Velocidade constante não acontece na vida real, então não precisamos disso na animação.

Passo 10

Para isso, clicamos no Editor de Gráficos. Aí teremos as curvas, que conheceremos melhor ao trabalhar com a bola quicando.

Para restringir aos caminhos das máscaras, seleciono todas as máscaras e pressiono U, pois assim vejo todas as propriedades animadas.

Aqui vemos a curva de velocidade, o gráfico de velocidade. Não é tão fácil de trabalhar com ele como com o gráfico de valores, veremos isso mais adiante. Mas podemos trabalhar bem com ele quando queremos animar muitas propriedades simultaneamente.

Eu gostaria de aplicar um Easy Ease a isso por enquanto, seja com a tecla F9 ou com este botão.

Com isso, o gráfico mudou drasticamente. À esquerda teríamos uma velocidade constante, começamos com uma determinada velocidade e paramos abruptamente.

Com o Easy Ease, partimos do zero em velocidade, depois aceleramos lentamente e diminuímos novamente. É como uma forma parabólica.

Gostaria de tornar isso um pouco mais extremo. Então eu pego a alça e a movo um pouco, de modo que realmente tenhamos um pico no meio.

Vamos ver como fica assim …





Vou deixar rodando para ver: Isso saltou rapidamente. Temos um movimento significativamente mais rápido no meio do que no início e no fim. Gostei disso.

Passo 11

Também poderíamos ter feito isso com a posição - por que então fizemos as fatias?

Agora movemos isso de forma irregular no tempo e organizamos os keyframes de forma aleatória, para termos um pouco de variação na forma de revelação. As linhas não devem se mover todas juntas ao mesmo tempo.

No final, isso se parece um pouco com uma skyline. Aquela linha única que normalmente dividiria nossa imagem, queremos dividi-la. Às vezes, isso só deve ocorrer de um lado, ou apenas na frente ou atrás. Tento evitar que terminem na mesma altura.

Parece bom.

E vocês podem ver, quando ativam a visualização - fica bacana. Fantástico.

Passo 12

E essa camada podemos agora pegar, girar, escalar, mover e, é claro, usar várias vezes, porque é apenas o efeito invertido.

Vamos duplicá-la, mover no tempo e mudar de amarelo para azul e de azul para amarelo.





Neste caso, no entanto, ela foi exibida antes e agora desapareceu. Precisamos inverter isso ainda, porque quero que no início não tenhamos camada e que a camada se mova para frente.

Então eu excluo a camada duplicada novamente e ativo a camada "Mudar Cores". Em seguida, selecionamos todos os keyframes, arrastando um retângulo sobre eles.

Com um clique com o botão direito, vou até o assistente de keyframes e então encontro lá embaixo Inverter Ordem de Keyframes.

Acabei de pressionar isso e agora a cor amarela se move de baixo para dentro do azul.

E agora deve funcionar se eu duplicar a camada novamente e depois movê-la um pouco mais para trás.

Estamos indo de uma cor para a outra e voltando. Perfeito.





Isso está funcionando. Nosso próximo desafio na próxima parte desta série de tutoriais será o texto.