Como criar um loop de pingue-pongue perfeito no After Effects

1. Introdução: Oi, meu nome é Martin, e eu sou um artista cinematográfico da Argentina. Hoje, você vai aprender a criar essas belas animações de ping-pong. Para conseguir isso, vou ensiná-los como é o meu processo criativo, da inspiração à exportação final. Vamos ver alguns bons conceitos como teoria de loop, curvas de animação, quadro de esfregaço, e seguir através. A idéia principal desta classe é para você criar alguma animação legal e compartilhá-la em sua rede de mídia social. Dessa forma, você pode se conectar com outros artistas, como ilustradores, animadores, pessoas de animações, e você pode até mesmo conseguir um emprego. Tenho vivido com essas profissões desde 2009, e garanto que um aspecto fundamental disso é compartilhar seu trabalho e manter o fluxo de produção o tempo todo. Você deve fazer esta aula se você é um ilustrador que quer dar vida a suas ilustrações, ou talvez se você é um animador que quer aprender algumas técnicas de animação legal, ou talvez se você quiser apenas contar sua mensagem através de um olhar animado. Se você decidir fazer esta aula, não se esqueça de escrever seus comentários e compartilhar seu projeto na galeria. Estarei do outro lado, dando feedback e respondendo a todas as suas dúvidas na página da Comunidade. Mal posso esperar para compartilhar tudo isso com você. Matricula-te e encontramo-nos na aula. 2. Inspiração e moodboard: Muito obrigado por fazer esta aula. Agora vamos começar com a primeira parte de cada criação de animações que é inspiração. Temos que procurar imagens, formas, cores, animações, qualquer referência visual que você acha que representa a animação final que vamos fazer. Depois disso, vamos selecionar os melhores e vamos criar nosso quadro de humor, que vai guiar nossa animação por todo o processo. Vai manter a consistência da peça porque temos as cores, as formas, o estilo que vamos seguir. Vamos preparar um café, vamos colocar um pouco de música legal e vamos procurar alguma inspiração. Primeiro de tudo, eu quero dizer a vocês o que me inspirou a criar essas aulas. Comecei a seguir artistas e reconheci que esse tipo de loop era repetido o tempo todo. Vamos ver alguns exemplos. Aqui tenho o perfil de Ema Columbo. Gosto muito dos laços dele. Você pode verificar isso. Também gosto do James Curran. Você pode ver muitos laços bonitos. Esse cara é como o mestre dos loops. Também gosto do Motion Markus. Ele tem muito disso. Ele também é um bom artista. Depois de obter toda essa inspiração, decidi descobrir como criar esse tipo de loops. Por que chamar de loop de ping-pong? Tudo veio de efeitos após onde há uma expressão chamada loop out ping-pong, que mantém a animação indo de um quadro-chave para outro. Embora esta não seja a expressão que vamos usar. Decidi que era um bom nome para esta aula. Para ensinar-lhe essa idéia, eu dividi o processo em etapas, que você pode repetir em suas animações e trabalhos de animação. Inspiração, quadro de humor, design , configuração, animação, toques finais e exportação. Para vos ensinar todos estes conceitos, pensei que seria uma boa ideia criar um pássaro voador. Mas depois de aprender esse processo, você será capaz de criar o que quiser. Vamos começar. Primeiro, vamos procurar no Pinterest imagens que representem o estilo que procuramos. Depois de selecionar muitas imagens, agora você pode selecionar novamente as mais representativas para criar seu quadro de humor. Eu chamo de pássaro Skillshare. Aqui você pode encontrar formas como esta. Eu realmente gosto dessas formas geométricas. Também gosto desta paleta de cores. Eu gosto de como a textura do peito é alcançada nos olhos também. Além disso, aqui temos uma bela paleta de cores. Outra. Gosto de como essas formas geométricas funcionam. Talvez eu possa usar algo assim. Eu realmente gosto de como esta asa é separada em três partes. Eu acho que isso é separado em três, vai nos dar um movimento muito mais natural quando balançar, quando o pássaro está voando. Se você tiver que fazer uma animação mais complexa, você pode criar seus quadros de humor no Illustrator e adicionar topografia. Você pode adicionar algumas texturas ou o que quiser. Neste caso, vamos usar este quadro do Pinterest como nosso quadro de humor. Você deve investir seu tempo nesta parte e também treinar-se para melhorar cada vez. Como você pode treinar a si mesmo? Bem, você pode criar coleções do Instagram com as melhores ilustrações, com as animações que você gosta, outra com design gráfico que você gosta, fotos. Você pode criar álbuns do Pinterest. Você pode fazer uma playlist do Vimeo. Com todos esses recursos, sua cabeça estará cheia de coisas novas, cheia de novas peças criativas. Lá você vai ter algumas novas ferramentas para introduzir em suas animações. Além disso, outra forma de se treinar é ler. Aqui eu tenho um livro muito bonito que é roubar como um artista de Austin Kleon. Este livro realmente me ajudou neste processo de criação porque abriu minha mente. Ajudou-me com esta parte da produção, que é inspirações. Ajudou-me a procurar coisas, a introduzir coisas que outros artistas fazem nas minhas animações. Agora, estamos prontos para fazer a primeira tarefa desta classe, que é criar um quadro de humor. No próximo capítulo, vamos começar com o design. 3. Projeto: Com a ajuda do nosso quadro de humor, vamos começar a desenhar dentro do After Effects. Aqui temos o quadro de humor que criamos antes e o esboço. Como você pode ver, eu tentei mantê-lo geométrico e simples. Temos triângulos, círculos, algumas linhas retas. Eu tirei este estilo desta ilustração. Você pode ver que o corpo do pássaro é um círculo e um triângulo, e as pernas são apenas linhas retas com dois círculos. Eu gosto de como isso foi feito, e eu realmente gosto dessa textura no peito do gato então eu tentei fazer algo semelhante com as asas. Eu fiz meu esboço no papel com um lápis, mas você pode fazê-lo do jeito que você mais gosta. Há um bom tutorial sobre Skillshare que mostra um grande processo de desenho e esboço, que é Odd Bodies de Tom Froese. Definitivamente recomendo. Isso realmente me ajudou com meu processo de esboçar. Há um aspecto chave que temos que pensar antes de projetar, que é onde eu estou publicando minha animação? Isso vai determinar a taxa de quadros, a resolução, a proporção da nossa animação. Vai ser vertical, vai ser horizontal. Vai ser para uma TV, para um Instagram, para um YouTube, e é assim que você define como você vai projetar a animação. Neste caso, vamos fazer nossa animação para o Instagram e vamos ficar com as dimensões retrato que são 1080 pixels de largura por 1350 pixels de altura. Agora, estamos prontos para abrir o After Effects, e vamos criar nossa composição acordo com as dimensões que falamos antes. Vamos chamá-lo de BIRD DESIGN. Vamos fazer com que seja 1080 por 1350 pixels quadrados. 24 quadros por segundo é uma boa taxa de quadros, e a duração vamos deixá-lo 15 segundos. Além disso, criaremos algumas pastas que nos ajudarão a manter nosso pedido. Este será RENDER. Vamos largar o nosso design para o momento e ACTIVOS. Dentro de ASSETS, vamos criar nossa pasta Imagens para soltar todas as imagens que vamos importar, e também vamos criar a pasta PRECOMP. Agora, vamos importar o nosso esboço e o nosso quadro de humor. Para o quadro de humor, acabei de tirar uma captura de tela da nossa página do Pinterest. Vamos clicar duas vezes no quadro de humor para vê-lo aqui, e vamos deixar o esboço para nossa composição BIRD DESIGN. Vamos começar com a paleta de cores. Eu realmente gosto dessas cores, então nós vamos escolhê-las. Para fazer isso, basta desmarcar tudo, selecionar a Ferramenta Quadrada, criar um quadrado e escolher nossas cores. Quando você tiver essa seleção, você pode pressionar “Alt” e arrastar para copiá-la, e nós vamos continuar escolhendo nossas cores. Agora que temos nossa paleta de cores, podemos nomeá-la e mantê-la em um lugar onde possamos vê-la o tempo todo. Com a ajuda de camadas de forma, vamos recriar todo o design que temos agora. Para fazer os cantos redondos, temos que abrir nossa Camada de Forma e ir para Stroke, e colocar Tampão Redondo. Se você tem uma junção aqui, você também pode colocar Round Join. Vamos repetir isso para cada golpe que temos. Para criar uma nova camada de forma, basta desmarcar tudo e começar com a Caneta ou com a Ferramenta de forma geométrica. Você começa a desenhar e isso criará uma nova camada. Se você quiser continuar projetando na mesma camada, basta continuar desenhando sem desmarcar. Para modificar apenas uma das alças quando necessário, você deve pressionar “Option” ou “Alt” e redirecionar a alça. Novamente, assim como fizemos com a paleta de cores, você pode pressionar “Alt” ou “Option” e continuar copiando nossa forma. Você pode navegar por suas formas dentro do Conteúdo. Lá temos todas as nossas formas. Você pode selecioná-los e movê-los. Se você continuar abrindo o Conteúdo e ir para o Caminho, poderá selecionar um determinado ponto e modificá-lo. Você pode continuar refinando seu design até ficar feliz. Você pode ver que agora eu estou faltando uma asa, mas eu apenas reposicionar algumas coisas a fim de manter a harmonia do design. Quando você terminar tudo isso, você tem que copiar a asa, a fim de mantê-los idênticos. Para fazer isso, vamos sossegar todas as camadas de asa. Vou criar um objeto nulo. Você pode ir para Camada, Novo Objeto Nulo e posicioná-lo na ponta da asa, e nós vamos fazer todas essas camadas. Vamos criar todas essas camadas para o nulo. Depois de fazer isso, você pode selecioná-los todos novamente. Pressione “Comando D” para duplicar. Podemos trazê-los para cima e vamos escalar o nulo. Pressionamos “S”, desbloqueamos e colocamos menos 100. Isso refletirá o nulo e como tudo é pai, ele refletirá todas as suas camadas. Perdemos uma dica, então vamos voltar. O que estamos perdendo aqui? Este. Nós não duplicamos isso. Lá vamos nós. Fazemos isso de novo. Colocamos um menos para refleti-lo. Lá vamos nós. Nós un-solo tudo. Agora reposicionamos nossa ala esquerda. Podemos usar a ajuda do esboço, mas como você pode ver, ele já mudou muito. Acho que estamos mantendo a essência do design. Lá temos, o esboço e o design final com as camadas de forma. Agora que temos o design pronto, podemos começar a preparar nosso projeto para mais animação. 4. CONFIGURAÇÃO: Este capítulo é sobre ser arrumado e manter a ordem. Quando você trabalha em animações, isso vai fazer você muito mais rápido. Você vai entregar seus trabalhos a tempo, e também seus clientes serão mais felizes. Às vezes, no estúdio, os clientes nos chamam não só porque animamos bem ou sem problemas ou o que seja, mas porque estamos arrumados e mantemos a ordem. Isso é muito útil quando você tem grandes projetos com muitas pessoas trabalhando nele, ou muitas animações para criar, e é um aspecto fundamental para manter tudo em ordem, apenas para alcançar os prazos que os clientes nos colocam. Vamos entrar no After-Effects e eu digo-te como é o meu processo. Como disse na minha aula anterior, a ordem é um aspecto chave do processo de criação de animações. Principalmente, temos que mantê-lo em três lugares: Organização da pasta do projeto, Organização compartimento do After-Effects e Configuração pós-ética. No primeiro caso, recomendo fortemente que você trabalhe na Nuvem. Para isso, acho que o Dropbox é a melhor opção. Dessa forma, os arquivos são sempre copiados. Você pode trabalhar com outros trabalhos de equipe sem problemas e você pode ter acesso aos seus arquivos em todos os lugares. Às vezes, quando não estou no estúdio, posso resolver entregas de meus colegas de equipe ou clientes do meu telefone. Isto é realmente útil. A estrutura de pastas é esta, nós temos AE, onde vamos armazenar todos os projetos After-Effects, lembre-se de colocar o nome do cliente, este seria Skillshare Bird, e o nome do projeto. Isso seria loop, ping pong loop. Nós sempre os tornamos sequenciais, um, dois, três , quatro e cinco, caso você tenha que voltar para uma versão anterior. Então temos Material do Cliente. Aqui, eu acabei de criar a pasta sem uso porque eu não tenho nenhum Material de Cliente, mas isso é útil quando os clientes enviam fontes, comentários ou imagens, o que quer que os clientes enviem está aqui. No Design, temos Mood board, Sketch e, em seguida, todos os formatos de imagem que você usa AE, JPEGS, PSD, o que você comprou. Se você vai trabalhar no PSD, ou no Illustrator, você pode colocar o nome da cena e, em seguida, continuar colocando o nome sequencialmente para que você sempre saiba qual é a última versão. Nesse caso, projetamos tudo dentro do After-Effects, então não teremos nenhum Illustrator, JPEGS ou PSD. Vamos ter o Mood Board e o Sketch. Além disso, se você adicionar qualquer fonte, este seria o lugar para colocá-lo. Então temos a pasta Renders, onde teremos todos os renderizadores que fazemos com a data. Nós temos as pastas, por exemplo, 22, agosto, e dentro vamos ter todos os renderizadores que fizemos nessa data. Quando falamos sobre After-Effects Project Bin Organization, estamos falando sobre esta janela aqui. Aqui vamos organizar todos os arquivos que importamos, nosso design, nossas cenas, nossa música de voz, o que quer que você importe e também teremos as composições. Esta configuração simples que vou te mostrar vai te ajudar a ser mais rápido, e para você não perder tempo procurando o personagem, procurando a música, procurando o fundo, você sempre será mais rápido porque você sempre saberá onde procurar. Aqui temos Render. Esta composição é realmente importante porque tem que ter a taxa de quadros certa, a resolução certa, a área do espaço de trabalho já no lugar que precisamos que esteja, porque quando você está trabalhando com outras pessoas, todos tem que saber de onde vem a renderização. Quando você tem um grande projeto, você pode ter um monte de pré-comps, e talvez você esteja renderizando um pré-comp que não é a composição final, então quando você colocá-lo nesta pasta, todos vocês sabem que esta é a composição que você tem que faça a renderização de. Então temos a pasta Ativos. Lá vamos colocar todos os arquivos que importamos. Esta pasta também pode ser chamada JPEG e, em seguida, para criar uma nova pasta, basta clicar neste ícone. Você pode ter arquivos do Illustrator, importá-los aqui. Você pode ter voice-over, ou música, você continua fazendo as pastas que você precisa enquanto você importa seus arquivos. Não é recomendado criar muitas pastas se você não quiser usá-las. Em seguida, temos a pasta pré-comp onde vamos soltar todas as pré-composições que criamos durante a animação. Finalmente, temos a Organização de Camadas. Aqui, temos todas as camadas de forma que criamos no vídeo do ônibus. Teremos que organizá-lo e prepará-lo para a animação. Este passo é realmente importante porque você vai economizar muito tempo preparando arquivos antes de animar. Eu realmente recomendo que você passe algum tempo nesta configuração. Vamos mudar a cor das camadas para ter uma ordem visual. Nós também vamos ajustar os pontos de ancoragem onde a camada gira e escala a partir de. Também vamos renomear tudo e vamos desfilar as coisas. Por exemplo, aqui temos a asa que gira a partir deste ponto, que não é tão bom, e também não se move com as penas que projetamos. Você pode fazer isso ao mesmo tempo que você está projetando. Eu separo para ser mais claro para esta classe. Aqui temos, por exemplo, o bico. Primeiro de tudo, eu quero que o bico e a cauda girem do centro do corpo. Vamos largar alguns governantes. Se você não tem as réguas, você tem que pressionar Command ou Ctrl+R, então você coloca o mouse nos números e você vai ver as mudanças de ícone, agora você clica e arrasta, e você vai encontrar esta linha. Vamos colocar alguns governantes aqui. Agora nosso bico está girando de seu ponto de ancoragem, e queremos girá-lo do centro do corpo. Vamos pressionar o Y, e podemos ver o ponto de ancoragem se encaixar nos guias. Vamos colocá-lo no cruzamento dos nossos guias. Se você acessar Exibir, poderá bloquear guias, encaixar guias, mostrar guias, limpar guias. Pode brincar um pouco com isso. Nós vamos fazer o mesmo para a cauda, eu sinto muito eu tenho que renomear isso nós pressionamos Y, se nós pressionamos e pressionamos Y, quando nós despressionamos, nós voltamos para a última ferramenta que temos, que seria a ferramenta de seleção, que você pode voltar com o curto v. Tudo bem, nosso olho girará a partir desse ponto de ancoragem, vamos renomear isso. Para mudar o nome, prima Enter. A parte mais importante deste design é o corpo porque ele vai controlar tudo. Renomeamos seu corpo. Podemos colocar uma cor forte como esta, a fim de primeiro ver onde está a nossa camada corporal, porque vamos voltar muito a esta animação. Então temos bico e cauda. Se clicarmos nesta caixa vermelha, teremos todas as cores que pudermos usar, amarelo, então teremos o olho, vamos mantê-lo amarelo. Então aqui temos as pernas. As pernas vão girar a partir da ponta. Lá vamos nós. Temos a perna direita e a esquerda. Vou pô-las verdes. Então temos a asa, temos a base. Lembre-se, se pressionarmos este ícone solo, vamos ver apenas a camada solo. Temos uma ala. Podemos mudar para azul. Nós não vamos animar as penas, nós vamos apenas pará-los para esta parte da asa e este outro grupo para estas partes da asa então o ponto de ancoragem, está tudo bem. Então temos as penas longas, que são estas corridas. Vamos ajustar os pontos de ancoragem para girar a partir desta ponta. Lá vamos nós. Agora temos tudo com seu nome, seu ponto de ancoragem e sua cor de camada. Agora é hora de pais coisas. A cauda vai ser parentada para o corpo. O olho vai ser pai para o corpo também. O pico vai ser pai para o corpo, a perna direita, ele vai ser pai para o corpo e para a perna esquerda também. Para a asa, quero dividi-la em três partes. Temos a primeira parte aqui, a segunda parte aqui, e a terceira parte seria essas penas amarelas. Isso nos daria um balanço muito mais dinâmico e fluido quando o pássaro está voando. Primeiro, vamos solo a asa para ter uma visão mais clara e, em seguida, vamos criar um círculo nesta parte para dividir a parte maior da parte menor. Este círculo nos dará uma união limpa. Vou até a ferramenta de elipse e crio um círculo perfeito. Você pode pressionar shift para torná-lo perfeito e comandar ou controlar a escala a partir do centro. Então, se você pressionar o v curto, o programa permitirá que você se mova ou dimensione novamente. Vamos posicionar isto para tocar a borda da outra forma. Isso é perfeito. Agora vamos para a ferramenta caneta, clique e segure, vamos selecionar o ícone de adição. Colocamos um ponto lá e vamos colocar um ponto lá também. Deixe-me verificar se os pontos estão no caminho certo. Se selecionarmos o caminho dentro da camada de forma, vamos ser capazes de controlar os pontos, então isso está bem e este também está bem. Temos a elipse e a forma com dois pontos nos cruzamentos. Agora vamos duplicar a asa. Para uma ala, vamos apagar esta parte e para a outra, vamos apagar esta parte, mantendo sempre o círculo em ambos. Vamos começar com a ala número 1. Vamos para a forma, vamos pressionar e segurar, selecione o ícone de menos. Vou clicar nesses pontos. Agora temos meia asa com o círculo e vamos para o outro. Selecione este ponto, abra o caminho da forma. Pressionamos o V. Desta forma, podemos ajustá-lo para manter o círculo como a borda. Agora vamos posicionar nosso ponto de ancoragem. Vamos usar a mesma técnica que usamos antes. Agora, vamos pressionar Y. Agora temos a ala 1 e a ala 2 e ambos têm o mesmo círculo. Quando giramos, você pode ver que não temos pontos afiados no meio. A junção é perfeita. Você pode usar o mesmo método ao manipular o personagem para os ombros, os joelhos, tudo o que gira deve terminar com um círculo. Assim você tem esse tipo de juntar-se. Agora podemos criar as penas da ponta para a asa também. Deixe-me verificar. Vamos criar tudo isso para a ala 2. Vamos criar estas duas penas para a ala 1. Ala 2 vai ser pai para a ala 1. Agora, quando rodarmos, você pode ver que a asa está funcionando perfeitamente. As penas estão bem. As penas longas também estão bem. Você pode ver que animar desta forma com uma configuração muito boa feita será mais rápido e muito mais divertido. Porque você pode realmente sentir o movimento de uma asa 1 animando. Você não vai perder seu tempo fazendo e refazendo animações. 5. Teoria de loop: Agora estamos prontos para a animação. Mas primeiro, vamos verificar alguma teoria. Temos duas coisas para prestar atenção ao fazer um loop. O primeiro é a duração do loop principal, e o segundo é a duração da animação interna. À medida que estamos fazendo um loop de ping-pong, os movimentos dos elementos devem voltar e voltar à sua posição inicial. Vamos chamar isso de Loops de Animação. A chave aqui é ajustar todos os loops de animação dentro da duração do loop principal. Por exemplo, se nosso loop tiver 20 quadros de comprimento, nossos clipes de animação podem ser de 20 quadros, dez, cinco ou dois. O que seria muito rápido e caótico, mas ainda é uma opção. Desta forma, você pode mover os loops de animação no tempo e eles sempre serão loop dentro do nosso loop principal. Isso manterá o fluxo de loop o tempo todo e nos dará a opção de criar acompanhamento, que consiste em atrasar algumas camadas, um ou dois quadros, para seguir um dos 12 princípios de animação, dando uma aparência mais natural e orgânica às nossas animações. Vamos fazer isto, enquanto animamos o nosso pássaro. Finalmente, estamos prontos para a animação e vamos começar a mover as coisas no próximo capítulo. 6. Asas e corpo: Antes de animar, vamos definir as durações. Na duração do loop principal, asas quando balançar duas vezes, enquanto a cabeça virá e vai apenas uma vez. Ele vem com o primeiro balanço e volta com o segundo, assim como as pernas. Primeiro de tudo, vamos definir nossa duração do loop principal. Você pode tentar animar mais ou menos até ter a duração desejada. Você pode tentar com a asa ou com o corpo, tudo bem, ou também você pode verificar algumas referências. Eu tenho alguma referência do Pinterest, também você pode verificar Dribbble e este é realmente bom. Você pode verificar o tempo quando as asas sobem, quando descem, esta é uma maneira realmente boa de extrair informações de outras referências. Neste caso, acho que podemos usar uma duração principal de 36 quadros a 24 quadros por segundo. Deixe-me verificar. Está tudo, está tudo bem. Podemos ver as configurações de composição. Temos as dimensões retratadas e 24 quadros por segundo. Vamos colocar um marcador no quadro 20, então vamos avançar 36 quadros. Vamos colocar outro marcador, e como os ventos vão subir e descer duas vezes, vou colocar um marcador no meio. Temos a entrada, temos o meio, e temos a saída. Podemos ajustar uma área de trabalho, aqui teremos um balanço, dois balanços e corpo vai para cima e para baixo, para cima e para baixo. Nesta primeira parte, a asa começará na posição descendente. Ele vai subir e descer novamente, então vamos começar a girar. Você pode pressionar o R para revelar as propriedades de rotação, e vamos colocar um quadro-chave clicando no cronômetro. Vamos girar isso até que estejamos felizes com ele. Além disso, podemos girar as penas longas também. Para criar o efeito de um bom balanço, temos que dar mais tempo ao movimento do app e menos tempo ao movimento para baixo. Vamos quebrar nossos 18 quadros em até 10 quadros e para baixo oito quadros. Podemos colocar um marcador aqui também. Isso seria para cima, e agora podemos girar tudo ao mesmo tempo, como é tudo pirata, você pode ver tudo gira um pouco mais do que a parte que era antes. Você pode ajustar isso. Se você quiser exagerar uma parte da asa, você pode girar apenas essa parte. Você pode brincar com isso até que você esteja feliz. Então vamos vê-lo animado e terá muito mais sentido. Depois voltamos. Vamos começar a copiar e colar nossa posição A. Lembre-se, você sempre trabalha com três quadros-chave, posição A, posição B e posição A novamente. Agora podemos ver as asas balançando com o tempo que montamos. Agora está parecendo um pouco horrível, mas vamos torná-lo melhor com as curvas de animação. Se você quiser ir mais longe sobre isso, você pode verificar a animação Barlett de Jake com facilidade na classe After Effects. Primeiro de tudo, vamos pressionar F9 para facilitar todos os quadros-chave. Agora parece melhor, mas ainda temos que jogar com as curvas de animação para alcançar um balanço mais dinâmico. A maneira mais rápida que encontrei para trabalhar com dinâmica de movimento é modificar a velocidade do quadro-chave. Eu não costumo usar o gráfico, eu apenas usá-lo para movimentos específicos que eu quero alcançar. Deixe-me mostrar-lhe rapidamente como funciona. Quando estávamos falando de chave de velocidade, estamos falando sobre a interpolação entre dois quadros-chave. Quando você move um elemento pela primeira vez, você coloca um quadro-chave na posição A e um quadro-chave na posição B. Aqui temos uma bola que vem desta posição para esta posição. Automaticamente, o programa coloca esses quadros-chave lineares. O programa calcula a velocidade que a bola tem que alcançar para ir de A a B sem acelerar ou desacelerar. Quando selecionamos o quadro-chave e pressionamos F9, estamos começando a trabalhar com curvas de movimento. Você pode ver as bolas começam a partir da velocidade zero, aceleram, e depois desaceleram. Agora, manipulando a velocidade do quadro-chave, podemos exagerar isso. Por exemplo, aqui temos outra bola. Vamos começar com um F9, e então vamos para as configurações de velocidade do quadro-chave. O F9 baixa a velocidade para zero e a influência para 33. Se colocarmos 100 de influência, você pode ver o tempo que leva para acelerar. Leva muito mais tempo, então atinge uma velocidade máxima por aqui. As duas bolas se movem de A para B ao mesmo tempo, mas no meio, coisas diferentes estão acontecendo. Podemos verificar isso com o caminho do movimento. O caminho de movimento mostra onde o ponto de ancoragem da nossa camada está em cada quadro. Você pode ver todos os quadros necessários para acelerar. Mas quão poucos leva e quantas distâncias percorre no final. Agora temos uma terceira bola e vamos colocar alguma influência no final. Como é o fim, a animação vem daqui até aqui. Vamos jogar com a velocidade de entrada, a velocidade de entrada em direção ao quadro-chave. Colocamos zero, e colocamos 100. Agora temos o desenho invertido do caminho de movimento, lá você pode ver a diferença entre influência na saída e influência na entrada. Eu recomendo que você brinque com isso até que você se sinta confortável. É muito importante para você dominar essa técnica. Nesta animação, vamos começar na posição para baixo. Para ir para a posição acima, vamos colocar alguma influência para obter a sensação de que as asas são pesadas. Podemos ir com o atalho ou podemos apenas clicar com o botão direito e pressionar a velocidade do quadro-chave. Vamos colocar alguma influência para atrasar o início do movimento, e antes de alcançar a posição ascendente, colocaremos muita influência, máxima influência. Isso atrasará a asa até que ela atinja sua posição ascendente, criando alguma antecipação para o movimento descendente. Para a velocidade de saída, manteremos a faixa um pouco com 75 por cento de influência. Vamos acabar com uma influência 33 e zero para a queda, isso nos dará um movimento muito mais rápido para baixo. Lá vamos nós. Você pode ver que leva mais tempo na posição de cima antecipando a posição para baixo, e estamos recebendo um movimento muito mais fluido agora. Lembre-se, você pode jogar com a influência selecionando mais de um quadro-chave, mas todos eles têm que ser o mesmo parâmetro. Resumindo, aqui nós jogamos com a velocidade de saída, nós atrasamos um pouco apenas para dar a asa mais peso, então nós atrasamos muito a posição de cima para antecipar a posição para baixo. Para a influência final e velocidade, apenas mantemos o F9, 33%. Lembre-se, fizemos 10 quadros para a posição de cima e apenas oito quadros para baixo, isso também nos ajuda a fazer a posição para baixo balançar mais rápido. Agora, como nosso loop de duração principal é 36 quadros e não 18, nós temos que colocar algumas expressões para loop isso. Vamos jogar “Alt” ou “Option” e clicar no cronômetro. Então, vamos apenas digitar LoopOut. Se você tiver a última versão do After Effects, ao digitar loop , ela aparecerá aqui e, caso contrário, basta digitar LoopOut e parênteses. Lá vamos nós. Podemos pressionar Enter a partir do número. Agora temos um loop de parte como você pode ver, e podemos replicar isso copiando expressão e colando. Mantenha pressionada a tecla “Shift” para selecionar todas as propriedades de rotação e “Command V.” Lá vamos nós. Agora, nossa asa está em loop para sempre. Para o corpo, vamos seguir a mesma lógica. Como temos uma boa hierarquia de pais, quando movemos o corpo, todas as partes dele vão se mover. Vamos para a posição de baixo, vamos colocar um quadro chave aqui, então vamos subir e brincar com a posição do corpo. Lembre-se, você sempre tem que manter a posição a, a posição b e a posição a novamente. Pressionamos “F9", podemos fechar a área do espaço de trabalho no meio por enquanto e jogar com os parâmetros. Uma vez que estamos felizes com isso, você pode começar a mudar a influência da animação. Para o corpo, eu só quero atrasar quando ele sobe e desce, todos com a mesma influência. Vamos começar com 55. Se você quiser, você também pode brincar com essas pequenas penas. Por enquanto, acho que está muito bem assim. Agora, estamos faltando apenas uma coisa, que é replicar o loop de expressão. Agora, podemos verificar todo o ciclo, está parecendo muito bom. Você pode ver que estamos animando apenas uma asa, tudo bem, vamos replicá-la e colocá-la aqui quando terminarmos. Uma vez que tenhamos tudo animado, é hora de fazer algum acompanhamento. Para fazê-los corretamente, vamos mover nossa área de trabalho. Não temos que nos preocupar, porque tudo está em loop. Aqui, teremos o mesmo loop que temos aqui. Mas vamos manter os marcadores porque eles vão nos ajudar com mais animações. Agora, como eu disse no capítulo anterior, é hora de mover as coisas, apenas alguns quadros, a fim de obter um efeito de acompanhamento e uma animação muito mais dinâmica e natural. Primeiro, temos o corpo. O corpo vai guiar tudo. Então, temos esta ala, que será a Ala número 1. Vamos atrasar estes quadros da Ala 1, e vamos atrasar estes quadros da Ala 1 do anterior. Lá vamos nós. Podemos exagerar um pouco, tentar brincar com ele até que você esteja feliz. Lá vamos nós. Também podemos atrasar todas essas penas longas. Vamos para a última animação e vamos colocar a posição inicial dos longos furthers um quadro ainda mais. Agora, temos um movimento muito mais dinâmico e também podemos exagerar isso. Podemos girar as penas. Lembre-se, você sempre tem que copiar e colar a primeira posição, tem que ser exatamente a mesma. Lá vamos nós. Você pode ver que agora nossa tela é realmente natural. Agora, temos que duplicar a asa e criar a ala esquerda. Vamos selecioná-lo, todas as partes da asa, vamos duplicá-los, movê-los para cima, e vamos mudar sua cor para ciano. Nós também vamos criar a fim de refleti-lo. Nós só temos que criar a primeira ala porque é tudo pai para aquela ala. Então, vamos bater “Sim” para escalar e vamos torná-lo negativo apenas na posição x. Isso está tudo bem. mover a asa para alcançar o ponto desejado. Agora, temos que recriar esta asa para o corpo. Podemos apagar o nulo, só não precisamos mais dele. Agora, temos nosso pássaro voador realmente incrível. 7. Smears! ! Palha, cauda e olhos: Para a cabeça e a cauda, obtemos três elementos. Temos os olhos, temos a cauda, e temos o pico. Vamos começar com a cauda e o pico. Enquanto nos preparamos na configuração, ambos têm esses pontos de ancoragem no centro da cabeça. Estes vão fazer rotação em torno da cabeça e vamos gerar arcos. Este é outro princípio de animação que é realmente bom para obter. Estávamos trabalhando aqui com esses marcadores mas começamos a atrasar algumas camadas, a fim de criar seguimentos. Algumas camadas começam a fazer loop mais tarde. Temos que mover a área do espaço de trabalho mais longe a tempo para localizar o período que queremos. Agora, temos uma área de trabalho de 36 quadros. Sabemos que tudo circula em 36 quadros, por isso está tudo bem. Vamos colocar a animação da cabeça enquanto o pássaro está balançando para baixo. Seria aqui, da esquerda para a direita, e aqui, da direita para a esquerda. Vamos apagar este marcador e podemos colocar dois novos marcadores, aqui dentro e fora. Isso está tudo bem. Vamos começar com o pico. Vou apertar “R”, para a rotação. Vamos colocar um quadro-chave no início do balanço e então eu vou tentar localizar o fim da string. Lá vamos nós. Isso está tudo bem. Vamos começar a pressionar “F9" para ver o movimento. Acho que vai ser mais girado para acabar como no começo. Isso está tudo bem. Vamos começar a jogar com a velocidade do quadro-chave. Vamos tentar 85 e 85. Isso gerará um atraso na aceleração. Vai atingir uma velocidade máxima por aqui, e começará a desacelerar para atingir velocidade zero. Eu gosto disso. Acho que podemos exagerar um pouco. Vou desligar a cauda por enquanto. Podemos expandir um pouco a área. Lá vamos nós. Você pode jogar com isso até que você se sinta confortável com o movimento de pico. Agora, vamos fazer o movimento inverso. Para fazer isso, vamos copiar e colar quadros-chave e mouse em Assistente de quadros-chave, Quadros de tempo reverso. Está parecendo muito bom. Eu gosto disso. Agora, vamos mover a cauda. Está parecendo muito bom. Agora, vamos animar o olho. O olho vai apenas refletir para mudar do olho esquerdo para o olho direito. Para fazer isso, vamos brincar com essa escala. Vou colocar um quadro-chave. Aqui vamos colocar menos no valor x. Isso vai girar o olho. Podemos alternar segurar estes quadros-chave. Isso significa que não será interpolação entre quadros-chave. Só vai mudar abruptamente. Lá vai você. Baseamos os mesmos quadros-chave e revertemos o tempo dos quadros-chave. Lá vamos nós. Agora, estamos perdendo o loop. Para dar esse loop o tempo todo, vamos colocar um quadro-chave no início e no final. Isso irá fechar o loop em 36 quadros, que é o que precisamos para colocar o loop de expressão para fora?. Lá vamos nós. Agora nosso pássaro está em loop para sempre. Ele está sempre em loop em 36 quadros porque colocamos esses dois quadros-chave no início e no final. Agora que temos isso feito, podemos adicionar um pouco de magia com molduras de esfregaço. Mas o que é um quadro de esfregaço? Consiste em um ou dois quadros que exageram muito o movimento. Às vezes, podemos usar repetição, e outras vezes, podemos esticar formas como borracha. Onde os colocamos? No momento da animação onde o movimento é mais rápido. Primeiro, localizaremos esse momento. Seriam esses dois quadros. Você pode ver os grandes problemas de muita distância. Agora, temos que substituir o bico e a cauda com a forma elástica de borracha para dois quadros. Para isso, criaremos um círculo perfeito. Vamos duplicar o corpo, remover todos os quadros-chave e expressões e vamos gerar um traçado e remover o preenchimento. Lá vamos nós. torná-lo amarelo para o bico e o eclipse, vamos escalá-lo um pouco para alcançar a ponta do bico. Agora, vamos adicionar um animador, que é o caminho de corte. Isto vai cortar o nosso círculo e vamos levá-lo onde queremos. Você pode tomar o quadro-chave anterior como referência. Vai daqui até aqui. Vamos fazer o curso redondo. Isso é bom. A moldura do espelho da coruja aparecerá neste quadro. Vamos colocar um quadro-chave de opacidade e podemos animar o caminho de corte para o segundo quadro. Isso parece bom. Estamos animando a opacidade com rebocar ou segurar quadros-chave de zero a cem a zero novamente. Lá vamos nós. Agora vamos colocar o caminho de corte dentro da elipse e vamos duplicar a elipse. Vamos criar um menor e mais curto. Pressione o U para revelar todos os quadros que temos. Lá vamos nós. Tudo bem, perfeito. Agora, vamos fazer o mesmo para a cauda. Vais duplicar a nossa elipse. Podemos mudar seu nome aqui. Podemos colocar bico de moldura de esfregaço, bico de moldura de esfregaço dois. Agora podemos fazer a cauda. Estamos animando o início e o fim do caminho de corte. Isso moverá o ponto de partida e o ponto final. Vamos usar os mesmos dois quadros-chave. Mudaremos a cor e a largura. Podemos mover o oposto também. Lá vamos nós, parece muito bom. Agora podemos baixar a opacidade do bico e da cauda enquanto este mero quadro está acontecendo. Colocamos o quadro-chave em 100% apenas um quadro antes de avançarmos mais. Vamos para zero, um quadro, dois quadros, 100. Podemos alternar segurar isso. Não interpolar aqui. Podemos copiar e colar os quadros-chave para a cauda. Lá vamos nós. Está parecendo muito bom. Agora vamos brincar com o olho. Para o olho, vamos criar como um olho de borracha ao mesmo tempo que está refletindo. Este seria o olho esquerdo e este o olho direito. No meio, teremos um quadro de esfregaço que conecta ambos os olhos. Para isso, criaremos uma forma com a ferramenta caneta. Olhando bem. Vamos chamá-lo SMEAR EYE. Vamos pintá-la no corpo. Vamos fazer a sua taça redonda. Agora temos que fazer parecer. Vamos seguir os esfregaços por isso criamos antes. Neste quadro, ele deve ter opacidade zero. Neste tem 100. Este tem zero. Alternar segurar. Agora temos que posicionar o esfregaço onde o olho está. Podemos rodar um pouco. Lá vamos nós. Podemos animar o caminho. Vamos colocar um quadro-chave aqui. Aqui podemos mover a cauda do quadro de esfregaço um pouco para a frente. Lá vamos nós. Agora temos que baixar a opacidade do olho. Assim como fizemos antes. Alternar segurar. Vamos olhar para ele. Está parecendo muito bom. Agora temos o movimento da esquerda para a direita. Teremos que repetir este processo para criar o quadro de esfregaço e assim completar o loop. Podemos pintar o esfregaço no corpo. Vamos seguir o corpo em todos os lugares e ele nos permitirá tornar o segundo esfregaço mais fácil. Agora temos tudo em loop, mas apenas dentro da área de trabalho. Se avançarmos, podemos ver que nem tudo está em loop para sempre. Estamos perdendo os esfregaços e a animação ocular. Isto é porque só trabalhamos neste espaço. Agora, a fim de fazer a expressão funcionar, temos que cobrir com quadros-chave os 36 quadros. Isso ocorre porque quando as expressões atingem o último quadro-chave, ele volta automaticamente para o primeiro. Se não cobrirmos os 36 quadros, ele estará constantemente em loop entre esses quadros. Isso será muito mais rápido do que 36 quadros porque temos 19 quadros. Isso será constantemente repetido mais rápido e não fará loop como queremos. Para todas essas camadas, temos que fechar o loop em 36. Vamos colocar um quadro-chave no final e no início de todos os parâmetros que são animados. Aqui temos a opacidade da cauda. Desta forma, podemos colocar nosso loop de expressão para fora. Lá vamos nós. Agora temos que fazer isso para cada animação que ocorre com os esfregaços da cauda, do bico e do olho. O problema aqui é que tudo está em loop, mas nossa animação de caminho não é. Isso ocorre porque a expressão LoopOut não está funcionando em ambas as animações. Para corrigir isso, vou colar uma nova expressão. Não se preocupe, eles estarão disponíveis na seção de recursos. Agora o nosso caminho também está em loop. Podemos ver que nosso pássaro está em loop para sempre. Além disso, se você quiser, você pode reposicionar as camadas que acabamos animar, a fim atrasá-las um pouco. Eu acho que isso está parecendo muito incrível. Agora estamos prontos para animar as pernas e dar a tudo uma rotação. Como se o pássaro estivesse voando. 8. Pernas: Antes de animar as pernas, vou adicionar um pouco de rotação ao corpo para obter uma sensação mais natural destes loop voador. Vamos até o corpo, vamos acertar R para revelar a propriedade de rotação. Lembre-se, temos que manter a duração da animação de 36 quadros. Vou colocar um chave-quadro no início, vou dar menos 15 graus, então eu tenho que me mover para o meio, que é 18 quadros. Eu colocaria o valor oposto que seria 15, e então no final, vamos copiar e colar. Aqui temos a animação. Primeiro de tudo, vamos pressionar F-9, para facilitar todos os quadros-chave. Parece muito bom, e acho que podemos exagerar isso colocando alguma influência, na velocidade de entrada e na velocidade de saída. Vou colocar 85%, o que é muita influência. Você pode brincar com isso até ficar feliz com ele, e agora podemos animar as pernas. Vamos animar as pernas nos mesmos momentos que a rotação do corpo que fizemos e então, podemos realocar tudo adicionando a expressão LoopOut. Vamos fazer esses primeiro, vamos adicionar nossa expressão LoopOut. Isso está tudo bem. Nossa rotação do corpo está em loop para sempre com todas as partes do nosso pássaro, boa aparência, e agora vamos animar as pernas. Vamos colocar um chave-frame. Vamos para o meio. Isso está tudo bem. Vamos copiar e colar os dois primeiros quadros-chave, e vamos pressionar F-9, apenas para visualizar como nossa animação é. Está parecendo bom. O que eu quero fazer agora, é brincar com as curvas de animação. Quero atrasar um pouco esta segunda etapa enquanto desce. Em primeiro lugar, vamos colocar alguma influência em ambas as pernas em todos os quadros-chave. Assim como fizemos com o corpo. Isso está tudo bem. Agora, quando a primeira perna está caindo, quero dizer a primeira que deve cair. Vamos colocar alguma velocidade de saída de 33. Isso fará com que essas pernas comecem mais rápido que a segunda, e faremos a mesma coisa, quando essa perna estiver caindo. Vamos colocar 33 em vez de 55, estes vão fazer esta perna um pouco mais rápida quando descer. Quando visualizarmos isso, isso está parecendo realmente incrível. Agora vamos adicionar nossa Expression LoopOut, para ambas as pernas. Lá vamos nós, tudo está em loop. Fizemos tudo mantendo a teoria do loop, então tudo deve circular perfeitamente. Agora, você pode jogar e realocar essas partes para obter resultados diferentes. Você ca n também mover as pernas separadamente do corpo, se você quiser obter esses resultados. Agora, você pode jogar seu loop para sempre. Continue movendo as coisas até estar feliz com o resultado, e você terá seu loop perfeito de ping-pong feito. Terminamos nossa animação, e agora é hora de passar pelo processo e exportar nosso espaço de animações. 9. Exportar: A última coisa a fazer é adicionar alguns toques finais como textura ou talvez um fundo animado ou tipografia, uma mensagem que você quer dizer o que quiser. Mas acho que nesta aula, temos muita teoria e você tem muito para processar. Não incluiremos isso nesta classe. Eu só queria dizer que para fechar o processo, você pode adicionar alguns toques finais à animação, e também temos que exportá-la e publicá-la. Vamos criar um plano de fundo. Lá vamos nós. Agora, vamos pré-compor tudo. Agora, vamos definir a duração. Sabemos que a partir de agora, nosso pássaro está em loop perfeitamente para sempre. Você pode fechar a área do espaço de trabalho aqui, pressionando o B e, em seguida, você pode mover 36 quadros quantas vezes quiser. 123, 123456, 123, 123456, Vamos um quadro para trás e pressionaremos o N para fechar nossa área de trabalho. Isso está parecendo muito incrível. Como trabalhamos inteiramente com camadas de forma, eles são todos vetores. A única coisa que temos para vetorizar é o fundo. Se pressionarmos aqui, convertemos em um vetor. Quando as coisas se tornam vetores, podemos escalá-las sem perder qualidade. Se escalarmos agora, veremos as coisas serem pixelizadas. Mas se apertarmos o botão de colapso, tudo será vetor novamente. Agora podemos escalar e posicionar nosso pássaro novamente. Temos que ter cuidado para não perder nenhuma parte dela. Podemos ativar a ação título seguro para localizado no meio. Isso está tudo bem. Acho que não estamos perdendo nenhuma asa aqui. Olhando bem. Vamos pré-visualizar nossa animação. Agora, estamos prontos para exportar com a área de trabalho definida, vamos pressionar “Exportação de arquivo” adicionar à Fila de renderização. Aqui na fila de renderização. Vamos pressionar em “sem perdas” manterá o formato QuickTime. Aqui nas opções de formato, escolherei Apple ProRes 422. Você pode usar animação ou qualquer compressão que você gosta. Eu gosto de usar um formato de alta qualidade. Então vamos convertê-lo para o Instagram. Tudo bem, ou aperte “Ok”. Então vamos clicar aqui para colocar a saída. Vou colocá-lo em meus renderizadores de pasta de loop ping pong. Vou colocar a data de hoje, que é 29 de agosto. Isso está tudo bem. Laço de pássaro 001. Poderíamos renderizar. Isso é muito legal. Agora, para converter isso, vamos abri-lo. Temos que abrir essas flechas e clicar aqui. Isso irá automaticamente nos trazer para o nosso Loop é. Vou usar outro programa que é chamado HandBrake. A partir daqui, você pode baixá-lo gratuitamente. Uma vez que você baixar HandBrake, vamos abri-lo com ele. Agora, vamos abrir o vídeo com HandBrake. Você também pode arrastar seu vídeo para esta janela. Ele também será aberto. Agora, nós temos, nós vamos para os sets de vídeo, nós colocamos 9.000 framerate constante. quadros igual à fonte, e isso deve funcionar. Aqui colocamos o destino. Vou colocar a mesma pasta que usamos antes. Eu colocaria 02 para saber que esta é a compressa, e então clicamos em “Iniciar”. Lá vamos nós. Agora temos o nosso Bird Loop aqui, e está parecendo muito incrível. Agora isso está pronto para carregar no seu Instagram. 10. Conclusão: Finalmente terminamos esta animação, e espero que você possa aplicar todos esses conceitos em suas próprias animações. Você pode começar a reunir alguma inspiração, criar seu quadro de humor, preparar seu arquivo de efeitos secundários, a sinalização animada com alguma teoria de loop sobre a introdução de conceitos legais como curvas de animação, seguir através de quadros próximos, e todas as coisas que vimos nesta classe. Além disso, depois de compartilhar seu projeto na galeria, eu acho que você deve compartilhar seu projeto com seus amigos, em suas redes sociais, e driblar no Facebook ou YouTube, Vimeo, qualquer coisa. Basta compartilhá-lo, e você vai chegar a um monte de pessoas. Se você tiver alguma dúvida entre em contato comigo na página da comunidade. Vou responder a todas as suas perguntas e também dar feedback às suas animações. Foi um prazer compartilhar tudo isso com vocês. Se você gosta da aula, por favor escreva seus comentários. Se não fizer isso, escreva assim mesmo. É útil para mim. Este é o fim, e nos vemos na próxima aula.