Expressões alimentadas por IA no After Effects

1. Introdução: Olá, sou Valerie e bem-vinda ao AI for Motion. Se você já se sentiu intimidado por expressões e quer aproveitar a IA para ajudá-lo em seu fluxo de trabalho de animação , essa é para você Em cinco lições, mostrarei como usar ferramentas de IA como HAGPT para gerar expressões que automatizam suas animações, criam configurações inteligentes e economizam horas Abordaremos tudo, desde a criação de carrosseléis, efeitos de foco, painéis I saltitantes até automatizar cliques no cursor sem cliques no cursor painéis I saltitantes até automatizar cliques no cursor sem precisar escrever uma única linha de chamada. A boa notícia é que você não precisa ser um especialista em efeitos posteriores. Você sabe o básico, você está pronto. Ao final deste curso, você terá uma configuração reutilizável poderá ser aplicada aos seus próprios projetos E o mais importante, você terá uma maneira totalmente nova de pensar em animação com IA. Então, se você está pronto para animar de forma mais inteligente e rápida, vamos começar a primeira lição. Te vejo lá. 2. Criando uma animação inteligente em carrossel: Pronto, e bem-vindo à primeira aula do curso. Espero que você já tenha baixado a pasta do curso. Eu o chamei de expressões para SAS porque as animações que vamos criar neste curso são usadas principalmente em explicativos do SAS. Tudo bem. Então, primeiro, vamos começar verificando o que está dentro dessa pasta. Não é nada muito complicado. Dentro da pasta hat GPT, você encontrará arquivos PDF das conversas que tive com o Chat GPT durante este curso Isso significa que dentro desses PDFs, você verá minhas conversas exatas com o bate-papo, mas salvas como arquivos PDF Eu os adicionei porque, para cada um de nós, o bate-papo pode dar respostas ligeiramente diferentes. E caso a IA forneça algo completamente fora do assunto em seu bate-papo, você sempre pode voltar a esses arquivos PDF e copiar as expressões exatas que usei. Mas não se preocupe. Tenho certeza que não importa qual IA você esteja usando, todos obteremos resultados muito semelhantes porque, no final das contas, estamos gerando linhas de código muito simples. Tudo bem, vamos passar para a próxima. Há uma pasta Assets que contém todas as imagens que usaremos neste curso, como as imagens de animais e os logotipos de ícones do software. Você também verá uma pasta AE com os arquivos do projeto After Effects. Um arquivo inclui a animação final trabalharemos neste curso, e o outro é a versão sem animação, com a qual começaremos agora mesmo. Então, vamos abrir esse e começar a aula. Antes de prosseguirmos, vamos nos certificar de que estamos todos usando o mesmo layout de espaço de trabalho para que tudo permaneça sincronizado Para fazer isso, vá para Janela, depois para o espaço de trabalho e escolha padrão Se seu layout ainda parece diferente do meu, provavelmente é porque alguns painéis foram movidos. Para corrigir isso, podemos redefinir o espaço de trabalho juntos. Agora, todos nós deveríamos estar vendo a mesma coisa. Agora, neste momento, não faça nada, apenas assista e ouça. Vamos colocar as mãos em contato em breve. Deixe-me primeiro guiá-lo pelo painel do projeto para que você possa entender o que está lá. Dentro da pasta Assets, temos as imagens de animais e os ícones do software. Há também uma pasta de sólidos com os sólidos que usei como plano de fundo para Cada pasta de aula contém a composição principal dessa lição e uma subpasta com as pré-composições relacionadas a ela. Eu já preparei as cenas com as quais vamos praticar neste curso. Em cada aula, praticaremos algo diferente. Não se preocupe. Também explicarei como eu configuro cada cena antes de começarmos a animar Por enquanto, podemos fechar todas as pré-composições e focar na primeira lição, na qual criaremos uma animação de carrossel super legal com muitas microanimações, como opacidade, escala e até animações de sombra projetada, mas sem realmente criar quadros-chave para essas microanimações mas focar na primeira lição, na qual criaremos uma animação de carrossel super legal com muitas microanimações, como opacidade, escala e até animações de sombra projetada, mas sem realmente criar quadros-chave para essas microanimações. Faremos tudo isso usando expressões. Mas não se preocupe. Você não precisa conhecer nenhuma expressão para que funcione. Vamos usar a IA para gerar as expressões de que precisamos. Antes de começar a animação, deixe-me explicar rapidamente como eu montei essa cena, porque há muito que você pode aprender com ela Como você pode ver, eu tenho algumas pré-composições aqui, cada uma com uma foto de animal Você pode perguntar: por que você os pré-compôs? Por que não usar a camada de imagem como está? Então, deixe-me entrar nessa pré-composição e explicar por que fiz isso. Em primeiro lugar, é porque todas as fotos têm tamanhos diferentes e eu preciso que tenham o mesmo tamanho. Além disso, eu queria criar uma aparência de bordas arredondadas. Eu criei um quadrado arredondado usando uma camada de forma, depois usei a função track Matty para usar essa forma como um alfa para a imagem Essa forma agora é usada como uma máscara para a imagem. É melhor do que aplicar uma máscara normal diretamente na camada da imagem, pois isso me permite posicionar livremente a imagem da maneira que eu quiser. Mais importante ainda, ele me permite trocar fotos facilmente mais tarde, se um cliente solicitar alterações Simplesmente seleciono a imagem que quero substituir, mantenho pressionada a tecla Alt ou Option no Mac e arrasto a nova até ela. Depois disso, posso ajustar a nova imagem para caber no layout. Como você pode ver, os cantos arredondados permanecem os mesmos e estou pronto para continuar trabalhando. Tudo bem, vou pressionar Control Z para desfazer minhas alterações. Ah, e a propósito, quando trabalho em projetos que incluem muitas fotos, eu uso dimensões pré-compostas de tamanho médio Um tamanho como 1080 por 1080 geralmente funciona bem. Com isso dito, espero que você veja a vantagem de configurá-lo dessa forma e agora possamos começar a trabalhar juntos. Prepare-se para fazer um pouco de mágica. Então, agora vamos começar a criar a animação avançada do carrossel Como mencionei anteriormente, vamos usar a IA para nos ajudar com isso. No nosso caso, usaremos a versão gratuita desse GPT. Se você ainda não tem uma conta, vá em frente e crie uma. Mas, honestamente, agora, maioria das pessoas já tem um Estou usando a versão paga, mas aqui você me verá usando a versão gratuita chamada GPT four oh Também funciona da mesma forma com as versões mais antigas. Porém, no momento em que você estiver assistindo a este curso, essa versão talvez não exista mais. De qualquer forma, vamos começar a construir. Primeiro, quero compartilhar três dicas importantes que tornarão esse processo muito mais eficiente para você. Primeiro, ao pedir ajuda com o After Effects, sempre comece mostrando ao GPT uma captura de tela da sua pré-composição Dessa forma, ele pode ver toda a configuração, que torna sua solicitação mais fácil de entender. Segundo, ao escrever sua primeira mensagem ou tarefa, sempre termine com uma pergunta como: você entende o que quero dizer? Isso ajuda o GPT a pensar em sua ideia com mais cuidado e, muitas vezes, a explica ainda melhor do que você a descreveu Três, se as coisas não saírem como planejado e o GPT não estiver oferecendo o que você deseja, não continue tentando no mesmo bate-papo, feche-o e inicie um novo Isso redefine sua memória. Se você continuar perguntando no mesmo tópico após várias tentativas malsucedidas, ele permanecerá bloqueado na solicitação original, que pode nem ser precisa. Portanto, é melhor começar do zero. Tudo bem. Com isso em mente, vamos começar a criar a animação de karoel De acordo com nossa primeira dica, começaremos fazendo uma captura de tela da nossa cena para compartilhar com o GPT No meu caso, procurarei a ferramenta Snipping. Aqui estão os atalhos para PC e MAC. Usuários de PC trocam o Windows S. Os usuários de Mac trocam o Command Shift quatro. Você não precisa capturar toda a interface, apenas os painéis importantes. No nosso caso, o que mais importa é o painel de visualização, para que o GPT possa ver o layout e o painel Camadas, para que ele possa ler os nomes das camadas para que ele possa ler os nomes Queremos que o GPT possa ver nossa cena. Portanto, certifique-se de que a captura de tela inclua o painel de visualização e o painel de camadas, para que ela também possa ver os nomes das camadas Agora vamos copiar a captura de tela e colá-la no Chat GPT. A seguir, explicaremos o que queremos que ele faça. Vou escrevê-lo usando um inglês simples com alguns erros gramaticais apenas para mostrar que o inglês perfeito não é necessário para obter bons resultados É aí que nossa segunda regra ajuda. Então, vamos tentar. Eu recomendo sempre começar mencionando qual software você está usando Em seguida, descreva brevemente o que está em sua cena. Nosso objetivo é dar ao GPT uma tarefa básica sem nos aprofundar muito nos detalhes no início Por exemplo, um valor específico como 20% não é muito importante neste momento. Todos os valores podem ser ajustados posteriormente, então não se preocupe em ser exatos Apenas se concentre em descrever a ideia de animação da maneira que você a imagina. Como estou fazendo aqui, estou dizendo que quero que a opacidade das pré-composições não centralizadas seja menor para que a centralizada se destaque E agora, depois de descrever tudo, não esqueça nossa segunda regra. Se você não tiver certeza de que explicou sua ideia com clareza, termine sua mensagem perguntando: Você entende o que quero dizer? Agora, você deve saber que a resposta dada pelo GPT será um pouco diferente para cada um de nós E está tudo bem. O mais importante é verificar se ele entende sua visão na primeira parte da resposta. Se algo não estiver certo, você pode corrigi-lo antes de seguir em frente. Por exemplo, notei que o GPT sugeriu escalar a pré-composição centralizada em 20%, o que, em sua mente, significa passar de uma escala de 100 a 120 Mas, no meu caso, minha escala de pré-composição padrão não é 100, então não quero escalá-la para 20 Vou dizer à GPT que, de uma forma simples, minha escala padrão é 40 Depois volto ao meu projeto, verifico o que parece bom e vejo que 60 funciona bem. Então eu volto para o chat e digo 60. Antes de continuar, também vou dar uma olhada nas outras sugestões do GPT Nesse caso, vejo que está oferecendo dois estilos de movimento diferentes. Eu quero que a animação seja suave, então vou mencionar isso no chat também. Feito isso, vamos executar a tarefa. Agora, temos algumas respostas geradas com algumas explicações simples, você não precisa ler todas elas, mas se quiser começar a aprender como as expressões funcionam, é uma boa ideia lê-las O bom é que, mesmo que você não entenda as expressões, GPT geralmente fornece explicações claras dentro do código da expressão sem quebrar Também nos diz a qual propriedade devemos aplicar a expressão, e essa é a parte importante para nós. Lembre-se de que, antes de prosseguir, se tiver alguma dúvida, continue lendo o restante da resposta do GPT Na maioria das vezes, você encontrará a explicação de que precisa ali mesmo. Tudo bem. Então, agora vamos para a expressão da primeira escala e copiamos o código. Agora, abra seu projeto e pressione S para revelar a propriedade da escala. Para abrir a entrada da expressão, mantenha pressionada a tecla Alt ou Option no Mac e clique no Cronômetro de escala Agora, pressione Control ou Command V para colar a expressão. Para concluir a ação, clique em qualquer lugar fora do painel de expressões. E aí está. A primeira pré-composição agora está escalada Vamos abrir a grade de ação e colocar a pré-composição no centro para ver se está funcionando Parece bom. Agora vamos fazer o mesmo com a propriedade de opacidade. Vamos verificar isso. Incrível. Parece muito bom. Se você encontrar algum erro ou algo não funcionar, não se preocupe. Você pode simplesmente copiar as expressões que eu usei. Eles estão listados na pasta GPT do chat. Nas próximas lições, mostrarei como corrigir erros de expressão. Mas, por enquanto, basta acompanhar e se familiarizar com o processo. Tudo bem, agora vamos selecionar todas as pré-composições e movê-las, para que a que estamos vendo atualmente seja colocada no centro Eu estou ótimo. Agora, para aplicar essas duas expressões ao resto das camadas, primeiro abra a propriedade de opacidade, clique com o botão direito nela e escolha Copiar somente expressão Em seguida, selecione o resto das pré-composições e pressione Control ou Command V para colá-las Vamos fazer o mesmo com a propriedade de escala. Incrível. E agora precisamos controlar a posição de todas as camadas de uma só vez. Para fazer isso, vamos criar uma nova camada nula e criar todas as pré-composições nela. Certifique-se de não confundir a faixa Mat Piwip com a mãe e vincule Essas são duas coisas diferentes. Incrível. Agora, podemos mover a camada nula para a esquerda ou para a direita e obteremos esse efeito suave de carrossel Imagine quantos quadros-chave seriam necessários para criar isso manualmente, animando e cronometrando cada pré-composição E esse é o verdadeiro poder de saber como usar a IA para ajudar com tarefas reais em nossos projetos, mesmo que você não conheça nenhuma expressão. Feito isso, só descobrimos o que é possível com IA e expressões Agora vamos passar para o próximo nível. Digamos que eu queira alterar os valores de escala e opacidade nas expressões Para fazer isso, preciso abrir cada expressão, encontrar os parâmetros corretos e ajustá-los manualmente para cada camada. Como você pode imaginar, isso leva muito tempo. Então, agora vamos aprender como a IA pode ajudar a automatizar esse processo. Quando você deseja controlar os parâmetros de expressão dinamicamente, a configuração é um pouco diferente Você acabou de aprender como fazer uma configuração simples. Agora vamos construir um mais avançado. Para começar, vamos selecionar nossas pré-composições e pressionar duas vezes E para revelar as expressões Agora, excluiremos todas as expressões. Para isso, mantenha pressionada a tecla Alt ou Option no Mac e clique no cronômetro da propriedade Vamos fazer isso para todas as pré-composições. E não se esqueça também de limpar a expressão da pré-composição centralizada Ótimo. Agora vamos voltar ao Chat GPT e pedir que ele crie uma nova configuração de expressão para nós Escreverei a solicitação de uma forma muito simples e posso até incluir alguns dos termos da expressão, como os que vimos anteriormente. Portanto, o GPT entende quais parâmetros queremos controlar. Então, vou apenas copiar essas frases da expressão que o GPT deu anteriormente, para que ele entenda exatamente quais parâmetros eu quero controlar Em seguida, também adicionarei os parâmetros de opacidade. Estou simplesmente dizendo à GPT que quero ser capaz de controlar essas duas propriedades Vamos ver o que isso sugere. Aqui vamos nós. Sem nem mesmo saber que isso era possível, perguntei à GPT se isso poderia ser feito, e ela me deu o processo completo, passo a passo Ele me deu as expressões e também sugeriu quais números usar no controlador. Agora, talvez não entendamos completamente o que tudo significa, mas tudo bem. Vamos seguir as etapas e ver o que obtemos. Primeiro, criarei uma nova camada nula instruções do GPT, e agora vou me certificar de rotular as camadas exatamente como sugerido, para que não tenhamos erros posteriormente Incrível. Agora, vamos ver quais são as próximas etapas. Continuaremos seguindo as orientações do GPT e criaremos quatro controles deslizantes diferentes Você pode encontrá-los no painel de efeitos clicando com o botão direito do mouse na camada nula e acessando os controles de expressão ou digitando o nome do efeito na barra de pesquisa de efeitos Ótimo. Agora, vamos adicionar esse efeito à camada nula Use Control ou Command D para duplicá-lo três vezes, então você acaba com quatro controles deslizantes no Por fim, renomeie cada controle deslizante com os nomes exatos que o GPT Basta copiar os nomes do bate-papo e colá-los no campo do nome do efeito. Vamos fazer isso com todos os quatro controles deslizantes. Incrível. Antes de prosseguirmos, esse é um ótimo momento para salvar uma cópia de backup do seu projeto, caso o After Effects falhe. Vamos salvá-lo como um novo arquivo. Você pode chamar isso de algo como prática. É sempre bom manter uma versão do projeto antes do início da animação, especialmente em cenas mais complexas, para que você não perca o layout preparado caso precise recomeçar. Tudo bem. Agora, vamos voltar ao bate-papo e copiar a expressão da escala. Vamos testá-lo na pré-composição centralizada. No nosso caso, essa é a figura seis. Ok, agora não vemos a pré-competição, mas tudo bem Não estamos recebendo um erro de expressão, então provavelmente é apenas um problema de parâmetro no controlador. Como você pode ver, todos os valores do controlador estão atualmente definidos como zero. Esse é provavelmente o problema. Se você encontrar algum erro de expressão, aqui está minha dica. Exclua o nome do controlador e digite-o novamente manualmente, em vez de copiá-lo e colá-lo do bate-papo Por algum motivo, o After Effects às vezes não reconhece texto colado de outros programas Mesmo que o nome pareça o mesmo, ele não funcionará. E é isso que causa esses estranhos erros de expressão. Portanto, basta digitar novamente os nomes manualmente e o problema deve desaparecer. De qualquer forma, vamos continuar seguindo as etapas do GPT. Vamos voltar ao bate-papo e copiar a expressão de opacidade. Agora cole-o na propriedade de opacidade. Em seguida, retorne ao bate-papo e verifique o que ele diz para fazer a seguir. E aqui está. Etapa três, ele sugere ajustar os valores de controle. Então, vamos fazer isso rapidamente. Tudo bem. Agora, vamos testá-lo movendo nossa camada nula de um lado para o outro e ver o que acontece Incrível. Funciona perfeitamente. Agora posso ajustar os controladores para a configuração do carrossel e visualizar a aparência de tudo apenas movendo a O melhor dessa configuração é que você sempre pode voltar e ajustar os valores sempre que quiser Além disso, depois de terminarmos a lição, você pode salvar esse projeto com essa configuração interessante para usá-la como modelo para seus projetos futuros. A única coisa que você precisa fazer é substituir as imagens por outras relevantes para seu projeto e ajustar o controlador se quiser que pareça um pouco diferente. Por enquanto, vamos copiar as expressões que adicionamos a essa pré-composição e colá-las no restante das camadas Para ver as duas propriedades, primeiro pressione T para mostrar a opacidade, depois mantenha pressionada a tecla Shift e pressione S para revelar também a propriedade de escala Agora, vamos copiar apenas as expressões e colá-las nas outras camadas. Tudo bem. Agora podemos testar o controlador e ver se tudo funciona. Como você pode ver, a camada fox não está reagindo ao controlador de escala, então provavelmente esquecemos de colar a expressão de escala nela Não é grande coisa. Basta copiar a expressão de escala de uma das outras pré-composições e colá-la na camada de raposa. Ótimo. Agora, quero mencionar algo realmente importante ao trabalhar com pré-composições Se você decidir reduzir suas pré-composições para manter a melhor qualidade de imagem possível, saiba que isso pode mudar a aparência da cena Como você pode ver aqui, a opacidade parece diferente agora. Mas, no nosso caso, isso é muito fácil de corrigir. Basta ajustar o controlador de opacidade em nossa configuração e ele atualizará automaticamente todas as camadas Incrível. Agora, vamos dar um passo adiante e tornar o design ainda melhor adicionando um simples efeito de sombra projetada. Vamos ajustar os parâmetros de sombra e também alterar a cor da sombra para que ela se misture bem com o fundo Aqui está uma ótima dica. Ao adicionar uma sombra projetada, primeiro faça uma amostra da cor de fundo da cena e, em seguida, ajuste os valores da cor. É assim que você obtém sombras com aparência mais natural. A sombra parece incrível, mas eu quero que ela apareça apenas na pré-composição centralizada Estou tentando criar uma aparência sutil e elevada. Mas, como você pode imaginar, animar e cronometrar manualmente a sombra projetada para cada camada levaria uma eternidade. É aí que nosso amigo da IA entra novamente. Para ajudar o GPT a entender melhor o contexto, farei uma captura de tela da minha É importante que o GPT veja o efeito de sombra projetada nas camadas na linha do tempo Então, faça uma captura de tela e cole no bate-papo. Agora, vamos tentar explicar o que estamos tentando alcançar. Novamente, usando uma linguagem muito simples. O GPT agora está sugerindo algumas etapas. Mas como eu já tenho um controlador que gerencia toda a configuração, gostaria de saber se posso adicionar essa automação de sombra projetada ao mesmo controlador. Então, vamos perguntar. Ótimo. Diz que podemos. Vamos seguir as etapas e ver o que acontece. Vou copiar o nome agora e voltar ao meu projeto para seguir as etapas. Então, primeiro, precisamos criar outro controle deslizante, conforme ele sugeriu, e podemos colar o nome que copiamos há um segundo OK. Também vamos configurá-lo para 100, como vimos na sugestão. De volta ao GPT. Vamos ver o que vem a seguir. Ok, eu realmente não entendo tudo isso. Há muitas explicações acontecendo. Vamos seguir em frente e copiar as expressões. O mais importante para mim é verificar onde a IA diz para colar a expressão. Nesse caso, ele diz para aplicá-lo à propriedade de opacidade do efeito de sombra projetada Então, vamos fazer isso agora. Agora eu posso controlar a sombra projetada a partir daqui. Vou configurá-la para 100 por enquanto e verificar se ela desaparece automaticamente quando eu movo a camada nula para os lados Isso é incrível. Funciona perfeitamente. Agora vou ajustar a cor da sombra para melhor se adequar ao meu design. E feito isso, vamos copiar esse efeito de sombra projetada e colá-lo no resto das pré-composições Vamos mover o nulo e ver se tudo funciona. Bom. A sombra só aparece quando a pré-composição está no centro Estou feliz com o resultado da automação. Como agora temos uma sombra projetada aplicada a todas as pré-composições, vamos ajustar um pouco a opacidade também, porque a sombra projetada mudou um pouco sua aparência aplicada a todas as pré-composições, vamos ajustar um pouco a opacidade também, porque a sombra projetada mudou um pouco sua aparência. Tudo bem. Então, agora podemos animar a cena como quisermos. No meu caso, vou apenas criar um movimento lateral simples para o carrossel No início da animação, vou começar mostrando o elefante. Depois de 3 segundos, trarei o tigre para o centro. Finalmente, 3 segundos depois, vou mover o leopardo para o centro Acabei de perceber que talvez não tenha colocado o elefante e o tigre perfeitamente no centro, então vou para o então vou para primeiro quadro-chave e ajusto o valor da posição dos nulos Eu farei o mesmo com o tigre. Incrível. Agora, como costumamos fazer, vamos melhorar o movimento ajustando a velocidade do quadro-chave Mas desta vez, em vez de segurar opção Alter e clicar duas vezes em um quadro-chave, usarei um atalho que descobri há pouco tempo para abrir rapidamente o painel de velocidade do quadro-chave Depois de selecionar seus quadros-chave, basta pressionar Control Shift K ou Command Shift K no Mac e pronto Agora, vamos alterar a velocidade para algo 75% para entrada e saída . Vamos pré-visualizar isso. Incrível. Parece ótimo. Agora vamos para o Segundo Nove e copie e cole o primeiro quadro-chave para obter uma boa animação em loop Pressione para encurtar a área de trabalho e acesse o editor Speedgraph para verificar se a velocidade é consistente em toda Tudo bem, tudo parece bom. E com isso, terminamos a primeira aula. A coisa mais importante que eu quero que você tire desta lição é que às vezes vale a pena gastar alguns minutos extras criando uma configuração automatizada antes de começar a animação Isso pode economizar muito tempo depois, porque quando o cliente voltar e solicitar alterações, você poderá ajustar as coisas muito rapidamente, em vez de lidar com vários quadros-chave e refazer tudo manualmente Eu recomendo praticar esta lição ainda mais adicionando um efeito de desfoque interessante à configuração Você pode pedir ao Chat GPT que desfoque todas as pré-composições não centralizadas e mantenha apenas a pré-composição centralizada em foco e veja o que ela sugere em As possibilidades são infinitas, e espero que agora você entenda como é fácil criar coisas assim com a ajuda da IA. Nunca usei expressões complexas em meus próprios projetos, mas agora tenho certeza de que posso criar praticamente qualquer automação necessária sem realmente aprender expressões ou codificar Tudo bem, agora vamos abrir a segunda lição e fechar esta E antes de começar a assistir à próxima aula, não se esqueça de fazer uma pausa de dez minutos para refrescar antes de continuarmos. Nos vemos na próxima. 3. Animação de UI com quicando: Oi, e bem vindo de volta. Nesta lição, vamos criar um movimento saltitante para o painel de interface do usuário que você vê Mas antes de entrar na animação, deixe-me mostrar rapidamente como eu configurei a cena Então, eu tenho uma pré-composição principal do meu avatar e, se abrirmos as pré-composições desta lição, você verá que há uma para a imagem do Avatar e outra para o imagem do Avatar e outra Dentro da pré-composição de imagens do Avatar, quero dar uma dica rápida Ao trabalhar em cenas como essa, evite tornar as dimensões da pré-composição muito grandes. É melhor trabalhar com dimensões pequenas pois não precisamos ver essa imagem de perto. Além disso, assim como na lição anterior, eu uso a função track Mat para mascarar a imagem com um círculo que criei usando a ferramenta Ellipse Agora vamos explorar a composição principal de avatares. Aqui eu tenho o resto das camadas, incluindo a pré-composição do botão, que é apenas um retângulo arredondado simples com um traçado e uma Tudo bem, vou fechar essas pré-composições e vamos começar a animação Nesta cena, quero criar uma animação de introdução para o painel de interface do usuário, mas quero torná-la mais interessante Quero adicionar um pouco de movimento secundário e fazê-lo se mover de forma saltitante Mais uma vez, eu realmente não sei quais expressões usar, mas sei como quero que a introdução fique No meu caso, quero que o painel entre na cena pela parte inferior. Então, vamos criar essa animação básica bem rápido. Primeiro, vamos abrir a propriedade position. Podemos ampliar a linha do tempo para ver os códigos de tempo com mais clareza Como quero que a pré-composição termine em sua posição atual, vou até, digamos, a segunda e criarei um quadro-chave Em seguida, vou para o início da linha do tempo e movo a pré-composição para fora do quadro Então, agora temos uma animação muito simples. Antes de adicionarmos qualquer Es fácil aos quadros-chave, vamos fazer uma captura de tela rápida da cena e pedir que o GPT nos ajude a fazer essa Certifique-se de que a propriedade position esteja aberta para que o GPT possa ver os quadros-chave que criamos. Tudo bem. Agora vamos ao Chat GPT. E em vez de continuar o bate-papo da primeira lição, vamos começar uma nova conversa clicando no novo ícone de bate-papo. Ótimo. Agora podemos colar a captura de tela e começar a conversar Primeiro, sempre comece dizendo ao GPT qual software você está usando Em seguida, descreva o que você está tentando criar. E antes de prosseguirmos, tenho uma pergunta para você. Como devemos terminar nossa mensagem antes que o GPT nos ajude? Isso mesmo. Precisamos perguntar, você entende o que quero dizer? Essa é a etapa mais importante. Queremos que a GPT descreva nossa visão de volta para nós antes que ela forneça uma solução Só então podemos ter certeza de que está no caminho certo? Então, o GPT já preparou a expressão e explicou como aplicá-la Ele também nos deu algumas dicas, caso desejemos ajustar as configurações de salto Aqui está o que ele acha que queremos alcançar. Como você pode ver, ele entendeu muito bem e até mencionou um novo termo mais preciso para o que estamos tentando criar. Ele sabe que queremos criar uma animação de overshoot and bounce Ele já preparou a expressão e explicou como aplicá-la. E ele também sugeriu o que fazer caso queiramos ajustar alguns dos parâmetros do movimento de ultrapassagem Tudo bem, vamos copiar a expressão e aplicá-la à nossa animação de posição para ver o que acontece. Eu sou incrível. Já temos um bom efeito saltitante. Mas, na minha opinião, a animação parece um pouco lenta. Vamos trazer o último quadro-chave um pouco mais cedo na linha do tempo. Coloque-o ao redor da moldura 20. Agora, diminua o zoom na pré-visualização e verifique se a expressão fornecida pelo GPT também está provocando uma ultrapassagem no Se isso acontecer, não se preocupe. Basta voltar ao bate-papo e pedir ao GPT que faça com que o efeito overshoot bounce se aplique somente ao Tudo bem, de volta à aula. Agora, vamos facilitar os quadros-chave e ver o que temos Como você pode ver, o efeito saltitante é pouco visível agora, porque a velocidade dos quadros-chave mudou após a atenuação quadros-chave mudou após a Nesse caso, podemos seguir sugestão da GPT e ajustar a quantidade de rejeição na expressão Mesmo que você não saiba nada sobre expressões, GPT geralmente as escreve com notas curtas. Assim, você saberá quais valores afetam mais o movimento. Tudo o que precisamos fazer agora é tentar valores diferentes até encontrar algo de que gostemos. Primeiro, alterarei o valor de rejeição em pequenos passos. Então vou tentar um salto maior para ver o que isso me dá. Estou mostrando isso porque quero que você se sinta à vontade para mudar valores e brincar com as configurações ao praticar sozinho Nada de ruim pode realmente acontecer. Na pior das hipóteses, basta pressionar desfazer ou pedir ajuda novamente ao GPT. Tudo bem, agora que encontramos um valor de rejeição que funciona, quero corrigir uma pausa que está acontecendo na animação É importante que você entenda por que essa pausa existe. Muito simples. Quando facilitamos os quadros-chave, sua velocidade muda. E, como você pode ver aqui no editor gráfico, a velocidade nesse quadro-chave final atualmente é zero Para corrigir isso, podemos converter o quadro-chave final de volta em linear mantendo pressionado o controle ou o comando no Mac e clicando nele uma vez Agora, a velocidade é de cerca de 13 54 pixels por segundo. Antes de ficar preso em zero. Agora temos movimento novamente. Então, agora a animação continuará sem problemas com o efeito de salto Mas, como você pode ver, é um pouco demais no momento, porque originalmente o ajustamos com base no quadro-chave atenuado Mas agora temos um quadro-chave linear regular. Então, agora vamos ajustar as configurações de salto novamente para corresponder à nova velocidade Estou mostrando esse processo porque quero que você explore e coloque a mão na massa quando necessário. Não tenha medo de testar as coisas. É a melhor maneira de aprender rapidamente. Agora, vamos fazer com que a animação comece mais lentamente puxando a alça do primeiro quadro-chave para a direita Na minha opinião, já parece incrível e estamos prontos para seguir em frente. Obviamente, você sempre pode alterar os valores para obter uma aparência um pouco diferente, se quiser. Mas agora eu quero fazer com que essa animação pareça ainda mais dinâmica adicionando uma animação de rotação simples junto com a posição. Também tentarei adicionar um movimento saltitante divertido à rotação, se isso for Então, vamos começar criando a animação de rotação. Selecione a camada, pressione R e vá para o quadro 20. Crie um quadro-chave aqui. Essa será a posição final de rotação. Em seguida, volte ao início da linha do tempo e gire a Vamos girá-lo para 25 graus e ajustar a posição nesse ponto para que o painel da interface fique oculto fora da tela Tudo bem, parece bom, mas eu quero voltar ao Chat GPT e tentar criar uma animação mais interessante Vamos contar o que fizemos e o que queremos alcançar. Eu quero que a rotação pareça um pouco instável. E como não tenho certeza se estou me explicando claramente, vou perguntar ao GPT. Você entende o que eu quero dizer? Agora eu posso ver algumas explicações, e o GPT está usando termos como instabilidade ou movimento trêmulo. Então, talvez eu peça para fazer a camada tremer um pouco e depois parar Vamos ver se ele entende a tarefa. Depois de ler a explicação, ainda não tenho certeza se foi isso que eu quis dizer. Então, nesse caso, vou experimentar e corrigir o GPT, se necessário Essa é a parte útil de explorar a IA e os efeitos posteriores. Eu realmente quero que você siga esses mesmos passos e não tenha medo de experimentar as coisas sozinho. Ok, agora vejo que o movimento está um pouco instável, mas ainda não parece como eu Antes de voltar ao bate-papo, tentarei ajustar alguns dos valores na expressão para ver se isso ajuda Depois de alguns testes, ainda não consigo o movimento exato que quero, então vamos cancelar a expressão e agora voltar ao bate-papo e explicar melhor. Começarei dizendo: Não foi exatamente isso que eu quis dizer e depois descreverei minha ideia de uma forma ainda mais simples Como sempre, terminarei perguntando: Você entende o que quero dizer? Desta vez, diz GPT, eu entendo perfeitamente. Então, vamos ver se isso é verdade. Incrível. Isso é exatamente o que eu estava procurando. Agora eu posso brincar com os valores e ajustar as coisas até que fique perfeito Então, vamos brincar com esses três valores na seção de configuração na expressão. Tudo bem. Eu acho que parece bom. Depois disso, vou ajustar os quadros-chave e ver como eles interagem com a expressão de rotação Parece ótimo agora. Também ajustarei a velocidade para melhor corresponder ao movimento da posição Novamente, foi muito importante para mim mostrar a vocês esse processo de idas e vindas com o GPT Às vezes, não conseguimos o que queremos imediatamente, mas se você explicar as coisas com clareza, GPT acabará conseguindo Tudo bem. Agora que criamos a introdução para o painel da interface do usuário, vamos entrar na pré-composição e criar algumas microanimações interessantes Nesse caso, quero adicionar alguma animação em escala saltitante a camadas como a imagem do Avatar, a estrela e o botão Para as outras camadas, podemos reutilizar a animação da posição saltitante criamos anteriormente para a Então, vamos voltar ao chat GPT e pedir que ele crie uma animação em escala de salto ou pop-up Também podemos mencionar que queremos que seja semelhante à animação de posição pop-up que usamos anteriormente Então, aqui temos todas as explicações e sugestões para a animação em escala pop-up Vamos voltar ao projeto e criar a animação em escala para a imagem do Avatar para que possamos adicionar GPTSEpression Assim como antes, como quero a escala final seja o que é no final da animação, vou para o quadro 20 e criarei um quadro-chave com o valor atual Então, no início da linha do tempo, definirei a escala para zero Você também pode isolar essa camada para que possamos focar somente nela Agora que temos os quadros-chave prontos, vamos tentar usar a expressão que a GPT nos deu Ótimo. Funciona perfeitamente. Agora, vou ajustar a atenuação para que corresponda à animação de posição que criamos para o painel principal da interface Depois disso, vou brincar com as configurações de expressão para ver o que fica melhor para essa camada específica. Tudo bem, vamos aplicar a mesma expressão ao próximo elemento que queremos destacar. Vamos fazer isso com a pré-composição do botão. Primeiro, crie a animação em escala e, em seguida, aplique a expressão. Basta selecionar a camada e colar a expressão. Vamos ver como fica. Agora, ajuste a velocidade e ajuste o efeito de ressalto até que fique perfeito para essa perfeito para Incrível. Isso parece ótimo. Vamos fazer a mesma coisa com a estrela e o grande número. Agora, para aplicar a expressão, selecione as duas camadas e pressione Control V. Vamos ver como fica. Como a camada numérica é bem pequena, prefiro tornar o salto um pouco mais perceptível para que ele apareça Isso também parece ótimo. Agora, vamos criar uma animação pop-up para o ícone que tenho aqui. Esse arquivo é muito grande, mas eu o reduzi para um valor muito pequeno Então, vamos ver se a expressão ainda funciona nela. Às vezes, o GPT pode criar uma expressão baseada no valor real da escala da camada e isso pode não funcionar bem para cada camada, especialmente se todas forem dimensionadas Se isso acontecer com você, basta voltar ao GPT e pedir que ele construa a expressão usando porcentagens, como estamos fazendo Se você tiver algum problema, explique que está trabalhando com camadas que têm valores de escala diferentes e deseja uma animação pop-up universal que funcione independentemente da escala das camadas. Tudo bem. Agora que terminamos as animações em escala pop-up, vamos criar uma introdução de posição simples para as camadas de texto Primeiro, vá para o quadro 20 e crie um quadro-chave para a posição atual Em seguida, volte ao início da linha do tempo e mova as camadas de texto para baixo e para fora do quadro Agora, copie a mesma expressão de posição saltitante que usamos para o painel principal da interface e cole-a nas camadas de texto Por fim, ajuste a atenuação e veja como fica. Parece ótimo, mas temos um pequeno problema. Você pode ver as camadas de texto entrando na cena fora das bordas da forma azul principal. Eu tenho uma pergunta para você. O que precisamos fazer para corrigir isso? Precisamos fazer com que as camadas de texto usem o tapete alfa dessa forma. Em seguida, basta ativar novamente a visibilidade da camada da forma. Agora, tudo parece perfeito. Temos o texto visível somente dentro da camada da forma. A última coisa que precisamos fazer é cronometrar as microanimações que criamos dentro da pré-composição do avatar para coincidirem com a animação na composição principal Vamos começar a animação de introdução para as camadas dentro dessa composição a partir do quadro 15 Neste ponto, você pode organizá-lo como quiser. No meu caso, quero que as camadas de texto entrem primeiro na cena, então vou começar com o nome chegando. Depois de dois quadros, a próxima linha de texto. Depois disso, farei com que a foto do avatar apareça seguida pelo ícone. E, finalmente, vou terminar com a estrela, o número e o botão. Agora, vamos conferir a animação e ver como tudo fica junto na composição principal. Acho que a animação interna deveria começar um pouco mais cedo. Vou Vou tentar movê-lo para o quadro cinco. Sim, isso parece muito melhor. E com isso, terminamos esta lição. Espero que tenha lhe dado um pouco mais de confiança para começar a automatizar suas próprias Além disso, espero que esta lição tenha ajudado você a ver que às vezes é melhor não criar um único controlador para todas as camadas, como fizemos na Lição 1. Nesse caso, foi uma escolha mais inteligente controlar cada camada separadamente e ajustar os valores um por um Com isso dito, agora estamos prontos para passar para a próxima lição, onde criaremos um efeito de foco muito legal para os ícones Vai ser incrível, então nos vemos lá. 4. Configuração avançada de animação hover: Volte. Nesta lição, quero ensinar como criar uma configuração avançada de animação flutuante Mas antes de começarmos, deixe-me explicar por que eu pré-componho meus ícones em vez de usar as camadas originais O principal motivo é que cada ícone tem um tamanho diferente. Se eu os animasse como estão, a cena seria muito mais difícil de controlar. Quando você trabalha em cenas como essa, sugiro fazer o mesmo. Também facilita muito a troca de ícones no futuro, se você precisar Quanto ao tamanho pré-composição, sugiro trabalhar com dimensões pequenas, algo como 300 pixels para largura e altura deve ser suficiente. Use dimensões maiores somente se você souber que os ícones aparecerão de perto na sua vista. De qualquer forma, como você pode ver, o tamanho dessa camada de ícone é muito grande e eu a reduzi para 14 A mesma coisa para o ícone do Illustrator. Eles vieram no mesmo tamanho original. Mas o ícone do Photoshop tinha um tamanho original diferente, então eu o escalei para 46 E para o ícone Figma, usei uma escala de 33. Meu objetivo era fazer com que todos parecessem do mesmo tamanho visual, e é por isso que eu os pré-compus e uso as mesmas dimensões para todas as Tudo bem, então espero que você tenha entendido. Agora, vamos começar a criar a configuração de flutuação. Vamos imaginar que não temos ideia do que fazer primeiro. Então, vamos pedir que o Chat GPT nos ajude. Com isso em mente, tenho uma pergunta para você. O que nos ajudará a explicar claramente a situação para o Chat GPT Precisamos fazer uma captura de tela da nossa cena. Então, vamos fazer isso bem rápido. Certifique-se de que sua captura de tela inclua o painel de visualização e o painel de camadas Aqui está uma pequena dica de bônus. Para melhorar a clareza da sua mensagem para o GPT, você pode desenhar um esboço rápido ou uma seta na captura de tela Nesse caso, estou desenhando uma seta do cursor até o ícone. Tudo bem. Então, agora vamos copiar essa captura e voltar ao bate-papo GPT Vamos criar uma nova conversa e colar a captura de tela nela E, como sempre, vamos começar dizendo qual software estamos usando. Então, vamos tentar explicar a animação que estamos tentando criar. Não se preocupe em cometer erros gramaticais. Apenas tente ser o mais específico possível. Desta vez, já direi à GPT que quero controlar os diferentes parâmetros do efeito de foco porque talvez eu queira alterá-los Mencionarei os parâmetros que já conheço e também perguntarei ao GPT se há algum outro parâmetro que esteja faltando que possa melhorar a configuração E, como sempre, vamos terminar perguntando : você entende o que quero dizer? Então, aqui temos todas as etapas de que precisamos, e eu posso ver que o GPT realmente adicionou um parâmetro muito bom no qual eu nem pensei, que é ser capaz de controlar o tamanho padrão dos ícones Ótimo. Então, vamos continuar e ver o que mais temos. Percebi na etapa três que GPT explica como tornar o movimento mais suave Isso me deu a ideia de perguntar se podemos adicionar esse parâmetro ao controlador para que possamos ajustá-lo sem precisar abrir o manual de expressão. E aqui está. O GPT também nos deu a expressão para esse parâmetro Então, agora vamos seguir as etapas desde o início. Primeiro, vamos voltar ao nosso projeto e criar uma camada controladora usando um objeto nulo Certifique-se de nomear essa camada exatamente como o GPT sugeriu, porque se os nomes não corresponderem, a expressão não funcionará Tudo bem. Em seguida, vamos criar os três controles deslizantes e rotulá-los exatamente como ele recomendou Agora, ajustaremos os valores padrão para cada controlador, exatamente como o GPT nos disse E antes de aplicar as expressões, vamos também adicionar esse controlador final para movimento suave e definir o valor padrão conforme sugerido. Agora, vamos copiar a expressão de escala atualizada criada pela GPT e colá-la na propriedade de escala do primeiro ícone Deixe-me redimensionar um pouco esse painel. Se você está tendo problemas para abrir o campo de expressão, não se preocupe. Basta cancelar a expressão atual e clicar com a tecla Alt no cronômetro novamente. Tudo bem. Depois de colar a expressão, vejo um erro, então clico na expressão para revelar a mensagem de erro e, em seguida, uso o atalho para abrir a ferramenta de captura de tela e tirar uma foto dela Certifique-se de que sua captura de tela inclua a mensagem de erro completa Isso é muito importante. Agora, cole essa captura no bate-papo do GPT e deixe que ela resolva o problema Aqui podemos ver a explicação. Parece que o problema é com um nome que usei. Talvez eu tenha digitado algo errado, mas mesmo que você não veja um erro, sugiro que exclua o nome e digite novamente manualmente Como expliquei na primeira lição, copiar nomes de fora às vezes causa bugs estranhos E lá vamos nós. O erro desapareceu e a expressão funciona perfeitamente. Ótimo. Agora podemos começar a brincar com os parâmetros para ver como eles afetam o movimento e a aparência geral da cena. Agora, antes de aplicar essa expressão a todas as outras pré-composições, vamos tentar melhorar o efeito de passar o mouse fazendo ícone se mova ligeiramente para cima quando o cursor passa sobre Vamos voltar ao GPT e dizer que queremos que o ícone ou a pré-composição se mova suavemente ao passar o Incrível. O GPT sugere adicionar outro controlador para que possamos ajustar esse parâmetro sempre que quisermos. Vamos fazer isso bem rápido. Agora, aplique a expressão à propriedade de posição, exatamente como o GPT nos diz Vamos dar uma olhada. Tente alterar o valor no novo controle deslizante para ver o que fica melhor Quando estivermos satisfeitos com a aparência, podemos copiar as expressões dessa camada e colá-las no resto das pré-composições do ícone Tudo parece ótimo, e a melhor parte. Agora estamos controlando todos os ícones a partir de um único controle. Você pode alterar todos os valores dos parâmetros sempre que quiser. Quão legal é isso? Você pode até mesmo inverter o efeito Então, em vez de os ícones crescerem ao passar o mouse, eles encolhem. Então, agora podemos até mesmo reverter o efeito, fazer com que os ícones encolham ao passar o mouse em vez de crescerem fazer com que os ícones encolham ao passar o mouse em vez de crescerem . Tudo bem. Vou fazer tudo voltar ao normal. E agora vamos começar a animar a camada do cursor. Neste ponto, como sempre, você pode criar qualquer tipo de animação que quiser. Você não precisa copiar exatamente o que estou fazendo. Meu principal objetivo neste curso é ajudar você a aprender como criar configurações de expressão usando IA, não focar no design detalhado de animação E espero que agora você esteja começando a perceber como é fácil gerar sistemas de expressão complexos que costumavam levar muito tempo para serem aprendidos e criados manualmente, tudo graças à IA. Tudo bem, acho que minha animação parece muito boa e, com isso, terminamos esta lição. Tudo bem, acho que minha animação parece muito boa e, com isso, terminamos esta lição Você pode ir em frente e abrir a próxima lição e fechar esta. Na próxima lição, aprenderemos como criar um efeito interessante de passar o mouse para botões em vez de ícones Também falaremos sobre o que fazer em situações em IA se recusa a nos dar o resultado que queremos, não importa o quanto tentemos Vai ser incrível, então nos vemos lá. Mas antes de passar para a próxima, recomendo fazer uma pausa de dez minutos 5. Automação de mudança de cor do Hover: Oi, e bem vindo de volta. Nesta lição, criaremos um efeito interessante de mudança de cor ao passar o mouse e também falaremos sobre o que fazer quando depararmos com problemas irritantes com o chapéu Como sempre, deixe-me mostrar rapidamente como construí essa cena simples. O que eu tenho aqui são apenas alguns precomps representando botões. Dentro de cada pré-composição, há uma camada de texto e um retângulo arredondado É importante saber que todos os métodos que usamos neste curso também funcionam bem com camadas regulares. Você não precisa usar precomps se não quiser. Tudo bem. Agora, vamos começar a criar a expressão. Quero que os botões mudem de cor ao passar o mouse sobre eles com o cursor Em primeiro lugar, vamos fazer uma captura de tela rápida da cena e das camadas Agora, vamos copiar a captura de tela, acessar o chat GPT, iniciar uma nova conversa e colá-la Em seguida, descreveremos nossa ideia de uma forma muito simples. Como não temos ideia de como fazer a mudança de cor, perguntaremos ao GPT quais efeitos devemos usar e como fazer isso E, como sempre, terminaremos perguntando: Você entende o que quero dizer? Tudo bem. Então, aqui temos o processo completo e também podemos ver os efeitos sugeridos pelo GPT Acho que o efeito de tonalidade é melhor nesse caso, pois vem da família de efeitos de correção de cores família de efeitos de correção de Então percebi que o GPT criou uma expressão para o efeito de preenchimento Mas, por enquanto, vamos ignorar isso e voltar ao projeto para entender o que o efeito de tonalidade realmente faz, já que é esse que eu quero usar Pesquise o efeito no painel de efeitos e predefinições e adicione-o a uma das pré-composições de botões Agora vamos alterar as cores dentro do efeito de tonalidade para obter a aparência que queremos quando o botão passa o mouse Feito isso, confira a quantidade a ser colorida da propriedade. Isso controla a intensidade com que as novas cores são aplicadas. Mas digamos que não notamos que GPT criou a expressão para o efeito de preenchimento e, de qualquer forma, copiamos essa expressão e colamos na propriedade amount to tint Como você provavelmente adivinhou, receberemos uma mensagem de erro Agora, digamos que eu não entendi o erro, mas ainda quero corrigi-lo. Primeiro, podemos cancelar a expressão. Em situações como essa, a melhor coisa a fazer é fazer uma captura de tela da sua configuração atual e garantir que GPT possa ver claramente o efeito que você está usando Em seguida, cole a captura de tela no bate-papo e diga à GPT que estou usando o efeito de tonalidade Você pode me dizer onde exatamente devo colar a expressão? E imediatamente, o GPT nos dá novos passos em uma expressão de trabalho Vamos copiar isso e testá-lo no projeto. Agradável. Funciona. Mas, honestamente, não adoro como o efeito só acionado quando o cursor está no centro do E eu não sou fã da estranha mistura de cores médias que acontece quando o cursor está se aproximando Digamos que eu não entenda por que isso acontece. Eu só quero que a mudança de cor aconteça instantaneamente quando o cursor tocar no botão Nesse caso, basta voltar ao GPT, dizer que você não gosta do comportamento atual e descrever o que deseja, como se estivesse conversando com um assistente de Depois de explicar, GPT criará uma nova expressão para nós. Vamos copiá-lo e colá-lo no painel de expressões. Incrível. Parece muito melhor agora. Vamos tentar reduzir a pré-composição para verificar se alguma coisa está quebrada ou precisa ser ajustada na expressão Tudo ainda parece ótimo, então estamos prontos para seguir em frente. Então, agora aplicamos expressões aos efeitos e às propriedades básicas da camada. Mas vamos dar um passo adiante e tentar usar expressões em estilos de camadas. Por exemplo, clique com o botão direito do mouse na pré-composição, vá para estilos de camada e adicione um efeito de traçado Abra as configurações do traçado, defina o tamanho como dez e altere a cor para branco. Agora, eu quero que esse traçado apareça somente quando o botão é colocado. Dessa forma, criaremos um efeito de foco mais exclusivo e dinâmico Faça uma captura de tela dessa configuração atualizada e volte para o Chat GPT No bate-papo, descreva brevemente a situação e explique o que você quer que aconteça. E aí está. O GPT nos diz para aplicar a expressão à propriedade de opacidade do efeito de traçado Vamos fazer isso e ver o que acontece. Ótimo. Parece muito legal. Agora podemos copiar esse estilo de camada da primeira pré-composição e colá-lo no resto das pré-composições de botão Depois de confirmar rapidamente que funciona, vamos fazer o mesmo com o efeito de tonalidade. Copie e cole nos outros. Parece incrível. Tudo está funcionando perfeitamente. Agora, vamos criar uma animação rápida para o cursor praticar um pouco. Como sempre, você pode animá-lo como quiser. Mas não gaste muito tempo com isso. Queremos seguir em frente e continuar explorando o que a IA pode nos ajudar a construir. Por exemplo, quero que o próprio cursor mude de cor ao passar o mouse sobre um botão. Por quê? Porque em algumas cenas como essa, o contraste entre a cor do mouse e o cursor não é forte o suficiente O cursor se torna, mas primeiro vamos terminar a animação e depois tentaremos usar a IA para nos ajudar a gerar a ideia e a solução para tornar o cursor mais perceptível ao passar o mouse Tudo bem. Então, quando estivermos satisfeitos com a animação, vamos começar a trabalhar na automação de mudança de cor do cursor . Vamos fazer uma captura de tela mostrando o cursor passando o mouse sobre o botão e enviá-la para o GPT para que ele possa entender Depois de colado, explicaremos o que queremos fazer e como esperamos resolver o problema O. GPT sugere usar o efeito de preenchimento no cursor e, em seguida, usar a expressão na propriedade de cor desse efeito Então, vamos seguir as etapas. Primeiro, precisamos adicionar o efeito de preenchimento em uma das pré-composições dos botões Em seguida, vamos mudar a cor. Digamos que para amarelo. Também podemos reduzir um pouco a forma do cursor e definir o tamanho para 65. E agora vamos colar a expressão que a GPT nos deu na propriedade que ela sugeriu Vejo que o cursor não muda a cor em nada, mesmo se tentarmos alterá-lo manualmente. Mas nada acontece. A cor não muda. Colamos a expressão na propriedade correta, então agora vamos contar à GPT o que aconteceu Perguntaremos se talvez seja melhor controlar a opacidade do efeito Isso funcionou quando usamos a opacidade para o estilo da camada de traçado anteriormente Tudo bem, então vamos copiar a nova expressão do GPT e voltar ao projeto Cancele a expressão na propriedade de cor e em vez disso, aplique-a à opacidade do efeito de preenchimento Ainda assim, nada acontece. Agora, o cursor está invisível por algum motivo, mesmo que não tenhamos nenhum erro de expressão. Vamos continuar tentando. Faça uma captura de tela da situação e informe ao GPT. Aplicamos a expressão, mas agora não conseguimos ver o cursor. Um GPT responde com uma explicação mais longa e uma nova versão da expressão Vamos tentar. Copie a expressão e vamos examinar rapidamente o resto da explicação para ver se há algo importante que possamos precisar. Digamos que não entendemos realmente o que ele está dizendo. Então, vamos voltar ao projeto e colar a nova expressão. Ok, ainda não consigo ver o cursor. Alterar os valores não faz nada. Honestamente, depois de tentar mais de duas vezes, estou começando a sentir que talvez essa abordagem simplesmente não funcione Quando eu verifico a animação, nada acontece. Então, claramente, algo está errado aqui. Podemos cancelar a expressão e, além disso, em situações como essa, prefiro tentar uma abordagem completamente diferente. Então, vamos remover o efeito de preenchimento do cursor e experimentá-lo com o efeito de tonalidade, porque funcionou melhor anteriormente Então, vamos adicionar o efeito de tonalidade ao cursor, mudar a cor para amarelo e agora fazer uma nova captura de tela e voltar ao bate-papo, informando ao GPT que o efeito de preenchimento não funcionou e agora queremos experimentar Deixe-o fazer suas coisas. Em seguida, copie a nova expressão. Pode ser um pouco complexo e experimente no projeto. Ainda não está funcionando. Sem erros, mas a cor não está mudando. Vamos tentar novamente e mostrar a ele a situação atual. Faça uma nova captura de tela e certifique-se de incluir a expressão na imagem Depois de colar a captura de tela, diga a ele que essa expressão não funciona Enquanto isso, enquanto ele gera a resposta, vamos voltar ao projeto e cancelar a expressão Também podemos tentar mudar a segunda cor do efeito de tonalidade para amarelo Talvez isso ajude. Tudo bem. A nova expressão está pronta. Vou examinar rapidamente suas explicações e sugestões para ver se há alguma pista importante para essa configuração Não achei nada crítico, então vamos copiar a nova expressão e ver o que acontece. Ainda não funciona. Agora, antes de iniciar uma nova conversa com o chat, quero tentar uma última coisa. Vamos voltar ao bate-papo e dizer a ele novamente que não está funcionando. Mas desta vez, também darei a ele algumas informações técnicas e informarei que a opacidade permanece em zero o tempo todo Às vezes, adicionar apenas um pequeno detalhe técnico como esse ajuda o GPT a entender melhor o que está errado. Então, vamos copiar a nova expressão e ver o que acontece. Incrível. Desta vez, funciona perfeitamente. Eu queria mostrar todo esse processo para que você entendesse que, às vezes preciso mudar sua abordagem, experimentar um efeito diferente ou adicionar alguns detalhes técnicos para ajudar a IA a ajudá-lo melhor. Lembre-se disso ao lidar com configurações complicadas como essa. Vamos assistir à animação que acabamos de criar. Incrível. Parece bom. Agora, antes de terminarmos, quero te dar uma dica rápida. Anteriormente, adicionamos um efeito de traçado a todas as pré-composições de botões Digamos que agora você queira alterar a cor do traçado, mas não queira fazer isso manualmente em cada um, especialmente se você puder alterar a cor novamente mais tarde. Aqui está um truque. Pesquise a propriedade de cor usando a barra de pesquisa no painel da linha do tempo Então, agora podemos ver a propriedade de cor do traçado para todas as pré-composições Em seguida, use o botão de seleção da propriedade em si, não o botão de seleção parental da camada, para vincular todas as propriedades de cor do traçado à primeira Faça isso para cada uma das pré-composições dos botões. Agora, você está controlando a cor do traçado de todos os botões em um único lugar. Isso funciona para qualquer propriedade de efeito. Você pode usar esse truque se não quiser ou não precisar configurar controladores complexos como fizemos na primeira lição Outra forma inteligente de controlar as propriedades de um efeito de uma camada é copiá-lo com os links de propriedades. Dessa forma, depois de colá-lo no resto das camadas da cena, você controlará todas as propriedades desse efeito a partir de apenas uma camada e não precisará criar as propriedades uma por uma. E com isso, terminamos esta lição. Vamos fechar todas as camadas e assistir à animação. Observe que, embora não tenhamos muitas camadas ou efeitos na cena, os tempos de renderização da visualização são muito lentos. Isso está acontecendo porque temos algumas expressões complexas dentro das camadas. Dizer isso porque quero que você saiba que usar muitas expressões em seu projeto pode realmente atrasá-lo. Tudo bem, a animação está ótima e podemos passar para a próxima lição Então, vamos abri-lo e fechar o atual. Na próxima, aprenderemos como criar uma automação de cliques com o cursor super útil . Vai ser uma ótima. Então nos vemos lá. 6. Automatizando cliques de cursor com marcadores: Volte. Nesta lição, aprenderemos como criar uma automação de cliques de cursor super útil focada em fazer as camadas reagirem à animação de cliques do cursor. Para começar, vamos primeiro criar a animação do cursor de clique. E o que quero dizer com isso é que quero ativar o clique do cursor sem criar quadros-chave para cada clique Sempre que você precisar de uma animação de clique para um cursor, é melhor colocar o cursor em uma pré-composição separada Então, vamos começar criando o cursor. E desta vez, vamos fazer com que fique lindo. Selecione a ferramenta de elipse e defina o preenchimento para usar um gradiente radial Vamos lidar com as cores em um segundo, então não se preocupe se elas não se parecerem exatamente com as minhas. Em seguida, desative o traço. Dica rápida. Se você quiser mudar o estilo de preenchimento rapidamente, basta passar o mouse sobre a caixa de preenchimento, segure Alt ou Option no Mac e clique em Isso percorrerá os tipos de preenchimento. A mesma coisa vale para a caixa de traços. Agora, segure a tecla Shift e desenhe um pequeno círculo na cena. Vamos definir o tamanho para 100 para que estejamos todos na mesma página. Em seguida, alinhe-o ao centro e comece a editar o gradiente Dos meus testes de gradiente anteriores, salvei várias cores Vou arrastá-los para fora para excluí-los. Agora, escolha uma cor bonita para a primeira parada de gradiente. Verifique se a opacidade está definida como 100. Faça o mesmo com a segunda cor. Vou escolher um rosa escuro e, novamente, garantir que a opacidade seja 100. Se você quiser adicionar mais interrupções de cor, basta clicar ao longo da linha. Você pode então escolher qualquer cor para o novo ponto. Se você mudar de ideia, arraste o cor para fora da linha para excluí-lo. Agora, para ajustar a aparência do gradiente, alterne para a ferramenta de seleção para revelar as alças do gradiente. Aumente o zoom e ajuste-os para obter a aparência desejada. Se você clicar acidentalmente em outro lugar e as alças desaparecerem, basta selecionar novamente a camada de forma de elipse ou abrir a propriedade de preenchimento de gradiente de dentro da camada abrir a propriedade de preenchimento de gradiente de dentro da Se isso ainda não funcionar, você pode ajustar os valores do ponto inicial ou do ponto final manualmente Isso fará com que as alças apareçam novamente no visualizador. Tudo bem. Agora, vamos adicionar um pequeno destaque à esfera para torná-la ainda melhor. Clique com o botão direito na camada da forma, vá para Estilos de camada e escolha a sombra interna. Abra as configurações do efeito, mude a cor para algo brilhante. Em seguida, altere o modo de mesclagem para tela para que ele se misture com a cor base Agora, você verá o destaque, ajustará os valores para obter uma aparência suave e brilhante Quando você estiver satisfeito com o design do cursor, passaremos a criar a animação real do clique. Como mencionei anteriormente, para automatizar os cliques posteriormente, devemos pré-compor Chame o novo cursor de pré-composição, verifique se as duas caixas de seleção estão marcadas e Agora entre na pré-composição do cursor. Aqui você pode criar qualquer animação de clique que desejar. Começaremos com algo simples e depois adicionaremos uma microanimação para aprimorar o efeito. Então, primeiro, vamos criar uma animação em escala simples. Vamos fazer com dez quadros. Vou começar na escala de 100%, depois reduzi-la para 70% e trazê-la de volta para 100 Agora, vou facilitar os quadros-chave e ajustar o movimento no editor gráfico para torná-lo mais natural Parece bom. Mas acho que podemos fazer com que o clique pareça ainda mais forte. Então, vamos voltar e reduzir o quadro-chave do meio para 60 em vez de 70 Sim, muito melhor agora. Agora, vamos adicionar uma pequena microanimação para deixar o clique ainda mais legal. É como um efeito cascata. Então, selecionarei a ferramenta Ellipse novamente, mas desta vez, desligarei o preenchimento e ativarei o traçado Vou colorir de branco e definir a largura do traço para quatro apenas por enquanto. Agora vou criar um círculo um pouco maior. Vamos fazer com que seja de 400 e eu vou alinhá-lo no centro Para a animação, vou até o final da animação de cliques e defino um quadro-chave para a escala Depois, vou voltar ao início e definir a escala para zero. Agora também vou animar a largura do traçado. No final da animação, vou defini-la como zero. E no início, vamos configurá-lo para 20. Vamos tentar 60. Hmm. Em vez disso, vamos tentar 40. Vou facilitar os quadros-chave e ajustar a velocidade, para que comece rapidamente e diminua Agora, vou mover essa forma de ondulação para trás da esfera principal. Vamos pré-visualizar isso. Na minha opinião, é muito rápido, então vou selecionar todos os quadros-chave. E enquanto pressiono Alt ou Option no Mac, arrasto um dos últimos quadros-chave até quadro 15 para esticá-lo. Vamos repetir isso novamente. Sim, parece ótimo. Agora que a animação do clique terminou, vamos limpar as coisas. Não queremos uma pré-composição gigante sem motivo. Então, vamos redimensionar a pré-composição para caber na animação. Defina a largura e a altura para 500 pixels. Incrível. Vamos voltar para a composição principal e descobrir como ativar essa animação de cliques sem duplicar quadros-chave toda vez que quisermos que o cursor clique duplicar quadros-chave toda vez que quisermos que o cursor Então, vamos pedir ao nosso novo amigo Chachi PT que nos ajude a automatizar o clique Primeiro, faça uma captura de tela em que possamos ver claramente o painel de visualização e o painel Camadas Agora, inicie uma nova conversa, cole a captura de tela e explique a situação É importante dizer ao GPT que já temos uma animação de clique pronta dentro do cursor antes da composição Como essa tarefa é bastante simples e eu a expliquei claramente, não vou perguntar: Você entende? Vou apenas perguntar como fazer. Agora, vejo que o GPT me deu duas opções e ambas envolvem a função de remapeamento de tempo Então, eu entendo que não importa qual método eu escolha, precisarei habilitar o remapeamento de tempo na minha composição de cursor Decidi seguir a segunda sugestão do GPT, que usa uma expressão que ativa a animação usando Vamos ver se isso funciona. Primeiro, habilite o remapeamento de tempo na camada do cursor. Nada acontece ainda. Tudo bem. Vamos voltar ao chat e copiar a expressão que a GPT nos deu para a propriedade time remap Agora retorne ao projeto. Clique com a tecla Alt no cronômetro ao lado Time remap e cole na expressão Nada acontece ainda. Tudo bem. Agora, vamos testá-lo. Vá para a segunda e adicione um marcador na camada do cursor. Verifique o atalho para adicionar um marcador no seu dispositivo se não tiver certeza Boom, funciona perfeitamente. Agora avance mais um segundo e adicione outro marcador. Bom. Vamos pré-visualizá-lo novamente. Incrível. Agora, vamos excluir os marcadores de teste e criar uma animação simples para o cursor enquanto ele se move sobre cada ícone No momento, o movimento do cursor é linear, então ele não para ao alcançar os ícones Em vez de criar manualmente quadros-chave de pausa, vamos facilitar todos os quadros-chave de posição Isso fará com que a velocidade diminua para zero antes e depois de cada uma, o que gera um efeito de pausa Se quiser ajustar a atenuação, você pode fazer isso manualmente no editor gráfico ou simplesmente usar o atalho Control Shift K ou Command Shift K no Mac para abrir o painel de velocidade do quadro-chave e Agora temos um bom movimento suave com pausas entre os ícones Vamos adicionar marcadores em cada ponto em que o cursor faz uma pausa Dessa forma, a animação de cliques será acionada exatamente onde quisermos, usando apenas esses marcadores. Vamos pré-visualizar tudo. Quão legal é isso? Estamos acionando a animação de cliques apenas colocando marcadores Não é necessário copiar quadros-chave ou camadas onduladas manualmente. Imagine quanto tempo isso levaria se tivéssemos que duplicar todos os quadros-chave e camadas para cada clique Agora, vamos dar um passo adiante com essa automação e fazer com que os ícones reajam à animação de cliques sem animá-los manualmente. Vou até o ponto em que os cursores passam o mouse sobre um dos ícones e fazem uma captura de tela da cena, certificando-me de que ela inclua os marcadores e os quadros-chave que e Em seguida, colarei essa captura de tela no chat GPT e explicarei o que quero fazer Desta vez, como não tenho 100% de certeza de que expliquei isso claramente, vou perguntar ao GPT Você entende o que eu quero dizer? Adoro perguntar isso porque o GPT geralmente responde usando os termos profissionais corretos para o que estou tentando criar, para que eu possa aprender a comunicar melhor essas ideias Tudo bem, GPT entendeu e me deu os passos. Desde que adicionei a captura de tela, ele já sabe o que está na minha cena Então, tudo que eu preciso fazer agora é seguir a etapa final. Essa etapa é aplicar a expressão à propriedade de escala das pré-composições do ícone Vamos experimentá-lo em um ícone e ver o que acontece. Perfeito. Funciona muito bem. Mas eu não sou muito fã de como a animação em escala parece um pouco rígida Então, vamos voltar ao bate-papo e perguntar se ele pode ser mais tranquilo Como você pode ver, o GPT já antecipou isso e perguntou se eu quero que o movimento seja mais suave, então vou dizer que sim e aguardar a Vamos testar a nova versão. Incrível. Isso parece muito melhor. Agora que estamos satisfeitos com os resultados, podemos aplicar essa expressão ao resto dos ícones. Mas antes de fazermos isso, tenho uma pergunta rápida para você. Qual é a maneira correta de copiar uma expressão no After Effects? Precisamos usar apenas a expressão de cópia, não apenas a cópia normal. Parece ótimo. E com isso, terminamos esta lição. Espero que você tenha aprendido muitas técnicas novas e, o mais importante, úteis durante esta sessão. Obrigado por assistir, e nos vemos na próxima. 7. Conclusão: Olá, sou eu de novo. Eu só queria agradecer muito por se juntar a mim neste curso e parabéns por terminá-lo. Espero que você aprenda muitas maneiras novas de usar a IA para acelerar seu fluxo de trabalho de animação e agora se sinta mais confiante usando expressões. Se você gostou do curso, agradeceria se você deixasse uma avaliação rápida. Isso me ajuda muito. Obrigado novamente por assistir e nos vemos na próxima.