Einfache animierte Icons in Adobe After Effects

1. Boas-vindas: [ MÚSICA] Bem-vindo ao Easy Animated Icons no After Effects Se você é ilustrador, designer gráfico ou alguém que queira aprender ou praticar o After Effects, este é um ótimo lugar para começar. Oi, eu sou Megan Friesth, ilustradora e designer de movimento de Boulder, Colorado. Nesta aula, guiarei cada passo do meu fluxo de trabalho. Mostrarei como criar ícones usando formas básicas no Adobe Illustrator, como prepará-los para animação e como trazê-los para o After Effects e animá-los. Finalmente, mostrarei como criar um arquivo GIF ou filme para que você possa exibir seu trabalho. Você não precisa ter nenhuma experiência com o Adobe After Effects para esta classe. Ajudará se você estiver confortável com o Adobe Illustrator, mas isso também não é um requisito, pois mostrarei o básico. Se você quiser saltar diretamente para a animação, você pode baixar Meus ícones. Se você está pronto para aprender ou praticar o After Effects criando alguns ícones animados divertidos, então vamos começar. 2. Projeto do curso: Para o projeto de classe, você animará um conjunto de ícones, seja meu ou seu próprio. Por que ícones? Animação é ferramenta de comunicação. Você pode usá-lo para evocar emoções, contar uma história, indicar funcionalidade ou educar. Os ícones são como uma linguagem universal. Quando você coloca os dois juntos, você começa algo realmente especial, além de ícones animados são realmente fácil e ótima maneira de aprender After Effects. Existem muitos estilos diferentes de ícones. Que tipo de ícones funcionarão para esta classe? Vou trabalhar com ícones que são feitos principalmente de formas simples com traços ou contornos. Você certamente não precisa usar esse estilo, mas vou mostrar como animar linhas desenhando, e isso pode não funcionar para todos os estilos. Comece por criar um tema, debata todos os ícones que podem caber no tema. Crie um projeto de classe na página do projeto e poste suas ideias de ícones. Em seguida, escolha alguns dos seus ícones favoritos da sua lista para ilustrar. Se você descobrir que alguns ícones não estão funcionando, você sempre pode voltar à sua lista e tentar outra coisa. Ao criar seu ícone, comece a pensar em como deseja que eles sejam animados. Isso pode influenciar a forma como você os constrói. Mas não se preocupe se ainda não tiver tudo planejado. Publique seus ícones ilustrados no projeto de classe. Finalmente, animar seus ícones. Você pode publicar seus ícones um de cada vez ao finalizá-los ou publicá-los quando todos estiverem concluídos. Se você estiver ansioso para começar a animar, sinta-se à vontade para baixar meus ícones como prontos para animar arquivos do Illustrator. Se você tiver alguma dúvida, sinta-se à vontade para entrar em contato com a página da comunidade. Vamos começar. 3. Ícones de ilustração - Parte 1: Vamos começar um ilustrador caso você esteja mais confortável com o Photoshop. Eu só quero que você saiba que você certamente pode usar o Photoshop para criar gráficos, para animar no After Effects. Mas para esta classe, será mais fácil de seguir ao longo se você usar o Illustrator, precisará converter algumas das camadas que compõem os ícones em formas vetoriais. Se você usar o Photoshop, acabará precisando recriar muitas partes dos ícones e do After Effects. Aqui eu tenho alguns ícones que eu fiz. Você pode baixar esses ícones se estiver ansioso para ir direto para a animação. Eu não vou passar por cada passo na recriação desses ícones, porque eu quero me concentrar na animação nesta classe. Mas vou mostrar meu fluxo de trabalho básico. Com isso, acho que você estará pronto para criar seus próprios ícones, mesmo que você não seja um profissional no ilustrador. A primeira vez que eu gosto de fazer na criação de ícones é para me fazer alguns guias para que eu possa fazer todos os ícones do mesmo tamanho. Para esses guias, eu só uso uma forma que é um quadrado de 200 por 200 pixels. Coloquei isso em sua própria camada e tranquei para que não se mova enquanto estou trabalhando. Vamos dar uma olhada em como eu construí este lápis. Eu construí este girado 45 graus, modo que tornou um pouco mais fácil para colocar as coisas alinhadas. Você pode ver se eu desagrupar isso, ele é feito de um retângulo com os dois cantos superiores arredondados. Para acessar as ferramentas de arredondamento, pressione a ferramenta de seleção direta e arraste esses pequenos círculos. Se você quiser apenas alguns dos cantos arredondados, basta selecionar esse canto e movê-lo. Ou, se você quiser arredondar, pressione shift e selecione o segundo. Para obter essa forma, usei um retângulo e, em seguida, um círculo e corte-o. Eu vou ver quais tamanhos retângulo é indo para a janela de transformação. São 22 pixels, tudo isso faz exatamente 22. Em seguida, eu vou clicar e segurar na minha ferramenta Forma para chegar à minha ferramenta Elipse e, em seguida, liberar na ferramenta Elipse. Ou você pode apenas dizer L no teclado. Em seguida, clicando em qualquer lugar para obter esta pequena janela pop-up, eu vou inserir meus 22 pixels. É do mesmo tamanho do meu retângulo. Então eu vou arrastar isso para o lugar. Quero ter certeza de que estão alinhados. Quero que o círculo esteja alinhado com o retângulo e eles não querem que o retângulo se mova. Vou selecionar ambos e, em seguida, clicar no retângulo novamente. Isso vai alinhá-lo ao meu objeto chave, que é o negrito, o retângulo. Agora que eles estão alinhados, eu posso selecioná-los novamente, ir para a minha ferramenta Pathfinder. Se você não vir o Pathfinder ou qualquer um dos painéis aqui, você sempre pode encontrá-los sob a janela. Agora vou usar a ferramenta frontal menos para subtrair o círculo do retângulo. Lá vamos nós. Em seguida, para duplicar isso, você pode fazer Command C, Command V, Copiar e Colar. Ou você também pode selecionar a tecla Option ou Alt pressionada e, em seguida, arrastar para fora. Na animação, eu vou ter o lápis desenhar nesta linha. Para criar esta linha, eu apenas uso a ferramenta Caneta. Isso é P no teclado e, em seguida, clicando e arrastando para fazer uma curva. Não se preocupe se não é perfeito na primeira vez que você sempre pode voltar e editar as alças com a ferramenta de seleção direta. A ferramenta Caneta é ótima se você quiser uma forma realmente única. Mas se fores uma onda perfeita como esta no pincel, vou mostrar-te como consegui isso. Deixe-me desligar meus guias por um segundo. Comecei desenhando uma linha com a ferramenta Caneta, clique e, em seguida, mantenha a tecla shift, clique novamente para obter uma linha reta. Em seguida, pressione enter para terminar a linha. Então eu voltei e adicionei dois pontos de ancoragem na minha linha. Em seguida, trouxe um para cima e um para baixo com a ferramenta de seleção direta. Em seguida, com os cantos redondos, eu apenas seleciono aqueles em torno dos cantos. Agora tenho uma bela onda. Para tornar isso uma forma completa, eu posso voltar para a minha ferramenta Caneta, mouse sobre o ponto de ancoragem, eu não gostei dessa linha de barra. Em seguida, clique para continuar o meu caminho. Então, para terminar o caminho, você vai passar o mouse sobre o último ponto de ancoragem e nós pegamos no ícone do círculo e você sabe, você está fechando as ovelhas. 4. Ícones de ilustração - Parte 2: Se você olhar para meus ícones, você pode ver que eles são todos feitos de formas básicas como círculos e retângulos. Eu uso muito a ferramenta Pathfinder para cortar diferentes formas e , em seguida, eu arredondo os cantos para torná-los mais orgânicos. Vamos dar uma olhada no conta-gotas. Para obter essa cor dentro do conta-gotas, peguei o formato do conta-gotas, vou mostrar isso aqui e depois peguei um retângulo. Vou colorir da mesma forma que dentro. Vamos apenas usar o conta-gotas, a ferramenta de conta-gotas real para isso e então, eu vou levar isso para frente com Shift Command e suporte direito. Então eu vou selecionar ambos e ir para o Pathfinder e escolher Intersect. Agora preciso me lembrar disso e lá vamos nós. A ponta do lápis, a ponta do lápis, também foi feita da mesma maneira. Vamos dar uma olhada em como eu fiz essa forma na tesoura. Eu comecei com o círculo e fiz outro círculo dentro do meu círculo, então eu uso o Pathfinder para cortá-los. Então esta peça é um retângulo. Você verá isso quando eu estiver movendo minhas formas. Eu tenho esses guias e eles encaixam as coisas no lugar. Para obter esses guias, se você ainda não os tiver, vá para Exibir e Smart Guides ou pressione Command U. Agora eu quero ter certeza de que esse retângulo não está se projetando para o círculo interno. Eu vou para a ferramenta de seleção certa e, em seguida, pegar este ponto de ancoragem e arrastá-lo para que ele não esteja no centro. Agora vou selecionar essas duas formas e unir-me para mesclá-las. Então eu corro ao redor deste canto interno e depois a borda. Ao selecionar esta âncora com a ferramenta de seleção direta, eu vou obter a ferramenta de cantos redondos e, em seguida, eu vou apenas arrastar que para fora para arredondá-lo, e mesmo aqui. Felizmente, isso ajuda você a ver como eu abordar ilustrando ícone usando formas básicas como blocos de construção. Agora divirta-se criando o seu próprio. Lembre-se, se você tiver dúvidas ou ficar preso, contato com a página da comunidade. 5. Preparando-se para a animação: Antes de começar a animar, precisamos separar cada ícone em seu próprio arquivo. Mostrarei como preparar seus arquivos para animação com esta amostra de cores. Vou selecionar a coisa toda, copiá-la e, em seguida, abrir um novo arquivo. Vou criar um novo documento 300 por 300 pixels e agora vou colar meu ícone no meu quadro de arte. Quero ter a certeza que isto está no centro exacto do meu quadro de arte. Se meu ícone estiver agrupado, posso ir para Alinhar, verificar se ele está definido como Alinhar à prancheta e clicar em “Centralizar e centralizar”. Se meu ícone não foi agrupado, aqui vai uma dica rápida. Meu ícone está fora do centro. Vou selecionar a coisa toda, e então eu vou pegar metade da largura do quadro de arte, que é 300 pixels, então isso vai ser 150, e eu vou colocar isso no valor x e y no painel Transformar e agora ele está centrado. Em seguida, eu quero separar cada parte do ícone que eu quero animar em sua própria camada. Se eu importasse esse arquivo para o After Effects como está, eu não teria nenhum controle sobre cada uma dessas camadas. Seria apenas um objeto. Uma maneira rápida de fazer isso é ir até o painel Camadas, selecionar tudo, clicar no menu de hambúrguer aparecer e, em seguida, escolher Liberar camadas para seqüência. Agora eu tenho camada 1 e, em seguida, todo o resto das camadas são aninhadas dentro da camada 1. Certifique-se de pegar todas as camadas de dois a seis que estão aninhadas na camada 1 e arrastá-las para cima e para fora, de modo que agora cada camada esteja por conta própria e nada esteja aninhado. Agora ele realmente ajuda quando você está animando se você tem todas as suas camadas nomeadas. Eu vou entrar e nomeá-los, e eu tenho essa camada extra vazia e eu vou apenas selecioná-la e acertar a cana de lixo para excluí-la. Agora vou guardar isto e está tudo pronto para o After Effects. Ser organizado vai ao longo do caminho quando você está trabalhando com arquivos do Illustrator no After Effects. Eu gosto de manter todos os meus arquivos para o nosso projeto em uma pasta. Tenho minha pasta de ícones animados fáceis, tenho uma pasta do After Effects chamada AE e uma pasta do Illustrator chamada AI. Eu tenho cada um dos meus ícones em seu próprio arquivo nesta pasta. Quando você importar arquivos no After Effects, ele vai lembrar onde ele encontrou esses arquivos. Se você mover um desses arquivos, After Effects não saberá onde você o colocou e ele dirá filmagem perdida. Portanto, certifique-se de que você está organizado com a estrutura de pastas como esta e não mova nenhum arquivo depois de importá-los para o After Effects. 6. Importação de arquivos AI no After Effects: Agora você está pronto para começar a animar. Ativar após efeitos e, em seguida, iniciar um novo projeto. Agora precisamos pegar os arquivos do Illustrator que fizemos. Vamos para Arquivo, Importar, Arquivo e, seguida, localizar seus arquivos do Illustrator. O primeiro arquivo que vou importar é o lápis, então eu vou clicar nele. Em seguida, importar como, Eu quero escolher Composição, Manter tamanhos de camada. Isso é muito importante. Se você não vir essa opção, clique neste botão de opção aqui. Importe como composição, Reter tamanhos de camada e clique em Abrir. Agora você verá que em seu painel de projeto você tem duas coisas novas. O primeiro é o lápis e esta é uma composição. O segundo é uma pasta. Agora isso tem todas as suas camadas nele. Se você clicar duas vezes na composição para abri-la, você também verá que ela tem todas as camadas. Na linha do tempo, que está aqui embaixo, você tem cada uma das camadas que você criou no Illustrator. O que é uma composição? Você pode pensar nisso como um clipe de filme. Ele contém muitas camadas, que podem ser coisas como gráficos, texto ou imagens de vídeo. Você pode colocar composições dentro de outras composições, como a forma como um filme é composto de muitos clipes diferentes. Vamos dar uma olhada em nossas configurações de composições. Para chegar a eles, você vai para Composição e depois Composição Configurações ou pressione Comando K. Posso renomear minha composição aqui no topo se eu quiser. Ao importar um arquivo do Illustrator, o padrão da largura e da altura é a mesma largura e altura do quadro de arte. Menos 300 por 300 por taxa de quadros é de 30 quadros por segundo, e você tem outras opções aqui. Normalmente, eu gosto de trabalhar em números inteiros quando estou fazendo animação, então eu costumo escolher 30. Mas se você estiver fazendo um gif e precisar que o tamanho do arquivo seja agradável e pequeno, você também pode escolher 15. Vou ficar com 30. Sua duração é quanto tempo sua composição será. O meu vai demorar quatro segundos. A última opção aqui é a cor de fundo. Vou clicar nisso. Eu tenho meu código hexadecimal da minha cor de fundo copiado, então eu vou apenas colá-lo lá. Depois de escolher suas configurações, clique em “Ok”. Você sempre pode voltar a essas configurações mais tarde acessando Composição, Configurações de composição ou pressionando Comando K no teclado. 7. Tour do After Effects: Se você é novo no After Effects, eu vou te dar um passeio. Se você é um cliente regular, sinta-se à vontade para pular este vídeo. No topo, temos nossa barra de ferramentas. Isso tem ferramentas como a ferramenta de seleção que é muito semelhante à ferramenta de seleção no Illustrator. A ferramenta manual que permite que você pegue sua composição e mova-a. Se você quiser colocar isso de volta no centro, você sempre pode ir aqui e ajustá-lo para caber. A próxima é a ferramenta de zoom. Você pode clicar para ampliar. Outra maneira de fazer isso é usar as teclas vírgula e ponto no teclado. Sempre se você quiser centralizar algo perfeitamente, você pode usar este menu suspenso. Você também tem suas ferramentas de rotação, mover atrás de ferramentas, ferramenta de forma, ferramenta de caneta, ferramenta de texto e pincéis. Em seguida, temos o nosso painel de projeto. Este é o lugar onde todos os seus bens irão. Quando você importa arquivos do Illustrator ou até mesmo do Photoshop ou de filmagens, qualquer coisa assim aparecerá aqui. Se você quiser fazer uma nova composição, uma em branco, você pode apertar este botão “Composição” aqui mesmo. Isso mostrará suas configurações de composição. Defina suas configurações e aperte “Ok” e você tem uma nova composição. Se você quiser excluir uma composição, aperte o botão “Lixeira”. Em seguida, temos o nosso painel de composição e é aí que toda a sua animação vai ser reproduzida. Se você estiver em um computador lento, pode definir sua resolução para metade, terceiro ou trimestre, para que ela seja reproduzida um pouco mais rapidamente. Na parte inferior da tela, você tem sua linha do tempo. Aqui é onde você faz a maior parte do seu trabalho. Se você clicar na primeira camada, você pode alternar para baixo e você verá transformar, alternar para baixo novamente e você tem algumas propriedades que você pode animar. Falaremos mais sobre isso no próximo vídeo. Se você quiser ocultar uma camada, você pode usar este ícone de bola de olho. Se você quiser ver apenas uma determinada camada, você pode clicar no botão “Solo” aqui. Isso mostrará apenas a camada solo. À direita, temos o botão “Pré-visualização”. Estes são Play, Next Frame, Last Frame tipo de botões. Além disso, tenha em mente que se você não vir nenhum dos painéis que eu tenho, você sempre pode encontrá-los em Janela. Meu Workspace agora é padrão, mas você pode criar seus próprios espaços de trabalho ou experimentar qualquer um deles. Lembre-se também de que você pode mover esses painéis exatamente como no Illustrator. Em seguida, tenho meus Efeitos e Predefinições. Aqui, você pode obter todos os tipos de efeitos diferentes. Nós não vamos usar nenhum nesta classe, mas se você quiser explorá-los, há muitos recursos para isso. Você também tem Bibliotecas. No Illustrator, configuro essa biblioteca de cores com as três cores que uso em meus ícones e posso acessá-la aqui no After Effects. Aí está, a interface do usuário do After Effects em menos de três minutos. Nos próximos vídeos, vamos nos aprofundar em como usar essa interface. 8. Configuração de quadros-chave: Como você cria animação e efeitos após? É tudo baseado em quadros-chave. Vamos dar uma olhada. Se eu alternar para baixo esta camada de lápis, eu tenho todas essas propriedades diferentes que eu posso animar. Se eu acertar este cronômetro bem aqui na propriedade da escala, ele vai definir um quadro chave que diz diamante azul bem aqui. Então, se eu avançar no tempo para cerca de um segundo, então eu vou definir outro quadro chave. Há algumas maneiras de fazer isso. Eu posso apertar este botão de quadro de chave de anúncio, e agora eu tenho outro quadro-chave, mas este quadro-chave é exatamente o mesmo que o primeiro, então nenhuma animação está acontecendo porque nenhum valor está mudando. Então eu posso entrar e colocar um valor. Posso digitar um valor ou clicar e arrastar sobre o valor. Agora eu tenho um valor de 190, e agora minha animação bem colocada. Se eu quiser alterar um dos valores, eu apenas me certifico de que o meu indicador de tempo está no quadro-chave e, em seguida, mudar o valor. Outra parte divertida de efeitos após é que você pode realmente colocar em matemática aqui. Eu poderia fazer uns 100 divididos por 30 e isso faria as contas para mim. Se você quiser se livrar de uma animação, você pode simplesmente excluir os quadros-chave. Reprodução em animação, você pode passar ao longo da linha do tempo, mas para reproduzir em tempo real, você vai querer usar o botão de visualização, o botão de reprodução ou pressionar a barra de espaços no teclado. Tenha em mente que, se você tiver muita coisa acontecendo em sua composição, sua animação pode ser reproduzida lentamente no início. Isso ocorre porque após efeitos precisa renderizá-lo, isso significa que ele precisa calcular cada quadro se parece antes de poder reproduzi-lo de volta para você. Na janela de informações, ele dirá se ele está sendo reproduzido em tempo real ou não. Quando você estiver reproduzindo uma animação, ela só será reproduzida na área de trabalho designada e que é essa área entre essas duas barras azuis. Se eu arrastar minha área de trabalho para um segundo e períodos de tempo e, em seguida, pressionar Play, ele vai continuar tocando a mesma área repetidamente. Digamos que eu queria animar a posição deste lápis. Vou acertar o cronômetro para começar um quadro chave. Eu quero seguir em frente no tempo, e então eu vou apenas pegar meu lápis na minha composição e arrastá-lo para cima. Agora estou segurando Shift para ter certeza que vai em linha reta. Essa é outra maneira que você pode definir um quadro-chave. Agora diga por alguma razão que eu queria que essa linha se movesse também. Eu posso simplesmente copiar e colar esses quadros chave na minha linha. Agora você não pode ver os quadros-chave, mas eles estão lá. Se eu alternar para baixo, então eu vou vê-los, e agora se eu reproduzir a animação, você pode ver que tanto a minha linha quanto o meu lápis têm os mesmos quadros de teclas de posição exata. Há muitas teclas de atalho que podem acelerar seu fluxo de trabalho aqui. Se você pressionar U, ele vai mostrar apenas as propriedades que têm quadro-chave definido. Se você bater em U novamente, ele vai fechar todos eles, então isso é muito útil. Você também pode pressionar P no teclado para exibir a posição ou S para escala, T para opacidade. e a lista continua. Vamos voltar para a posição. Eu só vou apagar a posição na linha porque eu não quero isso, mas dizer que eu quero que meu lápis se mova em um arco. Vou esconder a linha por enquanto, porque não precisamos dela. Você também pode editar o caminho de movimento da linha. Se você clicar em um dos pontos de ancoragem, verá que você obtém essas alças pezi e poderá arrastá-las exatamente como usaria as alças pezi no Illustrator. Agora, quando eu reproduzo a animação, eu posso ver que meu lápis vai se mover para cima e para trás para baixo. Vou voltar na minha linha para mostrar mais uma coisa, e vou apagar estes quadros chave. Uma maneira de excluir quadros-chave é clicar no cronômetro que fará a ativação e o quadro-chave ou desativar todos os quadros-chave. Além disso, se você tiver quadros-chave, você pode simplesmente selecioná-los e clicar em excluir. Como podem ver, cada uma das minhas camadas se estende por toda a linha do tempo. Se eu quisesse que minha camada de lápis terminasse para que meu lápis não ficasse mais visível após dois segundos, eu poderia simplesmente arrastar essa camada. Onde quer que esta barra esteja, é onde você verá a camada na composição, mas quando não houver mais barra, você não verá essa camada na composição. Além disso, a ordem das camadas importa. Como você pode ver, o lápis está cobrindo a linha, mas você pode simplesmente arrastar para mover camadas umas sobre as outras. Não se esqueça de salvar seu arquivo indo para Arquivo Salvar ou comando S. Em seguida, salve-o na mesma pasta principal que seus ícones, mas você pode colocá-lo em sua própria pasta se quiser. Se você é um novato do After Effects e está se sentindo sobrecarregado, eu entendo. Acabei de te dar muitas informações. Agora é uma boa hora para pausar e brincar no After Effects. Eu acho que você vai começar a ver que não é tão ruim. 9. Conversão de camada de vetores em formas: Quando você importa gráficos do Illustrator, suas camadas serão camadas vetoriais. Mas, às vezes, você pode querer editar as formas reais que você criou no Illustrator. Para fazer isso, você selecionará a camada, clique com o botão direito do mouse, vá para “Criar” e, em seguida, Criar formas a partir da camada vetorial. Now After Affect me fez uma nova camada, e adicionou os contornos da palavra, para que você saiba qual é. Vou esconder o lápis por um segundo. Se eu alternar para baixo nesta nova camada de forma, eu vou ter uma coisa nova chamada conteúdo, e se eu entrar nisso, eu posso realmente ver o caminho. Este é o mesmo caminho que eu tinha no Illustrator. Eu posso realmente entrar e editar o caminho, e se eu desfizer isso, posso definir quadros-chave e animar o caminho. Não preciso mais da camada vetorial, então vou deletá-la. Se por algum motivo eu precisasse dele novamente, ele sempre estará nesta pasta de camadas. 10. Desenho de linhas de animação: Desejo animar este desenho de caminho, então vou alternar para baixo, ir para o botão Adicionar e, em seguida, pressionar “Cortar caminhos”. Agora, eu tenho uma nova opção para Trim Caminhos, então eu vou desativá-la. Tenho três propriedades que posso animar. Início significa o início da linha, então isso vai ser bem aqui, Fim significa o fim da linha, então aqui. Eu vou definir um quadro-chave em um segundo, para o Fim ser 100%, então eu vou voltar ao início e trazer isso para zero. Agora, você pode ver que minha linha está animando. E se a sua linha não se animasse da maneira que esperava? Bem, você pode ir até Path e reverter a direção do caminho. Agora, ele vai animar de outra direção. E se eu quisesse animar minha linha vindo do centro? Eu vou excluir esses quadros-chave, então eu vou definir o Início como 50% e o final como 50%, e eu vou definir quadros-chave. Então eu vou avançar no tempo e definir o Início como zero e o Fim como 100. Agora, você pode ver que ele se anima a partir do centro. Vou apagar estes quadros-chave e mostrar-lhe o que significa o Deslocamento. Offset vai mover sua linha ao longo de seu caminho, exatamente assim. Da minha animação a lápis, quero que a minha linha se anime assim. Deixe-me mostrar-lhe outro exemplo de como você pode usar esse efeito. Vou importar, Comando I, meu pincel. Certifique-se sempre de escolher Composição Manter tamanhos de camada. Vou clicar duas vezes para abrir isso. Tenho esses gotejamentos saindo do meu pincel. Estes são traços que criei no Illustrator, mas aqui, são apenas formas vetoriais. Eles estão escondidos agora. O que você está vendo é uma forma chamada pintura de volta e isso é apenas uma forma que eu fundi meus traços juntos nesta forma. Verá por que fiz isso daqui a pouco. Mas, por enquanto, vou esconder essa camada e mostrar essas camadas de traçado. Mas eles não são traços porque eles são apenas camadas vetoriais, então eu vou selecionar todos eles, clique com o botão direito, Criar, Criar formas de camada vetorial. Agora, posso excluir as versões do Illustrator porque não precisarei delas. Em seguida, eu vou alternar para baixo no primeiro. Clique em “Adicionar”, “Cortar caminhos”, e eu vou definir um quadro-chave em um segundo para 100 no Fim e, em seguida, voltar no tempo e trazer isso para zero. Quero que isto desça e goteje. Agora, eu tenho a pintura vindo para baixo, mas eu preciso do topo da linha para animar para baixo também. No meio do caminho, eu vou fazer um quadro-chave no Início e, em seguida, avançar no tempo e, em seguida, aumentar o Start para 100. Você pode ver que agora minha linha está animando para o outro lado. Vamos jogar de volta ao zero, um segundo. Isso é o que eu queria, parece um gotejamento. Posso pegar este Trim Caminhos, certeza de que você tenha Trim Caminhos selecionados, pressione Comando C para copiá-lo e Comando V em cada uma das minhas outras camadas para colá-lo. Agora, se eu pressionar U no teclado para mostrar todas as minhas camadas com propriedades, você pode ver que esses quadros-chave foram colados em cada camada. Vamos tocar isso de volta. Todos eles pingam ao mesmo tempo. Isso não é realmente o que eu estava procurando, então vamos cambalear essas camadas. Talvez eu queira o do meio, então o terceiro para ir primeiro, depois o segundo, então eu vou apenas destacar esses quadros-chave e arrastá-los para a frente no tempo um pouco. Então talvez, eu quero que o quarto vá em seguida, então eu vou arrastar estes adiante para, vamos ver, que tal 25 quadros. Então o último, número um, eu vou trazer para a frente para aqui. Vamos ver como isso se parece. Nada mal. Agora, eu vou mostrar minha camada de tinta, a camada traseira de tinta, que é uma forma sólida. Agora, você pode ver que cada camada sai, mas agora que eu tenho essa camada de tinta de volta ativada, ela vai funcionar em um loop. Eu tenho minha tinta pingando e você pode ver que ela está continuamente looping bem. 11. Animação por um caminho: Quero que o meu lápis desenhe esta linha. Quero que o lápis siga o caminho da linha. Para fazer isso, vou entrar na minha camada de linha. Eu vou descer até o caminho, certifique-se de selecionar o caminho inferior. Pressione “Comando C” para copiar esse caminho. Em seguida, vá até a sua camada de lápis, pressione P no teclado para abrir a posição. Selecione a posição e, em seguida, pressione “Command V” para colar. Agora meu lápis vai se mover nessa forma. Mas a ponta do lápis não está na linha. Então, com todos esses quadros-chave de posição selecionados, eu vou pegar a linha e posicionar a ponta do meu lápis até o final da linha. Agora vou mover meus quadros-chave de volta para o início porque é aí que a linha começa a desenhar. Minha linha está se aproximando mais rápido do que meu lápis está se movendo. Isso ocorre porque esses quadros-chave finais não são ao mesmo tempo. Então o que eu vou fazer é pegar este último quadro chave no lápis e arrastá-lo para que eles estejam alinhados. Agora você deve ter notado esses pequenos pontos, eles se ajustaram quando eu movi o último quadro chave. Estes são um tipo especial de quadro chave chamado rove através do tempo. Para acessá-los, clique com o botão direito do mouse em um quadro-chave e selecione essa camada acinzentada que diz Rove Across Time. Por padrão, quando você copia e cola um caminho em uma posição, seus quadros G percorrerão através do tempo, que é o que eu queria porque tornou muito fácil para mim ajustar isso, para chegar ao tempo que eu queria. Agora, se eu tocar isso de volta meu lápis está desenhando na minha linha exatamente como eu queria. Eu quero fazer todas as minhas animações em loop. Então eu preciso levar esse lápis de volta ao ponto de partida. Mas primeiro vou tornar a minha composição um pouco mais larga para que o meu lápis nunca seja cortado. Vou apertar “Comando K” para abrir as configurações. Vamos fazer isso 500 por 500. Tudo bem, então minha linha vai atrair. Então talvez eu espere uns cinco quadros. Então eu quero que meu lápis gire. Então eu vou definir um quadro-chave para rotação. Apertei o teclado para abrir a propriedade de rotação. Então eu vou dizer, digamos dois segundos, girar isso para cerca de 180. Eu também quero mover a posição ao mesmo tempo. Então eu vou pressionar U no meu teclado para trazer todas as propriedades que são animadas. Aperte um quadro-chave de posição. Agora, quando meu lápis é girado para que a borracha esteja para baixo. Quero reanimar este caminho para que a linha seja apagada. Então eu vou pegar esses quadros-chave que eram o caminho animado em, copiá-los e colá-los onde meu indicador de tempo está agora. Eles estão um pouco fora por causa da rotação. Com estes quadro-chave de posição selecionado, eu vou apenas ajustar o caminho um pouco e agora ele vai se mover ao longo do caminho. Agora eu só preciso definir esta linha para apagar. Deixe-me esconder o lápis para que você possa ver isso melhor. Vou alternar para baixo para o meu conjunto de passagem de corte de quadro-chave para começar, porque eu quero que o início de uma linha para animar de 0 a 100, o que seria aqui. Então eu vou avançar para três segundos e animar o sub-quadro para 100 por cento. Agora a linha está se animando. Vamos jogar de volta a coisa toda. Há apenas mais uma coisa a fazer e que é colocar o lápis de volta ao quadro inicial para que seja um loop sem costura. Vou passar cerca de cinco quadros depois que o apagamento termina, aperte a rotação e posicione os quadros-chave. Então vá para o fim da minha linha do tempo. Eu vou definir a rotação para zero, e eu quero que a posição seja a mesma que é no início. Então eu vou apenas selecionar este quadro-chave, copiá-lo e colá-lo. Vamos dar uma olhada. 12. Orientação por um caminho: Vamos dar uma olhada em outro exemplo de quando você pode querer que um objeto seja animado ao longo de um caminho específico. Vamos fazer um novo comp. Vou usar a ferramenta de caneta para desenhar em um caminho. Eu não quero o preenchimento, então eu vou alternar para baixo na minha forma e apenas excluir o preenchimento. Tudo bem. Agora eu vou entrar na minha ferramenta de forma, ir até a ferramenta estrela apenas por diversão, e certificar-me de que minha camada original não está selecionada, então eu tenho outra camada. Posso fazer uma estrela. Agora quero que a estrela se mova ao longo deste caminho. Vou entrar, certifique-se de copiar o caminho de baixo, ir para a posição e colar. Você pode ver que minha estrela está fora da tela. Isto é porque o ponto de ancoragem daquela estrela estava bem aqui enquanto a estrela está aqui. O ponto de ancoragem é onde a forma girará. Preciso realinhar meu ponto de ancoragem para ficar no centro da minha estrela. Só vou desfazer essa posição. Vou deletar e trazer minha estrela de volta para a tela para que você possa ver. Usando a ferramenta Pan Behind, que é esse cara, ou você pode pressionar Y no teclado, arraste o ponto de ancoragem para o centro da forma. Agora ele girará em torno do centro da forma. Agora vou copiar o meu caminho novamente e colá-lo na posição. Agora minha estrela se moverá ao longo do caminho. Mas e se eu quisesse que a estrela se inclinasse bem ao longo do caminho? Você pode ver que está sempre na mesma orientação. Não está girando à medida que se move, que é tipo de aparência antinatural. Vou clicar com o botão direito do mouse na minha forma que é a estrela, ir para “Transformar”, depois até “Auto-Orient”. Vai trazer este pop-up. Vou escolher “Orient Along Path”. Agora você pode ver que a estrela gira à medida que se move ao longo do caminho. 13. Ajuste de pontos de ancoragem: Vamos animar essas amostras de cores se espalhando. Tenho o meu círculo que as minhas amostras de cores irão girar. Se eu começar a girar esta camada, eu vou pressionar no teclado para abrir a propriedade de rotação. Você verá que ele gira em torno de seu ponto de ancoragem, que está bem no centro. Mas não é isso que eu quero. Eu quero que ele gire em torno deste círculo. O que eu vou fazer é apertar “Y” no teclado ou ir até aqui para a ferramenta Pan Atrás. Então eu vou pegar este ponto de ancoragem e movê-lo para o círculo. Se eu mantiver o comando, ele se encaixará no lugar. Preciso fazer isso em cada camada. Eu vou ver toda a segunda amostra e os círculos para que seja mais fácil ver e fazer a mesma coisa, e novamente nesta camada e finalmente minha última camada. Agora eu quero definir quadros-chave de rotação em minhas amostras. Selecionarei as três amostras aqui no teclado para exibir a propriedade de rotação, clique no botão “Cronômetro” para criar um quadro-chave e, em seguida, voltar ao início. Então vou arrastar isto para que fique atrás da capa. Eu sei que tenho isso em incrementos de 30 graus, então eu posso apenas digitar os números. Agora eles estão desaparecendo. Se eu quisesse cambalear a animação, eu poderia simplesmente deslizar esses quadros-chave para frente no tempo. Vamos ver como isso parece. Agora eu preciso animá-los indo para o outro lado, para que eu possa fazer o loop. Vou apenas definir outro desses quadros-chave e seguida, avançar no tempo e copiar o quadro-chave inicial de cada camada. Eu também quero cambalear essa animação, então eu vou arrastar isso para trás um pouco. Vamos dar uma olhada. 14. Associação - Parte 1: Neste ponto, você sabe o suficiente para criar algumas animações simples em seus ícones. A melhor maneira de realmente aprender After Effects é apenas praticar. Então, espero que você tenha colocado alguns quadros-chave ao meu lado. Você pode querer tomar um pouco de tempo para se sentir confortável com o que já discutimos até agora, porque nos vídeos a seguir, vamos entrar em algumas técnicas mais intermediárias para levar suas animações para o próximo nível. Se você está pronto, vamos começar. Vamos falar sobre parentalidade, não o tipo de fraldas chorosas e sujas, parentalidade e após efeitos significa que uma camada, a camada filho, tem a mesma animação que outra camada, a camada pai. Para um exemplo de como a paternidade funciona, eu só vou fazer duas formas. O primeiro será um círculo, e o segundo será um quadrado. Agora eu vou colocar os pontos de ancoragem no centro dessas formas e então vamos colorir um pouco de diferença para que você possa vê-los mais facilmente. Meu quadrado vai ser a camada pai, então eu vou apenas selecionar a camada, pressione Enter e então eu posso renomeá-la e meu círculo será a criança. Primeiro vou definir alguns quadros-chave médicos na camada pai. Agora eu vou pegar minha camada de criança, ter certeza que é selecionado e depois passar para esta pequena ferramenta espiral. É chamado de chicote de escolha, e eu vou pegar o chicote de escolha e arrastá-lo para a minha camada pai. Agora você pode ver sob link pai, esta criança tem um pai chamado pai, nomeação muito criativa. Quando eu reproduzir esta animação, você pode ver que a criança está seguindo o pai. Você pode fazer isso para todas as propriedades diferentes. Se eu mudasse a escala do pai, a criança também aumentaria. Para cancelar a camada pai, basta ir para a lista suspensa e selecionar Nenhum, e agora eles estão desvinculados. 15. Associação — Parte 2: Agora vamos voltar para as amostras de cores e eu vou mostrar-lhe como eu adicionei um pouco mais interessante animação usando parentalidade. Peguei-as nas minhas três camadas de amostras e eu as criei no meu disfarce. Agora você pode selecionar várias coisas de cada vez e usar o chicote de seleção para pai. Outra maneira de pai é, obviamente, ir para a lista suspensa e selecionar uma camada. Agora, todas essas três camadas de amostra são parentadas para a camada de cobertura. Agora a capa não tem nenhuma animação nele agora, então você não verá nada mudando neste momento. Vou fazer com que a capa gire ligeiramente, por isso motiva a abertura e o fechamento do livreto da amostra. Vou girar Rotação, e então definir um quadro-chave e avançar no tempo, talvez aqui, e definir outro quadro-chave. Agora você pode ver que quando eu rodar a tampa, todas as três amostras estão girando também. Mas, todos eles têm suas próprias animações individuais também. A animação da capa é além da animação existente nas amostras. Não importa quais quadros-chave você definir primeiro. Agora vamos ver como isso se parece. Vamos fazer isso para que ele faça loops. Vou copiar este último quadro-chave, colá-lo e, em seguida, copiar o quadro-chave inicial e colá-lo no final. Agora vamos adicionar alguma posição à capa para dar um pouco mais de motivação para a abertura. Eu vou definir um quadro-chave de posição, então eu vou pressionar “U” no teclado para exibir todas as propriedades que têm quadros-chave. Então eu vou para a frente no tempo. Talvez quando o livreto não estiver aberto, eu abaixe a posição. Você pode ver que eu esqueci de criar o círculo para a capa. Se eu fosse criar isso agora, você pode ver que ele sempre vai ser fora do centro, mesmo se eu mover isso. O que eu preciso fazer é voltar para onde as posições estavam alinhadas e, em seguida, pai do círculo. Agora posso continuar configurando meu quadro-chave. Eu queria que este fosse para cima e este para baixo. Vamos ver como isso se parece. Ele deve voltar para baixo quando estiver fechando, então copie e cole esse quadro-chave, copie e cole o início até o fim. Isso está indo muito lento e eu acho que eu preciso deslocar os quadros-chave um pouco, modo que a posição e rotação da capa está motivando o livreto para abrir. Vou passar um pouco de tempo ajustando meus quadros-chave e certificando-se de que a animação sai do jeito que eu quero. Isso tudo é um monte de tentativa e erro, então você só terá que mover seus quadros-chave ao redor, ver o que funciona, ver o que você gosta. Leva algum tempo e muita prática. Aqui está o que eu inventei por agora. Voltaremos à animação de amostras de cores no vídeo de atenuação. Então fique ligado para isso. 16. Escala - Parte 1: Até este momento, temos animado movimentos de loop em nossos ícones, mas você também pode animar um ícone do nada para o ícone ou do ícone para nada. Vamos fazer isso nesta câmera. Eu estou indo para [inaudível] meu fundo principal lá. Agora, se eu testasse quadros-chave de escala sobre isso e definisse isso como zero para que ele escalasse e você pudesse ver que meu traçado também está dimensionando. É uma linha muito fina aqui e, em seguida, à medida que ele escala para cima, o curso também escala. Isso é porque tudo isso é uma camada. Esse não é exatamente o efeito que eu quero fazer. Quero que o golpe permaneça na mesma largura o tempo todo, apesar de aumentar a escala. Vamos ver o que acontece se eu converter a camada do Illustrator em uma camada de forma editável. Esta é a nossa forma editável, mas a mesma coisa acontece, meu traço também está em escala. Se eu for abaixo de Conteúdo, eu tenho um grupo com um caminho. Infelizmente, o After Effects não sabe que este é realmente um retângulo com cantos arredondados. Vamos ter que recriar a forma e os efeitos depois, mas não se preocupe, isso não é tão difícil. Vou fechar isso e depois ir para a minha ferramenta de forma, certificar-me da ferramenta de retângulo, e depois apenas rastrear isto. Eu não quero esse preenchimento, então eu vou clicar no preenchimento da palavra e apertar o botão nenhum e todos os meus traços foram sete pontos. Agora você pode ver que você criou uma nova camada de forma. Sob o conteúdo, você tem retângulo e, em seguida, você tem retângulo caminho. Sob isso, você pode realmente ajustar o tamanho e o traçado não mudará larguras. Vai ser sempre da mesma largura. Esse é o truque para animar as formas, tamanho em vez de escala e seu traçado permanecerá sempre o mesmo. Se você queria animar o traço ficando mais grosso, há também uma opção para isso sob acidente vascular cerebral. Eu quero apenas manter o meu em sete o tempo todo e ajustar isso de volta para alinhar-se com a minha camada original do Illustrator. Agora eu vou adicionar alguns cantos arredondados, e eu vou apenas excluir esta camada. Eu vou dimensionar isso e eu vou colocar este tamanho para baixo para zero. Vai aumentar exatamente como eu queria. Você pode fazer isso em todas as suas outras camadas também. Você pode excluir suas camadas do Illustrator se não precisar delas porque as recriou. Para renomear uma camada, basta selecionar a camada, pressionar enter e então você pode renomear. Pressione Enter para finalizar esse nome. Eu vou fazer a mesma coisa para todas as minhas camadas aqui na câmera. Quando eu fiz este retângulo, ele tem cantos pontiagudos, mas se você notar o meu outro do Illustrator tinha cantos arredondados. Como corrigir isso é entrar em curso e, em seguida, escolher junção redonda. Se você tem uma camada que precisa de uma falha, mas ela não tem uma, você pode pressionar o botão adicionar e, em seguida, preencher. Certifique-se de arrastá-lo para a sua forma e, em seguida, você pode ir e mudar a cor sob a cor. Para criar essas duas linhas, usarei apenas a ferramenta de caneta. Para criar esta lente flare, eu vou apenas criar um círculo completo e, em seguida, usar caminhos de corte para obter apenas a parte que eu quero. Neste círculo eu vou adicionar caminhos de corte, então eu vou entrar e configurá-lo para cerca de 25 por cento. Então eu vou mover o deslocamento para que ele alinhe onde eu quero. Posso apagar o original. Agora você percebe que essa linha tem tampas de bunda, eles são planos. Eu vou apenas ir para a forma eo curso e onde ele diz tampa bunda para a tampa de linha, Eu vou escolher tampa redonda e mesmo com a outra linha. 17. Escala - Parte 2: Neste ponto, provavelmente é útil alinhar todos os meus pontos de ancoragem ao centro de suas linhas. Portanto, usando a ferramenta Caneta atrás ou “Y” no teclado, basta arrastar todos os pontos de ancoragem no lugar. Lembre-se de que manter “Comando” irá encaixá-los no centro. Depois de recriar as formas necessárias no After Effects, você poderá usar as ferramentas Alinhar para garantir que elas estejam alinhadas novamente. Em seguida, para dimensionar cada parte da minha câmera, eu vou usar o tamanho em vez da escala para que meus traços mantenham sua mesma largura o tempo todo. Então, uma maneira fácil de chegar à propriedade Size em vez de alternar para baixo um monte de vezes. Você também pode simplesmente entrar na caixa de pesquisa aqui e digitar “Tamanho”. Vou definir quadros-chave de tamanho para todas as minhas camadas. Então eles vão dimensionar de zero para o seu tamanho final. Para as duas linhas, o slot de fotos e esta linha decorativa, eu vou animar os Trim Caminhos para animar aqueles em. Então adicione “Trim Caminhos” e, em seguida, eu vou definir o Fim e o Início para ser 100 e zero em um segundo e, em seguida, voltar e defini-los para 50, que ele anima para fora por dentro. Deixe-me resolver isso. Você pode ver que ele anima De dentro para fora. Então eu vou copiar esses Trilhos para o slot de fotos. Você verá que os quadros-chave foram copiados e colados e eles são animados da mesma maneira. Tudo bem, então agora se eu jogar de volta o que eu tenho, tudo está crescendo ao mesmo tempo e parece uma bagunça. Vou voltar e cambalear meu porta-chaves para que as peças entrem um de cada vez. Primeiro, vou trabalhar nesta camada de câmera principal. Neste momento, está a subir a partir do centro. Mas vou torná-lo um pouco mais interessante. Então primeiro vou apagar o último quadro chave. Eu vou ter que escalar para fora e depois para cima e depois para fora de novo. Vou acertar este “Proporções Restritas” para desbloquear as Proporções Restritas aqui. Então eu vou fazer o valor x 80; então agora ele vai ir de 0 a 80, então ele anima para fora. Agora vou animá-lo. Então eu vou talvez, 140. Então eu vou para “um segundo” e animar isso para 160. Agora eu tenho que sair, para cima e para fora de novo. Agora vou adicionar Overshoot. Overshoot é onde você vai além do valor inicial que você quer acabar em e, em seguida, de volta para ele. Este é o valor que eu quero acabar em; 160 por 140. Eu realmente vou arrastar este para cinco quadros no futuro e, em seguida, bater este para ser 170. Vamos ver como isso se parece. Você pode ver que se estende um pouco mais do que precisávamos e depois volta. Isso se chama Overshoot, e isso só adiciona um pouco de interesse à sua animação. Tudo bem, então agora eu vou passar por cada camada e compensar a animação para que cada coisa venha em uma de cada vez ou um pouco sobreposta, apenas para torná-la um pouco mais limpa. Eu também vou adicionar um Overshoot na lente externa. Então vá em frente cerca de cinco quadros, defina um quadro-chave, e então volte para aquele segundo para durar um pouco e faça isso um pouco maior. Então adicionarei minha lente interna. Por último, vou animar o brilho. Agora eu tenho o brilho chegando e ele precisa ser escalonado um pouco mais. Então, meu brilho está aumentando, mas também quero animar os Trim Caminhos. Então eu vou adicionar Trim Paths, e eu vou trazer isso para baixo para que eu tenha cerca de 25 por cento. Vou animar o deslocamento. No final da animação, quero que acabe aqui. No início da animação, eu quero que ela entre, talvez ele gire. Aqui está o que eu tenho até agora. Voltaremos a esta câmara no vídeo final sobre a flexibilização. 18. Crie mattes: Vou criar outra versão da minha câmera e fazê-la girar. Vou clicar na composição da câmera no painel do projeto e pressionar o comando ded para duplicá-la Então eu posso pressionar Enter para renomear isso. Depois, basta clicar duas vezes para abri-lo. Depois, vou tocar no teclado para abrir todos os quadros-chave e, em seguida, clicar e arrastar para selecioná-los e excluir todos os quadros-chave. Dessa forma, estou basicamente começando do zero. O que eu quero fazer é animar essas duas fotos como se elas estivessem saindo da câmera Eu só quero que eles sejam visíveis nesta parte inferior da composição. Para fazer isso, vou usar um tapete. Primeiro, preciso criar esse tapete. Preciso ter certeza de que nada na linha do tempo está selecionado. Basta clicar em algum lugar fora de qualquer camada. Em seguida, vou até a ferramenta de retângulo e, em seguida, basta clicar e arrastar nessa área inferior para desenhar um retângulo E estou me certificando de que ele se estenda até o fundo do copo. Algo parecido. Parece bom. Depois, vou clicar e pressionar Enter para renomear essa camada E vou chamá-lo de Matt. Na verdade, não importa como você o chama. Agora eu quero fazer as fotos, ter esse tapete como tapete deles. Primeiro, vou ativar a visibilidade da primeira foto. Então eu preciso ver minhas opções de Matt , o que eu não tenho na minha linha do tempo no momento Vou apenas apertar o botão de alternar modos. Se você ainda não vê seus tapetes , alterne entre esses botões para ver se consegue pegá-los Você está procurando a opção de tapete de corrida. Na primeira foto, vou configurar o tapete da trilha para ser aquele retângulo chamado mapa Agora você pode ver que a foto só está visível dentro desse tapete. Ainda tenho minha ferramenta retangular para o mouse. Vou apenas pressionar V no teclado para voltar à ferramenta de seleção. Agora eu posso definir os quadros-chave de posição nesta foto para que pareça que ela está saindo da câmera Eu posso fazer a mesma coisa com a segunda foto. Vou apenas ativar a visibilidade disso. Então eu posso usar a mesma camada, a mesma camada de tapete. Para a foto dois, vou selecioná-la no menu suspenso. Ou outra maneira de fazer isso é usar esse chicote e arrastar até a camada que você deseja que o tapete fique Eu poderia até copiar e colar essa animação na segunda foto. Basicamente, os tapetes são apenas uma forma de tornar uma camada visível apenas em uma determinada área E quando você define um tapete, ele desliga automaticamente o globo ocular na camada do tapete Mas essa camada ainda está lá. Se, por algum motivo, você também quiser ver o tapete, você só precisa se certificar de que a ordem das camadas faz sentido e de que você pode manter o olho fixo E tudo continuará funcionando da mesma forma. Mas, nesse caso, não quero que a camada de tapete fique visível. Então, vou manter o globo ocular afastado. A ordem das camadas aqui. Não importa nem um pouco. Se quiser, você pode arrastá-la até a parte inferior de suas camadas para mantê-la fora do caminho ou posicioná-la onde fizer mais sentido para você. O conta-gotas é outro exemplo em que eu uso tapetes. Eu já havia planejado isso quando estava trabalhando no Illustrator Eu criei o fluido interno para entrar na pipeta como esse retângulo, e eu o chamei E então eu soube que precisaria uma camada de tapete que, na verdade, chamei de máscara. Mas, tecnicamente, tapetes e máscaras são coisas diferentes. Perdoe-me pela nomenclatura, mas eu criei essa camada com a mesma forma da pipeta Agora posso pegar esse retângulo interno que deveria ser o fluido e escolher o tapete, ou máscara, como eu o chamei, para cortá-lo assim Agora eu posso simplesmente animar a propriedade de posição nessa camada interna Para animar o fluido parecendo estar subindo e descendo. 19. Facilitando: Até agora, temos usado apenas os quadros-chave lineares padrão. Esses são os que se parecem com diamantes, mas na verdade existem diferentes tipos de quadros-chave. Tenho duas formas aqui, um quadrado e um círculo. Então eu vou usar para demonstrar o que significa flexibilizar. Neste momento, o quadrado e o círculo apenas se movem pela tela na mesma velocidade, o tempo todo. Este é um movimento linear. Agora vamos ver o que acontece se eu adicionar flexibilização ao círculo. Vou destacar ambos os quadros-chave, clicar com o botão direito do mouse em um dos quadros-chave, ir para assistente de quadros-chave e, em seguida, Facilidade Fácil. Agora vamos jogar de volta. Você pode ver que o círculo está começando devagar, então ele está indo mais rápido, e então ele vai terminar lentamente novamente. Adicionar atenuação aos quadros-chave torna a animação um pouco mais interessante. Você pode realmente ajustar como a flexibilização funciona. Vou destacar meus quadros-chave lineares e entrar no editor de gráficos. Agora você pode ver que a linha vermelha está mapeando a posição x, e apenas é uma linha reta que está aumentando linearmente. A posição y não está mudando, então é apenas esta linha plana verde. Agora, para meus quadros-chave facilitados, se eu entrar no editor de gráficos, você pode ver que ele vai em mais de um arco. Agora isso está mostrando o valor ao longo do tempo. Você pode ver que a inclinação desta linha é o quão rápido o valor está aumentando. No meio aqui, está aumentando mais rápido porque a inclinação da linha é mais profunda aqui. Bem aqui, ele está indo devagar, em seguida, acelerando, e então lentamente novamente. Você pode alterar o tipo de gráfico que você vê com este botão aqui. Eu também posso mostrar este gráfico de velocidade e que mostra talvez ainda mais claramente que ele começa lento, vai rápido porque é o ponto mais alto do gráfico, e depois volta a lento. Você também pode ajustar esse gráfico para alterar a atenuação em seus quadros-chave. Agora, o meu círculo vai ser muito lento, depois extra rápido, e depois volta para abrandar novamente. Vamos voltar ao nosso ícone de amostras de cores e ver como podemos tornar essa animação mais interessante adicionando atenuação aos quadros-chave. A primeira coisa que vou fazer é selecionar todos os meus quadros-chave, clique com o botão direito do mouse assistente de velocidade, Easy Easy Easy. Se você quiser usar a tecla de atalho, é F9. Em um Mac, certifique-se de que você pressiona a tecla Fn e, em seguida, F9. Agora vamos ver como isso se parece. Parece um pouco melhor. Se eu quiser ser realmente preciso sobre os movimentos desses quadros-chave, eu posso ir para o editor de gráficos e editar todos os gráficos. Agora, se você tiver posição, você notará que você não pode editar este gráfico. O que você precisa fazer é clicar na posição, depois clicar com o botão direito do mouse e separar as dimensões. Isso fará com que você tenha uma posição y e uma posição x para a qual você tenha quadros-chave. Eu realmente não tenho nenhum movimento x, ele está apenas indo para cima e para baixo. Vou apagar todos esses quadros-chave clicando no cronômetro. Agora eu posso entrar no meu editor de gráficos, então certifique-se de selecionar os quadros-chave primeiro, e então eu posso ajustar as alças para ajustar o movimento da minha animação. Agora isso vai precisar de um monte de mexer para obter exatamente como você executá-lo, mas apenas brincar com ele e se divertir. Lembre-se de que você pode ver o valor de seus quadros-chave ao longo do tempo, ou você pode ver a velocidade ao longo do tempo. Achei muitas vezes mais fácil usar o gráfico de valores quando você está editando no editor de gráficos. Pode levar muito tempo para se acostumar com o editor de gráficos. É bastante complexo. Se você não quiser lidar com isso agora, talvez você seja novo no After Effects, a melhor coisa a fazer para aprimorar suas animações é clicar com o botão direito do mouse em qualquer quadros-chave que sejam apenas quadros-chave lineares tradicionais. Vá para o assistente de velocidade, uma Facilidade de Facilidade. Você também tem outras opções para Easy Easy in e Easy Ease out. Vamos ver como eles se parecem. Easy Easy in vai lhe dar este estilo de quadro-chave. Se eu abri meu editor de gráficos, eu posso ver que ele vai começar bem linear, e depois terminar lentamente. Então, se eu desfazer isso, eu também posso fazer Easy Easy out, que vai fazer o oposto, e ele vai começar lento e linear. Jogue com a flexibilização em seus quadros-chave para aprimorar suas animações. 20. Acabamento: Depois de ter todos os seus ícones animados do jeito que você quer, é hora de exportá-los. Primeiro, eu vou mostrar como você pode colocar todos os seus ícones juntos em uma composição para exportar. Então eu vou apertar este botão aqui para criar uma nova composição. Eu só vou fazer isso 1920 por 1080 porque isso é um tamanho padrão e eu vou apenas nomear ícones. Tudo bem, então agora eu tenho essa composição chamada ícones que eu estou no momento. Eu vou para o painel do projeto e, em seguida, arrastar cada um dos meus outros ícones para esta composição. Você pode ver que eles são adicionados como uma camada na linha do tempo. Agora tenho todos os seis ícones na mesma composição. Você pode ver que eu adicionei um pouco de polonês ao meu ícone. Então eu fiz este pequeno rabisco um pouco menor. Então ele não está fazendo um movimento tão dramático, e ele se encaixa com meus outros ícones tamanho sábio. Eu adicionei um pouco de flexibilização para todas as animações. Eu realmente adicionei um efeito 3D falso quando minha foto sai da câmera. Eu vou te dar uma dica, eu realmente uso caminhos para fazer isso. Não é realmente 3D, mas isso é mais um tópico avançado que não vamos abordar aqui, mas fique atento para uma próxima aula. Você pode ver que meu pincel e minhas amostras de cores, depois que eu afinar a animação acabou precisando apenas de dois segundos. Então eu quero que eles façam um loop ao longo de quatro segundos para que eles não simplesmente desapareçam porque minhas outras animações são quatro segundos. A maneira mais fácil de fazer isso seria apenas duplicando isso. Vou selecionar meu pincel, pressionar o Comando D para duplicar, e então apenas arraste isso para que quando um pincel terminar, o próximo comece. Isso vai ser bem perfeito para que ninguém nunca vai notar e fazer a mesma coisa com as minhas amostras de cores. Agora eu tenho um loop perfeito de todos os meus ícones. 21. Renderização: Agora eu preciso exportar isso ou, em termos do After Effects, renderizá-lo para que possa ser reproduzido como um arquivo de filme. A maneira mais fácil de fazer isso é acessar Composition, Add to Render que. Agora ele abre essa renderização que, que é apenas uma aba dentro da linha do tempo Eu tenho esse novo para renderizar, que são meus ícones. Vou entrar, clicar em, você provavelmente verá a Lista de Perdas aqui. Clique nele e isso abrirá essas configurações. Gosto de exportar o meu como Apple Pros de quatro a dois porque estou em um Mac. E esse é o melhor formato que eu encontrei, é de altíssima qualidade. Você também pode escolher qualquer um desses outros, conforme suas necessidades. Agora, isso vai exportar o arquivo MOV v. Se você quiser exportar um MP quatro, mostrarei uma maneira diferente Na verdade, você não pode exportar MP quatro diretamente do After Effects. Mp fours são ótimos porque são um pouco mais compactados e têm recursos mais amplos Eles são bons em iPhones e para coisas como Instagram e Facebook Agora, depois de definir todas as minhas configurações, quero ter certeza de enviá-las para o lugar certo. Então, vou clicar aqui. Em seguida, vou navegar até onde quero exportar isso e clicar em Salvar. Em seguida, para iniciar o processo de exportação, basta clicar em Renderizar Quando você ouve aquele barulho adorável, sabe que acabou. Agora eu posso ir ao meu Finder, e agora posso encontrar meu arquivo MOV no Finder, e posso abri-lo rapidamente Se você estiver em um Mac, aí está. Se você quiser exportar um MP four, há uma etapa extra. Vou voltar para a composição dos meus ícones, depois ir até o menu superior e clicar em Composição, Adicionar ao Adobeamdia E isso abrirá o Adobe Media Encoder. O codificador de mídia é um programa em que tudo o que ele faz é exportar arquivos de filme ou diferentes tipos de arquivos, como até presentes animados Quando o codificador de mídia for aberto, você verá o projeto pronto para ser exportado aqui Você também pode simplesmente arrastar um arquivo MOV se já o tiver exportado As configurações que eu uso para exportar um MP quatro são H 264. E então eu apenas configurei isso para corresponder à fonte, que é por padrão. E então você verá que isso resultará em um MP quatro. Para acessar qualquer uma dessas configurações, basta clicar para formatar. Eu escolhi o H 264. Você pode ver que está exportando um MP Four. Certifique-se de exportar o vídeo e, se tiver áudio, poderá exportar o áudio. Ou, se não quiser, você pode desmarcar isso se quiser e clicar em OK Clicar aqui permitirá que você navegue até onde deseja salvar o vídeo. Em seguida, basta clicar neste botão verde de reprodução para iniciar a renderização. Quando a renderização estiver concluída, você deverá encontrar um novo arquivo P four no menu do Finder Agora, se você quiser explorar um presente, você também pode fazer isso por meio do codificador de mídia Vou pegar meu arquivo MOV e arrastá-lo para o codificador de mídia Você também pode enviar o arquivo do After Effects para o codificador de mídia, como fizemos na primeira vez Desta vez, vou clicar em 20064 para alterar a configuração para presente animado Vou mudar o nome apenas para ícones e clicar em Renderizar. Agora eu tenho um presente animado e posso abri-lo em um navegador da web. Acho que os presentes animados são os melhores para sites em que você deseja que o presente seja repetido repetidamente. E acho que o MP quatro é bom para mídias sociais como o Instagram. E será repetido automaticamente. 22. Valeu!: Parabéns por completar esta aula. Eu adoraria ver o que você criou, então certifique-se de enviar seu trabalho para o projeto da classe. Se você postou em mídias sociais, por favor me marque @explanimated para que eu possa vê-lo lá. Certifique-se de me acompanhar no Skillshare para se manter atualizado sobre as próximas aulas. Se gostou desta aula, agradeceria se me deixasse uma crítica. Se você tiver alguma dúvida, sinta-se à vontade para entrar em contato com a página da comunidade. Se você tiver outros tópicos sobre os quais gostaria de aprender, me avise. Você pode conferir meu trabalho @meganfriesth .com ou no Instagram @explanimated. Muito obrigado por assistir esta aula. Feliz animação. [MUSIC]