Transcrições
1. Trailer do Curso: Olá, sou Jake Bartlett e vou ensinar-te a animar os teus próprios presentes personalizados. Neste curso, vou ensinar-lhe tudo o que você precisa saber para começar a trabalhar com o After Effects, mesmo que você nunca tenha usado o software antes. Juntos, usaremos os mesmos ativos para criar essa animação personalizada e exportá-la como um GIF em loop. Ou você pode projetar seus próprios ativos e fazer uma animação completamente original. Este é um curso introdutório rápido para qualquer pessoa que queira entrar em motion graphics, ou para alguém que apenas queira ter um pouco de diversão e adicionar algum movimento aos seus próprios designs. Assim que terminar esta aula, você pode passar para alguns dos meus cursos mais avançados. Vejo-te na aula.
2. Primeiros passos: Vamos começar. A primeira coisa que você precisa fazer obviamente é abrir o After Effects. Uma vez instalado, coloque-o em funcionamento
e ele deve ser muito parecido com o que eu tenho aqui. Agora, obviamente você não vai ter este pequeno painel do Jake no canto,
mas todo o resto deve ser bastante parecido. Se ele não se parecer com isso, o que você precisa fazer é chegar a este menu de janela e ir para espaço de trabalho e certificar-se de que você está definido como padrão. Se você já estiver no padrão e ele ainda não tiver esse aspecto, desça para redefinir o padrão para salvar o layout. Então ele deve ser muito parecido com o que eu tenho na minha tela. Para começar, precisamos trazer a arte que
vamos usar para criar essa animação em loop. Se você ainda não fez isso, certifique-se de ir para a guia Projeto e Recursos na página da classe. Bem aqui, do lado direito, está a seção de Recursos. Aqui é onde você encontrará o arquivo zip que não só tem a arte que você precisa, mas também meu arquivo de projeto. Você pode dar uma olhada nele se quiser ver o resultado final do que crio ao longo dessas lições. Basta extrair o conteúdo do arquivo zip para o seu computador e haverá uma pasta de imagens lá com a arte. Agora, eu já tenho essa arte no meu computador, então eu quero importá-la para o After Effects. Nós vamos fazer isso usando este painel aqui no lado esquerdo é o painel do projeto. Este é o lugar onde todos os ativos que estão fora do programa que queremos usar
sairão e qualquer coisa que criarmos dentro do After Effects aparecerá aqui como um diretório. Para colocar nossa arte aqui, vou clicar com o botão direito do mouse no painel do projeto, descer para importar e dizer “Arquivo”. Agora ele já está localizado a arte para mim, mas basta navegar para onde você salvou essa arte no seu computador, ir para a pasta de imagens. Finalmente, arquivo GIF-artwork.ai. Este é um arquivo do Adobe Illustrator. Em seguida, basta descer até o botão Importar e clicar nele. Agora, o After Effects vai identificar e reconhecer que este é um arquivo ilustrador, e então ele tem camadas dentro dele que podemos acessar uma animação. Ele vai nos perguntar como exatamente
queremos importar isso porque podemos fazê-lo de algumas maneiras diferentes. Sob o Tipo de importação, certifique-se de que o temos definido para composição, não filmagens, isso é muito importante. Também é muito importante que cheguemos às Dimensões da
gravação e digamos que o tamanho da camada não o tamanho do documento. Defina-o para a composição e depois para o tamanho da camada. Então podemos clicar, “Ok”. Imediatamente veremos no painel do projeto algumas coisas. Este primeiro objeto é uma composição. Você pode ver sob a coluna de tipo, é uma composição. Você pode pensar em uma composição como um documento, seja um documento do Illustrator ou um documento do Photoshop, é basicamente a versão do After Effects. É com isso que vamos trabalhar dentro do After Effects. Aqui você vê a pequena visualização em miniatura. Nós já podemos ver que a arte aparecendo e abaixo que é uma pasta. Novamente, olhar para a coluna tipo lá, ele diz pasta e podemos girar que aberto para ver todas as camadas individuais
do trabalho artístico que compõem este arquivo do Illustrator. Todos eles têm o ícone de arquivo do Illustrator. Se eu apenas expandir isso um pouco, podemos ver que todos eles pertencem ao arquivo ilustrador de arte GIF. Agora que todos os nossos bens estão aqui, vou desmoronar isso e vou clicar duas vezes nesta composição. Basta clicar duas vezes e isso abrirá no visualizador de composição, que é este painel aqui. Esta é uma prévia direta de como será
nossa animação final quando formos exportá-la. Você pode pensar nisso como uma tela. É aqui que vamos ver o que realmente está acontecendo. Aqui em baixo está o nosso painel da linha do tempo. Aqui é onde vamos ver todas as camadas que compõem o que estamos vendo na composição, bem
como como como vamos animar as coisas ao longo do tempo. É o painel de camadas e o painel de linha de tempo. Agora, essa composição que foi gerada pelo After Effects foi baseada nas dimensões da arte do Illustrator. Eu criei-o em 800 por 600 pixels porque eu queria ser capaz de postar isso para driblar. Vai dimensionar automaticamente a minha composição para essa resolução. Podemos ver isso aqui mesmo na visualização do painel Projeto. Mas eu quero dar uma olhada em mais algumas das configurações desta composição. Vamos até o menu Composição aqui em cima, e até as configurações de composição. Neste painel, podemos ver todos os atributos da nossa composição, como a largura e a altura. Estão ajustados para 800 por 600. Isso é o que eu quero. Então o quadro aqui embaixo é o que realmente me preocupa. Atualmente, ele está definido para 30 quadros por segundo e é para isso que ele deve ser definido. Se o seu é algo menos 30, basta clicar e arrastar aqui e mudar isso para 30 quadros por segundo. Então, finalmente, aqui no fundo é a duração. Isso é medido em código de tempo, que é colocado em quadros aqui, segundos, minutos e horas. É como um relógio ou um cronômetro. Queremos que dure 10 segundos. Provavelmente é mais longo do que precisa ser, mas é um bom lugar para começar. Vou deixar isso em 10 segundos. Se o seu não for 10 segundos, mude esse segundo conjunto de números para 10 segundos. Em seguida, basta clicar em “Ok”. Nossa composição está pronta e temos todas as nossas camadas de arte. Antes de ir mais longe, quero salvar este projeto para que eu não perca nada no caso de algo dar errado e o After Effects falhar. Vou até File, Save. Você pode navegar para onde quiser salvar isso. Mas eu só vou chamá-lo Loopy Feeling GIF e clique em “Salvar”. Agora vamos adicionar nosso texto na parte inferior da composição. Essa parte eu não fiz um ilustrador, então vamos adicioná-lo direito no After Effects. No topo do After Effects é onde todas as suas ferramentas vivem. Esta é a barra de ferramentas e eu quero ir bem aqui para a ferramenta Texto. Vou clicar na ferramenta de texto e, bem aqui, no lado direito,
o painel Caractere se abre automaticamente. After Effects, percebe que eu cliquei
na ferramenta de texto e, em seguida, eu provavelmente vou querer ajustar a fonte. É por isso que ele se expandiu automaticamente. Agora, para adicionar texto a uma composição, tudo o que tenho a fazer é clicar uma vez em qualquer lugar na janela Composição. Vou clicar aqui. Agora eu posso digitar minha mensagem, que é você me dar uma sensação maluca. Em seguida, vou voltar para a minha ferramenta de seleção para aplicar esse texto. Criei uma nova camada com esse texto e posso clicar e arrastá-la com essa ferramenta de seleção onde quiser. Agora esta não é a fonte que eu quero usar e não é a cor que eu quero usar. Vou mudar a fonte chegando ao painel de caracteres com
o texto selecionado. Aqui é onde eu escolho a fonte. Agora, eu sei que eu quero mudar para um chamado Nevis. Só vou digitar Nevis. Lá está ele. Vou clicar nele para aplicar essa fonte. Em seguida, vou clicar e arrastá-lo novamente para baixo usando minha ferramenta de seleção para reposicionar isso. Está acima das nuvens na base da composição. Em seguida, eu quero mudar a cor de preto para ser a mesma cor que o céu no fundo. Eu posso fazer isso apenas clicando
nesta ferramenta Conta-gotas e, em seguida, selecionando essa cor de fundo. Você pode ver que isso é refletido bem aqui na cor de preenchimento, e agora esse texto é da mesma cor. Eu também quero fazer isso todas as maiúsculas em vez de maiúsculas e minúsculas, o que eu posso fazer direito na parte inferior aqui, este pequeno botão é todas maiúsculas. Vou clicar nisso. Agora eu tenho toda a camada de texto caps. Eu também quero espaçar o texto um pouco mais para que haja mais espaço entre cada letra. Posso fazer isso aqui, sob este pequeno ícone que diz “VA “, é chamado de “rastreamento do texto”. Eu posso clicar e arrastar isso apenas para ser capaz de
ajustar livremente o espaçamento ou eu posso clicar uma vez e, em seguida, digitar um número. Eu só vou digitar 100 como um bom número redondo e, em seguida, clique fora. Isso me dá um pouco mais de espaço entre essas letras. Agora, esse texto está alinhado atualmente à borda esquerda. É justificado, mas quero que seja alinhado ao centro do texto. Para fazer isso, preciso abrir outro painel. Vou recolher este painel de caracteres apenas clicando nele. Então eu vou para o painel de parágrafos, mas logo abaixo, clique sobre isso. Meu texto ainda está selecionado e aqui é onde eu posso mudar a justificativa. Só quero justificar isso. Vou clicar nisso. Agora o texto vem do centro da camada em vez da esquerda. Finalmente, eu quero alinhar isso ao centro da minha composição, mas fazer isso de olho não vai ser muito preciso. Eu só vou deixar meus textos onde estão e chegar a outro painel apenas alguns aqui em cima, o painel Alinhar e clicar nele. O que isso me permite fazer é alinhar camadas a outras camadas, bem como a composição. Com este selecionado, ele vai para o padrão para alinhar a camada para a composição, e é isso que eu quero. Aqui eu tenho o botão horizontal alinhado. Se eu clicar nele, meus textos se encaixam no centro da composição. É exatamente onde eu quero. Talvez eu queira reposicionar meu texto um pouco para cima e para baixo, mas mantenha-o centrado. Bem, se eu clicar e arrastar, vai ser muito fácil sair acidentalmente desse ponto central. Mas eu poderia manter pressionada a tecla Shift no teclado enquanto eu estou clicando e arrastando. Isso restringirá o texto a mover-se apenas horizontalmente ou verticalmente. Vou apenas manter pressionada a tecla Shift enquanto clica e arrasta
com a minha ferramenta de seleção e move-a bem ali. Parece bom e centrado verticalmente naquela nuvem. Agora eu posso desmarcar essa camada apenas clicando em qualquer lugar que não seja outra camada. À medida que eu movo meu mouse, você pode ver que há contornos de
transformação de alças de canto em torno de cada uma dessas camadas. Vou apenas clicar nesta área cinza-escura fora da composição para desmarcar. Agora que eu tenho meu texto posicionado corretamente em todas as minhas obras de arte onde ele precisa estar. Eu só vou salvar mais uma vez indo para Arquivo, Salvar. Ou você pode usar o atalho de teclado Control S em um PC ou Command S em um Mac. Antes de passar para a próxima lição, verifique se você configurou seu trabalho artístico no After Effects, se
você o importou, altere suas configurações de composição para ser a maneira que eu as defini e adicionou seu texto e o estilizou da maneira que você deseja. Então podemos seguir em frente para realmente animar.
3. A Posição do Avião: Agora nós realmente começamos a animar, e a maneira que esta animação vai ser executada é que o avião vai
começar no canto inferior esquerdo atrás das nuvens fora da tela, entrar e seguir esta linha. Nós vamos usá-lo como um guia por enquanto, mas ele vai fazer este coração em um rastro de fumaça basicamente, então ele vai dar a volta e sair na direção oposta a que entrou. Para ser capaz de fazer isso, vamos usar o que são chamados quadros-chave. Os quadros-chave são o que impulsionam quase todas as animações dentro do After Effects e muitos outros softwares de animação. Vamos começar animando o avião, e eu não quero ajustar acidentalmente nenhuma das outras camadas. Vou trancar tudo isso na minha linha do tempo. Esta coluna aqui tem um pequeno ícone de
cadeado que permite bloquear uma camada, para que você não a ajuste. Vou apenas clicar e arrastar em todos estes,
deixando a camada de plano desbloqueada, e depois bloquear os dois últimos. Agora eu não posso clicar em nada nesta composição exceto no avião. Com a minha ferramenta de seleção ativa, eu vou clicar e arrastar isso para onde eu quero que ela comece no início da minha animação, que está aqui à esquerda. Agora como eu fiz isso você viu que ele rolou a composição para baixo e isso está me
deixando saber que eu não estou realmente vendo toda a composição como um todo. Se eu mudar para a ferramenta de mão, que está bem aqui ao lado da ferramenta de seleção, eu posso clicar e arrastar para deslocar em minha composição. Agora, eu quero ser capaz de ver tudo de uma vez. Na verdade, vou descer a este pequeno menu aqui, que é o menu de ampliação. Atualmente está definido para 100%, significa que estamos visualizando em uma escala de 100 por cento. Quero ajustá-lo para caber. Isso encolherá minha composição para caber dentro do meu espectador, não importa o que aconteça. Vou aproveitar esta oportunidade para salientar que esta ampliação não
é, na verdade, a resolução do nosso documento. Este menu ao lado é a resolução, e é importante distinguir a diferença entre os dois
porque a resolução e a ampliação são duas coisas diferentes. Lembre-se, definimos as configurações de composição deste documento para 800 por 600 pixels. Essa é a resolução do documento e a resolução do que será quando o exportarmos como um GIF depois de terminarmos a animação. A taxa de ampliação é apenas a escala que estamos olhando, essa resolução. Mas onde isso pode ficar realmente confuso é que nós podemos realmente ver esta composição em algo diferente da resolução total. Na verdade, vou voltar para a ampliação de 100 por cento muito rapidamente, então podemos ver que esta é a resolução real, o tamanho da nossa composição uma vez que a exportamos, e estamos olhando para ela em resolução total, o que significa que é de qualidade total, esta é uma representação direta de nossas exportações devem ser parecidas quando terminamos com isso. Mas se eu mudar isso de total para metade, tudo fica um pouco suave, especialmente se eu ampliar mais de 100 por cento. Deixe-me ir para 200 por cento e apenas dar uma
olhada um pouco você pode ver que agora estamos ficando muito mais pixelados. Eu poderia mudar esta resolução para trimestre, e vai ficar extremamente pixelizada. Isso ocorre porque estamos realmente diminuindo a resolução do nosso documento e visualizando-o em um quarto da resolução completa. Mas se eu mudar de volta para resolução total, você vai notar que ainda está um pouco confuso, especialmente se eu entrar em algo extremo, como 800 por cento. Estamos vendo todas essas bordas pixeladas e
bloqueadas ao redor de nossa arte, e a razão para isso é porque essa composição é composta de pixels, mesmo que estejamos trabalhando com alguns gráficos vetoriais, alguns arquivos do Illustrator O After Effects finalmente vai rasterizar tudo e transformá-lo em pixels. Se estamos olhando para isso, qualquer coisa além de 100 por cento de ampliação, independentemente de estarmos ou não olhando para ele em resolução total ou não, ele vai começar a mostrar pixels e isso é normal. Não deixe que isso te incomode. Esse é um comportamento totalmente normal para o After Effects, basta voltar para a ampliação de 100% e definir sua resolução como
completa para ver uma visualização do que isso realmente é com qualidade total. Com essa explicação fora do caminho, eu vou mudar minha ampliação de volta para ajustar, para que eu
possa ver toda a composição e, em seguida, voltar para a minha ferramenta de seleção. Estávamos começando a animar este avião, então eu vou novamente clicar e arrastá-lo para que ele fique abaixo das nuvens bem aqui. Agora eu quero dizer ao After Effects, e é aqui que eu quero que o avião comece no quadro zero, e eu posso dizer que eu estou no quadro zero olhando para o código de tempo aqui em baixo. Lembre-se que esses dois primeiros números são os quadros, depois segundos, minutos e horas. Como eu esfregar através desta linha do tempo, se eu clicar e arrastar sobre esta cabeça de jogo azul, esses números contam para cima como eu me mover para a direita, frente no tempo e para baixo para zero enquanto eu me mover para a esquerda. No quadro zero, eu quero que a camada de biplanos esteja neste ponto da composição positivamente, e para gravar que vamos definir um quadro-chave para ela. Aqui embaixo, eu vou girar para baixo os controles de camada, e dentro dessa camada, vemos a categoria Transformar. Eu vou girar isso também, e nós podemos ver todos os controles de transformação para esta camada juntamente com seus valores. Estes estão todos em relação à composição, de modo a posição atualmente está definida para este valor, que o coloca aqui no canto inferior esquerdo. Agora, todos esses cronômetros ao lado desses valores ou como definimos quadros-chave para esses valores. Vou clicar neste cronômetro na propriedade position no quadro zero. O cronômetro fica azul, e agora temos este pequeno ícone de diamante em nossa linha do tempo. Este é um quadro-chave, e tudo o que um quadro-chave
é, é um conjunto gravado de valores em um determinado ponto no tempo, então o que fizemos foi dizer ao After Effects no quadro zero, que
queremos que este plano esteja nesta posição. Agora posso avançar no tempo e progredir esta animação ao redor do coração e adicionar quadros-chave para cada novo valor. Eu vou para a frente, digamos 25 quadros, e eu vou apenas clicar e arrastar para obter cerca de 25,
e então o que eu posso fazer é usar as
teclas de página para cima ou para baixo para avançar um quadro para a frente ou para trás, então a página para cima vai para trás, página para baixo avança
e, se não tiver as teclas de página para cima ou para baixo no teclado, mantenha premida a tecla Control ou Command num Mac e prima as setas para a esquerda e para a direita. Chegue ao quadro 25, e então vamos mover o avião, e ele vai definir automaticamente outro quadro-chave. Assista. Vou clicar e arrastar isto para atingir a base
da frequência cardíaca naquele ponto, e depois largar. After Effects é automaticamente adicionado outro quadro-chave para mim, e nós também temos essa representação
do movimento dessa animação em nosso visualizador de composição. Isso é chamado de caminho de movimento. Veja o que acontece agora se eu clicar e arrastar a cabeça de reprodução para trás. Vai animar entre esses dois quadros-chave. Esta é a base para todas as animações
e efeitos posteriores, e é muito divertido para brincar. Agora que temos a segunda posição definida, eu vou avançar para o quadro 50, então basta arrastar isso para a frente. Mas você precisa notar algo assim que eu passei um segundo, e lembre-se que temos 30 quadros por segundo. Assim que passei do quadro 30, é redefinir o número do quadro e contar um segundo. Mas se você olhar de perto por baixo este é outro conjunto de números, e isso é literalmente apenas a contagem de quadros, então você não precisa pensar em segundos, minutos, horas, qualquer coisa assim. Você pode apenas olhar aqui para baixo para ver o número exato do quadro em que você está atualmente. Eu quero ir para o quadro 50, então eu vou clicar e arrastar e usar minha página para baixo tecla para chegar ao quadro 50. Neste ponto, eu quero clicar e arrastar o avião para cima e para a direita. Agora o avião está indo para trás desta nuvem e eu
realmente não posso vê-lo alinhado com aquele coração, então eu vou apenas para desativar a visibilidade dessa camada rolando para cima aqui na minha linha do tempo e desativando o visibilidade da camada direita da nuvem apenas clicando nesse globo ocular. Agora eu posso ver esse caminho claramente, e isso é realmente muito perto. Eu acho que é um bom lugar bem ali para esse ponto no tempo, e então eu vou mover 25 quadros para a frente. Mais uma vez, vamos para o quadro 75, isto é bastante arbitrário neste momento. Não se preocupe muito com o tempo, mas eu vou apenas mantê-lo simples e fazer 25 incrementos de quadros, e então eu quero mover isso para este ponto certo, onde ele tem aquela seção cruzada do coração, e então eu vou mover 25 quadros para a frente novamente. Nós vamos chegar ao quadro 100, e então eu vou mover o avião para o lado esquerdo, e eu não tenho que ser perfeito, ele só precisa ser aproximadamente da mesma altura que isso. Então eu vou avançar mais 25 quadros, 125, e vamos ver 125, lá vamos nós. Para este próximo quadro-chave, eu realmente quero que ele seja o mesmo valor que este quadro-chave aqui, que por sinal, esses quadros-chave correspondem a esses quadrados no caminho de movimento. Se eu clicar neste quadrado aqui, ele vai selecionar o quadro-chave correspondente na minha linha do tempo, e vice-versa. Se eu clicar em um quadro-chave na linha do tempo, o quadrado correspondente no caminho de movimento será realçado. Eu quero duplicar este quadro-chave para este ponto no tempo e para fazer isso, eu vou apenas tê-lo selecionado,
vir para cima para editar,
copiar e, em seguida, editar colar, e ele vai colar esse quadro-chave em o local exato da sua cabeça de jogo onde quer que esteja na linha do tempo. Finalmente, eu quero avançar mais 25 quadros,
então quadro 150, e, em seguida, mover o avião para fora e para baixo para a direita atrás das nuvens. Enquanto eu esfrego isso, você pode ver aquele avião girando em torno de todo o coração. Agora, seu caminho de movimento pode ter curvas apenas com base nas preferências do After Effects por padrão. Eu mudei para que meus caminhos de movimento sejam basicamente linhas
retas, mas eu realmente quero torná-los curvos. Se o seu já tem curvas, isso é ótimo. Se não, vou te mostrar como adicionar isso agora. Vou começar selecionando todos esses quadros-chave e, em seguida, alternando para a minha ferramenta de caneta aqui na barra de ferramentas. Com essa opção selecionada, você verá que o ícone agora é diferente. Ele está definido para a ferramenta caneta, mas se eu chegar a qualquer um
desses caminhos de movimento e realçar os pontos do quadro-chave, ele muda para a ferramenta de conversão de vértice. Como eles são todos selecionados, eu posso fazer tudo isso de uma vez, mas eu só quero clicar em um desses, apenas um único clique e é adicionado alças para cada um desses quadros-chave. Eles funcionam exatamente da mesma forma que os pads vetoriais no Illustrator e você pode até trabalhar com blocos vetoriais aqui no After Effects, mas em vez de gerar arte, ele está gerando a trilha de movimento que este avião está realizando. Agora que eu adicionei esses, eu vou voltar para a minha ferramenta de seleção e isso
me permitirá modificar essas curvas para ajustar a forma do coração, mas antes de chegarmos lá, eu preciso adicionar mais alguns quadros-chave. Vou mover minha cabeça de jogo de volta no tempo para
bem aqui, bem onde está no topo, porque o avião não vai chegar a este lado do coração, vir aqui, e depois atirar bem aqui. Ele vai seguir este loop e fazer um loop bem ali antes de vir. Quero adicionar um quadro-chave entre estes dois aqui e estes dois aqui. Eu estou indo para ir mais ou menos a meio caminho entre esses dois e então eu vou copiar e colar este quadro-chave, desta vez com o atalho de teclado, que é realmente simples. Controle ou Comando C para copiar, Controle ou Comando V para colar. Agora eu tenho aquele quadro-chave lá, e eu vou colá-lo novamente a meio caminho entre esses dois. Novamente, não precisa ser super preciso. Basta Control ou Command V para colar isso, copiar o quadro-chave e então eu vou voltar para este quadro-chave central bem aqui. Eu quero ter certeza de que eu estou diretamente em cima dele, assim como eu estou esfregando através, eu vou manter pressionada a tecla shift e isso vai encaixar minha cabeça de jogo para o quadro-chave mais próximo. Agora que sei que estou bem em cima desse quadro-chave, posso alterar o valor e o After Effects se ajustará automaticamente ao valor gravado desse quadro-chave. O que eu quero fazer é mover o avião para esta parte do circuito neste momento. Vou apenas clicar e arrastá-lo e lembrar que o atalho de teclado de shift, que a tecla modificadora irá encaixá-lo para movê-lo apenas verticalmente ou apenas horizontalmente. Eu quero movê-lo direto para a direita sobre lá para que ele esteja alinhado com a base desse loop. Agora que eu tenho isso, o avião vai se mover em torno desse loop antes de passar para o lado esquerdo. Agora todos os nossos quadros-chave estão definidos, mas não está seguindo o coração com muita precisão. Vamos voltar para essa ferramenta de caneta e podemos modificar as curvas desses quadros-chave. Novamente, se eu selecionar todos eles de uma vez, podemos ver as alças de uma só vez, mas eu quero editar um de cada vez para que eu desmarque esses quadros-chave e selecione a camada para que eu possa ver o caminho de movimento na minha composição. O que eu quero fazer aqui é apenas clicar e arrastar em qualquer uma dessas alças e basicamente combinar este caminho um pouco mais de perto para a arte do coração. Eu apenas cliquei e arrastei para modificar esse caminho e torná-lo mais uma forma de coração. Agora, por padrão, todas essas alças estão mudando proporcionalmente, o que significa que se eu fosse pegar minha ferramenta de seleção e clicar e arrastar, você pode ver que mover uma alça também move a outra alça, mas se eu
tiver a ferramenta caneta selecionada e em seguida, usar essa ferramenta de conversão de vértice, ele vai quebrar a relação entre essas duas alças. Se isso acontecer com você, basta clicar e arrastar sobre ele mais uma vez com a ferramenta converter vértice e ele irá vincular a relação entre essas duas alças novamente. Isso vai ajudá-lo a fazer curvas muito mais suaves mas eu vou apenas mudar para a ferramenta de seleção para modificar o resto dessas alças e você pode até pegar um dos pontos de ancoragem para reposicioná-lo. Eu posso clicar e arrastar estes também e muito rapidamente realinhar todo este caminho de movimento para melhor ajustar este trabalho de arte do coração. Eu só vou modificar rapidamente estas almofadas e este especialmente vai precisar de alguma ajuda. Vou mudar para a minha caneta para este. Clique e arraste para suavizar isso. Talvez até desça um pouco. Esse avião é bem grande, então vai encobrir isso, mas eu quero que isso seja
um pouco maior de um loop, mas isso parece muito bom. Eu acho que estou feliz com isso e agora que o avião vai
seguir esse caminho muito mais de perto. Até agora, acabamos de dar uma olhada nessa animação passando pela linha do tempo mas e se quisermos visualizar como ela realmente vai parecer em tempo real? Bem, vamos fazer isso simplesmente pressionando a barra de espaço. Vou para a frente da linha do tempo e pressionar barra de espaço para reproduzir minha animação. O avião agora vai girar ao redor da arte e ir atrás das nuvens novamente. Agora você pode ver este pequeno destaque da linha do tempo bem aqui. Isso nos permite saber qual parte da linha do tempo estamos vendo no momento, mas depois que ela passa por esse último quadro-chave, temos um monte de espaço vazio. Não quero ver todo esse espaço vazio. Eu posso realmente alterar o intervalo da linha do tempo que After Effects visualizará usando esta barra bem aqui. Eu pressiono barra de espaço mais uma vez para parar a animação, mas esta barra aqui é chamada minha área de trabalho e tem um ponto de partida e um ponto final. Se eu clicar e arrastar no endpoint, posso destacar uma seção específica da linha do tempo para visualizar. Novamente, se eu manter pressionada a tecla shift que irá encaixar no quadro-chave mais próximo ou na cabeça de reprodução. Vou encaixá-lo no último quadro-chave e pressionar play mais uma vez. Agora ele só vai pré-visualizar essa seção de nossa animação e ele vai apenas fazer loop indefinidamente. Agora, se você já usou algum software de edição no passado, você provavelmente está acostumado a bater na barra de espaço e apenas ver a reprodução instantaneamente. O After Effects nem sempre funciona dessa maneira porque ele tem que calcular cada quadro de sua animação para reproduzi-lo para você. Toda essa área aqui, essa barra verde é minha indicação de que After Effects já visualizou todos esses quadros e os
armazenou em cache para que ele possa reproduzi-lo em tempo
real, mas a primeira vez que você joga através desta animação , pode levar um pouco de tempo para calcular cada quadro. Depois de fazer o seu caminho através de toda a área de trabalho,
em seguida, toda a área de trabalho deve ser verde e seguida, loop em torno de e reproduzi-la em tempo real novamente. Agora você pode notar que o avião não está tão suave agora e obviamente não está girando. Não se preocupe com a rotação, mas o After Effects tem um recurso muito legal que ajudará a
suavizar esse tipo de animação automaticamente para nós. O que precisamos fazer é selecionar todos esses quadros-chave entre os primeiros e os últimos seguida, clicar com o botão direito do mouse e selecionar essa opção chamada Rove Across Time. Vou clicar nisso e todos os ícones, esses quadros-chave em forma de diamante, agora viraram pontos menores e todos mudaram um pouco. O que isso fez foi basicamente proporcionalmente suavizado todos os quadros-chave temporização para que ele viaje em uma velocidade consistente ao longo de nosso caminho de movimento. Vou reproduzi-lo para que você possa ver o que quero dizer. Se eu pressionar a barra de espaço, agora ela está se movendo muito mais suavemente ao longo de toda a animação. O que é realmente legal sobre isso é que digamos que eu não gostei de quão lentamente o avião estava se movendo, eu poderia apenas clicar e arrastar neste último quadro-chave e todos aqueles vagar através de
quadros-chave do tempo estão indo para proporcionalmente baseado em espaço onde coloquei o último quadro-chave. Se eu colocar ali e tocar de volta, vai se mover mais rápido. Se eu espaçar muito mais, então ele vai jogar de volta mais devagar. Podemos ver isso representado no caminho do movimento também. Enquanto eu clico e arrasto, você pode ver todos esses pequenos pontos se movendo naquele caminho de movimento. Cada um desses pontos representa um quadro e o valor da posição para cada um desses quadros. Os quadrados são os quadros-chave, e os pontos são o valor da posição de cada um dos quadros entre esses quadros-chave. Vou deixar isso de volta no momento em que tivemos. Movendo-se para o quadro 150 e, em seguida, ele está clicando e arrastando enquanto mantém a tecla Shift pressionada para encaixá-lo nesse ponto. Certifique-se de salvar seu projeto neste momento para que não percamos nenhuma informação. Arquivo, salvar ou Control ou Command S, novamente é o atalho de teclado. Agora temos uma boa base para a animação do nosso GIF. Nós só fizemos a posição até agora, mas na próxima lição vamos passar para a rotação.
4. A Rotação do Avião: Agora podemos adicionar quadros-chave à propriedade de rotação em vez
da propriedade position para que possamos realmente animar o avião se movendo nesse loop. O que vamos fazer é voltar no tempo para onde o avião está bem na base do coração, e é aqui que vamos definir nosso primeiro quadro-chave de rotação. Sob os controles de transformação para a camada de avião, vou clicar no cronômetro para o valor de rotação e adicionar um quadro-chave nesse ponto no tempo. Este não é realmente o valor que eu quero para a rotação porque o avião está se movendo através da tela agora. Ou pelo menos parece que deveria ser, mas está realmente seguindo o loop daquele coração. Preciso mudar esse valor de rotação para alinhá-lo com o coração, e podemos fazer isso de duas maneiras diferentes. A primeira maneira que vou mostrar é usando a ferramenta de rotação, que está bem aqui na barra de ferramentas. Eu vou clicar sobre isso e, em seguida, clicar e arrastar na minha camada apenas para ser capaz de girá-lo livremente como eu quiser. Então só vou apontar o nariz do avião naquela direção. Outra maneira que eu poderia ter feito isso é apenas vindo para baixo para este valor que agora
mudou desde que eu mudei a rotação e clique e arraste sobre ele. Então, de qualquer maneira vai funcionar. É basicamente uma questão de preferência. Com esse quadro-chave definido, eu vou avançar no tempo para classificar sobre onde ele atinge o segundo quadro-chave e o caminho de movimento, e como minha ferramenta de rotação ainda está ativa, eu vou apenas clicar e arrastar para girar isso e de volta. Novamente, estou basicamente alinhando o avião para o lado de fora deste caminho de movimento. Onde quer que esta curva esteja levando o avião, é assim
que eu quero girar o avião deles para parecer convincente como se estivesse seguindo esse caminho. Então eu vou seguir em frente no tempo novamente e nós vamos começar a dizer este ponto aqui, e eu vou girá-lo nesta direção porque lembre-se que estamos vindo nesta direção. Vou seguir em frente no tempo, volta para onde se encontra aquele cruzamento mais uma vez, e quero ter cuidado para continuar girando na mesma direção. Porque se eu fosse girá-lo de volta nesta direção, então ele vai animar incorretamente, ver como ele está fazendo uma rotação para trás quando ele chegar lá. Eu quero ter certeza de continuar girando aquele avião em torno do sentido anti-horário para que ele esteja apontando na direção correta. Se olharmos para o valor aqui em baixo que é gravado, você pode ver que depois que ele é cicloado 360 graus em qualquer direção, ele adiciona um valor de revolução. É por isso que é importante saber em que direção você está girando as coisas. Então eu vou continuar isso todo o caminho ao longo do caminho do movimento, girando o avião para alinhar onde quer que esses quadros-chave de movimento estejam, e então moverei para baixo. É aí que eu vou apontar o nariz para aquele caminho de movimento, que ele saia da tela em uma direção reta. Vamos visualizar essa animação agora que todos esses quadros-chave estão definidos e ver como ela se parece. Voltarei para a frente da linha do tempo e pressionarei a barra de espaço. Então lá vamos nós. Todos os nossos valores estão definidos. Mas, novamente, não é muito suave e isso é apenas por causa do estado padrão desses quadros-chave. O que eu quero fazer é começar selecionando a primeira e a última tecla e suavizando-as um pouco. Com um selecionado, vou apenas manter pressionada a tecla Shift
no teclado e, em seguida, clicar e arrastar para criar uma caixa de seleção ao redor do outro quadro-chave. Então eu vou clicar com o botão direito do mouse em qualquer um deles e ir para o assistente
chave-frame e até fácil facilidade, o que isso vai fazer é basicamente suavizar essa transição deste chave-frame para o próximo e do chave-frame anterior em Aquele. Em seguida, eu quero selecionar todos esses quadros-chave novamente
clicando e arrastando minha linha de tempo para criar uma caixa de seleção em torno deles. E, em seguida, mantenha pressionada a tecla Control ou Command em um Mac e clique uma vez
nesses quadros-chave, esses diamantes agora serão círculos, e este é novamente, outro método de suavizar a transição entre valores. É um pouco diferente do método fácil de facilitar. Mas se reproduzirmos isso de novo, ele agora deve ser reproduzido mais suavemente. Isso facilita para fora desse primeiro valor. Essas rotações são muito mais suaves agora e no geral, minha animação está apenas olhando muito mais agradável. Neste ponto, nossa animação para o avião está feita. Está se movendo muito suavemente e esse loop é bom e suave também. Podemos continuar a animar este rastro de fumaça que o avião deixa para trás para criar esta forma de coração.
5. O Coração: Agora que temos o avião fluindo bem ao redor da tela, vamos em frente e animar esse rastro de fumaça que o avião vai deixar para trás. Vamos fazer isso usando o que são chamados de camadas de forma. É um pouco mais complicado, mas vou guiá-lo passo a passo. Não se preocupe. Primeiro de tudo, vamos derrubar essas camadas biplanas já que terminamos de animar. Vou em frente e bloqueá-lo para que eu não adicione mais quadros-chave acidentalmente. Então eu vou em frente e habilitar a camada direita da nuvem, basta ligar de volta para que possamos vê-lo novamente. O que eu quero fazer é abrir a camada do coração aqui. Este é o guia que temos usado este tempo todo para a trajetória de movimento do avião. O que eu quero fazer é clicar com o botão direito nessa camada, o que eu posso fazer aqui mesmo no visualizador de composição. Clique com o botão direito do mouse, vá até o menu de criação e, em seguida, sobre para criar formas a partir da camada Quando eu clicar nisso, duas coisas vão acontecer. Primeiro, ela ocultará a camada original do Illustrator, para que não fique mais visível. Então ele vai gerar esta nova camada, que é uma camada de forma. Eu sei que é uma camada de forma por causa deste ícone de estrela aqui. Uma camada de forma é a versão do After Effect do trabalho artístico vetorial como no Illustrator. Podemos controlar todas as coisas diferentes sobre como ele é estilizado. Como o quão grosso este golpe realmente é, a cor do traço. Podemos até fazer uma linha tracejada e é isso que eu quero fazer agora. Vamos girar para baixo esta camada de forma e rolar para baixo até o conteúdo. Aqui é onde tudo contido nesta camada de forma vive. Eu vou girar isso para baixo, ir para o grupo uma pasta, e em seguida, abrir traçado 1 que é onde podemos ver todas as propriedades para este traçado particular. Se eu rolar um pouco mais para baixo, há uma categoria de traços. Quero clicar neste ícone de adição para adicionar um traço. Imediatamente minha linha é tracejada e eu vou ampliar para 200 por cento, que
possamos ver isso um pouco mais claramente. Eu gostaria de fazer esses traços um pouco maiores. Vou mudar o traço de 10 para 12. Vou digitar o número 12 e pressionar Enter. Então eu quero adicionar um pouco mais de espaço entre cada traço. Vou pressionar este botão Plus mais uma vez para adicionar uma lacuna. Isso me permitirá aumentar ou diminuir o espaçamento entre cada traço. Vou definir o meu para algo por volta de 20. Talvez 19 só para ser um pouco mais apertado. Isso parece muito bom. Agora, se eu mudar para minha ferramenta manual e caneta para baixo um pouco, você pode ver que bem aqui na parte inferior, aquele traço no fundo do coração não está centrado e isso está me incomodando, mas podemos consertar isso facilmente. Primeiro de tudo, eu vou esconder as sobreposições do
caminho para que eu possa ver o traço é agradável e claramente, apenas desativando este botão aqui, alternar a máscara e a visibilidade do caminho da forma. Então eu vou descer a esta opção aqui mesmo, compensar. Mude para a minha ferramenta de seleção e, em seguida, clique e arraste esse valor. Enquanto eu faço isso, vocês podem ver que os traços estão sendo deslocados em torno desse caminho. Eu vou apenas apoiar isso até que pareça agradável e centrado. Isso parece ótimo. Vou reativar minhas sobreposições e, em seguida, mudar minha ampliação de volta para ajustar, que eu
possa ver isso como um todo. Agora que o rastro de fumaça parece do jeito que
eu queria, eu preciso animá-lo e vamos fazer isso dentro da camada de forma também. Vou derrubar esses traços e rolar um pouco para cima, derrubar o derrame. Em seguida, aqui está um pequeno menu de adicionar com o ícone do botão de reprodução. Se eu clicar nisso, ele vai abrir um menu e queremos ir para aparar caminhos. Se eu clicar nisso, ele vai adicionar um operador de caminhos de corte à minha camada de forma. Se eu abrir isso, temos alguns controles que nos permitem revelar partes do nosso caminho. Se eu pegar esse valor final, que está atualmente em 100 por cento e fazer backup, você pode ver que, essa linha parece que agora está sendo desenhada. É exatamente assim que vamos animá-lo. Vou começar com ele em um valor de zero e depois encontrar o ponto onde o avião deve começar a revelar a fumaça, que seria bem aqui. Vou definir um quadro-chave no valor final. Clique nesse cronômetro para adicionar um quadro-chave à propriedade end. Então eu vou seguir em frente no tempo e dizer que o avião está no final do coração bem ali. Altere esse valor para 100 por cento. Como eu faço isso, já que já havia um quadro-chave definido, After Effects gera o segundo quadro-chave para mim. Agora, se eu passar por aqui, devemos ser capazes de ver essa linha sendo animada e revelada pelo avião enquanto ele se move ao longo. Vamos jogar de volta em tempo real e ver como é. O avião que sai nessa trilha é revelado por trás dele. Isso foi perfeito. Se o seu não estiver alinhado, então tudo o que você precisa fazer é clicar e arrastar esses quadros-chave para reprogramá-lo até que o plano esteja escondendo essa trilha durante a animação. Mas o meu funcionou muito bem, então vou deixar como está. A próxima coisa que quero fazer é que esse rastro de fumaça expanda sua espessura à medida que o tempo passa, como a fumaça que sai de um avião faz. Começa um pouco menor e depois se espalha e, eventualmente, desaparece. Vamos voltar para onde começa a animação, que é bem aqui. Vou manter pressionada a tecla Shift novamente para encaixar no quadro de teclas. Em seguida, recolherei as opções de aparar caminhos e entrarei nas opções de traçado novamente. A largura do traço é o que vai controlar
a espessura da linha que estamos usando para fazer a fumaça. Quero definir um quadro-chave na largura do traçado nesse momento. Em seguida, avançar provavelmente todo o caminho até o final da animação. Vou segurar Shift para encaixar na minha área de trabalho e, em seguida, apenas aumentar a espessura deste. Isso pode ser qualquer espessura que você quiser. Vou torná-lo grande o suficiente para onde os traços começam a tocar uns aos outros. Agora, a espessura dessa linha muda com o tempo também. A única outra coisa que precisamos fazer para esta fumaça é fazê-la
desaparecer enquanto o avião sai da tela. Eu vou para este ponto bem aqui e, em seguida, recolher o traçado, recolher o grupo, recolher o conteúdo,
e, em seguida, abrir os controles de transformação para essa camada e encontrar o valor de opacidade. Isso me permitirá diminuir
a opacidade e vamos usar quadros-chave para animá-la. Neste momento, vou definir um quadro-chave de opacidade clicando no cronômetro, definindo esse valor em 100%. Então eu vou avançar no tempo provavelmente um pouco mais longe do que a área de trabalho desta vez e, em seguida, transformar esse valor todo o caminho para baixo para zero. Assim, o desbotamento dura um pouco mais. Eu quero visualizar isso em tempo real, então eu vou apenas estender minha área de trabalho clicando e arrastando esse endpoint. Faça o backup até o primeiro quadro e pressione a barra de espaço. O avião sai, a trilha é revelada, a espessura dessa linha se expande e depois desaparece. Agora você pode se sentir livre para ajustar o tempo deste desvanecimento e a espessura da linha também. Uma maneira muito rápida de exibir todos os quadros-chave que você definiu para uma camada é apenas ter essa camada selecionada e, em seguida, pressione a tecla U no teclado. Isso traz somente as propriedades que têm quadros-chave aplicados. A partir daqui eu poderia dizer estender a animação largura do traçado para ser a duração do fade out. Eu fiz isso muito simplesmente clicando e arrastando enquanto
pressionava Shift para encaixá-lo aos quadros-chave circundantes. Vou movê-lo todo o caminho até o fim da animação de opacidade. Então vamos dizer que eu não quero que o desbotamento aconteça tão rápido. Não quero que comece até que o avião esteja por aqui. Bem, então eu poderia pegar os quadros-chave para a opacidade. Mas também quero mover o quadro-chave final para a largura do traçado. Mantenha a tecla Shift pressionada e clique no selecionado e , em seguida, clique e arraste isso um pouco mais. Então eu vou estender minha área de trabalho um pouco mais e tocar isso de volta. Agora o avião completa seu loop e o coração atrás dele só leva um pouco mais para ele desaparecer antes que a animação se repita. Certifique-se sempre de que você está salvando seu projeto regularmente para que você não perca nenhum de seu trabalho. Percebi que havia técnicas mais avançadas nesta lição. Se precisar assistir novamente, vá em frente e faça isso. Certifique-se de que você realmente entende o que está acontecendo neste vídeo antes de passarmos a animar as nuvens na próxima lição.
6. As Nuvens: Agora podemos animar as nuvens no céu. É aqui que precisamos começar a ser um pouco mais precisos com nosso timing, a fim de criar um loop contínuo. Essas nuvens vão ter que começar e terminar exatamente
no mesmo lugar para fazer esse loop perfeito. Vamos começar primeiro colapsando o coração contorna a camada de forma e bloqueando-a para que não a movamos acidentalmente. Apenas para uma boa medida, vamos bloquear essa camada de ilustrador de coração original também. Então desbloquearemos as camadas esquerda e direita da nuvem. Estes são os dois aqui no céu que vamos animar. O que eu quero fazer é ir para o início
da animação e definir quadros-chave de posição para cada um deles. Há um atalho de teclado muito útil para revelar a propriedade position de qualquer camada ou qualquer número de camadas, se eu selecionar ambas mantendo pressionada a tecla Shift no teclado, eu posso clicar no outro e ele irá selecionar ambos eles, em seguida, basta pressionar a tecla P no teclado e isso irá revelar apenas a propriedade position para ambos. Nunca é cedo demais para começar a aprender atalhos de teclado. Com ambas as camadas selecionadas, eu vou clicar em um dos cronômetros de posição, e isso irá definir um quadro-chave para ambas as camadas. Temos a nuvem começando nesta posição. Lembre-se que eu disse que precisamos que isso termine na mesma posição também. Então eu vou apenas para o final da minha animação, que vamos dizer que seis segundos é provavelmente um grande número inteiro para ser o ponto de loop. Vamos dizer que é o fim da animação. Eu quero definir quadros-chave idênticos em ambas as camadas também. Para fazer isso, eu vou apenas clicar neste pequeno ícone de diamante,
um ícone de quadro-chave bem aqui no lado esquerdo. Quando eu fizer isso, ele adicionará um quadro-chave no valor atual, no momento atual. Eu tenho os mesmos quadros-chave no início e no fim, agora precisamos ir para o meio caminho e mudar as nuvens um pouco. Metade de seis segundos são três segundos. Preciso de confirmar isto até chegar à marca dos três segundos, lá vamos nós. Então eu vou desmarcar essas camadas apenas clicando em algum lugar na composição. Eu quero me concentrar em apenas uma nuvem ou outra. Vamos começar com a esquerda. O que eu quero fazer é movê-lo um pouco para a direita. Nem tanto assim, eu só quero que ele seja muito sutilmente movendo-se para
a direita e eu quero ter certeza de que ele não está se movendo para cima e para baixo. Eu vou segurar a tecla Shift, que irá restringir os movimentos apenas para movimento horizontal ou vertical. Eu só vou mudar isso um pouco para
a direita e então eu vou fazer a mesma coisa para a outra nuvem, mas movê-lo para a esquerda para que ambos se movam um pouco para dentro. Vou apenas clicar e arrastar naquele, segurar Shift e movê-lo para a esquerda um pouco. Agora, se eu jogar isso de volta, as nuvens vão apenas se mover sutilmente para dentro e
no meio do caminho eles vão inverter direções e voltar para onde começaram. Agora, se eu quiser visualizar isso como um loop de seis segundos, eu preciso ter certeza de que minha área de trabalho está definida para seis segundos. Vou clicar e arrastar nesse ponto final enquanto mantém a tecla Shift pressionada para encaixar na marca de seis segundos. Agora eu posso ter certeza de que essas nuvens vão girar perfeitamente, mas o movimento é um pouco rígido. Quero adicionar essa facilidade fácil a todos esses quadros-chave. Vou parar a reprodução pressionando a barra de espaço e arrastar uma caixa em torno de todos os seis quadros-chave para fazer uma seleção deles. Em seguida, vou clicar com o botão direito do mouse em qualquer um deles, ir para o assistente de quadros-chave e até fácil facilidade, que irá facilitar a entrada e saída de cada um desses quadros-chave. Agora, se eu jogar, você pode ver que ele apenas se move um pouco mais suavemente dentro e fora dessas duas posições. Isso é tudo que eu preciso fazer para animar essas nuvens, mas agora que eu decidi o loop de seis segundos, eu preciso ter certeza de que todos os meus quadros-chave caiam dentro desses seis segundos. Mais uma vez, sem nenhuma camada selecionada, você pode desmarcar apenas clicando fora da camada na linha do tempo. Vou pressionar a tecla U no teclado uma vez para recolher todas as camadas e, em seguida, mais uma vez, a tecla U para revelar todos os quadros-chave em todas as minhas camadas. Eu só quero rolar para baixo nesta linha do tempo e ter certeza de que todos os meus quadros-chave estão dentro desses seis segundos. Parece que a largura do meu traçado e os quadros-chave de opacidade estão dentro da marca de seis segundos, então estou pronto. Isso é tudo o que há para animar as nuvens. Podemos passar para o passo final na próxima lição, onde realmente podemos adicionar um efeito às nuvens e ao texto na base da nossa composição.
7. O Texto: Vamos terminar este GIF animando o texto e as nuvens na base do quadro. Vou começar primeiro recolhendo todos os meus quadros de teclas novamente pressionando “U” no teclado e depois bloqueando as camadas esquerda e direita da nuvem. Eu quero desbloquear a camada de texto e desbloquear a camada de fundo nuvens e eu realmente quero redimensionar essa camada de texto, não
é tão grande quanto eu quero. Vou voltar para o painel Caractere clicando nele, com essa camada de texto selecionada e depois clicar e arrastar neste número aqui, este é o tamanho da fonte. Eu vou torná-lo agradável e grande, então é bom e claro, fácil de ler e então eu só quero mudar para baixo um pouco. Eu estive usando a ferramenta de seleção e clicando e arrastando para mover as coisas, mas você também pode usar o teclado para mover as coisas. Se eu tiver apenas essa camada selecionada e tocar a seta para baixo algumas vezes, Eu posso centralizar isso muito precisamente nas nuvens verticalmente, Eu acho que parece muito bom. Agora que isso é feito, eu quero selecionar tanto da camada quanto da camada inferior das nuvens, eu vou fazer isso segurando a tecla Control ou Command em um Mac e clique sobre isso e agora eu quero basicamente agrupar essas duas camadas juntos e eu posso fazer isso através de um comando de menu sob o menu Camada. Eu vou para a camada e então todo o caminho para baixo na parte inferior é Pré-compor. Eu vou clicar sobre isso e ele traz esta janela pré-compor, você pode pensar em pré-compor, como colar essas duas camadas ou qualquer número de camadas em uma pasta. Vou dar um nome a esta composição e vamos chamá-la de nuvens e texto. Não se preocupe com nenhuma das outras opções basta clicar em “Ok” e agora temos um novo ícone de composição e uma nova composição aparecendo em nosso projeto. Quando você pré-compõe algo, é literalmente pegar essas camadas e colocá-las em uma nova composição e, em seguida, substituir essas camadas pela nova composição. Agora, em vez de ter duas camadas separadas para essas nuvens e texto, é uma camada na base do meu quadro. Agora, o que eu quero fazer é dar um pouco de ondulação para que ele pareça exatamente como ele está flutuando no céu e tem um pouco de movimento para ele e nós vamos fazer isso através de um efeito. Nós vamos para este painel aqui, Efeitos e Predefinições e soltá-lo. Aqui é onde você pode encontrar todos os efeitos e After Effects e o que é realmente bom sobre este painel é que você pode procurar por efeitos específicos e acontece que eu sei que o nome do efeito que vamos usar é chamado de dobra de onda . Eu só vou digitar a onda e bem ali no topo sob a categoria de distorção é dobra de onda. Para aplicar um efeito, basta ter a camada selecionada à qual você deseja aplicá-la e, em seguida, clique duas vezes. Imediatamente você pode ver este texto distorcido
na parte inferior da minha tela e aqui em vez do painel do projeto, agora
temos o painel Controles de efeitos e como o nome diz, é
aqui que podemos controlar os efeitos propriedades e há apenas algumas coisas que precisamos mudar. A primeira coisa que quero fazer é ir direto para esta propriedade aqui chamada “Pinning”. Atualmente está definido como nenhum, mas eu quero mudá-lo para a borda inferior e se você olhar para a borda inferior
agora você pode ver que a onda é aplicada a toda a camada uniformemente. Mas se eu disser borda inferior, então ele vai manter a borda inferior presa, ele não vai distorcer nada tocando essa borda inferior e nós não vamos ver através das nuvens. Em seguida, eu quero mudar a largura da onda para ser muito maior, se eu aumentar isso clicando e arrastando, eu quero torná-lo um número muito maior e, de fato, vamos apenas arredondar isso clicando nesse número e digitando o número 200 para a largura. Em seguida, eu quero mudar a altura da onda porque se eu jogar isso de volta, você verá que o efeito é realmente animar esta onda e isso é um pouco ondulado demais, eu não quero que seja super distrativo. Vou mudar a altura da onda para um número muito pequeno de dois e pressionar “Enter” e agora você pode ver
que esse movimento ondulado é muito mais sutil e corresponde à velocidade geral do resto da animação um pouco melhor. Não queremos que isso distraia, mas queremos saber que está se movendo. Agora, ele ainda está animando um pouco rápido e podemos mudar isso com a propriedade de velocidade da onda. Vou mudar isto para um valor de 0,5 e ver esta reprodução como um todo. Agora, preste atenção exatamente onde ele loops, que na verdade looped bastante perfeitamente. Este valor de velocidade de onda determina como a onda se parece em um ponto específico no tempo, então se eu fizer um valor diferente, digamos 0,6, então este último quadro não vai coincidir com o primeiro quadro e você vai notar um salto. Assista de perto bem aqui. Veja como ele saltou, este valor é basicamente medido em segundos. Se eu colocá-lo em meio segundo,
já que meus loops de animação em um segundo inteiro, isso deve loop muito perfeitamente, esse é o passo final para animar todo o meu GIF. Como tudo está indo bem e perfeitamente e está em loop, podemos avançar para realmente exportar isso como um GIF.
8. Exportando um GIF: Como exportamos nossa animação como um GIF animado? Bem, na verdade vamos enviá-lo para outro programa chamado Adobe Media Encoder. Em primeiro lugar, nunca nomeamos esta composição. Atualmente é apenas nomeado com base na obra de arte, que é um gif.Artwork e eu quero mudar isso. Aqui no painel de controles de efeitos, bem aqui, é difícil ver, mas há outra guia para o painel do projeto, que nos leva de volta a essa exibição. Quero renomear esta composição
selecionando-a com minha ferramenta de seleção e, em seguida, pressione “Enter” no teclado e vou renomeá-la para Loopy-Feeling e, em seguida, pressionar “Return” ou “Enter” mais uma vez. Agora que isso foi nomeado corretamente, eu vou até o menu de composição. É importante que tenhamos a composição que
realmente queremos exportar aberta quando fazemos isso. Vá para a composição e, em seguida, para baixo para adicionar à fila do Adobe Media Encoder. Quando você clica nisso, Adobe Media Encoder será aberto, e pode levar um pouco de tempo para inicializar, mas eventualmente você deve chegar a algo parecido com isso. Não se preocupe com o que está vendo. Você não tem que entender nada disso. Mas o que queremos fazer é chegar a este painel de filas aqui e começar alterando o formato sob esta coluna de formato. Isso pode ser definido como H.264 ou qualquer número de outros formatos de vídeo. O que queremos mudá-lo para é GIF Animado. Clique nessa pequena seta suspensa e vá para GIF Animado
e, em seguida, venha para a coluna do arquivo de saída e clique neste texto azul. Isso vai determinar onde seu GIF é realmente salvo uma vez que ele exporta. Vou escolher este diretório aqui. Chama-se a mesma coisa que a nossa composição, e estou bem com isso. Vou clicar no botão “Salvar”. Então tudo que eu tenho que fazer é clicar neste botão de reprodução verde para Media Encoder ligar imediatamente ao After Effects, dar-nos uma pequena visualização de saída, e podemos ver a barra de progresso passar enquanto exporta esta animação. Uma vez feito, podemos clicar imediatamente neste texto azul, que abrirá o diretório onde o arquivo foi salvo. Se eu clicar duas vezes sobre isso, seremos imediatamente capazes de ver a reprodução da animação. Agora estou em um PC usando o Windows e o visualizador de
fotos integrado no Windows suporta reprodução GIF animada. Mas eu sei que em um Mac, o aplicativo de visualização não. Ele vai mostrar um monte de quadros individualmente como fotos. A maneira como você pode visualizá-lo é selecionando seu GIF no Finder e pressionando a “Barra de espaço”. Isso deve mostrar a visualização, ou você pode arrastá-la diretamente para o seu navegador. O navegador não suporta reprodução animada, e você deve ser capaz de visualizá-lo muito bem dessa maneira. Agora, existem outras formas de exportar GIFs. Esta é a maneira mais simples e
simples de você poder exportá-lo,
enviá-lo para o seu projeto de classe, e compartilhá-lo comigo e com seus colegas alunos. Se você estiver interessado em aprender a
personalizar a compressão GIF um pouco mais e
obter maior qualidade e entender exatamente o que está acontecendo com a compressão GIF, você pode conferir minha outra classe chamada Compacing GIFs Like A - Chefe. Vou colocar um link para essa aula nas notas deste vídeo agora mesmo. Tudo o que você precisa fazer para poder compartilhar isso no Skillshare é criar um projeto nesta classe e rolar para baixo e certifique-se de fazer
o upload do GIF para o corpo do projeto aqui mesmo. A imagem da capa não suporta animação, por isso não tente carregar o GIF lá. Coloque-o no corpo, e assim ele vai jogar de volta muito bem. Mas com isso, você completou seu projeto de classe.
9. Parabéns!: Parabéns, você terminou esta aula e espero que tenha concluído um GIF personalizado também. Eu realmente espero que você vai compartilhar esse GIF na página do projeto da classe para que eu possa gostar e comentar sobre ele e para que seus outros colegas possam vê-lo também. Se você quiser compartilhá-lo nas mídias sociais, certifique-se de marcar @Jakeinmotion, e eu vou dar um como lá também. Eu adoraria se você me deixasse um comentário sobre esta aula para que eu possa saber o que você gostou eo que eu poderia precisar mudar um pouco no futuro e se você tiver algum problema em tudo,
quaisquer problemas ou perguntas, não hesite em deixar essas perguntas na página de discussões. Estou olhando ativamente para eles e ficarei feliz em resolver quaisquer problemas que você tenha. Agora, se você está interessado em design de movimento e realmente mergulhar de cabeça, a próxima aula que eu sugiro que você tirar de
mim é o Guia do Iniciante para After Effects. Essa é uma introdução muito mais abrangente para todo
o programa e você começa a fazer um projeto realmente divertido para essa classe. Mais uma vez, obrigado por fazer esta aula e mal posso esperar para te ver na próxima.
Jake Bartlett, Motion Designer
