Antes de nos dedicarmos à nossa primeira animação, o Bouncing Ball, quero primeiro propor um desafio técnico: o texto deverá ser desenhado de forma limpa, como se tivesse sido escrito à mão. O Fig Leaf Rag tem uma bela introdução com destaque no final, onde iremos colocar o ponto de exclamação.

Existem vários métodos, mais ou menos eficazes, dependendo da situação em que nos encontramos. Como trabalho com uma mesa digitalizadora, vou desenhar a tipografia e mostrar como a animação funciona. Mas antes disso, mostrarei como também poderia ser feito, embora não seja minha opção favorita:


Passos 1-10

Passo 1

Quero eliminar a camada de texto e, em vez disso, criar uma camada de composição, uma camada de pixels normal, na qual eu possa pintar. O texto deve estar dentro da camada. Portanto, eu crio uma subcomposição com Ctrl+Shift+C ou em Camada>Criar subcomposição. Chamo isso de "Typo_Intro".

Animação fácil: Animação de traços

Passo 2

Todos os atributos foram mantidos, incluindo Deslocamento Turbulento.

Como não quero isso, clico em Deslocamento Turbulento, pressiono Ctrl+X e colo tudo em uma composição acima ("Fig Leaf Rag").

Animação simples: Animação em traços

Passo 3

Voltamos para a composição "Typo_Intro". Aqui temos o texto exposto e podemos animá-lo.

A primeira opção é através de Trilhas. Pego na Ferramenta Caneta e desenho a primeira linha da letra A no texto. Depois, paro e clico em algum lugar na área preta com a tecla Ctrl pressionada para encerrar o caminho atual, antes de desenhar a segunda linha do A.

Paro novamente, clico na área preta com a tecla Ctrl pressionada e então desenho a próxima linha e assim por diante, até o texto completo ser desenhado.

Animação fácil: Animação em traços

Passo 4

Agora aplico um efeito. Isso é encontrado como Contorno na versão CC em Gerar. Até o CS6, era chamado Efeito de Traçado.

Selecionamos uma máscara ou marcamos a opção Todas as Máscaras, para que as máscaras sejam desenhadas assim.

Animação simplificada: Animação de traços

Passo 5

Desligo as máscaras com este pequeno ícone e coloco o Caminho em vermelho. Também posso alterar o Tamanho, mas apenas globalmente para todas as máscaras.

E quando ligo as máscaras novamente, posso mover e ajustar os pontos individualmente, de modo a cobrir todo o texto branco por baixo.

Animação simplificada: Animação de traço

Passo 6

O bom disso é que tenho um controle deslizante de Início e Fim aqui: Arrasto do início ao fim e consigo desenhar todo o texto assim.

Isso funciona muito bem, mas não se tem um controle preciso. Por exemplo, é necessário utilizar sempre a mesma espessura de traço, ou seja, não dá para variar entre fino e grosso.

Animação fácil: Animação de traço



Portanto, gostaria de mostrar ainda um outro método que, na minha opinião, é um pouco mais rápido do que desenhar tudo individualmente…

Passo 7

Neste caso, prefiro o método um pouco mais rápido com o Pincel.

No entanto, esse Pincel não pode ser aplicado em camadas de texto. Então, teremos que novamente criar uma subcomposição e nomeá-la "Typo_Estático". Podemos trabalhar diretamente nesta subcomposição.

Animação fácil: Animação de traço

Passo 8

Quando queremos usar o Pincel e clicamos duas vezes no Modo Pincel, a guia de camadas é aberta e só aí podemos trabalhar com o Pincel.

Também surgiram dois novos painéis: Pincel e Pintura. No painel Pincel, podemos ajustar o tamanho, dureza, etc. do pincel.

E no painel Pintura, podemos selecionar o tipo de pintura. Inicialmente, está definido como constante, mas eu altero para Animação de Pintura.

Faço um traço e outro e mais um - mas estranhamente, uma vez que termino um traço, ele desaparece.

Animação simplificada: Animação de traços

Passo 9

Quando volto para a outra guia e ando ao longo da linha do tempo, vejo que todas as linhas estão lá e são desenhadas automaticamente.

Animação feita facilmente: Animação em traços

Passo 10

Se pressionar UU para todas as propriedades alteradas, teremos muitas subpropriedades listadas abaixo.

Para cada uma, também são exibidos o início e o fim.

Além disso, podemos alterar a distância, dureza e até a posição de cada linha - mesmo depois de desenhar.

Animação fácil: Animação de traços

Continuar: Passos 11–20

Passo 11

Vou apagar tudo novamente para termos mais visibilidade.

Vou desenhar uma nova linha e quando estiver na visualização em camadas, você verá o caminho. Isto é o que é salvo.

Se por acaso não gostar da linha desenhada, posso redesenhá-la selecionando-a e simplesmente desenhando novamente. Isso será atualizado e sobrescrito facilmente.

Animação feita facilmente: Animação em traços

Passo 12

Também quero recriar o texto, pois é a maneira mais rápida de animar algo assim.

Portanto, vou diminuir meu diâmetro um pouco e com a mesa digitalizadora, vou redesenhar o texto aqui.

Animação fácil: Animação em traços

Passo 13

Desenhei todas as linhas e se reproduzirmos tudo na linha do tempo, veremos que tudo está presente.

Se pressionar U, teremos todos os keyframes de volta.

Animação fácil: Animação em linha

Passo 14

Se eu pressionar a tecla Ü, a janela sobre a qual o mouse está passando será maximizada. Neste caso, a linha do tempo. Assim, tenho mais espaço e posso identificar melhor os elementos que se destacam. Eu os recuo um pouco para que todos durem aproximadamente o mesmo tempo.

Animação feita facilmente: Animação de traços

Passo 15

Vamos reproduzir isso.

Aliás, se por acaso pressionou acidentalmente a tecla Caps Lock, o After Effects não será atualizado. Neste caso, você receberá a mensagem Desativar Caps Lock para atualizar a visualização.

Ao reproduzirmos agora, o After Effects começa a desenhar todas as letras ao mesmo tempo. Mas deve começar na frente e seguir para trás. E é exatamente aí que está o problema. Para fazer do jeito que quero, teria que cronometrar tudo manualmente - uma linha de cada vez. Isso dá muito trabalho. Gostaria de fazer isso mais rápido.

No próximo passo, explicarei como - mas antes disso, vamos selecionar todas as linhas.

Animação fácil de fazer: Animação de traços

Passo 16

Por isso, uso um script que define esses keyframes sequencialmente.

Esse script fui eu quem escreveu e, é claro, incluí para vocês. Vocês o encontrarão na pasta Scripts com o nome Sequence strokes. Quem conhece o filme "Sequenzaebenen from After Effects" pode ter uma ideia do que o script faz.

Abro o script no Extend Script e o executo.

Animação fácil de fazer: Animação de linha

Passo 17

Agora temos uma espécie de escada de keyframes e o texto é desenhado passo a passo. No entanto, ainda muito lentamente.

Precisamos acelerar isso. Para isso, selecionamos tudo, pegamos o último keyframe encontrado, pressionamos a tecla Alt e arrastamos para 5 segundos.

Aí vai ser bem mais rápido.

Animação feita facilmente: Animação de traços



O último ponto precisa ser um pouco mais atrasado, mas vamos cuidar disso em breve.

Passo 18

Gostaria de falar sobre o valor de offset. Isso afeta as transições de keyframes:

Se olharmos as transições de keyframes atuais, o próximo sempre começa exatamente onde o anterior termina (a).

Se eu não quiser isso e, por exemplo, prefiro ter uma pausa de dois frames entre dois traços, então eu digito 2 em offset.

Claro, preciso selecionar todos os pincéis novamente antes de ativar o script. Com Ctrl+A, posso selecionar todos de uma vez.

Animação fácil: Animação de linha



Ou se eu quiser que os frames se sobreponham, então eu coloco o valor -2 em offset. Assim, ele sempre voltará dois frames atrás do original. No entanto, se tivermos reduzido a velocidade tão rapidamente como aqui, não faz sentido. Estou satisfeito com 2.

Passo 19

O que definitivamente quero mudar é o timing do ponto de exclamação. Gostaria de ajustá-lo melhor à música.

Por isso, também preciso da música na composição. Então eu vou para o guia "Fig Leaf Rag" e copio o arquivo.

Depois, se necessário, volto para a composição com um clique Alt-e insiro aqui.

Animação fácil de fazer: Animação de traço

Passo 20

Agora vamos ver onde estão as duas posições que precisamos. Para isso, uso o Num-Pad e pressiono a tecla de vírgula para criar uma visualização. Pressiono a tecla asterisco * no Num-Pad para adicionar um marcador. Em dispositivos sem Num-Pad, especialmente no Mac, seriam cmd+vírgula para visualização e cmd+8 para o marcador.

Agora deixo a música tocar e coloco os marcadores exatamente onde o traço e o ponto do ponto de exclamação devem aparecer (1). Ou seja, exatamente nos dois acentos da melodia.

Então, defini dois marcadores: no primeiro, o traço do ponto de exclamação deve estar pronto e no segundo, o ponto deve ser definido.

Coloco a linha auxiliar no primeiro marcador e mudo para a composição "Typo_Statisch". Lá eu movo o frame para a linha auxiliar que indica a linha do ponto de exclamação (2).

Faço o mesmo com o segundo marcador, que indica a posição do ponto: coloco a linha auxiliar no marcador, vou para a composição e movo o frame de acordo.

Animação simples: Animação de traços

Os últimos passos

Passo 21

Gostaria que o traço do ponto de exclamação fosse desenhado mais lentamente do que a fonte anterior, para enfatizarmos isso mais no ponto de exclamação (1).

E a fonte deve ser concluída um pouco mais rapidamente no geral. Portanto, seleciono tudo antes (2) e movo um pouco para frente (3).

Assim, o timing é perfeito.

Animação feita facilmente: Animação de linhas

Passo 22

Nós desenhamos a fonte sobre o texto e agora vamos fazer mais algumas alterações.

Primeiro duplico a camada "Typo_Statisch" e removo o efeito de pintura na camada inferior.

Animação fácil: animação de linha

Passo 23

Na camada superior temos o texto desenhado com o original branco por baixo.

Na camada inferior temos o texto branco normal.

Se marcarmos a caixa de Pintar transparência na camada superior, apenas os traços vermelhos desenhados permanecerão visíveis.

Animação fácil: Animação de traços

Passo 24

A camada superior deve ser usada como máscara para a inferior.

Se a máscara não estiver visível, basta clicar em Ativar/Desativar modos de mistura na parte inferior, então a máscara de movimento BewMas será exibida.

Então posso selecionar uma máscara alpha e obter exatamente o resultado que preciso. Ou seja, onde esses traços são desenhados, minha fonte original também será visível.

Animação feita facilmente: Animação de traços



No entanto, algo está deslocado, porque logo no início já tem o A.

Passo 25

Então, é melhor selecionar novamente todos os pincéis com uma seleção de retângulo de baixo para cima (1) e depois excluir os dois frames do ponto de exclamação com a seleção Shift (2). Eles já estão perfeitamente posicionados no tempo.

Em seguida, movo o primeiro frame um pouco para a direita, para que o A não seja visível bem no início.

Agora está tudo certo.

Animação feita facilmente: Animação por traços

Passo 26

Fizemos isso na subcomposição, aqui ainda temos o efeito de Turbulência.

Se analisarmos isso tudo nesta composição, não só é em amarelo e a cor muda, mas também balança.

Animação facilmente feita: Animação em traços

Passo 27

Está maravilhoso e perfeito, mas a cor só deve mudar depois, ou melhor, não mudar no momento. Portanto, por enquanto, Alterar Cores fica desativado.

Animação fácil: animação em linha



Assim, terminamos os primeiros 4 segundos do trailer e nos encontraremos novamente na próxima parte do tutorial, com a bola quicando.